/* ==========================================================================
Gemeinsames Stilblatt der Website-Seiten:
impressum.html, agb.html, faq.html, kontakt.html, blog.html
--------------------------------------------------------------------------
Diese Seiten sind eigenstaendig wie /pruefen und /marke.html: kein app.js,
kein Service Worker, keine Anmeldung, kein Skript. Anders als pruefen.css
kopiert dieses Blatt die Gestaltungswerte NICHT, sondern laedt styles.css
davor und ergaenzt nur. Der Unterschied ist Absicht: Die Pruefseite muss in
fuenf Jahren unveraendert aussehen (sie wird gedruckt und verglichen);
Impressum, AGB und Blog sollen dagegen MIT dem Produkt mitziehen, wenn
jemand in styles.css eine Farbe aendert. Zwei Pflegeorte fuer dieselbe
Palette waeren hier nur eine Gelegenheit, sie auseinanderlaufen zu lassen.
Jede Seite bindet ein:
und traegt . Alle Regeln hier haengen an .seite, damit
dieses Blatt nichts umfaerbt, falls es je versehentlich woanders laedt.
========================================================================== */
/* ---------- Dunkelmodus: dem Geraet folgen ----------
styles.css schaltet dunkel nur ueber :root[data-theme="dark"], und dieses
Attribut setzt app.js - das auf diesen Seiten bewusst fehlt. Ohne den Block
hier blieben die Seiten fuer Dunkelmodus-Geraete grell weiss. Darum wie
pruefen.html: der Einstellung des Geraets folgen, ohne eigenen Umschalter.
Die Werte sind dieselben wie in :root[data-theme="dark"] in styles.css;
wer sie dort aendert, zieht sie hier nach (Kommentar dort fehlt bewusst -
styles.css gehoert einer anderen Spur). Nur die Token, die diese Textseiten
verwenden; Reihen- und Zustandsfarben haben hier keinen Verwender. */
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
--surface-0: #100e16;
--surface-1: #191622;
--surface-2: #221e2e;
--surface-sunken: #14121c;
--border: #322c42;
--border-strong: #463e5c;
--text-primary: #f4f2fb;
--text-secondary: #c2bdd2;
--text-muted: #8d879d;
--accent: #7c3aed;
--accent-ink: #ffffff;
--accent-fg: #c4b5fd;
--accent-soft: #241a3d;
--shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3);
}
}
/* ---------- Haarlinien ----------
Nach AUSTAUSCH/design-referenz-claude-app.md: Trennungen sind die Textfarbe
der Umgebung bei geringer Deckung, nie ein eigenes Grau. Hell ~8 Prozent
Schwarz, dunkel das dort gemessene warme Hellgrau bei 15 Prozent. Der
Token haengt an .seite und nicht an :root, damit er nicht in die App
hineinwirkt, falls beide Blaetter je zusammen laden. */
.seite { --haarlinie: rgba(11, 11, 11, .08); }
@media (prefers-color-scheme: dark) {
.seite { --haarlinie: rgba(225, 224, 217, .15); }
}
/* ---------- Grundgeruest ----------
styles.css legt fuer die App main { margin-left: var(--sidebar-w) } fest -
hier gibt es keine Seitenleiste, also zurueck auf eine mittige Spalte.
Lesebreite rund 65ch: Rechtstext und lange Antworten lesen sich in einer
schmalen, ruhigen Spalte; Breite macht solche Seiten nicht besser, nur
lauter. height:100% aus styles.css wird geloest, sonst rechnet der
Fussbereich gegen die Fensterhoehe statt gegen den Inhalt. */
body.seite {
height: auto;
min-height: 100dvh;
display: flex;
flex-direction: column;
}
.seite .kopf,
.seite main,
.seite .fuss {
width: 100%;
max-width: calc(65ch + 48px);
margin-inline: auto;
padding-inline: 24px;
}
body.seite > main {
margin-left: auto; /* hebt das margin-left der App-Regel auf */
padding-top: 28px;
padding-bottom: 56px;
max-width: calc(65ch + 48px); /* gewinnt gegen max-width: 1760px */
flex: 1;
}
.seite main p,
.seite main li,
.seite main dd {
line-height: 1.6;
}
.seite main p { margin: 0 0 12px; }
.seite main ul,
.seite main ol { margin: 0 0 12px; padding-left: 22px; }
.seite main li { margin-bottom: 6px; }
.seite h1 {
font-size: var(--fs-2xl);
margin: 8px 0 10px;
}
/* Abschnittsueberschriften wie auf dem Markenblatt: eine Haarlinie darueber
gliedert, ohne dass die Schrift schreien muss. */
.seite main h2 {
font-size: var(--fs-lg);
margin: 36px 0 8px;
padding-top: 18px;
border-top: 1px solid var(--haarlinie);
}
.seite main h3 {
font-size: var(--fs-md);
margin: 20px 0 4px;
}
.seite .einleitung { color: var(--text-secondary); margin-bottom: 20px; }
.seite .stand { color: var(--text-muted); font-size: var(--fs-sm); margin: 0 0 20px; }
.seite a { color: var(--accent-fg); }
.seite a:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 2px;
}
/* ---------- Kopf: nur die Wortmarke, Verweis zur Startseite ---------- */
.seite .kopf {
padding-top: 18px;
padding-bottom: 14px;
border-bottom: 1px solid var(--haarlinie);
}
.seite .kopf-marke { display: inline-block; }
.seite .kopf-marke img { height: 30px; width: auto; display: block; }
/* ---------- Fusszeile mit den Geschwisterseiten ---------- */
.seite .fuss {
border-top: 1px solid var(--haarlinie);
margin-top: 24px;
padding-top: 18px;
padding-bottom: 36px;
}
.seite .fuss-links {
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
font-size: var(--fs-md);
}
.seite .fuss-links a { color: var(--text-secondary); text-decoration: none; }
.seite .fuss-links a:hover { color: var(--accent-fg); text-decoration: underline; }
/* Die eigene Seite bleibt verlinkt (ein Klick darauf schadet nicht), wird
aber als Standort markiert. */
.seite .fuss-links a[aria-current="page"] { color: var(--text-primary); font-weight: 600; }
.seite .fuss-zeile { color: var(--text-muted); font-size: var(--fs-xs); margin: 14px 0 0; }
/* ---------- Entwurfshinweis (Impressum, AGB) ----------
Dezent, aber unuebersehbar: Akzentkante links, sonst ruhig. Er wird auch
gedruckt - gerade auf Papier darf der Entwurfsstand nicht verschwinden. */
.seite .entwurf {
border: 1px solid var(--haarlinie);
border-left: 3px solid var(--accent);
background: var(--surface-1);
border-radius: 8px;
padding: 12px 16px;
margin: 4px 0 24px;
font-size: var(--fs-md);
color: var(--text-secondary);
}
.seite .entwurf b { color: var(--text-primary); }
/* ---------- Platzhalter des Betreibers ----------
Ein Platzhalter, der aussieht wie Fliesstext, wird mitveroeffentlicht.
Darum als farbige Marke, die beim Ueberfliegen ins Auge springt. */
.seite .platzhalter {
background: var(--accent-soft);
color: var(--accent-fg);
border-radius: 4px;
padding: 1px 6px;
font-weight: 600;
font-size: var(--fs-md);
}
/* ---------- Uebersicht (Anker-Liste in FAQ und AGB) ---------- */
.seite .uebersicht {
border: 1px solid var(--haarlinie);
border-radius: 8px;
background: var(--surface-1);
padding: 14px 18px;
margin: 0 0 8px;
}
.seite .uebersicht ol {
margin: 0;
padding-left: 20px;
font-size: var(--fs-md);
}
.seite .uebersicht li { margin-bottom: 4px; }
.seite .uebersicht a { color: var(--text-secondary); text-decoration: none; }
.seite .uebersicht a:hover { color: var(--accent-fg); text-decoration: underline; }
@media (min-width: 560px) {
.seite .uebersicht ol { columns: 2; column-gap: 28px; }
.seite .uebersicht li { break-inside: avoid; }
}
/* Sprungziele nicht unter dem oberen Rand landen lassen. */
.seite main section[id],
.seite main article[id] { scroll-margin-top: 16px; }
/* ---------- Impressum: Angabenliste ---------- */
.seite .angaben { margin: 0 0 12px; }
.seite .angaben dt {
font-weight: 600;
font-size: var(--fs-md);
color: var(--text-secondary);
margin-top: 12px;
}
.seite .angaben dd { margin: 2px 0 0; }
/* ---------- Kontakt: die eine Adresse gross ---------- */
.seite .kontaktkarte {
border: 1px solid var(--haarlinie);
border-radius: 8px;
background: var(--surface-1);
padding: 18px 20px;
margin: 20px 0;
}
.seite .kontaktkarte .adresse { font-size: var(--fs-xl); font-weight: 600; }
/* ---------- Blog ---------- */
.seite .artikel { margin-top: 8px; }
.seite .artikel + .artikel {
margin-top: 44px;
padding-top: 32px;
border-top: 1px solid var(--haarlinie);
}
.seite .artikel h2 {
font-size: var(--fs-xl);
margin: 24px 0 2px;
padding-top: 22px;
border-top: 1px solid var(--haarlinie);
}
.seite .artikel-datum {
display: block;
color: var(--text-muted);
font-size: var(--fs-sm);
margin: 0 0 14px;
}
.seite .artikel h3 {
font-size: var(--fs-lg);
margin: 24px 0 6px;
}
/* ---------- Handy ---------- */
@media (max-width: 480px) {
.seite .kopf,
.seite main,
.seite .fuss { padding-inline: 16px; }
}
/* ---------- Papier ----------
Impressum und AGB werden gedruckt und abgelegt. Der Dunkelmodus oben gilt
sonst auch beim Drucken: Flaechen druckt der Browser nicht mit, helle
Schrift schon - auf weissem Papier stuende fast nichts. Darum zurueck auf
Papierwerte, wie es pruefen.css fuer die Pruefseite tut. Die Fussleisten-
Navigation ist Bedienung und faellt weg; der Entwurfshinweis bleibt. */
@media print {
:root {
color-scheme: light;
--surface-0: #ffffff;
--surface-1: #ffffff;
--surface-2: #ffffff;
--border: #c6c3ba;
--border-strong: #c6c3ba;
--text-primary: #0b0b0b;
--text-secondary: #0b0b0b;
--text-muted: #52514e;
--accent: #0b0b0b;
--accent-fg: #0b0b0b;
--accent-soft: #ffffff;
--shadow: none;
}
.seite { --haarlinie: #c6c3ba; }
body.seite { min-height: 0; }
.seite .fuss-links, .seite .uebersicht { display: none; }
.seite .platzhalter { border: 1px solid #0b0b0b; }
.seite .entwurf, .seite .kontaktkarte, .seite .artikel { break-inside: avoid-page; }
}