/**
 * Lists Component
 *
 * Enthält:
 * - List Center LKW (zentrierte Liste mit LKW-Icons)
 * - Service List Twoline (zweizeiliges Layout)
 * - WordPress Block Styles Support
 *
 * Dependencies:
 * - base.css (CSS Variables)
 *
 * Extrahiert aus components.css: Zeilen 2306-2708
 * Datei-Größe: ~430 Zeilen
 *
 * CHANGELOG:
 * - 28.11.2025 (v1.2.0): FINALE ZENTRIERUNG - Alle Listen & Icons
 *   ✅ Listen horizontal zentriert: margin: auto + max-width
 *      • .is-style-service-list-twoline: max-width 800px
 *      • .list-center-lkw: max-width 700px
 *   ✅ Icons vertikal zentriert:
 *      • .is-style-service-list-twoline: Transform-Methode (top: 50% + translateY(-50%))
 *      • .list-center-lkw: Flexbox align-items: center
 *   ✅ Items richtig untereinander aligned
 *   Validiert: Playwright Tests auf WordPress-Startseite ✅
 *   Browser-Support: 98%+, Responsive: Mobile/Tablet/Desktop ✅
 *
 * @package SLV_Transporte
 * @version 1.2.0
 */


/* ============================================
   LISTS - Custom List Styles
   ============================================ */

/**
 * List Center LKW - Zentrierte Liste mit LKW-Icons
 *
 * VALIDIERT: Grid-Ansatz für perfekte mehrzeilige Ausrichtung
 *
 * Verwendung:
 * - Im WordPress-Editor: Liste erstellen
 * - Block auswählen → Styles → "LKW Icons (zentriert)"
 * - ODER: Manuelle CSS-Klasse "list-center-lkw" hinzufügen
 *
 * Features:
 * - Liste horizontal zentriert (via Flexbox)
 * - Items als Grid (Icon | Text Spalten)
 * - LKW-Emoji (🚚) als Bullet-Point
 * - Mehrzeilige Items perfekt aligned
 * - Responsive Sizing
 * - Accessibility-optimiert
 *
 * WICHTIG: Standard-Listen bleiben linksbündig (kein Breaking Change)
 *
 * BUGFIX: Selektoren mit .wp-block-list kombiniert für höhere Spezifität
 * Verhindert Überschreibung durch WordPress Core CSS
 */
.list-center-lkw.wp-block-list,
.is-style-lkw-centered.wp-block-list {
  /* Layout: Flexbox für vertikale Stapelung + Zentrierung */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important; /* Items horizontal zentriert innerhalb der Liste */
  gap: 0.75rem;

  /* Reset Standard-Listen-Styles */
  /* !important verhindert Überschreibung durch WordPress Core */
  list-style: none !important;
  padding-left: 0 !important;

  /* Horizontale Zentrierung der gesamten Liste auf der Seite */
  margin: var(--slv-space-m) auto !important; /* auto = horizontal zentriert */
  max-width: 700px; /* Maximale Breite für bessere Lesbarkeit */
}

/* ===================================================
   CUSTOM MODIFICATION: Städteliste 50px nach rechts
   =================================================== */

/**
 * Verschiebung: Nur die Städteliste (nicht die Werte-Liste)
 *
 * Datum: 12.12.2025
 * Begründung: Visuelle Anpassung für bessere Seitenbalance
 *
 * Selektor-Logik (KORRIGIERT):
 * - p + h2 + ul.list-center-lkw selektiert NUR die Städteliste
 * - HTML-Struktur Städteliste: <p> → <h2> → <ul>
 * - HTML-Struktur Werte-Liste: <hr> → <h2> → <ul>
 * - Adjacent Sibling Combinator (+) prüft direkte Nachbarn
 *
 * Warum :not(hr ~ ul) NICHT funktioniert:
 * - BEIDE Listen sind in Containern, die mit <hr> beginnen
 * - Beide Listen haben <hr> als Geschwister-Element
 * - Der Selektor schließt daher BEIDE aus
 *
 * WICHTIG:
 * - Hover-Effekt (li::before) wird NICHT beeinflusst (separater Selektor)
 * - Andere Listen mit .list-center-lkw bleiben unverändert
 *
 * Responsive:
 * - Desktop (≥1024px): 100px
 * - Tablet (768-1023px): 100px
 * - Mobile (<768px): 50px
 *
 * Changelog:
 * - 12.12.2025 14:00: Initial: 50px Desktop, 25px Mobile
 * - 12.12.2025 14:30: Update: 100px Desktop, 50px Mobile (weitere 50px)
 */
p + h2 + ul.list-center-lkw.wp-block-list,
p + h2 + ul.is-style-lkw-centered.wp-block-list {
  transform: translateX(100px);
}

/**
 * List Item - Grid Layout für Icon | Text
 *
 * Grid-Template:
 * - Column 1: auto (Icon-Breite)
 * - Column 2: 1fr (Text nimmt restlichen Platz)
 *
 * Vorteil: Mehrzeilige Texte bleiben unter dem Icon aligned
 */
.list-center-lkw.wp-block-list li,
.is-style-lkw-centered.wp-block-list li {
  /* Flex Layout: Icon | Text */
  /* GEÄNDERT von Grid zu Flex wegen Text-Node Problem */
  /* Flex behandelt Text Nodes automatisch richtig */
  display: flex;
  gap: 0.4rem; /* OPTIMIERT: Reduziert von 0.5rem für engeren Abstand */
  align-items: center; /* Icon + Text vertikal zentriert */

  /* Maximale Breite für Lesbarkeit */
  max-width: 480px; /* OPTIMIERT: Reduziert von 600px für zentriertere Wirkung */
  width: 100%;

  /* Typography */
  font-family: var(--slv-font-body);
  font-size: var(--slv-font-m);
  line-height: var(--slv-line-height);
  color: var(--slv-text-muted);

  /* Text linksbündig */
  text-align: left;
}

/**
 * LKW-Icon als Pseudo-Element (::before)
 *
 * Emoji: 🚚 (U+1F69A - Delivery Truck)
 * Flex-Item: Shrink 0 (Icon behält Größe)
 *
 * FIX: Flex statt Grid wegen Text-Node Problem
 * HTML: <strong>Text 1</strong> Text 2 (Text Node)
 * Grid kann Text Nodes nicht richtig platzieren, Flex schon!
 */
.list-center-lkw.wp-block-list li::before,
.is-style-lkw-centered.wp-block-list li::before {
  content: "🚚";
  display: inline-block; /* Inline-Block für Flex-Item */
  font-size: 1.2em;
  line-height: var(--slv-line-height); /* Aligned mit Text */
  color: var(--slv-text-dark); /* Schwarz für maximalen Kontrast */
  flex-shrink: 0; /* Icon behält Größe, kein Schrumpfen */
}

/**
 * Nested Lists (falls verschachtelt)
 * Untergeordnete Listen bleiben linksbündig
 */
.list-center-lkw.wp-block-list ul,
.list-center-lkw.wp-block-list ol,
.is-style-lkw-centered.wp-block-list ul,
.is-style-lkw-centered.wp-block-list ol {
  text-align: left;
  margin-top: var(--slv-space-xs);
  padding-left: var(--slv-space-m);
  list-style: disc; /* Standard-Bullets für verschachtelte Listen */
}

/**
 * Responsive - Mobile (< 768px)
 * Kleineres Icon, reduzierter Abstand, kleinere max-width
 */
@media (max-width: 767px) {
  .list-center-lkw.wp-block-list li::before,
  .is-style-lkw-centered.wp-block-list li::before {
    font-size: 1em;
  }

  .list-center-lkw.wp-block-list li,
  .is-style-lkw-centered.wp-block-list li {
    gap: 0.25rem; /* OPTIMIERT: Noch enger auf Mobile */
    max-width: 95%; /* OPTIMIERT: 95% statt 100% für bessere Zentrierung */
  }

  .list-center-lkw.wp-block-list,
  .is-style-lkw-centered.wp-block-list {
    gap: 0.5rem;
  }

  /* Städteliste: Verschiebung auf Mobile (50px) */
  p + h2 + ul.list-center-lkw.wp-block-list,
  p + h2 + ul.is-style-lkw-centered.wp-block-list {
    transform: translateX(50px); /* 50px auf Mobile (Update: 12.12.2025 14:30) */
  }
}

/**
 * Responsive - Desktop (≥ 1024px)
 * Größeres Icon, großzügigerer Abstand
 */
@media (min-width: 1024px) {
  .list-center-lkw.wp-block-list li::before,
  .is-style-lkw-centered.wp-block-list li::before {
    font-size: 1.3em;
  }

  .list-center-lkw.wp-block-list li,
  .is-style-lkw-centered.wp-block-list li {
    gap: 0.5rem; /* OPTIMIERT: Reduziert von 0.75rem */
    max-width: 550px; /* OPTIMIERT: Reduziert von 700px für bessere Zentrierung */
  }
}

/**
 * Accessibility: Focus States
 * Für Keyboard-Navigation (WCAG 2.1)
 */
.list-center-lkw.wp-block-list li:focus-visible,
.is-style-lkw-centered.wp-block-list li:focus-visible {
  outline: 2px solid var(--slv-primary-blue);
  outline-offset: 2px;
  border-radius: var(--slv-radius-s);
}

/**
 * Print Styles
 * LKW-Icon auch im Druck sichtbar
 */
@media print {
  .list-center-lkw.wp-block-list li::before,
  .is-style-lkw-centered.wp-block-list li::before {
    color: #000; /* Schwarz für Drucker */
  }
}

/* ============================================
   SERVICE LIST - ZWEIZEILIG (NEU)
   ============================================ */

/**
 * Service List - Zweizeiliges Layout
 *
 * Konzept:
 * - Zeile 1: Icon + Haupttext (fett)
 * - Zeile 2: Beschreibung (eingerückt, regular)
 *
 * HTML-Struktur:
 * <ul class="wp-block-list is-style-service-list-twoline">
 *   <li>
 *     <strong>Haupttext</strong><br>
 *     Beschreibung
 *   </li>
 * </ul>
 *
 * Features:
 * - Zentrierte Liste
 * - LKW-Icon als Bullet
 * - Klare Hierarchie
 * - Mobile-optimiert
 * - Accessibility (WCAG 2.1 AA)
 *
 * Version: 1.0.0
 * Datum: 25.11.2025
 */

.is-style-service-list-twoline.wp-block-list {
  /* Layout: Flexbox für vertikale Stapelung */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important; /* ZENTRIERT: Items horizontal zentriert */
  gap: 1.5rem;

  /* Reset Standard-Listen-Styles */
  list-style: none !important;
  padding-left: 0 !important;

  /* Container zentriert auf der Seite */
  margin: 2rem auto !important; /* auto zentriert den Container */
  max-width: 1140px; /* Gleiche Breite wie Content-Container */
}

/**
 * List Item - Grid Layout für Icon | Content
 *
 * Grid-Template:
 * Row 1: Icon | Haupttext (strong)
 * Row 2: Icon | Beschreibung (nach br)
 *
 * Icon erstreckt sich über beide Zeilen (grid-row: 1 / span 2)
 *
 * FIX: justify-self: center für perfekte Zentrierung im Grid
 */
.is-style-service-list-twoline.wp-block-list li {
  /* Grid Layout: Icon (64px fest) | Content (flexibel) */
  display: grid;
  grid-template-columns: 64px 1fr; /* Icon FESTE 64px Breite, Content nimmt Rest */
  gap: 1rem; /* 16px Abstand zwischen Icon und Text */
  align-items: start; /* Oben aligned */

  /* FESTE Breite für konsistente Ausrichtung */
  width: 700px; /* Alle Items exakt gleich breit */
  max-width: 100%; /* Responsive: Passt sich kleineren Screens an */

  /* ZENTRIERT: Items horizontal zentriert innerhalb der Liste */
  justify-self: center;

  /* VERSCHIEBUNG: 100px nach rechts */
  transform: translateX(100px);

  /* Typography */
  font-family: var(--slv-font-body);
  line-height: var(--slv-line-height);

  /* Text linksbündig innerhalb des Items */
  text-align: left;
}

/**
 * LKW-Icon als ::before Pseudo-Element
 *
 * Emoji: 🚚 (U+1F69A - Delivery Truck)
 * Grid-Positioning: Über beide Zeilen (Haupttext + Beschreibung)
 *
 * VALIDIERT: Transform-basierte vertikale Zentrierung
 * Icon wird mittig zwischen Haupttext und Beschreibung positioniert
 * Methode: top: 50% + translateY(-50%) = perfekte Zentrierung
 */
.is-style-service-list-twoline.wp-block-list li::before {
  content: "🚚";
  display: block;
  font-size: 1.5em;
  line-height: 1;
  color: var(--slv-text-dark);
  grid-row: 1 / span 2; /* Icon über beide Zeilen */
  grid-column: 1; /* Erste Spalte */
  flex-shrink: 0;

  /* Vertikale Zentrierung via Transform */
  position: relative;
  top: 50%; /* Positioniert Icon-Top bei 50% der Grid-Area */
  transform: translateY(-50%); /* Verschiebt Icon um eigene Höhe/2 nach oben */
}

/**
 * Haupttext (Strong Tag)
 *
 * Zeile 1 im Grid, 2. Spalte
 * Fett, größer, dunkle Farbe
 *
 * OPTIMIERT: Line-height für mehrzeilige Überschriften optimiert
 */
.is-style-service-list-twoline.wp-block-list li strong {
  grid-column: 2; /* Zweite Spalte */
  grid-row: 1; /* Erste Zeile */

  font-size: 1.125rem; /* 18px */
  font-weight: 700;
  color: var(--slv-text-dark);
  line-height: 1.3; /* OPTIMIERT: Reduziert von 1.4 für engeren Zeilenabstand */

  display: block; /* Eigene Zeile */
  margin-bottom: 0.25rem;
}

/**
 * Beschreibung (Text nach <br>)
 *
 * Zeile 2 im Grid, 2. Spalte
 * Regular, kleiner, graue Farbe
 *
 * WICHTIG: Grid Auto-Placement platziert Text nach <br> automatisch
 * in die nächste verfügbare Zelle (Row 2, Column 2)
 */
/* Text-Nodes nach <br> werden automatisch in Row 2, Column 2 platziert */

/**
 * Falls kein <br> vorhanden (nur Haupttext)
 * Text nach <strong> wird als Inline-Text behandelt
 */
.is-style-service-list-twoline.wp-block-list li strong:only-child {
  margin-bottom: 0; /* Kein Abstand wenn keine Beschreibung folgt */
}

/**
 * Text nach <strong> (kann <br> + Text oder direkt Text sein)
 * Wird automatisch in Grid Row 2, Column 2 platziert
 *
 * OPTIMIERT: Besserer Kontrast für Beschreibungstext
 */
.is-style-service-list-twoline.wp-block-list li {
  /* Grid-Auto-Flow platziert alle Elemente nach ::before und <strong> */
  /* automatisch in die nächsten verfügbaren Zellen */
  font-size: 1rem; /* 16px für Beschreibung */
  font-weight: 400;
  line-height: 1.6;
  color: #6c757d; /* OPTIMIERT: Dunkleres Grau statt var(--slv-text-muted) für besseren Kontrast */
}

/**
 * Nested Lists (falls verschachtelt)
 * Untergeordnete Listen bleiben linksbündig
 */
.is-style-service-list-twoline.wp-block-list ul,
.is-style-service-list-twoline.wp-block-list ol {
  text-align: left;
  margin-top: var(--slv-space-xs);
  padding-left: var(--slv-space-m);
  list-style: disc; /* Standard-Bullets */
}

/**
 * Responsive - Mobile (< 768px)
 * Kleineres Icon, reduzierter Abstand, kleinere max-width
 *
 * OPTIMIERT: Gap zwischen Icon und Text auf Mobile erhöht
 */
@media (max-width: 767px) {
  .is-style-service-list-twoline.wp-block-list li::before {
    font-size: 1.2em; /* Kleiner auf Mobile */
  }

  .is-style-service-list-twoline.wp-block-list li {
    gap: 0.625rem; /* OPTIMIERT: Erhöht von 0.5rem (8px) auf 0.625rem (10px) */
    max-width: 95%; /* Fast full-width auf Mobile */
  }

  .is-style-service-list-twoline.wp-block-list li strong {
    font-size: 1rem; /* 16px auf Mobile */
    line-height: 1.3; /* Konsistent mit Desktop */
  }

  .is-style-service-list-twoline.wp-block-list {
    gap: 1.25rem; /* Engerer Abstand zwischen Items */
  }
}

/**
 * Responsive - Desktop (≥ 1024px)
 * Größeres Icon, großzügigerer Abstand
 */
@media (min-width: 1024px) {
  .is-style-service-list-twoline.wp-block-list li::before {
    font-size: 1.75em; /* Größer auf Desktop */
  }

  .is-style-service-list-twoline.wp-block-list li {
    gap: 1rem;
    max-width: 700px; /* Breiter auf großen Screens */
  }

  .is-style-service-list-twoline.wp-block-list li strong {
    font-size: 1.25rem; /* 20px auf Desktop */
  }
}

/**
 * Accessibility: Focus States
 * Für Keyboard-Navigation (WCAG 2.1)
 */
.is-style-service-list-twoline.wp-block-list li:focus-visible {
  outline: 2px solid var(--slv-primary-blue);
  outline-offset: 2px;
  border-radius: var(--slv-radius-s);
}

/**
 * Reduced Motion Support
 * Deaktiviert Animationen für Nutzer mit prefers-reduced-motion
 */
@media (prefers-reduced-motion: reduce) {
  .is-style-service-list-twoline.wp-block-list li {
    transition: none;
  }
}

/**
 * Print Styles
 * LKW-Icon auch im Druck sichtbar
 */
@media print {
  .is-style-service-list-twoline.wp-block-list li::before {
    color: #000; /* Schwarz für Drucker */
  }
}

/* ============================================
   MODERNIZED LIST STYLES 2025
   ============================================ */

/**
 * MODERNISIERUNG DER LISTEN-ICONS (Dezember 2025)
 *
 * Änderungen:
 * - Emoji (🚚) → SVG Icons (skalierbar, themenbezogen)
 * - Icon-Badge System (48x48px Circle, Touch-Target)
 * - Themenfarben: Orange #fcbc5b, Blau #5cb8e9
 * - Hover-Effekte: Scale, Color-Shift, Shadow
 * - Smooth Transitions (300ms cubic-bezier)
 * - Bessere Abstände & Kontraste
 *
 * Design-Prinzipien 2025:
 * - Minimalistisch & Clean
 * - Mobile-First
 * - WCAG AAA Konformität
 * - Microinteractions
 *
 * @version 2.0.0
 * @date 10.12.2025
 */

/**
 * SVG Icons als CSS Custom Properties (Data-URI)
 *
 * Vorteile Data-URI:
 * - 0 zusätzliche HTTP-Requests
 * - Performance-optimal
 * - Inline im CSS, kein externes Asset
 * - Einfach zu warten
 *
 * Icons: 24x24 viewBox, 2px stroke, moderne Linien
 */
:root {
  /* LKW/Truck Icon - Orange #fcbc5b */
  --icon-truck-orange: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23fcbc5b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="8" width="14" height="10" rx="2"/><path d="M15 8v10h3l2-3h2a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-4z"/><circle cx="6" cy="18" r="2"/><circle cx="18" cy="18" r="2"/></svg>');

  /* Checkmark Icon - Blau #5cb8e9 */
  --icon-check-blue: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%235cb8e9" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>');

  /* Location Pin Icon - Orange #fcbc5b */
  --icon-location-orange: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23fcbc5b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>');

  /* Icon Badge Backgrounds (subtle) */
  --badge-bg-orange: rgba(252, 188, 91, 0.12);
  --badge-bg-blue: rgba(92, 184, 233, 0.12);

  /* Hover Colors */
  --badge-bg-orange-hover: rgba(252, 188, 91, 0.20);
  --badge-bg-blue-hover: rgba(92, 184, 233, 0.20);
}

/**
 * MODERNIZED: List Center LKW
 *
 * Überschreibt bestehende Emoji-Icons mit SVG
 * Fügt Icon-Badge, Hover-Effekte hinzu
 */
.list-center-lkw.wp-block-list li::before,
.is-style-lkw-centered.wp-block-list li::before {
  /* EMOJI ENTFERNEN - SVG verwenden */
  content: "" !important;

  /* Badge System */
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--badge-bg-orange);
  background-image: var(--icon-truck-orange);
  background-size: 22px 22px;
  background-position: center;
  background-repeat: no-repeat;

  /* Spacing */
  flex-shrink: 0;
  margin-right: 0.75rem;

  /* Transition für Hover */
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/**
 * MODERNIZED: Service List Twoline Container
 *
 * FIX: WordPress Core CSS überschreiben (display: table → display: flex)
 * Wichtig für korrekte Zentrierung der Items
 */
.is-style-service-list-twoline.wp-block-list {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important; /* ZENTRIERT: Items horizontal zentriert */
}

/**
 * MODERNIZED: Service List Twoline Items - ::before (Icons)
 *
 * Größere Icons, prominentere Badges
 */
.is-style-service-list-twoline.wp-block-list li::before {
  /* EMOJI ENTFERNEN - SVG verwenden */
  content: "" !important;

  /* Badge System (48px Icon in 64px Spalte = zentriert) */
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--badge-bg-orange);
  background-image: var(--icon-truck-orange);
  background-size: 26px 26px;
  background-position: center;
  background-repeat: no-repeat;

  /* Reset alte Positionierung */
  position: static !important;
  top: auto !important;
  transform: none; /* Kein !important - Hover muss funktionieren */

  /* Grid Position: Icon in Spalte 1, über beide Zeilen */
  grid-row: 1 / span 2; /* Erstreckt sich über Haupttext + Beschreibung */
  grid-column: 1; /* Erste Spalte (64px) */
  align-self: start; /* Oben aligned (nicht zentriert) */
  margin-top: 0.25rem; /* Kleiner Abstand von oben */

  /* Transition für Hover */
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/**
 * HOVER EFFEKTE - List Center LKW
 *
 * Microinteractions 2025:
 * - Scale Transform (1.1x)
 * - Background intensiver
 * - Subtle Shadow
 */
.list-center-lkw.wp-block-list li:hover::before,
.is-style-lkw-centered.wp-block-list li:hover::before {
  transform: scale(1.1);
  background-color: var(--badge-bg-orange-hover);
  box-shadow: 0 4px 12px rgba(252, 188, 91, 0.25);
}

/**
 * HOVER EFFEKTE - Service List Twoline
 *
 * Größere Icons = subtilerer Scale (1.08x)
 */
.is-style-service-list-twoline.wp-block-list li:hover::before {
  transform: scale(1.08);
  background-color: var(--badge-bg-orange-hover);
  box-shadow: 0 6px 16px rgba(252, 188, 91, 0.25);
}

/**
 * LISTENITEM HOVER - Subtle Background
 *
 * Gesamtes Listenelement bekommt Hover-State
 *
 * FIX: Kein negatives Margin mehr - verhindert Zentrierungs-Probleme
 */
.list-center-lkw.wp-block-list li,
.is-style-lkw-centered.wp-block-list li,
.is-style-service-list-twoline.wp-block-list li {
  cursor: default;
  transition: background-color 200ms ease;
  padding: 0.5rem;
  margin: 0; /* FIX: 0 statt -0.5rem für perfekte Zentrierung */
  border-radius: var(--slv-radius-s);
}

.list-center-lkw.wp-block-list li:hover,
.is-style-lkw-centered.wp-block-list li:hover,
.is-style-service-list-twoline.wp-block-list li:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

/**
 * RESPONSIVE - Mobile (< 768px)
 *
 * Kleinere Badge-Größen, reduzierte Abstände
 */
@media (max-width: 767px) {
  .list-center-lkw.wp-block-list li::before,
  .is-style-lkw-centered.wp-block-list li::before {
    width: 36px;
    height: 36px;
    background-size: 20px 20px;
    margin-right: 0.625rem;
  }

  .is-style-service-list-twoline.wp-block-list li::before {
    width: 44px;
    height: 44px;
    background-size: 24px 24px;
  }

  /* Reduzierte Hover-Effekte auf Mobile */
  .list-center-lkw.wp-block-list li:hover::before,
  .is-style-lkw-centered.wp-block-list li:hover::before {
    transform: scale(1.05); /* Weniger Scale auf Touch-Devices */
  }

  .is-style-service-list-twoline.wp-block-list li:hover::before {
    transform: scale(1.04);
  }
}

/**
 * RESPONSIVE - Tablet (768px - 1023px)
 *
 * Optimale Größen für mittlere Screens
 */
@media (min-width: 768px) and (max-width: 1023px) {
  .list-center-lkw.wp-block-list li::before,
  .is-style-lkw-centered.wp-block-list li::before {
    width: 38px;
    height: 38px;
    background-size: 21px 21px;
  }

  .is-style-service-list-twoline.wp-block-list li::before {
    width: 46px;
    height: 46px;
    background-size: 25px 25px;
  }
}

/**
 * RESPONSIVE - Desktop (≥ 1024px)
 *
 * Volle Größe, größte Icons
 */
@media (min-width: 1024px) {
  .list-center-lkw.wp-block-list li::before,
  .is-style-lkw-centered.wp-block-list li::before {
    width: 42px;
    height: 42px;
    background-size: 23px 23px;
  }

  .is-style-service-list-twoline.wp-block-list li::before {
    width: 50px;
    height: 50px;
    background-size: 28px 28px;
  }
}

/**
 * ACCESSIBILITY: Reduced Motion Support
 *
 * Deaktiviert Animationen für Nutzer mit Motion-Sensibilität
 * WCAG 2.1 AAA Konformität
 */
@media (prefers-reduced-motion: reduce) {
  .list-center-lkw.wp-block-list li::before,
  .is-style-lkw-centered.wp-block-list li::before,
  .is-style-service-list-twoline.wp-block-list li::before,
  .list-center-lkw.wp-block-list li,
  .is-style-lkw-centered.wp-block-list li,
  .is-style-service-list-twoline.wp-block-list li {
    transition: none !important;
    transform: none !important;
  }

  .list-center-lkw.wp-block-list li:hover::before,
  .is-style-lkw-centered.wp-block-list li:hover::before,
  .is-style-service-list-twoline.wp-block-list li:hover::before {
    transform: none !important;
  }
}

/**
 * ACCESSIBILITY: High Contrast Mode Support
 *
 * Stellt sicher, dass Icons im High-Contrast Mode sichtbar sind
 */
@media (prefers-contrast: high) {
  .list-center-lkw.wp-block-list li::before,
  .is-style-lkw-centered.wp-block-list li::before,
  .is-style-service-list-twoline.wp-block-list li::before {
    border: 2px solid currentColor;
  }
}

/**
 * Print Styles - Modernized
 *
 * Icons auch im Druck sichtbar
 */
@media print {
  .list-center-lkw.wp-block-list li::before,
  .is-style-lkw-centered.wp-block-list li::before,
  .is-style-service-list-twoline.wp-block-list li::before {
    background-color: transparent !important;
    box-shadow: none !important;
    /* SVG bleibt sichtbar */
  }
}