/* =====================================================================
Design-Tokens & Basis-Komponenten
---------------------------------------------------------------------
Zwei Namensräume, und die Trennung ist der Zweck dieser Datei (#142):
--brand-* Identität. Farben, Schriften, Logo. Eine Instanz setzt sie
über „Einrichtung & Design" (DB); was hier steht, ist nur
die neutrale Vorgabe für eine Instanz, die nichts gesetzt
hat. Hier steht deshalb **keine** fremde Marke.
--ui-* Struktur. Linien, Flächen, Radien, Abstände, Status-Farben.
Gehört dem Design-System, nicht der Betreiberin.
Wer Werte ändern will, ändert die Instanzkonfiguration — nicht diese
Datei. `shared/_theme.html` überschreibt die --brand-*-Werte zur Laufzeit.
Schriften Quattrocento + Inter werden lokal ausgeliefert (@font-face unten,
Dateien in ../fonts/) — KEIN Google-Fonts-CDN (DSGVO: keine IP-Übermittlung
an Google, #130). Lizenz: SIL OFL 1.1, siehe ../fonts/README.md.
===================================================================== */
/* --- Self-hosted fonts (#130) — SIL OFL 1.1, siehe ../fonts/README.md --- */
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
src:url("../fonts/inter-400.1945fa9b587a.woff2") format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap;
src:url("../fonts/inter-500.8c7e9e529b8b.woff2") format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
src:url("../fonts/inter-600.eaae2304b622.woff2") format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap;
src:url("../fonts/inter-700.fc44a221f4ad.woff2") format('woff2'); }
@font-face{ font-family:'Quattrocento'; font-style:normal; font-weight:400; font-display:swap;
src:url("../fonts/quattrocento-400.84b573435079.woff2") format('woff2'); }
@font-face{ font-family:'Quattrocento'; font-style:normal; font-weight:700; font-display:swap;
src:url("../fonts/quattrocento-700.22cd11c132e1.woff2") format('woff2'); }
:root{
/* --- Markenfarben: neutrale Vorgabe ---
Ein gedecktes Blaugrau und ein warmes Bernstein. Bewusst unauffällig: eine
Instanz ohne eigene Farben soll fertig aussehen, nicht nach jemand anderem. */
--brand-primary: #3f5d75; /* Primär – Flächen, Links, Knöpfe */
--brand-primary-dark: #324a5e; /* Hover / dunkle Flächen */
--brand-primary-soft: #eaeff3; /* Hintergrund / Badges */
--brand-accent: #c8922a; /* Sekundär – Hervorhebungen */
--brand-accent-soft: #f6efdf;
--brand-accent-ink: #7a5712; /* lesbarer Akzentton auf Hell — Vorgabe, s. unten */
/* --- Neutrale Palette --- */
--ui-ink: #333333; /* Überschriften / Links */
--ui-text: #444444; /* Fließtext */
--ui-muted: #777777; /* sekundärer Text */
--ui-grey: #6C6B70; /* gedecktes Grau */
--ui-line: #e7e7e7; /* Trennlinien */
--ui-line-strong: #dcdcdc;
--ui-bg: #ffffff;
--ui-bg-soft: #f6f6f4;
/* --- Status-Farben --- */
--ui-ok: #2e7d57; --ui-ok-soft: #e6f2ec;
--ui-warn: #a8761b; --ui-warn-soft: #f6efdd;
--ui-busy: #9a3b3b; --ui-busy-soft: #f3e4e4;
/* --- Typografie --- */
--brand-serif: 'Quattrocento', Georgia, 'Times New Roman', serif; /* Überschriften */
--brand-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* UI/Fließtext */
/* --- Form --- */
--ui-radius: 10px;
--ui-radius-sm: 8px;
--ui-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05);
/* --- Raster --- */
--ui-maxwidth: 1180px;
--ui-gap: 24px;
}
/* Der Akzentton auf Hell wird *abgeleitet*, nicht gesetzt (#142).
Neun Textfarben lesen `--brand-accent-ink` — Warnhinweise, Pillen, das Abzeichen auf der
Startseite —, aber `shared/_theme.html` schreibt ihn nicht: die Maske kennt fuenf Farben, und
ein sechstes Feld fuer „derselbe Akzent, nur dunkler" waere ein Wert, den jemand von Hand
passend halten muesste. Ohne Ableitung kam deshalb der Hintergrund aus der Datenbank und die
Schrift darauf aus dieser Datei — auf einer eingerichteten Instanz zwei verschiedene Toene.
Die Vorgabe oben bleibt stehen und gilt dort, wo `color-mix()` fehlt; der @supports-Block
ueberschreibt sie, wo es sie gibt. Im Browser gemessen gegen den vorher handgepflegten Ton der
bisherigen Akzentfarbe: drei Punkte Gruen und sieben Punkte Blau Unterschied, also derselbe Ton
— nur folgt er jetzt dem, was die Betreiberin einstellt, statt stehenzubleiben. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
:root{ --brand-accent-ink: color-mix(in srgb, var(--brand-accent) 55%, #000); }
}
/* =====================================================================
Basis
===================================================================== */
*{box-sizing:border-box}
body{
margin:0;
font-family:var(--brand-sans);
color:var(--ui-text);
background:var(--ui-bg);
line-height:1.6;
-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--brand-serif);color:var(--ui-ink);font-weight:700;line-height:1.25;margin:0 0 .4em}
h1{font-size:42px} h2{font-size:28px} h3{font-size:18px}
p{margin:0 0 1em}
a{color:var(--brand-primary);text-decoration:none}
a:hover{color:var(--brand-primary-dark)}
.ui-wrap{max-width:var(--ui-maxwidth);margin:0 auto;padding:0 var(--ui-gap)}
/* =====================================================================
Logo / Wortmarke
===================================================================== */
/* Beide Masse gedeckelt, nicht nur die Hoehe (#438). Mit freier Breite behaelt die Box das
Seitenverhaeltnis des Bildes, und ein 7:1-Banner wird hier 336px breit. Mit beiden Grenzen
legt `object-fit:contain` es stattdessen in den Rahmen. */
.ui-logo{height:auto;max-height:48px;width:auto;max-width:260px;object-fit:contain;display:block}
.ui-logo--sm{height:32px}
.ui-logo--lg{height:72px}
/* =====================================================================
Buttons
===================================================================== */
.ui-btn{
font-family:var(--brand-sans);font-size:15px;font-weight:600;cursor:pointer;
padding:12px 22px;border-radius:var(--ui-radius);border:1px solid transparent;transition:.15s;
}
.ui-btn--primary{background:var(--brand-primary);color:#fff}
.ui-btn--primary:hover{background:var(--brand-primary-dark)}
.ui-btn--ghost{background:#fff;color:var(--ui-ink);border-color:var(--ui-line-strong)}
.ui-btn--ghost:hover{border-color:var(--ui-muted)}
.ui-btn--accent{background:var(--brand-accent);color:var(--ui-ink)}
.ui-btn--accent:hover{filter:brightness(.95)}
/* =====================================================================
Badges / Pills
===================================================================== */
.ui-pill{
display:inline-block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
padding:5px 12px;border-radius:999px;
}
.ui-pill--primary{color:var(--brand-primary-dark);background:var(--brand-primary-soft)}
.ui-pill--accent{color:var(--brand-accent-ink);background:var(--brand-accent-soft)}
/* =====================================================================
Karten & Panels
===================================================================== */
.ui-card{background:#fff;border:1px solid var(--ui-line);border-radius:var(--ui-radius);box-shadow:var(--ui-shadow)}
.ui-card__head{padding:16px 20px;border-bottom:1px solid var(--ui-line)}
.ui-card__body{padding:20px}
/* =====================================================================
Status-Indikatoren (z. B. Schließfach-Status)
===================================================================== */
.ui-status{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:4px 11px;border-radius:999px}
.ui-status::before{content:'';width:7px;height:7px;border-radius:50%}
.ui-status--frei {background:var(--ui-ok-soft); color:var(--ui-ok)} .ui-status--frei::before {background:var(--ui-ok)}
.ui-status--belegt {background:var(--brand-primary-soft); color:var(--brand-primary-dark)} .ui-status--belegt::before {background:var(--brand-primary)}
.ui-status--offen {background:var(--ui-warn-soft); color:var(--ui-warn)} .ui-status--offen::before {background:var(--ui-warn)}
.ui-status--wartung{background:var(--ui-busy-soft); color:var(--ui-busy)} .ui-status--wartung::before{background:var(--ui-busy)}
/* =====================================================================
Header-Leiste
===================================================================== */
.ui-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--ui-line)}
.ui-header__bar{max-width:var(--ui-maxwidth);margin:0 auto;padding:14px var(--ui-gap);display:flex;align-items:center;gap:14px}
/* =====================================================================
Tabellen
===================================================================== */
.ui-table{width:100%;border-collapse:collapse;font-size:14px}
.ui-table th,.ui-table td{text-align:left;padding:13px 20px;border-bottom:1px solid var(--ui-line)}
.ui-table th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--ui-muted);font-weight:600;background:var(--ui-bg-soft)}
.ui-table tbody tr:hover{background:var(--ui-bg-soft)}
/* =====================================================================
Responsive
===================================================================== */
@media(max-width:860px){
h1{font-size:32px}
.ui-wrap{padding:0 16px}
}
/* --- Submit feedback: button loading state + top progress bar (#141) --- */
/* Das `hidden`-Attribut verliert gegen jede eigene `display`-Regel — eine Fußzeile mit
`display:flex` bleibt trotz `hidden` sichtbar. Die Basisregel stellt die Erwartung wieder
her, die der Attributname weckt (#269). */
[hidden]{display:none!important}
#ui-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--brand-accent);z-index:2000;pointer-events:none}
#ui-progress.run{width:90%;transition:width 8s cubic-bezier(.1,.7,.1,1)}
#ui-progress.done{width:100%;opacity:0;transition:width .2s ease,opacity .4s ease .2s}
[data-loading]{opacity:.6;pointer-events:none;cursor:progress}
.ui-spinner{display:inline-block;width:15px;height:15px;margin-right:8px;vertical-align:-2px;border:2.5px solid currentColor;border-top-color:transparent;border-radius:50%;opacity:.75;animation:ui-spin .7s linear infinite}
@keyframes ui-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.ui-spinner{animation:none}#ui-progress.run{transition:width .3s ease}}
/* Die Seite hinter einem Dialog scrollt nicht mit (#191). Sonst wandert der Inhalt dahinter,
sobald das Rad ueber einer Stelle steht, an der nichts scrollbar ist — der Kopf des Dialogs,
sein Fuss, der abgedunkelte Hintergrund. Das liest sich, als sei der Dialog kaputt.
Hier und nicht im Verwaltungs-Layout: `ui-forms.js` setzt die Klasse und laedt auch auf dem
oeffentlichen Anmeldeformular, der Bestandserfassung, dem Eltern-Portal und den Kontoseiten.
Stuende die Regel nur im Verwaltungsbereich, waere die Klasse dort gesetzt und wirkungslos. */
body.has-modal { overflow: hidden; }
/* Bildausrichtung in Rich-Text-Koerpern (#417).
Der Editor schreibt die Ausrichtung als Klasse auf das — fliessend (keine Klasse),
Block, seitlich. Hier und nicht im Verwaltungs-Layout: dieselben Koerper erscheinen auf der
oeffentlichen Startseite und den Rechtstexten, und wenn die Regel nur in der Maske stuende,
sahen Autor:innen eine Ausrichtung, die Besucher:innen nicht sehen.
CKEditor hat das vorher ueber ein inline-`style` auf geloest, weshalb `style` in der
Allow-List von `core/sanitize.py` stand. Mit Klassen kann es dort entfallen — eine Verengung,
also die richtige Richtung. */
.richtext img.img--block { display: block; margin: .6rem auto; }
.richtext img.img--side { float: right; margin: 0 0 .6rem .8rem; max-width: 45%; }
.richtext::after { content: ""; display: block; clear: both; }