/* Digitale Hefte – Grundstil. Kein Framework, kein Build-Schritt. */

:root {
    --paper: #fbfaf7;
    --surface: #ffffff;
    --ink: #1f2430;
    --muted: #6b7080;
    --line: #e4e1d8;
    --accent: #2b59c3;
    --accent-ink: #ffffff;
    --accent-soft: #e8eefb;
    --ok: #2f7d4f;
    --ok-soft: #e3f3e8;
    --warn: #a35a00;
    --warn-soft: #fbf0df;
    --danger: #b3261e;
    --danger-soft: #fbe5e3;
    --radius: 8px;
    --shadow: 0 1px 2px rgb(0 0 0 / .05), 0 1px 8px rgb(0 0 0 / .04);
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --paper: #16181d;
        --surface: #1e2128;
        --ink: #e7e9ee;
        --muted: #9aa0ad;
        --line: #2f333c;
        --accent: #7aa2ff;
        --accent-ink: #0d1120;
        --accent-soft: #232c45;
        --ok: #7fd19c;
        --ok-soft: #1d3326;
        --warn: #f0b468;
        --warn-soft: #3a2d1b;
        --danger: #ff8a80;
        --danger-soft: #3d2120;
        --shadow: none;
        color-scheme: dark;
    }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font: 16px/1.5 var(--font);
    color: var(--ink);
    background: var(--paper);
}
a { color: var(--accent); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 .75rem; }
code { font-family: var(--mono); font-size: .92em; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Kopfzeile */
.topbar {
    display: flex; align-items: center; gap: 1.5rem;
    padding: .6rem 1.25rem;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 10;
}
.brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 650; color: var(--ink); text-decoration: none; }
.brand-mark {
    width: 22px; height: 26px; border-radius: 3px 6px 6px 3px;
    background:
        linear-gradient(90deg, var(--accent) 0 4px, transparent 4px),
        repeating-linear-gradient(180deg, transparent 0 5px, var(--line) 5px 6px),
        var(--surface);
    border: 1.5px solid var(--accent);
}
.brand-center { display: flex; justify-content: center; font-size: 1.2rem; margin-bottom: 1.5rem; }
.mainnav { display: flex; gap: 1rem; flex: 1; }
.mainnav a { color: var(--ink); text-decoration: none; padding: .25rem 0; border-bottom: 2px solid transparent; }
.mainnav a:hover { border-color: var(--accent); }
.usermenu { position: relative; }
.usermenu summary { cursor: pointer; list-style: none; padding: .3rem .6rem; border-radius: var(--radius); }
.usermenu summary::-webkit-details-marker { display: none; }
.usermenu summary::after { content: " ▾"; color: var(--muted); }
.usermenu summary:hover { background: var(--accent-soft); }
.usermenu-panel {
    position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px;
    display: flex; flex-direction: column; gap: .5rem; padding: .8rem 1rem;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}

/* Seitenaufbau */
.page { max-width: 1080px; margin: 0 auto; padding: 1.75rem 1.25rem 4rem; }
.narrow { max-width: 420px; margin: 8vh auto; padding: 0 1rem; }
.pagehead { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.eyebrow { color: var(--muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .2rem; }
.section { margin-top: 1.75rem; }
/* Kapitel: Vorgaben der Lehrkraft blau, eigene Kapitel grau, jeweils Rand links und Badge */
.section-given, .section-own { border-left: 4px solid var(--accent); padding-left: .9rem; }
.section-own { border-left-color: color-mix(in srgb, var(--muted) 55%, transparent); }
.badge-given, .badge-own { vertical-align: middle; margin-left: .4rem; }
.badge.badge-given { background: var(--accent-soft); color: var(--accent); }
.badge.badge-own { background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--muted); }
.section-move { display: inline-flex; gap: .25rem; }
/* Icons (Lucide, public/vendor/lucide-…/icons.svg), Größe passend zur Schrift */
.icon { width: 1.05em; height: 1.05em; flex: none; vertical-align: -0.15em; }
.badge .icon { width: .95em; height: .95em; margin-right: .3em; vertical-align: -0.12em; }

/* Neuer Eintrag: geteilter Knopf (Hauptteil = häufigster Typ, Pfeil = Menü mit den übrigen) */
.splitbutton { position: relative; display: inline-flex; }
.splitbutton > .button { border-top-right-radius: 0; border-bottom-right-radius: 0; display: inline-flex; align-items: center; }
.splitbutton-menu > summary { list-style: none; border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 1px solid color-mix(in srgb, var(--accent-ink) 35%, transparent); padding-left: .55rem; padding-right: .55rem; height: 100%; display: inline-flex; align-items: center; }
.splitbutton-menu > summary::-webkit-details-marker { display: none; }
.menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 10; min-width: 230px; margin: 0; padding: .35rem 0; list-style: none;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.menu a { display: flex; align-items: center; gap: .55rem; padding: .5rem .9rem; color: var(--ink); text-decoration: none; }
.menu a:hover, .menu a:focus { background: var(--accent-soft); }
.menu a .icon { margin: 0; color: var(--accent); }

/* Überschrift des Hefts mit der Sortierung dezent dahinter (bricht auf schmalen Bildschirmen um) */
.titleline { display: flex; align-items: baseline; gap: .4rem 1rem; flex-wrap: wrap; }
.sortline { display: inline-flex; align-items: center; gap: .35rem; margin: 0; color: var(--muted); font-size: .85rem; }
.sortline select { width: auto; height: auto; margin-top: 0; padding: .15rem 1.6rem .15rem .4rem; font-size: .85rem; color: var(--muted); background-color: transparent; border-color: transparent; }
.sortline select:hover, .sortline select:focus { border-color: var(--line); color: var(--ink); }
/* Aufklappknopf mit kleinem Formular (z. B. „+ Kapitel“) */
.dropdown { position: relative; display: inline-block; }
.dropdown > summary { list-style: none; }
.dropdown > summary::-webkit-details-marker { display: none; }
.menu-form { display: flex; flex-direction: column; gap: .6rem; padding: .8rem .9rem; min-width: 260px; }
.sectionhead { display: flex; align-items: center; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.sectionhead h2 { margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.25rem; align-items: start; }
.stack { display: flex; flex-direction: column; gap: .85rem; }
/* Knöpfe in Formularen nicht über die ganze Breite ziehen */
.stack > :is(button, .button) { align-self: flex-start; }
.row { display: flex; gap: .75rem; flex-wrap: wrap; }
.row > label { flex: 1 1 160px; }

.card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.25rem; box-shadow: var(--shadow);
}
.card-narrow { max-width: 460px; }
.card h1, .card h3 { margin-bottom: 0; }
details.card > summary { cursor: pointer; }
details.card[open] > summary { margin-bottom: 1rem; }
.empty {
    padding: 2rem; text-align: center; color: var(--muted);
    border: 1.5px dashed var(--line); border-radius: var(--radius);
}

/* Kurskarten */
.cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.coursecard {
    display: flex; flex-direction: column; gap: .2rem; height: 100%;
    padding: 1rem 1.1rem 1rem 1.4rem; text-decoration: none; color: var(--ink);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); position: relative; overflow: hidden;
    transition: transform .1s ease, border-color .1s ease;
}
.coursecard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--accent); }
.coursecard:hover { transform: translateY(-1px); border-color: var(--accent); }
.coursecard-subject { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.coursecard-name { font-size: 1.15rem; font-weight: 650; }
.coursecard-meta { font-size: .875rem; color: var(--muted); margin-top: auto; padding-top: .5rem; }

/* Formulare */
/* Beschriftung als Block: Text und Hinweis (<span class="muted small">) bleiben in einer Zeile,
   das Feld steht darunter. So liegen die Felder einer Zeile auf einer Linie. */
label { display: block; font-weight: 550; font-size: .95rem; }
label > :is(input, select, textarea, .CodeMirror, .filepick) { margin-top: .3rem; }
label > :is(input, select) + .muted { display: block; margin-top: .3rem; font-weight: 400; }
label.check { display: flex; flex-direction: row; align-items: center; gap: .5rem; font-weight: 400; }
label.check > input { margin-top: 0; }
input, select, textarea, button, .button { font: inherit; }
/* Gemeinsame Höhe für einzeilige Felder, Auswahlfelder und Knöpfe (Browser zeichnen <select> sonst niedriger) */
:root { --control-height: 2.75rem; }
input[type=text], input[type=password], input[type=email], input[type=search], input[type=date], input[type=number], input:not([type]), select, textarea {
    display: block; width: 100%; padding: .55rem .7rem; color: var(--ink); background: var(--surface);
    border: 1px solid var(--line); border-radius: 6px; font-weight: 400; line-height: 1.5;
}
input[type=text], input[type=password], input[type=email], input[type=search], input[type=date], input[type=number], input:not([type]), select:not([multiple]) {
    height: var(--control-height); padding-top: 0; padding-bottom: 0;
}
textarea { resize: vertical; font-family: var(--mono); font-size: .9rem; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.inline-form { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; }
.inline-form > label { flex: 1 1 180px; }
.inline-form + :is(.table, .table-wrap), .inline-form + p { margin-top: 1.25rem; }
form.inline { display: inline; }
input.filter { max-width: 240px; }

button, .button {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    min-height: var(--control-height); padding: .4rem .95rem; border-radius: 6px; cursor: pointer; text-decoration: none;
    color: var(--ink); background: var(--surface); border: 1px solid var(--line); font-weight: 550; line-height: 1.5;
}
button:hover, .button:hover { border-color: var(--accent); }
button.primary, .button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
button.primary:hover, .button.primary:hover { filter: brightness(1.08); }
button.danger { color: var(--danger); }
button.danger:hover { border-color: var(--danger); background: var(--danger-soft); }
button.small, .button.small { min-height: 0; padding: .25rem .6rem; font-size: .85rem; }
button.linklike { min-height: 0; background: none; border: 0; padding: 0; color: var(--accent); font-weight: 400; text-align: left; }
button.linklike:hover { text-decoration: underline; }

/* Tabellen */
.table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.table th, .table td { padding: .6rem .8rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.table th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; background: var(--paper); }
.table th.right, .table td.right { text-align: right; }
.table tr:last-child td { border-bottom: 0; }
.table tr.inactive td { opacity: .55; }
.table tr[hidden] { display: none; }
.table form.inline + form.inline { margin-left: .35rem; }

.badge { display: inline-block; padding: .05rem .5rem; border-radius: 999px; font-size: .78rem; background: var(--accent-soft); color: var(--accent); font-weight: 550; }
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-danger { background: var(--danger); color: var(--surface); }
.entryrow.entryrow-pending { background: var(--danger-soft); box-shadow: inset 4px 0 0 var(--danger); }
.entryrow.entryrow-pending:hover { background: color-mix(in srgb, var(--danger-soft) 70%, var(--danger) 12%); }

.flash { padding: .75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; border: 1px solid transparent; }
.flash-success { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.flash-error { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 25%, transparent); }

.plainlist { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; flex-direction: column; gap: .35rem; }
.pager { display: flex; gap: .3rem; margin-top: 1rem; }
.pager a { padding: .2rem .6rem; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; }
.pager a.current { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
pre.debug { white-space: pre-wrap; font-size: .8rem; background: var(--paper); padding: 1rem; border-radius: 6px; overflow: auto; }

code.password { font-size: 1.05em; letter-spacing: .05em; padding: .1rem .35rem; background: var(--accent-soft); border-radius: 4px; }

/* Hefte */
.entrylist { list-style: none; padding: 0; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.entrylist li + li { border-top: 1px solid var(--line); }
.entryrow { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; padding: .65rem .9rem; color: var(--ink); text-decoration: none; }
.entryrow:hover { background: var(--accent-soft); }
.entryrow-title { font-weight: 550; }
/* Badges (Typ, Gruppe, Version) und zuletzt Datum mit Uhrzeit */
.entryrow-meta { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.entryrow-meta .badge { display: inline-flex; align-items: center; }
.entryrow-time { margin-left: .2rem; }
.section-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.section-rename { display: flex; align-items: center; gap: .5rem; flex: 1 1 260px; }
.section-rename input { flex: 1 1 10rem; min-width: 0; }
.section-add { margin-top: 1rem; }
.section-tools summary { cursor: pointer; text-align: right; }
.section-tools[open] { flex: 1 1 100%; }
.section-tools[open] summary { margin-bottom: .4rem; }
.actions form.inline { display: inline-flex; }
.flash-notice { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 25%, transparent); }
.flash-notice a { color: inherit; font-weight: 550; }
.network-lock { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.network-lock p { margin: 0; flex: 1 1 320px; }
.note-hints { display: flex; flex-direction: column; gap: .5rem; padding: .75rem 1rem; border-radius: var(--radius); background: var(--accent-soft); font-size: .9rem; }
.note-hints p, .note-hint { margin: 0; }
.entry-image { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.thumb { display: block; max-width: 6rem; max-height: 4rem; border: 1px solid var(--line); border-radius: 4px; background: #fff; }

/* Diagramme (draw.io im Embed-Modus) */
.drawio, .drawio-frame { width: 100%; height: 75vh; min-height: 28rem; }
/* PlantUML: Quelltext breiter als die Vorschau, Vorschau bleibt beim Scrollen sichtbar */
.plantuml-edit { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.25rem; align-items: start; }
.plantuml-preview { position: sticky; top: 4.5rem; }
.label-like { display: block; font-weight: 550; font-size: .95rem; }
.plantuml-preview-box { margin-top: .3rem; min-height: 22rem; max-height: calc(100vh - 7rem); overflow: auto; padding: .75rem;
    border: 1.5px dashed var(--line); border-radius: 6px; background: var(--surface); }
.plantuml-preview-box p { margin: 0; }
.plantuml-preview img:not([hidden]) { display: block; max-width: 100%; height: auto; margin-top: .5rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
@media (max-width: 1000px) { .plantuml-edit { grid-template-columns: 1fr; } .plantuml-preview { position: static; } .plantuml-preview-box { min-height: 8rem; max-height: none; } }
/* Seiten mit Editor (Quellcode, PlantUML, draw.io) dürfen breiter sein */
.page:has(.page-wide) { max-width: 1440px; }
details.source { margin-top: 1rem; }
details.source summary { cursor: pointer; margin-bottom: .5rem; }
.drawio-frame { display: block; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
/* Leiste über dem Editor; „Speichern“ darin nur im Vollbild (sonst steht es unter dem Formular) */
.drawio-bar { display: flex; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .5rem; }
.drawio-bar-actions { display: inline-flex; gap: .5rem; margin-left: auto; }
.drawio-bar-save { display: none; }
.drawio-full { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; padding: .5rem .75rem .75rem; background: var(--paper); }
.drawio-full .drawio-bar-save { display: inline-flex; }
.drawio-full .drawio, .drawio-full .drawio-frame { flex: 1; height: auto; min-height: 0; }
.drawio-full .drawio { display: flex; flex-direction: column; }
html.drawio-full-open, html.drawio-full-open body { overflow: hidden; }
input[type=file] { font-weight: 400; }
/* Dateiauswahl (public/assets/js/app.js): Kasten mit Knopf, Dateiname und Ablegen */
.filepick { display: flex; align-items: center; gap: .5rem .9rem; flex-wrap: wrap; position: relative; margin-top: .3rem;
    padding: .8rem 1rem; border: 1.5px dashed var(--line); border-radius: var(--radius); background: var(--surface); font-weight: 400; }
.filepick-over { border-color: var(--accent); background: var(--accent-soft); }
.filepick-name { color: var(--muted); overflow-wrap: anywhere; }
.filepick-chosen .filepick-name { color: var(--ink); font-weight: 550; }
.filepick-hint { margin-left: auto; }
/* Das echte Feld bleibt im Formular (Pflichtfeld-Prüfung, Absenden), ist aber unsichtbar */
.filepick-input { position: absolute; left: 1rem; bottom: 0; width: 1px; height: 1px; opacity: 0; }
@media (hover: none) { .filepick-hint { display: none; } }

/* Quelltext: Anzeige und Editor */
.codeblock { margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; }
.codeblock code { display: block; padding: .9rem 1rem; font-family: var(--mono); font-size: .9rem; line-height: 1.5; tab-size: 4; color: var(--ink); }
.CodeMirror { height: auto; min-height: 22rem; font-family: var(--mono); font-size: .9rem; font-weight: 400; line-height: 1.5; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.CodeMirror-scroll { min-height: 22rem; }
.CodeMirror-focused { outline: 2px solid var(--accent); outline-offset: 1px; }
.CodeMirror-gutters { background: var(--paper); border-right: 1px solid var(--line); }
.CodeMirror-linenumber { color: var(--muted); }
.CodeMirror-cursor { border-left-color: var(--ink); }
.CodeMirror-selected { background: var(--accent-soft); }
.CodeMirror-focused .CodeMirror-selected { background: var(--accent-soft); }

:root { --code-keyword: #8a2bb5; --code-string: #2f7d4f; --code-number: #a35a00; --code-comment: #6b7080; --code-title: #2b59c3; --code-type: #a1401f; }
@media (prefers-color-scheme: dark) {
    :root { --code-keyword: #d5a4f5; --code-string: #7fd19c; --code-number: #f0b468; --code-comment: #9aa0ad; --code-title: #7aa2ff; --code-type: #f2a08a; }
}
.hljs-keyword, .hljs-selector-tag, .hljs-doctag, .CodeMirror .cm-keyword { color: var(--code-keyword); }
.hljs-string, .hljs-regexp, .hljs-addition, .hljs-attr, .hljs-attribute, .CodeMirror .cm-string, .CodeMirror .cm-string-2, .CodeMirror .cm-attribute { color: var(--code-string); }
.hljs-number, .hljs-literal, .hljs-symbol, .hljs-bullet, .CodeMirror .cm-number, .CodeMirror .cm-atom { color: var(--code-number); }
.hljs-comment, .hljs-quote, .hljs-meta, .CodeMirror .cm-comment, .CodeMirror .cm-meta { color: var(--code-comment); font-style: normal; }
.hljs-title, .hljs-name, .hljs-section, .hljs-selector-class, .hljs-selector-id, .CodeMirror .cm-def, .CodeMirror .cm-tag, .CodeMirror .cm-qualifier { color: var(--code-title); }
.hljs-type, .hljs-built_in, .hljs-variable, .hljs-template-variable, .hljs-params, .CodeMirror .cm-type, .CodeMirror .cm-builtin, .CodeMirror .cm-variable-2, .CodeMirror .cm-variable-3, .CodeMirror .cm-property { color: var(--code-type); }
.CodeMirror .cm-variable, .CodeMirror .cm-operator, .CodeMirror .cm-punctuation, .CodeMirror .cm-bracket { color: var(--ink); }

/* Vergleich zweier Versionen */
.diff-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.diff { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: .85rem; line-height: 1.45; }
.diff td { padding: 0 .5rem; vertical-align: top; }
.diff-num { width: 1%; min-width: 3rem; text-align: right; color: var(--muted); white-space: nowrap; user-select: none; background: var(--paper); }
.diff-mark { width: 1%; text-align: center; user-select: none; }
.diff-text { white-space: pre; tab-size: 4; }
.diff-add td:not(.diff-num) { background: var(--ok-soft); }
.diff-del td:not(.diff-num) { background: var(--danger-soft); }
.diff-add .diff-mark { color: var(--ok); }
.diff-del .diff-mark { color: var(--danger); }
.diff-gap td { padding: .15rem .5rem; color: var(--muted); text-align: center; background: var(--paper); border-block: 1px solid var(--line); }

/* Druck: Zugangsdaten als Zettel zum Ausschneiden */
.printonly { display: none; }
@media print {
    .topbar, .noprint, .flash, .table.credentials { display: none !important; }
    .printonly { display: block; }
    body { background: #fff; color: #000; }
    .page { padding: 0; max-width: none; }
    .pagehead p { display: none; }
    .slips { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
    .slip { border: 1px dashed #999; padding: 12px 14px; font-size: 11pt; line-height: 1.6; break-inside: avoid; }
}

@media (max-width: 640px) {
    .topbar { flex-wrap: wrap; gap: .5rem 1rem; }
    .mainnav { order: 3; flex-basis: 100%; overflow-x: auto; }
    .usermenu { margin-left: auto; }
    .section-rename { flex-wrap: wrap; }
    .table { font-size: .9rem; display: block; overflow-x: auto; white-space: nowrap; }
    .table th, .table td { padding: .5rem; }
}

/* Hilfeseiten (templates/help/) */
.help { max-width: 60rem; }
.help h2 { margin-top: 2rem; }
.help h3 { margin-top: 1.25rem; }
.help ul, .help ol { padding-left: 1.3rem; margin: 0 0 .75rem; }
.help li { margin-bottom: .25rem; }
.help .toc { columns: 2 14rem; margin-bottom: 1rem; }
.help-example { margin: 0 0 1rem; }
.help-example figcaption { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .35rem; font-size: .9rem; font-weight: 550; color: var(--muted); }
.help-plantuml { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; margin-bottom: 1.25rem; }
.help-plantuml .help-example { margin: 0; }
.help-image { padding-top: 1.9rem; }
.help-image img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.help table.table { margin-bottom: 1rem; }
@media (max-width: 800px) { .help-plantuml { grid-template-columns: 1fr; } .help-image { padding-top: 0; } }

/* Handy: Tabellen als Karten (data-cards und data-label setzt app.js) */
@media (max-width: 640px) {
    .table[data-cards] { display: block; overflow: visible; white-space: normal; border: 0; background: none; font-size: .95rem; }
    .table[data-cards] thead { display: none; }
    .table[data-cards] tbody { display: flex; flex-direction: column; gap: .6rem; }
    .table[data-cards] tr { display: block; padding: .5rem .85rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
    .table[data-cards] td { display: flow-root; padding: .4rem 0; border-top: 1px solid var(--line); border-bottom: 0; text-align: right; }
    .table[data-cards] tr td:first-child, .table[data-cards] tr:not(:has(td:nth-child(2))) td { border-top: 0; }
    .table[data-cards] td::before { content: attr(data-label); float: left; margin-right: .75rem; padding-top: .1rem; text-align: left; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
    .table[data-cards] td:not([data-label]) { text-align: left; }
    .table[data-cards] td:not([data-label])::before { content: none; }
    .table[data-cards] td.table-actions { display: flex; flex-wrap: wrap; gap: .4rem; text-align: left; }
    .table[data-cards] td:first-child { font-weight: 600; }
    .table[data-cards] td.nowrap { white-space: normal; }
    .table[data-cards] td form.inline + form.inline { margin-left: 0; }
    .table[data-cards] td.table-empty { display: none; }
}