/* Flowlee · Gestaltungssystem (Designrunde 20.10.2026)
   Gemeinsame Regeln für JEDE Seite: Schrift, Farben, Raster, Kopfleiste (mobil + Desktop), Fuß, Knöpfe, Abschnitte,
   Listen, Schrittfolgen mit Faden, Preistafel, Fragenliste, Abschluss, Deutschlandkarte, Einblenden.
   Lädt nach den Abschnittsstilen der Startseite (hero, leistungen, galerie, person, stimmen). Mobile-first.
   Farbrollen: Anthrazit = Bühne/Einstieg/Abschluss, Weiß = Lesen/Preise, Hellgrau = Ablauf/Fragen,
   Violett = Handlung (Knopf, Faden, Ziffer, Premium), Türkis = Reaktion (Berühren, Fokus, Kontaktunterkante),
   Orange = genau einmal, der Köln-Punkt. */

@font-face {
  font-family: "Onest";
  src: url("onest.ttf") format("truetype");
  font-weight: 100 900;
  font-display: block;
}

:root {
  --anthrazit: #202124;
  --anthrazit-2: #2A2B30;
  --tief: #17181B;
  --violett: #641AFF;
  --violett-hell: #7334FF;
  --violett-tief: #5214E0;
  --violett-zart: #F1EBFF;
  --tuerkis: #00C8BE;
  --tuerkis-tief: #0A8F88;
  --orange: #FF8500;
  --weiss: #FFFFFF;
  --grau-flaeche: #ECEDEF;
  --text: #202124;
  --text-2: #3A3B40;
  --text-leise: #5C5E66;
  --hell-text: #B8BAC0;
  --hell-leise: #8E9198;
  --linie: rgb(0 0 0 / .12);
  --linie-dunkel: rgb(255 255 255 / .12);
  --pad: clamp(20px, 5.6vw, 40px);
  --breite: 1120px;
  --innen: max(var(--pad), calc((100% - var(--breite)) / 2));
  --kopf-start: 96px;
  --rhythmus: 72px;
  --lauf: cubic-bezier(.2, .7, .2, 1);
}

@media (min-width: 1024px) {
  :root { --kopf-start: 80px; --rhythmus: 128px; --pad: 40px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 96px; }
@media (min-width: 1024px) { html { scroll-padding-top: 88px; } }
body {
  margin: 0;
  background: var(--anthrazit);
  color: var(--weiss);
  font-family: "Onest", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a, button, summary, label, input, select, textarea { touch-action: manipulation; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.sprunglink { position: fixed; left: 12px; top: 12px; transform: translateY(-200%); z-index: 200; padding: 12px 16px; border-radius: 8px; background: var(--weiss); color: var(--text); font-weight: 700; text-decoration: none; }
.sprunglink:not(:focus) { clip-path: inset(50%); }
.sprunglink:focus { transform: none; outline: 3px solid var(--violett); }

/* ======================================================================
   KOPFLEISTE – alle Breiten. Mobil wie abgenommen (96 px, Logo, Telefon, „Anfragen“),
   dazu ein kompakter Menüknopf. Ab 1024 px: alle Leistungen sichtbar.
   ====================================================================== */
.site-header {
  --kopf-h: 96px;
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 12px;
  height: calc(var(--kopf-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) var(--pad) 0;
  background: var(--anthrazit);
  color: var(--weiss);
  font-family: "Onest", system-ui, sans-serif;
  transition: height .25s ease, background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.site-header.is-scrolled {
  --kopf-h: 72px;
  background: rgb(32 33 36 / .86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgb(255 255 255 / .06);
}
.site-header.ist-hell {
  background: rgb(255 255 255 / .86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: #000;
  box-shadow: 0 1px 0 rgb(0 0 0 / .06);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.is-scrolled { background: rgb(32 33 36 / .96); }
  .site-header.ist-hell { background: rgb(255 255 255 / .97); }
}

.site-header__logo { flex: none; display: flex; align-items: center; width: 84.2px; height: 44px; border-radius: 4px; } /* Monogramm 22.10.2026: 22 px × 3,828 */
.site-header__logo img { display: block; width: 100%; height: 22px; }
.site-header__logo-dunkel { display: none !important; }
.site-header.ist-hell .site-header__logo-hell { display: none !important; }
.site-header.ist-hell .site-header__logo-dunkel { display: block !important; }

.site-header__actions { margin-left: auto; flex: none; display: flex; align-items: center; gap: 10px; }

/* 44 px Tippfläche (Upload-Prüfung 20.10.2026) */
.site-header__call {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--tuerkis);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.site-header__call::after { content: ""; position: absolute; inset: -3px; }
.site-header__call svg { display: block; width: 20px; height: 20px; }
.site-header__call:hover, .site-header__call:active { background: var(--tuerkis); color: #0D0E11; }
.site-header.ist-hell .site-header__call { border-color: rgb(0 0 0 / .18); }
.site-header.ist-hell .site-header__call:hover { background: var(--tuerkis); border-color: var(--tuerkis); }

.site-header__cta {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 16px;
  border: 1px solid rgb(255 255 255 / .24);
  border-radius: 9px;
  color: inherit;
  font-size: 15px;
  font-weight: 680;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease;
}
.site-header__cta svg { display: block; flex: none; width: 18px; height: 18px; }
.site-header__cta:hover { background: rgb(255 255 255 / .08); }
.site-header.ist-hell .site-header__cta { border-color: rgb(0 0 0 / .22); }
.site-header.ist-hell .site-header__cta:hover { background: rgb(0 0 0 / .05); }

.site-header a:focus { outline: none; }
.site-header a:focus-visible, .menue__knopf:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

/* Menü (mobil + Tablet): details/summary, bedienbar auch ohne Skript */
.menue { position: static; }
.menue:not([open]) .menue__flaeche { display: none; }
.menue__knopf {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgb(255 255 255 / .24);
  border-radius: 10px;
  list-style: none;
  cursor: pointer;
  color: inherit;
}
.menue__knopf::-webkit-details-marker { display: none; }
.menue__knopf::after { content: ""; position: absolute; inset: -3px; }
.site-header.ist-hell .menue__knopf { border-color: rgb(0 0 0 / .18); }
.menue__striche, .menue__striche::before {
  display: block;
  width: 18px;
  height: 1.6px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .2s ease;
}
.menue__striche { position: relative; transform: translateY(-3px); }
.menue__striche::before { content: ""; position: absolute; left: 0; top: 6px; }
.menue[open] .menue__striche { transform: translateY(0) rotate(45deg); }
.menue[open] .menue__striche::before { transform: translateY(-6px) rotate(-90deg); }

.menue__flaeche {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(var(--kopf-h) + env(safe-area-inset-top, 0px));
  max-height: calc(100svh - var(--kopf-h) - env(safe-area-inset-top, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px var(--pad) calc(32px + env(safe-area-inset-bottom, 0px));
  background: var(--anthrazit);
  color: var(--weiss);
  border-top: 1px solid var(--linie-dunkel);
  box-shadow: 0 32px 48px -24px rgb(0 0 0 / .6);
}
.menue__liste { list-style: none; margin: 0; padding: 0; }
.menue__liste li { border-bottom: 1px solid var(--linie-dunkel); }
.menue__liste a {
  display: grid;
  grid-template-columns: 28px 1fr 20px;
  column-gap: 14px;
  align-items: center;
  padding: 16px 0;
  color: inherit;
  text-decoration: none;
}
.menue__liste .zeichen { width: 26px; height: 26px; color: var(--violett-hell); }
.menue__name { display: block; font-weight: 900; font-size: 22px; line-height: 1.1; letter-spacing: -.015em; }
.menue__satz { display: block; margin-top: 3px; font-size: 14px; line-height: 1.4; color: var(--hell-text); }
.menue__liste .menue__pfeil { width: 20px; height: 20px; color: var(--hell-leise); }
.menue__liste a[aria-current="page"] .menue__name { color: var(--tuerkis); }
.menue__weiter { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 20px 0 0; }
.menue__weiter a { display: inline-block; padding: 12px 0; color: var(--weiss); font-weight: 650; font-size: 16px; text-decoration: underline; text-decoration-color: rgb(255 255 255 / .35); text-underline-offset: 5px; }
.menue__direkt { margin: 20px 0 0; font-size: 14px; color: var(--hell-leise); }
.menue__direkt a { display: inline-block; padding: 12px 0; color: var(--hell-text); }

/* Desktop-Navigation */
.kopf-nav { display: none; }

@media (max-width: 374px) {
  /* 320–374 px: drei 44-px-Knöpfe + Logo passen nur mit engeren Abständen (Upload-Prüfung 20.10.2026) */
  .site-header__actions { gap: 5px; }
  .site-header__cta { padding: 0 11px; gap: 4px; font-size: 14px; }
  .site-header__cta svg { display: none; }   /* Pfeil entfällt nur unter 375 px, damit alles innerhalb des Rands bleibt */
}

@media (min-width: 1024px) {
  .site-header { --kopf-h: 80px; gap: 28px; padding-left: var(--innen); padding-right: var(--innen); }
  .site-header.is-scrolled { --kopf-h: 68px; }
  .site-header__logo { width: 99.5px; }
  .site-header__logo img { height: 26px; }
  .menue { display: none; }
  .kopf-nav { display: block; margin-left: auto; }
  .kopf-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
  .kopf-nav a {
    position: relative;
    display: block;
    padding: 10px 11px;
    border-radius: 8px;
    color: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    opacity: .86;
    transition: opacity .18s ease, background-color .18s ease;
  }
  .kopf-nav a:hover { opacity: 1; background: rgb(255 255 255 / .07); }
  .site-header.ist-hell .kopf-nav a:hover { background: rgb(0 0 0 / .05); }
  .kopf-nav a[aria-current="page"] { opacity: 1; }
  .kopf-nav a[aria-current="page"]::after {
    content: ""; position: absolute; left: 11px; right: 11px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--violett-hell);
  }
  .site-header__actions { margin-left: 8px; }
}
@media (min-width: 1024px) and (max-width: 1139px) {
  .kopf-nav a { padding: 10px 8px; font-size: 14px; }
  .kopf-nav a[aria-current="page"]::after { left: 8px; right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header, .menue__striche, .menue__striche::before, .site-header__call, .site-header__cta, .kopf-nav a { transition: none; }
}

/* ======================================================================
   ZEICHEN – eigener Satz, 24er Raster, 1.5 Strich
   ====================================================================== */
.zeichen { display: block; flex: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ======================================================================
   KNÖPFE UND TEXTLINKS
   ====================================================================== */
.knopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 420px;
  min-height: 58px;
  padding: 16px 22px 16px 24px;
  border: 0;
  border-radius: 10px;
  background: var(--violett);
  color: var(--weiss);
  font: inherit;
  font-weight: 800;
  font-size: 19px;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
}
.knopf svg { flex: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.knopf:hover { background: var(--violett-hell); }
.knopf:hover svg { transform: translateX(4px); }
.knopf:active { transform: translateY(1px); }
.knopf:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.hell .knopf:focus-visible, .teil--hell .knopf:focus-visible, .teil--grau .knopf:focus-visible { outline-color: var(--text); }
.knopf__mikro { margin: 12px 0 0; font-size: 13px; line-height: 1.4; color: var(--hell-leise); }
.teil--hell .knopf__mikro, .teil--grau .knopf__mikro { color: var(--text-leise); }

.textlink {
  font-weight: 650;
  font-size: 16px;
  line-height: 1.5;
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: color .18s ease;
}
.teil--hell .textlink, .teil--grau .textlink { color: var(--violett); }
.textlink:hover { color: var(--tuerkis); }
.teil--hell .textlink:hover, .teil--grau .textlink:hover { color: var(--tuerkis-tief); }
.einstieg__zweit .textlink, .schluss__zweit .textlink, .danke-weiter .textlink { display: inline-block; padding: 11px 0; }
.textlink:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; border-radius: 2px; }

@media (min-width: 1024px) {
  .knopf { max-width: 400px; font-size: 20px; }
  .textlink { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .knopf, .knopf svg, .textlink { transition: none; } }

/* ======================================================================
   EINSTIEG DER UNTERSEITEN (dunkel)
   ====================================================================== */
.einstieg {
  position: relative;
  background: var(--anthrazit);
  color: var(--weiss);
  padding: calc(var(--kopf-start) + env(safe-area-inset-top, 0px) + 40px) var(--innen) 64px;
  overflow: hidden;
}
.einstieg__marke {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  color: var(--hell-text);
}
.einstieg__marke::before { content: ""; flex: none; width: 22px; height: 2px; border-radius: 2px; background: var(--violett-hell); }
.einstieg__titel {
  margin: 0 0 20px;
  font-weight: 900;
  font-size: clamp(36px, 10.4vw, 46px);
  line-height: 1.0;
  letter-spacing: -.032em;
  text-wrap: balance;
}
.einstieg__titel span { display: block; }
.einstieg__titel em { font-style: normal; color: var(--violett-hell); }
.einstieg__text {
  margin: 0 0 28px;
  max-width: 34em;
  font-size: 17px;
  line-height: 1.6;
  color: var(--hell-text);
}
.einstieg__zeile { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 28px; padding: 0; list-style: none; }
.einstieg__zeile li {
  padding: 7px 12px;
  border: 1px solid var(--linie-dunkel);
  border-radius: 999px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--weiss);
}
.einstieg__zweit { margin-top: 20px; }
.einstieg__bild { margin: 44px 0 0; }

@media (min-width: 768px) {
  .einstieg__titel { font-size: clamp(48px, 7vw, 64px); }
  .einstieg__text { font-size: 19px; }
}
@media (min-width: 1024px) {
  .einstieg { padding-top: calc(var(--kopf-start) + 96px); padding-bottom: 112px; }
  .einstieg--mit-bild {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: 64px;
    align-items: center;
  }
  .einstieg--mit-bild > :not(.einstieg__bild) { grid-column: 1; }
  .einstieg--mit-bild .einstieg__bild { grid-column: 2; grid-row: 1 / span 8; margin: 0; }
  .einstieg__titel { font-size: clamp(56px, 6vw, 88px); line-height: .98; }
  .einstieg--mit-bild .einstieg__titel { font-size: clamp(48px, 4.5vw, 68px); }
  .einstieg__text { font-size: 20px; }
}

/* Runde 2: heller Einstieg (bricht die Folge „dunkler Titel zuerst“) */
.einstieg--hell { background: var(--grau-flaeche); color: var(--text); }
.einstieg--hell .einstieg__marke { color: var(--text-leise); }
.einstieg--hell .einstieg__marke::before { background: var(--violett); }
.einstieg--hell .einstieg__text { color: var(--text-2); }
.einstieg--hell .knopf__mikro { color: var(--text-leise); }
.einstieg--hell .knopf:focus-visible { outline-color: var(--text); }

/* Bild im Einstieg: echte Arbeit (Handy-Ansicht) mit Bildunterschrift */
.einstieg__handy { max-width: 260px; }
.einstieg__handy img { display: block; width: 100%; height: auto; border-radius: 24px; box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 32px 64px -28px rgb(0 0 0 / .9); }
.einstieg__handy figcaption, .bildzeile { margin-top: 14px; font-size: 13px; line-height: 1.45; color: var(--hell-leise); }
@media (min-width: 1024px) { .einstieg__handy { max-width: 320px; justify-self: center; } }

/* ======================================================================
   ABSCHNITTE
   ====================================================================== */
.teil { padding: var(--rhythmus) var(--innen); font-family: "Onest", system-ui, sans-serif; }
.teil--hell { background: var(--weiss); color: var(--text); }
.teil--grau { background: var(--grau-flaeche); color: var(--text); }
.teil--dunkel { background: var(--anthrazit); color: var(--weiss); }
.teil--violett { background: var(--violett); color: var(--weiss); }
.teil--hell + .teil--hell, .teil--grau + .teil--grau { padding-top: 0; }
.teil--hell + .teil--hell > :first-child, .teil--grau + .teil--grau > :first-child { padding-top: var(--rhythmus); border-top: 1px solid var(--linie); }
.teil--dunkel + .teil--dunkel > :first-child:not(.karte-teil) { padding-top: 0; }

.teil__titel {
  margin: 0 0 20px;
  font-weight: 900;
  font-size: clamp(30px, 8.6vw, 38px);
  line-height: 1.04;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.teil__titel em { font-style: normal; color: var(--violett); }
.teil--dunkel .teil__titel em, .teil--violett .teil__titel em { color: var(--violett-hell); }
.teil__vorspann { margin: 0 0 32px; max-width: 34em; font-size: 17px; line-height: 1.6; color: var(--text-2); }
.teil--dunkel .teil__vorspann { color: var(--hell-text); }
.teil--violett .teil__vorspann { color: rgb(255 255 255 / .86); }
.teil__kopf { margin-bottom: 40px; }
.teil__kopf > :last-child { margin-bottom: 0; }

.fliess p { margin: 0 0 16px; max-width: 34em; font-size: 17px; line-height: 1.62; color: var(--text-2); }
.fliess p:last-child { margin-bottom: 0; }
.teil--dunkel .fliess p { color: var(--hell-text); }
.leise { margin: 20px 0 0; max-width: 38em; font-size: 15px; line-height: 1.55; color: var(--text-leise); }
.teil--dunkel .leise { color: var(--hell-leise); }
.marke-klein { margin: 0 0 10px; font-weight: 700; font-size: 14px; line-height: 1.3; color: var(--text-leise); }
.teil--dunkel .marke-klein { color: var(--hell-leise); }

@media (min-width: 768px) {
  .teil__titel { font-size: clamp(42px, 5vw, 58px); margin-bottom: 24px; }
  .teil__vorspann, .fliess p { font-size: 19px; }
  .leise { font-size: 16px; }
}
/* Desktop: Titel links (5/12), Inhalt rechts (7/12); der Titel bleibt innerhalb seines Abschnitts ruhig stehen */
@media (min-width: 1024px) {
  .seitlich { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 72px; align-items: start; }
  .seitlich > .teil__kopf { position: sticky; top: 120px; margin-bottom: 0; }
  .seitlich > .teil__kopf .teil__titel { font-size: clamp(40px, 3.8vw, 52px); }
}

/* Punkte: Aussagen mit Haarlinie, keine Karten */
.punkte { list-style: none; margin: 0; padding: 0; }
.punkte > li { padding: 22px 0; border-top: 1px solid var(--linie); }
.punkte > li:last-child { border-bottom: 1px solid var(--linie); }
.teil--dunkel .punkte > li { border-color: var(--linie-dunkel); }
.punkte h3 { margin: 0 0 8px; font-weight: 900; font-size: 21px; line-height: 1.18; letter-spacing: -.012em; }
.punkte p { margin: 0; max-width: 34em; font-size: 16px; line-height: 1.6; color: var(--text-2); }
.teil--dunkel .punkte p { color: var(--hell-text); }
.punkte .punkte__preis { margin-top: 12px; font-weight: 750; color: var(--text); }
.punkte__kopf { display: flex; align-items: flex-start; gap: 14px; }
.punkte__kopf .zeichen { margin-top: 1px; color: var(--violett); }
.punkte--nummer { counter-reset: punkt; }
.punkte--nummer > li { position: relative; padding-left: 48px; counter-increment: punkt; }
.punkte--nummer > li::before {
  content: counter(punkt, decimal-leading-zero);
  position: absolute; left: 0; top: 25px;
  font-weight: 800; font-size: 14px; color: var(--violett); font-variant-numeric: tabular-nums;
}
@media (min-width: 768px) {
  .punkte h3 { font-size: 24px; }
  .punkte p { font-size: 17px; }
  .punkte--zwei { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
  .punkte--zwei > li:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--linie); }
}
@media (min-width: 900px) {
  .punkte--drei { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 40px; }
  .punkte--drei > li { border-bottom: 1px solid var(--linie); }
}

/* Zeilenliste: Aufzählung mit Haarlinien und violettem Strich */
.zeilenliste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); max-width: 40em; }
.zeilenliste li {
  position: relative;
  padding: 14px 0 14px 30px;
  border-bottom: 1px solid var(--linie);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-2);
}
.zeilenliste li::before { content: ""; position: absolute; left: 2px; top: 25px; width: 14px; height: 2px; border-radius: 2px; background: var(--violett); }
.teil--dunkel .zeilenliste, .teil--dunkel .zeilenliste li { border-color: var(--linie-dunkel); color: var(--hell-text); }
.teil--dunkel .zeilenliste li::before { background: var(--violett-hell); }
@media (min-width: 768px) { .zeilenliste li { font-size: 18px; } .zeilenliste li::before { top: 27px; } }

/* ======================================================================
   SCHRITTE MIT FADEN – Reihenfolge sichtbar; die Linie füllt sich beim Lesen (system.js, --fuellung)
   ====================================================================== */
.schritte { --fuellung: 1; position: relative; list-style: none; margin: 0; padding: 0; }
html.js .schritte[data-faden] { --fuellung: 0; }
.schritte::before, .schritte::after {
  content: "";
  position: absolute;
  left: 19px;
  top: 20px;
  width: 2px;
  border-radius: 2px;
  pointer-events: none;
}
.schritte::before { bottom: 40px; background: var(--linie); }
.teil--dunkel .schritte::before { background: var(--linie-dunkel); }
.schritte::after { height: calc((100% - 60px) * var(--fuellung)); background: var(--violett); transition: height .2s linear; }
.schritt { position: relative; padding: 0 0 36px 64px; }
.schritt:last-child { padding-bottom: 0; }
.schritt__knoten {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--weiss);
  box-shadow: inset 0 0 0 1.5px var(--violett);
  color: var(--violett);
  font-weight: 800;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.teil--grau .schritt__knoten { background: var(--grau-flaeche); }
.teil--dunkel .schritt__knoten { background: var(--anthrazit); box-shadow: inset 0 0 0 1.5px var(--violett-hell); color: var(--weiss); }
.schritt__knoten .zeichen { width: 20px; height: 20px; }
.schritt__titel { margin: 6px 0 8px; font-weight: 900; font-size: 21px; line-height: 1.2; letter-spacing: -.012em; }
.schritt p { margin: 0; max-width: 32em; font-size: 16px; line-height: 1.6; color: var(--text-2); }
.teil--dunkel .schritt p { color: var(--hell-text); }
.schritt p a { color: var(--violett); font-weight: 650; }
.schritte__danach { margin: 40px 0 0; padding-top: 22px; border-top: 1px solid var(--linie); max-width: 40em; font-size: 17px; line-height: 1.55; color: var(--text-2); }
.schritte__danach strong { font-weight: 900; color: var(--text); }

@media (min-width: 900px) {
  .schritte--quer { display: grid; grid-template-columns: repeat(var(--anzahl, 3), minmax(0, 1fr)); column-gap: 40px; }
  .schritte--quer::before, .schritte--quer::after { left: 20px; top: 19px; height: 2px; bottom: auto; }
  .schritte--quer::before { right: 40px; width: auto; }
  .schritte--quer::after { width: calc((100% - 60px) * var(--fuellung)); height: 2px; transition: width .2s linear; }
  .schritte--quer .schritt { padding: 64px 0 0; }
  .schritt__titel { font-size: 24px; }
  .schritt p { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .schritte::after { transition: none; } }

/* ======================================================================
   PREISTAFEL – gesetzte Beträge, vergleichbar, Premium eigenständig
   ====================================================================== */
.preisweg { margin: 0 0 56px; }
.preisweg__satz { margin: 0 0 6px; font-weight: 900; font-size: clamp(24px, 6.6vw, 30px); line-height: 1.12; letter-spacing: -.02em; }
.preisweg__ab { margin: 0 0 28px; font-size: 16px; line-height: 1.4; color: var(--text-leise); }
.preisweg__ab b { font-weight: 800; color: var(--text); }
.preisweg__hinweis { margin: 20px 0 0; max-width: 40em; font-size: 15px; line-height: 1.55; color: var(--text-leise); }

.stufen { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--text); }
.stufe { padding: 22px 0 24px; border-bottom: 1px solid var(--linie); }
.stufe__name { margin: 0 0 6px; font-weight: 700; font-size: 16px; line-height: 1.35; }
.stufe__betrag {
  margin: 0 0 12px;
  font-weight: 900;
  font-size: clamp(40px, 11.8vw, 52px);
  line-height: 1;
  letter-spacing: -.035em;
  white-space: nowrap;
}
.stufe__betrag small { margin-right: .18em; font-weight: 500; font-size: .4em; letter-spacing: 0; color: var(--text-leise); }
.stufe__text { margin: 0; max-width: 34em; font-size: 15px; line-height: 1.55; color: var(--text-leise); }
.stufe--premium { position: relative; }
.stufe--premium .stufe__name { color: var(--violett); }
.stufe--premium .stufe__betrag { color: var(--violett); }
.stufe--premium .stufe__betrag small { color: var(--violett); }

@media (min-width: 900px) {
  .stufen { display: grid; grid-template-columns: repeat(var(--anzahl, 3), minmax(0, 1fr)); column-gap: 40px; border-top: 0; }
  .stufe { padding: 28px 0 0; border-top: 2px solid var(--text); border-bottom: 0; }
  .stufe--premium { border-top-color: var(--violett); }
  .stufe__betrag { font-size: clamp(48px, 4.6vw, 68px); margin-bottom: 18px; }
  .stufe__text { font-size: 16px; }
  .preisweg__satz { font-size: 34px; }
}

/* Runde 2: Treppe – am Desktop steigen die Website-Stufen sichtbar an; die Beträge bleiben gleich groß und vergleichbar */
@media (min-width: 900px) {
  .stufen--treppe { align-items: start; }
  .stufen--treppe .stufe { position: relative; }
  .stufen--treppe .stufe:nth-child(1) { margin-top: 112px; }
  .stufen--treppe .stufe:nth-child(2) { margin-top: 56px; }
  .stufen--treppe .stufe + .stufe::before { content: ""; position: absolute; left: -21px; top: -2px; width: 2px; height: 58px; background: var(--text); }
  .stufen--treppe .stufe--premium::before { background: linear-gradient(var(--violett), var(--text)) !important; }
}

/* der monatliche Weg: eigene, ruhige Tafel */
.tafel { padding: 28px 22px 26px; border-radius: 18px; background: var(--grau-flaeche); }
.tafel__betrag { margin: 4px 0 20px; font-weight: 900; font-size: clamp(48px, 14vw, 64px); line-height: 1; letter-spacing: -.035em; white-space: nowrap; }
.tafel__betrag small { margin-left: .2em; font-weight: 500; font-size: .32em; letter-spacing: 0; color: var(--text-leise); }
/* Runde 2: dunkle Tafel – Kontrastbruch statt grauem Kasten */
.tafel--dunkel { background: var(--anthrazit); color: var(--weiss); }
.tafel--dunkel .preisweg__hinweis, .tafel--dunkel .tafel__betrag small { color: var(--hell-text); }
.tafel--dunkel .preisliste, .tafel--dunkel .preisliste__zeile { border-color: var(--linie-dunkel); }
.tafel--dunkel .tafel__betrag { color: var(--weiss); }
.tafel--dunkel .tafel__betrag::after { content: ""; display: block; width: 56px; height: 4px; margin-top: 18px; border-radius: 2px; background: var(--tuerkis); }
@media (min-width: 900px) {
  .tafel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px; align-items: start; padding: 48px 48px 44px; border-radius: 22px; }
  .tafel > .tafel__links { grid-column: 1; }
  .tafel > .tafel__rechts { grid-column: 2; }
  .tafel__betrag { font-size: 80px; margin-bottom: 0; }
}

/* Preisliste (dl): Position links, Betrag rechts */
.preisliste { margin: 0; border-top: 1px solid var(--linie); }
.preisliste__zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--linie); }
.preisliste dt { margin: 0; font-size: 16px; line-height: 1.4; }
.preisliste dd { margin: 0; flex: none; font-weight: 800; font-size: 16px; line-height: 1.4; font-variant-numeric: tabular-nums; white-space: nowrap; }
.preisliste__text { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--text-leise); }
.preisliste--klein dt, .preisliste--klein dd { font-size: 15px; }
.preisliste--klein .preisliste__zeile { padding: 11px 0; }
.teil--dunkel .preisliste, .teil--dunkel .preisliste__zeile { border-color: var(--linie-dunkel); }
@media (min-width: 768px) { .preisliste dt, .preisliste dd { font-size: 17px; } }

.listentitel { margin: 0 0 12px; font-weight: 800; font-size: 18px; line-height: 1.3; }
.preis-weitere { display: grid; gap: 40px; margin: 0 0 64px; }
@media (min-width: 900px) { .preis-weitere { grid-template-columns: 1fr 1fr; column-gap: 56px; } }
.steuerzeile { margin: 32px 0 0; max-width: 44em; font-size: 13px; line-height: 1.55; color: var(--text-leise); }
.teil--dunkel .steuerzeile { color: var(--hell-leise); }

/* ======================================================================
   FRAGEN – offene Liste, keine Karten, kein Kleben
   ====================================================================== */
.fragenliste { list-style: none; margin: 0; padding: 0; }
.fragenliste > li { padding: 24px 0 26px; border-top: 1px solid var(--linie); }
.fragenliste > li:last-child { border-bottom: 1px solid var(--linie); }
.fragenliste h3 { margin: 0 0 10px; font-weight: 900; font-size: 20px; line-height: 1.22; letter-spacing: -.012em; }
.fragenliste p { margin: 0; max-width: 34em; font-size: 16px; line-height: 1.62; color: var(--text-2); }
.fragenliste p a { color: var(--violett); font-weight: 650; }
.teil--dunkel .fragenliste > li { border-color: var(--linie-dunkel); }
.teil--dunkel .fragenliste p { color: var(--hell-text); }
@media (min-width: 768px) {
  .fragenliste h3 { font-size: 24px; }
  .fragenliste p { font-size: 18px; }
}

/* ======================================================================
   ABSCHLUSS (dunkel) – große Frage, ein Knopf, ein Zweitweg
   ====================================================================== */
.schluss { background: var(--anthrazit); color: var(--weiss); padding: var(--rhythmus) var(--innen) 72px; }
.schluss__titel { margin: 0 0 18px; max-width: 12em; font-weight: 900; font-size: clamp(36px, 10.4vw, 48px); line-height: 1.0; letter-spacing: -.035em; text-wrap: balance; }
.schluss__text { margin: 0 0 32px; max-width: 32em; font-size: 17px; line-height: 1.6; color: var(--hell-text); }
.schluss__handlung { display: flex; align-items: center; gap: 0; }
.schluss__linie { flex: 1 1 40px; min-width: 32px; max-width: 0; height: 2px; margin-right: 14px; border-radius: 2px; background: linear-gradient(90deg, rgb(115 52 255 / 0), var(--violett-hell)); transform-origin: left center; transition: transform .9s var(--lauf) .15s; }
.schluss__knopf { flex: 1 1 auto; max-width: 400px; }
.schluss__knopf .knopf { max-width: none; }
html.bewegt .schluss__handlung:not(.ist-an) .schluss__linie { transform: scaleX(0); }
.schluss__zweit { margin-top: 22px; }
.schluss__zeile { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--hell-leise); }
.schluss__zeile a { color: var(--weiss); }
@media (min-width: 1024px) {
  .schluss { padding-bottom: 120px; }
  .schluss__titel { max-width: 14em; font-size: clamp(56px, 6vw, 92px); margin-bottom: 28px; }
  .schluss__rechts { max-width: 36em; }
  .schluss__text { font-size: 20px; }
  .schluss__handlung { margin-top: 8px; }
  .schluss__linie { max-width: none; flex: 1 1 auto; margin-right: 24px; }
  .schluss__knopf { flex: 0 0 400px; }
}
@media (prefers-reduced-motion: reduce) { .schluss__linie { transition: none; } }

/* ======================================================================
   KONTAKTWEGE (groß, Unterkante türkis)
   ====================================================================== */
.kontakt__weg {
  display: inline-block;
  font-weight: 800;
  font-size: clamp(21px, 6vw, 26px);
  line-height: 1.25;
  letter-spacing: -.01em;
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid var(--tuerkis);
  padding: 8px 0 5px;
  min-height: 44px;              /* Tippfläche (Upload-Prüfung 20.10.2026) */
  box-sizing: border-box;
  transition: color .18s ease;
}
.kontakt__weg:hover, .kontakt__weg:active { color: var(--tuerkis); }
.teil--hell .kontakt__weg:hover { color: var(--violett); }
.kontakt__weg:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; border-radius: 2px; }
.kontakt__wege { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.kontakt__zeiten { margin: 0; font-size: 14px; line-height: 1.5; color: var(--hell-leise); }
@media (min-width: 768px) { .kontakt__weg { font-size: 28px; } }

/* ======================================================================
   STARTSEITEN-ABSCHLUSS „Ihr Vorhaben bei Flowlee.“ mit Karte
   ====================================================================== */
.kontakt { background: var(--anthrazit); color: var(--weiss); padding: var(--rhythmus) var(--innen) 64px; font-family: "Onest", system-ui, sans-serif; }
.kontakt__titel { margin: 0 0 18px; font-weight: 900; font-size: clamp(34px, 9.6vw, 44px); line-height: 1.02; letter-spacing: -.03em; max-width: 11em; }
.kontakt__text { margin: 0 0 32px; max-width: 32em; font-size: 17px; line-height: 1.62; color: var(--hell-text); }
.kontakt__karte { margin: 48px 0 0; }
@media (min-width: 1024px) {
  .kontakt__raster { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: 72px; align-items: center; }
  .kontakt__titel { font-size: clamp(52px, 5.2vw, 72px); }
  .kontakt__text { font-size: 19px; }
  .kontakt__karte { margin: 0; }
}

/* ======================================================================
   DEUTSCHLANDKARTE – Sitz Köln, Zusammenarbeit bundesweit
   ====================================================================== */
.karte { margin: 0; max-width: 460px; color: var(--weiss); }
.karte svg { display: block; width: 100%; height: auto; overflow: visible; }
.karte__ebene { fill: #1A1B1E; stroke: rgb(255 255 255 / .05); stroke-width: 1; stroke-linejoin: round; }
.karte__ebene--2 { fill: #1E1F22; stroke: rgb(255 255 255 / .08); }
.karte__land { fill: #2A2B30; stroke: rgb(255 255 255 / .62); stroke-width: 1.3; stroke-linejoin: round; }
.karte__spur { fill: none; stroke-width: 2.6; stroke-linecap: round; }
.karte__schein { fill: none; stroke-width: 9; stroke-linecap: round; opacity: .22; }
.karte__hof { fill: rgb(255 133 0 / .22); }
.karte__koeln { fill: var(--orange); stroke: #2A2B30; stroke-width: 2; }
.karte__name { fill: var(--weiss); font-family: "Onest", system-ui, sans-serif; font-weight: 800; font-size: 18px; letter-spacing: -.01em; paint-order: stroke; stroke: #202124; stroke-width: 5px; stroke-linejoin: round; }
.karte__unterschrift { display: grid; gap: 4px; margin-top: 18px; font-size: 14px; line-height: 1.5; color: var(--hell-text); }
.karte__unterschrift strong { font-weight: 800; color: var(--weiss); }
/* Runde 2: Lichtimpuls entlang der Spuren (seit Runde 3 in der Dauerschleife, s. u.) */
.karte__funke { fill: none; stroke: #FFFFFF; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 18 var(--laenge); stroke-dashoffset: 18; opacity: 0; }
html.bewegt .karte.ist-gezeichnet .karte__funke { animation: karte-funke 1.6s cubic-bezier(.4,.1,.3,1) forwards; animation-delay: calc(2.6s + var(--i) * .45s); }
@keyframes karte-funke { 0% { opacity: 0; stroke-dashoffset: 18; } 15% { opacity: .9; } 85% { opacity: .5; } 100% { opacity: 0; stroke-dashoffset: calc(-1 * var(--laenge)); } }
@media (prefers-reduced-motion: reduce) { .karte__funke { display: none; } }

/* Sequenz: Spuren ziehen nacheinander aus Köln ins Land (nur mit Skript, nur einmal) */
html.js .karte:not(.ist-gezeichnet) :is(.karte__spur, .karte__schein) { stroke-dashoffset: var(--laenge); }
:is(.karte__spur, .karte__schein) { stroke-dasharray: var(--laenge) var(--laenge); stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--lauf); transition-delay: calc(.5s + var(--i) * .7s); }
html.js .karte:not(.ist-gezeichnet) .karte__hof { opacity: 0; transform: scale(.4); }
.karte__hof { transform-box: fill-box; transform-origin: center; transition: opacity .8s ease, transform .8s var(--lauf); }
@media (prefers-reduced-motion: reduce) {
  html.js .karte:not(.ist-gezeichnet) :is(.karte__spur, .karte__schein) { stroke-dashoffset: 0; }
  html.js .karte:not(.ist-gezeichnet) .karte__hof { opacity: 1; transform: none; }
  .karte__spur, .karte__schein, .karte__hof { transition: none; }
}

/* Runde 3 (Dennis, 20.10.2026): Dauerschleife + Bundesländer.
   Spuren: ziehen aus Köln los, der Lichtpunkt läuft nach, alles verblasst, dann von vorn – 8 s je Durchgang.
   Länder: feine Linien; nacheinander glimmt je eines weich auf (zwei leichte Pulse, unter 3 je Sekunde, geringe
   Helligkeit – kein Blinken). 16 s für alle 16, Violett/Türkis im Wechsel. Nur mit Bewegung, nur im Sichtbereich. */
.karte__bundesland { fill: #7334FF; fill-opacity: 0; stroke: rgb(255 255 255 / .16); stroke-width: .8; stroke-linejoin: round; }
.karte__bundesland--tuerkis { fill: #00C8BE; }
html.bewegt .karte.ist-gezeichnet .karte__bundesland { animation: karte-glimmen 16s linear infinite; animation-delay: calc(1.2s + var(--n) * 1s); }
html.bewegt .karte.ist-gezeichnet .karte__bundesland--tuerkis { animation-name: karte-glimmen-tuerkis; }
@keyframes karte-glimmen { 0% { fill-opacity: 0; } 1.5% { fill-opacity: .42; } 2.5% { fill-opacity: .16; } 4% { fill-opacity: .46; } 7%, 100% { fill-opacity: 0; } }
@keyframes karte-glimmen-tuerkis { 0% { fill-opacity: 0; } 1.5% { fill-opacity: .3; } 2.5% { fill-opacity: .12; } 4% { fill-opacity: .34; } 7%, 100% { fill-opacity: 0; } }
html.bewegt .karte.ist-gezeichnet .karte__spur { transition: none; animation: karte-zug 8s cubic-bezier(.4,.1,.3,1) infinite; animation-delay: calc(.5s + var(--i) * .7s); }
html.bewegt .karte.ist-gezeichnet .karte__schein { transition: none; animation: karte-zug-schein 8s cubic-bezier(.4,.1,.3,1) infinite; animation-delay: calc(.5s + var(--i) * .7s); }
html.bewegt .karte.ist-gezeichnet .karte__funke { animation: karte-funke-schleife 8s linear infinite; animation-delay: calc(.5s + var(--i) * .7s); }
@keyframes karte-zug { 0% { stroke-dashoffset: var(--laenge); opacity: 1; } 22% { stroke-dashoffset: 0; } 78% { stroke-dashoffset: 0; opacity: 1; } 92%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes karte-zug-schein { 0% { stroke-dashoffset: var(--laenge); opacity: .22; } 22% { stroke-dashoffset: 0; } 78% { stroke-dashoffset: 0; opacity: .22; } 92%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes karte-funke-schleife { 0%, 24% { opacity: 0; stroke-dashoffset: 18; } 28% { opacity: .9; } 46% { opacity: .5; } 50%, 100% { opacity: 0; stroke-dashoffset: calc(-1 * var(--laenge)); } }
html.js .karte:not(.im-blick) :is(.karte__spur, .karte__schein, .karte__funke, .karte__bundesland) { animation-play-state: paused; }

/* ======================================================================
   EINBLENDEN – ein Rhythmus für alle Seiten. Nur Elemente unterhalb des ersten Bildschirms,
   nur mit Skript, nicht bei reduzierter Bewegung (system.js setzt data-zeigen).
   ====================================================================== */
[data-zeigen] { opacity: 0; transform: translateY(16px); transition: opacity .55s var(--lauf), transform .55s var(--lauf); transition-delay: calc(var(--n, 0) * 70ms); }
[data-zeigen].ist-sichtbar { opacity: 1; transform: none; }

/* Momente (Runde 2): der Vorzustand wird ohne Übergang gesetzt; Übergänge laufen erst ab .ist-an */
html.bewegt [data-moment]:not(.ist-an), html.bewegt [data-moment]:not(.ist-an) * { transition: none !important; }

/* Logoband der Startseite läuft nur im Sichtbereich */
html.js .vertrauen:not(.im-blick) .vertrauen__lauf { animation-play-state: paused; }

/* ======================================================================
   FUSS
   ====================================================================== */
.fuss { background: var(--tief); color: var(--hell-leise); padding: 56px var(--innen) calc(40px + env(safe-area-inset-bottom, 0px)); font-family: "Onest", system-ui, sans-serif; }
.fuss__raster { display: grid; gap: 36px; }
.fuss__logo { display: inline-flex; align-items: center; min-height: 44px; }
.fuss__logo img { display: block; width: 99.5px; height: 26px; }
.fuss__adresse { margin: 16px 0 0; font-size: 14px; line-height: 1.6; color: var(--hell-text); font-style: normal; }
.fuss__adresse a { display: inline-block; padding: 10px 0; color: var(--weiss); text-decoration: underline; text-decoration-color: var(--tuerkis); text-underline-offset: 4px; }
.fuss__adresse { line-height: 1.5; }
.fuss__titel { margin: 0 0 12px; font-weight: 700; font-size: 13px; line-height: 1.3; color: var(--hell-leise); }
.fuss__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.fuss__liste a, .fuss__liste button {
  display: inline-block;
  padding: 12px 0;
  border: 0;
  background: none;
  color: var(--weiss);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  cursor: pointer;
}
.fuss__liste--leise a, .fuss__liste--leise button { color: var(--hell-text); font-weight: 500; }
.fuss__liste a:hover, .fuss__liste button:hover { color: var(--tuerkis); }
.fuss a:focus-visible, .fuss button:focus-visible { outline: 3px solid var(--weiss); outline-offset: 3px; border-radius: 2px; }
.fuss__socials { display: flex; gap: 2px; margin: 18px 0 0 -10px; }
.fuss__social { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--hell-leise); transition: color .18s ease, background-color .18s ease; }
.fuss__social svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fuss__social:hover, .fuss__social:active { color: var(--weiss); background: rgb(255 255 255 / .06); }
.fuss__copy { margin: 40px 0 0; padding-top: 22px; border-top: 1px solid var(--linie-dunkel); font-size: 13px; line-height: 1.5; }
@media (min-width: 768px) {
  .fuss { padding-top: 80px; }
  .fuss__raster { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; }
}
/* knapper Fuß (Zielseite /anfragen/: keine Ausgänge außer dem Rechtlichen) */
.fuss--knapp { padding-top: 28px; }
.fuss--knapp .fuss__zeile { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; align-items: center; font-size: 13px; }
.fuss--knapp nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.fuss--knapp a, .fuss--knapp button { color: var(--hell-text); font: inherit; font-size: 13px; text-decoration: none; background: none; border: 0; padding: 13px 0; min-height: 44px; box-sizing: border-box; cursor: pointer; }
.fuss--knapp a:hover, .fuss--knapp button:hover { color: var(--weiss); }

@media (prefers-reduced-motion: reduce) {
  [data-zeigen] { opacity: 1; transform: none; transition: none; }
  .fuss__social, .kontakt__weg { transition: none; }
}