/* Hausstandard Bewegung für Websites (seit 2026-10-06), Gegenstück zu bewegung.js.
   Erwartet diese Variablen aus dem Projekt (sonst greifen die Ersatzwerte):
   --orange (Akzent), --ink (dunkle Fläche), --text, --text-muted, --border, --font-display, --ease-out.
   Nur transform, opacity, clip-path. Ohne JavaScript oder mit "weniger Bewegung" bleibt alles wie vorher. */
:root { --b-akzent: var(--orange, #d97757); --b-dunkel: var(--ink, #141414); }

/* Eigene CSS-Einblendungen des Projekts (z. B. .reveal) hier stummschalten, sonst arbeiten
   CSS-Übergänge gegen GSAP. ACHTUNG: eine !important-Regel schlägt GSAPs Inline-Stil - Elemente,
   die GSAP bewegt, mit :not(...) ausnehmen (gemessen 2026-10-06, Servicebilder Lumblack). */
html.motion [data-b-auf], html.motion [data-b-karte] { transition-property: box-shadow, background-color, color, border-color !important; }
/* Bestehendes Laufband: das Tempo steuert motion.js (reagiert aufs Scrollen) */
html.motion [data-b-laufband] { animation: none !important; will-change: transform; display: flex; width: max-content; }
html.motion [data-b-laufband] [data-b-stern] { animation: none !important; display: inline-block; }
/* Karten kippen in 3D: Glanzlicht folgt der Maus */
.m-glanz { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .4s; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.22), transparent 45%); }
.m-kipp:hover .m-glanz { opacity: 1; }
html.motion [data-m-auf] { opacity: 0; }

/* ---------- Lader beim ersten Besuch ---------- */
.m-lader { position: fixed; inset: 0; z-index: 9999; background: #fff; display: grid; place-items: center; }
.m-lader__mitte { display: grid; justify-items: center; gap: 18px; }
.m-lader__logo { width: min(180px, 46vw); height: auto; clip-path: inset(0 100% 0 0); }
.m-lader__zahl { font-family: var(--font-display); font-size: 13px; letter-spacing: .3em; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.m-lader__balken { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; }
.m-lader__balken i { display: block; height: 100%; background: var(--b-akzent); transform: scaleX(0); transform-origin: left; }
html.m-ohne-lader .m-lader { display: none; }

/* ---------- Vorhang beim Seitenwechsel ---------- */
.m-vorhang { position: fixed; inset: 0; z-index: 9998; background: var(--b-dunkel); display: grid; place-items: center; transform: translateY(100%); pointer-events: none; }
.m-vorhang img { width: 120px; height: auto; filter: invert(1) brightness(2); opacity: 0; }
html.m-wechsel .m-vorhang { transform: translateY(0); }

/* ---------- Fortschritt + Zeiger ---------- */
.m-fortschritt { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1001; background: var(--b-akzent); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.m-zeiger { position: fixed; left: 0; top: 0; z-index: 9990; pointer-events: none; display: none; }
@media (hover: hover) and (pointer: fine) { html.motion .m-zeiger { display: block; } }
.m-zeiger__ring { position: absolute; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--b-akzent) 55%, transparent); display: grid; place-items: center; transition: width .45s var(--ease-out), height .45s var(--ease-out), margin .45s var(--ease-out), background .4s, border-color .4s; }
.m-zeiger__ring em { font-style: normal; font-family: var(--font-display); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #fff; font-weight: 600; opacity: 0; transition: opacity .25s; }
.m-zeiger__punkt { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--b-akzent); }
.m-zeiger.ist-gross .m-zeiger__ring { width: 88px; height: 88px; margin: -44px 0 0 -44px; background: var(--b-akzent); border-color: var(--b-akzent); }
.m-zeiger.ist-gross .m-zeiger__ring em { opacity: 1; }
.m-zeiger.ist-gross .m-zeiger__punkt, .m-zeiger.ist-link .m-zeiger__punkt { opacity: 0; }
.m-zeiger.ist-link .m-zeiger__ring { width: 54px; height: 54px; margin: -27px 0 0 -27px; border-color: var(--b-akzent); }

/* ---------- Knöpfe: Farbe läuft beim Darüberfahren von links nach rechts ---------- */
@media (hover: hover) and (pointer: fine) {
  html.motion .btn { transition: box-shadow .55s var(--ease-out), color .35s, border-color .35s, transform .2s var(--ease-out) !important; }
  html.motion .btn-primary:hover { box-shadow: inset 30em 0 0 0 var(--b-dunkel) !important; border-color: var(--b-dunkel) !important; background: var(--b-akzent) !important; color: #fff !important; }
  html.motion .btn-ghost:hover, html.motion .btn-outline:hover { box-shadow: inset 30em 0 0 0 var(--b-akzent) !important; border-color: var(--b-akzent) !important; color: #fff !important; }
  html.motion .btn-dark:hover { box-shadow: inset 30em 0 0 0 var(--b-akzent) !important; color: #fff !important; }
  html.motion .btn .arrow { display: inline-block; transition: transform .45s var(--ease-out); }
  html.motion .btn:hover .arrow { transform: translateX(4px); }
}

/* ---------- Riesenschrift im Fuß ---------- */
.m-marke { overflow: hidden; text-align: center; line-height: .82; padding: 8px 16px 0; }
.m-marke span { display: inline-block; white-space: nowrap; font-family: var(--font-display); font-weight: 700; font-size: clamp(48px, 15.5vw, 280px); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.28); }

/* ---------- Maske für Zeilen / Wörter ---------- */
.m-zeile { overflow: hidden; padding: .12em 0 .08em; margin: -.12em 0 -.08em; }
html.motion [data-m-teilen] { visibility: hidden; }
.m-bildmaske { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .m-lader, .m-vorhang, .m-zeiger, .m-fortschritt { display: none !important; }
  html.motion [data-m-teilen], html.motion [data-m-auf] { visibility: visible; opacity: 1; }
}