/* ==========================================================================
   Handy (bis 760 px). Steht als letzte Datei, damit sie alles davor schlägt.
   Grundsätze: Stapeleffekte bleiben (Cases, Ablauf), Wisch-Karussells bleiben,
   jeder Bildschirm hat einen klaren Mittelpunkt, nichts überdeckt Inhalt.
   ========================================================================== */

/* Desktop: WhatsApp sitzt als runder Knopf rechts unten, nicht in der Leiste */
.leiste-wa{display:none}

@media (max-width:760px){

  /* ---------- Grundmaß ---------- */
  .sek{padding-top:72px;padding-bottom:72px}
  .h2{font-size:clamp(28px,8vw,34px);line-height:1.08}
  .h-gross em,.h2 em{font-size:1.08em}
  .sub,.kopfzeile p{font-size:16px;line-height:1.6}

  /* ---------- Hero: Foto oben, Text darunter, alles in gut einem Bildschirm ---------- */
  .hero{padding-top:calc(96px + env(safe-area-inset-top,0px))}
  .hero-foto{height:min(56vh,440px)}
  .hero-in{padding-top:min(36vh,290px)}
  .hero h1.h-gross{font-size:clamp(33px,9.4vw,40px);line-height:1.03;letter-spacing:-.025em}
  .hero h1 em{font-size:1.06em!important;display:block!important;margin-top:.08em}
  .hero .dach{font-size:10.5px;letter-spacing:.16em}
  .hero .lead{font-size:16px;line-height:1.55;margin-top:16px}
  .hero .ctas{margin-top:22px}
  .hero .ctas .btn{width:100%;justify-content:center;height:58px}
  .trust-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
  .trust-chips .google-chip{padding:10px 10px;gap:8px;min-width:0}
  .trust-chips .google-chip svg,.trust-chips .pe-icon{width:22px;height:22px;flex:none}
  .trust-chips .google-chip b{font-size:13px;white-space:nowrap}
  .trust-chips .google-chip b .chip-sterne{display:none}
  .trust-chips .google-chip div>span{font-size:11px;line-height:1.3}
  .hero-zahlen{margin-top:18px;padding-top:16px}
  .hero-zahlen b{font-size:28px}
  .hero-zahlen span{font-size:11.5px}

  /* ---------- Untere Leiste: Hauptbutton plus WhatsApp, kein schwebender Knopf mehr ---------- */
  .wa-float{display:none}
  .leiste{width:calc(100% - 24px);bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  .leiste-in{padding:6px;gap:6px}
  .leiste .btn{flex:1;height:52px}
  .leiste-wa{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:50%;background:#25D366;color:#fff;box-shadow:0 8px 20px -8px rgba(37,211,102,.8)}
  .leiste-wa svg{width:26px;height:26px}
  .fuss{padding-bottom:84px}

  /* ---------- Wisch-Karussells: breitere Karten, Punkte darunter ---------- */
  .bausteine>*,.fb-raster>*{flex:0 0 86%!important}
  #vergleich .passt-grid>*{flex:0 0 88%!important}
  .stimmen-grid>*{flex:0 0 74%!important}
  .wisch-punkte{display:flex;justify-content:center;gap:7px;margin:6px 0 4px}
  .wisch-punkte i{width:7px;height:7px;border-radius:99px;background:currentColor;opacity:.25;transition:width .35s var(--ease),opacity .35s}
  .wisch-punkte i.an{width:22px;opacity:.9}
  .system .wisch-punkte,.freebies-n .wisch-punkte{color:var(--mint)}
  .cases .wisch-punkte,#vergleich .wisch-punkte{color:var(--petrol)}

  /* ---------- Cases: kompakte Karten, die sich stapeln ---------- */
  .fall-stapel{gap:18px}
  .fall-stapel .fallkarte{position:sticky!important;top:72px!important}
  .fall-stapel .fallkarte:nth-child(2){top:86px!important}
  .fall-stapel .fallkarte:nth-child(3){top:100px!important}
  .fall-stapel .fallkarte:nth-child(4){top:114px!important}
  .fall-stapel .fallkarte:nth-child(5){top:128px!important}
  .cases .fallkarte.fk2{display:flex!important;flex-direction:column;padding:0!important;border-radius:22px}
  .fk2-links,.fk2-rechts{display:contents}
  .fk2-foto{order:0;aspect-ratio:16/9}
  .fk2 .fall-nr{order:1;padding:18px 20px 0;margin:0;font-size:10px}
  .fk2-links h3{order:2;padding:6px 20px 0;font-size:22px;line-height:1.18}
  .fk2-links>.fk2-block{display:none}
  .fk2-links>.fk2-block:last-child{display:block;order:3;padding:14px 0 0}
  .fk2-links>.fk2-block:last-child h4{display:none}
  .cases .fk2-zahlen{margin:0!important;padding:0 20px 2px!important;scroll-padding:0 20px}
  .cases .fk2-zahlen>*{flex:0 0 46%!important}
  .cases .fallkarte .fk2-zahlen b{font-size:20px}
  .fk2-zahlen div{padding:14px 10px!important}
  .fk2-zahlen span{font-size:12px}
  .fk2-kunde{order:4;padding:16px 20px 0}
  .fk2-av{width:48px;height:48px}
  .fk2-kunde b{font-size:16px}
  .fk2-meta{display:none}
  .fk2-rechts .fall-cta{order:5;margin:16px 20px 20px!important;align-self:stretch;justify-content:space-between;height:52px}

  /* ---------- Ablauf: Karten stapeln sich beim Scrollen ---------- */
  .ablauf-in{display:block}
  .ablauf-links{margin-bottom:28px}
  .stapel{display:grid!important;gap:18px;overflow:visible!important;margin:0!important;padding:0!important}
  .stapel-karte{position:sticky!important;top:72px!important;box-shadow:0 -18px 40px -24px rgba(11,42,51,.35)}
  .stapel-karte:nth-child(2){top:86px!important}
  .stapel-karte:nth-child(3){top:100px!important}
  .stapel-karte:nth-child(4){top:114px!important}
  .stapel-karte::after{font-size:72px;top:10px}
  .stapel-karte ul{margin-top:14px;gap:8px}

  /* ---------- Bausteine ---------- */
  .bausteine .hebel{padding:24px 22px}
  .hebel-nr{font-size:44px}
  .bausteine .hebel h3{font-size:21px}

  /* ---------- Vergleich ---------- */
  #vergleich .passt-spalte{padding:24px 20px}
  #vergleich .passt-spalte h3{font-size:20px}

  /* ---------- Team ---------- */
  .team-text .zahlenreihe b{font-size:30px;white-space:nowrap}
  .team-text .zahlenreihe span{font-size:12px}

  /* ---------- Freebies ---------- */
  .fb-text{padding:22px}
  .fb-text h3{font-size:24px}
  .fb-text .fb-btn{white-space:nowrap!important;height:54px;font-size:15px}

  /* ---------- Footer ---------- */
  .fuss-spalten{grid-template-columns:1fr 1fr!important;gap:28px 16px}
  .fuss-spalten>div:first-child{grid-column:1/-1}
  .fuss-schrift{font-size:21vw;margin-top:36px}

  /* ---------- Pop-ups ---------- */
  .fm .panel{padding:22px 18px;border-radius:22px;max-height:calc(100svh - 20px)}
  .fm .fq{font-size:24px}
  .wa-form input[type=text],.wa-form input[type=tel]{height:52px;font-size:16px}
}

/* Sehr schmale Handys (iPhone SE, 375 px und weniger) */
@media (max-width:380px){
  .hero h1.h-gross{font-size:31px}
  .trust-chips .google-chip div>span{font-size:10.5px}
  .hero-zahlen b{font-size:24px}
}

/* Nachträge nach Prüfung bei 390 px */
@media (max-width:760px){
  .stapel-karte{background:#fff!important;opacity:1!important}
  .stapel-karte:nth-child(1){z-index:1}.stapel-karte:nth-child(2){z-index:2}.stapel-karte:nth-child(3){z-index:3}.stapel-karte:nth-child(4){z-index:4}
  .vertrauen-2{gap:6px 14px}
  .vertrauen-2 .vt{font-size:12.5px;white-space:nowrap}
  .funnel-teaser{padding:22px 18px}
}
@media (max-width:760px){
  .bs-kopf{grid-template-columns:minmax(0,1fr)}
  .bs-kopf>*{min-width:0}
  .bs-weg{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .kopf-in{box-sizing:border-box;max-width:100%}
}
@media (max-width:380px){.kopf{left:8px!important;right:8px!important}.kopf-in{width:auto!important}}
@media (max-width:760px){.hero-foto img{object-position:45% 0%!important}}

/* Hero am Handy: Foto beginnt unter der Kopfleiste, blendet weich aus, Text startet im Ausblendbereich.
   Nur px/vw, kein vh: Safari ändert die Höhe beim Scrollen und mit Adressleiste. */
@media (max-width:760px){
  .hero{padding-top:0!important}
  .hero-foto{top:76px!important;bottom:auto!important;left:0!important;right:0!important;width:100%!important;height:min(104vw,460px)!important;aspect-ratio:auto!important;max-height:none!important;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.55) 78%,transparent 100%)!important;mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.55) 78%,transparent 100%)!important}
  .hero-foto img{object-position:46% 6%!important}
  .hero-bild::after{background:none!important}
  .hero-in{padding-top:calc(76px + min(104vw,460px) - 96px)!important}
}

/* Vollbild-Menü */
.mm{display:none}
@media (max-width:1080px){
  .menue-offen .kopf-nav{display:none!important}
  .mm{display:flex;flex-direction:column;position:fixed;inset:0;z-index:48;padding:calc(110px + env(safe-area-inset-top,0px)) 24px calc(24px + env(safe-area-inset-bottom,0px));
    background:radial-gradient(90% 60% at 100% 0%,rgba(47,209,188,.18),transparent 60%),linear-gradient(170deg,#06303B,#03232D 55%);
    opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s;overflow-y:auto}
  .menue-offen .mm{opacity:1;visibility:visible}
  .menue-offen .leiste,.menue-offen .wa-float{opacity:0;pointer-events:none}
  .mm-nav{display:grid;gap:2px}
  .mm-nav>a{display:flex;align-items:baseline;gap:14px;padding:12px 0;border-bottom:1px solid rgba(148,224,203,.14);font:700 clamp(28px,8vw,36px)/1.1 var(--display);letter-spacing:-.02em;color:#fff;text-decoration:none;
    opacity:0;transform:translateY(16px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
  .mm-nav>a span{font:600 12px var(--display);letter-spacing:.14em;color:var(--mint)}
  .menue-offen .mm-nav>a{opacity:1;transform:none}
  .menue-offen .mm-nav>a:nth-of-type(2){transition-delay:.05s}.menue-offen .mm-nav>a:nth-of-type(3){transition-delay:.1s}
  .menue-offen .mm-nav>a:nth-of-type(4){transition-delay:.15s}.menue-offen .mm-nav>a:nth-of-type(5){transition-delay:.2s}
  .mm-sub{display:flex;flex-wrap:wrap;gap:8px;padding:12px 0 14px}
  .mm-sub a{padding:8px 13px;border-radius:999px;border:1px solid rgba(148,224,203,.25);font:500 13.5px var(--body);color:#D8F6EE;text-decoration:none}
  .mm-fuss{margin-top:auto;padding-top:28px;display:grid;gap:12px}
  .mm-cta{width:100%;height:58px;justify-content:space-between}
  .mm-wa{display:flex;align-items:center;justify-content:center;gap:10px;height:54px;border-radius:999px;border:1px solid rgba(37,211,102,.5);color:#fff;font:600 15px var(--display);text-decoration:none}
  .mm-wa svg{width:22px;height:22px;color:#25D366}
  .mm-trust{display:flex;align-items:center;justify-content:center;gap:6px;margin:4px 0 0;font-size:12.5px;color:rgba(255,255,255,.7)}
  .mm-trust svg,.mm-trust img{width:15px;height:15px}.mm-trust img{margin-left:8px}
  /* Kopfleiste über dem Menü, Knopf wird zum X */
  .menue-offen .kopf{transform:none!important}
  .menue-offen .kopf-in{background:rgba(255,255,255,.92)}
  .kopf-menue span{transition:transform .3s var(--ease),opacity .3s}
  .menue-offen .kopf-menue span:first-child{transform:translateY(3.5px) rotate(45deg)}
  .menue-offen .kopf-menue span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
}

/* Case-Fotos am Handy: Köpfe sichtbar lassen */
@media (max-width:760px){
  .fk2-foto{aspect-ratio:4/3!important}
  .fk2-foto img{object-position:50% 22%!important}
}

/* Bausteine am Handy: drei gleich hohe Karten zum Wischen, Dashboard darunter als eigene Karte */
@media (max-width:760px){
  .bausteine{align-items:stretch}
  .bausteine>.hebel{flex:0 0 82%!important;min-height:0}
  .bausteine .hover-bild{opacity:.18!important}
  .dashboard.dash-solo{display:grid;grid-template-columns:1fr;gap:22px;margin-top:28px;padding:24px 20px}
  .dash-solo .dash-bild{transform:none!important}
}

/* Tagesablauf am Handy: mehr Abstand, damit jedes Bild einen Moment stehen bleibt */
@media (max-width:760px){
  .tag-liste{gap:clamp(110px,22vh,170px)!important;padding-bottom:30vh}
  .tag-punkt{opacity:.25}
  .tag-punkt.an{opacity:1}
}

/* Footer-Ende kürzer: Schriftzug fast bis zur Unterkante */
.fuss-schrift{padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))!important}
@media (max-width:760px){
  .fuss{padding-bottom:0!important}
  .fuss-schrift{margin-top:24px!important;padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))!important}
}

/* Lange Wörter und Raster dürfen die Seite auf schmalen Handys nicht breiter machen */
@media (max-width:760px){
  .cs-zwei>*,.check>*,.funnel-karte>*,.bs-weg li>span{min-width:0}
  .cs-text,.cs-weg li,.check-kachel,.funnel-links p,.bs-weg small,.recht-text h1,.recht-text h2,.recht-text h3{overflow-wrap:break-word;hyphens:auto}
  .btn .kugel{flex:none}
  .fk2-rechts .fall-cta{padding:0 8px 0 18px;gap:8px;font-size:15px;line-height:1.2;white-space:normal;text-align:left}
  .fk2-rechts .fall-cta .kugel{margin-right:0}
}
@media (max-width:340px){
  .pain-fuss .btn{max-width:100%;height:auto;min-height:52px;padding-top:10px;padding-bottom:10px;white-space:normal}
  .bs-weg{grid-template-columns:minmax(0,1fr);row-gap:10px}
  .bs-weg::before{display:none}
}