/* praxis-mobile.css — MUSS als letzte Stylesheet-Datei eingebunden werden.
   Grund: nb_unified_nav.css wird zuerst geladen; Regeln dort verlieren gegen
   nb_pages.css und nb_premium.css. Ein erster Versuch dort blieb wirkungslos
   (gemessen: .kb-title-xl blieb bei 48 px statt der gesetzten 29 px).

   Behebt zwei am 2026-09-08 gemessene Fehler:
   1. Lange deutsche Komposita in clamp(40px…64px) sprengten auf 320-430 px die
      Sektion, dehnten den Layout-Viewport und zogen die fixe Navigation mit —
      der Menue-Schalter rutschte aus dem Bild (Menue auf 4 Seiten unerreichbar).
   2. hyphens:auto trennte Display-Zeilen mitten im Wort ("Spezia-list:innen",
      "Kieferortho-paedie"). Bei grossen Schriftgraden ist das ein Gestaltungs-
      fehler; Trennung bleibt dem Fliesstext vorbehalten. */

/* Umbruch erlauben — aber ohne Trennstrich bei Display-Graden */
h1, h2, h3, h4,
[class*="__title"], [class*="-title"], [class*="__name"], .heading,
.hero-header, .h2-header {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}
/* Fliesstext darf trennen — dort hilft es der Lesbarkeit */
p, li, dd, figcaption, .kb-trio__num-body, .kb-split__body {
  overflow-wrap: break-word;
  hyphens: auto;
}

@media (max-width: 720px) {
  .nb-hero, .nb-hero--compact { padding-left: 22px; padding-right: 22px; }
  .kb-producer__body { padding-left: 0; }
  .kb-split > *, .kb-trio__grid > *, .kb-table__row > * { min-width: 0; }
}

/* Schriftskala fuer schmale Schirme. clamp() haelt sonst seinen Mindestwert,
   egal wie schmal es wird — 64 px auf einem 390-px-Schirm sind unlesbar. */
@media (max-width: 480px) {
  .kb-title-hero, .kb-hero__title, h1.kb-title-hero { font-size: clamp(30px, 8.2vw, 40px); line-height: 1.1; }
  .kb-title-xl, .kb-title-l,
  .kb-split__title, .kb-table__title, .kb-trio__title, .kb-producer__title, .kb-cta-wide__title {
    font-size: clamp(25px, 6.8vw, 33px); line-height: 1.16;
  }
  .nb-hero__title { font-size: clamp(28px, 8vw, 38px); line-height: 1.12; }
  .hero-header { font-size: clamp(30px, 8.5vw, 42px); line-height: 1.08; }
  .h2-header { font-size: clamp(24px, 6.6vw, 32px); line-height: 1.18; }
}
@media (max-width: 360px) {
  .kb-title-hero, .kb-hero__title, h1.kb-title-hero { font-size: clamp(27px, 8vw, 33px); }
  .hero-header { font-size: clamp(27px, 8.2vw, 34px); }
}

/* Startseite: .h2-wrapper-copy ist eine flex-row mit zwei nicht umbrechenden
   Kindern (Webflow-Erbe). Ab ~480 px sprengte sie das Dokument auf 612 px.
   Per Ausblend-Bisektion am 2026-09-08 als Verursacher bestimmt. */
@media (max-width: 900px) {
  .h2-wrapper-copy { flex-wrap: wrap; gap: 12px; padding-left: 22px; padding-right: 22px; }
  .h2-wrapper-copy > * { min-width: 0; max-width: 100%; }
}
/* Webflow-Slider: Spur darf den Rahmen nicht sprengen */
@media (max-width: 900px) {
  .slider.w-slider, .mask.w-slider-mask { max-width: 100%; }
  .w-slide { max-width: 100%; }
}

/* Kontakt-Sektion der Startseite: die zweite Webflow-Spalte beginnt bei 210 px
   und ist 356 px breit — zusammen 566 px auf einem 480-px-Schirm. Die
   Webflow-Spaltenregeln stapeln erst bei 767 px und greifen hier nicht.
   Gemessen am 2026-09-08 per Bisektion + Elementvermessung. */
@media (max-width: 900px) {
  .contact-section .w-row { display: block; width: 100%; margin-left: 0; margin-right: 0; }
  .contact-section [class*="w-col"] {
    width: 100%; max-width: 100%; left: auto; right: auto;
    padding-left: 0; padding-right: 0; float: none;
  }
  .contact-section .h2-wrapper-copy { width: 100%; max-width: 100%; }
}

/* Menue-Schalter fest an den sichtbaren Bereich binden.
   Begruendung: Die fixe Navigation folgt dem Layout-Viewport. Sobald irgendein
   Element diesen dehnt (auf der Startseite bei 480 px auf 566 px), wandert der
   Schalter mit hinaus — gemessen sass er bei 512..548 auf einem 480-px-Schirm.
   Statt jede einzelne Dehnungsquelle zu jagen, wird der Schalter direkt am
   Viewport verankert. Das haelt auch, wenn spaeter neue Inhalte dazukommen. */
@media (max-width: 860px) {
  .kb-nav__right {
    position: fixed;
    top: 14px;
    right: 16px;
    z-index: 1001;
  }
  .kb-nav__inner { max-width: 100%; }
}

/* .contact-section .text-wrapper ist eine flex-row, deren Kinder wegen des
   Flexbox-Standardwerts min-width:auto nicht schrumpfen: .h2-wrapper-copy sass
   bei l=210 mit 356 px Breite auf einem 480-px-Schirm (zusammen 566 px) und
   dehnte den Layout-Viewport, wodurch der Menue-Schalter hinauswanderte.
   Gemessen ueber die Elternkette am 2026-09-08. */
@media (max-width: 900px) {
  .contact-section .text-wrapper { flex-wrap: wrap; }
  .contact-section .text-wrapper > * { min-width: 0; flex: 1 1 100%; max-width: 100%; }
}