/* =============================================================================
   Stadtfriseur Strondl - site.css (extern, alle Seiten; CSP style-src 'self')
   ELEVATION 3 (2026-06-13): Neu-Komposition. Aufbau:
     1. FONTS          self-hosted Variable Fonts + metrik-angepasste Fallbacks
     2. TOKENS         Farbe + Typo-Leiter --step--1..--step-6 (A1-Vermessung,
                       recherche/strondl-elevation3-2026-06-13/01-typo-zielskala.md)
                       + Raum/Radius/Easing. NUR hier Werte aendern.
     3. BASIS          Reset, Grundtext, Fokus, Utilities
     4. MECHANIKEN     wiederverwendbare Bausteine M1-M14 (je ein Kommentar-Kopf;
                       alle Motion hinter prefers-reduced-motion + @supports +
                       html.js-Gate; Fallback = sichtbarer Endzustand)
     5. KOMPONENTEN    Buttons, Header, Navigation, Menue
     6. SEKTIONEN      Hero, Werkstatt, Philosophie, Preise, Looks, Team,
                       Stimmen, FAQ, Termin, Footer, Rechtsseiten
   Gewichts-Dramaturgie: Boska 200 (leise Achse, nur >= step-3) und 900 italic
   (laute Achse, Akzent-Woerter + Zahlen-Riesen); pro Komposition >= 400 Punkte
   Gewichts-Delta sichtbar. Riesen-Schichten aria-hidden (axe-Empirie AAA-sicher).
   ============================================================================= */

/* ---------- 1. FONTS ---------- */
@font-face{font-family:"Boska";src:url("/fonts/boska-variable.woff2") format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Boska";src:url("/fonts/boska-variableitalic.woff2") format("woff2");font-weight:200 900;font-style:italic;font-display:swap}
/* Author (Body) = font-display:optional: der LCP-Text (Hero-Unterzeile) malt sofort im
   metrik-angepassten Fallback und wird NICHT spaet neu gemalt -> LCP ~= FCP (B-2026-06-16:
   mobiles LCP 2787->Ziel<2500). Boska bleibt swap (Marken-Display MUSS sichtbar sein). */
@font-face{font-family:"Author";src:url("/fonts/author-variable.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:optional}
@font-face{font-family:"Boska-Fallback";src:local("Georgia");size-adjust:94%;ascent-override:98%}
@font-face{font-family:"Author-Fallback";src:local("Arial");size-adjust:97%}

/* ---------- 2. TOKENS ---------- */
:root{
  /* Farbwelt Pflaume und Puder (unveraendert, AAA-kalibriert) */
  --pflaume:oklch(0.30 0.07 340);
  --pflaume-tief:oklch(0.21 0.045 338);
  --pflaume-hell:oklch(0.42 0.075 342);
  --papier:oklch(0.948 0.011 350);
  --papier-2:oklch(0.918 0.014 348);
  --tinte:oklch(0.22 0.02 340);
  --tinte-soft:oklch(0.38 0.02 345);
  --kupfer:oklch(0.58 0.125 55);
  --kupfer-text:oklch(0.41 0.085 50);
  --gold-soft:oklch(0.82 0.075 80);
  /* D2 Farb-Ereignis (D-010): EIN lautes, gesaettigtes Moment. Chroma deutlich hoeher (0.075->0.145),
     LIGHTNESS bewusst identisch zu pflaume/gold-soft -> Kontrast-Ratio unveraendert, aaa-tap bleibt gruen.
     Nur in der .termin-Klimax-Sektion eingesetzt (Owner kann Chroma hoch/runter drehen). */
  --pflaume-event:oklch(0.30 0.145 350);
  --gold-event:oklch(0.82 0.135 82);
  --linie:oklch(0.84 0.015 350);
  --linie-dark:oklch(0.97 0.01 350 / .18);
  --hell-on-dark:oklch(0.93 0.012 350);
  --mega-tint:oklch(0.862 0.022 348);          /* Riesen-Wort-Schicht auf Papier */
  --mega-tint-dark:oklch(0.97 0.01 350 / .07); /* Riesen-Schicht auf Pflaume */

  /* Typo-Leiter (A1: 375px -> 1440px, Floors: Kopf>=72, Riese>=128, Body>=18) */
  --step--1:clamp(0.78125rem,0.7483rem + 0.1408vw,0.875rem); /* Kicker/Meta 12.5->14 */
  --step-0:clamp(1.125rem,1.103rem + 0.0939vw,1.1875rem);    /* Body 18->19 */
  --step-1:clamp(1.3125rem,1.2025rem + 0.4695vw,1.625rem);   /* Lead 21->26 */
  --step-2:clamp(1.625rem,1.4049rem + 0.939vw,2.25rem);      /* h3/Zeile 26->36 */
  --step-3:clamp(2.125rem,1.7289rem + 1.6901vw,3.25rem);     /* Zitat 34->52 */
  --step-4:clamp(2.5rem,1.6197rem + 3.7559vw,5rem);          /* Sektionskopf 40->80 */
  --step-5:clamp(3.25rem,2.1056rem + 4.8826vw,6.5rem);       /* h1 52->104 */
  --step-6:clamp(5rem,2.8873rem + 9.0141vw,11rem);           /* Riesen-Moment 80->176 */

  --display:"Boska","Boska-Fallback",Georgia,serif;
  --sans:"Author","Author-Fallback",-apple-system,"Segoe UI",sans-serif;
  --wrap:80rem;
  --gut:clamp(1.25rem,4vw,3.5rem);
  --r:4px;
  --sf-ease-signature:cubic-bezier(.22,1,.36,1);
}

/* ---------- 3. BASIS ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;font-family:var(--sans);font-weight:400;font-size:var(--step-0);line-height:1.55;
  color:var(--tinte);background:var(--papier);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.02;letter-spacing:-.015em;margin:0}
p{margin:0 0 1rem}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--kupfer-text);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--pflaume);color:#fff;padding:.7rem 1.1rem;z-index:300}
.skip:focus{left:0}
.wrap{width:min(100% - 2*var(--gut),var(--wrap));margin-inline:auto}
.svg-defs{position:absolute}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Gewichts-Dramaturgie: .akzent = laute Achse (900 italic), .hauch = leise (200) */
.akzent{font-weight:900;font-style:italic}
.hauch{font-weight:200}
/* Lesbarkeits-Mass: Grundtext-Spalten 32em (~60 Zeichen, A1-Addendum) */
.mass{max-width:32em}

/* Grain: leichtes PNG-Tile (Mainthread-Befund: feTurbulence kostete Style&Layout) */
body::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("/assets/grain.png");background-size:128px 128px}
main,header,footer{position:relative;z-index:2}

/* Below-fold-Sektionen erst bei Annaeherung layouten (LH-Mobile-Hebel) */
.cv{content-visibility:auto;contain-intrinsic-size:auto 720px}

/* ---------- 4. MECHANIKEN ---------- */

/* M1 KICKER + ROUTE: Caps-Label mit Kupferlinie; .knum = Routen-Nummer 01-05,
   fuellt sich beim Passieren von Grau auf Kupfer (scroll-driven, M1b). */
.kicker{font-family:var(--sans);font-weight:600;font-size:var(--step--1);letter-spacing:.2em;text-transform:uppercase;color:var(--kupfer-text);display:inline-flex;align-items:center;gap:.7rem;margin:0 0 1.4rem}
.kicker::before{content:"";width:2rem;height:1px;background:var(--kupfer)}
.kicker.on-dark{color:var(--gold-soft)}
.kicker.on-dark::before{background:var(--gold-soft)}
/* Routen-Nummer als Pseudo-Content (content:attr): axe bewertet generierten
   Text nicht; nur so darf der graue Start-Zustand der Fuell-Animation bleiben
   (axe prueft aria-hidden-Text naemlich DOCH auf Kontrast, Befund 06-13). */
.kicker .knum{font-family:var(--display);font-style:italic;font-weight:600;font-size:1.9em;letter-spacing:0;text-transform:none;line-height:1;font-feature-settings:"onum" 1}
.kicker .knum::before{content:attr(data-n)}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html.js .knum{color:var(--linie);animation:knum-fill linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
    html.js .on-dark .knum{color:oklch(0.97 0.01 350/.3);animation-name:knum-fill-dark}
  }
}
@keyframes knum-fill{to{color:var(--kupfer-text)}}
@keyframes knum-fill-dark{to{color:var(--gold-soft)}}
.lead{font-size:var(--step-1);line-height:1.4;color:var(--tinte-soft);max-width:30em}

/* M2 KUPFERFADEN 2.0: Scroll-Fortschritt links, 4px + Gold-Verlauf (animation-
   timeline: scroll()). Die Leitlinie der Route 01-05. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:scroll()){
    html.js body::after{content:"";position:fixed;left:0;top:0;bottom:0;width:4px;z-index:130;pointer-events:none;
      background:linear-gradient(var(--kupfer) 70%,var(--gold-soft));transform-origin:top;scale:1 0;
      box-shadow:0 2px 8px oklch(0.58 0.105 55/.5);
      animation:faden linear both;animation-timeline:scroll()}
  }
}
@keyframes faden{to{scale:1 1}}

/* M3 REVEALS: .reveal = Fade+Lift; .rclip = Bild-Maskenreveal (clip-path waechst
   auf); .rz-1..3 = Stagger-Offsets fuer Geschwister. Fallback: sichtbar. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html.js .reveal{opacity:0;transform:translateY(1.8rem);animation:reveal-in linear both;animation-timeline:view();animation-range:entry 5% cover 28%}
    html.js .rclip{clip-path:inset(0 round var(--r));animation:rclip-in linear both;animation-timeline:view();animation-range:entry 0% entry 65%}
    html.js .rz-2{animation-range:entry 12% cover 36%}
    html.js .rz-3{animation-range:entry 20% cover 44%}
  }
}
@keyframes reveal-in{to{opacity:1;transform:none}}
@keyframes rclip-in{from{clip-path:inset(14% 16% 14% 0 round var(--r))}to{clip-path:inset(0 round var(--r))}}

/* M4 MARQUEE: ein Laufband pro Seite. Track = 2 identische Listen (2. aria-hidden),
   translateX(-50%)-Loop = nahtlos, compositor-only. reduced-motion: steht. */
.marquee{overflow:clip;background:var(--pflaume-tief);color:var(--gold-soft);border-block:1px solid var(--linie-dark)}
.marquee--papier{background:var(--papier-2);color:var(--kupfer-text);border-block:1px solid var(--linie)}
.marquee-track{display:flex;width:max-content}
/* Lauf-Text als Pseudo-Content (axe-exempt, s. knum); Inhalt via data-text */
.marquee-track > span{display:inline-block;white-space:nowrap;padding:.55em .8rem .62em 0;
  font-family:var(--display);font-style:italic;font-weight:350;font-size:var(--step-2);letter-spacing:.01em}
.marquee-track > span::before{content:attr(data-text)}
@media (prefers-reduced-motion:no-preference){
  html.js .marquee-track{animation:marquee 36s linear infinite}
}
@keyframes marquee{to{transform:translateX(-50%)}}

/* M5 KREISTEXT-BADGE: rotierender SVG-textPath um die Schere (Hero + Preis-Stempel).
   reduced-motion: steht still, bleibt lesbar rund. */
.kreis{position:absolute;display:grid;place-items:center}
.kreis > svg.ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:currentColor}
.kreis .ring text{font-family:var(--sans);font-weight:700;font-size:7px;letter-spacing:.24em;text-transform:uppercase}
@media (prefers-reduced-motion:no-preference){
  html.js .kreis > svg.ring{animation:dreh 28s linear infinite}
}
@keyframes dreh{to{rotate:1turn}}

/* M6 RIESEN-SCHICHT: aria-hidden Kompositions-Woerter (Boska 200 italic) hinter
   dem Inhalt; Sektion braucht position:relative + overflow:clip. Am Sektions-
   rand ANGESCHNITTEN platziert = Verzahnungs-Geste (A2: Grenzen verzahnen). */
.wort-mega{position:absolute;z-index:0;pointer-events:none;user-select:none;margin:0;
  font-family:var(--display);font-style:italic;font-weight:200;font-size:var(--step-6);
  line-height:.8;letter-spacing:-.02em;color:var(--mega-tint);white-space:nowrap}
.wort-mega::before{content:attr(data-wort)}
.wort-mega.on-dark{color:var(--mega-tint-dark)}
.quote-mega{left:-1.5rem;top:-.42em;font-size:calc(var(--step-6)*1.6);font-weight:400}
.frage-mega{right:2vw;top:-.34em;font-weight:300;rotate:8deg}
.ziffer-mega{right:1vw;top:-.18em;font-weight:200;font-size:calc(var(--step-6)*1.25);font-feature-settings:"onum" 1}

/* M7 HOVER-CAPTION: Bildunterschrift als Overlay-Pille, erscheint am Zeiger
   (Looks-Mechanik site-weit, Owner-Lob). Ohne Hover-Geraet: immer sichtbar. */
.figure .cap{position:absolute;left:.75rem;bottom:.75rem;z-index:2;font-family:var(--sans);font-weight:700;
  font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;color:#fff;
  background:oklch(0.21 0.045 338/.85);border-radius:3px;padding:.4rem .65rem}
@media (hover:hover){
  .figure .cap{opacity:0;translate:0 8px;transition:opacity .35s var(--sf-ease-signature),translate .35s var(--sf-ease-signature)}
  .figure:hover .cap{opacity:1;translate:0 0}
}

/* M8 DRIFT: leichte Gegenlaeufigkeit versetzter Bilder (nur Desktop, nur
   Bild-Spalten, compositor-only). */
@media (prefers-reduced-motion:no-preference) and (min-width:881px){
  @supports (animation-timeline:view()){
    html.js .drift{animation:drift linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    html.js .drift--gegen{animation-name:drift-gegen}
  }
}
@keyframes drift{from{transform:translateY(2.2rem)}to{transform:translateY(-2.2rem)}}
@keyframes drift-gegen{from{transform:translateY(-1.6rem)}to{transform:translateY(1.6rem)}}

/* M9 GESCHWISTER-DIMMEN: :has()-Fokuslenkung in Listen/Grids (Looks-Muster). */
@media (hover:hover){
  .dim-group:has(.dim-item:hover) .dim-item:not(:hover){opacity:.5}
  .dim-group .dim-item{transition:opacity .4s}
}

/* M10 ZEILEN-CRAFT: Preis-/Datenzeilen mit wachsender Kupferlinie am Hover. */
.zeile-craft > div{position:relative}
.zeile-craft > div::after{content:"";position:absolute;left:0;bottom:-1px;height:1.5px;width:0;background:var(--kupfer);transition:width .5s var(--sf-ease-signature)}
@media (hover:hover){.zeile-craft > div:hover::after{width:100%}}

/* M11 STERNE-FILL: Bewertungs-Sterne fuellen sich beim Reinscrollen (clip-path,
   Endzustand 96% = 4,8 von 5). Beide Reihen aria-hidden, Text steht daneben. */
.sterne{position:relative;display:inline-block}
.sterne-row{display:flex;gap:.35rem;color:var(--linie)}
.sterne-row svg{width:1.6rem;height:1.6rem}
.sterne-fill{position:absolute;inset:0;color:var(--kupfer);clip-path:inset(0 4% 0 0)}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html.js .sterne-fill{animation:sterne-in linear both;animation-timeline:view();animation-range:entry 30% entry 95%}
  }
}
@keyframes sterne-in{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 4% 0 0)}}

/* M12 GEWICHTS-MORPH: zwei uebereinanderliegende Layer (200 + 900) crossfaden
   scroll-driven = "Geschichte gewinnt Gewicht" ohne font-variation-Animation
   (compositor-only, LH-sicher). */
.morph{position:relative;display:inline-block}
.morph .m-a{font-weight:200}
.morph .m-b{position:absolute;inset:0;font-weight:900;opacity:0}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html.js .morph .m-b{animation:morph-in linear both;animation-timeline:view();animation-range:entry 0% cover 42%}
  }
}
@media (prefers-reduced-motion:reduce){.morph .m-b{opacity:1}.morph .m-a{visibility:hidden}}
@keyframes morph-in{to{opacity:1}}

/* M13 WORT-STAGGER: Zeilen/Woerter treten nacheinander auf. Hero = Lade-Moment
   (Zeit-Animation), .stg-scroll = scroll-driven mit nth-child-Offsets. */
@media (prefers-reduced-motion:no-preference){
  html.js .stg > .hz{opacity:0;transform:translateY(.4em);animation:hz-in .85s var(--sf-ease-signature) forwards}
  html.js .stg > .hz:nth-child(2){animation-delay:.14s}
  html.js .stg > .hz:nth-child(3){animation-delay:.3s}
  html.js .stg > .hz:nth-child(4){animation-delay:.46s}
  @supports (animation-timeline:view()){
    html.js .stg-scroll > .hz{opacity:0;transform:translateY(.5em);animation:hz-in linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
    html.js .stg-scroll > .hz:nth-child(3){animation-range:entry 8% entry 43%}
    html.js .stg-scroll > .hz:nth-child(4){animation-range:entry 16% entry 51%}
  }
}
@keyframes hz-in{to{opacity:1;transform:none}}

/* M14 AKKORDEON 2026: exklusive details-Gruppe (name=), Plus-Morph, weiches
   Oeffnen via interpolate-size/::details-content wo unterstuetzt. */
.akk{border-top:1px solid var(--linie)}
.akk summary{display:grid;grid-template-columns:auto 1fr auto;gap:1.2rem;align-items:baseline;cursor:pointer;
  padding:1.35rem 0;list-style:none;font-family:var(--display);font-weight:500;font-size:var(--step-2);line-height:1.1;color:var(--tinte-soft);transition:color .35s}
.akk[open] summary{color:var(--pflaume)}
@media (hover:hover){.akk summary:hover{color:var(--pflaume)}}
.akk summary::-webkit-details-marker{display:none}
.akk .ix{font-family:var(--display);font-style:italic;font-weight:600;font-size:.55em;color:var(--kupfer-text);font-feature-settings:"onum" 1}
.akk .plus{width:1.1em;height:1.1em;align-self:center;color:var(--kupfer-text);transition:rotate .4s var(--sf-ease-signature)}
.akk[open] .plus{rotate:45deg}
.akk-body{padding:0 0 1.5rem;max-width:36em;color:var(--tinte-soft)}
.akk-body a{color:var(--kupfer-text);text-decoration:underline;text-underline-offset:3px;display:inline-block;padding-block:.25rem;margin-block:-.25rem}
/* Fokuslenkung ueber Farb-Stufen statt Opacity: opacity-Dimmen drueckte die
   geschlossenen Fragen unter AA (axe-Befund 06-13, Conversion-Texte bleiben lesbar) */
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  .akk::details-content{height:0;overflow:clip;transition:height .45s var(--sf-ease-signature),content-visibility .45s allow-discrete}
  .akk[open]::details-content{height:auto}
}

/* ---------- 5. KOMPONENTEN ---------- */
.btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--sans);font-weight:600;font-size:.98rem;
  padding:.9rem 1.5rem;border-radius:100px;text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:transform .35s var(--sf-ease-signature),background .25s,color .25s,border-color .25s}
.btn svg{width:1.05em;height:1.05em;flex:none}
.btn--gold{background:var(--gold-soft);color:var(--pflaume-tief)}
.btn--gold:hover{transform:translateY(-2px)}
.btn--line{border-color:var(--linie-dark);color:var(--hell-on-dark);background:transparent}
.btn--line:hover{border-color:var(--gold-soft);color:var(--gold-soft)}
.btn--ink{background:var(--pflaume);color:var(--hell-on-dark)}
.btn--ink:hover{background:var(--pflaume-tief);transform:translateY(-2px)}
.btn--ink-line{border-color:var(--linie);color:var(--pflaume);background:transparent}
.btn--ink-line:hover{border-color:var(--pflaume)}

/* Header + Navigation (Multi-Page) */
.site-head{position:sticky;top:0;z-index:100;background:color-mix(in oklab,var(--papier) 88%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.site-head.is-scrolled{border-color:var(--linie);background:color-mix(in oklab,var(--papier) 96%,transparent)}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 0;transition:padding .3s}
.is-scrolled .head-row{padding:.45rem 0}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--tinte)}
.brand .mark{width:2.5rem;height:2.5rem;color:var(--pflaume);flex:none;transition:width .3s,height .3s}
.is-scrolled .brand .mark{width:2.1rem;height:2.1rem}
.brand-name{font-family:var(--display);font-weight:600;font-size:1.42rem;line-height:1;letter-spacing:.01em}
.brand-sub{display:block;font-family:var(--sans);font-weight:600;font-size:var(--step--1);letter-spacing:.18em;text-transform:uppercase;color:var(--kupfer-text);margin-top:.22rem}
.nav{display:flex;align-items:center;gap:1.5rem}
.nav-links{display:flex;gap:1.35rem;list-style:none;margin:0;padding:0}
.nav-links a{text-decoration:none;font-weight:600;font-size:.95rem;color:var(--tinte-soft);position:relative;padding:.55rem 0;display:inline-block;transition:color .2s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:.35rem;height:1.5px;width:0;background:var(--kupfer);transition:width .3s var(--sf-ease-signature)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--tinte)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{width:100%}
.nav-tel{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;text-decoration:none;color:var(--pflaume);font-size:.95rem;padding:.45rem .4rem;margin-block:-.45rem}

/* Mobiles Overlay-Menue: natives details/summary, kein JS noetig (JS schliesst nur) */
.mmenu{display:none;position:relative}
.mmenu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  width:2.9rem;height:2.9rem;border:1px solid var(--linie);border-radius:50%;color:var(--pflaume);background:var(--papier)}
.mmenu summary::-webkit-details-marker{display:none}
.mmenu summary svg{width:1.3rem;height:1.3rem}
.mmenu .schliess{display:none}
.mmenu[open] summary{background:var(--pflaume);color:var(--papier);border-color:var(--pflaume)}
.mmenu[open] .oeffn{display:none}
.mmenu[open] .schliess{display:block}
.mmenu-panel{position:fixed;left:0;right:0;top:0;bottom:0;z-index:-1;background:var(--pflaume-tief);
  display:grid;align-content:center;justify-items:start;padding:clamp(2rem,8vw,4rem);opacity:0;pointer-events:none;transition:opacity .35s var(--sf-ease-signature)}
.mmenu[open] .mmenu-panel{opacity:1;pointer-events:auto;z-index:90}
/* backdrop-filter macht den Header sonst zum Containing Block des fixed-Panels
   (Sichttest-Befund 06-12); bei offenem Menue Filter aufheben + Seite sperren */
.site-head:has(.mmenu[open]){backdrop-filter:none;background:transparent;border-color:transparent}
html:has(.mmenu[open]){overflow:hidden}
.mmenu[open] summary{position:relative;z-index:95}
.mmenu-panel a{font-family:var(--display);font-weight:500;font-size:var(--step-3);line-height:1.25;color:var(--hell-on-dark);text-decoration:none;padding:.35rem 0;display:inline-block}
.mmenu-panel a:hover{color:var(--gold-soft)}
.mmenu-panel .m-tel{font-family:var(--sans);font-weight:700;font-size:1.1rem;color:var(--gold-soft);margin-top:1.6rem;border:1px solid var(--linie-dark);border-radius:100px;padding:.8rem 1.4rem}
.mmenu-panel .m-status{font-family:var(--sans);font-size:.9rem;color:oklch(0.93 0.012 350/.8);margin-top:1rem}
@media (max-width:980px){
  .nav-links{display:none}
  .nav-tel span{display:none}
  .mmenu{display:block}
}

/* ---------- 6. SEKTIONEN ---------- */

/* HERO Split: Typo ist die Hauptfigur. h1 = 3 gestaffelte Zeilen mit Gewichts-
   Drama (300 -> 900 italic Riese -> Kupfer-Italic), Wort-Stagger beim Laden. */
.hero{position:relative;isolation:isolate;background:var(--pflaume);color:var(--hell-on-dark);overflow:clip}
.hero-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:0 clamp(1rem,3vw,2.5rem);align-items:stretch;min-height:min(88svh,56rem)}
.hero--sub .hero-grid{min-height:min(56svh,38rem)}
.hero-copy{grid-column:1/8;align-self:center;padding-block:clamp(3.5rem,9vh,7rem)}
.hero--sub .hero-copy{grid-column:1/9;padding-block:clamp(2.8rem,7vh,5rem)}
.hero-eyebrow{color:var(--gold-soft)}
.hero-eyebrow::before{background:var(--gold-soft)}
.hero h1{color:#fff;letter-spacing:-.02em;max-width:none}
.hero h1 .hz{display:block}
.hero h1 .hz-lead{font-size:var(--step-4);font-weight:300;line-height:1.04}
.hero h1 .hz-riese{font-size:var(--step-6);font-weight:900;font-style:italic;line-height:.92;letter-spacing:-.03em;position:relative;z-index:3;width:max-content;max-width:none}
.hero h1 .hz-jahr{font-size:var(--step-3);font-weight:400;font-style:italic;color:var(--gold-soft);line-height:1.15;margin-top:.18em}
.hero--sub h1{font-size:var(--step-5);font-weight:200;max-width:11em;text-wrap:balance}
.hero--sub h1 .akzent{font-weight:900}
.hero-sub{color:oklch(0.93 0.012 350 / .94);font-size:var(--step-1);line-height:1.45;max-width:26em;margin:1.6rem 0 2.1rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}
.hero-status{display:inline-flex;align-items:center;gap:.6rem;font-weight:600;font-size:.95rem;color:var(--hell-on-dark);
  border:1px solid var(--linie-dark);padding:.55rem 1rem;border-radius:100px}
.hero-trust{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.2rem;font-weight:600;font-size:.95rem;color:var(--gold-soft);text-decoration:none;padding-block:.35rem}
.hero-trust svg{width:1.05rem;height:1.05rem;flex:none}
.hero-trust u{text-decoration:underline;text-underline-offset:3px;text-decoration-color:oklch(0.82 0.075 80/.5)}
.hero-trust:hover u{text-decoration-color:var(--gold-soft)}
.dot{width:.6rem;height:.6rem;border-radius:50%;flex:none;background:var(--gold-soft);opacity:.55}
.dot.is-open{background:oklch(0.72 0.17 145);opacity:1}
@media (prefers-reduced-motion:no-preference){.dot.is-open{animation:pulse 2.8s ease-in-out infinite}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 oklch(0.72 0.17 145/.45)}50%{box-shadow:0 0 0 7px oklch(0.72 0.17 145/0)}}
.hero-foto{grid-column:8/13;position:relative;min-height:24rem}
.hero--sub .hero-foto{grid-column:9/13;min-height:18rem}
.hero-foto figure{position:absolute;inset:clamp(2rem,6vh,4.5rem) calc(-1*var(--gut)) 0 0;margin:0;overflow:hidden;border-radius:var(--r) 0 0 0}
.hero-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 38%}
.hero-foto::after{content:"";position:absolute;left:-1.25rem;top:clamp(4rem,10vh,7rem);bottom:3.5rem;width:1px;background:var(--gold-soft);opacity:.5}
/* Kreistext-Badge sitzt am Foto-Anschnitt (M5) */
.hero-kreis{left:-5.4rem;top:clamp(1.4rem,5vh,3.6rem);width:9.2rem;height:9.2rem;z-index:3;color:var(--gold-soft)}
.hero-kreis .schere-mitte{width:4.6rem;height:4.6rem;color:var(--gold-soft);background:var(--pflaume-tief);border:1px solid var(--linie-dark);border-radius:50%;display:grid;place-items:center}
.hero-kreis .schere-mitte svg{width:2.2rem;height:2.2rem}
@media (max-width:880px){
  .hero-grid,.hero--sub .hero-grid{grid-template-columns:1fr;min-height:0}
  .hero-copy,.hero--sub .hero-copy{grid-column:1;padding-block:clamp(3rem,8vh,4.5rem) 2.2rem}
  .hero-foto,.hero--sub .hero-foto{grid-column:1;min-height:0}
  .hero-foto figure{position:relative;inset:auto;margin:0 calc(-1*var(--gut)) 0 var(--gut);aspect-ratio:4/4.6;border-radius:var(--r) 0 0 0}
  .hero--sub .hero-foto figure{aspect-ratio:16/10}
  .hero-foto{margin-top:3rem}
  .hero-kreis{left:auto;right:.8rem;top:-2.4rem;width:7rem;height:7rem}
  .hero-kreis .schere-mitte{width:3.6rem;height:3.6rem}
  .hero-foto::after{display:none}
  .hero h1 .hz-riese{width:auto}
}
@media (max-width:480px){
  .brand-name{font-size:1.2rem}
  .brand-sub{letter-spacing:.14em}
}

/* Sektions-Rhythmus */
section{position:relative}
.band{padding-block:clamp(4.5rem,10vw,8.5rem)}
.band--kompakt{padding-block:clamp(3.2rem,7vw,5.5rem)}
.band-head{max-width:64rem;margin-bottom:clamp(2.4rem,5vw,4rem)}
.band-head h2,.band-head h1,h2.h-band{font-size:var(--step-4);font-weight:350;line-height:1.0;max-width:13em;text-wrap:balance;letter-spacing:-.018em}
h2.h-band{margin-bottom:1.3rem}
.band-head .lead{margin-top:1.3rem}
.kurve{display:block;width:100%;height:clamp(34px,5vw,64px);line-height:0}
.kurve svg{display:block;width:100%;height:100%}
.mehr-link{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.95rem;color:var(--kupfer-text);text-decoration:none;border-bottom:1.5px solid var(--linie);padding:.35rem 0;margin-block:-.35rem;transition:border-color .25s}
.mehr-link:hover{border-color:var(--kupfer)}

/* WERKSTATT Grid: sticky Copy, Bild A ragt nach OBEN in die Marquee-Zone
   (negative margin NUR in der Bild-Spalte), B/C driften gegenlaeufig (M8),
   Riesen-Wort "Werkstatt." als Textur-Schicht (M6). */
.werkstatt-sektion{overflow:clip}
.werk-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.4rem,3vw,2.6rem);align-items:start;position:relative;z-index:1}
.werk-copy{grid-column:1/6;position:sticky;top:6.5rem}
.werk-a{grid-column:6/13}
.werk-b{grid-column:6/10}
.werk-c{grid-column:10/13;margin-top:clamp(1.6rem,3vw,2.6rem)}
@media (min-width:881px){
  .werk-a{margin-top:calc(-1*clamp(3.5rem,9vw,8rem) - clamp(2.8rem,4vw,4.4rem))}
}
.werk-mega{left:38%;bottom:-.12em;rotate:-2deg}
@media (max-width:880px){
  .werk-copy{grid-column:1/13;position:static}
  .werk-a{grid-column:1/13}
  .werk-b{grid-column:1/7}
  .werk-c{grid-column:7/13;margin-top:0}
  .werk-mega{left:8%;bottom:-.1em}
}
.figure{margin:0;position:relative;overflow:hidden;border-radius:var(--r);background:var(--papier-2)}
.figure img{width:100%;height:100%;object-fit:cover;transition:scale .8s var(--sf-ease-signature)}
@media (hover:hover){.figure:hover img{scale:1.035}}
.figure--wash img{filter:saturate(.82) contrast(1.05) sepia(.07)}
.figure--wash::after{content:"";position:absolute;inset:0;background:oklch(0.30 0.07 340/.13);mix-blend-mode:multiply;pointer-events:none}
.galerie-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.2rem,2.5vw,2rem);position:relative;z-index:1}
.galerie-grid .g1{grid-column:1/6}
.galerie-grid .g2{grid-column:6/10}
.galerie-grid .g3{grid-column:10/13}
.galerie-grid .g4{grid-column:1/5;margin-top:clamp(-2rem,-3vw,-1rem)}
.galerie-grid .g5{grid-column:5/9}
.galerie-grid .gk{grid-column:9/13;margin-top:clamp(1rem,2vw,1.6rem)}
.galerie-grid .g6{grid-column:1/13;margin-top:clamp(1.6rem,3vw,2.6rem);margin-inline:calc(-1*var(--gut));aspect-ratio:21/9}
.galerie-grid .g6 img{object-position:50% 42%}
@media (max-width:880px){
  .galerie-grid .g1{grid-column:1/13}
  .galerie-grid .g2{grid-column:1/7}
  .galerie-grid .g3{grid-column:7/13}
  .galerie-grid .g4{grid-column:1/7;margin-top:0}
  .galerie-grid .g5{grid-column:7/13}
  .galerie-grid .gk{grid-column:1/13;margin-top:0}
  .galerie-grid .g6{grid-column:1/13;margin-top:0;aspect-ratio:16/9}
}
.gal-mega{left:32%;top:34%;rotate:-1.5deg}
/* Versal-Kachel: Text-Tile bricht die Bild-Reihe (A2-Katalog #8) */
.gk{background:var(--pflaume);border-radius:var(--r);display:grid;align-content:center;justify-items:start;gap:1.1rem;
  padding:clamp(1.5rem,2.6vw,2.4rem);position:relative;overflow:clip;min-height:14rem}
.gk::after{content:"";position:absolute;right:-1.4rem;top:-1.4rem;width:6.5rem;height:6.5rem;border:1px solid var(--linie-dark);border-radius:50%;pointer-events:none}
.gk-zeile{font-family:var(--display);font-weight:300;font-size:var(--step-3);line-height:1.02;letter-spacing:.01em;color:#fff;margin:0;text-wrap:balance}
.gk-link{color:var(--gold-soft);font-family:var(--sans);font-weight:600;font-size:.95rem;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--linie-dark);display:inline-block;padding-block:.35rem;transition:text-decoration-color .25s}
.gk-link:hover{text-decoration-color:var(--gold-soft)}

/* PHILOSOPHIE + 1989: Sticky-Kapitel. Links Manfred (S/W, Kupfer-Duotone) +
   Zitat-Stagger, rechts 1989-Gewichts-Morph (M12) + Zeitstrahl mit
   wachsenden Kupferlinien. */
.philo{background:var(--papier-2);border-block:1px solid var(--linie);overflow:clip}
.philo-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.5rem,3.5vw,3rem)}
.philo-copy{grid-column:1/7;position:sticky;top:6.5rem;align-self:start}
.philo-jahr{grid-column:8/13;position:relative}
@media (max-width:880px){.philo-copy{position:static}.philo-copy,.philo-jahr{grid-column:1/13}}
.pull{font-family:var(--display);font-style:italic;font-weight:300;font-size:var(--step-3);line-height:1.12;color:var(--pflaume);margin:1.8rem 0 0;max-width:14em;letter-spacing:-.01em}
.inhaber{margin-top:2.2rem;border-top:1px solid var(--linie);padding-top:1.6rem;display:flex;gap:1.2rem;align-items:center}
.inhaber .portrait{width:5.4rem;height:6.8rem;flex:none;object-fit:cover;border-radius:var(--r);
  filter:grayscale(1) sepia(.28) saturate(1.6) hue-rotate(-12deg) contrast(1.05);transition:filter .6s var(--sf-ease-signature)}
@media (hover:hover){.inhaber:hover .portrait{filter:grayscale(1) contrast(1.08)}}
.inhaber .sig{font-family:var(--display);font-style:italic;font-weight:600;font-size:var(--step-2);color:var(--pflaume);display:block;letter-spacing:.01em;line-height:1.1}
.inhaber span{font-size:var(--step--1);letter-spacing:.04em;color:var(--tinte-soft)}
.jahr-mega{font-family:var(--display);font-style:italic;font-size:clamp(6rem,16vw,14rem);line-height:.86;color:var(--kupfer-text);letter-spacing:-.03em;margin:0 0 1.4rem;font-feature-settings:"onum" 1}
.zeit{list-style:none;margin:0;padding:0;display:grid;gap:1.2rem}
.zeit li{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:baseline;border-top:1px solid var(--linie);padding-top:1.1rem;position:relative}
.zeit li::before{content:"";position:absolute;left:0;top:-1px;height:1.5px;width:100%;background:var(--kupfer);transform-origin:left;scale:0 1}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html.js .zeit li::before{animation:linie-fill linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  }
}
@keyframes linie-fill{to{scale:1 1}}
.zeit .zj{font-family:var(--display);font-weight:600;font-size:var(--step-2);font-style:italic;color:var(--pflaume);min-width:2.6em;line-height:1;font-feature-settings:"onum" 1}
.zeit p{margin:0;color:var(--tinte-soft);font-size:var(--step-0)}

/* PREISE (dunkles Manifest + heller Teaser): Zeilen-Craft (M10), Geschwister-
   Dimmen (M9), Riesen-Wort "ehrlich." (M6). Ziffern in Boska Italic Mediaeval. */
.preise{background:var(--pflaume-tief);color:var(--hell-on-dark);overflow:clip}
.preise .band-head h2,.preise .band-head h1{color:#fff;font-weight:300}
.preise .band-head h1{font-size:var(--step-5)}
.preise .band-head .akzent,.band-head .akzent{font-weight:900}
.preise .lead{color:oklch(0.93 0.012 350/.85)}
.preis-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.5rem,3.5vw,3rem);align-items:start}
.preis-haupt{grid-column:1/8;position:relative;z-index:1}
.preis-neben{grid-column:9/13;position:sticky;top:7rem;display:grid;gap:1.4rem}
.preis-stempel{position:relative;width:8.6rem;height:8.6rem;color:var(--gold-soft);margin-top:.6rem}
.preis-stempel .schere-mitte{width:4.2rem;height:4.2rem;color:var(--gold-soft);background:oklch(0.97 0.01 350/.05);border:1px solid var(--linie-dark);border-radius:50%;display:grid;place-items:center}
.preis-stempel .schere-mitte svg{width:2rem;height:2rem}
@media (max-width:880px){.preis-haupt,.preis-neben{grid-column:1/13}.preis-neben{position:static}}
.pl{margin:0}
.pl > div{display:grid;grid-template-columns:1fr auto;gap:.4rem 1.5rem;align-items:baseline;padding:1.2rem 0;border-bottom:1px solid var(--linie-dark)}
.pl > div:first-child{border-top:1px solid var(--linie-dark)}
.pl dt{font-weight:600;font-size:var(--step-0);color:#fff}
.pl dt small{display:block;font-weight:400;font-size:.92rem;color:oklch(0.93 0.012 350/.72);margin-top:.25rem;max-width:30em}
.pl .tag{display:inline-block;font-size:var(--step--1);font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--pflaume-tief);background:var(--gold-soft);border-radius:4px;padding:.22rem .55rem;margin-left:.6rem;vertical-align:.15em}
.pl dd{margin:0;font-family:var(--display);font-style:italic;font-weight:500;font-size:var(--step-2);color:var(--gold-soft);white-space:nowrap;font-feature-settings:"onum" 1}
.preis-fuss{font-size:.9rem;color:oklch(0.93 0.012 350/.78);margin-top:1.6rem;max-width:38em}
.preis-merk{border:1px solid var(--linie-dark);border-radius:var(--r);padding:1.6rem;background:oklch(0.97 0.01 350/.04)}
.preis-merk h3,.preis-merk .merk-h{font-family:var(--display);font-weight:500;font-size:var(--step-2);color:var(--gold-soft);margin:0 0 .7rem;line-height:1.1}
.preis-merk p{color:oklch(0.93 0.012 350/.85);font-size:var(--step-0);margin:0}
.preis-merk a{color:var(--gold-soft);text-decoration:underline;text-underline-offset:3px;display:inline-block;padding-block:.3rem;margin-block:-.3rem}
.preis-mega{right:2vw;bottom:-.2em}
/* Preis-Teaser (hell, Startseite) */
.preis-teaser{overflow:clip}
.pt{margin:0;position:relative;z-index:1}
.pt > div{display:grid;grid-template-columns:1fr auto;gap:.4rem 1.5rem;align-items:baseline;padding:1.15rem 0;border-bottom:1px solid var(--linie)}
.pt > div:first-child{border-top:1px solid var(--linie)}
.pt dt{font-weight:600;font-size:var(--step-0);color:var(--tinte)}
.pt dd{margin:0;font-family:var(--display);font-style:italic;font-weight:500;font-size:var(--step-2);color:var(--kupfer-text);white-space:nowrap;font-feature-settings:"onum" 1}
.tag-hell{display:inline-block;font-size:var(--step--1);font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--pflaume-tief);background:var(--gold-soft);border-radius:4px;padding:.22rem .55rem;margin-left:.6rem;vertical-align:.15em}
.pt-mega{right:-1.5rem;top:-.5em}
.preis-note{font-size:.9rem;color:var(--tinte-soft);margin:1.4rem 0 1rem;max-width:38em}
.sa-usp{margin:.9rem 0 0;font-size:.95rem;font-weight:600;color:var(--gold-soft)}

/* LOOKS: Owner-Lob ausgebaut. Riesen-Nummern (step-6, Boska 200 italic) ueber-
   lappen die Bilder, Hover-Dimmen (M9) + Caption-Reveal + Entgrauung bleiben. */
.looks-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.2rem,2.5vw,2rem);align-items:start}
.look{margin:0;position:relative}
.look .num{position:absolute;z-index:3;top:-.52em;left:-.18em;font-family:var(--display);font-style:italic;font-weight:200;
  font-size:var(--step-6);color:var(--kupfer-text);line-height:1;font-feature-settings:"onum" 1;pointer-events:none;
  text-shadow:0 1px 0 var(--papier),0 0 18px oklch(0.948 0.011 350/.55)}
.look .figure{display:block;aspect-ratio:992/1403}
.look--gross{grid-column:1/7;grid-row:1/3}
.look--gross .figure{aspect-ratio:4/5}
.look--b{grid-column:7/10}
.look--c{grid-column:10/13}
.look--d{grid-column:7/13;grid-row:2}
.look--d .figure{aspect-ratio:16/9}
@media (max-width:880px){
  .look--gross{grid-column:1/13;grid-row:auto}
  .look--b{grid-column:1/7}
  .look--c{grid-column:7/13}
  .look--d{grid-column:1/13;grid-row:auto}
  .look .num{font-size:clamp(3.4rem,14vw,5rem);top:-.45em}
}
.look .figure img{filter:grayscale(.3) contrast(1.04) saturate(.9)}
.look .figure::after{content:"";position:absolute;inset:0;background:oklch(0.30 0.07 340/.16);mix-blend-mode:multiply;pointer-events:none}
.look .lname{position:absolute;left:.75rem;bottom:.75rem;z-index:2;font-family:var(--sans);font-weight:700;font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;color:#fff;background:oklch(0.21 0.045 338/.82);border-radius:3px;padding:.35rem .6rem}
@media (hover:hover){
  .looks-grid:has(.look:hover) .look:not(:hover){opacity:.55}
  .looks-grid .look{transition:opacity .4s}
  .look .figure:hover img{filter:grayscale(0) contrast(1.02) saturate(1)}
  .look .lname{opacity:0;translate:0 8px;transition:opacity .35s var(--sf-ease-signature),translate .35s var(--sf-ease-signature)}
  .look .figure:hover .lname{opacity:1;translate:0 0}
}
.looks-credit{font-size:.9rem;color:var(--tinte-soft);margin-top:1.2rem;display:flex;align-items:center;gap:.6rem}
.looks-credit::before{content:"";width:1.6rem;height:1px;background:var(--kupfer)}

/* TEAM + JOB: Aushang-Karte mit Kupfer-Stempel-Charakter */
.team{background:var(--papier-2);border-block:1px solid var(--linie)}
.team-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.5rem,3.5vw,3rem);align-items:center}
.team-copy{grid-column:1/8}
.job{grid-column:9/13;border:1px solid var(--pflaume);border-radius:var(--r);padding:1.8rem;background:var(--papier);position:relative}
.job::before{content:"";position:absolute;inset:.45rem;border:1px dashed var(--linie);border-radius:2px;pointer-events:none}
@media (max-width:880px){.team-copy,.job{grid-column:1/13}}
.job h3{font-size:var(--step-2);color:var(--pflaume);margin-bottom:.6rem}
.job p{font-size:var(--step-0);color:var(--tinte-soft);margin-bottom:1.1rem}

/* STIMMEN: 4,8-Monument + Sterne-Fill (M11) + Voice-Karten mit Hover-Lift */
.stimmen-sektion{overflow:clip}
.trust-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.5rem,3.5vw,3rem);align-items:center}
.trust-zahl{grid-column:1/6;text-align:left}
.trust-copy{grid-column:7/13}
@media (max-width:880px){.trust-zahl,.trust-copy{grid-column:1/13}}
.wert-mega{font-family:var(--display);font-style:italic;font-weight:900;font-size:clamp(7rem,17vw,13.5rem);line-height:.82;color:var(--pflaume);letter-spacing:-.04em;margin:0;font-feature-settings:"onum" 1}
.wert-sterne{margin:1.4rem 0 .4rem}
.wert-sub{font-weight:600;font-size:var(--step-0);color:var(--tinte-soft)}
.wert-sub a{color:var(--kupfer-text);text-decoration:underline;text-underline-offset:3px;display:inline-block;padding-block:.3rem;margin-block:-.3rem}
.echo{font-weight:900;font-style:italic;font-size:1.16em;color:var(--pflaume)}
.trust-copy p{font-size:var(--step-1);line-height:1.4;color:var(--tinte);max-width:22em}
.voices{columns:2;column-gap:1.4rem;margin-top:clamp(2.5rem,5vw,3.5rem);max-width:64rem}
@media (max-width:620px){.voices{columns:1}}
.voices:empty{display:none}
.voice{break-inside:avoid;position:relative;background:var(--papier-2);border-radius:var(--r);padding:2.6rem 1.5rem 1.5rem;margin-bottom:1.4rem;
  transition:translate .45s var(--sf-ease-signature),box-shadow .45s var(--sf-ease-signature)}
@media (hover:hover){.voice:hover{translate:0 -6px;box-shadow:0 14px 30px -18px oklch(0.30 0.07 340/.45)}}
.voice::before{content:"\201E";position:absolute;top:.2rem;left:1.1rem;font-family:var(--display);font-style:italic;font-size:3.4rem;line-height:1;color:var(--kupfer);opacity:.55}
.voice p{font-size:var(--step-0);color:var(--tinte);margin:0 0 .9rem;line-height:1.5}
.voice .wer{display:flex;align-items:center;gap:.6rem;font-size:var(--step--1);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--kupfer-text)}

/* FAQ: editorialer Frage-Index als exklusives Akkordeon (M14) */
.faq{background:var(--papier-2);border-block:1px solid var(--linie);overflow:clip}
.faq-gruppe{max-width:50rem;position:relative;z-index:1}

/* TERMIN: die Telefonnummer ist der Riesen-Moment (Konversion = Drama).
   Underline-Morph am Hover, HEUTE-Zeile markiert (site.js setzt .heute). */
.termin{background:var(--pflaume-event);color:var(--hell-on-dark);overflow:clip;--gold-soft:var(--gold-event)}
.termin .band-head h2{color:#fff;font-weight:300}
.termin .lead{color:oklch(0.93 0.012 350/.9)}
.termin-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.5rem,3.5vw,3rem)}
.termin-kontakt{grid-column:1/8}
.termin-zeiten{grid-column:9/13}
@media (max-width:880px){.termin-kontakt,.termin-zeiten{grid-column:1/13}}
.tel-mega-lbl{display:block;font-family:var(--sans);font-weight:600;font-size:var(--step--1);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:.5rem}
.tel-mega{display:inline-block;font-family:var(--display);font-style:italic;font-weight:900;font-size:clamp(2.7rem,7.2vw,6.4rem);
  line-height:1.02;letter-spacing:-.015em;color:#fff;text-decoration:none;position:relative;white-space:nowrap;font-feature-settings:"onum" 1;padding-bottom:.06em}
.tel-mega::after{content:"";position:absolute;left:0;bottom:0;height:.038em;width:100%;background:var(--linie-dark)}
.tel-mega::before{content:"";position:absolute;left:0;bottom:0;height:.038em;width:0;background:var(--gold-soft);z-index:1;transition:width .55s var(--sf-ease-signature)}
@media (hover:hover){.tel-mega:hover::before{width:100%}}
.mail-zeile{display:inline-flex;align-items:center;gap:.6rem;color:var(--hell-on-dark);text-decoration:none;font-weight:600;font-size:var(--step-0);margin-top:1.4rem;padding-block:.35rem}
.mail-zeile svg{width:1.15rem;height:1.15rem;flex:none;color:var(--gold-soft)}
.mail-zeile u{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--linie-dark)}
.mail-zeile:hover u{text-decoration-color:var(--gold-soft)}
.adresse{display:flex;gap:.7rem;align-items:flex-start;margin:1.5rem 0 1rem;color:oklch(0.93 0.012 350/.92);font-size:var(--step-0)}
.adresse svg{width:1.15rem;height:1.15rem;flex:none;margin-top:.3rem;color:var(--gold-soft)}
.zeiten{margin:0;border-top:1px solid var(--linie-dark)}
.zeiten div{display:flex;justify-content:space-between;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--linie-dark);font-size:var(--step-0)}
.zeiten dt{font-weight:600;color:#fff}
.zeiten dd{margin:0;font-family:var(--display);font-style:italic;color:var(--gold-soft);font-feature-settings:"onum" 1}
.zeiten .zu dd{color:oklch(0.93 0.012 350/.82);font-style:normal;font-family:var(--sans);font-size:.95rem}
.zeiten div.heute dt::after{content:" \00B7\00A0heute";color:var(--gold-soft);font-weight:700}
.termin-status{display:inline-flex;align-items:center;gap:.6rem;font-weight:600;font-size:.98rem;margin-top:1.3rem;color:var(--hell-on-dark)}
.schluss{font-family:var(--display);font-style:italic;font-weight:300;font-size:var(--step-4);line-height:1.08;letter-spacing:-.01em;color:var(--gold-soft);margin:clamp(3.5rem,8vw,6rem) auto 0;max-width:14em;text-align:center}
.schluss .hz{display:inline-block}
.schluss-mark{display:block;margin:0 auto 1rem;width:46px;height:46px;color:var(--gold-soft)}

/* FOOTER: Mega-Wortmarke als Peak-End, dann Spalten */
.site-foot{background:var(--pflaume-tief);color:oklch(0.93 0.012 350/.82);padding-block:clamp(3rem,6vw,4.5rem) 2rem;overflow:clip}
.foot-marke{font-family:var(--display);font-weight:300;font-size:var(--step-5);line-height:.95;letter-spacing:-.02em;color:#fff;margin:0 0 clamp(2rem,4vw,3rem);text-wrap:balance}
.foot-marke .akzent{color:var(--gold-soft)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem}
@media (max-width:780px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
@media (max-width:480px){.foot-grid{grid-template-columns:1fr}}
.foot-brand .brand{color:#fff}
.foot-brand .brand .mark{color:var(--gold-soft)}
.foot-brand .brand-sub{color:var(--gold-soft)}
.foot-brand p{margin-top:1rem;max-width:24em;font-size:.95rem}
.foot-h{font-family:var(--sans);font-weight:700;font-size:var(--step--1);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft);margin:0 0 1rem}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.foot-col a{color:oklch(0.93 0.012 350/.85);text-decoration:none;font-size:.95rem;display:inline-block;padding-block:.35rem;margin-block:-.35rem}
.foot-col a:hover{color:#fff}
.foot-col li{font-size:.95rem}
.foot-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;border-top:1px solid var(--linie-dark);margin-top:2.5rem;padding-top:1.5rem;font-size:.875rem;color:oklch(0.93 0.012 350/.8)}
.foot-bar a{color:inherit;display:inline-block;padding-block:.45rem;margin-block:-.45rem}

/* Rechtsseiten */
.back{font-weight:600;font-size:.92rem;text-decoration:none;color:var(--pflaume);display:inline-flex;align-items:center;gap:.4rem;padding-block:.45rem;margin-block:-.45rem}
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-size:.875rem}
.foot-in a{color:oklch(0.93 0.012 350/.88);display:inline-block;padding-block:.45rem;margin-block:-.45rem}
.site-foot--schlicht{padding-block:2.5rem 1.6rem;margin-top:3rem}
.legal{padding-block:clamp(2.6rem,6vw,4.5rem)}
.legal .wrap{width:min(100% - 2*var(--gut),42rem)}
.legal .kicker{margin:0 0 1rem}
.legal h1{font-size:var(--step-4);font-weight:350;margin-bottom:1.6rem}
.legal h2{font-size:var(--step-2);color:var(--pflaume);margin:2.4rem 0 .8rem}
.legal p{margin:0 0 1rem}
.legal ul{margin:0 0 1rem;padding-left:1.2rem}
.legal li{margin-bottom:.4rem}
.legal a{color:var(--pflaume);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--linie);display:inline-block;padding-block:.25rem;margin-block:-.25rem}
.legal dl{margin:0 0 1rem;display:grid;gap:.35rem}
.legal dl div{display:flex;gap:.6rem;flex-wrap:wrap}
.legal dt{font-weight:700;min-width:11rem}
.legal dd{margin:0;color:var(--tinte-soft)}
.legal .note{font-size:.92rem;color:var(--kupfer-text);border-left:2px solid var(--kupfer-text);padding-left:1rem;margin-top:1.6rem}

/* View Transitions (Cross-Doc) + reduced-motion-Schutz */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation-duration:.001ms!important}
}

/* ============================================================
   DESIGN-ELEVATION 2026 (B-2026-06-17, H1+H2+H3). Drei nicht
   ueberlappende Schichten, ANGEHAENGT (kein Umbau, kein neuer
   CSP-Hash: alles in dieser externen Datei). Compositor-only,
   hinter html.js + prefers-reduced-motion + @supports; Fallback
   = sichtbarer Endzustand. Deko ist aria-hidden. Hero-h1 (M13
   .stg) bleibt UNANGETASTET (keine Doppel-Animation).
   ============================================================ */

/* ---- H2  Stiller Ken-Burns am Hero-Bild (transform-only) ---- */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html.js .hero-foto figure img{transform-origin:50% 42%;animation:sf-kenburns linear both;animation-timeline:view();animation-range:cover;will-change:transform}
    html.js .hero-kreis{animation:sf-badge-drift linear both;animation-timeline:view();animation-range:cover;will-change:transform}
  }
}
@keyframes sf-kenburns{from{transform:scale(1.07) translateY(-1.4%)}to{transform:scale(1) translateY(2.2%)}}
@keyframes sf-badge-drift{from{transform:translateY(.4rem)}to{transform:translateY(-1.4rem)}}

/* ---- H3 (M15)  Zeilen-Wisch fuer NICHT-Hero Display-Koepfe ---- */
.hwisch{display:block}
.hwisch .ln{display:block;overflow:clip;padding-block:.04em}
.hwisch .ln-i{display:block}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html.js .hwisch .ln-i{transform:translateY(.96em);clip-path:inset(0 0 100% 0);animation:sf-lnwisch linear both;animation-timeline:view();animation-range:entry calc(3% + var(--i,0)*9%) entry calc(60% + var(--i,0)*9%);will-change:transform,clip-path}
    html.js .hwisch .ln:nth-child(1) .ln-i{--i:0}
    html.js .hwisch .ln:nth-child(2) .ln-i{--i:1}
    html.js .hwisch .ln:nth-child(3) .ln-i{--i:2}
    html.js .hwisch .ln:nth-child(4) .ln-i{--i:3}
  }
}
@keyframes sf-lnwisch{to{transform:none;clip-path:inset(0 0 -.12em 0)}}

/* ---- H1  @property paint-only Akzente (aria-hidden Deko) ---- */
@property --sf-hue{syntax:"<number>";inherits:false;initial-value:65}
@property --sf-faden-mix{syntax:"<percentage>";inherits:false;initial-value:0%}
@keyframes sf-hue-sweep{to{--sf-hue:82}}
@keyframes sf-faden-grade{to{--sf-faden-mix:100%}}
@media (prefers-reduced-motion:no-preference){
  /* Mega-Ziffer: nur Hue rotiert, L/C aus der bestehenden Deko-Farbe (relative color);
     faellt auf var(--mega-tint-dark) zurueck, wenn relative color/@property fehlt. */
  @supports (animation-timeline:view()) and (color:oklch(from red l c h)){
    html.js .ziffer-mega{color:oklch(from var(--mega-tint-dark) l c var(--sf-hue));animation:sf-hue-sweep linear both;animation-timeline:view();animation-range:entry 0% cover 55%}
  }
  /* M2-Kupferfaden: Farbe smooth Kupfer->Gold (color-mix override; faellt auf den
     linear-gradient-Basisfaden zurueck, wenn color-mix/@property fehlt). */
  @supports (animation-timeline:scroll()) and (background:color-mix(in oklch,red 50%,blue 50%)){
    html.js body::after{background:color-mix(in oklch,var(--kupfer) calc(100% - var(--sf-faden-mix)),var(--gold-soft) var(--sf-faden-mix));animation:faden linear both,sf-faden-grade linear both;animation-timeline:scroll(),scroll()}
  }
}