/* ==========================================================================
   Startseite briggeler.ch und /en/ — Gestaltung «Glanz» (seit 01.11.2026).
   Markup: tools/seiten-bauen.cjs (startseite) aus seiten/start.cjs.
   Farben: rahmen.css. Bildflächen, Projektkarten, Abschnittsköpfe: monitor.css.

   Von oben nach unten:
     .held-buehne  Name, Satz, zwei Knöpfe, Aurora im Hintergrund und rechts
                   die Bühne mit sechs Projekten (start.js)
     .kanaele      sechs Arbeitsfelder als Karten mit Symbol
     .wand         alle Projekte als Karten, zwei Gruppen
     .ablauf       was jeden Tag von selbst läuft
     .werkbank     KI-Check und die drei Werkzeuge
     .rundown      Werdegang als Zeitleiste
     .ntz-grid     Notizen (Teaser schreibt site/notizen/build.cjs)
     .schluss      Abschluss mit Profilen
   ========================================================================== */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--sans);font-size:17px;line-height:1.55;letter-spacing:-.011em;
     -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img,video,canvas{display:block;max-width:100%}
ul,ol{list-style:none}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rand{max-width:1320px;margin:0 auto;padding-left:clamp(16px,3vw,36px);padding-right:clamp(16px,3vw,36px)}

/* ---------- Kopfteil mit Aurora ---------- */
.held-buehne{position:relative;isolation:isolate;overflow:hidden;margin-top:-1px}
.aurora{position:absolute;inset:-10% -10% 0;z-index:-1;pointer-events:none;
        -webkit-mask:linear-gradient(180deg,#000 55%,transparent 98%);mask:linear-gradient(180deg,#000 55%,transparent 98%)}
.aurora i{position:absolute;border-radius:50%;filter:blur(72px);opacity:.55;will-change:transform}
.aurora i:nth-child(1){width:46vw;height:46vw;left:-8vw;top:-18vw;background:#7AA2FF;animation:schweben1 22s var(--ease) infinite alternate}
.aurora i:nth-child(2){width:38vw;height:38vw;left:30vw;top:-20vw;background:#C4A8FF;animation:schweben2 26s var(--ease) infinite alternate}
.aurora i:nth-child(3){width:34vw;height:34vw;right:-6vw;top:-8vw;background:#FFB4A2;opacity:.45;animation:schweben3 24s var(--ease) infinite alternate}
.aurora i:nth-child(4){width:30vw;height:30vw;left:14vw;top:16vw;background:#9FE7F5;opacity:.32;animation:schweben2 30s var(--ease) infinite alternate-reverse}
[data-theme="dark"] .aurora i{opacity:.32}
[data-theme="dark"] .aurora i:nth-child(1){background:#2F5BFF}
[data-theme="dark"] .aurora i:nth-child(2){background:#7C3AED}
[data-theme="dark"] .aurora i:nth-child(3){background:#F0603F;opacity:.22}
[data-theme="dark"] .aurora i:nth-child(4){background:#0EA5E9;opacity:.16}
@keyframes schweben1{to{transform:translate(9vw,5vw) scale(1.12)}}
@keyframes schweben2{to{transform:translate(-7vw,6vw) scale(.92)}}
@keyframes schweben3{to{transform:translate(-10vw,4vw) scale(1.1)}}
/* feines Raster über der Aurora */
.held-buehne::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
        background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
        background-size:64px 64px;-webkit-mask:radial-gradient(70% 60% at 50% 20%,#000,transparent 75%);mask:radial-gradient(70% 60% at 50% 20%,#000,transparent 75%)}

.held{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(32px,4.4vw,72px);
      padding-top:clamp(40px,4.6vw,76px);padding-bottom:clamp(64px,8vw,120px);align-items:center}
.status{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 11px;border-radius:999px;font-size:13.5px;font-weight:500;
        color:var(--mut);background:var(--glas);border:1px solid var(--glas-rand);box-shadow:var(--schatten);
        backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.status .punkt{animation:pulsieren 2.4s ease-in-out infinite}
@keyframes pulsieren{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--ok) 0%,transparent)}}
.held h1{font-size:clamp(56px,7vw,112px);line-height:.92;letter-spacing:-.06em;font-weight:600;margin:26px 0 0 -.04em;text-wrap:balance}
.held h1 .zweit{display:block;font-size:.4em;line-height:1.08;letter-spacing:-.045em;margin-top:.42em;max-width:16ch;margin-left:.06em;
        background:var(--verlauf);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em}
.held .lead{font-size:clamp(17px,1.4vw,19.5px);line-height:1.62;color:var(--mut);max-width:36em;margin-top:clamp(22px,2.4vw,30px)}
.held .lead strong{color:var(--ink);font-weight:550}
.held-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3vw,38px)}
.knopf{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 24px;border-radius:999px;font-size:15.5px;font-weight:500;
       text-decoration:none;color:var(--ink);background:var(--glas);border:1px solid var(--line2);
       backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s}
.knopf:hover,.knopf:focus-visible{transform:translateY(-2px);box-shadow:var(--schatten)}
.knopf.primaer{background:var(--ink);color:var(--bg);border-color:transparent;box-shadow:0 10px 30px -10px color-mix(in srgb,var(--accent) 60%,transparent)}
.knopf.primaer:hover,.knopf.primaer:focus-visible{box-shadow:0 18px 40px -12px color-mix(in srgb,var(--accent) 70%,transparent)}
.knopf i{font-style:normal;transition:transform .35s var(--ease)}
.knopf:hover i{transform:translateX(3px)}

/* Erster Auftritt des Kopfteils */
.held-text > *,.mischer{animation:hoch .9s var(--ease) both}
.held-text > :nth-child(2){animation-delay:.06s}
.held-text > :nth-child(3){animation-delay:.12s}
.held-text > :nth-child(4){animation-delay:.18s}
.mischer{animation-delay:.16s;animation-duration:1.1s}
@keyframes hoch{from{opacity:0;transform:translateY(18px)}}

/* ---------- Bühne (Projekte im Kopfteil) ---------- */
.mischer{position:relative;padding:10px;border-radius:calc(var(--rund) + 8px);background:var(--glas);border:1px solid var(--glas-rand);
         box-shadow:var(--schatten-gross);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}
.stage{position:relative;display:block;aspect-ratio:16/10;border-radius:var(--rund);overflow:hidden;background:var(--bg3);isolation:isolate}
.stage .medium{position:absolute;inset:0}
.stage .ebene{position:absolute;inset:0}
.stage .ebene.rein{animation:einblenden .8s var(--ease) both}
@keyframes einblenden{from{opacity:0;transform:scale(1.04)}}
.stage img,.stage video,.stage svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage video{transition:opacity .6s var(--ease)}
.stage::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
         background:linear-gradient(180deg,transparent 62%,rgba(8,10,16,.28));pointer-events:none;z-index:2}
.stage-chip{position:absolute;left:14px;bottom:14px;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:6px 13px 6px 10px;
         border-radius:999px;background:rgba(12,14,20,.4);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:12.5px;
         backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%)}
.stage-chip b{font-weight:500}
.stage-chip .punkt{width:6px;height:6px;background:#4ADE80;box-shadow:0 0 0 3px rgba(74,222,128,.28)}
.stage-text{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:16px 10px 14px 10px}
.stage-text.neu > div{animation:hoch .6s var(--ease) both}
.pgm-titel{font-size:18px;letter-spacing:-.025em;font-weight:600;line-height:1.25}
.pgm-satz{font-size:14px;line-height:1.5;color:var(--mut);margin-top:4px;max-width:52ch;
         display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pfeil-knopf{flex:none;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px 0 18px;border-radius:999px;
         background:var(--ink);color:var(--bg);text-decoration:none;font-size:14px;font-weight:500;transition:transform .35s var(--ease)}
.pfeil-knopf i{font-style:normal;transition:transform .35s var(--ease)}
.pfeil-knopf:hover i{transform:translateX(3px)}
.pvw-reihe{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;padding:0 0 2px}
.pvw{position:relative;display:flex;flex-direction:column;gap:7px;padding:6px 6px 9px;border-radius:14px;text-decoration:none;color:var(--mut);
     transition:background .3s,color .3s}
.pvw:hover,.pvw:focus-visible{background:color-mix(in srgb,var(--ink) 4%,transparent);color:var(--ink)}
.pvw-bild{position:relative;display:block;aspect-ratio:16/10;border-radius:9px;overflow:hidden;background:var(--bg3);
     box-shadow:inset 0 0 0 1px var(--line);opacity:.62;transition:opacity .3s,transform .5s var(--ease)}
.pvw-bild img,.pvw-bild svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pvw:hover .pvw-bild{opacity:.9}
.pvw.an{color:var(--ink);background:var(--bg2);box-shadow:var(--schatten)}
.pvw.an .pvw-bild{opacity:1}
.pvw-name{font-size:12px;font-weight:500;letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px}
.pvw-lauf{position:absolute;left:10px;right:10px;bottom:4px;height:2px;border-radius:2px;background:var(--line);overflow:hidden;opacity:0}
.pvw-lauf::after{content:"";position:absolute;inset:0;background:var(--verlauf);transform:scaleX(0);transform-origin:0 50%}
/* Nur der Balken (::after) ist animiert: sein animationend schaltet weiter (start.js) */
.mischer.laeuft .pvw.an .pvw-lauf{opacity:1}
.mischer.laeuft .pvw.an .pvw-lauf::after{animation:lauf-balken 7s linear forwards}
.mischer.halt .pvw.an .pvw-lauf::after{animation-play-state:paused}
.mischer.fest .pvw-lauf{display:none}
@keyframes lauf-balken{to{transform:scaleX(1)}}
@media (max-width:560px){
  .mischer{padding:7px}
  .pvw-reihe{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
  .stage-text{flex-direction:column;align-items:flex-start;gap:12px}
}

/* ---------- Abschnitte ---------- */
.abschnitt{padding-top:clamp(80px,10vw,150px)}
.einl{font-size:clamp(17px,1.4vw,19.5px);line-height:1.6;color:var(--mut);max-width:44em;margin:0 0 clamp(30px,3.4vw,48px)}

/* ---------- Arbeitsfelder ---------- */
.kanaele{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
/* Seit 02.11.2026 mit Bild: oben ein Sinnbild aus der eigenen Serie (feld-*.webp), darauf das Symbol als
   Plakette. Beim Überfahren kippt die Karte leicht zur Maus, ein Lichtreflex folgt ihr
   (start.js, nur mit feinem Zeiger und ohne reduzierte Bewegung). */
.kanal-feld{position:relative;display:flex;flex-direction:column;gap:10px;padding:10px 10px 24px;border-radius:var(--rund);text-decoration:none;
            background:var(--bg2);border:1px solid var(--line);box-shadow:var(--schatten);overflow:hidden;isolation:isolate;
            transition:transform .5s var(--ease),box-shadow .5s var(--ease);transform-style:preserve-3d}
.kanal-feld > :not(.feld-bild){margin-left:18px;margin-right:18px}
.kanal-feld::before{content:"";position:absolute;width:320px;height:320px;right:-140px;bottom:-170px;border-radius:50%;z-index:-1;
            background:radial-gradient(closest-side,color-mix(in srgb,var(--glanz,var(--accent)) 22%,transparent),transparent);
            opacity:.6;transition:opacity .5s,transform .8s var(--ease)}
.kanal-feld::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;opacity:0;
            background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.22),transparent 45%);
            transition:opacity .4s}
.kanal-feld:nth-child(2){--glanz:#8B5CF6}
.kanal-feld:nth-child(3){--glanz:#F97362}
.kanal-feld:nth-child(4){--glanz:#0EA5E9}
.kanal-feld:nth-child(5){--glanz:#EC4899}
.kanal-feld:nth-child(6){--glanz:#6366F1}
.feld-bild{position:relative;display:block;aspect-ratio:16/10;border-radius:calc(var(--rund) - 8px);overflow:hidden;background:var(--bg3);
            box-shadow:inset 0 0 0 1px var(--line)}
.feld-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
            transition:transform 1.4s var(--ease),filter .6s}
[data-theme="dark"] .feld-bild img{filter:brightness(.88) saturate(1.08)}
/* Farbe des Felds weich von unten, damit Bild und Plakette zusammengehören */
.feld-bild::after{content:"";position:absolute;inset:0;pointer-events:none;
            background:linear-gradient(180deg,transparent 50%,color-mix(in srgb,var(--glanz,var(--accent)) 30%,transparent) 100%)}
.feld-icon{position:relative;z-index:2;display:grid;place-items:center;width:52px;height:52px;border-radius:15px;margin-top:-36px;margin-bottom:6px;color:#fff;
           background:linear-gradient(135deg,var(--glanz,var(--accent)),color-mix(in srgb,var(--glanz,var(--accent)) 55%,#fff));
           box-shadow:0 0 0 4px var(--bg2),0 14px 28px -10px var(--glanz,var(--accent)),inset 0 1px 0 rgba(255,255,255,.35)}
.feld-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.kanal-feld h3{font-size:23px;letter-spacing:-.035em;font-weight:600;line-height:1.15}
.kanal-feld p{font-size:15px;line-height:1.55;color:var(--mut)}
.kanal-feld .anzahl{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;color:var(--soft)}
.kanal-feld .anzahl i{font-style:normal;transition:transform .35s var(--ease),color .3s}
/* Hover braucht die höhere Spezifität: das Auftauchen (.js .auf.da > *) setzt transform:none. */
.kanaele > .kanal-feld:hover,.kanaele > .kanal-feld:focus-visible,
.js .kanaele.auf.da > .kanal-feld:hover,.js .kanaele.auf.da > .kanal-feld:focus-visible{
            transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px);
            box-shadow:var(--schatten-gross),0 30px 60px -30px color-mix(in srgb,var(--glanz,var(--accent)) 55%,transparent);
            transition:transform .25s var(--ease),box-shadow .5s var(--ease);transition-delay:0s}
.kanal-feld:hover::before{opacity:1;transform:scale(1.3)}
.kanal-feld.kippt::after{opacity:1}
.kanal-feld:hover .feld-bild img,.kanal-feld:focus-visible .feld-bild img{transform:scale(1.07)}
.kanal-feld:hover .anzahl{color:var(--ink)}
.kanal-feld:hover .anzahl i{transform:translateX(4px);color:var(--accent-ink)}
@media (max-width:1000px){.kanaele{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.kanaele{grid-template-columns:1fr}.kanal-feld > :not(.feld-bild){margin-left:12px;margin-right:12px}}
@media (prefers-reduced-motion:reduce){.feld-bild img{transition:none}.kanal-feld:hover .feld-bild img{transform:none}}

/* ---------- Was jeden Tag läuft: Tagesuhr und Liste ---------- */
.tag{display:grid;grid-template-columns:minmax(300px,460px) minmax(0,1fr);gap:clamp(24px,3.4vw,48px);align-items:center}
.uhr{position:relative;aspect-ratio:1;border-radius:50%;
     background:radial-gradient(circle at 50% 38%,var(--bg2) 0 52%,color-mix(in srgb,var(--bg2) 70%,transparent) 72%,transparent 73%),
                radial-gradient(circle at 30% 20%,rgba(59,108,246,.16),transparent 60%),radial-gradient(circle at 80% 85%,rgba(249,115,98,.14),transparent 55%),
                var(--glas);
     border:1px solid var(--glas-rand);box-shadow:var(--schatten-gross),inset 0 1px 0 rgba(255,255,255,.6)}
[data-theme="dark"] .uhr{background:radial-gradient(circle at 50% 38%,#11142a 0 52%,rgba(17,20,42,.6) 72%,transparent 73%),
                radial-gradient(circle at 30% 20%,rgba(59,108,246,.28),transparent 60%),radial-gradient(circle at 80% 85%,rgba(249,115,98,.18),transparent 55%),#0b0d1a;
     box-shadow:0 40px 90px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06)}
.uhr svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.uhr-nacht{fill:none;stroke:color-mix(in srgb,#8B5CF6 13%,transparent);stroke-width:14;stroke-linecap:round}
.uhr-bahn{fill:none;stroke:var(--line2);stroke-width:1;stroke-dasharray:2 6}
.uhr-striche line{stroke:var(--line2);stroke-width:1.5;stroke-linecap:round}
.uhr-striche line.lang{stroke:var(--soft);stroke-width:2}
.uhr-zahlen text{font:600 15px var(--sans);fill:var(--soft);text-anchor:middle;dominant-baseline:central;font-variant-numeric:tabular-nums}
.uhr-tag{fill:none;stroke:url(#uhr-verlauf);stroke-width:4;stroke-linecap:round;opacity:.9}
.uhr-lauf{filter:drop-shadow(0 4px 8px rgba(30,41,90,.3));transition:transform .6s var(--ease);transform-box:fill-box;transform-origin:center}
.uhr-lauf.naechster{transform:scale(1.3)}
.uhr-zeiger{transform-origin:200px 200px;transition:transform 1s var(--ease)}
.uhr-zeiger .perle{fill:#fff;stroke:#F97362;stroke-width:3.5;filter:drop-shadow(0 0 6px rgba(249,115,98,.7))}
.uhr-zeiger .hof{fill:rgba(249,115,98,.22);transform-box:fill-box;transform-origin:center;animation:uhr-hof 2.6s ease-in-out infinite}
@keyframes uhr-hof{0%,100%{transform:scale(.7);opacity:.9}50%{transform:scale(1.25);opacity:.25}}
.uhr-mitte{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:3px;pointer-events:none}
.uhr-k{font-size:clamp(10.5px,1vw,12px);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.uhr-zeit{font-size:clamp(30px,3.4vw,44px);font-weight:600;letter-spacing:-.04em;line-height:1.05;font-variant-numeric:tabular-nums;margin-bottom:8px;
     background:var(--verlauf);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.uhr-naechst{font-size:clamp(12px,1.1vw,13.5px);line-height:1.35;color:var(--mut);max-width:13em}
.uhr-naechst span{white-space:nowrap}
.uhr-naechst b{display:block;font-weight:600;color:var(--ink);font-size:1.08em}
.ablauf{border-radius:var(--rund);background:var(--bg2);border:1px solid var(--line);box-shadow:var(--schatten);overflow:hidden}
.ablauf li{display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:4px 18px;align-items:start;
           padding:18px 22px;border-top:1px solid var(--line);transition:background .3s}
.ablauf li:first-child{border-top:0}
.ablauf li:hover,.ablauf li.naechster{background:color-mix(in srgb,var(--accent) 4%,transparent)}
.ablauf .zeit{grid-row:span 2;font-size:24px;font-weight:600;letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}
.ablauf .zeit small{display:block;font-size:12px;font-weight:500;letter-spacing:0;color:var(--soft);margin-top:6px}
.ablauf h3{display:flex;align-items:center;gap:9px;font-size:17px;letter-spacing:-.025em;font-weight:600;line-height:1.3}
.ablauf h3 a{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .4s var(--ease)}
.ablauf h3 a:hover{background-size:100% 1px}
.ablauf p{grid-column:2;font-size:14.5px;line-height:1.5;color:var(--mut)}
.ablauf .zustand{grid-column:3;grid-row:1;justify-self:end;display:inline-flex;align-items:center;gap:8px;padding:5px 11px;border-radius:999px;background:var(--bg3);
                 font-size:12px;font-weight:500;color:var(--soft);white-space:nowrap}
.lauf-murmel{flex:none;width:18px;height:18px;border-radius:50%;background:center/contain no-repeat}
.lauf-murmel.lm-blau{background-image:url(murmel-blau.webp)}
.lauf-murmel.lm-violett{background-image:url(murmel-violett.webp)}
.lauf-murmel.lm-koralle{background-image:url(murmel-koralle.webp)}
.lauf-murmel.lm-gruen{background-image:url(murmel-gruen.webp)}
.ablauf li[data-z="ok"] .zustand{color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,transparent)}
.ablauf li[data-z="leer"] .punkt{background:var(--line2);box-shadow:none}
.ablauf li[data-z="fehler"] .zustand{color:var(--tally);background:color-mix(in srgb,var(--tally) 10%,transparent)}
.ablauf li[data-z="fehler"] .punkt{background:var(--tally)}
@media (max-width:1000px){.tag{grid-template-columns:1fr}.uhr{width:min(100%,400px);justify-self:center}}
@media (max-width:560px){.ablauf li{grid-template-columns:70px minmax(0,1fr);padding:16px}
  .ablauf .zeit{grid-row:span 3;font-size:20px}.ablauf .zustand{grid-column:2;grid-row:auto;justify-self:start}}
@media (prefers-reduced-motion:reduce){.uhr-zeiger,.uhr-lauf{transition:none}.uhr-zeiger .hof{animation:none}}

/* ---------- Werkbank ---------- */
.werkbank{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(18px,2.4vw,32px);align-items:start}
.werkbank .kc{position:sticky;top:96px}
.geraete{display:grid;grid-template-columns:1fr;gap:14px}
.geraet{display:grid;grid-template-columns:210px 1fr;align-items:center;gap:6px;padding:8px;border:1px solid var(--line);border-radius:var(--rund);
        text-decoration:none;background:var(--bg2);box-shadow:var(--schatten);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.geraet:hover,.geraet:focus-visible{transform:translateY(-3px);box-shadow:var(--schatten-gross)}
.geraet img{width:100%;height:100%;aspect-ratio:16/10;object-fit:cover;border-radius:14px}
.geraet .txt{padding:10px 16px;display:flex;flex-direction:column;gap:5px}
.geraet .umd{color:var(--accent-ink)}
.geraet .titel{font-size:19px;letter-spacing:-.025em;font-weight:600}
.geraet .satz{font-size:14.5px;line-height:1.5;color:var(--mut)}
@media (max-width:1000px){.werkbank{grid-template-columns:1fr}.werkbank .kc{position:static}}
@media (max-width:560px){.geraet{grid-template-columns:1fr}}

/* ---------- Werdegang als Zeitleiste ---------- */
.werdegang-raster{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.kamera{margin:0;position:sticky;top:96px}
.portrait{position:relative;display:block;aspect-ratio:4/5;border-radius:calc(var(--rund) + 8px);overflow:hidden;box-shadow:var(--schatten-gross)}
.portrait img{width:100%;height:100%;object-fit:cover}
.portrait::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.kamera::before{content:"";position:absolute;inset:8% -8% -6% 8%;z-index:-1;border-radius:40px;background:var(--verlauf);filter:blur(48px);opacity:.28}
.kamera{isolation:isolate}
.rundown{position:relative;padding-left:30px}
.rundown::before{content:"";position:absolute;left:6px;top:10px;bottom:10px;width:2px;border-radius:2px;
        background:linear-gradient(180deg,#3B6CF6,#8B5CF6 55%,color-mix(in srgb,#F97362 40%,transparent))}
.rundown li{position:relative;display:grid;grid-template-columns:120px minmax(0,1fr);gap:4px 22px;padding:0 0 30px}
.rundown li::before{content:"";position:absolute;left:-30px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--bg2);
        border:3px solid var(--accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 12%,transparent)}
.rundown .jahr{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--accent-ink);font-variant-numeric:tabular-nums;padding-top:2px;grid-row:span 2}
.rundown h3{font-size:19px;letter-spacing:-.025em;font-weight:600;line-height:1.3}
.rundown p{font-size:15.5px;line-height:1.6;color:var(--mut)}
.rundown li.kuenftig::before{border-style:dashed;border-color:var(--soft);box-shadow:none}
.rundown li.kuenftig .jahr{color:var(--soft)}
@media (max-width:860px){.werdegang-raster{grid-template-columns:1fr}.kamera{position:relative;top:0;max-width:300px}}
@media (max-width:560px){.rundown li{grid-template-columns:1fr}.rundown .jahr{grid-row:auto}}

/* ---------- Notizen (Teaser aus site/notizen/build.cjs) ---------- */
.ntz-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ntz-card{display:flex;flex-direction:column;gap:12px;padding:8px 8px 16px;border-radius:var(--rund);text-decoration:none;color:var(--ink);
          background:var(--bg2);border:1px solid var(--line);box-shadow:var(--schatten);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.ntz-card:hover,.ntz-card:focus-visible{transform:translateY(-4px);box-shadow:var(--schatten-gross)}
.ntz-cov{display:block;border-radius:14px;overflow:hidden}
.ntz-kat{font-size:12.5px;font-weight:500;color:var(--accent-ink);padding:0 8px}
.ntz-titel{font-size:18px;line-height:1.3;letter-spacing:-.025em;font-weight:600;padding:0 8px}
@media (max-width:900px){.ntz-grid{grid-template-columns:1fr}}

/* ---------- Verweise ---------- */
.weiter-link{display:inline-flex;align-items:center;gap:10px;margin-top:28px;font-size:15.5px;font-weight:500;color:var(--accent-ink);text-decoration:none}
.weiter-link i{font-style:normal;transition:transform .35s var(--ease)}
.weiter-link:hover i{transform:translateX(4px)}

/* ---------- Abschluss ---------- */
.schluss{margin-top:clamp(90px,11vw,160px);margin-bottom:clamp(56px,7vw,96px);padding-top:0;padding-bottom:0}
.schluss > *{position:relative}
.schluss > .murmel{position:absolute}
.schluss{position:relative;isolation:isolate}
.schluss::before{content:"";position:absolute;inset:0 clamp(16px,3vw,36px);z-index:-1;border-radius:calc(var(--rund) + 12px);
        background:radial-gradient(60% 90% at 0% 0%,color-mix(in srgb,#3B6CF6 22%,transparent),transparent 70%),
                   radial-gradient(50% 80% at 100% 100%,color-mix(in srgb,#F97362 18%,transparent),transparent 70%),
                   radial-gradient(40% 60% at 70% 10%,color-mix(in srgb,#8B5CF6 16%,transparent),transparent 70%),var(--bg2);
        border:1px solid var(--line);box-shadow:var(--schatten)}
.schluss h2,.schluss p,.schluss .profile{margin-left:clamp(24px,5vw,72px);margin-right:clamp(24px,5vw,72px)}
.schluss h2{padding-top:clamp(48px,7vw,96px);font-size:clamp(40px,6vw,92px);line-height:.96;letter-spacing:-.058em;font-weight:600;max-width:13ch}
.schluss p{font-size:17.5px;line-height:1.62;color:var(--mut);max-width:40em;margin-top:22px}
.schluss p a{color:var(--accent-ink);text-decoration:none;border-bottom:1px solid var(--link-line)}
.profile{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;padding-bottom:clamp(48px,7vw,96px)}
.profile a{display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 20px;border-radius:999px;font-size:15px;font-weight:500;
           color:var(--ink);text-decoration:none;background:var(--glas);border:1px solid var(--line2);
           backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.profile a:hover,.profile a:focus-visible{transform:translateY(-2px);box-shadow:var(--schatten)}

/* ---------- Auftritt beim Scrollen (nur unterhalb des ersten Bildschirms) ---------- */
.js .auf > *{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .auf.da > *{opacity:1;transform:none}
.js .auf.da > :nth-child(2){transition-delay:.06s}
.js .auf.da > :nth-child(3){transition-delay:.12s}
.js .auf.da > :nth-child(4){transition-delay:.18s}
.js .auf.da > :nth-child(5){transition-delay:.24s}
.js .auf.da > :nth-child(6){transition-delay:.3s}
.js .auf.da > :nth-child(n+7){transition-delay:.36s}
/* Karten heben sich nach dem Auftritt wieder ohne Verzögerung */
.js .auf.da > .kanal-feld:hover{transition-delay:0s}

/* ---------- Schmale Bildschirme ---------- */
@media (max-width:1040px){
  .held{grid-template-columns:1fr;align-items:start}
  .held h1{font-size:clamp(56px,13vw,104px)}
  .aurora i:nth-child(1){width:90vw;height:90vw}
  .aurora i:nth-child(2){width:70vw;height:70vw}
}
@media (max-width:560px){
  body{font-size:16px}
  .held h1{font-size:15.5vw}
  .held h1 .zweit{font-size:.46em}
  .knopf{height:48px;padding:0 20px}
}
@media (prefers-reduced-motion:reduce){
  .aurora i,.status .punkt,.held-text > *,.mischer,.stage .ebene.rein,.stage-text.neu > div{animation:none}
  .js .auf > *{opacity:1;transform:none;transition:none}
  .kanal-feld,.geraet,.ntz-card,.knopf,.profile a,.weiter-link i{transition:none}
}

/* ---------- KI-Check in der Werkbank (Gestaltung aus ki-check.css, hier angepasst) ---------- */
.werkbank .kc{border-radius:var(--rund);border-color:var(--line);box-shadow:var(--schatten-gross)}
.werkbank .kc-bar span{margin-left:0;font-size:12px}
.werkbank .kc-titel{font-size:clamp(22px,2.2vw,28px)}

/* ---------- Murmeln im Kopfteil und im Abschluss (Orte; Zeichnung: murmeln.js) ---------- */
.held-text{position:relative}
.m-name{width:56px;right:6%;top:2px}
.m-perle{width:156px;top:-66px;right:-50px}
.m-violett{width:84px;left:-42px;top:34%}
.m-blau{width:40px;left:-86px;top:24%}
.m-gruen{width:30px;right:-18px;bottom:-12px}
.schluss .m-schluss1{width:clamp(120px,17vw,240px);right:7%;top:50%;transform:translateY(-50%)}
.schluss .m-schluss2{width:clamp(44px,5vw,72px);right:27%;top:16%}
.schluss .m-schluss3{width:clamp(34px,3.4vw,50px);right:5%;bottom:12%}
.klappe .nr i[data-murmel]{width:20px;height:20px}
.klappe .nr:has(i)::before{display:none}
.klappe .nr:has(i){padding-left:5px}
@media (max-width:1040px){
  .m-blau{display:none}
  .m-perle{width:84px;top:-28px;right:-10px}
  .m-violett{width:52px;left:-14px;top:12%}
  .m-name{width:44px;right:2%}
}
@media (max-width:760px){
  .schluss .m-schluss1{width:96px;top:-34px;right:24px;transform:none}
  .schluss .m-schluss2,.schluss .m-schluss3{display:none}
}