/* =====================================================================
   VORSORGIO – Mobile Stylesheet
   Optimiert für iOS und Android. Greift erst ab ≤ 900 px und überschreibt
   gezielt die Desktop-Layouts aus styles.css. Die Desktop-Version bleibt
   unverändert. Verwendet System-Schriften (DSGVO-konform).
   ===================================================================== */

/* ============ SAFE-AREA SUPPORT (iPhone Notch / Android Gestures) ============ */
@supports(padding:max(0px)){
  body{
    padding-bottom:env(safe-area-inset-bottom);
  }
}

/* ============ MOBILE-NAV ELEMENTE: standardmäßig versteckt (Desktop) ============ */
.mobile-nav-actions{display:none}
.hamburger,
.mobile-account-btn{display:none}
.mobile-drawer,
.mobile-drawer-backdrop{display:none}

/* ====================================================================
   MOBILE BREAKPOINT – die zentrale Optimierungsebene (≤ 900 px).
   Innerhalb dieser Query lebt das mobile Layout.
   ==================================================================== */
@media (max-width: 900px){

  /* ============ TOPBAR: kompakter, Desktop-Nav verstecken ============ */
  header.topbar{
    padding:14px 16px;
    padding-top:max(14px, env(safe-area-inset-top));
    padding-left:max(16px, env(safe-area-inset-left));
    padding-right:max(16px, env(safe-area-inset-right));
    gap:10px;
  }
  .topbar .brand{gap:10px;font-size:18px}
  .topbar .brand .brand-name{font-size:18px}
  .topbar .brand .crest{width:34px;height:34px;font-size:16px}
  .topbar nav{display:none !important}   /* Desktop-Nav komplett ausblenden */

  .mobile-nav-actions{
    display:flex;align-items:center;gap:8px;margin-left:auto;
  }
  .mobile-account-btn{
    display:inline-grid;place-items:center;
    width:42px;height:42px;border-radius:50%;
    background:rgba(201,169,106,.12);border:1px solid rgba(201,169,106,.35);
    color:var(--gold-soft);cursor:pointer;
    transition:background .2s ease, transform .15s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .mobile-account-btn:active{transform:scale(.94)}
  .mobile-account-btn.logged-in{
    background:rgba(31,122,85,.18);border-color:rgba(31,122,85,.45);color:#9adcb5;
  }

  .hamburger{
    display:inline-flex;flex-direction:column;justify-content:center;
    gap:5px;width:44px;height:44px;padding:0 10px;
    background:transparent;border:1px solid rgba(201,169,106,.35);
    border-radius:6px;cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:background .2s ease, border-color .2s ease;
  }
  .hamburger span{
    display:block;height:2px;background:var(--gold-soft);border-radius:2px;
    transform-origin:center;transition:transform .25s ease, opacity .2s ease;
  }
  .hamburger.is-open{
    background:rgba(201,169,106,.18);border-color:var(--gold);
  }
  .hamburger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .hamburger.is-open span:nth-child(2){opacity:0}
  .hamburger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* ============ MOBILE DRAWER ============
     WICHTIG: Backdrop und Drawer duerfen im geschlossenen Zustand KEINE Klicks
     abfangen — sonst blockieren sie den gesamten Viewport (unsichtbar mit
     opacity:0). pointer-events wird nur dann auf 'auto' geschaltet, wenn das
     Element wirklich offen/sichtbar ist. Zusaetzlich respektieren wir das
     HTML [hidden]-Attribut explizit, weil .mobile-drawer-backdrop mit
     display:block sonst die User-Agent-Regel ueberschreiben wuerde. */
  .mobile-drawer-backdrop{
    display:block;position:fixed;inset:0;
    background:rgba(4,19,46,.55);backdrop-filter:blur(2px);
    z-index:998;opacity:0;transition:opacity .28s ease;
    pointer-events:none;
  }
  .mobile-drawer-backdrop[hidden]{display:none}
  .mobile-drawer-backdrop.show{opacity:1;pointer-events:auto}

  .mobile-drawer{
    display:flex;flex-direction:column;
    position:fixed;top:0;right:0;bottom:0;
    width:min(88vw, 340px);
    background:linear-gradient(180deg,var(--navy-950),var(--navy-900) 60%, #06204a);
    color:#fff;z-index:999;
    transform:translateX(105%);transition:transform .32s cubic-bezier(.2,.7,.2,1);
    box-shadow:-8px 0 32px rgba(0,0,0,.4);
    padding-top:max(0px, env(safe-area-inset-top));
    padding-bottom:max(0px, env(safe-area-inset-bottom));
    padding-right:max(0px, env(safe-area-inset-right));
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    pointer-events:none;
  }
  .mobile-drawer.open{transform:translateX(0);pointer-events:auto}
  body.mobile-drawer-open{overflow:hidden;height:100vh;height:100dvh}

  .md-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:18px 20px 16px;border-bottom:1px solid rgba(201,169,106,.22);
  }
  .md-brand{display:flex;align-items:center;gap:12px}
  .md-brand .crest{
    width:38px;height:38px;border-radius:50%;
    background:radial-gradient(circle at 30% 30%, var(--gold-soft), var(--gold) 70%);
    color:var(--navy-900);display:grid;place-items:center;
    font-family:var(--font-heading);font-weight:700;font-size:18px;
  }
  .md-brand-name{
    font-family:var(--font-heading);font-size:20px;font-weight:600;letter-spacing:.4px;
  }
  .md-brand-claim{
    font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
    color:rgba(255,255,255,.5);margin-top:2px;
  }
  .md-close{
    background:rgba(201,169,106,.12);border:1px solid rgba(201,169,106,.3);
    color:var(--gold-soft);width:38px;height:38px;border-radius:50%;
    font-size:22px;line-height:1;cursor:pointer;
    transition:background .2s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .md-close:active{background:rgba(201,169,106,.28)}

  .md-nav{display:flex;flex-direction:column;padding:14px 12px;gap:4px;flex:1}
  .md-nav-item{
    display:flex;align-items:flex-start;gap:14px;text-align:left;
    padding:14px 14px;border-radius:10px;
    background:transparent;border:1px solid transparent;color:#fff;cursor:pointer;
    transition:background .2s ease, border-color .2s ease, transform .12s ease;
    -webkit-tap-highlight-color:transparent;
  }
  .md-nav-item:active,
  .md-nav-item.is-tapped{transform:scale(.985);background:rgba(201,169,106,.12)}
  .md-nav-item.active{
    background:rgba(201,169,106,.14);border-color:rgba(201,169,106,.4);
  }
  .md-nav-ico{
    font-size:18px;width:28px;line-height:1.2;text-align:center;
    color:var(--gold-soft);
  }
  .md-nav-text{display:flex;flex-direction:column;gap:3px}
  .md-nav-text strong{
    font-family:'Inter',sans-serif;font-size:14px;font-weight:600;letter-spacing:.5px;
  }
  .md-nav-text small{
    font-size:11.5px;color:rgba(255,255,255,.55);line-height:1.4;
  }

  .md-foot{padding:14px 16px 22px;border-top:1px solid rgba(201,169,106,.18)}
  .md-account{
    display:flex;align-items:center;justify-content:center;gap:10px;
    width:100%;padding:14px 16px;
    background:linear-gradient(135deg, var(--gold), var(--gold-soft));
    color:var(--navy-900);border:none;border-radius:8px;
    font-weight:700;font-size:13px;letter-spacing:1px;text-transform:uppercase;
    cursor:pointer;-webkit-tap-highlight-color:transparent;
    box-shadow:0 4px 16px rgba(201,169,106,.25);
    transition:transform .15s ease, box-shadow .2s ease;
  }
  .md-account:active{transform:translateY(1px);box-shadow:0 2px 8px rgba(201,169,106,.18)}
  .md-account.logged-in{
    background:linear-gradient(135deg, #1f7a55, #2ea66f);color:#fff;
  }
  .md-trust{
    display:flex;flex-wrap:wrap;justify-content:center;gap:6px 8px;
    margin-top:14px;font-size:10.5px;letter-spacing:.5px;
    color:rgba(255,255,255,.55);text-transform:uppercase;
  }

  /* ============ GENERAL BODY ============ */
  body{font-size:15px}

  /* ============ HERO ============ */
  .hero{padding:32px 18px 48px}
  .hero-inner{grid-template-columns:1fr;gap:24px}
  .hero h1{font-size:32px;line-height:1.15;letter-spacing:-.5px}
  .hero h1 em{font-size:.95em}
  .hero .lede{font-size:14.5px;line-height:1.55}
  .hero .ornament{font-size:10.5px;letter-spacing:1.5px}
  .hero .meta{
    grid-template-columns:repeat(3,1fr);gap:10px;
    padding:14px 12px;
  }
  .hero .meta div{padding:6px 4px}
  .hero .meta span{font-size:9.5px;letter-spacing:1.2px}
  .hero .meta strong{font-size:13px}

  .hero-card{padding:22px 20px;border-radius:12px}
  .hero-card h3{font-size:18px}
  .hero-card ul{font-size:13.5px}
  .hero-card li{padding:6px 0}

  /* CTA mobil – satte Touch-Größe (mind. 56 px) */
  .cta, .cta-secondary{
    min-height:56px;padding:16px 22px;font-size:14px;letter-spacing:1.3px;
    border-radius:10px;
    -webkit-tap-highlight-color:transparent;
    transition:transform .12s ease, box-shadow .2s ease;
    width:100%;justify-content:center;
  }
  .cta:active,
  .cta.is-tapped{transform:scale(.985)}
  .hero .cta{width:100%}

  /* ============ STATS-SECTION ============ */
  .stats-section{padding:48px 18px 56px}
  .stats-head h2{font-size:26px;line-height:1.2;letter-spacing:-.3px}
  .stats-head p{font-size:14px;line-height:1.55}
  .big-stats{
    grid-template-columns:repeat(2,1fr);gap:10px;
  }
  .big-stat{padding:18px 14px 16px;border-radius:10px}
  .bs-value{font-size:36px;line-height:1}
  .bs-unit{font-size:18px}
  .bs-label{font-size:11.5px;letter-spacing:1.2px;margin-top:4px}
  .bs-desc{font-size:11.5px;line-height:1.45;margin-top:8px}

  .detail-stats{grid-template-columns:1fr;gap:10px}
  .detail-stat-card{padding:16px 14px;border-radius:10px}
  .dsc-icon{font-size:24px;width:36px;height:36px}
  .dsc-headline{font-size:14px}
  .dsc-text{font-size:13px;line-height:1.5}

  .generation-compare{padding:28px 18px;border-radius:12px}
  .gc-head h3{font-size:20px;line-height:1.25}
  .gc-timeline{grid-template-columns:1fr;gap:14px}
  .gc-point{padding:18px 14px}
  .gc-year{font-size:13px;letter-spacing:1.5px}
  .gc-value{font-size:40px}
  .gc-label{font-size:11px;letter-spacing:1px}
  .gc-context{font-size:12.5px;line-height:1.5}
  .gc-connector{display:none}

  .stats-sources{font-size:11.5px;line-height:1.55;padding:14px}
  .stats-cta-wrap{padding:32px 18px 14px}
  .stats-cta-headline{font-size:22px;line-height:1.25}
  .stats-cta-sub{font-size:13.5px}
  .stats-cta-btn{font-size:13px !important;padding:16px 24px !important;width:100%}

  /* ============ PANELS / SECTION-HEADS ============ */
  section.panel{padding:40px 16px}
  .section-head{margin-bottom:22px}
  .section-head h2{font-size:26px;line-height:1.2;letter-spacing:-.3px}
  .section-head p{font-size:14px;line-height:1.55}

  /* Legal notices kompakter */
  .legal-notice{
    padding:14px 14px;font-size:12px;line-height:1.5;border-radius:8px;
  }
  .legal-notice strong{font-size:12.5px}

  /* ============ MODE-PICKER (Schnell / Ausführlich) ============ */
  .mode-picker{grid-template-columns:1fr;gap:14px;margin-top:14px}
  .mode-card{padding:24px 18px 20px;border-radius:14px}
  .mode-card h3{font-size:22px;line-height:1.2}
  .mode-card p{font-size:13.5px;line-height:1.5}
  .mode-badge{font-size:10.5px;letter-spacing:1.2px;padding:5px 10px}
  .mode-time{font-size:11px;letter-spacing:1.5px;margin-top:4px}
  /* WICHTIG: padding-left MUSS bleiben, sonst ueberlappt der ✓-Bullet
     (position:absolute; left:0) den Text. Shorthand-Override killt sonst
     die Desktop-Regel padding:8px 0 8px 24px. */
  .mode-features li{font-size:13px;padding:5px 0 5px 22px;line-height:1.45}
  .mode-cta{width:100%}

  /* ============ FRAGEBOGEN ============ */
  .questionnaire{border-radius:14px;overflow:hidden}
  .progress-bar{padding:14px 18px;flex-wrap:wrap;gap:8px 12px}
  .progress-bar .step-info{font-size:11px;letter-spacing:1.2px;flex-shrink:0}
  .progress-bar .progress-track{
    order:3;width:100%;flex-basis:100%;margin-top:4px;height:5px;
  }
  .progress-fill{height:5px}

  .q-mode-indicator{
    padding:10px 18px;flex-direction:row;align-items:center;
    gap:10px;flex-wrap:wrap;
  }
  .qmi-label{font-size:11px;letter-spacing:1.2px}
  .qmi-switch{font-size:11px;padding:6px 10px}

  .q-body{padding:24px 18px 30px}
  .q-step{padding:0}
  .q-label{font-size:18px;line-height:1.3;margin-bottom:6px}
  .q-hint{font-size:12.5px;line-height:1.5;margin-bottom:18px}
  .q-sublabel{font-size:11.5px;letter-spacing:1.2px;margin-bottom:8px}

  .q-combo{grid-template-columns:1fr;gap:22px}
  .q-combo-block{padding:0}

  .q-grid, .q-multi,
  .q-grid.q-grid-compact{
    grid-template-columns:1fr;gap:8px;
  }
  .q-grid.q-grid-compact .q-option{
    font-size:14px;padding:14px 16px;gap:12px;
  }
  .q-grid.q-grid-compact .q-option .opt-circle{
    width:20px;height:20px;
  }
  .q-option{
    min-height:54px;padding:14px 16px;font-size:14px;line-height:1.35;
    border-radius:10px;justify-content:flex-start;
    -webkit-tap-highlight-color:transparent;
  }
  .q-option .opt-circle{flex-shrink:0;margin-right:2px}
  .q-option:active,
  .q-option.is-tapped{transform:scale(.985)}

  /* Slider: dickere Bahn + größere Daumen für Touch */
  .slider-wrap{margin-top:6px}
  .slider-value{font-size:24px;letter-spacing:.5px}
  .slider-value .unit{font-size:11px;letter-spacing:1px;margin-left:6px}
  input[type=range]{
    height:38px;width:100%;background:transparent;-webkit-appearance:none;
  }
  input[type=range]::-webkit-slider-runnable-track{
    height:6px;background:linear-gradient(90deg, var(--gold) 0%, var(--gold-soft) 50%, var(--line) 50%);
    border-radius:3px;
  }
  input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;appearance:none;
    width:28px;height:28px;border-radius:50%;
    background:#fff;border:3px solid var(--gold);
    box-shadow:0 2px 8px rgba(0,0,0,.18);
    margin-top:-11px;cursor:pointer;
  }
  input[type=range]::-moz-range-thumb{
    width:28px;height:28px;border-radius:50%;
    background:#fff;border:3px solid var(--gold);
    box-shadow:0 2px 8px rgba(0,0,0,.18);cursor:pointer;
  }

  /* Number-Inputs: 16px Mindest-Schrift verhindert Zoom auf iOS */
  .q-input, input[type=number].q-input, .input-suffix input{
    font-size:16px;padding:14px 14px;border-radius:8px;
  }
  .input-suffix{position:relative}
  .input-suffix::after{font-size:12px}

  /* Quiz-Navigation als sticky Bottom-Bar */
  .q-nav{
    position:sticky;bottom:0;
    padding:14px 18px;
    padding-bottom:calc(14px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg, rgba(255,255,255,.0) 0%, #fff 30%);
    border-top:1px solid var(--line);
    z-index:5;
    gap:10px;
  }
  .q-nav .btn-secondary,
  .q-nav .btn-primary{
    min-height:50px;font-size:13px;letter-spacing:1.2px;padding:14px 18px;
    border-radius:8px;flex:1;
  }
  body.quiz-active .floating-gauge{display:none !important}

  /* ============ RESULTS / GAP-HERO ============ */
  .gap-hero{
    grid-template-columns:1fr;gap:24px;padding:24px 18px;
    border-radius:14px;
  }
  .gap-summary h2{font-size:24px;line-height:1.2}
  .gap-summary p{font-size:13.5px}
  .gap-stats{grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
  .gap-stat{padding:14px 12px}
  .gap-stat .lbl{font-size:10.5px;letter-spacing:1px;line-height:1.35}
  .gap-stat .val{font-size:22px;letter-spacing:-.3px}
  .gap-stat.editable{grid-column:1 / -1}
  .need-presets{
    display:grid;grid-template-columns:repeat(4,1fr);gap:6px;
  }
  .need-presets button{
    font-size:11px;padding:8px 4px;letter-spacing:.4px;min-height:36px;
  }
  .need-cue{font-size:9.5px}
  .need-fine input[type=range]{height:32px}
  .need-fine-hint{font-size:10.5px}

  .gap-chart{padding:16px 8px;background:rgba(255,255,255,.04);border-radius:10px}
  .gap-chart canvas{max-height:240px !important}

  .assumptions{padding:16px 14px;font-size:12.5px;line-height:1.55}
  .assumptions strong{font-size:12px;letter-spacing:1px}
  .assumptions ul{padding-left:0}
  /* padding-left:16px reserviert Platz fuer den 5-px-Gold-Bullet (::before
     mit position:absolute; left:0). Ohne ihn klebt der Bullet am Text. */
  .assumptions li{padding:3px 0 3px 16px}

  /* ============ BAUKASTEN / PRODUKT-PILLARS ============
     WICHTIG: 1fr im Grid expandiert zu min-content der Items, sobald irgendwo
     ein nicht-umbrechbares Element existiert. Auf Mobile fuehrt das zu
     horizontalem Overflow (Pillar wird breiter als der 343-px-Viewport).
     Loesung: minmax(0, 1fr) erzwingt die Container-Breite, und min-width:0
     bricht die min-content-Vererbung in Grid-Children. */
  .products-section{margin-top:32px}
  .product-intro h2{font-size:24px;line-height:1.2}
  .product-intro p{font-size:14px}
  .product-pillars{grid-template-columns:minmax(0,1fr);gap:14px}
  .pillar{padding:18px 14px;border-radius:12px;min-width:0}
  .pillar-head{flex-wrap:wrap;gap:10px}
  .pillar-title{font-size:16px}
  .pillar-sub{font-size:12px}
  .pillar-num{width:38px;height:38px;font-size:15px}
  .pillar-priority{font-size:9px;padding:3px 6px;letter-spacing:1.4px;margin-left:8px}

  .product-row{
    padding:14px 12px;border-radius:10px;
  }
  .p-row-header{
    grid-template-columns:auto 1fr;gap:8px;align-items:flex-start;
  }
  .product-row .p-icon{width:34px;height:34px;font-size:16px}
  .product-row .p-meta{min-width:0}
  /* Korrekte Klassennamen sind .p-title und .p-desc (NICHT .p-name/.p-tagline —
     existieren im HTML nicht). Spezifitaet: Desktop nutzt .product-row .p-title
     (0,2,0) — wir muessen die gleiche Spezifitaet matchen, damit der Override
     greift, sonst bleibt die 16px-Desktop-Schrift bestehen. */
  .product-row .p-title{font-size:14.5px;line-height:1.25}
  .product-row .p-desc{font-size:11.5px;line-height:1.4;margin-top:2px}
  .p-contrib-inline{
    grid-column:1 / -1;margin-top:6px;justify-self:stretch;
    display:flex;align-items:center;justify-content:space-between;
    background:rgba(0,0,0,.04);padding:8px 10px;border-radius:8px;
  }
  .p-contrib-input{
    font-size:16px;width:90px;padding:6px 8px;
  }
  .p-result-val{font-size:20px}

  .p-numbers-flow{
    grid-template-columns:1fr;gap:8px;padding:12px;border-radius:10px;
  }
  .pnf-cost-val{font-size:22px}
  .pnf-result-val{font-size:20px}
  .pnf-arrow{transform:rotate(90deg);justify-self:center}
  .pnf-cost,.pnf-result,.pnf-context{padding:10px 12px}
  .pnf-context{font-size:12px;line-height:1.45}

  /* Affiliate-CTA innerhalb Bausteine: prominent + Touch-Größe */
  .affiliate-compare-btn{
    padding:14px 14px;border-radius:10px;width:100%;
    grid-template-columns:1fr auto;gap:8px;
  }
  .affiliate-compare-btn .acb-main{font-size:12.5px;letter-spacing:.6px}
  .affiliate-compare-btn .acb-sub{font-size:10.5px}
  .affiliate-compare-btn .acb-tag{
    position:static;align-self:center;font-size:9px;padding:3px 6px;
  }

  /* Action-Buttons (i / Chart / Vergleich) auf Mobile in eigene Zeile oben.
     Absolute-Positionierung ueberlappte den Titel ("Fondsgebun..." abgeschnitten),
     da 3x 32-px-Buttons + Gaps ~108 px vom Header-Bereich wegnahmen. */
  .p-actions{
    position:static;display:flex;justify-content:flex-end;
    gap:6px;margin-bottom:8px;
  }
  .p-action-btn{
    width:32px;height:32px;border-radius:8px;
    -webkit-tap-highlight-color:transparent;
  }

  .pillar-add-btn{
    width:100%;padding:14px;border-radius:10px;font-size:11.5px;letter-spacing:1.4px;
    min-height:50px;margin-top:14px;
  }
  .pillar-add-btn .add-icon{width:22px;height:22px;font-size:16px}

  /* ============ WATERFALL / WF-BAR ============ */
  .closing{padding:0}
  .closing-head h3{font-size:22px;line-height:1.2}
  .closing-head p{font-size:13.5px}
  .budget-banner{
    grid-template-columns:1fr;gap:12px;padding:16px;border-radius:10px;
  }
  .bb-arrow{display:none}
  .bb-col.right{text-align:left}
  .waterfall{padding:20px 14px;border-radius:12px;margin-top:18px}
  .wf-title{flex-direction:column;align-items:flex-start;gap:6px;font-size:13px}
  .wf-title-need{font-size:11.5px;letter-spacing:.5px}
  .wf-bar{height:32px}
  .wf-scale{font-size:11px}
  .wf-legend{
    grid-template-columns:1fr;gap:6px;font-size:12px;
  }
  .wf-legend > div{padding:6px 8px}

  /* ============ GAUGE-ROW ============ */
  .gauge-row{grid-template-columns:1fr;gap:18px;margin-top:18px}
  .gauge-wrap{justify-self:center}
  .gauge-wrap canvas{max-width:280px;width:100% !important;height:auto !important}
  .gauge-center .pct{font-size:42px}
  .gauge-center .lbl{font-size:11px;letter-spacing:1.2px}
  .gauge-center .extra{font-size:12px}
  .scenario-box{padding:18px 14px;border-radius:12px}
  .scenario-box h4{font-size:14px;letter-spacing:1.2px}
  .sc-row{padding:8px 0;font-size:13px}
  .sc-val{font-size:14px}
  .total-bar{margin-top:12px;padding:14px 12px;flex-direction:column;align-items:flex-start;gap:6px}
  .total-bar .val{font-size:22px}
  .total-bar .lbl{font-size:11px;letter-spacing:1.2px}

  /* ============ BRIDGE-CTA (Loss-Aversion) ============
     Auf Mobile als prominente Conversion-Box gestaltet – führt zu Check24. */
  .bridge-cta{
    padding:24px 18px 26px;border-radius:14px;margin-top:24px;
    position:relative;overflow:hidden;
  }
  .bridge-cta::after{
    /* feiner Gold-Glow als psychologischer „Belohnungs"-Akzent */
    content:"";position:absolute;inset:auto -40% -60% -40%;
    height:140px;
    background:radial-gradient(ellipse at center, rgba(201,169,106,.18), transparent 70%);
    pointer-events:none;
  }
  .bridge-cta h3{font-size:22px;line-height:1.2;position:relative;z-index:1}
  .bridge-cta-intro{font-size:13.5px;line-height:1.55;position:relative;z-index:1}
  .bridge-cta-figures{
    flex-direction:column;flex-wrap:nowrap;
    gap:8px;padding:14px;border-radius:10px;
    align-items:stretch;
  }
  .bcf-item{
    flex:1 1 auto;min-width:0;
    padding:12px 14px;text-align:center;
  }
  .bcf-val{font-size:22px}
  .bcf-lbl{font-size:11px;letter-spacing:.8px;margin-top:2px}
  .bcf-mult{font-size:18px;text-align:center;padding:2px 0}
  .bcf-total .bcf-val{font-size:26px;color:var(--gold)}
  .bridge-cta-solution{font-size:13.5px;line-height:1.55;margin-top:12px;position:relative;z-index:1}
  .bridge-cta-btn{
    position:relative;z-index:1;
    width:100%;padding:18px 22px;font-size:14px;letter-spacing:.8px;
    min-height:60px;justify-content:center;font-weight:700;
    box-shadow:0 6px 20px rgba(201,169,106,.25), 0 0 0 1px rgba(201,169,106,.15);
    border-radius:12px;
  }
  .bridge-cta-btn:active{transform:translateY(1px);box-shadow:0 3px 10px rgba(201,169,106,.18)}
  .bridge-cta-meta{font-size:11px;line-height:1.5;margin-top:10px;position:relative;z-index:1}
  /* Multiplikatoren (× / =) als horizontale, klare Symbole */
  .bcf-mult{
    font-size:20px;text-align:center;padding:2px 0;
    color:var(--gold);font-weight:700;line-height:1;
  }

  /* ============ SUMMARY-SECTION ============
     Korrekter Klassenname ist .summary-item (NICHT .summary-card — der
     existiert im HTML nicht und ohne Override behaelt das Item das Desktop-
     Padding 26px/28px + min-height:160px, was auf Mobile uebertrieben wirkt. */
  .summary-section{padding:28px 18px;margin-top:28px}
  .summary-head h3{font-size:22px;line-height:1.25}
  .summary-grid{grid-template-columns:minmax(0,1fr);gap:10px;margin-bottom:24px}
  .summary-item{
    padding:16px 14px;border-radius:10px;
    min-height:0;gap:12px;min-width:0;
  }
  .summary-item .si-icon{width:38px;height:38px;font-size:17px}
  .summary-item .si-title{font-size:14.5px;margin-bottom:6px;line-height:1.3}
  .summary-item .si-text{font-size:12.5px;line-height:1.55}
  .summary-cta{padding:18px 14px;border-radius:12px;margin-top:14px;font-size:14.5px;line-height:1.5}
  .summary-cta h4{font-size:16px}

  /* ============ FINAL-CTA ============ */
  .final-cta{padding:32px 18px 14px;text-align:center}
  .final-cta h3{font-size:22px;line-height:1.2}
  .final-cta p{font-size:13.5px;line-height:1.55}
  .final-cta-actions{flex-direction:column;gap:10px;margin-top:18px}
  .final-cta-actions .cta,
  .final-cta-actions .cta-secondary{width:100%;justify-content:center}
  .cta-disclaimer{font-size:11.5px;line-height:1.55;margin-top:14px}

  /* ============ FLOATING GAUGE ============ */
  .floating-gauge{
    bottom:14px;right:14px;width:64px;height:64px;
    bottom:calc(14px + env(safe-area-inset-bottom));
  }
  .fg-ring{width:56px;height:56px}
  .fg-pct{font-size:13px}
  .fg-label{display:none}

  /* ============ MODALS: als Bottom-Sheet ============ */
  .modal-backdrop{padding:0;align-items:flex-end}
  .modal-backdrop.open{padding:0}
  .modal, .modal.modal-large{
    /* !important benötigt, da einige Modals inline-style "max-width:520px" haben */
    width:100% !important;max-width:100% !important;
    max-height:92vh;max-height:92dvh;
    border-radius:18px 18px 0 0;
    margin:0;padding-bottom:env(safe-area-inset-bottom);
    animation:slideUpMobile .32s cubic-bezier(.2,.7,.2,1);
    box-shadow:0 -16px 48px rgba(0,0,0,.35);
  }
  @keyframes slideUpMobile{
    from{transform:translateY(40%);opacity:.7}
    to{transform:translateY(0);opacity:1}
  }
  .modal-head{
    padding:18px 20px 14px;position:relative;
  }
  .modal-head::before{
    content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);
    width:42px;height:4px;border-radius:2px;background:rgba(0,0,0,.18);
  }
  .modal-head h3{font-size:18px;line-height:1.25;padding-right:36px}
  .modal-head .ornament{font-size:10px;letter-spacing:1.2px}
  .modal-close{
    width:38px;height:38px;font-size:24px;
    -webkit-tap-highlight-color:transparent;
  }
  .modal-body{padding:18px 20px;font-size:14px;line-height:1.6}
  .modal-foot{
    padding:14px 20px;flex-direction:column;gap:8px;
    padding-bottom:calc(14px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line);
  }
  .modal-foot.single{flex-direction:column}
  .modal-foot .btn-primary,
  .modal-foot .btn-secondary{
    width:100%;min-height:50px;font-size:13px;justify-content:center;
  }
  .modal-field label{font-size:11px;letter-spacing:1.2px}
  .modal-field input,
  .modal-field select{
    font-size:16px;padding:13px 14px;border-radius:8px;
  }
  .modal-input-suffix input{font-size:16px;padding:13px 14px}

  /* Growth-Modal spezial */
  .growth-contrib-slider{padding:14px;border-radius:10px}
  .gcs-head{flex-direction:column;align-items:stretch;gap:8px}
  .gcs-label{font-size:11.5px;letter-spacing:1px}
  .gcs-hint{font-size:11px;display:block;margin-top:2px}
  .gcs-value-wrap input{font-size:18px;width:100%;text-align:right}
  .gcs-presets{
    display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
  }
  .gcs-presets button{
    flex:1 0 calc(33.33% - 6px);min-height:38px;font-size:12px;
  }
  .growth-meta{grid-template-columns:repeat(2,1fr);gap:10px}
  .growth-meta-col{padding:10px 12px}
  .growth-meta-col .lbl{font-size:10.5px}
  .growth-meta-col .val{font-size:18px}
  .growth-chart-wrap canvas{max-height:240px !important;width:100% !important}
  .etf-grid{grid-template-columns:1fr;gap:8px}
  .etf-card{padding:12px}
  .etf-disclaimer{font-size:11px;line-height:1.5}
  .rente-info-box{font-size:12.5px;line-height:1.55;padding:14px}

  /* ============ ACCOUNT-MODAL ============ */
  .account-view{padding:0}
  .account-tabs{margin-bottom:18px}
  .account-tab{font-size:11px;letter-spacing:1.2px;padding:12px 6px}
  .account-intro{font-size:13px;line-height:1.55}
  .account-field input{font-size:16px;padding:13px 14px;border-radius:8px}
  .account-field label{font-size:11px;letter-spacing:1.2px}
  .account-checkbox{padding:12px;border-radius:8px}
  .account-checkbox label{font-size:12.5px;line-height:1.5}
  .account-submit{min-height:52px;font-size:13px}
  .account-import-btn{min-height:50px}
  .account-divider{font-size:10px;letter-spacing:1.5px}
  .account-privacy-note{font-size:12px;line-height:1.55;padding:12px 14px}
  .profile-header{flex-direction:row;align-items:center;gap:12px;padding:12px;border-radius:10px}
  .profile-avatar{width:46px;height:46px}
  .profile-name{font-size:15px}
  .profile-email{font-size:12px}
  .profile-status{padding:10px 12px;font-size:12.5px}
  .scenario-item{padding:10px 12px}
  .scenario-item .si-name{font-size:13.5px}
  .scenario-item .si-meta{font-size:11px}

  /* ============ WISSEN ============ */
  .learn-hero{padding:36px 18px 28px}
  .learn-hero h1{font-size:30px;line-height:1.2;letter-spacing:-.3px}
  .learn-hero h1 em{font-size:.95em}
  .learn-hero .lede{font-size:14px;line-height:1.55}
  .learn-tabs{
    display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding-bottom:6px;margin-bottom:18px;
    scroll-snap-type:x mandatory;
  }
  .learn-tabs::-webkit-scrollbar{display:none}
  .learn-tab{
    flex:0 0 auto;font-size:11.5px;padding:10px 14px;letter-spacing:1px;
    border-radius:50px;min-height:40px;scroll-snap-align:start;
  }
  .learn-grid{grid-template-columns:1fr;gap:12px}
  .learn-card{padding:18px 14px;border-radius:12px}
  .learn-card h3{font-size:17px;line-height:1.25}
  .learn-card p{font-size:13px;line-height:1.5}
  .learn-card-icon{font-size:24px;width:40px;height:40px}
  .learn-cta{padding:32px 18px;border-radius:14px}
  .learn-cta h3{font-size:22px;line-height:1.2}
  .learn-cta p{font-size:13.5px}
  .faq-list{gap:6px}
  .faq-item{border-radius:10px}
  .faq-question{padding:14px 16px;font-size:14px;line-height:1.35}
  .faq-answer{padding:0 16px 14px;font-size:13px;line-height:1.55}
  .topic-key-facts{grid-template-columns:1fr;gap:8px}
  .topic-modal-body h4{font-size:15px}
  .topic-recommendation{padding:14px;font-size:13px}

  /* ============ TARIFE ============ */
  .tarife-layer-head{padding:24px 4px 14px}
  .tarife-layer-num{font-size:11px;letter-spacing:1.5px;padding:5px 12px}
  .tarife-layer-title{font-size:24px;line-height:1.2}
  .tarife-layer-desc{font-size:13.5px;line-height:1.55}
  .tarife-section{padding:24px 16px}
  .tarife-grid,
  .tarife-grid-3col{grid-template-columns:1fr;gap:14px}
  .tarife-card{padding:20px 16px;border-radius:14px}
  .tarife-card-head{gap:10px;margin-bottom:10px}
  .tarife-card-head h3{font-size:17px;line-height:1.25}
  .tarife-subline{font-size:11.5px}
  .tarife-icon{width:42px;height:42px;font-size:20px}
  .tarife-lead{font-size:13.5px;line-height:1.55}
  .tarife-meta-row{font-size:12.5px;padding:8px 10px;line-height:1.45}
  .tarife-meta-row span{font-size:10.5px;letter-spacing:1px}
  .tarife-pro li,
  .tarife-con li{font-size:13px;line-height:1.5;padding:4px 0 4px 20px}
  .tarife-cta{
    min-height:52px;padding:14px 18px;font-size:12.5px;
    width:100%;justify-content:center;letter-spacing:.6px;
  }
  .tarife-cta-neutral{min-height:48px}
  .tarife-tag{font-size:10px;line-height:1.4}
  .tarife-mini-grid{grid-template-columns:1fr;gap:10px}
  .tarife-mini-card{padding:16px 14px;border-radius:12px}
  .tmc-head{gap:10px;margin-bottom:8px}
  .tmc-head h4{font-size:15px;line-height:1.25}
  .tmc-sub{font-size:11.5px}
  .tmc-icon{width:38px;height:38px;font-size:18px}
  .tmc-lead{font-size:13px;line-height:1.5}
  .tarife-cta-mini{min-height:46px;font-size:12px}
  .tarife-market{padding:24px 16px;border-radius:14px}
  .tarife-market h3{font-size:20px}
  .tarife-market-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .tarife-market-item{padding:12px 10px}
  .tmi-val{font-size:18px}
  .tmi-lbl{font-size:11px;line-height:1.35}
  .tmi-src{font-size:10px;margin-top:4px}

  /* ============ ÜBER UNS / CONTACT ============ */
  .contact-grid,
  .contact-grid-two{grid-template-columns:1fr;gap:14px}
  .contact-card{padding:22px 18px;border-radius:14px}
  .contact-card h3{font-size:18px}
  .contact-card p{font-size:13.5px;line-height:1.55}
  .c-icon{font-size:28px;width:50px;height:50px}
  .c-sub{font-size:12px}
  .about-disclaimer{padding:14px;font-size:12px;line-height:1.55}
  .about-partner{padding:20px 16px;border-radius:12px}
  .about-partner-link{font-size:14px;line-height:1.4}
  .about-partner-tag{font-size:10.5px}

  /* ============ FOOTER ============ */
  footer{padding:24px 16px 18px}
  .footer-inner{text-align:center}
  .footer-brand{font-size:12px;letter-spacing:4px}
  .footer-tagline{font-size:12px;margin-top:6px}
  .footer-disclaimer{font-size:11px;line-height:1.55;margin-top:14px;text-align:left}
  .footer-links{flex-wrap:wrap;justify-content:center;gap:6px 12px;margin-top:14px}
  .footer-link{font-size:12px;padding:6px 4px;min-height:36px}
  .footer-sep{display:none}
  .footer-copyright{font-size:10.5px;line-height:1.5;margin-top:14px}

  /* ============ APP-DIALOG ============ */
  .app-dialog-message{font-size:13.5px;line-height:1.55}
  .app-dialog-input-wrap label{font-size:11px;letter-spacing:1.2px}
  .app-dialog-input-wrap input{font-size:16px;padding:12px}
  #appDialogFoot{flex-direction:column;gap:8px}
  #appDialogFoot button{width:100%;min-height:48px}

  /* ============ ZAHLEN-EINGABE: Pfeile entfernen (saubere Mobile-Optik) ============ */
  input[type=number]::-webkit-outer-spin-button,
  input[type=number]::-webkit-inner-spin-button{
    -webkit-appearance:none;margin:0;
  }
  input[type=number]{-moz-appearance:textfield}

}

/* =====================================================================
   FEINJUSTIERUNG für sehr kleine Screens (≤ 380 px, iPhone SE etc.)
   ===================================================================== */
@media (max-width: 380px){
  .hero h1{font-size:28px}
  .hero .meta{grid-template-columns:1fr;gap:6px;padding:12px}
  .hero .meta div{padding:6px 4px;text-align:left;border-left:2px solid var(--gold);padding-left:10px;border-top:none}
  .stats-head h2{font-size:23px}
  .big-stats{grid-template-columns:1fr}
  .bs-value{font-size:42px}
  .gap-stats{grid-template-columns:1fr;gap:8px}
  .gap-stat.editable{grid-column:1}
  .section-head h2{font-size:22px}
  .tarife-layer-title{font-size:21px}
  .tarife-market-grid{grid-template-columns:1fr}
  .need-presets{grid-template-columns:repeat(2,1fr)}
  .mode-card h3{font-size:20px}
  .q-label{font-size:16.5px}
  .gauge-wrap canvas{max-width:240px}
  .gauge-center .pct{font-size:36px}
  .bcf-total .bcf-val{font-size:23px}
  .md-brand-name{font-size:18px}
}

/* =====================================================================
   QUERFORMAT (Landscape) auf kleinen Geräten: Drawer breiter, Hero kompakter
   ===================================================================== */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px){
  .hero{padding:24px 18px 32px}
  .hero h1{font-size:26px}
  .hero .meta{grid-template-columns:repeat(3,1fr)}
  .modal,.modal.modal-large{max-height:96vh;max-height:96dvh}
  .mobile-drawer{width:min(70vw, 380px)}
}

/* =====================================================================
   DARK-MODE-FRIENDLY TOUCH (Android Material You / iOS Dark)
   – Schriftfarbe in Modals immer dunkel auf hellem Hintergrund
   – Hintergrund-Backdrop-Filter funktioniert auch im Dark Mode
   ===================================================================== */
@media (max-width: 900px){
  /* Keine echte Dark-Mode-Umfärbung (CI = navy/cream), aber Touch-Highlights
     deaktivieren, damit kein blauer iOS-Tap-Effekt entsteht. */
  a, button, .q-option, .md-nav-item, .cta, .cta-secondary,
  .modal-close, .footer-link, .learn-tab, .tarife-cta, .tarife-cta-mini{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
  }
  /* Smooth-Scrolling auf iOS aktiviert */
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
  body{-webkit-overflow-scrolling:touch}
}

/* =====================================================================
   REDUCED-MOTION (Accessibility / iOS-Einstellung „Bewegung reduzieren")
   ===================================================================== */
@media (max-width: 900px) and (prefers-reduced-motion: reduce){
  .mobile-drawer{transition:none}
  .modal,.modal.modal-large{animation:none}
  .cta:active,.cta-secondary:active,.q-option:active,.md-nav-item:active{transform:none}
}