/* Lehrerpult: Grundgestaltung */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/montserrat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/montserrat-latin-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/montserrat-latin-ext-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #f4f2ed;
  --surface: #ffffff;
  --surface-2: #faf8f4;
  --surface-3: #f0ede6;
  --border: #e3dfd5;
  --border-strong: #cfc9bc;
  --text: #1c2430;
  --text-2: #586371;
  --text-3: #616a76; /* blasse Schrift: mindestens 4,5:1 auf allen Flächen */
  --accent: #1f5f73;
  --accent-strong: #174a59;
  --accent-soft: #e2eef1;
  --accent-text: #ffffff;
  --now: #e8590c;
  --now-soft: #fff1e8;
  --danger: #c0262d;
  --danger-soft: #fdeceb;
  --success: #2f7d4f;
  --success-soft: #e7f4ec;
  --warn: #9a6a00;
  --warn-soft: #fdf4dc;
  --mark-red: #d63a3a;
  --mark-green: #2f9e44;
  --mark-magenta: #b23cbf;
  --mark-yellow: #c99a00;
  --shadow-sm: 0 1px 2px rgba(28, 36, 48, .06);
  --shadow: 0 1px 2px rgba(28, 36, 48, .06), 0 4px 16px rgba(28, 36, 48, .06);
  --shadow-lg: 0 10px 40px rgba(28, 36, 48, .18);
  --radius: 12px;
  --radius-sm: 8px;
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Früher eine eigene Schulschrift, jetzt überall Montserrat */
  --font-kids: var(--font);
  --sidebar: 236px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #11151a;
    --surface: #191e25;
    --surface-2: #1e242c;
    --surface-3: #252c35;
    --border: #2b333d;
    --border-strong: #3b4552;
    --text: #e7ecf1;
    --text-2: #a6b0bb;
    --text-3: #939ca8;
    --accent: #5fb0c6;
    --accent-strong: #7cc4d7;
    --accent-soft: #1d3540;
    --accent-text: #0d1b20;
    --now: #ff8a3d;
    --now-soft: #3a2416;
    --danger: #ff6b6b;
    --danger-soft: #3a1d1f;
    --success: #5cc488;
    --success-soft: #183126;
    --warn: #e8b84a;
    --warn-soft: #34290f;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #11151a;
  --surface: #191e25;
  --surface-2: #1e242c;
  --surface-3: #252c35;
  --border: #2b333d;
  --border-strong: #3b4552;
  --text: #e7ecf1;
  --text-2: #a6b0bb;
  --text-3: #939ca8;
  --accent: #5fb0c6;
  --accent-strong: #7cc4d7;
  --accent-soft: #1d3540;
  --accent-text: #0d1b20;
  --now: #ff8a3d;
  --now-soft: #3a2416;
  --danger: #ff6b6b;
  --danger-soft: #3a1d1f;
  --success: #5cc488;
  --success-soft: #183126;
  --warn: #e8b84a;
  --warn-soft: #34290f;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word; /* sehr lange Wörter und Links nie über den Rand */
}
h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .6em; }
a { color: var(--accent); }
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .9em; background: var(--surface-3); padding: .1em .35em; border-radius: 4px; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.boot { display: grid; place-items: center; min-height: 100vh; color: var(--text-3); }

/* ---------------------------------------------------------------- Layout */

.shell { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px 12px; background: var(--surface); border-right: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }
.brand-logo { width: 30px; height: 30px; flex: none; border-radius: 8px; }
.nav-link {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 9px;
  color: var(--text-2); text-decoration: none; font-weight: 520;
}
.nav-link:hover { background: var(--surface-3); color: var(--text); }
.nav-link.active { background: var(--accent-soft); color: var(--accent-strong); }
.nav-link svg { width: 19px; height: 19px; flex: none; }
.nav-search { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 8px 10px 8px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); color: var(--text-3); font: inherit; font-size: .92rem; cursor: pointer; text-align: left; }
.nav-search:hover { border-color: var(--accent); color: var(--text-2); }
.nav-search svg { width: 17px; height: 17px; flex: none; }
.nav-search kbd, .search-close kbd { font: inherit; font-size: .72rem; padding: 2px 6px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); color: var(--text-3); }

/* Mitteilungen: Glocke mit Zahl (Seitenleiste, Handy-Leiste) und die Liste dazu */
.bell { position: relative; }
.nav-bell { margin-left: auto; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; background: none; color: var(--text-2); cursor: pointer; }
.nav-bell:hover, .nav-bell[aria-expanded="true"] { background: var(--surface-3); color: var(--text); }
.bell.has-unread { color: var(--accent-strong); }
.bell-count { position: absolute; top: 1px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--danger); color: #fff; font-size: .7rem; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--surface); pointer-events: none; }
.bottom-nav .bell-count { top: 3px; right: calc(50% - 21px); }
.bell-panel { position: fixed; z-index: 10040; width: min(380px, calc(100vw - 16px)); max-height: min(70vh, 560px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); overflow: hidden; animation: sb-in .12s ease-out; }
.bell-panel.from-bottom { left: 8px; right: 8px; width: auto; top: auto; bottom: calc(66px + env(safe-area-inset-bottom)); }
.bell-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: 8px 10px 8px 16px; border-bottom: 1px solid var(--border); }
.bell-list { overflow-y: auto; padding: 6px; overscroll-behavior: contain; }
.bell-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px; border-radius: 10px; color: inherit; text-decoration: none; }
a.bell-item:hover { background: var(--surface-3); }
.bell-item small { display: block; margin-top: 2px; color: var(--text-2); }
.bell-title { font-weight: 550; }
.bell-item.unread .bell-title { font-weight: 700; }
.bell-dot { flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; }
.bell-item.unread .bell-dot { background: var(--accent); }
.bell-empty { margin: 8px 10px; }
/* Ohne KI: eine Zeile mit «KI einrichten» statt Fehlermeldungen */
.ai-setup { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--accent-soft); color: var(--text-2); font-size: .9rem; line-height: 1.45; }
.ai-setup > .icon { flex: none; margin-top: 2px; color: var(--accent-strong); }
.ai-setup a { font-weight: 650; white-space: nowrap; }
.ss-ai > .ai-setup { padding: 0; background: none; }
.nav-spacer { flex: 1; }
.nav-user { padding: 10px 12px; font-size: .85rem; color: var(--text-3); border-top: 1px solid var(--border); margin-top: 8px; }
.nav-user strong { display: block; color: var(--text-2); font-weight: 600; }
.nav-email { display: block; overflow-wrap: anywhere; line-height: 1.35; }

/* rechte Spalte: die Seite und darunter die Fusszeile, bei kurzen Seiten unten am Fenster */
.main-col { display: flex; flex-direction: column; min-width: 0; }
.main { flex: 1 0 auto; min-width: 0; padding: 28px clamp(16px, 3vw, 40px) 36px; max-width: 1760px; width: 100%; } /* auf grossen Bildschirmen die Breite nutzen */
.app-foot { max-width: 1760px; width: 100%; padding: 0 clamp(16px, 3vw, 40px) 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; text-align: center; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head .sub { color: var(--text-2); margin-top: 4px; }
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin: 0 0 2px -6px; font-size: .85rem; color: var(--text-2); }
.crumbs a { color: var(--text-2); text-decoration: none; padding: 2px 6px; border-radius: 6px; }
.crumbs a:hover { background: var(--surface-3); color: var(--text); }
.crumbs [aria-current] { padding: 2px 6px; }
.crumbs > .icon { color: var(--text-3); }
.page-head.plan-head > div:first-child { flex: 1 1 320px; min-width: 0; }
/* Planung auf dem Handy: Jahresplanung und «…» in einer kompakten Zeile */
@media (max-width: 640px) {
  .page-head.plan-head { gap: 8px; margin-bottom: 14px; }
  .plan-head .plan-actions { flex-wrap: nowrap; }
  .plan-head .plan-actions .btn { min-height: 34px; padding: 5px 10px; }
  .plan-head .plan-actions .icon-only { width: 36px; padding: 0; }
  .plan-head .pa-extra { display: none; }
  .plan-head .pa-more:not([hidden]) { display: inline-flex; }
}
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* Übersicht: auf dem Handy «Termin» und «Aufgabe» statt «Neuer Termin» und «Neue Aufgabe», «Anpassen» nur als Symbol */
.ov-act .lbl-short { display: none; }
@media (max-width: 560px) { .ov-act .lbl { display: none; } .ov-act .lbl-short { display: inline; } }

.bottom-nav, .more-sheet { display: none; }

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .main { padding: 18px 16px 24px; }
  /* Platz für die Handy-Leiste unten */
  .app-foot { padding: 0 16px calc(84px + env(safe-area-inset-bottom)); }
  /* schmal: die Version in einer eigenen Zeile, darunter die Links (sonst bleibt ein «·» am Zeilenende) */
  @media (max-width: 560px) {
    .app-foot-version { flex-basis: 100%; }
    .app-foot-version + [aria-hidden] { display: none; }
  }
  .bottom-nav {
    display: flex; gap: 2px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(12px);
    border-top: 1px solid var(--border); padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  }
  /* nur Icons: gleich breite Felder, das aktive bekommt eine Pille */
  .bottom-nav a, .bottom-nav button {
    flex: 1 1 0; min-width: 0; height: 44px; display: flex; align-items: center; justify-content: center;
    padding: 0; border: 0; border-radius: 12px; background: none; color: var(--text-3); cursor: pointer; text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .bottom-nav a.active, .bottom-nav button.active, .bottom-nav button[aria-expanded="true"] { color: var(--accent-strong); background: var(--accent-soft); }
  @media (max-width: 340px) { .bottom-nav { gap: 0; padding-left: 2px; padding-right: 2px; } }
  .more-sheet:not([hidden]) {
    display: flex; flex-direction: column; position: fixed; right: 8px; bottom: calc(66px + env(safe-area-inset-bottom)); z-index: 41;
    min-width: 210px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg);
  }
  .more-sheet a, .more-sheet button { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 0; border-radius: 9px; background: none; color: var(--text); text-decoration: none; font: inherit; font-weight: 550; cursor: pointer; text-align: left; }
  .more-sheet a:hover, .more-sheet button:hover { background: var(--surface-3); }
  .more-sheet a.active { background: var(--accent-soft); color: var(--accent-strong); }
  .more-sheet .more-logout { margin-top: 4px; border-top: 1px solid var(--border); border-radius: 0 0 9px 9px; }
  .more-sheet svg { width: 19px; height: 19px; flex: none; color: var(--text-3); }
  .bottom-nav svg { width: 23px; height: 23px; }
  h1 { font-size: 1.35rem; }
}

/* ------------------------------------------------------------- Bausteine */

.icon { width: 18px; height: 18px; flex: none; vertical-align: middle; }
.icon.sm { width: 15px; height: 15px; }
.icon.lg { width: 22px; height: 22px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 14px; border-radius: 9px; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); font-weight: 560; cursor: pointer;
  text-decoration: none; white-space: nowrap; line-height: 1.3; min-height: 38px;
  transition: background .12s, border-color .12s, box-shadow .12s;
  max-width: 100%;
}
/* auf schmalen Bildschirmen dürfen lange Knopf-Beschriftungen umbrechen statt über den Rand zu laufen */
@media (max-width: 640px) { .btn { white-space: normal; text-align: center; } }
.btn:hover { background: var(--surface-3); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.btn.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn.ai { background: linear-gradient(135deg, #6b4fd8, #1f8fae); border: 0; color: #fff; }
.btn.ai:hover { filter: brightness(1.07); }
.btn.danger { color: var(--danger); }
.btn.danger:hover { background: var(--danger-soft); border-color: var(--danger); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--surface-3); color: var(--text); }
.btn.sm { padding: 5px 10px; min-height: 32px; font-size: .88rem; }
.btn.icon-only { padding: 7px; min-width: 38px; }
.btn.sm.icon-only { padding: 5px; min-width: 32px; }
.btn .spinner { width: 15px; height: 15px; }
.btn-group { display: inline-flex; gap: 6px; flex-wrap: wrap; }
/* Auswahlliste im Stil eines Knopfs (selectButton): die echte Liste liegt unsichtbar darüber */
.select-btn { position: relative; }
.select-btn > select { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; font: inherit; appearance: none; }
.select-btn:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.select-btn-text { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-btn .icon.sm { opacity: .7; margin-left: -3px; }
.select-btn .sb-short { display: none; }
/* eigene Liste zu den Auswahlknöpfen (mit Maus) */
.sb-menu { position: fixed; z-index: 10060; max-width: min(380px, calc(100vw - 16px)); overflow-y: auto; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); animation: sb-in .12s ease-out; scrollbar-width: thin; }
@keyframes sb-in { from { opacity: 0; transform: translateY(-4px); } }
.sb-opt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px 8px 8px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: .93rem; font-weight: 520; text-align: left; cursor: pointer; }
.sb-opt > span { min-width: 0; overflow-wrap: anywhere; }
.sb-opt .icon { flex: none; color: var(--accent); visibility: hidden; }
.sb-opt:focus, .sb-opt:hover { outline: none; background: var(--surface-3); }
.sb-opt.selected { color: var(--accent-strong); font-weight: 650; }
.sb-opt.selected .icon { visibility: visible; }
.sb-opt.none { color: var(--text-2); }
.sb-opt:disabled { opacity: .45; cursor: default; }
.sb-sep { height: 1px; margin: 5px 8px; background: var(--border); }
.sb-note { max-width: 340px; padding: 6px 12px 8px; font-size: .8rem; line-height: 1.4; color: var(--text-2); }
.sb-dot { flex: none; width: 10px; height: 10px; border-radius: 3px; }
/* Aktionsmenü («…»): Symbol statt Häkchen, mit kurzer Erklärung */
.sb-action { padding: 9px 14px 9px 10px; gap: 10px; }
.sb-action .icon { visibility: visible; color: var(--text-2); }
.sb-action > span { display: flex; flex-direction: column; }
.sb-action small { font-size: .78rem; font-weight: 450; color: var(--text-3); }
.select-btn.active, .select-btn.active:hover { background: var(--accent-soft); color: var(--accent-strong); }
.select-btn:has(> select:disabled) { opacity: .55; }
.select-btn > select:disabled { cursor: default; }

.spinner { width: 20px; height: 20px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card-pad { padding: 18px 20px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.card-head > * { min-width: 0; max-width: 100%; } /* lange Titel/Markierungen umbrechen statt die Karte zu verbreitern */
.card-head h2 { display: flex; align-items: center; gap: 9px; font-size: 1rem; }
.card-toggle { display: inline-flex; align-items: center; gap: 9px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.card-toggle:hover { color: var(--accent); }
.card.collapsed .card-head { border-bottom: 0; }
.card-summary { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.card-head-toggle { cursor: pointer; user-select: none; }
.row.card-title-row { gap: 10px; flex-wrap: nowrap; min-width: 0; }
.card-title-row h2 { flex: none; }
.card-title-row .card-summary { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.card-head-toggle:hover .card-toggle { color: var(--accent); }
.card-chevron { display: inline-flex; }
.card-status { display: inline-flex; align-items: center; margin-left: auto; white-space: nowrap; }
@media (max-width: 640px) {
  /* lange Titel (z. B. «Microsoft (To Do, OneDrive, SharePoint)») umbrechen statt die Seite zu verbreitern */
  .card-title-row h2 { flex: 0 1 auto; min-width: 0; }
  /* Kurzinfo ganz lesbar auf eigener Zeile unter dem Titel statt abgeschnitten */
  .row.card-title-row { flex-wrap: wrap; row-gap: 2px; }
  .card-title-row .card-summary { flex-basis: 100%; padding-left: 51px; white-space: normal; overflow: visible; }
  /* Status unter dem Titel, bündig mit dem Text */
  .card-head-toggle > .card-status { flex-basis: 100%; margin: -4px 0 0; padding-left: 51px; white-space: normal; }
}
.card-head h2 .icon { color: var(--text-3); }
.card-body { padding: 16px 18px; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.small { font-size: .86rem; }
.tiny { font-size: .76rem; }
.nowrap { white-space: nowrap; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.divider { height: 1px; background: var(--border); margin: 14px 0; }

.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px;
  font-size: .78rem; font-weight: 560; background: var(--surface-3); color: var(--text-2); border: 1px solid transparent;
  /* nie breiter als die Zeile: sehr lange Wörter (z. B. Themen, Fehlermeldungen) brechen um; in Zeilen nicht zusammengestaucht */
  max-width: 100%; flex-shrink: 0; overflow-wrap: anywhere;
}
/* lange Inhalte (Termine, Fehlermeldungen) umbrechen statt die Seite zu verbreitern */
.chip.wrap, .ov-week-info .chip, .source-row .chip { white-space: normal; overflow-wrap: anywhere; border-radius: 9px; }
.chip.accent { background: var(--accent-soft); color: var(--accent-strong); }
.chip.danger { background: var(--danger-soft); color: var(--danger); }
.chip.success { background: var(--success-soft); color: var(--success); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
button.chip { cursor: pointer; }
button.chip:hover { border-color: var(--border-strong); }
button.chip.active { background: var(--accent); color: var(--accent-text); }
/* Handy und Touch: Chips zum Antippen (Datum, Beispiele, Platzhalter …) gross genug */
@media (max-width: 640px), (pointer: coarse) { button.chip { min-height: 32px; padding: 4px 12px; } }

.mark { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 560; padding: 2px 8px 2px 6px; border-radius: 6px; }
.mark::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.mark.red { color: var(--mark-red); background: color-mix(in srgb, var(--mark-red) 12%, transparent); }
.mark.green, .mark.brightGreen { color: var(--mark-green); background: color-mix(in srgb, var(--mark-green) 12%, transparent); }
.mark.magenta, .mark.pink { color: var(--mark-magenta); background: color-mix(in srgb, var(--mark-magenta) 12%, transparent); }
.mark.yellow, .mark.darkYellow { color: var(--mark-yellow); background: color-mix(in srgb, var(--mark-yellow) 16%, transparent); }
.mark.other { color: var(--text-2); background: var(--surface-3); }
.mark.struck { text-decoration: line-through; opacity: .7; }

/* Formulare */
.field { display: flex; flex-direction: column; gap: 5px; }
.field > span, .field-label { font-size: .84rem; font-weight: 600; color: var(--text-2); }
.field small, .hint { color: var(--text-3); font-size: .8rem; }
.input, .select, .textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: 9px;
  background: var(--surface); min-height: 40px; transition: border-color .12s, box-shadow .12s;
}
.textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.input.search { padding-left: 36px; background: var(--surface) no-repeat 11px center; }
.search-wrap { position: relative; }
.row > .search-wrap.grow { flex: 1 1 220px; } /* Suchfeld in einer Zeile mit Filtern: nie schmaler als ~220 px (sonst darunter) */
.search-wrap .icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.search-wrap .input { padding-left: 36px; }
.checkbox { display: inline-flex; gap: 9px; align-items: center; cursor: pointer; }
.checkbox input { width: 18px; height: 18px; accent-color: var(--accent); }
/* «Anwesend» im Termin-Dialog und bei einer Lektion: nebeneinander, Zeilen eng (auf Touch-Geräten ist jedes Kästchen
   schon 44 px hoch, siehe unten) */
.people-pick { column-gap: 10px; row-gap: 4px; }
.people-pick .checkbox { gap: 5px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { appearance: none; width: 40px; height: 23px; border-radius: 99px; background: var(--border-strong); position: relative; cursor: pointer; transition: background .15s; flex: none; margin: 0; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch input:checked { background: var(--accent); }
.switch input:checked::after { transform: translateX(17px); }
/* Schieberegler, überall gleich: Bahn bis zum Griff gefüllt (--range-p setzt ui.js → rangeFill(), Firefox füllt selbst),
   runder Griff mit Ring beim Darüberfahren, Ziehen und Fokus. Ein Bereich kann --range-accent und --range-track setzen */
input[type="range"] {
  --range-a: var(--range-accent, var(--accent)); --range-t: var(--range-track, var(--border-strong));
  -webkit-appearance: none; appearance: none; height: 28px; margin: 0; padding: 0; background: none; cursor: pointer;
}
input[type="range"]:focus { outline: none; }
input[type="range"]:disabled { cursor: default; opacity: .5; }
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 99px;
  background: linear-gradient(var(--range-a), var(--range-a)) 0 / calc(10px + (100% - 20px) * var(--range-p, 0)) 100% no-repeat, var(--range-t);
}
input[type="range"]::-moz-range-track { height: 6px; border-radius: 99px; background: var(--range-t); }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--range-a); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%;
  border: 2px solid var(--range-a); background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: box-shadow .15s, transform .15s;
}
input[type="range"]::-moz-range-thumb {
  box-sizing: border-box; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--range-a); background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: box-shadow .15s, transform .15s;
}
input[type="range"]:enabled:is(:hover, :focus-visible)::-webkit-slider-thumb { box-shadow: 0 1px 3px rgba(0, 0, 0, .25), 0 0 0 6px color-mix(in srgb, var(--range-a) 20%, transparent); }
input[type="range"]:enabled:is(:hover, :focus-visible)::-moz-range-thumb { box-shadow: 0 1px 3px rgba(0, 0, 0, .25), 0 0 0 6px color-mix(in srgb, var(--range-a) 20%, transparent); }
input[type="range"]:enabled:active::-webkit-slider-thumb { transform: scale(1.1); box-shadow: 0 1px 3px rgba(0, 0, 0, .25), 0 0 0 8px color-mix(in srgb, var(--range-a) 25%, transparent); }
input[type="range"]:enabled:active::-moz-range-thumb { transform: scale(1.1); box-shadow: 0 1px 3px rgba(0, 0, 0, .25), 0 0 0 8px color-mix(in srgb, var(--range-a) 25%, transparent); }

/* Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; overflow-x: auto; }
.tab { padding: 9px 14px; border: 0; background: none; color: var(--text-2); font-weight: 560; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
/* Einstellungen: Bereiche umbrechen statt seitlich verstecken (Administratoren haben zwei mehr) */
.settings-tabs { flex-wrap: wrap; overflow: visible; }
/* Einstellungen auf dem Handy: alle Bereiche sichtbar (umbrechende Knöpfe) statt seitlich versteckt */
@media (max-width: 640px) {
  .settings-tabs { flex-wrap: wrap; gap: 6px; padding-bottom: 14px; overflow: visible; }
  .settings-tabs .tab { padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
  .settings-tabs .tab.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
}

/* Leere Zustände und Hinweise */
.empty { text-align: center; padding: 34px 20px; color: var(--text-3); }
.empty .icon { width: 34px; height: 34px; margin-bottom: 8px; opacity: .6; }
.empty p { margin: 4px 0 12px; }
.empty .btn .icon { width: 18px; height: 18px; margin: 0; opacity: 1; } /* Knöpfe in der Meldung: Symbol in normaler Grösse */
.notice { display: flex; gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--accent-soft); color: var(--text); align-items: flex-start; }
.notice .icon { color: var(--accent); margin-top: 2px; }
.notice.warn { background: var(--warn-soft); }
.notice.warn .icon { color: var(--warn); }
.notice.success { background: var(--success-soft); }
.notice.success .icon { color: var(--success); }
.notice.danger { background: var(--danger-soft); }
.notice.danger .icon { color: var(--danger); }
/* Hinweis mit einklappbarer Zeile (foldNotice) */
.notice-toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.notice-toggle:hover { color: var(--accent-strong); }
.notice-toggle .card-chevron .icon { color: var(--text-3); margin-top: 0; }
/* Übersicht: Karte «Erste Schritte» für neue Konten */
.first-steps .card-head h2 .chip { margin-left: 4px; }
/* schmal: der Zähler bricht unter den Titel, das Kreuz bleibt oben rechts */
.first-steps .card-head { flex-wrap: nowrap; }
.first-steps .card-head h2 { flex: 1 1 0; flex-wrap: wrap; row-gap: 4px; }
.first-steps-intro { margin: 0 0 6px; }
.first-steps-list { list-style: none; margin: 0; padding: 0; }
.first-step { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--border); }
.first-step:first-child { border-top: 0; }
.first-step-mark { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; background: var(--accent-soft); color: var(--accent-strong); }
.first-step.done .first-step-mark { background: var(--success); color: #fff; }
.first-step-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.first-step-text strong { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.first-step.done .first-step-text strong { color: var(--text-2); }
.first-step-ok { display: inline-flex; align-items: center; gap: 5px; color: var(--success); font-weight: 600; }
@media (max-width: 560px) {
  .first-step { grid-template-columns: auto 1fr; }
  .first-step > .btn, .first-step-ok { grid-column: 2; justify-self: start; }
  /* auf dem Handy nur, was noch fehlt: Erledigtes zählt der Kopf */
  .first-steps-intro, .first-step.done { display: none; }
  .first-step { border-top: 0; }
  .first-step:not(.done) ~ .first-step:not(.done) { border-top: 1px solid var(--border); }
}

/* Toasts */
/* Ohne Netz (offline.js): oben in der Mitte, über allem, auch im Screen */
.offline-pill { position: fixed; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 10200; display: flex; align-items: center; gap: 6px;
  padding: 4px 12px; border: 1px solid var(--warn); border-radius: 999px; background: var(--warn-soft); color: var(--text); font-size: .8rem; font-weight: 600;
  white-space: nowrap; box-shadow: var(--shadow); pointer-events: none; }
.offline-pill .icon { width: 14px; height: 14px; color: var(--warn); }
.offline-pill .op-short { display: none; }
/* Ohne Verbindung (offline.js): an Stelle einer Seite, die nicht lädt, bzw. über einer Seite, von der ein Teil fehlt */
.offline-page { display: grid; justify-items: center; gap: 10px; box-sizing: border-box; width: min(460px, 100%); margin: clamp(24px, 9vh, 88px) auto; padding: 28px 24px;
  border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); text-align: center; box-shadow: var(--shadow); }
.offline-page-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--warn-soft); color: var(--warn); }
.offline-page h2 { margin: 4px 0 0; font-size: 1.25rem; }
.offline-page p { margin: 0; color: var(--text-2); line-height: 1.5; }
.offline-page .btn { margin-top: 8px; }
/* ohne Rand drumherum (Screen, Start der App): etwas Abstand zum Bildschirmrand */
:is(.screen-root, .boot) > .offline-page { width: min(460px, calc(100% - 32px)); }
.offline-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 18px clamp(16px, 3vw, 40px) 0; padding: 10px 14px;
  border: 1px solid var(--warn); border-radius: 12px; background: var(--warn-soft); color: var(--text); font-size: .92rem; line-height: 1.45; }
.offline-banner > .icon { flex: none; color: var(--warn); }
.offline-banner > span { flex: 1 1 220px; }
.offline-banner + .main { padding-top: 16px; }
/* auf dem Handy steht «Ohne Netz» oben rechts: die Leiste darunter */
@media (max-width: 640px) { .offline-banner { margin-top: 48px; } }
/* «Neuer Stand · Neu laden» (offerReload): derselbe Hinweis als Knopf */
.offline-pill.reload { pointer-events: auto; cursor: pointer; font-family: inherit; }
.offline-pill.reload:hover { border-color: var(--text); }
@media (max-width: 640px) {
  /* rechts oben, damit der Titel der Seite frei bleibt */
  .offline-pill { left: auto; right: 12px; transform: none; }
  .offline-pill .op-long { display: none; }
  .offline-pill .op-short { display: inline; }
}
.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 10100; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.toast { background: var(--text); color: var(--bg); padding: 11px 15px; border-radius: 10px; box-shadow: var(--shadow-lg); display: flex; gap: 10px; align-items: flex-start; animation: toast-in .2s ease-out; font-size: .92rem; }
/* Links in Meldungen (z. B. «Rückgängig» im Screen) in der Schrift der Meldung, sonst kaum lesbar */
.toast a { color: inherit; font-weight: 650; text-decoration: underline; }
.toast.error { background: var(--danger); color: #fff; }
.toast.success { background: var(--success); color: #fff; }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } }
@media (max-width: 860px) { .toasts { bottom: 86px; left: 16px; right: 16px; } }

/* Dialoge */
.modal-backdrop { position: fixed; inset: 0; background: rgba(15, 20, 26, .45); z-index: 10000; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 16px; animation: fade-in .15s; } /* minmax: lange Titel oder Inhalte machen den Dialog nie breiter als den Bildschirm */
@keyframes fade-in { from { opacity: 0; } }
.modal { background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-lg); width: min(560px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; animation: modal-in .18s ease-out; }
.modal.wide { width: min(860px, 100%); }
@keyframes modal-in { from { transform: translateY(10px) scale(.98); opacity: 0; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.modal-head h2 { min-width: 0; overflow-wrap: anywhere; }
.modal-body { padding: 18px 20px; overflow-y: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border); flex-wrap: wrap; }

/* Globale Suche */
.search-backdrop { place-items: start center; padding-top: min(12vh, 110px); }
.search-box { background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-lg); width: min(700px, 100%); max-height: min(70vh, 640px); display: flex; flex-direction: column; overflow: hidden; animation: modal-in .15s ease-out; }
.search-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 12px 18px; border-bottom: 1px solid var(--border); }
.search-head > svg { color: var(--text-3); flex: none; }
.search-input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 1.08rem; color: var(--text); padding: 6px 0; }
.search-input::-webkit-search-cancel-button { display: none; }
.search-close { border: 0; background: none; cursor: pointer; padding: 2px; }
.search-results { overflow-y: auto; padding: 6px 8px 10px; }
.search-group-title { display: flex; align-items: center; gap: 6px; padding: 10px 10px 4px; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }
.search-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 9px; color: inherit; text-decoration: none; }
.search-item > svg { color: var(--text-3); flex: none; }
.search-item > svg:last-child { opacity: 0; }
.search-item.active { background: var(--accent-soft); }
.search-item.active > svg:last-child { opacity: 1; color: var(--accent); }
.search-item .grow { display: flex; flex-direction: column; min-width: 0; }
.search-title { font-weight: 560; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-item small { color: var(--text-3); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-item.done .search-title { text-decoration: line-through; color: var(--text-3); }
.search-item mark { background: color-mix(in srgb, var(--mark-yellow) 28%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.search-empty { padding: 26px 12px; text-align: center; color: var(--text-3); }
.search-hint { padding: 10px 12px 2px; font-size: .78rem; color: var(--text-3); }
/* «Claude fragen» in der Suche */
.search-item.ask-item > svg:first-child { color: var(--accent); }
.search-item .ask-kbd { flex: none; font: inherit; font-size: .7rem; padding: 1px 6px; border: 1px solid var(--border); border-radius: 5px; color: var(--text-3); }
.search-item .src-n { flex: none; display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-strong); font-size: .74rem; font-weight: 700; }
.ask-view { display: flex; flex-direction: column; gap: 12px; padding: 10px 10px 4px; }
.ask-q { display: flex; align-items: flex-start; gap: 8px; font-weight: 650; overflow-wrap: anywhere; }
.ask-q > svg { flex: none; margin-top: 3px; color: var(--accent); }
.ask-wait { display: flex; align-items: center; gap: 10px; padding: 14px 0 18px; color: var(--text-3); }
.ask-a { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.ask-a .md p { margin: 0 0 8px; }
.ask-a .md > :last-child { margin-bottom: 0; }
.ask-sources { margin: 0 -2px; }
.ask-sources .search-group-title { padding-top: 2px; }
.ask-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 4px 2px 8px; }
.ask-foot > .small { flex: 1 1 260px; }
.ask-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.ask-entry { display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 8px; }
.ask-entry + .ask-entry { padding-top: 14px; border-top: 1px dashed var(--border-strong); }
.ask-meta { padding: 0 2px; }
.ask-more { padding: 6px 10px; }
@media (max-width: 640px) { .search-backdrop { padding: 10px; } .search-box { max-height: calc(100vh - 20px); } }

/* Markdown von Claude */
.md { line-height: 1.6; overflow-wrap: anywhere; } /* lange Links brechen um */
.md h2, .md h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin: 18px 0 6px; font-weight: 700; }
.md h2:first-child, .md h3:first-child { margin-top: 0; }
.md ul, .md ol { margin: 0 0 8px; padding-left: 20px; }
.md li { margin: 3px 0; }
/* Checkliste «Vorbereiten»: kompakt, mit feiner Linie zwischen den Einträgen (Linie aus .task) */
.md li.task { list-style: none; display: block; margin: 0 0 0 -20px; padding: 2px 0; }
.md li.task label { display: flex; gap: 9px; align-items: flex-start; cursor: pointer; padding: 3px 6px; margin: 0 -6px; border-radius: 7px; user-select: none; transition: background .12s; }
.md li.task label:hover { background: var(--surface-3); }
.md li.task input { margin-top: 4px; accent-color: var(--accent); width: 16px; height: 16px; flex: none; cursor: pointer; }
.md li.task.done span { text-decoration: line-through; color: var(--text-3); }
.md p:last-child { margin-bottom: 0; }
.md .cite { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; margin: 0 1px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-strong); font-size: .74rem; font-weight: 700; text-decoration: none; vertical-align: 1px; }

/* ---------------------------------------------------------------- Startseite und Anmeldung */

/* Startseite (ohne Anmeldung unter «/»): oben auf der Farbfläche Marke, Motto, Knöpfe und ein Bild der App, das unten von
   der Fläche abgeschnitten wird; darunter die Funktionen mit Bildern aus der App (abwechselnd links und rechts), KI und
   Datenschutz, weitere Funktionen und zum Schluss nochmals die Knöpfe. Jedes Bild gibt es hell und dunkel
   (docs/startseite/bilder.mjs), zu sehen ist das zum Design passende. Der Punkt des Logos steht als Sonne am Rand der
   Farbfläche. Kopf, Farbfläche und Fusszeile nutzen auch Hilfe, Changelog, Datenschutz, Impressum und AGB */
.start { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); }
.start-hero, .signin { position: relative; overflow: hidden; color: #fff; background: linear-gradient(150deg, #2a7a91 0%, #1d5a6c 55%, #163f4e 100%); }
.start-hero::before, .signin::before { content: ""; position: absolute; border-radius: 50%; background: #f4a63d; box-shadow: 0 18px 60px rgba(244, 166, 61, .35); pointer-events: none; }
.start-hero::before { top: 120px; right: -70px; width: 200px; height: 200px; }
.start-hero { padding: 22px clamp(20px, 6vw, 88px) clamp(48px, 8vw, 96px); }
.start-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1120px; margin: 0 auto clamp(36px, 7vw, 84px); }
.start-hero-inner { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; }
.login-logo { display: flex; align-items: center; gap: 12px; color: #fff; font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; text-decoration: none; }
.login-logo-img { width: 44px; height: 44px; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .22), 0 0 0 1px rgba(255, 255, 255, .18); }
.start h1 { margin: 0 0 16px; color: #fff; font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.08; letter-spacing: -.03em; }
.login-accent { color: #f6b85c; }
.login-lead { margin: 0 0 28px; color: rgba(255, 255, 255, .86); font-size: clamp(1.02rem, 1.6vw, 1.2rem); line-height: 1.55; }
.start-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.start .btn.start-cta-main, .start .btn.start-top-login { border-color: transparent; background: #f4a63d; color: #1d2b30; font-weight: 700; }
.start .btn.start-cta-main:hover, .start .btn.start-top-login:hover { background: #f6b85c; }
.start .btn.start-cta-main { min-height: 50px; padding: 0 22px; font-size: 1.05rem; }
.start .btn.start-cta-more { min-height: 50px; padding: 0 18px; border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .08); color: #fff; font-size: 1rem; }
.start .btn.start-cta-more:hover { background: rgba(255, 255, 255, .16); }
/* Hinweis über dem Motto: Lehrerpult ist noch in der Testphase */
.start-beta { display: inline-flex; align-items: flex-start; gap: 8px; margin: 0 0 18px; padding: 7px 14px; border: 1px solid rgba(246, 184, 92, .5); border-radius: 14px; background: rgba(244, 166, 61, .14); color: rgba(255, 255, 255, .9); font-size: .88rem; line-height: 1.45; }
.start-beta .icon { flex: none; margin-top: 2px; color: #f6b85c; }
.start-beta strong { color: #f6b85c; }
/* Kopf der öffentlichen Seiten (publicTop): rechts das Menü «Funktionen», «Über uns», «Hilfe» (die offene Seite markiert),
   der Knopf für das Design (hell oder dunkel) und «Anmelden»; auf dem Handy klappt der Menüknopf das Menü unter der Leiste auf */
.start-links { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.start-actions { display: flex; align-items: center; gap: 8px; }
.start-nav-link { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: rgba(255, 255, 255, .86); font: inherit; font-size: .95rem; font-weight: 600; text-decoration: none; cursor: pointer; }
.start-nav-link:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.start-nav-link[aria-current="page"] { background: rgba(255, 255, 255, .14); color: #fff; }
.start-theme, .start-menu-btn { display: grid; place-items: center; flex: none; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(255, 255, 255, .32); border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; }
.start-theme:hover, .start-menu-btn:hover { background: rgba(255, 255, 255, .18); }
.start-theme { margin-left: 4px; }
.start-theme-label { display: none; }
.start-menu-btn { display: none; }
/* «Anmelden» so hoch wie die runden Knöpfe daneben (Design, auf dem Handy der Menüknopf); mit dem Finger ist die
   Tippfläche von «Anmelden» und Menüknopf trotzdem mindestens 44 px wie bei den übrigen Knöpfen (pointer: coarse) */
.start .btn.start-top-login { min-height: 42px; }
@media (pointer: coarse) {
  .start-top .start-top-login, .start-menu-btn { position: relative; }
  .start-top .start-top-login::after, .start-menu-btn::after { content: ""; position: absolute; inset: -4px; }
}
/* Wechsel des Designs mit dem Knopf: die Seite blendet kurz über (View Transitions) */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }
.start-foot { margin-top: auto; padding: 24px 16px 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; text-align: center; }
.start-foot a, .app-foot a { color: inherit; text-decoration: none; }
.start-foot a:hover, .app-foot a:hover { text-decoration: underline; }

/* Bilder aus der App: hell oder dunkel wie die Seite */
.start-shot { display: block; overflow: hidden; background: var(--surface); }
.start-shot img { display: block; width: 100%; height: auto; }
.start-shot .start-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .start-shot .start-light { display: none; }
  :root:not([data-theme="light"]) .start-shot .start-dark { display: block; }
}
:root[data-theme="dark"] .start-shot .start-light { display: none; }
:root[data-theme="dark"] .start-shot .start-dark { display: block; }
.start-home { --start-max: 1160px; --start-pad: clamp(16px, 5vw, 64px); --start-stage: linear-gradient(150deg, #d8e9ee 0%, #edf1ee 50%, #f7ebd7 100%);
  --start-frame: #e9e5dd; --start-dot: #c9c3b8; --start-line: rgba(28, 36, 48, .09); --start-shadow: 0 24px 60px rgba(28, 36, 48, .16); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .start-home { --start-stage: linear-gradient(150deg, #173641 0%, #182228 50%, #2c2417 100%);
    --start-frame: #232a33; --start-dot: #48525f; --start-line: rgba(255, 255, 255, .08); --start-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
}
:root[data-theme="dark"] .start-home { --start-stage: linear-gradient(150deg, #173641 0%, #182228 50%, #2c2417 100%);
  --start-frame: #232a33; --start-dot: #48525f; --start-line: rgba(255, 255, 255, .08); --start-shadow: 0 24px 60px rgba(0, 0, 0, .45); }

/* Kopf der Startseite: alles in der Mitte, darunter das Bild der App im Browser und auf dem Handy */
.start-hero-home { padding-bottom: 0; }
.start-hero-home::before { top: 150px; right: -90px; width: 240px; height: 240px; }
.start-hero-home .start-top { max-width: var(--start-max); margin-bottom: clamp(40px, 7vw, 76px); }
.start-hero-home .start-hero-inner { display: flex; flex-direction: column; align-items: center; max-width: 880px; text-align: center; }
.start-hero-home h1 { margin-bottom: 18px; font-size: clamp(2.3rem, 6.4vw, 4.3rem); line-height: 1.03; letter-spacing: -.04em; }
.start-hero-home .login-lead { max-width: 700px; margin-bottom: 30px; }
.start-hero-home .start-cta { justify-content: center; }
.start-access { margin: 16px 0 0; color: rgba(255, 255, 255, .78); font-size: .92rem; }
.start-access a, .start-final-note a { color: #fff; font-weight: 650; }
.start-hero-shots { position: relative; z-index: 1; max-width: 1060px; height: clamp(240px, 36vw, 480px); margin: clamp(40px, 6vw, 64px) auto 0; }
.start-window { position: absolute; inset: 0 0 auto 0; overflow: hidden; border-radius: 14px 14px 0 0; background: var(--start-frame); box-shadow: 0 30px 80px rgba(5, 25, 32, .5), 0 0 0 1px rgba(255, 255, 255, .14); }
.start-window-bar { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; }
.start-window-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--start-dot); }
.start-window-bar span { display: inline-flex; align-items: center; gap: 6px; margin: 0 auto; padding: 3px 14px; border-radius: 999px; background: var(--surface); color: var(--text-3); font-size: .78rem; font-weight: 600; transform: translateX(-27px); }
.start-phone { padding: 8px; border-radius: 40px; background: #0e1418; box-shadow: 0 30px 70px rgba(5, 25, 32, .45), inset 0 0 0 1px rgba(255, 255, 255, .12); }
.start-phone .start-shot { aspect-ratio: 390 / 844; border-radius: 32px; }
.start-hero-shots .start-phone { position: absolute; top: 64px; right: -36px; width: clamp(170px, 20vw, 236px); }

/* Vorteile unter dem Kopf */
.start-perks { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; max-width: calc(var(--start-max) + 2 * var(--start-pad)); margin: 0 auto; padding: 28px var(--start-pad) 0; list-style: none; }
.start-perks li { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-size: .92rem; font-weight: 600; }
.start-perks .icon { color: var(--accent-strong); }

/* Abschnitte: Titel in der Mitte, kleine Überschrift (Eyebrow) darüber */
.start-section { box-sizing: border-box; width: 100%; max-width: calc(var(--start-max) + 2 * var(--start-pad)); margin: 0 auto; padding: clamp(64px, 9vw, 112px) var(--start-pad) 0; }
.start-head { max-width: 760px; margin: 0 auto clamp(24px, 4vw, 40px); text-align: center; }
.start-head h2, .start-feature h2, .start-panel h2 { margin: 0 0 14px; color: var(--text); font-size: clamp(1.75rem, 3.6vw, 2.6rem); line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; }
.start-head p { margin: 0; color: var(--text-2); font-size: clamp(1rem, 1.5vw, 1.12rem); line-height: 1.6; }
.start-eyebrow { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 12px; color: var(--accent-strong); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.start-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; }
.start-jump button { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 15px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-sm); }
.start-jump button .icon { color: var(--accent-strong); }
.start-jump button:hover { border-color: var(--accent); color: var(--accent-strong); }

/* eine Funktion: Text und Bild nebeneinander, jede zweite gespiegelt; auf schmalen Bildschirmen das Bild unter dem Text */
.start-feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(28px, 5vw, 72px); padding: clamp(28px, 4vw, 52px) 0; scroll-margin-top: 12px; }
.start-feature.rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.start-feature.rev .start-feature-text { order: 2; }
.start-feature-text > p, .start-panel > p { margin: 0 0 20px; color: var(--text-2); font-size: 1.05rem; line-height: 1.6; }
.start-checks { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.start-checks li { display: flex; align-items: flex-start; gap: 10px; color: var(--text); font-size: .97rem; line-height: 1.45; }
.start-checks .icon { flex: none; margin-top: 2px; color: var(--accent-strong); }
.start-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 22px; color: var(--accent-strong); font-weight: 700; text-decoration: none; }
.start-link:hover { text-decoration: underline; }
/* Fläche um das Bild: am Computer oben links mit Rand, das Bild läuft rechts und unten hinaus (links stehen Titel und Namen),
   das Handy steht in der Mitte und läuft unten hinaus, der Screen ist ganz zu sehen */
.start-stage { position: relative; overflow: hidden; aspect-ratio: 5 / 4; border: 1px solid var(--start-line); border-radius: 28px; background: var(--start-stage); }
.start-stage > .start-shot { position: absolute; top: 9%; left: 8%; width: 112%; border: 1px solid var(--start-line); border-radius: 14px; box-shadow: var(--start-shadow); }
.start-stage.is-phone .start-phone { position: absolute; top: 8%; left: 50%; width: min(50%, 270px); transform: translateX(-50%); box-shadow: var(--start-shadow); }
.start-stage.is-screen { display: grid; place-items: center; }
.start-display { width: 88%; padding: 6px; border-radius: 16px; background: #0e1418; box-shadow: var(--start-shadow); }
.start-display .start-shot { aspect-ratio: 16 / 9; border-radius: 11px; }
/* ohne aspect-ratio (z. B. iOS 14) hätte die Fläche keine Höhe, die Bilder stehen ja frei darin */
@supports not (aspect-ratio: 1 / 1) {
  .start-stage { height: 0; padding-bottom: 80%; }
  .start-stage.is-screen { height: auto; padding: 24px 0; }
}

/* KI und Datenschutz nebeneinander, Datenschutz auf der Farbfläche der Marke */
.start-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.start-panel { padding: clamp(26px, 4vw, 44px); border: 1px solid var(--border); border-radius: 28px; background: var(--surface); box-shadow: var(--shadow); }
.start-panel h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); }
.start-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.start-chips li { padding: 6px 13px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-size: .88rem; font-weight: 700; }
.start-privacy { position: relative; overflow: hidden; border: 0; color: #fff; background: linear-gradient(150deg, #2a7a91 0%, #1d5a6c 55%, #163f4e 100%); }
.start-privacy::before { content: ""; position: absolute; top: -56px; right: -56px; width: 150px; height: 150px; border-radius: 50%; background: #f4a63d; box-shadow: 0 18px 60px rgba(244, 166, 61, .35); }
.start-privacy > * { position: relative; }
.start-privacy h2, .start-privacy .start-checks li, .start-privacy .start-link { color: #fff; }
.start-privacy > p { color: rgba(255, 255, 255, .86); }
.start-privacy .start-eyebrow, .start-privacy .start-checks .icon { color: #f6b85c; }
.start-swap { display: grid; justify-items: start; gap: 6px; margin: 0 0 22px; padding: 14px 16px; border-radius: 16px; background: rgba(0, 0, 0, .18); font-size: .95rem; }
.start-swap .icon { margin-left: 16px; color: #f6b85c; }
.start-swap b { padding: 1px 7px; border-radius: 6px; background: rgba(255, 255, 255, .14); }

/* weitere Funktionen: vier, zwei oder eine Spalte */
.start-more { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.start-more li { padding: 22px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-sm); }
.start-more-icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 14px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-strong); }
.start-more h3 { margin: 0 0 6px; font-size: 1.02rem; }
.start-more p { margin: 0; color: var(--text-2); font-size: .92rem; line-height: 1.5; }

/* zum Schluss: Motto und Knöpfe auf der Farbfläche */
.start-final-card { position: relative; overflow: hidden; padding: clamp(40px, 7vw, 76px) clamp(20px, 5vw, 64px); border-radius: 32px; color: #fff; text-align: center; background: linear-gradient(150deg, #2a7a91 0%, #1d5a6c 55%, #163f4e 100%); }
.start-final-card::before { content: ""; position: absolute; bottom: -70px; left: -60px; width: 190px; height: 190px; border-radius: 50%; background: #f4a63d; box-shadow: 0 18px 60px rgba(244, 166, 61, .35); }
.start-final-card > * { position: relative; }
.start-final-card h2 { margin: 0 0 14px; color: #fff; font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.05; letter-spacing: -.035em; }
.start-final-card > p { max-width: 560px; margin: 0 auto 26px; color: rgba(255, 255, 255, .86); font-size: 1.05rem; line-height: 1.55; }
.start-final-card .start-cta { justify-content: center; }
.start-final-card > .start-final-note { margin: 16px auto 0; color: rgba(255, 255, 255, .78); font-size: .92rem; }
.start-home .start-foot { margin-top: clamp(48px, 7vw, 80px); }

/* schmaler: die Sonne steht unten hinter dem Handy statt neben dem Text */
@media (max-width: 1199px) {
  .start-hero-home::before { top: auto; bottom: 130px; right: -70px; width: 180px; height: 180px; }
}
@media (max-width: 1000px) {
  .start-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .start-feature, .start-feature.rev { grid-template-columns: minmax(0, 1fr); }
  .start-feature.rev .start-feature-text { order: 0; }
  .start-duo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .start-hero-shots { max-width: 290px; height: 330px; }
  .start-hero-shots .start-window { display: none; }
  .start-hero-shots .start-phone { top: 0; right: auto; left: 50%; width: 250px; transform: translateX(-50%); }
  .start-stage > .start-shot { width: 140%; }
}
/* bis 800 px passen die Links nicht neben Logo und «Anmelden»: Menüknopf */
@media (max-width: 800px) {
  /* Menü: nur Logo, «Anmelden» und der Menüknopf in der Leiste; aufgeklappt stehen die Links und der Knopf für das Design
     darunter (in der Fläche, so schneidet sie nichts ab) */
  .start-top { flex-wrap: wrap; }
  .start-actions { margin-left: auto; }
  .start-menu-btn { display: grid; }
  .start-links { display: none; order: 3; flex: 1 0 100%; flex-direction: column; align-items: stretch; gap: 2px; margin: 14px 0 0; padding: 8px;
    border: 1px solid rgba(255, 255, 255, .22); border-radius: 16px; background: rgba(9, 32, 40, .5); }
  .start-top.open .start-links { display: flex; }
  .start-links .start-nav-link { min-height: 46px; padding: 0 14px; font-size: 1rem; }
  .start-links .start-theme { display: flex; align-items: center; gap: 10px; width: 100%; height: 46px; margin: 0; padding: 0 14px; border: 0; border-radius: 10px;
    background: none; color: rgba(255, 255, 255, .86); font: inherit; font-size: 1rem; font-weight: 600; text-align: left; }
  .start-links .start-theme:hover { background: rgba(255, 255, 255, .1); color: #fff; }
  .start-theme-label { display: inline; }
}
@media (max-width: 640px) {
  .start-hero::before { top: auto; bottom: -36px; right: 22px; width: 72px; height: 72px; }
  .start-hero-home::before { top: auto; bottom: 150px; right: -34px; width: 96px; height: 96px; }
  .start-final-card::before { bottom: auto; left: auto; top: -46px; right: -46px; width: 104px; height: 104px; }
  .start-top .btn { padding: 0 12px; }
  .start-cta .btn { flex: 1 1 100%; justify-content: center; }
  .start-more { grid-template-columns: minmax(0, 1fr); }
  .start-stage { border-radius: 22px; }
}
/* Handy: Logo, «Anmelden» (ohne Symbol) und Menüknopf kleiner, damit sie bis 360 px in einer Zeile stehen */
@media (max-width: 440px) {
  .start-top .login-logo { gap: 10px; font-size: 1.15rem; }
  .start-top .login-logo-img { width: 38px; height: 38px; }
  .start-menu-btn { width: 38px; height: 38px; }
  .start .btn.start-top-login { min-height: 38px; }
  .start-top .start-top-login .icon { display: none; }
  .start-actions { gap: 6px; }
}
/* noch schmaler (320 px): nur das Logo ohne Schriftzug */
@media (max-width: 359px) {
  .start-top .login-logo span { display: none; }
}

/* Anmeldeseite (/anmelden): auf der Farbfläche das Logo und eine Karte mit dem Formular */
.signin { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 32px 16px 20px; isolation: isolate; }
/* der orange Kreis schaut oben rechts hinter der Karte hervor, bei jeder Breite beim Formular */
.signin::before { content: none; }
.signin-card::after { content: ""; position: absolute; z-index: -1; top: -48px; right: -56px; width: 136px; height: 136px; border-radius: 50%; background: #f4a63d; box-shadow: 0 18px 60px rgba(244, 166, 61, .35); pointer-events: none; }
.signin-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; color: #fff; font-size: 1.3rem; font-weight: 700; text-decoration: none; }
.signin-card { position: relative; width: min(400px, 100%); box-sizing: border-box; padding: 30px 28px 24px; border-radius: 20px; background: var(--surface); color: var(--text); box-shadow: 0 24px 60px rgba(0, 0, 0, .28); }
.signin-card h1 { margin: 0 0 6px; font-size: 1.6rem; letter-spacing: -.02em; }
.signin-card > p.muted { margin: 0 0 24px; }
.signin-card form { display: flex; flex-direction: column; gap: 16px; }
.signin-card .input { min-height: 46px; }
.signin-card .btn.primary { min-height: 48px; margin-top: 4px; font-size: 1rem; }
.signin-card > p.signin-hint { margin: 20px 0 0; }
.signin-card > .btn.signin-wide { width: 100%; min-height: 48px; }
.signin-card > .btn.signin-wide + .btn.signin-wide { margin-top: 10px; }
.signin-row { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.pw-wrap { position: relative; }
.pw-wrap .input { width: 100%; padding-right: 48px; }
.pw-toggle { position: absolute; top: 50%; right: 6px; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--text-3); cursor: pointer; transform: translateY(-50%); }
.pw-toggle:hover, .pw-toggle:focus-visible { background: var(--surface-2); color: var(--text); }
/* «Screen ohne Konto ausprobieren» unter der Karte */
.signin-try { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; background: rgba(255, 255, 255, .08); color: #fff; font-weight: 600; text-decoration: none; }
.signin-try:hover { background: rgba(255, 255, 255, .16); }
.signin-foot { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; color: rgba(255, 255, 255, .8); }
.signin-foot a { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
.signin-foot a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 640px) {
  .signin { justify-content: flex-start; padding-top: 28px; }
  .signin-card::after { top: -30px; right: -6px; width: 80px; height: 80px; }
  .signin-card { padding: 24px 20px 20px; }
}

/* Datenschutz und Impressum (/datenschutz, /impressum): ohne Anmeldung unter dem Kopf der Startseite, angemeldet in der App */
.legal-hero { padding-bottom: 22px; }
.legal-hero .start-top { margin-bottom: 0; }
/* die Sonne schaut oben rechts aus der Ecke, neben «Anmelden» bzw. dem Menüknopf; erst wenn rechts davon genug Platz ist,
   steht sie grösser da */
.legal-hero::before { top: -105px; right: -95px; width: 150px; height: 150px; }
@media (max-width: 640px) { .legal-hero::before { top: -112px; right: -102px; } }
@media (min-width: 1340px) { .legal-hero::before { top: -64px; right: -48px; } }
.legal-main { padding: clamp(24px, 5vw, 48px) 16px 8px; }
.legal { max-width: 760px; margin: 0 auto; padding: clamp(22px, 4vw, 36px); border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); line-height: 1.6; overflow-wrap: break-word; }
.main > .legal { margin-top: 8px; }
.legal h1 { margin: 0 0 4px; color: var(--text); font-size: clamp(1.6rem, 3.4vw, 2.1rem); letter-spacing: -.02em; }
.legal-meta { margin: 0 0 22px; color: var(--text-3); font-size: .88rem; }
.legal h2 { margin: 0 0 10px; font-size: 1.12rem; letter-spacing: -.01em; }
.legal section { padding-top: 22px; margin-top: 22px; border-top: 1px solid var(--border); scroll-margin-top: 16px; }
.legal p, .legal li { color: var(--text-2); font-size: .95rem; }
.legal p { margin: 0 0 10px; }
.legal p:last-child { margin-bottom: 0; }
.legal ul { margin: 0 0 10px; padding-left: 1.2em; }
.legal li + li { margin-top: 6px; }
.legal strong { color: var(--text); }
.legal a { color: var(--accent-strong); }
.legal address { margin: 0 0 10px; font-style: normal; color: var(--text); }
.legal-short { padding: 16px 18px; border-radius: 12px; background: var(--accent-soft); }
.legal-short h2 { font-size: 1rem; }
.legal-short ul { margin: 0; }
.legal-short li { color: var(--text); }
.legal-toc { margin-top: 22px; }
.legal-toc ol { margin: 0; padding-left: 1.4em; columns: 2 220px; column-gap: 28px; }
.legal-toc li { margin: 0 0 4px; break-inside: avoid; font-size: .92rem; }

/* Über uns (/ueber-uns, about.js): Titel in der Mitte, darunter Idee, Person, Haltung und weitere Projekte als Karten und
   zum Schluss der Kontakt auf der Farbfläche der Marke; ohne Anmeldung unter dem Kopf der Startseite, angemeldet in der App */
.about { max-width: 960px; margin: 0 auto; }
.about-head { padding: clamp(4px, 2vw, 16px) 0 clamp(8px, 2vw, 16px); text-align: center; }
.about-eyebrow { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 12px; color: var(--accent-strong); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.about-head h1 { margin: 0 0 14px; color: var(--text); font-size: clamp(2rem, 5vw, 3rem); line-height: 1.08; letter-spacing: -.035em; }
.about-lead { max-width: 640px; margin: 0 auto; color: var(--text-2); font-size: clamp(1.02rem, 1.6vw, 1.15rem); line-height: 1.6; }
.about-section { margin-top: clamp(28px, 5vw, 48px); }
.about-section > h2, .about-contact h2 { margin: 0 0 14px; color: var(--text); font-size: clamp(1.3rem, 2.6vw, 1.7rem); letter-spacing: -.02em; }
.about-card { padding: clamp(20px, 3.5vw, 32px); border: 1px solid var(--border); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); }
.about-card p, .about-tiles p { margin: 0 0 12px; color: var(--text-2); line-height: 1.65; }
.about-card p:last-child, .about-tiles p:last-child { margin-bottom: 0; }
.about-quote { padding-left: 16px; border-left: 3px solid #f4a63d; font-size: 1.15rem; font-weight: 700; }
.about-card .about-quote { color: var(--text); }
.about-person { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 20px; }
.about-avatar { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(150deg, #2a7a91 0%, #1d5a6c 55%, #163f4e 100%);
  color: #fff; font-size: 1.45rem; font-weight: 800; letter-spacing: .02em; box-shadow: 0 0 0 4px var(--accent-soft); }
.about-person h3 { margin: 0; font-size: 1.2rem; }
.about-card .about-role { margin: 2px 0 10px; color: var(--accent-strong); font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.about a:not(.btn) { color: var(--accent-strong); font-weight: 650; }
.about-person a, .about-tiles a { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; text-decoration: none; }
.about-person a:hover, .about-tiles a:hover { text-decoration: underline; }
.about-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.about-tiles li { padding: 22px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-sm); }
.about-tiles h3 { margin: 0 0 6px; font-size: 1.02rem; }
.about-tiles p { font-size: .93rem; line-height: 1.55; }
.about-icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 12px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-strong); }
.about-note { margin: 16px 0 0; color: var(--text-2); font-size: .95rem; line-height: 1.6; }
.about-contact { position: relative; overflow: hidden; margin-top: clamp(32px, 6vw, 56px); padding: clamp(28px, 5vw, 48px) clamp(20px, 5vw, 48px); border-radius: 24px; text-align: center;
  color: #fff; background: linear-gradient(150deg, #2a7a91 0%, #1d5a6c 55%, #163f4e 100%); }
.about-contact::before { content: ""; position: absolute; top: -50px; right: -50px; width: 140px; height: 140px; border-radius: 50%; background: #f4a63d; box-shadow: 0 18px 60px rgba(244, 166, 61, .35); }
.about-contact > * { position: relative; }
.about-contact h2 { color: #fff; }
.about-contact p { max-width: 560px; margin: 0 auto 22px; color: rgba(255, 255, 255, .86); line-height: 1.6; }
.about .about-contact a:not(.btn) { color: #fff; }
.about-contact .btn.about-mail { min-height: 48px; padding: 0 20px; border-color: transparent; background: #f4a63d; color: #1d2b30; font-weight: 700; }
.about-contact .btn.about-mail:hover { background: #f6b85c; }
.legal-main > .about { padding-bottom: 8px; }
@media (max-width: 640px) {
  .about-tiles { grid-template-columns: minmax(0, 1fr); }
  .about-person { grid-template-columns: minmax(0, 1fr); }
  .about-contact::before { top: -44px; right: -44px; width: 88px; height: 88px; }
}
/* Changelog (/changelog): links die Versionen, rechts je eine Karte; auf dem Handy die Versionen oben als Knöpfe */
.changelog { max-width: 1040px; margin: 0 auto; }
.main > .changelog { margin-top: 8px; }
.cl-hero { margin: 0 0 22px; }
.cl-hero h1 { margin: 0 0 6px; color: var(--text); font-size: clamp(1.6rem, 3.4vw, 2.1rem); letter-spacing: -.02em; }
.cl-hero p { margin: 0; color: var(--text-2); }
.cl-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; align-items: start; }
.cl-nav { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; scrollbar-width: thin; }
.cl-nav-title { margin-bottom: 4px; padding: 0 10px 8px; border-bottom: 1px solid var(--border); color: var(--text-3); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.cl-nav-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.cl-nav-list a { display: flex; flex-direction: column; gap: 1px; padding: 7px 10px; border-left: 2px solid transparent; border-radius: 8px; color: var(--text-2); text-decoration: none; }
.cl-nav-list a:hover { background: var(--surface-2); color: var(--text); }
.cl-nav-list a.active { border-left-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.cl-nav-version { font-size: .88rem; font-weight: 700; }
.cl-nav-date { color: var(--text-3); font-size: .74rem; }
.cl-nav-list a.active .cl-nav-date { color: inherit; opacity: .8; }
.cl-nav-more { display: none; }
.cl-nav-more button { padding: 5px 10px; border: 1px dashed var(--border); border-radius: 8px; background: none; color: var(--accent); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.cl-entry { margin-bottom: 18px; padding: 22px 26px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); scroll-margin-top: 16px; }
.cl-entry-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 14px; }
.cl-version { margin: 0; color: var(--accent-strong); font-size: 1.15rem; }
.cl-name { color: var(--text); font-weight: 650; }
.cl-date { color: var(--text-3); font-size: .85rem; }
.cl-badge { padding: 2px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.cl-section + .cl-section { margin-top: 14px; }
.cl-section-title { display: inline-block; margin: 0 0 8px; padding: 2px 10px; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.cl-section-title.added { background: var(--success-soft); color: var(--success); }
.cl-section-title.changed { background: var(--warn-soft); color: var(--warn); }
.cl-section-title.fixed { background: var(--danger-soft); color: var(--danger); }
.cl-list { margin: 0; padding: 0; list-style: none; }
.cl-list li { position: relative; padding-left: 18px; font-size: .92rem; line-height: 1.6; overflow-wrap: break-word; }
.cl-list li + li { margin-top: 4px; }
.cl-list li::before { content: '•'; position: absolute; left: 2px; color: var(--text-3); }
/* Unterpunkte: kleiner und grauer, mit einer Linie links */
.cl-list .cl-list { margin: 6px 0 4px 2px; padding-left: 10px; border-left: 1px solid var(--border); }
.cl-list .cl-list li { padding-left: 14px; color: var(--text-2); font-size: .86rem; line-height: 1.55; }
.cl-list .cl-list li + li { margin-top: 2px; }
.cl-list .cl-list li::before { content: '-'; font-weight: 600; }
@media (max-width: 900px) {
  .cl-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .cl-nav { position: static; max-height: none; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
  .cl-nav-title { padding: 0 0 8px; }
  .cl-nav-list { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .cl-nav-list a { padding: 5px 10px; border: 1px solid var(--border); }
  .cl-nav-list a.active { border-color: var(--accent); }
  .cl-nav-list .cl-more { display: none; }
  .cl-nav-list.open .cl-more { display: block; }
  .cl-nav-more { display: block; }
  .cl-nav-list.open .cl-nav-more { display: none; }
}
@media (max-width: 640px) { .cl-entry { padding: 16px; } }

/* Hilfe (/hilfe), aufgebaut wie die Hilfe von Lernspiegel: oben die Suche, links das Inhaltsverzeichnis, rechts die
   Abschnitte als Karten mit Einträgen zum Aufklappen; auf dem Handy ohne Inhaltsverzeichnis (die Kopfzeilen genügen) */
.help { max-width: 1100px; margin: 0 auto; }
.main > .help { margin-top: 8px; }
.help-hero { padding: 6px 0 26px; text-align: center; }
.help-hero h1 { margin: 0 0 6px; color: var(--text); font-size: clamp(1.6rem, 3.4vw, 2.1rem); letter-spacing: -.02em; }
.help-hero > p { margin: 0; color: var(--text-2); }
.help-search { max-width: 560px; margin: 18px auto 0; }
.help-search-field { display: flex; align-items: center; border: 1.5px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s; }
.help-search-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.help-search-icon { flex: none; margin: 0 4px 0 14px; color: var(--text-3); }
.help-search-input { flex: 1; min-width: 0; padding: 12px 8px; border: 0; outline: none; background: transparent; color: var(--text); font: inherit; font-size: .95rem; }
.help-search-input::-webkit-search-cancel-button { display: none; }
.help-search-clear { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; margin-right: 6px; border: 0; border-radius: 50%; background: none; color: var(--text-2); cursor: pointer; }
.help-search-clear:hover { background: var(--surface-3); color: var(--text); }
.help-search-count { min-height: 1.3em; margin: 12px 0 0; color: var(--text-2); font-size: .85rem; }
.help-search-count strong { color: var(--accent-strong); }
.help-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; }
.help-nav { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 12px 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); scrollbar-width: thin; }
.help-nav-title { padding: 0 8px 8px; color: var(--text-3); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.help-nav a { display: grid; grid-template-columns: 2em minmax(0, 1fr); align-items: baseline; padding: 6px 8px; border-radius: 8px; color: var(--text-2); font-size: .85rem; font-weight: 500; line-height: 1.4; text-decoration: none; }
.help-nav a + a { margin-top: 1px; }
.help-nav a:hover, .help-nav a.active { background: var(--accent-soft); color: var(--accent-strong); }
.help-nav a.disabled { opacity: .35; pointer-events: none; }
.help-nav-num { color: var(--text-3); font-variant-numeric: tabular-nums; }
.help-nav a.active .help-nav-num { color: inherit; }
/* Abschnitt: die Karte; zugeklappt bleibt die Kopfzeile mit der Anzahl Einträge */
.help-section { margin-bottom: 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; scroll-margin-top: 16px; }
.help-section-head { display: flex; align-items: center; gap: 10px; padding: 12px 18px; cursor: pointer; user-select: none; }
.help-section-head:hover { background: var(--surface-2); }
.help-section-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 16px; }
.help-section:not(.collapsed) .help-section-head { border-bottom: 1px solid var(--border); }
.help-section.collapsed .help-section-body { display: none; }
.help-section-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: 10px; }
.help-section-icon.tone-accent { background: var(--accent-soft); color: var(--accent-strong); }
.help-section-icon.tone-success { background: var(--success-soft); color: var(--success); }
.help-section-icon.tone-warn { background: var(--warn-soft); color: var(--warn); }
.help-section-icon.tone-now { background: var(--now-soft); color: var(--now); }
.help-section-icon.tone-danger { background: var(--danger-soft); color: var(--danger); }
.help-section-head h2 { min-width: 0; margin: 0; color: var(--text); font-size: 1.08rem; overflow-wrap: anywhere; }
.help-section-count { margin-left: auto; color: var(--text-3); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.help-section-chevron { flex: none; color: var(--text-3); transition: transform .18s; }
.help-section:not(.collapsed) .help-section-chevron { transform: rotate(90deg); }
.help-intro { margin: 0; padding: 12px 18px 2px; color: var(--text-2); font-size: .9rem; }
.help-group { margin: 18px 0 6px; padding: 0 18px; color: var(--text-3); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
/* Einträge: schlichte Zeilen mit feiner Trennlinie, der geöffnete hebt sich als Fläche ab */
.help-entry { border-bottom: 1px solid var(--border); scroll-margin-top: 16px; }
.help-entry:last-child { border-bottom: 0; }
.help-entry[open] { background: var(--surface-2); }
.help-entry > summary { display: flex; align-items: center; gap: 8px; padding: 13px 18px; color: var(--text); font-size: .93rem; font-weight: 600; cursor: pointer; list-style: none; }
.help-entry > summary::-webkit-details-marker { display: none; }
.help-entry > summary:hover { background: var(--surface-3); }
.help-entry[open] > summary { border-bottom: 1px solid var(--border); }
.help-entry-title { min-width: 0; overflow-wrap: anywhere; }
.help-entry-chevron { flex: none; margin-left: auto; color: var(--text-3); transition: transform .2s; }
.help-entry[open] .help-entry-chevron { transform: rotate(180deg); }
/* Link auf den Eintrag (kopiert ihn): beim Darüberfahren und mit der Tastatur */
.help-anchor { color: var(--text-3); font-weight: 700; text-decoration: none; opacity: 0; transition: opacity .15s; }
.help-entry > summary:hover .help-anchor, .help-anchor:focus-visible { opacity: 1; }
.help-anchor:hover { color: var(--accent-strong); }
@media (hover: none) { .help-anchor { display: none; } }
.help-entry-body { padding: 14px 22px 18px 18px; color: var(--text-2); font-size: .9rem; line-height: 1.7; }
.help-entry-body p { margin: 0 0 10px; }
.help-entry-body > :last-child { margin-bottom: 0; }
.help-entry-body ol, .help-entry-body ul { margin: 6px 0 10px; padding-left: 1.3em; }
.help-entry-body li + li { margin-top: 4px; }
.help-entry-body strong { color: var(--text); font-weight: 650; }
.help-entry-body a, .help-intro a, .help-more a { color: var(--accent-strong); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); text-underline-offset: 2px; }
.help-entry-body a:hover, .help-intro a:hover, .help-more a:hover { text-decoration-color: currentColor; }
.help-tip { display: flex; gap: 8px; margin: 10px 0; padding: 10px 14px; border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; background: var(--accent-soft); color: var(--text); font-size: .86rem; line-height: 1.6; }
.help-tip .icon { flex: none; margin-top: 3px; color: var(--accent-strong); }
.help-mark { padding: 0 2px; border-radius: 3px; background: #fef08a; color: #1c2430; }
.help-empty { padding: 36px 16px; color: var(--text-2); text-align: center; }
.help-empty p { margin: 0 0 6px; }
.help-more { margin: 18px 0 0; color: var(--text-3); text-align: center; }
@media (max-width: 760px) {
  .help-hero { padding-bottom: 12px; }
  .help-layout { grid-template-columns: minmax(0, 1fr); }
  .help-nav { display: none; }
}
@media (max-width: 480px) {
  .help-section-count { display: none; }
  .help-section-chevron { margin-left: auto; }
  .help-section-head, .help-entry > summary { padding-left: 14px; padding-right: 14px; }
  .help-entry-body { padding: 12px 14px 16px; }
  .help-intro { padding: 12px 14px 2px; }
  .help-group { padding: 0 14px; }
}

/* Ankündigungen (announcements.js): Banner über der Seite, Fenster, Vorschau in der Verwaltung; Farbe über --ann-* */
.ann-strip { display: grid; gap: 10px; width: 100%; max-width: 1760px; padding: 18px clamp(16px, 3vw, 40px) 0; }
.ann-strip:empty { display: none; }
.ann-strip:not(:empty) + .main { padding-top: 16px; }
.ann-public { max-width: 1120px; margin: 0 auto; padding: 14px 16px 0; }
.signin .ann-public { position: relative; z-index: 1; width: min(440px, 100%); margin: 0; padding: 0; }
.ann-info { --ann-bg: var(--accent-soft); --ann-ink: var(--accent-strong); }
.ann-success { --ann-bg: var(--success-soft); --ann-ink: var(--success); }
.ann-warning { --ann-bg: var(--warn-soft); --ann-ink: var(--warn); }
.ann-error { --ann-bg: var(--danger-soft); --ann-ink: var(--danger); }
.ann-banner { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--ann-ink) 28%, transparent); border-radius: 12px; background: var(--ann-bg); color: var(--text); font-size: .92rem; line-height: 1.5; box-shadow: var(--shadow-sm); }
.ann-icon { display: inline-flex; flex: none; margin-top: 1px; color: var(--ann-ink); }
.ann-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ann-text p { margin: 0; }
.ann-text p + p { margin-top: 6px; }
.ann-title { display: block; margin-bottom: 2px; }
.ann-text a { color: var(--ann-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ann-close { flex: none; margin: -6px -8px -6px 0; }
.ann-popup { display: flex; align-items: flex-start; gap: 12px; line-height: 1.55; }
.ann-popup > .ann-icon { align-items: center; justify-content: center; width: 34px; height: 34px; margin: 0; border-radius: 10px; background: var(--ann-bg); }
.ann-popup .ann-text { padding-top: 5px; }
/* Fenster als Vorschau in der Verwaltung */
.ann-popup-card { max-width: 460px; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-sm); }
.ann-popup-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.ann-popup-head .icon { color: var(--text-3); }
.ann-popup-card .ann-popup { padding: 14px 16px; font-size: .92rem; }
.ann-popup-foot { display: flex; justify-content: flex-end; padding: 0 16px 14px; }
.ann-popup-foot .btn { pointer-events: none; }
/* Verwaltung → Ankündigungen */
.ann-admin-intro { margin: 0; }
.ann-admin-list { display: grid; gap: 12px; }
.ann-admin-item { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.ann-admin-muted > .ann-banner, .ann-admin-muted > .ann-popup-card { opacity: .6; }
.ann-admin-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ann-admin-meta .small { display: inline-flex; align-items: center; gap: 4px; }
.ann-admin-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ann-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; align-items: start; }
.ann-form .seg { display: flex; flex-wrap: wrap; align-self: flex-start; max-width: 100%; }
.ann-form .seg-btn { flex: 0 1 auto; white-space: nowrap; }
.ann-admin-item .ann-close { pointer-events: none; }
.ann-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 14px; margin-top: 8px; }
.ann-pages[hidden] { display: none; }
.ann-seg-info::before, .ann-seg-success::before, .ann-seg-warning::before, .ann-seg-error::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; vertical-align: 0; }
.ann-seg-info::before { background: var(--accent); }
.ann-seg-success::before { background: var(--success); }
.ann-seg-warning::before { background: var(--warn); }
.ann-seg-error::before { background: var(--danger); }
.ann-preview { display: grid; gap: 6px; padding-top: 10px; border-top: 1px dashed var(--border); }
.ann-preview-label { font-weight: 600; }

/* Zahl bei «Support» in der Navigation (auch auf dem Teil «Support» der Verwaltung) und Punkt auf «Mehr» */
.nav-count { margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--danger); color: #fff; font-size: .72rem; font-weight: 700; line-height: 1.4; text-align: center; }
.nav-count[hidden] { display: none; }
.seg-btn .nav-count { margin-left: 6px; }
.bottom-nav .more-btn { position: relative; }
.bottom-nav .more-btn.has-dot::after { content: ""; position: absolute; top: 8px; right: calc(50% - 14px); width: 8px; height: 8px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 2px var(--surface); }

/* Support (pages/support.js für Lehrpersonen, pages/support-admin.js in der Verwaltung) */
.sup-page { display: grid; gap: 14px; max-width: 920px; }
.sup-tip { align-items: center; }
.sup-tip a { color: var(--accent-strong); font-weight: 600; }
.sup-list { overflow: hidden; }
.sup-item { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--border); color: var(--text); text-decoration: none; }
.sup-item:first-child { border-top: 0; }
.sup-item:hover { background: var(--surface-2); }
.sup-item-main { display: grid; flex: 1; gap: 2px; min-width: 0; }
.sup-item-title { display: flex; align-items: center; gap: 8px; font-weight: 600; overflow-wrap: anywhere; }
.sup-item.unread .sup-item-title { font-weight: 750; }
.sup-item-chevron { flex: none; color: var(--text-3); }
.sup-dot { display: inline-block; flex: none; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }
.sup-item-title .sup-dot { margin-right: 0; }
.sup-head-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sup-thread { display: grid; gap: 10px; }
.sup-msg { padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.sup-msg.sup-support { border-left: 3px solid var(--accent); }
.sup-msg.sup-internal { border-style: dashed; background: var(--surface-2); }
.sup-msg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 6px; font-size: .86rem; }
.sup-msg-label { color: var(--accent-strong); font-size: .78rem; font-weight: 650; }
.sup-internal .sup-msg-label { color: var(--text-3); font-style: italic; }
.sup-msg-time { margin-left: auto; color: var(--text-3); font-size: .78rem; }
.sup-msg-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.sup-reply { display: grid; gap: 10px; }
.sup-reply p.small { margin: 0; }
.sup-reply-foot { justify-content: flex-end; }
.sup-hints { padding: 10px 14px; border-radius: 10px; background: var(--accent-soft); font-size: .88rem; }
.sup-hints p { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-weight: 600; }
.sup-hints ul { margin: 0; padding-left: 1.2em; }
.sup-hints a { color: var(--accent-strong); }
.sup-kpis { margin-bottom: 16px; }
.sup-search { flex: 1 1 220px; }
.sup-grid tbody tr { cursor: pointer; }
.sup-grid tbody tr:hover, .sup-grid tbody tr:focus-visible { background: var(--surface-2); outline: none; }
.sup-grid td { vertical-align: top; }
.sup-grid td.sup-cell-subject { min-width: 220px; white-space: normal; }
.sup-cell-subject strong { overflow-wrap: anywhere; }
.sup-grid tr.fresh strong { font-weight: 750; }
.sup-back { margin-bottom: 10px; }
.sup-detail { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.sup-side { display: grid; gap: 12px; }
.sup-side-card h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .95rem; }
.sup-info { display: grid; gap: 8px; margin: 10px 0 0; font-size: .88rem; }
.sup-info dt { color: var(--text-3); font-size: .78rem; }
.sup-info dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 1000px) { .sup-detail { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .sup-item { flex-wrap: wrap; padding: 12px 14px; }
  .sup-item-main { flex-basis: calc(100% - 30px); }
  .sup-item-chevron { order: -1; display: none; }
}

/* Installer (ohne JS) */
body.install { background: var(--bg); padding: 30px 16px; }
.install-card { max-width: 620px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 28px; box-shadow: var(--shadow); }
.install-card h1 { margin-bottom: 10px; }
.install-logo { display: block; width: 48px; height: 48px; margin-bottom: 14px; border-radius: 13px; }
.install-card fieldset { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px 16px; margin: 0 0 16px; display: flex; flex-direction: column; gap: 10px; }
.install-card legend { font-weight: 650; padding: 0 6px; }
.install-card label { display: flex; flex-direction: column; gap: 4px; font-size: .88rem; font-weight: 600; color: var(--text-2); flex: 1; }
.install-card input { padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--surface); font-size: 1rem; }
.install-card .row { flex-wrap: nowrap; }
.install-card .narrow { max-width: 110px; }
.install-card small { color: var(--text-3); }
.install-card button { width: 100%; padding: 12px; border: 0; border-radius: 10px; background: var(--accent); color: var(--accent-text); font-weight: 650; font-size: 1rem; cursor: pointer; }
.install-card .err { background: var(--danger-soft); color: var(--danger); padding: 10px 12px; border-radius: 9px; }

/* ------------------------------------------------------------- Übersicht */

/* Spalten setzt overview.js je nach Breite (--ov-cols); minmax(…): lange Inhalte sprengen die Spalte nicht */
.overview-grid { display: grid; grid-template-columns: var(--ov-cols, minmax(0, 1fr)); gap: 20px; align-items: start; }
.overview-grid > .stack { gap: 20px; }

.hero-date { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.hero-date .kw { font-size: .9rem; font-weight: 650; color: var(--accent-strong); background: var(--accent-soft); padding: 3px 10px; border-radius: 99px; }
.hero-clock { font-variant-numeric: tabular-nums; color: var(--text-2); font-weight: 520; }

.briefing { position: relative; }
.briefing .card-head h2 .icon { color: #7b5be0; }
.briefing-meta { font-size: .8rem; color: var(--text-3); }
.briefing-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 12px; }
.briefing-material { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: .84rem; }
.briefing-material a { display: inline-flex; align-items: center; gap: 4px; }
/* Punkt steht in der Materialliste */
.md li.task .md-linked { display: inline-block; margin-left: 6px; color: var(--accent); vertical-align: -2px; }
.briefing-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }

/* Übersicht anpassen */
.ov-col { min-width: 0; }
.overview-grid.editing .ov-col { min-height: 140px; padding: 6px; margin: -6px; border-radius: calc(var(--radius) + 4px); outline: 2px dashed var(--border); outline-offset: -2px; }
.ov-edit { display: flex; align-items: center; gap: 4px; padding: 8px 10px 8px 6px; background: var(--accent-soft); border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; }
.ov-edit strong { display: flex; align-items: center; gap: 7px; font-size: .92rem; min-width: 0; }
.ov-grip { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); cursor: grab; touch-action: none; }
.ov-grip:hover { background: var(--surface); color: var(--text); }
.overview-grid.editing .ov-content { max-height: 170px; overflow: hidden; pointer-events: none; opacity: .55; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.ov-dragging { z-index: 60; box-shadow: var(--shadow-lg, 0 18px 40px rgba(0,0,0,.18)); pointer-events: none; transform: rotate(.6deg); }
.ov-placeholder { border: 2px dashed var(--accent); border-radius: var(--radius); background: var(--accent-soft); opacity: .7; }
body.ov-drag-active { user-select: none; cursor: grabbing; }
.ov-new { animation: ov-flash 1.6s ease; }
@keyframes ov-flash { 0%, 40% { box-shadow: 0 0 0 3px var(--accent); } 100% { box-shadow: var(--shadow-sm); } }
.ov-palette { padding: 14px 16px; margin-bottom: 20px; }
.ov-palette-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.ov-ratio-groups { display: flex; flex-wrap: wrap; gap: 6px 28px; }
.ov-ratio-groups .ov-label { margin-top: 0; }
.ov-ratios { display: flex; flex-wrap: wrap; gap: 8px; }
.ov-ratio { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 10px; min-width: 76px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text-2); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums; }
.ov-ratio:hover { border-color: var(--accent); }
.ov-ratio.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.ov-ratio-bars { display: flex; gap: 3px; width: 54px; height: 18px; }
.ov-ratio-bars i { display: block; flex-basis: 0; border-radius: 3px; background: var(--border-strong, var(--text-3)); }
.ov-ratio.active .ov-ratio-bars i { background: var(--accent); }
.ov-palette-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.ov-add { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ov-add:hover { border-color: var(--accent); background: var(--accent-soft); }
.ov-add > .icon:first-child { color: var(--accent); flex: none; }
.ov-add span { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ov-add small { color: var(--text-3); font-size: .78rem; }
@media (max-width: 1100px) { .ov-side { display: none; } }

/* Bereiche der Übersicht */
.ov-label { text-transform: uppercase; letter-spacing: .04em; font-weight: 650; margin: 14px 0 6px; }
/* Anpassen: Bereich ohne Inhalt (fehlt sonst auf der Übersicht) */
.ov-edit .chip.ov-empty { margin-left: 6px; font-weight: 500; }
.ov-week { display: flex; flex-direction: column; gap: 4px; }
.ov-week-day { display: flex; align-items: flex-start; gap: 12px; padding: 8px 10px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ov-week-day:hover { background: var(--surface-2); }
.ov-week-day.today { background: var(--accent-soft); }
.ov-week-day.selected { border-color: var(--accent); }
.ov-week-day.off { opacity: .7; }
.ov-week-date { display: flex; gap: 8px; align-items: baseline; width: 92px; flex: none; font-variant-numeric: tabular-nums; }
.ov-week-date strong { min-width: 22px; white-space: nowrap; } /* «Mo» nie auf zwei Zeilen */
.ov-week-date span { color: var(--text-2); font-size: .88rem; }
.ov-week-info { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; font-size: .9rem; }
.ov-holiday { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.ov-holiday + .ov-holiday { border-top: 1px solid var(--border); }
.ov-holiday:not(.first) .integration-logo { width: 34px; height: 34px; }
.ov-countdown { display: flex; flex-direction: column; align-items: center; line-height: 1.1; color: var(--accent-strong); }
.ov-countdown strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.ov-countdown span { font-size: .72rem; }
.ov-events { margin-top: 4px; }
.ov-event { display: flex; gap: 12px; padding: 5px 0; font-size: .9rem; border-top: 1px solid var(--border); }
.ov-event-date { width: 118px; flex: none; color: var(--text-2); }
/* «Diese Woche»: die nächsten Ferien unter den Tagen und Terminen */
.ov-holidays { margin-top: 10px; padding-top: 4px; border-top: 1px solid var(--border); }
.ov-links { display: flex; flex-direction: column; }
.ov-link { display: flex; align-items: center; gap: 10px; padding: 7px 8px; margin: 0 -8px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
a.ov-link:hover, button.ov-link:hover { background: var(--surface-2); }
.ov-link > .icon { color: var(--text-3); flex: none; }
.ov-link .grow { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.ov-link small { color: var(--text-3); font-size: .78rem; }
.ov-link.unread .grow { font-weight: 620; }
.ov-link.unread > .icon { color: var(--accent); }
.ov-note { min-height: 120px; resize: none; overflow: hidden; background: #fff8d6; border-color: #f0e2a0; }
@media (prefers-color-scheme: dark) { .ov-note { background: #3a3420; border-color: #5a4f2a; } }
/* Linkliste: Ordner (aufklappbar) und Links; Bearbeiten-Knöpfe beim Darüberfahren, auf Touch immer */
.lk-list { display: flex; flex-direction: column; gap: 1px; }
.lk-row { display: flex; align-items: center; gap: 2px; min-width: 0; margin: 0 -8px; padding-right: 4px; border-radius: 8px; }
.lk-row:hover { background: var(--surface-2); }
.lk-link, .lk-folder-btn {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 7px 8px; border: 0; border-radius: 8px;
  background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.lk-link > .icon, .lk-chevron .icon { color: var(--text-3); flex: none; }
.lk-chevron { display: inline-flex; gap: 4px; flex: none; }
.lk-chevron .icon:last-child { color: var(--accent); }
.lk-folder-btn { font-weight: 620; }
.lk-text { display: flex; flex-direction: column; min-width: 0; }
.lk-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-text small { color: var(--text-3); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-count { margin-left: auto; padding-left: 6px; color: var(--text-3); font-size: .78rem; font-weight: 500; flex: none; }
.lk-items { margin-left: 15px; padding-left: 12px; border-left: 1px solid var(--border); }
.lk-empty { margin: 4px 0 8px; color: var(--text-3); font-size: .85rem; }
.lk-actions { display: flex; flex: none; opacity: 0; transition: opacity .15s; }
.lk-row:hover .lk-actions, .lk-row:focus-within .lk-actions { opacity: 1; }
@media (hover: none) { .lk-actions { opacity: 1; } }
.lk-link:focus-visible, .lk-folder-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.lk-file { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lk-file-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.lk-file-name small { color: var(--text-3); font-weight: 500; }

.ov-screens { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ov-screen { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; color: inherit; text-decoration: none; font-weight: 560; min-width: 0; }
.ov-screen span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-screen:hover { border-color: var(--accent); background: var(--accent-soft); }
.ov-screen .icon { color: var(--accent); flex: none; }
/* Screens nach Ordnern (wie die Linkliste): Ordner zum Aufklappen, darunter die Screens ohne Ordner */
.ov-screen-list { display: grid; gap: 10px; }
.ov-screen-items { padding-top: 4px; padding-bottom: 6px; }
.ov-wx-now { display: flex; align-items: center; gap: 14px; }
.ov-wx-emoji { font-size: 2.4rem; line-height: 1; }
.ov-wx-temp { font-size: 1.8rem; font-variant-numeric: tabular-nums; }
.ov-wx-range { margin-left: auto; text-align: right; }
.ov-wx-hours { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.ov-wx-hour { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 8px; background: var(--surface-2); }
.ov-rain { color: #2f6fd6; font-weight: 650; }
.ov-wx-tomorrow { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }

/* Tagesablauf */
.timeline { position: relative; display: flex; flex-direction: column; gap: 8px; container-type: inline-size; }
.tl-row { display: grid; grid-template-columns: 64px 1fr; gap: 12px; position: relative; }
.tl-time { font-variant-numeric: tabular-nums; font-size: .84rem; color: var(--text-2); padding-top: 9px; text-align: right; line-height: 1.25; }
.tl-time .end { display: block; color: var(--text-3); font-size: .76rem; }
.tl-cells { display: grid; gap: 8px; grid-auto-flow: column; grid-auto-columns: 1fr; min-width: 0; }
/* nacheinander in derselben Spalte (z. B. zwei Halbklassen neben einer längeren Lektion) */
.tl-stack { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tl-part { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tl-part-time { font-size: .74rem; color: var(--text-3); font-variant-numeric: tabular-nums; padding-left: 2px; }
.lesson {
  position: relative; border-radius: 10px; padding: 9px 12px 9px 15px; background: var(--surface-2);
  border: 1px solid var(--border); min-width: 0; overflow: hidden;
}
.lesson::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--lesson-color, var(--border-strong)); }
.lesson.tinted { background: color-mix(in srgb, var(--lesson-color) 26%, var(--surface)); border-color: color-mix(in srgb, var(--lesson-color) 60%, var(--border)); }
.lesson-title { font-weight: 640; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.lesson-name { min-width: 0; overflow-wrap: anywhere; }
.lesson-group { font-size: .74rem; font-weight: 650; color: var(--text-2); background: color-mix(in srgb, var(--surface) 70%, transparent); padding: 0 7px; border-radius: 99px; border: 1px solid var(--border); }
.lesson-details { font-size: .87rem; color: var(--text-2); margin-top: 3px; }
.lesson-details div + div { margin-top: 2px; }
.lesson-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 5px; font-size: .85rem; }
.lesson.cancelled .lesson-title { text-decoration: line-through; opacity: .6; }
.lesson.current { box-shadow: 0 0 0 2px var(--now); }
.lesson.past { opacity: .55; }
.lesson.event { background: color-mix(in srgb, var(--mark-magenta) 9%, var(--surface)); border-style: dashed; }
.lesson.event::before { background: var(--mark-magenta); }
/* Termine aus eingebundenen Kalendern in deren Farbe */
.lesson.event.tinted { background: color-mix(in srgb, var(--lesson-color) 12%, var(--surface)); border-color: color-mix(in srgb, var(--lesson-color) 45%, var(--border)); }
.lesson.event.tinted::before { background: var(--lesson-color); }
.tl-break { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; font-size: .82rem; color: var(--text-3); }
.tl-break .line { display: flex; align-items: center; gap: 8px; }
.tl-break .line::after { content: ""; flex: 1; height: 1px; background: repeating-linear-gradient(90deg, var(--border-strong) 0 4px, transparent 4px 8px); }
.tl-break .notes { display: flex; flex-wrap: wrap; gap: 6px; grid-column: 2; }
.tl-break.lunch .line { color: var(--text-2); }
.tl-now { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; color: var(--now); font-weight: 700; font-size: .78rem; margin: -2px 0; }
.tl-now .label { text-align: right; text-transform: uppercase; letter-spacing: .05em; }
.tl-now .bar { height: 2px; background: var(--now); border-radius: 2px; position: relative; }
.tl-now .bar::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--now); box-shadow: 0 0 0 4px var(--now-soft); }
/* schmal (Handy): Halbklassen untereinander statt zu schmal nebeneinander, schmalere Zeitspalte */
@container (max-width: 460px) {
  .tl-row, .tl-break, .tl-now { grid-template-columns: 46px minmax(0, 1fr); gap: 10px; }
  .tl-cells { grid-auto-flow: row; }
  .tl-stack { display: contents; }
  .tl-cells > *, .tl-stack > * { order: var(--o, 0); }
  .tl-time { font-size: .8rem; }
  .tl-now .label { font-size: .7rem; letter-spacing: .02em; }
}
.day-notes { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.day-off { display: flex; gap: 12px; align-items: center; padding: 18px; border-radius: 10px; background: var(--surface-2); color: var(--text-2); }

/* Aufgaben */
.task-list { display: flex; flex-direction: column; }
.task-folders { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
.task-folder-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.task-folder-chip:hover { border-color: var(--accent); }
.task-folder-chip.active { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.task-folder-chip .count { font-size: .72rem; padding: 0 6px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); }
.task-folder-chip.active .count { background: rgba(255, 255, 255, .25); color: inherit; }
.task-folder-actions { display: inline-flex; gap: 2px; }
/* Handy: Ordner in einer Zeile zum Wischen statt mehrerer Zeilen */
@media (max-width: 640px) {
  .task-folders { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -18px 12px; padding: 0 18px 2px; }
  .task-folders::-webkit-scrollbar { display: none; }
  .task-folder-chip, .task-folders > .btn, .task-folder-actions { flex: none; white-space: nowrap; }
}
.task-meta .task-folder { color: var(--accent); }
.import-preview .task-check { pointer-events: none; opacity: .5; }
.task.has-grip { grid-template-columns: auto auto 1fr auto; }
.task-grip { align-self: start; display: grid; place-items: center; width: 26px; height: 28px; margin: -3px -6px 0 -4px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--text-3); cursor: grab; touch-action: none; }
.task-grip:hover, .task-grip:focus-visible { color: var(--accent); background: var(--surface-2); }
.task.dragging { background: var(--surface); box-shadow: 0 6px 18px rgba(0, 0, 0, .14); border-radius: 10px; position: relative; z-index: 2; }
.task.dragging .task-grip { cursor: grabbing; }
.task-tabs-wrap { container-type: inline-size; margin-top: 8px; }
.task-tabs { align-items: center; }
.task-order { margin-left: auto; flex: none; padding: 2px; }
.task-order .seg-btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; font-size: .8rem; white-space: nowrap; }
@container (max-width: 330px) { .task-order .lbl { display: none; } .task-order .seg-btn { padding: 4px 7px; } }
.task { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding: 10px 4px; border-bottom: 1px solid var(--border); }
.task:last-child { border-bottom: 0; }
.task-check { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--border-strong); background: var(--surface); display: grid; place-items: center; cursor: pointer; margin-top: 1px; padding: 0; color: transparent; }
.task-check:hover { border-color: var(--accent); }
.task.done .task-check { background: var(--success); border-color: var(--success); color: #fff; }
.task-check svg { width: 14px; height: 14px; }
/* Handy und Touch: grössere Tippfläche um das Kästchen, ohne es grösser zu zeichnen */
@media (max-width: 640px), (pointer: coarse) {
  .task-check { position: relative; }
  .task-check::after { content: ''; position: absolute; inset: -9px; }
  .task-order .seg-btn { min-height: 32px; }
}
.task-title { font-weight: 540; overflow-wrap: anywhere; }
.task.done .task-title { text-decoration: line-through; color: var(--text-3); }
.task-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: .8rem; color: var(--text-3); margin-top: 2px; }
.task-notes { font-size: .85rem; color: var(--text-2); white-space: pre-wrap; margin-top: 3px; overflow-wrap: anywhere; }
.task.overdue .due { color: var(--danger); font-weight: 650; }
.task.overdue { background: linear-gradient(90deg, var(--danger-soft), transparent 60%); border-radius: 8px; }
.task.overdue .task-check { border-color: var(--danger); }
.task-actions { display: flex; gap: 2px; opacity: .55; }
.task:hover .task-actions { opacity: 1; }
.task .star { color: #e0a100; }
.quick-add { display: flex; gap: 8px; }
/* Planung: Übersicht der Fächer */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
/* weitere Klassen: Fächer pro Klasse mit Überschrift */
.plan-class-title { margin: 22px 0 10px; font-size: 1rem; color: var(--text-2); }
/* Planung: Reiter «Fächer» / «Gespeicherte Themen», Auswahl der Klasse */
.plan-tabs { margin-bottom: 14px; }
.tab-count, .seg-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 6px; padding: 0 6px; border-radius: 10px; background: var(--surface-3); color: var(--text-2); font-size: .74rem; font-weight: 650; }
.plan-classes-row { margin-bottom: 14px; max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
/* Reiter «Fächer»: Klassen links (scrollen, wenn zu breit), «Fächer» (ausblenden) rechts in derselben Zeile; ohne beides keine leere Zeile */
.plan-tools { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.plan-tools:not(:has(.seg-btn, .plan-hide)) { display: none; }
.plan-tools .plan-classes-row { min-width: 0; margin-bottom: 0; }
.plan-hide-slot { flex: none; }
/* Reiter «Fächer»: die nächsten Wochen oder das nächste Schuljahr. Auf dem Handy kurz («4 Wochen», «2027/28»); mit
   Klassen in einer eigenen Zeile darüber, dann mit den langen Namen, damit die Klassen die ganze Breite haben */
.plan-when { flex: none; margin-right: 4px; }
.plan-when .seg-btn { white-space: nowrap; padding: 6px 10px; }
.plan-when .lbl-short { display: none; }
@media (max-width: 640px) {
  .plan-tools { flex-wrap: wrap; row-gap: 10px; }
  .plan-when .lbl { display: none; }
  .plan-when .lbl-short { display: inline; }
  .plan-tools:has(.plan-classes-row) .plan-when { flex: 1 1 100%; margin-right: 0; }
  .plan-tools:has(.plan-classes-row) .plan-when .seg-btn { flex: 1; }
  .plan-tools:has(.plan-classes-row) .plan-when .lbl { display: inline; }
  .plan-tools:has(.plan-classes-row) .plan-when .lbl-short { display: none; }
  /* darunter die Klassen (scrollen, wenn zu breit) und «Fächer» in derselben Zeile */
  .plan-tools .plan-classes-row { flex: 1 1 0; }
  .plan-tools:has(.plan-classes-row) > .grow { display: none; }
}
.plan-hidden-note { margin: 14px 0 0; }
.plan-hidden-note:empty { display: none; }
.plan-classes .seg-btn { flex: none; display: inline-flex; align-items: center; white-space: nowrap; }
.plan-classes .seg-count { background: var(--warn-soft); color: var(--warn); }
.plan-saved .saved-seqs { margin-top: 0; }
.soon-box + .plan-class-title, .plan-class-title:first-child { margin-top: 0; }
.plan-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; color: inherit; text-decoration: none; transition: border-color .12s, transform .12s; }
.plan-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.plan-card-head { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; }
.plan-card-head strong { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.plan-dot { flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--border-strong); }
.plan-next { display: flex; flex-direction: column; gap: 1px; padding: 7px 9px; border-radius: 8px; background: var(--surface-2); font-size: .88rem; }
.plan-next-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.plan-card-foot { margin-top: auto; padding-top: 2px; }
@media (max-width: 640px) { .plan-grid { grid-template-columns: 1fr; gap: 10px; } }
/* Planung: Reiter mit kurzem Namen auf dem Handy */
.plan-tabs .tab-short { display: none; }
@media (max-width: 560px) { .plan-tabs .tab-long { display: none; } .plan-tabs .tab-short { display: inline; } }
/* Planung, Jahresübersicht: Fächer als Zeilen, Kalenderwochen als Spalten; Themen als Balken, Platz grau, Ferien schraffiert */
.tl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 14px; }
.tl-tools .plan-classes { max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
.tl-span .seg-btn { white-space: nowrap; padding: 6px 10px; }
.tl-span .lbl-short { display: none; }
.tl-card { padding: 0; overflow: hidden; }
.tl-scroll { overflow-x: auto; scrollbar-width: thin; }
.tl { --tl-label: 190px; --tl-wk: 30px; position: relative; display: grid; min-width: min-content; }
.tl.all { --tl-label: 160px; --tl-wk: 18px; }
.tl-corner, .tl-label { position: sticky; left: 0; z-index: 4; grid-column: 1; background: var(--surface); box-shadow: inset -1px 0 0 var(--border); }
.tl-corner { grid-row: 1 / span 2; display: flex; align-items: flex-end; padding: 0 12px 6px; font-size: .72rem; color: var(--text-3); }
.tl-month { grid-row: 1; min-width: 0; padding: 8px 6px 2px; overflow: hidden; font-size: .76rem; font-weight: 650; color: var(--text-2); white-space: nowrap; box-shadow: inset 1px 0 0 var(--border); }
.tl-kw { grid-row: 2; padding: 2px 0 6px; font-size: .68rem; text-align: center; color: var(--text-3); font-variant-numeric: tabular-nums; }
.tl-kw.m, .tl-cell.m { box-shadow: inset 1px 0 0 var(--border); }
.tl-kw.s, .tl-cell.s { box-shadow: inset 2px 0 0 var(--border-strong); }
.tl-kw.off, .tl-cell.off { background: repeating-linear-gradient(135deg, var(--warn-soft) 0 4px, transparent 4px 8px); }
.tl-kw.now { color: var(--now); font-weight: 700; }
.tl-label { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 12px; border-top: 1px solid var(--border); color: inherit; text-decoration: none; }
.tl-label:hover strong { color: var(--accent); }
.tl-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.tl-name strong, .tl-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-name strong { font-size: .88rem; }
.tl-name small { font-size: .72rem; color: var(--text-3); }
.tl-track { grid-column: 2 / -1; position: relative; display: grid; min-height: 40px; border-top: 1px solid var(--border); }
/* weiterer Bereich desselben Fachs: gestrichelt abgesetzt */
.tl-label.more, .tl-track.more { border-top-style: dashed; }
.tl-cell { display: block; }
.tl-bar { position: absolute; top: 0; bottom: 0; z-index: 1; height: 27px; margin: auto 0; display: flex; align-items: center; min-width: 4px; padding: 0 7px; overflow: hidden; border: 0; border-radius: 6px; background: var(--accent); color: #fff; font: inherit; font-size: .76rem; font-weight: 600; white-space: nowrap; cursor: pointer; }
.tl-bar > span { overflow: hidden; text-overflow: ellipsis; }
.tl-bar:hover { filter: brightness(1.1); }
.tl-bar:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
.tl-bar.free { justify-content: center; padding: 0; background: var(--surface-3); color: var(--accent); box-shadow: inset 0 0 0 1px var(--border); }
.tl-bar.free .icon { width: 14px; height: 14px; opacity: 0; }
.tl-bar.free:hover, .tl-bar.free:focus-visible { filter: none; background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.tl-bar.free:hover .icon, .tl-bar.free:focus-visible .icon { opacity: 1; }
.tl-past { position: absolute; top: 0; bottom: 0; left: 0; z-index: 2; background: var(--surface); opacity: .45; pointer-events: none; }
/* Heute: über alle Zeilen, auch über den Rand oben (nicht .tl-now, so heisst die Jetzt-Linie der Übersicht) */
.tl-today { position: absolute; top: -1px; bottom: 0; z-index: 3; width: 2px; margin-left: -1px; background: var(--now); pointer-events: none; }
.tl-group { grid-column: 1 / -1; padding: 10px 12px 4px; border-top: 1px solid var(--border); background: var(--surface-2); font-size: .8rem; font-weight: 650; color: var(--text-2); }
.tl-group > span { position: sticky; left: 12px; display: inline-block; }
.tl-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 10px 14px; border-top: 1px solid var(--border); color: var(--text-2); }
.tl-foot > span { display: inline-flex; align-items: center; gap: 6px; }
.tl-foot .tl-help { flex: 1 1 18rem; justify-content: flex-end; color: var(--text-3); text-align: right; }
.tl-key { display: inline-block; flex: none; width: 18px; height: 10px; border-radius: 3px; background: var(--accent); }
.tl-key.free { background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--border); }
.tl-key.off { background: repeating-linear-gradient(135deg, var(--warn) 0 2px, var(--warn-soft) 2px 4px); }
.tl-key.now { width: 2px; height: 14px; border-radius: 0; background: var(--now); }
.tl-hint.warn { color: var(--warn); }
/* «Fächer» (ausblenden) in der Planung, Reiter «Fächer» und «Jahresübersicht» */
.plan-hide.on { color: var(--accent-strong); }
.plan-hide .chip { padding: 0 7px; }
@media (max-width: 640px) { .tl-print .lbl, .plan-hide .lbl { display: none; } }
@media (max-width: 640px) {
  .tl, .tl.all { --tl-label: 112px; }
  .tl.all { --tl-wk: 22px; }
  .tl-label { gap: 6px; padding: 6px 8px; }
  .tl-name strong { font-size: .82rem; }
  .tl-corner { padding: 0 8px 6px; }
  .tl-span .lbl { display: none; }
  .tl-span .lbl-short { display: inline; }
  .tl-foot .tl-help { justify-content: flex-start; text-align: left; }
}
/* Abläufe (Vorlagen für wiederkehrende Aufgaben) */
.routine-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 10px; }
.routine-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.routine-row + .routine-row { border-top: 1px solid var(--border); }
.routine-icon { color: var(--accent); display: inline-flex; }
.routine-steps { display: flex; flex-direction: column; gap: 8px; }
.routine-step { display: grid; grid-template-columns: 250px minmax(0, 1.5fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.routine-when { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 6px; }
.routine-plan { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 10px; max-height: 46vh; overflow-y: auto; }
.routine-plan-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; }
.routine-plan-row + .routine-plan-row { border-top: 1px solid var(--border); }
.routine-plan-row input { width: 17px; height: 17px; accent-color: var(--accent); flex: none; }
.routine-plan-date { flex: none; width: 78px; font-variant-numeric: tabular-nums; color: var(--text-2); font-size: .88rem; }
.routine-plan-row.past { opacity: .65; }
@media (max-width: 640px) {
  .routine-row { flex-wrap: wrap; }
  .routine-row .btn-group { width: 100%; justify-content: flex-end; }
  .routine-step { grid-template-columns: minmax(0, 1fr) auto; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
  .routine-step > .routine-when { grid-column: 1; }
  .routine-step > .btn { grid-column: 2; grid-row: 1; }
  .routine-step > .input { grid-column: 1 / -1; }
}
/* Material- und Kopierliste */
.material-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin: -2px 0 12px; padding: 9px 12px; border-radius: 10px; background: var(--accent-soft); }
.material-bar p { margin: 0; flex: 1 1 280px; font-size: .86rem; color: var(--text-2); }
.material-sheet .ps-head { border-bottom: 2px solid var(--text); padding-bottom: 8px; }
.mat-day { margin-top: 14px; }
.mat-day h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 1rem; }
.mat-late { font-size: .74rem; font-weight: 650; color: var(--danger); }
.mat-list { list-style: none; margin: 0; padding: 0; }
.mat-item { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; border-bottom: 1px solid var(--border); break-inside: avoid; }
.mat-box { flex: none; width: 14px; height: 14px; margin-top: 2px; border: 1.5px solid var(--text-2); border-radius: 3px; }
.mat-title { font-size: .95rem; line-height: 1.35; }
.mat-notes { font-size: .8rem; color: var(--text-2); margin-top: 2px; white-space: pre-wrap; }
.quick-add .input { flex: 1; }

/* -------------------------------------------------------------- Stundenplan */

.week-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wn-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.week-title .wk-short { display: none; }
.wn-tools { flex: 1; }
.wn-more { margin-left: auto; }
/* Handy: Woche in der ersten Zeile, Hervorheben und Eintrag in der zweiten, der Rest unter «Mehr» */
@media (max-width: 760px) {
  .page-head:has(.week-nav) { margin-bottom: 14px; }
  .page-actions:has(> .week-nav) { width: 100%; min-width: 0; }
  .week-nav { width: 100%; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px; }
  .wn-group { flex-wrap: nowrap; }
  .wn-week .week-title-wrap { flex: 1; min-width: 0; }
  .wn-week .week-title { min-width: 0; width: 100%; padding: 6px 4px; }
  .week-title .wk-long { display: none; }
  .week-title .wk-short { display: inline; }
  .wn-extra { display: none !important; }
  .wn-add .wn-lbl { display: none; }
  .wn-tools .select-btn { flex: 1 1 0; min-width: 0; padding-left: 10px; padding-right: 10px; }
  .wn-tools .select-btn-text { flex: 1; min-width: 0; max-width: none; text-align: left; }
  .wn-tools .sb-full { display: none; }
  .wn-tools .sb-short { display: inline; }
}
/* Handy: Tage als fünf Reiter, beim Scrollen oben */
.day-tabs { position: sticky; top: 0; z-index: 6; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 0 -4px 12px; padding: 6px 4px; background: var(--bg); }
.day-tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px; border: 1px solid transparent; border-radius: 10px; background: none; color: var(--text-2); font: inherit; cursor: pointer; min-width: 0; }
.day-tab .dt-wd { font-weight: 700; font-size: .95rem; }
.day-tab .dt-date { font-size: .74rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.day-tab.today:not(.active) { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--accent-strong); }
.day-tab.active { background: var(--accent); color: var(--accent-text); }
.day-tab.active .dt-date { color: inherit; opacity: .85; }
.day-tab.off:not(.active) { opacity: .55; }
.day-tab .dt-dot { position: absolute; top: 5px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--mark-magenta); }
.week-title-wrap { position: relative; display: inline-flex; }
.week-title { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-weight: 650; min-width: 210px; padding: 6px 10px; border: 1px solid transparent; border-radius: 8px; background: none; color: inherit; cursor: pointer; }
.week-title:hover { border-color: var(--border); background: var(--surface); }
.week-title .icon { color: var(--text-3); }
/* unsichtbar unter dem Titel: Kalender des Browsers (showPicker) erscheint dort */
.week-jump { position: absolute; left: 50%; bottom: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
/* Fächeransicht: Lektionen eines Fachs untereinander, nach Wochen */
.subject-view { display: flex; flex-direction: column; gap: 12px; }
/* Handy: eine Zeile (Fach, Halbklasse, Suche und «…») */
@media (max-width: 760px) {
  .week-nav.subject-nav { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 6px; }
  .subject-nav .select-btn { flex: 0 1 auto; min-width: 0; padding-left: 10px; padding-right: 10px; }
  .subject-nav .select-btn.sn-subject { flex: 1 1 0; min-width: 6.5rem; }
  .subject-nav .select-btn:not(.sn-subject) { max-width: 42%; }
  .subject-nav .select-btn > .icon:first-child { display: none; } /* Platz für den Namen des Fachs */
  .subject-nav .select-btn-text { flex: 1; min-width: 0; max-width: none; text-align: left; }
  .subject-nav .sb-full { display: none; }
  .subject-nav .sb-short { display: inline; }
}
.ss-more { display: flex; justify-content: center; }
/* Inhalte ohne Lektion (fällt aus, freier Tag) */
.ss-stranded-list { margin: 6px 0 8px; padding: 0; list-style: none; display: grid; gap: 4px; }
.ss-stranded-row { display: flex; align-items: center; gap: 8px; }
.ss-stranded-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .ss-stranded-row { flex-wrap: wrap; gap: 2px 8px; } }
/* Themen, die bald ohne Inhalt beginnen (Übersicht, Planung) */
.soon-box:not(:empty) { margin: 12px 0 14px; }
.soon-list { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.soon-row { display: flex; align-items: center; gap: 8px; }
.soon-row > .grow { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .soon-row { flex-wrap: wrap; gap: 2px 8px; } .soon-row > .grow { flex-basis: calc(100% - 20px); } }
/* Klassenliste aus Schulsoftware: Vorschau mit eigener Bildlaufleiste */
.import-preview { max-height: 280px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; }
.import-preview .student-table { margin: 0; }
.ss-week { padding: 0; overflow: hidden; }
.ss-week.current { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.ss-week-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: .92rem; }
.ss-week-head:last-child { border-bottom: 0; }
.ss-none { padding: 10px 14px; }
/* Filter «Bereich»: Wochen ohne seine Lektionen als eine Zeile */
.ss-week-skip { display: flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px dashed var(--border); border-radius: var(--radius); color: var(--text-3); }
.ss-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 10px 8px 14px; border-top: 1px solid var(--border); }
.ss-week-head + .ss-row { border-top: 0; }
.ss-row.today { background: color-mix(in srgb, var(--accent-soft) 55%, transparent); }
.ss-row.past .ss-when, .ss-row.past .we-inline:not(:focus) { opacity: .62; }
.ss-row.cancelled .ss-when strong { text-decoration: line-through; }
/* Themenblock der Jahresplanung: Farbstreifen links, Name und Nummer, Kopf beim Anfang des Blocks */
.ss-row.in-block { box-shadow: inset 4px 0 0 var(--blk); }
.ss-blk { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; color: var(--text-2); }
.ss-blk > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-blk .yp-dot { width: 8px; height: 8px; }
.ss-block-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 10px 8px 14px; border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--blk) 9%, var(--surface)); box-shadow: inset 4px 0 0 var(--blk); font-size: .9rem; }
.ss-week-head + .ss-block-head { border-top: 0; }
.ss-block-head + .ss-row { border-top: 1px dashed var(--border); }
.ss-block-head .grow { min-width: 10rem; }
.ss-when { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding-top: 5px; }
.ss-when strong { font-size: .92rem; }
.ss-field { position: relative; min-width: 0; }
.ss-status { position: absolute; right: 8px; bottom: -15px; font-size: .72rem; }
.ss-readonly { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px 2px; min-height: 36px; }
.ss-readonly .we-view { flex: 1 1 100%; }
.ss-menu { width: 32px; height: 32px; display: grid; place-items: center; margin-top: 2px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--text-3); cursor: pointer; }
.ss-menu:hover, .ss-menu:focus-visible { background: var(--surface-2); color: var(--text); }
/* Inhalt in eine andere Lektion ziehen: Griff nur bei Lektionen mit Inhalt, die nicht fixiert sind; Ziel hervorgehoben mit Hinweis */
.ss-grip { cursor: grab; touch-action: none; }
.ss-row:not(.filled) .ss-grip, .ss-row.pinned .ss-grip { visibility: hidden; }
.ss-pin { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; border: 0; font: inherit; }
.ss-pin .icon { width: 12px; height: 12px; }
.ss-row.ss-dragging { opacity: .45; }
.ss-row.ss-drop { position: relative; background: color-mix(in srgb, var(--accent-soft) 70%, transparent); box-shadow: inset 0 0 0 2px var(--accent); }
.ss-row.ss-drop::after { content: attr(data-drop); position: absolute; z-index: 3; top: -11px; right: 12px; max-width: calc(100% - 24px); padding: 2px 10px; border-radius: 999px; background: var(--accent); color: var(--accent-text); font-size: .74rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.ss-ghost { position: fixed; z-index: 10050; pointer-events: none; display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-lg); font-size: .85rem; }
.ss-ghost span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.we-editor.we-inline { position: relative; min-height: 36px; max-height: none; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.we-editor.we-inline:hover { border-color: var(--border-strong); }
.we-editor.we-inline:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.we-editor.we-inline.is-empty::before { content: attr(data-placeholder); position: absolute; left: 11px; top: 6px; color: var(--text-3); pointer-events: none; }
/* Planung → Termine: Bezeichnung direkt in der Zeile, darunter die Notiz */
.ev-row .ss-field { display: flex; flex-direction: column; gap: 4px; }
.ev-title { width: 100%; min-width: 0; padding: 5px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-weight: 600; }
.ev-title:hover { border-color: var(--border); }
.ev-title:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.ss-row.past .ev-title:not(:focus) { opacity: .62; }
.ss-week-head .ev-add { margin: -6px -8px -6px 0; }
.plan-events .plan-card-head .icon { color: var(--accent); }
.ss-preview { display: flex; flex-direction: column; gap: 6px; }
/* Vorschlag von Claude im Dialog «Sequenz einfügen» */
.ss-ai { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid color-mix(in srgb, #6b4fd8 30%, var(--border)); border-radius: 10px; background: color-mix(in srgb, #6b4fd8 5%, var(--surface)); }
.ss-ai-grid { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 10px; }
@media (max-width: 640px) { .ss-ai-grid { grid-template-columns: minmax(0, 1fr) 90px; } }
.ss-files { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ss-files .chip { max-width: 100%; overflow-wrap: anywhere; }
/* «Inhalte einfügen»: für welches Thema, dann die Wege (selbst schreiben, Liste, Thema, KI) */
.ss-for { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.ss-ways { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ss-way { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ss-way strong { display: flex; align-items: flex-start; gap: 6px; font-size: 13.5px; line-height: 1.3; }
.ss-way strong .icon { flex: none; margin-top: 1px; }
.ss-way-hint { font-size: 12px; color: var(--text-2); line-height: 1.3; }
@media (hover: hover) { .ss-way:hover { border-color: var(--accent); } }
.ss-way.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.ss-way.ai.on { border-color: #6b4fd8; background: color-mix(in srgb, #6b4fd8 8%, var(--surface)); box-shadow: inset 0 0 0 1px #6b4fd8; }
.ss-ways.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .ss-ways, .ss-ways.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ss-ways.three > :last-child { grid-column: span 2; } }
/* eingefügte Tabelle: welche Spalten in die Lektion kommen */
.ss-table > .grow { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ss-cols { display: flex; flex-wrap: wrap; gap: 6px; }
.ss-col { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); cursor: pointer; overflow-wrap: anywhere; }
.ss-col.on { border-color: var(--accent); background: var(--accent-soft); }
/* KI: neu vorschlagen oder aus einem Dokument übernehmen */
.ss-ai-mode { display: flex; width: 100%; }
.ss-ai-mode .seg-btn { min-width: 0; }
.ss-doc-row { gap: 6px; flex-wrap: wrap; align-items: center; }
.ss-plan { display: flex; flex-direction: column; max-height: 260px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; }
.ss-plan-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 10px; padding: 6px 10px; border-top: 1px solid var(--border); font-size: .88rem; }
.ss-plan-row:first-child { border-top: 0; }
.ss-plan .warn-text { color: var(--warn); }
/* Thema der Lektion, zu dem der Inhalt danach gehört (Vorjahr übernehmen), mit seiner Farbe */
.ss-theme { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-size: .74rem; white-space: nowrap; }
.ss-theme .yp-dot { width: 7px; height: 7px; margin-right: 4px; vertical-align: 0; }
.ss-theme.warn { background: var(--warn-soft); color: var(--warn); }
.ss-plan-row.tinted { box-shadow: inset 3px 0 0 var(--blk); }
/* Assistent: Schritte oben, die erledigten führen zurück */
.wiz-steps { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.wiz-steps li { flex: 1; min-width: 0; }
.wiz-steps button { width: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 0; border-radius: 8px; background: none; color: var(--text-3); font: inherit; font-size: .86rem; font-weight: 600; text-align: left; }
.wiz-steps button:disabled { cursor: default; opacity: 1; }
.wiz-steps .done button { color: var(--text-2); cursor: pointer; }
.wiz-steps .done button:hover { background: var(--surface-2); color: var(--text); }
.wiz-steps .on button { color: var(--text); }
.wiz-steps .n { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-3); font-size: .78rem; }
.wiz-steps .on .n { background: var(--accent); color: var(--accent-text); }
.wiz-steps .done .n { background: var(--accent-soft); color: var(--accent-strong); }
.wiz-steps .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Schuljahreswechsel: Klassen als Karten, Stundenplan zur Wahl, Fächer mit Quelle, Übersicht und Ergebnis */
.sy-class { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; }
.sy-class-head { display: flex; align-items: center; gap: 12px; }
.sy-class-head .select { width: auto; max-width: 230px; }
.sy-class-details p { margin: 0; }
.sy-kids summary { cursor: pointer; }
.sy-kid-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px 12px; margin-top: 8px; }
.sy-choice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.sy-choice.on { border-color: var(--accent); background: var(--accent-soft); }
.sy-choice input { margin-top: 3px; }
.sy-subjects { display: grid; border: 1px solid var(--border); border-radius: 10px; }
.sy-subject { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.sy-subject + .sy-subject { border-top: 1px solid var(--border); }
.sy-subject.muted { color: var(--text-3); }
.sy-subject-name { flex: 1; min-width: 0; }
.sy-subject-name .chip { margin-left: 6px; }
.sy-subject-pick { display: flex; gap: 8px; flex: 0 1 460px; min-width: 0; }
.sy-subject-pick .select { min-width: 0; }
.sy-subject-pick .select:first-child { flex: 1 1 260px; }
.sy-subject-pick .select:last-child { flex: 0 1 190px; }
.sy-h { margin: 6px 0 0; font-size: .95rem; }
.sy-summary { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sy-summary li { display: flex; gap: 8px; align-items: flex-start; }
.sy-summary li .icon { flex: none; margin-top: 3px; color: var(--accent); }
.sy-summary li.warn .icon { color: var(--warn); }
.sy-links { flex-wrap: wrap; gap: 8px; }
@media (max-width: 640px) {
  .sy-class-head { flex-wrap: wrap; }
  .sy-class-head .select { width: 100%; max-width: none; }
  .sy-subject { flex-direction: column; align-items: stretch; }
  .sy-subject-pick { flex: none; flex-direction: column; }
  .sy-subject-pick .select:first-child, .sy-subject-pick .select:last-child { flex: none; }
}
/* Vorjahr übernehmen: Quelle, Themen von damals (mit Farbe) und Inhalte in Abschnitten zwischen den Ferien */
.adopt-foot { gap: 8px; width: 100%; }
.adopt-found-box { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: .88rem; }
.adopt-dots { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.adopt-dot, .adopt-topic { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.adopt-mode { display: flex; width: 100%; }
.adopt-mode .seg-btn { min-width: 0; line-height: 1.25; }
.adopt-sec-text { display: flex; flex-direction: column; min-width: 0; }
.adopt-sec-text .small { font-weight: 400; }
.adopt-topics { display: grid; gap: 4px; }
@media (max-width: 640px) {
  .wiz-steps li, .wiz-steps li.on { flex: none; }
  .wiz-steps li:not(.on) .lbl { display: none; }
  .adopt-foot .adopt-back ~ .adopt-cancel { display: none; }
}
.adopt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.adopt-src { max-height: min(40vh, 340px); overflow: auto; border: 1px solid var(--border); border-radius: 8px; }
.adopt-src > .empty { padding: 16px; }
.adopt-src-head { margin-bottom: 4px; }
.adopt-none { margin: 0; padding: 12px; }
.adopt-sec + .adopt-sec { border-top: 1px solid var(--border); }
.adopt-sec-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 10px; background: var(--surface-2); }
.adopt-sec-label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: .88rem; }
.adopt-sec-label input, .adopt-row input { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--accent); }
.adopt-row { display: grid; grid-template-columns: auto 92px minmax(0, 1fr); align-items: baseline; gap: 8px; padding: 5px 10px 5px 30px; border-top: 1px solid var(--border); font-size: .86rem; cursor: pointer; }
@media (max-width: 640px) { .adopt-lbl { display: none; } .adopt-row { grid-template-columns: auto minmax(0, 1fr); padding-left: 14px; } .adopt-row > span:last-child { grid-column: 2; } }
.linklike { padding: 0; border: 0; background: none; color: var(--accent-strong); font: inherit; text-decoration: underline; cursor: pointer; }
.ss-plan-break { padding: 3px 10px; border-top: 1px solid var(--border); background: var(--warn-soft); color: var(--warn); font-size: .76rem; font-weight: 650; text-align: center; }
.ss-plan-break:first-child { border-top: 0; }
/* Lektionen für später speichern: Auswahl mit Häkchen, Leiste unten */
.ss-row.ss-pickrow { grid-template-columns: 150px minmax(0, 1fr); cursor: pointer; user-select: none; -webkit-user-select: none; } /* Shift-Klick markiert keinen Text */
.ss-pickrow:hover { background: var(--surface-2); }
.ss-pickrow.picked { background: color-mix(in srgb, var(--accent-soft) 75%, transparent); }
.ss-pickrow.off { cursor: default; }
.ss-pickrow.off .ss-when, .ss-pickrow.off .ss-field { opacity: .55; }
.ss-pick { display: inline-flex; align-items: center; gap: 8px; }
.ss-pick input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--accent); }
.ss-pickbar { position: sticky; bottom: 14px; z-index: 5; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); }
.ss-pickcount { font-size: .92rem; }
.ss-first { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
/* Planung: gespeicherte Sequenzen, nach Fach, mit Suche und Filter nach Klassenstufe */
.saved-seqs { margin-top: 18px; }
.saved-seqs > p { padding: 14px 18px; }
.saved-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.saved-search { position: relative; flex: 1 1 240px; display: flex; align-items: center; min-width: 0; }
.saved-search > .icon { position: absolute; left: 10px; color: var(--text-3); pointer-events: none; }
.saved-search input { width: 100%; padding-left: 32px; }
.saved-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.saved-filters .select { width: auto; min-width: 9em; max-width: 14em; }
/* auf dem Handy zwei Filter pro Zeile */
@media (max-width: 600px) { .saved-filters { flex: 1 1 100%; } .saved-filters .select { flex: 1 1 40%; min-width: 0; max-width: none; } }
.saved-group-head { display: flex; align-items: baseline; gap: 8px; padding: 7px 18px; background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: .9rem; }
.saved-group + .saved-group .saved-group-head { border-top: 1px solid var(--border); }
.saved-none { margin: 0; padding: 14px 18px; }
.saved-title { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.saved-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 14px 10px 18px; border-top: 1px solid var(--border); }
.saved-row > .btn { margin-left: auto; } /* schmal: unter dem Namen, rechts */
.saved-group-head + .saved-row { border-top: 0; }
/* Themen wählen (z. B. zum Herunterladen): Häkchen, die ganze Zeile wählt; die Leiste darunter klebt unten */
.saved-pickrow { flex-wrap: nowrap; align-items: flex-start; cursor: pointer; user-select: none; -webkit-user-select: none; }
.saved-pickrow:hover { background: var(--surface-2); }
.saved-pickrow.picked { background: color-mix(in srgb, var(--accent-soft) 75%, transparent); }
.saved-pickrow .ss-pick { padding-top: 2px; }
.pick-slot { display: contents; }
/* Vorschau importierter Themen (Datei, Antwort einer KI): jede Lektion mit Inhalt und Material wie in der Planung */
.tp-preview { display: flex; flex-direction: column; gap: 10px; }
.tp-topic { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow: hidden; }
.tp-head { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 6px; align-items: center; padding: 10px 12px; background: var(--surface-2); cursor: pointer; list-style: none; }
.tp-head::-webkit-details-marker { display: none; }
.tp-head > .icon { color: var(--text-3); transition: transform .15s; }
.tp-topic:not([open]) > .tp-head > .icon { transform: rotate(-90deg); }
.tp-topic[open] > .tp-head { border-bottom: 1px solid var(--border); }
.tp-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; overflow-wrap: anywhere; }
.tp-meta { grid-column: 2; margin-top: 2px; overflow-wrap: anywhere; }
.tp-topic > .notice { margin: 10px 12px 0; }
.tp-lessons { list-style: none; margin: 0; padding: 0; }
.tp-lessons > li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; padding: 9px 12px; border-top: 1px solid var(--border); }
.tp-lessons > li:first-child { border-top: 0; }
.tp-n { padding-top: 1px; color: var(--text-3); font-size: .8rem; font-weight: 650; text-align: right; }
.tp-body { min-width: 0; overflow-wrap: anywhere; }
.tp-mat { display: flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--text-2); }
.tp-mat .icon { flex: none; }
.tp-legend { gap: 6px; }
/* Markierter Text im dunklen Design: die Markierung bleibt hell, die Schrift darauf dunkel */
:root[data-theme="dark"] :is(.we-view, .we-editor) span[style*="background"] { color: #1c2430; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.we-view, .we-editor) span[style*="background"] { color: #1c2430; } }
/* Thema mit KI erstellen: Prompt zum Ansehen */
.ai-prompt summary { cursor: pointer; color: var(--text-2); }
.ai-prompt pre { margin: 8px 0 0; max-height: 240px; overflow: auto; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text); font-size: .78rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
/* «Antwort der KI» mit «Antwort löschen» rechts; gleich hoch, ob der Knopf da ist oder nicht */
.tp-answer-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; }
.saved-fields { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 10px; }
@media (max-width: 640px) { .saved-fields { grid-template-columns: minmax(0, 1fr); } }
/* im Dialog «Gespeicherte Sequenz einfügen» */
.saved-pick .saved-tools { padding: 0 0 12px; border-bottom: 0; }
.saved-pick .saved-groups { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.saved-pick .saved-group-head { padding: 6px 12px; }
.saved-pick .picker-row { width: 100%; }
.saved-pick .saved-group .picker-row:last-child { border-bottom: 0; }
.saved-main { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.saved-main:hover strong { color: var(--accent-strong); }
.saved-main > * { max-width: 100%; overflow-wrap: anywhere; }
.saved-items { display: flex; flex-direction: column; max-height: min(52vh, 480px); overflow: auto; border: 1px solid var(--border); border-radius: 8px; }
.saved-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 6px 6px 10px; border-top: 1px solid var(--border); }
.saved-item:first-child { border-top: 0; }
/* Material einer gespeicherten Sequenz: Lektion, was zu tun ist, Datei, entfernen */
.seq-mat-rows { display: grid; gap: 6px; }
.seq-mat-row { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) 32px 32px; gap: 6px; align-items: center; }
@media (max-width: 560px) {
  .seq-mat-row { grid-template-columns: minmax(0, 1fr) 32px 32px; }
  .seq-mat-row > select { grid-column: 1 / -1; }
  .seq-mat-row + .seq-mat-row { padding-top: 8px; border-top: 1px solid var(--border); }
}
.saved-n { flex: none; width: 24px; padding-top: 3px; text-align: right; }
@media (max-width: 640px) {
  .ss-row { grid-template-columns: minmax(0, 1fr) auto; padding: 8px 8px 10px 12px; }
  .ss-when { grid-column: 1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding-top: 6px; }
  .ss-field { grid-column: 1 / -1; grid-row: 2; }
  .ss-tools { grid-column: 2; grid-row: 1; }
  .ss-plan-row { grid-template-columns: 1fr; gap: 2px; }
  .ss-row.ss-pickrow { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) { .ss-pickbar { bottom: calc(72px + env(safe-area-inset-bottom)); } }
@media (max-width: 560px) { .ss-pickbar .pb-lbl { display: none; } .ss-pickbar .btn.sm { padding-left: 9px; padding-right: 9px; } }
/* Meldungen (mit «Rückgängig») über der Leiste der Auswahl, nicht darauf */
body:has(.ss-pickbar) .toasts { bottom: 84px; }
@media (max-width: 860px) { body:has(.ss-pickbar) .toasts { bottom: calc(150px + env(safe-area-inset-bottom)); } }
/* Halbklassen nebeneinander: eine Spalte pro Halbklasse, Lektionen der ganzen Klasse über die ganze Breite */
.ss-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); border-top: 1px solid var(--border); }
.ss-week-head + .ss-side { border-top: 0; }
.ss-side + .ss-row, .ss-side + .ss-block-head { border-top: 1px solid var(--border); }
.ss-side-col { min-width: 0; }
.ss-side-col + .ss-side-col { border-left: 1px solid var(--border); }
.ss-side-head { padding: 6px 10px 0 14px; }
.ss-side-head + .ss-row, .ss-side-head + .ss-block-head { border-top: 0; }
.ss-side .ss-row { grid-template-columns: minmax(0, 1fr) auto; padding: 8px 8px 10px 14px; }
.ss-side .ss-when { grid-column: 1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding-top: 6px; }
.ss-side .ss-when > .chip.accent { display: none; } /* steht über der Spalte */
.ss-side .ss-field { grid-column: 1 / -1; grid-row: 2; }
.ss-side .ss-tools { grid-column: 2; grid-row: 1; }
.ss-side .ss-row.ss-pickrow { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 760px) {
  .ss-side { grid-template-columns: minmax(0, 1fr); }
  .ss-side-col + .ss-side-col { border-left: 0; border-top: 1px solid var(--border); }
}
/* Wie viel Platz bleibt */
.ss-room { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.ss-room > .icon { margin-top: 2px; color: var(--text-3); flex: none; }
.ss-room-line { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; }
.ss-room-part { white-space: nowrap; }
@media (max-width: 560px) { .ss-room-part { white-space: normal; } }
/* Suche in der Planung */
.ss-search { margin-bottom: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.ss-search-bar { display: flex; align-items: center; gap: 8px; }
.ss-search-bar > .icon { flex: none; color: var(--text-3); }
.ss-search-bar .input { flex: 1; min-width: 0; }
.ss-search-bar .select { width: auto; flex: none; }
.ss-hits { display: flex; flex-direction: column; gap: 2px; max-height: min(50vh, 420px); overflow: auto; }
.ss-hits:empty { display: none; }
.ss-hit { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 10px; padding: 7px 8px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: .88rem; text-align: left; cursor: pointer; }
.ss-hit:hover, .ss-hit:focus-visible { background: var(--surface-2); outline: none; }
.ss-hit-when { color: var(--text-2); }
.ss-hit-text { min-width: 0; overflow-wrap: anywhere; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.ss-hit-files { color: var(--text-2); }
.ss-hit mark { background: color-mix(in srgb, var(--mark-yellow) 35%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
@media (max-width: 640px) { .ss-hit { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.ss-row.ss-flash { animation: ss-flash 2.2s ease-out; }
@keyframes ss-flash { 0%, 35% { background: color-mix(in srgb, var(--mark-yellow) 40%, transparent); } }
/* Suche im Stundenplan: Treffer ab heute nach dem Strich, gewählter Treffer, Eintrag leuchtet nach dem Sprung auf */
.sp-today { display: flex; align-items: center; gap: 8px; margin: 4px 8px; font-size: .74rem; font-weight: 650; color: var(--accent-strong); }
.sp-today::after { content: ""; flex: 1; border-top: 1px solid currentColor; opacity: .4; }
.ss-hit[aria-current] { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.sp-found { animation: sp-found 2.6s ease-out; }
@keyframes sp-found { 0%, 45% { box-shadow: inset 0 0 0 3px var(--mark-yellow), 0 0 0 3px color-mix(in srgb, var(--mark-yellow) 40%, transparent); } }
.wn-search { margin-left: auto; }
.wn-search + .wn-more { margin-left: 0; }
@media (max-width: 640px) {
  /* Handy: Feld und Schliessen oben, Schuljahr und «Suchen» darunter */
  .sp-search .ss-search-bar { flex-wrap: wrap; }
  .sp-search .ss-search-bar .input { flex: 1 1 calc(100% - 84px); }
  .sp-search .ss-search-bar .select { order: 1; flex: 1; }
  .sp-search .ss-search-bar .sp-go { order: 2; }
}
/* Ziehen mit Alt/Ctrl: Kopie */
.ss-ghost-copy { display: none; margin-left: 8px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--accent-text); font-size: .72rem; font-style: normal; font-weight: 650; }
.ss-ghost.copy .ss-ghost-copy { display: inline-block; }
/* Letzte Schritte, wiederkehrende Inhalte */
.ss-hist { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 8px; max-height: 340px; overflow: auto; }
.ss-hist .empty { padding: 14px; }
.ss-hist-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--border); }
.ss-hist-row:first-child { border-top: 0; }
.ss-hist-row .grow { min-width: 0; overflow-wrap: anywhere; }
.ss-rec-title { margin: 6px 0 0; font-size: .95rem; }
.ss-rec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ss-rec-lessons { display: flex; flex-wrap: wrap; gap: 4px 18px; }
@media (max-width: 720px) { .ss-rec-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ss-rec-grid > :first-child { grid-column: 1 / -1; } }
/* Fächeransicht auf Papier: Tabelle mit Datum, Zeit, Halbklasse, Inhalt */
.subject-sheet .ss-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.subject-sheet .ss-table th { text-align: left; padding: 5px 8px; background: var(--surface-2); border: 1px solid var(--border); font-size: .74rem; }
.subject-sheet .ss-table td { padding: 5px 8px; border: 1px solid var(--border); vertical-align: top; }
/* Jahresübersicht drucken: Zeitleiste auf A4 quer, Fächer als Zeilen, Wochen als Spalten (auch Grundlage fürs PDF:
   Ferien und Platz ohne Verlauf, Striche als Rand) */
.timeline-sheet .tp-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 7.5pt; line-height: 1.2; }
.timeline-sheet .tp-c-label { width: 30mm; }
.timeline-sheet th, .timeline-sheet td { padding: 0; border: 1px solid var(--border); }
.timeline-sheet thead th { background: var(--surface-2); font-weight: 650; }
.timeline-sheet .tp-corner { padding: 1mm 2mm; text-align: left; vertical-align: bottom; color: var(--text-3); font-weight: 500; }
.timeline-sheet .tp-month { padding: 1mm; overflow: hidden; text-align: left; white-space: nowrap; }
.timeline-sheet .tp-kw { padding: .6mm 0; text-align: center; font-size: 6.5pt; font-weight: 500; color: var(--text-2); }
.timeline-sheet .tp-kw.off, .timeline-sheet .tp-off { background: #faefcf; }
.timeline-sheet .tp-month.s, .timeline-sheet .tp-kw.s { border-left: 2px solid var(--text-3); }
.timeline-sheet .tp-label { padding: 1mm 2mm; text-align: left; font-weight: 600; vertical-align: middle; }
.timeline-sheet .tp-label > span { display: inline-block; max-width: calc(100% - 4mm); vertical-align: middle; overflow-wrap: anywhere; }
.timeline-sheet .tp-label small { display: block; font-size: 6.5pt; font-weight: 500; color: var(--text-2); }
.timeline-sheet .tp-dot { display: inline-block; width: 2mm; height: 2mm; margin-right: 1.4mm; border-radius: 50%; background: var(--border-strong); vertical-align: middle; }
.timeline-sheet .tp-track { height: 9mm; }
.timeline-sheet .tp-lane { position: relative; height: 9mm; }
.timeline-sheet .tp-off { position: absolute; top: 0; bottom: 0; }
.timeline-sheet .tp-line { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid var(--border); }
.timeline-sheet .tp-line.s { border-left: 2px solid var(--text-3); }
.timeline-sheet .tp-bar { position: absolute; top: 1mm; bottom: 1mm; overflow: hidden; padding: .7mm 1mm; border-radius: 1.2mm; background: var(--accent); color: #fff; font-size: 6.5pt; font-weight: 600; line-height: 1.15; }
/* Titel höchstens zwei Zeilen, Wörter ganz (zu lange abgeschnitten) */
.timeline-sheet .tp-bar > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: normal; word-break: normal; }
.timeline-sheet .tp-bar.free { padding: 0; background: none; border: 1px dashed var(--border-strong); }
.timeline-sheet.mono .tp-bar:not(.free) { background: #fff; color: var(--text); border: 1px solid var(--text-3); }
.timeline-sheet.mono .tp-dot { background: var(--text-3); }
.timeline-sheet .tp-group td { padding: 1.2mm 2mm; background: var(--surface-2); font-weight: 650; }
.timeline-sheet tr { break-inside: avoid; }
.timeline-sheet .tp-legend { display: flex; flex-wrap: wrap; gap: 1mm 5mm; margin-top: 2mm; font-size: 7pt; color: var(--text-2); }
.timeline-sheet .tp-legend > span { display: inline-flex; align-items: center; gap: 1.5mm; }
.timeline-sheet .tp-key { display: inline-block; width: 5mm; height: 2.5mm; border-radius: .8mm; background: var(--accent); }
.timeline-sheet .tp-key.free { background: none; border: 1px dashed var(--border-strong); }
.timeline-sheet .tp-key.off { background: #faefcf; border: 1px solid var(--border); }
.timeline-sheet .tp-key.sem { width: 0; height: 3mm; border-radius: 0; background: none; border-left: 2px solid var(--text-3); }
.timeline-sheet.mono .tp-key:not(.free):not(.off):not(.sem) { background: #fff; border: 1px solid var(--text-3); }
/* Jahresplanung drucken: Wochen als Zeilen, Fächer als Spalten */
.yearplan-sheet .yo-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .72rem; line-height: 1.25; }
.yearplan-sheet .yo-table th, .yearplan-sheet .yo-table td { padding: 3px 5px; border: 1px solid var(--border); vertical-align: top; overflow-wrap: anywhere; }
.yearplan-sheet .yo-table thead th { background: var(--surface-2); text-align: left; font-size: .74rem; }
.yearplan-sheet .yo-kw { width: 9mm; color: var(--text-2); white-space: nowrap; }
.yearplan-sheet .yo-date { width: 15mm; white-space: nowrap; }
.yearplan-sheet .yo-date small { display: block; color: var(--text-2); white-space: normal; font-size: .9em; }
.yearplan-sheet .yo-gap td { padding: 2px 6px; background: #f1ede4; color: var(--text-2); text-align: center; font-size: .68rem; }
.yearplan-sheet .yo-block strong { display: block; }
.yearplan-sheet .yo-block span { color: var(--text-2); font-size: .9em; }
.yearplan-sheet .yo-block .yo-note { display: block; margin-top: 2px; color: var(--text); white-space: pre-line; }
/* Inhalte: pro Lektion die erste Zeile, nummeriert */
.yearplan-sheet .yo-contents { margin-top: 3px; font-size: .92em; line-height: 1.3; }
.yearplan-sheet .yo-part + .yo-contents { margin: 1px 0 3px 11px; }
.yearplan-sheet .yo-part { display: flex; align-items: baseline; gap: 4px; }
.yearplan-sheet .yo-part .yp-dot { width: 7px; height: 7px; }
.yearplan-sheet .yo-free { color: var(--text-3); }
.yearplan-sheet tfoot td { background: var(--surface-2); color: var(--text-2); font-size: .68rem; }
.subject-sheet .ss-tweek td { background: var(--surface-2); font-weight: 650; font-size: .74rem; }
.subject-sheet .ss-tweek td span { font-weight: 400; color: var(--text-2); }
.subject-sheet .ss-trow td:nth-child(-n+2) { width: 1%; }
.subject-sheet .ss-trow.cancelled td:first-child { text-decoration: line-through; }
.subject-sheet .ss-off { color: var(--warn); font-weight: 600; }
.subject-sheet .we-view { line-height: 1.35; }

/* Fach-Filter: gewähltes Fach hervorheben, alles andere blasser (Darüberfahren zeigt es wieder deutlicher) */
.subject-on .wg-cell > :not(.hit, .wg-add), .subject-on .lesson:not(.hit), .subject-on .tl-break .notes, .subject-on .cal-allday, .subject-on .day-notes, .subject-on .tl-free { opacity: .3; transition: opacity .12s; }
.subject-on .wg-cell > :not(.hit, .wg-add):hover, .subject-on .wg-cell > :not(.hit, .wg-add):focus-within, .subject-on .lesson:not(.hit):hover { opacity: .85; }
.week-grid { display: grid; grid-template-columns: 70px repeat(5, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.wg-head { padding: 10px 10px; background: var(--surface-2); border-bottom: 1px solid var(--border); font-weight: 650; font-size: .9rem; position: sticky; top: 0; z-index: 2; }
.wg-head .date { display: block; font-weight: 500; color: var(--text-3); font-size: .8rem; }
/* schmale Wochenansicht (Tablet): «Mo», «Di» … statt Wochentage, die mitten im Wort umbrechen */
.wg-scroll { container-type: inline-size; }
.wg-head .wd-short { display: none; }
@container (max-width: 760px) { .wg-head .wd-long { display: none; } .wg-head .wd-short { display: inline; } }
.wg-head.today { background: var(--accent-soft); color: var(--accent-strong); }
.wg-head .label { display: inline-block; margin-top: 3px; }
.wg-time { padding: 8px 8px; font-size: .78rem; color: var(--text-2); font-variant-numeric: tabular-nums; border-top: 1px solid var(--border); text-align: right; line-height: 1.25; }
.wg-time .end { display: block; color: var(--text-3); }
.wg-cell { border-top: 1px solid var(--border); border-left: 1px solid var(--border); padding: 4px; display: grid; gap: 4px; grid-auto-flow: column; grid-auto-columns: 1fr; min-width: 0; min-height: 44px; }
.wg-cell.off { background: repeating-linear-gradient(135deg, var(--surface-2) 0 8px, var(--surface-3) 8px 16px); }
.wg-cell.today { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
.wg-break { grid-column: 1 / -1; display: grid; grid-template-columns: 70px repeat(5, minmax(0, 1fr)); background: var(--surface-2); border-top: 1px solid var(--border); font-size: .74rem; color: var(--text-3); }
.wg-break > div { padding: 3px 8px; min-width: 0; }
.wg-break > div + div { border-left: 1px solid var(--border); }
.wg-lesson { border-radius: 7px; padding: 5px 7px 5px 9px; font-size: .8rem; position: relative; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); cursor: pointer; min-width: 0; text-align: left; color: inherit; }
.wg-lesson::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--lesson-color, var(--border-strong)); }
.wg-lesson.tinted { background: color-mix(in srgb, var(--lesson-color) 28%, var(--surface)); border-color: color-mix(in srgb, var(--lesson-color) 55%, var(--border)); }
.wg-lesson .t { font-weight: 640; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-lesson .g { font-size: .68rem; color: var(--text-2); font-weight: 650; display: block; }
/* wer dabei ist (Personen im Stundenplan) */
.wg-lesson .p { display: flex; align-items: center; gap: 3px; font-size: .68rem; color: var(--text-2); font-weight: 600; margin-top: 1px; }
.wg-lesson .p .icon { width: 11px; height: 11px; flex: none; }
/* Fach und rechts davon die Personen: das Fach bricht dafür zwischen Wörtern um; passt nicht einmal das längste Wort,
   stehen die Personen darunter (rechtsbündig) */
.wg-lesson .tr { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 6px; min-width: 0; }
.wg-lesson .tr .t { flex: 1 1 0%; min-width: min-content; white-space: normal; }
.wg-lesson .tr .p { margin: 2px 0 0 auto; white-space: nowrap; }
.lesson-people { display: inline-flex; align-items: center; gap: 3px; font-size: .74rem; font-weight: 600; color: var(--text-2); }
.lesson-people .icon { width: 12px; height: 12px; }
.people-editor { display: flex; flex-direction: column; gap: 8px; }
.people-rows { display: flex; flex-direction: column; gap: 6px; }
.people-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 190px auto; gap: 6px; align-items: center; }
@media (max-width: 600px) { .people-row { grid-template-columns: minmax(0, 1fr) 70px auto; } .people-row .select { grid-column: 1 / 3; } }
.wg-lesson .d { color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 1px; }
/* Links im Text einer Lektion: direkt anklickbar (Dateien öffnen in Lehrerpult) */
.wg-lesson .d a { color: var(--accent-strong); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; font-weight: 560; overflow-wrap: anywhere; }
.wg-lesson .d a:hover { color: var(--accent); text-decoration-thickness: 2px; }
.dots { display: inline-flex; gap: 3px; margin: 0 5px 0 0; vertical-align: 1px; }
.dots .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dots .dot.red { background: var(--mark-red); }
.dots .dot.green { background: var(--mark-green); }
.dots .dot.magenta { background: var(--mark-magenta); }
.dots .dot.yellow { background: var(--mark-yellow); }
.dots .dot.struck { opacity: .4; }
.wg-lesson > .dots { display: flex; margin: 3px 0 0; }
.wg-lesson.event { background: color-mix(in srgb, var(--mark-magenta) 10%, var(--surface)); border-style: dashed; }
.wg-lesson.event::before { background: var(--mark-magenta); }
.wg-lesson.event.tinted { background: color-mix(in srgb, var(--lesson-color) 13%, var(--surface)); border-color: color-mix(in srgb, var(--lesson-color) 45%, var(--border)); }
.wg-lesson.event.tinted::before { background: var(--lesson-color); }
.wg-scroll { overflow-x: auto; }
.wg-lesson.cancelled { opacity: .55; }
.wg-lesson.cancelled .t { text-decoration: line-through; }
/* läuft gerade: Rahmen in der Farbe der «Jetzt»-Linie (wie .lesson.current in der Übersicht) */
.wg-lesson.now { box-shadow: 0 0 0 2px var(--now); }
.wg-lesson.now.changed:not(.cancelled) { box-shadow: 0 0 0 2px var(--now), inset 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent); }
.lesson.clickable { cursor: pointer; }
.holiday-item.current { background: var(--accent-soft); }

/* Fester Stundenplan: Editor */
.plan-rows { display: flex; flex-direction: column; gap: 6px; }
.plan-row { display: grid; grid-template-columns: minmax(110px, 140px) 132px auto 132px 1fr auto; gap: 8px; align-items: center; }
.plan-row.pause .select, .plan-row.pause .input { background: var(--surface-2); }
.plan-row.bad .input { border-color: var(--danger); }
/* Handy: Art und Löschen oben, die Zeiten darunter. Sonst bleibt von der Auswahl nur der Pfeil */
@media (max-width: 640px) {
  .plan-rows { gap: 10px; }
  .plan-row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: 6px 8px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
  .plan-row:last-child { padding-bottom: 0; border-bottom: 0; }
  .plan-row > .select { grid-area: 1 / 1 / 2 / 4; }
  .plan-row > .btn { grid-area: 1 / 4; }
  .plan-row > .small { display: none; }
}
.plan-grid .wg-cell { min-height: 52px; }
.convert-plan { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: var(--radius-sm, 8px); background: var(--surface-2); max-height: 220px; overflow: auto; }
.convert-facts { margin: 4px 0 0; padding-left: 18px; }
/* Umstieg von den Word-Wochen: Art wählen */
.radio-card { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm, 8px); cursor: pointer; }
.radio-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.radio-card input { margin-top: 3px; flex: none; }
.radio-card > span { display: flex; flex-direction: column; gap: 2px; }
.plan-grid .plan-pause { min-height: 0; padding: 4px 10px; background: var(--surface-2); color: var(--text-3); font-size: .74rem; display: block; }
.wg-add { width: 100%; min-height: 42px; border: 1px dashed var(--border); border-radius: 7px; background: transparent; color: var(--text-3); cursor: pointer; display: grid; place-items: center; opacity: .55; }
.wg-add:hover, .wg-add:focus-visible { opacity: 1; border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.color-pick { display: flex; flex-wrap: wrap; gap: 8px; }
/* Farben in drei Reihen nach Farbton, darüber «keine» und «eigene» Farbe */
.color-pick:has(.cp-grid) { flex-direction: column; flex-wrap: nowrap; }
.color-pick .cp-extra { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.color-pick .cp-grid { display: grid; grid-template-columns: repeat(8, 30px); gap: 8px; }
@media (max-width: 380px) { .color-pick .cp-grid { grid-template-columns: repeat(8, 28px); gap: 6px; } .color-pick .cp-grid button { width: 28px; height: 28px; } }
.color-pick button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; display: grid; place-items: center; background: var(--surface); color: var(--text-3); }
.color-pick button.active { border-color: var(--text); box-shadow: 0 0 0 2px var(--surface) inset; }
.color-pick button.keep { width: auto; padding: 0 11px; border-radius: 15px; font-size: .78rem; font-weight: 600; color: var(--text-2); }
/* eigene Farbe: das Farbfeld des Browsers liegt unsichtbar über dem Kreis */
.color-pick .own { position: relative; width: 30px; height: 30px; border-radius: 50%; border: 2px dashed var(--border-strong); display: grid; place-items: center; color: var(--text-3); cursor: pointer; overflow: hidden; }
.color-pick .own.active { border: 2px solid var(--text); box-shadow: 0 0 0 2px var(--surface) inset; }
.color-pick .own input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.color-pick .own:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Stundenplan von Hand: Speicherstand oben, Mehrfachauswahl im Raster */
.plan-save { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; color: var(--text-3); }
.plan-save > .icon { color: var(--success); }
.plan-save.bad, .plan-save.bad > .icon { color: var(--danger); }
.plan-save .linklike { white-space: nowrap; }
.btn.ghost.active { background: var(--accent-soft); color: var(--accent-strong); }
.plan-grid.picking .wg-add { opacity: .75; border-color: var(--border-strong); }
.plan-grid .wg-cell .wg-add.picked { opacity: 1; border: 2px solid var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.wg-lesson.picked { outline: 3px solid var(--accent); outline-offset: -2px; }
.plan-grid .pick-all { cursor: pointer; }
/* A- und B-Wochen: Reiter über dem Raster, Buchstabe in Lektionen, die nur in einer Woche gelten */
.plan-ab-tabs { margin: 2px 0 0; }
.plan-ab-bar { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 6px 12px; border-bottom: 1px solid var(--border); }
.plan-ab-bar .tabs { border-bottom: 0; margin: 0; }
.plan-ab-bar > .btn { margin: 0 0 6px auto; }
.plan-ab-tabs .tab-count { color: var(--text-3); font-weight: 500; }
@media (max-width: 560px) { .plan-ab-tabs .tab-count.n { display: none; } }
.wg-lesson .wg-ab { position: absolute; top: 3px; right: 4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--text-2); color: var(--surface); font-size: .66rem; font-weight: 700; line-height: 17px; text-align: center; }
.wg-lesson:has(.wg-ab) .t { padding-right: 18px; }
.plan-grid .pick-all:hover, .plan-grid .pick-all:focus-visible { color: var(--accent-strong); background: var(--accent-soft); }
.wg-scroll .week-grid { min-width: 590px; } /* Tablet mit Seitenleiste: ganze Woche ohne seitliches Scrollen */
.week-notes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* Geburtstage der Kinder zu Beginn des Tages */
.bdays { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: .8rem; color: var(--text-2); line-height: 1.35; }
.bdays > .icon { color: var(--mark-magenta); flex: none; }
.bday strong { font-weight: 600; color: var(--text); }
.timeline > .bdays { padding: 8px 12px; margin-bottom: 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.wg-bdays { min-height: 0; align-content: center; }
.wg-bdays .bdays { font-size: .74rem; padding: 2px 4px; }
.wg-bdays .bdays > .icon { display: none; }
.week-grid .wg-time > .icon { color: var(--mark-magenta); }
.holiday-list { display: flex; flex-direction: column; gap: 6px; }
.holiday-item { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); font-size: .9rem; }
.legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: .82rem; color: var(--text-2); }
.legend span { display: inline-flex; gap: 6px; align-items: center; }
.legend-people { margin-left: auto; justify-content: flex-end; }
.legend i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; border: 1px solid var(--border); }

/* --------------------------------------------------------------- Vorlagen */

.split { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
/* untereinander: kein Platzhalter «Wähle eine Vorlage …» unter der Liste */
@media (max-width: 960px) { .split { grid-template-columns: minmax(0, 1fr); } .split-placeholder { display: none; } }
.list-nav { display: flex; flex-direction: column; padding: 8px; gap: 2px; }
.list-nav .group-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); font-weight: 700; padding: 10px 10px 4px; }
.list-item { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 8px; cursor: pointer; border: 0; background: none; text-align: left; width: 100%; color: var(--text); }
.list-item:hover { background: var(--surface-3); }
.list-item.active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.list-item .icon { color: var(--text-3); }
.placeholder-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.preview-mail { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 16px; line-height: 1.6; min-height: 160px; }
.preview-mail .ph { background: var(--warn-soft); color: var(--warn); border-radius: 4px; padding: 0 3px; font-weight: 600; }
.ai-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-actions .chip { padding: 5px 11px; font-size: .84rem; }

/* ----------------------------------------------------------------- Wissen */

.kb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 14px; }
/* sehr lange Stichworte kürzen (ganzer Text im Eintrag) statt die Karte zu sprengen */
.kb-tags .chip, .tag-bar .chip { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag-bar { min-width: 0; max-width: 100%; }
.kb-card { padding: 16px 18px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; transition: border-color .12s, box-shadow .12s; }
.kb-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.kb-card .excerpt { color: var(--text-2); font-size: .88rem; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; overflow-wrap: anywhere; }
.kb-file h3, .kb-hit h3 { display: flex; align-items: flex-start; gap: 7px; overflow-wrap: anywhere; }
.kb-file h3 > svg, .kb-hit h3 > svg { flex: none; margin-top: 3px; color: var(--accent); }
/* Treffer in Dateien: Ordner gekürzt (ganz im Tooltip), höchstens zwei Zeilen */
.kb-hit-path { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.kb-file-foot { margin-top: auto; justify-content: space-between; flex-wrap: nowrap; }
.kb-file-foot > .tiny { flex: none; white-space: nowrap; }
.kb-file-foot .kb-tags { min-width: 0; flex-wrap: wrap; }
.kb-file-foot .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Markierung von Dateien: Lehrmittel, Arbeitsblatt, Lösung */
.kind-chip { font-weight: 600; }
.file-name .kind-chip { font-size: .72rem; padding: 1px 7px; vertical-align: 1px; }
/* Ordner markieren (Wissen): Baum mit Auswahl pro Ordner */
.fk-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.fk-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px 7px calc(10px + var(--depth, 0) * 18px); border-top: 1px solid var(--border); }
.fk-row:first-child { border-top: 0; background: var(--surface-2); }
.fk-row > .icon { flex: none; color: var(--text-3); }
.fk-row.marked > .icon { color: var(--accent); }
.fk-name { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.fk-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.fk-row .select { flex: none; max-width: 48%; }
.fk-toggle { flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; margin-right: -4px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--text-3); cursor: pointer; }
span.fk-toggle { cursor: default; }
button.fk-toggle:hover { background: var(--surface-2); color: var(--text); }
.fk-openable { cursor: pointer; }
@media (max-width: 560px) { .fk-row { flex-wrap: wrap; } .fk-row .select { max-width: none; flex: 1 1 calc(100% - 48px); margin-left: 48px; } }
.select.sm { width: auto; min-height: 32px; padding: 4px 10px; font-size: .85rem; }
.todo-lists { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; max-width: 420px; }
.task-list-name { color: var(--accent-strong); }
.kb-more { grid-column: 1 / -1; display: flex; justify-content: center; padding: 4px 0 10px; }
.kb-tags { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; max-width: 100%; }
.ask-box { padding: 18px 20px; background: linear-gradient(135deg, color-mix(in srgb, #6b4fd8 9%, var(--surface)), color-mix(in srgb, #1f8fae 9%, var(--surface))); }
.ask-box form { display: flex; gap: 8px; margin-top: 10px; }
.ask-answer { margin-top: 14px; padding: 14px 16px; background: var(--surface); border-radius: 10px; border: 1px solid var(--border); }
.kb-body { white-space: pre-wrap; line-height: 1.65; }

/* ----------------------------------------------------------------- Dateien */

.file-results { display: flex; flex-direction: column; }
.file-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; }
.file-row:hover { background: var(--surface-2); }
.file-row:last-child { border-bottom: 0; }
/* Treffer der Seite «Dateien» (die Karten im Wissen heissen .kb-hit): Zeile öffnet die Datei, Knopf daneben übernimmt sie
   in die Linkliste */
.file-hit { display: flex; align-items: center; border-bottom: 1px solid var(--border); }
.file-hit:last-child { border-bottom: 0; }
.file-hit > .file-row { flex: 1; min-width: 0; border-bottom: 0; }
.file-hit > .btn { flex: none; margin-right: 10px; }
@media (max-width: 640px) { .file-hit > .btn .lbl { display: none; } }
.file-icon { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); }
.file-icon.dropbox { background: #e6f0ff; color: #0061fe; }
.file-icon.onedrive { background: #e6f2fb; color: #0a6cbd; }
.file-icon.sharepoint { background: #e7f5f3; color: #03787c; }
.file-name { font-weight: 560; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-path { font-size: .8rem; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-tag { font-size: .72rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }
.file-icon.microsoft { background: #e6f2fb; color: #0a6cbd; }
.file-icon.nextcloud { background: #e5f3fb; color: #0082c9; }
.file-icon.google { background: #e8f5ec; color: #188038; }
.file-icon.folder { background: #fdf3dc; color: #b7791f; }
/* Dateien: verbundene Ordner als Kacheln, darin Unterordner und Dateien */
.folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; padding: 14px; }
.folder-tile { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 12px; color: inherit; text-decoration: none; transition: background .12s, border-color .12s; }
.folder-tile:hover { background: var(--surface-2); border-color: var(--border-strong); }
.folder-tile .file-icon { flex: none; }
.ft-body { min-width: 0; }
.ft-name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-sub { font-size: .8rem; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-head { padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.fb-head .fb-crumbs { flex: 1 1 auto; min-width: 0; }
.fb-kind { display: inline-flex; align-items: center; gap: 6px; flex: none; max-width: 100%; }
.fb-kind .select { max-width: 100%; }
.fb-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; min-width: 0; font-size: .9rem; }
.fb-crumbs a { color: var(--text-2); text-decoration: none; padding: 2px 6px; border-radius: 6px; overflow-wrap: anywhere; }
.fb-crumbs a:hover { background: var(--surface-3); color: var(--text); }
.fb-crumbs [aria-current] { padding: 2px 6px; font-weight: 650; overflow-wrap: anywhere; }
.fb-crumbs > .icon { color: var(--text-3); }
.files-folders .file-row > .icon { color: var(--text-3); flex: none; }
.fb-foot { padding: 10px 14px; border-top: 1px solid var(--border); font-size: .8rem; color: var(--text-3); }
.files-folders .file-name { white-space: normal; overflow-wrap: anywhere; }
.files-folders .lbl-short, .files-folders .fr-date-inline { display: none; }
@media (max-width: 640px) {
  .files-folders .lbl-long, .files-folders .fr-date { display: none; }
  .files-folders .lbl-short, .files-folders .fr-date-inline { display: inline; }
  .files-folders > .card-head { flex-wrap: nowrap; padding: 12px 10px 12px 14px; }
  .files-folders > .card-head .btn { flex: none; }
  .folder-grid { padding: 10px; }
}

/* Einstellungen → Benutzer: eine Zeile pro Lehrperson, auf dem Handy untereinander */
.user-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; }
.user-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px 16px; padding: 10px 12px; border-top: 1px solid var(--border); }
.user-row:first-child { border-top: 0; }
.user-main { display: flex; flex-direction: column; min-width: 0; }
.user-mail { overflow-wrap: anywhere; }
.user-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.user-actions { flex-wrap: nowrap; }
@media (max-width: 640px) {
  .user-row { grid-template-columns: minmax(0, 1fr) auto; }
  .user-meta { grid-column: 1; grid-row: 2; }
  .user-actions { grid-column: 2; grid-row: 1 / span 2; }
}

/* Einstellungen → Statistik (Admin): Kennzahlen, Aktivität als Säulen, Funktionen mit Anteil der Personen */
.us-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.us-toolbar > .us-refresh { margin-left: auto; }
.us-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.us-kpi { min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.us-kpi-label { display: flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--text-2); }
.us-kpi-value { margin-top: 4px; font-size: 1.6rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.us-kpi-sub { font-size: .78rem; color: var(--text-3); }
.us-note { margin: 10px 0 0; }
.us-toolbar .seg-btn, .us-chart-head .seg-btn { white-space: nowrap; }
.us-lead { margin: 0; }
.us-chart-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 10px; }
.us-chart { position: relative; height: 150px; padding-top: 18px; border-bottom: 1px solid var(--border-strong); }
.us-chart-max { position: absolute; top: 0; left: 0; }
.us-bars { display: flex; align-items: flex-end; gap: 2px; height: 100%; }
.us-bar { display: flex; align-items: flex-end; flex: 1 1 0; min-width: 0; height: 100%; }
.us-bar-fill { display: block; width: 100%; border-radius: 3px 3px 0 0; background: var(--accent); }
.us-bar:hover .us-bar-fill { background: var(--accent-strong); }
.us-axis { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; }
.us-area + .us-area { margin-top: 18px; }
.us-area-title { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: .92rem; }
.us-table { border: 1px solid var(--border); border-radius: 12px; }
.us-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(120px, 1fr) 76px 60px; align-items: center; gap: 4px 14px; padding: 7px 12px; border-top: 1px solid var(--border); }
.us-row:first-child { border-top: 0; }
.us-row.one { grid-template-columns: minmax(0, 1fr) 76px 60px; }
.us-row.unused .us-label { color: var(--text-3); }
.us-label { min-width: 0; overflow-wrap: anywhere; }
.us-label .icon { vertical-align: -2px; color: var(--text-2); }
.us-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.us-meter { display: flex; align-items: center; gap: 8px; min-width: 0; }
.us-meter-bar { flex: 1; height: 8px; overflow: hidden; border-radius: 99px; background: var(--surface-3); }
.us-meter-bar > span { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
.us-meter-num { min-width: 46px; font-size: .8rem; text-align: right; white-space: nowrap; color: var(--text-2); font-variant-numeric: tabular-nums; }
.us-sub { margin-top: 16px; }
.us-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
.us-grid { width: 100%; border-collapse: collapse; font-size: .9rem; }
.us-grid th, .us-grid td { padding: 7px 12px; text-align: left; white-space: nowrap; border-top: 1px solid var(--border); }
.us-grid thead th { border-top: 0; font-size: .8rem; font-weight: 600; color: var(--text-2); }
.us-grid th.us-num, .us-grid td.us-num { text-align: right; }
.us-sort { display: inline-flex; align-items: center; gap: 2px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.us-click { cursor: pointer; }
.us-click:hover, .us-click:focus-visible { background: var(--surface-2); outline: none; }
.us-role { margin-left: 6px; font-size: .72rem; }
.us-people td:first-child { min-width: 140px; white-space: normal; }
/* Betrieb: Aufgabe bzw. Adresse und Spaltenköpfe brechen um, damit die Zahlen auch auf dem Handy daneben Platz haben */
.us-ops th, .us-ops td:first-child { white-space: normal; }
.us-ops td:first-child { min-width: 110px; }
.us-bad { font-weight: 700; color: var(--danger); }
.us-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.us-person { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin: -4px 0 16px; padding: 10px 14px;
  border: 1px solid var(--accent); border-radius: 12px; background: var(--accent-soft); }
.us-person-main { display: flex; flex-direction: column; min-width: 0; }
.us-person-main .small { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .us-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .us-kpi-value { font-size: 1.35rem; }
  .us-chart-head .seg { display: flex; width: 100%; }
  .us-chart-head .seg-btn { padding: 6px 8px; white-space: normal; }
  /* Funktion über die ganze Zeile, darunter Anteil und Zahlen */
  .us-row { grid-template-columns: minmax(0, 1fr) 64px 44px; padding: 8px 10px; }
  .us-row > :first-child { grid-column: 1 / -1; }
  .us-row-head > :first-child { display: none; }
  /* eine Person: Funktion und Zahlen in einer Zeile */
  .us-row.one { grid-template-columns: minmax(0, 1fr) 64px 44px; }
  .us-row.one > :first-child { grid-column: auto; }
  .us-row-head.one > :first-child { display: inline; }
  .us-people td:first-child { max-width: 150px; overflow-wrap: anywhere; }
  .us-ops { font-size: .85rem; }
  .us-ops th, .us-ops td { padding: 7px 8px; }
}

/* Einstellungen → Aktivitätslog (Admin): Tabelle wie in der Statistik. Nach der Breite der Karte (nicht des Fensters, die
   Seitenleiste kommt und geht): schmaler steht die IP-Adresse unter dem Zeitpunkt, noch schmaler wird jede Zeile eine Karte */
.alog-toolbar .alog-search { flex: 1 1 220px; max-width: 340px; }
.alog-toolbar .alog-admins { font-size: .9rem; white-space: nowrap; }
.alog-results { container-type: inline-size; transition: opacity .15s; }
.alog-results.alog-loading { opacity: .55; }
.alog-count { margin: 0 0 8px; }
.alog-grid td { vertical-align: top; }
.alog-grid td.alog-who, .alog-grid td.alog-action, .alog-grid td.alog-details { white-space: normal; overflow-wrap: anywhere; }
.alog-grid td.alog-who { min-width: 150px; }
.alog-grid td.alog-action { min-width: 130px; }
.alog-grid td.alog-details { width: 30%; min-width: 170px; font-size: .85rem; }
.alog-time { color: var(--text-2); font-size: .82rem; font-variant-numeric: tabular-nums; }
.alog-person { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: inherit; text-align: left; cursor: pointer; }
.alog-person:hover, .alog-person:focus-visible { color: var(--accent); text-decoration: underline; }
.alog-target .alog-person { font-weight: 500; color: var(--text-2); }
.alog-nobody { font-style: italic; color: var(--text-3); }
.alog-warn { font-weight: 600; color: var(--danger); }
.alog-ip { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .8rem; color: var(--text-3); }
.alog-ip-sub { display: none; margin-top: 2px; }
.alog-pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; margin-top: 12px; }
.alog-pages .btn:not(.icon-only) { min-width: 36px; justify-content: center; }
.alog-gap { padding: 0 4px; color: var(--text-3); }
@container (max-width: 999px) {
  .alog-grid th:last-child, .alog-grid td.alog-ip { display: none; }
  .alog-ip-sub { display: block; }
}
@container (max-width: 639px) {
  /* jede Zeile als Karte: Aktion und Zeitpunkt oben, darunter Benutzer, Details und IP-Adresse (leere weg) */
  .alog-grid thead, .alog-ip-sub { display: none; }
  .alog-grid, .alog-grid tbody, .alog-grid td, .alog-grid td.alog-ip { display: block; }
  .alog-grid td.alog-empty { display: none; }
  .alog-grid tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; padding: 10px 12px; border-top: 1px solid var(--border); }
  .alog-grid tr:first-child { border-top: 0; }
  .alog-grid td, .alog-grid td.alog-who, .alog-grid td.alog-action, .alog-grid td.alog-details { width: auto; min-width: 0; padding: 0; border: 0; white-space: normal; }
  .alog-grid .alog-action { grid-row: 1; grid-column: 1; }
  .alog-grid .alog-time { grid-row: 1; grid-column: 2; font-size: .78rem; text-align: right; }
  .alog-grid .alog-who, .alog-grid .alog-details, .alog-grid .alog-ip { grid-column: 1 / -1; }
  .alog-grid td.alog-who { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; } /* E-Mail-Adresse ganz in die nächste Zeile */
}
@media (max-width: 640px) {
  /* Handy: Suche über die ganze Breite, darunter beide Filter nebeneinander («Benutzer», «Aktion» ohne Auswahl) */
  .alog-toolbar .alog-search { max-width: none; flex-basis: 100%; }
  .alog-toolbar .select-btn { flex: 1 1 120px; min-width: 0; padding-left: 10px; padding-right: 10px; }
  .alog-toolbar .select-btn-text { flex: 1; min-width: 0; max-width: none; text-align: left; }
  .alog-toolbar .sb-full { display: none; }
  .alog-toolbar .sb-short { display: inline; }
}

/* Einstellungen → Navigation: Seitenleiste und Handy-Leiste */
.nav-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px 28px; }
.nav-col h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: .95rem; }
.nav-col > p { margin: 0 0 10px; }
.nav-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 10px; }
.nav-item { display: flex; align-items: center; gap: 2px; min-height: 42px; padding: 2px 6px 2px 10px; border-top: 1px solid var(--border); }
.nav-item:first-child { border-top: 0; }
.nav-item .checkbox, .nav-item .nav-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nav-item .icon { flex: none; color: var(--text-3); }
.nav-item.off .checkbox > span, .nav-item.off .checkbox > .icon { opacity: .45; }
.nav-preview { display: flex; gap: 2px; max-width: 360px; margin-bottom: 10px; padding: 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.nav-preview > span { flex: 1 1 0; display: grid; place-items: center; height: 34px; color: var(--text-3); }
.nav-preview > span:nth-last-child(-n+2) { color: var(--text-2); }
.nav-add { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 10px; }

/* Hochgeladene Dateien (Wissen, Lektionen und Screen) auf der Seite «Dateien»; die verbundenen Ordner darunter */
.files-folders { margin-top: 18px; }
.up-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 12px 14px; }
.up-slot { display: contents; }
.up-actions { align-items: center; }
.up-filter { flex: 0 1 220px; min-width: 150px; }
/* Name mit Markierung (Lehrmittel …) und Hinweis «ohne Text»: bricht um statt abzuschneiden */
.up-row .file-name { white-space: normal; overflow-wrap: anywhere; }
.up-status { margin-left: 6px; }
.up-more { padding: 10px 14px; border-top: 1px solid var(--border); }
/* aus der Suche geöffnet: die Datei leuchtet kurz auf */
.up-row.up-flash { animation: ss-flash 2.2s ease-out; }
/* Speicherplatz für hochgeladene Dateien (Seite «Dateien») */
.quota { display: grid; gap: 6px; padding: 10px 14px 4px; }
.quota-bar { height: 8px; border-radius: 999px; background: var(--border); overflow: hidden; }
.quota-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.quota.full .quota-bar > span { background: var(--danger); }
.up-row { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 10px 14px; border-top: 1px solid var(--border); }
.up-row.picked { background: var(--accent-soft); }
.up-row > input { width: 18px; height: 18px; margin-top: 11px; accent-color: var(--accent); }
.up-body { min-width: 0; }
.up-main { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; color: inherit; text-decoration: none; }
.up-main:hover .file-name { text-decoration: underline; }
.up-main .file-icon { width: 40px; height: 40px; }
.up-thumb { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; background: var(--surface-3); }
.up-uses { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 5px 0 0 52px; color: var(--text-2); }
.up-use { display: inline-flex; align-items: center; gap: 4px; min-width: 0; color: var(--accent-strong); text-decoration: none; }
.up-use span { overflow-wrap: anywhere; }
.up-use:hover span { text-decoration: underline; }
.up-pickbar { margin: 12px 14px; }
@media (max-width: 640px) {
  .up-uses { margin-left: 0; }
  .files-uploads > .card-head { padding: 12px 10px 12px 14px; }
  /* Knöpfe unter dem Titel, die Anzahl rechts daneben */
  .up-actions { flex: 1 1 100%; flex-wrap: nowrap; }
  .up-count { order: 3; margin-left: auto; }
  .up-filter { flex: 1 1 100%; }
}

/* ------------------------------------------------------------- Einstellungen */

.settings-section { margin-bottom: 20px; }
/* Verwaltung (Admin): Teile Lehrpersonen, Statistik, Aktivitätslog, Betrieb */
.admin-parts { margin-bottom: 16px; flex-wrap: wrap; }
.admin-parts .seg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; white-space: nowrap; }
@media (max-width: 560px) { .admin-parts { display: flex; } .admin-parts .seg-btn { flex: 1 1 auto; padding: 6px 8px; } }
/* geändert, aber noch nicht gespeichert */
.settings-section.unsaved { border-color: var(--warn); }
/* gleich nach dem Titel; rechts bleiben Stand und Knöpfe der Karte */
.settings-section.unsaved > .card-head h2::after { content: 'Nicht gespeichert'; flex: none; padding: 1px 8px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); font-size: .74rem; font-weight: 650; white-space: nowrap; }
.settings-section .card-body { display: flex; flex-direction: column; gap: 14px; }
.integration { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; }
.integration-logo { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: var(--surface-3); }
@media (max-width: 640px) {
  /* Handy: Knöpfe unter den Text statt daneben */
  .integration { grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; align-items: start; }
  .integration-logo { width: 34px; height: 34px; }
  .integration > .btn-group { grid-column: 1 / -1; }
  .integration > .btn-group:empty { display: none; }
  .integration > div { overflow-wrap: anywhere; }
}
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); margin-right: 6px; }
.status-dot.on { background: var(--success); }
.status-dot.off { background: var(--danger); }
/* Einstellungen: Abschnitte der Tagesübersicht mit «i» */
.brief-sections { display: flex; flex-wrap: wrap; gap: 6px 16px; }
/* Einstellungen → Benachrichtigungen: Was wohin kommt (Art × Weg) */
.notify-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
.notify-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.notify-table th, .notify-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); text-align: center; }
.notify-table tbody tr:last-child th, .notify-table tbody tr:last-child td { border-bottom: 0; }
.notify-table thead th { font-size: .8rem; font-weight: 600; color: var(--text-3); background: var(--surface-2); white-space: nowrap; }
.notify-table tbody th { text-align: left; font-weight: 400; }
.notify-table td { width: 76px; }
.notify-table input[type=checkbox] { width: 18px; height: 18px; margin: 0; vertical-align: middle; cursor: pointer; }
.nt-kind { display: block; font-weight: 600; }
.nt-desc { display: block; font-size: .8rem; color: var(--text-3); line-height: 1.35; }
.notify-notes { margin: 0; padding-left: 18px; }
.nt-way-icon, .nt-legend { display: none; }
@media (max-width: 640px) {
  .notify-table th, .notify-table td { padding: 8px 5px; }
  .notify-table td { width: 40px; }
  .nt-way { display: none; }
  .nt-way-icon { display: inline-flex; vertical-align: middle; }
  .nt-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; }
  .nt-legend span { display: inline-flex; align-items: center; gap: 4px; }
}
.brief-section { display: inline-flex; align-items: center; gap: 2px; }
/* Info-Symbol mit Hinweis direkt daneben (infoTip in ui.js) */
.info-tip { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text-3); cursor: pointer; }
.info-tip:hover, .info-tip[aria-expanded="true"] { color: var(--accent); background: var(--surface-2); }
.tip-pop { position: fixed; z-index: 10060; max-width: min(300px, calc(100vw - 16px)); padding: 9px 12px; border-radius: 10px; background: var(--text); color: var(--surface); font-size: .84rem; line-height: 1.45; box-shadow: var(--shadow-lg); animation: sb-in .12s ease-out; }
.tip-pop::before { content: ''; position: absolute; top: -5px; left: var(--ax, 50%); width: 10px; height: 10px; margin-left: -5px; background: inherit; border-radius: 2px; transform: rotate(45deg); }
.tip-pop.above::before { top: auto; bottom: -5px; }
.weekday-picker { display: flex; gap: 6px; flex-wrap: wrap; }
.weekday-picker label { position: relative; cursor: pointer; }
/* Häkchen unsichtbar, aber mit der Tastatur erreichbar (Tab, Leertaste) */
.weekday-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.weekday-picker span { display: inline-grid; place-items: center; width: 42px; height: 36px; border-radius: 9px; border: 1px solid var(--border-strong); font-weight: 600; font-size: .88rem; color: var(--text-2); }
.weekday-picker input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.weekday-picker input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Termine wiederholen (eventrepeat.js): Art, Wochentage, «Bis», Regel als Text; bei einer Reihe nur diesen oder alle folgenden */
.rp-more { gap: 8px; margin-top: 8px; }
.rp-more:empty { display: none; }
.rp-until { gap: 6px 14px; align-items: end; }
.rp-until .field { flex: 0 1 190px; }
.rp-until .checkbox { padding-bottom: 8px; }
.rp-summary { display: flex; align-items: center; gap: 4px; }
.rp-series > .small { display: flex; align-items: center; gap: 4px; }
.rp-scope { gap: 6px 16px; }
.rp-series > .rp { margin-top: 6px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.student-table { width: 100%; border-collapse: collapse; }
.student-table th { text-align: left; font-size: .78rem; color: var(--text-3); font-weight: 650; padding: 6px 6px; text-transform: uppercase; letter-spacing: .04em; }
.student-table td { padding: 4px 6px; }
.student-table .input { min-height: 34px; padding: 6px 10px; }
.student-table .only-narrow { display: none; }
.student-table .input.invalid { border-color: var(--danger); }
.student-table.students td:nth-child(6) .input { width: 9.5em; }
/* Handy: jedes Kind als kleine Karte (Vorname/Nachname, darunter Geschlecht/Halbklasse, dann Geburtstag/aktiv) statt einer zu schmalen Tabelle */
@media (max-width: 640px) {
  .student-table.students thead { display: none; }
  .student-table.students tr { display: grid; grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--border); align-items: center; }
  .student-table.students td { padding: 0; min-width: 0; }
  .student-table.students td:first-child { grid-row: 1 / span 3; grid-column: 1; align-self: start; padding-top: 8px; }
  .student-table.students td:nth-child(2) { grid-area: 1 / 2; }
  .student-table.students td:nth-child(3) { grid-area: 1 / 3; }
  .student-table.students td:nth-child(4) { grid-area: 2 / 2; }
  .student-table.students td:nth-child(5) { grid-area: 2 / 3; }
  .student-table.students td:nth-child(6) { grid-area: 3 / 2; }
  .student-table.students td:nth-child(7) { grid-area: 3 / 3; }
  .student-table.students td:nth-child(8) { grid-area: 1 / 4; }
  .student-table.students td:nth-child(6) .input { width: 100%; }
  .student-table.students .input, .student-table.students .select { width: 100%; }
  /* «Geschlecht», «Halbklasse» ganz lesbar: weniger Innenabstand neben dem Pfeil */
  .student-table.students .select { padding-left: 8px; padding-right: 4px; }
  .student-table .only-narrow { display: inline; margin-left: 6px; font-size: .88rem; color: var(--text-2); }
}
.color-legend-row { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; }
/* «Darstellung & Legende»: Felder untereinander gleich breit */
.legend-rows .color-legend-row { grid-template-columns: 30px 1fr 6.5em; }
/* Karte «Kalender»: Zeile «Kalender-Abo», der Knopf bricht nicht um */
.cal-feed { align-items: center; margin-top: 10px; }
.cal-feed .btn { flex: none; white-space: nowrap; }
.color-swatch { width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--border); }
.steps { margin: 0; padding-left: 20px; color: var(--text-2); font-size: .9rem; }
.steps li { margin: 4px 0; }
.copy-field { display: flex; gap: 6px; }
.link-open { display: flex; gap: 6px; }
.link-open .input { flex: 1; min-width: 0; }
.copy-field .input { font-family: ui-monospace, Menlo, monospace; font-size: .82rem; }

/* Dateiauswahl Dropbox */
/* Dateianzeige (Dateien, Linkliste): fast bildschirmfüllend, auf dem Handy ganz */
.modal.fv { width: min(1100px, 100%); height: min(calc(100vh - 32px), 1200px); }
.modal.fv .modal-body { flex: 1; min-height: 0; padding: 0; position: relative; overflow: hidden; }
.fv-stage { position: absolute; inset: 0; overflow: auto; background: var(--surface-3); overscroll-behavior: contain; }
.fv-frame { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.fv-image { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 12px; }
.fv-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.fv-pages { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px; }
.fv-page { width: 100%; max-width: 900px; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); }
.fv-page canvas { display: block; width: 100%; height: 100%; }
.fv-counter { position: absolute; right: 14px; bottom: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(17, 24, 39, .75); color: #fff; font-size: .8rem; font-weight: 600; pointer-events: none; }
.fv-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; color: var(--text-2); }
.fv-center p { margin: 0; max-width: 480px; }
.fv-error { width: 52px; height: 52px; border-radius: 30%; display: grid; place-items: center; background: var(--danger-soft); color: var(--danger); }
.fv-source { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.modal.fv.has-fix .modal-body { display: flex; flex-direction: column; }
.modal.fv.has-fix .fv-stage { position: relative; inset: auto; flex: 1; min-height: 0; }
.fv-fix { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 14px; border-bottom: 1px solid var(--border); background: var(--surface); }
.fv-fix > .icon { color: var(--accent); flex: none; }
.fv-fix-field { display: inline-flex; align-items: center; gap: 8px; }
.fv-fix-field .input { width: 84px; padding-top: 5px; padding-bottom: 5px; min-height: 32px; }
.fv-fix-hint { flex-basis: 100%; }
/* Audio: kleiner Dialog mit Player */
.modal.fv.audio { width: min(560px, 100%); height: auto; }
.modal.fv.audio .fv-stage { position: relative; min-height: 210px; background: var(--surface); }
.fv-audio { min-height: 210px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 28px 20px; }
.fv-audio-icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.fv-audio-icon .icon { width: 30px; height: 30px; }
.fv-audio audio { width: 100%; max-width: 460px; }
.fv-player { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #000; }
.fv-video { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 640px) {
  .modal-backdrop:has(.modal.fv:not(.audio)) { padding: 0; }
  .modal.fv:not(.audio) { width: 100%; height: 100dvh; max-height: none; border-radius: 0; }
  /* unten eine Zeile, die Knöpfe teilen sich die Breite (die Quelle steht schon in «In … öffnen»); mit mehr als einer
     Aktion (Datei aus dem Wissen, Seitenangabe) schliesst man oben rechts, «Im Screen zeigen» als Symbol */
  .modal.fv .modal-foot { flex-wrap: nowrap; gap: 6px; padding: 10px 12px; }
  .modal.fv:not(.audio) .modal-foot { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .modal.fv .modal-foot > :is(.fv-source, .grow) { display: none; }
  .modal.fv .modal-foot > .btn:not(.icon-only, .fv-screen) { flex: 1 1 auto; min-width: 0; padding-left: 10px; padding-right: 10px; }
  .modal.fv .modal-foot:has(.fv-screen, [aria-haspopup="menu"]) .fv-close { display: none; }
  .modal.fv .fv-screen { font-size: 0; gap: 0; padding: 7px; min-width: 38px; }
}

/* An Lektion anhängen (Datei aus dem Wissen): Woche wählen, nach Fach filtern, Lektion antippen */
.modal.al { width: min(560px, 100%); }
.al-nav { display: flex; align-items: center; gap: 4px; }
.al-week { font-weight: 650; }
.al-subjects { display: flex; flex-wrap: wrap; gap: 6px; }
.al-subjects:empty { display: none; }
.al-list { max-height: min(52vh, 460px); }
.al-day { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: .8rem; font-weight: 650; color: var(--text-2); }
.al-row { width: 100%; }
.al-row.past, .al-day.past { color: var(--text-3); }
.al-row:disabled { opacity: .75; }
.al-time { flex: none; width: 3.1em; font-size: .85rem; font-variant-numeric: tabular-nums; color: var(--text-2); }
.al-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.al-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.al-subj { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 600; }
.al-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .8rem; color: var(--text-2); }
.al-has, .al-files { flex: none; display: inline-flex; align-items: center; gap: 3px; }
.al-has { color: var(--success); font-weight: 600; }

/* Wissen: mehrere Ordner wählen */
.picker-row.folder-pick { cursor: default; padding: 0 0 0 12px; gap: 4px; }
.folder-pick > input { width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
/* Teams und Team (keine Ordner): ohne Häkchen, gleich eingerückt */
.folder-pick > .pick-spacer { width: 18px; flex: none; }
.folder-open-btn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 9px 12px 9px 6px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.pick-basket { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pick-basket .chip { max-width: 100%; }
.chip-x { display: inline-grid; place-items: center; margin-left: 2px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; opacity: .7; }
.chip-x:hover { opacity: 1; }
/* Dateien an einer Lektion (Material): Chips mit Symbol und Name, ein Klick zeigt die Datei */
.lf-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.lf-chip { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 3px 6px 3px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); font-size: .82rem; }
.lf-chip a { display: inline-flex; align-items: center; gap: 5px; min-width: 0; color: var(--accent-strong); text-decoration: none; }
.lf-chip a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 26ch; }
.lf-chip a:hover span { text-decoration: underline; }
.lesson-files-box { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.lesson-files-box .lf-chips { margin: 2px 0 4px; }
/* Passende Unterlagen aus dem Wissen (Planung): ein Klick hängt sie an */
.lf-tips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 6px; font-size: .8rem; }
.lf-tips-label { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); }
.lf-tip { display: inline-flex; align-items: center; gap: 3px; max-width: 100%; padding: 2px 8px 2px 5px; border: 1px dashed var(--border); border-radius: 999px; background: none; color: var(--accent-strong); font: inherit; cursor: pointer; }
.lf-tip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 30ch; }
.lf-tip:hover { border-style: solid; background: var(--surface-2); }
.lesson .lesson-files { margin-top: 4px; }
.wg-files { display: inline-flex; align-items: center; gap: 2px; margin-top: 2px; font-size: .72rem; color: var(--text-2); }
.ss-tools { display: flex; align-items: flex-start; }
.ss-print-files { margin-top: 3px; color: var(--text-2); font-size: .9em; }

/* Verbindungen: Outlook-Kalender */
.outlook-box { padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; }

/* Übersicht: Zusatz neben dem Titel (z. B. Datum der Woche) */
.ov-sub { margin-left: 4px; color: var(--text-3); font-size: .82rem; font-weight: 500; }

/* Sitzungsnotizen */
.modal.meeting { width: min(900px, 100%); }
.meeting-notes { min-height: 260px; }
.meeting-protocol { min-height: 320px; }
.meeting-preview { max-height: 45vh; overflow: auto; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.meeting-tasks { display: flex; flex-direction: column; gap: 6px; }
.meeting-task { display: grid; grid-template-columns: auto minmax(0, 1fr) 160px; gap: 8px; align-items: center; }
.meeting-task > input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); }
@media (max-width: 640px) { .meeting-task { grid-template-columns: auto minmax(0, 1fr); } .meeting-task > input[type=date] { grid-column: 2; } }

/* Word-Lektionen in Lehrerpult bearbeiten */
.modal.we { width: min(760px, 100%); }
.we-box { border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden; background: var(--surface); }
.we-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.we-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.we-tool { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--text); cursor: pointer; font: inherit; font-size: .8rem; }
.we-tool:hover { background: var(--surface-3); border-color: var(--border); }
.we-dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .18); flex: none; }
.we-swatch-label { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.we-sep { width: 1px; height: 22px; background: var(--border); margin: 0 3px; }
.we-linkrow { display: flex; gap: 6px; align-items: center; padding: 6px; border-bottom: 1px solid var(--border); }
.we-linkrow[hidden] { display: none; }
.we-editor { min-height: 160px; max-height: 50vh; overflow: auto; padding: 12px 14px; outline: none; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
/* eingebetteter Editor (richBox), z. B. bei wiederkehrenden Inhalten: kleiner, mit Platzhalter */
.we-box.compact .we-editor { position: relative; min-height: 64px; max-height: 30vh; padding: 8px 12px; }
.we-box.compact .we-editor.is-empty::before { content: attr(data-placeholder); position: absolute; left: 13px; top: 8px; color: var(--text-3); pointer-events: none; }
.we-editor div { min-height: 1.5em; }
.we-editor a { color: var(--accent); text-decoration: underline; }
.we-view { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.we-view div { min-height: 1.5em; }
.we-view a { color: var(--accent); text-decoration: underline; }
/* Seitenangabe im Lektionsinhalt («Zahlenbuch S. 34»): öffnet das PDF aus dem Wissen auf dieser Seite */
a.page-ref { color: var(--accent); text-decoration: underline dotted; text-underline-offset: 2px; cursor: pointer; }
a.page-ref:hover { text-decoration-style: solid; }
.lesson-note { border-left: 3px solid var(--accent); padding: 4px 0 4px 12px; display: flex; flex-direction: column; gap: 4px; }
/* Rückblick nach der Lektion: Anzeige in der Planung, Dialog, offene Rückblicke in der Übersicht */
.review-chip { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; font-size: .8rem; color: var(--text-2); overflow-wrap: anywhere; }
.review-chip > svg { flex: none; margin-top: 2px; }
.review-chip.done > svg { color: var(--success); }
.review-chip.partial > svg { color: var(--warn); }
.review-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.review-choice { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm, 8px); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.review-choice:hover { border-color: var(--accent); }
.review-choice.done[aria-pressed="true"] { border-color: var(--success); background: var(--success-soft); color: var(--success); }
.review-choice.partial[aria-pressed="true"] { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
.review-pending { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.review-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.review-head > .btn { margin-left: auto; }
.review-list { margin: 6px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; } /* minmax: ein langer Inhalt wird gekürzt, statt die Karte zu sprengen */
.review-row { display: flex; align-items: center; gap: 6px; padding: 4px 0; }
.review-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Markierungen sind hell: Text darauf dunkel, auch im dunklen Modus */
.we-editor span[style*="background"] { color: #1d1d1f; border-radius: 3px; }
/* Stundenplan teilen: nur ansehen oder auch bearbeiten */
.share-mode { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.share-mode-opt { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; background: var(--surface); }
.share-mode-opt input { margin: 3px 0 0; accent-color: var(--accent); }
.share-mode-opt .icon { margin-top: 2px; color: var(--text-2); flex: none; }
.share-mode-opt span { display: flex; flex-direction: column; gap: 2px; }
.share-mode-opt small { color: var(--text-2); font-size: .8rem; }
.share-mode-opt.active { border-color: var(--accent); background: var(--accent-soft); }
/* Kalender, die ein Link zeigt */
.share-cals { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.share-cals > .small { margin-right: 4px; }
.share-cal { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); cursor: pointer; font-size: .875rem; overflow-wrap: anywhere; }
.share-cal input { margin: 0; accent-color: var(--accent); flex: none; }
.share-cal .icon { color: var(--text-2); flex: none; }
.share-cal.active { border-color: var(--accent); background: var(--accent-soft); }
.share-hl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.share-hl > .small { flex: 1 1 260px; }
.share-hl .row { gap: 8px; }
.share-hl .select { width: auto; max-width: 220px; }
@media (max-width: 640px) { .share-hl .row { flex: 1 1 100%; } .share-hl .select { flex: 1 1 100%; max-width: none; } }
.share-links { display: flex; flex-direction: column; gap: 10px; }
.plan-validity { display: grid; grid-template-columns: repeat(2, minmax(0, 200px)); gap: 12px; }
@media (max-width: 480px) { .plan-validity { grid-template-columns: minmax(0, 1fr); } }
.share-link { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.share-link.expired { opacity: .85; }
.share-link-head, .share-link-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.share-link-head strong { min-width: 0; overflow-wrap: anywhere; }
.share-link-foot .muted { min-width: 12em; }
.share-link .share-mode-opt { background: var(--surface); padding: 8px 10px; }
.share-new { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.share-new h3 { margin: 0; font-size: .95rem; }
@media (max-width: 600px) { .share-link .copy-field .btn { padding-inline: 10px; } }
/* Details einer Lektion: Aktionen als geordnete Liste statt umbrechender Fusszeile */
.lesson-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; padding-top: 12px; border-top: 1px solid var(--border); }
.lesson-actions:first-child { padding-top: 0; border-top: 0; }
.lesson-actions .btn { width: 100%; justify-content: flex-start; white-space: normal; text-align: left; background: var(--surface-2); border: 1px solid var(--border); }
.lesson-actions .btn:hover { border-color: var(--border-strong); background: var(--surface-3); }
.lesson-actions .btn.danger { color: var(--danger); }
/* Möglichkeiten als Liste, jede mit kurzer Erklärung (z. B. «⋯» bei einer Lektion in der Planung) */
.action-list { display: flex; flex-direction: column; gap: 6px; }
.action-list .btn { width: 100%; justify-content: flex-start; align-items: flex-start; gap: 10px; padding: 10px 12px; white-space: normal; text-align: left; background: var(--surface-2); border: 1px solid var(--border); }
.action-list .btn:hover { border-color: var(--border-strong); background: var(--surface-3); }
.action-list .btn > .icon { margin-top: 2px; flex: none; color: var(--text-2); }
.action-list .btn > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.action-list .btn small { font-size: .8rem; font-weight: 450; color: var(--text-3); line-height: 1.35; }
/* Lektion mit ⓘ für die Details (Klick auf die Lektion bearbeitet) */
.wg-item { position: relative; display: grid; min-width: 0; }
/* Lektionen ziehen (lessondrag.js): gefasste Lektion blass, ein Abbild folgt dem Zeiger, das Ziel ist hervorgehoben */
.draggable { touch-action: manipulation; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.drag-source { opacity: .35; }
.drag-ghost { position: fixed; z-index: 10050; pointer-events: none; margin: 0; opacity: .75; box-shadow: var(--shadow-lg); transform: rotate(-1.5deg) scale(.96); }
body.lesson-dragging, body.lesson-dragging * { cursor: grabbing !important; }
.wg-drop { position: relative; z-index: 1; margin: 3px; border: 2px dashed var(--accent); border-radius: 8px; background: color-mix(in srgb, var(--accent-soft) 70%, transparent); pointer-events: none; display: flex; align-items: flex-start; justify-content: flex-end; padding: 3px; min-width: 0; }
.wg-drop > span { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: var(--accent-text); font-size: .7rem; font-weight: 650; white-space: nowrap; overflow: hidden; }
.wg-drop .icon { width: 12px; height: 12px; flex: none; }
.wg-drop.swap { border-color: var(--warn); background: color-mix(in srgb, var(--warn-soft) 70%, transparent); }
.wg-drop.swap > span { background: var(--warn); color: #fff; }
.move-blocked { color: var(--danger); }
.toast-action { margin-left: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 650; text-decoration: underline; white-space: nowrap; cursor: pointer; }
.wg-info { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--text-2); cursor: pointer; opacity: 0; transition: opacity .12s; }
.wg-item:hover .wg-info, .wg-info:focus-visible { opacity: 1; }
.wg-info:hover { color: var(--accent); }
@media (hover: none) { .wg-info { opacity: .8; } .wg-item > .wg-lesson { padding-right: 22px; } }
/* mit Maus: das ⓘ hat am Ende der Fach-Zeile eigenen Platz. Fach und Personen rücken davor, nichts liegt darunter */
@media (hover: hover) { .wg-item > .wg-lesson .tr { padding-right: 17px; } }
.lesson.has-info { padding-right: 40px; }
.lesson-info { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--text-2); cursor: pointer; }
.lesson-info:hover { color: var(--accent); }
/* leeres Feld im Wochenraster: antippen erstellt dort einen Eintrag */
.wg-add { width: 100%; height: 100%; min-height: 34px; border: 1px dashed transparent; border-radius: 7px; background: none; color: var(--text-3); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .12s; }
.wg-cell:hover .wg-add, .wg-add:focus-visible { opacity: 1; border-color: var(--border-strong); color: var(--text-2); background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.wg-add:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
@media (hover: none) { .wg-add { opacity: .35; } }
/* Handy: freie Lektionszeit */
.tl-free-btn { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 40px; padding: 8px 12px; border: 1px dashed var(--border-strong); border-radius: 10px; background: none; color: var(--text-3); font: inherit; font-size: .84rem; cursor: pointer; text-align: left; }
.tl-free-btn:hover, .tl-free-btn:focus-visible { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.we-legend { display: none; flex-wrap: wrap; gap: 4px 12px; }
.we-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.we-legend .we-dot { width: 11px; height: 11px; }
@media (max-width: 640px) { .we-swatch-label { display: none; } .we-editor { max-height: 42vh; } .we-legend { display: flex; } }

/* Eingebundene Kalender */
.cal-allday { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--border); font-size: .78rem; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-allday.cancelled { text-decoration: line-through; opacity: .6; }
button.cal-allday { color: inherit; font-family: inherit; cursor: pointer; text-align: left; max-width: 100%; }
button.cal-allday:hover { border-color: var(--accent); }
.day-allday { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.hidden-list .holiday-item { align-items: center; }
.wg-time.extra { color: var(--text-3); font-style: italic; }
.cal-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: none; border: 1px solid rgba(0, 0, 0, .12); }
.cal-swatch { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.cal-swatch .cal-dot { width: 16px; height: 16px; }
.cal-swatch.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

/* Geteilter Stundenplan (Link für Team-Lehrpersonen) */
.team-page { min-height: 100vh; background: var(--bg); }
.team-bar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 10px clamp(16px, 3vw, 40px); background: var(--surface); border-bottom: 1px solid var(--border); }
.team-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--accent); text-decoration: none; }
.team-logo { width: 26px; height: 26px; flex: none; border-radius: 7px; }
.team-me { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.team-main { margin: 0 auto; }
@media (max-width: 520px) { .team-brand span { display: none; } }

/* Push: angemeldete Geräte */
.device-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 10px; }
.device-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.device-row:last-child { border-bottom: 0; }
/* Einstellungen → E-Mail und WhatsApp: Wege durch eine Linie getrennt */
.channel + .channel { border-top: 1px solid var(--border); padding-top: 16px; }
.channel h3 { display: flex; align-items: center; gap: 6px; }
.device-row > .icon { color: var(--text-3); }
/* Als App installieren: Anleitung mit einem Symbol pro Schritt */
.install-steps { display: flex; flex-direction: column; gap: 12px; margin: 0 0 14px; padding: 0; list-style: none; }
.install-steps li { display: flex; align-items: flex-start; gap: 12px; }
.install-step-icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-strong); }
.install-steps li > span:last-child { padding-top: 6px; }
.class-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.class-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--border); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.class-row:last-child { border-bottom: 0; }
.class-row:hover { background: var(--surface-2); }
.class-row.active { background: var(--accent-soft); }
.class-row > .icon { color: var(--text-3); flex: none; }
.class-row.active > .icon { color: var(--accent-strong); }
.class-row.active .chip.accent { background: var(--surface); }
.class-row .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.class-name { display: flex; align-items: center; gap: 8px; font-weight: 600; overflow-wrap: anywhere; }
.class-edit-title { margin: 6px 0 0; font-size: 14px; font-weight: 600; }
.device-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; }
.picker-list { display: flex; flex-direction: column; max-height: 50vh; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; }
.picker-row { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--border); background: none; text-align: left; cursor: pointer; color: inherit; }
.picker-row:hover { background: var(--surface-2); }
.picker-row:disabled { opacity: .45; cursor: default; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: .88rem; margin-bottom: 8px; }
.breadcrumbs button { border: 0; background: none; color: var(--accent); cursor: pointer; padding: 2px 4px; }
/* Dateiauswahl: Brotkrumen mit Stern für Lieblingsordner, Lieblingsordner als Tabs */
.picker-bar { display: flex; align-items: flex-start; gap: 8px; }
.picker-bar .breadcrumbs { flex: 1; min-width: 0; }
.picker-bar .picker-star { margin-top: -4px; color: var(--text-3); }
.picker-star.on, .tab.fav .icon { color: #d99a00; }
.picker-star.on .icon, .tab.fav .icon { fill: currentColor; }

/* Glocke */
.notif-btn { position: relative; }
.notif-badge { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; border-radius: 99px; background: var(--now); color: #fff; font-size: .66rem; font-weight: 700; display: grid; place-items: center; padding: 0 4px; }

@media print {
  .sidebar, .bottom-nav, .app-foot, .page-actions, .btn { display: none !important; }
  .shell { display: block; }
  .main { padding: 0; }
}

/* Stundenplan: Druckansicht (Vorschau A4 quer) und Druckseite, auch Grundlage fürs PDF */
.print-view { position: fixed; inset: 0; z-index: 900; display: flex; flex-direction: column; background: #5b6168; }
.print-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); }
.print-options { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .88rem; }
/* Gruppe von Einstellungen (z. B. «Fächer») auf einer eigenen Zeile */
.print-group { flex-basis: 100%; align-items: center; }
.print-group-title { font-weight: 650; color: var(--text-2); min-width: 72px; }
/* kurzer Hinweis in der Leiste (z. B. in tatsächlicher Grösse drucken) */
.print-hint { flex-basis: 100%; }
.print-scroll { flex: 1; overflow: auto; padding: 16px 12px 40px; }
.print-paper { width: 297mm; margin: 0 auto; padding: 10mm; box-sizing: border-box; background: #fff; box-shadow: 0 4px 24px rgba(0, 0, 0, .35); }
.print-paper.portrait { width: 210mm; }
.print-offscreen { position: fixed; left: -20000px; top: 0; }
.print-sheet {
  --bg: #f4f2ed; --surface: #ffffff; --surface-2: #faf8f4; --surface-3: #f0ede6; --border: #e3dfd5; --border-strong: #cfc9bc;
  --text: #1c2430; --text-2: #586371; --text-3: #616a76; --accent: #1f5f73; --accent-soft: #e2eef1; --accent-strong: #174a59;
  --mark-red: #d63a3a; --mark-green: #2f9e44; --mark-magenta: #b23cbf; --mark-yellow: #c99a00;
  width: 277mm; box-sizing: border-box; background: #fff; color: var(--text); color-scheme: light;
  font-family: var(--font); line-height: 1.35;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.ps-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 12px; }
.ps-title { font-size: 1.45rem; font-weight: 700; letter-spacing: -.01em; }
.ps-sub { font-size: .9rem; color: var(--text-2); margin-top: 3px; }
.ps-who { font-size: .9rem; color: var(--text-2); }
/* wie auf der Stundenplan-Seite, auf Papier etwas dichter; ganzer Text statt abgeschnitten und ohne «heute» */
.print-sheet .wg-head { position: static; padding: 6px 8px; font-size: .8rem; }
.print-sheet .wg-head .date { font-size: .72rem; }
.print-sheet .wg-time { padding: 5px 6px; font-size: .7rem; }
.print-sheet .wg-cell { min-height: 0; padding: 3px; gap: 3px; }
.print-sheet .wg-lesson { font-size: .66rem; padding: 4px 5px 4px 8px; line-height: 1.3; }
.print-sheet .wg-lesson .g { font-size: .92em; }
/* beim Messen langer Wörter (fitWords in schedule.js) nicht mitten im Wort umbrechen */
.print-sheet.ps-measure * { overflow-wrap: normal; word-break: normal; }
.print-sheet .wg-head.today { background: var(--surface-2); color: inherit; }
.print-sheet .wg-cell.today { background: none; }
.print-sheet .wg-lesson { display: block; cursor: default; }
.print-sheet .wg-lesson .t { white-space: normal; }
.print-sheet .wg-lesson .p.pr { float: right; margin: 0 0 0 4px; }
.print-sheet .wg-lesson .d { display: block; -webkit-line-clamp: unset; overflow: visible; }
.print-sheet .wg-lesson .we-view { line-height: 1.35; margin-top: 1px; }
.print-sheet .wg-lesson > .we-view > div:first-child { font-weight: 640; }
.print-sheet .ps-note { margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--border-strong); color: var(--text); }
.print-sheet .cal-allday { white-space: normal; overflow: visible; font-size: .66rem; padding: 2px 6px; }
.print-sheet .wg-break { font-size: .66rem; }
.print-sheet .mark { font-size: .68rem; padding: 1px 6px 1px 5px; gap: 5px; }
.print-sheet .mark::before { width: 6px; height: 6px; }
/* Legende: Gruppen mit Bezeichnung nebeneinander, so klein wie die Lektionen */
.ps-legend { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 8px; font-size: .66rem; line-height: 1.35; color: var(--text-2); }
.ps-leg { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.ps-leg-label { font-weight: 650; color: var(--text); white-space: nowrap; }
.ps-leg-items { display: flex; flex-wrap: wrap; gap: 2px 12px; min-width: 0; }
.ps-leg-items > span { display: inline-flex; align-items: center; gap: 4px; }
.ps-leg-items b { font-weight: 650; color: var(--text); }
.ps-legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; flex: none; border: 1px solid var(--border); }
.ps-legend i.cal-dot { border-radius: 50%; }
.dossier:not(.print-sheet) .ps-legend { font-size: .85rem; }
/* im PDF gibt es nur aufrechte Schrift */
.print-sheet .wg-time.extra, .ps-weeknote { font-style: normal; }
@media print {
  body.print-open { background: #fff; }
  body.print-open > :not(.print-view) { display: none !important; }
  body.print-open .print-view { position: static; display: block; background: none; }
  body.print-open .print-bar { display: none !important; }
  body.print-open .print-scroll { padding: 0; overflow: visible; }
  body.print-open .print-paper { zoom: 1 !important; width: auto; padding: 0 !important; margin: 0; box-shadow: none; }
  /* Zeilen dürfen über eine Seite hinausgehen; der Browser trennt zwischen Textzeilen */
  body.print-open .print-sheet .ps-head { break-after: avoid; }
}

/* Stellvertretungs-Dossier (Seite, Druck und PDF) */
.dossier { display: flex; flex-direction: column; gap: 18px; }
.dz-main { max-width: 980px; margin: 0 auto; }
.print-sheet.portrait { width: 190mm; font-size: 12.5px; }
.dz-sec h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; font-size: 1.05rem; }
.dz-sec h3 .icon { color: var(--text-3); }
.dz-text { white-space: pre-wrap; font-size: .92rem; line-height: 1.45; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.dz-day > .bdays { margin-bottom: 8px; }
.dz-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.dz-table td { padding: 7px 8px; border-top: 1px solid var(--border); vertical-align: top; }
.dz-table tr:last-child td { border-bottom: 1px solid var(--border); }
.dz-time { width: 1%; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text-2); }
.dz-time span { display: block; font-size: .82em; color: var(--text-3); }
.dz-subj { width: 30%; }
.dz-subj { position: relative; padding-left: 14px !important; }
.dz-color { position: absolute; left: 0; top: 7px; bottom: 7px; width: 4px; border-radius: 2px; background: var(--border-strong); }
.dz-group { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 99px; border: 1px solid var(--border); font-size: .76rem; font-weight: 650; color: var(--text-2); }
.dz-meta { font-size: .8rem; color: var(--text-2); margin-top: 2px; }
.dz-meta .icon { width: 12px; height: 12px; vertical-align: -1px; }
.dz-row.cancelled .dz-subj strong { text-decoration: line-through; }
.dz-row.cancelled .dz-prog { opacity: .6; }
.dz-off { color: var(--danger); font-size: .78rem; font-weight: 650; margin-top: 2px; }
.dz-prog .we-view { line-height: 1.4; }
.dz-links { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: .84rem; }
.dz-break td { background: var(--surface-2); color: var(--text-3); font-size: .78rem; padding: 3px 8px; }
.dz-after { font-size: .85rem; color: var(--text-2); margin-top: 8px; }
.dz-group-block + .dz-group-block { margin-top: 10px; }
.dz-group-title { font-weight: 650; font-size: .88rem; margin-bottom: 4px; }
.dz-students { columns: 3 160px; column-gap: 24px; margin: 0; padding-left: 1.6em; font-size: .9rem; }
.dz-students li { break-inside: avoid; padding: 1px 0; }
.dz-qr { width: 180px; padding: 8px; background: #fff; border-radius: 10px; border: 1px solid var(--border); }
.dz-qr svg { display: block; width: 100%; height: auto; }
.print-sheet .dz-table { font-size: .82rem; }
.print-sheet .dz-text { font-size: .85rem; }
@media (max-width: 640px) {
  /* Handy: jede Lektion als Block (Zeit und Fach nebeneinander, Inhalt darunter) */
  .dossier:not(.print-sheet) .ps-head { flex-wrap: wrap; }
  .dossier:not(.print-sheet) .ps-title { font-size: 1.25rem; }
  .dossier:not(.print-sheet) .dz-table, .dossier:not(.print-sheet) .dz-table tbody { display: block; }
  .dossier:not(.print-sheet) .dz-table tr { display: grid; grid-template-columns: 52px minmax(0, 1fr); border-top: 1px solid var(--border); }
  .dossier:not(.print-sheet) .dz-table tr:last-child { border-bottom: 1px solid var(--border); }
  .dossier:not(.print-sheet) .dz-table td { display: block; width: auto; border: 0 !important; }
  .dossier:not(.print-sheet) .dz-table .dz-prog { grid-column: 2; padding-top: 0; }
  .dossier:not(.print-sheet) .dz-table .dz-prog:empty { display: none; }
  .dz-students { columns: 2 120px; }
}

/* Vorlagen importieren */
.import-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.import-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius, 12px); max-height: 55vh; overflow-y: auto; }
.import-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 14px; border-bottom: 1px solid var(--border); opacity: .6; }
.import-row:last-child { border-bottom: 0; }
.import-row.selected { opacity: 1; }
.import-row input[type=checkbox] { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--accent); }
.import-title { font-weight: 650; cursor: pointer; overflow-wrap: anywhere; }
.import-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.import-meta:empty { display: none; }
.import-row details { margin-top: 4px; font-size: .85rem; }
.import-row summary { cursor: pointer; color: var(--accent); }
.import-text { white-space: pre-wrap; font: inherit; font-size: .85rem; color: var(--text-2); background: var(--surface-2); border-radius: 8px; padding: 10px 12px; margin: 6px 0 0; max-height: 260px; overflow-y: auto; }
.import-row .select { width: auto; min-width: 150px; min-height: 34px; padding-top: 5px; padding-bottom: 5px; font-size: .88rem; }
.import-selects { display: flex; flex-direction: column; gap: 6px; }
.import-row.changed { background: var(--accent-soft); }
.organize-list .import-row { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; opacity: 1; }
.organize-title { font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .import-row { grid-template-columns: auto minmax(0, 1fr); }
  .import-selects { grid-column: 2; }
  .organize-list .import-row { grid-template-columns: 1fr; }
}

/* Vorlagen: Ansichten Schuljahr/Thema, aufklappbare Gruppen */
.list-tools { display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 4px; }
.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-3); border-radius: 10px; }
.seg-btn { flex: 1; border: 0; background: none; padding: 6px 12px; border-radius: 8px; font-weight: 600; font-size: .86rem; color: var(--text-2); cursor: pointer; }
.seg-btn.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.list-nav .group-toggle { display: flex; align-items: center; gap: 6px; width: 100%; border: 0; background: none; cursor: pointer; text-align: left; border-radius: 8px; }
.list-nav .group-toggle:hover { background: var(--surface-3); }
.list-nav .group-toggle.now { color: var(--accent-strong); }
.list-nav .group-toggle .chip { text-transform: none; letter-spacing: 0; font-size: .7rem; padding: 1px 7px; }
.group-count { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text-3); }
.list-meta { font-size: .75rem; color: var(--text-3); white-space: nowrap; }
.list-item.active .list-meta { color: inherit; }
.tpl-head { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tpl-head h2 { margin: 0; }

/* Wissen: Dateien und Ordner */
.source-list { display: flex; flex-direction: column; gap: 4px; }
.source-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 4px; border-bottom: 1px solid var(--border); }
/* schmal: Knöpfe unter die Angaben, damit Pfad und Hinweise die ganze Breite haben */
@media (max-width: 640px) {
  .source-row { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .source-row > .btn-group { grid-column: 2; }
}
.source-row:last-child { border-bottom: 0; }
.source-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-strong); display: grid; place-items: center; flex: none; }
.source-row strong { overflow-wrap: anywhere; }
.spinner.sm { width: 11px; height: 11px; border-width: 2px; vertical-align: -1px; }
.section-label { display: flex; align-items: center; gap: 6px; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin: 26px 0 10px; }
.file-list { display: flex; flex-direction: column; max-height: 60vh; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; }
/* Dateiliste im Wissen (nicht die Treffer der Dateiseite) */
.file-list .file-row { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.file-list .file-row:last-child { border-bottom: 0; }
.file-list .file-row > .icon { color: var(--text-3); flex: none; }
.file-name { font-weight: 600; overflow-wrap: anywhere; }
.file-list .file-name { white-space: normal; overflow: visible; } /* in der Dateiliste lange Namen ganz zeigen (mit Art-Markierung) */
.text-danger { color: var(--danger); }
.file-section { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border); }
.file-section h4 { margin: 0 0 6px; }
.file-section.hit { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.progress-bar { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.progress-bar > span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.error-list { margin: 0; padding-left: 18px; color: var(--danger); max-height: 160px; overflow-y: auto; }
.error-list:empty { display: none; }
.drop-target { outline: 3px dashed var(--accent); outline-offset: 6px; border-radius: 12px; }

/* Einstellungen: Daten löschen */
.delete-list { display: flex; flex-direction: column; }
.delete-row { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.delete-row:last-child { border-bottom: 0; }
.btn.ghost.danger:not(:disabled) { color: var(--danger); }

/* Jahresplanung: Zusammenfassung, Jahresbalken (Wochen mit Lektionen in der Farbe ihres Blocks), Themenblöcke */
.year-plan { display: flex; flex-direction: column; gap: 14px; }
.yp-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 0; }
.yp-stat { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-left: 1px solid var(--border); }
.yp-stat:first-child { border-left: 0; }
.yp-stat strong { font-size: 1.5rem; line-height: 1.1; }
.yp-stat span { font-size: .8rem; color: var(--text-2); }
.yp-stat.ok strong { color: var(--success); }
.yp-stat.warn strong { color: var(--danger, #b42318); }
.yp-stat.muted strong { color: var(--text-2); }
.yp-bar-card { padding: 14px 16px 10px; }
.yp-bar { display: flex; align-items: flex-end; gap: 2px; overflow-x: auto; padding-bottom: 2px; }
.yp-week { flex: 1 0 9px; display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-width: 9px; }
.yp-stack { display: flex; flex-direction: column; gap: 5px; border-radius: 3px; }
.yp-cells { display: flex; flex-direction: column-reverse; gap: 2px; min-height: 46px; justify-content: flex-start; }
.yp-cell { display: block; height: 9px; border-radius: 2px; }
.yp-cell.free { background: var(--surface-2, #ece9e2); box-shadow: inset 0 0 0 1px var(--border); }
.yp-cell.past { opacity: .45; }
.yp-week.off .yp-stack { background: repeating-linear-gradient(135deg, var(--warn-soft) 0 4px, transparent 4px 8px); }
.yp-week.now .yp-stack { box-shadow: 0 0 0 2px var(--accent); }
/* mit Bereichen: eine Spur pro Bereich (Höhe aus dem Skript), links ihre Namen */
.yp-bar.lanes .yp-cells { min-height: 0; overflow: hidden; }
.yp-lanes { position: sticky; left: 0; z-index: 1; flex: none; display: flex; flex-direction: column; gap: 3px; max-width: 34%; padding-right: 6px; background: var(--surface); }
.yp-lanes .yp-stack > span { display: flex; align-items: center; justify-content: flex-end; min-width: 0; font-size: .68rem; line-height: 1.1; color: var(--text-2); }
.yp-lane-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.yp-month { height: 14px; font-size: .68rem; color: var(--text-2); white-space: nowrap; overflow: visible; }
.yp-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; color: var(--text-2); }
.yp-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.yp-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; }
.yp-dot.free { background: var(--surface-2, #ece9e2); box-shadow: inset 0 0 0 1px var(--border); border-radius: 2px; }
.yp-dot.off { background: repeating-linear-gradient(135deg, var(--warn) 0 2px, var(--warn-soft) 2px 4px); border-radius: 2px; }
.yp-list { display: flex; flex-direction: column; }
/* Sortierung der Themen im Kopf der Karte; auf dem Handy auf einer eigenen Zeile unter Titel und «Thema» */
.yp-sort { margin-left: auto; flex: none; padding: 2px; }
.yp-sort .seg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 4px 9px; font-size: .8rem; white-space: nowrap; }
@media (max-width: 600px) { .yp-sort { order: 3; flex: 1 1 100%; margin-left: 0; } .yp-sort .seg-btn { padding: 6px 8px; } }
.yp-block { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); }
.yp-block:first-child { border-top: 0; }
.yp-block > .yp-dot { width: 12px; height: 12px; margin-top: 5px; }
.yp-block.done { opacity: .7; }
/* aus der Meldung nach dem Zuweisen: das Thema kurz hervorheben (der Schatten gibt der Farbe links und rechts Luft) */
.yp-block.yp-flash { border-radius: 8px; animation: yp-flash 2.2s ease-out; }
@keyframes yp-flash { 0%, 35% { background: color-mix(in srgb, var(--mark-yellow) 40%, transparent); box-shadow: 0 0 0 8px color-mix(in srgb, var(--mark-yellow) 40%, transparent); } }
.yp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.yp-main:hover .yp-title strong { color: var(--accent); }
.yp-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.yp-note { overflow-wrap: anywhere; }
.yp-progress { display: block; height: 5px; max-width: 260px; margin-top: 2px; border-radius: 3px; background: var(--surface-2, #ece9e2); overflow: hidden; }
.yp-progress > i { display: block; height: 100%; border-radius: 3px; }
.yp-drift { flex: 1 1 100%; max-width: calc(100% - 22px); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-left: 22px; padding: 6px 10px; border-radius: 8px; background: var(--warn-soft); font-size: .86rem; }
.yp-drift > .grow { min-width: 12rem; }
.yp-drift.yp-open { max-width: none; margin: 0 0 10px; background: var(--accent-soft); }
.yp-drift.yp-next { background: var(--accent-soft); }
.yp-steps { margin: 0; padding-left: 1.4em; display: grid; gap: 6px; font-size: .9rem; color: var(--text-2); }
.yp-steps strong { color: var(--text); }
.yp-when { display: block; margin-top: 2px; }
.yp-when.short { color: var(--warn); }
.yp-gap { display: flex; align-items: center; gap: 8px; padding: 6px 0 6px 2px; border-top: 1px dashed var(--border); color: var(--success); }
.yp-colors { display: flex; flex-wrap: wrap; gap: 6px; }
.yp-swatch { width: 28px; height: 28px; padding: 0; border: 2px solid transparent; border-radius: 50%; cursor: pointer; box-shadow: inset 0 0 0 2px var(--surface); }
.yp-swatch.on { border-color: var(--text); }
.yp-swatch.auto { background: var(--surface-2, #ece9e2); color: var(--text-2); font-size: .72rem; font-weight: 700; }
/* «Weitere Angaben» in einem Dialog (Neues Thema): eingeklappt eine Zeile, aufgeklappt die Felder darunter */
.more-fields > summary { display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; color: var(--accent); font-weight: 600; font-size: .9rem; }
.more-fields > summary::-webkit-details-marker { display: none; }
.more-fields > summary > .icon { transition: transform .15s; }
.more-fields[open] > summary > .icon { transform: rotate(90deg); }
.more-fields > .stack { margin-top: 12px; }
/* Themen-Dialog (themedialog.js): Reiter ohne eigenen Abstand darunter, Klassenstufe schmal */
.theme-tabs { margin-bottom: 0; }
.theme-grade { max-width: 240px; }
@media (max-width: 560px) {
  .yp-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yp-stat:nth-child(3) { border-left: 0; }
  .yp-stat:nth-child(n+3) { border-top: 1px solid var(--border); }
}
/* Sequenz teilen: E-Mail und «Senden» nebeneinander */
.share-send { flex-wrap: nowrap; gap: 8px; }
.share-send > .input { flex: 1; min-width: 0; }
/* Vorschau beim Importieren gespeicherter Sequenzen */
.seq-import-row { padding: 6px 10px; border-top: 1px solid var(--border); overflow-wrap: anywhere; }
.seq-import-row:first-child { border-top: 0; }
/* Jahresplanung: gespeicherte Sequenzen wählen (Hinzufügen) und im Block (Bearbeiten) */
.yp-pick { display: flex; flex-direction: column; max-height: min(46vh, 360px); overflow: auto; border: 1px solid var(--border); border-radius: 8px; }
.yp-pick-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--border); cursor: pointer; overflow-wrap: anywhere; }
.yp-pick-row:first-child { border-top: 0; }
.yp-pick-row:has(input:checked) { background: var(--accent-soft); }
.yp-pick-row input { flex: none; width: 18px; height: 18px; accent-color: var(--accent); }
.yp-pick-row:has(input:disabled) { cursor: default; color: var(--text-3); }
.yp-pick-head { position: sticky; top: 0; z-index: 1; padding: 8px 12px 6px; border-top: 1px solid var(--border); background: var(--bg); font-weight: 600; }
.yp-pick-head:first-child { border-top: 0; }
/* «Mehrere Themen»: Total unter der Liste */
.yp-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 0 12px; }
.yp-total .grow { flex: 1 0 auto; } /* nicht zusammendrücken: zu wenig Breite → der Platz rutscht auf eine eigene Zeile */
.yp-total .warn { color: var(--warn); font-weight: 600; }
/* «Screen öffnen» bei der Lektion (screenlink.js): der Knopf erscheint nachgeladen, ohne Lücke in einer Knopfliste */
.screen-link { display: contents; }
.ov-now-screen { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; padding: 6px 6px 6px 12px; border-radius: 10px; background: var(--accent-soft); }
.ov-now-screen .screen-link:empty { display: none; }

/* ------------------------------------------------------------- Finger (Handy, Tablet) */
/* Elterngespräche (pages/parent-meetings.js): Runden, Kinder mit Status, Zeiten nach Tagen, Einladung */
.pm-rounds { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.pm-round { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; color: inherit; text-decoration: none; transition: border-color .12s, transform .12s; }
.pm-round:hover { border-color: var(--accent); transform: translateY(-1px); }
.pm-round-head { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; }
.pm-round-head .icon { color: var(--accent); }
.pm-round-head strong { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pm-round-foot { margin-top: auto; }
.pm-progress { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pm-bar { flex: 1 1 120px; max-width: 260px; height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.pm-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--success); }
.pm-intro .empty { padding-bottom: 8px; }
.pm-steps { display: grid; gap: 10px; max-width: 640px; margin: 0 auto; padding-left: 22px; color: var(--text-2); line-height: 1.5; }
.pm-steps strong { color: var(--text); }
.pm-status { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 14px; }
.pm-status .pm-progress { flex: 1 1 260px; }
.pm-status + .notice, .pm-status ~ .notice { margin-bottom: 14px; }
.pm-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.pm-kids { list-style: none; margin: 0; padding: 0; }
.pm-kid { display: flex; align-items: center; gap: 10px; padding: 9px 12px 9px 18px; border-bottom: 1px solid var(--border); }
.pm-kid:last-child { border-bottom: 0; }
.pm-kid-main { flex: 1; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.pm-kids-card .seg-btn, .cl-card .seg-btn { white-space: nowrap; }
.pm-kid-main strong { overflow-wrap: anywhere; }
.pm-kid-state { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; }
.pm-kid-state .small { display: inline-flex; align-items: center; gap: 3px; }
.pm-kid-actions { display: flex; gap: 2px; flex: none; }
.pm-days { display: flex; flex-direction: column; gap: 16px; }
.pm-day.past { opacity: .6; }
.pm-day-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.pm-slots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pm-slot { display: flex; align-items: center; gap: 10px; padding: 2px 4px 2px 10px; border-radius: 8px; background: var(--surface-2); }
.pm-slot.taken { background: var(--success-soft); }
.pm-time { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.pm-who { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--text-3); }
.pm-slot.taken .pm-who { color: var(--text); }
.pm-win { display: flex; flex-direction: column; gap: 4px; }
.pm-win-fields { display: grid; grid-template-columns: minmax(140px, 1.4fr) minmax(96px, 1fr) minmax(96px, 1fr) auto; gap: 8px; align-items: end; }
.pm-win-fields .pm-win-x { margin-bottom: 2px; }
.pm-win-preview { min-height: 1.3em; }
.pm-win-warn { display: flex; align-items: flex-start; gap: 6px; color: var(--warn); }
.pm-win-warn[hidden] { display: none; }
.pm-win-warn .icon { flex: none; margin-top: 2px; }
.pm-wins:empty { display: none; }
/* Wochenansicht zum Wählen der Zeitfenster (meetingweek.js): 48 px pro Stunde, Spalten setzt das Skript */
.mw { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; }
.mw-head { display: flex; align-items: center; gap: 4px 6px; flex-wrap: wrap; padding: 6px 10px 6px 6px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.mw-label { font-variant-numeric: tabular-nums; }
.mw-count { display: flex; align-items: center; gap: 6px; margin-left: auto; color: var(--text-2); font-size: .85rem; white-space: nowrap; }
.mw-foot { padding: 6px 10px; border-top: 1px solid var(--border); background: var(--surface-2); line-height: 1.4; }
.mw-scroll { max-height: 380px; overflow-y: auto; overscroll-behavior: contain; }
.mw-grid { display: grid; }
.mw-corner, .mw-day { position: sticky; top: 0; z-index: 4; background: var(--surface); border-bottom: 1px solid var(--border); }
.mw-day { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; padding: 5px 4px; border-left: 1px solid var(--border); font-size: .82rem; line-height: 1.25; text-align: center; }
.mw-day strong { white-space: nowrap; }
.mw-day.today strong { color: var(--now); }
.mw-sub { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text-3); font-size: .72rem; }
.mw-axis { position: relative; }
.mw-axis span { position: absolute; right: 6px; transform: translateY(-50%); font-size: .7rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.mw-axis span:first-child { transform: none; }
.mw-col { position: relative; border-left: 1px solid var(--border); cursor: pointer;
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(color-mix(in srgb, var(--border) 50%, transparent) 1px, transparent 1px);
  background-size: 100% 48px, 100% 24px; }
@media (hover: hover) { .mw-col:not(.past):hover { background-color: color-mix(in srgb, var(--accent) 5%, transparent); } }
.mw-col.off { background-image: linear-gradient(var(--border) 1px, transparent 1px), repeating-linear-gradient(135deg, var(--surface-3) 0 6px, transparent 6px 12px); background-size: 100% 48px, auto; }
.mw-col.past { cursor: default; background-color: var(--surface-2); }
.mw-col.past > * { opacity: .55; }
.mw-gone { position: absolute; top: 0; left: 0; right: 0; z-index: 3; pointer-events: none; border-bottom: 2px solid var(--now); background: color-mix(in srgb, var(--surface-3) 60%, transparent); }
.mw-busy { position: absolute; left: 2px; right: 2px; z-index: 1; overflow: hidden; padding: 1px 5px; border: 1px solid var(--border-strong); border-radius: 5px; background: var(--surface-3); color: var(--text-2); font-size: .72rem; line-height: 1.3; cursor: help; }
.mw-busy > span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mw-time { font-variant-numeric: tabular-nums; }
.mw-busy > .mw-time { opacity: .85; }
.mw-event { border-style: dashed; }
.mw-meeting { background-image: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--border-strong) 45%, transparent) 5px 7px); }
.mw-own { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--accent-soft); color: var(--accent-strong); }
.mw-own.booked { border-color: color-mix(in srgb, var(--success) 50%, var(--border)); background: var(--success-soft); color: var(--success); }
.mw-win { position: absolute; left: 3px; right: 3px; z-index: 2; overflow: hidden; border: 2px solid var(--accent); border-radius: 6px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); box-shadow: var(--shadow-sm); cursor: grab; touch-action: none; user-select: none; transition: box-shadow .12s, opacity .12s; }
@media (hover: hover) {
  .mw-win:hover { box-shadow: var(--shadow); }
  .mw-busy:hover { border-color: var(--text-3); color: var(--text); }
}
.mw-win.moving { opacity: .35; }
/* Kopie beim Ziehen, darüber Beginn und Ende */
.mw-win.mw-drag { z-index: 3; overflow: visible; pointer-events: none; box-shadow: var(--shadow-lg); }
.mw-win.mw-drag::before { content: attr(data-range); position: absolute; left: -2px; bottom: calc(100% + 4px); padding: 2px 7px; border-radius: 6px; background: var(--text); color: var(--surface); font-size: .72rem; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mw-win.mw-drag.nope { border-color: var(--danger); border-style: dashed; background: color-mix(in srgb, var(--danger) 8%, transparent); }
.mw-dragging, .mw-dragging * { cursor: grabbing !important; user-select: none; }
/* Vorschau beim Darüberfahren: das Fenster, das ein Klick anlegt */
.mw-preview { position: absolute; left: 3px; right: 3px; z-index: 2; display: flex; flex-direction: column; gap: 1px; overflow: hidden; padding: 3px 7px; border: 2px dashed var(--accent); border-radius: 6px; background: color-mix(in srgb, var(--accent) 7%, transparent); color: var(--accent-strong); font-size: .72rem; line-height: 1.25; pointer-events: none; }
.mw-preview strong { font-variant-numeric: tabular-nums; }
.mw-preview.short { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 9%, transparent); color: var(--warn); }
.mw-win.clash { border-style: dashed; border-color: var(--warn); background: transparent; box-shadow: none; }
.mw-win.clash .mw-slot { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--text); }
.mw-win.clash .mw-x { background: var(--warn); }
.mw-slot { position: absolute; left: 3px; right: 3px; overflow: hidden; padding: 2px 5px; border-radius: 4px; background: color-mix(in srgb, var(--accent) 24%, var(--surface)); color: var(--accent-strong); font-size: .7rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mw-x { position: absolute; top: 3px; right: 3px; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: var(--accent); color: var(--accent-text); cursor: pointer; }
.mw-x:hover { background: var(--accent-strong); }
.mw-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mw-x .icon { width: 14px; height: 14px; }
.mw-grid.loading { opacity: .45; pointer-events: none; transition: opacity .15s .1s; }
.mw-wait { grid-column: 1 / -1; display: grid; place-items: center; min-height: 380px; padding: 16px; text-align: center; color: var(--text-3); }
.mw-wait.mw-error { min-height: 120px; }
@media (max-width: 640px) {
  .mw-scroll { max-height: 320px; overscroll-behavior: auto; } /* am Ende der Woche weiter im Dialog */
  .mw-wait { min-height: 320px; }
}
.pm-inv-nav { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.pm-inv-tpl { gap: 8px; flex-wrap: nowrap; }
.pm-inv-tpl .select { flex: 1 1 auto; min-width: 0; }
.pm-allow { column-gap: 18px; row-gap: 4px; }
/* Wunschzeiten: Art der Terminwahl, Schritte bis zum Bekanntgeben, Vorschlag */
.pm-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pm-modes .radio-card:has(input:disabled) { cursor: not-allowed; opacity: .55; }
.pm-wish-panel { flex-wrap: wrap; align-items: center; }
.pm-wish-panel .grow { flex: 1 1 280px; }
.pm-wish-actions { gap: 8px; }
.notice .btn.primary .icon { color: inherit; }
.pm-who:has(.pm-wishes) { display: flex; flex-wrap: wrap; column-gap: 8px; }
.pm-wishes { color: var(--accent-strong); font-weight: 600; white-space: nowrap; }
.pm-proposal { max-height: 46vh; overflow: auto; }
.pm-proposal-rest { margin: 0; font-size: .92rem; color: var(--text-2); }
.pm-inv-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; }
.pm-inv-who .small { display: inline-flex; align-items: center; gap: 3px; }
.pm-inv-count { text-align: right; }
.pm-inv-subject { min-height: auto; padding: 10px 14px; font-weight: 600; }
/* Link für alle: Link, Text für die Eltern und QR-Code (der bleibt hell, sonst lässt er sich schlecht scannen) */
.pm-share-points { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--text-2); }
.pm-share-link { gap: 8px; flex-wrap: nowrap; }
.pm-share-link .input { flex: 1 1 auto; min-width: 0; font-variant-numeric: tabular-nums; }
.pm-share-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; }
.pm-share-text { min-height: auto; font-size: .92rem; }
.pm-share-figure { margin: 26px 0 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pm-share-qr { width: 176px; height: 176px; padding: 6px; border-radius: 10px; background: #ffffff; border: 1px solid var(--border); }
.pm-share-qr svg { display: block; width: 100%; height: 100%; }
@media (max-width: 640px) {
  .pm-share-grid { grid-template-columns: minmax(0, 1fr); }
  .pm-share-figure { margin-top: 0; }
}
@media (max-width: 900px) { .pm-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .pm-modes { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .pm-win-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .pm-win-fields .pm-win-date { grid-column: 1 / -1; }
  .pm-inv-who .pm-inv-count, .pm-inv-next-label { display: none; }
  .pm-inv-next { min-width: 44px; padding-inline: 8px; justify-content: center; }
}

/* Abhaklisten (pages/check-lists.js): grosse Zeilen zum Abhaken, auch auf dem Handy; Übersicht im Bereich «Aufgaben» */
.cl-items { list-style: none; margin: 0; padding: 0; }
.cl-item { display: flex; align-items: center; gap: 4px; padding: 0 8px 0 0; border-bottom: 1px solid var(--border); }
.cl-item:last-child { border-bottom: 0; }
.cl-check { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 10px 8px 18px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cl-check:hover .cl-box { border-color: var(--accent); }
.cl-check:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }
.cl-box { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid var(--border-strong); border-radius: 7px; background: var(--surface); color: var(--accent-text); transition: background .12s, border-color .12s; }
.cl-item.done .cl-box { background: var(--success); border-color: var(--success); }
.cl-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.cl-name small { font-weight: 400; color: var(--text-3); }
.cl-item.done .cl-name > span { color: var(--text-2); }
.cl-note { margin: -4px 0 14px; white-space: pre-line; }
.cl-missing { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.cl-missing-line { color: var(--text-2); overflow-wrap: anywhere; }
.cl-suggest { gap: 6px; margin-top: -6px; }
.cl-archive { margin-top: 20px; }
.cl-archive > summary { cursor: pointer; font-weight: 600; color: var(--text-2); margin-bottom: 12px; }
.cl-archived { opacity: .75; }
.cl-print .cl-print-box { font-size: 1.15rem; text-align: center; }

/* Drucken aus der Klassenliste (classprint.js): Seiten in Millimetern, Namen passt fitNames() in die Breite ein */
.cp-sheet { box-sizing: border-box; background: #fff; color: #1c2430; color-scheme: light; font-family: var(--font); line-height: 1.2;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.cp-page { box-sizing: border-box; overflow: hidden; break-after: page; }
.cp-page:last-child { break-after: auto; }
.cp-fit { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; font-weight: 700; }
.cp-fit.wrap { white-space: normal; overflow-wrap: anywhere; }
.cp-sub { display: block; max-width: 100%; color: #586371; }
/* Namensschilder 85 × 54 mm, Schnittlinien gestrichelt */
.cp-badges { width: 190mm; height: 276mm; display: grid; grid-template-columns: repeat(2, 85mm); grid-auto-rows: 54mm; justify-content: center; align-content: start; padding-top: 3mm; }
.cp-badge { box-sizing: border-box; border: 0 dashed #b9b4a8; border-width: 0 .3mm .3mm 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1mm; padding: 3mm 6mm; text-align: center; overflow: hidden; }
/* Schnittlinien nur einmal (sonst doppelt im PDF): rechts und unten, oben die erste Reihe, links die erste Spalte */
.cp-badge:nth-child(-n+2) { border-top-width: .3mm; }
.cp-badge:nth-child(odd) { border-left-width: .3mm; }
.cp-badge .cp-fit { font-size: 12mm; }
.cp-badge .cp-last { font-size: 5mm; font-weight: 600; }
.cp-badge .cp-class { font-size: 3.5mm; margin-top: 1.5mm; }
/* Pultkarten: zwei pro Seite, in der Mitte gefaltet; die obere Hälfte steht kopf, damit der Name hinten richtig steht */
.cp-tents { width: 190mm; height: 276mm; }
.cp-tent { box-sizing: border-box; height: 138mm; border: .3mm dashed #b9b4a8; display: grid; grid-template-rows: 1fr 1fr; }
.cp-tent + .cp-tent { border-top: 0; }
.cp-tent-half { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2mm; padding: 6mm 10mm; text-align: center; overflow: hidden; }
.cp-tent-half.flip { transform: rotate(180deg); }
.cp-tent-half + .cp-tent-half { border-top: .3mm dotted #cfc9bc; }
.cp-tent .cp-fit { font-size: 24mm; }
.cp-tent .cp-last { font-size: 9mm; font-weight: 600; }
/* Etiketten: Bogen bis an den Rand (Rand 0), Grösse und Zeilen aus LABEL_SHEETS; die Umrisse nur am Bildschirm */
.cp-labels { width: 210mm; display: grid; justify-content: center; align-content: start; }
.cp-label { box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: .8mm; padding: 3mm 7mm; overflow: hidden; }
@media screen { .cp-label { box-shadow: inset 0 0 0 1px #ebe7de; } }
.cp-label .cp-fit { font-size: 6mm; }
.cp-label .cp-class { font-size: 3.4mm; }
.cp-label .cp-subject { font-size: 3.4mm; margin-top: 1.5mm; padding-bottom: .6mm; border-bottom: .25mm solid #9a948a; }
/* leere Abhakliste: Namen und leere Spalten zum Beschriften und Abhaken von Hand */
.print-sheet.cp-list { font-size: 3.6mm; }
.cp-check .cp-fit { font-weight: 400; }
.cp-check .cp-fit.wrap { line-height: 1.05; }
.cp-list .ps-head { align-items: flex-end; }
.cp-blank { width: 110mm; height: 9mm; border-bottom: .3mm solid #9a948a; }
.cp-date { font-size: 3.6mm; color: #586371; white-space: nowrap; }
.cp-check { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
/* jede Linie einmal (sonst doppelt im PDF), oben am Kopf, damit sie auf jeder Seite mitkommt */
.cp-check th, .cp-check td { border: 0 solid #9a948a; border-width: 0 .25mm .25mm 0; padding: 0 1.5mm; height: 7.5mm; text-align: left; font-weight: 400; overflow: hidden; white-space: nowrap; }
.cp-check thead th { height: 22mm; vertical-align: bottom; padding-bottom: 1mm; font-weight: 650; border-top-width: .25mm; }
.cp-check .cp-n { color: #7a828c; text-align: right; border-left-width: .25mm; }
.ov-checklists { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 8px; }
.ov-checklist { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 10px; border-radius: 8px; background: var(--surface-2); color: inherit; text-decoration: none; }
.ov-checklist:hover { background: var(--accent-soft); }
.ov-checklist .icon { color: var(--accent); }
.ov-checklist-title { flex: 1 1 140px; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }

/* Buchungsseite der Eltern (parent-booking.js) */
.pb-main { max-width: 640px; margin: 0 auto; }
.pb-card { display: flex; flex-direction: column; gap: 14px; }
.pb-card h1 { font-size: 1.45rem; line-height: 1.25; margin: 0; overflow-wrap: anywhere; }
.pb-lead { margin: -6px 0 0; color: var(--text-2); font-size: 1.05rem; }
.pb-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pb-facts li { display: flex; align-items: flex-start; gap: 8px; }
.pb-facts .icon { color: var(--text-3); margin-top: 2px; flex: none; }
.pb-note { white-space: pre-line; }
.pb-booked { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 12px; background: var(--success-soft); border: 1px solid color-mix(in srgb, var(--success) 30%, transparent); }
.pb-booked-label { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--success); }
.pb-booked-when { font-size: 1.2rem; font-weight: 700; }
.pb-booked-actions { gap: 8px; }
.pb-choose { display: flex; flex-direction: column; gap: 10px; }
.pb-choose h2 { font-size: 1.1rem; margin: 4px 0 0; }
.pb-choose > .small { margin: -6px 0 0; }
.pb-day h3 { font-size: .95rem; margin: 6px 0 8px; color: var(--text-2); }
.pb-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.pb-time { justify-content: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.pb-foot { text-align: center; margin: 16px 0 8px; }
/* Link für alle: Name des Kindes im Fenster, danach der Hinweis auf den eigenen Link */
.pb-child-when { margin: 0; font-size: 1.05rem; font-weight: 700; }
.pb-child-error { margin: 0; color: var(--danger); font-size: .9rem; }
.pb-saved-text { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
/* Wunschzeiten: Zeiten antippen (gewählt mit Haken), Speichern bleibt beim Scrollen unten sichtbar */
.pb-pick { gap: 4px; }
.pb-pick .icon { display: none; }
.pb-pick.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.pb-pick.on:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.pb-pick.on .icon { display: inline-block; }
.pb-wish-save { position: sticky; bottom: 0; z-index: 1; gap: 12px; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); }
.pb-wish-more { gap: 8px; margin-top: -4px; }
.pb-wished { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 12px; background: var(--success-soft); border: 1px solid color-mix(in srgb, var(--success) 30%, transparent); }
.pb-wished-label { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--success); }
.pb-wished-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.pb-wished-list li { font-variant-numeric: tabular-nums; }
.pb-wished-none { margin: 0; font-weight: 600; }
.pb-wished > p { margin: 0; }
/* Seite der Eltern: ohne Leiste oben, «Lehrerpult» ganz unten */
.pb-page { display: flex; flex-direction: column; }
.pb-page > .pb-main { flex: 1 0 auto; width: 100%; }
.pb-brand { display: flex; justify-content: center; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
.pb-brand a { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); font-size: .78rem; font-weight: 600; text-decoration: none; }
.pb-brand a:hover { color: var(--accent); }
.pb-brand .team-logo { width: 15px; height: 15px; border-radius: 4px; }

/* Tippziele mindestens 44 px: Knöpfe, Reiter, Felder und Zeilen werden so hoch; kleine Kästchen und Symbole behalten ihr
   Bild und bekommen eine grössere Fläche zum Antippen. Mit Maus und Touchpad bleibt alles, wie es ist. */
@media (pointer: coarse) {
  .btn, .btn.sm, .tab, .seg-btn, .nav-link, .list-item, .group-toggle, .ov-week-day, .week-title, .task-folder-chip, button.chip, .sb-opt { min-height: 44px; }
  .btn.icon-only, .btn.sm.icon-only { min-width: 44px; }
  .input, .select { min-height: 44px; }
  /* Stellen, die auf dem Handy sonst kompakter sind */
  .plan-head .plan-actions .btn, .select.sm, .student-table .input, .import-row .select { min-height: 44px; }
  .plan-head .plan-actions .icon-only { width: 44px; }
  /* Reihenfolge der Aufgaben: so klein gezeichnet wie mit der Maus, damit sie in der Zeile der Reiter Platz hat; die
     Tippfläche reicht darüber und darunter bis 44 px */
  .task-order .seg-btn { position: relative; min-height: 32px; min-width: 44px; justify-content: center; }
  .task-order .seg-btn::after { content: ''; position: absolute; inset: -6px 0; }
  /* Woche (Tablet): Werkzeuge als Ganzes in die zweite Zeile statt «…» allein darunter */
  .wn-tools { flex: 1 1 auto; flex-wrap: nowrap; }
  .checkbox { min-height: 44px; }
  .people-pick { row-gap: 0; }
  .ss-menu, .ov-grip { width: 44px; height: 44px; margin-top: 0; }
  .lesson-info { width: 44px; height: 44px; top: 2px; right: 2px; }
  .lesson.has-info { padding-right: 48px; }
  /* ⓘ im Wochenraster (Tablet): so gross, wie die Zeile erlaubt */
  .wg-info { width: 34px; height: 34px; top: 0; right: 0; }
  .wg-item > .wg-lesson { padding-right: 34px; }
  .task-check::after { inset: -11px; }
  .up-row > input { width: 24px; height: 24px; margin-top: 8px; }
  /* «Nicht mehr anhängen» im Datei-Chip: grösser, ohne den Chip höher zu machen */
  .chip-x { width: 32px; height: 32px; margin: -8px -10px -8px -4px; }
  /* «Rückgängig» in der Meldung: höhere Fläche, die Meldung bleibt gleich hoch */
  .toast-action { padding: 12px 10px; margin: -12px -10px -12px -2px; }
  .notice-toggle { min-height: 44px; margin: -10px 0; }
}