/* =====================================================================
   STARTSEITE: MOBIL-HERO (live seit 2026-09-30, Yusuf, Entwurf "Variante 3")
   Nur Handy (<=767px, passend zum Mobil-Block im Inline-<style> von index.html).
   Slogan (Größe wie Entwurf V2), Einleitung, Buttons auf statischem Netz-Motiv
   (hero-motif.js bleibt mobil aus), darunter die vier Karten als Stapel.
   Stapel nur mit JS (js/home-mhero.js setzt .mh-stack); ohne JS Karten als Liste.
   Reihenfolge wie Desktop: Dienstleistungen, MedMentis, Rechenzentren, BSI-Lagebericht.
   Entwürfe: scratchpad mobil-hero (v1-v3). Desktop/Tablet unberührt.
   ===================================================================== */
@media (max-width: 767px) {
  body.is-home #start .hero-stage--split {
    padding: 0 0 22px !important;
    background: linear-gradient(180deg, #0c2149 0%, #0a1a38 55%, #081428 100%) !important;
  }
  body.is-home #start .hero-overlay {
    padding: 44px 20px 0 !important;
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20390%20420%22%3E%3Cg%20stroke%3D%22rgb%28150%2C190%2C235%29%22%20stroke-width%3D%220.8%22%3E%3Cline%20x1%3D%22258%22%20y1%3D%2248%22%20x2%3D%22322%22%20y2%3D%2223%22%20stroke-opacity%3D%220.08%22/%3E%3Cline%20x1%3D%22258%22%20y1%3D%2248%22%20x2%3D%22299%22%20y2%3D%22115%22%20stroke-opacity%3D%220.05%22/%3E%3Cline%20x1%3D%22258%22%20y1%3D%2248%22%20x2%3D%22209%22%20y2%3D%2229%22%20stroke-opacity%3D%220.11%22/%3E%3Cline%20x1%3D%22258%22%20y1%3D%2248%22%20x2%3D%22219%22%20y2%3D%2270%22%20stroke-opacity%3D%220.13%22/%3E%3Cline%20x1%3D%22258%22%20y1%3D%2248%22%20x2%3D%22223%22%20y2%3D%2237%22%20stroke-opacity%3D%220.15%22/%3E%3Cline%20x1%3D%22258%22%20y1%3D%2248%22%20x2%3D%22302%22%20y2%3D%2220%22%20stroke-opacity%3D%220.11%22/%3E%3Cline%20x1%3D%22258%22%20y1%3D%2248%22%20x2%3D%22207%22%20y2%3D%2265%22%20stroke-opacity%3D%220.11%22/%3E%3Cline%20x1%3D%22258%22%20y1%3D%2248%22%20x2%3D%22283%22%20y2%3D%2294%22%20stroke-opacity%3D%220.11%22/%3E%3Cline%20x1%3D%22322%22%20y1%3D%2223%22%20x2%3D%22385%22%20y2%3D%2215%22%20stroke-opacity%3D%220.09%22/%3E%3Cline%20x1%3D%22322%22%20y1%3D%2223%22%20x2%3D%22362%22%20y2%3D%2291%22%20stroke-opacity%3D%220.05%22/%3E%3Cline%20x1%3D%22322%22%20y1%3D%2223%22%20x2%3D%22302%22%20y2%3D%2220%22%20stroke-opacity%3D%220.18%22/%3E%3Cline%20x1%3D%22299%22%20y1%3D%22115%22%20x2%3D%22308%22%20y2%3D%22125%22%20stroke-opacity%3D%220.20%22/%3E%3Cline%20x1%3D%22299%22%20y1%3D%22115%22%20x2%3D%22362%22%20y2%3D%2291%22%20stroke-opacity%3D%220.08%22/%3E%3Cline%20x1%3D%22299%22%20y1%3D%22115%22%20x2%3D%22320%22%20y2%3D%22117%22%20stroke-opacity%3D%220.18%22/%3E%3Cline%20x1%3D%22299%22%20y1%3D%22115%22%20x2%3D%22328%22%20y2%3D%22135%22%20stroke-opacity%3D%220.15%22/%3E%3Cline%20x1%3D%22299%22%20y1%3D%22115%22%20x2%3D%22283%22%20y2%3D%2294%22%20stroke-opacity%3D%220.17%22/%3E%3Cline%20x1%3D%22206%22%20y1%3D%22160%22%20x2%3D%22202%22%20y2%3D%22137%22%20stroke-opacity%3D%220.18%22/%3E%3Cline%20x1%3D%22206%22%20y1%3D%22160%22%20x2%3D%22230%22%20y2%3D%22183%22%20stroke-opacity%3D%220.15%22/%3E%3Cline%20x1%3D%22206%22%20y1%3D%22160%22%20x2%3D%22256%22%20y2%3D%22184%22%20stroke-opacity%3D%220.10%22/%3E%3Cline%20x1%3D%22202%22%20y1%3D%22137%22%20x2%3D%22219%22%20y2%3D%2270%22%20stroke-opacity%3D%220.08%22/%3E%3Cline%20x1%3D%22202%22%20y1%3D%22137%22%20x2%3D%22230%22%20y2%3D%22183%22%20stroke-opacity%3D%220.11%22/%3E%3Cline%20x1%3D%22202%22%20y1%3D%22137%22%20x2%3D%22207%22%20y2%3D%2265%22%20stroke-opacity%3D%220.07%22/%3E%3Cline%20x1%3D%22202%22%20y1%3D%22137%22%20x2%3D%22256%22%20y2%3D%22184%22%20stroke-opacity%3D%220.07%22/%3E%3Cline%20x1%3D%22209%22%20y1%3D%2229%22%20x2%3D%22219%22%20y2%3D%2270%22%20stroke-opacity%3D%220.13%22/%3E%3Cline%20x1%3D%22209%22%20y1%3D%2229%22%20x2%3D%22223%22%20y2%3D%2237%22%20stroke-opacity%3D%220.19%22/%3E%3Cline%20x1%3D%22209%22%20y1%3D%2229%22%20x2%3D%22207%22%20y2%3D%2265%22%20stroke-opacity%3D%220.15%22/%3E%3Cline%20x1%3D%22278%22%20y1%3D%22260%22%20x2%3D%22317%22%20y2%3D%22299%22%20stroke-opacity%3D%220.11%22/%3E%3Cline%20x1%3D%22278%22%20y1%3D%22260%22%20x2%3D%22255%22%20y2%3D%22257%22%20stroke-opacity%3D%220.18%22/%3E%3Cline%20x1%3D%22278%22%20y1%3D%22260%22%20x2%3D%22256%22%20y2%3D%22184%22%20stroke-opacity%3D%220.05%22/%3E%3Cline%20x1%3D%22219%22%20y1%3D%2270%22%20x2%3D%22223%22%20y2%3D%2237%22%20stroke-opacity%3D%220.15%22/%3E%3Cline%20x1%3D%22219%22%20y1%3D%2270%22%20x2%3D%22207%22%20y2%3D%2265%22%20stroke-opacity%3D%220.20%22/%3E%3Cline%20x1%3D%22219%22%20y1%3D%2270%22%20x2%3D%22283%22%20y2%3D%2294%22%20stroke-opacity%3D%220.08%22/%3E%3Cline%20x1%3D%22317%22%20y1%3D%22299%22%20x2%3D%22255%22%20y2%3D%22257%22%20stroke-opacity%3D%220.06%22/%3E%3Cline%20x1%3D%22308%22%20y1%3D%22125%22%20x2%3D%22362%22%20y2%3D%2291%22%20stroke-opacity%3D%220.09%22/%3E%3Cline%20x1%3D%22308%22%20y1%3D%22125%22%20x2%3D%22320%22%20y2%3D%22117%22%20stroke-opacity%3D%220.20%22/%3E%3Cline%20x1%3D%22308%22%20y1%3D%22125%22%20x2%3D%22328%22%20y2%3D%22135%22%20stroke-opacity%3D%220.18%22/%3E%3Cline%20x1%3D%22308%22%20y1%3D%22125%22%20x2%3D%22256%22%20y2%3D%22184%22%20stroke-opacity%3D%220.05%22/%3E%3Cline%20x1%3D%22308%22%20y1%3D%22125%22%20x2%3D%22283%22%20y2%3D%2294%22%20stroke-opacity%3D%220.14%22/%3E%3Cline%20x1%3D%22385%22%20y1%3D%2215%22%20x2%3D%22362%22%20y2%3D%2291%22%20stroke-opacity%3D%220.05%22/%3E%3Cline%20x1%3D%22362%22%20y1%3D%2291%22%20x2%3D%22320%22%20y2%3D%22117%22%20stroke-opacity%3D%220.12%22/%3E%3Cline%20x1%3D%22362%22%20y1%3D%2291%22%20x2%3D%22328%22%20y2%3D%22135%22%20stroke-opacity%3D%220.10%22/%3E%3Cline%20x1%3D%22362%22%20y1%3D%2291%22%20x2%3D%22283%22%20y2%3D%2294%22%20stroke-opacity%3D%220.05%22/%3E%3Cline%20x1%3D%22223%22%20y1%3D%2237%22%20x2%3D%22207%22%20y2%3D%2265%22%20stroke-opacity%3D%220.16%22/%3E%3Cline%20x1%3D%22255%22%20y1%3D%22257%22%20x2%3D%22230%22%20y2%3D%22183%22%20stroke-opacity%3D%220.05%22/%3E%3Cline%20x1%3D%22255%22%20y1%3D%22257%22%20x2%3D%22256%22%20y2%3D%22184%22%20stroke-opacity%3D%220.07%22/%3E%3Cline%20x1%3D%22230%22%20y1%3D%22183%22%20x2%3D%22256%22%20y2%3D%22184%22%20stroke-opacity%3D%220.17%22/%3E%3Cline%20x1%3D%22320%22%20y1%3D%22117%22%20x2%3D%22328%22%20y2%3D%22135%22%20stroke-opacity%3D%220.19%22/%3E%3Cline%20x1%3D%22320%22%20y1%3D%22117%22%20x2%3D%22283%22%20y2%3D%2294%22%20stroke-opacity%3D%220.13%22/%3E%3Cline%20x1%3D%22302%22%20y1%3D%2220%22%20x2%3D%22283%22%20y2%3D%2294%22%20stroke-opacity%3D%220.06%22/%3E%3Cline%20x1%3D%22328%22%20y1%3D%22135%22%20x2%3D%22283%22%20y2%3D%2294%22%20stroke-opacity%3D%220.10%22/%3E%3C/g%3E%3Cg%20fill%3D%22rgb%28150%2C190%2C235%29%22%20fill-opacity%3D%220.35%22%3E%3Ccircle%20cx%3D%22258%22%20cy%3D%2248%22%20r%3D%221.3%22/%3E%3Ccircle%20cx%3D%22322%22%20cy%3D%2223%22%20r%3D%221.7%22/%3E%3Ccircle%20cx%3D%22299%22%20cy%3D%22115%22%20r%3D%221.6%22/%3E%3Ccircle%20cx%3D%22206%22%20cy%3D%22160%22%20r%3D%222.1%22/%3E%3Ccircle%20cx%3D%22202%22%20cy%3D%22137%22%20r%3D%221.9%22/%3E%3Ccircle%20cx%3D%22209%22%20cy%3D%2229%22%20r%3D%221.3%22/%3E%3Ccircle%20cx%3D%22278%22%20cy%3D%22260%22%20r%3D%222.2%22/%3E%3Ccircle%20cx%3D%22219%22%20cy%3D%2270%22%20r%3D%221.1%22/%3E%3Ccircle%20cx%3D%22317%22%20cy%3D%22299%22%20r%3D%221.5%22/%3E%3Ccircle%20cx%3D%22308%22%20cy%3D%22125%22%20r%3D%221.9%22/%3E%3Ccircle%20cx%3D%22385%22%20cy%3D%2215%22%20r%3D%221.2%22/%3E%3Ccircle%20cx%3D%22362%22%20cy%3D%2291%22%20r%3D%221.6%22/%3E%3Ccircle%20cx%3D%22223%22%20cy%3D%2237%22%20r%3D%221.0%22/%3E%3Ccircle%20cx%3D%22255%22%20cy%3D%22257%22%20r%3D%221.8%22/%3E%3Ccircle%20cx%3D%22230%22%20cy%3D%22183%22%20r%3D%221.9%22/%3E%3Ccircle%20cx%3D%22320%22%20cy%3D%22117%22%20r%3D%221.7%22/%3E%3Ccircle%20cx%3D%22302%22%20cy%3D%2220%22%20r%3D%222.1%22/%3E%3Ccircle%20cx%3D%22207%22%20cy%3D%2265%22%20r%3D%221.4%22/%3E%3Ccircle%20cx%3D%22328%22%20cy%3D%22135%22%20r%3D%221.8%22/%3E%3Ccircle%20cx%3D%22256%22%20cy%3D%22184%22%20r%3D%221.7%22/%3E%3Ccircle%20cx%3D%22283%22%20cy%3D%2294%22%20r%3D%221.7%22/%3E%3Ccircle%20cx%3D%22350%22%20cy%3D%22220%22%20r%3D%221.5%22/%3E%3C/g%3E%3C/svg%3E") right top / 100% auto no-repeat !important;
  }
  /* Überschrift wie Entwurf V2: beide Zeilen gleich groß, zweite Zeile blau */
  body.is-home #start .hero-overlay-title { margin: 0 !important; font-size: clamp(27px, 8vw, 32px) !important; line-height: 1.1 !important; letter-spacing: -0.02em !important; }
  body.is-home #start .hero-overlay-title .line { display: block; text-shadow: none !important; }
  body.is-home #start .hero-overlay-title .accent-blue { color: #2b8aff !important; }
  body.is-home #start .hero-overlay-lead { margin: 14px 0 0 !important; font-size: 15px !important; line-height: 1.5 !important; color: rgba(255,255,255,.78) !important; text-shadow: none !important; }
  body.is-home #start .hero-overlay .hero-overlay-cta { margin: 24px 0 0 !important; gap: 10px !important; }
  body.is-home #start .hero-overlay .hero-overlay-cta a { min-height: 50px; padding: 0 14px !important; font-size: 15px !important; font-weight: 600; display: inline-flex !important; align-items: center; }

  /* Karten (Liste ohne JS, Stapel mit JS) */
  body.is-home #start .hero-content .hero-cards-grid--3 { gap: 12px !important; padding: 30px 20px 10px !important; }
  body.is-home #start .hero-cards-grid--3 .glass-card {
    width: auto !important; height: auto !important; min-height: 112px !important;
    overflow: hidden !important; padding: 14px 44px 14px 14px !important; gap: 12px !important;
  }
  body.is-home #start .hero-cards-grid--3 .glass-card * { text-shadow: none !important; }
  body.is-home #start .hero-cards-grid--3 .gc-shield .shield-stack-wrap,
  body.is-home #start .hero-cards-grid--3 .gc-datacenter .dc-stack-wrap,
  body.is-home #start .hero-cards-grid--3 .gc-globe .globe-wrap,
  body.is-home #start .hero-cards-grid--3 .gc-threat-counter .gc-ai-icon { width: 64px !important; height: 64px !important; }
  body.is-home #start .hero-cards-grid--3 .gc-datacenter .dc-stack-img { height: 64px !important; }
  body.is-home #start .hero-cards-grid--3 .gc-mini-eyebrow,
  body.is-home #start .hero-cards-grid--3 .gc-ai-title { font-size: 12px !important; letter-spacing: .07em !important; line-height: 1.25 !important; }
  body.is-home #start .hero-cards-grid--3 .gc-threat-counter.gc-ai-agent .gc-mini-eyebrow { font-size: 13px !important; }
  body.is-home #start .hero-cards-grid--3 .gc-counter-mid { font-size: 26px !important; line-height: 1.1 !important; margin: 4px 0 2px !important; }
  body.is-home #start .hero-cards-grid--3 .gc-mini-sub { font-size: 13px !important; line-height: 1.3 !important; letter-spacing: 0 !important; }
  body.is-home #start .hero-cards-grid--3 .gc-globe .gc-mini-sub { display: block !important; }
  body.is-home #start .hero-cards-grid--3 .gc-globe .gc-info-btn { display: inline-flex !important; vertical-align: -2px; margin-left: 4px; }
  body.is-home #start .hero-cards-grid--3 .gc-ai-text .gc-ai-full { font-size: 12px !important; letter-spacing: 0 !important; }
  body.is-home #start .hero-cards-grid--3 .gc-ai-desc { font-size: 13px !important; letter-spacing: 0 !important; }
  body.is-home #start .hero-cards-grid--3 .gc-arrow { top: 10px !important; right: 10px !important; }
  /* Pfeil der BSI-Karte öffnet das Kennzahlen-Fenster: 44-px-Trefferfläche (2026-10-02) */
  body.is-home #start .hero-cards-grid--3 .gc-arrow::after { content: ""; position: absolute; inset: -12px; }

  /* Stapel: alle Karten in einer Grid-Zelle, gleich hoch (höchste Karte bestimmt) */
  body.is-home #start .hero-content .hero-cards-grid--3.mh-stack {
    display: grid !important; grid-template: auto / 1fr; gap: 0 !important; padding-bottom: 32px !important;
  }
  body.is-home #start .hero-cards-grid--3.mh-stack .glass-card {
    grid-area: 1 / 1; transform-origin: 50% 100%;
    /* style.css setzt transform:none !important, daher Einzel-Eigenschaften translate/scale */
    transition: translate .45s cubic-bezier(.2,.8,.2,1), scale .45s cubic-bezier(.2,.8,.2,1), opacity .35s ease;
  }
  /* Deckende Flächen, damit die Karten dahinter nicht durchscheinen */
  body.is-home #start .hero-cards-grid--3.mh-stack .gc-globe,
  body.is-home #start .hero-cards-grid--3.mh-stack .gc-shield,
  body.is-home #start .hero-cards-grid--3.mh-stack .gc-datacenter {
    background: linear-gradient(160deg, #1b3768 0%, #11274d 100%) !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    border: 1px solid rgba(255,255,255,.14) !important;
  }
  body.is-home #start .hero-cards-grid--3.mh-stack .gc-threat-counter {
    background: linear-gradient(160deg, #f8fafd 0%, #e7eef9 100%) !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  body.is-home #start .hero-cards-grid--3.mh-stack [data-mh-pos="0"] { z-index: 4; }
  body.is-home #start .hero-cards-grid--3.mh-stack [data-mh-pos="1"] { z-index: 3; translate: 0 10px; scale: .95; }
  body.is-home #start .hero-cards-grid--3.mh-stack [data-mh-pos="2"] { z-index: 2; translate: 0 20px; scale: .9; opacity: .7; }
  body.is-home #start .hero-cards-grid--3.mh-stack [data-mh-pos="3"] { z-index: 1; translate: 0 20px; scale: .9; opacity: 0; }

  /* Blätter-Leiste */
  body.is-home #start .mh-ctrl { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 0 20px; }
  body.is-home #start .mh-ctrl[hidden] { display: none; }
  body.is-home #start .mh-btn {
    width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35); cursor: pointer; padding: 0;
    transition: transform .15s ease, opacity .15s ease; -webkit-tap-highlight-color: transparent;
  }
  body.is-home #start .mh-btn:active { transform: scale(.94); }
  body.is-home #start .mh-btn:focus-visible { outline: 2px solid #2b8aff; outline-offset: 2px; }
  body.is-home #start .mh-dots { display: flex; gap: 8px; }
  body.is-home #start .mh-dots span { width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: .35; transition: opacity .2s ease, transform .2s ease; }
  body.is-home #start .mh-dots span.is-on { opacity: 1; transform: scale(1.35); }
  body.is-home #start .mh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 768px) { body.is-home #start .mh-ctrl { display: none !important; } }
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  body.is-home #start .hero-cards-grid--3.mh-stack .glass-card,
  body.is-home #start .mh-btn, body.is-home #start .mh-dots span { transition: none !important; }
}
