/* ══════════════════════════════════════════════════════════
   RiskRiver Website — Responsive Layer
   ──────────────────────────────────────────────────────────
   Desktop-Layout (main.css) bleibt unberührt. Diese Datei
   ergänzt Mobile- und Tablet-Anpassungen und wird NACH main.css
   geladen.

   Prinzipien:
   - Alle Breakpoints folgen der in main.css bereits etablierten
     Skala (1100/900/860/820/780/760/720/680/540/520/480).
   - Alle Farben/Tokens über CSS-Variablen aus main.css (--v*, --font,
     Gradient --sb). Kein neues Design, nur Layout-Anpassung.
   - Komplexe App-Mockups (hero-win, heatmap-dash, graph-dash, bcm-dash)
     werden auf Mobile ausgeblendet — bestehendes Muster aus main.css
     (.hero-win{display:none} bei <900px).
   - Mobile-Menü nutzt die bestehenden .nav-btn Styles und wird per
     Off-Canvas-Panel angezeigt.
   ══════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════
   0 · GLOBAL SAFETY NETS
   Verhindern horizontales Scrollen auf allen Viewports und
   sichern smoothes Scaling.
══════════════════════════════════════════════════════════ */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
img, svg, video, canvas {
  max-width: 100%;
  height: auto;
}
/* Tables in mockups — erlauben horizontales Scrollen innerhalb des Containers statt auszubrechen */
.hd-tbl, .hm-list, .hm-layout {
  max-width: 100%;
}

/* Nav-Links sind jetzt Anchor-Tags (statt Buttons) — damit Google sie
   als echte Links crawlt. CSS-Normalisierung damit sie sich wie Buttons
   verhalten und kein Anchor-Default-Styling durchschlägt. */
a.nav-btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 1;
}
a.btn-cta-nav {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 1;
}


/* ══════════════════════════════════════════════════════════
   1 · NAV — MOBILE MENU (Hamburger + Off-Canvas)
   Bis 820px waren Links bisher einfach ausgeblendet. Hier wird
   ein Off-Canvas-Panel ergänzt, das die bestehenden Nav-Buttons
   übernimmt.
══════════════════════════════════════════════════════════ */

/* Hamburger-Button — standardmässig versteckt, erscheint ab <820px */
.nav-burger {
  display: none;
  background: none;
  border: none;
  padding: 8px;
  margin-left: 4px;
  border-radius: 8px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.nav-burger:hover { background: rgba(255,255,255,.1); }
.nav-burger-icon {
  position: relative;
  width: 20px;
  height: 14px;
  display: block;
}
.nav-burger-icon::before,
.nav-burger-icon::after,
.nav-burger-icon span {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .25s cubic-bezier(.4,0,.2,1), opacity .2s, top .25s;
}
.nav-burger-icon::before { top: 0; }
.nav-burger-icon span    { top: 6px; }
.nav-burger-icon::after  { top: 12px; }
/* "X"-Zustand, wenn Menü offen */
body.nav-open .nav-burger-icon::before { top: 6px; transform: rotate(45deg); }
body.nav-open .nav-burger-icon span    { opacity: 0; }
body.nav-open .nav-burger-icon::after  { top: 6px; transform: rotate(-45deg); }

/* Off-Canvas-Panel */
.nav-panel {
  position: fixed;
  top: 60px;            /* unterhalb der Nav-Bar */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 190;         /* unter #nav (200), damit Hamburger bedienbar bleibt */
  background: linear-gradient(170deg,#1a0840 0%,#2e1269 40%,#5b21b6 80%,#7c3aed 100%);
  padding: 24px clamp(16px,5%,32px) 32px;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .22s ease, transform .22s ease;
  display: none;        /* erst ab Breakpoint ins Spiel bringen */
  flex-direction: column;
  gap: 18px;
}
body.nav-open .nav-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
body.nav-open { overflow: hidden; }

.nav-panel-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nav-panel-links .nav-btn {
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  font-size: 15.5px;
  border-radius: 10px;
  color: rgba(255,255,255,.82);
}
.nav-panel-links .nav-btn.on,
.nav-panel-links .nav-btn:hover {
  color: #fff;
  background: rgba(255,255,255,.1);
}

/* Sprache + Login/CTA innerhalb des Panels */
.nav-panel-divider {
  height: 1px;
  background: rgba(255,255,255,.12);
  margin: 4px 0;
}
.nav-panel-lang {
  display: flex;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  overflow: hidden;
  align-self: flex-start;
}
.nav-panel-lang .lb {
  padding: 10px 16px;
  font-size: 12px;
}
.nav-panel-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.nav-panel-actions .btn-app,
.nav-panel-actions .btn-cta-nav {
  width: 100%;
  text-align: center;
  justify-content: center;
  padding: 13px 18px;
  font-size: 14.5px;
  border-radius: 10px;
}

/* Aktivierung der Mobile-Nav: ab <820px (gleicher Breakpoint wie in main.css,
   bei dem .nav-links bereits ausgeblendet wird) */
@media (max-width: 820px) {
  .nav-burger { display: inline-flex; }
  .nav-panel  { display: flex; }
  /* Desktop-Sprachumschalter und Login/CTA in der Topbar ausblenden —
     diese werden im Panel erneut gerendert. */
  #nav .nav-right .lang-sw,
  #nav .nav-right .btn-app,
  #nav .nav-right .btn-cta-nav { display: none; }
}


/* ══════════════════════════════════════════════════════════
   2 · HERO — MOBILE
   Bestehendes Muster: bei <900px stapelt .hero-inner in eine
   Spalte und .hero-win wird ausgeblendet. Hier nur Feintuning
   für kleinere Viewports: Typografie, Abstände, Pills.
══════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .hero-inner {
    padding: 32px clamp(16px,5%,32px) 48px;
    gap: 24px;
  }
  .hero-sub {
    font-size: 15px;
    margin-bottom: 24px;
  }
  .hero-actions {
    gap: 10px;
    margin-bottom: 22px;
  }
  .btn-hero-primary,
  .btn-hero-ghost {
    padding: 12px 20px;
    font-size: 14px;
  }
  .hero-pills { gap: 6px; }
  .hero-pill  {
    padding: 5px 10px;
    font-size: 11px;
  }
}

/* Sehr kleine Viewports — Hero-CTAs auf volle Breite, besseres Tap-Target */
@media (max-width: 480px) {
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .btn-hero-primary,
  .btn-hero-ghost {
    justify-content: center;
    width: 100%;
  }
}


/* ══════════════════════════════════════════════════════════
   3 · SECTION SCAFFOLDING — MOBILE PADDINGS
   Section-Paddings reduzieren, damit Content nicht an Viewport-
   Kanten klebt und Sections nicht erdrückend wirken.
══════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .section { padding: 56px clamp(16px,5%,32px); }
  .h2 {
    font-size: clamp(24px,6.5vw,32px);
    letter-spacing: -.8px;
  }
  .lead { font-size: 15px; }
}
@media (max-width: 480px) {
  .section { padding: 44px 16px; }
}


/* ══════════════════════════════════════════════════════════
   4 · TRUST BAR — MOBILE
══════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .trust-bar { padding: 18px 16px; }
  .trust-inner { gap: 5px 8px; }
  .ti {
    font-size: 11.5px;
    padding: 5px 11px;
  }
}


/* ══════════════════════════════════════════════════════════
   5 · STATS GRID — MOBILE
   Bestehendes: <680px → 2 Spalten. Ergänzung: <420px → 1 Spalte.
══════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .stats-grid {
    gap: 12px;
    margin-top: 36px;
  }
  .stat-card { padding: 22px 12px; }
  .stat-num  { font-size: 34px; }
  .stat-lbl  { font-size: 12px; }
}
@media (max-width: 420px) {
  .stats-grid { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════
   6 · FEATURE ROWS — MOBILE
   ──────────────────────────────────────────────────────────
   Wichtig: Die Mockups (heatmap-dash, graph-dash, bcm-dash)
   BLEIBEN auf Mobile sichtbar — sie sind SVG/HTML basiert und
   skalieren per viewBox/grid sauber, sofern man das 2-Spalten-
   Grid der Feature-Row korrekt auf 1 Spalte umbricht.

   Problem in main.css: die generische @media-Regel
     @media(max-width:900px){.feat{grid-template-columns:1fr}}
   wird überschrieben durch die spezifischeren Klassen
     .feat.feat-wide / .feat.feat-wider
   die weiterhin 2 Spalten durchsetzen. Text-Spalte wird dadurch
   eng, Mockup-Spalte wird unnatürlich schmal.

   Lösung: alle Feature-Varianten explizit auf 1 Spalte zwingen.
══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .feat,
  .feat.flip,
  .feat.feat-wide,
  .feat.feat-wider,
  .feat.feat-wide.flip,
  .feat.feat-wider.flip {
    grid-template-columns: 1fr;
    direction: ltr;
    gap: 28px;
    margin-top: 32px;
  }
  .feat.flip > *,
  .feat.feat-wide.flip > *,
  .feat.feat-wider.flip > * { direction: ltr; }

  .feat-text h3 { font-size: clamp(20px,5.5vw,26px); }
  .feat-text p  { font-size: 15px; }
  .fci { font-size: 14px; }

  /* Mockups behalten ihre natürliche Darstellung, nur mit
     angepasster Aussenhülle. Keine display:none Regel hier! */
  .feat .app-win { width: 100%; }
}

/* Heatmap-Mockup: Matrix + rechte Liste stapeln schon bei <1100px
   via main.css. Bei <720px die Matrix-Zellen etwas größer lassen
   und KPI-Text besser lesbar machen. */
@media (max-width: 720px) {
  .hm-layout { gap: 10px; }
  .hm-list-panel { padding: 10px; }
  .hm-lrow {
    grid-template-columns: 14px 38px 1fr 48px 26px;
    gap: 5px;
    padding: 6px 4px;
  }
  .hm-lname { font-size: 11px; }
  /* View-Row (Brutto/Residual/Beide Toggle) hat bereits flex-wrap */
  .hm-view-row { gap: 8px; }
  .hm-toggle-btn { padding: 5px 10px; font-size: 10.5px; }

  /* Y-Achsen-Beschriftung ("Fast sicher", "Wahrsch.", ...) auf Mobile
     ausblenden — auf 375px nehmen die 52px Label-Spalte dringend
     benötigte Matrix-Breite weg. Die Zellen-Scores + X-Achse reichen
     zur Interpretation. Die X-Achse (.hm-xrow) beginnt im JS-Output
     mit einem leeren <div> (Platzhalter für die Y-Spalte); im 1-Spalten-
     Grid wird das zu einer leeren Zeile mit 0 Höhe — unproblematisch. */
  .hm-grid { grid-template-columns: minmax(0,1fr); }
  .hm-yrow { display: none; }
  .hm-axis-outer-x { margin-top: 4px; }
}

/* Graph-Mockup: Toolbar-Chips mit vielen Filtern - auf Mobile
   stacken die chips bereits via flex-wrap. Nur Höhen-Safety. */
@media (max-width: 720px) {
  .gr-canvas { min-height: 220px; }
  .gr-toolbar { padding: 7px 8px; gap: 5px; }
  .gr-filter { font-size: 10px; padding: 3px 8px; }
  .gr-tbtn { font-size: 9.5px; padding: 3px 7px; }
}

/* BCM-Mockup: 4-Spalten-KPI-Row unten stapelt auf Mobile in 2 */
@media (max-width: 720px) {
  .bcm-foot {
    grid-template-columns: repeat(2,1fr);
    gap: 8px;
  }
  .bcm-foot .bcm-incident { grid-column: 1 / -1; }
  .bcm-kpi-val { font-size: 18px; }
  .bcm-topo-legend { font-size: 9px; gap: 6px 10px; }
  .bcm-col-headers { padding: 0 2px 6px; }
  .bcm-col-head { font-size: 8px; letter-spacing: .6px; }
}
@media (max-width: 480px) {
  .bcm-foot { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════
   7 · MODULES PAGE — MOBILE
   Bestehendes: <860px → .mdl-intro und .mdl-grid stapeln.
   <480px → .mdl-features stapelt.
   Ergänzungen hier: KPI-Row, Titel-Hero, CTA-Band.
══════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .mdl-intro { padding: 56px 16px 24px; }
  .mdl-intro-diagram { padding: 18px; }
  /* Auf Mobile die max-width-Kappung des Diagramm-SVGs aufheben,
     damit die Bubbles die volle verfügbare Containerbreite nutzen. */
  .mdl-intro-diagram svg { max-width: none; }
  /* Die Knoten-Bubbles sind für die Label-Längen ("Lieferant",
     "Control", "Bedro-/hung", "Mass-/nahme") knapp bemessen. Auf
     Mobile vergrössern wir gezielt die einzelnen Kreise per r-
     Attribute-Selektor. Die Text-Größen bleiben unverändert, damit
     die Lesbarkeit erhalten bleibt. Desktop unberührt (nur <860px). */
  .mdl-intro-diagram svg circle[r="15"] { r: 19; }   /* Control, Bedrohung */
  .mdl-intro-diagram svg circle[r="17"] { r: 21; }   /* Lieferant, Policy */
  .mdl-intro-diagram svg circle[r="19"] { r: 22; }   /* Asset, Prozess, Massnahme */
  /* Risiko-Hauptkreis bleibt r=22, sein Halo-Ring (r=26) wird
     ebenfalls leicht angehoben, damit das Verhältnis stimmt */
  .mdl-intro-diagram svg circle[r="22"] { r: 24; }
  .mdl-intro-diagram svg circle[r="26"] { r: 28; }
}
@media (max-width: 720px) {
  /* KPI-Row auf Module-Hero — bestehend: flex-wrap bei <720px aktiv,
     Link und Sep versteckt, Hero-Bubble auf eigener Zeile.
     Hier nur Feintuning der Abstände. */
  .mdl-kpi { padding: 6px 11px; }
  .mdl-kpi-num      { font-size: 14px; }
  .mdl-kpi-lbl      { font-size: 10.5px; }
  .mdl-kpi-hero     { padding: 9px 16px 9px 12px; gap: 10px; }
  .mdl-kpi-hero-num { font-size: 22px; }
  .mdl-kpi-hero-lbl { font-size: 12px; }
  .mdl-kpi-hero-sub { font-size: 9px; letter-spacing: 1px; }

  /* Modul-Cards: Padding + Titelgrösse anpassen */
  .mdl-card       { padding: 24px 22px 22px; }
  .mdl-ico        { width: 44px; height: 44px; border-radius: 11px; }
  .mdl-ico svg    { width: 20px; height: 20px; }
  .mdl-title      { font-size: 17px; }
  .mdl-body       { font-size: 13.5px; }
  .mdl-foot       { flex-direction: column; align-items: flex-start; gap: 12px; }

  /* Module-CTA-Band */
  .mdl-cta        { padding: 44px 24px; margin-top: 56px; border-radius: 18px; }
  .mdl-cta h3     { font-size: clamp(22px,5.5vw,30px); }
  .mdl-cta p      { font-size: 14.5px; }
  .mdl-cta-row    { flex-direction: column; align-items: stretch; gap: 10px; }
  .mdl-cta-btn    { justify-content: center; }
}


/* ══════════════════════════════════════════════════════════
   8 · PRICING PAGE — MOBILE
══════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .prc-credo { margin-top: -20px; }
  .prc-credo-card { padding: 28px 22px; border-radius: 18px; }
  .prc-credo p  { font-size: 14px; }
  .prc-credo-pill { font-size: 12px; padding: 9px 12px; }

  .prc-compare,
  .prc-factors,
  .prc-timeline,
  .prc-faq { margin-top: 56px; }

  .prc-comp   { padding: 20px 20px 18px; border-radius: 14px; }
  .prc-comp-ttl { font-size: 15px; }
  .prc-comp-item { font-size: 13px; }

  .prc-factor     { padding: 20px 18px; }
  .prc-factor-ttl { font-size: 14px; }
  .prc-factor-desc{ font-size: 12.5px; }

  .prc-perks-bar  { margin-top: 56px; }

  .prc-faq-item summary { padding: 15px 18px; font-size: 13.5px; }
  .prc-faq-answer       { padding: 0 18px 18px; font-size: 13px; }
}


/* ══════════════════════════════════════════════════════════
   9 · RESOURCES PAGE — MOBILE
   ──────────────────────────────────────────────────────────
   Bestehendes: <760px → .res-grid: 1 Spalte.
   Die .res-card Inhalte enthalten komplexe inline App-Mockups
   (CIS-Benchmark, Crisis-Topology etc.). Diese bleiben sichtbar,
   werden aber angepasst, damit sie auf Mobile natürlich wirken.
══════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .res-card-hdr { padding: 18px 18px 16px; }
  .res-title    { font-size: 14.5px; }
  .res-sub      { font-size: 11.5px; }
  .res-body     { padding: 16px 14px 18px; }
  .res-desc     { font-size: 13px; }

  /* Inline-Mockups im res-body — manche haben feste 4-Spalten-Grids.
     Diese stapeln wir auf 2 Spalten unter 720px und 1 unter 480px.
     Wir targeten nur Grid-Children direkt im res-body um eine Kaskade
     auszulösen, ohne die ID-Spalten (52px 80px 1fr auto) zu zerbrechen. */
  .res-body [style*="grid-template-columns:repeat(4"],
  .res-body [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* CIS-Check-Row ("52px 80px 1fr auto"): auf Mobile 3-zeilig
     anordnen — Zeile 1: ID + Badge nebeneinander, Zeile 2: volle
     Beschreibung, Zeile 3: Status-Pill links. Statt das 4-Spalten-
     Grid zu quetschen, nutzen wir 2 Spalten und grid-column-Spans. */
  .res-body [style*="grid-template-columns:52px 80px 1fr auto"] {
    grid-template-columns: auto auto 1fr !important;
    align-items: center !important;
    row-gap: 8px !important;
    column-gap: 8px !important;
  }
  /* 3. Kind (Beschreibung) über alle Spalten */
  .res-body [style*="grid-template-columns:52px 80px 1fr auto"] > *:nth-child(3) {
    grid-column: 1 / -1;
  }
  /* 4. Kind (Status-Pill) linksbündig über alle Spalten */
  .res-body [style*="grid-template-columns:52px 80px 1fr auto"] > *:nth-child(4) {
    grid-column: 1 / -1;
    justify-self: start;
    max-width: 100%;
  }
  /* Bei Fehler-/Warnung-Rows ist das 4. Kind ein Flex-Container mit
     mehreren Action-Buttons — erlaube Umbruch falls zu schmal. */
  .res-body [style*="grid-template-columns:52px 80px 1fr auto"] > div[style*="display:flex"] {
    flex-wrap: wrap !important;
    gap: 5px !important;
  }
  /* Linkes Padding der Zeile zähmen (Original 42px für den Status-
     Dot), Status-Dot etwas weiter links setzen damit mehr Platz
     bleibt für den Zeileninhalt */
  .res-body [style*="padding:11px 16px 11px 42px"] {
    padding: 12px 14px 12px 28px !important;
  }
  .res-body [style*="position:absolute"][style*="left:18px"][style*="top:15px"] {
    left: 10px !important;
    top: 14px !important;
  }
  /* Alarmierungs-Tabelle: "1.2fr 1.2fr 32px 36px" → Icons zusammenhalten */
  .res-body [style*="grid-template-columns:1.2fr 1.2fr 32px 36px"] {
    grid-template-columns: 1fr 1fr 28px 30px !important;
    font-size: 11px !important;
  }
  /* Recovery-Topology "1fr 300px" → stacken */
  .res-body [style*="grid-template-columns:1fr 300px"] {
    grid-template-columns: 1fr !important;
  }
  .res-body [style*="border-right:1px solid #2d2556"] {
    border-right: none !important;
  }
  /* Risiko-Register-Kachel: "3 MA" Label (Meta-Info ganz rechts in
     der Button-Zeile) auf Mobile ausblenden — nimmt Platz ohne Nutzen. */
  .res-body span[style*="margin-left:auto;font-size:12px;color:#8779b8"] {
    display: none !important;
  }
  /* Supplier-Dossier Header: auf Mobile klar in 3 Sektionen gliedern:
     (1) Logo + SUP-Code + Badges (SUP-Code, Risk, Status, Certs)
     (2) Firmenname + Ort + Beschreibung (volle Breite, links)
     (3) Kontakt-Block (volle Breite, links, mit Trennlinie darüber)

     Dafür wird der Outer-Flex auf flex-wrap:wrap gesetzt. Das Logo
     bleibt links. Der Info-Block wird auf volle Breite gezwungen
     und fällt auf eine neue Zeile — seine innere Badges-Row landet
     dann volle Breite, gefolgt von Firmenname+Beschreibung volle
     Breite linksbündig (kein optisches Zentrieren durch Logo-Einrückung). */
  .res-body [style*="display:flex;align-items:flex-start;gap:12px"] {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  /* Logo: kleiner auf Mobile, bleibt oben links als Anker */
  .res-body [style*="display:flex;align-items:flex-start;gap:12px"] > div:first-child[style*="width:40px"][style*="height:40px"] {
    width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
  }
  /* Info-Block auf VOLLE Breite — er fällt dadurch auf eine eigene
     Zeile unter dem Logo, und seine internen Elemente (Badges-Row,
     Firmenname, Beschreibung) beginnen wirklich links am Rand. */
  .res-body [style*="display:flex;align-items:flex-start;gap:12px"] > div[style*="flex:1;min-width:0"] {
    flex: 0 0 100% !important;
    min-width: 0 !important;
  }
  /* Kontakt-Block: dritte volle-Breite Sektion mit Trennlinie */
  .res-body [style*="border-left:1px solid #2d2556"][style*="min-width:140px"] {
    border-left: none !important;
    border-top: 1px solid #2d2556 !important;
    padding-left: 0 !important;
    padding-top: 12px !important;
    margin-top: 6px !important;
    min-width: 0 !important;
    width: 100% !important;
    flex-basis: 100% !important;
  }
}
@media (max-width: 480px) {
  .res-body [style*="grid-template-columns:repeat(4"],
  .res-body [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}


/* ══════════════════════════════════════════════════════════
   10 · CONTACT / FORMS — MOBILE
   Bestehendes: <860px → .contact-grid und .fg-2 stapeln.
   Ergänzungen: Formular-Innenabstand, Input-Touch-Target.
══════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .contact-grid { gap: 32px; margin-top: 36px; }
  .contact-form { padding: 24px 22px; border-radius: 16px; }
  .cf-title     { font-size: 18px; }
  .fi, .fi-ta, .fi-sel {
    padding: 12px 14px;  /* min. ~44px Touch-Target mit Padding */
    font-size: 15px;     /* 16+ verhindert iOS-Zoom, 15px mit system-ui ist okay */
  }
  .btn-submit   { padding: 14px; font-size: 15px; }
  .perk         { gap: 12px; }
  .perk-icon    { width: 34px; height: 34px; }
  .perk-title   { font-size: 14px; }
  .perk-sub     { font-size: 12.5px; }
}

/* iOS-Zoom-Prevention — Eingabefelder mindestens 16px wenn < 480px */
@media (max-width: 480px) {
  .fi, .fi-ta, .fi-sel { font-size: 16px; }
}


/* ══════════════════════════════════════════════════════════
   11 · CTA DARK & FOOTER — MOBILE
══════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .cta-dark   { padding: 56px 16px; }
  .cta-dark p { font-size: 15px; margin-bottom: 28px; }
  .cta-dark-btns { flex-direction: column; align-items: stretch; }
  .cta-dark-btns .btn-hero-primary,
  .cta-dark-btns .btn-hero-ghost { justify-content: center; }

  footer { padding: 44px 20px 24px; }
  .footer-grid { gap: 28px; padding-bottom: 32px; }
  .footer-tagline { max-width: none; }
  .footer-bottom  { flex-direction: column; align-items: flex-start; gap: 10px; }
  .footer-legal   { flex-wrap: wrap; gap: 16px; }
}


/* ══════════════════════════════════════════════════════════
   12 · TRANSVERSE HEROES — MODULES/PRICING/RESOURCES
   Diese Seiten haben eigene Inline-Hero-Sections (nicht .hero).
   Titel-Font und Abstände auf kleinen Screens zähmen.
   Wichtig: Die Hero-H1 hat Inline-Style mit clamp(26px,3.4vw,40px),
   untere Grenze ist 26px — das ist bei 375px Viewport zu breit für
   "Alle Disziplinen." in einer Zeile. Hier wird die Inline-Style
   gezielt überschrieben.
══════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  #pg-modules   > section:first-of-type > div:first-child,
  #pg-pricing   > section:first-of-type > div:first-child,
  #pg-resources > section:first-of-type > div:first-child {
    padding: 20px 16px 28px;
  }
  /* Heros: H1 (Inline-Style override via attribute-Selektor mit höherer
     Spezifität über den .pg-Kontext) */
  #pg-modules   > section:first-of-type h1[style],
  #pg-pricing   > section:first-of-type h1[style],
  #pg-resources > section:first-of-type h1[style] {
    font-size: clamp(20px,5.5vw,28px) !important;
    letter-spacing: -.5px !important;
    line-height: 1.18 !important;
    word-break: normal;
    overflow-wrap: break-word;
    padding: 0 6px;
  }
  /* Das <em> im H1 (Gradient-Text) darf auf Mobile in eigene Zeile umbrechen */
  #pg-modules   > section:first-of-type h1[style] em,
  #pg-pricing   > section:first-of-type h1[style] em,
  #pg-resources > section:first-of-type h1[style] em {
    display: inline-block;
  }
  #pg-modules   > section:first-of-type p[style],
  #pg-pricing   > section:first-of-type p[style],
  #pg-resources > section:first-of-type p[style] {
    font-size: 13.5px !important;
    line-height: 1.6 !important;
  }
  /* Module-KPI-Row: Inline-Style setzt width:max-content. Auf Mobile
     soll die Row sich auf 100% einschränken und ihre eigene flex-wrap
     Regel aus main.css arbeiten lassen. */
  #pg-modules .mdl-kpis[style] {
    width: auto !important;
    max-width: 100% !important;
  }
}


/* ══════════════════════════════════════════════════════════
   13 · TOUCH-TARGETS auf Touch-Geräten
   Sichert min. 44×44px für Touch-interaktive Elemente.
   hover:none erkennt echte Touch-Geräte, unabhängig von der
   Viewport-Breite (Tablets im Landscape sind manchmal >900px).
══════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  .nav-btn,
  .lb,
  .btn-app,
  .btn-cta-nav { min-height: 40px; }

  .nav-panel-links .nav-btn { min-height: 48px; }

  .btn-hero-primary,
  .btn-hero-ghost,
  .btn-submit,
  .mdl-cta-btn { min-height: 44px; }

  /* Footer-Links: block-Layout beibehalten (jeder Link eigene Zeile),
     mit etwas mehr vertikalem Padding als Touch-Target. Die Legal-
     Links im footer-bottom bleiben inline-Block (sie stehen horizontal). */
  .footer-col a { padding: 6px 0; display: block; }
  .footer-legal a { padding: 6px 0; display: inline-block; }

  /* Hover-only-Effekte auf Touch-Geräten neutralisieren, damit keine
     "hängenden" Hover-States nach dem Tap zurückbleiben. */
  .stat-card:hover,
  .res-card:hover,
  .mdl-card:hover,
  .prc-factor:hover {
    transform: none;
    box-shadow: inherit;
  }
}


/* ══════════════════════════════════════════════════════════
   14 · PREFERS-REDUCED-MOTION
   Canvas-Animation (hero-c) und Reveal-Transitions zähmen für
   Benutzer:innen mit aktivierter Bewegungsreduktion.
══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-eyebrow-dot,
  .bcm-incident::before { animation: none !important; }
  html { scroll-behavior: auto; }
}