/* Farben, Schriften, Abstände: Anpassungen am Aussehen nur hier oben */
:root {
  --bg: #f6f7f9; --flaeche: #ffffff; --flaeche2: #eef0f3; --text: #1d2228; --leise: #6b7480; --linie: #d9dde3;
  --akzent: #e07000; --akzent-text: #ffffff; --link: #0b62c4;
  --todo: #fff6e8; --todo-rand: #f0a540; --ok: #2f8f46; --fehler: #c62828; --ueber: #c62828;
  --thema: #e3eefc; --thema-text: #18519c; --sprecher: #ece7fb; --sprecher-text: #5634a8; --wer: #fde9d6; --wer-text: #8f4a00;
  --schatten: 0 1px 3px rgba(0,0,0,.08);
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: ui-monospace, Consolas, monospace;
  --r: 6px; --abstand: 12px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #15181c; --flaeche: #1e2228; --flaeche2: #272c33; --text: #e4e7eb; --leise: #929ba6; --linie: #353b44;
  --akzent: #f28a1c; --akzent-text: #15181c; --link: #6aa9f5;
  --todo: #2b2418; --todo-rand: #b9772a; --ok: #5cc077; --fehler: #ef6b6b; --ueber: #ff7b7b;
  --thema: #1d3150; --thema-text: #a9cbff; --sprecher: #2e2647; --sprecher-text: #cbb8ff; --wer: #3d2b16; --wer-text: #ffc68a;
  --schatten: 0 1px 3px rgba(0,0,0,.4);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15181c; --flaeche: #1e2228; --flaeche2: #272c33; --text: #e4e7eb; --leise: #929ba6; --linie: #353b44;
    --akzent: #f28a1c; --akzent-text: #15181c; --link: #6aa9f5;
    --todo: #2b2418; --todo-rand: #b9772a; --ok: #5cc077; --fehler: #ef6b6b; --ueber: #ff7b7b;
    --thema: #1d3150; --thema-text: #a9cbff; --sprecher: #2e2647; --sprecher-text: #cbb8ff; --wer: #3d2b16; --wer-text: #ffc68a;
    --schatten: 0 1px 3px rgba(0,0,0,.4);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font: 14px/1.45 var(--schrift); }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 20px; margin: 0 0 var(--abstand); }
h2 { font-size: 16px; margin: 24px 0 8px; }
h3 { font-size: 14px; margin: 0; }
code, kbd { font-family: var(--mono); background: var(--flaeche2); padding: 1px 4px; border-radius: 3px; }
.leise { color: var(--leise); }
.platz { flex: 1; }
.rechts { text-align: right; }
.inline { display: inline; }

/* Kopf */
.kopf { display: flex; align-items: center; gap: 14px; padding: 8px 16px; background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.kopf nav { display: flex; gap: 14px; flex-wrap: wrap; }
.kopf nav a, .kopf .wer { color: var(--text); }
.marke { font-weight: 800; font-size: 16px; color: var(--akzent); letter-spacing: .5px; display: inline-flex; align-items: baseline; gap: 6px; }
a.marke:hover { text-decoration: none; }
.marke small { font-size: 11px; font-weight: 400; letter-spacing: 0; color: var(--leise); }
.marke small b { color: #f27d00; font-weight: 700; }
.projektmenue { margin-left: 28px; }
.kopflink { color: var(--text); padding: 3px 8px; border-radius: var(--r); display: inline-flex; align-items: center; gap: 5px; }
.kopflink:hover, .kopflink.aktiv { background: var(--flaeche2); text-decoration: none; }
.zaehler { background: var(--akzent); color: var(--akzent-text); border-radius: 9px; font-size: 11px; font-weight: 700; padding: 0 6px; line-height: 17px; min-width: 18px; text-align: center; }
.projektmenue .menueliste { left: 0; right: auto; min-width: 220px; max-height: 70vh; overflow-y: auto; }
.menueliste a.aktiv { font-weight: 700; color: var(--akzent); }
.menueliste a.alle { border-top: 1px solid var(--linie); margin-top: 4px; padding-top: 8px; color: var(--leise); }
main { padding: 16px; max-width: 1200px; margin: 0 auto; }

/* Fußzeile der Seiten ohne Anmeldung */
.fuss { text-align: center; font-size: 12px; padding: 16px; }
.fuss a { color: var(--leise); }

/* Benutzermenü */
.menue { position: relative; }
.menue > summary { list-style: none; cursor: pointer; padding: 3px 8px; border-radius: var(--r); }
.menue > summary::-webkit-details-marker { display: none; }
.menue > summary:hover, .menue[open] > summary { background: var(--flaeche2); }
.menueliste { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 190px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); box-shadow: 0 6px 18px rgba(0,0,0,.18); padding: 4px 0; }
.menueliste a, .menueliste button { display: block; width: 100%; text-align: left; padding: 6px 14px; color: var(--text); background: none; border: 0; font: inherit; cursor: pointer; }
.menueliste a:hover, .menueliste button:hover { background: var(--flaeche2); text-decoration: none; }
.menueliste form { border-top: 1px solid var(--linie); margin-top: 4px; padding-top: 4px; }
.logovorschau { max-width: 260px; max-height: 90px; background: #fff; padding: 6px; border: 1px solid var(--linie); border-radius: var(--r); }
input.nr { width: 64px; }

/* Formulare und Knöpfe */
input, select, textarea { font: inherit; color: var(--text); background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); padding: 5px 8px; max-width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--akzent); outline-offset: -1px; border-color: transparent; }
textarea { width: 100%; resize: vertical; }
label { display: block; margin: 0 0 10px; }
label > input:not([type=checkbox]), label > textarea, label > select { display: block; width: 100%; margin-top: 3px; }
label.haken { display: inline-flex; align-items: center; gap: 5px; margin: 0 12px 6px 0; }
.knopf { display: inline-block; font: inherit; cursor: pointer; padding: 5px 12px; border-radius: var(--r); border: 1px solid var(--linie); background: var(--flaeche); color: var(--text); white-space: nowrap; }
.knopf:hover { background: var(--flaeche2); text-decoration: none; }
.knopf.haupt { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); font-weight: 600; }
.knopf.haupt:hover { filter: brightness(1.08); }
.knopf.klein { padding: 2px 8px; font-size: 13px; }
.knopf.gefahr { color: var(--fehler); }
.zeile { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.zeile.eng { gap: 6px; margin: 4px 0; }
.titelzeile { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: var(--abstand); }
.titelzeile h1 { margin: 0; }
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); padding: 16px; box-shadow: var(--schatten); margin: 12px 0; }
.karte.schmal { max-width: 440px; margin: 40px auto; }
details > summary { cursor: pointer; }
.aufklapp { position: relative; }
.aufklapp > summary { list-style: none; }
.aufklapp > .karte { position: absolute; right: 0; z-index: 5; width: 320px; }

.meldung { padding: 8px 12px; border-radius: var(--r); margin: 0 0 12px; border: 1px solid; word-break: break-all; }
.meldung.ok { border-color: var(--ok); color: var(--ok); }
.meldung.fehler { border-color: var(--fehler); color: var(--fehler); }

/* Listen und Tabellen */
table.liste { border-collapse: collapse; width: 100%; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); }
.liste th, .liste td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.liste th { font-weight: 600; color: var(--leise); font-size: 12px; }
.liste tr.aktiv td { background: var(--flaeche2); }
.liste ul, .prot ul { margin: 2px 0; padding-left: 18px; }
input.url { width: 300px; font-size: 12px; }
/* Feste Spaltenbreiten: Personen und ToDo-Listen (alle Einzeltabellen gleich) */
table.personen, table.todotab { table-layout: fixed; }
.personen .c-name { width: 32%; } .personen .c-mail { width: 38%; } .personen .c-anz { width: 12%; } .personen .c-akt { width: 18%; }
.personen td input { width: 100%; }
.todotab .c-thema { width: 15%; } .todotab .c-termin { width: 13%; } .todotab .c-faellig { width: 10%; } .todotab .c-status { width: 11%; } .todotab .c-link { width: 14%; }
.todotab td { overflow-wrap: anywhere; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kachel { display: flex; flex-direction: column; gap: 3px; padding: 14px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); color: var(--text); box-shadow: var(--schatten); }
.kachel:hover { border-color: var(--akzent); text-decoration: none; }
.kachel b { font-size: 16px; }
.ueber { color: var(--ueber); font-weight: 600; font-style: normal; }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-block; padding: 0 7px; border-radius: 10px; font-size: 12px; line-height: 19px; background: var(--flaeche2); color: var(--text); margin-right: 3px; white-space: nowrap; }
.chip.thema { background: var(--thema); color: var(--thema-text); }
.chip.sprecher { background: var(--sprecher); color: var(--sprecher-text); }
.chip.wer { background: var(--wer); color: var(--wer-text); }
.chip.faellig.ueber { color: var(--ueber); }
a.chip:hover { text-decoration: none; filter: brightness(.95); }

/* Editor: volle Höhe, Blöcke scrollen, Eingabe unten */
body.voll { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
main.voll { flex: 1; min-height: 0; width: 100%; padding: 8px 16px 12px; display: flex; flex-direction: column; }
.editor { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.etitel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.etitel input[name=title] { font-weight: 600; }
.bloecke { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 4px 8px; border: 1px solid var(--linie); border-radius: var(--r); background: var(--bg); }
.bloecke .leer { padding: 20px; text-align: center; }
.trenner { margin: 14px 0 6px; padding-bottom: 3px; border-bottom: 1px solid var(--linie); }
.trenner:first-child { margin-top: 4px; }
/* Liste: Inhalt links, rechts Spalten Verantwortlich / Fällig / Status */
.bloecke { --spalten: 34px minmax(0, 1fr) 170px 88px 120px; padding-top: 0; }
.lkopf { display: grid; grid-template-columns: var(--spalten); gap: 8px; position: sticky; top: 0; z-index: 2; background: var(--bg); padding: 6px 10px 4px 13px; border-bottom: 1px solid var(--linie); font-size: 12px; color: var(--leise); font-weight: 600; }
.lkopf button { all: unset; cursor: pointer; color: var(--leise); }
.lkopf button:hover { color: var(--akzent); }
.block { display: grid; grid-template-columns: var(--spalten); gap: 8px; align-items: start; background: var(--flaeche); border: 1px solid var(--linie); border-left: 3px solid var(--linie); border-radius: var(--r); padding: 6px 10px; margin: 6px 0; }
.block.offen { display: block; }
.c-nr { font-size: 12px; padding-top: 2px; }
.c-wer, .c-faellig, .c-status { font-size: 13px; padding-top: 1px; }
.c-faellig.ueber { color: var(--ueber); font-weight: 600; }
.stwahl { font-size: 12px; padding: 1px 4px; max-width: 100%; }
.bkomm { font-size: 12px; margin-top: 3px; }
.filter { margin: 0; }
.filter input[type=search] { width: 180px; }
.filter select { max-width: 180px; }
.block.klickbar { cursor: pointer; }
.block.klickbar:hover { border-color: var(--akzent); }
.block.offen { cursor: default; border-color: var(--akzent); }
.block.todo { background: var(--todo); border-left-color: var(--todo-rand); }
.block.st-fertig .btext { text-decoration: line-through; opacity: .7; }
.bkopf { font-size: 12px; display: flex; gap: 6px; align-items: center; margin-bottom: 2px; }
.btext ul { margin: 2px 0; padding-left: 20px; }
.todomark { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--todo-rand); margin-right: 6px; }
.bmeta { margin-top: 4px; font-size: 12px; display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.bform textarea { margin: 4px 0; }
.bform textarea.nurtodo { display: none; }
.bform.istodo textarea.nurtodo { display: block; }
.bform .nurtodo { display: none; }
.bform.istodo .nurtodo { display: flex; }
.bform input[name=speakers], .bform input[name=topics], .bform input[name=owners] { flex: 1; min-width: 140px; }

.eingabe { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); padding: 8px; box-shadow: var(--schatten); }
.status { font-size: 12px; margin-bottom: 5px; }
.feldrahmen { position: relative; }
#feld { font: 14px/1.5 var(--mono); height: 30vh; min-height: 70px; resize: none; }
.ziehgriff { height: 10px; margin: -6px 0 4px; cursor: ns-resize; display: flex; justify-content: center; align-items: center; touch-action: none; }
.ziehgriff::before { content: ''; width: 48px; height: 4px; border-radius: 2px; background: var(--linie); }
.ziehgriff:hover::before { background: var(--akzent); }
.vorschau { font-size: 12px; margin-top: 4px; min-height: 18px; color: var(--leise); }
.vb { display: inline-block; padding: 0 6px; border: 1px solid var(--linie); border-radius: 4px; margin-right: 4px; }
.vb.todo { border-color: var(--todo-rand); color: var(--text); }
.vorschlag { position: absolute; z-index: 10; margin: 0; padding: 3px 0; list-style: none; min-width: 180px; max-width: 320px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.vorschlag li { padding: 3px 10px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vorschlag li.an { background: var(--akzent); color: var(--akzent-text); }
.mitvorschlag { position: relative; }

/* Kanban */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 12px; align-items: start; overflow-x: auto; padding-bottom: 6px; }
.spalte { background: var(--flaeche2); border-radius: var(--r); padding: 8px; min-height: 200px; border: 2px dashed transparent; }
.spalte.ziel { border-color: var(--akzent); }
.spalte h3 { display: flex; justify-content: space-between; padding: 2px 4px 8px; }
.anz { color: var(--leise); font-weight: 400; }
.kanban .karte { margin: 0 0 8px; padding: 8px 10px; box-shadow: var(--schatten); }
.kanban .karte[draggable=true] { cursor: grab; }
.kanban .karte.zieht { opacity: .4; }
.kanban .karte.neu { animation: neu 1.5s ease-out; }
@keyframes neu { from { box-shadow: 0 0 0 3px var(--akzent); } to { box-shadow: var(--schatten); } }
.kanban .karte ul { margin: 2px 0; padding-left: 18px; }
/* Kartentext höchstens 4 Zeilen, der ganze Text steht im Bearbeitungsfenster */
.kanban .ktext { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; max-height: 5.8em; }
.kmeta { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 3px; }
.kkomm { font-size: 12px; margin-top: 5px; color: var(--leise); }
.kherkunft { font-size: 11px; color: var(--leise); margin-top: 4px; }
.spalte.fertig .ktext { text-decoration: line-through; opacity: .7; }

/* Ergebnis eines ToDos: grün markiert, direkt unter dem ToDo */
.ergebnis { margin-top: 5px; padding: 4px 8px; border-left: 3px solid var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); border-radius: 0 var(--r) var(--r) 0; font-size: 13px; }
.ergebnis b { color: var(--ok); }
.ergebnis ul { margin: 2px 0; }
.kerg { font-size: 12px; margin-top: 5px; padding: 2px 6px; border-left: 3px solid var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); }
.kerg b { color: var(--ok); }
.kanban[data-klick="1"] .karte { cursor: pointer; }
.kanban .karte:hover { border-color: var(--akzent); }
.kdialog { width: min(560px, calc(100vw - 32px)); border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche); color: var(--text); padding: 16px; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.kdialog::backdrop { background: rgba(0,0,0,.35); }
.kdialog .dtext { font-size: 15px; font-weight: 600; margin: 8px 0; }
.kdialog label { margin-top: 10px; }
.kdialog .dfelder label { flex: 1; min-width: 160px; margin-top: 4px; }
.kdialog .kmeta { margin-bottom: 6px; }
.stname.fertig { color: var(--ok); font-weight: 600; }
.chipwahl { padding: 2px 8px; border: 1px solid var(--linie); border-radius: 14px; margin: 0; }
.klein { font-size: 12px; }
label.inline { display: inline-flex; gap: 6px; align-items: center; margin: 0; }

/* Projektleiste: auf allen Projektseiten gleich, aktive Ansicht hervorgehoben */
.projektleiste { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: var(--abstand); }
.projektleiste h1 { margin: 0; }
.projektleiste h1 a { color: var(--text); }
.projektleiste h1 a:hover { color: var(--akzent); text-decoration: none; }
.knopf.nav.aktiv { background: var(--akzent); color: var(--akzent-text); }
h2.unterkopf { margin: 0; }
body.voll .projektleiste { margin-bottom: 6px; }

/* Projektseite: Navigation zu Kanban, Listen, Themenprotokoll */
.projektnav { display: flex; flex-wrap: wrap; gap: 10px; margin-left: 28px; }
.knopf.nav { padding: 7px 14px; font-size: 13.5px; font-weight: 600; border-color: var(--akzent); color: var(--akzent);
  background: color-mix(in srgb, var(--akzent) 10%, var(--flaeche)); border-radius: 8px; }
.knopf.nav span { margin-right: 7px; font-weight: 400; }
.knopf.nav:hover { background: var(--akzent); color: var(--akzent-text); }
.umbenennen { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; max-width: 560px; }
.umbenennen label { flex: 1; min-width: 220px; margin: 0; }
@media (max-width: 760px) { .projektnav { margin-left: 0; } }

/* Einklappbare Bereiche (Projektseite) */
.bereich { border-top: 1px solid var(--linie); margin-top: 10px; }
.bereich > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.bereich > summary::-webkit-details-marker { display: none; }
.bereich > summary::before { content: '▸'; color: var(--leise); transition: transform .15s; }
.bereich[open] > summary::before { transform: rotate(90deg); }
.bereich > summary h2 { margin: 12px 0; }
.bereich > summary:hover h2 { color: var(--akzent); }
.unter { margin-top: 10px; }

/* Hinweiszeile unter dem Eingabefeld */
.hinweis { font-size: 12.5px; color: var(--leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
.hinweis code, .hinweis kbd { font-size: 12px; padding: 0 3px; }

/* Protokoll */
.papier { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r); padding: 20px; }
table.prot { border-collapse: collapse; width: 100%; }
.prot th, .prot td { border: 1px solid var(--linie); padding: 5px 7px; vertical-align: top; text-align: left; }
.prot th { background: var(--flaeche2); font-size: 12px; }
.prot tr.todo td { background: var(--todo); }
.prot tr.ghead th { background: none; border: 0; color: var(--akzent); font-size: 14px; padding: 14px 4px 4px; }
.prot tr[draggable=true] { cursor: grab; }
.prot tr[draggable=true]:hover td.nr { color: var(--akzent); }
.prot tr.zieht td { opacity: .35; }
.gruppe h2 { display: flex; align-items: center; gap: 8px; }
.verlauf { padding-left: 18px; font-size: 13px; }
.zweispaltig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; align-items: start; }
.mailvorschau { width: 100%; height: 70vh; border: 1px solid var(--linie); border-radius: var(--r); background: #fff; }

@media (max-width: 760px) {
  .kopf { flex-wrap: wrap; gap: 4px 10px; padding: 6px 10px; }
  .kopf .marke small { display: none; }
  .projektmenue { margin-left: 0; }
  .zweispaltig { grid-template-columns: 1fr; }
  .kanban { grid-auto-flow: row; grid-auto-columns: auto; }
  .bloecke { --spalten: 24px minmax(0, 1fr) 90px; }
  .lkopf button[data-sort=faellig], .lkopf button[data-sort=status] { display: none; }
  .c-faellig, .c-status { grid-column: 3; }
  main { padding: 10px; }
  input.url { width: 100%; }
}

@media print {
  :root { --bg: #fff; --flaeche: #fff; --flaeche2: #eee; --text: #000; --linie: #999; --todo: #fff8ec; }
  .kopf, .nodruck, .meldung { display: none !important; }
  main { padding: 0; max-width: none; }
  .papier { border: 0; padding: 0; }
  body { font-size: 11pt; }
}