/* ═══════════════════════════════════════════════════════════════════
   A68A — die Optik der ganzen Software
   ═══════════════════════════════════════════════════════════════════
   18.10.2026. Hervorgegangen aus schaltzentrale-optik.css (die Adresse
   bleibt als @import-Hülle bestehen, weil der Deploy nie löscht).

   WO SIE GILT. Für alle Seiten der A68A-Software: Start, Kunden, Wartung,
   Werkzeuge, Kundenkarte, Kundenbereich, Anmeldung — und für jedes Werkzeug,
   das auf den Rahmen umgestellt ist (a68a-rahmen.php). Papierdokumente
   (Nachweis, Protokolle, Berichte) nehmen a68a-papier.css.

   QUELLE. Miguels Design-Vorlage „Serenity" (Archiv serenity-landingpage.zip,
   UEBERGABE.md). Werte 1:1 aus deren .neu-Klassen; die eine bewusste
   Abweichung (Textakzent #507387 statt #557a8f, Kontrast) ist unten erklärt.

   DIE SCHRIFTEN WERDEN NICHT VON GOOGLE GELADEN: a68a-schriften.css.
   DIE KOPFLEISTE steht in a68a-kopf.css — getrennt, weil sie auch auf Seiten
   mit eigener (alter) Optik stehen muss, ohne deren body/p/table zu ändern.

   SCHATTEN STATT LINIEN — ABER NICHT ÜBERALL. Für dichte Listen (Kunden,
   Tabellen) gibt es .flach: dieselbe Fläche mit Linien statt Lichtern.
   ═══════════════════════════════════════════════════════════════════ */
@import url('a68a-schriften.css');
@import url('a68a-kopf.css?v=20261020g');   /* Version mitgeben, sonst bleibt eine alte Kopfleiste im Zwischenspeicher */

:root,
:root[data-theme="light"] {
  --bg:            #f0f4f8;
  --bg-soft:       #e9eef3;
  --bg-elevated:   #f0f4f8;   /* Karten tragen KEINE eigene Farbe — nur Schatten */
  --text:          #2d3748;
  --text-soft:     #455062;
  --text-mute:     #5a6578;
  /* Gegenüber der Vorlage minimal abgedunkelt — nachgemessen, nicht geschätzt:
     #557a8f kam auf 4,16:1 und #a9761a auf 3,59:1, beide unter den 4,5:1,
     die kleine Schrift braucht. Der Farbton bleibt, nur die Helligkeit gibt nach. */
  /* DIE EINE BEWUSSTE ABWEICHUNG von der Vorlage: Für TEXT (Links, kleine
     Hervorhebungen) #507387 statt #557a8f. Die Vorlagenfarbe kommt als Schrift
     auf dem Grund nur auf 4,16:1 — unter AA. Für ein Werkzeug, das selbst
     Barrierefreiheit prüft, wäre das ein Widerspruch. Knöpfe behalten
     #557a8f exakt (var(--knopf)), dort trägt weiße Schrift mit 4,60:1. */
  --accent:        #507387;   /* 4,59:1 */
  --accent-bright: #507387;
  --gold:          #e0a92e;
  --gold-deep:     #946716;   /* 4,51:1 */
  --line:          #dbe3ec;

  /* Ampel. Die Paare stammen aus der Vorlage und sind schon als Paar
     gedacht: Fläche und Schrift zusammen über 4,5:1. */
  --ok:            #2f6b49;  --ok-weich:   #d3ebdc;
  --warn:          #7a5410;  --warn-weich: #faeccd;
  --bad:           #b42828;  --bad-weich:  #fde4e4;

  /* Neumorphismus: zwei Lichter statt eines Schattens. */
  /* Ebenfalls 1:1 aus der Vorlage. */
  --sh-hi:         rgba(255,255,255,.8);
  --sh-hi-soft:    rgba(255,255,255,.6);
  --sh-lo:         rgba(163,177,198,.5);
  --sh-lo-soft:    rgba(163,177,198,.4);

  /* Der Verlauf trägt die großen Zahlen (≥24px fett, Grenze 3:1).
     --grad-klein ist derselbe Verlauf für kleine Schrift — dort gelten 4,5:1. */
  --grad-a:        #688ca1;   /* 3,25:1 */
  --grad-b:        #9281a8;   /* 3,21:1 */
  --grad-klein-a:  #4d6a7c;
  --grad-klein-b:  #786a89;   /* 4,50:1 */
  --stufe-fuellung: #e3ebf2;
  --stufe-rand:     #cbd8e3;
  /* Aus der Übergabe (UEBERGABE.md, 18.10.2026): „dünne Rahmen um Karten".
     .neu und .neu-md tragen dort zusätzlich zum Schatten 1px var(--edge).
     Ich hatte die Rahmen in Runde drei entfernt — das war falsch. */
  --edge:          rgba(120,138,165,.28);
  /* Die Knopffarbe der Vorlage, unverändert. Weiß darauf: 4,60:1 — passt. */
  --knopf:         #557a8f;

  /* 18.10.2026, vierte Runde — und diesmal nicht geschätzt. Miguel hat
     die Vorlage als Archiv geschickt; die Werte stehen jetzt 1:1 aus
     ihrer eigenen .neu-Klasse hier. Runde eins hatte sie frei erfunden,
     Runde zwei ganz weggelassen, Runde drei zu weich gemacht. Die Karten
     der Vorlage tragen GAR KEINE eigene Füllfarbe — sie heben sich allein
     durch diese beiden Lichter vom Grund ab. Deshalb muss der Schatten
     kräftig sein; ein zu leiser lässt die Fläche verschwinden.

     Original: .neu −8/8 ·20 · .neu-md −4/4 ·10 · .neu-sm −2/2 ·6 */
  --shadow:        -8px -8px 20px var(--sh-hi), 8px 8px 20px var(--sh-lo);
  --shadow-md:     -4px -4px 10px var(--sh-hi-soft), 4px 4px 10px var(--sh-lo-soft);
  --shadow-sm:     -2px -2px 6px var(--sh-hi), 2px 2px 6px var(--sh-lo-soft);
  --shadow-lift:   -10px -10px 26px var(--sh-hi), 10px 10px 26px var(--sh-lo);
  --shadow-in:     inset -4px -4px 10px var(--sh-hi), inset 4px 4px 10px var(--sh-lo);

  /* Abstandsstufen. Die Seiten benutzten --s2…--s4 aus tools.php, ohne dass
     sie hier standen — die Angabe wurde ungültig, der Abstand fiel auf 0. */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem;

  --r-klein:  12px;
  --r-mittel: 18px;
  --r-gross:  24px;
  --r-pille:  999px;

  /* Nunito liest sich, Quicksand trägt die Überschriften — wie in der
     Vorlage. Der gerundete System-Stapel bleibt als Rückfall stehen. */
  --ff: 'Nunito', "Avenir Next Rounded", "SF Pro Rounded", ui-rounded,
        "Segoe UI Variable Display", "Segoe UI", Avenir, "Trebuchet MS",
        system-ui, -apple-system, sans-serif;
  --ff-titel: 'Quicksand', var(--ff);
}

:root[data-theme="dark"] {
  --bg:            #2c3544;
  --bg-soft:       #27303e;
  --bg-elevated:   #2c3544;
  --text:          #eef2f7;
  --text-soft:     #d3dae3;
  --text-mute:     #b6c0ce;
  --accent:        #9cc0d4;
  --accent-bright: #9cc0d4;
  --gold:          #e8c06a;
  --gold-deep:     #e8c06a;
  --line:          #3b4556;

  --ok:            #a6dfbc;  --ok-weich:   #2f4b3c;
  --warn:          #f0d290;  --warn-weich: #4a3f22;
  --bad:           #f5a8a8;  --bad-weich:  #4b2d33;

  --sh-hi:         rgba(255,255,255,.07);
  --sh-hi-soft:    rgba(255,255,255,.05);
  --sh-lo:         rgba(0,0,0,.38);
  --sh-lo-soft:    rgba(0,0,0,.30);
  /* Dunkel: dieselbe Geometrie, nur andere Lichter — so hält die Vorlage
     es auch. Oben ein Hauch Weiß, unten echtes Schwarz. */
  --shadow:        -8px -8px 20px var(--sh-hi), 8px 8px 20px var(--sh-lo);
  --shadow-md:     -4px -4px 10px var(--sh-hi-soft), 4px 4px 10px var(--sh-lo-soft);
  --shadow-sm:     -2px -2px 6px var(--sh-hi), 2px 2px 6px var(--sh-lo-soft);
  --shadow-lift:   -10px -10px 26px var(--sh-hi), 10px 10px 26px var(--sh-lo);
  --shadow-in:     inset -4px -4px 10px var(--sh-hi), inset 4px 4px 10px var(--sh-lo);

  --grad-a:        #9cc0d4;
  --grad-b:        #c4b3de;
  --grad-klein-a:  #9cc0d4;
  --grad-klein-b:  #c4b3de;
  --stufe-fuellung: #364253;
  --stufe-rand:     #4b5a70;
  --edge:          rgba(255,255,255,.09);
  --knopf:         #557a8f;
}

/* ── Grundgerüst ───────────────────────────────────────────────────── */
*{ box-sizing: border-box }
/* `display` aus einer Klasse schlägt das hidden-Attribut. Ohne diese Zeile
   stand der Abmelden-Knopf auch dann da, wenn die Seite ihn ausgeblendet
   hatte — beim ersten Blick auf die neue Optik prompt passiert. */
[hidden]{ display:none !important }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--ff); line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh; display:flex; flex-direction:column;
}
a{ color:var(--accent-bright) }
h1,h2,h3{ font-family:var(--ff-titel); line-height:1.25; letter-spacing:-.01em; margin:0; font-weight:700 }
p{ margin:0 }
/* padding-inline statt der Kurzform: `padding: 0 …` setzte oben und unten
   auf null — und weil <main class="wrap"> beides ist, gewann die Klasse
   gegen die Regel für `main`. Ergebnis: null Abstand unter der Kopfleiste,
   obwohl dort 2,5rem standen. Die Kurzform war der ganze Fehler. */
/* 19.10.2026, Miguel: „bitte nutze immer die gesamte seitenbreite. auch auf den anderen seiten.“
   Vorher max-width:1200px — auf großen Bildschirmen blieb links und rechts ein breiter leerer Rand. */
.wrap{ max-width:none; margin:0 auto; width:100%; padding-inline:clamp(1rem,3vw,3rem) }
:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accent-bright); outline-offset:3px; border-radius:10px;
}

/* ── Kopf ──────────────────────────────────────────────────────────── */
header.kopf{
  background:var(--bg); color:var(--text); border-bottom:0;
  padding:1rem 0; position:sticky; top:0; z-index:20;
  box-shadow:0 10px 22px -20px var(--sh-lo);
}
.kopf-in{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap }
.marke{ display:flex; align-items:center; gap:.55rem; font-weight:700; font-size:1.05rem;
  font-family:var(--ff-titel); letter-spacing:-.015em }
.marke .berg{ width:26px; height:26px; flex:0 0 auto; color:var(--accent) }
.kopf-wer{ font-size:.85rem; color:var(--text-mute) }
.kopf-rechts{ margin-left:auto; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap }

/* ── Knöpfe: herausgedrückt, beim Drücken eingelassen ──────────────── */
.kn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  min-height:44px; padding:.6rem 1.05rem;
  border-radius:var(--r-pille); border:0;
  background:var(--bg); color:var(--text);
  font:inherit; font-size:.9rem; font-weight:600; cursor:pointer; text-decoration:none;
  border:1px solid var(--edge); background:var(--bg); box-shadow:var(--shadow-md);
  transition:box-shadow 220ms ease, color 180ms ease, transform 100ms ease;
}
.kn:hover{ box-shadow:var(--shadow); color:var(--accent) }
.kn:active{ box-shadow:var(--shadow-in); transform:translateY(1px) }
.kn svg{ width:17px; height:17px; flex:0 0 auto; stroke-width:1.9 }
/* Hauptknopf 1:1 aus der Vorlage: einfarbig var(--knopf), weiße Schrift,
   Ecken 16 px — kein Farbverlauf, keine Pille. Beides hatte ich mir dazu-
   gedacht; die Übergabe sagt „Nichts neu interpretieren". (Hier stand
   außerdem eine doppelte :hover-Zeile aus einer früheren Runde.) */
.kn-gold{ color:#fff; background:var(--knopf); border-radius:16px;
  padding:.85rem 1.75rem; border-color:transparent }
.kn-gold:hover{ color:#fff; filter:brightness(1.08) }
:root[data-theme="dark"] .kn-gold,
:root[data-theme="dark"] .kn-gold:hover{ color:#fff }

/* ── Hinweisband ───────────────────────────────────────────────────── */
.beispiel{
  background:transparent; border:0; color:var(--text); font-size:.9rem;
  padding:.9rem 0 0;
}
.beispiel-in{
  display:flex; gap:.7rem; align-items:flex-start;
  background:var(--warn-weich); color:var(--text);
  border-radius:var(--r-mittel); padding:.95rem 1.2rem; box-shadow:var(--shadow-md);
}
.beispiel b{ color:var(--warn) }
.beispiel svg{ width:19px; height:19px; flex:0 0 auto; color:var(--warn); margin-top:.15rem; stroke-width:1.9 }

main{ flex:1 0 auto; padding:2.25rem 0 4rem }
section{ margin-bottom:3.75rem }

/* ── Abschnittsköpfe ───────────────────────────────────────────────── */
.sec-kopf{ margin-bottom:1.1rem }
/* Augenbraue und Zahlen stehen jetzt in ruhiger Tinte statt im Verlauf.
   Der Verlauf bleibt dem einen wichtigen Knopf vorbehalten — wenn alles
   leuchtet, leuchtet nichts. */
.sec-kopf .auge{
  font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em;
  color:var(--text-mute);
}
.sec-kopf h2{ font-size:clamp(1.35rem,3vw,1.75rem); margin:.3rem 0 .4rem }
.sec-kopf p{ color:var(--text-mute); font-size:.97rem }

/* ── Kennzahlen ────────────────────────────────────────────────────── */
.zahlen{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem }
.zahl{
  background:var(--bg); border:1px solid var(--edge); border-radius:var(--r-gross);
  padding:1.4rem 1.5rem; box-shadow:var(--shadow);
}
.zahl .gross{
  font-family:var(--ff-titel); font-size:2.4rem; font-weight:700; line-height:1.05;
  letter-spacing:-.035em; color:var(--text);
}
.zahl .wofuer{ font-size:.87rem; color:var(--text); font-weight:600; margin-top:.3rem }
.zahl .dazu{ font-size:.83rem; color:var(--text-mute); margin-top:.2rem }

/* ── Bedienleiste ──────────────────────────────────────────────────────
   Steht direkt unter dem Kopf. Vorher lagen die Knöpfe am Seitenende;
   wer drucken wollte, musste an dreizehn Schulen vorbeiscrollen. */
.leiste{
  display:flex; gap:.6rem; flex-wrap:wrap; align-items:center;
  margin:0 0 2rem;
}

/* ── Der Ablauf in vier Schritten ──────────────────────────────────────
   Die Zahl trägt den Schritt, die dünne Linie verbindet sie. Auf dem
   Handy kippt die Reihe in eine Spalte und die Linie wandert nach links. */
.ablauf{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem;
  counter-reset:schritt;
}
.ablauf li{
  position:relative; display:flex; flex-direction:column; gap:.45rem;
  padding-top:.4rem;
}
/* Die Verbindungslinie: nur zwischen den Zahlen, nicht hinter der letzten. */
.ablauf li:not(:last-child)::after{
  content:""; position:absolute; left:2.6rem; top:1.15rem; right:-1.6rem; height:1px;
  background:var(--line);
}
.ablauf .nr{
  width:3.1rem; height:3.1rem; border-radius:50%; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  /* Herausgedrückt wie ein Knopf — die vier Schritte sind das Rückgrat
     der Erklärung und dürfen als Einziges etwas hervortreten. */
  background:var(--bg); border:0; box-shadow:var(--shadow-md);
  font-family:var(--ff-titel); font-weight:700; font-size:1.05rem; color:var(--accent);
  position:relative; z-index:1;
}
.ablauf .st-titel{ font-family:var(--ff-titel); font-weight:700; font-size:1rem; line-height:1.35 }
.ablauf .st-text{ font-size:.89rem; color:var(--text-mute); line-height:1.6 }

@media (max-width:860px){
  .ablauf{ grid-template-columns:1fr 1fr; gap:1.4rem 1.2rem }
  .ablauf li:nth-child(2n)::after{ display:none }
}
@media (max-width:560px){
  .ablauf{ grid-template-columns:1fr; gap:0 }
  .ablauf li{ padding:0 0 1.3rem 3rem }
  .ablauf li:last-child{ padding-bottom:0 }
  .ablauf .nr{ position:absolute; left:0; top:0 }
  /* Senkrechte Linie zwischen den Zahlen statt waagerechter. */
  .ablauf li:not(:last-child)::after{
    left:1.05rem; top:2.3rem; right:auto; bottom:.2rem; height:auto; width:1px;
  }
}

/* ── Ampel: Fläche, Zeichen UND Wort ───────────────────────────────── */
.ampel{
  display:inline-flex; align-items:center; gap:.4rem;
  border-radius:var(--r-pille); padding:.3rem .75rem; border:0;
  font-size:.79rem; font-weight:700; white-space:nowrap;
}
.ampel svg{ width:15px; height:15px; flex:0 0 auto; stroke-width:2.1 }
.ampel.gruen{ color:var(--ok);   background:var(--ok-weich) }
.ampel.gelb { color:var(--warn); background:var(--warn-weich) }
.ampel.rot  { color:var(--bad);  background:var(--bad-weich) }
.ampel.grau { color:var(--text-mute); background:var(--bg-soft) }

/* ── Schulkarten ───────────────────────────────────────────────────── */
.schulen{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.1rem }
.schule{
  background:var(--bg); border:1px solid var(--edge); border-radius:var(--r-gross);
  padding:1.4rem; box-shadow:var(--shadow);
  text-align:left; font:inherit; color:inherit; cursor:pointer; width:100%;
  display:flex; flex-direction:column; gap:.65rem;
  transition:box-shadow 220ms ease, transform 140ms ease;
}
.schule:hover{ box-shadow:var(--shadow-lift) }
.schule:active{ box-shadow:var(--shadow-in); transform:translateY(1px) }
/* Aufgeklappt heißt eingelassen — dieselbe Sprache wie beim gedrückten Knopf. */
.schule[aria-expanded="true"]{ box-shadow:var(--shadow-in) }
.schule-kopf{ display:flex; align-items:flex-start; gap:.6rem; flex-wrap:wrap }
.schule-kopf h3{ font-size:1.05rem; flex:1; min-width:9rem }
.schule .domain{ font-size:.82rem; color:var(--text-mute); word-break:break-word }
.schule .paket{ font-size:.82rem; color:var(--text-soft) }

.posten-liste{ display:flex; flex-direction:column; gap:.45rem; margin-top:.15rem }
.posten{ display:flex; align-items:center; gap:.5rem; justify-content:space-between; flex-wrap:wrap }
.posten-wort{ font-size:.85rem; color:var(--text-soft) }

/* Punktebalken */
.balken{ display:flex; flex-direction:column; gap:.4rem; margin-top:.15rem }
.balken-zeile{ display:flex; align-items:center; gap:.6rem; font-size:.8rem; color:var(--text-mute) }
.balken-zeile .wort{ width:4.4rem; flex:0 0 auto }
.spur{ flex:1; height:9px; border-radius:var(--r-pille); background:var(--bg);
  border:0; box-shadow:var(--shadow-in); overflow:hidden }
.spur i{ display:block; height:100%; border-radius:var(--r-pille) }
.spur i.start{ background:#a9c2d1 }
.spur i.heute{ background:linear-gradient(90deg,#8cc5a2 0%,#6fb48a 100%) }
.balken-zeile .wert{ width:2.6rem; text-align:right; font-variant-numeric:tabular-nums;
  font-weight:700; color:var(--text) }

/* ── Muster ────────────────────────────────────────────────────────── */
.muster-schild{
  display:inline-flex; align-items:center; border:1px dashed var(--gold-deep);
  color:var(--gold-deep); border-radius:var(--r-pille); padding:.15rem .6rem;
  font-size:.72rem; font-weight:700; white-space:nowrap;
}
.muster-schild.klein{ font-size:.68rem; padding:.05rem .5rem; vertical-align:.1em }
.schule.ist-muster{ box-shadow:var(--shadow), inset 0 0 0 1.5px var(--gold-deep) }

.hinweis-kasten{
  background:var(--bg-soft); border:0; border-radius:var(--r-mittel);
  padding:.95rem 1.2rem; font-size:.92rem; color:var(--text-soft);
  margin-bottom:1rem; box-shadow:var(--shadow-in); border:0;
}

/* ── Detail ────────────────────────────────────────────────────────── */
.detail{
  background:var(--bg); border:0; border-radius:var(--r-gross);
  padding:clamp(1.2rem,3vw,1.9rem); margin-top:1.1rem; box-shadow:var(--shadow-in);
}
.detail h3{ font-size:1.2rem; margin-bottom:.15rem }
.detail .unter{ color:var(--text-mute); font-size:.9rem; margin-bottom:1.1rem }
.detail-zu{ float:right }

.bereich{
  display:grid; grid-template-columns:1fr auto auto auto; gap:.6rem .75rem; align-items:center;
  padding:.85rem 0; border-bottom:1px solid var(--line);
}
.bereich:last-child{ border-bottom:0 }
.bereich .name{ font-weight:700; font-size:.97rem; font-family:var(--ff-titel) }
.bereich .was{ grid-column:1/-1; font-size:.86rem; color:var(--text-mute); margin-top:-.3rem }
.bereich .pfeil{ color:var(--text-mute); display:flex; align-items:center }
.bereich .pfeil svg{ width:17px; height:17px; stroke-width:1.9 }
.bereich .notiz{
  grid-column:1/-1; font-size:.88rem; color:var(--text-soft);
  background:var(--bg); border:0; border-radius:var(--r-klein);
  padding:.65rem .9rem; box-shadow:var(--shadow-sm);
}

.hand-liste{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:.9rem; margin-top:.9rem }
.hand{ background:var(--bg); border:1px solid var(--edge); border-radius:var(--r-mittel); padding:1.05rem; box-shadow:var(--shadow-md) }
.hand .oben{ display:flex; align-items:center; gap:.5rem; justify-content:space-between; flex-wrap:wrap }
.hand .n{ font-weight:700; font-size:.92rem; font-family:var(--ff-titel) }
.hand .w{ font-size:.83rem; color:var(--text-mute); margin-top:.35rem }
.hand .no{ font-size:.85rem; color:var(--text-soft); margin-top:.4rem }

.unter-kopf{
  font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em;
  color:var(--text-mute); margin:1.5rem 0 .6rem;
}

/* ── Zeitstrahl ────────────────────────────────────────────────────── */
.strahl{ list-style:none; padding:0; margin:0; position:relative }
.strahl::before{ content:""; position:absolute; left:17px; top:18px; bottom:18px; width:2px;
  background:var(--line); border-radius:2px }
.strahl li{ position:relative; padding:.7rem 0 .7rem 3rem; display:flex; gap:.75rem;
  flex-wrap:wrap; align-items:baseline }
.strahl .punkt{
  position:absolute; left:5px; top:.85rem; width:26px; height:26px; border-radius:50%;
  background:var(--bg); border:0;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm);
}
.strahl .punkt svg{ width:13px; height:13px; stroke-width:2 }
.strahl .wann{ font-size:.81rem; color:var(--text-mute); font-variant-numeric:tabular-nums;
  width:6.8rem; flex:0 0 auto }
.strahl .text{ flex:1; min-width:13rem; font-size:.93rem }
.strahl .woher{
  font-size:.73rem; font-weight:700; border-radius:var(--r-pille); padding:.15rem .6rem;
  border:0; background:var(--bg-soft); color:var(--text-mute);
}
.strahl .woher.auto{ color:var(--accent) }
.p-sicherung{ color:var(--text-mute) }
.p-pruefung{ color:var(--accent) }
.p-behoben{ color:var(--ok) }
.p-aktualisierung{ color:var(--text-soft) }
.p-nachweis{ color:var(--ok) }
.p-mail{ color:#7e6e9a }
:root[data-theme="dark"] .p-mail{ color:#bfb0da }
.strahl li.zeile-muster .text{ color:var(--text-mute) }

/* ── Tafeln ────────────────────────────────────────────────────────── */
/* margin-bottom ist Absicht und war einmal weg: Beim Umstieg auf diese
   Datei ging die Regel aus dem alten Stilblock verloren, und die Karten
   standen mit 0 px Abstand aufeinander — getrennt wirkten sie nur noch
   durch ihre Schatten. Bei weichen Schatten reicht das nicht. */
.karte{
  background:var(--bg); border:1px solid var(--edge); border-radius:var(--r-gross);
  padding:1.5rem 1.7rem; margin-bottom:1.75rem;
  box-shadow:var(--shadow); overflow-x:auto;
}
.karte:last-child{ margin-bottom:0 }
/* Tabellen bekommen Luft zur Überschrift und zum Kartenrand. */
.karte table{ margin:.5rem 0 .25rem }
.karte table + .pt-titel,
.karte form + table{ margin-top:1.5rem }
.tafel{ width:100%; border-collapse:collapse; font-size:.91rem }
.tafel th{
  text-align:left; font-size:.71rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--text-mute); font-weight:700; padding:.5rem .65rem;
  border-bottom:1px solid var(--line);
}
.tafel td{ padding:.7rem .65rem; border-bottom:1px solid var(--line); vertical-align:top }
.tafel tr:last-child td{ border-bottom:0 }

/* ── Einschweben ───────────────────────────────────────────────────── */
/* Hausstandard (Playbook Abschnitt 13, Baustein für reine HTML-Seiten): Das CSS
   versteckt NICHTS von sich aus. Erst a68a-rahmen.js markiert Elemente mit
   class="ein", die beim Laden UNTER dem Bildschirm liegen, als „bereit". Lädt das
   Skript nicht, steht alles normal da — Fehlerfall „keine Animation", nie
   „unsichtbarer Inhalt". translate statt transform, damit Hover-Effekte leben.
   0,9 s und 40 px sind der abgenommene Stand. (Bis 18.10.2026 abends setzte der
   Kopf js-ein für alles — das versteckte Inhalt auch ohne Skript.) */
@media (prefers-reduced-motion:no-preference){
  [data-sm-auf="bereit"]{ opacity:0; translate:0 40px }
  [data-sm-auf="da"]{ opacity:1; translate:0 0;
    transition:opacity .9s ease, translate .9s cubic-bezier(.16,.7,.3,1) }
}
@media (prefers-reduced-motion:reduce){
  .kn:active,.schule:active,.schule:hover{ transform:none }
}

footer{
  background:transparent; color:var(--text-mute); font-size:.86rem;
  padding:2rem 0 2.5rem; margin-top:auto; border-top:1px solid var(--line);
}
footer .wrap{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center }

/* ── Schmal: ab hier zählt jeder Pixel ─────────────────────────────── */
@media (max-width:720px){
  main{ padding:1.25rem 0 2.5rem }
  section{ margin-bottom:2.25rem }
  .zahlen{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.75rem }
  .zahl{ padding:1rem 1.05rem }
  .zahl .gross{ font-size:1.9rem }
  .schulen{ grid-template-columns:1fr; gap:.9rem }
  /* Auf dem Handy brach die Zeile so um, dass die Ampel von VORHER neben
     dem Titel landete und die von HEUTE darunter — ein Leser sieht dann
     „Technik und Sicherheit · dringend" und hält den alten Stand für den
     heutigen. Deshalb: Titel auf eine eigene Zeile, darunter vorher →
     heute in Leserichtung, und der Pfeil bleibt. Er ist 17 Pixel breit
     und das Einzige, was die Richtung zeigt. */
  .bereich{ grid-template-columns:auto auto 1fr; gap:.5rem .5rem }
  .bereich .name{ grid-column:1 / -1 }
  .bereich .pfeil{ display:flex }
  .bereich .was{ margin-top:0 }
  .strahl li{ padding-left:2.6rem }
  .strahl .wann{ width:100% }
  .strahl .text{ min-width:0 }
  .kopf-wer{ width:100%; margin-left:0; order:3 }
  .kopf-rechts{ margin-left:auto }
  /* Tabellen brechen auf schmalen Schirmen aus — deshalb scrollt die Karte,
     nicht die Seite. Ohne das schiebt eine Tabelle die ganze Seite breit. */
  .karte{ padding:1rem; -webkit-overflow-scrolling:touch }
  .tafel{ min-width:30rem }
}
@media (max-width:420px){
  .marke{ font-size:.98rem }
  .kn{ padding:.55rem .85rem; font-size:.86rem }
  .sec-kopf h2{ font-size:1.25rem }
}

/* ── Druck: flach, hell, ohne Spielerei ────────────────────────────── */
@media print{
  @page{ size:A4; margin:14mm }
  :root,:root[data-theme="dark"]{
    --bg:#fff; --bg-soft:#f6f8fa; --bg-elevated:#fff;
    --text:#1f2733; --text-soft:#3f4a5a; --text-mute:#5f6b7a; --line:#d4dbe4;
    --accent:#3f6274; --gold-deep:#8a6a1e;
    --ok:#1f6b45; --ok-weich:#e8f4ec;
    --warn:#7a5410; --warn-weich:#f8f0dc;
    --bad:#9c2f20; --bad-weich:#fbeae8;
    --shadow:none; --shadow-lift:none; --shadow-in:none;
    --grad-a:#1f2733; --grad-b:#1f2733;
  }
  body{ background:#fff; color:#1f2733; font-size:10.5pt }
  header.kopf{ position:static; box-shadow:none; border-bottom:2px solid #1f2733 }
  .kopf-rechts,.detail-zu,.nur-schirm{ display:none !important }
  .ablauf{ grid-template-columns:repeat(4,1fr); gap:1rem }
  .ablauf li::after{ display:none !important }
  .ablauf .nr{ border:1px solid var(--line) }
  .karte,.zahl,.schule,.detail,.hand,.bereich .notiz,.strahl .punkt,.kn{
    box-shadow:none !important; border:1px solid var(--line) !important;
  }
  .strahl .punkt{ border-radius:50% !important }
  .zahl .gross,.sec-kopf .auge{ -webkit-text-fill-color:#1f2733; color:#1f2733 }
  .schule{ cursor:default; break-inside:avoid }
  .detail,section{ break-inside:avoid }
  [data-sm-auf]{ opacity:1 !important; translate:none !important }
  a{ color:inherit; text-decoration:none }
  footer{ border-top:1px solid var(--line) }
  .tafel{ min-width:0 }
}

/* ═══════════════════════════════════════════════════════════════════
   Arbeitsoberfläche — Einstieg und Pflege
   ═══════════════════════════════════════════════════════════════════
   Dieselbe Optik wie die Kundenansicht, nur dichter: Hier wird gearbeitet,
   nicht gelesen. Gleiche Farben, gleiche Radien, gleiche Haarlinien —
   nur kleinere Abstände und Formularfelder dazu.
   ═══════════════════════════════════════════════════════════════════ */

.lead{ color:var(--text-mute); margin:0 0 2rem; font-size:.97rem }
.gruppe-was{ color:var(--text-mute); font-size:.9rem; margin:0 0 1rem }
.hinweis{ font-size:.87rem; color:var(--text-mute) }

h1{ font-family:var(--ff-titel); font-size:clamp(1.35rem,3vw,1.75rem); margin:0 0 .35rem;
  letter-spacing:-.015em; font-weight:700 }

/* ── Formularfelder ──────────────────────────────────────────────── */
label{ display:block; font-size:.8rem; font-weight:600; color:var(--text-mute); margin-bottom:.3rem }
/* Felder sind eingelassen, Knöpfe herausgedrückt. Daran erkennt man ohne
   Beschriftung, wo man schreibt und wo man drückt. */
/* 20.10.2026: E-Mail-, Adress-, Such-, Passwort- und Telefonfelder fehlten in der Liste und standen als
   rohe Browserfelder da (Miguel: „Bitte die gleiche Optik verwenden wie die anderen Eingabefelder.") */
input[type=text],input[type=email],input[type=url],input[type=search],input[type=password],input[type=tel],input[type=date],input[type=number],select,textarea{
  width:100%; min-height:44px; padding:.65rem .9rem;
  border:0; border-radius:var(--r-klein);
  background:var(--bg); color:var(--text);
  font:inherit; font-size:.94rem;
  box-shadow:var(--shadow-in);
  transition:box-shadow 180ms ease;
}
input:focus,select:focus,textarea:focus{
  outline:2px solid var(--accent-bright); outline-offset:2px;
  box-shadow:var(--shadow-in), 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
/* Textfelder tragen hier ganze Sätze, keine Stichworte — die Notiz zu
   einem Prüfbereich kann drei Zeilen lang sein. Zwei Zeilen Grundhöhe
   bedeuteten: scrollen, um den eigenen Text zu lesen. */
textarea{ min-height:5.5rem; resize:vertical; line-height:1.6 }
input[readonly]{ color:var(--text-soft) }

.reihe{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.9rem; margin-bottom:.9rem }
.haken{ display:flex; align-items:center; gap:.6rem; font-size:.93rem; font-weight:600; color:var(--text); min-height:44px }
.haken input{ width:20px; height:20px; min-height:0; accent-color:var(--accent); flex:0 0 auto }
.haken label{ margin:0; font-size:.93rem; color:var(--text) }

.feld-gruppe{
  border:1px solid var(--edge); border-radius:var(--r-mittel);
  padding:1.05rem 1.15rem; margin-bottom:1rem; background:var(--bg);
  box-shadow:var(--shadow-md);
}
.feld-gruppe .titel{ font-family:var(--ff-titel); font-weight:700; font-size:.94rem; margin-bottom:.15rem }
.feld-gruppe .was{ font-size:.84rem; color:var(--text-mute); margin:0 0 .7rem }

/* ── Meldungen ───────────────────────────────────────────────────── */
.meldung{
  background:var(--ok-weich); border:1px solid color-mix(in srgb, var(--ok) 35%, transparent);
  color:var(--text); border-radius:var(--r-klein); padding:.75rem 1rem;
  margin-bottom:1.2rem; font-size:.93rem;
}
.fehler{
  background:var(--bad-weich); border:1px solid color-mix(in srgb, var(--bad) 35%, transparent);
  color:var(--text); border-radius:var(--r-klein); padding:.75rem 1rem;
  margin-bottom:1.2rem; font-size:.93rem;
}

/* ── Zwei Spalten: Liste links, Arbeit rechts ────────────────────── */
.spalten{ display:grid; grid-template-columns:265px 1fr; gap:1.75rem; align-items:start }
/* Einspaltig braucht es den Abstand erst recht: Sonst stößt die letzte
   Karte der linken Spalte direkt an die erste der rechten. Genau das war
   die einzige Lücke, die nach dem Setzen der Kartenabstände noch 0 war. */
@media (max-width:880px){ .spalten{ grid-template-columns:1fr; gap:1.75rem } }

.liste{ display:flex; flex-direction:column; gap:.15rem }
.liste a{
  display:block; padding:.6rem .7rem; border-radius:var(--r-klein);
  text-decoration:none; color:var(--text); font-size:.93rem;
  border:1px solid transparent; min-height:44px;
}
.liste a:hover{ background:var(--bg-soft) }
.liste a.da{ background:var(--bg); font-weight:700; border-color:transparent;
  box-shadow:var(--shadow-in) }

.pille{
  display:inline-block; font-size:.72rem; font-weight:700; border-radius:var(--r-pille);
  padding:.1rem .5rem; border:1px solid var(--line); color:var(--text-mute); margin-left:.3rem;
}
.pille.ja{ color:var(--ok); border-color:color-mix(in srgb, var(--ok) 45%, transparent);
  background:var(--ok-weich) }

.kn-weg{ color:var(--bad); border-color:color-mix(in srgb, var(--bad) 45%, transparent) }
.kn-weg:hover{ color:var(--bad); border-color:var(--bad); background:var(--bad-weich) }

/* ── Dateikarte auf der Einstiegsseite ───────────────────────────── */
.teil{
  display:grid; grid-template-columns:1fr auto; gap:.5rem .9rem; align-items:start;
  padding:.75rem 0; border-bottom:1px solid var(--line);
}
.teil:last-child{ border-bottom:0 }
.teil code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.84rem;
  background:var(--bg-soft); border:1px solid var(--line); border-radius:7px;
  padding:.12rem .4rem; word-break:break-all; color:var(--text-soft);
}
.teil .was{ grid-column:1/-1; font-size:.88rem; color:var(--text-mute); margin-top:-.2rem }

.offen{ margin:0; padding-left:1.1rem }
.offen li{ margin-bottom:.6rem; font-size:.93rem }
.offen b{ color:var(--text) } .offen span{ color:var(--text-mute) }

/* Einfache Tabellen (ohne .tafel) gleich mitnehmen. */
table{ width:100%; border-collapse:collapse; font-size:.91rem }
th{ text-align:left; font-size:.71rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--text-mute); font-weight:700; padding:.5rem .6rem; border-bottom:1px solid var(--line) }
td{ padding:.65rem .6rem; border-bottom:1px solid var(--line); vertical-align:top }
tr:last-child td{ border-bottom:0 }

@media (max-width:720px){
  /* Tabellen in der Pflege dürfen die Seite nicht breitziehen. */
  .karte{ overflow-x:auto }
  .reihe{ grid-template-columns:1fr }
}

/* ── Luft unter der Kopfleiste ─────────────────────────────────────────
   Die Leiste klebt oben fest. Ohne Abstand stoßen die ersten Karten
   direkt daran — das sah aus, als wäre etwas abgeschnitten. */
main{ padding-top:3rem }
@media (max-width:720px){ main{ padding-top:2rem } }

/* ── Was im gewählten Paket steckt ─────────────────────────────────────
   Steht direkt unter der Paketwahl in der Pflegeseite. Inhalt kommt aus
   a68a-pakete.php; hier wird nur gezeichnet. */
.paket-tafel{
  margin:1.2rem 0 .6rem; padding:1.2rem 1.35rem;
  background:var(--bg); border:0; border-radius:var(--r-gross);
  box-shadow:var(--shadow-in);
}
.pt-kopf{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-bottom:.35rem }
.pt-name{ font-family:var(--ff-titel); font-weight:700; font-size:1.05rem }
.pt-preis{ font-size:.86rem; color:var(--text-mute) }
.pt-kopf .kn{ margin-left:auto; min-height:38px; padding:.4rem .8rem; font-size:.84rem }
.pt-kurz{ font-size:.9rem; color:var(--text-soft); margin:0 0 .9rem }
.pt-spalten{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem }
@media (max-width:760px){ .pt-spalten{ grid-template-columns:1fr; gap:.9rem }
  .pt-kopf .kn{ margin-left:0; width:100% } }
.pt-titel{
  font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em;
  color:var(--text-mute); margin-bottom:.4rem;
}
.pt-spalten ul{ margin:0; padding-left:1.05rem }
.pt-spalten li{ font-size:.88rem; line-height:1.55; margin-bottom:.4rem; color:var(--text-soft) }
.pt-spalten li b{ color:var(--text) }

/* ── Gehört ein Prüfbereich zum Paket? ─────────────────────────────── */
.paket-merker{
  display:inline-block; font-size:.68rem; font-weight:700; border-radius:var(--r-pille);
  padding:.08rem .5rem; margin-left:.4rem; vertical-align:.12em; white-space:nowrap;
}
.paket-merker.drin{ color:var(--ok); background:var(--ok-weich) }
.paket-merker.ausser{ color:var(--text-mute); background:var(--bg); border:1px solid var(--line) }
/* Nicht ausblenden, nur zurücknehmen: Was nicht zum Paket gehört, bleibt
   sichtbar — sonst verschwindet der Anlass, das größere Paket anzubieten. */
.feld-gruppe.nicht-drin{ border-style:dashed; box-shadow:none }   /* früher opacity:.62 — Kontrast fiel unter 3:1 */

/* ── Träger-Staffel ─────────────────────────────────────────────────── */
.staffel{
  margin:1rem 0 .6rem; padding:1.05rem 1.25rem;
  background:var(--bg); border:1px solid var(--edge); border-radius:var(--r-mittel);
  box-shadow:var(--shadow-md);
}
.staffel-tafel{ width:auto; min-width:min(100%,22rem); font-size:.9rem }
.staffel-tafel td{ padding:.4rem .9rem .4rem 0; border-bottom:1px solid var(--line) }
.staffel-tafel th{ padding:.3rem .9rem .3rem 0 }
.staffel-tafel tr.gilt td{ font-weight:700; color:var(--text) }
.staffel-tafel tr.gilt td:first-child::before{
  content:"▸ "; color:var(--accent);
}
.staffel-summe{ font-size:.89rem; color:var(--text-soft); margin:.8rem 0 0; line-height:1.6 }
.staffel-summe strong{ color:var(--text) }

/* ── Die Verlaufskurve ─────────────────────────────────────────────────
   Eine Reihe, eine Linie, feste Skala 0–100. Keine Legende: Die Karte
   sagt bereits, wessen Punkte das sind. Die Zahlen stehen in Textfarbe,
   nie in der Linienfarbe — Farbe trägt hier keine Bedeutung. */
.verlauf{
  display:block; margin-top:.9rem; padding:.8rem .9rem .6rem;
  border-radius:var(--r-mittel); box-shadow:var(--shadow-in);
}
.verlauf-kopf{
  display:block; font-size:.7rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.11em; color:var(--text-mute); margin-bottom:.35rem;
}
.verlauf-bild{ display:block; width:100%; height:auto; overflow:visible }
.verlauf-bild .vl{ fill:none; stroke:var(--accent); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round }
.verlauf-bild .vf{ fill:var(--accent); opacity:.10; stroke:none }
.verlauf-bild .vp{ fill:var(--accent); stroke:var(--bg); stroke-width:2 }
.verlauf-bild .vp-letzt{ fill:var(--ok) }
.verlauf-fuss{
  display:flex; justify-content:space-between;
  font-size:.72rem; color:var(--text-mute); margin-top:.15rem;
}
@media print{
  .verlauf{ box-shadow:none !important; border:1px solid var(--line) }
  .verlauf-bild .vf{ opacity:.18 }
}

/* ═══════════════════════════════════════════════════════════════════
   BAUSTEINE DER SOFTWARE (18.10.2026)
   Start mit zwei Wegen, Fahrplan, Kundenliste, Werkzeugkasten, Wartung.
   Alles aus denselben Tokens wie oben — nichts Neues erfunden.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tabellen auf dem Handy: keine Querscroll-Tabellen ─────────────────
   Hausregel aus der „braunen Vorlage", gilt weiter. Bis heute scrollte die
   Karte quer (min-width:30rem). Jetzt klappt jede Zeile zu einem Block um,
   die Spaltenköpfe wandern als kleine Beschriftung vor jeden Wert.
   a68a-rahmen.js trägt dafür data-label aus dem <thead> nach. */
@media (max-width:640px){
  .tafel{ min-width:0 }
  .tafel thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
  .tafel, .tafel tbody, .tafel tr, .tafel td{ display:block; width:100% }
  .tafel tr{ padding:.65rem 0; border-bottom:1px solid var(--line) }
  .tafel tr:last-child{ border-bottom:0 }
  /* Die Zelle bleibt Fließtext (mehrere Elemente, <br>, Chips bleiben beisammen),
     das Etikett steht links daneben. */
  .tafel td{ border:0; padding:.25rem 0 .25rem 42%; position:relative; text-align:left; min-height:1.6rem }
  .tafel td[data-label]::before{
    content:attr(data-label); position:absolute; left:0; top:.3rem; width:39%;
    font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--text-mute);
  }
  .tafel td:not([data-label]){ padding-left:0 }
}

/* ── Flach: Linien statt Lichter, für dichte Listen ────────────────── */
.flach{ box-shadow:none !important; border:1px solid var(--edge) }

/* Nur für Vorleseprogramme */
.nur-vorlesen{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
/* section{margin-bottom} von oben soll Karten in Rastern nicht auseinanderziehen */
.wahl > section, section.wahl-karte, .wz-raster > section{ margin-bottom:0 }

/* ── Seitenkopf mit Brotkrume ──────────────────────────────────────── */
.seiten-kopf{ margin-bottom:2.25rem }
.seiten-kopf .krume{ font-size:.85rem; color:var(--text-mute); margin-bottom:.5rem;
  display:flex; flex-wrap:wrap; gap:.35rem; align-items:center }
.seiten-kopf .krume a{ color:var(--text-mute); text-decoration:none; font-weight:600;
  display:inline-flex; align-items:center; min-height:44px }
.seiten-kopf .krume a:hover{ color:var(--accent) }
.seiten-kopf h1{ font-size:clamp(1.6rem,4vw,2.3rem); letter-spacing:-.02em; margin:0 0 .5rem }
.seiten-kopf p{ color:var(--text-mute); font-size:1.02rem }

/* ── Chips: Zustand immer mit Wort, nie Farbe allein ───────────────── */
.chip{
  display:inline-flex; align-items:center; gap:.3rem; white-space:nowrap;
  font-size:.76rem; font-weight:700; padding:.22rem .6rem; border-radius:999px;
  background:var(--bg-soft); color:var(--text-soft); border:1px solid var(--edge);
}
.chip.ok  { background:var(--ok-weich);   color:var(--ok);   border-color:transparent }
.chip.warn{ background:var(--warn-weich); color:var(--warn); border-color:transparent }
.chip.bad { background:var(--bad-weich);  color:var(--bad);  border-color:transparent }
.chip.info{ background:var(--stufe-fuellung); color:var(--text); border-color:transparent }
.chips{ display:flex; flex-wrap:wrap; gap:.35rem }

/* ── Die zwei Wege auf der Startseite ──────────────────────────────── */
.wahl{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.75rem }
@media (max-width:760px){ .wahl{ grid-template-columns:1fr } }
.wahl-karte{
  display:flex; flex-direction:column; gap:.8rem; text-decoration:none; color:var(--text);
  background:var(--bg); border:1px solid var(--edge); border-radius:var(--r-gross);
  padding:2rem 2rem 1.75rem; box-shadow:var(--shadow);
  transition:box-shadow 220ms ease, transform 160ms ease;
}
.wahl-karte:hover{ box-shadow:var(--shadow-lift) }
.wahl-karte:active{ box-shadow:var(--shadow-in); transform:translateY(1px) }
.wahl-karte .symbol{
  width:3.4rem; height:3.4rem; border-radius:18px; display:inline-flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-md); color:var(--accent); border:1px solid var(--edge);
}
.wahl-karte .symbol svg{ width:26px; height:26px }
.wahl-karte h2{ font-size:1.45rem }
.wahl-karte p{ color:var(--text-mute) }
.wahl-karte .los{ margin-top:auto; font-weight:700; color:var(--accent); display:inline-flex; gap:.4rem; align-items:center }
.unterwahl{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.35rem }

/* ── Der Fahrplan: ein Schritt nach dem anderen ────────────────────── */
.weg{ list-style:none; margin:0; padding:0; counter-reset:weg; position:relative }
.weg > li{
  position:relative; padding:0 0 2.25rem 4.4rem; min-height:3.2rem;
}
.weg > li::before{
  counter-increment:weg; content:counter(weg);
  position:absolute; left:0; top:0; width:3.1rem; height:3.1rem; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--bg); border:1px solid var(--edge); box-shadow:var(--shadow-md);
  font-family:var(--ff-titel); font-weight:700; font-size:1.05rem; color:var(--accent);
}
.weg > li:not(:last-child)::after{
  content:""; position:absolute; left:1.55rem; top:3.4rem; bottom:.35rem; width:1px; background:var(--line);
}
.weg > li.erledigt::before{ content:"✓"; color:var(--ok); background:var(--ok-weich); border-color:transparent }
.weg > li.jetzt::before{ background:var(--knopf); color:#fff; border-color:transparent }
.weg .w-titel{ font-family:var(--ff-titel); font-weight:700; font-size:1.15rem; display:flex; gap:.6rem; align-items:center; flex-wrap:wrap }
.weg .w-tun{ margin:.35rem 0 .7rem }
.weg .w-fertig{ font-size:.87rem; color:var(--text-mute); margin-top:.6rem }
.weg .w-fertig b{ color:var(--text-soft) }
.weg .w-werkzeuge{ display:flex; flex-wrap:wrap; gap:.5rem }
/* Auf breiten Bildschirmen: Text links, Werkzeuge rechts — die Breite trägt Inhalt statt Leerraum. */
@media (min-width:1200px){
  .weg > li{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(16rem,1fr); column-gap:2.5rem; align-items:start }
  .weg > li > *{ grid-column:1 }
  .weg > li > .w-werkzeuge{ grid-column:2; grid-row:1 / span 6; align-self:start; padding-top:.15rem }
}
@media (max-width:560px){
  .weg > li{ padding-left:3.4rem }
  .weg > li::before{ width:2.5rem; height:2.5rem; font-size:.95rem }
  .weg > li:not(:last-child)::after{ left:1.25rem; top:2.8rem }
}

/* ── Werkzeugkarten im Werkzeugkasten ──────────────────────────────── */
.wz-raster{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:1.25rem }
.wz{
  display:flex; flex-direction:column; gap:.45rem;
  background:var(--bg); border:1px solid var(--edge); border-radius:var(--r-mittel);
  padding:1.2rem 1.25rem; box-shadow:var(--shadow-md);
}
.wz h3{ font-size:1.02rem; display:flex; gap:.5rem; align-items:center; flex-wrap:wrap }
.wz h3 a{ color:var(--text); text-decoration:none }
.wz h3 a:hover{ color:var(--accent) }
.wz p{ font-size:.89rem; color:var(--text-mute) }
.wz .wz-fuss{ margin-top:auto; padding-top:.5rem; display:flex; flex-wrap:wrap; gap:.45rem; align-items:center }
.wz.still{ border-style:dashed; box-shadow:none }   /* keine Deckkraft — die drückte den Text unter 4,5:1 */
.wz code, .pfad{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.8rem;
  background:var(--bg-soft); border:1px solid var(--edge); border-radius:8px; padding:.1rem .4rem; word-break:break-all }
.gruppe-kopf{ display:flex; align-items:baseline; gap:.75rem; flex-wrap:wrap; margin:0 0 1rem }
.gruppe-kopf h2{ font-size:1.3rem }
.gruppe-kopf span{ color:var(--text-mute); font-size:.92rem }
.wz-gruppe{ margin-bottom:3rem }

/* ── Kundenliste ───────────────────────────────────────────────────── */
.suche{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin:0 0 1.5rem }
.suche input[type=search]{
  flex:1 1 16rem; min-height:46px; font:inherit; font-size:1rem; padding:.7rem 1.1rem;
  border-radius:var(--r-pille); border:1px solid #8a96a8; background:var(--bg); color:var(--text);
  box-shadow:var(--shadow-in);
}
:root[data-theme="dark"] .suche input[type=search]{ border-color:#6b7689 }
.k-liste{ display:grid; gap:.85rem }
.k-zeile{
  display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) auto; gap:1rem; align-items:center;
  background:var(--bg); border:1px solid var(--edge); border-radius:var(--r-mittel);
  padding:1rem 1.25rem; box-shadow:var(--shadow-md); text-decoration:none; color:var(--text);
  transition:box-shadow 200ms ease;
}
.k-zeile:hover{ box-shadow:var(--shadow) }
.k-zeile .k-name{ font-weight:700; font-family:var(--ff-titel); font-size:1.02rem }
.k-zeile .k-dom{ font-size:.84rem; color:var(--text-mute); overflow-wrap:anywhere }
.k-zeile .k-pfeil{ color:var(--text-mute); font-size:1.3rem }
@media (max-width:640px){
  .k-zeile{ grid-template-columns:1fr auto }
  .k-zeile .chips{ grid-column:1 / -1; order:3 }
}

/* ── Fällig-Liste ──────────────────────────────────────────────────── */
.faellig{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem }
.faellig li{ display:flex; gap:.8rem; align-items:flex-start; padding:.75rem 0; border-bottom:1px solid var(--line) }
.faellig li:last-child{ border-bottom:0 }
.faellig .f-was{ flex:1 1 auto; min-width:0 }
.faellig .f-was b{ display:block }
.faellig .f-was span{ font-size:.86rem; color:var(--text-mute) }

/* ── Hinweis- und Warnkästen ───────────────────────────────────────── */
.kasten{ border-radius:var(--r-mittel); padding:1rem 1.2rem; border:1px solid var(--edge);
  background:var(--bg-soft); display:flex; gap:.75rem; align-items:flex-start; margin:0 0 1.5rem }
.kasten svg{ width:20px; height:20px; flex:0 0 auto; margin-top:.15rem }
.kasten.warn{ background:var(--warn-weich); border-color:transparent }
.kasten.warn svg{ color:var(--warn) }
.kasten.bad{ background:var(--bad-weich); border-color:transparent }
.kasten.bad svg{ color:var(--bad) }
.kasten.ok{ background:var(--ok-weich); border-color:transparent }
.kasten.ok svg{ color:var(--ok) }
.kasten p + p{ margin-top:.4rem }
/* Links auf getönten Flächen: der Akzent kam dort nur auf 4,0–4,3:1. */
.kasten a{ color:var(--text); text-decoration:underline; text-underline-offset:2px }
/* … aber Knöpfe im Kasten bleiben Knöpfe */
.kasten a.kn{ color:var(--text); text-decoration:none }
.kasten a.kn-gold{ color:#fff; text-decoration:none }

/* ── Zwei- und Dreispalter ─────────────────────────────────────────── */
.zwei{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:1.75rem; align-items:start }
.drei{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem }
@media (max-width:880px){ .zwei,.drei{ grid-template-columns:1fr } }

/* ── Kleine Zahlenreihe (Sicherungen, Aktualisierungen …) ──────────── */
.mini-zahlen{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.9rem }
.mini-zahl{ background:var(--bg); border:1px solid var(--edge); border-radius:var(--r-mittel); padding:1rem 1.1rem; box-shadow:var(--shadow-md) }
.mini-zahl b{ display:block; font-family:var(--ff-titel); font-size:1.7rem; line-height:1.1; letter-spacing:-.02em }
.mini-zahl span{ font-size:.82rem; color:var(--text-mute) }

/* ── Leerer Zustand: sagt, was als Nächstes zu tun ist ─────────────── */
.leer{ text-align:center; padding:2rem 1rem; color:var(--text-mute) }
.leer b{ display:block; color:var(--text); font-family:var(--ff-titel); font-size:1.1rem; margin-bottom:.35rem }

/* ── Fußzeile der Software ─────────────────────────────────────────── */
.a68a-fuss{ border-top:1px solid var(--line); padding:1.5rem 0 2.5rem; font-size:.86rem; color:var(--text-mute) }
.a68a-fuss .wrap{ display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; align-items:center }
.a68a-fuss a{ color:var(--text-mute); font-weight:600; text-decoration:none }
.a68a-fuss a:hover{ color:var(--accent) }

@media print{
  :root{ --shadow-md:none; --shadow-sm:none }
  .weg > li.jetzt::before{ color:#2d3748; background:none; border:2px solid #2d3748 }
  .wahl-karte,.wz,.k-zeile,.mini-zahl,.kasten{ box-shadow:none !important; border:1px solid #ccd5df }
  .a68a-fuss,.suche,.nur-schirm{ display:none !important }
}