/* ============================================================
   responsive.css — Responsive-Feinschliff (Handy · iPad · große Bildschirme)
   Wird als LETZTES geladen und überschreibt gezielt base.css / polish.css.
   Künftige Anpassungen an Handy-/iPad-/Desktop-Darstellung bitte HIER pflegen.
   Angelegt: 2026-09-02
   ============================================================ */

/* ---------- 1. Kein horizontales Scrollen / Verrutschen (Handy) ---------- */
/* Fängt das ausgeblendete Off-Canvas-Menü (position:fixed, translateX) ab,
   das sonst ~17px horizontalen Überlauf erzeugt.
   'clip' klippt den Überlauf, ohne html zu einem zweiten Scroll-Container zu machen
   (hidden als Fallback für sehr alte Browser). */
html { overflow-x: hidden; }
@supports (overflow-x: clip) { html { overflow-x: clip; } }

/* Nichts darf jemals breiter als der Viewport werden. */
img, svg, video, canvas, iframe, table, pre { max-width: 100%; }

/* Hero-Grafik der Startseite: auf schmalen Screens nie breiter als der Container.
   Gleiche Spezifität wie '.home-light .home-hero-art', aber später geladen -> gewinnt.
   Behebt den Haupt-Überlauf auf dem Handy. */
@media (max-width: 1024px) {
  .home-light .home-hero-art,
  .home-hero-art {
    width: 100%;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---------- 2. iPad / Tablet: Breite wirklich nutzen ---------- */
/* Kartenraster fallen bislang schon ab 1024px auf 1 Spalte. Im Tablet-Bereich
   (ca. 600–1024px, also iPad hoch & quer) sind 2 Spalten deutlich besser. */
@media (min-width: 600px) and (max-width: 1024px) {
  .g2,
  .g3,
  .g4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}

/* ---------- 3. Flüssige Typografie: skaliert stufenlos mit der Bildschirmbreite ---------- */
/* clamp(min, ideal-per-vw, max): kein harter Sprung mehr an den Breakpoints,
   die Schrift wächst/schrumpft weich zwischen Handy und großem Monitor. */
.d-lg { font-size: clamp(2.25rem, 4.5vw, 4rem);  line-height: 1.1; }
.h-xl { font-size: clamp(2rem, 3.6vw, 3rem);     line-height: 1.14; }
.h-md { font-size: clamp(1.75rem, 2.4vw, 2rem);  line-height: 1.25; }

/* Flüssige Innenabstände: enge Ränder am Handy, großzügig am Desktop. */
.wrap,
.wrap-sm { padding-left: clamp(20px, 4vw, 32px); padding-right: clamp(20px, 4vw, 32px); }
.sec     { padding: clamp(48px, 7vw, 80px) 0; }
.sec-lg  { padding: clamp(64px, 10vw, 128px) 0; }

/* ---------- 4. Große Bildschirme: sanft mitwachsen ---------- */
/* Ab sehr breiten Monitoren darf der Inhalt etwas breiter werden,
   damit er nicht als schmale Säule in der Mitte „verloren" wirkt. */
@media (min-width: 1600px) {
  .wrap { max-width: 1440px; }
  .site-header-in,
  .nav-in,
  .ft-in,
  .ft-bottom { max-width: 1440px; }
}

/* ---------- 5. Sehr kleine Handys: Abstände/Buttons entspannen ---------- */
@media (max-width: 400px) {
  .btn-g, .btn-n, .btn-o { width: 100%; }          /* Buttons voll greifbar */
  .stat { padding: 24px 14px; }
}