/* =====================================================================
   OctaCore – IT Support & Solutions · Stylesheet (Fassung 11.09.2026, abends)
   Jeder Wert kommt aus DESIGN.md. Ein freier Wert ist ein Fehler.
   Gestaltung: „midnight precision instrument" (Linear) auf OctaCores
   Violett und Platine — Haarlinien, Glasflächen, ein Akzent, Bewegung
   mit Absicht. Alles unter prefers-reduced-motion still.
   ===================================================================== */

/* --- Schrift: Poppins, selbst gehostet ---------------------------------- */
@font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-SemiBold.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  /* Grundton — gemessen am Original-Hintergrund */
  --grund: #0D0020;
  --grund-tief: #000014;
  --grund-mitte: #140033;

  /* Die Marke */
  --violett: #7C3AED;
  --violett-voll: #7E22CE;
  --violett-hell: #C4B5FD;
  --verlauf: linear-gradient(145deg, #8E44AD, #6A1B9A);
  --orange: #F6921E;              /* genau eine Aufgabe: der Ticket-Weg */

  /* Text */
  --text: #FFFFFF;
  --text-lauf: #E5E5E5;
  --text-neben: #A8A0C0;

  /* Glasebene */
  --glas-15: rgba(124, 58, 237, .15);
  --glas-20: rgba(124, 58, 237, .20);
  --glas-25: rgba(124, 58, 237, .25);
  --kante: rgba(255, 255, 255, .08);
  --kante-stark: rgba(255, 255, 255, .15);
  --kante-licht: rgba(196, 181, 253, .45);   /* die leuchtende Haarlinie */
  --zeile: rgba(255, 255, 255, .03);
  --schein: rgba(124, 58, 237, .35);

  /* Formen */
  --r-klein: 10px;
  --r-karte: 16px;
  --r-pille: 999px;

  /* Abstände */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* Schriftgrößen — fünf Stufen */
  --text-s: .875rem;
  --text-m: 1.0625rem;
  --text-l: 1.25rem;
  --text-xl: 1.75rem;
  --text-2xl: clamp(2.25rem, 4.6vw, 3.5rem);
  --mono: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Menlo, Consolas, monospace;

  --breite: 1200px;
  --schatten: 0 8px 20px rgba(0, 0, 0, .30);
  --schatten-hoch: 0 12px 25px rgba(0, 0, 0, .40);
  --tempo: .25s;
  --tempo-lang: .7s;
  --kurve: cubic-bezier(.22, .61, .36, 1);
}

/* =========================
   LOADING SCREEN
   ========================= */

#loader {
  position: fixed;
  inset: 0;
  background: rgba(20, 0, 30, 0.95);
  backdrop-filter: blur(8px);
  z-index: 9999;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  color: white;
  font-family: 'Poppins', sans-serif;
}

/* Spinner */
.spinner {
  width: 60px;
  height: 60px;
  border: 5px solid rgba(255,255,255,0.2);
  border-top: 5px solid #7c3aed;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 15px;
}

#loader p {
  font-size: 14px;
  letter-spacing: 1px;
  opacity: 0.8;
}

/* Animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Fade out */
#loader.fade-out {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

/* --- Grundgerüst ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text-lauf);
  font: 400 var(--text-m)/1.6 'Poppins', system-ui, sans-serif;
  background: var(--grund) radial-gradient(ellipse 90% 70% at 50% 40%, var(--grund-mitte) 0%, var(--grund) 45%, var(--grund-tief) 100%) fixed;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--violett-hell); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--text); }
:focus-visible { outline: 2px solid var(--violett-hell); outline-offset: 3px; border-radius: var(--r-klein); }
::selection { background: var(--violett); color: var(--text); }

h1, h2, h3 { color: var(--text); font-weight: 600; line-height: 1.1; margin: 0; text-wrap: balance; }
h1 { font-size: var(--text-2xl); letter-spacing: -.022em; overflow-wrap: anywhere; hyphens: auto; }
h2 { font-size: var(--text-xl); letter-spacing: -.012em; }
h3 { font-size: var(--text-l); }
p { margin: 0; }
ul { margin: 0; padding-left: 1.2em; }
li { margin: var(--s-2) 0; }
strong { color: var(--text); font-weight: 600; }
code { font-family: var(--mono); font-size: var(--text-s); color: var(--violett-hell); }
.neben { color: var(--text-neben); }
.klein { font-size: var(--text-s); }
.link { color: var(--violett-hell); text-decoration: underline; }
.mono { font-family: var(--mono); font-size: var(--text-s); letter-spacing: .08em; }

/* --- Der Platinen-Hintergrund ------------------------------------------ */
#platine { position: fixed; inset: 0; z-index: 0; pointer-events: none; width: 100%; height: 100%; opacity: .6; }
.seite { position: relative; z-index: 1; }

/* --- Sprung zum Inhalt -------------------------------------------------- */
.sprung { position: absolute; left: var(--s-4); top: -100px; z-index: 100; padding: var(--s-2) var(--s-4);
  background: var(--violett-voll); color: var(--text); border-radius: var(--r-klein); }
.sprung:focus { top: var(--s-4); }

/* --- Bewegung: Grundformen ---------------------------------------------- */
@keyframes auftakt { to { opacity: 1; transform: none; filter: none; } }
@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }
@keyframes drehen { to { transform: rotate(360deg); } }
@keyframes puls { 0% { transform: scale(.72); opacity: .7; } 100% { transform: scale(1.18); opacity: 0; } }
@keyframes schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes atmen { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: .95; transform: scale(1.06); } }
@keyframes blinken { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes laufband { to { transform: translateX(-50%); } }
@keyframes schimmer { to { background-position: -200% 50%; } }

/* Aufbau beim Scrollen — sanft, einmalig, in Varianten (data-auf) */
.zeigen { opacity: 0; transform: translateY(16px); transition: opacity var(--tempo-lang) var(--kurve), transform var(--tempo-lang) var(--kurve), filter var(--tempo-lang) var(--kurve); }
.zeigen[data-auf="links"] { transform: translateX(-24px); }
.zeigen[data-auf="rechts"] { transform: translateX(24px); }
.zeigen[data-auf="skala"] { transform: scale(.94) translateY(8px); }
.zeigen[data-auf="unschaerfe"] { transform: none; filter: blur(10px); }
.zeigen.sichtbar { opacity: 1; transform: none; filter: none; }
.zeigen[data-verzug="1"] { transition-delay: .08s } .zeigen[data-verzug="2"] { transition-delay: .16s }
.zeigen[data-verzug="3"] { transition-delay: .24s } .zeigen[data-verzug="4"] { transition-delay: .32s }
/* Nach dem Aufbau übernimmt wieder das kurze Tempo (Überfahren) */
.zeigen.fertig { transition: transform var(--tempo) var(--kurve), box-shadow var(--tempo), border-color var(--tempo); transition-delay: 0s; }

/* --- Kopfzeile ----------------------------------------------------------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: rgba(13, 0, 32, .55);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--kante);
  transition: background var(--tempo), box-shadow var(--tempo);
}
.kopf.fest { background: rgba(13, 0, 32, .86); box-shadow: 0 8px 30px rgba(0, 0, 20, .45); }
/* Fortschrittslinie: wächst mit dem Scrollen (--fortschritt setzt das Skript) */
.kopf::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: linear-gradient(90deg, var(--violett), var(--violett-hell)); transform-origin: 0 50%;
  transform: scaleX(var(--fortschritt, 0)); box-shadow: 0 0 12px var(--violett-hell); }
.kopf__innen { max-width: var(--breite); margin: 0 auto; padding: var(--s-3) var(--s-5);
  display: flex; align-items: center; gap: var(--s-5); }
.marke { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; color: var(--text); }
.marke img { width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 1px var(--kante-stark), 0 0 18px rgba(124, 58, 237, .45); }
.marke__name { font-weight: 600; font-size: var(--text-l); letter-spacing: -.012em; line-height: 1; }
.marke__name span { color: var(--violett-hell); }
.marke__zusatz { display: block; font-size: var(--text-s); color: var(--text-neben); font-weight: 400; line-height: 1.2; letter-spacing: 0; }
.nav { order: 2; margin-left: auto; display: flex; align-items: center; gap: var(--s-1); }
.nav a { position: relative; color: var(--text-lauf); text-decoration: none; padding: var(--s-2) var(--s-3); border-radius: var(--r-klein);
  font-size: var(--text-s); font-weight: 600; transition: color var(--tempo), background var(--tempo); }
.nav a::after { content: ""; position: absolute; left: var(--s-3); right: var(--s-3); bottom: 2px; height: 1px;
  background: var(--violett-hell); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--tempo) var(--kurve); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.kopf .sprache { order: 3; }
.kopf .hilfe { order: 4; }

/* Sprachwechsel: die drei Sprachen sichtbar nebeneinander, keine Flaggen */
.sprache { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: var(--r-pille);
  border: 1px solid var(--kante-stark); background: rgba(13, 0, 32, .55); }
.sprache button { border: 0; background: none; cursor: pointer; min-height: 36px; padding: var(--s-1) var(--s-3); border-radius: var(--r-pille);
  color: var(--text-neben); font: 600 var(--text-s)/1 var(--mono); letter-spacing: .08em;
  transition: background var(--tempo), color var(--tempo), box-shadow var(--tempo); }
.sprache button:hover { color: var(--text); background: var(--glas-20); }
.sprache button[aria-current="true"] { color: var(--text); background: var(--violett-voll); box-shadow: 0 0 16px rgba(124, 58, 237, .45); }
.sprache--voll button { font-family: 'Poppins', system-ui, sans-serif; letter-spacing: 0; min-height: 40px; padding: var(--s-2) var(--s-4); }
.nav__sprache { display: none; }
.fuss__sprache { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); }

/* --- Knöpfe -------------------------------------------------------------- */
.knopf {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-5); min-height: 44px;
  border-radius: var(--r-pille); border: 1px solid var(--violett);
  background: var(--glas-20); color: var(--text);
  font: 600 var(--text-s)/1 'Poppins', system-ui, sans-serif; text-decoration: none; cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .30);
  /* --tx/--ty: der magnetische Zug (Skript), dazu das Heben beim Überfahren */
  transform: translate(var(--tx, 0px), var(--ty, 0px));
  transition: transform var(--tempo) var(--kurve), background var(--tempo), box-shadow var(--tempo), border-color var(--tempo), color var(--tempo);
}
.knopf::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%);
  transform: translateX(-130%); transition: transform .9s var(--kurve); }
.knopf:hover { background: rgba(124, 58, 237, .40); color: var(--text); border-color: var(--kante-licht);
  transform: translate(var(--tx, 0px), calc(var(--ty, 0px) - 2px)); box-shadow: 0 8px 22px rgba(124, 58, 237, .30); }
.knopf:hover::after { transform: translateX(130%); }
.knopf:active { transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(.98); }
.knopf--voll { background: var(--verlauf); border-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(196, 181, 253, .30), 0 8px 24px rgba(124, 58, 237, .35); }
.knopf--voll:hover { background: var(--verlauf); box-shadow: inset 0 0 0 1px rgba(196, 181, 253, .55), 0 12px 32px rgba(124, 58, 237, .50); }
.knopf--orange { background: var(--orange); border-color: var(--orange); color: #14001E; box-shadow: 0 8px 24px rgba(246, 146, 30, .30); }
.knopf--orange:hover { background: #FFA53A; border-color: #FFA53A; color: #14001E; box-shadow: 0 12px 32px rgba(246, 146, 30, .45); }
.knopf--leise { background: transparent; border-color: var(--kante-stark); box-shadow: none; }
.knopf--leise:hover { background: var(--glas-15); }
.knopf svg { width: 18px; height: 18px; flex: none; }
.kopf .menue-knopf { display: none; }

/* Hinweis zum Knopf: erscheint erst beim Überfahren oder per Tastatur (Fokus) */
.tipps { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tipp { position: relative; display: inline-block; }
.tipp__text { position: absolute; left: 0; bottom: calc(100% + var(--s-2)); z-index: 5; width: max-content; max-width: min(300px, calc(100vw - 80px));
  padding: var(--s-3) var(--s-4); border-radius: var(--r-klein); border: 1px solid var(--kante-stark);
  background: rgba(13, 0, 32, .96); color: var(--text-lauf); font-size: var(--text-s); line-height: 1.5; text-align: left;
  box-shadow: var(--schatten-hoch); opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity var(--tempo) var(--kurve), transform var(--tempo) var(--kurve), visibility 0s var(--tempo); }
.tipp__text::after { content: ""; position: absolute; top: 100%; left: var(--s-5); border: 6px solid transparent; border-top-color: var(--kante-stark); }
.tipp:hover .tipp__text, .tipp:focus-within .tipp__text { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
/* Ohne Zeiger (Touch) gibt es kein Überfahren: der Hinweis steht dann klein unter dem Knopf */
@media (hover: none) {
  .tipp { display: block; }
  .tipp__text { position: static; width: auto; max-width: none; margin-top: var(--s-2); padding: 0; border: 0; background: none; box-shadow: none;
    opacity: 1; visibility: visible; transform: none; color: var(--text-neben); }
  .tipp__text::after { display: none; }
}

/* --- Abschnitte ---------------------------------------------------------- */
.abschnitt { padding: var(--s-9) 0; position: relative; }
.abschnitt--eng { padding: var(--s-8) 0; }
.eng { max-width: var(--breite); margin: 0 auto; padding: 0 var(--s-5); }
/* Kopf eines Abschnitts: Nummer in Mono, Haarlinie zeichnet sich von links */
.kopfzeile { position: relative; max-width: 640px; margin-bottom: var(--s-7); padding-top: var(--s-5); }
.kopfzeile::before { content: ""; position: absolute; top: 0; left: 0; width: 96px; height: 1px;
  background: linear-gradient(90deg, var(--violett-hell), transparent); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 1s var(--kurve) .1s; }
.kopfzeile.sichtbar::before, .kopfzeile.auftakt::before { transform: none; }
.kopfzeile h2 { margin-bottom: var(--s-3); }
.nr { display: inline-block; font-family: var(--mono); font-size: var(--text-s); letter-spacing: .16em; color: var(--text-neben); margin-bottom: var(--s-3); }
.nr::before { content: "/ "; color: var(--violett); }
.ueberzeile { display: inline-block; font-size: var(--text-s); letter-spacing: .12em; text-transform: uppercase;
  color: var(--violett-hell); font-weight: 600; margin-bottom: var(--s-3); }

/* --- Karten (Glasebene) -------------------------------------------------- */
.karte {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(124, 58, 237, .18), rgba(124, 58, 237, .10));
  border: 1px solid var(--kante); border-radius: var(--r-karte);
  padding: var(--s-6) var(--s-5);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--schatten), inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: transform var(--tempo) var(--kurve), box-shadow var(--tempo), border-color var(--tempo);
}
/* Die leuchtende Kante oben links — eine Haarlinie, kein Schatten */
.karte::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, var(--kante-licht), transparent 38%, transparent 62%, rgba(124, 58, 237, .35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .6; transition: opacity var(--tempo); }
/* Kein Lichtpunkt mehr, der dem Zeiger folgt (entfernt 13.09.2026 auf Wunsch von OctaCore) */
.karte:hover::before { opacity: 1; }
.karte > * { position: relative; z-index: 1; }
.karte--hoch { background: linear-gradient(180deg, rgba(124, 58, 237, .28), rgba(124, 58, 237, .16)); }
.karte--hebt:hover { transform: translateY(-4px); box-shadow: var(--schatten-hoch), 0 0 0 1px rgba(196, 181, 253, .15), inset 0 1px 0 rgba(255, 255, 255, .08); }
.karte h3 { margin-bottom: var(--s-3); }
.karte p + .knopf, .karte ul + .knopf { margin-top: var(--s-5); }
.raster { display: grid; gap: var(--s-5); }
.raster--3 { grid-template-columns: repeat(3, 1fr); }
.raster--2 { grid-template-columns: repeat(2, 1fr); }
.raster--auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.raster--1-2 { grid-template-columns: 1fr 2fr; align-items: start; }
.symbol { width: 48px; height: 48px; border-radius: var(--r-klein); display: grid; place-items: center; margin-bottom: var(--s-4);
  background: linear-gradient(145deg, rgba(124, 58, 237, .40), rgba(124, 58, 237, .12));
  border: 1px solid rgba(196, 181, 253, .25); color: var(--violett-hell);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 24px rgba(124, 58, 237, .25);
  transition: transform var(--tempo) var(--kurve), box-shadow var(--tempo); }
.symbol svg { width: 24px; height: 24px; }
.karte:hover .symbol { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 32px rgba(124, 58, 237, .45); }

/* --- Bühne --------------------------------------------------------------- */
.buehne { position: relative; padding: var(--s-8) 0 var(--s-9); overflow: hidden; }
.buehne__innen { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--s-8); align-items: center; }
.buehne h1 { margin: var(--s-3) 0 var(--s-5); max-width: 21ch; }
.buehne .unter { font-size: var(--text-l); color: var(--text-neben); max-width: 44ch; margin-bottom: var(--s-6); }
.buehne__knoepfe { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-6); }
/* Statuszeile: Ort mit lebendem Punkt */
.status { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-3) var(--s-1) var(--s-2);
  border: 1px solid var(--kante-stark); border-radius: var(--r-pille); background: rgba(13, 0, 32, .5);
  font-family: var(--mono); font-size: var(--text-s); letter-spacing: .08em; color: var(--text-lauf); }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--violett-hell);
  box-shadow: 0 0 10px var(--violett-hell); animation: blinken 2.4s ease-in-out infinite; }

/* Wörter der Überschrift steigen versetzt auf (Skript teilt in .wort) */
.wort { display: inline-block; opacity: 0; transform: translateY(.5em); animation: auftakt .8s var(--kurve) forwards;
  animation-delay: calc(.2s + var(--i, 0) * .055s); }
.wort--akzent { background: linear-gradient(90deg, var(--violett-hell), #fff 45%, var(--violett-hell));
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: auftakt .8s var(--kurve) forwards, schimmer 3s linear 1.4s 1 forwards; }

/* Das Logo als Instrument: Ringe, Pulse, ein Satellit */
.buehne__bild { position: relative; display: grid; place-items: center; }
.reaktor { position: relative; width: min(380px, 70vw); aspect-ratio: 1; display: grid; place-items: center; }
.reaktor::before { content: ""; position: absolute; inset: 12%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(124, 58, 237, .45), transparent 70%); filter: blur(30px); animation: atmen 6s ease-in-out infinite; }
.reaktor img { width: 62%; border-radius: 50%; box-shadow: 0 0 0 1px var(--kante-stark), 0 30px 80px rgba(124, 58, 237, .30);
  animation: schweben 7s ease-in-out infinite; }
.reaktor__ring { position: absolute; border-radius: 50%; pointer-events: none; }
.reaktor__ring--1 { inset: 0; border: 1px dashed rgba(196, 181, 253, .35); animation: drehen 48s linear infinite; }
.reaktor__ring--2 { inset: 8%; border: 1px solid rgba(124, 58, 237, .25); border-top-color: var(--violett-hell); border-right-color: transparent;
  animation: drehen 22s linear infinite reverse; }
.reaktor__ring--3 { inset: 15%; border: 1px solid var(--kante); }
.reaktor__puls { position: absolute; inset: 15%; border-radius: 50%; border: 1px solid rgba(196, 181, 253, .55); pointer-events: none;
  animation: puls 4.5s var(--kurve) infinite; }
.reaktor__puls--2 { animation-delay: 2.25s; }
.reaktor__satellit { position: absolute; inset: 0; animation: drehen 14s linear infinite; pointer-events: none; }
.reaktor__satellit::before { content: ""; position: absolute; top: -4px; left: 50%; width: 9px; height: 9px; margin-left: -4px; border-radius: 50%;
  background: var(--violett-hell); box-shadow: 0 0 14px 3px var(--violett-hell); }
.reaktor__marke { position: absolute; font-family: var(--mono); font-size: var(--text-s); letter-spacing: .16em; color: var(--text-neben); }
.reaktor__marke--o { top: -4px; right: 4%; }
.reaktor__marke--u { bottom: -4px; left: 4%; }

/* Gestaffelter Aufbau beim Laden — nur die Bühne */
.auftakt > * { opacity: 0; transform: translateY(14px); animation: auftakt .7s var(--kurve) forwards; }
.auftakt > :nth-child(1) { animation-delay: .05s } .auftakt > :nth-child(2) { animation-delay: .15s }
.auftakt > :nth-child(3) { animation-delay: .28s } .auftakt > :nth-child(4) { animation-delay: .40s }
.auftakt > :nth-child(5) { animation-delay: .52s } .auftakt > :nth-child(6) { animation-delay: .64s }
.auftakt > h1 { opacity: 1; transform: none; animation: none; }   /* die Wörter kommen einzeln */
.buehne__bild { opacity: 0; transform: scale(.92); animation: auftakt 1.2s var(--kurve) .3s forwards; }

/* --- Laufband: die Leistungen als Zeile zwischen den Abschnitten ---------- */
.laufband { overflow: hidden; border-top: 1px solid var(--kante); border-bottom: 1px solid var(--kante); padding: var(--s-3) 0;
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.laufband__spur { display: flex; width: max-content; animation: laufband 48s linear infinite; }
.laufband:hover .laufband__spur { animation-play-state: paused; }
.laufband span { display: inline-flex; align-items: center; gap: var(--s-6); padding-right: var(--s-6); white-space: nowrap;
  font-size: var(--text-s); letter-spacing: .14em; text-transform: uppercase; color: var(--text-neben); }
.laufband span::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--violett); }

/* --- Leistungen: Kurzfassung sichtbar, Volltext klappt auf ---------------- */
.leistung { display: flex; flex-direction: column; }
.leistung__kurz { color: var(--text-neben); flex: 1; }
.klappe { margin-top: var(--s-4); }
.klappe__knopf { display: inline-flex; align-items: center; gap: var(--s-2); background: none; border: 0; padding: var(--s-2) 0;
  color: var(--violett-hell); font: 600 var(--text-s)/1 'Poppins', system-ui, sans-serif; cursor: pointer; transition: color var(--tempo); }
.klappe__knopf:hover { color: var(--text); }
.klappe__knopf svg { width: 16px; height: 16px; transition: transform var(--tempo) var(--kurve); }
.klappe__knopf[aria-expanded="true"] svg { transform: rotate(90deg); }
.klappe__inhalt { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--kurve); }
.klappe__inhalt > div { overflow: hidden; min-height: 0; }
.klappe__knopf[aria-expanded="true"] + .klappe__inhalt { grid-template-rows: 1fr; }
.klappe__inhalt ul { margin-top: var(--s-3); }
.klappe__inhalt ul ul { margin-top: var(--s-2); list-style: none; padding-left: var(--s-3); }

/* --- Bildkarten (typische Fälle) ---------------------------------------- */
.fall { padding: 0; display: flex; flex-direction: column; }
.fall__bild { overflow: hidden; position: relative; }
.fall__bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(13, 0, 32, .85)); }
.fall img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; transition: transform .9s var(--kurve); }
.fall:hover img { transform: scale(1.05); }
.fall__text { padding: var(--s-5); display: flex; flex-direction: column; flex: 1; }
.fall__text p { color: var(--text-neben); flex: 1; margin: var(--s-2) 0 var(--s-4); }

/* --- Preise: kein heller Kasten, Zeilen im Wechsel ------------------------ */
.preise { width: 100%; border-collapse: collapse; }
.preise th, .preise td { padding: var(--s-3) var(--s-4); text-align: left; border-bottom: 1px solid var(--kante); vertical-align: top; }
.preise th { color: var(--text); font-weight: 600; font-size: var(--text-s); letter-spacing: .1em; text-transform: uppercase; }
.preise tbody tr { transition: background var(--tempo); }
.preise tbody tr:nth-child(odd) { background: var(--zeile); }
.preise tbody tr:hover { background: var(--glas-15); }
.preise td:last-child, .preise th:last-child { text-align: right; white-space: nowrap; color: var(--violett-hell); font-weight: 600; font-variant-numeric: tabular-nums; }
.preise td:last-child.anfrage { color: var(--text-neben); font-weight: 400; font-size: var(--text-s); }
.hinweis { margin-top: var(--s-5); padding: var(--s-4) var(--s-5); border-left: 2px solid var(--violett-hell); background: var(--glas-15);
  border-radius: 0 var(--r-klein) var(--r-klein) 0; color: var(--text-neben); }
.hinweis + .hinweis { margin-top: var(--s-3); }

/* --- Person -------------------------------------------------------------- */
.person { display: grid; grid-template-columns: 220px 1fr; gap: var(--s-6); align-items: start; }
.platzhalter { aspect-ratio: 1; border-radius: var(--r-karte); border: 2px dashed var(--violett-hell); display: grid; place-items: center;
  text-align: center; padding: var(--s-4); color: var(--violett-hell); font-style: italic; font-size: var(--text-s); }
.person__bild { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-karte);
  border: 2px solid var(--violett); box-shadow: 0 0 0 1px var(--kante-licht), 0 0 24px rgba(124, 58, 237, .35), var(--schatten); }
.person ul { columns: 2; column-gap: var(--s-5); margin: var(--s-4) 0; }
.person li { break-inside: avoid; }

/* --- Kontakt & Standort --------------------------------------------------- */
.kontakt { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.kontakt__zeile { display: flex; gap: var(--s-3); align-items: flex-start; margin: var(--s-3) 0; }
.kontakt__zeile svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--violett-hell); }
.kontakt__wege { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.trenner { border: 0; border-top: 1px solid var(--kante); margin: var(--s-5) 0; }

/* Landkarte: lädt sofort (seit 13.09.2026), füllt die Karte in der Höhe */
.kontakt__karte { display: flex; flex-direction: column; }
.landkarte { flex: 1; display: flex; flex-direction: column; min-height: 420px; }
.landkarte .einwilligung--geladen { flex: 1; display: flex; flex-direction: column; }
.landkarte iframe { flex: 1; display: block; width: 100%; min-height: 380px; border: 0; }

/* Datenrettung: Partnerzeile schmal, Formular in voller Breite und deutlich höher */
.dp-partner { display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: center; }
.dp-partner__text { flex: 1 1 280px; margin: 0; }
.dp-formular { margin-top: var(--s-5); padding: var(--s-4); }
.einwilligung--gross { min-height: 720px; }
.einwilligung--gross.einwilligung--geladen iframe { height: 1000px; min-height: 1000px; }

/* Einwilligung vor Fremdinhalt (Karte, Partnerformular). Die Karte merkt
   sich die Zustimmung im Browser und lädt danach sofort. */
.einwilligung { min-height: 320px; display: grid; place-items: center; text-align: center; border-radius: var(--r-karte);
  border: 1px dashed var(--kante-stark); background: rgba(0, 0, 20, .35); padding: var(--s-5); }
.einwilligung p { color: var(--text-neben); max-width: 40ch; margin-bottom: var(--s-4); }
.einwilligung iframe, .einwilligung--geladen iframe { width: 100%; height: 100%; min-height: 420px; border: 0; border-radius: var(--r-karte); }
.einwilligung--geladen { padding: 0; border: 0; background: none; display: block; }
.einwilligung__widerruf { display: block; margin-top: var(--s-2); font-size: var(--text-s); color: var(--text-neben); text-align: right; }
.landkarte .einwilligung { height: 100%; }

/* Formular */
.formular label { display: block; font-size: var(--text-s); font-weight: 600; color: var(--text); margin: var(--s-4) 0 var(--s-2); }
.formular input[type="text"], .formular input[type="email"], .formular textarea {
  width: 100%; padding: var(--s-3) var(--s-4); border-radius: var(--r-klein); border: 1px solid var(--kante-stark);
  background: rgba(0, 0, 20, .45); color: var(--text); font: inherit; transition: border-color var(--tempo), box-shadow var(--tempo); }
.formular input:hover, .formular textarea:hover { border-color: var(--kante-licht); }
.formular input:focus, .formular textarea:focus { outline: 2px solid var(--violett-hell); outline-offset: 1px; border-color: transparent; box-shadow: 0 0 24px rgba(124, 58, 237, .25); }
.formular textarea { resize: vertical; min-height: 140px; }
.formular .haken { display: flex; gap: var(--s-3); align-items: flex-start; margin: var(--s-4) 0 var(--s-5); font-size: var(--text-s); color: var(--text-neben); }
.formular .haken input { margin-top: 4px; accent-color: var(--violett); width: 18px; height: 18px; flex: none; }
.formular .haken label { margin: 0; font-weight: 400; color: var(--text-neben); }
.formular__status { margin-top: var(--s-3); min-height: 1.6em; color: var(--violett-hell); }
.formular__status.fehler { color: var(--orange); }

/* --- Galerie ------------------------------------------------------------- */
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-3); }
.galerie button { position: relative; padding: 0; border: 1px solid var(--kante); background: none; border-radius: var(--r-klein); overflow: hidden; cursor: pointer;
  transition: transform var(--tempo) var(--kurve), box-shadow var(--tempo), border-color var(--tempo); }
.galerie button::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(13, 0, 32, .7)); opacity: 0; transition: opacity var(--tempo); }
.galerie button:hover { transform: translateY(-3px); box-shadow: var(--schatten); border-color: var(--kante-licht); }
.galerie button:hover::after { opacity: 1; }
.galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .9s var(--kurve); }
.galerie button:hover img { transform: scale(1.06); }
.leuchtkasten { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 20, .92); display: none; place-items: center; padding: var(--s-5);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.leuchtkasten[open] { display: grid; animation: einblenden .25s var(--kurve); }
.leuchtkasten img { max-width: min(1200px, 92vw); max-height: 82vh; width: auto; height: auto; border-radius: var(--r-klein); box-shadow: var(--schatten-hoch), 0 0 0 1px var(--kante-stark); }
.leuchtkasten__zaehler { position: absolute; left: 50%; bottom: var(--s-5); transform: translateX(-50%); color: var(--text-neben); font-size: var(--text-s); font-family: var(--mono); letter-spacing: .08em; }
.leuchtkasten__knopf { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--kante-stark);
  background: var(--glas-25); color: var(--text); display: grid; place-items: center; cursor: pointer; transition: background var(--tempo), border-color var(--tempo); }
.leuchtkasten__knopf svg { width: 22px; height: 22px; }
.leuchtkasten__knopf:hover { background: var(--violett); border-color: var(--kante-licht); }
.leuchtkasten__knopf--zu { top: var(--s-5); right: var(--s-5); }
.leuchtkasten__knopf--zurueck { left: var(--s-5); top: 50%; transform: translateY(-50%); }
.leuchtkasten__knopf--vor { right: var(--s-5); top: 50%; transform: translateY(-50%); }

/* --- Rechtstexte ---------------------------------------------------------- */
.rechtstext { max-width: 72ch; }
.rechtstext p { margin: var(--s-4) 0; }
.rechtstext h2 { margin-bottom: var(--s-5); }
/* Datenschutzerklärung als Fließtext: Abschnitte mit Haarlinie */
.rechtstext__inhalt { margin-top: var(--s-6); }
.rechtstext__inhalt h2 { font-size: var(--text-l); margin: var(--s-7) 0 var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--kante); }
.rechtstext__inhalt h3 { font-size: var(--text-m); margin: var(--s-5) 0 var(--s-2); }
.rechtstext__inhalt ul { margin: var(--s-3) 0; }
.rechtstext__inhalt a { word-break: break-word; }
.pdfs { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }

/* --- Partner: FTFM Designs (Werbung, wie OctaCore auf ftfm-designs.de) ---- */
/* Gold ist FTFMs Farbe und kommt nur hier vor — für den Namen und die Kachel. */
.partner { --gold: #E8C547; --gold-hell: #F5D96A; }
.partner__innen { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--s-8); align-items: center;
  padding-top: var(--s-7); border-top: 1px solid var(--kante); }
.partner h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); margin: var(--s-3) 0 var(--s-4); letter-spacing: -.012em; }
.partner__gold { color: var(--gold); }
.partner__text { color: var(--text-neben); max-width: 52ch; margin-bottom: var(--s-5); }
.partner__liste { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-5); }
.partner__liste li { margin: 0; display: flex; align-items: center; gap: var(--s-3); font-size: var(--text-s); color: var(--text-lauf); }
.partner__liste svg { width: 16px; height: 16px; flex: none; color: var(--gold); }
.partner__karte { position: relative; display: flex; flex-direction: column; text-decoration: none; color: var(--text-lauf); overflow: hidden;
  background: #000 radial-gradient(ellipse at 70% 15%, rgba(232, 197, 71, .18), transparent 60%);
  border: 1px solid rgba(232, 197, 71, .28); border-radius: var(--r-karte);
  box-shadow: var(--schatten), 0 0 40px rgba(232, 197, 71, .08);
  transition: transform var(--tempo) var(--kurve), border-color var(--tempo), box-shadow var(--tempo); }
.partner__karte:hover { transform: translateY(-4px); border-color: rgba(232, 197, 71, .65); color: var(--text-lauf);
  box-shadow: var(--schatten-hoch), 0 0 60px rgba(232, 197, 71, .16); }
.partner__karte img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.partner__karte > div { padding: var(--s-5); display: flex; flex-direction: column; flex: 1; }
.partner__name { font-weight: 600; font-size: var(--text-xl); letter-spacing: -.012em; line-height: 1; color: var(--text); }
.partner__name span { color: var(--gold); }
.partner__zusatz { font-size: var(--text-s); letter-spacing: .16em; text-transform: uppercase; color: var(--text-neben); margin: var(--s-2) 0 var(--s-4); }
.partner__karte p { font-size: var(--text-s); color: var(--text-neben); flex: 1; }
.partner__knopf { display: inline-flex; align-items: center; gap: var(--s-2); align-self: flex-start; margin-top: var(--s-5); min-height: 44px;
  padding: var(--s-3) var(--s-5); border-radius: var(--r-pille); border: 1px solid rgba(232, 197, 71, .5); color: var(--gold);
  font: 600 var(--text-s)/1 'Poppins', system-ui, sans-serif; transition: background var(--tempo), border-color var(--tempo), color var(--tempo); }
.partner__knopf svg { width: 16px; height: 16px; transition: transform var(--tempo) var(--kurve); }
.partner__karte:hover .partner__knopf { background: rgba(232, 197, 71, .12); border-color: var(--gold); color: var(--gold-hell); }
.partner__karte:hover .partner__knopf svg { transform: translate(2px, -2px); }

/* --- Partnerkarten auf „Über uns" (DatenPhoenix, FTFM Designs) ----------- */
.partnerkarte { display: flex; flex-direction: column; align-items: flex-start; }
.partnerkarte p { flex: 1; margin-bottom: var(--s-5); }
.partnerkarte__logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 96px;
  margin: var(--s-2) 0 var(--s-5); border-radius: var(--r-klein); overflow: hidden; }
.partnerkarte__logo a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: var(--s-3) var(--s-5); }
.partnerkarte__logo--hell { background: #fff; }
/* FTFM: eigenes Breitformat-Bild (1100 × 250), füllt die Kachel ganz */
.partnerkarte__logo--dunkel { background: #000; border: 1px solid rgba(232, 197, 71, .35); height: auto; aspect-ratio: 22 / 5; min-height: 80px; }
.partnerkarte__logo--dunkel a { padding: 0; }
.partnerkarte__logo--dunkel img { width: 100%; height: 100%; object-fit: contain; }

/* --- Fußbereich ---------------------------------------------------------- */
.fuss { position: relative; padding: var(--s-8) 0 var(--s-6); margin-top: var(--s-9); font-size: var(--text-s); color: var(--text-neben); }
.fuss::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--violett-hell), transparent); opacity: .5; }
.fuss__raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s-6); }
.fuss h3 { font-size: var(--text-s); text-transform: uppercase; letter-spacing: .12em; margin-bottom: var(--s-3); color: var(--text); }
.fuss ul { list-style: none; padding: 0; }
.fuss li { margin: var(--s-2) 0; }
.fuss a { color: var(--text-lauf); text-decoration: none; display: inline-flex; align-items: center; gap: var(--s-2); transition: color var(--tempo); }
.fuss a:hover { color: var(--text); text-decoration: underline; }
.fuss a svg { width: 18px; height: 18px; color: var(--violett-hell); }
.fuss__partner { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-3); }
.fuss__partner img { height: 36px; width: auto; background: #fff; padding: 4px 8px; border-radius: 6px; }
.fuss__partner--ftfm img { background: #000; padding: 0; height: 40px; border-radius: 6px; border: 1px solid rgba(232, 197, 71, .35); }
.fuss__unten { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--kante); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); justify-content: space-between; }
.fuss__ftfm a { color: #E8C547; font-weight: 600; }
.fuss__ftfm a:hover { color: #F5D96A; }

/* --- Feste Anrufleiste auf dem Handy ------------------------------------- */
.anrufleiste { display: none; }

/* --- Handy und Tablet ---------------------------------------------------- */
@media (max-width: 1000px) {
  .raster--3 { grid-template-columns: 1fr 1fr; }
  .buehne__innen { grid-template-columns: 1fr; }
  .buehne__bild { order: -1; }
  .reaktor { width: min(260px, 60vw); }
  .fuss__raster { grid-template-columns: 1fr 1fr; }
  .partner__innen { grid-template-columns: 1fr; gap: var(--s-6); }
}
@media (max-width: 900px) {
  .kopf .menue-knopf { display: inline-flex; order: 3; }
  .kopf .sprache { order: 2; margin-left: auto; }
  .kopf .hilfe { display: none; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch;
    background: rgba(13, 0, 32, .97); border-bottom: 1px solid var(--kante-stark); padding: var(--s-4) var(--s-5) var(--s-5); gap: var(--s-1);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .nav.offen { display: flex; }
  .nav.offen a { opacity: 0; transform: translateX(-12px); animation: auftakt .35s var(--kurve) forwards; }
  .nav.offen a:nth-child(1) { animation-delay: .03s } .nav.offen a:nth-child(2) { animation-delay: .08s }
  .nav.offen a:nth-child(3) { animation-delay: .13s } .nav.offen a:nth-child(4) { animation-delay: .18s }
  .nav.offen a:nth-child(5) { animation-delay: .23s }
  .nav a { padding: var(--s-3) var(--s-4); font-size: var(--text-m); }
  .nav a::after { display: none; }
  .nav__sprache { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--kante); }
  .nav__sprache-titel { font-size: var(--text-s); color: var(--text-neben); }
}
@media (max-width: 700px) {
  .kopf .marke__zusatz { display: none; }
  .kopf__innen { gap: var(--s-3); }
  .kopf .menue-knopf { padding-inline: var(--s-4); }
  .kopf .sprache button { padding: var(--s-1) var(--s-2); min-height: 40px; }
  .abschnitt { padding: var(--s-8) 0; }
  .abschnitt--eng { padding: var(--s-7) 0; }
  .kopfzeile { margin-bottom: var(--s-6); }
  /* Bühne auf dem Handy: erst Titel und Knöpfe, dann das Logo — die Wege zur Hilfe bleiben im ersten Bild */
  .buehne { padding: var(--s-6) 0 var(--s-7); }
  .buehne__innen { gap: var(--s-6); }
  .buehne__bild { order: 1; }
  .buehne h1 { margin-top: var(--s-4); }
  .buehne .unter { margin-bottom: var(--s-5); }
  .buehne__knoepfe { margin-bottom: 0; }
  .buehne__knoepfe .knopf { flex: 1 1 100%; }
  .reaktor { width: min(200px, 54vw); }
  .reaktor__marke { display: none; }
  /* Bildkarten flacher, die Seite wird kürzer */
  .fall img { aspect-ratio: 16 / 9; }
  /* Fingerfreundliche Ziele */
  .klappe__knopf { min-height: 44px; }
  .kontakt__wege .knopf { flex: 1 1 calc(50% - var(--s-2)); }
  .fuss__unten { justify-content: flex-start; }
  .raster--3, .raster--2, .raster--1-2 { grid-template-columns: 1fr; }
  .person { grid-template-columns: 1fr; }
  .platzhalter, .person__bild { max-width: 220px; }
  .person ul { columns: 1; }
  .kontakt { grid-template-columns: 1fr; }
  .partner__liste { grid-template-columns: 1fr; }
  .fuss__raster { grid-template-columns: 1fr; }
  .preise th, .preise td { padding: var(--s-3) var(--s-2); font-size: var(--text-s); }
  .anrufleiste { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; gap: var(--s-2); padding: var(--s-2) var(--s-3);
    padding-bottom: max(var(--s-2), env(safe-area-inset-bottom));
    background: rgba(13, 0, 32, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--kante-stark); }
  .anrufleiste .knopf { flex: 1; padding-inline: var(--s-3); }
  body { padding-bottom: 72px; }
  .fuss { padding-bottom: var(--s-8); }
  .leuchtkasten__knopf--zurueck,
  .leuchtkasten__knopf--vor {
    top: auto;
    bottom: calc(var(--s-5) + 72px);
    transform: none;
  }

  .leuchtkasten__zaehler {
    bottom: calc(var(--s-5) + 92px);
  }
}
/* Sehr schmale Handys: Logo, Sprachwahl und Menü brauchen die ganze Zeile */
@media (max-width: 480px) {
  .kopf .marke__name { display: none; }
  .kopf .marke { flex: none; }
  /* Lange Einzelwörter („Datenschutzerklärung") passen so in eine Zeile */
  .rechtstext h1 { font-size: 2rem; }
}

/* --- Wer Bewegung nicht verträgt, bekommt sofort die fertige Seite -------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; }
  .auftakt > *, .buehne__bild, .wort, .nav.offen a { animation: none; opacity: 1; transform: none; filter: none; }
  .wort--akzent { color: var(--violett-hell); background: none; -webkit-text-fill-color: currentColor; }
  .zeigen { opacity: 1; transform: none; filter: none; transition: none; }
  .kopfzeile::before { transform: none; transition: none; }
  .reaktor__ring, .reaktor__satellit, .reaktor__puls, .reaktor img, .reaktor::before, .status::before { animation: none; }
  .reaktor__puls { display: none; }
  .laufband__spur { animation: none; }
  .karte, .knopf, .galerie button, .klappe__inhalt, .klappe__knopf svg, .fall img, .galerie img, .symbol { transition: none; }
  .karte--hebt:hover, .knopf:hover, .galerie button:hover, .partner__karte:hover { transform: none; }
  .fall:hover img, .galerie button:hover img { transform: none; }
  .knopf::after { display: none; }
  .tipp__text { transition: none; }
}