/* ============================================================
   GETALWIN · MOBILE (≤767px)
   Eigenständige Mobile-Komposition nach
   GETALWIN_MOBILE_FINAL_HANDOVER.md (Design: Claude Design).

   Grundsatz: EIN DOM. Alles hier gilt ausschließlich bis 767px.
   Ab 768px erbt die Seite unverändert den eingefrorenen Desktop.
   Der frühere 860px-Mobile-Stack ist vollständig ersetzt.

   Aufbau
     1  Tokens und Basis
     2  Header, Scroll-Fortschritt, Menü
     3  Sticky-CTA
     4  Typografie und Elemente
     5  Startseite: Hero … Footer
     6  Unterseiten: Kaufen, Exklusiv, Hilfe, Login, Hub, Legal, 404
     7  Bewegung, Reduced Motion
   ============================================================ */

/* Additives Mobile-Markup ist auf Desktop unsichtbar und für
   Screenreader stumm — keine Inhaltsdublette. */
.m-only{ display:none !important; }
/* site.js legt Burger und Menue-Dialog auf jeder Seite an. Ab 861px zeigt
   home.css wieder die Desktop-Navigation — dort gehoeren beide nicht ins
   Layout, sonst erscheint das Panel ungestylt unter dem Footer.
   Zwischen 768 und 860px bleibt der Burger wie im Bestand erhalten. */
@media (min-width:861px){ #ga-burger,#ga-menu{ display:none; } }
/* Querformat-Telefone (z. B. 915x412) liegen ueber dem 860px-Breakpoint —
   das Video-Modal folgt dort der Hoehe, nicht der Breite. */
@media (max-height:500px){
  #ga-player{ padding:12px; }
  #ga-player .vp-box{ width:min(calc(100vw - 32px), 960px,
      calc((100dvh - 40px) * 1.7778)) !important; }
  #ga-player video{ width:100%; aspect-ratio:16 / 9; object-fit:contain;
    max-height:calc(100dvh - 40px); border-radius:16px; }
  #ga-player .vp-close{ top:10px; right:10px; width:44px; height:44px;
    border-radius:12px; background:rgba(10,12,16,.55);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.18); font-size:15px; z-index:2;
    transform:none !important; }
}
/* Der Bestand haengt eine eigene CTA-Leiste an; sie ist mobil unerwuenscht. */
#ga-ctabar{ display:none !important; }
/* Die Desktop-Canvas sind mobil abgeschaltet (site.js); ihre leeren
   Elemente duerfen dort auch nicht im Layout stehen. */
@media (max-width:767px){ .hero-canvas,.alwin-canvas{ display:none !important; } }
/* Das Inhaltsverzeichnis ist jetzt ein <details>. Auf Desktop darf davon
   nichts sichtbar werden: kein Marker, gleiche Typografie wie zuvor. */
details.legal-toc > summary{ list-style:none; cursor:default; }
details.legal-toc > summary::-webkit-details-marker{ display:none; }
details.legal-toc > summary::marker{ content:''; }
@media (max-width:767px){ .m-only{ display:block !important; }
  .m-only.m-thumb,.m-only.m-inline{ display:inline !important; }
  /* Reihen-Komponenten brauchen Flex — das pauschale block !important
     oben wuerde ihre Zeilenform sonst aufloesen. */
  .m-carousel-foot.m-only,.m-tabs.m-only{ display:flex !important; }
  .d-only{ display:none !important; }
  details.legal-toc > summary{ cursor:pointer; } }

/* ------------------------------------------------------------
   1 · TOKENS UND BASIS
   ------------------------------------------------------------ */
@media (max-width:767px){
  :root{
    --m-bg:#08090D;          /* Basisfläche */
    --m-bg2:#0A0C12;         /* zweite Tiefe, alterniert je Sektion */
    --m-raise:#0D1019;       /* gehobene Fläche (PRO-Karte) */
    --m-card:rgba(255,255,255,.03);
    --m-edge:rgba(255,255,255,.07);   /* Sektionskante */
    --m-line:rgba(255,255,255,.10);   /* Kartenrahmen */
    --m-btn:rgba(255,255,255,.14);    /* Buttonrahmen */
    --m-ink:#EEF1F6;
    --m-list:#DCE1EB;
    --m-card-ink:#C4CBD8;
    --m-sec:#9AA4B6;
    --m-meta:#8B94A6;
    --m-mono:#7B8598;
    --m-acc:#4DE0C7;
    --m-on-acc:#04221C;
    --m-err:#FF9B93;
    --m-ex:#8B93F8;          /* EXKLUSIV-Zweitakzent aus dem Bestand */
    --m-pad:clamp(18px,5.13vw,22px);
    --m-ease:cubic-bezier(.22,.8,.24,1);
    --m-mail:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'><rect x='3' y='5' width='18' height='14' rx='2'/><path d='m3 7 9 6 9-6'/></svg>");
  }

  html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; font-synthesis:none; }
  /* Das Nadelstreifen-Raster ist an der 1200px-Buehne verankert. Auf
     Telefonbreiten bleibt davon ein zusammenhangloses 60px-Gitter uebrig,
     das die Flaechen unruhig macht. Kopflicht und Kornschicht bleiben. */
  .ga-bg::before{ background-image:radial-gradient(1100px 620px at 50% -140px,rgba(255,255,255,.035),transparent 70%) !important;
    background-size:100% 100% !important; }
  body.ga-home{ background:var(--m-bg); overflow-x:hidden; }

  /* Die Bühne wird zur einfachen Spalte: keine Haarlinien, kein Raster,
     kein Außenraum — Tiefe entsteht über Flächen. */
  .stage{ max-width:none; width:100%; padding-left:var(--m-pad); padding-right:var(--m-pad); }

  /* Sektionsrhythmus: harte Kante mit 1px Lichtlinie statt Verlaufsnaht */
  .sec{ padding:40px 0 44px; border-top:1px solid var(--m-edge); background:var(--m-bg); }
  .sec:nth-of-type(even){ background:var(--m-bg2); }
  .hero,.sub-hero{ border-top:0; }

  img,video,canvas{ max-width:100%; }
}

/* ------------------------------------------------------------
   2 · HEADER, SCROLL-FORTSCHRITT, MENÜ
   Gilt bis 860px: home.css blendet ab dort die Desktop-Navigation aus,
   also muss die mobile Navigation im selben Bereich greifen.
   ------------------------------------------------------------ */
@media (max-width:860px){
  /* Die Chrome-Komponenten duerfen nicht vom Seiten-Reset abhaengen:
     die Legal-Seiten fuehren keinen globalen border-box-Reset, dort
     wuerde das Panel content-box gerechnet (430px breit, 40px links
     verschoben). box-sizing ist deshalb Teil der Komponente. */
  .hd,.hd *,#ga-menu,#ga-menu *,#ga-burger,#ga-burger *,#ga-progress{ box-sizing:border-box; }
  .hd{ position:fixed; top:0; left:0; right:0; z-index:60;
    background:rgba(8,9,13,.86); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--m-edge); }
  .hd-row{ height:56px; display:flex; align-items:center; justify-content:space-between; }
  .hd .wordmark{ font-size:18px; }
  /* Kein Demo-Button und keine Desktop-Navigation im Mobile-Header */
  .hd nav,.hd-actions{ display:none !important; }
  body.ga-home main,body.legal-page main{ padding-top:56px; }
  /* Der Bestand haelt den Header ab 861px unveraendert. */

  /* Video-Modal: zentriert, symmetrische Kanten, Close im Panel.
     Nur hier — das Desktop-Videoformat bleibt eingefroren. */
  #ga-player{ padding:16px; }
  #ga-player .vp-box{ width:min(calc(100vw - 32px), 960px,
      calc((100dvh - 48px) * 1.7778)); }
  #ga-player video{ width:100%; aspect-ratio:16 / 9; object-fit:contain;
    max-height:calc(100dvh - 48px);
    border-radius:16px; }
  #ga-player .vp-close{ top:10px; right:10px; width:44px; height:44px;
    border-radius:12px; background:rgba(10,12,16,.55);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.18); font-size:15px; z-index:2;
    transform:none !important; }
  @media (max-width:340px){ #ga-player .vp-box{ width:calc(100vw - 24px); } }

  /* Scroll-Fortschritt auf der Headerkante */
  #ga-progress{ display:block; position:absolute; left:0; bottom:-1px; height:1.5px; width:0;
    background:linear-gradient(90deg,rgba(77,224,199,.4),var(--m-acc));
    transition:width .1s linear; pointer-events:none; }

  /* Dreistrich-Button 44×44 */
  #ga-burger{ display:flex !important; width:44px; height:44px; align-items:center; justify-content:center;
    flex-direction:column; gap:5px; background:none; border:0; padding:0; }
  #ga-burger span{ display:block; width:20px; height:1.5px; background:var(--m-ink);
    transition:transform .24s var(--m-ease),opacity .18s ease; }
  #ga-burger.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  #ga-burger.open span:nth-child(2){ opacity:0; }
  #ga-burger.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

  /* Menü-Dialog */
  #ga-menu{ display:block !important; position:fixed; inset:0; z-index:80; visibility:hidden; opacity:0;
    background:rgba(6,7,10,.72); transition:opacity .2s ease,visibility .2s ease; }
  #ga-menu.open{ visibility:visible; opacity:1; }
  /* Drawer: die Seite bleibt links abgedunkelt sichtbar */
  .gam-panel{ position:absolute; top:0; right:0; bottom:0; width:min(86vw,400px);
    background:#0A0D14; border-left:1px solid rgba(255,255,255,.09);
    border-radius:18px 0 0 18px;
    box-shadow:-24px 0 70px rgba(0,0,0,.5);
    display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain;
    padding:0 20px calc(env(safe-area-inset-bottom) + 4px);
    transform:translateX(100%); opacity:1;
    transition:transform .28s var(--m-ease); }
  #ga-menu.open .gam-panel{ transform:none; opacity:1; }
  .gam-head{ height:56px; display:flex; align-items:center; justify-content:space-between;
    border-bottom:1px solid var(--m-edge); }
  .gam-head .wordmark{ font-size:18px; }
  #ga-menu-close{ width:44px; height:44px; margin-right:-10px; font-size:19px;
    background:none; border:0; color:var(--m-sec); }
  /* Referenz fuehrt die Menuezeilen ohne Nummern und ohne Zusatz */
  .gam-nav a i,.gam-sec a em{ display:none; }
  .gam-nav{ padding-top:8px; }
  .gam-nav{ padding-top:4px; }
  .gam-nav a{ display:flex; align-items:center; gap:14px; min-height:54px;
    font-family:var(--sg); font-size:20px; font-weight:600; letter-spacing:-.015em;
    color:var(--m-ink); border-bottom:1px solid var(--m-edge); }
  .gam-nav a i{ font-style:normal; font-family:var(--mono); font-size:11.5px; color:var(--m-mono); }
  .gam-nav a[aria-current],.gam-nav a.gam-on{ color:var(--m-acc); }
  .gam-dot{ margin-left:auto; width:6px; height:6px; border-radius:50%;
    background:var(--m-acc); opacity:0; }
  .gam-nav a[aria-current] .gam-dot,.gam-nav a.gam-on .gam-dot{ opacity:1; }
  .gam-sec{ padding:14px 0 0; }
  .gam-sec a{ display:flex; align-items:center; gap:10px; min-height:52px;
    font-size:16.5px; color:var(--m-list); }
  .gam-sec a em{ font-style:normal; font-size:13px; color:var(--m-meta); }
  .gam-sec a[aria-current]{ color:var(--m-acc); }
  .gam-foot{ margin-top:auto; padding:16px 0 18px; display:grid;
    grid-template-columns:1fr 1fr; gap:9px; }
  .gam-cta{ grid-column:1 / -1; white-space:nowrap; }
  .gam-cta span{ margin-left:8px; }
  .gam-cta{ display:flex; align-items:center; justify-content:center; height:50px;
    border-radius:12px; background:linear-gradient(180deg,#6BEBD6,#3ED0B7);
    color:var(--m-on-acc) !important; font-weight:600; font-size:16px;
    box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 10px 26px rgba(77,224,199,.16); }
  .gam-wa,.gam-mail{ display:flex; align-items:center; justify-content:center; gap:9px; min-height:48px;
    border:1px solid var(--m-btn); border-radius:12px; color:var(--m-ink) !important; font-size:15px; }
}

/* ------------------------------------------------------------
   3 · STICKY-CTA
   ------------------------------------------------------------ */
@media (max-width:767px){
}

/* ------------------------------------------------------------
   4 · TYPOGRAFIE UND ELEMENTE
   ------------------------------------------------------------ */
@media (max-width:767px){
  .eyebrow{ font-family:var(--mono); font-size:11.5px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--m-acc); }

  .hero h1,.h1{ font-family:var(--sg); font-size:32px; line-height:1.06;
    letter-spacing:-.032em; font-weight:600; color:var(--m-ink); }
  /* Auch Inline-H1 (Login, 404) folgen dem Utility-Mass — !important
     schlaegt die Inline-Styles des Bestands. */
  .sub-hero .h1,.sub-hero h1{ font-size:29px !important; line-height:1.12 !important;
    letter-spacing:-.028em !important; margin-top:14px !important; }
  /* Kurze Utility-Seiten brauchen keinen vh-Hero */
  .sec.sub-hero{ min-height:0 !important; }
  .sub-hero .status-card{ margin-top:20px !important; padding:14px 16px;
    font-size:15px; line-height:1.55; }
  .sub-hero .status-card b{ font-size:15.5px; }
  .h2{ font-family:var(--sg); font-size:30px; line-height:1.10; letter-spacing:-.026em;
    font-weight:600; color:var(--m-ink); margin-top:12px; }
  .h2-sm{ font-size:26px; line-height:1.14; }
  .lead{ margin-top:12px; font-size:17px; line-height:1.6; color:var(--m-sec); max-width:34ch; }
  /* Meta bleibt Meta — aber lesbar (Untergrenze 13px) */
  .chat-note,.plan-note,.b2b-note{ font-size:13px !important; }
  .plan-sub{ font-size:15px !important; }
  .compare-close{ font-size:15.5px; }

  /* Desktop-Umbruchhilfen greifen auf Mobile nicht */
  .nb{ white-space:normal !important; }
  /* Fest gesetzte Umbrueche in Fliesstexten sind fuer die Desktopbreite
     gesetzt und erzeugen auf Telefonbreiten nur Leerzeilen. */
  .lead br,.plan-sub br{ display:none; }
  /* Waisenwort-Bindung: bindet das letzte Wortpaar nur mobil.
     Auf dem Desktop bleibt es ein gewoehnliches Leerzeichen, damit
     der eingefrorene Umbruch unveraendert bleibt. */
  .m-nb{ white-space:nowrap; }
  .nl{ display:inline !important; }

  /* Buttons: eine Form auf allen Seiten */
  .btn-primary,.plan-cta,.btn-cta{ display:flex; align-items:center; justify-content:center;
    width:100%; height:50px; border-radius:12px;
    background:linear-gradient(180deg,#6BEBD6,#3ED0B7); color:var(--m-on-acc) !important;
    font-weight:600; font-size:16px; letter-spacing:-.01em; border:0;
    box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 10px 26px rgba(77,224,199,.16); }
  .btn-ghost,.plan.ex .plan-cta{ display:flex; align-items:center; justify-content:center;
    width:100%; min-height:48px; border-radius:12px; border:1px solid var(--m-btn);
    background:none; color:var(--m-ink) !important; font-size:16px; box-shadow:none; }
  .link-arrow{ min-height:44px; display:inline-flex; align-items:center; font-size:15px; }

  /* Markenregel: nur die echte Wortmarke traegt den gruenen Punkt.
     Textnennungen (Videozeilen, Fliesstext) laufen ohne Signatur. */
  .wm-inline .wm-dot{ display:none; }

  /* Video: randlose Zeile mit pulsierendem Play-Kreis, kein Kasten.
     Die Dauer steht als eigene Meta rechts — kein Mittelpunkt. */
  .btn-video{ display:flex; align-items:center; gap:12px; width:100%; padding:14px 0;
    background:none; border:0; border-radius:0; font-size:15.5px; color:var(--m-list); }
  /* Der Titel-Span dehnt sich, die Zeit steht am rechten Rand */
  .btn-video > span:has(.vid-zeit){ flex:1 1 auto; display:flex; align-items:center; }
  .btn-video .vid-zeit{ margin-left:auto; flex:0 0 auto; font-family:var(--mono);
    font-size:12px; letter-spacing:.04em; color:var(--m-mono);
    border:1px solid var(--m-edge); border-radius:7px; padding:3px 8px; }
  @keyframes gaPlay{ 70%{ box-shadow:0 0 0 12px rgba(77,224,199,0); }
                     100%{ box-shadow:0 0 0 0 rgba(77,224,199,0); } }
  .btn-video .vp,.btn-video > span:first-child{ box-shadow:0 0 0 0 rgba(77,224,199,.5);
    animation:gaPlay 2.4s infinite; }
}

/* ------------------------------------------------------------
   5 · STARTSEITE
   ------------------------------------------------------------ */
@media (max-width:767px){
  /* --- Hero --- */
  /* site.css setzt section{padding-block:42px !important} — der Hero
     braucht oben weniger, damit die Headline so hoch steht wie in der
     Referenz, und unten gar nichts, weil das Band den Abschluss bildet. */
  .hero{ position:relative; overflow:hidden; background:var(--m-bg);
    padding-block:26px 0 !important; }
  .hero .stage{ padding-top:0; }
  .hero-ctas{ margin-top:18px; }
  .hero .btn-primary{ margin-top:0; }
  .hero .stage{ position:relative; z-index:2; }
  .m-hero-canvas{ position:absolute; left:0; right:0; top:0; height:600px; z-index:0;
    opacity:.5; pointer-events:none;
    -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);
    mask-image:linear-gradient(180deg,#000 55%,transparent); }
  .m-hero-canvas::after{ content:''; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(120% 90% at 50% 2%,rgba(8,9,13,.28) 22%,rgba(8,9,13,.72) 62%,rgba(8,9,13,.97) 100%); }
  .hero-sub{ margin-top:16px; font-size:17px; line-height:1.6; color:var(--m-sec); max-width:34ch; }
  /* Kennzahlen als Wert/Label-Zeilen mit Haarlinien */
  .hero-facts{ display:block; margin-top:24px; border-top:1px solid var(--m-edge); gap:0; }
  .hero-facts .fact{ display:flex; align-items:baseline; justify-content:space-between; gap:16px;
    padding:13px 0; border:0; border-bottom:1px solid var(--m-edge); }
  .hero-facts .fact b{ font-family:var(--sg); font-size:19px; font-weight:600; color:var(--m-ink); }
  .hero-facts .fact span{ font-size:14px; color:var(--m-meta); text-align:right; }
  /* Das Band schliesst den Hero ab: kurzer, bewusster Abstand statt
     der Desktop-Zaesur von rund 70px. */
  .hero-band{ margin-top:0; padding:20px 0 22px; border-top:0; }
  .band-track-wrap{ margin-top:12px; }
  /* Referenz: die Marken tragen sichtbar, Abstaende ruhig und gleichmaessig */
  .band-set{ gap:30px; padding-right:30px; }
  .band-set a{ height:42px; }
  .band-set img{ height:calc(26px * var(--ls)); }
  /* Genau eine Marke traegt Farbe (Zuweisung in site.js) */
  .band-set a.ga-farbe img{ filter:grayscale(0) opacity(1); }
  .band-set a.ga-farbe img.inv{ filter:brightness(0) invert(1); }
  .band-set a.ga-farbe img.flat{ filter:opacity(1); }
  .logo-swap.ga-farbe .alt{ opacity:1; }
  .logo-swap.ga-farbe img:not(.alt){ opacity:0; }
  .band-set img,.logo-swap .alt{ transition:filter .5s ease,opacity .5s ease; }
  .band-label{ font-family:var(--mono); font-size:11px; letter-spacing:.1em;
    text-transform:uppercase; color:var(--m-mono); line-height:1.6; }
  /* Startseite: die Nutzenpunkte tragen keine Trennlinien. Die ID haelt
     die Regel gegen den spaeteren Exklusiv-Block im selben Breakpoint. */
  #leistungen .checks{ margin-top:20px; gap:14px; }
  #leistungen .checks li{ gap:10px; padding:0; border:0;
    font-size:15.5px; line-height:1.5; color:var(--m-list); }
  .checks li span{ white-space:normal; }
  /* Referenz: blanker Haken, kein Kasten */
  /* Referenz fuehrt ueberall das blanke Haken-Glyph, nie ein Kaestchen. */
  .tick{ width:auto; height:auto; margin-top:0;
    border-radius:0; background:none !important; border:0 !important;
    color:var(--m-acc); font-size:14px; line-height:1.6; }

  /* --- Referenzband --- */
  .band-track{ gap:34px; }
  .band-set{ gap:34px; align-items:center; }
  .band-set a{ display:flex; align-items:center; min-height:44px; }

  /* --- Die Lösung --- */
  .chat-card,.ga-chat{ margin-top:22px; border:1px solid var(--m-line); border-radius:16px;
    background:var(--m-card); padding:16px; }
  /* Auf Mobile tragen drei Nachrichten die Aussage */
  .ga-chat .msg:nth-of-type(n+4){ display:none; }

  /* --- Ablauf: eigene Sektion mit Lichtschiene --- */
  .m-flow{ display:grid; grid-template-columns:40px 1fr; margin-top:24px; }
  .m-flow-rail{ position:relative; height:352px; }
  .timeline-row{ display:block; }
  .m-flow .tstep{ height:88px; padding:5px 0 0 4px; border:0; width:auto; }
  .m-flow .tstep::before,.m-flow .tstep::after{ display:none; }
  .m-flow .tn{ display:block; margin:0; font-family:var(--mono); font-size:11.5px; color:var(--m-mono); }
  .m-flow .tt{ display:block; margin:5px 0 0; font-family:var(--sg); font-size:18px;
    font-weight:600; color:var(--m-ink); }
  .m-flow .tstep:last-child .tt{ color:var(--m-acc); }
  .timeline-foot{ margin-top:24px; display:block; }
  .timeline-foot .norisk{ display:none; }

  /* --- Problem --- */
  .problem-grid{ display:block; }
  .problem-list{ margin-top:22px; border-top:1px solid var(--m-edge); }
  .problem-list .row{ display:block; padding:16px 0; border-bottom:1px solid var(--m-edge); border-top:0; }
  .problem-list .row .term{ display:block; font-family:var(--sg); font-size:17.5px;
    font-weight:600; color:var(--m-ink); }
  .problem-list .row .desc{ display:block; margin-top:6px; font-size:15.5px; color:var(--m-sec); }
  .problem-list .row:nth-child(n+4){ display:none; }
  .problem-list.m-open .row:nth-child(n+4){ display:block; }
  .m-more{ display:flex; align-items:center; gap:8px; min-height:44px; margin-top:4px;
    font-size:15px; color:var(--m-acc); background:none; border:0; padding:0; }
  .problem-close{ margin-top:20px; }
  .problem-close p{ font-family:var(--sg); font-size:21px; line-height:1.24;
    font-weight:600; color:var(--m-ink); }
  .problem-close .link-arrow{ margin-top:10px; color:var(--m-acc); }

  /* --- ALWIN --- */
  #system .alwin-copy{ max-width:none; }
  /* Die Sektion polstert bereits (site.css, 42px) — .alwin-inner legte
     das Desktop-Mass --sec-pad (72px) oben und unten noch einmal drauf. */
  .alwin-inner{ padding-block:0 !important; }
  /* Der fuenfte Exklusiv-Punkt existiert in der Mobile-Referenz nicht */
  li.d-only-li{ display:none; }
  /* Referenz fuehrt die drei Outcome-Begriffe nicht */
  .outcomes{ display:none; }

  .m-alwin-canvas{ position:relative; height:320px; margin:24px calc(var(--m-pad) * -1) 0; }
  .alwin-vis{ display:none !important; }
  /* Die Desktop-Canvas sind mobil abgeschaltet (site.js) — ihre leeren
     Elemente werden hier ausgeblendet, damit nichts gezeichnet wird. */
  .hero-canvas,.alwin-canvas{ display:none !important; }
  .alwin-facts{ display:block; margin-top:22px; border-top:1px solid var(--m-edge); }
  .alwin-fact{ display:flex; flex-direction:row; align-items:baseline;
    justify-content:space-between; gap:16px;
    padding:13px 0; border:0; border-bottom:1px solid var(--m-edge); background:none; border-radius:0; }
  .alwin-fact b{ font-family:var(--sg); font-size:17px !important; font-weight:600;
    letter-spacing:-.01em; color:var(--m-acc); }
  .alwin-fact span{ font-family:inherit; font-size:14px; letter-spacing:0;
    text-transform:none; color:var(--m-meta); text-align:right; }

  /* --- Branchen --- */
  .branch-band{ display:none; }
  /* Ausgewogene Zeilen statt kurzer Schlusszeile */
  #branchen .h2{ text-wrap:balance; }

  .m-branch{ display:flex; gap:26px; overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch; padding-bottom:10px; margin-top:22px; }
  .m-branch::-webkit-scrollbar{ display:none; }
  .m-branch button{ flex:0 0 auto; display:flex; align-items:center; min-height:44px;
    font-family:var(--sg); font-size:23px; font-weight:600;
    color:#7B8598; background:none; border:0; padding:0 0 4px; }
  .m-branch button[aria-selected="true"]{ color:#F4F7FB;
    text-decoration:underline; text-decoration-color:var(--m-acc);
    text-decoration-thickness:2px; text-underline-offset:6px; }
  .m-branch-hint{ display:flex; align-items:center; gap:10px; margin-top:12px;
    font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--m-mono); }
  .m-branch-hint::before{ content:''; flex:1; height:1px; background:var(--m-edge); }

  /* --- Kundenstimmen: Snap-Carousel --- */
  /* Die Sektion beschneidet seitlich per clip — clip erzeugt KEINEN
     Scroll-Container und kann Gesten nicht an sich binden. */
  #kunden{ overflow-x:clip; }
  .kunden-grid{ display:flex; gap:14px; overflow:visible;
    /* Kein Scroll-Container: jeder overflow-Scroller (auto wie hidden)
       band die erste Geste an sich und verschluckte sie — identische
       Geste auf jeder anderen Flaeche scrollte sofort (nachgestellt).
       Der Slider faehrt deshalb per Transform: vertikale Gesten gehoeren
       nativ der Seite, horizontale dem Pointer-Drag in site.js. */
    touch-action:pan-y pinch-zoom; will-change:transform;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
    margin:22px calc(var(--m-pad) * -1) 0; padding:0 var(--m-pad);
    grid-template-columns:none; }
  .kunden-grid::-webkit-scrollbar{ display:none; }
  .kunden-grid{ transition:transform .28s var(--m-ease); }
  .kunden-grid.am-ziehen{ transition:none; cursor:grabbing; }
  .kunde{ flex:0 0 86%; border-radius:16px; }
  .kunde-bild{ display:none; }
  .kunde blockquote{ padding:20px 18px 14px; }
  .kunde .k-hook{ font-size:19px; line-height:1.32; }
  .kunde .k-rest{ font-size:15px; color:var(--m-sec); }
  .kunde figcaption{ display:grid; grid-template-columns:56px 1fr; column-gap:12px;
    row-gap:2px; align-items:start; margin:0 18px;
    padding:14px 0 18px; }
  .m-thumb{ grid-column:1; grid-row:1 / span 2; width:56px; height:68px;
    border-radius:8px; overflow:hidden; }
  .kunde figcaption .k-name{ grid-column:2; grid-row:1; display:flex; flex-wrap:wrap;
    align-items:baseline; gap:8px; margin:0; padding:0; border:0; }
  .kunde figcaption > span:not(.m-thumb){ grid-column:2; grid-row:2; align-self:start;
    font-size:13.5px; line-height:1.45; color:var(--m-meta); }
  .kunde figcaption .link-arrow{ grid-column:1 / -1; grid-row:3; margin-top:12px;
    padding-top:12px; border-top:1px solid var(--m-edge); width:100%;
    display:flex; align-items:center; color:var(--m-acc); }
  .kunde figcaption .link-arrow i{ margin-left:8px; }
  .m-thumb img{ width:100%; height:100%; object-fit:cover; }
  .m-carousel-foot{ display:flex; align-items:center; gap:12px; margin-top:16px; }
  .m-dots{ display:flex; align-items:center; gap:6px; }
  .m-dots i{ width:12px; height:2px; border-radius:1px; background:var(--m-line);
    transition:width .2s var(--m-ease),background .2s ease; }
  .m-dots i.on{ width:24px; background:var(--m-acc); }
  .m-count{ font-family:var(--mono); font-size:11.5px; color:var(--m-mono); }
  .m-carousel-btns{ margin-left:auto; display:flex; gap:8px; }
  .m-carousel-btns button{ width:44px; height:44px; border:1px solid var(--m-btn);
    border-radius:12px; color:var(--m-ink); background:none; }

  /* --- Vergleich: Tabs --- */
  .m-tabs{ display:flex; gap:8px; margin-top:20px; }
  .m-tabs button{ flex:1; min-height:44px; border:1px solid var(--m-line); border-radius:12px;
    background:none; color:var(--m-sec); font-size:15px; }
  .m-tabs button[aria-selected="true"]{ background:rgba(255,255,255,.10); color:var(--m-ink); }
  .compare-grid{ display:block; margin-top:18px; }
  .compare-col{ border:0; padding:0; background:none; }
  /* Nur die Startseite ersetzt die Spaltentitel durch Tabs */
  #vergleich .compare-col h3{ display:none; }
  /* Exklusiv: zwei ruhige Gruppen mit sichtbarem Etikett; die Aussage
     laeuft ueber die volle Breite, der Link steht als eigene Zeile darunter */
  /* Wortmarkenzeile sitzt mittig zwischen den Haarlinien */
  .ex-page .compare-col h3{ display:block; padding:14px 0 12px; }
  .ex-page .compare-col:first-child h3{ padding-top:0; }
  .ex-page .compare-col li{ display:block; padding:12px 0 14px; }
  .ex-page .compare-col.yes li::before{ content:none; }
  .ex-page .compare-col li .link-arrow{ display:flex; align-items:center;
    min-height:44px; margin-top:6px; color:var(--m-acc); }
  .compare-col[hidden]{ display:none !important; }
  .compare-col ul{ border-top:1px solid var(--m-edge); }
  .compare-col.yes li,.compare-col.no li{ padding-left:0; border-left:0; }
  .compare-col.yes li::before{ content:'\2713'; flex:0 0 auto; color:var(--m-acc);
    font-size:14px; line-height:1.6; }
  .compare-col.no li::before{ content:'\2013'; flex:0 0 auto; color:var(--m-mono);
    font-size:14px; line-height:1.6; }
  .compare-col li{ position:relative; display:flex; gap:10px; padding:14px 0;
    border-bottom:1px solid var(--m-edge); font-size:16px;
    color:var(--m-list); }
  .compare-col li:nth-child(n+5){ display:none; }

  /* --- Preise --- */
  .bill-toggle{ margin-top:18px; display:block; }
  .bill-toggle .seg{ display:flex; width:100%; }
  /* Jede Karte traegt ihren eigenen Begleitsatz; der gemeinsame
     Block unter beiden Karten ist eine Desktop-Komposition. */
  .plan-notes{ display:none; }
  .plan-caption{ margin-top:14px; font-size:14px; line-height:1.5;
    color:var(--m-meta); text-align:center; }
  .plan-top{ justify-content:flex-start; gap:10px; }
  .seg{ display:flex; gap:6px; padding:4px; border-radius:12px; background:var(--m-card);
    border:1px solid var(--m-line); }
  .seg button{ flex:1; min-height:44px; border-radius:9px; font-size:14px; line-height:1.2;
    color:var(--m-sec); background:none; border:0; }
  .seg button[aria-pressed="true"]{ background:var(--m-acc); color:var(--m-on-acc); }
  .bill-hint{ margin-top:10px; font-size:13.5px; color:var(--m-meta); }
  .plans{ display:block; margin-top:18px; }
  .plan{ padding:22px 18px; border-radius:16px; margin-top:14px; }
  .plan.pro{ background:linear-gradient(180deg,rgba(77,224,199,.06),rgba(13,16,25,.92));
    border-color:rgba(77,224,199,.32); }
  .plan-price b{ font-size:34px; }
  .plan li{ font-size:15.5px; }
  .proof{ display:grid; grid-template-columns:repeat(3,1fr); align-items:center; gap:14px;
    margin-top:22px; padding-top:20px; border-top:1px solid var(--m-edge); }
  .proof span{ grid-column:1 / -1; text-align:center; }
  .proof img{ max-width:100%; width:auto; height:auto; object-fit:contain; margin:0 auto; display:block; }
  .proof .p-kattan{ max-height:26px; }
  .proof .p-sky{ max-height:34px; }
  .proof .p-wowa{ max-height:16px; }

  /* --- Gründer --- */
  .founder-grid{ display:block; }
  .founder-quote{ font-size:25px; line-height:1.22; }
  .video-card{ margin-top:22px; }

  /* --- FAQ --- */
  .faq-item{ border:0; border-bottom:1px solid var(--m-edge); border-radius:0; background:none;
    padding:0; }
  .faq-item button{ min-height:62px; width:100%; display:flex; align-items:center; gap:14px;
    text-align:left; padding:0; }
  .faq-item .q{ font-size:17px !important; }
  .faq-item button[aria-expanded="true"] .q{ color:var(--m-ink); }
  .faq-item .s{ margin-left:auto; color:var(--m-acc); font-size:19px; }
  .faq-more a{ display:flex; width:100%; align-items:center; justify-content:center; min-height:50px;
    border:1px solid var(--m-btn); border-radius:12px; font-size:15.5px; }

  /* --- Markenstatement --- */
  .pos-h2{ font-size:26px !important; }
  .pos-note{ font-size:17px; color:var(--m-sec); }
  /* Markenstatement: dieselbe Komponente wie auf dem Desktop,
     nur mit mobiler Höhe und über die volle Breite. */
  /* Der Effekt endet am Tor — darunter nur noch ein kurzer dunkler
     Ausklang statt 126px Glow-Reserve. */
  .pos-vis{ height:248px; margin:22px calc(var(--m-pad) * -1) 0; }

  /* --- Kontakt --- */
  .contact-btns{ display:block; margin-top:20px; border-top:1px solid var(--m-edge); }
  .contact-btns > a{ display:flex; align-items:center; gap:12px; min-height:54px;
    border:0; border-bottom:1px solid var(--m-edge); border-radius:0; background:none;
    font-size:16px; color:var(--m-ink) !important; }
  .contact-btns > a::after{ content:'→'; margin-left:auto; color:var(--m-acc); }
  /* Zentrale Regel: Kontakt-Symbole tragen Teal, der Text bleibt hell */
  .contact-btns > a svg,.gam-wa svg,.gam-mail svg,.ct-rows a svg{ color:var(--m-acc); }
  /* Der Bestand fuehrt bei E-Mail kein Symbol — mobil ergaenzt es die
     Zeile, ohne den Desktop zu beruehren. */
  .contact-btns > a[href^="mailto"]::before{ content:''; flex:0 0 15px; width:15px; height:15px;
    background:currentColor; color:var(--m-acc);
    -webkit-mask:var(--m-mail) center/contain no-repeat; mask:var(--m-mail) center/contain no-repeat; }
  /* Die Referenz fuehrt die beiden Kontaktwege ohne Zwischenueberschrift —
     sie folgen unmittelbar auf den Lead. */
  .contact-alt{ border:0; background:none; padding:10px 0 0; }
  .contact-alt .ca-q,.contact-alt .ca-t{ display:none; }
  /* Handover: Formular einspaltig und ohne Kartenrahmen. */
  .form-card{ border:0; border-radius:0; background:none; padding:0; gap:12px; }
  .form-head{ margin-top:2px; }
  /* Das Formular ist ein Flex-Stapel mit gap:14px — ein zusaetzlicher
     Aussenabstand je Feld verdoppelt den Zeilenabstand. */
  .field{ display:block; margin-top:14px; }
  .form-card .field{ margin-top:0; }
  .form-card .form-head{ margin-top:0; }
  .field label{ display:block; margin-bottom:7px; font-size:14.5px; color:var(--m-card-ink); }
  input,textarea,select,
  .field input,.field textarea,.field select{ width:100%; min-height:52px;
    /* 16px sind Pflicht: darunter zoomt iOS beim Fokus hinein.
       style.css setzt .field input auf 15px — daher dieselbe Spezifitaet. */
    font-size:16px; border-radius:10px;
    background:var(--m-card); border:1px solid var(--m-line); color:var(--m-ink); padding:14px; }
  textarea{ min-height:88px; }
  /* Exklusiv: Aufklappblock fuer optionale Angaben */
  .ex-more{ margin-top:16px; border:1px solid var(--m-line); border-radius:12px; }
  .ex-more summary{ display:flex; align-items:center; min-height:52px; padding:0 16px;
    font-size:15.5px; color:var(--m-ink); list-style:none; cursor:pointer; }
  .ex-more summary::-webkit-details-marker{ display:none; }
  .ex-more summary::after{ content:'+'; margin-left:auto; color:var(--m-acc); font-size:17px; }
  .ex-more[open] summary::after{ content:'–'; }
  .ex-more-felder{ padding:0 16px 16px; }
  .ex-more-felder .field:first-child{ margin-top:0; }
  .form-privacy{ margin-top:14px; font-size:13.5px; line-height:1.55; color:var(--m-meta); }
  .form-privacy a{ color:var(--m-acc); text-decoration:underline; text-underline-offset:3px; }

  /* --- Footer --- */
  /* Der Bestand reserviert unten Platz fuer die CTA-Leiste — die gibt es
     nicht mehr, also faellt der Platzhalter weg. */
  .ft{ border-top:1px solid var(--m-edge); background:var(--m-bg);
    padding:36px 0 30px !important; }
  /* Gleiche Innenkante wie jede Sektion — und eigenes box-sizing,
     weil die Legal-Seiten keinen globalen Reset fuehren. */
  .ft,.ft *{ box-sizing:border-box; }
  .ft .stage{ padding-left:var(--m-pad); padding-right:var(--m-pad); }
  .ft-grid{ display:block; }
  .ft-brand{ min-width:0; text-align:left; }
  .ft-brand p{ margin-top:10px; max-width:34ch; }
  .ft-social{ margin-top:22px; margin-bottom:22px; display:flex; justify-content:flex-start; gap:10px; }
  .ft-social a,.ft-social button{ width:46px; height:46px; display:flex; align-items:center;
    justify-content:center; border:1px solid var(--m-line); border-radius:12px; }
  .ft-col{ margin-top:0; border-top:1px solid var(--m-edge); }
  .ft-col h4 .ft-acc{ display:flex; align-items:center; width:100%; min-height:52px;
    background:none; border:0; padding:0; cursor:pointer; font:inherit; color:inherit;
    letter-spacing:inherit; text-transform:inherit; text-align:left; }
  .ft-col h4{ display:flex; align-items:center; min-height:52px; margin:0; cursor:pointer;
    font-family:var(--sg); font-size:17px; font-weight:600; letter-spacing:-.01em;
    text-transform:none; color:var(--m-ink); }
  .ft-col h4::after{ content:'+'; margin-left:auto; font-size:17px; color:var(--m-acc); }
  .ft-col.m-open h4::after{ content:'–'; }
  .ft-col > div{ display:none; padding-bottom:12px; }
  .ft-col.m-open > div{ display:block; }
  .ft-col a{ display:flex; align-items:center; min-height:44px; font-size:15px; }
  .ft-bottom{ display:block; margin-top:26px; padding-top:18px; border-top:1px solid var(--m-edge); }
  .ft-bottom span{ display:block; font-family:var(--mr); font-size:13px; letter-spacing:0;
    text-transform:none; color:var(--m-mono); line-height:1.75; }
}

/* ------------------------------------------------------------
   6 · UNTERSEITEN
   ------------------------------------------------------------ */
@media (max-width:767px){
  .sub-hero{ padding:36px 0 44px; }
  /* Kaufen: der Wartestatus ist eine Nebeninformation, kein zweiter
     Kasten in der Karte */
  .plan .status-card{ border:0; background:rgba(255,255,255,.045); border-radius:10px;
    padding:11px 14px; font-size:14px; color:var(--m-meta); }
  .buy-points{ display:block; margin-top:22px; border-top:1px solid var(--m-edge); }
  .buy-points span{ display:flex; align-items:center; gap:10px; padding:13px 0;
    border-bottom:1px solid var(--m-edge); font-size:15.5px; color:var(--m-list); }
  .buy-stage{ max-width:none; }
  .status-card{ border-radius:14px; padding:16px; font-size:15px; }

  /* Exklusiv */
  .ex-grid{ display:block; }
  .ex-vis{ height:280px; margin:22px calc(var(--m-pad) * -1) 0; max-width:none; }
  .checks li{ padding:13px 0; border-bottom:1px solid var(--m-edge); font-size:16px; }

  /* Hilfe: genau EINE Themenauswahl — die Inline-Chips des Bestands
     verschwinden, die mobile Auswahl wird ein Pill-Raster. */
  .help-chips{ display:none !important; }
  .m-cats{ display:grid !important; grid-template-columns:1fr 1fr; gap:10px;
    margin:20px 0 0; padding:0; overflow:visible; }
  .m-cats a{ display:flex; align-items:center; justify-content:center; min-height:46px;
    padding:0 12px; border:1px solid var(--m-line); border-radius:12px;
    font-size:14.5px; text-align:center; color:var(--m-list); background:var(--m-card); }
  .m-cats a[aria-current="true"],.m-cats a.aktiv{ border-color:rgba(77,224,199,.45);
    color:var(--m-ink); background:rgba(77,224,199,.08); }
  @media (max-width:339px){ .m-cats{ grid-template-columns:1fr; } }
  /* Kontaktzeilen der Hilfe = dieselbe Komponente wie ueberall */
  .ct-rows{ display:block !important; margin-top:16px !important;
    border-top:1px solid var(--m-edge); }
  .ct-rows a.btn-ghost{ display:flex !important; align-items:center; gap:12px;
    width:100%; min-height:52px; padding:0; border:0 !important; border-radius:0;
    border-bottom:1px solid var(--m-edge) !important; background:none !important;
    font-size:16.5px; font-weight:600; color:var(--m-ink) !important; box-shadow:none; }
  .ct-rows a.btn-ghost::after{ content:'→'; margin-left:auto; color:var(--m-acc); }
  .ct-rows a.btn-ghost[href^="mailto"]::before{ content:''; flex:0 0 15px; width:15px;
    height:15px; background:currentColor; color:var(--m-acc);
    -webkit-mask:var(--m-mail) center/contain no-repeat;
    mask:var(--m-mail) center/contain no-repeat; }

  /* Hilfe (Bestand) */
  /* (alter horizontaler Kategorie-Streifen ersetzt durch das Pill-Raster oben) */
  .cat-title{ font-size:21px; scroll-margin-top:64px; }
  .faqd details{ border-bottom:1px solid var(--m-edge); }
  .faqd summary{ display:flex; align-items:center; gap:12px; min-height:60px;
    list-style:none; cursor:pointer; }
  .faqd summary::-webkit-details-marker{ display:none; }
  .faqd summary .q{ font-size:16.5px !important; }
  .faqd summary .s{ margin-left:auto; color:var(--m-acc); font-size:18px;
    transition:transform .2s var(--m-ease); }
  .faqd details[open] summary .s{ transform:rotate(45deg); }
  .faqd p{ padding:0 0 16px; font-size:15.5px; color:var(--m-sec); }

  /* Rechtliches-Hub */
  /* Die Legal-Mobilgestaltung lebt vollstaendig in legal.css —
     die Datei laedt zuletzt und gewinnt ohne Override-Kette. */

  /* 404: Footer sitzt bei kurzem Inhalt am Viewportende.
     Eigene Klasse, damit der Desktop unberührt bleibt. */
  body.m-shell{ margin:0; min-height:100dvh; display:flex; flex-direction:column; }
  body.m-shell main{ flex:1 0 auto; display:flex; flex-direction:column; }
  body.m-shell main > .stage-wrap{ flex:1 0 auto; display:flex; flex-direction:column; }
  body.m-shell .ft{ margin-top:auto; flex-shrink:0; }
  body.m-shell .sub-hero,body.page-shell .sub-hero{ min-height:60vh; display:flex;
    flex-direction:column; justify-content:center; }
}

/* ------------------------------------------------------------
   7 · BEWEGUNG
   ------------------------------------------------------------ */
@media (max-width:767px){
  /* Startzustand setzt JS (.ga-rev) — ohne JS ist alles sichtbar */
  .ga-rev{ opacity:0; transform:translateY(8px);
    transition:opacity .42s var(--m-ease),transform .42s var(--m-ease); }
  .ga-rev.in{ opacity:1; transform:none; }
}
@media (max-width:767px) and (prefers-reduced-motion:reduce){
  .ga-rev,.ga-rev.in{ opacity:1 !important; transform:none !important; transition:none !important; }
  .gam-panel,#ga-menu{ transition:none !important; }
  .band-track{ animation:none !important; }
  .btn-video .vp,.btn-video > span:first-child{ animation:none !important; }
}