/* Dashboard schulwebseite.de: Arbeitswerkzeug in den Farben und Schriften des Schulbuchs.
   Die Welt liefert Schrift, Farbe, Dichte und die Zeichen für den Zustand:
   Textmarker-Gelb = geändert, noch nicht veröffentlicht; Rotstift-Haken = veröffentlicht.
   Die Vorschau der Schulwebsite zeichnet muster/vorschau.html in einem Rahmen. */

@font-face { font-family: "Barlow"; src: url(fonts/Barlow-SemiBold.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(fonts/Barlow-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url(fonts/AtkinsonHyperlegibleNext.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Playwrite DE Grund"; src: url(fonts/PlaywriteDEGrund.ttf) format("truetype"); font-weight: 100 400; font-display: swap; }
@font-face { font-family: "Nunito"; src: url(fonts/Nunito.ttf) format("truetype"); font-weight: 200 1000; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url(fonts/SourceSerif4.woff2) format("woff2"); font-weight: 200 900; font-display: swap; }

:root {
  --rail: #0A5A62; --rail-h: #0C6F79; --einband: #0E7C86; --aufgabe: #E3F4F5;
  --grund: #EDF2F3; --papier: #FFFFFF; --tinte: #1B1F23; --grau: #4A545C; --feld: #5F6B74; --linie: #C9D0D6;
  --zeile: #F1F4F5; --zeile2: #E4E9EC;
  --merke: #FFF1A8; --marker: #FFE14D; --rotstift: #C8102E;
  --aktion: #C2185B; --aktion-d: #A8134D; --aktion-s: #8A0F40;
  --gut: #1F6A32; --gut-hell: #DDF0E1; --schlecht: #A3122B; --schlecht-hell: #FBE4E8;
  --titel: "Barlow", "Segoe UI", Arial, sans-serif;
  --text: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --hand: "Playwrite DE Grund", "Segoe Print", cursive;
  --leicht: cubic-bezier(.16, 1, .3, 1);
  --top-h: 76px;
  --haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M4 14c3 2 5 5 7 8 4-8 8-13 12-17' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:root[data-farbe=marine] { --rail: #1B4F9E; --rail-h: #2460BA; --einband: #1B5FC1; --aufgabe: #E6EEFA; }
:root[data-farbe=tafel] { --rail: #1F6A32; --rail-h: #277C3C; --einband: #257A36; --aufgabe: #E4F2E7; }
:root[data-farbe=beere] { --rail: #8C1245; --rail-h: #A21852; --einband: #A8134D; --aufgabe: #F9E6EE; }
:root[data-farbe=violett] { --rail: #4B3D9E; --rail-h: #5B4BB7; --einband: #5B4BB7; --aufgabe: #ECE9F8; }
:root[data-farbe=graphit] { --rail: #1B1F23; --rail-h: #343B42; --einband: #3A4249; --aufgabe: #E9EDF0; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--feld) var(--grund); }
body { margin: 0; background: var(--grund); color: var(--tinte); font: 1.0625rem/1.5 var(--text); }
::selection { background: var(--marker); color: var(--tinte); }
h1, h2, h3, h4, h5, p, ol, ul, figure, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
input, textarea { caret-color: var(--aktion); }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 4px; }
:focus-visible { outline: 3px solid var(--tinte); outline-offset: 2px; border-radius: 4px; }
main:focus { outline: none; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ic { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 50; background: var(--papier); padding: 12px 18px; border-radius: 6px; font-weight: 700; }
.skip:focus { top: 12px; }

/* ---------- Rahmen: Leiste links, Arbeitsfläche rechts ---------- */
.app { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.rail { background: var(--rail); color: #fff; }
.rail-in { position: sticky; top: 0; display: flex; flex-direction: column; gap: 22px; min-height: 100vh; max-height: 100vh; overflow-y: auto; scrollbar-width: thin; padding: 22px 0 20px 16px; }
.rail :focus-visible { outline-color: #fff; }
.wordmark { font: 700 1.3125rem/1 var(--titel); padding: 0 16px 0 4px; }
.wordmark a { display: inline-flex; align-items: baseline; gap: .3em; padding-top: 4px; min-height: 44px; text-decoration: none; }
.nav-knopf { display: none; }
.wordmark a:hover { text-decoration: underline; }
.wordmark .zeichen { position: relative; top: .104em; width: 1.66em; height: 1.66em; flex: none; }
.wordmark .wm-name { font: 700 1em/1 var(--text); letter-spacing: -.015em; }
.wordmark .z-ruecken { fill: rgba(10, 40, 50, .16); }
.wordmark .z-schild { fill: var(--rail); }
.who { padding: 0 16px 0 0; font-size: .9375rem; line-height: 1.35; }
.who a { display: grid; padding: 8px 10px 10px 4px; border-radius: 0 10px 10px 0; color: #fff; text-decoration: none; }
.who a:hover, .who a[aria-current] { background: var(--rail-h); }
.who-mehr { margin-top: 4px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.who button { margin-left: 4px; }
:root[data-gross] { font-size: 112.5%; }
.who strong { font: 700 1.125rem/1.3 var(--titel); }
.who button { margin-top: 6px; min-height: 44px; padding: 8px 0; text-align: left; background: none; border: 0; color: #fff; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; }
.nav { display: grid; gap: 4px; }
.nav a { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 0 16px 0 14px; border-radius: 10px 0 0 10px; color: #fff; font: 600 1.125rem/1.2 var(--titel); text-decoration: none; transition: background-color .15s; }
.nav a:hover { background: var(--rail-h); }
.nav a[aria-current] { background: var(--grund); color: var(--tinte); font-weight: 700; }
.nav a[aria-current]:focus-visible { outline-color: #fff; outline-offset: -5px; box-shadow: inset 0 0 0 2px var(--tinte); }

.work { min-width: 0; display: flex; flex-direction: column; }
.proto { background: var(--merke); padding: 7px clamp(18px, 3vw, 40px); font-size: .9375rem; }
.top { position: sticky; top: 0; z-index: 10; background: var(--papier); box-shadow: 0 2px 10px rgba(20, 40, 50, .12); }
.top-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding: 12px clamp(18px, 3vw, 40px); }
.school { display: grid; }
.school strong { font: 700 1.25rem/1.25 var(--titel); }
.school span { font-size: .9375rem; color: var(--grau); }
.pub { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.status { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.st-mark { flex: none; display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 6px; border-radius: 16px; font: 700 1.0625rem/1 var(--titel); }
.status[data-state=wartet] { background: var(--marker); padding: 6px 12px 6px 6px; border-radius: 20px; }
.status[data-state=wartet] .st-mark { background: var(--tinte); color: #fff; }
.status[data-state=ok] .st-mark { background: var(--gut); color: #fff; }
.status[data-state=ok] .st-mark .ic { width: 20px; height: 20px; }
.st-more { font-weight: 400; }

.strip { box-shadow: inset 0 2px 0 var(--zeile2); background: var(--aufgabe); }
.strip[data-mode=blocked] { background: var(--schlecht-hell); }
.strip[data-mode=done] { background: var(--gut-hell); }
.strip-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; padding: 16px clamp(18px, 3vw, 40px); }
.strip-txt { display: grid; gap: 4px; max-width: 70ch; }
.strip-txt strong { font: 700 1.3125rem/1.25 var(--titel); }
.strip-txt ul { list-style: disc; padding-left: 1.3em; }
.strip-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.strip[data-mode=done] .strip-txt strong { display: flex; align-items: center; gap: 8px; font: 400 1.5rem/1.2 var(--hand); color: var(--rotstift); }
.strip[data-mode=done] .strip-txt strong::before { content: ""; width: 34px; height: 34px; background: currentColor; -webkit-mask: var(--haken) center / contain no-repeat; mask: var(--haken) center / contain no-repeat; }

main { flex: 1; width: 100%; max-width: 1400px; padding: 30px clamp(18px, 3vw, 40px) 56px; }
.nachweis { padding: 18px clamp(18px, 3vw, 40px) 28px; font-size: .9375rem; color: var(--grau); display: grid; gap: 4px; max-width: 1400px; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 40; max-width: min(calc(100vw - 48px), 460px); background: var(--tinte); color: #fff; padding: 14px 20px; border-radius: 10px; font-weight: 700; box-shadow: 0 10px 28px rgba(10, 20, 30, .35); }
.naechster { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 22px; margin-bottom: 20px; padding: 14px 18px; background: var(--marker); border-radius: 10px; font-weight: 700; }
.naechster p { flex: 1 1 260px; }
.btn.dunkel { background: var(--tinte); border-color: var(--tinte); color: #fff; }
.btn.dunkel:hover { background: #000; }
body[data-strip=confirm] .state.wartet .btn, body[data-strip=confirm] .state.wartet .lnk { visibility: hidden; }
body[data-strip=confirm] .naechster { display: none; }
.strip[data-mode=weg] { background: var(--marker); }
.strip-btns { align-items: center; }

/* ---------- Bausteine der Oberfläche ---------- */
h1 { font: 700 2.25rem/1.1 var(--titel); letter-spacing: -.008em; text-wrap: balance; }
h2 { font: 700 1.5rem/1.2 var(--titel); }
h3 { font: 700 1.1875rem/1.25 var(--titel); }
h2.sub { margin-top: 32px; }
h2 + .rows, h2 + .ways, h2 + .ticks, h2 + .empty, h2.sub + * { margin-top: 12px; }
.pg-head { display: grid; gap: 8px; justify-items: start; margin-bottom: 24px; }
.lead { font-size: 1.125rem; color: var(--grau); max-width: 62ch; }
.help { font-size: .9375rem; color: var(--grau); margin-top: 6px; max-width: 62ch; }
.help.later { margin-top: 16px; }
.empty { background: var(--zeile2); border-radius: 10px; padding: 16px 18px; color: var(--grau); }
.empty.in-form { margin-bottom: 16px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; background: var(--papier); border: 2px solid var(--tinte); border-radius: 9px; font: 700 1.0625rem/1.1 var(--titel); cursor: pointer; transition: background-color .15s, transform .12s var(--leicht), box-shadow .12s var(--leicht); }
.btn:hover { background: var(--zeile2); }
.btn.pri { background: var(--aktion); border-color: var(--aktion); color: #fff; box-shadow: 0 3px 0 var(--aktion-s); }
.btn.pri:hover { background: var(--aktion-d); border-color: var(--aktion-d); }
.btn.pri:active { transform: translateY(3px); box-shadow: none; }
.btn:disabled { background: var(--zeile2); border-color: var(--zeile2); color: var(--grau); box-shadow: none; cursor: not-allowed; }
.btn .ic { width: 20px; height: 20px; }
.tool { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; background: var(--zeile); border: 0; border-radius: 8px; font-weight: 700; font-size: 1rem; cursor: pointer; }
.tool:hover { background: var(--zeile2); }
.tool:disabled { color: #7A858D; cursor: not-allowed; background: none; }
.tool.del { color: var(--schlecht); }
.tool .ic { width: 20px; height: 20px; }
.lnk { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; background: none; border: 0; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; }
.lnk:hover { text-decoration-thickness: 3px; }

.note { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; border-radius: 10px; }
.note > .ic { margin-top: 2px; }
.note.ok { background: var(--gut-hell); }
.note.ok > .ic { color: var(--gut); }
.note.warn { background: var(--merke); }
.note.bad { background: var(--schlecht-hell); }
.note.bad > .ic { color: var(--schlecht); }
.note-t { font: 700 1.1875rem/1.25 var(--titel); margin-bottom: 4px; }
.note ul { list-style: disc; padding-left: 1.2em; display: grid; gap: 4px; }
.tag { display: inline-block; background: var(--tinte); color: #fff; border-radius: 4px; padding: 0 7px; font-size: .8125rem; font-weight: 700; }
.ok-t, .warn-t { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.ok-t { color: var(--gut); }
.warn-t { background: var(--marker); padding: 3px 10px 3px 8px; border-radius: 6px; }
.ok-t .ic, .warn-t .ic { width: 20px; height: 20px; }

.rows { border-radius: 10px; }
.rows > li:first-child { border-radius: 10px 10px 0 0; }
.rows > li:last-child { border-radius: 0 0 10px 10px; }
.rows > li:only-child { border-radius: 10px; }
.rows li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 12px 18px; background: var(--papier); }
.rows li:nth-child(even) { background: var(--zeile); }
.big-rows li { padding: 16px 18px; }
.rows li.sub .row-main { padding-left: 30px; position: relative; }
.rows li.sub .row-main::before { content: ""; position: absolute; left: 2px; top: 2px; width: 22px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6B74' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4v7a3 3 0 0 0 3 3h10M14 10l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat; }
.rows li.is-edit { background: var(--marker); }
.selbst { font-size: .9375rem; font-weight: 700; color: var(--grau); }
.selbst.an { display: inline-flex; align-items: center; gap: 5px; color: var(--tinte); }
.selbst.an .ic { width: 20px; height: 20px; color: var(--gut); }
.school a { color: inherit; }
.selbst-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; margin: 8px 0 12px; color: var(--grau); }
.selbst-zeile p { max-width: 62ch; }
.datei-now { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.datei-now .ic { flex: none; color: var(--gut); margin-top: 1px; }
.f-land { max-width: 360px; }
h2.grp2 { margin-top: 18px; }
.row-main { flex: 1 1 220px; display: grid; min-width: 0; }
.row-main strong { font: 600 1.1875rem/1.3 var(--titel); }
.row-main small { font-size: .9375rem; color: var(--grau); }
.is-edit .row-main small { color: var(--tinte); }
.row-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.rows .tool { background: var(--zeile2); }

.undo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; background: var(--tinte); color: #fff; padding: 10px 12px 10px 16px; border-radius: 10px; margin-bottom: 14px; font-weight: 700; }
.undo span { flex: 1 1 200px; }
.undo .btn { border-color: #fff; color: var(--tinte); }
.undo:focus-visible { outline-offset: 3px; }
.undo .btn:focus-visible { outline-color: #fff; }

/* Formulare */
.field { display: block; min-width: 0; border: 0; padding: 0; margin: 0; }
.field > label, .field > legend { display: block; padding: 0; margin-bottom: 6px; font-weight: 700; }
.req { font-weight: 400; color: var(--grau); }
.field input:not([type=checkbox]):not([type=radio]), .field textarea { display: block; width: 100%; min-height: 48px; padding: 10px 12px; background: var(--papier); border: 2px solid var(--feld); border-radius: 7px; }
.field textarea { resize: vertical; line-height: 1.5; }
.field input:hover, .field textarea:hover { border-color: var(--tinte); }
.field [aria-invalid=true] { border-color: var(--schlecht) !important; border-width: 3px !important; }
.f-h input { font: 600 1.25rem/1.3 var(--titel); }
.field input[type=file] { padding: 7px; }
/* Beim Vertretungsplan steht der aktuelle Plan in der Zeile darüber. Der Text „Keine ausgewählt“ des Browsers würde dem widersprechen. */
.field input[data-plan] { color: transparent; width: fit-content; max-width: 100%; }
.field input[type=file]::file-selector-button { font: 700 1rem/1 var(--text); min-height: 34px; margin-right: 12px; padding: 0 14px; background: var(--zeile2); border: 0; border-radius: 6px; cursor: pointer; }
.f-err, .f-fehl { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; color: var(--schlecht); font-weight: 700; }
.f-err .ic, .f-fehl .ic { width: 20px; height: 20px; margin-top: 2px; flex: none; }
.picks { display: flex; flex-wrap: wrap; gap: 10px; }
.pick { position: relative; cursor: pointer; }
.pick input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pick-box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 76px; min-height: 48px; padding: 9px 14px; background: var(--papier); border: 2px solid var(--feld); border-radius: 8px; font-weight: 600; }
.pick:hover .pick-box { border-color: var(--tinte); }
.pick input:checked + .pick-box { background: var(--tinte); border-color: var(--tinte); color: #fff; }
.pick input:focus-visible + .pick-box { outline: 3px solid var(--tinte); outline-offset: 2px; }
.shape { fill: currentColor; }
.check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 8px 0; cursor: pointer; }
.check input { flex: none; width: 26px; height: 26px; margin: 0; accent-color: var(--einband); cursor: pointer; }
.radios { display: flex; gap: 28px; }
.consent { background: var(--merke); border-radius: 8px; padding: 4px 14px 8px; }
.field > label.check { display: flex; margin-bottom: 0; font-weight: 400; }
.consent .help { margin-top: 0; }
.img-row { display: flex; align-items: center; gap: 14px; }
.img-now { flex: none; width: 104px; height: 78px; object-fit: cover; border-radius: 6px; }
.logo-now { object-fit: contain; background: var(--papier); }
.gal-list, .lnk-list { display: grid; gap: 12px; }
.gal-item { display: flex; gap: 14px; align-items: flex-start; background: var(--zeile); border-radius: 8px; padding: 12px; }
.gal-f { flex: 1; min-width: 0; display: grid; gap: 8px; justify-items: start; }
.gal-f .field { width: 100%; }
.lnk-item { display: grid; gap: 12px; justify-items: start; background: var(--zeile); border-radius: 8px; padding: 14px; }
.lnk-item .field { width: 100%; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.inline-form { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
.inline-form .field { flex: 1 1 280px; max-width: 460px; }
.inline-form .btn { margin-top: 30px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.farbwahl { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 20px; }
.farbwahl .field { flex: none; }
.field input[type=color] { width: 120px; min-height: 52px; padding: 4px; cursor: pointer; }
.farb-info { flex: 1 1 260px; max-width: 52ch; padding-bottom: 6px; }
.farb-toene { display: inline-flex; margin-right: 10px; vertical-align: -5px; border-radius: 5px; overflow: hidden; box-shadow: 0 0 0 1px var(--linie); }
.farb-toene i { width: 22px; height: 22px; }
select { min-height: 48px; max-width: 100%; padding: 0 42px 0 12px; background: var(--papier) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%231B1F23' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 13px center / 16px; border: 2px solid var(--feld); border-radius: 7px; -webkit-appearance: none; appearance: none; cursor: pointer; }
select:hover { border-color: var(--tinte); }
select:disabled { background-color: var(--zeile2); border-color: var(--zeile2); color: var(--grau); cursor: not-allowed; }
.field select { display: block; width: 100%; }

/* Zugänge: Personen mit Rolle, darunter die Rechte je Rolle */
.role-pick { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.role-pick select { min-width: 250px; }
.rows .row-btns { min-width: 132px; justify-content: flex-end; }
.row-main .tag { vertical-align: 3px; margin-left: 6px; font-family: var(--text); }
.inline-form .f-rolle { flex: 0 1 280px; }
#userErr .note { margin-top: 14px; }
.rechte-box { margin-top: 14px; background: var(--papier); border-radius: 10px; overflow: hidden; }
.rechte { width: 100%; border-collapse: collapse; }
.rechte th, .rechte td { padding: 14px 16px; text-align: left; vertical-align: middle; }
.rechte thead th { background: var(--zeile2); font: 700 1.0625rem/1.25 var(--titel); vertical-align: bottom; }
.rechte thead th + th { text-align: center; width: 15%; }
.rechte thead small { display: block; margin-top: 2px; font: 400 .9375rem/1.3 var(--text); color: var(--grau); }
.rechte tbody tr:nth-child(even) { background: var(--zeile); }
.rechte tbody th { font-weight: 400; }
.rechte tbody th strong { display: block; font: 600 1.1875rem/1.3 var(--titel); }
.rechte tbody th small { display: block; max-width: 46ch; font-size: .9375rem; color: var(--grau); }
.rechte td { text-align: center; }
.rt { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: 44px; min-height: 44px; cursor: pointer; }
.rt input { flex: none; width: 26px; height: 26px; margin: 0; accent-color: var(--einband); cursor: pointer; }
.rt input:disabled { cursor: not-allowed; }
.rt-n { display: none; }
.sec-info { background: var(--aufgabe); border-radius: 8px; padding: 12px 14px; }
.sec-body { display: grid; gap: 18px; }
.sec-body > h2 + .lead { margin-top: -10px; }
h3.grp { margin-top: 10px; }

/* ---------- Übersicht ---------- */
.state { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; padding: 18px 22px; border-radius: 12px; }
.state.wartet { background: var(--marker); }
.state.ok { background: var(--gut-hell); }
.state .st-mark { min-width: 46px; height: 46px; border-radius: 23px; font-size: 1.375rem; background: var(--tinte); color: #fff; }
.state.ok .st-mark { background: var(--gut); }
.state-t { flex: 1 1 280px; }
.state-t h2 { font-size: 1.4375rem; }
.appr { margin-top: 24px; }
.appr-auf { flex: 1 1 100%; display: grid; gap: 16px; padding: 18px; background: var(--papier); border-radius: 8px; box-shadow: inset 0 0 0 2px var(--feld); }
.appr-was { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.appr-was img { width: 168px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.appr-was div { flex: 1 1 260px; display: grid; gap: 6px; }
.appr-was h3 { font-size: 1.1875rem; }
.appr-was p { max-width: 62ch; }
.home { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 32px; align-items: start; margin-top: 32px; }
.home-side { display: grid; gap: 16px; }
.ways { display: grid; gap: 10px; }
.way { display: flex; align-items: center; gap: 16px; width: 100%; padding: 14px 18px; background: var(--papier); border: 0; border-radius: 10px; text-align: left; cursor: pointer; box-shadow: 0 1px 3px rgba(20, 40, 50, .14); transition: background-color .15s, transform .15s var(--leicht); }
.way:hover { background: var(--aufgabe); }
/* Willkommen in der Testzeit */
.start { background: var(--merke); border-radius: 12px; padding: 22px 24px 20px; margin-bottom: 20px; display: grid; gap: 12px; justify-items: start; }
.start .ways { width: 100%; max-width: 760px; }
.start .way-ic { font: 700 1.375rem/1 var(--titel); }
.way:hover > .ic { transform: translateX(4px); }
.way > .ic { transition: transform .2s var(--leicht); }
.way-ic { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--einband); color: #fff; }
.way-t { flex: 1; display: grid; }
.way-t strong { font: 700 1.25rem/1.25 var(--titel); }
.way-t span { color: var(--grau); }
.info { background: var(--papier); border-radius: 12px; padding: 18px 22px 20px; display: grid; gap: 8px; justify-items: start; }
.info h2 { font-size: 1.3125rem; }
.info h3 { font: 700 1rem/1.3 var(--text); margin-top: 6px; }
.info .big strong { font: 700 1.75rem/1 var(--titel); font-variant-numeric: tabular-nums; }
.info .lead { font-size: 1rem; }
.tops { width: 100%; border-radius: 8px; overflow: hidden; }
.tops li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 12px; background: var(--zeile); font-variant-numeric: tabular-nums; }
.tops li:nth-child(even) { background: var(--zeile2); }
.newpage { margin-top: 32px; background: var(--aufgabe); border-radius: 12px; padding: 22px 24px; }
.newpage h2 { margin-bottom: 12px; }
.newpage.oben { margin: 0 0 28px; }
.zieh-hilfe { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0 12px; max-width: 70ch; }
.zieh-hilfe .ic { flex: none; margin-top: 2px; color: var(--grau); }
.ordnen { display: inline-flex; align-items: center; gap: 4px; flex: none; width: 140px; }
.ordnen.fest { color: var(--grau); padding-left: 10px; }
.grip { display: grid; place-items: center; width: 44px; height: 44px; background: none; border: 0; border-radius: 8px; color: var(--feld); cursor: grab; touch-action: none; }
.grip:hover { background: var(--zeile2); color: var(--tinte); }
.tool.nur { width: 44px; padding: 0; justify-content: center; }
.zieht { user-select: none; cursor: grabbing; }
.zieht .grip { cursor: grabbing; }
.rows li.gezogen { opacity: .45; }
.rows li.ziel-vor { box-shadow: inset 0 5px 0 var(--aktion); }
.rows li.ziel-nach { box-shadow: inset 0 -5px 0 var(--aktion); }
.seitenliste li.sub .row-main { padding-left: 30px; }
.tip { position: relative; cursor: help; }
.tip-box { display: none; position: absolute; left: 0; top: calc(100% + 8px); z-index: 30; width: min(380px, 78vw); padding: 12px 14px; background: var(--tinte); color: #fff; border-radius: 10px; font: 400 .9375rem/1.4 var(--text); box-shadow: 0 6px 18px rgba(27, 31, 35, .25); }
.tip-box span { display: block; }
.tip-box span + span { margin-top: 8px; }
.tip:hover .tip-box, .tip:focus .tip-box, .tip:focus-within .tip-box { display: block; }
.home-side .tip-box { left: auto; right: 0; }
.konto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; margin-top: 8px; }
.konto .info { gap: 12px; }
.konto .field, .konto .note { width: 100%; }
.frist { display: grid; gap: 2px; }
.frist strong { font: 700 2.25rem/1.05 var(--titel); font-variant-numeric: tabular-nums; }
.kv { display: grid; gap: 10px; width: 100%; }
.kv div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 4px 14px; }
.kv dt { font-weight: 700; }
.kv dd { margin: 0; }
/* Eigene Internetadresse: die zwei Einträge der Anleitung. Am Handy steht jeder Eintrag als eigener Block untereinander. */
.dns { width: 100%; border-collapse: collapse; text-align: left; font-variant-numeric: tabular-nums; }
.dns caption { text-align: left; font-weight: 700; padding-bottom: 6px; }
.dns th, .dns td { padding: 10px 12px; vertical-align: top; overflow-wrap: anywhere; }
.dns thead th { font-size: .9375rem; color: var(--grau); border-bottom: 2px solid var(--linie); }
.dns tbody tr:nth-child(odd) { background: var(--zeile); }
.dns tbody th { font-weight: 700; }
.dns-st { display: inline-flex; align-items: flex-start; gap: 5px; font-weight: 700; }
.dns-st.ok { color: var(--gut); }
.dns-st .ic { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.dns-mx { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 12px 14px; border-radius: 8px; box-shadow: inset 0 0 0 2px var(--feld); }
.dns-mx .ic { flex: none; margin-top: 1px; }
.konto .anl { width: 100%; }
.dns td[data-l="Art"], .dns td[data-l="Wert"], .dns thead th { white-space: nowrap; overflow-wrap: normal; }
.dns td[data-l="Stand"] { overflow-wrap: break-word; }
/* Ist der Platz schmal (Karte in „Mein Konto“, Handy), steht jeder Eintrag als eigener Block: Name, darunter Art, Wert und Stand mit ihrer Beschriftung. */
.dns-box { width: 100%; container-type: inline-size; }
@supports not (container-type: inline-size) { .dns-box { overflow-x: auto; } }
@container (max-width: 600px) {
  .dns, .dns tbody, .dns tr, .dns th, .dns td, .dns caption { display: block; }
  .dns thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .dns tbody tr { padding: 10px 14px; border-radius: 8px; background: var(--zeile); }
  .dns tbody tr + tr { margin-top: 8px; }
  .dns th, .dns td { padding: 2px 0; }
  .dns td::before { content: attr(data-l) ": "; color: var(--grau); }
}
.wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.wahl button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 10px; background: var(--zeile); border: 2px solid transparent; border-radius: 8px; font: inherit; cursor: pointer; }
.wahl button:hover { background: var(--zeile2); }
.wahl button[aria-pressed=true] { border-color: var(--tinte); font-weight: 700; background: var(--papier); }
.wahl i { width: 20px; height: 20px; border-radius: 50%; }

/* ---------- Bearbeiten: Formular links, Vorschau rechts ---------- */
.ed { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 44%); gap: 28px; align-items: start; }
.col { display: grid; gap: 30px; min-width: 0; }
.ed-form { min-width: 0; }
.ed-form.pad { background: var(--papier); border-radius: 12px; padding: 22px 24px 26px; }
.ed-form.pad > h2 { margin-bottom: 16px; }
.ed-form.pad:focus-visible { outline-offset: 4px; }
.ed-head { display: grid; gap: 8px; justify-items: start; margin-bottom: 18px; }
.saved { display: inline-flex; align-items: center; gap: 6px; font-size: .9375rem; font-weight: 700; color: var(--gut); }
.saved[data-s=busy] { color: var(--grau); }
.saved .ic { width: 18px; height: 18px; }
#hints { margin-bottom: 16px; }
.secs { display: grid; gap: 14px; margin-bottom: 14px; }
.sec, .add { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 18px 20px 22px 18px; background: var(--papier); border-radius: 12px; }
.sec:focus-within { box-shadow: 0 0 0 3px var(--einband); }
/* Wie viel Platz oben frei bleibt, wenn der Browser etwas ins Bild holt, regelt scroll-padding-top am Ende dieser Datei: für jedes Feld, nicht nur für einzelne. */
.sec.moved { animation: verschoben .9s var(--leicht); }
@keyframes verschoben { from { background: var(--marker); } }
.sec-num { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--einband); color: #fff; font: 700 1.3125rem/1 var(--titel); }
.sec-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 40px; margin-bottom: 14px; }
.sec-title { font-size: 1.3125rem; }
.sec-flag { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .9375rem; border-radius: 6px; }
.sec-flag:empty { padding: 0; }
.sec-flag[data-k=must] { background: var(--schlecht-hell); color: var(--schlecht); padding: 3px 10px 3px 8px; }
.sec-flag[data-k=hint] { background: var(--marker); padding: 3px 10px; }
.sec-flag .ic { width: 18px; height: 18px; }
.sec-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.sec-undo { list-style: none; }
.sec-undo .undo { margin: 0; }
.add { background: var(--aufgabe); }
.add .sec-num { background: var(--tinte); }
.add .sec-title { min-height: 40px; display: flex; align-items: center; }
.add-g { font-size: 1rem; color: var(--grau); margin: 16px 0 8px; }
.add-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 8px; }
.add-btn { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--papier); border: 2px solid transparent; border-radius: 8px; text-align: left; cursor: pointer; }
.add-btn:hover { border-color: var(--einband); }
.add-btn .ic { color: var(--einband); }
.add-btn span { display: grid; }
.add-btn strong { font: 600 1.0625rem/1.25 var(--titel); }
.add-btn small { font-size: .875rem; color: var(--grau); }

.ed > .ed-pv { align-self: stretch; }
.pv-stick { position: sticky; top: calc(var(--top-h) + 20px); }
.pv-label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.pv-label h2 { margin-right: auto; }
.dev { display: flex; gap: 6px; }
.dev-b { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; background: var(--papier); border: 2px solid var(--feld); border-radius: 8px; font: 700 1rem/1.2 var(--text); cursor: pointer; }
.dev-b .ic { width: 20px; height: 20px; }
.dev-b:hover { border-color: var(--tinte); }
.dev-b[aria-pressed=true] { background: var(--tinte); border-color: var(--tinte); color: #fff; }
.pv-frame { border-radius: 10px; overflow: hidden; background: var(--papier); box-shadow: 0 0 0 2px var(--tinte), 0 12px 28px rgba(20, 40, 50, .16); }
.pv-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--tinte); color: #fff; font-size: .875rem; }
.pv-bar i { width: 9px; height: 9px; border-radius: 50%; background: #fff; opacity: .55; }
.pv-bar b { flex: 1; min-width: 0; margin-left: 8px; background: #fff; color: var(--tinte); border-radius: 4px; padding: 2px 10px; font-weight: 400; overflow-wrap: anywhere; }
.pv-scroll { max-height: calc(100vh - var(--top-h) - 150px); overflow: auto; scrollbar-gutter: stable; background: #D5DCE0; }
.pv-scroll:focus-visible { outline-offset: -3px; box-shadow: inset 0 0 0 6px var(--tinte); }
.pv-fit { margin: 0 auto; overflow: hidden; background: #fff; }
.pv-stage { display: block; border: 0; background: #fff; transform-origin: 0 0; }
.pv-park { position: absolute; left: -9999px; top: 0; }
.pv-hinweis { margin-top: 10px; }
.pv-auf, .pv-zu { display: none; }
.pv-breit { min-height: 44px; padding: 0 14px; font-size: 1rem; }
.pv-breit[aria-pressed=true] { background: var(--tinte); color: #fff; }
.schau .pv-label { align-items: flex-end; }
.schau-wahl { margin: 0 auto 0 0; flex: 0 1 320px; }
.schau .pv-scroll { max-height: max(480px, calc(100vh - var(--top-h) - 70px)); }
@media (min-width: 1181px) {
  .breit .rail { display: none; }
  .breit .app { display: block; }
  .breit main { max-width: none; }
  .breit .ed { grid-template-columns: minmax(340px, 430px) minmax(0, 1fr); gap: 22px; }
  .breit .ed-form { position: sticky; top: calc(var(--top-h) + 12px); max-height: calc(100vh - var(--top-h) - 24px); overflow: auto; padding: 0 8px 40px 2px; scroll-padding-top: 12px; }
  .breit .ed-head h1 { font-size: 1.625rem; }
  .breit .pv-scroll { max-height: calc(100vh - var(--top-h) - 130px); }
  .breit .pair { grid-template-columns: 1fr; }
  .breit .sec, .breit .add { padding: 14px; gap: 10px; }
  .breit .add-grid { grid-template-columns: 1fr; }
}
.s-blk.is-active { outline-color: var(--p); }

/* ---------- Aussehen ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.tab { min-height: 48px; padding: 0 18px; background: var(--papier); border: 2px solid var(--feld); border-radius: 9px; font: 600 1.0625rem/1 var(--titel); cursor: pointer; }
.tab:hover { border-color: var(--tinte); }
.tab[aria-current] { background: var(--tinte); border-color: var(--tinte); color: #fff; font-weight: 700; }
.tpl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.tpl-card { display: grid; gap: 8px; align-content: start; }
.mini { overflow: hidden; border-radius: 8px; cursor: pointer; box-shadow: 0 0 0 2px var(--linie); background: #fff; }
.mini-in { display: block; width: 1360px; height: 884px; border: 0; background: #fff; transform-origin: 0 0; pointer-events: none; }
.choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.choices.wide { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.choice { display: grid; gap: 4px; justify-items: start; width: 100%; padding: 12px 14px; background: var(--papier); border: 2px solid var(--feld); border-radius: 9px; text-align: left; cursor: pointer; }
.choice:hover { border-color: var(--tinte); }
.choice strong { font: 700 1.125rem/1.25 var(--titel); }
.choice small { font-size: .9375rem; color: var(--grau); }
.choice[aria-pressed=true] { background: var(--tinte); border-color: var(--tinte); color: #fff; }
.choice[aria-pressed=true] small { color: #fff; }
.choice[aria-pressed=true] strong::after { content: " · gewählt"; font-weight: 600; }
.swatch { display: flex; gap: 4px; margin-bottom: 4px; }
.swatch i { width: 30px; height: 30px; border-radius: 5px; box-shadow: 0 0 0 2px #fff; }
.fontdemo { display: grid; gap: 2px; margin-bottom: 6px; }
.fontdemo b { font-size: 1.375rem; line-height: 1.2; }
.menu-list { display: grid; gap: 8px; }
.menu-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; background: var(--zeile); border-radius: 8px; padding: 8px 12px; }
.menu-list strong { flex: 1 1 140px; font: 600 1.125rem/1.3 var(--titel); }
.menu-n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--einband); color: #fff; font: 700 1rem/1 var(--titel); }
.menu-list .tool { background: var(--zeile2); }

/* ---------- Barrierefreiheit, Hilfe ---------- */
.ticks { display: grid; gap: 10px; }
.ticks li { display: flex; align-items: flex-start; gap: 10px; }
.ticks .ic { color: var(--gut); margin-top: 1px; }
.plus { background: var(--merke); border-radius: 12px; padding: 22px 24px 24px; display: grid; gap: 12px; justify-items: start; }
.plus .ticks .ic { color: var(--tinte); }
.plus-preis strong { font: 700 1.3125rem/1.2 var(--titel); }
.plus .note { background: var(--papier); }
.guides { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 28px; align-items: start; }
.g-list { display: grid; gap: 6px; }
.g-btn { width: 100%; min-height: 48px; padding: 10px 14px; background: var(--papier); border: 0; border-radius: 8px; text-align: left; font-weight: 700; cursor: pointer; }
.g-btn:hover { background: var(--aufgabe); }
.g-btn[aria-current] { background: var(--tinte); color: #fff; }
.guide { background: var(--papier); border-radius: 12px; padding: 24px 28px 28px; }
.steps { counter-reset: schritt; display: grid; gap: 14px; margin-top: 18px; max-width: 62ch; }
.steps li { counter-increment: schritt; display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; font-size: 1.125rem; }
.steps li::before { content: counter(schritt); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--einband); color: #fff; font: 700 1.25rem/1 var(--titel); }
.film { margin: 18px 0 8px; display: grid; gap: 12px; max-width: 900px; }
.film-bild { border-radius: 10px; overflow: hidden; background: var(--zeile2); box-shadow: 0 0 0 2px var(--linie); }
.film-bild img { display: block; width: 100%; height: auto; }
.film figcaption { display: grid; gap: 2px; min-height: 5.2em; align-content: start; }
.film-nr { font-weight: 700; font-size: .9375rem; color: var(--grau); }
.film-t { font-size: 1.1875rem; line-height: 1.4; max-width: 62ch; }
.film-k { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.film-dauer { font-size: .9375rem; color: var(--grau); }
.btn.dunkel { background: var(--tinte); border-color: var(--tinte); color: #fff; }
.btn.dunkel:hover { background: #343B42; }
.steps li.jetzt { font-weight: 700; }
.guide h3.grp { margin-top: 26px; }
.guide-b { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.contact { margin-top: 32px; background: var(--aufgabe); border-radius: 12px; padding: 20px 24px; display: grid; gap: 6px; }

/* ---------- Breiten, Bewegung, Druck ---------- */
@media (min-width: 861px) and (max-height: 760px) {
  /* Niedrige Bildschirme: die Seitenleiste rückt zusammen, damit „Hilfe“ ohne Rollen erreichbar bleibt. */
  .rail-in { gap: 12px; padding-top: 14px; padding-bottom: 12px; }
  .nav { gap: 2px; }
  .nav a { min-height: 44px; }
}
@media (max-width: 1180px) {
  .pv-breit { display: none; }
  .ed { grid-template-columns: minmax(0, 1fr); }
  .pv-stick { position: static; }
  .pv-scroll { max-height: calc(100vh - 170px); }
  /* Kein Platz für zwei Spalten: Die Vorschau öffnet sich über einen Knopf, der beim Rollen stehen bleibt. */
  .ed > .ed-pv { display: none; }
  .pv-auf { display: inline-flex; position: sticky; bottom: 14px; z-index: 6; justify-self: end; background: var(--tinte); border-color: var(--tinte); color: #fff; box-shadow: 0 8px 22px rgba(10, 20, 30, .3); }
  .pv-auf:hover { background: #000; }
  .pv-zu { display: inline-flex; }
  .pv-offen { overflow: hidden; }
  .pv-offen .ed > .ed-pv { display: block; position: fixed; inset: 0; z-index: 35; overflow: auto; padding: 16px clamp(16px, 3vw, 40px) 24px; background: var(--grund); }
  .toast { bottom: 84px; }
  .home { grid-template-columns: minmax(0, 1fr); }
  .guides { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .app { display: block; }
  .rail-in { position: static; min-height: 0; max-height: none; overflow: visible; padding: 10px 16px; gap: 10px 12px; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .nav-knopf { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; background: none; border: 2px solid #fff; border-radius: 9px; color: #fff; font: 700 1.0625rem/1 var(--titel); cursor: pointer; }
  .nav-knopf[aria-expanded=true] { background: #fff; color: var(--tinte); }
  .who, .nav { display: none; flex-basis: 100%; }
  .rail.offen .who { display: block; }
  .rail.offen .nav { display: grid; padding-bottom: 8px; }
  .pv-auf { justify-self: stretch; }
  .wordmark, .who { padding: 0; }
  .who a { display: block; padding: 8px 0; border-radius: 8px; }
  .who a > span:first-child::after { content: " "; }
  .who-mehr { display: block; }
  .who button { margin-left: 0; }
  .konto { grid-template-columns: minmax(0, 1fr); }
  .kv div { grid-template-columns: 1fr; }
  .ordnen { width: auto; }
  .ordnen.leer { display: none; }
  .seitenliste .row-main { flex-basis: calc(100% - 170px); }
  .who strong::after { content: ", "; }
  .nav { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
  .nav a { border-radius: 10px; min-height: 48px; padding: 0 12px; font-size: 1.0625rem; }
  .nav a[aria-current] { background: var(--papier); }
  .top-row { padding: 10px 16px; }
  .school { display: none; }
  .pub { flex: 1; justify-content: space-between; flex-wrap: nowrap; gap: 10px; }
  .status { font-size: 1rem; line-height: 1.25; }
  .pub .btn { min-height: 44px; padding: 0 14px; }
  .st-more { display: none; }
  h1 { font-size: 1.875rem; }
  .pair { grid-template-columns: 1fr; }
  .sec, .add { grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 10px; }
  .sec-num { width: 34px; height: 34px; font-size: 1.125rem; }
  .gal-item { flex-direction: column; }
  .inline-form .btn { margin-top: 0; }
  .role-pick { flex: 1 1 100%; }
  .role-pick select { flex: 1; min-width: 0; }
  .rows .row-btns { min-width: 0; }
  .rows .row-btns:empty { display: none; }
  .rechte, .rechte tbody, .rechte tr, .rechte th, .rechte td { display: block; }
  .rechte thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .rechte tbody tr { padding: 16px; }
  .rechte th, .rechte td { padding: 0; text-align: left; }
  .rechte tbody th { margin-bottom: 8px; }
  .rt { justify-content: flex-start; }
  .rt-n { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media print {
  body { background: #fff; }
  .rail, .top, .proto, .pg-head, .guides nav, .guide-b, .film, .guide h3.grp, .contact, .nachweis, .toast { display: none !important; }
  .app, .guides { display: block; }
  main { padding: 0; }
}

/* „Website ansehen“ steht oben im Menü und hebt sich als heller Knopf von den Arbeitsbereichen ab. */
.nav a.nav-schau { margin: 0 16px 12px 0; border-radius: 10px; background: var(--papier); color: var(--tinte); font-weight: 700; }
.nav a.nav-schau:hover { background: var(--aufgabe); }
.nav a.nav-schau[aria-current] { background: var(--papier); box-shadow: inset 0 0 0 3px var(--tinte); }
.nav a.nav-schau:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Seiten: Unterseiten mit Pfeilen ordnen; Einstellung, wer eine Seite sieht */
.grip-platz { flex: none; width: 44px; }
.sicht-box { display: grid; gap: 12px; margin-bottom: 14px; padding: 18px 20px 20px; background: var(--papier); border-radius: 12px; }
.sicht-box h2 { font: 700 1.1875rem/1.25 var(--titel); }
.sicht-box .field { max-width: 560px; }
.mehr .gal-list { margin-top: 8px; }
h3.grp-f { margin: 28px 0 4px; }
.note .lnk { min-height: 0; }
@media (max-width: 860px) {
  .grip-platz { display: none; }
  .nav a.nav-schau { margin: 0 0 8px; }
}

/* Mein Konto: bisherige Anfragen an den Support mit Antwort */
.anfr { display: grid; gap: 10px; }
.anfr li { display: grid; gap: 6px; padding: 12px 14px; background: var(--zeile); border-radius: 8px; }
.anfr-k { font-size: .9375rem; color: var(--grau); }
.anfr-k strong { color: var(--tinte); }
.anfr-aw { padding: 10px 12px; background: var(--aufgabe); border-radius: 6px; }

/* Hilfe: Kurzfilm als Video mit Untertiteln */
.film-v { display: block; width: 100%; height: auto; border-radius: 10px; background: var(--tinte); box-shadow: 0 0 0 2px var(--linie); }
.film figcaption.film-dauer { min-height: 0; max-width: 70ch; }
/* Was der Film gerade zeigt, steht als gewöhnlicher Text darunter. Alle Schritte liegen unsichtbar im selben Feld übereinander: So ist der Platz immer so hoch wie der längste Schritt, und die Seite springt nicht. */
.film-buehne { display: grid; gap: 12px; }
.film-text { display: grid; padding: 12px 16px; background: var(--aufgabe); border-radius: 10px; }
.film-text > p { grid-area: 1 / 1; font-size: 1.1875rem; line-height: 1.4; font-weight: 600; overflow-wrap: anywhere; }
.film-mass { visibility: hidden; }
.film-v::-webkit-media-controls-toggle-closed-captions-button { display: none; }
.film-buehne:fullscreen, .film-buehne.gross { grid-template-rows: minmax(0, 1fr) auto auto; gap: 10px; padding: 14px clamp(12px, 3vw, 32px); background: #101418; }
.film-buehne.gross { position: fixed; inset: 0; z-index: 60; }
.film-gross { overflow: hidden; }
.film-buehne:fullscreen .film-v, .film-buehne.gross .film-v { width: 100%; height: 100%; min-height: 0; object-fit: contain; border-radius: 0; box-shadow: none; background: #000; }
.film-buehne:fullscreen .film-text, .film-buehne.gross .film-text { background: none; padding: 0; color: #fff; }
.film-buehne:fullscreen .film-text > p, .film-buehne.gross .film-text > p { font-size: clamp(1.1875rem, 2.2vw, 1.75rem); }
.film-buehne:fullscreen .film-k, .film-buehne.gross .film-k { justify-content: flex-end; }
.film-buehne:fullscreen :focus-visible, .film-buehne.gross :focus-visible { outline-color: #fff; }

/* Der Browser holt ein Feld mit Fokus ins Bild. Oben stehen die feste Kopfzeile und, beim Bearbeiten einer Seite, die Leiste „Bausteine dieser Seite“: Darunter bleibt Platz, damit nichts verdeckt ist. */
html { scroll-padding-top: calc(var(--top-h) + var(--schnell-h, 0px) + 16px); }
@media (max-width: 1180px) { html { scroll-padding-bottom: 84px; } }

/* Links im Fuß: Klickfläche mindestens 44 Punkte hoch */
.nachweis a { display: inline-flex; align-items: center; min-height: 44px; }

/* Eigene Kacheln und Knöpfe als kurze Zeilen; die Felder erscheinen erst mit „Ändern“ */
.k-liste { gap: 8px; }
.k-liste .lnk-item { padding: 8px 8px 8px 14px; gap: 0; }
.k-liste .lnk-item.auf { padding: 8px 14px 14px; box-shadow: inset 0 0 0 2px var(--einband); background: var(--papier); }
.k-liste .k-kopf { flex-wrap: nowrap; min-height: 44px; }
.k-nr { flex: none; }
.k-kurz { flex: 1 1 0; min-width: 0; display: grid; line-height: 1.3; }
.k-kurz b, .k-kurz span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-kurz span { font-size: .9375rem; color: var(--grau); }
.k-fehlt { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; background: var(--marker); border-radius: 6px; font-size: .9375rem; font-weight: 700; }
.k-fehlt .ic { width: 18px; height: 18px; }
.k-liste .k-tools { flex: none; flex-wrap: nowrap; }
.k-felder { display: grid; gap: 12px; justify-items: start; width: 100%; margin-top: 10px; }
.k-ordnen { display: flex; flex-wrap: wrap; gap: 6px; }
.k-liste .auf .tool { background: var(--zeile); }
.k-undo .undo { margin: 0; }
.neben-warum { margin-top: 0; }
@media (max-width: 700px) {
  .k-liste .k-kopf { flex-wrap: wrap; }
  .k-kurz { flex-basis: calc(100% - 90px); }
  .k-liste .k-tools { margin-left: 0; }
}

/* Eilmeldung, Hinweise auf Veraltetes, Schuljahreswechsel */
.state.eilkarte { background: var(--papier); box-shadow: inset 6px 0 0 var(--rotstift); }
.state.eilkarte .st-mark { background: var(--rotstift); color: #fff; }
.lbl { display: block; margin-bottom: 6px; font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; padding: 0 16px; background: var(--papier); border: 2px solid var(--feld); border-radius: 999px; font: inherit; font-weight: 700; cursor: pointer; }
.chip:hover { border-color: var(--tinte); background: var(--zeile); }
.eil-an { margin-bottom: 22px; }
.eil-an .btn-row { margin-top: 10px; }
.alt-liste .row-main { flex-basis: 320px; }
.jahr { display: grid; gap: 14px; max-width: 860px; }
.jahr li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 18px 20px 20px 18px; background: var(--papier); border-radius: 12px; }
.jahr li > div { display: grid; gap: 8px; }
.jahr h2 { font: 700 1.25rem/1.25 var(--titel); }
.jahr .btn-row { align-items: center; gap: 12px 22px; margin-top: 4px; }
.jahr li.ist-ok { background: var(--gut-hell); }
.jahr li.ist-ok .sec-num { background: var(--gut); }
@media (max-width: 860px) { .jahr li { grid-template-columns: minmax(0, 1fr); padding: 16px; } }

/* Baustein steht neben dem darüber */
.sec-neben { display: inline-flex; align-items: center; padding: 3px 10px; background: var(--marker); border-radius: 6px; font-weight: 700; font-size: .9375rem; }

/* Bausteine zuklappen und Schnellnavigation */
.sec.zu { padding-bottom: 18px; }
.sec.zu .sec-head { margin-bottom: 0; }
.sec-kurz { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--grau); }
.tool.klapp .ic { transition: transform .15s var(--leicht); }
.tool.klapp[aria-expanded=true] .ic { transform: rotate(180deg); }
.schnell { position: sticky; top: calc(var(--top-h) + 8px); z-index: 5; margin-bottom: 14px; padding: 10px 12px; background: var(--papier); border-radius: 12px; box-shadow: 0 2px 10px rgba(20, 40, 50, .14); }
.schnell-row { display: flex; flex-wrap: wrap; gap: 8px; }
.schnell-liste { display: grid; gap: 4px; margin-top: 10px; max-height: min(52vh, 420px); overflow: auto; }
.schnell-liste button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 6px 10px; background: var(--zeile); border: 0; border-radius: 8px; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.schnell-liste button:hover { background: var(--zeile2); }
.schnell-liste i { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--einband); color: #fff; font: 700 1rem/1 var(--titel); font-style: normal; }
.schnell-liste span { display: grid; min-width: 0; }
.schnell-liste small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9375rem; color: var(--grau); }
@media (min-width: 1181px) {
  .breit .schnell { top: 0; }
  .breit .ed-form:has(.schnell) { scroll-padding-top: calc(var(--schnell-h, 76px) + 8px); }
}
@media (max-width: 700px) { .schnell { position: static; } }
@media (prefers-reduced-motion: reduce) { .tool.klapp .ic { transition: none; } }

/* Startseite: Knöpfe und Kacheln selbst festlegen. Unterseiten: Bild oben auf der Seite */
h3.teil { margin-top: 10px; padding-top: 20px; border-top: 2px solid var(--zeile2); }
.kachel .k-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; width: 100%; }
.kachel .k-kopf strong { font: 700 1.0625rem/1.25 var(--titel); }
.k-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.kachel .tool { background: var(--papier); }
.kachel .tool:hover { background: var(--zeile2); }
.kachel .tool:disabled { background: none; }
.zeichen-wahl { display: flex; align-items: center; gap: 12px; }
.zeichen-jetzt { flex: none; display: grid; place-items: center; width: 48px; height: 48px; background: var(--tinte); color: #fff; border-radius: 8px; }
.zeichen-jetzt .ic { width: 26px; height: 26px; }
.zeichen-wahl select { flex: 1; min-width: 0; }
.col > .band-box { margin: 0; }

/* Aufklappbare Anleitung „Wo finde ich …?“ bei Kalender-Link und Neuigkeiten */
.anl { max-width: 62ch; background: var(--aufgabe); border-radius: 8px; }
.anl > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 14px; border-radius: 8px; font-weight: 700; cursor: pointer; list-style: none; }
.anl > summary::-webkit-details-marker { display: none; }
.anl > summary span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.anl > summary:hover span { text-decoration-thickness: 3px; }
.anl > summary .ic { transition: transform .15s var(--leicht); }
.anl[open] > summary .ic { transform: rotate(180deg); }
.anl-in { display: grid; gap: 10px; padding: 2px 16px 18px; }
.anl-in h3 { margin-top: 10px; font: 700 1.0625rem/1.25 var(--titel); }
.anl-in ol { list-style: decimal; padding-left: 1.6em; display: grid; gap: 6px; }
.anl-in ol li::marker { font-weight: 700; }
.anl-in .help { margin-top: 0; }
.anl-adr { overflow-wrap: anywhere; font-weight: 700; }
.anl-merke { padding-top: 12px; border-top: 2px solid var(--papier); }
@media (prefers-reduced-motion: reduce) { .anl > summary .ic { transition: none; } }
@media print { .anl { display: none; } }

/* ---------- Website vorübergehend abschalten (Wartungsmodus) ---------- */
/* Hinweis oben auf jeder Ansicht, solange die Website abgeschaltet ist. */
.wartband { background: var(--tinte); color: #fff; }
.wartband-in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px clamp(18px, 3vw, 40px); }
.wartband-in > .ic { flex: none; width: 28px; height: 28px; color: var(--marker); }
.wartband-in p { flex: 1 1 320px; min-width: 0; }
.wartband-in strong { display: block; font: 700 1.1875rem/1.25 var(--titel); }
.wartband-in .btn { flex: none; border-color: #fff; color: var(--tinte); }
.wartband-in .btn:focus-visible { outline: 3px solid var(--marker); outline-offset: 3px; }
/* So lesen Besucher den Hinweis: in der Rückfrage vor dem Abschalten und solange abgeschaltet ist. */
.wart-bsp { width: 100%; max-width: 62ch; display: grid; gap: 6px; padding: 14px 18px 16px; background: var(--papier); border: 2px solid var(--linie); border-radius: 10px; overflow-wrap: anywhere; }
.wart-bsp-k { font-size: .9375rem; color: var(--grau); }
.wart-bsp-n { font-weight: 700; }
.wart-bsp-h { font: 700 1.1875rem/1.3 var(--titel); }
.note .wart-bsp { margin: 10px 0; }
#wartK a.btn { text-decoration: none; }
@media (max-width: 700px) { .wartband-in .btn { flex: 1 1 100%; } }
@media print { .wartband { display: none; } }
/* Am Handy bleibt der Hinweis kurz: die Zeile mit den Einzelheiten steht unter „Mein Konto“. */
@media (max-width: 700px) { .wartband-in { padding-top: 10px; padding-bottom: 12px; } .wartband-in > .ic { display: none; } .wartband-in p span { display: none; } .wartband-in strong { font-size: 1.0625rem; } }