/* =========================================================
   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.

   Beides sind Variable Fonts: EINE Datei je Subset deckt alle Schnitte
   ab, deshalb steht bei font-weight ein Bereich statt eines Wertes.
   Zuvor lagen hier zwölf @font-face-Blöcke auf zwölf Dateien — die aber
   nur vier verschiedene Dateien waren, jede zwei- bis viermal dupliziert.
   Der Browser hat dadurch dieselbe Schrift mehrfach geladen.
   ========================================================= */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-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: 100 900;
  font-display: swap;
  src: url('../fonts/inter-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: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-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: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-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;
}

/* =========================================================
   EB Sachverständigenbüro — Kfz-Gutachten Stuttgart
   Navy #0B1524 · Signal-Orange #E8620E · Weiß
   Helles Theme; Orange ausschließlich als Handlungsfarbe.
   ========================================================= */

:root {
  --ink:         #0B1524;
  --ink-2:       #12213A;
  --ink-3:       #1D3151;

  --accent:      #E8620E;   /* Buttons, Badges — nur auf Fläche, nie als Fließtext */
  --accent-dark: #C2510A;
  --accent-ink:  #A8460B;   /* dieselbe Familie, aber 4.5:1 auf Weiß — für Text */
  --accent-soft: #FFF2E8;

  --green:       #0E8F62;
  --green-soft:  #E7F6F0;

  --text:        #44505F;
  --muted:       #78838F;
  --line:        #E3E8EE;
  --line-soft:   #EFF2F6;
  --bg:          #FFFFFF;
  --bg-alt:      #F5F7FA;

  --radius:      10px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  --shadow-xs:   0 1px 2px rgba(11,21,36,.05);
  --shadow-sm:   0 4px 14px rgba(11,21,36,.07);
  --shadow:      0 10px 30px rgba(11,21,36,.10);
  --shadow-lg:   0 22px 56px rgba(11,21,36,.18);
  --shadow-acc:  0 8px 22px rgba(232,98,14,.30);

  --maxw:        1180px;
  --ease:        cubic-bezier(.22,.61,.36,1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* clip statt hidden: schneidet die ausgefahrene mobile Navigation ab, ohne
     einen Scroll-Container zu erzeugen — der sticky Header bliebe sonst nicht
     stehen. Ältere Browser fallen auf overflow-x am body zurück. */
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

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

h1, h2, h3, h4 {
  font-family: 'Manrope', 'Inter', sans-serif;
  color: var(--ink);
  line-height: 1.16;
  letter-spacing: -.022em;
  margin: 0 0 14px;
  font-weight: 800;
}
h1 { font-size: clamp(2rem, 4.4vw, 3.35rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
h3 { font-size: 1.2rem; font-weight: 700; }
p  { margin: 0 0 16px; }
a  { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
ul { margin: 0 0 16px; padding-left: 20px; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.container      { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.container-wide { width: 100%; max-width: 1360px;      margin: 0 auto; padding: 0 24px; }

.section       { padding: 92px 0; }
.section-tight { padding: 40px 0; }
.section-alt   { background: var(--bg-alt); }
.section-ink   { background: var(--ink); color: rgba(255,255,255,.80); }
.section-ink h2, .section-ink h3 { color: #fff; }

.section-head       { max-width: 760px; margin: 0 auto 52px; text-align: center; }
.section-head.left  { margin-left: 0; text-align: left; }
.section-title      { margin-bottom: 14px; }
.section-sub        { font-size: 1.06rem; color: var(--muted); margin: 0; }
.section-ink .section-sub { color: rgba(255,255,255,.62); }

.eyebrow {
  display: inline-block;
  font-size: .74rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 14px;
}
.eyebrow-light { color: #FFB273; }

.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;
}
/* Skip-Link: unsichtbar, bis er den Fokus bekommt — sonst ist er für
   Tastaturnutzer nicht bedienbar. */
.visually-hidden:focus {
  position: fixed; top: 12px; left: 12px;
  width: auto; height: auto; margin: 0; overflow: visible;
  clip: auto; white-space: normal;
  z-index: 400;
  padding: 12px 20px; border-radius: var(--radius);
  background: var(--ink); color: #fff; font-weight: 700;
  box-shadow: var(--shadow-lg);
}

/* !important, weil später notierte Komponenten-Regeln wie .header-actions
   dieselbe Spezifität haben und sonst gewinnen — dann wären Desktop- und
   Mobilleiste gleichzeitig sichtbar. */
.desktop-only { display: flex !important; }
.mobile-only  { display: none !important; }

/* Einblenden beim Scrollen. Die Klasse .reveal setzt ausschließlich main.js —
   ohne JavaScript steht der Inhalt sofort da, statt unsichtbar zu bleiben. */
.reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------
   Icons — Tabler (MIT) als CSS-Masken, siehe Ende der Datei
   --------------------------------------------------------- */
.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;
}

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: 'Inter', sans-serif;
  font-size: .95rem; font-weight: 700;
  padding: 13px 24px;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-acc); }
.btn-primary:hover { background: var(--accent-dark); color: #fff; }

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

.btn-ghost { background: transparent; color: var(--ink); border-color: rgba(11,21,36,.20); }
.btn-ghost:hover { border-color: var(--ink); background: rgba(11,21,36,.04); }

/* Auf dunklem Grund kehrt sich der Geistbutton um — sonst steht dunkle
   Schrift auf dunklem Grund und der Button verschwindet. */
.on-dark .btn-ghost, .hero .btn-ghost, .final-cta .btn-ghost,
.mobile-nav .btn-ghost, .trust-person .btn-ghost, .cta-band .btn-ghost {
  color: #fff; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.06);
}
.on-dark .btn-ghost:hover, .hero .btn-ghost:hover, .final-cta .btn-ghost:hover,
.mobile-nav .btn-ghost:hover, .trust-person .btn-ghost:hover, .cta-band .btn-ghost:hover {
  background: rgba(255,255,255,.14); border-color: #fff; color: #fff;
}

.btn-lg    { padding: 16px 30px; font-size: 1rem; }
.btn-block { width: 100%; }

/* ---------------------------------------------------------
   Karten & Listen
   --------------------------------------------------------- */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.card-hover { transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease); }
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #D7DEE7; }

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

.checks { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 11px; }
.checks li { position: relative; padding-left: 30px; }
.checks li::before {
  content: ''; position: absolute; left: 0; top: .42em;
  width: 18px; height: 18px; background-color: var(--green);
  -webkit-mask: var(--icon-check) center / contain no-repeat;
          mask: var(--icon-check) center / contain no-repeat;
}
:root { --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.6' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M5 12l5 5l10 -10' /%3E%3C/svg%3E"); }

.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px;
  border-radius: var(--radius-pill);
  font-size: .8rem; font-weight: 700;
  background: var(--accent-soft); color: var(--accent-ink);
  border: 1px solid rgba(232,98,14,.22);
}
.badge-light {
  background: rgba(255,255,255,.12); color: #fff;
  border-color: rgba(255,255,255,.26);
  backdrop-filter: blur(6px);
}
.badge-green { background: var(--green-soft); color: var(--green); border-color: rgba(14,143,98,.22); }

/* ---------------------------------------------------------
   Notfall-Leiste ganz oben
   Nach einem Unfall ist Erreichbarkeit das erste Kaufargument —
   deshalb steht sie über dem Header und nicht darunter.
   --------------------------------------------------------- */
.topbar {
  background: var(--ink);
  color: rgba(255,255,255,.78);
  font-size: .84rem;
}
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 42px; padding-top: 6px; padding-bottom: 6px;
}
.topbar-left  { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.topbar-item  { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.topbar-item .ti { color: var(--accent); font-size: 15px; }
.topbar a { color: #fff; font-weight: 700; }
.topbar-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: #2ED47A; flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(46,212,122,.7);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(46,212,122,.65); }
  70%  { box-shadow: 0 0 0 9px rgba(46,212,122,0); }
  100% { box-shadow: 0 0 0 0 rgba(46,212,122,0); }
}

/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 120;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 26px; min-height: 76px;
}
.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo-img { height: 44px; width: auto; }

.main-nav { display: flex; align-items: center; gap: 28px; }
.main-nav a {
  color: var(--ink); font-size: .93rem; font-weight: 600;
  text-decoration: none; position: relative; padding: 6px 0;
  transition: color .18s var(--ease);
}
.main-nav a::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px; background: var(--accent);
  transition: width .22s var(--ease);
}
.main-nav a:hover { color: var(--accent-ink); }
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after { width: 100%; }

.header-actions { display: flex; align-items: center; gap: 14px; }
.phone-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink); font-weight: 800; font-size: 1rem;
  text-decoration: none; white-space: nowrap;
}
.phone-link .ti { color: var(--accent); font-size: 19px; }
.phone-link:hover { color: var(--accent-ink); text-decoration: none; }

.icon-btn {
  width: 46px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius); border: 1.5px solid var(--line);
  background: #fff; color: var(--ink); font-size: 21px; cursor: pointer;
  text-decoration: none;
}
.icon-btn-phone { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Mobiles Vollbildmenü */
.mobile-nav {
  position: fixed; inset: 0; z-index: 200;
  background: var(--ink); color: #fff;
  padding: 22px 24px 34px;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .3s var(--ease);
  overflow-y: auto;
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 34px; }
.mobile-nav-close {
  width: 46px; height: 46px; border-radius: var(--radius);
  border: 1.5px solid rgba(255,255,255,.24);
  background: transparent; color: #fff; font-size: 22px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.mobile-nav-links { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.mobile-nav-links a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 17px 0; font-size: 1.22rem; font-weight: 700;
  color: #fff; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.mobile-nav-links a .ti { color: var(--accent); font-size: 19px; }
.mobile-nav-foot { display: grid; gap: 11px; margin-top: 28px; }

/* ---------------------------------------------------------
   Hero
   Das Foto kommt per --hero-photo aus dem HTML. Fehlt die Datei,
   bleibt der Navy-Verlauf stehen — die Seite ist ohne Bilder
   vollständig vorzeigbar.
   --------------------------------------------------------- */
.hero {
  position: relative;
  background-color: var(--ink);
  background-image: radial-gradient(120% 90% at 85% 15%, rgba(232,98,14,.20) 0%, transparent 55%);
  color: #fff;
  padding: 96px 0 88px;
  overflow: hidden;
}
/* Das Foto liegt als <img> darunter, nicht als CSS-Hintergrund. Grund: eine
   relative url() in einer Custom Property wird gegen das Stylesheet aufgelöst,
   nicht gegen das Dokument — aus assets/images/hero.webp würde
   assets/css/assets/images/hero.webp. Als <img> stimmt der Pfad in beiden
   Kontexten, das Bild ist indexierbar, und fehlt die Datei, blendet main.js
   es aus und der Navy-Verlauf bleibt stehen. */
.photo-bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center right;
}
.hero-veil, .cta-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
.hero-veil {
  background: linear-gradient(100deg, rgba(11,21,36,.95) 0%, rgba(11,21,36,.84) 42%, rgba(11,21,36,.44) 100%);
}
/* Mobil steht der Text über der ganzen Breite — das Motiv würde ihn stören.
   Deshalb dort mittig ausrichten und deutlich stärker abdunkeln. */
@media (max-width: 1080px) {
  .hero-veil { background: linear-gradient(170deg, rgba(11,21,36,.92) 0%, rgba(11,21,36,.95) 60%, rgba(11,21,36,.9) 100%); }
  .hero .photo-bg { object-position: center; }
}
/* Feines Raster als Grundtextur, damit die Fläche ohne Foto nicht leer wirkt */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(90% 70% at 30% 40%, #000 0%, transparent 78%);
}
.hero .container { position: relative; z-index: 2; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.hero h1 { color: #fff; margin-bottom: 20px; }
.hero h1 em { font-style: normal; color: #FFA55C; }
.hero-sub { font-size: 1.12rem; color: rgba(255,255,255,.80); max-width: 620px; margin-bottom: 28px; }

.hero-usps {
  list-style: none; padding: 0; margin: 0 0 32px;
  display: grid; grid-template-columns: repeat(2, auto); gap: 11px 26px;
  justify-content: start;
}
.hero-usps li { display: flex; align-items: center; gap: 9px; font-size: .95rem; font-weight: 600; color: rgba(255,255,255,.92); }
.hero-usps .ti { color: #3DDC97; font-size: 19px; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 13px; margin-bottom: 26px; }
.hero-note { display: flex; align-items: center; gap: 9px; font-size: .87rem; color: rgba(255,255,255,.62); }
.hero-note .ti { color: #3DDC97; font-size: 17px; }

/* Kostenkarte im Hero — beantwortet die erste Frage jedes Geschädigten */
.hero-card {
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-lg);
}
.hero-card-top { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.hero-card-icon {
  width: 50px; height: 50px; flex-shrink: 0;
  border-radius: 13px; background: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 26px; color: #fff;
}
.hero-card-top strong { display: block; color: #fff; font-family: 'Manrope', sans-serif; font-size: 1.16rem; line-height: 1.3; }
.hero-card-top span   { font-size: .84rem; color: rgba(255,255,255,.60); }
.hero-card-list { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 13px; }
.hero-card-list li { display: flex; gap: 11px; font-size: .92rem; color: rgba(255,255,255,.85); line-height: 1.5; }
.hero-card-list .ti { color: #3DDC97; font-size: 19px; flex-shrink: 0; margin-top: 2px; }
.hero-card-foot {
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: 17px; font-size: .81rem; color: rgba(255,255,255,.55);
}

/* ---------------------------------------------------------
   Kostenfrage — schließt nahtlos an den Hero an
   Bewusst kein schwebender weißer Kasten, sondern ein durchgehendes
   dunkles Band: der Hero läuft optisch weiter, der Blick bleibt oben.
   --------------------------------------------------------- */
.cost-band {
  background: var(--ink-2);
  border-top: 3px solid var(--accent);
  padding: 46px 0 40px;
  color: rgba(255,255,255,.72);
}
.cost-intro { max-width: 640px; margin-bottom: 30px; }
.cost-intro h2 { color: #fff; font-size: clamp(1.3rem, 2.2vw, 1.75rem); margin-bottom: 8px; }
.cost-intro p  { font-size: .97rem; margin: 0; color: rgba(255,255,255,.66); }

.cost-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.12); }
.cost-case { background: var(--ink-2); padding: 24px 26px 24px 0; }
.cost-case:not(:first-child) { padding-left: 26px; }

.cost-case-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.cost-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.cost-scenario {
  font-size: .77rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.58);
}
.cost-value {
  display: block; font-family: 'Manrope', sans-serif; font-weight: 800;
  font-size: 2.1rem; line-height: 1.1; color: #fff; margin-bottom: 10px;
}
.cost-case p { font-size: .89rem; margin: 0; line-height: 1.6; color: rgba(255,255,255,.68); }

.is-free    .cost-dot   { background: #3DDC97; box-shadow: 0 0 0 4px rgba(61,220,151,.18); }
.is-free    .cost-value { color: #3DDC97; }
.is-partial .cost-dot   { background: #FFB347; box-shadow: 0 0 0 4px rgba(255,179,71,.18); }
.is-own     .cost-dot   { background: rgba(255,255,255,.42); box-shadow: 0 0 0 4px rgba(255,255,255,.1); }

.cost-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 28px 0 0; padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .9rem; color: rgba(255,255,255,.6);
}
.cost-foot .ti { color: var(--accent); font-size: 19px; }
.cost-foot a { color: #fff; font-weight: 700; white-space: nowrap; }

/* ---------------------------------------------------------
   Anspruchspositionen — der inhaltliche Kern der Seite.
   Ersetzt die klassische Leistungssektion: nicht was wir tun,
   sondern was der Geschädigte dadurch bekommt.
   --------------------------------------------------------- */
.claim-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.claim-card {
  padding: 26px 24px 24px;
  position: relative;
  display: flex; flex-direction: column;
}
.claim-icon {
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--accent-soft); color: var(--accent-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 23px; margin-bottom: 16px;
}
.claim-card h3 { font-size: 1.04rem; margin-bottom: 9px; }
.claim-card p  { font-size: .9rem; margin: 0 0 15px; color: var(--text); line-height: 1.6; }
/* margin-top:auto schiebt die Kennzeichnung an den Kartenboden — sonst hängt
   sie je nach Textlänge auf unterschiedlicher Höhe und die Reihe wirkt unruhig. */
.claim-tag {
  margin-top: auto; align-self: flex-start;
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--green); background: var(--green-soft);
  padding: 5px 11px; border-radius: var(--radius-pill);
}
.claim-note {
  margin-top: 34px; padding: 24px 28px;
  background: var(--ink); color: rgba(255,255,255,.80);
  border-radius: var(--radius-lg);
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  justify-content: space-between;
}
.claim-note p { margin: 0; font-size: .96rem; max-width: 720px; }
.claim-note strong { color: #fff; }

/* ---------------------------------------------------------
   Warnblock — freie Gutachterwahl
   --------------------------------------------------------- */
.warn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: stretch; }
.warn-col {
  padding: 34px 32px; border-radius: var(--radius-lg);
  display: flex; flex-direction: column;
}
.warn-col h3 { display: flex; align-items: center; gap: 11px; font-size: 1.16rem; margin-bottom: 18px; }
.warn-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 13px; }
.warn-col li { display: flex; gap: 12px; font-size: .95rem; line-height: 1.58; }
.warn-col li .ti { font-size: 20px; flex-shrink: 0; margin-top: 2px; }

.warn-bad  { background: #FDF3F2; border: 1px solid #F6DCD8; }
.warn-bad h3 { color: #A32B1C; }
.warn-bad h3 .ti, .warn-bad li .ti { color: #C4402E; }

.warn-good { background: var(--ink); border: 1px solid var(--ink-3); color: rgba(255,255,255,.84); }
.warn-good h3 { color: #fff; }
.warn-good h3 .ti, .warn-good li .ti { color: #3DDC97; }

.warn-law {
  margin-top: 30px; padding: 22px 26px;
  background: var(--bg); border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .93rem;
}
.warn-law strong { color: var(--ink); }
.warn-law-src { display: block; margin-top: 8px; font-size: .8rem; color: var(--muted); }

/* ---------------------------------------------------------
   Soforthilfe-Checkliste — abhakbar, Stand bleibt lokal gespeichert
   Vier Spalten statt einer langen Liste: die Fortschrittskachel ist
   die erste von acht Zellen, dann folgen die sieben Schritte.
   --------------------------------------------------------- */
.check-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  list-style: none; padding: 0; margin: 0;
}

.check-progress {
  background: var(--ink); color: #fff;
  border-radius: var(--radius-lg);
  padding: 22px 22px 20px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
}
.check-progress h3 { color: #fff; font-size: 1.06rem; margin-bottom: 10px; line-height: 1.3; }
.check-progress p {
  font-size: .84rem; color: rgba(255,255,255,.62);
  line-height: 1.5; margin: 0 0 14px;
}
.cp-ring { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
.cp-num {
  font-family: 'Manrope', sans-serif; font-weight: 800;
  font-size: 1.72rem; line-height: 1; color: #fff; white-space: nowrap;
}
.cp-num span { font-size: .88rem; color: rgba(255,255,255,.5); }
.cp-bar { flex: 1; height: 8px; border-radius: 99px; background: rgba(255,255,255,.14); overflow: hidden; }
.cp-bar > span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent), #FFA55C);
  border-radius: 99px;
  transition: width .45s var(--ease);
}
.check-reset {
  margin-top: auto; align-self: flex-start;
  background: none; border: 0; padding: 0; cursor: pointer;
  color: rgba(255,255,255,.55); font-size: .8rem; font-family: inherit;
  text-decoration: underline; text-underline-offset: 3px;
}
.check-reset:hover { color: #fff; }

.check-item {
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 20px 20px 18px;
  cursor: pointer; height: 100%;
  transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.check-item:hover { border-color: #C9D3DE; box-shadow: var(--shadow-xs); }
.check-item input { position: absolute; opacity: 0; width: 0; height: 0; }
.check-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.check-box {
  width: 26px; height: 26px; flex-shrink: 0;
  border: 2px solid #CBD5E0; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent; font-size: 15px;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.check-item input:focus-visible + .check-box { outline: 3px solid var(--accent); outline-offset: 3px; }
.check-item h3 { font-size: .97rem; margin-bottom: 5px; line-height: 1.32; transition: color .2s var(--ease); }
.check-item p  { font-size: .85rem; margin: 0; color: var(--text); line-height: 1.5; }
.check-item.is-done { background: var(--green-soft); border-color: rgba(14,143,98,.3); }
.check-item.is-done .check-box { background: var(--green); border-color: var(--green); color: #fff; }
.check-item.is-done h3 { color: var(--green); }
.check-num {
  font-family: 'Manrope', sans-serif; font-weight: 800; font-size: .72rem;
  color: var(--muted); letter-spacing: .1em; text-transform: uppercase;
}

/* ---------------------------------------------------------
   CTA-Band
   --------------------------------------------------------- */
.cta-band {
  background: var(--ink);
  border-radius: var(--radius-lg);
  padding: 40px 44px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
  position: relative; overflow: hidden;
}
.cta-band::after {
  content: ''; position: absolute; right: -80px; top: -80px;
  width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,98,14,.26) 0%, transparent 68%);
  pointer-events: none;
}
.cta-band-text { position: relative; z-index: 2; max-width: 620px; }
.cta-band h2 { color: #fff; font-size: 1.6rem; margin-bottom: 8px; }
.cta-band p  { color: rgba(255,255,255,.68); margin: 0; font-size: .98rem; }
.cta-band-actions { display: flex; gap: 12px; flex-wrap: wrap; position: relative; z-index: 2; }

/* ---------------------------------------------------------
   Vergleichstabelle
   --------------------------------------------------------- */
.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* separate statt collapse, damit die hervorgehobene Spalte runde Ecken bekommt */
.compare-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 700px; }
.compare-table th, .compare-table td { padding: 17px 20px; text-align: left; vertical-align: middle; }
.compare-table thead th {
  font-family: 'Manrope', sans-serif; font-size: .95rem; font-weight: 800;
  color: var(--ink); border-bottom: 2px solid var(--line);
}
.compare-table tbody tr td { border-bottom: 1px solid var(--line-soft); }
.compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-crit { font-weight: 700; color: var(--ink); font-size: .94rem; width: 27%; }

.compare-col-us { background: var(--accent-soft); }
thead .compare-col-us { border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding-top: 22px; }
tbody tr:last-child .compare-col-us { border-radius: 0 0 var(--radius-lg) var(--radius-lg); padding-bottom: 22px; }
.compare-us-label {
  font-family: 'Manrope', sans-serif; font-weight: 800;
  color: var(--accent-ink); font-size: 1rem;
  display: flex; align-items: center; gap: 8px;
}

.compare-cell { display: flex; align-items: flex-start; gap: 9px; font-size: .92rem; line-height: 1.5; }
.compare-cell .ti { font-size: 19px; flex-shrink: 0; margin-top: 1px; }
.compare-yes { color: var(--ink); font-weight: 600; }
.compare-yes .ti { color: var(--green); }
.compare-no  { color: var(--muted); }
.compare-no .ti { color: #C4402E; }
.compare-foot { margin-top: 34px; text-align: center; }

/* ---------------------------------------------------------
   Gutachten-Inhalt — was auf den Seiten wirklich drinsteht
   --------------------------------------------------------- */
.doc-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 56px; align-items: center; }
.doc-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 3px; }
.doc-list li {
  display: flex; align-items: flex-start; gap: 15px;
  padding: 15px 0; border-bottom: 1px solid var(--line);
}
.doc-list li:last-child { border-bottom: 0; }
.doc-list .ti {
  color: var(--accent); font-size: 21px; flex-shrink: 0; margin-top: 3px;
}
.doc-list strong { display: block; color: var(--ink); font-size: .98rem; margin-bottom: 3px; }
.doc-list span  { font-size: .89rem; color: var(--muted); line-height: 1.55; }

/* Stilisierte Gutachten-Vorschau — reine CSS-Grafik, braucht kein Bild */
.doc-mock {
  position: relative;
  background: linear-gradient(160deg, var(--ink) 0%, var(--ink-3) 100%);
  border-radius: var(--radius-lg);
  padding: 38px;
  box-shadow: var(--shadow-lg);
}
.doc-paper {
  background: #fff; border-radius: 8px; padding: 26px 24px;
  box-shadow: 0 18px 40px rgba(0,0,0,.34);
}
.doc-paper-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 14px; margin-bottom: 16px; border-bottom: 2px solid var(--accent);
}
.doc-paper-head strong { font-family: 'Manrope', sans-serif; font-size: .92rem; color: var(--ink); }
.doc-paper-head span   { font-size: .7rem; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }
.doc-row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: .82rem; }
.doc-row:last-of-type { border-bottom: 0; }
.doc-row span:first-child { color: var(--muted); }
.doc-row span:last-child  { color: var(--ink); font-weight: 700; }
.doc-skeleton { height: 8px; border-radius: 99px; background: var(--line); }
.doc-stamp {
  position: absolute; right: 18px; bottom: 18px;
  background: var(--accent); color: #fff;
  font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 9px 16px; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-acc);
  display: inline-flex; align-items: center; gap: 7px;
}

/* ---------------------------------------------------------
   Ablauf
   --------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; position: relative; }
.step {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 30px 26px;
  text-align: center; position: relative;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.step-icon { height: 68px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.step-num {
  position: absolute; top: 16px; right: 20px;
  font-family: 'Manrope', sans-serif; font-weight: 800;
  font-size: 2.4rem; line-height: 1; color: var(--line);
}
.step h3 { font-size: 1.06rem; margin-bottom: 8px; }
.step p  { font-size: .9rem; margin: 0; line-height: 1.6; }
.steps-cta { margin-top: 40px; text-align: center; display: grid; gap: 14px; justify-items: center; }
.steps-cta-note { display: inline-flex; align-items: center; gap: 8px; font-size: .87rem; color: var(--muted); }
.steps-cta-note .ti { color: var(--green); font-size: 17px; }

/* ---------------------------------------------------------
   Weitere Gutachtenarten — bewusst untergeordnet gehalten
   --------------------------------------------------------- */
.more-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.more-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 24px 22px;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.more-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.more-card .ti { font-size: 26px; color: var(--accent); margin-bottom: 13px; display: block; }
.more-card h3 { font-size: .99rem; margin-bottom: 7px; }
.more-card p  { font-size: .86rem; margin: 0; color: var(--muted); line-height: 1.55; }

/* ---------------------------------------------------------
   Vertrauen / Ansprechpartner
   --------------------------------------------------------- */
.trust-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 30px; align-items: start; }

.trust-person {
  background: var(--ink); color: rgba(255,255,255,.80);
  border-radius: var(--radius-lg); padding: 34px 32px;
  box-shadow: var(--shadow);
}
.trust-avatar {
  width: 74px; height: 74px; border-radius: 20px;
  background: linear-gradient(140deg, var(--accent), #FFA55C);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.55rem;
  color: #fff; margin-bottom: 18px; letter-spacing: .02em;
}
.trust-person h3 { color: #fff; font-size: 1.42rem; margin-bottom: 4px; }
.trust-role {
  font-size: .84rem; font-weight: 700; color: #FFA55C;
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 18px;
}
.trust-person p { font-size: .95rem; line-height: 1.66; }
.trust-actions { display: flex; gap: 11px; flex-wrap: wrap; margin-top: 24px; }

.trust-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.trust-fact {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 24px 22px;
  display: flex; gap: 15px; align-items: flex-start;
}
.trust-fact-icon {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 11px;
  background: var(--accent-soft); color: var(--accent-ink);
  display: inline-flex; align-items: center; justify-content: center; font-size: 21px;
}
.trust-fact strong { display: block; color: var(--ink); font-size: 1rem; margin-bottom: 5px; }
.trust-fact p { font-size: .88rem; margin: 0; line-height: 1.55; }

/* ---------------------------------------------------------
   Bewertungen
   --------------------------------------------------------- */
.reviews-score {
  display: grid; grid-template-columns: auto 1fr; gap: 46px;
  align-items: center; max-width: 620px; margin: 0 auto 48px;
}
.rs-big { text-align: center; }
.rs-value { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 3.5rem; color: var(--ink); line-height: 1; }
.rs-stars { color: #F5A623; font-size: 1.25rem; letter-spacing: 2px; margin: 5px 0 4px; }
.rs-count { font-size: .84rem; color: var(--muted); }
.rs-google { display: inline-flex; align-items: center; gap: 7px; font-size: .82rem; color: var(--muted); margin-top: 9px; }
.rs-bars { display: grid; gap: 7px; }
.rs-bar-row { display: grid; grid-template-columns: 32px 1fr; gap: 11px; align-items: center; font-size: .8rem; color: var(--muted); }
.rs-bar { height: 7px; border-radius: 99px; background: var(--line); overflow: hidden; }
.rs-bar > span { display: block; height: 100%; background: #F5A623; border-radius: 99px; }

.marquee-wrap { overflow: hidden; padding: 6px 0 10px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee { display: flex; gap: 22px; width: max-content; animation: marquee 56s linear infinite; }
.marquee:hover { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { animation: none; width: 100%; overflow-x: auto; padding-bottom: 12px; }
}
.review-card { width: 340px; flex-shrink: 0; padding: 24px 26px; }
.review-head { display: flex; align-items: center; gap: 13px; margin-bottom: 13px; }
.avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--ink); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.05rem; flex-shrink: 0;
}
.avatar-acc  { background: var(--accent); }
.avatar-grey { background: var(--muted); }
.review-head strong { display: block; color: var(--ink); font-size: .96rem; }
.review-head .stars { color: #F5A623; font-size: .88rem; letter-spacing: 1px; }
.review-card p { font-size: .91rem; margin: 0 0 14px; line-height: 1.62; }
.review-meta { display: flex; align-items: center; gap: 7px; font-size: .79rem; color: var(--muted); }

/* ---------------------------------------------------------
   Einzugsgebiet
   --------------------------------------------------------- */
.region-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 58px; align-items: center; }
.region-map img { border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: var(--shadow-sm); width: 100%; }
.region-head {
  font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 11px;
}
.region-places {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none;
}
.region-places li {
  font-size: .84rem; color: var(--text);
  background: #fff; border: 1px solid var(--line);
  padding: 6px 13px; border-radius: var(--radius-pill);
}

/* ---------------------------------------------------------
   Kontakt + Quiz
   --------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: start; }
.contact-options { display: grid; gap: 12px; margin: 26px 0 30px; }
.contact-option {
  display: flex; align-items: center; gap: 15px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 16px 20px;
  text-decoration: none; color: var(--ink);
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.contact-option:hover { border-color: var(--accent); transform: translateX(4px); box-shadow: var(--shadow-xs); text-decoration: none; }
.co-icon {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; color: #fff;
}
.co-icon-phone { background: var(--accent); }
.co-icon-wa    { background: #25D366; }
.co-icon-mail  { background: var(--ink); }
.co-label { display: block; font-size: .78rem; color: var(--muted); }
.co-value { display: block; font-weight: 700; font-size: .97rem; }

.contact-map { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); }
.contact-map iframe { width: 100%; height: 230px; border: 0; display: block; }
/* Zwei-Klick-Karte: der iframe wird erst nach Einwilligung eingehängt */
.map-consent {
  min-height: 230px; padding: 28px 24px; text-align: center;
  background: var(--bg-alt);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
}
.map-consent .ti { font-size: 30px; color: var(--muted); }
.map-consent p { font-size: .86rem; color: var(--muted); margin: 0; max-width: 340px; }

.quiz {
  background: var(--ink); border-radius: var(--radius-lg);
  padding: 34px 32px; box-shadow: var(--shadow-lg);
}
.quiz-logo-wrap { margin-bottom: 22px; }
.quiz-logo { height: 38px; width: auto; }
.quiz-progress-head {
  display: flex; justify-content: space-between;
  font-size: .81rem; color: rgba(255,255,255,.6); margin-bottom: 9px;
}
.quiz-bar { height: 6px; border-radius: 99px; background: rgba(255,255,255,.14); overflow: hidden; margin-bottom: 26px; }
.quiz-bar > div { height: 100%; width: 20%; background: linear-gradient(90deg, var(--accent), #FFA55C); border-radius: 99px; transition: width .4s var(--ease); }
.q-title { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.28rem; color: #fff; margin-bottom: 8px; line-height: 1.28; }
.q-hint  { font-size: .89rem; color: rgba(255,255,255,.58); margin: 0 0 20px; }
.q-grid  { display: grid; gap: 10px; }
.q-grid-2 { grid-template-columns: 1fr 1fr; }
.q-opt {
  display: flex; align-items: center; gap: 11px;
  background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.14);
  border-radius: var(--radius); padding: 15px 17px;
  color: #fff; font-family: inherit; font-size: .93rem; font-weight: 600;
  text-align: left; cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.q-opt:hover { background: rgba(232,98,14,.16); border-color: var(--accent); transform: translateX(3px); }
.q-opt .ti { color: var(--accent); font-size: 21px; flex-shrink: 0; }
.q-field {
  width: 100%; padding: 14px 16px;
  background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.16);
  border-radius: var(--radius); color: #fff;
  font-family: inherit; font-size: .95rem;
}
.q-field::placeholder { color: rgba(255,255,255,.42); }
.q-field:focus { outline: none; border-color: var(--accent); background: rgba(255,255,255,.10); }
.q-back {
  margin-top: 18px; display: inline-flex; align-items: center; gap: 7px;
  font-size: .87rem; color: rgba(255,255,255,.58); cursor: pointer; user-select: none;
}
.q-back:hover { color: #fff; }
.quiz .form-consent { color: rgba(255,255,255,.66); }
.quiz .form-consent a { color: #FFA55C; }
.quiz .form-note { color: rgba(255,255,255,.45); }

.quiz-done { text-align: center; padding: 12px 0; }
.quiz-done strong { display: block; font-family: 'Manrope', sans-serif; font-size: 1.42rem; color: #fff; margin: 14px 0 8px; }
.quiz-done p { color: rgba(255,255,255,.66); font-size: .95rem; }
.quiz-done-urgent { margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); }
.quiz-done-urgent-label { display: block; font-size: .84rem; color: rgba(255,255,255,.55); margin-bottom: 13px; }
.quiz-done-urgent-btns { display: flex; gap: 11px; justify-content: center; }
.quiz-urgent-btn {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 24px; text-decoration: none;
}
.quiz-urgent-wa { background: #25D366; }

/* ---------------------------------------------------------
   Formulare
   --------------------------------------------------------- */
.lead-form { display: grid; gap: 12px; }
.form-row  { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lead-form input, .lead-form select, .lead-form textarea {
  width: 100%; padding: 14px 16px;
  border: 1.5px solid var(--line); border-radius: var(--radius);
  font-family: inherit; font-size: .95rem; color: var(--ink); background: #fff;
}
.lead-form input::placeholder, .lead-form textarea::placeholder { color: var(--muted); }
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232,98,14,.13);
}
.lead-form textarea { resize: vertical; min-height: 92px; }

.form-consent { display: flex; align-items: flex-start; gap: 10px; font-size: .84rem; color: var(--muted); line-height: 1.5; cursor: pointer; }
.form-consent input { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; accent-color: var(--accent); }
.form-note { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: .8rem; color: var(--muted); margin: 4px 0 0; }
.form-error {
  background: #FDF3F2; border: 1px solid #F3D5D0; color: #A32B1C;
  border-radius: var(--radius); padding: 11px 15px; font-size: .87rem;
}
.form-success { text-align: center; padding: 26px 10px; }
.form-success .ti { font-size: 46px; color: var(--green); }
.form-success strong { display: block; font-family: 'Manrope', sans-serif; font-size: 1.32rem; color: var(--ink); margin: 12px 0 7px; }
.form-success p { font-size: .94rem; margin: 0; }

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

/* ---------------------------------------------------------
   FAQ
   --------------------------------------------------------- */
.faq { max-width: 860px; margin: 0 auto; display: grid; gap: 11px; }
.faq details {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.faq details[open] { border-color: var(--accent); box-shadow: var(--shadow-xs); }
.faq summary {
  padding: 20px 24px; cursor: pointer; list-style: none;
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 1.02rem; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq-plus { color: var(--accent); font-size: 20px; transition: transform .25s var(--ease); flex-shrink: 0; }
.faq details[open] .faq-plus { transform: rotate(45deg); }
.faq details p { padding: 0 24px 22px; margin: 0; font-size: .94rem; }

/* ---------------------------------------------------------
   Finale CTA
   --------------------------------------------------------- */
.final-cta {
  position: relative;
  overflow: hidden;
  background-color: var(--ink);
  background-image: radial-gradient(80% 100% at 50% 0%, rgba(232,98,14,.24) 0%, transparent 62%);
  padding: 96px 0;
  color: rgba(255,255,255,.78);
  text-align: center;
}
.cta-veil { background: linear-gradient(180deg, rgba(11,21,36,.93), rgba(11,21,36,.97)); }
.final-cta .photo-bg { object-position: center; }
.final-cta-inner { max-width: 780px; margin: 0 auto; position: relative; z-index: 2; }
.final-cta h2 { color: #fff; margin-bottom: 16px; }
.final-cta p  { font-size: 1.06rem; margin-bottom: 32px; }
.final-cta-actions { display: flex; gap: 13px; justify-content: center; flex-wrap: wrap; margin-bottom: 30px; }
.final-cta-trust { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; font-size: .86rem; color: rgba(255,255,255,.58); }
.final-cta-trust span { display: inline-flex; align-items: center; gap: 8px; }
.final-cta-trust .ti { color: #3DDC97; font-size: 17px; }

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */
.site-footer { background: var(--ink); color: rgba(255,255,255,.62); padding: 68px 0 0; font-size: .92rem; }
.footer-cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.25fr; gap: 44px; padding-bottom: 52px; }
.footer-logo { height: 46px; width: auto; margin-bottom: 18px; }
.footer-brand p { font-size: .91rem; line-height: 1.68; max-width: 320px; }
/* Footer-Spaltentitel sind Navigationslabels, keine Gliederungsebene der
   Seite — deshalb <p> statt <h2>, optisch aber unverändert. */
.footer-head {
  font-size: .78rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: #fff; margin: 0 0 17px;
  font-family: 'Manrope', 'Inter', sans-serif;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-col a { color: rgba(255,255,255,.62); text-decoration: none; }
.footer-col a:hover { color: var(--accent); text-decoration: none; }
.footer-contact-line { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 12px; }
.footer-contact-line .ti { color: var(--accent); font-size: 18px; margin-top: 3px; flex-shrink: 0; }
.footer-hours { display: grid; gap: 8px; font-size: .87rem; }
.footer-hours > div { display: flex; justify-content: space-between; gap: 16px; max-width: 260px; }
.footer-bottom-wrap { border-top: 1px solid rgba(255,255,255,.10); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  gap: 18px; flex-wrap: wrap; padding-top: 22px; padding-bottom: 22px;
  font-size: .84rem; color: rgba(255,255,255,.45);
}
.footer-bottom a { color: rgba(255,255,255,.62); }

/* ---------------------------------------------------------
   Sticky-Leiste (mobil)
   --------------------------------------------------------- */
.sticky-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 130;
  display: none; grid-template-columns: repeat(3, 1fr);
  background: #fff; border-top: 1px solid var(--line);
  box-shadow: 0 -6px 22px rgba(11,21,36,.10);
  padding-bottom: env(safe-area-inset-bottom);
}
.sticky-bar a, .sticky-bar button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 11px 6px; font-size: .74rem; font-weight: 700;
  border: 0; background: none; font-family: inherit; cursor: pointer;
  text-decoration: none; color: var(--ink);
}
.sticky-bar .ti { font-size: 21px; }
.sb-call .ti  { color: var(--accent); }
.sb-wa   .ti  { color: #25D366; }
.sb-offer { background: var(--accent) !important; color: #fff !important; }

/* ---------------------------------------------------------
   Modal
   --------------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 22px; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(11,21,36,.68); backdrop-filter: blur(4px); }
.modal-card {
  position: relative; z-index: 2;
  background: #fff; border-radius: var(--radius-lg);
  padding: 38px 36px; width: 100%; max-width: 540px;
  max-height: 92vh; overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.modal-close {
  position: absolute; top: 15px; right: 15px;
  width: 38px; height: 38px; border-radius: var(--radius);
  border: 1px solid var(--line); background: #fff;
  color: var(--ink); font-size: 19px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.modal-card h2 { font-size: 1.5rem; margin-bottom: 7px; }
.modal-sub { font-size: .93rem; color: var(--muted); margin-bottom: 22px; }
.modal-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.modal-quick a {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px; border-radius: var(--radius); border: 1px solid var(--line);
  font-size: .85rem; font-weight: 700; color: var(--ink); text-decoration: none;
}
.modal-quick a:hover { border-color: var(--accent); text-decoration: none; }
.mq-phone .ti { color: var(--accent); }
.mq-wa    .ti { color: #25D366; }
.mq-mail  .ti { color: var(--ink); }

/* ---------------------------------------------------------
   Cookie-Layer
   --------------------------------------------------------- */
.cookie-wall { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 22px; }
.cookie-wall[hidden] { display: none; }
.cookie-backdrop { position: absolute; inset: 0; background: rgba(11,21,36,.72); backdrop-filter: blur(4px); }
.cookie-card {
  position: relative; z-index: 2;
  background: #fff; border-radius: var(--radius-lg);
  padding: 34px 34px 30px; width: 100%; max-width: 560px;
  max-height: 92vh; overflow-y: auto; box-shadow: var(--shadow-lg);
}
.cookie-logo { margin-bottom: 18px; }
.cookie-logo img { height: 38px; width: auto; }
.cookie-title { font-size: 1.32rem; margin-bottom: 11px; }
.cookie-text { font-size: .91rem; margin-bottom: 13px; }
.cookie-links { display: flex; flex-wrap: wrap; gap: 8px; font-size: .84rem; margin-bottom: 22px; }
.cookie-links span { color: var(--line); }
.cookie-actions { display: grid; gap: 9px; }
.btn-cookie-reject, .btn-cookie-settings {
  padding: 12px 20px; border-radius: var(--radius);
  border: 1.5px solid var(--line); background: #fff;
  color: var(--ink); font-family: inherit; font-size: .93rem; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-cookie-reject:hover, .btn-cookie-settings:hover { border-color: var(--ink); }
.cookie-settings-panel { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); display: grid; gap: 15px; }
.cookie-category { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.cookie-cat-label { font-weight: 700; color: var(--ink); font-size: .93rem; }
.cookie-cat-text  { font-size: .82rem; color: var(--muted); line-height: 1.5; }
.cookie-always-on { font-size: .78rem; font-weight: 700; color: var(--green); white-space: nowrap; }
.cookie-toggle-wrap { position: relative; flex-shrink: 0; cursor: pointer; }
.cookie-toggle-input { position: absolute; opacity: 0; width: 0; height: 0; }
.cookie-toggle-track {
  display: block; width: 48px; height: 27px; border-radius: 99px;
  background: var(--line); position: relative; transition: background .2s var(--ease);
}
.cookie-toggle-track::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 21px; height: 21px; border-radius: 50%; background: #fff;
  box-shadow: var(--shadow-xs); transition: transform .2s var(--ease);
}
.cookie-toggle-input:checked + .cookie-toggle-track { background: var(--accent); }
.cookie-toggle-input:checked + .cookie-toggle-track::after { transform: translateX(21px); }
.cookie-toggle-input:focus-visible + .cookie-toggle-track { outline: 3px solid var(--accent); outline-offset: 3px; }

/* ---------------------------------------------------------
   Rechtsseiten & 404
   --------------------------------------------------------- */
.legal { padding: 64px 0 88px; }
.legal-inner { max-width: 820px; margin: 0 auto; }
.legal h1 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin-bottom: 10px; }
.legal h2 { font-size: 1.28rem; margin: 40px 0 12px; }
.legal h3 { font-size: 1.04rem; margin: 26px 0 9px; }
.legal p, .legal li { font-size: .95rem; }
.legal ul { padding-left: 22px; display: grid; gap: 7px; margin-bottom: 18px; }
.legal-lead { font-size: 1.02rem; color: var(--muted); margin-bottom: 34px; }
.legal-box {
  background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 22px 26px; margin: 22px 0;
}
.legal-box p:last-child { margin-bottom: 0; }
.legal-table { width: 100%; border-collapse: collapse; margin: 18px 0 26px; font-size: .9rem; }
.legal-table th, .legal-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal-table th { color: var(--ink); font-weight: 700; background: var(--bg-alt); }
.legal-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; padding: 0; list-style: none; }
.legal-toc a {
  font-size: .84rem; background: var(--bg-alt);
  border: 1px solid var(--line); padding: 7px 14px;
  border-radius: var(--radius-pill); color: var(--text); text-decoration: none;
}
.legal-toc a:hover { border-color: var(--accent); color: var(--accent-ink); text-decoration: none; }

.err-page { text-align: center; padding: 96px 0 110px; }
.err-code {
  font-family: 'Manrope', sans-serif; font-weight: 800;
  font-size: clamp(5rem, 16vw, 10rem); line-height: 1;
  color: var(--line); margin-bottom: 6px;
}
.err-actions { display: flex; gap: 13px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }

/* ---------------------------------------------------------
   Breakpoints
   --------------------------------------------------------- */
@media (max-width: 1080px) {
  .desktop-only { display: none !important; }
  .mobile-only  { display: flex !important; }
  .section { padding: 72px 0; }
  .hero { padding: 68px 0 72px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .claim-grid { grid-template-columns: repeat(2, 1fr); }
  .more-grid  { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .doc-grid, .region-grid, .contact-grid, .trust-grid { grid-template-columns: 1fr; gap: 40px; }
  .check-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 36px; }
  .sticky-bar { display: grid; }
  body { padding-bottom: 66px; }
}

@media (max-width: 900px) {
  .check-grid { grid-template-columns: repeat(2, 1fr); }
  /* Bei drei schmalen Spalten bricht der Text zu stark um — lieber stapeln
     und die Trennlinien vom Rahmen auf waagerechte Linien umstellen. */
  .cost-cases { grid-template-columns: 1fr; }
  .cost-case { padding: 20px 0; }
  .cost-case:not(:first-child) { padding-left: 0; }
  .cost-value { font-size: 1.85rem; }
  .warn-grid { grid-template-columns: 1fr; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  /* Notfall-Leiste dünnt nach Wichtigkeit aus: zuerst der Ort, dann die Zeit */
  .topbar-left .topbar-item:nth-child(3) { display: none; }
}

@media (max-width: 720px) {
  .topbar-left .topbar-item:nth-child(2) { display: none; }
}

@media (max-width: 640px) {
  .section { padding: 58px 0; }
  .section-head { margin-bottom: 38px; }
  .container, .container-wide { padding: 0 18px; }
  .hero { padding: 52px 0 58px; }
  .hero-usps { grid-template-columns: 1fr; gap: 9px; }
  .hero-cta .btn { width: 100%; }
  .hero-card { padding: 24px 22px; }
  .claim-grid, .more-grid, .steps, .grid-3, .grid-4, .grid-2, .trust-facts { grid-template-columns: 1fr; }
  .trust-person { padding: 26px 22px; }
  .trust-actions .btn { flex: 1; }
  .form-row { grid-template-columns: 1fr; }
  .q-grid-2 { grid-template-columns: 1fr; }
  .cta-band { padding: 30px 26px; }
  .cta-band-actions { width: 100%; }
  .cta-band-actions .btn { flex: 1; }
  .claim-note { flex-direction: column; align-items: flex-start; }
  .reviews-score { grid-template-columns: 1fr; gap: 26px; text-align: center; }
  .review-card { width: 280px; }
  .footer-cols { grid-template-columns: 1fr; gap: 32px; }
  .modal-card, .cookie-card { padding: 28px 22px; }
  .quiz { padding: 26px 22px; }
  .doc-mock { padding: 22px; }
  .final-cta-actions .btn { width: 100%; }

  /* Vergleichstabelle stapelt sich zu Karten, statt seitwärts zu scrollen */
  .compare-wrap { overflow: visible; }
  .compare-table { min-width: 0; display: block; }
  .compare-table thead { display: none; }
  .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: 0 !important; padding: 13px 18px; }
  .compare-crit { width: 100%; background: var(--bg-alt); font-size: 1rem; padding: 14px 18px; }
  .compare-table td[data-label]::before {
    content: attr(data-label);
    display: block; font-size: .7rem; font-weight: 800;
    letter-spacing: .09em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 5px;
  }
  thead .compare-col-us, tbody tr:last-child .compare-col-us { border-radius: 0; }
}

@media (max-width: 560px) {
  .check-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .cost-band { padding: 34px 0 30px; }
  .modal-quick { grid-template-columns: 1fr; }
  .check-item { padding: 16px 17px; gap: 13px; }

  /* Auf dem Handy bleibt in der Notfall-Leiste nur die Nummer stehen.
     Alles andere nebeneinander sprengt die Zeile — den Rest übernimmt
     ohnehin die Sticky-Leiste am unteren Rand. */
  .topbar-left { display: none; }
  .topbar-inner { justify-content: center; }
}

/* =========================================================
   Tabler Icons (MIT) als CSS-Masken.
   Neues Icon ergänzen: Regel hier anhängen.
   ========================================================= */
.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='M14 6m-2 0a2 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='M8 12m-2 0a2 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='M17 18m-2 0a2 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-circle::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 8v4' /%3E %3Cpath d='M12 16h.01' /%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 0z' /%3E %3Cpath d='M12 16h.01' /%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-narrow-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='M12 5l0 14' /%3E %3Cpath d='M16 15l-4 4' /%3E %3Cpath d='M8 15l4 4' /%3E %3C/svg%3E"); }
.ti-arrow-narrow-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='M15 16l4 -4' /%3E %3Cpath d='M15 8l4 4' /%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-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.945z' /%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 7m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z' /%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-building-bank::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 21l18 0' /%3E %3Cpath d='M3 10l18 0' /%3E %3Cpath d='M5 6l7 -3l7 3' /%3E %3Cpath d='M4 10l0 11' /%3E %3Cpath d='M20 10l0 11' /%3E %3Cpath d='M8 14l0 3' /%3E %3Cpath d='M12 14l0 3' /%3E %3Cpath d='M16 14l0 3' /%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-camera::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 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2' /%3E %3Cpath d='M9 13a3 3 0 1 0 6 0a3 3 0 0 0 -6 0' /%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='M7 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0' /%3E %3Cpath d='M17 17m-2 0a2 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-car-crash::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='M10 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0' /%3E %3Cpath d='M7 6l4 5h1a2 2 0 0 1 2 2v4h-2m-4 0h-5m0 -6h8m-6 0v-5m2 0h-4' /%3E %3Cpath d='M14 8v-2' /%3E %3Cpath d='M19 12h2' /%3E %3Cpath d='M17.5 15.5l1.5 1.5' /%3E %3Cpath d='M17.5 8.5l1.5 -1.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='M15 15m-3 0a3 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='M12 12m-9 0a9 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='M12 12m-9 0a9 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 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z' /%3E %3Cpath d='M9 14l2 2l4 -4' /%3E %3C/svg%3E"); }
.ti-clipboard-list::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 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z' /%3E %3Cpath d='M9 12l.01 0' /%3E %3Cpath d='M13 12l2 0' /%3E %3Cpath d='M9 16l.01 0' /%3E %3Cpath d='M13 16l2 0' /%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-coins::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 14c0 1.657 2.686 3 6 3s6 -1.343 6 -3s-2.686 -3 -6 -3s-6 1.343 -6 3z' /%3E %3Cpath d='M9 14v4c0 1.656 2.686 3 6 3s6 -1.344 6 -3v-4' /%3E %3Cpath d='M3 6c0 1.072 1.144 2.062 3 2.598s4.144 .536 6 0c1.856 -.536 3 -1.526 3 -2.598c0 -1.072 -1.144 -2.062 -3 -2.598s-4.144 -.536 -6 0c-1.856 .536 -3 1.526 -3 2.598z' /%3E %3Cpath d='M3 6v10c0 .888 .772 1.45 2 2' /%3E %3Cpath d='M3 11c0 .888 .772 1.45 2 2' /%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-device-mobile-message::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 3h10v8h-3l-4 2v-2h-3z' /%3E %3Cpath d='M15 16v4a1 1 0 0 1 -1 1h-8a1 1 0 0 1 -1 -1v-14a1 1 0 0 1 1 -1h2' /%3E %3Cpath d='M10 18v.01' /%3E %3C/svg%3E"); }
.ti-file-analytics::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='M14 3v4a1 1 0 0 0 1 1h4' /%3E %3Cpath d='M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z' /%3E %3Cpath d='M9 17l0 -5' /%3E %3Cpath d='M12 17l0 -1' /%3E %3Cpath d='M15 17l0 -3' /%3E %3C/svg%3E"); }
.ti-file-description::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='M14 3v4a1 1 0 0 0 1 1h4' /%3E %3Cpath d='M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z' /%3E %3Cpath d='M9 17h6' /%3E %3Cpath d='M9 13h6' /%3E %3C/svg%3E"); }
.ti-file-text::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='M14 3v4a1 1 0 0 0 1 1h4' /%3E %3Cpath d='M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z' /%3E %3Cpath d='M9 9l1 0' /%3E %3Cpath d='M9 13l6 0' /%3E %3Cpath d='M9 17l6 0' /%3E %3C/svg%3E"); }
.ti-gauge::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 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0' /%3E %3Cpath d='M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0' /%3E %3Cpath d='M13.41 10.59l2.59 -2.59' /%3E %3Cpath d='M7 12a5 5 0 0 1 5 -5' /%3E %3C/svg%3E"); }
.ti-gavel::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 10l7.383 7.418c.823 .82 .823 2.148 0 2.967a2.11 2.11 0 0 1 -2.976 0l-7.407 -7.385' /%3E %3Cpath d='M6 9l4 4' /%3E %3Cpath d='M13 10l-4 -4' /%3E %3Cpath d='M3 21h7' /%3E %3Cpath d='M6.793 15.793l-3.586 -3.586a1 1 0 0 1 0 -1.414l2.293 -2.293l.5 .5l3 -3l-.5 -.5l2.293 -2.293a1 1 0 0 1 1.414 0l3.586 3.586a1 1 0 0 1 0 1.414l-2.293 2.293l-.5 -.5l-3 3l.5 .5l-2.293 2.293a1 1 0 0 1 -1.414 0z' /%3E %3C/svg%3E"); }
.ti-headset::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 14v-3a8 8 0 1 1 16 0v3' /%3E %3Cpath d='M18 19c0 1.657 -2.686 3 -6 3' /%3E %3Cpath d='M4 14a2 2 0 0 1 2 -2h1a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-1a2 2 0 0 1 -2 -2v-3z' /%3E %3Cpath d='M15 14a2 2 0 0 1 2 -2h1a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-1a2 2 0 0 1 -2 -2v-3z' /%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-hourglass-high::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 7h11' /%3E %3Cpath d='M6 20v-2a6 6 0 1 1 12 0v2a1 1 0 0 1 -1 1h-10a1 1 0 0 1 -1 -1z' /%3E %3Cpath d='M6 4v2a6 6 0 1 0 12 0v-2a1 1 0 0 0 -1 -1h-10a1 1 0 0 0 -1 1z' /%3E %3C/svg%3E"); }
.ti-id-badge-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='M7 12h3v4h-3z' /%3E %3Cpath d='M10 6h-6a1 1 0 0 0 -1 1v12a1 1 0 0 0 1 1h16a1 1 0 0 0 1 -1v-12a1 1 0 0 0 -1 -1h-6' /%3E %3Cpath d='M10 3m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v3a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z' /%3E %3Cpath d='M14 16h2' /%3E %3Cpath d='M14 12h4' /%3E %3C/svg%3E"); }
.ti-info-circle::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 9h.01' /%3E %3Cpath d='M11 12h1v4h1' /%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 0z' /%3E %3Cpath d='M15 9h.01' /%3E %3C/svg%3E"); }
.ti-license::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 21h-9a3 3 0 0 1 -3 -3v-1h10v2a2 2 0 0 0 4 0v-14a2 2 0 1 1 2 2h-2m2 -4h-11a3 3 0 0 0 -3 3v11' /%3E %3Cpath d='M9 7l4 0' /%3E %3Cpath d='M9 11l4 0' /%3E %3C/svg%3E"); }
.ti-list-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.5 5.5l1.5 1.5l2.5 -2.5' /%3E %3Cpath d='M3.5 11.5l1.5 1.5l2.5 -2.5' /%3E %3Cpath d='M3.5 17.5l1.5 1.5l2.5 -2.5' /%3E %3Cpath d='M11 6l9 0' /%3E %3Cpath d='M11 12l9 0' /%3E %3Cpath d='M11 18l9 0' /%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-6z' /%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-10z' /%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 0z' /%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-message-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='M8 9h8' /%3E %3Cpath d='M8 13h6' /%3E %3Cpath d='M9 18h-3a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-3l-3 3l-3 -3z' /%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-phone-call::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 %3Cpath d='M15 7a2 2 0 0 1 2 2' /%3E %3Cpath d='M15 3a6 6 0 0 1 6 6' /%3E %3C/svg%3E"); }
.ti-photo::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='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-12z' /%3E %3Cpath d='M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5' /%3E %3Cpath d='M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3' /%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-receipt::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 21v-16a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v16l-3 -2l-2 2l-2 -2l-2 2l-2 -2l-3 2m4 -14h6m-6 4h6m-2 4h2' /%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 0z' /%3E %3Cpath d='M9 14v-2c0 -.59 .414 -1 1 -1h5' /%3E %3Cpath d='M13 9l2 2l-2 2' /%3E %3C/svg%3E"); }
.ti-route::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 19a2 2 0 1 0 4 0a2 2 0 0 0 -4 0' /%3E %3Cpath d='M19 7a2 2 0 1 0 0 -4a2 2 0 0 0 0 4z' /%3E %3Cpath d='M11 19h5.5a3.5 3.5 0 0 0 0 -7h-8a3.5 3.5 0 0 1 0 -7h4.5' /%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.75z' /%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-scale::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 20l10 0' /%3E %3Cpath d='M6 6l6 -1l6 1' /%3E %3Cpath d='M12 3l0 17' /%3E %3Cpath d='M9 12l-3 -6l-3 6a3 3 0 0 0 6 0' /%3E %3Cpath d='M21 12l-3 -6l-3 6a3 3 0 0 0 6 0' /%3E %3C/svg%3E"); }
.ti-search::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='M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0' /%3E %3Cpath d='M21 21l-6 -6' /%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-shield-half::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 3a12 12 0 0 0 8.5 3a12 12 0 0 1 -8.5 15a12 12 0 0 1 -8.5 -15a12 12 0 0 0 8.5 -3' /%3E %3Cpath d='M12 3v18' /%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.873z' /%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='M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0' /%3E %3Cpath d='M12 12m-2 0a2 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-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-tool::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 10h3v-3l-3.5 -3.5a6 6 0 0 1 8 8l6 6a2 2 0 0 1 -3 3l-6 -6a6 6 0 0 1 -8 -8l3.5 3.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='M7 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0' /%3E %3Cpath d='M17 17m-2 0a2 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-user-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='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0' /%3E %3Cpath d='M6 21v-2a4 4 0 0 1 4 -4h4' /%3E %3Cpath d='M15 19l2 2l4 -4' /%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='M9 7m-4 0a4 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-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='M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0' /%3E %3Cpath d='M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0' /%3E %3Cpath d='M3 12h6' /%3E %3Cpath d='M15 12h6' /%3E %3Cpath d='M13.6 9.4l3.4 -4.8' /%3E %3Cpath d='M10.4 14.6l-3.4 4.8' /%3E %3Cpath d='M7 4.6l3.4 4.8' /%3E %3Cpath d='M13.6 14.6l3.4 4.8' /%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"); }
.ti-zoom-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='M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0' /%3E %3Cpath d='M21 21l-6 -6' /%3E %3Cpath d='M7 10l2 2l4 -4' /%3E %3C/svg%3E"); }