/* Ideenspeicher – Erscheinungsbild der MCS TEAM GmbH (Designarbeit: Rot #E60036, Grau #68676C, Anthrazit #403F3E, Calibri, rechtwinklig, keine Schatten, keine Verläufe).
   Farben und Abstände als Variablen, Seiten aus wenigen Bausteinen. Hell ist das Hausdesign; Dunkel ist das „dunkle Thema“ (Schwarz und Anthrazit, Rot nur als Fläche). */
/* Carlito (SIL Open Font License, web/fonts/OFL.txt): metrisch gleich mit Calibri, Ersatz auf Geräten ohne Calibri (Android, iPhone, Mac). Calibri hat Vorrang, sobald es vorhanden ist. */
@font-face { font-family: "Carlito"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/latin-ext-400-normal.woff2") format("woff2"); 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; }
@font-face { font-family: "Carlito"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/latin-400-normal.woff2") format("woff2"); 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: "Carlito"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/latin-ext-700-normal.woff2") format("woff2"); 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; }
@font-face { font-family: "Carlito"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/latin-700-normal.woff2") format("woff2"); 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; }
:root {
  --bg: #FFFFFF; --flaeche: #FFFFFF; --flaeche2: #F9F9F9; --feld: #FFFFFF; --kopf: #FFFFFF;
  --linie: #DEE2E6; --linie2: #858585; --rand: #403F3E;
  --text: #000000; --text2: #403F3E; --text3: #505050; --leise: #595959; --label: #595959;
  --akzent: #E60036; --akzent2: #7F041C; --akzent-hell: #7F041C; --akzent-weich: #FDE6EB; --akzent-tief: #FDE6EB;
  --rosa: #E60036; --rosa-hell: #7F041C; --rosa-weich: #FDE6EB; --rosa-tief: #FDE6EB;
  --grau: #68676C;
  --gruen: #1E7B34; --gruen-weich: #E6F2E9; --rot: #7F041C; --rot-weich: #FDE6EB; --rot-rand: #FACDD7;
  --font: "Calibri", "Carlito", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --hover: #F9F9F9; --hover2: #ECECEC; --hover3: #F9F9F9; --chip: #ECECEC; --chip-grau: #ECECEC; --ec: #F9F9F9; --rand-hover: #000000;
  --akzent-text: #7F041C; --akzent-text2: #7F041C; --text-stark: #000000; --glow: #F9F9F9; --glow2: #FFFFFF;
  --banner-grau: #F9F9F9; --banner-gruen: #E6F2E9; --banner-gruen-rand: #A9D3B4; --banner-rand: #FACDD7; --banner-text: #7F041C;
  --mark-bg: #FACDD7; --mark-text: #000000; --gelb-weich: #FFF4D6; --gelb-text: #8A5A00; --stern: #E8A800; --rot-text: #7F041C; --rosa-rand: #FACDD7;
  --toast-bg: #403F3E; --toast-text: #FFFFFF; --toast-link: #FACDD7;
  --kopf-glas: rgba(255,255,255,.96); --schleier: rgba(64,63,62,.55); --hover-glas: rgba(236,236,236,.85); --chip-glas: rgba(0,0,0,.06);
  --sh1: rgba(0,0,0,.14); --sh2: rgba(0,0,0,.18); --sh3: rgba(0,0,0,.22);
  --f-1: #2F7FB0; --f-2: #9A4FA6; --f-3: #A8691A; --f-4: #3E8A5D; --f-5: #1F8C86; --f-6: #68676C; --f-7: #C2410C;
  --nav-bg: #403F3E; --nav-text: #BBBBBB; --nav-linie: #5A5958; --nav-hover: #7F041C; --nav-aktiv: #E60036;
  --focus: #403F3E;
  --ki-1: #E60036; --ki-2: #FF6B8A; --ki-3: #7F041C; --ki-4: #68676C; --ki-5: #BBBBBB; --ki-glow1: rgba(230,0,54,.45); --ki-glow2: rgba(104,103,108,.4); --ki-glow3: rgba(127,4,28,.3); --ki-glow4: rgba(255,107,138,.3);
  color-scheme: light;
}


/* Dunkles Thema (Regie, Außeneinsatz): Schwarz und Anthrazit, Text Weiß und Lichtgrau, Rot nur als Fläche; gesetzt wird data-theme am <html> (theme.js: „hell“, „dunkel“ oder „automatisch“ nach dem System) */
:root[data-theme="dark"] {
  --bg: #0D0D0D; --flaeche: #1A1A19; --flaeche2: #222121; --feld: #121212; --kopf: #000000;
  --linie: #403F3E; --linie2: #68676C; --rand: #858585;
  --text: #FFFFFF; --text2: #ECECEC; --text3: #DADADA; --leise: #BBBBBB; --label: #A8A8A8;
  --akzent: #E60036; --akzent2: #B8002C; --akzent-hell: #FF8FA6; --akzent-weich: #3B1219; --akzent-tief: #2A1014;
  --rosa: #E60036; --rosa-hell: #FF8FA6; --rosa-weich: #3B1219; --rosa-tief: #2A1014;
  --grau: #8C8B90;
  --gruen: #4CB46A; --gruen-weich: #14301C; --rot: #B8002C; --rot-weich: #2F0B12; --rot-rand: #7F041C;
  --hover: #222121; --hover2: #2E2D2D; --hover3: #1F1F1E; --chip: #2E2D2D; --chip-grau: #2E2D2D; --ec: #121212; --rand-hover: #BBBBBB;
  --akzent-text: #FFD0DA; --akzent-text2: #FFD0DA; --text-stark: #FFFFFF; --glow: #1A1A19; --glow2: #0D0D0D;
  --banner-grau: #1A1A19; --banner-gruen: #14301C; --banner-gruen-rand: #2E6B3F; --banner-rand: #7F041C; --banner-text: #FFB3C1;
  --mark-bg: #7F041C; --mark-text: #FFFFFF; --gelb-weich: #3A2C00; --gelb-text: #E8A800; --stern: #E8A800; --rot-text: #FF8FA6; --rosa-rand: #7F041C;
  --toast-bg: #ECECEC; --toast-text: #000000; --toast-link: #7F041C;
  --kopf-glas: rgba(0,0,0,.96); --schleier: rgba(0,0,0,.7); --hover-glas: rgba(46,45,45,.85); --chip-glas: rgba(255,255,255,.08);
  --sh1: rgba(0,0,0,.5); --sh2: rgba(0,0,0,.55); --sh3: rgba(0,0,0,.65);
  --f-1: #5FA8D3; --f-2: #C48BCB; --f-3: #D9A05A; --f-4: #7DB892; --f-5: #4FB3AE; --f-6: #8C8B90; --f-7: #F0925C;
  --nav-bg: #000000; --nav-text: #BBBBBB; --nav-linie: #403F3E; --nav-hover: #403F3E; --nav-aktiv: #E60036;
  --focus: #FFFFFF;
  --ki-1: #E60036; --ki-2: #FF8FA6; --ki-3: #B8002C; --ki-4: #8C8B90; --ki-5: #ECECEC; --ki-glow1: rgba(230,0,54,.5); --ki-glow2: rgba(140,139,144,.4); --ki-glow3: rgba(184,0,44,.4); --ki-glow4: rgba(255,143,166,.3);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.5; }
button, input, textarea, select { font: inherit; color: inherit; }
select option { background: var(--flaeche2); color: var(--text); }
a { color: var(--akzent-hell); }
a:hover { color: var(--akzent-text); }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--akzent-hell); outline-offset: 2px; }
.weg { position: absolute; left: -9999px; }
[hidden] { display: none !important; }
  /* sonst überschreiben Regeln wie .fl { display: flex } das Attribut */
.cap { font-size: 13px; color: var(--leise); }
.err { color: var(--rot-text); font-size: 14px; }

/* Ladeanzeige: erscheint erst nach einer Drittelsekunde (kurze Ladezeiten flackern nicht), dreht sich, zählt bei längerem Warten die Sekunden mit */
.lade { color: var(--akzent-hell); display: flex; align-items: center; gap: 10px; animation: lade-ein .25s .35s backwards; }
.lade .spin { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: lade-dreh .8s linear infinite; }
.lade .lade-s { color: var(--leise); font-size: 13px; font-variant-numeric: tabular-nums; }
@keyframes lade-ein { from { opacity: 0; } to { opacity: 1; } }
@keyframes lade-dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.lade .spin { animation: none; border-right-color: currentColor; opacity: .5; }
.lade { animation: none; }
 
}
.lade-ki { padding: 12px 14px; border-radius: 0; background: var(--feld); }
.lade-ki .lade-t { flex: 1 1 auto; }


/* ---------- Grundgerüst: Seitenleiste + Inhalt */
.shell { display: flex; min-height: 100vh; }
.sb { flex: 0 0 272px; background: var(--flaeche); border-right: 1px solid var(--linie); padding: 24px 12px; display: flex; flex-direction: column; gap: 24px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.marke { padding: 0 12px; font-weight: 700; font-size: 22px; color: var(--akzent-hell); text-decoration: none; }
.lab { padding: 0 12px 4px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--label); }
.nv { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 12px; margin-bottom: 4px; border: 0; border-radius: 0; background: transparent; color: var(--text); text-align: left; text-decoration: none; cursor: pointer; }
.nv:hover { background: var(--hover); color: var(--text); }
.nv.on, .nv.on:hover { background: var(--akzent-weich); color: var(--akzent-text2); font-weight: 600; }
.nv svg { flex: none; }
.bdg { margin-left: auto; min-width: 22px; padding: 0 7px; border-radius: 0; background: var(--rosa); color: #fff; font-size: 12px; font-weight: 700; text-align: center; }
.bdg.lila { background: var(--grau); color: var(--bg); }
.me { margin-top: auto; border-top: 1px solid var(--linie); padding: 16px 12px 0; display: flex; flex-direction: column; gap: 14px; }
.me .nv { padding: 0; margin: 0; min-height: 52px; }
.me .nv.on { padding: 0 8px; }
.av { width: 44px; height: 44px; border-radius: 0; background: var(--akzent2); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.av.klein { width: 36px; height: 36px; font-size: 14px; }
.wer { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.wer b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.tp { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; min-height: 77px; padding: 14px 40px; border-bottom: 1px solid var(--linie); background: var(--kopf); }
.tp h1 { font-size: 22px; font-weight: 700; }
.tp h1 small { font-size: 15px; font-weight: 500; color: var(--leise); margin-left: 6px; }
.pfad { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.pfad span { color: var(--label); }
.pfad b { font-weight: 600; }
.ct { padding: 28px 40px 64px; }
.pg { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
.pg.schmal { max-width: 760px; }
.pg.breit { max-width: 1100px; }
.knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }


/* Schmale Fenster: Seitenleiste wird zur Leiste oben */
@media (max-width: 900px) {
.shell { flex-direction: column; }
.sb { display: none; }
.tp, .ct { padding-left: 16px; padding-right: 16px; }


}


/* ---------- Bausteine */
.bt { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 1px solid transparent; border-radius: 0; background: var(--akzent); color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.bt:hover { background: var(--akzent2); color: #fff; }
.bt.klein { min-height: 38px; padding: 0 14px; font-size: 14px; border-radius: 0; }
.bt.rot { background: var(--rot); }
.bt:disabled, .bt2:disabled { opacity: .6; cursor: progress; }
.bt2 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--rand); border-radius: 0; background: var(--hover); color: var(--text); font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.bt2:hover { border-color: var(--rand-hover); background: var(--hover2); color: var(--text); }
.bt2.klein { min-height: 38px; padding: 0 14px; font-size: 14px; border-radius: 0; }
.bt2.rosa { color: var(--rosa-hell); border-color: var(--rosa-rand); background: transparent; }
.bt2.rosa:hover { border-color: var(--rosa); background: rgba(230, 0, 54, .08); }
.lk { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--akzent-hell); font-weight: 600; text-decoration: none; cursor: pointer; }
.lk:hover { color: var(--akzent-text); text-decoration: underline; }
.lk.rosa { color: var(--rosa-hell); }
.lk.klein { min-height: 32px; font-size: 14px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid var(--linie2); border-radius: 0; background: transparent; color: var(--text3); font-weight: 500; font-size: 14px; cursor: pointer; }
.chip.on { background: var(--akzent-weich); border-color: var(--akzent); color: var(--akzent-text); font-weight: 600; }
.chip:disabled { cursor: default; opacity: .85; }
.schloss { display: inline-flex; vertical-align: -2px; margin-left: 8px; color: var(--leise); }
.chip span { opacity: .75; }
.tg { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 0; font-size: 13px; font-weight: 500; background: var(--chip); color: var(--akzent-text); }
.tg.rosa { background: var(--rosa-weich); color: var(--rosa-hell); }
.tg.gruen { background: var(--gruen-weich); color: var(--gruen); }
.tg.grau { background: var(--chip-grau); color: var(--text3); }
.tg.lila { background: var(--akzent-weich); color: var(--akzent-text); }
.tg.gelb { background: var(--gelb-weich); color: var(--gelb-text); }
.cd { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 0; padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.cd.rosa { border-left: 4px solid var(--rosa); }
.cd.lila { border-left: 4px solid var(--grau); }
.cd.leer { border-style: dashed; background: transparent; align-items: center; text-align: center; padding: 32px 24px; }
.liste { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 0; overflow: hidden; }
.k { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--label); }
.h2 { font-size: 18px; font-weight: 700; }
.inp { width: 100%; min-height: 48px; padding: 0 16px; border: 1px solid var(--linie2); border-radius: 0; background: var(--feld); }
.inp.gross { min-height: 52px; font-size: 17px; }
.ta { width: 100%; padding: 12px 16px; border: 1px solid var(--linie2); border-radius: 0; background: var(--feld); resize: vertical; line-height: 1.6; }
.inp:focus, .ta:focus { border-color: var(--akzent); outline: none; box-shadow: none; }

/* KI-Elemente (Suchfeld, KI-Knöpfe): drehender Farbverlaufsrand in den Markenfarben (Rot, helles Rot, dunkles Rot, Grau, Lichtgrau) bei Hover, Fokus und Eingabe; bewusste Ausnahme von „keine Verläufe“ und „keine Schatten“, damit KI-Elemente auf einen Blick erkennbar bleiben */
@property --ki-w { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes ki-dreh { to { --ki-w: 360deg; } }
.ki { position: relative; border-radius: 0; transition: box-shadow .4s ease-out; }
.ki::before { content: ''; position: absolute; inset: 0; z-index: 1; padding: 2px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--ki-w), var(--ki-1), var(--ki-2), var(--ki-3), var(--ki-4), var(--ki-5), var(--ki-1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .4s ease-out; animation: ki-dreh 5s linear infinite; }
.ki:is(:hover, :focus-visible)::before, .ki-feld:focus-within::before, .ki-feld:has(.inp:not(:placeholder-shown))::before { opacity: .8; transition: opacity .7s ease-in-out; }
.ki:is(:hover, :focus-visible), .ki-feld:focus-within, .ki-feld:has(.inp:not(:placeholder-shown)) {
  box-shadow: -6px 0 18px -8px var(--ki-glow1), 6px 0 18px -8px var(--ki-glow2), 0 6px 18px -8px var(--ki-glow3), 0 -6px 18px -8px var(--ki-glow4);
  transition: box-shadow .7s ease-in-out; }
.ki:disabled::before { opacity: 0; }
.ki:disabled { box-shadow: none; }
.ki:focus-visible { outline: none; }
.lk.ki { padding: 0 10px; margin: 0 -10px; border-radius: 0; }
.lk.ki:hover { text-decoration: none; }
.ki-feld { display: flex; flex: 1; min-width: 0; }
.ki-feld .inp { transition: border-color .4s ease-out; }
.ki-feld .inp:focus, .ki-feld:hover .inp { border-color: transparent; box-shadow: none; transition: border-color .7s ease-in-out; }
@media (prefers-reduced-motion: reduce) {
.ki::before { animation: none; }
 
}

/* Live-Vorschläge unter dem Suchfeld */
.vs-wrap { position: relative; display: flex; flex: 1; min-width: 0; }
.vs { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; padding: 6px; border: 1px solid var(--linie2); border-radius: 0; background: var(--flaeche2); box-shadow: none; }
.vs-z { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 6px 12px; border-radius: 0; color: var(--text3); cursor: pointer; }
.vs-z svg { flex: none; color: var(--leise); }
.vs-z:hover, .vs-z[aria-selected="true"] { background: var(--akzent-tief); color: var(--text); }
.vs-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-t b { font-weight: 700; color: var(--text); }
select.inp { min-height: 40px; height: 40px; padding: 0 10px; width: auto; }
.fld { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--text3); font-weight: 500; }
.stern { margin-left: 3px; color: var(--rosa-hell); font-weight: 700; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 0; background: var(--feld); border: 1px solid var(--linie2); align-self: flex-start; }
.seg button { min-height: 40px; min-width: 56px; padding: 0 14px; border: 0; border-radius: 0; background: transparent; color: var(--text3); font-weight: 500; cursor: pointer; }
.seg button.on { background: var(--akzent-weich); color: var(--akzent-text); font-weight: 600; }
.seg.klein button { min-height: 34px; min-width: 44px; padding: 0 8px; font-size: 13px; }
.banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding: 16px 20px; border-radius: 0; background: var(--rosa-tief); border: 1px solid var(--banner-rand); }
.banner.grau { background: var(--banner-grau); border-color: var(--rand); }
.banner.rot { background: var(--rot-weich); border-color: var(--rot-rand); }
.banner.gruen { background: var(--banner-gruen); border-color: var(--banner-gruen-rand); }
.banner p { color: var(--banner-text); }
mark { background: var(--mark-bg); color: var(--mark-text); padding: 0 2px; border-radius: 0; }
.ic { width: 36px; height: 36px; border-radius: 0; display: flex; align-items: center; justify-content: center; flex: none; background: var(--chip); color: var(--akzent-text2); font-size: 10.5px; font-weight: 700; letter-spacing: .02em; }
.ic.mail { background: var(--gruen-weich); color: var(--gruen); }
.ic.datei { background: var(--rosa-weich); color: var(--rosa-hell); }
.more { width: 44px; height: 44px; border: 0; border-radius: 0; background: transparent; color: var(--leise); cursor: pointer; flex: none; display: flex; align-items: center; justify-content: center; }
.more:hover, .more[aria-expanded="true"] { background: var(--akzent-weich); color: var(--akzent-text); }
.pop { position: absolute; right: 16px; top: 56px; z-index: 20; width: 300px; max-width: calc(100vw - 48px); padding: 6px; border-radius: 0; background: var(--hover); border: 1px solid var(--rand); box-shadow: none; display: flex; flex-direction: column; }
.mi { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 0; background: transparent; color: var(--text); text-align: left; text-decoration: none; cursor: pointer; }
.mi:hover { background: var(--akzent-weich); color: var(--text); }
.mi svg { flex: none; color: var(--leise); }
.mi.rosa, .mi.rosa svg { color: var(--rosa-hell); }
.sep { height: 1px; background: var(--linie2); margin: 6px 4px; }


/* ---------- Themenliste */
.it { padding: 20px 24px; border-top: 1px solid var(--linie); display: flex; flex-direction: column; gap: 6px; }
.it:first-child { border-top: 0; }
.it.due { background: var(--rot-weich); }
.it-k { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; }
.it .tt { font-weight: 600; font-size: 18px; color: var(--text-stark); text-decoration: none; }
.it .tt:hover { text-decoration: underline; }
.it .meta { color: var(--leise); font-size: 14px; }
.it .meta.due { color: var(--rot-text); font-weight: 600; }
.it p { color: var(--text3); }
.hit { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 12px 16px; border: 1px solid var(--linie); border-radius: 0; background: var(--flaeche); color: var(--text); text-align: left; cursor: pointer; }
.hit:hover { border-color: var(--akzent); }
.hit b { font-weight: 600; }
.hit q { display: block; margin-top: 4px; padding-left: 12px; border-left: 3px solid var(--akzent); color: var(--text2); font-size: 14px; quotes: none; }
.hit .aus { font-size: 14px; color: var(--text3); }


/* ---------- Erinnerungen */
.ec { background: var(--flaeche); border: 1px solid var(--linie); border-left: 4px solid var(--rosa); border-radius: 0; padding: 20px 24px; display: flex; flex-direction: column; gap: 10px; }
.ec.ent { border-left-color: var(--rand); background: var(--ec); }
.ec h3 { font-size: 19px; font-weight: 600; line-height: 1.3; }
.ec h3 a { color: var(--text-stark); text-decoration: none; }
.ec h3 a:hover { text-decoration: underline; }
.act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--linie); }
.zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; padding: 14px 24px; border-top: 1px solid var(--linie); }
.zeile:first-child { border-top: 0; }
.zeile a { font-weight: 600; color: var(--text); text-decoration: none; }
.zeile a:hover { text-decoration: underline; }


/* ---------- Karte der Zusammenhänge */
.legende { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font-size: 13px; color: var(--leise); }
.legende span { display: inline-flex; align-items: center; gap: 8px; }
.legende i { display: inline-block; }
.lf { position: absolute; width: 170px; padding: 10px 14px; border-radius: 0; background: var(--flaeche2); border: 1px solid var(--rand); color: var(--text); text-align: left; line-height: 1.3; cursor: pointer; box-shadow: none; transition: opacity .5s, filter .5s, background .5s, box-shadow .5s, border-color .5s; }
.lf b { display: block; font-size: 13.5px; font-weight: 600; }
.lf small { display: block; font-size: 12px; color: var(--leise); margin-top: 2px; }
.lf small.due { color: var(--rosa-hell); }
.lf.allein { border-style: dashed; }
.lf.nah { background: var(--akzent-tief); border-color: var(--akzent); box-shadow: none; z-index: 4; }
.lf.fokus { background: var(--nav-bg); color: #fff; border: 1px solid var(--nav-bg); box-shadow: none; z-index: 5; }
.lf.fokus small { color: #BBBBBB; }
.ov { position: absolute; width: 184px; min-height: 76px; padding: 12px 24px; border-radius: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--text); cursor: pointer; box-shadow: none; z-index: 3; transition: opacity .5s, filter .5s, background .4s, box-shadow .4s; }
.ov span { display: block; font-size: 11.5px; font-weight: 500; margin-top: 3px; }
.ov.ok { background: var(--akzent-weich); border: 1.5px solid var(--akzent); }
.ov.ok span { color: var(--gruen); }
.ov.vs { background: var(--rosa-tief); border: 1.5px dashed var(--rosa); }
.ov.vs span { color: var(--rosa-hell); }
.ov.ok.gewaehlt { background: var(--akzent-weich); box-shadow: none; }
.ov.vs.gewaehlt { background: var(--rosa-weich); box-shadow: none; }
.grau { filter: grayscale(1); }
.vig { position: absolute; inset: 0; pointer-events: none; transition: opacity .8s; opacity: 0; }
.fl { position: absolute; z-index: 8; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--rand); border-radius: 0; background: rgba(20,23,42,.92); color: var(--text); font-weight: 600; cursor: pointer; box-shadow: none; }
.fl.oben { left: 16px; top: 16px; }
.fl.unten { right: 16px; bottom: 16px; }
.tchip { min-height: 36px; padding: 0 12px; border: 1px solid var(--rand); border-radius: 0; background: var(--flaeche2); color: var(--text); font-weight: 600; font-size: 13.5px; cursor: pointer; }
.tchip:hover { border-color: var(--akzent); }
.q { padding: 6px 0 6px 12px; border-left: 3px solid var(--rand); font-size: 14px; color: var(--text2); }


/* ---------- Thema */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); background: var(--flaeche); border: 1px solid var(--linie); border-radius: 0; overflow: hidden; }
.fact { padding: 22px 26px; border-right: 1px solid var(--linie); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fact:last-child { border-right: 0; }
.fact .v { font-weight: 600; font-size: 20px; display: flex; align-items: center; gap: 8px; }
.fact .lk { min-height: 36px; font-size: 14px; align-self: flex-start; }
.punkt { width: 8px; height: 8px; border-radius: 0; background: var(--gruen); flex: none; }
.ent { position: relative; display: flex; gap: 16px; padding: 20px 24px; border-top: 1px solid var(--linie); }
.ent.hl { background: var(--akzent-tief); box-shadow: inset 3px 0 0 var(--akzent); }
.ent-k { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.ent-k b { font-weight: 600; font-size: 16px; }
.ent p { margin-top: 4px; color: var(--text2); white-space: pre-wrap; overflow-wrap: anywhere; }
.dleiste { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 6px; padding: 6px 14px; border: 1px solid var(--linie2); border-radius: 0; background: var(--bg); }
.dleiste .dn { flex: 1 1 200px; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.doc { margin-top: 6px; padding: 14px 18px; border-radius: 0; background: var(--bg); border: 1px solid var(--linie); font-size: 14px; line-height: 1.7; color: var(--text2); white-space: pre-wrap; max-height: 480px; overflow-y: auto; }
.seite { display: inline-block; margin: 6px 0; padding: 1px 8px; border-radius: 0; background: var(--akzent-weich); color: var(--akzent-text2); font-size: 12px; font-weight: 600; }
.composer { padding: 16px 24px; display: flex; flex-direction: column; gap: 12px; background: var(--flaeche2); }
.composer.ueber { box-shadow: inset 0 0 0 2px var(--akzent); }
.composer .ta { background: var(--bg); }


/* ---------- Dateien */
.row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 20px; border: 0; border-top: 1px solid var(--linie); background: transparent; color: inherit; text-align: left; cursor: pointer; }
.row:first-child { border-top: 0; }
.row:hover { background: var(--flaeche2); }
.row.on { background: var(--akzent-tief); box-shadow: inset 3px 0 0 var(--akzent); }
.row b { display: block; font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; }
.warn { display: inline-block; padding: 0 8px; border-radius: 0; background: var(--rosa-weich); color: var(--rosa-hell); font-size: 12px; font-weight: 600; margin-left: 6px; }
.zweispaltig { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.zweispaltig > :first-child { flex: 999 1 460px; min-width: 0; }
.zweispaltig > aside { flex: 1 1 300px; max-width: 380px; }


/* ---------- Benutzer und Einstellungen */
.ur { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 14px 16px 14px 20px; border-top: 1px solid var(--linie); }
.ur.kopfzeile { border-top: 0; padding-top: 10px; padding-bottom: 10px; background: var(--flaeche2); border-radius: 0; }
.ur .nm { flex: 1 1 240px; min-width: 0; display: flex; align-items: center; gap: 12px; }
.ur .rl { flex: 0 0 170px; }
.ur .dt { flex: 0 0 150px; font-size: 14px; color: var(--text3); }
.ur.aus { opacity: .7; }
.ur.offen { background: var(--akzent-tief); opacity: 1; }
.einst { padding: 0; gap: 0; overflow: hidden; }
.einst .ch { padding: 18px 24px; border-bottom: 1px solid var(--linie); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.einst .ch h2 { font-size: 17px; font-weight: 700; }
.einst .rw { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding: 16px 24px; border-bottom: 1px solid var(--linie); }
.einst .rw:last-child { border-bottom: 0; }
.einst .rw .t { flex: 1 1 260px; }
.einst .rw .t b { display: block; font-weight: 600; }
.einst .rw .t span { font-size: 13px; color: var(--leise); }
.ro { min-height: 44px; padding: 0 14px; border-radius: 0; background: var(--bg); border: 1px dashed var(--linie2); color: var(--text3); display: inline-flex; align-items: center; font-size: 14px; overflow-wrap: anywhere; }


/* ---------- Formulare, Dialoge, Meldungen */
.drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; min-height: 88px; padding: 16px; border: 2px dashed var(--rand); border-radius: 0; background: transparent; color: var(--text3); text-align: center; cursor: pointer; font-weight: 400; }
.drop:hover, .drop.ueber { border-color: var(--akzent); background: var(--flaeche2); }
.datei-zeile { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 14px; border-radius: 0; background: var(--flaeche2); border: 1px solid var(--linie2); font-weight: 400; color: var(--text); }
.leiste-unten { position: sticky; bottom: 0; z-index: 10; padding: 16px 40px; border-top: 1px solid var(--linie); background: var(--kopf-glas); backdrop-filter: blur(6px); }
.leiste-unten > div { max-width: 760px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px 20px; }
.schleier { position: fixed; inset: 0; z-index: 70; background: var(--schleier); display: flex; align-items: center; justify-content: center; padding: 24px; }
.dialog { width: 100%; max-width: 440px; border-radius: 0; background: var(--flaeche); border: 1px solid var(--rand); box-shadow: none; display: flex; flex-direction: column; gap: 16px; padding: 22px 24px; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 100; display: flex; align-items: center; gap: 16px; max-width: 460px; padding: 14px 18px; border-radius: 0; background: var(--toast-bg); color: var(--toast-text); font-weight: 500; box-shadow: none; }
.toast button { min-height: 36px; padding: 0 10px; border: 0; border-radius: 0; background: transparent; color: var(--toast-link); font-weight: 700; cursor: pointer; }
.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 48px 24px; background: var(--flaeche2); }
.auth .box { width: 100%; max-width: 420px; padding: 36px 32px; border-radius: 0; background: var(--flaeche); border: 1px solid var(--linie); box-shadow: none; display: flex; flex-direction: column; gap: 20px; }
.auth form { display: flex; flex-direction: column; gap: 16px; }
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; }
 
}


/* PDF-Betrachter */
.pdf-s { padding: 16px; }
.pdf-box { width: min(1200px, 100%); height: 100%; display: flex; flex-direction: column; border-radius: 0; background: var(--flaeche); border: 1px solid var(--rand); box-shadow: none; overflow: hidden; }
.pdf-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 18px; border-bottom: 1px solid var(--linie); }
.pdf-kopf b { overflow-wrap: anywhere; }
.pdf-rahmen { flex: 1; width: 100%; border: 0; background: var(--chip-grau); }


/* Nachfrage mit Kalender */
.nf-schnell { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.nf-schnell .bt2 { min-height: 44px; padding: 0 6px; justify-content: center; }
.bt2.on { background: var(--akzent-weich); border-color: var(--akzent); color: var(--text-stark); }


/* Suche innerhalb eines Themas */
#ts-erg:empty { display: none; }


/* Angepinnte Themen */
.it-k { align-items: center; }
.pinb { border: 0; background: transparent; color: var(--leise); width: 34px; height: 34px; min-height: 0; padding: 0; border-radius: 0; cursor: pointer; opacity: .35; display: inline-flex; align-items: center; justify-content: center; }
.it:hover .pinb, .pinb:focus-visible { opacity: 1; }
.pinb:hover { background: var(--flaeche2); color: var(--text); }
.pinb.an { opacity: 1; color: var(--akzent-hell); }
.pinb.an svg { fill: currentColor; }
.it.pinned { background-color: var(--akzent-tief); }
.pin-kopf { padding: 10px 24px 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--label); border-top: 1px solid var(--linie); }
.pin-kopf:first-child { border-top: 0; }
.bt2 svg { vertical-align: -3px; }
.bt2.on svg { fill: currentColor; }
.pin-kopf + .it { border-top: 0; }
.it .meta { margin-left: auto; }


/* Erinnerungsvorschlag der KI (Pop-up) */
.idee { position: fixed; right: 24px; bottom: 24px; z-index: 90; width: min(400px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border-radius: 0; background: var(--flaeche); border: 1px solid var(--akzent); box-shadow: none; }
.idee-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--akzent-hell); }
.idee-text { font-size: 18px; font-weight: 700; }
.idee-q { display: block; padding-left: 12px; border-left: 3px solid var(--akzent); color: var(--text3); font-size: 14px; quotes: none; overflow-wrap: anywhere; }
.idee-datum { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.idee a { color: var(--akzent-hell); font-weight: 600; }
@media (max-width: 600px) {
.idee { right: 16px; bottom: 16px; }
 
}
.idee-fuer .inp { min-height: 42px; }
.idee a.bt { color: #fff; text-decoration: none; }
.idee .ta { font-size: 14px; }


/* Knopf nach oben: unten mittig im Inhaltsbereich (neben der Seitenleiste); auf schmalen Bildschirmen mittig im Fenster */
#nach-oben { position: fixed; left: calc(272px + (100vw - 272px) / 2); transform: translateX(-50%); bottom: 24px; z-index: 40; width: 48px; height: 48px; border-radius: 0; border: 1px solid var(--rand); background: var(--flaeche2); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: none; transition: background .2s, border-color .2s; }
#nach-oben:hover, #nach-oben:focus-visible { background: var(--akzent-weich); border-color: var(--akzent); }
@media (max-width: 900px) {
#nach-oben { left: 50%; }
 
}
@media (max-width: 600px) {
#nach-oben { bottom: 16px; }
.idee { right: 16px; bottom: 76px; }
.toast { right: 16px; bottom: 76px; }
 
}


/* Chat im Thema */
.ts-frage { display: flex; justify-content: flex-end; }
.ts-frage span { max-width: 85%; padding: 10px 16px; border-radius: 0; background: var(--akzent-weich); border: 1px solid var(--akzent); overflow-wrap: anywhere; }
.ts-antwort { display: flex; flex-direction: column; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--linie); }
.ts-antwort:last-of-type { border-bottom: 0; }
.fl-bsp { display: flex; flex-direction: column; gap: 8px; }
.fl-bsp .chip { text-align: left; }
.fl-bewerten { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fl-bewerten .chip.on { border-color: var(--akzent); background: var(--akzent-weich); }
.fl-fb-form { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 100%; }
.fl-fb-form .inp { flex: 1 1 220px; min-width: 0; }
.fl-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.fl-nichts { display: flex; flex-wrap: wrap; gap: 8px; }

/* Auswertung der Fragen (Einstellungen) */
.fq-liste { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fq-liste li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--linie); overflow-wrap: anywhere; }
.fq-liste li:first-child { border-top: 0; }
.fq-liste .fq-n { margin-left: auto; color: var(--leise); font-variant-numeric: tabular-nums; }
.fq-liste q { flex: 1 1 100%; color: var(--text2); font-size: 14px; quotes: none; }


/* Erinnerungen: Aufgaben */
.af-zeit { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 420px; }
.it.erledigt .tt { text-decoration: line-through; color: var(--text3); }
.af-erledigt summary { cursor: pointer; }
.nf-schnell:has(:nth-child(4)) { grid-template-columns: repeat(4, 1fr); }
kbd { padding: 1px 6px; border: 1px solid var(--linie2); border-radius: 0; background: var(--feld); font: inherit; font-size: 12px; color: var(--text2, inherit); }
.inp::placeholder { opacity: .55; }


/* Aufgaben im Thema */
.ta { gap: 6px; }
.ta-z { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--linie); }
.ta-box { width: 24px; height: 24px; min-height: 0; padding: 0; border-radius: 0; border: 2px solid var(--linie2); background: transparent; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ta-box.an { background: var(--akzent); border-color: var(--akzent); }
span.ta-box { cursor: default; }
.ta-t { display: flex; flex-direction: column; gap: 2px; }
.ta-z.erledigt .ta-t b { text-decoration: line-through; color: var(--text3); }
.ta-z.due .ta-m { color: var(--rosa-hell); }
@media (max-width: 600px) {
.ta-z { grid-template-columns: 28px 1fr; }
.ta-m { grid-column: 2; }
 
}
.ts-frage { scroll-margin-top: 96px; }


/* Thema: kleine Beschriftung über der KI-Frage, damit man sie nicht mit dem Ablegen verwechselt */

/* Gedächtnis */
.gd-fakt { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr auto; align-items: baseline; gap: 10px; padding: 6px 0; border-top: 1px solid var(--linie); }
.gd-l { color: var(--text3); font-size: 14px; }
.gd-w { overflow-wrap: anywhere; }
@media (max-width: 900px) {
.gd-fakt { grid-template-columns: 1fr auto; }
.gd-l { grid-column: 1 / -1; }
 
}


/* ---------- Board (Kanban, eigener Reiter): vier Spalten, Karten mit Kunde, Wert und Frist */
.bd-wrap { max-width: 1680px; margin: 0 auto; }
.bd-rahmen { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 0; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.bd-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.bd { display: grid; grid-template-columns: repeat(6, minmax(145px, 1fr)); gap: 10px; overflow-x: auto; align-items: stretch; }
.bd.bd-intern { grid-template-columns: repeat(4, minmax(180px, 1fr)); }
.bd-sp { display: flex; flex-direction: column; gap: 8px; min-height: 200px; padding: 4px; border-radius: 0; border: 1px dashed transparent; }
.bd-sp.ueber { border-color: var(--akzent2); background: var(--akzent-tief); }
.bd-k { display: flex; justify-content: space-between; gap: 8px; padding: 0 4px; font-size: 14px; font-weight: 400; color: var(--leise); }
.bd-k b { font-weight: 600; color: var(--text); }
.bd-karten { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.bd-karte { background: var(--flaeche2); border: 1px solid var(--linie2); border-radius: 0; padding: 10px; display: flex; flex-direction: column; gap: 4px; cursor: grab; }
.bd-karte:hover { border-color: var(--rand); }
.bd-karte.zieht { opacity: .5; }
.bd-kk { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding-right: 24px; min-height: 22px; }
.bd-karte .tt { font-weight: 600; font-size: 14px; line-height: 1.35; color: var(--text); text-decoration: none; overflow-wrap: anywhere; hyphens: auto; }
.bd-karte .tt:hover { text-decoration: underline; }
.bd-karte .schloss { margin-left: 6px; color: var(--leise); vertical-align: -2px; }
.bd-z { font-size: 13px; color: var(--leise); }
.bd-unten { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-top: 2px; }
.bd-marken { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.bd-tag { font-size: 12px; padding: 2px 8px; border-radius: 0; background: var(--akzent-weich); color: var(--akzent-text); }
.bd-tag.gelb { background: var(--gelb-weich); color: var(--gelb-text); }
.bd-tag.rot { background: var(--rot-weich); color: var(--rot-text); }
.bd-tag.gruen { background: var(--gruen-weich); color: var(--gruen); }
.bd-ueber { color: var(--rosa-hell); font-weight: 600; }
.bd-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 16px; }

/* Felder im Raster dürfen schmaler werden als ihr Inhalt (lange Kundennamen, Datumsfelder), statt über den Rand zu laufen */
.bd-form > *, .kd-box > .fld { min-width: 0; }
.bd-form .inp, .kd-box > .fld > .inp { width: 100%; min-width: 0; text-overflow: ellipsis; }
.kd-box .bd-form { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
  /* im schmalen Kasten untereinander */
.bd-form { align-items: end; }
  /* Eingabefelder auf einer Linie, auch wenn eine Beschriftung einen Knopf hat */
.bd-form select.inp { height: 48px; min-height: 48px; }
@media (max-width: 600px) {
.bd-form { grid-template-columns: 1fr; }
.bd-rahmen { padding: 12px; }
 
}
.bd-dialog { max-width: 640px; max-height: calc(100vh - 48px); overflow-y: auto; }


/* ---------- Gedächtnis nach Produktionen: Ordner, Jahre, Hard Facts, Auswertung über die Jahre */
.or-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.or-karte { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 0; color: var(--text); text-decoration: none; }
.or-karte:hover { border-color: var(--rand); color: var(--text); }
.or-icon { flex: none; width: 40px; height: 40px; border-radius: 0; background: var(--akzent-weich); color: var(--akzent-hell); display: flex; align-items: center; justify-content: center; }
.or-t { display: flex; flex-direction: column; min-width: 0; }
.or-t b { overflow-wrap: anywhere; }
.or-jahr { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linie); }
.or-j { font-size: 22px; font-weight: 700; color: var(--akzent-hell); }
.or-jt { display: flex; flex-direction: column; min-width: 0; }
.or-jt .tt { font-weight: 600; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.or-jt .tt:hover { text-decoration: underline; }
.or-zu { display: flex; flex-wrap: nowrap; align-items: flex-end; gap: 10px; }
.or-zu select.inp { width: 100%; min-height: 48px; height: 48px; }
.or-zu > .bt { min-height: 48px; }
@media (max-width: 760px) {
.or-zu { flex-wrap: wrap; }
 
}
.pr-dok { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-top: 1px solid var(--linie); }
@media (max-width: 900px) {
.or-jahr { grid-template-columns: 72px 1fr; }
.or-jahr > .knoepfe { grid-column: 1 / -1; }
 
}


/* Board: Klick in die ganze Spalte fügt ein Thema hinzu, Karte öffnet die Schnellübersicht */
.bd-sp { cursor: pointer; min-height: 320px; border: 1px dashed transparent; transition: border-color .12s, background-color .12s; }
.bd-sp:hover, .bd-sp.auf { border-color: var(--rand); background: var(--hover-glas); }
.bd-k { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 4px; }
.bd-k .bd-n { margin-left: auto; }
.bd-k .bd-pl { width: 22px; height: 22px; border-radius: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; color: var(--leise); }
.bd-sp:hover .bd-pl, .bd-sp.auf .bd-pl { background: var(--akzent-weich); color: var(--akzent-hell); }
.bd-karte { position: relative; cursor: pointer; }
.bd-karte:focus-visible { outline: 2px solid var(--akzent-hell); outline-offset: 2px; }
.bd-x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: 0; border-radius: 0; background: transparent; color: var(--leise); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; }
.bd-karte:hover .bd-x, .bd-x:focus-visible { opacity: 1; }
.bd-x:hover { background: var(--rot-weich); color: var(--rot-text); }
@media (hover: none) {
.bd-x { opacity: 1; }
 
}
.bd-dialog { max-width: 960px; overflow-x: hidden; }
.kd-kopf { display: flex; align-items: center; gap: 8px; }
.kd-titel { flex: 1; font-size: 19px; font-weight: 700; }
.kd-gitter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.kd-spalte { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.kd-anp-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 10px 12px; margin-bottom: 12px; background: var(--akzent-weich); border: 1px solid var(--akzent); border-radius: var(--r-bedien); }
.kd-anp-leiste .kd-aus { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.kd-gitter.kd-anp .kd-spalte { min-height: 80px; }
.kd-bw { display: flex; flex-direction: column; gap: 0; outline: 2px dashed var(--akzent); outline-offset: 2px; border-radius: var(--r-bedien); }
.kd-ctl { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 10px; background: var(--akzent-weich); color: var(--text); font-size: 13px; }
.kd-ctl .lk { min-width: 28px; text-align: center; }
.kd-box { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border-radius: 0; background: var(--flaeche2); border: 1px solid var(--linie); }
.kd-trenner { border-top: 1px solid var(--linie); margin: 2px 0; }
.kd-zus { font-size: 14px; line-height: 1.6; color: var(--text2); }
.kd-blk { display: flex; flex-direction: column; gap: 6px; }
.kd-z { display: flex; flex-direction: column; font-size: 14px; }
.kd-farben { display: flex; flex-wrap: wrap; gap: 8px; }
.kd-farbe { width: 28px; height: 28px; border-radius: 0; border: 2px solid transparent; cursor: pointer; }
.kd-farbe.on { border-color: var(--text); box-shadow: none; }
.kd-farbe.ohne { background: transparent; border: 2px dashed var(--rand); }
.kd-farbe.ohne.on { border-style: solid; border-color: var(--text); }
.kd-farbe.f-lila { background: #8E86F5; }
.kd-farbe.f-blau { background: #5AA9E6; }
.kd-farbe.f-gruen { background: #6FD3A0; }
.kd-farbe.f-gelb { background: #E8C547; }
.kd-farbe.f-orange { background: #E89A4F; }
.kd-farbe.f-rosa { background: #E06BB8; }
.kd-farbe.f-grau { background: #8F95B2; }
@media (max-width: 760px) {
.kd-gitter { grid-template-columns: 1fr; }
 
}
.bd-sp:focus-visible { outline: 2px solid var(--akzent-hell); outline-offset: 2px; }
.kn-dialog { max-width: 760px; max-height: calc(100vh - 48px); overflow-y: auto; }
.kn-vorlagen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.kn-vorlage { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border: 1px solid var(--linie2); border-radius: 0; background: var(--flaeche2); color: var(--text); text-align: left; cursor: pointer; transition: border-color .12s, background-color .12s; }
.kn-vorlage:hover, .kn-vorlage:focus-visible { border-color: var(--rand); background: var(--hover3); }
.kn-vorlage.on { border-color: var(--akzent-hell); background: var(--akzent-weich); }
.kn-vorlage b { font-size: 13px; font-weight: 600; }
.kn-vorlage .cap { font-size: 11px; line-height: 1.3; }
.kn-liste { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow-y: auto; }
.kn-z { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 12px; border: 1px solid transparent; border-radius: 0; background: var(--flaeche2); color: var(--text); text-align: left; cursor: pointer; }
.kn-z:hover, .kn-z:focus-visible { border-color: var(--rand); background: var(--hover3); }
.kn-t { font-weight: 600; overflow-wrap: anywhere; }
.kn-dialog.ueber { outline: 2px dashed var(--akzent2); outline-offset: -6px; }
.kn-dateien { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kn-weg { margin-left: 4px; border: 0; background: transparent; color: inherit; cursor: pointer; display: inline-flex; padding: 2px; }
.kn-bestand { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--linie); }
.kn-bestand .kn-liste { max-height: 24vh; }
.bd-karte.ueber { border-color: var(--akzent2); background: var(--akzent-tief); box-shadow: none; }
.bd-karte.laedt { opacity: .7; }
.bd-dialog.ueber { outline: 2px dashed var(--akzent2); outline-offset: -6px; }
.kd-auf { display: flex; flex-direction: column; gap: 8px; }
.kd-az { grid-template-columns: 28px 1fr; }
.kd-neu { display: grid; grid-template-columns: minmax(120px, 1.1fr) minmax(96px, .9fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-top: 4px; }
.kn-dialog .kd-neu { grid-template-columns: minmax(120px, 1.1fr) minmax(96px, .9fr) minmax(0, 1.2fr); }
.kd-neu #kd-a-titel, .kd-neu #kn-notiz { grid-column: 1 / -1; }
.kd-neu .inp { min-height: 40px; font-size: 14px; }
@media (max-width: 760px) {
.kd-neu, .kn-dialog .kd-neu { grid-template-columns: 1fr 1fr; }
 
}
.bd-aufg { list-style: none; margin: 4px 0 0; padding: 6px 0 0; border-top: 1px solid var(--linie); display: flex; flex-direction: column; gap: 4px; }
.bd-aufg li { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; font-size: 12px; color: var(--text3); }
.bd-aufg .bd-at { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-aufg .bd-aw { flex: none; color: var(--leise); }
.bd-aufg li.gelb .bd-aw { color: var(--gelb-text); }
.bd-aufg li.rot .bd-aw, .bd-aufg li.rot .bd-at { color: var(--rot-text); }
.bd-aufg .bd-mehr { color: var(--leise); }
.kd-kopf .bt2 { flex: none; white-space: nowrap; }
.kd-fuss { justify-content: space-between; }

/* Gedächtnis: strukturierte Ordner-Kacheln mit Inhaltsvorschau */
.or-gitter { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.or-karte { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 14px; padding: 20px; min-height: 132px; border-radius: 0; transition: border-color .15s, background-color .15s; }
.or-karte:hover { background: var(--flaeche2); }
.or-kopf { display: flex; align-items: center; gap: 14px; }
.or-icon { width: 48px; height: 48px; border-radius: 0; }
.or-icon svg { width: 24px; height: 24px; }
.or-t { flex: 1; gap: 4px; }
.or-t b { font-size: 18px; }
.or-t .cap { font-size: 13px; }
.or-inhalt { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--linie); margin-top: auto; }
.or-mini { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--text2); }
.or-mini-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-weight: 500; }
.or-mini-mehr { font-size: 12px; color: var(--akzent-hell); padding-top: 2px; }
.or-jahr { padding: 14px 0; }


/* Team: Avatare mit Initialen, verantwortlich mit farbigem Ring */
.tm-liste { display: flex; flex-direction: column; gap: 6px; }
.tm-z { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--linie); }
.tm-z:first-child { border-top: 0; padding-top: 0; }
.tm-n { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.tm-av { flex: none; width: 34px; height: 34px; border-radius: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; background: var(--chip); color: var(--text3); border: 1px solid var(--linie2); }
.tm-av.v { background: var(--akzent2); color: #fff; border-color: transparent; box-shadow: none; }
.tm-av.klein { width: 26px; height: 26px; font-size: 11px; }
.tm-av.mini { width: 24px; height: 24px; font-size: 10px; border: 2px solid var(--flaeche2); margin-left: -7px; box-shadow: none; }
.tm-av.mini:first-child { margin-left: 0; }
.tm-av.mini.v { box-shadow: none; border-color: var(--flaeche2); }
.tm-av.mehr { background: var(--flaeche); color: var(--leise); }
.bd-team { display: inline-flex; align-items: center; flex: none; margin-left: auto; }
.tm-rolle { align-self: flex-start; border: 1px solid var(--linie2); border-radius: 0; background: var(--feld); color: var(--text2); font-size: 13px; padding: 2px 8px; cursor: pointer; }
.tm-rolle:hover, .tm-rolle:focus-visible { border-color: var(--rand); color: var(--text); }
.tm-rolle option { background: var(--flaeche2); color: var(--text); }
.tm-ver { opacity: 0; }
.tm-z:hover .tm-ver, .tm-ver:focus-visible { opacity: 1; }
.tm-x { opacity: .6; }
.tm-z:hover .tm-x, .tm-x:focus-visible { opacity: 1; }
@media (hover: none) {
.tm-ver, .tm-x { opacity: 1; }
 
}
.tm-neu { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px dashed var(--rand); border-radius: 0; }
.tm-sicht { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--linie); }


/* Thema abschließen: Pop-up mit Gedächtnis-Ordner-Ablage, konsistenter Datumszeile und KI-Steckbrief */
.ab-dialog { max-width: 720px; max-height: calc(100vh - 48px); overflow-y: auto; }
.ab-dialog select.inp { width: 100%; min-height: 48px; height: 48px; }
.ab-box-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.ab-termin-zeile { display: grid; grid-template-columns: 1fr 1fr 120px; gap: 12px; align-items: end; }
@media (max-width: 560px) {
.ab-termin-zeile { grid-template-columns: 1fr; }
 
}


/* Aktive Kontext-Hinweise im Thema und in der Schnellübersicht */

/* Gedächtnis: Termin-Spalte (Datum + Jahr) und Inline-Editor */
.or-jahr { grid-template-columns: 116px 1fr auto; }
.or-j { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.or-j-datum { font-size: 15px; font-weight: 700; color: var(--akzent-hell); }
.or-j-sub { font-size: 12px; font-weight: 500; color: var(--leise); }
.or-termin-edit { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; margin-top: 4px; border-radius: 0; background: var(--flaeche2); border: 1px solid var(--linie2); }
.gd-kontakte { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.gd-kontakt-karte { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; padding: 12px 14px; border-radius: 0; background: var(--flaeche2); border: 1px solid var(--linie); overflow-wrap: anywhere; }
.gd-kontakt-karte > div:first-child { flex-wrap: wrap; }
.gd-kontakt-karte > div:first-child .knoepfe { flex-wrap: wrap; justify-content: flex-end; gap: 6px; }


/* Duplikat-Warnung */
.dup { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; padding: 10px 14px; border-radius: 0; background: var(--flaeche2); border: 1px solid var(--linie2); font-size: 14px; font-weight: 400; color: var(--text3); }
.dup-t { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.dup-e { display: inline-flex; align-items: center; gap: 6px; }
.dup-l { font-weight: 600; }

/* Chronik je Kunde */
.chr { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.chr-z { display: grid; grid-template-columns: 96px 1fr auto; gap: 4px 14px; padding: 12px 0; border-top: 1px solid var(--linie); align-items: start; }
.chr-d { color: var(--text3); font-size: 14px; font-variant-numeric: tabular-nums; padding-top: 2px; }
.chr-m { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.chr-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.chr-text { color: var(--text2); font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.chr-wer { min-width: 200px; }
.vm-form, .fb-form { gap: 12px; }
@media (max-width: 600px) {
.chr-z { grid-template-columns: 1fr auto; }
.chr-d { grid-column: 1 / -1; }
 
}

/* Sterne (Feedback) */
.sterne { display: inline-flex; gap: 1px; color: var(--rand); font-size: 15px; letter-spacing: 1px; }
.sterne .an { color: var(--stern); }
.sterne-wahl { display: inline-flex; gap: 2px; }
.sterne-wahl button { background: none; border: 0; padding: 4px; min-width: 36px; min-height: 36px; font-size: 22px; line-height: 1; color: var(--rand); cursor: pointer; border-radius: 0; }
.sterne-wahl button.an { color: var(--stern); }
.sterne-wahl button:hover, .sterne-wahl button:focus-visible { background: var(--flaeche2); }
.fb-z { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: 1px solid var(--linie); }
.fb-z p { color: var(--text2); line-height: 1.55; overflow-wrap: anywhere; }
.fb-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.fb-l { color: var(--rosa-hell); font-weight: 600; }
.fb-l.gut { color: var(--gruen); }
.chr-ablage.ueber { outline: 2px dashed var(--akzent2); outline-offset: -6px; }

/* Ablage der Venue */
.va-z { display: grid; grid-template-columns: 96px 1fr auto; gap: 4px 14px; padding: 12px 0; border-top: 1px solid var(--linie); align-items: start; }
.va-datei { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; overflow-wrap: anywhere; }
@media (max-width: 600px) {
.va-z { grid-template-columns: 1fr auto; }
.va-z .chr-d { grid-column: 1 / -1; }
 
}

/* Ansprechpartner: Name öffnet die gefilterte Chronik */
.kt-name { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--text); text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.kt-name:hover, .kt-name:focus-visible { color: var(--akzent-hell); text-decoration: underline; }
.gd-kontakt-karte.gewaehlt { border-color: var(--akzent2); box-shadow: none; }
.gd-kontakt-karte.gewaehlt .kt-name { color: var(--akzent-hell); }

/* Board: Ablagefläche „Verworfen“ unter den Spalten */
.bd-sp.bd-verw { min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 10px; padding: 12px 16px; cursor: default; border: 1px dashed var(--linie2); color: var(--text3); font-size: 14px; }
.bd-sp.bd-verw.ueber { border-color: var(--rot); background: color-mix(in srgb, var(--rot) 12%, transparent); color: var(--text); }

/* Datum im Dokument an der Datei im Thema */
.dd-k { color: var(--text3); }
.dd-edit { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dd-edit .inp { width: auto; min-height: 34px; padding: 0 10px; font-size: 14px; }
.bd-aeltere { align-self: center; padding: 6px 4px; }

/* Stammnotizen */
.sn-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sn-z { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; border-radius: 0; background: var(--flaeche2); border: 1px solid var(--linie); min-width: 0; }
.sn-z.wichtig { border-color: var(--stern); box-shadow: inset 4px 0 0 var(--stern); }
.sn-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.sn-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.sn-k { gap: 4px 14px; }
.sn-form { display: flex; flex-direction: column; gap: 8px; margin: 6px 0; }
.sn-check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text2); }

/* Angepinnte Hinweise oben in Thema und Produktion */
.sn-wichtig { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; border-radius: 0; background: var(--flaeche2); border: 1px solid var(--stern); box-shadow: inset 4px 0 0 var(--stern); }
.sn-wichtig ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sn-wichtig li { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }

/* Fragen-Leiste: in der Kopfzeile jeder Seite zwischen Überschrift und Knöpfen, das Gespräch klappt darunter auf */
.tp { position: relative; }
@media (min-width: 901px) {
.tp { position: sticky; top: 0; z-index: 50; }
 
}

/* breit genug: Überschrift (höchstens knapp ein Drittel), Leiste in der Mitte, Knöpfe rechts in einer Zeile; sonst rutscht die Leiste in eine eigene Zeile */
.fl-box { flex: 1 1 100%; order: 3; margin-top: 4px; }
@media (min-width: 1150px) {
.tp > :first-child { min-width: 0; flex: 0 1 auto; max-width: 32%; }
.fl-box { flex: 1 1 280px; order: 0; margin: 0 auto; min-width: 280px; max-width: 560px; }
 
}
.fl-in { width: 100%; }
.fl-allein { padding: 12px 40px; border-bottom: 1px solid var(--linie); background: var(--kopf); }
.fl-allein .fl-box { max-width: 780px; }
.fl-leiste { display: flex; align-items: center; gap: 8px; }
.fl-leiste .inp { min-height: 44px; height: 44px; font-size: 15px; padding: 0 14px; border-radius: 0; }
.fl-leiste .bt2 { min-height: 44px; padding: 0 18px; border-radius: 0; font-size: 15px; }
.fl-leiste .fl-mik { flex: 0 0 44px; width: 44px; padding: 0 !important; justify-content: center; }
.fl-leiste .fl-mik.an { color: #fff; background: var(--rot); border-color: var(--rot); animation: mik-puls 1.2s ease-in-out infinite; }
@keyframes mik-puls { 50% { opacity: .6; } }
@media (prefers-reduced-motion: reduce) {
.fl-leiste .fl-mik.an { animation: none; }
 
}
.fl-leiste .fl-los { flex: 0 0 44px; width: 44px; padding: 0 !important; justify-content: center; }

/* KI-Leiste am rechten Rand: angedockt über die ganze Höhe, ab 1100 px schiebt sie die Seite zur Seite, darunter überlagert sie sie */
.fl-panel { position: fixed; top: 0; right: 0; bottom: 0; left: auto; z-index: 60; width: min(400px, 100vw); max-height: none; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 16px 18px; border-radius: 0; background: var(--flaeche); border: 0; box-shadow: none; }
@media (min-width: 1100px) {
.shell.ki-offen .col { margin-right: 400px; }
 
}

/* Treffer der Stichwortsuche: klappen unter der Suchleiste auf (das Gespräch mit der KI sitzt dagegen am rechten Rand) */
.fl-treffer { position: absolute; top: calc(100% - 6px); left: 50%; transform: translateX(-50%); z-index: 30; width: min(780px, calc(100% - 32px)); max-height: min(60vh, 520px); overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 16px 18px; border-radius: 0; background: var(--flaeche); border: 1px solid var(--akzent); box-shadow: none; }
.fl-panel.rein { animation: fl-rein .28s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes fl-rein { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 1100px) {
.shell.ki-rein .col { animation: fl-schieb .28s cubic-bezier(.2, .8, .2, 1) both; }
 
}
@keyframes fl-schieb { from { margin-right: 0; } to { margin-right: 400px; } }

/* der Flug der Frage zum Gespräch (flFlug): Blase der Leiste, unterwegs ein heller Kopf mit langem Schweif wie bei einer Sternschnuppe */
.fl-geist { position: fixed; z-index: 120; box-sizing: border-box; display: flex; align-items: center; padding: 0 15px; overflow: hidden; font-size: 15px; line-height: 1.45; pointer-events: none; background: var(--akzent-weich); border: 0; color: var(--text); }
.fl-geist-t { position: relative; z-index: 1; min-width: 0; overflow-wrap: anywhere; }
  /* bricht um wie die Sprechblase, damit die Landung nahtlos ist */
.fl-geist-kern { position: absolute; inset: -1px; border-radius: inherit; opacity: 0; background: radial-gradient(circle at 40% 40%, #fff, var(--ki-2) 45%, var(--ki-1)); }
.fl-schweif { position: fixed; z-index: 119; height: 9px; transform-origin: 100% 50%; pointer-events: none; opacity: 0; clip-path: polygon(0 50%, 100% 0, 100% 100%); background: linear-gradient(to left, #fff 0, var(--ki-2) 14%, var(--ki-1) 42%, color-mix(in srgb, var(--ki-1) 35%, transparent) 74%, transparent); filter: blur(1.6px) drop-shadow(0 0 8px var(--ki-glow1)); }
  /* läuft zur Spitze hin schmal aus, weich gezeichnet */
.fl-schweif::before { content: ''; position: absolute; inset: -9px 0; clip-path: polygon(0 50%, 100% 0, 100% 100%); background: linear-gradient(to left, color-mix(in srgb, var(--ki-2) 70%, transparent), color-mix(in srgb, var(--ki-1) 35%, transparent) 40%, transparent 85%); filter: blur(9px); opacity: .55; }
  /* der breite, weiche Schein um den Schweif */
/* KI-Schein am rechten Rand, nur in den Rottönen der Marke (kein Grau, kein sichtbarer Rand, kein Weichzeichner): ein Schein aus weichen Wolken, die unterschiedlich weit in die Seite reichen, jede für sich auf und ab treiben und deren Weite langsam atmet (organisch statt gleichmäßiges Band).
   Je näher die Maus kommt (--p, von flNah gesetzt), desto breiter Faden und Schein; auf Höhe der Maus (--my) wird der Faden hell und ein weicher Lichtkegel fällt in die Seite.
   Sieht die Eingabe nach einer Frage aus („ahnung“), gilt das Höchste ohne Lichtkegel */
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --a { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --my { syntax: '<length>'; inherits: true; initial-value: -400px; }
@keyframes fl-wandern { from { background-position: 0 0; } to { background-position: 0 100%; } }
@keyframes fl-wolken {
  0%, 100% { -webkit-mask-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; mask-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  31% { -webkit-mask-position: 0 46px, 0 -38px, 0 29px, 0 -52px, 0 -24px, 0 0; mask-position: 0 46px, 0 -38px, 0 29px, 0 -52px, 0 -24px, 0 0; }
  58% { -webkit-mask-position: 0 -21px, 0 33px, 0 -47px, 0 18px, 0 -40px, 0 0; mask-position: 0 -21px, 0 33px, 0 -47px, 0 18px, 0 -40px, 0 0; }
  83% { -webkit-mask-position: 0 27px, 0 -14px, 0 41px, 0 -30px, 0 -8px, 0 0; mask-position: 0 27px, 0 -14px, 0 41px, 0 -30px, 0 -8px, 0 0; } }
@keyframes fl-weite { 0%, 100% { transform: scaleX(1); } 27% { transform: scaleX(1.14); } 49% { transform: scaleX(.9); } 76% { transform: scaleX(1.07); } }
.fl-linie { --e: max(var(--p), var(--a)); position: fixed; top: 0; bottom: 0; right: 0; width: 2px; z-index: 41; pointer-events: none; opacity: calc(.65 + .35 * var(--e)); transition: --p .3s ease-out, --a .5s ease, --my .15s ease-out; }
.fl-linie::before { content: ''; position: absolute; top: 0; bottom: 0; right: 100%; width: calc(80px + 50px * var(--e)); opacity: calc(.6 + .4 * var(--e)); transform-origin: 100% 50%; background: linear-gradient(to left, color-mix(in srgb, var(--ki-1) 30%, transparent), color-mix(in srgb, var(--ki-2) 12%, transparent) 50%, transparent);
  -webkit-mask-image: radial-gradient(ellipse 100% 13% at 100% 11%, #000, transparent), radial-gradient(ellipse 72% 19% at 100% 34%, #000, transparent), radial-gradient(ellipse 96% 11% at 100% 55%, #000, transparent), radial-gradient(ellipse 64% 17% at 100% 76%, #000, transparent), radial-gradient(ellipse 88% 10% at 100% 94%, #000, transparent), linear-gradient(to left, rgba(0, 0, 0, .45), transparent 55%); mask-image: radial-gradient(ellipse 100% 13% at 100% 11%, #000, transparent), radial-gradient(ellipse 72% 19% at 100% 34%, #000, transparent), radial-gradient(ellipse 96% 11% at 100% 55%, #000, transparent), radial-gradient(ellipse 64% 17% at 100% 76%, #000, transparent), radial-gradient(ellipse 88% 10% at 100% 94%, #000, transparent), linear-gradient(to left, rgba(0, 0, 0, .45), transparent 55%); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: fl-wolken 29s ease-in-out infinite, fl-weite 11.7s ease-in-out infinite; }
.fl-linie::after { content: ''; position: absolute; right: 0; top: calc(var(--my) - 130px); height: 260px; width: 190px; opacity: calc(var(--p) * .5);
  background: radial-gradient(ellipse farthest-side at 100% 50%, color-mix(in srgb, var(--ki-1) 32%, transparent), color-mix(in srgb, var(--ki-2) 12%, transparent) 50%, transparent); }
.fl-linie.offen { right: min(400px, 100vw); z-index: 61; }
.fl-linie.ahnung { --a: 1; }
.fl-linie.rein { animation: fl-rein .28s cubic-bezier(.2, .8, .2, 1) both; }
.fl-linie.offen::after { display: none; }
  /* bei aufgeklapptem Gespräch folgt nichts mehr der Maus */
@media (max-width: 900px) {
.fl-linie { display: none; }
 
}
@media (prefers-reduced-motion: reduce) {
.fl-linie, .fl-linie.rein, .fl-linie::before { animation: none; }
 
}

/* Eingabe im Gespräch selbst: unten angeheftet, sobald das Gespräch aufgeklappt ist */
.fl-chat-form { position: sticky; bottom: -16px; z-index: 2; display: flex; gap: 8px; align-items: center; margin: auto -18px -16px; padding: 12px 18px; background: var(--flaeche); border-top: 1px solid var(--linie); }
.fl-chat-form .inp { min-height: 44px; height: 44px; font-size: 15px; padding: 0 14px; border-radius: 0; }
.fl-chat-form .bt2 { min-height: 44px; border-radius: 0; flex: 0 0 44px; width: 44px; padding: 0 !important; justify-content: center; }

/* Griff an der Kante im Glas-Stil (wie bei KI-Oberflächen üblich): halbtransparent mit Hintergrundunschärfe, heller Innenkante, feinem Rand und einem Hauch Rot, dazu ein weicher roter Schein. Mittig an der Kante: eingeklappt am Fensterrand (Pfeil nach links), aufgeklappt an der Kante des Gesprächs (Pfeil nach rechts). Kein Logo, keine Beschriftung. Die Zahl zeigt Fragen im Gespräch dieser Seite */
@keyframes fl-wipp { 50% { transform: translateX(-3px); } }
@keyframes fl-rein-griff { from { transform: translateY(-50%) translateX(24px); opacity: 0; } to { transform: translateY(-50%); opacity: 1; } }
.fl-rand { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 42; display: flex; align-items: center; justify-content: center; width: 34px; height: 76px; padding: 0; border: 1px solid color-mix(in srgb, var(--text) 13%, transparent); border-right: 0; border-radius: 16px 0 0 16px; cursor: pointer; color: var(--text2);
  background: linear-gradient(135deg, color-mix(in srgb, var(--ki-2) 20%, transparent), color-mix(in srgb, var(--flaeche) 20%, transparent) 70%), color-mix(in srgb, var(--flaeche) 52%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(255, 255, 255, .12), -6px 0 22px -8px var(--ki-glow1);
  transition: width .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease; }
.fl-rand svg { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--ki-1) 35%, transparent)); transition: transform .25s ease; }
.fl-rand:is(:hover, :focus-visible) { width: 40px; color: var(--akzent); border-color: color-mix(in srgb, var(--ki-1) 45%, transparent); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .7), inset 0 -1px 0 rgba(255, 255, 255, .18), -8px 0 30px -6px var(--ki-glow1); }
.fl-rand:is(:hover, :focus-visible) svg { transform: translateX(-2px); }
.fl-rand.zu:is(:hover, :focus-visible) svg { transform: translateX(2px); }
.fl-rand:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.fl-rand.ahnung { color: var(--akzent); border-color: color-mix(in srgb, var(--ki-1) 45%, transparent); }
.fl-rand.ahnung svg { animation: fl-wipp 1.6s ease-in-out infinite; }
.fl-rand.zu { right: min(400px, 100vw); z-index: 62; }
.fl-rand.zu.rein { animation: fl-rein-griff .28s cubic-bezier(.2, .8, .2, 1) both; }
.fl-rand b { position: absolute; top: 6px; left: 6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; font-size: 11px; font-weight: 600; line-height: 16px; text-align: center; background: var(--akzent); color: #fff; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.fl-rand { background: var(--flaeche); }
 
}
@media (min-width: 901px) {
.fl-kopf .fl-zu { display: none; }
 
}
  /* am Handy gibt es den Griff nicht: dort schließt der Pfeil im Kopf des Gesprächs */
.fl-titel { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 900px) {
.fl-rand { display: none; }
.fl-panel { width: 100vw; border-left: 0; }
 
}
@media (prefers-reduced-motion: reduce) {
.fl-panel.rein, .shell.ki-rein .col, .fl-rand.ahnung { animation: none; }
 
}
.fl-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; position: sticky; top: -16px; z-index: 2; margin: -16px -18px 0; padding: 10px 18px; background: var(--flaeche); border-bottom: 1px solid var(--linie); border-radius: 0; }
.fl-kopf .knoepfe { display: flex; align-items: center; gap: 6px; }
.fl-rueck-form { display: flex; gap: 8px; align-items: center; margin-top: 4px; scroll-margin-bottom: 16px; }
.fl-kopf .more { width: 36px; height: 36px; }
.fl-rueck-form .inp { flex: 1 1 auto; min-width: 0; }
.fl-rueck { padding: 12px 14px; border-radius: 0; background: var(--akzent-tief); border: 1px solid var(--akzent); border-bottom: 1px solid var(--akzent) !important; }
@media (max-width: 900px) {
.fl-allein { padding: 8px 16px; }
 
}
kbd { display: inline-block; min-width: 22px; padding: 0 6px; border: 1px solid var(--rand); border-bottom-width: 2px; border-radius: 0; background: var(--flaeche2); color: var(--text); font: inherit; font-size: 12px; font-weight: 600; text-align: center; }

/* Menü „⋯“ in der Kopfzeile des Themas, Papierkorb, Suchtreffer */
.mw { position: relative; display: inline-flex; }
.pop.pk { right: 0; top: 48px; width: 320px; }
.mi-t { display: flex; flex-direction: column; padding: 6px 0; line-height: 1.3; }
.mi-t small { color: var(--leise); font-size: 12.5px; font-weight: 400; }
.mi.rosa .mi-t small { color: var(--leise); }
.pk-zeile .it-k { flex-direction: column; justify-content: flex-start; align-items: flex-start; }
.pk-zeile .knoepfe { margin-top: 4px; }
.pk-zeile .it .meta, .pk-zeile .meta { margin-left: 0; }
.hit-k { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hit-m:empty { display: none; }
.hit-go { align-self: flex-end; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--akzent-hell); }
.hit:hover .hit-go { text-decoration: underline; }

/* Themenliste: Status als Reiter, Filter in einer Zeile, aktive Filter als Schilder */
.reiter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px; border-bottom: 1px solid var(--linie2); }
.flt { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.flt-f { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--leise); font-weight: 500; }
.flt-f .inp { width: auto; min-width: 170px; }
.flt-zeile { flex-direction: row; align-items: center; gap: 8px; }
.flt-aktiv { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip.klein { min-height: 32px; padding: 0 12px; font-size: 13px; }

/* Farbe mit Bedeutung: Art-Schild, Legende, Markierung, überfällige Karte */
.pkt { display: inline-block; width: 8px; height: 8px; border-radius: 0; background: var(--c, var(--leise)); flex: none; }
.art.t1, .leg.t1 { --c: var(--f-1); }
.art.t2, .leg.t2 { --c: var(--f-2); }
.art.t3, .leg.t3 { --c: var(--f-3); }
.art.t4, .leg.t4 { --c: var(--f-4); }
.art.t5, .leg.t5 { --c: var(--f-5); }
.art.t6, .leg.t6 { --c: var(--f-6); }
.art.t7, .leg.t7 { --c: var(--f-7); }
.bd-tag.art, .tg.art { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--linie2); color: var(--text2); }
.bd-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 4px; }
.leg { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 12px; border: 1px solid var(--linie2); border-radius: 0; background: transparent; color: var(--text3); font-size: 13px; cursor: pointer; }
.leg span { opacity: .7; }
.leg:hover { border-color: var(--rand); color: var(--text); }
.leg.on { background: var(--akzent-weich); border-color: var(--akzent); color: var(--akzent-text); font-weight: 600; }
.pkt-m { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 0; vertical-align: 1px; background: var(--leise); }
.pkt-m.f-lila { background: #8E86F5; }
.pkt-m.f-blau { background: #5AA9E6; }
.pkt-m.f-gruen { background: #6FD3A0; }
.pkt-m.f-gelb { background: #E8C547; }
.pkt-m.f-orange { background: #E89A4F; }
.pkt-m.f-rosa { background: #E06BB8; }
.pkt-m.f-grau { background: #8F95B2; }
.bd-karte.t1 { --c: var(--f-1); }
.bd-karte.t2 { --c: var(--f-2); }
.bd-karte.t3 { --c: var(--f-3); }
.bd-karte.t4 { --c: var(--f-4); }
.bd-karte.t5 { --c: var(--f-5); }
.bd-karte.t6 { --c: var(--f-6); }
.bd-karte.t7 { --c: var(--f-7); }

/* Umrahmung in der Farbe der Art (Format bzw. Rubrik); überfällig geht vor und rahmt rot */
.bd-karte[class*=" t"] { border-color: color-mix(in srgb, var(--c) 65%, transparent); border-width: 1.5px; }
.bd-karte[class*=" t"]:hover { border-color: var(--c); }
.bd-karte.ueberfaellig, .bd-karte[class*=" t"].ueberfaellig { border-color: var(--rot-rand); }

/* Hell ist der blasse Rand kaum zu sehen: kräftiger Rand, rosa Fläche und roter Streifen links */
:root:not([data-theme="dark"]) .bd-karte.ueberfaellig, :root:not([data-theme="dark"]) .bd-karte[class*=" t"].ueberfaellig { border-color: var(--rot); background: var(--rot-weich); box-shadow: inset 4px 0 0 var(--rot); }

/* „Neues Thema“ als Baukasten: Titel und Notiz immer, alles Weitere als aufklappbare Bausteine */
.kn-haupt { display: flex; flex-direction: column; gap: 12px; }
.kn-bst-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.kn-bausteine { display: flex; flex-direction: column; gap: 8px; }
.bst { border: 1px solid var(--linie); border-radius: 0; background: var(--flaeche2); }
.bst.auf { border-color: var(--rand); }
.bst-k { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 16px; border: 0; border-radius: 0; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.bst-k:hover { background: var(--hover3); }
.bst-t { font-weight: 600; font-size: 15px; flex: none; }
.bst-z { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--leise); font-size: 13.5px; }
.bst-z.voll { color: var(--text2); }
.bst.auf .bst-t { flex: 1; }
.bst-pfeil { flex: none; margin-left: auto; color: var(--leise); display: inline-flex; }
.bst-pfeil svg { transform: rotate(-90deg); transition: transform .15s; }
.bst.auf .bst-pfeil svg { transform: rotate(90deg); }
.bst-inhalt { display: flex; flex-direction: column; gap: 12px; padding: 4px 16px 16px; }
.kn-dialog .kd-fuss { position: sticky; bottom: -22px; z-index: 2; margin: 0 -24px -22px; padding: 14px 24px; background: var(--flaeche); border-top: 1px solid var(--linie); border-radius: 0; }

/* Zeitrahmen: Abschnitte mit Sicherheit */

/* Aufgabe im Thema: eine schlanke Zeile statt eines großen Formulars */
.af-slim { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--rand); border-radius: 0; background: var(--flaeche2); }
.af-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 150px 140px auto; gap: 8px; align-items: center; }
.af-zeile .inp { min-height: 40px; font-size: 14px; padding: 0 10px; }
.af-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.af-extra { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; border-top: 1px solid var(--linie); }
.af-extra .af-uhr { max-width: 160px; }
.ta-z.frisch { animation: af-frisch 3.5s ease-out; }
@keyframes af-frisch { from { background: var(--akzent-weich); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) {
.ta-z.frisch { animation: none; background: var(--akzent-tief); }
 
}
@media (max-width: 760px) {
.af-zeile { grid-template-columns: 1fr 1fr; }
.af-zeile > :first-child { grid-column: 1 / -1; }
.af-zeile > button { grid-column: 1 / -1; }
 
}

/* Vorlagen in einer Zeile; Durchführung im Zeitrahmen mit eigenen Feldern */
.kn-vorlagen-wrap { display: flex; flex-direction: column; gap: 6px; }
.kn-vorlagen { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; overflow-x: auto; }
.kn-vorlagen .kn-vorlage { flex: none; flex-direction: row; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 0; font-size: 14px; font-weight: 500; }
.kn-vorlagen .kn-vorlage.on { font-weight: 600; }
.kn-vorlage-hinweis { min-height: 18px; }

/* Vorlage aus bestehender Produktion: feste Zeile unter dem Titel, Auswahl darunter */
.kn-vz { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-height: 32px; }
.kn-vz-picker { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--linie2); border-radius: 0; background: var(--flaeche2); }
.kn-vz-liste { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; }
.kn-vz-liste .kn-z { flex-wrap: wrap; }

/* Zwei-Faktor und Anmeldeprotokoll */
.zf-schritte { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; line-height: 1.5; }
.zf-schluessel { display: inline-block; margin-top: 4px; padding: 6px 10px; border-radius: 0; background: var(--flaeche2); border: 1px solid var(--linie2); font-family: ui-monospace, Consolas, monospace; font-size: 15px; letter-spacing: .06em; user-select: all; overflow-wrap: anywhere; }
.zf-codes { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.zf-codes code { padding: 8px 10px; border-radius: 0; background: var(--flaeche2); border: 1px solid var(--linie2); font-family: ui-monospace, Consolas, monospace; font-size: 15px; text-align: center; user-select: all; }
.prot { display: flex; flex-direction: column; }
.prot-z { display: grid; grid-template-columns: 18px 150px minmax(0, 1fr); gap: 2px 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--linie); font-size: 14px; }
.prot-z:first-child { border-top: 0; }
.prot-z.fehl .prot-s, .prot-z.fehl .prot-w { color: var(--rot-text); }
.prot-z:not(.fehl) .prot-s { color: var(--gruen); }
.prot-t { color: var(--leise); font-size: 13px; }
.prot-g { grid-column: 3; overflow-wrap: anywhere; }
@media (max-width: 600px) {
.prot-z { grid-template-columns: 18px minmax(0, 1fr); }
.prot-t, .prot-g { grid-column: 2; }
 
}

/* Hinweise auf Unstimmigkeiten im Thema */
.hinweise { border-left: 4px solid var(--gelb-text); }
.hw { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; }
.hw + .hw { border-top: 1px solid var(--linie); }
.zf-qr { width: 216px; max-width: 100%; margin: 10px 0; padding: 6px; border-radius: 0; background: #fff; border: 1px solid var(--linie2); line-height: 0; }
.zf-qr svg, .zf-qr img { width: 100%; height: auto; display: block; }
.zf-alt { margin-top: 6px; color: var(--text2); }
.zf-alt summary { cursor: pointer; color: var(--akzent-hell); }

/* Beschriftung mit Pflichtstern als ein Block (sonst bricht der Stern in .fld-Feldern in eine eigene Zeile) */
.fld-t { display: block; }

/* Stichwortsuche: Trefferliste nach Themen */
.vt-g { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px solid var(--linie); }
.vt-g:first-of-type { border-top: 0; }
.vt-k { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.hit.hit-v { padding: 8px 12px; gap: 4px; }
.hit-v .aus { overflow-wrap: anywhere; }
.hit-v mark, .ts-antwort mark { background: var(--mark-bg); color: var(--mark-text); border-radius: 0; padding: 0 2px; }

/* Eingang: weitergeleitete Mails */
.eg { gap: 10px; }
.eg-text { color: var(--text3); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; overflow-wrap: anywhere; }
.eg-knoepfe { flex-wrap: wrap; align-items: center; }
.eg-wahl { display: inline-flex; gap: 6px; align-items: center; }
.eg-wahl .inp { min-width: 0; max-width: 240px; }
.eg-neu { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.eg-neu .inp { flex: 1 1 260px; }

/* Zeitrahmen richtet sich nach der Breite seines Kastens (Schnellübersicht, Dialog, Thema), nicht nach dem Fenster */
@container (max-width: 640px) {
  .zr-k, .zr-z.event .zr-k { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .zr-k .more { justify-self: end; }
  .zr-z.event .zr-art { grid-column: 1 / -1; }
  .zr-n { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .zr-n .inp:last-child { grid-column: 1 / -1; }
}
.eg-kopf { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.eg-ck { width: 18px; height: 18px; flex: none; accent-color: var(--akzent); cursor: pointer; }
.eg-hin { padding-left: 28px; }
.eg-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 4px; }
.eg-alle, .eg-auto { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.eg-sammel { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.eg-sammel .inp { min-width: 0; max-width: 260px; }
.eg-auto-liste { display: flex; flex-direction: column; gap: 8px; }
.eg-kunden { border-top: 1px dashed var(--linie2); padding-top: 8px; }
.bild-rahmen { display: flex; align-items: center; justify-content: center; padding: 12px; overflow: auto; }
.bild-rahmen img { max-width: 100%; max-height: 100%; object-fit: contain; }
.kt-export { display: flex; gap: 6px 14px; }
.kt-qr-box { max-width: 380px; align-items: stretch; }
.kt-qr-bild { align-self: center; background: #fff; border-radius: 0; padding: 0; width: min(280px, 100%); height: auto; }
.bl-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.bl-liste { display: flex; flex-direction: column; }
.bl-z { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; border-top: 1px solid var(--linie); }
.bl-z:first-child { border-top: 0; }
.bl-z label { display: flex; align-items: center; gap: 10px; flex: 1; min-height: 44px; cursor: pointer; }
.bl-z button:disabled { opacity: .35; cursor: default; }
.mi.aus { opacity: .55; cursor: default; }
.mi-sel { justify-content: space-between; cursor: default; }
.mi-sel select { min-height: 40px; max-width: 150px; }
.lab-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 32px; margin: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer; text-align: left; font-family: inherit; }
.lab-btn:hover { color: var(--text2); }
.lab-btn svg { flex: none; transition: transform .15s; }
.lab-btn > span:first-child { flex: 1; }
.nv-gruppe.zu .lab-btn svg { transform: rotate(-90deg); }
.nv-ed { cursor: pointer; }
.nv-ed input { width: 18px; height: 18px; flex: none; }
.nv-ed.aus { opacity: .55; }
.nv-anp { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 0 12px; margin-top: -8px; }
@media (min-width: 901px) {
.nv-gruppe.zu .nv-zu { display: none; }
 
}
@media (max-width: 900px) {
.nv-anp { display: none; }
 
}
  /* in der Akte stehen die Felder oben bündig, auch wenn eine Beschriftung länger ist */
.st-gruss { font-size: 28px; font-weight: 700; line-height: 1.2; color: var(--text-stark); }
.st-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.st-k { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; border: 1px solid var(--linie); border-radius: 0; background: var(--flaeche); color: var(--text2); text-decoration: none; }
.st-k:hover, .st-k:focus-visible { border-color: var(--rand); background: var(--hover3); }
.st-k b { font-size: 30px; line-height: 1.1; font-weight: 700; color: var(--text-stark); }
.st-k.warn b { color: var(--rosa-hell); }
.st-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.st-karte { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.st-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.st-z { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--linie); }
.st-kopf + .st-z { border-top: 0; }
.st-n { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.st-rot { color: var(--rosa-hell); }
@media (max-width: 760px) {
.st-raster { grid-template-columns: minmax(0, 1fr); }
.st-gruss { font-size: 24px; }
 
}
.eg-wahl { flex: 0 1 460px; min-width: 0; }
.eg-wahl .inp[data-eg-thema] { flex: 1 1 auto; min-width: 0; max-width: 100%; }
.eg-knoepfe { flex-wrap: nowrap; }
@media (max-width: 640px) {
.eg-knoepfe { flex-wrap: wrap; }
 
}
.eg-verlauf { display: inline-flex; align-items: center; gap: 6px; padding-left: 28px; }
.eg { gap: 8px; }
.eg-mk { display: flex; align-items: center; gap: 12px; min-width: 0; }
.eg-abs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
.eg-abs b { color: var(--text-stark); font-weight: 600; }
.eg-dat { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.eg-betreff { margin: 0; padding-left: 30px; font-size: 18px; line-height: 1.3; font-weight: 600; color: var(--text-stark); overflow-wrap: anywhere; }
.eg-text, .eg-mehr, .eg-anh, .eg-hin, .eg-verlauf { margin-left: 30px; padding-left: 0; }
.eg-text { -webkit-line-clamp: 4; }
.eg-text.offen { display: block; -webkit-line-clamp: unset; overflow: visible; }
.eg-mehr { align-self: flex-start; }
.eg-anh { display: flex; flex-wrap: wrap; gap: 6px; }
.eg-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--linie); border-radius: 0; font-size: 13px; color: var(--text2); max-width: 100%; overflow-wrap: anywhere; }
.eg-aktion { margin-left: 30px; padding-top: 10px; border-top: 1px solid var(--linie); }
.eg-liste { overflow: visible; }
.eg-auto-kopf { width: auto; align-self: flex-start; padding: 4px 8px 4px 0; }
.eg-auto-kopf[aria-expanded="false"] .eg-pfeil { transform: rotate(-90deg); }
.st-gross .st-z { padding: 12px 0; }
.st-warn { border-color: var(--rosa-hell); }
.st-neu { border-color: var(--akzent); }
.st-z.faellig { border-left: 3px solid var(--rosa-hell); padding-left: 10px; margin-left: -2px; }
.st-z.faellig .st-n b { color: var(--rosa-hell); }
.st-neben { margin-top: 4px; }
.st-klein { opacity: .92; }
.st-klein .h2 { font-size: 16px; }
.st-klein .st-z { padding: 6px 0; }
.st-klein .st-n b { font-weight: 500; }
.st-k.warn { border-color: var(--rosa-hell); }
.eg-wahl .inp.vorg, .eg-wahl .inp option.vor { color: var(--akzent-text); }
.eg-wahl .inp optgroup { color: var(--text3); }
.eg-wahl .inp.vorg { background: var(--akzent-weich); border-color: var(--akzent); font-weight: 600; }
.eg-wahl .inp option.vor { font-weight: 600; background: var(--akzent-weich); }
.eg-verlauf { color: var(--akzent-text); font-weight: 500; }
.eg-verlauf .lk { font-weight: 600; }
.ae-leiste { display: flex; flex-wrap: wrap; gap: 8px; }
.ae-leiste .inp { width: auto; min-width: 140px; max-width: 220px; }
.ae-liste { display: flex; flex-direction: column; }
.ae-tag { margin: 0; padding: 14px 24px 6px; font-size: 13px; font-weight: 600; color: var(--text3); border-top: 1px solid var(--linie); }
.ae-tag:first-child { border-top: 0; }
.ae-z { display: flex; flex-direction: column; gap: 4px; padding: 10px 24px; }
.ae-block .ae-z { padding-left: 0; padding-right: 0; border-top: 1px solid var(--linie); }
.ae-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.ae-fl { display: flex; flex-direction: column; gap: 2px; padding-left: 2px; overflow-wrap: anywhere; }
.ae-f s { color: var(--text3); }
.ae-kopfknopf { width: auto; padding: 4px 8px 4px 0; }
.ae-kopfknopf[aria-expanded="false"] .eg-pfeil { transform: rotate(-90deg); }
.ae-block { gap: 8px; }

/* Dateiauswahl: Knopf und Text mittig im Feld, nicht oben angeklebt */
.inp[type="file"] { display: flex; align-items: center; padding: 0 10px; cursor: pointer; color: var(--text3); font-size: 14px; }
.inp[type="file"]::file-selector-button { margin: 0 12px 0 0; padding: 7px 14px; border: 1px solid var(--linie2); border-radius: 0; background: var(--flaeche2); color: var(--text2); font: inherit; font-weight: 500; cursor: pointer; }
.inp[type="file"]:hover::file-selector-button { border-color: var(--akzent); color: var(--text-stark); }


/* ============================================================ Handy und Tablet im Hochformat */
.mbar, .mehr-hg { display: none; }
@media (max-width: 900px) {

  /* Obere Leiste: Menü, Name, Suche. Das Menü ist die Seitenleiste, die von links hereinfährt. */
  .mbar { display: flex; position: sticky; top: 0; z-index: 40; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; padding-top: calc(6px + env(safe-area-inset-top)); background: var(--kopf); border-bottom: 1px solid var(--linie); }
.mbar-bt { position: relative; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 0; background: transparent; color: var(--text); cursor: pointer; }
.mbar-bt[aria-expanded="true"] { background: var(--akzent-weich); color: var(--akzent-text2); }
.mbar-marke { flex: 1; text-align: center; font-weight: 700; font-size: 18px; color: var(--akzent-hell); text-decoration: none; }
.mbar-punkt { position: absolute; top: 9px; right: 9px; width: 10px; height: 10px; border-radius: 0; background: var(--rosa); border: 2px solid var(--kopf); }
.sb { display: flex; position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; width: min(86vw, 340px); height: auto; padding: calc(20px + env(safe-area-inset-top)) 12px calc(20px + env(safe-area-inset-bottom)); transform: translateX(-104%); transition: transform .22s ease; border-right: 1px solid var(--linie2); }
.sb.offen { transform: none; box-shadow: none; }
.mehr-hg { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .55); }


  /* Suche und Fragen an die KI erscheinen erst über die Lupe */
  .fl-allein, .tp .fl-box { display: none; }
.such-auf .fl-allein, .such-auf .tp .fl-box { display: block; }


  /* Meldungen und Knopf nach oben */
  .toast { left: 16px; right: 16px; max-width: none; bottom: calc(16px + env(safe-area-inset-bottom)); }
.idee { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); }
#nach-oben { left: auto; right: 16px; transform: none; bottom: calc(20px + env(safe-area-inset-bottom)); }


  /* Luft: größere Abstände, mehr Zeilenhöhe, weniger gedrängt */
  body { font-size: 16px; line-height: 1.6; }
.tp { padding: 16px 20px; gap: 14px; min-height: 0; }
.tp h1 { font-size: 24px; }
.ct { padding: 22px 20px 48px; }
.pg { gap: 28px; }
.cd { padding: 22px 20px; gap: 18px; border-radius: 0; }
.it { padding: 20px 18px; gap: 8px; }
.knoepfe { gap: 10px; }
.liste, .cd { box-shadow: none; }


  /* iOS zoomt in Felder unter 16 px hinein; große, gut treffbare Bedienelemente */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea { font-size: 16px !important; }
.bt.klein, .bt2.klein { min-height: 44px; }
.more, .pin, .tm-x { min-width: 44px; min-height: 44px; }
.bd-x { width: 34px; height: 34px; }
.chip, .leg, .tab { min-height: 44px; }
.lk.klein { display: inline-flex; align-items: center; min-height: 40px; }
input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
.bd-at, .bd-aw { font-size: 13px; }
.tg { font-size: 12.5px; }


  /* Board: eine Spalte pro Bildschirm zum Wischen; Filter in einer Zeile zum Seitwärtsschieben */
  .bd, .bd.bd-intern { grid-auto-columns: minmax(84vw, 1fr); scroll-snap-type: x mandatory; scroll-padding: 0 4px; padding-bottom: 6px; }
.bd { grid-template-columns: repeat(6, minmax(84vw, 1fr)); }
.bd.bd-intern { grid-template-columns: repeat(4, minmax(84vw, 1fr)); }
.bd-sp { scroll-snap-align: start; }
.bd-legende { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.bd-legende .leg, .bd-legende .lk { flex: none; }


  /* Start: Kennzahlen zweispaltig und kompakt */
  .st-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.st-k { padding: 10px 14px; }
.st-k b { font-size: 24px; }


}
.bd-sprung { display: none; }
@media (max-width: 900px) {
.bd-sprung { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: none; }
.bd-sprung .leg { flex: none; }


}

/* Dialoge auf dem Handy: fast Vollbild, mit Platz für die Tastatur (100dvh) */
@media (max-width: 600px) {
.schleier { padding: 8px; }
.dialog { padding: 18px 16px; gap: 14px; border-radius: 0; }
.bd-dialog, .kn-dialog { max-height: calc(100dvh - 16px); }
.kn-dialog .kd-fuss { margin: 0 -16px -18px; padding: 12px 16px; bottom: -18px; }


}

/* Handy: die letzten zu kleinen Bedienelemente auf Fingergröße */
@media (max-width: 900px) {
.bd-x { width: 40px; height: 40px; top: 2px; right: 2px; }
.pinb { width: 44px; height: 44px; }
.it .tt, a.tt { display: inline-block; padding: 8px 0; }
.ta-box { position: relative; }
.ta-box::after { content: ""; position: absolute; inset: -10px; }
.lk[data-act="bd-auf"], .lk[data-act="af-hier"], .ae-kopfknopf { min-height: 44px; }


}

/* Handy: Filter nebeneinander, Reiter in einer Zeile */
@media (max-width: 600px) {
.flt .flt-f:not(.flt-zeile) { flex: 1 1 0; min-width: 0; }
.flt .flt-f:not(.flt-zeile) .inp { width: 100%; min-width: 0; }
.reiter { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }


}
@media (max-width: 600px) {
.it-k { justify-content: flex-start; }
 
}

/* Eingang auf dem Handy: Absender und Datum untereinander, Inhalt über die ganze Breite */
@media (max-width: 640px) {
.eg-mk { flex-wrap: wrap; align-items: flex-start; gap: 6px 10px; }
.eg-abs { flex: 1 1 0; min-width: 0; }
.eg-dat { flex: 1 1 100%; flex-wrap: wrap; padding-left: 34px; }
.eg-betreff, .eg-text, .eg-mehr, .eg-anh, .eg-hin, .eg-verlauf, .eg-aktion { margin-left: 0; padding-left: 0; }
.eg-wahl[class] { flex: 1 1 0; min-width: 0; }
.eg-wahl .inp[data-eg-thema] { flex: 1 1 0; min-width: 0; }


}


/* Kleines Schild an Aussagen der KI, die aus dem Zusammenhang gefolgert und nicht wörtlich zitiert sind */
.schluss { display: inline-block; font-size: 11px; line-height: 1.5; padding: 0 6px; border: 1px solid var(--linie, currentColor); border-radius: 0; color: var(--leise); vertical-align: 2px; white-space: nowrap; cursor: help; }


/* ============================================================ Board am Handy: wenig Kopf, Reiter oben, Karten kompakt (Vorbild Trello und Jira mobil) */
.bd-filterbt, .bd-add { display: none; }
@media (max-width: 900px) {
.bd-wrap { margin: 0 -6px; }
.bd-rahmen { background: transparent; border: 0; padding: 0; gap: 10px; }

  /* Eine Zeile: Modus und Filter. Zeige und Art-Filter stehen erst nach „Filter“ da; der Knopf zeigt, wie viele Filter gelten. */
  .bd-leiste { flex-wrap: nowrap; gap: 8px; align-items: stretch; }
.nur-gross { display: none; }
.bd-filterbt { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; min-height: 48px; padding: 0 14px; border: 1px solid var(--linie2); border-radius: 0; background: var(--flaeche2); color: var(--text2); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.bd-filterbt.an, .filter-auf .bd-filterbt { border-color: var(--akzent2); color: var(--akzent-text); }
.bd-filterbt .bd-n { min-width: 20px; padding: 1px 6px; border-radius: 0; background: var(--akzent-weich); font-size: 12px; text-align: center; }
.bd-leiste .flt-zeile, .bd-legende { display: none; }
.filter-auf .bd-leiste { flex-wrap: wrap; }
.filter-auf .bd-leiste .flt-zeile { display: flex; flex: 1 1 100%; order: 3; }
.filter-auf .bd-legende { display: flex; }


  /* Spaltenreiter: kleben unter der App-Leiste, der aktive läuft beim Wischen mit */
  .bd-sprung { position: sticky; top: calc(61px + env(safe-area-inset-top)); z-index: 30; gap: 2px; margin: 0 -6px; padding: 0 6px; background: var(--bg); border-bottom: 1px solid var(--linie); }
.bd-sprung::-webkit-scrollbar { display: none; }
.bd-sprung .leg { border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; min-height: 46px; padding: 0 12px; font-size: 15px; font-weight: 600; color: var(--leise); }
.bd-sprung .leg.on { background: transparent; border-bottom-color: var(--akzent-hell); color: var(--text); }
.bd-sprung .leg span { min-width: 22px; padding: 1px 6px; border-radius: 0; background: var(--chip); font-size: 12px; text-align: center; opacity: 1; }


  /* Spalten: etwas schmaler als der Bildschirm, die nächste schaut heraus; der Titel steht im Reiter */
  .bd, .bd.bd-intern { grid-auto-columns: calc(100% - 34px); gap: 8px; align-items: start; margin: 0 -6px; padding: 0 6px 12px; scroll-padding: 0 6px; }
.bd { grid-template-columns: repeat(6, calc(100% - 34px)); }
.bd.bd-intern { grid-template-columns: repeat(4, calc(100% - 34px)); }
.bd { scrollbar-width: none; }
.bd::-webkit-scrollbar { display: none; }
.bd-sp { min-height: 0; padding: 0; border: 0; pointer-events: none; }
  /* nur Karten und Knöpfe reagieren; ein Tippen daneben öffnet nichts */
  .bd-sp > * { pointer-events: auto; }
.bd-sp:hover, .bd-sp.auf { background: transparent; }
.bd-sp > .bd-k { display: none; }
.bd-sp.bd-verw { pointer-events: auto; padding: 12px 16px; }
.bd-ziehen { display: none; }


  /* Karten: kompakter, ohne Kreuz (steht in der Schnellübersicht), Titel höchstens zwei Zeilen */
  .bd-karten { gap: 8px; }
.bd-karte { padding: 12px 14px; gap: 3px; border-radius: 0; }
.bd-kk { padding-right: 0; min-height: 0; }
.bd-karte .tt { font-size: 16px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bd-z { font-size: 13.5px; line-height: 1.4; }
.bd-x { display: none; }
.bd-add { display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 8px; width: 100%; border: 1px dashed var(--linie2); border-radius: 0; background: transparent; color: var(--leise); font: inherit; font-size: 15px; cursor: pointer; }
.bd-add:active { background: var(--akzent-tief); color: var(--text); }


}


/* ============================================================ Handy: Erinnerungen und Thema-Seite */
.af-haken, .af-mehr, .th-sprung { display: none; }
.af-kopf { display: contents; }
.th-blk { min-width: 0; }
@media (max-width: 900px) {

  /* Erinnerungen: Abhaken links, Bearbeiten und Löschen hinter „⋯“ (sonst drei Knöpfe je Aufgabe, Löschen neben Bearbeiten) */
  .af-it { padding: 14px 16px; gap: 4px; }
.af-kopf { display: grid; grid-template-columns: 28px minmax(0, 1fr) 44px; align-items: start; gap: 10px; }
.af-haken { display: inline-flex; align-items: center; justify-content: center; margin-top: 3px; }
.af-mehr { display: flex; margin: -6px -8px 0 0; }
.af-it .it-k { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; line-height: 1.35; }
.af-it .it-k .tt { font-size: 17px; line-height: 1.3; }
.af-it .meta { margin-left: 0; font-size: 13.5px; }
.af-it > .cap, .af-it > p { padding-left: 38px; font-size: 14px; line-height: 1.4; margin: 0; }
.af-it .af-akt { display: none; padding-left: 38px; margin-top: 4px; }
.af-it.menu-auf .af-akt, .af-it.del-auf .af-akt { display: flex; }
.af-it .af-akt [data-act="af-erledigt"], .af-it .af-akt [data-act="af-offen"] { display: none; }


  /* Thema-Seite: Eckdaten als schlanke Zeilen mit „Ändern“ oben rechts, Sprungleiste unter der App-Leiste, Zeitrahmen ohne Zeilenumbruch im Datum */
  .facts { grid-template-columns: 1fr; }
.fact { position: relative; padding: 14px 16px; border-right: 0; border-bottom: 1px solid var(--linie); gap: 2px; }
.fact:last-child { border-bottom: 0; }
.fact .v { font-size: 18px; padding-right: 76px; }
.fact > .lk { position: absolute; top: 8px; right: 6px; min-height: 40px; padding: 0 10px; }
.th-sprung { display: flex; position: sticky; top: calc(61px + env(safe-area-inset-top)); z-index: 30; gap: 2px; margin: -12px -20px; padding: 0 12px; background: var(--bg); border-bottom: 1px solid var(--linie); overflow-x: auto; scrollbar-width: none; }
.th-sprung::-webkit-scrollbar { display: none; }
.th-sprung button { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 46px; padding: 0 12px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--leise); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.th-sprung button:active { color: var(--text); border-bottom-color: var(--akzent-hell); }
.th-sprung button span { min-width: 22px; padding: 1px 6px; border-radius: 0; background: var(--chip); font-size: 12px; text-align: center; }
.th-blk { scroll-margin-top: 118px; }


}


/* Handy: „⋯“-Menüs öffnen als Karte am unteren Rand (sonst hängen sie rechts am Knopf und ragen links aus dem Bildschirm); Verlauf der Einträge auf Wunsch */
.ent-tog { display: none; }
@media (max-width: 900px) {
.pop, .pop.pk { position: fixed; left: 8px; right: 8px; top: auto; bottom: calc(8px + env(safe-area-inset-bottom)); width: auto; max-width: none; max-height: 72dvh; overflow-y: auto; z-index: 80; border-radius: 0; box-shadow: none; }
.ent-tog { display: block; padding: 10px 18px; border-top: 1px solid var(--linie); text-align: center; }
.ent-tog .lk { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }


}


/* Verlauf der Einträge: auf allen Breiten zunächst zu, mit Knopf zum Aufklappen */
.ent-tog { display: block; padding: 10px 18px; border-top: 1px solid var(--linie); text-align: center; }
.ent-tog .lk { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }


/* Titel und Namen per Doppelklick bearbeiten (statt Stift): ein leiser Hinweis beim Darüberfahren */
[data-dbl] { cursor: text; touch-action: manipulation; -webkit-tap-highlight-color: transparent; border-radius: 0; }
[data-dbl]:hover { background: var(--hover); box-shadow: none; }
[data-dbl]:focus-visible { outline: 2px solid var(--akzent-hell); outline-offset: 4px; }


/* Themenliste: jedes Thema ist eine eigene Karte mit Abstand, statt eines Blocks mit kaum sichtbaren Linien */
.liste.th-liste { background: transparent; border: 0; border-radius: 0; overflow: visible; display: flex; flex-direction: column; gap: 10px; }
.th-liste > .it { background-color: var(--flaeche); border: 1px solid var(--linie2); border-radius: 0; padding: 16px 20px; }
.th-liste > .it:hover { border-color: var(--rand); background-color: var(--hover); }
.th-liste > .it.due { background-color: var(--rot-weich); border-color: var(--rot-rand); }
.th-liste > .it.pinned { background-color: var(--akzent-tief); border-color: var(--akzent2); }
.th-liste > .pin-kopf { padding: 8px 4px 0; border: 0; background: transparent; }
@media (max-width: 900px) {
.th-liste > .it { padding: 14px 16px; gap: 4px; }
.th-liste .it-k { flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.35; }
.th-liste .it .meta { margin-left: 0; font-size: 13.5px; }
.th-liste > .it { position: relative; }
.th-liste .it-k { padding-right: 40px; }
.th-liste .pinb { position: absolute; top: 6px; right: 6px; margin: 0; }
  /* die Stecknadel sitzt in der Ecke und braucht keine eigene Zeile */

}


/* Dialog „Neues Thema“ am Handy: Vorlagen umbrechen statt seitlich zu scrollen, Stufe über die ganze Breite, große Knöpfe in der Fußleiste */
@media (hover: none) {
.kn-ziehen { display: none; }
 
}
@media (max-width: 600px) {
.kn-vorlagen { flex-wrap: wrap; overflow: visible; row-gap: 8px; }
.kn-vorlagen .kn-vorlage { min-height: 44px; padding: 0 16px; }
.kn-dialog .kd-box { padding: 12px 14px; gap: 10px; }
.kn-dialog .ta { min-height: 96px; }
.bst-k { min-height: 52px; }
.kn-dialog .kd-fuss { bottom: -18px; margin: 0 -16px -18px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); flex-direction: column; align-items: stretch; gap: 8px; }
.kn-dialog .kd-fuss > .knoepfe { margin-left: 0 !important; flex-wrap: nowrap; }
.kn-dialog .kd-fuss .bt, .kn-dialog .kd-fuss .bt2 { flex: 1; min-height: 48px; }


}


/* Neues Thema: erst Produktion oder Intern, bei Intern darunter die Art (Bewerbung, Technik, Orga, Idee) */
.kn-v-wahl { display: flex; flex-direction: column; gap: 10px; }
.kn-art { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; max-width: 420px; border-radius: 0; background: var(--feld); border: 1px solid var(--linie2); }
.kn-art-bt { min-height: 44px; border: 0; border-radius: 0; background: transparent; color: var(--text3); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.kn-art-bt:hover { color: var(--text); }
.kn-art-bt.on { background: var(--akzent-weich); color: var(--akzent-text); box-shadow: inset 0 0 0 1px var(--akzent); }
.kn-rubrik { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 520px; }
.kn-rubrik-bt { min-height: 44px; border: 1px solid var(--linie2); border-radius: 0; background: var(--flaeche2); color: var(--text2); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
.kn-rubrik-bt:hover { border-color: var(--rand); background: var(--hover3); }
.kn-rubrik-bt.on { border-color: var(--akzent-hell); background: var(--akzent-weich); color: var(--akzent-text); font-weight: 600; }
@media (max-width: 600px) {
.kn-art { max-width: none; }
.kn-art-bt { min-height: 48px; font-size: 16px; }
.kn-rubrik { grid-template-columns: 1fr 1fr; max-width: none; }
.kn-rubrik-bt { min-height: 48px; }


}


/* Benutzerliste: mehrere Schilder (Administrator, Einladung offen, 2FA) mit Abstand, nebeneinander oder untereinander */
.ur .rl { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; }


/* Benutzerliste am Handy: die Zeilen sind Karten, die Spaltenüberschriften ergeben dort keinen Sinn */
@media (max-width: 900px) {
.ur.kopfzeile { display: none; }
.ur.kopfzeile + .ur { border-top: 0; }


}


/* Benutzerliste am Handy: jedes Konto eine kompakte Karte (Name und „⋯“ oben, Schilder darunter, zuletzt angemeldet klein) */
@media (max-width: 900px) {
.ur:not(.kopfzeile) { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nm mehr" "rl rl" "dt dt"; gap: 8px 8px; padding: 14px 8px 12px 16px; }
.ur:not(.kopfzeile) .nm { grid-area: nm; flex: none; }
.ur:not(.kopfzeile) .nm > span:last-child { line-height: 1.35; }
.ur:not(.kopfzeile) .more { grid-area: mehr; align-self: start; margin-top: -4px; }
.ur:not(.kopfzeile) .rl { grid-area: rl; flex: none; padding-left: 46px; }
.ur:not(.kopfzeile) .dt { grid-area: dt; flex: none; padding-left: 46px; font-size: 13px; color: var(--leise); }
.ur:not(.kopfzeile) .dt::before { content: "Zuletzt angemeldet: "; }


}


/* Formular „Neues Konto“: Felder in sinnvoller Reihenfolge, der Zugriff als eine Auswahl mit drei erklärten Möglichkeiten */
.nk-form { display: flex; flex-direction: column; gap: 18px; }
.nk-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.nk-felder .cap { font-size: 13px; line-height: 1.45; }
.nk-zugriff { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.nk-zugriff legend { padding: 0; margin-bottom: 8px; }
.nk-opt { display: flex; align-items: flex-start; gap: 12px; min-height: 0; padding: 10px 14px; border: 1px solid var(--linie2); border-radius: 0; background: var(--flaeche2); cursor: pointer; }
.nk-opt:hover { border-color: var(--rand); }
.nk-opt:has(input:checked) { border-color: var(--akzent-hell); background: var(--akzent-weich); }
.nk-opt input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--akzent); }
.nk-opt b { display: block; font-weight: 600; }
.nk-opt small { display: block; color: var(--leise); font-size: 12.5px; line-height: 1.35; }
.nk-ok { align-self: flex-start; }
@media (max-width: 600px) {
.nk-felder { grid-template-columns: 1fr; gap: 12px; }
.nk-zugriff { grid-template-columns: 1fr; }
.nk-ok { align-self: stretch; min-height: 52px; }


}


/* Anmeldeprotokoll am Handy: auch die Zeile „Anmeldung · Name“ gehört in die breite Spalte (sonst liegt sie in der schmalen Symbolspalte und überlagert das Datum) */
@media (max-width: 600px) {
.prot-w { grid-column: 2; }
 
}


/* Board am Handy: „Verschieben nach …“ an der Karte öffnet unten eine Auswahl der Stufen (das Menü selbst ist die allgemeine Karte am unteren Rand, .pop) */
.bd-mv { display: none; }
.bd-mv-menu .mi { justify-content: space-between; }
.bd-mv-menu .mi.aktiv { background: var(--akzent-weich); color: var(--akzent-text); font-weight: 600; }
.bd-mv-menu .mv-kopf { padding: 8px 12px 6px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.bd-mv-menu .mv-kopf small { display: block; margin-top: 2px; color: var(--leise); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 900px) {
.bd-mv { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; border: 0; border-radius: 0; background: transparent; color: var(--leise); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.bd-mv[aria-expanded="true"] { background: var(--akzent-weich); color: var(--akzent-text); }
.bd-kk { padding-right: 40px; }


}


/* Konten mit „Nur lesen“: Knöpfe und Formulare zum Ändern sind ausgeblendet (nurLesenAnwenden in app.js) */
.nl-aus { display: none !important; }
.nl-still { cursor: default !important; }
.bd-sp.nl-still:hover, .bd-sp.nl-still.auf { border-color: transparent; background: transparent; }


/* Schnellübersicht am Handy: der Titel bekommt eine eigene, breite Zeile (sonst bleiben ihm 150 px neben „Thema öffnen“ und dem Kreuz) */
@media (hover: none) {
.kn-dateien > .cap { display: none; }
 
}
@media (max-width: 600px) {
.kd-kopf { flex-wrap: wrap; row-gap: 8px; }
.kd-kopf > a.bt2 { margin-right: auto; }
.kd-kopf > .kd-titel { order: 3; flex: 1 1 100%; width: 100%; }


}


/* Änderungsprotokoll am Handy: kleinere Werte und engere Abstände, damit ein Eintrag nicht 140 px und mehr braucht */
@media (max-width: 900px) {
.ae-z { padding: 12px 16px; gap: 3px; line-height: 1.4; }
.ae-tag { padding: 12px 16px 4px; }
.ae-kopf { gap: 4px 8px; }
.ae-kopf b, .ae-kopf .lk { font-size: 15px; }
.ae-fl { font-size: 14px; gap: 1px; }
.ae-f .cap { font-size: 12px; }
.ae-z > .cap { font-size: 12.5px; }
.ae-block .ae-z { padding-left: 0; padding-right: 0; }
.ae-z .lk { min-height: 0; }
  /* in einer Liste genügt die Zeilenhöhe; die Tippfläche ist der ganze Eintrag */

}


/* Ladeleiste am neu abgelegten Dokument (Auswertung, dann Aufbereitung für die Suche) */
.vb { display: flex; flex-direction: column; gap: 4px; margin: 2px 0 4px; }
.vb-bahn { height: 6px; border-radius: 0; background: var(--akzent-weich); overflow: hidden; }
.vb-fuell { display: block; height: 100%; border-radius: 0; background: var(--akzent2); transition: width .5s ease; }
.vb-fuell.offen { width: 38%; animation: vb-lauf 1.4s ease-in-out infinite; }
@keyframes vb-lauf { 0% { margin-left: -38%; } 100% { margin-left: 100%; } }
@media (prefers-reduced-motion: reduce) {
.vb-fuell.offen { animation: none; width: 100%; opacity: .5; }
.vb-fuell { transition: none; }
 
}


/* Zeitplan-Vorschlag der KI im Zeitrahmen */


/* Zeitplan: Gruppen im Vorschlag und Tagesplan (Phasenband, Tag für Tag) */
.zpl { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--linie); }


/* Tagesplan eingeklappt: Tage und Phasen sind Knöpfe, der Ablauf erscheint erst nach der Wahl */
.zl-box { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 0; background: var(--akzent-tief); border: 1px solid var(--akzent-weich); }
.zl-wahl { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.zl-wahl input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--akzent2); flex: none; }
.zl-wahl span { display: flex; flex-direction: column; gap: 1px; }
.zl-box .bt { gap: 6px; }

/* Tagesplan: Linie „heute“ im Phasenband, heutiger Tag und laufender Termin */

/* Start: Heute und morgen; Tagesplan am Handy */
.st-heute .st-tagkopf { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.st-tp { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 4px 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--linie); color: inherit; text-decoration: none; }
.st-tp:hover .st-n b { text-decoration: underline; }
.st-tp .st-uhr { font-variant-numeric: tabular-nums; color: var(--text3); }
.st-tp .st-uhr small { display: block; font-size: 11px; font-weight: 700; color: var(--rosa-hell); text-transform: uppercase; letter-spacing: .04em; }
.st-tp.vorbei { opacity: .5; }
.st-tp.jetzt { background: rgba(230, 0, 54, .08); border-radius: 0; padding-left: 8px; padding-right: 8px; margin: 0 -8px; }
@media (max-width: 900px) {
.zl-box .knoepfe { width: 100%; }
.zl-box .bt, .zl-box .bt2 { flex: 1; }


}

/* Phasenband: dieselbe Farbe, nur leicht abgestuft – Durchführung etwas satter, Nachlauf etwas blasser */
.fq-abschnitt { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.st-bsp { display: flex; flex-direction: column; gap: 8px; margin-top: -8px; }
.fq-in { display: flex; flex-direction: column; gap: 14px; padding: 18px 24px 22px; }
.fq-in .st-k.warn { display: flex; padding: 14px 18px; margin: 0; font-size: inherit; font-weight: inherit; background: var(--flaeche); color: var(--text2); }
@media (max-width: 600px) {
.fq-in { padding: 14px 16px 18px; }
.fq-in .st-k.warn { padding: 10px 14px; }
 
}


/* ---------- MCS TEAM GmbH: Erscheinungsbild (überschreibt die Bausteine oben) */
body { font-size: 16px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
a { color: var(--akzent-hell); }
a:hover { color: var(--akzent2); }
.logo-hell, .logo-dunkel { height: auto; }
:root[data-theme="dark"] img.logo-hell { display: none !important; }
:root:not([data-theme="dark"]) img.logo-dunkel { display: none !important; }
.inp:focus, .ta:focus { border-color: var(--linie2); outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: none; }
.ki-feld .inp:focus, .ki-feld:hover .inp { outline: none; }
.toast, .auth .box, .vs-liste, .fl-panel { border: 1px solid var(--linie2); }
.tg { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.bt { font-weight: 700; }
.bt:hover { background: var(--akzent2); }
.bt2 { background: transparent; border-color: var(--rand); font-weight: 700; }
.bt2:hover { background: var(--hover2); border-color: var(--rand); }
.h2::after { content: ""; display: block; width: 40px; height: 4px; margin-top: 8px; background: var(--akzent); }
.cd .h2::after, .liste .h2::after { display: none; }


/* Seitenleiste: Anthrazit wie die Menüleiste der Website, aktiver Eintrag Rot */
.sb { background: var(--nav-bg); border-right: 0; }
.marke { display: block; padding: 0 12px; text-decoration: none; }
.marke img { display: block; width: 150px; height: auto; }
.marke-name { display: block; margin-top: 10px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--nav-text); }
.sb .lab, .sb .lab-btn { color: var(--nav-text); }
.sb .nv { color: var(--nav-text); }
.sb .nv:hover { background: var(--nav-hover); color: #fff; }
.sb .nv.on, .sb .nv.on:hover { background: var(--nav-aktiv); color: #fff; font-weight: 700; }
.sb .me { border-top-color: var(--nav-linie); }
.sb .wer b { color: #fff; }
.sb .cap { color: var(--nav-text); }
.sb .nv.on .cap { color: #fff; }
.sb .av { background: var(--nav-aktiv); color: #fff; }
.sb .nv.on .av { background: #fff; color: var(--nav-aktiv); }
.sb .lk { color: var(--nav-text); }
.sb .lk:hover { color: #fff; }
.sb .bt2 { background: transparent; color: #fff; border-color: var(--nav-text); }
.sb .bt2:hover { background: var(--nav-hover); border-color: var(--nav-hover); color: #fff; }
.sb .bdg { background: #fff; color: var(--nav-hover); }
.sb :focus-visible { outline-color: #fff; }
.bdg { color: #fff; }
.auth-logo { display: block; width: 170px; max-width: 70%; }
.auth-app { display: block; margin-top: 10px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--leise); }
.mbar-marke img { height: 30px; width: auto; display: inline-block; vertical-align: middle; }


/* ---------- Rundungen: bewusste, begrenzte Abweichung von „rechtwinklig“ (Wunsch von Friedrich, 28.10.2026).
   Drei Stufen: Kreis/Pille für Personen, Zähler, Punkte und Auswahl-Chips; 4 px für Knöpfe und Eingabefelder; 6 px für Ebenen, die über der Seite schweben.
   Flächen, Seitenleiste, Tabellen, Reiter, Schilder (.tg), Board-Karten und Bilder bleiben eckig. */
:root { --r-bedien: 4px; --r-schicht: 6px; --r-rund: 50%; --r-pille: 999px; }

/* 1. Personen, Zähler und Punkte */
.av, .av.klein, .tm-av, .punkt, .pkt, .kd-farbe, .mbar-punkt, #nach-oben { border-radius: var(--r-rund); }
.bdg, .bd-filterbt .bd-n, .th-sprung button span, .bd-sprung .leg span { border-radius: var(--r-pille); }

/* 2. Auswahl-Chips: anklickbar und rund, Schilder bleiben eckig */
.chip, .tchip, .leg, .eg-chip, .kn-vorlagen .kn-vorlage, .fl { border-radius: var(--r-pille); }

/* 3. Knöpfe und Eingabefelder */
.bt, .bt2, .bt.klein, .bt2.klein, .inp, .ta, .ta-box, .ki, .lk.ki, .fl-leiste .inp, .fl-leiste .bt2, .af-slim, .mbar-bt, .bd-add, .bd-filterbt, .bd-mv, .pinb, .kn-art-bt, .kn-rubrik-bt, .seg, .sterne-wahl button, .toast button, .inp[type="file"]::file-selector-button { border-radius: var(--r-bedien); }
.seg button, .mi, .vs-z { border-radius: calc(var(--r-bedien) - 1px); }

/* 4. Ebenen über der Seite */
.vs, .pop, .pop.pk, .toast, .dialog, .fl-panel, .auth .box, .kn-vz-picker { border-radius: var(--r-schicht); }
.fl-kopf { border-radius: var(--r-schicht) var(--r-schicht) 0 0; }
.kn-dialog .kd-fuss { border-radius: 0 0 var(--r-schicht) var(--r-schicht); }
.kn-art { border-radius: var(--r-bedien); }
.kn-art .kn-art-bt { border-radius: calc(var(--r-bedien) - 1px); }
.ki-feld { border-radius: var(--r-bedien); }


/* ---------- Plan (Einsatzplan): Fahrzeuge × Tage wie die Excel-Liste „Plan 2026“, Jahresansicht, Personenplan */
.sb .nv[href="#/start"] { font-weight: 700; }
.pl-scroll { overscroll-behavior-x: contain; max-height: calc(100vh - 250px); overflow: auto; border: 1px solid var(--linie); background: var(--flaeche); }
:root { --heute-linie: color-mix(in srgb, var(--akzent) 45%, transparent); }
  /* der heutige Tag: eine einzelne leichte rote Linie */

/* durchgehende Monate: Monatsband über den Tagen, Monatsanfang als kräftigere Linie, Ziehen an Datumszeile und Gruppenleisten */
.pl-scroll.zieht, .pl-scroll.zieht * { cursor: grabbing !important; user-select: none; }

/* Zeilenhöhe einstellbar (je Konto gespeichert): Griff an der unteren Kante des Fahrzeugnamens; ab 48 px bricht der Text in den Balken um */
.kd-hw { display: flex; flex-direction: column; gap: 6px; }
.kd-hw .hw { font-size: 13px; }

/* Hover-Fenster mit den Hinweisen: gleitet leicht ein (Einblenden, kleine Bewegung nach unten, Zeilen nacheinander), Zeilen mit Art-Schild und farbigem Rand links */
@keyframes hw-pop-zeile { to { opacity: 1; transform: none; } }

/* Rückblick im Thema (frühere Ausgaben der Reihe, „besser machen“) und die Haken im Abschluss-Dialog */
.rb { display: flex; flex-direction: column; gap: 10px; }
.rb-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; }
.rb-besser { padding: 10px 12px; background: var(--akzent-weich); border-left: 4px solid var(--akzent); }
.rb-besser ul { margin: 6px 0 0; padding-left: 18px; }
.rb-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rb-jahr { padding-top: 10px; border-top: 1px solid var(--linie); }
.rb-jahr:first-child { padding-top: 0; border-top: 0; }
.rb-titel { font-weight: 600; }
.rb-kurz, .rb-fb { margin: 4px 0 0; font-size: 14px; color: var(--text2); overflow-wrap: anywhere; }
.rb-fb b { color: var(--text); }

/* Geräte der Sondertechnik: Liste unter „Personen & Fahrzeuge“ und Block im Thema */
.ab-chk { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; cursor: pointer; overflow-wrap: anywhere; }
.ab-chk input { margin-top: 3px; flex: none; }


/* Jahresansicht: je Tag ein Feld, dunkler = mehr Fahrzeuge belegt */

/* Dialoge: Eintrag, Personenplan, Fahrzeuge */
.pl-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pl-fuss { justify-content: space-between; }
.pl-fuss-r { display: inline-flex; gap: 8px; margin-left: auto; }
@media (max-width: 700px) {
.pl-scroll { max-height: calc(100dvh - 270px); }
.pl-2 { grid-template-columns: 1fr; }


}
@media print {
.sb, .mbar, .tp, .fl-allein, .toast, #nach-oben { display: none !important; }
.shell, .col { display: block; }
.ct.pl-seite { padding: 0; }
.pl-scroll { max-height: none; overflow: visible; border: 0; }
@page { size: A4 landscape; margin: 10mm; }


}

/* Text, der über den Balken hinaus in die freien Tage läuft (wie in Excel) */


/* Block „Im Plan“ am Thema: jedes Fahrzeug ein Link in den Plan */


/* Schwebender Knopf „Heute“ über der Plan-Liste, solange der heutige Tag nicht zu sehen ist */
  /* roter Knopf wie „+ Eintrag“ (Klasse bt) neben der Monatsanzeige */

/* Pfeile am oberen und unteren Rand des Kalenders, genau an der Tagesposition der Einträge außerhalb des gezeigten Ausschnitts (Aufbau und Position setzt plVertHinweis) */
/* Pfeil zum nächsten bzw. vorigen Jahr am Rand des Kalenders */
@keyframes pl-jw-ein { from { opacity: 0; } to { opacity: 1; } }
@keyframes pl-vh-wipp { 50% { transform: translateX(-50%) translateY(var(--wipp)); } }


/* Startseite im Raster: 12 Spalten (unter 1100 px 6, unter 700 px 1), Zeilen zu 72 px; jede Kachel hat Kopfzeile (Ziehen = verschieben) und Ecke (Ziehen = Größe). Vollbild legt den Kalender über alles */
.st-gitter { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 72px; grid-auto-flow: row dense; gap: 16px; }
.st-k { grid-column: span var(--w, 1); grid-row: span var(--h, 2); position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; border: 1px solid var(--linie); border-radius: 8px; background: var(--flaeche); }
.st-kk { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px; min-height: 40px; border-bottom: 1px solid var(--linie); background: var(--flaeche2); border-radius: 8px 8px 0 0; cursor: grab; touch-action: none; user-select: none; }
.st-kk b { font-size: 15px; }
.st-kb { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.st-k-kalender .st-kb { padding: 10px 12px; gap: 0; }
.st-k-kalender .pl-scroll { position: absolute; inset: 0; height: auto; max-height: none; }
.st-ik { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--linie2); border-radius: 6px; background: var(--flaeche); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.st-ik:hover { border-color: var(--akzent); color: var(--akzent); }
.st-zahl { display: flex; align-items: baseline; gap: 8px; text-decoration: none; color: inherit; }
.st-zahl b { font-size: 34px; line-height: 1; font-weight: 700; }
.st-zahl.warn b { color: var(--akzent); }
.st-z { display: flex; flex-direction: column; text-decoration: none; color: inherit; padding: 6px 0 0; border-top: 1px solid var(--linie); min-width: 0; }
.st-z b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-z:hover b { text-decoration: underline; }
.st-z.due .cap { color: var(--akzent); }
.st-griff { position: absolute; right: 3px; bottom: 3px; width: 18px; height: 18px; cursor: nwse-resize; touch-action: none; opacity: .55;
  background: linear-gradient(135deg, transparent 0 42%, var(--leise) 42% 52%, transparent 52% 64%, var(--leise) 64% 74%, transparent 74%); }
.st-griff:hover { opacity: 1; }
.st-k.platz { border: 2px dashed var(--akzent); background: var(--akzent-weich); }
.st-k.platz > * { opacity: .25; }
.st-geist { position: fixed; z-index: 80; pointer-events: none; border: 2px dashed var(--akzent); background: rgba(230, 0, 54, .08); border-radius: 8px; }
.st-geist span { position: absolute; right: 10px; bottom: 8px; font-weight: 700; color: var(--akzent); background: var(--bg); padding: 2px 8px; border-radius: 999px; }
.st-zieht, .st-zieht * { cursor: grabbing !important; user-select: none; }
.st-k.voll { position: fixed; inset: 0; z-index: 60; background: var(--bg); border: 0; border-radius: 0; grid-column: auto; grid-row: auto; padding: 0 20px 16px; }
.st-k.voll .st-kk { border-radius: 0; background: var(--bg); cursor: default; padding-left: 0; padding-right: 0; }
.st-k.voll .st-kb { padding: 6px 0 0; }
.st-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 12px; border: 1px solid var(--linie); border-radius: 999px; text-decoration: none; color: inherit; background: var(--flaeche); }
.st-chip b { font-size: 17px; }
.st-chip.warn { border-color: var(--akzent); }
.st-chip.warn b { color: var(--akzent); }
.st-chip:hover { background: var(--flaeche2); }
@media (max-width: 1100px) {
  /* mittlere Breite: 6 Spalten, Felder halb so breit (drei Felder füllen eine Zeile), der Kalender über die ganze Breite */
  .st-gitter { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.st-k { grid-column: span var(--w2, 2); }
.st-k-kalender { grid-column: 1 / -1; }
.st-griff { display: none; }


}
@media (max-width: 700px) {
  /* schmal: alles untereinander */
  .st-gitter { grid-template-columns: 1fr; grid-auto-rows: auto; }
.st-k, .st-k-kalender { grid-column: 1 / -1; grid-row: auto; }
.st-k-kalender { height: calc(100dvh - 200px); min-height: 460px; }
.st-kk { cursor: default; }


}
@media print {
.st-k:not(.st-k-kalender), .st-griff, .st-ik { display: none !important; }
.st-gitter { display: block; }
.st-k, .st-k-kalender { border: 0; height: auto; }
.st-k-kalender .pl-scroll { position: static; }
 
}


/* Startseite anpassen: Ablage mit entfernten Kacheln, ✕ an jeder Kachel */
.st-ka { display: inline-flex; align-items: center; gap: 6px; }
.st-weg { padding: 3px 8px; }
.st-weg:hover { border-color: var(--akzent); color: var(--akzent); }
.st-ablage { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 14px; padding: 10px 14px; border: 2px dashed var(--akzent); border-radius: 8px; background: var(--akzent-weich); }
.st-ablage-t { display: flex; flex-direction: column; flex: 1 1 260px; min-width: 0; }
.st-ablage-l { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 2 1 320px; }
.st-add { padding: 6px 14px; border: 1px dashed var(--akzent); border-radius: 999px; background: var(--flaeche); color: var(--akzent); font: inherit; font-weight: 700; cursor: grab; touch-action: none; }
.st-add:hover { background: var(--akzent); color: #fff; }
.st-edit .st-k { outline: 2px dashed var(--linie2); outline-offset: 2px; }
.st-leer { grid-column: 1 / -1; padding: 24px; text-align: center; border: 1px dashed var(--linie2); border-radius: 8px; }


/* Reiter im Menüpunkt „Personen & Fahrzeuge“ */
.st-tabs { display: flex; gap: 4px; padding: 0 40px; border-bottom: 1px solid var(--linie); background: var(--bg); }
.st-tab { padding: 10px 18px; margin-bottom: -1px; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; text-decoration: none; color: var(--leise); font-weight: 700; }
.st-tab:hover { color: var(--text); }
.st-tab.on { color: var(--akzent); background: var(--flaeche); border-color: var(--linie); border-bottom: 2px solid var(--flaeche); }
@media (max-width: 700px) {
.st-tabs { padding: 0 12px; overflow-x: auto; }
.st-tab { padding: 10px 12px; }
 
}


/* Gedächtnis: die Reiter stehen unter der Kopfzeile, im Block bleibt nur die Suche */

/* Reiterleiste auch als Knöpfe (Themen: Status) */
button.st-tab { background: none; font: inherit; font-weight: 700; cursor: pointer; }
button.st-tab.on { background: var(--flaeche); }
.st-tab .bd-n { opacity: .75; font-weight: 500; }
.st-tab.st-korb { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 14px; }


/* Kein Trennstrich zwischen Fragen-Leiste und Reitern: die Linie unter den Reitern genügt */
.tp:has(+ .st-tabs) { border-bottom: 0; min-height: 0; padding-bottom: 20px; }


/* Startseite anpassen: nur ein Stift */
.st-stift { min-width: 44px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; }
.st-stift[aria-pressed="true"] { background: var(--akzent); border-color: var(--akzent); color: #fff; }


/* Hinweise: Marke am Tageskopf, Streifen in der Fahrzeugzeile, Einträge in der Kachel */
button.st-z { background: none; border: 0; border-top: 1px solid var(--linie); text-align: left; font: inherit; color: inherit; cursor: pointer; width: 100%; }
button.st-z:hover b { text-decoration: underline; }


/* Plan-Dialog: die Themenauswahl richtet sich nach dem Dialog, nicht nach dem längsten Themennamen */


/* Zeile „Hinweise“ oben im Kalender */


/* Pop-up „Neues Thema“ aus dem Plan: Block „Im Plan“ */
  /* schmale graue Zeile wie im Mini-Pop-up, die Felder erst aufgeklappt */


/* Verloren und Abgesagt: sichtbar, aber grau und durchgestrichen (sperren nichts) */

/* Mini-Pop-up für neue Einträge im Plan */
.pm-dialog { max-width: 460px; }


/* Frage nach dem Grund beim Verwerfen */
.gr-dialog { max-width: 460px; }
.gr-wahl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.gr-wahl .bt2 { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 64px; min-width: 0; text-align: left; white-space: normal; }
  /* der Hinweistext bricht um, statt über den Rand zu laufen */
.gr-wahl .bt2:nth-child(3) { grid-column: 1 / -1; }
@media (max-width: 520px) {
.gr-wahl { grid-template-columns: 1fr; }
 
}


/* „Von bestehender Produktion starten“: Produktionsreihen aus dem Gedächtnis mit ihren Jahren */
.kn-reihe { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--linie); }
.kn-reihe-k { display: flex; flex-direction: column; align-items: flex-start; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.kn-reihe-k:hover .kn-t { text-decoration: underline; }
.kn-jahre { display: flex; flex-wrap: wrap; gap: 6px; }


/* Nach der Wahl einer Vorlage: neuer Termin der Durchführung gleich unter dem Titel */
.vz-termin { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; flex-basis: 100%; margin-top: 6px; }
.vz-termin .inp { width: auto; min-width: 150px; }


/* Einträge und Hinweise im Kalender schieben */


/* Zoom des Kalenders */


/* Titel, Kunde und Ort stehen im Balken selbst; in hohen Zeilen untereinander (Titel, darunter Kunde · Ort) */

/* Balken mit Hinweisen: Titel bleibt immer stehen (er schrumpft nie), der Hinweis darunter nimmt den Rest und wird zuerst gekürzt; die Marke sitzt in hohen Zeilen oben rechts */
.kn-kunde { grid-template-columns: minmax(0, 1fr); margin-top: 2px; }
.kn-mini .pl-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
.kn-mini .pl-2 > *, .kn-mini .fld { min-width: 0; }
.kn-mini .inp { width: 100%; min-width: 0; text-overflow: ellipsis; }
.kn-mini select.inp { height: 48px; }
@media (max-width: 480px) {
.kn-mini .pl-2 { grid-template-columns: minmax(0, 1fr); }
 
}
.pm-fuss { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.pm-fuss > :first-child { justify-self: start; }
.pm-fuss > :last-child { justify-self: end; }
@media (max-width: 400px) {
.pm-fuss { grid-template-columns: auto 1fr auto; }
 
}
  /* größer / kleiner ganz rechts am Rand */


/* Wochenenden: deutlich sichtbar, blaugrau mit feiner Schraffur (Feiertage bleiben rosa, der heutige Tag hat seine rote Linie) */
:root { --we-grund: #DDE3EE; --we-streif: rgba(70, 90, 130, .22); --we-kopf: #C9D2E3; --we-text: #2D3F66; }
:root[data-theme="dark"] { --we-grund: #262C3A; --we-streif: rgba(150, 175, 230, .16); --we-kopf: #323A4E; --we-text: #B6C6EC; }


/* Seitenleiste einklappen (nur Rechner): schmale Leiste mit Symbolen, Umschalter oben rechts bzw. mittig; gemerkt in localStorage ideenspeicher.nav */
.sb-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.nav-kl { flex: none; width: 32px; height: 32px; margin-top: -4px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--r-bedien); background: transparent; color: var(--nav-text); cursor: pointer; }
.nav-kl:hover { background: var(--nav-hover); color: #fff; }
.sb .bt2 svg { display: none; }
@media (max-width: 900px) {
.nav-kl { display: none; }
 
}
@media (min-width: 901px) {
.sb { transition: flex-basis .18s ease; }
.sb.schmal { flex-basis: 68px; padding: 24px 8px; gap: 16px; overflow-x: hidden; scrollbar-width: none; }
.sb.schmal .sb-kopf { justify-content: center; }
.sb.schmal .marke, .sb.schmal .nv-t, .sb.schmal .wer, .sb.schmal .nv-anp, .sb.schmal .lab-btn, .sb.schmal .lab { display: none; }
.sb.schmal .nv { position: relative; justify-content: center; gap: 0; padding: 0; }
.sb.schmal .nv-gruppe.zu .nv-zu { display: flex; }
.sb.schmal .nv-gruppe { padding-top: 12px; border-top: 1px solid var(--nav-linie); }
.sb.schmal .nv .bdg { position: absolute; top: 4px; right: 2px; min-width: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; }
.sb.schmal .me { padding: 16px 0 0; align-items: center; }
.sb.schmal .me .nv { justify-content: center; width: 100%; padding: 0; }
.sb.schmal .bt2 { width: 100%; padding: 0; }
.sb.schmal .bt2 svg { display: block; }


}


/* Eine Suche: „Wo“ als Schalter statt Auswahlfeld, Gruppenköpfe in der Vorschlagsliste */
.fl-wo { display: inline-flex; flex: none; border: 1px solid var(--rand); border-radius: var(--r-bedien); overflow: hidden; background: var(--flaeche); }
.fl-wo-bt { min-height: 42px; padding: 0 12px; border: 0; border-right: 1px solid var(--linie); background: transparent; color: var(--text3); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.fl-wo-bt:last-child { border-right: 0; }
.fl-wo-bt:hover { background: var(--hover); color: var(--text); }
.fl-wo-bt.on { background: var(--akzent-weich); color: var(--akzent-text2); }
@media (max-width: 600px) {
.fl-wo-bt { padding: 0 8px; font-size: 13px; }
 
}


/* Datum in die Leiste getippt: der Zieltag im Kalender leuchtet kurz auf */
@keyframes pl-ziel-an { 0%, 70% { outline-color: var(--akzent); } 100% { outline-color: transparent; } }


/* Gesuchter Eintrag im Kalender: seine Termine leuchten, die anderen treten zurück */


/* Kalendersprung: die ganze Spalte des Tages blinkt dreimal rot, der gesuchte Eintrag bekommt einen kräftigen Rahmen */
@keyframes pl-blink {
  0%, 33%, 66%, 100% { box-shadow: inset 0 0 0 100px rgba(230, 0, 54, 0); }
  16%, 50%, 83% { box-shadow: inset 0 0 0 100px rgba(230, 0, 54, .38); }
}
@keyframes pl-rahmen { 0%, 33%, 66%, 100% { outline-width: 4px; } 16%, 50%, 83% { outline-width: 9px; } }


/* Kalender-Legende und kürzeres Schild „hervorgehoben“ */
.lg-fest { background: var(--text2); border-color: var(--text2) !important; }
.lg-option { background: var(--flaeche); border: 1px dashed var(--text2) !important; }
.lg-werk { background: var(--chip-grau); }
.lg-we { background: var(--we-grund, var(--flaeche2)); background-image: repeating-linear-gradient(135deg, var(--we-streif, var(--linie)) 0 2px, transparent 2px 5px); }
.lg-ft { background: var(--akzent-tief); }
.lg-jetzt { width: 2px !important; height: 13px !important; border: 0 !important; background: var(--akzent); margin-right: -8px !important; }


/* Zeile „Noch kein Fahrzeug“: Themen mit Zeitraum, die noch auf keinem Fahrzeug stehen */


/* Ein Balken ohne Überschneidung füllt die Zeile, lässt unten aber einen Streifen frei (in einbahnigen Zeilen schmal), damit sich dort per Klick oder Ziehen ein weiterer Eintrag anlegen lässt */


/* Ordner in der Themenliste (Muster: Explorer, Outlook, Gmail, Drive) */
.ob { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 24px; align-items: start; }
.ob.zu { grid-template-columns: minmax(0, 1fr); }
.ob-baum { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 2px; padding: 8px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; max-height: calc(100vh - 40px); overflow: auto; font-size: 14px; }
.ob-kopfzeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 6px 6px 10px; }
.ob-kopfzeile b { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--leise); }
.ob-ikonen { display: flex; gap: 2px; }
.ob-ik, .ob-mehr { display: grid; place-items: center; width: 28px; height: 28px; border: 0; background: none; border-radius: 6px; color: var(--leise); cursor: pointer; padding: 0; }
.ob-ik:hover, .ob-mehr:hover { background: var(--hover, rgba(127, 127, 127, .14)); color: var(--text); }
.ob-system { display: flex; flex-direction: column; gap: 1px; }
.ob-sep { height: 1px; background: var(--linie); margin: 6px 6px; }
.ob-wurzel, .ob-a { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 8px; border-radius: 8px; text-decoration: none; color: var(--text); min-width: 0; flex: 1 1 auto; }
.ob-ico { display: grid; place-items: center; flex: 0 0 auto; color: var(--leise); }
.ob-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
.ob-zahl { flex: 0 0 auto; margin-left: auto; padding-left: 6px; font-size: 12px; color: var(--leise); font-variant-numeric: tabular-nums; }
.ob-wurzel:hover, .ob-z:hover { background: var(--hover, rgba(127, 127, 127, .12)); }
.ob-z { display: flex; align-items: center; gap: 0; border-radius: 8px; position: relative; }
.ob-z .ob-a:hover { background: none; }
.ob-wurzel:focus-visible, .ob-a:focus-visible, .ob-ik:focus-visible, .ob-mehr:focus-visible, .ob-pf:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
.ob-wurzel.on, .ob-z.on { background: var(--akzent-tief, rgba(190, 30, 45, .12)); }
.ob-wurzel.on, .ob-z.on .ob-a { color: var(--akzent); font-weight: 600; }
.ob-wurzel.on .ob-ico, .ob-z.on .ob-ico, .ob-wurzel.on .ob-zahl, .ob-z.on .ob-zahl { color: var(--akzent); }
.ob-liste { list-style: none; margin: 0; padding: 0; }
.ob-liste .ob-liste { padding-left: 14px; }
.ob-mehr { flex: 0 0 28px; opacity: 0; }
.ob-z:hover .ob-mehr, .ob-z.on .ob-mehr, .ob-mehr:focus-visible { opacity: 1; }
.ob-pf { flex: 0 0 22px; width: 22px; height: 28px; display: grid; place-items: center; border: 0; background: none; color: var(--leise); cursor: pointer; border-radius: 6px; transform: rotate(90deg); transition: transform .12s; padding: 0; }
.ob-pf.zu { transform: rotate(0); }
.ob-pf.leer { cursor: default; visibility: hidden; }
.ob-leer { padding: 8px 10px; margin: 0; }
.ob-menu { position: fixed; z-index: 60; min-width: 220px; }
.ob-tast { margin-left: auto; padding-left: 16px; color: var(--leise); font-size: 12px; }
.ob-ziel-an, .ob-wurzel.ob-ziel-an { outline: 2px dashed var(--akzent); outline-offset: -2px; background: var(--akzent-tief, rgba(190, 30, 45, .12)); }
.ob-z.zieht { opacity: .5; }
.ob-kopf { display: flex; flex-direction: column; gap: 6px; }
.ob-titelzeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.ob-titel { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 26px; font-weight: 700; line-height: 1.25; min-width: 0; }
.ob-titel .ob-ico { color: var(--akzent); }
.ob-mehr-gross { padding: 4px 8px; }
.ob-hinweis { margin: 0; }
.ob-chip { display: inline-flex; align-items: center; gap: 4px; }
.ob-auf { display: inline-flex; align-items: center; gap: 6px; }
.ob-wahl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; background: var(--akzent-tief, rgba(190, 30, 45, .1)); border: 1px solid var(--akzent); border-radius: 10px; position: sticky; top: 8px; z-index: 5; }
.ob-wahl-n { margin-right: auto; }
.ob-bulk { flex: 0 1 220px; min-width: 0; }
.it-wahl { display: grid; place-items: center; flex: 0 0 auto; margin-right: 10px; opacity: 0; transition: opacity .1s; }
.it:hover .it-wahl, .it-wahl:focus-within, .it-wahl:has(input:checked) { opacity: 1; }
.it-wahl input { width: 18px; height: 18px; cursor: pointer; accent-color: var(--akzent); }
@media (hover: none) {
.it-wahl { opacity: 1; }
 
}
article.it[draggable="true"] { cursor: default; }
article.it.zieht { opacity: .45; }
.ob-fakt select { max-width: 100%; }
@media (max-width: 800px) {
.ob { grid-template-columns: 1fr; }
.ob-baum { position: static; max-height: 300px; }
.ob-mehr { opacity: 1; }
 
}
.ob-tabs { margin-top: 4px; padding: 0; }
.gk { gap: 8px; }
.gk-fakten { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px; background: var(--flaeche2); border-radius: 10px; }
.gk-kat { display: flex; flex-direction: column; gap: 3px; }
.gk-fakt { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.gk-fakt > span:first-child { color: var(--text3); min-width: 130px; }
.lk.gruen { color: var(--gruen); font-weight: 600; }
.th-liste .it-k { flex-wrap: wrap; align-items: center; }
.th-liste .it-k .tt { flex: 1 1 0; min-width: 14ch; }
.th-liste .it-k .it-wahl { margin-right: 4px; }
.ob-statuszeile { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0; }
.ob-statuszeile .lk.on { font-weight: 700; color: var(--akzent); }
.flt-korb { align-self: flex-end; margin-left: auto; padding-bottom: 10px; }


/* Themen als Ordner durchblättern (Muster: Google Drive, Windows Explorer) */
.dr-sektion { display: flex; flex-direction: column; gap: 10px; }
.dr-h { margin: 0; font-size: 13px; font-weight: 600; color: var(--leise); letter-spacing: .02em; display: flex; align-items: center; gap: 8px; }
.dr-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.dr-kachel { position: relative; display: flex; align-items: center; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; min-width: 0; transition: background .12s, box-shadow .12s, border-color .12s; }
.dr-kachel:hover { background: var(--flaeche2, var(--flaeche)); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.dr-k-link, .dr-neu { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; padding: 12px 14px; text-decoration: none; color: var(--text); background: none; border: 0; font: inherit; text-align: left; cursor: pointer; }
.dr-ico { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; background: var(--akzent-tief, rgba(190, 30, 45, .12)); color: var(--akzent); }
.dr-kt { display: flex; flex-direction: column; min-width: 0; }
.dr-kt b { font-weight: 600; }
.dr-neu { border: 1px dashed var(--linie2, var(--linie)); border-radius: 12px; }
.dr-neu .dr-ico { background: none; border: 1px dashed var(--linie2, var(--linie)); color: var(--leise); }
.dr-ohne .dr-ico { background: var(--flaeche2, rgba(127, 127, 127, .14)); color: var(--leise); }
.dr-k-mehr { opacity: 0; margin-right: 6px; }
.dr-kachel:hover .dr-k-mehr, .dr-k-mehr:focus-visible { opacity: 1; }
.dr-kachel.ob-ziel-an { outline: 2px dashed var(--akzent); outline-offset: -2px; background: var(--akzent-tief, rgba(190, 30, 45, .12)); }
.dr-kachel.zieht { opacity: .5; }
.dr-adresse { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; padding: 6px 10px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; width: fit-content; max-width: 100%; }
.dr-adresse a { display: inline-flex; align-items: center; gap: 5px; }
.dr-trenn { display: inline-flex; color: var(--leise); }
.dr-ansicht { display: inline-flex; border: 1px solid var(--linie2, var(--linie)); border-radius: 10px; overflow: hidden; align-self: flex-end; }
.dr-ab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 0; background: var(--flaeche); color: var(--text2); font: inherit; font-size: 14px; cursor: pointer; }
.dr-ab + .dr-ab { border-left: 1px solid var(--linie2, var(--linie)); }
.dr-ab.on { background: var(--akzent-tief, rgba(190, 30, 45, .12)); color: var(--akzent); font-weight: 600; }
.dr-tabelle { display: flex; flex-direction: column; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; overflow: hidden; }
.dr-zeile { display: grid; grid-template-columns: 34px minmax(0, 3.2fr) minmax(0, 1.6fr) 150px 120px 120px; align-items: center; gap: 0 12px; padding: 0 14px; min-height: 46px; border-top: 1px solid var(--linie); }
.dr-kopf { min-height: 38px; border-top: 0; background: var(--flaeche2, rgba(127, 127, 127, .08)); font-size: 12px; font-weight: 600; color: var(--leise); }
.dr-sort { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.dr-sort.on, .dr-sort:hover { color: var(--akzent); }
.dr-thema:hover { background: var(--flaeche2, rgba(127, 127, 127, .08)); }
.dr-thema.gewaehlt { background: var(--akzent-tief, rgba(190, 30, 45, .1)); }
.dr-thema.due { box-shadow: inset 3px 0 0 var(--rot-text, #b3261e); }
.dr-thema.zieht { opacity: .45; }
.dr-wahl { display: grid; place-items: center; opacity: .0; }
.dr-thema:hover .dr-wahl, .dr-wahl:focus-within, .dr-thema.gewaehlt .dr-wahl { opacity: 1; }
.dr-wahl input { width: 18px; height: 18px; cursor: pointer; accent-color: var(--akzent); }
.dr-name { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 0; color: var(--text-stark, var(--text)); text-decoration: none; font-weight: 600; }
.dr-name:hover .ob-n { text-decoration: underline; }
.dr-tico { display: grid; place-items: center; flex: 0 0 auto; color: var(--akzent); }
.dr-tico.intern { color: var(--leise); }
.dr-zelle { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--text2); }
@media (hover: none) {
.dr-wahl { opacity: 1; }
.dr-k-mehr { opacity: 1; }
 
}
@media (max-width: 900px) {
.dr-zeile { grid-template-columns: 34px minmax(0, 1fr) auto; row-gap: 0; padding: 6px 12px; }
.dr-kopf { display: none; }
.dr-thema > .dr-zelle:nth-of-type(1), .dr-thema > .dr-zelle:nth-of-type(2), .dr-thema > .dr-zelle:nth-of-type(4) { display: none; }
.dr-name { grid-column: 2; }
.dr-thema > .dr-zelle:nth-of-type(3) { grid-column: 3; }


}
.dr-gruppe { display: flex; align-items: center; padding: 8px 14px; min-height: 36px; border-top: 1px solid var(--linie); background: var(--flaeche2, rgba(127, 127, 127, .08)); font-size: 13px; color: var(--text2); }
.dr-gruppe b { font-weight: 700; color: var(--text); margin-right: 6px; }
.dr-kopf + .dr-gruppe { border-top: 0; }
.dr-leiste { align-items: center; justify-content: space-between; }
.dr-leiste .dr-ansicht { align-self: center; margin-left: auto; }
.dr-art { display: flex; flex-wrap: wrap; gap: 8px; }
.dr-art .chip { display: inline-flex; align-items: center; gap: 6px; }
.ob-statuszeile { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; }
.ob-statuszeile .lk.on { font-weight: 700; color: var(--text); }
.datei-seite { outline: 2px dashed var(--akzent); outline-offset: -6px; }
.datei-ziel { outline: 2px solid var(--akzent); outline-offset: -2px; background: var(--akzent-weich, rgba(230, 0, 54, .08)); }
.datei-hinweis { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90; max-width: min(92vw, 560px); padding: 10px 16px; background: var(--nav-bg, #403F3E); color: #fff; border-radius: var(--r-schicht, 6px); font-size: 14px; text-align: center; pointer-events: none; }
.dr-leiste .dr-ansicht { margin-left: 0; }
.ob-farbwahl { display: flex; flex-direction: column; gap: 6px; padding: 8px 14px 10px; }
.ob-farbwahl .kd-farbe { width: 22px; height: 22px; }
.fo-lila { --fo: #8E86F5; }
.fo-blau { --fo: #5AA9E6; }
.fo-gruen { --fo: #6FD3A0; }
.fo-gelb { --fo: #E8C547; }
.fo-orange { --fo: #E89A4F; }
.fo-rosa { --fo: #E06BB8; }
.fo-grau { --fo: #8F95B2; }
.ob-ico.fo, .ob-z.on .ob-ico.fo, .ob-titel .ob-ico.fo { color: var(--fo); }
.or-icon.fo { color: var(--fo); background: color-mix(in srgb, var(--fo) 20%, transparent); }
.dr-ico.fo { color: var(--fo); background: color-mix(in srgb, var(--fo) 20%, transparent); }
.dr-h { display: flex; align-items: center; gap: 8px; }
.ob-add-auf { margin-left: auto; }
.ob-add { display: flex; flex-direction: column; gap: 8px; padding: 12px; margin-bottom: 12px; border: 1px dashed var(--linie2, var(--linie)); }
.ob-add-liste { max-height: 320px; overflow: auto; }
.ob-add-z { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.ob-add-z > span:nth-of-type(1) { flex: 1; min-width: 0; }

/* Anruf-QR-Code: Der Code aus der Schnittstelle dient als Maske, seine Farbe kommt von der Seite (--qr-modul): im hellen Modus dunkles MCS-Rot auf weißer Karte,
   im dunklen Modus weiße Module auf dem dunklen Grund der Seite (die Karte ist dort durchsichtig, nur der Rahmen bleibt). */
:root { --qr-karte: transparent; --qr-modul: #ffffff; }
:root[data-theme="light"] { --qr-karte: #ffffff; --qr-modul: #7F041C; }
.qr-bild { display: block; width: 100%; height: 100%; background: var(--qr-modul);
  -webkit-mask: var(--qr) center / contain no-repeat; mask: var(--qr) center / contain no-repeat; }
.qr-karte { padding: 5px; background: var(--qr-karte); border: 1px solid var(--linie); border-radius: var(--r-bedien, 4px); box-sizing: border-box; }
.qr-karte { display: block; width: 124px; height: 124px; flex: none; }

/* Schnellansicht in der Personenliste: Beim Überfahren (oder Fokussieren) klappt die Zeile langsam nach unten auf und zeigt den Anruf-QR-Code mit Telefon und E-Mail.
   Die Höhe läuft über die Zeilenhöhe des Rasters (0fr -> 1fr); der Code wird erst beim ersten Aufklappen geladen. */

/* Fahrzeugliste: Zeilen klappen beim Überfahren auf (Bild, Kennzeichen, Plätze, Standmaße, Info), wie die Personenzeilen */

/* Große Zeilen: Schrift wächst mit der Zeilenhöhe (--bh), damit der Platz im Balken genutzt wird; der Hinweis darf dort mehr Zeilen füllen */


/* Kalender der Erinnerungen: Monat fortlaufend scrollbar (Wochen untereinander) oder Woche, daneben der gewählte Tag, Überfälliges und eingeschlafene Themen; als Kachel auf der Startseite nur das Raster.
   Eine Erinnerung ist ein Link zum Thema. */
.ka-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.ka-mon { display: flex; align-items: center; gap: 10px; }
.ka-opt { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.ka-titel { margin: 0; min-width: 9ch; text-align: center; font-size: 20px; font-weight: 700; }
.ka-pfeil { min-width: 40px; }
.ka-seite { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.ka-raster { border: 1px solid var(--linie2); background: var(--flaeche); min-width: 0; }
.ka-kopf, .ka-felder, .ka-reihe { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ka-kopf { border-bottom: 1px solid var(--linie2); background: var(--flaeche2); }
.ka-kopf span { padding: 8px 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text3); }
.ka-scroll { position: relative; overflow-y: auto; }
.ka-raster:not(.woche):not(.kompakt) .ka-scroll { height: clamp(380px, calc(100vh - 360px), 880px); }
.ka-scroll.zieht { cursor: grabbing; user-select: none; }
  /* mit der mittleren Maustaste gezogen */
.ka-scroll:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
.ka-feld { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; min-height: 108px; padding: 4px; border-right: 1px solid var(--linie2); border-bottom: 1px solid var(--linie2); }
.ka-feld:nth-child(7n) { border-right: 0; }
.ka-reihe:last-child .ka-feld { border-bottom: 0; }
.ka-feld.m1 { background: var(--flaeche2); }
  /* die Monate wechseln sich in der Tönung ab */
.ka-feld.heute { background: var(--rosa-weich); }
.ka-feld.heute .ka-tagnr { color: var(--akzent-hell); }
.ka-feld.wahl { outline: 2px solid var(--akzent); outline-offset: -2px; }
.ka-raster.woche .ka-feld { min-height: 300px; border-bottom: 0; }
.ka-kf { display: flex; align-items: baseline; gap: 6px; }
.ka-wt { display: none; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text3); }
.ka-tagnr { align-self: flex-start; min-width: 28px; height: 28px; padding: 0 4px; border: 0; background: transparent; color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.ka-tagnr:hover { color: var(--akzent-hell); }
.ka-chip { display: flex; gap: 5px; width: 100%; padding: 2px 5px; border-left: 3px solid var(--akzent); background: var(--flaeche2); color: var(--text); font-size: 12px; line-height: 1.35; text-align: left; text-decoration: none; overflow: hidden; cursor: pointer; }
.ka-feld.m1 .ka-chip { background: var(--flaeche); }
.ka-chip:hover, .ka-chip:focus-visible { background: var(--akzent-weich); text-decoration: underline; }
.ka-chip.thema { border-left-color: var(--grau); }
.ka-chip.due { border-left-color: var(--rot); background: var(--rot-weich); }
.ka-chip.erledigt { opacity: .55; border-left-color: var(--leise); }
.ka-chip.erledigt .ka-t { text-decoration: line-through; }
.ka-uhr { flex: none; color: var(--text3); font-variant-numeric: tabular-nums; }
.ka-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ka-raster.woche .ka-chip { flex-direction: column; gap: 0; }
  /* in der Woche steht die Uhrzeit über dem Titel, der Titel hat die ganze Breite und darf an Wortgrenzen umbrechen */
.ka-raster.woche .ka-t { white-space: normal; overflow-wrap: break-word; hyphens: auto; }
.ka-mehr { align-self: flex-start; padding: 1px 4px; border: 0; background: transparent; color: var(--akzent-hell); font: inherit; font-size: 12px; cursor: pointer; }
.ka-panel { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ka-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ka-liste li { display: flex; gap: 8px; align-items: baseline; min-width: 0; }

/* Kachel auf der Startseite: das Raster füllt die Kachel, gescrollt wird darin */
.ka-kachel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.ka-kachel .ka-nav { margin-bottom: 0; }
.ka-kachel .ka-titel { font-size: 16px; min-width: 8ch; }
.ka-raster.kompakt { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.ka-raster.kompakt .ka-scroll { flex: 1 1 auto; min-height: 0; }
.ka-raster.kompakt .ka-feld { min-height: 84px; }
.ka-raster.kompakt .ka-kopf span { padding: 6px 8px; }
@media (max-width: 1100px) {
.ka-seite { grid-template-columns: minmax(0, 1fr); }
 
}
@media (max-width: 700px) {
  /* Monat am Handy: nur Punkte, ein Tipp irgendwo im Feld wählt den Tag (Einzelheiten und Links stehen im Block des Tages) */
  .ka-raster:not(.woche):not(.kompakt) .ka-scroll { height: clamp(360px, calc(100vh - 340px), 700px); }
.ka-feld { min-height: 58px; padding: 2px; }
.ka-kopf span { padding: 6px 2px; text-align: center; font-size: 11px; }
.ka-tagnr::after { content: ''; position: absolute; inset: 0; }
.ka-chip { height: 6px; padding: 0; pointer-events: none; }
.ka-chip .ka-uhr, .ka-chip .ka-t { display: none; }
.ka-mehr { font-size: 11px; }
.ka-titel { font-size: 18px; min-width: 8ch; }

  /* Woche am Handy: die Tage untereinander, die Erinnerungen ausgeschrieben und als Links */
  .ka-raster.woche .ka-kopf { display: none; }
.ka-raster.woche .ka-felder { grid-template-columns: minmax(0, 1fr); }
.ka-raster.woche .ka-feld { min-height: 0; padding: 6px 8px; border-right: 0; border-bottom: 1px solid var(--linie2); }
.ka-raster.woche .ka-wt { display: inline; }
.ka-raster.woche .ka-tagnr::after { display: none; }
.ka-raster.woche .ka-chip { height: auto; padding: 4px 6px; pointer-events: auto; flex-direction: row; gap: 5px; }
.ka-raster.woche .ka-chip .ka-uhr, .ka-raster.woche .ka-chip .ka-t { display: inline; }


}


/* Kalender als Abschnitt der Seite Erinnerungen */
.ka-in-er { display: flex; flex-direction: column; gap: 12px; }

/* Feiertage im Kalender der Erinnerungen */
.ka-feld.ft { background: var(--rosa-weich); }
.ka-feld.ft .ka-tagnr { color: var(--akzent-hell); }
.ka-ft { font-size: 11px; font-weight: 700; line-height: 1.25; color: var(--akzent-hell); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ka-feld.heute.ft { background: var(--rosa-weich); }
@media (max-width: 700px) {
.ka-ft { display: none; }
 
}

/* das Gespräch am rechten Rand hat nur die rote Linie als Kante (nach der gemeinsamen Rahmenregel) */
.fl-panel { border: 0; }

/* Suchleiste ohne den drehenden KI-Rand und ohne Schein: die KI zeigt sich jetzt am rechten Rand; das Feld bekommt einen schlichten Rahmen */
.fl-leiste .ki::before { display: none; }
.fl-leiste .ki, .fl-leiste .ki:is(:hover, :focus-visible), .fl-leiste .ki-feld:focus-within, .fl-leiste .ki-feld:has(.inp:not(:placeholder-shown)) { box-shadow: none; }
.fl-leiste .ki-feld .inp, .fl-leiste .ki-feld:hover .inp { border-color: var(--linie2); }
.fl-leiste .ki-feld .inp:focus { border-color: var(--akzent); }

/* Nachrichtenblasen im Gespräch: Fragen rechts (rot getönt, spitze Ecke unten rechts), Antworten links (grau, spitze Ecke unten links) */
.fl-panel { gap: 12px; }
.fl-panel .ts-frage span { max-width: 86%; padding: 10px 15px; border: 0; border-radius: 18px 18px 5px 18px; background: var(--akzent-weich); line-height: 1.45; }
.fl-panel .ts-antwort { align-self: flex-start; max-width: 94%; padding: 13px 15px; border: 0; border-radius: 18px 18px 18px 5px; background: var(--flaeche2); }
.fl-panel .fl-rueck { border: 0; border-radius: 18px 18px 18px 5px; background: var(--akzent-weich); }
.fl-panel .err { align-self: flex-start; padding: 10px 15px; border-radius: 18px 18px 18px 5px; background: var(--rot-weich, #FDE6EB); }

/* der Schein färbt nur den Hintergrund, Text und Linien darunter bleiben lesbar (hell: abdunkelnd überlagert, dunkel: aufhellend) */
.fl-linie { mix-blend-mode: multiply; }
:root[data-theme="dark"] .fl-linie { mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .fl-linie { mix-blend-mode: screen; }
 
}

/* lange Titel und Dateinamen in Antworten und Treffern brechen um, statt über den Rand der Blase zu laufen */
.fl-panel, .fl-treffer { overflow-x: hidden; }
.fl-panel .ts-antwort, .fl-panel .vt-g, .fl-panel .fl-bewerten, .fl-treffer .vt-g { min-width: 0; }
.fl-panel .hit, .fl-treffer .hit { min-width: 0; max-width: 100%; overflow: hidden; }
.fl-panel .hit *, .fl-treffer .hit *, .fl-panel .vt-k *, .fl-treffer .vt-k *, .fl-panel .ts-antwort p, .fl-panel .ts-antwort a { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.fl-panel .hit-k b, .fl-treffer .hit-k b { flex: 1 1 8em; }

/* KI-Zeichen in den Farben der Marke: der Funke im MCS-Rot mit spitzen Spitzen, das kleine Quadrat eckig im Grau des Logos (unabhängig von der Textfarbe drumherum) */
.kl-a { fill: var(--akzent); stroke: none; }
  /* spitze Spitzen, kein abgerundeter Rand */
.kl-b { fill: var(--grau); }