/* Mina Dashboard im privaten Corporate Design „CH | Corporate Design“ (Christoph Haß, Designsystem Juli 2026, privates Drive):
   CH Navy #073763, CH Ink #102B4E, CH Marine #155A9A, CH Turquoise #00C9D6 (Akzent, sparsam), CH Sky #35AAFF, CH Mist #E7EDF4, CH Gray #66727F.
   Schrift Calibri (im Web Carlito/Segoe UI als Ersatz), Hierarchie durch Größe, Farbe, Abstand; keine Verläufe, keine Schatten als Gestaltung;
   Signallinie dreiteilig Türkis | Marine | Sky; Callouts hell mit schmaler türkiser Kante; Signatur „CH“ klein und ruhig. Umgestellt 06.10.2026 abends. */
:root {
  --navy: #073763; --ink: #102B4E; --marine: #155A9A; --tuerkis: #00C9D6; --sky: #35AAFF; --mist: #E7EDF4; --gray: #66727F;
  --silber: var(--mist); --silber-dunkel: #CBD7E4; --hellgrau: #A9B3BE; --grau-cd: var(--gray); --deepsea: var(--ink); --rot: #B8325B;
  --blau-text: var(--marine);
  --verlauf: linear-gradient(90deg, var(--tuerkis) 0 34%, var(--marine) 34% 67%, var(--sky) 67% 100%);
  /* Rollen */
  --dunkel: var(--navy); --blau: var(--marine); --blau-hell: var(--sky); --hell: #EAF2F9;
  --grund: var(--mist); --karte: #FFFFFF; --karte-2: #F3F6FA; --text: var(--ink); --text-2: #3B4A5A; --grau: var(--gray); --linie: #D7E0EA;
  --gut: #1F8F7A; --warn: #D98B1C; --ernst: #B8325B; --privat: #6B4C9A; --akzent: var(--tuerkis);
  --schatten: 0 1px 2px rgba(7, 55, 99, .05);
  --radius: 14px; --radius-k: 10px;
  --font: Calibri, Carlito, "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-titel: var(--font);
  --nav-h: 64px; --kopf-h: 62px;
  --k-briefing: var(--navy); --k-mina: var(--marine); --k-erinnerung: var(--marine); --k-apple: #D98B1C; --k-followup: #1F8F7A; --k-backlog: #6B4C9A; --k-notizen: #B8860B; --k-mails: var(--gray);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --navy: #4C8FD6; --ink: #E8EDF4; --marine: #6FB7F2; --mist: #0B1D33; --gray: #93A5B8; --silber-dunkel: #8FA3BA; --hellgrau: #6B7A8C;
    --dunkel: #04213D; --blau: #6FB7F2; --blau-hell: #35AAFF; --hell: #14304F; --blau-text: #8CC8FF;
    --grund: #0B1D33; --karte: #122A47; --karte-2: #183656; --text: #E8EDF4; --text-2: #C0D0E0; --grau: #93A5B8; --linie: #244468;
    --gut: #3BD0A0; --warn: #F2B457; --ernst: #FF6B93; --privat: #C9A6E6; --akzent: #00C9D6;
    --schatten: 0 1px 2px rgba(0,0,0,.4);
    --k-briefing: #B0C4DE; --k-mina: #8CC8FF; --k-erinnerung: #8CC8FF; --k-apple: #F2B457; --k-followup: #3BD0A0; --k-backlog: #C9A6E6; --k-notizen: #F2D06B; --k-mails: #93A5B8;
  }
}
:root[data-theme="dark"] {
    --navy: #4C8FD6; --ink: #E8EDF4; --marine: #6FB7F2; --mist: #0B1D33; --gray: #93A5B8; --silber-dunkel: #8FA3BA; --hellgrau: #6B7A8C;
    --dunkel: #04213D; --blau: #6FB7F2; --blau-hell: #35AAFF; --hell: #14304F; --blau-text: #8CC8FF;
    --grund: #0B1D33; --karte: #122A47; --karte-2: #183656; --text: #E8EDF4; --text-2: #C0D0E0; --grau: #93A5B8; --linie: #244468;
    --gut: #3BD0A0; --warn: #F2B457; --ernst: #FF6B93; --privat: #C9A6E6; --akzent: #00C9D6;
    --schatten: 0 1px 2px rgba(0,0,0,.4);
    --k-briefing: #B0C4DE; --k-mina: #8CC8FF; --k-erinnerung: #8CC8FF; --k-apple: #F2B457; --k-followup: #3BD0A0; --k-backlog: #C9A6E6; --k-notizen: #F2D06B; --k-mails: #93A5B8;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--grund); color: var(--text); font-family: var(--font); font-size: 15.5px; line-height: 1.55; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; min-height: 100dvh; }
a { color: var(--blau-text); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; }
textarea, input { font: inherit; color: var(--text); }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-titel); font-weight: 400; letter-spacing: 0; }
p { margin: 0 0 8px; }
ul, ol { margin: 0 0 8px; padding-left: 20px; }
li { margin: 3px 0; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: var(--karte-2); padding: 1px 5px; border-radius: 5px; }
.wl { color: var(--blau-text); border-bottom: 1px solid color-mix(in srgb, var(--blau-text) 35%, transparent); }
.wl:hover { text-decoration: none; border-bottom-color: var(--blau-text); }

/* Anmeldung */
.login { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; background: #04213D url("/cd-hintergrund.jpg") center/cover no-repeat; color: #fff; }
.login-karte { width: 100%; max-width: 400px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 20px; padding: 30px 26px; backdrop-filter: blur(10px); position: relative; overflow: hidden; }
.login-karte::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--verlauf); }
.login .marke { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.login .marke img { width: 46px; height: 46px; border-radius: 12px; }
.login .marke .name { font-family: var(--font-titel); font-size: 24px; font-weight: 500; }
.login .marke .unter { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--silber-dunkel); }
.login label { display: block; font-size: 13px; color: #CBD5E1; margin: 12px 0 6px; }
.login input { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1); color: #fff; font-size: 16px; }
.login input:focus { outline: 2px solid var(--sky); border-color: transparent; }
.login .knopf { margin-top: 16px; width: 100%; padding: 13px; border-radius: 10px; border: 0; background: var(--tuerkis); color: var(--navy); font-weight: 600; font-size: 16px; }
.login .knopf:hover { filter: brightness(1.05); }
.login .fehler { margin-top: 12px; color: #FFB3C8; font-size: 14px; }
.login .hinweis { margin-top: 14px; font-size: 13px; color: #CBD5E1; }

/* Kopf und Rahmen */
.kopf { position: sticky; top: 0; z-index: 20; background: var(--dunkel); color: #fff; padding-top: env(safe-area-inset-top); }
.kopf::after { content: ""; display: block; height: 3px; background: var(--verlauf); }
.kopf .signatur { font-size: 12px; letter-spacing: 1.5px; color: #CBD7E4; margin-left: 10px; white-space: nowrap; }
.kopf-innen { height: var(--kopf-h); display: flex; align-items: center; gap: 16px; padding: 0 20px; max-width: 1280px; margin: 0 auto; }
.kopf .marke { display: flex; align-items: center; gap: 12px; }
.kopf .marke img { width: 34px; height: 34px; border-radius: 9px; }
.kopf .marke b { font-family: var(--font-titel); font-weight: 400; font-size: 23px; letter-spacing: 0; }
.kopf .marke .unter { font-size: 11.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--silber-dunkel); display: block; line-height: 1; margin-top: 2px; }
.kopf .datum { font-size: 13.5px; color: var(--silber-dunkel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 6px; }
.kopf .rechts { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.kopf .status { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: #E8EDF4; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.09); border: 0; white-space: nowrap; }
.kopf .status .punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--tuerkis); box-shadow: 0 0 0 3px rgba(0,201,214,.22); }
.kopf .status.problem .punkt { background: #F2B457; box-shadow: 0 0 0 3px rgba(242,180,87,.25); }
.kopf .icon { width: 36px; height: 36px; border-radius: 10px; border: 0; background: rgba(255,255,255,.09); color: #fff; display: grid; place-items: center; }
.kopf .icon:hover { background: rgba(255,255,255,.18); }
.kopf .icon svg { width: 18px; height: 18px; }
.kopf .icon.dreht svg { animation: drehen 1s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }

.rahmen { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 0; }
.nav { display: none; }
.inhalt { padding: 18px 16px calc(var(--nav-h) + 24px + env(safe-area-inset-bottom)); min-width: 0; }
.nav-unten { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: space-around; background: var(--karte); border-top: 1px solid var(--linie); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
.nav-knopf { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; border: 0; background: none; color: var(--grau); font-size: 11px; border-radius: 10px; position: relative; }
.nav-knopf svg { width: 22px; height: 22px; }
.nav-knopf.aktiv { color: var(--blau-text); }
.nav-knopf .zahl { position: absolute; top: 2px; right: calc(50% - 22px); min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: var(--rot); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.nav-knopf .zahl.warn { background: var(--warn); }
@media (min-width: 900px) {
  .rahmen { grid-template-columns: 236px 1fr; gap: 28px; padding: 0 20px; }
  .nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: calc(var(--kopf-h) + 20px); align-self: start; padding-top: 22px; }
  .nav .nav-knopf { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 10px 12px; font-size: 14.5px; color: var(--text-2); }
  .nav .nav-knopf.aktiv { background: var(--karte); color: var(--navy); box-shadow: var(--schatten); font-weight: 600; border-left: 3px solid var(--tuerkis); }
  .nav .nav-knopf .zahl { position: static; margin-left: auto; }
  .nav-unten { display: none; }
  .inhalt { padding: 22px 0 60px; }
}

/* Bausteine */
.seite > h2 { font-size: 27px; margin: 6px 0 16px; color: var(--navy); }
.seite .unter { color: var(--grau); font-size: 13.5px; margin: -10px 0 16px; max-width: 900px; }
.karte { background: var(--karte); border-radius: var(--radius); box-shadow: var(--schatten); padding: 20px 22px; margin-bottom: 16px; border: 1px solid var(--linie); }
.karte.privat { border-color: color-mix(in srgb, var(--privat) 35%, transparent); }
.karte h3 { font-family: var(--font-titel); font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--marine); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; font-weight: 400; padding-bottom: 6px; border-bottom: 2px solid var(--mist); position: relative; }
.karte h3::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 36px; height: 2px; background: var(--tuerkis); }
.karte h3 .zahl { margin-left: auto; font-family: var(--font); font-size: 12.5px; color: var(--grau); letter-spacing: 0; text-transform: none; font-weight: 500; }
.karte h3.privat { color: var(--privat); }
.karte h3.gut { color: var(--gut); }
.leer { color: var(--grau); font-size: 14px; }
.callout { background: var(--hell); border-left: 3px solid var(--tuerkis); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; }
.callout .co-titel { font-weight: 600; margin-bottom: 4px; font-family: var(--font-titel); }
.callout ol { margin: 0; padding-left: 22px; }
.callout li { margin: 4px 0; }
.fokus-liste { list-style: none; padding: 0; margin: 0; }
.fokus-liste li { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid var(--linie); font-size: 15.5px; line-height: 1.55; }
.fokus-liste li:first-child { border-top: 0; padding-top: 0; }
.fokus-liste .n { font-family: var(--font-titel); color: var(--marine); font-weight: 600; min-width: 22px; }
.punkte { list-style: none; padding: 0; margin: 0; }
.punkte li { padding: 8px 0; border-top: 1px solid var(--linie); display: flex; gap: 10px; }
.punkte li:first-child { border-top: 0; padding-top: 0; }
.punkte .marker { color: var(--sky); flex: none; }
.tabelle { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th { text-align: left; color: var(--grau); font-weight: 600; font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--linie); }
td { padding: 8px; border-bottom: 1px solid var(--linie); vertical-align: top; }
tr:last-child td { border-bottom: 0; }

.termin { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--linie); }
.termin:first-child { border-top: 0; padding-top: 0; }
.termin .zeit { color: var(--grau); font-size: 13px; padding-top: 2px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.termin .was { font-weight: 600; }
.termin .worum { color: var(--text-2); font-size: 13.5px; margin-top: 2px; }
.termin .voll { min-width: 0; }
.pill { display: inline-block; font-size: 11px; line-height: 16px; padding: 2px 8px; border-radius: 10px; color: #fff; background: var(--navy); margin-right: 6px; vertical-align: middle; font-weight: 600; }
.pill.nm { background: var(--marine); }
.pill.beide { background: var(--tuerkis); color: var(--navy); }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-2); background: var(--karte-2); border: 1px solid var(--linie); padding: 3px 9px; border-radius: 999px; }
.chip.blau { color: var(--blau-text); border-color: color-mix(in srgb, var(--blau-text) 40%, transparent); background: color-mix(in srgb, var(--blau-text) 8%, transparent); }
.chip.privat { color: var(--privat); border-color: color-mix(in srgb, var(--privat) 40%, transparent); }
.chip.warn { color: var(--warn); }
.chip.ernst { color: var(--ernst); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.briefing { --k: var(--k-briefing); } .mina { --k: var(--k-mina); } .erinnerung { --k: var(--k-erinnerung); } .apple { --k: var(--k-apple); } .followup { --k: var(--k-followup); } .backlog { --k: var(--k-backlog); } .notizen { --k: var(--k-notizen); } .mails { --k: var(--k-mails); }
.chip.kanal { color: var(--k); border-color: color-mix(in srgb, var(--k) 45%, transparent); background: color-mix(in srgb, var(--k) 9%, transparent); font-weight: 600; }
.chip.kanal .farbe { width: 8px; height: 8px; border-radius: 50%; background: var(--k); display: inline-block; }
.chip.bezug { color: var(--blau-text); border-color: color-mix(in srgb, var(--blau-text) 40%, transparent); background: color-mix(in srgb, var(--blau-text) 8%, transparent); cursor: pointer; }
.chip.bezug.privat { color: var(--privat); border-color: color-mix(in srgb, var(--privat) 40%, transparent); }
.chip.bezug:hover { text-decoration: none; background: color-mix(in srgb, var(--blau-text) 18%, transparent); }

/* Kennzahlen */
.kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
@media (min-width: 640px) { .kacheln { grid-template-columns: repeat(6, 1fr); } }
.kacheln.vier { grid-template-columns: repeat(2, 1fr); }
.kachel { background: var(--karte); border-radius: var(--radius-k); box-shadow: var(--schatten); padding: 14px 14px 12px; border: 1px solid var(--linie); text-align: left; color: var(--text); display: flex; flex-direction: column; gap: 2px; }
.kachel:hover { border-color: var(--sky); }
.kachel .wert { font-family: var(--font-titel); font-size: 26px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; display: flex; align-items: baseline; gap: 6px; }
.kachel .name { font-size: 12.5px; color: var(--grau); }
.kachel .unten { font-size: 11.5px; color: var(--grau); margin-top: 4px; line-height: 1.3; }
.kachel.warn .wert { color: var(--warn); }
.kachel.blau .wert { color: var(--blau-text); }
.kachel .delta { font-size: 12px; font-weight: 600; color: var(--grau); }
.kachel .delta.plus { color: var(--gut); }
.kachel .delta.minus { color: var(--warn); }
.punkt-gross { display: inline-block; width: 18px; height: 18px; border-radius: 50%; background: var(--gut); box-shadow: 0 0 0 5px color-mix(in srgb, var(--gut) 20%, transparent); margin: 4px 0 2px 2px; }
.punkt-gross.warn { background: var(--warn); box-shadow: 0 0 0 5px color-mix(in srgb, var(--warn) 25%, transparent); }

/* Einträge mit Aktionen */
.eintrag { padding: 14px 0; border-top: 1px solid var(--linie); }
.eintrag:first-of-type { border-top: 0; padding-top: 0; }
.eintrag .titel { font-weight: 600; font-size: 15.5px; }
.eintrag .text { color: var(--text-2); font-size: 14px; margin-top: 4px; }
.eintrag .meta { color: var(--grau); font-size: 12.5px; margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.eintrag.erledigt { opacity: .55; }
.eintrag.kompakt { padding: 8px 0; cursor: pointer; }
.eintrag.kompakt .titel { font-size: 14.5px; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.eintrag.kompakt.auf .titel { -webkit-line-clamp: unset; display: block; }
.eintrag.kompakt .text { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; }
.eintrag.kompakt .meta { margin-top: 3px; font-size: 12px; }
.eintrag.kompakt .meta .tipp { margin-left: auto; opacity: .7; }
.eintrag.nur-anzeige .titel { font-weight: 500; }
.hinweis-auf { border-top: 1px solid var(--linie); padding-top: 8px; }
.aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.knopf { border: 1px solid var(--linie); background: var(--karte-2); color: var(--text); padding: 8px 13px; border-radius: 10px; font-size: 13.5px; font-weight: 600; min-height: 36px; }
.knopf:hover { border-color: var(--sky); }
.knopf.primaer { background: var(--navy); color: #fff; border-color: transparent; }
.knopf.primaer:hover { background: var(--marine); }
.knopf.leise { background: none; border-color: transparent; color: var(--grau); font-weight: 500; }
.knopf.leise:hover { color: var(--text); border-color: var(--linie); }
.knopf.mini { padding: 2px 6px; min-height: 0; font-size: 12px; margin-top: 2px; display: block; }
.knopf:disabled { opacity: .5; cursor: default; }
.feld { width: 100%; min-height: 72px; resize: vertical; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--linie); background: var(--karte-2); font-size: 15px; line-height: 1.45; }
.feld:focus { outline: 2px solid color-mix(in srgb, var(--sky) 60%, transparent); border-color: transparent; }
.feld.klein { min-height: 42px; }
.antwort-bereich { margin-top: 10px; display: grid; gap: 8px; }
.antwort-bereich.kommentar { margin-top: 6px; }
.antwort { background: var(--hell); border-radius: 10px; padding: 10px 12px; font-size: 14px; margin-top: 8px; }
.antwort b { color: var(--blau-text); }
.vorschlag { background: var(--karte-2); border-radius: 10px; padding: 10px 12px; margin-top: 10px; display: grid; grid-template-columns: 72px 1fr; gap: 4px 10px; font-size: 14px; }
.vorschlag .k { color: var(--grau); font-size: 12.5px; padding-top: 2px; }
.details { margin-top: 10px; }
.details summary { cursor: pointer; color: var(--grau); font-size: 13px; list-style: none; }
.details summary::-webkit-details-marker { display: none; }
.details summary::before { content: "▸ "; }
.details[open] summary::before { content: "▾ "; }
.gruppe-titel { font-family: var(--font-titel); font-size: 13px; color: var(--grau); margin: 16px 0 6px; font-weight: 500; letter-spacing: .3px; }
.gruppe-titel.privat { color: var(--privat); }
.gruppe-titel.tag { font-size: 14.5px; color: var(--text); margin-top: 18px; }
.gruppe-titel.tag.heute { color: var(--blau-text); }
.frist { font-weight: 600; }
.frist.ueberfaellig { color: var(--ernst); }
.frist.bald { color: var(--warn); }
.erledigt-liste .eintrag { padding: 8px 0; }
.zahl-klein { margin-left: 8px; font-size: 11px; color: var(--grau); background: var(--karte-2); border: 1px solid var(--linie); border-radius: 999px; padding: 1px 7px; font-weight: 500; font-family: var(--font); letter-spacing: 0; }
ul.klein { margin: 4px 0 0; padding-left: 18px; color: var(--text-2); font-size: 13.5px; }
.heute-karte .eintrag { padding: 10px 0; }
.hinweis-zeile { display: flex; align-items: center; gap: 8px; padding: 10px 0 2px; font-size: 14px; }
.karte.warnrand { border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.karte h3.warn { color: var(--warn); }

/* Kontrollkästchen */
.check { display: flex; gap: 12px; align-items: flex-start; }
.check .box { flex: none; width: 24px; height: 24px; border-radius: 8px; border: 2px solid var(--marine); background: var(--karte); display: grid; place-items: center; margin-top: 2px; color: #fff; }
.check .box:hover { background: color-mix(in srgb, var(--marine) 15%, transparent); }
.check .box svg { width: 14px; height: 14px; opacity: 0; }
.check.weg .box { background: var(--marine); }
.check.weg .box svg { opacity: 1; }
.check.weg .titel { text-decoration: line-through; opacity: .6; }
.check .voll { flex: 1; min-width: 0; }
.check .voll .meta { margin-top: 4px; }

/* Abschnitte, Sprungleiste, Kommentare */
.abschnitt-kopf { margin: 6px 0 16px; }
.abschnitt-kopf h2 { font-size: 27px; margin: 0 0 4px; color: var(--navy); }
.abschnitt-kopf .unter { margin: 0; }
.abschnitt-kopf:not(:first-child) { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--linie); }
.kanal-seite > h2 { display: flex; align-items: center; gap: 10px; }
.kanal-seite > h2 .farbe { width: 12px; height: 12px; border-radius: 50%; background: var(--k); flex: none; }
.kanal-seite .abschnitt-kopf h2 { font-size: 19px; display: flex; align-items: center; gap: 10px; }
.sprung { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -4px 0 16px; }
.sprung .k { color: var(--grau); font-size: 12.5px; margin-right: 4px; }
.sprung-chip { cursor: pointer; background: var(--karte); font-weight: 600; color: var(--blau-text); border-color: color-mix(in srgb, var(--blau-text) 35%, transparent); }
.sprung-chip:hover { background: color-mix(in srgb, var(--sky) 14%, transparent); }
.fokus-liste .voll { flex: 1; min-width: 0; }
.kommentar-zeile { margin-top: 6px; font-size: 13.5px; color: var(--text-2); background: var(--hell); border-radius: 8px; padding: 6px 10px; }
.kommentar-zeile .d { color: var(--grau); font-size: 12px; margin-right: 8px; }
.kommentar-zeile b { color: var(--blau-text); }
.block-kommentar { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--linie); }
.mehr-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.mehr-knopf { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; border: 1px solid var(--linie); background: var(--karte-2); color: var(--text); font-size: 14px; font-weight: 600; text-align: left; }
.mehr-knopf.aktiv { border-color: var(--sky); color: var(--blau-text); }
.mehr-knopf .zahl-klein { margin-left: auto; }

/* Gedanken */
.gedanken-karte { border-color: color-mix(in srgb, var(--sky) 45%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--sky) 7%, var(--karte)) 0%, var(--karte) 60%); }
.feld.gedanke { min-height: 46px; font-size: 15.5px; transition: min-height .15s; }
.feld.gedanke:focus { min-height: 100px; }
.gedanken-karte .zeile { margin-top: 10px; gap: 8px; }
.gedanken-karte .segmente.klein { margin: 0; }
.gedanken-karte h3 .zahl { text-transform: none; letter-spacing: 0; font-size: 12px; }
.gedanken-karte .erkl { color: var(--grau); font-size: 12.5px; flex: 1; min-width: 160px; }
.bezuege { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; font-size: 13px; }
.bezuege .k { color: var(--grau); }
.bezuege:empty { display: none; }

/* Schwebender Knopf, Blätter, Segmente */
.schweber { position: fixed; right: 16px; bottom: calc(var(--nav-h) + 14px + env(safe-area-inset-bottom)); z-index: 25; width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--marine); color: #fff; box-shadow: 0 10px 24px -8px rgba(16,69,136,.7); display: grid; place-items: center; }
.schweber svg { width: 24px; height: 24px; }
@media (min-width: 900px) { .schweber { bottom: 24px; right: 24px; } }
.schleier { position: fixed; inset: 0; background: rgba(10,22,40,.5); z-index: 30; display: flex; align-items: flex-end; justify-content: center; }
@media (min-width: 640px) { .schleier { align-items: center; padding: 20px; } }
.blatt { width: 100%; max-width: 580px; background: var(--karte); border-radius: 20px 20px 0 0; padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 40px rgba(0,0,0,.25); }
@media (min-width: 640px) { .blatt { border-radius: 20px; } }
.blatt h3 { font-size: 18px; text-transform: none; letter-spacing: 0; color: var(--text); }
.segmente { display: flex; gap: 4px; background: var(--karte-2); padding: 4px; border-radius: 12px; margin: 12px 0; flex-wrap: wrap; }
.segmente button { flex: 1; border: 0; background: none; padding: 8px 6px; border-radius: 9px; color: var(--grau); font-size: 13px; font-weight: 600; min-width: 80px; }
.segmente button.aktiv { background: var(--karte); color: var(--text); box-shadow: var(--schatten); }
.segmente.klein { margin: 8px 0; }
.segmente.klein button { padding: 6px 8px; font-size: 12.5px; min-width: 0; }
.blatt .erkl { color: var(--grau); font-size: 13px; margin: 0 0 10px; }
.zeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.schalter { display: inline-flex; border: 1px solid var(--linie); border-radius: 10px; overflow: hidden; }
.schalter button { border: 0; background: none; padding: 7px 12px; font-size: 13px; color: var(--grau); }
.schalter button.aktiv { background: var(--marine); color: #fff; }
.schalter button.aktiv.privat { background: var(--privat); }
.schalter.klein button { padding: 6px 9px; font-size: 12px; }

/* Graph */
.graph-karte { display: flex; flex-direction: column; }
.graph-karte.gross { min-height: 0; cursor: default; }
.graph-canvas { width: 100%; height: 220px; display: block; border-radius: 12px; background: var(--karte-2); touch-action: none; }
.graph-canvas.lebendig { flex: none; height: 380px; }
.graph-canvas.gross { height: min(70vh, 680px); cursor: crosshair; }
@media (min-width: 1000px) { .graph-canvas.lebendig { height: 480px; } }
.graph-karte h3 .knopf.mini { margin: 0; display: inline; }
.graph-knoepfe { margin-left: 8px; display: inline-flex; gap: 2px; }
.graph-knoepfe .knopf.mini { display: inline; margin: 0; font-size: 13px; }
.legende { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 12px; color: var(--grau); align-items: center; }
.legende i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; background: #94A3B8; }
.legende .tipp { margin-left: auto; }
.legende span[title] { cursor: help; border-bottom: 1px dotted var(--linie); }
.typ-beteiligung { background: #35AAFF !important; } .typ-person { background: #00C9D6 !important; } .typ-unternehmen, .typ-factory, .typ-gruppe { background: #073763 !important; } .typ-projekt, .typ-strategie { background: #155A9A !important; } .typ-thema { background: #8A95A1 !important; } .typ-analyse { background: #5B8DB8 !important; } .typ-zahlen { background: #D98B1C !important; }
.legende .typ-rand { background: transparent !important; border: 2px solid var(--text); width: 7px; height: 7px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .typ-unternehmen, :root:not([data-theme="light"]) .typ-factory, :root:not([data-theme="light"]) .typ-gruppe { background: #CDDAEA !important; } }
.graph-blatt { max-width: 1140px; width: 100%; }
.graph-schleier { align-items: center; padding: 10px; }
.graph-blatt .zeile { margin: 0 0 6px; }
.graph-blatt h3 { font-size: 18px; text-transform: none; letter-spacing: 0; color: var(--text); }
.graph-info { font-size: 13px; color: var(--grau); margin-top: 8px; min-height: 20px; }

/* Lesefenster */
.lese-schleier { align-items: center; padding: 10px; }
.lese-blatt { max-width: 880px; width: 100%; max-height: 92vh; overflow-y: auto; border-radius: 20px; }
.lese-blatt h3 { font-size: 24px; text-transform: none; letter-spacing: -0.01em; color: var(--text); margin-top: 4px; font-weight: 500; }
.lese-blatt .zeile { align-items: flex-start; margin: 0 0 14px; }
.lese-inhalt { font-size: 15.5px; line-height: 1.6; }
.lese-inhalt .lese-h { font-family: var(--font-titel); font-size: 17px; letter-spacing: 0; text-transform: none; color: var(--text); margin: 22px 0 8px; font-weight: 500; padding-bottom: 4px; border-bottom: 1px solid var(--linie); }
.lese-inhalt .lese-h.intern { color: var(--rot); }
.lese-inhalt h4 { font-size: 15px; margin: 14px 0 6px; font-weight: 600; }
.lese-inhalt p { margin: 0 0 10px; }
.lese-inhalt .callout { margin: 10px 0; }
.lese-inhalt table { font-size: 13.5px; }
.lese-inhalt blockquote { margin: 8px 0; padding: 4px 12px; border-left: 3px solid var(--silber-dunkel); color: var(--text-2); }
.lese-inhalt hr { border: 0; border-top: 1px solid var(--linie); margin: 14px 0; }
.lese-inhalt pre { background: var(--karte-2); border-radius: 8px; padding: 10px 12px; overflow-x: auto; font-size: 13px; }
.lese-inhalt ul ul, .lese-inhalt ol ul { margin: 2px 0; }
.lese-eigenschaften { display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px; font-size: 13px; color: var(--text-2); background: var(--karte-2); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; }
.lese-eigenschaften .k { color: var(--grau); }
.lese-blatt .bezuege { margin-top: 4px; }

/* Mina Control */
.ueberblick { display: grid; gap: 16px; margin-bottom: 16px; grid-template-columns: 1fr; }
.control-karte .gruppe-titel { margin-top: 10px; }
.ctrl-spalten { display: grid; gap: 0 28px; }
@media (min-width: 760px) { .ctrl-spalten { grid-template-columns: 1fr 1fr; } }
.ctrl-zeile { display: flex; gap: 10px; padding: 7px 0; border-top: 1px solid var(--linie); font-size: 13.5px; cursor: pointer; border-radius: 6px; }
.ctrl-zeile:first-of-type { border-top: 0; }
.ctrl-zeile:hover { background: color-mix(in srgb, var(--sky) 7%, transparent); }
.ctrl-zeile .punkt { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--gut); margin-top: 6px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--gut) 18%, transparent); }
.ctrl-zeile.alt .punkt { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 22%, transparent); }
.ctrl-zeile.fehler .punkt { background: var(--ernst); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ernst) 22%, transparent); }
.ctrl-zeile.aus .punkt { background: var(--hellgrau); box-shadow: none; }
.ctrl-zeile .voll { flex: 1; min-width: 0; }
.ctrl-name { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; }
.ctrl-rechts { color: var(--grau); font-weight: 450; font-size: 12.5px; white-space: nowrap; }
.ctrl-detail { color: var(--grau); font-size: 12.5px; }
.ctrl-legende { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--grau); margin-top: 12px; }
.ctrl-legende i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.ctrl-blatt { max-width: 620px; }
.ctrl-blatt .k { color: var(--grau); font-size: 12.5px; }
.ctrl-blatt .laeufe { font-size: 13px; margin-top: 8px; }
.ctrl-blatt .laeufe div { padding: 3px 0; border-top: 1px solid var(--linie); display: flex; gap: 10px; }
.ctrl-blatt .laeufe div:first-child { border-top: 0; }

/* Historie, Notizen (CH Reminder) */
.notiz-zeile { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.notiz-zeile .notiz { flex: 1 1 220px; min-height: 36px; }
.historie { margin-top: 8px; border-left: 3px solid var(--k-followup); padding: 2px 0 2px 10px; font-size: 13px; color: var(--text-2); }
.hist-zeile { padding: 2px 0; }
.hist-zeile .d { color: var(--grau); font-size: 12px; margin-right: 8px; font-variant-numeric: tabular-nums; }
.hist-zeile b { color: var(--k-followup); }

/* System */
.pruefung { display: flex; gap: 10px; padding: 7px 0; border-top: 1px solid var(--linie); font-size: 14px; }
.pruefung:first-child { border-top: 0; }
.pruefung .punkt { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--gut); margin-top: 6px; }
.pruefung.fehler .punkt { background: var(--warn); }
.pruefung .detail { color: var(--grau); font-size: 13px; }
.aktiv-zeile { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--linie); font-size: 14px; }
.aktiv-zeile:first-child { border-top: 0; }
.aktiv-zeile .n { color: var(--grau); font-variant-numeric: tabular-nums; }
.log-zeile { padding: 6px 0; border-top: 1px solid var(--linie); font-size: 14px; }
.log-zeile:first-child { border-top: 0; }
.log-zeile .art { display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--blau-text); margin-right: 8px; font-family: var(--font-titel); }
.log-zeile .d { color: var(--grau); font-size: 12.5px; margin-left: 6px; }
.balken-zeile { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr 36px; gap: 10px; align-items: center; padding: 5px 0; font-size: 13.5px; }
.spur-balken { height: 8px; background: var(--karte-2); border-radius: 4px; overflow: hidden; }
.spur-balken .fuellung { height: 100%; border-radius: 4px; background: var(--tuerkis); }
.balken-zeile .n { color: var(--grau); text-align: right; font-variant-numeric: tabular-nums; }

/* Toasts, Laden, Spalten */
#toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav-h) + 16px + env(safe-area-inset-bottom)); z-index: 40; display: flex; flex-direction: column; gap: 8px; pointer-events: none; width: min(92vw, 420px); }
@media (min-width: 900px) { #toasts { bottom: 24px; } }
.toast { background: var(--deepsea); color: #fff; padding: 11px 14px; border-radius: 12px; font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.3); animation: rein .25s ease-out; }
.toast.fehler { background: var(--rot); }
@keyframes rein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.lade { text-align: center; color: var(--grau); padding: 40px 0; }
.zwei { display: grid; gap: 16px; }
@media (min-width: 1000px) { .zwei { grid-template-columns: 1fr 1fr; align-items: start; } .zwei > .karte { margin-bottom: 0; } }
.wl.fehlt { color: var(--grau); border-bottom: 1px dashed var(--hellgrau); cursor: help; }
.schnell { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 4px; }
.schnell .knopf.mini { display: inline; margin: 0; }
.voll.abgehakt > span:first-child { opacity: .55; text-decoration: line-through; }
.karte.unsichtbar { display: none; }

/* Startseite: Briefing neben Terminen, Wochenübersicht, Team (06.10.2026 abends) */
.briefing-zeile { display: grid; gap: 16px; }
@media (min-width: 1100px) { .briefing-zeile { grid-template-columns: 1.7fr 1fr; align-items: start; } .briefing-zeile > .karte { margin-bottom: 16px; } }
.woche { display: grid; gap: 0; }
.woche-tag { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 9px 0; border-top: 1px solid var(--linie); }
.woche-tag:first-child { border-top: 0; padding-top: 0; }
.woche-tag .tag { font-family: var(--font-titel); font-weight: 500; color: var(--blau-text); font-size: 14px; white-space: nowrap; }
.woche-tag .was { font-size: 14.5px; }
@media (max-width: 640px) { .woche-tag { grid-template-columns: 1fr; gap: 2px; } }
.team { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 16px; }
@media (min-width: 1100px) { .team { grid-template-columns: repeat(2, 1fr); } }
.person { padding: 10px 12px; border: 1px solid var(--linie); border-radius: 12px; background: var(--karte-2); }
.person .p-name { font-weight: 600; display: flex; align-items: center; gap: 6px; font-size: 14px; }
.person .p-weg { margin: 6px 0 4px; font-size: 13px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.person ul.klein { margin-top: 4px; font-size: 13px; }
.person .leer { font-size: 13px; }
.segmente.klein button { white-space: nowrap; }
@media (max-width: 640px) { .kopf .marke .unter { display: none; } .kopf .datum { display: none; } .graph-karte h3 .zahl { display: none; } .graph-karte h3 { flex-wrap: wrap; } .karte { padding: 16px 16px; } .seite > h2, .abschnitt-kopf h2 { font-size: 22px; } }
.miro { width: 100%; height: 420px; border: 1px solid var(--linie); border-radius: 10px; background: var(--karte-2); }
@media (min-width: 1000px) { .miro { height: 560px; } }
.lese-inhalt.notiz { font-size: 14.5px; max-height: 480px; overflow-y: auto; padding-right: 6px; }
td.grau { color: var(--grau); font-size: 13px; }

/* Mina Control kompakt auf der Startseite */
.cluster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 4px; }
@media (min-width: 900px) { .cluster { grid-template-columns: repeat(4, 1fr); } }
.cluster-kachel { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--linie); background: var(--karte-2); color: var(--text); }
.cluster-kachel:hover { border-color: var(--sky); }
.cluster-kachel .punkt { flex: none; width: 11px; height: 11px; border-radius: 50%; margin-top: 5px; background: var(--gut); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gut) 18%, transparent); }
.cluster-kachel.alt .punkt { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 22%, transparent); }
.cluster-kachel.fehler .punkt { background: var(--ernst); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ernst) 22%, transparent); }
.cluster-kachel .c-name { font-weight: 600; font-size: 14px; }
.cluster-kachel .c-zahl { font-size: 18px; font-weight: 500; margin: 2px 0; }
.cluster-kachel .c-unter { font-size: 12px; color: var(--grau); }

/* Agenda mit Sprungmarken (Hinweise von Mina) */
.agenda { position: sticky; top: calc(var(--kopf-h) + 3px); z-index: 10; display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0; margin: -6px 0 10px; background: var(--grund); }
.agenda-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--linie); background: var(--karte); color: var(--text); font-size: 14px; font-weight: 600; }
.agenda-chip .farbe, .abschnitt-kopf.farbig .farbe { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.agenda-chip .n { background: var(--karte-2); border-radius: 999px; padding: 1px 8px; font-size: 12.5px; color: var(--grau); }
.agenda-chip:hover { border-color: var(--sky); }
.fragen .farbe { background: var(--marine); } .fehlt .farbe { background: var(--warn); } .auffaellt .farbe { background: var(--tuerkis); }
.abschnitt-kopf.farbig { border-top: 0 !important; padding-top: 6px !important; margin-top: 22px !important; }
.abschnitt-kopf.farbig h2 { font-size: 22px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; background: var(--karte); border-left: 5px solid var(--marine); }
.abschnitt-kopf.fehlt h2 { border-left-color: var(--warn); } .abschnitt-kopf.auffaellt h2 { border-left-color: var(--tuerkis); }

/* Team als Zeilen; Suche im Graph */
.team-liste { display: grid; gap: 10px; }
.person-zeile { padding: 10px 12px; border: 1px solid var(--linie); border-radius: 10px; background: var(--karte-2); }
.p-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.p-kopf .p-name { font-weight: 600; }
.p-kopf .p-zahl { margin-left: auto; color: var(--grau); font-size: 12.5px; }
.p-weg { font-size: 13px; color: var(--warn); margin: 4px 0 2px; }
.t-liste { margin-top: 6px; display: grid; gap: 3px; }
.t-zeile { display: grid; grid-template-columns: 112px 1fr; gap: 10px; font-size: 13.5px; }
.t-zeit { color: var(--grau); font-variant-numeric: tabular-nums; white-space: nowrap; }
.t-was { min-width: 0; }
.graph-suche { position: relative; margin-bottom: 8px; }
.graph-suche .feld { min-height: 38px; }
.graph-treffer { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.graph-treffer:empty { display: none; }

/* Team als Zeilen; Suche im Graph */
.team-liste { display: grid; gap: 10px; }
.person-zeile { padding: 10px 12px; border: 1px solid var(--linie); border-radius: 10px; background: var(--karte-2); }
.p-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.p-kopf .p-name { font-weight: 600; }
.p-kopf .p-zahl { margin-left: auto; color: var(--grau); font-size: 12.5px; }
.p-weg { font-size: 13px; color: var(--warn); margin: 4px 0 2px; }
.t-liste { margin-top: 6px; display: grid; gap: 3px; }
.t-zeile { display: grid; grid-template-columns: 112px 1fr; gap: 10px; font-size: 13.5px; }
.t-zeit { color: var(--grau); font-variant-numeric: tabular-nums; white-space: nowrap; }
.t-was { min-width: 0; }
.graph-suche { position: relative; margin-bottom: 8px; }
.graph-suche .feld { min-height: 38px; }
.graph-treffer { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.graph-treffer:empty { display: none; }
.kopf button.marke { border: 0; background: none; color: #fff; padding: 0; cursor: pointer; }
.kopf button.marke:hover b { color: var(--tuerkis); }
.titel-zeile { display: flex; align-items: center; gap: 14px; }
.titel-logo { width: 44px; height: 44px; border-radius: 11px; flex: none; }
.titel-zeile h2 { margin: 0 0 2px; }

/* Glocke und Meldungen */
.kopf .glocke { position: relative; width: 36px; height: 36px; border-radius: 10px; border: 0; background: rgba(255,255,255,.09); color: #fff; display: grid; place-items: center; }
.kopf .glocke:hover { background: rgba(255,255,255,.18); }
.kopf .glocke .zahl { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--tuerkis); color: var(--navy); font-size: 11.5px; font-weight: 700; display: grid; place-items: center; }
.meldungen-blatt { max-width: 560px; max-height: 85vh; overflow-y: auto; }
.meldung { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--linie); }
.meldung:first-child { border-top: 0; }
.meldung.gelesen { opacity: .55; }
.meldung .punkt { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 7px; background: var(--grau); }
.meldung .punkt.fehler { background: var(--ernst); } .meldung .punkt.alt { background: var(--warn); } .meldung .punkt.ok { background: var(--gut); } .meldung .punkt.info { background: var(--marine); }
.meldung .m-art { font-size: 11.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--grau); }
.meldung .titel { font-weight: 600; font-size: 14.5px; }
.meldung .text { font-size: 13px; color: var(--text-2); margin-top: 2px; }
.meldung .aktionen { margin-top: 4px; }
.meldung .knopf.mini { display: inline; }
.kopf-innen { position: relative; }
.kopf .datum { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; font-size: 14px; }
@media (max-width: 640px) { .kopf .datum { display: none; } }
.unter.spruch { font-size: 15px; color: var(--text-2); font-style: italic; max-width: 760px; }

/* Gedankenspeicher, dritte Fassung: Miro offen, Bullets kurz, Aktionen inline */
.miro-karte .miro { height: 360px; }
@media (min-width: 1000px) { .miro-karte .miro { height: 460px; } }
.gs-punkt { cursor: pointer; }
.gs-punkt .gs-aktionen { display: none; margin-left: 0; margin-top: 4px; }
.gs-punkt.auf .gs-aktionen, .gs-punkt:hover .gs-aktionen { display: inline-flex !important; opacity: 1; gap: 4px; }
.gs-aktionen .knopf.mini { display: inline-block !important; margin: 0; padding: 2px 8px; border: 1px solid var(--linie); border-radius: 999px; background: var(--karte); color: var(--text-2); }
.gs-aktionen .knopf.mini:hover { border-color: var(--tuerkis); color: var(--text); }
.gs-liste .gs-punkt { font-size: 14.5px; }

/* Datum links neben Mina, mit Strich, vertikal mittig */
.kopf .datum { position: static; transform: none; margin-left: 14px; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.3); line-height: 1; font-size: 14px; display: block; }
@media (max-width: 640px) { .kopf .datum { display: none; } }
.termin-notiz { margin-top: 4px; }
.kopf .marke { height: 34px; align-items: center; }
.kopf .marke b { line-height: 34px; display: inline-block; }
.kopf .datum { height: 34px; line-height: 34px; display: inline-block; padding-top: 1px; }

/* Kopf: Mina und Datum auf einer Grundlinie */
.kopf .links { display: flex; align-items: baseline; gap: 0; }
.kopf .marke { display: inline-flex; align-items: center; gap: 12px; height: auto; }
.kopf .marke img { vertical-align: middle; position: relative; top: 0; }
.kopf .marke b { line-height: 1; display: inline; font-size: 23px; }
.kopf .datum { height: auto; line-height: 1; display: inline; padding: 0 0 0 14px; margin-left: 14px; border-left: 1px solid rgba(255,255,255,.3); font-size: 14px; }
@media (max-width: 640px) { .kopf .datum { display: none; } }

/* Dark Mode: Kopf bleibt Navy; Primärknöpfe und Pills bleiben lesbar */
:root[data-theme="dark"] .kopf, @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kopf { background: #04213D; } }
:root[data-theme="dark"] .knopf.primaer { background: var(--marine); color: #04213D; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .knopf.primaer { background: var(--marine); color: #04213D; } }
:root[data-theme="dark"] .pill, :root[data-theme="dark"] .schalter button.aktiv { background: var(--marine); color: #04213D; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pill, :root:not([data-theme="light"]) .schalter button.aktiv { background: var(--marine); color: #04213D; } }
.theme-schalter { display: inline-flex; border: 1px solid var(--linie); border-radius: 10px; overflow: hidden; }
.theme-schalter button { border: 0; background: none; padding: 7px 12px; font-size: 13px; color: var(--grau); }
.theme-schalter button.aktiv { background: var(--marine); color: #fff; }

/* Kopf, endgültig: Mina und Datum optisch auf einer Höhe (beide 34px hoch, Text je mittig) */
.kopf .links { display: flex; align-items: center; }
.kopf .marke { display: inline-flex; align-items: center; gap: 12px; height: 34px; }
.kopf .marke b { display: inline-block; height: 34px; line-height: 34px; font-size: 23px; }
.kopf .datum { display: inline-block; height: 34px; line-height: 34px; font-size: 14px; padding: 0 0 0 14px; margin-left: 14px; border-left: 1px solid rgba(255,255,255,.3); }
@media (max-width: 640px) { .kopf .datum { display: none; } }
/* Datum optisch auf Buchstabenhöhe von „Mina“: kleine Schrift sitzt sonst 3px zu hoch */
.kopf .datum { position: relative; top: 3px; }
.kopf .datum::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 8px; border-left: 1px solid rgba(255,255,255,.3); }
.kopf .datum { border-left: 0; }
.kopf .datum { left: auto; transform: none; top: 2px; }

/* Mittlere Breite (900 bis 1140 px, z. B. halbes Fenster am Mac): Leiste nur mit Symbolen, Karten kompakter */
@media (min-width: 900px) and (max-width: 1140px) {
  .rahmen { grid-template-columns: 64px 1fr; gap: 16px; }
  .nav .nav-knopf { flex-direction: column; gap: 2px; padding: 10px 4px; font-size: 10px; text-align: center; justify-content: center; }
  .nav .nav-knopf span:first-of-type { display: none; }
  .nav .nav-knopf.aktiv { border-left: 0; border-bottom: 3px solid var(--tuerkis); }
  .nav .nav-knopf svg { width: 24px; height: 24px; }
  .graph-karte h3 .zahl { display: none; }
  .graph-karte h3 { flex-wrap: nowrap; white-space: nowrap; }
  .briefing-zeile { grid-template-columns: 1fr; }
  .cluster { grid-template-columns: repeat(2, 1fr); }
  .kacheln { grid-template-columns: repeat(3, 1fr); }
  .zwei { grid-template-columns: 1fr; }
  .gs-raster { grid-template-columns: 1fr; }
  .ctrl-spalten { grid-template-columns: 1fr; }
  .team-liste { grid-template-columns: 1fr; }
  .kopf .datum { font-size: 13px; }
  .seite > h2, .abschnitt-kopf h2 { font-size: 23px; }
}
/* Allgemein: Kartenköpfe sollen nie in zwei Zeilen brechen */
.karte h3 { flex-wrap: wrap; row-gap: 4px; }
.karte h3 > span:first-child { white-space: nowrap; }

/* Mina fragen: Gespräch */
.fragen-karte { border-color: color-mix(in srgb, var(--marine) 35%, transparent); }
.gespraech { margin-top: 12px; display: grid; gap: 8px; }
.frage-blase { align-self: end; justify-self: end; max-width: 85%; background: var(--navy); color: #fff; padding: 9px 13px; border-radius: 14px 14px 4px 14px; font-size: 14.5px; }
.frage-blase .d { display: block; font-size: 11px; opacity: .7; margin-top: 3px; }
.antwort-blase { justify-self: start; max-width: 95%; background: var(--karte-2); border: 1px solid var(--linie); padding: 10px 14px; border-radius: 14px 14px 14px 4px; font-size: 14.5px; line-height: 1.55; }
.antwort-blase.fehler { border-color: var(--ernst); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .frage-blase { background: var(--marine); color: #04213D; } }
:root[data-theme="dark"] .frage-blase { background: var(--marine); color: #04213D; }