/* ==========================================================================
   Sanja Grüninger – Stil «Wärme & Weite»
   Regeln: Luft vor Farbe, Bordeaux nur für Marke & Fokus, Schokolade = Text
   Morgenblau sparsam als Lichtpunkt, Status über Form + Wort, nicht nur Farbe
   ========================================================================== */
/* Typografie-Regel: niemals Mittelpunkte als Trenner verwenden. */
:root {
  --bordeaux: #6c2527; --schoko: #402514; --morgenblau: #c4e2ff;
  --kaschmir: #d2ab80; --taupe: #7f735c; --papier: #f4f0e8;

  --bg: var(--papier);
  --surface: #faf8f3;
  --ink: var(--schoko);
  --ink-2: #5e4a3c;
  --muted: #6e634e;
  --line: rgba(64, 37, 20, .12);
  --line-strong: rgba(64, 37, 20, .24);
  --brand: var(--bordeaux);
  --brand-ink: #f4f0e8;
  --light: var(--morgenblau);
  --warm: var(--kaschmir);
  --track: rgba(127, 115, 92, .18);
  --planned: rgba(127, 115, 92, .38);

  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --r: 4px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (max-width: 0px) and (min-width: 1px) {
  :root {
    --bg: #1d1510; --surface: #251b15; --ink: #f1e9dd; --ink-2: #d4c6b4; --muted: #a8997f;
    --line: rgba(241, 233, 221, .12); --line-strong: rgba(241, 233, 221, .24);
    --brand: #c9787a; --brand-ink: #1d1510; --light: #9fc7ee; --warm: #d9b88f;
    --track: rgba(241, 233, 221, .10); --planned: rgba(241, 233, 221, .28);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 56px 32px 120px; }
@media (max-width: 640px) { .wrap { padding: 32px 16px 80px; } }
::selection { background: var(--light); color: var(--schoko); }
a { color: var(--brand); text-decoration: none;  background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .25s var(--ease); }
a:hover { text-decoration-color: transparent; background-position: 100% 100%; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; color: var(--ink); }
h1 { font-size: clamp(44px, 6vw, 72px); line-height: 1; margin: 12px 0 10px; }
h2 { font-size: 30px; line-height: 1.1; margin: 0 0 20px; }
h3 { font-size: 34px; line-height: 1.1; margin: 6px 0 8px; }
h4 { font: 500 12px/1.4 var(--sans); color: var(--muted); margin: 18px 0 4px; letter-spacing: .01em; }
small { color: var(--muted); font-size: 13px; margin-left: 8px; }
.muted { color: var(--muted); }
.grow { flex: 1; min-width: 0; }
.sub { color: var(--ink-2); margin: 0; font-size: 17px; max-width: 60ch; }
.eyebrow { font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: .02em; }
.meta { color: var(--muted); font-size: 13px; margin-top: 18px; display: flex; gap: 4px 20px; flex-wrap: wrap; align-items: center; }
.head { margin-bottom: 40px; }

/* Tabs */
.tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--line); margin-bottom: 48px; overflow-x: auto; position: sticky; top: 0; background: var(--bg); z-index: 4; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { font: 500 15px var(--sans); background: none; border: 0; border-radius: 0; padding: 14px 0 12px; color: var(--muted); cursor: pointer; white-space: nowrap; position: relative; transition: color .2s; }
.tabs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected=true] { color: var(--ink); }
.tabs button[aria-selected=true]::after { transform: scaleX(1); }
.tabpanel { animation: fade .35s var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Status: Punkt + Wort statt farbiger Pille */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--planned); flex: none; }
.badge.st-laeuft::before, .badge.vs-aktuell::before, .badge.vs-final::before, .badge.fx-fix::before { background: var(--ink); }
.badge.st-faellig::before, .badge.vs-gesendet::before, .badge.vs-feedback::before { background: var(--light); box-shadow: inset 0 0 0 1px var(--line-strong); }
.badge.st-ueberfaellig { color: var(--brand); }
.badge.st-ueberfaellig::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--brand); }
.badge.bfh::before, .badge.fx-pruefen::before, .badge.vs-entwurf::before { background: var(--warm); border-radius: 1px; transform: rotate(45deg) scale(.85); }
.badge.muted, .badge.vs-ersetzt { color: var(--muted); }

/* Abschnitte: keine Boxen, Haarlinien und Luft */
.block { padding: 28px 0 0; margin: 0 0 56px; border-top: 1px solid var(--line-strong); }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; }
@media (max-width: 800px) { .cols { grid-template-columns: 1fr; } }
.empty { color: var(--muted); font-size: 14px; margin: 0; }
.alert { color: var(--brand); font-size: 14px; margin: 16px 0 0; padding-left: 14px; border-left: 2px solid var(--brand); }
.notice { padding: 80px 20px; text-align: center; color: var(--muted); }
.hint-small { color: var(--muted); font-size: 12px; }

/* Kennzahlen */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 64px; border-top: 1px solid var(--line-strong); }
.kpi { padding: 20px 24px 4px 0; min-width: 0; }
.kpi + .kpi { padding-left: 24px; border-left: 1px solid var(--line); }
.kpi .label { font-size: 12px; font-weight: 500; color: var(--muted); }
.kpi .value { font-family: var(--serif); font-size: 40px; line-height: 1.05; margin: 10px 0 8px; overflow-wrap: anywhere; }
.kpi .hint { font-size: 13px; color: var(--ink-2); }
.kpi.warn .hint { color: var(--brand); }
@media (max-width: 800px) {
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpi:nth-child(3) { padding-left: 0; border-left: 0; }
  .kpi:nth-child(n+3) { border-top: 1px solid var(--line); }
  .kpi .value { font-size: 30px; }
}

ul.list { list-style: none; margin: 0; padding: 0; }
ul.list li { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); }
ul.list li:last-child { border-bottom: 0; }
.nr { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; min-width: 28px; }
.date { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; min-width: 60px; }

/* Arbeitspakete */
.wps { display: grid; gap: 22px; }
.wp-head { display: flex; gap: 14px; align-items: baseline; margin-bottom: 8px; flex-wrap: wrap; }
.wp-head strong { font-weight: 500; }
.wp-head .pct { font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; font-weight: 500; }
.bar { position: relative; height: 4px; background: var(--track); }
.bar > span { display: block; height: 100%; background: var(--ink); transition: width .6s var(--ease); }
.bar > i.soll { position: absolute; top: -5px; width: 1.5px; height: 14px; background: var(--brand); }
.legend { color: var(--muted); font-size: 12px; margin: 20px 0 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.legend span { display: inline-block; width: 14px; height: 4px; margin-left: 12px; }
.legend span:first-child { margin-left: 0; }
.lg-ist { background: var(--ink); } .lg-soll { background: var(--brand); width: 1.5px !important; height: 12px !important; }
.lg-min { background: var(--brand); height: 2px !important; } .lg-now { background: var(--light); height: 10px !important; }
@media (max-width: 640px) {
  .wp-head { display: grid; grid-template-columns: 28px 1fr auto; gap: 2px 8px; }
  .wp-head .muted { grid-column: 2; grid-row: 2; font-size: 12px; }
  .wp-head .pct { grid-column: 3; grid-row: 1; }
}

/* Meetings */
.card.next { background: var(--light); color: var(--schoko); padding: 32px 36px 28px; margin: 0 0 56px; border-radius: var(--r); }
.card.next h3 { color: var(--schoko); font-size: 40px; }
.card.next .eyebrow, .card.next .meta, .card.next h4, .card.next .muted { color: #4a5a6c; }
.card.next .badge { color: var(--schoko); }
.card.next .cols { gap: 0 40px; margin-top: 8px; }
@media (max-width: 640px) { .card.next { padding: 24px 20px; } .card.next h3 { font-size: 30px; } }
@media (max-width: 0px) and (min-width: 1px) { .card.next { background: #2a3a4c; color: var(--ink); } .card.next h3, .card.next .badge { color: var(--ink); } .card.next .eyebrow, .card.next .meta, .card.next h4, .card.next .muted { color: #b9cce0; } }
ol.agenda { margin: 6px 0 0; padding: 0; list-style: none; counter-reset: a; }
ol.agenda li { counter-increment: a; display: flex; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line); }
ol.agenda li::before { content: counter(a, decimal-leading-zero); font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; padding-top: 1px; }
.card.next ol.agenda li { border-color: rgba(64, 37, 20, .12); }
.card.next ol.agenda li::before { color: #4a5a6c; }
.para p { margin: 0; white-space: pre-wrap; }
.review { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
@media (max-width: 760px) { .review { grid-template-columns: 1fr; } }
details.mt { border-bottom: 1px solid var(--line); }
details.mt summary { cursor: pointer; list-style: none; display: flex; gap: 14px; align-items: baseline; padding: 16px 0; transition: color .2s; }
details.mt summary:hover { color: var(--brand); }
details.mt summary::-webkit-details-marker { display: none; }
details.mt summary::after { content: "+"; color: var(--muted); font-size: 18px; line-height: 1; transition: transform .25s var(--ease); }
details.mt[open] summary::after { transform: rotate(45deg); }
details.mt .body { padding: 0 0 24px 74px; }
@media (max-width: 640px) { details.mt .body { padding-left: 0; } }

/* Tabellen */
.table-wrap { overflow-x: auto; }
table.dl { width: 100%; border-collapse: collapse; font-size: 14px; border-top: 1px solid var(--line-strong); }
.block table.dl { border-top: 0; }
table.dl th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 500; padding: 14px 16px 10px 0; border-bottom: 1px solid var(--line); }
table.dl td { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
table.dl td strong { font-weight: 500; }
table.dl td small { display: block; margin: 2px 0 0; }
table.dl td.warn { color: var(--brand); }
table.dl tbody tr { transition: background .2s; }
table.dl tbody tr:not(.hist):hover { background: rgba(196, 226, 255, .25); }
table.dl tr.hist td { padding-top: 0; }
table.dl tr.hist summary { cursor: pointer; color: var(--muted); font-size: 12px; }
table.dl tr.hist ul { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--ink-2); }
table.dl tr.cur td { background: rgba(196, 226, 255, .35); }
table.dl tr:has(+ tr.hist) td { border-bottom: 0; }

/* Gantt */
.g-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12px; color: var(--muted); margin-bottom: 18px; }
.g-legend span { display: inline-flex; gap: 6px; align-items: center; }
.sw { display: inline-block; width: 16px; height: 6px; }
.sw.today { width: 1.5px; height: 12px; background: var(--brand); }
.sw.period.fokus { background: rgba(196, 226, 255, .6); }
.sw.period.frei { background: repeating-linear-gradient(45deg, var(--planned) 0 2px, transparent 2px 4px); }
.c-bfh { color: var(--warm); } .c-meet { color: var(--ink); }
.gantt { overflow-x: auto; font-size: 13px; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); scroll-behavior: smooth; }
.g-row { display: flex; min-height: 30px; border-bottom: 1px solid var(--line); transition: background .15s; }
.g-row:last-child { border-bottom: 0; }
.g-row.g-task:hover { background: rgba(196, 226, 255, .22); }
.g-label { position: sticky; left: 0; z-index: 2; background: var(--bg); width: 300px; min-width: 300px; padding: 6px 16px 6px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }
.g-row.g-task:hover .g-label { color: var(--ink); }
@media (max-width: 640px) { .g-label { width: 150px; min-width: 150px; } }
.g-wp { min-height: 36px; }
.g-wp .g-label { font-weight: 500; color: var(--ink); padding-top: 10px; }
.g-wp .g-label b { font-weight: 500; }
.g-track { position: relative; flex: none; }
.g-bg { position: absolute; inset: 0; pointer-events: none; }
.g-period { position: absolute; top: 0; bottom: 0; }
.g-period.fokus { background: rgba(196, 226, 255, .32); }
.g-period.frei { background: repeating-linear-gradient(45deg, var(--track) 0 2px, transparent 2px 6px); }
.g-today { position: absolute; top: 0; bottom: 0; width: 1.5px; background: var(--brand); }
.g-bar { position: absolute; top: 11px; height: 8px; background: var(--planned); transition: filter .15s; }
.g-row:hover .g-bar { filter: brightness(.92); }
.g-bar.wp { top: 15px; height: 3px; background: var(--track); }
.g-bar.wp > span { display: block; height: 100%; background: var(--ink); }
.g-bar.st-laeuft { background: var(--ink); }
.g-bar.st-faellig { background: var(--light); box-shadow: inset 0 0 0 1px rgba(64, 37, 20, .25); }
.g-bar.st-erledigt { background: repeating-linear-gradient(90deg, var(--planned) 0 3px, transparent 3px 5px); }
.g-bar.st-ueberfaellig { background: transparent; box-shadow: inset 0 0 0 1.5px var(--brand); }
.sw.st-geplant { background: var(--planned); } .sw.st-laeuft { background: var(--ink); }
.sw.st-faellig { background: var(--light); box-shadow: inset 0 0 0 1px rgba(64, 37, 20, .25); }
.sw.st-erledigt { background: repeating-linear-gradient(90deg, var(--planned) 0 3px, transparent 3px 5px); }
.sw.st-ueberfaellig { box-shadow: inset 0 0 0 1.5px var(--brand); }
.g-ms, .g-meet { position: absolute; top: 4px; transform: translateX(-50%); font-size: 13px; line-height: 22px; }
.g-ms.bfh { color: var(--warm); font-size: 15px; } .g-ms.eigen { color: var(--ink); } .g-ms.done { opacity: .35; }
.g-meet { color: var(--ink); font-size: 10px; } .g-meet.erledigt { opacity: .35; } .g-meet.abgesagt { opacity: .15; }
.g-head { font-size: 11px; color: var(--muted); min-height: 28px; }
.g-month, .g-kw { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding-left: 6px; white-space: nowrap; }
.g-month { border-left: 1px solid var(--line-strong); font-weight: 500; color: var(--ink); font-size: 12px; }
.g-kw { justify-content: center; padding: 0; font-variant-numeric: tabular-nums; }
.g-kw.now { color: var(--brand); font-weight: 600; }
.g-capv { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.g-capv.zero { color: var(--muted); opacity: .5; }

/* Kapazität */
.chart { overflow-x: auto; }
.chart svg { display: block; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .ax { fill: var(--muted); font-size: 10px; font-family: var(--sans); }
.chart .cb { fill: var(--taupe); opacity: .55; transition: opacity .2s; } .chart .cb:hover { opacity: 1; }
.chart .cb.past { opacity: .25; } .chart .cb.now { fill: var(--light); opacity: 1; stroke: var(--schoko); stroke-width: 1; }
.chart .cmin { stroke: var(--brand); stroke-width: 1.5; }

/* Login */
form.login { max-width: 380px; margin: 16vh auto 0; display: grid; gap: 18px; }
form.login h1 { margin: 0; font-size: 56px; } form.login .sub { margin: -8px 0 8px; font-size: 15px; }
form.login input { font-size: 16px; padding: 12px 14px; } form.login button { padding: 12px 14px; }
.login-msg { color: var(--brand); margin: 0; min-height: 1.4em; font-size: 14px; }

/* Buttons & Formulare */
button, .btn { font: 500 14px var(--sans); border-radius: var(--r); padding: 8px 16px; cursor: pointer; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); transition: background .2s, border-color .2s, color .2s, filter .2s; }
.btn { background-image: none; display: inline-block; }
button:hover, .btn:hover { border-color: var(--ink); }
button.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
button.primary:hover { filter: brightness(1.12); }
button.primary:disabled { opacity: .35; cursor: default; filter: none; }
button.ghost { border-color: transparent; color: var(--muted); padding: 4px 8px; }
button.ghost:hover { color: var(--brand); border-color: transparent; }
button.small { font-size: 13px; padding: 5px 12px; }
label.f { display: grid; gap: 4px; font-size: 12px; font-weight: 500; color: var(--muted); }
input, select, textarea { font: 14px var(--sans); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 8px 10px; width: 100%; transition: border-color .2s, box-shadow .2s; }
input:hover, select:hover, textarea:hover { border-color: var(--line-strong); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(196, 226, 255, .7); }
textarea { min-height: 72px; resize: vertical; line-height: 1.5; }

/* Admin */
.toolbar { position: sticky; top: 0; z-index: 6; background: var(--bg); border-bottom: 1px solid var(--line); padding: 12px 32px; }
.toolbar .inner { max-width: 1120px; margin: 0 auto; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.toolbar .state { color: var(--muted); font-size: 13px; margin-right: auto; display: inline-flex; gap: 8px; align-items: center; }
.toolbar .state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--planned); }
.toolbar .state.dirty { color: var(--brand); }
.toolbar .state.dirty::before { background: var(--brand); }
.admin .wrap { padding-top: 32px; }
.admin .tabs { top: 59px; }
.row { padding: 14px 0; border-bottom: 1px solid var(--line); display: grid; gap: 10px; align-items: end; }
.row .full { grid-column: 1 / -1; }
.r-task { grid-template-columns: 56px 1fr 150px 150px 130px 32px; }
.r-ms { grid-template-columns: 56px 1fr 150px 140px 130px 32px; }
.r-period { grid-template-columns: 1fr 150px 150px 130px 32px; }
.r-cap { grid-template-columns: 70px 120px 1fr 70px 70px 1.4fr; padding: 6px 0; }
.r-ver { grid-template-columns: 80px 150px 160px 1fr 32px; }
.r-meta { grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .row { grid-template-columns: 1fr 1fr !important; } .row > label:has(input[type=text]), .row > label:has(input[type=url]), .row > label:has(textarea) { grid-column: 1 / -1; } }
.group { padding: 24px 0 8px; margin-bottom: 32px; border-top: 1px solid var(--line-strong); }
.group-head { display: grid; grid-template-columns: 56px 1fr 32px; gap: 10px; align-items: end; margin-bottom: 4px; }
.group-head input[type=text] { font-family: var(--serif); font-size: 22px; padding: 4px 10px; }
.add { margin: 12px 0 8px; }
.help { color: var(--ink-2); font-size: 14px; margin: 0 0 28px; max-width: 70ch; }
.mt-edit { border-top: 1px solid var(--line-strong); margin: 0; }
.mt-edit:last-child { border-bottom: 1px solid var(--line-strong); }
.mt-edit > summary { padding: 18px 0; cursor: pointer; display: flex; gap: 14px; align-items: baseline; list-style: none; }
.mt-edit > summary::-webkit-details-marker { display: none; }
.mt-edit > summary::after { content: "+"; color: var(--muted); font-size: 18px; transition: transform .25s var(--ease); }
.mt-edit[open] > summary::after { transform: rotate(45deg); }
.mt-edit > summary strong { font-weight: 500; }
.mt-edit .inner { padding: 0 0 28px; display: grid; gap: 14px; }
.mt-grid { display: grid; grid-template-columns: 150px 100px 1fr 1fr 140px 140px; gap: 10px; }
@media (max-width: 760px) { .mt-grid { grid-template-columns: 1fr 1fr; } }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
@media (max-width: 760px) { .two { grid-template-columns: 1fr; } }
.agenda-edit { display: grid; gap: 6px; }
.agenda-edit .ai { display: grid; grid-template-columns: 26px 1fr 32px; gap: 6px; align-items: center; }
.agenda-edit .ai span { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; }

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


/* ==========================================================================
   Festgelegt (Okt. 2026): Bricolage Grotesque + Inter Tight, farbige Module
   Mindestgrösse 14px, keine Eyebrows, Module reagieren auf Hover & Klick
   ========================================================================== */
:root {
  --serif: "Bricolage Grotesque", var(--sans);
  --bg: #e9f2fb;                 /* Morgenblau, aufgehellt – ersetzt Beige */
  --surface: #fdfcfa;
  --line: rgba(64, 37, 20, .12);
  --shadow: 0 1px 2px rgba(64, 37, 20, .06), 0 8px 24px -12px rgba(64, 37, 20, .18);
  --shadow-hi: 0 2px 4px rgba(64, 37, 20, .08), 0 18px 40px -16px rgba(64, 37, 20, .32);
}
@media (max-width: 0px) and (min-width: 1px) { :root { --bg: #14100d; --surface: #221a14; } }
body { font-size: 16px; font-weight: 400; }
h1, h2, h3, .kpi .value, .rb-big { font-weight: 700; font-variation-settings: "opsz" 96; letter-spacing: -.035em; }
h1 { font-size: clamp(44px, 6vw, 76px); line-height: .98; margin-top: 0; }
h2 { font-size: 24px; letter-spacing: -.02em; }
h3 { font-size: 30px; }
h4 { font: 600 14px/1.4 var(--sans); color: var(--muted); text-transform: none; letter-spacing: 0; margin: 20px 0 6px; }
small, .nr, .date, .meta, .badge, .help, .legend, .hint-small, table.dl th, label.f, .g-legend { font-size: 14px; }
.g-row, .gantt { font-size: 14px; }
.g-kw, .g-capv, .g-head, .chart .ax { font-size: 12px; }   /* Achsen dürfen kleiner sein */
table.dl th { text-transform: none; letter-spacing: 0; font-weight: 600; }
.badge { font-weight: 600; }
.sub { font-size: 19px; }
.meta { color: var(--ink-2); margin-top: 22px; }
body::before { display: none; }
.head { margin-bottom: 36px; }

/* Module: Grundform + Interaktion */
.ribbon, .kpis, .tabpanel .block, .card.next, table.dl, .gantt {
  border-radius: 14px; box-shadow: var(--shadow); border: 0;
}
.tabpanel .block { background: var(--surface); padding: 30px 34px 34px; margin-bottom: 18px; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.tabpanel .block:hover { transform: translateY(-2px); box-shadow: var(--shadow-hi); }
.tabpanel .cols { gap: 18px; }
.tabpanel .cols > .block { margin-bottom: 18px; }
.tabpanel > div > * { animation: rise .55s var(--ease) both; }
.tabpanel > div > *:nth-child(2) { animation-delay: .05s; } .tabpanel > div > *:nth-child(3) { animation-delay: .1s; }
.tabpanel > div > *:nth-child(4) { animation-delay: .15s; } .tabpanel > div > *:nth-child(5) { animation-delay: .2s; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Signatur: Thesis-Band */
.ribbon { position: relative; background: var(--schoko); color: var(--papier); border-radius: 6px; padding: 26px 32px 18px; margin-bottom: 16px; }
.rb-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 40px; }
.rb-big { font: 700 40px/1 var(--serif); }
.rb-cap { font-size: 15px; color: var(--kaschmir); margin-right: 28px; }
.rb-track { position: relative; height: 10px; background: rgba(244, 240, 232, .12); border-radius: 5px; }
.rb-elapsed { position: absolute; left: 0; top: 0; bottom: 0; background: var(--papier); border-radius: 5px 0 0 5px; opacity: .9; transform-origin: left; animation: grow 1s var(--ease) both; }
@keyframes grow { from { transform: scaleX(0); } }
.rb-period { position: absolute; top: 0; bottom: 0; }
.rb-period.fokus { background: rgba(196, 226, 255, .45); }
.rb-period.frei { background: repeating-linear-gradient(45deg, rgba(244, 240, 232, .25) 0 2px, transparent 2px 5px); }
.rb-ms { position: absolute; top: 50%; width: 16px; height: 16px; transform: translate(-50%, -50%); cursor: default; z-index: 2; }
.rb-ms::before { content: ""; position: absolute; inset: 4px; transform: rotate(45deg); background: var(--schoko); box-shadow: 0 0 0 1.5px var(--papier); }
.rb-ms.bfh::before { background: var(--kaschmir); box-shadow: 0 0 0 1.5px var(--schoko); }
.rb-ms.past { opacity: .5; }
.rb-ms::after { content: attr(data-tip); position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); white-space: nowrap; z-index: 5; font: 500 14px var(--sans); background: var(--papier); color: var(--schoko); padding: 4px 8px; border-radius: 4px; opacity: 0; pointer-events: none; transition: opacity .15s; }
.rb-ms:hover::after, .rb-ms:focus::after { opacity: 1; }
.rb-today { position: absolute; top: -8px; bottom: -8px; width: 2px; background: var(--morgenblau); transform: translateX(-1px); z-index: 3; }
.rb-today b { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font: 600 13px var(--sans); color: var(--morgenblau); }
.rb-months { position: relative; height: 20px; margin-top: 12px; font-size: 13px; color: rgba(244, 240, 232, .65); }
.rb-months span { position: absolute; transform: translateX(-2px); }
@media (max-width: 640px) { .ribbon { padding: 22px 18px 14px; } .rb-big { font-size: 26px; } .rb-cap { margin-right: 14px; } .rb-months span:nth-child(even) { display: none; } }


/* Farbige Module */
.ribbon { background: var(--schoko); }
.kpis { background: var(--bordeaux); color: var(--papier); padding: 6px 12px 12px; gap: 0; }
.kpis .kpi { color: var(--papier); }
.kpi .label { font: 600 15px var(--sans); color: rgba(244, 240, 232, .78); text-transform: none; letter-spacing: 0; }
.kpi .hint { color: rgba(244, 240, 232, .78); font-size: 14px; }
.kpi.warn .hint { color: var(--morgenblau); }
.kpi .value { font-size: 30px; color: var(--papier); display: block; }
.kpi { display: flex; flex-direction: column; position: relative; text-align: left; padding: 20px 22px 18px !important; border: 0 !important; border-radius: 10px; font: inherit; color: inherit; background: transparent; }
.kpi + .kpi { border-left: 0 !important; }
.kpi.link { cursor: pointer; transition: background .25s var(--ease); }
.kpi.link:hover, .kpi.link:focus-visible { background: rgba(244, 240, 232, .1); }
.kpi .arrow { position: absolute; top: 18px; right: 18px; color: var(--papier); opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .25s var(--ease); }
.kpi.link:hover .arrow, .kpi.link:focus-visible .arrow { opacity: 1; transform: none; }
.tabpanel .block.m-week { background: var(--surface); }
.tabpanel .block.m-soon { background: var(--kaschmir); color: var(--schoko); }
.m-soon .badge, .m-soon small, .m-soon .date { color: var(--schoko); }
.m-soon ul.list li { border-color: rgba(64, 37, 20, .18); }
.tabpanel .block.m-wp { background: var(--surface); }
.tabpanel .block.m-review { background: var(--taupe); color: var(--papier); }
.m-review h2, .m-review p { color: var(--papier); }
.m-review h4 { color: rgba(244, 240, 232, .8); }
.card.next { background: var(--morgenblau); box-shadow: var(--shadow), inset 0 0 0 1px rgba(64, 37, 20, .08); }
.next-label { margin: 0; font: 600 15px var(--sans); color: #3d4f63; }

/* Klickbare Listenzeilen */
ul.list li.click { cursor: pointer; margin: 0 -12px; padding: 12px; border-radius: 8px; transition: background .2s; }
ul.list li.click:hover, ul.list li.click:focus-visible { background: rgba(196, 226, 255, .45); }
.m-soon ul.list li.click:hover, .m-soon ul.list li.click:focus-visible { background: rgba(253, 252, 250, .35); }

/* Arbeitspakete aufklappbar */
details.wp > summary { list-style: none; cursor: pointer; margin: 0 -14px; padding: 10px 14px 12px; border-radius: 10px; transition: background .2s; }
details.wp > summary::-webkit-details-marker { display: none; }
details.wp > summary:hover { background: rgba(196, 226, 255, .4); }
details.wp > summary .wp-head::after { content: "+"; color: var(--muted); font-size: 20px; line-height: 1; transition: transform .25s var(--ease); }
details.wp[open] > summary .wp-head::after { transform: rotate(45deg); }
.wps { gap: 6px; }
ul.wp-tasks { list-style: none; margin: 8px 0 14px; padding: 0 0 0 42px; animation: rise .35s var(--ease); }
ul.wp-tasks li { display: flex; gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.bar { height: 6px; border-radius: 3px; }
.bar > span { border-radius: 3px; }

/* Tabellen & Gantt als Module */
table.dl { background: var(--surface); overflow: hidden; }
table.dl th:first-child, table.dl td:first-child { padding-left: 26px; }
.gantt { background: var(--surface); }
.gantt .g-label { background: var(--surface); padding-left: 18px; }
.g-wp, .g-wp .g-label { background: #f3ecdf; }

/* Tabs als Segmente */
.tabs { background: transparent; gap: 6px; border-bottom: 0; margin-bottom: 28px; padding: 8px 0; }
.tabs button { padding: 9px 16px; border-radius: 99px; font-size: 16px; color: var(--ink-2); transition: background .2s, color .2s; }
.tabs button::after { display: none; }
.tabs button:hover { background: rgba(64, 37, 20, .07); }
.tabs button[aria-selected=true] { background: var(--schoko); color: var(--papier); }
.tabs { position: sticky; top: 0; backdrop-filter: blur(10px); background: color-mix(in srgb, var(--bg) 82%, transparent); }

@media (max-width: 800px) { .kpis { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .tabpanel .block { padding: 22px 18px 24px; }
  .kpi .value { font-size: 22px; }
  ul.wp-tasks { padding-left: 0; }
}
@media (max-width: 0px) and (min-width: 1px) {
  .tabpanel .block.m-soon { background: #6b5133; color: var(--papier); }
  .m-soon .badge, .m-soon small, .m-soon .date { color: var(--papier); }
  .tabpanel .block.m-review { background: #4b4334; }
  .card.next { background: #2a3a4c; }
  .next-label { color: #b9cce0; }
  .g-wp, .g-wp .g-label { background: #2c2119; }
}
@media (prefers-reduced-motion: reduce) { .tabpanel .block:hover { transform: none; } }
.kpis { margin-bottom: 18px; } .ribbon { margin-bottom: 18px; }

/* ==========================================================================
   Zeitplan neu: Werkzeugleiste, aufklappbare Pakete, Detail-Panel
   ========================================================================== */
.gx-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.seg { display: inline-flex; background: var(--surface); border-radius: 99px; padding: 3px; box-shadow: var(--shadow); }
.seg button { border: 0; border-radius: 99px; padding: 6px 14px; font-size: 14px; color: var(--ink-2); }
.seg button.on { background: var(--schoko); color: var(--papier); }
.gx-bar > button.small { border-radius: 99px; background: var(--surface); border: 0; box-shadow: var(--shadow); padding: 8px 14px; font-size: 14px; }
.gx-bar > button.small:hover { background: var(--morgenblau); }
.gx-main { position: relative; }

.gantt { font-size: 15px; }
.g-row { min-height: 38px; }
.g-label { width: 320px; min-width: 320px; padding: 8px 14px 8px 18px; display: flex; align-items: center; }
.g-tl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 28px; color: var(--ink-2); }
.g-wpbtn { all: unset; cursor: pointer; display: flex; align-items: center; gap: 8px; width: 100%; font-weight: 600; color: var(--ink); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.g-wpbtn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.g-wpbtn b { font-weight: 700; color: var(--muted); }
.g-wpbtn .chev { display: inline-block; width: 18px; text-align: center; font-size: 20px; line-height: 1; color: var(--muted); transition: transform .25s var(--ease); }
.g-wp.open .chev { transform: rotate(90deg); }
.g-pct { margin-left: auto; font-weight: 500; color: var(--muted); font-size: 14px; padding-left: 8px; }
.g-wp { min-height: 44px; cursor: pointer; }
.g-wp:hover, .g-wp:hover .g-label { background: #ebe1d0; }
.g-meetrow { cursor: default; }
.g-head { min-height: 50px; background: var(--surface); position: sticky; top: 0; z-index: 3; }
.g-head .g-label { background: var(--surface); }
.g-month { top: 0; bottom: 24px; font-size: 14px; font-weight: 600; text-transform: capitalize; border-left: 1px solid var(--line-strong); }
.g-kw { top: 26px; bottom: 0; font-size: 12px; color: var(--muted); }
.g-kw.now { color: var(--papier); background: var(--bordeaux); border-radius: 99px; height: 20px; top: 27px; width: 26px !important; margin-left: 2px; }
.g-todaytag { position: absolute; top: 4px; transform: translateX(-50%); font-size: 12px; font-weight: 700; color: var(--papier); background: var(--bordeaux); padding: 1px 8px; border-radius: 99px; z-index: 2; }
.g-today { width: 2px; background: var(--bordeaux); opacity: .9; }

.g-bar { all: unset; position: absolute; top: 11px; height: 16px; border-radius: 8px; background: var(--planned); cursor: pointer; transition: transform .15s var(--ease), box-shadow .15s; box-sizing: border-box; display: flex; align-items: center; justify-content: flex-end; }
.g-bar > span { font-size: 12px; font-weight: 600; padding: 0 8px; color: var(--schoko); white-space: nowrap; }
.g-bar:hover, .g-bar:focus-visible { transform: scaleY(1.25); box-shadow: 0 4px 12px -4px rgba(64, 37, 20, .4); }
.g-bar:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.g-bar.wp { top: 17px; height: 10px; border-radius: 5px; background: rgba(64, 37, 20, .14); overflow: hidden; justify-content: flex-start; }
.g-bar.wp > span { display: block; height: 100%; padding: 0; background: var(--schoko); }
.g-bar.wp:hover { transform: none; box-shadow: none; }
.g-bar.st-laeuft { background: var(--schoko); } .g-bar.st-laeuft > span { color: var(--papier); }
.g-bar.st-faellig { background: var(--morgenblau); box-shadow: inset 0 0 0 1.5px rgba(64, 37, 20, .3); }
.g-bar.st-erledigt { background: var(--kaschmir); opacity: .6; }
.g-bar.st-ueberfaellig { background: rgba(108, 37, 39, .12); box-shadow: inset 0 0 0 2px var(--bordeaux); }
.g-bar.st-ueberfaellig > span { color: var(--bordeaux); }
.sw { width: 20px; height: 10px; border-radius: 5px; }
.sw.st-geplant { background: var(--planned); } .sw.st-laeuft { background: var(--schoko); }
.sw.st-faellig { background: var(--morgenblau); box-shadow: inset 0 0 0 1.5px rgba(64, 37, 20, .3); }
.sw.st-erledigt { background: var(--kaschmir); opacity: .6; }
.sw.st-ueberfaellig { background: rgba(108, 37, 39, .12); box-shadow: inset 0 0 0 2px var(--bordeaux); }
.sw.ms { width: 10px; height: 10px; border-radius: 1px; transform: rotate(45deg); background: var(--schoko); }
.sw.ms.bfh { background: var(--kaschmir); box-shadow: 0 0 0 1px var(--schoko); }
.sw.meet { width: 10px; height: 10px; border-radius: 50%; background: var(--morgenblau); box-shadow: 0 0 0 2px var(--schoko); }

.g-ms { all: unset; position: absolute; top: 0; bottom: 0; transform: translateX(-7px); display: flex; align-items: center; gap: 8px; cursor: pointer; z-index: 2; }
.g-ms i { width: 12px; height: 12px; transform: rotate(45deg); background: var(--schoko); border-radius: 2px; transition: transform .2s var(--ease); flex: none; }
.g-ms.bfh i { background: var(--kaschmir); box-shadow: 0 0 0 1.5px var(--schoko); }
.g-ms span { font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--ink); background: color-mix(in srgb, var(--surface) 85%, transparent); padding: 1px 6px; border-radius: 4px; }
.g-ms.done { opacity: .45; }
.g-ms:hover i, .g-ms:focus-visible i { transform: rotate(45deg) scale(1.35); }
.g-ms:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.g-meet { all: unset; position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--morgenblau); box-shadow: 0 0 0 2px var(--schoko); transform: translate(-50%, -50%); cursor: pointer; transition: transform .2s var(--ease); }
.g-meet:hover, .g-meet:focus-visible { transform: translate(-50%, -50%) scale(1.4); }
.g-meet.erledigt { background: var(--schoko); opacity: .5; }
.g-meet.abgesagt { opacity: .2; }
.g-period.fokus { background: rgba(196, 226, 255, .5); }

/* Detail-Panel */
.gx-panel { position: absolute; top: 60px; right: 14px; width: min(360px, calc(100% - 28px)); background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-hi), 0 0 0 1px var(--line); padding: 22px 24px; z-index: 5; opacity: 0; transform: translateY(8px) scale(.98); pointer-events: none; transition: opacity .2s, transform .25s var(--ease); }
.gx-panel.on { opacity: 1; transform: none; pointer-events: auto; }
.gx-panel h3 { font-size: 22px; margin: 4px 30px 14px 0; }
.gx-k { font-size: 14px; color: var(--muted); }
.gx-x { position: absolute; top: 12px; right: 12px; border: 0; font-size: 22px; line-height: 1; padding: 4px 10px; color: var(--muted); }
.gx-x:hover { color: var(--ink); background: var(--track); }
.gx-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-bottom: 10px; }
.gx-facts span { display: block; font-size: 14px; color: var(--muted); }
.gx-facts b { font-weight: 600; font-size: 15px; }
.gx-pbar { margin: 6px 0 12px; }
.gx-panel p { margin: 10px 0 0; }
@media (max-width: 640px) { .gx-panel { position: fixed; top: auto; bottom: 12px; right: 12px; left: 12px; width: auto; } .g-label { width: 170px; min-width: 170px; } .g-tl { padding-left: 8px; } .g-ms span { display: none; } }
@media (max-width: 0px) and (min-width: 1px) { .g-wp:hover, .g-wp:hover .g-label { background: #33271d; } }
.gx-main + .g-legend { margin-top: 16px; }

/* ==========================================================================
   Zeitstrahl v3: Farbe pro Arbeitspaket, dickere Balken, markante Meilensteine,
   Ziehen & Bearbeiten im Admin
   ========================================================================== */
.c-bordeaux { --wc: #6c2527; --wt: #e7cfcf; --wi: #fff; }
.c-blau     { --wc: #3f6e9e; --wt: #cfe3f7; --wi: #fff; }
.c-kaschmir { --wc: #b88a57; --wt: #f0e0cb; --wi: #402514; }
.c-schoko   { --wc: #402514; --wt: #dccbbd; --wi: #fff; }
.c-taupe    { --wc: #7f735c; --wt: #e3ddd1; --wi: #fff; }
.c-oliv     { --wc: #5d6b45; --wt: #dde3cf; --wi: #fff; }
.dot { width: 10px; height: 10px; border-radius: 3px; background: var(--wc); flex: none; }

.g-row { min-height: 46px; }
.g-wp { min-height: 50px; }
.g-bar { top: 10px; height: 26px; border-radius: 7px; background: var(--wt); box-shadow: none; }
.g-bar > .g-btxt { font-size: 13px; font-weight: 600; padding: 0 10px; color: var(--wc); pointer-events: none; }
/* Status über Füllung, Farbe über Arbeitspaket */
.g-bar.st-geplant { background: var(--wt); }
.g-bar.st-faellig { background: repeating-linear-gradient(135deg, var(--wt) 0 6px, color-mix(in srgb, var(--wc) 35%, var(--wt)) 6px 12px); box-shadow: inset 0 0 0 2px var(--wc); }
.g-bar.st-laeuft { background: var(--wc); } .g-bar.st-laeuft > .g-btxt { color: var(--wi); }
.g-bar.st-erledigt { background: var(--wc); opacity: .45; } .g-bar.st-erledigt > .g-btxt { color: var(--wi); }
.g-bar.st-ueberfaellig { background: #fff; box-shadow: inset 0 0 0 2.5px #b3261e; } .g-bar.st-ueberfaellig > .g-btxt { color: #b3261e; }
.g-bar.wp { top: 18px; height: 12px; border-radius: 6px; background: var(--wt); }
.g-bar.wp > span { background: var(--wc); }
.g-wp.open .g-bar.wp { opacity: .55; }

.sw { width: 22px; height: 12px; border-radius: 4px; }
.sw.st-geplant { background: #e3ddd1; }
.sw.st-faellig { background: repeating-linear-gradient(135deg, #e3ddd1 0 4px, #c9bfae 4px 8px); box-shadow: inset 0 0 0 2px #7f735c; }
.sw.st-laeuft { background: #7f735c; } .sw.st-erledigt { background: #7f735c; opacity: .45; }
.sw.st-ueberfaellig { background: #fff; box-shadow: inset 0 0 0 2px #b3261e; }

/* Meilensteine: grösser, beschriftet, BFH-Termine mit Linie durch alles */
.g-ms { transform: translateX(-10px); gap: 10px; }
.g-ms i { width: 18px; height: 18px; border-radius: 3px; background: var(--schoko); box-shadow: 0 0 0 3px var(--surface); }
.g-ms.bfh i { background: var(--bordeaux); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--bordeaux); }
.g-ms span { font-size: 14px; font-weight: 700; padding: 3px 10px; border-radius: 6px; background: var(--schoko); color: var(--papier); }
.g-ms.bfh span { background: var(--bordeaux); }
.g-ms.done span { background: var(--track); color: var(--muted); }
.g-msrow.bfh .g-tl { color: var(--bordeaux); font-weight: 600; }
.g-msline { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed rgba(108, 37, 39, .35); }
.g-flag { position: absolute; bottom: 2px; transform: translateX(-50%); color: var(--bordeaux); font-size: 14px; }
.sw.ms { width: 12px; height: 12px; } .sw.ms.bfh { background: var(--bordeaux); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--bordeaux); }
.g-meet { width: 16px; height: 16px; background: var(--morgenblau); box-shadow: 0 0 0 2.5px #3f6e9e; }
.g-meet.erledigt { background: #3f6e9e; opacity: .5; }

/* Heute */
.g-today { width: 3px; background: #b3261e; opacity: 1; }
.g-todaytag, .g-kw.now { background: #b3261e; }

/* Admin: Ziehen */
.gx.edit .g-bar, .gx.edit .g-ms, .gx.edit .g-meet { touch-action: none; cursor: grab; }
.gx.edit .dragging { cursor: grabbing; z-index: 6; box-shadow: 0 10px 24px -8px rgba(64, 37, 20, .5); transform: scaleY(1.08); }
.g-bar .h { position: absolute; top: 0; bottom: 0; width: 10px; cursor: ew-resize; }
.g-bar .h-s { left: 0; border-radius: 7px 0 0 7px; } .g-bar .h-e { right: 0; border-radius: 0 7px 7px 0; }
.g-bar .h::after { content: ""; position: absolute; top: 7px; bottom: 7px; left: 4px; width: 2px; border-radius: 1px; background: currentColor; opacity: 0; transition: opacity .15s; color: var(--wc); }
.g-bar.st-laeuft .h::after, .g-bar.st-erledigt .h::after { color: #fff; }
.g-bar:hover .h::after { opacity: .7; }
.gx-tip { position: fixed; transform: translateX(-50%); background: var(--schoko); color: var(--papier); font-size: 14px; font-weight: 600; padding: 6px 12px; border-radius: 8px; pointer-events: none; opacity: 0; z-index: 50; white-space: nowrap; }
.gx-tip.on { opacity: 1; }
.g-addrow { min-height: 40px; background: var(--surface); }
.g-addrow .g-label { gap: 8px; padding-left: 46px; }
.g-add { border: 1px dashed var(--line-strong); border-radius: 99px; font-size: 14px; padding: 4px 12px; color: var(--ink-2); background: transparent; }
.g-add:hover { border-style: solid; background: var(--morgenblau); }
.gx-form { display: grid; gap: 12px; }
.gx-form .two { gap: 10px; }
.admin .gx-panel { width: min(380px, calc(100% - 28px)); }
/* Kopf mittig */
.head { text-align: center; margin: 0 auto 40px; }
.head .sub { margin: 0 auto; }
.head .meta { justify-content: center; margin-top: 10px; }
.head .meta:first-of-type { margin-top: 22px; }
.head .meta .who { font-weight: 600; color: var(--ink); }
.head .meta.actions { margin-top: 14px; }
.tabs { justify-content: center; }

/* ==========================================================================
   Farbsystem v2: Skalen pro Brandfarbe (50 hell bis 800 dunkel)
   Bordeaux = nur Signal (Heute, Überfällig, BFH). Pakete: Blau, Kaschmir, Oliv, Schoko, Taupe.
   ========================================================================== */
:root {
  --blau-50: #f3f8fe; --blau-100: #e2effc; --blau-200: #c4e2ff; --blau-400: #7eaedc; --blau-600: #3d6b99; --blau-800: #22405e;
  --kasch-50: #fcf7f0; --kasch-100: #f5e8d6; --kasch-200: #e9d0ae; --kasch-400: #d2ab80; --kasch-600: #a6773f; --kasch-800: #6a4822;
  --oliv-50: #f4f6ef; --oliv-100: #e4e9d8; --oliv-200: #cdd6b6; --oliv-400: #94a26e; --oliv-600: #5d6b40; --oliv-800: #384126;
  --schoko-50: #f7f2ee; --schoko-100: #ebe0d7; --schoko-200: #d3c0b0; --schoko-400: #8e6e58; --schoko-600: #402514; --schoko-800: #26160b;
  --taupe-50: #f6f4f0; --taupe-100: #e9e5dc; --taupe-200: #d3ccbc; --taupe-400: #a59a82; --taupe-600: #7f735c; --taupe-800: #514939;
  --bord-50: #fcf2f2; --bord-100: #f5dede; --bord-200: #e6b7b8; --bord-400: #b85a5d; --bord-600: #6c2527; --bord-800: #461618;
  --bg: var(--blau-50);
}
body { background: var(--blau-100) fixed; }
@media (max-width: 0px) and (min-width: 1px) { body { background: var(--bg); } }

.c-blau     { --w50: var(--blau-50);   --w100: var(--blau-100);   --w200: var(--blau-200);   --w400: var(--blau-400);   --wc: var(--blau-600);   --w800: var(--blau-800);   --wi: #fff; }
.c-kaschmir { --w50: var(--kasch-50);  --w100: var(--kasch-100);  --w200: var(--kasch-200);  --w400: var(--kasch-400);  --wc: var(--kasch-600);  --w800: var(--kasch-800);  --wi: #fff; }
.c-oliv     { --w50: var(--oliv-50);   --w100: var(--oliv-100);   --w200: var(--oliv-200);   --w400: var(--oliv-400);   --wc: var(--oliv-600);   --w800: var(--oliv-800);   --wi: #fff; }
.c-schoko   { --w50: var(--schoko-50); --w100: var(--schoko-100); --w200: var(--schoko-200); --w400: var(--schoko-400); --wc: var(--schoko-600); --w800: var(--schoko-800); --wi: #fff; }
.c-taupe    { --w50: var(--taupe-50);  --w100: var(--taupe-100);  --w200: var(--taupe-200);  --w400: var(--taupe-400);  --wc: var(--taupe-600);  --w800: var(--taupe-800);  --wi: #fff; }

/* Zeitstrahl: Paketzeilen in eigener Farbe */
.gantt { background: #fffdfb; }
.gantt .g-label { background: #fffdfb; }
.g-row.g-wp:has(.dot), .g-row.g-wp:has(.dot) .g-label { background: var(--w50); }
.g-row.g-wp { --w50: var(--taupe-50); }
.g-row.g-wp:has(.c-blau) { --w50: var(--blau-100); } .g-row.g-wp:has(.c-kaschmir) { --w50: var(--kasch-100); }
.g-row.g-wp:has(.c-oliv) { --w50: var(--oliv-100); } .g-row.g-wp:has(.c-schoko) { --w50: var(--schoko-100); }
.g-row.g-wp:has(.c-taupe) { --w50: var(--taupe-100); }
.g-wp:hover, .g-wp:hover .g-label { filter: brightness(.97); }
.g-wp:not(:has(.dot)), .g-wp:not(:has(.dot)) .g-label { background: var(--taupe-50); }
.g-head, .g-head .g-label { background: #fffdfb; }
.g-wpbtn { color: var(--schoko-600); }
.dot { width: 12px; height: 12px; border-radius: 4px; background: var(--wc); }

/* Balken: Status als Abstufung der Paketfarbe */
.g-bar { background: var(--w200); }
.g-bar > .g-btxt { color: var(--w800); }
.g-bar.st-geplant { background: var(--w200); }
.g-bar.st-faellig { background: repeating-linear-gradient(135deg, var(--w200) 0 6px, var(--w400) 6px 12px); box-shadow: inset 0 0 0 2px var(--wc); }
.g-bar.st-faellig > .g-btxt { color: var(--w800); }
.g-bar.st-laeuft { background: var(--wc); }
.g-bar.st-laeuft > .g-btxt { color: #fff; }
.g-bar.st-erledigt { background: var(--w400); opacity: .55; } .g-bar.st-erledigt > .g-btxt { color: #fff; }
.g-bar.st-ueberfaellig { background: var(--bord-50); box-shadow: inset 0 0 0 2.5px var(--bord-600); }
.g-bar.st-ueberfaellig > .g-btxt { color: var(--bord-600); }
.g-bar.wp { background: color-mix(in srgb, var(--w200) 70%, #fff); }
.g-bar.wp > span { background: var(--wc); }

/* Signale in Bordeaux */
.g-today { background: var(--bord-600); width: 2px; }
.g-todaytag, .g-kw.now { background: var(--bord-600); }
.g-msline { border-left: 2px dashed color-mix(in srgb, var(--bord-600) 40%, transparent); }
.g-flag { color: var(--bord-600); }
.g-ms i { background: var(--schoko-600); }
.g-ms span { background: var(--schoko-600); }
.g-ms.bfh i { background: var(--bord-600); box-shadow: 0 0 0 3px #fffdfb, 0 0 0 5px var(--bord-600); }
.g-ms.bfh span { background: var(--bord-600); }
.g-msrow.bfh .g-tl { color: var(--bord-600); }
.g-meet { background: var(--blau-200); box-shadow: 0 0 0 2.5px var(--blau-600); }
.g-meet.erledigt { background: var(--blau-600); }
.g-period.fokus { background: color-mix(in srgb, var(--blau-200) 45%, transparent); }
.g-period.frei { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--taupe-200) 70%, transparent) 0 2px, transparent 2px 7px); }

/* Legende passend */
.sw.st-geplant { background: var(--blau-200); box-shadow: none; }
.sw.st-faellig { background: repeating-linear-gradient(135deg, var(--blau-200) 0 4px, var(--blau-400) 4px 8px); box-shadow: inset 0 0 0 2px var(--blau-600); }
.sw.st-laeuft { background: var(--blau-600); opacity: 1; }
.sw.st-erledigt { background: var(--blau-400); opacity: .55; }
.sw.st-ueberfaellig { background: var(--bord-50); box-shadow: inset 0 0 0 2px var(--bord-600); }
.sw.ms.bfh { background: var(--bord-600); box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--bord-600); }
.sw.meet { background: var(--blau-200); box-shadow: 0 0 0 2px var(--blau-600); }

/* Übersicht lebendiger: Module in Abstufungen */
.ribbon { background: var(--schoko-600); }
.rb-elapsed { background: var(--kasch-200); }
.rb-period.fokus { background: color-mix(in srgb, var(--blau-200) 55%, transparent); }
.rb-today { background: var(--blau-200); }
.kpis { background: var(--bord-600); }
.tabpanel .block.m-week { background: #fffdfb; }
.tabpanel .block.m-soon { background: var(--kasch-200); }
.tabpanel .block.m-wp { background: #fffdfb; }
.tabpanel .block.m-review { background: var(--oliv-600); }
.m-review h4 { color: var(--oliv-200); }
.card.next { background: var(--blau-200); }
ul.list li.click:hover { background: var(--blau-100); }
details.wp > summary:hover { background: var(--blau-50); }
.bar { background: var(--taupe-100); }
.bar > span { background: var(--schoko-600); }
.tabs button[aria-selected=true] { background: var(--schoko-600); }
.seg button.on { background: var(--schoko-600); }
.gx-bar > button.small:hover { background: var(--blau-100); }
table.dl tbody tr:not(.hist):hover { background: var(--blau-50); }
.chart .cb { fill: var(--kasch-400); opacity: .8; } .chart .cb.past { opacity: .3; }
.chart .cb.now { fill: var(--bord-600); stroke: none; }
.badge.st-laeuft::before { background: var(--blau-600); }
.badge.st-faellig::before { background: var(--blau-200); box-shadow: inset 0 0 0 1.5px var(--blau-600); }
.badge.bfh::before, .badge.fx-pruefen::before { background: var(--bord-600); }
.badge.vs-entwurf::before { background: var(--kasch-400); }
body { background: var(--blau-50); }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--blau-100); }
.g-legend .sw.st-geplant { background: var(--blau-200) !important; opacity: 1; }

/* Regel: keine Farbverläufe. Flächen immer einfarbig. */
a { background: none; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
body::after { display: none; }
/* Legende aufgeräumt */
.g-legend { display: grid; grid-template-columns: auto auto auto 1fr; gap: 16px 40px; align-items: start; margin-top: 18px; padding: 20px 24px; background: #fffdfb; border-radius: 14px; box-shadow: var(--shadow); font-size: 14px; color: var(--ink-2); }
.lg-group { display: grid; gap: 8px; }
.lg-group h4 { margin: 0 0 2px; color: var(--ink); font-size: 14px; }
.lg-group span { display: flex; align-items: center; gap: 10px; }
.lg-hint { margin: 0; align-self: end; justify-self: end; text-align: right; max-width: 30ch; color: var(--muted); font-size: 14px; }
.g-legend .sw { width: 24px; height: 12px; border-radius: 4px; flex: none; }
.g-legend .sw.ms { width: 12px; height: 12px; margin: 0 6px; border-radius: 2px; transform: rotate(45deg); }
.g-legend .sw.ms.bfh { box-shadow: 0 0 0 2px #fffdfb, 0 0 0 3.5px var(--bord-600); }
.g-legend .sw.meet { width: 14px; height: 14px; border-radius: 50%; margin: 0 5px; }
.g-legend .sw.st-laeuft { background: var(--blau-600) !important; }
.g-legend .sw.period.fokus { background: var(--blau-200); }
.g-legend .sw.period.frei { background: repeating-linear-gradient(45deg, var(--taupe-200) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px var(--taupe-200); }
.gx > .hint-small { display: none; }
@media (max-width: 800px) { .g-legend { grid-template-columns: 1fr 1fr; } .lg-hint { grid-column: 1 / -1; justify-self: start; text-align: left; max-width: none; } }
/* Arbeitspakete als Karten */
.wpc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1000px) { .wpc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .wpc-grid { grid-template-columns: 1fr; } }
.wpc { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 8px; min-height: 196px; padding: 18px 18px 16px; border-radius: 12px; background: var(--w100); color: var(--w800); transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s; }
.wpc:hover, .wpc:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 30px -18px var(--wc); background: var(--w200); }
.wpc:focus-visible { outline: 2px solid var(--wc); outline-offset: 3px; }
.wpc.now { background: var(--wc); color: #fff; }
.wpc.now:hover { background: var(--w800); }
.wpc.past { opacity: .7; }
.wpc-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.wpc-nr { font: 700 30px/1 var(--serif); letter-spacing: -.03em; }
.wpc-phase { font-size: 14px; font-weight: 600; padding: 3px 10px; border-radius: 99px; background: #fffdfb; color: var(--wc); white-space: nowrap; }
.wpc.now .wpc-phase { background: #fffdfb; color: var(--wc); }
.wpc-title { font: 700 19px/1.2 var(--serif); letter-spacing: -.02em; margin-top: 6px; }
.wpc-dates { font-size: 14px; opacity: .8; }
.wpc-seg { display: flex; gap: 4px; margin-top: auto; padding-top: 10px; }
.wpc-seg i { flex: 1; height: 10px; border-radius: 3px; background: color-mix(in srgb, var(--wc) 22%, #fff); }
.wpc-seg i.s-laeuft { background: var(--wc); }
.wpc-seg i.s-faellig { background: var(--w400); }
.wpc-seg i.s-erledigt { background: var(--w800); }
.wpc-seg i.s-ueberfaellig { background: var(--bord-600); }
.wpc.now .wpc-seg i { background: rgba(255, 255, 255, .28); }
.wpc.now .wpc-seg i.s-faellig { background: rgba(255, 255, 255, .7); }
.wpc.now .wpc-seg i.s-laeuft, .wpc.now .wpc-seg i.s-erledigt { background: #fff; }
.wpc.now .wpc-seg i.s-ueberfaellig { background: var(--bord-200); }
.wpc-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 14px; }
.wpc-foot > span:last-child { font-weight: 700; font-size: 16px; }
.wpc-foot small { margin-left: 6px; font-weight: 500; color: inherit; opacity: .75; font-size: 14px; }
.wpc-foot .behind { color: var(--bord-600); }
.wpc.now .wpc-foot .behind { color: var(--bord-200); }
.tabpanel .block.m-wp:hover { transform: none; }
.wpc-foot > span:last-child { white-space: nowrap; }
/* Arbeitspakete: Liste mit Zeitbalken */
.wpl { display: grid; }
.wpl-row { border-bottom: 1px solid var(--line); }
.wpl-row:last-of-type { border-bottom: 0; }
.wpl-row > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 44px 1fr 92px; gap: 18px; align-items: center; padding: 16px 12px; margin: 0 -12px; border-radius: 10px; transition: background .2s; }
.wpl-row > summary::-webkit-details-marker { display: none; }
.wpl-row > summary:hover { background: var(--w50); }
.wpl-nr { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font: 700 20px var(--serif); background: var(--w100); color: var(--wc); }
.wpl-row.now .wpl-nr { background: var(--wc); color: #fff; }
.wpl-main { display: grid; gap: 8px; min-width: 0; }
.wpl-title { font-weight: 600; font-size: 16px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.wpl-phase { font-size: 14px; font-weight: 500; color: var(--muted); }
.wpl-row.now .wpl-phase { color: var(--wc); font-weight: 600; }
.wpl-track { position: relative; height: 14px; background: var(--taupe-50); border-radius: 4px; }
.wpl-span { position: absolute; top: 0; bottom: 0; display: flex; gap: 2px; }
.wpl-span i { flex: 1; border-radius: 3px; background: var(--w200); }
.wpl-span i.s-faellig { background: var(--w400); }
.wpl-span i.s-laeuft { background: var(--wc); }
.wpl-span i.s-erledigt { background: var(--w800); }
.wpl-span i.s-ueberfaellig { background: var(--bord-600); }
.wpl-today { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--bord-600); border-radius: 1px; }
.wpl-dates { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--muted); }
.wpl-pct { text-align: right; font: 700 22px/1.1 var(--serif); color: var(--ink); }
.wpl-pct small { display: block; margin: 2px 0 0; font: 500 14px var(--sans); }
.wpl-pct.behind { color: var(--bord-600); }
.wpl-row ul.wp-tasks { padding-left: 62px; }
@media (max-width: 640px) { .wpl-row > summary { grid-template-columns: 36px 1fr 64px; gap: 12px; } .wpl-nr { width: 34px; height: 34px; font-size: 17px; } .wpl-dates span { display: none; } .wpl-row ul.wp-tasks { padding-left: 0; } }

/* ==========================================================================
   Einheitliches Marker-System: runde Marker mit Icon (Fahne, Sprechblase)
   Status als getöntes Label ohne Punkt. Keine Rauten, keine losen Punkte.
   ========================================================================== */
.mk { width: var(--mk); height: var(--mk); border-radius: 50%; display: inline-grid; place-items: center; flex: none; color: #fff; box-shadow: 0 0 0 2px #fffdfb; transform: none !important; }
.mk svg { display: block; }
.mk-bfh { background: var(--bord-600); }
.mk-eigen { background: var(--schoko-600); }
.mk-meeting { background: var(--blau-600); }
.mk.done { background: var(--taupe-200); color: var(--taupe-600); }
.mk-line { display: flex; gap: 10px; align-items: flex-start; }
.mk-line > .mk { margin-top: 1px; }

/* Status- und Termin-Labels */
.badge { padding: 3px 10px; border-radius: 6px; font-size: 13px; font-weight: 600; background: var(--taupe-100); color: var(--taupe-800); gap: 0; }
.badge::before { display: none !important; }
.badge.st-faellig, .badge.vs-gesendet, .badge.vs-feedback { background: var(--blau-100); color: var(--blau-800); }
.badge.st-laeuft, .badge.vs-aktuell, .badge.vs-final, .badge.fx-fix { background: var(--blau-600); color: #fff; }
.badge.st-ueberfaellig { background: var(--bord-100); color: var(--bord-600); }
.badge.bfh, .badge.fx-pruefen { background: var(--bord-100); color: var(--bord-600); }
.badge.vs-entwurf { background: var(--kasch-100); color: var(--kasch-800); }
.badge.st-erledigt, .badge.muted, .badge.vs-ersetzt { background: var(--taupe-100); color: var(--taupe-600); }
.m-soon .badge { background: #fffdfb; color: var(--schoko-600); }
.m-soon .badge.fx-pruefen, .m-soon .badge.bfh { color: var(--bord-600); }
.card.next .badge { background: #fffdfb; }

/* Thesis-Band */
.rb-ms { width: auto; height: auto; transform: translate(-50%, -50%); }
.rb-ms::before { display: none; }
.rb-ms .mk { box-shadow: 0 0 0 2px var(--schoko-600); }
.rb-ms .mk.done { background: var(--schoko-400); color: var(--schoko-100); }
.rb-ms.past { opacity: 1; }
.rb-ms::after { bottom: 26px; }

/* Zeitstrahl */
.g-ms { transform: translateX(-12px); }
.g-ms i { display: none; }
.g-ms .mk { box-shadow: 0 0 0 3px #fffdfb; transition: transform .2s var(--ease); }
.g-ms:hover .mk, .g-ms:focus-visible .mk { transform: scale(1.15) !important; }
.g-ms.bfh .mk { box-shadow: 0 0 0 3px #fffdfb, 0 0 0 4.5px var(--bord-200); }
.g-ms.done { opacity: 1; }
.g-ms.done span { background: var(--taupe-100); color: var(--taupe-600); }
.g-meet { width: auto; height: auto; background: none !important; box-shadow: none !important; border-radius: 50%; opacity: 1 !important; }
.g-meet .mk { box-shadow: 0 0 0 3px #fffdfb; transition: transform .2s var(--ease); }
.g-meet:hover .mk, .g-meet:focus-visible .mk { transform: scale(1.15) !important; }
.g-flag { bottom: 4px; line-height: 0; }
.g-flag .mk { box-shadow: 0 0 0 2px #fffdfb; }
.lg-group span .mk { margin: 0 1px; }
.g-ms .mk { padding: 0; border-radius: 50%; }
.g-ms .mk-bfh { background: var(--bord-600); } .g-ms .mk-eigen { background: var(--schoko-600); }
.g-ms .mk.done { background: var(--taupe-200); color: var(--taupe-600); }
.rb-ms .mk-eigen { background: var(--kasch-400); color: var(--schoko-600); }
.rb-ms .mk-bfh { background: var(--bord-400); }
.rb-ms .mk.done { background: var(--schoko-400); color: var(--schoko-100); }
/* Terminbuchung & Protokoll */
.booking { padding-bottom: 20px; }
.booking-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.booking iframe { width: 100%; height: 640px; border: 0; border-radius: 10px; background: #fff; }
@media (max-width: 640px) { .booking iframe { height: 720px; } }
.booking-empty p { margin: 0; color: var(--ink-2); max-width: 60ch; }
.proto { margin-top: 18px; }
.proto-btn { border-radius: 99px; padding: 7px 16px; font-size: 14px; background: #fffdfb; border: 1px solid var(--line-strong); }
.proto-btn:hover { border-color: var(--ink); }
.proto-btn[aria-expanded=true] { background: var(--schoko-600); color: #fff; border-color: var(--schoko-600); }
.proto-body { margin-top: 14px; padding: 18px 20px; background: #fffdfb; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); max-height: 480px; overflow: auto; animation: rise .3s var(--ease); }
.proto-body p { margin: 0; white-space: pre-wrap; line-height: 1.65; }
.card.next .proto-btn { background: #fffdfb; }
.card.next .proto-btn[aria-expanded=true] { background: var(--schoko-600); color: #fff; }
a.btn-book { text-decoration: none; background: var(--schoko-600); color: #fff; padding: 9px 18px; border-radius: 99px; font-weight: 600; font-size: 15px; } a.btn-book:hover { background: var(--schoko-800); }
/* Marker exakt mittig, Zeilen vertikal zentriert */
.mk { display: inline-flex; align-items: center; justify-content: center; line-height: 0; vertical-align: middle; }
.mk svg { margin: 0; }
.lg-group span, .mk-line, ul.list li, .g-ms, .wpl-title, .meta, .booking-head { align-items: center; }
.mk-line > .mk { margin-top: 0; }

/* ==========================================================================
   Status-Farben v3: ein eigener Farbton pro Status (unabhängig vom Paket)
   Geplant Taupe, Sollte laufen Kaschmir, In Arbeit Blau, Erledigt Oliv, Überfällig Bordeaux
   ========================================================================== */
:root {
  --st-geplant: var(--taupe-200);      --st-geplant-ink: var(--taupe-800);
  --st-faellig: var(--kasch-400);      --st-faellig-ink: var(--kasch-800);
  --st-laeuft: var(--blau-600);        --st-laeuft-ink: #fff;
  --st-erledigt: var(--oliv-600);      --st-erledigt-ink: #fff;
  --st-ueberfaellig: var(--bord-600);  --st-ueberfaellig-ink: #fff;
}
/* Zeitstrahl-Balken */
.g-bar.st-geplant { background: var(--st-geplant); box-shadow: none; opacity: 1; }
.g-bar.st-faellig { background: var(--st-faellig); box-shadow: none; opacity: 1; }
.g-bar.st-laeuft { background: var(--st-laeuft); box-shadow: none; opacity: 1; }
.g-bar.st-erledigt { background: var(--st-erledigt); box-shadow: none; opacity: 1; }
.g-bar.st-ueberfaellig { background: var(--st-ueberfaellig); box-shadow: none; opacity: 1; }
.g-bar.st-geplant > .g-btxt { color: var(--st-geplant-ink); }
.g-bar.st-faellig > .g-btxt { color: var(--st-faellig-ink); }
.g-bar.st-laeuft > .g-btxt, .g-bar.st-erledigt > .g-btxt, .g-bar.st-ueberfaellig > .g-btxt { color: #fff; }
/* Paketzugehörigkeit bleibt über Farbstreifen links am Balken sichtbar */
.g-task .g-bar { border-left: 4px solid var(--wc); }
/* Legende */
.g-legend .sw.st-geplant { background: var(--st-geplant) !important; box-shadow: none; opacity: 1; }
.g-legend .sw.st-faellig { background: var(--st-faellig) !important; box-shadow: none; opacity: 1; }
.g-legend .sw.st-laeuft { background: var(--st-laeuft) !important; box-shadow: none; opacity: 1; }
.g-legend .sw.st-erledigt { background: var(--st-erledigt) !important; box-shadow: none; opacity: 1; }
.g-legend .sw.st-ueberfaellig { background: var(--st-ueberfaellig) !important; box-shadow: none; opacity: 1; }
/* Arbeitspaket-Liste: Segmente */
.wpl-span i, .wpl-span i.s-geplant { background: var(--st-geplant); }
.wpl-span i.s-faellig { background: var(--st-faellig); }
.wpl-span i.s-laeuft { background: var(--st-laeuft); }
.wpl-span i.s-erledigt { background: var(--st-erledigt); }
.wpl-span i.s-ueberfaellig { background: var(--st-ueberfaellig); }
/* Status-Labels */
.badge.st-geplant { background: var(--taupe-100); color: var(--taupe-800); }
.badge.st-faellig { background: var(--kasch-100); color: var(--kasch-800); }
.badge.st-laeuft { background: var(--blau-600); color: #fff; }
.badge.st-erledigt { background: var(--oliv-100); color: var(--oliv-800); }
.badge.st-ueberfaellig { background: var(--bord-600); color: #fff; }

/* ==========================================================================
   Kontrast v4: Weiss und Schwarz als klare Pole
   Geplant = Weiss mit Kontur, In Arbeit = Schwarz, Sollte laufen = Kaschmir,
   Erledigt = Oliv, Überfällig = Bordeaux. Blau bleibt für Meetings.
   ========================================================================== */
:root {
  --schwarz: #17110c; --weiss: #ffffff;
  --st-geplant: var(--weiss);         --st-geplant-ink: var(--schwarz);
  --st-faellig: var(--kasch-400);     --st-faellig-ink: var(--schwarz);
  --st-laeuft: var(--schwarz);        --st-laeuft-ink: var(--weiss);
  --st-erledigt: var(--oliv-600);     --st-erledigt-ink: var(--weiss);
  --st-ueberfaellig: var(--bord-600); --st-ueberfaellig-ink: var(--weiss);
}
.g-bar.st-geplant, .g-legend .sw.st-geplant, .wpl-span i.s-geplant { box-shadow: inset 0 0 0 1.5px var(--schwarz) !important; }
.wpl-span i.s-geplant { background: var(--weiss); }
.g-bar.st-geplant > .g-btxt, .g-bar.st-faellig > .g-btxt { color: var(--schwarz); }
.badge.st-geplant { background: var(--weiss); color: var(--schwarz); box-shadow: inset 0 0 0 1px var(--schwarz); }
.badge.st-laeuft { background: var(--schwarz); color: var(--weiss); }
.badge.st-faellig { background: var(--kasch-400); color: var(--schwarz); }
.badge.st-erledigt { background: var(--oliv-600); color: var(--weiss); }
.gantt, .gantt .g-label, .g-head, .g-head .g-label, .tabpanel .block.m-wp, .tabpanel .block.m-week, .g-legend { background: var(--weiss); }
.tabs button[aria-selected=true], .seg button.on { background: var(--schwarz); }
.wpl-today, .g-today { background: var(--bord-600); }

/* Arbeitspakete: Zahl ohne Kasten, klares Aufklappen */
.wpl-row > summary { grid-template-columns: 56px 1fr 92px 130px; }
.wpl-nr { width: auto; height: auto; background: none !important; border-radius: 0; font: 700 34px/1 var(--serif); letter-spacing: -.04em; color: var(--wc) !important; }
.wpl-row.now .wpl-nr { color: var(--wc) !important; }
.wpl-track { background: #f1eee8; height: 16px; }
.wpl-span { gap: 3px; }
.wpl-span i { border-radius: 3px; }
.wpl-more { justify-self: end; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 99px; font-size: 14px; font-weight: 600; color: var(--schwarz); box-shadow: inset 0 0 0 1.5px var(--line-strong); transition: background .2s, box-shadow .2s; white-space: nowrap; }
.wpl-row > summary:hover .wpl-more { box-shadow: inset 0 0 0 1.5px var(--schwarz); }
.wpl-more .ic { transition: transform .25s var(--ease); }
.wpl-row[open] .wpl-more { background: var(--schwarz); color: var(--weiss); box-shadow: none; }
.wpl-row[open] .wpl-more .ic { transform: rotate(180deg); }
.wpl-row > summary:hover { background: #faf8f4; }
.wpl-row ul.wp-tasks { padding-left: 74px; margin-top: 0; }
@media (max-width: 760px) { .wpl-row > summary { grid-template-columns: 40px 1fr 70px; } .wpl-more { grid-column: 2 / -1; justify-self: start; } .wpl-nr { font-size: 26px; } }

/* Icons in Überschriften & Protokoll */
.ic { display: inline-flex; flex: none; }
.h4i { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.h4i .ic { color: var(--muted); }
.card.next .h4i, .card.next .h4i .ic { color: #2f4458; }
.m-review .h4i, .m-review .h4i .ic { color: var(--oliv-100); }
.proto-btn { display: inline-flex; align-items: center; gap: 8px; }
.proto-btn .ic:last-child { transition: transform .25s var(--ease); }
.proto-btn[aria-expanded=true] .ic:last-child { transform: rotate(180deg); }
.proto-btn[aria-expanded=true] { background: var(--schwarz) !important; border-color: var(--schwarz); color: var(--weiss); }

/* ==========================================================================
   Brand v5: Bordeaux = Primärfarbe (Marke, Navigation, Nummern, Aktiv-Zustände)
   Signalrot = nur «Überfällig». Schwarz = In Arbeit, Weiss = Fläche.
   ========================================================================== */
:root {
  --signal: #d2412c; --signal-50: #fdeeeb; --signal-100: #f9d6cf;
}
/* Navigation & Schalter */

/* Arbeitspakete in Bordeaux */
.wpl-nr { color: var(--bord-600) !important; }
.wpl-row:not(.now) .wpl-nr { color: var(--bord-200) !important; }
.wpl-phase { color: var(--muted); }
.wpl-phase.on { background: var(--bord-600); color: #fff !important; padding: 2px 10px; border-radius: 99px; font-size: 13px; font-weight: 600; }
.wpl-track { background: var(--bord-50); }
.wpl-today { background: var(--bord-600); width: 3px; }
.wpl-pct { color: var(--bord-600); }
.wpl-row > summary:hover { background: var(--bord-50); }
.wpl-row > summary:hover .wpl-more { box-shadow: inset 0 0 0 1.5px var(--bord-600); color: var(--bord-600); }
.wpl-row[open] .wpl-more { color: #fff; }

/* Überfällig = Signalrot (nicht mehr Bordeaux) */
.wpl-pct.behind { color: var(--signal); }
.wpl-row.now .wpl-nr, .wpl-row .wpl-nr { color: var(--bord-600) !important; } .wpl-row:not(.now) .wpl-nr { color: var(--bord-200) !important; }

/* Arbeitspakete: Überfällig hier Signalrot, weil Bordeaux dort Akzent ist */
.wpl-span i.s-ueberfaellig { background: var(--signal); }
.wpl-row[open] .wpl-more { background: var(--bord-600); color: #fff; }

/* Tabs mobil: von links scrollbar, nichts abgeschnitten */
.tabs { justify-content: safe center; }
@media (max-width: 640px) {
  .tabs { justify-content: flex-start; gap: 4px; margin: 0 -16px 24px; padding: 8px 16px; scroll-padding: 16px; scroll-snap-type: x proximity; }
  .tabs button { padding: 8px 14px; font-size: 15px; scroll-snap-align: start; flex: none; }
}
@media (max-width: 640px) { .rb-ms .mk { width: 15px; height: 15px; box-shadow: 0 0 0 1.5px var(--schoko-600); } .rb-ms .mk svg { width: 10px; height: 10px; } .rb-top .rb-cap:nth-of-type(2) { flex-basis: 100%; order: 9; } }
.booking { padding: 24px 32px; }
.booking h2 { margin: 0 0 4px; }
.booking-sub { margin: 0; color: var(--ink-2); }
.booking-head { align-items: center; }

/* ==========================================================================
   Admin: Aufgabenliste als To-do-Liste (Notion-artig)
   ========================================================================== */
.todo { max-width: 1040px; margin: 0 auto; }
.todo-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.todo-bar .muted { font-size: 14px; }
.todo-group { margin-bottom: 34px; }
.todo-head { display: flex; align-items: center; gap: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--schwarz); margin-bottom: 4px; }
.todo-wnr { font: 700 26px/1 var(--serif); color: var(--bord-600); letter-spacing: -.03em; }
.todo-wtitle { flex: 1; border: 0; background: transparent; font: 700 22px var(--serif); letter-spacing: -.02em; padding: 4px 6px; border-radius: 6px; color: var(--schwarz); }
.todo-wtitle:hover { background: #f1eee8; }
.todo-wtitle:focus { background: #fff; box-shadow: 0 0 0 2px var(--blau-200); }
.todo-count { font-size: 14px; font-weight: 600; color: var(--muted); }
.todo-list { list-style: none; margin: 0; padding: 0; }
.todo-item { display: grid; grid-template-columns: 26px 34px 1fr 128px 22px 128px 118px 28px; gap: 8px; align-items: center; padding: 6px 6px; border-radius: 8px; border-bottom: 1px solid var(--line); transition: background .15s; }
.todo-item:hover { background: #f7f4ef; }
.todo-item:focus-within { background: #fff; box-shadow: 0 0 0 1px var(--line-strong); }
.todo-check { all: unset; cursor: pointer; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--taupe-400); display: grid; place-items: center; transition: background .15s, box-shadow .15s; }
.todo-check:hover { box-shadow: inset 0 0 0 2px var(--schwarz); }
.todo-check:focus-visible { outline: 2px solid var(--bord-600); outline-offset: 2px; }
.todo-item.s-erledigt .todo-check { background: var(--oliv-600); box-shadow: none; }
.todo-item.s-erledigt .todo-check::after { content: ""; width: 9px; height: 5px; border: solid #fff; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.todo-item.s-laeuft .todo-check { background: var(--schwarz); box-shadow: inset 0 0 0 2px var(--schwarz), inset 0 0 0 5px #fff; }
.todo-nr { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.todo-main { display: grid; min-width: 0; }
.todo-title, .todo-note { border: 0; background: transparent; width: 100%; padding: 3px 6px; border-radius: 5px; }
.todo-title { font: 500 16px var(--sans); color: var(--schwarz); }
.todo-note { font-size: 14px; color: var(--muted); height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; transition: height .15s, opacity .15s; }
.todo-note:not(:placeholder-shown), .todo-item:hover .todo-note, .todo-item:focus-within .todo-note { height: 24px; opacity: 1; }
.todo-title:focus, .todo-note:focus { outline: none; background: var(--blau-50); }
.todo-item.s-erledigt .todo-title { text-decoration: line-through; color: var(--muted); }
.todo-date input { border: 0; background: transparent; font-size: 14px; color: var(--ink-2); padding: 4px 6px; border-radius: 5px; width: 100%; }
.todo-date input:hover { background: #efebe4; }
.todo-date.late input { color: var(--signal); font-weight: 600; }
.todo-arrow { font-size: 13px; color: var(--muted); text-align: center; }
.todo-status { border: 0; border-radius: 99px; font-size: 13px; font-weight: 600; padding: 5px 10px; cursor: pointer; appearance: none; text-align: center; }
.todo-status.s-offen { background: #fff; box-shadow: inset 0 0 0 1px var(--schwarz); color: var(--schwarz); }
.todo-status.s-laeuft { background: var(--schwarz); color: #fff; }
.todo-status.s-erledigt { background: var(--oliv-600); color: #fff; }
.todo-del { opacity: 0; transition: opacity .15s; }
.todo-item:hover .todo-del, .todo-item:focus-within .todo-del { opacity: 1; }
.todo-add { all: unset; cursor: pointer; display: block; padding: 8px 12px; margin-top: 4px; border-radius: 8px; color: var(--muted); font-size: 15px; }
.todo-add:hover { background: #f1eee8; color: var(--schwarz); }
.todo-add.big { border: 1.5px dashed var(--line-strong); text-align: center; padding: 14px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 800px) {
  .todo-item { grid-template-columns: 26px 1fr 28px; grid-template-areas: "c m d" ". s1 s1" ". s2 s2"; }
  .todo-nr, .todo-arrow { display: none; }
  .todo-item > .todo-check { grid-area: c; } .todo-main { grid-area: m; } .todo-del { grid-area: d; opacity: 1; }
  .todo-item > .todo-date:nth-of-type(1) { grid-area: s1; }
  .todo-item > .todo-status { grid-column: 2 / -1; justify-self: start; }
}
/* Tooltips im Thesis-Band */
.rb-ms::after { display: none !important; }
.rb-ms:hover, .rb-ms:focus-visible { z-index: 20; }
.rb-ms:focus-visible { outline: none; }
.rb-ms:focus-visible .mk { outline: 2px solid var(--blau-200); outline-offset: 2px; }
.rb-tip { position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translate(-50%, 6px); display: grid; gap: 2px; min-width: 180px; max-width: 260px; padding: 10px 14px; border-radius: 10px; background: #fff; color: var(--schwarz); box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .45); text-align: left; white-space: normal; opacity: 0; pointer-events: none; transition: opacity .15s, transform .2s var(--ease); z-index: 30; }
.rb-tip::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -7px; border: 7px solid transparent; border-top-color: #fff; }
.rb-tip b { font: 600 15px/1.3 var(--sans); }
.rb-tip-k { font-size: 13px; color: var(--muted); }
.rb-ms:hover .rb-tip, .rb-ms:focus-visible .rb-tip { opacity: 1; transform: translate(-50%, 0); }
.rb-ms:first-of-type .rb-tip { left: 0; transform: translate(-12px, 6px); } .rb-ms:first-of-type .rb-tip::after { left: 18px; }
.rb-ms:last-of-type .rb-tip { left: auto; right: 0; transform: translate(12px, 6px); } .rb-ms:last-of-type .rb-tip::after { left: auto; right: 11px; }
.rb-ms:first-of-type:hover .rb-tip { transform: translate(-12px, 0); } .rb-ms:last-of-type:hover .rb-tip { transform: translate(12px, 0); }
.rb-today { z-index: 3; }
.rb-tip { bottom: auto; top: calc(100% + 12px); transform: translate(-50%, -6px); }
.rb-tip::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #fff; }
.rb-ms:first-of-type .rb-tip { transform: translate(-12px, -6px); } .rb-ms:last-of-type .rb-tip { transform: translate(12px, -6px); }
/* Seite nur vertikal scrollbar; nur der Zeitstrahl (.gantt) scrollt seitlich */
html, body { overflow-x: clip; max-width: 100%; }
.chart, .table-wrap { max-width: 100%; }
img, svg, iframe { max-width: 100%; }
.tabs { overscroll-behavior-x: contain; }
.gantt { overscroll-behavior-x: contain; }
@media (max-width: 640px) { .tabs { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } }
/* Zeitstrahl: volle Fensterbreite + Vollbild */
.tabpanel .gx { width: calc(100vw - 48px); max-width: 1800px; position: relative; left: 50%; transform: translateX(-50%); }
@media (max-width: 640px) { .tabpanel .gx { width: calc(100vw - 24px); } }
.gx:fullscreen, .gx.pseudo-fs { background: var(--blau-50); padding: 20px 28px; overflow: auto; width: 100vw; max-width: none; left: 0; transform: none; }
.gx.pseudo-fs { position: fixed; inset: 0; z-index: 100; height: 100vh; }
.gx:fullscreen .gantt, .gx.pseudo-fs .gantt { max-height: calc(100vh - 230px); overflow: auto; }
.gx:fullscreen .g-head, .gx.pseudo-fs .g-head { position: sticky; top: 0; z-index: 4; }
.gx-fs { margin-left: auto; }

/* Zeitstrahl ruhiger: Paketzeilen neutral, Farbe nur noch im Punkt und Paketbalken */
.g-row.g-wp, .g-row.g-wp .g-label,
.g-row.g-wp:has(.dot), .g-row.g-wp:has(.dot) .g-label { background: #f7f5f1 !important; }
.g-row.g-wp:hover, .g-row.g-wp:hover .g-label { background: #efebe4 !important; filter: none; }
.g-bar.wp { background: color-mix(in srgb, var(--wc) 22%, #fff); }
.g-bar.wp > span { background: var(--wc); }
.g-row.g-wp:not(:has(.dot)), .g-row.g-wp:not(:has(.dot)) .g-label { background: #fff !important; }

/* Werkzeugleiste klar anders als die Haupt-Tabs: flach, klein, Kontur statt schwarzer Fläche */
.gx-bar { gap: 8px; padding: 6px; background: #fff; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 16px; }
.gx-bar .seg { background: transparent; box-shadow: none; padding: 0; border-left: 1px solid var(--line); padding-left: 8px; border-radius: 0; }
.gx-bar .seg button { font-size: 14px; padding: 6px 12px; border-radius: 8px; color: var(--ink-2); font-weight: 500; }
.gx-bar .seg button:hover { background: #f3f0ea; }
.gx-bar .seg button.on { background: #f3f0ea; color: var(--schwarz); font-weight: 700; box-shadow: inset 0 -2px 0 var(--bord-600); border-radius: 8px 8px 2px 2px; }
.gx-bar > button.small { box-shadow: none; background: transparent; border-radius: 8px; font-size: 14px; padding: 6px 12px; color: var(--ink-2); font-weight: 500; }
.gx-bar > button.small:hover { background: #f3f0ea; color: var(--schwarz); }

/* Kopf des Zeitstrahls luftiger: drei Ebenen (Monat, KW, Marker) */
.g-head { min-height: 86px; }
.g-head .g-label { align-items: flex-end; padding-bottom: 10px; }
.g-month { top: 6px; bottom: auto; height: 24px; display: flex; align-items: center; padding-left: 8px; }
.g-kw { top: 34px; bottom: auto; height: 22px; }
.g-kw.now { top: 34px; height: 22px; width: 28px !important; margin-left: 1px; }
.g-todaytag { top: 60px; padding: 2px 10px; font-size: 12px; }
.g-flag { top: 60px; bottom: auto; transform: translateX(-50%); }
.g-flag .mk { width: 20px !important; height: 20px !important; }

/* Zeitstrahl: keine freischwebende Scrollbar-Pille, Scrollen per Trackpad/Ziehen bleibt */
.gantt, .gx .gantt { scrollbar-width: none; }
.gantt::-webkit-scrollbar { display: none; }

/* Einheitliche Status: gleiche Farbe + gleiches Icon überall (Chips, Balken, Legende, Admin) */
.badge.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.badge.chip::before { display: none; }
.badge.chip.st-geplant { background: var(--weiss); color: var(--schwarz); box-shadow: inset 0 0 0 1.5px var(--schwarz); }
.badge.chip.st-faellig { background: var(--kasch-400); color: var(--schwarz); }
.badge.chip.st-laeuft { background: var(--schwarz); color: var(--weiss); }
.badge.chip.st-erledigt { background: var(--oliv-600); color: var(--weiss); }
.badge.chip.st-ueberfaellig { background: var(--signal); color: var(--weiss); }
.badge .sti { display: inline-flex; }
.g-bar.st-geplant { background: var(--weiss); box-shadow: inset 0 0 0 1.5px var(--schwarz); }
.g-bar.st-faellig { background: var(--kasch-400); box-shadow: none; } .g-bar.st-faellig > .g-btxt { color: var(--schwarz); }
.g-bar.st-laeuft { background: var(--schwarz); opacity: 1; } .g-bar.st-laeuft > .g-btxt { color: var(--weiss); }
.g-bar.st-erledigt { background: var(--oliv-600); opacity: 1; } .g-bar.st-erledigt > .g-btxt { color: var(--weiss); }
.g-bar.st-ueberfaellig { background: var(--signal); box-shadow: none; } .g-bar.st-ueberfaellig > .g-btxt { color: var(--weiss); }
.g-btxt { display: inline-flex; align-items: center; gap: 5px; }

/* Meetings: geplante und Protokolle nebeneinander */
.mt-split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.mt-split > * { min-width: 0; margin-top: 0; }
@media (max-width: 900px) { .mt-split { grid-template-columns: 1fr; } }

/* Aktiver Tab im Titel-Braun */
.tabs button[aria-selected=true] { background: var(--schoko); color: var(--weiss); }

/* Immer helles Erscheinungsbild, auch wenn das Handy im Dark Mode ist */
:root { color-scheme: light; }

/* Leerer Tooltip unter dem Zeitstrahl nie sichtbar */
.gx-tip:not(.on) { display: none; }

/* Feedback der Betreuung an Deliverables */
tr.fb td { padding-top: 0; }
.fb-list { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; }
.fb-list li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 10px 14px; border-radius: 10px; background: var(--blau-50, #eef5fd); }
.fb-list li p { flex-basis: 100%; margin: 2px 0 0; }
.fb-by { font-weight: 600; }
.fb-list a { color: var(--bordeaux); }
.fb-add summary { cursor: pointer; font-weight: 600; color: var(--ink); padding: 6px 0; }
.fb-form { display: grid; gap: 10px; max-width: 640px; padding: 8px 0 12px; }
.fb-row { display: flex; gap: 12px; flex-wrap: wrap; }
.fb-row .grow { flex: 1; min-width: 200px; }
.fb-form textarea { width: 100%; font: inherit; }
.fb-form .primary { justify-self: start; }

/* Name über dem Titel */
.head-name { font-size: 20px; font-weight: 600; color: var(--schoko); margin: 0 0 12px; }

/* Footer mit Kontakt */
.foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 28px; margin: 96px 0 32px; padding-top: 32px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-2); }
.foot strong { color: var(--schoko); }
.foot a { color: var(--ink-2); }
.foot a:hover { color: var(--bordeaux); }
.foot-icon { display: inline-flex; color: var(--schoko) !important; }

/* Einheitliche Ecken für alle Module auf allen Seiten */
:root { --r-mod: 16px; }
.ribbon, .kpis, .tabpanel .block, .card.next, .table-wrap, table.dl, .gantt, .gx-main, .g-legend, .booking, .chart { border-radius: var(--r-mod) !important; }
.gx-main { overflow: hidden; }

/* Feedback: Upload-Icon in eigener Spalte, Formular im Dialog */
.fb-th, .fb-td { text-align: center; width: 1%; white-space: nowrap; }
.fb-btn { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 99px; border: 1.5px solid var(--schoko); background: transparent; color: var(--schoko); }
.fb-btn:hover { background: var(--schoko); color: var(--weiss); }
.fb-n { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: var(--bordeaux); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.fb-dlg { border: 0; border-radius: 16px; padding: 28px 32px; width: min(560px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); box-shadow: 0 24px 60px rgba(23, 17, 12, .25); }
.fb-dlg::backdrop { background: rgba(23, 17, 12, .4); }
.fb-dlg-head { display: flex; justify-content: space-between; align-items: center; }
.fb-dlg-head h3 { margin: 0; font-size: 24px; }
.fb-x { border: 0; background: transparent; font-size: 18px; padding: 6px 10px; }
.fb-ctx { margin: 6px 0 16px; color: var(--ink-2); }
.fb-dlg .fb-form { max-width: none; padding: 0; }
.fb-drop { position: relative; display: flex; align-items: center; min-height: 56px; padding: 12px 16px; border: 1.5px dashed var(--line-strong); border-radius: 10px; color: var(--ink-2); cursor: pointer; }
.fb-drop:hover { border-color: var(--schoko); }
.fb-file { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.fb-row { flex-direction: column; }

/* Arbeitspakete: 8 klar unterscheidbare Farben, keine Wiederholung */
.c-bord    { --w50: #f8eeee; --w100: #f0dcdc; --w200: #e2b9ba; --w400: #b8676a; --wc: #8e3437; --w800: #4f1a1c; --wi: #fff; }
.c-petrol  { --w50: #eaf4f4; --w100: #d3e8e8; --w200: #a9d1d1; --w400: #4f9a9b; --wc: #2c6e70; --w800: #163c3d; --wi: #fff; }
.c-senf    { --w50: #fbf5e3; --w100: #f5e9c2; --w200: #ecd68d; --w400: #d1aa3a; --wc: #a8821a; --w800: #574309; --wi: #fff; }
.c-flieder { --w50: #f3f0f8; --w100: #e6e0f1; --w200: #cdc1e3; --w400: #9583bd; --wc: #6a5797; --w800: #352a4f; --wi: #fff; }
/* Zeitblöcke der Arbeitspakete höher und kräftiger */
.g-bar.wp { top: 50%; transform: translateY(-50%); height: 24px; border-radius: 8px; background: var(--w200) !important; opacity: 1 !important; overflow: hidden; }
.g-bar.wp:hover { transform: translateY(-50%); }
.g-bar.wp > span { height: 100%; background: var(--wc) !important; }
.g-wp.open .g-bar.wp { opacity: .7 !important; }

/* Deliverables mobil: jede Zeile als kompakte Karte, keine Tabelle */
@media (max-width: 700px) {
  table.dl thead { display: none; }
  table.dl, table.dl tbody { display: block; }
  table.dl tbody tr:not(.fb):not(.hist) { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "t u" "d u" "v s"; gap: 4px 12px; padding: 14px 16px; border-top: 1px solid var(--line); align-items: center; }
  table.dl tbody tr td { display: block; padding: 0; border: 0; }
  table.dl tbody tr td:nth-child(1) { grid-area: t; }
  table.dl tbody tr td:nth-child(2) { grid-area: d; font-size: 14px; color: var(--ink-2); }
  table.dl tbody tr td:nth-child(2) small { display: inline; margin-left: 6px; }
  table.dl tbody tr td:nth-child(3) { grid-area: v; font-size: 14px; }
  table.dl tbody tr td:nth-child(3):has(.muted) { display: none; }
  table.dl tbody tr td:nth-child(4) { grid-area: s; justify-self: end; }
  table.dl tbody tr td.fb-td { grid-area: u; width: auto; }
  table.dl tbody tr.fb, table.dl tbody tr.hist { display: block; padding: 0 16px 12px; }
  table.dl tbody tr.fb td, table.dl tbody tr.hist td { display: block; padding: 0; border: 0; }
  .table-wrap { overflow: visible; }
}
@media (max-width: 700px) {
  table.dl { min-width: 0 !important; width: 100% !important; }
  table.dl tbody tr:not(.fb):not(.hist) { grid-template-columns: minmax(0, 1fr) 44px; grid-template-areas: "t u" "d u" "v v" "s s"; padding: 16px 18px; }
  table.dl tbody tr td { padding: 0 !important; width: auto !important; text-align: left !important; }
  table.dl tbody tr td:nth-child(3):has(.muted) { display: none; }
  table.dl tbody tr td:nth-child(4) { justify-self: start; margin-top: 6px; }
  table.dl tbody tr td.fb-td { justify-self: end; }
}

/* ===== Admin: alle Bereiche im Stil der Aufgabenliste ===== */
.todo-wtitle.ro { flex: 1; padding: 4px 0; }
.todo-wtitle.ro:hover { background: transparent; }
.ed-nr { border: 0; background: transparent; width: 100%; padding: 3px 4px; border-radius: 5px; font-variant-numeric: tabular-nums; }
.ed-nr:focus { outline: none; background: var(--blau-50); }
/* Spalten je Bereich */
.todo-item.ed-ms { grid-template-columns: 26px 46px 1fr 128px 150px 28px; }
.todo-item.ed-period { grid-template-columns: 26px 1fr 128px 22px 128px 130px 28px; }
.todo-item.ed-mt-row { grid-template-columns: 26px 24px 1fr 128px 92px 130px 28px; }
.todo-item.ed-ver { grid-template-columns: 56px 1fr 128px 150px 28px; }
.todo-item.ed-cap { grid-template-columns: 56px 90px 80px 80px 1fr; }
.ed-cap-head { display: grid; grid-template-columns: 146px 80px 80px 1fr; gap: 8px; padding: 6px 6px 2px 12px; font-size: 13px; font-weight: 600; color: var(--muted); }
.ed-cap-head span:first-child { padding-left: 0; }
.ed-num { border: 0; background: transparent; width: 100%; padding: 4px 6px; border-radius: 5px; font-size: 15px; font-variant-numeric: tabular-nums; }
.ed-num:hover { background: #efebe4; } .ed-num:focus { outline: none; background: var(--blau-50); }
.ed-wk { font-size: 14px; color: var(--ink-2); }
.ed-capnote, .ed-capnote:placeholder-shown { height: 24px !important; opacity: 1 !important; }
/* Pills: gleiche Farben wie überall */
.todo-status.k-bfh { background: var(--bord-600); color: #fff; }
.todo-status.k-eigen { background: var(--schoko-600, var(--schoko)); color: #fff; }
.todo-status.k-fokus { background: var(--blau-100); color: var(--schwarz); }
.todo-status.k-frei { background: #fff; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink-2); }
.todo-status.fx-fix { background: var(--schwarz); color: #fff; }
.todo-status.fx-pruefen { background: var(--kasch-400); color: var(--schwarz); }
.todo-status.fx-vorschlag { background: #fff; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink-2); }
.todo-status.vs-entwurf { background: #fff; box-shadow: inset 0 0 0 1px var(--schwarz); color: var(--schwarz); }
.todo-status.vs-gesendet { background: var(--kasch-400); color: var(--schwarz); }
.todo-status.vs-feedback { background: var(--blau-600); color: #fff; }
.todo-status.vs-aktuell { background: var(--schwarz); color: #fff; }
.todo-status.vs-final { background: var(--oliv-600); color: #fff; }
.todo-status.vs-ersetzt { background: #efebe4; color: var(--muted); }
.ed-dot { width: 12px; height: 12px; border-radius: 3px; justify-self: center; }
.ed-dot.k-fokus { background: var(--blau-200); } .ed-dot.k-frei { background: repeating-linear-gradient(135deg, #d8d0c2 0 2px, transparent 2px 4px); box-shadow: inset 0 0 0 1px #c9bfae; }
.ed-due { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--muted); }
.ed-due .todo-date input { width: 136px; }
.todo-item.late .todo-title { color: var(--signal); }
/* Eigenschaften (Allgemein) */
.ed-prop { display: grid; grid-template-columns: 200px 1fr; gap: 8px; align-items: center; padding: 6px; border-bottom: 1px solid var(--line); border-radius: 8px; }
.ed-prop:hover { background: #f7f4ef; }
.ed-key { font-size: 14px; color: var(--muted); padding-left: 6px; }
/* Meetings aufklappbar */
.ed-mt { border-bottom: 1px solid var(--line); }
.ed-mt > .todo-item { border-bottom: 0; }
.ed-chev { all: unset; cursor: pointer; width: 24px; height: 24px; display: grid; place-items: center; font-size: 20px; color: var(--muted); border-radius: 5px; transition: transform .15s; }
.ed-chev:hover { background: #efebe4; color: var(--schwarz); }
.ed-mt.open .ed-chev { transform: rotate(90deg); }
.ed-detail { padding: 8px 40px 24px 66px; }
.ed-detail h4 { font: 700 17px var(--sans); margin: 14px 0 6px; color: var(--schwarz); }
.ed-detail h4.ed-sep { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.ed-detail h5 { font: 600 14px var(--sans); margin: 10px 0 2px; color: var(--muted); }
.ed-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 32px; }
.ed-agenda { margin: 0; padding-left: 22px; }
.ed-agenda li { padding: 1px 0; }
.ed-agenda li::marker { color: var(--muted); font-size: 14px; }
.ed-area { width: 100%; border: 0; background: transparent; resize: none; font: 15px/1.5 var(--sans); color: var(--schwarz); padding: 4px 6px; border-radius: 6px; overflow: hidden; }
.ed-area:hover { background: #f7f4ef; } .ed-area:focus { outline: none; background: var(--blau-50); }
/* Versionen + Feedback */
.ed-ver-wrap { border-bottom: 1px solid var(--line); }
.ed-ver-wrap > .todo-item { border-bottom: 0; }
.ed-fb { margin: 0 34px 10px 64px; }
.ed-fb li button { margin-left: auto; }
@media (max-width: 760px) {
  .todo-item.ed-ms, .todo-item.ed-period, .todo-item.ed-mt-row, .todo-item.ed-ver { grid-template-columns: 26px 1fr 28px; grid-template-areas: none; }
  .todo-item.ed-ms > *, .todo-item.ed-period > *, .todo-item.ed-mt-row > *, .todo-item.ed-ver > * { grid-area: auto !important; }
  .todo-item.ed-ms > .todo-date, .todo-item.ed-ms > .todo-status, .todo-item.ed-period > .todo-date, .todo-item.ed-period > .todo-status,
  .todo-item.ed-mt-row > .todo-date, .todo-item.ed-mt-row > .todo-status, .todo-item.ed-ver > .todo-date, .todo-item.ed-ver > .todo-status { grid-column: 2 / -1; justify-self: start; }
  .ed-nr, .ed-chev + .todo-main ~ .todo-arrow { display: none; }
  .ed-prop { grid-template-columns: 1fr; gap: 0; }
  .ed-cols { grid-template-columns: 1fr; }
  .ed-detail { padding: 8px 6px 20px; }
  .ed-fb { margin: 0 0 10px; }
  .todo-item.ed-cap { grid-template-columns: 44px 70px 56px 56px 1fr; }
  .ed-cap-head { grid-template-columns: 122px 56px 56px 1fr; }
}
.todo-head:hover .todo-del, .todo-head:focus-within .todo-del { opacity: 1; }

/* Aktuelle Version als Dokument-Icon, Feedback vorhanden = gefüllter Kreis */
.doc-cell { display: inline-flex; align-items: center; gap: 8px; }
.doc-cell small { font-size: 14px; color: var(--ink-2); font-weight: 600; }
.doc-ic { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 99px; border: 1.5px solid currentColor; color: #c9c1b4; }
.doc-ic.on { color: var(--schoko); }
.doc-ic.on:hover { background: var(--schoko); color: var(--weiss); border-color: var(--schoko); }
.fb-btn.has { background: var(--oliv-600); border-color: var(--oliv-600); color: #fff; }
.fb-btn.has:hover { background: var(--oliv-800, #3c4a2a); border-color: var(--oliv-800, #3c4a2a); }
@media (max-width: 700px) { table.dl tbody tr td:nth-child(3) { display: block !important; } table.dl tbody tr:not(.fb):not(.hist) { grid-template-areas: "t u" "d u" "s v"; } table.dl tbody tr td:nth-child(3) { justify-self: end; } }

/* Zeiträume: Fokus, Puffer, Abwesend */
.g-period.puffer { background: color-mix(in srgb, var(--kasch-200, #ecd9c0) 45%, transparent); }
.g-legend .sw.period.puffer, .sw.period.puffer { background: var(--kasch-200, #ecd9c0); }
.rb-period.puffer { background: rgba(210, 171, 128, .35); }
.todo-status.k-puffer { background: var(--kasch-200, #ecd9c0); color: var(--schwarz); }
.ed-dot.k-puffer { background: var(--kasch-200, #ecd9c0); }
.ed-dl.done .todo-head .todo-check { background: var(--oliv-600); box-shadow: none; }
.ed-dl.done .todo-head .todo-check::after { content: ""; width: 9px; height: 5px; border: solid #fff; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.ed-dl.done .todo-wtitle { color: var(--muted); text-decoration: line-through; }

/* Meetings: kein Plus/Kreuz am Zeilenende */
details.mt summary::after { content: none !important; display: none !important; }

/* Protokoll als Overlay (Hover, Fokus oder Klick) */
.proto { position: relative; display: inline-block; }
.proto-pop { position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; width: min(680px, calc(100vw - 32px)); max-height: 70vh; overflow: auto;
  background: #fff; color: var(--schwarz); border-radius: 16px; padding: 22px 28px 26px; box-shadow: 0 24px 60px rgba(23, 17, 12, .22), 0 0 0 1px var(--line);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s; }
.proto:hover .proto-pop, .proto:focus-within .proto-pop, .proto.pinned .proto-pop { opacity: 1; visibility: visible; transform: none; }
.proto-pop-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.proto-pop-head .fb-x { margin-left: auto; }
.proto-btn .lbl { font-weight: 600; }
@media (hover: none) { .proto:hover .proto-pop { opacity: 0; visibility: hidden; } .proto.pinned .proto-pop { opacity: 1; visibility: visible; } }
/* Markdown */
.md { font-size: 16px; line-height: 1.6; }
.md h3, .md h4, .md h5, .md h6 { font: 700 18px/1.3 var(--sans); letter-spacing: -.01em; margin: 18px 0 6px; color: var(--schwarz); }
.md h3 { font-size: 21px; }
.md p { margin: 0 0 10px; }
.md ul, .md ol { margin: 0 0 12px; padding-left: 22px; }
.md li { margin: 3px 0; }
.md code { background: #f1eee8; padding: 1px 5px; border-radius: 4px; font-size: 14px; }
.md a { color: var(--bordeaux); }
/* Checklisten (Ansicht + Markdown) */
.checklist, .md ul.tasks { list-style: none; padding: 0; margin: 4px 0 0; }
.checklist li, .md ul.tasks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; padding: 4px 0; }
.tbox { width: 18px; height: 18px; margin-top: 3px; border-radius: 5px; box-shadow: inset 0 0 0 2px var(--taupe-400, #a89c86); display: grid; place-items: center; }
li.done > .tbox { background: var(--oliv-600); box-shadow: none; }
li.done > .tbox::after { content: ""; width: 8px; height: 4px; border: solid #fff; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
li.done > span:last-child { color: var(--muted); text-decoration: line-through; }
/* Admin: To-do-Checkliste */
.ed-check { list-style: none; margin: 0; padding: 0; }
.ed-check li { display: grid; grid-template-columns: 26px 1fr; gap: 6px; align-items: center; }
.todo-check.sm { width: 18px; height: 18px; border-radius: 5px; }
.ed-check li.done .todo-check { background: var(--oliv-600); box-shadow: none; }
.ed-check li.done .todo-check::after { content: ""; width: 8px; height: 4px; border: solid #fff; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.ed-check li.done .todo-title { text-decoration: line-through; color: var(--muted); }
.ed-mdhint { font-size: 13px; color: var(--muted); margin: 0 0 4px 6px; white-space: pre-wrap; }

/* Termin-Tags klar unterscheidbar (gleiche Logik wie Status-Chips) */
.badge.fx-vorschlag, .badge.fx-pruefen, .badge.fx-fix { padding: 3px 10px; border-radius: 999px; font-weight: 600; }
.badge.fx-vorschlag::before, .badge.fx-pruefen::before, .badge.fx-fix::before { display: none; }
.badge.fx-vorschlag { background: #fff; color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.badge.fx-pruefen { background: var(--kasch-400); color: var(--schwarz); }
.badge.fx-fix { background: var(--schwarz); color: #fff; }
/* Protokolle: Detail einspaltig, damit nichts in schmale Spalten bricht */
.mt-split .review { grid-template-columns: 1fr !important; }
.mt-split details.mt .body { padding-left: 0; }
details.mt > summary { cursor: pointer; }
/* Overlay jetzt am Body, mittig fixiert */
.proto-pop { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -48%) !important; width: min(720px, calc(100vw - 32px)) !important; max-height: 80vh !important; z-index: 1000 !important; opacity: 0; visibility: visible !important; transition: opacity .15s, transform .15s !important; }
.proto-pop.on { opacity: 1 !important; transform: translate(-50%, -50%) !important; }
.proto-pop:not(.on) { pointer-events: none; }