/* ============================================================
   AMD Tarifcheck – Mobile-First Responsive Architecture
   Globales System für alle Seiten
   
   Breakpoints:
     --bp-xs:  <= 480px   (iPhone SE, kleine Smartphones)
     --bp-sm:  <= 768px   (Standard Smartphones, hochkant)
     --bp-md:  <= 1024px  (Tablets, iPad, Querformat Smartphones)
     --bp-lg:  >  1024px  (Desktop)
   
   Keine seitenbezogenen Hacks. Keine Inline-Styles.
   Nur globale Komponenten-Systematik.
   ============================================================ */


/* ============================================================
   1. SPACING TOKENS
   Einheitliches mobiles Spacing-System
   ============================================================ */

:root {
  --space-xs:  8px;
  --space-sm:  14px;
  --space-md:  20px;
  --space-lg:  32px;
  --space-xl:  48px;

  --touch-min:     44px;   /* Minimum Touch-Target-Höhe (Apple HIG) */
  --input-height:  48px;   /* Formulareingabe Touch-optimiert */
  --radius-card:   14px;
  --radius-btn:    12px;
}


/* ============================================================
   2. BASE / RESET ERGÄNZUNGEN
   ============================================================ */

/* Horizontales Scrollen global verhindern */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Container bleibt immer im Viewport */
.container {
  width: min(1160px, 100% - 32px);
  margin-inline: auto;
}

/* Touch-Optimierung für alle interaktiven Elemente */
a, button, [role="button"], label[for], input, select, textarea {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}


/* ============================================================
   3. TOPBAR
   Kompakt, kein Überlaufen, alle Infos sichtbar
   ============================================================ */

/* Basis: Topbar bereits im style.css definiert.
   Mobile-Korrekturen ab 768px */

@media (max-width: 768px) {
  .topbar {
    font-size: 0.72rem;
    position: relative; /* sticky würde doppelt stacken mit header */
  }

  .topbar-inner,
  .topbar .container {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 6px 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .topbar-inner::-webkit-scrollbar,
  .topbar .container::-webkit-scrollbar {
    display: none;
  }

  /* Öffnungszeiten auf kleinen Screens ausblenden */
  .topbar .right {
    display: none;
  }

  .topbar span {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

@media (max-width: 480px) {
  .topbar-inner,
  .topbar .container {
    justify-content: center;
    gap: 14px;
    padding: 7px 16px;
  }
}


/* ============================================================
   4. HEADER
   Logo klar, Navigation ordentlich, kein Überlappen
   ============================================================ */

@media (max-width: 1024px) {
  .header .bar,
  .header-inner {
    min-height: 60px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .brand__logo-img,
  .logo-wrap img {
    height: 52px !important;
    width: auto !important;
    max-width: none;
  }
}

@media (max-width: 768px) {
  .header .bar,
  .header-inner {
    min-height: 56px;
    padding-left: 16px;
    padding-right: 16px;
    gap: 12px;
  }

  .brand__logo-img,
  .logo-wrap img {
    height: 46px !important;
  }
}

@media (max-width: 480px) {
  .header .bar,
  .header-inner {
    min-height: 52px;
  }

  .brand__logo-img,
  .logo-wrap img {
    height: 40px !important;
  }
}

/* Mobile Nav Menu
   ─────────────────────────────────────────────────────────────
   Problem: .nav hat position:absolute;top:100% relativ zum
   .header. Da .topbar ebenfalls position:sticky ist, überdeckt
   sie den Anfang des Menüs → erste Links verschwinden.

   Lösung: .nav.open → position:fixed, top wird per JS gesetzt
   (= topbar.offsetHeight + header.offsetHeight).
   CSS liefert den Fallback-Wert, JS überschreibt per
   CSS-Custom-Property --nav-top.
   ─────────────────────────────────────────────────────────────*/
@media (max-width: 900px) {

  /* Topbar: position:relative damit sie keinen sticky-Stack erzeugt
     der das Menü überdeckt – sie bleibt trotzdem oben, weil sie
     vor dem Header im DOM steht */
  .topbar {
    position: relative;
    z-index: 900;
  }

  /* Header bleibt sticky, bekommt aber einen höheren z-index
     damit er immer über dem Menü liegt */
  .header {
    position: sticky;
    top: 0;
    z-index: 1000;
  }

  /* Menü: fixed, startet direkt unter dem Header */
  .nav {
    position: fixed !important;
    left: 0;
    right: 0;
    /* Fallback: 56px Header. JS überschreibt via --nav-top */
    top: var(--nav-top, 56px) !important;
    max-height: calc(100dvh - var(--nav-top, 56px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    z-index: 998 !important;
    /* Reset position:absolute aus style.css */
    bottom: unset;
  }

  .nav.open {
    display: block;
  }

  /* Links: Touch-optimiert, volle Breite, kein Abschneiden */
  .nav__list {
    flex-direction: column;
    align-items: stretch;
    padding: 8px 16px 16px;
    gap: 3px;
    /* Kein overflow-hidden oder height-limit hier */
  }

  .nav__link {
    min-height: var(--touch-min);
    display: flex;
    align-items: center;
    padding: 12px 16px;
    font-size: 1rem;
    border-radius: 10px;
    width: 100%;
    white-space: normal;
  }

  .nav__toggle {
    min-width: var(--touch-min);
    min-height: var(--touch-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Kein body-scroll wenn Menü offen (verhindert hinter-Menü-Scrollen) */
html.nav-open body {
  overflow: hidden;
}


/* ============================================================
   5. SUBNAV / KFZ-PILLS
   Horizontal scrollbar auf Mobile, kein Zeilenumbruch-Chaos
   ============================================================ */

@media (max-width: 768px) {
  .subnav .container {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  /* Scrollbare Pill-Leiste */
  .kfz-pills {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    padding: 2px 0 6px;
  }

  .kfz-pills::-webkit-scrollbar {
    display: none;
  }

  .kfz-pill {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 8px 14px;
    font-size: 0.82rem;
  }
}


/* ============================================================
   6. HERO – Image Hero (index.html, Startseite)
   ============================================================ */

@media (max-width: 768px) {
  .hero {
    min-height: 70vw;
    min-height: min(70vw, 480px);
  }

  .hero__content {
    padding: 44px 16px 52px;
    gap: 14px;
    max-width: 100%;
  }

  .hero h1 {
    font-size: clamp(22px, 6vw, 30px);
    line-height: 1.18;
  }

  .hero__lead {
    font-size: 0.95rem;
    line-height: 1.6;
  }

  /* Hero-Aktionen: immer 1 Spalte unter 480px, sonst 2 */
  .hero__actions {
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    max-width: 100%;
  }

  .hero__actions .btn:last-child:nth-child(3) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .hero {
    min-height: 80vw;
  }

  .hero__content {
    padding: 36px 16px 44px;
  }

  .hero__actions {
    grid-template-columns: 1fr;
  }

  .hero__actions .btn:last-child:nth-child(3) {
    grid-column: auto;
  }
}


/* ============================================================
   7. PAGE-HERO (Unterseiten: dark gradient, kein Bild)
   ============================================================ */

@media (max-width: 768px) {
  .page-hero {
    padding: 32px 16px 36px;
  }

  .page-hero h1 {
    font-size: clamp(1.35rem, 5.5vw, 1.75rem);
    margin-top: 8px;
  }

  .page-hero p {
    font-size: 0.9rem;
    line-height: 1.6;
  }
}

@media (max-width: 480px) {
  .page-hero {
    padding: 26px 16px 30px;
  }
}


/* ============================================================
   8. KFZ-HERO (Bildbasierte Unterseiten-Hero)
   ============================================================ */

@media (max-width: 768px) {
  .kfz-hero {
    min-height: 52vw;
    min-height: min(52vw, 420px);
  }

  .kfz-hero .container {
    padding-top: 40px;
    padding-bottom: 44px;
  }

  .kfz-hero h1 {
    font-size: clamp(20px, 5.5vw, 28px);
    max-width: 100%;
    margin-bottom: 12px;
  }

  .kfz-hero p {
    font-size: 0.95rem;
  }

  .kfz-hero__actions {
    flex-direction: column;
    gap: 9px;
    align-items: stretch;
  }

  .kfz-hero__actions .btn {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .kfz-hero {
    min-height: 56vw;
  }

  .kfz-hero .container {
    padding-top: 30px;
    padding-bottom: 36px;
  }

  .kfz-hero h1 {
    font-size: clamp(18px, 5vw, 24px);
  }
}


/* ============================================================
   9. BUTTONS
   Mindestens 44px Touch-Höhe, einheitliche Größen
   ============================================================ */

@media (max-width: 768px) {
  .btn {
    min-height: var(--touch-min);
    padding: 12px 18px;
    font-size: 0.9rem;
    /* Kein white-space: nowrap erzwingen – erlaubt Zeilenumbruch */
    white-space: normal;
    text-align: center;
    line-height: 1.3;
  }

  .btn-sm {
    min-height: var(--touch-min);
    padding: 10px 16px;
    font-size: 0.88rem;
  }

  /* btn-grid: immer 1-2 Spalten */
  .btn-grid {
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  /* CTA-Row (3-spaltig) → 1-spaltig */
  .cta-row {
    grid-template-columns: 1fr;
  }

  .cta-row .btn {
    width: 100%;
  }

  /* Hero btns nebeneinander bis 480px */
  .hero-btns {
    gap: 10px;
  }

  /* Support actions */
  .support-actions .btn {
    min-width: unset;
    flex: 1 1 140px;
  }
}

@media (max-width: 480px) {
  /* Alle Button-Gruppen im Hero/CTA zu Vollbreite */
  .hero-btns,
  .kfz-form-actions,
  .action-row {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-btns .btn,
  .kfz-form-actions .btn,
  .action-row .btn,
  .action-row button {
    width: 100%;
    justify-content: center;
  }

  .btn-grid {
    grid-template-columns: 1fr;
  }

  /* App hero actions */
  .app-hero-actions {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   10. SECTIONS & SPACING
   Kein riesiger Leerraum, kein gequetschter Inhalt
   ============================================================ */

@media (max-width: 768px) {
  .section {
    padding: 40px 0;
  }

  .section-sub {
    margin-bottom: 24px;
  }
}

@media (max-width: 480px) {
  .section {
    padding: 30px 0;
  }
}


/* ============================================================
   11. TRUST BAR
   ============================================================ */

@media (max-width: 768px) {
  .trust-bar-inner {
    grid-template-columns: repeat(2, 1fr);
  }

  .trust-item {
    padding: 16px 12px;
  }

  .trust-num {
    font-size: 1.4rem;
  }

  .trust-label {
    font-size: 0.72rem;
  }
}

@media (max-width: 480px) {
  .trust-bar-inner {
    grid-template-columns: repeat(2, 1fr);
  }

  .trust-item {
    padding: 14px 10px;
  }

  .trust-num {
    font-size: 1.25rem;
  }
}


/* ============================================================
   12. CARDS & GRIDS
   Auto 1-Spalte, keine überlaufenden Karten
   ============================================================ */

@media (max-width: 768px) {
  /* Generische Grid-Klassen */
  .grid-3,
  .grid-2 {
    grid-template-columns: 1fr;
  }

  .why-grid {
    grid-template-columns: 1fr;
    margin-top: 20px;
  }

  .kfz-card-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .zul-leistungen-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  /* Step cards */
  .step-cards {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  /* KFZ Split */
  .kfz-split {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Card Padding */
  .card__body {
    padding: 16px;
  }

  .zul-card,
  .kfz-card__body {
    padding: 18px;
  }
}

@media (max-width: 480px) {
  /* Sicherstellen: kein overflow bei Karten */
  .card,
  .why-card,
  .zul-card,
  .kfz-card,
  .kfz-panel,
  .kfz-note,
  .upload-card,
  .contact-block {
    max-width: 100%;
    width: 100%;
  }
}


/* ============================================================
   13. FORMULARE
   Vollbreite, Touch-optimiert, keine horizontalen Scrollbars
   ============================================================ */

@media (max-width: 768px) {
  /* Alle Form-Grids auf 1 Spalte */
  .form-grid,
  .fgrid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .form-field--full {
    grid-column: 1;
  }

  .fgrid .full {
    grid-column: 1;
  }

  /* Input-Felder touch-freundlich */
  .form-field input,
  .form-field select,
  .form-field textarea,
  .fgrid input[type=text],
  .fgrid select,
  input[type=text],
  input[type=email],
  select,
  textarea {
    width: 100%;
    min-height: var(--input-height);
    padding: 12px 14px;
    font-size: 1rem; /* Verhindert iOS Auto-Zoom (min 16px) */
    border-radius: 10px;
  }

  /* Textarea nicht zu kurz */
  .form-field textarea,
  textarea {
    min-height: 120px;
  }

  /* Consent-Block */
  .consent {
    padding: 14px;
    gap: 12px;
  }

  .consent input {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 0;
  }

  /* Upload-Bereiche */
  .drop-panel {
    min-height: 160px;
    padding: 20px 16px;
  }

  .kfz-upload__box {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    gap: 12px;
  }

  .kfz-upload__box input::file-selector-button {
    width: 100%;
    margin: 0 0 8px 0;
    padding: 12px;
  }

  .upload-zone {
    padding: 22px 16px;
  }

  /* Upload-Aktionsbereich */
  .u-actions {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .u-actions #resetBtn {
    grid-column: 1;
  }

  /* Kontakt-Formular-Aktionen */
  .contact-form-actions {
    flex-direction: column;
  }

  .contact-form-actions .btn {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 480px) {
  /* iOS-Safe: Kein Auto-Zoom beim Fokus */
  input, select, textarea {
    font-size: 16px !important;
  }
}


/* ============================================================
   14. PROMO-BLÖCKE & BANNER
   (ZUL-Promo, Urlaub-Banner, Benefits-Panel)
   ============================================================ */

@media (max-width: 768px) {
  .zul-promo {
    padding: 28px 20px;
    border-radius: 14px;
  }

  .zul-promo-inner {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .price-badge {
    text-align: left;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-radius: 12px;
    white-space: normal;
  }

  .price-badge .price {
    font-size: 1.8rem;
  }

  .urlaub-banner {
    grid-template-columns: 1fr;
    padding: 24px 18px;
    border-radius: 14px;
    gap: 18px;
  }

  .urlaub-btns {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
  }

  .urlaub-btns .btn {
    flex: 1 1 140px;
  }

  .benefits-panel {
    border-radius: 16px;
    padding: 24px 18px;
  }

  .benefits-checklist {
    gap: 12px;
  }

  .benefits-checklist li {
    font-size: 0.93rem;
  }
}

@media (max-width: 480px) {
  .zul-promo {
    padding: 22px 16px;
  }

  .zul-checks,
  .zul-regions {
    gap: 7px;
  }

  .zul-check,
  .region-chip {
    font-size: 0.76rem;
    padding: 4px 10px;
  }

  .urlaub-btns .btn {
    flex: 1 1 100%;
  }
}


/* ============================================================
   15. CTA-BLOCK
   ============================================================ */

@media (max-width: 768px) {
  .cta-block {
    padding: 28px 18px;
    border-radius: 14px;
    margin-top: 32px;
  }

  .cta-block h3 {
    font-size: 1.2rem;
  }

  .cta-btns {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .cta-btns .btn,
  .cta-btns .btn-white {
    width: 100%;
    justify-content: center;
  }
}


/* ============================================================
   16. KONTAKT-SEITE
   ============================================================ */

@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .contact-block {
    padding: 20px 18px;
  }

  .hours-tbl td:first-child {
    min-width: 80px;
  }

  .erstinfo-block {
    padding: 20px 18px;
  }
}


/* ============================================================
   17. ZULASSUNGS-SEITE – Preis-Tabellen, Bonus-Box
   ============================================================ */

@media (max-width: 768px) {
  .price-table td {
    padding: 10px 14px;
    font-size: 0.84rem;
  }

  .price-section-head {
    padding: 12px 16px;
  }

  .bonus-list {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .docs-tabs {
    gap: 6px;
  }

  .docs-tab {
    font-size: 0.8rem;
    padding: 8px 12px;
  }
}

@media (max-width: 480px) {
  .price-table td {
    padding: 9px 12px;
  }

  /* Preis-Tabellen: keine gequetschten Preise */
  .price-table td:last-child {
    white-space: nowrap;
    font-size: 0.9rem;
  }
}


/* ============================================================
   18. KFZ-SCHEIBEN FORM (app.html / kfz-service.html)
   ============================================================ */

@media (max-width: 768px) {
  .scheiben-wrap {
    max-width: 100%;
  }

  .preview-box {
    font-size: 0.78rem;
    padding: 14px 16px;
    min-height: 120px;
  }

  .action-row {
    gap: 8px;
  }

  .btn-wa-scheiben,
  .btn-copy,
  .btn-clear-s {
    padding: 12px 16px;
    font-size: 0.88rem;
    min-height: var(--touch-min);
    width: 100%;
    justify-content: center;
  }
}


/* ============================================================
   19. ENERGIE-UPLOAD
   ============================================================ */

@media (max-width: 768px) {
  .upload-card__inner {
    padding: 18px 16px;
  }

  .drop-panel__content {
    gap: 10px;
  }

  .dp-icon {
    width: 48px;
    height: 48px;
  }

  .dp-title {
    font-size: 0.95rem;
  }

  .file-chip {
    padding: 10px 12px;
    gap: 10px;
  }

  .file-name {
    max-width: 36ch;
  }
}

@media (max-width: 480px) {
  .file-chip {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .file-actions {
    margin-left: 0;
    margin-top: 4px;
    width: 100%;
    justify-content: flex-end;
  }
}


/* ============================================================
   20. FOOTER
   ============================================================ */

@media (max-width: 768px) {
  .site-footer {
    padding: 36px 0 20px;
    margin-top: 32px;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .footer__nav {
    gap: 12px;
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .footer__nav {
    gap: 10px;
  }

  .footer__nav a {
    font-size: 0.85rem;
  }

  .partner-logos {
    gap: 12px;
    flex-wrap: wrap;
  }
}


/* ============================================================
   21. IMPRESSUM / DATENSCHUTZ (Textseiten)
   ============================================================ */

@media (max-width: 768px) {
  main.section h1 {
    font-size: clamp(1.3rem, 5vw, 1.75rem);
    margin-bottom: 18px;
  }

  main.section h2 {
    margin: 22px 0 8px;
  }
}


/* ============================================================
   22. TABLET-KORREKTUREN (769px – 1024px)
   Layouts die auf Tablet noch angepasst werden
   ============================================================ */

@media (min-width: 769px) and (max-width: 1024px) {
  /* Topbar: Öffnungszeiten sichtbar, aber kompakter */
  .topbar .right {
    display: block;
    font-size: 0.72rem;
  }

  /* Header */
  .brand__logo-img,
  .logo-wrap img {
    height: 56px !important;
  }

  /* 3-spaltige Grids → 2-spaltig auf Tablet */
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .kfz-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .zul-leistungen-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Step cards: 2 pro Reihe */
  .step-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Hero padding reduzieren */
  .hero__content {
    padding: 56px 16px 68px;
  }

  /* Sections etwas kompakter */
  .section {
    padding: 52px 0;
  }
}


/* ============================================================
   23. SONSTIGE UTILITY-KORREKTUREN
   ============================================================ */

/* Bilder nie über den Container hinaus */
img {
  max-width: 100%;
  height: auto;
}

/* Keine horizontale Overflow bei Text-Elementen */
h1, h2, h3, h4, h5, h6, p {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

/* Toast immer im Viewport */
.toast {
  max-width: calc(100% - 32px);
  width: auto;
}

/* info-box / kfz-note nie überlaufen */
.info-box,
.kfz-note {
  max-width: 100%;
}

/* Badge/Tag-Elemente nie überbreit */
.hero__badge,
.hero-badge,
.page-hero .hero__badge {
  display: inline-flex;
  max-width: 100%;
  flex-wrap: wrap;
  height: auto;
}

/* Docs-Tab-Leiste scrollbar wenn nötig */
@media (max-width: 600px) {
  .docs-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .docs-tabs::-webkit-scrollbar {
    display: none;
  }

  .docs-tab {
    flex-shrink: 0;
  }
}

/* KFZ-Tab-Leiste mobil scrollbar */
@media (max-width: 768px) {
  .kfz-tabs-wrap {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-left: 16px;
    padding-right: 16px;
    gap: 8px;
  }

  .kfz-tabs-wrap::-webkit-scrollbar {
    display: none;
  }

  .kfz-tab {
    flex-shrink: 0;
    font-size: 0.82rem;
    padding: 9px 14px;
  }
}


/* ============================================================
   ÄNDERUNGEN v4 – Auftraggeber-Anforderungen
   ============================================================ */

/* ── Item 1: CTA-Buttons – bessere Lesbarkeit auf Bild-/Dunkel-Hintergründen ── */

/* btn-outline auf Hero/dunklem Hintergrund: mehr Kontrast */
.hero .btn-outline,
.hero__content .btn-outline,
[class*="hero"] .btn-outline {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.75);
  color: #fff;
  font-weight: 700;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero .btn-outline:hover,
.hero__content .btn-outline:hover,
[class*="hero"] .btn-outline:hover {
  background: rgba(255,255,255,0.28);
  border-color: #fff;
  color: #fff;
  text-decoration: none;
}

/* btn-ghost erhält stärkeres Kontrast-Styling */
.btn-ghost {
  background: rgba(255,255,255,0.18);
  color: #fff;
  border-color: rgba(255,255,255,0.6);
  font-weight: 700;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.30);
  border-color: rgba(255,255,255,0.9);
}

/* btn-primary: stärkerer Box-Shadow auf kleinen Screens */
@media (max-width: 768px) {
  .btn-primary {
    box-shadow: 0 4px 18px rgba(232,96,10,.38);
    font-size: 0.97rem;
  }
  .btn {
    min-height: 48px;
  }
}

/* ── Item 2: Mobile Navigation – einheitliche Hamburger-Navigation ── */
/* Bereits global in mobile.css definiert; sicherstellen dass page-hero etc.
   den nav__toggle nicht überschreiben */
@media (max-width: 900px) {
  .nav__toggle {
    display: inline-flex !important;
    min-height: 44px;
    min-width: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    background: #fff;
    padding: 8px 10px;
    border-radius: 9px;
    cursor: pointer;
    font-size: 1.25rem;
    transition: background .15s;
  }
  .nav__toggle:hover {
    background: #f1f5f9;
  }
  /* Ensure consistent animation */
  .nav {
    transition: opacity .18s, transform .18s;
  }
  .nav:not(.open) {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
  }
  .nav.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
}

/* ── Logo-Größe mobil: global, alle Seiten ── */
@media (max-width: 900px) {
  .brand__logo-img,
  .logo-wrap img {
    height: 68px !important;
    width: auto !important;
  }
  .header .bar,
  .header-inner {
    min-height: 76px;
  }
  .topbar-inner,
  .topbar .container {
    gap: 12px;
    padding: 7px 16px;
  }
}

@media (max-width: 768px) {
  .brand__logo-img,
  .logo-wrap img {
    height: 62px !important;
    width: auto !important;
  }
  .header .bar,
  .header-inner {
    min-height: 72px;
  }
}

@media (max-width: 480px) {
  .brand__logo-img,
  .logo-wrap img {
    height: 56px !important;
    width: auto !important;
  }
  .header .bar,
  .header-inner {
    min-height: 68px;
  }
}


/* ============================================================
   24. ZULASSUNGSDIENST – Benötigte Unterlagen
   Mobile-freundliche Akkordeon-Karten
   ============================================================ */

.zul-docs-section {
  margin-top: 46px;
}

.zul-docs-intro {
  color: var(--muted);
  margin: 0 0 22px;
  max-width: 720px;
  line-height: 1.65;
}

.zul-docs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.zul-doc-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .06);
  overflow: hidden;
}

.zul-doc-card summary {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--ink);
  list-style: none;
}

.zul-doc-card summary::-webkit-details-marker {
  display: none;
}

.zul-doc-card summary::after {
  content: "+";
  margin-left: auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff7ed;
  color: var(--accent);
  font-weight: 800;
  flex-shrink: 0;
}

.zul-doc-card[open] summary::after {
  content: "–";
}

.zul-doc-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff7ed;
  flex-shrink: 0;
}

.zul-doc-content {
  padding: 0 18px 18px;
  color: var(--muted);
}

.zul-doc-content h3 {
  margin: 14px 0 8px;
  font-size: .92rem;
  color: var(--ink);
}

.zul-doc-sub {
  margin: 0 0 10px;
  font-weight: 700;
  color: var(--muted);
}

.zul-doc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.zul-doc-list li {
  position: relative;
  padding-left: 22px;
  line-height: 1.5;
  font-size: .92rem;
}

.zul-doc-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-weight: 900;
}

@media (max-width: 768px) {
  .zul-docs-section {
    margin-top: 36px;
  }

  .zul-docs-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .zul-doc-card summary {
    min-height: 54px;
    padding: 14px 15px;
    font-size: .94rem;
  }

  .zul-doc-content {
    padding: 0 15px 16px;
  }

  .zul-doc-list li {
    font-size: .9rem;
  }
}

@media (max-width: 480px) {
  .zul-doc-card {
    border-radius: 14px;
  }

  .zul-doc-card summary {
    align-items: flex-start;
    line-height: 1.35;
  }

  .zul-doc-card summary::after {
    width: 26px;
    height: 26px;
  }
}
/* Zulassungsdienst Unterlagen: geschlossene Karten nicht auf volle Höhe strecken */
.zul-docs-grid {
  align-items: start;
}

.zul-doc-card {
  align-self: start;
}

/* ============================================================
   TOPBAR – Öffnungszeiten auf Mobilgeräten ausblenden
   Am Ende der Datei, um design.css / improvements.css zu gewinnen.
   ============================================================ */

@media (max-width: 768px) {
  .topbar .right,
  .topbar span.right {
    display: none !important;
  }
}


/* ============================================================
   HERO BULLETS – strukturierte Liste statt <br><br>-Text
   ============================================================ */

.hero__bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hero__bullets li {
  color: #dce6f0;
  font-size: clamp(14px, 1.7vw, 17px);
  line-height: 1.5;
  padding-left: 1.4em;
  position: relative;
}

.hero__bullets li::before {
  content: "✓";
  color: var(--accent-mid, #e8843a);
  position: absolute;
  left: 0;
  font-weight: 700;
}

/* Mobile: Hero-Text noch kompakter */
@media (max-width: 480px) {
  .hero__lead {
    font-size: 0.9rem;
    line-height: 1.55;
  }

  .hero__bullets li {
    font-size: 0.88rem;
    line-height: 1.5;
  }

  .hero__bullets {
    gap: 5px;
  }
}

/* ============================================================
   ZUL-PROMO MOBILE FIXES
   Behebt: Text-Überlauf, kaputte price-badge, zul-check-Breite
   ============================================================ */

@media (max-width: 768px) {

  /* Text läuft nicht mehr aus dem Container */
  .zul-promo p,
  .zul-promo h2 {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* price-badge: kompaktes Block-Layout statt fehlerhaftem inline-flex */
  .price-badge {
    display: block !important;
    text-align: center !important;
    padding: 18px 20px !important;
    border-radius: 14px !important;
    white-space: normal !important;
    width: 100%;
    box-sizing: border-box;
  }

  /* discount-note: volle Breite, kein Overflow */
  .discount-note {
    width: 100%;
    box-sizing: border-box;
    white-space: normal;
    word-break: break-word;
  }

  /* zul-checks: keine Chips breiter als der Viewport */
  .zul-check {
    max-width: 100%;
    white-space: normal !important;
    word-break: break-word;
    line-height: 1.5;
  }

  /* Zweite Spalte (badge + note) wird auf Mobile volle Breite */
  .zul-promo-inner > div:last-child {
    width: 100%;
    align-items: stretch !important;
  }
}

@media (max-width: 480px) {
  /* Padding noch etwas enger auf sehr kleinen Screens */
  .zul-promo {
    padding: 20px 14px !important;
  }

  .price-badge {
    padding: 14px 16px !important;
  }
}
/* ============================================================
   ZUL-CHECKS MOBILE – alle Chips gleich breit (volle Zeile)
   ============================================================ */

@media (max-width: 768px) {

  /* Chips: volle Breite, linksbündig, einheitlich */
  .zul-checks {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .zul-check {
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
    white-space: normal !important;
    word-break: break-word !important;
    padding: 8px 14px !important;
    line-height: 1.5 !important;
  }

  /* price-badge + discount-note: zentriert, volle Breite */
  .zul-promo-inner > div:last-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .price-badge {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    padding: 16px 20px !important;
    white-space: normal !important;
  }

  .discount-note {
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }
}

@media (max-width: 480px) {
  .zul-promo {
    padding: 20px 14px !important;
  }

  .price-badge {
    padding: 14px 16px !important;
  }
}
/* ============================================================
   ZUL-PROMO BUTTON – volle Breite auf Mobile
   ============================================================ */

@media (max-width: 768px) {
  .zul-promo .btn {
    width: 100% !important;
    text-align: center !important;
    display: block !important;
    box-sizing: border-box !important;
  }
}
/* ============================================================
   FGRID – alle Input-Typen volle Breite auf Mobile
   ============================================================ */

@media (max-width: 768px) {
  .fgrid input[type=tel],
  .fgrid input[type=email],
  .fgrid input[type=date],
  .fgrid input[type=text],
  input[type=tel],
  input[type=email],
  input[type=date] {
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 48px;
    padding: 12px 14px;
    font-size: 1rem;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-family: 'DM Sans', sans-serif;
    color: var(--text);
    background: #fff;
    outline: none;
  }
}