/* ═══════════════════════════════════════════════════════════════════════
vhc.de — RECHTSTEXT-KÄSTEN
Geteilter Baustein: Impressum, Datenschutz UND die drei Leistungsseiten.
Wird nach grund.css geladen, vor der jeweiligen Seitenvorlage.
═══════════════════════════════════════════════════════════════════════
── WAS DAS IST ────────────────────────────────────────────────────────
Gleichförmige Kästen mit fester Nummernspalte links und der Überschrift
als kleiner Versalienzeile. Vorbild sind die Rechtsseiten der GameZone
(legal-document.css). EINE Rasterbreite für alles — wechselnde Breiten
ergäben ein unruhiges Treppenbild.
Fünf Seiten benutzen ihn. Das ist keine Doppelung, sondern der Sinn
eines Bausteins: Die Rechtsseiten zählen Paragraphen auf, die
Leistungsseiten beschreiben Leistungen — die FORM ist dieselbe.
── AUFBAU EINER SEITE MIT KÄSTEN ──────────────────────────────────────
![]()
Titel ist ein Bild
…
rechts daneben,
optional
Ohne `.imp-nr` bleibt links eine leere Spalte von 48 px stehen — die
Leistungsseiten schalten das Raster deshalb einspaltig (siehe
leistungsseite.css).
── DER NAME ───────────────────────────────────────────────────────────
Das Kürzel `imp-` stammt vom Impressum, wo diese Kästen zuerst
entstanden. Bewusst nicht umbenannt (fünf Seiten hängen daran).
═══════════════════════════════════════════════════════════════════════ */
/* ── Seitenkopf ────────────────────────────────────────────────────────
Titel links, Zusatz rechts auf einer Linie. Bricht auf schmalen Schirmen
um.
`align-items: center` und NICHT `baseline`: Links steht ein Bild, das
gar keine Schriftgrundlinie hat — bei Grundlinienausrichtung zählt seine
Unterkante, und die rechte Spalte hinge darunter. Auf der Datenschutz-
seite fiel das auf, weil die Datumszeile sie höher macht. Mittig liegen beide Seiten auf einer Höhe, unabhängig davon,
wie viele Zeilen rechts stehen. */
.imp-kopfzeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 28px; margin-bottom: 30px; }
/* Die Überschrift IST das Bild. Es steckt deshalb in der und trägt
den Titel als Alternativtext: Die Seite behält ihre echte Hauptüber-
schrift für Vorleseprogramme, Suchmaschinen und den Fall, dass das Bild
nicht lädt. Ein Bild ohne wäre optisch gleich, strukturell aber
eine Seite ohne Titel.
Die Vorlagen liegen in doppelter Auflösung vor (128 px hoch für 64 px
Anzeige), damit sie auf feinen Bildschirmen scharf bleiben. */
.imp-titel-bild { margin: 0; line-height: 0; }
.imp-titel-bild img { display: block; height: 64px; width: auto; }
/* Zeile neben der 64 px hohen Überschrift, daher 16,5 px. Gilt auf beiden
Rechtsseiten. */
.imp-paragraf { color: var(--tx-dim); font-size: 16.5px; }
/* Rechte Spalte des Kopfes: Zusatz und Stand untereinander, rechtsbündig. */
.imp-nebeninfo { text-align: right; }
/* ── Schalter „Dunkel | Hell“ ─────────────────────────────────────────
Steht rechts in der Titelzeile jeder Unterseite, also bei dem Inhalt,
den er umschaltet (nicht in der Kopfleiste — auf der Startseite täte er
nichts). Markup aus modus_schalter() (includes/config.php),
Bedienung assets/js/modus.js. Er liegt AUSSERHALB der Kästen und bleibt
deshalb in beiden Zuständen im dunklen Stil.
Zwei Hälften wie ein Schiebeschalter; die aktive trägt `aria-pressed`
und ist hervorgehoben — die Farbe allein trüge die Information nicht,
dafür sagt das Attribut sie Vorleseprogrammen an. */
.modus {
display: inline-flex; gap: 2px; padding: 3px;
border: 1px solid rgba(154,165,182,.30); border-radius: 999px;
background: rgba(8,15,28,.55);
}
.modus[hidden] { display: none; }
.modus button {
display: inline-flex; align-items: center; gap: 7px;
padding: 7px 14px; border: 0; border-radius: 999px;
background: transparent; color: var(--tx-dim); cursor: pointer;
font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .06em;
transition: background .18s ease, color .18s ease;
}
.modus button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.modus button:hover { color: var(--tx); }
.modus button[aria-pressed="true"] { background: rgba(34,197,94,.16); color: var(--green-h); }
.modus button:focus-visible { outline: 2px solid var(--green-h); outline-offset: 2px; }
/* Unter einer Zusatzzeile (Impressum, Datenschutz, Kurs) mit Abstand. */
.imp-nebeninfo .modus { margin-top: 10px; }
/* Impressum und Datenschutz (`--neben`): Die Angaben stehen direkt RECHTS
NEBEN dem Titelbild, linksbündig; der Schalter steht für sich ganz rechts.
Dafür sitzt er dort außerhalb von `.imp-nebeninfo`. */
@media (min-width: 761px) {
.imp-kopfzeile--neben .imp-nebeninfo { text-align: left; }
.imp-kopfzeile--neben .modus { margin-left: auto; }
}
@media (max-width: 760px) {
.imp-nebeninfo--handy-links { text-align: left; }
/* Handy: `.imp-nebeninfo--handy-links` (Impressum, Kurs) setzt die Angaben
linksbündig unter den Titel; der Schalter steht darunter, im Impressum
links, im Datenschutz rechts (dort ist die Spalte rechtsbündig);
2 px + Zeilenabstand 8 px = 10 px Abstand. */
.imp-kopfzeile--neben .modus { margin-top: 2px; }
.imp-kopfzeile--neben .imp-nebeninfo:not(.imp-nebeninfo--handy-links) + .modus { margin-left: auto; }
}
/* Weniger Abstand zum Kopfblock als bei den Inhaltsabschnitten der
Startseite: Dort folgt auf den Hero ein Textabschnitt, hier eine
Seitenüberschrift. Ohne diese Regel säßen die Seiten sichtbar tiefer.
Die Leistungsseiten sind über ihre Klasse angesprochen statt über ihre
drei Kennungen — dann gilt es für jede weitere von selbst. */
#impressum, #datenschutz, .leistungsseite { padding-top: clamp(34px, 4vw, 54px); }
/* ── Die Kästen ────────────────────────────────────────────────────────
Keine eigene Maximalbreite: Eine feste Breite ließe sie rechts vor dem
Rand von Kopfzeile und Fußzeile enden, während sie links bündig stehen —
das wirkt wie eine Verschiebung nach links. Sie laufen über die volle
Spaltenbreite und schließen beidseitig mit dem Seiteninhalt ab. */
.imp-liste { max-width: none; }
/* Grundton wie der Fußschleier (dunkel genug, dass die Linien des Netzwerks
nicht durch die Karte schlagen).
Das Grün läuft von der linken Kante nach rechts aus. Feste Auslauflänge
(180 px) statt Prozent — sonst wäre der Verlauf in den halbbreiten Kästen
kürzer als in den vollbreiten darunter. Die harte Kante links bleibt der
Rahmen, der Verlauf legt sich nur darüber. */
.imp-block {
display: grid; grid-template-columns: 48px 1fr; gap: 0 20px; align-items: start;
padding: 26px 30px; margin-bottom: 14px;
border: 1px solid rgba(148,163,184,.16);
border-left: 2px solid rgba(34,197,94,.45);
border-radius: 12px;
background:
linear-gradient(to right, rgba(34,197,94,.13), rgba(34,197,94,0) 180px),
rgba(8,15,28,.70);
transition: border-color .25s ease;
}
.imp-block:hover { border-color: rgba(34,197,94,.42); border-left-color: var(--green); }
.imp-nr { font-family: var(--font-mono); font-weight: 700; font-size: 15px; color: var(--green-h); opacity: .8; padding-top: 2px; letter-spacing: .05em; }
/* Sperrung .15em — die Zeile wächst dadurch spürbar in der Breite. */
.imp-kicker { font-family: var(--font-mono); font-size: 14px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--green-h); margin-bottom: 14px; }
.imp-body p { color: var(--tx-dim2); font-size: 16px; }
.imp-body p + p { margin-top: 12px; }
.imp-body strong { color: var(--tx); }
.imp-body a { color: var(--green-h); text-decoration: none; border-bottom: 1px solid rgba(34,197,94,.4); }
.imp-body a:hover { color: var(--green); border-bottom-color: var(--green); }
/* Anschrift: abgesetzt, aber OHNE eigenen Kasten — kein Grund, kein Rahmen.
Die Absetzung tragen allein der Abstand und der weitere Zeilenfall; ein
Kasten im Kasten machte daraus eine zweite Ebene, die der Rest der Seite
nicht hat. Steht im Impressum und auf der Datenschutzseite. */
.imp-anschrift { display: block; font-style: normal; color: var(--tx-dim2); font-size: 16px; line-height: 1.9; margin: 18px 0 0; }
/* ── Schmale Fenster ──────────────────────────────────────────────────── */
@media (max-width: 1000px) {
.imp-block { grid-template-columns: 38px 1fr; gap: 0 14px; padding: 22px 20px; }
}