/**
 * Datenschutz-Seite (page_id=88) - Spezifische Styles
 *
 * Zweck: Zentrierte Ausrichtung aller Listen auf der Datenschutz-Seite
 * Datum: 2025-12-13
 *
 * Anforderung:
 * - Alle Listenelemente mittig ausgerichtet
 * - Gleicher Startpunkt für alle Items
 * - Nur auf page_id=88 aktiv
 *
 * @package SLV_Transporte
 * @version 1.0.0
 */

/* ============================================
   LISTEN-ZENTRIERUNG - NUR DATENSCHUTZ-SEITE
   ============================================ */

/**
 * WordPress Block Listen - Zentriert + 200px nach rechts verschoben
 *
 * Selector: .page-id-88 stellt sicher, dass nur die Datenschutz-Seite betroffen ist
 * Body-Klasse wird von WordPress automatisch hinzugefügt
 *
 * UPDATE 2025-12-13: Listen um 200px nach rechts verschoben
 */
.page-id-88 .wp-block-list {
  /* Flexbox für vertikale Stapelung + Zentrierung */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important; /* Items horizontal zentriert */

  /* Liste selbst zentriert auf der Seite */
  margin-left: auto !important;
  margin-right: auto !important;

  /* Maximale Breite für Lesbarkeit */
  max-width: 800px;

  /* Padding für Mobile */
  padding-left: var(--slv-space-s);
  padding-right: var(--slv-space-s);

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

/**
 * List Items - Ausrichtung
 *
 * Alle Items starten am gleichen Punkt
 * Text linksbündig innerhalb des Items
 */
.page-id-88 .wp-block-list li {
  /* Volle Breite innerhalb der Liste */
  width: 100%;
  max-width: 700px; /* Konsistente Item-Breite */

  /* Text linksbündig (Bullets bleiben links) */
  text-align: left;

  /* Spacing */
  margin-bottom: var(--slv-space-xs);

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

/**
 * Nested Lists (falls vorhanden)
 * Eingerückt, aber gleiche Ausrichtung
 */
.page-id-88 .wp-block-list ul,
.page-id-88 .wp-block-list ol {
  margin-top: var(--slv-space-xs);
  padding-left: var(--slv-space-m);
}

/**
 * List Style Position
 * Inside = Bullets innerhalb des Text-Flows
 * Outside = Bullets außerhalb (Standard)
 *
 * Wir nutzen 'outside' für klassisches Listen-Layout
 */
.page-id-88 .wp-block-list {
  list-style-position: outside;
  padding-left: var(--slv-space-m); /* Platz für Bullets */
}

/* ============================================
   RESPONSIVE - MOBILE
   ============================================ */

/**
 * Mobile (< 768px)
 * Kleinere max-width, reduziertes Padding
 * WICHTIG: Verschiebung reduziert auf Mobile (100px statt 200px)
 */
@media (max-width: 767px) {
  .page-id-88 .wp-block-list {
    max-width: 100%;
    padding-left: var(--slv-space-xs);
    padding-right: var(--slv-space-xs);

    /* Reduzierte Verschiebung auf Mobile */
    transform: translateX(100px);
  }

  .page-id-88 .wp-block-list li {
    max-width: 100%;
    font-size: var(--slv-font-s); /* Etwas kleiner auf Mobile */
  }
}

/* ============================================
   RESPONSIVE - TABLET
   ============================================ */

/**
 * Tablet (768px - 1023px)
 * Optimale Breiten für mittlere Screens
 */
@media (min-width: 768px) and (max-width: 1023px) {
  .page-id-88 .wp-block-list {
    max-width: 700px;
  }

  .page-id-88 .wp-block-list li {
    max-width: 650px;
  }
}

/* ============================================
   RESPONSIVE - DESKTOP
   ============================================ */

/**
 * Desktop (≥ 1024px)
 * Volle Breite, optimale Lesbarkeit
 */
@media (min-width: 1024px) {
  .page-id-88 .wp-block-list {
    max-width: 800px;
  }

  .page-id-88 .wp-block-list li {
    max-width: 700px;
  }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/**
 * Focus States für Keyboard-Navigation
 * WCAG 2.1 Konformität
 */
.page-id-88 .wp-block-list li:focus-visible {
  outline: 2px solid var(--slv-primary-blue);
  outline-offset: 2px;
  border-radius: var(--slv-radius-s);
}

/**
 * Print Styles
 * Optimiert für Druckausgabe
 */
@media print {
  .page-id-88 .wp-block-list {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .page-id-88 .wp-block-list li {
    page-break-inside: avoid;
  }
}