/* ===========================================================================
   typografie.css — Benker WP-Theme
   HANDGESCHRIEBEN. Eigene Datei, damit eine Neuextraktion von components.css
   diese Regeln nicht ueberschreibt. Wird NACH components.css geladen und
   uebersteuert dort gesetzte Breiten gezielt.

   PROJEKTREGEL (Typografie): Die letzte Zeile eines Textblocks darf nie
   weniger als drei Woerter haben (keine Waisenzeilen). Tritt das auf, wird der
   Textbereich VERBREITERT (max-width erhoehen), nicht der Text gekuerzt.
   Diese Datei sammelt genau solche Breiten-Korrekturen.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   HERO-UEBERSCHRIFTEN: eine Groesse fuer alle Seiten (22.07.2026)

   BEFUND: Auf dem Handy waren die Hero-Ueberschriften je nach Seite
   unterschiedlich gross. Nachhaltigkeit zeigte rund 32px, Ueber uns rund 48px.
   Zusaetzlich brach auf Ueber uns ein Wort mitten durch ("Familiengefueh /
   rt.").

   URSACHE: components.css ist aus dem alten Astro-Build uebernommen. Dort hatte
   JEDE Seite ihr eigenes, gekapseltes Stylesheet. Einige Hero-Komponenten
   brachten eine mitwachsende Schriftgroesse mit
   (font-size: clamp(2rem, 8vw, 48px)), andere nicht — dort blieb es bei den
   festen 48px aus .heading-xl. Beim Zusammenfuehren in EIN Stylesheet ist diese
   Ungleichheit mitgewandert, ohne aufzufallen: Auf dem Desktop sehen beide
   Varianten identisch aus, der Unterschied zeigt sich erst auf schmalen
   Bildschirmen.

   LOESUNG: Die mitwachsende Groesse gehoert nicht in einzelne Komponenten,
   sondern in die gemeinsame Textklasse. Ab hier gilt sie fuer JEDE
   Hero-Ueberschrift, auch fuer spaeter hinzukommende Seiten. Die Werte
   entsprechen genau dem, was die bereits korrekten Komponenten mitbrachten,
   der Desktop-Auftritt aendert sich also nicht.

   ZUSAETZLICH zum Wortbruch: In Ueberschriften wird NICHT getrennt.

   Zwischenstand am selben Tag: Gegen den harten Umbruch mitten im Wort
   ("Familiengefueh / rt.") stand hier kurzzeitig `hyphens: auto`. Das loeste
   zwar den Bruch ohne Trennstrich, trennte dafuer aber Woerter mit Trennstrich
   ("ei-genen"). In einer Ueberschrift ist beides falsch.

   Jetzt gilt fuer alle Ueberschriften: keine Silbentrennung, kein Bruch im
   Wort. Umbrochen wird nur an Leerzeichen. Der urspruengliche Ueberlauf, gegen
   den `overflow-wrap: break-word` einmal eingebaut wurde, kann nicht mehr
   auftreten, weil die Schriftgroesse jetzt mitwaechst (clamp oben) statt bei
   48px festzustehen.
   --------------------------------------------------------------------------- */
.heading-xl {
  font-size: clamp(2rem, 8vw, var(--fs-heading-xl));
}

.heading-xl,
.heading-l,
.heading-m,
.heading-s,
.heading-xs,
h1,
h2,
h3,
h4 {
  /* manual = trennt nur an weichen Trennstrichen (­), die redaktionell
     gesetzt werden koennen. Automatisch wird nicht getrennt. */
  hyphens: manual;
  -webkit-hyphens: manual;
  /* Kein Bruch mitten im Wort. */
  overflow-wrap: normal;
  word-break: normal;
  /* Verteilt die Zeilen gleichmaessiger und vermeidet einzelne Woerter in der
     letzten Zeile. */
  text-wrap: pretty;
}

/* ---------------------------------------------------------------------------
   DREI-WOERTER-REGEL, ZENTRAL (23.07.2026)

   PROJEKTREGEL: Die letzte Zeile eines Textblocks darf nie weniger als drei
   Woerter haben. Tritt das auf, wird der Textbereich VERBREITERT, nicht der
   Text gekuerzt.

   BISHER FALSCH GEMACHT: Die Regel wurde punktuell angewendet — auf
   Ueberschriften und dann jeweils dort, wo gerade gearbeitet wurde. Damit galt
   sie faktisch nur auf einzelnen Seiten, und an jeder neuen Stelle tauchte das
   Problem erneut auf.

   AB HIER GILT SIE FUER ALLE FLIESSTEXTE. `text-wrap: pretty` weist den Browser
   an, die letzten Zeilen eines Absatzes auszugleichen, statt ein einzelnes Wort
   hinunterzuschieben. Das ersetzt keine gute Textbreite, aber es faengt den
   Grossteil der Faelle ab, ohne dass jemand daran denken muss.

   Wo es trotzdem auftritt, ist die Textspalte zu schmal — dann dort die
   max-width erhoehen (siehe .khero__lead weiter unten).
   --------------------------------------------------------------------------- */
p,
li,
dd,
dt,
figcaption,
blockquote,
summary,
label {
  text-wrap: pretty;
}

/* ---------------------------------------------------------------------------
   Hero mit Bild daneben: Textspalte verbreitert (23.07.2026)

   .khero__lead stand auf 488px. Bei dieser Breite blieb in der Unterzeile
   regelmaessig ein einzelnes Wort in der letzten Zeile stehen. Nach der
   Projektregel wird verbreitert statt gekuerzt: 488 -> 560px. Die Spalte hat
   den Platz, das Bild daneben wird dadurch nicht kleiner.
   --------------------------------------------------------------------------- */
.khero__lead {
  max-width: 560px;
}

/* Startseiten-Hero: Textspalte 536px -> 620px. Mit der verfeinerten Unterzeile
   (22.07.2026) brach sonst die letzte Zeile mit zu wenigen Woertern um. */
.hero__content {
  max-width: 620px;
}

/* Ueber-uns: Lead-Spalte 360px -> 420px, gleicher Grund. Die Titel-Spalte
   daneben (520px) bleibt unangetastet; beide zusammen bleiben im content-band. */
@media (min-width: 1024px) {
  .ueberuns__lead {
    flex: 0 1 420px;
  }
}