/* ==========================================================================
   Typo-System (Version 1.1)

   Eine feste Skala statt vieler Einzelgrössen. Jede Überschrift und jeder
   Text der Website gehört zu genau einer Stufe; die Stufen skalieren fliessend
   zwischen Handy und Desktop (clamp). Lädt nach style.css und blocks.css und
   ordnet die Bausteine den Stufen zu.

   Stufe     Schrift              Desktop → Handy   Zeilenabstand
   Display   Phudu 700, versal    150 → 60 px       0.88
   H1        Phudu 700, versal     72 → 40 px       0.95
   H2        Phudu 700, versal     52 → 36 px       1.0
   H3        Phudu 700, versal     32 → 24 px       1.05
   H4        Phudu 700, versal     24 → 20 px       1.1
   Kicker    Phudu 500, versal     14 px, gesperrt  1.2
   Lead      Golos 400             20 → 18 px       1.5
   Text      Golos 400             17 → 16 px       1.65
   Klein     Golos 400             14 px            1.5
   ========================================================================== */

:root {
	--at-fs-display: clamp(60px, 10.4vw, 150px);
	--at-fs-h1: clamp(40px, 5vw, 72px);
	--at-fs-h2: clamp(36px, 3.6vw, 52px);
	--at-fs-h3: clamp(24px, 2.2vw, 32px);
	--at-fs-h4: clamp(20px, 1.67vw, 24px);
	--at-fs-kicker: 14px;
	--at-fs-lead: clamp(18px, 1.39vw, 20px);
	--at-fs-text: 17px;
	--at-fs-small: 14px;
	--at-ls-caps: .01em;
	--at-ls-kicker: .14em;
	--at-text-max: 68ch;
}
@media (max-width: 767px) {
	:root { --at-fs-text: 16px; }
}

/* ---------------------------------------------------------------- Grundtext */
body { font-size: var(--at-fs-text); line-height: 1.65; }
p { margin-bottom: 1em; }
strong, b { font-weight: 700; } /* echte Golos 700, keine erzeugte Fettung */
.at-rich p, .at-rich ul, .at-rich ol, .at-cta__box .at-rich p { margin-bottom: 1em; }
.at-rich p, .at-rich li { max-width: var(--at-text-max); }
.at-check span, .at-rich--check ul li, .at-termine__text { font-size: var(--at-fs-text); line-height: 1.55; }
.at-check li + li, .at-rich--check ul li + li { margin-top: 6px; }

/* ---------------------------------------------------------------- Allgemeine Stufen (Bausteine unten überschreiben gezielt) */
h1, .at-h1 { font-size: var(--at-fs-h1); line-height: .95; letter-spacing: var(--at-ls-caps); }
h2, .at-h2 { font-size: var(--at-fs-h2); line-height: 1; letter-spacing: var(--at-ls-caps); }
h3, .at-h3, .at-h4 { font-size: var(--at-fs-h3); line-height: 1.05; letter-spacing: var(--at-ls-caps); }
h4, .at-h5 { font-size: var(--at-fs-h4); line-height: 1.1; letter-spacing: var(--at-ls-caps); }

/* ---------------------------------------------------------------- Display */
.at-hero__title {
	font-size: var(--at-fs-display); line-height: .88; letter-spacing: -.005em;
}

/* ---------------------------------------------------------------- H1: Seitentitel */
.at-bildkopf__title, .at-kopf__title, .at-galkopf__title {
	font-size: var(--at-fs-h1); line-height: .95; letter-spacing: var(--at-ls-caps);
}

/* ---------------------------------------------------------------- H2: Abschnittstitel */
.at-bildtext__title, .at-bildbox__title, .at-termine__title, .at-lenken__title,
.at-akk__title, .at-einbindung__title, .at-team__title, .at-standorte__title,
.at-verlauf__title, .at-recht__title, .at-cta__title,
.at-team__head .at-h1, .at-standorte__head .at-h1, .at-footer__claim .at-h2 {
	font-size: var(--at-fs-h2); line-height: 1; letter-spacing: var(--at-ls-caps);
}

/* ---------------------------------------------------------------- H3: Unterabschnitte, Boxen */
.at-band__title, .at-pt__ort, .at-termine__ort, .at-fsttermine__title,
.at-akk--weiss .at-akk__title, .at-recht--gross .at-recht__sub, .at-standort__name,
.at-footer__claim .at-h4, .at-akk__note .at-h5, .at-lenken__klasse {
	font-size: var(--at-fs-h3); line-height: 1.05; letter-spacing: var(--at-ls-caps);
}

/* ---------------------------------------------------------------- H4: Karten, Listen, Personen */
.at-tl__title, .at-kl__head, .at-person__name, .at-recht__sub, .at-footer__col h5,
.at-acc__title, .at-acc--klein .at-acc__title, .at-pt__title, .at-chat__title, .at-kl__sub {
	font-size: var(--at-fs-h4); line-height: 1.1; letter-spacing: var(--at-ls-caps);
}
.at-kl__alter .at-kl__head { font-size: var(--at-fs-h4); }

/* ---------------------------------------------------------------- Kicker / Labels */
h6, .at-h6, .at-kl__label, .at-tl__wd, .at-pt__day, .at-pt__kicker {
	font-size: var(--at-fs-kicker); font-weight: 500; line-height: 1.2; letter-spacing: var(--at-ls-kicker);
}

/* ---------------------------------------------------------------- Lead (Einleitung unter Titeln) */
.at-kopf__text, .at-band__text, .at-einbindung__text, .at-team__head .at-rich, .at-standorte__head .at-rich {
	font-size: var(--at-fs-lead); line-height: 1.5;
}

/* ---------------------------------------------------------------- Klein */
.at-footer__col p, .at-footer__col li, .at-footer__consent, .at-chat__text,
.at-tl__sub, .at-tl__details, .at-kl__val small, .at-kl__text {
	font-size: var(--at-fs-small); line-height: 1.5;
}
.at-footer__col p, .at-footer__col li { font-size: 15px; line-height: 1.6; }

/* ---------------------------------------------------------------- Schaltflächen: eine Grösse */
.at-btn, .at-band__btn { font-size: 15px; font-weight: 500; line-height: 1.1; letter-spacing: .12em; }

/* ---------------------------------------------------------------- Zahlen in Terminen und Altersangaben */
.at-tl__dm, .at-kl__val strong { font-size: clamp(26px, 2.2vw, 32px); line-height: 1; font-variant-numeric: tabular-nums; }
.at-kl__code { font-size: clamp(44px, 3.9vw, 56px); }

/* Titel mit festen Breiten aus der alten Fassung: Breite an die neue Grösse anpassen. */
.at-lenken__title { max-width: none; }
.at-lenken__head { width: auto; }

/* Einleitung unter dem Titel bleibt in der Überschriftenschrift (Phudu, versal), Stufe H4. */
.at-bildtext__lead { font-size: var(--at-fs-h4); line-height: 1.15; letter-spacing: var(--at-ls-caps); margin: 0; }

/* „Bild neben Text“: eigene Titelgrösse fürs Handy aus dem Feld „Titel am Handy“ bleibt möglich. */
@media (max-width: 767px) {
	.at-bildtext__title { font-size: var(--at-title-m, var(--at-fs-h2)); }
}
