/* =========================================================
   Selbst gehostete Schriften — Inter (OFL) und Manrope (OFL)
   Keine Verbindung zu Google-Servern, keine IP-Übertragung.
   Nur die Subsets latin und latin-ext, das deckt Deutsch ab.
   ========================================================= */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/inter-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/inter-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/manrope-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/manrope-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/manrope-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/manrope-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================
   Mo’s Mobile Fahrzeugaufbereitung
   Anthrazit #0E1116 · Elektroblau #1E7BFF · Weiß
   Helles Theme, Blau ausschließlich als Akzent.
   ========================================================= */

:root {
  /* Marke */
  --ink:        #0E1116;
  --ink-2:      #171C24;
  --ink-3:      #2B313A;
  --blue:       #1E7BFF;
  --blue-dark:  #0B5CD5;
  --blue-soft:  #EAF2FF;

  /* Neutral */
  --text:       #4A5158;
  --muted:      #868D96;
  --line:       #E5E8EC;
  --line-soft:  #EFF1F4;
  --bg:         #FFFFFF;
  --bg-alt:     #F5F7FA;

  /* Form */
  --radius:      10px;
  --radius-lg:   14px;
  --radius-pill: 999px;

  --shadow-xs:   0 1px 2px rgba(14,17,22,.05);
  --shadow-sm:   0 4px 14px rgba(14,17,22,.07);
  --shadow:      0 10px 30px rgba(14,17,22,.10);
  --shadow-lg:   0 22px 56px rgba(14,17,22,.16);
  --shadow-blue: 0 8px 22px rgba(30,123,255,.30);

  --maxw: 1180px;

  /* Häkchen für die .checks-Listen */
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M5 12l5 5l10 -10' /%3E%3C/svg%3E");
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------------------------------------------------------
   Base
   --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
  color: var(--ink);
  margin: 0;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--blue); color: #fff; }

.container      { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.center { text-align: center; }
.desktop-only { display: flex; }
.mobile-only  { display: none; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Sprunglink: unsichtbar, bis er den Fokus bekommt. Ohne die :focus-Regel
   wäre er für Tastaturnutzer zwar erreichbar, aber nicht sichtbar — und
   damit praktisch unbenutzbar. */
.skip-link {
  position: absolute; top: -100px; left: 16px; z-index: 200;
  background: var(--blue); color: #fff; font-weight: 700; font-size: 14px;
  padding: 12px 20px; border-radius: 0 0 var(--radius) var(--radius);
  transition: top .16s var(--ease);
}
.skip-link:focus { top: 0; }

/* ---------------------------------------------------------
   Wortbildzeichen
   Bewusst als HTML/CSS statt als Bilddatei: nutzt die selbst
   gehosteten Schriften, bleibt bei jeder Größe scharf und lässt
   sich für helle wie dunkle Flächen allein per Klasse umfärben.
   --------------------------------------------------------- */
.logo { display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; }
.logo-sign {
  width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
  background: var(--blue); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 25px;
  box-shadow: 0 4px 12px rgba(30,123,255,.30);
}
.logo-words { display: flex; flex-direction: column; line-height: 1; }
.logo-name {
  font-family: 'Manrope', sans-serif; font-size: 21px; font-weight: 800;
  letter-spacing: -.02em; color: var(--ink); white-space: nowrap;
}
.logo-name em { font-style: normal; color: var(--blue); }
.logo-claim {
  font-size: 9.5px; font-weight: 700; letter-spacing: 1.55px;
  text-transform: uppercase; color: var(--muted); margin-top: 4px; white-space: nowrap;
}
.logo-invers .logo-name  { color: #fff; }
.logo-invers .logo-claim { color: rgba(255,255,255,.55); }
.logo-invers .logo-sign  { background: var(--blue); }
.logo-sm .logo-sign  { width: 34px; height: 34px; border-radius: 9px; font-size: 20px; }
.logo-sm .logo-name  { font-size: 17px; }
.logo-sm .logo-claim { font-size: 8px; letter-spacing: 1.2px; }

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 700; font-size: 15px; cursor: pointer;
  border: none; border-radius: var(--radius);
  padding: 13px 22px; min-height: 46px;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease),
              background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
  white-space: nowrap; text-align: center;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--blue); color: #fff; box-shadow: var(--shadow-blue); }
.btn-primary:hover { background: var(--blue-dark); box-shadow: 0 12px 28px rgba(30,123,255,.36); }

.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--ink-2); box-shadow: var(--shadow); }

.btn-outline { background: transparent; color: var(--ink); border: 2px solid var(--line); }
.btn-outline:hover { border-color: var(--ink); }

.btn-ghost { background: rgba(255,255,255,.08); color: #fff; border: 1.5px solid rgba(255,255,255,.32); }
.btn-ghost:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.6); }

.btn-lg    { padding: 16px 30px; font-size: 16px; min-height: 54px; }
.btn-sm    { padding: 9px 15px; font-size: 14px; min-height: 40px; }
.btn-block { width: 100%; }

/* ---------------------------------------------------------
   Karten – Signature: blauer Kantenakzent beim Hover
   --------------------------------------------------------- */
.card {
  position: relative; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 76px; }

.main-nav { align-items: center; gap: 4px; }
.main-nav > a, .nav-item > button {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 15px; font-weight: 600; color: var(--ink);
  padding: 9px 13px; border-radius: 8px; background: none; border: none; cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.main-nav > a:hover, .nav-item > button:hover { background: var(--bg-alt); color: var(--blue); }
.main-nav a[aria-current="page"] { color: var(--blue); }

/* Dropdown Leistungen. Öffnet per Hover, per Tastatur-Fokus und per Klick
   (main.js setzt dafür .is-open) — nur Hover würde Tastatur und Touch aussperren. */
.nav-item { position: relative; }
.nav-item > button i { font-size: 16px; transition: transform .2s var(--ease); }
.nav-item:hover > button i,
.nav-item:focus-within > button i,
.nav-item.is-open > button i { transform: rotate(180deg); }
.nav-drop {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: 330px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 8px; opacity: 0; visibility: hidden;
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.nav-item:hover .nav-drop,
.nav-item:focus-within .nav-drop,
.nav-item.is-open .nav-drop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-drop::before { content: ''; position: absolute; bottom: 100%; left: 0; right: 0; height: 12px; }
.nav-drop a { display: flex; gap: 12px; align-items: flex-start; padding: 11px 12px; border-radius: 9px; transition: background .14s var(--ease); }
.nav-drop a:hover { background: var(--bg-alt); }
.nav-drop i { color: var(--blue); font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.nav-drop strong { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.nav-drop span   { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.45; }

.header-actions { align-items: center; gap: 14px; flex-shrink: 0; }
.phone-link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.phone-link i { color: var(--blue); font-size: 19px; }

.icon-btn {
  width: 44px; height: 44px; border-radius: var(--radius); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; color: #fff; border: none; cursor: pointer;
}
.icon-btn-phone { background: var(--ink); }
.icon-btn-menu  { background: var(--bg-alt); color: var(--ink); }

/* Mobile Vollbild-Navigation */
.mobile-nav {
  position: fixed; inset: 0; z-index: 90; background: var(--ink);
  display: flex; flex-direction: column; padding: 22px 24px 32px;
  overflow-y: auto; opacity: 0; visibility: hidden;
  transition: opacity .22s var(--ease), visibility .22s;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; }
.mobile-nav-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; }
.mobile-nav-close {
  width: 44px; height: 44px; border-radius: var(--radius); background: rgba(255,255,255,.1);
  color: #fff; border: none; font-size: 24px; display: flex; align-items: center;
  justify-content: center; cursor: pointer;
}
.mobile-nav-links { display: flex; flex-direction: column; }
.mobile-nav-links > a {
  display: flex; align-items: center; justify-content: space-between;
  font-family: 'Manrope', sans-serif; font-size: 21px; font-weight: 700; color: #fff;
  padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.1);
}
.mobile-nav-links > a i { color: var(--blue); font-size: 20px; }
  display: block; font-size: 12px; font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--blue); margin-bottom: 10px;
}
  display: block; font-size: 17px; font-weight: 600; color: rgba(255,255,255,.86);
  padding: 10px 0 10px 16px; border-left: 2px solid rgba(255,255,255,.14);
}
.mobile-nav-foot { margin-top: auto; padding-top: 28px; display: flex; flex-direction: column; gap: 10px; }
.mobile-nav-foot .btn { width: 100%; }

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */
.hero {
  position: relative; background-color: #0B0E12;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  color: #fff; border-bottom: 4px solid var(--blue); overflow: hidden;
}
/* Verlauf als eigene Ebene. Das Foto wird inline gesetzt — ein relativer Pfad
   in einer CSS-Variablen würde gegen die Stylesheet-Datei aufgelöst und damit
   ins Leere zeigen. */
.hero::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(11,14,18,.95) 0%, rgba(11,14,18,.84) 46%, rgba(11,14,18,.55) 100%);
}
/* Zweispaltiger Hero: links das Versprechen, rechts direkt die Anfrage.
   Das Formular steht bewusst über der Falz — bei einem Werbebudget, das nur
   wenige Klicks am Tag hergibt, darf zwischen Ankommen und Anfragen kein
   Scrollen liegen. */
.hero-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 400px; gap: 60px;
  align-items: center; padding: 74px 24px 86px;
}
.hero-text { max-width: 620px; }

.badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(30,123,255,.16); color: #A9CCFF;
  border: 1px solid rgba(30,123,255,.45);
  font-size: 13px; font-weight: 700; letter-spacing: .3px;
  padding: 7px 15px; border-radius: var(--radius-pill); margin-bottom: 22px;
}
.badge i { font-size: 16px; color: var(--blue); }

.hero h1 { font-size: clamp(32px, 5.2vw, 54px); color: #fff; line-height: 1.08; margin-bottom: 20px; }
.hero h1 em, .lp-hero h1 em { font-style: normal; color: #fff; position: relative; white-space: nowrap; }
.hero h1 em::after, .lp-hero h1 em::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: .06em; height: .16em;
  background: var(--blue); z-index: -1; border-radius: 2px;
}
.hero-sub { font-size: clamp(16px, 2vw, 18.5px); color: rgba(255,255,255,.82); max-width: 580px; margin-bottom: 26px; }

/* Untereinander, auf jeder Breite. Nebeneinander umgebrochen ergeben sich je
   nach Textlänge ungleiche Zeilen — die Liste liest sich dann wie ein Absatz
   statt wie vier Argumente. */
.hero-usps { display: flex; flex-direction: column; gap: 11px; margin-bottom: 30px; }
.hero-usps li { display: flex; align-items: center; gap: 10px; font-size: 15.5px; font-weight: 600; color: #fff; }
.hero-usps i  { color: var(--blue); font-size: 20px; flex-shrink: 0; }

/* --- Wegstrecke: Standort → Ihre Einfahrt ------------------------------
   Signaturelement der Marke. Sagt in einem Blick, was der ganze Betrieb
   ausmacht: wir fahren, Sie bleiben stehen. */
.hero-route { display: flex; align-items: center; gap: 16px; max-width: 400px; margin-top: 36px; }
.hr-node {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); color: #fff;
}
.hr-track {
  position: relative; flex: 1; height: 2px;
  background: repeating-linear-gradient(to right, rgba(255,255,255,.3) 0 6px, transparent 6px 13px);
}
.hr-car {
  position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%);
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--blue); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  box-shadow: 0 4px 16px rgba(30,123,255,.55);
  animation: fahrt 6.5s var(--ease) infinite;
}
@keyframes fahrt {
  0%   { left: 0;    opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
.hero-route-label { font-size: 13.5px; color: rgba(255,255,255,.6); margin-top: 14px; }
.hero-route-label strong { color: #fff; font-weight: 700; }

/* --- Anfrage-Karte im Hero --------------------------------------------- */
.hero-card {
  background: #fff; border-radius: var(--radius-lg); padding: 26px 26px 22px;
  box-shadow: 0 28px 70px rgba(0,0,0,.42); position: relative; overflow: hidden;
}
.hero-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--blue); }
.hero-card-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--blue); margin-bottom: 7px;
}
.hero-card h2 { font-size: 21px; margin-bottom: 4px; }
.hero-card-sub { font-size: 13.5px; color: var(--muted); margin-bottom: 18px; }
.hero-card .lead-form { gap: 10px; }
.hero-card .form-note { margin-top: 2px; }

/* Trennung „oder direkt" mit Linien links und rechts */
.hero-card-alt { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.hero-card-or {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 12px;
}
.hero-card-or::before, .hero-card-or::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}
.hero-card-btns { display: flex; gap: 9px; }
.hero-card-btns a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 46px; border-radius: var(--radius); font-size: 14px; font-weight: 700; color: #fff;
  transition: transform .16s var(--ease), background .16s var(--ease);
}
.hero-card-btns a:hover { transform: translateY(-2px); }
.hca-phone { background: var(--ink); }
.hca-phone:hover { background: var(--ink-2); }
.hca-wa { background: #25D366; }
.hca-wa:hover { background: #1EBE5D; }

/* --- Vertrauensleiste: schmales Band, keine schwebenden Karten ---------- */
.trust-strip { background: var(--ink-2); border-bottom: 1px solid rgba(255,255,255,.08); }
.trust-inner {
  display: flex; align-items: stretch; justify-content: space-between;
  flex-wrap: wrap; padding: 0 24px;
}
.trust-item {
  display: flex; align-items: center; gap: 13px;
  flex: 1; min-width: 210px; padding: 20px 26px 20px 0;
}
.trust-item + .trust-item { padding-left: 26px; border-left: 1px solid rgba(255,255,255,.1); }
.trust-item > i {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  background: rgba(30,123,255,.16); color: var(--blue);
  display: flex; align-items: center; justify-content: center; font-size: 21px;
}
.trust-num {
  font-family: 'Manrope', sans-serif; font-size: 19px; font-weight: 800;
  color: #fff; line-height: 1.15; letter-spacing: -.02em;
}
.trust-num span { color: var(--blue); }
.trust-label { font-size: 12.5px; color: rgba(255,255,255,.55); line-height: 1.3; }

/* ---------------------------------------------------------
   Sections
   --------------------------------------------------------- */
.section       { padding: 76px 0; }
.section-tight { padding: 40px 0; }
.section-alt   { background: var(--bg-alt); }
main section[id] { scroll-margin-top: 92px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  text-transform: uppercase; letter-spacing: 2px; font-size: 12.5px; font-weight: 800;
  color: var(--blue); margin-bottom: 14px;
}
.eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--blue); border-radius: 2px; }
.eyebrow-light { color: rgba(255,255,255,.85); }

.section-head { max-width: 730px; margin: 0 auto 46px; text-align: center; }
.section-head .eyebrow::after { content: ''; width: 22px; height: 2px; background: var(--blue); border-radius: 2px; }
.section-title { font-size: clamp(26px, 3.6vw, 38px); margin-bottom: 12px; }
.section-sub   { color: var(--text); font-size: 16.5px; }

.grid   { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

/* Häkchen-Listen */
.checks li { position: relative; padding-left: 28px; margin-bottom: 10px; font-size: 15px; color: var(--ink-3); }
.checks li::before {
  content: ''; position: absolute; left: 0; top: 7px;
  width: 17px; height: 17px; background-color: var(--blue);
  -webkit-mask: var(--icon-check) center / contain no-repeat;
          mask: var(--icon-check) center / contain no-repeat;
}

/* ---------------------------------------------------------
   Leistungen als abwechselnde Zeilen
   Bild auf der einen, Text auf der anderen Seite, bei jeder Leistung
   die Seite gewechselt. Das gibt den Fotos echte Größe und liest sich
   wie ein Artikel statt wie eine Produktliste.
   --------------------------------------------------------- */
.service-rows { display: flex; flex-direction: column; gap: 52px; }
.service-row { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.service-row:nth-child(even) .sr-media { order: 2; }
.sr-media {
  border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3 / 2;
  background-color: var(--ink-2); font-size: 0; color: transparent;
  box-shadow: var(--shadow-sm);
}
.sr-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.service-row:hover .sr-media img { transform: scale(1.03); }
.sr-body { max-width: 520px; display: flex; flex-direction: column; }
.service-row:nth-child(even) .sr-body { margin-left: auto; }
.sr-body h3 { font-size: 21px; line-height: 1.25; }
.sr-body > p { font-size: 15.5px; margin-bottom: 18px; }

/* Symbol neben der Überschrift statt als Plättchen auf dem Foto — dort
   verdeckt es immer den Teil des Motivs, der die Leistung zeigt. */
.service-head { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 12px; }
.service-head > i {
  width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0; margin-top: 1px;
  background: var(--blue-soft); color: var(--blue);
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}

/* Bullet Points statt Pillen: Schlagworte in Kapselform lesen sich wie
   Filterchips und laden zum Klicken ein, ohne klickbar zu sein. */
.service-points { margin-bottom: 20px; }
.service-points li {
  position: relative; padding-left: 26px; margin-bottom: 9px;
  font-size: 14.5px; color: var(--ink-3);
}
.service-points li:last-child { margin-bottom: 0; }
.service-points li::before {
  content: ''; position: absolute; left: 0; top: 6px;
  width: 16px; height: 16px; background-color: var(--blue);
  -webkit-mask: var(--icon-check) center / contain no-repeat;
          mask: var(--icon-check) center / contain no-repeat;
}

/* Leistungsumfang, eingeklappt. Auf einem Singlepager muss der Detailgrad
   einer eigenen Unterseite mit auf die Seite — sichtbar wäre das eine
   Textwand. Eingeklappt bleibt die Seite überschaubar, Google liest mit. */
.service-scope { margin-top: auto; border-top: 1px solid var(--line-soft); padding-top: 16px; }
.service-scope summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700; color: var(--blue);
}
.service-scope summary::-webkit-details-marker { display: none; }
.service-scope summary i { font-size: 18px; transition: transform .24s var(--ease); }
.service-scope[open] summary i { transform: rotate(45deg); }
.service-scope .checks { margin-top: 16px; }
.service-scope .checks li { font-size: 14.5px; margin-bottom: 12px; }
.service-scope .checks li:last-child { margin-bottom: 0; }
.service-scope .checks strong { color: var(--ink); font-weight: 700; }

/* ---------------------------------------------------------
   „So funktioniert mobil" – zwei Spalten: was wir mitbringen,
   was vor Ort da sein muss
   --------------------------------------------------------- */
.mobile-how { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.how-col {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 30px 28px; position: relative; overflow: hidden;
}
.how-col::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--blue); }
.how-col.how-col-dark { background: var(--ink); border-color: var(--ink); }
.how-col.how-col-dark h3 { color: #fff; }
.how-col.how-col-dark .how-item span { color: rgba(255,255,255,.78); }
.how-col.how-col-dark .how-item i { background: rgba(30,123,255,.18); }
.how-head { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; }
.how-head h3 { font-size: 19px; }
.how-head > i {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  background: var(--blue); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.how-list { display: flex; flex-direction: column; gap: 13px; }
.how-item { display: flex; align-items: flex-start; gap: 12px; }
.how-item i {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; margin-top: 1px;
  background: var(--blue-soft); color: var(--blue);
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.how-item span { font-size: 14.5px; color: var(--ink-3); line-height: 1.55; }
.how-item strong { color: var(--ink); font-weight: 700; }
.how-col-dark .how-item strong { color: #fff; }
.how-note {
  margin-top: 26px; padding: 18px 22px; border-left: 3px solid var(--blue);
  background: var(--blue-soft); border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 15px; color: var(--ink-3);
}
.how-note strong { color: var(--ink); }

/* ---------------------------------------------------------
   Preis-Pakete
   --------------------------------------------------------- */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.price-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 32px 28px; display: flex; flex-direction: column; position: relative;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.price-card.is-featured { border-color: var(--blue); box-shadow: var(--shadow); }
.price-flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--blue); color: #fff; font-size: 11.5px; font-weight: 800;
  letter-spacing: 1.1px; text-transform: uppercase; padding: 6px 16px;
  border-radius: var(--radius-pill); white-space: nowrap;
  box-shadow: var(--shadow-blue);
}
.price-card h3 { font-size: 21px; margin-bottom: 6px; }
.price-lead { font-size: 14.5px; color: var(--muted); margin-bottom: 20px; }
.price-tag { display: flex; align-items: baseline; gap: 7px; margin-bottom: 4px; }
.price-from { font-size: 14px; font-weight: 600; color: var(--muted); }
.price-value { font-family: 'Manrope', sans-serif; font-size: 38px; font-weight: 800; color: var(--ink); letter-spacing: -.03em; }
.price-unit { font-size: 15px; font-weight: 700; color: var(--muted); }
.price-meta { font-size: 13px; color: var(--muted); margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; gap: 7px; }
.price-meta i { color: var(--blue); font-size: 16px; }
.price-card .checks { margin-bottom: 26px; }
.price-card .checks li { font-size: 14.5px; }
.price-card .btn { margin-top: auto; }
.price-hint {
  margin-top: 30px; display: flex; align-items: flex-start; gap: 12px;
  background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 22px; font-size: 14.5px; color: var(--ink-3);
}
.price-hint i { color: var(--blue); font-size: 21px; flex-shrink: 0; margin-top: 1px; }
.price-hint strong { color: var(--ink); }

/* ---------------------------------------------------------
   Anlässe — bewusst als Zeilen mit Haarlinie statt als Kacheln.
   Direkt über dieser Sektion stehen schon die Leistungskacheln;
   zwei Kachelraster hintereinander lassen die Seite gleichförmig
   wirken, obwohl der Inhalt ein anderer ist.
   --------------------------------------------------------- */
.occasions { display: grid; grid-template-columns: 1fr 1fr; gap: 0 54px; }
.occasion {
  display: flex; gap: 20px; align-items: flex-start;
  padding: 26px 0; border-bottom: 1px solid var(--line);
}
/* letzte Zeile jeder Spalte ohne Trennlinie */
.occasion:nth-last-child(-n+2) { border-bottom: none; }
.occasion > i {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--blue-soft); color: var(--blue); font-size: 26px;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.occasion:hover > i { background: var(--blue); color: #fff; }
.occasion h3 { font-size: 18px; margin-bottom: 7px; }
.occasion p  { font-size: 14.5px; }

/* ---------------------------------------------------------
   CTA-Band
   --------------------------------------------------------- */
.cta-band {
  background: var(--ink); border-radius: var(--radius-lg);
  border-left: 5px solid var(--blue);
  padding: 36px 44px; display: flex; align-items: center; justify-content: space-between;
  gap: 26px; flex-wrap: wrap; position: relative; overflow: hidden;
}
/* Weicher Lichtschein aus der unteren rechten Ecke statt eines
   Diagonalstreifens — nimmt dem dunklen Block die Härte, ohne zu dominieren. */
.cta-band::after {
  content: ''; position: absolute; right: -120px; bottom: -160px;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(30,123,255,.30) 0%, rgba(30,123,255,0) 70%);
  pointer-events: none;
}
.cta-band-text { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 20px; }
.cta-band-text > i {
  width: 50px; height: 50px; border-radius: 14px; flex-shrink: 0; margin-top: 2px;
  background: rgba(30,123,255,.18); color: var(--blue);
  display: flex; align-items: center; justify-content: center; font-size: 25px;
}
.cta-band h2 { color: #fff; font-size: clamp(21px, 2.6vw, 27px); margin-bottom: 8px; }
.cta-band p  { color: rgba(255,255,255,.7); font-size: 15.5px; max-width: 520px; }
.cta-band-actions { display: flex; gap: 12px; flex-shrink: 0; position: relative; z-index: 1; }

/* ---------------------------------------------------------
   Vergleich als drei Panels statt als Tabelle mit hervorgehobener
   Spalte. Spaltenweise gelesen steht bei jedem Anbieter eine
   zusammenhängende Geschichte — in einer Tabelle springt das Auge
   zeilenweise hin und her. Das eigene Panel ist dunkel statt
   nur eingefärbt.
   --------------------------------------------------------- */
.vs-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.vs-col {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 26px 24px 22px; height: 100%;
}
.vs-col-us { background: var(--ink); border-color: var(--ink); box-shadow: var(--shadow); }
.vs-head { padding-bottom: 16px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.vs-col-us .vs-head { border-bottom-color: rgba(255,255,255,.14); }
.vs-head strong {
  display: block; font-family: 'Manrope', sans-serif; font-size: 17px;
  font-weight: 800; color: var(--ink); letter-spacing: -.01em;
}
.vs-col-us .vs-head strong { color: #fff; }
.vs-head span { font-size: 13px; color: var(--muted); }
.vs-col-us .vs-head span { color: var(--blue); }
.vs-list li { padding: 15px 0; border-bottom: 1px solid var(--line-soft); }
.vs-col-us .vs-list li { border-bottom-color: rgba(255,255,255,.1); }
.vs-list li:last-child { border-bottom: none; padding-bottom: 0; }
.vs-krit {
  display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.vs-col-us .vs-krit { color: rgba(255,255,255,.45); }
.vs-wert { display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; color: var(--ink-3); line-height: 1.5; }
.vs-col-us .vs-wert { color: rgba(255,255,255,.88); }
.vs-wert i { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.vs-ja i { color: #1E9E52; }
.vs-col-us .vs-ja i { color: #4ADE80; }
.vs-nein { color: var(--muted); }
.vs-nein i { color: #C7CBD1; }
.compare-foot { text-align: center; margin-top: 34px; }

/* ---------------------------------------------------------
   Vorher / Nachher
   --------------------------------------------------------- */
/* Asymmetrisch statt drei gleich große Kacheln: ein großer Regler, daneben
   zwei kleinere. Drei identische Kästen nebeneinander wirken wie eine
   Galerie — so wird klar, welches Ergebnis das Hauptargument ist. */
.ba-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; }
.ba-neben { display: grid; grid-template-rows: 1fr 1fr; gap: 20px; min-width: 0; }
.ba-card { overflow: hidden; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ba-gross { min-height: 540px; }
.ba-slider {
  position: relative; width: 100%; flex: 1; min-height: 210px; overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: #DDE1E6;
  touch-action: none; cursor: ew-resize; user-select: none; -webkit-user-select: none;
}
/* font-size:0 verhindert, dass bei fehlendem Bild der Alt-Text als Textblock
   im Rahmen steht. Im Quelltext bleibt er erhalten. */
.ba-layer { position: absolute; inset: 0; overflow: hidden; font-size: 0; color: transparent; }
.ba-layer img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.ba-before { clip-path: inset(0 50% 0 0); }
.ba-tag {
  position: absolute; top: 14px; z-index: 3; pointer-events: none;
  font-size: 11.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  color: #fff; padding: 5px 11px; border-radius: 6px;
}
.ba-tag-before { left: 14px; background: rgba(14,17,22,.72); }
.ba-tag-after  { right: 14px; background: var(--blue); }
.ba-handle {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: #fff;
  transform: translateX(-50%); z-index: 4; pointer-events: none; box-shadow: 0 0 12px rgba(0,0,0,.4);
}
.ba-grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--blue);
  display: flex; align-items: center; justify-content: center; font-size: 21px;
  box-shadow: 0 3px 14px rgba(0,0,0,.3);
}
.ba-card figcaption { padding: 16px 18px; font-size: 14.5px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.ba-card figcaption i { color: var(--blue); font-size: 17px; }

/* ---------------------------------------------------------
   3 Schritte – Timeline
   --------------------------------------------------------- */
/* Drei Spalten mit Oberkante statt zentrierter Kreise an einer gestrichelten
   Linie. Linksbündig liest es sich schneller, und die Sektion sieht nicht aus
   wie die Zeitleiste, die auf jeder zweiten Dienstleisterseite steht. */
/* Zeitleiste mit durchgehender Schiene links. Drei Spalten nebeneinander
   erzwingen die Lesereihenfolge nicht — untereinander an einer Linie ist
   sofort klar, dass Schritt 2 nach Schritt 1 kommt. */
.steps { position: relative; max-width: 760px; margin: 0 auto 44px; padding-left: 22px; }
.steps::before {
  content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px;
  background: linear-gradient(to bottom, var(--blue) 0%, var(--blue) 70%, var(--line) 100%);
  border-radius: 2px;
}
.step { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 22px; align-items: start; padding: 0 0 34px 24px; }
.step:last-child { padding-bottom: 0; }
/* Punkt auf der Schiene */
.step::before {
  content: ''; position: absolute; left: -27px; top: 22px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--blue); box-shadow: 0 0 0 5px var(--bg-alt);
}
.section:not(.section-alt) .step::before { box-shadow: 0 0 0 5px #fff; }
.step-icon { display: flex; justify-content: center; align-items: flex-start; padding-top: 2px; }
.step-text { min-width: 0; }
.step-label {
  display: block; font-family: 'Manrope', sans-serif;
  font-size: 11.5px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--blue); margin-bottom: 6px;
}
.step h3 { font-size: 20px; margin-bottom: 8px; }
.step p  { font-size: 15px; }
.steps-cta { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.steps-cta-note { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); }
.steps-cta-note i { color: var(--blue); font-size: 17px; }

/* ---------------------------------------------------------
   Bewertungen
   --------------------------------------------------------- */
/* Eine Zeile statt Score-Block plus Balkendiagramm. Die Sterneverteilung
   sagt bei einer Handvoll Bewertungen ohnehin nichts aus und macht die
   Sektion nur breit. */
.reviews-score {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  width: fit-content; margin: 0 auto 40px;   /* unter der zentrierten Überschrift */
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 14px 28px 14px 22px; box-shadow: var(--shadow-xs);
}
.rs-value { font-family: 'Manrope', sans-serif; font-size: 34px; font-weight: 800; color: var(--ink); line-height: 1; letter-spacing: -.02em; }
.rs-mitte { display: flex; flex-direction: column; gap: 3px; }
.rs-stars { color: #F5A623; font-size: 15px; letter-spacing: 2px; }
.rs-count { font-size: 13px; color: var(--muted); }
.rs-google {
  display: inline-flex; align-items: center; gap: 8px;
  padding-left: 22px; border-left: 1px solid var(--line);
  font-size: 13.5px; font-weight: 700; color: var(--ink); white-space: nowrap;
}
.rs-google i { font-size: 19px; color: var(--blue); }

/* Zitate statt Laufband. Ein endlos scrollendes Karussell zwingt zum Warten,
   bis die gesuchte Bewertung wieder vorbeikommt — zwei ruhige Zitate
   nebeneinander liest man in derselben Zeit fertig. */
.voices { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 48px; max-width: 940px; margin: 0 auto; }
.voice { padding: 26px 0 0; border-top: 1px solid var(--line); }
.voice blockquote {
  margin: 0 0 18px; font-family: 'Manrope', sans-serif;
  font-size: 17.5px; line-height: 1.55; color: var(--ink); font-weight: 600;
}
.voice blockquote::before { content: '„'; color: var(--blue); font-size: 26px; line-height: 0; vertical-align: -.08em; margin-right: 2px; }
.voice-wer { display: flex; align-items: center; gap: 11px; }
.voice-wer .stars { color: #F5A623; font-size: 13px; letter-spacing: 2px; }
.voice-wer strong { font-size: 14px; color: var(--ink); font-weight: 700; }
.voice-wer span { font-size: 12.5px; color: var(--muted); }
.voice-wer i { color: var(--blue); font-size: 15px; }

/* ---------------------------------------------------------
   Einsatzgebiet
   --------------------------------------------------------- */
.region-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.region-left h2 { font-size: clamp(25px, 3.2vw, 34px); margin-bottom: 14px; }
.region-left > p { font-size: 16.5px; margin-bottom: 22px; }
.region-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.region-chips span {
  font-size: 13.5px; font-weight: 600; color: var(--ink-3);
  background: #fff; border: 1px solid var(--line); padding: 7px 14px; border-radius: var(--radius-pill);
}
.region-chips span.is-home { background: var(--ink); color: #fff; border-color: var(--ink); }
.region-map {
  width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-lg);
  box-shadow: var(--shadow); overflow: hidden; background-color: var(--ink);
  display: flex; align-items: center; justify-content: center; font-size: 0; color: transparent;
}
.region-map img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------------------------------------------------------
   Karte mit Zwei-Klick-Einwilligung
   Google Maps lädt erst nach dem Klick — bis dahin geht keine
   IP an Google. Ohne das würde die Einbindung der eigenen
   Datenschutzerklärung widersprechen.
   --------------------------------------------------------- */
.map-embed { position: relative; width: 100%; height: 250px; border-radius: var(--radius-lg); overflow: hidden; background: var(--ink); }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-consent {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; text-align: center;
  padding: 24px 22px; background: var(--ink); color: rgba(255,255,255,.72);
  border: none; cursor: pointer; font: inherit; width: 100%;
}
.map-consent i { font-size: 30px; color: var(--blue); }
.map-consent strong { font-family: 'Manrope', sans-serif; font-size: 16px; color: #fff; }
.map-consent span { font-size: 13px; max-width: 340px; line-height: 1.55; }
.map-consent .map-consent-btn {
  margin-top: 6px; background: var(--blue); color: #fff; font-size: 14px; font-weight: 700;
  padding: 10px 20px; border-radius: var(--radius);
}
.map-consent:hover .map-consent-btn { background: var(--blue-dark); }

/* ---------------------------------------------------------
   Kontakt / Quiz
   --------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: start; }
.contact-left h3 { font-size: 21px; margin-bottom: 10px; }
.contact-left > p { font-size: 15.5px; margin-bottom: 22px; }
.contact-options { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.contact-option {
  display: flex; align-items: center; gap: 15px; padding: 15px 18px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease);
}
.contact-option:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: #DBDEE3; }
.co-icon { width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; }
.co-icon-phone { background: var(--ink); }
.co-icon-wa    { background: #25D366; }
.co-icon-mail  { background: var(--blue); }
.co-text  { display: flex; flex-direction: column; line-height: 1.35; }
.co-label { font-size: 12.5px; color: var(--muted); }
.co-value { font-size: 15.5px; font-weight: 700; color: var(--ink); }

.quiz {
  background: var(--ink); border-radius: var(--radius-lg); padding: 28px;
  min-height: 340px; box-shadow: var(--shadow-lg); position: relative; overflow: hidden;
}
.quiz::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--blue); }
.quiz-logo-wrap { display: flex; justify-content: center; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.1); }
.quiz-progress-head { display: flex; justify-content: space-between; margin-bottom: 9px; font-size: 12px; font-weight: 700; }
#q-step-label { color: rgba(255,255,255,.55); letter-spacing: 1.2px; }
#q-pct { color: var(--blue); }
.quiz-bar { height: 5px; background: rgba(255,255,255,.12); border-radius: 4px; margin-bottom: 24px; overflow: hidden; }
#q-bar { height: 100%; width: 20%; background: var(--blue); border-radius: 4px; transition: width .34s var(--ease); }
.q-title { font-family: 'Manrope', sans-serif; font-size: 19px; font-weight: 800; color: #fff; text-align: center; margin-bottom: 8px; }
.q-hint  { text-align: center; color: rgba(255,255,255,.55); font-size: 13px; margin-bottom: 18px; }
.q-grid  { display: grid; gap: 10px; }
.q-grid-2 { grid-template-columns: 1fr 1fr; }
.q-opt {
  cursor: pointer; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius); padding: 16px 12px; text-align: center; color: #fff;
  font-size: 14.5px; font-weight: 600;
  transition: background .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
}
.q-opt:hover { background: rgba(30,123,255,.18); border-color: var(--blue); transform: translateY(-2px); }
/* flex statt block: als Masken-Icon würde ein Block-Kasten links kleben,
   die Zentrierung über text-align greift nur bei Inline-Elementen. */
.q-opt i { font-size: 25px; color: var(--blue); display: flex; justify-content: center; margin-bottom: 8px; }
.q-field {
  width: 100%; height: 48px; border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06);
  color: #fff; padding: 0 15px; font: inherit; font-size: 14.5px;
}
.q-field::placeholder { color: rgba(255,255,255,.45); }
.q-field:focus { outline: none; border-color: var(--blue); background: rgba(255,255,255,.1); }
.q-back { cursor: pointer; text-align: center; margin-top: 16px; font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.55); }
.q-back:hover { color: #fff; }
.quiz-done { text-align: center; padding: 34px 8px; color: #fff; }
.quiz-done > i { font-size: 52px; color: var(--blue); }
.quiz-done strong { display: block; font-family: 'Manrope', sans-serif; font-size: 21px; margin: 12px 0 8px; }
.quiz-done p { color: rgba(255,255,255,.7); font-size: 14.5px; }
.quiz-done-urgent { margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); }
.quiz-done-urgent-label { display: block; font-size: 12.5px; color: rgba(255,255,255,.55); margin-bottom: 15px; }
.quiz-done-urgent-btns { display: flex; justify-content: center; gap: 16px; }
.quiz-urgent-btn {
  width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center; font-size: 25px; color: #fff;
  transition: background .2s var(--ease), transform .16s var(--ease);
}
.quiz-urgent-btn:hover { background: rgba(255,255,255,.2); transform: scale(1.07); }
.quiz-urgent-wa { background: #25D366; }
.quiz-urgent-wa:hover { background: #1EBE5D; }

/* ---------------------------------------------------------
   FAQ
   --------------------------------------------------------- */
.faq { max-width: 780px; margin: 0 auto; }
.faq details {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0 20px; margin-bottom: 12px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.faq details[open] { border-color: #DBDEE3; box-shadow: var(--shadow-sm); }
.faq summary {
  cursor: pointer; list-style: none; padding: 18px 0;
  font-family: 'Manrope', sans-serif; font-size: 16.5px; font-weight: 700; color: var(--ink);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq-plus { color: var(--blue); font-size: 21px; flex-shrink: 0; transition: transform .24s var(--ease); }
.faq details[open] .faq-plus { transform: rotate(45deg); }
.faq details p { padding: 0 0 20px; font-size: 15.5px; color: var(--text); max-width: 92%; }

/* ---------------------------------------------------------
   Finale CTA
   --------------------------------------------------------- */
.final-cta {
  position: relative; padding: 104px 0; overflow: hidden; background-color: var(--ink);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.final-cta-overlay { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(11,14,18,.95) 0%, rgba(11,14,18,.86) 50%, rgba(11,60,140,.74) 100%); }
.final-cta-inner { position: relative; z-index: 1; text-align: center; max-width: 780px; margin: 0 auto; }
.final-cta-inner .eyebrow { justify-content: center; }
.final-cta h2 { font-size: clamp(28px, 4.4vw, 46px); color: #fff; line-height: 1.12; margin-bottom: 20px; }
.final-cta-inner > p { font-size: 17px; color: rgba(255,255,255,.8); margin-bottom: 36px; }
.final-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 34px; }
.final-cta-trust { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; }
.final-cta-trust span { display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255,255,255,.75); }
.final-cta-trust i { color: var(--blue); font-size: 18px; }

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */
.site-footer { background: var(--ink); color: rgba(255,255,255,.62); }
.footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding: 58px 0 46px; }
.footer-brand .logo { margin-bottom: 20px; }
.footer-brand p { font-size: 14.5px; line-height: 1.7; margin-bottom: 20px; max-width: 320px; }
.footer-col h2, .footer-col h3 {
  color: #fff; font-family: 'Manrope', sans-serif; font-size: 13px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 18px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 11px; }
.footer-col a { font-size: 14.5px; color: rgba(255,255,255,.62); transition: color .15s var(--ease); }
.footer-col a:hover { color: var(--blue); }
.footer-contact-line { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 13px; font-size: 14.5px; }
.footer-contact-line i { color: var(--blue); font-size: 18px; flex-shrink: 0; margin-top: 3px; }
.footer-hours div { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 9px; font-size: 14px; }
.footer-hours span:first-child { color: rgba(255,255,255,.85); }
.footer-bottom-wrap { border-top: 1px solid rgba(255,255,255,.1); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  flex-wrap: wrap; font-size: 13px; color: rgba(255,255,255,.45); padding: 20px 0;
}
.footer-bottom a:hover { color: #fff; }

/* ---------------------------------------------------------
   Sticky Mobile-CTA-Leiste
   --------------------------------------------------------- */
.sticky-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: none; background: #fff; border-top: 1px solid var(--line);
  box-shadow: 0 -6px 22px rgba(14,17,22,.1);
  padding: 9px 12px calc(9px + env(safe-area-inset-bottom)); gap: 9px;
}
.sticky-bar a, .sticky-bar button {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 48px; border-radius: var(--radius); border: none; cursor: pointer;
  font-size: 14px; font-weight: 700; color: #fff;
}
.sb-call  { background: var(--ink); }
.sb-wa    { background: #25D366; }
.sb-offer { background: var(--blue); flex: 1.3; }

/* ---------------------------------------------------------
   Modal + Formulare
   --------------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(11,14,18,.68); backdrop-filter: blur(3px); }
.modal-card {
  position: relative; z-index: 1; width: 100%; max-width: 470px; padding: 32px;
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  max-height: 92vh; overflow-y: auto; animation: modalPop .24s var(--ease) both;
}
@keyframes modalPop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-close {
  position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 9px;
  background: var(--bg-alt); border: none; cursor: pointer; font-size: 20px; color: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.modal-close:hover { background: var(--line); }
.modal-card h2 { font-size: 23px; padding-right: 40px; margin-bottom: 8px; }
.modal-sub { font-size: 15px; color: var(--text); margin-bottom: 22px; }

.lead-form { display: flex; flex-direction: column; gap: 12px; }
.lead-form input, .lead-form select, .lead-form textarea {
  font: inherit; font-size: 15px; padding: 13px 15px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--bg-alt); color: var(--ink); width: 100%;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
}
.lead-form textarea { resize: vertical; min-height: 96px; }
.lead-form input::placeholder, .lead-form textarea::placeholder { color: var(--muted); }
.lead-form select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--blue) 50%), linear-gradient(135deg, var(--blue) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus {
  outline: none; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 3px rgba(30,123,255,.15);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-note { font-size: 12px; color: var(--muted); text-align: center; display: flex; align-items: center; justify-content: center; gap: 6px; }
.form-error { background: #FDECEE; color: #A8121F; border: 1px solid #F5C6CA; border-radius: var(--radius); padding: 11px 14px; font-size: 13.5px; }
.form-success { text-align: center; padding: 22px 8px; }
.form-success i { font-size: 50px; color: var(--blue); }
.form-success strong { display: block; font-family: 'Manrope', sans-serif; font-size: 21px; color: var(--ink); margin: 10px 0 6px; }
.form-success p { font-size: 15px; }

/* Honigtopf gegen Spam-Bots: aus dem Sichtfeld geschoben statt display:none,
   weil manche Bots ausgeblendete Felder überspringen. */
.hp-field {
  position: absolute !important; left: -9999px !important; top: auto !important;
  width: 1px !important; height: 1px !important; overflow: hidden !important;
}

.form-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; color: var(--text); text-align: left; }
.form-consent input { width: 18px; height: 18px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--blue); cursor: pointer; }
.form-consent a { color: var(--blue); text-decoration: underline; }
.quiz .form-consent { color: rgba(255,255,255,.66); }
.quiz .form-consent a { color: #fff; }

.modal-quick { display: none; gap: 9px; margin-top: 16px; }
.modal-quick a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 12px 6px; border-radius: var(--radius); font-size: 13.5px; font-weight: 700; color: #fff; }
.mq-phone { background: var(--ink); }
.mq-wa    { background: #25D366; }
.mq-mail  { background: var(--blue); }

/* ---------------------------------------------------------
   Cookie-Banner
   --------------------------------------------------------- */
.cookie-wall { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; }
.cookie-wall[hidden] { display: none !important; }
.cookie-backdrop { position: absolute; inset: 0; background: rgba(11,14,18,.74); backdrop-filter: blur(4px); }
.cookie-card {
  position: relative; z-index: 1; background: #fff; border-radius: var(--radius-lg);
  padding: 38px 36px 32px; max-width: 540px; width: 100%;
  box-shadow: var(--shadow-lg); text-align: center; animation: modalPop .28s var(--ease) both;
}
.cookie-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--blue); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.cookie-logo { margin-bottom: 22px; display: flex; justify-content: center; }
.cookie-title { font-size: 21px; margin-bottom: 12px; }
.cookie-text { font-size: 14px; line-height: 1.65; margin-bottom: 16px; }
.cookie-links { font-size: 12.5px; color: var(--muted); margin-bottom: 24px; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.cookie-links a { color: var(--blue); text-decoration: underline; }
.cookie-actions { display: flex; gap: 9px; }
.cookie-actions .btn, .btn-cookie-reject, .btn-cookie-settings { flex: 1; font-size: 14px; padding: 12px 10px; justify-content: center; }
.btn-cookie-reject, .btn-cookie-settings {
  background: transparent; border: 2px solid var(--line); color: var(--ink-3);
  border-radius: var(--radius); font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.btn-cookie-reject:hover, .btn-cookie-settings:hover { border-color: var(--ink); color: var(--ink); }
.cookie-settings-panel { text-align: left; margin-top: 22px; border-top: 1px solid var(--line); padding-top: 20px; }
.cookie-settings-panel[hidden] { display: none !important; }
.cookie-category { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.cookie-category:last-of-type { border-bottom: none; margin-bottom: 16px; }
.cookie-cat-label { font-family: 'Manrope', sans-serif; font-size: 13.5px; font-weight: 800; color: var(--ink); margin-bottom: 3px; }
.cookie-cat-text { font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.cookie-always-on { font-size: 12px; font-weight: 700; color: var(--blue); white-space: nowrap; padding-top: 2px; }
.cookie-toggle-wrap { display: flex; align-items: center; padding-top: 2px; flex-shrink: 0; }
.cookie-toggle-input { position: absolute; opacity: 0; width: 0; height: 0; }
.cookie-toggle-track { display: inline-block; width: 42px; height: 23px; background: var(--line); border-radius: 12px; position: relative; cursor: pointer; transition: background .2s var(--ease); }
.cookie-toggle-input:checked + .cookie-toggle-track { background: var(--blue); }
.cookie-toggle-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; background: #fff; border-radius: 50%; transition: transform .2s var(--ease); }
.cookie-toggle-input:checked + .cookie-toggle-track::after { transform: translateX(19px); }
.cookie-toggle-input:focus-visible + .cookie-toggle-track { outline: 3px solid var(--blue); outline-offset: 3px; }

/* ---------------------------------------------------------
   Rechtsseiten
   --------------------------------------------------------- */
.legal { max-width: 820px; margin: 0 auto; padding: 60px 24px 84px; }
.legal h1 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 10px; }
.legal-intro { color: var(--muted); font-size: 15.5px; margin-bottom: 40px; }
.legal h2 { font-size: 22px; margin: 42px 0 14px; }
.legal h3 { font-size: 17px; margin: 26px 0 8px; }
.legal p, .legal li { font-size: 15.5px; color: var(--text); line-height: 1.8; }
.legal p { margin-bottom: 15px; }
.legal ul { padding-left: 24px; list-style: disc; margin-bottom: 15px; }
.legal ul li { margin-bottom: 7px; }
.legal a { color: var(--blue); text-decoration: underline; }
.legal address { font-style: normal; line-height: 1.8; font-size: 15.5px; color: var(--text); }
.legal .note { background: var(--bg-alt); border-left: 3px solid var(--blue); padding: 16px 20px; border-radius: 0 var(--radius) var(--radius) 0; margin: 22px 0; font-size: 14.5px; }
.legal-scroll { overflow-x: auto; margin: 18px 0 26px; border: 1px solid var(--line); border-radius: var(--radius); }
.legal-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; }
.legal-table th, .legal-table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: top; line-height: 1.6; }
.legal-table thead th { background: var(--bg-alt); font-family: 'Manrope', sans-serif; font-weight: 800; color: var(--ink); font-size: 13px; }
.legal-table tbody tr:last-child td { border-bottom: none; }
.legal-table code { background: var(--bg-alt); padding: 2px 6px; border-radius: 4px; font-size: 12.5px; color: var(--ink); }
.legal-badge { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-pill); margin-left: 10px; vertical-align: middle; }
.legal-badge-on  { background: var(--bg-alt); color: var(--ink-3); }
.legal-badge-opt { background: var(--blue-soft); color: var(--blue-dark); }

.legal-header .header-inner { height: 68px; }
.legal-back { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 700; color: var(--blue); }
.legal-back:hover { color: var(--blue-dark); }

/* 404 */
.notfound { text-align: center; padding: 110px 24px 120px; max-width: 620px; margin: 0 auto; }
.notfound-code { font-family: 'Manrope', sans-serif; font-size: clamp(78px, 16vw, 140px); font-weight: 800; color: var(--blue); line-height: 1; letter-spacing: -.04em; }
.notfound h1 { font-size: clamp(24px, 3.4vw, 32px); margin: 12px 0 14px; }
.notfound p { font-size: 16.5px; margin-bottom: 30px; }
.notfound-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1080px) {
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 34px; }
  .symptom-grid, .process { grid-template-columns: repeat(2, 1fr); }
  /* Ab zwei Spalten läuft die Zeitleiste nicht mehr durch — Linie weg */
  .process { gap: 34px 28px; }
  .process::before { display: none; }
  .occasions { gap: 0 34px; }
  .cross-grid { grid-template-columns: 1fr; }
  .pricing { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .price-card.is-featured { order: -1; }
}

@media (max-width: 900px) {
  .desktop-only { display: none; }
  .mobile-only  { display: flex; }
  .header-inner { height: 68px; }
  .header-actions.mobile-only { gap: 8px; }
  .logo-sign { width: 38px; height: 38px; font-size: 22px; }
  .logo-name { font-size: 18px; }
  .logo-claim { font-size: 8.5px; letter-spacing: 1.3px; }

  /* Einspaltig: erst das Versprechen, dann die Anfrage-Karte */
  .hero-grid { grid-template-columns: 1fr; gap: 34px; padding: 54px 24px 60px; }
  .hero-text { max-width: none; }
  .hero-card { max-width: 460px; }
  .trust-item { min-width: 46%; padding-right: 16px; }
  .trust-item:nth-child(odd) { padding-left: 0; border-left: none; }

  .section { padding: 56px 0; }
  .section-head { margin-bottom: 34px; }

  .service-grid { grid-template-columns: 1fr; }
  /* Zeilen werden zu Blöcken: Bild oben, Text darunter — die Wechselseite
     ergibt einspaltig keinen Sinn mehr. */
  .service-rows { gap: 44px; }
  .service-row { grid-template-columns: 1fr; gap: 22px; }
  .service-row:nth-child(even) .sr-media { order: 0; }
  .sr-body, .service-row:nth-child(even) .sr-body { max-width: none; margin-left: 0; }

  .vs-cols { grid-template-columns: 1fr; gap: 16px; }
  .vs-col-us { order: -1; }

  /* Der große Regler kommt nach oben, die beiden kleinen darunter */
  .ba-layout { grid-template-columns: 1fr; }
  .ba-gross { min-height: 0; }
  .ba-gross .ba-slider { min-height: 300px; }
  .ba-neben { grid-template-rows: none; }
  .ba-neben .ba-slider { min-height: 240px; }

  .steps { padding-left: 18px; }
  .step { grid-template-columns: 48px 1fr; gap: 16px; padding-left: 20px; }
  .step::before { left: -23px; }

  .voices { grid-template-columns: 1fr; gap: 4px; }

  .mobile-how { grid-template-columns: 1fr; }
  .grid-2, .grid-3,   .region-grid, .contact-grid, .factor-grid, .inline-form-grid { grid-template-columns: 1fr; gap: 30px; }
  .contact-right { order: -1; }
  .scope-grid { grid-template-columns: 1fr; gap: 0; }

  .steps { grid-template-columns: 1fr; gap: 34px; }
  .steps::before { display: none; }

  .cta-band { padding: 30px 26px; text-align: center; justify-content: center; }
  .cta-band::after { display: none; }
  .cta-band p { margin: 0 auto; }
  .cta-band-actions { flex-direction: column; width: 100%; }
  .cta-band-actions .btn { width: 100%; }

  .final-cta { padding: 72px 0; }
  .final-cta-actions { flex-direction: column; align-items: stretch; }
  .final-cta-trust { flex-direction: column; gap: 14px; }

  .ba-slider { height: 290px; }
  .review-card { width: 288px; }

  .sticky-bar { display: flex; }
  body { padding-bottom: 74px; }

  .modal-quick { display: flex; }
  .lp-hero-inner { padding: 40px 24px 62px; }
}

@media (max-width: 640px) {
  .reviews-score { gap: 20px; }
  .symptom-grid, .process { grid-template-columns: 1fr; }
  .occasions { grid-template-columns: 1fr; }
  /* Einspaltig trennt jede Zeile außer der letzten */
  .occasion:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  .occasion:last-child { border-bottom: none; }

  /* Vergleich: auf dem Handy als gestapelte Karten statt seitlich scrollender Tabelle */
  .compare-wrap { border: none; box-shadow: none; background: transparent; border-radius: 0; padding: 0; }
  .compare-table { min-width: 0; }
  .compare-table thead { display: none; }
  .compare-table, .compare-table tbody, .compare-table tr, .compare-table td { display: block; width: 100%; }
  .compare-table tr { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); margin-bottom: 14px; overflow: hidden; }
  .compare-table td { border-bottom: none; padding: 0; }
  .compare-table .compare-crit { padding: 14px 18px; background: var(--bg-alt); border-bottom: 1px solid var(--line); font-size: 15.5px; }
  .compare-table td[data-label] { padding: 14px 18px; }
  .compare-table td[data-label] + td[data-label] { border-top: 1px solid var(--line-soft); }
  .compare-table td[data-label]::before {
    content: attr(data-label); display: block;
    font-size: 10.5px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase;
    color: var(--muted); margin-bottom: 7px;
  }
  .compare-table .compare-col-us { border-left: 3px solid var(--blue); border-right: none; }
  .compare-table .compare-col-us::before { color: var(--blue); }
}

@media (max-width: 480px) {
  .container,   .hero-grid { padding: 42px 16px 50px; }
  .hero-usps { flex-direction: column; gap: 9px; }
    .hero-cta .btn { width: 100%; }
  .hero-card { padding: 22px 20px 20px; }
  .trust-inner { padding: 0 16px; }
  .trust-item { min-width: 100%; padding: 16px 0; }
  .trust-item + .trust-item { padding-left: 0; border-left: none; border-top: 1px solid rgba(255,255,255,.1); }
  .q-grid-2 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .cookie-card { padding: 30px 20px 24px; }
  .cookie-actions { flex-direction: column; }
  .modal-card { padding: 26px 20px; }
  .footer-cols { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 8px; }
  .ba-slider { height: 250px; }
  .inline-form-card { padding: 24px 20px; }
  .price-box, .price-card { padding: 26px 22px; }
  .how-col { padding: 26px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
    *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .btn:hover, .card-hover:hover, .contact-option:hover,
  .symptom:hover, .occasion:hover, .price-card:hover { transform: none; }
  /* Ohne eigene Regel würde die Fahrt sofort im Endzustand landen —
     und der ist unsichtbar. Also mittig parken statt verschwinden. */
  .hr-car { animation: none; left: 50%; opacity: 1; }
}

@media print {
  .site-header, .sticky-bar, .cookie-wall, .modal, .final-cta { display: none !important; }
}

/* ---------------------------------------------------------
   Icons (Tabler, MIT) — als CSS-Masken statt Webfont.
   Größe folgt font-size, Farbe folgt color. Die Maske sitzt auf
   ::before, damit Icon-Badges mit eigener Hintergrundfarbe
   weiterhin funktionieren. Erzeugt von build-icons.py.
   --------------------------------------------------------- */
.ti {
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: -.125em; flex-shrink: 0; font-style: normal;
}
.ti::before {
  content: ''; display: block; width: 1em; height: 1em;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}

.ti-adjustments-horizontal::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12 6a2 2 0 1 0 4 0a2 2 0 1 0 -4 0' /%3E%3Cpath d='M4 6l8 0' /%3E%3Cpath d='M16 6l4 0' /%3E%3Cpath d='M6 12a2 2 0 1 0 4 0a2 2 0 1 0 -4 0' /%3E%3Cpath d='M4 12l2 0' /%3E%3Cpath d='M10 12l10 0' /%3E%3Cpath d='M15 18a2 2 0 1 0 4 0a2 2 0 1 0 -4 0' /%3E%3Cpath d='M4 18l11 0' /%3E%3Cpath d='M19 18l1 0' /%3E%3C/svg%3E"); }
.ti-alert-triangle::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12 9v4' /%3E%3Cpath d='M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0' /%3E%3Cpath d='M12 16h.01' /%3E%3C/svg%3E"); }
.ti-armchair::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M5 11a2 2 0 0 1 2 2v2h10v-2a2 2 0 1 1 4 0v4a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-4a2 2 0 0 1 2 -2' /%3E%3Cpath d='M5 11v-5a3 3 0 0 1 3 -3h8a3 3 0 0 1 3 3v5' /%3E%3Cpath d='M6 19v2' /%3E%3Cpath d='M18 19v2' /%3E%3C/svg%3E"); }
.ti-arrow-left::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M5 12l14 0' /%3E%3Cpath d='M5 12l6 6' /%3E%3Cpath d='M5 12l6 -6' /%3E%3C/svg%3E"); }
.ti-arrow-right::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M5 12l14 0' /%3E%3Cpath d='M13 18l6 -6' /%3E%3Cpath d='M13 6l6 6' /%3E%3C/svg%3E"); }
.ti-arrows-horizontal::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M7 8l-4 4l4 4' /%3E%3Cpath d='M17 8l4 4l-4 4' /%3E%3Cpath d='M3 12l18 0' /%3E%3C/svg%3E"); }
.ti-bolt::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11' /%3E%3C/svg%3E"); }
.ti-brand-google::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M20.945 11a9 9 0 1 1 -3.284 -5.997l-2.655 2.392a5.5 5.5 0 1 0 2.119 6.605h-4.125v-3h7.945' /%3E%3C/svg%3E"); }
.ti-brand-whatsapp::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M3 21l1.65 -3.8a9 9 0 1 1 3.4 2.9l-5.05 .9' /%3E%3Cpath d='M9 10a.5 .5 0 0 0 1 0v-1a.5 .5 0 0 0 -1 0v1a5 5 0 0 0 5 5h1a.5 .5 0 0 0 0 -1h-1a.5 .5 0 0 0 0 1' /%3E%3C/svg%3E"); }
.ti-briefcase::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M3 9a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2l0 -9' /%3E%3Cpath d='M8 7v-2a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v2' /%3E%3Cpath d='M12 12l0 .01' /%3E%3Cpath d='M3 13a20 20 0 0 0 18 0' /%3E%3C/svg%3E"); }
.ti-brush::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M3 21v-4a4 4 0 1 1 4 4h-4' /%3E%3Cpath d='M21 3a16 16 0 0 0 -12.8 10.2' /%3E%3Cpath d='M21 3a16 16 0 0 1 -10.2 12.8' /%3E%3Cpath d='M10.6 9a9 9 0 0 1 4.4 4.4' /%3E%3C/svg%3E"); }
.ti-bucket-droplet::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M5 16l1.465 1.638a2 2 0 1 1 -3.015 .099l1.55 -1.737' /%3E%3Cpath d='M13.737 9.737c2.299 -2.3 3.23 -5.095 2.081 -6.245c-1.15 -1.15 -3.945 -.217 -6.244 2.082c-2.3 2.299 -3.231 5.095 -2.082 6.244c1.15 1.15 3.946 .218 6.245 -2.081' /%3E%3Cpath d='M7.492 11.818c.362 .362 .768 .676 1.208 .934l6.895 4.047c1.078 .557 2.255 -.075 3.692 -1.512c1.437 -1.437 2.07 -2.614 1.512 -3.692c-.372 -.718 -1.72 -3.017 -4.047 -6.895a6.015 6.015 0 0 0 -.934 -1.208' /%3E%3C/svg%3E"); }
.ti-building-community::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M8 9l5 5v7h-5v-4m0 4h-5v-7l5 -5m1 1v-6a1 1 0 0 1 1 -1h10a1 1 0 0 1 1 1v17h-8' /%3E%3Cpath d='M13 7l0 .01' /%3E%3Cpath d='M17 7l0 .01' /%3E%3Cpath d='M17 11l0 .01' /%3E%3Cpath d='M17 15l0 .01' /%3E%3C/svg%3E"); }
.ti-calendar-check::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M11.5 21h-5.5a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v6' /%3E%3Cpath d='M16 3v4' /%3E%3Cpath d='M8 3v4' /%3E%3Cpath d='M4 11h16' /%3E%3Cpath d='M15 19l2 2l4 -4' /%3E%3C/svg%3E"); }
.ti-car-garage::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M5 20a2 2 0 1 0 4 0a2 2 0 0 0 -4 0' /%3E%3Cpath d='M15 20a2 2 0 1 0 4 0a2 2 0 0 0 -4 0' /%3E%3Cpath d='M5 20h-2v-6l2 -5h9l4 5h1a2 2 0 0 1 2 2v4h-2m-4 0h-6m-6 -6h15m-6 0v-5' /%3E%3Cpath d='M3 6l9 -4l9 4' /%3E%3C/svg%3E"); }
.ti-car::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M5 17a2 2 0 1 0 4 0a2 2 0 1 0 -4 0' /%3E%3Cpath d='M15 17a2 2 0 1 0 4 0a2 2 0 1 0 -4 0' /%3E%3Cpath d='M5 17h-2v-6l2 -5h9l4 5h1a2 2 0 0 1 2 2v4h-2m-4 0h-6m-6 -6h15m-6 0v-5' /%3E%3C/svg%3E"); }
.ti-certificate::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12 15a3 3 0 1 0 6 0a3 3 0 1 0 -6 0' /%3E%3Cpath d='M13 17.5v4.5l2 -1.5l2 1.5v-4.5' /%3E%3Cpath d='M10 19h-5a2 2 0 0 1 -2 -2v-10c0 -1.1 .9 -2 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -1 1.73' /%3E%3Cpath d='M6 9l12 0' /%3E%3Cpath d='M6 12l3 0' /%3E%3Cpath d='M6 15l2 0' /%3E%3C/svg%3E"); }
.ti-check::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M5 12l5 5l10 -10' /%3E%3C/svg%3E"); }
.ti-chevron-down::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M6 9l6 6l6 -6' /%3E%3C/svg%3E"); }
.ti-chevron-right::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M9 6l6 6l-6 6' /%3E%3C/svg%3E"); }
.ti-circle-check::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0' /%3E%3Cpath d='M9 12l2 2l4 -4' /%3E%3C/svg%3E"); }
.ti-circle-x::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0' /%3E%3Cpath d='M10 10l4 4m0 -4l-4 4' /%3E%3C/svg%3E"); }
.ti-clipboard-check::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2' /%3E%3Cpath d='M9 5a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2' /%3E%3Cpath d='M9 14l2 2l4 -4' /%3E%3C/svg%3E"); }
.ti-clock::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0' /%3E%3Cpath d='M12 7v5l3 3' /%3E%3C/svg%3E"); }
.ti-currency-euro::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M17.2 7a6 7 0 1 0 0 10' /%3E%3Cpath d='M13 10h-8m0 4h8' /%3E%3C/svg%3E"); }
.ti-dog::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M11 5h2' /%3E%3Cpath d='M19 12c-.667 5.333 -2.333 8 -5 8h-4c-2.667 0 -4.333 -2.667 -5 -8' /%3E%3Cpath d='M11 16c0 .667 .333 1 1 1s1 -.333 1 -1h-2' /%3E%3Cpath d='M12 18v2' /%3E%3Cpath d='M10 11v.01' /%3E%3Cpath d='M14 11v.01' /%3E%3Cpath d='M5 4l6 .97l-6.238 6.688a1.021 1.021 0 0 1 -1.41 .111a.953 .953 0 0 1 -.327 -.954l1.975 -6.815' /%3E%3Cpath d='M19 4l-6 .97l6.238 6.688c.358 .408 .989 .458 1.41 .111a.953 .953 0 0 0 .327 -.954l-1.975 -6.815' /%3E%3C/svg%3E"); }
.ti-droplet::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M7.502 19.423c2.602 2.105 6.395 2.105 8.996 0c2.602 -2.105 3.262 -5.708 1.566 -8.546l-4.89 -7.26c-.42 -.625 -1.287 -.803 -1.936 -.397a1.376 1.376 0 0 0 -.41 .397l-4.893 7.26c-1.695 2.838 -1.035 6.441 1.567 8.546' /%3E%3C/svg%3E"); }
.ti-engine::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M3 10v6' /%3E%3Cpath d='M12 5v3' /%3E%3Cpath d='M10 5h4' /%3E%3Cpath d='M5 13h-2' /%3E%3Cpath d='M6 10h2l2 -2h3.382a1 1 0 0 1 .894 .553l1.448 2.894a1 1 0 0 0 .894 .553h1.382v-2h2a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-2v-2h-3v2a1 1 0 0 1 -1 1h-3.465a1 1 0 0 1 -.832 -.445l-1.703 -2.555h-2v-6' /%3E%3C/svg%3E"); }
.ti-home::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M5 12l-2 0l9 -9l9 9l-2 0' /%3E%3Cpath d='M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7' /%3E%3Cpath d='M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6' /%3E%3C/svg%3E"); }
.ti-key::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M16.555 3.843l3.602 3.602a2.877 2.877 0 0 1 0 4.069l-2.643 2.643a2.877 2.877 0 0 1 -4.069 0l-.301 -.301l-6.558 6.558a2 2 0 0 1 -1.239 .578l-.175 .008h-1.172a1 1 0 0 1 -.993 -.883l-.007 -.117v-1.172a2 2 0 0 1 .467 -1.284l.119 -.13l.414 -.414h2v-2h2v-2l2.144 -2.144l-.301 -.301a2.877 2.877 0 0 1 0 -4.069l2.643 -2.643a2.877 2.877 0 0 1 4.069 0' /%3E%3Cpath d='M15 9h.01' /%3E%3C/svg%3E"); }
.ti-lock::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6' /%3E%3Cpath d='M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0' /%3E%3Cpath d='M8 11v-4a4 4 0 1 1 8 0v4' /%3E%3C/svg%3E"); }
.ti-mail::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10' /%3E%3Cpath d='M3 7l9 6l9 -6' /%3E%3C/svg%3E"); }
.ti-map-pin::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0' /%3E%3Cpath d='M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0' /%3E%3C/svg%3E"); }
.ti-menu-2::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M4 6l16 0' /%3E%3Cpath d='M4 12l16 0' /%3E%3Cpath d='M4 18l16 0' /%3E%3C/svg%3E"); }
.ti-parking::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14' /%3E%3Cpath d='M10 16v-8h2.667c.736 0 1.333 .895 1.333 2s-.597 2 -1.333 2h-2.667' /%3E%3C/svg%3E"); }
.ti-phone::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2' /%3E%3C/svg%3E"); }
.ti-photo-check::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M15 8h.01' /%3E%3Cpath d='M11.5 21h-5.5a3 3 0 0 1 -3 -3v-12a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v7' /%3E%3Cpath d='M3 16l5 -5c.928 -.893 2.072 -.893 3 0l4 4' /%3E%3Cpath d='M14 14l1 -1c.928 -.893 2.072 -.893 3 0l.5 .5' /%3E%3Cpath d='M15 19l2 2l4 -4' /%3E%3C/svg%3E"); }
.ti-plus::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12 5l0 14' /%3E%3Cpath d='M5 12l14 0' /%3E%3C/svg%3E"); }
.ti-road-sign::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M13.446 2.6l7.955 7.954a2.045 2.045 0 0 1 0 2.892l-7.955 7.955a2.045 2.045 0 0 1 -2.892 0l-7.955 -7.955a2.045 2.045 0 0 1 0 -2.892l7.955 -7.955a2.045 2.045 0 0 1 2.892 0' /%3E%3Cpath d='M9 14v-2c0 -.59 .414 -1 1 -1h5' /%3E%3Cpath d='M13 9l2 2l-2 2' /%3E%3C/svg%3E"); }
.ti-ruler-measure::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M19.875 12c.621 0 1.125 .512 1.125 1.143v5.714c0 .631 -.504 1.143 -1.125 1.143h-15.875a1 1 0 0 1 -1 -1v-5.857c0 -.631 .504 -1.143 1.125 -1.143h15.75' /%3E%3Cpath d='M9 12v2' /%3E%3Cpath d='M6 12v3' /%3E%3Cpath d='M12 12v3' /%3E%3Cpath d='M18 12v3' /%3E%3Cpath d='M15 12v2' /%3E%3Cpath d='M3 3v4' /%3E%3Cpath d='M3 5h18' /%3E%3Cpath d='M21 3v4' /%3E%3C/svg%3E"); }
.ti-shield-check::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M11.46 20.846a12 12 0 0 1 -7.96 -14.846a12 12 0 0 0 8.5 -3a12 12 0 0 0 8.5 3a12 12 0 0 1 -.09 7.06' /%3E%3Cpath d='M15 19l2 2l4 -4' /%3E%3C/svg%3E"); }
.ti-sparkles::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M16 18a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2m0 -12a2 2 0 0 1 2 2a2 2 0 0 1 2 -2a2 2 0 0 1 -2 -2a2 2 0 0 1 -2 2m-7 12a6 6 0 0 1 6 -6a6 6 0 0 1 -6 -6a6 6 0 0 1 -6 6a6 6 0 0 1 6 6' /%3E%3C/svg%3E"); }
.ti-spray::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M4 12a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v7a2 2 0 0 1 -2 2h-4a2 2 0 0 1 -2 -2l0 -7' /%3E%3Cpath d='M6 10v-4a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v4' /%3E%3Cpath d='M15 7h.01' /%3E%3Cpath d='M18 9h.01' /%3E%3Cpath d='M18 5h.01' /%3E%3Cpath d='M21 3h.01' /%3E%3Cpath d='M21 7h.01' /%3E%3Cpath d='M21 11h.01' /%3E%3Cpath d='M10 7h1' /%3E%3C/svg%3E"); }
.ti-stack-2::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12 4l-8 4l8 4l8 -4l-8 -4' /%3E%3Cpath d='M4 12l8 4l8 -4' /%3E%3Cpath d='M4 16l8 4l8 -4' /%3E%3C/svg%3E"); }
.ti-star::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873l-6.158 -3.245' /%3E%3C/svg%3E"); }
.ti-steering-wheel::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0' /%3E%3Cpath d='M10 12a2 2 0 1 0 4 0a2 2 0 1 0 -4 0' /%3E%3Cpath d='M12 14l0 7' /%3E%3Cpath d='M10 12l-6.75 -2' /%3E%3Cpath d='M14 12l6.75 -2' /%3E%3C/svg%3E"); }
.ti-sun::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M8 12a4 4 0 1 0 8 0a4 4 0 1 0 -8 0' /%3E%3Cpath d='M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7' /%3E%3C/svg%3E"); }
.ti-tag::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M6.5 7.5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0' /%3E%3Cpath d='M3 6v5.172a2 2 0 0 0 .586 1.414l7.71 7.71a2.41 2.41 0 0 0 3.408 0l5.592 -5.592a2.41 2.41 0 0 0 0 -3.408l-7.71 -7.71a2 2 0 0 0 -1.414 -.586h-5.172a3 3 0 0 0 -3 3' /%3E%3C/svg%3E"); }
.ti-thumb-up::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3' /%3E%3C/svg%3E"); }
.ti-tools::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M3 21h4l13 -13a1.5 1.5 0 0 0 -4 -4l-13 13v4' /%3E%3Cpath d='M14.5 5.5l4 4' /%3E%3Cpath d='M12 8l-5 -5l-4 4l5 5' /%3E%3Cpath d='M7 8l-1.5 1.5' /%3E%3Cpath d='M16 12l5 5l-4 4l-5 -5' /%3E%3Cpath d='M16 17l-1.5 1.5' /%3E%3C/svg%3E"); }
.ti-truck::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M5 17a2 2 0 1 0 4 0a2 2 0 1 0 -4 0' /%3E%3Cpath d='M15 17a2 2 0 1 0 4 0a2 2 0 1 0 -4 0' /%3E%3Cpath d='M5 17h-2v-11a1 1 0 0 1 1 -1h9v12m-4 0h6m4 0h2v-6h-8m0 -5h5l3 5' /%3E%3C/svg%3E"); }
.ti-users::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M5 7a4 4 0 1 0 8 0a4 4 0 1 0 -8 0' /%3E%3Cpath d='M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2' /%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75' /%3E%3Cpath d='M21 21v-2a4 4 0 0 0 -3 -3.85' /%3E%3C/svg%3E"); }
.ti-vacuum-cleaner::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M21 12a9 9 0 1 1 -18 0a9 9 0 0 1 18 0' /%3E%3Cpath d='M14 9a2 2 0 1 1 -4 0a2 2 0 0 1 4 0' /%3E%3Cpath d='M12 16h.01' /%3E%3C/svg%3E"); }
.ti-wash-dry::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12' /%3E%3C/svg%3E"); }
.ti-wash-machine::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M5 5a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2l0 -14' /%3E%3Cpath d='M8 14a4 4 0 1 0 8 0a4 4 0 1 0 -8 0' /%3E%3Cpath d='M8 6h.01' /%3E%3Cpath d='M11 6h.01' /%3E%3Cpath d='M14 6h2' /%3E%3Cpath d='M8 14c1.333 -.667 2.667 -.667 4 0c1.333 .667 2.667 .667 4 0' /%3E%3C/svg%3E"); }
.ti-wind::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M5 8h8.5a2.5 2.5 0 1 0 -2.34 -3.24' /%3E%3Cpath d='M3 12h15.5a2.5 2.5 0 1 1 -2.34 3.24' /%3E%3Cpath d='M4 16h5.5a2.5 2.5 0 1 1 -2.34 3.24' /%3E%3C/svg%3E"); }
.ti-x::before { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M18 6l-12 12' /%3E%3Cpath d='M6 6l12 12' /%3E%3C/svg%3E"); }