/* =====================================================================
   kellermanns.de – gemeinsame Gestaltung „Arbeitstisch“ (ab 11/2026)
   Wird auf jeder Seite NACH dem seiteneigenen <style> geladen und
   legt sich darueber. Aenderungen an Farben, Schriftgroessen, Buttons,
   Formularen und Fettstift-Bausteinen nur noch hier.

   Grundregeln
   - Dunkel bleibt. Gold ist der gelbe Fettstift: Buttons, Links,
     aktiver Menuepunkt und Markierungen von Hand. Keine goldenen
     Ueberschriften, Labels, Symbole oder Rahmen.
   - Eine Ueberschriften-Skala, keine gesperrten Grossbuchstaben-Kicker,
     keine Pfeile an Buttons, kleine Ecken, Trennung durch Abstand.
   - Handschrift (.fs-hand) ist vorerst die Platzhalter-Schrift
     „Permanent Marker“ (SIL OFL) und wird durch Torstens eigene
     Handschrift ersetzt.
   ===================================================================== */

@font-face{font-family:'Fettstift'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fettstift-platzhalter.woff2') format('woff2');}

:root{
  --h2: clamp(2rem, 3.4vw, 3rem);
  --linie: rgba(243,239,230,0.10);
  --rand-feld: #6E665B;          /* Formularrahmen, 3,3:1 */
  --platzhalter: #857A6B;        /* Platzhaltertext, 4,5:1 */
  --radius-k: 4px;
  --fettstift: #FFBB03;
  /* Bestehende Seiten-Variablen umdeuten: feine Linien und Beschriftungen
     waren bisher goldfarben, jetzt neutral. */
  --hairline: rgba(243,239,230,0.10);
  --bronze: #A79C8B;
}
p{text-wrap:pretty;}
.gold-italic{font-style:normal; color:inherit;}

/* ---------- 1  Kopfzeile + Menue ---------- */
header, body.mit-hero header.gescrollt{
  background:rgba(14,13,12,0.97); backdrop-filter:none; -webkit-backdrop-filter:none;
  border-bottom-color:var(--linie);
}
body.mit-hero header{border-bottom-color:transparent;}
body.mit-hero header:not(.gescrollt) nav .navlinks a:not(.nav-gutschein),
body.mit-hero header:not(.gescrollt) .navtrigger{color:#D8D1C4;}
.navpanel{border-color:var(--linie); border-radius:var(--radius-k);}
.mobilmenue .mm-titel{text-transform:none; letter-spacing:0; font-size:.85rem; color:var(--muted); font-weight:500;}
.mobilmenue .mm-gruppe, .mobilmenue .mm-cta{border-top-color:var(--linie);}

/* ---------- 2  Buttons ---------- */
.btn-gold, .btn-ghost{
  min-height:46px; padding:0 1.4rem; display:inline-flex; align-items:center; justify-content:center;
  font-size:.92rem;
}
.btn-ghost{border-color:rgba(243,239,230,0.28);}
.mobilmenue .mm-cta .btn-gold{display:flex;}

/* ---------- 3  Ueberschriften und Kicker ---------- */
.eyebrow{text-transform:none; letter-spacing:0; font-size:.9rem; font-weight:500; color:var(--muted);}
.section-head .num, .abschnitt-kopf .num{display:none;}
section.block h2, .block-rahmen h2, .wer-text h2, .kurz-kontakt h2, .schluss-cta h2{
  font-family:'Fraunces', serif; font-weight:500; font-size:var(--h2);
  line-height:1.1; letter-spacing:-0.01em; margin:0 0 clamp(1.6rem,3vw,2.4rem); max-width:30ch;
}
.hero h1{font-size:clamp(2.5rem,5.4vw,4.2rem); max-width:20ch;}
.hero p.lead{color:#C9C1B3;}
.hero .rule{display:none;}
.hero .eyebrow, .hero .bildanzahl, .hero .serie-meta{color:#C9C1B3;}

/* ---------- 4  Flaechen ---------- */
section.block + section.block{border-top:0;}
.block-rahmen{border-top:0;}
.hinweis{border:0; border-top:1px solid var(--linie); border-radius:0; background:none; padding:clamp(1.4rem,3vw,1.8rem) 0 0;}

/* ---------- 5  Kurzanfrage ---------- */
.kurz-kontakt{border:0; border-radius:var(--radius-k); background:var(--bg-raise);}
.kurz-kontakt .eyebrow{display:none;}
.kurz-direkt{border-top-color:var(--linie);}
.kurz-direkt .lbl, .kurz-feld label{
  text-transform:none; letter-spacing:0; font-size:.85rem; font-weight:500; color:#C9C1B3;
}
.kurz-feld input, .kurz-feld textarea{border-color:var(--rand-feld); border-radius:var(--radius-k); background:var(--bg);}
.kurz-feld input::placeholder, .kurz-feld textarea::placeholder{color:var(--platzhalter);}
.kurz-einwilligung input{border-color:var(--rand-feld); border-radius:3px;}
.kurz-einwilligung input:checked{background:transparent; border-color:var(--rand-feld);}
.kurz-einwilligung input:checked::after{
  border:0; transform:none; left:-3px; top:-8px; width:26px; height:26px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M4 14 C 7 16, 9 19, 10 22 C 13 15, 17 9, 24 3' fill='none' stroke='%23FFBB03' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.kurz-weiter .btn-ghost{white-space:normal; text-align:center;}
.schluss-cta{border-top:0;}

/* ---------- 6  Fusszeile ---------- */
footer{border-top-color:var(--linie);}
.footer-col h4{text-transform:none; letter-spacing:0; font-size:.9rem; color:var(--ink); font-weight:600;}
.footer-bottom{border-top-color:var(--linie);}
.footer-bottom .widerruf-link{border-color:rgba(243,239,230,0.28);}

/* ---------- 7  Fettstift-Bausteine ---------- */
.fs-hand{font-family:'Fettstift', 'Fraunces', serif; font-style:normal; font-weight:400;
  color:var(--fettstift); line-height:1; letter-spacing:.01em; white-space:nowrap;
  text-shadow:0 2px 10px rgba(0,0,0,.75);}
.fs-strich path{fill:none; stroke:var(--fettstift); stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1 1.2; stroke-dashoffset:0; filter:url(#fs-rau);}
.fs-js .fs-zeichnen .fs-strich path{stroke-dashoffset:1.05; transition:stroke-dashoffset 1s cubic-bezier(.6,.1,.2,1);}
.fs-js .fs-zeichnen .fs-strich path + path{transition-delay:.55s; transition-duration:.4s;}
.fs-js .fs-zeichnen .fs-hand{opacity:0; transform:translateY(4px) rotate(var(--dreh,-6deg)); transition:opacity .4s ease .9s, transform .5s ease .9s;}
.fs-js .fs-zeichnen.fs-an .fs-strich path{stroke-dashoffset:0;}
.fs-js .fs-zeichnen.fs-an .fs-hand{opacity:1; transform:rotate(var(--dreh,-6deg));}
/* Unterstreichung und Haken als Hintergrund (ohne Zeichnen) */
.fs-unterstrich{text-decoration:none; padding-bottom:6px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5 C 30 3, 70 6, 118 3' fill='none' stroke='%23FFBB03' stroke-width='2.6' stroke-linecap='round' opacity='.85'/%3E%3C/svg%3E") left bottom / 100% 7px no-repeat;}
@media (prefers-reduced-motion: reduce){
  .fs-js .fs-zeichnen .fs-strich path{transition:none; stroke-dashoffset:0;}
  .fs-js .fs-zeichnen .fs-hand{transition:none; opacity:1;}
}

/* ---------- 8  Filmstreifen „Moment davor“ (Startseite) ---------- */
.md{background:none; padding-top:clamp(2rem,4.5vw,3.2rem);}
.md::before{display:none;}
.md-zitat{font-size:var(--h2); line-height:1.15;}
.md-z2{color:var(--ink);}
.md-cite{text-transform:none; letter-spacing:0; font-size:.95rem; color:var(--muted);}
.md-cite::before{background:var(--muted);}
.md-rand, .md-nr{color:rgba(243,239,230,.35);}
.md-film{border-color:var(--linie);}
.md-lupe{box-shadow:0 0 0 2px var(--ink), 0 0 0 7px rgba(14,13,12,.85), 0 18px 50px rgba(0,0,0,.65);}
.md-notiz{font-family:'Fettstift','Fraunces',serif; font-style:normal; font-weight:400;}
.md-strich path, .md-kreuz path, .md-kreis path{filter:url(#fs-rau);}

/* ---------- 9  Startseite ---------- */
.hero .mz-anzeige{display:none !important;}
.hero.mz{min-height:clamp(560px, 80svh, 860px); padding-bottom:clamp(2.5rem,6vh,4rem);}
@media (max-width:760px){ .hero.mz{min-height:0; padding-top:clamp(9rem,22vh,11rem);} }
.fs-scharf{display:none;}
@media (min-width:761px){
  .hero.mz .fs-scharf{
    display:block; position:absolute; z-index:3; pointer-events:none;
    left:calc(var(--mz-fx,70%) + var(--mz-fg,120px) * .35); top:calc(var(--mz-fy,30%) + var(--mz-fg,120px) * .42);
    font-size:clamp(1.5rem,2.2vw,2rem); transform:rotate(-8deg); opacity:0;
  }
  .hero.mz.mz-af-an .fs-scharf{animation:fs-scharf .6s ease .55s forwards;}
}
@keyframes fs-scharf{from{opacity:0; transform:translateY(6px) rotate(-8deg);} to{opacity:1; transform:rotate(-8deg);}}
@media (prefers-reduced-motion: reduce){ .hero.mz .fs-scharf{display:none;} }

.startseite section.block{padding-top:clamp(3.5rem,8vw,6.5rem); padding-bottom:0;}
.startseite .schluss-cta{padding-top:clamp(3.5rem,8vw,6.5rem);}

/* Portfolio: Text unter dem Bild */
.portfolio-card{aspect-ratio:auto; background:none; border-radius:0; overflow:visible; display:flex; flex-direction:column;}
.portfolio-card .platzhalter{position:relative; inset:auto; aspect-ratio:4/5; border-radius:var(--radius-k); overflow:hidden; background:var(--tile);}
.portfolio-card .platzhalter img{transition:transform .6s cubic-bezier(.2,.7,.2,1);}
@media (hover:hover) and (pointer:fine){
  .portfolio-card:hover .platzhalter{transform:none;}
  .portfolio-card:hover .platzhalter img{transform:scale(1.04);}
  .portfolio-card:hover h3{color:var(--gold);}
}
.portfolio-card .karte{position:static; background:none; padding:1rem 0 0; display:flex; flex-direction:column;}
.portfolio-card .karte .eyebrow{display:none;}
.portfolio-card h3{font-size:1.45rem; margin:0 0 .4rem; transition:color .2s ease;}
.portfolio-card p{min-height:0; margin:0 0 .7rem; color:var(--muted);}
.portfolio-card .ansehen{display:inline-block; align-self:flex-start; font-weight:500;}

/* Foto in voller Breite */
.fs-gross{margin:clamp(4rem,9vw,7rem) 0 0;}
.fs-gross-bild{position:relative; max-width:1700px; margin:0 auto;}
.fs-gross-bild img{display:block; width:100%; height:auto; aspect-ratio:3/2;}
.fs-kreis-gross{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none;}
.fs-kreis-gross path{stroke-width:.7; filter:url(#fs-rau-gross); opacity:.95;}
.fs-ja{position:absolute; left:80%; top:26%; --dreh:-9deg; transform:rotate(-9deg); font-size:clamp(1.8rem,4vw,3.6rem); pointer-events:none;}
.fs-gross figcaption{display:flex; justify-content:space-between; gap:1rem; max-width:1400px; margin:.9rem auto 0;
  padding:0 clamp(1.2rem,4vw,3.5rem); color:var(--muted); font-size:.9rem;}
.fs-nr{font-variant-numeric:tabular-nums; letter-spacing:.04em; color:rgba(243,239,230,.45);}
@media (max-width:760px){ .fs-kreis-gross path{stroke-width:1.1;} .fs-ja{left:78%; top:16%;} }

/* Wer fotografiert */
.wer-karte{border-radius:var(--radius-k); border:0; box-shadow:0 30px 60px -28px rgba(0,0,0,0.85);}
.wer-karte figcaption{
  background:none; backdrop-filter:none; -webkit-backdrop-filter:none; border:0; border-radius:0;
  padding:0; left:1.1rem; bottom:.9rem; font-size:.85rem; color:#EDE7DB; text-shadow:0 1px 8px rgba(0,0,0,.8);
}
.wer-karte figcaption::before{display:none;}
.wer-karte::before{content:""; position:absolute; inset:auto 0 0 0; height:30%; z-index:1;
  background:linear-gradient(0deg, rgba(10,9,8,.6), transparent); pointer-events:none;}
.wer-punkte button{background:rgba(243,239,230,0.16);}
.wer-punkte button::after{background:var(--ink);}
.wer-zitat{border-left:0; padding:0; font-style:normal; font-size:clamp(1.25rem,2vw,1.5rem); color:var(--ink);}
.wer-fakten{margin:1.6rem 0 2rem; padding-top:1.2rem; border-top:1px solid var(--linie);
  color:var(--ink) !important; font-size:1rem !important;}
.wer-orte{border-top-color:var(--linie); align-items:baseline;}
.wer-orte .eyebrow{font-size:.95rem; color:var(--ink);}
.wer-band{-webkit-mask-image:none; mask-image:none; overflow:visible;}
.wer-band-lauf{animation:none !important; width:auto;}
.wer-band ul + ul{display:none;}
.wer-band ul{flex-wrap:wrap;}
.wer-band li{font-family:'Inter',sans-serif; font-style:normal; font-weight:400; font-size:.95rem; color:var(--muted); opacity:1;}
.wer-band li::after{content:","; color:var(--muted); font-size:1em; margin:0 .45rem 0 0;}
.wer-band li:last-child::after{content:"";}
.fs-dasbinich{position:absolute; z-index:8; top:-3.2rem; right:-4.5rem; width:170px; pointer-events:none;}
.fs-dasbinich .fs-hand{display:block; font-size:1.6rem; --dreh:-7deg; transform:rotate(-7deg); margin-left:1.6rem;}
.fs-dasbinich svg{display:block; width:80px; height:60px; margin:.2rem 0 0 .6rem; overflow:visible;}
.fs-dasbinich svg path{stroke-width:3;}
@media (max-width:1100px){ .fs-dasbinich{right:-1rem;} }
@media (max-width:560px){ .fs-dasbinich{top:-3.4rem; right:0; width:150px;} .fs-dasbinich .fs-hand{font-size:1.35rem;} }

/* Aktuelles, Cover, Angebote */
.strip .stripe-item{border:0; border-radius:var(--radius-k);}
.strip .stripe-item span::before{display:none;}
.feature-panel{border:0; border-top:1px solid var(--linie); border-radius:0; background:none; padding:clamp(1.6rem,3vw,2.2rem) 0 0;}
.feature-cover{transform:none; border-radius:2px;}
.angebot{border:0; border-radius:var(--radius-k); background:var(--bg-raise);}
@media (hover:hover) and (pointer:fine){.angebot:hover{box-shadow:none; transform:translateY(-2px);}}
.angebot-bild::after{display:none;}
.angebot-marke{display:none;}

/* ---------- 10  Preisseiten ---------- */
.pakete{padding-top:clamp(1rem,3vw,2rem);}
.paket{border-color:var(--linie); border-radius:var(--radius-k); background:var(--bg-raise);}
.paket.empfohlen{border-color:rgba(243,239,230,0.32); background:var(--bg-raise);}
.paket .marke{
  top:-1.15rem; right:1rem; padding:0; background:none; border-radius:0;
  font-family:'Fettstift','Fraunces',serif; font-weight:400; letter-spacing:.01em; text-transform:none;
  font-size:1.15rem; color:var(--fettstift); transform:rotate(-4deg); text-shadow:0 2px 8px rgba(0,0,0,.8);
}
.paket ul{border-top-color:var(--linie);}
.paket li::before{
  border:0; transform:none; width:16px; height:16px; left:-2px; top:.55rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M4 14 C 7 16, 9 19, 10 22 C 13 15, 17 9, 24 3' fill='none' stroke='%23FFBB03' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.paket .preis-hinweis{letter-spacing:0;}
.fs-preis{position:relative; display:inline-block;}
.fs-preis .fs-strich{position:absolute; left:-10%; top:-16%; width:120%; height:128%; overflow:visible; pointer-events:none;}
.fs-preis .fs-strich path{stroke-width:2.4;}
.zusatz-karte{border:0; border-top:1px solid var(--linie); border-radius:0; background:none; padding:1.2rem 0 0;}
.zusatz-karte .zpreis{color:var(--ink);}
.schritt{border-top-color:var(--linie);}
.schritt::before{color:var(--muted); font-family:'Inter',sans-serif; font-variant-numeric:tabular-nums;}

/* ---------- 11  Unterseiten (Infos, Preise Privat/Firmen, Über mich, Kontakt) ---------- */
.hero-ecken, .hero-raster{display:none !important;}

/* Flaechen ohne Goldverlauf, kleine Ecken */
.in-panel, .fa-panel, .ub-rahmen, .info-block.gold, .satz.empfohlen, .richtwert, .geb.empfohlen,
.rechnung, .querkarte, .saison-cta, .paket.empfohlen, .fa-satz.empfohlen{background:var(--bg-raise);}
.in-panel, .in-fakt, .in-schritt, .in-kasten, .in-bild, .in-bild img, .fa-panel, .fa-satz, .fa-leistung,
.um-zahl, .um-prinzip, .um-portrait img, .um-portrait::before, .querkarte, .rechnung, .beleg, .ub-rahmen,
.geb, .satz, .info-block, .faq-block details, .faq details, .beispiel-karte, .studio-karte, .formular,
.anfrageblock, .datenblock, .referenz, .ablauf-karte, .leistung{border-radius:var(--radius-k);}
.in-panel, .fa-panel, .ub-rahmen{border-color:var(--linie);}

/* Symbole in Goldringen: weg */
.in-ring, .um-ring, .fa-ring{display:none !important;}

/* Pillen und Kicker als ruhige Beschriftung */
.querkarte-marke, .in-bild figcaption, .um-portrait figcaption{
  background:none; border:0; border-radius:0; padding:0; backdrop-filter:none; -webkit-backdrop-filter:none;
  text-transform:none; letter-spacing:0; font-weight:500; color:var(--muted);
}
.querkarte-marke::before, .angebot-marke::before{display:none;}
.in-bild figcaption, .um-portrait figcaption{color:#EDE7DB; text-shadow:0 1px 8px rgba(0,0,0,.8);}
.feld label, .info-zeile .lbl, .direkt .lbl, .beleg-titel, .datenzeile .label, .beispiel-pfeil,
.um-portrait figcaption, .in-bild figcaption{text-transform:none; letter-spacing:0; font-size:.85rem; font-weight:500;}
.feld label, .info-zeile .lbl, .direkt .lbl, .datenzeile .label{color:var(--muted);}
.feld input, .feld select, .feld textarea{border-color:var(--rand-feld); border-radius:var(--radius-k);}
.feld input::placeholder, .feld textarea::placeholder{color:var(--platzhalter);}

/* „Beliebt“, „Bester Preis“ usw. als Fettstift-Notiz */
.fa-satz .marke, .geb .marke, .satz .marke, .preiszeile .bestmarke{
  background:none; border:0; border-radius:0; padding:0; box-shadow:none;
  font-family:'Fettstift','Fraunces',serif; font-weight:400; letter-spacing:.01em; text-transform:none;
  font-size:1.05rem; color:var(--fettstift); transform:rotate(-4deg); text-shadow:0 2px 8px rgba(0,0,0,.8);
}

/* Aufzaehlungen: Fettstift-Haken statt goldener Punkte/Winkel */
.geb li::before, .leistung li::before, .merkmale li::before, .zwei .merkliste li::before, .fa-leistung li::before{
  border:0; border-radius:0; box-shadow:none; transform:none; width:15px; height:15px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M4 14 C 7 16, 9 19, 10 22 C 13 15, 17 9, 24 3' fill='none' stroke='%23FFBB03' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Werte und Nummern nicht mehr gold */
.um-zahl .wert, .in-schritt .nr, .in-schritt:hover .nr, .preiszeile .wert, .geb .rahmen, .satz .rahmen,
.fa-satz .rahmen, .ablauf-karte .nummer, .ablauf-karte .icon, .beleg-summe span:last-child,
.karte-infos .karte-meta, .textseite h2, .textseite h3{color:var(--ink);}
.um-intro h2 em{font-style:normal; color:inherit;}
.quote-block cite{text-transform:none; letter-spacing:0; color:var(--muted);}

/* ====================================================================
   12  HELL – Champagner-Papier (ab 11/2026 Standard)
   ==================================================================== */
/* =====================================================================
   Variante HELL (Entwurf 11/2026): Champagner-Papier statt Schwarz.
   Wird nach basis.css geladen.
   - Inhalt auf Champagner, Schrift fast schwarz.
   - Dunkle Inseln bleiben dunkel: Kopfzeile, Hero/Buehnen, Filmstreifen,
     Lupe, Menue, Fusszeile.
   - Fettstift ist jetzt ROT wie auf echten Kontaktboegen; Buttons dunkel.
   ===================================================================== */
:root{
  --bg: #F1E8D8;            /* Champagner */
  --bg-raise: #E8DDCA;      /* zweites Blatt */
  --tile: #E5D9C4;
  --tile-hover: #DED0B8;
  --ink: #1E1B17;           /* 14:1 */
  --muted: #6B6155;         /* 5,0:1 */
  --bronze: #6B6155;
  --hairline: rgba(30,27,23,0.14);
  --linie: rgba(30,27,23,0.14);
  --rand-feld: #857A6B;     /* 3,5:1 */
  --platzhalter: #7A6F62;
  --fettstift: #FFBB03;     /* 4,4:1 */
  --gold: #FFBB03;          /* alles, was bisher "Gold" hiess, wird Fettstift-Rot */
  --knopf: #1E1B17;
  --knopf-text: #F1E8D8;
}
body{background:var(--bg); color:var(--ink);}

/* ---------- dunkle Inseln: alte Werte zurueck ---------- */
header, footer, .mobilmenue, .hero, .fh-stage, .md-film, .md-lupe{
  --bg: #0E0D0C; --bg-raise: #151412; --tile: #1A1815; --tile-hover: #211F1A;
  --ink: #F3EFE6; --muted: #A79C8B; --bronze: #A79C8B;
  --hairline: rgba(243,239,230,0.10); --linie: rgba(243,239,230,0.10);
  --fettstift: #FFBB03; --gold: #FFBB03;
  --knopf: #F1E8D8; --knopf-text: #1E1B17;
  color: var(--ink);
}
footer{background:#151412;}
nav .navlinks a.nav-gutschein, .mobilmenue a.mm-gutschein{color:#FFBB03;}

/* ---------- Buttons ---------- */
.btn-gold{background:var(--knopf); border-color:var(--knopf); color:var(--knopf-text);}
@media (hover:hover) and (pointer:fine){ .btn-gold:hover{background:var(--knopf); filter:brightness(1.25);} }
.btn-ghost{color:var(--ink); border-color:color-mix(in srgb, var(--ink) 35%, transparent);}
.btn-ghost:hover{color:var(--ink); border-color:var(--ink);}
:focus-visible{outline-color:var(--fettstift);}

/* ---------- Handschrift auf hellem Grund ohne Schatten ---------- */
.fs-hand, .paket .marke{text-shadow:none;}
.hero .fs-hand, .fs-gross .fs-hand{text-shadow:0 2px 10px rgba(0,0,0,.6);}

/* ---------- Fettstift-Grafiken in Rot ---------- */
.fs-unterstrich{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5 C 30 3, 70 6, 118 3' fill='none' stroke='%23FFBB03' stroke-width='2.6' stroke-linecap='round' opacity='.9'/%3E%3C/svg%3E");}
.kurz-einwilligung input:checked::after,
.paket li::before, .geb li::before, .leistung li::before, .merkmale li::before, .zwei .merkliste li::before, .fa-leistung li::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M4 14 C 7 16, 9 19, 10 22 C 13 15, 17 9, 24 3' fill='none' stroke='%23FFBB03' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- Startseite ---------- */
.md-zitat, .md-z1, .md-z2{color:var(--ink);}
.md-strich path{filter:url(#fs-rau);}
.wer-punkte button{background:rgba(30,27,23,0.16);}
.wer-punkte button::after{background:var(--ink);}
.wer-karte{box-shadow:0 26px 50px -26px rgba(60,40,10,.45);}
.wer-karte::after{background:var(--bg);}
.strip .stripe-item span{color:#F3EFE6;}
.feature-cover{box-shadow:0 12px 28px rgba(60,40,10,.25);}
.portfolio-card .platzhalter, .angebot, .paket{box-shadow:none;}

/* ---------- Formulare ---------- */
.kurz-direkt .lbl, .kurz-feld label, .feld label{color:var(--muted);}
.kurz-feld input, .kurz-feld textarea{background:#F7F1E6; color:var(--ink);}
.kurz-feld input:focus, .kurz-feld textarea:focus{border-color:var(--ink); box-shadow:0 0 0 3px rgba(30,27,23,.12);}
.kurz-status.ist-erfolg{background:rgba(70,120,50,.12); color:#2F5A1E; border-color:rgba(70,120,50,.4);}
.kurz-status.ist-fehler{background:rgba(180,50,30,.10); color:#8A2414; border-color:rgba(180,50,30,.4);}

/* ---------- Preisseiten ---------- */
.paket, .paket.empfohlen{background:var(--bg-raise); border-color:transparent;}
.paket.empfohlen{border-color:var(--ink);}
.paket li{color:var(--ink);}

/* ---------- Preisseiten: Feinschliff hell (11.11.2026) ---------- */
/* Kreis um den Preis mit Luft, verdeckt keine Ziffer */
.paket.empfohlen .preis{margin-bottom:.9rem; color:var(--fettstift);}
.fs-preis{padding:0 .1em;}
.fs-preis .fs-strich{left:-22%; top:-42%; width:144%; height:184%;}
.fs-preis .fs-strich path{stroke-width:2.2; filter:url(#fs-rau-gross);}

/* Dazu buchbar: Preise in Fettstift-Rot, oben ein kurzer Strich von Hand */
.zusatz-karte{border-top:0; position:relative; padding-top:1.4rem;}
.zusatz-karte::before{content:""; position:absolute; left:0; top:0; width:64px; height:8px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5 C 30 3, 70 6, 118 3' fill='none' stroke='%23FFBB03' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") left center / 100% 100% no-repeat;}
.zusatz-karte .zpreis{color:var(--fettstift); font-size:1.05rem;}

/* Ablauf: dunkles Blatt auf dem Tisch, Schritte mit handgeschriebenen Nummern */
.block-rahmen:has(.ablauf){
  --bg: #0E0D0C; --bg-raise: #151412; --ink: #F3EFE6; --muted: #B5AA98; --bronze: #B5AA98;
  --hairline: rgba(243,239,230,0.14); --linie: rgba(243,239,230,0.14);
  --fettstift: #FFBB03; --gold: #FFBB03; --knopf: #F1E8D8; --knopf-text: #1E1B17;
  color:var(--ink); background:#1E1B17;
  box-shadow:0 0 0 100vmax #1E1B17; clip-path:inset(0 -100vmax);
  margin-top:clamp(3rem,6vw,5rem); padding-top:clamp(3.5rem,7vw,5.5rem); padding-bottom:clamp(3.5rem,7vw,5.5rem);
}
.block-rahmen:has(.ablauf) h2{color:var(--ink);}
.schritt{border-top:0; padding-top:0;}
.schritt::before{font-family:'Fettstift','Fraunces',serif; font-size:2rem; line-height:1; color:var(--fettstift);
  margin-bottom:.7rem; transform:rotate(-4deg); transform-origin:left bottom; display:inline-block;}
.block-rahmen:has(.ablauf) .schritt p{color:var(--muted);}
.block-rahmen:has(.ablauf) .btn-ghost{color:var(--ink); border-color:rgba(243,239,230,.4);}

/* ====================================================================
   13  GELB auf Champagner (11.11.2026, Torstens Wunsch)
   Gelb ist wieder der Fettstift – aber auf hellem Grund nur flaechig
   und dick: Textmarker hinter Preisen, dicke Striche, gelbe Buttons.
   Schrift ist nie gelb auf Hell (1,4:1). Handnotizen auf Hell in
   dunkler Tinte, auf Fotos und dunklen Inseln gelb.
   ==================================================================== */
:root{
  --fettstift: #FFBB03;
  --gold: #1E1B17;               /* Links/Akzente als Text: dunkel */
  --knopf: #FFBB03; --knopf-text: #181509;
  --marker: #FFC933;             /* Textmarker-Flaeche */
}
header, footer, .mobilmenue, .hero, .fh-stage, .md-film, .md-lupe, .block-rahmen:has(.ablauf){
  --fettstift: #FFBB03; --gold: #FFBB03; --knopf: #FFBB03; --knopf-text: #181509;
}
.btn-gold{border-color:var(--knopf);}
@media (hover:hover) and (pointer:fine){ .btn-gold:hover{filter:brightness(1.06);} }

/* Textmarker-Bausteine */
.fs-marker{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M2 9 C 20 6, 50 7, 98 5 L 97 16 C 60 18, 30 17, 3 18 Z' fill='%23FFC933'/%3E%3C/svg%3E") 0 62% / 100% 58% no-repeat; padding:0 .12em;}

/* Handschrift auf Hell: dunkle Tinte */
.fs-hand{color:var(--ink);}
.hero .fs-hand, .fs-gross .fs-hand, .md-notiz{color:#FFBB03;}
.fs-dasbinich .fs-strich path{stroke:var(--ink);}

/* Links: dunkel mit gelbem Marker-Strich darunter */
.fs-unterstrich{color:var(--ink); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C 30 4, 70 7, 118 4' fill='none' stroke='%23FFBB03' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E"); background-size:100% 9px;}
.wer-knoepfe .link-out, .kurz-einwilligung a{color:var(--ink); text-decoration:underline; text-decoration-color:#FFBB03; text-decoration-thickness:3px; text-underline-offset:3px;}
.kurz-feld label .pflicht{color:var(--ink);}

/* Haken in Listen + Datenschutz-Haken: dick gelb mit dunkler Kontur fuer Halt */
.kurz-einwilligung input:checked::after,
.paket li::before, .geb li::before, .leistung li::before, .merkmale li::before, .zwei .merkliste li::before, .fa-leistung li::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M4 14 C 7 16, 9 19, 10 22 C 13 15, 17 9, 24 3' fill='none' stroke='%231E1B17' stroke-width='5.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 14 C 7 16, 9 19, 10 22 C 13 15, 17 9, 24 3' fill='none' stroke='%23FFBB03' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Startseite: Pose-Strich dick wie Fettstift */
.md-strich path{stroke-width:5.5; stroke:#FFBB03;}

/* Preise: Marker hinter dem empfohlenen Preis statt Kreis */
.paket.empfohlen .preis{color:var(--ink);}
.fs-preis{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M2 9 C 20 6, 50 7, 98 5 L 97 16 C 60 18, 30 17, 3 18 Z' fill='%23FFC933'/%3E%3C/svg%3E") 0 70% / 100% 62% no-repeat; background-position:0 108%; background-size:100% 42%; padding:0 .14em;}
.fs-preis .fs-strich{display:none;}
.paket .marke{color:var(--ink); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M2 9 C 20 6, 50 7, 98 5 L 97 16 C 60 18, 30 17, 3 18 Z' fill='%23FFC933'/%3E%3C/svg%3E") 0 115% / 100% 50% no-repeat; padding:0 .3em;}
.paket.empfohlen{border-color:#FFBB03; border-width:2px;}
.zusatz-karte .zpreis{color:var(--ink);}
.zusatz-karte .zpreis{display:inline-block; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M2 9 C 20 6, 50 7, 98 5 L 97 16 C 60 18, 30 17, 3 18 Z' fill='%23FFC933'/%3E%3C/svg%3E") 0 112% / 100% 48% no-repeat; padding:0 .25em; margin-left:-.25em;}
.zusatz-karte::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5 C 30 3, 70 6, 118 3' fill='none' stroke='%231E1B17' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");}
.schritt::before{color:#FFBB03;}

/* ====================================================================
   14  HELL – Unterseiten: dunkle Inseln, Medien-Baender, Karten
   ==================================================================== */
/* a) Dunkle Inseln: Buehnen, Medien-Baender und Beschriftungen auf Fotos */
.um-stage, .um-radar,
#trailer, #film, .block-rahmen.vp, .block-rahmen.bw, #beispiele, .um-block.al, #tasche,
.in-bild figcaption, .beispiel-karte, .karte-infos, .vp-art, .vp-dauer, .tr-dauer, .pa-kreis, .pa-titel .chip,
.lb-pfeil, .querkarte-marke, .in-beispiel .marke, .fs-ton, .ph-chip, .ph-hinweis, .vh-rec,
.um-sicht .anzeige, .um-gespeichert, .um-dunkel, .wer-karte figcaption, .strip .stripe-item{
  --bg: #0E0D0C; --bg-raise: #151412; --tile: #1A1815; --tile-hover: #211F1A;
  --ink: #F3EFE6; --muted: #B5AA98; --bronze: #B5AA98;
  --hairline: rgba(243,239,230,0.14); --linie: rgba(243,239,230,0.14);
  --fettstift: #FFBB03; --gold: #FFBB03; --knopf: #FFBB03; --knopf-text: #181509;
  --rand-feld: #6E665B; --platzhalter: #857A6B;
  color: var(--ink);
}
.querkarte-marke{color:var(--muted);}   /* steht nicht auf dem Foto */
.querkarte-marke{--muted:#6B6155;}

/* b) Medien-Baender: dunkles Blatt ueber die volle Breite */
#trailer, #film, .block-rahmen.vp, .block-rahmen.bw, #beispiele, .um-block.al, #tasche{
  background:#1E1B17; box-shadow:0 0 0 100vmax #1E1B17; clip-path:inset(0 -100vmax);
  margin-top:clamp(3rem,6vw,5rem); padding-top:clamp(3.5rem,7vw,5.5rem); padding-bottom:clamp(3.5rem,7vw,5.5rem);
}
#trailer h2, #film h2, .block-rahmen.vp h2, .block-rahmen.bw h2, #beispiele h2, .um-block.al h2, #tasche h2{color:var(--ink);}
#trailer p, #film p, .block-rahmen.vp p, .block-rahmen.bw p, #beispiele p, .um-block.al p, #tasche p{color:var(--muted);}
.um-radar{background:#1E1B17;}

/* c) Karten, die bisher dunkel-durchscheinend waren: jetzt zweites Blatt */
.in-fakt, .fa-satz, .beleg, .in-chips li, .um-chips li, .bw-text div.an, .in-faq details[open],
.pa-karte[aria-current="true"], .um-linse-info, .um-ort, .um-presse, .vp-eintrag[aria-current="true"], .vp-kanal,
.fa-satz.empfohlen{background:var(--bg-raise);}
.in-fakt, .fa-satz, .beleg{border-color:var(--linie);}
.fa-satz.empfohlen, .geb.empfohlen, .satz.empfohlen{border:2px solid #FFBB03;}

/* d) Marken („Beliebt“, „Bester Preis“ …): dunkle Handschrift mit Textmarker */
.fa-satz .marke, .geb .marke, .satz .marke, .preiszeile .bestmarke{color:var(--ink); text-shadow:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M2 9 C 20 6, 50 7, 98 5 L 97 16 C 60 18, 30 17, 3 18 Z' fill='%23FFC933'/%3E%3C/svg%3E") 0 115% / 100% 50% no-repeat; padding:0 .3em;}

/* e) Kleinkram */
.fs-nr{color:var(--muted);}
.skiplink{color:#1E1B17;}
.in-haken li::before{border-radius:0; width:17px; height:17px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M4 14 C 7 16, 9 19, 10 22 C 13 15, 17 9, 24 3' fill='none' stroke='%231E1B17' stroke-width='5.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 14 C 7 16, 9 19, 10 22 C 13 15, 17 9, 24 3' fill='none' stroke='%23FFBB03' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;}
.um-block.al h2 em, .um-intro h2 em{font-style:normal; color:inherit;}


/* ====================================================================
   15  ZWEITE FASSUNG (11/2026): Schibsted Grotesk, Tafeln, runde Formen,
       gelber Kontakt-Block. Vorbilder: autocell.io, koenig-photographie.de
   ==================================================================== */
@font-face{font-family:'Schibsted Grotesk'; font-weight:600; font-display:swap; src:url('schriften/schibsted-grotesk-latin-600-normal.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212;}
@font-face{font-family:'Schibsted Grotesk'; font-weight:600; font-display:swap; src:url('schriften/schibsted-grotesk-latin-ext-600-normal.woff2') format('woff2'); unicode-range:U+0100-024F,U+1E00-1EFF;}
@font-face{font-family:'Schibsted Grotesk'; font-weight:700; font-display:swap; src:url('schriften/schibsted-grotesk-latin-700-normal.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212;}
@font-face{font-family:'Schibsted Grotesk'; font-weight:700; font-display:swap; src:url('schriften/schibsted-grotesk-latin-ext-700-normal.woff2') format('woff2'); unicode-range:U+0100-024F,U+1E00-1EFF;}
@font-face{font-family:'Schibsted Grotesk'; font-weight:800; font-display:swap; src:url('schriften/schibsted-grotesk-latin-800-normal.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212;}
@font-face{font-family:'Schibsted Grotesk'; font-weight:800; font-display:swap; src:url('schriften/schibsted-grotesk-latin-ext-800-normal.woff2') format('woff2'); unicode-range:U+0100-024F,U+1E00-1EFF;}

:root{--kopf:'Schibsted Grotesk','Inter',sans-serif; --radius-k:14px; --rund:28px; --rand-aussen:clamp(8px,1.2vw,16px); --tafel:#E8DDCA; --tafel-rand:rgba(30,27,23,.16);}

/* a) Ueberschriften und alles, was bisher Fraunces war */
h1, h2, h3, h4,
.ablauf-karte .nummer,
.abschnitt-kopf .num,
.anfrageblock h2,
.angebot-txt h3,
.beispiel-titel,
.beleg-summe span:last-child,
.block-rahmen h2,
.bw-grad,
.bw-steuer .ende b,
.bw-text h3,
.datenblock .firmenname,
.fa-ablauf h3,
.fa-kopf h2,
.fa-leistung h3,
.fa-nr,
.fa-satz .preis,
.fa-satz h3,
.faq summary,
.faq-block summary,
.feature-panel h3,
.fr-blase .was,
.geb .preis,
.geb h3,
.hero h1,
.in-beispiel h3,
.in-fakt .wert,
.in-faq summary,
.in-kasten-kopf h3,
.in-schritt .nr,
.in-schritt h3,
.in-text h2,
.info-block h2,
.karte-infos h3,
.kurz-kontakt h2,
.lb-serie,
.leistung h3,
.md-zitat,
.pa-karte .name,
.pa-titel h3,
.paket .preis,
.paket h2,
.portfolio-card h3,
.preiszeile .titel,
.preiszeile .wert,
.querkarte-txt h3,
.quote-block blockquote,
.rechnung-kopf h3,
.referenz .titel,
.richtwert h3,
.saison-cta h3,
.satz .preis,
.satz h3,
.schluss-cta h2,
.schritt h3,
.section h2,
.section-head .num,
.st-teil b,
.studio-karte h3,
.textseite h2,
.tr-text h3,
.ub-karte h3,
.ub-kopf h2,
.um-bild figcaption,
.um-block h2,
.um-linse-info h3,
.um-ort .adresse,
.um-presse h3,
.um-prinzip h3,
.um-radar .heim text,
.um-sicht .anzeige b,
.um-signatur .name,
.um-titel h1,
.um-zahl .wert,
.vp-kanal strong,
.vp-unter h3,
.wer-text h2,
.wer-zahl .wert,
.wer-zitat,
.zs-punkt.x .wann,
.zusatz-karte h3,
.mobilmenue a{font-family:var(--kopf) !important; font-style:normal; font-weight:700; letter-spacing:-0.015em;}
h1, h2, .md-zitat, .um-titel h1{font-weight:800; letter-spacing:-0.025em;}
section.block h2, .block-rahmen h2, .wer-text h2, .kurz-kontakt h2, .schluss-cta h2, .in-text h2, .um-block h2{line-height:1.04;}

/* b) Runde Formen */
.btn-gold, .btn-ghost{border-radius:999px;}
.navpanel{border-radius:var(--radius-k);}

/* c) Dunkle Baender werden eingerueckte dunkle Tafeln */
#trailer, #film, .block-rahmen.vp, .block-rahmen.bw, #beispiele, .um-block.al, #tasche, .block-rahmen:has(.ablauf){
  box-shadow:none; clip-path:none; max-width:none; border-radius:var(--rund);
  margin-left:var(--rand-aussen); margin-right:var(--rand-aussen);
  padding-left:clamp(1.4rem,5vw,5rem); padding-right:clamp(1.4rem,5vw,5rem);
}
.um-radar{border-radius:var(--rund);}

/* d) Kontakt (Kurzanfrage) als gelber Block auf allen Seiten */
.schluss-cta{max-width:none; margin:var(--rand-aussen); padding:clamp(2rem,4vw,3rem) 0 0;}
.kurz-kontakt{background:#FFBB03; border-radius:var(--rund); padding:clamp(2.2rem,6vw,5.5rem) clamp(1.4rem,5vw,5rem);
  --ink:#181509; --muted:#3E3415; --linie:rgba(24,21,9,.25); --rand-feld:#4A3F1C; --platzhalter:#6B5A22;
  --knopf:#181509; --knopf-text:#FFBB03; --gold:#181509; color:var(--ink);}
.kurz-kontakt h2{font-size:clamp(2.4rem,5.4vw,4.6rem); color:var(--ink);}
.kurz-intro > p, .kurz-direkt .lbl, .kurz-feld label, .kurz-absenden .antwortzeit, .kurz-einwilligung label{color:var(--muted);}
.kurz-direkt a{color:var(--ink); font-weight:600;}
.kurz-feld input, .kurz-feld textarea{background:#FFF4D6; border-color:var(--rand-feld); color:var(--ink);}
.kurz-feld input:focus, .kurz-feld textarea:focus{border-color:#181509; box-shadow:0 0 0 3px rgba(24,21,9,.18);}
.kurz-feld label .pflicht, .kurz-einwilligung .pflicht{color:var(--ink) !important;}
.kurz-einwilligung a{color:var(--ink); text-decoration-color:#181509;}
.kurz-einwilligung input{border-color:var(--rand-feld); background:#FFF4D6;}
.kurz-einwilligung input:checked::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M4 14 C 7 16, 9 19, 10 22 C 13 15, 17 9, 24 3' fill='none' stroke='%23181509' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.kurz-kontakt .btn-gold{padding:0 1.8rem;}
.kurz-status.ist-erfolg{background:#FFF4D6; color:#2F5A1E;}
.kurz-status.ist-fehler{background:#FFF4D6; color:#8A2414;}

/* e) Startseite */
/* ---------- Hero als Inhaltsverzeichnis ---------- */
.startseite .hero.mz{min-height:clamp(620px, 92svh, 980px); align-items:flex-end; padding-bottom:clamp(2.5rem,6vh,4.5rem);}
.hx-bilder{position:absolute; inset:0; z-index:1; pointer-events:none;}
.hx-bilder img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.04);
  transition:opacity .6s ease, transform 1.2s cubic-bezier(.2,.7,.2,1);}
.hx-bilder img.an{opacity:1; transform:none;}
.hx-bilder::after{content:""; position:absolute; inset:0; opacity:0; transition:opacity .6s ease;
  background:linear-gradient(90deg, rgba(14,13,12,.88) 0%, rgba(14,13,12,.55) 38%, rgba(14,13,12,.1) 70%),
             linear-gradient(0deg, rgba(14,13,12,.85) 0%, rgba(14,13,12,.4) 35%, transparent 60%);}
.hx-bilder.an::after{opacity:1;}
.startseite .hero-inhalt{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:2rem 4rem; align-items:end;}
.startseite .hero h1{grid-column:1 / -1; font-size:clamp(1.05rem,1.5vw,1.3rem); font-family:'Inter',sans-serif; font-weight:500;
  letter-spacing:0; line-height:1.4; max-width:none; margin:0; color:#E4DCCD;}
.startseite .hero h1 .mz-z{display:inline;}
.hx-liste{list-style:none; margin:0; padding:0; counter-reset:hx;}
.hx-liste li{border-top:1px solid rgba(243,239,230,.18);}
.hx-liste li:last-child{border-bottom:1px solid rgba(243,239,230,.18);}
.hx-liste a{display:flex; align-items:baseline; gap:1.2rem; padding:.35rem 0; color:#F3EFE6; text-decoration:none;}
.hx-nr{font-family:'Inter',sans-serif; font-size:.85rem; font-variant-numeric:tabular-nums; color:#B5AA98; width:1.8rem; flex:none;}
.hx-name{font-size:clamp(1.95rem,3.9vw,3.45rem); line-height:1.02; color:rgba(243,239,230,.55);
  transition:color .25s ease; padding:0 .08em;}
.hx-liste a:hover .hx-name, .hx-liste a:focus-visible .hx-name, .hx-liste a.an .hx-name{color:#F3EFE6;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M2 9 C 20 6, 50 7, 98 5 L 97 16 C 60 18, 30 17, 3 18 Z' fill='%23FFBB03'/%3E%3C/svg%3E") 0 92% / 100% 22% no-repeat;}
.hx-was{margin-left:auto; font-family:'Inter',sans-serif; font-size:.9rem; color:#B5AA98; opacity:0; transform:translateX(-6px);
  transition:opacity .25s ease, transform .25s ease; white-space:nowrap;}
.hx-liste a:hover .hx-was, .hx-liste a:focus-visible .hx-was, .hx-liste a.an .hx-was{opacity:1; transform:none;}
.hx-seite{padding-bottom:.4rem;}
.startseite .hero p.lead{margin:0 0 1.6rem; font-size:1.02rem;}
@media (max-width:900px){
  .startseite .hero-inhalt{grid-template-columns:1fr;}
  .hx-was{display:none;}
}
@media (max-width:760px){ .startseite .hero.mz{min-height:0; padding-top:clamp(8rem,20vh,10rem);} .hx-name{font-size:clamp(1.6rem,7.5vw,2.25rem);} }
@media (prefers-reduced-motion: reduce){ .hx-bilder img, .hx-bilder::after, .hx-name, .hx-was{transition:none;} }

/* ---------- Tafeln ---------- */
.startseite main, .startseite{overflow-x:clip;}
.startseite .md, .startseite section.block, .startseite .fs-gross, .startseite .schluss-cta{
  max-width:none; margin:var(--rand-aussen); border-radius:var(--rund);
}
.startseite section.block{padding:clamp(3rem,6vw,5.5rem) clamp(1.4rem,5vw,5rem);}
.startseite .md{background:#1E1B17; overflow:hidden; padding-bottom:clamp(2.5rem,5vw,4rem);
  --ink:#F3EFE6; --muted:#B5AA98; --linie:rgba(243,239,230,.14); color:var(--ink);}
.startseite .md .md-kopf, .startseite .md .md-unter{padding-left:clamp(1.4rem,5vw,5rem); padding-right:clamp(1.4rem,5vw,5rem); max-width:none;}
.startseite .md-zitat, .startseite .md-z1, .startseite .md-z2{color:#F3EFE6;}
.startseite #portfolio{border:1px solid var(--tafel-rand);}
.startseite section.block.wer{background:var(--tafel);}
.startseite section.block.aktuell{border:1px solid var(--tafel-rand);}
.startseite #gutscheine{background:var(--tafel);}
.startseite .angebot{background:var(--bg);}
.startseite .fs-gross{overflow:hidden; background:#1E1B17;}
.startseite .fs-gross-bild{max-width:none;}
.startseite .fs-gross figcaption{max-width:none; padding:.9rem clamp(1.4rem,5vw,5rem) 1.1rem; margin:0; color:#B5AA98;}
.startseite .fs-gross .fs-nr{color:#B5AA98;}

/* ---------- Kontakt als gelber Block ---------- */
.startseite .schluss-cta{padding:0;}
.startseite .kurz-kontakt{background:#FFBB03; border-radius:var(--rund); padding:clamp(2.2rem,6vw,5.5rem) clamp(1.4rem,5vw,5rem);
  --ink:#181509; --muted:#3E3415; --linie:rgba(24,21,9,.25); --rand-feld:#4A3F1C; --platzhalter:#6B5A22;
  --knopf:#181509; --knopf-text:#FFBB03; color:var(--ink);}
.startseite .kurz-kontakt h2{font-size:clamp(2.4rem,5.4vw,4.6rem); color:var(--ink);}
.startseite .kurz-intro > p, .startseite .kurz-direkt .lbl, .startseite .kurz-feld label, .startseite .kurz-absenden .antwortzeit,
.startseite .kurz-einwilligung label{color:var(--muted);}
.startseite .kurz-direkt a{color:var(--ink); font-weight:600;}
.startseite .kurz-feld input, .startseite .kurz-feld textarea{background:#FFF4D6; border-color:var(--rand-feld); color:var(--ink);}
.startseite .kurz-feld input:focus, .startseite .kurz-feld textarea:focus{border-color:#181509; box-shadow:0 0 0 3px rgba(24,21,9,.18);}
.startseite .kurz-einwilligung a{color:var(--ink); text-decoration-color:#181509;}
.startseite .kurz-einwilligung input{border-color:var(--rand-feld); background:#FFF4D6;}
.startseite .kurz-einwilligung input:checked::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M4 14 C 7 16, 9 19, 10 22 C 13 15, 17 9, 24 3' fill='none' stroke='%23181509' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.startseite .kurz-kontakt .btn-gold{border-radius:999px; padding:0 1.8rem;}
.startseite .kurz-weiter{margin:1.6rem 0 0;}

/* Buttons etwas runder, passend zu den Tafeln */
.startseite .btn-gold, .startseite .btn-ghost{border-radius:999px;}

.hero:has(.hx-bilder.an) .fs-scharf, .hero:has(.hx-bilder.an) .mz-af{opacity:0 !important; animation:none !important;}

.startseite .hero h1{font-family:'Inter',sans-serif !important; font-weight:500 !important; letter-spacing:0 !important;}
:root{--h2:clamp(2.1rem,4vw,3.4rem);}
.startseite section.block h2, .startseite .wer-text h2{font-size:clamp(2.1rem,4.2vw,3.6rem);}
.md-zitat{font-size:clamp(2rem,4vw,3.4rem); line-height:1.05;}
.hx-name{font-family:var(--kopf); font-weight:800; letter-spacing:-0.025em;}

.fs-scharf{display:none !important;}

/* ====================================================================
   16  FEINSCHLIFF (11/2026): Buttons, Uebergaenge, Schatten
   Regeln: nur transform/opacity/Farbe animieren, starke ease-out-Kurve,
   UI unter 250 ms, Hover nur bei echter Maus, beim Druecken sofortige
   Rueckmeldung, kein Anheben von Karten, warme weiche Schatten.
   ==================================================================== */
:root{
  --ease-out: cubic-bezier(.23,1,.32,1);
  --schatten-foto: 0 1px 2px rgba(60,40,10,.08), 0 22px 44px -22px rgba(60,40,10,.38);
  --schatten-blatt: 0 1px 2px rgba(60,40,10,.06), 0 10px 28px -16px rgba(60,40,10,.24);
}

/* Buttons: ruhiger Hover (nur Farbe), knackiges Druecken */
.btn-gold, .btn-ghost{
  transition: transform 160ms var(--ease-out), background-color 180ms ease, border-color 180ms ease, color 180ms ease, filter 180ms ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none;
}
@media (hover:hover) and (pointer:fine){
  .btn-gold:hover, .btn-ghost:hover{transform:none;}
  .btn-gold:hover{filter:brightness(1.06);}
  .kurz-kontakt .btn-gold:hover, .knopf-dunkel:hover{filter:none; background:#2E2A23;}
}
.btn-gold:active, .btn-ghost:active{transform:scale(.97); transition-duration:100ms;}
.btn-gold:focus-visible, .btn-ghost:focus-visible{outline:2px solid currentColor; outline-offset:3px;}

/* Karten: nicht mehr anheben, kein Schlagschatten beim Hover; nur das Bild zoomt leicht */
@media (hover:hover) and (pointer:fine){
  a.stripe-item:hover, .angebot:hover, .querkarte:hover, .beleg:hover, .in-fakt:hover, .fa-satz:hover,
  .um-prinzip:hover, .in-schritt:hover, .in-beispiel:hover, .vp-kanal:hover{transform:none; box-shadow:none;}
  a.stripe-item:hover img, .angebot:hover .angebot-bild img, .portfolio-card:hover .platzhalter img,
  .serien-karte:hover img, .querkarte:hover img{transform:scale(1.03); filter:none;}
}
.strip .stripe-item img, .angebot-bild img, .portfolio-card .platzhalter img, .serien-karte img, .querkarte img{
  transition: transform 400ms var(--ease-out);
}
a.stripe-item:active, .angebot:active, .querkarte:active, .portfolio-card:active{transform:scale(.985); transition:transform 100ms var(--ease-out);}

/* Schatten: warm und weich statt schwarzer Wolke */
.wer-karte, .feature-cover{box-shadow:var(--schatten-foto);}
.kurz-kontakt, .paket.empfohlen{box-shadow:var(--schatten-blatt);}
.navpanel{box-shadow:0 14px 36px -14px rgba(0,0,0,.55); transform-origin:top center;}

/* Aufklapp-Menue: schnell und aus dem Menuepunkt heraus */
.navpanel{transition:opacity 140ms ease, transform 180ms var(--ease-out), visibility 180ms;}

/* Hero-Inhaltsverzeichnis: Bildwechsel zuegiger */
.hx-bilder img{transition:opacity 450ms var(--ease-out), transform 900ms var(--ease-out);}
.hx-bilder::after{transition:opacity 450ms var(--ease-out);}
.hx-name{transition:color 160ms ease;}
.hx-was{transition:opacity 160ms ease, transform 200ms var(--ease-out);}

/* Links mit Fettstift-Strich: Strich wird beim Hover kraeftiger */
.fs-unterstrich{transition:background-size 200ms var(--ease-out);}
@media (hover:hover) and (pointer:fine){ .fs-unterstrich:hover{background-size:100% 12px;} }

/* Formularfelder: Fokus ohne Verzoegerung */
.kurz-feld input, .kurz-feld textarea, .feld input, .feld select, .feld textarea{transition:border-color 150ms ease, box-shadow 150ms ease;}

@media (prefers-reduced-motion: reduce){
  .btn-gold:active, .btn-ghost:active, a.stripe-item:active, .angebot:active, .querkarte:active, .portfolio-card:active{transform:none;}
  .hx-bilder img{transform:none !important; transition:opacity 200ms ease;}
  .strip .stripe-item img, .angebot-bild img, .portfolio-card .platzhalter img, .serien-karte img, .querkarte img{transition:none;}
}

/* Portfolio-, Kategorie- und Serienseiten: Luft zwischen Hero und Bildern */
.hero + .serien-raster, .hero + .bildwand{margin-top:clamp(2.5rem,6vw,5rem);}

/* Gelber Kontakt-Block so breit wie der Inhalt darueber (Startseite: Tafeln, bleibt breit) */
body:not(.startseite) .schluss-cta{max-width:1400px; margin-left:auto; margin-right:auto;
  padding-left:clamp(1.2rem,4vw,3.5rem); padding-right:clamp(1.2rem,4vw,3.5rem);}
body:not(.startseite) .kurz-kontakt{padding:clamp(2rem,5vw,4rem) clamp(1.4rem,4vw,3.5rem);}

/* Haken in Listen (Preise Firmen „Was ihr erwarten könnt“): Fettstift-Haken statt dunkler Kreis */
.fa-merk li::before{border-radius:0; width:17px; height:17px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M4 14 C 7 16, 9 19, 10 22 C 13 15, 17 9, 24 3' fill='none' stroke='%231E1B17' stroke-width='5.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 14 C 7 16, 9 19, 10 22 C 13 15, 17 9, 24 3' fill='none' stroke='%23FFBB03' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;}

/* Kopfzeile ueber Hero-Fotos: oben durchsichtig (Foto laeuft bis ganz nach oben),
   erst beim Scrollen fester Grund; auf Buehnen (Fokus, Ueber mich, Hochzeitsvideo) immer durchsichtig */
html body.mit-hero header:not(.gescrollt),
html body.fh-buehne header, html body.fh-buehne header.gescrollt,
html body.pf-buehne header, html body.pf-buehne header.gescrollt,
html body.um-buehne header, html body.um-buehne header.gescrollt{
  background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom-color:transparent;}

/* Hover-/Aktiv-Zustaende, die bisher „Gold-Flaeche + dunkle Schrift“ waren:
   auf Champagner wurde --gold dunkel -> dunkles Symbol auf dunklem Kreis.
   Jetzt wieder echte gelbe Flaeche mit dunklem Inhalt. */
.ub-karte:hover .ub-symbol, .ub-symbol .nr,
.fa-ablauf li:hover .fa-nr, .in-sprung a:hover, .fq-leer button,
.um-linsen button[aria-pressed="true"], .vp-filter button[aria-pressed="true"], .vp-kanal .knopf, .vp-txt .neu,
.vp-eintrag[aria-current="true"] .vp-mini::after, .bw-schild, .al-knopf.gold,
.aw .in-schritt.an .in-ring, .sz-karten .in-schritt.an .in-ring, .zs-karten .in-schritt.an .in-ring{
  background-color:#FFBB03 !important; border-color:#FFBB03 !important; color:#181509 !important;}
.ub-karte:hover .ub-symbol svg, .fa-ablauf li:hover .fa-nr svg{color:#181509; stroke:currentColor;}

/* „Beliebt“ (Preise Privat & Familie) doppelt so gross */
.geb .marke{font-size:2.1rem !important; top:-1.35rem; right:1.2rem; line-height:1; padding:0 .25em .05em;}

/* Dunkle Tafeln auf Unterseiten (Ablauf, Filme, 360°, Spiel …) so breit wie der Inhalt */
body:not(.startseite) :is(#trailer, #film, .block-rahmen.vp, .block-rahmen.bw, #beispiele, .um-block.al, #tasche, .block-rahmen:has(.ablauf)){
  --seitenrand: clamp(1.2rem,4vw,3.5rem);
  box-sizing:border-box; width:calc(100% - 2 * var(--seitenrand)); max-width:calc(1400px - 2 * var(--seitenrand));
  margin-left:auto; margin-right:auto; padding-left:clamp(1.4rem,4vw,3.5rem); padding-right:clamp(1.4rem,4vw,3.5rem);}

/* Startseite: Filmstreifen-Tafel so breit wie der Inhalt von „Ich bin Torsten Kellermann.“ */
.startseite .md{margin-left:calc(var(--rand-aussen) + clamp(1.4rem,5vw,5rem)); margin-right:calc(var(--rand-aussen) + clamp(1.4rem,5vw,5rem));}
.startseite .md .md-kopf, .startseite .md .md-unter{padding-left:clamp(1.2rem,4vw,3.5rem); padding-right:clamp(1.2rem,4vw,3.5rem);}

/* Startseite: „Unterwegs in …“ zentriert */
.wer-orte{justify-content:center; align-items:baseline;}
.wer-band{flex:0 1 auto;}
.wer-band ul{justify-content:center;}
@media (max-width:560px){ .wer-orte{align-items:center; text-align:center;} }

/* ====================================================================
   17  INHALTSBREITE 80 % (11/2026, Torstens Regel)
   Hero-Bereiche bleiben 100 %, das grosse Braut-Foto der Startseite
   bleibt breit; alle Inhaltsbereiche (Texte, Karten, Tafeln, Galerien,
   gelber Kontakt-Block) sind hoechstens 80 % breit und zentriert.
   Auf schmalen Bildschirmen normaler Seitenrand statt 80 %.
   ==================================================================== */
:root{--inhalt:80%; --tafel-innen:clamp(1.4rem,4vw,3.5rem);}
@media (max-width:900px){ :root{--inhalt:calc(100% - 2 * clamp(1rem,4vw,1.5rem));} }

:is(body, main) > section:where(:not(.hero):not(.fh-stage):not(.um-stage)){
  box-sizing:border-box; width:var(--inhalt) !important; max-width:none !important;
  margin-left:auto !important; margin-right:auto !important;
  padding-left:0 !important; padding-right:0 !important;
}
/* Bereiche mit eigener Flaeche brauchen Innenabstand */
.startseite section.block, .startseite .md,
#trailer, #film, .block-rahmen.vp, .block-rahmen.bw, #beispiele, .um-block.al, #tasche, .block-rahmen:has(.ablauf){
  padding-left:var(--tafel-innen) !important; padding-right:var(--tafel-innen) !important;}
.startseite .md{padding-left:0 !important; padding-right:0 !important;}
.startseite .md .md-kopf, .startseite .md .md-unter{padding-left:var(--tafel-innen); padding-right:var(--tafel-innen);}
.kurz-kontakt{padding-left:var(--tafel-innen) !important; padding-right:var(--tafel-innen) !important;}

/* Fusszeile am gleichen Raster */
.footer-grid, .footer-bottom{max-width:none; width:var(--inhalt); margin-left:auto; margin-right:auto;}
footer{padding-left:0; padding-right:0;}

/* Ueber mich: Titel „Torsten Kellermann.“ halb so gross */
.um-titel h1{font-size:clamp(1.5rem,4.25vw,3.7rem) !important;}

/* Ueber mich: Radar-Karte hell, Schrift dunkel */
section .um-radar{
  --ink:#1E1B17; --muted:#6B6155; --bronze:#6B6155; --gold:#B88600; --linie:rgba(30,27,23,.14);
  background:radial-gradient(circle at 50% 46%, rgba(255,187,3,.12), transparent 60%), #E8DDCA !important;
  border:1px solid rgba(30,27,23,.12); color:var(--ink);}
section .um-radar .ring{stroke:rgba(150,105,0,.35);}
section .um-radar .ring.aussen{stroke:rgba(150,105,0,.55);}
section .um-radar .achse{stroke:rgba(150,105,0,.2);}
section .um-radar .ringtext{fill:#6B6155;}
section .um-radar .ort text{fill:#2B2620;}
section .um-radar .ort circle.punkt{fill:#1E1B17;}
section .um-radar .ort:hover circle.punkt, section .um-radar .ort:focus circle.punkt{fill:#FFBB03; stroke:#1E1B17; stroke-width:.5;}
section .um-radar .ort:hover text, section .um-radar .ort:focus text{fill:#1E1B17; font-weight:600;}
section .um-radar .ort text.km{fill:#7A5800;}
section .um-radar .heim circle{fill:#FFBB03; stroke:#1E1B17; stroke-width:.5;}
section .um-radar .heim .halo{fill:rgba(255,187,3,.35); stroke:none;}
section .um-radar .heim text{fill:#1E1B17; font-family:var(--kopf); font-style:normal; font-weight:700;}
section .um-radar .missale text, section .um-radar .missale text.km{fill:#1F5FC4;}
section .um-radar-fuss, section .um-radar .um-radar-fuss{color:#6B6155;}
section .um-radar .um-radar-fuss b{color:#1E1B17;}

/* Kein seitliches Verrutschen auf dem Handy (z. B. Filterleiste Videoseite) */
html, body{overflow-x:clip;}


/* Innenabstand der Tafeln muss staerker sein als die 80-%-Regel */
html body > section.block.block, html main > section.block.block,
html body > section.block-rahmen.vp, html body > section.block-rahmen.bw, html body > section.um-block.al,
html body > section.block-rahmen.block-rahmen:has(.ablauf),
html body > section#trailer, html body > section#film, html body > section#beispiele, html body > section#tasche{
  padding-left:var(--tafel-innen) !important; padding-right:var(--tafel-innen) !important;}
html body:not(.startseite) > section.block.block{padding-left:0 !important; padding-right:0 !important;}

/* Startseite: Filmstreifen-Bereich hell, Streifen ueber die volle Breite,
   Text darueber/darunter bleibt in der 80-%-Spalte */
html body.startseite > section.md{
  width:100% !important; margin-left:0 !important; margin-right:0 !important; padding-left:0 !important; padding-right:0 !important;
  background:none !important; border-radius:0; overflow:visible;
  --ink:#1E1B17; --muted:#6B6155; color:var(--ink);}
.startseite .md .md-kopf, .startseite .md .md-unter{padding-left:10% !important; padding-right:10% !important; max-width:none;}
@media (max-width:900px){ .startseite .md .md-kopf, .startseite .md .md-unter{padding-left:clamp(1rem,4vw,1.5rem) !important; padding-right:clamp(1rem,4vw,1.5rem) !important;} }
.startseite .md-zitat, .startseite .md-z1, .startseite .md-z2{color:#1E1B17;}
.startseite .md-cite, .startseite .md-unter{color:#6B6155;}
.startseite .md-cite::before{background:#6B6155;}
.startseite .md-strich path{stroke:#FFBB03;}

/* Handy: Formularfelder mind. 16 px, sonst zoomt das iPhone beim Antippen hinein */
@media (max-width:900px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea, select{font-size:16px !important;}
}

/* ====================================================================
   18  FESTE SCHRIFTSKALA (12.11.2026, von Torsten gewaehlt: „Kraeftig“)
   Ueberschriften Schibsted Grotesk, Fliesstext Inter. Desktop / Handy:
   Seitentitel 64/40 · Abschnitt 48/32 · Karte 22/20 · Text 17/16 · Klein 14
   Ausnahmen: Startseiten-Liste im Hero, Spiel, Radar, Handschrift.
   ==================================================================== */
:root{--t-h1:clamp(2.5rem,4.45vw,4rem); --t-h2:clamp(2rem,3.35vw,3rem); --t-h3:clamp(1.25rem,1.55vw,1.375rem);
  --t-text:clamp(1rem,1.2vw,1.0625rem); --t-klein:.875rem;}

/* Seitentitel */
html body .hero h1, html body .um-titel h1{font-family:var(--kopf) !important; font-size:var(--t-h1) !important; font-weight:800 !important; line-height:1.05 !important; letter-spacing:-.025em;}
html body.startseite .hero h1{font-family:'Inter',sans-serif !important; font-size:clamp(1.05rem,1.5vw,1.3rem) !important; font-weight:500 !important; letter-spacing:0;}

/* Abschnitts-Ueberschriften */
html body :is(section.block, .block-rahmen, .wer-text, .kurz-intro, .um-wrap, .um-auf, .in-text, .anfragetext, .fa-kopf, .ub-kopf, .md-kopf) > h2,
html body .block-rahmen > div > h2, html body .um-wrap > div > h2, html body .md-zitat,
html body section > h2{font-family:var(--kopf) !important; font-size:var(--t-h2) !important; font-weight:800 !important; line-height:1.06 !important; letter-spacing:-.025em;}

/* Karten- und Unter-Ueberschriften */
html body h3, html body .paket h2, html body .info-block h2, html body .textseite h2{font-family:var(--kopf) !important; font-size:var(--t-h3) !important; font-weight:700 !important; line-height:1.2 !important; letter-spacing:-.01em;}
html body .textseite h3{font-size:var(--t-text) !important;}
html body .in-faq-gruppe h3{font-size:var(--t-klein) !important;}
html body .al h3, html body .al-liste-kopf h3{font-size:var(--t-h3) !important;}

/* Fliesstext */
html body :is(main, body > section, .schluss-cta) p{font-family:'Inter',sans-serif; font-size:var(--t-text) !important; line-height:1.6;}
html body .hero p, html body .fh-stage p{font-size:var(--t-text) !important;}
html body :is(.paket .fuer, .karte p, .portfolio-card p, .zusatz-karte p, .schritt p, .in-schritt p, .querkarte p, .angebot-txt p, .feature-panel p, .geb p, .fa-satz p, .um-prinzip p){font-size:var(--t-text) !important;}

/* Klein: Beschriftungen, Bildunterschriften, Hinweise */
html body :is(figcaption, label, .lbl, .eyebrow, .preis-hinweis, .netto, .bildanzahl, .serie-meta, .md-unter, .md-cite, .antwortzeit, .kurz-einwilligung label, .einwilligung label, .hinweis-klein, .fs-nr, .um-radar-fuss, .feld .hilfe, .wer-fakten){font-size:var(--t-klein) !important;}
html body :is(.md-unter, .antwortzeit, .kurz-einwilligung label) {line-height:1.5;}
html body .wer-fakten{font-size:var(--t-text) !important;}

/* Kontaktseite: Abstand zwischen Hero und Formular */
.hero + .kontakt-raster{margin-top:clamp(2.5rem,6vw,5rem) !important;}
html body .fa-kopf h2, html body .ub-kopf h2, html body .um-zwei h2{font-family:var(--kopf) !important; font-size:var(--t-h2) !important; font-weight:800 !important; line-height:1.06 !important;}

/* ===========================================================================
   19  LESBARKEIT, TIPPFLAECHEN, HANDY-KOPF (12.11.2026)
   =========================================================================== */
/* „ja!“ ueber dem hellen Fenster: dunkle Fettstift-Kontur, damit es sich abhebt */
.fs-ja{-webkit-text-stroke:.07em #1E1B17; paint-order:stroke fill;
  text-shadow:0 2px 6px rgba(14,13,12,.55), 0 0 18px rgba(14,13,12,.35) !important;}
/* Filmrand-Beschriftung wie auf echtem Film: gelblich statt fast unsichtbar grau */
.md-rand, .md-nr{color:rgba(255,187,3,.78) !important;}

/* Handy-Kopf: „Anfrage senden“ bleibt sichtbar (nur auf sehr schmalen Geraeten nicht) */
@media (max-width:520px){
  header nav .btn-gold{display:inline-flex !important; align-items:center; min-height:44px;
    padding:0 .95rem; font-size:.82rem; line-height:1;}
}
@media (max-width:350px){ header nav .btn-gold{display:none !important;} }
.burger{width:44px; height:44px;}

/* Tippflaechen auf Touch-Geraeten: mindestens ~40-44 px hoch */
@media (pointer:coarse), (max-width:760px){
  .footer-col a{padding:.68rem 0; margin-bottom:0;}
  .footer-bottom a{display:inline-block; padding:.6rem 0;}
  a[href^="tel:"], a[href^="mailto:"]{display:inline-block; padding-top:.6rem; padding-bottom:.6rem;}
  .ub-link, .zurueck-link, a.direkt, a.link-out{display:inline-block; padding-top:.7rem; padding-bottom:.7rem;}
  .fq-alle, .um-linsen button, .al-reiter button, .vp-filter button{min-height:44px;}
  input[type="checkbox"]{width:22px; height:22px;}
}
@media (pointer:coarse), (max-width:760px){
  .footer-bottom .widerruf-link{display:inline-flex; align-items:center; min-height:40px;}
  .kontakt-raster input[type="checkbox"], form input[type="checkbox"]{width:22px; height:22px;}
}

/* Extremfaelle (break-ui): ueberlange Woerter brechen nur dann um, wenn sie allein
   nicht in die Zeile passen (z. B. „Landeserntedankfest“ als Serientitel auf dem Handy) */
h1, h2, h3, h4, p, li, dd, figcaption, .serie-meta, .bildanzahl, .serie-titel, .karte-titel{overflow-wrap:break-word;}
/* Serie ohne Bilder: kein Foto im Kopf -> dunkle Flaeche, damit Logo und Text lesbar bleiben */
.hero:has(> #heroFoto[hidden]){background:#16130F;}

/* Bild-Lightbox (Hochzeiten, Serien, Sanitorium) bleibt dunkel: helle Schrift darin */
.lightbox{--ink:#F3EFE6; --muted:#B9B09F; --hairline:rgba(243,239,230,.24); color:#F3EFE6;}
.lightbox .lb-serie{color:#F3EFE6 !important;}
.lightbox .lb-zaehler{color:#C9BFAD !important;}
.lightbox .lb-schliessen{color:#F3EFE6 !important; border-color:rgba(243,239,230,.35) !important; min-height:40px;}
.lightbox .lb-schliessen:hover, .lightbox .lb-schliessen:focus-visible{border-color:#FFBB03 !important; background:rgba(255,187,3,.12) !important;}
.lightbox .lb-bildtext{color:#D9D1C3 !important;}

/* ===========================================================================
   20  IMPRESSUM & DATENSCHUTZ (12.11.2026): Abstand zum Hero, zweispaltig
   =========================================================================== */
section.textseite{margin-top:clamp(3rem,6vw,5.5rem) !important;}
.textseite h2{scroll-margin-top:calc(var(--headerhoehe, 90px) + 1.5rem);}

/* Impressum: Bloecke in zwei Spalten, kein Block wird zerrissen */
.textseite.zweispaltig > *{max-width:none;}
.textseite.zweispaltig .abs{break-inside:avoid; margin-bottom:2.4rem;}
.textseite.zweispaltig .abs > h2{margin-top:0;}
@media (min-width:900px){
  .textseite.zweispaltig{column-count:2; column-gap:clamp(3rem,6vw,6.5rem);}
}

/* Datenschutz: links mitlaufendes Inhaltsverzeichnis, rechts der Text */
.textseite.mit-inhalt > *{max-width:none;}
.ds-text > *{max-width:72ch;}
.ds-text > h2:first-child{margin-top:0;}
.ds-inhalt{background:#E8DDCA; border-radius:22px; padding:1.4rem 1.5rem 1.2rem; margin-bottom:2.5rem;}
.ds-inhalt-titel{font-family:var(--kopf, 'Schibsted Grotesk'), sans-serif; font-weight:700; font-size:1.05rem; color:#1E1B17 !important; margin:0 0 .7rem !important;}
.ds-inhalt ol{list-style:none; margin:0; padding:0; counter-reset:ds;}
.ds-inhalt li{counter-increment:ds; margin:0;}
.textseite .ds-inhalt a{display:flex; gap:.6rem; padding:.42rem 0; color:#3A342C; border-bottom:0; font-size:.92rem; line-height:1.35;}
.textseite .ds-inhalt a::before{content:counter(ds, decimal-leading-zero); color:#8A7E6C; font-variant-numeric:tabular-nums; min-width:1.4rem;}
.textseite .ds-inhalt a:hover, .textseite .ds-inhalt a:focus-visible{color:#1E1B17; text-decoration:underline; text-decoration-color:#FFBB03; text-decoration-thickness:3px; text-underline-offset:4px;}
@media (min-width:900px){
  .textseite.mit-inhalt{display:grid; grid-template-columns:minmax(220px,19rem) minmax(0,1fr); gap:clamp(2.5rem,5vw,5.5rem); align-items:start;}
  .ds-inhalt{position:sticky; top:calc(var(--headerhoehe, 90px) + 1.2rem); margin-bottom:0;
    max-height:calc(100vh - var(--headerhoehe, 90px) - 2.4rem); overflow:auto;}
  .ds-text > *{max-width:76ch;}
}
nav.ds-inhalt{display:block !important; gap:0; align-items:initial;}
.textseite .ds-inhalt a{padding:.32rem 0;}
.textseite.zweispaltig .datenzeile{display:grid; grid-template-columns:minmax(9.5rem, 11rem) minmax(0,1fr); gap:.2rem 1rem; margin-bottom:.35rem;}
.textseite.zweispaltig .datenzeile .label{min-width:0; width:auto;}
@media (max-width:560px){ .textseite.zweispaltig .datenzeile{grid-template-columns:1fr;} }