/* ═══════════════════════════════════════
   PARTYRETTER – GLOBALE MOBILE FIXES
   Wird auf allen Seiten eingebunden.
   Überschreibt Inline-Styles wo nötig.
   ═══════════════════════════════════════ */

/* ── A8: GLOBALER OVERFLOW-SCHUTZ ── */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}
img, video, iframe, table {
  max-width: 100%;
}
main, .page-body {
  overflow-x: hidden;
}
.hero {
  overflow: hidden;
}

/* ── NAVIGATION ── */
@media (max-width: 768px) {
  nav { padding: 0 16px !important; }
  .nav-links { display: none !important; }
  .nav-actions .btn-login,
  .nav-actions .btn-cta-nav { display: none !important; }
  .nav-actions #lang-switcher { display: none !important; }

  /* A1: Hamburger 44x44 Touch-Target */
  .hamburger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 10px !important;
    flex-direction: column;
    cursor: pointer;
  }

  .mobile-menu {
    position: fixed; top: 66px; left: 0; right: 0;
    background: var(--dark, #1A1208);
    padding: 16px 24px; z-index: 199;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
    border-top: 1px solid rgba(245,240,232,.1);
  }
  .mobile-menu.open { display: block !important; }
  .mobile-menu a {
    display: block; color: rgba(245,240,232,.8);
    text-decoration: none; padding: 12px 0;
    font-size: 15px; font-weight: 500;
    border-bottom: 1px solid rgba(245,240,232,.08);
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .mobile-menu a:hover { color: var(--gold, #C8922A); }
  .mobile-menu .mobile-cta {
    display: inline-block; margin-top: 12px;
    background: var(--gold, #C8922A); color: var(--dark, #1A1208);
    padding: 12px 24px; border-radius: 8px;
    font-weight: 700; font-size: 14px;
    text-align: center; width: 100%;
    min-height: 44px;
  }
}

/* ── A2: HERO ── */
@media (max-width: 768px) {
  .hero {
    flex-direction: column !important;
    min-height: auto !important;
  }
  .hero-mascot { display: none !important; }
  .hero-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 28px 16px 32px !important;
    text-align: center !important;
    align-items: center !important;
  }
  .hero h1 { font-size: 26px !important; text-align: center; }
  .hero-sub { font-size: 14px !important; text-align: center; }

  /* A3: Suchleiste im Hero */
  .search-box {
    max-width: 100% !important;
    margin: 0 auto 16px !important;
    width: 100% !important;
  }
  .search-field-wrap {
    flex-direction: column !important;
  }
  .search-seg {
    border-right: none !important;
    border-bottom: 1px solid #e8e2d8;
    width: 100% !important;
  }
  .search-seg:last-of-type { border-bottom: none !important; }
  .quick-cats { justify-content: center !important; gap: 6px !important; }
  .quick-cat { padding: 6px 12px !important; font-size: 12px !important; }
}

@media (max-width: 480px) {
  .search-box { border-radius: 12px !important; }
  .search-btn {
    width: 48px !important; height: 48px !important;
    border-radius: 12px !important; margin: 6px !important; font-size: 18px !important;
  }
  .test-banner { font-size: 12px !important; padding: 8px 12px !important; }
}

/* ── A4: KATEGORIE-TABS HORIZONTAL SCROLLBAR ── */
@media (max-width: 768px) {
  .kat-tabs-section { padding: 24px 12px 0 !important; }
  .kat-tabs-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 10px !important;
    padding-bottom: 8px !important;
  }
  .kat-tabs-row::-webkit-scrollbar { display: none; }
  .kat-tab-card {
    min-width: 100px !important;
    max-width: 130px !important;
    flex-shrink: 0 !important;
    padding: 14px 10px !important;
  }
  .kat-tab-logo { width: 48px !important; height: 48px !important; }
  .kat-tab-card strong { font-size: 12px !important; }
}

/* ── A5: FOODTRUCK-LISTE KARTEN ── */
@media (max-width: 768px) {
  .truck-card.wide,
  .card.wide {
    grid-template-columns: 1fr !important;
  }
  .truck-card.wide img,
  .card.wide img {
    height: 200px !important;
    object-fit: cover !important;
    width: 100% !important;
    border-radius: 12px 12px 0 0 !important;
  }
  .truck-card,
  .card {
    max-width: 100% !important;
  }
}

/* ── A6: RESTAURANTS / LOCATIONS KARTEN ── */
@media (max-width: 768px) {
  .restaurant-card.wide,
  .location-card.wide {
    grid-template-columns: 1fr !important;
  }
  .restaurant-card.wide img,
  .location-card.wide img {
    height: 200px !important;
    object-fit: cover !important;
    width: 100% !important;
  }
}

/* ── A7: PREISE-SEITE ── */
@media (max-width: 768px) {
  .compare-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .compare-table {
    min-width: 500px !important;
    font-size: 13px !important;
  }
  .provision-cards {
    grid-template-columns: 1fr 1fr !important;
  }
  .hero { padding: 40px 16px 30px !important; }
}
@media (max-width: 400px) {
  .provision-cards {
    grid-template-columns: 1fr !important;
  }
}

/* ── A9: LISTEN-SEITEN 3-SPALTEN → 1-SPALTE ── */
@media (max-width: 768px) {
  .page-body,
  .main-layout {
    grid-template-columns: 1fr !important;
    display: block !important;
  }
  .sidebar-left,
  .sidebar-right,
  .filter-sidebar {
    display: none !important;
  }
  .content-main {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px !important;
  }

  .content-grid,
  div[style*="grid-template-columns: 260px 1fr 280px"],
  div[style*="grid-template-columns:260px 1fr 280px"],
  div[style*="grid-template-columns: 260px 1fr"],
  div[style*="grid-template-columns:260px 1fr"] {
    grid-template-columns: 1fr !important;
  }

  .kat-sidebar { display: none !important; }
  .angebote-inner { grid-template-columns: 1fr !important; }
  .angebote-section { padding: 24px 16px !important; }
  .angebote-grid { grid-template-columns: 1fr !important; }
}

/* ── A10: BLOG-SEITEN ── */
@media (max-width: 768px) {
  .blog-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .blog-sidebar {
    display: none !important;
  }
  .blog-hero,
  .blog-header { padding: 28px 16px !important; }
  .blog-content { padding: 20px 16px !important; }
  article { padding: 20px 16px !important; }
}

/* ── A11: EVENT-PLANEN FORMULAR ── */
@media (max-width: 768px) {
  .event-form {
    max-width: 100% !important;
    padding: 20px 16px !important;
  }
  .event-types {
    grid-template-columns: 1fr 1fr !important;
  }
  .form-row,
  .form-group-row {
    flex-direction: column !important;
    gap: 12px !important;
  }
}
@media (max-width: 400px) {
  .event-types {
    grid-template-columns: 1fr !important;
  }
}

/* ── A12: KOCHEVENTS ── */
@media (max-width: 768px) {
  .events-grid,
  .course-grid {
    grid-template-columns: 1fr !important;
  }
  input[style*="width: 200px"],
  input[style*="width:200px"],
  input[style*="width: 180px"],
  input[style*="width:180px"],
  select[style*="width: 200px"],
  select[style*="width:200px"] {
    width: 100% !important;
  }
}

/* ── A13: ANBIETER-ONBOARDING ── */
@media (max-width: 480px) {
  .steps-grid,
  .onboarding-steps {
    grid-template-columns: 1fr !important;
  }
  .pricing-card,
  .plan-card {
    min-width: 100% !important;
    max-width: 100% !important;
  }
  .pricing-cards,
  .plan-cards {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }
}

/* ── A14: FOOTER TOUCH-TARGETS ── */
@media (max-width: 768px) {
  .footer-top { grid-template-columns: 1fr !important; gap: 24px !important; }
  footer { padding: 32px 16px 20px !important; }
  footer a,
  footer .footer-link,
  .footer-col a {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    font-size: 14px !important;
    padding: 4px 0 !important;
  }
}

/* ── A15: TYPOGRAFIE BEI 480px ── */
@media (max-width: 480px) {
  h1 { font-size: 24px !important; }
  h2 { font-size: 20px !important; }
  h3 { font-size: 17px !important; }
  .section-title { font-size: 20px !important; }
  p, li { font-size: 14px !important; }

  section,
  .section {
    padding: 24px 16px !important;
  }
}

/* ── SECTION PADDING ── */
@media (max-width: 768px) {
  .mobile-section-pad,
  #sogehts,
  #zweiwege,
  #preise,
  section[style*="padding:60px 40px"],
  section[style*="padding: 60px 40px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  .section { padding: 40px 16px !important; }
}

/* ── INLINE-STYLE GRID OVERRIDES ── */
@media (max-width: 640px) {
  .mobile-stack-grid,
  #zweiwege div[style*="grid-template-columns: 1fr 1fr"],
  #zweiwege div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  .mobile-stack-grid-3,
  #preise div[style*="grid-template-columns: 1fr 1fr 1fr"],
  #preise div[style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── ZURÜCK-BUTTON MOBILE ── */
@media (max-width: 768px) {
  .zurueck-link { display: none !important; }
}

/* ── GENERIC CARD GRIDS ── */
@media (max-width: 640px) {
  .card-grid,
  .cards-grid,
  .provider-grid,
  .feature-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── GENERIC FLEX-ROW → COLUMN ── */
@media (max-width: 640px) {
  .flex-row-mobile,
  .cta-row,
  .hero-actions,
  .btn-row {
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .cta-row a,
  .cta-row button,
  .hero-actions a,
  .hero-actions button,
  .btn-row a,
  .btn-row button {
    width: 100% !important;
    text-align: center !important;
  }
}

/* ── TABLES RESPONSIVE ── */
@media (max-width: 640px) {
  table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    font-size: 13px !important;
  }
}

/* ── PROVISION/FEATURE GRIDS ── */
@media (max-width: 768px) {
  div[style*="grid-template-columns: repeat(3"],
  div[style*="grid-template-columns:repeat(3"],
  div[style*="grid-template-columns: 1fr 1fr 1fr"],
  div[style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  div[style*="grid-template-columns: repeat(2"],
  div[style*="grid-template-columns:repeat(2"],
  div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── HERO IMAGES INLINE ── */
@media (max-width: 768px) {
  div[style*="grid-template-columns: 340px 1fr"],
  div[style*="grid-template-columns:340px 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── A16: REACT SPA HERO + PROVIDER LIST OVERRIDES ── */
@media (max-width: 768px) {
  .pr-hero-grid {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    padding: 0 !important;
  }
  .pr-hero-grid > div:first-child {
    min-height: 200px !important;
    padding: 16px !important;
  }
  .pr-hero-grid > div:first-child img {
    max-height: 200px !important;
  }
  .pr-hero-grid > div:last-child {
    padding: 24px 16px 28px !important;
  }
  .pr-kochevents-hero {
    flex-direction: column !important;
    padding: 32px 16px 28px !important;
    gap: 20px !important;
    text-align: center !important;
  }
  .pr-kochevents-hero img {
    width: 120px !important;
    height: 120px !important;
  }
  .pr-kochevents-hero h1 {
    font-size: clamp(22px, 6vw, 32px) !important;
  }
}
@media (max-width: 768px) {
  div[style*="grid-template-columns: 1fr 300px"],
  div[style*="grid-template-columns:1fr 300px"],
  div[style*="grid-template-columns: 1fr 340px"],
  div[style*="grid-template-columns:1fr 340px"],
  div[style*="grid-template-columns: 1fr 320px"],
  div[style*="grid-template-columns:1fr 320px"] {
    grid-template-columns: 1fr !important;
  }
  div[style*="padding: 44px 40px"],
  div[style*="padding:44px 40px"],
  div[style*="padding: 52px 40px"],
  div[style*="padding:52px 40px"] {
    padding: 24px 16px !important;
  }
  div[style*="padding: 44px 40px 36px 16px"],
  div[style*="padding:44px 40px 36px 16px"] {
    padding: 24px 16px 28px !important;
  }
  div[style*="min-height: 400px"],
  div[style*="min-height:400px"] {
    min-height: auto !important;
  }
  form[style*="max-width: 640px"],
  form[style*="max-width:640px"] {
    flex-direction: column !important;
  }
  form[style*="max-width: 640px"] > div,
  form[style*="max-width:640px"] > div {
    border-right: none !important;
    border-bottom: 1px solid #e8e2d8;
  }
  form[style*="max-width: 640px"] > div:last-of-type,
  form[style*="max-width:640px"] > div:last-of-type {
    border-bottom: none !important;
  }
}

/* ── A17: PROVIDER CARDS GRID ON MOBILE ── */
@media (max-width: 640px) {
  div[style*="grid-template-columns: repeat(auto-fill"],
  div[style*="grid-template-columns:repeat(auto-fill"] {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 400px) {
  div[style*="grid-template-columns: repeat(auto-fill"],
  div[style*="grid-template-columns:repeat(auto-fill"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── A18: CONTAINER OVERFLOW PROTECTION ── */
@media (max-width: 768px) {
  .pr-hero-grid[style*="max-width: 1200px"],
  .pr-hero-grid[style*="max-width:1200px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100% !important;
  }
}

/* ── A19: FOODTRUCK CTA BUTTON ── */
.ft-cta-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #C8922A;
  color: #F5F0E8;
  padding: 14px 28px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  margin-top: 16px;
  transition: all 0.2s;
  box-shadow: 0 4px 16px rgba(200,146,42,0.35);
  white-space: nowrap;
  min-height: 48px;
}
.ft-cta-hero:hover {
  background: #e0a430;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(200,146,42,0.45);
}
.ft-cta-hero .ft-icon {
  font-size: 20px;
}

@media (max-width: 768px) {
  .ft-cta-hero {
    width: 100%;
    justify-content: center;
    font-size: 16px;
    padding: 16px 20px;
    border-radius: 14px;
  }
}

/* ── A20: CTA BANNER SECTION MOBILE ── */
@media (max-width: 768px) {
  section[style*="padding:64px 40px"],
  section[style*="padding: 64px 40px"] {
    padding: 40px 16px !important;
  }
  section[style*="padding:64px 40px"] h2,
  section[style*="padding: 64px 40px"] h2 {
    font-size: 22px !important;
  }
}

/* ── A21: TOUCH TARGETS MINIMUM 44px (SCOPED) ── */
@media (max-width: 768px) {
  .mobile-menu a,
  .hero-actions a,
  .hero-actions button,
  .cta-row a,
  .cta-row button,
  .kat-tab-card,
  .ft-cta-hero,
  .ft-nav-shortcut,
  nav .hamburger,
  footer a,
  .btn-row a,
  .btn-row button {
    min-height: 44px;
  }
  input, select, textarea {
    min-height: 44px;
    font-size: 16px !important;
  }
}

/* ── A22: FONT SIZE SCALING (SCOPED) ── */
@media (max-width: 480px) {
  .hero h1 { font-size: clamp(22px, 6vw, 28px) !important; }
  .pr-kochevents-hero h1 { font-size: clamp(22px, 6vw, 28px) !important; }
  .hero-sub, .hero-content p { font-size: clamp(13px, 3.5vw, 15px) !important; }
  .kat-tab-sub { font-size: 12px !important; }
  .angebot-loc, .angebot-price { font-size: 13px !important; }
  .demo-badge { font-size: 11px !important; padding: 4px 10px !important; }
  .stat-lbl { font-size: 12px !important; }
}

/* ── A29: DATE/TIME INPUT FIELDS – FIX WHITE-ON-WHITE (iOS/Safari) ── */
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  color: #1A1208 !important;
  background-color: #ffffff !important;
  -webkit-text-fill-color: #1A1208 !important;
  min-height: 44px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 16px;
}
input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="time"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit-fields-wrapper,
input[type="datetime-local"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper {
  color: #1A1208;
  -webkit-text-fill-color: #1A1208;
}

/* ── A30: FOOTER SOCIAL ICONS ── */
.footer-social {
  text-align: center;
  padding: 28px 0 0;
  margin-bottom: 24px;
}
.footer-social h5 {
  color: #C8922A;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 14px;
}
.footer-social-links {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.footer-social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(245,240,232,0.08);
  color: rgba(245,240,232,0.6);
  text-decoration: none;
  transition: all 0.2s;
}
.footer-social-links a:hover {
  background: rgba(200,146,42,0.2);
  color: #C8922A;
}
.footer-social-links a svg {
  width: 20px;
  height: 20px;
}

/* ── A23: HOMEPAGE ANGEBOTE GRID MOBILE ── */
@media (max-width: 640px) {
  .angebote-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
}
@media (max-width: 400px) {
  .angebote-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── A24: MOBILE MENU OVERLAY BACKDROP ── */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  top: 66px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 198;
}
.mobile-menu-overlay.open {
  display: block;
}

/* ── A25: HERO TEXT MOBILE SIZING ── */
@media (max-width: 480px) {
  .hero h1 {
    font-size: clamp(24px, 7vw, 32px) !important;
    line-height: 1.15 !important;
  }
  .hero h1 .h-gold {
    font-size: clamp(32px, 10vw, 48px) !important;
  }
  .hero-sub {
    font-size: 14px !important;
    line-height: 1.5 !important;
    max-width: 90vw !important;
  }
}

/* ── A26: FOOTER COLUMNS MOBILE STACKING ── */
@media (max-width: 640px) {
  .footer-top {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  footer {
    padding: 32px 16px 20px !important;
  }
  .footer-brand p,
  .footer-tagline {
    text-align: center !important;
  }
  .footer-brand .logo {
    text-align: center !important;
  }
  .footer-col {
    text-align: center !important;
  }
  .footer-col ul {
    padding: 0 !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 8px !important;
  }
}

/* ── A28: FOODTRUCK MAP LAYOUT MOBILE ── */
@media (max-width: 768px) {
  .foodtruck-map-layout {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: auto !important;
  }
  .foodtruck-sidebar-panel {
    max-height: 300px !important;
    overflow-y: auto !important;
    order: 2 !important;
  }
  .foodtruck-map-container {
    height: 50vh !important;
    min-height: 350px !important;
    order: 1 !important;
  }
}

/* ── A27: CTA BUTTON FULL WIDTH ON MOBILE ── */
@media (max-width: 640px) {
  .cta-section .btn-gold,
  .cta-section a[style*="padding"],
  section[style*="text-align:center"] a[style*="padding:16px"] {
    width: 100% !important;
    max-width: 320px !important;
    text-align: center !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}

/* A31 — Skip-link for keyboard accessibility (BFSG) */
.skip-link{position:absolute;top:-40px;left:0;background:#C8922A;color:#1A1208;padding:8px 16px;z-index:9999;text-decoration:none;font-weight:600;border-radius:0 0 8px 0;transition:top 0.2s}
.skip-link:focus{top:0;outline:2px solid #1A1208}