/*
  Bürofluss — Wiederverwendbare Gestaltungs-Bausteine ("Spielereien")
  =====================================================================
  Drei Komponenten, die auf allen Marketing-Seiten identisch aussehen:

    1. .path-track / .path-card   — Wäscheleine: Karteikarten mit Holzklammern an einem Faden
    2. .trust-row                 — Icon+Kurztext-Reihe (Sicherheits-/Vertrauensfakten)
    3. .margin-rail                — nummerierte Rand-Schiene neben .feature-block-grid

  Nutzt ausschließlich die bestehenden Design-Tokens der Seiten
  (--color-primary, --space-*, --radius-*, --shadow-*) — siehe :root in
  jeder Seite. Keine neue Farbe, keine neue Abhängigkeit. Bewegung läuft
  über das bereits eingebundene reveal.css/reveal.js (data-reveal-group),
  hier wird nichts neu animiert.

  Einbindung (nach reveal.css, vor dem seiteneigenen <style>-Block oder
  als zusätzliches <link> im <head>):

    <link rel="stylesheet" href="reveal.css">
    <link rel="stylesheet" href="spielereien.css">
    <script src="reveal.js" defer></script>

  Geprüft: :root aller Seiten definiert genau EIN Farbschema (kein
  prefers-color-scheme, kein [data-theme]-Umschalter) — die Seiten haben
  keinen Dark Mode. Diese Datei braucht deshalb keinen eigenen
  Dark-Mode-Block.
*/

/* ============================================================
   1. PFAD-TRACK — Icon-Marker-Karten entlang einer Linie
   ============================================================
   Struktur (Beispiel mit 3 Stationen, siehe SPIELEREIEN-GUIDE.md
   für das vollständige Kopier-Snippet):

   <div class="path-track" data-reveal-group>
     <div class="path-card">
       <span class="path-marker"><svg ...></svg></span>
       <div class="path-card-body">
         <p class="path-card-eyebrow">01</p>
         <h3>Titel</h3>
         <p class="body-text">Kurzer Erklärtext.</p>
       </div>
     </div>
     ... (3-5 .path-card insgesamt)
   </div>

   Den Faden zeichnet leine.js (nach reveal.js einbinden), weil seine
   Kurven von den echten Kartenhöhen abhängen. Ohne JavaScript hängen
   die Karten mit ihren Klammern da, nur ohne Faden.

   Die Neigung läuft über die eigene CSS-Eigenschaft "rotate", nicht über
   "transform": reveal.css belegt transform für das Hereingleiten, beides
   zusammen in einer Eigenschaft würde sich gegenseitig überschreiben.
*/

.path-track {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding-top: var(--space-6);
}

.path-leine {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.path-leine path {
  fill: none;
  stroke: var(--color-ink-subtle);
  stroke-width: 1.5;
  stroke-linecap: round;
}
/* reveal.css blendet jedes Kind der Gruppe erst beim Hereinscrollen ein.
   Der Faden wird aber erst nach reveal.js angehängt und nie beobachtet,
   er bliebe sonst für immer unsichtbar. */
html.js-reveal [data-reveal-group] > .path-leine {
  opacity: 1;
  transform: none;
}

.path-card {
  position: relative;
  z-index: 1;
  width: 100%;
  rotate: var(--leine-neigung, 0deg);
  transform-origin: 50% 0;
}
.path-card:nth-child(4n+1) { --leine-neigung: -0.8deg; }
.path-card:nth-child(4n+2) { --leine-neigung: 0.7deg; }
.path-card:nth-child(4n+3) { --leine-neigung: -0.5deg; }
.path-card:nth-child(4n+4) { --leine-neigung: 0.9deg; }

.path-card::before {
  content: "";
  position: absolute;
  top: -18px;
  left: 50%;
  width: 16px;
  height: 38px;
  margin-left: -8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 38' fill='none'%3E%3Crect x='1' y='1' width='6.5' height='36' rx='2' fill='%23D4AE80' stroke='%23A67C4F'/%3E%3Crect x='8.5' y='1' width='6.5' height='36' rx='2' fill='%23C9A071' stroke='%23A67C4F'/%3E%3Cpath d='M3 6l.4 8M5.2 20L5 31M11 5l.3 7M12.6 22l-.2 10' stroke='%23B48A5C' stroke-width='.6' stroke-linecap='round'/%3E%3Crect x='.5' y='15' width='15' height='4' rx='1' fill='%2394A3B8' stroke='%2364748B' stroke-width='.6'/%3E%3C/svg%3E") no-repeat;
  z-index: 2;
}

.path-marker {
  position: absolute;
  top: var(--space-4);
  right: var(--space-6);
  width: 18px;
  height: 18px;
  z-index: 2;
  color: var(--color-ink-subtle);
}
.path-marker svg {
  width: 18px;
  height: 18px;
}

.path-card-body {
  position: relative;
  background: var(--color-canvas);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  box-shadow: var(--shadow-md);
  padding: var(--space-4) var(--space-6) var(--space-6);
}

.path-card-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-ink-subtle);
  margin-bottom: var(--space-1);
}

.path-card-body h3 {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-primary-light-hover);
}

/* Karteikarten-Linien: je eine Linie am Fuß jeder 24px-Textzeile, deshalb
   ist die Zeilenhöhe hier fest statt relativ. Ändert sich eine der beiden
   Zahlen allein, laufen die Linien durch die Schrift. */
.path-card-body .body-text {
  margin: 0;
  line-height: 24px;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 23px, var(--color-surface-2) 23px, var(--color-surface-2) 24px);
}

@media (min-width: 720px) {
  .path-card { width: 84%; }
  .path-card:nth-child(odd) { align-self: flex-start; }
  .path-card:nth-child(even) { align-self: flex-end; }
}

@media (max-width: 719px) {
  .path-card { rotate: calc(var(--leine-neigung, 0deg) * 0.5); }
}

@media (prefers-reduced-motion: reduce) {
  .path-card { rotate: none; }
}

/* ============================================================
   2. TRUST-ROW — Icon+Kurztext-Reihe (Sicherheit/Vertrauen)
   ============================================================
   Struktur:

   <div class="trust-row" data-reveal-group>
     <div class="trust-row-item">
       <span class="icon-tile"><svg ...></svg></span>
       <div>
         <h3>Kurztitel</h3>
         <p class="body-text">1-2 Zeilen Erklärung.</p>
       </div>
     </div>
     ... (2-4 .trust-row-item)
   </div>

   Mobile: gestapelt (1 Spalte). Ab 640px: 2 Spalten. Ab 1000px: bis zu
   4 Spalten, je nach Anzahl der Items (.trust-row[data-cols="3"] etc.
   ist NICHT nötig — Grid berechnet die Spalten aus dem Inhalt über
   auto-fit, siehe unten).
*/

.trust-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .trust-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .trust-row {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

.trust-row-item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.trust-row-item .icon-tile {
  background: var(--color-primary-light);
}
.trust-row-item .icon-tile svg {
  color: var(--color-primary);
}

.trust-row-item h3 {
  margin-bottom: var(--space-1);
}

.trust-row-item .body-text {
  margin: 0;
}

/* ============================================================
   3. MARGIN-RAIL — nummerierte Rand-Schiene neben .feature-block-grid
   ============================================================
   Rein ergänzendes Gestaltungselement, KEIN eigenständiger Inhalt.
   Läuft neben .feature-block-text und ordnet dessen bestehende
   .trust-list-item-Zeilen dezent mit Nummern zu. Ersetzt die
   .feature-block-grid NICHT, ergänzt sie nur um eine linke Schiene.

   Struktur (innerhalb von .feature-block-text, um .trust-list herum):

   <div class="margin-rail">
     <div class="trust-list">
       <div class="trust-list-item margin-rail-item">
         <span class="margin-rail-num">01</span>
         <svg ...></svg>
         <p class="body-text">Bestehender Text, wortgleich.</p>
       </div>
       <div class="trust-list-item margin-rail-item">
         <span class="margin-rail-num">02</span>
         <svg ...></svg>
         <p class="body-text">Bestehender Text, wortgleich.</p>
       </div>
     </div>
   </div>

   Nur ab 720px sichtbar (Desktop-Feinschliff) — auf Mobile stapeln
   sich die .trust-list-item ohnehin schon zentriert, eine zusätzliche
   Schiene würde dort nur stören.
*/

.margin-rail {
  position: relative;
}

@media (min-width: 720px) {
  .margin-rail {
    padding-left: var(--space-6);
    border-left: 1px solid var(--color-border);
  }
  .margin-rail-item {
    position: relative;
  }
  .margin-rail-num {
    position: absolute;
    left: calc(-1 * var(--space-6) - 20px);
    top: 1px;
    width: 20px;
    text-align: right;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-ink-subtle);
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
  }
}

/* Rechtsbündige Schiene für .feature-block-grid.is-reverse-Kontexte,
   wo der Text rechts, das Bild links steht — die Schiene folgt dann der
   optischen Textseite statt immer stur links zu kleben. */
@media (min-width: 720px) {
  .feature-block-grid.is-reverse .margin-rail {
    padding-left: 0;
    padding-right: var(--space-6);
    border-left: none;
    border-right: 1px solid var(--color-border);
  }
  .feature-block-grid.is-reverse .margin-rail-num {
    left: auto;
    right: calc(-1 * var(--space-6) - 20px);
    text-align: left;
  }
}
