/* ==========================================================================
   blühkraft — Version 2
   Grotesk (Archivo) gegen Textserife (Petrona). Heller, zur Marke getönter
   Grund mit gesetzten dunklen Bändern. Fotos führen, Zahlen belegen.
   Schriften selbst gehostet (DSGVO) — keine externen Requests.
   ========================================================================== */

/* ---------- 1. Schriften ------------------------------------------------- */
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:400 700;
  font-display:swap; src:url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:400 700;
  font-display:swap; src:url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Petrona'; font-style:normal; font-weight:400 600;
  font-display:swap; src:url('../fonts/petrona-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Petrona'; font-style:normal; font-weight:400 600;
  font-display:swap; src:url('../fonts/petrona-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- 2. Tokens ---------------------------------------------------- */
:root{
  --sans:'Archivo','Segoe UI',system-ui,-apple-system,sans-serif;
  --serif:'Petrona',Georgia,'Times New Roman',serif;

  /* Heller Grund — Chroma zeigt zum Markengrün, NICHT nach warm. */
  --bg:oklch(.985 .006 145);
  --bg-2:oklch(.958 .011 145);
  --ink:oklch(.255 .022 152);        /* 15.0:1 auf --bg */
  --ink-2:oklch(.435 .021 152);      /*  7.5:1 auf --bg */
  --line:oklch(.885 .014 145);
  --hairline:oklch(.800 .018 148);

  /* Marke */
  --brand:#249320;                   /* Corporate — exakt. NUR Markierung: 3.82:1 auf --bg,
                                        traegt niemals weisse Schrift (nur 3.99:1). */
  --brand-btn:oklch(.50 .145 143);   /* gefuellte Flaeche mit weisser Schrift — 5.65:1 */
  --brand-deep:oklch(.375 .098 148); /*  9.4:1 auf hell — Links, Kleinschrift */
  --brand-lift:oklch(.660 .155 133); /*  6.0:1 auf dunkel */

  /* Waldboden — traegt die gesetzten Baender */
  --dark:oklch(.205 .036 152);
  --dark-2:oklch(.268 .044 150);
  --on-dark:oklch(.955 .010 140);
  --on-dark-2:oklch(.815 .024 140);  /* 10.1:1 auf --dark */

  /* Ocker: auf hell NUR Markierung (3.08:1), als Text nur auf dunkel (5.5:1). */
  --spec:oklch(.655 .105 79);

  /* Flaeche des umgebenden Abschnitts (fuer aufsitzende Labels) */
  --surface:var(--bg);

  --wrap:1240px;
  --narrow:820px;
  --gutter:clamp(20px,4vw,40px);

  /* Kopfzeile. Drei Groessen, und die Trennung ist Absicht:
     --head-h  traegt ALLE Layoutabstaende (Hero-Polster, Seitenkopf,
               Sprungmarken) und bleibt konstant. Wuerde hier der schrumpfende
               Wert stehen, ruckte beim Ueberschreiten der Scrollschwelle der
               halbe Seitenaufbau um 38 px mit.
     --head-now ist die tatsaechliche Hoehe des Balkens - nur sie schrumpft.
     --head-min ist der Endwert; html kennt body.is-scrolled nicht und braucht
               ihn fuer scroll-padding-top. */
  --head-h:112px;
  --head-min:74px;
  --head-now:var(--head-h);
  --head-logo:216px;

  /* Rhythmus — bewusst ungleich */
  --sp-s:clamp(48px,7vw,64px);
  --sp-m:clamp(64px,9vw,96px);
  --sp-l:clamp(84px,12vw,132px);

  --r-s:6px; --r:10px;

  --shadow:0 10px 34px oklch(.205 .036 152/.10);

  --ease:cubic-bezier(.25,1,.5,1);
  --ease-long:cubic-bezier(.16,1,.3,1);
  --dur:.28s;

  --z-rail:20; --z-sticky:40; --z-header:60; --z-nav:70; --z-lightbox:90; --z-skip:100;
}

/* Ein Drittel kleiner, sobald gescrollt wird. main.js setzt die Klasse einmal
   an der Schwelle (40 px), nicht bei jedem Scrolltick. */
body.is-scrolled{--head-now:var(--head-min);--head-logo:150px;}

/* ---------- 3. Basis ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
/* Sprungmarken landen unter dem GESCHRUMPFTEN Balken: wer einen Anker
   anspringt, hat schon gescrollt. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--head-min) + 16px);}

body{
  margin:0;
  font-family:var(--serif);
  font-size:1.125rem;
  line-height:1.62;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  font-optical-sizing:auto;
  scrollbar-color:var(--hairline) var(--bg-2);
}
body.nav-open{overflow:hidden;}

img,svg,video{max-width:100%;height:auto;display:block;}
button{font:inherit;color:inherit;}

h1,h2,h3,h4{
  font-family:var(--sans);
  font-weight:700;
  line-height:1.06;
  margin:0 0 .5em;
  text-wrap:balance;
  font-variant-numeric:tabular-nums;
}
h1{font-size:clamp(2.6rem,1.6rem + 3.6vw,5rem);letter-spacing:-.028em;}
h2{font-size:clamp(1.95rem,1.4rem + 2vw,3.05rem);letter-spacing:-.022em;}
h3{font-size:clamp(1.35rem,1.15rem + .75vw,1.75rem);letter-spacing:-.015em;font-weight:600;line-height:1.18;}
h4{font-size:1rem;letter-spacing:0;font-weight:600;line-height:1.3;}

p{margin:0 0 1.15em;text-wrap:pretty;}
p:last-child{margin-bottom:0;}

a{color:var(--brand-deep);text-underline-offset:.18em;text-decoration-thickness:from-font;}
a:hover{text-decoration:none;}
strong{font-weight:600;color:var(--ink);}

:focus-visible{outline:2px solid var(--brand-deep);outline-offset:3px;border-radius:2px;}
.hero :focus-visible,.band :focus-visible,.cta :focus-visible,
.footer :focus-visible,.pagehead :focus-visible,.rail :focus-visible{outline-color:var(--brand-lift);}

::selection{background:var(--brand-btn);color:#fff;}

/* ---------- 4. Geruest --------------------------------------------------- */
.wrap{width:min(var(--wrap),100% - var(--gutter)*2);margin-inline:auto;}
.section{padding-block:var(--sp-l);}
.lead{font-size:1.3rem;line-height:1.52;color:var(--ink);}

.skiplink{
  position:absolute;left:16px;top:-100px;z-index:var(--z-skip);
  background:var(--dark);color:var(--on-dark);
  padding:12px 18px;border-radius:var(--r-s);
  font-family:var(--sans);font-weight:600;font-size:.95rem;
  transition:top .2s var(--ease);
}
.skiplink:focus{top:16px;}

/* ---------- 5. Buttons --------------------------------------------------- */
.btn{
  --btn-bg:var(--brand-btn);--btn-fg:#fff;--btn-bd:var(--brand-btn);
  display:inline-flex;align-items:center;gap:.55em;
  min-height:48px;padding:0 26px;
  background:var(--btn-bg);color:var(--btn-fg);
  border:1.5px solid var(--btn-bd);border-radius:var(--r-s);
  font-family:var(--sans);font-weight:600;font-size:1rem;letter-spacing:-.005em;
  text-decoration:none;cursor:pointer;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),
             color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
/* Die Erhebung kommt aus dem Schatten, nicht aus der Groesse — der Knopf
   verschiebt beim Zeigen kein Layout. */
.btn{box-shadow:0 1px 2px oklch(.205 .036 152/.10);}
.btn:hover{background:var(--brand-deep);border-color:var(--brand-deep);color:#fff;
  transform:translateY(-2px);box-shadow:0 10px 22px oklch(.205 .036 152/.18);}
.btn:active{transform:translateY(0);box-shadow:0 1px 2px oklch(.205 .036 152/.10);}
.btn--ghost,.btn--outline-light{box-shadow:none;}
.btn--ghost:hover,.btn--outline-light:hover{box-shadow:0 8px 18px oklch(.205 .036 152/.14);}

.btn--ghost{--btn-bg:transparent;--btn-fg:var(--brand-deep);--btn-bd:var(--hairline);}
.btn--ghost:hover{background:var(--brand-deep);border-color:var(--brand-deep);}

.btn--light{--btn-bg:var(--on-dark);--btn-fg:var(--dark);--btn-bd:var(--on-dark);}
.btn--light:hover{background:#fff;border-color:#fff;color:var(--dark);}

.btn--outline-light{--btn-bg:transparent;--btn-fg:var(--on-dark);--btn-bd:oklch(.955 .01 140/.5);}
.btn--outline-light:hover{background:oklch(.955 .01 140/.14);border-color:var(--on-dark);color:var(--on-dark);}

/* ---------- 6. Kopfzeile ------------------------------------------------- */
/* Der Balken startet gross und schrumpft beim Scrollen um rund ein Drittel.
   Animiert werden nur Hoehe und Logobreite, und beide gehoeren zu einem
   Element, das aus dem Fluss genommen ist (position:fixed) - der Umbruch
   bleibt damit im Kopf und erreicht den Seiteninhalt nicht. Die Layoutabstaende
   haengen an --head-h und ruehren sich nicht (siehe Tokenblock).
   Der Balken ist IMMER hell hinterlegt, nicht erst nach dem Scrollen. Grund
   ist das Logo: es traegt Rot auf Weiss und Weiss auf Gruen und darf nirgends
   umgefaerbt oder als Silhouette erscheinen. Ein heller Grund ist die einzige
   Flaeche, auf der es auf jeder Seite gleich und richtig aussieht. */
.header{
  position:fixed;inset:0 0 auto;z-index:var(--z-header);
  height:var(--head-now);
  background:oklch(.985 .006 145/.90);
  border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);
  backdrop-filter:saturate(1.4) blur(12px);
  transition:height var(--dur) var(--ease),background var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.header .wrap{display:flex;align-items:center;gap:clamp(14px,3vw,40px);height:100%;}

body.is-scrolled .header{
  background:oklch(.985 .006 145/.97);
  box-shadow:0 1px 20px oklch(.205 .036 152/.09);
}

/* Logo unveraendert — kein Filter, kein Umschalten, ueberall dieselbe Datei.
   Nur die Breite folgt dem Balken. */
.logo{display:block;flex:0 0 auto;line-height:0;}
.logo img{width:var(--head-logo);max-width:46vw;height:auto;
  transition:width var(--dur) var(--ease);}

.nav{margin-left:auto;}
.nav ul{display:flex;gap:clamp(14px,2vw,30px);list-style:none;margin:0;padding:0;}
.nav a{
  position:relative;display:block;padding:10px 2px;
  font-family:var(--sans);font-weight:500;font-size:1rem;
  color:var(--ink);text-decoration:none;
  transition:color var(--dur) var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1);}
.nav a:hover,.nav a.is-active{color:var(--brand-deep);}

.header__cta{flex:0 0 auto;}
.header__cta .btn{min-height:46px;padding:0 24px;font-size:.95rem;
  transition:min-height var(--dur) var(--ease),padding var(--dur) var(--ease),
             background var(--dur) var(--ease),border-color var(--dur) var(--ease),
             color var(--dur) var(--ease),transform var(--dur) var(--ease);}
body.is-scrolled .header__cta .btn{min-height:40px;padding:0 19px;}

.progress{
  position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  background:var(--brand);transform:scaleX(0);transform-origin:left;
  will-change:transform;
}

.burger{
  display:none;margin-left:auto;
  width:46px;height:46px;padding:11px;
  background:none;border:0;cursor:pointer;
}
.burger span{display:block;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s var(--ease);}
.burger span + span{margin-top:5px;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------- 7. Schnellkontakt rechts ------------------------------------- */
.rail{
  position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:var(--z-rail);
  display:flex;flex-direction:column;gap:2px;
}
/* Die Leiste steht immer in voller Breite da und ist nur nach rechts aus dem
   Bild geschoben — beim Hover faehrt sie zurueck. Reines transform: keine
   Layout-Animation (der alte max-width-Uebergang war genau das). Fixierte
   Elemente erzeugen keinen horizontalen Scrollbalken. */
.rail__item{
  display:flex;align-items:center;gap:10px;
  height:52px;padding:0 15px;
  background:var(--dark);color:var(--on-dark);
  border-radius:var(--r-s) 0 0 var(--r-s);
  text-decoration:none;
  transform:translateX(calc(100% - 52px));
  transition:transform .38s var(--ease),background var(--dur) var(--ease);
}
.rail__item:hover,.rail__item:focus-visible{transform:translateX(0);}
.rail__item--cta{background:var(--brand-btn);color:#fff;}
.rail__item:hover{background:var(--brand-deep);color:#fff;}
.rail__ico{width:22px;height:22px;flex:0 0 22px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;}
.rail__label{
  font-family:var(--sans);font-weight:500;font-size:.92rem;white-space:nowrap;
  opacity:.001;transition:opacity .3s var(--ease);
}
.rail__item:hover .rail__label,.rail__item:focus-visible .rail__label{opacity:1;}

/* ---------- 8. Hero ------------------------------------------------------ */
/* Zwei Drittel der frueheren Hoehe. Vorher fuellte die Diashow den ganzen
   Bildschirm und schob jeden Inhalt unter die Kante; jetzt steht der Beginn
   des Textes schon beim Laden mit im Bild.
   Nebeneffekt: das Hintergrundbild ist 2048x758 gross, also 2,7:1 — bei voller
   Schirmhoehe wurde davon der groesste Teil seitlich weggeschnitten. */
.hero{
  position:relative;isolation:isolate;
  min-height:clamp(440px,64vh,700px);
  min-height:clamp(440px,64svh,700px);
  display:flex;align-items:flex-end;
  padding-block:calc(var(--head-h) + var(--sp-s)) var(--sp-s);
  background:var(--dark);color:var(--on-dark);
  overflow:hidden;
}
/* Kein eigener Stapelkontext: nur die Bildspur gehoert hinter den Schleier,
   die Knoepfe und Punkte gehoeren davor. Vorher lag die ganze Diashow auf
   z-index:-2 - die Bedienelemente wurden vom Schleier mit abgedunkelt. */
/* Im Hero liegt die Diashow HINTER dem Verlauf, die Bedienknoepfe davor.
   Das traegt die Spur (z-index:-2), nicht die Diashow selbst - saesse das
   negative z-index auf .slider, waeren auch Pfeile und Punkte hinter dem
   Verlauf und damit ausgewaschen.
   Dass .slider dabei KEINEN eigenen Hintergrund haben darf, ist der zweite
   Teil: .slider hat z-index:auto, bildet also keinen Stapelkontext. Sein
   Hintergrund wird damit erst in der Ebene der positionierten Nachfahren
   gemalt - also ueber der eigenen Spur. Mit var(--dark) darauf blieb der Hero
   ein leerer dunkler Block, das Foto lag darunter begraben. Den dunklen Grund
   stellt .hero selbst. */
.hero .slider{position:absolute;inset:0;background:none;}
.hero .slider__track{z-index:-2;}
/* EIN Verlauf plus eine Maske - und der Unterschied zwischen beidem ist der
   ganze Punkt dieser Runde.

   Bis Runde 9 lagen hier ZWEI Verlaeufe uebereinander: ein waagerechter fuer
   die Textspalte und ein senkrechter fuer die Grundabdunklung. Zwei Verlaeufe
   ADDIEREN sich aber - unten links kamen 89 Prozent Deckung zusammen, im
   Mittel 63 Prozent. Vom Foto war praktisch nichts mehr zu sehen. Und auf dem
   Handy war es zugleich zu dunkel UND zu hell: der waagerechte Verlauf lief bei
   78 Prozent Breite aus, was zur 640 px breiten Textspalte am Schreibtisch
   passt - auf dem Handy ist die Spalte aber 95 Prozent breit
   (.hero__text{max-width:none}), der Text stand also mit dem rechten Rand im
   ungeschuetzten Bereich. Gemessen kam der Claim dort auf 2,1 bis 3,8:1,
   verlangt sind 4,5:1.

   Jetzt traegt ein einziger senkrechter Verlauf den gesamten Kontrast, und
   seine Stufen sitzen auf den Baendern, in denen die Schrift wirklich steht
   (von unten gemessen: Signatur 8-14 %, Claim 31-62 %, Ueberschrift 47-79 %).
   Oberhalb von 80 Prozent steht kein Text mehr - dort faellt er steil auf
   fast nichts, und genau das gibt den Himmel wieder frei.

   Die Maske NIMMT Deckung weg, statt sie hinzuzufuegen: rechts der Textspalte
   verschwindet der Schleier, das Foto liegt dort offen. Zwischen 501 und
   900 px wird sie abgeschaltet (Abschnitt 24) - dort ist die Spalte so breit
   wie das Bild, es gibt kein "rechts der Spalte" mehr.

   UNTER 501 px gilt dieser ganze Abschnitt nicht: dort steht der Text unter
   dem Foto und der Schleier ist abgeschaltet (Abschnitt 24, max-width:500px).
   Die Zahlen unten sind deshalb Zahlen fuer den Schreibtisch und das Tablet.

   Die Stufen SELBST kommen aus der Schriftfarbe, nicht aus dem Geschmack.
   Erlaubte Grundhelligkeit fuer 4,5:1 haengt daran, wie hell die Schrift ist:
   --on-dark-2 braucht L <= 0,082, --on-dark L <= 0,155, Weiss L <= 0,183.
   Die Signatur stand auf --on-dark-2 und war damit der dunkelste Punkt der
   ganzen Flaeche - sie verlangte unten 0,72 Deckung, mehr als Ueberschrift und
   Claim zusammen. Seit Claim und Signatur heller stehen (siehe .hero__claim
   und .hero__sig) genuegen 0,59, und der Verlauf ist ueber die unteren zwei
   Drittel fast flach.

   Nachgerechnet mit  tools\hero-scrim.py --hell  ueber alle vier
   Diashow-Bilder:

     mittlere Deckung   0,63 -> 0,34 (1440 px) bzw. 0,50 (600 px)
     oberes Drittel     0,56 -> 0,21 bzw. 0,31
     Spitzenwert        0,89 -> 0,62   <- der unten fast dichte Streifen ist weg
     kleinster Kontrast Ueberschrift 3,82:1 (Soll 3,0), Claim 4,87:1,
                        Signatur 4,78:1 (Soll je 4,5)

   Wer an den Zahlen dreht, rechnet es bitte neu nach. */
.hero__scrim{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to top,
    oklch(.16 .03 152/.62)   0%,
    oklch(.16 .03 152/.61)  16%,
    oklch(.16 .03 152/.59)  34%,
    oklch(.16 .03 152/.58)  64%,
    oklch(.16 .03 152/.46)  80%,
    oklch(.16 .03 152/.14)  88%,
    oklch(.16 .03 152/.04) 100%);
  /* Faellt die Maske aus (aeltere Browser kennen sie nicht), bleibt der
     Schleier vollflaechig - das ist die Handy-Fassung und damit sicher, nur
     rechts unnoetig dunkel. */
  -webkit-mask-image:linear-gradient(to right,#000 0%,#000 54%,
                       rgba(0,0,0,.45) 70%,rgba(0,0,0,0) 84%);
          mask-image:linear-gradient(to right,#000 0%,#000 54%,
                       rgba(0,0,0,.45) 70%,rgba(0,0,0,0) 84%);
}
.hero .wrap{position:relative;}
.hero__text{max-width:640px;}

/* Ein enger, dunkler Saum direkt an den Buchstaben. Er zaehlt in KEINER
   Messung mit - der Schleier allein traegt die geforderten 3,0 bzw. 4,5:1,
   nachgerechnet gegen das hellste halbe Prozent jedes Textbandes. Der Saum ist
   die Reserve fuer das, was eine Messung ueber Flaechen nicht erfasst: den
   einzelnen Spitzlichtpunkt, der genau hinter einem Buchstabenstrich sitzt.
   Bewusst klein gehalten (1 px Versatz, 2 px Radius) - ein weicher Schlagschatten
   unter Fliesstext sieht billig aus und macht die Schrift nicht lesbarer. */
.hero h1,.hero__claim,.hero__sig{
  text-shadow:0 1px 2px oklch(.16 .03 152/.45);
}
.hero h1{color:#fff;margin-bottom:.32em;
  font-size:clamp(2.3rem,1.5rem + 2.9vw,3.95rem);}
.hero h1 .l{
  display:block;overflow:hidden;
  padding:.14em 0 .2em;margin:-.14em 0 -.2em;
}
.hero h1 .l > span{display:block;}
/* Weiss, nicht --on-dark - und das ist eine Kontrast-, keine Farbentscheidung.
   Ueber einem Foto bestimmt die Schriftfarbe, wie dunkel der Schleier sein
   muss: fuer 4,5:1 darf der Grund unter --on-dark auf L 0,155 kommen, unter
   Weiss auf L 0,183. Die vier Prozentpunkte Deckung, die das spart, sieht man
   im Bild. Auf den hellen Flaechen der Seite bleibt --ink zustaendig; dieses
   Weiss gilt nur hier, ueber dem Foto. */
.hero__claim{
  max-width:52ch;font-size:clamp(1.12rem,1rem + .5vw,1.34rem);line-height:1.5;
  color:#fff;margin-bottom:1.35em;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:1.5em;}
/* --on-dark statt --on-dark-2. Die Signatur sitzt am unteren Bildrand und war
   mit --on-dark-2 (L 0,546) der dunkelste Punkt der ganzen Flaeche: sie allein
   verlangte dort 0,72 Deckung. Auf --on-dark sind es 0,59 - der fast dichte
   Streifen unter dem Text ist damit weg. Im Fussbereich, wo --dark ein
   deckender Grund ist und kein Foto durchscheint, bleibt --on-dark-2 richtig. */
.hero__sig{
  font-family:var(--sans);font-size:.9rem;font-weight:500;
  color:var(--on-dark);margin:0;
}
.hero__cue{
  position:absolute;left:50%;bottom:16px;translate:-50% 0;
  width:1px;height:34px;background:linear-gradient(to bottom,transparent,var(--on-dark-2));
  z-index:1;
}

/* Auftritt: reines CSS, laeuft ohne JS und ohne Scroll-Beobachter. */
@keyframes bk-line{from{transform:translateY(105%);}to{transform:translateY(0);}}
@keyframes bk-rise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
@keyframes bk-cue{0%,100%{transform:translate(-50%,0);opacity:.25;}50%{transform:translate(-50%,7px);opacity:1;}}

.hero h1 .l > span{animation:bk-line .95s var(--ease-long) both;}
.hero h1 .l:nth-child(2) > span{animation-delay:.1s;}
.hero__claim{animation:bk-rise .8s var(--ease-long) .3s both;}
.hero__actions{animation:bk-rise .8s var(--ease-long) .42s both;}
.hero__sig{animation:bk-rise .8s var(--ease-long) .52s both;}
.hero__cue{animation:bk-cue 2.6s var(--ease) 1.4s infinite;}

/* ---------- 9. Diashow --------------------------------------------------- */
.slider{position:relative;overflow:hidden;background:var(--dark);}
.slider__track{position:absolute;inset:0;}
.slide{
  position:absolute;inset:0;opacity:0;
  transition:opacity 1.1s var(--ease);
}
.slide.is-active{opacity:1;}
/* <picture> ist von sich aus inline und hoehenlos. Ohne diese Zeile hat
   .slide img{height:100%} keinen Bezug, faellt auf auto zurueck - und das Bild
   steht in Originalhoehe im Rahmen statt ihn zu fuellen. */
.slide picture{display:block;width:100%;height:100%;}
.slide img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.055);transition:transform 8s linear;}
.slide.is-active img{transform:scale(1);}

/* Motiv sitzt links der Mitte (Hinweistafel bei 33 Prozent Breite). Gilt nur
   ab 501 px: darunter liefert das <picture> ohnehin den Hochformat-Ausschnitt,
   der bereits auf das Motiv gelegt ist (Fokus in import-pictures.ps1,
   $diashowFokus). Ein zweites Verschieben waere dort doppelt gerechnet.
   Die senkrechte Lage bleibt ueberall bei 50 Prozent. */
@media (min-width:501px){
  .slide--motiv-links img{object-position:33% 50%;}
}

.slider__nav,.slider__dots{position:absolute;z-index:2;}
.slider__nav{
  top:auto;bottom:22px;
  width:44px;height:44px;display:grid;place-items:center;
  background:oklch(.16 .03 152/.62);color:var(--on-dark);
  border:1px solid oklch(.955 .01 140/.55);border-radius:50%;
  cursor:pointer;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.slider__nav:hover{background:var(--brand-btn);border-color:var(--brand-btn);color:#fff;}
.slider__nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}
.slider__nav--prev{right:130px;}
.slider__nav--next{right:78px;}

.slider__dots{right:186px;bottom:40px;display:flex;align-items:center;gap:8px;}
/* Deckung und Ring sind nachgemessen, nicht geschaetzt. Der Knopf liegt an
   der einen Stelle des Hero, an der die Maske den Schleier ganz wegnimmt
   (Abschnitt 8) - er sitzt also auf offenem Foto und muss seinen Grund selbst
   mitbringen. Mit den alten 0,42 kam der Pfeil am Schreibtisch gegen seinen
   eigenen Grund auf 2,77:1 - verlangt sind 3,0:1 fuer grafische
   Bedienelemente (WCAG 1.4.11). Gemessen an Bild 2:

                                 390 px        1440 px
     Pfeilstrich / Knopfgrund    7,30 / 7,44   5,28 / 5,21
     Knopfgrund  / Foto          2,18 / 2,03   3,15 / 3,35
     Punkt       / Foto          2,62          3,24
     Punktring   / Fuellung      5,70          5,91

   Die Zeile "Knopfgrund / Foto" bleibt auf dem Telefon unter 3,0 - dort ist
   das Foto am hellsten. Den Rand traegt an dieser Stelle nicht der Grund,
   sondern die helle Haarlinie des Knopfes; der Pfeil selbst steht mit 7,3:1
   weit darueber. Beim Punkt uebernimmt das derselbe Ring.
   Nachzurechnen mit:  node <scratch>\knopf-kontrast.js <ziel> 390|1440  */
.slider__dots button{
  width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
  background:oklch(.955 .01 140/.55);border:0;
  box-shadow:0 0 0 1.5px oklch(.16 .03 152/.55),0 1px 3px oklch(.16 .03 152/.5);
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.slider__dots button:hover{background:var(--on-dark);}
.slider__dots button[aria-current="true"]{background:var(--brand-lift);transform:scale(1.4);}

/* ---------- 10. Datenzeile ----------------------------------------------- */
/* Datenblatt-Register, kein Kennzahlen-Hero: kleine Werte, Haarlinien,
   tabellarische Ziffern. Die Zahl steht neben der Angabe, nicht ueber ihr. */
.specstrip{background:var(--bg);border-bottom:1px solid var(--line);}
.specstrip__row{
  display:grid;grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--hairline);
}
.specstrip__row > div{
  padding:26px 22px 24px;
  border-left:1px solid var(--line);
}
.specstrip__row > div:first-child{border-left:0;padding-left:0;}
.specstrip__row > div:last-child{padding-right:0;}
.specstrip dt{
  font-family:var(--sans);font-weight:700;font-size:1.42rem;
  letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1.1;
}
.specstrip dd{
  margin:.45em 0 0;font-size:.98rem;line-height:1.4;color:var(--ink-2);
}
.specstrip dt .u{font-size:.72em;font-weight:600;color:var(--ink-2);margin-left:.15em;}
.specstrip dt::before{
  content:"";display:block;width:20px;height:2px;background:var(--spec);
  margin-bottom:14px;
}

/* ---------- 11. Einfuehrung ---------------------------------------------- */
.intro{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,5vw,72px);align-items:start;}
.intro h2{margin-bottom:0;}
.intro__body > p{max-width:64ch;}
.intro__more{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--sans);font-weight:600;font-size:1rem;
  text-decoration:none;
}
.intro__more span{transition:transform .3s var(--ease);}
.intro__more:hover span{transform:translateX(5px);}

/* ---------- 11a. Neuigkeiten ---------------------------------------------- */
/* Getoenter Grund fuer den ganzen Abschnitt, helle Karte darauf. Der Abschnitt
   steht zwischen zwei hellen Bloecken und braucht die Tonung, um als eigener
   Bereich lesbar zu sein. --surface wird mitgefuehrt, damit aufsitzende Labels
   die richtige Flaeche kennen. */
.section--tint{background:var(--bg-2);--surface:var(--bg-2);}

.news{
  --surface:var(--bg);
  display:grid;grid-template-columns:5fr 6fr;
  gap:clamp(26px,4vw,56px);align-items:center;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(22px,3.2vw,44px);
  box-shadow:var(--shadow);
}
.news + .news{margin-top:clamp(18px,2.6vw,32px);}

.news__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  font-family:var(--sans);font-size:.86rem;font-weight:600;
  color:var(--ink-2);margin-bottom:.9em;
}
/* Ocker traegt auf hell keine Schrift (3.08:1). Es markiert nur den Rand,
   geschrieben wird in --ink. */
.news__tag{
  padding:3px 11px;border-radius:999px;
  border:1px solid var(--spec);color:var(--ink);letter-spacing:.02em;
}
.news__body h3{margin-bottom:.5em;}
.news__body > p{max-width:52ch;}

/* Das Partnerlogo liegt als Bild auf deckendem Weiss vor - genau so steht es
   auch im eingerechneten Banner der drei Fotos. Es bekommt deshalb eine weisse
   Platte untergelegt und wird NICHT umgefaerbt oder freigestellt; so sieht es
   an jeder Stelle der Seite gleich aus. */
.news__logo{margin:1.4em 0 1.5em;}
.news__logo img{
  width:220px;max-width:100%;height:auto;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-s);
  padding:10px 14px;
}
.news__more{margin-bottom:0;}

/* Zwei Spalten, das Querformat ueber beide. Grund ist das eingerechnete
   Banner: es laeuft ueber die GANZE Bildbreite, also schneidet jede Kachel,
   die schmaler als das Bild ist, den Hinweis und das Logo seitlich ab -
   object-position hilft dagegen nicht, das steuert nur die Hoehe. */
.news__pics{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;align-content:start;}
.news__pics figure{margin:0;}
.news__pics .g--wide{grid-column:span 2;}
.news__pics button{
  position:relative;display:block;width:100%;padding:0;
  aspect-ratio:3 / 4;
  background:var(--bg-2);border:0;border-radius:var(--r-s);
  overflow:hidden;cursor:zoom-in;
}
.news__pics button::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px oklch(.205 .036 152/.09);
  transition:box-shadow var(--dur) var(--ease);
}
.news__pics .g--wide button{aspect-ratio:16 / 9;}
.news__pics button:hover::after{box-shadow:inset 0 0 0 2px var(--brand);}
/* Von oben beschnitten: die drei Fotos tragen oben das eingerechnete
   Partnerbanner - mittig beschnitten fiele es zur Haelfte heraus. */
.news__pics img{
  width:100%;height:100%;object-fit:cover;object-position:top;
  transition:transform .55s var(--ease-long);
}
.news__pics button:hover img{transform:scale(1.05);}
.news__pics button:focus-visible{outline-offset:2px;}

/* ---------- 12. Produkte ------------------------------------------------- */
.product{padding-block:var(--sp-l);}
.product--alt{background:var(--bg-2);--surface:var(--bg-2);}
.product__grid{
  display:grid;grid-template-columns:1fr 1fr;
  grid-template-areas:"media body";
  gap:clamp(32px,5vw,80px);align-items:start;
}
/* Zweiter Produktabschnitt spiegelt das Raster — Rhythmus statt Wiederholung.
   Die DOM-Reihenfolge bleibt Bild → Beschreibung, auf beiden Seiten. */
.product--alt .product__grid{grid-template-areas:"body media";}
/* Klebt am GESCHRUMPFTEN Balken: wer hier ankommt, hat laengst gescrollt. */
.product__media{grid-area:media;position:sticky;top:calc(var(--head-min) + 28px);}
.product__body{grid-area:body;}
.product__media > img{
  width:100%;border-radius:var(--r);box-shadow:var(--shadow);
}
.product__media--plain > img{box-shadow:none;}
.product__kind{
  font-family:var(--sans);font-weight:600;font-size:1rem;color:var(--brand-deep);
  margin:0 0 .7em;
}
.product__body > h2{margin-bottom:.3em;}
.product__body > p{max-width:62ch;}

/* Datenblatt */
.spec{margin:2.2em 0 0;border-top:1px solid var(--hairline);}
.spec > div{
  display:grid;grid-template-columns:11.5rem 1fr;gap:10px 24px;
  padding:15px 0;border-bottom:1px solid var(--line);
}
.spec dt{
  font-family:var(--sans);font-weight:600;font-size:.9rem;line-height:1.45;
  color:var(--ink-2);padding-top:.14em;
}
.spec dd{margin:0;font-size:1.02rem;line-height:1.5;font-variant-numeric:tabular-nums;}

.facts{list-style:none;margin:1.4em 0 0;padding:0;}
.facts li{position:relative;padding-left:1.55em;margin-bottom:.6em;line-height:1.55;}
.facts li::before{
  content:"";position:absolute;left:0;top:.66em;
  width:9px;height:2px;background:var(--brand);
}
.facts li:last-child{margin-bottom:0;}

.subhead{
  font-family:var(--sans);font-weight:600;font-size:1rem;
  color:var(--ink);margin:2.1em 0 0;
}

/* Ersatz fuer .benefit — Rahmen ringsum, Label sitzt AUF der oberen Linie
   wie die Legende auf einem Datenblatt. Kein Seitenstreifen. */
.vorteil{
  position:relative;margin:2.6em 0 0;padding:26px 26px 24px;
  border:1px solid var(--hairline);border-radius:var(--r);
  font-size:1.06rem;line-height:1.55;
}
.vorteil__tag{
  position:absolute;top:0;left:20px;transform:translateY(-50%);
  padding:0 10px;background:var(--surface);
  font-family:var(--sans);font-weight:600;font-size:.86rem;
  color:var(--brand-deep);
}
.product__more{margin-top:2.2em;}

/* ---------- 13. Bildbuehne ----------------------------------------------- */
.showcase__stage{
  position:relative;display:block;width:100%;padding:0;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;cursor:zoom-in;
}
/* 4:3 statt quadratisch: die Buehne fuehrt jetzt auch Quer- und Hochformate
   aus der Galerie, nicht mehr nur den quadratischen Freisteller. */
.showcase__img{width:100%;aspect-ratio:4/3;object-fit:contain;
  transition:opacity .22s var(--ease),transform .5s var(--ease);}
.showcase.is-loading .showcase__img{opacity:.35;}
.showcase__stage:hover .showcase__img{transform:scale(1.02);}
.showcase__zoom{
  position:absolute;right:14px;bottom:14px;
  width:40px;height:40px;display:grid;place-items:center;
  background:oklch(.16 .03 152/.62);border-radius:50%;color:var(--on-dark);
  transition:background var(--dur) var(--ease);
}
.showcase__stage:hover .showcase__zoom{background:var(--brand-btn);}
.showcase__zoom svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;}
.showcase__cap{
  margin:.85em 0 0;font-size:.96rem;color:var(--ink-2);min-height:1.5em;
}
/* Eine Reihe gleich breiter Felder — unabhaengig davon, wie viele Bilder die
   Buehne fuehrt (Blumenwiese 6, Initialziegel 4). */
.showcase__thumbs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px;margin-top:14px;}
.showcase__thumb{
  padding:0;background:var(--bg);cursor:pointer;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-s);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.showcase__thumb img{aspect-ratio:1/1;object-fit:cover;width:100%;}
.showcase__thumb--cutout img{object-fit:contain;}
.showcase__thumb:hover{transform:translateY(-2px);border-color:var(--hairline);}
.showcase__thumb.is-active{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand);}

/* ---------- 14. Dunkles Band --------------------------------------------- */
.band{
  position:relative;isolation:isolate;overflow:hidden;
  padding-block:var(--sp-l);
  background:var(--dark);color:var(--on-dark);
}
.band h2,.band h3{color:#fff;}
.band p{color:var(--on-dark-2);}
.band__grid{
  position:relative;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(30px,5vw,76px);align-items:start;
}
.band .facts li{color:var(--on-dark);}
.band .facts li::before{background:var(--brand-lift);}
.band .lead{color:var(--on-dark);}

/* ---------- 15. Galerie -------------------------------------------------- */
/* Mosaik aus den echten Seitenverhaeltnissen: Querformat 2x1, Hochformat 1x2.
   Kein gleichfoermiges Kachelraster. */
.blockhead{max-width:56ch;margin-bottom:var(--sp-s);}
.blockhead h2{margin-bottom:.28em;}
.blockhead p{color:var(--ink-2);margin-bottom:0;}

.gallery{
  display:grid;grid-template-columns:repeat(6,1fr);
  grid-auto-rows:186px;grid-auto-flow:dense;gap:14px;
}
.gallery figure{margin:0;grid-column:span 1;grid-row:span 2;}
.gallery figure.g--wide{grid-column:span 2;grid-row:span 1;}
.gallery button{
  position:relative;
  display:block;width:100%;height:100%;padding:0;
  background:var(--bg-2);border:0;border-radius:var(--r-s);
  overflow:hidden;cursor:zoom-in;
}
/* Haarlinie nach innen: haelt helle Fotos gegen den hellen Grund zusammen und
   wird beim Zeigen zur Markierung. Kein zusaetzliches Element im HTML. */
.gallery button::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px oklch(.205 .036 152/.09);
  transition:box-shadow var(--dur) var(--ease);
}
.gallery button:hover::after{box-shadow:inset 0 0 0 2px var(--brand);}
.gallery img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .55s var(--ease-long),filter .35s var(--ease);
}
.gallery button:hover img{transform:scale(1.05);}
/* Bilder mit Partnerbanner werden von oben beschnitten. Mittig beschnitten
   (Voreinstellung von object-fit:cover) haette das Querformat den Balken zur
   Haelfte abgeschnitten - die Kachel ist flacher als das Bild. */
.gallery .g--banner img{object-position:top;}
.gallery button:focus-visible{outline-offset:2px;}

/* ---------- 16. Anfrage -------------------------------------------------- */
.cta{
  position:relative;isolation:isolate;overflow:hidden;
  padding-block:var(--sp-l);
  background:var(--dark);color:var(--on-dark);text-align:center;
}
.cta .wrap{position:relative;max-width:var(--narrow);}
.cta h2{color:#fff;}
.cta p{color:var(--on-dark-2);max-width:58ch;margin-inline:auto;margin-bottom:2em;font-size:1.16rem;}

/* ---------- 17. Seitenkopf (Unterseiten) --------------------------------- */
.pagehead{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:flex-end;
  min-height:clamp(360px,52vh,540px);
  padding-block:calc(var(--head-h) + var(--sp-s)) var(--sp-s);
  background:var(--dark);color:var(--on-dark);
}
.pagehead .wrap{position:relative;}
.pagehead h1{color:#fff;font-size:clamp(2.2rem,1.5rem + 2.6vw,3.7rem);margin-bottom:.3em;}
.pagehead p{color:var(--on-dark-2);max-width:56ch;font-size:1.16rem;margin-bottom:0;}

/* ---------- 18. Kontakt -------------------------------------------------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start;}
.contact__pic{width:100%;height:clamp(340px,42vw,560px);object-fit:cover;border-radius:var(--r);}
.contact__info dl{margin:2em 0 0;border-top:1px solid var(--hairline);}
.contact__info div{padding:16px 0;border-bottom:1px solid var(--line);}
.contact__info dt{
  font-family:var(--sans);font-weight:600;font-size:.9rem;color:var(--ink-2);
  margin-bottom:.3em;
}
.contact__info dd{margin:0;line-height:1.55;}

/* ---------- 19. Rechtstexte ---------------------------------------------- */
.legal{max-width:70ch;}
.legal h2{
  font-size:clamp(1.4rem,1.2rem + .8vw,1.85rem);
  margin:2.4em 0 .7em;padding-top:1.6em;border-top:1px solid var(--line);
}
.legal h2:first-child{margin-top:0;padding-top:0;border-top:0;}
.legal h3{font-size:1.15rem;margin:1.9em 0 .5em;}
.legal p,.legal li{font-size:1.04rem;line-height:1.66;}
.legal ul{padding-left:1.2em;}
.legal li{margin-bottom:.4em;}

/* ---------- 20. Fussbereich ---------------------------------------------- */
.footer{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--dark);color:var(--on-dark-2);
  padding-block:var(--sp-m) 32px;
}
.footer .wrap{position:relative;}
.footer__grid{
  display:grid;grid-template-columns:2.2fr 1fr 1fr 1.3fr;
  gap:clamp(28px,4vw,56px);
}
/* Das Logo steht frei auf --dark, ohne weisse Platte (Auftrag des Users).
   Umgefaerbt wird es weiterhin nirgends - es ist ueberall dieselbe Datei.
   Das PNG ist echt freigestellt (43 % der Flaeche alpha 0), also traegt es
   keinen weissen Kasten mit. Gemessen auf --dark: der rote Schriftzug 3.62:1,
   der gruene Balken 7.70:1. Fuer Fliesstext waere 3.62 zu wenig, fuer eine
   Bildmarke genuegt es - WCAG 1.4.11 verlangt 3:1 und nimmt Logos von der
   Textregel ausdruecklich aus. Der weisse Untertitel sitzt im PNG auf dem
   deckenden gruenen Balken und ist vom Untergrund unabhaengig. */
.footer__logo{display:inline-block;margin-bottom:24px;}
.footer__logo img{width:168px;}
.footer__grid p{font-size:1rem;line-height:1.6;max-width:42ch;}
.footer__grid h4{color:#fff;margin-bottom:1em;font-size:.95rem;}
.footer__grid ul{list-style:none;margin:0;padding:0;font-size:1rem;line-height:1.75;}
.footer__grid li{margin-bottom:.35em;}
/* Auf --dark gilt die helle Textfarbe, nicht das globale --brand-deep: das
   ist ein dunkles Gruen und war im Fussbereich praktisch unlesbar. Die Regel
   greift ueber den ganzen Fuss, damit auch spaetere Links sicher sind. */
.footer a{color:var(--on-dark-2);
  transition:color var(--dur) var(--ease);}
.footer a:hover{color:#fff;}
.footer__grid a{text-decoration:none;}
/* Kein padding-left-Uebergang mehr — das animierte Layout. */
.footer__grid li a{display:inline-block;transition:transform .24s var(--ease),color var(--dur) var(--ease);}
.footer__grid li a:hover{transform:translateX(5px);}

.footer__bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;
  margin-top:var(--sp-s);padding-top:26px;
  border-top:1px solid oklch(.955 .01 140/.16);
  font-family:var(--sans);font-size:.92rem;
}
.footer__bottom ul{display:flex;gap:22px;list-style:none;margin:0;padding:0;}

/* ---------- 21. Lightbox ------------------------------------------------- */
.lightbox{
  position:fixed;inset:0;z-index:var(--z-lightbox);display:none;
  place-items:center;padding:clamp(16px,4vw,54px);
  background:oklch(.14 .026 152/.92);opacity:0;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:opacity .3s var(--ease);
}
.lightbox.is-open{display:grid;}
.lightbox.is-visible{opacity:1;}
.lightbox__fig{margin:0;display:grid;gap:14px;justify-items:center;}
.lightbox img{max-width:100%;max-height:82vh;object-fit:contain;border-radius:var(--r-s);}
.lightbox__cap{color:var(--on-dark-2);font-size:1rem;text-align:center;margin:0;}
.lightbox__count{
  position:absolute;top:20px;left:24px;color:var(--on-dark-2);
  font-family:var(--sans);font-size:.92rem;font-variant-numeric:tabular-nums;
}
.lightbox__btn{
  position:absolute;width:48px;height:48px;display:grid;place-items:center;
  background:oklch(.955 .01 140/.1);color:var(--on-dark);
  border:1px solid oklch(.955 .01 140/.26);border-radius:50%;cursor:pointer;
  transition:background var(--dur) var(--ease);
}
.lightbox__btn:hover{background:var(--brand-btn);border-color:var(--brand-btn);color:#fff;}
.lightbox__btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}
/* Hat eine Gruppe nur ein Bild, blendet main.js die Pfeile aus. Ohne diese
   Regel bliebe display:grid staerker als das hidden-Attribut. */
.lightbox__btn[hidden]{display:none;}
.lightbox__close{top:16px;right:20px;}
.lightbox__prev{left:16px;top:50%;transform:translateY(-50%);}
.lightbox__next{right:16px;top:50%;transform:translateY(-50%);}

/* ---------- 22. Parallax ------------------------------------------------- */
.parallax{position:relative;isolation:isolate;overflow:hidden;}
.parallax__bg{
  position:absolute;inset:-12% 0;z-index:-2;
  background-size:cover;background-position:center;
  will-change:transform;
}
.parallax__veil{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,oklch(.17 .03 152/.86),oklch(.17 .03 152/.74));
}

/* ---------- 23. Einblenden ----------------------------------------------- */
/* Sichtbarkeit ist der Ausgangszustand. Versteckt wird erst, wenn main.js ein
   Element tatsaechlich beobachtet (.is-armed). Faellt JS aus oder scrollt ein
   Renderer nie, bleibt der Inhalt sichtbar. */
.reveal.is-armed{opacity:0;transform:translateY(20px);}
.reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .7s var(--ease-long),transform .7s var(--ease-long);
  transition-delay:calc(var(--i,0) * 70ms);
}

/* ---------- 24. Responsiv ------------------------------------------------ */
@media (max-width:1180px){
  :root{--head-h:100px;--head-min:68px;--head-logo:192px;}
  body.is-scrolled{--head-logo:134px;}
  .specstrip__row{grid-template-columns:repeat(3,1fr);}
  .specstrip__row > div:nth-child(3n+1){border-left:0;padding-left:0;}
  .specstrip__row > div:nth-child(-n+3){border-top:0;}
  .specstrip__row > div:nth-child(n+4){border-top:1px solid var(--line);}
  .gallery{grid-template-columns:repeat(4,1fr);grid-auto-rows:176px;}
}

@media (max-width:900px){
  .news{grid-template-columns:1fr;align-items:start;}
  :root{--head-h:88px;--head-min:60px;--head-logo:172px;}
  body.is-scrolled{--head-logo:122px;}
  .burger{display:block;}
  .nav{
    position:fixed;inset:var(--head-now) 0 auto;z-index:var(--z-nav);
    margin:0;background:var(--bg);border-bottom:1px solid var(--line);
    padding:10px var(--gutter) 22px;
    transform:translateY(-8px);opacity:0;visibility:hidden;
    transition:opacity .24s var(--ease),transform .24s var(--ease),visibility .24s;
  }
  .nav.is-open{opacity:1;transform:none;visibility:visible;}
  .nav ul{flex-direction:column;gap:0;}
  .nav a{padding:15px 0;font-size:1.12rem;color:var(--ink);border-bottom:1px solid var(--line);}
  .nav a::after{display:none;}
  .nav li:last-child a{border-bottom:0;}
  .header__cta{display:none;}
  .rail{display:none;}
  .slider__nav--prev{right:78px;}
  .slider__nav--next{right:26px;}
  .slider__dots{right:134px;}

  .intro,.band__grid,.contact{grid-template-columns:1fr;}
  .product__grid,.product--alt .product__grid{
    grid-template-columns:1fr;grid-template-areas:"media" "body";
  }
  .product__media{position:static;}
  /* Die Textspalte laeuft ab hier ueber die ganze Breite - deshalb muss die
     Maske des Hero-Schleiers weg. Sie blendet ihn rechts aus, und dort stand
     bis Runde 9 die rechte Haelfte des Claims ohne Schutz: gemessen 2,1 bis
     3,8:1 statt 4,5:1. Beide Zeilen gehoeren zusammen, eine ohne die andere
     ist ein Fehler. */
  .hero__text{max-width:none;}
  .hero__scrim{-webkit-mask-image:none;mask-image:none;}
  .footer__grid{grid-template-columns:1fr 1fr;}
}

@media (max-width:700px){
  :root{--head-h:78px;--head-min:56px;--head-logo:150px;}
  body.is-scrolled{--head-logo:112px;}
  body{font-size:1.06rem;}
  .specstrip__row{grid-template-columns:1fr 1fr;}
  .specstrip__row > div{padding:20px 16px;border-top:1px solid var(--line);}
  .specstrip__row > div:nth-child(odd){border-left:0;padding-left:0;}
  .specstrip__row > div:nth-child(-n+2){border-top:0;}
  .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:30vw;gap:10px;}
  .spec > div{grid-template-columns:1fr;gap:2px;padding:13px 0;}
  .showcase__thumbs{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);gap:8px;}
  .slider__dots{right:116px;bottom:34px;}
  .slider__nav{width:40px;height:40px;bottom:18px;}
  .slider__nav--prev{right:68px;}
  .slider__nav--next{right:20px;}
  .hero{padding-bottom:var(--sp-s);}
  .footer__grid{grid-template-columns:1fr;}
  .footer__bottom{flex-direction:column;}
}

/* TELEFONE: DER TEXT STEHT UNTER DEM FOTO, NICHT DARAUF.
   Das ist der Schlussstrich unter drei Runden, in denen der Hero auf dem
   Telefon immer wieder zu dunkel war - und zwar zwangslaeufig.

   Die Rechnung dahinter: auf 390 px belegt der Textblock 71 Prozent der
   Hero-Hoehe und die volle Breite. Ueber einem Foto verlangt Fliesstext
   4,5:1, und dafuer darf der Grund unter weisser Schrift auf Helligkeit
   0,183 kommen - gemessen gegen das hellste halbe Prozent der Flaeche, nicht
   gegen den Mittelwert. Ueber einem sonnigen Foto sind das rund 0,56 Deckung.
   Unter dem Text war das Foto also immer zu mindestens der Haelfte zugedeckt.
   Am Schreibtisch nimmt die Maske dem Schleier rechts der Textspalte die
   Deckung wieder weg (Abschnitt 8) - auf dem Telefon gibt es kein "rechts der
   Spalte", die Spalte IST das Bild. Heller ging nur noch, indem der Text vom
   Foto heruntergeht.

   Damit faellt der Schleier auf Telefonen ganz weg: das Foto steht bei 100
   Prozent Helligkeit, und die Schrift steht auf deckendem --dark und kommt
   damit auf 17,8:1 (Weiss, Ueberschrift und Claim) bzw. 15,6:1 (--on-dark,
   Signatur) statt der 3,9 bis 4,9:1, die sie vorher hatte.

   Die 500-px-Grenze ist dieselbe, mit der das <picture> im Hero seine
   Handyfassung waehlt - und das muss so bleiben. Der Ausschnitt dieser Fassung
   ist 4:3, weil der Streifen hier 4:3 ist. Wer eine der beiden Zahlen
   aendert, aendert beide. */
@media (max-width:500px){
  .hero{
    display:block;min-height:0;
    padding-block:var(--head-h) var(--sp-s);
  }
  /* Aus dem formatfuellenden Hintergrund wird ein Streifen im Textfluss.
     Die Hoehe MUSS aus aspect-ratio kommen: .slider__track und .slide liegen
     beide absolut und tragen deshalb nichts zur Hoehe bei - mit height:auto
     waere der Streifen 0 px hoch und das Foto unsichtbar.
     max-height ist fuer kurze Bildschirme: dort soll die Ueberschrift noch
     ueber die Kante schauen. */
  .hero .slider{
    position:relative;inset:auto;
    width:100%;aspect-ratio:4/3;max-height:46svh;
  }
  /* Der Schleier ist weg, nicht aufgehellt - darum ging der ganze Umbau. */
  .hero__scrim{display:none;}
  /* Das negative z-index der Bildspur war dafuer da, die Spur hinter den
     Schleier zu legen und die Bedienknoepfe davor. Ohne Schleier ist es nur
     noch eine Falle. */
  .hero .slider__track{z-index:auto;}
  .hero .wrap{padding-top:clamp(26px,7vw,34px);}
  /* Der enge Saum an den Buchstaben war die Reserve gegen den einen
     Spitzlichtpunkt hinter einem Buchstabenstrich. Hinter dem Text ist kein
     Foto mehr, auf deckendem Grund macht er die Schrift nur schmutzig. */
  .hero h1,.hero__claim,.hero__sig{text-shadow:none;}
  /* Der Scrollhinweis haengt am unteren Rand des Hero. Der liegt jetzt unter
     der Signatur, nicht unter dem Foto - dort zeigt er auf nichts. */
  .hero__cue{display:none;}
  /* Pfeile und Punkte brauchen hier KEINE Sonderbehandlung: sie bringen ihren
     Grund seit der Messung in Abschnitt 9 ueberall selbst mit. Vorher trug
     sie der Schleier mit, und genau darum fielen sie am Schreibtisch, wo die
     Maske ihn wegnimmt, schon vor diesem Umbau durch. */
}

@media (max-width:420px){
  .hero__actions .btn{width:100%;justify-content:center;}
  .lightbox__prev{left:8px;}
  .lightbox__next{right:8px;}
}

/* ---------- 25. Druck ---------------------------------------------------- */
/* Nichts darf im Druck fehlen, nur weil es noch nicht eingeblendet wurde. */
@media print{
  .reveal.is-armed{opacity:1 !important;transform:none !important;}
  .header,.rail,.progress,.hero__cue,.slider__nav,.slider__dots,.skiplink{display:none !important;}
  .hero,.band,.cta,.footer,.pagehead{background:#fff !important;color:#000 !important;}
  .parallax__bg,.parallax__veil,.hero__scrim{display:none !important;}
  .band h2,.band h3,.cta h2,.pagehead h1,.hero h1{color:#000 !important;}
  .band p,.cta p,.pagehead p,.footer,.footer__grid a{color:#222 !important;}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;}
}

/* ---------- 26. Reduzierte Bewegung -------------------------------------- */
/* Nicht abgeschwaecht — abgeschaltet. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .parallax__bg{transform:none !important;}
  .slide img{transform:none !important;}
  .reveal.is-armed{opacity:1;transform:none;}
  .hero__cue{display:none;}
}