/* ═══════════════════════════════════════════════════════════════════
   HIG-Gruppe — COMPONENTS
   Das gemeinsame Komponentenvokabular (DESIGN §9), portiert aus
   exploration-v2 / hig-draft-1. Wiederverwenden, nicht neu erfinden.

     buttons · icon button · cards · nav · mobile menu · hero ·
     stat cards · section heads · spine stage cards · project card ·
     lph-bar · footer · demo badge · motion · responsive
   ═══════════════════════════════════════════════════════════════════ */

/* ── Eyebrow — reine Versal-Zeile in Signal. Die Blush-Pille wurde am
      2026-08-14 auf Simons Wunsch entfernt: keine weichen Farbflaechen
      als Beschriftungshintergrund. ── */
.pill{display:inline-block;color:var(--c-signal);font-size:var(--t-xs);font-weight:var(--fw-strong);
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:var(--s-5)}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:var(--s-3);border-radius:var(--r-pill);
  padding:.95rem 1.6rem;font-size:var(--t-sm);font-weight:var(--fw-strong);line-height:1;
  border:1px solid transparent;transition:background var(--dur-ui),color var(--dur-ui),
  border-color var(--dur-ui),transform var(--dur-ui)}
.btn--lg{padding:1.15rem 2rem;font-size:var(--t-base)}
/* Eine GROESSE, keine dritte Doktrin-Variante: fuer Knoepfe, die in eine
   Karte oder Zeile muessen. .85rem nicht kleiner — darunter faellt der
   Knopf unter 40px Trefferflaeche (DESIGN §12), gerechnet .85*2*16 + 13. */
.btn--sm{padding:.85rem 1.2rem;font-size:var(--t-xs);gap:var(--s-2)}
.btn--block{display:flex;justify-content:center;width:100%}
/* Button-Doktrin (2026-08-14, Simon): genau zwei Buttons auf hellen
   Flaechen — Primaer .btn--signal (rot) und Sekundaer .btn--outline
   (rot umrandet). .btn--onred bleibt die Variante AUF roten Flaechen.
   .btn--dark, .btn--mint und .btn--ghost sind ersetzt. */
.btn--signal{background:var(--c-signal);color:#fff}
.btn--signal:hover{background:var(--c-signal-d)}
/* Gesperrt heisst sichtbar gesperrt — ein Knopf, der nichts bewirkt und
   trotzdem einladend aussieht, ist die schlechtere Variante. Farbe
   allein traegt die Aussage nicht: `disabled` steht auch im Baum. */
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn:disabled:hover{background:none;color:var(--c-signal)}
.btn--signal:disabled:hover{background:var(--c-signal);color:#fff}
.btn--outline{background:none;border-color:var(--c-signal);color:var(--c-signal)}
.btn--outline:hover{background:var(--c-signal);color:#fff}
.btn__arrow{flex:none;width:1.75rem;height:1.75rem;border-radius:var(--r-pill);
  background:rgba(255,255,255,.16);display:grid;place-items:center;padding:.4rem;
  transition:transform var(--dur-ui) var(--ease)}
.btn--outline .btn__arrow{background:var(--c-signal);color:#fff}
.btn--outline:hover .btn__arrow{background:rgba(255,255,255,.16)}
.btn:hover .btn__arrow{transform:translateX(3px)}
.iconbtn{flex:none;width:2.9rem;height:2.9rem;border-radius:var(--r-pill);display:grid;
  place-items:center;padding:.85rem;background:var(--c-white);color:var(--c-deep);
  border:1px solid var(--c-line);transition:background var(--dur-ui),color var(--dur-ui)}
.iconbtn svg{stroke-width:1.6}
.iconbtn:hover{background:var(--c-signal);color:#fff;border-color:var(--c-signal)}

/* ── Cards ── */
.card{background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r-card);
  padding:var(--s-8)}
.card--mint{background:var(--c-stone);border-color:transparent}
/* 2026-08-16: war --c-deep. Wie .abo__stat trägt die dunkle Karte jetzt
   den tiefsten Wert der Rot-Leiter statt eines Braun-Schwarz — die
   Zahlen-Trias liest sich als weiss / stone / Marke (DESIGN §13). */
.card--dark{background:var(--red-900);border-color:transparent;color:#fff}
.card--signal{color:#fff}

/* ── Rote Glasflächen ──
   The large red panels — the footer CTA band, „Unser Anspruch" in the
   Über-die-Gruppe collage, the Initiativbewerbung card in Karriere, and
   the Anspruch switcher — read as tinted glass, not flat fill
   (2026-08-06).
   Small red things (pills, chips, buttons, icon circles) stay solid:
   glass on a 2rem control is noise, not depth.

   Grouped here even though .abo__mission and .kar__cta belong to page
   sections, because one recipe with three call sites drifts. pages.css
   loads AFTER this file, so those two rules must not set `background`
   themselves — they carry geometry only, and point back here.

   The flat fill is the fallback, declared first: without backdrop-filter
   a translucent wash over a bright photograph drops the white text under
   AA, so those browsers get exactly today's opaque red instead. */
.card--signal,
.abo__mission,
.kar__cta,
.claim__mission{background:var(--c-signal);border:1px solid transparent}

@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card--signal,
  .abo__mission,
  .kar__cta,
  .claim__mission{
    background:var(--glass-signal);
    -webkit-backdrop-filter:var(--glass-backdrop);
    backdrop-filter:var(--glass-backdrop);
    border-color:var(--glass-edge);
    box-shadow:var(--sh-glass)}
}

/* ═══ NAV — wide bar, Atlas anatomy ═════════════════════════════
   Revised 2026-08-04 from a render of atlasgroup.casethemes.net:
   near-full-bleed with a small radius (NOT a pill), logo + tagline,
   a divider, links left-grouped against it, and a right cluster of
   phone block · CTA · menu. Colours stay HIG's own.
   ═════════════════════════════════════════════════════════════ */
.nav{position:fixed;inset:var(--s-5) 0 auto;z-index:60;padding-inline:var(--gutter);
  transition:inset var(--dur-ui) var(--ease),padding var(--dur-ui) var(--ease),
             background var(--dur-ui),border-color var(--dur-ui)}
/* 2026-08-17 (Simon): die Leiste hatte KEINE Maximalbreite und lief
   deshalb ueber die volle Viewport-Breite minus Gutter — auf 1920 waren
   das 1840px gegen 1432px Inhalt darunter. Das Logo stand 40px vom
   Bildschirmrand, die H1 darunter 244px: sichtbar nicht auf einer Linie.
   Jetzt teilen sich beide Zustaende dieselbe Kappe wie .shell, damit beim
   Umschalten nichts waagrecht springt. */
.nav__shell{max-width:var(--shell);margin-inline:auto;display:flex;align-items:center;
  gap:var(--s-6);padding:.8rem .8rem .8rem 1.5rem;border-radius:var(--r-sm);
  background:rgba(255,255,255,.82);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.6);
  box-shadow:var(--sh-card);
  transition:background var(--dur-ui),border-radius var(--dur-ui) var(--ease),
             padding var(--dur-ui) var(--ease)}

/* Gescrollt: die Leiste verlaesst ihren Schwebezustand und wird zur
   Kopfzeile — buendig an der Oberkante, eckig, ohne Schatten.

   2026-08-17 (Simon: „nicht mehr full width header im solid"): die FLAECHE
   bleibt randlos, der INHALT nicht. Eine Kopfzeile, deren weisses Feld an
   der Oberkante aufhoert und links und rechts die Seite durchscheinen
   laesst, sieht abgeschnitten aus; falsch war nie das Feld, sondern dass
   Logo und Menue darin bis an den Bildschirmrand liefen. Deshalb wandern
   Flaeche und Haarlinie auf .nav (randlos), und .nav__shell traegt jetzt
   dieselbe Kappe und denselben Gutter wie .shell — das Logo steht damit
   exakt ueber der H1 der Seite.
   (Soll es doch das schmale Feld sein: Hintergrund und Rand von .nav
   zurueck auf .nav.is-solid .nav__shell, eine Regel.) */
.nav.is-solid{inset:0 0 auto;padding-inline:0;
  background:rgba(255,255,255,.96);border-bottom:1px solid var(--c-line)}
.nav.is-solid .nav__shell{background:none;border:0;border-radius:0;
  padding-inline:var(--gutter);
  /* Kein Schatten im soliden Zustand: die weiche Wolke faerbte den
     Seitenanfang grau und liess Weiss neben Weiss ungleich wirken
     (2026-08-14, Simon). Die Haarlinie trennt allein. */
  box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}

.nav__brand{display:grid;gap:.15rem;justify-items:start}
.nav__brand img{width:auto;height:1.9rem}
/* HIG's own claim, verbatim — the tagline slot Atlas gives its logo. */
.nav__brand-tag{font-size:var(--t-xs);font-weight:var(--fw-strong);color:var(--c-muted);
  letter-spacing:-.01em;white-space:nowrap}

/* The divider is the left edge of the link group, not a separate node. */
.nav__links{display:flex;gap:var(--s-6);margin-inline:0;padding-left:var(--s-6);
  border-left:1px solid var(--c-line);align-self:stretch;align-items:center}
.nav__links a{font-size:var(--t-sm);font-weight:var(--fw-strong);padding:.5rem 0;position:relative}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:.15rem;height:2px;
  border-radius:2px;background:var(--c-signal);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-ui) var(--ease)}
.nav__links a:hover::after{transform:scaleX(1)}
/* Aktuelle Seite — die Unterstreichung ist gezeichnet, nicht eingeblendet.
   2026-08-17: der frueher zusaetzliche Gewichtssprung (500 → 700) ist
   entfallen. Seit 500 das Maximum ist, waere er eine Nulldeklaration —
   den Zustand tragen jetzt allein die rote Linie und aria-current. */
.nav__links a[aria-current="page"]::after{transform:scaleX(1)}
.nav__end{display:flex;align-items:center;gap:var(--s-3);margin-left:auto}

/* Phone block — Atlas shows the number, not just an icon. On a page
   whose whole job is "reach us in one click", that is the right call. */
.nav__tel{display:flex;align-items:center;gap:var(--s-3);
  padding:.3rem 1.1rem .3rem .3rem;border:1px solid var(--c-line);
  border-radius:var(--r-sm);transition:border-color var(--dur-ui)}
.nav__tel:hover{border-color:var(--c-signal)}
.nav__tel-ic{flex:none;width:2.6rem;height:2.6rem;border-radius:var(--r-sm);
  background:none;color:var(--c-signal);display:grid;place-items:center;
  padding:.7rem;transition:background var(--dur-ui),color var(--dur-ui)}
.nav__tel:hover .nav__tel-ic{background:var(--c-signal);color:#fff}
.nav__tel-txt{display:flex;align-items:baseline;gap:var(--s-2);font-size:var(--t-sm);
  white-space:nowrap;line-height:1.2}
.nav__tel-txt strong{font-weight:var(--fw-strong)}
.nav__tel-num{color:var(--c-muted);font-weight:var(--fw-strong)}

/* In the bar, buttons take the bar's radius — Atlas keeps its pills for
   content and squares off the header CTA. */
.nav__end .btn{border-radius:var(--r-sm);padding:1.05rem 1.6rem}

/* Pages without a full-bleed hero start under the fixed nav, so they
   need the nav's height back as padding. */
.nav-offset{padding-top:7rem}

.burger{display:none;width:3.2rem;height:3.2rem;border-radius:var(--r-sm);
  background:var(--c-signal);flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{display:block;width:18px;height:2px;border-radius:2px;background:#fff;
  transition:transform var(--dur-ui)}
.nav.is-open .burger span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav.is-open .burger span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* Kappe wie .nav__shell (17.08.), sonst haengt das aufgeklappte Menue
   breiter da als die Leiste, aus der es kommt. */
.menu{position:fixed;inset:5.5rem var(--gutter) auto;max-width:var(--shell);
  margin-inline:auto;z-index:55;background:var(--c-white);
  border:1px solid var(--c-line);border-radius:var(--r-card);box-shadow:var(--sh-float);
  padding:var(--s-6);display:grid;gap:var(--s-6);max-height:calc(100svh - 7rem);overflow-y:auto}
.menu[hidden]{display:none}
.menu__links{display:grid}
.menu__links a{padding:var(--s-4) 0;border-bottom:1px solid var(--c-line);
  font-size:var(--t-lg);font-weight:var(--fw-strong);letter-spacing:-.02em}
.menu__meta{display:grid;gap:var(--s-1);color:var(--c-muted);font-size:var(--t-sm)}

/* ═══ HERO ═════════════════════════════════════════════════════ */
.hero{position:relative;min-height:min(94svh,58rem);display:flex;align-items:flex-end;
  padding:9rem 0 calc(var(--overlap) + var(--s-12));overflow:hidden;background:var(--c-deep)}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center}
/* warm-tinted and lighter than v2.0 — the photo's own colour has to survive */
.hero__scrim{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(26,16,14,.60)0%,rgba(26,16,14,.26)46%,rgba(26,16,14,0)76%),
  linear-gradient(180deg,rgba(26,16,14,.40)0%,rgba(26,16,14,.02)26%,rgba(26,16,14,.30)100%)}
/* Proportional, not a fixed max: the reference's floating card is ~35% of
   the content width at every size, which a `26rem` cap could not follow. */
.hero__grid{position:relative;width:100%;display:grid;
  grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);gap:var(--s-12);align-items:end}
/* Eigenes Token statt --t-3xl seit 2026-08-17: der Hero behält die alte
   Größe (84px), .h1 auf Unterseiten wird kleiner. Begründung in tokens.css
   bei --t-hero, Protokoll in DESIGN §13. */
.hero__h1{font-size:var(--t-hero);line-height:1.03;letter-spacing:-.035em;font-weight:var(--fw-display);color:#fff}
.hero__sub{margin-top:var(--s-5);max-width:38ch;font-size:var(--t-md);color:rgba(255,255,255,.88)}

.hero__card{background:var(--c-white);border-radius:var(--r-card);padding:var(--s-8);
  box-shadow:var(--sh-float);display:grid;gap:var(--s-6);justify-items:start}
.hero__card-text{font-size:var(--t-md);color:var(--c-muted)}
.hero__card-text strong{color:var(--c-ink)}

/* ── Hero slider (2026-08-05) ──
   Slide 1 is `is-active` server-side, so with JS off the hero is simply a
   still photograph — this is a resting state, not a motion from-state,
   which is why it is not scoped to .js (DESIGN.md §8). */
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease)}
.hero__slide.is-active{opacity:1}

.hero__foot{position:absolute;left:var(--gutter);right:var(--gutter);
  bottom:calc(var(--overlap) + var(--s-4));display:flex;align-items:center;
  justify-content:space-between;gap:var(--s-5)}
/* The slide indicator was removed on 2026-08-06 at the client's request —
   the hero now cross-fades without any visible position marker. */
.hero__credit{margin-left:auto;font-size:var(--t-xs);
  color:rgba(255,255,255,.72);text-align:right}
/* every slide has its own credit; only the shown photograph's is shown */
.hero__credit-item{display:none}
.hero__credit-item.is-active{display:block}

/* ═══ STAT CARDS — straddling the hero edge ════════════════════ */
.stats{position:relative;z-index:5;margin-top:calc(var(--overlap) * -1)}
.stats__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s-5);align-items:stretch}
/* Revised 2026-08-05 to the reference's anatomy: one wide white card
   carrying the link list AND the seals, then two stat cards whose label
   sits in a filled chip with an icon, number bottom-right. */
.card--list{grid-column:span 6;box-shadow:var(--sh-card);display:grid;
  grid-template-columns:1fr auto;gap:var(--s-8);align-items:center}
/* kept for later use — the ÖBFV claim now lives in the Seminare section */
.card--seal{grid-column:span 2;background:var(--c-signal);border-color:transparent;color:#fff;
  display:grid;gap:var(--s-5);align-content:center;justify-items:center;text-align:center}
.card--stat{grid-column:span 3;display:flex;flex-direction:column;justify-content:space-between;
  gap:var(--s-8);padding:var(--s-5);box-shadow:var(--sh-card)}

/* ── Gütesiegel — HIG's own, both red line art on white ──
   `multiply` sinks each seal's baked white background into the tile, so
   a JPEG with no alpha still sits on the warm surface cleanly. */
.seals{display:grid;grid-auto-flow:column;gap:var(--s-4)}
.seal-tile{background:var(--c-white);border:1px solid var(--c-line);
  border-radius:var(--r-sm);padding:var(--s-5) var(--s-4);
  display:grid;gap:var(--s-4);align-content:center;justify-items:center;text-align:center;width:9.25rem}
.seal-tile img{width:4.5rem;height:auto;mix-blend-mode:multiply}
.seal-tile figcaption{font-size:var(--t-xs);font-weight:var(--fw-strong);line-height:1.3}

.stat__chip{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  background:var(--c-signal);color:#fff;border-radius:var(--r-sm);
  padding:var(--s-4) var(--s-4) var(--s-4) var(--s-5);
  font-size:var(--t-sm);font-weight:var(--fw-strong);line-height:1.25}
.card--dark .stat__chip{background:rgba(255,255,255,.09)}
.stat__ic{flex:none;width:2.2rem;height:2.2rem;border-radius:var(--r-sm);
  background:rgba(255,255,255,.18);display:grid;place-items:center;padding:.5rem}

.card__title{font-size:var(--t-lg);font-weight:var(--fw-title);letter-spacing:-.02em;margin-bottom:var(--s-5)}
.minilist{display:grid}
.minilist a{position:relative;display:flex;justify-content:space-between;align-items:center;
  gap:var(--s-4);padding:var(--s-4) 0 var(--s-4) 1rem;border-top:1px solid var(--c-line);
  font-size:var(--t-sm);font-weight:var(--fw-strong);transition:color var(--dur-ui)}
/* the reference's bullet — muted, so the red chip stays the loud thing */
.minilist a::before{content:"";position:absolute;left:0;top:50%;width:.35rem;height:.35rem;
  margin-top:-.175rem;border-radius:var(--r-pill);background:var(--c-muted-d)}
.minilist li:last-child a{border-bottom:1px solid var(--c-line)}
.minilist a:hover::before{background:var(--c-signal)}
.minilist a span{color:var(--c-signal);transition:transform var(--dur-ui) var(--ease)}
.minilist a:hover{color:var(--c-signal)}
.minilist a:hover span{transform:translateX(4px)}

.seal{width:3.5rem;height:3.5rem;border-radius:var(--r-pill);background:rgba(255,255,255,.22);
  display:grid;place-items:center;padding:.9rem;color:#fff}
.seal__label{font-size:var(--t-sm);font-weight:var(--fw-strong);line-height:1.3}

.card__kicker{font-size:var(--t-sm);font-weight:var(--fw-strong);max-width:16ch}
.card--mint .card__kicker{color:var(--c-deep)}
.card--dark .card__kicker{color:rgba(255,255,255,.72)}
.bignum{font-size:var(--t-num);line-height:.9;letter-spacing:-.045em;font-weight:var(--fw-strong);
  font-variant-numeric:tabular-nums;align-self:flex-end}
.bignum span{color:var(--c-signal)}
/* Auf der roten Karte wäre ein rotes „+" matschig — Weiss, gedimmt. */
.card--dark .bignum span{color:rgba(255,255,255,.58)}

/* ═══ SECTION HEADS ════════════════════════════════════════════ */
.sec-head{margin-bottom:var(--s-12);max-width:60rem}
.sec-head__lead{margin-top:var(--s-5);color:var(--c-muted);font-size:var(--t-md);max-width:52ch}
/* 2026-08-16 (Simon): war ein zweispaltiger Kopf, der die Zeile
   horizontal auseinanderzog — Titel links, Beitext und CTA rechts.
   Auf 1700px Shell standen die beiden Hälften so weit auseinander,
   dass sie nicht mehr als ein Kopf gelesen wurden. Jetzt gestapelt und
   links bündig: Eyebrow → Titel → Beitext → Button, eine Leserichtung.
   Die Breite bleibt begrenzt, damit der Beitext nicht über die volle
   Shell läuft. */
.sec-head--row{max-width:62rem;display:grid;grid-template-columns:1fr;gap:var(--s-6);
  align-items:start;justify-items:start}
.sec-head__side{display:grid;gap:var(--s-6);justify-items:start;color:var(--c-muted);
  font-size:var(--t-md);max-width:56ch}

/* ═══ SPINE ════════════════════════════════════════════════════ */
/* a warm cream field, so the white cards sit on colour rather than on white */
.spine{padding-block:var(--section-y);background:var(--c-cream)}
.stages{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
.card--stage{position:relative;display:grid;align-content:start;transition:border-color var(--dur-ui),
  box-shadow var(--dur-ui),transform var(--dur-ui) var(--ease)}
.card--stage:hover{border-color:transparent;box-shadow:var(--sh-card);transform:translateY(-4px)}
.stage__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s-6)}
.stage__no{font-size:var(--t-sm);font-weight:var(--fw-strong);color:var(--c-muted);letter-spacing:.06em}
.ic{width:3.25rem;height:3.25rem;border-radius:var(--r-pill);background:var(--c-signal);color:#fff;
  display:grid;place-items:center;padding:.85rem;transition:background var(--dur-ui)}
.card--stage:hover .ic{background:var(--c-ink)}
.stage__title{font-size:var(--t-xl);line-height:1.1;letter-spacing:-.03em;font-weight:var(--fw-title)}
/* The whole card is the link target, via one stretched <a> — so the card
   stays a single tab stop and the focus ring still sits on the title. */
.stage__link{transition:color var(--dur-ui)}
.stage__link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.card--stage:hover .stage__link{color:var(--c-signal)}
.stage__when{margin-top:var(--s-2);color:var(--c-signal);font-size:var(--t-sm);font-weight:var(--fw-strong)}
.stage__box{margin-top:var(--s-5);background:var(--c-white);
  border:1px solid var(--c-line);border-radius:var(--r-sm);
  padding:var(--s-5);color:var(--c-muted);font-size:var(--t-sm)}
.ticks{margin-top:var(--s-6);display:grid;gap:var(--s-3)}
.ticks li{position:relative;padding-left:1.6rem;font-size:var(--t-sm);font-weight:var(--fw-strong)}
.ticks li::before{content:"";position:absolute;left:0;top:.42em;width:.85rem;height:.85rem;
  border-radius:var(--r-pill);background:var(--c-white);
  box-shadow:inset 0 0 0 2px var(--c-signal)}
/* z-index, because the stage card's stretched link covers the whole card —
   without it these would not be clickable. */
.ticks__link{position:relative;z-index:1;transition:color var(--dur-ui)}
.ticks__link:hover{color:var(--c-signal)}
/* One Leistung with published sub-types (Wasserlöschanlagen) lists them
   under its own tick, quieter than the Leistung itself. */
.ticks__sub{display:block;margin-top:var(--s-1);font-size:var(--t-xs);font-weight:var(--fw-strong);
  color:var(--c-muted);line-height:1.45}
/* Stands in for the tick list where the page names the Leistungen
   elsewhere — the card still says how many, it just doesn't list them. */
.stage__count{margin-top:var(--s-6);font-size:var(--t-sm);font-weight:var(--fw-strong);color:var(--c-signal)}
.stage__by{margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--c-line);
  font-size:var(--t-xs);font-weight:var(--fw-strong);color:var(--c-muted);letter-spacing:.02em}

/* ═══ REFERENZEN / PROJECT CARD ════════════════════════════════ */
.refs{padding-block:0 var(--section-y)}
.refs__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
.pcard__media{position:relative;border-radius:var(--r-img);overflow:hidden;aspect-ratio:4/3;
  background:var(--c-stone)}
.pcard__media img{width:100%;height:100%;object-fit:cover;
  transition:transform .9s var(--ease)}
.pcard__link:hover .pcard__media img{transform:scale(1.045)}
.tag{position:absolute;left:var(--s-4);top:var(--s-4);background:rgba(255,255,255,.94);
  backdrop-filter:blur(6px);border-radius:var(--r-pill);padding:.45em 1em;
  font-size:var(--t-xs);font-weight:var(--fw-strong)}

/* ── Demo-Text badge ──
   Marks a paragraph as OUR words, not HIG's (.loop/PRINCIPLES.md §1).
   Quiet on purpose — it has to be legible and unmissable on a second
   look, without shouting over the copy it is labelling. */
.tag--demo{position:static;inset:auto;display:inline-block;background:none;
  backdrop-filter:none;border:1px solid var(--c-line);color:var(--c-muted);
  letter-spacing:.02em;font-size:var(--t-xs);text-transform:none;white-space:nowrap}

/* ── Chip — a standard, a certification, a short factual label ── */
.chip{display:inline-block;background:var(--c-white);border:1px solid var(--c-line);
  border-radius:var(--r-pill);padding:.35em .9em;font-size:var(--t-xs);font-weight:var(--fw-strong);
  color:var(--c-ink)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.card--mint .chip{background:var(--c-white);border-color:transparent}
.pcard__body{padding:var(--s-6) var(--s-2) 0}
.pcard__title{font-size:var(--t-lg);line-height:1.15;letter-spacing:-.025em;
  font-weight:var(--fw-title);transition:color var(--dur-ui)}
.pcard__link:hover .pcard__title{color:var(--c-signal)}
.pcard__meta{margin-top:var(--s-2);color:var(--c-muted);font-size:var(--t-sm)}
.pcard__credit{margin-top:var(--s-4);font-size:var(--t-xs);color:var(--c-muted)}

/* ── lph-bar ★ — rounded segments to match the shape language.
      Full coverage flips the whole bar and its caption to red so
      "alle Leistungsphasen" reads at a glance across a grid. ── */
.lph{margin-top:var(--s-5)}
.lph__row{display:grid;grid-template-columns:repeat(9,1fr);gap:4px}
.lph__row span{height:8px;border-radius:var(--r-pill);background:var(--c-stone-2);
  transform-origin:left;transition:background .45s var(--ease),transform .45s var(--ease)}
.lph__row span.on{background:var(--c-deep)}
.lph--full .lph__row span.on{background:var(--c-signal)}
.lph__cap{margin-top:var(--s-3);font-size:var(--t-xs);font-weight:var(--fw-strong);color:var(--c-muted)}
.lph--full .lph__cap{color:var(--c-signal)}
/* PROVISIONAL — Phase 5 designs this state properly. Four of the 19
   projects name no Leistungsphasen; drawing an empty bar would claim
   zero coverage, which is false, so the caption stands alone. */
.lph--none{font-size:var(--t-xs);font-weight:var(--fw-strong);color:var(--c-muted)}

/* ═══ CTA BAND ═════════════════════════════════════════════════ */
.cta-band{display:grid;grid-template-columns:1fr auto;gap:var(--s-8);align-items:center;
  padding:var(--s-10)}
.cta-band__title{font-size:var(--t-xl);line-height:1.1;letter-spacing:-.03em;
  font-weight:var(--fw-title);margin-bottom:var(--s-2)}
.cta-band p{color:rgba(255,255,255,.86)}

/* ═══ FOOTER ═══════════════════════════════════════════════════
   Hell seit 2026-08-16 (Simon). Vorher ein dunkler Block, der die Seite
   abschloss — er zog das Braun von --c-deep über die ganze Breite und
   war der grösste Grund, warum das Dunkel „nicht recht passte".
   Jetzt Cream mit Haarlinien: der Anker unten ist das rote CTA-Band,
   nicht die Fläche. Die Sektion darüber (.sem) ist ebenfalls Cream —
   die Haarlinie oben ist deshalb die Trennung, nicht der Farbwechsel
   (DESIGN §6: Weiss/Fläche → Haarlinie → Typografie).                */
.foot{background:var(--c-cream);color:var(--c-ink);
  border-top:1px solid var(--c-line);padding-block:var(--section-y) var(--s-8)}
.foot__cta{margin-bottom:var(--s-16)}
.btn--onred{background:#fff;color:var(--c-signal)}
.btn--onred .btn__arrow{background:rgba(219,15,24,.12)}
.btn--onred:hover{background:var(--c-ink);color:#fff}

.foot__locs{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s-8);
  padding-bottom:var(--s-12);border-bottom:1px solid var(--c-line)}
.loc__city{font-weight:var(--fw-strong);font-size:var(--t-md);display:flex;align-items:baseline;gap:var(--s-2)}
.loc__city span{font-size:var(--t-xs);font-weight:var(--fw-strong);color:var(--c-signal)}
.loc__co{margin-top:var(--s-1);font-size:var(--t-xs);font-weight:var(--fw-strong);color:var(--c-muted)}
.loc__addr{margin-top:var(--s-4);font-size:var(--t-sm);color:var(--c-muted);line-height:1.55}
.loc__tel{display:inline-block;margin-top:var(--s-3);font-size:var(--t-sm);font-weight:var(--fw-strong);
  border-bottom:1px solid var(--c-line);padding-bottom:2px;transition:border-color var(--dur-ui),color var(--dur-ui)}
.loc__tel:hover{color:var(--c-signal);border-color:var(--c-signal)}
.foot__bar{display:flex;flex-wrap:wrap;gap:var(--s-5);justify-content:space-between;
  padding-top:var(--s-8);font-size:var(--t-sm);color:var(--c-muted)}
.foot__legal{display:flex;gap:var(--s-6);flex-wrap:wrap}
.foot__legal a:hover{color:var(--c-signal)}
/* Entwurfs- und Fotocredit-Zeile. Sass die bis 2026-08-16 in einer
   fixierten Pille unten links (störte beim Scrollen) — der Hinweis muss
   dastehen (PRINCIPLES §2), aber nicht mitfahren. */
.foot__note{flex-basis:100%;order:3;padding-top:var(--s-5);
  border-top:1px solid var(--c-line);font-size:var(--t-xs);color:var(--c-muted)}

/* ═══ MOTION — signature "Aufblenden" ═══════════════════════════
   Everything arrives the same way: a soft rise with a slight scale,
   as if the card settles onto the page. One idea, applied everywhere.
   Gated on .js so a script-less page renders complete.
   ═════════════════════════════════════════════════════════════ */
.js [data-anim]{opacity:0;transform:translateY(26px) scale(.985);
  transition:opacity var(--dur) var(--ease) var(--d,0ms),
             transform var(--dur) var(--ease) var(--d,0ms)}
.js [data-anim].is-in{opacity:1;transform:none}

.js .lph__row span{transform:scaleX(0)}
.js .is-in .lph__row span,.js [data-anim].is-in .lph__row span{transform:scaleX(1)}
.js .is-in .lph__row span:nth-child(1){transition-delay:.10s}
.js .is-in .lph__row span:nth-child(2){transition-delay:.15s}
.js .is-in .lph__row span:nth-child(3){transition-delay:.20s}
.js .is-in .lph__row span:nth-child(4){transition-delay:.25s}
.js .is-in .lph__row span:nth-child(5){transition-delay:.30s}
.js .is-in .lph__row span:nth-child(6){transition-delay:.35s}
.js .is-in .lph__row span:nth-child(7){transition-delay:.40s}
.js .is-in .lph__row span:nth-child(8){transition-delay:.45s}
.js .is-in .lph__row span:nth-child(9){transition-delay:.50s}

/* ═══ FORMULARFELDER ═══════════════════════════════════════════
   Phase 3. Steht hier und nicht in einer Seiten-CSS, weil zwei
   Strecken sie brauchen: der Buchungs-Assistent (Phase 3) und der
   Bewerbungsfluss (Phase 4) — DESIGN §9.

   Register wie der Rest: weiss + Haarlinie, keine getoenten Fuellungen
   (§2). Der Fokus traegt Signal, der Fehler ebenfalls — beides ist
   funktionale Farbe, keine Deko. Hit-Targets bleiben ueber 40px (§12).
   ═════════════════════════════════════════════════════════════ */
.field{display:block;margin-bottom:var(--s-5)}
.field__label{display:block;margin-bottom:var(--s-2);font-size:var(--t-xs);font-weight:var(--fw-strong);
  letter-spacing:.02em;color:var(--c-muted)}
.field__req{color:var(--c-signal)}
.field__hint{display:block;margin-top:var(--s-2);font-size:var(--t-xs);color:var(--c-muted)}
/* Leer und damit ohne Hoehe, bis der Assistent etwas hineinschreibt —
   sonst springt das Layout beim ersten Fehler. */
.field__error{display:block;font-size:var(--t-xs);font-weight:var(--fw-strong);color:var(--c-signal)}
.field__error:not(:empty){margin-top:var(--s-2)}

/* Die Kante traegt --c-field, nicht --c-line (2026-08-17): ein Feld muss
   als Feld erkennbar sein, dafuer verlangt WCAG 1.4.11 3:1. --c-line
   misst ~1,2:1 und bleibt das, was es ist — Trennung von Flaechen.
   Begruendung und Messwerte am Token in tokens.css. */
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:var(--t-sm);color:var(--c-ink);
  background:var(--c-white);border:1px solid var(--c-field);border-radius:var(--r-sm);
  padding:.7rem .9rem;min-height:2.75rem;
  transition:border-color var(--dur-ui),box-shadow var(--dur-ui)}
.field textarea{min-height:7rem;resize:vertical}
/* Der Hover stand auf --c-muted-d und waere jetzt HELLER als die
   Ruhekante — die Eskalation lief rueckwaerts. Drei Stufen derselben
   Leiter, jede dunkler als die vorige: --c-field → --c-muted → Signal. */
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--c-muted)}
/* UMRISS UND KANTE SAGEN NIE DASSELBE (2026-08-17, Simons Fund: „selected
   state macht einen border in rot, error state ist auch rot — ergibt eine
   doppelte Linie").
   Vorher wurde die Kante beim Fokus rot UND der Fokus-Umriss aus base.css
   stand mit 3px Abstand daneben: zwei rote Linien um dasselbe Feld, beim
   fehlerhaften Feld sogar dieselbe Aussage doppelt. Jetzt hat jeder sein
   eigenes Thema:
     Umriss = „hier bin ich"  (Fokus, base.css, unangetastet — §12)
     Kante  = „so steht es"   (Ruhe → Hover → Fehler)
   Im Fokus tritt die Kante auf die Hover-Stufe zurueck und laesst dem
   Umriss das Rot. Der Fehler bleibt trotzdem sichtbar: die Meldung
   darunter steht in Signal und aria-invalid bleibt gesetzt. */
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--c-muted)}
.field input[aria-invalid]:not(:focus),
.field select[aria-invalid]:not(:focus),
.field textarea[aria-invalid]:not(:focus){border-color:var(--c-signal)}
.field input::placeholder{color:var(--c-muted)}
/* Der eigene Pfeil ersetzt den des Systems — sonst steht neben einer
   Haarlinien-Box ein Betriebssystem-Widget.
   ACHTUNG: In einer data-URI greift var() nicht, deshalb steht hier als
   einzige Stelle ein roher Hex-Wert (PRINCIPLES §3). %236F645E ist
   --c-muted — wer das Token aendert, aendert diese Zeile mit. */
.field select{appearance:none;padding-right:2.2rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236F645E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .75rem center;background-size:1.1rem}
/* Ein Feld, das in einer Zeile neben anderen steht (Filterleiste). */
.field--inline{margin-bottom:0}
.field--grow{flex:1 1 14rem}

/* ── Option: Radio und Checkbox ──
   Der native Knopf bleibt stehen (Tastatur, Screenreader, Systemfarbe
   via accent-color); nur Zeile und Trefferflaeche sind unsere. */
/* padding .7rem, nicht kleiner: darunter fiel die Zeile auf 38px und
   riss damit die 40px-Trefferflaeche (DESIGN §12) — gemessen. */
.opt{display:flex;align-items:flex-start;gap:var(--s-3);padding:.7rem 0;
  font-size:var(--t-sm);line-height:1.45;cursor:pointer}
.opt input{flex:none;width:1.15rem;height:1.15rem;margin:.15rem 0 0;accent-color:var(--c-signal);
  cursor:pointer}
.opt:hover{color:var(--c-signal)}
.opt--check{align-items:flex-start}

/* ── Modal ──
   Ein natives <dialog>. Fokus-Falle, Esc, Top-Layer und ::backdrop
   bringt der Browser mit — wir bauen nichts davon nach (DESIGN §12).
   Gebraucht vom Seminar-Assistenten (Phase 3) UND vom Bewerbungsfluss
   (Phase 4), deshalb steht es hier und nicht in einer Seiten-Datei (§9).

   Die Flaeche ist Weiss + Haarlinie (§6). Abgehoben wird ueber den
   abgedunkelten Grund, nicht ueber eine eigene Toenung — das Modal
   braucht keine zweite Betonung.

   OHNE JS ist ein <dialog> unsichtbar. Es rendert deshalb als normale
   Sektion im Seitenfluss (PRINCIPLES §5): der Ausloeser bleibt ein
   echter Anker und springt dorthin, statt ins Leere zu zeigen. Deshalb
   traegt jede Regel unten entweder [open] oder html:not(.js) — eine
   nackte .modal-Regel wuerde die UA-Regel dialog:not([open]){display:none}
   schlagen und den Dialog auf jeder Seite offen stehen lassen. */
.modal[open]{position:fixed;inset:0;display:grid;place-items:center;
  width:100%;height:100%;max-width:none;max-height:none;margin:0;
  padding:var(--s-4);border:0;background:none;color:inherit;overflow:visible}
.modal[open]::backdrop{background:var(--c-scrim)}
.modal__box{display:flex;flex-direction:column;min-height:0;
  width:min(var(--modal-w,44rem),100%);max-height:100%;
  background:var(--c-white);border:1px solid var(--c-line);
  border-radius:var(--r-card);box-shadow:var(--sh-float);overflow:hidden}
.modal--wide{--modal-w:73.75rem}
/* Feste Hoehe nur, wo der Inhalt sie braucht: ein Modal mit stehendem
   Kopf, stehender Fussleiste und scrollender Mitte kann die Mitte nur
   fuellen, wenn die Hoehe steht. Sonst waechst die Box mit dem Inhalt. */
.modal--tall .modal__box{height:min(55rem,100%)}

.modal__head{flex:none;display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--s-6);padding:var(--s-6) var(--s-8);border-bottom:1px solid var(--c-line)}
.modal__title{font-size:var(--t-lg);font-weight:var(--fw-title);letter-spacing:-.02em}
.modal__sub{margin-top:.2rem;font-size:var(--t-sm);color:var(--c-muted)}
/* 2,6rem = 41,6px — ueber der 40px-Schwelle (DESIGN §12), gemessen.
   `display:grid` ist nicht kosmetisch: ein <button> ist inline-block,
   ein inline-svg darin sitzt auf der Grundlinie und haengt dadurch ein
   paar Pixel zu tief in seiner Pille (Simons Fund, 17.08.). Dieselbe
   Loesung wie bei .iconbtn und .wiz__stepno. */
.modal__close{flex:none;display:grid;place-items:center;
  width:2.6rem;height:2.6rem;padding:.75rem;
  border-radius:var(--r-pill);border:1px solid var(--c-line);color:var(--c-muted);
  transition:border-color var(--dur-ui),color var(--dur-ui)}
.modal__close:hover{border-color:var(--c-signal);color:var(--c-signal)}

/* Steht zwischen Box und Body, wenn dazwischen ein Element liegen muss,
   das keine Fläche ist — beim Assistenten das <form>, das Mitte UND
   Fußleiste umschließen muss, damit „Absenden" ein echter Submit ist. */
.modal__flow{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.modal__body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:var(--s-8)}
/* Variante ohne eigenes Innenmass: die Spalten darin bringen ihres mit. */
.modal__body--split{padding:0;display:grid;overflow:hidden}
.modal__foot{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);
  padding:var(--s-5) var(--s-8);border-top:1px solid var(--c-line)}

/* Aufblenden, kurz — die Signaturbewegung (§8) in UI-Tempo. */
.modal[open] .modal__box{animation:modal-rise .26s var(--ease) both}
.modal[open]::backdrop{animation:modal-fade .26s ease both}
@keyframes modal-rise{from{opacity:0;transform:translateY(12px) scale(.99)}
  to{opacity:1;transform:none}}
@keyframes modal-fade{from{opacity:0}to{opacity:1}}

/* Der Hintergrund darf nicht mitscrollen. --modal-sbw kompensiert die
   verschwindende Scrollleiste, damit die Seite darunter nicht springt;
   den Wert misst modal.js beim Oeffnen. */
html.modal-open{overflow:hidden;padding-right:var(--modal-sbw,0px)}

/* Fassung ohne JS: normale Sektion, kein Dialog.
   `width:100%` ist nötig — ein dialog-Element ist per UA-Regel
   `width:fit-content`, ohne die Angabe stand die Sektion bei 1086px
   statt auf Shell-Breite (gemessen 17.08.). */
html:not(.js) .modal{display:block;position:static;width:100%;
  max-width:var(--shell);margin-inline:auto;padding:var(--section-y) var(--gutter);
  scroll-margin-top:5rem}
html:not(.js) .modal__box{width:auto;height:auto;max-height:none;overflow:visible;
  box-shadow:none}
html:not(.js) .modal__body,html:not(.js) .modal__body--split,
html:not(.js) .modal__flow{overflow:visible}
/* Ohne JS schliesst nichts — also steht auch kein Schliesser da. Gilt
   fuer das × im Kopf wie fuer ein „Schliessen" in einer Fussleiste;
   ein Knopf, der nichts tut, ist schlimmer als keiner (PRINCIPLES §6). */
html:not(.js) [data-modal-close]{display:none}

/* ── Entwurfs-Hinweis (includes/intro.php) ──
   Der einzige Dialog der Site, der sich selbst oeffnet: einmal je
   Besuch, weil „der Link ohne uns reist" (02-STRATEGY §4) und dann
   niemand danebensteht, der die Einordnung sagt. Schmaler als die
   Assistenten — er traegt vier Saetze, keine Formularspalte.
   Ohne JS ist er die Sektion ueber der Fusszeile: dieselbe Aussage,
   nur ungefragt sichtbar statt vorgelegt. */
.modal--intro{--modal-w:38rem}
.modal--intro .modal__title{margin-top:var(--s-3)}
.intro__lead{font-size:var(--t-sm);line-height:1.65;color:var(--c-muted)}
.intro__lead strong{color:var(--c-ink);font-weight:var(--fw-strong)}
.intro__body .ticks{margin-top:var(--s-6)}

/* ═══ ASSISTENT IM MODAL ═══════════════════════════════════════
   Die Huelle eines mehrschrittigen Formulars im Dialog: Schiene mit
   senkrechtem Stepper links, scrollende Formularspalte rechts,
   stehende Fussleiste, Pruefen-Ansicht, Erfolgsbildschirm.

   Stand bis 2026-08-17 in pages/seminar.css, weil es nur den
   Buchungs-Assistenten gab. Mit dem Bewerbungsfluss (Phase 4) hat das
   Muster einen zweiten Nutzer — und dann gehoert es hierher (DESIGN §9:
   „Wird ein Muster von zwei Seiten gebraucht → components.css").
   Ein zweites Mal gebaut waere es ein zweites Mal anders.

   Was NICHT hier steht, weil es nur eine Strecke braucht: die
   mitlaufende Summe und die Teilnehmerblaecke des Seminars
   (.wiz__sum*, .wcount*, .wperson*, .wpass*, .wiz__navsum) bleiben in
   pages/seminar.css, die Stellen-Steckbriefe und das Datei-Feld der
   Bewerbung (.bw*) in pages/karriere.css.
   ═════════════════════════════════════════════════════════════ */
.wiz__sep{margin-inline:.6em;color:var(--c-muted)}

/* ── Spalten ──
   19rem Schiene, der Rest fuers Formular. Bei --modal-w 73,75rem bleiben
   der Formularspalte ~54rem — genug fuer eine dreispaltige Namenszeile,
   ohne dass etwas gedraengt steht. */
.wiz__cols{grid-template-columns:19rem minmax(0,1fr)}
.wiz__rail{display:flex;flex-direction:column;gap:var(--s-6);min-height:0;
  overflow-y:auto;padding:var(--s-6);border-right:1px solid var(--c-line)}
.wiz__main{min-width:0;overflow-y:auto;padding:var(--s-8);
  scrollbar-gutter:stable}
.wiz__panel{border:0;padding:0;margin:0;min-width:0}
.wiz__panel[hidden]{display:none}
.wiz__legend{font-size:var(--t-lg);font-weight:var(--fw-title);letter-spacing:-.02em;
  margin-bottom:var(--s-6);padding:0}
.wiz__intro{margin-top:calc(var(--s-6) * -1);margin-bottom:var(--s-6);
  font-size:var(--t-sm);color:var(--c-muted);max-width:62ch}
.wiz__row{display:grid;gap:var(--s-4)}
.wiz__row--2{grid-template-columns:1fr 1fr}
/* Anrede · Vorname · Nachname — dieselbe Zeile bei Teilnehmern (Phase 3)
   wie bei Bewerbern (Phase 4), deshalb hier und nicht in einer Seiten-CSS. */
.wiz__row--name{grid-template-columns:9rem 1fr 1fr}
.wiz__radios{border:0;padding:0;margin:0 0 var(--s-5);min-width:0}
.wiz__radios legend{padding:0;margin-bottom:var(--s-2)}

/* ── Schritte, senkrecht in der Schiene ──
   Die durchgehende Linie hinter den Ziffern ist das Rueckgrat des
   Steppers; die Ziffern decken sie mit ihrer weissen Flaeche ab.
   1,65rem = Innenabstand des Knopfes (.75rem) + halbe Ziffer (.9rem). */
.wiz__steps{position:relative;display:grid;gap:var(--s-1)}
.wiz__steps::before{content:"";position:absolute;left:1.65rem;top:1.6rem;bottom:1.6rem;
  width:1px;background:var(--c-line)}
.wiz__step button{display:flex;align-items:center;gap:var(--s-3);width:100%;
  padding:.6rem .75rem;text-align:left;color:var(--c-muted);
  transition:color var(--dur-ui)}
.wiz__step button:hover{color:var(--c-signal)}
/* display:grid ist nicht kosmetisch — dieselbe Regel wie bei .iconbtn
   und .modal__close (DESIGN §9): eine Ziffer in einem inline-block-Button
   saesse auf der Grundlinie und haenge zu tief in ihrer Pille. */
.wiz__stepno{position:relative;flex:none;width:1.8rem;height:1.8rem;
  border-radius:var(--r-pill);display:grid;place-items:center;
  background:var(--c-white);border:1px solid var(--c-line);
  font-size:var(--t-xs);font-weight:var(--fw-strong);font-variant-numeric:tabular-nums;
  transition:background var(--dur-ui),color var(--dur-ui),border-color var(--dur-ui)}
.wiz__stepname{font-size:var(--t-sm);font-weight:var(--fw-strong)}
/* Der aktive Schritt traegt die Ziffer rot gefuellt — dieselbe Sprache wie
   die aktive Giebel-Kachel im Gruppen-Verzeichnis (DESIGN §13). Die
   Zeile selbst bekommt keine Flaeche (§2), nur Ink statt Muted. */
.wiz__step.is-current button{color:var(--c-ink)}
.wiz__step.is-current .wiz__stepno{background:var(--c-signal);color:#fff;
  border-color:transparent}
.wiz__step.is-done .wiz__stepno{color:var(--c-signal);border-color:var(--c-signal)}

/* ── Entwurfshilfe ──
   Steht bewusst leise ganz unten in der Schiene und traegt den
   Entwurfs-Marker: sie ist eine Hilfe fuer den Termin, kein Merkmal
   des Produkts (PRINCIPLES §1). */
.wiz__demo{padding-top:var(--s-5);border-top:1px solid var(--c-line)}
.wiz__demo-btn{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);
  font-size:var(--t-xs);color:var(--c-muted);text-align:left;
  transition:color var(--dur-ui)}
.wiz__demo-btn:hover{color:var(--c-signal)}

/* ── Pruefen ── */
.wiz__review{display:grid;gap:var(--s-8)}
.wiz-rev__head{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s-4);padding-bottom:var(--s-3);border-bottom:1px solid var(--c-line)}
.wiz-rev__title{font-size:var(--t-md);font-weight:var(--fw-title)}
.wiz-rev__edit{font-size:var(--t-xs);font-weight:var(--fw-strong);color:var(--c-signal);
  border-bottom:1px solid transparent;transition:border-color var(--dur-ui)}
.wiz-rev__edit:hover{border-color:var(--c-signal)}
.wiz-rev__dl{display:grid;grid-template-columns:10rem minmax(0,1fr);gap:var(--s-2) var(--s-5);
  margin-top:var(--s-4);font-size:var(--t-sm)}
.wiz-rev__dl dt{color:var(--c-muted)}
.wiz-rev__people{margin-top:var(--s-4);display:grid;gap:var(--s-3)}
.wiz-rev__people li{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-2) var(--s-4);
  font-size:var(--t-sm);padding-bottom:var(--s-3);border-bottom:1px solid var(--c-line)}
.wiz-rev__name{font-weight:var(--fw-strong)}
.wiz-rev__meta{color:var(--c-muted);font-size:var(--t-xs)}
.wiz-rev__pass{margin-left:auto;font-size:var(--t-xs);color:var(--c-muted)}
.wiz-rev__pass.is-fee{color:var(--c-signal);font-weight:var(--fw-strong)}

.wiz__terms{margin-top:var(--s-8);padding-top:var(--s-6);border-top:1px solid var(--c-line)}

/* ── Fussleiste ── */
.wiz__back[hidden],.wiz__next[hidden],.wiz__submit[hidden]{display:none}

/* ── Erfolgsbildschirm ──
   Er tritt an die Stelle des Formulars und fuellt denselben Platz:
   eigene Scrollflaeche, damit Kopf und Rand des Dialogs stehen bleiben. */
.wiz__done{flex:1 1 auto;min-height:0;overflow-y:auto;padding:var(--s-12)}
.wiz__done[hidden]{display:none}
.wiz__done:focus{outline:none}
.wiz__doneacts{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6)}
.wiz__doneclose{margin-top:var(--s-8)}
.wiz__donemark{display:grid;place-items:center;width:3.2rem;height:3.2rem;padding:.85rem;
  border-radius:var(--r-pill);background:var(--c-signal);color:#fff;
  margin-bottom:var(--s-6)}
.wiz__donetitle{font-size:var(--t-xl);font-weight:var(--fw-display);letter-spacing:-.03em}
.wiz__doneref{margin-top:var(--s-3);font-size:var(--t-md);color:var(--c-muted)}
.wiz__doneref strong{color:var(--c-ink);font-variant-numeric:tabular-nums;
  letter-spacing:.02em}
.wiz__donebody{margin-top:var(--s-8);padding-top:var(--s-8);
  border-top:1px solid var(--c-line);display:grid;gap:var(--s-8)}
.wiz__donenext{margin-top:var(--s-8);font-size:var(--t-sm);color:var(--c-muted)}
.wiz__donenext a{color:var(--c-signal);font-weight:var(--fw-strong)}
.wiz__donedraft{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-3);
  margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--c-line);
  font-size:var(--t-xs);color:var(--c-muted)}

/* ── Fassung ohne JS ──
   Ein Assistent, dessen Bloecke aus einem <template> kommen und dessen
   Schritte ein Skript schaltet, waere ohne Skript ein Formular ohne
   Felder, mit totem Stepper und toten Knoepfen — schlechter als gar
   keins. Er weicht deshalb einer Zeile, die den Weg nennt, der ohne
   Skript traegt (PRINCIPLES §5 + §6). */
.wiz__nojs{display:none}
html:not(.js) .wiz .modal__flow{display:none}
html:not(.js) .wiz__nojs{display:block;padding:var(--s-8);max-width:64ch}
.wiz__nojs-t{font-size:var(--t-md);font-weight:var(--fw-title);margin-bottom:var(--s-3)}
.wiz__nojs a{color:var(--c-signal);font-weight:var(--fw-strong)}

/* ── Druckausgabe des Erfolgsbildschirms ──
   Die Kopie haengt ausserhalb des Dialogs an <body> (siehe wizard.js /
   bewerbung.js); sie braucht deshalb ihre eigenen Masse statt der
   Scrollflaeche. */
#hig-print .wiz__done{overflow:visible;height:auto;padding:0}
.wiz__printhead{font-size:var(--t-sm);font-weight:var(--fw-strong);color:var(--c-muted);
  margin-bottom:var(--s-6);padding-bottom:var(--s-4);border-bottom:1px solid var(--c-line)}

@media (max-width:1140px){
  /* Die Schiene wird zur Kopfzeile des Dialogs: Schritte waagrecht. */
  .wiz__cols{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .wiz__rail{flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--s-4);
    overflow:visible;padding:var(--s-4) var(--s-6);
    border-right:0;border-bottom:1px solid var(--c-line)}
  .wiz__steps{display:flex;flex-wrap:wrap;gap:var(--s-1)}
  .wiz__steps::before{display:none}
  .wiz__demo{margin-left:auto;padding-top:0;border-top:0}
}
@media (max-width:760px){
  .wiz__row--2,.wiz__row--name{grid-template-columns:1fr}
  .wiz__main{padding:var(--s-6)}
  .wiz__done{padding:var(--s-8)}
  .wiz-rev__dl{grid-template-columns:1fr;gap:0}
  .wiz-rev__dl dt{margin-top:var(--s-3)}
  /* Am Handy nimmt der Dialog den Bildschirm — ein zentriertes Kaertchen
     mit Rand waere dort nur kleiner, nicht ruhiger. */
  .wiz.modal[open]{padding:0}
  .wiz .modal__box{height:100%;max-height:none;border:0;border-radius:0}
  .wiz .modal__head{padding:var(--s-5) var(--s-6)}
  .wiz .modal__foot{padding:var(--s-4) var(--s-6)}
  .wiz__stepname{display:none}
  .wiz__step button{padding:.5rem}
}

/* ── Druckausgabe eines Modal-Inhalts ──
   Ein Element im Top-Layer druckt je nach Browser gar nicht oder
   beschnitten. Statt darauf zu hoffen, haengt das Skript eine Kopie als
   #hig-print an <body> und blendet fuer den Druck alles andere aus —
   PRINCIPLES §6: im Termin darf nichts still fehlschlagen. */
#hig-print{display:none}
@media print{
  html.is-printing{overflow:visible;padding-right:0}
  html.is-printing body>*{display:none!important}
  html.is-printing dialog{display:none!important}
  html.is-printing #hig-print{display:block!important;padding:0}
}

/* ═══ RESPONSIVE ═══════════════════════════════════════════════
   Breakpoints 1140 / 900 / 760 / 440 (DESIGN.md §5).
   --overlap's 760 override lives in tokens.css, its single owner.
   ═════════════════════════════════════════════════════════════ */
@media (max-width:1140px){
  /* The number is the first thing to go — the tile still dials. */
  .nav__tel-txt{display:none}
  .nav__tel{padding:.3rem;border-color:transparent}
  .nav__shell{gap:var(--s-5)}
  .stats__grid{grid-template-columns:repeat(6,1fr)}
  .card--list{grid-column:span 6}
  .card--seal{grid-column:span 2}
  .card--stat{grid-column:span 3}
  .stages{grid-template-columns:1fr;gap:var(--s-4)}
  .refs__grid{grid-template-columns:1fr 1fr}
  .foot__locs{grid-template-columns:repeat(3,1fr);gap:var(--s-10)}
}

@media (max-width:900px){
  .nav__links{display:none}
  .nav__brand-tag{display:none}
  .burger{display:flex}
  .nav__end .btn{display:none}
  .hero__grid{grid-template-columns:1fr;gap:var(--s-8)}
  .hero__card{max-width:32rem}
  .cta-band{grid-template-columns:1fr;justify-items:start}
}

@media (max-width:760px){
  .hero{min-height:min(92svh,44rem);padding:7.5rem 0 var(--s-10);
    flex-direction:column;justify-content:flex-end;align-items:stretch}
  /* Trap 1+2 (DESIGN.md §5): as `static` this becomes a flex sibling of
     the hero text and halves the headline column — and it then paints
     *under* the positioned hero image and vanishes. Keep it `relative`.
     Since 2026-08-05 the element that leaves the absolute layer is
     .hero__foot (the credit line), so the trap moved with it. */
  .hero__foot{position:relative;inset:auto;padding-inline:var(--gutter);
    margin-top:var(--s-8);flex-direction:column;align-items:flex-start;gap:var(--s-4)}
  .hero__credit{margin-left:0;text-align:left}
  .stats{margin-top:var(--s-10)}
  .stats__grid{grid-template-columns:1fr 1fr}
  .card--list{grid-column:span 2;grid-template-columns:1fr;gap:var(--s-6)}
  .seals{justify-content:start}
  /* order, not grid-row — an explicit row index leaves an empty track behind */
  .card--seal{grid-column:span 2;order:4;grid-auto-flow:column;justify-items:center}
  .card--stat{grid-column:span 1;gap:var(--s-8)}
  .refs__grid{grid-template-columns:1fr}
  .foot__locs{grid-template-columns:1fr 1fr;gap:var(--s-8)}
}

@media (max-width:440px){
  .stats__grid{grid-template-columns:1fr}
  .card--stat,.card--list,.card--seal{grid-column:span 1}
  .seals{grid-auto-flow:row;grid-template-columns:1fr 1fr;grid-auto-rows:1fr}
  .seal-tile{width:auto}
  .foot__locs{grid-template-columns:1fr}
  .btn{width:100%;justify-content:center}
  .hero__card{padding:var(--s-6)}
}

/* Component-level reduced-motion overrides. These must come *after*
   the "from" states above to win the cascade — that is why the whole
   motion story lives in this file and not split across base.css. */
@media (prefers-reduced-motion:reduce){
  .js [data-anim]{opacity:1;transform:none}
  .js .lph__row span{transform:scaleX(1)}
  /* Das Modal steht sofort da — der Grund blendet nicht auf, die Box
     steigt nicht. Zustaende springen auf „fertig" (DESIGN §8). */
  .modal[open] .modal__box,.modal[open]::backdrop{animation:none}
}