/* =========================================================
   Mobile optimierungen für die gesamte heartstocks Website
   Geladen NACH dem inline <style> Block, daher höhere Priorität.
   ========================================================= */

/* ---------- Concierge-Widget Wrapper neutralisieren ----------
   Das externe Concierge-Widget wickelt unseren Hero-Inhalt nach
   dem Boot in einen <div class="hs-hero-content"> ein und gibt ihm
   `position: absolute; inset: 0`. Auf Desktop bleibt die Section
   wegen `min-height: 100vh` hoch genug — auf Mobile setzen wir
   `min-height: auto`, wodurch die Section kollabiert und der ganze
   Hero-Inhalt hinter der Nav landet. Wrapper in normalen Flow zwingen. */
section[data-hs-hero] > .hs-hero-content {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
}

/* ---------- Concierge-Widget Exit-Button sichtbar machen ----------
   Das Widget rendert einen Back-Button (`.hs-back-btn`) bei top:20/left:40
   mit z-index:2 innerhalb von `.hs-concierge`. Unsere fixe Nav-Pille
   (z-index:50) sitzt darüber und verdeckt ihn komplett — Nutzer hatten
   keinen sichtbaren Weg, den Chat zu verlassen. Wir heben ihn als
   eigenständigen Fixed-Button rechts oben über die Nav, sobald der Chat
   geöffnet ist. */
body.hs-concierge-open .hs-back-btn {
  position: fixed !important;
  top: 88px !important;
  left: 24px !important;
  right: auto !important;
  z-index: 60 !important;
}
@media (max-width: 640px) {
  body.hs-concierge-open .hs-back-btn {
    top: calc(env(safe-area-inset-top, 0px) + 76px) !important;
    left: 16px !important;
    right: auto !important;
  }
}

/* Anchored sections: keep target out from under the fixed pill nav.
   Used by hero-CTAs across home + subpages. Bumped to 116/108px so the
   sticky inner headings (vc-heading-inner / wl-heading-mobile, both pinned
   at ~108px) land cleanly below the nav after a CTA jump. */
[id="workflow"], [id="how"], [id="models"], [id="how-we-work"], [id="asset-classes"] {
  scroll-margin-top: 116px;
}
@media (max-width: 600px) {
  [id="workflow"], [id="how"], [id="models"], [id="how-we-work"], [id="asset-classes"] {
    scroll-margin-top: 108px;
  }
}

/* ---------- Allgemeines ---------- */
@media (max-width: 900px) {
  html, body { font-size: 15px; }
  body { -webkit-text-size-adjust: 100%; }

  /* Container Padding kleiner — Sections nutzen "var(--pad-section) 0",
     also wirkt der Wert oben UND unten in jeder Section. Niedrig halten,
     damit zwischen den Komponenten kein riesiger leerer Block entsteht. */
  :root, body[data-density="standard"], body[data-density="airy"], body[data-density="compact"] {
    --pad-section: 56px !important;
    --pad-x: 20px !important;
  }
  .shell { padding: 0 20px !important; }

  /* Headings nicht zu wuchtig */
  h1 { letter-spacing: -0.025em !important; }
  h2 { letter-spacing: -0.02em !important; }
}

@media (max-width: 600px) {
  :root, body[data-density="standard"], body[data-density="airy"], body[data-density="compact"] {
    --pad-section: 44px !important;
    --pad-x: 16px !important;
  }
  .shell { padding: 0 16px !important; }
}

/* ---------- Top-Nav / Sub-Nav: Mobile Bar ---------- */
@media (max-width: 1100px) {
  /* Compactify the pill bar on mobile */
  header[data-screen-label="Top Nav"] > div,
  header > div:first-child {
    gap: 12px !important;
    padding: 8px 8px 8px 14px !important;
  }
  /* Logo schrumpft mit; Tabs werden bereits vom Komponenten-CSS versteckt */
}

@media (max-width: 720px) {
  /* DE/EN selector wird auf Mobile vom Burger-Menu übernommen */
  header .nav-lang-toggle { display: none !important; }
  /* CTA-Button "Projekt evaluieren" auf Mobile vom Burger-Menu übernommen */
  header .nav-cta { display: none !important; }
}

/* ---------- Hero-Sektionen ---------- */
@media (max-width: 900px) {
  /* Allen Heroes mehr Platz oben (Nav-Höhe), weniger unten */
  section[style*="min-height: 100vh"] {
    min-height: auto !important;
    padding-top: 96px !important;
    padding-bottom: 24px !important;
  }
  /* H1 in Heroes greifbarer */
  section h1 {
    font-size: clamp(40px, 11vw, 64px) !important;
    line-height: 1.02 !important;
  }
  /* Hero-Buttons full-width */
  section h1 ~ div[style*="display: flex"][style*="gap"] > a,
  section h1 ~ div[style*="display: flex"][style*="gap"] > button {
    flex: 1 1 auto;
  }

  /* Kinetic-Hero: das 600px STOCKS reduzieren */
  section[style*="overflow: hidden"] div[style*="STOCKS"],
  section div[style*="font-size: clamp(280px"] {
    font-size: clamp(180px, 50vw, 320px) !important;
  }
}

/* ---------- Glass-Hero: floating cards stay visible on mobile (animation parity)
   They were previously hidden — restore them at a reduced scale so they still
   drift with scroll/pointer like on desktop, just smaller and pushed further
   from the headline so they don't overlap the H1. ---------- */
@media (max-width: 720px) {
  section[style*="min-height: 100vh"] > div[style*="position: absolute"][style*="pointer-events: none"]:has(div[style*="rotate"]) > div > div[style*="border-radius: 14"] {
    transform: scale(0.7);
    transform-origin: center;
    min-width: 150px !important;
    padding: 10px 14px !important;
  }
  section[style*="min-height: 100vh"] > div[style*="position: absolute"][style*="pointer-events: none"]:has(div[style*="rotate"]) > div > div[style*="border-radius: 14"] > div[style*="font-size: 22"] {
    font-size: 16px !important;
  }
}
@media (max-width: 480px) {
  /* very narrow: hide the cards to keep the centered hero copy uncluttered */
  section[style*="min-height: 100vh"] > div[style*="position: absolute"][style*="pointer-events: none"]:has(div[style*="rotate"]) {
    display: none !important;
  }
}

/* ---------- KPI-Bar ---------- */
@media (max-width: 900px) {
  /* Big-grid: 2x2 oder 1col, kleinere min-card-höhe */
  div[style*="grid-template-columns: repeat(auto-fit, minmax(220px"] {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 480px) {
  div[style*="grid-template-columns: repeat(auto-fit, minmax(220px"] {
    grid-template-columns: 1fr !important;
  }
}

/* ---------- Sticky-Sektionen auf Mobile: animation BEHALTEN, nur Scroll-Weg
   verlängern, damit zwischen den Schritten mehr gescrollt werden muss
   (Animation läuft langsamer ab). Außerdem linke TOC-Liste der Value-Chain
   ausblenden, damit die rechte Karte den Sticky-Pin allein nutzen kann. ---------- */
@media (max-width: 900px) {
  /* Value-Chain: scroll runway tuned so the sticky animation finishes at
     roughly the same scroll position the pin releases — avoids a "stuck"
     dead-zone after the last step. The component-scoped .vc-runway override
     in value-chain.jsx is the source of truth (160vh); this generic
     selector is left as a safety net mirroring that value. */
  section > div[style*="height: 300vh"][style*="position: relative"]:has(> div[style*="position: sticky"]) {
    height: 160vh !important;
  }
  /* Left TOC list on Value-Chain mobile — repurposed as a horizontal
     stepper (see second-pass block far below) so users see step progress
     while scrolling through the sticky animation. The previous rule
     hid this entirely; we want it visible as a progress indicator. */
  /* Rechte Detail-Card kompakter und auf 100vh-Pin ausgerichtet.
     Mirrors the .vc-card-wrap rules defined in value-chain.jsx <style>; kept
     here as a safety net for the desktop-attribute fallback (height: 400). */
  .vc-card-wrap > div > div {
    padding: 24px !important;
    gap: 18px !important;
  }
  .vc-card-wrap h3 {
    font-size: 26px !important;
    line-height: 1.1 !important;
  }
  .vc-card-wrap p {
    font-size: 15px !important;
  }
  /* Riesige Step-Number "01" / "02" … kleiner machen, sonst dominiert sie jede Card */
  .vc-card-wrap > div > div > div:first-child {
    font-size: 64px !important;
  }
}

/* ---------- Asset Classes: Sidebar oben, Detail unten ---------- */
@media (max-width: 900px) {
  .ac-grid { grid-template-columns: 1fr !important; }
  /* Detail-Panel kleinere Padding */
  .ac-grid > div[style*="background: var(--raised)"] {
    padding: 24px !important;
    min-height: auto !important;
  }
}

/* ---------- Whitelabel-Showcase: stack copy + laptop, kill desktop offset ---------- */
@media (max-width: 900px) {
  /* Stack copy on top, laptop below — single column */
  .wl-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    align-items: center !important;
  }
  /* Drop the desktop-only translateY/marginTop on the laptop wrapper */
  .wl-laptop-wrap {
    margin-top: 0 !important;
    transform: none !important;
  }
  /* Min-height der Copy-Spalte kleiner */
  .wl-grid > div[style*="min-height: 460"] {
    min-height: auto !important;
  }
}

/* ---------- MacBook (3D laptop) auf Mobile schrumpfen ---------- */
@media (max-width: 900px) {
  .mb-stage {
    --base-w: 420px !important;
    --base-d: 280px !important;
    --screen-h: 275px !important;
  }
}
@media (max-width: 600px) {
  .mb-stage {
    --base-w: 320px !important;
    --base-d: 215px !important;
    --screen-h: 210px !important;
  }
}
@media (max-width: 380px) {
  .mb-stage {
    --base-w: 280px !important;
    --base-d: 188px !important;
    --screen-h: 184px !important;
  }
}

/* ---------- Service-Overview Track ---------- */
@media (max-width: 900px) {
  .svc-track { grid-template-columns: 1fr !important; row-gap: 32px !important; }
}

/* ---------- Case Studies Tabelle ---------- */
@media (max-width: 700px) {
  .cs-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 16px 18px !important;
  }
  .cs-row > *:nth-child(1) { grid-row: 1; }
  .cs-row > *:nth-child(2),
  .cs-row > *:nth-child(3),
  .cs-row > *:nth-child(4),
  .cs-row > *:nth-child(5) { font-size: 13px !important; }
  .cs-row > *:nth-child(6) { display: none !important; }
  /* Header-Zeile minimaler */
  .cs-row[style*="text-transform: uppercase"] {
    display: none !important;
  }
}

/* ---------- Media Logos — Mobile Marquee ---------- */
@media (max-width: 900px) {
  section.media-logos {
    padding: 56px 0 !important;
  }
  /* Eyebrow oben mittig, Marquee darunter — Marquee bleibt full-width */
  section.media-logos .ml-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 20px !important;
  }
  section.media-logos .ml-eyebrow {
    min-width: 0 !important;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
  }
  section.media-logos .ml-marquee { width: 100% !important; }
  section.media-logos .ml-track { gap: 40px !important; }
  section.media-logos .ml-logo { font-size: 17px !important; opacity: 0.85 !important; }
}

@media (max-width: 600px) {
  section.media-logos { padding: 44px 0 !important; }
  section.media-logos .ml-track { gap: 32px !important; }
  section.media-logos .ml-logo { font-size: 15px !important; }
}

@media (max-width: 380px) {
  section.media-logos .ml-track { gap: 28px !important; }
  section.media-logos .ml-logo { font-size: 14px !important; }
}

/* ---------- Testimonials ---------- */
@media (max-width: 700px) {
  div[style*="grid-template-columns: repeat(auto-fit, minmax(320px"] {
    grid-template-columns: 1fr !important;
  }
  article[style*="border-radius: 18"] {
    padding: 24px !important;
  }
}

/* ---------- Final CTA ---------- */
@media (max-width: 700px) {
  div[style*="border-radius: 26"][style*="text-align: center"] {
    padding: 48px 22px !important;
  }
}

/* ---------- Footer ---------- */
@media (max-width: 600px) {
  .footer-grid { gap: 32px !important; }
  footer { padding: 60px 0 32px !important; }
  footer div[style*="margin-top: 60"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
}

/* ---------- ValueChain Diagramm: 1col auf sehr kleinen Geräten ---------- */
@media (max-width: 600px) {
  .vc-diagram-grid { grid-template-columns: 1fr !important; }
}

/* ---------- ValueChain Tabs: Inhalt-Padding kleiner ---------- */
@media (max-width: 700px) {
  div[style*="background: var(--raised)"][style*="border-radius: 22"][style*="min-height: 320"] {
    padding: 20px !important;
  }
  div[style*="background: var(--raised)"][style*="border-radius: 22"][style*="min-height: 320"] > div > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* ---------- Sub-Hero (Unterseiten) ---------- */
@media (max-width: 900px) {
  section[style*="180px 0 100px"] {
    padding: 130px 0 60px !important;
  }
}

/* ---------- Generelle 2col-Grids auf 1col ---------- */
@media (max-width: 720px) {
  /* Headings die mit big paragraph daneben stehen */
  div[style*="justify-content: space-between"][style*="align-items: baseline"][style*="flex-wrap: wrap"] {
    gap: 16px !important;
  }
}

/* ---------- Buttons: Mindesthöhe für Touch ---------- */
@media (max-width: 720px) {
  button, a[role="button"] {
    min-height: 44px;
  }
}

/* ---------- Tabellen mit horizontalem Scroll als fallback ---------- */
@media (max-width: 600px) {
  /* horizontal scroll für nicht-umbaubare Tabellen */
  div[style*="border-radius: 18"][style*="overflow: hidden"]:has(> div[style*="grid-template-columns"]) {
    /* keep — case studies werden oben schon umgebaut */
  }
}

/* ---------- Eyebrow oben rechts in Hero — bleiben sichtbar ---------- */
@media (max-width: 600px) {
  .eyebrow { font-size: 10px !important; letter-spacing: 0.14em !important; }
}

/* ---------- Reduce overflow risks ---------- */
@media (max-width: 900px) {
  body { overflow-x: hidden; }
  img, svg, canvas { max-width: 100%; }
}

/* ---------- Generische Innen-Abstände kürzen:
     Section-Headings nutzen inline margin-bottom 60/80, dazu kommen
     marginTop 60/80 zwischen Blöcken. Auf Mobile schrumpfen, damit
     kein leerer schwarzer Streifen zwischen Komponenten entsteht. ---------- */
@media (max-width: 900px) {
  section .shell > div[style*="margin-bottom: 60"] { margin-bottom: 32px !important; }
  section .shell > div[style*="margin-bottom: 80"] { margin-bottom: 40px !important; }
  section .shell > div[style*="margin-top: 80"]    { margin-top: 40px !important; }
  section .shell h2[style*="margin-bottom: 60"]    { margin-bottom: 28px !important; }
  section .shell h2[style*="margin-bottom: 80"]    { margin-bottom: 32px !important; }
}

/* ===========================================================
   Named-grid breakpoints — ein zentraler Block für alle Pages
   =========================================================== */

/* Tablet: 4-up grids → 2-up */
@media (max-width: 900px) {
  .mod-grid,
  .val-grid,
  .team-grid,
  .docs-grid,        /* 5 cols */
  .trust-grid,       /* 6 cols */
  .svc-track,        /* 4 cols */
  .am-bens-grid,
  .stk-bens,
  .stk-types,
  .stk-models,
  .own-cases,
  .inv-bens-grid,
  .inv-how-grid,
  .ac-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .ac-grid { gap: 24px !important; }

  /* 2-col grids → 1col with sensible gap */
  .bs-grid,
  .wf-grid,
  .vc-grid,
  .ttm-grid,
  .rp-grid,
  .own-grid,
  .wl-grid,
  .contact-row {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

/* Mobile: alles single-col */
@media (max-width: 600px) {
  .mod-grid,
  .val-grid,
  .team-grid,
  .docs-grid,
  .trust-grid,
  .svc-track,
  .am-bens-grid,
  .stk-bens,
  .stk-types,
  .stk-models,
  .own-cases,
  .inv-bens-grid,
  .inv-how-grid,
  .vc-diagram-grid,
  .story-grid {
    grid-template-columns: 1fr !important;
  }
  /* Stakeholder on-chain row: 3-col → block */
  .stk-on-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
}

/* SVC bento (service-alternatives) */
@media (max-width: 900px) {
  .svc-bento {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }
  .svc-bento > * {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

/* Footer-grid */
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }
  .footer-grid > *:first-child {
    grid-column: 1 / -1;
  }
}
@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
  }
  .footer-grid > *:first-child {
    grid-column: auto;
  }
}

/* Story-grid (Über uns Meilensteine) */
@media (max-width: 900px) {
  .story-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* AC-grid: sidebar nicht 320px */
@media (max-width: 900px) {
  .ac-grid {
    grid-template-columns: 1fr !important;
  }
}

/* === Subpages — mobile pass (agent 2) === */

/* ----- Sub-page top spacing: breadcrumb + hero stack on small screens ----- */
@media (max-width: 600px) {
  /* SubHero padding override (mobile.css already sets at 900) — go lighter at 600 */
  section[style*="180px 0 100px"] {
    padding: 96px 0 48px !important;
  }
}

/* ----- FAQ accordions: shared across asset-manager, investoren, stakeholder ----- */
@media (max-width: 720px) {
  /* Trigger button: tighter padding, smaller question text */
  div[style*="border-radius: 18"][style*="overflow: hidden"] > div > button[style*="padding: 26px 28px"] {
    padding: 20px 18px !important;
    gap: 14px !important;
  }
  div[style*="border-radius: 18"][style*="overflow: hidden"] > div > button[style*="padding: 26px 28px"] > span:nth-child(2) {
    font-size: 16px !important;
  }
  /* Expanded answer body: kill the deep 82px left indent */
  div[style*="border-radius: 18"][style*="overflow: hidden"] div[style*="padding: 0px 28px 28px 82px"],
  div[style*="border-radius: 18"][style*="overflow: hidden"] div[style*="0 28px 28px 82px"] {
    padding: 0 18px 22px 18px !important;
    font-size: 15px !important;
  }
}

/* ----- Asset-manager: workflow detail panel ----- */
@media (max-width: 900px) {
  /* The detail panel uses absolute-positioned progress dots at bottom 28 / left+right 40.
     On 1-col stack, ensure enough bottom space and tighter inner padding. */
  .wf-grid > div[style*="min-height: 380"] {
    padding: 28px !important;
    min-height: 320px !important;
    padding-bottom: 56px !important;
  }
  .wf-grid > div[style*="min-height: 380"] > div[style*="position: absolute"][style*="bottom: 28px"] {
    left: 28px !important;
    right: 28px !important;
    bottom: 22px !important;
  }
  /* Workflow step buttons: ensure touch height, allow title to wrap */
  .wf-grid > div > button {
    align-items: flex-start !important;
    padding: 18px 0 !important;
    min-height: 56px;
  }
  .wf-grid > div > button > span:nth-child(2) {
    font-size: 17px !important;
    line-height: 1.3 !important;
  }
}

/* ----- Asset-manager: cost row reflow at small screens ----- */
@media (max-width: 600px) {
  .cost-row > span:nth-child(2) {
    font-size: 22px !important;
  }
  .cost-row {
    padding: 20px !important;
  }
  .prod-row {
    padding: 20px !important;
  }
}
@media (max-width: 900px) {
  .prod-row {
    padding: 22px !important;
  }
}

/* ----- Investoren: risk / protection card padding ----- */
@media (max-width: 600px) {
  .rp-grid > div[style*="padding: 36"] {
    padding: 24px !important;
  }
  .inv-how-grid div[style*="padding: 36"] {
    padding: 24px !important;
  }
}

/* ----- Stakeholder: model cards & onboarding ----- */
@media (max-width: 600px) {
  .stk-models div[style*="padding: 36"] {
    padding: 24px !important;
  }
  .stk-on-row {
    padding: 22px 0 !important;
  }
  .stk-on-row h3 {
    font-size: 22px !important;
  }
}

/* ----- Whitelabel: BrandSwap demo ----- */
@media (max-width: 900px) {
  /* Brand-preview browser chrome domain field — let it shrink */
  .bs-grid div[style*="aspect-ratio: 16 / 10"] div[style*="max-width: 280"] {
    max-width: 100% !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
@media (max-width: 600px) {
  /* Big NAV value inside preview overflows on tiny screens */
  .bs-grid div[style*="aspect-ratio: 16 / 10"] div[style*="font-size: 38"] {
    font-size: 26px !important;
  }
  .bs-grid div[style*="aspect-ratio: 16 / 10"] {
    aspect-ratio: 4 / 3 !important;
  }
}

/* ----- Whitelabel: feature grid touch + module grid ----- */
@media (max-width: 600px) {
  .wl-feat-grid > div[style*="padding: 36"] {
    padding: 26px !important;
    min-height: auto !important;
  }
  .mod-grid > div {
    min-height: auto;
  }
}

/* ----- Über uns: mission row ----- */
@media (max-width: 600px) {
  .mis-row {
    padding: 28px 0 !important;
  }
  .mis-row h3 {
    font-size: 24px !important;
  }
  .story-grid div[style*="padding: 28"] {
    padding: 22px !important;
    min-height: auto !important;
  }
  .story-grid div[style*="font-size: 36"] {
    font-size: 30px !important;
  }
}

/* ----- Über uns: trust grid → 1col on very small screens ----- */
@media (max-width: 380px) {
  .trust-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ----- Über uns: contact-row stack & contact-line padding ----- */
@media (max-width: 600px) {
  .contact-line {
    padding: 24px 20px 4px !important;
  }
  .contact-line div[style*="font-size: clamp(22px"] {
    font-size: 22px !important;
  }
  /* Outer contact card padding (clamp(40px,5vw,72px)) → tighter */
  div[style*="border-radius: 28"] > div[style*="padding: clamp(40px"] {
    padding: 32px 22px !important;
  }
}

/* ----- Über uns: team card padding ----- */
@media (max-width: 600px) {
  .team-grid div[style*="padding: 20px 22px 22px"] {
    padding: 18px 18px 20px !important;
  }
}

/* ----- All sub-pages: SubSection title block & section padding ----- */
@media (max-width: 600px) {
  section > div.shell > div[style*="margin-bottom: 56"][style*="max-width: 820"] {
    margin-bottom: 32px !important;
  }
  section[style*="padding: 100px 0"] {
    padding: 56px 0 !important;
  }
}

/* ----- Hero CTA buttons: stack full-width at smallest viewports ----- */
@media (max-width: 380px) {
  section[style*="180px 0 100px"] div[style*="margin-top: 40"] > a,
  section[style*="180px 0 100px"] div[style*="margin-top: 40"] > button {
    width: 100%;
    flex: 1 1 100% !important;
  }
}

/* ----- Info / TTM callouts: tighter padding on small ----- */
@media (max-width: 600px) {
  div[style*="padding: 20px 24px"][style*="border-radius: 14"] {
    padding: 16px 18px !important;
  }
}

/* ----- Accordion +/− toggles: bigger tap target ----- */
@media (max-width: 720px) {
  button > span[style*="border-radius: 50%"][style*="width: 28px"][style*="height: 28px"] {
    width: 32px !important;
    height: 32px !important;
  }
}


/* === Nav / Footer / Legal pages — mobile pass (agent 3) === */

/* ---------- Nav: pill + burger polish across both nav & subpage-nav ---------- */
@media (max-width: 1100px) {
  /* Pill bar compactify already covers homepage via data-screen-label.
     Generalize: also catch the SubNav header (no data attribute). */
  header[style*="position: fixed"] > div:first-child {
    gap: 10px !important;
    padding: 8px 8px 8px 14px !important;
  }
  /* Logo a touch smaller so nav fits at narrow widths */
  header[style*="position: fixed"] svg + span {
    font-size: 16px !important;
  }
}

@media (max-width: 600px) {
  /* Reduce header outer padding on phones to claw back edge space */
  header[style*="position: fixed"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  header[style*="position: fixed"] > div:first-child {
    gap: 8px !important;
    padding: 6px 6px 6px 12px !important;
  }
}

/* ---------- Mobile menu overlay: ensure tap targets, top nav remains visible/clickable ---------- */
@media (max-width: 720px) {
  /* Burger size meets WCAG 44x44 */
  .nav-burger {
    width: 44px !important;
    height: 44px !important;
  }
  /* The mobile menu close hits the same burger (X icon) — already accessible.
     Tabs in overlay get more breathing room and minimum tap height. */
}

/* ---------- Footer ---------- */
@media (max-width: 900px) {
  footer { padding: 64px 0 36px !important; margin-top: 40px !important; }
}
@media (max-width: 600px) {
  /* Bottom row: stack legal line and copyright cleanly */
  footer .shell > div:last-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-top: 40px !important;
  }
  /* Smaller column-headings + tighter list spacing on tiny phones */
  footer ul { gap: 12px !important; }
  footer a { line-height: 1.4 !important; }
  /* Wrap badges (eWpG / KAGB / WpIG) cleanly */
  footer span[style*="border-radius: 999"] { font-size: 9px !important; }
}
@media (max-width: 380px) {
  .footer-grid { gap: 24px !important; }
}

/* ---------- Final-CTA block ---------- */
@media (max-width: 600px) {
  /* The CTA card padding clamp leaves the inner sides too tight at 320 */
  section > div .shell > div[style*="border-radius: 26"][style*="text-align: center"],
  div[style*="border-radius: 26"][style*="text-align: center"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  /* CTA buttons full-width side-by-side stack */
  div[style*="border-radius: 26"][style*="text-align: center"] > div > div[style*="margin-top: 36"] > * {
    flex: 1 1 100%;
  }
}

/* ---------- Legal pages (Impressum / Datenschutz) ---------- */
@media (max-width: 720px) {
  /* Sub-hero paragraph: tighter line-length for legalese */
  section[style*="180px 0 100px"] p {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }
  /* Card padding clamp already shrinks; ensure no overflow from long URLs/emails */
  a[style*="border-bottom"] { word-break: break-word; overflow-wrap: anywhere; }
}

@media (max-width: 600px) {
  /* SubSection pad smaller on phones (default 100px is too much) */
  main section[style*="padding: 100px 0"] {
    padding: 56px 0 !important;
  }
  /* Section heading margin */
  main section > .shell > div[style*="marginBottom: 56"],
  main section > .shell > div[style*="margin-bottom: 56"] {
    margin-bottom: 32px !important;
  }
  /* Datenschutz / Impressum cards: BaFin reg-no clamp shrinks but still big */
  div[style*="font-size: clamp(36px, 4.6vw, 56px)"] {
    font-size: 36px !important;
  }
  /* Cookie/processor table rows already collapse to 1fr at 720;
     ensure label rendered as caps still readable, not crammed */
  .cookie-row > *:first-child,
  .proc-row > *:first-child {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-faint);
  }
  /* Header rows for those tables: hide caps headers on mobile (data has its own labels) */
  .cookie-row[style*="text-transform: uppercase"],
  .proc-row[style*="text-transform: uppercase"] {
    display: none !important;
  }
}

/* ---------- Service-alternatives: bento + track polish ---------- */
@media (max-width: 900px) {
  /* Big hero cell min-height shrink so phones don't see a giant green block */
  .svc-bento > div:first-child {
    min-height: 280px !important;
    padding: 32px !important;
  }
  /* Standardise all bento cells padding on mobile */
  .svc-bento > div { padding: 28px !important; }
  /* Wide row "04 — Zahlung in Euro" wraps cleanly */
  .svc-bento + div[style*="border-radius: 18"][style*="display: flex"] {
    padding: 24px !important;
    gap: 16px !important;
  }
}

/* ---------- Breadcrumb on subpages: hide entirely on mobile ---------- */
@media (max-width: 900px) {
  .page-breadcrumb { display: none !important; }
}

/* ---------- Defensive overflow guard for long labels in nav/footer ---------- */
@media (max-width: 600px) {
  header nav a, footer a { word-break: break-word; }
}

/* === Homepage components — mobile pass (agent 1) === */

/* ---------- Hero-Infra: legal markers row (eWpG · KAGB · WpIG · BaFin) ---------- */
@media (max-width: 720px) {
  /* Wraps cleanly, smaller top margin and smaller font on narrow screens */
  section h1 ~ div[style*="font-family: var(--font-mono)"][style*="text-transform: uppercase"][style*="margin-top: 120"] {
    margin-top: 56px !important;
    gap: 12px !important;
    font-size: 10px !important;
    flex-wrap: wrap !important;
  }
  section h1 ~ div[style*="font-family: var(--font-mono)"][style*="text-transform: uppercase"][style*="margin-top: 120"] > span:last-child {
    margin-left: 0 !important;
  }
}

/* ---------- Hero paragraph readability + buttons full-width on small ---------- */
@media (max-width: 600px) {
  section h1 ~ p {
    font-size: 15px !important;
  }
  section h1 ~ div[style*="display: flex"][style*="gap"][style*="flex-wrap: wrap"] > a,
  section h1 ~ div[style*="display: flex"][style*="gap"][style*="flex-wrap: wrap"] > button {
    flex: 1 1 100% !important;
    justify-content: center;
  }
}

/* ---------- Kinetic-Hero: copy + buttons row gap ---------- */
@media (max-width: 720px) {
  section[style*="overflow: hidden"] div[style*="display: flex"][style*="gap: 60"][style*="flex-wrap: wrap"][style*="align-items: flex-end"] {
    gap: 28px !important;
  }
}

/* ---------- KPI-Bar (big variant) — card padding + bottom regulator pill ---------- */
@media (max-width: 600px) {
  div[style*="padding: 48px 32px"][style*="min-height: 240"] {
    padding: 32px 22px !important;
    min-height: 180px !important;
  }
  div[style*="border-radius: 999"][style*="text-transform: uppercase"][style*="font-family: var(--font-mono)"] {
    padding: 14px 16px !important;
    gap: 10px !important;
    font-size: 10px !important;
  }
  div[style*="border-radius: 999"][style*="text-transform: uppercase"][style*="font-family: var(--font-mono)"] > span:last-child {
    margin-left: 0 !important;
  }
}

/* ---------- KPI-Bar (table variant) — collapse to two-row at narrow widths ---------- */
@media (max-width: 600px) {
  div[style*="grid-template-columns: 60px 1fr auto"][style*="gap: 24"] {
    grid-template-columns: 40px 1fr !important;
    gap: 8px 16px !important;
    padding: 22px 0 !important;
  }
  div[style*="grid-template-columns: 60px 1fr auto"][style*="gap: 24"] > span:nth-child(2) {
    font-size: 22px !important;
  }
  div[style*="grid-template-columns: 60px 1fr auto"][style*="gap: 24"] > span:nth-child(3) {
    grid-column: 1 / -1 !important;
    font-size: 44px !important;
  }
}

/* ---------- Value-Chain (sticky) — slimmer detail card on mobile ---------- */
@media (max-width: 720px) {
  /* Keep a min-height so the centered sticky block has visual weight on
     phones — the pin fills 100vh-96px so a tiny card would float in space. */
  .vc-card-wrap {
    min-height: 280px !important;
  }
  .vc-card-wrap > div > div {
    padding: 24px !important;
    gap: 16px !important;
  }
  .vc-card-wrap h3 {
    font-size: 26px !important;
  }
  .vc-card-wrap p {
    font-size: 15px !important;
  }
}

/* ---------- Value-Chain (diagram) — hide stretched horizontal connector when stacked ---------- */
@media (max-width: 900px) {
  div[style*="position: relative"] > svg[viewBox="0 0 1200 240"] {
    display: none !important;
  }
}

/* ---------- Asset Classes — sidebar buttons, detail headline, blurb, project tiles ---------- */
@media (max-width: 600px) {
  .ac-grid > div:first-child > button {
    padding: 14px 16px !important;
    font-size: 16px !important;
    min-height: 48px;
  }
  /* Detail headline — clamp 36-56px is too large for "ESG-Infrastructure" at 320 */
  .ac-grid h3[style*="clamp(36px"] {
    font-size: 28px !important;
  }
  .ac-grid p[style*="font-size: 17"] {
    font-size: 15px !important;
  }
  .ac-grid div[style*="padding: 18"][style*="border-radius: 12"] {
    padding: 14px !important;
  }
}

/* ---------- Whitelabel-Showcase: keep the sticky laptop animation on mobile ---------- */
/* The generic sticky-flatten higher up neutralises sticky sections on mobile.
   For the Whitelabel showcase we want the SAME scroll-driven laptop animation
   as on desktop — just with a smaller laptop and the copy stacked above it.
   Re-assert sticky/scroll-runway behaviour scoped to .wl-showcase. */
/* ---------- Service-Overview: hide horizontal accent line + node connectors when stacked ---------- */
@media (max-width: 1100px) {
  /* Absolutely positioned 1px gradient line above .svc-track */
  div[style*="position: relative"] > div[style*="position: absolute"][style*="height: 1"][style*="linear-gradient(90deg"] {
    display: none !important;
  }
  /* Down-connector (1px × 28) below each node — superfluous when stacked */
  .svc-track > div > div > div[style*="height: 28"][style*="width: 1"] {
    display: none !important;
  }
}

/* ---------- Case Studies: bottom dashed footnote ---------- */
@media (max-width: 600px) {
  div[style*="border: 1px dashed var(--border)"][style*="text-transform: uppercase"][style*="font-family: var(--font-mono)"] {
    padding: 12px 14px !important;
    font-size: 10px !important;
    letter-spacing: 0.06em !important;
  }
}

/* ---------- General: section h2 clamp(36-60) — narrower mobile cap ---------- */
@media (max-width: 600px) {
  section h2[style*="clamp(36px, 4.5vw, 60px)"] {
    font-size: 30px !important;
    line-height: 1.08 !important;
  }
}


/* (Whitelabel-Showcase mobile-preview block removed — the same animated laptop
   is now used on all viewports, only scaled down via .mb-stage variables.) */

/* The previous block hid regulatory trust signals on mobile, but the
   subsequent "restore compactly" rules below already show them in a tighter
   form. The hide rules were dead code (overridden by source order) and
   confusing for future edits — keep only the compact-restore. The Whitelabel
   BrandPreview's badge strip stays visible on phones too: trust signals
   ("eWpG · KAGB · KYC · Audit") inside the brand preview are central to the
   message and removing them weakens the demo. */

/* === Whitelabel-Showcase: keep sticky storytelling on mobile (re-enable) ===
   The global sticky-kill rule earlier in this file is too broad — it disables
   the scroll-driven laptop animation here. Restore sticky for .wl-showcase
   only, and shrink the laptop so heading + body + laptop fit within 100vh.
   The runway height is set further down (single source of truth) — these
   blocks only carry sticky/layout/laptop-scale concerns. */
@media (max-width: 900px) {
  /* Sticky-Padding wird in der Component (whitelabel-showcase.jsx) je
     Breakpoint feinjustiert; diese Werte sind nur Sicherheitsnetz. */
  .wl-showcase .wl-sticky {
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    align-items: center !important;
    padding: 92px 0 20px !important;
  }
  .wl-showcase .wl-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    row-gap: 40px !important;
    column-gap: 0 !important;
    align-items: start !important;
    justify-items: center !important;
  }
  /* Laptop-Wrapper wird nach unten verschoben, damit die 3D-Lid-Projection
     (rotateX hebt die Lid-Rückseite ~60px über die mb-stage Box) NICHT von
     der Überschrift verdeckt wird. Vorher 28px → Lid hing 32px in die
     Heading-Box rein und wurde unsichtbar; 56px+ Padding-Bottom der
     Überschrift schafft ausreichend Luft. */
  .wl-showcase .wl-stage-laptop { width: 100%; display: flex; justify-content: center; margin-top: 104px; }

  /* Render the laptop screen UI at EXACT desktop dimensions (624×393), then
     scale it down to fit the bezel. Same proportions, same content density,
     same UI as a desktop user would see — just miniaturized. */
  .wl-showcase .mb-screen-content {
    width: 624px !important;
    height: 393px !important;
    inset: auto !important;
    top: 50% !important;
    left: 50% !important;
    transform-origin: center center !important;
    /* bezel ~404 wide / 624 ≈ 0.647 */
    transform: translate(-50%, -50%) rotate(180deg) scale(0.647) !important;
  }
}
@media (max-width: 600px) {
  /* bezel ~304 wide / 624 ≈ 0.487 */
  .wl-showcase .mb-screen-content {
    transform: translate(-50%, -50%) rotate(180deg) scale(0.487) !important;
  }
}
@media (max-width: 380px) {
  /* bezel ~264 wide / 624 ≈ 0.423 */
  .wl-showcase .mb-screen-content {
    transform: translate(-50%, -50%) rotate(180deg) scale(0.423) !important;
  }
}

/* =================================================================
   Mobile UX pass — restored trust signals, layout fixes, a11y
   (audit results integrated)
   ================================================================= */

/* ----- 1) Trust-Signale wiederherstellen statt verstecken ----- */
/* Hero-Infra reg-row (eWpG · KAGB · WpIG · BaFin) — kompakt, mehrzeilig */
@media (max-width: 720px) {
  .hero-reg-row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-top: 40px !important;
    gap: 8px 14px !important;
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
    align-items: center;
    opacity: 0.85;
  }
  .hero-reg-row > span:last-child {
    margin-left: 0 !important;
    width: 100%;
    margin-top: 6px;
    opacity: 0.7;
  }
}

/* KPI-Bar reg-pill — kompakt erhalten, statt komplett ausblenden */
@media (max-width: 600px) {
  .kpi-reg-pill {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    padding: 12px 16px !important;
    gap: 8px 12px !important;
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
    margin-top: 20px !important;
    align-items: center;
    justify-content: center;
  }
  .kpi-reg-pill > span:last-child {
    margin-left: 0 !important;
    width: 100%;
    text-align: center;
    margin-top: 4px;
    opacity: 0.7;
  }
}

/* Footer reg-badges (eWpG/KAGB/WpIG-Pills) — wieder zeigen, kompakt */
@media (max-width: 600px) {
  .footer-reg-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .footer-reg-badges > span {
    font-size: 9px !important;
    padding: 4px 9px !important;
  }
}

/* ----- 2) Hero-Kinetic: Buttons stacken bei sehr schmalen Phones ----- */
@media (max-width: 500px) {
  section[style*="overflow: hidden"] div[style*="display: flex"][style*="gap: 60"][style*="flex-wrap: wrap"][style*="align-items: flex-end"] {
    flex-direction: column !important;
    gap: 18px !important;
    align-items: stretch !important;
  }
}

/* ----- 3) STOCKS-Wort: visible parallax on mobile (animation parity) ----- */
@media (max-width: 600px) {
  .kin-stocks,
  section[style*="overflow: hidden"] div[style*="STOCKS"],
  section div[style*="font-size: clamp(180px"] {
    font-size: clamp(160px, 46vw, 220px) !important;
    opacity: 0.08 !important;
  }
}

/* ----- 4) KPI big cards: kompakter, weniger Scroll-Fatigue ----- */
@media (max-width: 600px) {
  div[style*="padding: 48px 32px"][style*="min-height: 240"] {
    padding: 26px 20px !important;
    min-height: 150px !important;
  }
}

/* ----- 5) Hero on-fold: weniger Padding-Top auf kleinen Phones ----- */
@media (max-width: 600px) {
  section[style*="min-height: 100vh"] {
    padding-top: 80px !important;
  }
}

/* ----- 6) Asset-Classes: Sidebar-Buttons mehr Atemraum + sauberer Touch ----- */
@media (max-width: 900px) {
  .ac-grid > div:first-child {
    display: flex !important;
    flex-direction: column;
    gap: 8px !important;
  }
  .ac-grid > div:first-child > button {
    min-height: 52px;
    padding: 14px 18px !important;
  }
  .ac-grid > div:first-child > button:active {
    transform: scale(0.99);
  }
}

/* ----- 7) Service-Overview: vertical connector lines removed on mobile ----- */

/* ----- 8) Subpages: rp-grid 1col schon bei 720px (war erst 900px) ----- */
@media (max-width: 720px) {
  .rp-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* ----- 9) Subpages: inv-how-grid + trust-grid 1col bei 600px ----- */
@media (max-width: 600px) {
  .inv-how-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .trust-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* ----- 10) Legal pages (Impressum/Datenschutz): DataRow 1col bei 600px ----- */
@media (max-width: 600px) {
  .imp-row,
  div[style*="grid-template-columns: 220px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  .imp-row > *:first-child,
  div[style*="grid-template-columns: 220px 1fr"] > *:first-child {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-faint);
  }
}

/* ----- 11) Asset-Manager: Workflow detail panel kompakter ----- */
@media (max-width: 900px) {
  .wf-grid > div[style*="min-height: 380"] {
    min-height: 280px !important;
    padding-bottom: 48px !important;
  }
  .wf-grid > div > button {
    min-height: 60px;
  }
  .wf-grid > div > button + button {
    margin-top: 4px;
  }
}

/* ----- 12) Whitelabel BrandPreview: Domain-Feld früher full-width ----- */
@media (max-width: 900px) {
  .bs-grid div[style*="aspect-ratio: 16 / 10"] div[style*="max-width: 280"] {
    max-width: 100% !important;
  }
}

/* ----- 13) Über-Uns Team-Grid: 1col bei sehr schmalen Phones ----- */
@media (max-width: 480px) {
  .team-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* ----- 14) Über-Uns Contact-Card: mehr Padding bei 320px ----- */
@media (max-width: 380px) {
  div[style*="border-radius: 28"] > div[style*="padding: clamp(40px"] {
    padding: 28px 20px !important;
  }
  .contact-line {
    padding: 22px 16px 4px !important;
  }
}

/* ----- 15) Service-Alternatives Bento: Hero-Cell visuell hervorheben ----- */
@media (max-width: 900px) {
  .svc-bento > div:first-child {
    border: 1px solid rgba(166, 255, 0, 0.25) !important;
    background: linear-gradient(180deg, rgba(166,255,0,0.04), rgba(166,255,0,0.01)) !important;
  }
}

/* ----- 16) FAQ Touch-Targets: konsistente Tap-Area auf alle Akkordeons ----- */
@media (max-width: 720px) {
  div[style*="border-radius: 18"][style*="overflow: hidden"] > div > button[style*="padding: 26px 28px"] {
    min-height: 64px;
  }
  /* +/− Indikator-Kreis: durchgängig 32×32 statt 28 */
  button > span[role="button"][style*="border-radius: 50%"],
  button > span[style*="border-radius: 50%"][style*="width: 28"] {
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0;
  }
}

/* ----- 17) Stakeholder On-Chain Row: Header über Body, mehr Luft ----- */
@media (max-width: 600px) {
  .stk-on-row > div:first-child {
    margin-bottom: 8px;
  }
}

/* ----- 18) Hero-Glass H1 zentriert: kleinerer min-clamp ----- */
@media (max-width: 600px) {
  section[style*="text-align: center"] h1 {
    font-size: clamp(34px, 9vw, 48px) !important;
  }
}

/* ----- 19) Testimonials: kompakter auf engen Phones ----- */
@media (max-width: 600px) {
  article[style*="border-radius: 18"] {
    padding: 22px !important;
  }
  article[style*="border-radius: 18"] p[style*="font-size: 18"],
  article[style*="border-radius: 18"] p[style*="fontSize: 18"] {
    font-size: 16px !important;
  }
}

/* ----- 20) Sub-Hero: weniger Top-Padding auf kleinen Phones ----- */
@media (max-width: 600px) {
  section[style*="180px 0 100px"] {
    padding: 92px 0 44px !important;
  }
}

/* ----- 21) Whitelabel-Showcase Sticky: padding tuned above (96px top for nav
   clearance, 4vh bottom to keep the last stage from clipping). The previous
   override here forced padding-bottom:0 which conflicted with the nav-clearance
   block — left as a no-op for documentation. ----- */

/* ----- 22) Touch-Feedback global: alle Buttons + Links bekommen Active-State ----- */
@media (hover: none) {
  button:active,
  a[role="button"]:active,
  .ac-grid button:active {
    transform: scale(0.985);
    transition: transform 0.08s ease;
  }
  a:active {
    opacity: 0.75;
  }
}

/* ----- 23) prefers-reduced-motion: Sticky-Scroll-Animationen deaktivieren ----- */
@media (prefers-reduced-motion: reduce) {
  /* Generic sticky containers: keine sticky animation */
  section > div[style*="position: relative"]:has(> div[style*="position: sticky"]) {
    height: auto !important;
  }
  section > div[style*="position: relative"] > div[style*="position: sticky"] {
    position: static !important;
    height: auto !important;
  }
  /* Whitelabel-Showcase auch zähmen */
  section.wl-showcase > div {
    height: auto !important;
  }
  section.wl-showcase > div > div:first-child {
    position: static !important;
    height: auto !important;
  }
  /* STOCKS Hero kein langsames Driften */
  section[style*="overflow: hidden"] div[style*="STOCKS"] {
    transform: none !important;
  }
  /* Animationen generell beruhigen */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =================================================================
   Mobile UX pass — second sweep (parity / animations / spacing)
   ================================================================= */

/* ValueChain mobile stepper is now rendered directly in JSX as
   .vc-strip-mobile — the legacy CSS-converted version of .vc-list-desktop
   was removed because it produced a duplicate bar of step titles. */

/* ----- ServiceOverview: stacked-layout row spacing (connector lines removed)
   Scoped to phone widths only — tablet 2-col layout uses 40px row-gap
   set further below in the tablet pass. ----- */
@media (max-width: 600px) {
  .svc-track {
    row-gap: 56px !important;
  }
}

/* ----- ServiceOverview: node and title on the same row at narrow phones -----
   Cleaner rhythm than node-on-top + 28px of padding. Each .svc-track child is
   a Reveal wrapper (extra div from useInView), so we descend one more level
   to reach the actual {knoten, connector, inhalt} group. */
@media (max-width: 600px) {
  .svc-track > div > div {
    display: grid !important;
    grid-template-columns: 32px 1fr !important;
    column-gap: 16px !important;
    align-items: start !important;
  }
  /* knoten (first child) spans the full vertical column so title sits next to it */
  .svc-track > div > div > div:first-child {
    grid-row: 1 / span 4 !important;
  }
  /* hide the 1×28 vertical connector — superfluous when stacked */
  .svc-track > div > div > div:nth-child(2) {
    display: none !important;
  }
  /* content block spans grid column 2 */
  .svc-track > div > div > div:nth-child(3) {
    padding-right: 0 !important;
    grid-column: 2;
  }
}

/* ----- KPI grid border-radius polish on stacked 1col -----
   When 4 cards collapse to 1col, only the first/last had rounded
   corners; the middle two were sharp rectangles. Match the wrapper.
   Scoped via the unique combo of repeat(auto-fit, minmax(220px) +
   gap:1 + background:var(--border) which only the KPI big variant uses
   — avoids matching AssetClasses project tiles. */
@media (max-width: 480px) {
  div[style*="grid-template-columns: repeat(auto-fit, minmax(220px"][style*="gap: 1"][style*="background: var(--border)"] > div {
    border-radius: 0 !important;
  }
  div[style*="grid-template-columns: repeat(auto-fit, minmax(220px"][style*="gap: 1"][style*="background: var(--border)"] > div:first-child {
    border-radius: 18px 18px 0 0 !important;
  }
  div[style*="grid-template-columns: repeat(auto-fit, minmax(220px"][style*="gap: 1"][style*="background: var(--border)"] > div:last-child {
    border-radius: 0 0 18px 18px !important;
  }
}

/* ----- WhitelabelShowcase: tighter scroll runway on phones -----
   The original 320/300/280vh + a 0.30 OPEN_END left users scrolling
   nearly three viewport-heights without strong stage progression.
   Reducing keeps the sequence intact but cuts the slog. */
@media (max-width: 900px) {
  .wl-showcase > div {
    height: 280vh !important;
  }
}
@media (max-width: 600px) {
  .wl-showcase > div {
    height: 260vh !important;
  }
}
@media (max-width: 380px) {
  .wl-showcase > div {
    height: 240vh !important;
  }
}

/* ----- Hero CTAs at 601-900: superseded by the tablet-pass rule (D)
   further down which caps buttons at 240px basis. Block removed to
   avoid dead-code source-order shadowing. ----- */

/* ----- Touch-feedback fallback: a[href] without role="button" still gets it -----
   The earlier rule only matched a[role="button"]. Most CTAs render plain. */
@media (max-width: 720px) {
  a[href]:not(.contact-line):not([class*="nav-"]) {
    -webkit-tap-highlight-color: transparent;
  }
}

/* ----- Hero stack: tighter rhythm so eyebrow → H1 → body → CTA fits one viewport ----- */
@media (max-width: 600px) {
  section[data-hs-hero] h1 {
    margin-top: 16px !important;
  }
  section[data-hs-hero] h1 ~ p {
    margin-top: 20px !important;
  }
  section[data-hs-hero] h1 ~ div[style*="display: flex"][style*="margin-top: 40"] {
    margin-top: 24px !important;
  }
  section[data-hs-hero] h1 ~ div[style*="margin-top: 36"] {
    margin-top: 24px !important;
  }
}

/* ----- Footer bottom strip: clean wrap on narrow phones ----- */
@media (max-width: 600px) {
  footer .shell > div:last-child {
    align-items: stretch !important;
  }
  footer .shell > div:last-child > span:last-child {
    line-height: 1.5 !important;
  }
}

/* ----- KPI Bar ticker variant: faster + tighter on phones ----- */
@media (max-width: 900px) {
  section[style*="border-top: 1px solid var(--border)"][style*="border-bottom: 1px solid var(--border)"] > div[style*="animation: tickerScroll"] {
    animation-duration: 24s !important;
    gap: 40px !important;
  }
}

/* ----- AssetClasses: prevent sidebar button overflow at narrow widths ----- */
@media (max-width: 600px) {
  .ac-grid > div:first-child > button > span:first-child {
    min-width: 0 !important;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ----- MediaLogos: cap "BÖRSE ONLINE" font size on very narrow phones ----- */
@media (max-width: 380px) {
  section.media-logos .ml-logo {
    font-size: clamp(12px, 3.6vw, 14px) !important;
  }
}

/* ----- Nav blur: lighter on phones (perf on mid-tier Android) ----- */
@media (max-width: 900px) {
  header[style*="position: fixed"] > div:first-child {
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }
}

/* ----- Testimonial cards: subtle accent border on tap (replaces hover) ----- */
@media (hover: none) {
  article[style*="border-radius: 18"]:active,
  .ac-grid div[style*="background: var(--bg)"]:active {
    border-color: rgba(166,255,0,0.3) !important;
  }
}

/* ----- Final CTA: balanced 50/50 buttons in tablet range ----- */
@media (max-width: 900px) and (min-width: 601px) {
  div[style*="border-radius: 26"][style*="text-align: center"] > div > div[style*="margin-top: 36"] > a,
  div[style*="border-radius: 26"][style*="text-align: center"] > div > div[style*="margin-top: 36"] > button {
    flex: 1 1 calc(50% - 6px);
  }
}

/* =================================================================
   TABLET / WIDER-MOBILE PASS — 601px–1100px
   Pain-zone fixes derived from a 4-agent audit of every page at
   iPad Mini portrait (768), iPad Air (820), iPad Mini landscape
   (1024), and the previously-uncovered 901–1100 band.
   ================================================================= */

/* ---------- (A) SUB-HERO + SUB-SECTION padding fills the 901-1100 gap
   The components hardcode `180px 0 100px` and `100px 0` which bypass
   `--pad-section`, so the only `--pad-section` overrides above don't
   reach them. Bridge the gap explicitly. ---------- */
@media (min-width: 901px) and (max-width: 1100px) {
  section[style*="180px 0 100px"] {
    padding: 150px 0 80px !important;
    min-height: 0 !important;
  }
  main section[style*="padding: 100px 0"] {
    padding: 72px 0 !important;
  }
  /* SubSection title block bottom-margin shrinks at tablet too */
  main section > div.shell > div[style*="margin-bottom: 56"][style*="max-width: 820"] {
    margin-bottom: 40px !important;
  }
}
@media (min-width: 721px) and (max-width: 900px) {
  /* Tighter than the legacy <=900 130/60 rule for the iPad-portrait band */
  section[style*="180px 0 100px"] {
    padding: 120px 0 56px !important;
  }
}

/* ---------- (B) HERO H1 / paragraph clamp tuning for 601-1100 ---------- */
@media (min-width: 601px) and (max-width: 900px) {
  section[data-hs-hero] h1 {
    font-size: clamp(44px, 6.6vw, 64px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.025em !important;
  }
  section[data-hs-hero] h1 ~ p {
    font-size: 16px !important;
  }
}
@media (min-width: 901px) and (max-width: 1100px) {
  section[data-hs-hero] h1 {
    font-size: clamp(56px, 7.4vw, 84px) !important;
    line-height: 1.0 !important;
  }
  section[data-hs-hero] h1 ~ p {
    font-size: 17px !important;
    margin-top: 24px !important;
  }
}

/* ---------- (C) HERO-INFRA reg-row spacing in 601-1100 band ---------- */
@media (min-width: 601px) and (max-width: 900px) {
  .hero-reg-row {
    margin-top: 48px !important;
    gap: 12px 16px !important;
    flex-wrap: wrap !important;
  }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .hero-reg-row {
    margin-top: 72px !important;
  }
}

/* ---------- (D) HERO CTA buttons: cap basis at tablet so they don't
   become 380px slabs at 820-900 — and ensure dignified width at 901-1100 */
@media (min-width: 601px) and (max-width: 900px) {
  section h1 ~ div[style*="display: flex"][style*="gap"][style*="flex-wrap: wrap"] > a,
  section h1 ~ div[style*="display: flex"][style*="gap"][style*="flex-wrap: wrap"] > button {
    flex: 0 1 240px !important;
    max-width: 260px;
    justify-content: center;
  }
}
@media (min-width: 901px) and (max-width: 1100px) {
  section[data-hs-hero] div[style*="display: flex"][style*="gap"][style*="flex-wrap: wrap"] > a,
  section[data-hs-hero] div[style*="display: flex"][style*="gap"][style*="flex-wrap: wrap"] > button {
    min-width: 200px;
  }
}

/* ---------- (E) HERO-KINETIC tablet: cap STOCKS and row gap ---------- */
@media (min-width: 601px) and (max-width: 1100px) {
  .kin-stocks,
  section[style*="overflow: hidden"] div[style*="STOCKS"] {
    font-size: clamp(220px, 32vw, 360px) !important;
  }
}
@media (min-width: 721px) and (max-width: 900px) {
  section[data-hs-hero] div[style*="gap: 60"][style*="flex-wrap: wrap"][style*="align-items: flex-end"] {
    gap: 36px !important;
    align-items: flex-start !important;
  }
  section[data-hs-hero] div[style*="gap: 60"][style*="flex-wrap: wrap"] > p {
    max-width: 100% !important;
    flex: 1 1 320px;
  }
}

/* ---------- (F) KPI big-grid: clean 2x2 at 601-900 + compact reg-pill ---------- */
@media (min-width: 601px) and (max-width: 900px) {
  div[style*="grid-template-columns: repeat(auto-fit, minmax(220px"] {
    grid-template-columns: 1fr 1fr !important;
  }
  div[style*="grid-template-columns: repeat(auto-fit, minmax(220px"] > div {
    padding: 36px 26px !important;
    min-height: 200px !important;
  }
  .kpi-reg-pill {
    padding: 14px 18px !important;
    gap: 10px 14px !important;
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
  }
}
@media (min-width: 601px) and (max-width: 760px) {
  /* Pill is close to wrapping; drop right-align so date wraps with tokens */
  .kpi-reg-pill > span:last-child { margin-left: 0 !important; }
}

/* ---------- (G) VALUE-CHAIN tablet (901-1100): smaller card, tighter
   gap and shorter runway so the pin isn't dead-air ---------- */
@media (min-width: 901px) and (max-width: 1100px) {
  .vc-runway { height: 240vh !important; }
  .vc-card-wrap { height: 360px !important; }
  .vc-card-wrap > div > div { padding: 28px 32px !important; }
  .vc-card-wrap > div > div > div:first-child { font-size: 84px !important; }
  .vc-grid { gap: 48px !important; }
}

/* ---------- (H) ASSET-CLASSES sidebar shrunk in tablet band ---------- */
@media (min-width: 901px) and (max-width: 1100px) {
  .ac-grid {
    grid-template-columns: 260px 1fr !important;
    gap: 24px !important;
  }
  .ac-grid > div:last-child {
    padding: 32px !important;
    min-height: 420px !important;
  }
  .ac-grid h3[style*="clamp(36px"] { font-size: 36px !important; }
}

/* ---------- (I) SERVICE-OVERVIEW: gate connector dots to 1-col only ---------- */
@media (min-width: 601px) and (max-width: 1100px) {
  /* Layout is 2-col here; suppress the vertical connector dots that
     were designed for the 1-col stack below 600. */
  .svc-track > div:not(:last-child)::after { display: none !important; }
  .svc-track {
    row-gap: 40px !important;
    column-gap: 28px !important;
  }
  .svc-track > div > div > div[style*="height: 28"][style*="width: 1"] {
    display: none !important;
  }
  /* Even item heights so 2-col rows align */
  .svc-track > div { min-height: 180px; }
}

/* ---------- (J) SECTION-HEADER eyebrow+H2 / right body paragraph rows ---------- */
@media (min-width: 601px) and (max-width: 900px) {
  section .shell > div[style*="justify-content: space-between"][style*="align-items: baseline"][style*="flex-wrap: wrap"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 18px !important;
  }
  section .shell > div[style*="justify-content: space-between"][style*="align-items: baseline"][style*="flex-wrap: wrap"] > p {
    max-width: 600px !important;
  }
}

/* ---------- (K) CASE-STUDIES: clean 4-col at tablet (drop instrument + arrow) ---------- */
@media (min-width: 701px) and (max-width: 900px) {
  .cs-row {
    grid-template-columns: 2fr 1.2fr 1fr 1.2fr !important;
    gap: 12px 16px !important;
    padding: 18px 22px !important;
  }
  .cs-row > *:nth-child(3),
  .cs-row > *:nth-child(6) { display: none !important; }
}

/* ---------- (L) MEDIA-LOGOS: marquee tuning across tablet bands ---------- */
@media (min-width: 481px) and (max-width: 600px) {
  section.media-logos .ml-track { gap: 36px !important; }
  section.media-logos .ml-logo { font-size: clamp(14px, 3.4vw, 17px) !important; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  section.media-logos .ml-eyebrow { min-width: 0 !important; }
  section.media-logos .ml-track { gap: 48px !important; }
}

/* ---------- (M) FOOTER: 3-up at iPad sizes; reconcile mid-range ---------- */
@media (min-width: 701px) and (max-width: 1000px) {
  .footer-grid {
    grid-template-columns: 1.2fr 1fr 1fr !important;
    gap: 32px 36px !important;
  }
  .footer-grid > *:first-child {
    grid-column: 1 / -1 !important;
  }
}
@media (min-width: 481px) and (max-width: 700px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px 24px !important;
  }
  .footer-grid > *:first-child {
    grid-column: 1 / -1 !important;
  }
}

/* ---------- (N) FINAL-CTA tablet padding ---------- */
@media (min-width: 601px) and (max-width: 900px) {
  div[style*="border-radius: 26"][style*="text-align: center"] {
    padding: clamp(48px, 6vw, 80px) 36px !important;
  }
}
@media (min-width: 901px) and (max-width: 1100px) {
  div[style*="border-radius: 26"][style*="text-align: center"] {
    padding: 64px 36px !important;
  }
}

/* ---------- (O) FAQ accordion: tighter padding + shrunk indent at 601-1100 ---------- */
@media (min-width: 601px) and (max-width: 1100px) {
  div[style*="border-radius: 18"][style*="overflow: hidden"] > div > button[style*="padding: 26px 28px"] {
    padding: 22px 24px !important;
    gap: 18px !important;
  }
  div[style*="border-radius: 18"][style*="overflow: hidden"] > div > button[style*="padding: 26px 28px"] > span:nth-child(2) {
    font-size: 17px !important;
  }
  div[style*="border-radius: 18"][style*="overflow: hidden"] div[style*="padding: 0px 28px 28px 82px"],
  div[style*="border-radius: 18"][style*="overflow: hidden"] div[style*="0 28px 28px 82px"] {
    padding: 0 24px 24px 70px !important;
    font-size: 15px !important;
  }
}

/* ---------- (P) Anchored sections — tighter scroll-margin in tablet band ---------- */
@media (min-width: 601px) and (max-width: 1100px) {
  [id="workflow"], [id="how"], [id="models"], [id="how-we-work"], [id="asset-classes"] {
    scroll-margin-top: 108px;
  }
}

/* =================================================================
   PAGE-INVESTOREN tablet pass
   ================================================================= */
@media (min-width: 601px) and (max-width: 1100px) {
  .inv-bens-grid > div {
    padding: 24px !important;
    min-height: 180px !important;
    gap: 10px !important;
  }
  .inv-bens-grid h3 { font-size: 18px !important; }
  .rp-grid > div[style*="padding: 36"] { padding: 28px !important; }
  .rp-grid h3 { font-size: 22px !important; }
}
@media (min-width: 601px) and (max-width: 1000px) {
  /* Keep 2-col on iPad portrait — the component-local @max-width:800px
     forces premature 1-col stack. Reassert 2-col here. */
  .inv-how-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }
  .inv-how-grid > div > div,
  .inv-how-grid div[style*="padding: 36"] {
    padding: 24px !important;
    min-height: 200px !important;
  }
  .inv-how-grid h3 { font-size: 19px !important; }
}
@media (min-width: 721px) and (max-width: 1000px) {
  /* 5 docs render as 3+2 (no orphan); 3-col + tighter padding */
  .docs-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .docs-grid > div,
  .docs-grid div[style*="padding: 24"] {
    padding: 18px !important;
  }
}

/* =================================================================
   PAGE-STAKEHOLDER tablet pass
   ================================================================= */
@media (min-width: 601px) and (max-width: 1100px) {
  .stk-types > div > div,
  .stk-types div[style*="padding: 28"] { padding: 22px !important; }
  .stk-types h3 { font-size: 18px !important; }
  .stk-bens > div {
    padding: 24px !important;
    min-height: 180px !important;
    gap: 10px !important;
  }
  .stk-bens h3 { font-size: 18px !important; }
  .stk-on-row h3 {
    font-size: clamp(22px, 2.6vw, 28px) !important;
  }
  .stk-on-row {
    padding: 26px 0 !important;
    gap: 24px !important;
  }
}
@media (min-width: 721px) and (max-width: 1000px) {
  /* Insert 2-col intermediate so the 3 model cards don't cliff
     straight from 3-col → 1-col with no buffer. 3rd card spans. */
  .stk-models {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }
  .stk-models > div:nth-child(3) {
    grid-column: 1 / -1 !important;
  }
  .stk-models > div > div,
  .stk-models div[style*="padding: 36"] {
    padding: 26px !important;
    gap: 14px !important;
  }
}
@media (min-width: 721px) and (max-width: 900px) {
  .stk-on-row {
    grid-template-columns: 80px 1fr 1.6fr !important;
    gap: 18px !important;
  }
}

/* =================================================================
   PAGE-UEBER-UNS tablet pass
   ================================================================= */
@media (min-width: 601px) and (max-width: 1100px) {
  .mis-row h3 { font-size: clamp(24px, 2.8vw, 32px) !important; }
  .mis-row { padding: 32px 0 !important; gap: 24px !important; }
  .trust-grid > div > div,
  .trust-grid div[style*="padding: 22"] {
    padding: 18px 14px !important;
  }
  .trust-grid div[style*="font-size: 14"][style*="font-family: var(--font-mono)"] {
    font-size: 13px !important;
  }
  /* contact-row value clamp + soft wrap (no break-all in middle of email) */
  .contact-line div[style*="font-size: clamp(22px"] {
    font-size: clamp(20px, 2.6vw, 28px) !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }
  .contact-line { padding: 26px 22px 4px !important; }
  div[style*="border-radius: 28"] > div[style*="padding: clamp(40px"] {
    padding: 40px 32px !important;
  }
  .contact-head h3 {
    font-size: clamp(30px, 4vw, 48px) !important;
  }
}
@media (min-width: 721px) and (max-width: 900px) {
  /* Keep mission 2-col on iPad portrait — 1-col here wastes width */
  .mis-row {
    grid-template-columns: 1fr 1.4fr !important;
  }
}
@media (min-width: 901px) and (max-width: 1100px) {
  /* 5 milestones — clean 5-col so no orphan */
  .story-grid {
    grid-template-columns: repeat(5, 1fr) !important;
  }
  .story-grid > div > div,
  .story-grid > div[style*="padding: 28"] {
    padding: 20px !important;
    min-height: 200px !important;
  }
  .story-grid div[style*="font-size: 36"] { font-size: 28px !important; }
  /* Team: 4-col but capped photo aspect so faces don't dominate */
  .team-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
  }
  .team-grid div[style*="aspect-ratio: 3 / 4"] {
    aspect-ratio: 4 / 5 !important;
  }
  .team-grid div[style*="padding: 20px 22px 22px"] {
    padding: 16px 16px 18px !important;
  }
  /* Values: 4-col stays at tablet landscape, tightened */
  .val-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
  }
  .val-grid > div > div,
  .val-grid div[style*="padding: 28"] { padding: 20px !important; }
  .val-grid h3 { font-size: 17px !important; }
}
@media (min-width: 601px) and (max-width: 900px) {
  /* 5 milestones → 3-col with last row stretched */
  .story-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .story-grid > div > div,
  .story-grid div[style*="padding: 28"] {
    padding: 20px !important;
    min-height: auto !important;
  }
  .story-grid div[style*="font-size: 36"] { font-size: 28px !important; }
  /* Team: 2-col with square aspect ratio so heads aren't clipped */
  .team-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }
  .team-grid div[style*="aspect-ratio: 3 / 4"] {
    aspect-ratio: 1 / 1 !important;
    background-position: center 20% !important;
  }
  .team-grid div[style*="padding: 20px 22px 22px"] {
    padding: 18px 18px 20px !important;
  }
}
@media (min-width: 601px) and (max-width: 760px) {
  /* contact-row stacks at <=760 (component-local); make sure left
     border disappears and replaces with top border */
  .contact-row { grid-template-columns: 1fr !important; }
  .contact-row .contact-line + .contact-line {
    border-left: none !important;
    border-top: 1px solid var(--border) !important;
  }
}

/* =================================================================
   PAGE-WHITELABEL tablet pass
   ================================================================= */
@media (min-width: 901px) and (max-width: 1100px) {
  .wl-feat-grid { grid-template-columns: 1fr 1fr !important; }
  .wl-feat-grid > div {
    padding: 28px !important;
    min-height: 200px !important;
  }
  .bs-grid div[style*="aspect-ratio: 16 / 10"] div[style*="max-width: 280"] {
    max-width: 100% !important;
  }
  .bs-grid div[style*="aspect-ratio: 16 / 10"] div[style*="font-size: 38"] {
    font-size: 30px !important;
  }
  .mod-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* =================================================================
   PAGE-ASSET-MANAGER tablet pass
   ================================================================= */
@media (min-width: 901px) and (max-width: 1100px) {
  .am-bens-grid { grid-template-columns: 1fr 1fr !important; }
  .am-bens-grid > div {
    padding: 28px !important;
    min-height: 200px !important;
  }
  .wf-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .wf-grid > div[style*="min-height: 380"] {
    min-height: 300px !important;
    padding-bottom: 56px !important;
  }
}
@media (max-width: 1024px) {
  /* Product / cost rows: 3-col / 4-col can't survive iPad portrait */
  .prod-head { display: none !important; }
  .prod-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 24px !important;
  }
}
@media (min-width: 721px) and (max-width: 1024px) {
  /* Cost row: 2-col split with descriptive sub-rows */
  .cost-head {
    grid-template-columns: 1.4fr 1fr !important;
    gap: 16px !important;
  }
  .cost-head > span:nth-child(3),
  .cost-head > span:nth-child(4) { display: none !important; }
  .cost-row {
    grid-template-columns: 1.4fr 0.8fr !important;
    gap: 12px 20px !important;
    padding: 22px 24px !important;
  }
  .cost-row > span:nth-child(3),
  .cost-row > span:nth-child(4) {
    grid-column: 1 / -1 !important;
    font-size: 13px !important;
  }
}

/* =================================================================
   SERVICE-ALTERNATIVES tablet pass
   ================================================================= */
@media (min-width: 901px) and (max-width: 1100px) {
  .svc-bento > div:first-child {
    min-height: 360px !important;
    padding: 36px !important;
  }
  .svc-bento > div:first-child h3 { font-size: 36px !important; }
  /* Wide "04 — Zahlung in Euro" row */
  .svc-bento + div[style*="border-radius: 18"][style*="display: flex"] {
    padding: 28px 32px !important;
    gap: 20px !important;
  }
  .svc-bento + div[style*="border-radius: 18"][style*="display: flex"] h3 {
    flex: 1 1 100% !important;
    font-size: 24px !important;
  }
}

/* =================================================================
   WHITELABEL-SHOWCASE — extend mobile mode to <=1024px so the 640px
   macbook doesn't overflow at iPad landscape. The JSX matchMedia
   gate has been raised to 1024 in lockstep so MobilePreview mounts.
   ================================================================= */
@media (min-width: 901px) and (max-width: 1024px) {
  /* Mid-tier macbook: between desktop (640) and the 420 of <=900 */
  .mb-stage {
    --base-w: 540px !important;
    --base-d: 360px !important;
    --screen-h: 340px !important;
  }
  /* bezel ~524 / 624 ≈ 0.840 — mb-screen-content uses this scale to
     render the 624×393 inner UI at exact pixel dimensions, scaled. */
  .wl-showcase .mb-screen-content {
    transform: translate(-50%, -50%) rotate(180deg) scale(0.840) !important;
  }
  /* Heading min-height for longer tablet headings */
  .wl-heading-mobile .wl-mh-stack { min-height: 280px; }
  .wl-heading-mobile .wl-mh-title {
    font-size: clamp(34px, 4.4vw, 44px) !important;
  }
  .wl-heading-mobile .wl-mh-body {
    font-size: 15px;
    max-width: 640px;
  }
  .wl-heading-mobile { padding: 18px 0 26px !important; }
}
@media (min-width: 721px) and (max-width: 820px) {
  /* iPad Mini portrait band — slightly larger laptop than the <=720 step */
  .mb-stage {
    --base-w: 460px !important;
    --base-d: 308px !important;
    --screen-h: 302px !important;
  }
  .wl-showcase .mb-screen-content {
    transform: translate(-50%, -50%) rotate(180deg) scale(0.711) !important;
  }
  .wl-heading-mobile .wl-mh-stack { min-height: 260px; }
}
@media (min-width: 481px) and (max-width: 600px) {
  /* Larger phones can host a bigger laptop than the 320 of <=600 */
  .mb-stage {
    --base-w: 360px !important;
    --base-d: 242px !important;
    --screen-h: 236px !important;
  }
  .wl-showcase .mb-screen-content {
    transform: translate(-50%, -50%) rotate(180deg) scale(0.551) !important;
  }
}
@media (max-width: 1024px) {
  /* Mobile-mode layout for the showcase on iPad landscape and below.
     Source-of-truth for the layout switch — works in tandem with the
     matchMedia gate (whitelabel-showcase.jsx) and the 1024 inline
     @media in that component's <style> block. */
  .wl-showcase .wl-sticky {
    padding-bottom: 6vh !important;
  }
  .wl-showcase .wl-laptop-wrap {
    transform: none !important;
    margin-top: 0 !important;
  }
}

/* =================================================================
   LEGAL PAGES — impressum + datenschutz tablet pass
   ================================================================= */

/* DataRow / DsRow: collapse "220px 1fr" earlier (820 instead of 720) */
@media (max-width: 820px) {
  .imp-row,
  .ds-row,
  div[style*="grid-template-columns: 220px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 14px 0 !important;
  }
  .imp-row > *:first-child,
  .ds-row > *:first-child,
  div[style*="grid-template-columns: 220px 1fr"] > *:first-child {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-faint);
  }
}
@media (min-width: 821px) and (max-width: 1100px) {
  /* Tighten label column from 220→180 to free content width */
  .imp-row,
  .ds-row,
  div[style*="grid-template-columns: 220px 1fr"] {
    grid-template-columns: 180px 1fr !important;
    gap: 20px !important;
  }
}

/* BaFin reg-no font cap so the value doesn't crash the eyebrow label */
@media (min-width: 601px) and (max-width: 1100px) {
  div[style*="font-size: clamp(36px, 4.6vw, 56px)"] {
    font-size: 40px !important;
    letter-spacing: -0.02em !important;
  }
}

/* Unify legal grid collapse breakpoints to <=900 */
@media (max-width: 900px) {
  .status-grid,
  .bafin-grid,
  .schlicht-grid,
  .host-grid,
  .bot-grid,
  .auf-grid,
  .rights-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* general-grid (3-col): 2-col intermediate, then 1-col */
@media (min-width: 721px) and (max-width: 1100px) {
  .general-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }
}
@media (max-width: 720px) {
  .general-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* proc-row (4-col Auftragsverarbeiter): pair to 2-col in tablet band */
@media (min-width: 601px) and (max-width: 1024px) {
  .proc-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px 16px !important;
    padding: 14px 18px !important;
  }
  .proc-row[style*="text-transform: uppercase"] { display: none !important; }
  .proc-row > *:nth-child(1) {
    grid-column: 1 / -1 !important;
    font-size: 15px !important;
    padding-bottom: 4px !important;
    border-bottom: 1px dashed var(--border) !important;
    margin-bottom: 4px !important;
  }
}

/* cookie-row collapse moved up to <=820 */
@media (max-width: 820px) {
  .cookie-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 14px 18px !important;
  }
  .cookie-row > *:first-child {
    font-family: var(--font-mono);
    color: var(--accent) !important;
  }
  .cookie-row[style*="text-transform: uppercase"] { display: none !important; }
}

/* Long legal URLs/emails: clean wrap across all tablet widths */
@media (max-width: 1100px) {
  a[style*="border-bottom: 1px solid"] {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    hyphens: none !important;
  }
}

/* Card inner padding clamp shrink for 601-900 to match shell width */
@media (min-width: 601px) and (max-width: 900px) {
  div[style*="padding: clamp(28px, 3.5vw, 44px)"] { padding: 24px !important; }
}

/* DsList bullet alignment with shrunken body font in tablet band */
@media (max-width: 900px) {
  ul[style*="list-style: none"] li[style*="grid-template-columns: 14px 1fr"] > span:first-child {
    margin-top: 8px !important;
  }
}

/* Section heading marginBottom: 56 too generous at tablet */
@media (min-width: 601px) and (max-width: 1100px) {
  main section > .shell > div[style*="margin-bottom: 56"],
  main section > .shell > div[style*="marginBottom: 56"] {
    margin-bottom: 36px !important;
  }
}

/* Overflow guard across all tablet widths */
@media (min-width: 601px) and (max-width: 1100px) {
  html, body { overflow-x: hidden !important; }
}