/* ============================================================
   mobile.css – verbindliche Handy-Grundlage (wird ZULETZT geladen)
   gilt bis 767 px; Teil A gilt immer (Überlauf-Schutz)
   Quelle: Safari-Test am Mac (WebKit 402×874), v38
   ============================================================ */

/* A0) Drehkarten: Rückseite in der Drehmitte umschalten (Safari zeigte sie sonst gespiegelt) */
.flip .fr,.flip .bk{transition:opacity 0s .22s}
.flip .bk{opacity:0}
.flip.on .fr{opacity:0}.flip.on .bk{opacity:1}
@media(hover:hover){.flip:hover .fr{opacity:0}.flip:hover .bk{opacity:1}}

/* A1) Desktop: Leistungs-Karten – hohe Bilder (HempMate Roll-up) bleiben in der Karte */
@media (min-width:768px){.card .img{display:flex!important;align-items:center;justify-content:center;overflow:hidden}.card .img>img{max-height:100%!important;height:100%;width:auto;object-fit:contain}}

/* Lightbox (Projekte) – gilt überall */
.lb{position:fixed;inset:0;z-index:120;background:#17131cf2;display:grid;place-items:center;padding:64px 16px 24px;opacity:0;transition:opacity .3s}
.lb.on{opacity:1}
.lb img{max-width:100%;max-height:calc(100svh - 140px);object-fit:contain;border-radius:16px;transform:scale(.92);transition:transform .45s cubic-bezier(.2,.9,.25,1.15)}
.lb.on img{transform:none}
.lb figcaption{color:#fff;font-weight:700;text-align:center;margin-top:14px;font-size:16px}
.lb .x{position:absolute;top:max(14px,env(safe-area-inset-top));right:14px;width:56px;height:56px;border-radius:50%;border:0;background:#fff;color:#17131c;font-size:34px;line-height:1;display:grid;place-items:center;box-shadow:0 10px 30px -10px #0008;cursor:pointer}
.lb .bd{position:absolute;bottom:max(8px,env(safe-area-inset-bottom));left:14px;width:84px;pointer-events:none;animation:lbb 3s ease-in-out infinite}
@keyframes lbb{50%{transform:translateY(-8px) rotate(-3deg)}}
.gal figure,.wk .it{cursor:zoom-in}
body:has(.lb.on) #birdy{opacity:0!important;pointer-events:none}

/* Link-Hilfe in Vorschau-Rahmen (claude.ai blockiert tel:/mailto:/WhatsApp) – gilt überall */
.lsheet{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:130;background:#fff;color:#17131c;border-radius:22px;padding:18px 18px 16px;box-shadow:0 30px 70px -20px #000a;font-size:15px;line-height:1.4;transform:translateY(20px);opacity:0;transition:opacity .3s,transform .3s}
.lsheet.on{opacity:1;transform:none}
.lsheet b{display:block;font-size:19px;margin:6px 0 10px;overflow-wrap:anywhere}
.lsheet .row{display:flex;gap:10px;flex-wrap:wrap}
.lsheet .row a,.lsheet .row button{flex:1;min-height:46px;border-radius:999px;border:0;font:inherit;font-weight:700;display:grid;place-items:center;text-decoration:none;cursor:pointer}
.lsheet .row button{background:var(--mag,#BB297A);color:#fff}
.lsheet .row a{background:#17131c;color:#fff}
.lsheet .x{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;border:0;background:#f0eef2;font-size:20px;line-height:1;cursor:pointer}

/* A) Nie breiter als der Bildschirm – auch im iOS-iframe */
html,body{max-width:100%}
@media (max-width:767px){body{width:1px;min-width:100%}}   /* iOS-iframe-Fix: iframe wächst nicht mehr mit breitem Inhalt mit */
img,video,svg,canvas,iframe{max-width:100%}
*,*::before,*::after{box-sizing:border-box}

@media (max-width:767px){
  :root{--gut:24px}
  main,footer{overflow-x:clip}                   /* clip statt hidden: verbreitert nichts UND lässt gepinnte (sticky) Sektionen intakt */
  .wrap{width:auto;margin-inline:max(var(--gut),env(safe-area-inset-left)) max(var(--gut),env(safe-area-inset-right))}
  .hd .wrap{margin-inline:16px}
  .burger{margin-right:0;flex:0 0 auto}

  /* B) Schrift: nie breiter als die Zeile, lange Wörter trennen */
  h1,h2,h3{overflow-wrap:break-word;hyphens:manual}   /* keine falschen Trennungen wie „WER-BEAGENTUR“ */
  h1{font-size:clamp(32px,9.6vw,50px)}
  h2{font-size:clamp(28px,8.4vw,44px)}
  body{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  p,li,.lead{font-size:max(16px,1em)}

  /* C) Birdy am Handy: kleiner Knopf unten rechts, Sprechblase nur nach Antippen */
  #birdy{left:auto!important;top:auto!important;right:max(10px,env(safe-area-inset-right))!important;
         bottom:calc(10px + env(safe-area-inset-bottom))!important;transform:none!important;width:64px!important;z-index:58}
  #birdy .say{left:auto!important;right:0!important;bottom:calc(100% + 6px)!important;top:auto!important;
              max-width:min(260px,calc(100vw - 32px))!important;font-size:14px;padding:12px 14px}
  #birdy .say::after{left:auto;right:22px}
  #birdy:not(.focus) .say{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
  #birdy .ask{left:auto!important;right:0!important;top:auto!important;bottom:calc(100% + 8px)!important;width:min(320px,calc(100vw - 24px))}
  /* großer Deko-Birdy im Hero bleibt – als ruhiges Bild statt fliegendem Element */
  .bslot{background:url("birdy.webp") center/contain no-repeat;width:min(46%,190px)!important;margin:0 auto 8px!important}
  /* Inhalt unten nie unter dem Birdy-Knopf verstecken */
  main>section:last-of-type,.ft{padding-bottom:calc(var(--sec-pad,0px) + 84px)}

  /* D) Tippen statt Hover: Drehkarten-Vorderseite oben ausrichten, keine Leerfläche */
  .steps .st.flip .fr{justify-content:flex-start!important}
  .steps .st.flip .fi{min-height:0}
  .steps.rg{grid-template-columns:1fr 1fr;gap:12px}
  .steps.rg .st.flip{min-height:132px}
  .steps.rg .st.flip .fr,.steps.rg .st.flip .bk{padding:18px 16px}
  .steps.rg .fr small{min-height:0;font-size:13.5px}

  /* E) Tipp-Flächen ≥ 44 px */
  a,button,[role=button],input,select,textarea{touch-action:manipulation}
  .ft a,.ft .regs a,.lw-settings{display:inline-block;padding:12px 0;min-height:44px}
  select,input[type=text],input[type=email],input[type=tel]{min-height:48px;font-size:16px}  /* 16px verhindert iOS-Zoom */
  textarea{font-size:16px}
  .btn{min-height:48px}

  /* F) Nichts ragt rechts raus */
  .tag,.cap,.lbl{white-space:normal!important;max-width:100%;text-align:center}
  .egg-on::after{right:4px!important;top:4px!important}
  .trust .t{overflow:hidden}
  .kinfo .big{overflow-wrap:anywhere;font-size:clamp(26px,8vw,40px)}
  .kinfo .adr{text-decoration:none;color:inherit}
  #lcm{padding:16px}
  #lcm .lcc,#lcm .card{width:100%;max-width:calc(100vw - 32px);margin:0 auto}
  .pr .p .no,.pr .p .yes{font-size:clamp(30px,9.4vw,60px)!important;max-width:100%!important}


  /* H) Statements („Hier könnte deine Werbung stehen …“): am Handy untereinander statt seitlich */
  .sa .pin{height:auto!important;position:static!important;overflow:visible!important;display:block;padding:72px 0 40px}
  .sa .spacer{display:none!important}
  .sa .track{transform:none!important;display:grid!important;width:auto!important;gap:44px!important;padding:0 var(--gut)!important}
  .sa .st{opacity:1!important;transform:none!important}
  .sa .st h2{white-space:normal!important;font-size:clamp(38px,11.5vw,56px)!important;line-height:.98}
  .sa .st small{font-size:16px}

  /* I) Kontakt-Infos: Termin-Button nicht neben „Chat starten“ quetschen */
  .kinfo>div{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
  .kinfo .btn{margin-top:10px!important}

  /* J) 10-Jahre-Badge sichtbar groß */
  .badge10{width:120px!important;margin:24px 0 0!important}


  /* K) Leistungs-Karten zum Wischen: kompakt, ohne Leerraum, nächste Karte angedeutet */
  .sv .track{align-items:stretch!important;scroll-padding-inline:var(--gut)}
  .sv .card{width:80vw!important;min-height:0!important;height:auto!important;padding:20px!important;gap:10px}
  .sv .card .img{height:200px!important;margin:6px 0 0!important}
  .sv .card .btn{margin-top:12px!important}
  .sv .head::after{content:"Wischen für mehr  →";display:block;margin-top:10px;font-size:13px;font-weight:700;color:var(--mag)}


  /* L) Langes Drücken auf Mockups öffnet kein iOS-Bildmenü; Bildschirm scrollt per Wischen */
  .dev img,.wk img,.show .vis img{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
  .dev .scr{touch-action:pan-y}
  /* M) Zentrierte Sektionen (Abheben) wirklich mittig */
  .lift .wrap,.cta .wrap{text-align:center;margin-inline:var(--gut)!important}
  .lift .ctas,.cta .ctas{justify-content:center}


  /* N) Versprechen am Handy: kein Scroll-Kino, alle 4 untereinander, groß und kompakt */
  .pr .pin{height:auto!important;position:static!important;overflow:visible!important;display:block!important;padding:96px var(--gut) 64px!important;text-align:left}
  .pr .spacer,.pr .dots,.pr .sum{display:none!important}
  .pr .kick{position:static!important;transform:none!important;white-space:normal!important;display:flex;margin-bottom:28px}
  .pr .ps{display:grid!important;gap:34px}
  .pr .p{text-align:left!important;grid-area:auto!important;opacity:1!important;display:grid!important;justify-items:start!important;gap:4px!important;pointer-events:auto}
  .pr .p .a{opacity:1!important;transform:none!important;font-size:20px!important}
  .pr .p .no{grid-area:auto!important;opacity:.55!important;transform:none!important;font-size:clamp(26px,7.6vw,38px)!important;color:var(--mag)}
  .pr .p .no .k{clip-path:none!important;opacity:1!important}
  .pr .p .yes{justify-self:start!important;text-align:left!important;margin-top:4px;grid-area:auto!important;opacity:1!important;transform:none!important;font-size:clamp(32px,9.4vw,46px)!important;line-height:.98}

  /* O) Buttons: untereinander, volle Breite, mittig – nichts hängt rechts */
  .ctas{display:grid!important;grid-template-columns:1fr;gap:12px;width:100%}
  .ctas .btn,.hero .ctas .btn{width:100%;justify-content:center}
  .lift .ctas,.cta .ctas{max-width:420px;margin-inline:auto}

  /* P) Bewertungsbox am Handy: QR + Link-Feld weg (man ist ja schon am Handy), 2 klare Buttons */
  .rate{padding:26px 22px!important}
  .rate .rq,.rate .rlink{display:none!important}

  /* Q) Regionen am Handy als ruhige Liste statt 2er-Raster */
  .steps.rg{grid-template-columns:1fr!important;gap:10px!important}
  .steps.rg .st.flip{min-height:0!important;perspective:none}
  .steps.rg .st.flip .fi{transform:none!important}
  .steps.rg .st.flip .bk{display:none!important}
  .steps.rg .st.flip .fr{opacity:1!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;padding:18px 20px!important;min-height:72px}
  .steps.rg .fr .fp{order:3;font-size:0}
  .steps.rg .fr .fp::after{content:"»";font-family:var(--d);font-size:26px;color:var(--mag)}
  .steps.rg .st.cur .fr .fp::after{content:"●";font-size:14px;color:var(--sky)}
  .steps.rg .fr b{font-size:26px!important;flex:0 0 auto}
  .steps.rg .fr small{flex:1;text-align:right;margin-right:12px;min-height:0!important}
  .regio .chips{display:grid!important;grid-template-columns:1fr;gap:10px}
  .regio .chips .chip{width:100%}

  /* R) Leistungs-Drehkarten (Regionsseiten/Unterseiten): eine Spalte, kein Leerraum */
  .steps:not(.rg){grid-template-columns:1fr!important}
  .steps .st.flip .fr,.steps .st.flip .bk{min-height:0!important}

  /* S) Fakten-Kacheln: Finger-Badge innen */
  .trust .t{position:relative;overflow:visible}
  .trust .t.egg-on::after,.trust .egg-on::after{right:8px!important;top:8px!important}

  /* T) Brieftaube am Handy: kleiner, fliegt vom Knopf zum Formular */
  .post{width:52px!important;height:52px!important}
  .post .env{width:48px!important}
  .post .pg{width:84px!important}


  /* U) Drehkarten: Hinweis „Tippen zum Drehen“ (nicht bei den Regions-Listenzeilen) */
  .flip:not(.on) .fr::after{content:"↻ Tippen zum Drehen";position:absolute;right:14px;top:14px;font-family:var(--t,Outfit,sans-serif);font-size:12.5px;font-weight:700;color:var(--mag);background:#fff;border-radius:999px;padding:6px 11px;box-shadow:0 6px 18px -8px #0004}
  .flip .tip,.flip .fr .tp,.flip .fr .fp{display:none!important}
  .steps.rg .st.flip .fr::after{display:none!important}
  .steps.rg .st.flip .fr .fp{display:block!important}

  /* V) Finger-Badges nie über Buchstaben: kleiner, außen oben neben dem Wort */
  .egg-on::after{font-size:15px!important;width:28px!important;height:28px!important;top:-26px!important;right:-6px!important}
  .hero h1 .ch.dot.egg-on::after{top:-30px!important;right:-18px!important}

  /* W) Manifest „Wir könnten jetzt …“: kleiner, nichts am Rand */
  .manif{padding:72px 0!important}
  .manif p{font-size:clamp(28px,8.2vw,40px)!important;max-width:100%!important;padding:0 var(--gut)}

  /* X) Hero-Pill nicht breiter als die Zeile */
  .hero .pill{max-width:100%;flex-wrap:wrap;justify-content:center;text-align:center}

  /* Y) Leistungskarte Google: Button nicht hinter dem Handy */
  .card .img.gmi{height:auto!important;margin:8px 0 0!important}
  .card .img.gmi .dev{width:min(62%,220px)!important;margin:0 auto}
  .card .btn{position:relative;z-index:2}

  /* Z) Birdy-Knopf: beim Scrollen kurz ausblenden, damit er keinen Text verdeckt */
  #birdy{transition:opacity .25s!important}
  html.scrolling #birdy:not(.focus){opacity:0!important;pointer-events:none}


  /* AA) Versprechen + Statements: Kacheln, die beim Scrollen einzeln übereinander stapeln (Sticky-Stack) */
  .pr .ps,.sa .track{display:block!important;padding-bottom:12svh}
  .pr .p,.sa .st{position:sticky!important;top:calc(96px + var(--k,0)*14px);min-height:0!important;margin:0 0 22svh!important;padding:28px 24px 30px;border-radius:28px;
    box-shadow:0 30px 60px -30px #000a,0 0 0 1px #ffffff14;transform-origin:50% 0;transition:transform .5s,filter .5s}
  .pr .p{background:linear-gradient(160deg,#6a1f55,#2e0f27)}
  .sa .st{background:linear-gradient(160deg,#2a2233,#141019)}
  .pr .p:nth-child(2){--k:1}.pr .p:nth-child(3){--k:2}.pr .p:nth-child(4){--k:3}
  .sa .st:nth-child(2){--k:1}.sa .st:nth-child(3){--k:2}.sa .st:nth-child(4){--k:3}
  .pr .p:last-child,.sa .st:last-child{margin-bottom:0!important}
  .pr .p.under,.sa .st.under{transform:scale(.94);filter:brightness(.7)}
  .pr .p .a{font-size:18px!important;opacity:0;transform:translateY(14px);transition:opacity .45s,transform .45s}
  .pr .p .no{font-size:clamp(24px,7vw,34px)!important;opacity:1!important;transform:none!important;transition:opacity .5s .9s}
  .pr .p .no .k{clip-path:inset(-10% 100% -10% 0)!important;transition:clip-path .7s cubic-bezier(.6,0,.3,1) .35s}
  .pr .p .yes{font-size:clamp(30px,9vw,44px)!important;opacity:0!important;transform:scale(1.2) translateY(8px)!important;transform-origin:0 50%;transition:opacity .45s 1.15s,transform .65s cubic-bezier(.2,.9,.25,1.3) 1.15s}
  .pr .p.in .a{opacity:1;transform:none}
  .pr .p.in .no .k{clip-path:inset(-10% 0 -10% 0)!important}
  .pr .p.in .no{opacity:.42!important}
  .pr .p.in .yes{opacity:1!important;transform:none!important}
  .sa .st h2{font-size:clamp(32px,9.6vw,46px)!important}
  .sa .st h2 .w{display:inline-block;opacity:0;transform:translateY(.5em) rotate(4deg);transition:opacity .45s,transform .6s cubic-bezier(.2,.9,.25,1.2);transition-delay:calc(var(--i)*60ms)}
  .sa .st.in h2 .w{opacity:1;transform:none}
  .sa .st h2 em,.sa .st h2 i{background:linear-gradient(currentColor,currentColor) 0 94%/0 .08em no-repeat;transition:background-size .7s .9s}
  .sa .st.in h2 em,.sa .st.in h2 i{background-size:100% .08em}
  .sa .st small{opacity:0;transform:translateY(10px);transition:opacity .5s 1s,transform .5s 1s}
  .sa .st.in small{opacity:1;transform:none}

  /* AB) Wisch-Leisten: deutlicher Hinweis + Punkte + kurzes Anstupsen */
  .sv .head::after{content:none!important}
  .swipehint{display:flex;align-items:center;gap:10px;margin:14px var(--gut) 0;font-weight:700;font-size:14px;color:var(--mag)}
  .swipehint i{display:inline-block;font-style:normal;font-size:22px;animation:swh 1.4s ease-in-out infinite}
  @keyframes swh{0%,100%{transform:translateX(0)}50%{transform:translateX(12px)}}
  .swdots{display:flex;justify-content:center;gap:7px;margin:16px 0 4px}
  .swdots b{width:8px;height:8px;border-radius:99px;background:#17131c33;transition:width .3s,background .3s}
  .swdots b.on{width:26px;background:var(--mag)}
  .ws .swdots b{background:#ffffff40}.ws .swdots b.on{background:var(--cyan)}

  /* AC) Birdy-Chat: Birdy oben, darunter Antwort und Fragen, nichts seitlich abgeschnitten */
  #birdy.focus{inset:0!important;width:auto!important;transform:none!important;display:flex!important;flex-direction:column;justify-content:flex-start;align-items:center;gap:12px;
    padding:calc(84px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom))!important;pointer-events:none;overflow-y:auto}
  #birdy.focus .b{order:1;width:110px!important;flex:0 0 auto}
  #birdy.focus .say,#birdy.focus .ask{position:static!important;transform:none!important;width:100%!important;max-width:520px!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;box-sizing:border-box}
  #birdy.focus .say{order:2;pointer-events:auto}#birdy.focus .say::after{display:none}
  #birdy.focus .ask{order:3;pointer-events:auto}
  #birdy.focus .ask .chips{justify-content:center}
  #birdy.focus .ask .chips button{max-width:100%}
  #birdy.focus .ask form{width:100%}
  #birdy.focus .ask .x{position:fixed!important;top:max(16px,env(safe-area-inset-top))!important;right:16px!important;left:auto!important;bottom:auto!important;transform:none!important;width:56px!important;height:56px!important;font-size:32px!important;background:#fff!important;color:#17131c!important;box-shadow:0 10px 30px -10px #0008}
  body:has(#birdy.focus) #veil,#veil.on{opacity:1!important;background:#17131ce6!important}

  /* AD) Menü: passt immer auf einen Bildschirm, nichts abgeschnitten */
  .nav{inset:0!important;height:auto!important;overflow-y:auto;overscroll-behavior:contain;justify-content:flex-start!important;padding:calc(84px + env(safe-area-inset-top)) var(--gut) calc(24px + env(safe-area-inset-bottom))!important;gap:2px!important;font-size:clamp(30px,8.8vw,44px)!important}
  .nav>a{padding:6px 0!important;line-height:1.05}
  .nav .btn{margin-top:16px!important;font-size:18px!important;align-self:flex-start}
  .nav .nx{display:grid!important;gap:2px;margin-top:16px;font-family:var(--t,Outfit,sans-serif);text-transform:none;font-size:16px}
  .nav .nx a{padding:9px 0;min-height:42px;font-size:16px!important}
  .nav .nx span{font-size:14px;opacity:.8;padding-top:6px}
  .nav .nb{display:none!important}

  /* AE) Agentur: 10-Jahre-Sticker oben und groß, kein Hero-Vogel */
  .sub-hero:has(.badge10) .bslot{display:none!important}
  .sub-hero:has(.badge10) .wrap>div:first-child{display:flex;flex-direction:column}
  .sub-hero .badge10{order:-1;width:170px!important;margin:0 0 22px!important;align-self:flex-start}

  /* AF) Chef-Foto: kein Überschneiden mit dem Text darunter */
  .human{display:grid!important;gap:32px!important}
  .human .ph{width:100%;aspect-ratio:2/3;height:auto;margin:0 0 8px}
  .human .ph .fi{height:100%}
  .human .ph .fr,.human .ph .bk{position:absolute!important;inset:0}
  .human .ph .fr img{height:100%!important}

  /* G) Ruhiger am Handy */
  .bgis{display:none}
}
@media (max-width:380px){
  .steps.rg{grid-template-columns:1fr}
}

/* Handy-Menü: „Termin buchen“ als richtiger Knopf mit Innenabstand (nicht vom .nav a-Padding überschreiben lassen) */
.nav a.btn,.nav a.btn.mag{padding:14px 28px!important;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.nav a.btn::after{content:none!important}

/* Tablet & Zwischengrößen: Birdy-Sprechblase kompakter, damit sie weniger Text verdeckt (blendet nach 5 s aus) */
@media(min-width:701px) and (max-width:1279px){#birdy:not(.focus):not(.top) .say{font-size:13.5px;max-width:210px;padding:10px 14px;line-height:1.3}}
/* Kopfzeile beim Scrollen deckend genug, dass Inhalt dahinter nicht durchscheint */
.hd::before{background:#fffffff5}