/* ==========================================================================
   VIBESCOUT — Mobile / Responsive Layer
   Wird ZUSÄTZLICH zu den seitenspezifischen <style>-Blöcken geladen und
   überschreibt sie an den richtigen Stellen. Senior-UX-Patches:
   - Hamburger-Drawer-Navigation (klein-Screen)
   - 100dvh, env(safe-area-inset-*), -webkit-tap-highlight, font smoothing
   - Touch-Target-Mindestgrößen ≥ 44 px
   - Mehr Breakpoints: 1100 / 920 / 720 / 520 / 380
   - Hero, Phone-Mockups, Stats, Buttons, Galleries, Footer auf Mobile
   - prefers-reduced-motion, prefers-color-scheme respektieren
   ========================================================================== */

/* ---- Globals --------------------------------------------------------- */
:root{
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
  --nav-h:64px;
}

html{ -webkit-text-size-adjust:100%; }
body{
  text-rendering:optimizeLegibility;
  overflow-wrap:break-word;
  word-wrap:break-word;
}
*{ -webkit-tap-highlight-color:rgba(255,255,255,.05); }

img,svg{ max-width:100%; height:auto; }

a,button,[role="button"]{ touch-action:manipulation; }

::selection{ background:rgba(184,64,138,.45); color:#fff; }

/* iOS dynamic viewport — fixt 100vh-Adressleisten-Sprung */
@supports (height:100dvh){
  #hero{ min-height:100dvh; }
}

/* Native-Look: Theme-Farbe via JS, hier nur Fallback-Tönung */
html{ background:#0D0D0D; }


/* ---- Hamburger-Burger (Desktop ausgeblendet) ------------------------- */
.nav-burger{
  display:none;
  width:44px;height:44px;
  align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  cursor:pointer;
  padding:0;
  flex-shrink:0;
  transition:background .2s,border-color .2s;
  -webkit-appearance:none;
  appearance:none;
}
.nav-burger:hover,.nav-burger:focus-visible{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.16);
  outline:none;
}
.nav-burger-icon{
  position:relative;width:18px;height:14px;
}
.nav-burger-icon span{
  position:absolute;left:0;right:0;
  height:2px;background:#fff;border-radius:99px;
  transition:transform .25s ease,top .2s ease,opacity .15s ease;
}
.nav-burger-icon span:nth-child(1){ top:0; }
.nav-burger-icon span:nth-child(2){ top:6px; }
.nav-burger-icon span:nth-child(3){ top:12px; }
.nav-burger.open .nav-burger-icon span:nth-child(1){ top:6px;transform:rotate(45deg); }
.nav-burger.open .nav-burger-icon span:nth-child(2){ opacity:0; }
.nav-burger.open .nav-burger-icon span:nth-child(3){ top:6px;transform:rotate(-45deg); }


/* ---- Mobile Drawer --------------------------------------------------- */
.mobile-drawer{
  position:fixed;inset:0;
  z-index:1000;
  background:rgba(13,13,13,.6);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;
  transition:opacity .25s ease;
}
.mobile-drawer.open{ opacity:1;pointer-events:auto; }
.mobile-drawer-panel{
  position:absolute;top:0;right:0;bottom:0;
  width:min(86vw,360px);
  background:#141414;
  border-left:1px solid rgba(255,255,255,.06);
  padding:calc(20px + var(--safe-top)) 24px calc(28px + var(--safe-bottom));
  display:flex;flex-direction:column;gap:6px;
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.mobile-drawer.open .mobile-drawer-panel{ transform:translateX(0); }
.mobile-drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:18px;
}
.mobile-drawer-head img{ height:34px; }
.mobile-drawer-close{
  width:40px;height:40px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  color:#fff;font-size:20px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.mobile-drawer-close:hover{ background:rgba(255,255,255,.1); }
.mobile-drawer-grad{
  height:3px;border-radius:99px;
  background:linear-gradient(90deg,#E8524A 0%,#B8408A 50%,#6B45C8 100%);
  margin-bottom:18px;opacity:.7;
}
.mobile-drawer a.drawer-link{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 14px;
  color:rgba(255,255,255,.85);
  text-decoration:none;font-size:16px;font-weight:500;
  border-radius:12px;
  transition:background .15s,color .15s;
  min-height:48px;
}
.mobile-drawer a.drawer-link::after{
  content:"›";color:rgba(255,255,255,.25);font-size:22px;line-height:1;
}
.mobile-drawer a.drawer-link:hover,
.mobile-drawer a.drawer-link:focus-visible{
  background:rgba(255,255,255,.05);color:#fff;outline:none;
}
.mobile-drawer .drawer-divider{
  height:1px;background:rgba(255,255,255,.08);
  margin:14px 4px;
}
.mobile-drawer .drawer-cta{
  margin-top:14px;
  display:flex;align-items:center;justify-content:center;
  gap:8px;
  background:linear-gradient(90deg,#E8524A 0%,#B8408A 50%,#6B45C8 100%);
  color:#fff;text-decoration:none;
  font-size:15px;font-weight:700;
  padding:15px 22px;
  border-radius:99px;
  box-shadow:0 8px 24px rgba(107,69,200,.25);
}
.mobile-drawer .drawer-meta{
  margin-top:auto;padding-top:24px;
  font-size:12px;color:rgba(255,255,255,.32);
  display:flex;flex-direction:column;gap:6px;
}
.mobile-drawer .drawer-meta a{
  color:rgba(255,255,255,.45);text-decoration:none;
}
.mobile-drawer .drawer-meta a:hover{ color:#fff; }

body.menu-open{ overflow:hidden; }


/* ===========================================================
   Mobile Breakpoints
   =========================================================== */

/* ≤ 1100 px — leichte Komprimierung des Headers */
@media (max-width:1100px){
  nav{ padding:16px 32px !important; }
  section{ padding:88px 36px; }
  #hero{ padding:112px 36px 72px !important; }
  .footer,footer{ padding:48px 36px 32px !important; }
  .cta-final{ padding:88px 36px !important; }
}

/* ≤ 920 px — Tablet / Hamburger-Schwelle */
@media (max-width:920px){
  /* Nav: Drawer aktivieren */
  nav{ padding:14px 20px !important; }
  .nav-links{ display:none !important; }
  .nav-cta{ display:none !important; }
  .nav-burger{ display:inline-flex !important; }

  /* Sektionen */
  section{ padding:72px 20px !important; }

  /* Hero — 1-spaltig */
  #hero{
    grid-template-columns:1fr !important;
    padding:calc(88px + var(--safe-top)) 20px 56px !important;
    gap:40px !important;
    min-height:auto !important;
  }
  .hero-content{ max-width:560px; margin:0 auto; }

  /* CTAs in Hero — vollbreit, größer für Touch */
  .hero-actions{ flex-direction:column;align-items:stretch;gap:10px; }
  .hero-actions .btn-primary,
  .hero-actions .btn-secondary,
  .hero-actions .btn-store,
  .hero-actions .btn-claim{
    width:100%;justify-content:center;
    padding:15px 24px;font-size:15px;min-height:50px;
  }

  /* Hero-Stats */
  .hero-stats{ gap:18px 24px;flex-wrap:wrap;justify-content:flex-start; }
  .hero-stats > div{ flex:1 1 calc(33% - 16px);min-width:90px; }

  /* CTA-Final */
  .cta-final,#final-cta{ padding:80px 20px !important; }
  .cta-actions,.final-actions{ flex-direction:column;align-items:stretch;width:100%;max-width:380px;margin:0 auto; }
  .cta-actions .btn-primary,
  .cta-actions .btn-store,
  .cta-actions .btn-claim,
  .cta-actions .btn-secondary,
  .final-actions .btn-primary,
  .final-actions .btn-store,
  .final-actions .btn-secondary{
    width:100%;justify-content:center;
    padding:15px 24px;min-height:50px;
  }

  /* Footer */
  .footer-inner{ grid-template-columns:1fr 1fr !important;gap:36px 24px !important;margin-bottom:32px !important; }
  .footer-brand{ grid-column:1 / -1; }
  .footer-bottom{ flex-direction:column !important;gap:10px;text-align:center;padding-top:22px; }

  /* Pricing-Card-Stack */
  .pricing-wrap{ grid-template-columns:1fr !important;max-width:520px;margin:36px auto 0 !important; }

  /* Reviews/Testimonials */
  .reviews-grid,.testimonials{ grid-template-columns:1fr !important; }

  /* Steps / Format-Cards in 1 Spalte */
  .features-grid,.steps,.formats-grid,.partner-types,.models-grid,.perks-grid{
    grid-template-columns:1fr !important;
  }

  /* Phone-Mockups */
  .hero-phones{ height:auto !important; }
  .phone-wrap{ animation:none !important; }
  .phone-frame{ width:240px !important; }
  .phone-secondary{ display:none !important; }
  .phone-stack{ height:480px !important; }
  .swipe-stack{ height:460px !important; }
  .sync-phones{ flex-wrap:wrap;justify-content:center;gap:10px; }
  .sync-phone{ width:46% !important;max-width:200px;transform:none !important; }
  .sync-phone:nth-child(2){ width:100% !important;max-width:230px;order:-1; }

  /* Galerie */
  .gallery-item{ width:180px !important; }
  .gallery-scroll{ padding-left:20px !important;padding-right:20px !important; }

  /* Dashboard-Mock */
  .dashboard-mock{ display:block !important;max-width:520px;margin:0 auto; }

  /* Two-col / B2B-Inner / VibeSync-Inner */
  .two-col,.b2b-inner,.vibesync-inner{ grid-template-columns:1fr !important;gap:48px !important; }

  /* Reviews/text-align Mobile center */
  .review-card,.testi-card{ text-align:left; }

  /* Section title size — etwas kleiner auf Mobile */
  .section-title{ font-size:clamp(28px,7vw,40px) !important; }
  .hero-title{ font-size:clamp(36px,9vw,54px) !important; }
  .final-cta-title,.cta-title{ font-size:clamp(34px,8.5vw,48px) !important; }
}

/* ≤ 720 px — Smartphone */
@media (max-width:720px){
  .legal-hero{ padding:calc(96px + var(--safe-top)) 20px 24px !important; }
  .legal-content{ padding:16px 20px 64px !important; }
  .legal-card{ padding:24px 22px !important;border-radius:18px !important; }
  .legal-card h2{ font-size:19px !important; }
  .legal-card p,.legal-card li{ font-size:14.5px !important; }
  .legal-meta{ grid-template-columns:1fr !important;gap:6px 0 !important; }
  .legal-meta dt{ margin-bottom:0;padding-top:8px; }
  .toc{ padding:18px 22px !important; }

  /* Pricing-Card etwas schmaler */
  .pricing-card{ padding:32px 24px !important; }
  .price-amount{ font-size:48px !important; }

  /* Hero-Stats — 2-spaltig wenn 3 Items */
  .hero-stats{ gap:14px 20px;padding-top:20px;margin-top:36px; }
  .hero-stats > div{ flex:1 1 calc(50% - 12px); }
  .stat-num{ font-size:24px; }

  /* Section-Padding */
  section{ padding:64px 18px !important; }
  #hero{ padding:calc(80px + var(--safe-top)) 18px 48px !important; }

  /* Buttons */
  .btn-primary,.btn-store,.btn-secondary,.btn-claim{ font-size:14.5px; }

  /* Reviews/Testimonials */
  .review-card,.testi-card{ padding:22px 20px !important; }

  /* FAQ */
  .faq-q{ font-size:14.5px !important;padding:18px 20px !important; }
  .faq-a{ font-size:13.5px !important; }
  .faq-item.open .faq-a{ padding:0 20px 18px !important; }

  /* Step-card */
  .step-card{ padding:28px 22px !important; }

  /* Cookie-Banner: mehr Abstand zur Home-Bar */
  #vibe-cc{ bottom:calc(12px + var(--safe-bottom)) !important; }
}

/* ≤ 520 px — schmale Phones */
@media (max-width:520px){
  .nav-logo img{ height:34px; }
  .nav-badge{ display:none; }

  .hero-title{ font-size:clamp(32px,10vw,46px) !important; }
  .hero-slogan{ font-size:15px; }
  .hero-desc{ font-size:15px; }

  .hero-stats > div{ flex:1 1 100%; }
  .hero-stats{ gap:14px;padding-top:18px; }

  .gallery-item{ width:160px !important; }
  .feat-card{ padding:32px 24px !important; }

  /* Phones noch kleiner */
  .phone-frame{ width:220px !important; }
  .phone-stack,.swipe-stack{ height:420px !important; }
  .sc-phone{ width:170px !important; }
  .sc-phone[style*="transform:translateX(-50%)"]{ width:210px !important; }
  .swipe-card{ width:75% !important;max-width:260px; }
  .swipe-card[style*="z-index:3"]{ width:88% !important;max-width:300px; }

  /* Footer 1-spaltig — saubereres Layout */
  .footer-inner{ grid-template-columns:1fr !important; }
  .footer-brand{ grid-column:auto; }
  footer{ padding:44px 20px 32px !important; }

  /* CTA-Final */
  .cta-actions,.final-actions{ max-width:100%; }
  .final-cta-title,.cta-title{ font-size:clamp(30px,9vw,40px) !important; }
}

/* ≤ 380 px — sehr schmale Geräte (iPhone SE 1st gen) */
@media (max-width:380px){
  nav{ padding:12px 16px !important; }
  section{ padding:56px 16px !important; }
  #hero{ padding:calc(76px + var(--safe-top)) 16px 40px !important; }
  .nav-logo img{ height:30px; }
  .hero-title{ font-size:34px !important;line-height:1.08 !important; }
  .section-title{ font-size:26px !important; }
  .legal-title{ font-size:34px !important; }
}

/* ---- Phone- / Swipe-Stack Vereinfachung auf Mobile ---------------- */
/* Auf Desktop wird ein dekorativer Karten-Stack mit absolut positionierten
   Side-Cards (opacity .55) gerendert. Auf Mobile bringt das nur Overflow
   und Drift — wir blenden die Side-Cards aus und zentrieren die Hauptkarte. */
@media (max-width:720px){
  /* index.html — Swipe-Demo */
  .swipe-stack{ height:auto !important;min-height:380px;padding:16px 0; }
  .swipe-card[style*="rotate(-5deg)"],
  .swipe-card[style*="rotate(4deg)"]{ display:none !important; }
  .swipe-card[style*="z-index:3"],
  .swipe-card{
    position:relative !important;
    left:auto !important;right:auto !important;bottom:auto !important;
    transform:none !important;
    width:min(82%,300px) !important;margin:0 auto;
  }
  .swipe-card[style*="z-index:3"]{ width:min(86%,320px) !important; }

  /* index.html — Phone-Stack im KI-Planner */
  .phone-stack{ height:auto !important;min-height:380px;padding:16px 0; }
  .sc-phone[style*="rotate(-4deg)"],
  .sc-phone[style*="rotate(4deg)"]{ display:none !important; }
  .sc-phone{
    position:relative !important;
    left:auto !important;right:auto !important;bottom:auto !important;
    transform:none !important;
    width:min(70%,260px) !important;margin:0 auto;
  }
  .sc-phone[style*="z-index:3"]{ width:min(70%,260px) !important; }

  /* gastro.html — Dashboard-Mock kompakter */
  .dashboard-mock{ padding:22px !important; }
  .dash-stats{ gap:8px !important; }
  .dash-stat{ padding:12px 8px !important; }
  .dash-stat-num{ font-size:18px !important; }

  /* events.html — Event-Mock-Cards */
  .event-card-mock{ display:flex !important;max-width:520px;margin:0 auto; }
  .event-mock-card{ padding:18px !important; }

  /* partner.html — City-Grid kompakter */
  .city-grid{ gap:10px !important; }
  .city-card{ padding:22px 16px !important; }
  .city-card:nth-child(n){ transform:none !important; }
  .city-card-icon{ font-size:30px !important;margin-bottom:10px; }
  .city-card-title{ font-size:14px !important; }
  .city-card-desc{ font-size:11.5px !important; }
}

/* ---- Reduced motion ------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .phone-wrap,.phone-secondary{ animation:none !important; }
  .badge-dot{ animation:none !important; }
}

/* ---- Cookie-Banner: Safe-Area + Mobile-Polish ---------------------- */
#vibe-cc{
  bottom:calc(24px + var(--safe-bottom));
}
@media (max-width:560px){
  #vibe-cc{
    left:calc(12px + var(--safe-left)) !important;
    right:calc(12px + var(--safe-right)) !important;
    bottom:calc(12px + var(--safe-bottom)) !important;
  }
  #vibe-cc.modal{
    bottom:calc(12px + var(--safe-bottom)) !important;
  }
}

/* ---- Focus rings (Accessibility) ----------------------------------- */
a:focus-visible,button:focus-visible,
.nav-cta:focus-visible,.btn-primary:focus-visible,
.btn-store:focus-visible,.btn-secondary:focus-visible,
.btn-claim:focus-visible{
  outline:2px solid #a78bfa;
  outline-offset:2px;
  border-radius:99px;
}

/* ---- Print --------------------------------------------------------- */
@media print{
  nav,.nav-burger,.mobile-drawer,#vibe-cc,#vibe-cc-overlay,
  footer,.cta-final,#final-cta,.gallery-scroll,.phone-wrap,
  .phone-stack,.swipe-stack,.sync-phones,.dashboard-mock,
  .event-card-mock,.city-visual{ display:none !important; }
  body{ background:#fff !important;color:#000 !important; }
  .legal-card{ background:#fff !important;border:1px solid #ccc !important; }
  .legal-card h2,.legal-card h3,.legal-title{ color:#000 !important;background:none !important;-webkit-text-fill-color:#000 !important; }
  .legal-card p,.legal-card li,.legal-card a{ color:#222 !important; }
}