/* ==================================================================
KEROLINA – Lesekomfort (kerolina-lesekomfort.css)
------------------------------------------------------------------
DIE EINZIGE STELLE IM PROJEKT, an der die Lesegroesse gesteuert wird.
Zielgruppe: 44–75 Jahre. Lesedauer einer Rundreiseseite: 21–27
Minuten bei rund 4.150 Woertern. Ziel ist nicht grosse Schrift,
sondern muehelose Schrift – die Seite soll nach der Aenderung
nicht groesser wirken, sondern nur angenehmer zu lesen sein.
------------------------------------------------------------------
DER BEFUND, DER DIESE DATEI AUSLOEST
Die Detailseiten setzen `body { font-size: 17px }`. Praktisch jeder
Baustein bemisst sich darunter aber in `rem`: .9rem, .92rem, .94rem,
.98rem, .82rem. `rem` bezieht sich auf die Wurzel – und die
wurde nie gesetzt, steht also auf der Browservorgabe von 16 px.
Gemessen am 18.08.2026 (Apache-Container, 607 Textstellen, 12 Breiten):
Wurzel 16 px (nie gesetzt)
body 17 px
17 px erreichen 4,3 % der Textmasse
unter 16 px 84,2 % der Textmasse
haeufigste Lesegroesse 15,2 px
verschiedene Groessen 34
Jede krumme Zahl der Seiten ist damit erklaert:
14,72 = 0,92 × 16 · 15,04 = 0,94 × 16 · 15,68 = 0,98 × 16.
Am 24-Zoll-Schirm in 62 cm Abstand liegt 15,04 px bei 15,4
Bogenminuten Versalhoehe – unter der Lesbarkeitsschwelle von 16'
nach ISO 9241-303. Es ist kein Handy-, sondern ein Desktopproblem.
------------------------------------------------------------------
LADEREIHENFOLGE – DER WICHTIGSTE PUNKT DIESER DATEI
Diese Datei MUSS nach dem seitenlokalen `.
Und: Gleiche Dokumentreihenfolge genuegt nur bei GLEICHER
Spezifitaet. Wo das Inline-CSS zwei Klassen verwendet, muss diese
Datei das auch – `.help` verliert gegen `.field .help` und bleibt
still wirkungslos. Beim ersten Entwurf ist genau das passiert
(gemessen: 15,12 px statt der beabsichtigten 16,2 px).
================================================================== */
/* ------------------------------------------------------------------
1. DER EINE HEBEL
Ein Wert hebt die gesamte Lesetypografie, weil sich alles in rem
bemisst. 112,5 % von 16 px = 18 px, also +12,5 % Sehwinkel.
Damit erreicht die haeufigste Lesegroesse 17,1 px und liegt am
24-Zoll-Schirm erstmals ueber der Lesbarkeitsschwelle.
Prozent und nicht 18px: Wer im Browser eine groessere Grundschrift
eingestellt hat, behaelt sie relativ. Eine feste Pixelangabe wuerde
diese Einstellung ueberschreiben – bei dieser Zielgruppe der
schlechtestmoegliche Nebeneffekt.
------------------------------------------------------------------ */
html {
font-size: calc(112.5% * var(--kerolina-schriftskala, 1));
}
/* ------------------------------------------------------------------
1a. DIE DREI SCHRIFTSTUFEN (Benutzerwahl)
Ohne gesetztes Attribut ist die Skala 1, und calc(112.5% * 1)
ergibt exakt die 112,5 % von vorher – der Standardzustand aendert
sich nicht (nachgemessen ueber 5 Breiten, keine Abweichung).
Warum 1,08 / 1,16 und nicht 1,10 / 1,20, warum drei Stufen und
nicht vier, und welche Messwerte dahinterstehen:
.claude/docs/06-accessibility.md, Abschnitt 12.5
(„Die drei Schriftstufen").
Die beiden Hilfsfaktoren stehen als fertige Zahlen da und werden
NICHT zur Laufzeit dividiert: calc() kann das zwar, faellt in
aelteren Browsern aber still aus – und ein ausgefallenes
font-size mitten in einer clamp()-Kette ist eine zerbrochene
Ueberschrift. Wer eine Stufe aendert, rechnet beide Faktoren neu;
die Formeln stehen daneben.
------------------------------------------------------------------ */
:root {
--kerolina-schriftskala: 1;
--kerolina-anzeige: 1; /* Anzeigegroessen: halbes Mitwachsen.
(1 + (skala - 1) x 0,5) / skala */
--kerolina-fest: 1; /* gar kein Mitwachsen. 1 / skala */
}
html[data-schriftgroesse="gross"] {
--kerolina-schriftskala: 1.08;
--kerolina-anzeige: 0.96296; /* 1,04 / 1,08 */
--kerolina-fest: 0.92593; /* 1 / 1,08 */
}
html[data-schriftgroesse="sehr-gross"] {
--kerolina-schriftskala: 1.16;
--kerolina-anzeige: 0.93103; /* 1,08 / 1,16 */
--kerolina-fest: 0.86207; /* 1 / 1,16 */
}
/* ------------------------------------------------------------------
2. ANZEIGEGROESSEN EINFRIEREN
Nur Groessen, die im Befund bereits als richtig bewertet wurden.
Sie mitwachsen zu lassen verlaengert die Seite, ohne das Lesen zu
erleichtern – und laesst die Seite "aufgeblasen" wirken. Genau das
soll nicht passieren.
Die rem-Werte sind so gerechnet, dass der heutige Pixelwert exakt
erhalten bleibt: alter rem-Wert × 16 / 18.
Bewusst NICHT eingefroren: h3, legend, .lead, .route-kapitel und
die Etappentitel. Das sind Lesegroessen, keine Anzeigegroessen –
sie sollen wachsen.
------------------------------------------------------------------ */
.hero h1,
h1 {
/* war clamp(2rem, 4.6vw, 3.2rem) gegen 16px -> 32…51,2px
`.hero h1` und nicht nur `h1`: Das Inline-CSS setzt die
Hero-Ueberschrift mit Klasse und Element (Spezifitaet 0-1-1).
Ein blankes `h1` (0-0-1) verliert dagegen und laesst die
Ueberschrift auf 57,6 px wachsen – gemessen, nicht vermutet. */
font-size: clamp(calc(1.778rem * var(--kerolina-anzeige, 1)), 4.6vw,
calc(2.844rem * var(--kerolina-anzeige, 1)));
}
h2 {
/* war clamp(1.6rem, 3vw, 2.15rem) gegen 16px -> 25,6…34,4px */
font-size: clamp(calc(1.422rem * var(--kerolina-anzeige, 1)), 3vw,
calc(1.911rem * var(--kerolina-anzeige, 1)));
}
.paket-card__preis {
font-size: calc(1.511rem * var(--kerolina-anzeige, 1)); /* bleibt 27,2 px */
}
.hero__sub,
.site-footer__claim {
font-size: calc(1.111rem * var(--kerolina-anzeige, 1)); /* bleibt 20 px */
}
.hero__claim {
font-size: calc(1.067rem * var(--kerolina-anzeige, 1)); /* bleibt 19,2 px */
}
/* ------------------------------------------------------------------
3. WAS NACH DEM HEBEL NOCH ZU KLEIN IST
Nach Schritt 1 liegen einige Lesetexte weiter unter 16 px, weil ihr
Ausgangswert sehr klein war. Angehoben wird nur, was gelesen wird.
Auszeichnungszeilen und Marken bleiben klein – sie werden erkannt,
nicht gelesen (siehe Abschnitt 4).
Spezifitaet beachtet: `.field .help` steht im Inline-CSS mit zwei
Klassen. Eine einfache `.help`-Regel verliert dagegen.
------------------------------------------------------------------ */
.etappe__hotel {
font-size: .95rem; /* 13,76 -> 17,1 px · Hotelname ist Inhalt */
}
.field .help,
.field__help {
font-size: .9rem; /* 13,44 -> 16,2 px */
opacity: 1; /* Die 85 % Deckkraft schwaechten den ohnehin
kleinsten Text der Seite ein zweites Mal.
Die Hierarchie traegt die Groesse allein. */
}
.paket-card__pos {
font-size: .9rem; /* 14,08 -> 16,2 px */
}
.site-footer__legal {
font-size: .9rem; /* 13,60 -> 16,2 px */
}
.entwurf__hinweis,
.paketwahl__fussnote,
.paketwahl-card__preis,
.submit-note {
font-size: .89rem; /* 13,1…13,4 -> 16,0 px */
}
/* ------------------------------------------------------------------
4. AUSZEICHNUNGEN UND MARKEN
Diese Stellen bleiben absichtlich unter der Lesegroesse. Sie tragen
keine Satzinformation, sondern markieren. Angehoben wird nur so
weit, dass sie fuer ein 65-jaehriges Auge erkennbar werden –
nicht so weit, dass sie mitreden.
Kategoriemarken standen bei 11,52 px in Versalien und gesperrt.
Nach dem Hebel sind es 12,96 px; der Zielkorridor liegt bei
13,5–14 px.
------------------------------------------------------------------ */
.etappe__kat {
font-size: .765rem; /* 12,96 -> 13,8 px */
}
.hero__legende {
font-size: .7rem; /* 13,68 -> 12,6 px
Zurueckgenommen, nicht angehoben: Die Bildunterschrift am Hero
lief bei 13,68 px in eine zweite Zeile und brach rechtsbuendig
ueber dem Foto um. Sie benennt das Bild, sie wird nicht
gelesen. 12,6 px ist knapp ueber dem Ausgangswert von
12,16 px und bleibt einzeilig. */
}
/* ------------------------------------------------------------------
4a. NAVIGATION
Die Hauptnavigation traegt elf Punkte. Gemessen ohne Layer bricht
sie bereits heute von 1081 bis 1366 px in zwei Zeilen um und wird
erst ab 1440 px einzeilig.
Bei 16,2 px haette der Hebel diesen Umbruch auf 1440 px ausgedehnt –
also auf die haeufigste Desktopbreite. Das waere eine Regression
gewesen, und eine zweizeilige Kopfzeile widerspricht der Ruhe der
Seite.
0,82rem = 14,76 px reproduziert das heutige Verhalten exakt
(zweizeilig bis 1366, einzeilig ab 1440) und liegt dabei knapp
ueber dem Ausgangswert von 14,4 px. Navigationspunkte werden
ueberflogen, nicht gelesen – hier ist die Geometrie wichtiger
als der Sehwinkel.
OFFEN / DEM BETREIBER VORZULEGEN: Dass die Navigation zwischen
1081 und 1366 px zweizeilig laeuft, ist Bestand und nicht Folge
dieser Aenderung. Es zu beheben hiesse, die Navigationsstruktur
anzufassen – das ist eine Entscheidung des Betreibers
(10-agent-workflow.md, §5).
------------------------------------------------------------------ */
.main-nav a {
/* --kerolina-fest haelt die Navigation ueber alle Schriftstufen
hinweg auf exakt diesem Wert. Begruendung in Abschnitt 9.4. */
font-size: calc(.82rem * var(--kerolina-fest, 1));
}
.paket-card__empfehlung,
.paketwahl-card__badge {
font-size: .74rem; /* 11,9…12,6 -> 13,3 px */
}
/* ------------------------------------------------------------------
5. ZEILENLAENGE
Gemessen liefen bis zu 121 Zeichen pro Zeile, die Rechtszeile der
Fusszeile sogar 151. Ab etwa 90 Zeichen findet das Auge beim
Zeilenwechsel den naechsten Zeilenanfang nicht mehr zuverlaessig –
die haeufigste Ermuedungsursache auf langen Seiten.
Bewusst NUR auf echte Lesetexte. Tabellen, Navigation, Preiszeilen,
Formularelemente und Kartenraster bleiben unberuehrt; eine
Breitenbegrenzung wuerde dort das Raster zerschneiden.
`ch` und nicht `px`, damit die Grenze bei geaenderter Schriftgroesse
mitwandert.
------------------------------------------------------------------ */
#faq details p,
.field .help,
.field__help,
.fit-card__not,
.paket-nichtenthalten,
.paket-grundlage,
.paket-hinweis,
.entwurf__hinweis,
.submit-note,
.pa49-hinweis__fuss,
.site-footer__legal,
.legal-box p,
.submit-steps li {
max-width: 68ch;
}
/* .legal-box und .submit-steps sind nach der ersten Messrunde
dazugekommen: Sie liefen mit 98 bzw. 92 Zeichen weiter ueber der
Grenze, weil ihre Ausgangsbreite groesser war als die der uebrigen
Bloecke. Beides ist echter Lesetext an einer Stelle, an der genau
gelesen wird – Absicherungshinweis und die Schritte unmittelbar
vor dem Absenden. */
/* ------------------------------------------------------------------
6. ABSATZLUFT IM HAUPTLESETEXT
Die 61 Tagespunkte des Reiseverlaufs standen mit 7 px Abstand bei
24,3 px Zeilenhoehe – 0,29 Zeilen. Der Block liest sich dadurch als
Flaeche statt als Folge einzelner Gedanken.
Der Zielwert stammt aus dem Bestand: Die Machbarkeitsliste steht
bereits bei 0,79 Zeilen und ist der einzige Listenblock der Seite
ohne Beanstandung. 0,45 em liegt bewusst darunter – die Etappen
sind laenger, und zu viel Luft loest die Karte auf.
------------------------------------------------------------------ */
#route .etappe li + li,
#pakete .paket-card li + li {
margin-top: .45em;
}
#faq details p {
margin-top: .5em;
}
/* ------------------------------------------------------------------
7. AUSWAHLFELDER
KORREKTUR ZUM ERSTEN BEFUND: Die bedienbare Flaeche war nie zu
klein. `.radio-row label` und `.paketwahl-card` tragen bereits
`min-height: 48px`, die Checkbox-Labels sind durch ihren langen
Text ohnehin hoch. Gemessen wurde faelschlich das , nicht
das umschliessende