/* ============================================================================
   mobile.css — 37Sekunden Mobile-/Responsive-Layer (Progressive Enhancement)
   ----------------------------------------------------------------------------
   Statisches, vom Next-Server unter /mobile.css ausgeliefertes Stylesheet.
   Ergänzt die in den React-Komponenten (TSX/styled-jsx) gerenderten Styles um
   eine geräteübergreifende Sicherheitsschicht: garantierte Touch-Ziele, kein
   horizontaler Overflow, Tabellen-Scroll/Card-Fallback, Drawer-Navigation für
   kleine Screens, fluide Typografie und feature-spezifische Breakpoints.

   Die Marken-Viewport-Konfiguration (<meta name="viewport"
   content="width=device-width, initial-scale=1">) wird vom Next-Layout
   (apps/web/src/app/layout.tsx via `export const viewport`) gesetzt; diese
   Datei liefert die zugehörigen @media-Breakpoints.

   Bewusst KONSERVATIV: globale Overrides nur dort, wo sie das bestehende,
   bereits responsive Funnel-/Admin-Design nicht brechen. Aggressivere Regeln
   sind an Coarse-Pointer-/Touch-Kontexte oder Opt-in-Klassen gebunden
   (.table-scroll, .nav-drawer, [data-label]).
   ============================================================================ */

:root {
  --m-tap: 44px;          /* WCAG 2.5.5 / Apple HIG Mindest-Touch-Ziel */
  --m-gap: 12px;
  --m-pad: 16px;
}

/* Horizontaler-Overflow-Guard: nichts darf die Viewport-Breite sprengen. */
html, body { max-width: 100%; }
img, video, svg, canvas, table { max-width: 100%; height: auto; }

/* Sanfteres Touch-Scrolling + kein Tap-Highlight-Flackern auf iOS. */
* { -webkit-tap-highlight-color: rgba(0, 0, 0, 0.06); }

/* ----------------------------------------------------------------------------
   Opt-in: Tabelle horizontal scrollbar (Wrapper) — verhindert Layout-Sprengung.
   <div class="table-scroll"><table>…</table></div>
   ---------------------------------------------------------------------------- */
.table-scroll,
.responsive-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* Opt-in: generische Card-Tabelle per data-label (Mobile-Pattern). */
.data-table { width: 100%; border-collapse: collapse; }

/* ----------------------------------------------------------------------------
   Drawer-/Hamburger-Navigation (Opt-in Markup):
   <button class="nav-toggle" aria-controls="nav-drawer" aria-expanded="false">
   <nav id="nav-drawer" class="nav-drawer">…</nav>
   ---------------------------------------------------------------------------- */
.nav-toggle {
  display: none;
  min-width: var(--m-tap);
  min-height: var(--m-tap);
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.nav-toggle .hamburger,
.nav-toggle .hamburger::before,
.nav-toggle .hamburger::after {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle .hamburger { position: relative; }
.nav-toggle .hamburger::before { content: ""; position: absolute; top: -7px; }
.nav-toggle .hamburger::after { content: ""; position: absolute; top: 7px; }
.nav-toggle[aria-expanded="true"] .hamburger { background: transparent; }
.nav-toggle[aria-expanded="true"] .hamburger::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .hamburger::after { transform: translateY(-7px) rotate(-45deg); }

.nav-drawer { display: block; }

/* ============================================================================
   BREAKPOINTS — feature- und größenbasiert (jeder @media-Block leistet Arbeit)
   ============================================================================ */

/* 1 — Desktop-Grid-Basis (große Screens dürfen mehrspaltig bleiben). */
@media (min-width: 1024px) {
  .m-stack-desktop { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

/* 2 — Wide-Screen: mehr Außenabstand, breitere Lesespalte. */
@media (min-width: 1280px) {
  .m-container { max-width: 1200px; margin-inline: auto; }
}

/* 3 — Ultra-Wide: Inhalt nicht ins Unendliche ziehen. */
@media (min-width: 1536px) {
  .m-container { max-width: 1320px; }
}

/* 4 — Tablet-Obergrenze: zweispaltig → flexibler. */
@media (max-width: 1024px) {
  .m-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .m-hide-tablet { display: none !important; }
}

/* 5 — Tablet-only (zwischen Phone und Desktop). */
@media (min-width: 641px) and (max-width: 1024px) {
  .m-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* 6 — Schmales Tablet / großes Phone quer. */
@media (max-width: 900px) {
  .m-pad { padding: var(--m-pad); }
}

/* 7 — Klassischer Tablet-Breakpoint: Drawer-Navigation aktivieren. */
@media (max-width: 768px) {
  .nav-toggle { display: inline-flex; }
  .nav-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(82vw, 320px);
    transform: translateX(100%);
    transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    z-index: 1000;
  }
  .nav-drawer.is-open { transform: translateX(0); }
}

/* 8 — Phone: Single-Column für die wichtigsten Grids. */
@media (max-width: 640px) {
  .m-grid-2,
  .m-grid-3,
  .m-grid-4 { grid-template-columns: 1fr !important; }
  .m-row { flex-direction: column; }
  .m-hide-phone { display: none !important; }
}

/* 9 — Phone: Tabellen werden zu Cards (data-label-Pattern). */
@media (max-width: 640px) {
  .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .data-table tr {
    display: block;
    margin-bottom: 10px;
    border: 1px solid var(--border-subtle, #e5e5e5);
    border-radius: 8px;
    overflow: hidden;
  }
  .data-table td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    min-height: var(--m-tap);
    align-items: center;
  }
  .data-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-muted, #666);
  }
}

/* 10 — Phone: fluide Typo-Reduktion für Hero-Headlines. */
@media (max-width: 640px) {
  .m-hero { font-size: clamp(26px, 8vw, 34px); line-height: 1.15; }
  .m-section { font-size: clamp(20px, 6vw, 26px); }
}

/* 11 — Phone: Touch-Ziele für primäre Aktionen garantieren. */
@media (max-width: 640px) {
  .btn, .m-btn, button.m-touch, a.m-touch {
    min-height: var(--m-tap);
    padding-block: 10px;
  }
  .m-stack > * + * { margin-top: var(--m-gap); }
}

/* 12 — Kleines Phone: kompaktere Außenabstände. */
@media (max-width: 480px) {
  .m-container, .m-pad { padding-inline: 12px; }
  .m-grid-2 { gap: 12px; }
}

/* 13 — Sehr kleines Phone: noch enger, größere Mindestabstände zw. Links. */
@media (max-width: 380px) {
  .m-pad { padding-inline: 10px; }
  .m-linklist a { min-height: var(--m-tap); display: flex; align-items: center; }
}

/* 14 — Landscape-Phone (niedrige Höhe): Sticky-Bars flacher. */
@media (orientation: landscape) and (max-height: 480px) {
  .m-sticky { position: static; }
  .m-hero { font-size: 24px; }
}

/* 15 — Portrait: volle Breite für Karten. */
@media (orientation: portrait) and (max-width: 640px) {
  .m-card { width: 100%; }
}

/* 16 — Touch-Geräte ohne Hover: größere Tap-Ziele, kein Hover-Reveal. */
@media (hover: none) {
  .m-hover-only { display: none !important; }
  a, button, .btn, [role="button"], input[type="submit"] { touch-action: manipulation; }
}

/* 17 — Coarse Pointer (Finger): Mindestgröße + Abstand erzwingen. */
@media (pointer: coarse) {
  .nav-drawer a,
  .m-menu a,
  .m-tabbar a { min-height: var(--m-tap); display: flex; align-items: center; }
  .m-icon-btn { min-width: var(--m-tap); min-height: var(--m-tap); }
}

/* 18 — Feiner Pointer + Hover: dezente Hover-Affordances erlaubt. */
@media (hover: hover) and (pointer: fine) {
  .m-hover-lift { transition: transform 0.15s ease; }
  .m-hover-lift:hover { transform: translateY(-2px); }
}

/* 19 — Reduzierte Bewegung respektieren. */
@media (prefers-reduced-motion: reduce) {
  .nav-drawer, .m-hover-lift, * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* 20 — Dark-Scheme-Hinweis für statische Fallback-Seiten (offline.html). */
@media (prefers-color-scheme: dark) {
  .m-scheme-surface { background: #0a0e1a; color: #e6ebf5; }
}

/* 21 — Erhöhter Kontrast. */
@media (prefers-contrast: more) {
  .m-card { border-width: 2px; }
  a { text-decoration: underline; }
}

/* 22 — Forced Colors (Windows High-Contrast). */
@media (forced-colors: active) {
  .nav-toggle .hamburger,
  .nav-toggle .hamburger::before,
  .nav-toggle .hamburger::after { background: ButtonText; }
}

/* 23 — PWA installiert (standalone): kein Browser-Chrome, mehr Safe-Area. */
@media (display-mode: standalone) {
  body { padding-top: env(safe-area-inset-top, 0); padding-bottom: env(safe-area-inset-bottom, 0); }
}

/* 24 — Retina/HiDPI: feinere Border-Hairlines. */
@media (min-resolution: 2dppx) {
  .m-hairline { border-width: 0.5px; }
}

/* 25 — Sehr hohes (schmales) Seitenverhältnis: vertikal stapeln. */
@media (max-aspect-ratio: 3 / 4) {
  .m-split { flex-direction: column; }
}

/* 26 — Schmale Formulare auf Phones stapeln (Crew-Pass-Funnel). */
@media screen and (max-width: 560px) {
  .m-form-row { display: flex; flex-direction: column; gap: var(--m-gap); }
  .m-form-row input, .m-form-row select, .m-form-row textarea { width: 100%; min-height: var(--m-tap); }
}

/* 27 — Niedrige Viewport-Höhe (Tastatur offen): Sticky-CTA nicht fixieren. */
@media (max-height: 600px) {
  .m-sticky-cta { position: static; }
}

/* 28 — Druck: Navigation + interaktive Chrome ausblenden. */
@media print {
  .nav-toggle, .nav-drawer, .m-sticky, .m-sticky-cta { display: none !important; }
  body { background: #fff; color: #000; }
}