/**
 * Scooterstar — Visual Refinement Layer (2026-07)
 * Reiner Optik-Layer über dem Elementor-Design: Tiefe, Hover, Micro-Polish.
 * Kein Layout-/Struktur-Eingriff. Rollback = Datei + design-refinement.php löschen.
 *
 * Klassen werden per _elementor_data (css_classes) vergeben:
 *   .ss-card         Karte mit Hover-Lift (klickbare/interaktive Karten)
 *   .ss-card-static  Karte mit Schatten, ohne Lift (Info/Legal/Testimonials)
 *   .ss-cta-band     dunkles CTA-Band (Gradient + Glow)
 *   .ss-hero         Hero-/Sub-Hero-Section (Verlauf)
 */

:root {
  --ss-shadow-sm: 0 1px 2px rgba(19, 59, 80, 0.05), 0 4px 14px rgba(19, 59, 80, 0.06);
  --ss-shadow-lg: 0 4px 10px rgba(19, 59, 80, 0.07), 0 18px 44px rgba(19, 59, 80, 0.13);
  --ss-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- P1: Karten-System ---------- */

.ss-card,
.ss-card-static {
  box-shadow: var(--ss-shadow-sm);
}

.ss-card {
  transition: transform 0.25s var(--ss-ease), box-shadow 0.25s var(--ss-ease);
  will-change: transform;
}

@media (hover: hover) {
  .ss-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ss-shadow-lg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-card {
    transition: none;
  }
  .ss-card:hover {
    transform: none;
  }
}

/* ---------- P2: Hero / Sub-Heros ---------- */
/* Sky-Akzent oben links + weicher Auslauf ins Weiß der Folgesection */

.ss-hero {
  background-image:
    radial-gradient(90% 85% at 10% -15%, rgba(121, 189, 217, 0.30), rgba(121, 189, 217, 0) 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0) 55%, #ffffff 100%);
}

.ss-hero .elementor-widget-image img {
  box-shadow: 0 24px 60px -16px rgba(19, 59, 80, 0.28);
}

/* ---------- P3: Dunkle CTA-Baender ---------- */

.ss-cta-band {
  background-image:
    radial-gradient(110% 130% at 88% -25%, rgba(121, 189, 217, 0.22), rgba(121, 189, 217, 0) 55%),
    linear-gradient(160deg, #17537a 0%, #133b50 62%);
}

/* ---------- P4: Buttons (Tiefe + Hover-Qualitaet) ---------- */
/* Telefon-Ghost-Link im Header (hd38ph1) ausgenommen */

.elementor-button {
  transition:
    background-color 0.2s var(--ss-ease),
    border-color 0.2s var(--ss-ease),
    color 0.2s var(--ss-ease),
    box-shadow 0.2s var(--ss-ease),
    transform 0.2s var(--ss-ease);
}

.elementor-element:not(.elementor-element-hd38ph1) > .elementor-widget-container .elementor-button,
.elementor-element:not(.elementor-element-hd38ph1) .elementor-button-wrapper .elementor-button {
  box-shadow: 0 1px 2px rgba(19, 59, 80, 0.10);
}

@media (hover: hover) {
  .elementor-element:not(.elementor-element-hd38ph1) .elementor-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(19, 59, 80, 0.18);
  }
}

@media (prefers-reduced-motion: reduce) {
  .elementor-button,
  .elementor-button:hover {
    transform: none;
    transition: none;
  }
}

/* ---------- P5: Typografie-Feinschliff ---------- */
/* Manrope wirkt bei grossen Graden mit leicht negativem Tracking deutlich hochwertiger */

h1 {
  letter-spacing: -0.02em;
}

h2 {
  letter-spacing: -0.015em;
}

h3 {
  letter-spacing: -0.01em;
}

/* Ausgewogene Zeilenumbrueche, verhindert Hurenkinder in Headlines */
h1,
h2,
h3 {
  text-wrap: balance;
}

/* ---------- P6: Formularfelder (Kontakt, WPForms) ---------- */

.ss-card-static div.wpforms-container-full .wpforms-form input[type="text"],
.ss-card-static div.wpforms-container-full .wpforms-form input[type="email"],
.ss-card-static div.wpforms-container-full .wpforms-form input[type="tel"],
.ss-card-static div.wpforms-container-full .wpforms-form textarea,
.ss-card-static div.wpforms-container-full .wpforms-form select {
  border: 1px solid rgba(19, 59, 80, 0.18);
  border-radius: 10px;
  padding: 11px 14px;
  background-color: #ffffff;
  transition: border-color 0.2s var(--ss-ease), box-shadow 0.2s var(--ss-ease);
}

.ss-card-static div.wpforms-container-full .wpforms-form input[type="text"]:focus,
.ss-card-static div.wpforms-container-full .wpforms-form input[type="email"]:focus,
.ss-card-static div.wpforms-container-full .wpforms-form input[type="tel"]:focus,
.ss-card-static div.wpforms-container-full .wpforms-form textarea:focus,
.ss-card-static div.wpforms-container-full .wpforms-form select:focus {
  border-color: #1f6e92;
  box-shadow: 0 0 0 3px rgba(31, 110, 146, 0.14);
  outline: none;
}

/* Kontakt: rechte Info-Spalte folgt dem langen Formular (nur Desktop) */
@media (min-width: 1025px) {
  .elementor-element-e8d4cf8 {
    position: sticky;
    top: 110px;
  }
}

/* ---------- P7: Testimonials ---------- */
/* Sterne praesenter, Zitate mit mehr Lesegroesse und Ruhe */

.elementor-element-e3ec2f2 p,
.elementor-element-1d0450e p,
.elementor-element-2df4dbd p {
  font-size: 20px;
  letter-spacing: 3px;
}

.elementor-element-9c00657 p,
.elementor-element-fb353cc p,
.elementor-element-2f98ed7 p {
  font-size: 18px;
  line-height: 1.6;
}

/* ---------- P7: Footer + Link-Hover ---------- */

.elementor-39 a,
.elementor-38 a {
  transition: color 0.2s var(--ss-ease), opacity 0.2s var(--ss-ease);
}

@media (hover: hover) {
  .elementor-39 .elementor-icon-list-item a:hover {
    color: #79bdd9;
  }
}

/* ============================================================
 * Phase 2 — Editorial Composition Layer (ss-ed-*)
 * Rein raeumlich: Bleeds, Rhythmus, Hierarchie. Desktop-Effekte
 * greifen erst ab 1200px; darunter stackt alles unveraendert.
 * Kit-Contentbreite: boxed 1140px + 20px Seitenpadding => 1100px
 * Content-Kante; Abstand Kante->Viewport = (100vw - 1100px) / 2.
 * ============================================================ */

/* Sections mit Bleed-Kindern clippen den Ueberhang */
.ss-ed-clip {
  overflow-x: clip;
}

/* ---------- Bleeds: Bild laeuft bis an den Viewport-Rand ---------- */
/* Elementor setzt width auf Widgets — Breite muss per calc mitwachsen,
   der negative Margin allein verschiebt nur. */
@media (min-width: 1200px) {
  .ss-ed-bleed-right .elementor-widget-image {
    width: calc(100% + (100vw - 1100px) / 2) !important;
    max-width: none !important;
    margin-right: calc((1100px - 100vw) / 2);
  }
  .ss-ed-bleed-right .elementor-widget-image img {
    border-radius: 24px 0 0 24px;
    width: 100%;
  }
  .ss-ed-bleed-left .elementor-widget-image {
    width: calc(100% + (100vw - 1100px) / 2) !important;
    max-width: none !important;
    margin-left: calc((1100px - 100vw) / 2);
  }
  .ss-ed-bleed-left .elementor-widget-image img {
    border-radius: 0 24px 24px 0;
    width: 100%;
  }
}

/* Hero-Bild: mehr Praesenz, ruhiger Beschnitt */
@media (min-width: 1200px) {
  .ss-ed-bleed-right img,
  .ss-ed-bleed-left img {
    object-fit: cover;
  }
  .elementor-element-4350e18 img {
    height: 500px !important;
  }
  .elementor-element-15b96c1 img {
    height: 440px !important;
  }
}

/* ---------- Hero-Statband (Home) ---------- */
.ss-ed-statband > .e-con-inner {
  border-top: 1px solid rgba(19, 59, 80, 0.14);
  padding-top: 32px;
}

/* ---------- Featured-Testimonial (mittlere Karte) ---------- */
@media (min-width: 1025px) {
  .ss-ed-feature {
    margin-top: -18px;
    margin-bottom: 18px;
    box-shadow: var(--ss-shadow-lg);
    background-color: #f0f8fb;
  }
}

/* ---------- Service-Prozess: Boxen -> editoriale Schritte ---------- */
.ss-ed-step {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border-top: 2px solid rgba(31, 110, 146, 0.18);
  padding: 24px 12px 0 0 !important;
}

.ss-ed-step .elementor-widget-heading:first-of-type .elementor-heading-title {
  font-size: 46px;
  font-weight: 800;
  line-height: 1;
  color: #79bdd9;
  letter-spacing: -0.02em;
}

/* ---------- Rechtsbuendiger Editorial-Header (Fahrzeuge/Motorroller) ---------- */
@media (min-width: 1025px) {
  .ss-ed-right .elementor-heading-title {
    text-align: right;
  }
}

/* ---------- Showroom-Mosaik (Fahrzeuge) ---------- */
@media (min-width: 1025px) {
  .ss-ed-mosaic .elementor-widget-image img {
    width: 100%;
    object-fit: cover;
    display: block;
  }
  .ss-ed-mo-big .elementor-widget-image img {
    height: 560px !important;
  }
  .ss-ed-mo-sm .elementor-widget-image img {
    height: 258px !important;
  }
}

/* ---------- Ratgeber: Featured-Artikel, Bild randlos ---------- */
.ss-ed-featured-article {
  overflow: hidden;
}

@media (min-width: 1025px) {
  /* Row im Featured-Card hat Elementor-Default-Padding 10px */
  .ss-ed-featured-article .e-con,
  .ss-ed-featured-article .e-con-inner {
    padding: 0 !important;
  }
  .ss-ed-featured-article .elementor-element-86b1abd {
    padding: 44px 44px 44px 0 !important;
  }
  .ss-ed-cover {
    align-self: stretch !important;
    height: auto !important;
  }
  .ss-ed-cover .elementor-widget-image,
  .ss-ed-cover .elementor-widget-container {
    height: 100% !important;
  }
  .ss-ed-cover .elementor-widget-image img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover;
    border-radius: 0 !important;
    display: block;
  }
}

@media (max-width: 1024px) {
  /* Ohne Cover-Layout braucht die Featured-Karte mobil Innenabstand */
  .ss-ed-featured-article {
    padding: 20px;
  }
}

/* ============================================================
 * Phase 4 — Accent & Map Layer [P4]
 * Gelber Markenakzent (ss_accent #E6DD5A) + 2-Klick-Google-Maps.
 * Gelb nur als Linien/Flaechen/Glow — nie als Text auf Weiß.
 * Rollback: kompletten Block loeschen (Regeln einzeln loeschbar).
 * ============================================================ */

:root {
  --ss-accent: #e6dd5a;
}

/* ---------- P4-1: Hero-Kicker-Linie ueber der H1 ---------- */
.ss-hero h1.elementor-heading-title::before {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  border-radius: 2px;
  background: var(--ss-accent);
  margin-bottom: 14px;
}

/* ---------- P4-2: CTA-Band Akzentkante oben (Gelb auf Tiefblau) ---------- */
.ss-cta-band {
  border-top: 3px solid var(--ss-accent);
}

/* ---------- P4-3: CTA-Band Button-Hover mit Akzent-Glow ---------- */
@media (hover: hover) {
  .ss-cta-band .elementor-button:hover {
    box-shadow: 0 8px 22px rgba(230, 221, 90, 0.35);
  }
}

/* ---------- P4-4: Statband Akzent-Ticks unter den Zahlen ---------- */
.ss-ed-statband .elementor-widget-heading .elementor-heading-title::after {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--ss-accent);
  margin-top: 10px;
}

/* ---------- P4-5: Service-Prozess Top-Rule gelb (Nummern bleiben Sky) ----------
 * Elementor-Post-CSS setzt 0.8px-Vollrahmen auf die Step-Container und
 * uebersteuert die P2-Top-Rule — daher !important + Seitenborder entfernen
 * (P2-Intention "offene Schritte" wiederhergestellt). */
.e-con.ss-ed-step {
  border: 0 !important;
  border-top: 2px solid var(--ss-accent) !important;
}

/* ---------- P4-6: Featured-Artikel Akzentkante links (kein Layout-Shift) ---------- */
.ss-ed-featured-article {
  position: relative;
}
.ss-ed-featured-article::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--ss-accent);
  z-index: 2;
  pointer-events: none;
}

/* ---------- P4-6b: Footer-Logo auf hellem Chip ----------
 * Original-PNG hat dunkelblaue Schrift — auf #133B50 unlesbar;
 * Weiss-Filter zerstoert den Stern. Heller Chip erhaelt die Markenfarben. */
.elementor-element-af88207 img {
  background: #ffffff;
  padding: 10px 14px;
  border-radius: 10px;
  box-sizing: content-box;
}

/* ---------- P4-7: Footer-Link-Hover gelb (dunkler Footer) ---------- */
@media (hover: hover) {
  .elementor-39 .elementor-icon-list-item a:hover {
    color: var(--ss-accent);
  }
}

/* ---------- P4-8: Fokus-Ringe markenkonform ---------- */
a:focus-visible,
button:focus-visible,
.elementor-button:focus-visible {
  outline: 3px solid var(--ss-accent);
  outline-offset: 2px;
}

/* ---------- P4-9: 2-Klick-Google-Maps (Kontakt) ---------- */
.ss-map__stage {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  overflow: hidden;
  background: #f0f8fb;
  border: 1px solid #dce2e6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 24px;
}
.ss-map__stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.ss-map__badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ss-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--ss-shadow-sm);
}
.ss-map__badge svg {
  width: 26px;
  height: 26px;
}
.ss-map__addr {
  font-family: Inter, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #374149;
  margin: 0;
}
.ss-map__load {
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #ffffff;
  background: #1f6e92;
  border: 0;
  border-radius: 10px;
  padding: 12px 26px;
  cursor: pointer;
  box-shadow: var(--ss-shadow-sm);
  transition: background 0.2s var(--ss-ease), transform 0.2s var(--ss-ease),
    box-shadow 0.2s var(--ss-ease);
}
.ss-map__load:hover {
  background: #184f6b;
  transform: translateY(-2px);
  box-shadow: var(--ss-shadow-lg);
}
.ss-map__note {
  font-size: 13px;
  color: #6b7780;
  max-width: 42ch;
  margin: 0;
}
.ss-map__note a {
  color: #1f6e92;
}
.ss-map__ext {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-family: Inter, sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #1f6e92;
  text-decoration: none;
}
.ss-map__ext:hover {
  color: #133b50;
}

/* [P8] Mobile-Maps-Fix: aspect-ratio 4/3 + max-height 340 quetschte den
 * Placeholder-Inhalt (Badge schrumpfte via flex auf ~26px, Hinweistext wurde
 * abgeschnitten — gemessen 375px: Inhalt 280px in 250px Stage). Stattdessen
 * wächst die Stage mit dem Inhalt und hat eine satte Mindesthöhe; der nach
 * Klick geladene iframe (position:absolute, inset:0) übernimmt exakt dieselbe
 * Box. Desktop (≥768px) unverändert 16/10. */
@media (max-width: 767px) {
  .ss-map__stage {
    aspect-ratio: auto;
    min-height: 320px;
    max-height: none;
    padding: 20px 16px;
    gap: 12px;
  }
  .ss-map__badge {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
  }
  .ss-map__badge svg {
    width: 21px;
    height: 21px;
  }
  .ss-map__addr {
    font-size: 15px;
  }
  .ss-map__note {
    max-width: 100%;
  }
  .ss-map__load {
    width: 100%;
    max-width: 320px;
  }
}

/* ============================================================
 * Phase 5 — Final Polish [P5]
 * P5-1 Header-Engstelle 1025–1240px: Telefon-Ghost ausblenden
 *      (tablet/mobil ist er bereits hidden) + Menü-Items enger,
 *      damit die Navigation nicht auf zwei Zeilen bricht.
 * P5-2 Mobile-/Tablet-Menü-Overlay (Xpro, ≤1024): ruhige Liste,
 *      Touch-Targets ≥48px, aktiver Eintrag mit gelber Kante.
 * P5-3 FAQ-Accordion Service (1cbc574): Karten-Optik.
 * P5-4 Rechtsseiten 100/102/103: Lesebreite + Typo-Ruhe.
 * Rollback: diesen Block löschen (Backup design-refinement-pre-phase5.css).
 * ============================================================ */

/* --- P5-1: schmale Desktop-Breiten --- */
@media (min-width: 1025px) and (max-width: 1240px) {
  .elementor-element-hd38ph1 {
    display: none;
  }
  /* !important nötig: Elementor-Widget-CSS (menu_padding) ist spezifischer */
  .elementor-element-7923a20 .xpro-elementor-nav-link.menu-link {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }
  /* Logo eine Stufe kleiner (wie Tablet), sonst fehlen ~9px bei 1025px */
  .elementor-element-hd38l0a img {
    width: 180px !important;
    height: 72px !important;
  }
}

/* --- P5-2: Mobile-/Tablet-Menü-Overlay (nur ≤1024, Desktop-Nav unberührt) ---
 * Selektoren mit Widget-ID-Präfix: Xpro-Plugin- und Elementor-Widget-CSS
 * (responsive_* Settings) sind sonst spezifischer. */
@media (max-width: 1024px) {
  .elementor-38 .elementor-element.elementor-element-7923a20 .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar {
    padding: 84px 24px 32px; /* Luft unter dem Close-Button */
    width: 100%;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
  .elementor-38 .elementor-element.elementor-element-7923a20 .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav {
    width: 100%;
  }
  .elementor-38 .elementor-element.elementor-element-7923a20 .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav > li {
    width: 100%;
  }
  .elementor-38 .elementor-element.elementor-element-7923a20 .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav > li > .xpro-elementor-nav-link.menu-link {
    background: transparent;
    width: 100%;
    padding: 15px 16px;
    min-height: 48px;
    font-size: 17px;
    line-height: 1.2;
    border-bottom: 1px solid #e5e9ec;
    border-left: 3px solid transparent;
    transition: background-color 0.2s var(--ss-ease, ease), color 0.2s var(--ss-ease, ease);
  }
  .elementor-38 .elementor-element.elementor-element-7923a20 .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav > li:first-child > .xpro-elementor-nav-link.menu-link {
    border-top: 1px solid #e5e9ec;
  }
  .elementor-38 .elementor-element.elementor-element-7923a20 .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav > li > .xpro-elementor-nav-link.menu-link:hover {
    background: #f0f8fb;
  }
  .elementor-38 .elementor-element.elementor-element-7923a20 .xpro-elementor-horizontal-menu-responsive-tablet .xpro-elementor-horizontal-navbar-nav > li.current-menu-item > .xpro-elementor-nav-link.menu-link {
    border-left-color: var(--ss-accent, #e6dd5a);
    background: #f0f8fb;
  }
  .elementor-element-7923a20 .xpro-elementor-horizontal-menu-toggler {
    min-width: 44px;
    min-height: 44px;
  }
}

/* --- P5-3: FAQ-Accordion (Service, Widget 1cbc574) --- */
.elementor-element-1cbc574 .elementor-accordion-item {
  background: #ffffff;
  border: 1px solid #e5e9ec;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--ss-shadow-sm, 0 1px 2px rgba(19, 59, 80, 0.06));
  transition: box-shadow 0.25s var(--ss-ease, ease);
}
.elementor-element-1cbc574 .elementor-accordion-item + .elementor-accordion-item {
  margin-top: 12px;
}
.elementor-element-1cbc574 .elementor-tab-title {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border-left: 3px solid transparent;
  transition: background-color 0.2s var(--ss-ease, ease), border-color 0.2s var(--ss-ease, ease);
}
.elementor-element-1cbc574 .elementor-tab-title:hover {
  background: #f0f8fb;
}
.elementor-element-1cbc574 .elementor-tab-title.elementor-active {
  border-left-color: var(--ss-accent, #e6dd5a);
}
.elementor-element-1cbc574 .elementor-tab-title.elementor-active a {
  color: #1f6e92;
}
.elementor-element-1cbc574 .elementor-accordion-icon {
  color: #1f6e92;
  flex-shrink: 0;
  width: auto;
}
.elementor-element-1cbc574 .elementor-tab-content {
  padding: 4px 22px 20px 25px;
  border-top: 1px solid #eef1f3;
}

/* --- P5-4: Rechtsseiten-Lesbarkeit (Cookie-Richtlinie, Impressum, Datenschutz) --- */
.page-id-100 .entry-content,
.page-id-102 .entry-content,
.page-id-103 .entry-content,
.page-id-100 .entry-header,
.page-id-102 .entry-header,
.page-id-103 .entry-header {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.page-id-100 .entry-content h2,
.page-id-102 .entry-content h2,
.page-id-103 .entry-content h2 {
  font-size: 24px;
  margin-top: 2em;
  margin-bottom: 0.6em;
}
.page-id-100 .entry-content p,
.page-id-102 .entry-content p,
.page-id-103 .entry-content p,
.page-id-100 .entry-content a,
.page-id-102 .entry-content a,
.page-id-103 .entry-content a {
  overflow-wrap: anywhere;
}
.page-id-100 .entry-content a,
.page-id-102 .entry-content a,
.page-id-103 .entry-content a {
  color: #1f6e92;
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ==================================================
   Phase 6 — Legal & Consent Layer [P6]
   ================================================== */

/* [P6-1] Formular-Datenschutz-/Turnstile-Hinweis (Hook wpforms_display_submit_before).
   Präfix div.wpforms-container-full nötig — WPForms-Core-CSS ist spezifischer. */
div.wpforms-container-full .ss-form-note{font-size:14px;line-height:1.6;color:#374149;margin:2px 0 10px;text-align:left;}
div.wpforms-container-full .ss-form-note p{font-size:14px;margin:0 0 8px;}
div.wpforms-container-full .ss-form-note a{color:#1F6E92;text-decoration:underline;}
div.wpforms-container-full .ss-form-note p.ss-form-note__turnstile{font-size:12.5px;color:#5b6770;}

/* [P6-2] MwSt-Preishinweise (Service 19 / Fahrzeuge 20) */
.ss-price-note{font-size:13.5px;line-height:1.5;color:#5b6770;margin:14px 0 0;}

/* --- legal-2026-10: Mobile-Layout-Viewport (Cookie-Banner sichtbar) ---
   Der geschlossene Xpro-Drawer (.xpro-elementor-horizontal-navbar-wrapper,
   position:fixed, translateX(100%)) zaehlte als Overflow und weitete auf
   Mobile das Layout-Viewport auf 2x Breite: Complianz-Banner (width:100%)
   lag halb ausserhalb. clip statt hidden: kein Scroll-Container, sticky bleibt. */
@media (max-width: 1024px) {
  html {
    overflow-x: clip;
  }
}

/* ==================================================
   Phase 9 — Service-Ablauf als Route [P9]
   Service 19, Section 01818e7 ("So einfach geht's"): Kopf links (sticky
   ab 1025px), rechts vier Schritte als vertikale Route. Nummern-Headings
   (1bdb7c0, f5c808e, 04e2cef, fed04b1) werden zu Markern, letzter
   Schritt = Ziel (Gelb nur als Flaeche, Text Ink). 2026-10-24.
   ================================================== */

@media (min-width: 1025px) {
  .e-con.ss-route-head {
    position: sticky;
    top: 140px;
    align-self: flex-start;
  }
}

.ss-route-head .elementor-widget-heading h2.elementor-heading-title {
  max-width: 13ch;
}

.e-con.ss-route-step {
  position: relative;
}

/* Verbindungslinie vom Marker bis zum naechsten Schritt */
.e-con.ss-route-step:not(.ss-route-step--goal)::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 52px;
  bottom: 8px;
  /* Elementor setzt auf .e-con::before eine feste height (Overlay) */
  height: auto !important;
  width: 2px;
  border-radius: 1px;
  background: #bce0ee;
}

/* Nummer -> Marker */
.e-con.ss-route-step > .elementor-widget-heading:first-child {
  position: absolute;
  left: 0;
  top: 0;
  width: auto;
  margin: 0;
}

.e-con.ss-route-step > .elementor-widget-heading:first-child .elementor-heading-title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #1f6e92;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.e-con.ss-route-step--goal > .elementor-widget-heading:first-child .elementor-heading-title {
  background: var(--ss-accent, #e6dd5a);
  color: #141a1f !important;
}

/* Titel optisch auf Markermitte */
.e-con.ss-route-step > .elementor-widget-heading:nth-child(2) {
  margin-top: 9px;
}

.e-con.ss-route-step .elementor-widget-text-editor {
  max-width: 52ch;
}

.e-con.ss-route-step .elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}

/* ==================================================
   Phase 10 — Mobile-UX [P10] (2026-10-24)
   Aktionsleiste unten (Footer 39, Container mux0bar, nur <=767px),
   Formular-Tipp-Ziele (Kontakt 22), Footer-Tipp-Ziele, Scroll-Top.
   Desktop/Tablet unberuehrt (alles in max-width:767px, Leiste sonst aus).
   ================================================== */

/* [P10-1] Aktionsleiste "Jetzt anrufen" / "Termin anfragen" */
.elementor-39 .elementor-element.ss-actionbar {
  display: none;
}

@media (max-width: 767px) {
  .elementor-39 .elementor-element.ss-actionbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 990; /* unter Menue-Overlay und Complianz-Banner */
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 20px rgba(19, 59, 80, 0.18);
  }
  .elementor-39 .ss-actionbar > .elementor-widget-button {
    flex: 1 1 0;
    min-width: 0;
  }
  .elementor-39 .ss-actionbar .elementor-button {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    white-space: nowrap;
  }
  /* Sehr schmale Geraete (320-359px): Beschriftung passt einzeilig */
  @media (max-width: 359px) {
    .elementor-39 .elementor-element.ss-actionbar .elementor-widget-button .elementor-button {
      font-size: 15px;
      padding-left: 10px;
      padding-right: 10px;
    }
  }
  /* Platz unter dem Footer, damit die Leiste nichts verdeckt */
  body {
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  }
  /* Solange das Cookie-Banner oder das Menue offen ist: Leiste aus
     (Banner-Buttons bleiben allein und gleichwertig, ADR-008) */
  body:has(.cmplz-cookiebanner.cmplz-show) .elementor-39 .elementor-element.ss-actionbar,
  body:has(.xpro-elementor-horizontal-navbar-wrapper.active) .elementor-39 .elementor-element.ss-actionbar,
  body:has(:is(input, textarea, select):focus) .elementor-39 .elementor-element.ss-actionbar {
    display: none; /* auch bei offener Bildschirmtastatur */
  }
  /* Astra-Scroll-Top ueber der Leiste */
  #ast-scroll-top {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
}

/* [P10-2] Kontaktformular: Felder >= 48px (Touch bis 1024), Absenden volle Breite (Handy) */
@media (max-width: 1024px) {
  .ss-card-static div.wpforms-container-full .wpforms-form input[type="text"],
  .ss-card-static div.wpforms-container-full .wpforms-form input[type="email"],
  .ss-card-static div.wpforms-container-full .wpforms-form input[type="tel"],
  .ss-card-static div.wpforms-container-full .wpforms-form select {
    min-height: 48px;
  }
}
@media (max-width: 767px) {
  div.wpforms-container-full .wpforms-form .wpforms-submit-container button[type="submit"] {
    width: 100%;
    min-height: 52px;
  }
  /* Sprungziel "Termin" unter dem Sticky-Header */
  #termin {
    scroll-margin-top: 96px;
  }
}

/* [P10-3] Footer: Linklisten als Tipp-Ziele (>= 44px), Rechtszeile mit Luft (Touch bis 1024) */
@media (max-width: 1024px) {
  .elementor-39 .elementor-widget-icon-list .elementor-icon-list-item > a {
    min-height: 44px;
    align-items: center;
  }
  /* Elementor-"space_between" (Inline-CSS post-39) ersetzt durch Mindesthoehe */
  .elementor-39 .elementor-icon-list-items:not(.elementor-inline-items) > .elementor-icon-list-item {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    min-height: 44px;
  }
  .elementor-39 .elementor-element-18aaddd .elementor-icon-list-items {
    column-gap: 20px;
  }
}

/* [P10-4] Restliche Tipp-Ziele >= 44px (Buttons 42px, Kontakt-Icon-Boxen, Karte).
   Icon-Box-Links: Trefferflaeche per Padding, negative Margin haelt das Layout.
   Touch-Breiten bis 1024 (Tablet), Desktop unberuehrt. */
@media (max-width: 1024px) {
  .elementor-widget-button .elementor-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .elementor-22 .elementor-element-238b46d .elementor-icon-box-title a,
  .elementor-22 .elementor-element-a83c206 .elementor-icon-box-title a {
    display: inline-block;
    padding: 13px 0;
    margin: -13px 0;
  }
  .elementor-22 .elementor-element-238b46d .elementor-icon-box-icon a,
  .elementor-22 .elementor-element-a83c206 .elementor-icon-box-icon a {
    padding: 12px;
    margin: -12px;
  }
  .ss-map__load {
    min-height: 48px;
  }
  /* Header-Button "Termin anfragen" (Tablet sichtbar, Handy ausgeblendet) */
  .elementor-38 .elementor-element.elementor-element-ceb95a2 .xpro-elementor-button.xpro-elementor-button {
    padding-top: 15px;
    padding-bottom: 15px;
  }
  div.wpforms-container-full .wpforms-form .wpforms-submit-container button[type="submit"] {
    min-height: 48px;
  }
  .ss-map__ext {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}