/* =========================================================================
   MOBILE POLISH – global safety-net stylesheet
   Loaded LAST on every page. Only adds defensive rules; keeps desktop intact.
   Breakpoints: <=1024 (tablet), <=760 (small tablet / large phone), <=480 (phone)
   ========================================================================= */

/* ---- 1. Universelle Basis-Absicherung (alle Viewports) ---- */
html, body {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}
img, svg, video, iframe, canvas {
  max-width: 100%;
  height: auto;
}
iframe { display: block; }
/* Lange Wörter, Links, Codeblöcke: brechen statt überlaufen */
p, li, dd, dt, blockquote, figcaption,
h1, h2, h3, h4, h5, h6,
.wwm-hero__title, .wwm-fc__headline,
a, span, small, strong, em, label {
  overflow-wrap: anywhere;
  word-break: normal;
}
/* Tabellen und pre/code sollen bei Überbreite scrollen können */
table { display: block; overflow-x: auto; max-width: 100%; }
pre, code { overflow-x: auto; white-space: pre-wrap; word-break: break-word; }

/* Touch-Target Mindestgröße */
a, button, .btn, [role="button"] {
  touch-action: manipulation;
}

/* ---- 2. Tablet (<=1024px) ---- */
@media (max-width: 1024px) {
  :root {
    --container: min(100%, 92vw);
  }
  section { padding-left: clamp(1rem, 4vw, 2rem); padding-right: clamp(1rem, 4vw, 2rem); }
}

/* ---- 3. Small tablet / Phablet (<=760px) ---- */
@media (max-width: 760px) {
  :root {
    --container: min(100%, 92vw);
    --gutter: clamp(1rem, 5vw, 1.5rem);
  }

  /* Container / Sections weniger horizontales Polster verbraten */
  .container, .nav__inner, .footer__inner {
    width: 92% !important;
    max-width: 92% !important;
  }
  section { padding-left: 0; padding-right: 0; }

  /* Buttons: volle Breite bei Bedarf, echte Touch-Höhe */
  .btn, .wwm-fc__btn, .cta, .nav__cta, .mobile-menu__cta,
  a.button, button {
    min-height: 44px;
  }

  /* Große Headline-Klassen etwas zähmen (nur wenn Original fixe Größen setzt) */
  h1 { font-size: clamp(2rem, 8.5vw, 3rem) !important; line-height: 1.1; }
  h2 { font-size: clamp(1.6rem, 6.5vw, 2.4rem) !important; line-height: 1.15; }
  h3 { font-size: clamp(1.25rem, 5vw, 1.7rem) !important; line-height: 1.25; }

  /* Bilder in Sektionen sauber zentrieren */
  figure img, .media img { margin-left: auto; margin-right: auto; }

  /* Mehrspaltige Grids auf 1 Spalte kollabieren (Fallback für harte 2/3-Cols) */
  .grid-2, .grid-3, .grid-4,
  .two-col, .three-col,
  .cards-grid, .card-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* Nav: Burger sicher anzeigen, Desktop-Links verstecken (falls Seiten-CSS
     das nicht schon macht) */
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex !important; }

  /* Footer: klare Spalten untereinander */
  .footer__cols, .footer__grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
  }

  /* Grosse Hero-Blöcke: sinnvolle Mindesthöhe auf Mobile, damit das Bild
     wirklich als Bild wirkt und nicht in einen schmalen Streifen kollabiert */
  .wwm-hero, .cw__hero {
    min-height: auto;
  }
  .hero {
    min-height: 92svh;
  }

  /* Formularfelder: nie kleiner als 16px, sonst Zoom-Trigger auf iOS */
  input, textarea, select {
    font-size: 16px !important;
    max-width: 100%;
  }

  /* Fixed / sticky Elemente auf Mobile entschärfen wenn sie kollidieren */
  .scroll-rail { display: none !important; }
}

/* ---- 4. Phone (<=480px) ---- */
@media (max-width: 480px) {
  :root {
    --container: 94%;
    --gutter: 1rem;
  }
  .container, .nav__inner, .footer__inner {
    width: 94% !important;
    max-width: 94% !important;
  }
  section { padding-top: clamp(2.5rem, 10vw, 4rem); padding-bottom: clamp(2.5rem, 10vw, 4rem); }

  h1 { font-size: clamp(1.85rem, 9vw, 2.4rem) !important; }
  h2 { font-size: clamp(1.5rem, 7vw, 2rem) !important; }
  h3 { font-size: clamp(1.15rem, 5.5vw, 1.5rem) !important; }

  /* Buttons: volle Breite wenn allein in einer Zeile */
  .wwm-fc__btn, .hero__cta, .cta--primary, .btn--wide,
  .wwm-call__cta, .wissen__cta, .erfahrungen__cta {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
    text-align: center;
  }

  /* Mobile Menu Overlay auf voller Höhe / voller Breite */
  .mobile-menu { padding: clamp(4rem, 15vh, 6rem) 1.25rem 2rem; }
  .mobile-menu__link { font-size: clamp(1.5rem, 7vw, 2rem); }
}

/* ---- 5. Seiten-spezifische Feinkorrekturen ---- */

/* wer-wir-sind: die "Hype-Wolke" (dekorativ) darf nicht seitlich überlaufen */
@media (max-width: 760px) {
  .hype, .hype__stage {
    overflow: hidden !important;
  }
  .hype__frag {
    font-size: clamp(0.9rem, 4vw, 1.4rem) !important;
  }
}

/* Home: Marquee-Strip Text-Größe reduzieren */
@media (max-width: 480px) {
  .strip__item { font-size: 0.85rem !important; }
  .strip__track { animation-duration: 40s !important; }
}

/* wissen-Liste: bei sehr schmal, Nummer inline vor Titel */
@media (max-width: 480px) {
  .wissen__list__item,
  .wissen-list__item {
    grid-template-columns: auto 1fr !important;
    column-gap: 0.75rem !important;
  }
}

/* =========================================================================
   TOUCH TARGETS & TAP-SPACING (WCAG 2.5.5 / 2.5.8)
   Ziel: alles Interaktive >= 44x44 px, min. 8 px Abstand zwischen Targets.
   ========================================================================= */

/* --- Immer aktiv --- */
a, button, .btn, .cta, [role="button"], input[type="button"], input[type="submit"], input[type="reset"] {
  touch-action: manipulation;
}

/* Fokus-Ring: sichtbar, aber dezent (Tastatur + Screenreader) */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible,
[role="button"]:focus-visible, .nav__burger:focus-visible {
  outline: 2px solid #CDA04A;
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Mobile & Tablet (<=1024px): großzügige Tap-Ziele --- */
@media (max-width: 1024px) {

  /* Alle Buttons und Button-artigen Links: mind. 44x44 px */
  button,
  .btn, .cta, .nav__cta, .mobile-menu__cta,
  .wwm-fc__btn, .hero__cta, .cta--primary, .cta--secondary,
  a.button, a[role="button"], [role="button"] {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: max(0.65rem, env(safe-area-inset-top, 0));
    padding-bottom: 0.65rem;
    padding-left: clamp(1rem, 4vw, 1.4rem);
    padding-right: clamp(1rem, 4vw, 1.4rem);
    line-height: 1.15;
  }

  /* Icon-Buttons und Burger: quadratisches Tap-Feld */
  .nav__burger,
  .mobile-menu__close,
  .icon-btn, button[aria-label]:not(.btn):not(.cta) {
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Nav-Links: höheres Tap-Feld ohne die Optik zu sprengen */
  .nav__link,
  .mobile-menu__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }

  /* Mobile-Menu Links vertikal luftig */
  .mobile-menu__link + .mobile-menu__link { margin-top: 0.75rem; }

  /* Footer-Links: klare vertikale Trennung */
  .footer a, .footer__link, .footer__nav a,
  ul.footer__list li a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 6px 2px;
  }
  .footer ul { padding-left: 0; }
  .footer li + li { margin-top: 0.35rem; }

  /* Inline-Textlinks in Absätzen: gut auseinander tippen */
  p a, li a, blockquote a {
    padding: 2px 3px;
    margin: -2px -3px;
    border-radius: 3px;
  }

  /* Sozial-Icons und Aufzählungen mit Links: min. 8px Zwischenraum */
  .socials a, .social-links a, .footer__socials a,
  .tags a, .chip, .pill {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 4px;
  }

  /* Formular-Inputs: bequeme Tap-Höhe */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea, select {
    min-height: 44px;
    padding: 0.7rem 0.9rem;
  }
  /* Checkboxen / Radios groß genug */
  input[type="checkbox"], input[type="radio"] {
    min-width: 22px;
    min-height: 22px;
  }
  label { padding: 4px 0; display: inline-flex; align-items: center; gap: 0.6rem; }

  /* Segmentierte Tab-Leisten (z. B. .wwm-fc__opt) */
  .wwm-fc__opt, .tab, .tabs button, [role="tab"] {
    min-height: 44px;
    padding: 0.7rem 1rem;
  }

  /* Karten, die als Link fungieren: ganzes Feld tappbar */
  a.card, .card--link, .wissen__item a, .erfahrungen__card a {
    display: block;
    padding: clamp(1rem, 4vw, 1.5rem);
  }
}

/* --- Phone (<=480px): dichteres Spacing, aber Tap-Ziele bleiben --- */
@media (max-width: 480px) {

  /* Vertikaler Rhythmus zwischen Buttons in einer CTA-Gruppe */
  .cta-group > * + *,
  .buttons > * + *,
  .actions > * + *,
  .btn + .btn, .cta + .cta {
    margin-top: 0.75rem;
  }

  /* CTA-Buttons volle Breite für sichere Tap-Fläche */
  .wwm-fc__btn, .hero__cta, .cta--primary, .cta--secondary,
  a[role="button"].primary, .btn--wide, .btn--full {
    width: 100%;
    max-width: 24rem;
  }

  /* Nav-Bar Höhe leicht anheben für stabilen Burger-Griff */
  .nav__inner { min-height: 56px; }
  .nav__burger { margin: 0 -6px 0 6px; } /* optische Balance halten */

  /* Mobile-Menu: großzügige Zeilenhöhe für Ziele */
  .mobile-menu__link { min-height: 48px; padding: 0.85rem 0; }

  /* Footer-Copyright / Rechts-Links: nicht klebrig eng */
  .footer__legal a,
  .footer__meta a {
    display: inline-block;
    padding: 8px 0;
  }
  .footer__legal a + a,
  .footer__meta a + a {
    margin-left: 0;
  }

}

/* =========================================================================
   TOUCH-TARGET-NACHZIEHER
   Feinjustierung für Sonderfälle, die nach dem ersten Pass noch zu klein waren.
   ========================================================================= */
@media (max-width: 1024px) {

  /* Inline-Pfeil-Links ("Xyz ansehen →", "Lesen →"): großzügiger Tap-Bereich
     ohne die Optik zu verändern (Padding + negativer Margin). */
  .wwm-final__trust-link,
  .wissen-woche__link,
  .wissen-final__link,
  .eo-inline-link,
  a.arrow-link, a.text-link, a.link-arrow {
    display: inline-flex !important;
    align-items: center;
    min-height: 44px !important;
    padding: 10px 4px !important;
    margin: -10px -4px !important;
  }

  /* Footer-Links generisch (auch ohne .footer__link Klasse) */
  .footer nav a,
  .footer ul li a,
  footer nav a,
  footer ul li a {
    min-height: 40px !important;
    padding: 8px 4px !important;
    display: inline-flex !important;
    align-items: center;
  }

  /* Burger: quadratische Tap-Fläche, ohne die Balken-Optik zu zerstören
     (kein display-Override, nur Padding/Größe). */
  .nav__burger {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    padding: 14px 8px !important;
    box-sizing: border-box;
  }

  /* Rechts-Links im Footer (Impressum · Datenschutz · AGB · Disclaimer):
     mehr vertikaler Klick-Raum. */
  a[href*="impressum"], a[href*="datenschutz"],
  a[href*="agb"], a[href*="widerruf"], a[href*="disclaimer"] {
    padding: 8px 6px !important;
    display: inline-block;
    min-height: 40px;
    line-height: 24px;
  }
}

/* =========================================================================
   RESPONSIVE TYPOGRAFIE — Feintuning 320–480 px
   Zeilenlängen, Umbrüche, vertikaler Rhythmus für sehr kleine Displays.
   ========================================================================= */

/* Small Tablet & Phablet (≤ 760 px) — sanfte Anpassung */
@media (max-width: 760px) {
  :root {
    --lh-tight: 1.15;
    --lh-snug: 1.3;
    --lh-normal: 1.55;
    --lh-relaxed: 1.7;
  }

  h1, .h1, .hero__title, .display, .display-1, .display-2 {
    line-height: 1.1 !important;
    letter-spacing: -0.02em;
    text-wrap: balance;
    hyphens: manual;
  }
  h2, .h2 {
    line-height: 1.15 !important;
    letter-spacing: -0.015em;
    text-wrap: balance;
  }
  h3, .h3 { line-height: 1.2 !important; text-wrap: balance; }
  h4, h5, h6 { line-height: 1.25 !important; }

  p, li, .lead, .body, blockquote {
    line-height: 1.6 !important;
    text-wrap: pretty;
    hyphens: auto;
    -webkit-hyphens: auto;
    hyphenate-limit-chars: 8 4 4;
  }

  /* Lesbare Zeilenlängen (max ~65ch) für Fließtext-Container */
  .prose, article p, .content p, .rich-text p,
  .wissen-beitrag p, .haltung p, .wer-wir-sind p {
    max-width: 62ch;
  }
}

/* Phone (≤ 480 px) — feinjustiert für kleine Screens */
@media (max-width: 480px) {
  html { font-size: 16px; }
  body { line-height: 1.55; }

  /* Headlines: engere Skala, damit lange Wörter nicht sprengen */
  h1, .h1, .hero__title, .display, .display-1, .display-2 {
    font-size: clamp(1.75rem, 8.5vw, 2.25rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.022em;
    margin-bottom: 0.5em;
    word-break: normal;
    overflow-wrap: break-word;
  }
  h2, .h2 {
    font-size: clamp(1.4rem, 6.8vw, 1.85rem) !important;
    line-height: 1.15 !important;
    margin-bottom: 0.5em;
  }
  h3, .h3 {
    font-size: clamp(1.1rem, 5.2vw, 1.4rem) !important;
    line-height: 1.2 !important;
    margin-bottom: 0.4em;
  }
  h4 { font-size: clamp(1rem, 4.6vw, 1.2rem) !important; line-height: 1.25 !important; }
  h5, h6 { font-size: 1rem !important; line-height: 1.3 !important; }

  /* Eyebrows / Kicker / Labels — nicht zu klein, aber tight */
  .eyebrow, .kicker, .label, .tag,
  [class*="__eyebrow"], [class*="__kicker"], [class*="__label"] {
    font-size: 0.78rem !important;
    letter-spacing: 0.08em;
    line-height: 1.3 !important;
  }

  /* Fließtext */
  p, li {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }
  .lead, .intro, [class*="__lead"], [class*="__intro"] {
    font-size: 1.05rem !important;
    line-height: 1.55 !important;
  }
  small, .small, .caption, figcaption {
    font-size: 0.85rem !important;
    line-height: 1.45 !important;
  }

  /* Blockquotes */
  blockquote, .quote, [class*="__quote"] {
    font-size: 1.05rem !important;
    line-height: 1.5 !important;
    padding-left: 0.9rem;
  }

  /* Vertikaler Rhythmus zwischen Blöcken */
  p + p, ul + p, ol + p, p + ul, p + ol { margin-top: 0.85em; }
  h1 + p, h2 + p, h3 + p { margin-top: 0.55em; }
  section + section { margin-top: clamp(2rem, 8vw, 3rem); }

  /* Listen: angenehmer Einzug + Abstand zwischen Items */
  ul, ol { padding-left: 1.25rem; }
  li + li { margin-top: 0.35em; }

  /* Buttons: Text soll nicht umbrechen, aber bei extrem langen Labels okay */
  .btn, button, .cta, [class*="__cta"] {
    font-size: 1rem !important;
    line-height: 1.2 !important;
    letter-spacing: 0.005em;
  }

  /* Sehr lange Wörter/URLs sicher umbrechen */
  a, code, kbd, .mono {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* Extra-Small (≤ 380 px) — für iPhone SE / Galaxy S8 Klasse */
@media (max-width: 380px) {
  h1, .h1, .hero__title, .display, .display-1, .display-2 {
    font-size: clamp(1.55rem, 8.2vw, 2rem) !important;
    letter-spacing: -0.025em;
  }
  h2, .h2 { font-size: clamp(1.25rem, 6.5vw, 1.65rem) !important; }
  h3, .h3 { font-size: clamp(1.05rem, 5vw, 1.3rem) !important; }
  p, li { font-size: 0.98rem !important; line-height: 1.58 !important; }
  .lead, .intro { font-size: 1rem !important; }

  /* Sehr enge Screens: erlauben, dass Headlines auch mal umbrechen */
  h1, h2, h3 { hyphens: auto; -webkit-hyphens: auto; }
}

/* Extra-Extra-Small (≤ 340 px) — Notabsicherung 320 px */
@media (max-width: 340px) {
  html { font-size: 15px; }
  h1, .h1 { font-size: 1.5rem !important; line-height: 1.1 !important; }
  h2, .h2 { font-size: 1.2rem !important; }
  h3, .h3 { font-size: 1.05rem !important; }
  .btn, button, .cta { font-size: 0.95rem !important; padding-left: 0.9rem; padding-right: 0.9rem; }
}

/* =========================================================================
   RESPONSIVE MEDIA — Performance & Layout-Sicherung
   Bilder/Videos skalieren sauber, verhindern CLS und laden effizient.
   ========================================================================= */
img, video, iframe, svg, canvas {
  max-width: 100%;
  height: auto;
}
img { image-rendering: auto; }

/* Verhindert Layout-Shift bei Bildern ohne width/height, falls die
   umgebende Box eine Aspect-Ratio setzt. */
img[width][height] { height: auto; aspect-ratio: attr(width) / attr(height); }

/* Media-Elemente unterhalb des Folds bekommen content-visibility, um
   Rendering-Kosten zu sparen. Sicherheits-Fallback: min-height, damit
   Sprünge klein bleiben. */
@media (max-width: 760px) {
  .voices__img,
  .wwm-fc__slide,
  .strip__item img,
  .wissen-band__img {
    content-visibility: auto;
    contain-intrinsic-size: 1px 320px;
  }
}

/* =========================================================================
   HOMEPAGE HERO – Mobile Overrides
   Fixes: 1) Nav-CTA versteckt Burger + Brand-Overlap
          2) Hero-Bild zeigt Gesichter statt Krawatten
          3) Scrim lässt Bild oben besser durchatmen
   ========================================================================= */
@media (max-width: 980px) {
  /* Nav-CTA neben Burger auf Mobile IMMER ausblenden – die Tap-Target-Regel
     bei 1024px würde sonst display:none überschreiben. */
  .nav__cta { display: none !important; }
}

@media (max-width: 760px) {
  /* Brand-Name kompakter halten, damit er nicht neben dem Burger umbricht */
  .brand__name {
    font-size: 0.95rem;
    line-height: 1.1;
    white-space: nowrap;
  }
  .brand { gap: 0.55rem; }
  .brand__mono { width: 38px; height: 36px; font-size: 0.78rem; }

  .hero {
    display: block !important;
    min-height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 2.5rem !important;
  }

  .hero__media {
    inset: 0 0 auto 0 !important;
    height: clamp(25rem, 62svh, 34rem) !important;
    overflow: hidden;
    transform: none !important;
  }

  /* Hero-Bild: Gesichter in den sichtbaren Bereich holen.
     Vertikal höher positionieren + Bildhöhe zurück auf 100%,
     damit Kopf & Schulter oben liegen, Text unten Platz behält. */
  .hero__media img {
    width: 100% !important; height: 100% !important;
    top: 0; left: 0;
    max-width: none !important;
    object-fit: cover !important;
    object-position: 72% 38%;
    transform: scale(1.03);
  }

  /* Scrim: weniger Deckung oben, sanfter Verlauf, damit das Bild
     tatsächlich als Bild wahrnehmbar bleibt und der Content unten liegt. */
  .hero__scrim {
    background:
      linear-gradient(
        to top,
        rgba(20,16,11,0.98) 0%,
        rgba(20,16,11,0.92) 32%,
        rgba(20,16,11,0.55) 58%,
        rgba(20,16,11,0.15) 88%,
        rgba(20,16,11,0.05) 100%
      ) !important;
  }

  /* Hero-Innenraum: Content nach unten schieben, damit oben Bildfläche bleibt */
  .hero__inner {
    padding-top: clamp(24rem, 60svh, 32rem);
    padding-bottom: 2rem;
  }

  /* Scroll-Indikator auf Mobile deaktivieren – kollidiert mit Content */
  .hero__scroll { display: none; }
}

@media (max-width: 480px) {
  .hero {
    min-height: auto !important;
  }
  .hero__media { height: clamp(24rem, 58svh, 31rem) !important; }
  .hero__inner { padding-top: clamp(23rem, 56svh, 30rem); }
  .hero__media img { object-position: 74% 38%; transform: scale(1.03); }
}

/* Haltung-Karten: auf Mobile untereinander stapeln statt horizontal scrollen.
   Der User soll keine seitliche Wischbewegung machen müssen. */
@media (max-width: 820px) {
  .haltung-cards {
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    grid-template-columns: 1fr !important;
    overflow-x: visible !important;
    scroll-snap-type: none !important;
    gap: 1.25rem !important;
    padding-bottom: 0 !important;
  }
}