/* ===== Mobil-Optimierung Gottlieb V6 — Hamburger + Reel-Flatten ===== */

/* ---- Hamburger-Menü (<=1459px — zwei Header-CTAs brauchen den Platz der Nav) ---- */
.bar-burger{display:none}
@media(max-width:1459px){
  .bar{flex-wrap:nowrap}
  .bar-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;padding:0;border:0;background:transparent;cursor:pointer;flex:none}
  .bar-burger span{display:block;width:25px;height:2.5px;border-radius:2px;background:var(--weiss,#fff);transition:transform .25s,opacity .2s}
  .bar.nav-offen .bar-burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .bar.nav-offen .bar-burger span:nth-child(2){opacity:0}
  .bar.nav-offen .bar-burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  .bar-nav{
    position:absolute;top:100%;left:0;right:0;order:0;width:auto;min-width:0;
    flex-direction:column;align-items:stretch;gap:0;justify-content:flex-start;
    background:rgba(20,18,22,.98);backdrop-filter:blur(16px);
    border-top:1px solid var(--linie,rgba(255,255,255,.1));
    padding:6px 0 12px;max-height:calc(100svh - 64px);overflow-y:auto;overflow-x:visible;
    -webkit-mask-image:none;mask-image:none;
    transform:translateY(-6px);opacity:0;visibility:hidden;pointer-events:none;
    transition:transform .22s,opacity .22s,visibility .22s;
  }
  .bar.nav-offen .bar-nav{transform:none;opacity:1;visibility:visible;pointer-events:auto}
  .bar-nav a{padding:14px var(--pad,20px);font-size:17px;border-bottom:1px solid rgba(255,255,255,.06);width:100%;white-space:normal}
  .bar-nav a::after{display:none}
  .bar-nav .bar-logo{display:none}
  html.nav-gesperrt{overflow:hidden}
}

/* ---- Reel flachlegen auf Mobil/Tablet: normale gestapelte Sektionen, kein Clipping ---- */
@media(max-width:1024px){
  html{scroll-snap-type:none}
  .slide{position:relative;top:auto;min-height:0;overflow:visible;scroll-snap-align:none;display:block}
  .slide + .slide{border-radius:0;box-shadow:none}
  .slide + .slide::before{display:none}
  .s-inner{min-height:0;justify-content:flex-start;max-width:760px;padding-top:clamp(94px,15vh,116px);padding-bottom:clamp(46px,8vh,74px)}
  .js .slide.unten .s-inner{transform:none;filter:none}
  /* Hero darf hoch bleiben (Video-Wirkung), aber ohne 100svh-Zwang */
  .hero{min-height:auto}
  .hero .s-inner{min-height:86svh;justify-content:flex-end;padding-bottom:clamp(40px,8vh,72px)}
  /* Reveal-Animationen greifen auch ohne den Sticky-Scroll: sofort sichtbar wenn im Blick */
  .js .slide .an-ziel{opacity:1;transform:none}
  /* „Projekt anfragen" springt mobil direkt zum Formular — Anker liegt mitten in der Kontakt-Sektion */
  #anfrage{scroll-margin-top:100px}
}

/* ---- Zwei Header-CTAs (Projekt + Reparatur) auf Phones: Sticky-Leiste UNTEN.
   Oben bleibt die Bar einzeilig schlank (82px) — eine zweite Kopfzeile hatte den Hero verdeckt. ---- */
@media(max-width:559px){
  /* backdrop-filter macht .bar zum Containing Block für fixed-Kinder — Blur hier aus
     (auch im .fest-Scroll-Zustand!), sonst klebt die Leiste am Bar-Ende statt am
     Viewport-Boden. Dichteres rgba gleicht den fehlenden Blur aus. */
  .bar,.bar.fest{backdrop-filter:none;background:rgba(20,18,22,.92)}
  .bar-rechts{position:fixed;left:0;right:0;bottom:0;z-index:79;
    padding:10px max(14px,env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-right));
    gap:10px;background:rgba(20,18,22,.94);backdrop-filter:blur(14px);border-top:1px solid rgba(255,255,255,.1)}
  .bar-rechts .btn{flex:1;padding:13px 10px}
  /* Fixe Leiste unten braucht Auslauf am Dokumentende, sonst verdeckt sie den Footer-Schluss */
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
}
@media(max-width:379px){.bar-rechts .btn{font-size:12.5px;padding:12px 8px}}

/* Screenreader-Text (für Icon-/Sprungmarken-Links ohne sichtbaren Text) */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}