.elementor-kit-6{--e-global-color-primary:#9CC095;--e-global-color-secondary:#3A4B41;--e-global-color-text:#EEF5EC;--e-global-color-accent:#6BA9C2;--e-global-color-sn_salbei_hell:#CFE3C8;--e-global-color-sn_salbei_tief:#6A9165;--e-global-color-sn_hybrid_hell:#B4D6E1;--e-global-color-sn_tinte2:#BECDBF;--e-global-color-sn_grund:#2F3E36;--e-global-color-sn_fuss:#212C26;--e-global-typography-primary-font-family:"Archivo";--e-global-typography-primary-font-size:3.1rem;--e-global-typography-primary-font-weight:800;--e-global-typography-primary-line-height:1.08em;--e-global-typography-primary-letter-spacing:-0.6px;--e-global-typography-secondary-font-family:"Archivo";--e-global-typography-secondary-font-size:2.1rem;--e-global-typography-secondary-font-weight:700;--e-global-typography-secondary-line-height:1.14em;--e-global-typography-secondary-letter-spacing:-0.4px;--e-global-typography-text-font-family:"Archivo";--e-global-typography-text-font-size:1rem;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.62em;--e-global-typography-text-letter-spacing:0px;--e-global-typography-accent-font-family:"Archivo";--e-global-typography-accent-font-size:0.95rem;--e-global-typography-accent-font-weight:600;--e-global-typography-accent-line-height:1.4em;--e-global-typography-accent-letter-spacing:0.2px;--e-global-typography-sn_h3-font-family:"Archivo";--e-global-typography-sn_h3-font-size:1.26rem;--e-global-typography-sn_h3-font-weight:700;--e-global-typography-sn_h3-line-height:1.28em;--e-global-typography-sn_h3-letter-spacing:-0.2px;--e-global-typography-sn_label-font-family:"Archivo";--e-global-typography-sn_label-font-size:0.74rem;--e-global-typography-sn_label-font-weight:700;--e-global-typography-sn_label-text-transform:uppercase;--e-global-typography-sn_label-line-height:1.3em;--e-global-typography-sn_label-letter-spacing:1.6px;--e-global-typography-sn_lead-font-family:"Archivo";--e-global-typography-sn_lead-font-size:1.06rem;--e-global-typography-sn_lead-font-weight:400;--e-global-typography-sn_lead-line-height:1.6em;--e-global-typography-sn_lead-letter-spacing:0px;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1360px;}.e-con{--container-max-width:1360px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-6{--e-global-typography-primary-font-size:2.73rem;--e-global-typography-secondary-font-size:1.85rem;--e-global-typography-text-font-size:1rem;--e-global-typography-accent-font-size:0.95rem;--e-global-typography-sn_h3-font-size:1.26rem;--e-global-typography-sn_label-font-size:0.74rem;--e-global-typography-sn_lead-font-size:1.06rem;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-6{--e-global-typography-primary-font-size:2.42rem;--e-global-typography-secondary-font-size:1.64rem;--e-global-typography-text-font-size:0.96rem;--e-global-typography-accent-font-size:0.91rem;--e-global-typography-sn_h3-font-size:1.21rem;--e-global-typography-sn_label-font-size:0.71rem;--e-global-typography-sn_lead-font-size:1.02rem;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ==========================================================================
   AUTOHAUS SCHNEIDER – GLOBALES CSS
   Liegt in Elementor > Website-Einstellungen > Benutzerdefiniertes CSS (Kit 6).
   Quelle: scripts/elementor/global.css  ·  Ausspielen: node scripts/elementor/kit.js

   ⚠ NICHTS HIERVON GEHOERT AUF EINE EINZELNE SEITE.
   Namensraum: alle eigenen Klassen beginnen mit sn-

   Alle Rastermasse sind am 02.09.2026 aus dem Entwurf /entwurf-a/ gemessen
   und auf die Containerbreite 1360 umgerechnet.
   ========================================================================== */

:root{
  --sn-salbei:#9CC095;          /* am 02.09.2026 auf Kundenwunsch aufgehellt */
  --sn-salbei-hell:#CFE3C8;
  --sn-salbei-tief:#6A9165;
  --sn-hybrid:#6BA9C2;
  --sn-hybrid-hell:#B4D6E1;

  --sn-tinte:#EEF5EC;
  --sn-tinte2:#BECDBF;
  --sn-karte:#3A4B41;
  --sn-karte-tief:#334339;
  --sn-kante:rgba(255,255,255,.16);

  --sn-verlauf:linear-gradient(120deg,#7CB985 0%,#5A9EB8 100%);
  /* Kachelverlauf kraeftiger als im Entwurf - der Kunde wollte, dass die
     Kacheln staerker hervorstechen (Rueckmeldung 02.09.2026). */
  --sn-kachel-verlauf:linear-gradient(150deg,
      rgba(156,192,149,.30) 0%,rgba(107,169,194,.20) 50%,rgba(255,255,255,.04) 100%);
  --sn-kachel-verlauf-stark:linear-gradient(150deg,
      rgba(156,192,149,.46) 0%,rgba(107,169,194,.30) 52%,rgba(255,255,255,.06) 100%);

  --sn-r:22px;
  --sn-r-gross:28px;
  --sn-schatten:0 26px 52px -38px rgba(0,0,0,.92);
}

/* ==========================================================================
   1 · GRUND
   ========================================================================== */
html{
  background:
    radial-gradient(72% 56% at 12% 2%,rgba(156,192,149,.24) 0%,transparent 60%),
    radial-gradient(62% 50% at 92% 16%,rgba(107,169,194,.20) 0%,transparent 62%),
    linear-gradient(180deg,#3A4A41 0%,#2F3E36 42%,#35443B 100%) no-repeat fixed;
  background-size:cover;
}
body{background:transparent;color:var(--sn-tinte)}
.e-con{--container-max-width:1360px}

h1,h2,h3,h4{color:#fff;letter-spacing:-.015em}
p{color:var(--sn-tinte2);line-height:1.62;margin:0}
a{color:var(--sn-salbei-hell)}

.sn-abschnitt{padding-top:96px;padding-bottom:96px}
/* ⚠ Seitenrand. Elementor liess dem Inhalt zwischen rund 1050 und 1400 px
   Fensterbreite nur 10 px Luft zum Fensterrand - am 09.09.2026 gemessen:
   .e-con-inner begann bei 10 px, die Sprechblasen auf der Ankaufseite bei 19.
   Das sah aus, als waere die Seite abgeschnitten. Dieselbe Formel wie bei
   Kopf- und Markenzeile, damit Inhalt und Kopfzeile buendig stehen. */
.sn-abschnitt{padding-left:0!important;padding-right:0!important}
.sn-abschnitt > .e-con-inner{
  max-width:min(1500px,calc(100% - 72px))!important;margin-left:auto;margin-right:auto;
}

/* Abschnittslabel. Im Entwurf ist das eine Pille, kein unterstrichenes Wort -
   am 02.09.2026 nachgemessen: rgba(156,192,149,.16), 12 px, Radius 99. */
.sn-label{align-items:flex-start}
.sn-label .elementor-heading-title{
  display:inline-flex;align-items:center;
  background:rgba(156,192,149,.16);
  color:var(--sn-salbei-hell)!important;
  font-size:.76rem!important;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;line-height:1.2!important;
  padding:8px 16px;border-radius:99px;
}
/* Helle Fassung - im Entwurf auf Foto- und Standortabschnitten */
.sn-label-hell .elementor-heading-title{
  background:rgba(255,255,255,.16);color:#fff!important;
}
/* Schlichte Versalienzeile ueber der Buehnenueberschrift (keine Pille) */
.sn-oben .elementor-heading-title{
  font-size:.74rem!important;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--sn-salbei-hell)!important;line-height:1.4!important;
}
/* Kleine Auszeichnung innerhalb einer Karte - schlichte Versalien */
.sn-tag .elementor-heading-title{
  font-size:.66rem!important;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sn-salbei-hell)!important;line-height:1.3!important;
}
/* Rolle bzw. Auszeichnung als kleine Pille mit Kante */
.sn-rolle{align-items:flex-start}
.sn-rolle .elementor-heading-title{
  display:inline-flex;font-size:.68rem!important;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:#fff!important;line-height:1.2!important;
  padding:5px 13px;border-radius:99px;border:1px solid var(--sn-kante);
}

/* Feine Linie unter einer Kachelueberschrift - im Entwurf ein eigenes span,
   hier als Pseudoelement, damit kein zusaetzliches Widget noetig ist. */
.sn-mit-linie .elementor-heading-title{position:relative;padding-bottom:12px;display:block}
.sn-mit-linie .elementor-heading-title::after{
  content:"";position:absolute;left:0;bottom:0;width:34px;height:2px;
  background:var(--sn-verlauf);border-radius:2px;opacity:.85;
}

/* ==========================================================================
   2 · KACHELN
   ========================================================================== */
.sn-kachel{
  position:relative;overflow:hidden;
  background-color:var(--sn-karte);
  background-image:var(--sn-kachel-verlauf);
  border:1px solid var(--sn-kante);
  border-radius:var(--sn-r);
  box-shadow:var(--sn-schatten);
  padding:28px 26px 30px;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.sn-kachel:hover{
  transform:translateY(-5px);
  border-color:rgba(156,192,149,.48);
  box-shadow:0 34px 64px -34px rgba(0,0,0,.95);
}
.sn-kachel-stark{background-image:var(--sn-kachel-verlauf-stark)}
/* helle Kante oben. ::before gehoert bei Containern Elementor, ::after ist frei. */
.sn-kachel::after{
  content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent);
  pointer-events:none;
}
.sn-kachel h3.elementor-heading-title{font-size:1.26rem;margin:0}
.sn-kachel p{font-size:.95rem}
/* Der Link am Kachelfuss steht unten, auch wenn der Text kurz ist */
.sn-kachel > .elementor-widget-button:last-child{margin-top:auto;padding-top:14px}

/* ==========================================================================
   3 · RASTER
   Elementor-Container sind flex. Fuer gleich hohe Kacheln in sauberen Spalten
   ist ein echtes Grid verlaesslicher. Die Reihen sind immer "full" Container
   INNERHALB eines boxed Abschnitts, damit die Kacheln direkte Kinder bleiben.
   ========================================================================== */
[class*="sn-"][class*="-grid"],
.sn-kaskade,.sn-kw-bahn,.sn-hero-kacheln,.sn-ws-fuss,.sn-note,.sn-ank-liste,.sn-so-zeilen{
  display:grid!important;align-items:stretch;width:100%;
}
[class*="sn-"][class*="-grid"] > .e-con,
.sn-kaskade > .e-con,.sn-kw-bahn > .e-con,.sn-hero-kacheln > .e-con,
.sn-ws-fuss > .e-con,.sn-note > .e-con,.sn-ank-liste > .e-con,.sn-so-zeilen > .e-con{
  margin:0;width:auto!important;max-width:none!important;
}
.sn-voll{display:block!important;width:100%}

/* ==========================================================================
   4 · SECHSECK MIT SYMBOL
   Auf Kundenwunsch vom 02.09.2026 deutlich groesser als im Entwurf.
   ========================================================================== */
.sn-hexagon .elementor-icon{
  width:78px;height:78px;display:flex;align-items:center;justify-content:center;
  background:var(--sn-verlauf);
  clip-path:polygon(50% 0%,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);
  box-shadow:0 16px 34px -18px rgba(0,0,0,.85);
}
.sn-hexagon .elementor-icon svg{width:34px;height:34px;fill:#22302A}
.sn-hexagon-klein .elementor-icon{width:58px;height:58px}
.sn-hexagon-klein .elementor-icon svg{width:26px;height:26px}
.sn-hexagon{align-items:flex-start}

/* ==========================================================================
   5 · KNOEPFE
   Elementor legt fuer jedes Element eine eigene Regel in post-<seite>.css an,
   die NACH dem Kit-CSS geladen wird. Ohne !important gewinnt immer die Seite.
   ========================================================================== */
.sn-btn .elementor-button{
  background-color:#7CB985!important;             /* echte Farbe unter dem Verlauf */
  background-image:var(--sn-verlauf)!important;
  color:#1E2A24!important;border:0!important;border-radius:999px!important;
  padding:15px 30px!important;font-weight:700!important;font-size:.95rem!important;
  box-shadow:0 16px 32px -16px rgba(90,158,184,.9);white-space:nowrap;
}
.sn-btn .elementor-button:hover{filter:brightness(1.09);transform:translateY(-2px)}
.sn-btn-hell .elementor-button{
  background-image:none!important;background-color:transparent!important;
  color:var(--sn-tinte)!important;border:1px solid var(--sn-kante)!important;
  border-radius:999px!important;padding:13px 26px!important;font-weight:600!important;
  font-size:.92rem!important;white-space:nowrap;
}
.sn-btn-hell .elementor-button:hover{
  border-color:var(--sn-salbei)!important;color:#fff!important;
  background-color:rgba(255,255,255,.05)!important;
}
.sn-link .elementor-button{
  background-image:none!important;background-color:transparent!important;
  border:0!important;padding:0!important;color:var(--sn-salbei-hell)!important;
  font-weight:700!important;font-size:.92rem!important;box-shadow:none!important;
}
.sn-link .elementor-button:hover{color:#fff!important}
.sn-link{align-items:flex-start}
.sn-knopfreihe{align-items:center}

/* ==========================================================================
   6 · BILDER
   .elementor img{height:auto} schlaegt eigene Hoehen - daher !important.
   ========================================================================== */
.sn-bild img{border-radius:var(--sn-r);display:block;width:100%}
.sn-bild-voll img{height:100%!important;object-fit:cover}
.sn-marke img{height:26px!important;width:auto!important;
  background:#fff;border-radius:9px;padding:6px 12px!important}
/* ⚠ Bis 24.09.2026 stand hier eine Wortmarke fuer TGB - inzwischen liegt das
   Logo vor (tgb-germany.de). Erst auf 20 px gesetzt, das war zu klein
   (Alena) - jetzt auf derselben Hoehe wie die anderen drei. */
.sn-marke-tgb img{height:26px!important;padding:6px 12px!important}

/* ==========================================================================
   7 · BUEHNE
   Entwurf: hero-grid 56/44, Abstand 22. Vier Bildkacheln 2x2, Abstand 14.
   ========================================================================== */
.sn-hero-grid{grid-template-columns:minmax(0,56fr) minmax(0,44fr);gap:22px;align-items:start}
.sn-hero-panel{gap:18px}
.sn-hero-panel h1.elementor-heading-title{font-size:3.1rem;line-height:1.06}
.sn-hero-kacheln{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}

.sn-hk{
  position:relative;overflow:hidden;border-radius:var(--sn-r);
  min-height:304px;padding:20px 20px 18px!important;
  border:1px solid var(--sn-kante);justify-content:flex-end;
  transition:transform .22s ease,border-color .22s ease;
}
.sn-hk::after{                /* Schleier ueber dem Foto, damit der Text traegt */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(28,38,32,.18) 0%,rgba(28,38,32,.62) 46%,rgba(24,33,28,.93) 100%);
}
.sn-hk > *{position:relative;z-index:1}
.sn-hk:hover{transform:translateY(-4px);border-color:rgba(156,192,149,.55)}
.sn-hk .elementor-widget-icon{margin-bottom:auto}
.sn-hk h3.elementor-heading-title{font-size:1.3rem;margin:0}
.sn-hk-sub p{font-size:.88rem;color:var(--sn-tinte2)}

/* Werkstattband unter der Buehne */
.sn-wsbanner{
  position:relative;overflow:hidden;border-radius:var(--sn-r-gross);
  min-height:288px;justify-content:flex-end;
  padding:34px 40px 36px!important;border:1px solid var(--sn-kante);
}
.sn-wsbanner::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(22,30,25,.94) 0%,rgba(22,30,25,.80) 44%,rgba(22,30,25,.28) 100%);
}
.sn-wsbanner > *{position:relative;z-index:1}
.sn-wsb-text{max-width:640px}
.sn-wsb-text h2.elementor-heading-title{font-size:1.9rem}

/* ==========================================================================
   8 · FAHRZEUGBAHN
   Entwurf: sechs Karten a 310 px, Abstand 20, seitlich scrollbar.
   ========================================================================== */
.sn-kw-kopf{display:flex!important;flex-direction:row;align-items:flex-end;
  justify-content:space-between;gap:24px;width:100%}
.sn-kw-kopf > .e-con{width:auto!important}
.sn-kw-steuer{flex:0 0 auto}
.sn-kw-bahn{
  grid-auto-flow:column;grid-auto-columns:310px;gap:20px;
  overflow-x:auto;padding-bottom:10px;scroll-snap-type:x proximity;
}
.sn-kw-bahn > .e-con{scroll-snap-align:start}
.sn-kw-bahn::-webkit-scrollbar{height:8px}
.sn-kw-bahn::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:99px}
.sn-kw-karte{padding:0!important;display:flex;flex-direction:column}
.sn-kw-bild img{border-radius:var(--sn-r) var(--sn-r) 0 0;height:190px!important;object-fit:cover}
.sn-kw-txt{padding:20px 22px 22px!important;gap:8px;flex:1}
.sn-kw-meta{font-size:.85rem!important;color:var(--sn-tinte2)}
.sn-kw-fuss{margin-top:auto;padding-top:12px;border-top:1px solid var(--sn-kante);
  align-items:center;width:100%}
.sn-kw-preis{font-weight:700;color:#fff}

/* ==========================================================================
   9 · TREPPE UND KASKADE
   Entwurf: Versatz 0/38/76/114 bei gleicher Kachelhoehe - dadurch ist die
   Stufe oben UND unten gleich. Genau das hatte der Kunde bemaengelt.
   ========================================================================== */
.sn-sz-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.sn-vt-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.sn-treppe > .e-con{align-self:start}
.sn-treppe > .e-con:nth-child(2){margin-top:38px}
.sn-treppe > .e-con:nth-child(3){margin-top:76px}
.sn-treppe > .e-con:nth-child(4){margin-top:114px}
.sn-sz-karte{min-height:288px;display:flex;flex-direction:column}
.sn-vt{min-height:322px;display:flex;flex-direction:column}

/* Bereichskacheln: fuenf Spalten, gleiche Hoehe, KEINE Stufe
   (ausdruecklicher Kundenwunsch vom 31.08.2026). */
.sn-kaskade{grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.sn-bk{padding:0!important;display:flex;flex-direction:column;min-height:378px;
  border-radius:20px}
.sn-bk-bild img{border-radius:20px 20px 0 0;height:132px!important;object-fit:cover}
.sn-bk .sn-bk-ic{margin:-38px 0 0 20px;z-index:2;position:relative}
.sn-bk-ic .elementor-icon{width:52px;height:52px}
.sn-bk-ic .elementor-icon svg{width:23px;height:23px}
.sn-bk-txt{padding:12px 20px 22px!important;gap:8px;flex:1}
.sn-bk-txt h3.elementor-heading-title{font-size:1.1rem}
.sn-bk-txt p{font-size:.88rem}

/* ==========================================================================
   10 · ZITAT · TEAM
   ========================================================================== */
.sn-st-grid{grid-template-columns:minmax(0,42.5fr) minmax(0,57.5fr);gap:64px;align-items:center}
.sn-st-bild img{height:520px!important;object-fit:cover}
.sn-zitat{font-size:1.34rem;line-height:1.55;color:#fff;font-weight:500}
.sn-zitat em{color:var(--sn-salbei-hell);font-style:italic}
.sn-st-wer{color:var(--sn-tinte2)}
.sn-st-wer strong{color:#fff}

.sn-team-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.sn-team-karte{padding:0!important;display:flex;flex-direction:column}
.sn-portrait{
  height:230px;margin:14px 14px 0;border-radius:16px;
  background:linear-gradient(150deg,rgba(156,192,149,.20),rgba(107,169,194,.12));
  border:1px dashed var(--sn-kante);
  display:flex!important;align-items:center;justify-content:center;
}
.sn-portrait p{margin:0;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
.sn-team-txt{padding:18px 24px 24px!important;gap:6px}
.sn-platzhalter .elementor-heading-title{color:var(--sn-tinte2)!important;font-style:italic}
.sn-team-kontakt{font-weight:700}

/* ==========================================================================
   11 · WERKSTATT · BEWERTUNGEN · SCHNELLZUGRIFF
   ========================================================================== */
.sn-ws-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.sn-ws{display:flex;flex-direction:column;gap:10px}
.sn-ws h3.elementor-heading-title{font-size:1.06rem}
.sn-ws p{font-size:.88rem}
.sn-ws-fuss{grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:center;
  margin-top:26px;padding:26px 28px;border:1px solid var(--sn-kante);
  border-radius:var(--sn-r);background:rgba(255,255,255,.04)}

.sn-note{grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center;
  padding:22px 26px;border:1px solid var(--sn-kante);border-radius:var(--sn-r);
  background:rgba(255,255,255,.04);margin-bottom:6px}
.sn-note-zahl .elementor-heading-title{
  font-size:2.6rem!important;color:var(--sn-salbei)!important;line-height:1!important}
.sn-bew-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.sn-sterne{color:var(--sn-salbei);letter-spacing:.16em;font-size:1.05rem}
.sn-bewertung{font-style:italic;color:var(--sn-tinte)}
.sn-bew-wer{font-weight:700;color:#fff;font-size:.9rem}

.sn-ap-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.sn-ap-karte ul{list-style:none;padding:0;margin:0}
.sn-ap-karte li{padding:9px 0;border-bottom:1px solid var(--sn-kante);font-size:.93rem}
.sn-ap-karte li:last-child{border-bottom:0}

/* ==========================================================================
   12 · STANDORT · ANKAUF
   ========================================================================== */
.sn-so-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;align-items:center}
.sn-so-zeilen{grid-template-columns:1fr;gap:0}
.sn-so-zeile{
  display:flex!important;flex-direction:row;gap:20px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--sn-kante);width:100%;
}
.sn-so-zeile:last-child{border-bottom:0}
.sn-so-bez{flex:0 0 44%;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--sn-salbei);font-weight:700}
.sn-so-wert{color:#fff}
.sn-so-wert a{color:#fff;text-decoration:none;font-weight:700}
.sn-so-bild img{height:560px!important;object-fit:cover}

.sn-ank-grid{grid-template-columns:minmax(0,54fr) minmax(0,46fr);gap:70px;align-items:start}
.sn-ank-liste{grid-template-columns:1fr;gap:0}
.sn-ank-punkt{
  display:flex!important;flex-direction:row;gap:18px;align-items:flex-start;
  padding:16px 0;border-bottom:1px solid var(--sn-kante);width:100%;
}
.sn-ank-punkt:last-child{border-bottom:0}
.sn-ank-punkt .elementor-widget-icon{flex:0 0 auto}
.sn-ank-punkt h3.elementor-heading-title{font-size:1.05rem}
.sn-ank-punkt p{font-size:.92rem}
.sn-formkarte{padding:32px 32px 34px!important;position:sticky;top:24px}

/* ==========================================================================
   13 · FORMULARE
   Gilt fuer Elementor Pro UND fuer die Formulare des Autoforce1-Plugins.
   Das Plugin bringt lila Akzente (#B500FF) und "Chalkboard SE" mit.
   ========================================================================== */
.sn-formular .elementor-field-group label,.sn-formular label{
  color:var(--sn-tinte2);font-size:.8rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:7px;
}
.sn-formular input[type=text],.sn-formular input[type=tel],
.sn-formular input[type=email],.sn-formular input[type=number],
.sn-formular select,.sn-formular textarea,
.autoforce1-form input,.autoforce1-form select,.autoforce1-form textarea{
  background:rgba(255,255,255,.07)!important;border:1px solid var(--sn-kante)!important;
  border-radius:14px!important;color:#fff!important;padding:15px 17px!important;
  font-size:1rem!important;width:100%;
}
.sn-formular input::placeholder,.sn-formular textarea::placeholder{color:rgba(255,255,255,.42)}
.sn-formular input:focus,.sn-formular select:focus,.sn-formular textarea:focus{
  outline:none!important;border-color:var(--sn-salbei)!important;
  box-shadow:0 0 0 3px rgba(156,192,149,.20)!important;
}
.sn-formular button[type=submit],.sn-formular .elementor-button[type=submit],
.autoforce1-form button,.autoforce1-form input[type=submit]{
  background-color:#7CB985!important;background-image:var(--sn-verlauf)!important;
  color:#1E2A24!important;border:0!important;border-radius:999px!important;
  padding:15px 32px!important;font-weight:700!important;cursor:pointer;width:100%;
}
body .mobile-basisdaten,body .desktop-basisdaten,
body .autoforce1-liste,body .autoforce1-detail{
  font-family:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif!important;
}
body [style*="#B500FF"],body [style*="#b500ff"]{color:var(--sn-salbei)!important}

/* ==========================================================================
   14 · KOPFZEILE, MARKENBAND UND FUSS (Theme-Builder-Vorlagen)
   Das Markenband ist ein Vorkopf und liegt UEBER der Zeile mit Logo, Menue
   und Knopf (Alena, 17.09.2026 - vorher stand es darunter).
   ========================================================================== */
.sn-kopf-reihe{background:rgba(38,50,44,.92);backdrop-filter:blur(14px)}
.sn-kopf-reihe > .e-con-inner{flex-direction:row;align-items:center;gap:26px;
  flex-wrap:nowrap;max-width:min(1500px,calc(100% - 72px))!important}
/* ⚠ Elementor gibt jedem Kind-Container width:100% - in einer Zeile teilen sich
   Logo und Menue die Breite sonst haelftig. */
.sn-kopf-reihe > .e-con-inner > .e-con,
.sn-markenband > .e-con-inner > .e-con{width:auto!important;flex:0 0 auto!important;max-width:none!important}
.sn-kopf-reihe .sn-logo img{height:42px!important;width:auto!important}
.sn-kopf-rechts{margin-left:auto!important;flex-direction:row;align-items:center;gap:14px}
.sn-kopf-rechts .elementor-nav-menu--main{flex-wrap:nowrap!important;width:auto}
.sn-kopf-rechts ul.elementor-nav-menu{flex-wrap:nowrap!important}
.sn-kopf-rechts .elementor-widget-nav-menu{flex:0 0 auto;width:auto!important}
.sn-kopf-rechts .elementor-nav-menu .elementor-item{
  font-size:.93rem!important;line-height:1.4!important;letter-spacing:0!important;
  font-weight:600!important;padding:9px 11px!important;white-space:nowrap;
  color:var(--sn-tinte)!important;
}
.sn-kopf-rechts .elementor-nav-menu .elementor-item:hover,
.sn-kopf-rechts .elementor-nav-menu .current-menu-item > .elementor-item{color:var(--sn-salbei-hell)!important}
.sn-kopf-rechts .elementor-nav-menu--dropdown{background:#2C3A32;border:1px solid var(--sn-kante);border-radius:14px}
.sn-kopf-rechts .elementor-nav-menu--dropdown .elementor-item{font-size:.9rem!important;padding:10px 16px!important}

.sn-markenband{border-bottom:1px solid var(--sn-kante);background:rgba(24,32,28,.9)}
/* ⚠ Das Aufklappmenue lag HINTER dem Markenband. Beide standen auf
   z-index:auto, also gewann das Band, weil es spaeter im Dokument kommt.
   "Toyota" ragte noch ueber das Band hinaus und war anklickbar, "Suzuki"
   lag genau darunter und liess sich nicht treffen (Alena, 09.09.2026).
   Die Kopfzeile bekommt darum einen eigenen Stapel ueber dem Inhalt. */
header.elementor-location-header{position:relative!important;z-index:200!important}
/* Das Markenband liegt INNERHALB der Kopfzeile, direkt unter der Menuezeile.
   Die Kopfzeile anzuheben genuegt darum nicht - die Menuezeile muss im
   Inneren ueber dem Band stehen. */
.sn-kopf-reihe{position:relative!important;z-index:30!important}
.sn-markenband{position:relative!important;z-index:1!important}
.elementor-nav-menu .sub-menu,
.elementor-nav-menu--main .elementor-nav-menu--dropdown{z-index:210!important}

/* ⚠ Das Aufklappen haengt bei Elementor an SmartMenus (JavaScript). Am
   09.09.2026 im Browser gemessen: der Zeiger stand auf "Neuwagen"
   (li:hover = true), das Untermenue blieb trotzdem auf display:none.
   Deshalb hier eine reine CSS-Oeffnung darunter - sie greift auch, wenn das
   Skript spaet laedt oder gar nicht anspringt. :focus-within nimmt die
   Tastaturbedienung gleich mit.
   Nur am Desktop: unter 1025 px macht Elementor daraus ein Burgermenue. */
@media(min-width:1025px){
  .elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children:hover > ul.sub-menu,
  .elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children:focus-within > ul.sub-menu{
    display:block!important;
  }
}
.sn-markenband > .e-con-inner{flex-direction:row;align-items:center!important;gap:16px;
  max-width:min(1500px,calc(100% - 72px))!important}
/* ⚠ Die drei Kind-Container dehnen sich auf Bandhoehe (align-items:normal =
   stretch) und setzen ihren Inhalt oben an - "VERTRAGSPARTNER" stand 13 px
   hoeher als die Logos (Alena, 17.09.2026). Darum die Kinder in der Spalte
   mittig ausrichten. */
.sn-markenband > .e-con-inner > .e-con{justify-content:center!important;align-self:center!important;
  padding-top:0!important;padding-bottom:0!important}
.sn-marken-label .elementor-heading-title{margin:0!important;line-height:1!important}
.sn-marken-hinweis p{margin:0!important;line-height:1!important}
.sn-marken-label .elementor-heading-title,
.sn-marken-hinweis p{font-size:.74rem!important;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sn-tinte2)!important;font-weight:700}
.sn-marken-hinweis{margin-left:auto!important}
.sn-marken-chips{padding-left:0!important}
.sn-marken-chips{flex-direction:row;align-items:center;gap:10px}

.sn-fuss-oben{background:#212C26;border-top:1px solid var(--sn-kante);padding:72px 0 40px!important}
.sn-ft-grid{display:grid!important;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:48px}
.sn-ft-grid > .e-con{width:auto!important;max-width:none!important}
.sn-fuss-oben ul{list-style:none;padding:0;margin:0}
.sn-fuss-oben li{margin:0 0 8px}
.sn-fuss-oben a{color:var(--sn-tinte2);text-decoration:none}
.sn-fuss-oben a:hover{color:var(--sn-salbei-hell)}
.sn-fuss-oben .sn-logo img{height:40px!important;width:auto!important}
.sn-fuss-oben em{color:var(--sn-salbei);font-style:italic}
.sn-fuss-unten{background:#212C26;padding:0 0 26px!important}
.sn-fuss-zeile{flex-direction:row;justify-content:space-between;align-items:center;
  border-top:1px solid var(--sn-kante);padding-top:18px;width:100%}
.sn-fuss-zeile > .elementor-widget{width:auto!important}
.sn-fuss-zeile p{font-size:.86rem}
.sn-fuss-zeile a{color:var(--sn-tinte2);text-decoration:none}
.sn-fuss-zeile a:hover{color:var(--sn-salbei-hell)}

/* ==========================================================================
   15 · HANDY
   Mario uebernimmt das Feintuning. Das hier ist die Grundabsicherung.
   ========================================================================== */
@media(max-width:1300px){
  .sn-kopf-rechts .elementor-nav-menu .elementor-item{padding:9px 8px!important;font-size:.88rem!important}
  .sn-kopf-reihe .sn-logo img{height:34px!important}
}
/* Fuenf Bereichskacheln passen bis rund 1080 px nebeneinander - im Entwurf
   sind es 200 px je Kachel bei 18 px Abstand. */
@media(max-width:1080px){
  .sn-kaskade{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:1024px){
  .sn-abschnitt{padding-top:72px;padding-bottom:72px}
  .sn-hero-grid,.sn-st-grid,.sn-so-grid,.sn-ank-grid{grid-template-columns:1fr;gap:32px}
  .sn-sz-grid,.sn-vt-grid,.sn-ws-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sn-treppe > .e-con{margin-top:0!important}
  .sn-st-bild img,.sn-so-bild img{height:340px!important}
  .sn-formkarte{position:static}
}
@media(max-width:767px){
  .sn-abschnitt{padding-top:56px;padding-bottom:56px}
  .sn-abschnitt > .e-con-inner{max-width:calc(100% - 32px)!important}
  .sn-hero-kacheln,.sn-sz-grid,.sn-vt-grid,.sn-ws-grid,.sn-kaskade,
  .sn-team-grid,.sn-bew-grid,.sn-ap-grid{grid-template-columns:1fr}
  .sn-hexagon .elementor-icon{width:64px;height:64px}
  .sn-hexagon .elementor-icon svg{width:28px;height:28px}
  .sn-kw-bahn{grid-auto-columns:270px}
  .sn-ws-fuss{grid-template-columns:1fr}
  .sn-so-zeile{flex-direction:column;gap:4px}
  .sn-so-bez{flex:none}
}

/* ==========================================================================
   16 · ANGLEICH AN ENTWURF A (02.09.2026)
   Werte Abschnitt fuer Abschnitt aus /entwurf-a/ gemessen.
   ========================================================================== */

/* Buehne: der Text sitzt im Entwurf in einem dunklen Panel mit Rundung 28. */
.sn-hero-panel{
  background:
    radial-gradient(120% 95% at 8% 0%,rgba(124,185,133,.30) 0%,rgba(124,185,133,0) 58%),
    radial-gradient(95% 85% at 100% 100%,rgba(90,158,184,.28) 0%,rgba(90,158,184,0) 60%),
    linear-gradient(150deg,#2A382F 0%,#1D2822 62%,#222E27 100%);
  border:1px solid var(--sn-kante);
  border-radius:var(--sn-r-gross);
  padding:52px 48px 48px!important;
}
.sn-akzent{
  display:block;
  background:linear-gradient(100deg,#A9CFA3,#8FC4D6);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Buehnenkacheln: kleines abgerundetes Quadrat statt Sechseck */
.sn-hk-ic .elementor-icon{
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.20);border-radius:12px;
}
.sn-hk-ic .elementor-icon svg{width:19px;height:19px;fill:#fff}
.sn-hk .elementor-widget-icon{margin-bottom:auto}

/* Sechsecke: im Entwurf zurueckhaltend gefuellt, Symbol in Weiss.
   Groesse gegenueber dem Entwurf angehoben - Kundenwunsch 02.09.2026. */
.sn-hexagon .elementor-icon{
  background:linear-gradient(150deg,rgba(156,192,149,.40) 0%,rgba(107,169,194,.40) 100%);
  border:0;
}
.sn-hexagon .elementor-icon svg{fill:#fff}
/* Nur das Sechseck auf den Bereichskacheln ist voll gefuellt und ueberlappt
   das Bild - so steht es im Entwurf. */
.sn-bk-ic .elementor-icon{
  background:var(--sn-verlauf);
}
.sn-bk-ic .elementor-icon svg{fill:#22302A}

/* Werkstattpunkte stehen im Entwurf ohne Kachelflaeche auf dem Grund. */
.sn-ws{padding:26px 24px 28px;border-radius:var(--sn-r);display:flex;flex-direction:column;gap:10px}
.sn-ws-stark{background:rgba(255,255,255,.05);border:1px solid var(--sn-kante)}

/* Kopfzeile des Fahrzeugabschnitts: Ueberschrift links, Knopf rechts. */
.sn-kw-kopf{display:flex!important;flex-direction:row;align-items:flex-end;
  justify-content:space-between;gap:24px;width:100%}
.sn-kw-kopf > .e-con{width:auto!important;flex:0 0 auto!important;max-width:none!important}
.sn-kw-kopf > .e-con:first-child{flex:1 1 auto!important}

/* Die Bahn darf nicht aus dem Abschnitt laufen. */
.sn-bestand > .e-con-inner{overflow:hidden}
.sn-kw-bahn{max-width:100%}

/* Karten des Entwurfs: gleiche Flaechen und Rundungen. */
.sn-sz-karte{padding:36px 32px 32px!important}
.sn-vt{padding:36px 32px 32px!important}
.sn-ap-karte{padding:34px 30px 32px!important}
.sn-bew-card{padding:32px 28px!important}
.sn-formkarte{border-radius:var(--sn-r-gross)!important;padding:40px 38px!important}
.sn-kw-bild img{height:212px!important}

/* Feine Trennlinie unter der Kachelueberschrift - im Entwurf ueber die
   volle Kartenbreite, nicht nur 34 px. */
.sn-mit-linie .elementor-heading-title::after{
  width:100%;height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.24),rgba(255,255,255,.04));
  opacity:1;
}

/* ⚠ Elementor setzt flex-direction ueber eine eigene Variable auf .e-con und
   laedt post-<seite>.css nach dem Kit-CSS. Eigene Zeilenlayouts brauchen
   deshalb !important - sonst stehen sie trotzdem untereinander. */
.sn-kw-kopf,.sn-so-zeile,.sn-ank-punkt,.sn-fuss-zeile,.sn-kopf-rechts,
.sn-marken-chips,.sn-knopfreihe,.sn-kw-fuss{flex-direction:row!important}
.sn-kw-kopf{justify-content:space-between!important;align-items:flex-end!important}
.sn-fuss-zeile{justify-content:space-between!important;align-items:center!important}
.sn-kw-fuss{justify-content:space-between!important;align-items:center!important}
.sn-so-zeile,.sn-ank-punkt{align-items:flex-start!important}
.sn-marken-chips,.sn-kopf-rechts,.sn-knopfreihe{align-items:center!important}

/* Abstaende: im Entwurf 132/96 px - am 18.09.2026 auf 88/64 px verdichtet
   (Alena: "Abstaende der einzelnen Kaestchen oben und unten etwas wegnehmen";
   der Designbericht hatte 264 px zwischen zwei Abschnitten gemessen).
   Die Buehne schliesst oben mit 44 px an die Markenleiste an. */
.sn-abschnitt{padding-top:88px;padding-bottom:88px}
.sn-abschnitt.sn-eng{padding-top:64px;padding-bottom:64px}
.sn-buehne{padding-top:44px!important;padding-bottom:0!important}
@media(max-width:1024px){
  .sn-abschnitt{padding-top:64px;padding-bottom:64px}
  .sn-abschnitt.sn-eng{padding-top:52px;padding-bottom:52px}
}
@media(max-width:767px){
  .sn-abschnitt,.sn-abschnitt.sn-eng{padding-top:56px;padding-bottom:56px}
}

/* Untermenue: die Eintraege heissen .elementor-sub-item, nicht .elementor-item.
   Ohne eigene Regel stehen sie in Elementors Grau auf dunklem Grund -
   Kontrast 1,0, also unlesbar. Am 02.09.2026 von der Pruefung gefunden. */
.sn-kopf-rechts .elementor-nav-menu--dropdown a,
.sn-kopf-rechts .elementor-sub-item{
  color:var(--sn-tinte)!important;font-size:.9rem!important;padding:10px 16px!important;
}
.sn-kopf-rechts .elementor-nav-menu--dropdown a:hover,
.sn-kopf-rechts .elementor-sub-item:hover,
.sn-kopf-rechts .elementor-nav-menu--dropdown .current-menu-item > a{
  color:var(--sn-salbei-hell)!important;background-color:rgba(255,255,255,.06)!important;
}

/* ==========================================================================
   17 · RUECKMELDUNG 02.09.2026 – ABSCHNITT FUER ABSCHNITT
   ========================================================================== */

/* --- Buehne: der helle Rand um die Bildkacheln und das Werkstattband ist
       raus. Er wirkte wie ein weisser Rand hinter den Fotos. --- */
.sn-hk,.sn-wsbanner{border:0!important}

/* Symbol dezent in die obere rechte Ecke, groesser und ohne Flaeche */
.sn-hk-ic{position:absolute;top:14px;right:16px;z-index:2;margin:0!important}
.sn-hk-ic .elementor-icon{width:auto;height:auto;background:none;border-radius:0;box-shadow:none}
.sn-hk-ic .elementor-icon svg{width:52px;height:52px;fill:rgba(255,255,255,.28)}
.sn-hk:hover .sn-hk-ic .elementor-icon svg{fill:rgba(255,255,255,.42)}

/* Beschriftung der Buehnenkacheln groesser */
.sn-hk h3.elementor-heading-title{font-size:1.55rem}
.sn-hk-sub p{font-size:.98rem;color:#D5E3D3}

/* --- Ganze Kachel klickbar ---
   Elementor 4 rendert die Link-Einstellung eines Containers nicht als <a>.
   Deshalb deckt der ::after eines echten Knopf-Widgets die Kachel ab. --- */
.sn-klickbar{position:relative}
.sn-klickbar .sn-stretch .elementor-button::after,
.sn-klickbar .sn-stretch-text .elementor-button::after{
  content:"";position:absolute;inset:0;z-index:4;
}
/* Der reine Flaechenlink traegt keine sichtbare Beschriftung, bleibt fuer
   Screenreader aber lesbar. */
.sn-stretch{position:static!important;margin:0!important;padding:0!important;height:0}
.sn-stretch .elementor-button{
  position:static!important;background:none!important;border:0!important;
  padding:0!important;box-shadow:none!important;
}
.sn-stretch .elementor-button-content-wrapper,
.sn-stretch .elementor-button-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}
.sn-stretch-text{position:relative;z-index:5}

/* --- Hover: dieselbe Farboptik wie der Knopf "Fahrzeugbestand ansehen" --- */
.sn-hover{transition:background-image .22s ease,border-color .22s ease,transform .22s ease}
.sn-hover:hover{
  background-image:linear-gradient(120deg,rgba(124,185,133,.92) 0%,rgba(90,158,184,.92) 100%)!important;
  border-color:rgba(207,227,200,.75)!important;
}
.sn-hover:hover h3.elementor-heading-title{color:#1C2A23!important}
.sn-hover:hover p{color:#26362D!important}
.sn-hover:hover .sn-link .elementor-button{color:#16241D!important}
.sn-hover:hover .sn-tag .elementor-heading-title{color:#26362D!important}
.sn-hover:hover .sn-hexagon .elementor-icon{background:rgba(255,255,255,.45)}
.sn-hover:hover .sn-hexagon .elementor-icon svg{fill:#1C2A23}
.sn-hover:hover .sn-mit-linie .elementor-heading-title::after{
  background:linear-gradient(90deg,rgba(28,42,35,.45),rgba(28,42,35,.10));
}

/* Leichte Fassung: nur Flaeche und Kante, fuer Werkstatt und Ansprechpartner */
.sn-hover-leicht{transition:background-color .22s ease,border-color .22s ease,transform .22s ease}
.sn-hover-leicht:hover{
  background-color:rgba(255,255,255,.08)!important;
  border-color:var(--sn-kante)!important;transform:translateY(-3px);
}
.sn-ws{border:1px solid transparent}
.sn-ws.sn-hover-leicht:hover{box-shadow:0 26px 52px -38px rgba(0,0,0,.9)}

/* --- Abstaende: der Kunde wollte die drei Kachelabschnitte weiter oben --- */
.sn-suche{padding-top:72px!important;padding-bottom:72px!important}
.sn-bereiche{padding-top:88px!important;padding-bottom:88px!important}
.sn-vorteile{padding-top:88px!important;padding-bottom:88px!important}

/* --- Zitat dezent hervorheben --- */
.sn-zitat-karte{
  background:rgba(255,255,255,.05);
  border:1px solid var(--sn-kante);
  border-radius:var(--sn-r-gross);
  padding:40px 42px!important;
}

/* --- Ansprechpartner: das Foto braucht rundum denselben Rand.
       Elementor gibt Kind-Containern width:100%, mit seitlichem Rand lief das
       Bild rechts aus der Karte heraus. --- */
.sn-portrait{margin:14px!important;width:auto!important}
.sn-team-txt{padding:16px 22px 24px!important}
.sn-team-kontakt a{color:var(--sn-salbei-hell);text-decoration:none;font-weight:700}
.sn-team-kontakt a:hover{color:#fff;text-decoration:underline}
.sn-hover-leicht:hover .sn-team-kontakt a{color:#fff}

@media(max-width:767px){
  .sn-hk-ic .elementor-icon svg{width:40px;height:40px}
  .sn-hk h3.elementor-heading-title{font-size:1.32rem}
  .sn-zitat-karte{padding:26px 24px!important}
}
/* Elementor faerbt Symbole ueber eine eigene Regel je Element ein - ohne
   !important bleibt das Buehnensymbol salbeigruen statt dezent weiss. */
.sn-hk-ic .elementor-icon svg{fill:rgba(255,255,255,.30)!important}
.sn-hk:hover .sn-hk-ic .elementor-icon svg{fill:rgba(255,255,255,.46)!important}

/* ==========================================================================
   18 · RUECKMELDUNG 02.09.2026 – ZWEITER DURCHGANG
   ========================================================================== */

/* --- Buehnensymbole: gross, aus der Ecke herauslaufend, in Salbei mit
       Verlaufsschimmer dahinter. Der ueberstehende Teil wird vom
       overflow:hidden der Kachel abgeschnitten - genau so gewollt.
   ⚠ Ein echter Farbverlauf IM Symbol ginge nur mit einer SVG-Datei; der
     SVG-Upload ist auf dieser Installation gesperrt (rest_upload_sideload_error).
     Deshalb: Symbol in Salbei, Verlauf als Schimmer dahinter. --- */
.sn-hk-ic{position:absolute;top:-22px;right:-20px;z-index:2;margin:0!important}
.sn-hk-ic::before{
  content:"";position:absolute;top:-58px;right:-58px;width:250px;height:250px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 60% 40%,
    rgba(124,185,133,.55) 0%,rgba(90,158,184,.34) 44%,transparent 72%);
}
.sn-hk-ic .elementor-icon{position:relative;z-index:1}
.sn-hk-ic .elementor-icon svg{width:122px!important;height:122px!important;
  fill:rgba(190,220,184,.62)!important}
.sn-hk:hover .sn-hk-ic .elementor-icon svg{fill:rgba(214,236,209,.80)!important}
.sn-hk:hover .sn-hk-ic::before{
  background:radial-gradient(circle at 60% 40%,
    rgba(124,185,133,.70) 0%,rgba(90,158,184,.46) 44%,transparent 72%);
}

/* --- Hover dunkler. Der helle Verlauf war zu kraeftig (Alena, 02.09.2026). --- */
.sn-hover:hover{
  background-image:linear-gradient(120deg,
    rgba(74,124,84,.92) 0%,rgba(52,104,126,.92) 100%)!important;
  border-color:rgba(156,192,149,.55)!important;
}
.sn-hover:hover h3.elementor-heading-title{color:#fff!important}
.sn-hover:hover p{color:#DDE9DA!important}
.sn-hover:hover .sn-link .elementor-button{color:#fff!important}
.sn-hover:hover .sn-tag .elementor-heading-title{color:#CFE3C8!important}
.sn-hover:hover .sn-hexagon .elementor-icon{
  background:linear-gradient(150deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.20) 100%);
}
.sn-hover:hover .sn-hexagon .elementor-icon svg{fill:#fff}
.sn-hover:hover .sn-mit-linie .elementor-heading-title::after{
  background:linear-gradient(90deg,rgba(255,255,255,.42),rgba(255,255,255,.10));
}

/* --- "Direkt weiter" noch weiter nach oben. Die Treppe schiebt optisch
       zusaetzlichen Abstand nach unten, deshalb oben deutlich weniger. --- */
.sn-suche{padding-top:40px!important;padding-bottom:48px!important}

/* Der Slider ist seit dem Plugin-Update vom 09.09.2026 sichtbar.
   Die frueher noetige Ausblendung ist entfallen, die Vorlauf-Bahn mit den
   sechs Modellkarten ebenfalls. */
.sn-af1-slider{width:100%}
/* Symbol etwas zurueckgenommen, dafuer der Verlaufsschimmer kraeftiger -
   so wirkt es mehr wie ein Verlauf und weniger wie eine Flaeche. */
.sn-hk-ic .elementor-icon svg{fill:rgba(196,224,190,.46)!important}
.sn-hk-ic::before{
  background:radial-gradient(circle at 58% 42%,
    rgba(124,185,133,.72) 0%,rgba(90,158,184,.44) 46%,transparent 74%);
}

/* --- Buehnenkacheln ohne Symbol (Alena, 02.09.2026: "Lass die Icons komplett
       weg, das wirkt besser"). Dafuer die Ueberschrift deutlich groesser. --- */
.sn-hk h3.elementor-heading-title{font-size:1.95rem;line-height:1.14}
.sn-hk-sub p{font-size:1.02rem}
.sn-hk{justify-content:flex-end;padding:24px 24px 22px!important}
@media(max-width:767px){
  .sn-hk h3.elementor-heading-title{font-size:1.55rem}
}
/* Elementors Regel je Element schlaegt die Kit-Regel - deshalb !important.
   Ohne das bleibt die Kachelueberschrift bei den 1,26 rem der globalen
   Vorgabe "Kacheltitel". */
.sn-hk .elementor-heading-title{font-size:1.95rem!important;line-height:1.14!important}
@media(max-width:767px){
  .sn-hk .elementor-heading-title{font-size:1.5rem!important}
}

/* --- Trustindex-Bewertungen. Das Widget bringt eigene helle Optik mit; hier
       nur das Noetigste, damit es auf dem dunklen Grund traegt. --- */
.sn-trustindex{width:100%}
.sn-trustindex .ti-widget{margin:0!important}
.sn-trustindex .ti-widget .ti-review-item,
.sn-trustindex .ti-widget .ti-review-content{color:inherit}
/* Trustindex bringt seine eigene dunkle Fassung mit und passt damit gut zum
   Grund. Nur der obere Abstand wird angeglichen. */
.sn-trustindex{margin-top:10px}
/* "Gebrauchtwagen" lief bei 1,95 rem aus der Kachel heraus (254 px Text in
   225 px Innenbreite, am 02.09.2026 gemessen). Zwei Stufen kleiner passt. */
.sn-hk .elementor-heading-title{font-size:1.65rem!important}
@media(max-width:1300px){
  .sn-hk .elementor-heading-title{font-size:1.5rem!important}
}
@media(max-width:767px){
  .sn-hk .elementor-heading-title{font-size:1.45rem!important}
}

/* Der Bewertungsabschnitt traegt jetzt nur noch den Trustindex-Knopf mit
   Popup - mit 132 px Abstand oben und unten wirkte er leer. */
.sn-bewertungen{padding-top:76px!important;padding-bottom:76px!important}
.sn-trustindex{margin-top:4px}
.sn-trustindex .ti-widget{margin:0 auto!important}
/* Zurueck auf den vollen Abschnittsabstand: die Startseite traegt jetzt wieder
   das grosse Trustindex-Raster, nicht nur einen Knopf. */
.sn-bewertungen{padding-top:88px!important;padding-bottom:88px!important}
.sn-trustindex .ti-widget{margin:0!important}

/* ==========================================================================
   19 · STANDORT – Angleich an den Entwurf (02.09.2026)
   Im Entwurf liegen die Angaben in einer eigenen Karte, die Zeilen sind
   eingerueckt, und die Bezeichnung ist ruhiges Grau statt gruner Versalien.
   Am 02.09.2026 aus /entwurf-a/ gemessen: Karte #33433A, Kante
   rgba(255,255,255,.16), Radius 22, Zeilen 18/22, Bezeichnung 15,4 px in
   #B4C4B6, Wert weiss und halbfett.
   ========================================================================== */
.sn-so-zeilen{
  background:var(--sn-karte);
  border:1px solid var(--sn-kante);
  border-radius:var(--sn-r);
  margin-top:12px;
  overflow:hidden;
}
.sn-so-zeile{
  padding:18px 22px!important;
  gap:24px;
  border-bottom:1px solid var(--sn-kante);
}
.sn-so-zeile:last-child{border-bottom:0}
.sn-so-bez{
  flex:0 0 42%;
  font-size:.96rem;font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--sn-tinte2);
}
.sn-so-wert{color:#fff;font-weight:600;font-size:.96rem}
.sn-so-wert a{color:#fff;text-decoration:none;font-weight:600}
.sn-so-wert a:hover{color:var(--sn-salbei-hell)}

/* Bild genauso hoch wie die Karte daneben (Wunsch Alena 02.09.2026).
   Beide auf denselben Wert, das Raster zentriert sie zueinander. */
.sn-so-grid{align-items:center}
.sn-so-zeilen{min-height:540px}
.sn-so-bild img{height:540px!important;border-radius:var(--sn-r-gross)}
@media(max-width:1024px){
  .sn-so-zeilen{min-height:0}
  .sn-so-bild img{height:340px!important}
}

/* ==========================================================================
   20 · FORMULAROPTIK GLOBAL – gilt fuer Elementor Pro UND Autoforce1
   Alena am 02.09.2026: "wichtig, dass du das global im CSS machst".
   Deshalb greifen die Regeln nicht auf Widget-Klassen, sondern auf alles,
   was innerhalb einer .sn-formular-Flaeche an Eingabefeldern steht. So sieht
   das Autoforce1-Formular genauso aus wie das Elementor-Formular, ohne dass
   die Optik pro Seite nachgebaut werden muss.
   ========================================================================== */
.sn-formular input[type=text],.sn-formular input[type=tel],
.sn-formular input[type=email],.sn-formular input[type=number],
.sn-formular input[type=search],.sn-formular input:not([type]),
.sn-formular select,.sn-formular textarea{
  background:rgba(255,255,255,.07)!important;
  border:1px solid var(--sn-kante)!important;
  border-radius:14px!important;
  color:#fff!important;
  padding:15px 17px!important;
  font-size:1rem!important;
  font-family:inherit!important;
  width:100%!important;
  box-shadow:none!important;
  margin-bottom:14px;
}
.sn-formular label{
  display:block;color:var(--sn-tinte2)!important;font-size:.8rem!important;
  font-weight:700!important;letter-spacing:.06em;text-transform:uppercase;
  margin-bottom:7px;font-family:inherit!important;
}
.sn-formular input::placeholder,.sn-formular textarea::placeholder{color:rgba(255,255,255,.42)}
.sn-formular input:focus,.sn-formular select:focus,.sn-formular textarea:focus{
  outline:none!important;border-color:var(--sn-salbei)!important;
  box-shadow:0 0 0 3px rgba(156,192,149,.20)!important;
}
.sn-formular button,.sn-formular input[type=submit],
.sn-formular .elementor-button[type=submit]{
  background-color:#7CB985!important;background-image:var(--sn-verlauf)!important;
  color:#1E2A24!important;border:0!important;border-radius:999px!important;
  padding:15px 32px!important;font-weight:700!important;font-size:1rem!important;
  font-family:inherit!important;cursor:pointer;width:100%!important;
  text-transform:none!important;letter-spacing:0!important;
}
.sn-formular button:hover,.sn-formular input[type=submit]:hover{filter:brightness(1.08)}
/* Pflichtfeld-Sternchen und Hinweise */
.sn-formular .required,.sn-formular .req,.sn-formular abbr{color:var(--sn-salbei)!important}
.sn-formular small,.sn-formular .hint,.sn-formular p{color:var(--sn-tinte2)}
/* Kontrollkaestchen (Datenschutz) */
.sn-formular input[type=checkbox],.sn-formular input[type=radio]{
  width:auto!important;margin:0 8px 0 0;accent-color:#7CB985;
}
.sn-formular .elementor-field-option label{text-transform:none;font-weight:400!important;
  font-size:.86rem!important;letter-spacing:0;display:inline}

/* Autoforce1 bringt lila Akzente (#B500FF) und "Chalkboard SE" mit.
   Beides hier ueberschreiben - die Schrift braucht ein vorangestelltes body. */
body .sn-formular *{font-family:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif!important}
body .sn-formular [style*="#B500FF"],body .sn-formular [style*="#b500ff"]{color:var(--sn-salbei)!important}
body .mobile-basisdaten,body .desktop-basisdaten,
body .autoforce1-liste,body .autoforce1-detail{
  font-family:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif!important;
}

/* Standort: im Raster liegen nur noch Datenkarte und Foto. Mit stretch sind
   beide zwingend gleich hoch, egal wie lang die Angaben werden. */
.sn-so-grid{align-items:stretch!important}
.sn-so-zeilen{min-height:0;display:grid!important;align-content:start}
/* ⚠ height:100% nur im Standort-Raster neben dem Foto. Ueberall sonst (z. B.
   Kontaktblock der Startseite) steckt die Karte in einer Flex-Spalte mit
   flex-wrap:wrap - mit 100 % Hoehe passt sie nicht mehr unter die
   Ueberschrift, bricht in eine zweite Spalte um und stand auf dem Handy
   komplett rechts neben dem Bildschirm (Designqualitaet-Agent, 17.09.2026). */
.sn-so-grid .sn-so-zeilen{height:100%}
.sn-so-bild{height:100%}
.sn-so-bild img{height:100%!important;min-height:100%;object-fit:cover;
  border-radius:var(--sn-r-gross)}
.sn-so-knopf{margin-top:28px}
@media(max-width:1024px){
  .sn-so-bild img{height:340px!important;min-height:0}
}
/* height:100% am Bild greift nur, wenn die ganze Kette eine Hoehe hat.
   Zwischen Spalte und <img> haengt noch das Bild-Widget von Elementor. */
.sn-so-bild{display:flex!important;flex-direction:column;height:100%;padding:0!important}
.sn-so-bild > .elementor-widget-image{flex:1 1 auto;display:flex;width:100%}
.sn-so-bild > .elementor-widget-image > *{width:100%;display:flex}
.sn-so-bild img{height:100%!important;width:100%!important;object-fit:cover;
  border-radius:var(--sn-r-gross)}
/* Elementor gibt jedem Widget eine eigene Breite - ohne feste Spalte stehen
   die Werte je nach Laenge der Bezeichnung an anderer Stelle. */
.sn-so-zeile > .elementor-widget:first-child{flex:0 0 44%!important;width:44%!important;max-width:44%}
.sn-so-zeile > .elementor-widget:last-child{flex:1 1 auto!important;width:auto!important}
.sn-so-bez{flex:none}

/* ==========================================================================
   21 · ANKAUFSEITE
   Bleibt bewusst hier im globalen CSS - die Bausteine (Blasen, Schrittzahlen,
   Checkliste, mobile Handlungsleiste) werden auch auf Werkstatt, Zweirad und
   Karriere gebraucht.
   ========================================================================== */

/* Buehne: Text links, Formular gleich rechts daneben */
.sn-ank-buehne{display:grid!important;grid-template-columns:minmax(0,56fr) minmax(0,44fr);
  gap:32px;align-items:start;width:100%}
.sn-ank-buehne > .e-con{width:auto!important;max-width:none!important;margin:0}

/* Haken-Zeile unter der Buehne */
.sn-haken-liste{display:grid!important;grid-template-columns:1fr;gap:10px;margin-top:6px}
.sn-punkt{align-items:center!important;flex-direction:row!important;gap:10px}
.sn-punkt p{margin:0;font-size:.95rem;color:var(--sn-tinte)}
.sn-haken .elementor-icon{width:22px;height:22px;display:flex;align-items:center;
  justify-content:center;background:var(--sn-verlauf);border-radius:50%}
.sn-haken .elementor-icon svg{width:11px;height:11px;fill:#1E2A24!important}
.sn-haken{flex:0 0 auto}

/* --------------------------------------------------------------------------
   Der unsichere Teil: die Nachrichten
   Echte Saetze, wie sie beim Privatverkauf hereinkommen. Bewusst als native
   Textbausteine, damit der Kunde sie selbst aendern kann - kein Bild.
   -------------------------------------------------------------------------- */
.sn-unsicher-grid{display:grid!important;grid-template-columns:minmax(0,44fr) minmax(0,56fr);
  gap:56px;align-items:center;width:100%}
.sn-unsicher-grid > .e-con{width:auto!important;max-width:none!important;margin:0}

.sn-blasen{display:flex!important;flex-direction:column;gap:13px;
  padding:26px 0;position:relative;justify-content:center}
/* ⚠ Weicher Schimmer hinter dem Nachrichtenhaufen. Die Verlaeufe muessen
   INNERHALB der Flaeche auslaufen - vorher reichte der zweite bis 126 % und
   wurde am Rand hart abgeschnitten. Das ergab die senkrechte Kante mitten im
   Abschnitt (Alena, 09.09.2026: "der Uebergang wirkt abgeschnitten"). */
.sn-blasen::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(46% 42% at 38% 32%,rgba(124,185,133,.20) 0%,transparent 72%),
             radial-gradient(40% 38% at 64% 72%,rgba(90,158,184,.18) 0%,transparent 74%);
}
.sn-blase{position:relative;z-index:1;width:auto!important;max-width:84%;align-self:flex-start}
.sn-blase p{
  margin:0;display:inline-block;
  background:#EEF3EC;color:#26332B;
  border-radius:18px 18px 18px 6px;
  padding:12px 17px;font-size:.94rem;line-height:1.42;font-weight:500;
  box-shadow:0 18px 32px -24px rgba(0,0,0,.9);
}
/* Jede zweite Nachricht auf der anderen Seite - wie in einem Verlauf */
.sn-b2,.sn-b4,.sn-b6,.sn-b8{align-self:flex-end}
.sn-b2 p,.sn-b4 p,.sn-b6 p,.sn-b8 p{border-radius:18px 18px 6px 18px}
/* Leichte Schraeglage, damit der Haufen lebt */
.sn-b1{transform:rotate(-1.6deg)}   .sn-b2{transform:rotate(1.4deg)}
.sn-b3{transform:rotate(-.8deg)}    .sn-b4{transform:rotate(2deg)}
.sn-b5{transform:rotate(-2.2deg)}   .sn-b6{transform:rotate(1deg)}
.sn-b7{transform:rotate(-1deg)}     .sn-b8{transform:rotate(1.8deg)}
.sn-b9{transform:rotate(-1.4deg)}
/* Zwei Nachrichten heben sich ab - die unangenehmsten */
.sn-b5 p,.sn-b6 p{background:#FDF1EE;color:#5A2A20}
.sn-b7 p{max-width:none}
/* Die Reihe der Gegenargumente rechts */
.sn-ank-liste{display:grid!important;grid-template-columns:1fr;gap:0;width:100%}
.sn-ank-punkt h3.elementor-heading-title{font-size:1.06rem}
.sn-ank-punkt p{font-size:.94rem}

/* --------------------------------------------------------------------------
   Ablauf, Mobilitaet, Checkliste
   -------------------------------------------------------------------------- */
.sn-schritt{display:flex;flex-direction:column}
.sn-schrittzahl .elementor-heading-title{
  font-size:2.4rem!important;line-height:1!important;
  background:linear-gradient(100deg,#A9CFA3,#8FC4D6);
  -webkit-background-clip:text;background-clip:text;color:transparent!important;
  font-weight:800;
}
.sn-mobil-grid{gap:16px}
.sn-mobil{padding:22px 20px!important;align-items:center;text-align:center}
.sn-mobil h3.elementor-heading-title{font-size:1rem}
.sn-mobil .sn-hexagon{align-self:center}

.sn-checkliste .elementor-icon-list-item{
  padding:13px 0;border-bottom:1px solid var(--sn-kante);align-items:flex-start;
}
.sn-checkliste .elementor-icon-list-item:last-child{border-bottom:0}
.sn-checkliste .elementor-icon-list-icon svg{fill:var(--sn-salbei)!important;width:16px;height:16px}
.sn-checkliste .elementor-icon-list-text{color:var(--sn-tinte);font-size:.98rem}

/* --------------------------------------------------------------------------
   Mobile Handlungsleiste
   Nur auf dem Handy. Zwei Wege, mehr nicht - der Kunde wollte ausdruecklich
   keine Knopfflut.
   -------------------------------------------------------------------------- */
.sn-mobilbar{display:none!important}
@media(max-width:767px){
  .sn-mobilbar{
    display:block!important;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:rgba(31,41,35,.94);backdrop-filter:blur(14px);
    border-top:1px solid var(--sn-kante);padding:10px 14px calc(10px + env(safe-area-inset-bottom))!important;
  }
  .sn-mobilbar-inhalt{flex-direction:row!important;gap:10px;width:100%}
  .sn-mobilbar-inhalt > .elementor-widget{flex:1 1 0;width:auto!important}
  .sn-mobilbar .elementor-button{width:100%;justify-content:center;padding:13px 14px!important;
    font-size:.92rem!important}
  body:has(.sn-mobilbar){padding-bottom:78px}
}

/* --------------------------------------------------------------------------
   Handy: die Ankaufseite umbrechen
   -------------------------------------------------------------------------- */
@media(max-width:1024px){
  .sn-ank-buehne,.sn-unsicher-grid{grid-template-columns:1fr;gap:32px}
  .sn-blasen{padding:8px 0}
  .sn-blase{max-width:92%}
}
@media(max-width:767px){
  .sn-mobil-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sn-blase{max-width:96%}
  .sn-blase p{font-size:.88rem;padding:11px 14px}
  .sn-schrittzahl .elementor-heading-title{font-size:2rem!important}
  .sn-knopfreihe{flex-direction:column!important;align-items:stretch!important}
  .sn-knopfreihe .elementor-button{width:100%;justify-content:center}
}

/* ⚠ Die Sammelregel oben greift nur bei Klassen, die "-grid" enthalten.
   Die kurzen Spaltenklassen sn-g1 bis sn-g6 setzten deshalb zwar die Spalten,
   blieben aber flex - die Kacheln standen untereinander. Am 02.09.2026 auf
   der Ankaufseite aufgefallen. */
.sn-g1,.sn-g2,.sn-g3,.sn-g4,.sn-g5,.sn-g6{
  display:grid!important;align-items:stretch;width:100%;gap:24px;
}
.sn-g1 > .e-con,.sn-g2 > .e-con,.sn-g3 > .e-con,
.sn-g4 > .e-con,.sn-g5 > .e-con,.sn-g6 > .e-con{
  margin:0;width:auto!important;max-width:none!important;
}
/* Checkliste: Elementor faerbt die Eintraege ueber eine eigene Regel je
   Element - ohne !important bleibt der Text zu dunkel. */
.sn-checkliste .elementor-icon-list-text,
.sn-checkliste .elementor-icon-list-item span{color:var(--sn-tinte)!important;font-size:.98rem!important}
/* Die Spaltenzahl fehlte - beim Neuschreiben des CSS sind die kurzen
   Spaltenklassen mit rausgefallen, nur die Sammelregel blieb. */
.sn-g1{grid-template-columns:1fr}
.sn-g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sn-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sn-g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sn-g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.sn-g6{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1024px){
  .sn-g3,.sn-g4,.sn-g5,.sn-g6{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767px){
  .sn-g2,.sn-g3,.sn-g4,.sn-g5,.sn-g6{grid-template-columns:1fr}
  .sn-mobil-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
/* sn-g-text-bild enthaelt kein "-grid", faellt also aus der Sammelregel.
   Ohne display:grid stapelt sich Text und Inhalt statt nebeneinander. */
.sn-g-text-bild{display:grid!important;align-items:center;width:100%}
.sn-g-text-bild > .e-con{margin:0;width:auto!important;max-width:none!important}
.sn-gestapelt{display:flex!important;flex-direction:column;gap:22px;width:100%}
@media(max-width:1024px){ .sn-g-text-bild{grid-template-columns:1fr!important} }
/* Haken-Zeilen duerfen nicht umbrechen - sonst steht das Symbol auf dem Handy
   ueber dem Text statt daneben. */
.sn-punkt{flex-wrap:nowrap!important;align-items:flex-start!important}
.sn-punkt > .elementor-widget{width:auto!important}
.sn-punkt .sn-haken{margin-top:2px}

/* ==========================================================================
   22 · HANDY – GRUNDABSICHERUNG
   Mario macht das Feintuning, aber die Ankaufseite soll schon jetzt sauber
   laufen: der Weg zum Formular muss auf dem Handy kurz sein.
   ========================================================================== */
@media(max-width:767px){
  /* Ueberschriften: die globale Vorgabe ist fuer 390 px zu gross */
  h1 .elementor-heading-title,.sn-hero-panel h1.elementor-heading-title{
    font-size:2rem!important;line-height:1.12!important}
  h2 .elementor-heading-title{font-size:1.62rem!important;line-height:1.18!important}

  /* Markenband kompakt: nur die Plaketten, die beiden Texte weg */
  .sn-markenband > .e-con-inner{justify-content:center;gap:12px;flex-wrap:wrap}
  .sn-marken-label,.sn-marken-hinweis{display:none!important}
  .sn-markenband{padding:8px 0!important}
  .sn-marke img{height:22px!important;padding:5px 9px!important}
  .sn-marke-tgb img{height:22px!important;padding:5px 9px!important}

  /* Kopfzeile schlanker */
  .sn-kopf-reihe{padding:10px 0!important}
  .sn-kopf-reihe .sn-logo img{height:32px!important}
  .sn-kopf-reihe > .e-con-inner{max-width:calc(100% - 32px)!important;gap:12px}

  /* Panels und Karten mit weniger Innenabstand */
  .sn-hero-panel{padding:26px 22px 24px!important}
  .sn-formkarte{padding:24px 22px!important}
  .sn-kachel{padding:22px 20px 24px}

  /* Abschnittsabstaende auf dem Handy kleiner */
  .sn-abschnitt,.sn-abschnitt.sn-eng{padding-top:44px!important;padding-bottom:44px!important}
  .sn-buehne{padding-top:24px!important}

  /* nichts darf seitlich hinauslaufen */
  html,body{overflow-x:hidden;max-width:100%}
  .e-con,.e-con-inner{max-width:100%!important}
}

/* ==========================================================================
   23 · ANKAUFSEITE – NACHTRAG 02.09.2026
   ========================================================================== */
/* Auf der Ankaufseite lenkt das Markenband ab - dort soll nur ein Weg
   sichtbar sein: das Ankaufformular. */
body.page-id-563 .sn-markenband{display:none!important}

/* "Alle Marken, alle Modelle." - gross und gut lesbar in der Buehne */
.sn-marken-satz{
  font-size:1.35rem!important;font-weight:700;color:#fff!important;
  padding:14px 0 2px;letter-spacing:-.01em;
}
.sn-marken-satz::before{
  content:"";display:block;width:44px;height:2px;margin-bottom:12px;
  background:var(--sn-verlauf);border-radius:2px;
}

/* Fusszeile auf dem Handy: lange Adressen duerfen umbrechen */
@media(max-width:767px){
  .sn-fuss-oben a,.sn-fuss-oben li{overflow-wrap:anywhere;word-break:break-word}
  .sn-marken-satz{font-size:1.15rem!important}
}
/* Kopfzeile auf dem Handy in eine Zeile: Logo links, Knopf und Menue rechts.
   Vorher stand das Logo allein oben und der Rest darunter. */
@media(max-width:767px){
  .sn-kopf-reihe > .e-con-inner{flex-wrap:nowrap!important;gap:10px}
  .sn-kopf-rechts{flex-direction:row!important;gap:8px}
  .sn-kopf-rechts .sn-btn .elementor-button{padding:10px 14px!important;font-size:.82rem!important}
  .sn-kopf-reihe .sn-logo img{height:28px!important}
  .sn-kopf-rechts .elementor-menu-toggle{padding:6px}
}
/* Der Knopf passt auf dem Handy nicht mehr in die Kopfzeile - er lief rechts
   heraus. Auf kleinen Bildschirmen fuehren Burgermenue und die feste Leiste
   am unteren Rand ohnehin zum selben Ziel. */
@media(max-width:767px){
  .sn-kopf-rechts .sn-btn{display:none!important}
  .sn-kopf-reihe > .e-con-inner{justify-content:space-between}
}

/* ==========================================================================
   24 · RHYTHMUS UND ABLAUF (Rueckmeldung 02.09.2026)
   Der Grund war ueber die ganze Seite gleich, dadurch wirkten die unteren
   Abschnitte leer. Jeder zweite Abschnitt bekommt jetzt ein leicht abgesetztes
   Band mit feinen Kanten.
   ========================================================================== */
.sn-band{
  background:rgba(255,255,255,.038);
  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07);
}

/* --------------------------------------------------------------------------
   Ablauf: senkrechte Leiste links, Zusatzkarte rechts
   -------------------------------------------------------------------------- */
.sn-ablauf-grid{display:grid!important;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:56px;align-items:start;width:100%}
.sn-ablauf-grid > .e-con{margin:0;width:auto!important;max-width:none!important}

.sn-schritte{display:flex!important;flex-direction:column;gap:0;width:100%}
.sn-schritt{
  flex-direction:row!important;align-items:flex-start!important;
  gap:22px;padding:22px 0;position:relative;width:100%;
}
.sn-schritt + .sn-schritt{border-top:1px solid var(--sn-kante)}
.sn-schritt-spalte{flex:0 0 auto!important;width:auto!important;align-items:center}
.sn-schritt-text{flex:1 1 auto!important;width:auto!important}
.sn-schritt-text h3.elementor-heading-title{font-size:1.16rem}
.sn-schritt-text p{font-size:.95rem}
.sn-schritt-nr{
  margin:0;font-size:.72rem!important;font-weight:800;letter-spacing:.16em;
  color:var(--sn-salbei)!important;text-align:center;
}
.sn-schritt-ic .elementor-icon{width:62px;height:62px}
.sn-schritt-ic .elementor-icon svg{width:26px;height:26px}
/* feine Linie, die die drei Schritte verbindet */
.sn-schritt:not(:last-child) .sn-schritt-spalte::after{
  content:"";position:absolute;left:31px;top:96px;bottom:-4px;width:1px;
  background:linear-gradient(180deg,rgba(156,192,149,.45),rgba(156,192,149,0));
}
.sn-schritt-spalte{position:static}

.sn-versprechen{padding:30px 28px 32px!important}
.sn-versprechen h3.elementor-heading-title{font-size:1.2rem}
.sn-checkliste-eng .elementor-icon-list-item{padding:9px 0}
.sn-checkliste-eng .elementor-icon-list-text{font-size:.92rem!important}

/* --------------------------------------------------------------------------
   Das brauchst du: Text links, Foto rechts, gleiche Hoehe
   -------------------------------------------------------------------------- */
.sn-unterlagen-grid{display:grid!important;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:56px;align-items:stretch;width:100%}
.sn-unterlagen-grid > .e-con{margin:0;width:auto!important;max-width:none!important}
.sn-unterlagen-bild{display:flex!important;flex-direction:column;height:100%;padding:0!important}
.sn-unterlagen-bild > .elementor-widget-image{flex:1 1 auto;display:flex;width:100%}
.sn-unterlagen-bild > .elementor-widget-image > *{width:100%;display:flex}
.sn-unterlagen-bild img{height:100%!important;width:100%!important;object-fit:cover;
  border-radius:var(--sn-r-gross);min-height:420px}

@media(max-width:1024px){
  .sn-ablauf-grid,.sn-unterlagen-grid{grid-template-columns:1fr;gap:32px}
  .sn-unterlagen-bild img{min-height:300px;height:300px!important}
}
@media(max-width:767px){
  .sn-schritt{gap:16px;padding:18px 0}
  .sn-schritt-ic .elementor-icon{width:52px;height:52px}
  .sn-schritt-ic .elementor-icon svg{width:22px;height:22px}
  .sn-schritt:not(:last-child) .sn-schritt-spalte::after{left:26px;top:84px}
}
/* Die Zusatzkarte soll auf ihre Inhaltshoehe zusammengehen. Sonst zieht sie
   sich auf die Hoehe der Schrittleiste und der Knopf rutscht ans untere Ende
   (die Regel "Knopf am Kachelfuss" greift dann ins Leere). */
.sn-versprechen{align-self:start!important;height:auto!important}
.sn-versprechen > .elementor-widget-button:last-child{margin-top:8px!important;padding-top:0!important}
/* Die Verbindungslinie zwischen den Schritten war bei diesen Zeilenhoehen nie
   ganz sichtbar - die Trennlinien zwischen den Schritten reichen aus. */
.sn-schritt:not(:last-child) .sn-schritt-spalte::after{display:none}

/* ==========================================================================
   25 · WERKSTATTSEITE
   ========================================================================== */
/* Markenreihe: weisse Plaketten in Kacheln, gleich hoch */
.sn-markenreihe{gap:16px}
.sn-markenkachel{
  background:var(--sn-karte);background-image:var(--sn-kachel-verlauf);
  border:1px solid var(--sn-kante);border-radius:var(--sn-r);
  padding:26px 20px!important;align-items:center;justify-content:center;
  min-height:104px;
}
.sn-markenkachel .sn-marke img{height:34px!important;padding:8px 16px!important}
.sn-markenkachel-text h3.elementor-heading-title{font-size:1rem;text-align:center}

/* Auswahlfeld im Serviceformular */
.sn-formular select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--sn-salbei) 50%),
                   linear-gradient(135deg,var(--sn-salbei) 50%,transparent 50%)!important;
  background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%!important;
  background-size:6px 6px,6px 6px!important;background-repeat:no-repeat!important;
  background-color:rgba(255,255,255,.07)!important;padding-right:44px!important;
}
.sn-formular select option{background:#2C3A32;color:#fff}
.sn-formular textarea{min-height:110px;resize:vertical}

/* Die Werkstattseite hat lange Kacheltexte - etwas mehr Luft */
.sn-leistungen .sn-ws{padding:26px 24px 30px}

/* ==========================================================================
   26 · SCHNELLAUSWAHL UND AUSFUEHRLICHE BEREICHE (Werkstatt)
   Die beiden Werkstatt-Unterseiten sind am 02.09.2026 geloescht worden; ihre
   Inhalte stehen jetzt als ausfuehrliche Bereiche auf der Werkstattseite.
   Die Auswahl direkt unter der Buehne fuehrt dorthin.
   ========================================================================== */
.sn-schnellauswahl{padding-top:0!important;padding-bottom:34px!important}
.sn-sprungreihe{gap:14px}
.sn-sprung{
  background:rgba(255,255,255,.05);border:1px solid var(--sn-kante);
  border-radius:var(--sn-r);padding:20px 18px!important;
  align-items:center;text-align:center;position:relative;
  transition:background-color .22s ease,border-color .22s ease,transform .22s ease;
}
.sn-sprung h3.elementor-heading-title{font-size:.95rem;line-height:1.3}
.sn-sprung .sn-hexagon{align-self:center}
.sn-sprung .elementor-icon{width:48px;height:48px}
.sn-sprung .elementor-icon svg{width:21px;height:21px}

/* Sechs Sprungkacheln nebeneinander. sn-g6 steht sonst auf drei Spalten -
   hier sollen sie in EINER Reihe stehen, sonst wirkt der Block wie ein
   zweites Menue. */
.sn-sprungreihe-sechs{grid-template-columns:repeat(6,minmax(0,1fr))!important}
@media(max-width:1200px){
  .sn-sprungreihe-sechs{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:767px){
  .sn-sprungreihe-sechs{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* Klimabereich: Text links, Zusatzkarte rechts */
.sn-klima-grid{display:grid!important;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:48px;align-items:center;width:100%}
.sn-klima-grid > .e-con{margin:0;width:auto!important;max-width:none!important}
@media(max-width:1024px){ .sn-klima-grid{grid-template-columns:1fr;gap:28px} }

/* Sprungziele nicht unter der Kopfzeile verstecken */
[id="unfall"],[id="motor"],[id="inspektion"],[id="hu-au"],[id="klima"],
[id="zweirad"],[id="reifen"],[id="service-formular"]{
  scroll-margin-top:120px;
}
html{scroll-behavior:smooth}

/* Inspektionsbereich: Zusatzkarte links, Punkte rechts */
.sn-inspektion-grid{display:grid!important;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:56px;align-items:start;width:100%}
.sn-inspektion-grid > .e-con{margin:0;width:auto!important;max-width:none!important}

@media(max-width:1024px){
  .sn-inspektion-grid{grid-template-columns:1fr;gap:32px}
  .sn-sprungreihe{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:767px){
  .sn-sprungreihe{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
  .sn-sprung{padding:16px 12px!important}
  .sn-sprung h3.elementor-heading-title{font-size:.86rem}
}

/* ==========================================================================
   27 · BILDER UND UNTERBRECHER
   Die Seiten wirkten sehr gleichfoermig (Rueckmeldung 02.09.2026). Drei
   Bausteine dagegen: ein Unterbrecher ueber die volle Breite, gestaltete
   Bildfelder fuer noch fehlende Fotos, und ein schmaler Hinweisstreifen.
   ========================================================================== */

/* --- Unterbrecher: Foto ueber die volle Breite mit Aussage darueber --- */
.sn-unterbrecher{
  position:relative;overflow:hidden;min-height:400px;
  display:flex!important;align-items:center;
  border-top:1px solid var(--sn-kante);border-bottom:1px solid var(--sn-kante);
}
.sn-unterbrecher::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(24,33,28,.94) 0%,rgba(24,33,28,.82) 42%,rgba(24,33,28,.34) 100%);
}
.sn-unterbrecher > *{position:relative;z-index:1}
.sn-unterbrecher-text{padding:64px 0!important;max-width:none}
.sn-unterbrecher-text > .e-con-inner{max-width:1360px;gap:12px}
/* Ueberschrift in einer Zeile - die 18ch-Grenze brach sie dreifach um
   (Alena, 18.09.2026: "nicht abgebrochen"). Umbruch nur noch, wenn der
   Bildschirm zu schmal ist. */
.sn-unterbrecher-text h2.elementor-heading-title{font-size:2.4rem;max-width:none;text-wrap:balance}
.sn-unterbrecher::after{
  background:linear-gradient(100deg,rgba(24,33,28,.94) 0%,rgba(24,33,28,.86) 50%,rgba(24,33,28,.34) 100%);
}
.sn-unterbrecher-text p{max-width:56ch;font-size:1.06rem}
/* Kicker und Knopf im Unterbrecher (Neuwagen-Zweirad, 18.09.2026) */
.sn-unterbrecher-text .elementor-widget-button{margin-top:10px}
.sn-unterbrecher-text .sn-label{margin-bottom:2px}

/* --- Bildfeld: wartet auf ein Foto vom Kunden ---
   Bewusst gestaltet und nicht als fremdes Stockfoto. So sieht Michael sofort,
   welche Aufnahme uns fehlt, und die Seite wirkt trotzdem nicht leer. --- */
.sn-fotoplatz{
  position:relative;border-radius:var(--sn-r-gross);
  border:1px dashed rgba(255,255,255,.28);
  background:
    radial-gradient(72% 60% at 30% 20%,rgba(124,185,133,.16) 0%,transparent 66%),
    radial-gradient(62% 54% at 82% 82%,rgba(90,158,184,.14) 0%,transparent 68%),
    rgba(255,255,255,.04);
  padding:34px 30px!important;justify-content:center;align-items:flex-start;
}
.sn-fotoplatz-hoch{min-height:440px}
.sn-fotoplatz-breit{min-height:260px}
.sn-fotoplatz h3.elementor-heading-title{font-size:1.16rem}
.sn-fotoplatz p{font-size:.94rem;max-width:34ch}
.sn-foto-marke{
  display:inline-block;margin-top:6px!important;
  font-size:.68rem!important;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sn-salbei)!important;border:1px solid var(--sn-kante);
  border-radius:99px;padding:5px 13px;
}
.sn-fotoplatz .elementor-icon{background:rgba(255,255,255,.14)}
.sn-fotoplatz .elementor-icon svg{fill:var(--sn-salbei-hell)!important}

/* --- Unfallbereich: Bildfeld links, Punkte rechts --- */
.sn-unfall-grid{display:grid!important;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:48px;align-items:start;width:100%}
.sn-unfall-grid > .e-con{margin:0;width:auto!important;max-width:none!important}

/* --- schmaler Hinweisstreifen unter dem Unfallbereich --- */
.sn-hinweisstreifen{
  display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center;
  margin-top:30px;padding:26px 30px;width:100%;
  background:rgba(255,255,255,.05);border:1px solid var(--sn-kante);
  border-left:3px solid var(--sn-salbei);border-radius:var(--sn-r);
}
.sn-hinweisstreifen > .e-con{margin:0;width:auto!important;max-width:none!important}
.sn-hinweisstreifen h3.elementor-heading-title{font-size:1.12rem}

/* --- Fuss des Inspektionsbereichs --- */
.sn-inspektion-fuss{margin-top:26px}

@media(max-width:1024px){
  .sn-unfall-grid{grid-template-columns:1fr;gap:28px}
  .sn-fotoplatz-hoch{min-height:280px}
  .sn-hinweisstreifen{grid-template-columns:1fr;gap:18px}
  .sn-unterbrecher{min-height:320px}
  .sn-unterbrecher-text h2.elementor-heading-title{font-size:1.9rem}
}
@media(max-width:767px){
  .sn-unterbrecher{min-height:260px}
  .sn-unterbrecher-text{padding:44px 0!important}
  .sn-fotoplatz{padding:26px 22px!important}
  .sn-fotoplatz-hoch,.sn-fotoplatz-breit{min-height:220px}
}
/* Linke Spalte im Inspektionsbereich: Garantiekarte und Bildfeld untereinander */
.sn-inspektion-links{gap:20px}
.sn-inspektion-links .sn-fotoplatz{min-height:230px}
/* Der Unterbrecher hatte oben und unten eine 1-px-Kante in rgba(255,255,255,.16).
   Auf dem Foto sah das aus wie ein heller Streifen. Weg damit - das Bild soll
   sauber durchlaufen (Alena, 02.09.2026). */
.sn-unterbrecher{border-top:0!important;border-bottom:0!important}
/* Auch die Baender daneben duerfen keine Kante an das Foto stossen lassen */
.sn-unterbrecher + .sn-band{border-top:0!important}

/* ==========================================================================
   28 · UEBER UNS, KONTAKT, GARANTIE
   ========================================================================== */
/* Kennzahlen: grosse Zahl, darunter die Bedeutung fuer den Leser */
.sn-kennzahlen .sn-note-zahl .elementor-heading-title{
  font-size:2.9rem!important;line-height:1!important;
  background:linear-gradient(100deg,#A9CFA3,#8FC4D6);
  -webkit-background-clip:text;background-clip:text;color:transparent!important;font-weight:800;
}
.sn-kennzahlen .sn-kachel h3.elementor-heading-title{font-size:1.06rem}
.sn-kennzahlen .sn-kachel p{font-size:.92rem}

/* Stationen in der Geschichte: Jahresspalte statt Symbol */
.sn-station-spalte{flex:0 0 132px!important;width:132px!important}
.sn-station-jahr{
  margin:0;font-size:.72rem!important;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sn-salbei)!important;
}
@media(max-width:767px){
  .sn-station-spalte{flex:0 0 88px!important;width:88px!important}
  .sn-kennzahlen .sn-note-zahl .elementor-heading-title{font-size:2.2rem!important}
}
/* Formularkarten, in denen der Autoforce1-Shortcode noch leer ausgibt, sollen
   nicht mit einem grossen Loch dastehen: der Knopf bleibt beim Text. */
.sn-formkarte{align-self:start}
.sn-formkarte > .elementor-widget-button:last-child{margin-top:6px!important;padding-top:0!important}

/* ==========================================================================
   29 · FUSSZEILE MIT FUENF SPALTEN (Vorlage Autohaus Totz, 02.09.2026)
   ========================================================================== */
.sn-ft-grid{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)) minmax(0,.9fr)!important;
  gap:44px}
.sn-fuss-marke p{font-size:.94rem}
.sn-fuss-oben .sn-label .elementor-heading-title{
  background:none;padding:0;border-radius:0;
  color:var(--sn-salbei)!important;font-size:.78rem!important;letter-spacing:.16em;
}
.sn-fuss-oben .sn-label{padding-bottom:0}
.sn-fuss-oben .sn-label::after{display:none}
/* Soziale Netze als Quadrate mit Kante, wie in der Vorlage */
.sn-social .elementor-social-icon{
  background:transparent!important;border:1px solid var(--sn-kante);
  border-radius:10px!important;width:44px;height:44px;margin:0 10px 0 0;
}
.sn-social .elementor-social-icon svg{fill:var(--sn-tinte)!important;width:17px;height:17px}
.sn-social .elementor-social-icon:hover{border-color:var(--sn-salbei);background:rgba(255,255,255,.05)!important}
.sn-social .elementor-social-icon:hover svg{fill:#fff!important}

@media(max-width:1024px){
  .sn-ft-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:32px}
}
@media(max-width:767px){
  .sn-ft-grid{grid-template-columns:1fr!important;gap:26px}
}

/* Danke-Seite: eine Spalte, mittig, nicht zu breit */
.sn-danke-reihe{display:flex!important;justify-content:center;width:100%}
.sn-danke-panel{max-width:720px;align-items:flex-start}
.sn-danke-haken .elementor-icon{width:64px;height:64px}
.sn-danke-haken .elementor-icon svg{width:28px;height:28px}
.sn-danke .sn-hero-panel h1.elementor-heading-title{font-size:2.5rem}
@media(max-width:767px){ .sn-danke .sn-hero-panel h1.elementor-heading-title{font-size:1.9rem!important} }

/* ==========================================================================
   30 · FAHRZEUGAUSGABE VON AUTOFORCE1
   Gilt fuer JEDE Seite, auf der [autoforce1_liste] steht - nicht nur fuer
   /alle-gebrauchtwagen/. Deshalb liegt das hier und nicht auf der Seite.

   Das Plugin bringt eine eigene, helle Optik mit: weisse Karten, rote Knoepfe,
   lila Symbole. Alles davon wird hier ueberschrieben. Die Klassen stammen aus
   der Ausgabe des Plugins (auto-item, auto-details, filter-row ...) - sie sind
   am 09.09.2026 aus dem gerenderten HTML gelesen.
   ========================================================================== */

/* --- Rahmen: Filter links, Liste rechts --- */
.autoforce1-container{max-width:100%!important;padding:0!important;margin:0!important;
  background:transparent!important}
.autoforce1-wrapper{
  display:grid!important;grid-template-columns:302px minmax(0,1fr);
  gap:30px;align-items:start;max-width:100%!important;background:transparent!important;
}

/* --- Sortierzeile ueber der Liste --- */
#sortform{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px;margin:0 0 26px!important;padding:0!important;background:transparent!important;
}
#sortformfoundcar{
  color:var(--sn-tinte)!important;font-weight:700;font-size:1.02rem;
  padding:0!important;background:transparent!important;border:0!important;
}
#sortformrow{margin:0!important;flex:0 0 auto}
#sortformrow .filter-col{padding:0!important}
#sortformrow label{display:none}

/* --- Auswahlfelder ueberall in der Fahrzeugausgabe --- */
.autoforce1-filter select,#sortierung{
  -webkit-appearance:none;appearance:none;cursor:pointer;
  background-color:rgba(255,255,255,.07)!important;
  background-image:linear-gradient(45deg,transparent 50%,var(--sn-salbei) 50%),
                   linear-gradient(135deg,var(--sn-salbei) 50%,transparent 50%)!important;
  background-position:calc(100% - 20px) 52%,calc(100% - 14px) 52%!important;
  background-size:6px 6px,6px 6px!important;background-repeat:no-repeat!important;
  border:1px solid var(--sn-kante)!important;border-radius:12px!important;
  color:#fff!important;padding:12px 42px 12px 15px!important;
  font-family:inherit!important;font-size:.94rem!important;width:100%!important;
  box-shadow:none!important;
}
.autoforce1-filter select option,#sortierung option{background:#2C3A32;color:#fff}
#sortierung{min-width:250px}

/* --- Filterspalte --- */
.autoforce1-filter{
  background:var(--sn-karte)!important;background-image:var(--sn-kachel-verlauf)!important;
  border:1px solid var(--sn-kante)!important;border-radius:var(--sn-r)!important;
  padding:26px 22px 24px!important;position:sticky;top:24px;
  box-shadow:var(--sn-schatten);
  /* ⚠ Die Spalte war 918 px hoch und damit hoeher als der Bildschirm - sie
     klebte zwar, scrollte aber trotzdem komplett weg (Kundenwunsch
     23.09.2026: "Filter beim Scrollen frueher bzw. dauerhaft nutzbar").
     Jetzt scrollt sie innerhalb der eigenen Flaeche mit. */
  max-height:calc(100vh - 48px);overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--sn-salbei) transparent;
}
.autoforce1-filter::-webkit-scrollbar{width:8px}
.autoforce1-filter::-webkit-scrollbar-thumb{background:var(--sn-salbei);border-radius:99px}
.autoforce1-filter::-webkit-scrollbar-track{background:transparent}
.autoforce1-filter label{
  display:block;color:var(--sn-tinte2)!important;
  font-size:.74rem!important;font-weight:800!important;letter-spacing:.1em;
  text-transform:uppercase;margin:0 0 7px!important;font-family:inherit!important;
}
.autoforce1-filter .filter-row{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;margin:0 0 16px!important;
}
.autoforce1-filter .filter-col{padding:0!important;min-width:0}
.autoforce1-filter .filter-col.full-width{grid-column:1 / -1}
/* Die Abstandshalter des Plugins brauchen wir nicht */
.autoforce1-filter form > div[style*="height: 30px"]{display:none!important}

/* Schieberegler (jQuery UI) */
.autoforce1-filter .slider-container{padding:6px 4px 0}
.autoforce1-filter .slider-range,.autoforce1-filter .ui-slider{
  background:rgba(255,255,255,.12)!important;border:0!important;
  height:5px!important;border-radius:99px!important;margin:10px 0 8px;
}
.autoforce1-filter .ui-slider-range{background:var(--sn-verlauf)!important;border-radius:99px}
.autoforce1-filter .ui-slider-handle{
  background:#fff!important;border:0!important;border-radius:50%!important;
  width:18px!important;height:18px!important;top:-7px!important;cursor:grab;
  box-shadow:0 4px 12px -3px rgba(0,0,0,.8)!important;
}
.autoforce1-filter .slider-values{
  display:flex;justify-content:space-between;
  font-size:.82rem;color:var(--sn-tinte2)!important;
}

/* Knoepfe der Filterspalte */
.autoforce1-filter .filter-button,#filter-submit-btn,#reset-filters{
  display:block;width:100%;margin:10px 0 0!important;
  border:0!important;border-radius:999px!important;
  padding:13px 20px!important;font-family:inherit!important;
  font-weight:700!important;font-size:.94rem!important;cursor:pointer;
  text-transform:none!important;letter-spacing:0!important;
}
#filter-submit-btn{background-color:#7CB985!important;background-image:var(--sn-verlauf)!important;
  color:#1E2A24!important}
#reset-filters{background:transparent!important;color:var(--sn-tinte)!important;
  border:1px solid var(--sn-kante)!important}
#reset-filters:hover{border-color:var(--sn-salbei)!important;color:#fff!important}
/* Der Aufklapp-Knopf wird nur auf dem Handy gebraucht */
#filter-button{display:none!important}
/* ⚠ Auf dem Handy klappt das Plugin den Filter ueber #filter-button und einen
   Inline-Stil auf #filter-options auf und zu. Unser display:block!important
   hatte den Filter dauerhaft offen gehalten - 948 px, das erste Fahrzeug erst
   nach 1,7 Bildschirmen (Mobile-Pruefung, 15.09.2026). */
@media(max-width:768px){
  #filter-button{
    display:block!important;width:100%;margin:0 0 14px!important;
    background-color:#7CB985!important;background-image:var(--sn-verlauf)!important;
    color:#1E2A24!important;border:0!important;border-radius:999px!important;
    padding:13px 20px!important;font-weight:700!important;font-size:.95rem!important;
    font-family:inherit!important;cursor:pointer;
  }
  .autoforce1-filter form#filter-options{display:none}   /* Inline-Stil des Plugins darf gewinnen */
  .autoforce1-filter form#filter-options[style*="block"]{display:block}
}

/* --- Die Liste --- */
.autoforce1-list{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;background:transparent!important;
}
.auto-item{
  display:flex!important;flex-direction:column;
  background-color:var(--sn-karte)!important;
  background-image:var(--sn-kachel-verlauf)!important;
  border:1px solid var(--sn-kante)!important;
  border-radius:var(--sn-r)!important;
  box-shadow:var(--sn-schatten)!important;
  padding:0!important;margin:0!important;overflow:hidden;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.auto-item:hover{transform:translateY(-5px);border-color:rgba(156,192,149,.48)!important;
  box-shadow:0 34px 64px -34px rgba(0,0,0,.95)!important}

/* Bild oben */
.auto-item .auto-item-first{order:1;padding:0!important;width:100%!important;margin:0!important}
.auto-item .auto-image{padding:0!important;margin:0!important;width:100%}
.auto-item .auto-image a{display:block;border-radius:0}
.auto-item .auto-image img{
  width:100%!important;height:230px!important;object-fit:cover;display:block;
  border-radius:0!important;margin:0!important;
}
/* Ueberschrift unter dem Bild */
.auto-item .auto-header{order:2;padding:20px 22px 0!important;margin:0!important;
  background:transparent!important;border:0!important}
.auto-item .auto-header h2{
  color:#fff!important;font-family:inherit!important;
  font-size:1.14rem!important;line-height:1.3!important;font-weight:700!important;
  margin:0!important;padding:0!important;letter-spacing:-.01em;
}
.auto-item .auto-item-second{order:3;padding:14px 22px 22px!important;width:100%!important;
  display:flex;flex-direction:column;flex:1}

/* Eckdaten als kleine Plaketten */
.auto-item .auto-details{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;margin:0 0 16px!important;padding:0!important;
}
.auto-item .detail{
  display:flex!important;align-items:center;gap:8px;min-width:0;
  background:rgba(255,255,255,.06)!important;
  border:1px solid var(--sn-kante)!important;border-radius:10px!important;
  padding:9px 11px!important;margin:0!important;
  color:var(--sn-tinte)!important;font-size:.84rem!important;
  font-family:inherit!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.auto-item .detail span{color:var(--sn-tinte)!important;font-family:inherit!important}
.auto-item .detail .icon{flex:0 0 auto;display:flex;align-items:center;
  width:18px;height:18px;margin:0!important;padding:0!important;background:none!important}
.auto-item .detail .icon svg{
  width:16px!important;height:16px!important;
  stroke:var(--sn-salbei)!important;color:var(--sn-salbei)!important;
}
.auto-item .detail .icon svg [fill="currentColor"]{fill:var(--sn-salbei)!important}

/* Preis und Knopf */
.auto-item .btns{
  display:flex!important;align-items:center;justify-content:space-between;
  gap:14px;margin:auto 0 0!important;padding:14px 0 0!important;
  border-top:1px solid var(--sn-kante);background:transparent!important;
}
.auto-item .auto-price{
  background:transparent!important;color:#fff!important;
  font-family:inherit!important;font-size:1.16rem!important;font-weight:800!important;
  padding:0!important;margin:0!important;border:0!important;
  text-transform:none!important;letter-spacing:-.01em;
}
.auto-item .details-link{
  background-color:#7CB985!important;background-image:var(--sn-verlauf)!important;
  color:#1E2A24!important;border:0!important;border-radius:999px!important;
  padding:11px 20px!important;font-family:inherit!important;
  font-weight:700!important;font-size:.9rem!important;
  text-decoration:none!important;text-transform:none!important;letter-spacing:0!important;
  white-space:nowrap;
}
.auto-item .details-link:hover{filter:brightness(1.08)}

/* Seitenwechsel */
.pagination{margin:30px 0 0!important;background:transparent!important}
.custom-pagination{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.custom-pagination a,.custom-pagination span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;height:42px;padding:0 12px;
  border:1px solid var(--sn-kante);border-radius:12px;
  color:var(--sn-tinte)!important;text-decoration:none;font-weight:700;font-size:.94rem;
}
.custom-pagination a:hover{border-color:var(--sn-salbei);background:rgba(255,255,255,.06)}
.custom-pagination .current{
  background-color:#7CB985!important;background-image:var(--sn-verlauf)!important;
  color:#1E2A24!important;border-color:transparent;
}
.autoforce1-list-backlink{color:var(--sn-tinte2)!important;opacity:.55;margin-top:26px!important}
.autoforce1-list-backlink a{color:var(--sn-tinte2)!important}

/* --- Handy und Tablet --- */
@media(max-width:1200px){
  .autoforce1-wrapper{grid-template-columns:262px minmax(0,1fr);gap:22px}
  .autoforce1-list{grid-template-columns:1fr}
}
@media(max-width:1024px){
  .autoforce1-wrapper{grid-template-columns:1fr}
  .autoforce1-filter{position:static;top:auto}
  .autoforce1-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767px){
  .autoforce1-list{grid-template-columns:1fr}
  .auto-item .auto-image img{height:200px!important}
  .auto-item .auto-details{grid-template-columns:1fr}
  .auto-item .btns{flex-direction:column;align-items:stretch}
  .auto-item .details-link{text-align:center}
  #sortform{flex-direction:column;align-items:stretch}
  #sortierung{min-width:0}
}
/* Die Fahrzeugliste steht auf dieser Seite ganz oben - ohne Buehne davor
   (Alena, 09.09.2026). Etwas Luft zur Kopfzeile reicht. */
.sn-bestand-oben{padding-top:52px!important;padding-bottom:96px!important}
/* Ruhige Seitenueberschrift ueber der Fahrzeugliste - traegt das Thema der
   Seite, ohne wie eine zweite Buehne zu wirken. */
.sn-bestand-titel{margin-bottom:22px}
.sn-bestand-titel .elementor-heading-title{
  font-size:1.5rem!important;line-height:1.3!important;font-weight:600!important;
  color:var(--sn-text)!important;letter-spacing:.01em}
@media(max-width:767px){.sn-bestand-titel .elementor-heading-title{font-size:1.25rem!important}}
/* ⚠ Das Plugin setzt auf Filterspalte und Liste eigene Breiten und macht die
   Filterspalte zu einem Flex-Container. Im Raster schrumpfte sie dadurch auf
   76 px zusammen (am 09.09.2026 gemessen). Beide Spalten muessen ihre
   Rasterbahn ausfuellen. */
.autoforce1-wrapper > .autoforce1-filter,
.autoforce1-wrapper > .autoforce1-list{
  width:100%!important;max-width:none!important;min-width:0!important;
  flex:none!important;float:none!important;
}
.autoforce1-filter{display:block!important}
.autoforce1-filter form{width:100%}
@media(min-width:769px){ .autoforce1-filter form{display:block!important} }
/* Preis und Knopf nebeneinander - das Plugin stapelt sie mittig */
.auto-item .btns{flex-direction:row!important;align-items:center!important;
  justify-content:space-between!important;text-align:left!important}
/* ⚠ Das Plugin bringt eine eigene Schrift mit ("Chalkboard SE"). Sie faellt
   erst auf, wenn Fahrzeuge da sind. Ein vorangestelltes body ist noetig,
   sonst gewinnt die Plugin-Regel. */
body .autoforce1-container,body .autoforce1-container *,
body #sortform,body #sortform *{
  font-family:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif!important;
}
/* Preis und Knopf standen untereinander - das Plugin gibt beiden volle Breite */
.auto-item .auto-price,.auto-item .details-link{
  width:auto!important;flex:0 1 auto!important;display:inline-flex!important;
  align-items:center;justify-content:center;
}
.auto-item .btns{flex-wrap:nowrap!important}
/* Schieberegler: die Werte stiessen an das naechste Feld */
.autoforce1-filter .slider-container{margin:0 0 6px}
.autoforce1-filter .slider-values{margin-top:2px;padding-bottom:2px}
.autoforce1-filter .filter-col.full-width{margin-bottom:6px}
.autoforce1-filter .filter-row{margin:0 0 18px!important}
.autoforce1-filter .filter-row:last-of-type{margin-bottom:8px!important}

/* ==========================================================================
   31 · FAHRZEUGE UNTEREINANDER (Alena, 09.09.2026)
   Eine Kachel je Zeile. Damit die Breite genutzt wird, liegt das Bild links
   und der Inhalt rechts daneben - ueber ein Raster, weil Ueberschrift und
   Daten im HTML des Plugins zwei getrennte Geschwister sind.
   ========================================================================== */
.autoforce1-list{grid-template-columns:1fr!important;gap:20px}
.auto-item{
  display:grid!important;
  grid-template-columns:360px minmax(0,1fr);
  grid-template-rows:auto 1fr;
  grid-template-areas:"bild kopf" "bild inhalt";
}
.auto-item .auto-item-first{grid-area:bild;height:100%}
.auto-item .auto-image{height:100%}
.auto-item .auto-image a{height:100%;display:block}
.auto-item .auto-image img{height:100%!important;min-height:238px}
.auto-item .auto-header{grid-area:kopf;padding:24px 26px 0!important}
.auto-item .auto-header h2{font-size:1.3rem!important}
.auto-item .auto-item-second{grid-area:inhalt;padding:14px 26px 24px!important}
/* Bei voller Breite passen drei Plaketten nebeneinander */
.auto-item .auto-details{grid-template-columns:repeat(3,minmax(0,1fr))!important}

@media(max-width:1200px){
  .auto-item{grid-template-columns:300px minmax(0,1fr)}
  .auto-item .auto-details{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:1024px){
  .autoforce1-list{grid-template-columns:1fr!important}
}
@media(max-width:767px){
  .auto-item{grid-template-columns:1fr;grid-template-rows:auto auto auto;
    grid-template-areas:"bild" "kopf" "inhalt"}
  .auto-item .auto-image img{height:210px!important;min-height:0}
  .auto-item .auto-details{grid-template-columns:1fr!important}
}

/* ==========================================================================
   32 · SCHRIFTBILD DER FAHRZEUGAUSGABE
   Die Schriftart ist ueber Abschnitt 30 schon Archivo. Hier geht es um
   Groessen, Staerken und Auszeichnung, damit die Liste aussieht wie der
   Rest der Seite (Alena, 09.09.2026).
   ========================================================================== */
/* Beschriftungen der Filterspalte in unsere Label-Optik */
.autoforce1-filter label{
  text-transform:uppercase!important;letter-spacing:.1em!important;
  font-size:.72rem!important;font-weight:800!important;
  color:var(--sn-salbei)!important;margin:0 0 8px!important;
}
.autoforce1-filter .filter-col{margin-top:2px}
.autoforce1-filter .slider-values span{font-size:.8rem!important;font-weight:600!important;
  color:var(--sn-tinte2)!important}

/* Fahrzeugtitel wie eine Kachelueberschrift */
.auto-item .auto-header h2{
  font-size:1.28rem!important;font-weight:700!important;line-height:1.28!important;
  letter-spacing:-.015em!important;color:#fff!important;
}
/* Eckdaten etwas ruhiger */
.auto-item .detail,.auto-item .detail span{
  font-size:.86rem!important;font-weight:500!important;letter-spacing:0!important;
}
/* Preis: das Wort klein und gedaempft, die Zahl gross */
.auto-item .auto-price{
  font-size:1.32rem!important;font-weight:800!important;letter-spacing:-.02em!important;
  color:#fff!important;
}
.auto-item .details-link{font-size:.92rem!important;font-weight:700!important}

/* Kopfzeile der Liste */
#sortformfoundcar{font-size:1.06rem!important;font-weight:700!important;letter-spacing:-.01em}
#sortierung{font-size:.94rem!important;font-weight:600!important}
.custom-pagination a,.custom-pagination span{font-size:.94rem!important;font-weight:700!important}
/* Die Filterspalte ist 302 px breit - zwei Felder nebeneinander sind zu eng,
   "Karosserieform:" lief in "Farbe:" hinein. Alles untereinander. */
.autoforce1-filter .filter-row{grid-template-columns:1fr!important;gap:0!important;
  margin:0 0 16px!important}
.autoforce1-filter .filter-col{margin:0 0 14px}
.autoforce1-filter .filter-col:last-child{margin-bottom:0}
.autoforce1-filter label{white-space:normal;overflow-wrap:anywhere}
.autoforce1-filter .slider-container{margin:0 0 4px}
/* Die Werte unter den Schiebereglern klebten an der naechsten Beschriftung. */
.autoforce1-filter .filter-col.full-width{margin-bottom:24px}
.autoforce1-filter .slider-container{margin:0!important;padding-top:2px}
.autoforce1-filter .slider-range,.autoforce1-filter .ui-slider{margin:6px 0 0!important}
.autoforce1-filter .slider-values{margin-top:10px!important}
/* Auf dem Handy lagen "28 Fahrzeuge gefunden" und das Sortierfeld
   uebereinander - das Plugin positioniert die Zeile absolut. */
#sortform{position:relative!important}
#sortformfoundcar,#sortformrow{position:static!important;float:none!important}
@media(max-width:767px){
  #sortform{flex-direction:column!important;align-items:stretch!important;gap:12px!important}
  #sortformrow,#sortformrow .filter-col{width:100%!important;flex:1 1 auto!important}
  #sortformfoundcar{width:100%!important}
}
/* Auf dem Handy sicher untereinander: als Raster, nicht als Flex-Zeile.
   Das min-width des Sortierfeldes hat es sonst aus dem Bild geschoben. */
@media(max-width:767px){
  #sortform{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;
    flex-direction:column!important}
  #sortformfoundcar{order:1;width:100%!important}
  #sortformrow{order:2;width:100%!important;display:block!important}
  #sortformrow .filter-col{width:100%!important;padding:0!important}
  #sortierung{min-width:0!important;width:100%!important;max-width:100%!important}
}
/* Das Plugin gibt der Sortierzeile eine feste Hoehe. Auf dem Handy lief das
   Sortierfeld deshalb unter die Filterkarte. Hoehe frei geben. */
#sortform{height:auto!important;min-height:0!important;overflow:visible!important}
#sortformrow{height:auto!important}

/* ==========================================================================
   33 · DEN WEISSEN SCHEIN DES PLUGINS ABSCHALTEN
   Das Plugin legt auf die Eckdaten-Plaketten einen doppelten Schlagschatten
   (grau nach rechts unten, WEISS nach links oben - eine helle "Neumorphismus"-
   Optik). Auf dunklem Grund sieht das aus wie ein Leuchten um jede Plakette.
   Am 09.09.2026 gemessen: rgb(190,190,190) 5px 5px 20px, rgb(255,255,255) -5px…
   ========================================================================== */
.autoforce1-container .detail,
.autoforce1-container select,
.autoforce1-container button,
.autoforce1-container input,
.autoforce1-container .auto-price,
.autoforce1-container .details-link,
.autoforce1-container .auto-image,
.autoforce1-container .auto-image img,
.autoforce1-container .auto-header,
#sortform select{
  box-shadow:none!important;text-shadow:none!important;
}
/* Unsere eigenen Schatten bleiben - aber nur dort, wo sie hingehoeren */
.auto-item{box-shadow:var(--sn-schatten)!important}
.auto-item:hover{box-shadow:0 34px 64px -34px rgba(0,0,0,.95)!important}
.autoforce1-filter{box-shadow:var(--sn-schatten)!important}

/* Langer Text lief aus der Plakette heraus ("Hybrid (Benzin/Elektro)") */
.auto-item .detail{gap:9px;padding:10px 12px!important;min-width:0}
.auto-item .detail span{
  min-width:0!important;flex:1 1 auto;display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Lange Werte wie "Hybrid (Benzin/Elektro)" wurden abgeschnitten. Lieber
   umbrechen - im Raster sind ohnehin alle Plaketten einer Zeile gleich hoch. */
.auto-item .detail{align-items:center;min-height:42px}
.auto-item .detail span{
  white-space:normal!important;overflow:visible!important;text-overflow:clip!important;
  line-height:1.25!important;overflow-wrap:break-word;
}
.auto-item .detail .icon{align-self:flex-start;margin-top:2px!important}

/* ==========================================================================
   34 · FAHRZEUGKACHEL NACH DEM VORBILD VON AUTOHAUS TOTZ (09.09.2026)
   Aufbau uebernommen, Farben und Formen aus unserer CI:
   farbiger Balken links · Titel ueber die volle Breite · Hinweisplaketten ·
   Bild links, Eckdaten rechts in zwei Spalten · Preis und Knopf unten
   nebeneinander.
   ========================================================================== */
.auto-item{
  grid-template-columns:330px minmax(0,1fr)!important;
  grid-template-rows:auto auto 1fr!important;
  grid-template-areas:"kopf kopf" "bild inhalt" "bild inhalt"!important;
  padding:30px 32px 32px 36px!important;
  gap:0 30px;position:relative;overflow:hidden;
}
/* Der Balken an der linken Kante - im Farbverlauf statt einfarbig */
.auto-item::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:var(--sn-verlauf);pointer-events:none;
}

/* Titel oben ueber die ganze Breite */
.auto-item .auto-header{
  grid-area:kopf;padding:0 0 16px!important;margin:0!important;
  display:flex;flex-direction:column;gap:12px;align-items:flex-start;
}
.auto-item .auto-header h2{
  font-size:1.5rem!important;font-weight:800!important;line-height:1.2!important;
  letter-spacing:-.02em!important;
}

/* Hinweisplaketten ("heute schon 21x angesehen").
   ⚠ Sie werden nachgeladen und sind erst gefuellt, wenn Aufrufe da sind. */
.af1-scarcity-placeholder{display:flex;flex-wrap:wrap;gap:10px}
.af1-scarcity-placeholder:empty{display:none}
.af1-scarcity-placeholder > *{
  display:inline-flex!important;align-items:center;gap:8px;
  background:rgba(255,255,255,.08)!important;
  border:1px solid var(--sn-kante)!important;border-radius:999px!important;
  padding:7px 14px!important;margin:0!important;
  color:var(--sn-tinte)!important;font-size:.74rem!important;font-weight:800!important;
  letter-spacing:.08em;text-transform:uppercase;
}
.af1-scarcity-placeholder > *::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--sn-salbei);flex:0 0 auto;
}

/* Bild links, eingerueckt und gerundet */
.auto-item .auto-item-first{grid-area:bild;height:auto}
.auto-item .auto-image,.auto-item .auto-image a{height:auto}
.auto-item .auto-image img{
  height:250px!important;min-height:0!important;
  border-radius:16px!important;
}

/* Eckdaten rechts, zwei Spalten */
.auto-item .auto-item-second{grid-area:inhalt;padding:0!important;
  display:flex;flex-direction:column}
.auto-item .auto-details{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
.auto-item .detail{border-radius:10px!important;padding:12px 14px!important;min-height:46px}

/* Preis und Knopf unten nebeneinander, gleich breit */
.auto-item .btns{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px;margin-top:auto!important;padding-top:16px!important;border-top:0!important;
}
.auto-item .auto-price{
  width:100%!important;justify-content:center;
  background:rgba(255,255,255,.08)!important;
  border:1px solid var(--sn-kante)!important;border-radius:999px!important;
  padding:14px 18px!important;font-size:1.08rem!important;
}
.auto-item .details-link{width:100%!important;padding:14px 18px!important;
  justify-content:center;font-size:.98rem!important}

@media(max-width:1200px){
  .auto-item{grid-template-columns:280px minmax(0,1fr)!important;padding:26px 26px 28px 30px!important}
  .auto-item .auto-image img{height:220px!important}
}
@media(max-width:767px){
  .auto-item{grid-template-columns:1fr!important;
    grid-template-areas:"kopf" "bild" "inhalt"!important;
    grid-template-rows:auto auto auto!important;gap:18px 0;padding:24px 22px 26px 26px!important}
  .auto-item .auto-header{padding-bottom:0!important}
  .auto-item .auto-header h2{font-size:1.24rem!important}
  .auto-item .auto-image img{height:200px!important}
  .auto-item .auto-details{grid-template-columns:1fr!important}
  .auto-item .btns{grid-template-columns:1fr!important}
}

/* ==========================================================================
   35 · FAHRZEUG-SLIDER VON AUTOFORCE1
   [AF-FAHRZEUG-SLIDER] laeuft seit dem Update vom 09.09.2026. Er bringt eine
   eigene helle Optik mit (weisse Karten #fff, Kante #e3e5e8, rote Plakette
   #d63638) und setzt sie ueber ein eingebettetes <style> - deshalb hier
   durchgaengig !important.
   ========================================================================== */
.af1-slider-section{background:transparent!important;padding:0!important;margin:0!important}
.af1-slider-head{
  display:flex!important;align-items:baseline;justify-content:space-between;
  gap:20px;margin:0 0 18px!important;background:transparent!important;
}
.af1-slider-head > *{color:var(--sn-tinte)!important;background:transparent!important}
.af1-slider-more{
  color:var(--sn-salbei-hell)!important;text-decoration:none!important;
  font-weight:700!important;font-size:.92rem!important;
}
.af1-slider-more:hover{color:#fff!important}
.af1-slider-wrap{background:transparent!important}
.af1-slider-track{gap:20px!important;padding:4px 0 10px!important}

/* Die Karten in unsere Optik */
.af1-slider-card{
  background:var(--sn-karte)!important;
  background-image:var(--sn-kachel-verlauf)!important;
  border:1px solid var(--sn-kante)!important;
  border-radius:var(--sn-r)!important;
  box-shadow:var(--sn-schatten)!important;
  color:var(--sn-tinte)!important;overflow:hidden!important;
}
.af1-slider-card:hover{
  transform:translateY(-5px)!important;
  border-color:rgba(156,192,149,.48)!important;
  box-shadow:0 34px 64px -34px rgba(0,0,0,.95)!important;
}
.af1-slider-media{background:rgba(255,255,255,.06)!important;border-radius:0!important}
.af1-slider-body{padding:16px 18px 18px!important;gap:7px!important;background:transparent!important}
.af1-slider-title{
  color:#fff!important;font-size:1.02rem!important;font-weight:700!important;
  line-height:1.3!important;letter-spacing:-.01em!important;
}
.af1-slider-meta{color:var(--sn-tinte2)!important;font-size:.85rem!important;line-height:1.45!important}
.af1-slider-price{
  color:#fff!important;font-size:1.12rem!important;font-weight:800!important;
  letter-spacing:-.02em!important;margin-top:auto!important;padding-top:8px!important;
}
/* Die rote Plakette des Plugins auf unsere Farbe drehen */
.af1-slider-badge{
  background:var(--sn-verlauf)!important;color:#1E2A24!important;
  border-radius:999px!important;font-weight:800!important;
  letter-spacing:.04em;padding:5px 12px!important;
}
/* Pfeile */
.af1-slider-arrow{
  background:rgba(31,41,35,.92)!important;color:var(--sn-tinte)!important;
  border:1px solid var(--sn-kante)!important;border-radius:50%!important;
  width:44px!important;height:44px!important;box-shadow:none!important;
}
.af1-slider-arrow:hover{
  background:var(--sn-karte)!important;border-color:var(--sn-salbei)!important;color:#fff!important;
}
.af1-slider-arrow svg{fill:currentColor!important;stroke:currentColor!important}

/* ==========================================================================
   36 · DIE FORMULARE VON AUTOFORCE1
   Seit dem Update rendern sie. Sie bringen eigene Klassen mit:
   #sell-car-form, .spec-label, .spec-value, .seo-heins-headline und wieder
   .filter-row/.filter-col. Gilt fuer alle Seiten mit .sn-formular.
   ========================================================================== */
/* ⚠ Das Plugin setzt eine eigene Ueberschrift ins Formular ("Jetzt Auto
   verkaufen"). Wir haben darueber schon eine - die des Plugins fliegt raus. */
.sn-formular .seo-heins-headline,
.sn-formular h2.seo-heins-headline{display:none!important}
.sn-formular #success-message .seo-heins-headline{display:block!important}
.sn-formular #success-message .seo-heins-headline p{color:var(--sn-tinte)!important}

.sn-formular form{display:block!important;width:100%}
.sn-formular .filter-row{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;margin:0 0 14px!important;
}
.sn-formular .filter-col{padding:0!important;min-width:0}
.sn-formular .filter-col.full-width{grid-column:1 / -1}
.sn-formular .spec-label{
  display:block;color:var(--sn-tinte2)!important;
  font-size:.78rem!important;font-weight:800!important;letter-spacing:.08em;
  text-transform:uppercase;margin:0 0 7px!important;
}
.sn-formular .spec-value,
.sn-formular input[type=date],.sn-formular input[type=number]{
  background:rgba(255,255,255,.07)!important;
  border:1px solid var(--sn-kante)!important;border-radius:14px!important;
  color:#fff!important;padding:14px 16px!important;font-size:1rem!important;
  width:100%!important;box-shadow:none!important;margin:0!important;
}
/* Datumsfeld: ohne color-scheme bleibt der Kalender hell und das Symbol
   unsichtbar auf dunklem Grund (Erstzulassung). */
.sn-formular input[type=date]{color-scheme:dark;min-height:52px}
.sn-formular input[type=date]::-webkit-calendar-picker-indicator{
  filter:invert(1) opacity(.65);cursor:pointer;
}
.sn-formular input[type=date]::-webkit-calendar-picker-indicator:hover{filter:invert(1) opacity(1)}
.sn-formular input[type=date]::-webkit-datetime-edit{color:#fff}
.sn-formular input[type=number]::-webkit-outer-spin-button,
.sn-formular input[type=number]::-webkit-inner-spin-button{filter:invert(1) opacity(.6)}
.sn-formular textarea.spec-value{min-height:110px;resize:vertical}
.sn-formular input[type=submit]{
  background-color:#7CB985!important;background-image:var(--sn-verlauf)!important;
  color:#1E2A24!important;border:0!important;border-radius:999px!important;
  padding:15px 32px!important;font-weight:700!important;font-size:1rem!important;
  width:100%!important;cursor:pointer;margin-top:4px!important;
  text-transform:none!important;letter-spacing:0!important;
}
.sn-formular input[type=submit]:hover{filter:brightness(1.08)}
/* Das Feld der Spamfalle bleibt unsichtbar */
.sn-formular .field-check{position:absolute!important;left:-9999px!important}

@media(max-width:767px){
  .sn-formular .filter-row{grid-template-columns:1fr!important}
  .af1-slider-track{gap:14px!important}
}
/* Der Slider bringt eine eigene Kopfzeile mit "Alle Fahrzeuge ansehen" mit.
   Wir haben darueber bereits Ueberschrift und Knopf - die des Plugins raus. */
.sn-af1-slider .af1-slider-head{display:none!important}

/* ==========================================================================
   37 · RECHTSSEITEN (Impressum, Datenschutz)
   Sie bestehen nur aus Überschriften und Absätzen. Ohne eigene Regeln erben
   sie die grossen Ueberschriftengroessen der Startseite - das wirkt gedraengt
   und ist auf voller Breite schlecht lesbar (Alena, 09.09.2026).

   Angesprochen ueber die Body-Klassen der beiden Seiten (81 Impressum,
   84 Datenschutz) - so bleibt alles im globalen CSS, ohne Seiten-CSS.

   ⚠ Die Regeln muessen auf [data-elementor-type="wp-page"] eingegrenzt sein.
   Ohne diese Einschraenkung treffen sie auch Kopf- und Fusszeile, weil die
   Theme-Builder-Vorlagen im selben body liegen: das Menue war unterstrichen
   und "Vertragspartner" im Markenband riesig.
   ========================================================================== */
body:is(.page-id-81,.page-id-84) [data-elementor-type="wp-page"] .e-con-inner{max-width:860px}

body:is(.page-id-81,.page-id-84) [data-elementor-type="wp-page"] .elementor-widget-heading .elementor-heading-title{
  font-size:1.24rem!important;line-height:1.35!important;
  color:#fff!important;font-weight:700!important;letter-spacing:-.01em!important;
}
body:is(.page-id-81,.page-id-84) [data-elementor-type="wp-page"] .elementor-widget-heading:first-of-type .elementor-heading-title{
  font-size:2.6rem!important;line-height:1.1!important;font-weight:800!important;
}
body:is(.page-id-81,.page-id-84) [data-elementor-type="wp-page"] .elementor-widget-heading{margin-top:38px}
body:is(.page-id-81,.page-id-84) [data-elementor-type="wp-page"] .elementor-widget-heading:first-of-type{margin-top:0}

body:is(.page-id-81,.page-id-84) [data-elementor-type="wp-page"] .elementor-widget-text-editor{margin-top:10px}
body:is(.page-id-81,.page-id-84) [data-elementor-type="wp-page"] .elementor-widget-text-editor p{
  font-size:1rem!important;line-height:1.72!important;color:var(--sn-tinte2)!important;
  margin:0 0 14px;
}
body:is(.page-id-81,.page-id-84) [data-elementor-type="wp-page"] .elementor-widget-text-editor p:last-child{margin-bottom:0}
body:is(.page-id-81,.page-id-84) [data-elementor-type="wp-page"] strong{color:#fff}
body:is(.page-id-81,.page-id-84) [data-elementor-type="wp-page"] a{
  color:var(--sn-salbei-hell);text-decoration:underline;text-underline-offset:3px;
  overflow-wrap:anywhere;
}
body:is(.page-id-81,.page-id-84) [data-elementor-type="wp-page"] a:hover{color:#fff}
body:is(.page-id-81,.page-id-84) [data-elementor-type="wp-page"] ul{margin:0 0 14px;padding-left:22px}
body:is(.page-id-81,.page-id-84) [data-elementor-type="wp-page"] li{color:var(--sn-tinte2);line-height:1.72;margin-bottom:6px}

body:is(.page-id-81,.page-id-84) [data-elementor-type="wp-page"] > .e-con.e-parent{
  padding-top:72px!important;padding-bottom:96px!important;
}
@media(max-width:767px){
  body:is(.page-id-81,.page-id-84) [data-elementor-type="wp-page"] .elementor-widget-heading:first-of-type .elementor-heading-title{font-size:1.9rem!important}
  body:is(.page-id-81,.page-id-84) [data-elementor-type="wp-page"] .elementor-widget-heading .elementor-heading-title{font-size:1.12rem!important}
}

/* ==========================================================================
   38 · KONTAKTFORMULAR DES PLUGINS
   [AF-kontaktformular] nutzt andere Klassen als das Ankaufformular:
   form.kontakt-formular mit blanken <label> und <input>, ohne .spec-*.
   ========================================================================== */
.sn-formular .kontakt-formular{background:transparent!important;padding:0!important;
  border:0!important;box-shadow:none!important}
.sn-formular .kontakt-formular label{
  display:block;color:var(--sn-tinte2)!important;background:transparent!important;
  font-size:.78rem!important;font-weight:800!important;letter-spacing:.08em;
  text-transform:uppercase;margin:0 0 7px!important;
}
.sn-formular .kontakt-formular input[type=text],
.sn-formular .kontakt-formular input[type=email],
.sn-formular .kontakt-formular input[type=tel],
.sn-formular .kontakt-formular textarea{
  background:rgba(255,255,255,.07)!important;
  border:1px solid var(--sn-kante)!important;border-radius:14px!important;
  color:#fff!important;padding:14px 16px!important;font-size:1rem!important;
  width:100%!important;box-shadow:none!important;margin:0 0 16px!important;
}
.sn-formular .kontakt-formular textarea{min-height:120px;resize:vertical}
.sn-formular .kontakt-name-fields{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;
}
.sn-formular .kontakt-name-field{min-width:0}
.sn-formular .kontakt-formular input[type=submit]{
  background-color:#7CB985!important;background-image:var(--sn-verlauf)!important;
  color:#1E2A24!important;border:0!important;border-radius:999px!important;
  padding:15px 32px!important;font-weight:700!important;font-size:1rem!important;
  width:100%!important;cursor:pointer;margin:4px 0 0!important;
}
@media(max-width:767px){
  .sn-formular .kontakt-name-fields{grid-template-columns:1fr!important}
}

/* ==========================================================================
   39 · ALTE ROTE HINWEISKAESTEN AUF DEN RECHTSSEITEN
   Auf der Datenschutzseite steckt noch ein Kasten aus der ersten Fassung mit
   fest eingetragenem Rot (#DB3145) und rosa Flaeche (#FBEEF0). Auf dunklem
   Grund stand dort helle Schrift auf hellrosa - Kontrast 1,0.
   ⚠ Dauerhafte Loesung: Die Datenschutzseite wird ohnehin ueber e-Recht24
     ersetzt. Bis dahin faengt diese Regel den Kasten ab.
   ========================================================================== */
[style*="#FBEEF0"],[style*="#fbeef0"]{
  background:rgba(255,255,255,.06)!important;
  border-left-color:var(--sn-salbei)!important;
  border-radius:14px;
}
[style*="#FBEEF0"] *,[style*="#fbeef0"] *{color:var(--sn-tinte)!important}
[style*="#FBEEF0"] strong,[style*="#fbeef0"] strong{color:#fff!important}

/* ==========================================================================
   40 · TRUSTINDEX-BEWERTUNGSRASTER
   Das Widget laeuft auf der Voreinstellung "dark-background". Die Karten sind
   damit fast schwarz (#191919) und die Kopfzeile #222 - auf unserem gruenen
   Grund wirkt das wie ein Fremdkoerper (Alena, 09.09.2026).
   Hier auf unsere Kachelfarben gezogen. Gilt ueberall, wo das Raster steht.
   ⚠ Nur das Raster - der kleine Knopf mit Popup hat kein .ti-review-item und
     bleibt unberuehrt.
   ========================================================================== */
.ti-widget .ti-review-item .ti-inner{
  background-color:var(--sn-karte)!important;
  background-image:var(--sn-kachel-verlauf)!important;
  border:1px solid var(--sn-kante)!important;
  border-radius:var(--sn-r)!important;
  box-shadow:var(--sn-schatten)!important;
}
.ti-widget .ti-widget-header{
  background-color:var(--sn-karte)!important;
  background-image:var(--sn-kachel-verlauf)!important;
  border:1px solid var(--sn-kante)!important;
  border-radius:var(--sn-r)!important;
}
.ti-widget .ti-name,.ti-widget .ti-header-rating-text{color:#fff!important}
.ti-widget .ti-date{color:var(--sn-tinte2)!important}
.ti-widget .ti-review-content,
.ti-widget .ti-review-text-container{color:var(--sn-tinte)!important}
.ti-widget .ti-read-more{color:var(--sn-salbei-hell)!important;font-weight:700!important}
.ti-widget .ti-read-more:hover{color:#fff!important}

/* Die beiden Knoepfe des Widgets in unsere Optik */
.ti-widget [class*="write-review"],
.ti-widget .ti-load-more,.ti-widget [class*="load-more"]{
  background-color:transparent!important;
  border:1px solid var(--sn-kante)!important;border-radius:999px!important;
  color:var(--sn-tinte)!important;font-weight:700!important;
}
.ti-widget [class*="write-review"]:hover,
.ti-widget [class*="load-more"]:hover{
  border-color:var(--sn-salbei)!important;color:#fff!important;
  background-color:rgba(255,255,255,.06)!important;
}
/* ⚠ Die Karten blieben trotz !important schwarz. Grund: Trustindex liefert
   sein CSS vom eigenen CDN und setzt dort
   .ti-widget[data-set-id="dark-background"] .ti-review-item .ti-inner
   - vier Klassen, also spezifischer als unsere drei. Das Stylesheet ist
   fremddomainig, deshalb taucht die Regel in document.styleSheets nicht auf.
   Mit body davor und dem Attributselektor liegen wir darueber. */
body .ti-widget[data-set-id] .ti-review-item .ti-inner{
  background-color:var(--sn-karte)!important;
  background-image:var(--sn-kachel-verlauf)!important;
  border:1px solid var(--sn-kante)!important;
  border-radius:var(--sn-r)!important;
}
body .ti-widget[data-set-id] .ti-widget-header{
  background-color:var(--sn-karte)!important;
  background-image:var(--sn-kachel-verlauf)!important;
  border:1px solid var(--sn-kante)!important;
  border-radius:var(--sn-r)!important;
}
body .ti-widget[data-set-id] .ti-name,
body .ti-widget[data-set-id] .ti-header-rating-text{color:#fff!important}
body .ti-widget[data-set-id] .ti-date{color:var(--sn-tinte2)!important}
body .ti-widget[data-set-id] .ti-review-content{color:var(--sn-tinte)!important}
body .ti-widget[data-set-id] .ti-read-more{color:var(--sn-salbei-hell)!important}
/* Die genaue Regel aus 79-dark-background.css (vom CDN geholt und gelesen):
     .ti-widget[data-layout-id='79'][data-set-id='dark-background']
       .ti-review-item>.ti-inner { background-color:#191919 !important }
   Das sind fuenf Klassen. Mit body plus beiden Attributselektoren und dem
   Kindkombinator liegen wir darueber. */
body .ti-widget[data-layout-id][data-set-id] .ti-review-item > .ti-inner{
  background-color:var(--sn-karte)!important;
  background-image:var(--sn-kachel-verlauf)!important;
  border-color:var(--sn-kante)!important;
  border-width:1px!important;border-style:solid!important;
  border-radius:var(--sn-r)!important;
}
body .ti-widget[data-layout-id][data-set-id] .ti-widget-header{
  background-color:var(--sn-karte)!important;
  background-image:var(--sn-kachel-verlauf)!important;
  border-color:var(--sn-kante)!important;border-width:1px!important;border-style:solid!important;
}
body .ti-widget[data-layout-id][data-set-id] .ti-ai-summary-item > .ti-inner{
  background-color:var(--sn-karte)!important;
}

/* ==========================================================================
   41 · INNERER RAHMEN IM BEWERTUNGSRASTER
   Um jeden Bewertungstext lag noch ein zweiter Kasten. Auf dem schwarzen
   Grund der Voreinstellung faellt er nicht auf, auf unserem Gruen schon.
   Statt die Quelle zu suchen: alle inneren Flaechen, Rahmen und Schatten des
   Widgets abraeumen. Die Karte selbst behaelt ihre Optik.
   ========================================================================== */
body .ti-widget[data-layout-id][data-set-id] .ti-review-item > .ti-inner > *,
body .ti-widget[data-layout-id][data-set-id] .ti-review-content,
body .ti-widget[data-layout-id][data-set-id] .ti-review-text-container,
body .ti-widget[data-layout-id][data-set-id] .ti-review-header,
body .ti-widget[data-layout-id][data-set-id] .ti-profile-details{
  background:none!important;background-color:transparent!important;
  border:0!important;box-shadow:none!important;outline:none!important;
  border-radius:0!important;
}
/* Der Knopf "Eine Bewertung schreiben" war noch schwarz */
body .ti-widget[data-layout-id][data-set-id] .ti-header-write-btn,
body .ti-widget[data-layout-id][data-set-id] .ti-header-write-btn-container > *{
  background:transparent!important;background-color:transparent!important;
  border:1px solid var(--sn-kante)!important;border-radius:999px!important;
  color:var(--sn-tinte)!important;font-weight:700!important;
}
body .ti-widget[data-layout-id][data-set-id] .ti-header-write-btn:hover{
  border-color:var(--sn-salbei)!important;color:#fff!important;
  background-color:rgba(255,255,255,.06)!important;
}
/* Das Aufklappmenue des Knopfes bleibt lesbar */
body .ti-widget[data-layout-id][data-set-id] .ti-write-btn-dropdown-inner{
  background-color:var(--sn-karte)!important;border:1px solid var(--sn-kante)!important;
  border-radius:14px!important;
}
body .ti-widget[data-layout-id][data-set-id] .ti-write-btn-dropdown-item{color:var(--sn-tinte)!important}

/* ==========================================================================
   42 · FAHRZEUG-DETAILSEITE VON AUTOFORCE1
   /fahrzeug-detailseite/?auto_id=… - die Seite, auf der jedes einzelne
   Fahrzeug landet. Gilt ueberall, wo das Plugin die Detailausgabe zeigt.

   Das Plugin bringt hier eine komplett eigene, helle Optik mit:
     - weisse Karten mit weissem "neumorphischem" Schatten
       (5px 5px 20px #e8e8e8, -5px -5px 20px #ffffff)
     - ein magentafarbenes Preisschild #B500FF, um 8 Grad gedreht
     - rote Knoepfe #e3232e, schwarze Aufklapp-Leisten #242424
     - lila Symbole in den technischen Daten
   Auf dunklem Grund war der Fahrzeugtitel dadurch weiss auf Weiss, also
   unsichtbar - dasselbe galt fuer die Ausstattungsliste.
   Klassen am 09.09.2026 aus dem gerenderten HTML und aus auto-styles.php
   gelesen.
   ========================================================================== */

/* --- Schrift ---
   Das Plugin setzt auf ALLE seine Bloecke "Chalkboard SE !important" - eine
   Kreideschrift, die auf dem Mac tatsaechlich vorhanden ist und deshalb auch
   erscheint (unter Windows faellt sie auf Arial zurueck). Ein
   font-family:inherit hilft nicht: der Elternblock traegt die Regel selbst.
   Deshalb hier die Projektschrift ausdruecklich, fuer die Liste genauso wie
   fuer die Detailseite. */
body .autoforce1-container,body .autoforce1-container *,
body .autoforce1-filter,body .autoforce1-filter *,
body .autoforce1-list,body .autoforce1-list *,
body .auto-item,body .auto-item *,
body .main_car,body .main_car *,
body .expandable-container,body .expandable-container *,
body #auto-basisdaten,body #auto-basisdaten *,
body #auto-technische-daten,body #auto-technische-daten *,
body #auto-ausstattung,body #auto-ausstattung *,
body #auto-langbeschreibung,body #auto-langbeschreibung *,
body #sortform,body #sortform *{
  font-family:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif!important;
}

/* --- Rahmen: Bilder links, Angaben rechts --- */
.main_car{gap:34px;margin-top:0!important;margin-bottom:0!important;align-items:flex-start}
.main_car .left_detail_car{width:57%!important}
.main_car .right_detail_car{width:calc(43% - 34px)!important;padding:0!important;margin-left:auto}

/* --- Alles, was das Plugin als weisse Karte ausgibt --- */
.desktop-beschreibung,.desktop-basisdaten,.mobile-basisdaten,.expandable-container{
  background-color:var(--sn-karte)!important;
  background-image:var(--sn-kachel-verlauf)!important;
  border:1px solid var(--sn-kante)!important;
  border-radius:var(--sn-r)!important;
  box-shadow:var(--sn-schatten)!important;
}
.desktop-beschreibung,.desktop-basisdaten,.mobile-basisdaten{padding:26px!important}
.desktop-basisdaten,.mobile-basisdaten{margin-top:22px}

/* Die rechte Karte wird zur Spalte. Damit faellt der absolut gesetzte
   "Zurueck"-Knopf weg, fuer den der Titel vorher 50 px Luft brauchte. */
/* Titel links, Preis rechts daneben - alles Weitere darunter ueber die volle
   Breite. Der Preis stand vorher unter dem Fahrzeugnamen und ging dort unter. */
.desktop-beschreibung{
  display:flex!important;flex-flow:row wrap;align-items:flex-start;
  gap:16px;column-gap:20px;
}
.desktop-beschreibung > *{width:100%}
.desktop-beschreibung #auto-titel{order:1;flex:1 1 200px;width:auto;padding-top:8px}
.desktop-beschreibung #auto-preis{
  order:2;flex:0 0 auto;width:auto;margin-left:auto;align-self:flex-start;
  padding-top:6px!important;padding-right:6px!important;
}
.desktop-beschreibung .desktop-scarcity{order:3}
.desktop-beschreibung #auto-beschreibung{order:4}
.desktop-beschreibung .desktop-anfrage{order:5}
.desktop-beschreibung #back-button{order:6;width:auto}

/* --- Fahrzeugtitel ---
   ⚠ Das Plugin adressiert ihn als ".main_car .right_detail_car #auto-titel"
   mit Chalkboard !important. Nur ein ebenso langer Selektor kommt dagegen an. */
body .main_car .right_detail_car #auto-titel,
body .main_car .left_detail_car #auto-titel{
  font-family:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif!important;
}
.main_car #auto-titel{
  font-family:inherit!important;font-size:1.9rem!important;line-height:1.18!important;
  font-weight:700!important;letter-spacing:0!important;text-transform:none!important;
  color:var(--sn-tinte)!important;margin:0!important;padding:0!important;
}
.main_car #auto-beschreibung{
  color:var(--sn-tinte2)!important;font-weight:500!important;
  font-size:1rem!important;line-height:1.55!important;margin:0!important;
}

/* --- Preis: kein gedrehtes Schild mehr, sondern eine ruhige Zeile --- */
.main_car #auto-preis{
  transform:none!important;top:auto!important;left:auto!important;position:static!important;
  text-align:left!important;
  margin:0!important;padding:0!important;width:auto!important;
  background:none!important;border:0!important;box-shadow:none!important;
}
/* Groesser und mit Schatten, damit es als Preisschild liest und nicht als
   dritter Knopf (Alena, 09.09.2026: "ein bisschen praesenter").
   ⚠ Schraegstellung wurde probiert und wieder verworfen - gerade bleibt. */
.elegant-price{
  display:inline-block!important;transform:none!important;
  background-color:#7CB985!important;background-image:var(--sn-verlauf)!important;
  color:#1E2A24!important;
  font-family:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif!important;
  font-size:2.05rem!important;font-weight:800!important;letter-spacing:0!important;
  padding:11px 26px!important;border-radius:999px!important;
  box-shadow:0 16px 34px -18px rgba(0,0,0,.95)!important;
  text-shadow:none!important;border:0!important;
}
.elegant-price::before{display:none!important}

/* --- Die beiden Anfrage-Knoepfe --- */
/* ⚠ NICHT display erzwingen: das Plugin blendet die mobile-Bloecke am Desktop
   ueber .mobile-anfrage{display:none} aus. Ein display:flex!important hier
   holt sie zurueck auf den Desktop - am 09.09.2026 genau so passiert. */
.desktop-anfrage{display:flex!important}
.desktop-anfrage,.mobile-anfrage{flex-direction:column;gap:10px;margin:0!important}
/* ⚠ #anfrageFormular traegt selbst "Chalkboard SE !important" (ID schlaegt
   die Sammelregel oben). Ein font-family:inherit am Knopf erbt dann genau
   diese Kreideschrift - die Familie muss hier ausdruecklich stehen. */
body form#anfrageFormular,body form#anfrageFormular *{
  font-family:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif!important;
}
#anfrageFormular{margin:0!important;padding:0!important}
#anfrageFormular input[type="submit"]{
  display:block!important;width:100%!important;
  border:0!important;border-radius:999px!important;
  padding:14px 22px!important;margin:0!important;
  font-family:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif!important;
  font-size:.98rem!important;font-weight:700!important;
  letter-spacing:0!important;text-transform:none!important;line-height:1.3!important;
  cursor:pointer;
  background-color:#7CB985!important;background-image:var(--sn-verlauf)!important;
  color:#1E2A24!important;box-shadow:none!important;
  transition:filter .22s ease,transform .22s ease;
}
#anfrageFormular input[type="submit"]:hover{
  filter:brightness(1.06);transform:translateY(-2px);
  background-color:#7CB985!important;color:#1E2A24!important;
}
/* Der zweite Knopf ist die leisere Möglichkeit - sonst schreien beide gleich laut. */
/* ⚠ Die Regel darueber greift ueber #anfrageFormular. Ein Selektor mit Klassen
   allein verliert dagegen - die ID muss mit hinein, sonst sehen beide Knoepfe
   gleich aus (am 09.09.2026 genau so passiert). */
body .desktop-anfrage form#anfrageFormular:last-of-type input[type="submit"],
body .mobile-anfrage form#anfrageFormular:last-of-type input[type="submit"]{
  background-image:none!important;background-color:transparent!important;
  color:var(--sn-tinte)!important;border:1px solid var(--sn-kante)!important;
}
body .desktop-anfrage form#anfrageFormular:last-of-type input[type="submit"]:hover,
body .mobile-anfrage form#anfrageFormular:last-of-type input[type="submit"]:hover{
  background-color:rgba(255,255,255,.07)!important;color:#fff!important;
  border-color:var(--sn-salbei)!important;
}

/* --- Zurueck zur Liste --- */
.main_car #back-button{position:static!important;width:auto!important;margin:0!important}
.main_car #back-button a{
  display:inline-flex!important;align-items:center;justify-content:center;
  background-color:transparent!important;color:var(--sn-tinte2)!important;
  border:1px solid var(--sn-kante)!important;border-radius:999px!important;
  padding:11px 20px!important;font-size:.9rem!important;font-weight:600!important;
  text-transform:none!important;letter-spacing:0!important;text-decoration:none!important;
  transition:color .2s ease,border-color .2s ease;
}
.main_car #back-button a:hover{color:#fff!important;border-color:var(--sn-salbei)!important}

/* --- Technische Daten --- */
#auto-basisdaten,#auto-technische-daten{
  display:flex!important;flex-wrap:wrap;background:transparent!important;
  border:0!important;box-shadow:none!important;padding:0!important;
}
/* Basisdaten und technische Daten sind zwei getrennte Bloecke des Plugins.
   Ohne Ueberschrift dazwischen sah die Luecke wie ein Fehler aus - sie laufen
   jetzt als eine Liste durch. */
#auto-basisdaten{margin-bottom:0!important}
#auto-technische-daten{margin-top:0!important}
.spec-item{
  border-bottom:1px solid rgba(255,255,255,.10)!important;
  padding:13px 0!important;align-items:center!important;background:transparent!important;
}
#auto-basisdaten .spec-item:last-child,
#auto-technische-daten .spec-item:last-child,
#auto-technische-daten .spec-item:nth-last-child(2){border-bottom:0!important}
.spec-item .icon{color:var(--sn-salbei)!important}
.spec-label{
  color:var(--sn-tinte2)!important;font-size:.74rem!important;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px!important;
}
.spec-value{color:var(--sn-tinte)!important;font-size:.98rem!important;font-weight:600!important}

/* --- Ausstattung und Beschreibung zum Aufklappen --- */
.expandable-container{padding:0!important;margin-bottom:18px!important;overflow:hidden!important}
.expandable-header{
  background-color:transparent!important;color:var(--sn-tinte)!important;
  border:0!important;border-bottom:1px solid var(--sn-kante)!important;
  padding:18px 24px!important;font-family:inherit!important;
  font-size:1.02rem!important;font-weight:700!important;letter-spacing:0!important;
}
.expandable-content{
  background-color:transparent!important;background-image:none!important;
  border-left:0!important;padding:20px 24px 26px!important;color:var(--sn-tinte)!important;
}
/* Der Verlauf am unteren Rand war auf Hellgrau gerechnet und lag als heller
   Schleier ueber der Karte. */
.expandable-content:not(.expanded)::after{
  background:linear-gradient(to bottom,rgba(54,70,61,0),rgba(54,70,61,.99))!important;
  height:104px!important;
}
/* ⚠ Das Plugin setzt "Mehr anzeigen" absolut in die MITTE des Kastens - der
   Knopf lag damit quer ueber dem Text. Zugeklappt sitzt er jetzt als Leiste
   am unteren Rand, aufgeklappt wieder als Knopf unter dem Text. */
.expandable-content:not(.expanded){padding-bottom:58px!important}
.expandable-content:not(.expanded) .view-more-button{
  position:absolute!important;left:0!important;right:0!important;bottom:0!important;
  transform:none!important;width:auto!important;max-width:none!important;
  margin:0!important;padding:14px 20px!important;
  border:0!important;border-top:1px solid var(--sn-kante)!important;
  border-radius:0 0 var(--sn-r) var(--sn-r)!important;
  background-color:#36463D!important;backdrop-filter:none!important;
}
.expandable-content:not(.expanded) .view-more-button:hover{
  background-color:#3F5147!important;border-radius:0 0 var(--sn-r) var(--sn-r)!important;
}
.view-more-button{
  background-color:rgba(46,60,52,.96)!important;color:var(--sn-tinte)!important;
  backdrop-filter:blur(3px);
  border:1px solid var(--sn-kante)!important;border-radius:999px!important;
  padding:11px 20px!important;max-width:230px!important;
  font-family:inherit!important;font-size:.92rem!important;font-weight:600!important;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease;
}
.view-more-button:hover{
  background-color:rgba(255,255,255,.07)!important;
  border-color:var(--sn-salbei)!important;color:#fff!important;opacity:1!important;
}

/* Ausstattungsliste - die Haken waren rot, der Text weiss auf Weiss. */
#auto-ausstattung .ausstattung-item{
  color:var(--sn-tinte)!important;font-size:.94rem!important;line-height:1.5!important;
  padding:6px 10px 6px 30px!important;
}
#auto-ausstattung .ausstattung-item::before{
  color:var(--sn-salbei)!important;font-weight:700;top:6px!important;
}
#auto-langbeschreibung,#auto-langbeschreibung *{color:var(--sn-tinte)!important}
#auto-langbeschreibung{font-size:.96rem!important;line-height:1.6!important}

/* --- Bilder ---
   ⚠ slick.css greift auf dieser Seite NICHT. Am 09.09.2026 im Browser
   gemessen: .slick-list steht auf overflow:visible und die Folien auf
   float:none, obwohl slick.css beides setzt - die Datei wird vom Browser als
   fremde Herkunft behandelt (SecurityError beim Auslesen) und bleibt
   wirkungslos. Folge: alle Bilder standen UNTEREINANDER, die Vorschauleiste
   lief nach unten aus der Seite heraus, und der Pfeil sprang ins Leere, weil
   slick die Spur waagerecht verschiebt.
   Deshalb bauen wir die Spur selbst - als Flexzeile, unabhaengig von float. */
.slider-for .slick-list,.slider-nav .slick-list{overflow:hidden!important}
.slider-for .slick-track,.slider-nav .slick-track{display:flex!important;align-items:stretch}
.slider-nav .slick-track{align-items:center}
.slider-for .slick-slide,.slider-nav .slick-slide{float:none!important;flex:0 0 auto}

/* Das Plugin stellt die Bilder auf object-fit:contain und schiebt sie 17 px
   nach unten. Dadurch stand links und rechts eine helle Flaeche neben dem Foto
   (ein 4:3-Bild in einem breiteren Rahmen), und der Rand war oben und unten
   ungleich. Mit cover fuellt das Foto den Rahmen vollstaendig aus. */
.slider-for .slick-slide img,.slider-nav .slick-slide img{
  object-fit:cover!important;object-position:center center!important;
  top:0!important;left:0!important;margin-top:0!important;
  width:100%!important;height:100%!important;border-radius:0!important;
}
.left_detail_car .carousel{background:transparent!important}
.slider-for{
  border-radius:var(--sn-r)!important;overflow:hidden;
  background-color:var(--sn-karte-tief)!important;
  border:1px solid var(--sn-kante)!important;
}
/* Manche Herstellerfotos haben weisse Raender. Ohne eigene Flaeche blitzt
   dahinter das Weiss des Sliders durch. */
.slider-for .slick-list,.slider-for .slick-track,.slider-for .slick-slide{
  background-color:var(--sn-karte-tief)!important;
}
.slider-nav{margin-top:14px!important}
/* Der weisse 5-px-Rahmen um jedes Vorschaubild bleibt in der Breite stehen -
   sonst rechnet slick die Spur falsch. Nur die Farbe wechselt. */
.slider-nav .slick-slide{
  border-color:transparent!important;border-radius:14px;overflow:hidden;
  opacity:.58;transition:opacity .2s ease,border-color .2s ease;
}
.slider-nav .slick-slide:hover,.slider-nav .slick-current{
  opacity:1;border-color:var(--sn-salbei)!important;
}
.slider-for .slick-prev,.slider-for .slick-next{
  background-color:rgba(30,42,36,.74)!important;
  border:1px solid var(--sn-kante)!important;border-radius:999px!important;
  width:52px!important;height:52px!important;color:#fff!important;
}
.slider-for .slick-prev:hover,.slider-for .slick-next:hover{
  width:52px!important;background-color:var(--sn-salbei)!important;color:#1E2A24!important;
}
.slider-for .image-count,.carousel .image-count{color:var(--sn-tinte2)!important}

/* Grossansicht */
#lightbox{background-color:rgba(20,28,24,.95)!important}
#lightbox .previous,#lightbox .next,#lightbox .close{
  background-color:rgba(255,255,255,.10)!important;color:#fff!important;
  border:1px solid var(--sn-kante)!important;border-radius:999px!important;
}
#lightbox .previous:hover,#lightbox .next:hover,#lightbox .close:hover{
  background-color:var(--sn-salbei)!important;color:#1E2A24!important;
}

/* --- Handy und Tablet --- */
@media(max-width:1024px){
  .main_car{flex-direction:column;gap:24px}
  .main_car .left_detail_car,.main_car .right_detail_car{width:100%!important}
  .desktop-beschreibung,.desktop-basisdaten,.mobile-basisdaten{padding:22px!important}

  /* Auf dem Handy stehen Titel und Preis ausserhalb der Karten. Ohne eigenen
     Rand kleben sie am Bildschirmrand, waehrend die Karten darunter eingerueckt
     sind - am 09.09.2026 nachgemessen: Titel bei 10 px, Karte bei 26 px. */
  .main_car .left_detail_car #auto-titel{padding:0 16px!important;margin:18px 0 0!important}
  .left_detail_car .price_and_back{
    display:flex!important;flex-direction:column;gap:10px;
    padding:0 16px!important;margin:14px 0 4px!important;
  }
  /* ⚠ Der Preis ist hier NICHT .elegant-price, sondern ein eigener Block, den
     das Plugin wie einen Knopf gestaltet. Das Aufraeumen weiter oben nimmt ihm
     die Flaeche - sonst steht auf dem Handy nur nackter Text. */
  /* Bewusst NICHT ueber die volle Breite: sonst sieht der Preis aus wie ein
     dritter Knopf und niemand erkennt ihn als Preis. */
  .price_and_back #auto-preis,.price_and_back #auto-preis *{color:#1E2A24!important}
  .price_and_back #auto-preis{
    display:inline-block!important;width:auto!important;align-self:flex-start;
    text-align:left!important;
    background-color:#7CB985!important;background-image:var(--sn-verlauf)!important;
    border:0!important;border-radius:999px!important;
    padding:12px 22px!important;margin:0!important;
    font-size:1.2rem!important;font-weight:800!important;letter-spacing:0!important;
  }
  .price_and_back #back-button{width:100%!important;margin:0!important}
  /* Die Knoepfe stehen auf dem Handy ebenfalls ausserhalb der Karten. */
  .mobile-anfrage{padding:0 16px!important;margin:0 0 6px!important}
  .mobile-scarcity{padding:0 16px!important}
}
@media(max-width:767px){
  .main_car #auto-titel{font-size:1.45rem!important}
  .elegant-price{font-size:1.55rem!important;padding:9px 18px!important}
  .expandable-header{padding:16px 18px!important;font-size:.96rem!important}
  .expandable-content{padding:18px 18px 22px!important}
}

/* ==========================================================================
   43 · NEUWAGEN: EINSTIEG UND MARKENSEITEN
   /neuwagen/, /neuwagen/toyota/, /neuwagen/suzuki/
   ========================================================================== */

/* --- Die zwei grossen Markenkacheln auf der Einstiegsseite --- */
.sn-markenkacheln{gap:24px}
.sn-hk-gross{min-height:300px!important;justify-content:flex-end;padding:30px!important}
.sn-hk-gross h3.elementor-heading-title{font-size:1.8rem!important}
.sn-hk-gross .sn-hk-sub p{font-size:.98rem}
@media(max-width:767px){
  .sn-hk-gross{min-height:220px!important;padding:22px!important}
  .sn-hk-gross h3.elementor-heading-title{font-size:1.4rem!important}
}

/* --- Modellkacheln ---
   ⚠ Die Modellbilder des Kunden sind freigestellte Aufnahmen auf WEISSEM
   Grund (am 09.09.2026 geprueft, z. B. schneider-k-toyota-aygo.jpg, 486x340).
   Auf dunklem Grund saehe das aus wie ein Fehler. Deshalb liegen sie bewusst
   auf einer hellen Platte - so liest es sich als Produktblatt. */
.sn-modell-grid{gap:18px}
.sn-modell{padding:14px 14px 18px!important;align-items:stretch;text-align:center}
/* ⚠ Reines Weiss, nicht Hellgrau: die Fotos sind auf weissem Grund
   freigestellt. Jeder abweichende Ton zeichnet einen sichtbaren Kasten um das
   Auto (am 09.09.2026 mit #F1F5F0 genau so passiert). */
.sn-modell-bild{
  background:#FFFFFF;border-radius:14px;padding:10px;overflow:hidden;
  display:flex!important;align-items:center;justify-content:center;
}
.sn-modell-bild img{
  width:100%!important;height:118px!important;object-fit:contain!important;
  border-radius:0!important;display:block;
}
.sn-modell h3.elementor-heading-title{font-size:1.06rem!important;margin:0!important}
.sn-modell .sn-stretch{margin-top:auto}
@media(max-width:1024px){ .sn-modell-bild img{height:132px!important} }
@media(max-width:767px){ .sn-modell-bild img{height:150px!important} }

/* Groessere Platte, wenn das Produktfoto allein in einer Spalte steht */
.sn-modell-bild-gross{padding:18px}
.sn-modell-bild-gross img{height:260px!important}
@media(max-width:767px){ .sn-modell-bild-gross img{height:190px!important} }

/* --- Reservierte Flaeche fuer den Neuwagenbestand --- */
.sn-bestand-platz{display:grid!important;grid-template-columns:1fr;width:100%}
.sn-bestand-platz .sn-fotoplatz{min-height:210px;justify-content:center;text-align:center}
.sn-bestand-platz .sn-fotoplatz .sn-hexagon{align-self:center}

/* --- Abstaende der neuen Abschnitte --- */
.sn-neu-marken{padding-top:0!important}
.sn-neu-bestand .sn-knopfreihe{margin-top:6px}

/* ==========================================================================
   44 · KARRIERE
   /karriere/ - Stellenanzeigen und Initiativbewerbung.
   ⚠ Die Knoepfe springen vorerst nur zum Bewerbungsbereich. Das Formular
   kommt ueber WPForms plus Funnel-Plugin (Alena, 09.09.2026).
   ========================================================================== */

/* Buehne ohne Bild daneben. Ohne Begrenzung liefen die Zeilen ueber die
   volle Seitenbreite - das liest sich nicht mehr. */
.sn-buehne-solo{display:block!important;width:100%}
.sn-buehne-solo > .e-con{margin:0;max-width:min(860px,100%)!important;width:auto!important}
.sn-buehne-solo .sn-haken-liste{grid-template-columns:1fr}

/* Vier gleich hohe Kacheln nebeneinander - ohne Versatz, ohne Hoehensprung. */
.sn-kar-kacheln{align-items:stretch}
.sn-kar-kacheln > .e-con{margin-top:0!important;align-self:stretch!important;height:100%}

.sn-stellen-grid{gap:22px;align-items:stretch}
.sn-stelle{position:relative;padding:26px 26px 24px!important}
.sn-stelle h3.elementor-heading-title{font-size:1.24rem!important}
.sn-stelle .sn-punkt p{font-size:.92rem}
.sn-stelle .sn-stelle-liste{margin-top:2px}
/* Der Knopf sitzt unten, damit die Karten trotz unterschiedlich langer
   Aufgabenlisten auf einer Linie abschliessen. */
.sn-stelle .elementor-widget-button{margin-top:auto}

/* Die einzige Stelle mit echtem Bedarf bekommt eine Marke.
   (Kickoff 00:35:10 - "hoechstens vielleicht noch einen fertigen
   Karosseriemann, aber der muesste wirklich fertig ausgebildet sein.") */
/* ⚠ Die Klasse sitzt am <p> im Textbaustein, nicht am Widget - deshalb
   p.sn-stelle-marke und nicht .sn-stelle-marke p. */
p.sn-stelle-marke{
  display:inline-block;margin:0 0 2px!important;
  background:var(--sn-verlauf);color:#1E2A24!important;
  font-size:.7rem!important;font-weight:800!important;
  letter-spacing:.1em;text-transform:uppercase;
  padding:5px 12px;border-radius:999px;
}
.sn-stelle-gesucht{border-color:rgba(156,192,149,.5)!important}

/* Reservierte Flaeche fuer das Bewerbungsformular */
.sn-bewerbung-platz{min-height:270px;justify-content:center;text-align:center}
.sn-bewerbung-platz .sn-hexagon{align-self:center}

@media(max-width:1024px){
  .sn-stellen-grid{grid-template-columns:1fr!important}
}
@media(max-width:767px){
  .sn-stelle{padding:22px!important}
  .sn-stelle h3.elementor-heading-title{font-size:1.12rem!important}
}

/* ==========================================================================
   45 · ZWEIRAD & QUAD
   /zweirad-und-quad/ - bewusst kurz gehalten (Kickoff 00:08:37: "einfach ein
   Kontaktformular und ein paar was ihr macht, eine Unterseite darueber").
   ========================================================================== */

.sn-zweirad-grid{gap:24px;align-items:stretch}
.sn-zweirad-karte{padding:20px 20px 24px!important}
.sn-zweirad-karte h3.elementor-heading-title{font-size:1.2rem!important}
.sn-zweirad-karte .elementor-widget-button{margin-top:auto}
.sn-zweirad-karte .sn-modell-bild-gross img{height:230px!important}
@media(max-width:767px){
  .sn-zweirad-karte .sn-modell-bild-gross img{height:180px!important}
}

/* --- Bannerbild fuer Modell-Besonderheiten (Yaris Hybrid, CrossCamp) ---
   Die Vorlagen sind sehr breite Streifen (1901x475). Volle Breite, gerundet,
   auf dem Handy etwas beschnitten, damit sie nicht zum Strich werden. */
.sn-banner-bild{width:100%}
.sn-banner-bild img{
  width:100%!important;height:auto!important;display:block;
  border-radius:var(--sn-r);border:1px solid var(--sn-kante);
}
.sn-besonderheit{gap:30px}
@media(max-width:767px){
  .sn-banner-bild img{height:190px!important;object-fit:cover!important}
}

/* ==========================================================================
   46 · WPFORMS
   Alle Formulare, die nicht ueber einen Autoforce1-Shortcode laufen
   (Alena, 11.09.2026): Serviceanfrage Werkstatt (1807), Bewerbung (1809).
   WPForms "modern" arbeitet mit CSS-Variablen auf .wpforms-container - die
   werden hier gesetzt, damit die Formulare wie das Plugin-Kontaktformular
   aussehen (Abschnitt 38). Gilt fuer JEDES WPForms-Formular auf der Seite.
   ========================================================================== */
.wpforms-container.wpforms-container-full{
  --wpforms-field-border-radius:14px;
  --wpforms-field-border-style:solid;
  --wpforms-field-border-size:1px;
  --wpforms-field-background-color:rgba(255,255,255,.07);
  --wpforms-field-border-color:rgba(255,255,255,.16);
  --wpforms-field-border-color-spare:rgba(255,255,255,.16);
  --wpforms-field-text-color:#FFFFFF;
  --wpforms-field-menu-color:#3A4B41;
  --wpforms-label-color:#BECDBF;
  --wpforms-label-sublabel-color:#BECDBF;
  --wpforms-label-error-color:#F0A69A;
  --wpforms-button-border-radius:999px;
  --wpforms-button-background-color:#7CB985;
  --wpforms-button-text-color:#1E2A24;
  --wpforms-button-border-color:transparent;
  --wpforms-field-size-input-height:50px;
  --wpforms-field-size-input-spacing:16px;
  --wpforms-field-size-font-size:16px;
  --wpforms-field-size-padding-h:16px;
  --wpforms-field-size-checkbox-size:18px;
  --wpforms-label-size-font-size:13px;
  --wpforms-label-size-sublabel-font-size:13px;
  --wpforms-button-size-font-size:16px;
  --wpforms-button-size-height:52px;
  --wpforms-button-size-padding-h:32px;
  --wpforms-button-size-margin-top:6px;
  --wpforms-container-padding:0px;
  --wpforms-container-border-style:none;
  --wpforms-background-color:transparent;
  margin:0!important;max-width:100%!important;
}
/* Alle Felder ueber die volle Kartenbreite - "medium" waere sonst nur 60 % */
.wpforms-container .wpforms-field-medium,
.wpforms-container .wpforms-field input:not([type=checkbox]):not([type=radio]):not([type=submit]),
.wpforms-container .wpforms-field select,
.wpforms-container .wpforms-field textarea{max-width:100%!important;width:100%!important}
/* Beschriftungen wie beim Plugin-Formular: klein, fett, Versalien */
.wpforms-container .wpforms-field-label{
  font-weight:800!important;letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:7px!important;
}
.wpforms-container .wpforms-required-label{color:#F0A69A!important}
.wpforms-container .wpforms-field-description{color:var(--sn-tinte2)!important;font-size:.82rem!important}
/* Eingaben */
.wpforms-container input:not([type=checkbox]):not([type=radio]):not([type=submit]),
.wpforms-container select,.wpforms-container textarea{
  box-shadow:none!important;font-family:inherit!important;
}
.wpforms-container textarea{min-height:120px!important;resize:vertical}
.wpforms-container input:focus,.wpforms-container select:focus,.wpforms-container textarea:focus{
  border-color:var(--sn-salbei)!important;box-shadow:0 0 0 3px rgba(156,192,149,.25)!important;
}
.wpforms-container ::placeholder{color:rgba(238,245,236,.45)!important}
/* Auswahlliste: dunkle Optionen, sonst weisser Klapptext auf Weiss */
.wpforms-container select option{background:#3A4B41;color:#fff}
/* Der Datenschutz-Haken liest sich als Fliesstext, nicht als Beschriftung */
.wpforms-container .wpforms-field-checkbox .wpforms-field-label-inline{
  text-transform:none!important;letter-spacing:0!important;font-weight:400!important;
  color:var(--sn-tinte2)!important;font-size:.9rem!important;line-height:1.5;
}
.wpforms-container .wpforms-field-checkbox a{color:var(--sn-salbei)!important;text-decoration:underline}
/* Knopf im Farbverlauf der Seite */
.wpforms-container button.wpforms-submit{
  background-image:var(--sn-verlauf)!important;font-weight:700!important;
  width:100%!important;font-family:inherit!important;
  transition:filter .22s ease,transform .22s ease;
}
.wpforms-container button.wpforms-submit:hover{filter:brightness(1.06);transform:translateY(-2px)}
/* Datei-Upload: die gestrichelte Flaeche im Kartenton */
.wpforms-container .wpforms-uploader{
  background:rgba(255,255,255,.05)!important;border:1px dashed var(--sn-kante)!important;
  border-radius:14px!important;color:var(--sn-tinte)!important;
}
.wpforms-container .wpforms-uploader:hover{border-color:var(--sn-salbei)!important}
.wpforms-container .wpforms-uploader .modern-title,
.wpforms-container .wpforms-uploader .modern-hint{color:var(--sn-tinte2)!important}
/* Fehler- und Erfolgsmeldungen */
.wpforms-container .wpforms-error{color:#F0A69A!important;font-size:.82rem!important}
.wpforms-confirmation-container-full{
  background:rgba(124,185,133,.14)!important;border:1px solid rgba(156,192,149,.4)!important;
  border-radius:14px!important;color:var(--sn-tinte)!important;padding:20px 22px!important;
}
.wpforms-confirmation-container-full p{color:var(--sn-tinte)!important}

/* ==========================================================================
   47 · ANFRAGESEITEN DES PLUGINS
   /fahrzeug-anfrage/ und /fahrzeugvideo-anfrage/ - dorthin fuehren die zwei
   Knoepfe der Fahrzeug-Detailseite. Das Plugin gibt ein nacktes
   form#email-senden mit Inline-Stilen aus (border:1px solid #ccc, weisse
   Felder) und daneben einen Kasten fuer das Fahrzeugbild, der leer bleibt,
   wenn die Seite ohne Fahrzeug aufgerufen wird. Alena, 11.09.2026: "hier
   muss noch das Design angepasst werden - global".
   ========================================================================== */

/* Das Formular wird zur Karte, mittig, nicht ueber die volle Breite */
body:is(.page-id-25,.page-id-30) form#email-senden{
  display:flex;flex-direction:column;gap:6px;
  max-width:760px;margin:0 auto;
  background-color:var(--sn-karte)!important;
  background-image:var(--sn-kachel-verlauf)!important;
  border:1px solid var(--sn-kante)!important;border-radius:var(--sn-r)!important;
  box-shadow:var(--sn-schatten)!important;
  padding:34px 34px 30px!important;
  font-family:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif!important;
}
body:is(.page-id-25,.page-id-30) .e-con-inner{padding-top:28px;padding-bottom:36px}

/* Ueberschrift des Plugins - wie unsere Kartentitel */
body:is(.page-id-25,.page-id-30) form#email-senden h2{
  font-family:inherit!important;font-size:1.6rem!important;line-height:1.2!important;
  font-weight:700!important;color:var(--sn-tinte)!important;
  margin:0 0 18px!important;padding:0!important;text-align:left!important;
}

/* Beschriftungen wie beim Kontaktformular (Abschnitt 38) */
body:is(.page-id-25,.page-id-30) form#email-senden label{
  display:block;color:var(--sn-tinte2)!important;
  font-size:.78rem!important;font-weight:800!important;letter-spacing:.08em;
  text-transform:uppercase;margin:8px 0 7px!important;
}
body:is(.page-id-25,.page-id-30) form#email-senden input[type=text],
body:is(.page-id-25,.page-id-30) form#email-senden input[type=tel],
body:is(.page-id-25,.page-id-30) form#email-senden input[type=email],
body:is(.page-id-25,.page-id-30) form#email-senden textarea{
  display:block;width:100%!important;box-sizing:border-box;
  background:rgba(255,255,255,.07)!important;color:#fff!important;
  border:1px solid var(--sn-kante)!important;border-radius:14px!important;
  padding:14px 16px!important;font-size:1rem!important;font-family:inherit!important;
  margin:0 0 6px!important;box-shadow:none!important;outline:none;
}
body:is(.page-id-25,.page-id-30) form#email-senden input:focus,
body:is(.page-id-25,.page-id-30) form#email-senden textarea:focus{
  border-color:var(--sn-salbei)!important;box-shadow:0 0 0 3px rgba(156,192,149,.25)!important;
}
/* Textfeld: der Rahmen des Plugins sitzt am UMGEBENDEN div (Inline-Stil),
   nicht am Feld. Der wird entfernt, das Feld bekommt den eigenen Rahmen. */
body:is(.page-id-25,.page-id-30) form#email-senden div[style*="border"]{
  border:0!important;border-radius:0!important;overflow:visible!important;
}
body:is(.page-id-25,.page-id-30) form#email-senden textarea{
  min-height:150px!important;resize:vertical!important;overflow:auto!important;
}
/* Der Kasten fuer das Fahrzeugbild bleibt leer, wenn kein Fahrzeug uebergeben
   wurde - dann faellt er weg. Mit Bild bekommt er unseren Rahmen. */
body:is(.page-id-25,.page-id-30) form#email-senden div[style*="justify-content: center"]:not(:has(img)){
  display:none!important;
}
body:is(.page-id-25,.page-id-30) form#email-senden div[style*="justify-content: center"] img{
  border-radius:14px;border:1px solid var(--sn-kante);
}
/* Knopf im Farbverlauf der Seite */
body:is(.page-id-25,.page-id-30) form#email-senden input[type=submit]{
  background-color:#7CB985!important;background-image:var(--sn-verlauf)!important;
  color:#1E2A24!important;border:0!important;border-radius:999px!important;
  padding:15px 32px!important;font-weight:700!important;font-size:1rem!important;
  font-family:inherit!important;width:100%!important;cursor:pointer;
  margin:14px 0 0!important;box-shadow:none!important;
  text-transform:none!important;letter-spacing:0!important;
  transition:filter .22s ease,transform .22s ease;
}
body:is(.page-id-25,.page-id-30) form#email-senden input[type=submit]:hover{
  filter:brightness(1.06);transform:translateY(-2px);
}
@media(max-width:767px){
  body:is(.page-id-25,.page-id-30) form#email-senden{padding:24px 20px 22px!important}
  body:is(.page-id-25,.page-id-30) form#email-senden h2{font-size:1.3rem!important}
}

/* ==========================================================================
   48 · GEFUELLTE BILDFELDER
   Ersetzen die gestrichelten Bildfelder (sn-fotoplatz) mit derselben
   Flaeche, sobald ein Foto da ist. Hoch/breit wie beim Platzhalter.
   ========================================================================== */
.sn-bildfeld{
  padding:0!important;border-radius:var(--sn-r-gross);overflow:hidden;
  border:1px solid var(--sn-kante);box-shadow:var(--sn-schatten);
  display:flex!important;flex-direction:column;height:100%;
}
.sn-bildfeld > .elementor-widget-image{flex:1 1 auto;display:flex;width:100%;margin:0}
.sn-bildfeld > .elementor-widget-image > *{width:100%;display:flex}
.sn-bildfeld img{width:100%!important;height:100%!important;object-fit:cover;display:block;border-radius:0!important}
.sn-bildfeld-hoch{min-height:440px}
.sn-bildfeld-breit{min-height:260px}
.sn-inspektion-links .sn-bildfeld{min-height:230px}
@media(max-width:1024px){ .sn-bildfeld-hoch{min-height:300px} }
@media(max-width:767px){ .sn-bildfeld-hoch,.sn-bildfeld-breit{min-height:220px} }

/* ==========================================================================
   49 · COOKIE-PLATZHALTER (Borlabs) UND WEISSER SCROLLSTREIFEN
   ========================================================================== */

/* ⚠ Weisser Balken beim schnellen Scrollen (Kunde, 14.09.2026, Bestandsliste):
   Der Browser malt beim Scrollen zuerst den Hintergrund von <html>. Der ist
   weiss, solange nur <body> eingefaerbt ist - dann blitzt ein weisser Streifen
   auf, bis der Inhalt nachgezeichnet ist. Deshalb bekommt html dieselbe Farbe. */
html{background-color:#2B3A31!important}

/* ⚠ Der Trustindex-Knopf in der Buehne der Ankaufseite (Mario, 11.09.2026)
   wird von Borlabs durch den Zustimmungs-Platzhalter ersetzt. Das Widget stand
   auf "Inline", der Platzhalter quetschte sich in 40 px Breite (Screenshot
   Alena, 15.09.2026). In der Buehne wird daraus ein einzelner kleiner Knopf
   "Trustindex erlauben"; nach der Zustimmung laedt das Widget wie gewohnt. */
.sn-hero-panel .elementor-widget-shortcode{width:100%!important;max-width:100%!important;align-self:stretch}
.sn-hero-panel .brlbs-cmpnt-content-blocker{width:auto!important;max-width:100%}
.sn-hero-panel .brlbs-cmpnt-cb-preset-b{
  background:none!important;border:0!important;box-shadow:none!important;
  padding:0!important;margin:0!important;min-height:0!important;
}
.sn-hero-panel .brlbs-cmpnt-cb-thumbnail,
.sn-hero-panel .brlbs-cmpnt-cb-description,
.sn-hero-panel .brlbs-cmpnt-cb-provider-toggle,
.sn-hero-panel .brlbs-cmpnt-cb-provider-details,
.sn-hero-panel .brlbs-cmpnt-cb-btn:first-child{display:none!important}
.sn-hero-panel .brlbs-cmpnt-cb-main,.sn-hero-panel .brlbs-cmpnt-cb-content{padding:0!important;margin:0!important}
.sn-hero-panel .brlbs-cmpnt-cb-buttons{margin:0!important;justify-content:flex-start!important}
.sn-hero-panel .brlbs-cmpnt-cb-btn{
  display:inline-flex!important;align-items:center;
  background:transparent!important;color:var(--sn-tinte)!important;
  border:1px solid var(--sn-kante)!important;border-radius:999px!important;
  padding:10px 18px!important;font-size:.88rem!important;font-weight:600!important;
  text-decoration:none!important;
}
.sn-hero-panel .brlbs-cmpnt-cb-btn:hover{border-color:var(--sn-salbei)!important;color:#fff!important}

/* Ausserhalb der Buehne (Bewertungsbereiche) darf der Platzhalter gross sein -
   aber in unseren Farben und ueber die volle Breite. */
.brlbs-cmpnt-content-blocker{width:100%;max-width:100%}
.sn-trustindex .brlbs-cmpnt-cb-preset-b{
  background-color:var(--sn-karte)!important;background-image:var(--sn-kachel-verlauf)!important;
  border:1px solid var(--sn-kante)!important;border-radius:var(--sn-r)!important;
  color:var(--sn-tinte)!important;padding:28px!important;
}
.sn-trustindex .brlbs-cmpnt-cb-description,.sn-trustindex .brlbs-cmpnt-cb-provider-toggle{color:var(--sn-tinte)!important}
.sn-trustindex .brlbs-cmpnt-cb-thumbnail{display:none!important}
.sn-trustindex .brlbs-cmpnt-cb-btn{
  border-radius:999px!important;padding:12px 22px!important;font-weight:700!important;
  background-color:#7CB985!important;background-image:var(--sn-verlauf)!important;
  color:#1E2A24!important;border:0!important;text-decoration:none!important;
}
.sn-trustindex .brlbs-cmpnt-cb-btn:first-child{
  background-image:none!important;background-color:transparent!important;
  color:var(--sn-tinte)!important;border:1px solid var(--sn-kante)!important;
}

/* ==========================================================================
   50 · NACHTRAEGE AUS DER UX-PRUEFUNG (15.09.2026)
   ========================================================================== */

/* Dunkle Bildlaufleisten - die weissen Systemleisten in Slider und Textfeld
   fielen im dunklen Design auf. */
html{scrollbar-color:rgba(156,192,149,.55) #2B3A31}
.sn-trustindex,.sn-slider,.wpforms-container textarea,.slider-for,.autoforce1-list,
.sn-formular textarea,form#email-senden textarea{scrollbar-color:rgba(156,192,149,.55) transparent;scrollbar-width:thin}

/* Kontaktzeile im Fuss */
.sn-fuss-kontakt{font-size:.9rem;line-height:1.6;color:var(--sn-tinte2)!important}
.sn-fuss-kontakt a{color:var(--sn-tinte)!important;text-decoration:none;font-weight:600}
.sn-fuss-kontakt a:hover{color:var(--sn-salbei)!important}

/* Kontakt: Bild und Routenknopf untereinander in der rechten Spalte */
.sn-so-bildspalte{display:flex!important;flex-direction:column;height:100%}
.sn-so-bildspalte > .sn-bildfeld{flex:1 1 auto}
.sn-so-bildspalte .elementor-widget-button{align-self:flex-start}

/* Kleine Knoepfe fuer die Markenschnellwahl ueber der Bestandsliste */
.sn-markenwahl{margin-bottom:20px;flex-wrap:wrap}
.sn-btn-klein .elementor-button{padding:9px 16px!important;font-size:.88rem!important}
@media(max-width:767px){ .sn-markenwahl{gap:8px} }

/* ⚠ WPForms-Auswahlfeld: "Bitte auswaehlen" war oben abgeschnitten, weil die
   feste Feldhoehe kleiner war als Innenabstand plus Zeilenhoehe (Karriere). */
.wpforms-container select{
  height:auto!important;min-height:50px!important;line-height:1.3!important;
  padding-top:0!important;padding-bottom:0!important;
}


/* ==========================================================================
   51 · MOBILE-PRUEFUNG (15.09.2026) - Korrekturen
   ========================================================================== */

/* KRITISCH 1+2: Spalten mit fester Hoehe (height:100% aus dem Raster) und
   flex-wrap:wrap - auf dem Handy brach das zweite Kind in eine unsichtbare
   Spalte rechts neben dem Bildschirm (Hebebuehne auf /werkstatt/, "Route
   planen" auf /kontakt/). */
@media(max-width:1024px){
  .sn-inspektion-links,.sn-so-bildspalte,.sn-so-bild{
    flex-wrap:nowrap!important;height:auto!important;min-height:0!important;
  }
}

/* KRITISCH 3: Galerie der Fahrzeugseite. Das Plugin gibt den Folien 450 px
   Hoehe, dem Rahmen aber nur 275 px - das Foto wurde auf 58 % beschnitten. */
@media(max-width:1024px){
  /* Prozent-Hoehen greifen hier nicht (Elternhoehe "auto") - die Folie selbst
     bekommt das 4:3-Seitenverhaeltnis, das absolute Bild fuellt sie. */
  .slider-for,.slider-for .slick-list,.slider-for .slick-track{height:auto!important;min-height:0!important;max-height:none!important}
  .slider-for .slick-slide{height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:4/3}
  .slider-for .slick-slide img{min-height:0!important;max-height:none!important}
}

/* KRITISCH 4: Preis und Knopf in der Fahrzeugkarte - je 200 px fest, Karte
   auf dem Tablet 308 px breit. */
@media(max-width:1024px){
  /* .btns ist ein Raster (149px 149px), Preis und Knopf haben min-width:200px */
  .auto-item .btns{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
  .auto-item .auto-price,.auto-item .details-link{
    width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box;justify-content:center;
  }
}

/* KRITISCH 5: Die Plugin-Ausgabe der Bestandsliste schliesst drei <div> zu
   viel und laesst eines offen - der Browser haengt dadurch Abschluss und
   Fusszeile IN den Listenabschnitt. Dessen unterer Innenabstand stand dann
   als leeres Band unter der Fusszeile. Gemeldet an Autoforce1. */
.sn-bestand-oben{padding-bottom:0!important}

/* 12: Auf dem Handy standen die Anfrage-Knoepfe der Fahrzeugseite doppelt -
   unser display:flex!important hatte die Desktop-Fassung mit eingeblendet. */
@media(max-width:1023px){ .desktop-anfrage{display:none!important} }

/* 7: "Wonach suchst du?" auf dem Tablet - Knopftexte liefen aus den Kacheln */
@media(max-width:1024px){
  .sn-ap-grid{grid-template-columns:1fr!important}
  .sn-link .elementor-button{white-space:normal!important}
}

/* 9/11/13/15: Tippziele auf dem Handy */
@media(max-width:767px){
  .autoforce1-filter .ui-slider-handle{width:28px!important;height:28px!important;margin-top:-12px!important;margin-left:-14px!important}
  .autoforce1-filter .slider-range,.autoforce1-filter .ui-slider{margin:14px 0 4px!important}
  .autoforce1-list .pagination a,.autoforce1-list .pagination span{
    min-width:44px;min-height:44px;display:inline-flex!important;align-items:center;justify-content:center;
  }
  .sn-link .elementor-button{min-height:44px;display:inline-flex!important;align-items:center}
  .sn-fuss-oben ul li{padding:6px 0}
  .sn-fuss-oben ul li a{display:inline-block;min-height:32px}
}

/* 16/23: Unterbrecher und Fussunterzeile mit demselben Seitenrand wie alles andere */
.sn-unterbrecher > .e-con-boxed > .e-con-inner,.sn-unterbrecher-text > .e-con-inner,
.sn-fuss-oben > .e-con-inner,.sn-fuss-unten > .e-con-inner{
  max-width:min(1500px,calc(100% - 72px))!important;margin-left:auto;margin-right:auto;
}
@media(max-width:767px){
  .sn-unterbrecher > .e-con-boxed > .e-con-inner,.sn-unterbrecher-text > .e-con-inner,
  .sn-fuss-oben > .e-con-inner,.sn-fuss-unten > .e-con-inner{max-width:calc(100% - 32px)!important}
  /* Schleier ueber dem Hof-Foto kraeftiger, sonst steht weisser Text auf hellem Kies */
  .sn-unterbrecher::after{background:linear-gradient(180deg,rgba(24,33,28,.90) 0%,rgba(24,33,28,.78) 100%)!important}
}

/* 18: Plugin-Formulare - margin-right im Raster machte die Felder ungleich breit */
#sell-car-form .filter-col,#gewaehrleistung-form .filter-col{margin-right:0!important}

/* 21: Markenlogos wurden in eine feste Hoehe gezogen */
.sn-marke img{object-fit:contain!important}

/* 29: Fahrzeugseite auf dem Handy - Datenkarte hing 16 px nach rechts */
@media(max-width:1024px){ .mobile-basisdaten{margin-left:0!important;margin-right:0!important} }

/* 30: Zeitleiste auf Ueber uns - "KURZ DARAUF" brach in der 88-px-Spalte um */
@media(max-width:767px){ .sn-station-spalte{flex:0 0 108px!important;width:108px!important} }

/* 31: Keine automatische Silbentrennung in Ueberschriften ("Ga-rantie") */
@media(max-width:767px){ h1,h2,h3,.elementor-heading-title{hyphens:manual!important;-webkit-hyphens:manual!important} }

/* 14: kleine Hilfstexte nicht unter 13 px */
.sn-klein{font-size:.84rem!important}


/* ==========================================================================
   52 · RESPONSIVE-ABNAHME 11.09.2026 (Mario)
   Stand bis 15.09.2026 im WordPress-Customizer ("Zusaetzliches CSS") -
   zusammen mit einer KOPIE dieser Datei. Die Kopie lag NACH dem Kit und hat
   jede neuere Regel hier ueberschrieben, ohne dass man es sah. Deshalb liegt
   jetzt alles hier; im Customizer bleibt nur noch das CSS der Entwurfsseiten.
   ========================================================================== */
/* Responsive-Abnahme 11.09.2026.
   Gezielt geprüfte Ergänzungen für den zentralen WordPress-Customizer.
   Das freigegebene Desktop-Layout ab 1025 px bleibt unverändert. */

@media (max-width:1024px) {
  /* Das mobile Menü war nur 130 px breit und sein Öffnen verschob die Seite.
     Das Dropdown liegt jetzt unter der Kopfzeile; alle Einträge bleiben
     auch mit geöffneten Untermenüs erreichbar. */
  .sn-kopf-reihe > .e-con-inner,
  .sn-kopf-rechts,
  .sn-kopf-rechts .elementor-widget-nav-menu { position:static!important; }
  .sn-kopf-rechts .elementor-widget-nav-menu {
    width:44px!important;min-width:44px;flex:0 0 44px;
  }
  .sn-kopf-rechts .elementor-menu-toggle {
    width:44px;height:44px;margin:0!important;padding:10px!important;
    color:var(--sn-tinte)!important;border-radius:10px;
  }
  .sn-kopf-rechts .elementor-menu-toggle svg,
  .sn-kopf-rechts .elementor-nav-menu--dropdown .sub-arrow svg {
    fill:currentColor!important;
  }
  .sn-kopf-rechts .elementor-menu-toggle:focus-visible {
    outline:2px solid var(--sn-salbei-hell);outline-offset:3px;
  }
  .sn-kopf-rechts nav.elementor-nav-menu--dropdown {
    position:absolute!important;top:100%!important;right:16px!important;
    left:auto!important;width:min(420px,calc(100vw - 32px))!important;
    margin:0!important;max-height:calc(100dvh - 120px);overflow-y:auto;
    box-shadow:0 18px 32px rgba(0,0,0,.25);
  }
  .sn-kopf-rechts nav.elementor-nav-menu--dropdown a {
    min-height:44px;white-space:normal!important;
  }
}

@media (max-width:767px) {
  /* Doppelte Elementor-Innenabstände machten den Handy-Kopf 210 px hoch.
     Marken bleiben sichtbar und der erste Inhalt rückt wieder ins Bild. */
  .sn-kopf-reihe > .e-con-inner,
  .sn-kopf-reihe > .e-con-inner > .e-con,
  .sn-markenband > .e-con-inner,
  .sn-markenband .sn-marken-chips { padding:0!important; }
  .sn-markenband > .e-con-inner {
    max-width:calc(100% - 32px)!important;justify-content:center!important;
  }
  .sn-markenband > .e-con-inner > .e-con:has(> .sn-marken-label) {
    display:none!important;
  }
  .sn-marke img { display:block; }

  /* Lange deutsche Wörter und beschriftete Schaltflächen dürfen die
     schmalen Karten nicht verlassen (320 px: Ansprechpartner, Toyota-CTA). */
  /* ⚠ hyphens:auto stand hier bis 15.09.2026 - ergab "Ga-rantie", "bei-des".
     Ueberschriften brechen nur an harten Trennstellen, lange Woerter duerfen
     aber weiterhin umbrechen (overflow-wrap). */
  .sn-abschnitt :is(h1,h2,h3),
  .sn-recht :is(h1,h2,h3) { hyphens:manual;overflow-wrap:anywhere; }
  .sn-hero-panel h1.elementor-heading-title {
    font-size:clamp(1.65rem,8.2vw,2rem)!important;
    hyphens:manual;text-wrap:balance;
  }
  .sn-btn .elementor-button,
  .sn-btn-hell .elementor-button,
  .sn-link .elementor-button {
    max-width:100%;white-space:normal!important;line-height:1.35!important;
  }
  .sn-knopfreihe { padding-left:0!important;padding-right:0!important; }
  .sn-btn .elementor-button,
  .sn-btn-hell .elementor-button {
    padding-left:18px!important;padding-right:18px!important;
  }
  .sn-btn .elementor-button-content-wrapper,
  .sn-btn-hell .elementor-button-content-wrapper,
  .sn-link .elementor-button-content-wrapper { min-width:0; }
  .sn-btn .elementor-button-text,
  .sn-btn-hell .elementor-button-text,
  .sn-link .elementor-button-text { overflow-wrap:anywhere; }

  /* Die Kategorie-Karten sind auf 320 px nur rund 112 px breit. */
  .sn-mobil { padding-left:12px!important;padding-right:12px!important; }

  /* Die Kontaktzeilen stehen mobil untereinander: feste Labelbreite lösen. */
  .sn-so-zeile { flex-direction:column!important;gap:8px; }
  .sn-so-zeile > .elementor-widget:first-child,
  .sn-so-zeile > .elementor-widget:last-child {
    flex:0 0 auto!important;width:100%!important;max-width:100%!important;
  }
  .sn-so-bez { width:100%!important;flex-basis:auto!important;overflow-wrap:anywhere; }

  /* Stärkere Plugin-ID-Regeln überdeckten die Kontaktformular-Stile:
     doppelte Einrückung, anliegende Beschriftungen und eine abweichende
     Schrift in E-Mail, Telefon und Absenden. */
  .sn-formular form#email-senden.kontakt-formular {
    margin:0!important;padding:0!important;max-width:100%!important;
  }
  body .sn-formular form#email-senden.kontakt-formular,
  body .sn-formular form#email-senden.kontakt-formular :is(input,textarea) {
    font-family:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif!important;
  }
  .sn-formular form#email-senden.kontakt-formular .kontakt-name-fields {
    gap:0!important;margin:0!important;
  }
  .sn-formular form#email-senden.kontakt-formular input:not([type=submit]),
  .sn-formular form#email-senden.kontakt-formular textarea {
    margin:0 0 16px!important;
  }

  /* Rechtstexte: lange URLs und die Datenschutzüberschrift passend umbrechen. */
  body:is(.page-id-81,.page-id-84) .elementor-heading-title,
  body:is(.page-id-81,.page-id-84) .elementor-widget-text-editor {
    overflow-wrap:anywhere;hyphens:auto;
  }
}

/* ==========================================================================
   53 · COOKIE-BANNER (Borlabs) - Abnahme 11.09.2026 (Mario)
   ========================================================================== */
/* Borlabs 3: native colours/logo/font are configured in the plugin.
   Autoforce1 applies Chalkboard SE !important to every button on the site.
   Keep the narrowly scoped compatibility rules here in WP Additional CSS. */
body .brlbs-cmpnt-container :is(button, input, select, textarea, [role="button"]),
body .borlabs-cookie-open-dialog-preferences :is(a, button),
body .brlbs-cmpnt-content-blocker :is(button, input, select, textarea, [role="button"]) {
  font-family: "Archivo", sans-serif !important;
}

/* The wide Auto Schneider wordmark needs its own line, also on 320px screens. */
body .brlbs-cmpnt-container .brlbs-cmpnt-dialog-box-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 14px;
  text-align: left !important;
}
body .brlbs-cmpnt-container .brlbs-dialog-logo {
  display: block;
  width: 230px;
  max-width: calc(100% - 28px);
  height: auto !important;
  margin: 0;
  object-fit: contain;
}
body .brlbs-cmpnt-container .brlbs-cmpnt-dialog-entrance-headline {
  max-width: 100%;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
body .brlbs-cmpnt-container :is(button, a, input):focus-visible {
  outline: 2px solid #b4d6e1;
  outline-offset: 3px;
}
@media (max-width: 599px) {
  body .brlbs-cmpnt-container .brlbs-cmpnt-dialog-box-header { gap: 10px; }
  body .brlbs-cmpnt-container .brlbs-dialog-logo { width: 190px; }
  body .brlbs-cmpnt-container .brlbs-cmpnt-dialog-entrance-headline {
    font-size: 21px;
    line-height: 1.25;
  }
}

/* Borlabs' details view uses a different header from its entrance view. */
#BorlabsCookieBox .brlbs-cmpnt-dialog-details-header > div:has(> .brlbs-dialog-logo) {
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
#BorlabsCookieBox .brlbs-cmpnt-dialog-details-header .brlbs-dialog-logo {
  width: min(200px, 100%);
  max-width: 100%;
  height: auto !important;
  margin: 0;
}
#BorlabsCookieBox #BorlabsCookiePreferencesA11YHeadline {
  max-width: 100%;
  margin: 0;
  overflow-wrap: anywhere;
  line-height: 1.3;
}
@media (max-width: 599px) {
  #BorlabsCookieBox .brlbs-cmpnt-tab-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  #BorlabsCookieBox .brlbs-cmpnt-tab {
    min-width: 0;
    width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
  }
}

/* AUTOHAUS SCHNEIDER: MANAGED CSS END */

/* ==========================================================================
   54 · KLIMASERVICE GESPIEGELT (Mario, 17.09.2026: keine zwei gleichen Bloecke)
   ========================================================================== */
.sn-klima-gespiegelt{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)!important;align-items:center}
.sn-klima-kacheln{display:grid!important;grid-template-columns:1fr;gap:14px;width:100%}
.sn-klima-kacheln > .e-con{margin:0;width:auto!important;max-width:none!important}
.sn-klima-karte{padding:20px 22px!important;background-image:none!important}
.sn-klima-karte h3.elementor-heading-title{font-size:1.06rem!important}
.sn-klima-karte p{font-size:.92rem}
@media(max-width:1024px){
  .sn-klima-gespiegelt{grid-template-columns:1fr!important}
  /* Auf dem Handy der Text zuerst, dann die drei Kacheln */
  .sn-klima-gespiegelt > .sn-klima-kacheln{order:2}
}

/* ==========================================================================
   55 · WPFORMS-AUSWAHLFELD "MODERN" (Choices.js)
   Alena, 17.09.2026: die Klappliste war ein natives HTML-Dropdown. Das
   laesst sich nicht gestalten - WPForms rendert im Modus "Modern" eine
   eigene Liste, die hier ins Seitendesign geholt wird.
   ========================================================================== */
.wpforms-container .choices{margin-bottom:0!important;font-family:inherit!important}
.wpforms-container .choices__inner{
  background:rgba(255,255,255,.07)!important;border:1px solid var(--sn-kante)!important;
  border-radius:14px!important;min-height:50px!important;padding:11px 44px 11px 16px!important;
  color:#fff!important;font-size:1rem!important;line-height:1.4!important;box-shadow:none!important;
}
.wpforms-container .choices.is-open .choices__inner,.wpforms-container .choices.is-focused .choices__inner{
  border-color:var(--sn-salbei)!important;box-shadow:0 0 0 3px rgba(156,192,149,.25)!important;
}
.wpforms-container .choices.is-open .choices__inner{border-radius:14px 14px 0 0!important}
.wpforms-container .choices__list--single{padding:0!important;color:#fff!important}
.wpforms-container .choices__list--single .choices__placeholder,
.wpforms-container .choices__placeholder{color:rgba(238,245,236,.5)!important;opacity:1!important}
.wpforms-container .choices[data-type*=select-one]::after{
  border-color:var(--sn-tinte) transparent transparent!important;right:18px!important;
}
.wpforms-container .choices[data-type*=select-one].is-open::after{border-color:transparent transparent var(--sn-tinte)!important}
.wpforms-container .choices__list--dropdown,.wpforms-container .choices__list[aria-expanded]{
  background:#33443A!important;border:1px solid var(--sn-kante)!important;border-top:0!important;
  border-radius:0 0 14px 14px!important;box-shadow:0 22px 40px -20px rgba(0,0,0,.9)!important;
  margin-top:-1px!important;overflow:hidden;z-index:50;
}
.wpforms-container .choices__list--dropdown .choices__item,.wpforms-container .choices__list[aria-expanded] .choices__item{
  color:var(--sn-tinte)!important;font-size:.98rem!important;padding:12px 16px!important;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.wpforms-container .choices__list--dropdown .choices__item:last-child{border-bottom:0}
.wpforms-container .choices__list--dropdown .choices__item--selectable.is-highlighted,
.wpforms-container .choices__list[aria-expanded] .choices__item--selectable.is-highlighted{
  background:rgba(156,192,149,.18)!important;color:#fff!important;
}
.wpforms-container .choices__list--dropdown .choices__item--choice.choices__placeholder{display:none}
.wpforms-container .choices__list--dropdown .choices__item[aria-selected=true]{color:var(--sn-salbei)!important}
.wpforms-container .choices__input{background:transparent!important;color:#fff!important;border-bottom:1px solid var(--sn-kante)!important}

/* ==========================================================================
   56 · PLUGIN-KONTAKTFORMULAR: ABSTAENDE (Alena, 17.09.2026, Suzuki-Seite)
   Gemessen: die Felder E-Mail, Telefon und Nachricht hatten margin-bottom 0,
   die naechste Beschriftung klebte direkt am Feld darueber; die Namensfelder
   im Raster hatten 16 px. Der Abstand haengt jetzt an der Beschriftung, nicht
   am Feld - dann ist er ueberall gleich, egal was das Plugin setzt.
   ========================================================================== */
.sn-formular .kontakt-formular label{margin:16px 0 7px!important}
/* ⚠ Die E-Mail-Beschriftung ist das erste direkte <label> im Formular (die
   Namensfelder stecken in eigenen Kaesten) - ein :first-of-type traefe sie.
   Deshalb nur die Namensfelder ohne oberen Abstand, das Raster traegt ihn. */
.sn-formular .kontakt-formular .kontakt-name-field > label{margin-top:0!important}
.sn-formular .kontakt-formular .kontakt-name-fields{margin:0!important}
.sn-formular .kontakt-formular .kontakt-name-fields + label{margin-top:16px!important}
.sn-formular .kontakt-formular input:not([type=submit]),
.sn-formular .kontakt-formular textarea{margin:0!important}
.sn-formular .kontakt-formular textarea{resize:none!important;min-height:140px}
.sn-formular .kontakt-formular input[type=submit]{margin-top:20px!important}
/* Der Shortcode-Baustein brachte 20 px Elementor-Abstand unter dem Formular mit */
.sn-formular .elementor-widget-shortcode{margin-bottom:0!important}

/* ==========================================================================
   57 · HOVER AUF DEN DATENKACHELN DER FAHRZEUGKARTE (Alena, 17.09.2026)
   Das Plugin faerbt .detail beim Ueberfahren weiss (#fff!important) - mit
   unserer hellen Schrift war dann nichts mehr lesbar. Jetzt nur eine leicht
   hellere Flaeche und ein salbeigruener Rand.
   ========================================================================== */
.auto-item .auto-details .detail:hover{
  background:rgba(255,255,255,.10)!important;border-color:rgba(156,192,149,.55)!important;
  color:var(--sn-tinte)!important;
}
.auto-item .auto-details .detail:hover span{color:#fff!important}
/* Preis-Kachel: das Plugin haengt beim Hover Magenta darunter */
.auto-item .auto-item-second span.auto-price:hover{background-color:rgba(255,255,255,.10)!important;color:var(--sn-tinte)!important}
/* Leere erste Zeile (der Platzhalter "Bitte auswaehlen" als Eintrag) und
   Listenhoehe: alle zehn Punkte sollen ohne Scrollen sichtbar sein. */
.wpforms-container .choices__list--dropdown .choices__item[data-value=""],
.wpforms-container .choices__list[aria-expanded] .choices__item[data-value=""]{display:none!important}
.wpforms-container .choices__list--dropdown .choices__list,
.wpforms-container .choices__list[aria-expanded] .choices__list{max-height:480px!important}

/* Google-Bewertungsknopf in der Buehne der Ankaufseite linksbuendig
   (Alena, 17.09.2026) - Trustindex zentriert sein Widget von Haus aus. */
.sn-hero-panel .ti-widget,.sn-hero-panel .ti-widget-container,.sn-hero-panel .ti-badge-wrapper{
  text-align:left!important;margin-left:0!important;margin-right:0!important;
  justify-content:flex-start!important;
}
.sn-hero-panel .ti-widget .ti-widget-container > *{margin-left:0!important}

/* ==========================================================================
   58 · STARTSEITE NACH VORLAGE auto-dieburg.de (17.09.2026)
   ========================================================================== */
/* Google-Zeile in der Buehne */
.sn-hero-google{font-size:.94rem;color:var(--sn-tinte2)!important;margin-top:4px}
.sn-hero-google strong{color:var(--sn-tinte)}
.sn-sterne{color:#F2C14E;letter-spacing:.06em}
/* Nummerierte Wege */
.sn-sz-kopf{align-items:center;justify-content:space-between}
.sn-sz-kopf .sn-schritt-nr{margin:0;font-size:.8rem;letter-spacing:.14em;color:var(--sn-salbei)}
/* Vertrauen: die Nummer als Auftakt */
.sn-vt-nr{font-size:.8rem!important;letter-spacing:.14em;color:var(--sn-salbei)!important;margin:0 0 2px!important}
/* Leistungen: Ankaufkarte links, vier Karten rechts */
.sn-ls-reihe{display:grid!important;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px;align-items:stretch;width:100%}
.sn-ls-reihe > .e-con{margin:0;width:auto!important;max-width:none!important}
.sn-ls-grid{gap:16px}
.sn-ls-karte{padding:20px 20px 22px!important}
.sn-ls-karte h3.elementor-heading-title{font-size:1.06rem!important}
.sn-ls-karte p{font-size:.92rem}
.sn-ls-ankauf{justify-content:center;padding:34px 32px!important}
.sn-ls-ankauf .elementor-widget-button{margin-top:6px!important}
.sn-ls-ankauf > .elementor-widget{flex:0 0 auto}
/* Google-Karte im Finanzierungsblock */
.sn-google-karte{text-align:left;justify-content:center}
.sn-google-karte .elementor-widget-button{margin-top:6px!important}
.sn-google-karte > .elementor-widget{flex:0 0 auto}
.sn-google-note{font-size:1.1rem;color:var(--sn-tinte2)!important;margin:0}
.sn-google-note strong{font-size:2.6rem;color:var(--sn-tinte);font-weight:800;line-height:1;margin-right:6px}
.sn-sterne-gross{font-size:1.5rem;margin:0}
.sn-modelle-start .sn-knopfreihe{margin-top:6px}
@media(max-width:1024px){
  .sn-ls-reihe{grid-template-columns:1fr}
}
@media(max-width:767px){
  .sn-ls-grid{grid-template-columns:1fr!important}
}

/* ==========================================================================
   59 · STARTSEITE: STRICH ZWISCHEN DEN ABSCHNITTEN
   Alena, 18.09.2026: zwei Bildbaender waren zu viel - "mach einfach einen
   Strich". Duenne Linie ueber die volle Breite, ab dem zweiten Abschnitt.
   ========================================================================== */
body.page-id-562 .sn-abschnitt + .sn-abschnitt{border-top:1px solid var(--sn-kante)}

/* ==========================================================================
   60 · MODELLKARTEN OHNE FOTO
   Kunde am 23.09.2026: nur aktuelles Herstellermaterial zeigen. Bis die
   Pressebilder da sind, stehen die Modelle als Namenskarten - nicht als
   leerer weisser Kasten, sondern als flache Kachel mit Name und Knopf.
   ========================================================================== */
.sn-modell-ohne-bild{justify-content:center;align-items:center;min-height:0;
  padding:22px 18px!important}
.sn-modell-ohne-bild h3.elementor-heading-title{font-size:1.18rem!important;margin:0!important}
.sn-marke-modelle .sn-modell-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1024px){ .sn-marke-modelle .sn-modell-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media(max-width:767px){ .sn-marke-modelle .sn-modell-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sn-modell-ohne-bild{padding:16px 12px!important} }

/* ==========================================================================
   61 · WPFORMS: PLUGIN-HINWEIS IN DU-FORM
   Der Hinweis "Du kannst bis zu 5 Dateien hochladen" kommt aus der deutschen
   Uebersetzung des Plugins und laesst sich nicht im Formular aendern. Die
   Seite siezt seit 23.09.2026 durchgehend, deshalb ausgeblendet - die
   Beschraenkung steht in der Feldbeschreibung darunter.
   ========================================================================== */
.wpforms-container .modern-hint{display:none!important}

/* ==========================================================================
   62 · GOOGLE-BEWERTUNGEN: IMMER SICHTBARER BALKEN
   Kunde am 23.09.2026: der Borlabs-Platzhalter vor dem Trustindex-Block ist
   "nicht selbsterklaerend". Note, Anzahl und ein Weg zum Google-Profil stehen
   jetzt ohne Einwilligung darueber.
   ========================================================================== */
.sn-google-balken{
  display:grid!important;grid-template-columns:minmax(0,260px) minmax(0,1fr);
  gap:34px;align-items:center;margin-bottom:26px;
  background:var(--sn-karte);background-image:var(--sn-kachel-verlauf);
  border:1px solid var(--sn-kante);border-radius:var(--sn-r);
  padding:26px 30px!important;
}
.sn-google-balken > .e-con{width:auto!important;max-width:none!important}
.sn-gb-zahl{border-right:1px solid var(--sn-kante);padding-right:30px!important}
.sn-gb-note{font-size:3rem;font-weight:800;line-height:1;color:#fff;margin:0}
.sn-gb-note span{font-size:1rem;font-weight:500;color:var(--sn-tinte2)}
.sn-gb-anzahl{font-size:.9rem;color:var(--sn-tinte2)}
.sn-gb-text p{max-width:70ch}
@media(max-width:767px){
  .sn-google-balken{grid-template-columns:1fr;gap:18px;padding:20px!important}
  .sn-gb-zahl{border-right:0;border-bottom:1px solid var(--sn-kante);
    padding-right:0!important;padding-bottom:16px!important}
}/* End custom CSS */