/* ===========================================================
   VendWerk – gemeinsame Responsive-Schicht
   Wird von jeder Seite im <helmet> geladen und greift dadurch
   automatisch auch für neue Seiten (z. B. Automaten-Unterseiten).
   Da die Seiten inline-styled sind, wird über Attribut-/Tag-
   Selektoren übersteuert.
   =========================================================== */

/* ---------- Deutsche Silbentrennung für Fließtext ---------- */
p, li {
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  overflow-wrap: break-word;
}

/* ---------- Hamburger / Mobile-Menü (von responsive.js erzeugt) ---------- */
.vw-burger {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: #fff; border: 1px solid #dbe3ec; border-radius: 12px;
  cursor: pointer; padding: 0;
}
.vw-burger span {
  position: relative; display: block; width: 20px; height: 2px;
  background: #2660a2; border-radius: 2px;
  transition: transform .25s, opacity .2s;
}
.vw-burger span::before, .vw-burger span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px;
  background: #2660a2; border-radius: 2px; transition: transform .25s;
}
.vw-burger span::before { top: -6px; }
.vw-burger span::after  { top:  6px; }
.vw-burger.open span { background: transparent; }
.vw-burger.open span::before { transform: translateY(6px) rotate(45deg); }
.vw-burger.open span::after  { transform: translateY(-6px) rotate(-45deg); }

.vw-mobilemenu {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border-bottom: 1px solid #e8eef5;
  box-shadow: 0 22px 40px -26px rgba(14,47,79,0.45);
  flex-direction: column; padding: 10px 22px 20px; gap: 2px; z-index: 60;
}
.vw-mobilemenu a {
  text-decoration: none; color: #34373d; font-size: 16px; font-weight: 600;
  padding: 14px 6px; border-bottom: 1px solid #f0f4f9;
}
.vw-mobilemenu a:last-child { border-bottom: none; }
.vw-mobilemenu a.vw-cta {
  margin-top: 12px; background: #2660a2; color: #fff; text-align: center;
  border-radius: 999px; border: none; padding: 15px;
}
/* Sprach-Flaggen-Zeile im Mobil-Menü */
.vw-menulang {
  display: flex; gap: 10px; margin-top: 16px;
  padding-top: 16px; border-top: 1px solid #eef2f7;
}
.vw-menulang button {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 11px 12px; border-radius: 12px; cursor: pointer;
  background: #f5f8fc; border: 1.5px solid #e6eef6;
  font-family: inherit; font-size: 15px; font-weight: 700; color: #6b7885;
  transition: border-color .18s, color .18s, background .18s;
}
.vw-menulang button .vw-menulang-flag {
  display: inline-flex; line-height: 0; opacity: .55; transition: opacity .18s;
  box-shadow: 0 0 0 1px rgba(120,120,120,.25); border-radius: 3px;
}
.vw-menulang button.active {
  background: #fff; border-color: #2660a2; color: #34373d;
  box-shadow: 0 2px 8px rgba(38,96,162,.12);
}
.vw-menulang button.active .vw-menulang-flag { opacity: 1; box-shadow: 0 0 0 1px rgba(38,96,162,.45); }

/* ---------- Tablet ---------- */
@media (max-width: 980px) {
  /* 3- und 4-spaltige Raster auf 2 Spalten */
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: 1.5fr 1fr 1fr 1fr"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ===== Mobiler Header: NUR Logo + Sprach-Flaggen + Hamburger =====
     Alles andere (Sektionslinks, Shop, Telefon, Suche) steckt im Menü. */
  .vw-burger { display: inline-flex !important; }
  .vw-mobilemenu.open { display: flex; }

  /* Sektions-Linkgruppe raus */
  .vw-navlinks { display: none !important; }
  /* Suchfeld raus */
  .vw-search { display: none !important; }
  /* Separater Shop-Link im Header raus (bleibt im Hamburger-Menü) */
  nav > div:first-child > a[href="shop.dc.html"] { display: none !important; }
  /* Telefonnummer raus (Header + Menü) */
  nav a[href*="wa.me/"] { display: none !important; }
  .vw-navphone { display: none !important; }
  /* Sprach-Flaggen aus dem Header raus (stecken jetzt im Hamburger-Menü) */
  nav [data-vw-lang-toggle] { display: none !important; }
  /* Platzhalter, der auf Desktop den Warenkorb-Slot reserviert, mobil raus */
  nav div[aria-hidden="true"][style*="width: 46px"] { display: none !important; }


  /* Hero-Portrait: Links-Versatz auf Tablet zurücknehmen, sonst ragt die
     Zitat-Karte in die Hero-Texte hinein. */
  .hero-portrait-spin { transform: translate(0, -30px) !important; }

  /* Sicherheitsnetz: nichts darf die Seite seitlich überlaufen lassen.
     'clip' verhindert horizontales Scrollen, ohne die Sticky-Nav zu brechen. */
  html { overflow-x: clip; }
  img { max-width: 100%; height: auto; }

  /* Lange Überschriften mit white-space:nowrap dürfen schon auf Tablet
     umbrechen – verhindert horizontalen Überlauf im Bereich 681–980px. */
  [style*="white-space: nowrap"]:not(.vw-keep) { white-space: normal !important; }
}

/* ---------- Handy ---------- */
@media (max-width: 680px) {
  /* Telefonnummer im Header ausblenden (steckt im Mobil-Menü) */
  .vw-navphone { display: none !important; }

  /* Alle mehrspaltigen Raster einspaltig */
  [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }

  /* Breite Außenränder reduzieren (64px / 56px horizontal) */
  [style*=" 64px"] { padding-left: 22px !important; padding-right: 22px !important; }
  [style*=" 56px"] { padding-left: 22px !important; padding-right: 22px !important; }

  /* Zeilenumbrüche wieder erlauben */
  [style*="white-space: nowrap"]:not(.vw-keep) { white-space: normal !important; }
  [style*="flex-wrap: nowrap"] { flex-wrap: wrap !important; }

  /* Hero-CTAs: fixe 240px-Buttons brechen um und werden vollbreit
     (verhindert horizontales Überlaufen des Heros auf schmalen Displays) */
  [style*="gap: 12px"][style*="margin-bottom: 40px"] { flex-wrap: wrap !important; }
  a[style*="width: 240px"] { width: 100% !important; max-width: 100% !important; }

  /* Subgrid-Vergleichskarten (z. B. SandenVendo/OPROO) untereinander stapeln:
     feste Spalten-/Zeilen-Zuweisung + Subgrid auflösen, sonst überläuft die
     zweite Karte den Viewport nach rechts. */
  [style*="grid-template-rows: subgrid"] {
    grid-template-rows: none !important;
    grid-row: auto !important;
    grid-column: auto !important;
  }

  /* Hero-Portrait (Startseite): Links-Versatz zurücknehmen, damit es beim
     Umbruch zentriert bleibt, und die schwebende Zitat-Karte in den Fluss
     holen, statt sie absolut über den rechten Rand ragen zu lassen. */
  .hero-portrait-spin { transform: none !important; justify-self: center !important; }
  .hero-portrait-spin > div[style*="position: absolute"] {
    position: relative !important;
    left: 0 !important; bottom: 0 !important;
    transform: none !important;
    width: 100% !important; max-width: 340px !important;
    margin: 14px auto 0 !important;
  }

  /* Überschriften skalieren + lange Wörter umbrechen */
  h1 { font-size: 32px !important; line-height: 1.12 !important; }
  h2 { font-size: 24px !important; line-height: 1.2 !important; }
  h1, h2, h3, p { overflow-wrap: break-word; }

  /* Große vertikale Sektions-Abstände etwas verkleinern */
  [style*="padding: 100px 64px"],
  [style*="padding: 96px 64px"],
  [style*="padding: 92px 64px"],
  [style*="padding: 84px 64px"],
  [style*="padding: 80px 64px"] { padding-top: 56px !important; padding-bottom: 56px !important; }
}

/* ---------- Mobil aufraeumen: nur das Wesentliche ----------
   Auf dem Handy zaehlt der schnelle Ueberblick ueber die Leistungen.
   Deshalb entfallen hier Elemente, die dafuer keinen Beitrag leisten:
   das Hero-Portrait samt Zitat-Karte und die beiden Rechner-Buttons
   (die Rechner bleiben ueber /rentabilitaetsrechner und /leasingrechner
   sowie ueber die Fusszeile erreichbar). */
@media (max-width: 680px) {
  .hero-portrait-spin { display: none !important; }
  .vw-calcbtns { display: none !important; }
  /* Showroom-Galerie: auf dem Handy je Standort nur das erste Foto.
     Die ausgeblendeten Bilder tragen loading="lazy" und werden dadurch
     gar nicht geladen (spart rund 300 KB). */
  .vw-mobhide { display: none !important; }
}

/* ---------- Sehr schmal ---------- */
@media (max-width: 400px) {
  [style*=" 64px"] { padding-left: 16px !important; padding-right: 16px !important; }
  [style*=" 56px"] { padding-left: 16px !important; padding-right: 16px !important; }
  h1 { font-size: 28px !important; }
}


/* ---------- Kontakt-Formularkarte + hCaptcha ---------- */
/* hCaptcha rendert eine feste 303px breite iFrame. Auf schmalen Displays
   den Karten-Innenabstand reduzieren und das Widget bei Bedarf skalieren,
   damit nichts horizontal überläuft. */
#vw-hcaptcha { max-width: 100%; }
@media (max-width: 680px) {
  .vw-formcard { padding: 24px !important; }
}
@media (max-width: 420px) {
  #vw-hcaptcha { transform: scale(0.9); transform-origin: 0 0; }
}
@media (max-width: 400px) {
  .vw-formcard { padding: 16px !important; }
}
@media (max-width: 360px) {
  #vw-hcaptcha { transform: scale(0.82); transform-origin: 0 0; }
}

/* ---------- Suchfeld (Header) ---------- */
.vw-search #site-search-results { max-width: 92vw; }
@media (max-width: 680px) {
  .vw-search { flex: 1 1 auto; min-width: 0; margin-right: 10px; }
  .vw-search #site-search { width: 100% !important; }
  .vw-search #site-search-results { width: min(92vw, 340px) !important; right: 0; }
}

/* ---------- Sichtbarer Tastatur-Fokus (WCAG 2.1 AA, 2.4.7) ----------
   Viele Elemente tragen inline "outline: none"; daher !important, sonst
   bleibt der Fokus fuer Tastaturnutzer unsichtbar. Mausklicks loesen
   :focus-visible nicht aus – die Optik aendert sich also nur bei
   Tastaturbedienung. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #1c5288 !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

/* Fallback fuer Browser ohne :focus-visible */
@supports not selector(:focus-visible) {
  a:focus, button:focus, input:focus, select:focus, textarea:focus {
    outline: 3px solid #1c5288 !important;
    outline-offset: 2px !important;
  }
}

/* ---------- Reduzierte Bewegung respektieren ----------
   Nutzer mit "prefers-reduced-motion: reduce" (Systemeinstellung) bekommen
   keine störenden Animationen/Übergänge mehr. Betrifft ausschließlich diese
   Nutzer; die normale Darstellung bleibt unverändert. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto !important; }
}

/* Nummerierte Ablaufliste: echtes <ol> (Screenreader zaehlt mit), Optik "1)" */
ol.vw-steps { list-style: none; counter-reset: vw-step; padding-left: 0; }
ol.vw-steps > li { counter-increment: vw-step; position: relative; padding-left: 30px; }
ol.vw-steps > li::before {
  content: counter(vw-step) ")";
  position: absolute; left: 0; top: 0;
  font-weight: 800; color: #2660a2;
  font-variant-numeric: tabular-nums;
}

/* Kontaktseite auf Tablet einspaltig.
   Die beiden Spalten haben feste Mindestbreiten (295px Datenspalte,
   384px Formularkarte) plus 64px Abstand. Zusammen mit dem seitlichen
   Innenabstand von je 64px ergibt das 807px und läuft damit auf einem
   768px-Tablet über den Rand hinaus. */
@media (max-width: 980px) {
  [style*="grid-template-columns: 0.85fr 1.15fr"] { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Dekorativer Icon-Kreis im Hero der Kategorieseiten.
   Feste 220px sprengen auf Tablet die schmalere Spalte (Überlauf auf
   automat-getraenke). Skaliert mit, statt zu überlaufen. */
@media (max-width: 980px) {
  [style*="width: 220px"][style*="height: 220px"][style*="border-radius: 50%"] {
    width: 168px !important; height: 168px !important;
  }
}
@media (max-width: 680px) {
  [style*="width: 220px"][style*="height: 220px"][style*="border-radius: 50%"] {
    width: 132px !important; height: 132px !important;
  }
}

/* Rechner-Schaltflächen ("Rentabilität" / "Finanzierung") haben feste 152px.
   Zwei davon plus 10px Abstand ergeben 314px und laufen auf 360px-Displays
   (verbreitete Android-Breite) knapp über den Rand. Ab hier mitschrumpfen. */
@media (max-width: 420px) {
  a[style*="width: 152px"], button[style*="width: 152px"] {
    width: auto !important;
    flex: 1 1 128px !important;
    min-width: 0 !important;
  }
}

/* Formularelemente duerfen auf schmalen Displays schrumpfen. Ohne min-width:0
   erzwingt die Standard-Mindestbreite von <input> eine zu breite Rasterspalte,
   was auf 360px-Geraeten die Kontaktseite ueberlaufen liess. */
@media (max-width: 680px) {
  input, textarea, select { min-width: 0 !important; max-width: 100% !important; }
}

/* Sehr schmale Geraete (bis 420px, z. B. iPhone SE).
   Zwei Ueberlaeufe, beide durch nicht schrumpfende Kinder verursacht:
   - Auswahlkacheln auf /schnellstart sprengten ihr eigenes Raster
   - der Container der Rechner-Schaltflaechen auf /automaten trug
     flex-shrink: 0 und konnte deshalb nicht mitgehen
   Steht bewusst am Dateiende, damit es in der Quellreihenfolge greift. */
@media (max-width: 420px) {
  [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="grid-template-columns"] > * { min-width: 0 !important; }
  [style*="flex-wrap: nowrap"][style*="flex-shrink: 0"] {
    flex-shrink: 1 !important;
    width: 100% !important;
    margin-left: 0 !important;
  }
}

/* ===========================================================
   Einklappbare Kopfzeilen-Suche (nur Desktop ab 981px).
   Spart in der schmalen Kopfzeile rund 180 px, ohne die Funktion
   zu verlieren: Sichtbar ist nur ein Lupen-Button; das Eingabefeld
   klappt bei Klick darüber auf (absolut positioniert, damit die
   übrige Navigation nicht umbricht).
   Unter 981px greift nichts davon – dort ist .vw-search ohnehin
   ausgeblendet und die Suche steckt nicht im Hamburger-Menü.
   =========================================================== */
.vw-searchtoggle { display: none; }

@media (min-width: 981px) {
  .vw-search--collapsible { position: relative; display: inline-flex; align-items: center; }

  .vw-search--collapsible .vw-searchtoggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; padding: 0;
    background: #f4f7fa; border: 1px solid #d9e1ea; border-radius: 999px;
    color: #5a6a7e; cursor: pointer;
    transition: background .18s, border-color .18s, color .18s;
  }
  .vw-search--collapsible .vw-searchtoggle:hover {
    background: #eaf1f8; border-color: #c3d2e2; color: #2660a2;
  }
  .vw-search--collapsible .vw-searchtoggle:focus-visible {
    outline: 2px solid #2660a2; outline-offset: 2px;
  }

  .vw-search--collapsible #site-search {
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    width: 0 !important; opacity: 0; pointer-events: none;
    padding-left: 0 !important; padding-right: 0 !important;
    border-width: 0 !important; z-index: 3;
    /* Bewusst NUR opacity animieren. Eine Transition auf width/padding wird
       von der DC-Laufzeit gestört, die das style-Attribut des Feldes neu
       setzt: Die Animation startet dann dauernd neu und bleibt bei der
       Ausgangsbreite hängen. Breite schaltet daher hart um. */
    transition: opacity .16s ease;
  }
  .vw-search--collapsible.open #site-search {
    width: 260px !important; opacity: 1; pointer-events: auto;
    padding-left: 16px !important; padding-right: 16px !important;
    border-width: 1px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vw-search--collapsible #site-search { transition: none !important; }
}