/* ==========================================================================
   Schulentwicklungs-Planer – Stylesheet (helles Design)
   ========================================================================== */

:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #f3f5f8;
  --surface-3: #e9edf2;
  --text: #18212f;
  --text-2: #3b4656;
  --muted: #667085;
  --line: #e4e7ec;
  --line-strong: #d0d5dd;
  --primary: #2f5bd3;
  --primary-hover: #2449ad;
  --primary-soft: #edf2fd;
  --primary-ring: rgb(47 91 211 / .22);
  --ok: #167245;
  --ok-soft: #e7f6ee;
  --warn: #8a5600;
  --warn-soft: #fdf4de;
  --warn-line: #f2c96b;
  --bad: #b42318;
  --bad-soft: #fdeceb;
  --accent: #f0a400;
  --radius: 10px;
  --radius-sm: 7px;
  --shadow-sm: 0 1px 2px rgb(16 24 40 / .05);
  --shadow: 0 1px 3px rgb(16 24 40 / .07), 0 1px 2px rgb(16 24 40 / .04);
  --shadow-lg: 0 12px 32px rgb(16 24 40 / .16);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sidebar-w: 252px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: .9375rem; line-height: 1.55;
  color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); text-underline-offset: 2px; }
a:hover { color: var(--primary-hover); }
:focus-visible { outline: 3px solid var(--primary-ring); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3 { line-height: 1.25; margin: 0 0 .6em; color: var(--text); letter-spacing: -.01em; }
h1 { font-size: 1.6rem; font-weight: 700; }
h2 { font-size: 1.12rem; font-weight: 650; }
h3 { font-size: .98rem; font-weight: 650; }
p { margin: 0 0 .8em; }
small { font-size: .82em; }
code, .mono { font-family: var(--mono); font-size: .88em; }
code { background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; padding: 0 .3em; }

.icon { width: 1.15rem; height: 1.15rem; flex: none; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: .5rem; background: var(--surface); padding: .5rem 1rem; z-index: 100; border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.skip-link:focus { left: .5rem; }
/* Sprungziele (z. B. #kommentare) nicht unter der festen Kopfleiste verstecken */
[id] { scroll-margin-top: 4.5rem; }
.muted { color: var(--muted); }
.lead { color: var(--muted); max-width: 62rem; margin: -.25rem 0 1.25rem; font-size: .98rem; }
.hint { color: var(--muted); display: block; font-size: .8rem; margin-top: .25rem; font-weight: 400; }
.ok { color: var(--ok); } .warn { color: var(--warn); } .bad { color: var(--bad); }
.center { text-align: center; }

/* ---------- App-Rahmen: Seitenleiste + Inhalt ---------- */
.app-shell { min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: 40;
  display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--line);
}
.sidebar-brand {
  display: flex; align-items: center; gap: .65rem; padding: 1rem 1.1rem .9rem; text-decoration: none; color: var(--text);
  border-bottom: 1px solid var(--line);
}
.brand-mark { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 9px; background: var(--primary); color: #fff; flex: none; }
.brand-mark .icon { width: 1.25rem; height: 1.25rem; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.brand-text strong { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-text small { color: var(--muted); font-size: .75rem; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: .6rem .7rem; }
.nav-section + .nav-section { margin-top: .75rem; }
.nav-heading { margin: 0 0 .25rem; padding: 0 .6rem; font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.sidebar ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.nav-link {
  display: flex; align-items: center; gap: .65rem; padding: .38rem .6rem; border-radius: var(--radius-sm);
  color: var(--text-2); text-decoration: none; font-size: .89rem; font-weight: 500;
}
.nav-link .icon { color: var(--muted); }
.nav-link:hover { background: var(--surface-2); color: var(--text); }
.nav-link[aria-current="page"] { background: var(--primary-soft); color: var(--primary); font-weight: 650; }
.nav-link[aria-current="page"] .icon { color: var(--primary); }
.nav-label { flex: 1; min-width: 0; }
.nav-badge {
  min-width: 1.35rem; padding: 0 .35rem; border-radius: 999px; background: var(--accent); color: #2a1d00;
  font-size: .7rem; font-weight: 800; text-align: center; line-height: 1.35rem;
}
.sidebar-foot { border-top: 1px solid var(--line); padding: .55rem .7rem; }
.user-box { display: flex; align-items: center; gap: .4rem; padding: .1rem .2rem; }
.user-box .avatar { margin-right: .15rem; }
.user-name { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.user-name strong { font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-name small { color: var(--muted); font-size: .74rem; }
.icon-btn {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--radius-sm);
  border: 0; background: transparent; color: var(--muted); cursor: pointer; text-decoration: none;
}
.icon-btn:hover, .icon-btn.is-active { background: var(--surface-2); color: var(--text); }

.app-main { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: .75rem;
  height: 3.25rem; padding: 0 2rem; background: rgb(245 246 248 / .9); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar-toggle, .topbar-brand { display: none; }
.topbar-brand { font-weight: 700; color: var(--text); text-decoration: none; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.nav-online { display: flex; align-items: center; gap: .45rem; }
.online-label { font-size: .75rem; color: var(--muted); font-weight: 600; }
.avatar-row { list-style: none; margin: 0; padding: 0; display: flex; gap: .2rem; }
.help-link { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 600; text-decoration: none; color: var(--text-2); padding: .35rem .65rem; border-radius: var(--radius-sm); }
.help-link:hover { background: var(--surface-3); color: var(--primary); }

.content { flex: 1; width: 100%; max-width: 1440px; padding: 1.75rem 2rem 3.5rem; }
.site-footer { color: var(--muted); font-size: .78rem; padding: 0 2rem 1.25rem; }
.site-footer p { margin: 0; }
.sidebar-backdrop { position: fixed; inset: 0; background: rgb(16 24 40 / .35); z-index: 35; }

.auth-shell { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(180deg, var(--primary-soft), var(--bg) 60%); }
.auth-main { width: 100%; }
.auth-shell .site-footer { text-align: center; }
.content-narrow { max-width: 30rem; margin: 0 auto; }

@media (max-width: 960px) {
  .sidebar { transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow-lg); }
  .sidebar.is-open { transform: none; }
  .app-main { margin-left: 0; }
  .topbar { padding: 0 1rem; }
  .topbar-toggle, .topbar-brand { display: inline-grid; }
  .help-link span { display: none; }
  .content { padding: 1.25rem 1rem 3rem; }
  .site-footer { padding: 0 1rem 1rem; }
}
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }

/* ---------- Seitenkopf, Abschnitte ---------- */
.breadcrumb { font-size: .82rem; color: var(--muted); margin: 0 0 .4rem; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--primary); }
.page-head, .section-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1rem;
}
.page-head h1, .section-head h1, .section-head h2 { margin: 0; }
.page-head + .lead { margin-top: -.5rem; }
.section-head h2 small, h2 small { font-weight: 500; }
.changed-by { color: var(--muted); font-size: .8rem; margin-left: .5rem; }
p.changed-by { margin: 0 0 .75rem; }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.15rem 1.35rem; margin: 0 0 1.25rem; box-shadow: var(--shadow-sm);
}
.card > h2:first-child { margin-bottom: .8rem; }
.card > summary { margin: 0; }
details.card[open] > summary { margin-bottom: .8rem; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: .8rem; }
.card-head h2 { margin: 0; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 0 1.25rem; align-items: start; }
.btn-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.empty { text-align: center; color: var(--muted); padding: 2rem 1rem; }
.empty strong { display: block; color: var(--text); margin-bottom: .25rem; }

.flash { padding: .7rem 1rem; border-radius: var(--radius-sm); margin: 0 0 1rem; border: 1px solid transparent; font-size: .9rem; }
.flash-ok { background: var(--ok-soft); color: var(--ok); border-color: #b9e3cb; }
.flash-error { background: var(--bad-soft); color: var(--bad); border-color: #f6c5c0; }
.flash-warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }

/* ---------- Formulare ---------- */
label, .label { font-weight: 600; font-size: .85rem; color: var(--text-2); }
input, select, textarea, button { font: inherit; color: inherit; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea {
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: .45rem .65rem; max-width: 100%; min-height: 2.35rem; box-shadow: var(--shadow-sm);
}
input:hover, select:hover, textarea:hover { border-color: #b5bdc9; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); width: 1rem; height: 1rem; }
textarea { width: 100%; resize: vertical; }
input[type="color"] { width: 3.5rem; height: 2.35rem; padding: .15rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); }
input.num { width: 5.5rem; }
select[multiple] { min-width: 14rem; padding: .3rem; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem 1rem .9rem; margin: 0; min-width: 0; }
legend { font-weight: 650; font-size: .88rem; padding: 0 .35rem; color: var(--text); }

.field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 1rem; min-width: 0; }
.field > input, .field > select, .field > textarea { width: 100%; }
.field-check { justify-content: flex-end; }
fieldset.field { display: block; }
fieldset.contents { display: contents; }
fieldset.field > .form-inline:first-of-type, fieldset.field > div[data-show-when-rhythmus] { margin-top: .5rem; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 0 1.25rem; align-items: start; }
.form-grid .field-wide, .form-grid .actions { grid-column: 1 / -1; }
.form-narrow { max-width: 26rem; }
.form-inline { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; margin: .4rem 0; }
.form-inline label { display: flex; flex-direction: column; gap: .25rem; }
.check-inline { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: .4rem; font-weight: 450; margin: .15rem 1.1rem .15rem 0; cursor: pointer; color: var(--text); }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.inline-form { display: inline; }
.filter-bar {
  display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; margin-bottom: 1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem 1rem; box-shadow: var(--shadow-sm);
}
.filter-bar label { display: flex; flex-direction: column; gap: .25rem; font-size: .8rem; }
/* Unsichtbares Spaltenraster für gruppierte Checkboxen (z. B. Lerngruppen je Jahrgang) */
.check-raster { display: grid; grid-template-columns: max-content repeat(var(--spalten, 4), minmax(4.5rem, 1fr)); gap: .2rem 1.25rem; align-items: center; width: max-content; max-width: 100%; }
.check-raster .check-inline { margin: 0; padding: .2rem 0; white-space: nowrap; }
.check-raster-kopf { font-weight: 650; font-size: .88rem; color: var(--text-2); padding-right: .25rem; }
@media (max-width: 640px) {
  .check-raster { grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); column-gap: 1rem; width: auto; }
  .check-raster-kopf { grid-column: 1 / -1; padding-top: .35rem; }
  .check-raster-kopf:empty, .check-raster-rest { display: none; }
}
/* Viele Checkboxen gleichmäßig in Spalten (z. B. Fächer eines Angebots) */
.check-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .15rem 1rem; }
.check-auto .check-inline { margin: 0; padding: .2rem 0; }
.check-inline.is-inaktiv { color: var(--muted); font-style: italic; }
.fach-select { max-height: 12rem; }
.fach-select label.is-inaktiv { color: var(--muted); font-style: italic; }
.fach-select label:has(input:checked) { font-weight: 600; }
.fach-filter { margin-bottom: .5rem; width: 100%; max-width: 22rem; }
.fach-zusammenfassung { margin: .4rem 0 .1rem; }
/* Einstellungen › Fächer */
.faecher-werkzeuge { margin-bottom: .6rem; }
.faecher-tabelle input:not([type="checkbox"]) { padding: .3rem .5rem; font-size: .88rem; }
.faecher-tabelle tr.is-inaktiv input:not([type="checkbox"]) { color: var(--muted); }
.faecher-tabelle tr.is-aktiv td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
.sticky-actions { position: sticky; bottom: 0; background: var(--surface); padding: .75rem 0; margin-top: .5rem; border-top: 1px solid var(--line); display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; z-index: 4; }
.filter-bar .check-inline { padding-bottom: .55rem; }
/* Aufklappmenüs: eigener Pfeil mit Abstand statt des Browser-Markers am Kartenrand */
details > summary { cursor: pointer; font-weight: 600; color: var(--primary); margin: .4rem 0; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
  content: ""; display: inline-block; flex: none; width: .42em; height: .42em; margin: 0 .7em .12em .15em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s ease; vertical-align: middle;
}
details[open] > summary::before { transform: rotate(45deg); margin-bottom: .3em; }
details > summary:hover { color: var(--primary-hover); }
.inline-details { display: inline-block; }
.inline-details[open] { display: block; width: 100%; }
.danger-zone { margin-top: 1.5rem; padding: 1rem 1.25rem; border: 1px solid #f6c5c0; border-radius: var(--radius); background: var(--surface); }
.sitzungen-output { padding-bottom: .55rem; color: var(--primary); font-weight: 600; font-size: .88rem; }
.generator { border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: .4rem .9rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.35rem;
  background: var(--surface); color: var(--text-2); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: .45rem .95rem; font-weight: 600; font-size: .88rem; text-decoration: none; cursor: pointer; line-height: 1.2;
  box-shadow: var(--shadow-sm); white-space: nowrap;
}
.btn:hover { background: var(--surface-2); color: var(--text); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn .icon { width: 1rem; height: 1rem; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
.btn-danger { color: var(--bad); border-color: #f1b8b2; }
.btn-danger:hover { background: var(--bad-soft); color: var(--bad); }
.btn-small { min-height: 1.9rem; padding: .25rem .65rem; font-size: .8rem; }
.btn-ghost { border-color: transparent; box-shadow: none; background: transparent; }
.linklike { background: none; border: 0; padding: 0; color: var(--primary); cursor: pointer; text-decoration: none; font-size: inherit; font-weight: 550; text-align: left; }
.linklike:hover { text-decoration: underline; }
.linklike.danger { color: var(--bad); }

/* ---------- Tabellen ---------- */
.table-wrap {
  overflow-x: auto; margin-bottom: 1.25rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.card .table-wrap, .diff-box .table-wrap { border: 0; box-shadow: none; border-radius: 0; margin-bottom: .75rem; background: transparent; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .6rem .8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
tbody tr:last-child > * { border-bottom: 0; }
thead th { font-size: .73rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--surface-2); white-space: nowrap; }
.card thead th { background: transparent; border-bottom-color: var(--line-strong); }
table.compact th, table.compact td { padding: .38rem .6rem; }
tbody tr:hover { background: #fafbfd; }
td > a strong, td > strong { font-weight: 600; }
.row-actions { white-space: nowrap; text-align: right; }
.row-actions > * + * { margin-left: .75rem; }
.row-actions a { text-decoration: none; font-weight: 550; }
.row-total th, .row-total td { font-weight: 700; border-top: 2px solid var(--line-strong); }
tr.inactive td { color: var(--muted); }
.sort-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
th[aria-sort="ascending"] .sort-btn::after { content: " ▲"; }
th[aria-sort="descending"] .sort-btn::after { content: " ▼"; }

/* ---------- Badges, Chips ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; font-weight: 650; padding: .12rem .5rem;
  border-radius: 999px; background: var(--surface-3); color: var(--text-2); vertical-align: middle; white-space: nowrap; text-decoration: none; line-height: 1.4;
}
a.badge:hover { filter: brightness(.96); }
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-bad { background: var(--bad-soft); color: var(--bad); }
.badge-pflicht { background: var(--primary-soft); color: var(--primary); }
.badge-wahlpflicht { background: #f3ebfc; color: #6b2fa0; }
.badge-freiwillig { background: var(--ok-soft); color: var(--ok); }
.chip-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .75rem; }
.chip {
  display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line); font-size: .82rem; text-decoration: none; color: var(--text); margin: .1rem 0;
}
.chip-small { font-size: .72rem; padding: .05rem .45rem; border-left: 4px solid var(--c, var(--primary)); }
.swatch { display: inline-block; width: .75rem; height: .75rem; border-radius: 3px; background: var(--c); margin-right: .5rem; vertical-align: -.05em; }
.code { font-family: var(--mono); font-size: .8em; color: var(--muted); }
.pct { font-weight: 700; margin-left: .4rem; font-size: .82rem; }
.pct-ok { color: var(--ok); } .pct-warn { color: var(--warn); } .pct-bad { color: var(--bad); }
meter { width: 7rem; height: .7rem; vertical-align: middle; }

dl.meta { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.25rem; margin: 0 0 1rem; }
dl.meta dt { font-weight: 600; color: var(--muted); font-size: .85rem; }
dl.meta dd { margin: 0; }
.prose { max-width: 50rem; margin-bottom: 1rem; }
.bp-list { padding-left: 1.2rem; margin: 0; }
/* Zugeordnete Bildungsplaninhalte als Baum (Steckbrief) */
.bp-tree { list-style: none; margin: 0; padding: 0; }
.bp-tree .bp-tree { padding-left: 1.1rem; margin-left: .35rem; border-left: 1px solid var(--line); }
.bp-tree li { margin: 0; }
.bp-eintrag { display: block; padding: .18rem 0 .18rem 1.3rem; position: relative; line-height: 1.4; }
.bp-tree .is-kontext > .bp-eintrag { color: var(--muted); font-size: .88rem; }
.bp-tree .is-gewaehlt > .bp-eintrag { color: var(--text); font-weight: 550; }
.bp-tree .is-gewaehlt > .bp-eintrag::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.bp-tree .is-kontext > .bp-eintrag::before { content: ""; position: absolute; left: .35rem; top: .7rem; width: .4rem; height: .4rem; border-radius: 50%; background: var(--line-strong); }


/* ---------- Kennzahlen ---------- */
.kpis { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.kpis > div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .4rem .75rem; min-width: 7.5rem; }
.kpis dt { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.kpis dd { margin: 0; font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; }
.kpis-big { display: grid; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); gap: .75rem; margin-bottom: 1.5rem; }
.kpis-big > div { padding: .85rem 1rem; box-shadow: var(--shadow-sm); border-radius: var(--radius); position: relative; }
.kpis-big > div:hover { border-color: var(--line-strong); }
.kpis-big dd { font-size: 1.75rem; line-height: 1.2; }
.kpis-big dt a { color: var(--muted); text-decoration: none; }
.kpis-big dt a::after { content: ""; position: absolute; inset: 0; }
.kpis-big dt a:hover { color: var(--primary); }

.checklist { list-style: none; padding: 0; margin: 0; counter-reset: step; display: grid; gap: .35rem; }
.checklist li { counter-increment: step; display: flex; align-items: center; gap: .6rem; }
.checklist li::before {
  content: counter(step); display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--surface-3); color: var(--text-2); font-size: .78rem; font-weight: 700; flex: none;
}
.checklist li.done::before { content: "✓"; background: var(--ok-soft); color: var(--ok); }
.checklist li.done a { color: var(--muted); }
/* Startseite: Kern der Anwendung (Angebot → Kurse → Plan → Prüfen) */
.kern-flow { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem; counter-reset: kern; }
.kern-flow > li { counter-increment: kern; position: relative; background: var(--surface-2); border-radius: var(--radius); padding: .9rem 1rem 1rem; display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.kern-flow > li + li::before {
  content: ""; position: absolute; left: -1.25rem; top: 1.55rem; width: .9rem; height: .9rem;
  border-top: 2px solid var(--line-strong); border-right: 2px solid var(--line-strong); transform: rotate(45deg);
}
.kern-flow h3 { margin: 0; font-size: 1rem; display: flex; align-items: baseline; gap: .5rem; }
.kern-flow h3::before { content: counter(kern) "."; color: var(--muted); font-weight: 600; }
.kern-flow h3 a { color: var(--text); text-decoration: none; }
.kern-flow h3 a:hover { color: var(--primary); text-decoration: underline; }
.kern-flow p { margin: 0; color: var(--text-2); font-size: .88rem; line-height: 1.45; }
.kern-zahl { margin-left: auto; font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.kern-icon { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--primary-soft); color: var(--primary); }
.kern-beispiel { margin: 1rem 0 0; padding: .7rem .9rem; border-left: 3px solid var(--accent); background: var(--warn-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: .88rem; color: var(--text-2); }
.kern-next { margin-top: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; border: 1px solid var(--primary-ring); background: var(--primary-soft); border-radius: var(--radius); color: var(--text); text-decoration: none; }
.kern-next:hover { border-color: var(--primary); }
.kern-next > span { display: grid; gap: .1rem; }
.kern-next small { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--primary); }
.kern-next .icon { color: var(--primary); }
.grundlagen { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin: -.25rem 0 1.5rem; font-size: .88rem; }
.grundlagen a { text-decoration: none; }
.grundlagen a:hover { text-decoration: underline; }
.grundlagen .badge, .grundlagen-link { margin-left: auto; }
@media (max-width: 1100px) {
  .kern-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kern-flow > li:nth-child(3)::before { display: none; }
}
@media (max-width: 640px) {
  .kern-flow { grid-template-columns: 1fr; gap: 1.4rem; }
  .kern-flow > li + li::before, .kern-flow > li:nth-child(3)::before { display: block; left: 1.6rem; top: -1.1rem; transform: rotate(135deg); width: .7rem; height: .7rem; }
}

/* Einstellungen: Checkliste Einrichtung */
.setup-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; counter-reset: setup; }
.setup-list > li { counter-increment: setup; display: grid; grid-template-columns: 2rem 1fr auto; gap: .15rem .8rem; align-items: start; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: var(--radius); }
.setup-list > li::before { content: counter(setup); grid-row: span 2; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--surface-3); color: var(--text-2); font-weight: 700; font-size: .85rem; }
.setup-list > li.done::before { content: "✓"; background: var(--ok-soft); color: var(--ok); }
.setup-list > li.done { background: var(--surface-2); }
.setup-list a { font-weight: 600; }
.setup-list p { grid-column: 2; margin: 0; color: var(--text-2); font-size: .88rem; }
.setup-list .badge { grid-column: 3; grid-row: 1; }
.setup-progress { display: flex; align-items: center; gap: .75rem; margin: 0 0 1rem; }
.setup-progress progress { flex: 1; max-width: 18rem; height: .5rem; accent-color: var(--ok); }

.plain-list { list-style: none; padding: 0; margin: 0; }
.plain-list li { padding: .55rem 0; border-bottom: 1px solid var(--line); }
.plain-list li:last-child { border-bottom: 0; }

/* ---------- Tabs, Segmente ---------- */
.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--line); margin-bottom: 1.25rem; flex-wrap: wrap; }
.tabs a { padding: .55rem .9rem; text-decoration: none; color: var(--muted); font-weight: 600; font-size: .9rem; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--text); }
.tabs a[aria-current="page"] { color: var(--primary); border-bottom-color: var(--primary); }
.segmented { display: inline-flex; flex-wrap: wrap; background: var(--surface-3); border-radius: var(--radius-sm); padding: 3px; gap: 2px; }
.segmented label { position: relative; font-weight: 550; cursor: pointer; padding: .38rem .8rem; border-radius: 6px; font-size: .85rem; color: var(--text-2); }
.segmented input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; width: 100%; height: 100%; }
.segmented label:hover { color: var(--text); }
.segmented label:has(input:checked) { background: var(--surface); color: var(--primary); box-shadow: var(--shadow); }
.segmented label:has(input:focus-visible) { outline: 3px solid var(--primary-ring); }

/* ---------- Bildungsplan ---------- */
.tree-cell { padding-left: calc(.8rem + var(--depth, 0) * 1.2rem); font-weight: 400; }
.matrix .tree-cell { min-width: min(26rem, 70vw); }
.matrix td.covered { background: var(--ok-soft); }
.matrix td.covered-indirect { background: #f3faf6; }
.matrix tbody th { min-width: 18rem; }
.tree-edit { list-style: none; padding: 0; margin: 0; }
.tree-edit li { padding: .35rem 0 .35rem calc(var(--depth, 0) * 1.5rem); display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; border-bottom: 1px solid var(--line); }
.tree-edit .form-inline { margin: 0; }
.tree-select { max-height: 20rem; overflow: auto; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: .5rem .7rem; background: var(--surface); }
.tree-select ul { list-style: none; padding-left: 1.2rem; margin: 0; }
.tree-select > ul { padding-left: 0; }
.tree-select label { font-weight: 400; display: flex; gap: .45rem; align-items: baseline; padding: .12rem 0; color: var(--text); }
.tree-select .code, .tree-cell .code { white-space: nowrap; }
.tree-filter { margin-bottom: .5rem; width: 100%; }

/* Bildungsplan › Übernahme aus bildungsplaene-bw.de */
.segmented-links a { font-weight: 550; padding: .38rem .8rem; border-radius: 6px; font-size: .85rem; color: var(--text-2); text-decoration: none; }
.segmented-links a:hover { color: var(--text); }
.segmented-links a[aria-current="page"] { background: var(--surface); color: var(--primary); box-shadow: var(--shadow); }
.bw-fach-filter, .bw-filter { max-width: 22rem; }
.bw-fach-filter { margin-bottom: .75rem; width: 100%; }
.bw-niveau { margin-bottom: .75rem; }
.bw-werkzeuge { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .75rem; }
.bw-werkzeuge .bw-filter { flex: 1 1 14rem; }
.bw-tree, .bw-tree ul { list-style: none; margin: 0; padding: 0; }
.bw-tree ul { padding-left: 1.35rem; border-left: 1px solid var(--line); margin-left: .55rem; }
.bw-tree summary, .bw-zeile { display: flex; align-items: center; gap: .5rem; padding: .3rem .4rem; border-radius: var(--radius-sm); }
.bw-tree summary { cursor: pointer; list-style: none; color: var(--text); font-size: .92rem; }
.bw-tree summary::-webkit-details-marker { display: none; }
.bw-tree summary::before { content: ""; flex: none; width: .45rem; height: .45rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; margin: 0 .2rem 0 .1rem; }
.bw-tree details[open] > summary::before { transform: rotate(45deg); }
.bw-zeile { padding-left: 1.25rem; }
.bw-tree summary:hover, .bw-zeile:hover { background: var(--surface-2); }
.bw-tree label { display: flex; align-items: baseline; gap: .5rem; font-weight: 400; color: var(--text); cursor: pointer; flex: 1; min-width: 0; }
.bw-tree label input { flex: none; position: relative; top: .12rem; }
.bw-h > details > summary, .bw-h > .bw-zeile label { font-weight: 600; }
.bw-titel { flex: 1; min-width: 0; }
.bw-tree summary > input { flex: none; }
.bw-tree .code { flex: none; }
.bw-k label { padding: .28rem .4rem .28rem 1.25rem; border-radius: var(--radius-sm); line-height: 1.4; font-size: .9rem; }
.bw-k label:hover { background: var(--surface-2); }
.bw-nr { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 2.1rem; }
.bw-tree input:disabled + span, .bw-tree input:disabled ~ span { color: var(--muted); }
.bw-leiste {
  position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; justify-content: flex-end;
  margin: 1rem -1.35rem 0; padding: .75rem 1.35rem; background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: 0 -6px 12px -10px rgb(16 24 40 / .25);
}
.bw-zahl { margin-right: auto; font-weight: 600; color: var(--text-2); }
.badge-bp-hand { background: var(--primary-soft); color: var(--primary); }
.bw-hand { margin-bottom: .9rem; }
.bw-hand p { margin: .3rem 0 0; }
@media (max-width: 640px) {
  .bw-tree ul { padding-left: .55rem; margin-left: .35rem; }
  .bw-tree summary, .bw-zeile { gap: .35rem; padding-left: .2rem; padding-right: .2rem; }
  .bw-zeile, .bw-k label { padding-left: .35rem; }
  .bw-k label { gap: .35rem; }
  .bw-nr { min-width: 1.7rem; }
  .bw-tree summary .code, .bw-zeile .code { display: none; }
  .bw-zahl { flex-basis: 100%; }
}

/* ---------- Raster-Vorschau ---------- */
.raster-bar { list-style: none; padding: 0; margin: 0; position: relative; height: 28rem; max-width: 26rem; border-left: 3px solid var(--line); }
.raster-bar li {
  position: absolute; left: 0; right: 0; top: var(--top); height: var(--h);
  background: var(--primary-soft); border: 1px solid #c9d7f7; border-radius: 4px;
  padding: 0 .5rem; font-size: .78rem; overflow: hidden; display: flex; align-items: center; gap: .4rem;
}
.raster-bar li span { font-weight: 700; }

/* ---------- Ausrollen, Profile, Szenarien ---------- */
.rollout { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 1rem; }
.rollout:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.rollout fieldset { margin-bottom: .75rem; }
.choice-group { margin: .4rem 0 .9rem; }
.choice-group h3 { font-size: .88rem; margin-bottom: .3rem; display: flex; gap: .5rem; align-items: center; }
.scenario-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.scenario-card { margin: 0; display: flex; flex-direction: column; }
.scenario-card h2 { margin-bottom: .3rem; }
.scenario-card h2 a { text-decoration: none; color: var(--text); }
.scenario-card h2 a:hover { color: var(--primary); }
.scenario-card .btn-row { margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--line); }
.scenario-card .kpis > div { background: var(--surface-2); border: 0; }

.login-box { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 2rem 2rem 1.5rem; box-shadow: var(--shadow-lg); }
.login-box h1 { font-size: 1.4rem; }
.login-box .btn { width: 100%; }
.einladung-daten { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; margin: 0 0 1.1rem; padding: .7rem .9rem; background: var(--surface-2); border-radius: var(--radius-sm); font-size: .9rem; }
.einladung-daten dt { color: var(--muted); }
.einladung-daten dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
/* Einladungslink zum Kopieren (Benutzerverwaltung) */
.einladung-link { margin: .25rem 0 1rem; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.einladung-link.is-warn { background: var(--warn-soft); border-color: var(--warn-line); }
.einladung-link label { display: block; margin-bottom: .4rem; font-weight: 500; }
.copy-row { display: flex; gap: .5rem; }
.copy-row input { flex: 1; min-width: 0; font-size: .82rem; }

/* ---------- Planer ---------- */
.planner-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .75rem 1rem; margin-bottom: 1rem; }
.planner-head h1 { margin-bottom: .15rem; }
.planner-head p { margin: 0; font-size: .88rem; }
.save-state { font-size: .82rem; color: var(--ok); font-weight: 600; }
.save-state.is-dirty { color: var(--warn); }
.save-state.is-error { color: var(--bad); }
.optimizer-panel .weights { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: .75rem 1.75rem; margin: 1rem 0 1.25rem; }
.weight label { display: flex; justify-content: space-between; }
.weight output { font-weight: 700; color: var(--primary); min-width: 1.5rem; text-align: right; }
.weight input[type="range"] { width: 100%; accent-color: var(--primary); }
.weight .hint { margin-top: 0; }
.optimizer-progress { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .75rem; }
.optimizer-progress progress { width: 16rem; max-width: 100%; height: .7rem; accent-color: var(--primary); }
.view-controls { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: flex-end; margin: .25rem 0 .75rem; }
.entity-select { display: flex; flex-direction: column; gap: .25rem; font-size: .8rem; }
.entity-select select { min-width: 16rem; }
.view-facts { list-style: none; padding: 0; margin: 0 0 .6rem; display: flex; flex-wrap: wrap; gap: .3rem 1.25rem; font-size: .85rem; color: var(--muted); }
.kpis-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.kpis-bar > div { min-width: 0; border: 0; border-right: 1px solid var(--line); border-radius: 0; padding: .45rem .7rem; cursor: help; }
.kpis-bar > div:last-child { border-right: 0; }
.kpis-bar dt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: none; letter-spacing: 0; font-size: .74rem; }
.kpis-bar dd { font-size: 1rem; }

/* Stundenplan */
.timetable-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 1.25rem; box-shadow: var(--shadow-sm); }
.tt { min-width: calc(4.5rem + var(--days) * 9rem); }
.tt-head, .tt-body { display: grid; grid-template-columns: 4.5rem repeat(var(--days), minmax(9rem, 1fr)); }
.tt-head { position: sticky; top: 0; z-index: 3; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.tt-dayhead { padding: .5rem; font-weight: 650; text-align: center; font-size: .85rem; border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.tt-body { position: relative; }
.tt-cols { min-width: calc(4.5rem + var(--days) * var(--cols) * 3.2rem); }
.tt-cols .tt-head, .tt-cols .tt-body { grid-template-columns: 4.5rem repeat(var(--days), minmax(calc(var(--cols) * 3.2rem), 1fr)); }
.tt-subhead { display: flex; font-weight: 500; font-size: .7rem; color: var(--muted); }
.tt-subhead span { flex: 1; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-cols .tt-day { background-image: repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--cols) - 1px), var(--line) calc(100% / var(--cols) - 1px) calc(100% / var(--cols))); }
.tt-times, .tt-day { position: relative; }
.tt-day { border-left: 1px solid var(--line); }
.tt-time { position: absolute; left: 0; right: 0; padding: 2px 8px; font-size: .7rem; color: var(--muted); border-top: 1px solid var(--line); display: flex; flex-direction: column; line-height: 1.2; }
.tt-time strong { color: var(--text-2); font-size: .76rem; font-weight: 650; }
.tt-slot { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); }
.tt-slot.drop-over { background: rgb(47 91 211 / .16); }
.tt-slot.hint-ok { background: rgb(22 114 69 / .08); }
.tt-slot.hint-bad { background: rgb(180 35 24 / .06); }
.tt-slot.hint-none { background: repeating-linear-gradient(45deg, transparent 0 6px, rgb(102 112 133 / .1) 6px 8px); }
.tt-slot.drop-over.hint-bad { background: rgb(180 35 24 / .2); }
.tt-item {
  position: absolute; z-index: 1; overflow: hidden; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 1px; padding: 3px 6px; line-height: 1.15;
  background: color-mix(in srgb, var(--c) 14%, #fff); border: 1px solid color-mix(in srgb, var(--c) 35%, #fff);
  border-left: 4px solid var(--c); border-radius: 6px; font-size: .74rem; color: var(--text);
}
.tt-item:hover { z-index: 2; box-shadow: var(--shadow-lg); }
.tt-item.art-wahlpflicht { background-image: repeating-linear-gradient(135deg, transparent 0 8px, rgb(255 255 255 / .55) 8px 10px); }
.tt-item.art-freiwillig { border-style: dashed; border-left-style: solid; }
.tt-item.is-conflict { outline: 2px solid var(--bad); outline-offset: -1px; }
.tt-item.is-conflict::after { content: "!"; position: absolute; right: 4px; top: 2px; color: var(--bad); font-weight: 900; }
.tt-item.is-fixed .tt-kurz::after { content: " 📌"; font-size: .7rem; }
.tt-item.is-selected { box-shadow: 0 0 0 3px var(--primary-ring), var(--shadow); z-index: 2; }
.tt-item.is-dragging { opacity: .4; }
.tt-kurz { font-size: .79rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-name, .tt-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-meta { color: var(--muted); font-size: .68rem; }
.tt-empty { padding: 0 1rem 1rem; }

.free-rooms td { text-align: center; font-size: .85rem; }
.free-rooms td.free-none { background: var(--bad-soft); color: var(--bad); }
.free-rooms td.free-low { background: var(--warn-soft); color: var(--warn); }
.free-rooms td.free-ok { background: var(--ok-soft); color: var(--ok); }

.conflicts summary, .unplaced summary { color: var(--text); display: flex; align-items: center; gap: .5rem; }
/* In Flex-Zeilen sorgt gap für den Abstand nach dem Pfeil */
.conflicts summary::before, .unplaced summary::before, .rollout-item > summary::before { margin: 0 .15em; }
.conflicts[open] summary::before, .unplaced[open] summary::before, .rollout-item[open] > summary::before { margin-bottom: .2em; }
.conflict-list { list-style: none; padding: 0; margin: .5rem 0 0; max-height: 22rem; overflow: auto; font-size: .85rem; }
.conflict-list li { padding: .4rem 0; border-bottom: 1px solid var(--line); }
.conflict-list li:last-child { border-bottom: 0; }
.unplaced-list { padding-left: 1.2rem; max-height: 22rem; overflow: auto; font-size: .85rem; }

.session-dialog {
  border: 0; border-radius: 14px; padding: 1.4rem 1.6rem; max-width: min(38rem, calc(100vw - 2rem)); width: 100%;
  max-height: calc(100vh - 2rem); overflow: auto; background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg);
}
.session-dialog::backdrop { background: rgb(16 24 40 / .4); }
.session-dialog h2 { font-size: 1.15rem; }
.session-move { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; }
.session-move label { display: flex; flex-direction: column; gap: .25rem; }
.move-feedback { font-weight: 600; min-height: 1.5em; margin: .5rem 0 0; }
.move-feedback.ok { color: var(--ok); }
.move-feedback.bad { color: var(--bad); }
.session-dialog .actions { border-top: 0; padding-top: .5rem; }

/* Vergleich */
.compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr)); gap: 1.25rem; }
.compare-title { font-size: 1rem; }
.compare-kpis td { font-variant-numeric: tabular-nums; font-weight: 600; }
.compare-kpis td.better { color: var(--ok); background: var(--ok-soft); }
.compare-kpis td.worse { color: var(--bad); }

/* Jahresplan */
.year-plan th, .year-plan td { padding: .3rem; border: 1px solid var(--line); font-size: .74rem; }
.year-plan thead th { font-size: .68rem; padding: .35rem .2rem; text-align: center; }
.year-plan tbody th { white-space: nowrap; font-weight: 700; background: var(--surface-2); position: sticky; left: 0; }
.year-plan td { min-width: 2.7rem; vertical-align: top; }
.year-plan td.busy { background: #fafbfd; }
.year-plan td.clash { background: var(--bad-soft); outline: 2px solid var(--bad); outline-offset: -2px; }
.yp-item {
  display: block; margin: 1px 0; padding: 1px 4px; border-radius: 4px; text-decoration: none; color: var(--text);
  background: color-mix(in srgb, var(--c) 18%, #fff); border-left: 3px solid var(--c);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 5rem; font-size: .7rem;
}

/* ---------- Zusammenarbeit ---------- */
.avatar {
  display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--p, var(--primary)); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .02em;
}
.avatar-small { width: 1.65rem; height: 1.65rem; font-size: .62rem; box-shadow: 0 0 0 2px var(--bg); }
.comments h2 { display: flex; align-items: center; gap: .5rem; }
.comment-thread { border-left: 2px solid var(--line); padding-left: .9rem; margin: 0 0 1rem; }
.comment-thread.is-done { opacity: .78; }
.comment { display: flex; gap: .65rem; margin: .55rem 0; }
.comment-reply { margin-left: 2.3rem; }
.comment-body { flex: 1; min-width: 0; }
.comment-meta { margin: 0; font-size: .84rem; display: flex; flex-wrap: wrap; gap: .2rem .5rem; align-items: baseline; }
.comment-meta time { color: var(--muted); font-size: .78rem; }
.comment-text { margin: .15rem 0 .25rem; overflow-wrap: anywhere; }
.comment-actions { display: flex; gap: .9rem; font-size: .8rem; }
.comment-permalink { color: inherit; text-decoration: none; }
.comment-copy { color: var(--muted); margin-left: auto; }
.copy-field { font-size: .75rem; padding: .15rem .4rem !important; min-width: 0; width: min(22rem, 100%); }
.comment-permalink:hover { text-decoration: underline; color: var(--primary); }
.comment.is-highlight, .comment:target { background: var(--warn-soft); box-shadow: 0 0 0 6px var(--warn-soft); border-radius: var(--radius-sm); }
.comment-context { margin-left: auto; }
.comment-single .comment-object { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.comment-format-hint { margin: .3rem 0 .5rem; font-size: .75rem; color: var(--muted); line-height: 1.7; }
/* Markdown außerhalb von Kommentaren (Beschreibungen, Vorschau) */
.md { overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p, .md ul, .md ol, .md blockquote, .md pre { margin: 0 0 .6rem; }
.md ul, .md ol { padding-left: 1.3rem; }
.md h4, .md h5, .md h6 { margin: .8rem 0 .35rem; font-size: 1rem; }
.md h5, .md h6 { font-size: .92rem; color: var(--text-2); }
.md blockquote { border-left: 3px solid var(--line-strong); padding: .1rem 0 .1rem .75rem; color: var(--text-2); }
.md code { font-family: var(--mono); font-size: .85em; background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; padding: .05rem .3rem; }
.md pre { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .6rem .75rem; overflow-x: auto; }
.md pre code { background: none; border: 0; padding: 0; }
.format-preview { border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); padding: .6rem .8rem; background: var(--surface); margin: 0 0 .6rem; font-size: .92rem; }
.format-preview-toggle { font-size: .75rem; }

/* Steckbrief eines Angebots: Eckdaten | Beschreibung | Bildungsplan, getrennt durch dünne Linien */
.steckbrief-teil + .steckbrief-teil { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: 1rem; }
.steckbrief-kopf { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.steckbrief-kopf h3 { margin: 0; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 650; }
.steckbrief .meta { margin-bottom: 0; }
.steckbrief .prose { margin-bottom: 0; }
.meta-status dd { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.meta-status dd > span:first-child { min-width: 0; }

/* Markierung einzelner Angaben: Entwurf / geklärt */
.pill { display: inline-flex; align-items: center; flex: none; font: inherit; font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  line-height: 1; padding: .28rem .5rem; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; vertical-align: middle; }
button.pill { cursor: pointer; }
.pill-entwurf { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
.pill-geklaert { background: var(--ok-soft); color: var(--ok); border-color: #b9e3cb; }
.pill-leer { background: transparent; color: var(--muted); border: 1px dashed var(--line-strong); opacity: 0; transition: opacity .15s; }
.meta-status dd:hover .pill-leer, .steckbrief-kopf:hover .pill-leer, .pill-leer:focus-visible { opacity: 1; }
@media (hover: none) { .pill-leer { opacity: .7; } }
.pill-form { margin: 0; display: inline-flex; }
legend .pill, label .pill, .label .pill { margin-left: .4rem; }
/* Auswahl im Bearbeitungsformular, gestaltet wie die Pille */
select.pill-select {
  appearance: none; -webkit-appearance: none; width: auto !important; min-height: 0 !important; height: auto !important;
  font-size: .64rem !important; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1;
  padding: .3rem 1.35rem .3rem .55rem !important; margin-left: .4rem; border-radius: 999px !important; cursor: pointer; vertical-align: middle;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23667085'/%3E%3C/svg%3E") no-repeat right .5rem center;
  color: var(--muted); border: 1px dashed var(--line-strong) !important; box-shadow: none !important;
}
select.pill-select:has(option[value="entwurf"]:checked) { background-color: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn-line) !important; }
select.pill-select:has(option[value="geklaert"]:checked) { background-color: var(--ok-soft); color: var(--ok); border: 1px solid #b9e3cb !important; }
select.pill-select option { text-transform: none; font-weight: 400; color: var(--text); background: var(--surface); }
.form-inline > .zeilen-kopf { flex-basis: 100%; display: flex; align-items: center; gap: .3rem; margin: .35rem 0 -.2rem; font-weight: 600; }
.label-zeile { display: flex; align-items: center; gap: .25rem; margin-bottom: .3rem; }
.label-zeile label { margin: 0; }

.comment-format-hint code { font-size: .72rem; padding: .05rem .3rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; color: var(--text-2); }
/* Markdown in Kommentaren */
.comment-text > :first-child { margin-top: 0; }
.comment-text > :last-child { margin-bottom: 0; }
.comment-text p, .comment-text ul, .comment-text ol, .comment-text blockquote, .comment-text pre { margin: 0 0 .5rem; }
.comment-text ul, .comment-text ol { padding-left: 1.3rem; }
.comment-text li { margin: .1rem 0; }
.comment-text h4, .comment-text h5, .comment-text h6 { margin: .6rem 0 .3rem; font-size: .95rem; }
.comment-text h5, .comment-text h6 { font-size: .9rem; color: var(--text-2); }
.comment-text blockquote { border-left: 3px solid var(--line-strong); padding: .1rem 0 .1rem .75rem; color: var(--text-2); }
.comment-text code { font-family: var(--mono); font-size: .85em; background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; padding: .05rem .3rem; }
.comment-text pre { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .6rem .75rem; overflow-x: auto; }
.comment-text pre code { background: none; border: 0; padding: 0; font-size: .82rem; }
.comment-text a { word-break: break-word; }
.comment-abo { display: inline-flex; align-items: center; gap: .3rem; }
.comment-abo .icon { width: .95rem; height: .95rem; }
.comment-abo.is-active { color: var(--primary); font-weight: 600; }
.comment-form { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; margin-top: .75rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.comment-form textarea, .comment-reply-form textarea { width: 100%; }
.comment-reply-form { margin-left: 2.3rem; font-size: .85rem; }
.comment-reply-form form { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; }
.comments-archive { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .5rem; }
.comment-list .comment-card { margin-bottom: 1rem; }
.comment-card.is-new { border-left: 4px solid var(--accent); }
.comment-object { margin: 0 0 .5rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; font-weight: 600; }
.jg-comments { margin-top: .75rem; border-top: 1px solid var(--line); padding-top: .25rem; }
.jg-comments > .comments { margin: .5rem 0 0; box-shadow: none; padding: 0; border: 0; }

.presence-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.presence-list li { display: flex; align-items: center; gap: .5rem; }
.presence-page { margin: -.4rem 0 1rem; color: var(--muted); font-size: .85rem; }
.presence-here { margin-top: .4rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: .82rem; }
.presence-chip { display: inline-flex; align-items: center; gap: .3rem; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: .1rem .55rem .1rem .15rem; }
.activity-day { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 1.5rem 0 .5rem; }
.activity-list { list-style: none; padding: 0; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.activity-list li { display: flex; gap: .7rem; align-items: flex-start; padding: .6rem 1rem; border-bottom: 1px solid var(--line); font-size: .88rem; }
.activity-list li:last-child { border-bottom: 0; }
.activity-list time { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 2.8rem; padding-top: .2rem; }

.live-banner {
  position: fixed; left: calc(50% + var(--sidebar-w) / 2); bottom: 1.25rem; transform: translateX(-50%); z-index: 50;
  width: min(44rem, calc(100vw - var(--sidebar-w) - 2rem)); display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  background: var(--surface); color: var(--text); border: 1px solid var(--warn-line); border-left: 4px solid var(--accent); border-radius: var(--radius);
  padding: .8rem 1rem; box-shadow: var(--shadow-lg); font-size: .88rem;
}
.live-banner-error { border-color: #f6c5c0; border-left-color: var(--bad); bottom: 5.5rem; }
@media (max-width: 960px) { .live-banner { left: 50%; width: calc(100vw - 2rem); } }
.live-hint { color: var(--warn); font-size: .8rem; flex-basis: 100%; }
.preview-bar, .remote-bar { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; padding: .7rem 1rem; border-radius: var(--radius); margin-bottom: .9rem; font-size: .9rem; }
.preview-bar { background: var(--warn-soft); border: 1px solid var(--warn-line); }
.preview-bar p { margin: 0; }
.remote-bar { background: var(--primary-soft); border: 1px solid #c9d7f7; justify-content: flex-start; }
.tt-item.is-remote { animation: remote-flash 1.2s ease-in-out 3; }
@keyframes remote-flash { 50% { box-shadow: 0 0 0 4px var(--accent); } }
@media (prefers-reduced-motion: reduce) { .tt-item.is-remote { animation: none; box-shadow: 0 0 0 3px var(--accent); } }
.session-comments { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: .75rem; }
.session-comments h3 { font-size: .9rem; }
.session-comments textarea { width: 100%; margin-bottom: .4rem; }
.session-comment-list { max-height: 16rem; overflow: auto; }
.diff-box { border: 1px solid var(--warn-line); border-radius: var(--radius); padding: .8rem 1rem; margin-bottom: 1rem; background: var(--warn-soft); }
.diff-box h2 { font-size: 1rem; }
.diff-box td { white-space: pre-wrap; }

/* ---------- Hilfe ---------- */
.help-layout { display: grid; grid-template-columns: 15rem 1fr; gap: 2rem; align-items: start; }
.help-toc { position: sticky; top: 4.5rem; font-size: .86rem; }
.help-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.help-toc a { display: block; padding: .3rem .6rem; border-radius: 6px; text-decoration: none; color: var(--text-2); }
.help-toc a:hover { background: var(--surface-3); color: var(--primary); }
.help-toc .nav-heading { margin-top: .9rem; }
.help-article { max-width: 52rem; }
.help-article section { scroll-margin-top: 4.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin-bottom: 1rem; box-shadow: var(--shadow-sm); }
.help-article section:target { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.help-article h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.15rem; }
.help-article h2 .icon { color: var(--primary); }
.help-article h3 { margin-top: 1rem; }
.help-article ul, .help-article ol { padding-left: 1.3rem; margin: 0 0 .8rem; }
.help-article li { margin: .2rem 0; }
.help-article .goto { font-size: .85rem; font-weight: 600; }
.steps { counter-reset: s; list-style: none; padding: 0 !important; display: grid; gap: .75rem; }
.steps > li { counter-increment: s; display: grid; grid-template-columns: 2.2rem 1fr; gap: .2rem .75rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.15rem; box-shadow: var(--shadow-sm); margin: 0 !important; }
.steps > li::before { content: counter(s); grid-row: span 2; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 700; }
.steps > li strong { font-size: 1rem; }
.steps > li p { margin: 0; color: var(--text-2); }
.tip { background: var(--primary-soft); border-left: 3px solid var(--primary); padding: .6rem .9rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: .75rem 0; font-size: .9rem; }
@media (max-width: 900px) { .help-layout { grid-template-columns: 1fr; } .help-toc { position: static; } }

/* ---------- Druck ---------- */
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  :root { --bg: #fff; --surface: #fff; --surface-2: #f2f2f2; --text: #000; --line: #bbb; --shadow-sm: none; }
  body { font-size: 9pt; background: #fff; }
  .sidebar, .topbar, .site-footer, .breadcrumb, .btn-row, .optimizer-panel, .view-controls .segmented,
  .conflicts, .unplaced, .kpis-bar, .comments, .live-banner, .preview-bar, .remote-bar, .presence-here, .presence-page,
  .skip-link, .flash, .filter-bar, .help-toc { display: none !important; }
  .app-main { margin: 0; }
  .content { padding: 0; max-width: none; }
  .timetable-wrap { overflow: visible; border: 0; box-shadow: none; }
  .tt { min-width: 0; }
  .tt-head, .tt-body { grid-template-columns: 3.5rem repeat(var(--days), 1fr); }
  .tt-item { break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .entity-select select { border: 0; font-weight: 700; font-size: 12pt; appearance: none; box-shadow: none; }
  .help-layout { display: block; }
}

/* Listen mit Zeilenlayout */
.list-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.list-row-start { justify-content: flex-start; align-items: flex-start; }
.list-row-start .avatar { margin-top: .15rem; }
.card-head a { font-size: .85rem; font-weight: 600; text-decoration: none; }

.plain-list a, td a, .comment-object a, .breadcrumb a { text-decoration: none; }
.plain-list a:hover, td a:hover, .comment-object a:hover { text-decoration: underline; }
td a { font-weight: 550; }

/* Seitentitel & Werkzeugleiste */
.page-title { min-width: 0; }
.page-lead { color: var(--muted); margin: .3rem 0 0; max-width: 62rem; }
.toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.toolbar-search { flex: 1 1 16rem; max-width: 26rem; }
.toolbar-count { margin-left: auto; color: var(--muted); font-size: .85rem; }
.tabs .badge { margin-left: .2rem; }
td.empty { padding: 2rem; }

/* Ausrollen */
.rollout-item { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: .6rem; background: var(--surface); }
.rollout-item > summary { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; padding: .7rem 1rem; margin: 0; color: var(--text); font-weight: 500; }
.rollout-item > summary::before { color: var(--muted); }
.rollout-item[open] > summary { border-bottom: 1px solid var(--line); }
.rollout-item .rollout { padding: 1rem; margin: 0; border: 0; }
.rollout-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1rem; align-items: start; }
.rollout-grid .field { margin: 0; }

/* Eigenständige Formulare als Karte, mit mitlaufender Aktionsleiste */
.content > form.form-grid {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.35rem 1.5rem 0; box-shadow: var(--shadow-sm); max-width: 62rem; margin-bottom: 1.25rem;
}
.content > form.form-grid > .actions, .content > form.form-grid > fieldset.contents > .actions {
  position: sticky; bottom: 0; background: var(--surface); margin: .5rem -1.5rem 0; padding: .9rem 1.5rem; border-radius: 0 0 var(--radius) var(--radius); z-index: 5;
}
.content > form.form-grid fieldset.field { background: var(--surface-2); border-color: var(--line); }
.content > .danger-zone, .content > .comments { max-width: 62rem; }
/* Mehrfachauswahl: Leiste über der Tabelle, Kästchen in Gruppenzeilen */
.bulk-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin: 0 0 .6rem;
  position: sticky; top: calc(3.25rem + .5rem); z-index: 20; /* unter der Kopfleiste */
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem .6rem .5rem 1rem; box-shadow: var(--shadow-sm);
}
.bulk-bar.has-auswahl { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring), var(--shadow-sm); }
.bulk-bar.has-auswahl .bulk-count { color: var(--text); font-weight: 600; }
.bulk-count { color: var(--muted); font-size: .85rem; }
.bulk-bar button:disabled { opacity: .45; cursor: not-allowed; }
.group-row .group-check { margin: 0 .85rem 0 .1rem; vertical-align: -.15em; }
.group-row th { background: var(--surface-2); font-size: .8rem; font-weight: 700; color: var(--text-2); text-transform: none; letter-spacing: 0; padding-top: .5rem; padding-bottom: .5rem; }
.compare-pick label { display: flex; flex-direction: column; gap: .25rem; font-size: .8rem; }
.compare-pick select { min-width: 18rem; }
.compare-pick .vs { align-self: flex-end; padding-bottom: .55rem; color: var(--muted); font-weight: 700; }
.nowrap { white-space: nowrap; }
.jg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 430px), 1fr)); gap: 0 1.25rem; align-items: start; }
.jg-grid .card input:not([type="checkbox"]):not([type="number"]) { width: 100%; }
.jg-grid .section-head h2 { font-size: 1.05rem; }
@media (max-width: 760px) {
  .table-wrap > table { min-width: 680px; }
  .table-wrap > table.compact { min-width: 520px; }
  .page-head .btn-row { width: 100%; }
  .toolbar-search { max-width: none; }
}
/* Aktions-Spalte am Zeilenanfang */
th.col-action, td.col-action { width: 2.6rem; padding-right: 0; }
td.col-action .icon-btn { width: 1.9rem; height: 1.9rem; color: var(--primary); }
td.col-action .icon-btn:hover { background: var(--primary-soft); }

/* ---------- Plan: Ablage neben dem Stundenplan ---------- */
.plan-layout { display: grid; grid-template-columns: minmax(0, 1fr) 16.5rem; gap: 1rem; align-items: start; margin-bottom: 1.25rem; }
.plan-layout .timetable-wrap { margin-bottom: 0; }
.ablage {
  position: sticky; top: 4.25rem; max-height: calc(100vh - 5.5rem); display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: .8rem;
  transition: border-color .15s, box-shadow .15s;
}
.ablage-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .5rem; }
.ablage-head h2 { font-size: .98rem; margin: 0; display: flex; align-items: center; gap: .4rem; }
.ablage-head .check-inline { margin: 0; font-size: .8rem; color: var(--muted); }
.ablage-hint { font-size: .78rem; color: var(--muted); margin: .45rem 0 .6rem; }
.ablage-mode { font-size: .8rem; font-weight: 600; color: var(--primary); background: var(--primary-soft); border-radius: var(--radius-sm); padding: .45rem .6rem; margin: 0 0 .6rem; }
.ablage-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: grid; gap: .4rem; min-height: 3rem; }
.ablage-card {
  display: flex; align-items: center; gap: .3rem; padding: .2rem .25rem .2rem 0;
  background: color-mix(in srgb, var(--c) 10%, #fff); border: 1px solid color-mix(in srgb, var(--c) 32%, #fff);
  border-left: 4px solid var(--c); border-radius: 7px;
}
.ablage-card[draggable="true"] { cursor: grab; }
.ablage-card[draggable="true"]:active { cursor: grabbing; }
.ablage-card.art-freiwillig { border-style: dashed; border-left-style: solid; }
.ablage-card.is-placing { box-shadow: 0 0 0 3px var(--primary-ring); border-color: var(--primary); }
.ablage-card.is-dragging { opacity: .45; }
.ablage-card.is-impossible { opacity: .7; }
.ablage-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; background: none; border: 0; padding: .3rem .45rem; text-align: left; cursor: inherit; color: var(--text); }
.ablage-title { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ablage-title span { color: var(--text-2); }
.ablage-meta { font-size: .7rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ablage-dialog { width: 1.6rem; height: 1.6rem; font-weight: 700; }
.ablage-empty { font-size: .8rem; color: var(--muted); padding: .6rem .2rem; }
/* D: Ablage als Ziel beim Ziehen eines Termins aus dem Plan */
body.is-dragging-plan .ablage { border-style: dashed; border-color: var(--line-strong); }
.ablage.is-over { border-color: var(--primary); border-style: dashed; box-shadow: 0 0 0 3px var(--primary-ring); background: var(--primary-soft); }
/* C: Platzierungsmodus */
.tt.is-placing .tt-day { cursor: crosshair; }
.tt.is-placing .tt-item { opacity: .45; pointer-events: none; }
@media (max-width: 1100px) {
  .plan-layout { grid-template-columns: 1fr; }
  .ablage { position: static; max-height: none; }
}
@media print { .ablage { display: none !important; } .plan-layout { display: block; } }
/* kräftigere Hinweise beim Ziehen und im Platzierungsmodus */
.tt-slot.hint-ok { background: rgb(22 114 69 / .14); }
.tt-slot.hint-bad { background: rgb(180 35 24 / .09); }
.tt.is-placing .tt-slot.hint-ok:hover, .tt-slot.hint-ok.drop-over { background: rgb(22 114 69 / .32); }

/* ---------- Jahresplan: Ablage & Ziehen ---------- */
.yp-status { display: block; min-height: 1.3em; margin: 0 0 .5rem; }
.yp-wrap { margin-bottom: 0; }
.year-plan .yp-item[draggable="true"] { cursor: grab; }
.year-plan .yp-item.is-dragging { opacity: .4; }
.year-plan td.hint-ok { background: rgb(22 114 69 / .13); }
.year-plan td.hint-bad { background: rgb(180 35 24 / .1); }
.year-plan td.hint-none { opacity: .35; }
.year-plan td.drop-over { box-shadow: inset 0 0 0 2px var(--primary); }
.year-plan td.hint-ok.drop-over { background: rgb(22 114 69 / .3); }
.year-plan.is-placing td[data-w] { cursor: crosshair; }
.year-plan.is-placing .yp-item { pointer-events: none; opacity: .6; }
.ablage.is-target { border-style: dashed; border-color: var(--line-strong); }
.ablage-card a.ablage-main { text-decoration: none; }
.year-plan td[data-w] { width: 3.4rem; min-width: 3.4rem; max-width: 3.4rem; }
.year-plan .yp-item { max-width: 100%; }
.year-plan thead th:first-child { position: sticky; left: 0; z-index: 2; background: var(--surface-2); }
.year-plan tbody th { z-index: 1; }
/* Safari: Elemente mit draggable sicher ziehbar machen, Textauswahl beim Ziehen verhindern */
[draggable="true"] { -webkit-user-drag: element; -webkit-user-select: none; user-select: none; }
.ablage-main { cursor: pointer; }
.ablage-card[draggable="true"] .ablage-main { cursor: grab; }
.ablage-main:focus-visible { outline: 3px solid var(--primary-ring); outline-offset: -3px; border-radius: 6px; }
/* Ablage-Karten: nie breiter als die Spalte (lange Titel werden gekürzt) */
.ablage { min-width: 0; overflow: hidden; }
.ablage-list { grid-template-columns: minmax(0, 1fr); overflow-x: hidden; padding-right: 2px; }
.ablage-card { min-width: 0; max-width: 100%; }
.ablage-card > .badge, .ablage-card > .ablage-dialog { flex: none; }
.plan-layout > * { min-width: 0; }
/* Jahresplan: Epochen und Ferien */
.year-plan .yp-epochen th { background: var(--surface); font-size: .72rem; text-transform: none; letter-spacing: 0; color: var(--text-2); }
.year-plan th.yp-epoche { background: var(--primary-soft); color: var(--primary); font-weight: 700; text-align: center; border-left: 2px solid var(--line-strong); }
.year-plan thead th small { display: block; font-weight: 500; font-size: .62rem; color: var(--muted); letter-spacing: 0; text-transform: none; }
.year-plan th.yp-kurz { background-image: linear-gradient(transparent 85%, rgb(240 164 0 / .55) 85%); }
.year-plan .yp-ferien { width: 1.4rem; min-width: 1.4rem; max-width: 1.4rem; padding: 0;
  background: repeating-linear-gradient(135deg, var(--surface-3) 0 4px, var(--surface-2) 4px 8px); }
.year-plan th.yp-ferien { vertical-align: bottom; padding: .3rem 0; }
.year-plan th.yp-ferien span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-size: .66rem; font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: 0; }
.ferien-vorschau h3, #ferien h3 { margin-top: 1.25rem; }
.feiertage { margin-top: .5rem; }