/* =============================================================
   typo.css — DIE EINZIGE QUELLE FÜR SCHRIFT AUF VALMARIS.DE
   =============================================================
   Angelegt 31.08.2026. Jede typografische Rolle ist hier genau
   einmal definiert: Familie, Größe, Zeilenhöhe, Laufweite,
   Gewicht, Versalien. Im Markup steht nur noch die Rolle.

   REGEL: Schrift wird NUR hier geändert. Keine text-*/leading-*/
   tracking-*/font-*-Utilities mehr an Textelementen, keine
   font-size in den <style>-Blöcken der einzelnen Seiten.

   Basis: html{font-size:120%} → 1rem = 19,2px (Desktop, gesetzt im <style> jeder Seite).
   Unter 640 px gilt html{font-size:106.25%} → 1rem = 17px (unten in dieser Datei):
   Lesedistanz am Handy ist kuerzer, 17px ist Apples Systemgroesse, und Formular-
   felder ab 16px loesen in iOS keinen Auto-Zoom aus. Entscheidung 07.09.2026.
   Breakpoints wie Tailwind: sm 640px, lg 1024px

   Werte übernommen aus der Messung des Ist-Zustands vom
   31.08.2026 (gerenderte computed styles, alle 12 Seiten).
   ============================================================= */

/* ---------- Grundlage ---------- */
body {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.625;
}

/* ---------- Rolle: Seitentitel (Hero) ---------- */
.t-display {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: 3rem;
  line-height: .98;
  letter-spacing: -.01em;
}
@media (min-width: 640px) { .t-display { font-size: 3.75rem } }
@media (min-width: 1024px) { .t-display { font-size: 4.5rem } }

/* ---------- Rolle: Seitentitel Unterseiten ---------- */
.t-h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: 3rem;
  line-height: 1.05;
  letter-spacing: -.01em;
}
@media (min-width: 640px) { .t-h1 { font-size: 3.75rem } }

/* ---------- Rolle: Sektionsüberschrift ---------- */
.t-h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: 1.875rem;
  line-height: 1.2;
  letter-spacing: -.01em;
}
@media (min-width: 640px) { .t-h2 { font-size: 2.25rem; line-height: 1.111 } }

/* ---------- Rolle: Lead / Vorspann (Serif) ---------- */
.t-lead {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -.01em;
}
@media (min-width: 640px) { .t-lead { font-size: 1.875rem } }

/* ---------- Rolle: Karten- und Personentitel ---------- */
.t-h3 {
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.3;
}
@media (min-width: 640px) { .t-h3 { font-size: 1.5rem } }

/* ---------- Rolle: Fließtext ---------- */
.t-body {
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.625;
}

/* ---------- Rolle: Fließtext groß (Hero-Subline) ---------- */
.t-body-lg {
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.625;
}
@media (min-width: 640px) { .t-body-lg { font-size: 1.25rem } }

/* ---------- Rolle: Kleintext (Navigation, Fußzeile, Hinweise) ---------- */
.t-small {
  font-weight: 400;
  font-size: .875rem;
  line-height: 1.5;
}

/* ---------- Rolle: Label (Versalien, gesperrt) ---------- */
.t-label {
  font-weight: 500;
  font-size: .75rem;
  line-height: 1.333;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* Kennzahlen-Band: die Labels stehen ueberall in schmalen Zellen -- auf dem
   Handy in einer halben Bildschirmbreite, ab 1024 px in einem Fuenftel des
   Containers (rund 101 px Textbreite bei 1024 px). Darum durchgehend kleiner
   und enger gesperrt statt nur unter 1024 px (Stand bis 09.09.: 14,4 px
   Versalien, "M&A TRANSAKTIONEN" lief 07.09.2026 ueber den Rand).
   min-width:0, weil die Labels Flex-Kinder sind: sonst bestimmt das laengste
   Wort die Mindestbreite der Zelle und sprengt das Raster (EN "Years of
   Entrepreneurial Experience" lief 10.09.2026 bei 1024 px 20 px ueber).
   overflow-wrap als letzte Reserve: greift nur, wenn ein einzelnes Wort auch
   getrennt nicht in die Zelle passt. */
.statcell .t-label {
  min-width: 0;
  font-size: .7rem;
  letter-spacing: .10em;
  overflow-wrap: anywhere;
}
/* Zwischen 1024 und 1279 px stehen fuenf Zellen in einem 1024-1279 px breiten
   Band: rund 133 px Textbreite. Das laengste Wort der EN-Fassung
   ("ENTREPRENEURIAL") braucht dort 0,65 rem, sonst bricht es mitten im Wort --
   Englisch wird von Chrome nicht getrennt (geprueft 10.09.2026). */
@media (min-width: 1024px) and (max-width: 1279px) {
  .statcell .t-label { font-size: .65rem; letter-spacing: .08em; }
}

/* ---------- Rolle: Kennzahl (Zähler im Hero) ---------- */
.t-stat {
  font-weight: 400;
  font-size: 2.25rem;
  letter-spacing: -.01em;
}
@media (min-width: 1024px) { .t-stat { font-size: 3rem } }

/* ---------- Satzbreite (Zeilenlänge) ----------
   90ch = 968 px bei 19,2 px Hanken Grotesk (1ch = 10,76 px, gemessen 07.09.2026
   in Chrome bei 1440 px), das sind rund 95–100 Zeichen je Zeile. Entscheidung
   Daniel 07.09.2026: breiter als die Buchbreite von 62ch (667 px, Stand 01.09.).
   Vorher, ohne Limit, liefen 99 Absätze 1000–1380 px breit (120–170 Zeichen).
   Der 1200-px-Container (layout.css, 1142 px nutzbar) bleibt die Kante. */
p, li, .t-body, .t-body-lg,
p.max-w-2xl, p.max-w-3xl, p.max-w-4xl, p.max-w-5xl, p.max-w-6xl, p.max-w-7xl { max-width: 90ch; }
.text-center p, .text-center .t-body, .text-center .t-body-lg, p.text-center { margin-inline: auto; }

/* ---------- Silbentrennung im Fliesstext auf schmalen Spalten ----------
   Bei 19,2 px Fliesstext bleiben in Karten auf dem Handy nur ~280 px Zeile.
   Gilt bis 1279 px: auch auf Tablets stehen die Raster (Ansatz 01/02/03,
   Team-Bios, Kacheln) in 150-260 px schmalen Spalten, in denen lange Woerter
   sonst aus der Spalte laufen (gemessen 10.09.2026 bei 768 und 1024 px).
   Ohne Trennung stehen Woerter wie "klassische" oder "ueberzeugenden" allein in
   der Zeile (gesehen 07.09.2026). Der Browser trennt nach der Sprache in
   <html lang>: iOS Safari und Chrome koennen Deutsch und Englisch. */
@media (max-width: 1279px) {
  p, li { hyphens: auto; -webkit-hyphens: auto;
          hyphenate-limit-chars: 8 4 3; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 3; }
}

/* ---------- Silbentrennung in Ueberschriften und Labels ----------
   Gilt auf ALLEN Breiten, nicht nur auf dem Handy: deutsche Komposita
   ("Unternehmensfuehrung", "Datenschutzerklaerung") sind laenger als eine
   schmale Spalte, etwa die fuenf Phasen-Spalten (je rund 180 px bei 1440 px).
   Ohne Trennung laufen sie aus der Spalte heraus (gesehen 10.09.2026).
   Zurueckhaltender als im Fliesstext: erst ab 12 Zeichen, mindestens 6 davor
   und 4 danach, damit in grosser Type keine Schnipsel entstehen. Wo das Wort
   in die Zeile passt, trennt der Browser ohnehin nicht.
   Ersetzt die frueher einzeln gesetzten &shy; im Markup -- Regel statt
   Einzelfall (Phasen-Titel, Datenschutzerklaerung, Unternehmensnachfolge,
   entrepreneurship, M&A Transaktionen, Unternehmererfahrung). */
h1, h2, h3, .t-display, .t-h1, .t-h2, .t-h3, .t-lead, .t-label {
  hyphens: auto; -webkit-hyphens: auto;
  hyphenate-limit-chars: 12 6 4; -webkit-hyphenate-limit-before: 6; -webkit-hyphenate-limit-after: 4;
  /* Letzte Reserve: greift nur, wenn ein Wort auch getrennt nicht in die Spalte
     passt (EN "Entrepreneurial" in den 149 px schmalen Ansatz-Spalten bei 768 px,
     gemessen 10.09.2026). Ohne sie laeuft das Wort in die Nachbarspalte. */
  overflow-wrap: break-word;
}

/* ---------- Basis auf dem Handy ----------
   Ueberschreibt html{font-size:120%} aus dem <style>-Block der Seiten. Alle
   rem-Groessen (Rollen, Karten, Abstaende) schrumpfen damit um rund 11 %. */
@media (max-width: 639px) {
  html:root { font-size: 106.25%; }
}