/*
* Baureihenkunde: gemeinsames Erscheinungsbild der Verwaltungsebene.
*
* Die Gestaltung folgt der Marke innoflex: tiefes Anthrazit, kräftiges Gold als
* einziger Akzent, klare weisse Typografie. Prägendes Element der Vorlage ist
* der goldene Knick — er erscheint hier als Trennlinie unter dem Kopfbereich.
*
* Farben stammen unmittelbar aus dem Logo:
* Anthrazit #262833
* Gold #E0C74F
*
* Beide Themen werden über `data-theme` am -Element gewählt. Alle Farben
* laufen über Variablen; eine Seite kommt damit ohne eigene Farbangaben aus.
*/
:root {
/* Marke — in beiden Themen gleich */
--marke-anthrazit: #262833;
--marke-gold: #e0c74f;
--radius: 12px;
--radius-klein: 8px;
--schrift: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--tempo: .18s;
}
/* ---------------------------------------------------------------- Dunkel */
:root,
:root[data-theme="dunkel"] {
color-scheme: dark;
--grund: #1c1d23;
--grund-tief: #16171c;
--flaeche: #23252f;
--flaeche-hoch: #2b2e3a;
--linie: #363a48;
--linie-zart: #2c2f3b;
--text: #f2f4f8;
--text-leise: #a2a9b8;
--text-still: #6f7789;
--akzent: var(--marke-gold);
--akzent-text: #262833; /* Schrift auf goldener Fläche */
--akzent-leise: rgba(224, 199, 79, .14);
--gut: #4ec98a;
--achtung: #f0b44c;
--fehler: #ff7a7a;
--schatten: 0 14px 40px rgba(0, 0, 0, .38);
--logo-hell: none;
--logo-dunkel: block;
}
/* ------------------------------------------------------------------ Hell */
:root[data-theme="hell"] {
color-scheme: light;
--grund: #f1f2f5;
--grund-tief: #e6e8ed;
--flaeche: #ffffff;
--flaeche-hoch: #f7f8fa;
--linie: #d6d9e0;
--linie-zart: #e6e8ed;
--text: #262833;
--text-leise: #5c6373;
--text-still: #868d9d;
/*
* Das Markengold trägt auf Weiss zu wenig Kontrast für Schrift. Als Fläche
* und Linie bleibt es unverändert; für Text tritt ein abgedunkelter Ton an
* seine Stelle, der dieselbe Farbfamilie behält.
*/
--akzent: #8a7220;
--akzent-text: #262833;
--akzent-leise: rgba(224, 199, 79, .22);
--gut: #1f8f57;
--achtung: #9a6b12;
--fehler: #c0392b;
--schatten: 0 10px 30px rgba(38, 40, 51, .10);
--logo-hell: block;
--logo-dunkel: none;
}
/* --------------------------------------------------------------- Grundlage */
* { box-sizing: border-box; }
body {
min-height: 100vh;
margin: 0;
background: var(--grund);
color: var(--text);
font: 15px/1.55 var(--schrift);
-webkit-font-smoothing: antialiased;
}
a { color: var(--akzent); text-decoration-color: var(--akzent-leise); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }
code, pre, kbd {
font-family: "Cascadia Mono", Consolas, "SF Mono", monospace;
font-size: .92em;
}
code {
padding: 1px 6px;
border-radius: 5px;
background: var(--flaeche-hoch);
border: 1px solid var(--linie-zart);
color: var(--text-leise);
}
/* ------------------------------------------------------------- Kopfbereich */
.ts-kopf {
position: relative;
margin-bottom: 16px;
background: var(--grund-tief);
border-bottom: 1px solid var(--linie-zart);
}
/*
* Der goldene Knick aus der Vorlage: eine Linie, die links der Mitte nach
* unten abknickt und wieder ansteigt. Als SVG gezeichnet, weil Farbverläufe
* für eine schräge Linie keine sauberen Kanten liefern. `preserveAspectRatio`
* auf `none` lässt sie sich über die volle Breite ziehen, ohne dass die
* Strichstärke mitwächst — dafür sorgt `vector-effect`.
*/
.ts-kopf::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -10px;
height: 20px;
pointer-events: none;
background: url('data:image/svg+xml;utf8,') no-repeat center / 100% 100%;
}
.ts-kopf-innen {
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
flex-wrap: wrap;
width: min(1320px, calc(100% - 40px));
margin: auto;
padding: 18px 0 22px;
}
.ts-marke { display: flex; align-items: center; gap: 16px; text-decoration: none; color: inherit; }
.ts-marke img { display: block; height: 30px; width: auto; }
.ts-marke img.hell { display: var(--logo-hell); }
.ts-marke img.dunkel { display: var(--logo-dunkel); }
.ts-marke-text { padding-left: 16px; border-left: 1px solid var(--linie); }
.ts-marke-text b { display: block; font-size: 15px; font-weight: 700; letter-spacing: .01em; }
.ts-marke-text span { display: block; color: var(--text-still); font-size: 12px; }
.ts-kopf-rechts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ts-person { color: var(--text-leise); font-size: 14px; white-space: nowrap; }
/* ----------------------------------------------------------- Theme-Schalter */
.ts-theme {
display: inline-flex;
padding: 3px;
border: 1px solid var(--linie);
border-radius: 999px;
background: var(--flaeche);
}
.ts-theme button {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--text-leise);
font: inherit;
font-size: 13px;
cursor: pointer;
transition: background var(--tempo), color var(--tempo);
}
.ts-theme button:hover { color: var(--text); }
.ts-theme button[aria-pressed="true"] {
background: var(--marke-gold);
color: var(--marke-anthrazit);
font-weight: 700;
}
/* -------------------------------------------------------------- Seitenrumpf */
.ts-seite { width: min(1320px, calc(100% - 40px)); margin: auto; padding: 34px 0 70px; }
.ts-seite.schmal { width: min(940px, calc(100% - 40px)); }
.ts-seite.eng { width: min(620px, calc(100% - 40px)); }
.ts-titel { margin: 0 0 26px; }
.ts-titel .ts-hut {
margin: 0 0 8px;
color: var(--akzent);
font-size: 11.5px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
}
.ts-titel h1 { margin: 0 0 10px; font-size: clamp(28px, 4.2vw, 44px); line-height: 1.08; letter-spacing: -.015em; }
.ts-titel p { max-width: 74ch; margin: 0; color: var(--text-leise); font-size: 16px; }
/* -------------------------------------------------------------------- Karten */
.ts-karte {
margin-bottom: 18px;
padding: 22px;
border: 1px solid var(--linie);
border-radius: var(--radius);
background: var(--flaeche);
}
.ts-karte > h2 { margin: 0 0 4px; font-size: 18px; letter-spacing: -.01em; }
.ts-karte > .ts-hinweis { margin: 0 0 18px; color: var(--text-leise); font-size: 14px; }
.ts-karte > h2:last-child, .ts-karte > .ts-hinweis:last-child { margin-bottom: 0; }
/* ------------------------------------------------------------- Werkzeuggitter */
.ts-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 16px; }
.ts-werkzeug {
position: relative;
display: flex;
flex-direction: column;
min-height: 196px;
padding: 22px;
border: 1px solid var(--linie);
border-radius: var(--radius);
background: var(--flaeche);
overflow: hidden;
transition: border-color var(--tempo), transform var(--tempo), box-shadow var(--tempo);
}
.ts-werkzeug::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: var(--marke-gold);
opacity: .55;
transition: opacity var(--tempo);
}
.ts-werkzeug:hover { border-color: var(--marke-gold); transform: translateY(-2px); box-shadow: var(--schatten); }
.ts-werkzeug:hover::before { opacity: 1; }
.ts-werkzeug small {
display: block;
margin-bottom: 8px;
color: var(--akzent);
font-size: 11px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
}
.ts-werkzeug h2 { margin: 0 0 8px; font-size: 19px; letter-spacing: -.01em; }
.ts-werkzeug p { margin: 0 0 20px; color: var(--text-leise); font-size: 14.5px; }
.ts-werkzeug > a, .ts-werkzeug > .ts-ruht {
align-self: flex-start;
margin-top: auto;
}
.ts-werkzeug.ruht { opacity: .62; }
.ts-werkzeug.ruht::before { background: var(--text-still); }
.ts-ruht { color: var(--achtung); font-size: 13.5px; }
/* ------------------------------------------------------------ Bedienelemente */
button, .ts-knopf {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 9px 15px;
border: 1px solid var(--linie);
border-radius: var(--radius-klein);
background: var(--flaeche-hoch);
color: var(--text);
font: inherit;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: border-color var(--tempo), background var(--tempo), color var(--tempo);
}
button:hover, .ts-knopf:hover { border-color: var(--marke-gold); color: var(--text); }
button:disabled { opacity: .42; cursor: not-allowed; }
button:disabled:hover { border-color: var(--linie); }
button.haupt, .ts-knopf.haupt {
border-color: var(--marke-gold);
background: var(--marke-gold);
color: var(--marke-anthrazit);
font-weight: 700;
}
button.haupt:hover, .ts-knopf.haupt:hover { background: #ecd66a; border-color: #ecd66a; color: var(--marke-anthrazit); }
button.gefahr, .ts-knopf.gefahr { border-color: color-mix(in srgb, var(--fehler) 55%, transparent); color: var(--fehler); }
button.gefahr:hover { border-color: var(--fehler); background: color-mix(in srgb, var(--fehler) 12%, transparent); }
button.leise { background: transparent; font-weight: 400; }
button.klein, .ts-knopf.klein { padding: 5px 10px; font-size: 13px; font-weight: 400; }
.ts-knopfreihe { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
label { display: block; margin-bottom: 15px; }
label > span, .ts-feldname { display: block; margin-bottom: 6px; font-weight: 600; font-size: 14px; }
label small, .ts-feldhilfe { display: block; margin-top: 5px; color: var(--text-still); font-weight: 400; font-size: 13px; }
label.zeile { display: flex; align-items: center; gap: 8px; margin-bottom: 0; font-weight: 400; }
label.zeile input { width: auto; margin: 0; display: inline-block; }
/*
* Manche Formulare schreiben die Beschriftung ohne unmittelbar in das
* Label und lassen das Feld folgen. Ohne diese Regel stünde das Feld dann in
* derselben Zeile wie der Text und würde zusammengedrückt.
*/
label > input:not([type="checkbox"]):not([type="radio"]),
label > select,
label > textarea {
display: block;
margin-top: 5px;
}
/*
* Bewusst über den Ausschluss statt über eine Liste von Typen: Ältere Formulare
* schreiben `` ohne `type`-Angabe. Ein Selektor auf
* `input[type=text]` liesse diese Felder ungestaltet zurück.
*/
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
select, textarea {
width: 100%;
padding: 9px 12px;
border: 1px solid var(--linie);
border-radius: var(--radius-klein);
background: var(--grund);
color: var(--text);
font: inherit;
transition: border-color var(--tempo);
}
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible {
outline: 2px solid var(--marke-gold);
outline-offset: 2px;
}
input[type=checkbox], input[type=radio] { accent-color: var(--marke-gold); }
/* -------------------------------------------------------------------- Meldungen */
.ts-meldung {
margin-bottom: 18px;
padding: 12px 16px;
border: 1px solid var(--linie);
border-left-width: 4px;
border-radius: var(--radius-klein);
background: var(--flaeche);
white-space: pre-wrap;
}
.ts-meldung.gut { border-left-color: var(--gut); }
.ts-meldung.achtung { border-left-color: var(--achtung); }
.ts-meldung.fehler { border-left-color: var(--fehler); }
.ts-meldung strong { display: block; margin-bottom: 3px; }
.ts-meldung p { margin: 0; color: var(--text-leise); font-size: 14px; }
/* -------------------------------------------------------------------- Tabellen */
table { width: 100%; border-collapse: collapse; }
th {
padding: 8px 10px;
border-bottom: 1px solid var(--linie);
text-align: left;
color: var(--text-still);
font-size: 11.5px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
td { padding: 9px 10px; border-bottom: 1px solid var(--linie-zart); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
td.zahl, .ts-leise { color: var(--text-leise); white-space: nowrap; font-size: 14px; }
/* --------------------------------------------------------------- Prüfliste */
.ts-pruef {
display: grid;
grid-template-columns: 20px minmax(190px, 1fr) 1.2fr;
gap: 6px 14px;
padding: 10px 0;
border-bottom: 1px solid var(--linie-zart);
align-items: baseline;
}
.ts-pruef:last-child { border-bottom: 0; }
.ts-punkt { align-self: center; width: 10px; height: 10px; border-radius: 50%; background: var(--text-still); }
.ts-pruef.ok .ts-punkt { background: var(--gut); }
.ts-pruef.warn .ts-punkt { background: var(--achtung); }
.ts-pruef.error .ts-punkt { background: var(--fehler); }
.ts-pruef b { font-weight: 600; }
.ts-pruef span { color: var(--text-leise); }
.ts-pruef .ts-hilfe { grid-column: 2 / 4; margin: 3px 0 0; color: var(--achtung); font-size: 13.5px; }
.ts-pruef.error .ts-hilfe { color: var(--fehler); }
/* ------------------------------------------------------------------ Marken */
.ts-marker {
display: inline-block;
padding: 2px 8px;
border-radius: 5px;
background: var(--akzent-leise);
color: var(--akzent);
font-size: 12px;
font-weight: 700;
}
.ts-marker.gut { background: color-mix(in srgb, var(--gut) 16%, transparent); color: var(--gut); }
.ts-marker.warn { background: color-mix(in srgb, var(--achtung) 16%, transparent); color: var(--achtung); }
.ts-marker.fehler { background: color-mix(in srgb, var(--fehler) 16%, transparent); color: var(--fehler); }
/* ------------------------------------------------------------------ Dialoge */
dialog {
max-width: min(560px, 92vw);
padding: 24px;
border: 1px solid var(--linie);
border-radius: var(--radius);
background: var(--flaeche);
color: var(--text);
box-shadow: var(--schatten);
}
dialog::backdrop { background: rgba(16, 17, 22, .72); backdrop-filter: blur(2px); }
dialog h3 { margin: 0 0 10px; font-size: 19px; }
/* --------------------------------------------------------------------- Fuss */
.ts-fuss {
width: min(1320px, calc(100% - 40px));
margin: 0 auto;
padding: 22px 0 34px;
border-top: 1px solid var(--linie-zart);
color: var(--text-still);
font-size: 13px;
}
/* ------------------------------------------------------------------- Leerlauf */
.ts-leer { padding: 34px 0; color: var(--text-leise); text-align: center; }
@media (max-width: 700px) {
.ts-kopf-innen { padding: 14px 0; }
.ts-marke-text { display: none; }
.ts-pruef { grid-template-columns: 20px 1fr; }
.ts-pruef span { grid-column: 2; }
.ts-pruef .ts-hilfe { grid-column: 1 / 3; }
td.optional, th.optional { display: none; }
}