/* ---------- Ocelos AI — Motion-Ergaenzungen (Redesign 2026-09-05) ----------
   Quelle: Drive „Website Design Optimierung/integration/ocelos-motion.css".
   Uebernommen ohne Aenderung der Funktionsweise; angepasst wurde ausschliesslich
   die KI-Kennzeichnung (.ai-disclosure) — sie zeigt nach Marios Ansage vom
   2026-09-05, 13:06 nur noch das EU-Symbol, ohne den Text „KI-generierte
   Visualisierung". Der Wortlaut steht weiterhin im aria-label des <figure>
   und im title der Kennzeichnung (docs/DECISIONS.md).

   Diese Datei wird ausschliesslich von der Startseite geladen. Impressum,
   Datenschutz und 404 bleiben dadurch unberuehrt.

   Sie veraendert weder die Logo-Datei noch deren Breite, Hoehe, Farbe,
   Proportion, Filter, Position oder bestehende Abstaende. Der zusaetzliche
   Raum fuer die Markenanimation entsteht ausschliesslich UNTERHALB der
   bisherigen Logozeile. */

/* ---------- Markenanimation unter dem unveraenderten Logo ---------- */

/* Neutraler Stapel um den bestehenden Logo-Link. Er uebernimmt exakt die
   bisherigen Breiten-/Zentrierungswerte von .logo, damit das Logo an seiner
   Position bleibt. Die .logo-Regel selbst bleibt unangetastet. */
.brand-stack {
  position: relative;
  display: block;
  width: 100%;
  max-width: 30rem;
  margin-inline: auto;
  /* 3rem -> 1.75rem: Die Leiste liegt seit 2026-09-12 im Fluss und bringt ihren
     Platz selbst mit; der alte Wert war reine Reserve fuer das absolute Element. */
  margin-bottom: 1.75rem;
}

/* Seit 2026-09-12 (Auftrag Mario, Eingangskorb 2026-09-10: die Leiste war "zu
   unscheinbar, kaum erkennbar") steht die Markenanimation im Fluss statt absolut
   und auf voller Logobreite statt 80 % davon. Ursache der Unscheinbarkeit war die
   Verkleinerung: 1200 viewBox-Einheiten auf 304 CSS-px sind Faktor 0,25 -- ein
   1,35er Strich kam als 0,34 px an, zusaetzlich gedaempft durch opacity 0.72. */
.brand-motion {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 0.9rem;
  opacity: 1;
  pointer-events: none;
  user-select: none;
}

/* ---------- Bewegte Visualisierungen ---------- */

.visual-motion {
  position: relative;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--linie);
  border-radius: 4px;
  background: var(--flaeche);
}

.visual-motion video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

/* Bild 2 und 3 schliessen ihren Abschnitt ab — Luft zum Raster darueber,
   zentriert und auf 60rem begrenzt (Vorgabe Dok 2 §7). */
#leistungen .visual-motion,
#grundsaetze .visual-motion {
  width: min(100%, 60rem);
  margin: 2.75rem auto 0;
}

/* ---------- KI-Kennzeichnung ----------
   Nur das offizielle EU-Symbol, dauerhaft sichtbar, unten rechts, in fester
   Groesse (skaliert nicht mit dem Video mit). Die helle Unterlage sichert den
   Kontrast ueber jedem Videoinhalt; der Wortlaut steht in aria-label/title. */
.ai-disclosure {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem;
  border: 1px solid rgb(20 20 20 / 18%);
  border-radius: 3px;
  background: rgb(250 249 247 / 94%);
  line-height: 0;
}

.ai-disclosure img {
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 auto;
}

/* ---------- Vorgehensweise: eine ruhige Verbindungslinie ----------
   Laeuft beim ersten Sichtbarwerden genau einmal, 1,8 s, ohne Wiederholung.
   Die Nummerierung, die Texte und deren Position bleiben unveraendert. */
.steps {
  position: relative;
}

.steps::before,
.steps::after {
  content: "";
  position: absolute;
  left: 1rem;
  top: 2rem;
  bottom: 2rem;
  width: 1px;
  pointer-events: none;
}

.steps::before {
  background: var(--linie);
}

.steps::after {
  background: var(--akzent);
  transform: scaleY(0);
  transform-origin: top;
}

.steps.is-visible::after {
  animation: process-line-mobile 1.8s cubic-bezier(.22, .61, .36, 1) forwards;
}

.steps > li {
  z-index: 1;
}

/* Der Nummernkreis deckt die Linie sauber ab. */
.steps > li::before {
  background: var(--grund);
  transition: border-color 180ms ease, background-color 180ms ease;
}

/* ---------- Mikrointeraktionen ---------- */

.cta {
  transition: background-color 180ms ease, border-color 180ms ease,
              color 180ms ease, transform 120ms ease;
}

.cta:active {
  transform: translateY(1px);
}

.site-nav a {
  transition: color 160ms ease, border-color 180ms ease;
}

@keyframes process-line-mobile {
  to { transform: scaleY(1); }
}

@media (min-width: 40em) {
  .brand-stack {
    width: 380px;
    max-width: none;
    margin-inline: 0;
    margin-bottom: 0;
    /* Seit 2026-09-11 ist .header-inner auch ab 40em eine Spalte (grosse Nav
       unter dem Logo, Auftrag Mario 2026-09-10). flex-basis muss deshalb auto
       sein -- 380px wuerde in Spaltenrichtung als Hoehe wirken. Der Raum fuer
       die Markenanimation unter dem Logo kommt aus dem gap von .header-inner. */
    flex: 0 0 auto;
  }

  #leistungen .visual-motion,
  #grundsaetze .visual-motion {
    margin-top: 3.25rem;
  }
}

/* Korrektur 1 zum gelieferten Paket: Zwischen 40em und 64em steht die
   Vorgehensweise in zwei Spalten. Die senkrechte Linie des Pakets laeuft dort
   nur durch die linke Spalte und verbindet damit 1 → 3 statt der tatsaechlichen
   Reihenfolge 1 → 2 → 3 → 4. In diesem Bereich bleibt die Linie deshalb aus;
   Dok 2 §5 fordert sie ausdruecklich nur senkrecht auf Mobilgeraeten und
   waagerecht auf dem Desktop. */
@media (min-width: 40em) and (max-width: 63.999em) {
  .steps::before,
  .steps::after {
    display: none;
  }
}

@media (min-width: 64em) {
  /* Korrektur 2 zum gelieferten Paket: Die waagerechte Linie liegt auf
     Kreismitte (1,1rem) und damit genau auf der Grundlinie der Zwischen-
     ueberschriften — ohne Abdeckung sieht sie wie ein Durchstreichen aus.
     Der Listeneintrag bekommt deshalb den Abschnittshintergrund; die Linie
     bleibt in den Spaltenabstaenden als Verbindung sichtbar. Texte, Groessen
     und Positionen bleiben unveraendert. */
  .steps > li {
    background: var(--grund);
  }

  .steps::before,
  .steps::after {
    top: 1.1rem;
    bottom: auto;
    left: 1rem;
    right: 1rem;
    width: auto;
    height: 1px;
  }

  .steps::after {
    transform: scaleX(0);
    transform-origin: left;
  }

  .steps.is-visible::after {
    animation: process-line-desktop 1.8s cubic-bezier(.22, .61, .36, 1) forwards;
  }

  @keyframes process-line-desktop {
    to { transform: scaleX(1); }
  }
}

@media (max-width: 30em) {
  .ai-disclosure {
    right: 0.5rem;
    bottom: 0.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-motion {
    display: none;
  }

  .steps::after {
    display: none;
  }

  .cta,
  .site-nav a,
  .steps > li::before {
    transition: none;
  }
}

@media print {
  .brand-motion,
  .ai-disclosure {
    display: none;
  }
}