/* Ducks.team – Seitenlayouts (Startseite, Status, 404). Nur Tokens und Komponenten aus ducks.css. */
@layer pages {

  /* ---- Teich: fester Hintergrund (z-bg, nie negativ) */
  .pond{position:fixed;inset:0;z-index:var(--z-bg);pointer-events:none;
    background:
      radial-gradient(50% 38% at 72% 12%,color-mix(in srgb,var(--moon-200) 8%,transparent),transparent 70%),
      radial-gradient(60% 50% at 15% 85%,var(--tint-reed),transparent 70%),
      linear-gradient(180deg,var(--night-900) 0%,var(--night-950) 55%)}
  .pond canvas{position:absolute;inset:0;width:100%;height:100%}

  /* ---- Abschnittskopf: Nummer + Label, Titel, Einleitung; Meta rechts */
  .eyebrow .num{font-variant-numeric:tabular-nums;color:var(--text-faint)}
  .eyebrow .num::after{content:"—";margin-left:var(--space-2);color:var(--text-faint)}
  .section-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--space-5);margin-bottom:clamp(var(--space-8),4vw,var(--space-14))}
  .section-head__title{margin-top:var(--space-4)}
  .section-head__sub{margin-top:var(--space-4);max-width:56ch;color:var(--text-muted)}
  .section-head__meta{font:var(--text-data);color:var(--text-faint);text-align:right}
  @media (max-width:640px){.section-head{grid-template-columns:1fr}.section-head__meta{text-align:left}}

  /* ================================================================ Hero
     Schriftzug versetzt in zwei Zeilen, darunter die Wasserlinie mit Spiegelung; die Ente sitzt darauf.
     Darunter Einleitung + Aktionen links, Live-Karte rechts, Terminal-Zeile ganz unten. */
  .hero{--water-h:clamp(36px,6vw,84px);--indent:clamp(0px,12vw,180px);position:relative;min-height:auto;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--space-10);padding-block:calc(var(--header-h) + var(--space-18)) var(--space-6)}
  @media (orientation:landscape) and (min-height:560px){.hero{min-height:100svh}}
  .hero__wrap{display:grid}
  .hero__stage{position:relative;margin-top:var(--space-6)}
  .hero__title .line{display:block;overflow:hidden;padding-bottom:.04em}
  .hero__title .line:nth-child(2){padding-left:var(--indent)}
  .hero__title .intro-line{display:inline-block}
  .hero__title .dot{color:var(--accent)}
  .hero__water{position:relative;height:var(--water-h);overflow:hidden;padding-left:var(--indent);pointer-events:none}
  .hero__water::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,var(--line-strong),var(--info) 60%,transparent);opacity:.8;transform-origin:left}
  /* Spiegelung: an der Grundlinie gespiegelt (Ursprung oben, um --base nach unten geschoben), läuft nach unten aus. */
  .hero__reflection{--base:.63em;display:block;font:var(--text-display-hero);letter-spacing:var(--tracking-display-hero);line-height:1;transform-origin:0 0;transform:translateY(var(--base)) scaleY(-1);color:var(--reed-400);opacity:.18;
    -webkit-mask-image:linear-gradient(0deg,transparent 30%,#000 85%);mask-image:linear-gradient(0deg,transparent 30%,#000 85%)}
  .hero-duck{position:absolute;right:clamp(var(--space-2),6vw,90px);bottom:calc(var(--water-h) - .2 * clamp(72px,11vw,150px));width:clamp(72px,11vw,150px);cursor:pointer;animation:bob var(--dur-ambient) ease-in-out infinite;-webkit-tap-highlight-color:transparent;border-radius:var(--radius-md)}
  .hero-duck img{width:100%;filter:drop-shadow(0 16px 30px #00000073);transition:transform var(--dur-base) var(--ease-spring)}
  .hero-duck:hover img{transform:rotate(-6deg) translateY(-4px)}
  .hero-duck:active img{transform:scale(.9)}
  /* Wellenringe unter der Ente: laufen bei jedem Anstupsen einmal aus (Klasse vom Script). */
  .hero-duck__rings{position:absolute;left:5%;right:5%;bottom:-6%;aspect-ratio:1/.36;pointer-events:none}
  .hero-duck__rings::before,.hero-duck__rings::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--reed-400);opacity:0}
  .hero-duck.is-poked .hero-duck__rings::before{animation:ring var(--dur-enter) var(--ease-surface)}
  .hero-duck.is-poked .hero-duck__rings::after{animation:ring var(--dur-enter) var(--ease-surface) 120ms}

  .hero__row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--layout-gap);align-items:end;margin-top:var(--space-4)}
  .hero__copy{grid-column:1/span 7}
  .hero__side{grid-column:8/-1;display:grid;gap:var(--space-3)}
  .hero__cta{margin-top:var(--space-6)}
  .btn .icon--trail-down{transition:transform var(--dur-base) var(--ease-surface)}
  .btn:hover .icon--trail-down{transform:translateY(3px)}
  .hero__foot{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--border);font:var(--text-caption);font-family:var(--font-mono);letter-spacing:.06em;color:var(--text-faint)}
  .hero__scroll{display:inline-flex;align-items:center;gap:var(--space-2);text-transform:uppercase;letter-spacing:.14em}
  .hero__scroll span{width:28px;height:1px;background:var(--text-faint)}
  /* Tablet: Text und Live-Karte bleiben nebeneinander; erst auf dem Handy wird gestapelt. */
  @media (max-width:900px){
    .hero{padding-top:calc(var(--header-h) + var(--space-14))}
    .hero__copy{grid-column:1/span 7}
    .hero__side{grid-column:8/-1}
    .hero__hint{display:none}
    .hero__cta .btn{--px:var(--space-5)}
  }
  @media (max-width:700px){.hero__copy,.hero__side{grid-column:1/-1}}
  /* Handy: Ente kleiner und rechts neben dem Schriftzug, keine Einrückung (sonst stößt sie an das „m“). */
  @media (max-width:480px){
    .hero{--indent:0px;--water-h:44px;gap:var(--space-8)}
    .hero-duck{width:64px;right:0;bottom:calc(var(--water-h) - 12px)}
    .hero__cta .btn{flex:1 1 auto}
  }
  /* Querformat auf dem Handy: niedriger Schriftzug, damit Text und Aktionen ohne Scrollen sichtbar sind. */
  @media (orientation:landscape) and (max-height:500px){
    .hero{padding-top:calc(var(--header-h) + var(--space-8))}
    .hero__title,.hero__reflection{font-size:clamp(56px,22vh,120px)}
    .hero{--water-h:40px}
    .hero-duck{width:72px}
  }
  @media (max-width:520px){.hero__foot>span:first-child{display:none}.hero__foot{justify-content:center}}

  /* Auftakt: einmal beim Laden, nur CSS (dur-intro). Schriftzug steigt aus der Wasserlinie, Linie zieht sich auf,
     Ente fällt ins Wasser, der Rest taucht auf. Ohne Bewegungswunsch: alles sofort da. */
  @media (prefers-reduced-motion:no-preference){
    .hero__title .intro-line{animation:line-up var(--dur-intro) var(--ease-surface) both}
    .hero__title .intro-line--2{animation-delay:110ms}
    .hero__water::before{animation:grow-x var(--dur-intro) var(--ease-surface) 200ms both;transform:scaleX(0)}
    .hero__reflection{animation:fade-in var(--dur-intro) var(--ease-surface) 450ms both}
    .hero-duck img{animation:duck-drop var(--dur-enter) var(--ease-spring) 520ms backwards}
    .intro{animation:surface-in var(--dur-enter) var(--ease-surface) both}
    .intro--1{animation-delay:60ms}.intro--3{animation-delay:380ms}.intro--4{animation-delay:480ms}.intro--5{animation-delay:620ms}
    /* Beim Wegscrollen treibt der Schriftzug langsamer nach oben und wird blasser. */
    @supports (animation-timeline:scroll()){
      .hero__stage{animation:hero-drift linear both;animation-timeline:scroll(root);animation-range:0 100vh}
    }
  }

  /* Live-Karte im Hero */
  .live-chip{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4);border-radius:var(--radius-lg);border:1px solid var(--border);background:var(--surface);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow-raised);min-width:0;transition:border-color var(--dur-base),transform var(--dur-base) var(--ease-surface)}
  .live-chip:hover{border-color:var(--border-strong);transform:translateY(-2px)}
  .live-chip .avatar,.live-chip .sk-avatar{width:52px;height:52px}
  .live-chip__text{min-width:0;flex:1}
  .live-chip__top,.live-chip__main{display:block}
  .live-chip__top{font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-faint)}
  .live-chip__main{margin-top:var(--space-1);font:var(--text-title);font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .live-chip__go{color:var(--text-faint);transition:transform var(--dur-base) var(--ease-surface),color var(--dur-base)}
  .live-chip:hover .live-chip__go{color:var(--accent);transform:translateY(3px)}
  .hero-status,.footer-status{display:inline-flex;align-items:center;gap:var(--space-2);justify-self:start;min-height:40px;padding:0 var(--space-4);border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--surface-sunk);font:var(--text-data);color:var(--text-muted);transition:border-color var(--dur-base),color var(--dur-base)}
  .hero-status:hover,.footer-status:hover{border-color:var(--border-strong);color:var(--text)}

  /* ---- Live */
  .live-grid{align-items:stretch}
  .live-stats{display:flex;flex-direction:column}
  .live-stats .kpis{flex:1}
  .kpi dd{display:grid;gap:var(--space-2)}
  @media (min-width:600px) and (max-width:900px){.live-stats .kpis{grid-template-columns:repeat(4,minmax(0,1fr))}.live-stats .kpi{min-height:112px}}

  /* ================================================================ Projekte */
  .projects{row-gap:var(--layout-gap)}
  @media (min-width:640px) and (max-width:900px){.projects>.span-6{grid-column:span 6}.projects .project__name{font-size:24px}}
  @media (max-width:420px){.mock-profile__hud{display:none}.mock-profile{padding:var(--space-5)}}
  .project__media--art{display:grid;place-items:center;
    background:
      radial-gradient(60% 70% at 70% 0%,color-mix(in srgb,var(--moon-200) 9%,transparent),transparent 70%),
      radial-gradient(70% 60% at 10% 100%,var(--tint-reed),transparent 70%),
      repeating-linear-gradient(0deg,transparent 0 31px,var(--line) 31px 32px),
      var(--night-900)}
  .project__media--art::after{display:none}
  /* Profil-Vorschau über dem echten Poster */
  .mock-profile{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;gap:var(--space-3);padding:clamp(var(--space-6),5vw,var(--space-14))}
  .mock-profile__name{font:800 clamp(56px,9vw,128px)/.85 var(--font-display);letter-spacing:-.05em;background:linear-gradient(180deg,var(--ink-50) 35%,color-mix(in srgb,var(--ink-50) 55%,transparent));-webkit-background-clip:text;background-clip:text;color:transparent;transition:transform var(--dur-enter) var(--ease-surface)}
  .project:hover .mock-profile__name{transform:translateX(6px)}
  .mock-profile__path{font:var(--text-data);font-weight:600;color:var(--accent)}
  .mock-profile__path::after{content:"_"}
  .mock-profile__hud{position:absolute;right:var(--space-5);bottom:var(--space-5);display:flex;gap:var(--space-2)}
  .mock-profile__hud>span{display:inline-flex;align-items:center;gap:var(--space-2);height:32px;padding:0 var(--space-3);border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--surface);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font:var(--text-caption);font-family:var(--font-mono);color:var(--text-muted)}
  /* Upload-Vorschau */
  .mock-upload{display:grid;gap:var(--space-3);width:min(78%,340px)}
  .mock-upload__zone{display:grid;place-items:center;gap:var(--space-2);height:128px;border-radius:var(--radius-md);border:1.5px dashed var(--border-strong);background:var(--surface-sunk);font:var(--text-caption);font-family:var(--font-mono);color:var(--text-faint);transition:border-color var(--dur-base),background-color var(--dur-base)}
  .mock-upload__zone .icon{color:var(--text-muted);transition:transform var(--dur-slow) var(--ease-spring),color var(--dur-base)}
  .project:hover .mock-upload__zone{border-color:var(--accent);background:var(--tint-bill)}
  .project:hover .mock-upload__zone .icon{transform:translateY(-6px);color:var(--accent)}
  .mock-upload__file{display:flex;align-items:center;gap:var(--space-3);height:44px;padding:0 var(--space-3);border-radius:var(--radius-md);border:1px solid var(--border);background:var(--surface);transition:transform var(--dur-slow) var(--ease-surface)}
  .mock-upload__file span:first-child{width:22px;height:22px;border-radius:var(--radius-xs);background:var(--night-600)}
  .mock-upload__file span:last-child{height:6px;width:55%;border-radius:var(--radius-pill);background:var(--night-700)}
  .mock-upload__file+.mock-upload__file span:last-child{width:38%}
  .project:hover .mock-upload__file{transform:translateX(6px)}
  .project:hover .mock-upload__file+.mock-upload__file{transform:translateX(12px)}
  /* Live-Vorschau (echte Daten aus Discord) */
  .mock-live{display:grid;justify-items:center;gap:var(--space-4);width:min(82%,340px)}
  .mock-live__card{display:flex;align-items:center;gap:var(--space-4);width:100%;padding:var(--space-4);border-radius:var(--radius-lg);border:1px solid var(--border-strong);background:var(--surface);box-shadow:var(--shadow-panel);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:transform var(--dur-slow) var(--ease-surface)}
  .project:hover .mock-live__card{transform:translateY(-6px)}
  .mock-live__card .avatar{width:56px;height:56px}
  .mock-live__text{display:grid;gap:var(--space-1);min-width:0}
  .mock-live__text b{font:var(--text-display-3);letter-spacing:var(--tracking-display-3);font-size:24px}
  .mock-live__text span{font:var(--text-data);color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mock-live__stream{display:inline-flex;align-items:center;gap:var(--space-2);height:30px;padding:0 var(--space-3);border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--surface-sunk);font:var(--text-caption);font-family:var(--font-mono);color:var(--text-muted)}

  /* ================================================================ Fakten */
  .facts{padding-block:var(--space-6)}
  .facts__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
  .fact{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:var(--space-3);padding:clamp(var(--space-6),4vw,var(--space-10)) var(--space-5)}
  .fact+.fact{border-left:1px solid var(--border)}
  .fact dt{font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-faint)}
  .fact dd{display:flex;align-items:baseline;gap:var(--space-2)}
  .fact__num{font:700 clamp(48px,6.5vw,84px)/.9 var(--font-mono);letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--text)}
  .fact__unit{font:var(--text-data);color:var(--info)}
  @media (max-width:900px){
    .facts__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .fact:nth-child(3){border-left:0}
    .fact:nth-child(n+3){border-top:1px solid var(--border)}
  }

  /* ================================================================ Kontakt */
  .contact{align-items:center}
  @media (min-width:600px) and (max-width:900px){.contact .link-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--layout-gap)}}
  .contact__title em{font-style:normal;color:var(--accent)}

  /* ================================================================ Footer */
  .footer{padding-block:var(--space-10) calc(var(--space-6) + env(safe-area-inset-bottom,0px));overflow:hidden}
  .footer__grid{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:var(--space-10) var(--layout-gap);padding-top:var(--space-14)}
  .footer__brand{display:grid;gap:var(--space-4);justify-items:start;align-content:start}
  .footer__brand p{max-width:34ch;color:var(--text-muted)}
  .footer__col h2{margin-bottom:var(--space-4);font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-faint)}
  .footer__col ul{display:grid;gap:var(--space-1)}
  @media (pointer:coarse){.footer .footer__col a:not(.icon-btn){padding-block:var(--space-3)}.hero-status,.footer-status{min-height:44px}}
  .footer__col a:not(.icon-btn){display:inline-block;min-width:44px;padding-block:var(--space-1);color:var(--text-muted);background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:color var(--dur-base),background-size var(--dur-slow) var(--ease-surface)}
  .footer__col a:not(.icon-btn):hover{color:var(--text);background-size:100% 1px}
  .footer__social{grid-template-columns:repeat(3,44px)}
  .footer__social a{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--surface-raised);color:var(--text-muted);transition:color var(--dur-base),border-color var(--dur-base),transform var(--dur-base) var(--ease-spring)}
  .footer__social a:hover{color:var(--text);border-color:var(--border-strong);transform:translateY(-2px)}
  .footer__mark{margin-top:var(--space-14);font:800 clamp(52px,16vw,220px)/.8 var(--font-display);letter-spacing:-.06em;white-space:nowrap;text-align:center;color:transparent;-webkit-text-stroke:1px var(--line-strong);user-select:none;
    -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
  .footer__mark span{color:var(--accent);-webkit-text-stroke:0}
  .footer__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3) var(--space-6);padding-top:var(--space-5);border-top:1px solid var(--border);font:var(--text-data);color:var(--text-faint)}
  .footer__bar a:hover{color:var(--text)}
  .footer .to-top{transform:rotate(-45deg);transition:transform var(--dur-base) var(--ease-surface)}
  .footer [data-to-top]:hover .to-top{transform:rotate(-45deg) translate(2px,-2px)}
  .egg{min-height:44px;padding:0 var(--space-3);border-radius:var(--radius-sm);color:var(--text-faint);font:inherit;transition:color var(--dur-base)}
  .egg:hover{color:var(--accent)}
  @media (max-width:900px){.footer__grid{grid-template-columns:repeat(3,minmax(0,1fr))}.footer__brand{grid-column:1/-1}}
  @media (max-width:560px){.footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.footer__col:last-child{grid-column:1/-1}.footer__social{grid-template-columns:repeat(5,44px)}}

  /* ================================================================ Statusseite
     Kopf: Titel links, Gesamtzustand rechts (mit Countdown bis zur nächsten Aktualisierung).
     Darunter Kennzahlen und je Dienst eine Karte mit 24-h- und 7-Tage-Balken. */
  .status-page{padding-block:calc(var(--header-h) + var(--space-18)) var(--space-18)}
  .status-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:var(--space-8) var(--layout-gap);align-items:end;margin-bottom:var(--space-8)}
  .status-banner{display:grid;gap:var(--space-4);padding:var(--space-6);border-radius:var(--radius-lg);border:1px solid var(--border-strong);background:var(--surface);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:var(--shadow-panel);transition:border-color var(--dur-slow),background-color var(--dur-slow)}
  .status-banner.up{border-color:color-mix(in srgb,var(--status-online) 35%,transparent);background:linear-gradient(180deg,var(--tint-online),transparent),var(--surface)}
  .status-banner.down{border-color:color-mix(in srgb,var(--status-dnd) 45%,transparent);background:linear-gradient(180deg,var(--tint-dnd),transparent),var(--surface)}
  .status-banner__state{display:flex;align-items:center;gap:var(--space-3);font:var(--text-display-3);letter-spacing:var(--tracking-display-3)}
  .status-banner__state .pulse{width:12px;height:12px}
  #checked{white-space:nowrap}
  .status-banner__text{font:var(--text-body-s);color:var(--text-muted)}
  .status-banner__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3);padding-top:var(--space-4);border-top:1px solid var(--border);font:var(--text-data);color:var(--text-faint)}
  /* Countdown-Ring bis zur nächsten Aktualisierung; Klick lädt sofort neu. */
  .refresh{display:inline-flex;align-items:center;white-space:nowrap;gap:var(--space-2);min-height:40px;padding:0 var(--space-3) 0 var(--space-2);border-radius:var(--radius-pill);border:1px solid var(--border-strong);background:var(--surface-raised);font:var(--text-data);color:var(--text-muted);transition:color var(--dur-base),border-color var(--dur-base)}
  .refresh:hover{color:var(--text);border-color:var(--ink-500)}
  .refresh__ring{width:24px;height:24px;border-radius:50%;background:conic-gradient(var(--info) calc(var(--p,0) * 1turn),var(--night-600) 0);-webkit-mask:radial-gradient(circle,transparent 7px,#000 7.5px);mask:radial-gradient(circle,transparent 7px,#000 7.5px)}
  .refresh[aria-busy="true"] .refresh__ring{animation:spin 900ms linear infinite;background:conic-gradient(var(--info) .3turn,var(--night-600) 0)}
  .status-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3);margin-bottom:var(--space-10)}
  .status-kpis .kpi{background:var(--surface);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  .status-list{display:grid;gap:var(--space-5)}
  .status-card{display:grid;gap:var(--space-6)}
  .status-card__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:var(--space-3) var(--space-5)}
  .status-card__desc{margin-top:var(--space-1);font:var(--text-body-s);color:var(--text-muted)}
  .status-card__now{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-2)}
  .status-card__detail{font:var(--text-data);color:var(--text-faint)}
  .status-card__ranges{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--space-6) var(--space-8)}
  /* Platzhalter so hoch wie die echten Karten (gemessen), damit beim Laden nichts springt. */
  .status-card--skeleton{min-height:289px;align-content:start}
  .status-card--skeleton .sk-title{width:40%;height:30px}
  .status-card--skeleton .sk-bars{height:34px}
  .status-card--skeleton .sk-line{width:60%;height:14px}
  @media (max-width:900px){.status-card--skeleton{min-height:387px}}
  @media (max-width:560px){.status-card--skeleton{min-height:471px}}
  .range-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--space-2);font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-faint)}
  .range-head strong{font:var(--text-title);letter-spacing:0;text-transform:none;color:var(--text)}
  .range-foot{display:flex;justify-content:space-between;gap:var(--space-2);margin-top:var(--space-2);font:var(--text-caption);font-family:var(--font-mono);color:var(--text-faint)}
  .bars span{transition:transform var(--dur-fast) var(--ease-surface),filter var(--dur-fast);transform-origin:bottom}
  .bars span:hover{transform:scaleY(1.12);filter:brightness(1.25)}
  @media (prefers-reduced-motion:no-preference){.is-first .bars span{animation:bar-in var(--dur-enter) var(--ease-surface) both;animation-delay:calc(var(--i,0) * 14ms)}}
  .incidents h3{margin-bottom:var(--space-2);font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-faint)}
  .incidents ul{display:grid;gap:var(--space-2)}
  .incidents li{display:flex;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--tint-dnd);border:1px solid color-mix(in srgb,var(--status-dnd) 25%,transparent);font:var(--text-body-s)}
  .dim{font:var(--text-body-s);color:var(--text-faint)}
  @media (max-width:900px){.status-hero{grid-template-columns:minmax(0,1fr) minmax(0,340px)}.status-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.status-card__ranges{grid-template-columns:1fr}}
  @media (max-width:760px){.status-hero{grid-template-columns:1fr}}
  @media (max-width:400px){.status-kpis{grid-template-columns:1fr}}
  @media (max-width:560px){.status-card__now{align-items:flex-start}.range-foot span:nth-child(2){display:none}}

  /* ================================================================ 404 */
  .lost{min-height:100svh;display:grid;place-items:center;text-align:center;padding:var(--space-24) var(--gutter) var(--space-14)}
  .lost__code{position:relative;display:inline-flex;align-items:flex-end;font:var(--text-display-hero);font-size:clamp(120px,32vw,300px);letter-spacing:-.07em;color:transparent;-webkit-text-stroke:2px color-mix(in srgb,var(--ink-50) 40%,transparent)}
  .lost__code b{font-weight:inherit;color:var(--accent);-webkit-text-stroke:0}
  .lost__water{display:block;height:1px;margin:0 auto;width:min(520px,80%);background:linear-gradient(90deg,transparent,var(--info),transparent)}
  .lost__text{margin:var(--space-3) auto 0;max-width:42ch;color:var(--text-muted)}
  .lost .cluster{justify-content:center}
  .lost__path{font:var(--text-data);color:var(--text-faint);overflow-wrap:anywhere}
  .lost .brand{position:fixed;left:var(--gutter);top:calc(var(--space-5) + env(safe-area-inset-top,0px))}
  @media (prefers-reduced-motion:no-preference){
    .lost__code{animation:surface-in var(--dur-intro) var(--ease-surface) both}
    .lost__water{animation:grow-x var(--dur-intro) var(--ease-surface) 200ms both;transform:scaleX(0)}
  }
}

@keyframes line-up{from{transform:translateY(102%)}to{transform:none}}
@keyframes fade-in{from{opacity:0}}
@keyframes duck-drop{0%{opacity:0;transform:translateY(-60px) rotate(-10deg)}60%{opacity:1}100%{transform:none}}
@keyframes hero-drift{to{transform:translateY(14vh);opacity:.3}}
@keyframes ring{0%{opacity:.7;transform:scale(.5)}100%{opacity:0;transform:scale(1.6)}}
@keyframes bar-in{from{transform:scaleY(.15);opacity:.3}to{transform:none;opacity:1}}
@keyframes spin{to{transform:rotate(1turn)}}

/* Touch-Geräte: Hover-Bewegungen bleiben nach dem Antippen sonst „hängen“ (z. B. nach Zurück-Navigation).
   Dort reicht die Druck-Rückmeldung (:active); Farben und Links bleiben gleich. */
@layer pages {
  @media (hover:none){
    .project:hover,.live-chip:hover,.mock-live__card,.project:hover .mock-upload__file,.project:hover .mock-upload__file+.mock-upload__file,.project:hover .mock-profile__name{transform:none}
    .project:hover .project__media>img{transform:none}
    .project:hover .project__go{transform:none}
    .link-list a:hover{padding-inline:var(--space-2);background:none}
    .project:active{transform:scale(.99)}
    .link-list a:active{background:var(--tint-bill)}
  }
}