/* ═══ Papier (25.09.2026) ═══════════════════════════════════════════════════════════════════════════
   Vier Papiersorten mit eigener Oberfläche, Schatten aus einem Licht (rechts oben) in drei Höhen, dazu
   Klebestreifen, Textmarker und Büroklammer. Legt sich über die bestehenden Flächen der Seiten – Aufbau,
   Drehung und Bewegung bleiben, wie sie sind. Wird am Ende von <body> geladen, Selektoren mit
   „html body … .x.x“, damit sie die Regeln der Seiten sicher überschreiben.
   Texturen: gebackene Kacheln /assets/img/papier/papier-<ton>.webp (vorlagen/zettel/papier-textur.py, STAERKE=.5,
   dann papier-backen.py), je 256 CSS-px, darüber halbtransparente Lichtverläufe. Bewusst OHNE background-blend-mode:
   Mit multiply malt WebKit an jeder Kachelecke ein fast schwarzes Pixel (gefunden 25.09.2026).
   Die Kachel muss IMMER die unterste Ebene sein (nach den Verläufen): Liegt sie über anderen Ebenen, entstehen dieselben Pünktchen.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */
:root{
  --p-t-blatt:url(/assets/img/papier/papier-blatt.webp);--p-t-hinten:url(/assets/img/papier/papier-hinten.webp);--p-t-creme:url(/assets/img/papier/papier-creme.webp);
  --p-t-karte:url(/assets/img/papier/papier-karte.webp);--p-t-vk:url(/assets/img/papier/papier-vk.webp);
  --p-t-block:url(/assets/img/papier/papier-block.webp);--p-t-blau:url(/assets/img/papier/papier-blau.webp);
  --p-s-kontakt:0 0 0 .5px hsl(210 2% 26%/.13),-.5px 1px 1px hsl(210 2% 26%/.12);
  --p-s-flach:var(--p-s-kontakt),-1px 2px 3px hsl(210 2% 26%/.07),-3px 6px 8px hsl(210 2% 26%/.06);
  --p-s-mittel:var(--p-s-kontakt),-1px 2px 2px hsl(210 2% 26%/.06),-2px 4px 5px hsl(210 2% 26%/.06),-5px 10px 12px hsl(210 2% 26%/.06),-10px 20px 26px hsl(210 2% 26%/.05);
  --p-s-hoch:var(--p-s-kontakt),-1px 2px 2px hsl(210 2% 26%/.05),-3px 6px 7px hsl(210 2% 26%/.05),-7px 14px 16px hsl(210 2% 26%/.05),-14px 28px 34px hsl(210 2% 26%/.05),-26px 52px 64px hsl(210 2% 26%/.06);
  --p-s-hover:var(--p-s-kontakt),-2px 4px 4px hsl(210 2% 26%/.05),-5px 10px 11px hsl(210 2% 26%/.05),-11px 22px 24px hsl(210 2% 26%/.05),-22px 44px 52px hsl(210 2% 26%/.06),-36px 72px 90px hsl(210 2% 26%/.07);
  --p-kante:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 22px hsl(38 40% 55%/.06)}

/* ① BLATT – Hauptinhalt: glattes Schreibpapier, Lichtkante oben, liegt am höchsten */
html body .dq-a__blatt.dq-a__blatt,html body .ang-papier.ang-papier,html body .ue-papier.ue-papier,html body .s-papier.s-papier:not(.skb-zettel),
html body .zw-papier.zw-papier:not(.bi-du--klebe),html body .co-papier.co-papier,html body .bk-blatt.bk-blatt,html body .px-papier.px-papier,
html body .fq-papier.fq-papier,html body .kt-brief__papier.kt-brief__papier,html body .rg-papier.rg-papier,html body .eg-papier.eg-papier,
html body .blatt__papier.blatt__papier,html.gb body .card.card,html.gb body .done-card.done-card,html.eg body .karte.karte,
html body .neu-story__card.neu-story__card,
/* kleinere Blätter: gleiche Sorte, liegen etwas tiefer */
html body .lauf-papier.lauf-papier,html body .ab-papier.ab-papier:not(.ba-express),html body .wl-papier.wl-papier,html body .rgu-karte.rgu-karte,
html body .rg-wl__eintrag.rg-wl__eintrag,html body .rg-lesen .rg-bau.rg-bau,html body .rg-toc.rg-toc{
  background-color:#fcfcfc;
  background-image:radial-gradient(130% 90% at 20% 0%,rgba(255,255,255,.75) 0%,rgba(255,255,255,.35) 45%,rgba(255,255,255,0) 75%),linear-gradient(158deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,0) 55%,rgba(241,241,242,.45) 100%),var(--p-t-blatt);
  background-size:100% 100%,100% 100%,256px 256px;background-repeat:no-repeat,no-repeat,repeat;background-position:0 0;background-blend-mode:normal;
  box-shadow:var(--p-s-hoch),var(--p-kante)}
html body .lauf-papier.lauf-papier,html body .ab-papier.ab-papier:not(.ba-express),html body .wl-papier.wl-papier,html body .rgu-karte.rgu-karte,
html body .rg-wl__eintrag.rg-wl__eintrag,html body .rg-lesen .rg-bau.rg-bau,html body .rg-toc.rg-toc,html body .neu-story__card.neu-story__card{box-shadow:var(--p-s-mittel),var(--p-kante)}
/* cremefarbene Blätter (große Stimmen, Zitat bei Anna) */
html body .neu-story__feature.neu-story__feature,html body .eg-papier--creme.eg-papier--creme{background-color:#fafafa;
  background-image:linear-gradient(158deg,rgba(255,253,248,.55) 0%,rgba(255,253,248,0) 60%,rgba(243,243,243,.4) 100%),var(--p-t-creme);
  background-size:100% 100%,256px 256px;background-repeat:no-repeat,repeat;background-position:0 0;background-blend-mode:normal;box-shadow:var(--p-s-hoch),var(--p-kante)}
/* Blätter dahinter */
html body .ang-blatt__hinten.ang-blatt__hinten,html body .ue-brief__hinten.ue-brief__hinten,html body .s-hinten.s-hinten,html body .kt-hinten.kt-hinten,
html body .blatt__hinten.blatt__hinten{background-color:#f8f8f8;
  background-image:linear-gradient(158deg,rgba(255,255,255,.3),rgba(241,241,242,.25)),var(--p-t-hinten);
  background-size:100% 100%,256px 256px;background-repeat:no-repeat,repeat;background-position:0 0;background-blend-mode:normal;box-shadow:var(--p-s-flach)}
@media (hover:hover) and (pointer:fine){
  html body .dq-a__blatt.dq-a__blatt:hover,html body a.wl-papier.wl-papier:hover,html body a.rgu-karte.rgu-karte:hover,html body .rg-wl__eintrag.rg-wl__eintrag:hover,
  html body a.zw-papier.zw-papier:hover,html body .ao-karte.ao-karte:hover{box-shadow:var(--p-s-hover),var(--p-kante)}
}

/* ② KARTEIKARTE – Merkzettel, Zusagen, Belege: fester Karton, cremig, Kartonkante unten */
html body .skb-zettel.skb-zettel,html body .kt-zettel.kt-zettel,html body .fq-merk.fq-merk,html body .gz-zettel.gz-zettel,html body .rgu-wz.rgu-wz{
  background-color:#fcf8ef;
  background-image:linear-gradient(180deg,rgba(255,253,247,.45),rgba(251,247,236,0) 70%),var(--p-t-karte);
  background-size:100% 100%,256px 256px;background-repeat:no-repeat,repeat;background-position:0 0;background-blend-mode:normal;
  box-shadow:var(--p-s-mittel),inset 0 -1.5px 0 hsl(38 30% 70%/.35),inset 0 1px 0 rgba(255,255,255,.9)}
html body .fq-merk__titel.fq-merk__titel{border-bottom-color:hsl(354 62% 58%/.5)}

/* ③ NOTIZZETTEL VOM BLOCK – Hinweise und Zubringer: einfaches Papier, Leimkante oben, liegt dicht auf */
html body .kt-tuerzettel.kt-tuerzettel,html body .rg-mini.rg-mini,html body .ba-express.ba-express,html body .bi-du--klebe.bi-du--klebe,html.gb body .foerder-box.foerder-box{
  background-color:#fbfbfb;
  background-image:linear-gradient(180deg,hsl(0 0% 94%/.5) 0 3px,rgba(255,255,255,0) 8px),linear-gradient(170deg,rgba(255,254,250,.5),rgba(255,254,250,0) 70%,rgba(243,243,243,.35)),var(--p-t-block);
  background-size:100% 100%,100% 100%,256px 256px;background-repeat:no-repeat,no-repeat,repeat;background-position:0 0;background-blend-mode:normal;
  box-shadow:var(--p-s-flach),inset 0 1px 0 rgba(255,255,255,.8)}
/* blaues Blockpapier: bleibt farblich abgesetzt (Alex, Businessplan-Seite) */
html body .be-zettel--weg.be-zettel--weg,html body .ao-avgs.ao-avgs{background-color:#eef3f8;
  background-image:linear-gradient(180deg,hsl(212 40% 80%/.45) 0 3px,rgba(255,255,255,0) 8px),linear-gradient(170deg,rgba(246,249,252,.5),rgba(246,249,252,0) 70%,rgba(214,225,238,.35)),var(--p-t-blau);
  background-size:100% 100%,100% 100%,256px 256px;background-repeat:no-repeat,no-repeat,repeat;background-position:0 0;background-blend-mode:normal;
  box-shadow:var(--p-s-flach),inset 0 1px 0 rgba(255,255,255,.8)}

/* ④ VISITENKARTE – Personen: glatter, fester Karton mit dünner sichtbarer Kante */
html body .rg-karte.rg-karte,html body .ao-karte-alex.ao-karte-alex{background-color:#fafafb;
  background-image:linear-gradient(165deg,rgba(255,254,251,.55) 0%,rgba(255,254,251,0) 60%,rgba(241,241,242,.35) 100%),var(--p-t-vk);
  background-size:100% 100%,256px 256px;background-repeat:no-repeat,repeat;background-position:0 0;background-blend-mode:normal;
  border-radius:3px;box-shadow:inset 0 1px 0 #fff,0 0 0 .5px hsl(210 2% 26%/.18),-1px 1px 0 #eff0f0,-1.5px 1.5px 0 hsl(210 2% 26%/.1),var(--p-s-mittel)}

/* KLEBESTREIFEN – halbtransparent, leichter Glanz, gerissene Enden (Maße, Lage, Drehung bleiben) */
html body .ue-abzug.ue-abzug::before,html body .wl-blaetter--wand .wl-blatt.wl-blatt::before,html body .fq-merk.fq-merk::before,html body .kt-tuerzettel.kt-tuerzettel::before,
html body .px-abzug.px-abzug::before,html.gb body .foerder-box.foerder-box::before,html body .eg-foto.eg-foto::before,html body .be-zettel--weg.be-zettel--weg::before,
html body .ao-avgs.ao-avgs::before,html body .bi-du--klebe.bi-du--klebe::before{
  background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.12) 40%,rgba(255,255,255,.22) 100%),hsl(240 2% 92%/.7);
  box-shadow:0 1px 1.5px hsl(210 2% 25%/.14);border:0;border-radius:0;
  -webkit-clip-path:polygon(3% 0,97% 0,97.6% 0%,97% 15%,96.6% 24%,98.6% 38%,96.1% 47%,96.8% 60%,96.8% 76%,98.2% 93%,97% 100%,3% 100%,2.9% 99%,2.9% 89%,3.8% 76%,4.5% 63%,1.2% 52%,.1% 37%,2.8% 27%,1.7% 13%,1.1% 0%);
  clip-path:polygon(3% 0,97% 0,97.6% 0%,97% 15%,96.6% 24%,98.6% 38%,96.1% 47%,96.8% 60%,96.8% 76%,98.2% 93%,97% 100%,3% 100%,2.9% 99%,2.9% 89%,3.8% 76%,4.5% 63%,1.2% 52%,.1% 37%,2.8% 27%,1.7% 13%,1.1% 0%)}

/* TEXTMARKER – nur für die eine wichtige Zahl eines Abschnitts: <span class="p-marker">0 €</span> */
.p-marker{position:relative;z-index:0;white-space:nowrap}
.p-marker::before{content:"";position:absolute;z-index:-1;left:-.16em;right:-.2em;top:.16em;bottom:.02em;mix-blend-mode:multiply;pointer-events:none;
  background:linear-gradient(97deg,hsl(49 100% 60%/0) 0%,hsl(49 100% 58%/.6) 3.5%,hsl(47 100% 60%/.46) 45%,hsl(49 100% 58%/.58) 94%,hsl(49 100% 60%/0) 100%);
  border-radius:.18em .5em .28em .55em/.45em .3em .5em .35em;transform:rotate(-1.4deg) skewX(-10deg)}

/* BÜROKLAMMER – für Blätter mit Anlage: <svg class="p-klammer" …> als erstes Kind eines positionierten Blatts */
.p-klammer{position:absolute;z-index:3;top:-22px;left:62%;width:24px;height:66px;pointer-events:none;filter:drop-shadow(-1.5px 2px 1.2px rgba(29,30,31,.28))}
.ub-expose .p-klammer{left:44%}
@media (max-width:639.98px){ .ub-expose .p-klammer{left:auto;right:14%} }

@media print{ .p-marker::before{mix-blend-mode:normal} }

/* ── V1.28 (25.09.2026, Alex: „Mach ruhig A–E“) ── */
/* A Abrisskante: Streifen aus demselben Blockpapier, oben unregelmäßig gerissen, deckt die gerade Oberkante */
html body .rg-mini.rg-mini::after,html body .kt-tuerzettel.kt-tuerzettel::after{content:"";position:absolute;left:0;right:0;top:-6px;height:9px;pointer-events:none;
  background:linear-gradient(180deg,hsl(180 3% 93%/.55) 0 5px,rgba(255,255,255,0) 9px),url(/assets/img/papier/papier-block.webp) 0 0/256px 256px;
  -webkit-clip-path:polygon(0 100%,0 38%,2.1% 22%,4.3% 44%,6.2% 18%,8.9% 33%,11.4% 12%,13.2% 40%,15.8% 20%,18.1% 36%,20.4% 10%,23% 30%,25.1% 16%,27.9% 42%,30.2% 22%,32.6% 8%,35.1% 34%,37.4% 18%,39.8% 40%,42.3% 14%,44.9% 30%,47.1% 6%,49.6% 28%,52.2% 20%,54.4% 44%,56.9% 16%,59.3% 32%,61.8% 10%,64.2% 36%,66.5% 22%,69.1% 42%,71.3% 12%,73.8% 30%,76.2% 18%,78.9% 40%,81.1% 8%,83.6% 26%,86% 16%,88.7% 38%,91.1% 20%,93.4% 34%,95.9% 12%,98.2% 30%,100% 22%,100% 100%);
  clip-path:polygon(0 100%,0 38%,2.1% 22%,4.3% 44%,6.2% 18%,8.9% 33%,11.4% 12%,13.2% 40%,15.8% 20%,18.1% 36%,20.4% 10%,23% 30%,25.1% 16%,27.9% 42%,30.2% 22%,32.6% 8%,35.1% 34%,37.4% 18%,39.8% 40%,42.3% 14%,44.9% 30%,47.1% 6%,49.6% 28%,52.2% 20%,54.4% 44%,56.9% 16%,59.3% 32%,61.8% 10%,64.2% 36%,66.5% 22%,69.1% 42%,71.3% 12%,73.8% 30%,76.2% 18%,78.9% 40%,81.1% 8%,83.6% 26%,86% 16%,88.7% 38%,91.1% 20%,93.4% 34%,95.9% 12%,98.2% 30%,100% 22%,100% 100%)}
html body .kt-tuerzettel.kt-tuerzettel::before{z-index:2}

/* B Karteikarte mit Linien: rote Kopflinie unter der Zusage, blaue Linien genau unter jeder Textzeile */
html body .kt-zettel.kt-zettel b,html body .skb-zettel.skb-zettel b{padding-bottom:7px;border-bottom:1.2px solid hsl(354 62% 58%/.45)}
html body .kt-zettel.kt-zettel span,html body .skb-zettel.skb-zettel span{margin-top:0;line-height:26px;padding-top:2px;
  background:repeating-linear-gradient(transparent 0 24px,hsl(208 55% 58%/.22) 24px 25px,transparent 25px 26px) 0 2px/100% 26px}

/* C Gewölbte Ecken: die unteren Ecken fangen weniger Licht und heben sich ab */
html body .ang-blatt__papier.ang-blatt__papier::after,html body .zw-blatt.zw-blatt::after,html body .dq-a__blatt.dq-a__blatt::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(38% 22% at 0% 100%,hsl(220 2% 30%/.13),hsl(220 2% 30%/0) 100%),radial-gradient(38% 22% at 100% 100%,hsl(220 2% 30%/.11),hsl(220 2% 30%/0) 100%),
    linear-gradient(180deg,rgba(255,255,255,0) 92%,rgba(255,255,255,.35) 100%)}
html body .ang-blatt__papier.ang-blatt__papier,html body .zw-blatt.zw-blatt,html body .dq-a__blatt.dq-a__blatt{
  box-shadow:var(--p-s-hoch),var(--p-kante),-14px 26px 20px -14px hsl(210 2% 22%/.34),16px 26px 20px -16px hsl(210 2% 22%/.26)}

/* D Knickfalten im Briefbogen (Brief in drei Teile gefaltet) + E Wasserzeichen „Neu.“ */
html body .kt-brief__papier.kt-brief__papier::after,html body .sk-brief__papier.sk-brief__papier::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent calc(33.3% - 3px),hsl(220 2% 30%/.05) calc(33.3% - 1px),rgba(255,255,255,.75) calc(33.3% + .5px),transparent calc(33.3% + 4px),
    transparent calc(66.6% - 3px),hsl(220 2% 30%/.05) calc(66.6% - 1px),rgba(255,255,255,.75) calc(66.6% + .5px),transparent calc(66.6% + 4px))}
html body .kt-brief__papier.kt-brief__papier::before,html body .sk-brief__papier.sk-brief__papier::before{content:"Neu.";position:absolute;right:7%;top:50%;transform:translateY(-50%) rotate(-8deg);pointer-events:none;z-index:0;
  font-family:'Plus Jakarta Sans',-apple-system,sans-serif;font-weight:800;font-size:clamp(110px,12vw,190px);letter-spacing:-.05em;line-height:1;
  color:hsl(38 22% 52%/.055);text-shadow:0 1.5px 0 rgba(255,255,255,.7),0 -1px 0 hsl(220 2% 30%/.045)}
html body .kt-brief__papier.kt-brief__papier::after,html body .sk-brief__papier.sk-brief__papier::after{z-index:0}
html body .kt-brief__papier.kt-brief__papier>*,html body .sk-brief__papier.sk-brief__papier>*{position:relative;z-index:1}

:root{--css-ok-papier:1}

/* ── WhatsApp-Knopf im Kontakt (26.09.2026, V1.30) ──
   Ersetzt die Zeile „Lieber direkt? WhatsApp · Telefon · E-Mail“ unter den Anfrageformularen. Alex wählte aus neun Varianten
   „D neu“: blaue Pille wie der Hauptknopf, weiße Schrift, WhatsApp-Logo in Grün (#25D366). */
html body .wa-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:18px 0 0;padding-top:16px;border-top:1px dashed rgba(23,74,120,.3);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;font-size:14.5px;line-height:1.5;color:rgba(25,27,29,.68)}
html body .wa-frage{flex-basis:100%}
html body a.wa-knopf{display:inline-flex;align-items:center;gap:10px;padding:12px 24px 12px 16px;border-radius:999px;background:#174a78!important;color:#fff!important;
  font-size:15.5px;font-weight:700;letter-spacing:-.005em;text-decoration:none!important;white-space:nowrap;
  box-shadow:0 8px 18px -8px rgba(23,74,120,.7);transition:background-color .2s ease,transform .2s ease}
html body a.wa-knopf svg{width:24px;height:24px;flex:none;fill:#25d366}
html body a.wa-knopf:hover{background:#21598e!important;transform:translateY(-1px)}
html body a.wa-knopf:focus-visible{outline:2px solid #174a78;outline-offset:3px}
html body .wa-oder a{font-weight:650;color:#174a78;text-decoration:underline;text-decoration-color:rgba(23,74,120,.35);text-underline-offset:4px}
@media (max-width:370px){ html body a.wa-knopf{padding:11px 18px 11px 13px;gap:8px;font-size:14.5px} html body a.wa-knopf svg{width:22px;height:22px} html body .wa-per{display:none} }
@media (prefers-reduced-motion:reduce){ html body a.wa-knopf{transition:none} html body a.wa-knopf:hover{transform:none} }