/* ============================================================ VACATUM DESIGN SYSTEM — seitentypen.css Seitenaufbau: Breite, Rhythmus, Abschnitte Benoetigt: variables.css, components.css ------------------------------------------------------------ components.css liefert die einzelnen Bausteine (Karte, Knopf, Kasten). Was bisher fehlte, ist die Ebene darueber: wie breit eine Seite ist, wie Abschnitte gesetzt werden und wie der vertikale Rhythmus aussieht. Genau das hat bisher jede Seite selbst erfunden — daher die 8'800 Zeilen Inline-CSS. Eine Seite bekommt genau eine Typ-Klasse auf : .vac-page--hub Bereichsuebersichten, Kartenraster .vac-page--artikel Erklaertexte, eine Spalte, Lesebreite .vac-page--rechner Werkzeuge, breit .vac-page--lektion Akademie, Lesebreite + Fortschritt .vac-page--bericht erzeugte Ausgaben, dicht Bestehende Seiten funktionieren ohne die Klasse unveraendert weiter — die Regeln hier greifen nur, wo sie gesetzt wird. ============================================================ */ /* ── CONTAINER ───────────────────────────────────────────── */ .vac-container { width: 100%; max-width: var(--vac-container-max); margin: 0 auto; padding: 0 var(--vac-space-5); flex: 1; } .vac-container--schmal { max-width: var(--vac-content-max); } .vac-container--breit { max-width: var(--vac-container-wide); } /* ── ABSCHNITTE ──────────────────────────────────────────── */ .vac-section { margin: 0 0 var(--vac-space-16); } .vac-section > h2 { font-size: var(--vac-font-size-xl); margin: 0 0 var(--vac-space-2); padding-bottom: var(--vac-space-2); border-bottom: 2px solid var(--vac-color-border); } .vac-section__intro { color: var(--vac-color-text-muted); margin: 0 0 var(--vac-space-6); font-size: var(--vac-font-size-sm); } /* Karten in Rastern: Titel und Text bekommen einen ruhigen Rhythmus, damit Kacheln unterschiedlicher Laenge nebeneinander bestehen. */ .vac-card > h3 { font-size: var(--vac-font-size-md); margin: 0 0 var(--vac-space-2); color: var(--vac-color-primary); } .vac-card > p { margin: 0; font-size: var(--vac-font-size-sm); color: var(--vac-color-text-muted); line-height: var(--vac-line-height-base); } /* ── PAPIERBOGEN ─────────────────────────────────────────── */ /* Der meistbenutzte Aufbau der Website: ein aufgeschlagener Bogen mit farbigem Oberrand. Er stand bisher auf 38 Seiten in 32 leicht unterschiedlichen Fassungen — gleiches Grundgeruest, abweichende Randfarbe und Breite. Das Geruest steht jetzt hier; Seiten, die eine andere Farbe oder Breite brauchen, ueberschreiben nur diese eine Angabe (Seiten-CSS wird nach dem Design-System geladen). */ .paper-wrapper { max-width: 950px; margin: var(--vac-space-10) auto; padding: clamp(var(--vac-space-6), 5vw, var(--vac-space-16)); background: var(--vac-color-bg-card); box-shadow: var(--vac-shadow-md); border-top: 6px solid var(--vac-color-accent); position: relative; } /* Kopfbereich des Bogens — auf 18 Seiten wortgleich definiert gewesen. */ .paper-meta { text-align: center; border-bottom: 1px solid var(--vac-color-border); padding-bottom: var(--vac-space-8); margin-bottom: var(--vac-space-10); } @media (max-width: 600px) { .paper-wrapper { margin: var(--vac-space-4) auto; } } /* ── META-ZEILE ──────────────────────────────────────────── */ /* Stand-Datum und Lesezeit unter der H1. Bei Finanzinhalten ist Aktualitaet eine Sachaussage, keine Nebensache — deshalb sichtbar auf der Seite und nicht nur im Quelltext. */ .vac-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vac-space-3); margin: calc(-1 * var(--vac-space-4)) 0 var(--vac-space-8); font-size: var(--vac-font-size-sm); color: var(--vac-color-text-muted); } .vac-meta__punkt::before { content: "·"; margin-right: var(--vac-space-3); } /* ── HINWEIS AM SEITENFUSS ───────────────────────────────── */ .vac-hinweis { border-left: 3px solid var(--vac-color-border); padding: var(--vac-space-3) var(--vac-space-5); margin: var(--vac-space-8) 0; font-size: var(--vac-font-size-sm); color: var(--vac-color-text-muted); } /* ── SEITENFUSS-NAVIGATION ───────────────────────────────── */ /* Bisher enden Lektionen und Artikel in der Sackgasse. */ .vac-seitennav { display: flex; justify-content: space-between; align-items: center; gap: var(--vac-space-4); margin: var(--vac-space-16) 0 var(--vac-space-8); padding-top: var(--vac-space-6); border-top: 1px solid var(--vac-color-border); font-size: var(--vac-font-size-sm); } .vac-seitennav a { color: var(--vac-color-accent-text); text-decoration: none; } .vac-seitennav a:hover { text-decoration: underline; } @media (max-width: 600px) { .vac-seitennav { flex-direction: column; align-items: stretch; text-align: center; } } /* ── SEITENTYPEN ─────────────────────────────────────────── */ .vac-page--hub .vac-container { max-width: var(--vac-container-max); } .vac-page--rechner .vac-container { max-width: var(--vac-container-max); } .vac-page--bericht .vac-container { max-width: var(--vac-content-max); } /* Artikel und Lektion: Lesebreite und etwas mehr Zeilenabstand. Ueber ~75 Zeichen pro Zeile findet das Auge den Zeilenanfang nicht mehr zuverlaessig wieder. */ .vac-page--artikel .vac-container, .vac-page--lektion .vac-container { max-width: 44rem; } .vac-page--artikel p, .vac-page--lektion p { line-height: var(--vac-line-height-loose); } /* Der Pfad folgt der Textspalte, nicht dem Logo. Gemessen am 18.08.2026: Auf Artikelseiten begann der Text bei 361 px, der Pfad bei 113 — er stand also links NEBEN der Spalte statt darueber. Bauform und Ausrichtung bleiben auf allen Seitentypen dieselben; nur die Breite folgt der des Inhalts. Eine senkrechte Fassung im freien Rand waere schoener, gaebe es aber nur auf Artikelseiten — zwei Bauformen fuer dieselbe Sache, und der Leser suchte die Ortsangabe je nach Seitentyp woanders. */ .vac-page--artikel .vac-breadcrumb__liste, .vac-page--lektion .vac-breadcrumb__liste { max-width: 44rem; } .vac-page--bericht .vac-breadcrumb__liste { max-width: var(--vac-content-max); } .vac-page--artikel h2, .vac-page--lektion h2 { margin-top: var(--vac-space-12); } /* ── NUR FUER SCREENREADER ───────────────────────────────── */ /* Beschriftung, die sichtbar ueberfluessig waere (weil ein Symbol oder der Platzhalter sie traegt), fuer die Sprachausgabe aber gebraucht wird. */ .vac-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ── DRUCK ───────────────────────────────────────────────── */ @media print { .vac-seitennav, .vac-meta { display: none; } .vac-container { max-width: none; padding: 0; } }