/* ═══════════════════════════════════════════════════════════════
   JarvisOS — Gestaltungssystem, gebaut am 22.09.2026 18:59
   GEBAUTE DATEI — nicht bearbeiten. Quelle: design/  ·  Bau: ./bau.sh
   ═══════════════════════════════════════════════════════════ */

/* ── design/00-lagen.css ──────────────────────────────────────────────── */
/* ══ 00 · Lagen ═══════════════════════════════════════════════════════
   Die Reihenfolge der Kaskade wird hier einmal festgelegt und gilt danach
   unabhaengig davon, wie spezifisch ein einzelner Waehler ist.

     token   Nur Werte, keine Regeln.
     grund   Reset, Koerper, Hintergrund.
     form    Die zwei Grundformen: hervorstehend und eingelassen.
     teil    Bauteile — Knopf, Tafel, Kachel, Tabelle, Balken.
     bau     Geruest: Huelle, Buehne, Band, Flaeche.
     schirm  Schirmgroessen. Steht zuletzt und gewinnt deshalb IMMER,
             ohne ein einziges !important.
   ────────────────────────────────────────────────────────────────── */
@layer token, grund, form, teil, bau, schirm;

/* ── design/01-farbe.css ──────────────────────────────────────────────── */
/* ══ 01 · Farbe ═══════════════════════════════════════════════════════
   EINE Zeile je Farbrolle — nicht drei. light-dark() traegt den hellen und
   den dunklen Fall nebeneinander; welcher gilt, entscheidet color-scheme.
   Damit faellt die dreifache Pflege (hell / Systemwahl / data-theme) weg.

   🪤 Die vier Farben, die das Skript fuer die Leinwand ausliest, sind mit
      @property angemeldet. Ohne Anmeldung liefert getComputedStyle den
      rohen Text "light-dark(#…, #…)" zurueck statt einer Farbe — die
      Wellen blieben unsichtbar.
   ────────────────────────────────────────────────────────────────── */

@property --welle-hell   { syntax:'<color>'; inherits:true; initial-value:#f7f9fe }
@property --welle-dunkel { syntax:'<color>'; inherits:true; initial-value:#dde4f2 }
@property --punkt        { syntax:'<color>'; inherits:true; initial-value:#d3dcef }
@property --punkt-leise  { syntax:'<color>'; inherits:true; initial-value:#e0e6f3 }

@layer token {
  :root{
    color-scheme: light dark;

    /* ── Flaechen, von aussen nach innen ────────────────────────────
       Vier Helligkeitsstufen. Der Rand ist HELL, die Arbeitsflaeche
       dunkler, die Karte darauf wieder heller, das Feld darin am
       tiefsten. Diese Reihenfolge traegt die ganze Tiefenwirkung. */
    --f-grund:    light-dark(#f2f5fb, #171a21);
    --f-flaeche:  light-dark(#dee4f2, #1e222b);
    --f-karte:    light-dark(#e6e9f2, #252a34);
    --f-wanne:    light-dark(#dbe0ec, #1a1e26);

    /* ── Schrift ────────────────────────────────────────────────── */
    --ink:        light-dark(#1e222d, #e5e9f1);
    --ink-2:      light-dark(#6b7284, #9aa1b1);
    --ink-3:      light-dark(#98a0b1, #6d7485);
    --f-linie:    light-dark(#ced4e0, #2e333e);

    /* ── Toene ──────────────────────────────────────────────────── */
    --ton-akzent: light-dark(#7c5cff, #9b84ff);
    --ton-ok:     light-dark(#2eb882, #3fd49a);
    --ton-warn:   light-dark(#d9a441, #f1c460);
    --ton-bad:    light-dark(#e05a5a, #ff8080);

    /* ── Diagramm ───────────────────────────────────────────────── */
    --f-balken:       light-dark(#2b303c, #e5e9f1);
    --f-balken-geist: light-dark(#c5cbd9, #434a58);
    --f-ring-spur:    light-dark(#c8cedc, #434a58);
    --f-ring-fuell:   light-dark(#2b303c, #e5e9f1);

    /* ── Hintergrund ────────────────────────────────────────────────
       Die Wellenfarben liegen dicht am Grund. Weiss auf hellem Grund
       hellte den ganzen Schirm auf, statt eine Welle zu zeigen. */
    --welle-hell:   light-dark(#f7f9fe, #333b4c);
    --welle-dunkel: light-dark(#dde4f2, #1c212b);
    --wave-a: 1;
    --punkt:        light-dark(#d3dcef, rgba(255,255,255,.14));
    --punkt-leise:  light-dark(#e0e6f3, rgba(255,255,255,.07));

    /* ── Licht und Schatten ─────────────────────────────────────────
       Sechs Rollen, aus denen sich in 03-tiefe.css JEDER Schatten des
       Entwurfs zusammensetzt. Das Licht kommt von oben links.

       🔴 Die HELLE Seite ist bewusst zurueckgenommen (Chef 22.09.: "soll
          grundsaetzlich nicht so leuchten"). Sie setzt die Kante ab, sie
          strahlt nicht. Wer sie wieder aufdreht, dreht sie ueberall auf —
          das ist der Sinn dieser vier Zeilen. */
    --sch-tief:        light-dark(rgba(132,144,172,.60), rgba(6,8,11,.76));
    --sch-licht:       light-dark(rgba(255,255,255,.42), rgba(64,71,85,.20));
    --sch-tief-weit:   light-dark(rgba(120,133,163,.58), rgba(4,5,8,.80));
    --sch-licht-weit:  light-dark(rgba(255,255,255,.28), rgba(64,71,85,.16));
    --sch-flach:       light-dark(rgba(126,139,168,.48), rgba(4,5,8,.62));
    --sch-tief-ein:    light-dark(rgba(132,144,172,.55), rgba(6,8,11,.72));
    --sch-licht-ein:   light-dark(rgba(255,255,255,.44), rgba(64,71,85,.18));
    --sch-kante:       light-dark(rgba(255,255,255,.24), rgba(255,255,255,.03));
  }

  /* Der Chef ueberstimmt die Systemwahl — zwei Zeilen statt zweier
     kompletter Farbsaetze. */
  :root[data-theme="light"]{ color-scheme: light }
  :root[data-theme="dark"] { color-scheme: dark  }
}

/* ── design/02-raum.css ──────────────────────────────────────────────── */
/* ══ 02 · Raum ════════════════════════════════════════════════════════
   Eine Leiter statt 22 gewachsener Einzelwerte. Bis 24 px in Zweier-,
   darueber in Vierer-Schritten — fein genug fuer Chips und Tabellenzellen,
   grob genug, dass ein Abstand eine Entscheidung bleibt und kein Zufall.
   ────────────────────────────────────────────────────────────────── */
@layer token {
  :root{
    --r-1:  4px;   --r-2:  6px;   --r-3:  8px;   --r-4: 10px;
    --r-5: 12px;   --r-6: 14px;   --r-7: 16px;   --r-8: 18px;
    --r-9: 20px;   --r-10:24px;   --r-11:28px;   --r-12:32px;

    /* Ecken — drei Groessen, nach Rolle, nicht nach Geschmack:
       Karte, Feld, Pille. */
    --eck-karte: 22px;
    --eck-feld:  16px;
    --eck-pille: 999px;

    /* Feste Masse des Geruests. Sie stehen hier, weil sie zusammen
       gelesen werden muessen: die Flaeche schiebt sich um --ueberlapp
       unter das Band, und --luft-innen ist der Abstand, den der Inhalt
       danach noch zur Bandkante hat. */
    --band-breit:   248px;
    --ueberlapp:     58px;
    --luft-innen:    30px;
    --huelle-breit: 1390px;
    --huelle-hoch:   28px;   /* oben und unten je einmal */

    /* Runde Koerper — drei Groessen, damit ein Knopf ueberall gleich
       gross ist und nicht je Fundstelle neu geschaetzt wird. */
    --knopf-rund: 44px;
    --sigel:      42px;
    --avatar:     74px;
    --avatar-klein: 48px;

  }
}

/* ── design/03-tiefe.css ──────────────────────────────────────────────── */
/* ══ 03 · Tiefe ═══════════════════════════════════════════════════════
   Die Tiefenleiter. Kein Schatten wird je direkt geschrieben — jeder
   Schatten im Entwurf ist eine dieser sieben Stufen.

   HERVOR (embossed) — das Licht faellt von oben links auf den Koerper:
     tiefe-1   liegt knapp auf: Knopf, Chip, Sigel, aktiver Menuepunkt
     tiefe-2   steht darueber:  Tafel, Fusszeile, Kopfband gestapelt
     tiefe-3   schwebt:         das Seitenband, das staerkste Element
     tiefe-liegt  gerichteter, weicher Wurf ohne Gegenlicht: die
                  Arbeitsflaeche, die UNTER dem Band liegt

   EIN (debossed) — der Koerper ist in die Flaeche gedrueckt:
     ein-1     Feld: Kachel, Wanne der Themenwahl, Zustandsmarke
     ein-2     tiefer, fuer gedrueckte Zustaende
     kante     Lichtkante oben links, 1 px. Sie kommt ZUSAETZLICH zu
               jedem Hervor-Schatten und macht die Kante scharf.
   ────────────────────────────────────────────────────────────────── */
@layer token {
  :root{
    --tiefe-1:      4px  4px  9px var(--sch-tief),  -3px  -3px  8px var(--sch-licht);
    --tiefe-2:      8px  8px 20px var(--sch-tief),  -6px  -6px 16px var(--sch-licht);
    --tiefe-3:     24px 24px 56px var(--sch-tief-weit), -16px -16px 42px var(--sch-licht-weit);
    --tiefe-liegt: 10px 14px 34px var(--sch-flach);

    --ein-1: inset  4px  4px  9px var(--sch-tief-ein), inset -3px -3px  8px var(--sch-licht-ein);
    --ein-2: inset  6px  6px 13px var(--sch-tief-ein), inset -5px -5px 11px var(--sch-licht-ein);

    --kante: inset 1px 1px 1px var(--sch-kante);

    /* Oberkante der Arbeitsflaeche: eine dunkle Zone nach innen. Der
       negative Spread haelt sie an der Kante — links und rechts blutet
       nichts aus. Sie liegt UEBER dem Inhalt, damit der Inhalt unter die
       Kante zu laufen scheint. Unten bewusst nichts (Chef 22.09.). */
    --ein-kante: inset 0 16px 16px -13px var(--sch-tief);

    /* Der eigene Rollbalken ist schmaler als eine Karte und braucht
       deshalb eine eigene, feinere Stufe — aber aus denselben Farben. */
    --ein-schmal: inset 2px 2px 5px var(--sch-tief-ein), inset -2px -2px 5px var(--sch-licht-ein);
    --tiefe-schmal:     2px 2px 5px var(--sch-tief),          -2px -2px 5px var(--sch-licht);
  }
}

/* ── design/04-schrift.css ──────────────────────────────────────────────── */
/* ══ 04 · Schrift ═════════════════════════════════════════════════════
   Zwei Familien, klar getrennt nach Aufgabe:
     titel  Outfit      — Zahlen, Ueberschriften, Marke. Traegt Gewicht.
     text   IBM Plex    — alles Lesbare.
     zahl   Monospace   — Versionen, technische Kuerzel.

   Eine Groessenleiter von 10 bis 27 px. Die halben Pixel des Entwurfs
   (10,5 · 11,5 · 12,5) sind auf die Leiter gerueckt.
   ────────────────────────────────────────────────────────────────── */
@layer token {
  :root{
    --schrift-titel: "Outfit", system-ui, sans-serif;
    --schrift-text:  "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
    --schrift-zahl:  ui-monospace, SFMono-Regular, Menlo, monospace;

    --sz-1: 10px;  --sz-2: 11px;  --sz-3: 12px;  --sz-4: 13px;
    --sz-5: 14px;  --sz-6: 15px;  --sz-7: 17px;  --sz-8: 18px;
    --sz-9: 20px;  --sz-10:22px;  --sz-11:27px;

    --gew-normal: 400;
    --gew-halb:   500;
    --gew-fett:   600;

    /* Laufweite — Grossbuchstaben brauchen mehr Luft als Fliesstext. */
    --sperr-weit:  .09em;   /* Beschriftungen in Versalien */
    --sperr-mittel:.06em;   /* Menue, Marke */
    --sperr-eng:   .04em;
  }
}

/* ── design/05-bewegung.css ──────────────────────────────────────────────── */
/* ══ 05 · Bewegung ════════════════════════════════════════════════════
   Drei Dauern nach Aufgabe. Wer eine vierte braucht, hat meist das
   falsche Ereignis gewaehlt.
     kurz    Antwort auf den Zeiger — Farbe, Schatten am Knopf
     mittel  Zustandswechsel — ein Schalter rastet ein
     lang    Themenwechsel — die ganze Flaeche faerbt um
   ────────────────────────────────────────────────────────────────── */
@layer token {
  :root{
    --zeit-kurz:   .2s;
    --zeit-mittel: .25s;
    --zeit-lang:   .45s;
    --kurve: ease;

    /* ── Der Auftritt ──────────────────────────────────────────────────
       Die Seite baut sich EINMAL beim Laden auf, in einer Reihenfolge, die
       der Blick ohnehin nimmt: erst das Seitenband, dann die
       Arbeitsflaeche, dann die Bereiche darin von oben nach unten.
       Danach bewegt sich nichts mehr von selbst. */
    --auftritt-dauer: .78s;
    --auftritt-vorlauf: .28s;  /* Ruhe vor dem ersten Bild. Verschiebt die
                                  ganze Sequenz, nicht ihre Reihenfolge. */
    --auftritt-takt:  .17s;   /* EIN Abstand fuer alles: Band, Flaeche,
                                 und jeder weitere Bereich. Gleiche
                                 Abstaende statt drei eigener Zahlen. */
    --auftritt-weg:   14px;   /* so weit kommt ein Bereich von unten */
    --auftritt-kurve: cubic-bezier(.16, .74, .3, 1);

    /* ── Der Puls ──────────────────────────────────────────────────────
       Die einzige Bewegung, die NICHT nach dem Laden aufhoert. Sie meldet
       Ungelesenes und laeuft deshalb weiter — aber langsam. Unter zwei
       Sekunden wirkt sie hektisch und zieht den Blick von der Arbeit ab;
       das ist das Gegenteil dessen, was eine Meldung leisten soll. */
    --puls-dauer: 2.6s;
    --puls-kurve: ease-in-out;
  }
}
/* Wer Bewegung abbestellt hat, bekommt keine. Steht in der letzten Lage,
   damit es jede spaetere Regel ueberstimmt — ohne !important. */
@layer schirm {
  @media (prefers-reduced-motion: reduce){
    *{ transition: none !important; animation: none !important }
  }
}

/* ── design/10-grund.css ──────────────────────────────────────────────── */
/* ══ 10 · Grund ═══════════════════════════════════════════════════════
   Reset und Koerper. Mehr gehoert hier nicht hinein.
   ────────────────────────────────────────────────────────────────── */
@layer grund {
  *{ box-sizing: border-box }

  body{
    margin: 0;
    background: var(--f-grund);
    color: var(--ink);
    font: var(--gew-normal) var(--sz-5)/1.5 var(--schrift-text);
    -webkit-font-smoothing: antialiased;
    transition: background-color var(--zeit-lang) var(--kurve),
                color            var(--zeit-lang) var(--kurve);
  }

  h2{
    font-family: var(--schrift-titel);
    font-weight: var(--gew-fett);
    font-size: var(--sz-7);
    letter-spacing: .01em;
    margin: 0;
  }

  /* Der Tastaturring ist einmal definiert und gilt ueberall. */
  :is(a, button):focus-visible{
    outline: 2px solid var(--ton-akzent);
    outline-offset: 2px;
  }
}

/* ── design/20-form.css ──────────────────────────────────────────────── */
/* ══ 20 · Form ════════════════════════════════════════════════════════
   🔴 Das Herzstueck. Der ganze Entwurf kennt genau ZWEI Formen:

      hervor — der Koerper steht aus der Flaeche heraus (embossed)
      ein    — der Koerper ist in die Flaeche gedrueckt (debossed)

   Alles andere ist eine Groesse davon. Jedes Bauteil wird hier EINMAL
   einer Rolle zugeordnet; die Bauteil-Dateien danach kuemmern sich nur
   noch um Abstand, Schrift und Anordnung.

   🪤 Wer spaeter einem neuen Bauteil "background + border-radius +
      box-shadow" selbst schreibt, hat den Punkt verfehlt: dann faellt es
      beim naechsten Umbau der Tiefenleiter aus der Reihe. Neues Bauteil
      heisst: Zeile in die passende Waehlerliste hier.
   ────────────────────────────────────────────────────────────────── */
@layer form {

  /* ── RUHE ────────────────────────────────────────────────────────────
     🪤 Menuezeile und Themenschalter sind im Normalfall FLACH und werden
        erst im aktiven Zustand zum Koerper. Dieser Ruhezustand muss in
        DERSELBEN Lage stehen wie die Zuweisung darunter. Stand er in der
        Lage "teil", gewann er gegen [aria-current] — denn die Lage schlaegt
        die Spezifitaet, nicht umgekehrt. Genau so verschwand der aktive
        Menuepunkt. */
  .navi a,
  .themenwahl button{
    background: transparent;
    box-shadow: 0 0 0 transparent;
  }

  /* ── HERVOR, klein: liegt knapp auf ──────────────────────────────── */
  .hervor-klein,
  .rundknopf,
  .chip,
  .sigel,
  .navi a[aria-current="page"],
  .themenwahl button[aria-pressed="true"]{
    background: var(--f-karte);
    box-shadow: var(--tiefe-1), var(--kante);
  }

  /* ── HERVOR, mittel: eine Karte ──────────────────────────────────── */
  .hervor,
  .tafel,
  .fusszeile{
    background: var(--f-karte);
    border-radius: var(--eck-karte);
    box-shadow: var(--tiefe-2), var(--kante);
  }

  /* ── HERVOR, gross: schwebt ueber allem ──────────────────────────── */
  .hervor-schwebt,
  .band{
    background: var(--f-karte);
    border-radius: var(--eck-karte);
    box-shadow: var(--tiefe-3), var(--kante);
  }

  /* ── HERVOR ohne Gegenlicht: liegt flach darunter ────────────────── */
  .liegt,
  .flaeche{
    background: var(--f-flaeche);
    border-radius: var(--eck-karte);
    box-shadow: var(--tiefe-liegt);
  }

  /* ── EIN: ein Feld in der Flaeche ────────────────────────────────── */
  .ein,
  .kachel,
  .themenwahl,
  .marke-zustand{
    background: var(--f-wanne);
    border-radius: var(--eck-feld);
    box-shadow: var(--ein-1);
  }

  /* ── EIN, klein: ein gewaehlter Chip ─────────────────────────────────
     Der gewaehlte Knopf ist hineingedrueckt statt herausgestellt — die
     zweite der zwei Formen, eine Nummer kleiner. Gesetzt wird ein
     Attribut: <span class="chip" data-gewaehlt>.

     🪤 Diese Regel MUSS in derselben Lage stehen wie die Zuweisung
        ".chip" weiter oben. Steht sie in einer spaeteren Lage, gewinnt
        sie zwar; steht sie in einer frueheren, verliert sie trotz
        hoeherer Spezifitaet. Am 22.09. hat genau das den aktiven
        Menuepunkt verschwinden lassen. */
  .chip[data-gewaehlt]{
    background: var(--f-wanne);
    box-shadow: var(--ein-1);
    color: var(--ink);
  }

  /* Runde Koerper behalten ihren Kreis — die Form-Regel setzt oben
     border-radius, deshalb hier zurueckgeholt. */
  .rundknopf, .sigel, .avatar{ border-radius: 50% }
  .chip, .themenwahl, .marke-zustand, .navi a{ border-radius: var(--eck-pille) }
}

/* ── design/21-knopf.css ──────────────────────────────────────────────── */
/* ══ 21 · Knopf ═══════════════════════════════════════════════════════
   Drei Bauarten, ein Gedanke: ruhig im Normalzustand, hervorstehend
   wenn er traegt, eingedrueckt waehrend er gedrueckt wird.

     .rundknopf          runder Werkzeugknopf im Bandfuss
     .themenwahl button  Schalter in einer eingelassenen Wanne
     .navi a             Menuezeile — ein Knopf ohne Knopfaussehen
     .chip               Etikett, nicht klickbar, aber dieselbe Form
   ────────────────────────────────────────────────────────────────── */
@layer teil {

  .rundknopf{
    width: var(--knopf-rund); height: var(--knopf-rund);
    border: 0; cursor: pointer;
    display: grid; place-items: center;
    color: var(--ink-2);
    transition: box-shadow var(--zeit-kurz) var(--kurve),
                color      var(--zeit-kurz) var(--kurve);
  }
  .rundknopf:hover{ color: var(--ink) }
  .rundknopf:active{ box-shadow: var(--ein-1) }
  .rundknopf:focus-visible{ outline-offset: 3px }
  .rundknopf svg{ width: var(--sz-7); height: var(--sz-7) }

  /* ── Menue ─────────────────────────────────────────────────────── */
  .navi{ display: flex; flex-direction: column; gap: 3px; margin-top: var(--r-2) }
  .navi a{
    display: flex; align-items: center; gap: var(--r-5);
    padding: var(--r-5) var(--r-7);
    text-decoration: none;
    color: var(--ink-2);
    font-size: var(--sz-3);
    font-weight: var(--gew-halb);
    letter-spacing: .07em;
    text-transform: uppercase;
    transition: color      var(--zeit-kurz)   var(--kurve),
                box-shadow var(--zeit-mittel) var(--kurve);
  }
  .navi a svg{ width: var(--sz-6); height: var(--sz-6); flex: 0 0 var(--sz-6) }
  .navi a:hover{ color: var(--ink) }
  .navi a[aria-current="page"]{ color: var(--ink) }

  /* ── Etikett ───────────────────────────────────────────────────── */
  .chips{ display: flex; gap: var(--r-3); flex-wrap: wrap }
  .chip{
    display: inline-flex; align-items: center; gap: var(--r-2);
    padding: var(--r-3) var(--r-5);
    font-size: var(--sz-2);
    color: var(--ink-2);
  }
  .chip i{ width: var(--r-3); height: var(--r-3); border-radius: 2px; display: inline-block }
  .chip.geist i{ background: var(--f-balken-geist) }
  .chip.voll  i{ background: var(--f-balken) }

  /* ── Schalter in der Wanne ─────────────────────────────────────── */
  .themenwahl{ display: flex; gap: var(--r-2); padding: var(--r-2) }
  .themenwahl button{
    display: inline-flex; align-items: center; gap: var(--r-3);
    padding: var(--r-4) var(--r-7);
    border: 0; cursor: pointer;
    border-radius: var(--eck-pille);
    color: var(--ink-3);
    font: var(--gew-halb) var(--sz-3)/1 var(--schrift-text);
    letter-spacing: .05em;
    transition: color            var(--zeit-kurz)   var(--kurve),
                box-shadow       var(--zeit-mittel) var(--kurve),
                background-color var(--zeit-mittel) var(--kurve);
  }
  .themenwahl button svg{ width: var(--sz-5); height: var(--sz-5) }
  .themenwahl button:hover{ color: var(--ink-2) }
  .themenwahl button[aria-pressed="true"]{ color: var(--ink) }
}

/* ── design/22-tafel.css ──────────────────────────────────────────────── */
/* ══ 22 · Tafel ═══════════════════════════════════════════════════════
   Der Traeger fuer jeden Inhaltsblock. Form kommt aus 20-form.css,
   hier steht nur, wie der Kopf sitzt.
   ────────────────────────────────────────────────────────────────── */
@layer teil {
  /* Oben/unten eine Stufe schmaler als seitlich (--r-7 statt --r-8): drei
     Tafeln sparen so 12 px Hoehe, und genau die fehlten, damit alles ohne
     Rollbalken steht. Seitlich bleibt es weit, sonst kleben die Kacheln
     an der Kante. */
  .tafel{ padding: var(--r-7) var(--r-9) }

  .tafelkopf{
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--r-5); flex-wrap: wrap;
    margin-bottom: var(--r-6);
  }

  .stand{
    font-size: var(--sz-2); color: var(--ink-3);
    display: flex; align-items: center; gap: var(--r-2);
  }
  .punkt{
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--ton-ok);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ton-ok) 18%, transparent);
  }

  .zweispalt{
    display: grid;
    grid-template-columns: minmax(0,1.85fr) minmax(0,1fr);
    gap: var(--r-7); align-items: stretch;
  }

  /* ── Ring ──────────────────────────────────────────────────────── */
  .ringfeld{ display: flex; flex-direction: column; align-items: center; gap: var(--r-1); padding-top: var(--r-2) }
  .ringmitte{ font-family: var(--schrift-titel); font-weight: var(--gew-fett); font-size: var(--sz-9); fill: var(--ink) }
  .ringlabel{ font-size: var(--sz-1); fill: var(--ink-3); letter-spacing: var(--sperr-mittel) }

  .legende{
    display: grid; grid-template-columns: repeat(3,1fr);
    gap: var(--r-4); width: 100%;
    margin-top: var(--r-6); padding-top: var(--r-6);
    border-top: 1px solid var(--f-linie);
  }
  .legende div{ min-width: 0 }
  .legende .k{
    display: flex; align-items: center; gap: var(--r-2);
    font-size: var(--sz-2); color: var(--ink-3);
    letter-spacing: var(--sperr-eng); margin-bottom: var(--r-1);
  }
  .legende .k i{ width: var(--r-3); height: var(--r-3); border-radius: 2px; flex: 0 0 var(--r-3) }
  .legende .v{
    font-family: var(--schrift-titel); font-weight: var(--gew-fett);
    font-size: var(--sz-6); color: var(--ink); font-variant-numeric: tabular-nums;
  }
  .legende .n{ display: block; font-size: var(--sz-1); color: var(--ink-3); font-weight: var(--gew-normal) }

  .diagramm{ width: 100%; height: auto; display: block; margin-top: var(--r-2) }

  /* ── Fusszeile ─────────────────────────────────────────────────── */
  .fusszeile{
    margin-top: var(--r-4);
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--r-8); flex-wrap: wrap;
    padding: var(--r-7) var(--r-10);
  }
  .fussnote{ font-size: var(--sz-3); color: var(--ink-3); max-width: 62ch; line-height: 1.6 }
}

/* ── design/23-kachel.css ──────────────────────────────────────────────── */
/* ══ 23 · Kachel ══════════════════════════════════════════════════════
   Die Kennzahl. Das Feld ist EINGELASSEN (20-form.css), das Sigel darin
   steht wieder HERVOR — daher wirkt die Zahl wie eingeprägt.
   ────────────────────────────────────────────────────────────────── */
@layer teil {
  .kennzahlen{
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: var(--r-6);
  }

  .kachel{
    padding: var(--r-7) var(--r-8);
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--r-5); min-width: 0;
  }
  .kachel .txt{ min-width: 0 }
  .kachel .lbl{
    display: block; margin-bottom: var(--r-2);
    font-size: var(--sz-2); color: var(--ink-3);
    letter-spacing: var(--sperr-weit); text-transform: uppercase;
  }
  .kachel .wert{
    font-family: var(--schrift-titel); font-weight: var(--gew-fett);
    font-size: var(--sz-11); line-height: 1; color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
  .kachel .wert small{ font-size: var(--sz-3); font-weight: var(--gew-normal); color: var(--ink-3); margin-left: 3px }
  .kachel .fuss{
    display: block; margin-top: var(--r-3);
    font-size: var(--sz-2); color: var(--ink-3);
    /* 🪤 Hier stand 2.7em — Platz fuer ZWEI Zeilen, damit Kacheln mit
       unterschiedlich langer Fusszeile gleich hoch bleiben. Seit alle
       Fusszeilen einzeilig sind, waren das 15 px totes Feld je Reihe.
       1.45em haelt die Kacheln weiter auf gleicher Hoehe; wird eine
       Fusszeile wieder zweizeilig, waechst die ganze Reihe mit. */
    line-height: 1.35; min-height: 1.45em;
  }
  .kachel .fuss.ist-ok  { color: var(--ton-ok) }
  .kachel .fuss.ist-warn{ color: var(--ton-warn) }

  .sigel{
    width: var(--sigel); height: var(--sigel); flex: 0 0 var(--sigel);
    display: grid; place-items: center;
    color: var(--ink);
  }
  .sigel svg{ width: var(--sz-8); height: var(--sz-8) }

  /* ── Ungelesenes ───────────────────────────────────────────────────
     Es pulst NUR die Kontur des Zeichens — nicht die Kachel, nicht der
     Ring des Sigels, nicht die Zahl. Der Rest der Reihe bleibt still,
     sonst zappelt die halbe Oberflaeche und die Meldung geht unter.

     Gesetzt wird ein Attribut am Sigel: <span class="sigel" data-neu>.
     Ein Attribut statt einer Klasse, weil es ein ZUSTAND ist und keine
     Bauart — dieselbe Kachel, nur mit etwas Neuem darin.

     🪤 Die rote Kontur steht auch OHNE Bewegung. Wer Animationen
        abbestellt hat (90er-Lage schaltet sie ab), soll die Meldung
        trotzdem sehen — sonst verschwindet sie fuer ihn ganz. */
  @keyframes puls-kontur{
    0%, 100% { stroke: currentColor }
    50%      { stroke: var(--ton-bad) }
  }
  .sigel[data-neu] svg{
    stroke: var(--ton-bad);
    animation: puls-kontur var(--puls-dauer) var(--puls-kurve) infinite;
  }

  /* ── Marke und Ich ─────────────────────────────────────────────── */
  .marke{
    font-family: var(--schrift-titel); font-weight: var(--gew-fett);
    font-size: var(--sz-8); letter-spacing: var(--sperr-mittel);
    text-align: center; margin: var(--r-1) 0 2px;
  }
  .marke em{ font-style: normal; color: var(--ton-akzent) }

  .ich{ display: flex; flex-direction: column; align-items: center; gap: var(--r-4) }
  .ich b{ font-family: var(--schrift-titel); font-weight: var(--gew-fett); font-size: var(--sz-6) }
  .ich span{ font-size: var(--sz-2); color: var(--ink-3); letter-spacing: .05em }
  .ich .txt{ text-align: center }

  .avatar{
    width: var(--avatar); height: var(--avatar);
    display: grid; place-items: center;
    font-family: var(--schrift-titel); font-weight: var(--gew-fett);
    font-size: var(--sz-10); letter-spacing: var(--sperr-eng);
    color: var(--ink-2);
    background: var(--f-karte);
    box-shadow: var(--tiefe-2), inset 0 0 0 5px var(--f-wanne);
  }
}

/* ── design/24-tabelle.css ──────────────────────────────────────────────── */
/* ══ 24 · Tabelle ═════════════════════════════════════════════════════ */
@layer teil {
  .rollfeld{ overflow-x: auto }

  table{ width: 100%; border-collapse: collapse; min-width: 680px }

  th{
    text-align: left; white-space: nowrap;
    font-size: var(--sz-2); font-weight: var(--gew-halb);
    letter-spacing: var(--sperr-weit); text-transform: uppercase;
    color: var(--ink-3);
    padding: 0 var(--r-5) var(--r-6);
  }
  td{
    padding: var(--r-6) var(--r-5);
    font-size: var(--sz-4); color: var(--ink-2);
    border-top: 1px solid var(--f-linie);
  }
  tbody tr:first-child td{ border-top: 0 }
  th.num, td.num{ text-align: right; font-variant-numeric: tabular-nums }
  td.name{ color: var(--ink); font-weight: var(--gew-halb) }
  td .ver{ font-family: var(--schrift-zahl); font-size: var(--sz-3); color: var(--ink-3) }

  .marke-zustand{
    display: inline-flex; align-items: center; gap: var(--r-2);
    padding: var(--r-1) var(--r-5);
    font-size: var(--sz-2); white-space: nowrap;
  }
  .marke-zustand i{ width: var(--r-2); height: var(--r-2); border-radius: 50%; flex: 0 0 var(--r-2) }
  .z-ok   i{ background: var(--ton-ok) }   .z-ok  { color: var(--ink-2) }
  .z-warn i{ background: var(--ton-warn) } .z-warn{ color: var(--ton-warn) }
  .z-bad  i{ background: var(--ton-bad) }  .z-bad { color: var(--ton-bad) }

  .tabfuss{ margin: var(--r-6) var(--r-5) 0; font-size: var(--sz-3); color: var(--ink-3); line-height: 1.6 }
  .tabfuss b{ color: var(--ink-2); font-weight: var(--gew-halb) }
}

/* ── design/25-rollbalken.css ──────────────────────────────────────────────── */
/* ══ 25 · Rollbalken ══════════════════════════════════════════════════
   🪤 Der native Balken liess sich nicht zuverlaessig gestalten: sobald
      scrollbar-width gesetzt ist, verwirft Chromium die ::-webkit-Regeln,
      und ohne sie zeichnet es einen Overlay-Balken OHNE Breite — im
      Standbild gar nicht sichtbar. Deshalb ein eigener. Er sieht in jedem
      Browser gleich aus und traegt dieselbe Formensprache wie der Rest:
      die Bahn ist eingelassen, der Daumen steht hervor.

   🪤 Die Kennung heisst "rollbalken", nicht "balken" — im Diagramm gibt
      es bereits eine SVG-Gruppe mit der Kennung "balken", und
      getElementById lieferte dann diese statt des Balkens.
   ────────────────────────────────────────────────────────────────── */
@layer teil {
  .rolle, .band{ scrollbar-width: none; -ms-overflow-style: none }
  .rolle::-webkit-scrollbar, .band::-webkit-scrollbar{ width: 0; height: 0 }

  .rollbalken{
    position: absolute;
    top: var(--r-4); right: var(--r-4); bottom: var(--r-4);
    width: var(--r-5);
    border-radius: var(--eck-pille);
    background: var(--f-wanne);
    box-shadow: var(--ein-schmal);
  }
  .rollbalken[hidden]{ display: none }

  .rollbalken i{
    position: absolute; left: 0; right: 0; display: block;
    border-radius: var(--eck-pille);
    background: var(--f-karte);
    box-shadow: var(--tiefe-schmal);
    cursor: grab;
  }
  .rollbalken i:active{ cursor: grabbing }
}

/* ── design/30-geruest.css ──────────────────────────────────────────────── */
/* ══ 30 · Geruest ═════════════════════════════════════════════════════
   Zwei Ebenen, nicht zwei Spalten: das Band SCHWEBT (86 % Schirmhoehe,
   staerkster Schatten), die Arbeitsflaeche LIEGT darunter (73 %, flacher
   Wurf) und laeuft links unter das Band hinein.
   ────────────────────────────────────────────────────────────────── */
@layer bau {

  .huelle{
    position: relative; z-index: 1;
    max-width: var(--huelle-breit);
    margin: 0 auto;
    padding-block: var(--huelle-hoch);
    padding-inline: var(--r-7);
  }

  .buehne{
    display: grid;
    grid-template-columns: var(--band-breit) minmax(0,1fr);
    gap: 0; align-items: center;
    /* 🔴 Die Huelle hat oben und unten je --huelle-hoch. Mit vollen 100dvh
       waere die Seite genau um diese zwei Abstaende hoeher als der Schirm
       — der Seitenscroll, den es nicht geben soll. */
    height: calc(100dvh - var(--huelle-hoch) * 2);
    min-height: 520px;
  }

  /* ── Seitenband ────────────────────────────────────────────────── */
  .band{
    position: relative; z-index: 2;
    height: 86%; min-height: 0; overflow-y: auto;
    padding: var(--r-11) var(--r-8) var(--r-10);
    display: flex; flex-direction: column; gap: var(--r-10);
  }
  .bandfuss{
    margin-top: auto;
    display: flex; gap: var(--r-6); justify-content: center;
    padding-top: var(--r-9);
  }

  /* ── Arbeitsflaeche ─────────────────────────────────────────────────
     Sie schiebt sich um --ueberlapp nach links unter das Band. Der linke
     Innenabstand ist --ueberlapp + --luft-innen, damit dem Inhalt danach
     genau --luft-innen Luft zur Bandkante bleibt. Rundum --r-4, damit der
     Rollbalken nicht auf der Kante sitzt. */
  .flaeche{
    position: relative; z-index: 1;
    display: flex; min-width: 0; min-height: 0;
    /* 78 statt 73 Prozent — auf 1080 px Schirmhoehe sind das +50 px, die
       Obergrenze des Chefs (22.09.). Zusammen mit den gestrafften Kacheln
       stehen die drei Bereiche damit ohne Rollbalken da. */
    height: 78%;
    margin-left: calc(var(--ueberlapp) * -1);
    /* Oben und unten KEIN Innenabstand: der rollende Kasten schneidet dann
       genau auf der Kante der Arbeitsflaeche ab. Sonst liegen dort zwei
       Kanten uebereinander — die der Flaeche und die des Schnitts — und
       man sieht im ungescrollten Zustand eine Kante, die nichts bedeutet. */
    padding: 0 var(--r-4) 0 calc(var(--ueberlapp) + var(--luft-innen));
  }

  /* Die Tiefe an Ober- und Unterkante. Ein eigenes Blatt, weil ein
     inset-Schatten auf der Flaeche selbst HINTER den Karten laege und
     damit unsichtbar waere. */
  .flaeche::after{
    content: ''; position: absolute; inset: 0;
    pointer-events: none;
    border-radius: var(--eck-karte);
    box-shadow: var(--ein-kante);
  }

  /* ── Der rollende Kasten ────────────────────────────────────────────
     🪤 min-height:0 ist Pflicht, nicht Geschmack: ein Flex-Kind steht auf
        min-height:auto und kann darum nicht unter seine Inhaltshoehe
        schrumpfen. Ohne diese Zeile rollt der Kasten NIE — der Inhalt
        laeuft aus der Flaeche heraus und die ganze Seite wird laenger. */
  .rolle{
    flex: 1 1 auto; min-width: 0; min-height: 0;
    display: flex; flex-direction: column; gap: var(--r-7);
    /* Rechts 25 px: 12 px Balkenbreite + 13 px Abstand zur Karte (Chef). */
    padding: var(--r-5) 25px var(--r-5) 0;
    overflow-y: auto; overscroll-behavior: contain;
    /* Der Schnitt liegt jetzt auf der Flaechenkante und traegt deshalb
       denselben Radius — eine Kante, nicht zwei. */
    border-radius: var(--eck-karte);
  }
}

/* ── design/40-hintergrund.css ──────────────────────────────────────────────── */
/* ══ 40 · Hintergrund ═════════════════════════════════════════════════
   Leinwand und Punktraster liegen beide auf z-index 0, hinter der Huelle,
   und nehmen keine Zeigerereignisse an.
   ────────────────────────────────────────────────────────────────── */
@layer grund {
  #wellen{
    position: fixed; inset: 0;
    width: 100%; height: 100%;
    z-index: 0; pointer-events: none; display: block;
  }

  /* Zwei feste Felder wie in der Vorlage: oben rechts kraeftig, unten
     links zurueckgenommen. Sie bewegen sich NICHT mit den Wellen.
     Die Anteile sind am Vorlagenbild gemessen. */
  .punkte{
    position: fixed; z-index: 0; pointer-events: none;
    background-image: radial-gradient(circle at center, var(--punkt) 2px, transparent 2.3px);
    background-size: 24px 24px;
  }
  .punkte--oben { top: 10.7%; right: 6.9%; width: 192px; height: 148px }
  .punkte--unten{
    bottom: 4.5%; left: 1.2%; width: 192px; height: 130px;
    background-image: radial-gradient(circle at center, var(--punkt-leise) 2px, transparent 2.3px);
  }
}

/* ── design/45-auftritt.css ──────────────────────────────────────────────── */
/* ══ 45 · Auftritt ════════════════════════════════════════════════════
   Ein einziger orchestrierter Moment beim Laden — kein Effekt je Bauteil.

     Schritt 0  Seitenband
     Schritt 1  Arbeitsflaeche
     Schritt 2  erster Bereich darin, danach je ein Schritt der naechste

   Ein Schritt ist --auftritt-takt. Alle Abstaende sind gleich gross — das
   Tempo der ganzen Sequenz haengt an dieser einen Zahl. Davor liegt
   --auftritt-vorlauf: eine kurze Ruhe, bevor das erste Bild kommt.

   Reine CSS-Animation, kein Skript: sie laeuft auch, wenn das Skript
   spaeter kommt oder gar nicht.

   🪤 Der Startzustand (unsichtbar) steht NUR im Keyframe, nie als eigene
      Regel. Faellt die Animation weg — abgeschaltete Bewegung, alter
      Browser, Fehler — ist das Element sichtbar statt fuer immer weg.

   🪤 backwards, nicht both: "backwards" haelt den Startzustand waehrend der
      Verzoegerung fest und gibt das Element danach WIEDER FREI. Mit "both"
      bliebe die Endstellung als transform stehen — ein transform, der nie
      wieder verschwindet, erzeugt fuer alles darin einen eigenen
      Bezugsrahmen und faelscht spaeter Messungen.
   ────────────────────────────────────────────────────────────────── */
@layer bau {

  @keyframes auftritt-sanft{
    from{ opacity: 0 }
    to  { opacity: 1 }
  }
  @keyframes auftritt-von-unten{
    from{ opacity: 0; transform: translateY(var(--auftritt-weg)) }
    to  { opacity: 1; transform: none }
  }

  .band{
    animation: auftritt-sanft var(--auftritt-dauer) var(--auftritt-kurve)
               var(--auftritt-vorlauf) backwards;
  }

  .flaeche{
    animation: auftritt-sanft var(--auftritt-dauer) var(--auftritt-kurve)
               calc(var(--auftritt-vorlauf) + var(--auftritt-takt)) backwards;
  }

  /* Die Bereiche in der Arbeitsflaeche, von oben nach unten.
     Acht Stufen reichen fuer jede Seite, die dieser Entwurf kennt; was
     darueber hinausgeht, erscheint mit der letzten Stufe. */
  .rolle > *{
    animation: auftritt-von-unten var(--auftritt-dauer) var(--auftritt-kurve)
               calc(var(--auftritt-vorlauf) + var(--auftritt-takt) * 2) backwards;
  }
  .rolle > :nth-child(2){ animation-delay: calc(var(--auftritt-vorlauf) + var(--auftritt-takt) * 3) }
  .rolle > :nth-child(3){ animation-delay: calc(var(--auftritt-vorlauf) + var(--auftritt-takt) * 4) }
  .rolle > :nth-child(4){ animation-delay: calc(var(--auftritt-vorlauf) + var(--auftritt-takt) * 5) }
  .rolle > :nth-child(5){ animation-delay: calc(var(--auftritt-vorlauf) + var(--auftritt-takt) * 6) }
  .rolle > :nth-child(6){ animation-delay: calc(var(--auftritt-vorlauf) + var(--auftritt-takt) * 7) }
  .rolle > :nth-child(7){ animation-delay: calc(var(--auftritt-vorlauf) + var(--auftritt-takt) * 8) }
  .rolle > :nth-child(n+8){ animation-delay: calc(var(--auftritt-vorlauf) + var(--auftritt-takt) * 9) }
}

/* ── design/90-schirm.css ──────────────────────────────────────────────── */
/* ══ 90 · Schirm ══════════════════════════════════════════════════════
   Letzte Lage. Was hier steht, gewinnt gegen jede Regel davor — egal wie
   spezifisch jene ist und ohne ein einziges !important.

     1080 px  Gestapelt. "Volle Schirmhoehe" hat dann keinen Sinn mehr:
              das Band wird zur Kopfleiste, die Seite rollt als Ganzes.
      560 px  Eine Spalte.
   ────────────────────────────────────────────────────────────────── */
@layer schirm {

  @media (max-width: 1080px){
    .punkte{ display: none }

    .buehne{ grid-template-columns: 1fr; height: auto; min-height: 0 }

    .band{
      height: auto; overflow: visible;
      flex-direction: row; flex-wrap: wrap; align-items: center;
      gap: var(--r-7); padding: var(--r-8);
      box-shadow: var(--tiefe-2), var(--kante);
    }
    .marke{ text-align: left; margin: 0 }
    .ich{ flex-direction: row; gap: var(--r-5) }
    .ich .txt{ text-align: left }
    .avatar{ width: var(--avatar-klein); height: var(--avatar-klein); font-size: var(--sz-7) }
    .navi{ flex-direction: row; flex-wrap: wrap; margin-top: 0; flex: 1 1 320px }
    .navi a{ padding: var(--r-4) var(--r-5) }
    .bandfuss{ margin-top: 0; padding-top: 0 }

    .flaeche{
      height: auto; margin-left: 0; padding: var(--r-8);
      display: block;
      box-shadow: var(--tiefe-2), var(--kante);
    }
    .rolle{ overflow: visible; padding: 0 }

    .kennzahlen{ grid-template-columns: repeat(2, minmax(0,1fr)) }
    .zweispalt { grid-template-columns: minmax(0,1fr) }
  }

  @media (max-width: 560px){
    .huelle{ padding-block: var(--r-8) }
    .flaeche{ padding: var(--r-6) }
    .tafel{ padding: var(--r-8) }
    .kennzahlen{ grid-template-columns: minmax(0,1fr) }
    .legende{ grid-template-columns: 1fr; gap: var(--r-3) }
    .navi a{ letter-spacing: var(--sperr-eng); font-size: var(--sz-2) }
    .fusszeile{ flex-direction: column; align-items: flex-start }
  }
}