/* ============================================================================
Cyberdise Design System — Foundation-CSS · QUELLE DER WAHRHEIT
Hier editieren, danach `node build-foundation.mjs` → foundation.html.
Rollen-Tokens kommen aus tokens.css — hier nie rohes Hex.
========================================================================== */
*{box-sizing:border-box;margin:0}
body{font-family:var(--font-body);color:var(--text);background:var(--surface);
line-height:var(--leading-body);font-size:var(--step-0);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.display{font-family:var(--font-display);color:var(--text-strong);
line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);font-weight:var(--weight-heading)}
a{color:var(--accent)}
.wrap{max-width:var(--container);margin-inline:auto;padding-inline:var(--space-md)}
section{padding-block:var(--space-2xl)}
section + section{border-top:1px solid var(--border)}
.eyebrow{font-family:var(--font-display);font-weight:var(--weight-ui);text-transform:uppercase;
letter-spacing:var(--tracking-eyebrow);font-size:var(--step--1);color:var(--accent-2)}
/* --accent-2 traegt zwei Rollen: Textakzent (Eyebrow) und Fuellung (sekundaerer Button).
Auf Dunkel brauchen die entgegengesetzte Richtungen — Magenta als Flaeche bleibt richtig,
als Text erreicht es nur ~2.4:1. Der Eyebrow wechselt darum auf --accent. */
.on-dark .eyebrow,[data-theme="dark"] .eyebrow{color:var(--accent)}
.section-head__title{font-size:var(--step-3);margin:.4rem 0 .4rem}
.section-head__lead{color:var(--text-muted);max-width:var(--measure-body);margin-bottom:var(--space-lg)}
.grid{display:grid;gap:var(--space-sm)}
/* ===== LAYOUT — zwei Muster, EIN Breakpoint ===============================
Vorher lagen sechs verschiedene Raster-Definitionen und zwei Breakpoints (720
und 820) im CSS — jede Sektion hatte ihre eigene Loesung erfunden. Alles laesst
sich auf zwei Muster zurueckfuehren:
.tiles Kacheln, gleichwertig. Das Raster zaehlt die Spalten SELBST herunter,
darum braucht dieses Muster keinen Breakpoint. Stellschrauben:
--tile-min Breite, unter die eine Kachel nicht fallen darf.
--tile-flow auto-fill (Standard) haelt die Kachelgroesse stabil und
laesst rechts Platz frei — richtig fuer Schaukaesten mit
fester Anzahl. auto-fit dehnt die vorhandenen Kacheln auf
die volle Zeile — richtig fuer Karten.
.duo Zwei Spalten, gleich oder gewichtet (--duo). Bricht als einziges
Muster am Breakpoint auf eine Spalte.
Der Breakpoint ist 820px und es gibt genau diesen einen. Unter 820 ergeben zwei
Spalten Spaltenbreiten unter 380px — dort bricht jedes zweispaltige Layout,
also bricht es fuer alle an derselben Stelle. Wer einen zweiten braucht, hat
wahrscheinlich das falsche Muster gewaehlt. */
.tiles,.sw-grid,.logo-grid,.pat-grid,.card-row{display:grid;gap:var(--space-sm);
grid-template-columns:repeat(var(--tile-flow,auto-fill),minmax(var(--tile-min,16rem),1fr))}
.duo,.role-cols,.dd,.ppl-imgs,.rhythm-demo,.hero-demo,.darksec-grid,.hero,.prompt .seg{
display:grid;gap:var(--space-md);grid-template-columns:var(--duo,1fr 1fr)}
/* Der Umbruch selbst steht am DATEIENDE — sonst gewinnt eine spaeter notierte
Komponentenregel (z. B. .mega__grid) gegen die Media Query. */
.mono{font-family:var(--mono);font-size:.82em}
.tag{display:inline-block;font-family:var(--font-body);font-size:var(--step--1);
color:var(--text-muted);background:var(--surface-sunken);border:1px solid var(--border);
border-radius:var(--radius-control);padding:.15rem .6rem}
/* Masthead */
.mast{background:var(--surface-sunken);border-bottom:1px solid var(--border)}
.mast .wrap{padding-block:var(--space-lg);display:flex;align-items:center;
justify-content:space-between;gap:var(--space-md);flex-wrap:wrap}
.mast img{height:52px;display:block}
.mast-home{display:inline-block;border-radius:var(--radius-field);text-decoration:none;
transition:opacity .15s ease}
.mast-home:hover{opacity:.75}
.mast-home:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.mast .meta{text-align:right;color:var(--text-muted);font-size:var(--step--1)}
.mast .meta b{color:var(--accent);font-family:var(--font-display)}
/* Signature band */
/* Dokument-Hero — gleiche Sprache wie die Hero-Komposition (09 — Im Kontext): weisse Fläche,
zwei weiche 50er-Glows, Pattern voll deckend. KEIN Verlauf: der bleibt CTA- und
Signatur-Momenten vorbehalten. Motiv P4 an seiner natürlichen Ecke (unten rechts). */
.signature{background:var(--surface);position:relative;overflow:hidden;color:var(--text);
padding-block:var(--space-2xl);min-height:26rem;display:flex;align-items:center}
.signature .wrap{position:relative;z-index:1;width:100%}
/* Keine Breite am Container — sie traefe Titel und Lead mit demselben Pixelwert.
Beide begrenzen sich unten selbst, jeder in seiner eigenen Schriftgroesse. */
.signature .inner{max-width:none}
/* Pattern als echter Layer statt background-image — nur so kann es am Parallax teilnehmen.
Volle Deckkraft, läuft über die untere/rechte Kante hinaus (natürliche Ecke von P4). */
/* Pattern folgt NUR dem Scroll (--sy), nicht dem Cursor. */
/* Auch hier Maske statt : ein Bild traegt die Farbe der Datei und folgt keiner
Fassung. Breite aus dem Seitenverhaeltnis der viewBox, weil ein Verlauf keins hat. */
.sigpat{position:absolute;right:-5rem;bottom:-2rem;height:96%;z-index:0;pointer-events:none;
aspect-ratio:var(--pattern-ratio);
background:var(--pattern-fill,var(--pattern-motif-fill));
-webkit-mask:var(--pattern) center/100% 100% no-repeat;
mask:var(--pattern) center/100% 100% no-repeat;
will-change:transform;
transform:translate3d(0,var(--sy,0px),0)}
/* Radiale Glow-Layer — ausschliesslich 50er-Abstufungen, echte Elemente damit sie
per data-depth am Parallax teilnehmen (Maus --px/--py, Scroll --sy). */
/* Glows folgen NUR dem Cursor (--px/--py), nicht dem Scroll. */
.hero__glow{position:absolute;border-radius:50%;pointer-events:none;z-index:0;will-change:transform;
filter:blur(72px);
transform:translate3d(var(--px,0px),var(--py,0px),0);
animation:glowDrift 26s ease-in-out infinite alternate}
.hero__glow--1{width:48rem;height:38rem;left:-12rem;top:-14rem;background:var(--surface-teal)}
.hero__glow--2{width:42rem;height:34rem;right:6%;bottom:-14rem;background:var(--surface-magenta);animation-delay:-9s}
.hero__glow--3{width:34rem;height:28rem;left:30%;top:18%;background:var(--surface-muted);animation-delay:-17s}
@keyframes glowDrift{from{translate:-1.2% -1%}to{translate:1.6% 1.4%}}
/* h1, nicht h2: das ist die Ueberschrift des Dokuments. Vorher trug die Seite gar kein h1 —
das einzige lag mitten drin in der Hero-DEMO und behauptete damit, das Dokument handle
von «Awareness Doesn't Stop Attacks». Ueberschriften sind Struktur, nicht Schriftgrad. */
.signature h1{color:var(--text-strong);font-size:var(--step-4);line-height:var(--leading-tight);
max-width:var(--measure-display)}
.signature p{color:var(--text-muted);margin-top:var(--space-sm);font-size:var(--step-1);
max-width:var(--measure-lede)}
/* Swatches */
.sw-grid{--tile-min:12rem}
.sw{border:1px solid var(--border);border-radius:var(--radius-inset);overflow:hidden;
background:var(--surface-raised);box-shadow:var(--shadow-sm)}
.sw .chip{height:96px}
.sw .body{padding:.7rem .8rem}
.sw .name{font-family:var(--font-display);font-weight:var(--weight-ui);font-size:var(--step-0)}
.sw .meaning{color:var(--text-muted);font-size:var(--step--1)}
.sw .hex{margin-top:.35rem;display:flex;justify-content:space-between;align-items:center}
/* Der Token-Name UNTER der Rampe: die Zahlen in den Feldern sind die Stufen, aber
ohne den Namen davor weiss niemand, wie die Reihe heisst. */
/* Beschriftung UEBER einer Rampe — beim Vergleich mehrerer Kandidaten muss vor der
Leiste stehen, welche es ist; die Notiz darunter traegt die Folgen. */
.ramp-label{margin:0 0 .3rem;font-size:var(--step--1);color:var(--text)}
.ramp-note{margin:.35rem 0 0;font-size:var(--step--1);color:var(--text-muted)}
.ramp{display:flex;border-radius:var(--radius-inset);overflow:hidden;border:1px solid var(--border)}
.ramp span{flex:1;height:56px;display:flex;align-items:flex-end;justify-content:center;
font-size:10px;padding-bottom:4px;color:var(--text-on-brand);font-family:var(--mono)}
.bar{height:64px;border-radius:var(--radius-inset);border:1px solid var(--border)}
/* Roles: light + dark panels */
.panel{border-radius:var(--radius-panel);padding:var(--space-md);border:1px solid var(--border);
background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}
.panel h4{font-size:var(--step-1);margin-bottom:.8rem}
.role{display:flex;align-items:center;gap:.7rem;padding:.35rem 0}
.role .dot{width:26px;height:26px;border-radius:7px;border:1px solid rgba(128,128,128,.35);flex:none}
.role .rn{font-family:var(--mono);font-size:.8rem;color:var(--text)}
.role .rv{margin-left:auto;color:var(--text-muted);font-size:var(--step--1)}
/* Layout-Sektion — Demos für die zwei Raster-Muster */
.lay-h{font-size:var(--step-2);margin:var(--space-lg) 0 .3rem}
.lay-h code{font-size:var(--step--1);font-weight:var(--weight-body);vertical-align:.12em}
/* Faktenzeile — nutzt .tiles, kein eigenes Raster. Diese Sektion haelt sich an das,
was sie beschreibt; hier nur noch das Aussehen der einzelnen Kachel. */
/* Fakten-Kacheln: Begriff + kurze Erklaerung. Generisch, .lay-facts ist nur der
Altname aus der Raster-Sektion. */
.facts,.lay-facts{margin-bottom:var(--space-lg)}
.facts > div,.lay-facts > div{border:1px solid var(--border);border-radius:var(--radius-inset);
padding:.7rem .9rem;background:var(--surface-sunken)}
/* Nur die Kachel-Ueberschrift bricht um — ein im Fliesstext darunter bleibt inline. */
.facts > div > b,.lay-facts > div > b{display:block;font-family:var(--font-display);font-size:var(--step-0);
color:var(--text-strong);margin-bottom:.15rem}
.facts span,.lay-facts span{font-size:var(--step--1);color:var(--text-muted)}
.lay-demo{border:1px solid var(--border);border-radius:var(--radius-inset);
padding:var(--space-sm);margin-bottom:var(--space-md);background:var(--surface-sunken)}
.lay-cap{font-size:var(--step--1);color:var(--text-muted);margin-bottom:.55rem}
.lay-note{font-size:var(--step--1);color:var(--text-muted);margin-top:.6rem;max-width:var(--measure-body)}
.lay-box{display:grid;place-items:center;min-height:3.5rem;border-radius:var(--radius-field);
font-family:var(--mono);font-size:var(--step--1);color:var(--accent);
background:var(--surface);border:1px dashed var(--border-strong)}
.lay-tall{min-height:5.5rem}
.lay code{font-family:var(--mono);font-size:.86em;background:var(--surface-muted);white-space:nowrap;
border:1px solid var(--border);border-radius:var(--radius-field);padding:.05rem .35rem}
/* Typography */
.type-row{display:flex;align-items:baseline;gap:1rem;border-bottom:1px dashed var(--border);
padding:.5rem 0}
.type-row .stat__label{font-family:var(--mono);color:var(--text-muted);font-size:.75rem;width:5.5rem;flex:none}
.weights span{font-family:var(--font-display);font-size:var(--step-2);margin-right:1.1rem}
/* Logos */
.logo-grid{--tile-min:14.5rem}
/* Specimen: ein Exemplar auf einer Buehne, darunter Name + Einordnung. .logo-card
war der erste Anwendungsfall, der Baustein ist generisch. */
.spec,.logo-card{border:1px solid var(--border);border-radius:var(--radius-inset);overflow:hidden}
.spec .stage,.logo-card .stage{height:130px;display:grid;place-items:center;padding:1rem}
.spec img,.logo-card img{max-height:66px;max-width:82%}
/* Einfarbiges Logo, eingefaerbt vom Rollen-Token statt vom Dateiinhalt.
Maske statt , weil ein currentColor nicht sieht — dieselbe Technik
wie im Trusted-by-Band. Braucht http (Masken auf relative Dateien sind unter
file:// cross-origin-blockiert). */
.logo-mono{display:block;height:66px;aspect-ratio:198/158;background:var(--accent);
-webkit-mask:url(./assets/logo/logo-mono.svg) center/contain no-repeat;
mask:url(./assets/logo/logo-mono.svg) center/contain no-repeat}
.spec.compact .stage{height:auto;min-height:5.5rem}
/* Knopfpaare im Schaukasten: .stage ist ein Grid mit place-items:center — zwei Kinder
landen darin uebereinander. .pair legt sie nebeneinander und bricht erst, wenn die
Kachel zu schmal wird. */
.pair{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;align-items:center}
/* Kleinere Knopfgroesse im Paar-Schaukasten — sonst bricht das Paar untereinander und
zeigt genau nicht, was es zeigen soll: zwei Aufrufe NEBENeinander. */
.pair .btn{font-size:var(--step--1);padding:.5rem 1rem}
.spec .cap code{font-family:var(--mono);font-size:.88em;color:var(--accent)}
.spec .use{padding:0 .8rem .7rem;font-size:var(--step--1);color:var(--text-muted)}
.spec .cap,.logo-card .cap{padding:.6rem .8rem;font-size:var(--step--1);border-top:1px solid var(--border);
display:flex;justify-content:space-between;gap:.5rem;align-items:center}
.bad{color:var(--danger);font-weight:var(--weight-label)}
.ok{color:var(--success);font-weight:var(--weight-label)}
/* Patterns */
.pat-grid{--tile-min:9.5rem}
.pat{border:1px solid var(--border);border-radius:var(--radius-inset);overflow:hidden}
.pat .stage{height:150px;display:grid;place-items:center;background:var(--surface-sunken)}
.pat .stage img{height:112px}
.pat .cap{padding:.5rem .7rem;font-size:var(--step--1);border-top:1px solid var(--border)}
/* Demo-Kacheln für die .has-pattern-Utility (Sektion 06 — Patterns).
Scale so gewählt, dass das Motiv unten/seitlich über die Kante läuft, die Oberkante
aber frei bleibt — sonst widerspricht die Kachel der Regel, die sie zeigt
(«ein grosses Motiv, das nur einen TEIL der Fläche überlappt»). */
.pat-corner{height:170px;border-radius:var(--radius-inset);border:1px solid var(--border);
background:var(--surface-sunken);--pattern-scale:100%}
.pat-over{height:170px;border-radius:var(--radius-inset);background:var(--gradient-soft);
border:1px solid var(--border);--pattern-scale:170%}
/* Reusable pattern-overlay utility: motif via --pattern, corner via .pattern- */
/* MASKE STATT BILD (nachgezogen aus der App, src/styles/components/pattern.css):
das SVG liefert nur die FORM, die Farbe kommt aus dem Token. Vorher standen die
drei Signatur-Stopps als Hex im Asset — die zweite Fassung konnte sie nicht
erreichen, das Muster leuchtete dort weiter pink.
Die Flaeche ist so gross wie das MOTIV, nicht wie der Kasten: ein Verlauf hat kein
Eigenmass, ueber dem ganzen Kasten liefe seine Achse quer. Hoehe aus
--pattern-scale, Breite ueber aspect-ratio, Ecke ueber inset. */
.has-pattern{position:relative;overflow:hidden}
.has-pattern::after{content:"";position:absolute;pointer-events:none;
height:var(--pattern-scale);aspect-ratio:var(--pattern-ratio);
background:var(--pattern-fill,var(--pattern-motif-fill));
-webkit-mask:var(--pattern) center/100% 100% no-repeat;
mask:var(--pattern) center/100% 100% no-repeat;
opacity:var(--pattern-opacity)}
.pattern-tr::after{top: var(--pattern-bleed);right:var(--pattern-bleed)}
.pattern-tl::after{top: var(--pattern-bleed);left: var(--pattern-bleed)}
.pattern-br::after{bottom:var(--pattern-bleed);right:var(--pattern-bleed)}
.pattern-bl::after{bottom:var(--pattern-bleed);left: var(--pattern-bleed)}
/* Gespiegelt kippt die motivgrosse Box an Ort — die Verankerung wandert darum
ausdruecklich auf die Gegenkante, sonst bliebe das Motiv stehen. */
.pattern-flip.pattern-tl::after,
.pattern-flip.pattern-bl::after{left:auto;right:var(--pattern-bleed)}
.pattern-flip.pattern-tr::after,
.pattern-flip.pattern-br::after{right:auto;left:var(--pattern-bleed)}
/* Horizontal spiegeln. Achtung: gekippt wird die ganze ::after-Box, damit dreht sich auch
die Kante mit — die Ecken-Klasse benennt also die Lage VOR dem Spiegeln.
Ergebnis oben rechts => .pattern-tl.pattern-flip. */
.pattern-flip::after{transform:scaleX(-1)}
.place{position:relative;height:160px;border-radius:var(--radius-inset);border:1px solid var(--border);
background:var(--surface-sunken);overflow:hidden}
.place img{position:absolute;height:135%}
.place.top img{top:-1.5rem}
.place.bottom img{bottom:-1.5rem}
.place.left img{left:-1.4rem}
.place.right img{right:-1.4rem}
.place.mirror img{transform:scaleX(-1)}
.place .cap{position:absolute;left:.6rem;bottom:.5rem;font-family:var(--mono);font-size:.72rem;
background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-control);padding:.1rem .6rem}
.place.grad{background:var(--gradient-soft)}
/* Components */
.btn{font-family:var(--font-display);font-weight:var(--weight-ui);font-size:var(--step-0);
border-radius:var(--radius-control);padding:.7rem 1.4rem;border:2px solid transparent;
cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;
transition:box-shadow .2s ease, background .2s ease, transform .2s ease}
.btn--primary{background:var(--accent);color:var(--accent-contrast)}
/* Schriftfarbe im Hover AUSDRÜCKLICH mitführen. Jede interaktive Komponente
bringt ihre Zustände vollständig selbst mit — sonst greift die generische
Link-Regel durch und färbt die Beschriftung in die Flächenfarbe (hell wie
dunkel: --accent-contrast ist weiss bzw. Ink, --accent-hover ist beides mal
die Flächenfarbe). Der Knopf wird dann unlesbar. */
.btn--primary:hover{background:var(--accent-hover);color:var(--accent-contrast);
box-shadow:var(--shadow-glow);transform:translateY(-1px)}
.btn--secondary{background:transparent;color:var(--accent-2);border-color:var(--accent-2)}
.btn--secondary:hover{background:var(--surface-sunken);color:var(--accent-2);border-color:var(--accent-2)}
.on-brand .btn--secondary,
.on-brand .btn--secondary:hover{color:var(--text-on-brand);border-color:var(--text-on-brand)}
.btn--ghost{background:transparent;color:var(--accent);border-color:var(--border-control)}
.btn--ghost:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.badge{font-family:var(--font-display);font-weight:var(--weight-label);font-size:var(--step--1);
background:var(--highlight);color:var(--highlight-contrast);border-radius:var(--radius-control);
padding:.2rem .7rem;text-transform:uppercase;letter-spacing:.04em}
/* Flex-Spalte, damit der Aufruf am Fuss haengt: bei ungleich langen Texten stehen die
Buttons sonst auf verschiedenen Hoehen und die Kartenreihe wirkt schief. */
.card{position:relative;
border:1px solid var(--border);border-radius:var(--radius-panel);padding:var(--space-md);
background:var(--surface-raised);box-shadow:var(--shadow-md);max-width:22rem;
display:flex;flex-direction:column;
top:0;transition:top .18s ease-out}
/* Verlaufs-Schlagschatten fuer klickbare Karten (cardFeed E18): der volle Signatur-
Verlauf (Lila -> Pink -> Tuerkis, --gradient) als geblurrte Ebene HINTER der Karte.
box-shadow kann keinen Verlauf, daher ein ::after. .card bleibt bewusst OHNE
z-index/isolation, damit das ::after (z-index:-1) hinter die ganze Karte faellt
statt die Flaeche einzufaerben; die deckende Kartenflaeche verdeckt die Mitte, nur
der geblurrte Rand bleibt als farbiger Schatten sichtbar. Nur im Hover.
⚠ Das Anheben laeuft ueber `top`, NICHT ueber `transform`: ein transform erzeugt einen
Stacking-Context: das ::after kann dann nicht mehr hinter die eigene Kartenflaeche
fallen und faerbt sie im Hover komplett ein (Kundenfeedback B19, 26.07.). `top` an
einem position:relative-Element verschiebt ohne Stacking-Context. */
.card::after{content:"";position:absolute;inset:8px 4px -10px;z-index:-1;
border-radius:inherit;background:var(--gradient);filter:blur(22px);
opacity:0;transition:opacity .2s ease-out;pointer-events:none}
.card:hover{top:-2px}
.card:hover::after{opacity:.6}
.card > .btn{margin-top:auto;align-self:flex-start}
.card .k{font-family:var(--font-display);font-size:var(--step-2);color:var(--accent)}
/* Gradient glow for featured / highlighted boxes; gradient text for accents */
.card.card--featured{box-shadow:var(--shadow-glow);border-color:transparent}
/* Frueher stand hier ein `.glow{box-shadow:var(--shadow-glow)}` als Utility fuer
hervorgehobene Kaesten. Derselbe Klassenname traegt aber schon die Parallax-Glow-
Ebene weiter oben (position:absolute, blur 72px) — die drei Hero-Glows bekamen also
zusaetzlich einen Schatten, den niemand sehen kann, und jeder Kasten, der die Utility
benutzt haette, waere absolut positioniert und weggeblurrt worden. Ein Name, zwei
Bedeutungen: geloescht. Hervorhebung laeuft ueber .card.card--featured. */
/* Schrift-Verlauf: --gradient-text, nicht --gradient. Der Signatur-Verlauf endet in
Tuerkis und ist als Schrift auf Weiss nicht lesbar (2.4:1). Details in tokens.css. */
.text-gradient,
section > .wrap > .eyebrow{background:var(--gradient-text);-webkit-background-clip:text;background-clip:text;color:transparent}
/* Vertical rhythm — line-height + spacing are multiples of --rhythm; text lands on the grid */
.rhythm-demo{gap:var(--space-lg);
border:1px solid var(--border);border-radius:var(--radius-inset);padding:var(--lead) var(--space-md);
background-image:repeating-linear-gradient(to bottom,
color-mix(in srgb,var(--accent) 16%,transparent) 0 1px,transparent 1px var(--lead));
background-position:0 var(--lead)}
.rhythm-demo .rt{margin:0;font-family:var(--font-display);color:var(--text-strong);
font-size:var(--step-2);line-height:calc(var(--lead)*2)}
.rhythm-demo p{margin:0 0 var(--lead);font-size:var(--step-0);line-height:var(--lead)}
.rhythm-demo p:last-child{margin-bottom:0}
.comp-row{display:flex;gap:var(--space-sm);align-items:center;flex-wrap:wrap;margin-bottom:var(--space-md)}
/* Karten gehören in ein Raster, nicht in eine umbrechende Flex-Reihe: dort behält die
umgebrochene Karte ihre max-width und hängt schmal am linken Rand. auto-fit + minmax
zählt die Spalten selbst herunter (3 → 2 → 1), ohne einen einzigen Breakpoint. */
.card-row{--tile-min:17rem;--tile-flow:auto-fit;align-items:stretch;margin-bottom:var(--space-md)}
.card-row .card{max-width:none}
/* ===== Links (Sektion 08 — Navigation) =================================================
Fliesstext-Links tragen im Ruhezustand KEINE sichtbare Linie. Beim Hover
wischt sie von links nach rechts ein; beim Verlassen wandert sie in
derselben Richtung weiter hinaus (die linke Kante zieht nach rechts ab).
Umgesetzt als background-image, nicht als ::after — ein Pseudo-Element
bräuchte absolute Positionierung und bräche über Zeilenumbrüche, ausserdem
ist ::after schon für die Extern-Markierung vergeben.
Der Kniff: animiert wird ausschliesslich background-SIZE, die POSITION
springt hart um. Ruhezustand rechts verankert, Hover links — daraus ergibt
sich «hinein von links, hinaus nach rechts» aus einer einzigen Transition.
Gilt für klassenlose plus .link / .link-muted. Ein MIT Klasse ist
eine Komponente und bringt seine Zustände selbst mit. Diese Trennung ist
nicht kosmetisch: a:hover (0-1-1) schlägt .btn--primary (0-1-0) und färbte
sonst die Beschriftung in die Flächenfarbe — der Knopf wird unlesbar. */
a:not([class]),.link,.link-muted{
color:var(--accent);text-decoration:none;
background-image:linear-gradient(currentColor,currentColor);
background-repeat:no-repeat;
background-position:right bottom .06em;
background-size:0% 1px;
transition:background-size .3s cubic-bezier(.4,0,.2,1), color .15s ease}
a:not([class]):hover,.link:hover,.link-muted:hover{
background-position:left bottom .06em;background-size:100% 1px}
a:not([class]):hover,.link:hover{color:var(--accent-hover)}
.link-muted{color:var(--text-muted)}
.link-muted:hover{color:var(--text-strong)}
@media(prefers-reduced-motion:reduce){
a:not([class]),.link,.link-muted{transition:none}}
/* :focus-visible statt :focus — der Ring erscheint bei Tastatur-Navigation,
nicht bei jedem Mausklick. --focus-ring lag bisher ungenutzt in tokens.css. */
a:focus-visible,.btn:focus-visible,.nav__link:focus-visible,.mega-item:focus-visible{
outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:3px}
/* Externe Ziele kennzeichnen sich selbst — kein manuelles Icon nötig. */
a[target="_blank"]::after{content:"↗";display:inline-block;margin-left:.12em;
font-size:.82em;text-decoration:none;vertical-align:.08em}
/* ===== Navigation (Sektion 08) ============================================
Die Nav ist ein Glas-Element — und Glas gilt im System nur über etwas (Sektion 10 — Frosted Glass).
Über dem Hero liegt sie darum TRANSPARENT auf Pattern und Glows; erst wenn
in den flachen Textbereich gescrollt wird, schaltet .is-stuck das Glas ein.
Eine dauerhaft gläserne Leiste über weissem Fliesstext wäre Glas über nichts.
.nav-stage ist nur die Demo-Bühne (Positionskontext fürs Mega-Menü), damit
die Leiste den Styleguide nicht überlagert — produktiv wird sie sticky. */
.nav-stage{position:relative;border-radius:var(--radius-panel);overflow:hidden;
border:1px solid var(--border);background:var(--surface)}
/* Die Bühne muss hoch genug sein, dass das Mega-Panel hineinpasst — overflow:hidden
hält die runden Ecken, beschneidet aber alles, was darunter hinausragt.
.on-hero gibt ihr ausserdem den Hero-Grund: zwei 50er-Glows, damit die
transparente Leiste tatsächlich über etwas liegt und nicht über Weiss. */
.nav-stage.on-hero{min-height:30rem;
background:
radial-gradient(42% 46% at 22% 26%, var(--surface-teal) 0%, transparent 68%),
radial-gradient(38% 42% at 78% 62%, var(--surface-magenta) 0%, transparent 66%),
var(--surface)}
/* Drei-Spalten-Raster: die Menü-Mittelspalte sitzt ECHT in der Leistenmitte,
unabhängig davon, dass Logo links und CTAs rechts verschieden breit sind. Beide
1fr-Aussenspalten heben sich gegenseitig auf — ein flex-margin-left:auto leistet
diese Kompensation NICHT, es schiebt das Menü nur an die CTAs. */
.nav{position:relative;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;
align-items:center;gap:var(--space-sm);
padding:.85rem clamp(1rem,3vw,1.5rem);
transition:background .25s ease, box-shadow .25s ease, border-color .25s ease}
.nav .brand{display:flex;align-items:center;text-decoration:none;flex:none;justify-self:start}
.nav .brand img{height:44px;display:block}
.nav .menu{display:flex;align-items:center;gap:.15rem;justify-self:center}
.nav .actions{display:flex;align-items:center;gap:.5rem;justify-self:end}
/* Kein border-bottom: Unschärfe und Schatten trennen die Leiste bereits.
Eine zusätzliche 1px-Kante schneidet das Pattern hart ab und widerspricht
der weichen Glas-Sprache. */
.nav.is-stuck{background:var(--glass-surface);
-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
box-shadow:var(--glass-shadow)}
/* Trigger: