/* ════════════════════════════════════════════════════════════════
   TESSAR · Mobil-Optimierung + C3-Headline (global)
   Lädt als LETZTES Stylesheet auf allen Seiten und überschreibt gezielt.
   Ziele:
     0. C3 (08.06.2026): Headlines in Geist (Sans), Gewicht 600.
     1. Kein horizontaler Überlauf.
     2. Headlines werden NICHT auto-silbengetrennt (keine „Vor-/leistung").
     3. Footer kollabiert sauber; Sticky-CTA verdeckt die Rechts-Links nicht.
     4. Zu große Weißräume werden NUR mobil gekürzt (Desktop unberührt).
   ════════════════════════════════════════════════════════════════ */

/* ─── H1 · Headline-Schrift (Fraunces „entschärft") · alle Viewports ─
   Familie kommt über --font-display (= Fraunces). Gewicht 600 + ruhigere
   Achsen (kleinere opsz, weiche Terminals). Die Achsen greifen voll, sobald
   eine Fraunces-VARIABLE-woff2 selbst-gehostet ist; mit den statischen
   Schnitten rendert Fraunces 600 (etwas spitzer). Akzentwörter erben die
   Serif, nur Bordeaux eingefärbt. */
.hero-h1, .section-h2, .card-h, .cluster-h, .vor-h, .step-h,
.money-step-h, .netz-card-h, .faq-q-text, .stimme-quote,
.pricing-claim, .footer-claim, .segment-card-title,
.display, .pain-h, .proz-h, .recht-th {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.006em;
  font-variation-settings: "opsz" 36, "wght" 600, "SOFT" 60, "WONK" 0;
}
.hero-h1 em, .section-h2 em, .card-h em, .cluster-h em, .vor-h em,
.step-h em, .money-step-h em, .netz-card-h em, .stimme-quote em,
.pricing-claim em, .footer-claim em, .display em, em.accent, .accent {
  font-weight: 600;
}

/* ─── 1 · Globaler Überlauf-Riegel ──────────────────────────────── */
html, body {
  overflow-x: clip;
  max-width: 100%;
}
img, svg, video, canvas, iframe {
  max-width: 100%;
}

/* ─── 2 · Lange Wörter / Grid-Kinder schrumpfen lassen ──────────── */
.money-flow-grid > *, .money-step,
.cards-3 > *, .vor-list > *, .cluster-grid > *, .netz-grid > *,
.flow > *, .pain-grid > *, .proz-grid > *, .verg-grid > *,
.recht-grid > *, .rel-grid > *, .bb-row > *,
.segment-card, .kontakt-stage > *, .kontakt-form > *,
.stimme-grid > *, .pricing-stage > *, .footer-grid > *,
.pf-inner > *, .hero-cols > *, .section-head > *, .sect-head > * {
  min-width: 0;
}

/* Fließtext: saubere Silbentrennung (lang="de" → deutsche Trennregeln). */
p, li, blockquote, figcaption, dd, dt,
.hero-sub, .section-sub, .sect-intro,
.card-p, .money-step-p, .step-p,
.segment-card-body, .faq-a,
.vor-p, .pain-p, .proz-p,
.recht-p, .netz-card-p,
.kpi-num, .verg-num, .stimme-text, .mechanik-p {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Headlines: KEINE Auto-Silbentrennung — ganze Wörter umbrechen.
   (Verhindert „Vor-/leistung", „Stan-/dard", „Beglei-/tung" …)
   overflow-wrap bricht nur als Notnagel, wenn ein Wort wirklich
   breiter als die Zeile ist. */
h1, h2, h3, h4,
.hero-h1, .section-h2, .card-h, .money-step-h, .step-h,
.segment-card-title, .faq-q-text, .vor-h, .cluster-h,
.pain-h, .proz-h, .recht-th, .netz-card-h, .pricing-claim,
.stimme-quote, .footer-claim, .display,
.hero-promise, .hero-promise-text {
  hyphens: manual;
  -webkit-hyphens: manual;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

/* Mono-/Tabellenwerte nie trennen (Telefon, Beträge, IDs) */
.mono, [class*="-num"], .diagram, .scrub, .kontakt-side-row .v {
  hyphens: manual;
}

/* ─── Rechtsseiten · lange Komposita-Titel sauber umbrechen ───────
   Die globale Headline-Regel (overflow-wrap: break-word) bricht ein
   überlanges Einzelwort wie „Datenschutzerklärung" sonst MITTEN im
   Wort ohne Trennstrich um. Hier: kleinere Max-Größe + echte deutsche
   Silbentrennung MIT Trennstrich als Fallback. Lädt nach legal.css. */
.legal-wrap h1 {
  font-size: clamp(34px, 5.4vw, 52px);
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: balance;
}
.legal-wrap h2 {
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: normal;
  word-break: normal;
}


/* ════════════════════════════════════════════════════════════════
   ≤ 760px — Tablet-Hochkant & Handy
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {

  /* SEO-Seiten-Header: In-Page-Anker-Links ausblenden, Wortmarke + CTA
     bleiben. Verhindert den Überlauf der Navigationsleiste. */
  .ph-inner { gap: 14px; }
  .ph-nav { gap: 16px; }
  .ph-nav a:not(.ph-cta) { display: none; }
  .ph-cta {
    white-space: nowrap;
    padding: 9px 14px !important;
    font-size: 13px;
  }
  .ph-wordmark { font-size: 17px; letter-spacing: 0.16em; }

  .addr-inner { padding: 8px 16px; }
  .addr-meta { margin-left: 8px; }
  .legal-head { flex-wrap: wrap; gap: 8px 16px; }

  /* ── Weißräume mobil kürzen (Desktop bleibt 140px) ── */
  .section, .process, .pricing, .stimme, .faq, .segments {
    padding-top: 76px;
    padding-bottom: 76px;
  }
  .footer { padding-top: 64px; }
  .section-head { margin-bottom: 40px; }
  .leistungen-foot { margin-top: 36px; }

  /* Geld-Fluss: einspaltig + Verbindungslinie aus (schimmerte durch). */
  .money-flow-grid { grid-template-columns: 1fr !important; gap: 28px; }
  .money-flow-line { display: none; }
}


/* ════════════════════════════════════════════════════════════════
   ≤ 600px — Handy
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* Headline-Größen so, dass lange Komposita ohne Trennung passen. */
  .section-h2   { font-size: clamp(27px, 7.4vw, 36px); }
  .card-h       { font-size: 23px; }
  .cluster-h    { font-size: 22px; }
  .vor-h, .netz-card-h { font-size: 21px; }
  .step-h       { font-size: 22px; }
  .money-step-h { font-size: 20px; }
  .stimme-quote { font-size: clamp(24px, 6.6vw, 30px); }
  .pricing-claim{ font-size: clamp(23px, 6vw, 28px); }
  .faq-q-text   { font-size: clamp(19px, 5vw, 22px); }

  /* Weißräume noch etwas enger. */
  .section, .process, .pricing, .stimme, .faq, .segments {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .section-head { margin-bottom: 32px; }

  /* Berufsbilder-Tabelle */
  .bb-row { gap: 6px 12px; }

  /* Footer-Wortmarke „TESSAR" vollständig sichtbar halten — und mittig,
     da der JS-Auto-Fit hier per fester Größe überschrieben wird. */
  .footer-mark {
    font-size: clamp(52px, 17vw, 120px) !important;
    letter-spacing: 0.02em;
    text-align: center;
  }

  /* ── Footer-Grid: Claim volle Breite, Link-Spalten zweispaltig ──
     (Inline-Override im HTML wurde entfernt, daher greifen Media-Queries.) */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px 24px;
  }
  .footer-grid .footer-col:first-child { grid-column: 1 / -1; }

  /* Sticky-CTA dockt jetzt per JS über der Footer-Meta an (siehe index.html),
     daher nur noch etwas Grund-Abstand nötig. */
  .footer { padding-bottom: 40px; }
  .footer-meta { gap: 12px 20px; }

  /* Dekorative Riesen-Kapitelziffer kleiner halten */
  .section-numeral { font-size: clamp(96px, 30vw, 160px); }

  /* Großzügigere Touch-Flächen */
  .faq-q { padding-top: 22px; padding-bottom: 22px; }
}


/* ════════════════════════════════════════════════════════════════
   ≤ 420px — schmale Handys (iPhone SE / Mini)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 420px) {
  .sticky-cta { right: 16px; bottom: 16px; padding: 12px 16px; font-size: 12px; }
  .sticky-kapitel { left: 16px; bottom: 16px; max-width: 60vw; }
}