/* ==========================================================================
   Marketinghaus — ein einziges Blatt

   Keine externe Schrift, kein CDN, kein url(), kein JavaScript: Die
   Inhaltsrichtlinie lautet default-src 'self', und was hier nicht steht,
   verwirft der Browser wortlos. Aufklappen, Sortieren und Umschalten laufen
   deshalb über <details> und über Links.

   Alle Werte stehen als Marken (Custom Properties) ganz oben. Wer eine Seite
   baut, benutzt die Namen aus docs/superpowers/ansicht-bausteine.md und
   schreibt kein CSS dazu — sonst hat in einem halben Jahr jede Seite ihr
   eigenes Grau.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1  Marken — heller Modus
   Ruhige Graustufen und GENAU EINE Akzentfarbe. Der Akzent bedeutet immer
   dasselbe: hier kann man klicken. Zustandsfarben sind keine Akzente; sie
   stehen nie allein, sondern immer neben einem Wort und einer Form.
   -------------------------------------------------------------------------- */

:root {
  --grund:       #f7f8f9;   /* Grund der Anwendung                          */
  --flaeche:     #ffffff;   /* Karten, Tabellen, Leisten                    */
  --flaeche-2:   #f2f3f5;   /* Tabellenkopf, Abzeichen, ruhige Felder       */
  --flaeche-3:   #e9eaee;   /* Zeile unter dem Zeiger                       */
  --linie:       #e2e4e8;   /* Haarlinie — sie trennt, nicht ein Schatten   */
  --linie-stark: #cfd2d9;   /* Rahmen von Eingaben, Knöpfen, Gerüsten       */

  --text:        #14161b;   /* 16,8:1 auf --flaeche                         */
  --text-leise:  #5c6270;   /*  6,1:1 auf --flaeche                         */

  --akzent:      #2f57d3;   /*  6,1:1 auf --flaeche                         */
  --akzent-flaeche: #eaeefb;
  --akzent-rand:    #c2ccf3;

  /* Zustände. Jede Farbe ist gegen --flaeche und gegen ihre eigene
     Zustandsfläche auf mindestens 4.5:1 geprüft. */
  --kritisch:         #b02a1e;
  --kritisch-flaeche: #fdecea;
  --kritisch-rand:    #f0b8b1;
  --hinweis:          #8a5a00;
  --hinweis-flaeche:  #fdf3e0;
  --hinweis-rand:     #e8cd93;
  --gut:              #1c6641;
  --gut-flaeche:      #e8f5ee;
  --gut-rand:         #a9d6bf;
  --offen:            #1a5490;
  --offen-flaeche:    #e9eefa;
  --offen-rand:       #b3c8e8;

  /* Abstände: eine einzige 4px-Leiter, damit nichts dazwischenrutscht. */
  --a1: 4px;  --a2: 8px;  --a3: 12px; --a4: 16px;
  --a5: 24px; --a6: 32px; --a7: 48px;

  /* Radien: genau zwei. Drei wären schon eine Meinung zu viel. */
  --r1: 4px;
  --r2: 6px;

  /* Schriftgrade: sechs Stufen, keine dazwischen.

     Der Fließtext ist 16px und nicht mehr 15px. Unsere Leser sind
     Praxisinhaber, viele davon jenseits der fünfzig, und sie lesen diese
     Seiten zwischen zwei Behandlungen — nicht mit der Nase am Bildschirm.
     Die ganze Leiter ist mit dem Fließtext eine Stufe hochgerückt: Eine
     einzelne vergrößerte Stufe hätte nur die Verhältnisse verschoben, und
     das Grundmaß der Oberfläche (--t3) trägt fast jede Zeile dieses
     Portals. Die Zeilenhöhen bleiben unverändert, damit die Seiten nicht
     länger werden als nötig. */
  --t1: 0.75rem;    /* 12px — Etiketten, Herkunftszeilen                    */
  --t2: 0.8125rem;  /* 13px — Tabellen, Abzeichen                           */
  --t3: 0.875rem;   /* 14px — Grundmaß der Oberfläche                       */
  --t4: 1rem;       /* 16px — Fließtext, Führungssatz                       */
  --t5: 1.3125rem;  /* 21px — Seitentitel                                   */
  --t6: 2.5rem;     /* 40px — die eine Zahl, auf die es ankommt             */

  --leiste-breite: 232px;
  --kopf-hoehe:    48px;
  --inhalt-max:    1180px;

  /* Nur Systemschrift: eine geladene Datei wäre ein fremder Server. */
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
             Arial, "Noto Sans", sans-serif;
  --schrift-fest: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                  "Liberation Mono", monospace;

  color-scheme: light dark;
}

/* --------------------------------------------------------------------------
   2  Marken — dunkler Modus
   Nur Farben werden getauscht. Alle Maße bleiben, sonst spränge die Seite
   beim Wechsel der Systemeinstellung um.
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root {
    --grund:       #0e1013;
    --flaeche:     #15181c;
    --flaeche-2:   #1b1f24;
    --flaeche-3:   #23272e;
    --linie:       #262a31;
    --linie-stark: #3a3f48;

    --text:        #e7e9ee;   /* 14,9:1 auf --flaeche */
    --text-leise:  #a3aab7;   /*  7,4:1 auf --flaeche */

    --akzent:         #8ba4ff;   /* 8,0:1 */
    --akzent-flaeche: #1c2340;
    --akzent-rand:    #33406e;

    --kritisch:         #ff9082;   /* 8,6:1 */
    --kritisch-flaeche: #2a1714;
    --kritisch-rand:    #5a2b25;
    --hinweis:          #e0a93f;   /* 9,1:1 */
    --hinweis-flaeche:  #2a2010;
    --hinweis-rand:     #4d3c15;
    --gut:              #5fc999;   /* 10,2:1 */
    --gut-flaeche:      #12271d;
    --gut-rand:         #235c42;
    --offen:            #8ba4ff;
    --offen-flaeche:    #171d31;
    --offen-rand:       #2d3a63;
  }
}

/* --------------------------------------------------------------------------
   3  Grundlage
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: var(--t3);
  line-height: 1.5;
  /* Tabellenziffern überall: nur so stehen Zahlen in zwei Zeilen
     untereinander wirklich untereinander. */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, figure, table, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video { max-width: 100%; height: auto; display: block; }

a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

code, kbd, samp {
  font-family: var(--schrift-fest); font-size: 0.9em;
  background: var(--flaeche-2); border: 1px solid var(--linie);
  border-radius: var(--r1); padding: 0 4px;
}

strong { font-weight: 650; }

/* Ein einziger Fokusring für die ganze Anwendung. Er wird nirgends
   abgeschaltet — wer mit der Tastatur arbeitet, muss sehen, wo er steht. */
:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
  border-radius: var(--r1);
}
:focus:not(:focus-visible) { outline: none; }

/* Nur für das Vorleseprogramm. */
.verborgen {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* Sprungmarke zum Inhalt. Sichtbar erst bei Fokus, dann aber richtig. */
.sprung {
  position: absolute; left: var(--a3); top: -4rem; z-index: 40;
  background: var(--flaeche); color: var(--text);
  border: 1px solid var(--linie-stark); border-radius: var(--r1);
  padding: var(--a2) var(--a3);
}
.sprung:focus { top: var(--a3); }

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

/* Symbolvorrat: einmal im Dokument als <symbol>, geholt mit <use>.
   Kein Emoji (das ist auf jedem System ein anderes Bild und wird vorgelesen),
   kein data:-URI (den verbietet die Inhaltsrichtlinie). */
.symbole { display: none; }
.ic {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}
svg { flex: none; }

/* --------------------------------------------------------------------------
   4  Hülle: feste Seitenleiste, Hauptspalte, klebende Kopfzeile
   -------------------------------------------------------------------------- */

.app {
  display: grid;
  grid-template-columns: var(--leiste-breite) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

.seitenleiste {
  position: sticky; top: 0; align-self: start;
  height: 100vh; height: 100dvh; overflow-y: auto;
  background: var(--flaeche);
  border-right: 1px solid var(--linie);
  padding: 0 var(--a3) var(--a5);
}

.marke {
  display: flex; align-items: center; gap: var(--a2);
  height: var(--kopf-hoehe);
  margin: 0 calc(var(--a3) * -1) var(--a4);
  padding: 0 var(--a3);
  border-bottom: 1px solid var(--linie);
  font-size: var(--t3); font-weight: 650; letter-spacing: -0.01em;
}
.marke .zeichen { width: 18px; height: 18px; color: var(--akzent); }

.navgruppe + .navgruppe { margin-top: var(--a5); }
.navgruppe > h2 {
  font-size: var(--t1); font-weight: 650;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-leise);
  padding: 0 var(--a2); margin-bottom: var(--a1);
}
.navgruppe a {
  display: flex; align-items: center; gap: var(--a2);
  min-height: 30px; padding: var(--a1) var(--a2);
  border-radius: var(--r1);
  color: var(--text); font-size: var(--t3);
}
.navgruppe a:hover { background: var(--flaeche-2); text-decoration: none; }
.navgruppe a .ic { color: var(--text-leise); }
/* Der aktive Punkt hängt nicht an der Farbe allein: er trägt zusätzlich
   aria-current="page", steht fetter und liegt auf eigener Fläche. */
.navgruppe a.hier,
.navgruppe a[aria-current="page"] {
  background: var(--akzent-flaeche); color: var(--akzent); font-weight: 650;
}
.navgruppe a.hier .ic,
.navgruppe a[aria-current="page"] .ic { color: var(--akzent); }

/* Zähler in der Leiste. Die Zahl allein sagt nichts — daneben gehört ein
   Wort, notfalls eines in .verborgen. */
.abzeichen {
  margin-left: auto; flex: none;
  font-size: var(--t1); line-height: 16px;
  color: var(--text-leise);
  background: var(--flaeche-2);
  border: 1px solid var(--linie);
  border-radius: 999px;
  padding: 0 6px;
}
.abzeichen.wichtig {
  color: var(--kritisch);
  background: var(--kritisch-flaeche);
  border-color: var(--kritisch-rand);
}

.hauptspalte { display: flex; flex-direction: column; min-width: 0; }

.kopfleiste {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--a3);
  min-height: var(--kopf-hoehe);
  padding: 0 var(--a5);
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
}
.kopfleiste .kunde {
  font-size: var(--t3); font-weight: 650;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kopfleiste .stand {
  font-size: var(--t2); color: var(--text-leise); white-space: nowrap;
}
.kopfleiste .rechts {
  margin-left: auto; display: flex; align-items: center; gap: var(--a3);
}
.trenner { width: 1px; height: 18px; background: var(--linie); flex: none; }

.inhalt {
  flex: 1;
  min-width: 0;
  width: 100%; max-width: var(--inhalt-max);
  padding: var(--a5) var(--a5) var(--a7);
  display: flow-root;
  /* Der letzte Riegel gegen das Querscrollen der ganzen Seite, und
     ausdrücklich NICHT overflow-x: hidden: Ein einzelnes überlanges Wort —
     eine Adresse, ein Dateiname, ein Pfad ohne Bindestrich — bricht hier
     notfalls mitten im Wort um, statt den Körper nach rechts zu schieben.
     Verborgen wird dabei nichts; jedes Zeichen bleibt lesbar, es steht nur
     eine Zeile tiefer. Wer stattdessen den Überlauf abschneidet, versteckt
     den Fehler und schneidet dem Leser den Rest des Wortes weg. */
  overflow-wrap: break-word;
}
/* Die Seiten schreiben Absätze und Abschnitte einfach untereinander; der
   Abstand kommt von hier und nicht aus jeder einzelnen Vorlage. */
.inhalt > * + * { margin-top: var(--a4); }
.inhalt > section + section,
.inhalt > .abschnitt + .abschnitt { margin-top: var(--a6); }
.inhalt > h2 { margin-top: var(--a6); }
.inhalt > h1 + * { margin-top: var(--a3); }

.fussleiste {
  border-top: 1px solid var(--linie);
  padding: var(--a4) var(--a5);
  font-size: var(--t2); color: var(--text-leise);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2) var(--a4);
}
.herkunft { font-size: var(--t2); color: var(--text-leise); }

/* Die Rechtslinks stehen in derselben Zeile wie die Herkunft, nur am anderen
   Ende: margin-left schiebt sie so weit nach rechts, wie die Zeile reicht.
   Wird sie zu eng, bricht die Fußleiste ohnehin um (flex-wrap oben) und die
   Verweise stehen darunter. Sie bekommen die leise Textfarbe und nicht die
   Akzentfarbe der übrigen Links: Sie sollen erreichbar sein, nicht rufen. */
.rechtslinks { display: flex; flex-wrap: wrap; gap: var(--a2) var(--a4); margin-left: auto; }
.rechtslinks a { color: var(--text-leise); }
.rechtslinks a:hover { color: var(--akzent); }

/* --------------------------------------------------------------------------
   5  Text, Gliederung, Krume
   -------------------------------------------------------------------------- */

h1 { font-size: var(--t5); font-weight: 650; letter-spacing: -0.015em; }
/* Ohne diese Zeile setzt der Browser h2 auf 1.5em — genau die Größe von h1 —
   und eine Seite mit Abschnitten hätte keine Gliederung mehr. */
h2 { font-size: var(--t4); font-weight: 650; letter-spacing: -0.005em; }
h3 { font-size: var(--t3); font-weight: 650; }
h4 { font-size: var(--t3); font-weight: 650; }

/* Der erklärende Satz oben auf jeder Seite. Zuerst die Antwort, dann Belege. */
.fuehrung { font-size: var(--t4); line-height: 1.55; max-width: 68ch; }
.beisatz  { font-size: var(--t2); color: var(--text-leise); max-width: 78ch; }
/* Die Herkunftszeile. Eine Zahl ohne Quelle ist ein Gerücht. */
.quelle   { font-size: var(--t1); color: var(--text-leise); }
/* Der Verweis auf den Raum, zu dem ein Befund gehört. Er bricht nicht um,
   sonst zerfällt „Kommunikation / Online" mitten im Namen. */
.quelle.raum { margin-top: var(--a2); }
.quelle.raum a { white-space: nowrap; }

.krume {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--a1) var(--a2);
  font-size: var(--t2); color: var(--text-leise);
  margin-bottom: var(--a2);
}
.krume li { display: flex; align-items: center; gap: var(--a2); }
/* Das Trennzeichen kommt aus dem Blatt und nicht aus der Vorlage: sonst
   liest ein Vorleseprogramm auf jeder Seite ein Dutzend Schrägstriche vor. */
.krume li + li::before { content: "\203A"; color: var(--linie-stark); }
.krume a { color: var(--text-leise); }
.krume a:hover { color: var(--akzent); }
.krume [aria-current="page"] { color: var(--text); font-weight: 650; }

.titelzeile {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--a3) var(--a4);
}
.titelzeile .aktionen { margin-left: auto; display: flex; gap: var(--a2); }

.abschnitt { display: block; }
.abschnitt > .kopf {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--a2) var(--a3);
  padding-bottom: var(--a2);
  border-bottom: 1px solid var(--linie);
  margin-bottom: var(--a4);
}
.abschnitt > .kopf .beisatz { flex-basis: 100%; }
/* Ein Abschnitt mit id ist das Ziel einer Sprungleiste (/seite). Ohne diesen
   Abstand schöbe der Sprung die Überschrift des Abschnitts genau unter die
   klebende Kopfleiste — der Leser landete mitten im ersten Absatz und suchte
   die Überschrift, die er angeklickt hat. */
.abschnitt[id] { scroll-margin-top: calc(var(--kopf-hoehe) + var(--a3)); }

/* --------------------------------------------------------------------------
   6  Knöpfe und Formulare
   -------------------------------------------------------------------------- */

.knopf, button, input[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--a2);
  min-height: 32px; padding: var(--a1) var(--a3);
  font: inherit; font-size: var(--t3); line-height: 1.2;
  border: 1px solid var(--linie-stark); border-radius: var(--r1);
  background: var(--flaeche); color: var(--text);
  cursor: pointer; text-decoration: none;
}
.knopf:hover, button:hover { background: var(--flaeche-2); text-decoration: none; }

.knopf.haupt {
  background: var(--akzent); border-color: var(--akzent); color: #ffffff;
  font-weight: 650;
}
@media (prefers-color-scheme: dark) { .knopf.haupt { color: #0e1013; } }
.knopf.haupt:hover { filter: brightness(1.08); }

.knopf.leise {
  border-color: transparent; background: transparent; color: var(--text-leise);
}
.knopf.leise:hover { background: var(--flaeche-2); color: var(--text); }

label { display: block; font-size: var(--t2); font-weight: 650; margin-bottom: var(--a1); }

input[type="text"], input[type="password"], input[type="search"],
input[type="email"], input[type="number"], input[type="date"],
select, textarea {
  width: 100%;
  min-height: 36px; padding: var(--a2) var(--a3);
  font: inherit; font-size: var(--t3);
  color: var(--text); background: var(--flaeche);
  border: 1px solid var(--linie-stark); border-radius: var(--r1);
}
input[type="file"] { font: inherit; font-size: var(--t3); }

/* Das Abmeldeformular. Immer method="post" — ein Link wäre von einem
   Vorschau-Abruf des Browsers auszulösen. */
.abmelden { display: inline-flex; margin: 0; }

/* --------------------------------------------------------------------------
   7  Die Antwortkarte — das Wichtigste dieser Oberfläche

   Unsere Leser sind Zahnärzte und keine Marketingleute. Deshalb steht oben
   auf einer Seite zuerst eine Frage im Klartext, dann ein Satz Antwort und
   ERST DANN die große Zahl. Eine Zahl ohne Frage davor beantwortet nichts.
   -------------------------------------------------------------------------- */

.antwortkarte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--akzent);
  border-radius: var(--r2);
  padding: var(--a5);
  display: grid; gap: var(--a3);
}
.antwortkarte.kritisch { border-left-color: var(--kritisch); }
.antwortkarte.hinweis  { border-left-color: var(--hinweis); }
.antwortkarte.gut      { border-left-color: var(--gut); }
.antwortkarte.offen    { border-left-color: var(--offen); }

.antwortkarte .frage {
  font-size: var(--t1); font-weight: 650;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-leise);
}
.antwortkarte .antwort {
  font-size: var(--t4); font-weight: 650; line-height: 1.4; max-width: 52ch;
}
.antwortkarte .beleg { font-size: var(--t3); color: var(--text-leise); max-width: 68ch; }
.antwortkarte .wege { display: flex; flex-wrap: wrap; gap: var(--a2); }

.grosszahl { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--a2); }
.grosszahl .wert {
  font-size: var(--t6); font-weight: 700; line-height: 1;
  letter-spacing: -0.03em;
}
.grosszahl .einheit { font-size: var(--t4); font-weight: 650; color: var(--text-leise); }
.grosszahl.kritisch .wert { color: var(--kritisch); }
.grosszahl.hinweis  .wert { color: var(--hinweis); }
.grosszahl.gut      .wert { color: var(--gut); }
/* "offen" fehlte hier, obwohl die Antwortkarte den Zustand kennt: Ein Raum mit
   lauter offenen Punkten bekam eine orange Kante und darunter eine neutral
   graue Leitzahl — als hätte die Karte zwei Meinungen. Die Zahl trägt jetzt
   dieselbe Farbe wie die Kante. Sie ist nie der einzige Träger der Aussage;
   das Wort daneben ("offene Punkte") sagt dasselbe. */
.grosszahl.offen    .wert { color: var(--offen); }

/* Die Wege stehen nicht nur in der Antwortkarte und im Leerzustand: Auf /raum
   folgen sie auch einem bloßen Führungssatz. Ohne Grundregel fielen die Knöpfe
   dort untereinander statt nebeneinander. Die beiden Regeln oben und in §16
   bleiben stehen — sie sind jetzt nur noch Wiederholung, keine Bedingung. */
.wege { display: flex; flex-wrap: wrap; gap: var(--a2); }

/* --------------------------------------------------------------------------
   7b Der Aufmacher — Antwort links, Augenschein rechts

   Nur /seite braucht ihn: Dort gehören die Antwortkarte und die Aufnahme der
   Seite nebeneinander, weil die eine sagt, was zu tun ist, und die andere
   zeigt, wovon die Rede ist. Untereinander stand die Aufnahme rund 1300 px
   weit unten und wurde nie gesehen.

   Die Deckelung der Bildhöhe ist keine Feinheit, sondern der Grund für diesen
   Block: Ohne sie zieht ein Rechner-Screenshot über .kachel img { width:100% }
   die ganze Spalte auf und die Seite wird wieder so lang wie vorher. Der
   Ausschnitt beginnt oben — der Kopf einer Website sagt mehr als ihr Fuß.
   -------------------------------------------------------------------------- */

.aufmacher { display: grid; gap: var(--a4); align-items: start; }
@media (min-width: 900px) {
  .aufmacher { grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr); gap: var(--a5); }
}
.aufmacher > section { display: grid; gap: var(--a3); align-content: start; }
.aufmacher .kachelwand { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.aufmacher .kachel img { max-height: 200px; object-fit: cover; object-position: top center; }

/* --------------------------------------------------------------------------
   8  Kennzahlen — Wert, Name, Kurzerklärung, Quelle. In dieser Reihenfolge.
   -------------------------------------------------------------------------- */

.zahlen {
  display: grid; gap: var(--a3);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.zahl {
  display: grid; gap: var(--a1); align-content: start;
  padding: var(--a4);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r2);
  color: inherit; text-decoration: none;
}
a.zahl:hover { border-color: var(--linie-stark); text-decoration: none; }
.zahl .wert {
  font-size: var(--t5); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em;
}
.zahl .name { font-size: var(--t2); font-weight: 650; color: var(--text); }
.zahl .kurz { font-size: var(--t1); color: var(--text-leise); }

/* Die Einordnung: der lange Satz aus dem Woerterbuch, der sagt, ob die Zahl gut
   oder schlecht ist. Er steht offen in der Kachel und nicht in einem Aufklapper,
   deshalb muss er leiser sein als .name und kleiner als .kurz nicht werden darf
   — sonst waere er unlesbar. Die 78ch aus .beisatz werden aufgehoben: In einer
   190px-Kachel gibt es keine 78 Zeichen, die Begrenzung wuerde die Kachel nur
   unnoetig schmal halten. Umbruch im Wort, weil hier Fachwoerter wie
   „Alternativtext“ stehen und die Kachel schmal ist. */
.zahl .einordnung {
  font-size: var(--t1); line-height: 1.5;
  color: var(--text-leise); max-width: none;
  overflow-wrap: break-word;
}
/* Die Rechenzeile: „Bei Ihrer Abschlussquote von 30 % ... sind das rechnerisch
   4.320,00 €." Sie liest sich wie die Einordnung darueber und nicht wie die Zahl
   oben — derselbe Grad, dieselbe leise Farbe. Lauter waere hier falsch und nicht
   nur unschoen: Der Betrag ist gerechnet und nicht gemessen, und ein fetter
   Euro-Betrag in einer Kachel voller erhobener Zahlen behauptete das Gegenteil.
   Kursiv oder in einer eigenen Farbe steht er auch nicht da — der Unterschied
   gehoert in den Satz, wo ihn auch jemand hoert, der die Kachel vorgelesen
   bekommt. */
.zahl .auftragswert {
  font-size: var(--t1); line-height: 1.5;
  color: var(--text-leise); max-width: none;
  overflow-wrap: break-word;
}
.zahl .quelle { font-size: var(--t1); color: var(--text-leise); }

/* Der Satz zur Frische dieser einen Zahl: „Seit dem 3. August ist kein neuer
   Bericht mehr gekommen.“ Er steht unter der Herkunftszeile und liest sich wie
   sie — dieselbe Groesse, dieselbe leise Farbe. Lauter waere falsch: Die Zahl
   stimmt, sie ist nur nicht mehr neu. */
.zahl .nachschub { font-size: var(--t1); line-height: 1.5; color: var(--text-leise); }

/* Und die Kachel, deren Bericht ausbleibt. Bewusst KEIN Rot und kein Symbol:
   Rot gehoert .kritisch und steht fuer einen Fehler, den es hier nicht gibt —
   niemand kann ihn abstellen, und ein Fehlalarm, der jeden Monat wiederkommt,
   nimmt den echten Meldungen ihr Gewicht. Was bleibt, ist eine ruhige
   Unterscheidung: der Rahmen gestrichelt statt durchgezogen, die Zahl in der
   leisen Textfarbe statt in der vollen. Beides sagt „steht still“, ohne zu
   rufen, und beides bleibt sichtbar, wenn jemand Farben nicht unterscheidet. */
.zahl.unveraendert {
  border-style: dashed;
  background: var(--flaeche-2);
}
.zahl.unveraendert .wert { color: var(--text-leise); }

.zahl.kritisch .wert { color: var(--kritisch); }
.zahl.hinweis  .wert { color: var(--hinweis); }
.zahl.gut      .wert { color: var(--gut); }

/* --------------------------------------------------------------------------
   8b  Gegenüberstellung — die eigene Zahl, der Wert der Wettbewerber, der Abstand

   Keine Tabelle. Drei Spalten mit je einer Zahl wären auf einem Telefon drei
   abgeschnittene Spalten, und abgeschnitten wäre zuerst die dritte — der
   Abstand, also genau die Zahl, wegen der die Seite existiert. Ein Raster, das
   umbrechen darf, stellt bei 600px drei Felder nebeneinander und bei 380px
   dreimal eins untereinander, ohne dass etwas verschwindet oder rollt.

   Jede Zahl trägt ihre Rubrik über sich und nicht in einem Tabellenkopf weit
   oben: Untereinander gelesen wäre ein Tabellenkopf nach der zweiten Zeile
   außer Sicht, und drei nackte Zahlen ohne Aufschrift sind schlimmer als keine.
   -------------------------------------------------------------------------- */

.vergleich { display: grid; gap: var(--a3); }

.vergleichszeile {
  display: grid; gap: var(--a2); align-content: start;
  padding: var(--a4);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r2);
}
.vergleichszeile .name { font-size: var(--t2); font-weight: 650; color: var(--text); }

.gegenueber {
  display: grid; gap: var(--a3);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: end;
}

/* Die Rubrik steht über der Zahl, nicht daneben: Nebeneinander konkurriert sie
   mit ihr um dieselbe Zeile, und bei „3 beobachtete Wettbewerber (Zentralwert)“
   verlöre die Zahl. Tabellenziffern, damit die drei Werte untereinander an
   derselben Stelle stehen — sonst lassen sich zwei Nachkommastellen nicht
   vergleichen. */
.gegenueber .wert {
  display: grid; gap: var(--a1);
  font-size: var(--t5); font-weight: 700; line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}
.gegenueber .rubrik {
  font-size: var(--t1); font-weight: 500; line-height: 1.4;
  letter-spacing: 0; color: var(--text-leise);
}

/* Die eigene Zahl in voller Textfarbe, die fremde leiser: Sie ist der Maßstab
   und nicht das Ergebnis. Der Abstand steht wieder voll da, aber ohne Rot oder
   Grün — ob ein Vorsprung gut und ein Rückstand schlecht ist, hängt an der
   Richtung der Kennzahl und steht als Satz darunter. Eine Farbe an dieser
   Stelle wäre eine Wertung, die für die Hälfte der Zahlen falsch herum ist. */
.gegenueber .eigen  .rubrik { color: var(--text-leise); }
.gegenueber .eigen  { color: var(--text); }
.gegenueber .fremd  { color: var(--text-leise); }
.gegenueber .abstand { color: var(--text); }

.vergleichszeile .einordnung {
  font-size: var(--t1); line-height: 1.5;
  color: var(--text-leise); max-width: none;
  overflow-wrap: break-word;
}
.vergleichszeile .quelle { font-size: var(--t1); color: var(--text-leise); }

/* Die Zeile ohne Gegenwert. Derselbe gestrichelte Rahmen wie .zahl.unveraendert
   und aus demselben Grund: Hier ist nichts kaputt, hier fehlt nur etwas. Rot
   wäre ein Fehlalarm, den niemand abstellen kann — solange kein Bericht über
   den Wettbewerber vorliegt, bleibt das Feld leer, und der Satz darunter sagt
   das in Worten. Der Rahmen ist die zweite, farbunabhängige Auskunft dazu. */
.vergleichszeile.ohnegegenwert {
  border-style: dashed;
  background: var(--flaeche-2);
}

/* --------------------------------------------------------------------------
   9  Zustände — Symbol UND Wort, nie nur Farbe

   Jeder Schweregrad hat eine eigene FORM: Quadrat, Raute, Ring, Strich.
   Wer Rot und Grün nicht unterscheidet, liest die Aussage trotzdem.
   -------------------------------------------------------------------------- */

.punkte { display: flex; flex-wrap: wrap; gap: var(--a1) var(--a3); }
.punkt {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t2); color: var(--text); white-space: nowrap;
}
a.punkt { color: var(--text); }
a.punkt:hover { color: var(--akzent); }
.punkt::before {
  content: ""; flex: none; width: 8px; height: 8px;
  background: var(--text-leise); border-radius: 1px;
}
.punkt.kritisch::before { background: var(--kritisch); }                          /* Quadrat */
.punkt.hinweis::before  { background: var(--hinweis); transform: rotate(45deg); } /* Raute   */
.punkt.gut::before      { background: none; border: 2px solid var(--gut); border-radius: 50%; } /* Ring */
.punkt.offen::before    { background: var(--offen); height: 3px; border-radius: 999px; }        /* Strich */

/* Die größere Fassung: ein Feld mit Symbol, Wort und Zahl. */
.zustand {
  display: inline-flex; align-items: center; gap: var(--a2);
  min-height: 28px; padding: 2px var(--a3);
  border: 1px solid var(--linie); border-radius: 999px;
  background: var(--flaeche-2); color: var(--text-leise);
  font-size: var(--t2); font-weight: 650; text-decoration: none;
}
.zustand.kritisch { color: var(--kritisch); background: var(--kritisch-flaeche); border-color: var(--kritisch-rand); }
.zustand.hinweis  { color: var(--hinweis);  background: var(--hinweis-flaeche);  border-color: var(--hinweis-rand); }
.zustand.gut      { color: var(--gut);      background: var(--gut-flaeche);      border-color: var(--gut-rand); }
.zustand.offen    { color: var(--offen);    background: var(--offen-flaeche);    border-color: var(--offen-rand); }

/* Für die Checkliste (system/seiten/teile/checkliste.php): erfüllt/mangel teilen sich
   die Töne von gut/kritisch, "ungeprüft" bündelt diesmal nicht gemessen, von Hand und
   ohne Messquelle unter der neutralen Grundfarbe von .zustand — keiner der drei
   behauptet einen Mangel oder ein Bestehen. */
.zustand.erfuellt   { color: var(--gut);       background: var(--gut-flaeche);       border-color: var(--gut-rand); }
.zustand.mangel     { color: var(--kritisch);  background: var(--kritisch-flaeche);  border-color: var(--kritisch-rand); }
.zustand.ungeprueft { color: var(--text-leise); background: var(--flaeche-2);         border-color: var(--linie); }

/* Die Punktliste der Checkliste (teile/checkliste.php) — derselbe Aufbau wie .befund
   oben in teile/ampel.php: eine Zeile je Punkt, getrennt durch eine Linie statt Gaps. */
.checkliste-punkte { list-style: none; margin: 0; padding: 0; }
.checkliste-punkte li { padding: var(--a3) var(--a4); display: grid; gap: var(--a1); }
.checkliste-punkte li + li { border-top: 1px solid var(--linie); }
.checkliste-punkte li h4 { font-size: var(--t3); font-weight: 650; }
.checkliste-punkte li .text { font-size: var(--t3); color: var(--text-leise); max-width: 78ch; }

/* --------------------------------------------------------------------------
   10  Karten
   -------------------------------------------------------------------------- */

.karten {
  display: grid; gap: var(--a3);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.karte {
  display: grid; gap: var(--a2); align-content: start;
  padding: var(--a4);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r2);
}
.karte h3 { display: flex; align-items: center; gap: var(--a2); }
.karte h3 a { color: var(--text); }
.karte h3 a:hover { color: var(--akzent); }
.karte .satz { font-size: var(--t3); color: var(--text-leise); }
.karte .beisatz { max-width: none; }

/* Ein gesperrter Raum ist nicht kaputt, er ist nur nicht beauftragt:
   gedämpft und gestrichelt, ausdrücklich NICHT rot. Zweitverwendung auf
   /vertraege für einen beendeten Vertrag — dasselbe Aussehen, dieselbe
   Aussage: da, nachlesbar, nicht mehr wirksam. */
.karte.gesperrt {
  background: var(--flaeche-2);
  border-style: dashed;
  border-color: var(--linie-stark);
}
.karte.gesperrt h3 a { color: var(--text-leise); }
.karte.gesperrt h3 a:hover { color: var(--akzent); }
.schloss { display: inline-flex; color: var(--text-leise); }

/* Ein gebuchter Raum, in dem noch nichts erhoben ist: bezahlt, also vorne bei
   dem, was der Kunde bekommt — aber noch ohne Zahlen. Gestrichelt wie
   .karte.gesperrt, weil beide Karten auf etwas warten; die volle Flaeche und
   die normale Textfarbe unterscheiden sie davon, denn dieser Raum ist nicht
   gedaempft, sondern unterwegs. Die Kante traegt den Akzent und nicht Rot: Es
   fehlt nichts, es ist nur noch nichts gemessen. */
.karte.gebucht {
  border-style: dashed;
  border-left: 3px solid var(--akzent);
}

/* Die nicht beauftragten Raeume einer Ebene stehen auf /haus als Zeilen und nicht
   mehr als Karten: Elf gesperrte Karten haben die drei beauftragten Raeume
   erschlagen. Als Zeile bleibt jeder Raum sichtbar, verlinkt und mit seiner Frage
   im Klartext — nur eben leiser als das, was schon gemessen wird.
   Zweispaltig erst, wenn Platz dafuer da ist; darunter untereinander. */
.ausblickzeilen {
  display: grid; gap: var(--a1);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  list-style: none; margin: 0; padding: 0;
}

/* Gedaempft und leise wie .karte.gesperrt — ausdruecklich NICHT rot: Ein Raum ohne
   Auftrag ist nicht kaputt. Der Name traegt die normale Textfarbe (Kontrast fuer
   den Link), die Frage dahinter steht leiser; --text-leise haelt gegen --flaeche
   ueber 4.5:1, deshalb darf die Frage klein sein. Das Schloss steht am Zeilenanfang
   und rutscht bei einem Umbruch nicht unter den Text. */
.ausblickzeile {
  display: block;
  padding: var(--a2) 0;
  border-bottom: 1px dashed var(--linie);
  font-size: var(--t2); line-height: 1.5;
  color: var(--text-leise);
  overflow-wrap: break-word;
}
.ausblickzeile:last-child { border-bottom: 0; }
.ausblickzeile a { color: var(--text); font-weight: 650; }
.ausblickzeile a:hover { color: var(--akzent); }
.ausblickzeile .schloss { margin-right: 6px; vertical-align: baseline; }
.ausblick ul { display: grid; gap: var(--a1); font-size: var(--t2); color: var(--text-leise); }
.ausblick ul li { padding-left: var(--a3); position: relative; }
.ausblick ul li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--linie-stark);
}

/* T6: das Angebot in der Ausblickskarte (Anreißer, Preis, Vorbehalt, Kontakt, Knopf).
   Keine neue Farbe — Gewicht und Abstand kommen aus bestehenden Variablen. .anreisser
   und .preis wiegen schwerer als der Fließtext um sie herum, mit demselben Gewicht wie
   eine Kachelzahl (.zahl .name), und der Preis bekommt etwas Abstand nach oben, weil er
   sonst am Anreißer klebt. .vorbehalt rückt dafür enger an den Preis heran, zu dem er
   gehört, und .kontakt bekommt seinerseits etwas Luft: eine neue Auskunft und keine
   Fortsetzung des Vorbehalts. */
.ausblick .anreisser { font-weight: 650; }
.ausblick .preis { font-weight: 650; margin-top: var(--a3); }
.ausblick .vorbehalt { margin-top: 0; }
.ausblick .kontakt { margin-top: var(--a3); }

/* --------------------------------------------------------------------------
   11  Ampel — die Befundgruppen

   Eine Gruppe ist immer ein <details>, deshalb details.ampel. /setup trägt
   ein <p class="ampel gruen">; beide dürfen sich nicht ins Gehege kommen.
   -------------------------------------------------------------------------- */

details.ampel {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--linie-stark);
  border-radius: var(--r2);
}
details.ampel + details.ampel { margin-top: var(--a2); }
details.ampel > summary {
  display: flex; align-items: center; gap: var(--a2);
  min-height: 44px; padding: var(--a2) var(--a4);
  cursor: pointer; font-size: var(--t3); font-weight: 650;
  list-style: none;
}
details.ampel > summary::-webkit-details-marker { display: none; }
details.ampel > summary::marker { content: ""; }
details.ampel > summary::before {
  content: "\203A"; width: 12px; color: var(--text-leise);
  font-size: var(--t4); line-height: 1;
}
details.ampel[open] > summary::before { content: "\2304"; }
details.ampel[open] > summary { border-bottom: 1px solid var(--linie); }
details.ampel > summary .anzahl {
  margin-left: auto; font-weight: 400; font-size: var(--t2); color: var(--text-leise);
}

details.ampel.kritisch { border-left-color: var(--kritisch); }
details.ampel.kritisch > summary { color: var(--kritisch); }
details.ampel.hinweis  { border-left-color: var(--hinweis); }
details.ampel.hinweis  > summary { color: var(--hinweis); }
details.ampel.gut      { border-left-color: var(--gut); }
details.ampel.gut      > summary { color: var(--gut); }
details.ampel.offen    { border-left-color: var(--offen); }
details.ampel.offen    > summary { color: var(--offen); }

.befund { padding: var(--a3) var(--a4); display: grid; gap: var(--a1); }
.befund + .befund { border-top: 1px solid var(--linie); }
.befund h4 { font-size: var(--t3); font-weight: 650; }
.befund .text { font-size: var(--t3); color: var(--text-leise); max-width: 78ch; }
/* Eine lange Adresse bricht notfalls mitten im Wort, sonst schiebt sie die
   Seite auf dem Telefon nach rechts. */
.befund .url {
  font-family: var(--schrift-fest); font-size: var(--t1);
  color: var(--text-leise); overflow-wrap: anywhere; word-break: break-word;
}

/* P7-09: .vorschlag ("Womit wir anfangen würden", teile/vorschlaege.php) — baugleich zu
   .befund oben, nur mit eigenem Namen: ein Vorschlag ist kein Befund. */
.vorschlag { padding: var(--a3) var(--a4); display: grid; gap: var(--a1); }
.vorschlag + .vorschlag { border-top: 1px solid var(--linie); }
.vorschlag h3 { font-size: var(--t3); font-weight: 650; }
.vorschlag .wirkung { font-size: var(--t3); color: var(--text-leise); }

/* --------------------------------------------------------------------------
   12  Aufklapper ohne Ampel-Bedeutung (Anleitungen, Nebenerklärungen)
   -------------------------------------------------------------------------- */

/* P6-11: details.erklaerung ("Was heißt das?" unter einem Befund mit Katalogregel,
   seiten/teile/ampel.php) braucht keine eigene Regel — details:not(.ampel) gleich
   darunter trifft sie schon, samt Rahmen, Sprungpfeil und .aufklappinhalt.
   P7-09: details.ordnung ("Wie wir ordnen", teile/vorschlaege.php) ebenso — dieselbe
   Regel greift, ohne dass .ordnung ein eigenes Aussehen bekommt. */
details:not(.ampel), .aufklapper {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r2);
}
details:not(.ampel) + details:not(.ampel) { margin-top: var(--a2); }
details:not(.ampel) > summary, .aufklapper > summary {
  display: flex; align-items: center; gap: var(--a2);
  min-height: 44px; padding: var(--a2) var(--a4);
  cursor: pointer; font-size: var(--t3); font-weight: 650;
  list-style: none;
}
details:not(.ampel) > summary::-webkit-details-marker,
.aufklapper > summary::-webkit-details-marker { display: none; }
details:not(.ampel) > summary::marker, .aufklapper > summary::marker { content: ""; }
details:not(.ampel) > summary::before, .aufklapper > summary::before {
  content: "\203A"; width: 12px; color: var(--text-leise); font-size: var(--t4); line-height: 1;
}
details:not(.ampel)[open] > summary::before, .aufklapper[open] > summary::before { content: "\2304"; }
details:not(.ampel)[open] > summary, .aufklapper[open] > summary { border-bottom: 1px solid var(--linie); }
details:not(.ampel) > summary .anzahl, .aufklapper > summary .anzahl {
  margin-left: auto; font-weight: 400; font-size: var(--t2); color: var(--text-leise);
}
.aufklappinhalt { padding: var(--a4); display: grid; gap: var(--a3); }

/* --------------------------------------------------------------------------
   13  Tabellen — dicht, Haarlinien, klebender Kopf, Zahlen rechts

   .tabelle ist der BEHÄLTER, nicht die Tabelle. Ohne ihn schiebt eine breite
   Tabelle den ganzen Körper aus dem Bild.
   -------------------------------------------------------------------------- */

.tabelle {
  /* position: relative ist hier kein Schmuck, sondern die Reparatur eines am
     2026-08-29 gemessenen Fehlers: Bei 390px rollte die ganze SEITE auf 494px.
     Schuld war <span class="verborgen"> in den Zellen -- position:absolute, und
     ohne einen positionierten Vorfahren wird so ein Element nicht vom
     Rollbehälter geklemmt, sondern gegen die Seite gesetzt, an seiner
     Ruheposition bei x≈493 in der 640px breiten Tabelle. Die Hinweise für
     Vorleseprogramme schoben also das Bild auf. Mit relative ist .tabelle ihr
     Bezugspunkt, und es rollt wieder nur der Behälter. */
  position: relative;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r2);
}
.tabelle table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: var(--t2);
}
.tabelle caption {
  text-align: left; padding: var(--a3) var(--a4);
  border-bottom: 1px solid var(--linie);
  font-size: var(--t2); color: var(--text-leise);
}
/* Niedrige Spezifität, damit .zahlenspalte darunter gewinnt. */
.tabelle :where(th, td) {
  text-align: left; padding: var(--a2) var(--a3);
  border-bottom: 1px solid var(--linie); vertical-align: middle;
}
.tabelle tbody tr:last-child :where(th, td) { border-bottom: 0; }

.tabelle thead th {
  position: sticky; top: var(--kopf-hoehe); z-index: 5;
  background: var(--flaeche-2);
  font-size: var(--t1); font-weight: 650;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-leise); white-space: nowrap;
}
.tabelle tbody tr:hover > :where(th, td),
.tabelle tbody tr:focus-within > :where(th, td) { background: var(--flaeche-3); }

/* Sortierlinks: Doppelpfeil im Ruhezustand, Richtungspfeil an der aktiven
   Spalte. Sortiert wird über ?sortierung=, damit die Ansicht eine eigene
   Adresse hat, die sich weitergeben lässt. */
.sortierbar a { color: inherit; display: inline-flex; align-items: center; gap: 4px; }
.sortierbar a:hover { color: var(--text); text-decoration: none; }
.sortierbar a::after { content: "\2195"; opacity: 0.45; font-size: var(--t2); }
.sortierbar a.hier { color: var(--text); }
.sortierbar a.hier::after { content: "\2193"; opacity: 1; }
.sortierbar a.hier.aufwaerts::after { content: "\2191"; }

/* Zahlen rechts, mit Tabellenziffern — sonst lassen sie sich nicht mit dem
   Auge vergleichen. Jede Zahlenspalte bekommt diese Klasse. */
.tabelle th.zahlenspalte, .tabelle td.zahlenspalte,
th.zahlenspalte, td.zahlenspalte { text-align: right; font-variant-numeric: tabular-nums; }
.zahlenspalte a { justify-content: flex-end; }
.einheit { color: var(--text-leise); font-size: var(--t1); margin-left: 2px; }

.tabelle .pfad {
  font-family: var(--schrift-fest); font-size: var(--t2);
  display: block; max-width: 24ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tabelle .titel, .tabelle .seitentitel {
  color: var(--text-leise); display: block; max-width: 34ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Ecken runden, ohne einen Rollbehälter zu erzeugen — der bräche sticky. */
.tabelle thead tr:first-child th:first-child { border-top-left-radius: var(--r2); }
.tabelle thead tr:first-child th:last-child  { border-top-right-radius: var(--r2); }
.tabelle tr:last-child > :where(th, td):first-child { border-bottom-left-radius: var(--r2); }
.tabelle tr:last-child > :where(th, td):last-child  { border-bottom-right-radius: var(--r2); }

/* Die Summenzeile. Kräftige Linie oben, keine unten — ohne sie läse sich
   die Jahressumme wie eine weitere Rechnung. */
.tabelle tfoot :where(th, td) {
  background: var(--flaeche-2); font-weight: 650; color: var(--text);
  border-top: 1px solid var(--linie-stark); border-bottom: 0;
}
.tabellenfuss { font-size: var(--t1); color: var(--text-leise); margin-top: var(--a2); }

/* Erscheint erst, wenn die Tabelle wirklich seitwärts rollt. */
.wisch-hinweis { display: none; }

/* --------------------------------------------------------------------------
   14  Umschalter und Werkzeugleiste — reine Links, kein JavaScript
   -------------------------------------------------------------------------- */

.werkzeugleiste {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2) var(--a3);
}
.umschalter {
  display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px;
  background: var(--flaeche-2);
  border: 1px solid var(--linie);
  border-radius: var(--r2);
}
.umschalter li { display: flex; }
.umschalter a {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 30px; padding: 0 var(--a3);
  border-radius: var(--r1);
  font-size: var(--t2); color: var(--text-leise);
}
.umschalter a:hover { color: var(--text); text-decoration: none; }
.umschalter a.hier, .umschalter a[aria-current] {
  background: var(--flaeche); color: var(--text); font-weight: 650;
  box-shadow: inset 0 0 0 1px var(--linie);
}
.umschalter .zaehler { color: var(--text-leise); font-weight: 400; }

/* --------------------------------------------------------------------------
   15  Kachelwand, Vorschau, Dateifeld, Baum
   -------------------------------------------------------------------------- */

.kachelwand {
  display: grid; gap: var(--a3);
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.kachel {
  display: grid; gap: var(--a2); align-content: start;
  padding: var(--a3);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r2);
}
.kachel img, .vorschau {
  width: 100%; height: auto;
  border: 1px solid var(--linie); border-radius: var(--r1);
  background: var(--flaeche-2);
}
/* Die Deckelung der Kachelhöhe — der Grund, warum die Kachelwand nicht mehr
   doppelt so hoch ist wie jede andere Ansicht.

   Eine Aufnahme ist ein ganzseitiges Bildschirmfoto: 1280 Pixel breit und
   nicht selten über 4000 Pixel hoch. Über `width: 100%` wurde daraus in einer
   165 Pixel breiten Kachel eine Säule von rund 600 Pixeln — bei 33 Seiten in
   fünf Spalten allein dafür über 4000 Pixel Seitenlänge. Gedeckelt und von
   oben beschnitten bleibt genau der Teil stehen, an dem man eine Seite
   wiedererkennt: ihr Kopf mit Logo, Menü und Aufmacher. Die Aufnahme wird
   kleiner, sie verschwindet nicht — sie ist der Zweck dieser Ansicht.

   Niedrigere Spezifität als `.aufmacher .kachel img`: Auf /seite steht die
   Aufnahme allein neben der Antwortkarte und darf dort ihre 200 Pixel
   behalten. */
.kachel img {
  max-height: 120px;
  object-fit: cover; object-position: top center;
}
.kachel .pfad, .pfad {
  font-family: var(--schrift-fest); font-size: var(--t2);
  overflow-wrap: anywhere;
}
/* Steht an der Stelle der Aufnahme, wenn es keine sinnvolle gibt: die
   Aufnahme einer Sitemap zeigt rohes XML. Gestrichelt und gedämpft wie eine
   gesperrte Karte, in derselben Höhe wie ein Vorschaubild, damit die
   Kacheln eine Reihe bilden. */
.dateifeld {
  display: grid; place-items: center;
  /* Dieselbe Höhe wie eine gedeckelte Aufnahme, damit die Kacheln einer
     Reihe eine Oberkante haben. */
  min-height: 120px; padding: var(--a3);
  background: var(--flaeche-2);
  border: 1px dashed var(--linie-stark);
  border-radius: var(--r1);
  font-family: var(--schrift-fest); font-size: var(--t2);
  color: var(--text-leise); text-align: center; overflow-wrap: anywhere;
}
td .vorschau, .tabelle .vorschau { width: 64px; height: auto; }

/* Der Baum war die Ursache des Querscrollens auf dem Telefon: Ein Ast heißt
   „/lifechanging-dentistry-beim-veedelzahnarzt-koeln“ — achtundvierzig
   Zeichen in fester Schrift, ein einziges Wort ohne Leerzeichen und ohne
   Bindestrich, an dem ein Browser von sich aus umbrechen dürfte. Dazu die
   Einrückung jeder Ebene: In der Summe schob eine solche Zeile die GANZE
   Seite nach rechts, nicht nur den Baum. Mit `overflow-wrap: anywhere` bricht
   der Ast in der Zeile um; er bleibt vollständig lesbar und nichts wird
   abgeschnitten. Der Baum bekommt ausdrücklich kein eigenes overflow — ein
   Kasten, in dem man waagerecht schieben muss, um einen Pfad zu Ende zu
   lesen, ist keine Erklärung mehr. */
.baum {
  font-family: var(--schrift-fest); font-size: var(--t2);
  overflow-wrap: anywhere; word-break: break-word;
}
.baum ul { list-style: none; padding-left: var(--a4); }
.baum > ul { padding-left: 0; }
/* Die Einrückung bekommt eine Linie: ohne sie zerfällt ein tiefer Baum in
   eine Liste ohne erkennbare Ebenen. */
.baum ul ul { border-left: 1px solid var(--linie); margin-left: var(--a2); }
.baum li { padding: 2px 0 2px var(--a2); }

/* --------------------------------------------------------------------------
   16  Verlauf, Pfeile, Balken

   Der Pfeil heißt besser/schlechter/gleich und nicht hoch/runter: bei
   „Bilder ohne Alternativtext" ist ein Rückgang der Erfolg.
   -------------------------------------------------------------------------- */

.verlauf {
  display: grid; gap: var(--a3);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.verlauf > li {
  display: grid; gap: var(--a1); align-content: start;
  padding: var(--a4);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r2);
}

.pfeil {
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 650; font-variant-numeric: tabular-nums;
  color: var(--text-leise);
}
.pfeil.besser     { color: var(--gut); }
.pfeil.schlechter { color: var(--kritisch); }
.pfeil.gleich     { color: var(--text-leise); }

/* Balken. Die Breite kommt als Custom Property --f (0..100) aus den Daten;
   clamp() ist der zweite Riegel, falls jemand das Begrenzen in der Vorlage
   vergisst. Ein style-Attribut mit fertigem Prozentwert wäre von der
   Inhaltsrichtlinie verboten. */
.balken {
  position: relative; height: 8px; overflow: hidden;
  background: var(--flaeche-3); border-radius: 999px;
}
.balken .fuellung {
  display: block; height: 100%;
  width: clamp(0%, calc(var(--f, 0) * 1%), 100%);
  background: var(--akzent); border-radius: 999px;
}
.balken .fuellung.kritisch { background: var(--kritisch); }
.balken .fuellung.hinweis  { background: var(--hinweis); }
.balken .fuellung.gut      { background: var(--gut); }

/* Ein Balken in einer Tabellenzelle, rechtsbündig neben der Zahl. */
.zellbalken { display: flex; align-items: center; justify-content: flex-end; gap: var(--a2); }
.zellbalken .schiene {
  flex: none; width: 56px; height: 6px; overflow: hidden;
  background: var(--flaeche-3); border-radius: 999px;
}
.zellbalken .schiene span {
  display: block; height: 100%;
  width: clamp(0%, calc(var(--f, 0) * 1%), 100%);
  background: var(--linie-stark);
}
.zellbalken .schiene span.stark { background: var(--akzent); }

/* Die Entwicklung als Säulenreihe. Kein SVG, kein Skript: jede Säule holt
   ihre Höhe aus --h (0..100). Die Reihe trägt role="img" und ein aria-label,
   das die Entwicklung in Worten sagt — ein Bild aus Kästen liest kein
   Vorleseprogramm vor. */
.saeulen {
  display: flex; align-items: flex-end; gap: 2px;
  height: 56px; padding: var(--a2);
  background: var(--flaeche-2);
  border: 1px solid var(--linie); border-radius: var(--r2);
}
.saeulen .saeule {
  flex: 1 1 0; min-width: 2px;
  height: clamp(2px, calc(var(--h, 0) * 1%), 100%);
  background: var(--akzent); border-radius: 2px 2px 0 0;
}
.saeulen .saeule.kritisch { background: var(--kritisch); }
.saeulen .saeule.hinweis  { background: var(--hinweis); }
.saeulen .saeule.gut      { background: var(--gut); }
.saeulen .saeule.leise    { background: var(--linie-stark); }
.saeulenfuss {
  display: flex; justify-content: space-between; gap: var(--a2);
  margin-top: var(--a1); font-size: var(--t1); color: var(--text-leise);
}

/* Die Linie der Zeitachse. Serverseitig gezeichnetes Inline-SVG, kein Skript und
   kein Bild von außen: die Inhaltsrichtlinie dieses Portals ist "default-src 'self'".

   Die Geometrie steht ausschließlich in points, cx, cy und viewBox — also in
   Attributen, die die Richtlinie nie anfasst. Was hier steht, ist deshalb allein
   Farbe und Strichstärke. Wer das umdreht und eine Koordinate in ein style-Attribut
   schreibt, wiederholt den Befund vom 2026-08-29: dort waren alle Balken 0px breit,
   weil die Richtlinie style-Attribute verwirft, und keine Prüfung sah es.

   fill: none gehört zwingend hierher: ohne Füllangabe zöge der Browser die Polylinie
   zu einer geschlossenen Fläche zu, und aus dem Verlauf würde ein Gebirge. */
.linie {
  display: block; width: 100%; max-width: 420px; height: auto;
  padding: var(--a2);
  background: var(--flaeche-2);
  border: 1px solid var(--linie); border-radius: var(--r2);
}
.linie-pfad {
  fill: none; stroke: var(--akzent); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.linie-punkt { fill: var(--akzent); stroke: var(--flaeche); stroke-width: 1; }

/* Die höchstens fünf Sätze der Zeitachse aus Idee 4: besser, schlechter, getan,
   als Nächstes, was wir brauchen. Eine Liste, weil es gleichrangige Aussagen sind
   und keine Rangfolge — die Reihenfolge kommt aus Woerterbuch::verlaufssaetze().
   Zeitraum, Lage und neu/entfallen stehen nicht hier, sondern in der Antwortkarte
   und in den Listen darunter. */
.verlaufssaetze {
  display: flex; flex-direction: column; gap: var(--a2);
  max-width: 78ch; font-size: var(--t3); line-height: 1.55;
}
.verlaufssaetze li { padding-left: var(--a3); border-left: 2px solid var(--linie-stark); }

/* Die Zeitraumwahl. Ein GET-Formular ohne Kennzeichen: diese Seite schreibt nichts,
   und der gewählte Zeitraum soll in der Adresse stehen bleiben, damit man ihn
   weitergeben und als Lesezeichen behalten kann. */
.zeitraum {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--a3);
  padding: var(--a3);
  background: var(--flaeche-2);
  border: 1px solid var(--linie); border-radius: var(--r2);
}
.zeitraum-feld {
  display: flex; flex-direction: column; gap: 4px;
  margin: 0; font-size: var(--t2); color: var(--text-leise);
}
.zeitraum-feld label { font-weight: 650; color: var(--text); }

/* Der Anteil jedes Balkens und jeder Säule -- als Klasse, nicht als style.

   Am 2026-08-29 im Browser gemessen: Die Inhaltsrichtlinie dieses Portals ist
   "default-src 'self'" ohne style-src, und die verwirft ein style-Attribut
   vollständig -- auch eines, das nur eine Custom Property setzt. Die Balken
   waren dadurch gerechnet 0px breit, überall, seit es sie gibt. Der Kommentar
   in Abschnitt 15 nahm an, nur ein fertiger Prozentwert wäre verboten; das war
   der Irrtum, verboten ist das Attribut.

   Die Antwort ist nicht 'unsafe-inline' in der Richtlinie, sondern der Wert im
   Stilblatt: 101 Klassen, ganze Prozent. Ein Balken ist wenige hundert Pixel
   breit -- ein Zehntelprozent davon wäre weniger als ein Pixel und behauptete
   eine Genauigkeit, die kein Auge einlöst. Vergeben werden sie von
   Vorlage::anteilKlasse(), die klemmt und rundet; das clamp() oben bleibt der
   zweite Riegel. Seitdem gibt das Portal kein style-Attribut mehr aus. */
.anteil-0{--f:0;--h:0} .anteil-1{--f:1;--h:1} .anteil-2{--f:2;--h:2} .anteil-3{--f:3;--h:3} .anteil-4{--f:4;--h:4} .anteil-5{--f:5;--h:5}
.anteil-6{--f:6;--h:6} .anteil-7{--f:7;--h:7} .anteil-8{--f:8;--h:8} .anteil-9{--f:9;--h:9} .anteil-10{--f:10;--h:10} .anteil-11{--f:11;--h:11}
.anteil-12{--f:12;--h:12} .anteil-13{--f:13;--h:13} .anteil-14{--f:14;--h:14} .anteil-15{--f:15;--h:15} .anteil-16{--f:16;--h:16} .anteil-17{--f:17;--h:17}
.anteil-18{--f:18;--h:18} .anteil-19{--f:19;--h:19} .anteil-20{--f:20;--h:20} .anteil-21{--f:21;--h:21} .anteil-22{--f:22;--h:22} .anteil-23{--f:23;--h:23}
.anteil-24{--f:24;--h:24} .anteil-25{--f:25;--h:25} .anteil-26{--f:26;--h:26} .anteil-27{--f:27;--h:27} .anteil-28{--f:28;--h:28} .anteil-29{--f:29;--h:29}
.anteil-30{--f:30;--h:30} .anteil-31{--f:31;--h:31} .anteil-32{--f:32;--h:32} .anteil-33{--f:33;--h:33} .anteil-34{--f:34;--h:34} .anteil-35{--f:35;--h:35}
.anteil-36{--f:36;--h:36} .anteil-37{--f:37;--h:37} .anteil-38{--f:38;--h:38} .anteil-39{--f:39;--h:39} .anteil-40{--f:40;--h:40} .anteil-41{--f:41;--h:41}
.anteil-42{--f:42;--h:42} .anteil-43{--f:43;--h:43} .anteil-44{--f:44;--h:44} .anteil-45{--f:45;--h:45} .anteil-46{--f:46;--h:46} .anteil-47{--f:47;--h:47}
.anteil-48{--f:48;--h:48} .anteil-49{--f:49;--h:49} .anteil-50{--f:50;--h:50} .anteil-51{--f:51;--h:51} .anteil-52{--f:52;--h:52} .anteil-53{--f:53;--h:53}
.anteil-54{--f:54;--h:54} .anteil-55{--f:55;--h:55} .anteil-56{--f:56;--h:56} .anteil-57{--f:57;--h:57} .anteil-58{--f:58;--h:58} .anteil-59{--f:59;--h:59}
.anteil-60{--f:60;--h:60} .anteil-61{--f:61;--h:61} .anteil-62{--f:62;--h:62} .anteil-63{--f:63;--h:63} .anteil-64{--f:64;--h:64} .anteil-65{--f:65;--h:65}
.anteil-66{--f:66;--h:66} .anteil-67{--f:67;--h:67} .anteil-68{--f:68;--h:68} .anteil-69{--f:69;--h:69} .anteil-70{--f:70;--h:70} .anteil-71{--f:71;--h:71}
.anteil-72{--f:72;--h:72} .anteil-73{--f:73;--h:73} .anteil-74{--f:74;--h:74} .anteil-75{--f:75;--h:75} .anteil-76{--f:76;--h:76} .anteil-77{--f:77;--h:77}
.anteil-78{--f:78;--h:78} .anteil-79{--f:79;--h:79} .anteil-80{--f:80;--h:80} .anteil-81{--f:81;--h:81} .anteil-82{--f:82;--h:82} .anteil-83{--f:83;--h:83}
.anteil-84{--f:84;--h:84} .anteil-85{--f:85;--h:85} .anteil-86{--f:86;--h:86} .anteil-87{--f:87;--h:87} .anteil-88{--f:88;--h:88} .anteil-89{--f:89;--h:89}
.anteil-90{--f:90;--h:90} .anteil-91{--f:91;--h:91} .anteil-92{--f:92;--h:92} .anteil-93{--f:93;--h:93} .anteil-94{--f:94;--h:94} .anteil-95{--f:95;--h:95}
.anteil-96{--f:96;--h:96} .anteil-97{--f:97;--h:97} .anteil-98{--f:98;--h:98} .anteil-99{--f:99;--h:99} .anteil-100{--f:100;--h:100}

/* --------------------------------------------------------------------------
   17  Leerzustand, Gerüst, Streifen, Fehler

   Ein Leerzustand ist nie in der Sprache eines Fehlers geschrieben. Er sagt
   einen Satz, zeigt das gestrichelte Gerüst dessen, was hier später steht,
   und nennt den echten nächsten Schritt.
   -------------------------------------------------------------------------- */

.leerzustand {
  display: grid; gap: var(--a3); justify-items: start;
  padding: var(--a5);
  max-width: 72ch;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--r2);
  font-size: var(--t3); color: var(--text-leise);
}
.leerzustand .kurzsatz { font-size: var(--t4); font-weight: 650; color: var(--text); }
.leerzustand p { font-size: var(--t3); color: var(--text-leise); }
.leerzustand .wege { display: flex; flex-wrap: wrap; gap: var(--a2); }

/* Reine Andeutung. Es werden keine Zahlen erfunden — nur der Aufbau der
   künftigen Tabelle wird gezeigt. */
.geruest {
  width: 100%; max-width: 560px;
  background: var(--flaeche-2);
  border: 1px dashed var(--linie-stark);
  border-radius: var(--r1);
  overflow: hidden;
}
.geruest .zeile {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 0.8fr;
  gap: var(--a3); align-items: center;
  padding: var(--a2) var(--a3);
  border-bottom: 1px dashed var(--linie);
}
.geruest .zeile:last-child { border-bottom: 0; }
.geruest .zeile span { display: block; height: 8px; border-radius: 999px; background: var(--linie); }
.geruest .zeile.kopf span { background: var(--linie-stark); height: 6px; }
.geruest .zeile:nth-child(3) span { opacity: 0.75; }
.geruest .zeile:nth-child(4) span { opacity: 0.5; }
.geruest .zeile:nth-child(5) span { opacity: 0.3; }

/* Ein einzelner hervorgehobener Satz, etwa „Am dringendsten: …". */
.streifen {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2) var(--a3);
  padding: var(--a3) var(--a4);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--akzent);
  border-radius: var(--r1);
  font-size: var(--t3);
}
.streifen.kritisch { border-left-color: var(--kritisch); }
.streifen.hinweis  { border-left-color: var(--hinweis); }
.streifen.gut      { border-left-color: var(--gut); }
/* Die vierte Schwere fehlte: Der auffälligste Befund einer Raumkarte kann
   „Noch offen" sein, und dann fiel der Streifen auf die neutrale Akzentkante
   zurück und sah aus wie ein Hinweis ohne Dringlichkeit. Dieselbe Farbe wie
   .punkt.offen und .antwortkarte.offen, damit ein Zustand im ganzen Portal
   nur eine Farbe hat. */
.streifen.offen    { border-left-color: var(--offen); }
.streifen .etikett {
  font-size: var(--t1); text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-leise);
}

/* .fehler ist die Absage — etwas ist wirklich schiefgegangen. Das ist etwas
   anderes als ein leeres Feld, und die beiden werden nie vermischt. */
.fehler {
  display: flex; align-items: flex-start; gap: var(--a2);
  padding: var(--a3) var(--a4);
  background: var(--kritisch-flaeche);
  border: 1px solid var(--kritisch-rand);
  border-radius: var(--r1);
  color: var(--kritisch); font-size: var(--t3); font-weight: 650;
}
.fehler::before { content: "\26A0"; flex: none; }

.meldung {
  display: flex; align-items: flex-start; gap: var(--a2);
  padding: var(--a3) var(--a4);
  background: var(--gut-flaeche);
  border: 1px solid var(--gut-rand);
  border-radius: var(--r1);
  color: var(--gut); font-size: var(--t3);
}

/* --------------------------------------------------------------------------
   18  Eigenständige Seiten ohne Hülle
   Anmeldung, Platzhalter/404 und die Umgebungsprüfung bringen keine
   Navigation mit — sie sind vor der Anmeldung oder vor der Einrichtung da.
   -------------------------------------------------------------------------- */

.anmeldung, .blatt, .setup {
  width: 100%; margin: 0 auto;
  padding: var(--a7) var(--a5);
  background: var(--grund);
}
.anmeldung { max-width: 380px; display: grid; gap: var(--a3); }
.anmeldung form { display: grid; gap: var(--a2); margin-top: var(--a3); }
.blatt { max-width: 640px; display: grid; gap: var(--a3); justify-items: start; }
.setup { max-width: var(--inhalt-max); display: grid; gap: var(--a4); }

.pruefungen {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: var(--t2);
  background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: var(--r2);
}
.pruefungen :where(th, td) {
  text-align: left; padding: var(--a2) var(--a3);
  border-bottom: 1px solid var(--linie); vertical-align: top;
}
.pruefungen tbody tr:last-child :where(th, td) { border-bottom: 0; }
.pruefungen thead th {
  background: var(--flaeche-2); font-size: var(--t1); font-weight: 650;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-leise);
}
/* Haken und Kreuz sind Zeichen, nicht Farben: die Zeile bleibt auch ohne
   Farbwahrnehmung lesbar. */
.pruefungen .zeichen { width: 1.75rem; text-align: center; font-weight: 700; }
.pruefungen tr.ja .zeichen   { color: var(--gut); }
.pruefungen tr.nein .zeichen { color: var(--kritisch); }
.pruefungen .rat { margin-top: var(--a1); font-size: var(--t1); color: var(--text-leise); }

/* Das <p class="ampel gruen"> der Einrichtungsseite — ausdrücklich etwas
   anderes als details.ampel oben. */
p.ampel {
  padding: var(--a3) var(--a4); border-radius: var(--r1);
  border: 1px solid var(--linie); font-weight: 650;
}
p.ampel.gruen { color: var(--gut); background: var(--gut-flaeche); border-color: var(--gut-rand); }
p.ampel.rot   { color: var(--kritisch); background: var(--kritisch-flaeche); border-color: var(--kritisch-rand); }

/* Projektstand: /projekt und der geheime Statuslink /status/<token>.
   Ein Baustein (teile/projektstand.php) für beide Seiten.

   Gelesen wird er von Praxisinhabern, Trainern und Pflegediensten, die wissen
   wollen: Wo steht mein Projekt, was muss ich tun, was ist schon passiert.
   Darum: ein großer Kopf mit dem Namen, ein Phasenband aus Abschnitten (fertig
   grün, aktuell im Akzent mit einer langsam laufenden Schraffur, offen leise),
   drei Zahlen als Sprungmarken, dann die Blöcke in der Reihenfolge der Frage.
   Das Erledigte ist eine Zeitleiste nach Monaten in <details>: ältere Monate
   klappen zu, ganz ohne Skript.

   Alle Farben kommen aus den Marken oben, damit der dunkle Modus von selbst
   mitgeht. Kein style-Attribut, keine Breite aus der Vorlage. */
.statuskoerper {
  background:
    radial-gradient(1100px 380px at 50% -120px, var(--akzent-flaeche), transparent 72%),
    var(--grund);
  background-repeat: no-repeat;
}
.statusseite {
  max-width: 880px; margin: 0 auto;
  padding: var(--a5) var(--a5) var(--a7);
  display: grid; gap: var(--a6);
}
.statusseite-marke {
  display: flex; align-items: center; justify-content: space-between; gap: var(--a3);
  padding-bottom: var(--a4); border-bottom: 1px solid var(--linie);
}
.statusmarke {
  display: inline-flex; align-items: center; gap: var(--a2);
  font-size: var(--t4); font-weight: 700; letter-spacing: -0.01em; color: var(--text);
}
.statusmarke-zeichen { width: 22px; height: 22px; flex: none; fill: var(--akzent); }
.statusseite-art { font-size: var(--t2); color: var(--text-leise); }
.statusseite-fuss {
  display: grid; gap: var(--a3);
  padding-top: var(--a5); border-top: 1px solid var(--linie);
  font-size: var(--t2); color: var(--text-leise);
}
.statusseite-fuss .rechtslinks { margin-left: 0; }
.mittelpunkt { color: var(--text-leise); }

.projektstand {
  --stand-schatten: 0 1px 2px rgb(16 20 30 / 0.05), 0 10px 28px -16px rgb(16 20 30 / 0.22);
  display: grid; gap: var(--a5); max-width: 880px;
}

/* Der Kopf: der Name groß, darunter Projekt und Stand, dann die Notiz als
   Führungssatz in voller Textfarbe — sie ist das Erste, was der Kunde liest. */
.projektkopf { display: grid; gap: var(--a3); padding-top: var(--a2); }
.projektkopf-kunde {
  font-size: clamp(1.875rem, 1.1rem + 2.6vw, 2.625rem);
  font-weight: 700; line-height: 1.12; letter-spacing: -0.025em;
  text-wrap: balance;
}
.projektkopf-titel { font-size: var(--t5); line-height: 1.25; text-wrap: balance; }
.projektkopf-zeile { font-size: var(--t3); color: var(--text-leise); }
.projektkopf-projekt { font-weight: 650; color: var(--text); }
.projektkopf-stand { white-space: nowrap; }
.projektkopf-notiz {
  font-size: 1.0625rem; line-height: 1.6; max-width: 64ch;
  color: var(--text); text-wrap: pretty;
}

/* Die Flächen der Blöcke: eine Haarlinie und ein weicher, versetzter Schatten. */
.phasen,
.aufgabenblock {
  background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: var(--r2);
  box-shadow: var(--stand-schatten);
  padding: var(--a5) var(--a6);
}

.phasen { display: grid; gap: var(--a5); }
.phasen-kopf {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--a1) var(--a4);
}
.phasen-titel { font-size: 1.25rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.phasen-titel-vor { font-weight: 500; color: var(--text-leise); }
.fortschritt { font-size: var(--t3); font-weight: 650; color: var(--gut); }

/* Das Band: je Phase ein Abschnitt, darunter Marke, Name und Zustand. */
.phasenband {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  column-gap: 6px;
}
.phase {
  display: grid; grid-template-columns: 22px minmax(0, 1fr);
  column-gap: var(--a2); row-gap: 2px; align-items: center; align-content: start;
}
.phase-balken {
  grid-column: 1 / -1; height: 8px; margin-bottom: var(--a3);
  border-radius: 4px; background: var(--flaeche-3);
}
.phase-fertig .phase-balken { background: var(--gut); }
.phase-aktiv .phase-balken {
  background-color: var(--akzent);
  background-image: repeating-linear-gradient(-45deg,
    rgb(255 255 255 / 0.28) 0 6px, transparent 6px 12px);
  background-size: 34px 34px;
  animation: phase-laeuft 2.4s linear infinite;
}
@keyframes phase-laeuft { to { background-position: 34px 0; } }
.phase-marke {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: var(--t1); font-weight: 700;
  background: var(--flaeche); color: var(--text-leise);
  border: 1.5px solid var(--linie-stark);
}
.phase-marke .ic { width: 13px; height: 13px; stroke-width: 2.5; }
.phase-name {
  font-size: var(--t3); font-weight: 650; line-height: 1.3; color: var(--text);
  hyphens: auto; overflow-wrap: break-word; min-width: 0;
}
.phase-zustand { grid-column: 2; font-size: var(--t1); color: var(--text-leise); }
.phase-fertig .phase-marke { background: var(--gut); border-color: var(--gut); color: var(--flaeche); }
.phase-aktiv .phase-marke {
  background: var(--akzent); border-color: var(--akzent); color: var(--flaeche);
  box-shadow: 0 0 0 3px var(--akzent-flaeche);
}
.phase-aktiv .phase-zustand { font-weight: 650; color: var(--akzent); }
.phase-offen .phase-name { color: var(--text-leise); font-weight: 500; }

/* Drei Zahlen, jede eine Sprungmarke zu ihrem Block. */
.standzahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a3); }
.standzahl {
  display: grid; gap: 2px; align-content: start;
  padding: var(--a4) var(--a5);
  background: var(--flaeche); color: var(--text);
  border: 1px solid var(--linie); border-radius: var(--r2);
  transition: border-color 160ms ease-out, transform 160ms ease-out;
}
.standzahl:hover { text-decoration: none; border-color: var(--linie-stark); transform: translateY(-1px); }
.standzahl-wert { font-size: 1.875rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.standzahl-wort {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t3); color: var(--text-leise); line-height: 1.35;
}
.standzahl-wort::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.standzahl-ihnen .standzahl-wort::before    { background: var(--hinweis); }
.standzahl-uns .standzahl-wort::before      { background: var(--akzent); }
.standzahl-erledigt .standzahl-wort::before { background: var(--gut); }

/* Die Blöcke. */
.aufgabenblock { display: grid; gap: var(--a4); scroll-margin-top: var(--a4); }
.aufgabenblock-kopf { display: grid; gap: var(--a1); }
.aufgabenblock h2 { font-size: 1.25rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.aufgabenblock-satz { font-size: var(--t3); color: var(--text-leise); }
.aufgaben-leer { font-size: var(--t3); color: var(--text-leise); }

/* Was wir vom Kunden brauchen, liegt auf warmem Grund — sichtbar, aber nicht
   rot: Ein offener Punkt ist eine Bitte, kein Fehler. */
.aufgabenblock-ihnen { background: var(--hinweis-flaeche); border-color: var(--hinweis-rand); }

.aufgabenliste { list-style: none; margin: 0; padding: 0; display: grid; }
.aufgabe {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: var(--a3);
  padding: var(--a4) 0; border-top: 1px solid var(--linie);
}
.aufgabe:first-child { padding-top: var(--a1); border-top: none; }
.aufgabe:last-child { padding-bottom: 0; }
.aufgabenblock-ihnen .aufgabe { border-top-color: var(--hinweis-rand); }
.aufgabe-marke { display: grid; place-items: center; height: 1.5rem; color: var(--hinweis); }
.aufgabe-marke .ic { width: 18px; height: 18px; stroke-width: 1.75; }
/* In Arbeit: ein Punkt, um den ein Ring langsam ausatmet. */
.aufgabe-marke-arbeit::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: var(--akzent);
  box-shadow: 0 0 0 0 var(--akzent-rand);
  animation: in-arbeit 2.2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes in-arbeit {
  0%   { box-shadow: 0 0 0 0 var(--akzent-rand); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.aufgabe-inhalt { display: grid; gap: var(--a1); min-width: 0; }
.aufgabe-titel { font-size: var(--t4); font-weight: 650; line-height: 1.45; text-wrap: pretty; }
.aufgabe-text { font-size: var(--t3); line-height: 1.6; color: var(--text-leise); max-width: 68ch; text-wrap: pretty; }
.aufgabe-angaben { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--a1); }

/* Etiketten: Frist, Überfällig, wer, Phase. Klein, ruhig, eindeutig. */
.etikett {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--t1); font-weight: 600; line-height: 1.5;
  padding: 1px var(--a2); border-radius: var(--r1);
  background: var(--flaeche-2); color: var(--text-leise);
  border: 1px solid var(--linie);
}
.etikett .ic { width: 12px; height: 12px; stroke-width: 1.75; }
.etikett-frist { background: var(--flaeche); color: var(--text); border-color: var(--linie-stark); }
.etikett-ueberfaellig { background: var(--kritisch-flaeche); color: var(--kritisch); border-color: var(--kritisch-rand); }
.aufgabe.ueberfaellig .etikett-frist { color: var(--kritisch); border-color: var(--kritisch-rand); }
.etikett-kunde { background: var(--hinweis-flaeche); color: var(--hinweis); border-color: var(--hinweis-rand); }
.etikett-agentur { background: var(--akzent-flaeche); color: var(--akzent); border-color: var(--akzent-rand); }
.etikett-phase { background: var(--flaeche); }

/* Abhängigkeiten: „Wartet auf: …" als Sprungmarke zur Vorgängerin, mit Schloss.
   Lange Titel brechen im Etikett um, statt die Zeile auf dem Telefon zu sprengen. */
.aufgabe-wartet { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--a1); }
.etikett-wartet {
  align-items: flex-start; max-width: 100%;
  background: var(--flaeche); color: var(--text); border-color: var(--linie-stark);
  text-decoration: none;
}
.etikett-wartet .ic { flex: none; margin-top: 0.2em; }
.etikett-wartet > span { min-width: 0; overflow-wrap: anywhere; }
.etikett-wartet-vor { color: var(--text-leise); }
.etikett-wartet:hover > span { text-decoration: underline; text-underline-offset: 3px; }
.etikett-wartet:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
/* Was noch wartet, steht im gestrichelten Rahmen: geplant, aber noch nicht angefangen. */
.aufgabenblock-wartet { border-style: dashed; border-color: var(--linie-stark); box-shadow: none; }
.aufgabe-marke-wartet { color: var(--text-leise); }
.aufgabe-marke-wartet .ic { width: 16px; height: 16px; }
.aufgabe-danach {
  margin-top: var(--a2); padding-left: var(--a3);
  border-left: 2px solid var(--linie-stark);
  font-size: var(--t3); line-height: 1.55; color: var(--text-leise);
}
.aufgabe-danach-kopf { font-weight: 650; color: var(--text); }
.aufgabe-danach ul { margin: 2px 0 0; padding-left: 1.1em; }
.aufgabe-danach a { color: var(--akzent); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.standzahlen-vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.standzahl-zuarbeit .standzahl-wort::before { background: transparent; box-shadow: inset 0 0 0 2px var(--hinweis); }

/* Die Zeitleiste des Erledigten. Jeder Monat ein <details>; die allgemeine
   Regel details:not(.ampel) weiter oben (Rahmen, Fläche, Textpfeil) wird hier
   ausdrücklich zurückgenommen — der Monat ist eine Zeile, kein Kasten. */
.projektstand details.monat,
.projektstand details.mehr {
  background: none; border: none; border-radius: 0; margin-top: 0;
}
.projektstand details.monat + details.monat { border-top: 1px solid var(--linie); }
.projektstand .monat-kopf,
.projektstand .mehr-kopf {
  display: flex; align-items: center; gap: var(--a2);
  min-height: 44px; padding: var(--a2) 0; cursor: pointer; list-style: none;
  border-bottom: none;
}
.projektstand .monat-kopf { font-size: var(--t4); font-weight: 700; }
/* Die allgemeine Regel trägt [open] in der Auswahl und wiegt damit schwerer;
   darum hier dieselbe Form plus .projektstand. */
.projektstand details.monat > summary.monat-kopf::before,
.projektstand details.mehr > summary.mehr-kopf::before { content: none; }
.projektstand details.monat[open] > summary.monat-kopf { border-bottom: none; }
.monat-kopf::-webkit-details-marker,
.mehr-kopf::-webkit-details-marker { display: none; }
.monat-kopf::marker, .mehr-kopf::marker { content: ""; }
.monat-kopf:hover .monat-name { color: var(--akzent); }
.monat-pfeil { width: 16px; height: 16px; color: var(--text-leise); transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1); }
.monat[open] > summary .monat-pfeil,
.mehr[open] > summary .monat-pfeil,
.aufgabe-hilfe[open] > summary .monat-pfeil { transform: rotate(90deg); }
/* Der Rest eines langen Monats: eingerückt auf die Inhaltsspalte der Leiste. */
.projektstand .mehr-kopf {
  margin-left: calc(20px + var(--a3));
  font-size: var(--t3); font-weight: 650; color: var(--akzent);
}
.mehr-kopf:hover span { text-decoration: underline; text-underline-offset: 3px; }
.mehr[open] > .mehr-kopf { display: none; }
.mehr > .zeitleiste { padding-top: 0; }
/* Folgt ein Rest, läuft die Linie unter dem fünften Eintrag weiter. */
.monat:has(> .mehr) > .zeitleiste { padding-bottom: 0; }
.monat:has(> .mehr) > .zeitleiste > .zeitpunkt:last-child { padding-bottom: var(--a4); }
.monat:has(> .mehr) > .zeitleiste > .zeitpunkt:last-child::before { display: block; }
.monat-anzahl {
  margin-left: auto; font-size: var(--t2); font-weight: 600; color: var(--text-leise);
  background: var(--flaeche-2); border-radius: var(--r1); padding: 1px var(--a2);
}

.zeitleiste { list-style: none; margin: 0; padding: var(--a1) 0 var(--a4); display: grid; }
.zeitpunkt {
  position: relative;
  display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: var(--a3);
  padding-bottom: var(--a4);
}
.zeitpunkt:last-child { padding-bottom: 0; }
/* Die Linie läuft vom Punkt bis zum nächsten Punkt. */
.zeitpunkt::before {
  content: ""; position: absolute;
  left: 9px; top: 22px; bottom: 0; width: 2px;
  background: var(--linie);
}
.zeitpunkt:last-child::before { display: none; }
.zeitpunkt-punkt {
  position: relative; z-index: 1;
  width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gut-flaeche); color: var(--gut); border: 1px solid var(--gut-rand);
}
.zeitpunkt-punkt .ic { width: 12px; height: 12px; stroke-width: 2.5; }
.zeitpunkt-inhalt { display: grid; gap: 2px; min-width: 0; }
.zeitpunkt-inhalt .aufgabe-titel { font-size: 0.9375rem; font-weight: 600; }

/* Zeitleiste, Feinheiten: Der Zeitraum steht leiser hinter dem Namen der Gruppe,
   und die Kopfzeile darf auf dem Telefon umbrechen, statt zu überlaufen. Nur
   „Diese/Letzte Woche" ist leicht betont; Kalenderwoche, Monat und „ohne Datum"
   brauchen keine eigene Regel. */
.projektstand .monat-kopf { flex-wrap: wrap; }
.monat-name { flex: 1 1 10ch; min-width: 0; overflow-wrap: anywhere; }
.monat-zeitraum { font-size: var(--t3); font-weight: 500; color: var(--text-leise); }
.gruppe-woche > .monat-kopf .monat-anzahl {
  background: var(--akzent-flaeche); color: var(--akzent);
}

/* „Warum wir das brauchen / So geht's": ein leiser Aufklapper unter der
   Aufgabe, ohne Kasten. Die allgemeine Regel details:not(.ampel) (Rahmen,
   Textpfeil) wird zurückgenommen; der Pfeil ist das SVG .monat-pfeil. */
.projektstand details.aufgabe-hilfe {
  background: none; border: none; border-radius: 0; margin-top: var(--a1);
}
.projektstand .aufgabe-hilfe-kopf {
  display: flex; align-items: center; gap: var(--a2);
  min-height: 44px; padding: var(--a2) 0; cursor: pointer; list-style: none;
  border-bottom: none;
  font-size: var(--t3); font-weight: 650; color: var(--akzent);
}
.projektstand details.aufgabe-hilfe > summary.aufgabe-hilfe-kopf::before { content: none; }
.projektstand details.aufgabe-hilfe[open] > summary.aufgabe-hilfe-kopf { border-bottom: none; }
.aufgabe-hilfe-kopf::-webkit-details-marker { display: none; }
.aufgabe-hilfe-kopf::marker { content: ""; }
.aufgabe-hilfe-kopf:hover span { text-decoration: underline; text-underline-offset: 3px; }
.aufgabe-hilfe-kopf:focus-visible,
.projektstand details.aktion > summary:focus-visible,
.monat-kopf:focus-visible, .mehr-kopf:focus-visible {
  outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: var(--r1);
}
.aufgabe-hilfe-inhalt {
  display: grid; gap: var(--a3); min-width: 0;
  padding: var(--a1) 0 var(--a2) var(--a4);
  border-left: 2px solid var(--linie-stark);
}
.aufgabe-warum { font-size: var(--t3); line-height: 1.6; max-width: 68ch; text-wrap: pretty; }
.aufgabe-schritte {
  list-style: decimal; margin: 0; padding-left: 1.6em; display: grid; gap: var(--a2);
  font-size: var(--t3); line-height: 1.6; max-width: 68ch;
}
.aufgabe-schritte li { padding-left: var(--a1); overflow-wrap: anywhere; }
.aufgabe-schritte li::marker { font-weight: 700; color: var(--akzent); }
.aufgabe-link { font-size: var(--t3); }
.aufgabe-link a { color: var(--akzent); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }

/* Statusseite: der eine deutliche Knopf je Aufgabe und die Hinweiszeile. */
.aufgabe-handeln { margin-top: var(--a2); }
.aufgabe-handeln .knopf { min-height: 44px; padding: var(--a2) var(--a5); font-size: var(--t4); }
.aufgabenblock-hinweis { font-size: var(--t3); line-height: 1.6; color: var(--text-leise); max-width: 68ch; }
.aufgabenblock-hinweis a { color: var(--akzent); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }

/* Sprung von der Statusseite (#aufgabe-<schlüssel>): die Aufgabe wird kurz
   erkennbar, ohne Bewegung. */
.aufgabenliste .aufgabe[id] { scroll-margin-top: calc(var(--kopf-hoehe) + var(--a5)); }
.aufgabenliste .aufgabe:target {
  background: var(--akzent-flaeche); border-radius: var(--r2);
  box-shadow: 0 0 0 var(--a3) var(--akzent-flaeche), 0 0 0 calc(var(--a3) + 1px) var(--akzent-rand);
}

/* Portal: die drei Formulare je offener Aufgabe. Die Knöpfe stehen in einer
   Reihe; ein geöffnetes Formular nimmt die ganze Breite und die Reihe bricht
   darunter um. Ohne Skript. */
.aufgabe-aktionen { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--a2); margin-top: var(--a2); }
.projektstand details.aktion {
  flex: 0 1 auto; min-width: 0; margin-top: 0;
  background: none; border: none; border-radius: 0;
}
.projektstand details.aktion[open] { flex-basis: 100%; }
.projektstand details.aktion > summary.knopf {
  display: inline-flex; width: auto; min-height: 44px; padding: var(--a2) var(--a4);
  border: 1px solid var(--linie-stark); border-radius: var(--r1);
  list-style: none; font-size: var(--t3);
}
.projektstand details.aktion > summary.knopf::before { content: none; }
.projektstand details.aktion > summary.knopf:not(.haupt) { background: var(--flaeche); color: var(--text); font-weight: 650; }
.projektstand details.aktion > summary.knopf.haupt { background: var(--akzent); border-color: var(--akzent); }
.projektstand details.aktion[open] > summary.knopf { border-bottom: 1px solid var(--linie-stark); }
.projektstand details.aktion[open] > summary.knopf:not(.haupt) {
  background: var(--akzent-flaeche); border-color: var(--akzent); color: var(--akzent);
}
.projektstand details.aktion[open] > summary.knopf.haupt { box-shadow: 0 0 0 3px var(--akzent-rand); }
.aktion > summary.knopf::-webkit-details-marker { display: none; }
.aktion > summary.knopf::marker { content: ""; }
.aktion-form {
  display: grid; gap: var(--a3); margin-top: var(--a2);
  padding: var(--a4);
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r2);
}
.aktion-form label { margin-bottom: 0; }
.aktion-form textarea { min-height: 88px; resize: vertical; }
.aktion-form input[type="file"] { width: 100%; min-height: 44px; padding: var(--a2) 0; }
.aktion-form .knopf { justify-self: start; min-height: 44px; }
.aktion-hinweis { font-size: var(--t2); line-height: 1.5; color: var(--text-leise); }
/* Der Hinweis auf Patientendaten: auffällig, aber eine Bitte und kein Alarm. */
.aktion-warnung {
  padding: var(--a2) var(--a3);
  background: var(--hinweis-flaeche); border: 1px solid var(--hinweis-rand);
  border-left: 3px solid var(--hinweis); border-radius: var(--r1);
  color: var(--hinweis); font-weight: 650;
}
.aufgabe-inhalt > .meldung,
.aufgabe-inhalt > .fehler { margin-top: var(--a2); }

/* Was der Kunde zu dieser Aufgabe schon hinterlassen hat. */
.eigene-eingaben {
  display: grid; gap: var(--a2); margin-top: var(--a2);
  padding: var(--a3) var(--a4);
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r2);
}
.eigene-eingaben-titel { font-size: var(--t2); font-weight: 650; color: var(--text-leise); }
.eigene-eingaben ul { list-style: none; margin: 0; padding: 0; display: grid; }
.eigene-eingaben li {
  padding: var(--a2) 0; border-top: 1px solid var(--linie);
  font-size: var(--t3); line-height: 1.5; overflow-wrap: anywhere;
}
.eigene-eingaben li:first-child { border-top: none; padding-top: 0; }
.eigene-eingaben li:last-child { padding-bottom: 0; }
.eigene-art { font-weight: 700; }
.eigene-wann, .eigene-groesse { font-size: var(--t2); color: var(--text-leise); }
.eigene-text { display: block; margin-top: 2px; white-space: pre-line; }

/* Admin, „Eingänge aus dem Kundenbereich": neue Zeilen hervorgehoben, die
   Knöpfe klein und nebeneinander. */
.eingaenge .leise { color: var(--text-leise); }
.eingaenge tr.eingang-neu > td { background: var(--akzent-flaeche); }
.eingaenge tr.eingang-neu > td:first-child { box-shadow: inset 3px 0 0 var(--akzent); }
.eingang-text { display: inline-block; max-width: 60ch; margin-top: 2px; overflow-wrap: anywhere; }
.eingang-aktionen { vertical-align: top; }
form.eingang-form { display: inline-flex; margin: 0 var(--a2) var(--a1) 0; }
.eingang-aktionen .knopf { padding: 2px var(--a2); font-size: var(--t2); }
.knopf.gefahr { color: var(--kritisch); }
.knopf.gefahr:hover { background: var(--kritisch-flaeche); color: var(--kritisch); }

@media (max-width: 720px) {
  .statusseite { padding: var(--a4) var(--a4) var(--a6); gap: var(--a5); }
  .projektstand { gap: var(--a4); }
  .phasen, .aufgabenblock { padding: var(--a4); }

  /* Senkrecht: eine Zeile je Phase, die Abschnitte werden zur Leiste links. */
  .phasenband { grid-auto-flow: row; grid-auto-columns: auto; row-gap: 0; }
  .phase {
    position: relative;
    grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: var(--a3);
    padding-bottom: var(--a3);
  }
  .phase:last-child { padding-bottom: 0; }
  .phase-balken {
    position: absolute; left: 10px; top: 24px; bottom: 0; width: 2px; height: auto;
    margin: 0; border-radius: 1px; background: var(--linie-stark);
  }
  .phase-fertig .phase-balken { background: var(--gut); }
  .phase-aktiv .phase-balken { background: var(--linie-stark); animation: none; }
  .phase:last-child .phase-balken { display: none; }
  .phase-zustand { grid-column: 3; grid-row: 1; justify-self: end; }

  .standzahlen { gap: var(--a2); }
  .standzahlen-vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .standzahl { padding: var(--a3); }
  .standzahl-wert { font-size: 1.5rem; }
  .standzahl-wort { font-size: var(--t2); align-items: baseline; }

  .zeitpunkt { grid-template-columns: 20px minmax(0, 1fr); column-gap: var(--a2); }
  .projektstand .mehr-kopf { margin-left: calc(20px + var(--a2)); }

  /* Auf dem Telefon stehen Knöpfe und Formulare untereinander, voll breit. */
  .aufgabe-handeln .knopf { display: flex; width: 100%; }
  .projektstand details.aktion { flex-basis: 100%; }
  .projektstand details.aktion > summary.knopf { display: flex; width: 100%; }
  .aktion-form .knopf { justify-self: stretch; }
  .aufgabe-hilfe-inhalt { padding-left: var(--a3); }
}

/* --------------------------------------------------------------------------
   19  Enge Fenster

   Ab 900px wird die Seitenleiste zu einem klebenden waagerechten Band mit
   44px hohen Zielen. Eine ausgeklappte lange Linkliste über dem Inhalt wäre
   auf einem Telefon eine Seite für sich.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); }

  .seitenleiste {
    position: static; height: auto; overflow: visible;
    border-right: 0; border-bottom: 1px solid var(--linie);
    padding: 0;
  }
  .marke { margin: 0; padding: 0 var(--a4); }

  .seitenleiste nav {
    position: sticky; top: 0; z-index: 25;
    display: flex; align-items: stretch; gap: var(--a3);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: 0 var(--a4);
    background: var(--flaeche);
    border-bottom: 1px solid var(--linie);
  }
  .navgruppe { display: flex; align-items: center; gap: var(--a1); flex: none; }
  .navgruppe + .navgruppe {
    margin-top: 0; padding-left: var(--a3); border-left: 1px solid var(--linie);
  }
  .navgruppe > h2 { display: none; }
  .navgruppe a {
    min-height: 44px; padding: 0 var(--a3); border-radius: 0; white-space: nowrap;
  }
  .navgruppe a.hier,
  .navgruppe a[aria-current="page"] {
    background: transparent; box-shadow: inset 0 -2px 0 var(--akzent); border-radius: 0;
  }

  .kopfleiste { position: static; padding: var(--a2) var(--a4); }
  .inhalt { padding: var(--a4) var(--a4) var(--a6); }
  .fussleiste { padding: var(--a4); }
  /* Ohne klebende Kopfzeile darf auch der Tabellenkopf nicht mehr kleben:
     er hätte sonst keinen Bezugspunkt. */
  .tabelle thead th { position: static; }

  /* Und weil der Kopf hier ohnehin nicht mehr klebt, darf der Behälter jetzt
     rollen: Genau das ist die Stelle, an der eine breite Tabelle sonst den
     ganzen Körper aus dem Bild schöbe. Oberhalb von 900px bleibt .tabelle
     ohne overflow — dort klebt der Tabellenkopf, und ein Rollbehälter bräche
     das Kleben. Es rollt also der Behälter, nie die Seite. */
  .tabelle { overflow-x: auto; }
}

@media (max-width: 720px) {
  /* Hier standen die Stufen 11/12/13 eine Nummer größer, weil 11px sich in
     einer Praxis nicht liest. Der Grund gilt an jedem Bildschirm und nicht
     nur am Telefon — die Leiter oben steht deshalb selbst auf 12/13/14, und
     diese Ausnahme wäre nur noch eine Wiederholung derselben drei Werte. */

  /* Wichtige Spalten bleiben, unwichtige fallen weg (.fortlassbar), der
     Behälter rollt waagerecht (siehe oben, ab 900px). Jede Zeile in eine
     Karte zu verwandeln bräche die Seitentabelle auf über 10000px Höhe auf. */
  .tabelle table { min-width: 640px; }
  .tabelle :where(th, td):first-child {
    position: sticky; left: 0; z-index: 3;
    background: var(--flaeche); border-right: 1px solid var(--linie);
  }
  .tabelle thead th:first-child { background: var(--flaeche-2); z-index: 6; }
  .tabelle tbody tr:hover > :where(th, td):first-child { background: var(--flaeche-3); }
  .fortlassbar { display: none; }

  .wisch-hinweis {
    display: block; font-size: var(--t1); color: var(--text-leise); margin-bottom: var(--a2);
  }

  .karten { grid-template-columns: minmax(0, 1fr); }
  .verlauf { grid-template-columns: minmax(0, 1fr); }
  .kachelwand { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .titelzeile .aktionen { margin-left: 0; width: 100%; }
  .knopf, button { min-height: 40px; }
  .anmeldung, .blatt, .setup { padding: var(--a5) var(--a4); }
}

/* 390px muss ohne Querscrollen gehen — das ist ein gewöhnliches Telefon. */
@media (max-width: 420px) {
  .kopfleiste {
    flex-wrap: wrap; align-items: flex-start;
    padding: var(--a2) var(--a4); gap: var(--a1) var(--a2);
  }
  .kopfleiste .trenner { display: none; }
  .kopfleiste .stand { flex-basis: 100%; }
  .zahlen { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .leerzustand { padding: var(--a4); }
  .leerzustand .wege { width: 100%; }
  .antwortkarte { padding: var(--a4); }
  :root { --t6: 2rem; }

  /* Fünf Ebenen Einrückung kosten auf einem Telefon ein Drittel der
     Fensterbreite, und der Ast bricht dann in jeder Zeile um. Die Linie
     bleibt — die Ebenen sind weiter zu sehen —, nur der Abstand wird
     schmaler. */
  .baum ul { padding-left: var(--a2); }
  .baum ul ul { margin-left: var(--a1); }
}

/* --------------------------------------------------------------------------
   20  Papier

   Ein Bericht verlässt dieses Portal auch auf Papier: in die Akte, an den
   Steuerberater, auf den Tisch der Besprechung. Erzeugt wird er dabei nicht
   von uns — One.com gibt uns kein Node und keine Erweiterung, und eine
   PDF-Bibliothek in PHP wäre eine zweite Gestaltung desselben Berichts,
   also eine zweite Stelle, an der er anders aussieht. Es druckt der
   Browser; hier steht nur, was auf das Blatt gehört.

   Und deshalb ist dieser Block kurz: keine eigene Palette, keine eigenen
   Maße. Er dreht die vorhandenen Marken auf Weiß, nimmt weg, was man auf
   Papier nicht anklicken kann, und lässt alles andere erben. Was hier
   NICHT steht, sieht gedruckt aus wie am Schirm — das ist Absicht: Jeder
   der neunzehn Abschnitte darüber gilt weiter, auch der, den erst der
   nächste Umbau schreibt.
   -------------------------------------------------------------------------- */

@media print {
  /* Ein 15-mm-Rand ist noch keine Meinung, sondern die Stelle, an der jeder
     Bürodrucker ohnehin aufhört. Ohne die Angabe setzt jeder Browser seinen
     eigenen, und derselbe Bericht bricht auf zwei Rechnern anders um. */
  @page { margin: 15mm; }

  /* Die Marken auf Weiß. Eine graue Fläche wird im Laserdruck zu einem
     Raster, das den Text DARÜBER schlechter lesbar macht — das ist der
     Grund, nicht die Tinte. Die leise Textfarbe geht von 6,1:1 am Schirm
     auf reines Dunkelgrau: 12px Hellgrau auf Papier liest niemand, und
     die Herkunftszeilen unten sind genau das. Der Akzent wird schwarz,
     weil ein blaues Wort ohne Klickbarkeit nur noch ein blaues Wort ist.
     Die Zustandsfarben bleiben (rot, gelb, grün, blau sind die Aussage),
     nur ihre Flächen fallen weg. */
  :root {
    --grund:       #ffffff;
    --flaeche:     #ffffff;
    --flaeche-2:   #ffffff;
    --flaeche-3:   #ffffff;
    --linie:       #9aa0a6;
    --linie-stark: #5f6368;

    --text:       #000000;
    --text-leise: #333333;

    --akzent:         #000000;
    --akzent-flaeche: #ffffff;
    --akzent-rand:    #9aa0a6;

    --kritisch-flaeche: #ffffff;
    --hinweis-flaeche:  #ffffff;
    --gut-flaeche:      #ffffff;
    --offen-flaeche:    #ffffff;

    /* Sonst zieht der dunkle Modus aus Abschnitt 2 auch in den Druck ein,
       und wer sein System dunkel gestellt hat, druckt ein schwarzes Blatt. */
    color-scheme: light;
  }

  html, body { background: #ffffff; }

  /* Weg, weil man es auf Papier nicht anklicken kann: der Sprunglink, die
     Seitenleiste mit ihren Navigationsgruppen, die Brotkrume (ihr letzter
     Eintrag ist der Ort, und der steht als H1 noch einmal darunter), der
     Abmeldeknopf samt seiner Ecke der Kopfleiste, die Aktionen neben dem
     Seitentitel und der Wischhinweis über den Tabellen. .aktionen trägt
     außerdem der Anfrageknopf der Ausblickskarte — und seine Erklärung
     („Öffnet Ihr E-Mail-Programm …“), die ohne den Knopf auf dem Blatt
     eine verwaiste Zeile wäre (teile/ausblick.php). */
  .sprung,
  .seitenleiste,
  .navgruppe,
  .krume,
  .kopfleiste .rechts,
  .abmelden,
  .aktionen,
  .wisch-hinweis {
    display: none;
  }

  /* Das Raster war eine Spalte für die Navigation und eine für den Inhalt.
     Ohne die erste ist es keins mehr. */
  .app,
  .hauptspalte { display: block; }

  /* Die Kopfleiste bleibt — sie trägt den Kundennamen und den Stand der
     Erhebung —, aber nicht als Leiste: Ein Blatt rollt nicht, klebend wäre
     sie hier nur ein Kasten mit Fläche. */
  .kopfleiste {
    position: static;
    min-height: 0;
    padding: 0 0 var(--a2);
    background: #ffffff;
  }

  .inhalt { max-width: none; padding: var(--a4) 0 0; }

  /* Die Fußleiste verliert ihren Rahmen, nicht ihren Inhalt: Ein
     display:none hier nähme die Herkunftszeile mit, und die ist der Grund,
     warum der Fuß im Druck überhaupt bleibt. */
  .fussleiste { padding: var(--a4) 0 0; }

  /* Die drei Zeilen, die ein gedrucktes Blatt datierbar machen: .quelle
     unter jeder Kennzahl ("Gefunden mit …, erhoben am …"), .herkunft im Fuß
     ("Stand: …, erhoben mit unserem Prüfprogramm … Fassung …") und .stand
     in der Kopfleiste. Sie stehen hier ausdrücklich und in voller Farbe,
     damit sie kein späteres display:none weiter oben mitnimmt: Ein Ausdruck
     ohne Stichtag ist eine Zahl ohne Zeitpunkt, und genau die wird in drei
     Monaten in einer Besprechung als heutiger Stand zitiert. */
  .quelle,
  .herkunft,
  .kopfleiste .stand {
    display: block;
    color: var(--text);
    white-space: normal;
  }

  /* Ein Rechtslink ist auf Papier ein Verweis ins Nichts, solange die
     Adresse nicht dabeisteht. § 5 DDG will die Angabe erreichbar haben;
     gedruckt heißt erreichbar: abtippbar. Nur hier und nicht an jedem
     Link — im Fließtext eines Befundes stehen die Adressen schon im Satz,
     und jede zweite in Klammern dahinter machte den Absatz unlesbar. */
  .rechtslinks { margin-left: 0; }
  .rechtslinks a { color: var(--text); text-decoration: none; }
  .rechtslinks a::after { content: " (" attr(href) ")"; }

  /* Fläche raus, Haarlinie rein — und vor allem: nicht mitten durch
     umbrechen. Eine Karte, deren Zahl auf Blatt 1 und deren Satz auf
     Blatt 2 steht, hat ihre Aussage verloren; die Zahl wirkt dann
     unkommentiert. page-break-inside steht daneben, weil die alte
     Eigenschaft in manchen Druckwegen noch die einzige ist, die zählt. */
  .karte,
  .blatt,
  .antwortkarte,
  .leerzustand,
  .zahl {
    background: #ffffff;
    box-shadow: none;
    border: 1px solid var(--linie);
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Eine Überschrift als letzte Zeile eines Blattes ist eine Überschrift
     ohne Inhalt. */
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }

  /* Am Schirm klebt der Tabellenkopf und der Behälter rollt. Gedruckt gibt
     es kein Kleben und kein Rollen — ein Rollbehälter schnitte hier genau
     die Spalten ab, wegen derer die Tabelle gedruckt wird. Dafür wiederholt
     der Kopf sich auf jedem Blatt. */
  .tabelle { overflow: visible; }
  .tabelle thead th { position: static; background: #ffffff; }
  .tabelle table { min-width: 0; }
  thead { display: table-header-group; }
  tr { break-inside: avoid; page-break-inside: avoid; }

  /* Und die eine Spalte, die am Telefon wegfällt, kommt auf dem Blatt
     zurück: Papier ist breiter als 720px. */
  .fortlassbar { display: table-cell; }

  /* Der Projektstand auf Papier: weißer Grund, keine Schatten, keine
     Sprungmarken-Bewegung, und das Phasenband behält seine Farben, sonst
     wäre fertig von offen nicht zu unterscheiden. Zugeklappte Monate gehen
     mit aufs Blatt — ein Ausdruck, der die Hälfte des Erledigten verschweigt,
     erzählt einen anderen Stand. */
  .statuskoerper { background: #ffffff; }
  .statusseite { max-width: none; padding: 0; gap: var(--a4); }
  .phasen,
  .aufgabenblock,
  .standzahl {
    background: #ffffff;
    box-shadow: none;
    border: 1px solid var(--linie);
  }
  .phasenband,
  .etikett,
  .zeitpunkt-punkt,
  .phase-marke { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .phase-aktiv .phase-balken,
  .aufgabe-marke-arbeit::before { animation: none; }
  details::details-content,
  .monat::details-content,
  .mehr::details-content,
  .aufgabe-hilfe::details-content { content-visibility: visible; display: block; }
  /* Ein Browser ohne ::details-content verwirft die Regel darüber ganz — ein
     unbekannter Selektor nimmt die ganze Liste mit. Für ihn gibt es die
     Druckansicht (?druck=1, Link in der Kopfleiste): Dort zeichnet index.php
     jedes <details> mit open, und das versteht jeder Browser. Link und Hinweis
     stehen in .kopfleiste .rechts und fallen schon mit ihr weg; hier noch
     einmal, damit ein Umzug in der Kopfleiste sie nicht aufs Blatt holt. */
  .druckansicht,
  .druckhinweis { display: none; }
  .monat-pfeil,
  .projektstand .mehr-kopf { display: none; }
  /* Die Hilfe druckt mit; was nur am Bildschirm etwas tut, bleibt weg. */
  .aufgabe-aktionen,
  .aufgabe-handeln,
  .aktion-form,
  .eingang-aktionen { display: none; }
  .aufgabenliste .aufgabe:target { background: none; box-shadow: none; }
  .aufgabe,
  .zeitpunkt { break-inside: avoid; page-break-inside: avoid; }
}

/* Die Druckansicht am Schirm (teile/kopf.php): ein Link in der Kopfleiste
   und kein Knopf mit window.print() — das Portal hat kein Skript. Unter
   ?druck=1 zeichnet index.php jedes <details> offen, und der Hinweis sagt,
   wie es von dort aufs Blatt geht. Auf dem Blatt selbst fehlen beide (oben). */
.druckansicht { white-space: nowrap; }
.druckhinweis { margin: 0; max-width: 36ch; font-size: var(--t2); color: var(--text-leise); }

/* --------------------------------------------------------------------------
   30  Kunden-Dashboard (.kd) — Statusseite und /projekt

   teile/projektstand.php. Immer hell, auch im dunklen Modus des Portals: Die
   Komponente definiert die Marken des Portals in ihrem Bereich neu, damit auch
   .meldung, .fehler und Formularfelder darin hell bleiben. Eine Schriftfamilie
   (die des Portals), Statusfarben nie allein: immer mit Symbol und Text.
   Mithilfe = coral, In Arbeit = blau, Erledigt = grün, Geplant = grau.
   Die Kundenfarbe (akzent) kommt nur als SVG-fill aus der Vorlage.
   -------------------------------------------------------------------------- */
body.kd-seite {
  color-scheme: light;
  --grund: #f7f8fa; --flaeche: #ffffff; --flaeche-2: #f2f4f7; --flaeche-3: #eaecf0;
  --linie: #eaecf0; --linie-stark: #d0d5dd; --text: #111827; --text-leise: #667085;
  --akzent: #175cd3; --akzent-flaeche: #eff4ff; --akzent-rand: #b2ccff;
  background: #f7f8fa; color: #111827;
}
body.kd-seite .statusseite { max-width: 1140px; padding: 20px 16px 48px; gap: 32px; }
body.kd-seite .statusmarke { font-size: var(--t3); gap: 6px; }
body.kd-seite .statusmarke-zeichen { width: 18px; height: 18px; }
body.kd-seite .statusmarke .statusseite-art { font-weight: 400; margin-left: 6px; }

.kd {
  color-scheme: light;
  --kd-grund: #f7f8fa; --kd-karte: #ffffff; --kd-text: #111827; --kd-leise: #667085; --kd-rand: #eaecf0;
  --kd-gruen: #067647; --kd-gruen-flaeche: #ecfdf3; --kd-gruen-rand: #abefc6;
  --kd-blau: #175cd3; --kd-blau-flaeche: #eff4ff; --kd-blau-rand: #b2ccff;
  --kd-coral: #b93815; --kd-coral-knopf: #c4320a; --kd-coral-flaeche: #fff4ed; --kd-coral-rand: #f9dbaf;
  --kd-grau: #475467; --kd-grau-flaeche: #f2f4f7; --kd-grau-rand: #d0d5dd;
  --kd-schatten: 0 1px 2px rgb(16 24 40 / 0.04), 0 4px 16px -6px rgb(16 24 40 / 0.08);
  --kd-r: 16px;
  --grund: #f7f8fa; --flaeche: #ffffff; --flaeche-2: #f2f4f7; --flaeche-3: #eaecf0;
  --linie: #eaecf0; --linie-stark: #d0d5dd; --text: #111827; --text-leise: #667085;
  --akzent: #175cd3; --akzent-flaeche: #eff4ff; --akzent-rand: #b2ccff;
  --gut: #067647; --kritisch: #b42318;
  display: grid; gap: 16px; min-width: 0;
  color: var(--kd-text); font-size: 15px; line-height: 1.5;
}
/* Im Portal (dunkel oder hell) steht das Dashboard als helle Fläche. */
.inhalt .kd { background: var(--kd-grund); border-radius: 20px; padding: 16px; }

.kd-ic {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.kd a { color: var(--kd-blau); }
.kd :focus-visible { outline: 3px solid #84adff; outline-offset: 2px; border-radius: 8px; }

/* Kopf: Marke, Name, Projekt, Menü */
.kd-kopf { display: flex; align-items: center; gap: 12px; min-width: 0; }
.kd-marke {
  position: relative; flex: none; width: 48px; height: 48px;
  display: grid; place-items: center; border-radius: 50%;
}
.kd-marke-kreis { position: absolute; inset: 0; width: 48px; height: 48px; }
.kd-marke-text { position: relative; font-weight: 700; font-size: 16px; color: var(--kd-text); letter-spacing: 0.02em; }
.kd-marke-logo { width: auto; max-width: 120px; height: 48px; border-radius: 12px; background: #fff; border: 1px solid var(--kd-rand); padding: 6px 10px; }
.kd-marke-logo { box-sizing: border-box; }
.kd .kd-marke-logo img { width: auto; height: 34px; max-width: 98px; object-fit: contain; }
.kd-kopf-namen { min-width: 0; flex: 1; }
.kd-kopf-kunde { font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.kd-kopf-projekt { font-size: 13px; color: var(--kd-leise); overflow-wrap: anywhere; }

.kd details.kd-menue { position: relative; flex: none; background: none; border: 0; border-radius: 0; }
.kd details.kd-menue > summary.kd-menue-knopf {
  min-height: 44px; width: 44px; padding: 0; justify-content: center;
  border-radius: 12px; border: 1px solid var(--kd-rand); background: var(--kd-karte); color: var(--kd-text);
}
.kd-menue-liste {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 5;
  display: grid; min-width: 200px; padding: 6px;
  background: var(--kd-karte); border: 1px solid var(--kd-rand); border-radius: 14px; box-shadow: var(--kd-schatten);
}
.kd-menue-liste a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--kd-text); font-weight: 550; }
.kd-menue-liste a:hover { background: var(--kd-grau-flaeche); text-decoration: none; }

/* Die Summary-Grundregeln des Portals (Rahmen, Pfeil-Zeichen, Trennlinie)
   gelten im Dashboard nicht; jedes details hier zeichnet sich selbst. */
.kd details:not(.ampel) > summary::before { content: none; display: none; }
.kd details:not(.ampel)[open] > summary { border-bottom: 0; }
.kd details:not(.ampel) + details:not(.ampel) { margin-top: 0; }
.kd details > summary { list-style: none; cursor: pointer; }
.kd details > summary::-webkit-details-marker { display: none; }
.kd-auf { width: 18px; height: 18px; color: var(--kd-leise); transition: transform 160ms ease; }
.kd details[open] > summary .kd-auf { transform: rotate(180deg); }

/* Begrüßung */
.kd-hero { display: grid; gap: 6px; padding: 16px 0 8px; }
.kd-gruss { font-size: 16px; color: var(--kd-leise); }
.kd-hero-zeile { font-size: 28px; font-weight: 750; line-height: 1.15; letter-spacing: -0.025em; text-wrap: balance; }
.kd-hero-satz { font-size: 15px; color: #344054; max-width: 60ch; margin-top: 4px; }
.kd-stand { font-size: 13px; color: var(--kd-leise); margin-top: 4px; }

/* Blöcke */
.kd-block {
  background: var(--kd-karte); border: 1px solid var(--kd-rand); border-radius: var(--kd-r);
  box-shadow: var(--kd-schatten); padding: 18px; min-width: 0;
}
.kd-titel { font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; }
.kd-klein-titel { font-size: 14px; font-weight: 600; color: var(--kd-leise); }

.kd-fortschritt { display: grid; gap: 12px; }
.kd-fortschritt-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.kd-prozent { font-size: 40px; font-weight: 750; line-height: 1; letter-spacing: -0.03em; }
.kd-prozent-zeichen { font-size: 22px; font-weight: 650; color: var(--kd-leise); }
.kd-balken { display: block; width: 100%; height: 10px; border-radius: 999px; overflow: hidden; }
.kd-fortschritt-satz { font-size: 13px; color: var(--kd-leise); }

/* KPI-Karten */
.kd-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kd-kpi {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px;
  align-items: center; min-height: 76px; padding: 14px;
  background: var(--kd-karte); border: 1px solid var(--kd-rand); border-radius: var(--kd-r); box-shadow: var(--kd-schatten);
  color: var(--kd-text);
}
.kd a.kd-kpi { color: var(--kd-text); }
.kd a.kd-kpi:hover { text-decoration: none; border-color: var(--kd-grau-rand); }
.kd-kpi-symbol { grid-row: 1 / 3; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; }
.kd-kpi-zahl { font-size: 24px; font-weight: 750; line-height: 1.1; }
.kd-kpi-wort { font-size: 13px; color: var(--kd-leise); line-height: 1.3; }
.kd-kpi-erledigt .kd-kpi-symbol { background: var(--kd-gruen-flaeche); color: var(--kd-gruen); }
.kd-kpi-arbeit .kd-kpi-symbol { background: var(--kd-blau-flaeche); color: var(--kd-blau); }
.kd-kpi-mithilfe .kd-kpi-symbol { background: var(--kd-coral-flaeche); color: var(--kd-coral); }
.kd-kpi-geplant .kd-kpi-symbol { background: var(--kd-grau-flaeche); color: var(--kd-grau); }

/* Projektverlauf: Phasen als Reise, mobil waagerecht wischbar */
.kd-reise { display: grid; gap: 16px; }
.kd-reise .kd-titel { font-size: 17px; }
.kd-phasen {
  display: flex; gap: 0; overflow-x: auto; padding: 2px 2px 6px; margin: 0 -4px;
  scroll-snap-type: x proximity; scrollbar-width: thin;
}
.kd-phase {
  position: relative; flex: 1 0 96px; display: grid; justify-items: center; gap: 6px;
  padding: 0 4px; text-align: center; scroll-snap-align: start;
}
.kd-phase::before {
  content: ""; position: absolute; top: 13px; right: 50%; width: 100%; height: 2px; background: var(--kd-rand);
}
.kd-phase:first-child::before { display: none; }
.kd-phase-fertig::before, .kd-phase-aktiv::before { background: var(--kd-gruen); }
.kd-phase-marke {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 2px solid var(--kd-grau-rand);
}
.kd-phase-marke .kd-ic { width: 16px; height: 16px; stroke-width: 2.6; }
.kd-phase-fertig .kd-phase-marke { background: var(--kd-gruen); border-color: var(--kd-gruen); color: #fff; }
.kd-phase-aktiv .kd-phase-marke { border: 3px solid var(--kd-blau); box-shadow: 0 0 0 4px var(--kd-blau-flaeche); }
.kd-phase-aktiv .kd-phase-marke::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--kd-blau); }
.kd-phase-name { font-size: 13px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.kd-phase-offen .kd-phase-name { color: var(--kd-leise); font-weight: 500; }
.kd-phase-zustand { font-size: 12px; color: var(--kd-leise); }
.kd-phase-aktiv .kd-phase-zustand { color: var(--kd-blau); font-weight: 600; }
.kd-phase-fertig .kd-phase-zustand { color: var(--kd-gruen); }

/* Aktionskarte: nur wenn der Kunde etwas tun kann */
.kd-aktion {
  display: grid; grid-template-columns: auto 1fr; gap: 12px 14px; align-items: start;
  padding: 18px; border-radius: var(--kd-r);
  background: var(--kd-coral-flaeche); border: 1px solid var(--kd-coral-rand);
}
.kd-aktion-symbol { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; color: var(--kd-coral); }
.kd-aktion-titel { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--kd-text); }
.kd-aktion-text p { font-size: 14px; color: #4d3a32; margin-top: 2px; }
.kd-aktion > .kd-knopf { grid-column: 1 / -1; justify-self: stretch; }

/* Knöpfe */
.kd-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 12px; border: 1px solid transparent;
  font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; cursor: pointer; text-align: center;
}
.kd a.kd-knopf:hover { text-decoration: none; }
.kd .kd-knopf-coral { background: var(--kd-coral-knopf); color: #fff; }
.kd .kd-knopf-coral:hover { background: #a3290a; }
.kd .kd-knopf-dunkel { background: var(--kd-text); color: #fff; }
.kd .kd-knopf-dunkel:hover { background: #283040; }
.kd .kd-knopf-leise { background: #fff; color: var(--kd-text); border-color: var(--kd-grau-rand); }
.kd .kd-knopf-leise:hover { background: var(--kd-grau-flaeche); }
.kd-knopf .kd-ic { width: 18px; height: 18px; }

/* Diese Woche / Meilenstein */
.kd-paar { display: grid; gap: 16px; }
.kd-paar:empty { display: none; }
.kd-woche { display: grid; gap: 12px; }
.kd-woche .kd-titel { font-size: 17px; }
.kd-woche-liste { display: grid; gap: 10px; }
.kd-woche-liste li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.4; }
.kd-haken {
  flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--kd-gruen-flaeche); color: var(--kd-gruen);
}
.kd-haken .kd-ic { width: 14px; height: 14px; stroke-width: 2.8; }
.kd-woche-mehr { font-size: 13px; color: var(--kd-leise); }
.kd-link-zeile a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

.kd-meilenstein { display: grid; gap: 12px; align-content: start; }
.kd-meilenstein-zeile { display: flex; gap: 12px; align-items: flex-start; }
.kd-meilenstein-symbol { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--kd-blau-flaeche); color: var(--kd-blau); }
.kd-meilenstein-name { font-size: 17px; font-weight: 700; line-height: 1.3; }
.kd-meilenstein-datum { font-size: 14px; color: var(--kd-leise); }
.kd-meilenstein-danach { font-size: 14px; color: #344054; padding-top: 12px; border-top: 1px solid var(--kd-rand); }

/* Alle Aufgaben: Filter-Chips und Akkordeons */
.kd-aufgaben { display: grid; gap: 12px; padding-top: 16px; min-width: 0; }
.kd-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; margin: 0 -2px; scrollbar-width: none; }
.kd-chips::-webkit-scrollbar { display: none; }
.kd-chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--kd-rand); background: var(--kd-karte);
  font-size: 14px; font-weight: 600; color: var(--kd-text); white-space: nowrap;
}
.kd a.kd-chip { color: var(--kd-text); }
.kd a.kd-chip:hover { text-decoration: none; border-color: var(--kd-grau-rand); }
.kd-chip-zahl { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--kd-grau-flaeche); font-size: 12px; text-align: center; color: var(--kd-grau); }
.kd-chip-alle { background: var(--kd-text); border-color: var(--kd-text); }
.kd a.kd-chip-alle { color: #fff; }
.kd-chip-alle .kd-chip-zahl { background: rgb(255 255 255 / 0.18); color: #fff; }
.kd-chip-mithilfe .kd-chip-zahl { background: var(--kd-coral-flaeche); color: var(--kd-coral); }
.kd-chip-arbeit .kd-chip-zahl { background: var(--kd-blau-flaeche); color: var(--kd-blau); }
.kd-chip-geplant .kd-chip-zahl { background: var(--kd-grau-flaeche); color: var(--kd-grau); }
.kd-chip-erledigt .kd-chip-zahl { background: var(--kd-gruen-flaeche); color: var(--kd-gruen); }

.kd details.kd-akk {
  background: var(--kd-karte); border: 1px solid var(--kd-rand); border-radius: var(--kd-r);
  box-shadow: var(--kd-schatten); overflow: clip; scroll-margin-top: 16px;
}
.kd details.kd-akk > summary.kd-akk-kopf {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px;
  font-size: 17px; font-weight: 650;
}
.kd-akk-symbol { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; }
.kd-akk-mithilfe .kd-akk-symbol { background: var(--kd-coral-flaeche); color: var(--kd-coral); }
.kd-akk-arbeit .kd-akk-symbol { background: var(--kd-blau-flaeche); color: var(--kd-blau); }
.kd-akk-geplant .kd-akk-symbol { background: var(--kd-grau-flaeche); color: var(--kd-grau); }
.kd-akk-erledigt .kd-akk-symbol { background: var(--kd-gruen-flaeche); color: var(--kd-gruen); }
.kd details.kd-akk-mithilfe { border-color: var(--kd-coral-rand); }
.kd-akk-titel { flex: 1; min-width: 0; line-height: 1.3; }
.kd-akk-zahl { flex: none; font-size: 13px; font-weight: 500; color: var(--kd-leise); }
.kd-akk-inhalt { padding: 0 12px 12px; display: grid; gap: 4px; }

/* Aufgabenkarte — eine Komponente für alle offenen Stände */
.kd-karten { display: grid; gap: 10px; }
.kd-karte {
  display: grid; gap: 8px; padding: 14px 14px 12px; border-radius: 12px;
  border: 1px solid var(--kd-rand); background: #fff; scroll-margin-top: 16px; min-width: 0;
}
.kd-karte-mithilfe { border-left: 4px solid var(--kd-coral-knopf); }
.kd-karte-arbeit { border-left: 4px solid var(--kd-blau); }
.kd-karte-geplant { border-left: 4px solid var(--kd-grau-rand); }
.kd-karte:target { box-shadow: 0 0 0 3px #84adff; }
.kd-karte-kopf { display: flex; align-items: flex-start; gap: 10px; }
.kd-punkt { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 7px; background: var(--kd-grau-rand); }
.kd-karte-mithilfe .kd-punkt { background: var(--kd-coral-knopf); }
.kd-karte-arbeit .kd-punkt { background: var(--kd-blau); }
.kd-karte-titel { font-size: 16px; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }
.kd-karte-text {
  font-size: 14px; color: #475467; padding-left: 20px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.kd-karte-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding-left: 20px; }
.kd-tag {
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 999px;
  background: var(--kd-grau-flaeche); color: var(--kd-grau); font-size: 12px; font-weight: 550;
}
.kd-tag-kunde { background: var(--kd-coral-flaeche); color: var(--kd-coral); }
.kd-statuszeile { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--kd-grau); }
.kd-statuszeile .kd-ic { width: 16px; height: 16px; }
.kd-karte-mithilfe .kd-statuszeile { color: var(--kd-coral); }
.kd-karte-arbeit .kd-statuszeile { color: var(--kd-blau); }
.kd-ueberfaellig .kd-statuszeile { color: var(--kritisch); }

.kd details.kd-details { margin-left: 20px; background: none; border: 0; border-radius: 0; }
.kd details.kd-details > summary.kd-details-kopf {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0;
  font-size: 14px; font-weight: 600; color: var(--kd-blau);
}
.kd-details-inhalt { display: grid; gap: 12px; padding: 4px 0 6px; font-size: 14px; color: #344054; }
.kd-angabe-kopf { font-size: 13px; font-weight: 650; color: var(--kd-text); margin-bottom: 2px; }
.kd-angabe { display: grid; gap: 2px; font-size: 14px; line-height: 1.5; }
.kd-schritte { list-style: decimal; padding-left: 20px; display: grid; gap: 4px; }
.kd-bezug { display: grid; gap: 2px; }
.kd-angabe-link a, .kd-bezug a { font-weight: 600; }
.kd-handeln { padding-left: 20px; }

/* Mengenangaben (kennzahlen) als kleine Zahl-Chips und Belegbilder (bilder), seit v=13. */
.kd-mengen { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 20px; }
.kd-erledigt-inhalt .kd-mengen { padding-left: 0; }
.kd-menge {
  display: inline-flex; align-items: baseline; gap: 4px; min-height: 24px; padding: 2px 9px; border-radius: 999px;
  background: var(--kd-blau-flaeche); color: var(--kd-grau); font-size: 12px; font-weight: 550; line-height: 1.4;
}
.kd-menge-zahl { color: var(--kd-blau); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kd-belege { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.kd-beleg {
  display: grid; gap: 4px; color: var(--kd-blau); font-size: 13px; font-weight: 600; text-decoration: none;
}
.kd-beleg img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: top center;
  border: 1px solid var(--kd-rand); border-radius: 10px; background: var(--kd-grau-flaeche);
}
.kd-beleg:hover img, .kd-beleg:focus-visible img { border-color: var(--kd-blau-rand); }
.kd-beleg:hover .kd-beleg-hinweis { text-decoration: underline; }
.kd details.kd-details.kd-details-klein { margin-left: 0; }
.kd details.kd-details.kd-details-klein > summary.kd-details-kopf { min-height: 32px; font-size: 13px; }
.kd-handeln .kd-knopf { width: 100%; }

.kd details.kd-erledigen { margin-left: 20px; background: none; border: 0; border-radius: 0; display: grid; gap: 12px; }
.kd details.kd-erledigen > summary.kd-knopf { display: flex; width: 100%; min-height: 44px; padding: 0 18px; font-size: 15px; }
.kd details.kd-erledigen > summary .kd-auf { color: #fff; }
.kd-formulare { display: grid; gap: 12px; padding-top: 12px; }
.kd-form { display: grid; gap: 6px; padding: 14px; border-radius: 12px; background: var(--kd-grau-flaeche); }
.kd-form-titel { font-size: 15px; font-weight: 650; }
.kd-form label { font-size: 13px; font-weight: 600; margin: 0; }
.kd-form textarea, .kd-form input[type="file"] {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; color: var(--kd-text);
  background: #fff; border: 1px solid var(--kd-grau-rand); border-radius: 10px; padding: 10px 12px;
}
.kd-form .kd-knopf { justify-self: start; }
.kd-form-hinweis { font-size: 12px; color: var(--kd-leise); }
.kd-form-warnung { color: var(--kritisch); font-weight: 600; }
.kd .meldung, .kd .fehler { margin-top: 10px; }
.kd .eigene-eingaben { margin-top: 10px; font-size: 13px; }

/* Erledigt: kompakt, ohne Tagesdatum, nach Wochen gruppiert */
.kd-gruppe {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  font-size: 13px; font-weight: 700; color: var(--kd-text); padding: 12px 4px 6px;
}
.kd-gruppe-zeitraum { font-weight: 500; color: var(--kd-leise); }
.kd-erledigt-liste { display: grid; }
.kd-erledigt { display: flex; gap: 10px; padding: 10px 4px; border-top: 1px solid var(--kd-rand); }
.kd-erledigt:first-child { border-top: 0; }
.kd-erledigt-inhalt { display: grid; gap: 4px; min-width: 0; }
.kd-erledigt-titel { font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.kd-erledigt-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.kd details.kd-mehr { background: none; border: 0; border-radius: 0; margin-top: 4px; }
.kd details.kd-mehr > summary.kd-mehr-kopf {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 12px;
  border-radius: 12px; background: var(--kd-grau-flaeche); font-size: 14px; font-weight: 600; color: var(--kd-text);
}
.kd-leer-satz { font-size: 14px; color: var(--kd-leise); padding: 4px 4px 8px; }

/* Ansprechperson */
.kd-support { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; margin-top: 16px; }
.kd-avatar {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--kd-text); color: #fff; font-weight: 700; font-size: 16px; letter-spacing: 0.02em;
}
.kd-support-titel { font-size: 18px; font-weight: 700; line-height: 1.3; }
.kd-support-text p { font-size: 14px; color: #344054; }
.kd-support-text .kd-support-name { display: grid; margin-top: 8px; font-weight: 650; color: var(--kd-text); }
.kd-support-rolle { font-size: 13px; font-weight: 400; color: var(--kd-leise); }
.kd-support-knoepfe { grid-column: 1 / -1; display: grid; gap: 10px; }

.kd-leer { display: grid; gap: 8px; padding: 20px; background: #fff; border: 1px solid var(--kd-rand); border-radius: var(--kd-r); }
.kd-karte-block { box-sizing: border-box; width: 100%; }
.kd-leer-titel { font-size: 18px; font-weight: 700; }

@media (min-width: 560px) {
  .kd-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kd-support-knoepfe { display: flex; flex-wrap: wrap; }
  .kd-aktion { grid-template-columns: auto 1fr auto; align-items: center; }
  .kd-aktion > .kd-knopf { grid-column: auto; }
  .kd-handeln .kd-knopf, .kd details.kd-erledigen > summary.kd-knopf { width: auto; display: inline-flex; }
}
@media (min-width: 900px) {
  body.kd-seite .statusseite { padding: 32px 32px 64px; }
  .kd { gap: 20px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .inhalt .kd { padding: 24px; }
  .kd > * { grid-column: 1 / -1; }
  .kd > .kd-hero { grid-column: 1; align-self: center; }
  .kd > .kd-fortschritt { grid-column: 2; align-self: center; }
  .kd-hero-zeile { font-size: 32px; }
  .kd-paar { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; }
  .kd-phase { flex-basis: 0; }
  .kd-block { padding: 22px; }
  .kd-support { grid-template-columns: auto 1fr auto; align-items: center; }
  .kd-support-knoepfe { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .kd-auf { transition: none; }
}

/* Ihre Marke (teile/marke.php): Logos, Farben, Schriften, Claim, Regeln, Downloads.
   Präfix kd-auftritt, weil kd-marke schon das Logo im Kopf meint. Kundenfarben stehen nur
   als fill am SVG, Schriftproben kommen über kunden/<kuerzel>/marke/schriften.css. */
.kd-auftritt { display: grid; gap: 22px; }
.kd-auftritt-kopf { display: grid; gap: 6px; }
.kd-auftritt-intro { font-size: 15px; max-width: 64ch; }
.kd-auftritt-teil { display: grid; gap: 12px; min-width: 0; padding-top: 20px; border-top: 1px solid var(--kd-rand); }
.kd-auftritt-teil-titel { font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.kd-auftritt-name { font-size: 15px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.kd-auftritt-name .kd-tag { margin-left: 4px; vertical-align: 1px; }
.kd-auftritt-leise { font-size: 13px; line-height: 1.45; color: var(--kd-leise); overflow-wrap: anywhere; }
.kd-auftritt-fuss { font-size: 13px; line-height: 1.45; color: var(--kd-leise); max-width: 72ch; }
.kd-auftritt-raster { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.kd-auftritt-raster > li { min-width: 0; }

/* Logos: je Datei eine Bühne für den Grund, auf dem sie lesbar ist */
.kd-auftritt-logo { display: grid; gap: 4px; align-content: start; padding: 12px; border: 1px solid var(--kd-rand); border-radius: 14px; }
.kd-auftritt-buehnen { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 6px; }
.kd-auftritt-buehne { height: 128px; padding: 18px; border-radius: 10px; border: 1px solid var(--kd-rand); }
.kd-auftritt-buehne-hell { background: #ffffff; }
.kd-auftritt-buehne-dunkel { background: #101828; border-color: #101828; }
.kd-auftritt-buehne img { display: block; width: 100%; height: 100%; object-fit: contain; }
.kd-auftritt-laden { justify-self: start; margin-top: 6px; padding: 0 14px; font-size: 14px; }

/* Farben: Feld, Werte zum Kopieren, Anteil als dünner Balken */
.kd-auftritt-farbe {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 12px; border: 1px solid var(--kd-rand); border-radius: 14px;
}
.kd-auftritt-feld { display: block; width: 56px; height: 56px; }
.kd-auftritt-feld-rand { fill: none; stroke: rgb(16 24 40 / 0.14); stroke-width: 1; }
.kd-auftritt-farbe-text { display: grid; gap: 6px; min-width: 0; }
.kd-auftritt-werte { display: grid; gap: 2px; margin: 0; }
.kd-auftritt-werte > div { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 8px; font-size: 13px; line-height: 1.5; }
.kd-auftritt-werte dt { color: var(--kd-leise); font-weight: 600; }
.kd-auftritt-werte dd {
  margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  -webkit-user-select: all; user-select: all;
}
.kd-auftritt-anteil { display: grid; gap: 4px; }
.kd-auftritt-balken { display: block; width: 100%; height: 4px; border-radius: 2px; }
.kd-auftritt-balken-grund { fill: var(--kd-grau-flaeche); }

/* Schriften: Probe in der Hausschrift, sonst Ersatzschrift mit Hinweis */
.kd-auftritt-schrift { display: grid; gap: 4px; align-content: start; padding: 14px; border: 1px solid var(--kd-rand); border-radius: 14px; }
.kd-auftritt-probe { font-size: 40px; line-height: 1.1; margin-bottom: 6px; overflow-wrap: anywhere; }
.kd-auftritt-probe-1 { font-family: "kd-schrift-1", system-ui, sans-serif; }
.kd-auftritt-probe-2 { font-family: "kd-schrift-2", system-ui, sans-serif; }
.kd-auftritt-probe-3 { font-family: "kd-schrift-3", system-ui, sans-serif; }
.kd-auftritt-probe-4 { font-family: "kd-schrift-4", system-ui, sans-serif; }
.kd-auftritt-probe-ersatz { font-family: system-ui, sans-serif; }
.kd-auftritt-gewicht-100 { font-weight: 100; }
.kd-auftritt-gewicht-200 { font-weight: 200; }
.kd-auftritt-gewicht-300 { font-weight: 300; }
.kd-auftritt-gewicht-400 { font-weight: 400; }
.kd-auftritt-gewicht-500 { font-weight: 500; }
.kd-auftritt-gewicht-600 { font-weight: 600; }
.kd-auftritt-gewicht-700 { font-weight: 700; }
.kd-auftritt-gewicht-800 { font-weight: 800; }
.kd-auftritt-gewicht-900 { font-weight: 900; }
.kd-auftritt-kursiv { font-style: italic; }
.kd-auftritt-schnitte { display: grid; gap: 10px; margin-top: 6px; }
.kd-auftritt-schnitte > li { display: grid; gap: 2px; }
.kd-auftritt-schnitt-name { font-size: 12px; font-weight: 600; color: var(--kd-leise); }
.kd-auftritt-satz { font-size: 18px; line-height: 1.35; }

/* Claim und Tonalität */
.kd-auftritt-claim {
  display: grid; gap: 4px; margin: 0; padding: 16px 18px;
  background: var(--kd-grau-flaeche); border-left: 4px solid var(--kd-text); border-radius: 0 12px 12px 0;
}
.kd-auftritt-claim blockquote { margin: 0; }
.kd-auftritt-claim blockquote p { font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.kd-auftritt-ton { font-size: 15px; line-height: 1.6; max-width: 68ch; }

/* Regeln */
.kd-auftritt-regeln { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.kd-auftritt-regel { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; }
.kd-auftritt-regel > .kd-ic { color: var(--kd-coral); margin-top: 1px; }
.kd-auftritt-regel > div { display: grid; gap: 2px; min-width: 0; }

/* Downloads */
.kd a.kd-auftritt-download {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: center;
  min-height: 44px; padding: 12px 14px; border: 1px solid var(--kd-grau-rand); border-radius: 12px;
  color: var(--kd-text); text-decoration: none;
}
.kd a.kd-auftritt-download:hover { background: var(--kd-grau-flaeche); }
.kd-auftritt-download > span { display: grid; gap: 2px; min-width: 0; }

/* Was noch fehlt: gestrichelte Karte */
.kd-auftritt-offen {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; align-self: start;
  padding: 14px; border: 1.5px dashed var(--kd-grau-rand); border-radius: 14px; background: #fcfcfd;
}
.kd-auftritt-offen > .kd-ic { color: var(--kd-leise); margin-top: 1px; }
.kd-auftritt-offen > div { display: grid; gap: 2px; min-width: 0; }

@media (min-width: 560px) {
  .kd-auftritt-raster, .kd-auftritt-regeln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .kd-auftritt-probe { font-size: 48px; }
  /* Fast quadratische Logos mit Claim brauchen Höhe, nicht Breite: bei 128px blieb die
     Claimzeile 8px hoch, obwohl die Kachel fünfmal so breit war wie das Logo. */
  .kd-auftritt-buehne { height: 200px; }
}
@media print {
  .kd-auftritt-laden { display: none; }
  .kd-auftritt-logo, .kd-auftritt-farbe, .kd-auftritt-schrift, .kd-auftritt-offen, .kd-auftritt-regel { break-inside: avoid; }
  /* Verschachtelte Grids brechen in Chromium nicht sauber über Blätter: Die Teile legten sich
     über die Nachbarblöcke. Im Druck stehen sie als Block, die Abstände kommen als Rand. */
  .kd-auftritt, .kd-auftritt-teil { display: block; }
  .kd-auftritt > * + * { margin-top: 22px; }
  .kd-auftritt-teil > * + * { margin-top: 12px; }
  /* Die dunkle Bühne trägt die weißen Logos; ohne sie stünden die auf weißem Papier. */
  .kd-auftritt-buehne-dunkel { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

@media print {
  body.kd-seite, .kd, .inhalt .kd { background: #fff; }
  /* Das Grid von .kd ließ im Druck Support-Karte und Fuß über "Alle Aufgaben" liegen. */
  .kd { display: block; }
  .kd > * + * { margin-top: 16px; }
  .kd details::details-content { content-visibility: visible; display: block; }
  .kd details.kd-menue, .kd-chips, .kd-handeln, .kd details.kd-erledigen, .kd-support-knoepfe,
  .kd-aktion > .kd-knopf, .kd-link-zeile, .kd details.kd-mehr > summary.kd-mehr-kopf,
  .kd details.kd-details > summary.kd-details-kopf { display: none; }
  .kd-block, .kd details.kd-akk, .kd-kpi { box-shadow: none; }
  .kd-karte, .kd-erledigt, .kd-kpi { break-inside: avoid; }
  .kd-phasen { overflow: visible; flex-wrap: wrap; }
  .kd-karte-text { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; }
  .kd-auf { display: none; }
}