/* rufdigital - eine Seite, keine externen Dateien, kein Build-Schritt.

   Dieser Entwurf kommt von einem anderen Agenten und wurde fuer rufdigital
   uebernommen: eigene Markenfarbe statt der Ursprungsfarbe, Google Fonts
   durch selbst gehostete Dateien ersetzt (siehe schriften/), und alle
   Inline-Styles des Entwurfs in Klassen ueberfuehrt - genau wie im Rest
   des Projekts liegt alles Aussehen hier, nicht im HTML.

   Bewusst ohne Google Fonts: eingebunden von Googles Servern gibt das in
   Deutschland Abmahnungen, weil dabei IP-Adressen an Google gehen. Die
   Schriften liegen deshalb unter schriften/ (SIL Open Font License, das
   erlaubt Selbst-Hosten ausdruecklich - Lizenztexte liegen daneben). */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("schriften/bricolage-grotesque-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("schriften/bricolage-grotesque-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("schriften/geist-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("schriften/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("schriften/geist-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("schriften/geist-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Bewusst nur ein dunkles Farbschema - die Flaechen und Farben dieses
     Entwurfs sind fuer Dunkel gebaut, eine helle Zweitfassung saehe an
     jeder Ecke behelfsmaessig aus. Kein prefers-color-scheme mehr noetig. */
  --grund: #09090b;
  --flaeche: #121215;
  --flaeche-2: #18181d;
  --flaeche-3: #1c1c21;
  --text: #f5f5f4;
  --text-2: #a3a3ad;
  --leise: #8b8b95;
  --linie: #232328;
  --linie-hell: #3a3a40;
  --akzent: #4c82ff;
  --akzent-hover: #6b97ff;
  --akzent-weich: rgba(76, 130, 255, 0.14);
  --schatten: 0 30px 80px -20px rgba(0, 0, 0, 0.7);
  --rund: 22px;
  --schrift: 'Geist', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --anzeige: 'Bricolage Grotesque', 'Geist', -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

a { color: inherit; text-decoration: none; }

.breite {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 48px;
}
@media (max-width: 880px) { .breite { padding: 0 20px; } }

h1, h2, h3 {
  font-family: var(--anzeige);
  letter-spacing: -0.025em;
  margin: 0;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--akzent);
  margin-bottom: 18px;
}
.untertitel { margin: 0; font-size: 19px; line-height: 1.6; color: var(--text-2); }

/* ---------------- Knoepfe ---------------- */
.knoepfe { display: flex; gap: 14px; flex-wrap: wrap; }
.knopf {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.knopf-voll { background: var(--akzent); color: #09090b; }
.knopf-voll:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -10px var(--akzent); }
.knopf-leer { border: 1.5px solid var(--linie-hell); color: var(--text); }
.knopf-leer:hover { transform: translateY(-2px); border-color: var(--text); }

/* ---------------- Kopf ---------------- */
.kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(9, 9, 11, 0.8);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linie);
}
.kopf .breite {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.marke { display: flex; align-items: center; gap: 10px; }
.marke svg { width: 36px; height: 36px; flex: none; }
.marke b {
  font-family: var(--anzeige);
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.025em;
}
.marke span { font-weight: 500; color: var(--text-2); }

.nav { display: flex; align-items: center; gap: 30px; }
.nav a { font-size: 15px; color: var(--text-2); padding: 12px 4px; }
.nav a:hover { color: var(--text); }
@media (max-width: 780px) { .nav .nav-weg { display: none; } }
.kopf .knopf-voll { min-height: 46px; padding: 0 22px; font-size: 15px; white-space: nowrap; }

/* Ein Wort, das nicht am Bindestrich umbrechen soll. */
.ganz { white-space: nowrap; }

/* ---------------- Buehne / Hero ---------------- */
.buehne { position: relative; padding: 70px 0 60px; overflow: hidden; }
/* Das Punktraster hinter der Ueberschrift: reine Zierde, treibt sehr
   langsam nach rechts unten. */
.buehne-raster { position: relative; }
.raster-hintergrund {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--linie) 1px, transparent 1px), linear-gradient(90deg, var(--linie) 1px, transparent 1px);
  background-size: 56px 56px;
  animation: raster-driften 40s linear infinite;
  -webkit-mask-image: radial-gradient(ellipse at 70% 35%, #000 15%, transparent 65%);
  mask-image: radial-gradient(ellipse at 70% 35%, #000 15%, transparent 65%);
}
@keyframes raster-driften { to { background-position: 56px 56px; } }

.abzeichen {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 13px; color: #c9c9cf; letter-spacing: 0.06em;
  padding: 8px 14px; margin-bottom: 30px; border: 1px solid var(--linie); border-radius: 999px;
  background: #111114;
}
.puls-punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--akzent); position: relative; flex: none; }
.puls-punkt::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--akzent); animation: pulsieren 2s ease-out infinite; }
@keyframes pulsieren { from { transform: scale(1); opacity: .7; } to { transform: scale(3.2); opacity: 0; } }
.buehne-raster {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}
@media (max-width: 980px) { .buehne-raster { grid-template-columns: minmax(0, 1fr); } }

.h1 {
  margin: 0 0 26px;
  font-size: clamp(38px, 6.2vw, 78px);
  line-height: 1;
  font-weight: 800;
}
.h1 .gedaempft { color: var(--leise); }

/* Das rotierende Wort: eine Scheibe Text, die senkrecht durchfaehrt. */
.dreh { display: inline-block; position: relative; height: 1.15em; overflow: hidden; vertical-align: bottom; }
.dreh-liste { display: flex; flex-direction: column; animation: drehen 16s cubic-bezier(.7, 0, .2, 1) infinite; }
.dreh-liste span { height: 1.15em; line-height: 1.15em; color: var(--akzent); }
@keyframes drehen {
  0%, 22% { transform: translateY(0); }
  25%, 47% { transform: translateY(-1.15em); }
  50%, 72% { transform: translateY(-2.3em); }
  75%, 97% { transform: translateY(-3.45em); }
  100% { transform: translateY(-4.6em); }
}

.vorspann { margin: 0 0 38px; max-width: 540px; font-size: 20px; line-height: 1.6; color: var(--text-2); }

.merkmale { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 40px; font-size: 14px; color: var(--text-2); }
.merkmale span { display: flex; align-items: center; gap: 8px; }
.merkmale svg { flex: none; }

/* Eintrittsanimation: einmal beim Laden, nicht scrollgebunden. */
.wort { display: inline-block; animation: wortEin 0.9s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes wortEin { from { opacity: 0; transform: translateY(0.5em); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.hoch { animation: hoch 0.9s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes hoch { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ---------------- Die Szene: Ringe, Telefon, schwebende Kacheln ---------------- */
.szene { position: relative; height: 700px; }
@media (max-width: 980px) { .szene { transform: scale(.82); transform-origin: top center; margin-bottom: -120px; } }

.ring-aussen {
  position: absolute; left: 50%; top: 50%;
  width: 560px; height: 560px; margin: -280px 0 0 -280px;
  border-radius: 50%; border: 1px dashed var(--linie-hell);
  animation: drehung 60s linear infinite;
}
.ring-innen {
  position: absolute; left: 50%; top: 50%;
  width: 420px; height: 420px; margin: -210px 0 0 -210px;
  border-radius: 50%; border: 1px solid var(--linie);
}
@keyframes drehung { to { transform: rotate(360deg); } }

.branchen {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  height: 32px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em;
  color: #c9c9cf;
}
.branchen span {
  position: absolute; left: 50%; top: 0; white-space: nowrap;
  transform: translateX(-50%); animation: branche-zeigen 16s infinite both;
}
@keyframes branche-zeigen { 0% { opacity: 0; } 3%, 22% { opacity: 1; } 25%, 100% { opacity: 0; } }

.telefon {
  position: absolute; left: 50%; top: 40px; margin-left: -150px;
  width: 300px; height: 620px; background: var(--flaeche-2);
  border-radius: 46px; padding: 11px; border: 1px solid var(--linie-hell);
  box-shadow: var(--schatten);
  animation: telefon-auftauchen 1.2s .3s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes telefon-auftauchen { from { opacity: 0; transform: translateY(60px) rotate(4deg); } to { opacity: 1; transform: none; } }
.bildschirm { position: relative; width: 100%; height: 100%; background: #0e0e11; border-radius: 36px; overflow: hidden; color: var(--text); }

/* Vier App-Ansichten, die sich per Uhrzeit abwechseln - reines CSS, alle
   vier laufen gleichzeitig, aber nur eine ist je Moment sichtbar. */
.ansicht {
  position: absolute; left: 0; right: 0; top: 0; bottom: 66px;
  padding: 34px 18px 0;
  animation: ansicht-zeigen 16s cubic-bezier(.2, .7, .2, 1) infinite both;
}
@keyframes ansicht-zeigen { 0% { opacity: 0; transform: translateX(24px); } 3%, 22% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; transform: translateX(-24px); } }
.ansicht-label { font-family: var(--mono); font-size: 10px; color: #9a9aa3; letter-spacing: 0.1em; }
.ansicht-titel { font-family: var(--anzeige); font-size: 23px; font-weight: 700; margin: 4px 0 18px; }
.ansicht-zeile {
  display: flex; align-items: center; gap: 10px; padding: 12px;
  border-radius: 14px; background: var(--flaeche-3); border: 1px solid var(--linie);
  margin-bottom: 8px; font-size: 13px;
  animation: zeile-rein 16s cubic-bezier(.2, .7, .2, 1) infinite both;
}
@keyframes zeile-rein { 0%, 1% { opacity: 0; transform: translateY(12px); } 5%, 100% { opacity: 1; transform: none; } }
.ansicht-zeile.frei { flex-direction: column; align-items: stretch; gap: 8px; }
.ansicht-zeile.frei .kopfzeile { display: flex; justify-content: space-between; align-items: center; }
.ansicht-zeile.gestrichelt { border-style: dashed; background: transparent; }
.ansicht-zeile.hervor { background: var(--text); color: #09090b; border-color: var(--text); }
.ansicht-zeile.aktion { background: var(--akzent); color: #09090b; border-color: transparent; }
.ansicht-zeit { width: 26px; }
.ansicht-zeit.breit { width: 42px; }
.ansicht-fuellt { flex-grow: 1; }
.ansicht-muted { color: #9a9aa3; }
.ansicht-fein { font-size: 12px; }
.pille {
  font-family: var(--mono); font-size: 10px; padding: 4px 8px;
  border-radius: 7px; background: var(--flaeche-3); color: #c9c9cf;
}
.pille.heute { background: var(--akzent); color: #09090b; }
.pille.erledigt { background: var(--akzent); color: #09090b; }

/* Der Wechsel zwischen zwei Zustaenden (Einstempeln -> Eingestempelt),
   uebereinandergelegt und per Uhrzeit ein- und ausgeblendet. */
.aktion-stapel { position: relative; height: 54px; margin-top: 14px; }
.aktion-stapel > * {
  position: absolute; inset: 0; border-radius: 16px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; font-size: 15px;
}
.aktion-vorher { background: var(--text); color: #09090b; animation: aktion-vorher 16s infinite both; }
.aktion-nachher { background: var(--akzent); color: #09090b; animation: aktion-nachher 16s infinite both; }
@keyframes aktion-vorher { 0%, 11% { opacity: 1; transform: none; } 12.5% { opacity: 1; transform: scale(.94); } 14%, 100% { opacity: 0; transform: scale(.94); } }
@keyframes aktion-nachher { 0%, 12.5% { opacity: 0; transform: scale(.9); } 15%, 100% { opacity: 1; transform: none; } }
.antipp {
  position: absolute; left: 50%; top: 50%; width: 30px; height: 30px;
  margin: -15px 0 0 -15px; border-radius: 50%; border: 2px solid #09090b;
  animation: antippen 16s ease-out infinite both;
}
@keyframes antippen { 0%, 11% { opacity: 0; transform: scale(.3); } 12% { opacity: 1; transform: scale(.6); } 17%, 100% { opacity: 0; transform: scale(3.5); } }

/* Zwei Zustaende uebereinander (z.B. "IN ARBEIT" -> "ERLEDIGT"). */
.stapelgitter { display: grid; }
.stapelgitter > * { grid-area: 1 / 1; }
.wechsel-alt { animation: wechsel-alt 16s infinite both; }
.wechsel-neu { animation: aktion-nachher 16s infinite both; }
@keyframes wechsel-alt { 0%, 11% { opacity: 1; } 14%, 100% { opacity: 0; } }

.neuer-slot { animation: neuer-slot 16s cubic-bezier(.3, 1.4, .5, 1) infinite both; }
@keyframes neuer-slot { 0%, 9% { opacity: 0; transform: scale(.85); } 13%, 100% { opacity: 1; transform: none; } }

.reiter {
  position: absolute; left: 0; right: 0; bottom: 0; height: 66px;
  border-top: 1px solid #222228; background: #0e0e11;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center; justify-items: center;
}
.reiter-anzeige {
  position: absolute; left: 0; top: 10px; width: 25%; height: 46px;
  display: flex; justify-content: center;
  animation: reiter-wandern 16s cubic-bezier(.6, 0, .2, 1) infinite both;
}
.reiter-anzeige span { width: 54px; height: 46px; border-radius: 14px; background: var(--flaeche-3); }
@keyframes reiter-wandern { 0%, 22% { transform: translateX(0); } 25%, 47% { transform: translateX(100%); } 50%, 72% { transform: translateX(200%); } 75%, 97% { transform: translateX(300%); } 100% { transform: translateX(0); } }

/* Schwebende Kacheln um das Telefon: ein Ausblick auf weitere Bausteine. */
.kachel {
  position: absolute; display: flex; align-items: center; gap: 9px;
  padding: 10px 14px; background: var(--flaeche-3); border: 1px solid var(--linie-hell);
  border-radius: 14px; font-size: 13px; font-weight: 500; color: #e4e4e7;
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.8);
  animation: schweben 6s ease-in-out infinite;
}
.kachel svg { flex: none; }
/* Hinter den Grundregeln, sonst wirkungslos: eine Medienabfrage erhoeht
   die Prioritaet nicht. Auf schmalen Geraeten stapelt sich der Kopfbereich
   einspaltig - die Ringe und schwebenden Kacheln wuerden dann ueber dem
   naechsten Abschnitt haengen. */
@media (max-width: 980px) { .ring-aussen, .ring-innen, .kachel { display: none; } }
@keyframes schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.kachel.eigene { border: 1px dashed var(--akzent); color: var(--text); }
.kachel-1 { left: 0; top: 110px; animation-delay: 0s; }
.kachel-2 { right: -6px; top: 150px; animation-delay: 1.2s; }
.kachel-3 { left: -10px; top: 400px; animation-delay: 2.4s; }
.kachel-4 { right: -20px; top: 430px; animation-delay: 3.6s; }
.kachel-5 { right: 20px; top: 600px; animation-delay: 4.8s; }

.wackelt { animation: wackeln 3s ease-in-out infinite; transform-origin: center; }
@keyframes wackeln { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(-12deg); } 85% { transform: rotate(10deg); } }

/* ---------------- Allgemeine Flaechen ---------------- */
.abschnitt { padding: 120px 0; }
@media (max-width: 620px) { .abschnitt { padding: 72px 0; } }
.abschnitt-kopf { margin-bottom: 52px; max-width: 760px; }
.geteilt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.geteilt.oben { align-items: start; }
@media (max-width: 980px) { .geteilt { grid-template-columns: minmax(0, 1fr); } }
.flaeche {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund);
}

/* ---------------- Kennen-Sie-das / Vorher-Nachher ---------------- */
.baustelle { padding: 120px 0; }
.baustelle h2 { margin-bottom: 28px; font-size: clamp(30px, 4.2vw, 44px); line-height: 1.1; font-weight: 800; }
.aerger {
  display: flex; gap: 16px; align-items: flex-start; padding: 20px 0;
  border-bottom: 1px solid var(--linie); font-size: 17px; line-height: 1.55; color: #d4d4d8;
}
.aerger:last-child { border-bottom: none; }
.aerger-kreuz {
  width: 28px; height: 28px; border-radius: 8px; background: var(--flaeche-3);
  border: 1px solid var(--linie-hell); display: flex; align-items: center; justify-content: center;
  flex: none;
}
.loesungssatz { margin: 30px 0 0; font-family: var(--anzeige); font-size: 28px; font-weight: 700; }
.loesungssatz span { color: var(--akzent); }

/* Vorher/Nachher-Box: Zettelchaos loest sich in einer App auf, per
   Endlosschleife (9 s), damit die Botschaft auch ohne Scrollen ankommt. */
.vorher-nachher {
  position: relative; height: 460px; border-radius: 28px;
  background: var(--flaeche); border: 1px solid var(--linie); overflow: hidden;
}
@media (max-width: 980px) { .vorher-nachher { height: 420px; transform: scale(.8); transform-origin: top left; } }
.vn-status { position: absolute; left: 24px; top: 22px; height: 28px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; }
.vn-status span { position: absolute; left: 0; top: 0; white-space: nowrap; }
.vn-vorher { color: var(--text-2); animation: vn-vorher-zeigen 9s infinite both; }
.vn-nachher { color: var(--akzent); animation: vn-nachher-zeigen 9s infinite both; }
@keyframes vn-vorher-zeigen { 0%, 40% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes vn-nachher-zeigen { 0%, 46% { opacity: 0; } 52%, 94% { opacity: 1; } 100% { opacity: 0; } }

.zettel-treiben {
  position: absolute;
  animation: einsaugen 9s cubic-bezier(.6, 0, .3, 1) infinite both;
}
@keyframes einsaugen {
  0% { opacity: 0; transform: translate(0, 20px) rotate(var(--dreh)); }
  6% { opacity: 1; transform: rotate(var(--dreh)); }
  14% { transform: rotate(calc(var(--dreh) + 3deg)); }
  22% { transform: rotate(calc(var(--dreh) - 3deg)); }
  30% { transform: rotate(var(--dreh)); }
  42% { opacity: 1; transform: translate(var(--dx), var(--dy)) rotate(0deg) scale(.2); }
  46%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.2); }
}
.zettel-notiz {
  width: 150px; height: 170px; background: #ede8dc; border-radius: 6px; padding: 16px 14px;
  left: 40px; top: 70px; --dreh: -8deg; --dx: 190px; --dy: 150px;
}
.zettel-notiz-label { font-family: var(--mono); font-size: 10px; color: #6b6455; margin-bottom: 12px; }
.zettel-notiz-strich { height: 5px; background: #bdb4a0; border-radius: 3px; margin-bottom: 11px; }
.zettel-chat {
  width: 190px; padding: 10px 13px; background: var(--flaeche-3); border-radius: 16px 16px 16px 4px;
  font-size: 13px; color: #e4e4e7; right: 36px; top: 60px;
  --dreh: 5deg; --dx: -150px; --dy: 160px; animation-delay: .15s;
}
.zettel-tabelle {
  width: 170px; height: 110px; border-radius: 8px; border: 1px solid var(--linie-hell);
  background-color: #16161a;
  background-image: linear-gradient(var(--linie-hell) 1px, transparent 1px), linear-gradient(90deg, var(--linie-hell) 1px, transparent 1px);
  background-size: 34px 22px;
  right: 40px; top: 250px; --dreh: 3deg; --dx: -140px; --dy: -60px; animation-delay: .3s;
}
.zettel-haft {
  width: 120px; height: 110px; background: #e9c95a; border-radius: 4px; padding: 14px;
  font-size: 13px; color: #3a2f0b; font-weight: 500;
  left: 60px; top: 300px; --dreh: -4deg; --dx: 170px; --dy: -90px; animation-delay: .45s;
}
.zettel-anruf {
  width: 60px; height: 60px; border-radius: 50%; background: var(--flaeche-3); border: 1px solid var(--linie-hell);
  display: flex; align-items: center; justify-content: center;
  left: 220px; top: 30px; --dreh: 7deg; --dx: 0px; --dy: 170px; animation-delay: .6s;
}
.vn-app {
  position: absolute; left: 50%; top: 50%; width: 250px; margin: -150px 0 0 -125px;
  background: #0e0e11; border: 1px solid var(--linie-hell); border-radius: 26px; padding: 20px 16px;
  animation: vn-app-zeigen 9s cubic-bezier(.2, .7, .2, 1) infinite both;
}
@keyframes vn-app-zeigen { 0%, 42% { opacity: 0; transform: scale(.6); } 50%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: scale(.96); } }
.vn-app-label { font-family: var(--mono); font-size: 10px; color: #9a9aa3; letter-spacing: 0.1em; }
.vn-app-titel { font-family: var(--anzeige); font-size: 20px; font-weight: 700; margin: 4px 0 14px; }
.vn-app-zeile {
  display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px;
  background: var(--flaeche-3); border: 1px solid var(--linie); margin-bottom: 7px; font-size: 12px; color: #e4e4e7;
  animation: vn-app-zeile 9s cubic-bezier(.2, .7, .2, 1) infinite both;
}
@keyframes vn-app-zeile { 0%, 48% { opacity: 0; transform: translateX(16px); } 54%, 100% { opacity: 1; transform: none; } }
.vn-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--akzent); flex: none; }

/* ---------------- Ideenraster ---------------- */
.ideen-kopf {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 40px;
  flex-wrap: wrap; margin-bottom: 52px;
}
.ideen-kopf-text { max-width: 720px; }
.ideen-kopf .untertitel { max-width: 400px; }
.raster3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 980px) { .raster3 { grid-template-columns: minmax(0, 1fr); } }

.idee {
  position: relative; padding: 26px; border-radius: 22px;
  background: var(--flaeche); border: 1px solid var(--linie);
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.idee:hover { transform: translateY(-4px); border-color: var(--linie-hell); }
.idee-symbol {
  width: 48px; height: 48px; border-radius: 14px; background: var(--flaeche-3);
  border: 1px solid var(--linie-hell); display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
}
.idee h3 { margin: 0 0 8px; font-size: 21px; font-weight: 700; }
.idee p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.idee.eigene { border: 1.5px dashed var(--akzent); background: #141210; }
.idee.eigene .idee-symbol { border-color: var(--akzent); }
.idee.eigene p { color: #d4d4d8; }

.laufband-rahmen { margin-top: 70px; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); padding: 26px 0; overflow: hidden; }
.laufband {
  display: flex; width: max-content; gap: 40px; white-space: nowrap;
  font-family: var(--anzeige); font-size: 30px; font-weight: 700; color: #52525b;
  animation: laufen 40s linear infinite;
}
.laufband span.stern { color: var(--akzent); }
@keyframes laufen { to { transform: translateX(-50%); } }

/* ---------------- Versprechen ---------------- */
.raster4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 980px) { .raster4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .raster4 { grid-template-columns: minmax(0, 1fr); } }
.versprechen-karte { padding: 30px 26px; border-radius: 22px; background: var(--flaeche); border: 1px solid var(--linie); }
.versprechen-karte svg { margin-bottom: 16px; }
.versprechen-karte h3 { margin: 0 0 10px; font-size: 22px; font-weight: 700; }
.versprechen-karte p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-2); }

/* ---------------- Ablauf ---------------- */
.ablauf-spur { position: relative; height: 2px; background: var(--linie); margin: 0 0 40px; }
.ablauf-spur-fuellung { position: absolute; inset: 0; background: var(--akzent); transform-origin: left; }
.ablauf-punkt {
  position: absolute; top: -5px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--akzent); box-shadow: 0 0 16px var(--akzent);
  animation: unterwegs 6s cubic-bezier(.6, 0, .4, 1) infinite;
}
@keyframes unterwegs { 0% { left: 0; } 33% { left: 33.3%; } 66% { left: 66.6%; } 100% { left: calc(100% - 12px); } }
.raster3.ablauf { gap: 20px; }
.ablauf-nr {
  width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--flaeche-3); border: 1px solid var(--linie-hell); color: var(--text);
  font-family: var(--mono); font-size: 15px; margin-top: -68px; margin-bottom: 26px;
  box-shadow: 0 0 0 8px var(--grund);
}
/* Der negative Abstand zieht die Nummer nach oben auf die Spur - das
   funktioniert nur, solange die drei Schritte nebeneinander stehen. Sobald
   das Raster auf schmalen Bildschirmen einspaltig wird (siehe .raster3),
   wuerde dieselbe Nummer sonst in den Text der vorigen Karte hineinragen. */
@media (max-width: 980px) { .ablauf-nr { margin-top: 0; } }
.ablauf-schritt { font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; color: var(--akzent); margin-bottom: 14px; }
.ablauf h3 { font-size: 22px; font-weight: 700; margin: 0 0 10px; }
.ablauf p { margin: 0; color: var(--text-2); font-size: 16px; }

/* Damit sich die Spur-Fuellung beim Scrollen zieht: nur dort, wo der
   Browser scrollgesteuerte Animationen kennt (progressive Verbesserung,
   kein Zustand haengt daran). Wer "Bewegung reduzieren" eingestellt hat,
   sieht die Spur ohnehin voll gefuellt (unten im globalen Kill-Switch). */
@supports (animation-timeline: view()) {
  .ablauf-spur-fuellung {
    animation: spur-ziehen linear both;
    animation-timeline: view();
    animation-range: entry 30% cover 55%;
  }
}
@keyframes spur-ziehen { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------------- Kosten ----------------
   Von Oliver gestalteter Bereich: ein Zeitstrahl zeigt, wie sich der Preis
   zusammensetzt (einmalige Einrichtung, danach ein fester Betrag jeden
   Monat), darunter die beiden Preiskarten. Klassen tragen das Kuerzel
   "kx-", damit nichts mit dem Rest der Seite kollidiert.

   Der mitgelieferte Entwurf loeste die Einblend-Animation per JavaScript
   aus (IntersectionObserver + eine "Nochmal abspielen"-Taste). Diese Seite
   ist bewusst ohne jedes Skript gebaut, deshalb laeuft die Choreografie
   stattdessen scrollgesteuert - dieselbe Technik wie bei der Ablauf-Spur
   oben. Der Zeitplan (welches Element wann erscheint) ist identisch
   uebernommen, nur von Sekunden auf Scroll-Prozente umgerechnet: die
   Gesamtdauer war 5.4s, das entspricht jetzt der Strecke, auf der der
   Zeitstrahl in den Bildschirm faehrt ("entry" 0-100%). Eine Wiederhol-
   Taste braucht es dafuer nicht: einfach wieder hoch- und runterscrollen. */
#kosten { --kx-soft: var(--akzent-weich); }

.kx-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; align-items: end; margin-bottom: 48px; }
@media (max-width: 980px) { .kx-head { grid-template-columns: minmax(0, 1fr); gap: 20px; } }

/* Zeitstrahl-Karte */
.kx-timeline { position: relative; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 28px; padding: 32px 36px 30px; overflow: hidden; }
@media (max-width: 700px) { .kx-timeline { padding: 24px 18px 26px; } }
.kx-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 34px; }
.kx-legend { display: flex; gap: 20px; font-size: 13px; color: var(--text-2); }
.kx-legend span { display: flex; align-items: center; gap: 8px; }
.kx-sw { width: 14px; height: 14px; border-radius: 4px; background: var(--akzent); }
.kx-sw.kx-sw-m { background: var(--kx-soft); border: 1.5px solid var(--akzent); }

.kx-tl { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(6, minmax(0, 1fr)) minmax(0, .7fr); grid-template-rows: auto 150px auto auto; column-gap: 10px; }
.kx-tag { grid-row: 1; align-self: end; margin-bottom: 14px; }
.kx-tag .kx-k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--leise); }
.kx-tag strong { display: block; font-family: var(--anzeige); font-size: 26px; font-weight: 700; margin-top: 4px; }
.kx-bracket { grid-row: 1; grid-column: 2 / 8; align-self: end; margin-bottom: 14px; text-align: center; }
.kx-bracket strong { font-family: var(--anzeige); font-size: 22px; font-weight: 700; }
.kx-bracket .kx-k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--leise); margin-right: 10px; }
.kx-bline { height: 12px; margin-top: 10px; border: 1.5px solid var(--akzent); border-bottom: none; border-radius: 8px 8px 0 0; transform-origin: left; }

.kx-big {
  grid-row: 2; grid-column: 1; align-self: stretch; background: var(--akzent); color: #09090b;
  border-radius: 16px 16px 4px 4px; padding: 16px; display: flex; flex-direction: column; justify-content: flex-end;
  gap: 6px; transform-origin: bottom;
}
.kx-big b { font-family: var(--anzeige); font-size: 22px; letter-spacing: -0.02em; }
.kx-big span { font-size: 13px; font-weight: 500; }
.kx-m {
  grid-row: 2; align-self: end; height: 42%; background: var(--kx-soft); border: 1.5px solid var(--akzent);
  border-radius: 10px 10px 3px 3px; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 13px; color: var(--akzent); transform-origin: bottom;
}
.kx-end { grid-row: 2; grid-column: 8; align-self: end; display: flex; align-items: center; justify-content: center; height: 42%; }
.kx-end svg { animation: kx-wedeln 1.6s ease-in-out infinite; }
@keyframes kx-wedeln { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(7px); } }

.kx-track { grid-row: 3; grid-column: 1 / -1; height: 2px; background: var(--linie); position: relative; margin-top: 10px; }
.kx-track i { position: absolute; inset: 0; background: var(--akzent); transform-origin: left; }
.kx-lbl { grid-row: 3; padding-top: 24px; text-align: center; font-family: var(--mono); font-size: 12px; color: var(--leise); }
.kx-lbl.kx-first { text-align: left; color: var(--text); }
.kx-ende { grid-column: 8; }

.kx-live { grid-row: 4; grid-column: 1; margin-top: 22px; display: flex; align-items: center; gap: 10px; font-size: 14px; color: #d4d4d8; }
.kx-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--akzent); position: relative; flex: none; }
.kx-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--akzent); animation: kx-pulsieren 2s ease-out infinite; }
@keyframes kx-pulsieren { from { transform: scale(1); opacity: .7; } to { transform: scale(3.2); opacity: 0; } }
.kx-service { grid-row: 4; grid-column: 2 / -1; margin-top: 22px; position: relative; height: 40px; border-radius: 999px; border: 1px solid var(--linie); overflow: hidden; }
.kx-service i { position: absolute; inset: 0; background: var(--kx-soft); transform-origin: left; }
.kx-service span { position: relative; height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; font-size: 14px; color: #e4e4e7; }

.kx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kx-step { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--leise); }

.kx-note { margin: 22px 0 0; display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.6; color: #d4d4d8; }
.kx-note svg { flex: none; margin-top: 3px; }

/* ---- Handy ----
   MUSS hinter den Grundregeln stehen. Eine Medienabfrage erhoeht die
   Prioritaet NICHT - bei gleicher Prioritaet gewinnt die spaetere Regel.
   Stand dieser Block weiter oben, ueberschrieb jede Desktop-Grundregel
   darunter die Handy-Anpassung wieder: die Kacheln 5 und 6 blieben
   sichtbar und sprengten das schmalere Raster, "Einrichtung" behielt
   seine 22px und lief aus der Karte heraus. */
@media (max-width: 700px) {
  /* Drei Monate statt vier: nachgerechnet gegen die Textbreiten passt die
     Spalte "Einrichtung" sonst bis hinunter zu 360px nicht (sie braucht
     rund 77px, haette bei vier Monaten aber nur rund 50px). Die Botschaft
     - erst einmalig, dann monatlich weiter - traegt auch mit drei
     Kacheln, zumal die Spalte mit "..." die Fortsetzung zeigt. */
  .kx-tl { grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, .95fr)) minmax(0, .4fr); grid-template-rows: auto 130px auto auto; column-gap: 6px; }
  .kx-m4, .kx-m5, .kx-m6 { display: none; }
  .kx-end { grid-column: 5; }
  .kx-ende { grid-column: 5; }
  .kx-bracket { grid-column: 2 / 5; }
  .kx-bracket strong, .kx-tag strong { font-size: 17px; }
  .kx-big { padding: 10px; }
  /* Trennung als Netz: sollte die Spalte doch einmal zu schmal werden,
     bricht "Einrichtung" sauber um statt aus der Karte zu laufen. */
  .kx-big b { font-size: 12px; letter-spacing: -0.01em; -webkit-hyphens: auto; hyphens: auto; }
  .kx-big svg { width: 18px; height: 18px; }
  .kx-big span { display: none; }
  .kx-lbl { font-size: 10px; }
  .kx-live { grid-column: 1 / -1; font-size: 13px; }
  .kx-service { grid-row: 5; grid-column: 1 / -1; margin-top: 10px; }
  .kx-service span { font-size: 12px; }
  /* Ein Betrag darf nicht mitten im Preis umbrechen ("ab 24,99" / "€"). */
  .kx-tag strong { font-size: 15px; }
  .kx-tag strong, .kx-bracket strong { white-space: nowrap; }
}



/* Die fuenf Bewegungen des Kostenbereichs. Ohne diese Definitionen zeigen
   alle Regeln weiter unten ins Leere: der Browser meldet keinen Fehler,
   es passiert schlicht nichts. Genau das war der Fehler, den drei
   Reparaturversuche lang niemand gesehen hat - sie sind beim Umbau des
   Bewegungsblocks versehentlich mit herausgeschnitten worden. */
@keyframes kx-zeichnen { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes kx-wachsen { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes kx-auftauchen { from { opacity: 0; transform: translateY(12px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes kx-einblenden { from { opacity: 0; } to { opacity: 1; } }

/* ---- Bewegung: startet, sobald der Zeitstrahl ins Bild scrollt ----

   Olivers eigene Loesung, unveraendert uebernommen: ein kleines Skript
   (unten im HTML) setzt die Klasse "kx-play", sobald der Zeitstrahl zu
   35 % sichtbar ist. Das Skript speichert nichts, laedt nichts nach und
   tut sonst nichts - es schaltet nur diese eine Klasse. Deshalb steht
   dazu ein Satz in der Datenschutzerklaerung.

   Warnung fuer spaetere Umbauten an diesem Block: Die @keyframes direkt
   darueber gehoeren dazu. Fehlen sie, verweisen alle Regeln hier ins
   Leere - der Browser meldet das NICHT, die Elemente stehen einfach
   unbewegt da. Genau das ist beim Umbau schon einmal passiert und hat
   drei Fehlersuchen gekostet, weil es wie ein Timing- oder
   Browser-Problem aussah. Nach jeder Aenderung pruefen, dass zu jedem
   animation-name auch ein @keyframes existiert. */

.kx-js:not(.kx-play) .kx-a { opacity: 0; }
.kx-js:not(.kx-play) .kx-track i,
.kx-js:not(.kx-play) .kx-service i,
.kx-js:not(.kx-play) .kx-bline { transform: scaleX(0); }
.kx-js:not(.kx-play) .kx-big,
.kx-js:not(.kx-play) .kx-m { transform: scaleY(0); }

.kx-play .kx-track i { animation: kx-zeichnen 3.4s .1s cubic-bezier(.4, 0, .2, 1) both; }
.kx-play .kx-big { animation: kx-wachsen .9s .35s cubic-bezier(.3, 1.35, .5, 1) both; }
.kx-play .kx-tag { animation: kx-auftauchen .6s .95s cubic-bezier(.2, .7, .2, 1) both; }
/* Nicht als Kurzschreibweise ("animation: ... var(--d) ..."): WebKit hat
   einen bekannten Fehler, bei dem eine Variable innerhalb der
   animation-Kurzschreibweise nicht zuverlaessig ankommt (siehe
   https://github.com/WebKit/WebKit/commit/875f1eabd79a095748da329ba181c75a27ae6d02).
   Als einzelne Eigenschaft (animation-delay: var(--d)) funktioniert dieselbe
   Variable dagegen problemlos - deshalb hier ausgeschrieben, waehrend alle
   anderen Regeln oben weiter die Kurzschreibweise mit fest eingetragener
   Zeit benutzen. */
.kx-play .kx-m {
  animation-name: kx-wachsen;
  animation-duration: .6s;
  animation-timing-function: cubic-bezier(.3, 1.5, .5, 1);
  animation-fill-mode: both;
  animation-delay: var(--d);
}
.kx-play .kx-lbl {
  animation-name: kx-einblenden;
  animation-duration: .5s;
  animation-fill-mode: both;
  animation-delay: var(--d, .4s);
}
.kx-play .kx-end { animation: kx-einblenden .6s 3.2s both; }
.kx-play .kx-bline { animation: kx-zeichnen 1.7s 1.5s cubic-bezier(.4, 0, .2, 1) both; }
.kx-play .kx-bracket .kx-a { animation: kx-auftauchen .6s 2.9s cubic-bezier(.2, .7, .2, 1) both; }
.kx-play .kx-live { animation: kx-einblenden .6s 1.3s both; }
.kx-play .kx-service i { animation: kx-zeichnen 2.2s 1.4s cubic-bezier(.4, 0, .2, 1) both; }
.kx-play .kx-service span { animation: kx-einblenden .8s 2.2s both; }
/* Zuletzt der Hinweis - frueher als vorher, weil die beiden Karten
   dazwischen weggefallen sind. */
.kx-play .kx-note { animation: kx-einblenden .8s 3.9s both; }


/* Wer "Bewegung reduzieren" eingestellt hat: sofort alles sichtbar, egal
   ob "kx-play" vom Skript schon gesetzt wurde. Ohne dieses Extra wuerde
   kurz ein unsichtbarer Zustand aufblitzen, bis das Skript reagiert. */
@media (prefers-reduced-motion: reduce) {
  #kosten *, #kosten *::before, #kosten *::after { animation: none !important; }
  .kx-js .kx-a { opacity: 1 !important; }
  .kx-js .kx-track i, .kx-js .kx-service i, .kx-js .kx-bline,
  .kx-js .kx-big, .kx-js .kx-m { transform: none !important; }
}


/* ---------------- Ueber mich ---------------- */
.ueber-karte { padding: 48px; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; align-items: center; }
@media (max-width: 980px) { .ueber-karte { grid-template-columns: minmax(0, 1fr); padding: 28px; } }
.ueber-foto {
  /* Die Datei ist 440x520 - doppelt so gross wie das Feld, damit sie auf
     hochaufloesenden Displays scharf bleibt. */
  width: 220px; height: 260px; border-radius: 20px;
  object-fit: cover; display: block;
}
@media (max-width: 980px) { .ueber-foto { width: 160px; height: 190px; } }
.ueber-karte h2 { margin: 0 0 18px; font-size: clamp(28px, 4vw, 42px); line-height: 1.08; font-weight: 800; }
.ueber-karte p { margin: 0 0 12px; font-size: 18px; line-height: 1.65; color: #d4d4d8; }
.ueber-karte p:last-child { margin: 0; font-size: 17px; color: var(--text-2); }

/* ---------------- FAQ ---------------- */
details { border-bottom: 1px solid var(--linie); }
summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  gap: 24px; padding: 26px 0; font-size: 20px; font-weight: 600; min-height: 44px;
}
summary::-webkit-details-marker { display: none; }
.plus { transition: transform 0.3s ease; flex: none; }
details[open] .plus { transform: rotate(45deg); }
details p { margin: 0 0 26px; font-size: 17px; line-height: 1.65; color: var(--text-2); max-width: 760px; }

/* ---------------- Kontakt ---------------- */
.kontakt-box {
  position: relative; background: var(--akzent); color: #09090b; border-radius: 36px;
  padding: 90px 72px; overflow: hidden;
}
@media (max-width: 620px) { .kontakt-box { padding: 56px 26px; } }
.kontakt-box .eyebrow { color: #09090b; opacity: .7; font-size: 13px; }
.kontakt-box h2 { margin: 0 0 22px; font-size: clamp(38px, 6vw, 80px); line-height: 1; font-weight: 800; }
.kontakt-box p { margin: 0 0 44px; font-size: 20px; line-height: 1.6; max-width: 600px; }
.kontakt-box .knopf-voll { background: #09090b; color: var(--text); }
.kontakt-box .knopf-leer { border: 1.5px solid #09090b; color: #09090b; }
.kontakt-ringe { position: absolute; right: -140px; top: -140px; animation: drehung 50s linear infinite; }

/* ---------------- Fuss ---------------- */
.fuss { padding: 28px 0 48px; }
.fuss .breite { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; font-size: 14px; color: var(--leise); }
.fuss nav { display: flex; gap: 24px; }
.fuss a { padding: 12px 0; }
.fuss a:hover { color: var(--text); }

/* ---------------- Rechtstexte (Impressum, Datenschutz) ---------------- */
.recht { padding: 64px 0 88px; }
.recht .breite { max-width: 760px; }
.recht h1 { font-size: clamp(32px, 5vw, 44px); margin-bottom: 32px; font-weight: 800; }
.recht h2 { font-size: 22px; letter-spacing: -0.01em; margin: 36px 0 10px; font-weight: 700; }
.recht p, .recht li { color: var(--text-2); font-size: 16px; }
.recht ul { padding-left: 20px; }
.zurueck { display: inline-block; margin-bottom: 26px; font-size: 15px; color: var(--akzent); }
.zurueck:hover { text-decoration: underline; }

.luecke {
  /* Noch nicht ausgefuellte Angaben fallen auf - damit nichts mit einer
     Luecke live geht. Auf dunklem Grund braucht es dafuer sattes Gelb
     statt des hellen Tons der Vorgaengerfassung. */
  background: #4a3b0a;
  color: #ffd966;
  padding: 1px 6px;
  border-radius: 5px;
  font-weight: 600;
}

/* ---------------- Bewegung abschalten ---------------- */
/* Ein einziger Schalter statt vieler einzelner: wer "Bewegung reduzieren"
   eingestellt hat, sieht jede Karte, jeden Bildschirm und jede Kachel in
   ihrem Ruhezustand, nichts bleibt halb ausgeblendet oder mitten in der
   Bewegung stehen (siehe die Fill-Mode "both"-Angaben oben). */
@media (prefers-reduced-motion: reduce) {
  main *, main *::before, main *::after { animation: none !important; }
}