/*
 * Cockpit — Farb- und Schriftwelt von dominikvogt.de.
 *
 * Die Token im ersten Block sind wortgleich aus globals.css der Homepage
 * übernommen. Darunter stehen nur zwei Ergänzungen: Zustandsfarben, die die
 * Homepage nicht braucht, weil sie keine Zustände zeigt. Beide sind bewusst
 * entsättigt, damit sie neben dem Stahlblau nicht um Aufmerksamkeit kämpfen.
 */

@font-face {
  font-family: Fraunces;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fraunces.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/instrument.woff2") format("woff2");
}

:root {
  /* --- unverändert von dominikvogt.de --- */
  --papier: #f3f4f6;
  --papier-dunkel: #e4e7eb;
  --schiefer: #1e2227;
  --schiefer-hell: #2c3138;
  --stein: #565d66;
  --stein-hell: #9aa1ab;
  --akzent: #2c6288;
  --akzent-hell: #7fb4d9;
  --akzent-dunkel: #204a67;
  --linie: #d2d6dc;
  --linie-dunkel: #3c424a;
  --feldrahmen: #7c828b;

  /* --- Ergänzung: Zustände --- */
  --moos: #3f6f52;
  --moos-zart: #eaf1ec;
  --messing: #8a6a2f;
  --messing-zart: #f5f0e4;
  /* Stillstand (seit 29.09.2026). Der Bauauftrag trennt "drängt/steht"
     (rot-orange) von "beobachten" (gelb). Bis dahin gab es nur Messing
     für beides. */
  --rost: #a14e2a;

  /* --- Rollen --- */
  --grund: var(--papier);
  --flaeche: #fbfbfc;
  --text: var(--schiefer);
  --leise: var(--stein);
  --zart: #7b828b;
  --ton: var(--akzent);
  --strich: var(--linie);

  --schiene: var(--schiefer);
  --schiene-text: #e7eaed;
  --schiene-leise: #98a1aa;
  --schiene-ton: var(--akzent-hell);
  --schiene-strich: var(--linie-dunkel);

  --gut: var(--moos);
  --gut-zart: var(--moos-zart);
  --achtung: var(--messing);
  --achtung-zart: var(--messing-zart);

  --breite: 60rem;
  --schienenbreite: 15rem;
}

* { box-sizing: border-box; }

html {
  background: var(--grund);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ton); }
:focus-visible {
  outline: 2px solid var(--ton);
  outline-offset: 2px;
  border-radius: 1px;
}

.sprung {
  position: absolute;
  left: -9999px;
  top: 0.5rem;
  background: var(--flaeche);
  color: var(--text);
  padding: 0.6rem 0.9rem;
  z-index: 100;
  border: 1px solid var(--feldrahmen);
}
.sprung:focus { left: 0.5rem; }

/* ====================================================================
   Grundriss: Schiene links, Fläche rechts
   ==================================================================== */

.riss {
  display: grid;
  grid-template-columns: var(--schienenbreite) minmax(0, 1fr);
  min-height: 100vh;
}

/* --- Schiene --- */

.schiene {
  background: var(--schiene);
  color: var(--schiene-text);
  padding: 1.6rem 1.1rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.marke {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: inherit;
}
.marke i {
  width: 1.9rem;
  height: 1.9rem;
  background: var(--akzent);
  flex: none;
  display: grid;
  place-items: center;
  font-family: Fraunces, Georgia, serif;
  font-style: normal;
  font-weight: 600;
  color: #fff;
  font-size: 0.95rem;
}
.marke b {
  font-family: Fraunces, Georgia, serif;
  font-weight: 560;
  letter-spacing: -0.015em;
  font-size: 1.15rem;
  display: block;
  line-height: 1.1;
}
.marke span {
  display: block;
  font-size: 0.63rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--schiene-leise);
  margin-top: 0.1rem;
}

.schiene-gruppe {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.schiene-gruppe > em {
  font-style: normal;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #79828c;
  font-weight: 600;
  padding: 0 0.45rem 0.4rem;
}

.schiene a.punkt {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.4rem 0.5rem;
  color: #c3cad1;
  text-decoration: none;
  font-size: 0.92rem;
  border-left: 2px solid transparent;
}
.schiene a.punkt:hover { background: var(--schiefer-hell); color: #fff; }
.schiene a.punkt[aria-current] {
  background: var(--schiefer-hell);
  color: #fff;
  border-left-color: var(--schiene-ton);
  font-weight: 600;
}
.schiene a.punkt i {
  font-style: normal;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}
/*
 * Jede Zahl in der Schiene fordert etwas — sonst stünde sie nicht da.
 * Deshalb ist sie immer farbig; Grau gibt es nur ohne Zahl.
 */
.schiene a.punkt i.fordert { color: var(--akzent-hell); font-weight: 600; }

.schiene-fuss {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--schiene-strich);
  font-size: 0.72rem;
  color: var(--schiene-leise);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.schiene-fuss a { color: var(--schiene-leise); }
.schiene-fuss form { margin: 0; }
.abmelden {
  background: none;
  border: 1px solid var(--schiene-strich);
  color: var(--schiene-leise);
  font: inherit;
  font-size: 0.72rem;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
}
.abmelden:hover { border-color: var(--schiene-ton); color: var(--schiene-text); }

/* --- Fläche --- */

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

.bahn {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2.75rem);
}

/* ====================================================================
   Prüfvermerk — die Leiste über allem
   ==================================================================== */

.pruefvermerk {
  border-bottom: 1px solid var(--strich);
  background: var(--flaeche);
  position: sticky;
  top: 0;
  z-index: 10;
}
.pruefvermerk .bahn {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1.1rem;
  padding-block: 0.7rem;
  font-size: 0.78rem;
  color: var(--leise);
}
.pruefvermerk .titel {
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ton);
}
.pruefvermerk .quelle { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Der ruhige Fall (seit 29.09.2026): eine schmale Zeile statt sechs
   Quellen mit Altersangabe. Der Vermerk klappt nur noch auf, wenn wirklich
   etwas fehlt - vorher kostete er auf dem Telefon den halben Bildschirm,
   bevor eine Zeile Inhalt kam. */
.pruefvermerk-still .bahn {
  padding-block: 0.4rem;
  font-size: 0.72rem;
}
.pruefvermerk-still .urteil { color: var(--leise); font-weight: 400; }
.pruefvermerk .quelle::before {
  content: "";
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--gut);
  margin-right: 0.4rem;
  vertical-align: 0.05rem;
}
.pruefvermerk .quelle.alt::before { background: var(--achtung); }
.pruefvermerk .quelle.weg::before { background: var(--ton); }
.pruefvermerk .quelle.alt { color: var(--achtung); }
.pruefvermerk .quelle.weg { color: var(--ton); font-weight: 600; }
.pruefvermerk .urteil { margin-left: auto; font-weight: 600; color: var(--text); }
.pruefvermerk .urteil.mangel { color: var(--achtung); }

.warnung {
  background: var(--achtung-zart);
  border-bottom: 1px solid var(--strich);
  color: #6a5222;
}
.warnung .bahn {
  padding-block: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.88rem;
}
.warnung b {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--achtung);
}

/* ====================================================================
   Tageswechsel
   ==================================================================== */

.tageswechsel {
  border-bottom: 1px solid var(--strich);
}
.tageswechsel .bahn {
  display: flex;
  gap: 1.6rem;
  padding-block: 0;
}
.tageswechsel a {
  padding: 0.85rem 0 0.75rem;
  text-decoration: none;
  color: var(--leise);
  font-size: 0.94rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}
.tageswechsel a:hover { color: var(--text); }
.tageswechsel a[aria-current] {
  color: var(--text);
  font-weight: 600;
  border-bottom-color: var(--ton);
}
.tageswechsel a small {
  font-size: 0.7rem;
  color: var(--zart);
  font-weight: 400;
}
.tageswechsel a[aria-current] small { color: var(--ton); }

/* ====================================================================
   Typografie
   ==================================================================== */

.anzeige {
  font-family: Fraunces, Georgia, serif;
  font-weight: 560;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
  color: var(--text);
}
h1.anzeige { font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1.08; }
h2.anzeige { font-size: clamp(1.4rem, 2.8vw, 1.8rem); line-height: 1.18; }
h3.anzeige { font-size: 1.22rem; line-height: 1.25; }

.kennung {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ton);
  margin: 0;
}
.kennung::before {
  content: "";
  width: 2rem;
  height: 2px;
  background: currentColor;
  flex: none;
}

.vorspann {
  margin: 0;
  color: var(--leise);
  max-width: 38rem;
  font-size: 1.02rem;
}

/* ====================================================================
   Kopf einer Ansicht
   ==================================================================== */

/*
 * Anthrazit trägt nur noch der Seitenkopf.
 *
 * Bis zum 15.08.2026 lag über jedem Block ein dunkles Band, aus der Homepage
 * übernommen. Bei drei Blöcken gab das einen Takt; mit Auftragsstatus und
 * Notizfeld wurden es sieben, und daraus wurde eine gestreifte Bahn, in der
 * alles gleich laut war. Die Ordnung kommt jetzt aus Typografie, Linien und
 * Weißraum — der dunkle Einstieg bleibt als einzige Fläche erhalten.
 */

.kopf {
  background: var(--schiene);
  color: var(--schiene-text);
}
.kopf .kennung { color: var(--schiene-ton); }
.kopf .anzeige { color: var(--schiene-text); }
.kopf .vorspann { color: var(--stein-hell); }

.kopf > .bahn {
  padding-block: clamp(2rem, 4.5vw, 3.1rem);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

/*
 * Die Breitenbegrenzung sitzt an der Tafel, nicht mehr in jedem Block: nur so
 * lassen sich zwei Blöcke nebeneinander stellen.
 */
.tafel {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2.75rem);
  padding-block: clamp(1.6rem, 3vw, 2.4rem) clamp(3rem, 7vw, 5rem);
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}
.tafel + .tafel { padding-top: 0; }

.block { display: block; min-width: 0; }

/*
 * Der Blockkopf: Kennung, Titel, darunter eine Linie, die den Titel trägt
 * statt ihn zu umranden. Zwei Stärken — die Handlungsspalte bekommt die
 * kräftige, die Lagespalte die feine.
 */
.block-kopf {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--text);
}
.block-kopf .anzeige { font-size: 1.3rem; line-height: 1.2; }
.block-kopf .vorspann { font-size: 0.88rem; margin-top: 0.15rem; }
.block-kopf .kennung { font-size: 0.68rem; letter-spacing: 0.16em; }
.block-kopf .kennung::before { display: none; }

.block-inhalt {
  padding-block: 0.9rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* ====================================================================
   Zwei Spalten: links Handlung, rechts Lage
   ==================================================================== */

.spalte {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

/*
 * Ab hier ist Platz für zwei Spalten. Die Tafel darf dann breiter werden als
 * eine Lesespalte — aber nur sie: Abendlage, Woche und Register bleiben
 * schmal, weil dort durchgehender Text steht.
 */
@media (min-width: 69rem) {
  .tafel.zweispaltig {
    max-width: 74rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 2.4rem 3.2rem;
  }
  /*
   * Rechts steht Lage, nicht Handlung. Kleinerer Titel und feinere Linie
   * sagen das, ohne ein Wort dafür zu brauchen.
   */
  .spalte-lage .block-kopf {
    border-bottom-width: 1px;
    border-bottom-color: var(--strich);
  }
  .spalte-lage .block-kopf .anzeige { font-size: 1.1rem; }
  .spalte-lage .block-inhalt { padding-top: 0.7rem; }
}

/* ====================================================================
   Zeile — die Grundform
   ==================================================================== */

.zeilen { display: flex; flex-direction: column; }

.zeile {
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr);
  gap: 0 1.05rem;
  align-items: baseline;
  padding-block: 0.85rem;
  border-top: 1px solid var(--strich);
}
.zeilen > .zeile:first-child { border-top: 0; padding-top: 0.2rem; }

.leitzahl {
  font-family: Fraunces, Georgia, serif;
  font-weight: 560;
  font-size: 1.65rem;
  line-height: 1;
  color: var(--ton);
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  display: block;
}
.leitzahl i {
  font-style: normal;
  display: block;
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--zart);
  margin-top: 0.15rem;
}
.leitzahl.leer-zahl { min-height: 1rem; }
.leitzahl.wort {
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.5;
}

.sache { min-width: 0; display: block; }
.kennzeichen {
  font-style: normal;
  display: block;
  font-size: 0.63rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--zart);
  font-weight: 600;
  margin-bottom: 0.15rem;
}
.sache b, .sache .titel-link {
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}
.sache .titel-link { text-decoration: none; }
.sache .titel-link:hover { color: var(--ton); text-decoration: underline; text-underline-offset: 3px; }
.sache .dazu {
  display: block;
  color: var(--leise);
  font-size: 0.88rem;
  margin-top: 0.2rem;
}
.sache .marke {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--strich);
  color: var(--leise);
  background: var(--flaeche);
}

/* ====================================================================
   Nummerierter Schritt (Abendlage)
   ==================================================================== */

/* Der nummerierte Kopf der Abendlage — Nummer links, Titel rechts. */
.block-kopf.schritt-kopf {
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr);
  gap: 0 1.05rem;
  align-items: baseline;
}
.schritt-nr {
  font-family: Fraunces, Georgia, serif;
  font-weight: 560;
  font-size: 1.65rem;
  line-height: 1.1;
  color: var(--ton);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.block-kopf.schritt-kopf > div {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* ====================================================================
   Leerzustand
   ==================================================================== */

.leer {
  padding: 0.9rem 0 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.leer p { margin: 0; color: var(--text); font-weight: 600; }
.leer .leer-dazu { color: var(--leise); font-size: 0.9rem; }

/* ====================================================================
   Messwerte und Balken
   ==================================================================== */

.messwerte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 1px;
  background: var(--strich);
  border: 1px solid var(--strich);
}
.messwert {
  background: var(--flaeche);
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.messwert strong {
  font-family: Fraunces, Georgia, serif;
  font-weight: 560;
  font-size: 1.8rem;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.messwert span { font-size: 0.76rem; color: var(--leise); }
.messwert.ton-gut strong { color: var(--gut); }
.messwert.ton-achtung strong { color: var(--achtung); }
.messwert.ton-akzent strong { color: var(--ton); }

.balken {
  display: block;
  height: 0.4rem;
  background: var(--papier-dunkel);
  overflow: hidden;
}
.balken i { display: block; height: 100%; background: var(--ton); width: 0; }
.balken.ton-gut i { background: var(--gut); }
.balken.ton-achtung i { background: var(--achtung); }

/*
 * Balkenbreiten als Klassen statt als style-Attribut. Die Inhaltsrichtlinie
 * der Seite erlaubt keine Inline-Styles; ein blockiertes Attribut fiele
 * lautlos aus und jeder Balken wäre voll. Fünf-Prozent-Schritte genügen, weil
 * die genaue Zahl immer daneben steht.
 */
.balken i.b0   { width: 0; }
.balken i.b5   { width: 5%; }
.balken i.b10  { width: 10%; }
.balken i.b15  { width: 15%; }
.balken i.b20  { width: 20%; }
.balken i.b25  { width: 25%; }
.balken i.b30  { width: 30%; }
.balken i.b35  { width: 35%; }
.balken i.b40  { width: 40%; }
.balken i.b45  { width: 45%; }
.balken i.b50  { width: 50%; }
.balken i.b55  { width: 55%; }
.balken i.b60  { width: 60%; }
.balken i.b65  { width: 65%; }
.balken i.b70  { width: 70%; }
.balken i.b75  { width: 75%; }
.balken i.b80  { width: 80%; }
.balken i.b85  { width: 85%; }
.balken i.b90  { width: 90%; }
.balken i.b95  { width: 95%; }
.balken i.b100 { width: 100%; }

/* Bereichszeile der Wochenansicht */
.bereiche { display: flex; flex-direction: column; }
.bereiche.abgesetzt { margin-top: 1.2rem; }
.bereich {
  display: grid;
  grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr) auto;
  gap: 0.4rem 1rem;
  align-items: center;
  padding-block: 0.75rem;
  border-top: 1px solid var(--strich);
}
.bereiche > .bereich:first-child { border-top: 0; }
.bereich > b { font-weight: 600; }
.bereich > .zahl {
  font-family: Fraunces, Georgia, serif;
  font-size: 1.05rem;
  color: var(--leise);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bereich > .zahl em { font-style: normal; color: var(--zart); font-size: 0.75rem; }

/* ====================================================================
   Verfahrensnotiz — wie eine Zahl entsteht
   ==================================================================== */

.verfahren {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1.1rem;
  padding-top: 0.3rem;
}
.verfahren > div {
  border-left: 2px solid var(--strich);
  padding-left: 0.85rem;
}
.verfahren b { display: block; font-weight: 600; font-size: 0.95rem; }
.verfahren span { color: var(--leise); font-size: 0.87rem; }

.fussnote {
  color: var(--zart);
  font-size: 0.84rem;
  max-width: 40rem;
}
.fussnote code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  background: var(--flaeche);
  border: 1px solid var(--strich);
  padding: 0.05em 0.28em;
}

/* ====================================================================
   Anmeldung
   ==================================================================== */

.tor {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--schiefer);
  padding: 1.5rem;
}
.tor-karte {
  width: min(100%, 25rem);
  background: var(--papier);
  padding: clamp(1.75rem, 5vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-top: 3px solid var(--akzent);
}
.tor-karte h1 { font-size: 1.9rem; }
.tor-karte form { display: flex; flex-direction: column; gap: 0.55rem; }
.tor-karte label { font-size: 0.85rem; font-weight: 600; }
.tor-karte input[type="password"] {
  width: 100%;
  min-height: 2.9rem;
  border: 1px solid var(--feldrahmen);
  background: var(--flaeche);
  color: var(--text);
  padding: 0.5rem 0.7rem;
  font: inherit;
  font-size: 1.05rem;
}
.tor-karte button {
  min-height: 2.9rem;
  margin-top: 0.3rem;
  border: 0;
  background: var(--akzent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.tor-karte button:hover { background: var(--akzent-dunkel); }
.tor-fehler {
  background: var(--achtung-zart);
  color: #6a5222;
  padding: 0.6rem 0.75rem;
  font-size: 0.9rem;
  border-left: 2px solid var(--achtung);
}

/* ====================================================================
   Schmale Fenster
   ==================================================================== */

@media (max-width: 60rem) {
  /* Die vier CEO-Ziele bleiben auch auf dem Telefon vor dem Inhalt erreichbar. */
  .riss { display: flex; flex-direction: column; }
  .flaeche { order: 2; }
  .schiene { order: 1; }
  .schiene {
    position: static;
    height: auto;
    flex-direction: column;
    gap: 1rem;
    padding: 1.4rem clamp(1.1rem, 4vw, 2rem) 1.6rem;
  }
  /* Der Markenkopf trägt oben nichts bei, wo schon der Prüfvermerk steht. */
  .schiene .marke { display: none; }
  .schiene-gruppe {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.2rem;
  }
  .schiene-gruppe > em { width: 100%; padding-bottom: 0.15rem; }
  .schiene a.punkt {
    border-left: 0;
    border-bottom: 2px solid transparent;
    padding: 0.3rem 0.5rem;
  }
  .schiene a.punkt[aria-current] { border-left: 0; border-bottom-color: var(--schiene-ton); }
  .schiene-fuss { margin-top: 0.3rem; }
  .pruefvermerk { position: static; }
}

@media (max-width: 34rem) {
  body { font-size: 15.5px; }
  .zeile, .schritt { grid-template-columns: 2.9rem minmax(0, 1fr); gap: 0 0.8rem; }
  .leitzahl, .schritt-nr { font-size: 1.4rem; }
  .bereich { grid-template-columns: 1fr auto; }
  .bereich > .balken-zelle { grid-column: 1 / -1; }
  .tageswechsel .bahn { gap: 1.1rem; }
  .pruefvermerk .urteil { margin-left: 0; }
}

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

@media print {
  .schiene, .tageswechsel { display: none; }
  .riss { display: block; }
  body { background: #fff; }
}

/* ====================================================================
   Rückkanal — die drei Handgriffe
   ==================================================================== */

.griffe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.55rem;
  align-items: center;
}
.griffe form { margin: 0; }

.griff {
  display: inline-flex;
  align-items: center;
  min-height: 1.85rem;
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--feldrahmen);
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.griff:hover { border-color: var(--ton); color: var(--ton); }
.griff[disabled] { opacity: 0.5; cursor: not-allowed; }
.griff[disabled]:hover { border-color: var(--feldrahmen); color: var(--text); }
.griff-mehr { color: var(--leise); font-weight: 500; }
.griff-haupt {
  background: var(--akzent);
  border-color: var(--akzent);
  color: #fff;
  min-height: 2.5rem;
  padding-inline: 1.1rem;
  align-self: flex-start;
  margin-top: 0.3rem;
}
.griff-haupt:hover { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); color: #fff; }
.griff-haupt[disabled]:hover { background: var(--akzent); }

/* Zusatz an einer Zeile: Wartegrund, Vormerkung */
.vermerk {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.84rem;
  color: var(--leise);
  padding-left: 0.7rem;
  border-left: 2px solid var(--strich);
}
.vermerk-warten { border-left-color: var(--ton); color: var(--text); }
.vermerk-achtung { border-left-color: var(--achtung); color: var(--achtung); font-weight: 600; }

/* Eine Zeile, deren Handgriff noch nicht im Bestand angekommen ist */
.zeile.blass > .sache > b,
.zeile.blass > .sache > .titel-link { color: var(--zart); text-decoration: line-through; }
.zeile.blass .leitzahl, .zeile.blass .dazu, .zeile.blass .kennzeichen { opacity: 0.55; }
.zeile.blass .vermerk { text-decoration: none; }

/* ====================================================================
   Quittung — die Rückmeldung nach einem Handgriff
   ==================================================================== */

.quittung { border-bottom: 1px solid var(--strich); }
.quittung .bahn {
  padding-block: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.7rem;
  font-size: 0.92rem;
}
.quittung b { font-weight: 600; }
.quittung span { color: var(--leise); }
.quittung-gut { background: var(--gut-zart); }
.quittung-gut b { color: var(--gut); }
.quittung-fehler { background: var(--achtung-zart); }
.quittung-fehler b { color: var(--achtung); }

/* Hängende Vormerkungen */
.haengt-liste { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
.haengt-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.haengt-zeile b { display: block; font-weight: 600; }
.haengt-zeile em { font-style: normal; font-size: 0.82rem; color: var(--leise); }

/* ====================================================================
   Formulare der Handgriff-Seite
   ==================================================================== */

.formulare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1.5rem;
}
.formular {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  border: 1px solid var(--strich);
  background: var(--flaeche);
  padding: 1.15rem;
}
.formular-titel {
  font-family: Fraunces, Georgia, serif;
  font-weight: 560;
  letter-spacing: -0.015em;
  font-size: 1.15rem;
  margin: 0 0 0.2rem;
}
.formular label { font-size: 0.82rem; font-weight: 600; margin-top: 0.35rem; }
.formular input[type="text"],
.formular input[type="date"] {
  width: 100%;
  min-height: 2.6rem;
  border: 1px solid var(--feldrahmen);
  background: var(--grund);
  color: var(--text);
  padding: 0.4rem 0.6rem;
  font: inherit;
}
.formular input:disabled { opacity: 0.55; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.35rem; }
.formular .fussnote { margin-top: 0.3rem; }

@media (max-width: 34rem) {
  .griffe { gap: 0.35rem; }
  .griff { font-size: 0.78rem; }
  .haengt-zeile { flex-direction: column; align-items: flex-start; }
}

/* ====================================================================
   Rückfragen von Hermes
   ==================================================================== */

.rueckfragen { display: flex; flex-direction: column; }
.rueckfrage {
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr);
  gap: 0 1.05rem;
  align-items: baseline;
  padding-block: 1rem;
  border-top: 1px solid var(--strich);
}
.rueckfragen > .rueckfrage:first-child { border-top: 0; padding-top: 0.2rem; }
.rueckfrage-text { min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.rueckfrage-text > b { font-weight: 600; font-size: 1.02rem; overflow-wrap: anywhere; }

.freigabe-hoch { box-shadow: inset 3px 0 0 var(--akzent); padding-left: 0.8rem; }
.vorschau {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--flaeche);
  border: 1px solid var(--feldrahmen);
  padding: 0.6rem 0.75rem;
  margin-block: 0.3rem 0.1rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

.antwortform {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.6rem;
  align-items: stretch;
}
.antwortform input[type="text"] {
  flex: 1 1 18rem;
  min-height: 2.5rem;
  border: 1px solid var(--feldrahmen);
  background: var(--flaeche);
  color: var(--text);
  padding: 0.4rem 0.6rem;
  font: inherit;
}
.antwortform .griff-haupt { margin-top: 0; align-self: stretch; }

.verdeckt {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Zahl im Tageswechsel — dieselbe Aussage wie in der Schiene */
.tageswechsel a i.fordert {
  font-style: normal;
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--ton);
  margin-left: 0.35rem;
  font-variant-numeric: tabular-nums;
}

/* ====================================================================
   Suche — ein Feld für alle Register
   ==================================================================== */

.suchform {
  display: flex;
  gap: 0.4rem;
  align-items: stretch;
}
.suchform input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.4rem;
  border: 1px solid var(--feldrahmen);
  background: var(--flaeche);
  color: var(--text);
  padding: 0.35rem 0.6rem;
  font: inherit;
  font-size: 0.92rem;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}
.suchform .griff { flex: none; }
.suchform-gross input[type="search"] { min-height: 2.8rem; font-size: 1.02rem; }

/* Das Feld in der Schiene steht auf dunklem Grund. */
.schiene .suchform { margin-bottom: 0.2rem; }
.schiene .suchform input[type="search"] {
  background: var(--schiefer-hell);
  border-color: var(--schiene-strich);
  color: var(--schiene-text);
  font-size: 0.86rem;
}
.schiene .suchform input::placeholder { color: var(--schiene-leise); }

/* ====================================================================
   Zwei Fassungen der Navigation
   ====================================================================

   Auf dem Telefon trägt die Navigation vier Dinge — Heute, Abend, „Wartet
   auf mich" und die Suche —, dazu einen Griff zu allen Registern. Am großen
   Bildschirm steht weiter die volle Liste: dort ist der Platz da, und die
   Übersicht war ausdrücklich in Ordnung.

   Zwei Fassungen im Quelltext statt eines aufklappbaren Felds: ein
   ``details``, das oben offen und unten zu ist, lässt sich ohne JavaScript
   nicht verlässlich bauen. Die kleinere Fassung kostet rund 300 Byte. */



.punkt-mehr {
  color: var(--schiene-leise) !important;
  font-size: 0.86rem !important;
}
.punkt-mehr::after { content: " →"; }

/* Ein Sprung auf #wartet soll nicht unter dem Prüfvermerk landen. */
.block[id] { scroll-margin-top: 4.5rem; }

/* ====================================================================
   Eine Entscheidung festhalten
   ==================================================================== */

.neueintrag {
  border: 1px solid var(--strich);
  background: var(--flaeche);
  padding: 1.1rem 1.2rem 1.2rem;
  margin-bottom: 1.4rem;
}
.neueintrag h3 {
  font-family: Fraunces, Georgia, serif;
  font-weight: 560;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  margin: 0 0 0.7rem;
}

.entscheidungsform {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.entscheidungsform label {
  font-size: 0.8rem;
  font-weight: 600;
  margin-top: 0.55rem;
}
.entscheidungsform input[type="text"],
.entscheidungsform input[type="date"],
.entscheidungsform textarea,
.entscheidungsform select {
  width: 100%;
  border: 1px solid var(--feldrahmen);
  background: var(--grund);
  color: var(--text);
  padding: 0.45rem 0.6rem;
  font: inherit;
  font-size: 0.94rem;
  border-radius: 0;
}
.entscheidungsform textarea { resize: vertical; min-height: 3.2rem; }
.entscheidungsform input[type="text"] { min-height: 2.6rem; }
.entscheidungsform input[type="date"] { min-height: 2.6rem; max-width: 14rem; }
.entscheidungsform select { min-height: 2.6rem; }
.entscheidungsform .griff-haupt { align-self: flex-start; margin-top: 0.9rem; }

/* Bereich und Stand stehen nebeneinander, wo Platz ist. */
.formularpaar {
  display: grid;
  gap: 0 1rem;
}
.formularpaar > label { margin-top: 0.55rem; }
@media (min-width: 34rem) {
  .formularpaar {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "l1 l2" "f1 f2";
  }
  .formularpaar > label:nth-of-type(1) { grid-area: l1; }
  .formularpaar > select:nth-of-type(1) { grid-area: f1; }
  .formularpaar > label:nth-of-type(2) { grid-area: l2; }
  .formularpaar > select:nth-of-type(2) { grid-area: f2; }
}

/* ====================================================================
   Aufgaben nach Zeithorizont
   ==================================================================== */

.gruppe { margin-top: 1.6rem; }
.gruppe:first-of-type { margin-top: 0.4rem; }
.gruppe > h3 {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: Fraunces, Georgia, serif;
  font-weight: 560;
  font-size: 1.05rem;
  letter-spacing: -0.005em;
  margin: 0;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--strich);
}
.gruppe > h3 > i {
  font-style: normal;
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ton);
  font-variant-numeric: tabular-nums;
}
.gruppe > .fussnote { margin: 0.35rem 0 0.2rem; }

/*
 * Was jenseits eines Jahres liegt oder kein Datum trägt, tritt zurück. Es
 * soll auffindbar bleiben, aber den Blick nicht binden — sonst liest sich
 * eine Aufgabe für 2030 so laut wie eine für morgen.
 */
.gruppe-fern > h3, .gruppe-fern > .fussnote { color: var(--leise); }
.gruppe-fern > h3 > i { color: var(--leise); }
.gruppe-fern .zeile .leitzahl { color: var(--zart); }
.gruppe-fern .sache b, .gruppe-fern .sache .titel-link { font-weight: 500; }

/* ====================================================================
   Hermes-Seite — die eine Bahn fürs Telefon (26.09.2026)

   Dominiks Befund: Das Cockpit half im Alltag nicht, weil es vor allem
   anzeigte. Diese Seite ist der Gegenentwurf — eine Spalte, oben das Feld,
   darunter in fester Reihenfolge, was eine Handlung will. Zwei Spalten gäbe
   es nur am großen Schirm, und dort wäre eine halbleere zweite Spalte
   schlechter als eine ruhige erste.
   ==================================================================== */

.tafel.einspaltig {
  gap: 2rem;
}

/*
 * Das Feld oben trägt jetzt zwei Knöpfe. Auf dem Telefon soll es nicht
 * dreizeilig werden: Das Eingabefeld nimmt die ganze Breite, die Knöpfe
 * stehen darunter nebeneinander.
 */
.antwortform-breit { flex-wrap: wrap; }
.antwortform-breit input[type="text"] { flex: 1 1 100%; }
.antwortform-breit .knopfreihe { margin-top: 0; width: 100%; }

/*
 * Daumengröße. Die Griffe im Cockpit sind für die Maus gemacht (1,85 rem
 * hoch); auf dem Telefon ist das unter der Schwelle, ab der man sicher
 * trifft, ohne hinzusehen. Ab hier deshalb größere Flächen — nur dort, wo
 * wirklich getippt wird, nicht überall.
 */
@media (max-width: 60rem) {
  .antwortform .griff,
  .antwortform-breit .griff,
  .knopfreihe .griff {
    min-height: 2.75rem;
    padding-inline: 1rem;
    font-size: 0.9rem;
  }
  .antwortform input[type="text"] { min-height: 2.75rem; font-size: 1rem; }
  .antwortform-breit .knopfreihe { display: flex; gap: 0.5rem; }
  .antwortform-breit .knopfreihe .griff { flex: 1 1 0; justify-content: center; }
  .tafel.einspaltig { gap: 1.6rem; }
}

/*
 * Eine beantwortete und abgehakte Zeile bleibt noch ein paar Tage stehen.
 * Sie soll lesbar bleiben, aber nicht mehr rufen.
 */
.zeile.blass { opacity: 0.62; }

/* ====================================================================
   Brett „Heute" — der Block, der etwas will (27.09.2026)

   Vier der fünf Blöcke berichten. „Braucht dich" fordert, und das soll man
   sehen, ohne zu lesen: eine Kante in der Akzentfarbe, sonst nichts. Keine
   Ampel, kein Ausrufezeichen — im Cockpit bestimmt die Reihenfolge die
   Dringlichkeit, die Kante hebt nur den einen Block heraus.
   ==================================================================== */

#braucht-dich {
  border-left: 3px solid var(--akzent);
  padding-left: clamp(0.8rem, 2vw, 1.4rem);
  margin-left: calc(-1 * clamp(0.8rem, 2vw, 1.4rem) - 3px);
}


/* ------------------------------------------------------------------
   Mein Team (29.09.2026)
   Eine Spalte, Trennlinien statt Rahmen, Farbe nur als Signal - so
   verlangt es der Bauauftrag (Linear: "Ruhe durch Präzision"). Je Bot
   vier Angaben: Name und Rolle, Zustand, was gerade, letztes Ergebnis.
   ------------------------------------------------------------------ */
.team-liste { margin-bottom: 2rem; }
.team-mitglied {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--strich);
}
.team-mitglied:first-child { border-top: 1px solid var(--strich); }
.team-mitglied header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
}
.team-mitglied header b { font-size: 1rem; }
.team-rolle { font-size: 0.8rem; color: var(--leise); }
.team-zustand {
  margin-left: auto;
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--leise);
}
/* Farbe nur, wo sie etwas bedeutet. Arbeitet und bereit bleiben grau -
   ein Bot, der bereit ist, verlangt nichts. */
.zustand-still .team-zustand { color: var(--rost); font-weight: 600; }
.zustand-wartet .team-zustand { color: var(--achtung); font-weight: 600; }
.team-was { margin: 0.3rem 0 0; font-size: 0.95rem; line-height: 1.5; }
.team-ergebnis { margin: 0.15rem 0 0; font-size: 0.8rem; color: var(--leise); }
.team-leer { color: var(--leise); font-style: italic; }


/* ====================================================================
   Auftragstafel
   ==================================================================== */

.tafelspalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.1rem;
  align-items: start;
}
.tafelspalte h3 { margin: 0 0 0.1rem; font-size: 1rem; }
.tafelspalte h3 span { color: var(--leise); font-weight: 500; margin-left: 0.3rem; }
.tafelspalte > .fussnote { margin: 0 0 0.6rem; }
.karte {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.7rem 0.8rem;
  margin-bottom: 0.6rem;
  background: var(--flaeche);
  border: 1px solid var(--strich);
  overflow-wrap: anywhere;
}
.karte-claude { border-left: 3px solid var(--akzent); }
.karte-blass { opacity: 0.6; }
.karte > b { font-weight: 600; }
.karte .knopfreihe { margin-top: 0.3rem; }

.bereichsalter { display: grid; grid-template-columns: 9rem 8rem minmax(0, 1fr); gap: 0.6rem; align-items: center; padding-block: 0.3rem; }
@media (max-width: 560px) { .bereichsalter { grid-template-columns: 1fr; gap: 0.15rem; } }


/* ====================================================================
   Kommandoleiste, Plus-Knopf, Live-Zeile
   ==================================================================== */

.kommando-knopf {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  width: 3.2rem;
  height: 3.2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--akzent);
  color: #fff;
  font-size: 1.8rem;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  z-index: 20;
}
.kommando-knopf:hover { background: var(--akzent-dunkel); }
.kommando {
  width: min(36rem, calc(100vw - 2rem));
  border: 1px solid var(--feldrahmen);
  background: var(--flaeche);
  color: var(--text);
  padding: 1rem;
}
.kommando::backdrop { background: rgba(20, 24, 28, 0.55); }
.kommando-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0.8rem 0; font-size: 0.9rem; }
.live-status { color: var(--leise); font-size: 0.78rem; margin: 1.5rem 0 0; text-align: right; }

/* V3-Rollen: Farben sind absichtlich nicht final; nur diese Token austauschen. */
:root {
  --v3-nav: var(--schiefer);
  --v3-nav-text: var(--schiene-text);
  --v3-surface: var(--flaeche);
  --v3-command: var(--moos-zart);
  --v3-accent: var(--akzent);
  --v3-border: var(--strich);
}
.riss { display: flex; flex-direction: column; }
.schiene { position: relative; top: auto; height: auto; overflow: visible; padding: .7rem clamp(1rem, 3vw, 2rem); display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .6rem; background: var(--v3-nav); color: var(--v3-nav-text); }
.schiene-gruppe { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: .2rem; }
.schiene-gruppe { min-width: 0; }
.schiene-gruppe > .verdeckt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.schiene a.punkt { border-left: 0; border-radius: .5rem; padding: .35rem .65rem; justify-content: center; white-space: nowrap; }
.schiene a.punkt[aria-current] { border-left: 0; background: var(--schiefer-hell); }
.schiene-fuss { margin: 0; padding: 0; border: 0; align-items: flex-end; font-size: .7rem; }
.schiene .punkt-mehr { font-size: .75rem; }
.pruefvermerk { position: relative; }
.ceo-dashboard { width: min(100%, 86rem); padding: clamp(1rem, 3vw, 2.4rem); margin: auto; display: grid; gap: 1rem; }
.ceo-dashboard > * { min-width: 0; }
.ceo-actions { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1rem; }
.ceo-command-card { background: var(--v3-command); border-color: var(--v3-accent); }
.ceo-step { display: block; color: var(--v3-accent); font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ceo-command { display: grid; gap: .65rem; }
.ceo-command label { font-weight: 600; }
.ceo-command textarea { width: 100%; min-width: 0; padding: .8rem; border: 1px solid var(--feldrahmen); font: inherit; resize: vertical; }
.ceo-command button { justify-self: start; min-height: 3rem; }
.ceo-result { margin: .8rem 0; border: 1px solid var(--v3-border); padding: .7rem; overflow-wrap: anywhere; }
.ceo-result summary { cursor: pointer; font-weight: 600; }
.ceo-result p { white-space: pre-wrap; }
.ceo-result li, .ceo-result span { overflow-wrap: anywhere; white-space: pre-wrap; }
.ceo-edit { display: grid; gap: .55rem; margin: 1rem 0; min-width: 0; }
.ceo-edit label { font-weight: 600; }
.ceo-edit textarea, .ceo-edit select { width: 100%; min-width: 0; max-width: 100%; padding: .7rem; border: 1px solid var(--feldrahmen); font: inherit; }
.ceo-edit button { justify-self: start; min-height: 2.75rem; }
.ceo-edit :focus-visible, .ceo-result summary:focus-visible { outline: 3px solid var(--v3-accent); outline-offset: 2px; }
.ceo-analytics { margin-top: 1rem; }
.ceo-chart { display: block; width: 100%; height: min(18rem, 35vw); background: var(--papier); }
.ceo-chart polyline { fill: none; stroke: var(--v3-accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
/* CEO-Blick: zwei Spalten nur mit Platz, alle Werte umbrechbar. */
.ceo-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.ceo-stack { display: grid; gap: 1rem; min-width: 0; }
.ceo-card { background: var(--flaeche); border: 1px solid var(--strich); padding: 1.1rem; min-width: 0; overflow-wrap: anywhere; }
.ceo-card h2 { font-size: 1.2rem; margin: 0 0 .7rem; }
.ceo-card p, .ceo-card ul { margin: .3rem 0 .9rem; }
.ceo-projects { list-style: none; padding: 0; }
.ceo-projekt { border-top: 1px solid var(--strich); }
.ceo-projekt a { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; min-height: 3rem; padding: .65rem 0; text-decoration: none; }
.ceo-projekt a strong { color: var(--text); min-width: 7.5rem; }
.ceo-projekt a span:nth-child(2) { flex: 1 1 11rem; color: var(--leise); font-size: .85rem; }
.ceo-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1.5rem; margin: 0; }
.ceo-feld { border-top: 1px solid var(--strich); padding: .65rem 0; min-width: 0; overflow-wrap: anywhere; }
.ceo-feld dt { color: var(--leise); font-size: .82rem; }
.ceo-feld dd { margin: .15rem 0 0; font-weight: 600; }
@media (max-width: 760px) { .ceo-grid, .ceo-details { grid-template-columns: minmax(0, 1fr); } }
.ceo-card a:focus-visible, .ceo-projekt a:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
@media (max-width: 900px) {
  .schiene { grid-template-columns: 1fr auto; }
  .schiene-gruppe { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
  .schiene-fuss { grid-column: 2; grid-row: 1; }
  .ceo-actions { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .schiene { padding: .55rem .75rem; gap: .3rem; }
  .schiene-gruppe { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; max-width: calc(100vw - 1.5rem); }
  .schiene a.punkt { padding: .35rem .45rem; font-size: .78rem; min-height: 2.75rem; }
  .schiene-fuss > span { display: none; }
  .ceo-dashboard { padding: .8rem; }
  .ceo-command button { width: 100%; }
  .ceo-chart { height: 12rem; }
}


/* ====================================================================
   Lebensampel
   ==================================================================== */

.ampel-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; }
.ampel-karte {
  --farbe: var(--zart);
  background: var(--flaeche);
  border: 1px solid var(--strich);
  border-top: 6px solid var(--farbe);
  padding: 1.1rem;
  min-width: 0;
  overflow-wrap: anywhere;
}
.ampel-gruen { --farbe: var(--gut); }
.ampel-gelb { --farbe: var(--achtung); }
.ampel-rot { --farbe: var(--rost); }
.ampel-grau { --farbe: var(--zart); }
.ampel-offen { border-top-style: dashed; }
.ampel-karte header { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.ampel-karte h2 { font-size: 1.25rem; margin: 0; flex: 1 1 auto; }
.ampel-licht { width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--farbe); flex: none; }
.ampel-offen .ampel-licht { background: transparent; border: 3px solid var(--farbe); }
.ampel-wort { font-weight: 700; color: var(--farbe); font-size: 0.9rem; }
.ampel-wertung, .ampel-vorschlag { margin: 0.5rem 0 0; font-size: 0.92rem; }
.ampel-vorschlag { color: var(--leise); }
.ampel-signale { margin: 0.6rem 0 0; padding-left: 1.1rem; font-size: 0.88rem; color: var(--leise); }
.ampel-signale li { margin-bottom: 0.2rem; }
.ampel-verlauf { display: flex; align-items: center; gap: 0.25rem; margin: 0.7rem 0 0; font-size: 0.78rem; color: var(--leise); }
.ampel-verlauf i { width: 0.7rem; height: 0.7rem; border-radius: 50%; display: inline-block; background: var(--zart); }
.ampel-verlauf .punkt-gruen { background: var(--gut); }
.ampel-verlauf .punkt-gelb { background: var(--achtung); }
.ampel-verlauf .punkt-rot { background: var(--rost); }
.ampel-form { margin-top: 0.8rem; }
.ampel-form .knopfreihe { margin-top: 0; }
.ampel-wahl-gruen { border-color: var(--gut); }
.ampel-wahl-gelb { border-color: var(--achtung); }
.ampel-wahl-rot { border-color: var(--rost); }
@media (max-width: 760px) { .ampel-form .griff { flex: 1 1 45%; min-height: 2.75rem; } }

.ampel-legende { background: var(--flaeche); border: 1px solid var(--strich); padding: 1rem 1.1rem; margin-bottom: 1rem; }
.ampel-legende h2 { font-size: 1.05rem; margin: 0 0 0.6rem; }
.ampel-legende dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.8rem 1.4rem; margin: 0; }
/* die Farbe kommt aus der Klasse (.ampel-gruen usw.) */
.ampel-legende dl > div { border-left: 4px solid var(--farbe); padding-left: 0.7rem; min-width: 0; }
.ampel-legende dt { font-weight: 700; display: flex; align-items: center; gap: 0.45rem; }
.ampel-legende dt .ampel-licht { width: 0.9rem; height: 0.9rem; background: var(--farbe); }
.ampel-legende dd { margin: 0.2rem 0 0; font-size: 0.9rem; color: var(--leise); }
.ampel-legende p { margin: 0.8rem 0 0; font-size: 0.9rem; }
.ampel-signale-kopf { margin: 0.7rem 0 0; font-size: 0.85rem; font-weight: 600; }
.ampel-signale-kopf + .ampel-signale { margin-top: 0.2rem; }
.analyse-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; }
.analyse-karte { border-top: 1px solid var(--strich); padding-top: 0.7rem; min-width: 0; }
.analyse-karte h3 { font-size: 1.05rem; margin: 0; }
.analyse-kopf { margin: 0.2rem 0 0; font-weight: 700; }
.analyse-verlauf { margin: 0.1rem 0 0.4rem; font-size: 0.85rem; color: var(--leise); }
.analyse-bild { display: block; width: 100%; height: auto; }
.analyse-bild .gitter { stroke: var(--linie); stroke-width: 1; }
.analyse-bild .achse { fill: var(--leise); font-size: 9px; }
.analyse-bild .linie-offen { fill: none; stroke: var(--akzent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.analyse-bild .linie-ueber { fill: none; stroke: var(--rost); stroke-width: 2; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.analyse-bild .punkt-offen { fill: var(--akzent); }
.analyse-bild .punkt-ueber { fill: var(--rost); }
.analyse-bild .wert-offen { fill: var(--akzent); font-size: 11px; font-weight: 700; }
.analyse-bild .wert-ueber { fill: var(--rost); font-size: 11px; font-weight: 700; }
.analyse-legende { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; align-items: center; margin: 0.8rem 0 0; font-size: 0.85rem; color: var(--leise); }
.analyse-legende i { display: inline-block; width: 1.3rem; height: 0; border-top: 3px solid var(--akzent); vertical-align: middle; margin-right: 0.3rem; }
.analyse-legende .schl-ueber { border-top: 3px dashed var(--rost); }

/* Schneller Überblick */
.ampel-legende { padding: 0.6rem 1rem; }
.ampel-chips { display: flex; flex-wrap: wrap; gap: 0.3rem 1.4rem; margin: 0; font-weight: 600; font-size: 0.92rem; }
.ampel-chips span { display: inline-flex; align-items: center; gap: 0.4rem; --farbe: var(--zart); }
.ampel-chips .ampel-gruen { --farbe: var(--gut); } .ampel-chips .ampel-gelb { --farbe: var(--achtung); } .ampel-chips .ampel-rot { --farbe: var(--rost); }
.ampel-chips .ampel-licht { width: 0.85rem; height: 0.85rem; background: var(--farbe); display: inline-block; border-radius: 50%; }
.ampel-legende details, .ampel-mehr { margin-top: 0.5rem; }
.ampel-legende summary, .ampel-mehr summary { cursor: pointer; color: var(--ton); font-size: 0.85rem; font-weight: 600; }
.ampel-mehr .ampel-signale { margin-top: 0.4rem; }
.kurz-wartet, .befuellung { background: var(--flaeche); border: 1px solid var(--strich); padding: 1rem 1.1rem; }
.kurz-wartet h2, .befuellung h2 { font-size: 1.05rem; margin: 0 0 0.5rem; }
.kurz-wartet h2 span { background: var(--akzent); color: #fff; border-radius: 1rem; padding: 0.05rem 0.5rem; font-size: 0.8rem; margin-left: 0.3rem; }
.kurz-wartet ul, .befuellung ul { list-style: none; margin: 0; padding: 0; }
.kurz-wartet li a { display: grid; gap: 0.1rem; padding: 0.55rem 0; border-top: 1px solid var(--strich); text-decoration: none; color: var(--text); min-height: 2.75rem; }
.kurz-wartet li:first-child a { border-top: 0; }
.kurz-wartet li em { font-style: normal; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ton); font-weight: 700; }
.kurz-wartet li b { font-weight: 600; } .kurz-wartet li span { font-size: 0.85rem; color: var(--leise); }
.befuellung ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.4rem 1rem; }
.befuellung li { display: grid; grid-template-columns: 0.8rem 1fr; gap: 0 0.5rem; align-items: baseline; }
.befuellung li i { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--zart); display: block; }
.befuellung .feed-ok i { background: var(--gut); } .befuellung .feed-alt i { background: var(--achtung); } .befuellung .feed-keine i { background: transparent; border: 2px solid var(--rost); }
.befuellung li span { grid-column: 2; font-size: 0.85rem; color: var(--leise); }
.ceo-werkstatt { border: 1px solid var(--strich); background: var(--flaeche); padding: 0.8rem 1.1rem; }
.ceo-werkstatt > summary { cursor: pointer; font-weight: 700; }
.ceo-werkstatt[open] > summary { margin-bottom: 1rem; }
nav[aria-label="Weitere Ansichten"] { padding: 0.5rem clamp(1rem, 3vw, 2rem); font-size: 0.85rem; color: var(--leise); background: var(--flaeche); border-bottom: 1px solid var(--strich); }
nav[aria-label="Weitere Ansichten"] a { display: inline-block; padding: 0.2rem 0.35rem; }

/* Die Legende ist Nebensache: klein, unter der Ampel, ohne Kasten. */
.ampel-legende { background: transparent; border: 0; padding: 0.2rem 0 0; margin: -0.3rem 0 0; font-size: 0.8rem; color: var(--leise); }
.ampel-legende .ampel-chips { font-size: 0.8rem; font-weight: 500; gap: 0.2rem 1rem; }
.ampel-legende .ampel-chips .ampel-licht { width: 0.65rem; height: 0.65rem; }
.ampel-legende summary { font-size: 0.78rem; }
.ampel-legende dl { font-size: 0.85rem; }

/* Widerspruch: zwei Aussagen gegenüber */
.gegenueber { display: grid; gap: 0.4rem; margin: 0.2rem 0; }
.gegenueber p { margin: 0; padding: 0.5rem 0.7rem 0.5rem 2rem; position: relative; background: var(--flaeche); border: 1px solid var(--strich); }
.gegenueber i { position: absolute; left: 0.6rem; top: 0.5rem; font-style: normal; font-weight: 700; color: var(--ton); }

/* Lebensbuch */
.lb-kapitel { border-top: 1px solid var(--strich); padding: 0.6rem 0; }
.lb-kapitel > summary { cursor: pointer; font-weight: 700; font-size: 1.05rem; }
.lb-kapitel > summary span { background: var(--papier-dunkel); border-radius: 1rem; padding: 0.05rem 0.5rem; font-size: 0.78rem; font-weight: 600; margin-left: 0.3rem; }
.lb-liste { margin: 0.6rem 0 0.2rem; padding-left: 1.2rem; }
.lb-liste li { margin-bottom: 0.45rem; overflow-wrap: anywhere; }
.lb-art { display: block; font-size: 0.75rem; color: var(--leise); }
.lb-pruefen { border-left: 3px solid var(--achtung); padding-left: 0.5rem; margin-left: -0.6rem; }


/* ====================================================================
   Breite Register (Zweites Gehirn, Lebensbuch): Raster aus Karten
   ==================================================================== */

.breit .kopf > .bahn, .breit .tafel { max-width: 96rem; }
.breit .tafel { padding-inline: clamp(1rem, 3vw, 2.5rem); }
.gehirn-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr)); gap: 1.1rem; margin-top: 1.2rem; align-items: start; }
.gehirn-karte { background: var(--flaeche); border: 1px solid var(--strich); border-top: 3px solid var(--akzent); padding: 1.1rem 1.25rem; min-width: 0; overflow-wrap: anywhere; }
.gehirn-karte.breit { grid-column: 1 / -1; }
.gehirn-karte > h3 { margin: 0 0 0.6rem; font-size: 1.1rem; }
.gehirn-karte .block, .gehirn-karte .zeile { padding-inline: 0; }
.gehirn-karte .vorspann { margin-top: 0; }
.lk-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.8rem; margin-top: 0.8rem; }
.lk-kachel { --farbe: var(--zart); display: grid; gap: 0.3rem; align-content: start; padding: 0.8rem 0.9rem; background: var(--papier); border: 1px solid var(--strich); border-left: 5px solid var(--farbe); min-width: 0; }
.lk-gefuellt { --farbe: var(--gut); } .lk-duenn { --farbe: var(--achtung); } .lk-leer { --farbe: var(--rost); background: var(--flaeche); border-style: dashed; border-left-style: solid; }
.lk-zahl { font-family: Fraunces, Georgia, serif; font-size: 1.9rem; line-height: 1; color: var(--farbe); }
.lk-kachel b { font-weight: 600; }
.lk-status { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--farbe); font-weight: 700; }
.lk-frage { margin: 0.3rem 0 0; font-size: 0.82rem; color: var(--leise); }
.lb-spalten { column-width: 26rem; column-gap: 2.2rem; margin-top: 1rem; }
.lb-spalten .lb-kapitel { break-inside: avoid; background: var(--flaeche); border: 1px solid var(--strich); border-top: 3px solid var(--akzent); padding: 0.8rem 1rem; margin-bottom: 1.2rem; }

/* Feinschliff: schmale Schirme, Prüfstapel als zwei Spalten, lesbare Kartenarten */
.gehirn-raster { grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr)); }
.lk-raster { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }
.lb-spalten { column-width: min(26rem, 100%); }
.gehirn-karte .rueckfragen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(30rem, 100%), 1fr)); gap: 1rem; }
.gehirn-karte .rueckfrage { grid-template-columns: 1fr; gap: 0.35rem; padding: 0.9rem 1rem; border: 1px solid var(--strich); border-top: 3px solid var(--akzent-hell); background: var(--papier); align-items: start; }
.gehirn-karte .rueckfragen > .rueckfrage:first-child { padding-top: 0.9rem; }
.gehirn-karte .rueckfrage .leitzahl.wort { text-align: left; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-family: inherit; font-weight: 700; color: var(--ton); }
.gehirn-karte .rueckfrage-text { gap: 0.4rem; }


/* ====================================================================
   DESIGN 2 (05.10.2026) - "Klar": hell, ruhig, grosse Zahlen
   --------------------------------------------------------------------
   Wunsch: moderneres Layout, andere Farben, fuer den CEO seines Lebens
   leicht zu lesen, schnell zu bedienen, verstaendlich. Dieser Block steht
   bewusst am Ende und ueberschreibt nur Farben, Flaechen und Schrift;
   Aufbau und Inhalte bleiben. Rueckfall: /tmp-Kopie vor diesem Block bzw.
   den Block loeschen.
   ==================================================================== */

:root {
  --papier: #f3f5f9;
  --papier-dunkel: #e6eaf2;
  --flaeche: #ffffff;
  --text: #0f1b2d;
  --leise: #556379;
  --zart: #8793a6;
  --strich: #e1e6ef;
  --feldrahmen: #b7c0cf;
  --akzent: #2457d6;
  --akzent-dunkel: #1b43a8;
  --akzent-hell: #8fb0f5;
  --akzent-zart: #eaf0fe;
  --ton: #2457d6;
  --gut: #12805c;
  --gut-zart: #e3f5ed;
  --achtung: #b26a00;
  --achtung-zart: #fff3dc;
  --rost: #c8372d;
  --rost-zart: #fde9e7;
  --schiefer: #0f1b2d;
  --schiefer-hell: #eaf0fe;
  --v3-nav: #ffffff;
  --v3-nav-text: #0f1b2d;
  --v3-command: #eaf0fe;
  --v3-accent: #2457d6;
  --v3-border: #e1e6ef;
  --grund: var(--papier);
  --radius: 14px;
  --schatten: 0 1px 2px rgba(15, 27, 45, 0.05), 0 8px 24px rgba(15, 27, 45, 0.05);
}

body { background: var(--papier); color: var(--text); line-height: 1.55; }
a { color: var(--akzent); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--akzent-hell); outline-offset: 2px; border-radius: 6px; }

/* --- Schrift: eine Familie, fett statt Serife --- */
.anzeige, h1, h2, h3, .block-kopf .anzeige, .messwert strong, .leitzahl, .lk-zahl,
.marke b, .ceo-card h2 {
  font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: -0.015em;
}
h1.anzeige { font-weight: 700; font-size: clamp(1.7rem, 3.6vw, 2.35rem); line-height: 1.12; }
h2.anzeige, .block-kopf .anzeige { font-weight: 700; }
.leitzahl { font-weight: 700; }

/* --- Navigation: hell, als Pillen --- */
.schiene {
  background: #fff;
  color: var(--text);
  border-bottom: 1px solid var(--strich);
  box-shadow: 0 1px 0 rgba(15, 27, 45, 0.02), 0 6px 20px rgba(15, 27, 45, 0.04);
  position: sticky; top: 0; z-index: 30;
}
.schiene .marke, .schiene .marke b { color: var(--text); }
.schiene .marke span span { color: var(--leise); }
.schiene .marke i { background: var(--akzent); color: #fff; border-radius: 10px; }
.schiene a.punkt {
  color: var(--leise); border-radius: 999px; padding: 0.5rem 1rem; font-weight: 500;
  min-height: 2.6rem; border: 0;
}
.schiene a.punkt:hover { background: var(--papier); color: var(--text); }
.schiene a.punkt[aria-current] { background: var(--akzent-zart); color: var(--akzent-dunkel); font-weight: 700; }
.schiene a.punkt i { color: var(--akzent); }
.schiene .punkt-mehr { font-size: 0.85rem; }
.schiene-fuss, .schiene-fuss a, .schiene-fuss span { color: var(--leise); }
.schiene .abmelden, .schiene-fuss button {
  background: #fff; color: var(--text); border: 1px solid var(--feldrahmen); border-radius: 999px; padding: 0.35rem 0.9rem;
}
.pruefvermerk { background: #fff; border-bottom: 1px solid var(--strich); }
nav[aria-label="Weitere Ansichten"] { background: transparent; border: 0; padding: 0.6rem clamp(1rem, 3vw, 2.5rem) 0; font-size: 0.82rem; }
nav[aria-label="Weitere Ansichten"] a { color: var(--leise); background: #fff; border: 1px solid var(--strich); border-radius: 999px; padding: 0.2rem 0.75rem; text-decoration: none; margin-right: 0.3rem; }
nav[aria-label="Weitere Ansichten"] a:hover { color: var(--akzent-dunkel); border-color: var(--akzent-hell); }

/* --- Seitenkopf: kompakt und hell statt dunkler Platte --- */
.kopf { background: transparent; color: var(--text); }
.kopf .kennung { color: var(--akzent); }
.kopf .anzeige { color: var(--text); }
.kopf .vorspann { color: var(--leise); max-width: 46rem; }
.kopf > .bahn { padding-block: clamp(1.2rem, 2.6vw, 1.9rem) 0.4rem; gap: 0.4rem; }

/* --- Karten: weiss, weich, mit Schatten --- */
.ceo-card, .gehirn-karte, .kurz-wartet, .befuellung, .ceo-werkstatt, .ampel-karte, .ampel-legende,
.analyse-karte, .lb-spalten .lb-kapitel, .lk-kachel, .karte, .block-inhalt {
  border-radius: var(--radius);
}
.ceo-card, .gehirn-karte, .kurz-wartet, .befuellung, .ceo-werkstatt, .ampel-karte, .lb-spalten .lb-kapitel, .karte {
  background: #fff; border: 1px solid var(--strich); box-shadow: var(--schatten);
}
.gehirn-karte { border-top: 1px solid var(--strich); }
.lb-spalten .lb-kapitel { border-top: 1px solid var(--strich); }
.ceo-command-card { background: var(--akzent-zart); border-color: #c9d8fb; }
.ceo-step { color: var(--akzent); }
.ceo-analytics { box-shadow: var(--schatten); }
.analyse-karte { border: 1px solid var(--strich); padding: 0.9rem 1rem; background: #fff; }

/* --- Ampel: der wichtigste Block, gross und farbig --- */
.ampel-karte { --farbe: var(--zart); --tint: #eef1f6; border-top: 1px solid var(--strich); padding: 0; overflow: hidden; }
.ampel-gruen { --farbe: var(--gut); --tint: var(--gut-zart); }
.ampel-gelb { --farbe: var(--achtung); --tint: var(--achtung-zart); }
.ampel-rot { --farbe: var(--rost); --tint: var(--rost-zart); }
.ampel-grau { --farbe: var(--zart); --tint: #eef1f6; }
.ampel-offen { border-top-style: solid; }
.ampel-karte header { background: var(--tint); padding: 1rem 1.2rem; border-bottom: 1px solid var(--strich); }
.ampel-karte > :not(header) { margin-left: 1.2rem; margin-right: 1.2rem; }
.ampel-karte > :last-child { margin-bottom: 1.2rem; }
.ampel-karte h2 { font-size: 1.3rem; font-weight: 700; }
.ampel-licht { width: 1.7rem; height: 1.7rem; box-shadow: 0 0 0 4px color-mix(in srgb, var(--farbe) 22%, transparent); }
.ampel-wort { background: #fff; color: var(--farbe); border: 1px solid color-mix(in srgb, var(--farbe) 35%, white); border-radius: 999px; padding: 0.2rem 0.75rem; font-size: 0.82rem; }
.ampel-wertung { margin-top: 0.9rem; }
.ampel-form .griff { flex: 1 1 auto; }
.ampel-wahl-gruen { border-color: var(--gut); color: var(--gut); }
.ampel-wahl-gelb { border-color: var(--achtung); color: var(--achtung); }
.ampel-wahl-rot { border-color: var(--rost); color: var(--rost); }
.ampel-legende { background: transparent; border: 0; box-shadow: none; }

/* --- Zahlen und Kacheln --- */
.messwerte { gap: 0.8rem; background: transparent; border: 0; }
.messwert { background: #fff; border: 1px solid var(--strich); border-radius: var(--radius); box-shadow: var(--schatten); padding: 1rem 1.2rem; }
.messwert strong { font-weight: 700; font-size: 2.1rem; }
.messwert span { font-size: 0.82rem; }
.lk-kachel { background: #fff; border: 1px solid var(--strich); border-left-width: 1px; border-top: 5px solid var(--farbe); box-shadow: var(--schatten); }
.lk-leer { background: #fff; border-style: dashed; border-top-style: solid; }
.lk-zahl { font-weight: 700; font-size: 2.2rem; }

/* --- Bedienung: grosse, klare Knoepfe --- */
.griff {
  border-radius: 10px; border: 1px solid var(--feldrahmen); background: #fff; color: var(--text);
  min-height: 2.75rem; padding: 0.5rem 1rem; font-weight: 600; font-size: 0.92rem;
}
.griff:hover { background: var(--akzent-zart); border-color: var(--akzent-hell); color: var(--akzent-dunkel); }
.griff-haupt { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.griff-haupt:hover { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); color: #fff; }
.griff-mehr { color: var(--leise); }
.antwortform input[type="text"], .ceo-command textarea, .ceo-edit textarea, .ceo-edit select {
  border-radius: 10px; border: 1px solid var(--feldrahmen); background: #fff; min-height: 2.75rem;
}
.antwortform input[type="text"]:focus, .ceo-command textarea:focus { outline: 3px solid var(--akzent-hell); border-color: var(--akzent); }

/* --- Rueckmeldung, Wartet-Liste, Prueflisten --- */
.quittung { border-radius: 12px; margin: 0.8rem clamp(1rem, 3vw, 2.5rem) 0; border: 1px solid var(--strich); overflow: hidden; }
.kurz-wartet li a { border-radius: 10px; padding-inline: 0.5rem; margin-inline: -0.5rem; }
.kurz-wartet li a:hover { background: var(--akzent-zart); }
.kurz-wartet h2 span { background: var(--akzent); }
.gehirn-karte .rueckfrage { background: var(--papier); border-radius: 12px; border: 1px solid var(--strich); border-top: 1px solid var(--strich); }
.kommando-knopf { background: var(--akzent); box-shadow: 0 6px 18px rgba(36, 87, 214, 0.35); }
.kommando { border-radius: 16px; border: 0; box-shadow: 0 20px 60px rgba(15, 27, 45, 0.3); }
.analyse-bild .linie-offen { stroke: var(--akzent); }
.analyse-bild .punkt-offen, .analyse-bild .wert-offen { fill: var(--akzent); }
.befuellung .feed-ok i { background: var(--gut); }

/* --- Abstaende: etwas luftiger auf dem Schreibtisch, kompakt auf dem Handy --- */
.tafel { gap: 1.4rem; }
.ceo-dashboard { gap: 1.1rem; }
@media (max-width: 760px) {
  .schiene { position: static; }
  .schiene a.punkt { padding: 0.45rem 0.7rem; font-size: 0.85rem; }
  .ampel-karte header { padding: 0.85rem 1rem; }
  .ampel-karte > :not(header) { margin-left: 1rem; margin-right: 1rem; }
  h1.anzeige { font-size: 1.55rem; }
}

/* Feinschliff Design 2 */
.breit .kopf > .bahn, .breit .ceo-dashboard { max-width: 96rem; padding-inline: clamp(1rem, 3vw, 2.5rem); }
.breit .ceo-dashboard { width: 100%; margin-inline: auto; }
nav[aria-label="Weitere Ansichten"] { font-size: 0; }
nav[aria-label="Weitere Ansichten"] a { font-size: 0.82rem; }
.ampel-form .knopfreihe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.ampel-form .ampel-ja { flex: 1 1 100%; justify-content: center; min-height: 3rem; font-size: 1rem; }
.ampel-oder { font-size: 0.8rem; color: var(--leise); margin-right: 0.1rem; }
.ampel-form .ampel-wahl { flex: 0 1 6.5rem; min-width: 5rem; justify-content: center; font-weight: 700; }

.ks-zahl { margin: 0 0 0.4rem; font-size: 1rem; color: var(--leise); }
.ks-zahl b { font-size: 2.6rem; font-weight: 700; color: var(--akzent); line-height: 1; margin-right: 0.2rem; }

/* Warnband: Hermes kann nicht denken */
.hermes-warnung { background: var(--rost-zart); border: 1px solid #f3b9b3; border-left: 6px solid var(--rost); border-radius: var(--radius); padding: 1rem 1.25rem; color: #5b1710; }
.hermes-warnung h2 { margin: 0 0 0.4rem; font-size: 1.15rem; color: var(--rost); }
.hermes-warnung p { margin: 0.4rem 0; }
.hermes-warnung ul { margin: 0.3rem 0 0.3rem 1.1rem; padding: 0; font-size: 0.9rem; }

/* AU-Nummern: anklickbar, mit Kurztext */
a.au { font-weight: 600; text-decoration: none; border-bottom: 1px dotted var(--akzent); white-space: nowrap; }
a.au:hover { background: var(--akzent-zart); }
.au-liste { margin: 0.5rem 0 0.2rem; background: #fff; border: 1px solid var(--strich); border-radius: 10px; padding: 0.5rem 0.8rem; font-size: 0.86rem; }
.au-liste summary { cursor: pointer; font-weight: 600; color: var(--leise); font-size: 0.8rem; }
.au-liste ul { margin: 0.4rem 0 0; padding: 0; list-style: none; }
.au-liste li { padding: 0.3rem 0; border-top: 1px solid var(--strich); }
.au-liste li:first-child { border-top: 0; }
.au-liste li span { display: block; color: var(--text); }

.ampel-schritte { margin-top: 0.8rem; padding: 0.7rem 0.9rem; background: color-mix(in srgb, var(--farbe) 8%, white); border-radius: 10px; font-size: 0.9rem; }
.ampel-schritte b { display: block; margin-bottom: 0.2rem; color: var(--farbe); }
.ampel-schritte ul { margin: 0; padding-left: 1.1rem; }
.ampel-schritte li { margin: 0.15rem 0; }
.ampel-nichts { margin: 0.8rem 0 0; color: var(--gut); font-weight: 600; }

/* ====================================================================
   Heute: Dein Tag auf einen Blick
   ==================================================================== */
.breit .heute { max-width: 96rem; margin-inline: auto; width: 100%; padding: 0.4rem clamp(1rem, 3vw, 2.5rem) 2rem; display: grid; gap: 1.1rem; }
.heute-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; align-items: start; }
@media (max-width: 1100px) { .heute-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .heute-raster { grid-template-columns: minmax(0, 1fr); } }
.heute-karte { background: #fff; border: 1px solid var(--strich); border-radius: var(--radius); box-shadow: var(--schatten); padding: 1.1rem 1.25rem; min-width: 0; overflow-wrap: anywhere; }
.heute-karte.breit { grid-column: 1 / -1; }
.heute-karte header { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.7rem; flex-wrap: wrap; }
.heute-karte h2 { margin: 0; font-size: 1.1rem; font-weight: 700; flex: 1 1 auto; }
.heute-karte h3 { margin: 0.9rem 0 0.35rem; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--leise); font-weight: 700; }
.heute-karte header + h3, .heute-karte > h3:first-of-type { margin-top: 0; }
.heute-kennung { font-size: 0.78rem; font-weight: 700; color: var(--akzent); background: var(--akzent-zart); border-radius: 999px; padding: 0.1rem 0.6rem; }
.heute-mehr { font-size: 0.82rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.heute-leer { color: var(--leise); margin: 0; font-size: 0.92rem; }
/* Wetter */
.wetter-jetzt { display: flex; align-items: center; gap: 0.8rem; }
.wetter-zeichen { font-size: 2.6rem; line-height: 1; }
.wetter-grad { font-size: 3rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.wetter-text { color: var(--leise); font-size: 1rem; }
.wetter-heute { margin: 0.6rem 0 0.2rem; font-size: 0.92rem; }
.wetter-tage { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.25rem; }
.wetter-tage li { display: grid; grid-template-columns: 2.4rem 2rem 4.5rem 1fr; align-items: center; font-size: 0.9rem; padding: 0.25rem 0; border-top: 1px solid var(--strich); }
.wetter-tage em { font-style: normal; color: var(--leise); }
/* Termine */
.termine { list-style: none; margin: 0; padding: 0; }
.termine li { display: grid; grid-template-columns: 5.2rem 1fr; gap: 0.6rem; padding: 0.45rem 0; border-top: 1px solid var(--strich); }
.termine li:first-child { border-top: 0; }
.termin-zeit { font-weight: 700; font-size: 0.85rem; color: var(--akzent-dunkel); background: var(--akzent-zart); border-radius: 8px; padding: 0.15rem 0.5rem; text-align: center; align-self: start; }
.termin-titel { font-weight: 600; }
.termin-titel em { display: block; font-style: normal; font-weight: 400; color: var(--leise); font-size: 0.85rem; }
.termin-rest { color: var(--leise); font-size: 0.85rem; display: block !important; }
/* Das Wichtigste */
.wichtig { list-style: none; counter-reset: w; margin: 0; padding: 0; }
.wichtig li { counter-increment: w; border-top: 1px solid var(--strich); }
.wichtig li:first-child { border-top: 0; }
.wichtig a { display: grid; grid-template-columns: 2rem 1fr; column-gap: 0.7rem; padding: 0.7rem 0; text-decoration: none; color: var(--text); }
.wichtig a::before { content: counter(w); grid-row: 1 / span 3; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--akzent); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 0.9rem; }
.wichtig em { font-style: normal; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--akzent); font-weight: 700; }
.wichtig b { font-weight: 600; }
.wichtig span { font-size: 0.85rem; color: var(--leise); }
.wichtig a:hover b { text-decoration: underline; }
/* KI-Team */
.ki-status { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.6rem; padding: 0.55rem 0.8rem; border-radius: 10px; font-size: 0.9rem; }
.ki-status i { width: 0.8rem; height: 0.8rem; border-radius: 50%; flex: none; }
.ki-an { background: var(--gut-zart); } .ki-an i { background: var(--gut); }
.ki-aus { background: var(--rost-zart); color: #5b1710; } .ki-aus i { background: var(--rost); }
.ki-zahlen { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 0 0 0.4rem; }
.ki-zahlen a { flex: 1 1 8rem; background: var(--papier); border-radius: 10px; padding: 0.5rem 0.8rem; text-decoration: none; color: var(--text); font-size: 0.85rem; }
.ki-zahlen b { display: block; font-size: 1.6rem; line-height: 1.1; color: var(--akzent); }
.ki-zuletzt { list-style: none; margin: 0; padding: 0; }
.ki-zuletzt li { display: grid; grid-template-columns: 3rem 1fr; gap: 0.1rem 0.5rem; padding: 0.45rem 0; border-top: 1px solid var(--strich); font-size: 0.88rem; }
.ki-zuletzt li span { color: var(--akzent); font-weight: 700; grid-row: 1 / span 2; }
.ki-zuletzt li em { font-style: normal; color: var(--leise); font-size: 0.82rem; grid-column: 2; }
.ki-zuletzt li.achtung b { color: var(--rost); }
/* Vorhaben */
.vorhaben-summe { margin: 0 0 0.4rem; color: var(--leise); } .vorhaben-summe b { font-size: 1.6rem; color: var(--achtung); }
.vorhaben { list-style: none; margin: 0; padding: 0; }
.vorhaben li { display: grid; grid-template-columns: auto 1fr; gap: 0.1rem 0.6rem; padding: 0.55rem 0; border-top: 1px solid var(--strich); font-size: 0.9rem; }
.vorhaben li em { grid-column: 1 / -1; font-style: normal; color: var(--leise); font-size: 0.82rem; }
.chip { font-size: 0.72rem; font-weight: 700; border-radius: 999px; padding: 0.1rem 0.6rem; background: var(--papier-dunkel); color: var(--leise); align-self: start; }
.chip-gut { background: var(--gut-zart); color: var(--gut); } .chip-achtung { background: var(--achtung-zart); color: var(--achtung); }
/* Gehirn kurz */
.gehirn-kurz { margin: 0; display: grid; gap: 0.1rem; }
.gehirn-kurz div { display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 0.6rem; padding: 0.5rem 0; border-top: 1px solid var(--strich); align-items: baseline; }
.gehirn-kurz div:first-child { border-top: 0; }
.gehirn-kurz dt { font-size: 0.88rem; color: var(--leise); }
.gehirn-kurz dd { margin: 0; text-align: right; display: grid; }
.gehirn-kurz dd b { font-size: 1.3rem; line-height: 1.1; } .gehirn-kurz dd span { font-size: 0.78rem; color: var(--leise); }
/* Relevant */
.relevant-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); gap: 1.5rem; }
.relevant { list-style: none; margin: 0; padding: 0; }
.relevant li { display: grid; padding: 0.6rem 0; border-top: 1px solid var(--strich); }
.relevant li em { font-style: normal; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--akzent); font-weight: 700; }
.relevant li span { color: var(--leise); font-size: 0.86rem; }

.wetter-symbol { width: 2rem; height: 2.2rem; display: block; }
.wetter-symbol.gross { width: 3.4rem; height: 3.7rem; }
.wetter-symbol .wi-sonne { fill: #f5b301; } .wetter-symbol .wi-strahl { stroke: #f5b301; stroke-width: 2.2; stroke-linecap: round; }
.wetter-symbol .wi-wolke { fill: #b8c4d6; } .wetter-symbol .wi-nebel { stroke: #b8c4d6; stroke-width: 2.4; stroke-linecap: round; }
.wetter-symbol .wi-tropfen { stroke: var(--akzent); stroke-width: 2.4; stroke-linecap: round; }
.wetter-symbol .wi-flocke { fill: #7fa5e6; } .wetter-symbol .wi-blitz { fill: #f5b301; }
.wetter-tage li > span:nth-child(2) { display: grid; place-items: center; }


/* ====================================================================
   Werkstatt: Kacheln nach Thema
   ==================================================================== */
.werkstatt-gruppe header { margin-bottom: 0.7rem; }
.werkstatt-gruppe h2 { margin: 0; font-size: 1.15rem; font-weight: 700; }
.werkstatt-gruppe header p { margin: 0.1rem 0 0; color: var(--leise); font-size: 0.9rem; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); gap: 0.8rem; }
.kachel { --farbe: var(--akzent); display: grid; grid-template-columns: 2.6rem 1fr auto; align-items: center; gap: 0.8rem;
  background: #fff; border: 1px solid var(--strich); border-radius: var(--radius); box-shadow: var(--schatten);
  padding: 0.85rem 1rem; text-decoration: none; color: var(--text); min-height: 4.2rem; min-width: 0; }
.kachel:hover { border-color: var(--farbe); transform: translateY(-1px); }
.kachel:focus-visible { outline: 3px solid var(--akzent-hell); }
.kachel-icon { width: 2.6rem; height: 2.6rem; border-radius: 12px; background: color-mix(in srgb, var(--farbe) 14%, white);
  color: var(--farbe); font-weight: 700; font-size: 1.15rem; display: grid; place-items: center; }
.kachel-text { display: grid; min-width: 0; }
.kachel-text b { font-weight: 700; }
.kachel-text em { font-style: normal; color: var(--leise); font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kachel-zahl { background: var(--akzent); color: #fff; border-radius: 999px; min-width: 1.7rem; height: 1.7rem; display: grid; place-items: center; font-weight: 700; font-size: 0.85rem; padding: 0 0.5rem; }
.kachel-ansicht { --farbe: var(--akzent); } .kachel-leben { --farbe: #1f7a5a; } .kachel-wissen { --farbe: #7a3fc4; }
.kachel-team { --farbe: #c4631f; } .kachel-info { --farbe: #1f8a9c; } .kachel-technik { --farbe: #566379; } .kachel-weiteres { --farbe: #566379; }

.hermes-warnung details { margin: 0.4rem 0; font-size: 0.88rem; }
.hermes-warnung summary { cursor: pointer; font-weight: 600; color: var(--rost); }

/* Heute: Region (Hochrhein-Monitor) */
.heute-region .region{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.heute-region .region li{padding-left:10px;border-left:3px solid var(--linie,#d8dde6);display:grid;gap:2px}
.heute-region .region li span{font-size:.85em;color:var(--text-leise,#5b6575)}
.heute-region .region-stark{border-left-color:#d9822b}
.heute-region .region-auffaellig{border-left-color:#2457d6}

/* Heute: Finanz-Radar */
.heute-finanzen .finanzen{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:8px}
.heute-finanzen .finanzen li{display:flex;justify-content:space-between;gap:12px;padding-left:10px;border-left:3px solid #c5ccd8}
.heute-finanzen .finanzen span{font-size:.88em;color:#5b6575;text-align:right}
.heute-finanzen .fin-rot{border-left-color:#c9342b}
.heute-finanzen .fin-gelb{border-left-color:#d9a21b}
.heute-finanzen .fin-ok{border-left-color:#2e9d5b}

/* Heute: Fokuszeiten und Familie */
.heute-fokus .fokus,.heute-familie .familie{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:6px}
.heute-fokus .fokus li{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline}
.heute-fokus .fokus b{min-width:5.5em}
.heute-fokus .fokus span{font-size:.85em;padding:1px 8px;border-radius:99px}
.heute-fokus .fokus-frei{background:#e3f4ea;color:#1d6b3f}
.heute-fokus .fokus-belegt{background:#eceff4;color:#5b6575}
.heute-familie .familie li{display:flex;gap:10px}

/* Heute: Branchen-News, Post und Fristen */
.heute-branche .branche,.heute-post .postfristen{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.heute-branche .branche li{display:grid;gap:1px}
.heute-branche .branche em{font-style:normal;font-size:.8em;color:#5b6575}
.heute-post .postfristen li{display:flex;justify-content:space-between;gap:12px;padding-left:10px;border-left:3px solid #c5ccd8}
.heute-post .postfristen span{font-size:.88em;color:#5b6575;text-align:right}
.heute-post .post-rot{border-left-color:#c9342b}
.heute-post .post-gelb{border-left-color:#d9a21b}
.heute-post .post-ok{border-left-color:#2e9d5b}

/* Heute: geparkte Vorhaben */
.vorhaben-geparkt{margin-top:8px;opacity:.8}
.vorhaben-geparkt summary{cursor:pointer;font-size:.88em;color:#5b6575}

/* Fokus-Zeile (Heute und Überblick) */
.fokus-zeile{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;margin:0 0 12px;padding:10px 14px;border-radius:10px;background:#eaf0fd;color:#1b3f9c}
.fokus-zeile span{font-size:.88em;color:#42506b}

/* Heute: Morgenkarte */
.heute-morgen .morgen{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.heute-morgen .morgen li{display:grid;grid-template-columns:8.5em 1fr;gap:12px;align-items:baseline}
.heute-morgen .morgen em{font-style:normal;font-size:.8em;text-transform:uppercase;letter-spacing:.04em;color:#2457d6}
.heute-morgen .morgen b{font-weight:600;font-size:1.05em}
@media(max-width:600px){.heute-morgen .morgen li{grid-template-columns:1fr;gap:0}}

/* Heute: Entscheidungen */
.heute-entscheidungen .entscheidungen{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:8px}
.heute-entscheidungen .entscheidungen li{padding-left:10px;border-left:3px solid #c5ccd8;display:grid;gap:1px}
.heute-entscheidungen .entscheidungen span{font-size:.86em;color:#5b6575}
.heute-entscheidungen .ent-rot{border-left-color:#c9342b}
.heute-entscheidungen .ent-gelb{border-left-color:#d9a21b}
.heute-entscheidungen .ent-offen{border-left-color:#2457d6}

/* Wochenrückblick */
.woche-zahlen{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:10px}
.woche-zahlen li{display:grid;grid-template-columns:9em 7em 1fr;gap:12px;align-items:baseline}
.woche-zahlen em{font-style:normal;font-size:.82em;text-transform:uppercase;letter-spacing:.04em;color:#2457d6}
.woche-zahlen b{font-size:1.15em}
.woche-zahlen span{color:#5b6575}
.woche-urteil{margin:0;padding:10px 14px;border-radius:10px;background:#eaf0fd}
.woche-urteil-leer{background:#f1f3f7;color:#5b6575}
@media(max-width:600px){.woche-zahlen li{grid-template-columns:1fr;gap:0}}

/* Gehirn: Frag dein Gehirn */
.gehirn-fragen{list-style:none;margin:12px 0 8px;padding:0;display:grid;gap:12px}
.gehirn-fragen li{display:grid;gap:4px}
.gehirn-antwort{margin:0;padding:8px 12px;border-radius:8px;background:#eef1f6;color:#2b3445;white-space:pre-wrap}
.gehirn-wartet{background:#f6f2e6;color:#6b5a1f}

/* Korrektur: Namen in Finanz-Radar und Post nicht umbrechen, Text darunter wenn eng */
.heute-finanzen .finanzen li,.heute-post .postfristen li{display:grid;grid-template-columns:minmax(5.2em,max-content) 1fr;align-items:baseline}
.heute-finanzen .finanzen b,.heute-post .postfristen b{white-space:nowrap}
.heute-finanzen .finanzen span,.heute-post .postfristen span{text-align:left}

/* Heute: Geld im Blick, Kurven, Abendhinweis */
.fin-geld{margin:6px 0 2px;display:grid;gap:2px}.fin-geld span{font-size:.88em;color:#5b6575}
.kurve{display:block;width:100%;height:28px;margin:0 0 8px}
.kurve polyline{fill:none;stroke:#2457d6;stroke-width:1.5;vector-effect:non-scaling-stroke}
.abend-hinweis{margin:0 0 12px;padding:8px 14px;border-radius:10px;background:#f1f3f7;color:#5b6575;font-size:.9em}

/* Korrektur: lange Zusätze in der Gehirn-Kurzkarte dürfen die Beschriftung nicht zusammenquetschen */
.gehirn-kurz div { grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr); }
.gehirn-kurz dd span { overflow-wrap: anywhere; }
.woche-zahlen li { grid-template-columns: 9em 11em 1fr; }