/* KI-Radar: Gestaltung aus Phase 4 (Endfassung 15.10.2026, Richtungsvertrag .impeccable/surfaces/uebersicht.md).
   Heller Arbeitsplatz in einem dunklen Rahmen. Farben, Abstände und Größen als Variablen. */

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/onest-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/onest-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;
  /* Rahmen: Kopf- und Seitenleiste */
  --rahmen: #0A1B34;
  --rahmen-fg: #EEF3FA;
  --rahmen-dim: #A3B5CD;
  --rahmen-linie: rgba(255, 255, 255, .12);
  --rahmen-feld: rgba(255, 255, 255, .07);
  --leiste-dim: #98ABC6;
  --leiste-linie: rgba(255, 255, 255, .09);
  --leiste-aktiv: #182F54;
  /* Verläufe für die leichte 3D-Wirkung: oben etwas heller, unten etwas dunkler als die Grundfarbe */
  --rahmen-oben: #132C52;
  --rahmen-unten: #081629;
  --leiste-oben: #0E2344;
  --leiste-unten: #061224;
  --aktiv-oben: #20406F;
  --aktiv-unten: #142A4C;
  --akzent-oben: #0F808C;
  --akzent-unten: #065A63;
  --feld-oben: #FFFFFF;
  --feld-unten: #F5F8FB;
  --knopf-oben: #FFFFFF;
  --knopf-unten: #EDF1F6;
  --kante-hell: rgba(255, 255, 255, .95);
  --eingabe-schatten: inset 0 1px 2px rgba(20, 36, 60, .07);
  --leuchten: #4FD1C5;
  /* Kennzahl-Karten */
  --kachel: #102848;
  --kachel-rand: #1B3961;
  --kachel-dim: #B3C4DA;
  --kachel-hell: #4FD1C5;
  /* Arbeitsfläche */
  --grund: #FFFFFF;
  --verlauf: linear-gradient(180deg, #F4F8FC 0, #FFFFFF 320px);
  --feld: #FAFBFC;
  --feld-rand: #E3EAF3;
  --eingabe: #FFFFFF;
  --seg: #EDF2F8;
  --text: #13213A;
  --text2: #2B3A52;
  --grau: #4E5D72;
  --linie: #E2E8EE;
  --linie2: #C7D2DE;
  --akzent: #0A7682;
  --akzent-hover: #08616B;
  --akzent-fg: #FFFFFF;
  --akzent-weich: #DDF0F1;
  --akzent-text: #0A7682;
  --spaet: #BE1F33;
  --spaet-weich: #FBE7EA;
  --jetzt: #F09100;
  --jetzt-text: #9A4F00;
  --jetzt-weich: #FDF0DC;
  --begutachtung: #E8A057;
  --begutachtung-text: #8A4B0F;
  --begutachtung-weich: #FBEBDA;
  --zs-balken: #D3E2F1;
  --zs-frist: #102848;
  --zs-ueber: #F07D87;
  --zs-lauf-oben: var(--c3); --zs-lauf-unten: var(--c1);
  /* Kalender (Rückmeldung 19.10.2026): je Art ein eigener Ton, Fristen gefüllt, Teamrunden nur umrandet */
  --k-frist: #102848; --k-frist-text: #FFFFFF; --k-ms: #6A55C8; --k-ms-weich: #EEEBFA; --k-ms-text: #4A3A9E; --k-runde: #7A8799;
  /* Entscheidungen in der Teamrunde: gleiche Helligkeit und Sättigung wie das Türkis, nur der Farbton wandert */
  --verfolgen: #0A824C; --verfolgen-weich: #DDF1E8; --verfolgen-oben: #0F8C54; --verfolgen-unten: #066339;
  --verwerfen: #820A14; --verwerfen-weich: #F1DDE0; --verwerfen-oben: #96141F; --verwerfen-unten: #63060E;
  --ki-schatten: 0 1px 2px rgba(20, 36, 60, .06), 0 18px 40px -14px rgba(20, 36, 60, .32);
  --ok: #1E9E6E;
  --ok-weich: #E1F4EC;
  --ok-text: #066339; /* Text auf ok-weich, damit „fertig“ lesbar bleibt (Prüfung 30.10.2026: --ok hatte 2,97 : 1) */
  --c1: #24446E;
  --c2: #0A7682;
  --c3: #4C6EA3;
  --c4: #102848;
  --knopf: #FFFFFF;
  --knopf-rand: #D3DCE7;
  --fokus: #0A7682;
  --auswahl: #CDEBEE;
  /* Maße */
  --rund: 14px;
  --rund-klein: 8px;
  --schatten: 0 1px 2px rgba(20, 36, 60, .05), 0 14px 34px -12px rgba(20, 36, 60, .16);
  --schatten-hoch: 0 2px 6px rgba(20, 36, 60, .08), 0 22px 48px rgba(20, 36, 60, .16);
  --kopf-hoehe: 58px;
  --leiste-breite: 248px;
  --leiste-schmal: 64px;
  --rand-seite: 28px;
  --schrift: "Onest", "Segoe UI", system-ui, sans-serif;
  --halbfett: 600;
  --schnell: 160ms;
  --weich: cubic-bezier(.16, 1, .3, 1);
}

:root[data-thema="dunkel"] {
  color-scheme: dark;
  --rahmen: #071325;
  --rahmen-linie: rgba(255, 255, 255, .08);
  --leiste-linie: rgba(255, 255, 255, .07);
  --leiste-aktiv: #142A4C;
  --rahmen-oben: #0D1D38;
  --rahmen-unten: #050D1A;
  --leiste-oben: #0A1830;
  --leiste-unten: #040B17;
  --aktiv-oben: #1C3A66;
  --aktiv-unten: #11264A;
  --akzent-oben: #0E7C88;
  --akzent-unten: #05535C;
  --feld-oben: #14233D;
  --feld-unten: #0E1A2F;
  --knopf-oben: #1C2D4E;
  --knopf-unten: #13213B;
  --kante-hell: rgba(255, 255, 255, .06);
  --eingabe-schatten: inset 0 1px 3px rgba(0, 0, 0, .35);
  --kachel: #15335F;
  --kachel-rand: #244A80;
  --grund: #0A1424;
  --verlauf: radial-gradient(900px 520px at 85% -10%, rgba(70, 120, 200, .20), transparent 62%), linear-gradient(180deg, #0C1729 0, #0A1424 320px);
  --feld: #111E35;
  --feld-rand: rgba(140, 175, 230, .16);
  --eingabe: #0D1930;
  --seg: #18284A;
  --text: #E6ECF5;
  --text2: #C5D0DF;
  --grau: #9DABC3;
  --linie: #203252;
  --linie2: #31476E;
  --akzent: #0B7A86;
  --akzent-hover: #0D8C99;
  --akzent-weich: #123C48;
  --akzent-text: #63CFD6;
  --spaet: #FF7D8C;
  --spaet-weich: #3A1D29;
  --ok: #4CC38A;
  --ok-weich: #12352B;
  --ok-text: var(--ok);
  --jetzt-text: #F5B04A;
  --jetzt-weich: #3A2A12;
  --begutachtung-text: #F1C391;
  --begutachtung-weich: #3A2A16;
  --zs-balken: #2A4570;
  --zs-frist: #C9D6EA;
  --zs-ueber: #B9434F;
  --zs-lauf-oben: #8FB0E2; --zs-lauf-unten: #6890CF;  /* hebt sich wie im Hellen klar von der Vorbereitungszeit ab */
  --k-frist: #9DB1D1; --k-frist-text: #0A1424; --k-ms: #A493F2; --k-ms-weich: #2A2452; --k-ms-text: #CDC3FF; --k-runde: #8D9BB3;
  --verfolgen: #63D6A2; --verfolgen-weich: #124831; --verfolgen-oben: #0E8851; --verfolgen-unten: #055C35;
  --verwerfen: #D6636E; --verwerfen-weich: #481216; --verwerfen-oben: #8E1420; --verwerfen-unten: #5C0510;
  --ki-schatten: 0 1px 2px rgba(0, 0, 0, .4), 0 20px 44px -12px rgba(0, 0, 0, .6);
  --c1: #426BAA;
  --c3: #4E6FA8;
  --c4: #3A5F99;
  --knopf: #14223E;
  --knopf-rand: #2E4570;
  --fokus: #63CFD6;
  --auswahl: #1E4A5A;
  --schatten: 0 1px 2px rgba(0, 0, 0, .35), 0 16px 36px -12px rgba(0, 0, 0, .55);
  --schatten-hoch: 0 2px 6px rgba(0, 0, 0, .4), 0 22px 48px rgba(0, 0, 0, .45);
}

/* Grundlagen */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Lange Wörter („Elektroinstallationstechnik“) brechen um, statt in die Nachbarspalte zu laufen (Rückmeldung 03.11.2026).
   Beschriftungen in schmalen Spalten trennen nach deutscher Silbentrennung (lang="de"), alles andere bricht notfalls im Wort. */
p, li, dt, dd, td, th, h1, h2, h3, h4, figcaption, blockquote, summary, label, small, b, strong { overflow-wrap: break-word; }
dt, th { hyphens: auto; -webkit-hyphens: auto; }
body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text);
  background: var(--grund);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--auswahl); color: var(--text); }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; border-radius: 4px; }
a { color: var(--akzent-text); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { font-weight: var(--halbfett); line-height: 1.2; text-wrap: balance; margin: 0; }
h1 { font-size: 28px; letter-spacing: -.015em; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
p { margin: 0 0 12px; max-width: 72ch; }
svg.i { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.i.klein { width: 15px; height: 15px; }
.unsichtbar { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.zum-inhalt { position: absolute; left: 12px; top: -48px; z-index: 50; background: var(--akzent); color: var(--akzent-fg); padding: 8px 14px; border-radius: var(--rund-klein); font-weight: var(--halbfett); }
.zum-inhalt:focus { top: 12px; }
html { scrollbar-color: var(--linie2) transparent; }

/* Rahmen der App */
.app { display: grid; grid-template-columns: var(--leiste-breite) minmax(0, 1fr); grid-template-rows: var(--kopf-hoehe) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.kopf {
  grid-column: 1 / -1; position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: var(--leiste-breite) minmax(0, 1fr) minmax(240px, 460px) minmax(0, 1fr); align-items: center;
  background: linear-gradient(180deg, var(--rahmen-oben) 0%, var(--rahmen) 55%, var(--rahmen-unten) 100%);
  color: var(--rahmen-fg); height: var(--kopf-hoehe);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 1px 0 rgba(0, 0, 0, .3), 0 8px 22px -6px rgba(6, 16, 32, .35);
}
.kopf::after {
  /* feine Leuchtlinie an der Unterkante */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(79, 209, 197, 0) 12%, rgba(79, 209, 197, .45) 50%, rgba(79, 209, 197, 0) 88%, transparent 100%);
  background-size: 200% 100%; background-position: 50% 0;
}
.marke { display: flex; align-items: center; gap: 10px; padding: 0 20px; color: inherit; text-decoration: none; }
.marke .logo { height: 27px; width: auto; display: block; overflow: visible; }
.umgebung-marke { padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .16); color: var(--rahmen-fg); font-size: 12px; font-weight: var(--halbfett); letter-spacing: .02em; white-space: nowrap; }
@media (max-width: 560px) { .umgebung-marke { display: none; } } /* am Handy reicht der Fenstertitel, sonst rutscht das Profilbild aus dem Bild */
.suche {
  grid-column: 3; display: flex; align-items: center; gap: 10px; border-radius: 10px; padding: 0 12px; color: var(--rahmen-dim); height: 36px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .24), rgba(255, 255, 255, .035));
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4), 0 1px 0 rgba(255, 255, 255, .05);
  transition: border-color var(--schnell) var(--weich), box-shadow var(--schnell) var(--weich);
}
.suche:focus-within { border-color: rgba(79, 209, 197, .55); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4), 0 0 0 3px rgba(79, 209, 197, .12); }
.suche input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--rahmen-fg); font: inherit; font-size: 13.5px; height: 100%; outline: none; }
.suche input::placeholder { color: var(--rahmen-dim); opacity: 1; }
.suche kbd { font: var(--halbfett) 12px var(--schrift); border: 1px solid var(--rahmen-linie); border-radius: 5px; padding: 1px 6px; white-space: nowrap; }
.aktionen { grid-column: 4; display: flex; align-items: center; gap: 6px; justify-content: flex-end; padding-right: 16px; }
.neu-knopf {
  display: inline-flex; align-items: center; gap: 6px; color: #fff; border-radius: var(--rund-klein); padding: 0 13px; height: 34px;
  font-weight: var(--halbfett); font-size: 13.5px; cursor: pointer; list-style: none;
  background: linear-gradient(180deg, var(--akzent-oben), var(--akzent-unten));
  border: 1px solid rgba(0, 0, 0, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -1px 0 rgba(0, 0, 0, .2), 0 2px 8px rgba(0, 0, 0, .35);
  transition: filter var(--schnell) var(--weich);
}
.neu-knopf::-webkit-details-marker { display: none; }
.neu-knopf:hover { filter: brightness(1.08); }
.rund { position: relative; width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; color: var(--rahmen-fg); background: transparent; border: 1px solid transparent; cursor: pointer; text-decoration: none; list-style: none; transition: background var(--schnell) var(--weich), border-color var(--schnell) var(--weich); }
.rund::-webkit-details-marker { display: none; }
.rund:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .025)); border-color: rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }
.rund .zahl { position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px; border-radius: 9px; background: #D12F45; color: #fff; font-size: 11.5px; font-weight: 700; display: grid; place-items: center; padding: 0 4px; }
.menue-knopf { display: none; }
.av {
  --av-farbe: var(--c1);
  width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; flex: none; letter-spacing: .02em;
  background: radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .26), transparent 58%), linear-gradient(165deg, var(--av-farbe), color-mix(in srgb, var(--av-farbe) 58%, #000));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(0, 0, 0, .22);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
}
.av.f1 { --av-farbe: var(--c1); } .av.f2 { --av-farbe: var(--c2); } .av.f3 { --av-farbe: var(--c3); } .av.f4 { --av-farbe: var(--c4); }
.kopf .av { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .22), 0 2px 6px rgba(0, 0, 0, .45); }
.av.klein { width: 24px; height: 24px; font-size: 10.5px; }
.av.gross { width: 40px; height: 40px; font-size: 14px; }

/* Aufklappmenüs (details) */
.aufklapp { position: relative; }
.aufklapp > summary { list-style: none; }
.aufklapp > summary::-webkit-details-marker { display: none; }
.aufklapp-inhalt {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 220px;
  background: linear-gradient(180deg, var(--feld-oben), var(--feld-unten)); color: var(--text); border: 1px solid var(--feld-rand); border-radius: 12px;
  box-shadow: inset 0 1px 0 var(--kante-hell), var(--schatten-hoch); padding: 6px;
  display: grid; gap: 2px; animation: aufklappen 140ms var(--weich);
}
.aufklapp-inhalt a, .aufklapp-inhalt button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border-radius: var(--rund-klein);
  color: var(--text); text-decoration: none; background: none; border: 0; font: inherit; font-size: 14px; cursor: pointer;
}
.aufklapp-inhalt a:hover, .aufklapp-inhalt button:hover { background: var(--seg); }
.aufklapp-inhalt .kopfzeile { padding: 8px 10px 6px; border-bottom: 1px solid var(--linie); margin-bottom: 4px; }
.aufklapp-inhalt .kopfzeile b { display: block; font-weight: var(--halbfett); }
.aufklapp-inhalt .kopfzeile small { color: var(--grau); font-size: 12.5px; }
.aufklapp-inhalt .gefahr { color: var(--spaet); }
@keyframes aufklappen { from { opacity: 0; transform: translateY(-4px); } }

/* Seitenleiste */
.leiste {
  background: linear-gradient(180deg, var(--leiste-oben) 0%, var(--rahmen) 38%, var(--leiste-unten) 100%);
  color: var(--rahmen-fg); border-right: 1px solid rgba(0, 0, 0, .3); box-shadow: inset -1px 0 0 rgba(255, 255, 255, .05);
  padding: 16px 12px; display: flex; flex-direction: column; gap: 2px;
  position: sticky; top: var(--kopf-hoehe); height: calc(100vh - var(--kopf-hoehe)); height: calc(100dvh - var(--kopf-hoehe)); overflow-x: hidden; overflow-y: auto;
  scrollbar-color: rgba(255, 255, 255, .18) transparent;
}
.leiste a { position: relative; display: flex; align-items: center; gap: 11px; padding: 7px 10px; border-radius: var(--rund-klein); font-size: 14px; color: var(--rahmen-fg); text-decoration: none; white-space: nowrap; overflow: hidden; border: 1px solid transparent; transition: background var(--schnell) var(--weich), border-color var(--schnell) var(--weich); }
.leiste a svg.i { transition: color var(--schnell) var(--weich), transform var(--schnell) var(--weich); }
.leiste a:hover { background: linear-gradient(90deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015)); }
.leiste a:hover svg.i { transform: translateX(1px); }
.leiste a[aria-current="page"] {
  color: #fff; font-weight: var(--halbfett);
  background: linear-gradient(180deg, var(--aktiv-oben), var(--aktiv-unten));
  border-color: rgba(79, 209, 197, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 3px 10px -2px rgba(0, 0, 0, .45);
}
.leiste a[aria-current="page"] svg.i { color: var(--leuchten); filter: drop-shadow(0 0 5px rgba(79, 209, 197, .45)); }
.leiste .z {
  margin-left: auto; font-size: 12px; font-weight: 700; color: #052A30; border-radius: 9px; padding: 0 7px; line-height: 18px;
  background: linear-gradient(180deg, #74E6DC, #3DBDB1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 1px 3px rgba(0, 0, 0, .35);
}
.leiste .trenn { height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .13) 30%, rgba(255, 255, 255, .13) 70%, transparent); margin: 12px 6px; }
.leiste .gk { display: flex; align-items: center; justify-content: space-between; padding: 2px 10px 6px; font-size: 13px; font-weight: var(--halbfett); color: var(--leiste-dim); }
.leiste .gk a { padding: 4px; color: var(--leiste-dim); }
.leiste > * { flex-shrink: 0; }  /* sonst werden die Seiten oben gestaucht, wenn alle Gruppen offen sind */
.leiste .gk-knopf { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--leiste-dim); cursor: pointer; }
.leiste .gk-knopf:hover { color: var(--rahmen-fg); background: rgba(255, 255, 255, .06); }
.leiste .gk-knopf:focus-visible { outline: 2px solid var(--leuchten); outline-offset: 0; }
.leiste .leer { padding: 2px 10px; font-size: 13px; line-height: 1.45; color: var(--leiste-dim); margin: 0; }
/* Unsere Anträge in der Seitenleiste (N1 bis N3) */
.leiste .gk-knoepfe { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.leiste .gk > .wort { white-space: nowrap; }
.leiste .gruppieren { position: relative; margin: 0; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; color: var(--leiste-dim); }
.leiste .gruppieren:hover, .leiste .gruppieren:focus-within { color: var(--rahmen-fg); background: rgba(255, 255, 255, .06); }
.leiste .gruppieren select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 14px; }
.leiste .gruppieren option { color: var(--text); background: var(--grund); }
.leiste .ag { margin: 0 0 4px; }
.leiste .ag > summary, .leiste .ag-mehr > summary { list-style: none; display: flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 12.5px; color: var(--leiste-dim); cursor: pointer; border-radius: 6px; white-space: nowrap; overflow: hidden; }
.leiste .ag > summary::-webkit-details-marker, .leiste .ag-mehr > summary::-webkit-details-marker { display: none; }
.leiste .ag > summary:hover, .leiste .ag-mehr > summary:hover { color: var(--rahmen-fg); }
.leiste .ag > summary svg { transform: rotate(-90deg); transition: transform var(--schnell) var(--weich); }
.leiste .ag[open] > summary svg { transform: none; }
.leiste .ag-mehr > summary { padding-left: 30px; }
/* Zeile eines Antrags: Punkt (Menü für Status und Stufe), Kürzel als Link über die ganze Zeile, Rest oder Tag der Einreichung, Person */
.leiste .az { position: relative; display: flex; gap: 8px; align-items: center; padding: 2px 10px 2px 6px; border-radius: var(--rund-klein); font-size: 13.5px; border: 1px solid transparent; transition: background var(--schnell) var(--weich), border-color var(--schnell) var(--weich), opacity var(--schnell) var(--weich); }
.leiste .az[hidden] { display: none; }
.leiste .az:hover { background: linear-gradient(90deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015)); }
.leiste .az.aktiv { background: linear-gradient(180deg, var(--aktiv-oben), var(--aktiv-unten)); border-color: rgba(79, 209, 197, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 3px 10px -2px rgba(0, 0, 0, .45); }
.leiste .az a.az-link { position: static; flex: 1 1 auto; min-width: 0; padding: 4px 0; border: 0; background: none; box-shadow: none; display: block; color: var(--rahmen-fg); font-size: 13.5px; }
.leiste .az a.az-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.leiste .az a.az-link:focus-visible { outline: none; }
.leiste .az:has(a.az-link:focus-visible) { outline: 2px solid var(--leuchten); outline-offset: -1px; }
.leiste .az .kz { font-weight: var(--halbfett); overflow: hidden; text-overflow: ellipsis; display: block; }
.leiste .az.aktiv .kz { color: #fff; }
.leiste .az .punkt-knopf, .leiste .az .rest-knopf, .leiste .az .neu-zahl, .leiste .az .person-knopf { position: relative; z-index: 1; }
.person-knopf { flex: none; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; margin-right: -2px; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.person-knopf:hover .av, .person-knopf[aria-expanded="true"] .av { box-shadow: 0 0 0 2px rgba(255, 255, 255, .28); }
.person-knopf:focus-visible { outline: 2px solid var(--leuchten); outline-offset: 0; }
.av.niemand { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); text-shadow: none; }
.av.niemand svg.i { width: 11px; height: 11px; stroke: var(--leiste-dim); stroke-width: 2; }
.az-menue .av.niemand { background: var(--seg); box-shadow: inset 0 0 0 1px var(--linie2); }
.az-menue .av.niemand svg.i { stroke: var(--grau); }
.punkt-knopf { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border: 0; border-radius: 6px; background: none; cursor: pointer; padding: 0; }
.punkt-knopf:hover, .punkt-knopf[aria-expanded="true"] { background: rgba(255, 255, 255, .1); }
.punkt-knopf:focus-visible { outline: 2px solid var(--leuchten); outline-offset: 0; }
.punkt { display: inline-block; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--leiste-dim); }
.az.st-in_vorbereitung .punkt, .punkt.st-in_vorbereitung { background: color-mix(in srgb, var(--leuchten) 82%, var(--leiste-dim)); box-shadow: 0 0 0 2px rgba(79, 209, 197, .08); }
.az.st-eingereicht .punkt, .punkt.st-eingereicht { background: color-mix(in srgb, var(--begutachtung) 82%, var(--leiste-dim)); box-shadow: 0 0 0 2px rgba(232, 160, 87, .08); }
.az.st-bewilligt .punkt, .punkt.st-bewilligt { background: #4CC38A; }
.az.st-abgelehnt .punkt, .az.st-zurueckgezogen .punkt, .punkt.st-abgelehnt { background: #7D8DA6; }
.leiste .az .rest { flex: none; width: 44px; text-align: right; font-size: 12px; color: var(--leiste-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rest-knopf { border: 0; background: none; padding: 2px 4px; margin: 0 -4px; border-radius: 5px; font: inherit; cursor: pointer; }
.leiste .az .rest-knopf { font-size: 12px; color: var(--leiste-dim); margin: 0; padding: 2px 0; }
.leiste .az .rest-knopf:hover { color: var(--rahmen-fg); }
.rest-knopf:hover { background: rgba(255, 255, 255, .1); text-decoration: underline dotted; text-underline-offset: 3px; }
.rest-knopf:focus-visible { outline: 2px solid var(--leuchten); outline-offset: 0; }
.leiste .az .neu-zahl { flex: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; color: #06232A; background: var(--leuchten); box-shadow: 0 0 0 2px rgba(79, 209, 197, .16); font-variant-numeric: tabular-nums; }
.av.mini { width: 19px; height: 19px; font-size: 8.5px; letter-spacing: 0; }
.leiste .az[draggable="true"] { cursor: grab; }
.leiste .az.zieht { opacity: .45; }
.leiste .az.verschoben { opacity: .6; }
.leiste .ag.ziel { border-radius: 10px; background: rgba(79, 209, 197, .07); box-shadow: inset 0 0 0 1px rgba(79, 209, 197, .45); }
.leiste .ag.ziel > summary { color: var(--rahmen-fg); }
.leiste .ag[hidden], .leiste .ag-mehr[hidden], .leiste .ag-leer[hidden] { display: none; }
.leiste .ag-leer { margin: 0; padding: 4px 10px 6px 34px; font-size: 12.5px; color: var(--leiste-dim); opacity: .8; }
/* Suche über den Gruppen */
.az-suche-feld { position: relative; margin: 0 4px 8px; }
.az-suche-feld svg.i { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--leiste-dim); pointer-events: none; }
.az-suche-feld input { width: 100%; font: inherit; font-size: 13px; color: var(--rahmen-fg); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); border-radius: 8px; padding: 6px 10px 6px 30px; min-height: 32px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); }
.az-suche-feld input::placeholder { color: var(--leiste-dim); opacity: 1; }
.az-suche-feld input:focus { outline: none; border-color: rgba(79, 209, 197, .6); box-shadow: 0 0 0 3px rgba(79, 209, 197, .15); }
@media (min-width: 901px) { .leiste-schmal .az-suche-feld { display: none; } }
/* Menü am Punkt und Datum der Einreichung: hell wie alle Aufklappmenüs, neben der Leiste */
.az-menue { position: fixed; z-index: 60; min-width: 220px; padding: 6px; display: grid; gap: 2px; color: var(--text);
  background: linear-gradient(180deg, var(--feld-oben), var(--feld-unten)); border: 1px solid var(--feld-rand); border-radius: 12px; box-shadow: inset 0 1px 0 var(--kante-hell), var(--schatten-hoch); animation: aufklappen 140ms var(--weich); }
.az-menue[hidden] { display: none; }
.az-menue .kopfzeile { margin: 0; padding: 6px 10px 6px; border-bottom: 1px solid var(--linie); font-size: 14px; }
.az-menue form { display: grid; gap: 1px; margin: 0; }
.az-abschnitt { display: block; padding: 8px 10px 3px; font-size: 12px; color: var(--grau); font-weight: var(--halbfett); }
.az-menue button[role="menuitemradio"] { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 7px 10px; border: 0; border-radius: var(--rund-klein); background: none; font: inherit; font-size: 14px; color: var(--text); cursor: pointer; }
.az-menue button[role="menuitemradio"]:hover, .az-menue button[role="menuitemradio"]:focus-visible { background: var(--seg); outline: none; }
.az-menue button[aria-checked="true"] { font-weight: var(--halbfett); background: var(--akzent-weich); color: var(--akzent-text); }
.az-menue button[name="stufe"] svg.i { visibility: hidden; }
.az-menue button[name="stufe"][aria-checked="true"] svg.i { visibility: visible; }
.az-menue .punkt { width: 9px; height: 9px; }
.az-menue.az-datum { min-width: 240px; padding: 12px; }
.az-menue.az-personen { max-height: min(420px, calc(100dvh - 24px)); overflow-y: auto; }
.az-menue.az-personen button[aria-checked="true"] .av { box-shadow: 0 0 0 2px var(--akzent); }
.az-menue.az-datum .knoepfe { justify-content: flex-end; }
@media (min-width: 901px) { .leiste-schmal .leiste .ag, .leiste-schmal .leiste .gruppieren { display: none; } }
.leiste .unten { margin-top: auto; padding-top: 12px; display: grid; gap: 2px; }
.leiste .unten .trenn { margin: 8px 6px; }
.leiste .einklappen {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 7px 10px; border-radius: var(--rund-klein); border: 1px solid transparent;
  background: none; color: var(--leiste-dim); font: inherit; font-size: 13.5px; text-align: left; white-space: nowrap; overflow: hidden; cursor: pointer;
  transition: background var(--schnell) var(--weich), color var(--schnell) var(--weich);
}
.leiste .einklappen:hover { color: var(--rahmen-fg); background: linear-gradient(90deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015)); }

/* Eingeklappte Seitenleiste (ab 901 px Breite): nur Symbole, der Inhalt rückt nach links.
   Die Symbole bleiben dabei an ihrem Platz, die Namen werden abgeschnitten und blenden aus. */
@media (min-width: 901px) {
  .app { transition: grid-template-columns 260ms var(--weich); }
  .app.leiste-schmal { grid-template-columns: var(--leiste-schmal) minmax(0, 1fr); }
  .leiste .wort { transition: opacity 180ms var(--weich); }
  .leiste .leer { width: calc(var(--leiste-breite) - 24px); }
  .leiste-schmal .leiste .wort { opacity: 0; }
  .leiste-schmal .leiste .gk { justify-content: center; padding: 2px 0 6px; }
  .leiste-schmal .leiste .gk .wort, .leiste-schmal .leiste .leer { display: none; }
  .leiste-schmal .leiste .z { position: absolute; top: 3px; right: 3px; min-width: 13px; padding: 0 3px; font-size: 9px; line-height: 13px; text-align: center; box-shadow: 0 0 0 1.5px var(--leiste-oben); }
}
/* Kurzinfo neben der schmalen Leiste, von radar.js gesetzt */
.leiste-tipp {
  position: fixed; z-index: 45; transform: translateY(-50%); pointer-events: none;
  padding: 6px 11px; border-radius: 9px; font-size: 13px; font-weight: var(--halbfett); white-space: nowrap; color: var(--text);
  background: linear-gradient(180deg, var(--feld-oben), var(--feld-unten)); border: 1px solid var(--feld-rand);
  box-shadow: inset 0 1px 0 var(--kante-hell), var(--ki-schatten);
  animation: tipp 140ms var(--weich);
}
.leiste-tipp::before {
  content: ""; position: absolute; left: -5px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; transform: rotate(45deg);
  background: var(--feld-oben); border-left: 1px solid var(--feld-rand); border-bottom: 1px solid var(--feld-rand);
}
@keyframes tipp { from { opacity: 0; transform: translate(-4px, -50%); } }

/* Inhalt */
.inhalt { padding: 24px var(--rand-seite) 48px; min-width: 0; background: var(--verlauf); display: grid; gap: 18px; align-content: start; }
.inhalt > * { min-width: 0; }
/* Offene Menüs liegen über den folgenden Blöcken (jeder Block ist durch die Aufbau-Animation eine eigene Ebene) */
.inhalt > *:has(details[open]) { position: relative; z-index: 10; }
.titel { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
.titel .u { color: var(--grau); font-size: 14px; }
.titel .rechts { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.einleitung { color: var(--text2); margin: -8px 0 0; }
.feld {
  background: linear-gradient(180deg, var(--feld-oben), var(--feld-unten)); border: 1px solid var(--feld-rand); border-radius: var(--rund);
  box-shadow: inset 0 1px 0 var(--kante-hell), var(--schatten); padding: 18px 20px; min-width: 0;
}
.feld-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 14px; }
.feld-kopf .u { color: var(--grau); font-size: 13px; }
.feld-kopf .rechts { margin-left: auto; display: flex; gap: 8px; }
.schmal { max-width: 640px; }

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 0 14px;
  border: 1px solid var(--knopf-rand); border-radius: var(--rund-klein); color: var(--text);
  background: linear-gradient(180deg, var(--knopf-oben), var(--knopf-unten));
  box-shadow: inset 0 1px 0 var(--kante-hell), 0 1px 2px rgba(20, 36, 60, .08);
  font: var(--halbfett) 13.5px var(--schrift); text-decoration: none; cursor: pointer; white-space: nowrap;
  position: relative; overflow: hidden; isolation: isolate;
  transition: filter var(--schnell) var(--weich), border-color var(--schnell) var(--weich), transform var(--schnell) var(--weich), box-shadow var(--schnell) var(--weich);
}
.knopf:hover { border-color: var(--linie2); filter: brightness(.985); }
.knopf:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(20, 36, 60, .14); }
.knopf.haupt {
  color: #fff; border-color: rgba(0, 0, 0, .18);
  background: linear-gradient(180deg, var(--akzent-oben), var(--akzent-unten));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(0, 0, 0, .15), 0 1px 2px rgba(5, 60, 66, .25), 0 8px 18px -8px rgba(6, 90, 99, .6);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
}
.knopf.haupt:hover { filter: brightness(1.08); border-color: rgba(0, 0, 0, .18); }
.knopf.gefahr {
  color: #fff; border-color: rgba(0, 0, 0, .18);
  background: linear-gradient(180deg, #CF3045, #A11A2C);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(90, 10, 20, .25), 0 8px 18px -8px rgba(161, 26, 44, .55);
}
.knopf.gefahr:hover { filter: brightness(1.06); }
/* Lichtkante, die beim Überfahren über den Hauptknopf läuft */
.knopf.haupt::after, .knopf.gefahr::after, .neu-knopf::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .26) 48%, transparent 64%);
  transform: translateX(-130%);
}
.knopf.haupt:hover::after, .knopf.gefahr:hover::after, .neu-knopf:hover::after { transform: translateX(130%); transition: transform 760ms var(--weich); }
.neu-knopf { position: relative; overflow: hidden; isolation: isolate; }
.neu-knopf::after { background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .12) 50%, transparent 62%); }
.knopf.gross { min-height: 44px; padding: 0 20px; font-size: 15px; }
.knopf.breit { width: 100%; }
.knopf:disabled, .knopf[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.textknopf { background: none; border: 0; padding: 0; font: inherit; color: var(--akzent-text); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Formulare */
.formular { display: grid; gap: 18px; }
.formular .zeile2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.eingabe { display: grid; gap: 6px; }
.eingabe > label, .eingabe > legend, .eingabe > .label { font-weight: var(--halbfett); font-size: 13.5px; color: var(--text); padding: 0; }
.eingabe input[type="text"], .eingabe input[type="email"], .eingabe input[type="search"], .eingabe input[type="password"], .eingabe textarea, .eingabe select {
  width: 100%; font: inherit; font-size: 15px; color: var(--text); background: var(--eingabe);
  border: 1px solid var(--knopf-rand); border-radius: 10px; padding: 10px 12px; min-height: 44px; box-shadow: var(--eingabe-schatten);
  transition: border-color var(--schnell) var(--weich), box-shadow var(--schnell) var(--weich);
}
.eingabe textarea { min-height: 88px; resize: vertical; line-height: 1.5; }
.eingabe input:hover, .eingabe textarea:hover, .eingabe select:hover { border-color: var(--linie2); }
.eingabe input:focus, .eingabe textarea:focus, .eingabe select:focus { outline: none; border-color: var(--akzent); box-shadow: var(--eingabe-schatten), 0 0 0 3px var(--akzent-weich); }
.eingabe ::placeholder { color: var(--grau); opacity: .85; }
.eingabe .hilfe { font-size: 13px; color: var(--grau); margin: 0; }
.eingabe .fehlertext { font-size: 13px; color: var(--spaet); font-weight: var(--halbfett); margin: 0; display: flex; gap: 6px; align-items: center; }
.eingabe.hat-fehler input, .eingabe.hat-fehler textarea { border-color: var(--spaet); }
.eingabe.hat-fehler input:focus, .eingabe.hat-fehler textarea:focus { box-shadow: 0 0 0 3px var(--spaet-weich); }
fieldset.eingabe { border: 0; margin: 0; padding: 0; min-width: 0; }
.wahl { display: grid; gap: 8px; }
.wahl label {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--knopf-rand); border-radius: 10px;
  background: var(--eingabe); cursor: pointer; font-size: 14.5px; transition: border-color var(--schnell) var(--weich), background var(--schnell) var(--weich);
}
.wahl label:hover { border-color: var(--linie2); }
.wahl label { box-shadow: var(--eingabe-schatten); }
.wahl label:has(input:checked) {
  border-color: var(--akzent); background: linear-gradient(180deg, var(--akzent-weich), color-mix(in srgb, var(--akzent-weich) 72%, var(--eingabe)));
  box-shadow: inset 0 1px 0 var(--kante-hell), 0 0 0 3px color-mix(in srgb, var(--akzent-weich) 55%, transparent);
}
.wahl input[type="radio"] {
  appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin: 0; border-radius: 50%;
  border: 1.5px solid var(--linie2); background: var(--eingabe); display: grid; place-items: center; cursor: pointer;
  transition: border-color var(--schnell) var(--weich);
}
.wahl input[type="radio"]::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--akzent-text); transform: scale(0); transition: transform var(--schnell) var(--weich); }
.wahl input[type="radio"]:checked { border-color: var(--akzent-text); }
.wahl input[type="radio"]:checked::after { transform: scale(1); }
.wahl input[type="radio"]:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.formular .unterfeld[hidden] { display: none; }
.formular .knoepfe { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formfehler { background: var(--spaet-weich); color: var(--spaet); border-radius: 10px; padding: 10px 14px; font-weight: var(--halbfett); font-size: 14px; margin: 0; }

/* Meldungen nach einer Aktion */
.meldungen { display: grid; gap: 8px; }
.meldung { display: flex; gap: 10px; align-items: flex-start; border-radius: 12px; padding: 11px 14px; font-size: 14px; border: 1px solid transparent; animation: einblenden 220ms var(--weich); }
.meldung.erfolg { background: var(--ok-weich); color: var(--text); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.meldung.erfolg svg { color: var(--ok); }
.meldung.fehler { background: var(--spaet-weich); color: var(--text); border-color: color-mix(in srgb, var(--spaet) 35%, transparent); }
.meldung.fehler svg { color: var(--spaet); }
@keyframes einblenden { from { opacity: 0; transform: translateY(-4px); } }

/* Tabellen */
.tabelle-rahmen { position: relative; overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
@media (min-width: 901px) { .tabelle-rahmen { overflow: visible; } } /* breit passt jede Tabelle, Menüs in Zeilen werden nicht abgeschnitten */ /* relative: auch unsichtbare Beschriftungen bleiben im Rahmen */
table.tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabelle th { text-align: left; font-size: 12.5px; font-weight: var(--halbfett); color: var(--grau); padding: 0 12px 10px; white-space: nowrap; }
.tabelle td { padding: 11px 12px; border-top: 1px solid var(--linie); vertical-align: middle; }
.tabelle tr:hover td { background: color-mix(in srgb, var(--seg) 55%, transparent); }
.tabelle .person { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.tabelle .person b { font-weight: var(--halbfett); display: block; }
.tabelle .person small, .tabelle .zweizeilig small { display: block; color: var(--grau); font-size: 12.5px; overflow-wrap: anywhere; }
.tabelle .zweizeilig { min-width: 160px; }
.tabelle .rechts { text-align: right; }
.tabelle .gedimmt { color: var(--grau); }

/* Kennzeichen */
.chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 1px 9px; font-size: 12.5px; font-weight: var(--halbfett); background: var(--seg); color: var(--text2); white-space: nowrap; }
.chip { box-shadow: inset 0 1px 0 var(--kante-hell); }
.chip.inhaber { background: linear-gradient(180deg, #1C3B68, #0C213F); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(0, 0, 0, .2); }
.chip.admin { background: linear-gradient(180deg, color-mix(in srgb, var(--akzent-weich) 60%, #fff), var(--akzent-weich)); color: var(--akzent-text); }
:root[data-thema="dunkel"] .chip.admin { background: linear-gradient(180deg, #17505C, #0F3A45); }
.zustand { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; white-space: nowrap; }
.zustand::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--grau); }
.zustand.aktiv::before { background: var(--ok); }
.zustand.eingeladen::before, .zustand.freigegeben::before { background: var(--jetzt); }
.zustand.gesperrt { color: var(--spaet); }
.zustand.gesperrt::before { background: var(--spaet); }

/* Filterleiste */
.filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 14px; }
.filter .eingabe { min-width: 180px; }
.filter .eingabe.suche-feld { flex: 1 1 240px; }
.filter .eingabe input, .filter .eingabe select { min-height: 38px; padding: 7px 10px; font-size: 14px; }
.filter .eingabe > label { font-size: 12.5px; color: var(--grau); }

/* Zeilenmenü */
.zeilenmenue > summary { width: 34px; height: 34px; border-radius: var(--rund-klein); display: grid; place-items: center; cursor: pointer; color: var(--grau); margin-left: auto; }
.zeilenmenue > summary:hover { background: var(--seg); color: var(--text); }
.zeilenmenue .aufklapp-inhalt { min-width: 240px; }
.zeilenmenue form { margin: 0; }

/* Anfragen */
.anfrage { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 18px; align-items: center; padding: 14px 0; border-top: 1px solid var(--linie); }
.anfrage:first-of-type { border-top: 0; padding-top: 4px; }
.anfrage b { font-weight: var(--halbfett); }
.anfrage .daten { color: var(--grau); font-size: 13px; margin: 2px 0 0; }
.anfrage blockquote { margin: 8px 0 0; color: var(--text2); font-size: 14px; max-width: 70ch; }
.anfrage .knoepfe { display: flex; gap: 8px; }

/* Dialoge */
dialog.dialog {
  border: 1px solid var(--feld-rand); border-radius: 16px; padding: 0; width: min(460px, calc(100vw - 32px));
  background: linear-gradient(180deg, var(--feld-oben), var(--feld-unten)); color: var(--text); box-shadow: inset 0 1px 0 var(--kante-hell), var(--schatten-hoch);
}
dialog.dialog::backdrop { background: rgba(7, 19, 37, .55); }
dialog.dialog[open] { animation: aufgehen 200ms var(--weich); }
.dialog .dialog-inhalt { padding: 22px 22px 18px; display: grid; gap: 14px; }
.dialog .dialog-knoepfe { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding: 14px 22px 18px; border-top: 1px solid var(--linie); }
@keyframes aufgehen { from { opacity: 0; transform: translateY(8px) scale(.985); } }

/* Leerer Zustand und Platzhalter für spätere Bauabschnitte */
.leer-feld { display: grid; gap: 6px; justify-items: start; padding: 28px 24px; }
.leer-feld p { color: var(--text2); margin: 0; }
.bald { display: grid; gap: 10px; padding: 28px; }
.bald p { margin: 0; color: var(--text2); }
.knoepfe-reihe { display: flex; flex-wrap: wrap; gap: 8px; }

/* Aufrufe: gemeinsame Zeichen (Bauabschnitt 2) */
.kz { font-weight: var(--halbfett); letter-spacing: .01em; white-space: nowrap; }
.ampel { display: inline-flex; align-items: center; gap: 7px; font-weight: var(--halbfett); white-space: nowrap; }
.ampel::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--grau); }
.ampel.a-ueberfaellig { color: var(--spaet); } .ampel.a-ueberfaellig::before { background: var(--spaet); box-shadow: 0 0 0 2px color-mix(in srgb, var(--spaet) 14%, transparent); }
.ampel.a-jetzt { color: var(--jetzt-text); } .ampel.a-jetzt::before { background: var(--jetzt); box-shadow: 0 0 0 2px color-mix(in srgb, var(--jetzt) 16%, transparent); }
.ampel.a-spaeter { color: var(--text2); font-weight: 500; } .ampel.a-spaeter::before { background: transparent; border: 1.5px solid var(--linie2); }
.ampel.a-laeuft { color: var(--text); } .ampel.a-laeuft::before { background: var(--c1); border-radius: 2px; }
.ampel.a-laufend { color: var(--grau); font-weight: 500; } .ampel.a-laufend::before { background: transparent; border: 1.5px dashed var(--linie2); }
.abstand { display: block; font-size: 12.5px; font-weight: var(--halbfett); margin-top: 2px; }
.abstand.a-ueberfaellig { color: var(--spaet); } .abstand.a-jetzt { color: var(--jetzt-text); }
.status { display: inline-flex; align-items: center; border-radius: 999px; padding: 1px 10px; font-size: 12.5px; font-weight: var(--halbfett); white-space: nowrap; background: var(--seg); color: var(--text2); box-shadow: inset 0 1px 0 var(--kante-hell); }
.status.s-vorgeschlagen { background: var(--akzent-weich); color: var(--akzent-text); }
.status.s-beobachten { color: var(--grau); }
.status.s-in_vorbereitung { background: linear-gradient(180deg, #1C3B68, #0C213F); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16); }
.status.s-eingereicht { background: var(--begutachtung-weich); color: var(--begutachtung-text); box-shadow: inset 0 1px 0 var(--kante-hell), inset 0 0 0 1px color-mix(in srgb, var(--begutachtung) 35%, transparent); }
.status.s-bewilligt { background: var(--ok-weich); color: var(--ok); }
.status.s-abgelehnt { background: var(--spaet-weich); color: var(--spaet); }
.status.s-verworfen { color: var(--grau); text-decoration: line-through; text-decoration-thickness: 1px; }
.relevanz { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--halbfett); }
.relevanz::before { content: ""; width: 14px; height: 8px; border-radius: 2px; background: linear-gradient(90deg, currentColor 0 33%, transparent 33% 36%, var(--rel-2, currentColor) 36% 66%, transparent 66% 69%, var(--rel-3, currentColor) 69%); }
.relevanz.r-hoch { color: var(--akzent-text); }
.relevanz.r-mittel { color: var(--text2); --rel-3: var(--linie2); }
.relevanz.r-niedrig { color: var(--grau); --rel-2: var(--linie2); --rel-3: var(--linie2); font-weight: 500; }
.neu-chip { background: linear-gradient(180deg, var(--akzent-oben), var(--akzent-unten)); color: #fff; }
.person-klein { display: inline-flex; align-items: center; gap: 7px; }
.gedimmt-text { color: var(--text2); }
.eng { margin: 0; }
/* Kurzinfo: helle Karte mit Pfeil zum Element, gegliedert in Kopf, Titel und Zeilen mit Bezeichnung und Wert */
.kurzinfo {
  position: fixed; z-index: 60; pointer-events: none; max-width: 320px;
  padding: 9px 12px; border-radius: 11px; font-size: 13px; line-height: 1.45; color: var(--text);
  background: linear-gradient(180deg, var(--feld-oben), var(--feld-unten)); border: 1px solid var(--feld-rand);
  box-shadow: inset 0 1px 0 var(--kante-hell), var(--ki-schatten);
  animation: kurzinfo 140ms var(--weich);
}
.kurzinfo::after {
  content: ""; position: absolute; left: var(--pfeil, 50%); bottom: -6px; width: 10px; height: 10px; margin-left: -5px;
  background: var(--feld-unten); border-right: 1px solid var(--feld-rand); border-bottom: 1px solid var(--feld-rand); transform: rotate(45deg);
}
.kurzinfo.unten::after { bottom: auto; top: -6px; background: var(--feld-oben); border: 0; border-left: 1px solid var(--feld-rand); border-top: 1px solid var(--feld-rand); }
.kurzinfo p { margin: 0; }
.kurzinfo.einfach { color: var(--text2); max-width: 280px; }
.kurzinfo.gegliedert { width: 300px; padding: 11px 14px 12px; }
.kurzinfo.gegliedert::before { content: ""; position: absolute; left: 14px; top: -1px; width: 28px; height: 2px; border-radius: 0 0 2px 2px; background: linear-gradient(90deg, var(--akzent-oben), var(--leuchten)); }
.kurzinfo .ki-kopf { font-weight: var(--halbfett); font-size: 13px; letter-spacing: .02em; color: var(--akzent-text); }
.kurzinfo .ki-unter { margin-top: 2px; font-weight: 500; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kurzinfo .ki-zeilen { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin: 9px 0 0; padding-top: 9px; border-top: 1px solid var(--linie); }
.kurzinfo .ki-zeilen dt { font-size: 11.5px; color: var(--grau); text-transform: uppercase; letter-spacing: .06em; padding-top: 1px; }
.kurzinfo .ki-zeilen dd { margin: 0; font-weight: var(--halbfett); color: var(--text); font-variant-numeric: tabular-nums; }
.kurzinfo .ki-zeilen dd.ton-ueberfaellig { color: var(--spaet); }
.kurzinfo .ki-zeilen dd.ton-jetzt { color: var(--jetzt-text); }
@keyframes kurzinfo { from { opacity: 0; transform: translateY(3px); } }

/* Steckbrief (D1 bis D7) */
.steck-kopf { display: grid; gap: 6px; }
.steck-titel { max-width: 920px; text-wrap: balance; }
.steck-titel h1 { display: inline; }
.steck-titel .kz-stift { display: inline-grid; vertical-align: 3px; margin: 0 6px 0 -6px; }
.steck-titel .chip { vertical-align: 5px; margin-left: 10px; }
.steck-titel.lang h1 { font-size: 23px; }
@media (max-width: 560px) { .steck-titel.lang h1 { font-size: 19px; } }
.steck-kopf .u { color: var(--grau); font-size: 14px; margin: 0; }
.steck-kopf .knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.eigenschaften dl { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 18px; margin: 0; }
.eigenschaften dt { font-size: 12.5px; color: var(--grau); font-weight: var(--halbfett); margin-bottom: 5px; }
.eigenschaften dd { margin: 0; font-size: 14.5px; min-width: 0; }
.eigenschaften dd small { display: block; color: var(--grau); font-size: 12.5px; margin-top: 2px; }
.eigenschaften .ampel { white-space: normal; align-items: baseline; }
.eigenschaften .ampel::before { transform: translateY(-1px); }
.steck-raster { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.steck-raster .spalte { display: grid; gap: 18px; min-width: 0; }
.eng-form textarea { min-height: 60px; }
dl.zeilen { margin: 0; display: grid; }
dl.zeilen > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--linie); }
dl.zeilen > div:first-child { border-top: 0; padding-top: 0; }
dl.zeilen dt { color: var(--grau); font-size: 13.5px; }
dl.zeilen dd { margin: 0; }
dl.zeilen dd small { display: block; color: var(--grau); font-size: 12.5px; margin-top: 2px; }
dl.zeilen dd.mit-knopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.eingabe input[type="number"] { width: 100%; font: inherit; font-size: 15px; color: var(--text); background: var(--eingabe); border: 1px solid var(--knopf-rand); border-radius: 10px; padding: 10px 12px; min-height: 44px; box-shadow: var(--eingabe-schatten); }
.eingabe input[type="number"]:focus { outline: none; border-color: var(--akzent); box-shadow: var(--eingabe-schatten), 0 0 0 3px var(--akzent-weich); }
.aktion-zelle { width: 1%; white-space: nowrap; text-align: right; }
.rund-klein { width: 30px; height: 30px; display: inline-grid; place-items: center; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--grau); cursor: pointer; transition: background var(--schnell) var(--weich), color var(--schnell) var(--weich), border-color var(--schnell) var(--weich); }
.rund-klein:hover { background: var(--spaet-weich); color: var(--spaet); border-color: color-mix(in srgb, var(--spaet) 25%, transparent); }
.feld h3 { font-size: 14px; margin: 0 0 8px; }
.notizen { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--linie); display: grid; gap: 10px; }
.notizen h3 { margin: 0; }
.eng-form { gap: 10px; }
.notiz-eintrag { display: grid; gap: 4px; }
.notiz-eintrag .notiz-kopf { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; }
.notiz-eintrag .notiz-kopf time { color: var(--grau); }
.notiz-eintrag .text { margin: 0 0 0 32px; color: var(--text2); }
[data-lang] { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lang-oeffnen { margin: 2px 0 0 32px; font-size: 13px; justify-self: start; }
.vorschlag .lang-oeffnen { margin-left: 0; }
dialog.dialog.text-gross { width: min(720px, calc(100vw - 32px)); }
.text-gross .gross-text { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--text); white-space: pre-line; overflow-wrap: anywhere; max-height: 60vh; overflow-y: auto; }
/* Von Menschen eingetragene Texte: lange Wörter und Links brechen um, statt die Karte zu sprengen */
.notiz-eintrag .text, .begruendung, .vorschlag blockquote, .vorschlag .ideen li, ol.verlauf li, .feld textarea { overflow-wrap: anywhere; }
.gesamt { margin: 0 0 12px; color: var(--text2); }
.gesamt b { font-size: 26px; font-weight: var(--halbfett); color: var(--text); margin-right: 2px; }
.dimensionen { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.dimensionen li { display: grid; grid-template-columns: 130px minmax(0, 1fr) 90px; gap: 12px; align-items: center; font-size: 14px; }
.dimensionen .wert { text-align: right; color: var(--text2); font-size: 13px; }
.balken { height: 8px; border-radius: 4px; background: var(--seg); overflow: hidden; box-shadow: inset 0 1px 2px rgba(20, 36, 60, .08); }
.balken i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--c1), var(--c3)); }
.begruendung { color: var(--text2); font-size: 14px; }
.gruende { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.gruende li { background: var(--seg); border-radius: 999px; padding: 2px 10px; font-size: 12.5px; }
.eigene > summary { cursor: pointer; margin-bottom: 12px; display: inline-block; }
.wahl.reihe { display: flex; flex-wrap: wrap; }
.wahl.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.wahl.zwei label { padding: 7px 10px; font-size: 14px; }
@media (max-width: 560px) { .wahl.zwei { grid-template-columns: minmax(0, 1fr); } }
ol.verlauf { list-style: none; margin: 0; padding: 0; display: grid; }
ol.verlauf li { position: relative; padding: 7px 0 7px 20px; font-size: 13.5px; color: var(--text2); border-left: 1px solid var(--linie); margin-left: 4px; }
ol.verlauf li::before { content: ""; position: absolute; left: -5px; top: 13px; width: 9px; height: 9px; border-radius: 50%; background: var(--grund); border: 2px solid var(--linie2); }
ol.verlauf li:first-child::before { border-color: var(--akzent); }
ol.verlauf time { color: var(--grau); }
@media (max-width: 1250px) { .eigenschaften dl { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .steck-raster { grid-template-columns: minmax(0, 1fr); }
  .steck-raster .spalte { display: contents; }
  .steck-raster .o-1 { order: 1; } .steck-raster .o-2 { order: 2; } .steck-raster .o-3 { order: 3; }
  .steck-raster .o-4 { order: 4; } .steck-raster .o-5 { order: 5; } .steck-raster .o-6 { order: 6; }
  .eigenschaften dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dimensionen li { grid-template-columns: 110px minmax(0, 1fr) 80px; }
}

/* Aufrufe: Liste (C1 bis C3) */
.reiter { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--seg); box-shadow: inset 0 1px 2px rgba(20, 36, 60, .08); }
.reiter a { padding: 5px 13px; border-radius: 8px; font-size: 13.5px; font-weight: var(--halbfett); color: var(--text2); text-decoration: none; white-space: nowrap; }
.reiter a:hover { color: var(--text); }
.reiter a[aria-current="page"] { color: var(--text); background: linear-gradient(180deg, var(--knopf-oben), var(--knopf-unten)); box-shadow: inset 0 1px 0 var(--kante-hell), 0 1px 3px rgba(20, 36, 60, .14); }
.aufruf-filter .eingabe { flex: 0 1 180px; min-width: 150px; }
.aufruf-filter .eingabe.suche-feld { flex: 1 1 100%; }
.aufruf-filter select { max-width: 100%; text-overflow: ellipsis; }
.filter-schalter { display: none; }
@media (max-width: 560px) {
  .aufruf-filter .eingabe.suche-feld { flex: 1 1 0; }
  .filter-schalter { display: inline-flex; align-self: end; min-height: 38px; }
  .aufruf-filter.zu .filter-feld { display: none; }
}
.aufruf-filter .eingabe > .label { font-size: 12.5px; color: var(--grau); font-weight: var(--halbfett); }
.auswahl-knopf {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; padding: 7px 10px; cursor: pointer;
  border: 1px solid var(--knopf-rand); border-radius: 10px; background: var(--eingabe); box-shadow: var(--eingabe-schatten); font-size: 14px; white-space: nowrap;
}
.auswahl-knopf span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* Mehrere Häkchen: der Knopf bleibt so breit wie das Feld, statt in das nächste zu laufen (Rückmeldung 20.10.2026) */
.eingabe.filter-feld { grid-template-columns: minmax(0, 1fr); }
.mehrfach, .mehrfach .auswahl-knopf { min-width: 0; max-width: 100%; }
.auswahl-knopf:hover { border-color: var(--linie2); }
.mehrfach[open] .auswahl-knopf { border-color: var(--akzent); }
.mehrfach .aufklapp-inhalt { left: 0; right: auto; top: calc(100% + 6px); min-width: 210px; }
.mehrfach .aufklapp-inhalt label { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: var(--rund-klein); cursor: pointer; font-size: 14px; }
.mehrfach .aufklapp-inhalt label:hover { background: var(--seg); }
.filter .mehrfach input[type="checkbox"] { width: 16px; height: 16px; min-height: 0; padding: 0; accent-color: var(--akzent); margin: 0; flex: none; }
.liste-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 2px 0 10px; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 8px 3px 11px; font-size: 13px; font-weight: var(--halbfett); color: var(--akzent-text); background: var(--akzent-weich); text-decoration: none; }
.filter-chip:hover { filter: brightness(.97); }
.anzahl { margin: 0 0 0 auto; color: var(--grau); font-size: 13.5px; }
.aufrufe-tabelle td { vertical-align: top; }
.aufrufe-tabelle td small { display: block; color: var(--grau); font-size: 12.5px; margin-top: 2px; }
.aufrufe-tabelle .start-zelle { width: 168px; }
.aufruf-zelle a { color: var(--text); text-decoration: none; }
.aufruf-zelle a:hover .titel-text { text-decoration: underline; text-underline-offset: 3px; }
.aufruf-zelle .kz { margin-right: 8px; }
.aufruf-zelle .neu-chip { margin-right: 8px; vertical-align: 1px; }
.aufrufe-tabelle .zahl-zelle { white-space: nowrap; }
.aufrufe-tabelle .rest-zelle { white-space: nowrap; color: var(--text2); }
.aufrufe-tabelle .titel-zelle a { color: var(--text); font-weight: var(--halbfett); text-decoration: none; }
.aufrufe-tabelle .grund-zelle { color: var(--text2); font-size: 13.5px; max-width: 52ch; }
.seiten { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; color: var(--grau); font-size: 13.5px; }
.handy-label { display: none; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 70; }
@media (max-width: 900px) { .aufrufe-tabelle .start-zelle { width: auto; } .titel .reiter { order: 3; } }
@media (max-width: 560px) {
  /* Auf dem Handy wird jede Zeile ein Block: oben der Aufruf, darunter Start, Frist und Status */
  .tabelle-rahmen:has(.aufrufe-tabelle) { overflow: visible; }
  .aufrufe-tabelle thead { display: none; }
  .aufrufe-tabelle, .aufrufe-tabelle tbody { display: block; }
  .aufrufe-tabelle tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px 0; border-top: 1px solid var(--linie); }
  .aufrufe-tabelle td { display: block; border: 0; padding: 0; min-width: 0; }
  .aufrufe-tabelle .aufruf-zelle, .aufrufe-tabelle .titel-zelle { grid-column: 1 / -1; }
  .aufrufe-tabelle .grund-zelle { grid-column: 1 / -1; max-width: none; }
  .aufrufe-tabelle tr:hover td { background: none; }
  .aufrufe-tabelle .handy-label { display: inline; color: var(--grau); }
}

/* Lage (B1 bis B5): Zeitstrahl als Fahrplan, Jetzt starten als Abfahrtstafel (Endfassung 15.10.2026) */
.knopf.klein { min-height: 28px; padding: 0 10px; font-size: 12.5px; }
.zs { border-top: 1.5px solid var(--text); max-height: 420px; min-height: 140px; overflow-y: auto; resize: vertical; overscroll-behavior: contain; scrollbar-gutter: stable; }
.zs .zs-kopf { position: sticky; top: 0; z-index: 5; background: var(--feld-oben); box-shadow: 0 1px 0 var(--linie); }
.zs a.zs-zeile .spur { z-index: 0; }  /* eigene Ebene je Zeile: Linien und Marken bleiben beim Scrollen unter der Kopfzeile */
.zs a.zs-zeile .spur::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--wochen-ab, 0); right: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--linie) 75%, transparent) 0 1px, transparent 1px var(--woche, 100%));
  -webkit-mask: repeating-linear-gradient(180deg, #000 0 2px, transparent 2px 5px); mask: repeating-linear-gradient(180deg, #000 0 2px, transparent 2px 5px); }
.zs:not(:has(a.zs-zeile:nth-of-type(14))) { resize: none; max-height: none; min-height: 0; }
.zs-zeile { display: grid; grid-template-columns: 62px 104px minmax(0, 1fr) 128px 58px; align-items: center; min-height: 26px; border-bottom: 1px solid var(--linie); color: var(--text); text-decoration: none; }
a.zs-zeile:hover { background: color-mix(in srgb, var(--seg) 60%, transparent); }
a.zs-zeile:focus-visible { outline-offset: -2px; }
.zs-kopf { min-height: 28px; color: var(--grau); font-size: 12px; font-weight: var(--halbfett); text-transform: uppercase; letter-spacing: .06em; }
.zs-zeile .t { font-weight: var(--halbfett); font-size: 13.5px; }
.zs-zeile .k { font-weight: var(--halbfett); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 8px; }
.zs-zeile .f { font-size: 12.5px; color: var(--grau); padding-left: 12px; white-space: nowrap; }
.zs-zeile .r { font-weight: var(--halbfett); font-size: 13.5px; text-align: right; white-space: nowrap; }
.zs-kopf .r { font-size: 12px; }
.spur { position: relative; align-self: stretch; }
.zs-kopf .spur .monat, .zs-kopf .spur .heute-text { position: absolute; top: 7px; }
.zs-kopf .spur .heute-text { color: var(--akzent-text); transform: translateX(-50%); }
.spur .linie { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--linie); }
.spur .heute { position: absolute; top: -1px; bottom: -1px; width: 2px; margin-left: -1px; background: var(--akzent); z-index: 2; }
.balken-zs { position: absolute; top: 8px; height: 10px; border-radius: 5px; background: var(--zs-balken); overflow: hidden; transition: filter var(--schnell) var(--weich); }
.balken-zs.lauf { background: linear-gradient(180deg, var(--zs-lauf-oben), var(--zs-lauf-unten)); }
a.zs-zeile:hover .balken-zs { filter: brightness(.94); }
.startmarke { position: absolute; top: 5px; width: 4px; height: 16px; margin-left: -2px; border-radius: 2px; background: var(--begutachtung); z-index: 3; }
.fristmarke { position: absolute; top: 5px; width: 5px; height: 16px; margin-left: -3px; border-radius: 2px; background: var(--zs-frist); z-index: 3; }
.zs-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; margin-top: 10px; }
.legende { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--grau); }
.legende li { display: inline-flex; align-items: center; gap: 6px; }
.legende i { display: inline-block; width: 14px; height: 8px; border-radius: 4px; }
.legende .l-vorbereitung { background: var(--zs-balken); }
.legende .l-start { width: 4px; height: 12px; border-radius: 2px; background: var(--begutachtung); }
.legende .l-lauf { background: var(--zs-lauf-unten); } .legende .l-frist { width: 5px; height: 12px; border-radius: 2px; background: var(--zs-frist); }
.zs-kopf .spur .monat.verdeckt, .legende .nur-schmal { display: none; }
.legende .l-heute { width: 2px; height: 12px; border-radius: 1px; background: var(--akzent); }
.lage-unten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 18px; align-items: start; }
.lage-rechts { display: grid; gap: 18px; min-width: 0; }
.mehr { margin: 12px 0 0; font-size: 13.5px; }

table.plan { border-collapse: separate; border-spacing: 0; width: 100%; }
.plan th { background: linear-gradient(180deg, color-mix(in srgb, var(--kachel) 82%, #fff), var(--kachel)); color: #fff; text-align: left; font-size: 12px; font-weight: var(--halbfett); text-transform: uppercase; letter-spacing: .08em; padding: 8px 10px; }
.plan th:first-child { border-radius: 8px 0 0 8px; } .plan th:last-child { border-radius: 0 8px 8px 0; }
.plan td { padding: 10px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.plan tbody tr:last-child td { border-bottom: 0; }
.plan .zeit { font-weight: var(--halbfett); font-size: 22px; line-height: 1.05; width: 118px; letter-spacing: -.01em; }
.plan .ver { display: block; font-size: 12px; font-weight: var(--halbfett); margin-top: 4px; white-space: nowrap; letter-spacing: 0; }
.plan .a-ueberfaellig .ver { color: var(--spaet); } .plan .a-jetzt .ver { color: var(--jetzt-text); }
.plan .aufruf-zelle small { display: block; color: var(--grau); font-size: 12.5px; margin-top: 2px; }
.plan .fr { font-weight: var(--halbfett); font-size: 16px; white-space: nowrap; }
.restz { white-space: nowrap; }
.restz b { font-size: 16px; font-weight: var(--halbfett); }
.restz small { display: block; font-size: 12px; color: var(--grau); }
.rw { display: flex; gap: 2px; margin-top: 5px; }
.rw i { width: 7px; height: 7px; border-radius: 2px; background: var(--linie); }
.rw i.f { background: var(--zs-frist); }
.rw-balken { display: block; width: 64px; height: 6px; margin-top: 6px; border-radius: 3px; background: var(--linie); overflow: hidden; }
.rw-balken i { display: block; height: 100%; background: var(--zs-frist); }
.zs-einstellung { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-left: auto; }
.klein-wahl { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--grau); }
.klein-wahl select { font: inherit; font-size: 13px; color: var(--text); background: var(--eingabe); border: 1px solid var(--knopf-rand); border-radius: 8px; padding: 4px 8px; box-shadow: var(--eingabe-schatten); cursor: pointer; }
.klein-wahl select:hover { border-color: var(--linie2); }
.plan .vorschl { display: flex; margin-top: 6px; }

.trichter { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.trichter a { display: grid; grid-template-columns: 116px minmax(0, 1fr) 46px; align-items: center; gap: 10px; padding: 5px 6px; margin: 0 -6px; border-radius: var(--rund-klein); font-size: 13.5px; color: var(--text); text-decoration: none; }
.trichter a:hover { background: var(--seg); }
.trichter .bal { height: 10px; border-radius: 5px; background: var(--seg); overflow: hidden; }
.trichter .bal i { display: block; height: 100%; min-width: 3px; border-radius: 5px; background: linear-gradient(90deg, var(--c1), var(--c3)); }
.trichter b { font-weight: var(--halbfett); font-size: 16px; text-align: right; }
.neu-liste { list-style: none; margin: 0; padding: 0; display: grid; }
.neu-liste li { padding: 9px 0; border-top: 1px solid var(--linie); font-size: 13.5px; }
.neu-liste li:first-child { border-top: 0; padding-top: 0; }
.neu-liste a { color: var(--text); text-decoration: none; }
.neu-liste a:hover { text-decoration: underline; text-underline-offset: 3px; }
.neu-liste .kz { margin-right: 6px; }
.neu-liste small { display: block; color: var(--grau); font-size: 12.5px; margin-top: 1px; }
.antraege { list-style: none; margin: 0; padding: 0; display: grid; }
.antraege li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--linie); }
.antraege li:first-child { border-top: 0; padding-top: 0; }
.antraege .kz { color: var(--text); text-decoration: none; }
.antraege .kz:hover { text-decoration: underline; text-underline-offset: 3px; }
.antraege small { grid-column: 1 / -1; color: var(--grau); font-size: 12.5px; }
.antraege small .rot { color: var(--spaet); font-weight: var(--halbfett); }

@media (max-width: 1250px) { .lage-unten { grid-template-columns: minmax(0, 1fr); } .lage-rechts { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
@media (max-width: 900px) {
  /* Zeitstrahl schmal (Rückmeldung 20.10.2026): oben Kürzel, Frist und Rest, darunter der Balken über die volle Breite */
  .zs { max-height: 65vh; resize: none; scrollbar-gutter: auto; }
  .zs-zeile { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "t k f r" "spur spur spur spur"; row-gap: 1px; padding-top: 6px; }
  .zs-zeile .t { grid-area: t; padding-right: 10px; white-space: nowrap; }
  a.zs-zeile .t::before { content: "Start "; font-weight: 400; font-size: 12.5px; color: var(--grau); }
  .zs-kopf .t { display: none; }
  .zs-zeile .k { grid-area: k; } .zs-zeile .f { grid-area: f; } .zs-zeile .r { grid-area: r; padding-left: 10px; }
  .zs-zeile .spur { grid-area: spur; height: 26px; }
  .zs-kopf { grid-template-areas: "spur spur spur spur"; padding-top: 0; }
  .zs-kopf > span:not(.spur) { display: none; }
  .zs-kopf .spur { height: 28px; }
  .zs-kopf .spur .monat { font-size: 10.5px; letter-spacing: .03em; }
  .zs-kopf .spur .monat.verdeckt, .legende .nur-schmal { display: inline-flex; }
  .zs-kopf .spur .heute-text { display: none; }
  table.plan thead { display: none; }
  table.plan, .plan tbody { display: block; }
  .plan tr { display: grid; grid-template-columns: 92px minmax(0, 1fr); grid-template-areas: "zeit aufruf" "zeit frist" "status status"; gap: 4px 12px; padding: 12px 0; border-top: 1px solid var(--linie); }
  .plan tbody tr:first-child { border-top: 0; }
  .plan td { display: block; border: 0; padding: 0; }
  .plan .zeit { grid-area: zeit; width: auto; font-size: 20px; }
  .plan .aufruf-zelle { grid-area: aufruf; }
  .plan .fr { grid-area: frist; font-size: 14px; }
  .plan .fr .handy-label { display: inline; color: var(--grau); font-weight: 500; }
  .plan .restz { display: none; }
  .plan .st { grid-area: status; display: flex; align-items: center; gap: 10px; }
  .plan .vorschl { margin-top: 0; }
}

/* Teamrunde (B6) */
.runde { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: 18px; align-items: start; }
.vorschlag { display: grid; gap: 10px; }
.vorschlag .entscheidung label:has(input[value="verfolgen"]), .vorschlag.e-verfolgen { --akzent: var(--verfolgen); --akzent-text: var(--verfolgen); --akzent-weich: var(--verfolgen-weich); --akzent-oben: var(--verfolgen-oben); --akzent-unten: var(--verfolgen-unten); }
.vorschlag .entscheidung label:has(input[value="verwerfen"]), .vorschlag.e-verwerfen { --akzent: var(--verwerfen); --akzent-text: var(--verwerfen); --akzent-weich: var(--verwerfen-weich); --akzent-oben: var(--verwerfen-oben); --akzent-unten: var(--verwerfen-unten); }
.vorschlag .entscheidung:has(input[value="verfolgen"]:checked) .knopf.haupt { --akzent-oben: var(--verfolgen-oben); --akzent-unten: var(--verfolgen-unten); }
.vorschlag .entscheidung:has(input[value="verwerfen"]:checked) .knopf.haupt { --akzent-oben: var(--verwerfen-oben); --akzent-unten: var(--verwerfen-unten); }
.vorschlag.entschieden { background: linear-gradient(180deg, color-mix(in srgb, var(--akzent-weich) 55%, var(--feld-oben)), var(--feld-unten)); border-color: color-mix(in srgb, var(--akzent) 22%, var(--feld-rand)); }
.vorschlag-kopf { display: grid; gap: 4px; }
.vorschlag-kopf .zeile1 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0; font-size: 13.5px; }
.vorschlag-kopf h2 { font-size: 17px; line-height: 1.3; }
.vorschlag-kopf h2 a { color: var(--text); text-decoration: none; }
.vorschlag-kopf h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.vorschlag-kopf h2 .kz { color: var(--akzent-text); }
.vorschlag-kopf .u { margin: 0; color: var(--grau); font-size: 13.5px; }
.vorschlag .von { margin: 0; font-size: 13px; color: var(--grau); }
.vorschlag blockquote { margin: 0; padding: 8px 12px; background: var(--seg); border-radius: 8px; color: var(--text2); font-size: 14px; }
.vorschlag .ideen ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; color: var(--text2); }
.vorschlag .ideen small { color: var(--grau); }
.vorschlag .ergebnis { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--linie); }
.vorschlag .ergebnis p { margin: 0; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.vorschlag .ergebnis svg { color: var(--akzent-text); }
.vorschlag .ergebnis p.ausserhalb { order: 3; flex-basis: 100%; display: block; font-size: 12.5px; color: var(--grau); }
.vorschlag .entscheidung { gap: 12px; padding-top: 10px; border-top: 1px solid var(--linie); }
.runde-ende { display: flex; justify-content: flex-end; }
.frueher, .protokoll { list-style: none; margin: 0; padding: 0; display: grid; }
.frueher li, .protokoll li { padding: 9px 0; border-top: 1px solid var(--linie); }
.frueher li:first-child, .protokoll li:first-child { border-top: 0; padding-top: 0; }
.protokoll a { color: var(--text); text-decoration: none; }
.protokoll a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Großansicht für den Beamer: ohne Seitenleiste, große Schrift */
.app.beamer { grid-template-columns: minmax(0, 1fr); }
.app.beamer .leiste { display: none; }
.app.beamer .inhalt { font-size: 18px; padding-inline: max(28px, 3vw); }
.app.beamer h1 { font-size: 36px; }
.app.beamer .vorschlag-kopf h2 { font-size: 23px; }
.app.beamer .vorschlag-kopf .u, .app.beamer .vorschlag .von, .app.beamer .vorschlag-kopf .zeile1 { font-size: 16px; }
.app.beamer .vorschlag blockquote, .app.beamer .wahl label, .app.beamer .vorschlag .ideen ul { font-size: 17px; }

/* Anträge: Arbeitsbereich (W1 bis W7), nach der Endfassung 15.10.2026 */
.akopf { display: grid; gap: 10px; }
.akopf-zeile { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 20px; }
.akopf-titel { min-width: 0; flex: 1 1 420px; text-wrap: balance; }
.akopf-titel h1 { display: inline; font-size: 26px; }
.akopf-titel .kz-plakette, .steck-titel .kz-plakette { display: inline-flex; vertical-align: 4px; margin-right: 10px; }
/* Lange Titel (oft der amtliche Name des Aufrufs, Prüfung 21.10.2026): Titel über die ganze Breite, darunter links Stand, rechts Knöpfe */
.akopf.lang { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titel titel" "meta werk"; align-items: center; column-gap: 20px; }
.akopf.lang .akopf-zeile { display: contents; }
.akopf.lang .akopf-titel { grid-area: titel; }
.akopf.lang .akopf-titel h1 { font-size: 23px; }
.akopf.lang .werk { grid-area: werk; justify-content: flex-end; }
.akopf.lang .meta { grid-area: meta; }
.kz-plakette { flex: none; display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border-radius: 7px; font-size: 13.5px; font-weight: var(--halbfett); letter-spacing: .03em; color: #fff;
  background: linear-gradient(180deg, #1C3B68, #0C213F); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(0, 0, 0, .2); white-space: nowrap; }
.kz-plakette.klein { height: 20px; padding: 0 6px; font-size: 11.5px; border-radius: 5px; }
.knopf .kz-plakette.klein { box-shadow: none; background: rgba(0, 0, 0, .22); }
.werk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.werk form { margin: 0; }
.knopf.an { border-color: color-mix(in srgb, var(--akzent) 45%, var(--knopf-rand)); background: linear-gradient(180deg, color-mix(in srgb, var(--akzent-weich) 70%, var(--knopf-oben)), var(--akzent-weich)); color: var(--akzent-text); }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; font-size: 14px; color: var(--grau); }
.meta b { color: var(--text); font-weight: var(--halbfett); }
.status-wahl > summary.status-pille { display: inline-flex; align-items: center; gap: 7px; padding: 3px 8px 3px 11px; border-radius: 999px; cursor: pointer; font-weight: var(--halbfett); font-size: 13.5px;
  background: var(--akzent-weich); color: var(--akzent-text); box-shadow: inset 0 1px 0 var(--kante-hell); }
.status-pille i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-pille.st-eingereicht { background: var(--begutachtung-weich); color: var(--begutachtung-text); }
.status-pille.st-bewilligt { background: var(--ok-weich); color: var(--ok); }
.status-pille.st-abgelehnt, .status-pille.st-zurueckgezogen { background: var(--seg); color: var(--grau); }
.status-wahl .aufklapp-inhalt { left: 0; right: auto; min-width: 200px; }
.stufe-wahl > summary.stufe-pille { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 11px; border-radius: 999px; cursor: pointer; font-weight: var(--halbfett); font-size: 13.5px; background: var(--seg); color: var(--text2); box-shadow: inset 0 1px 0 var(--kante-hell); }
.stufe-wahl > summary.stufe-pille:hover { color: var(--text); }
.wert-knopf { border: 0; background: none; padding: 0; font: inherit; font-weight: var(--halbfett); color: var(--text); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: var(--linie2); }
.wert-knopf:hover { color: var(--akzent-text); text-decoration-color: currentColor; }
.fortschritt { display: inline-flex; align-items: center; gap: 10px; }
.stationen { position: relative; display: inline-flex; justify-content: space-between; align-items: center; width: 150px; height: 14px; }
.stationen::before, .stationen::after { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; margin-top: -1px; background: var(--linie2); border-radius: 1px; }
.stationen::after { right: auto; width: calc((100% - 12px) * var(--anteil, 0) / 100); background: var(--akzent); }
.stationen i { position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%; background: var(--grund); border: 2px solid var(--linie2); }
.stationen i.ok { background: var(--akzent); border-color: var(--akzent); }
.stationen i.jetzt { border-color: var(--akzent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 16%, transparent); }
.team-bilder { display: inline-flex; gap: 4px; }
.antrag-reiter { display: flex; gap: 4px; border-bottom: 1px solid var(--linie); overflow-x: auto; scrollbar-width: none; }
.antrag-reiter a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px 10px; color: var(--text2); text-decoration: none; font-size: 14.5px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.antrag-reiter a:hover { color: var(--text); }
.antrag-reiter a[aria-current="page"] { color: var(--text); font-weight: var(--halbfett); border-bottom-color: var(--akzent); }
.antrag-reiter small { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: inline-grid; place-items: center; font-size: 11.5px; font-weight: 700; background: var(--seg); color: var(--text2); }
.antrag-reiter small.zahl-rot { background: var(--spaet-weich); color: var(--spaet); }
.arbeit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 18px; align-items: start; }
.arbeit-haupt, .arbeit-rechts { display: grid; gap: 18px; min-width: 0; }
dl.eig { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: 14px; }
dl.eig dt { color: var(--grau); }
dl.eig dd { margin: 0; color: var(--text); font-weight: 500; overflow-wrap: anywhere; }
.ms-kurz { list-style: none; margin: 0; padding: 0; display: grid; }
.ms-kurz li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--linie); font-size: 14px; }
.ms-kurz li:first-child { border-top: 0; padding-top: 0; }
.ms-kurz i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--linie2); }
.ms-kurz li.ok i { background: var(--akzent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center / 11px no-repeat; border-color: var(--akzent); }
.ms-kurz li.ok span { color: var(--grau); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--grau) 50%, transparent); }
.ms-kurz li.jetzt i { border: 2px solid var(--akzent); }
.ms-kurz li.jetzt span { font-weight: var(--halbfett); }
.ms-kurz li.ueber small { color: var(--spaet); font-weight: var(--halbfett); }
.ms-kurz small { color: var(--grau); font-size: 12.5px; white-space: nowrap; }
.idee-text { color: var(--text); max-width: 75ch; overflow-wrap: anywhere; }
.eckdaten { margin-top: 14px; }
dl.zeilen.eckdaten > div:first-child { border-top: 1px solid var(--linie); padding-top: 9px; }
dl.zeilen dd small.partner-stand { display: inline-flex; margin: 0 0 0 6px; color: var(--text2); }
dl.zeilen dd small.partner-stand.st-zugesagt, dl.zeilen dd small.partner-stand.st-loi { color: var(--ok); }
.partner-stand { display: inline-flex; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: var(--halbfett); background: var(--seg); color: var(--text2); white-space: nowrap; }
.partner-stand.st-zugesagt, .partner-stand.st-loi { background: var(--ok-weich); color: var(--ok); }
.partner-stand.st-abgesagt { background: var(--spaet-weich); color: var(--spaet); }
.aufruf-kurz { margin: 0 0 8px; }
.aufruf-kurz .kz { margin-right: 6px; color: var(--akzent-text); }
.rueckschau-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rueckschau-liste .rs-kopf { font-weight: var(--halbfett); color: var(--text); }
.rueckschau-liste p { margin: 0 0 4px; font-size: 14px; color: var(--text2); overflow-wrap: anywhere; }
.fp-stand { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; color: var(--grau); font-size: 13.5px; }
.fp-stand b { color: var(--text); }
.balken.breit { flex: 0 1 260px; }
ol.fahrplan { list-style: none; margin: 0 0 16px; padding: 0; display: grid; }
ol.fahrplan li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 32px 34px; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--linie); }
.ms-person .av.extern { background: var(--seg); color: var(--grau); box-shadow: inset 0 0 0 1px var(--linie2); text-shadow: none; font-size: 9px; }
ol.fahrplan li:first-child { border-top: 0; }
ol.fahrplan form { margin: 0; }
.haken { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; border: 1.5px solid var(--linie2); background: var(--eingabe); color: transparent; transition: background var(--schnell) var(--weich), border-color var(--schnell) var(--weich), color var(--schnell) var(--weich); }
.haken:hover { border-color: var(--akzent); color: color-mix(in srgb, var(--akzent) 45%, transparent); }
.fahrplan li.ok .haken { background: linear-gradient(180deg, var(--akzent-oben), var(--akzent-unten)); border-color: var(--akzent-unten); color: #fff; }
.fahrplan li.jetzt .haken { border: 2px solid var(--akzent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 14%, transparent); }
.ms-text { display: grid; min-width: 0; }
.ms-titel { overflow-wrap: anywhere; }
.fahrplan li.ok .ms-titel { color: var(--grau); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--grau) 50%, transparent); }
.fahrplan li.jetzt .ms-titel { font-weight: var(--halbfett); }
.ms-text small { font-size: 12.5px; color: var(--grau); }
.ms-text .ueber-text { color: var(--spaet); font-weight: var(--halbfett); }
.ms-datum { font-size: 13.5px; color: var(--text2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fahrplan li.ueber .ms-datum { color: var(--spaet); font-weight: var(--halbfett); }
.ms-bearbeiten { min-width: 280px; padding: 10px; text-align: left; }
.ms-bearbeiten .eng-form { gap: 10px; margin-bottom: 6px; }
.ms-neu, .partner-neu { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; padding-top: 14px; border-top: 1px solid var(--linie); }
.ms-neu .eingabe, .partner-neu .eingabe { display: grid; gap: 6px; flex: 0 1 190px; min-width: 150px; }
.ms-neu .eingabe:first-child, .partner-neu .eingabe:first-child, .partner-neu .breit-feld { flex: 1 1 240px; }
.ms-neu label, .partner-neu label { font-weight: var(--halbfett); font-size: 13px; }
.ms-neu .eingabe input, .ms-neu .eingabe select, .partner-neu .eingabe input, .partner-neu .eingabe select { width: 100%; font: inherit; font-size: 14px; color: var(--text); background: var(--eingabe); border: 1px solid var(--knopf-rand); border-radius: 10px; padding: 8px 10px; min-height: 40px; height: 40px; box-shadow: var(--eingabe-schatten); }
.ms-neu .knopf, .partner-neu .knopf { min-height: 40px; }
.eingabe input[type="date"], .eingabe input[type="url"] { width: 100%; font: inherit; font-size: 15px; color: var(--text); background: var(--eingabe); border: 1px solid var(--knopf-rand); border-radius: 10px; padding: 10px 12px; min-height: 44px; box-shadow: var(--eingabe-schatten); }
.eingabe input[type="date"]:focus, .eingabe input[type="url"]:focus, .ms-neu input:focus, .partner-neu input:focus { outline: none; border-color: var(--akzent); box-shadow: var(--eingabe-schatten), 0 0 0 3px var(--akzent-weich); }
.partner-tabelle td { vertical-align: middle; }
.umbrechen { overflow-wrap: anywhere; }
.verweise { list-style: none; margin: 0 0 14px; padding: 0; display: grid; }
.verweise li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--linie); }
.verweise li:first-child { border-top: 0; }
.verweise a { display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.verweise a:hover { text-decoration: underline; text-underline-offset: 3px; }
.verweise small { color: var(--grau); font-size: 12.5px; white-space: nowrap; }
.verweise form { margin: 0; }
.haken-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 12px; }
.haken-liste label { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 14px; cursor: pointer; }
.haken-liste input { width: 16px; height: 16px; accent-color: var(--akzent); margin: 0; flex: none; }
dialog.dialog.breit { width: min(640px, calc(100vw - 32px)); }
dialog.dialog .dialog-inhalt { max-height: 70vh; overflow-y: auto; }
.wahl label .block { display: block; }
.vorlagen-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 18px; align-items: start; }
ol.schritte { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }
ol.schritte small { display: block; color: var(--grau); font-size: 12.5px; }
.unterlagen { margin: 12px 0 0; font-size: 14px; color: var(--text2); }
.schritt-zeilen { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 8px 10px; }
.schritt-zeilen input { font: inherit; font-size: 14.5px; color: var(--text); background: var(--eingabe); border: 1px solid var(--knopf-rand); border-radius: 10px; padding: 8px 10px; min-height: 40px; box-shadow: var(--eingabe-schatten); width: 100%; }
.schritt-zeilen .label { font-size: 12.5px; color: var(--grau); font-weight: var(--halbfett); }
.vorlage-loeschen { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linie); }
@media (max-width: 1100px) { .arbeit { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .akopf-titel h1 { font-size: 22px; }
  .akopf.lang { grid-template-columns: minmax(0, 1fr); grid-template-areas: "titel" "werk" "meta"; }
  .akopf.lang .akopf-titel h1 { font-size: 19px; }
  .akopf.lang .werk { justify-content: flex-start; }
  /* Reiter wischen: der Rand blendet aus, damit man sieht, dass es weitergeht. Der Abstand rechts lässt den letzten Reiter aus dem Verlauf rollen. */
  .antrag-reiter { padding-right: 28px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  ol.fahrplan li { grid-template-columns: 34px minmax(0, 1fr) 34px; }
  ol.fahrplan .ms-datum { grid-column: 2; grid-row: 2; }
  ol.fahrplan .ms-person { display: none; }
  .verweise li { grid-template-columns: minmax(0, 1fr) auto; }
  .verweise small { grid-column: 1; }
}

/* Diskussion, Benachrichtigungen, Pinnwand (Bauabschnitt 4), nach der Endfassung antrag.html */
.rund .zahl[hidden] { display: none; }

/* Glocke in der Kopfleiste */
.glocke .glocke-liste { width: min(380px, calc(100vw - 24px)); max-height: min(560px, calc(100dvh - var(--kopf-hoehe) - 24px)); overflow-y: auto; padding: 6px; gap: 0; }
.glocke-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.glocke-kopf form { margin: 0; }
.glocke-kopf .textknopf { font-size: 12.5px; }
.aufklapp-inhalt a.bn, a.bn { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px 10px 9px 10px; border-radius: var(--rund-klein); color: var(--text2); text-decoration: none; font-size: 13.5px; line-height: 1.4; position: relative; }
.aufklapp-inhalt a.bn:hover, a.bn:hover { background: var(--seg); color: var(--text); }
a.bn.ungelesen { color: var(--text); }
a.bn.ungelesen::after { content: ""; position: absolute; right: 10px; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: var(--akzent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 16%, transparent); }
a.bn.ungelesen .bn-text { padding-right: 16px; font-weight: 500; }
.bn-text { display: grid; gap: 2px; overflow-wrap: anywhere; }
.bn-text small { color: var(--grau); font-size: 12px; font-weight: 400; }
.av.bn-system { --av-farbe: var(--akzent); }
.av.bn-system svg.i { width: 13px; height: 13px; stroke: #fff; }
.bn-leer { margin: 0; padding: 14px 10px; color: var(--grau); font-size: 13.5px; }
.aufklapp-inhalt a.bn-alle { display: block; text-align: center; margin-top: 4px; padding: 9px 10px; border-top: 1px solid var(--linie); border-radius: 0 0 var(--rund-klein) var(--rund-klein); color: var(--akzent-text); font-weight: var(--halbfett); font-size: 13.5px; }
ul.bn-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
ul.bn-liste a.bn { grid-template-columns: 30px minmax(0, 1fr); padding: 11px 12px; font-size: 14.5px; }
ul.bn-liste a.bn.ungelesen::after { top: 20px; right: 14px; }

/* Diskussion am Antrag */
.diskussion .feld-kopf { margin-bottom: 6px; }
.faeden { display: grid; }
.leer-diskussion { margin: 6px 0 4px; color: var(--grau); }
.beitrag { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid var(--linie); scroll-margin-top: calc(var(--kopf-hoehe) + 24px); }
.faeden > .beitrag:first-child { border-top: 0; }
.beitrag > .av { width: 34px; height: 34px; }
.beitrag > .av.leer, .beitrag > .av.klein.leer { background: var(--seg); box-shadow: inset 0 0 0 1px var(--linie2); }
.beitrag-koerper { min-width: 0; display: grid; gap: 4px; }
.beitrag .wer { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; font-size: 13px; color: var(--grau); }
.beitrag .wer b { color: var(--text); font-weight: var(--halbfett); font-size: 14px; }
.beitrag .wer time { font-variant-numeric: tabular-nums; }
.kennz { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: var(--halbfett); background: var(--seg); color: var(--text2); white-space: nowrap; }
.kennz svg.i { width: 13px; height: 13px; stroke-width: 2; }
.kennz.neu { background: var(--akzent-weich); color: var(--akzent-text); }
.kennz.entscheidung { background: var(--verfolgen-weich); color: var(--verfolgen); }
.kennz.runde { background: color-mix(in srgb, var(--c3) 14%, var(--grund)); color: var(--c1); }
.kennz.nadel, .kennz.still { background: none; padding: 0; font-weight: 400; color: var(--grau); }
.kennz.aus { background: var(--spaet-weich); color: var(--spaet); }
.beitrag-text { color: var(--text); font-size: 14.5px; line-height: 1.55; overflow-wrap: anywhere; max-width: 75ch; }
.beitrag-text p { margin: 0 0 8px; }
.beitrag-text p:last-child, .beitrag-text ul:last-child { margin-bottom: 0; }
.beitrag-text ul { margin: 0 0 8px; padding-left: 20px; display: grid; gap: 2px; }
.beitrag-text a { color: var(--akzent-text); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.erw { color: var(--akzent-text); font-weight: var(--halbfett); background: color-mix(in srgb, var(--akzent-weich) 70%, transparent); border-radius: 4px; padding: 0 3px; }
a.verweis { font-weight: var(--halbfett); text-decoration: none; color: var(--c1); background: color-mix(in srgb, var(--c3) 13%, transparent); border-radius: 4px; padding: 0 3px; }
a.verweis:hover { text-decoration: underline; }
.beitrag-weg { margin: 6px 0 0; color: var(--grau); font-style: italic; font-size: 14px; }
.beitrag-akt { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin-top: 2px; margin-left: -8px; }
.beitrag-akt form { margin: 0; }
button.akt { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 8px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--grau); cursor: pointer; transition: background var(--schnell) var(--weich), color var(--schnell) var(--weich); }
button.akt svg.i { width: 15px; height: 15px; }
button.akt:hover { background: var(--seg); color: var(--text); }
button.akt[aria-expanded="true"] { color: var(--akzent-text); background: var(--akzent-weich); }
.beitrag-menue > summary { width: 30px; height: 30px; margin-left: 0; }
.beitrag-menue .aufklapp-inhalt { left: 0; right: auto; }
.beitrag-menue .aufklapp-inhalt button { display: flex; align-items: center; gap: 9px; }
.antworten { display: grid; gap: 2px; margin-top: 8px; padding: 2px 14px; border-radius: 12px; background: var(--seg); }
.beitrag.antwort { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top-color: color-mix(in srgb, var(--linie2) 55%, transparent); }
.antworten > .beitrag.antwort:first-child { border-top: 0; }
.beitrag.antwort > .av { width: 28px; height: 28px; font-size: 11px; }
.beitrag.antwort .beitrag-text { font-size: 14px; }
.antwort-form, .beitrag-bearbeiten { display: grid; gap: 8px; margin-top: 8px; }
.antwort-form[hidden], .beitrag-bearbeiten[hidden], [data-beitrag-text][hidden] { display: none; }
.antwort-form .knoepfe, .beitrag-bearbeiten .knoepfe { display: flex; justify-content: flex-end; gap: 8px; }
.antwort-form textarea, .beitrag-bearbeiten textarea, .schreiben textarea { width: 100%; font: inherit; font-size: 14.5px; line-height: 1.5; color: var(--text); background: var(--eingabe); border: 1px solid var(--knopf-rand); border-radius: 10px; padding: 9px 12px; min-height: 64px; resize: vertical; box-shadow: var(--eingabe-schatten); }
.antwort-form textarea:focus, .beitrag-bearbeiten textarea:focus { outline: none; border-color: var(--akzent); box-shadow: var(--eingabe-schatten), 0 0 0 3px var(--akzent-weich); }
textarea::placeholder { color: var(--grau); opacity: 1; }
.beitrag.ausgeblendet > .beitrag-koerper > :not(.beitrag-akt):not(.wer) { opacity: .55; }

/* Neue Beiträge gleiten ein, ein Ziel aus einem Link leuchtet kurz auf */
.beitrag.neu > .beitrag-koerper { animation: gleiten 460ms var(--weich) both; }
@keyframes gleiten { from { opacity: .4; transform: translateX(-6px); } }
.beitrag:target > .beitrag-koerper { animation: aufleuchten 2400ms var(--weich) both; border-radius: 8px; }
@keyframes aufleuchten { 0%, 30% { background: color-mix(in srgb, var(--akzent-weich) 80%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--akzent-weich) 80%, transparent); } 100% { background: transparent; box-shadow: 0 0 0 6px transparent; } }

/* Angeheftet: oben in Diskussion und Überblick */
ul.angeheftete { list-style: none; margin: 4px 0 10px; padding: 0; display: grid; gap: 6px; }
li.angeheftet { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 14px; border-radius: 10px; background: linear-gradient(180deg, color-mix(in srgb, var(--akzent-weich) 75%, var(--feld-oben)), var(--akzent-weich)); box-shadow: inset 0 1px 0 var(--kante-hell); font-size: 14px; }
li.angeheftet > svg.i { width: 16px; height: 16px; margin-top: 2px; color: var(--akzent-text); }
.angeheftet-text { color: var(--text); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.angeheftet-text p, .angeheftet-text ul { margin: 0; }
li.angeheftet small { display: block; margin-top: 3px; color: var(--grau); font-size: 12.5px; }
li.angeheftet small a { color: var(--akzent-text); text-underline-offset: 3px; }
:root[data-thema="dunkel"] li.angeheftet { background: linear-gradient(180deg, #123A48, #0E2F3B); }

/* Schreibfeld */
.schreiben { margin-top: 12px; border: 1px solid var(--knopf-rand); border-radius: 12px; background: var(--eingabe); box-shadow: var(--eingabe-schatten); transition: border-color var(--schnell) var(--weich), box-shadow var(--schnell) var(--weich); scroll-margin-top: calc(var(--kopf-hoehe) + 24px); }
.schreiben:focus-within { border-color: var(--akzent); box-shadow: var(--eingabe-schatten), 0 0 0 3px var(--akzent-weich); }
.schreiben textarea { border: 0; box-shadow: none; background: transparent; border-radius: 12px 12px 0 0; padding: 12px 14px; min-height: 76px; }
.schreiben textarea:focus { outline: none; }
.schreiben-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--linie); }
.schreiben-leiste .knopf { margin-left: auto; }
label.schalter { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border-radius: 8px; font-size: 13px; color: var(--grau); cursor: pointer; border: 1px solid transparent; user-select: none; transition: background var(--schnell) var(--weich), color var(--schnell) var(--weich), border-color var(--schnell) var(--weich); }
label.schalter svg.i { width: 15px; height: 15px; }
label.schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
label.schalter:hover { background: var(--seg); color: var(--text); }
label.schalter:has(input:checked) { background: var(--akzent-weich); color: var(--akzent-text); border-color: color-mix(in srgb, var(--akzent) 30%, transparent); font-weight: var(--halbfett); }
label.schalter:has(input:focus-visible) { outline: 2px solid var(--fokus); outline-offset: 2px; }

/* Vorschläge bei @ und # */
ul.vorschlaege { position: fixed; z-index: 80; list-style: none; margin: 0; padding: 5px; display: grid; gap: 1px; background: linear-gradient(180deg, var(--feld-oben), var(--feld-unten)); border: 1px solid var(--feld-rand); border-radius: 12px; box-shadow: inset 0 1px 0 var(--kante-hell), var(--schatten-hoch); animation: aufklappen 120ms var(--weich); }
ul.vorschlaege[hidden] { display: none; }
ul.vorschlaege li { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 7px; font-size: 14px; color: var(--text); cursor: pointer; min-width: 0; }
ul.vorschlaege li.aktiv { background: var(--akzent-weich); }
ul.vorschlaege .v-titel { color: var(--text2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ul.vorschlaege .v-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Pinnwand (Ü5) */
.pinnwand { scroll-margin-top: calc(var(--kopf-hoehe) + 24px); }
ul.hinweise { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
li.hinweis { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 12px 12px 12px 14px; border-radius: 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--akzent-weich) 75%, var(--feld-oben)), var(--akzent-weich)); box-shadow: inset 0 1px 0 var(--kante-hell); }
:root[data-thema="dunkel"] li.hinweis { background: linear-gradient(180deg, #123A48, #0E2F3B); }
li.hinweis > svg.i { color: var(--akzent-text); margin-top: 1px; }
.hinweis-text { color: var(--text); font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; max-width: 75ch; }
.hinweis-text p, .hinweis-text ul { margin: 0 0 6px; }
.hinweis-text > :last-child { margin-bottom: 0; }
.hinweis-text a { color: var(--akzent-text); }
li.hinweis small { display: block; margin-top: 4px; color: var(--grau); font-size: 12.5px; }
li.hinweis form { margin: -4px -4px 0 0; }

/* Teamrunde: aus den Anträgen */
.aus-antraegen { margin-top: 18px; }
ul.runde-beitraege { list-style: none; margin: 0; padding: 0; display: grid; }
li.runde-beitrag { display: grid; gap: 6px; padding: 12px 0; border-top: 1px solid var(--linie); }
li.runde-beitrag:first-child { border-top: 0; padding-top: 0; }
.rb-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; font-size: 13px; color: var(--grau); }
.rb-kopf b { color: var(--text); font-weight: var(--halbfett); font-size: 14px; }
.rb-kopf a.kz-plakette { text-decoration: none; }
.rb-kopf a.kz-plakette:hover { filter: brightness(1.15); }
.rb-kopf a.rb-ergebnis { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-weight: var(--halbfett); font-size: 14px; text-decoration: none; min-width: 0; }
.rb-kopf a.rb-ergebnis:hover { text-decoration: underline; }
.rb-kopf a.rb-ergebnis svg.i { flex: none; color: var(--akzent-text); }
.rb-kopf form { margin: 0 0 0 auto; }
.beamer li.runde-beitrag .beitrag-text { font-size: 18px; }
h2.protokoll-teil { margin: 18px 0 8px; font-size: 15px; }

/* Einstellungen */
label.haken-zeile { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; cursor: pointer; }
label.haken-zeile input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--akzent); flex: none; }

h3.infos-teil { margin: 22px 0 6px; padding-top: 16px; border-top: 1px solid var(--linie); }
.antrag-reiter small.zahl-neu { background: var(--akzent); color: var(--akzent-fg); }
/* Dunkel: Blau der Kennzeichen und Verweise heller, damit kleine Schrift genug Kontrast hat */
:root[data-thema="dunkel"] .kennz.runde, :root[data-thema="dunkel"] a.verweis { color: #9FB8DA; }

@media (max-width: 560px) {
  .glocke .glocke-liste { position: fixed; left: 12px; right: 12px; top: calc(var(--kopf-hoehe) + 6px); width: auto; }
  .beitrag { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
  .beitrag > .av { width: 28px; height: 28px; font-size: 11px; }
  .antworten { padding: 2px 10px; margin-left: -38px; }
  .schreiben-leiste .knopf { flex: 1 1 100%; justify-content: center; }
  button.akt { padding: 0 6px; }
}

/* Seiten ohne Rahmen: Anmeldung, Zugang, Fehler */
.zugang-seite { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(320px, 44%) minmax(0, 1fr); background: var(--grund); }
.zugang-marke {
  background: radial-gradient(760px 520px at 0% 0%, rgba(79, 209, 197, .07), transparent 62%),
              linear-gradient(160deg, var(--rahmen-oben) 0%, var(--rahmen) 45%, var(--leiste-unten) 100%);
  color: var(--rahmen-fg); padding: 40px 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  position: relative; overflow: hidden; box-shadow: inset -1px 0 0 rgba(255, 255, 255, .05);
}
.zugang-marke > * { position: relative; z-index: 1; }
/* Signal aus dem Signet: eine Scheibe und zwei Ringe um einen Punkt 80 px vor der Ecke, leicht schattiert für etwas Tiefe.
   Die drei Kanten leuchten nacheinander in Blau auf, von innen nach außen (Wunsch 20.10.2026). Bewegt wird nur die Deckkraft. */
.zugang-marke > .zugang-ringe { position: absolute; z-index: 0; right: 80px; bottom: 80px; width: 0; height: 0; pointer-events: none; }
.zugang-ringe span {
  --d: 808px; position: absolute; left: calc(var(--d) / -2); top: calc(var(--d) / -2); width: var(--d); height: var(--d); border-radius: 50%;
  border: 1px solid rgba(127, 163, 214, .065);
  background: radial-gradient(closest-side, transparent 82.18%, rgba(3, 10, 24, .16) 82.2%, rgba(127, 163, 214, .014) 87%,
              rgba(127, 163, 214, .026) 95%, rgba(150, 184, 232, .034) 100%);
}
.zugang-ringe span:nth-child(2) {
  --d: 664px; border-color: rgba(127, 163, 214, .085);
  background: radial-gradient(closest-side, transparent 78.29%, rgba(3, 10, 24, .2) 78.31%, rgba(127, 163, 214, .022) 83%,
              rgba(127, 163, 214, .038) 94%, rgba(150, 184, 232, .05) 100%);
}
.zugang-ringe span:nth-child(3) {
  --d: 520px; border-color: rgba(127, 163, 214, .12);
  background: radial-gradient(closest-side, transparent 78%, rgba(3, 10, 24, .2) 100%);
}
.zugang-ringe span::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  border: 1px solid rgba(30, 62, 126, .85);
  opacity: 0; animation: kante-leuchten 10s cubic-bezier(.45, 0, .55, 1) 2.8s infinite both;
  /* nach unten auslaufen, damit kein Licht durch die Absenderzeile läuft */
  -webkit-mask-image: linear-gradient(#000 calc(50% - 20px), transparent calc(50% + 28px));
  mask-image: linear-gradient(#000 calc(50% - 20px), transparent calc(50% + 28px));
}
.zugang-ringe span:nth-child(2)::after { border-color: rgba(30, 62, 126, .92); animation-delay: 1.9s; }
.zugang-ringe span:nth-child(3)::after { border-color: rgb(30, 62, 126); animation-delay: 1s; }
@keyframes kante-leuchten {
  0% { opacity: 0; }
  16% { opacity: 1; }
  22% { opacity: 1; }
  44% { opacity: 0; }
  100% { opacity: 0; }
}
.zugang-marke img { width: 220px; height: auto; display: block; }
.zugang-marke .absender { font-size: 13px; color: var(--rahmen-dim); margin: 0; position: relative; z-index: 1; }
.zugang-inhalt { display: grid; align-content: center; justify-items: center; padding: 48px 24px; background: var(--verlauf); }
.zugang-karte { width: min(440px, 100%); display: grid; gap: 20px; }
.zugang-karte h1 { font-size: 26px; }
.zugang-karte .einleitung { margin: 0; color: var(--text2); }
.zugang-karte .unten { font-size: 14px; color: var(--grau); margin: 0; }
.zugang-karte .bestaetigt { display: grid; gap: 12px; }
.zugang-karte .symbol-kreis { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--akzent-weich); color: var(--akzent-text); }
.zugang-karte .symbol-kreis svg { width: 24px; height: 24px; }

/* Handy und schmale Fenster */
@media (max-width: 1100px) {
  .kopf { grid-template-columns: auto minmax(0, 1fr) auto; }
  .suche { grid-column: 2; justify-self: center; width: min(100%, 460px); }
  .aktionen { grid-column: 3; }
  .marke { padding: 0 12px 0 16px; }
}
@media (max-width: 900px) {
  :root { --rand-seite: 16px; --kopf-hoehe: 56px; }
  .app { grid-template-columns: minmax(0, 1fr); }
  .menue-knopf { display: grid; }
  .kopf { grid-template-columns: auto auto minmax(0, 1fr) auto; }
  .aktionen { grid-column: 4; }
  .marke { padding: 0 4px 0 6px; }
  .marke .logo { height: 24px; }
  .suche { display: none; }
  .aktionen { padding-right: 10px; gap: 2px; }
  .neu-knopf .text { display: none; }
  .neu-knopf { padding: 0 10px; }
  .leiste {
    position: fixed; z-index: 40; top: var(--kopf-hoehe); left: 0; width: min(300px, 86vw); height: calc(100dvh - var(--kopf-hoehe));
    transform: translateX(-102%); transition: transform 220ms var(--weich); box-shadow: var(--schatten-hoch);
  }
  .app.menue-offen .leiste { transform: none; }
  .leiste .einklappen, .leiste .unten .trenn, .leiste-tipp { display: none; }
  .app.menue-offen::after { content: ""; position: fixed; inset: var(--kopf-hoehe) 0 0; background: rgba(7, 19, 37, .45); z-index: 35; }
  .inhalt { padding-top: 18px; }
  h1 { font-size: 24px; }
  .formular .zeile2 { grid-template-columns: 1fr; }
  .tabelle .nur-breit { display: none; }
  .zugang-seite { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .zugang-marke { padding: 18px 16px; flex-direction: row; align-items: center; }
  .zugang-marke img { width: 132px; }
  .zugang-marke > .zugang-ringe { display: none; }
  .zugang-marke .absender { font-size: 12px; text-align: right; }
  .zugang-inhalt { align-content: start; padding: 28px 16px 40px; }
  .anfrage { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .tabelle .nur-mittel { display: none; }
  .filter .eingabe, .filter .eingabe.suche-feld { flex: 1 1 100%; min-width: 0; }
  .titel .rechts { margin-left: 0; width: 100%; }
}

/* Bewegung: kurz und ruhig, unter reduzierter Bewegung abgeschaltet */
/* Seitenübergänge per View Transitions sind bewusst nicht drin: Sie blockierten im Test die Darstellung (16.10.2026). */

/* Inhalt baut sich beim Laden kurz von oben nach unten auf, aus sichtbarem Ausgangszustand */
.inhalt > * { animation: auftauchen 420ms var(--weich) both; }
.inhalt > *:nth-child(2) { animation-delay: 40ms; }
.inhalt > *:nth-child(3) { animation-delay: 80ms; }
.inhalt > *:nth-child(4) { animation-delay: 120ms; }
.inhalt > *:nth-child(n+5) { animation-delay: 160ms; }
.zugang-karte > * { animation: auftauchen 420ms var(--weich) both; }
@keyframes auftauchen { from { opacity: .35; transform: translateY(8px); } }

/* Signal im Logo: die Bögen leuchten nacheinander auf, beim ersten Besuch und beim Überfahren */
.logo .bogen { transform-box: fill-box; transform-origin: 0% 50%; }
.signal .logo .bogen, .marke:hover .logo .bogen { animation: signal 1300ms var(--weich) both; }
.marke:hover .logo .bogen { animation-name: signal-wieder; }
.logo .bogen-2 { animation-delay: 160ms !important; }
@keyframes signal { 0% { opacity: .1; } 35% { opacity: 1; fill: #4FD1C5; } 100% { opacity: 1; } }
@keyframes signal-wieder { 0% { opacity: .1; } 35% { opacity: 1; fill: #4FD1C5; } 100% { opacity: 1; } }
/* Leuchtlinie der Kopfleiste läuft beim ersten Besuch einmal durch */
.signal .kopf::after { animation: abtasten 1800ms var(--weich) both; }
@keyframes abtasten { from { background-position: 150% 0; } to { background-position: 50% 0; } }

/* Übersicht (Ü1 bis Ü8, Bauabschnitt 5): Kennzahlen als dunkle Karten, darunter die Bereiche paarweise (Endfassung 15.10.2026) */
:root { --last-1: #76BFC6; --last-2: #42A0AA; --last-3: #14818C; --last-4: #075A62; --last-1-fg: #0B2A30; --last-2-fg: #0B2A30; --last-3-fg: #FFFFFF; --last-4-fg: #FFFFFF; --kachel-spaet: #FF8C9A; }
:root[data-thema="dunkel"] { --last-1: #1F6F7B; --last-2: #2C929E; --last-3: #4DB5BF; --last-4: #8AD8DE; --last-1-fg: #FFFFFF; --last-2-fg: #06171B; --last-3-fg: #06171B; --last-4-fg: #06171B; }
.titel .anzeige .aufklapp-inhalt { min-width: 260px; padding: 12px; gap: 10px; }
.anzeige-inhalt fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 2px; }
.anzeige-inhalt legend { font-size: 12px; font-weight: var(--halbfett); color: var(--grau); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.anzeige-inhalt label { display: flex; align-items: center; gap: 9px; padding: 5px 4px; border-radius: 6px; font-size: 14px; cursor: pointer; }
.anzeige-inhalt label:hover { background: var(--seg); }
.anzeige-inhalt input[type="checkbox"] { accent-color: var(--akzent); width: 16px; height: 16px; margin: 0; }
.anzeige-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-top: 10px; border-top: 1px solid var(--linie); }
.aufklapp-inhalt .anzeige-knoepfe .textknopf, .aufklapp-inhalt .anzeige-knoepfe .knopf { width: auto; padding: 0 10px; }
.aufklapp-inhalt .anzeige-knoepfe .textknopf { padding: 0; color: var(--akzent-text); font-size: 13.5px; }
.aufklapp-inhalt .anzeige-knoepfe .textknopf:hover { background: none; }
.zahl-klein { font-size: 11.5px; font-weight: 500; color: var(--grau); }
.klein-text { font-size: 12.5px; margin: 10px 0 0; }

.ue-kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 18px 0 16px; }
.kachel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 6px 12px; padding: 16px 18px 15px; border-radius: var(--rund);
  background: linear-gradient(180deg, color-mix(in srgb, var(--kachel) 88%, #4A6A96), var(--kachel)); border: 1px solid var(--kachel-rand);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 8px 20px rgba(8, 22, 44, .10); color: #FFFFFF; text-decoration: none;
  transition: filter var(--schnell) var(--weich), transform var(--schnell) var(--weich); }
.kachel:hover { filter: brightness(1.08); }
.kachel:active { transform: translateY(1px); }
.kachel:focus-visible { outline-color: var(--kachel-hell); }
.kachel .l { grid-column: 1 / -1; font-size: 13px; font-weight: var(--halbfett); color: var(--kachel-dim); }
.kachel .n { font-size: 34px; font-weight: var(--halbfett); line-height: 1; letter-spacing: -.01em; font-variant-numeric: proportional-nums; color: #FFFFFF; }
.kachel.spaet .n { color: var(--kachel-spaet); }
.kachel .s { grid-column: 1 / -1; font-size: 12.5px; color: var(--kachel-dim); }
.kachel .mini { display: flex; align-items: flex-end; gap: 4px; height: 32px; }
.kachel .mini i { width: 9px; min-height: 2px; border-radius: 2px 2px 0 0; background: rgba(255, 255, 255, .18); }
.kachel .mini i.h { background: var(--kachel-hell); }

.ue-spalten { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.ue-spalten.eine { grid-template-columns: minmax(0, 1fr); }
.ue-spalte { display: grid; gap: 16px; align-content: start; min-width: 0; }
.ue-spalte:empty { display: none; }
.rund-klein.voll:hover { background: var(--seg); color: var(--text); border-color: var(--linie); }

ol.ue-arbeit { list-style: none; margin: 0; padding: 0; }
.ue-arbeit .ar { position: relative; display: grid; grid-template-columns: 78px minmax(0, 1fr) minmax(170px, 230px) 54px 34px; gap: 14px; align-items: center; padding: 11px 0; border-top: 1px solid var(--linie); }
.ue-arbeit .ar:first-child { border-top: 0; padding-top: 2px; }
.ar-frist { font-size: 21px; font-weight: var(--halbfett); line-height: 1; white-space: nowrap; }
.ar-frist small, .ar-rest small { display: block; margin-top: 4px; font-size: 12px; font-weight: var(--halbfett); color: var(--grau); }
.ar.spaet .ar-frist { color: var(--spaet); }
.ar.begutachtung .ar-frist { color: var(--grau); font-size: 17px; }
.ar-name { min-width: 0; }
.ar-link { display: flex; align-items: baseline; gap: 7px; min-width: 0; color: var(--text); text-decoration: none; }
.ar-link::after { content: ""; position: absolute; inset: 0; border-radius: 10px; }
.ar-link .t { color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar:hover .ar-link .t { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.ar-link:focus-visible { outline: none; }
.ar-link:focus-visible::after { outline: 2px solid var(--fokus); outline-offset: 2px; }
.ar-team { display: flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 12.5px; color: var(--grau); }
.ar-team .av { width: 22px; height: 22px; font-size: 9.5px; }
.ar-team .av + span, .ar-team span:first-child { margin-left: 4px; }
.ar-weg .stationen { width: 100%; }
.ar-weg .schritt { font-size: 12.5px; color: var(--grau); margin-top: 5px; line-height: 1.35; }
.ar-weg .schritt b { color: var(--text); font-weight: var(--halbfett); }
.ar-weg .schritt.rot { display: flex; align-items: center; gap: 5px; color: var(--spaet); font-weight: var(--halbfett); }
.ar-rest { font-size: 17px; font-weight: var(--halbfett); text-align: right; line-height: 1; }
.ar-neu { text-align: right; }
.ar-neu a { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 3px; padding: 3px 5px; border-radius: 6px; font-size: 12.5px; font-weight: var(--halbfett); color: var(--akzent-text); text-decoration: none; }
.ar-neu a:hover { background: var(--akzent-weich); }

ul.ue-termine, ul.ue-stichtage, ul.ue-bespr { list-style: none; margin: 0; padding: 0; }
.ue-termine li, .ue-stichtage li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--linie); }
.ue-stichtage li { grid-template-columns: 46px minmax(0, 1fr) auto; }
.ue-termine li:first-child, .ue-stichtage li:first-child { border-top: 0; padding-top: 0; }
.ue-termine .tag, .ue-stichtage .tag { text-align: center; border-radius: 8px; background: var(--seg); padding: 4px 0 3px; font-size: 11px; font-weight: var(--halbfett); color: var(--grau); line-height: 1.15; letter-spacing: .02em; box-shadow: inset 0 1px 0 var(--kante-hell); }
.ue-termine .tag b, .ue-stichtage .tag b { display: block; font-size: 18px; font-weight: var(--halbfett); color: var(--text); letter-spacing: 0; }
.ue-termine .t-frist .tag { background: var(--spaet-weich); color: var(--spaet); }
.ue-termine .t-frist .tag b { color: var(--spaet); }
.ue-termine .spaet .tag { background: var(--spaet); color: rgba(255, 255, 255, .85); box-shadow: none; }
.ue-termine .spaet .tag b { color: #FFFFFF; }
.ue-termine .t-stichtag .tag, .ue-stichtage .tag { background: var(--akzent-weich); color: var(--akzent-text); }
.ue-termine .t-stichtag .tag b, .ue-stichtage .tag b { color: var(--akzent-text); }
.ue-termine .t-start .tag { background: var(--jetzt-weich); color: var(--jetzt-text); }
.ue-termine .t-start .tag b { color: var(--jetzt-text); }
.ue-termine a { font-weight: var(--halbfett); color: var(--text); text-decoration: none; }
.ue-termine a:hover { text-decoration: underline; }
.ue-termine small, .ue-stichtage small { display: block; color: var(--grau); font-size: 12.5px; overflow-wrap: anywhere; }
.ue-termine .spaet small { color: var(--spaet); }
.ue-stichtage p { margin: 0; font-weight: var(--halbfett); line-height: 1.3; }
.ue-stichtage p a { color: var(--text); text-decoration: none; }
.ue-stichtage p a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ue-stichtage .abstand { font-size: 12.5px; font-weight: var(--halbfett); color: var(--text2); white-space: nowrap; }

.fp { position: relative; }
.fp-zeile { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; min-height: 30px; }
.fp-zeile > .kz { font-size: 13px; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; padding-right: 8px; }
.fp-zeile > .kz:hover { text-decoration: underline; }
.fp-zeile .spur { align-self: stretch; min-height: 30px; }
.fp-kopf { min-height: 22px; color: var(--grau); font-size: 12px; font-weight: var(--halbfett); }
.fp-kopf .spur { min-height: 22px; }
.fp-kopf .monat, .fp-kopf .heute-text { position: absolute; top: 2px; }
.fp-kopf .heute-text { color: var(--akzent-text); transform: translateX(-50%); }
.fp-balken { position: absolute; top: 11px; height: 8px; border-radius: 4px; background: linear-gradient(180deg, var(--c3), var(--c1)); }
.fp-balken.spaeter { background: none; border: 1.5px dashed color-mix(in srgb, var(--c3) 70%, transparent); }
.fp-balken.begutachtung { background: repeating-linear-gradient(135deg, var(--begutachtung) 0 5px, color-mix(in srgb, var(--begutachtung) 45%, transparent) 5px 9px); }
.fp .ms { position: absolute; top: 9px; width: 12px; height: 12px; margin-left: -6px; transform: rotate(45deg); border-radius: 2px; background: var(--feld-oben); border: 2px solid var(--c1); box-shadow: 0 0 0 2px var(--feld); z-index: 3; }
.fp .ms.ok { background: var(--c1); }
.fp .ms.spaet { border-color: var(--spaet); }
.fp .ms.frist { background: var(--zs-frist); border-color: var(--zs-frist); }
.fp .ms:hover, .fp .ms:focus-visible { transform: rotate(45deg) scale(1.2); outline: none; box-shadow: 0 0 0 2px var(--feld), 0 0 0 4px var(--akzent-weich); }
.fp-legende { margin-top: 10px; }
.fp-legende .l-vorbereitung { background: linear-gradient(180deg, var(--c3), var(--c1)); }
.fp-legende .l-spaeter { background: none; border: 1.5px dashed color-mix(in srgb, var(--c3) 70%, transparent); }
.fp-legende .l-begutachtung { background: repeating-linear-gradient(135deg, var(--begutachtung) 0 3px, color-mix(in srgb, var(--begutachtung) 45%, transparent) 3px 6px); }
.legende .l-ms { width: 9px; height: 9px; border-radius: 2px; transform: rotate(45deg); background: var(--feld-oben); border: 2px solid var(--c1); }
.legende .l-ms.ok { background: var(--c1); }
.legende .l-ms.frist { background: var(--zs-frist); border-color: var(--zs-frist); }

.ue-bespr .bp { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--linie); }
.ue-bespr .bp:first-child { border-top: 0; padding-top: 0; }
.ue-bespr .av.klein { width: 30px; height: 30px; font-size: 11px; }
.ue-bespr .av.leer { background: var(--seg); box-shadow: inset 0 0 0 1px var(--linie2); }
.bp-koerper { min-width: 0; display: grid; gap: 3px; justify-items: start; }
.bp-koerper .wer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; font-size: 12.5px; color: var(--grau); }
.bp-koerper .wer b { color: var(--text); font-weight: var(--halbfett); font-size: 13.5px; }
.bp-koerper .wer .kz { color: var(--akzent-text); }
.bp-koerper .beitrag-text { font-size: 13.5px; }
.bp-koerper .antwort-form { justify-self: stretch; }
.bp-zeichen { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--seg); color: var(--grau); }
.bp-wechsel { margin: 0; font-size: 13.5px; color: var(--text2); }

table.ue-last { width: 100%; border-collapse: separate; border-spacing: 3px 4px; font-size: 13px; }
.ue-last th { font-weight: var(--halbfett); text-align: left; color: var(--grau); font-size: 12px; white-space: nowrap; }
.ue-last th[scope="row"] { color: var(--text); font-size: 13.5px; display: flex; align-items: center; gap: 8px; padding-right: 8px; }
.ue-last th.kw { text-align: center; font-size: 11px; font-weight: 500; padding-bottom: 2px; }
.ue-last th.kw.neuer-monat { color: var(--text2); font-weight: var(--halbfett); }
.ue-last .r { text-align: right; padding-right: 10px; white-space: nowrap; }
.ue-last td.zelle { padding: 0; }
.last-zelle { display: grid; place-items: center; min-width: 24px; height: 24px; border-radius: 5px; font-size: 12px; font-weight: var(--halbfett); background: none; box-shadow: inset 0 0 0 1px var(--linie); }
.last-zelle.s1 { background: var(--last-1); color: var(--last-1-fg); box-shadow: none; }
.last-zelle.s2 { background: var(--last-2); color: var(--last-2-fg); box-shadow: none; }
.last-zelle.s3 { background: var(--last-3); color: var(--last-3-fg); box-shadow: none; }
.last-zelle.s4 { background: var(--last-4); color: var(--last-4-fg); box-shadow: none; }

@media (max-width: 1250px) {
  /* schmal eine Spalte, Reihenfolge nach Wichtigkeit: Anträge, Termine, Besprochen, Fahrplan, Pinnwand, Auslastung, Stichtage, Trichter */
  .ue-spalten { grid-template-columns: minmax(0, 1fr); }
  .ue-spalte { display: contents; }
  .ue-spalte > .feld { order: var(--ordnung, 0); }
  .ue-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .ue-arbeit .ar { grid-template-columns: 62px minmax(0, 1fr) auto; gap: 6px 12px; }
  .ar-weg { grid-column: 2 / -1; }
  .ar-neu { grid-column: 3; grid-row: 1; align-self: start; }
  .ar-rest { grid-column: 3; grid-row: 1; align-self: end; }
  .ar-neu:empty { display: none; }
  .ar-frist { font-size: 18px; }
}
@media (max-width: 560px) {
  .ue-kacheln { gap: 10px; }
  .kachel { padding: 13px 14px; }
  .kachel .n { font-size: 28px; }
  .kachel .mini { display: none; }
  .fp-zeile { grid-template-columns: 70px minmax(0, 1fr); }
}

/* Vollansichten (A8) und Kalender, Bauabschnitt 5 */
.pfad { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 13px; color: var(--grau); }
.pfad a { color: var(--grau); text-decoration: none; }
.pfad a:hover { color: var(--akzent-text); text-decoration: underline; }
.voll-anzeige { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--linie); }
.voll-tabelle td small { display: block; color: var(--grau); font-size: 12.5px; margin-top: 2px; }
.voll-tabelle td small.rot { color: var(--spaet); font-weight: var(--halbfett); }
.voll-tabelle td { vertical-align: top; }
.voll-tabelle th, .voll-tabelle td { padding-left: 9px; padding-right: 9px; }
.voll-tabelle .zahl-zelle { white-space: nowrap; }
.voll-tabelle .antrag-zelle { min-width: 220px; max-width: 360px; }
/* Handy: jede Zeile als Block, links der Antrag mit Status darunter, rechts die Frist wie in der Übersicht (Prüfung 21.10.2026) */
@media (max-width: 560px) {
  .antrag-liste thead { display: none; }
  table.antrag-liste, .antrag-liste tbody { display: block; }
  .antrag-liste tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "antrag frist" "status frist"; gap: 6px 14px; padding: 12px 0; border-top: 1px solid var(--linie); }
  .antrag-liste tbody tr:first-child { border-top: 0; }
  .antrag-liste td { padding: 0; border: 0; }
  .antrag-liste tr:hover td { background: none; }
  .antrag-liste .antrag-zelle { grid-area: antrag; min-width: 0; max-width: none; }
  .antrag-liste .status-zelle { grid-area: status; }
  .antrag-liste .status-zelle small { display: inline; margin-left: 6px; }
  .antrag-liste .frist-zelle { grid-area: frist; text-align: right; }
}
.voll-tabelle .antrag-zelle a { color: var(--text); text-decoration: none; }
.voll-tabelle .antrag-zelle .kz { margin-right: 8px; }
.voll-tabelle .antrag-zelle a:hover .titel-text { text-decoration: underline; text-underline-offset: 3px; }
.voll-tabelle .antrag-zelle .titel-text { color: var(--text2); }
.voll-tabelle .antrag-zelle a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.voll-tabelle .antrag-zelle small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabelle-rahmen.rollen { overflow-x: auto; } /* breite Vollansichten rollen in sich statt die Seite zu verbreitern */
.voll-tabelle .fortschritt { display: grid; gap: 4px; }
.stationen.klein { width: 96px; height: 12px; }
.stationen.klein i { width: 10px; height: 10px; }
.schmal-lesen { max-width: 860px; }
.mehr.blaettern { display: flex; gap: 18px; margin-top: 14px; }
.anzeige-inhalt label small { display: block; font-size: 12px; color: var(--grau); }
.anzeige-inhalt input[type="radio"] { accent-color: var(--akzent); margin: 0; }
.anzeige-inhalt fieldset + fieldset { padding-top: 8px; border-top: 1px solid var(--linie); }

.kal-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 14px; }
.kal-kopf h2 { min-width: 9.5em; text-align: center; font-size: 18px; }
.kal-kopf .rund-klein:hover { background: var(--seg); color: var(--text); border-color: var(--linie); }
svg.i.zurueck { transform: rotate(90deg); }
svg.i.vor { transform: rotate(-90deg); }
.kal-legende { margin-left: auto; }
table.kal { width: 100%; table-layout: fixed; border-collapse: collapse; }
.kal th { font-size: 12px; font-weight: var(--halbfett); color: var(--grau); text-align: left; padding: 0 8px 8px; }
.kal th.kw, .kal td.kw { width: 52px; }
.kal tbody th.kw { font-size: 11.5px; font-weight: 500; vertical-align: top; padding: 10px 6px 0 0; white-space: nowrap; }
.kal td { vertical-align: top; height: 112px; padding: 6px 6px 8px; border: 1px solid var(--linie); background: var(--feld-oben); }
.kal td.draussen { background: color-mix(in srgb, var(--seg) 45%, transparent); }
.kal td.draussen .kal-tag { color: var(--grau); font-weight: 500; }
.kal-tag { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 4px; margin-bottom: 4px; border-radius: 12px; font-size: 13px; font-weight: var(--halbfett); }
.kal td.heute .kal-tag { background: var(--akzent); color: var(--akzent-fg); }
.kal td.heute { box-shadow: inset 0 0 0 1.5px var(--akzent); }
a.ke { display: block; margin-top: 3px; padding: 2px 6px 2px 8px; border-radius: 5px; font-size: 12px; font-weight: var(--halbfett); line-height: 1.35; color: var(--text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--seg); position: relative; }
/* impeccable-disable-next-line side-tab: Farbmarke für die Art eines Kalendereintrags wie in Outlook, keine Karte (Kalenderfarben auf Wunsch deutlicher, 19.10.2026) */
a.ke::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 3px; border-radius: 2px; background: var(--ke-farbe, var(--linie2)); }
a.ke:hover { filter: brightness(.96); text-decoration: underline; }
.k-frist { --ke-farbe: var(--k-frist); }
.k-start { --ke-farbe: var(--begutachtung); }
.k-meilenstein { --ke-farbe: var(--k-ms); }
.k-stichtag { --ke-farbe: var(--akzent); }
.k-runde { --ke-farbe: var(--k-runde); }
a.ke.k-frist { background: var(--k-frist); color: var(--k-frist-text); padding-left: 6px; }
a.ke.k-frist::before, a.ke.k-runde::before { display: none; }
a.ke.k-stichtag { background: var(--akzent-weich); color: var(--akzent-text); }
a.ke.k-start { background: var(--begutachtung-weich); color: var(--begutachtung-text); }
a.ke.k-meilenstein { background: var(--k-ms-weich); color: var(--k-ms-text); }
a.ke.k-runde { background: transparent; border: 1px dashed var(--k-runde); padding: 1px 5px; color: var(--grau); }
a.ke.ok { color: var(--grau); text-decoration: line-through; text-decoration-thickness: 1px; }
a.ke.spaet { color: var(--spaet); }
i.k-zeichen { display: inline-block; width: 4px; height: 13px; border-radius: 2px; background: var(--ke-farbe); flex: none; }
i.k-zeichen.k-runde { background: repeating-linear-gradient(180deg, var(--ke-farbe) 0 2px, transparent 2px 4px); }
.ke-mehr summary { margin-top: 3px; font-size: 12px; color: var(--akzent-text); cursor: pointer; list-style: none; }
.ke-mehr summary::-webkit-details-marker { display: none; }
.kal-agenda { display: none; }
.kal-agenda-tag { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--linie); }
.kal-agenda-tag:first-child { border-top: 0; }
.kal-agenda .tag { text-align: center; border-radius: 8px; background: var(--seg); padding: 4px 0 3px; font-size: 11px; font-weight: var(--halbfett); color: var(--grau); line-height: 1.15; }
.kal-agenda .tag b { display: block; font-size: 18px; color: var(--text); }
.kal-agenda ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.kal-agenda li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.kal-agenda li a { color: var(--text); text-decoration: none; }
.kal-agenda li a:hover { text-decoration: underline; }
.kal td { position: relative; }
.kal-sprung { display: none; }
.kal-agenda-tag { scroll-margin-top: calc(var(--kopf-hoehe) + 12px); border-radius: 8px; transition: background var(--schnell) var(--weich); }
.kal-agenda-tag:target { background: var(--akzent-weich); }
@media (max-width: 760px) {
  /* Monat schmal (Rückmeldung 20.10.2026): Raster mit einem Punkt je Termin, ein Tipp auf den Tag springt zu seinen Terminen darunter */
  .kal .kw { display: none; }
  .kal th { text-align: center; padding: 0 0 6px; font-size: 11.5px; }
  .kal td { height: 50px; padding: 4px 1px 3px; text-align: center; }
  .kal-tag { display: grid; width: 24px; min-width: 0; height: 24px; margin: 0 auto 3px; padding: 0; font-size: 12.5px; }
  a.ke, a.ke.k-frist, a.ke.k-runde { display: inline-block; width: 6px; height: 6px; margin: 0 1px; padding: 0; border: 0; border-radius: 50%; font-size: 0; vertical-align: top;
    background: var(--ke-farbe); pointer-events: none; }
  a.ke::before { display: none; }
  a.ke.k-runde { background: transparent; box-shadow: inset 0 0 0 1.5px var(--k-runde); }
  .ke-mehr { display: none; }
  .kal-sprung { display: block; position: absolute; inset: 0; border-radius: 0; }
  .kal-sprung:focus-visible { outline-offset: -2px; }
  .kal-agenda { display: block; margin-top: 14px; }
  .kal-agenda-tag { padding: 8px 6px; }
  .kal-legende { margin-left: 0; width: 100%; }
}

/* Auswertungen (S1 bis S7) und Bericht, Bauabschnitt 5. Diagrammfarben: eine Farbe von hell nach dunkel (geprüft mit dem Skill dataviz) */
:root { --d-o1: #8AA6D0; --d-o2: #5B7EB6; --d-o3: #335890; --d-o4: #183A68; --d-grau: #C7D2DE; }
:root[data-thema="dunkel"] { --d-o1: #2E5287; --d-o2: #4A6EA8; --d-o3: #7393C8; --d-o4: #A9C1E6; --d-grau: #3A4F74; }
/* Relevanz (Rückmeldung 19.10.2026): hoch Dunkelblau, mittel mittleres Blau, niedrig helles Weißblau, ohne Rand (zweite Rückmeldung
   am selben Tag). Ohne Bewertung neutral grau. Im Dunkeln umgekehrt: hoch am hellsten. */
:root { --d-rh: #183A68; --d-rm: #5E88C2; --d-rn: #D2E1F7; --d-ro: #B9BEC6; }
:root[data-thema="dunkel"] { --d-rh: #BDD3F2; --d-rm: #648EC8; --d-rn: #384E6E; --d-ro: #5A606B; }
/* Vom Aufruf zum Antrag: Stufen von Seeglas bis Nachtblau, größere Helligkeitsschritte als vorher, Farbton wandert leicht mit */
:root { --d-t1: #88BACE; --d-t2: #4788B0; --d-t3: #1F5587; --d-t4: #122750; }
:root[data-thema="dunkel"] { --d-t1: #29627A; --d-t2: #4A87B1; --d-t3: #83ABD9; --d-t4: #BFD2F3; }
.ausw-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ausw.breit { grid-column: 1 / -1; }
.ausw .feld-kopf { margin-bottom: 10px; }
.ausw-hinweis { font-size: 13px; color: var(--grau); margin: -4px 0 10px; }
.reiter.klein button { padding: 3px 10px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: 12.5px; font-weight: var(--halbfett); color: var(--text2); cursor: pointer; }
.reiter.klein button:hover { color: var(--text); }
.reiter.klein button[aria-pressed="true"] { color: var(--text); background: linear-gradient(180deg, var(--knopf-oben), var(--knopf-unten)); box-shadow: inset 0 1px 0 var(--kante-hell), 0 1px 3px rgba(20, 36, 60, .14); }
.d-rahmen { overflow-x: auto; }
svg.d-svg { display: block; width: 100%; max-height: 300px; height: auto; font-family: var(--schrift); }
.d-gitter { stroke: var(--linie); stroke-width: 1; }
.d-gitter.d-grund { stroke: var(--linie2); }
.d-achse { fill: var(--grau); font-size: 11px; font-variant-numeric: tabular-nums; }
.d-wert { fill: var(--text2); font-size: 11px; font-weight: var(--halbfett); }
.d-treffer { fill: transparent; }
.d-treffer:hover { fill: color-mix(in srgb, var(--seg) 55%, transparent); }
svg .d-o1 { fill: var(--d-o1); } svg .d-o2 { fill: var(--d-o2); } svg .d-o3 { fill: var(--d-o3); } svg .d-o4 { fill: var(--d-o4); }
svg .d-grau { fill: var(--d-grau); } svg .d-ok { fill: var(--ok); } svg .d-spaet { fill: var(--spaet); } svg .d-begutachtung { fill: var(--begutachtung); }
i.d-o1 { background: var(--d-o1); } i.d-o2 { background: var(--d-o2); } i.d-o3 { background: var(--d-o3); } i.d-o4 { background: var(--d-o4); }
i.d-grau { background: var(--d-grau); } i.d-ok { background: var(--ok); } i.d-spaet { background: var(--spaet); } i.d-begutachtung { background: var(--begutachtung); }
svg .d-rh { fill: var(--d-rh); } svg .d-rm { fill: var(--d-rm); } svg .d-rn { fill: var(--d-rn); } svg .d-ro { fill: var(--d-ro); }
i.d-rh { background: var(--d-rh); } i.d-rm { background: var(--d-rm); } i.d-rn { background: var(--d-rn); } i.d-ro { background: var(--d-ro); }
svg .d-t1 { fill: var(--d-t1); } svg .d-t2 { fill: var(--d-t2); } svg .d-t3 { fill: var(--d-t3); } svg .d-t4 { fill: var(--d-t4); }
i.d-t1 { background: var(--d-t1); } i.d-t2 { background: var(--d-t2); } i.d-t3 { background: var(--d-t3); } i.d-t4 { background: var(--d-t4); }
/* Auswahl der Relevanz direkt in der Karte: Schalter wie Chips, gefüllt heißt gezeigt */
.d-wahl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -2px 0 12px; }
.d-schalter { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 9px; border-radius: 999px; border: 1px solid var(--linie);
  background: var(--seg); color: var(--text); font-size: 12.5px; font-weight: 500; cursor: pointer; user-select: none;
  transition: background var(--schnell) var(--weich), color var(--schnell) var(--weich), border-color var(--schnell) var(--weich); }
.d-schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.d-schalter i { width: 10px; height: 10px; border-radius: 3px; flex: none; transition: background var(--schnell) var(--weich), box-shadow var(--schnell) var(--weich); }
.d-schalter:hover { border-color: var(--linie2); }
.d-schalter:has(input:focus-visible) { outline: 2px solid var(--fokus); outline-offset: 2px; }
.d-schalter:has(input:not(:checked)) { background: transparent; color: var(--grau); }
.d-schalter:has(input:not(:checked)) i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--linie2); }
.d-schalter:has(input:disabled) { cursor: default; }
.d-legende { margin-top: 8px; }
.d-legende i { width: 10px; height: 10px; border-radius: 3px; }
ul.d-balken, ul.d-quoten, ul.ausw-uebergaenge { list-style: none; margin: 0; padding: 0; }
.d-balken li { display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr) 52px; align-items: center; gap: 10px; padding: 3px 0; font-size: 13.5px; }
.d-balken .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text2); }
.d-balken .spur { height: 10px; border-radius: 0 5px 5px 0; }
.d-balken .spur i { display: block; height: 100%; min-width: 2px; border-radius: 0 4px 4px 0; }
.d-balken b { text-align: right; font-weight: var(--halbfett); font-variant-numeric: tabular-nums; }
.d-quoten li { display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr) 48px; grid-template-rows: auto auto; align-items: center; gap: 2px 10px; padding: 6px 0; border-top: 1px solid var(--linie); font-size: 13.5px; }
.d-quoten li:first-child { border-top: 0; }
.d-quoten .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-quoten .meter { height: 8px; border-radius: 4px; background: var(--ok-weich); overflow: hidden; }
.d-quoten .meter i { display: block; height: 100%; background: var(--ok); border-radius: 4px; }
.d-quoten b { text-align: right; font-weight: var(--halbfett); }
.d-quoten small { grid-column: 2 / -1; color: var(--grau); font-size: 12px; }
.ausw-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 12px; }
.ausw-kachel { display: grid; gap: 2px; padding: 12px 14px; border-radius: 10px; background: var(--seg); box-shadow: inset 0 1px 0 var(--kante-hell); }
.ausw-kachel .l { font-size: 12.5px; color: var(--grau); font-weight: var(--halbfett); }
.ausw-kachel b { font-size: 22px; font-weight: var(--halbfett); font-variant-numeric: proportional-nums; }
.ausw-kachel small { color: var(--grau); font-size: 12px; }
.ausw-uebergaenge { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 14px; }
.ausw-uebergaenge li { display: grid; gap: 1px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--linie); }
.ausw-uebergaenge b { font-size: 20px; font-weight: var(--halbfett); }
.ausw-uebergaenge span { font-size: 13px; }
.ausw-uebergaenge small { color: var(--grau); font-size: 12px; }
.ausw-tab td, .ausw-tab th { padding-top: 7px; padding-bottom: 7px; }
@media (max-width: 1100px) { .ausw-raster { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .d-balken li, .d-quoten li { grid-template-columns: minmax(96px, 38%) minmax(0, 1fr) 44px; } }

body.bericht-seite { background: var(--grund); }
.bericht { max-width: 980px; margin: 0 auto; padding: 28px 28px 48px; }
.bericht-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.bericht-kopf { border-bottom: 2px solid var(--text); padding-bottom: 12px; margin-bottom: 20px; }
.bericht-kopf h1 { font-size: 26px; margin: 2px 0 4px; }
.bericht-kopf p { margin: 0; color: var(--grau); font-size: 13.5px; }
.bericht-marke { font-weight: var(--halbfett); color: var(--text2) !important; }
.bericht-teil { margin-bottom: 26px; break-inside: avoid-page; overflow-x: auto; }
.bericht-teil h2 { font-size: 18px; margin-bottom: 10px; }
.bericht-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin: 0; }
.bericht-zahlen div { border: 1px solid var(--linie); border-radius: 8px; padding: 10px 12px; }
.bericht-zahlen dt { font-size: 12.5px; color: var(--grau); }
.bericht-zahlen dd { margin: 2px 0 0; font-size: 20px; font-weight: var(--halbfett); }
.bericht-hinweis { font-size: 12.5px; color: var(--grau); margin: 6px 0 10px; }
table.bericht-tabelle { width: 100%; border-collapse: collapse; font-size: 13px; }
.bericht-tabelle th { text-align: left; font-size: 12px; color: var(--grau); font-weight: var(--halbfett); padding: 0 8px 6px; border-bottom: 1px solid var(--linie2); }
.bericht-tabelle td { padding: 7px 8px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.bericht-tabelle small { display: block; color: var(--grau); font-size: 11.5px; }
.bericht-tabelle .rechts { text-align: right; white-space: nowrap; }
.bericht-tabelle tr { break-inside: avoid; }

/* Suche (K2), Bauabschnitt 5 */
.suche { position: relative; }
.suche-vorschlaege { display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; min-width: 440px; z-index: 40; max-height: min(70vh, 560px); overflow-y: auto;
  padding: 6px; border-radius: 12px; background: linear-gradient(180deg, var(--feld-oben), var(--feld-unten)); color: var(--text); border: 1px solid var(--feld-rand);
  box-shadow: inset 0 1px 0 var(--kante-hell), var(--schatten-hoch); animation: aufklappen 140ms var(--weich); }
.suche-vorschlaege.offen { display: block; }
.sv-gruppe + .sv-gruppe { border-top: 1px solid var(--linie); margin-top: 4px; padding-top: 4px; }
.sv-name { margin: 4px 8px 2px; font-size: 11.5px; font-weight: var(--halbfett); text-transform: uppercase; letter-spacing: .06em; color: var(--grau); }
.sv-name span { font-weight: 500; letter-spacing: 0; }
a.sv-treffer, a.sv-alle { display: flex; align-items: flex-start; gap: 10px; padding: 7px 8px; border-radius: var(--rund-klein); color: var(--text); text-decoration: none; }
a.sv-treffer:hover, a.sv-treffer:focus-visible, a.sv-alle:hover, a.sv-alle:focus-visible { background: var(--seg); outline: none; }
a.sv-treffer:focus-visible, a.sv-alle:focus-visible { box-shadow: inset 0 0 0 2px var(--fokus); }
.sv-treffer .kz { min-width: 74px; font-size: 13px; padding-top: 1px; }
.sv-treffer .av { flex: none; }
.sv-text { min-width: 0; display: grid; font-size: 13.5px; line-height: 1.35; }
.sv-text small { color: var(--grau); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.sv-alle { justify-content: center; margin-top: 4px; border-top: 1px solid var(--linie); border-radius: 0 0 8px 8px; color: var(--akzent-text); font-size: 13.5px; font-weight: var(--halbfett); }
.sv-leer { margin: 8px 10px; color: var(--grau); font-size: 13.5px; }
.nur-schmal { display: none !important; }
@media (max-width: 900px) { .nur-schmal { display: grid !important; } }
.such-seite { padding: 12px 14px; margin: 14px 0 16px; }
.such-zeile { display: flex; align-items: center; gap: 10px; color: var(--grau); }
.such-zeile input { flex: 1; min-width: 0; font: inherit; font-size: 16px; color: var(--text); background: transparent; border: 0; outline: none; padding: 6px 0; }
.such-gruppe { margin-bottom: 16px; }
ul.such-liste { list-style: none; margin: 0; padding: 0; }
.such-liste a { display: flex; align-items: flex-start; gap: 12px; padding: 9px 6px; margin: 0 -6px; border-radius: 8px; color: var(--text); text-decoration: none; border-top: 1px solid var(--linie); }
.such-liste li:first-child a { border-top: 0; }
.such-liste a:hover { background: color-mix(in srgb, var(--seg) 60%, transparent); }
.such-liste .kz { min-width: 90px; }
.such-text { display: grid; min-width: 0; }
.such-text small { color: var(--grau); font-size: 12.5px; }

/* Bauabschnitt 6: Fortschrittslinien füllen sich, Säulen und Balken wachsen einmal, neu geladene Teile blenden ein,
   was seit dem letzten Besuch neu ist, leuchtet auf Fristen kurz auf. Kennzahlen zählen per Skript hoch (radar.js). */
.stationen::after { transform-origin: left center; animation: fuellen 620ms var(--weich) 180ms both; }
svg.d-svg path[class^="d-"] { transform-box: fill-box; transform-origin: 50% 100%; animation: wachsen-hoch 520ms var(--weich) both; }
.d-balken .spur i, .trichter .bal i, .balken i, .d-quoten .meter i { transform-origin: left center; animation: fuellen 560ms var(--weich) 120ms both; }
@keyframes fuellen { from { transform: scaleX(0); } }
@keyframes wachsen-hoch { from { transform: scaleY(0); } }
.eingeblendet { animation: weich-ein 260ms var(--weich); }
@keyframes weich-ein { from { opacity: .3; } }
.ist-neu { animation: aufleuchten-neu 1800ms var(--weich) 500ms backwards; }
@keyframes aufleuchten-neu { 0%, 25% { background-color: color-mix(in srgb, var(--akzent-weich) 90%, transparent); } 100% { background-color: transparent; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
  .zugang-ringe span::after { animation: none !important; }  /* Dauerschleife: mit 1 ms würde sie flackern, also ganz aus */
}

@media print {
  .kopf, .leiste, .zeilenmenue, .knopf { display: none !important; }
  .app { display: block; }
  .inhalt { background: none; padding: 0; }
  .feld { box-shadow: none; }
  .nicht-drucken { display: none !important; }
  .bericht { max-width: none; padding: 0; }
}

/* Kleine Erläuterungen unter Listen und in Dialogen */
.notiz { margin: 16px 0 0; font-size: 13px; color: var(--grau); max-width: 80ch; }
.notiz.eng { margin: 0; }
.gedimmt { color: var(--grau); }

/* Rückmeldung zu Bauabschnitt 5 (19.10.2026) */

/* Kopfleiste: Linie weißgrau, „Neu“ und Knopf der Person schlanker mit Verlauf, Zahl an der Glocke kleiner mit Tiefe */
/* Linie unter der Kopfleiste: weißgrau über die ganze Breite, damit Kopf- und Seitenleiste sich trennen, 1 px wie vorher in Türkis */
.kopf::after { background: rgba(226, 232, 240, .3); }
/* Seit der Rückmeldung vom 30.10.2026 (Research, Runde 5) wie der Knopf „Research“: ohne Rahmen, schräger Verlauf mit weichem Licht oben links, in Türkis */
.neu-knopf {
  height: 30px; padding: 0 12px 0 9px; gap: 5px; border-radius: 9px; font-size: 13px; letter-spacing: .01em;
  background:
    radial-gradient(130% 150% at 0% 0%, rgba(255, 255, 255, .13), transparent 52%),
    linear-gradient(118deg, #1C9AA5 0%, #0E7F8A 46%, #075F68 100%);
  border: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(0, 0, 0, .28), 0 5px 12px -7px rgba(14, 130, 140, .5);
}
.neu-knopf svg.i { width: 13px; height: 13px; }
.kopf .av {
  width: 28px; height: 28px; font-size: 10.5px; font-weight: var(--halbfett); letter-spacing: .05em; border: 1px solid transparent;
  background:
    radial-gradient(circle at 32% 18%, rgba(255, 255, 255, .24), transparent 58%) padding-box,
    linear-gradient(160deg, color-mix(in srgb, var(--av-farbe) 68%, #9ADDE3), color-mix(in srgb, var(--av-farbe) 78%, #000)) padding-box,
    linear-gradient(160deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .08) 62%) border-box;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 5px 12px -5px rgba(0, 0, 0, .55);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
.rund .zahl {
  top: 4px; right: 1px; min-width: 14px; height: 14px; padding: 0 4px; border-radius: 7px; font-size: 9px; font-weight: 650; line-height: 1; letter-spacing: .01em;
  background: linear-gradient(180deg, #F27886 0%, #D9384E 55%, #B5212F 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -1px 0 rgba(0, 0, 0, .16), 0 0 0 1.5px var(--rahmen), 0 1px 3px rgba(0, 0, 0, .45);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .22);
}

/* Kalender über mehrere Monate: Karten mit kleinem Monatskalender und den Terminen darunter */
.kal-monate { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 14px; }
.kal-karte { display: grid; align-content: start; gap: 10px; padding: 14px 14px 12px; border: 1px solid var(--linie); border-radius: 12px; background: var(--feld-oben); min-width: 0; }
.kal-karte.jetzt { border-color: color-mix(in srgb, var(--akzent) 45%, var(--linie)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--akzent) 22%, transparent); }
.km-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.km-kopf h3 { font-size: 15px; margin: 0; }
.km-kopf h3 a { color: var(--text); text-decoration: none; }
.km-kopf h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.km-kopf h3 span { color: var(--grau); font-weight: 500; }
.km-zahl { font-size: 12px; color: var(--grau); white-space: nowrap; }
table.km-tage { width: 100%; table-layout: fixed; border-collapse: collapse; }
.km-tage th { font-size: 10.5px; font-weight: var(--halbfett); color: var(--grau); text-align: center; padding: 0 0 4px; }
.km-tage td { text-align: center; padding: 1px 0; height: 30px; }
.km-tag { position: relative; display: inline-grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text2); }
.km-tag.frei { color: var(--grau); }
.km-tag.belegt { font-weight: var(--halbfett); color: var(--text); background: var(--seg); }
.km-tag.heute { background: var(--akzent); color: var(--akzent-fg); }
.km-punkte { position: absolute; left: 0; right: 0; bottom: 3px; display: flex; justify-content: center; gap: 2px; }
.km-punkte i { width: 4px; height: 4px; border-radius: 50%; background: var(--ke-farbe); }
.km-tag.heute .km-punkte i { box-shadow: 0 0 0 1px var(--akzent-fg); }
ul.km-liste { list-style: none; margin: 0; padding: 8px 0 0; display: grid; gap: 1px; border-top: 1px solid var(--linie); }
.km-liste li { display: grid; grid-template-columns: 46px 4px minmax(0, 1fr); align-items: center; gap: 8px; font-size: 13px; min-height: 24px; }
.km-datum { color: var(--grau); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.km-liste a { color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.km-liste a:hover { text-decoration: underline; text-underline-offset: 2px; }
.km-liste li.ok a { color: var(--grau); text-decoration: line-through; text-decoration-thickness: 1px; }
.km-liste li.spaet a { color: var(--spaet); }
.km-mehr summary { font-size: 12.5px; color: var(--akzent-text); cursor: pointer; list-style: none; padding: 4px 0 0; }
.km-mehr summary::-webkit-details-marker { display: none; }
.km-mehr .km-liste { border-top: 0; padding-top: 4px; }
.km-leer { font-size: 13px; margin: 0; padding-top: 8px; border-top: 1px solid var(--linie); }

/* Tabelle der Stichtage: sortieren, filtern, bearbeiten */
.st-suche { position: relative; }
.st-suche svg { position: absolute; left: 8px; color: var(--grau); pointer-events: none; }
.st-suche input { font: inherit; font-size: 13px; color: var(--text); background: var(--eingabe); border: 1px solid var(--knopf-rand); border-radius: 8px; padding: 4px 8px 4px 28px; width: 210px; box-shadow: var(--eingabe-schatten); }
.st-suche input:focus { outline: none; border-color: var(--akzent); box-shadow: var(--eingabe-schatten), 0 0 0 3px var(--akzent-weich); }
.st-zahl { margin-left: auto; font-size: 12.5px; color: var(--grau); }
a.sortieren { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
a.sortieren svg { opacity: 0; transition: opacity var(--schnell) var(--weich), transform var(--schnell) var(--weich); }
a.sortieren:hover svg, a.sortieren:focus-visible svg { opacity: .5; }
a.sortieren.aktiv { color: var(--text); }
a.sortieren.aktiv svg { opacity: 1; }
a.sortieren svg.hoch { transform: rotate(180deg); }
.st-programm a { color: var(--text); font-weight: var(--halbfett); text-decoration: none; margin-right: 6px; }
.st-programm a:hover { text-decoration: underline; text-underline-offset: 3px; }
.st-programm .chip { vertical-align: 1px; margin-right: 4px; }
.chip.klein { font-size: 11.5px; padding: 0 7px; }
.chip.warn { background: var(--jetzt-weich); color: var(--jetzt-text); }
.st-tabelle tr.st-aus td, .st-tabelle tr.st-aus .st-programm a { color: var(--grau); }
.st-aktionen { display: inline-flex; gap: 4px; justify-content: flex-end; }
.st-tabelle .st-rh-klein { display: none; color: var(--grau); font-size: 12.5px; }

/* Seite eines Stichtags */
.titel .rechts form { margin: 0; }
.titel > .chip { align-self: center; }
.st-raster { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.st-seite { display: grid; gap: 16px; }
.st-meldung { margin-bottom: 16px; }
.meldung.warnung { background: var(--jetzt-weich); color: var(--text); border-color: color-mix(in srgb, var(--jetzt) 35%, transparent); }
.meldung.warnung svg { color: var(--jetzt-text); }
.meldung p { margin: 0; }
ul.st-termine { list-style: none; margin: 0; padding: 0; }
.st-termine li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--linie); font-variant-numeric: tabular-nums; }
.st-termine li:first-child { border-top: 0; padding-top: 0; }
.st-termine span { color: var(--grau); font-size: 13px; }
.st-link { margin: 12px 0 0; }
.st-link a { display: inline-flex; align-items: center; gap: 6px; color: var(--akzent-text); }
dl.st-stand { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 0 0 14px; font-size: 13.5px; }
.st-stand dt { color: var(--grau); }
.st-stand dd { margin: 0; }
@media (max-width: 1000px) { .st-raster { grid-template-columns: minmax(0, 1fr); } }
.st-tabelle .zahl-zelle .gedimmt { white-space: normal; display: inline-block; min-width: 9em; }
@media (max-width: 560px) {
  .st-tabelle .st-rh-klein { display: block; }
  .kalender-feld.mehrere .kal-kopf h2 { flex: 1 1 0; min-width: 0; font-size: 16px; }
  .st-filter .st-suche { flex: 1 1 100%; }
  .st-suche input { width: 100%; }
  .st-zahl { margin-left: 0; }
}
.formular .zeile2 > .eingabe { align-content: start; }

/* Rückmeldung 19.10.2026, zweiter Teil: Archiv, Projekt aus dem Steckbrief anlegen, Hinweise zum Status */
.meldung.info { background: var(--akzent-weich); color: var(--text); border-color: color-mix(in srgb, var(--akzent) 28%, transparent); }
.meldung.info svg { color: var(--akzent-text); flex: none; margin-top: 1px; }
.archiv-hinweis { align-items: center; margin: 0 0 16px; }
.archiv-hinweis p { margin: 0; flex: 1 1 auto; }
.archiv-hinweis .knopf { flex: none; margin-left: auto; }
[data-nur-bei][hidden], [data-zeigen-bei][hidden] { display: none !important; }
.status-ort .hilfe { font-size: 13px; color: var(--grau); margin: -4px 0 0; }
.kz-stift { width: 26px; height: 26px; opacity: .55; transition: opacity var(--schnell) var(--weich); }
.kz-stift:hover, .kz-stift:focus-visible { opacity: 1; }
/* Als Projekt anlegen: drei Karten zur Wahl, wie die Wahl im Formular, nur größer und mit einer Zeile Erklärung */
.stufen-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stufen-karte {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--knopf-rand); border-radius: 12px;
  background: var(--eingabe); box-shadow: var(--eingabe-schatten); cursor: pointer;
  transition: border-color var(--schnell) var(--weich), background var(--schnell) var(--weich);
}
.stufen-karte:hover { border-color: var(--linie2); }
.stufen-karte:has(input:checked) {
  border-color: var(--akzent); background: linear-gradient(180deg, var(--akzent-weich), color-mix(in srgb, var(--akzent-weich) 72%, var(--eingabe)));
  box-shadow: inset 0 1px 0 var(--kante-hell), 0 0 0 3px color-mix(in srgb, var(--akzent-weich) 55%, transparent);
}
.stufen-karte input[type="radio"] {
  appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin: 1px 0 0; border-radius: 50%;
  border: 1.5px solid var(--linie2); background: var(--eingabe); display: grid; place-items: center; cursor: pointer;
}
.stufen-karte input[type="radio"]::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--akzent-text); transform: scale(0); transition: transform var(--schnell) var(--weich); }
.stufen-karte input[type="radio"]:checked { border-color: var(--akzent-text); }
.stufen-karte input[type="radio"]:checked::after { transform: scale(1); }
.stufen-karte input[type="radio"]:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.stufen-karte span { display: grid; gap: 3px; min-width: 0; }
.stufen-karte b { font-size: 15px; font-weight: var(--halbfett); }
.stufen-karte small { font-size: 12.5px; line-height: 1.35; color: var(--grau); }
/* Zurückholen: Ziele nach Aufrufe und Projekte getrennt */
.ziel-gruppe { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 10px; }
.ziel-gruppe + .ziel-gruppe { margin-top: 8px; }
.ziel-name { font-size: 12px; font-weight: var(--halbfett); color: var(--grau); text-transform: uppercase; letter-spacing: .06em; }
.ziel-gruppe .wahl.reihe { display: flex; flex-wrap: wrap; gap: 8px; }
/* Archiv */
.archiv-tabelle td small { display: block; }
.art-chip { display: inline-flex; align-items: center; border-radius: 6px; padding: 1px 8px; font-size: 12.5px; font-weight: var(--halbfett); white-space: nowrap; background: var(--seg); color: var(--text2); box-shadow: inset 0 0 0 1px var(--linie); }
.art-chip.art-idee, .art-chip.art-skizze, .art-chip.art-antrag { background: color-mix(in srgb, var(--akzent-weich) 70%, var(--eingabe)); color: var(--akzent-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--akzent) 25%, transparent); }
.archiv-info .kz-oben { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.archiv-info h2 { margin: 0; font-size: 18px; line-height: 1.3; }
.info-liste { display: grid; grid-template-columns: minmax(110px, auto) minmax(0, 1fr); gap: 7px 16px; margin: 0; font-size: 14px; }
.info-liste dt { color: var(--grau); }
.info-liste dd { margin: 0; overflow-wrap: anywhere; }
.info-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font-size: 14px; }
.info-links a { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 640px) {
  .stufen-karten { grid-template-columns: minmax(0, 1fr); }
  .archiv-hinweis { flex-wrap: wrap; }
  .ziel-gruppe { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .info-liste { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .info-liste dd { margin-bottom: 6px; }
}
/* Archiv auf dem Handy: jede Zeile ein kompakter Eintrag, alles auf einen Blick, Sortieren als Auswahl statt Spaltenköpfe */
.archiv-sort { display: none; }
@media (max-width: 640px) {
  .archiv-sort { display: inline-flex; }
  .archiv-tabelle thead { display: none; }
  .archiv-tabelle, .archiv-tabelle tbody { display: block; }
  .archiv-tabelle tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 12px 2px; border-top: 1px solid var(--linie); }
  .archiv-tabelle tr:first-child { border-top: 0; }
  .archiv-tabelle td { display: block; padding: 0; border: 0; }
  .archiv-tabelle td.antrag-zelle { flex: 1 1 100%; min-width: 0; max-width: none; }
  .archiv-tabelle td small { display: inline; margin: 0 0 0 6px; }
  .archiv-tabelle td.antrag-zelle small { display: block; margin: 2px 0 0; }
  .archiv-tabelle .handy-label { display: inline; color: var(--grau); }
  .archiv-tabelle td.rechts { margin-left: auto; }
  .archiv-tabelle .zahl-zelle { white-space: normal; }
}

/* Bauabschnitt 6: System (H1), Datenstand in der Kopfleiste, Kurzanleitung (A6), Willkommen */
/* Zustand von Läufen und Quellen: Punkt und Wort sagen dasselbe, grün nur bei „Ohne Fehler“ und „Erreicht“ (Befund I7) */
.zustand { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: var(--halbfett); white-space: nowrap; color: var(--text2); }
.zustand::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--grau); }
.zustand.z-ok { color: var(--ok); } .zustand.z-ok::before { background: var(--ok); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ok) 16%, transparent); }
.zustand.z-warnung { color: var(--jetzt-text); } .zustand.z-warnung::before { background: var(--jetzt); box-shadow: 0 0 0 2px color-mix(in srgb, var(--jetzt) 16%, transparent); }
.zustand.z-fehler { color: var(--spaet); } .zustand.z-fehler::before { background: var(--spaet); box-shadow: 0 0 0 2px color-mix(in srgb, var(--spaet) 14%, transparent); }
.zustand.z-laeuft { color: var(--akzent-text); } .zustand.z-laeuft::before { background: var(--akzent); animation: pulsieren 1600ms var(--weich) infinite; }
.zustand.z-aus { color: var(--grau); font-weight: 500; } .zustand.z-aus::before { background: transparent; border: 1.5px solid var(--linie2); }
@keyframes pulsieren { 50% { opacity: .35; } }
.system-kacheln .kachel .n small { font-size: 18px; color: var(--kachel-dim); font-weight: 500; }
.system-tabelle td { vertical-align: top; }
.system-tabelle .haupt-zelle b { font-weight: var(--halbfett); }
.system-tabelle .fehler-text { display: block; margin-top: 3px; color: var(--grau); font-size: 12px; line-height: 1.4; max-width: 60ch; overflow-wrap: anywhere; }
.inhalt > .feld + .feld { margin-top: 16px; }
.knoepfe-reihe { display: flex; flex-wrap: wrap; gap: 8px; }

/* Kurzanleitung: lesbare Spalte, Sprungmarken oben */
.anleitung-inhalt { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 16px; }
.anleitung-inhalt a { padding: 5px 11px; border-radius: 999px; background: var(--seg); color: var(--text2); font-size: 13.5px; text-decoration: none; box-shadow: inset 0 1px 0 var(--kante-hell); transition: background var(--schnell) var(--weich), color var(--schnell) var(--weich); }
.anleitung-inhalt a:hover { background: var(--akzent-weich); color: var(--akzent-text); }
.anleitung { max-width: 780px; padding: 6px 28px 10px; }
.anleitung section { padding: 20px 0; border-top: 1px solid var(--linie); scroll-margin-top: 80px; }
.anleitung section:first-child { border-top: 0; }
.anleitung h2 { font-size: 18px; margin: 0 0 10px; }
.anleitung p { margin: 0 0 10px; line-height: 1.6; max-width: 68ch; }
.anleitung p:last-child { margin-bottom: 0; }
.anleitung-legende { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.anleitung-legende li { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.anleitung-legende li > span:last-child { color: var(--text2); }
.anleitung-seiten { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px 16px; margin: 4px 0 0; }
.anleitung-seiten dt { font-weight: var(--halbfett); }
.anleitung-seiten dd { margin: 0; color: var(--text2); line-height: 1.55; }
/* Impressum und Datenschutz (Phase 7): gleicher Lesesatz wie die Kurzanleitung, in der App und neben der Marke */
.recht ul { margin: 0 0 10px; padding-left: 20px; line-height: 1.6; max-width: 68ch; }
.recht li + li { margin-top: 6px; }
.recht address { font-style: normal; line-height: 1.6; margin: 0 0 10px; }
.recht code { font-size: .92em; padding: 0 5px; border-radius: 5px; background: var(--seg); }
.recht .stand { color: var(--grau); font-size: 13px; margin: 18px 0 0; }
.zugang-karte.breit { width: min(680px, 100%); }
.zugang-karte .anleitung { padding: 0; max-width: none; }
.zugang-fuss { display: flex; gap: 8px; margin: 28px 0 0; font-size: 13px; color: var(--grau); }
.zugang-fuss a { color: var(--text2); }
.anleitung kbd { font: inherit; font-size: 12.5px; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--linie2); background: var(--seg); }

/* Willkommen auf der Übersicht, bis die Kurzanleitung offen war */
.willkommen { align-items: center; margin: 14px 0 0; }
.willkommen p { margin: 0; flex: 1 1 auto; }
.willkommen form { margin: 0; }

/* Mein Bereich (Rückmeldung 19.10.2026): Hinweise an dich und von dir, Aufrufe bei dir */
nav.reiter.mb-mit { display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; margin: 0 0 12px; }
nav.reiter.mb-mit a { padding: 4px 11px; font-size: 13px; }
ul.nachrichten { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
li.nachricht { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 14px; border-radius: 12px;
  background: var(--feld-oben); box-shadow: inset 0 0 0 1px var(--linie); scroll-margin-top: calc(var(--kopf-hoehe) + 24px); }
li.nachricht.von-mir { margin-left: 28px; background: var(--seg); box-shadow: none; }
li.nachricht.neu { background: linear-gradient(180deg, color-mix(in srgb, var(--akzent-weich) 70%, var(--feld-oben)), var(--akzent-weich)); box-shadow: inset 3px 0 0 var(--akzent); }
li.nachricht:target { box-shadow: inset 0 0 0 1.5px var(--akzent); }
.nachricht .av.leer, .mb-erwaehnt .av.leer { background: var(--seg); box-shadow: inset 0 0 0 1px var(--linie2); }
.n-kopf { margin: 0 0 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 13px; color: var(--text2); }
.n-kopf time { color: var(--grau); font-size: 12px; }
.n-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 8px; font-size: 13px; }
.n-knoepfe:empty { display: none; }
.n-knoepfe form { margin: 0; }
.n-knoepfe .textknopf { display: inline-flex; align-items: center; gap: 5px; }
.textknopf.gedimmt { color: var(--grau); }
ul.mb-liste { list-style: none; margin: 0; padding: 0; display: grid; }
.mb-liste li { display: grid; gap: 2px; padding: 9px 0; border-top: 1px solid var(--linie); }
.mb-liste li:first-child { border-top: 0; padding-top: 0; }
.mb-liste a { color: var(--text); text-decoration: none; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.mb-liste a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mb-liste .kz { color: var(--akzent-text); margin-right: 3px; }
.mb-liste small { color: var(--grau); font-size: 12.5px; }
.mb-erwaehnt { display: grid; gap: 2px; margin: 0 -10px; }
@media (max-width: 640px) {
  li.nachricht.von-mir { margin-left: 14px; }
}

@media (max-width: 640px) {
  .system-tabelle thead { display: none; }
  .system-tabelle, .system-tabelle tbody { display: block; }
  .system-tabelle tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 11px 2px; border-top: 1px solid var(--linie); }
  .system-tabelle tr:first-child { border-top: 0; }
  .system-tabelle td { display: block; padding: 0; border: 0; }
  .system-tabelle td.haupt-zelle { flex: 1 1 0; min-width: 0; }
  .system-tabelle td:last-child { order: 1; flex: none; }
  .system-tabelle .nur-breit-text { display: none; }
  .system-tabelle tr::after { content: ""; order: 1; flex-basis: 100%; height: 0; }  /* Zeilenumbruch nach Name und Zustand */
  .system-tabelle td:not(.haupt-zelle):not(:last-child) { order: 2; font-size: 13px; color: var(--text2); }
  .system-tabelle .handy-label { display: inline; color: var(--grau); }
  .system-tabelle .zahl-zelle { text-align: left; }
  .anleitung { padding: 2px 16px 6px; }
  .anleitung-legende li, .anleitung-seiten { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .anleitung-seiten dd { margin-bottom: 8px; }
  .willkommen { flex-wrap: wrap; }
  .willkommen p { flex-basis: calc(100% - 40px); }
}
@media (max-width: 640px) {
  .rund-klein { width: 36px; height: 36px; }  /* Feinschliff mobil: gut zu treffen */
}

/* ===== Deep Research (Phase C, Richtungsvertrag .impeccable/surfaces/deep-research.md) =====
   Erbt den Rahmen der App. Eigen: Knopf „Research“ in der Kopfleiste (Kobaltblau mit feiner Kante), helle Spalte links zum Einklappen,
   Schreibfeld wie in einem Chat mit Glas bei Speicher, Datei, Aufruf und Modus, Antworten mit dem Zeichen des Radars. */

/* Knopf „Research“ in der Kopfleiste: so hoch wie „Neu“ und in derselben Schrift, ohne Rahmen, mit etwas Abstand zu „Neu“.
   Ein ruhiger Verlauf schräg von mittlerem zu tiefem Blau mit weichem Licht oben links (Rückmeldung 30.10.2026, Runde 4 und 5),
   „Neu“ trägt denselben Verlauf in Türkis.
   Die Zahl ist klein, weißgrau und leicht gläsern. */
.dr-knopf {
  position: relative; isolation: isolate; flex: none; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px 0 9px; margin-right: 14px;
  border-radius: 9px; border: 0; color: #fff; text-decoration: none; white-space: nowrap;
  font-weight: var(--halbfett); font-size: 13px; letter-spacing: .01em;
  background:
    radial-gradient(130% 150% at 0% 0%, rgba(255, 255, 255, .13), transparent 52%),
    linear-gradient(118deg, #4A6FAD 0%, #375C99 46%, #264378 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(0, 0, 0, .28), 0 5px 12px -7px rgba(56, 92, 160, .5);
  transition: filter var(--schnell) var(--weich), box-shadow var(--schnell) var(--weich);
}
.dr-knopf::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .12) 50%, transparent 62%) 140% 0 / 260% 100% no-repeat;
}
.dr-knopf:hover { filter: brightness(1.08); }
.dr-knopf:hover::after { background-position: -40% 0; transition: background-position 760ms var(--weich); }
.dr-knopf:focus-visible { outline: 2px solid var(--leuchten); outline-offset: 2px; }
/* Im Bereich selbst nur etwas heller, ohne Ring, damit kein Rahmen entsteht */
.dr-knopf[aria-current="page"] { filter: brightness(1.05); }
.dr-knopf svg.i { width: 13px; height: 13px; }
.dr-zahl-kopf {
  position: absolute; top: -5px; right: -6px; min-width: 14px; height: 14px; padding: 0 3.5px; border-radius: 7px; display: grid; place-items: center;
  font: 700 9.5px/1 var(--schrift); letter-spacing: 0; font-variant-numeric: tabular-nums; color: #1B2A44;
  background: linear-gradient(180deg, rgba(250, 252, 255, .9), rgba(214, 223, 236, .8)); border: 1px solid rgba(255, 255, 255, .65);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 3px rgba(4, 12, 26, .4);
  -webkit-backdrop-filter: blur(6px) saturate(1.4); backdrop-filter: blur(6px) saturate(1.4);
}

/* Rahmen des Bereichs: schmale App-Leiste, helle Spalte, Fläche */
.dr-seite .inhalt { padding: 0; display: block; }
.dr-rahmen [hidden] { display: none !important; }
/* Ohne Einblenden: eine Animation der Deckkraft am Rahmen würde das Glas der Menüs abschneiden */
.dr-seite .inhalt > .dr-rahmen { animation: none; }
.dr-rahmen { display: grid; grid-template-columns: 272px minmax(0, 1fr); min-height: calc(100dvh - var(--kopf-hoehe)); }
.dr-spalte {
  position: sticky; top: var(--kopf-hoehe); align-self: start; height: calc(100dvh - var(--kopf-hoehe)); overflow-y: auto;
  display: flex; flex-direction: column; gap: 1px; padding: 16px 12px 14px;
  background: linear-gradient(180deg, var(--feld-oben), var(--feld-unten)); border-right: 1px solid var(--feld-rand);
  box-shadow: inset -1px 0 0 var(--kante-hell), 6px 0 18px -14px rgba(20, 36, 60, .25); scrollbar-color: var(--linie2) transparent;
  scrollbar-width: thin;
}
/* „Neuer Chat“ kompakt wie „Neu“ in der Kopfleiste (Rückmeldung 30.10.2026, Runde 2) */
.knopf.dr-neu { align-self: flex-start; min-height: 32px; height: 32px; margin: 0 2px 6px; padding: 0 12px 0 9px; gap: 5px; border-radius: 9px; font-size: 13px; }
.dr-gruppe { display: grid; gap: 1px; padding-top: 8px; margin-top: 8px; border-top: 1px solid var(--linie); }
.dr-neu + .dr-gruppe { border-top: 0; margin-top: 4px; padding-top: 4px; }
.dr-gk { display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 4px 2px 2px; }
.dr-gk-knopf {
  flex: 1; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 6px; border: 0; border-radius: 7px; background: none; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: var(--halbfett); color: var(--grau); text-align: left; transition: background var(--schnell) var(--weich), color var(--schnell) var(--weich);
}
.dr-gk-knopf:hover { color: var(--text); background: color-mix(in srgb, var(--seg) 70%, transparent); }
.dr-gk-knopf:focus-visible { outline: 2px solid var(--fokus); outline-offset: 1px; }
.dr-pfeil { transition: transform var(--schnell) var(--weich); }
.dr-gk-knopf[aria-expanded="false"] .dr-pfeil { transform: rotate(-90deg); }
.dr-gl { display: grid; gap: 1px; }
.dr-gl[hidden] { display: none; }
.dr-zeile { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--rund-klein); border: 1px solid transparent; color: var(--text); text-decoration: none; font-size: 14px;
  transition: background var(--schnell) var(--weich), border-color var(--schnell) var(--weich); }
.dr-zeile svg.i { width: 17px; height: 17px; color: var(--grau); transition: color var(--schnell) var(--weich); }
.dr-zeile:hover { background: var(--seg); }
.dr-zeile:hover svg.i { color: var(--akzent-text); }
/* Gewählte Zeile: zarter, durchscheinender Rahmen statt kräftigem Grün */
.dr-zeile[aria-current="page"] { background: color-mix(in srgb, var(--akzent-weich) 48%, transparent); color: var(--akzent-text); font-weight: 500;
  border-color: color-mix(in srgb, var(--akzent) 12%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, #FFFFFF 45%, transparent); }
.dr-zeile[aria-current="page"] svg.i { color: var(--akzent-text); }
.dr-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-zahl { font-size: 12.5px; color: var(--grau); font-variant-numeric: tabular-nums; }
.dr-tag { margin: 8px 8px 2px; font-size: 12px; color: var(--grau); }
.dr-tag.kocht { font-weight: var(--halbfett); color: var(--akzent-text); }
.dr-auftrag { display: flex; align-items: flex-start; gap: 9px; padding: 6px 8px; border-radius: var(--rund-klein); color: var(--text); text-decoration: none; font-size: 13.5px; line-height: 1.35; }
.dr-auftrag:hover { background: var(--seg); }
.dr-auftrag[aria-current="page"] { background: var(--seg); box-shadow: inset 0 0 0 1px var(--linie2); }
.dr-at { display: grid; min-width: 0; flex: 1; }
.dr-at b { font-weight: var(--halbfett); font-size: 12px; color: var(--grau); }
.dr-at span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-auftrag small { flex: none; font-size: 12px; font-weight: var(--halbfett); color: var(--akzent-text); margin-top: 1px; }
.dr-auftrag.z-wartet small { color: var(--grau); }
.dr-punkt { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--linie2); }
.z-laeuft .dr-punkt { background: var(--akzent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 24%, transparent); animation: dr-puls 1.8s ease-in-out infinite; }
.z-wartet .dr-punkt { background: transparent; border: 1.5px dashed var(--grau); }
@keyframes dr-puls { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--akzent) 0%, transparent); } }
.dr-spalte-fuss { margin-top: auto; padding-top: 12px; display: grid; gap: 6px; }
.dr-hinweis { margin: 0 2px; padding: 12px 6px 4px; display: flex; gap: 7px; font-size: 12.5px; line-height: 1.4; color: var(--grau); border-top: 1px solid var(--linie); }
.dr-hinweis svg.i { margin-top: 1px; }
.dr-einklappen {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border-radius: var(--rund-klein); border: 1px solid transparent; background: none;
  color: var(--grau); font: inherit; font-size: 13.5px; text-align: left; white-space: nowrap; overflow: hidden; cursor: pointer;
  transition: background var(--schnell) var(--weich), color var(--schnell) var(--weich);
}
.dr-einklappen:hover { color: var(--text); background: var(--seg); }
.dr-einklappen:focus-visible { outline: 2px solid var(--fokus); outline-offset: 1px; }
.dr-einklappen svg.i { width: 17px; height: 17px; }
.dr-nur-schmal { display: none; }
/* Eingeklappte Spalte (ab 901 px): nur Symbole wie in der Leiste der App, Namen als Kurzinfo */
@media (min-width: 901px) {
  .dr-rahmen { transition: grid-template-columns 260ms var(--weich); }
  .dr-rahmen.spalte-zu { grid-template-columns: 60px minmax(0, 1fr); }
  /* Eingeklappt ohne Rollbalken: Unter Windows nahm er der schmalen Spalte ein Viertel der Breite (Rückmeldung 03.11.2026). Die Abstände
     sind so knapp, dass die Spalte auch bei 650 px Fensterhöhe ganz passt; darunter rollt sie weiter, und „Spalte ausklappen“ bleibt unten stehen. */
  .dr-rahmen.spalte-zu .dr-spalte { padding: 10px 8px; overflow-x: hidden; scrollbar-width: none; }
  .dr-rahmen.spalte-zu .dr-spalte::-webkit-scrollbar { display: none; }
  .dr-rahmen.spalte-zu .dr-spalte-fuss { position: sticky; bottom: -10px; margin-bottom: -10px; padding: 8px 0 10px; background: var(--feld-unten); }
  .dr-rahmen.spalte-zu .dr-spalte :is(.dr-name, .dr-wort, .dr-zahl, .dr-gk, .dr-hinweis) { display: none; }
  /* Zugeklappte Gruppen zeigen eingeklappt trotzdem ihre Symbole, aber nur Werkzeuge und Speicher. Aufträge und Archiv bleiben eingeklappt
     immer ohne Liste, auch wenn ihre Gruppe zugeklappt ist (Bild des Nutzers vom 03.11.2026: dann standen dort Punkte mit „läuft“). */
  .dr-rahmen.spalte-zu .dr-gruppe:not(.dr-verlauf) .dr-gl[hidden] { display: grid !important; }
  /* Eingeklappt: Aufträge und Archiv nur als Symbol, ohne Liste und ohne Text (Rückmeldung 03.11.2026) */
  .dr-rahmen.spalte-zu .dr-verlauf .dr-gl, .dr-rahmen.spalte-zu .dr-verlauf .dr-gl[hidden] { display: none !important; }
  .dr-rahmen.spalte-zu .dr-spalte :is(.dr-at, .dr-tag) { display: none; }
  .dr-rahmen.spalte-zu .dr-nur-schmal { display: flex; }
  .dr-rahmen.spalte-zu :is(.dr-zeile, .dr-einklappen) { justify-content: center; gap: 0; padding: 6px 0; }
  .dr-rahmen.spalte-zu .knopf.dr-neu { align-self: stretch; justify-content: center; padding: 0; margin: 0 0 6px; }
  .dr-rahmen.spalte-zu .dr-gruppe { margin-top: 4px; padding-top: 4px; }
}
.dr-flaeche { padding: 28px var(--rand-seite) 56px; display: grid; gap: 20px; align-content: start; min-width: 0; }
.dr-oben { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (min-width: 901px) { .dr-oben:not(:has(.dr-zurueck-knopf)) { display: none; } }
/* „Zurück“ steht über der linken Kante des Inhalts, gleich wie breit die Seite ist */
.dr-oben { width: 100%; margin-inline: auto; }
.dr-flaeche:has(> .dr-mitte) > .dr-oben { max-width: 780px; }
.dr-flaeche:has(> .dr-bericht) > .dr-oben { max-width: 1040px; }
.dr-flaeche:has(> .dr-breit) > .dr-oben { max-width: 1120px; }
.dr-flaeche > .meldungen { width: 100%; max-width: 780px; margin-inline: auto; }
.dr-flaeche.voll > .meldungen { max-width: 1040px; }
.dr-menue-knopf { display: none; }
.dr-mitte { width: 100%; max-width: 780px; margin-inline: auto; display: grid; gap: 20px; align-content: start; }
.dr-breit { width: 100%; max-width: 1120px; margin-inline: auto; display: grid; gap: 18px; align-content: start; }
.dr-bericht { width: 100%; max-width: 1040px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }

/* Start: Frage, mit Luft die sechs Werkzeuge, mit Luft das Schreibfeld, dann Cooking und der Speicher (Rückmeldung 30.10.2026, Runde 2) */
.dr-start { padding-top: clamp(8px, 6vh, 64px); gap: 0; }
.dr-frage { margin: 0 0 40px; font-size: 30px; letter-spacing: -.02em; text-align: center; text-wrap: balance; }
.dr-start .dr-schreiben { margin-top: 44px; }
.dr-werkzeugwahl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dr-chip {
  height: 100%; display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border-radius: 12px; color: var(--text); text-decoration: none;
  border: 1px solid var(--feld-rand); background: linear-gradient(180deg, var(--feld-oben), var(--feld-unten));
  box-shadow: inset 0 1px 0 var(--kante-hell), 0 1px 2px rgba(20, 36, 60, .05);
  transition: border-color var(--schnell) var(--weich), box-shadow var(--schnell) var(--weich), transform var(--schnell) var(--weich);
}
.dr-chip svg.i { color: var(--akzent-text); margin-top: 1px; }
.dr-chip b { display: block; font-size: 14px; font-weight: var(--halbfett); }
.dr-chip small { display: block; margin-top: 1px; color: var(--grau); font-size: 12.5px; line-height: 1.35; }
.dr-chip:hover { border-color: color-mix(in srgb, var(--akzent) 40%, var(--feld-rand)); box-shadow: inset 0 1px 0 var(--kante-hell), 0 8px 20px -10px rgba(10, 118, 130, .4); transform: translateY(-1px); }
.dr-start .dr-kochen { margin-top: 56px; }
.dr-start .dr-aus-speicher { margin-top: 44px; }

/* Cooking: das Wort schimmert (wie „Thinking“ in anderen Chats); im Verlauf sendet das Zeichen des Radars */
.dr-schimmer { font-weight: var(--halbfett); }
.kocht .dr-schimmer, .dr-lauf .dr-schimmer, .dr-waehlt .dr-schimmer {
  -webkit-mask-image: linear-gradient(100deg, #000 30%, rgba(0, 0, 0, .38) 50%, #000 70%); mask-image: linear-gradient(100deg, #000 30%, rgba(0, 0, 0, .38) 50%, #000 70%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%; animation: dr-schimmern 2.2s linear infinite;
}
@keyframes dr-schimmern { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
.kocht .dr-marke .m-bogen { animation: dr-senden 1.6s var(--weich) infinite; }
.kocht .dr-marke .m-bogen-2 { animation-delay: 200ms; }
.kocht .dr-marke .m-punkt { animation: dr-punkt-glimmen 1.6s ease-in-out infinite; }
@keyframes dr-senden { 0% { opacity: .18; } 30% { opacity: 1; fill: #4FD1C5; } 70% { opacity: 1; } 100% { opacity: .18; } }
@keyframes dr-punkt-glimmen { 50% { fill: #BFF3EE; } }

.dr-block { display: grid; gap: 10px; }
.dr-block h2 { display: flex; align-items: baseline; gap: 10px; font-size: 15px; }
.dr-block h2 .u { color: var(--grau); font-size: 13px; font-weight: 400; }
.dr-laufliste, .dr-vorschlaege { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dr-laufliste a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--feld-rand); background: var(--feld); color: var(--text); text-decoration: none; font-size: 14px;
  transition: border-color var(--schnell) var(--weich); }
.dr-laufliste a:hover { border-color: var(--linie2); }
.dr-laufliste .dr-punkt { margin-top: 0; }
.dr-lt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-lt b { font-weight: var(--halbfett); }
.dr-laufliste .person-klein { font-size: 13px; color: var(--text2); }
.dr-laufliste small { color: var(--grau); font-size: 12.5px; white-space: nowrap; min-width: 64px; text-align: right; }
.dr-vorschlaege a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; border: 1px dashed var(--linie2); color: var(--text); text-decoration: none; font-size: 14px;
  transition: border-color var(--schnell) var(--weich), background var(--schnell) var(--weich); }
.dr-vorschlaege a:hover { border-style: solid; border-color: color-mix(in srgb, var(--akzent) 50%, var(--linie2)); background: var(--feld); }
.dr-vw { min-width: 132px; font-weight: var(--halbfett); color: var(--akzent-text); }
.dr-vorschlaege svg.i { flex: none; color: var(--grau); }
.dr-vorschlaege small { flex: none; margin-left: auto; color: var(--grau); font-size: 12.5px; }

/* Schreibfeld wie in einem Chat */
.dr-schreiben { display: grid; gap: 10px; margin: 0; }
.dr-schreibfeld {
  position: relative; border: 1px solid var(--knopf-rand); border-radius: 16px;
  background:
    radial-gradient(120% 150% at 0% 100%, color-mix(in srgb, var(--akzent) 7%, transparent), transparent 55%),
    radial-gradient(90% 130% at 100% 100%, rgba(58, 111, 216, .06), transparent 60%), var(--eingabe);
  box-shadow: var(--eingabe-schatten), var(--schatten); transition: border-color var(--schnell) var(--weich), box-shadow var(--schnell) var(--weich);
}
.dr-schreibfeld:focus-within { border-color: var(--akzent); box-shadow: var(--eingabe-schatten), 0 0 0 3px var(--akzent-weich), var(--schatten); }
.dr-schreibfeld.klein { border-radius: 12px; box-shadow: var(--eingabe-schatten); }
.dr-schreibfeld textarea, .eingabe .dr-schreibfeld textarea {
  display: block; width: 100%; min-height: 96px; margin: 0; padding: 14px 16px 6px; border: 0; border-radius: 16px 16px 0 0; background: transparent; box-shadow: none;
  color: var(--text); font: inherit; font-size: 15px; line-height: 1.5; resize: none; field-sizing: content; max-height: 42vh;
}
.dr-schreibfeld.klein textarea, .eingabe .dr-schreibfeld.klein textarea { min-height: 76px; font-size: 14.5px; padding: 10px 12px 4px; border-radius: 12px 12px 0 0; }
.dr-schreibfeld textarea:hover, .dr-schreibfeld textarea:focus, .eingabe .dr-schreibfeld textarea:hover, .eingabe .dr-schreibfeld textarea:focus { outline: none; border: 0; box-shadow: none; }
.dr-schreibfeld textarea::placeholder { color: var(--grau); }
.dr-schreib-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 0; padding: 6px 8px 8px; }
.dr-klein-knopf {
  position: relative; display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 8px; border-radius: 9px; border: 1px solid transparent; background: none;
  color: var(--grau); font: inherit; font-size: 13px; text-decoration: none; cursor: pointer; list-style: none;
  transition: background var(--schnell) var(--weich), color var(--schnell) var(--weich), border-color var(--schnell) var(--weich), box-shadow var(--schnell) var(--weich);
}
.dr-klein-knopf::-webkit-details-marker { display: none; }
/* Glas statt Grau, wenn man darüber fährt oder das Menü offen ist (Rückmeldung 30.10.2026) */
.dr-klein-knopf:hover, details[open] > .dr-klein-knopf, .dr-klein-knopf[aria-expanded="true"] {
  color: var(--text); border-color: rgba(255, 255, 255, .95);
  background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .38));
  box-shadow: inset 0 1px 0 #FFFFFF, 0 0 0 1px color-mix(in srgb, var(--akzent) 13%, transparent), 0 4px 12px -5px rgba(10, 90, 110, .28);
  -webkit-backdrop-filter: blur(10px) saturate(1.6); backdrop-filter: blur(10px) saturate(1.6);
}
:root[data-thema="dunkel"] .dr-klein-knopf:hover, :root[data-thema="dunkel"] details[open] > .dr-klein-knopf, :root[data-thema="dunkel"] .dr-klein-knopf[aria-expanded="true"] {
  border-color: rgba(190, 215, 255, .18); background: linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 4px 12px -5px rgba(0, 0, 0, .5);
}
.dr-klein-knopf:focus-visible, .dr-datei:focus-within { outline: 2px solid var(--fokus); outline-offset: 2px; }
/* Senden und Starten: nur das Zeichen im kleinen Viereck, überall gleich (Rückmeldung 30.10.2026, Runde 3 und 4) */
.knopf.dr-senden { flex: none; width: 30px; height: 30px; min-height: 30px; padding: 0; justify-content: center; border-radius: 9px; }
.knopf.dr-senden svg.i { width: 14px; height: 14px; }
.dr-senden { margin-left: 8px; transition: background var(--schnell) var(--weich), filter var(--schnell) var(--weich), box-shadow var(--schnell) var(--weich), color var(--schnell) var(--weich); }
/* Senden ist matt, solange nichts im Feld steht; mit Text oder Werkzeug leuchtet es wie gewohnt */
.dr-schreibfeld:has(textarea:placeholder-shown):not(.bereit) .dr-senden {
  color: rgba(255, 255, 255, .92); border-color: rgba(0, 0, 0, .06); background: linear-gradient(180deg, #5F9CA2, #4F8A90);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
.dr-schreibfeld:has(textarea:placeholder-shown):not(.bereit) .dr-senden::after { display: none; }
:root[data-thema="dunkel"] .dr-schreibfeld:has(textarea:placeholder-shown):not(.bereit) .dr-senden { color: rgba(225, 238, 242, .82); background: linear-gradient(180deg, #2C5C63, #244E55); }

/* Beigaben im Schreibfeld: Werkzeug, Einträge, Aufrufe, Dateien als farbige Plaketten */
.dr-beigaben { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px 0; }
.dr-beigaben:empty { display: none; }
.dr-beigaben.fest { padding: 8px 0 0; }
.dr-beigabe {
  --b-grund: var(--seg); --b-text: var(--text2); --b-rand: var(--linie2);
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 28px; padding: 0 9px; border-radius: 8px; font-size: 13px; font-weight: var(--halbfett);
  color: var(--b-text); background: var(--b-grund); border: 1px solid var(--b-rand); animation: dr-beigabe 220ms var(--weich);
}
.dr-beigabe > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-beigabe:has(.dr-beigabe-weg) { padding-right: 3px; }
@keyframes dr-beigabe { from { opacity: 0; transform: scale(.94); } }
.dr-beigabe-weg { flex: none; width: 22px; height: 22px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: none; color: inherit; opacity: .7; cursor: pointer; }
.dr-beigabe-weg:hover { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }
.dr-beigabe-weg svg.i { width: 13px; height: 13px; }
.dr-beigabe.b-werkzeug { --b-text: #FFFFFF; --b-rand: rgba(0, 0, 0, .12); background: linear-gradient(180deg, var(--akzent-oben), var(--akzent-unten)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }
.dr-beigabe.b-aufruf { --b-grund: color-mix(in srgb, #3A6FD8 11%, var(--eingabe)); --b-text: #24508F; --b-rand: color-mix(in srgb, #3A6FD8 28%, transparent); }
.dr-beigabe.b-datei { --b-grund: var(--seg); --b-text: var(--text2); --b-rand: var(--linie2); }
.dr-beigabe.b-speicher { --b-grund: color-mix(in srgb, var(--k) 12%, var(--eingabe)); --b-text: color-mix(in srgb, var(--k) 82%, var(--text)); --b-rand: color-mix(in srgb, var(--k) 30%, transparent); }
/* Ein Ton je Kategorie des Speichers, gemeinsam für Plakette und Symbolfeld */
.k-labore { --k: #2E5487; } .k-ideen { --k: #0C7C87; } .k-partner { --k: #4E6AA6; }
.k-programme { --k: #1A3A66; } .k-unterlagen { --k: #66768D; } .k-ergebnisse { --k: #2C7A5F; }
:root[data-thema="dunkel"] .dr-beigabe.b-aufruf { --b-text: #A9C6FF; --b-grund: color-mix(in srgb, #3A6FD8 20%, var(--eingabe)); }
:root[data-thema="dunkel"] .dr-beigabe.b-speicher { --b-text: color-mix(in srgb, var(--k) 35%, #FFFFFF); --b-grund: color-mix(in srgb, var(--k) 24%, var(--eingabe)); --b-rand: color-mix(in srgb, var(--k) 45%, transparent); }

/* Datei hineinziehen */
.dr-ablage { position: absolute; inset: -1px; z-index: 4; display: none; place-items: center; align-content: center; gap: 6px; border-radius: inherit; pointer-events: none;
  border: 2px dashed var(--akzent); background: color-mix(in srgb, var(--akzent-weich) 82%, transparent); color: var(--akzent-text); font-weight: var(--halbfett);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.dr-ablage svg.i { width: 24px; height: 24px; }
.dr-schreibfeld.zieht .dr-ablage { display: grid; }

/* Glas für die Menüs am Schreibfeld */
.dr-glas {
  background: color-mix(in srgb, var(--grund) 84%, transparent); border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 1px color-mix(in srgb, var(--feld-rand) 70%, transparent), 0 22px 48px -18px rgba(20, 36, 60, .34);
  -webkit-backdrop-filter: blur(20px) saturate(1.7); backdrop-filter: blur(20px) saturate(1.7);
}
:root[data-thema="dunkel"] .dr-glas { background: rgba(16, 28, 50, .78); border-color: rgba(170, 200, 250, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 22px 48px -18px rgba(0, 0, 0, .7); }
.dr-beifuegen > .aufklapp-inhalt { left: 0; right: auto; top: calc(100% + 8px); }
.dr-pop { width: min(360px, calc(100vw - 32px)); padding: 10px; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.dr-pop-breit { width: min(470px, calc(100vw - 32px)); }
/* Spalten mit Mindestbreite 0: sonst schiebt die Summe der drei Filter das Suchfeld über den Rand des Glases */
.dr-pop .dr-sw, .dr-pop .dr-aw { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }

/* Suche, Gruppen zum Auf- und Zuklappen, Zeilen zum Wählen */
.dr-such-feld { position: relative; display: flex; align-items: center; }
.dr-such-feld svg.i { position: absolute; left: 11px; color: var(--grau); pointer-events: none; }
.dr-such-feld input[type="search"], .eingabe .dr-such-feld input[type="search"] {
  width: 100%; min-height: 36px; padding: 6px 10px 6px 33px; border-radius: 9px; border: 1px solid var(--knopf-rand); background: var(--eingabe);
  color: var(--text); font: inherit; font-size: 14px; box-shadow: var(--eingabe-schatten);
}
.dr-such-feld input[type="search"]:focus, .eingabe .dr-such-feld input[type="search"]:focus { outline: none; border-color: var(--akzent); box-shadow: var(--eingabe-schatten), 0 0 0 3px var(--akzent-weich); }
.dr-klapp-liste { display: grid; gap: 2px; max-height: 340px; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: var(--linie2) transparent; }
.dr-klapp > summary {
  list-style: none; display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 8px; border-radius: 8px; cursor: pointer;
  font-size: 13px; font-weight: var(--halbfett); color: var(--text2); transition: background var(--schnell) var(--weich);
}
.dr-klapp > summary::-webkit-details-marker { display: none; }
.dr-klapp > summary:hover { background: color-mix(in srgb, var(--seg) 70%, transparent); }
.dr-klapp > summary:focus-visible { outline: 2px solid var(--fokus); outline-offset: -2px; }
.dr-klapp > summary small { font-weight: 400; color: var(--grau); font-size: 12px; }
.dr-klapp > summary .dr-zahl { margin-left: auto; }
.dr-klapp:not([open]) > summary .dr-pfeil { transform: rotate(-90deg); }
.dr-klapp ul { list-style: none; margin: 0 0 6px; padding: 0 0 0 4px; display: grid; gap: 1px; }
.aufklapp-inhalt .dr-nehmen, .dr-nehmen {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 0; border-radius: 8px; background: none; text-align: left; cursor: pointer;
  color: var(--text); font: inherit; font-size: 13.5px;
}
.aufklapp-inhalt .dr-nehmen:hover, .dr-nehmen:hover, .dr-nehmen:focus-visible { background: color-mix(in srgb, var(--akzent-weich) 72%, transparent); outline: none; }
.dr-nehmen-text { flex: 1; min-width: 0; display: grid; }
.dr-nehmen-text b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-nehmen-text small { color: var(--grau); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-haken { visibility: hidden; color: var(--akzent-text); }
.dr-nehmen[aria-pressed="true"] { background: var(--akzent-weich); }
.dr-nehmen[aria-pressed="true"] .dr-haken { visibility: visible; }
.dr-nehmen .relevanz { flex: none; font-size: 12px; }
.dr-wz-symbol.mini { width: 22px; height: 22px; border-radius: 6px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }
.dr-wz-symbol.mini svg.i { width: 13px; height: 13px; }
.dr-leer-hinweis { margin: 4px 8px; color: var(--grau); font-size: 13px; }
.aufklapp-inhalt .dr-wahl-fuss, .dr-wahl-fuss { display: flex; align-items: center; gap: 8px; padding: 8px; border-top: 1px solid var(--linie); border-radius: 0; color: var(--akzent-text); font-size: 13.5px; text-decoration: none; }
.aufklapp-inhalt .dr-wahl-fuss:hover { background: none; text-decoration: underline; }
.dr-aw-filter { display: flex; gap: 6px; }
.dr-aw-filter select { flex: 1 1 0; min-width: 0; }
.dr-aw .dr-aw-filter select, .eingabe .dr-aw .dr-aw-filter select {
  width: auto; min-width: 0; min-height: 30px; padding: 3px 22px 3px 9px; border-radius: 999px; border: 1px solid var(--knopf-rand); font: inherit; font-size: 12.5px; color: var(--text2);
  background: linear-gradient(180deg, var(--knopf-oben), var(--knopf-unten)); box-shadow: inset 0 1px 0 var(--kante-hell); cursor: pointer;
}
.dr-aw .dr-aw-filter select:focus, .eingabe .dr-aw .dr-aw-filter select:focus { outline: 2px solid var(--fokus); outline-offset: 1px; box-shadow: none; }
.dr-aw-kuerzel { flex: none; width: 108px; padding: 3px 7px; border-radius: 6px; background: var(--seg); color: var(--text2); font-size: 12px; font-weight: var(--halbfett);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-aw-mehr { margin: 2px 8px 8px; color: var(--grau); font-size: 12.5px; }
.dr-aw-treffer.laedt { opacity: .55; transition: opacity var(--schnell) var(--weich); }

/* / und @ im Schreibfeld */
.dr-inline { position: absolute; z-index: 31; left: 10px; top: calc(100% + 6px); width: min(420px, calc(100% - 20px)); max-height: 320px; overflow-y: auto; padding: 6px; border-radius: 12px; display: grid; gap: 1px; }
.dr-inline[hidden], .dr-inline [hidden] { display: none; }
.dr-inline > div { display: grid; gap: 1px; }
.dr-inline-titel { margin: 6px 8px 2px; font-size: 12px; font-weight: var(--halbfett); color: var(--grau); }
.dr-inline-zeile { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.dr-inline-zeile:hover, .dr-inline-zeile.aktiv { background: color-mix(in srgb, var(--akzent-weich) 80%, transparent); }

/* Modus: auto oder deep research, gläserner Umschalter links neben Senden (Rückmeldung 30.10.2026, Runde 2) */
.dr-modus {
  display: inline-flex; align-items: center; gap: 2px; min-width: 0; margin: 0 0 0 auto; padding: 2px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .75);
  background: linear-gradient(180deg, color-mix(in srgb, var(--seg) 70%, transparent), color-mix(in srgb, var(--seg) 38%, transparent));
  box-shadow: inset 0 1px 2px rgba(20, 36, 60, .07), 0 0 0 1px color-mix(in srgb, var(--feld-rand) 65%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: blur(12px) saturate(1.5);
}
.dr-modus label {
  position: relative; display: inline-flex; align-items: center; min-height: 26px; padding: 0 11px; border-radius: 999px; border: 1px solid transparent;
  color: var(--grau); font-size: 13px; white-space: nowrap; cursor: pointer; transition: color var(--schnell) var(--weich), background var(--schnell) var(--weich), box-shadow var(--schnell) var(--weich);
}
.dr-modus input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.dr-modus label:hover { color: var(--text); }
.dr-modus label:has(input:checked) {
  color: var(--text); border-color: rgba(255, 255, 255, .95); background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .72));
  box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 3px rgba(20, 36, 60, .13), 0 0 0 1px color-mix(in srgb, var(--feld-rand) 75%, transparent);
}
.dr-modus label.m-deep:has(input:checked) { color: #24508F; }
/* Mit Skript gleitet die helle Auswahl zwischen den beiden Feldern, statt zu springen */
.dr-modus { position: relative; isolation: isolate; }
.dr-modus::before {
  content: ""; position: absolute; z-index: -1; top: 2px; bottom: 2px; left: var(--x, 2px); width: var(--b, 0); border-radius: 999px; opacity: 0; pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .95); background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .72));
  box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 3px rgba(20, 36, 60, .13), 0 0 0 1px color-mix(in srgb, var(--feld-rand) 75%, transparent);
  transition: left 320ms var(--weich), width 320ms var(--weich);
}
.dr-modus.gleitet::before { opacity: 1; }
.dr-modus.still::before { transition: none; }
.dr-modus.gleitet label, .dr-modus.gleitet label:has(input:checked) { background: none; border-color: transparent; box-shadow: none; transition: color 320ms var(--weich); }
:root[data-thema="dunkel"] .dr-modus::before { border-color: rgba(190, 215, 255, .2); background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .07)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 3px rgba(0, 0, 0, .4); }
.dr-modus label:has(input:focus-visible) { outline: 2px solid var(--fokus); outline-offset: 1px; }
:root[data-thema="dunkel"] .dr-modus { border-color: rgba(190, 215, 255, .12); background: rgba(255, 255, 255, .04); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3); }
:root[data-thema="dunkel"] .dr-modus label:has(input:checked) {
  color: #F2F6FC; border-color: rgba(190, 215, 255, .2); background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .07));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 3px rgba(0, 0, 0, .4);
}
:root[data-thema="dunkel"] .dr-modus label.m-deep:has(input:checked) { color: #B9D0FF; }
/* Abstand zwischen Modus und Starten wie im Schreibfeld */
.dr-start-zeile .dr-modus { margin-right: -4px; }
.dr-start-zeile .dr-senden { margin-left: 0; }

/* Mail an */
.dr-optionen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.dr-wahl > summary { list-style: none; }
.dr-wahl-knopf { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px 0 11px; border-radius: 999px; cursor: pointer; font-size: 13px; color: var(--text2);
  border: 1px solid var(--knopf-rand); background: linear-gradient(180deg, var(--knopf-oben), var(--knopf-unten)); box-shadow: inset 0 1px 0 var(--kante-hell); }
.dr-wahl-pfeil { color: var(--grau); transition: transform var(--schnell) var(--weich); }
.dr-wahl[open] > .dr-wahl-knopf { border-color: var(--akzent); }
.dr-wahl[open] .dr-wahl-pfeil { transform: rotate(180deg); }
.dr-mail-wer { display: inline-flex; align-items: center; gap: 0; min-height: 20px; }
.dr-mail-leer { color: var(--grau); }
.dr-mail-wer .av.mini { width: 20px; height: 20px; font-size: 9px; margin-left: -5px; box-shadow: 0 0 0 2px var(--knopf-oben); }
.dr-mail-wer .av.mini:first-child { margin-left: 0; }
.dr-mail-wer .dr-mail-rest { margin-left: 5px; font-weight: var(--halbfett); color: var(--text); }
.dr-wahl-inhalt { left: 0; right: auto; width: min(320px, calc(100vw - 32px)); padding: 10px; gap: 8px; }
.dr-personen { display: grid; gap: 1px; max-height: 220px; overflow-y: auto; }
.dr-person { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 7px; font-size: 13.5px; cursor: pointer; }
.dr-person:hover { background: color-mix(in srgb, var(--seg) 80%, transparent); }
.dr-person input { accent-color: var(--akzent); margin: 0; }
.dr-wahl-titel { margin: 0 2px; font-size: 12px; font-weight: var(--halbfett); color: var(--grau); }
.dr-andere { padding-top: 8px; border-top: 1px solid var(--linie); }

/* Werkzeug, Auftrag, Kopf */
.dr-wz-kopf, .dr-auftrag-kopf { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dr-wz-kopf > div:not(.dr-wz-kopf-knoepfe), .dr-auftrag-kopf > div:not(.dr-bericht-knoepfe) { flex: 1; min-width: 220px; }
.dr-wz-kopf h1, .dr-auftrag-kopf h1 { font-size: 24px; }
.dr-wz-kopf .u, .dr-auftrag-kopf .u { margin: 3px 0 0; color: var(--grau); }
.dr-auftrag-kopf .meta { margin-top: 7px; gap: 6px 16px; font-size: 13.5px; }
.dr-wann { margin: -6px 0 0; max-width: 68ch; color: var(--text2); font-size: 14px; line-height: 1.55; }
/* Info und Rezept bündig mit der rechten Kante des Formulars darunter */
.dr-wz-kopf-knoepfe { flex: none; display: flex; align-items: center; gap: 6px; margin-left: auto; }
.dr-info-knopf {
  flex: none; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border-radius: 8px; cursor: pointer; color: var(--grau);
  border: 1px solid var(--knopf-rand); background: linear-gradient(180deg, var(--knopf-oben), var(--knopf-unten)); box-shadow: inset 0 1px 0 var(--kante-hell);
  transition: color var(--schnell) var(--weich), border-color var(--schnell) var(--weich);
}
.dr-info-knopf:hover { color: var(--text); }
.dr-info-knopf[aria-expanded="true"] { color: var(--akzent-text); border-color: color-mix(in srgb, var(--akzent) 32%, var(--knopf-rand)); }
.dr-info-knopf:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.dr-info-knopf svg.i { width: 15px; height: 15px; }
.dr-einsatz { margin: -6px 0 0; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--linie); color: var(--text2); font-size: 14px; line-height: 1.55; animation: dr-aufklappen 200ms var(--weich); }
.dr-einsatz p { margin: 0; max-width: 72ch; }
.dr-einsatz b { margin-right: 6px; color: var(--text); font-weight: var(--halbfett); }
@keyframes dr-aufklappen { from { opacity: 0; transform: translateY(-4px); } }
.dr-wz-symbol { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(180deg, var(--akzent-oben), var(--akzent-unten)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 16px -6px rgba(6, 90, 99, .55); }
.dr-wz-symbol svg.i { width: 22px; height: 22px; }
.dr-wz-symbol.klein { width: 30px; height: 30px; border-radius: 9px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }
.dr-wz-symbol.klein svg.i { width: 16px; height: 16px; }
.dr-wz-symbol:is(.k-labore, .k-ideen, .k-partner, .k-programme, .k-unterlagen, .k-ergebnisse) { background: linear-gradient(180deg, var(--k), color-mix(in srgb, var(--k) 66%, #000000)); }
.dr-wz-form { gap: 18px; padding: 22px 24px; }
.dr-feld-hinweis { margin: 0; color: var(--grau); font-size: 13.5px; }
.label-text { font-weight: var(--halbfett); font-size: 13.5px; color: var(--text); }
.dr-feldtext { margin-top: 6px; }
.dr-feldtext[hidden] { display: none; }
.dr-aufnehmen { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px 12px; padding: 12px 12px 10px; border-top: 1px solid var(--linie);
  background: color-mix(in srgb, var(--akzent-weich) 32%, transparent); border-radius: 0 0 12px 12px; }
.dr-aufnehmen[hidden] { display: none; }
.dr-aufnehmen .eingabe input, .dr-aufnehmen .eingabe select { min-height: 38px; padding: 6px 10px; font-size: 14px; }
.dr-aufnehmen-hinweis { grid-column: 1 / -1; display: flex; gap: 7px; margin: 0; color: var(--text2); font-size: 12.5px; }
.dr-aufnehmen-hinweis svg.i { margin-top: 1px; color: var(--akzent-text); }
[data-dr-aufnehmen][aria-pressed="true"] { color: var(--akzent-text); font-weight: var(--halbfett); }
.dr-aufruf-gewaehlt { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid color-mix(in srgb, #3A6FD8 28%, var(--feld-rand));
  background: color-mix(in srgb, #3A6FD8 6%, var(--eingabe)); }
.dr-aufruf-gewaehlt[hidden] { display: none; }
.dr-aufruf-gewaehlt .dr-nehmen-text b { white-space: normal; font-weight: var(--halbfett); }
.dr-aw-rahmen { padding: 10px; border: 1px solid var(--feld-rand); border-radius: 12px; background: var(--eingabe); box-shadow: var(--eingabe-schatten); }
.dr-aw-rahmen[hidden] { display: none; }
.dr-aw-rahmen .dr-aw { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.dr-aw-rahmen .dr-klapp-liste { max-height: 440px; }
.dr-entwurf-zurueck { align-items: center; }
.dr-entwurf-zurueck span { flex: 1; }
.dr-start-zeile { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 16px; border-top: 1px solid var(--linie); }

/* Rezept als Schublade über der Eingabe, mit „Zurück“ */
dialog.dr-schublade {
  margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: min(700px, 100vw); padding: 0; border: 0; border-left: 1px solid var(--feld-rand);
  background: linear-gradient(180deg, var(--feld-oben), var(--feld-unten)); color: var(--text); box-shadow: -24px 0 60px -20px rgba(7, 19, 37, .45);
}
dialog.dr-schublade::backdrop { background: rgba(7, 19, 37, .4); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
dialog.dr-schublade[open] { display: flex; flex-direction: column; animation: dr-schublade 260ms var(--weich); }
@keyframes dr-schublade { from { transform: translateX(24px); opacity: 0; } }
.dr-schublade-kopf { position: sticky; top: 0; padding: 14px 22px; border-bottom: 1px solid var(--linie); background: inherit; }
.dr-schublade-inhalt { padding: 20px 22px 28px; display: grid; gap: 12px; overflow-y: auto; align-content: start; }
.dr-schublade-inhalt h2 { font-size: 20px; }
.dr-schublade-inhalt > .u { margin: -6px 0 0; color: var(--grau); }
.dr-schublade-inhalt .dr-code { max-height: none; font-size: 12.5px; }

/* Verlauf: Anfrage, Antwort, Rückfrage */
.dr-faden { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.dr-nachricht { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; }
.dr-nachricht > .av { width: 36px; height: 36px; }
.dr-radar-av { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  background: linear-gradient(160deg, #1B4380, #0A1B34); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 4px 12px -4px rgba(10, 27, 52, .5); }
.dr-radar-av .dr-marke { width: 15px; height: 23px; }
.dr-blase { padding: 12px 15px; border-radius: 4px 14px 14px 14px; background: var(--seg); color: var(--text); }
.dr-blase > :last-child { margin-bottom: 0; }
.dr-blase.radar { background: var(--feld); border: 1px solid var(--feld-rand); }
.dr-wer { margin: 0 0 6px; font-size: 13px; color: var(--grau); }
.dr-wer b { color: var(--text); font-weight: var(--halbfett); }
/* Kopf einer Antwort als Überschrift (Ebene 2 unter dem Titel des Auftrags), aussehen wie bisher */
h2.dr-wer { font-size: 13px; font-weight: 400; line-height: 1.5; text-wrap: wrap; }
.dr-eingaben { margin: 0; display: grid; gap: 6px; }
.dr-eingaben > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; }
.dr-eingaben dt { color: var(--grau); font-size: 13.5px; }
.dr-eingaben dd { margin: 0; }
.dr-antwort { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 18px 20px; }
.dr-antwort > p { margin: 0; }
.dr-antwort .dr-wer { margin: 0 0 -4px; }
/* Die Kernaussage steht vorn, etwas größer, getrennt nur durch einen schlichten grauen Strich darunter (Rückmeldung 30.10.2026, Runde 3) */
.dr-antwort > .dr-kern { margin: 0; padding: 0 0 14px; border-bottom: 1px solid var(--linie2); font-size: 16px; line-height: 1.55; font-weight: 500; color: var(--text); text-wrap: pretty; }
.dr-h3 { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 14px; }
.dr-blick td { vertical-align: top; }
.dr-blick td small { display: block; color: var(--grau); font-size: 12.5px; }
.dr-blick th:last-child, .dr-blick td:last-child { width: 1%; white-space: nowrap; }
/* Echte Ergebnisse haben längere Texte als die Beispiele: Ampeltext und lange Wörter brechen um, statt die Tabelle zu verbreitern */
.dr-blick td { hyphens: auto; overflow-wrap: break-word; }
.dr-blick .dr-ampel { align-items: flex-start; white-space: normal; min-width: 8em; }
.dr-blick .dr-ampel::before { margin-top: .4em; }
.dr-ampel { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: var(--halbfett); white-space: nowrap; }
.dr-ampel::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; }
.dr-ampel.a-gut { color: var(--verfolgen); }
.dr-ampel.a-gut::before { background: var(--verfolgen); box-shadow: 0 0 0 3px color-mix(in srgb, var(--verfolgen) 16%, transparent); }
.dr-ampel.a-mittel { color: var(--jetzt-text); }
.dr-ampel.a-mittel::before { background: var(--jetzt); border-radius: 2px; }
.dr-ampel.a-gesperrt { color: var(--spaet); }
.dr-ampel.a-gesperrt::before { width: 7px; height: 7px; background: transparent; border: 2px solid var(--spaet); }
.dr-passt { display: inline-flex; gap: 2px; margin: 0; }
.dr-passt button[aria-pressed="true"] { color: var(--akzent-text); background: var(--akzent-weich); }
.dr-entscheidend { padding: 12px 15px; border-radius: 12px; background: var(--jetzt-weich); color: var(--text); }
.feld.dr-entscheidend { padding: 16px 20px; background: var(--jetzt-weich); border-color: color-mix(in srgb, var(--jetzt) 30%, transparent); }
.dr-entscheidend h2, .dr-entscheidend h3 { display: flex; align-items: center; gap: 7px; font-size: 14.5px; }
.dr-entscheidend svg.i { color: var(--jetzt-text); }
.dr-entscheidend ol { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.dr-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid var(--linie); }
.dr-aktionen form { margin: 0; }
.dr-antwort-kopf { display: flex; align-items: center; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; margin: 0 0 -4px; }
.dr-antwort-kopf .dr-wer { margin: 0; }
.dr-antwort-kopf .dr-voll { margin-left: auto; }
.dr-rueckfrage { margin: 0 0 0 48px; }
/* Was eine Antwort verwendet hat: unter jeder Antwort, drei kurze Zeilen (Rückmeldung 03.11.2026) */
.dr-verwendet { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--linie); display: flex; align-items: center;
  justify-content: space-between; gap: 16px; font-size: 12.5px; line-height: 1.45; color: var(--grau); }
.dr-verwendet dl { margin: 0; display: grid; gap: 1px; flex: 1 1 auto; min-width: 0; }
.dr-verwendet dl > div { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 8px; }
.dr-verwendet dt { color: var(--grau); }
.dr-verwendet dd { margin: 0; color: var(--text2); }
/* Herunterladen als Markdown: nur das Symbol, grün im Rahmen, rechts mittig neben den Zeilen; der Hinweis kommt beim Darüberfahren */
/* 26 × 26 mit 2-px-Rahmen und 15-px-Symbol: klein, aber gefüllt (Rückmeldung 03.11.2026) */
.dr-vw-md { flex: none; width: 26px; height: 26px; display: inline-grid; place-items: center; border-radius: 8px; color: var(--akzent-text);
  border: 2px solid color-mix(in srgb, var(--akzent-text) 65%, transparent); background: var(--flaeche, transparent);
  transition: background var(--schnell) var(--weich), border-color var(--schnell) var(--weich); }
.dr-vw-md:hover { background: var(--akzent-weich); border-color: var(--akzent-text); }
.dr-vw-md:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.dr-vw-md svg.i { width: 15px; height: 15px; stroke-width: 2.2; }
.dr-lauf { display: grid; gap: 16px; }
.dr-lauf .feld-kopf { margin-bottom: 0; }
.dr-lauf-fuss { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.dr-lauf-fuss p { margin: 0; font-size: 13.5px; }
.dr-lauf-fuss form { margin: 0; }
.dr-zustand.z-laeuft { background: var(--akzent-weich); color: var(--akzent-text); }
.dr-zustand.z-fertig { background: var(--ok-weich); color: var(--ok-text); }
/* Echte Aufträge können scheitern oder abgebrochen werden (Phase E3) */
.dr-zustand.z-fehler { background: var(--spaet-weich); color: var(--spaet); }
.dr-zustand.z-abgebrochen { background: var(--seg); color: var(--text2); }
.z-fehler .dr-punkt { background: var(--spaet); }

/* Stationen eines Auftrags: die Linie füllt sich wie der Fortschritt der Anträge */
.dr-stationen { list-style: none; margin: 4px 0 2px; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.dr-stationen li { position: relative; display: grid; justify-items: center; align-content: start; gap: 8px; padding: 0 2px; text-align: center; font-size: 12.5px; line-height: 1.3; color: var(--grau); }
.dr-stationen li::before {
  content: ""; position: absolute; top: 7px; left: -50%; right: 50%; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--akzent-unten), var(--akzent)) 0 0 / 0% 100% no-repeat, var(--linie); transition: background-size 700ms var(--weich);
}
.dr-stationen li:first-child::before { display: none; }
.dr-stationen li.st-fertig::before, .dr-stationen li.st-aktiv::before { background-size: 100% 100%, auto; }
.dr-stationen i { position: relative; z-index: 1; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; background: var(--grund); border: 2px solid var(--linie2);
  transition: background var(--schnell) var(--weich), border-color var(--schnell) var(--weich), box-shadow var(--schnell) var(--weich); }
.dr-stationen .st-fertig i { background: var(--akzent); border-color: var(--akzent); }
.dr-stationen .st-fertig i::after { content: ""; width: 6px; height: 3px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.dr-stationen .st-aktiv i { border-color: var(--akzent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--akzent) 18%, transparent); }
.dr-stationen .st-aktiv i::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--akzent); animation: dr-punkt 1.2s ease-in-out infinite; }
.dr-stationen .st-aktiv span { color: var(--text); font-weight: var(--halbfett); }
.dr-stationen .st-fertig span { color: var(--text2); }
@keyframes dr-punkt { 50% { transform: scale(.55); opacity: .55; } }

/* Ergebnisse der Werkzeuge */
.dr-rang, .dr-paare, .dr-ideen, .dr-partner { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
/* Nichts in einer Antwort darf breiter werden als die Spalte (Rückmeldung 03.11.2026): Einträge von Rastern dürfen schrumpfen, Text bricht um */
.dr-faden > li, .dr-nachricht > *, .dr-antwort > *, .dr-mitte > *, .dr-rang > li, .dr-paare > li, .dr-ideen > li, .dr-partner > li { min-width: 0; }
.dr-rang li { display: grid; grid-template-columns: 26px minmax(0, 1fr) 210px auto; gap: 14px; align-items: start; padding: 12px 0; border-top: 1px solid var(--linie); }
.dr-rang li:first-child, .dr-paare li:first-child, .dr-partner li:first-child { border-top: 0; padding-top: 0; }
.dr-rang form { margin: 0; }
.dr-rang-nr { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--seg); color: var(--text2); font-size: 13px; font-weight: 700; }
.dr-rang-text b { display: block; font-weight: var(--halbfett); }
.dr-rang-text small, .dr-paar-text small { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 1px; color: var(--grau); font-size: 12.5px; }
.dr-rang-text p, .dr-paar-text p { margin: 4px 0 0; color: var(--text2); font-size: 13.5px; }
.dr-werte { margin: 0; display: grid; gap: 3px; font-size: 12px; }
.dr-werte > div { display: grid; grid-template-columns: 76px minmax(0, 1fr) 22px; gap: 6px; align-items: center; }
.dr-werte dt { color: var(--grau); }
.dr-werte dd { display: contents; }
.dr-werte i { height: 5px; border-radius: 3px; background: linear-gradient(90deg, var(--akzent) var(--w), var(--linie) var(--w)); }
.dr-paare li, .dr-partner li { display: flex; align-items: flex-start; gap: 16px; padding: 12px 0; border-top: 1px solid var(--linie); }
.dr-partner li { gap: 12px; }
.dr-partner form { margin: 0; flex: none; }
.dr-paar-text { flex: 1; min-width: 0; }
.dr-paar-text > b { font-weight: var(--halbfett); }
.dr-paar-titel { color: var(--text); font-weight: var(--halbfett); text-decoration: none; }
.dr-paar-titel:hover { text-decoration: underline; }
.dr-paar-knoepfe { flex: none; display: grid; gap: 6px; }
.dr-paar-knoepfe form { margin: 0; }
.dr-paar-knoepfe .knopf { width: 100%; }
.dr-paar-knoepfe .textknopf { justify-self: center; font-size: 13px; }
.dr-termine, .dr-checkliste { list-style: none; margin: -4px 0 0; padding: 0; display: grid; gap: 6px; }
.dr-termine li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }
.dr-termine b { font-variant-numeric: tabular-nums; }
.dr-checkliste li { position: relative; padding-left: 26px; }
.dr-checkliste li::before { content: ""; position: absolute; left: 2px; top: 3px; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--linie2); background: var(--grund); }
.dr-ideen { gap: 12px; counter-reset: idee; }
.dr-ideen li { counter-increment: idee; display: grid; gap: 8px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--feld-rand); background: var(--grund); }
.dr-idee-kopf { display: flex; align-items: baseline; gap: 10px; }
.dr-idee-kopf h3 { flex: 1; font-size: 15.5px; }
.dr-idee-kopf h3::before { content: counter(idee) ". "; color: var(--grau); font-weight: 500; }
.dr-idee-kern { margin: 0; font-size: 14.5px; line-height: 1.55; }
.dr-ideen .dr-karte > div { grid-template-columns: 130px minmax(0, 1fr); }
.dr-ideen .dr-karte dd { font-size: 13.5px; color: var(--text2); }
.dr-idee-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 4px; }
.dr-idee-knoepfe form { margin: 0; }
.dr-klein-text { font-size: 13px; }
.dr-quellen { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dr-quellen li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.dr-quellen small { color: var(--grau); font-size: 12.5px; }

/* Vollansicht des Berichts */
.dr-bericht-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.feld.dr-kurzfassung { background: linear-gradient(180deg, color-mix(in srgb, var(--akzent-weich) 60%, var(--feld-oben)), var(--feld-unten)); }
.dr-kurzfassung p { font-size: 15px; line-height: 1.6; }
.dr-kurzfassung p:first-child { font-size: 16px; font-weight: 500; }
.dr-kurzfassung p:last-child { margin-bottom: 0; }
.dr-voll-ergebnis { display: grid; gap: 14px; }
.dr-abschnitt { margin: 8px 0 -6px; font-size: 18px; }
.dr-wege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.dr-weg .feld-kopf { justify-content: space-between; }
.dr-weg h3 { font-size: 16px; }
.dr-weg h4 { margin: 16px 0 6px; font-size: 13.5px; }
.dr-karte { margin: 0; display: grid; gap: 10px; }
.dr-karte > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; }
.dr-karte dt { color: var(--grau); font-size: 13.5px; }
.dr-karte dd { margin: 0; }
/* In der schmalen Seitenspalte steht die Bezeichnung über dem Wert */
.dr-eintrag-seite .dr-karte > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.dr-schritte { margin: 0; padding-left: 20px; display: grid; gap: 4px; }

/* Listen: Aufträge und Speicher */
.dr-liste { list-style: none; margin: -6px -8px; padding: 0; display: grid; }
.dr-liste li[hidden] { display: none; }
.dr-liste-zeile { display: flex; align-items: center; gap: 14px; padding: 10px 8px; border-radius: 10px; border-top: 1px solid var(--linie); color: var(--text); text-decoration: none; }
.dr-liste li:first-child .dr-liste-zeile { border-top-color: transparent; }
.dr-liste-zeile:hover { background: color-mix(in srgb, var(--seg) 65%, transparent); }
.dr-liste-titel { flex: 1; min-width: 0; display: grid; }
.dr-liste-titel b { font-weight: var(--halbfett); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-liste-titel small { color: var(--grau); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-liste-zeile .person-klein { flex: none; width: 170px; font-size: 13.5px; color: var(--text2); }
.dr-datum { flex: none; width: 84px; color: var(--grau); font-size: 13px; font-variant-numeric: tabular-nums; }
.dr-liste-zeile .dr-zustand { flex: none; width: 64px; justify-content: center; }
.dr-kategorien { max-width: 100%; overflow-x: auto; }
.dr-filterleiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: -4px 0 0; }
.dr-filterleiste .dr-such-feld { flex: 1 1 260px; max-width: 380px; }
.dr-filter-wahl { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--grau); }
.dr-filter-wahl select { min-height: 34px; padding: 4px 28px 4px 10px; border-radius: 9px; border: 1px solid var(--knopf-rand); font: inherit; font-size: 13.5px; color: var(--text);
  background-color: var(--eingabe); box-shadow: var(--eingabe-schatten); cursor: pointer; }
.dr-filter-wahl select:focus { outline: 2px solid var(--fokus); outline-offset: 1px; }

/* Eintrag im Speicher */
.dr-eintrag-raster { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.dr-eintrag-seite { display: grid; gap: 18px; min-width: 0; }
.dr-kurz { margin: 0 0 16px; font-size: 15px; line-height: 1.55; }
.dr-mini-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.dr-mini-liste li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.dr-mini-liste a { flex: 1; overflow: hidden; display: flex; align-items: center; gap: 8px; padding: 3px 0; color: var(--text); text-decoration: none; min-width: 0; }
.dr-mini-liste a span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-mini-liste a:hover span { text-decoration: underline; }
.dr-mini-liste svg.i { color: var(--grau); }
.dr-versionen li { justify-content: flex-start; color: var(--text2); font-variant-numeric: tabular-nums; }
.dr-versionen li.aktiv, .dr-versionen li:first-child { color: var(--text); font-weight: var(--halbfett); }
.dr-inhalt > summary { list-style: none; display: flex; align-items: center; gap: 12px; cursor: pointer; }
.dr-inhalt > summary::-webkit-details-marker { display: none; }
.dr-inhalt > summary .u { color: var(--grau); font-size: 13px; }
.dr-inhalt > summary svg.i { margin-left: auto; color: var(--grau); transition: transform var(--schnell) var(--weich); }
.dr-inhalt[open] > summary { margin-bottom: 14px; }
.dr-inhalt[open] > summary svg.i { transform: rotate(180deg); }

/* Rezept eines Werkzeugs: Entwurf, Testläufe, Versionen (Phase E5) */
.dr-rz-haupt { display: grid; gap: 18px; min-width: 0; }
.dr-rz-angebot { align-items: center; margin-bottom: 18px; }
.dr-rz-angebot > span { flex: 1; }
.dr-rz-entwurf .feld-kopf { flex-wrap: wrap; }
.dr-rz-entwurf > .u { margin: -4px 0 14px; font-size: 13px; }
.dr-rz-schritte { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px 24px; }
.dr-rz-test { display: grid; gap: 7px; align-content: start; min-width: 0; }
.dr-rz-test > label, .dr-rz-label { font-size: 13px; font-weight: var(--halbfett); color: var(--text2); }
.dr-rz-test .u { margin: 0; font-size: 12.5px; color: var(--grau); }
.dr-rz-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dr-rz-zeile select { flex: 1; min-width: 0; min-height: 34px; padding: 4px 28px 4px 10px; border-radius: 9px; border: 1px solid var(--knopf-rand); font: inherit;
  font-size: 13.5px; color: var(--text); background-color: var(--eingabe); box-shadow: var(--eingabe-schatten); cursor: pointer; }
.dr-rz-zeile select:focus { outline: 2px solid var(--fokus); outline-offset: 1px; }
.dr-rz-zeile form { margin: 0; }
.dr-rz-vergleich .dr-h3 { margin-top: 6px; }
.dr-rz-vergleich .dr-h3 + .u { margin: 4px 0 10px; font-size: 13px; color: var(--grau); }
.dr-rz-tabelle td:first-child { min-width: 260px; line-height: 1.45; }
.dr-rz-wert { white-space: nowrap; }
.dr-rz-ok, .dr-rz-nein { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.dr-rz-ok::before, .dr-rz-nein::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dr-rz-ok { color: var(--ok); }
.dr-rz-ok::before { background: var(--ok); }
.dr-rz-nein { color: var(--spaet); }
.dr-rz-nein::before { background: var(--spaet); }
.dr-rz-links { margin: 8px 0 18px; font-size: 13px; }
.dr-rz-links:last-child { margin-bottom: 0; }
.dr-rz-fach { margin-top: 12px; border: 1px solid var(--linie); border-radius: 10px; }
.dr-rz-fach > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; font-size: 13.5px; font-weight: var(--halbfett); }
.dr-rz-fach > summary::-webkit-details-marker { display: none; }
.dr-rz-fach > summary svg.i { margin-left: auto; color: var(--grau); transition: transform var(--schnell) var(--weich); }
.dr-rz-fach[open] > summary svg.i { transform: rotate(180deg); }
.dr-rz-fach > .dr-code { margin: 0 10px 10px; }
.dr-rezept .formular > .u { margin: 0 0 10px; font-size: 13px; color: var(--grau); }
.dr-rz-versionen { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.dr-rz-versionen li { display: grid; gap: 3px; font-size: 13.5px; color: var(--text2); font-variant-numeric: tabular-nums; }
.dr-rz-versionen li.aktiv { color: var(--text); }
.dr-rz-versionen b { font-weight: var(--halbfett); }
.dr-rz-versionen small { color: var(--grau); font-size: 12.5px; overflow-wrap: anywhere; }
.dr-rz-aktionen { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.dr-rz-aktionen form { margin: 0; }
.chip.dr-rz-gueltig { background: var(--ok-weich); color: var(--ok); }
.dr-ig-quellen .dr-quellen { padding: 0 14px 12px; }
.dr-fr-titel { margin: 14px 0 4px; font-size: 14px; font-weight: var(--halbfett); }
.dr-fr-text { margin: 0; font-size: 14.5px; line-height: 1.55; }
.dr-fr-aufrufe li small { color: var(--grau); font-size: 12.5px; white-space: nowrap; }
.dr-fr-offen { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; }
.dr-rang-knoepfe { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
/* Hinweis auf das Rezept von Research unter den Werkzeugen: ganze Breite, „Rezept ansehen“ bricht nicht um */
.dr-frei-rezept { max-width: none; margin-top: 14px; }
.dr-frei-rezept a { white-space: nowrap; }
/* Archiv von Research */
.dr-auftrag-kopf .dr-archiv-knopf { margin: 0 0 0 auto; align-self: flex-start; }
.dr-archiv-hinweis { align-items: center; margin-bottom: 14px; }
.dr-archiv-hinweis > span:first-of-type { flex: 1; }
.dr-archiv-knoepfe { display: flex; align-items: center; gap: 12px; }
.dr-archiv-knoepfe form { margin: 0; }
.dr-archiv-suche { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; }
.dr-archiv-suche input { flex: 1; min-width: 220px; min-height: 40px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--knopf-rand); font: inherit;
  color: var(--text); background: var(--eingabe); box-shadow: var(--eingabe-schatten); }
.dr-archiv-suche input:focus { outline: none; border-color: var(--akzent); box-shadow: var(--eingabe-schatten), 0 0 0 3px var(--akzent-weich); }
.dr-archiv-liste { list-style: none; margin: 0; padding: 0; display: grid; }
.dr-archiv-liste li { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; border-top: 1px solid var(--linie); }
.dr-archiv-liste li:first-child { border-top: 0; padding-top: 0; }
.dr-archiv-liste .dr-paar-knoepfe { display: flex; flex: none; width: auto; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.dr-archiv-liste .dr-paar-knoepfe .knopf { width: auto; }
.dr-archiv-liste .dr-paar-knoepfe form { margin: 0; }
@media (max-width: 640px) { .dr-archiv-liste li { flex-wrap: wrap; } .dr-archiv-liste .dr-paar-knoepfe { width: 100%; justify-content: flex-start; } }
.dr-rang-knoepfe form { margin: 0; }
.dr-skizze { display: grid; gap: 14px; margin: 6px 0 4px; }
.dr-skizze-abschnitt .dr-h3 { margin-bottom: 6px; }
.dr-skizze-abschnitt .dr-h3 .u { font-weight: 400; color: var(--grau); font-size: 12.5px; }
.dr-skizze-abschnitt p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.6; max-width: 76ch; }
/* Tabellen der Vorlage in der Skizze (03.11.2026): Arbeitspakete, Meilensteine, Verwertung; schmal rollen sie in sich */
.dr-skizze-info { margin: 2px 0 6px; }
.dr-skizze-info small { display: block; margin-top: 2px; color: var(--grau); font-size: 12.5px; }
.dr-skizze-abschnitt { min-width: 0; } /* Grid-Eintrag: sonst wächst der Abschnitt mit einer breiten Tabelle über die Karte hinaus */
.dr-skizze-abschnitt .tabelle-rahmen { margin: 4px 0 12px; max-width: 100%; }
table.dr-skizze-tabelle { font-size: 13.5px; line-height: 1.5; }
.dr-skizze-tabelle th { white-space: normal; vertical-align: bottom; padding: 0 10px 8px; min-width: 7ch; }
.dr-skizze-tabelle td { vertical-align: top; padding: 8px 10px; }
.dr-skizze-tabelle tr:hover td { background: none; }
.dr-skizze-tabelle td:first-child { min-width: 12ch; }
.dr-skizze-tabelle .rechts { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dr-platzhalter { background: var(--jetzt-weich); color: var(--jetzt-text); border-radius: 4px; padding: 0 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
@media (max-width: 640px) {
  .dr-rz-tabelle td:first-child { min-width: 0; }
  .dr-rz-tabelle th, .dr-rz-tabelle td { padding-left: 8px; padding-right: 8px; }
  .dr-rz-wert { text-align: center; }
  /* Am Handy nur der Punkt, das Wort bleibt für Bildschirmleser */
  .dr-rz-wort { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.dr-text { max-width: 75ch; font-size: 14.5px; line-height: 1.6; overflow-wrap: anywhere; }
.dr-text-scroll { max-height: 560px; overflow-y: auto; padding-right: 8px; }

/* In den Speicher */
.dr-schritt-zeile { list-style: none; margin: -6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; counter-reset: schritt; font-size: 13px; color: var(--grau); }
.dr-schritt-zeile li { counter-increment: schritt; display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px 3px 4px; border-radius: 999px; background: var(--seg); }
.dr-schritt-zeile li::before { content: counter(schritt); width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--grund); font-size: 11.5px; font-weight: 700; }
.dr-schritt-zeile li.aktiv { background: var(--akzent-weich); color: var(--akzent-text); font-weight: var(--halbfett); }
.dr-schritt-zeile li.aktiv::before { background: var(--akzent); color: #fff; }
.dr-schritt-zeile li.fertig { color: var(--text2); }
.dr-schritt-zeile li.fertig::before { background: var(--ok); color: #fff; }
.dr-kategorie-wahl { display: flex; flex-wrap: wrap; gap: 6px; }
.dr-kategorie-wahl label { position: relative; }
.dr-kategorie-wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dr-kategorie-wahl span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--knopf-rand); cursor: pointer; font-size: 13.5px;
  background: linear-gradient(180deg, var(--knopf-oben), var(--knopf-unten)); box-shadow: inset 0 1px 0 var(--kante-hell); }
.dr-kategorie-wahl span svg.i { color: var(--grau); }
.dr-kategorie-wahl input:checked + span { background: var(--akzent-weich); color: var(--akzent-text); border-color: color-mix(in srgb, var(--akzent) 45%, transparent); font-weight: var(--halbfett); }
.dr-kategorie-wahl input:checked + span svg.i { color: var(--akzent-text); }
.dr-kategorie-wahl input:focus-visible + span { outline: 2px solid var(--fokus); outline-offset: 2px; }
.dr-datei-feld { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.dr-datei-knopf { position: relative; flex: 1; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; border: 1.5px dashed var(--linie2); background: var(--feld); cursor: pointer;
  transition: border-color var(--schnell) var(--weich), background var(--schnell) var(--weich); }
.dr-datei-knopf:hover, .dr-datei-knopf:focus-within { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent-weich) 35%, var(--feld)); }
.dr-datei-knopf svg.i { width: 22px; height: 22px; color: var(--akzent-text); }
.dr-datei-knopf b { display: block; font-weight: var(--halbfett); }
.dr-datei-knopf small { display: block; color: var(--grau); font-size: 12.5px; }
.dr-datei-knopf input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dr-oder { color: var(--grau); font-size: 13px; }
.dr-vorschlag { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }

/* Werkzeuge und Rezept */
.dr-wz-liste { list-style: none; margin: -4px 0; padding: 0; display: grid; }
.dr-wz-liste > li { display: flex; align-items: flex-start; gap: 16px; padding: 16px 0; border-top: 1px solid var(--linie); }
.dr-wz-liste > li:first-child { border-top: 0; }
.dr-wz-text { flex: 1; min-width: 0; }
.dr-wz-text h2 { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.dr-wz-text p { margin: 2px 0 8px; color: var(--text2); }
.dr-wz-fakten { margin: 0; display: grid; gap: 4px; font-size: 13.5px; }
.dr-wz-fakten > div { display: flex; gap: 8px; }
.dr-wz-fakten dt { flex: none; min-width: 70px; color: var(--grau); }
.dr-wz-fakten dd { margin: 0; max-width: 72ch; }
.dr-wz-knoepfe { flex: none; display: flex; gap: 6px; }
.dr-code { margin: 0; padding: 14px 16px; border-radius: 10px; background: var(--seg); color: var(--text); font: 13px/1.6 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  white-space: pre-wrap; overflow: auto; max-height: 640px; tab-size: 2; }
textarea.dr-code { width: 100%; min-height: 420px; border: 1px solid var(--knopf-rand); resize: vertical; }
textarea.dr-code:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-weich); }

/* Dialoge und Mail */
.dr-mitnehmen { list-style: none; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--seg); display: grid; gap: 4px; font-size: 13.5px; }
.dr-mitnehmen li { display: flex; align-items: flex-start; gap: 8px; }
.dr-mitnehmen svg.i { margin-top: 2px; color: var(--ok); }
.dr-mail-liste { max-height: 220px; overflow-y: auto; }
.dr-extern { font-size: 13px; }
.dr-mail-vorschau { margin: 0; color: var(--grau); font-size: 13.5px; }
.dr-mail { max-width: 660px; padding: 0; overflow: hidden; }
.dr-mail-kopf { margin: 0; padding: 14px 20px; display: grid; gap: 4px; background: var(--seg); border-bottom: 1px solid var(--linie); font-size: 13.5px; }
.dr-mail-kopf > div { display: grid; grid-template-columns: 70px minmax(0, 1fr); }
.dr-mail-kopf dt { color: var(--grau); }
.dr-mail-kopf dd { margin: 0; }
.dr-mail-text { padding: 18px 20px 20px; }
.dr-mail-tabelle { width: 100%; margin: 6px 0 14px; border-collapse: collapse; font-size: 14px; }
.dr-mail-tabelle th, .dr-mail-tabelle td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--linie); }
.dr-mail-tabelle th { color: var(--grau); font-size: 12.5px; font-weight: var(--halbfett); }
.dr-mail-fuss { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--linie); color: var(--grau); font-size: 12.5px; }

/* Einbindung: Übersicht, Mein Bereich, Steckbrief, Projekt, System */
.dr-ue-liste { list-style: none; margin: 0; padding: 0; display: grid; min-width: 0; }
.dr-ue-liste li { border-top: 1px solid var(--linie); }
.dr-ue-liste li:first-child { border-top: 0; }
.dr-ue-liste a { display: flex; align-items: center; gap: 10px; padding: 8px 0; color: var(--text); text-decoration: none; font-size: 14px; }
.dr-ue-liste a:hover .dr-lt { text-decoration: underline; }
.dr-ue-liste .dr-punkt { margin-top: 0; }
.dr-ue-liste small { flex: none; color: var(--grau); font-size: 12.5px; }
.dr-ue-liste .dr-wz-symbol.klein { width: 26px; height: 26px; border-radius: 8px; }
.dr-ue-liste .dr-wz-symbol.klein svg.i { width: 14px; height: 14px; }
.dr-steck-menue .aufklapp-inhalt { left: 0; right: auto; }
/* Am Projekt steht das Menü rechts im Kopf des Felds: es klappt nach links auf, damit es nicht über den Rand läuft */
.feld-kopf .rechts .dr-steck-menue .aufklapp-inhalt { left: auto; right: 0; }
.dr-belegung td small { display: block; color: var(--grau); font-size: 12.5px; }
.dr-ort { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.dr-ort i { width: 8px; height: 8px; border-radius: 50%; background: var(--linie2); }
.dr-ort.ok i { background: var(--ok); }

/* Lange Titel in einer Zeile sollen kürzen, nicht die Spalte verbreitern */
.dr-lt, .dr-at, .dr-liste-titel, .dr-mini-liste a span, .dr-name, .dr-nehmen-text { contain: inline-size; }
@media (min-width: 1101px) { .kopf { grid-template-columns: var(--leiste-breite) minmax(0, 1fr) minmax(240px, 460px) minmax(max-content, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .z-laeuft .dr-punkt, .dr-stationen .st-aktiv i::after, .kocht .dr-schimmer, .dr-lauf .dr-schimmer, .dr-waehlt .dr-schimmer, .kocht .dr-marke .m-bogen, .kocht .dr-marke .m-punkt { animation: none; }
  .kocht .dr-schimmer, .dr-lauf .dr-schimmer, .dr-waehlt .dr-schimmer { -webkit-mask-image: none; mask-image: none; }
  .dr-stationen li::before { transition: none; }
  .dr-beigabe, dialog.dr-schublade[open], .dr-einsatz { animation: none; }
  .dr-modus::before { transition: none; }
  .dr-rahmen { transition: none; }
}
@media (max-width: 1100px) {
  .dr-wege, .dr-vorschlag, .dr-eintrag-raster, .dr-rz-schritte { grid-template-columns: minmax(0, 1fr); }
  .dr-rang li { grid-template-columns: 26px minmax(0, 1fr) 190px; }
  .dr-rang form { grid-column: 2; }
  .dr-rang-knoepfe { grid-column: 2 / -1; flex-direction: row; align-items: center; }
}
@media (max-width: 900px) {
  .dr-knopf .text { display: none; }
  .dr-knopf { width: 30px; padding: 0; margin-right: 4px; justify-content: center; }
  .neu-knopf { width: 30px; padding: 0; justify-content: center; }
  .dr-knopf svg.i { width: 15px; height: 15px; }
  .dr-rahmen { grid-template-columns: minmax(0, 1fr); }
  .dr-spalte { position: fixed; z-index: 39; top: var(--kopf-hoehe); left: 0; bottom: 0; width: min(300px, 86vw); height: auto;
    transform: translateX(-102%); transition: transform 240ms var(--weich); box-shadow: var(--schatten-hoch); }
  .dr-spalte.offen { transform: none; }
  .dr-menue-knopf { display: inline-flex; }
  .dr-flaeche { padding: 16px var(--rand-seite) 40px; gap: 16px; }
  .dr-werkzeugwahl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dr-frage { font-size: 24px; margin-bottom: 28px; }
  .dr-start .dr-schreiben { margin-top: 32px; }
  .dr-einklappen { display: none; }
  .dr-start .dr-kochen { margin-top: 40px; }
  .dr-start .dr-aus-speicher { margin-top: 32px; }
  .dr-rueckfrage { margin-left: 0; }
  .dr-liste-zeile { flex-wrap: wrap; row-gap: 6px; }
  .dr-liste-titel { flex-basis: calc(100% - 44px); }
  .dr-liste-zeile .person-klein { width: auto; margin-left: 44px; }
  .dr-datum { width: auto; }
}
@media (max-width: 640px) {
  /* Tabellen im Ergebnis stapeln je Zeile: erste Zelle und Urteil oben, Rückmeldung rechts daneben, darunter die übrigen Angaben mit Beschriftung */
  .tabelle-rahmen:has(> .dr-stapeln) { overflow: visible; margin: 0; padding: 0; }
  .dr-stapeln, .dr-stapeln tbody { display: block; }
  .dr-stapeln thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dr-stapeln tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 5px; padding: 12px 0; border-top: 1px solid var(--linie); }
  .dr-stapeln tr:first-child { border-top: 0; padding-top: 4px; }
  .dr-stapeln td, .dr-stapeln td:last-child { grid-column: 1 / -1; order: 2; width: auto; padding: 0; border: 0; white-space: normal; }
  .dr-stapeln td:first-child { order: 0; }
  .dr-stapeln tr:has(td.rechts) td:first-child { grid-column: 1; }
  .dr-stapeln td.rechts { grid-column: 2; grid-row: 1; align-self: start; }
  .dr-stapeln td.dr-passt-zelle { order: 1; }
  .dr-stapeln td[data-label]::before { content: attr(data-label); display: block; color: var(--grau); font-size: 12px; }
  .dr-stapeln td[data-vor]::before { content: attr(data-vor); font-weight: var(--halbfett); }
  /* Aufruf wählen: Kürzel und Relevanz oben, Titel (höchstens zwei Zeilen) und Frist über die volle Breite darunter, Filter umbrechend */
  .dr-aw-zeile { flex-wrap: wrap; row-gap: 3px; }
  .dr-aw-zeile .dr-aw-kuerzel { width: auto; margin-right: auto; }
  .dr-aw-zeile .dr-nehmen-text { flex: 1 1 100%; order: 3; }
  .dr-aw-zeile .dr-nehmen-text b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .dr-aw-zeile .dr-nehmen-text small { white-space: normal; }
  .dr-aw-filter { flex-wrap: wrap; }
  .dr-aw .dr-aw-filter select, .eingabe .dr-aw .dr-aw-filter select { flex: 1 1 120px; }
  /* Werkzeuge: Text über die volle Breite, Knöpfe in eigener Zeile, Angaben untereinander */
  .dr-wz-text { flex: 1 1 calc(100% - 60px); min-width: 0; }
  .dr-wz-fakten > div { flex-direction: column; gap: 0; }
  .dr-wz-fakten dt { min-width: 0; }
  .dr-werkzeugwahl { grid-template-columns: minmax(0, 1fr); }
  .dr-stationen { grid-auto-flow: row; gap: 10px; }
  .dr-stationen li { grid-template-columns: 17px minmax(0, 1fr); justify-items: start; align-items: center; gap: 10px; text-align: left; }
  .dr-stationen li::before { top: -12px; left: 7px; right: auto; width: 3px; height: 12px; background: linear-gradient(180deg, var(--akzent-unten), var(--akzent)) 0 0 / 100% 0% no-repeat, var(--linie); }
  .dr-stationen li.st-fertig::before, .dr-stationen li.st-aktiv::before { background-size: 100% 100%, auto; }
  .dr-eingaben > div, .dr-karte > div, .dr-ideen .dr-karte > div, .dr-termine li { grid-template-columns: minmax(0, 1fr); gap: 1px; }
  .dr-rang li { grid-template-columns: 26px minmax(0, 1fr); }
  .dr-werte, .dr-rang form { grid-column: 2; }
  .dr-paare li, .dr-partner li { flex-direction: column; }
  .dr-paare li > .dr-paar-text, .dr-partner li > .dr-paar-text { align-self: stretch; }
  .dr-paar-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; }
  .dr-paar-knoepfe .knopf { width: auto; }
  .dr-wz-liste > li { flex-wrap: wrap; }
  .dr-wz-knoepfe { margin-left: 60px; }
  .dr-nachricht { grid-template-columns: 30px minmax(0, 1fr); gap: 10px; }
  .dr-nachricht > .av, .dr-radar-av { width: 30px; height: 30px; }
  .dr-radar-av .dr-marke { width: 13px; height: 20px; }
  .dr-antwort { padding: 14px 14px; }
  .dr-antwort > .dr-kern { font-size: 15px; padding-bottom: 12px; }
  .dr-aufnehmen { grid-template-columns: minmax(0, 1fr); }
  .dr-filterleiste .dr-such-feld { max-width: none; flex-basis: 100%; }
}
@media print {
  .dr-spalte, .dr-oben, .dr-bericht-knoepfe, .dr-aktionen, .dr-passt, .dr-vw-md, .dr-voll { display: none !important; }
  .dr-rahmen { display: block; }
  /* Druck und PDF (Rückmeldung 03.11.2026): Verwendet als ruhige Fußzeile, Überschriften nicht allein am Seitenende, Zeilen nicht zerschnitten */
  .dr-verwendet { break-inside: avoid; margin-top: 14px; padding-top: 8px; font-size: 11.5px; }
  .dr-verwendet dl > div { grid-template-columns: 72px minmax(0, 1fr); }
  .dr-h3, .dr-skizze-abschnitt h3 { break-after: avoid; }
  .dr-skizze-tabelle tr, .dr-eingaben > div { break-inside: avoid; }
  /* Grid bricht im Druck nicht sauber um: Chrome rechnet die Höhe ohne die Seitenumbrüche, und was folgt, rutscht in den Text
     (Rückmeldung 03.11.2026). Im Druck daher Blockfluss mit Abständen, Bezeichnung und Text als Tabelle */
  .dr-bericht, .dr-voll-ergebnis, .dr-skizze, .dr-karte, .dr-eingaben, .dr-rang, .dr-paare, .dr-ideen, .dr-partner, .dr-ideen > li { display: block; }
  .dr-bericht > * + *, .dr-voll-ergebnis > * + * { margin-top: 14px; }
  .dr-rang > li + li, .dr-paare > li + li, .dr-ideen > li + li, .dr-partner > li + li { margin-top: 12px; }
  .dr-ideen > li > * + * { margin-top: 8px; }
  .dr-idee-knoepfe, button.textknopf { display: none !important; }
  /* Breite Tabellen (Balkenplan) dürfen die Seite nicht verbreitern: sonst verkleinert der Browser die ganze PDF */
  .dr-flaeche { display: block; }
  .dr-bericht { min-width: 0; max-width: none; }
  table.dr-skizze-tabelle { font-size: 10.5px; }
  .dr-skizze-tabelle th, .dr-skizze-tabelle td:first-child { min-width: 0; }
  .dr-skizze-tabelle th, .dr-skizze-tabelle td { padding: 5px 6px; }
  .dr-skizze > * + * { margin-top: 12px; }
  .dr-karte > div + div { margin-top: 10px; }
  .dr-eingaben > div + div { margin-top: 6px; }
  .dr-karte > div, .dr-eingaben > div { display: table; width: 100%; table-layout: fixed; }
  .dr-karte dt, .dr-eingaben dt { display: table-cell; width: 150px; padding-right: 12px; vertical-align: top; }
  .dr-karte dd, .dr-eingaben dd { display: table-cell; vertical-align: top; }
  details > summary svg { display: none; }
  .tabelle-rahmen.rollen { overflow: visible; }
}

/* Schreibfeld von Research: Hinweis, solange die KI die Anfrage liest und das Werkzeug wählt (Rückmeldung 03.11.2026) */
.dr-waehlt { margin: 10px 4px 0; font-size: 13.5px; color: var(--grau); }
.dr-waehlt[hidden] { display: none; }
form.sendet .dr-senden { opacity: .55; pointer-events: none; }
/* Neuer Lauf aus einer Rückfrage (Rückmeldung 03.11.2026) */
.dr-neulauf-hinweis { margin: 0 0 8px; font-size: 13.5px; color: var(--text2); }