/* ============================================================================
   KW RESPONSIVE-SICHERHEIT (projektweit, zentral)
   ----------------------------------------------------------------------------
   Eine zentrale Schutzschicht gegen die häufigsten Responsive-Probleme, damit
   ALLE Seiten auf Smartphone, iPad, Laptop und großem Monitor sauber sitzen –
   ohne jedes Modul einzeln anzufassen. Wird über main.js projektweit geladen.

   Einheitliche Breakpoints (Orientierung):
     - Smartphone:      bis  480px
     - Großes Handy:    bis  640px
     - Tablet/iPad:     bis  900px
     - Laptop:          bis 1280px
     - Desktop/groß:    ab  1281px
   ============================================================================ */

/* ---- 1) Globaler Overflow-Guard: NIE horizontales Scrollen --------------- */
html, body { max-width: 100%; overflow-x: hidden; }
*, *::before, *::after { min-width: 0; }              /* Flex/Grid-Kinder dürfen schrumpfen */

/* Medien nie breiter als der Container */
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }

/* Formular-Controls nie breiter als ihr Container (fängt breite Radios/Ranges,
   z. B. in segmentierten Schaltern .seg, ab) */
input, select, textarea, button { max-width: 100%; }
.seg { max-width: 100%; overflow: hidden; position: relative; }
.seg input[type="radio"], .seg input[type="checkbox"] { max-width: 100%; }
/* Visuell versteckte, absolut positionierte Radios/Checks nie über den Rand */
.seg input[style*="absolute"], .seg input { left: 0; }

/* ---- 2) Tabellen: horizontal scrollbar statt überlaufend ---------------- */
/* Container-Wrapper (per JS um breite Tabellen gelegt) */
.kw-tablewrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.kw-tablewrap > table { min-width: max-content; }     /* Tabelle behält Breite, scrollt */
/* Fallback: auch nackte Tabellen bekommen einen Scroll-Kontext */
table { max-width: 100%; }

/* ---- 3) Fluid-Typografie: große Überschriften überlaufen nicht ---------- */
/* Nutzt clamp(): skaliert zwischen Handy und Desktop stufenlos. */
:root {
  --fs-2xl: clamp(1.9rem, 6vw, 2.8rem);
  --fs-3xl: clamp(2.1rem, 7vw, 3.6rem);
  --fs-xl:  clamp(1.5rem, 4.5vw, 2rem);
}
h1, h2 { overflow-wrap: break-word; word-break: normal; hyphens: auto; }

/* Lange Wörter/URLs/Zahlen in Fließtext nicht überlaufen lassen */
p, li, dd, dt, .lead, .kwb-row__l, .kwb-check__l { overflow-wrap: break-word; }

/* ---- 4) Header / Navigation ockt sauber um ------------------------------ */
@media (max-width: 640px) {
  .nav { min-height: 60px; gap: .5rem; flex-wrap: wrap; }
  .brand { font-size: 1rem; }
  .brand__mark { width: 32px; height: 32px; }
  .nav__actions { gap: .5rem; flex-wrap: wrap; }
  .nav__actions .btn { padding: .5rem .9rem; font-size: .82rem; }
  /* „Zurück zu Tools" darf nicht rauslaufen */
  .nav__actions .btn { max-width: 100%; white-space: nowrap; }
}

/* ---- 5) Modul-Hero: Figur unter den Text auf kleinen Screens ------------ */
@media (max-width: 720px) {
  .modul-hero { flex-direction: column; }
  .modul-hero__figure { width: 100% !important; max-width: 100% !important; margin-top: 1rem; }
}

/* ---- 6) Eingabe-Raster: Spalten reduzieren sich sauber ------------------ */
/* Die meisten Raster nutzen auto-fit/minmax und sind ok; hier Sicherheitsnetz
   für feste Mehrspalter, die auf Tablet/Handy zu eng werden. */
@media (max-width: 640px) {
  .kwb-inputs { grid-template-columns: 1fr !important; }
  .zwbe-grid  { grid-template-columns: 1fr !important; }
  .zwbe-kond__row { grid-template-columns: repeat(2, 1fr) !important; }
  .zwbe-tags  { grid-template-columns: 1fr !important; }
}

/* ---- 7) Sticky-Elemente auf kleinen Screens nicht zu aufdringlich -------- */
@media (max-width: 640px) {
  .kwb-gesamt { position: static; }   /* sticky-Summe auf Handy normal im Fluss */
}

/* ---- 8) Container-Padding auf sehr kleinen Screens etwas knapper --------- */
@media (max-width: 480px) {
  .container { padding-inline: 1rem; }
}

/* ============================================================================
   9) TOUCH-OPTIMIERUNG – nur auf echten Touch-Geräten (coarse pointer)
   Vergrößert Tap-Ziele auf ~44px und hebt Mini-Text an, OHNE das Maus-/Desktop-
   Layout zu verändern. Greift auf Smartphone & Tablet.
   ============================================================================ */
@media (pointer: coarse) {
  /* Tap-Ziele: klickbare Elemente mind. 44px hoch, angenehm zu treffen */
  a.btn, button:not(.kw-stepper__btn):not(.lang-dd__item),
  select, summary, .zwbe-sens__chip, .kwb-check, .lang-dd__current {
    min-height: 44px;
  }
  /* Checkbox-/Auswahl-Zeilen komfortabel */
  .kwb-check { padding-top: .7rem; padding-bottom: .7rem; align-items: center; }
  .kwb-check input[type="checkbox"] { width: 22px; height: 22px; }

  /* Radios/Checkboxen in Labels etwas größer */
  label > input[type="checkbox"], label > input[type="radio"] { width: 20px; height: 20px; }

  /* Stepper-Buttons: als PAAR 44px (je 22px) sind ok, aber Trefferfläche
     seitlich verbreitern für den Daumen */
  .kw-stepper__btn { width: 2rem; }
  .kw-stepper { min-width: 2rem; }

  /* Navigations-/Kopf-Links großzügiger */
  .nav__links a, .lang-dd__item { padding-top: .6rem; padding-bottom: .6rem; }

  /* Mini-Text anheben: nichts unter ~13px auf Touch */
  .kwb-sub, .kwb-note, .zwbe-kond__hint, .kwb-badge, .zwbe-badge,
  .zwbe-disclaimer, .kwb-beleg, .zwbe-tab, small, .kw-hint,
  .zwbe-kond__lbl, .zwbe-sens__chip, .zwbe-sens__lbl, .kwb-optlabel,
  .badge, .kwctx-head__sub, .kwctx-kpi__label, .kwctx-gruppe__lbl,
  th, td, label, figcaption, .lang-dd__short {
    font-size: max(0.8rem, 13px);
  }
  /* Ausnahme: Info-„i"-Icon bleibt klein (ist ein Symbol, kein Lesetext) */
  .kw-tt { font-size: 11px; }
  /* Tabellen auf Touch etwas luftiger */
  .zwbe-tab th, .zwbe-tab td, .kwb-beleg th, .kwb-beleg td { padding-top: .5rem; padding-bottom: .5rem; }
  /* Tabellenköpfe lesbar halten (überschreibt modul-spezifische kleine th) */
  .zwbe-tab th, .kwb-beleg th, table th, table td { font-size: max(0.8rem, 13px); }

  /* Focus-/Aktiv-Feedback für Finger sichtbarer */
  a.btn:active, button:active, .zwbe-sens__chip:active, .kwb-check:active { transform: translateY(1px); }
}

/* Sehr kleine Handys: Basis leicht anheben, damit Fließtext nicht zu klein wirkt */
@media (max-width: 380px) {
  .kwb-sub, .kwb-note { line-height: 1.6; }
}