/* ============================================================
   Verband Kindergarten Zürich – Stilstudie
   Layout 1:1 nach Figma "Home #1" (6492:1814, 1500 × 3110)

   --px = 1 Figma-Pixel. Standardmässig FLUID: die Seite füllt
   den Viewport und skaliert proportional mit – deshalb wird auf
   grossen Bildschirmen alles grösser statt bei 1500 px zu enden.
   ============================================================ */
:root{
  /* Zehn Werte: ein Schwarz, Bone, Weiss, vier Markenfarben aus dem Logo
     und drei Abstufungen davon.
     Entfernt: --blue-muted, --mint, --lilac, --coral (nirgends verwendet)
     sowie --ink-soft (#2F3430) — lag nur 1.34:1 neben --ink und war im
     Betrieb nicht unterscheidbar. */
  --ink:#1C1C1B;          /* Text, Ueberschriften, Sticker, dunkle Flaechen */
  --bone:#EFE9DD;         /* Seitenhintergrund */
  --white:#FEFEFE;        /* Karten und Panels */

  /* Drei Markenfarben aus dem Logo, dazu Tiefblau als eigener Wert */
  --apricot:#FCC978;      /* Hero, Kategorie „Politik" */
  --blue:#009EE2;         /* Markenblau: Logo, Buttons, Akzente */
  --logo-coral:#DC776F;   /* Marker, Kategorie „Stellungnahme" */
  /* Frueher als Mischung blue@72-ink definiert – jetzt eigener Wert, weil
     es Flaechen mit weissem Text traegt und dort 4.78:1 halten muss.
     Ersetzt zugleich --logo-navy (#003682), das nur im Logo und in einem
     Hover stand. */
  --blue-deep:#087AAA;    /* Flaechen mit weissem Text, Logo, Themen-Hover */

  /* Einzige Aufhellung: 60 % Apricot auf Weiss. Dieselbe Stufe dient als
     Flaeche (--sand) und als Themen-Hover – frueher 60 und 55 %, der
     Unterschied war nicht sichtbar (0.779 zu 0.762 Helligkeit). */
  --sand:color-mix(in srgb, var(--apricot) 60%, var(--white));

  --font-head:'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:'Bricolage Grotesque', system-ui, sans-serif;
  --w-display:800;   /* Gewicht der Display-Typo, je Schrift anders */
  --font-hand:'Bricolage Grotesque', system-ui, sans-serif;
  --track:-.028em;

  --heroVH:100svh;
  --heroMax:100svh;   /* Hero fuellt immer den ersten Viewport */

  --tilt:0;
  /* Fluid-System nach dem Vorbild des 3S-Styleguides:
       --fluid-basis   Breite, bis zu der linear mitskaliert wird
       --fluid-aspект  Deckel fuer flache Viewports (Ultrawide)
       --fluid-rate    Wachstum jenseits der Basis, 1/50 der Steigung
     Bisher lief --px unbegrenzt linear, dadurch wurde bei 5120 px alles
     3.4-fach vergroessert (Titel 355 statt 181 px). */
  --fluid-basis:2560px;
  --fluid-aspect:2.7;
  --fluid-rate:50;

}

/* ---- Alternative Paletten -------------------------------------
   Struktur, Groessen und Rollen bleiben identisch – es wechseln
   nur die Toene. Dadurch laesst sich die Farbwelt vergleichen,
   ohne dass sich das Layout bewegt.
   --------------------------------------------------------------- */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bone); color:var(--ink);
  font-family:var(--font-body); -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3{font-family:var(--font-head); font-weight:var(--w-display); margin:0; color:var(--ink); letter-spacing:var(--track)}
p{margin:0}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}

.frame{
  /* Bezugsbreite fuer diesen Viewport: nie mehr als --fluid-basis und
     nie mehr als das Seitenverhaeltnis erlaubt. */
  --fluid-max:min(var(--fluid-basis), calc(var(--fluid-aspect) * 100vh));
  /* Bis --fluid-max linear, darueber nur noch mit 1/--fluid-rate. */
  --px:calc(
    min(100vw, var(--fluid-max)) / 1500
    + max(0px, 100vw - var(--fluid-max)) / 1500 / var(--fluid-rate)
  );

  /* 12-Spalten-Raster (Vorbild: 3S-Styleguide). Inhaltsbreite 1344 =
     1500 minus 2x78 Innenabstand. Bei Gap 24 ergibt das exakt 90 pro
     Spalte — die bisherigen Zweispalter-Masse 524/648 entsprechen damit
     Spalte 1-5 (546) und 7-12 (660), Abweichung unter 2 %. */
  --grid-spalten:12;
  --grid-gap:calc(24 * var(--px));
  --grid-col:calc(90 * var(--px));

  /* Module Top Spacing nach dem Styleguide (Node 3752:148): ein einziger
     Abstand OBEN pro Modul, keiner unten. VL 10rem = 160, VS 5rem = 80.
     Muss hier stehen und nicht in :root — dort ist --px noch nicht
     definiert, die Rechnung waere ungueltig und die Variable leer. */
  --m-top:calc(160 * var(--px));
  --m-innen:calc(130 * var(--px));
  --heroH:min(var(--heroMax), var(--heroVH));
  width:calc(1500 * var(--px)); margin:0 auto; position:relative;
}

/* ============================================================ Header (y=0 h=100) */
.site-header{position:sticky; top:0; z-index:100; height:calc(100 * var(--px))}
.header-bar{
  /* Spalte 1-10 (1116), Button daneben auf 11-12. Frueher 64/1182,
     dadurch sass der Header 16 px neben der Inhaltskante. */
  position:absolute; left:calc(78 * var(--px)); top:calc(24 * var(--px));
  width:calc(1116 * var(--px)); height:calc(51.7 * var(--px));
  background:#fff; border-radius:999px; display:flex; align-items:center;
  padding:0 calc(48 * var(--px)) 0 calc(24 * var(--px));
  box-shadow:0 calc(2 * var(--px)) calc(14 * var(--px)) rgba(28,28,27,.06);
}
.logo-mark{display:block; width:calc(81 * var(--px)); height:calc(35.7 * var(--px))}
.l-blue{fill:var(--blue)}
.l-navy{fill:var(--blue-deep)}
.l-coral{fill:var(--logo-coral)}
.l-apricot{fill:var(--apricot)}
.nav{display:flex; gap:calc(40 * var(--px)); margin-left:auto}
/* Unterstrich, der beim Hover von links einlaeuft; bei der aktiven Seite
   steht er dauerhaft. `aria-current="page"` traegt die Information auch
   fuer Screenreader. */
.nav a{
  font-size:calc(16 * var(--px)); font-weight:500; color:var(--ink);
  position:relative; white-space:nowrap; transition:opacity .2s;
  opacity:.72;
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%;
  bottom:calc(-6 * var(--px)); height:calc(2 * var(--px));
  background:var(--blue); border-radius:2px;
  transition:right .3s;
}
.nav a:hover{opacity:1}
.nav a:hover::after,
.nav a[aria-current="page"]::after{right:0}
.nav a[aria-current="page"]{opacity:1}
.header-cta{
  /* Spalte 11-12 (204), rechts buendig mit der Inhaltskante 1422 */
  position:absolute; left:calc(1218 * var(--px)); top:calc(24 * var(--px));
  width:calc(204 * var(--px)); height:calc(51.7 * var(--px));
  background:var(--blue); color:#fff; border-radius:999px; display:grid; place-items:center;
  font-size:calc(16 * var(--px)); font-weight:600; white-space:nowrap;
  transition:transform .25s cubic-bezier(.34,1.4,.5,1), background .2s;
}
.header-cta:hover{transform:translateY(calc(-2 * var(--px))); background:#0089C4}

/* ============================================================ Hero (0–884) */
.orange{
  position:relative; background:var(--apricot);
  border-radius:0 0 calc(112 * var(--px)) calc(112 * var(--px));
  margin-top:calc(-100 * var(--px)); overflow:hidden;
}
.hero{position:relative; height:var(--heroH)}
.hero-band{
  position:absolute; inset:0;
  overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:calc(130 * var(--px)) calc(64 * var(--px)) calc(70 * var(--px));
}
/* Formenfeld: SVG-Export aus Figma, 180° gedreht eingepasst */
.hero-band > svg.figma-field{
  position:absolute; left:calc(-61 * var(--px)); top:calc(9 * var(--px));
  width:calc(541.352 * var(--px)); height:calc(974.002 * var(--px));
  opacity:0; transform:translateY(calc(14 * var(--px)));
  transition:opacity .8s ease, transform 1s cubic-bezier(.2,.9,.25,1);
}
body.ready .hero-band > svg.figma-field{opacity:1; transform:none}
.hero-band > svg.figma-field{display:none}   /* Figma-Raster bleibt als Referenz im Markup */
.s-sand{fill:var(--sand)}
/* Blaue Formen im Hero-Feld: Markenblau direkt, ohne eigene
   Aufhellungsstufe (--blue-light entfiel R66). */
.s-blue{fill:var(--blue)}

/* Buchstaben-Einlauf. Gilt fuer den Hero der Startseite und die
   Kopfzeilen der Unterseiten – jede Seite eroeffnet gleich. */
.hero-title .w,.m-h1 .w{display:inline-block; white-space:nowrap}
.hero-title .ch,.m-h1 .ch{
  display:inline-block; will-change:transform;
  opacity:0; transform:translateY(.42em) scale(.72) rotate(-7deg);
  animation:pop .8s cubic-bezier(.18,1.6,.4,1) forwards;
  animation-delay:calc(var(--i) * .034s);
}
@keyframes pop{ to{ opacity:1; transform:none } }
/* Titel mit Marker: als Ganzes einblenden statt Buchstabe fuer Buchstabe */
.titel-fade{
  opacity:0; transform:translateY(.14em);
  animation:titelFade .7s cubic-bezier(.22,1.3,.36,1) .1s forwards;
}
@keyframes titelFade{ to{ opacity:1; transform:none } }
body.ready .hero-title.rebounce .ch,
body.ready .m-h1.rebounce .ch{
  opacity:1;
  animation:rebounce .62s cubic-bezier(.3,1.7,.45,1) both;
  animation-delay:calc(var(--i) * .019s);
}
@keyframes rebounce{
  0%  {opacity:1; transform:none}
  38% {opacity:1; transform:translateY(-.2em) scale(1.06) rotate(-3deg)}
  100%{opacity:1; transform:none}
}
.hero-title{
  position:relative; z-index:2; cursor:default; width:calc(1372 * var(--px)); max-width:100%;
  font-size:calc(104 * var(--px)); line-height:calc(112 * var(--px)); text-align:center;
}
.hero-lead{
  position:relative; z-index:2; width:calc(495 * var(--px)); max-width:100%;
  margin-top:calc(46 * var(--px));
  font-size:calc(16 * var(--px)); line-height:calc(24 * var(--px));
  font-weight:600; text-align:center; color:var(--ink);
}

/* ---- Balkenfeld links + rechts (Default) ---- */
.bars{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.bars{display:block}
.bcolumn{
  display:flex; flex-direction:column; gap:calc(10 * var(--px));
  position:absolute; top:calc(var(--top) * 1%); width:calc(108.27 * var(--px));
  display:flex; flex-direction:column;
  animation:drift var(--dur) ease-in-out infinite alternate; animation-delay:var(--phase);
}
.bcolumn.l{left:calc(var(--pos) * var(--px))}
.bcolumn.r{right:calc(var(--pos) * var(--px))}
html[data-play="0"] .bcolumn{animation:none}
html[data-play="2"] .bcolumn{animation-duration:calc(var(--dur) * .55)}
@keyframes drift{
  from{transform:translateY(calc(-14 * var(--px)))}
  to{transform:translateY(calc(16 * var(--px)))}
}
.bblock{
  height:calc(var(--h) * 108.27 * var(--px));
  transform:scaleY(0); transform-origin:50% 0;
  transition:transform .95s cubic-bezier(.2,1.35,.4,1); transition-delay:var(--d);
}
body.ready .bblock{transform:scaleY(1)}
.binner{
  display:block; width:100%; height:100%; background:var(--c); border-radius:999px;
  animation:jiggle var(--bd) cubic-bezier(.45,.05,.55,.95) infinite alternate;
  animation-delay:var(--bp);
}
@keyframes jiggle{
  from{transform:translateY(calc(-9 * var(--px))) scaleY(.965) rotate(-.4deg)}
  to  {transform:translateY(calc(11 * var(--px))) scaleY(1.04) rotate(.5deg)}
}
html[data-play="0"] .binner{animation:none}
html[data-play="2"] .binner{animation-duration:calc(var(--bd) * .55)}

/* ============================================================ Akzente
   Gezeichnete Unterstreichung und Markerflaeche – beide rein dekorativ.
   ============================================================ */
/* Gezeichnete Unterstreichung – laeuft beim Sichtbarwerden von links ein */
.unterstrich{position:relative; white-space:nowrap}
.unterstrich svg{
  /* Der Strich soll deutlich ueber das Wort hinauslaufen – wie mit
     Schwung von Hand gezogen. Frueher nur 104 %, also 11 px Ueberstand. */
  position:absolute; left:-7%; bottom:calc(-18 * var(--px)); width:114%; height:calc(26 * var(--px));
  overflow:visible;
}
.unterstrich path{
  fill:none; stroke:var(--apricot); stroke-width:9; stroke-linecap:round;
  stroke-dasharray:320; stroke-dashoffset:320;
  transition:stroke-dashoffset 1.1s cubic-bezier(.4,.1,.2,1) .35s;
}
[data-reveal].in .unterstrich path{stroke-dashoffset:0}

/* ---- Marker: schraeg liegende Flaeche hinter einem Wort ---- */
/* Kein `z-index:0`: das erzeugt einen eigenen Stapelkontext, in dem die
   Flaeche zwar hinter dem eigenen Text liegt, der ganze Marker aber ueber
   dem davorstehenden Wort gezeichnet wird (gemessen 24 px Ueberdeckung).
   Ohne Stapelkontext faellt die Flaeche in die Ebene der Sektion und
   liegt damit hinter allem Text. */
.mark{position:relative; white-space:nowrap}
.mark::before{
  content:""; position:absolute; inset:-.06em -.24em -.02em; z-index:-1;
  background:var(--logo-coral); border-radius:999px; transform:rotate(-1.8deg);
}

/* ============================================================ Aktuelles */
.news{
  position:relative; background:var(--bone);
  /* 78 = 8 Panelrand + 70 Innenabstand: damit stehen alle Texte der Seite
     auf derselben Linie. Abstand zum Hero kommt aus --m-top. */
  margin-top:var(--m-top);
  padding:0 calc(78 * var(--px)) 0;
}

/* Gemeinsames Kopfmuster aller Sektionen: Titel links, Text rechts */
/* Zeilenabstand 40 fuer den mobilen Umbruch, Spaltenabstand kommt aus
   dem Raster (24). Frueher galt die 40 auch fuer die Spalte und kam zum
   `space-between` hinzu – die rechte Spalte lag dadurch 19 px neben der
   Rasterlinie. */
.sec-head{display:grid; row-gap:calc(40 * var(--px)); column-gap:var(--grid-gap); margin-bottom:calc(84 * var(--px)); align-items:start}
/* Der Kopf teilt wie die Inhalte darunter: bei zwei gleich grossen
   Zitatkarten also 6/6 statt 7/5 – sonst haette das Modul zwei Raster. */
@media(min-width:1000px){
  .voices .sec-head{grid-template-columns:calc(660 * var(--px)) calc(660 * var(--px))}
}
@media(min-width:1000px){
  /* Sektionskopf teilt 7 / 5 wie die Karten darunter – vorher 5 / 6,
     dadurch lagen Kopf und Inhalt auf zwei verschiedenen Rastern. */
  .sec-head{grid-template-columns:calc(774 * var(--px)) calc(546 * var(--px))}
}
.sec-title{font-size:calc(76 * var(--px)); line-height:calc(85 * var(--px)); color:var(--ink)}
.sec-title .mark{color:#fff}
/* align-self:start – der Text soll oben mit dem Titel fluchten, nicht
   in seiner Spalte zentriert stehen. */
.sec-intro{font-size:calc(18 * var(--px)); line-height:calc(30 * var(--px)); font-weight:600; align-self:start; padding-top:calc(10 * var(--px))}

/* Die wichtigste Meldung gross links, zwei kleinere rechts gestapelt –
   bildet ab, dass die Meldungen nicht gleich wichtig sind. */
.news-row{
  /* Zeilenabstand 64: die Sticker ragen rund 20 px ueber die Kartenkante,
     bei 40 blieb kaum Luft und mobil ueberlappten sie die Karte darueber
     (gemessen -6). Der Spaltenabstand bleibt beim Rasterwert. */
  display:grid; row-gap:calc(64 * var(--px)); padding-top:calc(20 * var(--px));
  /* Grosse Karte 7 Spalten (774), kleine 5 (546) – zusammen mit dem
     24er-Gap ergibt das exakt die Inhaltsbreite 1344. */
  grid-template-columns:calc(774 * var(--px)) calc(546 * var(--px));
  column-gap:var(--grid-gap);
  grid-template-rows:auto auto; align-items:stretch;
}
.ncard{
  position:relative; display:flex; flex-direction:column;
  min-height:calc(400 * var(--px)); border-radius:calc(48 * var(--px));
  padding:calc(34 * var(--px)); color:var(--ink);
  box-shadow:0 calc(18 * var(--px)) calc(44 * var(--px)) rgba(80,60,30,.13);
  transition:transform .4s cubic-bezier(.34,1.5,.5,1), box-shadow .4s;
}
.ncard h3{font-size:calc(33 * var(--px)); line-height:1.08; color:inherit; margin-top:calc(14 * var(--px))}

/* Kartenfarben und Faecher-Kippung. Waren bei einer fehlerhaften
   Regex-Loeschung verlorengegangen (R17) – hier wiederhergestellt. */
.c1{background:var(--blue-deep); color:#fff; transform:rotate(-3deg)}
.c2{background:var(--logo-coral); color:var(--ink); transform:rotate(1.8deg) translateY(calc(18 * var(--px)))}
.c3{background:var(--apricot); color:var(--ink); transform:rotate(-1.4deg)}
.ncard.len-m h3{font-size:calc(29 * var(--px))}
.ncard.len-l h3{font-size:calc(26 * var(--px)); line-height:1.12}

/* Groesse und Position der Hierarchie. Muss NACH den Farb- und
   Laengenregeln stehen: `.ncard.len-l h3` hat dieselbe Spezifitaet wie
   `.ncard.c1 h3`, es entscheidet also die Reihenfolge. */
.ncard.c1{
  grid-row:1 / span 2; min-height:calc(440 * var(--px));
  transform:rotate(-1.6deg);
}
.ncard.c1 h3{font-size:calc(38 * var(--px)); line-height:1.06}
.ncard.c2,
.ncard.c3{min-height:calc(206 * var(--px))}
.ncard.c2{transform:rotate(1.2deg) translateY(0)}
.ncard.c3{transform:rotate(-.9deg)}
.ncard.c2 h3,
.ncard.c3 h3{font-size:calc(29 * var(--px))}
/* Kategorie als schraeg aufgeklebter Sticker ueber der oberen Kartenkante.
   Der Aufkleber-Effekt kommt aus dem Ring in der Hintergrundfarbe (--bone),
   nicht aus einem Border. */
.sticker{
  position:absolute; z-index:3; top:calc(-16 * var(--px)); left:calc(28 * var(--px));
  background:var(--ink); color:#fff; border-radius:999px;
  padding:calc(7 * var(--px)) calc(18 * var(--px));
  font-size:calc(15 * var(--px)); font-weight:700; line-height:1.25; white-space:nowrap;
  box-shadow:0 0 0 calc(4 * var(--px)) var(--bone), 0 calc(6 * var(--px)) calc(14 * var(--px)) rgba(40,30,10,.22);
  transition:transform .35s cubic-bezier(.34,1.6,.5,1);
}
/* Farbe = Kategorie, nicht Dekoration:
   Blau    → Verband        (was der VKZ selbst tut)
   Koralle → Stellungnahme  (Haltung beziehen, Konflikt)
   Apricot → Politik        (Ergebnisse aus dem politischen Prozess)
   Der Sticker ist weiss und traegt die Kategoriefarbe als Schrift –
   dadurch bleibt er auf jeder Kartenfarbe lesbar und die Zuordnung
   funktioniert auch ohne die Karte, z.B. in einer Uebersichtsliste. */
.sticker{background:#fff}
/* Abgedunkelte Varianten der Kategoriefarben: die Originaltoene erreichen
   auf Weiss nur 3:1, diese liegen bei >=4.5:1 (WCAG AA fuer Fliesstext). */
.c1 .sticker{color:#00688F; transform:rotate(-6deg)}
.c2 .sticker{color:#A03D33; transform:rotate(4.5deg)}
.c3 .sticker{color:#8A5A0B; transform:rotate(-3.5deg)}
.ncard:hover .sticker{transform:rotate(0deg) scale(1.06)}
.ncard-date{
  display:block; margin-top:calc(14 * var(--px)); font-size:calc(15 * var(--px)); font-weight:600; opacity:.85; white-space:nowrap;
  margin:calc(14 * var(--px)) 0 calc(6 * var(--px));
}
.ncard-btn{
  position:absolute; right:calc(30 * var(--px)); bottom:calc(30 * var(--px));
  width:calc(46 * var(--px)); height:calc(46 * var(--px)); border-radius:50%;
  background:var(--ink); color:#fff; display:grid; place-items:center;
  font-size:calc(19 * var(--px)); transition:transform .35s cubic-bezier(.34,1.5,.5,1);
}
.ncard:hover{transform:rotate(0deg) translateY(calc(-16 * var(--px))) scale(1.015);
  box-shadow:0 calc(34 * var(--px)) calc(70 * var(--px)) rgba(80,60,30,.22)}

/* ============================================================ Themen
   Drei Karten unter Titel und Text. Der scrollgetriebene
   Halbkreis (R9) ist entfallen – bei drei Elementen traegt er nicht.
   ============================================================ */
.focus{
  position:relative; background:var(--white);
  border-radius:calc(100 * var(--px));
  margin:var(--m-top) calc(8 * var(--px)) 0;
  padding:var(--m-innen) calc(70 * var(--px));
}
/* ============================================================ Themen
   Bewusst KEINE Karten: die Seite hatte drei Modules hintereinander mit je
   drei Kacheln in drei Spalten. Hier stattdessen breite Zeilen mit Trennlinie
   – horizontaler Rhythmus statt vertikaler Bloecke. Die Farbe kommt erst
   beim Hover, wo die ganze Zeile aufleuchtet.
   ============================================================ */
.themen-list{}
.trow{
  position:relative; margin-bottom:calc(6 * var(--px)); display:grid; align-items:start;
  /* Spalten 1 / 4 / 6 / 1 – zusammen mit drei Gaps exakt 1344.
     Das Innenpadding wandert nach aussen, damit die Zeileninhalte auf
     den Rasterlinien stehen und nicht 26 px eingerueckt. */
  grid-template-columns:calc(90 * var(--px)) calc(432 * var(--px)) minmax(0,1fr) calc(90 * var(--px));
  column-gap:var(--grid-gap);
  padding:calc(44 * var(--px)) 0;
  color:var(--ink);
  /* Kein Verschieben beim Hover: die Zeile ist ein grosses Element, jede
     Bewegung wirkt hier unruhig. Zudem wuerde [data-reveal] die Transition
     ohnehin ueberschreiben (siehe R19) – die Einrueckung wuerde springen.
     Der Hover zeigt nur noch das Farbfeld und den Pfeil, beide per Deckkraft. */
  transition:color .3s;
}
/* Farbfeld faehrt beim Hover von links ein */
.trow::before{
  /* Das Feld greift ueber die Textkante hinaus, sonst schneidet es
     Nummer und Pfeil an – die stehen seit der Rasterumstellung genau
     auf den Spaltenkanten, ohne Innenpadding. */
  content:""; position:absolute; z-index:-1;
  top:0; bottom:0;
  left:calc(-30 * var(--px)); right:calc(-30 * var(--px));
  background:var(--c, var(--apricot)); border-radius:calc(28 * var(--px));
  opacity:0; transition:opacity .3s ease;
  /* Das Feld ist gerundet – deshalb weichen beim Hover die geraden
     Trennlinien ober- und unterhalb der Zeile (siehe :has-Regeln unten). */
}

/* Hover-Toene: Apricot (wie zuvor), dazu zwei Logofarben. Die Deckkraft
   ist je Farbe so gewaehlt, dass die wahrgenommene Helligkeit gleich ist –
   Apricot ist von Haus aus hell, Navy sehr dunkel. Ergebnis .78 / .78 / .77. */
.trow:nth-child(1){--c:var(--apricot);    --o:.60}
.trow:nth-child(2){--c:var(--logo-coral); --o:.22}
.trow:nth-child(3){--c:var(--blue-deep);  --o:.18}
.trow::before{opacity:0}
.trow:hover::before{opacity:var(--o)}
.trow-num{
  font-family:var(--font-head); font-weight:var(--w-display); font-size:calc(21 * var(--px));
  opacity:.4; padding-top:calc(9 * var(--px)); transition:opacity .3s;
}
.trow:hover .trow-num{opacity:.7}
.trow-title{font-size:calc(44 * var(--px)); line-height:calc(48 * var(--px)); color:inherit}
.trow-text{font-size:calc(17 * var(--px)); line-height:calc(27 * var(--px)); font-weight:500; padding-top:calc(6 * var(--px))}
.trow-arrow{
  justify-self:end; align-self:center;
  width:calc(56 * var(--px)); height:calc(56 * var(--px)); border-radius:50%;
  background:var(--ink); color:#fff; display:grid; place-items:center;
  font-size:calc(19 * var(--px)); opacity:0;
  transition:opacity .3s ease;
}
.trow:hover .trow-arrow{opacity:1}


/* ============================================================ Stimmen
   Das persoenliche Modul. Aufhaenger ist der echte Claim der
   Seite („Zusammen sind wir stark") und das Zitatformat, das
   vkz.ch schon im Kopf fuehrt: „Ich engagiere mich im VKZ, weil …"
   ============================================================ */
.voices{
  position:relative; background:transparent;
  margin:var(--m-top) calc(8 * var(--px)) 0;
  /* Unten etwas mehr, weil die zweite Karte 26 px tiefer steht. */
  padding:0 calc(70 * var(--px)) calc(40 * var(--px));
}

/* ---- Gesicht mitten im Satz (Idee von makehrwork.nl) ---- */
.q-face{
  display:inline-block; vertical-align:-.18em;
  width:1.05em; height:1.05em; margin:0 .06em;
}
.q-face img{width:100%; height:100%; object-fit:cover; clip-path:url(#scallop)}

/* ---- Zitatkarten. Das Foto ist ein direktes Kind von .voice und wird
   ueber Grid-Areas platziert (Zitat oben, Foto + Name unten). ---- */
/* Dieselbe Teilung wie die News-Reihe: 7 und 5 Spalten. Frueher ein
   freies Verhaeltnis von 1.15:1, das auf keiner Rasterlinie lag. */
.voices-row{
  /* Zwei gleich grosse Karten zu 6 Spalten (660). Frueher 7/5 – bei
     zwei gleichrangigen Stimmen suggeriert eine groessere Karte eine
     Gewichtung, die es nicht gibt. Auch die Hoehe wird angeglichen. */
  display:grid; align-items:stretch;
  grid-template-columns:calc(660 * var(--px)) calc(660 * var(--px));
  column-gap:var(--grid-gap);
}
.voice{
  margin:0; display:grid; align-content:start;
  /* Portraet links gross, Zitat und Name rechts – horizontales Layout
     statt drei gleicher Hochformate. */
  /* Innen ebenfalls im Raster: Portraet 1 Spalte (90), Text 5 (546),
     dazwischen der Rastergap. Frueher 150 plus freier Rest. */
  grid-template-columns:calc(90 * var(--px)) minmax(0,calc(546 * var(--px)));
  column-gap:var(--grid-gap);
  grid-template-rows:1fr auto;
  grid-template-areas:"photo quote" "photo meta";
  gap:calc(20 * var(--px)) calc(30 * var(--px));
  align-content:center;
  border-radius:calc(44 * var(--px)); padding:calc(38 * var(--px));
  box-shadow:0 calc(14 * var(--px)) calc(34 * var(--px)) rgba(60,45,20,.10);
}
/* Zitate laufen auf derselben Display-Skala wie alle Titel:
   Gewicht 800, Satzschrift, Laufweite --track. Nur der Zeilenabstand
   ist etwas offener (1.25 statt 1.12), weil hier mehrere Zeilen
   gelesen werden und nicht drei Woerter geschaut. */
.voice > blockquote{grid-area:quote; margin:0;
  font-family:var(--font-head); font-weight:var(--w-display); letter-spacing:var(--track);
  font-size:calc(26 * var(--px)); line-height:calc(32 * var(--px))}
.voice.len-m > blockquote{font-size:calc(24 * var(--px)); line-height:calc(31 * var(--px))}
.voice.len-l > blockquote{font-size:calc(21 * var(--px)); line-height:calc(27 * var(--px))}
.voice > .voice-photo{
  grid-area:photo; align-self:center;
  /* Rund, wie im CTA: die Portraets stehen fuer Menschen, die Wellenform
     bleibt dem Formenvokabular der Marke vorbehalten. */
  /* Eine Rasterspalte breit (90) statt freier 150 */
  width:calc(90 * var(--px)); height:calc(90 * var(--px)); align-self:start;
  object-fit:cover; border-radius:50%;
}
.voice > figcaption{grid-area:meta; align-self:center; display:flex; flex-direction:column; gap:calc(3 * var(--px)); min-width:0}
.voice-name{font-weight:700; font-size:calc(18 * var(--px))}
.voice-role{font-size:calc(15 * var(--px)); opacity:.72}
/* Zitate alle weiss: hier unterscheidet die Person, nicht die Farbe.
   Farbe traegt auf dieser Seite Bedeutung (News = Kategorie), deshalb
   waere sie bei drei gleichrangigen Stimmen irrefuehrend. */
.voice{background:var(--white); color:var(--ink)}
.v1{transform:rotate(-1.4deg)}
.v2{transform:rotate(1deg) translateY(calc(26 * var(--px)))}
/* Kein Hover-Effekt: Zitate sind <figure>, keine Links. Ein Aufrichten
   wuerde Klickbarkeit suggerieren, die es nicht gibt. Die Feder-Geste
   bleibt den verlinkten Karten (.ncard) und den Themen-Zeilen (.trow)
   vorbehalten – beide sind <a>. */

/* ============================================================ CTA
   Farbflaeche wie vorher, aber mit der Struktur der uebrigen Sektionen:
   Titel links, Inhalt rechts (524 / 648) statt zentriert. Damit bleibt
   der starke Abschluss erhalten, ohne dass der CTA aus dem Raster faellt.
   ============================================================ */
.cta{
  position:relative; background:var(--blue-deep); color:#fff;
  border-radius:calc(100 * var(--px));
  margin:var(--m-top) calc(8 * var(--px)) calc(8 * var(--px));
  padding:var(--m-innen) calc(70 * var(--px));
}
.cta-head{display:grid; row-gap:calc(40 * var(--px)); column-gap:var(--grid-gap)}
@media(min-width:1000px){
  /* Auch der CTA teilt 7 / 5 – ein Raster fuer die ganze Seite. */
  .cta-head{grid-template-columns:calc(774 * var(--px)) calc(546 * var(--px))}
}
.cta-title{
  font-size:calc(76 * var(--px)); line-height:calc(85 * var(--px)); color:var(--white);
}
.cta-seite{display:flex; flex-direction:column; align-items:flex-start; align-self:start; padding-top:calc(10 * var(--px))}
.cta-lead{font-size:calc(19 * var(--px)); line-height:calc(31 * var(--px)); font-weight:500; opacity:.95}

/* Gesichtsreihe: die Portraets ueberlappen sich wie gestapelte Karten und
   belegen die Aussage „rund 800 Mitglieder" mit echten Menschen. */
.cta-leute{display:flex; align-items:center; margin-top:calc(32 * var(--px))}
.cta-leute img{
  /* Rund statt Wellenform: hier stehen die Bilder fuer Menschen, nicht
     fuer das Formenvokabular – und der Kreis laesst sie ueberlappen,
     ohne dass die Konturen ineinanderlaufen. */
  width:calc(72 * var(--px)); height:calc(72 * var(--px)); object-fit:cover;
  border-radius:50%; box-shadow:0 0 0 calc(4 * var(--px)) var(--blue-deep);
  margin-right:calc(-20 * var(--px));
  transition:transform .4s cubic-bezier(.34,1.5,.5,1);
}
.cta-leute img:nth-child(2){transform:rotate(6deg)}
.cta-leute img:nth-child(3){transform:rotate(-5deg)}
.cta-leute:hover img{transform:rotate(0) translateY(calc(-4 * var(--px)))}
.cta-zahl{
  margin-left:calc(30 * var(--px));
  font-size:calc(16 * var(--px)); font-weight:700; opacity:.9;
}
.cta-btn{
  display:inline-flex; align-items:center; gap:calc(14 * var(--px));
  margin-top:calc(38 * var(--px)); background:var(--white); color:var(--ink);
  border-radius:999px; padding:calc(20 * var(--px)) calc(38 * var(--px));
  font-size:calc(18 * var(--px)); font-weight:700;
  transition:transform .3s cubic-bezier(.34,1.6,.5,1), background .2s;
}
.cta-btn:hover{transform:translateY(calc(-3 * var(--px))) scale(1.03)}

/* ============================================================ Footer */
.site-footer{margin-top:var(--m-top); padding:0 calc(78 * var(--px)) calc(110 * var(--px)); text-align:center; font-size:calc(15 * var(--px)); opacity:.5}

/* ============================================================ Scroll-Reveal
   Einmaliges Hochfedern beim Eintreten. Die Feder steckt wie beim
   Titel in der Bezier-Kurve (Overshoot ueber 1), nicht in Keyframes.
   Versatz je Gruppe kommt aus script.js als --rd.
   ============================================================ */
/* Wichtig: das Reveal nutzt die eigenstaendigen Eigenschaften `translate`
   und `scale`, NICHT `transform`. Sonst ueberschreibt es die Kippung der
   Karten (.c1/.c2/.c3, .voice, .fcard) und alles steht wieder gerade. */
[data-reveal]{
  opacity:0; translate:0 calc(42 * var(--px)); scale:.97;
  /* Verzoegerung nur auf den Reveal-Eigenschaften – transform und box-shadow
     bleiben ohne Delay, sonst reagiert der Hover der Karten traege oder gar nicht. */
  transition:opacity .5s ease var(--rd, 0s),
             translate .85s cubic-bezier(.22,1.45,.36,1) var(--rd, 0s),
             scale .85s cubic-bezier(.22,1.45,.36,1) var(--rd, 0s),
             transform .4s cubic-bezier(.34,1.5,.5,1),
             box-shadow .4s ease;
}
[data-reveal].in{opacity:1; translate:0 0; scale:1}

/* Das weisse Panel kommt als Flaeche – etwas traeger und ohne Skalierung
   der Schrift, sonst flimmert der Text beim Einlaufen. */
.focus[data-reveal]{
  translate:0 calc(64 * var(--px)); scale:.985;
  transform-origin:50% 100%;
  transition:opacity .6s ease,
             translate 1s cubic-bezier(.22,1.35,.36,1),
             scale 1s cubic-bezier(.22,1.35,.36,1);
}
.focus[data-reveal].in{translate:0 0; scale:1}

@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1 !important; translate:none !important; scale:none !important; transition:none !important}
}

/* Eine einzelne Form in der grossen News-Karte: ein Bogen aus dem
   Logo-Vokabular, halb aus der Karte laufend. Kein Motiv, kein Icon —
   nur die Form selbst, wie im Hero-Formenfeld.
   ============================================================ */
.ncard-form{
  /* Clippt die Form an der Kartenkante. Kein overflow:hidden auf der Karte
     selbst – das wuerde den Sticker abschneiden, der oben ueberragt. */
  position:absolute; inset:0; z-index:0; pointer-events:none;
  overflow:hidden; border-radius:inherit;
}
.ncard-form::before{
  content:""; position:absolute;
  left:calc(-30 * var(--px)); bottom:calc(-60 * var(--px));
  width:calc(230 * var(--px)); height:calc(300 * var(--px));
  background:rgba(255,255,255,.14);
  border-radius:999px 999px calc(20 * var(--px)) calc(20 * var(--px));
  transition:transform .6s cubic-bezier(.34,1.4,.5,1);
}
.c1:hover .ncard-form::before{transform:translateY(calc(-14 * var(--px))) rotate(-3deg)}
/* Nur den Textinhalt ueber die Form heben. Sticker und Button sind
   absolut positioniert – ein pauschales `position:relative` auf allen
   Kindern haette sie in den Fluss zurueckgeholt (Sticker mitten in der
   Karte, Button unter dem Titel). */
.c1 .ncard-date, .c1 h3{position:relative; z-index:1}
.c1 .sticker, .c1 .ncard-btn{z-index:3}

/* Einzelmodus: Seitenraender und Hero-Deckel neutralisieren */
html[data-einzel="1"] .orange{margin-top:0; border-radius:0}
html[data-einzel="1"] .hero{height:auto; min-height:calc(760 * var(--px))}
html[data-einzel="1"] body{background:var(--bone)}
/* Der Hero braucht 100vh, alle anderen Module sollen exakt ihre
   Inhaltshoehe haben – sonst misst die Buehne zu viel. */
html[data-einzel="1"] .frame{min-height:0}
/* Der Modulabstand gehoert zum Seitenfluss, nicht zum Modul – im
   Einzelmodus faellt er weg, sonst misst die Buehne 184 px zu viel. */
html[data-einzel="1"] .news,
html[data-einzel="1"] .focus,
html[data-einzel="1"] .voices,
html[data-einzel="1"] .cta,
html[data-einzel="1"] .site-footer{margin-top:0}
/* Innenabstand ergaenzen: auf der Seite kommt er vom Nachbarmodul. */
html[data-einzel="1"] .news,
html[data-einzel="1"] .voices{padding-top:calc(90 * var(--px)); padding-bottom:calc(90 * var(--px))}
html[data-einzel="1"] .focus,
html[data-einzel="1"] .cta{margin-top:0}

/* ============================================================ Burger
   Ab 1000 px zeigt der Header die Navigation, darunter den Burger.
   Bisher wurde die Navigation mobil nur ausgeblendet – die Unterseiten
   waren dort gar nicht erreichbar.
   ============================================================ */
/* Eigener Kreis rechts aussen, gleiche Hoehe wie die Header-Pille –
   ein Bauteil neben der Leiste, nicht darin. */
.burger{
  display:none; position:relative; z-index:95; flex:0 0 auto;
  width:48px; height:48px; padding:0; border:0; cursor:pointer;
  background:var(--ink); border-radius:50%;
  transition:transform .35s cubic-bezier(.34,1.6,.5,1), background .25s;
}
.burger:hover{transform:scale(1.06)}
.burger[aria-expanded="true"]{background:var(--ink)}
.burger span{
  position:absolute; left:15px; width:18px; height:2px;
  background:#fff; border-radius:2px;
  transition:transform .3s cubic-bezier(.3,1.4,.4,1), opacity .2s;
}
.burger span:nth-child(1){top:21px}
.burger span:nth-child(2){top:27px}
/* Offen: die beiden Striche werden zum Kreuz */
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* Ruhiges Overlay: Apricot als Flaeche, sonst nichts. Die Eintraege
   laufen gestaffelt ein, der Mitglieder-Button steht als Abschluss
   darin – im Header bleibt mobil nur Logo und Burger. */
/* Nicht `hidden` schalten, sondern ein- und ausblenden: `hidden` kennt
   keinen Uebergang, das Overlay sprang dadurch schlagartig an und weg.
   Der Zustand haengt jetzt an `data-offen`; `visibility` haelt es fuer
   Tastatur und Screenreader ausserhalb, solange es zu ist. */
/* Ab 1000 px gibt es das Overlay nicht – sonst bliebe ein unsichtbares
   Element ueber der Seite liegen. */
.mobilnav{display:none}
@media (max-width:999px){
.mobilnav{
  position:fixed; inset:0; z-index:90;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 24px 24px;
  background:var(--apricot);
  overflow:hidden;
  opacity:0; visibility:hidden;
  clip-path:circle(0% at calc(100% - 48px) 46px);
  transition:opacity .25s ease, visibility 0s linear .45s,
             clip-path .45s cubic-bezier(.4,.9,.3,1);
}
/* Aufziehen aus dem Burger heraus – die Flaeche waechst von dort, wo
   geklickt wurde. */
.mobilnav[data-offen]{
  opacity:1; visibility:visible;
  clip-path:circle(150% at calc(100% - 48px) 46px);
  transition:opacity .2s ease, visibility 0s,
             clip-path .55s cubic-bezier(.3,.8,.2,1);
}

.mobilnav-liste{position:relative; display:flex; flex-direction:column; gap:0}
.mobilnav a{
  font-family:var(--font-head); font-weight:var(--w-display);
  font-size:clamp(30px, 8.6vw, 40px); line-height:1.14; letter-spacing:var(--track);
  color:var(--ink); padding:3px 0;
  opacity:0; transform:translateY(20px);
  transition:opacity .35s ease, transform .45s cubic-bezier(.22,1.35,.36,1);
  transition-delay:calc(var(--i) * .045s + .12s);
}
.mobilnav[data-offen] .mobilnav-liste a{opacity:1; transform:none}
/* Aktive Seite: Unterstrich statt Markerflaeche. Der Marker greift auf
   Wortbreite – die Links sind hier aber Blockelemente, die Flaeche lief
   dadurch ueber die ganze Zeile. */
/* Ink statt Blau: auf Apricot bringt Blau nur 2.3:1 und wirkt neben der
   schwarzen Schrift wie ein Fremdkoerper. */
.mobilnav a[aria-current="page"]{
  text-decoration:underline;
  text-decoration-thickness:3px;
  text-underline-offset:6px;
  text-decoration-color:var(--ink);
}
a.mobilnav-cta{
  position:relative; align-self:flex-start;
  display:inline-flex; align-items:center; gap:12px;
  margin-top:30px; padding:16px 26px;
  background:var(--ink); border-radius:999px;
  font-family:var(--font-body); letter-spacing:0; color:#fff !important;
  font-size:16px !important; font-weight:700; line-height:1;
  opacity:0; transform:translateY(20px);
  transition:opacity .35s ease, transform .45s cubic-bezier(.22,1.35,.36,1);
  transition-delay:calc(var(--i) * .045s + .12s);
}
.mobilnav[data-offen] .mobilnav-cta{opacity:1; transform:none}
/* Solange das Menue offen ist, wird der Rest nicht gescrollt */
html[data-nav="offen"]{overflow:hidden}
}

/* ============================================================ 12er-Raster
   Benannte Linien wie im 3S-Vorbild, damit Module ueber Namen statt
   Zahlen positioniert werden:
     rand      – volle Breite bis an den Viewport
     inhalt    – Inhaltsbreite (1344 bei 1500)
     mitte     – Spaltenmitte, fuer Zweispalter
   ============================================================ */
.raster12{
  display:grid;
  grid-template-columns:
    [rand-start] calc(78 * var(--px))
    [inhalt-start] repeat(6, [col-start] minmax(0,1fr) [col-end])
    [mitte] repeat(6, [col-start] minmax(0,1fr) [col-end])
    [inhalt-end] calc(78 * var(--px))
    [rand-end];
  column-gap:var(--grid-gap);
}
/* Die Randspalten tragen keinen Gap – sonst waeren es 13 Abstaende. */
.raster12 > *{grid-column:inhalt-start / inhalt-end}
.raster12 > .voll{grid-column:rand-start / rand-end}
.raster12 > .links{grid-column:inhalt-start / span 5}
.raster12 > .rechts{grid-column:mitte 1 / inhalt-end}

/* ============================================================ Dev: Raster
   `data-grid="an"` legt das Raster der Startseite ueber die Seite:
     8    Panel-Aussenrand
     70   Innenabstand der Panels
     120  Innenabstand der randlosen Module (News)
     546 / 660  Zweispalter = Spalte 1-5 / 7-12
   Rein zur Kontrolle, ohne Einfluss auf das Layout.
   ============================================================ */
.raster{
  display:none; position:fixed; inset:0; z-index:400; pointer-events:none;
}
html[data-grid="an"] .raster{display:block}
.raster i{position:absolute; top:0; bottom:0; width:1px}
.raster i{width:2px}
.raster i.rand{background:rgba(220,40,40,.9)}
.raster i.innen{background:rgba(0,110,230,.85)}
.raster i.spalte{background:rgba(0,160,80,.9)}
.raster b{
  position:absolute; top:0; bottom:0; display:block;
  background:rgba(0,150,220,.13);
  border-left:1px solid rgba(0,120,200,.5);
  border-right:1px solid rgba(0,120,200,.5);
}
.raster span{
  position:absolute; top:calc(8 * var(--px)); transform:translateX(-50%);
  font:700 10px/1 'Bricolage Grotesque',sans-serif; color:#fff;
  background:rgba(28,28,27,.85); padding:3px 6px; border-radius:3px; white-space:nowrap;
}

/* ============================================================ Dev: Modulnamen
   Blendet ueber `data-dev="an"` den Namen jedes Moduls ein — dasselbe
   rotierte Schild wie in den Figma-Templates und auf module.html.
   Rein fuer die Abstimmung, in der Umsetzung ersatzlos entfernbar.
   ============================================================ */
/* Nicht den Header treffen: der braucht `sticky`, und diese Regel steht
   spaeter im Stylesheet – bei gleicher Spezifitaet hat sie sonst gewonnen
   und der Header scrollte weg. `sticky` bildet ohnehin einen
   Positionierungskontext fuer das Namensschild. */
[data-modul]:not(.site-header){position:relative}
html[data-dev="an"] [data-modul]::after{
  content:attr(data-modul);
  position:absolute; right:0; top:calc(56 * var(--px)); z-index:120;
  transform:rotate(-90deg); transform-origin:100% 100%;
  background:var(--ink); color:#fff;
  padding:calc(8 * var(--px)) calc(16 * var(--px));
  font-family:var(--font-body); font-size:calc(12 * var(--px)); font-weight:700;
  white-space:nowrap; letter-spacing:.02em; pointer-events:none;
}
/* Auf dunklen Flaechen invertiert */
html[data-dev="an"] .cta[data-modul]::after{background:var(--apricot); color:var(--ink)}
/* Der Header ist niedrig – Schild dort waagerecht statt gedreht */
html[data-dev="an"] .site-header[data-modul]::after{
  transform:none; top:auto; bottom:calc(-14 * var(--px)); right:calc(64 * var(--px));
}

/* ============================================================ Stil-Panel */
.styler{position:fixed; right:16px; bottom:16px; z-index:200; width:262px;
  background:rgba(255,255,255,.93); backdrop-filter:blur(14px);
  border-radius:20px; box-shadow:0 14px 44px rgba(28,28,27,.20);
  font-family:'Bricolage Grotesque', system-ui, sans-serif; overflow:hidden}
.styler-toggle{width:100%; border:0; background:var(--ink); color:#fff; cursor:pointer;
  padding:11px 16px; font:600 14px 'Bricolage Grotesque',sans-serif; text-align:left;
  display:flex; justify-content:space-between; align-items:center}
.styler-body{padding:14px 16px 18px; display:grid; gap:13px; max-height:70vh; overflow:auto}
.styler[data-open="0"] .styler-body{display:none}
.styler[data-open="0"] .styler-toggle span{transform:rotate(180deg)}
.styler-toggle span{display:inline-block; transition:transform .25s}
.styler fieldset{border:0; margin:0; padding:0}
.styler legend{font-size:11px; text-transform:uppercase; letter-spacing:.09em; opacity:.55; margin-bottom:6px; font-weight:600}
.opts{display:flex; flex-wrap:wrap; gap:6px}
.opts button{border:1.5px solid rgba(28,28,27,.16); background:#fff; color:var(--ink);
  border-radius:999px; padding:5px 11px; font:500 12.5px 'Bricolage Grotesque',sans-serif; cursor:pointer; transition:.18s}
.opts button:hover{border-color:var(--ink)}
.opts button.is-on{background:var(--ink); color:#fff; border-color:var(--ink)}

/* ============================================================ Mobile / Tablet < 1000 px */
@media (max-width:999px){
  /* Small: eine Spalte, Aussenrand 24, Abstand 24. Bewusst kein
     Spaltenraster – auf dieser Breite stapelt ohnehin alles. */
  .frame{
    /* Abstaende waren anteilig doppelt so gross wie auf Desktop:
       80/390 = 20.5 % gegen 160/1500 = 10.7 %. */
    --px:1px; width:100%; --heroH:auto; --m-top:56px; --m-innen:40px;
    --grid-spalten:1; --grid-gap:24px; --m-aussen:24px;
  }
  body{font-size:16px}

  /* Header */
  /* Der Header scrollt weg, der Burger bleibt: mobil ist er der einzige
     Zugang zur Navigation. Frueher war er nach dem ersten Bildschirm
     nicht mehr erreichbar. */
  .site-header{height:auto; padding:14px 16px; display:flex; gap:10px; align-items:center; background:var(--apricot); position:relative}
  .burger{
    position:fixed; top:14px; right:16px; z-index:95;
    box-shadow:0 calc(4 * var(--px)) calc(16 * var(--px)) rgba(28,28,27,.18);
  }
  .header-bar{position:static; width:auto; height:52px; flex:1; padding:0 18px}
  .nav{display:none}
  .burger{display:block}
  /* Der Mitglieder-Button steht jetzt im Overlay */
  .header-cta{display:none}
  .header-cta{position:static; width:auto; height:52px; padding:0 20px; font-size:15px}

  /* Hero */
  .orange{margin-top:0; border-radius:0 0 44px 44px}
  .hero{height:auto; margin-top:0}
  .hero-band{position:relative; inset:auto; overflow:hidden; padding:70px 32px 54px;
    border-radius:0; align-items:flex-start; justify-content:center; min-height:74svh}
  .hero-title{position:relative; width:auto; font-size:clamp(38px,10.4vw,50px); line-height:1.1;
    text-align:left; margin-bottom:20px}
  .hero-lead{position:relative; width:auto; margin-top:18px; font-size:17px; line-height:1.55;
    text-align:left; max-width:38ch}
  /* Nur die aeussersten Spalten: die zweite je Seite lag bei 46…154 und
     236…344 direkt hinter dem Titel (32…358) und machte ihn unruhig.
     Auf Desktop ist die Ueberlappung gewollt, dort ist der Titel breit
     genug, dass sie als Tiefe wirkt statt als Stoerung. */
  .bcolumn:nth-child(2),.bcolumn:nth-child(3),.bcolumn:nth-child(4),
  .bcolumn:nth-child(6),.bcolumn:nth-child(7),.bcolumn:nth-child(8){display:none}
  .hero-band > svg.figma-field{left:auto; right:-34%; top:0; width:520px; height:936px; opacity:.9}
  body.ready .hero-band > svg.figma-field{opacity:.9}

  /* Logo-Formensprache */
  html[data-form="bauklotz"] .ncard{border-radius:90px 90px 14px 14px; padding:44px 24px 28px}
  html[data-form="bauklotz"] .trow{padding-left:4px}
  html[data-form="bauklotz"] .trow-num{width:38px; height:38px; font-size:15px}
  html[data-form="bauklotz"] .voice > .voice-photo{border-radius:999px 999px 10px 10px}
  html[data-form="bauklotz"] .cta{border-radius:150px 150px 20px 20px; padding-top:90px}

  /* Akzente */
  .unterstrich svg{bottom:-12px; height:16px}

  /* Gemeinsames Kopfmuster */
  .sec-head{margin-bottom:28px; gap:16px}
  .sec-title{font-size:clamp(24px,6.8vw,32px); line-height:1.16}
  .sec-intro{font-size:16px; line-height:1.6}

  /* Aktuelles */
  .news{padding:0 32px}
  /* Zeilenabstand 44 statt 16: die Sticker ragen rund 20 px ueber die
     Karte und ueberlappten sonst die Karte darueber (gemessen -6). */
  .news-row{grid-template-columns:1fr !important; grid-template-rows:none !important;
    column-gap:24px; row-gap:44px}
  /* min-width:0 – sonst zieht die min-content-Breite des laengsten Wortes
     die Grid-Spur ueber die Containerbreite hinaus (1fr = minmax(auto,1fr)). */
  .ncard{min-width:0; overflow-wrap:anywhere}
  .ncard.c1{grid-row:auto !important; grid-column:auto !important; min-height:280px}
  .ncard.c1 h3{font-size:30px}
  .ncard.c2 h3,
  .ncard.c3 h3{font-size:24px}
  .ncard{min-height:230px; border-radius:32px; padding:24px; transform:none !important}
  .ncard h3{font-size:26px}
  .ncard.len-m h3{font-size:23px}
  .ncard.len-l h3{font-size:21px}
  .ncard-btn{width:40px; height:40px; right:22px; bottom:22px; font-size:17px}
  .ncard-date{font-size:14px; margin-top:12px}
  .ncard-meta{margin-bottom:4px}
  .tag{font-size:12px; padding:4px 12px}

  /* Themen */
  /* Nummer ueber den Titel statt daneben: die Spalte nahm 44 px weg,
     Titel und Text standen dadurch eingerueckt statt auf der
     Rasterkante. */
  .trow{grid-template-columns:1fr; gap:4px; padding:26px 0}
  .trow-num{grid-column:1; font-size:15px; padding-top:0; opacity:.5}
  .trow-title{grid-column:1; font-size:21px; line-height:1.25}
  .trow-text{grid-column:1; font-size:16px; line-height:1.55; padding-top:8px}
  .trow-arrow{display:none}
  /* Panels brauchen Luft zur Farbkante: 24 innen. Damit die Textkante
     mit den randlosen Modulen fluchtet, haben die dort 32 (8 + 24). */
  .focus{margin:var(--m-top) 8px 0; border-radius:44px; padding:var(--m-innen) 24px; overflow:hidden}
  /* Das Hover-Feld greift 30 px ueber die Textkante – bei 16 px
     Innenabstand laege es sonst ausserhalb des Panels. */
  .trow::before{left:-24px; right:-24px}
  .focus-head{max-width:none}


  /* Stimmen */
  .voices{margin:var(--m-top) 8px 0; padding:0 24px 30px}
  .voices-row{grid-template-columns:1fr; gap:24px}
  .voices-row{grid-template-columns:1fr !important; gap:24px}
  /* Portraet ueber den Text statt daneben: nebeneinander blieben dem
     Zitat nur 172 px, also rund 16 Zeichen pro Zeile. */
  .voice{
    border-radius:30px; padding:26px; gap:14px; transform:none !important;
    grid-template-columns:1fr;
    grid-template-areas:"photo" "quote" "meta";
  }
  .voice > blockquote{font-size:18px !important; line-height:1.5 !important}
  .voice > .voice-photo{width:72px !important; height:72px !important}

  /* CTA */
  .cta{margin:var(--m-top) 8px 8px; border-radius:44px; padding:var(--m-innen) 24px}
    .cta-title{font-size:clamp(24px,6.8vw,32px); line-height:1.16}
  .cta-lead{font-size:16px; line-height:1.6; margin-top:20px; max-width:none}
  .cta-btn{font-size:16px; padding:16px 26px; margin-top:28px}

  .site-footer{margin-top:var(--m-top); padding:0 32px 60px; font-size:14px}
  .styler{width:calc(100% - 32px)}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition-duration:.01ms !important}
  .hero-title .ch,.m-h1 .ch{opacity:1 !important; transform:none !important}
  .titel-fade{opacity:1 !important; transform:none !important; animation:none !important}
  .bblock{transform:scaleY(1) !important}
  .hero-band > svg{opacity:1 !important; transform:none !important}
  [data-reveal]{opacity:1 !important; translate:none !important; scale:none !important; transition:none !important}
}