/* ===========================================================================
   MasterLead – Oberflaeche, Neubau 2026-10-03

   Ein Satz Bausteine, flach und ruhig. Schwarz und Orange bleiben die Marke
   (DESIGN.md), das Leuchten, die Verlaeufe und die Spielereien sind weg.
   Jede Seite besteht aus denselben Teilen: Seitenkopf, Lage (was laeuft
   gerade), Zahlen, Tabelle. Einstellungen sind zugeklappt, bis man sie
   braucht.

   Die Klassennamen sind die, die app.js beim Zeichnen benutzt (kachel, marke,
   chip, knopf, smtp-row, schild, viz-*). Wer sie umbenennt, muss app.js
   mitziehen.
   =========================================================================== */

@layer reset, base, layout, components, pages;

/* ---------------------------------------------------------------------------
   Tokens
   --------------------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* Flaechen */
  --bg:           #0c0c0d;
  --flaeche:      #141416;
  --flaeche-hoch: #1b1b1f;
  --flaeche-tief: #0f0f11;
  --linie:        #26262b;
  --linie-stark:  #36363d;

  /* Tinte */
  --text:   #ededf0;
  --text-2: #9d9da6;
  --text-3: #66666f;

  /* Marke */
  --akzent:       #ff9000;
  --akzent-text:  #ffb24a;
  --akzent-hell:  rgba(255, 144, 0, .13);
  --akzent-linie: rgba(255, 144, 0, .45);

  /* Status */
  --gruen: #3ddc84; --gruen-hell: rgba(61, 220, 132, .13);
  --gelb:  #f5b731; --gelb-hell:  rgba(245, 183, 49, .13);
  --rot:   #ff5c5c; --rot-hell:   rgba(255, 92, 92, .13);
  --grau:  #80808a;

  /* Form */
  --radius: 8px;
  --radius-klein: 6px;
  --schatten: 0 12px 40px rgba(0, 0, 0, .55);
  --font-sans: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Code", "Cascadia Mono", Consolas, monospace;

  /* Abstaende */
  --luft-1: 6px;
  --luft-2: 12px;
  --luft-3: 20px;
  --luft-4: 32px;

  /* Alias fuer aeltere Stellen in app.js */
  --karte: var(--flaeche);
  --karte-innen: var(--flaeche-hoch);
  --grund: var(--flaeche-tief);
  --rand: var(--linie);
  --linie2: var(--linie-stark);
  --leise: var(--text-2);
  --tinte3: var(--text-3);
  --akzent-dunkel: #ff7a00;
}

/* ---------------------------------------------------------------------------
   Reset
   --------------------------------------------------------------------------- */
@layer reset {
  html { box-sizing: border-box; }
  *, *::before, *::after { box-sizing: inherit; }
  body, h1, h2, h3, p, figure { margin: 0; }
  button, input, select, textarea { font: inherit; color: inherit; }
  img, svg { display: block; }
  table { border-collapse: collapse; }
  details > summary { list-style: none; }
  details > summary::-webkit-details-marker { display: none; }
  /* "hidden" gilt immer - auch gegen display:flex/grid der Bausteine */
  [hidden] { display: none !important; }
}

/* ---------------------------------------------------------------------------
   Grundlagen
   --------------------------------------------------------------------------- */
@layer base {
  html, body { height: 100%; }
  body {
    background: var(--bg);
    color: var(--text);
    font: 14px/1.5 var(--font-sans);
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
  }
  ::selection { background: rgba(255, 144, 0, .3); }

  :where(html) { scrollbar-width: thin; scrollbar-color: var(--linie-stark) transparent; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: var(--linie-stark); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
  ::-webkit-scrollbar-thumb:hover { background: #46464e; background-clip: padding-box; }

  a { color: var(--akzent-text); text-decoration: none; }
  a:hover { text-decoration: underline; }
  code { font-family: var(--font-mono); font-size: .92em; color: var(--akzent-text); }
  .mono, .zahl, .ring-zahl { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

  :where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--akzent-text);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }
}

/* ---------------------------------------------------------------------------
   Layout: Seitenleiste links, Inhalt rechts
   --------------------------------------------------------------------------- */
@layer layout {
  #app { display: grid; grid-template-columns: 232px minmax(0, 1fr); height: 100dvh; }

  #sidebar {
    display: flex; flex-direction: column;
    border-right: 1px solid var(--linie);
    background: var(--bg);
    padding: 18px 12px 12px;
    font-size: 13px;
    user-select: none;
  }
  #sidebar nav { flex: 1; overflow-y: auto; margin-top: 10px; }

  #inhalt { overflow-y: auto; scroll-padding-top: 72px; }
  .inhalt-innen { max-width: 1280px; margin: 0 auto; padding: 0 28px 72px; }

  .seite { display: none; }
  .seite.aktiv { display: block; }

  /* Seitenkopf: Titel links, Knoepfe rechts, bleibt oben stehen */
  .seiten-kopf {
    position: sticky; top: 0; z-index: 5;
    display: flex; align-items: center; justify-content: space-between; gap: var(--luft-2); flex-wrap: wrap;
    margin: 0 -28px var(--luft-3); padding: 18px 28px 14px;
    background: color-mix(in oklab, var(--bg) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--linie);
  }
  .seiten-kopf h1 { font-size: 20px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
  .seiten-kopf > div:first-child { min-width: 0; flex: 1; }
  .seiten-kopf .leiste { margin: 0; }
  .untertitel { color: var(--text-2); font-size: 12.5px; margin-top: 2px; }
  .untertitel:empty { display: none; }
  .stand { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
  .stand:empty { display: none; }

  /* Abschnittsueberschrift zwischen Bloecken */
  h2.abschnitt {
    margin: var(--luft-3) 0 var(--luft-2);
    font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3);
  }
  h2.abschnitt:first-child { margin-top: 0; }

  .zweispaltig { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: var(--luft-2); align-items: start; }
  .zweispaltig > .karte { margin-bottom: 0; }
  .dreispaltig { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--luft-2); align-items: start; }
  .dreispaltig > .karte { margin-bottom: 0; }

  @media (max-width: 900px) {
    #app { grid-template-columns: 64px minmax(0, 1fr); }
    #sidebar { padding-inline: 8px; }
    .logo-unter, .nav-text, .nav-zahl, .nav-titel, .marke-a, .marke-b { display: none !important; }
    .navlink { justify-content: center; padding-inline: 0; }
    .inhalt-innen { padding: 0 16px 56px; }
    .seiten-kopf { margin: 0 -16px var(--luft-2); padding: 14px 16px 10px; }
  }
}

/* ---------------------------------------------------------------------------
   Bausteine
   --------------------------------------------------------------------------- */
@layer components {

  /* --- Wortmarke --- */
  .logo { display: flex; align-items: center; gap: 6px; padding: 2px 6px; font-weight: 800; font-size: 18px; color: #fff; }
  .logo-icon { width: 24px; height: 24px; }
  .marke-b { padding: 1px 7px 2px; border-radius: 6px; background: var(--akzent); color: #000; }
  .logo-unter { padding: 2px 6px 0; font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }

  /* --- Navigation --- */
  .nav-titel { margin: 14px 0 4px; padding-inline: 10px; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
  .navlink {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px; border-radius: var(--radius-klein);
    color: var(--text-2); font-weight: 500; cursor: pointer; text-decoration: none;
    transition: background .12s, color .12s;
  }
  .navlink:hover { background: var(--flaeche-hoch); color: var(--text); text-decoration: none; }
  .navlink.aktiv { background: var(--akzent-hell); color: var(--akzent-text); }
  .nav-icon { width: 16px; height: 16px; flex: none; }
  .nav-icon svg { width: 16px; height: 16px; }
  .nav-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-zahl { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
  .navlink.aktiv .nav-zahl { color: var(--akzent-text); }
  .nav-zahl:empty { display: none; }

  @keyframes pochen { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

  /* --- Karten --- */
  .karte {
    background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
    padding: 16px 18px; margin-bottom: var(--luft-2);
  }
  .karte > h2 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: var(--luft-2); font-size: 13.5px; font-weight: 700; }
  .karte > h2 small { font-weight: 400; font-size: 12px; color: var(--text-3); }
  .karte > h2 .nr { align-self: center; }
  .nr {
    display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
    background: var(--akzent-hell); color: var(--akzent-text); font: 600 11px var(--font-mono); flex: none;
  }

  /* --- Zahlen --- */
  .kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--luft-2); margin-bottom: var(--luft-2); }
  .kachel { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 12px 14px; min-width: 0; }
  .kachel .titel { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); line-height: 1.3; }
  .kachel .zahl { margin-top: 6px; font-size: 22px; font-weight: 600; line-height: 1.1; letter-spacing: -.01em; }
  .kachel .unter { margin-top: 4px; font-size: 11.5px; color: var(--text-2); line-height: 1.35; }
  .kachel.gut { border-color: var(--akzent-linie); }
  .kachel.gut .zahl { color: var(--akzent-text); }
  .kachel.rot .zahl { color: var(--rot); }
  .kachel.gelb .zahl { color: var(--gelb); }
  .kachel.gruen .zahl { color: var(--gruen); }
  .kachel.grau .zahl { color: var(--grau); }
  a.kachel { color: inherit; transition: border-color .12s; }
  a.kachel:hover { border-color: var(--akzent-linie); text-decoration: none; }

  /* Zahlenzeile innerhalb einer Lage: ohne eigene Rahmen */
  .zahlenzeile { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0; margin: var(--luft-2) 0 0; }
  .zahlenzeile .kachel { background: none; border: none; border-left: 1px solid var(--linie); border-radius: 0; padding: 4px 14px; }
  .zahlenzeile .kachel:first-child { border-left: none; padding-left: 0; }
  .zahlenzeile .kachel .zahl { font-size: 18px; margin-top: 2px; }

  /* --- Lage: was die Maschine gerade tut --- */
  .lage { background: var(--flaeche); border: 1px solid var(--akzent-linie); border-radius: var(--radius); padding: 16px 18px; margin-bottom: var(--luft-2); }
  .lage[hidden] { display: none; }
  .lage.wartet { border-color: var(--linie); }
  .lage-kopf { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .lage-text { flex: 1; min-width: 240px; }
  .lage-phase { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--akzent-text); }
  .lage.wartet .lage-phase { color: var(--text-3); }
  .lage-ziel { font-size: 17px; font-weight: 700; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lage .leiste { margin: 0; }
  .puls { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--akzent); flex: none; }
  .puls::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--akzent); animation: welle 2.2s ease-out infinite; }
  .lage.wartet .puls { background: var(--linie-stark); }
  .lage.wartet .puls::after { animation: none; display: none; }
  @keyframes welle { from { transform: scale(.5); opacity: .8; } to { transform: scale(2.1); opacity: 0; } }

  /* Dauerlauf-Zeile: schmal, steht tagelang da */
  .dauer-streifen { display: flex; align-items: center; gap: 12px; margin-bottom: var(--luft-2); padding: 8px 14px; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); font-size: 12.5px; }
  .dauer-streifen[hidden] { display: none; }
  .dauer-puls { width: 8px; height: 8px; border-radius: 50%; background: var(--akzent); flex: none; animation: pochen 1.4s ease-in-out infinite; }
  .dauer-text { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; flex: 1; min-width: 0; }
  .dauer-text b { color: var(--akzent-text); }
  .dauer-balken { width: 140px; height: 4px; border-radius: 2px; background: var(--linie); overflow: hidden; flex: none; }
  .dauer-balken > span { display: block; height: 100%; width: 0; background: var(--akzent); transition: width .5s; }

  /* Protokoll zum Aufklappen */
  details.protokoll { margin-top: var(--luft-2); }
  details.protokoll > summary, details.einstellungen > summary, details.mehr > summary {
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 600; color: var(--text-2); padding: 4px 0;
  }
  details.protokoll > summary::before, details.einstellungen > summary::before, details.mehr > summary::before {
    content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg); transition: transform .15s; margin-right: 2px;
  }
  details[open].protokoll > summary::before, details[open].einstellungen > summary::before, details[open].mehr > summary::before { transform: rotate(45deg); }
  details.protokoll > summary:hover, details.einstellungen > summary:hover, details.mehr > summary:hover { color: var(--akzent-text); }
  details.einstellungen { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 10px 18px; margin-bottom: var(--luft-2); }
  details.einstellungen[hidden] { display: none; }
  details.einstellungen[open] { padding-bottom: 18px; }
  details.einstellungen > summary { width: 100%; }
  details.einstellungen > :not(summary) { margin-top: var(--luft-2); }
  details.mehr { margin: -4px 0 var(--luft-2); }

  /* --- Knoepfe --- */
  .knopf {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; min-height: 32px;
    border-radius: var(--radius-klein); border: 1px solid var(--linie-stark); background: var(--flaeche-hoch);
    color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: none;
    transition: border-color .12s, background .12s, color .12s;
  }
  .knopf:hover:not([disabled]) { border-color: var(--akzent-linie); color: var(--akzent-text); text-decoration: none; }
  .knopf.haupt { background: var(--akzent); border-color: var(--akzent); color: #000; }
  .knopf.haupt:hover:not([disabled]) { background: #ffa21f; border-color: #ffa21f; color: #000; }
  .knopf.rot, .knopf.warn { border-color: var(--rot); color: var(--rot); background: transparent; }
  .knopf.rot:hover:not([disabled]), .knopf.warn:hover:not([disabled]) { background: var(--rot-hell); color: var(--rot); }
  .knopf.klein { padding: 4px 10px; min-height: 26px; font-size: 12px; }
  .knopf.gross { padding: 9px 20px; min-height: 38px; font-size: 14px; }
  .knopf[disabled] { opacity: .4; cursor: default; }
  .knopf:active:not([disabled]) { transform: translateY(1px); }
  .leiste { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: var(--luft-2); }
  .leiste > .notiz { margin: 0; }
  .leiste input[type=search], .leiste input[type=text], .leiste select { width: auto; }
  .leiste.oben { margin: 0 0 var(--luft-2); }

  /* --- Etiketten, Chips --- */
  .marke { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font: 600 11px/1.6 var(--font-mono); white-space: nowrap; background: var(--flaeche-hoch); color: var(--text-2); }
  .marke.rot { background: var(--rot-hell); color: var(--rot); }
  .marke.gelb { background: var(--gelb-hell); color: var(--gelb); }
  .marke.gruen { background: var(--gruen-hell); color: var(--gruen); }
  .marke.blau { background: var(--akzent-hell); color: var(--akzent-text); }
  .marke.grau { background: var(--flaeche-hoch); color: var(--text-2); }

  .chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .chips:empty { display: none; }
  .chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px;
    border: 1px solid var(--linie-stark); background: transparent; color: var(--text-2); font-size: 12px; cursor: pointer; line-height: 1.4;
  }
  .chip:hover { border-color: var(--akzent-linie); color: var(--akzent-text); }
  .chip.aktiv { border-color: var(--akzent); background: var(--akzent-hell); color: var(--akzent-text); font-weight: 600; }
  .chip b { font-family: var(--font-mono); font-weight: 600; }

  /* --- Formulare --- */
  label { display: block; margin: 10px 0 4px; font-size: 12px; font-weight: 600; color: var(--text-2); }
  label .notiz { font-weight: 400; margin-left: 4px; }
  label.klein { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-weight: 500; font-size: 12.5px; }
  label.klein input[type=checkbox] { width: 15px; height: 15px; margin: 0; accent-color: var(--akzent); }
  :where(input, select, textarea) {
    width: 100%; min-height: 34px; padding: 6px 10px;
    border: 1px solid var(--linie-stark); border-radius: var(--radius-klein);
    background: var(--flaeche-tief); color: var(--text); font-size: 13px;
  }
  select { padding-right: 28px; }
  :where(input, select, textarea):focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-hell); }
  :where(input, textarea)::placeholder { color: var(--text-3); }
  input[type=checkbox], input[type=radio] { width: auto; min-height: 0; box-shadow: none; }
  input[type=number] { font-family: var(--font-mono); font-size: 12.5px; }
  textarea { min-height: 90px; resize: vertical; font: 12.5px/1.5 var(--font-mono); }
  .feld-reihe { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
  .feld-reihe > * { flex: 1; min-width: 150px; }
  .feld-reihe > * > label:first-child { margin-top: 0; }
  .feld-reihe > .schmal { flex: 0 0 130px; min-width: 110px; }
  .feld-reihe > .knopf { flex: 0 0 auto; }
  .feld-reihe + .feld-reihe { margin-top: var(--luft-2); }

  /* Schalter */
  .wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 6px 14px; }
  .wahl-feld { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; min-width: 0; margin: 0; font-weight: 500; color: var(--text); }
  .wahl-feld.breit { grid-column: 1 / -1; }
  .wahl-feld input[type=checkbox] {
    appearance: none; margin: 0; flex: none; cursor: pointer;
    width: 30px; height: 17px; border-radius: 999px; position: relative;
    background: var(--linie-stark); transition: background .15s;
  }
  .wahl-feld input[type=checkbox]::after { content: ''; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--text); transition: transform .15s; }
  .wahl-feld input[type=checkbox]:checked { background: var(--akzent); }
  .wahl-feld input[type=checkbox]:checked::after { transform: translateX(13px); background: #000; }
  .wahl-inhalt { display: flex; flex-direction: column; min-width: 0; }
  .wahl-inhalt b { font-size: 13px; font-weight: 500; line-height: 1.35; }
  .wahl-inhalt .notiz { font-size: 11.5px; color: var(--text-3); }

  /* --- Tabellen --- */
  .tabelle-huelle { overflow-x: auto; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
  table { width: 100%; font-size: 12.5px; }
  th, td { padding: 8px 12px; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: middle; }
  th { position: sticky; top: 0; z-index: 1; background: var(--flaeche); font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
  td { white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
  td.umbruch, td.leer-hinweis { white-space: normal; max-width: none; }
  tbody tr:last-child td { border-bottom: none; }
  tbody tr:hover td { background: var(--flaeche-hoch); }
  tbody tr.anklickbar { cursor: pointer; }
  td.rechts, th.rechts { text-align: right; }
  td b { font-weight: 600; }
  td.mono, .mono { font-size: 11.5px; }
  .leer-hinweis { padding: 28px 20px; text-align: center; color: var(--text-3); font-size: 13px; }

  .blaettern, .blaetterleiste { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: var(--luft-2); }
  .seite-von { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); }

  /* --- Zeilenlisten (Panels, Proxys, Schluessel) --- */
  .zeilen-liste { border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; background: var(--flaeche); }
  .smtp-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--linie); }
  .smtp-row:last-child { border-bottom: none; }
  .smtp-row .haupt-teil { flex: 1; min-width: 0; }
  .smtp-row .titel-zeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .smtp-row b { font-size: 13.5px; font-weight: 600; }
  .smtp-row .meta { font-size: 12px; color: var(--text-2); margin-top: 2px; }
  .smtp-row .aktionen { display: flex; gap: 6px; flex: none; }
  .smtp-row.aus { opacity: .5; }

  /* --- Hinweise --- */
  .notiz { color: var(--text-2); font-size: 12.5px; }
  .notiz.stark { color: var(--text); font-weight: 600; }
  .schild { padding: 10px 14px; margin-bottom: var(--luft-2); border-radius: var(--radius); border: 1px solid var(--linie); background: var(--flaeche); color: var(--text-2); font-size: 13px; line-height: 1.5; }
  .schild[hidden] { display: none; }
  .schild.gut { border-color: var(--gruen); background: var(--gruen-hell); color: var(--gruen); }
  .schild.warn { border-color: var(--gelb); background: var(--gelb-hell); color: var(--gelb); }
  .schild.fehler { border-color: var(--rot); background: var(--rot-hell); color: var(--rot); }
  .schild.akzent { border-color: var(--akzent-linie); background: var(--akzent-hell); color: var(--akzent-text); }
  .schild a { color: inherit; text-decoration: underline; }
  .alarm-band { margin: 0 0 var(--luft-3); }

  .code-block { padding: 10px 12px; border: 1px solid var(--linie); border-radius: var(--radius-klein); background: var(--flaeche-tief); font: 12px/1.6 var(--font-mono); white-space: pre-wrap; overflow: auto; max-height: 240px; }
  .schluessel-kasten { padding: 10px 12px; margin: 8px 0; border: 1px solid var(--akzent-linie); border-radius: var(--radius-klein); background: var(--flaeche-tief); font: 12.5px var(--font-mono); color: var(--akzent-text); word-break: break-all; }
  .kopier-zeile { display: flex; gap: 8px; align-items: stretch; }
  .kopier-zeile .knopf { flex: none; }
  .detail-gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 20px; font-size: 13px; }
  .detail-gitter b { display: block; margin-bottom: 2px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }

  /* --- Fortschritt, Ring --- */
  .fortschritt { height: 5px; margin: var(--luft-2) 0 0; border-radius: 3px; background: var(--linie); overflow: hidden; }
  .fortschritt > div { height: 100%; width: 0; background: var(--akzent); transition: width .3s ease-out; }
  .ring-block { position: relative; width: 112px; height: 112px; flex: none; }
  .ring { width: 112px; height: 112px; transform: rotate(-90deg); }
  .ring circle { fill: none; stroke-width: 9; stroke-linecap: round; }
  .ring-bahn { stroke: var(--linie); }
  .ring-fuellung { stroke: var(--akzent); transition: stroke-dashoffset .45s ease-out; }
  .ring-mitte { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
  .ring-zahl { font-size: 20px; font-weight: 600; }
  .ring-titel { font-size: 11px; color: var(--text-2); }

  /* Stufen der Anreicherung */
  .stufen { display: flex; gap: 10px; flex-wrap: wrap; }
  .stufe { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 160px; padding: 8px 12px; border: 1px solid var(--linie); border-radius: var(--radius-klein); background: var(--flaeche-tief); transition: border-color .2s; }
  .stufe b { display: block; font-size: 12.5px; }
  .stufe .notiz { font: 11.5px var(--font-mono); }
  .stufe-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--linie-stark); flex: none; }
  .stufe.aktiv { border-color: var(--akzent-linie); }
  .stufe.aktiv .stufe-punkt { background: var(--akzent); animation: pochen 1.2s ease-in-out infinite; }
  .stufe.fertig .stufe-punkt { background: var(--gruen); }

  /* --- Reiter --- */
  .reiter { display: flex; gap: 4px; margin-bottom: var(--luft-3); border-bottom: 1px solid var(--linie); overflow-x: auto; }
  .reiter-knopf { background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 8px 12px; font-size: 13px; font-weight: 500; color: var(--text-2); cursor: pointer; white-space: nowrap; border-radius: 0; }
  .reiter-knopf:hover { color: var(--text); }
  .reiter-knopf.aktiv { color: var(--text); border-bottom-color: var(--akzent); font-weight: 600; }
  .reiter-zahl { margin-left: 6px; font: 600 11px var(--font-mono); color: var(--text-3); }
  .reiter-knopf.aktiv .reiter-zahl { color: var(--akzent-text); }
  .reiter-zahl:empty { display: none; }
  .reiter-inhalt { display: none; }
  .reiter-inhalt.aktiv { display: block; }
  .karte .reiter { margin-bottom: var(--luft-2); }

  /* --- Dialog --- */
  .dialog-hintergrund { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px; background: rgba(0, 0, 0, .7); }
  .dialog-hintergrund[hidden] { display: none; }
  .glas-panel { position: relative; width: min(680px, 100%); max-height: 88dvh; overflow-y: auto; padding: 24px; background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: 12px; box-shadow: var(--schatten); }
  .glas-panel h2 { margin-bottom: 6px; font-size: 17px; }
  .dialog-zu { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; padding: 0; display: grid; place-items: center; border-radius: var(--radius-klein); border: 1px solid var(--linie-stark); background: var(--flaeche-hoch); color: var(--text-2); cursor: pointer; }
  .dialog-zu:hover { border-color: var(--rot); color: var(--rot); }

  /* --- Anmeldung --- */
  .anmelde-hintergrund { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: var(--bg); }
  .anmelde-hintergrund[hidden] { display: none; }
  .anmelde-panel { width: min(360px, 100%); }
  .anmelde-panel .logo { justify-content: center; font-size: 22px; }
  .anmelde-panel .logo-unter { text-align: center; margin-bottom: 20px; }
  .anmelde-panel .knopf { width: 100%; justify-content: center; }

  /* --- Ablage fuer Dateien --- */
  .ablage { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px 20px; text-align: center; cursor: pointer; border: 1.5px dashed var(--linie-stark); border-radius: var(--radius); margin: 0; font-weight: 500; }
  .ablage:hover, .ablage.drueber { border-color: var(--akzent); background: var(--akzent-hell); }

  /* --- Vorschlagsfelder (Radar) --- */
  .vorschlag-suche { margin-top: 6px; }
  .vorschlag-feld { margin-top: 6px; max-height: 110px; overflow-y: auto; padding: 8px; border: 1px solid var(--linie); border-radius: var(--radius-klein); background: var(--flaeche-tief); align-content: flex-start; }
  .vorschlag-feld .chip { padding: 3px 9px; font-size: 11.5px; }
  .vorschlag-leer { color: var(--text-3); font-size: 12px; padding: 4px; }

  /* --- Anschreiben-Pruefer --- */
  .ampel-gross { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: var(--luft-2); border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche-tief); }
  .ampel-punkt { width: 32px; height: 32px; border-radius: 50%; flex: none; background: var(--grau); }
  .ampel-gross.gruen .ampel-punkt { background: var(--gruen); }
  .ampel-gross.gelb .ampel-punkt { background: var(--gelb); }
  .ampel-gross.rot .ampel-punkt { background: var(--rot); }
  .ampel-gross b { display: block; font-size: 15px; }
  .fund { display: flex; gap: 12px; align-items: flex-start; padding: 10px 14px; border-bottom: 1px solid var(--linie); }
  .fund:last-child { border-bottom: none; }
  .fund .punkt { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 6px; background: var(--grau); }
  .fund.fehler .punkt { background: var(--rot); }
  .fund.warnung .punkt { background: var(--gelb); }
  .fund b { display: block; font-size: 13px; margin-bottom: 2px; }
  .fund .rat { font-size: 12px; color: var(--text-2); }

  /* --- Diagramme (reines SVG aus app.js) --- */
  .viz { position: relative; }
  .viz-svg { display: block; width: 100%; height: auto; }
  .viz-gitter { stroke: rgba(255, 255, 255, .06); stroke-width: 1; }
  .viz-achse { fill: var(--text-3); font-size: 10px; font-family: var(--font-mono); }
  .viz-endwert { fill: var(--text-2); font-size: 10.5px; font-family: var(--font-mono); }
  .viz-punkt { stroke: var(--flaeche); stroke-width: 2; }
  .viz-kreuz { stroke: rgba(255, 255, 255, .25); stroke-width: 1; pointer-events: none; }
  .viz-legende { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 11.5px; color: var(--text-2); }
  .viz-legende span { display: inline-flex; align-items: center; gap: 6px; }
  .viz-legende i, .viz-tip i { display: inline-block; width: 14px; height: 2px; border-radius: 2px; flex: none; }
  .viz-tip { position: absolute; z-index: 3; pointer-events: none; min-width: 150px; padding: 8px 10px; background: var(--flaeche-hoch); border: 1px solid var(--linie-stark); border-radius: var(--radius-klein); box-shadow: var(--schatten); font-size: 12px; color: var(--text-2); }
  .viz-tip b { display: block; margin-bottom: 4px; font: 600 10.5px var(--font-mono); color: var(--text-3); }
  .viz-tip div { display: flex; align-items: center; gap: 7px; line-height: 1.6; }
  .viz-tip strong { min-width: 44px; text-align: right; font-family: var(--font-mono); font-size: 12px; color: var(--text); }
  .viz-tabelle { margin-top: 6px; }
  .viz-tabelle > summary { cursor: pointer; display: inline-block; font-size: 11px; color: var(--text-3); }
  .viz-tabelle > summary:hover { color: var(--akzent-text); }
  .viz-tabelle .tabelle-huelle { margin-top: 6px; max-height: 220px; overflow-y: auto; }
  .funken { display: block; }
}

/* ---------------------------------------------------------------------------
   Seiten-Eigenheiten
   --------------------------------------------------------------------------- */
@layer pages {
  /* Anreicherung: Ring links, Zahlen rechts */
  .anreicherung-kopf { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
  .anreicherung-kopf > div:last-child { flex: 1; min-width: 300px; }
  .anreicherung-kopf .kacheln { margin-bottom: 0; }

  /* Zulauf-Liste der Anreicherung */
  #a-strom { max-height: 360px; overflow-y: auto; }

  /* Werkzeuge: grosses Textfeld */
  #w-text { min-height: 200px; }
}

/* ---------------------------------------------------------------------------
   Bereiche: "Leads" und "Warmup" (2026-10-05)
   --------------------------------------------------------------------------- */
@layer components {
  /* Ein Block je Bereich, untereinander. Der aufgeklappte Bereich ist ein
     Kasten mit orangem Kopf und eingerueckter Seitenliste an einer
     Fuehrungslinie - eingeklappte Bereiche sind nur eine flache Zeile. */
  .bereich { margin: 4px 0; padding: 0; border: 1px solid transparent; border-radius: var(--radius); }
  .bereich.aktiv { background: var(--flaeche); border-color: var(--linie); padding: 4px 4px 8px; }
  .bereich.aktiv:has(> .bereich-knopf.zu) { background: none; border-color: transparent; padding: 0; }
  .bereich-knopf {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 8px 10px; border: none; border-radius: var(--radius-klein);
    background: transparent; color: var(--text-2); text-align: left;
    font: 700 13px/1.2 var(--font-sans); letter-spacing: .02em; cursor: pointer;
    transition: background .12s, color .12s;
  }
  .bereich-knopf:hover { color: var(--text); background: var(--flaeche-hoch); }
  .bereich-knopf.aktiv { color: var(--text); }
  .bereich-knopf.aktiv:not(.zu), .bereich-knopf.aktiv:not(.zu):hover { background: var(--akzent); color: #000; }
  .bereich-knopf:focus-visible { outline: 2px solid var(--akzent-text); outline-offset: 1px; }
  .bereich-icon { width: 16px; height: 16px; flex: none; color: var(--text-3); }
  .bereich-icon svg { width: 16px; height: 16px; }
  .bereich-knopf.aktiv .bereich-icon { color: var(--akzent-text); }
  .bereich-knopf.aktiv:not(.zu) .bereich-icon { color: #000; }
  .bereich-text { flex: 1; }
  .bereich-pfeil {
    width: 7px; height: 7px; margin-right: 4px; flex: none; opacity: .55;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg); transition: transform .15s;
  }
  .bereich-knopf.aktiv:not(.zu) .bereich-pfeil { transform: rotate(45deg); opacity: .9; }
  .nav-bereich { margin: 6px 0 0 13px; padding-left: 7px; border-left: 2px solid var(--akzent-linie); }
  .nav-bereich[hidden] { display: none; }
  .nav-bereich .nav-titel:first-child { margin-top: 6px; }

  @media (max-width: 900px) {
    .bereich-text, .bereich-pfeil { display: none !important; }
    .bereich-knopf { justify-content: center; padding-inline: 0; }
    .bereich.aktiv { padding: 2px; }
    .nav-bereich { margin-left: 0; padding-left: 0; border-left: none; }
  }
}

@layer pages {
  /* Steigerungsplan: ein Balken je Tag, bis der Deckel erreicht ist */
  .stufenleiter { display: flex; gap: 4px; align-items: flex-end; height: 132px; margin-top: var(--luft-3); overflow-x: auto; padding-bottom: 2px; }
  .stufenleiter:empty { display: none; }
  .stufe-balken { flex: 1; min-width: 24px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; color: var(--text-3); font-size: 10.5px; }
  .stufe-balken i { display: block; width: 100%; height: var(--h, 10%); border-radius: 4px 4px 0 0; background: var(--akzent-hell); border: 1px solid var(--akzent-linie); border-bottom: none; }
  .stufe-balken:last-child i { background: var(--akzent); border-color: var(--akzent); }
  .stufe-balken b { font: 600 11px var(--font-mono); color: var(--text); }
  .stufe-balken span { font-family: var(--font-mono); }

  /* Rollen-Ueberschrift ueber jeder Postfachgruppe */
  .rollen-kopf { margin: var(--luft-3) 0 6px; font-size: 13px; }
  .rollen-kopf:first-child { margin-top: 0; }
  .rollen-kopf b { font-weight: 700; }
  #wp-liste .zeilen-liste { margin-bottom: var(--luft-2); }

  /* Postfaecher: Anbieter-Chips und Stapel-Ergebnisse */
  #wp-chips { margin-bottom: var(--luft-2); }
  #wp-stapel .tabelle-huelle { max-height: 320px; overflow-y: auto; }
  #wp-stapel-tabelle td.umbruch { font-size: 12px; }
  #wp-masse-text { min-height: 140px; }

  /* Dialog-Abschnitte (Postfach anlegen) */
  .dialog-abschnitt { margin: 16px 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
  .dialog-abschnitt + .feld-reihe { margin-top: 0; }
}

/* ---------------------------------------------------------------------------
   Warmup – Neugestaltung 06.10.2026

   Eine Sprache fuer alle Warmup-Seiten. Das eine Element, an dem man den
   Bereich erkennt, ist die Aufwaermkurve: ein Balken je Tag des
   Steigerungsplans. Erledigte Tage gluehen orange, der heutige leuchtet,
   kommende sind kalt. Alles andere bleibt ruhig.
   --------------------------------------------------------------------------- */
@layer pages {
  .ton-gruen { color: var(--gruen); }
  .ton-gelb  { color: var(--gelb); }
  .ton-rot   { color: var(--rot); }
  .ton-blau  { color: var(--akzent-text); }
  .ton-grau  { color: var(--text-3); }
  a.ton-rot { text-decoration: underline; text-underline-offset: 2px; }

  /* Zustand neben der Ueberschrift */
  .wm-zustand { display: inline-flex; align-items: center; gap: 7px; margin-left: 10px; padding: 3px 10px 3px 8px; border-radius: 999px;
    vertical-align: 4px; font: 600 11.5px/1.4 var(--font-sans); letter-spacing: .02em; background: var(--flaeche-hoch); color: var(--text-2); }
  .wm-zustand i { width: 7px; height: 7px; border-radius: 50%; background: var(--linie-stark); }
  .wm-zustand.aktiv { background: var(--akzent-hell); color: var(--akzent-text); }
  .wm-zustand.aktiv i { background: var(--akzent); box-shadow: 0 0 0 3px rgba(255, 144, 0, .18); animation: pochen 1.6s ease-in-out infinite; }
  .wm-zustand.wartet { color: var(--text); }
  .wm-zustand.wartet i { background: var(--gelb); }

  /* Hauptzeile der Uebersicht */
  .wm-hero { display: grid; grid-template-columns: 1.1fr 1fr 1fr; background: var(--flaeche); border: 1px solid var(--linie);
    border-radius: 12px; margin-bottom: var(--luft-2); overflow: hidden; }
  .wm-hero-zelle { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px 18px; min-width: 0; }
  .wm-hero-zelle + .wm-hero-zelle { border-left: 1px solid var(--linie); }
  .wm-label { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); }
  .wm-gross { font-size: 40px; font-weight: 700; line-height: 1.05; letter-spacing: -.025em; font-variant-numeric: tabular-nums; color: var(--text); }
  .wm-gross small { font-size: 16px; font-weight: 600; letter-spacing: 0; color: var(--text-3); margin-left: 2px; }
  .wm-gross.ton-gruen, .wm-gross.ton-gelb, .wm-gross.ton-rot { color: inherit; }
  .wm-gross.ton-gruen { color: var(--gruen); }
  .wm-gross.ton-gelb { color: var(--gelb); }
  .wm-gross.ton-rot { color: var(--rot); }
  .wm-fortschritt { height: 6px; border-radius: 999px; background: var(--flaeche-hoch); overflow: hidden; margin: 4px 0 2px; }
  .wm-fortschritt i { display: block; height: 100%; border-radius: inherit; background: var(--akzent); transition: width .4s ease; }

  .wm-zeiten { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 2px 4px 14px; font-size: 12.5px; color: var(--text); }
  .wm-zeiten em { font-style: normal; color: var(--text-3); margin-right: 6px; }

  .wm-spalten { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--luft-2); align-items: start; }
  .wm-spalten > .karte { margin-bottom: 0; }

  /* Avatar */
  .wm-avatar { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px;
    background: hsl(var(--farbton, 30) 32% 20%); color: hsl(var(--farbton, 30) 75% 78%);
    font: 700 12px/1 var(--font-sans); letter-spacing: .03em; box-shadow: inset 0 0 0 1px hsl(var(--farbton, 30) 40% 30% / .6); }
  .wm-avatar.gross { width: 42px; height: 42px; border-radius: 12px; font-size: 14.5px; }

  /* Statuspunkt */
  .wm-status { display: inline-flex; align-items: center; gap: 7px; flex: none; font-size: 12px; font-weight: 600; white-space: nowrap; }
  .wm-status i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
  .wm-status.ton-grau { color: var(--text-3); }
  .wm-status.ton-blau { color: var(--akzent-text); }

  /* Die Aufwaermkurve */
  .wm-kurve { display: flex; align-items: flex-end; gap: 12px; min-width: 0; }
  .wm-kurve-balken { flex: 1; min-width: 0; height: 30px; display: flex; align-items: flex-end; gap: 2px; }
  .wm-kurve-balken i { flex: 1; min-width: 2px; height: var(--h); border-radius: 2px 2px 1px 1px; background: var(--linie); }
  .wm-kurve-balken i.warm { background: color-mix(in oklab, var(--akzent) 58%, var(--flaeche)); }
  .wm-kurve-balken i.heute { background: var(--akzent); box-shadow: 0 0 12px rgba(255, 144, 0, .55); animation: wmGluehen 2.4s ease-in-out infinite; }
  .wm-kurve-text { flex: none; font: 600 11.5px/1 var(--font-mono); color: var(--text-2); white-space: nowrap; padding-bottom: 1px; }
  .wm-kurve.kompakt .wm-kurve-balken { height: 20px; gap: 1.5px; }
  @keyframes wmGluehen { 0%, 100% { box-shadow: 0 0 8px rgba(255, 144, 0, .35); } 50% { box-shadow: 0 0 16px rgba(255, 144, 0, .7); } }

  /* Postfach-Zeilen der Uebersicht */
  .wm-zeile { display: grid; grid-template-columns: 32px minmax(120px, 1fr) minmax(110px, 1.1fr) 62px 96px; align-items: center; gap: 12px;
    padding: 9px 4px; border-bottom: 1px solid var(--linie); color: inherit; text-decoration: none; border-radius: 6px; }
  .wm-zeile:last-of-type { border-bottom: none; }
  .wm-zeile:hover { background: var(--flaeche-hoch); text-decoration: none; }
  .wm-zeile-name { display: flex; flex-direction: column; min-width: 0; }
  .wm-zeile-name b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wm-zeile-name .notiz { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wm-zeile-wert { font: 12px var(--font-mono); color: var(--text-2); text-align: right; }
  .wm-zeile-wert b { color: var(--text); font-weight: 600; }
  .wm-zeile .wm-status { justify-self: end; }
  .wm-mehr { display: block; padding: 10px 4px 2px; font-size: 12.5px; color: var(--akzent-text); }

  /* Leerer Zustand */
  .wm-leer { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px 4px; color: var(--text-2); font-size: 13px; }
  .wm-leer b { color: var(--text); font-size: 14px; }
  .wm-leer.gross { grid-column: 1 / -1; padding: 34px 28px; border: 1px dashed var(--linie-stark); border-radius: 12px; align-items: center; text-align: center; }
  .wm-leer.gross span { max-width: 560px; }
  .wm-leer-knoepfe { display: flex; gap: 8px; margin-top: 6px; }

  /* Haupt / Arbeit */
  .wm-rollen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: var(--luft-2); }
  .wm-rolle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; text-align: left; cursor: pointer;
    border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche); color: var(--text-2); transition: border-color .12s, background .12s; }
  .wm-rolle:hover { border-color: var(--linie-stark); color: var(--text); }
  .wm-rolle.aktiv { border-color: var(--akzent-linie); background: linear-gradient(180deg, var(--akzent-hell), transparent 140%); color: var(--text); }
  .wm-rolle:focus-visible { outline: 2px solid var(--akzent-text); outline-offset: 2px; }
  .wm-rolle-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .wm-rolle-text b { font-size: 14px; font-weight: 700; }
  .wm-rolle-text span { font-size: 12px; color: var(--text-3); }
  .wm-rolle-zahl { display: flex; flex-direction: column; align-items: flex-end; font: 700 22px/1 var(--font-mono); }
  .wm-rolle.aktiv .wm-rolle-zahl { color: var(--akzent-text); }
  .wm-rolle-zahl em { font: 600 11px var(--font-sans); font-style: normal; color: var(--rot); margin-top: 4px; }

  /* Postfach-Karten */
  .wm-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
  .wm-karte { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px 14px; background: var(--flaeche);
    border: 1px solid var(--linie); border-radius: 12px; transition: border-color .15s; min-width: 0; }
  .wm-karte:hover { border-color: var(--linie-stark); }
  .wm-karte.fehler { border-color: color-mix(in oklab, var(--rot) 40%, var(--linie)); }
  .wm-karte.aus { opacity: .62; }
  .wm-karte-kopf { display: flex; align-items: flex-start; gap: 12px; }
  .wm-karte-name { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
  .wm-karte-name b { font-size: 14.5px; font-weight: 700; letter-spacing: -.005em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wm-karte-name .mono { font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wm-karte-name .notiz { font-size: 12px; }
  .wm-karte-kopf .wm-status { margin-top: 3px; }

  .wm-werte { display: grid; gap: 7px; margin: 0; font-size: 12.5px; }
  .wm-werte > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: baseline; }
  .wm-werte dt { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
  .wm-werte dd { margin: 0; color: var(--text-2); min-width: 0; }
  .wm-werte dd b { color: var(--text); font-weight: 600; }
  .wm-wege { display: flex; flex-wrap: wrap; gap: 2px 12px; }
  .wm-server { display: block; font-size: 11.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .wm-fehler { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 8px;
    background: var(--rot-hell); border-left: 3px solid var(--rot); font-size: 12.5px; }
  .wm-fehler-zeile { display: flex; flex-direction: column; gap: 1px; }
  .wm-fehler-zeile b { color: var(--rot); font-weight: 700; }
  .wm-fehler-zeile span { color: var(--text-2); line-height: 1.45; }
  .wm-fehler details summary { cursor: pointer; font-size: 11.5px; color: var(--text-3); list-style: none; }
  .wm-fehler details summary::-webkit-details-marker { display: none; }
  .wm-fehler details summary::before { content: '▸ '; }
  .wm-fehler details[open] summary::before { content: '▾ '; }
  .wm-fehler code { display: block; margin-top: 6px; padding: 8px 10px; border-radius: 6px; background: var(--flaeche-tief);
    font: 11.5px/1.5 var(--font-mono); color: var(--text-2); white-space: pre-wrap; word-break: break-word; }

  .wm-karte-fuss { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--linie); }
  .wm-luecke { flex: 1; }
  .wm-menue { position: relative; }
  .wm-menue > summary { list-style: none; letter-spacing: .1em; }
  .wm-menue > summary::-webkit-details-marker { display: none; }
  .wm-menue-liste { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 160px; padding: 5px;
    background: var(--flaeche-hoch); border: 1px solid var(--linie-stark); border-radius: 10px; box-shadow: var(--schatten); }
  .wm-menue-liste button { display: block; width: 100%; padding: 8px 10px; border: none; border-radius: 6px; background: none;
    color: var(--text); font: 500 13px var(--font-sans); text-align: left; cursor: pointer; }
  .wm-menue-liste button:hover { background: var(--flaeche); }
  .wm-menue-liste button.rot { color: var(--rot); }

  /* Testergebnis im Dialog */
  .wm-test { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: var(--flaeche-tief); border: 1px solid var(--linie); }
  .wm-test + .wm-test { margin-top: 8px; }
  .wm-test-zeichen { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; font: 700 13px var(--font-sans); }
  .wm-test.ok .wm-test-zeichen { background: var(--gruen-hell); color: var(--gruen); }
  .wm-test.nein .wm-test-zeichen { background: var(--rot-hell); color: var(--rot); }
  .wm-test b { font-size: 13.5px; }
  .wm-test .notiz { display: block; margin-top: 2px; line-height: 1.45; }
  .wm-test.nein .wm-test-ursache { color: var(--rot); font-weight: 600; }

  /* Mailverlauf: Absender -> Empfaenger */
  .wm-weg { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .wm-weg .wm-avatar { width: 26px; height: 26px; border-radius: 7px; font-size: 10.5px; }
  .wm-weg-pfeil { color: var(--text-3); }
  .wm-weg-name { display: flex; flex-direction: column; min-width: 0; max-width: 170px; }
  .wm-weg-name b { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
  .wm-weg-name span { font: 11px var(--font-mono); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; }

  /* Steigerungsplan in derselben Sprache wie die Kurve */
  .stufe-balken i { background: color-mix(in oklab, var(--akzent) 45%, var(--flaeche)); border: none; border-radius: 3px 3px 1px 1px; }
  .stufe-balken:last-child i { background: var(--akzent); box-shadow: 0 0 14px rgba(255, 144, 0, .45); }

  @media (max-width: 1100px) {
    .wm-spalten { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 760px) {
    .wm-hero { grid-template-columns: minmax(0, 1fr); }
    .wm-hero-zelle + .wm-hero-zelle { border-left: none; border-top: 1px solid var(--linie); }
    .wm-gross { font-size: 34px; }
    .wm-rollen { grid-template-columns: minmax(0, 1fr); }
    .wm-raster { grid-template-columns: minmax(0, 1fr); }
    .wm-zeile { grid-template-columns: 32px minmax(0, 1fr) auto; }
    .wm-zeile .wm-kurve, .wm-zeile .wm-zeile-wert { display: none; }
    .wm-weg-name { max-width: 110px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .wm-kurve-balken i.heute, .wm-zustand.aktiv i { animation: none; }
  }
}

/* Arbeitspool (07.10.2026): eine kompakte Tabelle statt Karten, feste Spalten - nie waagerecht scrollen */
@layer pages {
  .wm-pool { display: flex; flex-direction: column; gap: 10px; }
  .wm-pool-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .wm-pool-leiste p { flex: 1 1 320px; margin: 0; }
  .wm-pool-leiste input[type="search"] { width: 220px; }
  .wm-pool-huelle { border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
  .wm-pool-tabelle { table-layout: fixed; width: 100%; }
  .wm-pool-tabelle th, .wm-pool-tabelle td { padding: 5px 10px; max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
  .wm-pool-tabelle th.c-anbieter { width: 96px; }
  .wm-pool-tabelle th.c-gueltig { width: 92px; }
  .wm-pool-tabelle th.c-problem { width: 26%; }
  .wm-pool-tabelle th.c-heute { width: 72px; }
  .wm-pool-tabelle th.c-mehr { width: 40px; }
  .wm-pool-tabelle td.mono { font-weight: 500; }
  .wm-pool-tabelle td.wm-pool-mehr { overflow: visible; text-align: right; padding: 3px 6px 3px 0; }
  .wm-pool-tabelle tr.aus td { opacity: .5; }
  .wm-pool-tabelle tr.aus td.wm-pool-mehr { opacity: 1; }
  .wm-pool-tabelle .wm-status { font-size: 12px; }
  .wm-pool-tabelle .knopf.klein { padding: 0 6px; min-height: 20px; font-size: 10px; }
  .wm-pool-tabelle tbody tr:last-child td { border-bottom: none; }
  @media (max-width: 900px) { .wm-pool-tabelle .c-problem, .wm-pool-tabelle td:nth-child(4) { display: none; } }

  .wm-pool-zeile { border-top: 1px dashed var(--linie-stark); margin-top: 4px; }
  .wm-pool-avatar { background: var(--akzent-hell); color: var(--akzent-text); box-shadow: inset 0 0 0 1px var(--akzent-linie); font: 700 11px/1 var(--font-mono); }
  .wm-pool-text { font-size: 11.5px; line-height: 1.35; }
  @media (max-width: 760px) {
    .wm-pool-leiste input[type="search"] { width: 100%; }
    .wm-pool-text { display: none; }
  }
}

/* Ladeanzeige (2026-10-14): solange eine Seite oder Liste nachlaedt, laeuft
   unter dem Seitenkopf ein schmaler Balken, und der Teil, der gleich ersetzt
   wird, tritt zurueck. Vorher stand das Alte unveraendert da, bis es
   ploetzlich umsprang - man konnte alte und neue Zahlen nicht unterscheiden. */
@layer components {
  .seiten-kopf::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: linear-gradient(90deg, transparent, var(--akzent) 40%, var(--akzent-text) 60%, transparent);
    background-size: 40% 100%; background-repeat: no-repeat;
    opacity: 0; transition: opacity .2s; pointer-events: none;
  }
  .seite.laedt .seiten-kopf::after, .seite:has(.laedt) .seiten-kopf::after {
    opacity: 1; animation: ladeBalken 1.1s ease-in-out infinite;
  }
  @keyframes ladeBalken { from { background-position: -40% 0; } to { background-position: 140% 0; } }
  .tabelle-huelle.laedt, .kacheln.laedt, .viz.laedt { opacity: .5; transition: opacity .15s; }
  .stand.veraltet { color: var(--gelb); }
  @media (prefers-reduced-motion: reduce) {
    .seite.laedt .seiten-kopf::after, .seite:has(.laedt) .seiten-kopf::after { animation: none; background-size: 100% 100%; }
  }
}