/* ==========================================================================
   bewegung.css - Gegenstueck zu bewegung.js

   1. Startzustaende: versteckt wird nur unter .b-an, also nur wenn der
      Kopf-Schnipsel lief und keine reduzierte Bewegung gewuenscht ist.
      bewegung.js setzt .b-da, sobald es den Startzustand selbst haelt.
   2. Lenis: die Regeln aus lenis.css 1.3.26.
   3. Hover-Muster ohne JavaScript: Pfeil, Unterstrich, Bild-Zoom, Text-Rolle.
   4. Laufband, Querreihe, Stapel, Kopf, Fortschritt.

   Werte, die zur Handschrift gehoeren, stehen als Variablen oben und
   koennen in tokens.css des Projekts ueberschrieben werden.
   ========================================================================== */

:root {
  --b-hover-dauer: 0.45s;
  --b-hover-kurve: cubic-bezier(0.22, 1, 0.36, 1);
  --b-zoom: 1.04;
  --b-stapel-oben: 14vh;
  --b-reihe-spalt: 24px;
  --b-laufband-spalt: 64px;
}

/* 1. Startzustaende ------------------------------------------------------- */

.b-an [data-b="zeilen"]:not(.b-da),
.b-an [data-b="einblenden"]:not(.b-da),
.b-an [data-b="bild"]:not(.b-da),
.b-an [data-b="gruppe"]:not(.b-da) > *,
.b-an [data-b="label"]:not(.b-da) .b-label-text {
  visibility: hidden;
}

/* SplitText: Masken duerfen Unterlaengen nicht abschneiden. */
.b-zeile { padding-bottom: 0.08em; margin-bottom: -0.08em; }
.b-wort, .b-zeichen { will-change: transform; }

[data-b="zaehler"] { display: inline-block; font-variant-numeric: tabular-nums; }

/* 2. Lenis ----------------------------------------------------------------- */

html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical], .lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; }
/* Lenis scrollt selbst; das native Weich-Scrollen wuerde dagegen arbeiten. */
html.b-weich { scroll-behavior: auto !important; }

/* 3. Hover-Muster ---------------------------------------------------------- */

/* Pfeil im Knopf: gleitet hinaus, ein zweiter kommt von links nach.
   <a class="b-pfeil">Text <span class="b-pfeil-ikon" aria-hidden="true"><svg>..</svg></span></a> */
.b-pfeil-ikon {
  position: relative; display: inline-grid; overflow: hidden; vertical-align: middle;
  width: 1em; height: 1em;
}
.b-pfeil-ikon > * {
  grid-area: 1 / 1; width: 100%; height: 100%;
  transition: transform var(--b-hover-dauer) var(--b-hover-kurve);
}
.b-pfeil-ikon > *:nth-child(2) { transform: translateX(-130%); }
.b-pfeil:hover .b-pfeil-ikon > *:first-child,
.b-pfeil:focus-visible .b-pfeil-ikon > *:first-child { transform: translateX(130%); }
.b-pfeil:hover .b-pfeil-ikon > *:nth-child(2),
.b-pfeil:focus-visible .b-pfeil-ikon > *:nth-child(2) { transform: translateX(0); }
/* Diagonaler Pfeil (nach rechts oben) */
.b-pfeil--schraeg .b-pfeil-ikon > *:nth-child(2) { transform: translate(-130%, 130%); }
.b-pfeil--schraeg:hover .b-pfeil-ikon > *:first-child,
.b-pfeil--schraeg:focus-visible .b-pfeil-ikon > *:first-child { transform: translate(130%, -130%); }

/* Unterstrich, der von links waechst und nach rechts abgeht. */
.b-strich {
  background: linear-gradient(currentColor, currentColor) no-repeat 100% 100% / 0 1px;
  transition: background-size var(--b-hover-dauer) var(--b-hover-kurve);
  text-decoration: none;
}
.b-strich:hover, .b-strich:focus-visible { background-position: 0 100%; background-size: 100% 1px; }
/* Dauerhaft unterstrichen, beim Ueberfahren laeuft der Strich einmal durch. */
.b-strich--da { background-size: 100% 1px; background-position: 0 100%; }
.b-strich--da:hover, .b-strich--da:focus-visible { animation: b-strich-lauf var(--b-hover-dauer) var(--b-hover-kurve); }
@keyframes b-strich-lauf {
  0% { background-size: 100% 1px; background-position: 100% 100%; }
  50% { background-size: 0 1px; background-position: 100% 100%; }
  51% { background-size: 0 1px; background-position: 0 100%; }
  100% { background-size: 100% 1px; background-position: 0 100%; }
}

/* Bild in einer Karte zoomt langsam. Der Rahmen schneidet ab. */
/* Ecken: vier Winkel, die beim Ueberfahren an den Rand gleiten und erscheinen
   (kensite: div.corner an Zahlenkarten und Marken). Farbe ueber --b-ecken-farbe.
   <article class="b-ecken"> .. </article> */
.b-ecken { position: relative; }
.b-ecken::after {
  content: ""; position: absolute; inset: 16px; pointer-events: none; z-index: 2;
  --e: var(--b-ecken-farbe, currentColor);
  background:
    linear-gradient(var(--e), var(--e)) top left / 12px 1.5px no-repeat,
    linear-gradient(var(--e), var(--e)) top left / 1.5px 12px no-repeat,
    linear-gradient(var(--e), var(--e)) top right / 12px 1.5px no-repeat,
    linear-gradient(var(--e), var(--e)) top right / 1.5px 12px no-repeat,
    linear-gradient(var(--e), var(--e)) bottom left / 12px 1.5px no-repeat,
    linear-gradient(var(--e), var(--e)) bottom left / 1.5px 12px no-repeat,
    linear-gradient(var(--e), var(--e)) bottom right / 12px 1.5px no-repeat,
    linear-gradient(var(--e), var(--e)) bottom right / 1.5px 12px no-repeat;
  opacity: 0;
  transition: inset var(--b-hover-dauer) var(--b-hover-kurve), opacity var(--b-hover-dauer) var(--b-hover-kurve);
}
.b-ecken:hover::after, .b-ecken:focus-visible::after, .b-ecken:focus-within::after { inset: 8px; opacity: 1; }
/* Variante Pixeltreppe (kensite number_item, hover-08 und mobil-05): je Ecke
   ein L aus zwoelf 4-px-Quadraten, 20 px vom Kartenrand. .b-ecken--da zeigt
   die Ecken dauerhaft (Handy, wo es kein Ueberfahren gibt). Bilder in der
   Karte brauchen mindestens 12 px Abstand zu den Ecken. */
.b-ecken--pixel::after {
  inset: 26px;
  background: var(--e);
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M0 0h4v4h-4zM5 0h4v4h-4zM11 0h4v4h-4zM16 0h4v4h-4zM0 5h4v4h-4zM5 5h4v4h-4zM11 5h4v4h-4zM16 5h4v4h-4zM0 11h4v4h-4zM5 11h4v4h-4zM0 16h4v4h-4zM5 16h4v4h-4z'/%3E%3C/svg%3E") top left / 20px 20px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M16 0h4v4h-4zM11 0h4v4h-4zM5 0h4v4h-4zM0 0h4v4h-4zM16 5h4v4h-4zM11 5h4v4h-4zM5 5h4v4h-4zM0 5h4v4h-4zM16 11h4v4h-4zM11 11h4v4h-4zM16 16h4v4h-4zM11 16h4v4h-4z'/%3E%3C/svg%3E") top right / 20px 20px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M0 16h4v4h-4zM5 16h4v4h-4zM11 16h4v4h-4zM16 16h4v4h-4zM0 11h4v4h-4zM5 11h4v4h-4zM11 11h4v4h-4zM16 11h4v4h-4zM0 5h4v4h-4zM5 5h4v4h-4zM0 0h4v4h-4zM5 0h4v4h-4z'/%3E%3C/svg%3E") bottom left / 20px 20px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M16 16h4v4h-4zM11 16h4v4h-4zM5 16h4v4h-4zM0 16h4v4h-4zM16 11h4v4h-4zM11 11h4v4h-4zM5 11h4v4h-4zM0 11h4v4h-4zM16 5h4v4h-4zM11 5h4v4h-4zM16 0h4v4h-4zM11 0h4v4h-4z'/%3E%3C/svg%3E") bottom right / 20px 20px no-repeat;
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M0 0h4v4h-4zM5 0h4v4h-4zM11 0h4v4h-4zM16 0h4v4h-4zM0 5h4v4h-4zM5 5h4v4h-4zM11 5h4v4h-4zM16 5h4v4h-4zM0 11h4v4h-4zM5 11h4v4h-4zM0 16h4v4h-4zM5 16h4v4h-4z'/%3E%3C/svg%3E") top left / 20px 20px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M16 0h4v4h-4zM11 0h4v4h-4zM5 0h4v4h-4zM0 0h4v4h-4zM16 5h4v4h-4zM11 5h4v4h-4zM5 5h4v4h-4zM0 5h4v4h-4zM16 11h4v4h-4zM11 11h4v4h-4zM16 16h4v4h-4zM11 16h4v4h-4z'/%3E%3C/svg%3E") top right / 20px 20px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M0 16h4v4h-4zM5 16h4v4h-4zM11 16h4v4h-4zM16 16h4v4h-4zM0 11h4v4h-4zM5 11h4v4h-4zM11 11h4v4h-4zM16 11h4v4h-4zM0 5h4v4h-4zM5 5h4v4h-4zM0 0h4v4h-4zM5 0h4v4h-4z'/%3E%3C/svg%3E") bottom left / 20px 20px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M16 16h4v4h-4zM11 16h4v4h-4zM5 16h4v4h-4zM0 16h4v4h-4zM16 11h4v4h-4zM11 11h4v4h-4zM5 11h4v4h-4zM0 11h4v4h-4zM16 5h4v4h-4zM11 5h4v4h-4zM16 0h4v4h-4zM11 0h4v4h-4z'/%3E%3C/svg%3E") bottom right / 20px 20px no-repeat;
}
.b-ecken--pixel:hover::after, .b-ecken--pixel:focus-visible::after, .b-ecken--pixel:focus-within::after,
.b-ecken--da::after { inset: 20px; opacity: 1; }
/* kensite laesst die Ecken beim Erscheinen flackern (flickerAnimation, 0,3 s). */
.b-ecken--pixel:hover::after, .b-ecken--pixel:focus-visible::after { animation: b-flackern .3s linear; }
@keyframes b-flackern {
  0% { opacity: 0; } 20% { opacity: 1; } 35% { opacity: .2; } 55% { opacity: 1; } 70% { opacity: .45; } 100% { opacity: 1; }
}

/* Rubriklabel in Eckstrichen (kensite tag_wrap): vier kurze Winkel um eine
   Zeile in Versalien. Mit data-b="label" ziehen sich die Winkel beim
   Erscheinen zusammen, danach wird der Text scharf.
   <p class="b-label" data-b="label"><span class="b-label-ecken" aria-hidden="true"></span>
     <span class="b-label-text">Ablauf</span></p> */
.b-label {
  position: relative; display: inline-block; padding: 8px 16px;
  font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: 0; text-transform: uppercase;
}
.b-label-ecken {
  position: absolute; inset: 0; pointer-events: none;
  --e: var(--b-label-farbe, currentColor);
  background:
    linear-gradient(var(--e), var(--e)) top left / 6px 1.5px no-repeat,
    linear-gradient(var(--e), var(--e)) top left / 1.5px 6px no-repeat,
    linear-gradient(var(--e), var(--e)) top right / 6px 1.5px no-repeat,
    linear-gradient(var(--e), var(--e)) top right / 1.5px 6px no-repeat,
    linear-gradient(var(--e), var(--e)) bottom left / 6px 1.5px no-repeat,
    linear-gradient(var(--e), var(--e)) bottom left / 1.5px 6px no-repeat,
    linear-gradient(var(--e), var(--e)) bottom right / 6px 1.5px no-repeat,
    linear-gradient(var(--e), var(--e)) bottom right / 1.5px 6px no-repeat;
}
.b-label-text { display: block; }

.b-zoom { overflow: hidden; }
.b-zoom img, .b-zoom video { transition: transform 1.1s var(--b-hover-kurve); }
a:hover .b-zoom img, a:hover .b-zoom video, .b-zoom:hover img, .b-zoom:hover video,
a:focus-visible .b-zoom img { transform: scale(var(--b-zoom)); }

/* Text rollt nach oben, eine Kopie kommt von unten.
   <span class="b-rolle" data-text="Kontakt"><span>Kontakt</span></span> */
.b-rolle { position: relative; display: inline-block; overflow: hidden; vertical-align: top; }
.b-rolle > span { display: inline-block; transition: transform var(--b-hover-dauer) var(--b-hover-kurve); }
.b-rolle::after {
  content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%;
  transform: translateY(105%); transition: transform var(--b-hover-dauer) var(--b-hover-kurve);
}
a:hover .b-rolle > span, button:hover .b-rolle > span, .b-rolle:hover > span,
a:focus-visible .b-rolle > span { transform: translateY(-105%); }
a:hover .b-rolle::after, button:hover .b-rolle::after, .b-rolle:hover::after,
a:focus-visible .b-rolle::after { transform: translateY(0); }

/* 4. Bausteine ------------------------------------------------------------- */

/* Laufband: ohne JavaScript und mit reduzierter Bewegung eine ruhige,
   umbrechende Reihe. Erst bewegung.js macht es zum Band. */
[data-b="laufband"] { overflow: hidden; }
[data-b="laufband"] .b-laufband-spur {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: var(--b-laufband-spalt); column-gap: var(--b-laufband-spalt);
}
[data-b="laufband"].b-laeuft .b-laufband-spur { flex-wrap: nowrap; justify-content: flex-start; width: max-content; }
[data-b="laufband"].b-laeuft .b-laufband-spur > * { flex: none; }

/* Querreihe: unter 900 px eine wischbare Reihe mit Einrasten. */
[data-b="pin-reihe"] { overflow: hidden; }
[data-b="pin-reihe"] .b-reihe-spur { display: flex; gap: var(--b-reihe-spalt); width: max-content; }
@media (max-width: 899px), (prefers-reduced-motion: reduce) {
  [data-b="pin-reihe"] { overflow: visible; }
  [data-b="pin-reihe"] .b-reihe-spur {
    width: auto; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    padding-bottom: 8px; scrollbar-width: thin;
  }
  [data-b="pin-reihe"] .b-reihe-spur > * { scroll-snap-align: start; flex: none; }
}

/* Stapel: jede Karte klebt unter dem Kopf. */
[data-b="stapel"] > * { position: sticky; top: var(--b-stapel-oben); }

/* Kopf */
[data-b="kopf"] {
  transition: transform 0.6s var(--b-hover-kurve), background-color 0.4s ease, backdrop-filter 0.4s ease,
    box-shadow 0.4s ease;
}
[data-b="kopf"].b-kopf--weg { transform: translateY(-110%); }

/* Fortschritt: ohne JavaScript unsichtbar, sonst waechst er von links. */
[data-b="fortschritt"] { transform: scaleX(0); transform-origin: 0 50%; }
html:not(.b-bereit) [data-b="fortschritt"] { visibility: hidden; }

/* Reduzierte Bewegung ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .b-pfeil-ikon > *, .b-strich, .b-zoom img, .b-zoom video, .b-rolle > span, .b-rolle::after, .b-ecken::after,
  [data-b="kopf"] { transition: none !important; animation: none !important; }
  [data-b="kopf"].b-kopf--weg { transform: none; }
}