/* customerdb/assets/style.css
*
* Farbschema und Schriftgroesse kommen als data-Attribut am -Element
* vom Server (siehe include/Appearance.php). Kein JavaScript, dadurch steht
* das Theme schon beim ersten Byte fest.
*
* Die Rohwerte der Paletten stehen einmal unter :root als --p-*. Die Themes
* darunter weisen sie nur noch zu - so gibt es pro Farbe genau eine Quelle,
* auch fuer das Dunkel-Schema, das zweimal gebraucht wird (fest gewaehlt und
* ueber die Systemeinstellung).
*/
:root {
/* ---- Markenfarben, gemessen am Original-Logo ---- */
--p-brand-blue: #143370;
--p-brand-blue-dark: #0d2350;
--p-brand-blue-lite: #4a6bb0;
--p-brand-red: #9d2c1f;
--p-brand-red-lite: #c95a4a;
/* ---- Palette hell ---- */
--p-l-bg: #f4f6f9; --p-l-surface: #ffffff; --p-l-border: #e2e6ec;
--p-l-text: #1b2430; --p-l-muted: #5c6b7f;
--p-l-accent: #1b5fa8; --p-l-accent-dark: #16497f; --p-l-accent-soft: #e8f1fb;
--p-l-danger: #b42318; --p-l-danger-soft: #fef3f2;
--p-l-success: #067647; --p-l-success-soft: #ecfdf3;
--p-l-warn: #7a4b03; --p-l-warn-soft: #fff7e0; --p-l-warn-line: #e0a422;
/* ---- Palette dunkel ---- */
--p-d-bg: #12161c; --p-d-surface: #1a2029; --p-d-border: #2b333f;
--p-d-text: #e6eaf0; --p-d-muted: #9aa5b4;
--p-d-accent: #6ba6de; --p-d-accent-dark: #8cbce8; --p-d-accent-soft: #1d2b3a;
--p-d-danger: #f27166; --p-d-danger-soft: #2c1c1c;
--p-d-success: #5bc98f; --p-d-success-soft: #16281f;
--p-d-warn: #f5c451; --p-d-warn-soft: #2e2612; --p-d-warn-line: #8a6a16;
/* ---- Zuweisung: Standard ist hell ---- */
--bg: var(--p-l-bg);
--surface: var(--p-l-surface);
--border: var(--p-l-border);
--text: var(--p-l-text);
--text-muted: var(--p-l-muted);
--accent: var(--p-l-accent);
--accent-dark: var(--p-l-accent-dark);
--accent-soft: var(--p-l-accent-soft);
--danger: var(--p-l-danger);
--danger-soft: var(--p-l-danger-soft);
--success: var(--p-l-success);
--success-soft: var(--p-l-success-soft);
--warn: var(--p-l-warn);
--warn-soft: var(--p-l-warn-soft);
--warn-line: var(--p-l-warn-line);
--header-bg: var(--surface);
--header-text: var(--text);
--header-muted: var(--text-muted);
--header-border: var(--border);
--nav-active: var(--accent);
--radius: 10px;
--radius-sm: 6px;
--border-w: 1px;
--shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10);
--focus: var(--accent);
--link-decoration: none;
--font-scale: 1;
font-size: calc(100% * var(--font-scale));
}
/* ---- Schriftgroessen ---- */
:root[data-size="klein"] { --font-scale: .9; }
:root[data-size="normal"] { --font-scale: 1; }
:root[data-size="gross"] { --font-scale: 1.15; }
:root[data-size="sehr-gross"] { --font-scale: 1.32; }
/* ---- Dunkel: fest gewaehlt ---- */
:root[data-theme="dunkel"] {
--bg: var(--p-d-bg); --surface: var(--p-d-surface);
--border: var(--p-d-border); --text: var(--p-d-text);
--text-muted: var(--p-d-muted); --accent: var(--p-d-accent);
--accent-dark: var(--p-d-accent-dark); --accent-soft: var(--p-d-accent-soft);
--danger: var(--p-d-danger); --danger-soft: var(--p-d-danger-soft);
--success: var(--p-d-success); --success-soft: var(--p-d-success-soft);
--warn: var(--p-d-warn); --warn-soft: var(--p-d-warn-soft);
--warn-line: var(--p-d-warn-line);
--shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
/* ---- Dunkel: der Systemeinstellung folgend ---- */
@media (prefers-color-scheme: dark) {
:root[data-theme="auto"] {
--bg: var(--p-d-bg); --surface: var(--p-d-surface);
--border: var(--p-d-border); --text: var(--p-d-text);
--text-muted: var(--p-d-muted); --accent: var(--p-d-accent);
--accent-dark: var(--p-d-accent-dark); --accent-soft: var(--p-d-accent-soft);
--danger: var(--p-d-danger); --danger-soft: var(--p-d-danger-soft);
--success: var(--p-d-success); --success-soft: var(--p-d-success-soft);
--warn: var(--p-d-warn); --warn-soft: var(--p-d-warn-soft);
--warn-line: var(--p-d-warn-line);
--shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
}
/* ---- Lokstoredigital: Wortmarken-Blau als Leitfarbe, Rot als Akzent ---- */
:root[data-theme="marke"] {
--bg: #f1f4f9;
--surface: #ffffff;
--border: #dbe2ed;
--text: #16202e;
--text-muted: #56637a;
--accent: var(--p-brand-blue);
--accent-dark: var(--p-brand-blue-dark);
--accent-soft: #e7ecf6;
--danger: var(--p-brand-red);
--danger-soft: #fbeae7;
--success: #0a6b45;
--success-soft: #e9f7f0;
--warn: #6f4502;
--warn-soft: #fff6dd;
--warn-line: #d59a1c;
--header-bg: var(--p-brand-blue);
--header-text: #ffffff;
--header-muted: rgba(255, 255, 255, .78);
--header-border: var(--p-brand-blue-dark);
--nav-active: var(--p-brand-red-lite);
}
/* ---- Hoher Kontrast ---- */
:root[data-theme="kontrast"] {
--bg: #ffffff;
--surface: #ffffff;
--border: #000000;
--text: #000000;
--text-muted: #000000;
--accent: #00339e;
--accent-dark: #001f66;
--accent-soft: #ffffff;
--danger: #a00000;
--danger-soft: #ffffff;
--success: #00522a;
--success-soft: #ffffff;
--warn: #000000;
--warn-soft: #ffff00;
--warn-line: #000000;
--header-bg: #ffffff;
--header-text: #000000;
--header-muted: #000000;
--header-border: #000000;
--nav-active: #00339e;
--border-w: 2px;
--shadow: none;
--radius: 4px;
--radius-sm: 3px;
--link-decoration: underline;
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font: 1rem/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-webkit-text-size-adjust: 100%;
}
a { color: var(--accent); text-decoration: var(--link-decoration); }
a:hover { text-decoration: underline; }
:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 2px;
}
h2 { font-size: 1.4rem; margin: 0 0 1rem; letter-spacing: -.01em; }
h3 { font-size: 1.05rem; margin: 0 0 .6rem; }
h4 { font-size: .95rem; margin: 1.1rem 0 .4rem; }
/* Laengere Fliesstexte wie die Nutzungsregeln: Abschnitte voneinander
absetzen und die Zeilen nicht ueber die ganze Breite laufen lassen. */
.card h3 { margin-top: 1.8rem; }
.card h3:first-of-type { margin-top: .5rem; }
.card ul { margin: .4rem 0 .8rem; padding-left: 1.3rem; }
.card ul li { margin-bottom: .35rem; }
.card > p, .card > ul { max-width: 62ch; }
code {
background: var(--accent-soft);
border: var(--border-w) solid var(--border);
padding: .1em .4em;
border-radius: 4px;
font-size: .9em;
}
/* ---------- Kopfbereich ---------- */
.site-header {
background: var(--header-bg);
color: var(--header-text);
border-bottom: var(--border-w) solid var(--header-border);
position: sticky;
top: 0;
z-index: 10;
}
.site-header__inner {
display: flex;
align-items: center;
gap: 1.25rem;
max-width: 1280px;
margin: 0 auto;
padding: .75rem 1.25rem;
}
/* Zwei freigestellte Logo-Fassungen. Die Original-Wortmarke ist so dunkelblau
wie die Kopfleiste des Marken-Themes und dort praktisch unsichtbar, die
schwarze Unterzeile geht auf dunklem Grund unter - deshalb gibt es eine
aufgehellte Variante fuer dunkle und farbige Kopfleisten. */
.brand { display: flex; align-items: center; flex: 0 0 auto; }
/* Hier bewusst KEIN display: ".brand img" hat mit 0-1-1 eine hoehere
Spezifitaet als ".brand__inv" mit 0-1-0 und setzte damit beide Fassungen
auf display:block - in "hell", "kontrast" und "auto" im hellen Systemmodus
standen beide Logos nebeneinander. In "dunkel" und "marke" fiel es nicht
auf, weil dort die Themenregel mit 0-2-0 dazwischengeht. */
.brand img { height: 42px; width: auto; }
.brand__std { display: block; }
.brand__inv { display: none; }
:root[data-theme="dunkel"] .brand__std,
:root[data-theme="marke"] .brand__std { display: none; }
:root[data-theme="dunkel"] .brand__inv,
:root[data-theme="marke"] .brand__inv { display: block; }
@media (prefers-color-scheme: dark) {
:root[data-theme="auto"] .brand__std { display: none; }
:root[data-theme="auto"] .brand__inv { display: block; }
}
.site-title {
font-size: 1.25rem;
font-weight: 600;
margin: 0;
padding-left: 1.25rem;
border-left: var(--border-w) solid var(--header-border);
letter-spacing: -.01em;
}
.account {
margin-left: auto;
display: flex;
align-items: center;
gap: .75rem;
}
.account__info { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.account__name { font-weight: 600; }
/* Im abgemeldeten Zustand stehen hier zwei Knoepfe statt Name und Abmelden.
Alle Bedienelemente der Kopfzeile sind btn--small, damit sie dieselbe Hoehe
haben wie die Darstellungssteuerung daneben. */
.account .btn { white-space: nowrap; }
.account__form { margin: 0; }
.badge {
font-size: .7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
padding: .15rem .45rem;
border-radius: 999px;
background: rgba(127, 127, 127, .22);
color: inherit;
border: var(--border-w) solid transparent;
}
:root[data-theme="kontrast"] .badge { border-color: currentColor; }
.badge--own { background: var(--accent-soft); color: var(--accent); }
.badge--public { background: var(--success-soft); color: var(--success); }
.badge--private { background: var(--danger-soft); color: var(--danger); }
/* Hinweis, kein Fehler - etwa ein Gesellschaftsname, der mehrfach vorkommt.
Das ist erlaubt und oft historisch korrekt, deshalb nicht in Rot. */
.badge--warn { background: var(--warn-soft); color: var(--warn); }
/* Zustaende, die nichts mit Sichtbarkeit zu tun haben - etwa der einer
Schluesselgeneration. Farblich wie public/private, aber eigener Name:
"oeffentlich" und "gueltig" sind zwei verschiedene Aussagen. */
/* Ein Hinweis direkt unter einer Tabelle stiess sonst an deren Unterkante -
.field-hint hat bewusst keinen oberen Abstand, weil es sonst unter jedem
Eingabefeld zu luftig waere. Deshalb hier gezielt statt global. */
/* Geraeteliste im Konto: Bezeichnung links, Knopf rechts, bricht auf schmalen
Schirmen um. Bewusst eine Liste statt einer Tabelle - es sind zwei bis drei
Zeilen mit je einer Angabe, dafuer waeren Spaltenkoepfe mehr Aufwand als
Nutzen. */
.geraeteliste { list-style: none; margin: 0; padding: 0; }
/* Die Lesebreite aus ".card > ul" gilt hier nicht: das ist kein Fliesstext,
sondern eine Zeile je Geraet mit einer Aktion rechts. Mit 62ch endete die
Liste bei halber Kartenbreite, und der Knopf stand mitten im Nichts.
Spezifitaet: zwei Klassen (0-2-0) schlagen Klasse+Element (0-1-1). */
.card > .geraeteliste { max-width: none; }
.geraeteliste li {
display: flex;
flex-wrap: wrap;
gap: .5rem 1rem;
align-items: center;
justify-content: space-between;
padding: .7rem 0;
border-top: var(--border-w) solid var(--border);
}
.geraeteliste li:first-child { border-top: 0; }
/* Der Textblock darf schrumpfen, damit der Knopf rechts stehen bleibt. Ohne
flex-basis und min-width:0 schob ein langer Hinweis ihn in die naechste
Zeile - und das sah bei jeder Zeile anders aus, je nach Textlaenge. */
.geraeteliste li > div { flex: 1 1 20rem; min-width: 0; }
.geraeteliste .field-hint { margin: .15rem 0 0; max-width: none; }
.geraeteliste__frage { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.geraeteliste__frage span { font-size: .9rem; }
.table-wrap + .field-hint { margin-top: .6rem; }
.badge--ok { background: var(--success-soft); color: var(--success); }
.badge--err { background: var(--danger-soft); color: var(--danger); }
/* Ohne eigene Farbe: im Verlauf stehen Fahrzeug, Tasten und CVs
nebeneinander, und eine dritte Signalfarbe waere Laerm ohne Aussage. */
.badge--neutral { background: rgba(127, 127, 127, .22); color: var(--text-muted); }
.detail__meta dd .badge { vertical-align: middle; }
.detail__meta dd .muted { font-size: .85rem; }
/* Der Kopfbereich kann farbig sein - Knoepfe darin erben seine Textfarbe. */
.site-header .btn {
color: var(--header-text);
border-color: var(--header-muted);
background: transparent;
}
.site-header .btn:hover {
color: var(--header-text);
background: rgba(127, 127, 127, .18);
border-color: var(--header-text);
}
/* ---------- Darstellungs-Umschalter ---------- */
.appearance { position: relative; }
.appearance > summary { list-style: none; cursor: pointer; user-select: none; }
.appearance > summary::-webkit-details-marker { display: none; }
.appearance > summary::after { content: " ▾"; }
.appearance[open] > summary::after { content: " ▴"; }
.appearance__panel {
position: absolute;
right: 0;
top: calc(100% + .5rem);
z-index: 20;
min-width: 250px;
padding: 1rem;
background: var(--surface);
color: var(--text);
border: var(--border-w) solid var(--border);
border-radius: var(--radius);
box-shadow: 0 8px 24px rgba(16, 24, 40, .18);
}
.appearance__panel label {
display: block;
font-size: .85rem;
font-weight: 600;
margin: .7rem 0 .25rem;
}
.appearance__panel label:first-of-type { margin-top: 0; }
.appearance__panel .btn { margin-top: 1rem; width: 100%; }
/* ---------- Hauptmenü ---------- */
.mainnav {
border-top: var(--border-w) solid var(--header-border);
overflow-x: auto;
}
.mainnav ul {
display: flex;
gap: .25rem;
list-style: none;
margin: 0 auto;
padding: 0 1.25rem;
max-width: 1280px;
}
.mainnav a {
display: block;
padding: .8rem .95rem;
color: var(--header-muted);
text-decoration: none;
font-weight: 500;
font-size: .95rem;
white-space: nowrap;
border-bottom: 3px solid transparent;
transition: color .15s, border-color .15s;
}
.mainnav a:hover { color: var(--header-text); text-decoration: none; }
.mainnav a.is-active {
color: var(--header-text);
border-bottom-color: var(--nav-active);
font-weight: 600;
}
/* ---------- Layout ---------- */
.layout {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
max-width: 1280px;
margin: 0 auto;
padding: 1.5rem 1.25rem 3rem;
}
.layout--with-aside { grid-template-columns: 210px minmax(0, 1fr); }
.submenu ul { list-style: none; margin: 0; padding: 0; }
.submenu a {
display: block;
padding: .55rem .75rem;
margin-bottom: .15rem;
border: var(--border-w) solid transparent;
border-radius: var(--radius-sm);
color: var(--text-muted);
text-decoration: none;
font-size: .93rem;
}
.submenu a:hover { background: var(--surface); color: var(--text); }
.submenu a.is-active {
background: var(--accent-soft);
border-color: var(--accent);
color: var(--accent);
font-weight: 600;
}
.content { min-width: 0; }
/* ---------- Bausteine ---------- */
.card {
background: var(--surface);
border: var(--border-w) solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 1.25rem;
margin-bottom: 1.25rem;
}
.card--narrow { max-width: 460px; }
.card--welcome p:last-child { margin-bottom: 0; }
.card--link {
display: block;
text-decoration: none;
color: inherit;
transition: border-color .15s, transform .15s;
}
.card--link:hover { border-color: var(--accent); transform: translateY(-2px); text-decoration: none; }
.muted { color: var(--text-muted); }
.notice {
padding: .8rem 1rem;
border-radius: var(--radius-sm);
border: var(--border-w) solid var(--border);
background: var(--surface);
margin: 0 0 1rem;
font-size: .93rem;
}
.notice-error { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.notice-success { border-color: var(--success); background: var(--success-soft); color: var(--success); }
.notice-info { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
/* Die Warnfarben gab es als Variablen und als .badge--warn, aber nicht als
Hinweiskasten - eine Meldung mit .notice-warn fiel deshalb stumm auf das
neutrale Kaestchen zurueck und sah aus wie eine Beilaeufigkeit. Genau das
soll eine ablaufende Lizenz nicht. */
.notice-warn { border-color: var(--warn-line); background: var(--warn-soft); color: var(--warn); }
.list { margin: 0; padding-left: 1.1rem; color: var(--text-muted); font-size: .93rem; }
.grid-3 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 1rem;
}
/* ---------- Formulare ---------- */
.form { display: flex; flex-direction: column; gap: .3rem; }
.form label { font-size: .88rem; font-weight: 600; margin-top: .6rem; }
.form--grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: .75rem 1rem;
/*
* start, nicht end.
*
* Mit "end" richtet das Raster die UNTERKANTEN aus. Sobald ein Feld einen
* Hinweis darunter hat und das Nachbarfeld nicht - oder der eine Hinweis
* zwei Zeilen braucht und der andere eine -, stehen die Eingabefelder auf
* verschiedenen Hoehen. Genau so sah das Formular der Bahngesellschaften
* aus: Kuerzel und Name unten, Von und Bis zwei Zeilen hoeher, das
* Auswahlfeld dazwischen.
*
* Mit "start" fluchten die Beschriftungen oben, damit auch die
* Eingabefelder, und die Hinweise haengen unterschiedlich weit nach unten -
* was niemanden stoert.
*/
align-items: start;
}
.form--grid label { display: block; margin: 0 0 .25rem; }
.form--grid > div { min-width: 0; }
.form__actions { grid-column: 1 / -1; display: flex; gap: .6rem; }
/* Stillgelegte Zeile: zurueckgenommen, aber lesbar - sie wird nie geloescht
und muss dauerhaft gut zu erfassen bleiben. Nur ausgrauen reichte nicht,
der Kontrast fiel unter das, was man im Register noch bequem liest. */
/* Eine technische Kennung mitten im Fliesstext soll nicht umbrechen - sonst
steht die Haelfte von "lodi-con" in der naechsten Zeile und sieht aus wie
zwei verschiedene Namen. */
.field-hint code { white-space: nowrap; }
/* Ein vollstaendiger Schluessel in einer Tabellenzelle. Die Breite haelt ihn
auf zwei Zeilen zu vier Achtergruppen - genau die Einteilung des
Seed-Papiers, sonst zaehlt man beim Vergleichen die Stellen ab. */
code.schluessel {
display: inline-block;
max-width: 19rem;
line-height: 1.5;
}
.zeile--still td { opacity: .72; }
.zeile--still .cell--strong { font-weight: 500; }
/* Feld ueber die volle Breite des Rasters */
.span-2 { grid-column: 1 / -1; }
/* Formular links in fester Breite, daneben Platz fuer Erlaeuterungen.
Untereinander stehende Felder lesen sich besser als ein Raster, und der
freiwerdende Raum wird sinnvoll genutzt statt leer zu bleiben. */
.form-layout {
display: grid;
grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
gap: 2rem;
align-items: start;
}
.form--stack { display: block; }
.form--stack .field { margin-bottom: 1.1rem; }
.form--stack .field:last-of-type { margin-bottom: 0; }
.form--stack label {
display: block;
margin: 0 0 .3rem;
font-size: .88rem;
font-weight: 600;
}
.form--stack .form__actions { margin-top: 1.5rem; }
.form-aside > * { margin-top: 0; }
.form-aside p { font-size: .92rem; }
.form-aside .card { margin-bottom: 1rem; }
.form-aside .card:last-child { margin-bottom: 0; }
/* ---------- Schiebeschalter privat / oeffentlich ----------
Ohne JavaScript: das Kaestchen bleibt ein echtes und
wird nur unsichtbar gemacht (nicht display:none, sonst waere es nicht mehr
mit der Tastatur erreichbar). Aussehen und der eingeblendete Hinweis haengen
an :checked und Geschwister-Selektoren - dadurch stimmt die Anzeige auch bei
abgeschaltetem Skript, und der Formularwert bleibt derselbe wie vorher. */
.field-label {
display: block;
margin: 0 0 .4rem;
font-size: .88rem;
font-weight: 600;
}
.toggle__input {
position: absolute;
width: 1px;
height: 1px;
margin: 0;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
/* Drei feste Spalten: Beschriftung - Spur - Beschriftung. Im Fluss konnte die
Spur in den Text laufen; als Raster hat jedes Teil seinen eigenen Platz.
Masse in em, damit der Schalter bei allen vier Schriftgroessen mitwaechst. */
.toggle {
display: inline-grid;
grid-template-columns: auto auto auto;
align-items: center;
gap: .7em;
cursor: pointer;
user-select: none;
font-size: .95rem;
line-height: 1.2;
}
/* Muss die allgemeine Label-Regel des gestapelten Formulars ueberstimmen:
".form--stack label" setzt display:block und zerlegt den Schalter sonst. */
.form--stack label.toggle {
display: inline-grid;
font-weight: 400;
margin: 0;
}
.toggle__track {
position: relative;
width: 3.25em;
height: 1.75em;
border-radius: 999px;
background: var(--border);
border: var(--border-w) solid var(--border);
transition: background .18s, border-color .18s;
}
.toggle__thumb {
position: absolute;
top: 50%;
left: .25em;
width: 1.25em;
height: 1.25em;
border-radius: 50%;
background: var(--surface);
box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
transform: translateY(-50%);
transition: transform .18s;
}
.toggle__side { color: var(--text-muted); transition: color .18s; white-space: nowrap; }
/* aus = privat */
.toggle__input:not(:checked) ~ .toggle .toggle__side--off {
color: var(--text);
font-weight: 600;
}
/* an = oeffentlich */
.toggle__input:checked ~ .toggle .toggle__track {
background: var(--success);
border-color: var(--success);
}
/* Weg = Spurbreite minus Daumen minus beide Abstaende: 3.25 - 1.25 - .5 */
.toggle__input:checked ~ .toggle .toggle__thumb {
transform: translateY(-50%) translateX(1.5em);
}
.toggle__input:checked ~ .toggle .toggle__side--on {
color: var(--success);
font-weight: 600;
}
.toggle__input:focus-visible ~ .toggle .toggle__track {
outline: 3px solid var(--focus);
outline-offset: 2px;
}
/* Im Kontrastmodus darf Farbe kein alleiniges Unterscheidungsmerkmal sein.
Das leisten hier die Position des Daumens und die fette aktive Beschriftung,
die zusaetzlich unterstrichen wird - kein Farbwert noetig. */
:root[data-theme="kontrast"] .toggle__input:not(:checked) ~ .toggle .toggle__side--off,
:root[data-theme="kontrast"] .toggle__input:checked ~ .toggle .toggle__side--on {
text-decoration: underline;
text-underline-offset: 3px;
}
/* ---------- Urheberrechts-Hinweis ----------
Nur sichtbar, wenn der Schalter auf oeffentlich steht. */
.copyright-note {
display: none;
margin: .9rem 0 0;
padding: .7rem .9rem;
font-size: .9rem;
color: var(--warn);
background: var(--warn-soft);
border: var(--border-w) solid var(--warn-line);
border-left-width: 4px;
border-radius: var(--radius-sm);
}
.toggle__input:checked ~ .copyright-note { display: block; }
.copyright-note strong { font-weight: 700; }
/* Derselbe Kasten ohne Schalter davor - fuer Warnungen, die immer stehen. */
.copyright-note--static { display: block; }
/* Nur fuer Screenreader: eine Spaltenueberschrift, die optisch leer bleiben
soll, darf im Markup nicht leer sein. */
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
@media (max-width: 900px) {
.form-layout { grid-template-columns: 1fr; gap: 1.25rem; }
}
.field-hint {
margin: .3rem 0 0;
font-size: .8rem;
color: var(--text-muted);
}
input[type=file] {
width: 100%;
padding: .5rem;
border: var(--border-w) dashed var(--border);
border-radius: var(--radius-sm);
background: var(--bg);
color: var(--text);
font: inherit;
font-size: .9rem;
}
input[type=file]:focus { border-color: var(--accent); border-style: solid; }
.edit-preview {
margin-bottom: 1.25rem;
padding-bottom: 1.25rem;
border-bottom: var(--border-w) solid var(--border);
}
.edit-preview img {
max-width: 100%;
height: auto;
border-radius: var(--radius-sm);
display: block;
}
.edit-preview p { margin: .5rem 0 0; font-size: .85rem; }
.detail__actions { margin: 1.25rem 0 0; }
/* textarea gehoert in dieselbe Liste. Fehlte sie, blieb in Firefox die
Vorgabefarbe stehen - also weisser Hintergrund mit dunkler Schrift, auch im
dunklen Farbschema. */
input[type=text], input[type=email], input[type=password],
input[type=search], input[type=number], select, textarea {
width: 100%;
padding: .55rem .7rem;
border: var(--border-w) solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--text);
font: inherit;
font-size: .95rem;
}
textarea {
/* Nur senkrecht: waagerechtes Ziehen sprengt das Raster des Formulars. */
resize: vertical;
min-height: 5.5rem;
line-height: 1.5;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
.btn {
display: inline-block;
padding: .55rem 1rem;
border: var(--border-w) solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--text);
font: inherit;
font-size: .93rem;
font-weight: 500;
text-decoration: none;
cursor: pointer;
white-space: nowrap;
transition: background .15s, border-color .15s;
}
.btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.btn--primary {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
/* Der Abstand ueber dem Absende-Knopf gehoert an die Stelle, wo er gebraucht
wird: als letztes Element eines gestapelten Formulars. Frueher stand er an
.btn--primary selbst - dadurch bekam JEDE Knopfleiste mit einem primaeren
Knopf einen Versatz nach unten, und weil diese Leisten Flex-Container mit
dem Vorgabewert "stretch" sind, wurde der Knopf zugleich niedriger als
seine Nachbarn. Gegengesteuert wurde mit einer Liste von Ausnahmen, die bei
jeder neuen Leiste erweitert werden musste - vergessen wurde sie zuletzt in
der Kopfzeile.
Der Kindselektor trifft nur direkte Kinder: in .form__actions,
.filterbar__actions und dergleichen steckt der Knopf eine Ebene tiefer und
bleibt damit von selbst aussen vor. */
form > .btn--primary { margin-top: 1rem; }
.btn--primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.site-header .btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--ghost { background: transparent; }
/* Gemischte Leisten aus