/* =============================================================
   Aufgabe 3 — Platform Mobile/Tablet Polish
   Ergänzt app/styles.css mit zusätzlichen Mobile-Fixes für die
   gesamte Plattform (Header, Audience-Pages, Map, Member,
   Dashboards, Footer, Demo-Frame).
   Eingebunden in Aufgabe3.html und klimagesund.html.
   ============================================================= */

/* ============== TABLET (≤ 1024px) ============== */
@media (max-width: 1024px) {
  /* Mega-Panel: 4-Spalten → 1-Spalten Liste */
  .mega-panel > div[style*="grid-template-columns: 240px"],
  .mega-panel > div[style*="gridTemplateColumns"] {
    grid-template-columns: 1fr !important;
    padding: 20px !important;
    gap: 20px !important;
  }
  /* Platform-Frame in der Pitch-Variante: keine starre Breite */
  .platform-frame { border-radius: 10px !important; }
  .platform-frame__url { font-size: 11px !important; padding: 4px 10px !important; }

  /* Footer 5-Spalten → 2-Spalten (in styles.css schon, aber doppelt sicher) */
  footer > div > div > div[style*="1.4fr 1fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
  }

  /* ProjekteScreen Karten+Liste-Layout: nicht mehr sticky-side */
  div[style*="grid-template-columns: 1.3fr 1fr"][style*="align-items: start"] > div[style*="sticky"] {
    position: static !important;
  }

  /* MemberDashboard 3-Spalten KPI */
  div[style*="grid-template-columns: 2fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Hero des Audience-Landing — Foto kleiner */
  .audience-hero [style*="aspect-ratio: 4 / 5"] {
    aspect-ratio: 4 / 3 !important;
  }
}

/* ============== MOBILE (≤ 768px) ============== */
@media (max-width: 768px) {
  /* Header-Logo + Buttons enger packen */
  .platform-header > div[style*="grid-template-columns: auto 1fr auto"] {
    grid-template-columns: auto auto !important;
    justify-content: space-between !important;
    padding: 10px 16px !important;
    gap: 12px !important;
  }
  /* Search-Button auf Mobile ausblenden — Suche im Mega-Menü */
  .platform-header button[aria-label*="Suche"],
  .platform-header button[aria-label*="search"] {
    display: none !important;
  }
  /* Mitgliederbereich-Button kompakter */
  .platform-header .btn--leaf {
    padding: 7px 10px !important;
    font-size: 12px !important;
  }

  /* Mega-Panel auf Mobile ausblenden — vorhandene mega-nav ist eh hidden */
  .mega-panel { display: none !important; }

  /* Demo-Nav (Quick-Tabs in der Pitch-Variante) scrollbar */
  .demo-nav {
    padding: 6px !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    -webkit-overflow-scrolling: touch;
  }
  .demo-nav button { flex-shrink: 0; font-size: 11.5px !important; padding: 6px 12px !important; }

  /* Browser-Chrome im Demo: kürzer */
  .platform-frame__chrome { padding: 8px 12px !important; gap: 8px !important; }
  .platform-frame__url { font-size: 10.5px !important; }

  /* AudienceLandingPage Hero — Vertical-Stack */
  .audience-hero {
    margin-top: -90px !important;
    padding: 120px 20px 40px !important;
  }
  .audience-hero h1 { font-size: 34px !important; }

  /* Map-View: feste Höhe + nicht sticky */
  .kg-leaflet-map .leaflet-container,
  div[style*="height"][style*="map"],
  div[style*="aspect-ratio"][style*="height"] {
    /* nicht-spezifisch; lieber:
     */
  }
  /* Echter Map-Container: erkennbar an leaflet-container */
  .leaflet-container { height: 360px !important; }
  /* Map-Karten-Sidebar: keine sticky */
  div[style*="position: sticky"][style*="top: 88"] {
    position: static !important;
  }

  /* ProjectMap container width */
  div[style*="borderRadius: 16"][style*="padding: 12"][style*="sticky"] {
    position: static !important;
    padding: 8px !important;
  }

  /* Reifegrad-Wizard: Fortschritts-Bar voll */
  .wizard__progress { flex-direction: column !important; gap: 8px !important; }

  /* Dashboard-KPI-Karten kleiner */
  div[style*="grid-template-columns: 2fr 1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Newsletter-Form im Footer stacken */
  footer form[style*="grid-template-columns: 1fr auto"] {
    grid-template-columns: 1fr !important;
  }

  /* Bottom-bar Footer wrap */
  footer > div[style*="display: flex"][style*="justify-content: space-between"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  /* "Members" / Card-Listen padding */
  .kg-card:not([style*="padding: 0px"]) { padding: 18px !important; }

  /* Filter-Toolbars wrap */
  div[style*="display: flex"][style*="gap"][style*="flex-wrap"] {
    flex-wrap: wrap !important;
  }

  /* Stat-floater auf Hero — Position normalisieren */
  aside[style*="position: absolute"][style*="left: -32"] {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    margin-top: 16px !important;
  }

  /* Audience-Switcher Pills — horizontal scroll, bleeds flush to screen edge */
  .aud-switcher {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px !important;
    margin-right: -18px !important;
    scrollbar-width: none;
  }
  .aud-switcher::-webkit-scrollbar { display: none; }
  .aud-switcher > button { flex: 0 0 auto; }

  /* Map-Karten Page-Layout: stack mit Filter zuerst */
  div[style*="grid-template-columns: 1.3fr 1fr"][style*="gap: 24"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* MemberActionPlan field rows */
  div[style*="grid-template-columns: 1fr 120px"],
  div[style*="grid-template-columns: 1fr auto"] {
    grid-template-columns: 1fr !important;
  }

  /* BestPracticeCard image height */
  .kg-card.is-clickable .photo-block { height: 180px !important; }
}

/* ============== EXTRA SMALL (≤ 480px) ============== */
@media (max-width: 480px) {
  /* Header noch enger */
  .platform-header > div[style*="grid-template-columns"] {
    padding: 8px 12px !important;
    gap: 8px !important;
  }
  /* Top strip: match the main bar's gutter so DE/EN lines up with the burger's right edge */
  .utilbar-inner { padding-left: 12px !important; padding-right: 12px !important; }
  /* Logo: nur Mark, kein Text */
  .platform-header .kg-logo span:not(:first-child) {
    display: none !important;
  }
  /* Mitgliederbereich-Button: nur Icon */
  .platform-header .btn--leaf span,
  .platform-header .btn--leaf {
    font-size: 11px !important;
    padding: 6px 10px !important;
  }

  /* Audience-Hero: Hauptfoto und Inhalt extra kompakt */
  .audience-hero h1 { font-size: 28px !important; }
  .audience-hero { margin-top: -90px !important; padding: 116px 16px 32px !important; }

  /* Header-Untergeordnete Buttons */
  .anchor-nav__items { display: none !important; }

  /* Cards super-tight */
  .kg-card:not([style*="padding: 0px"]) { padding: 14px !important; }

  /* Pre-footer CTA */
  div[style*="padding: 32px"] { padding: 20px !important; }
  div[style*="padding: 48px"] { padding: 24px !important; }
  div[style*="padding: 36px"] { padding: 20px !important; }

  /* Section vertical padding */
  section { padding-top: 40px !important; padding-bottom: 40px !important; }

  /* Map auf Phone */
  .leaflet-container { height: 280px !important; }

  /* Demo-Nav noch knapper */
  .demo-nav button { font-size: 11px !important; padding: 5px 10px !important; }
}

/* ===== Leaflet maps must never paint over the sticky header (all viewports) ===== */
/* ===== A11y: focus never hidden under the sticky header (WCAG 2.2 — 2.4.11) ===== */
html, body, .standalone-frame-wrap, #main-platform { scroll-padding-top: 110px; }
/* Keep icon-only / control buttons at an operable target size (WCAG 2.2 — 2.5.8) */
.slider-arrows button, .mobile-nav-toggle, .wissen-filter-toggle { min-width: 40px; min-height: 40px; }

/* ===== Leaflet maps must never paint over the sticky header (all viewports) ===== */
.kg-leaflet-map, .leaflet-container { position: relative; z-index: 0; isolation: isolate; }
.platform-header { z-index: 60 !important; }

/* ===== Hero (home + audience) — stacked-layout polish ===== */
@media (max-width: 768px) {
  /* KPI floater under the hero image becomes a normal inline block */
  .audience-hero div[style*="bottom: -28px"],
  .audience-hero div[style*="bottom: -32px"] {
    position: static !important; left: auto !important; right: auto !important;
    bottom: auto !important; width: 100% !important; margin-top: 18px !important;
  }
  /* Full-width hero media shouldn't get too tall */
  .audience-hero [style*="aspect-ratio: 4 / 5"],
  .audience-hero [style*="aspect-ratio: 4 / 3"] { aspect-ratio: 16 / 10 !important; }
  /* Sidebar + content layouts (Projekte / Wissen filters) stack */
  [style*="grid-template-columns: 260px 1fr"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 520px) {
  section,
  div[style*="padding: 64px 32px"], div[style*="padding: 48px 32px"],
  div[style*="padding: 72px 32px"], div[style*="padding: 56px 32px"],
  div[style*="padding: 44px 32px"], div[style*="padding: 76px 32px"] {
    padding-left: 18px !important; padding-right: 18px !important;
  }
}

/* Hero KPI rows: 3 across on phones (don't wrap 2+1) */
@media (max-width: 768px) {
  .pagehero-kpis { display: grid !important; gap: 16px !important; }
  /* Count-aware: 4 KPIs → 2×2, 3 KPIs → one row of 3, 2 KPIs → side by side.
     Higher specificity than the generic [style*=grid-template-columns]→1fr safety-net. */
  .pagehero-kpis.kpis-3 { grid-template-columns: repeat(3, 1fr) !important; }
  .pagehero-kpis.kpis-4, .pagehero-kpis.kpis-2 { grid-template-columns: repeat(2, 1fr) !important; }
  .pagehero-kpis > div { min-width: 0; }
  .pagehero-kpis > div > p:first-child { font-size: clamp(22px, 7vw, 32px) !important; }
}

.mobile-nav-toggle { display: none !important; }
@media (max-width: 1024px) {
  .mobile-nav-toggle { display: inline-flex !important; align-items: center; justify-content: center; }
  .platform-header .mega-nav { display: none !important; }
  /* With the mega-nav hidden, keep logo left / actions right (2-col header) */
  .platform-header > div[style*="grid-template-columns: auto 1fr auto"] {
    grid-template-columns: auto auto !important;
    justify-content: space-between !important;
  }
  .platform-header button[title="Suche"], .platform-header button[aria-label*="Suche"] { display: none !important; }
  /* Member button: icon only */
  .member-btn .member-btn__label { display: none !important; }
  .member-btn { padding: 9px 11px !important; }
  /* Logo a touch smaller on mobile & tablet */
  .platform-header .kg-logo img { height: 36px !important; }
}
/* Top utility strip: full on tablet, language right-aligned on phones (with Leichte Sprache) */
@media (max-width: 640px) {
  .utilbar-initiative { display: none !important; }
  .utilbar-inner { justify-content: flex-end !important; }
}

/* Mega-menu panel: on narrower desktops (1025–1200) drop the spotlight so it never overflows */
@media (max-width: 1200px) {
  .mega-grid { grid-template-columns: 220px 1fr 1fr !important; padding: 32px 32px 28px !important; }
  .mega-spotlight { display: none !important; }
}

/* Audience switcher: pills on desktop, single dropdown on mobile */
.aud-switcher-mobile { display: none; }
@media (max-width: 768px) {
  .aud-switcher { display: none !important; }
  .aud-switcher-mobile { display: block !important; width: -moz-fit-content !important; width: fit-content !important; max-width: 100% !important; }
  .aud-switcher-mobile select { width: 100% !important; max-width: 100% !important; }
}

/* ===== Mitgliederbereich (member dashboard) — mobile ===== */
@media (max-width: 768px) {
  /* Top bar: title stacks above the action buttons; buttons share a row */
  .member-topbar { flex-direction: column !important; align-items: stretch !important; gap: 16px !important; }
  .member-topbar > div:last-child { width: 100% !important; }
  .member-topbar > div:last-child .btn { flex: 1 1 auto !important; justify-content: center !important; }
  /* Major layout grids stack */
  .member-dash-grid { grid-template-columns: 1fr !important; }
  .member-area [style*="grid-template-columns: 2fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
  /* KPI strip: 2 across instead of a tall 1-col stack */
  .member-area .kg-grid--4 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  /* Action-plan rows: name on top, status/impact/progress wrap below */
  .member-plan-row { grid-template-columns: 1fr auto !important; row-gap: 8px !important; column-gap: 12px !important; }
  .member-plan-row > *:nth-child(n+3) { grid-column: 1 / -1 !important; }
}

/* Wirkung band ("Wo Österreich steht") — never overflow right on phones */
@media (max-width: 768px) {
  .wirkung-band { grid-template-columns: 1fr !important; }
  .wirkung-band > * { min-width: 0 !important; max-width: 100% !important; }
  .wirkung-map { overflow: hidden !important; max-width: 100% !important; }
  .wirkung-map .kg-leaflet-map { width: 100% !important; }
}

/* Role strip — compact on phones (no oversized side padding) */
@media (max-width: 768px) {
  .role-strip { row-gap: 4px !important; }
  .role-strip > div { padding: 14px 2px !important; border-top: 1px solid #EDEFF3; }
  .role-strip > div:first-child { border-top: none; }
}

/* Anliegen quick-entry tiles: two columns on phone & tablet */
@media (max-width: 900px) {
  .anliegen-grid { grid-template-columns: repeat(3, 1fr) !important;
    column-gap: 10px !important; row-gap: 26px !important; }
  .anliegen-grid > button { max-width: 150px !important; }
}

/* ===== Reifegrad-Check Wizard ===== */
@media (max-width: 768px) {
  .wiz-root { padding: 28px 16px 56px !important; }
  .wiz-card { padding: 22px 18px !important; }
  .wiz-header { flex-direction: column !important; gap: 14px; }
  .wiz-header h1 { font-size: clamp(24px, 6.5vw, 32px) !important; }
  .wiz-back { align-self: flex-start; order: -1; }
  /* Compact progress: hide the 7 cramped labels, show a single caption line */
  .wiz-progress__label { display: none !important; }
  .wiz-progress__bars { margin-top: 0 !important; }
  /* Intro: stack copy above the 60-sec dial, dial first & centered */
  .wiz-intro-grid { grid-template-columns: 1fr !important; gap: 22px !important; }
  .wiz-intro-aside { width: 100% !important; order: -1; }
  /* Result: gauge above text */
  .wiz-result-head { grid-template-columns: 1fr !important; justify-items: center; text-align: center; gap: 16px !important; }
  /* Plan rows: number + name on row 1; tag + impact wrap below */
  .wiz-plan-row { grid-template-columns: auto 1fr !important; row-gap: 8px !important; }
  .wiz-plan-row > .wiz-plan-pill,
  .wiz-plan-row > .wiz-plan-impact { grid-column: 2 !important; justify-self: start !important; text-align: left !important; }
  /* CTAs full width & stacked */
  .wiz-cta { flex-direction: column !important; }
  .wiz-cta > button { width: 100% !important; justify-content: center !important; }
  /* Result headline scales down so "Reifegrad N — Label" wraps cleanly */
  .wiz-result-head h2 { font-size: clamp(23px, 6.4vw, 32px) !important; }
  /* Plan header: stack title above the total estimate */
  .wiz-plan-head { flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; }
  .wiz-plan-total { font-size: 12.5px !important; }
}
.wiz-progress__caption { display: none; }
.wiz-progress__track { display: none; }
@media (max-width: 768px) {
  .wiz-progress__caption {
    display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px;
    font-family: Poppins; font-size: 12.5px; flex-wrap: wrap;
  }
  .wiz-progress__caption span { color: #6B7280; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; }
  .wiz-progress__caption strong { color: #00573F; font-weight: 700; font-size: 14.5px; white-space: nowrap; }
  /* Single continuous bar replaces the 7 segments */
  .wiz-progress__bars { display: none !important; }
  .wiz-progress__track { display: block; height: 6px; border-radius: 999px; background: #E3E7EE; overflow: hidden; }
  .wiz-progress__fill { height: 100%; border-radius: 999px; transition: width 280ms cubic-bezier(.4,0,.2,1); }
}

/* ===== Projekte & Karte ===== */
@media (max-width: 900px) {
  .proj-header { grid-template-columns: 1fr !important; gap: 28px !important; }
  .proj-map-grid { grid-template-columns: 1fr !important; }
  .proj-map-grid > * { min-width: 0 !important; max-width: 100% !important; }
  .proj-map-panel { position: static !important; overflow: hidden !important; }
  .proj-map-panel .leaflet-container, .proj-map-panel .kg-leaflet-map { width: 100% !important; max-width: 100% !important; }
  .proj-map-list { max-height: none !important; overflow: visible !important; }
  .proj-submit { grid-template-columns: 1fr !important; }
  .proj-submit > div:first-child { padding: 30px 22px !important; }
  .proj-submit > div:last-child { height: 200px !important; min-height: 200px !important; }
}
@media (max-width: 768px) {
  /* Filter pill -> stacked card; selects full width, toggle on its own row */
  .proj-filterbar { grid-template-columns: 1fr !important; border-radius: 18px !important;
    gap: 8px !important; padding: 14px !important; }
  .proj-filterbar > span:first-child { grid-column: 1 / -1 !important; padding: 2px 4px !important; }
  .proj-filterbar > span:not(:first-child) { display: none !important; }
  .proj-filterbar > label { width: 100% !important; border-radius: 12px !important;
    box-shadow: inset 0 0 0 1.5px #E3E7EE !important; padding: 10px 16px !important; }
  .proj-filterbar > div:last-child { grid-column: 1 / -1 !important; justify-content: center !important; }
  .proj-map-legend { flex-wrap: wrap !important; gap: 8px 14px !important; }
  .proj-filterbar .leaflet-container, .kg-leaflet-map { height: 320px !important; }
}

/* ===== Wissen — slide-out filter drawer ===== */
.wissen-filters__head, .wissen-filters__close, .wissen-filters__apply, .wissen-filter-toggle, .wissen-filter-backdrop { display: none; }
@media (max-width: 900px) {
  .wissen-filter-grid { grid-template-columns: 1fr !important; }
  /* Filter button in the results header */
  .wissen-filter-toggle {
    display: inline-flex !important; align-items: center; gap: 7px;
    font-family: Poppins; font-weight: 600; font-size: 13px; color: #00573F;
    background: #fff; border: 1.5px solid #00573F; border-radius: 999px;
    padding: 9px 16px; cursor: pointer; white-space: nowrap;
  }
  /* The aside becomes an off-canvas drawer */
  .wissen-filters {
    position: fixed !important; top: 0 !important; left: 0; bottom: 0;
    width: min(88vw, 360px); background: #fff; z-index: 210;
    transform: translateX(-100%); transition: transform 280ms cubic-bezier(.4,0,.2,1);
    overflow-y: auto; padding: 18px 20px 24px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.28);
  }
  .wissen-filters.is-open { transform: translateX(0); }
  .wissen-filters__eyebrow { display: none !important; }
  .wissen-filters__head {
    display: flex !important; align-items: center; justify-content: space-between;
    padding-bottom: 14px; margin-bottom: 8px; border-bottom: 1px solid #EDEFF3;
    position: sticky; top: -18px; background: #fff; z-index: 1;
  }
  .wissen-filters__close {
    display: inline-grid !important; place-items: center; width: 38px; height: 38px;
    border-radius: 10px; border: 1px solid #E3E7EE; background: #fff; cursor: pointer; color: #1A2B4A;
  }
  .wissen-filters__apply {
    display: inline-flex !important; width: 100%; justify-content: center;
    margin-top: 22px; padding: 14px 18px !important; font-size: 14.5px !important;
  }
  .wissen-filter-backdrop {
    display: block !important; position: fixed; inset: 0; z-index: 205;
    background: rgba(15,30,25,0.45); backdrop-filter: blur(1px);
  }
  /* Results header: count on top, controls below; never crush the sort label */
  .wissen-results-head { flex-wrap: wrap !important; gap: 12px !important; }
  .wissen-results-controls { width: 100% !important; justify-content: space-between !important; }
  .wissen-sort { flex: 0 1 auto !important; min-width: 0; }
  .wissen-sort__label { display: none !important; }
  /* CTA + newsletter stack */
  .wissen-cta { grid-template-columns: 1fr !important; padding: 32px 24px !important; gap: 22px !important; }
  .wissen-cta > div:last-child { justify-content: flex-start !important; }
  .newsletter-band { grid-template-columns: 1fr !important; gap: 22px !important; padding: 28px 22px !important; }
  .newsletter-form { flex-direction: column !important; }
  .newsletter-form > button { width: 100% !important; justify-content: center !important; }
}

/* ===== Vernetzung — events ===== */
@media (max-width: 768px) {
  /* Featured event stacks */
  .vern-featured { grid-template-columns: 1fr !important; gap: 16px !important; padding: 24px 20px !important; }
  .vern-featured > div:first-child {
    border-right: none !important; padding-right: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.18); padding-bottom: 14px;
  }
  .vern-featured > button { width: 100% !important; justify-content: center !important; }
  /* Dense rows stack: hide the decorative format icon, stack the rest */
  .vern-row { display: flex !important; flex-direction: column !important;
    align-items: stretch !important; gap: 10px !important; padding: 18px !important; }
  .vern-row > span:first-of-type { display: none !important; }
  .vern-row > button { width: 100% !important; justify-content: center !important; }
}

/* ===== Audience landing — offers + contact ===== */
@media (max-width: 900px) {
  .aud-offers-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
  /* Featured offer card header: let the time pill wrap below, no broken words */
  .aud-featured-head { flex-wrap: wrap !important; gap: 10px !important; padding: 24px 22px 0 !important; }
  .aud-featured-head > span { white-space: nowrap; }
  /* Contact CTA: stack, left-align buttons full width */
  .contact-cta { grid-template-columns: 1fr !important; padding: 32px 24px !important; gap: 22px !important; }
  .contact-cta__actions { justify-content: flex-start !important; }
  .contact-cta__actions > button { flex: 1 1 100% !important; justify-content: center !important; }
  /* Footer subscribe: stack input + button, button text centered */
  .footer-subscribe { grid-template-columns: 1fr !important; }
  .footer-subscribe > button { width: 100% !important; justify-content: center !important; text-align: center; }
}

/* ===== Mobile swipe sliders ===== */
@media (max-width: 768px) {
  .mobile-slider {
    display: grid !important; grid-auto-flow: column !important;
    grid-auto-columns: 78% !important; grid-template-columns: none !important;
    overflow-x: auto !important; scroll-snap-type: x mandatory !important;
    scroll-padding-left: 0 !important;
    gap: 14px !important; padding: 22px 0 26px 0 !important;
    margin: -12px -16px -12px 0 !important;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .mobile-slider::-webkit-scrollbar { display: none; }
  .mobile-slider > * { scroll-snap-align: start !important; min-width: 0 !important; max-width: none !important; }
  /* Member CTA box: align inner content padding with normal section gutters */
  .member-cta-box { padding: 30px 22px !important; }
  /* Peer-proof stat block: 2 columns on phones instead of a tall 1-col stack */
  .peerproof-grid { display: grid !important; grid-template-columns: 1fr 1fr !important;
    gap: 28px 20px !important; }
}

/* ===== Hero polish on mobile ===== */
@media (max-width: 768px) {
  .home-hero-kpis {
    display: grid !important;
    position: static !important; left: auto !important; right: auto !important; bottom: auto !important;
    width: 100% !important; margin-top: 18px !important; box-sizing: border-box;
    grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; padding: 16px 14px !important;
    justify-items: center !important;
  }
  .home-hero-kpis > div { text-align: center !important; }
  /* Smaller, balanced KPI type so the labels never look cramped on narrow columns */
  .home-hero-kpis > div > div:first-child { font-size: 23px !important; }
  .home-hero-kpis > div > div:last-child { font-size: 8.5px !important; letter-spacing: 0.04em !important; line-height: 1.25 !important; margin-top: 4px !important; }
  /* Hero CTAs full-width & stacked for easy tapping */
  .audience-hero .btn--inverse, .audience-hero .btn--ghost-light { flex: 1 1 100% !important; justify-content: center !important; }
  .kg-hero-ctas { flex-direction: column !important; }
  .kg-hero-ctas > button { width: 100% !important; justify-content: center !important; }
}

/* ===== Audience journey steps: per-step flanking dashes on mobile ===== */
.aud-journey-dash { display: none; }
@media (max-width: 768px) {
  /* Stacked vertically → the single horizontal connector only reaches step 1, so hide it and
     give each step its own flanking dashes (consistent with step 1). */
  .aud-journey-line { display: none !important; }
  .aud-journey-dash { display: block !important; }
}

/* Swipe arrows under sliders (mobile only) */
.slider-arrows { display: none; }
@media (max-width: 768px) {
  .slider-arrows { display: flex; justify-content: center; width: 100%; gap: 14px; margin: 2px 0 0; }
  .slider-arrows button { width: 42px; height: 42px; border-radius: 999px; border: 1px solid #DDE0E7;
    background: #fff; color: #1A1F2E; font-size: 22px; line-height: 1; cursor: pointer;
    display: grid; place-items: center; box-shadow: 0 2px 10px rgba(50,70,110,0.10); }
  .slider-arrows button:active { transform: scale(0.94); }
}

/* ===== Responsive hardening (senior best-practice safety net) ===== */
.standalone-shell { overflow-x: hidden; }
@media (max-width: 768px) {
  .standalone-frame-wrap { padding-left: 14px !important; padding-right: 14px !important; }
  /* Fluid heading caps so fixed inline px sizes never overflow small screens */
  .audience-hero h1 { font-size: clamp(30px, 8vw, 44px) !important; line-height: 1.05 !important; }
  /* Sub-page heroes (PageHero) carry longer sentence-headlines — keep them smaller & readable */
  .kg-pagehero h1 { font-size: clamp(23px, 6vw, 33px) !important; line-height: 1.16 !important; letter-spacing: -0.01em !important; }
  /* Let sub-page headlines wrap naturally on mobile (manual <br> breaks read poorly narrow) */
  .kg-pagehero h1 br { display: none !important; }
  /* Match the Zielgruppen-LP hero exactly: the shared .audience-hero section provides ALL padding;
     the inner content of the home + sub-page heroes carries NONE (otherwise it doubles up and the
     text sits further in than on the Zielgruppen LPs). */
  .kg-cd-hero.audience-hero .kg-hero-content,
  .kg-pagehero.audience-hero .kg-ph-content { padding: 0 !important; }
  /* A touch more breathing room between the KPI numbers */
  .pagehero-kpis { gap: 16px !important; }
  section h2 { font-size: clamp(23px, 6vw, 34px) !important; line-height: 1.18 !important; }
  section h3 { font-size: clamp(17px, 4.6vw, 24px) !important; }
  /* Long words / URLs never force horizontal scroll */
  p, h1, h2, h3, li, a, span { overflow-wrap: anywhere; }
  /* Comfortable tap targets */
  .platform-header button, .btn, .slider-arrows button { min-height: 42px; }
}
@media (max-width: 480px) {
  .standalone-frame-wrap { padding-left: 10px !important; padding-right: 10px !important; }
}