/* ===== Mobile-first polish for all phones ===== */

/* Better text rendering and zoom behavior on iOS */
html { -webkit-text-size-adjust: 100%; }
* { -webkit-tap-highlight-color: rgba(0,0,0,0); }

/* Container padding on small screens */
@media (max-width: 900px){
  .container { padding: 0 14px; }
  .section { padding: 44px 0; }
}

/* Tiny phones */
@media (max-width: 480px){
  .container { padding: 0 12px; }
  .section { padding: 36px 0; }
}

/* Header & topbar */
@media (max-width: 900px){
  header .container { padding: 10px 0 !important; }
  header a.btn { padding: .6rem .9rem; }
  .logo { height: 32px; width: 32px; border-radius: 10px; }
}

/* Hide the topbar label on very small phones but keep icon */
@media (max-width: 420px){
  .topbar span { display:none; }
}

/* Navigation: nur Desktop-Navigation auf Mobil ausblenden */
@media (max-width: 768px){
  .desktop-nav { display: none !important; }
}

/* Hero */
@media (max-width: 900px){
  .hero { height: 72vh !important; }
  .hero .container h1 { font-size: clamp(28px, 7vw, 40px) !important; }
  .hero .container p { font-size: 16px !important; }
  .hero a.btn, .hero a.btn.secondary { font-size: 16px !important; padding: .85rem 1.1rem !important; }
}
@media (max-width: 480px){
  .hero { height: 66vh !important; }
}

/* Quote block spacing */
@media (max-width: 900px){
  blockquote { padding: 36px 16px !important; }
}

/* Split layouts -> one column */
@media (max-width: 900px){
  .split { grid-template-columns: 1fr !important; gap: 24px !important; }
  .team-wrap { grid-template-columns: 1fr !important; gap: 24px !important; }
}

/* Media frame height hint on mobile to prevent huge images */
@media (max-width: 900px){
  .media-frame { border-radius: 20px; }
  .media-frame img { max-height: 60vh; object-fit: cover; }
}

/* Features list spacing */
@media (max-width: 900px){
  .features.wenger { gap: 10px; }
  .badge-check { height: 24px; width: 24px; flex: 0 0 24px; font-size: 14px; }
}

/* Kontakt: 2 -> 1 Spalte + remove divider; inputs accessible */
@media (max-width: 900px){
  #kontakt .two-col { grid-template-columns: 1fr !important; gap: 20px !important; }
  #kontakt .v-divider { display: none !important; }
  #kontakt .form input, #kontakt .form textarea { font-size: 16px; } /* avoid iOS zoom */
  #kontakt .card { border-radius: 14px; }
}

/* IG carousel arrows & dots -> bigger touch targets */
@media (max-width: 900px){
  .ig-arrow { width: 44px; height: 44px; }
}
@media (max-width: 420px){
  .ig-arrow { width: 40px; height: 40px; }
  .ig-dots { bottom: 8px; }
}

/* Footer stacks cleanly */
@media (max-width: 900px){
  footer .container { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
}
@media (max-width: 600px){
  footer .container { grid-template-columns: 1fr !important; }
  footer .container .muted { max-width: none !important; }
}

/* Buttons full-width option on tiny phones */
@media (max-width: 420px){
  .btn { width: 100%; justify-content: center; }
}

/* Reduce motion preferences */
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ===== Mobile Drawer Navigation ===== */

/* Burger-Button (auf Mobil sichtbar) */
.burger{
  display:none; /* Desktop ausblenden */
  width:42px;height:42px;border:0;border-radius:10px;
  background:#e9f3ff; color:#0747a6; font-size:22px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
}
@media (max-width: 768px){
  .burger{ display:inline-flex; }
}

/* Overlay hinter dem Menü */
.menu-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  opacity:0; pointer-events:none; transition:opacity .3s ease; z-index:90;
}
.menu-overlay.open{ opacity:1; pointer-events:auto; }

/* Seitliches Mobile-Menü (Drawer) */
.mobile-menu{
  position:fixed; top:0; right:-100%; height:100%; width:74%;
  max-width:360px; background:rgba(255,255,255,.98);
  box-shadow:-2px 0 18px rgba(0,0,0,.18);
  transition:right .3s ease; z-index:100;
  padding:22px 18px;
  display:flex; flex-direction:column; gap:10px;
  border-left:1px solid var(--line);
}
.mobile-menu.open{ right:0; }

.mobile-menu .close{
  align-self:flex-end;
  width:40px;height:40px;border-radius:10px;border:1px solid var(--line);
  background:#fff; font-size:22px; line-height:1; color:var(--text);
}
.mobile-menu a{
  display:block; padding:12px 10px; font-weight:600; font-size:16px;
  color:var(--text); border-radius:10px;
}

/* === Mobile: Header-Brand zentrieren & Burger positionieren === */
@media (max-width: 768px){
  header .container{
    position: relative;
    justify-content: center !important; /* überschreibt .flex.between */
  }
  /* das linke Brand-Element (Logo + Text) mittig */
  header .container > a.flex{
    margin: 0 auto;
    text-align: center;
  }
  /* Burger rechts „frei schwebend“, damit die Mitte frei bleibt */
  header .burger{
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
  }
}

/* === Mobile: Footer-Spalten & Links zentrieren === */
@media (max-width: 600px){
  footer .container{
    text-align: center !important;
  }
  footer .container > div{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  footer .container ul{
    text-align: center;
    padding: 0;
  }
}

/* Anker-Offset für sticky Header */
section[id]{ scroll-margin-top: 72px; }

/* === Cookie Banner (minimal) === */
#cookie-banner{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
  background: rgba(13,17,28,.96); color:#e6edff;
  border-top: 1px solid rgba(219,231,255,.14);
  padding: 14px;
}
#cookie-banner .cb-inner{
  max-width: 1120px; margin: 0 auto; display: flex; gap: 12px;
  align-items: center; justify-content: space-between; flex-wrap: wrap;
}
#cookie-banner a{ color:#9bd0ff; text-decoration: underline; }
.cb-actions{ display:flex; gap:10px; }
.cb-btn{
  background:#1b6cff; color:#fff; border:0; border-radius:999px;
  padding:.6rem 1rem; font-weight:600; cursor:pointer;
}
.cb-btn.ghost{
  background:#e9f3ff; color:#0747a6; border:1px solid #bcd5ff;
}
@media (max-width: 580px){
  #cookie-banner .cb-inner{ align-items: stretch; }
  .cb-actions{ width:100%; justify-content:flex-end; }
}