/* ==========================================================================
   Vorlage 12 · Glas · Lichtkante (Demo)
   --------------------------------------------------------------------------
   Getöntes Schwarz, helle Schrift, Orange als einzige Farbe. Glaskarten liegen
   über orangem Leuchten, sonst wäre das Glas unsichtbar.
   Alle Farben, Schriften und Maße stehen in tokens.css. Hier nur Variablen.
   Bewegung: im <html>-Tag data-bewegung="starr | mittel | dynamisch".
   ========================================================================== */

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-hoehe) + 1rem); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--schrift); font-size: var(--text-groesse); line-height: var(--text-zeile);
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent-hell); outline-offset: 3px; }
main { overflow-x: clip; }
.behaelter { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprunglink { position: absolute; left: var(--rand); top: -5rem; z-index: 50; background: var(--surface); color: var(--text); padding: .75rem 1.1rem; border-radius: var(--radius-klein); }
.sprunglink:focus { top: .75rem; }

h1, h2, h3 { font-weight: var(--gewicht-titel); }
.abschnitt-titel {
  font-size: clamp(2rem, 1.3rem + 2.9vw, 3.5rem);   /* 32 px am Handy, 56 px am Computer */
  line-height: 1.04; letter-spacing: -.025em; max-width: 18ch; text-wrap: balance;
}
.abschnitt-satz { margin-top: 1.25rem; max-width: 36rem; color: var(--muted); font-size: clamp(1.125rem, 1.05rem + .3vw, 1.25rem); }
.abschnitt-kopf { max-width: 46rem; }
.block-titel { font-size: 1rem; font-weight: 600; color: var(--muted); letter-spacing: .01em; }
.hinweis { margin-top: 1.75rem; max-width: 46rem; color: var(--muted); font-size: 1rem; }

/* ---------- Glas ----------
   Ohne backdrop-filter (ältere Browser) gilt der feste, dunkle Grund. */
.glas {
  background-color: var(--glas-fest);
  border: .8px solid var(--border);
  box-shadow: var(--glas-kante);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glas { background-color: var(--glas); -webkit-backdrop-filter: var(--glas-blur); backdrop-filter: var(--glas-blur); }
  .glas-gross { -webkit-backdrop-filter: var(--glas-blur-gross); backdrop-filter: var(--glas-blur-gross); }
}
.glas-gross {
  border-radius: var(--radius-gross);
  background-image:
    radial-gradient(55% 60% at 100% 0%, var(--leuchten-1), transparent 70%),
    radial-gradient(45% 50% at 0% 100%, var(--leuchten-2), transparent 70%);
}

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3.25rem; padding: .7rem 1.6rem;
  background-color: var(--accent);
  background-image: linear-gradient(135deg, var(--accent), var(--accent-tief));
  color: var(--accent-schrift);
  border: 0; border-radius: var(--radius-rund);
  box-shadow: var(--knopf-schatten);
  font: inherit; font-weight: 650; font-size: 1.0625rem; line-height: 1.1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.knopf:hover { background-image: linear-gradient(135deg, var(--accent-hell), var(--accent)); }
.knopf-zweit {
  background: var(--accent-schleier); color: var(--text);
  box-shadow: inset 0 0 0 .8px var(--accent-rand);
}
.knopf-zweit:hover { background: var(--accent-schleier-stark); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .knopf-zweit { -webkit-backdrop-filter: var(--glas-blur); backdrop-filter: var(--glas-blur); }
}
.knopf-klein { min-height: 2.75rem; padding: .5rem 1.15rem; font-size: 1rem; }

/* ---------- Bildrahmen (Platzhalter für Fotos) ---------- */
.bild-platzhalter {
  position: relative; display: flex; align-items: flex-end;
  aspect-ratio: var(--format, 3 / 2);
  background:
    radial-gradient(70% 60% at 100% 0%, var(--leuchten-2), transparent 70%),
    linear-gradient(90deg, var(--linie) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(var(--linie) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--surface);
  border: .8px solid var(--border); border-radius: var(--radius);
  overflow: hidden;
}
.bild-platzhalter figcaption {
  margin: .75rem; padding: .5rem .75rem; max-width: calc(100% - 1.5rem);
  background: var(--glas-dicht); color: var(--text); border-radius: var(--radius-klein);
  font-size: 1rem; line-height: 1.35;
}

/* ---------- Marke: ein kleiner Horizont vor dem Namen ---------- */
.marke, .fuss-marke { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; letter-spacing: -.03em; text-decoration: none; }
.marke { font-size: 1.375rem; margin-right: auto; }
.marke-strich {
  width: 1.15em; height: .55em; flex: none;
  border-top: 2px solid var(--accent); border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  box-shadow: 0 -3px 8px -2px var(--horizont-glut);
}

/* ---------- Kopf ----------
   Klebt oben. Die Glasfläche liegt in ::before, damit sie beim Scrollen weich
   einblenden kann (dynamisch). Ohne JavaScript und in starr/mittel ist sie immer da. */
.kopf { position: sticky; top: 0; z-index: 30; }
.kopf::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--glas-fest); border-bottom: .8px solid var(--linie);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .kopf::before { background: var(--glas-kopf); -webkit-backdrop-filter: var(--glas-blur); backdrop-filter: var(--glas-blur); }
}
.kopf-innen { display: flex; align-items: center; gap: 1.75rem; min-height: var(--kopf-hoehe); }
.kopf-nav ul { display: flex; gap: 1.75rem; }
.kopf-nav a { text-decoration: none; font-weight: 500; font-size: 1rem; color: var(--muted); }
.kopf-nav a:hover { color: var(--text); }
@media (max-width: 51.99rem) { .kopf-nav { display: none; } }

/* ---------- 1 · Erster Bildschirm ---------- */
.held {
  position: relative; isolation: isolate; overflow: clip;
  padding-block: clamp(2.5rem, 6vw, 6rem) clamp(3rem, 5vw, 4.5rem);
  min-height: calc(100svh - var(--kopf-hoehe));
  display: flex; flex-direction: column; justify-content: center; gap: clamp(2.5rem, 5vw, 4rem);
  --horizont-hoehe: 60%;                 /* wo der Scheitel des Bogens liegt (senkrecht) */
  --horizont-x: 50%;                     /* und waagrecht */
}
.held-raster { display: grid; gap: 3rem; align-items: center; }
.held-zeile { font-size: 1rem; font-weight: 600; color: var(--accent-hell); letter-spacing: .01em; }
.held h1 {
  margin-top: 1.25rem;
  font-size: clamp(2.5rem, 1.2rem + 5.2vw, 5rem);   /* 40 px am Handy, 80 px am Computer */
  line-height: 1.02; letter-spacing: -.03em; max-width: 12ch; text-wrap: balance;
}
.akzent { color: var(--accent); }
.held-satz { margin-top: 1.75rem; max-width: 34rem; color: var(--muted); font-size: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem); }
.held-aktion { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: .75rem; }

/* Lichthorizont: ein riesiger dunkler Kreis, dessen oberer Rand glüht. Die Maske
   lässt ihn zu den Seiten hin auslaufen, damit die Linie in der Mitte am hellsten ist. */
.horizont {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  -webkit-mask-image: radial-gradient(80% 95% at var(--horizont-x) var(--horizont-hoehe), var(--maske) 30%, transparent 78%);
  mask-image: radial-gradient(80% 95% at var(--horizont-x) var(--horizont-hoehe), var(--maske) 30%, transparent 78%);
}
.horizont-hof {
  position: absolute; left: var(--horizont-x); top: calc(var(--horizont-hoehe) - 34%);
  width: 150%; height: 52%;              /* breiter als das Fenster, die Maske schneidet es weich ab */
  transform: translateX(-50%);
  background: radial-gradient(40% 55% at 50% 70%, var(--horizont-hof), transparent 72%);
}
.horizont-bogen {
  position: absolute; left: var(--horizont-x); top: var(--horizont-hoehe);
  width: max(165%, 80rem); aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--horizont-boden);
  box-shadow:
    0 0 0 1.5px var(--horizont-linie),
    0 -3px 14px 1px var(--horizont-glut),
    0 -18px 70px 6px var(--horizont-hof),
    inset 0 14px 40px -14px var(--horizont-glut);
}
/* zweites Leuchten, das in „dynamisch" langsam atmet */
.horizont-bogen::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 -12px 60px 8px var(--horizont-glut);
  opacity: .45;
}
.horizont-korn {
  position: absolute; inset: 0;
  background-image: var(--korn); background-size: 180px 180px;
  opacity: .07; mix-blend-mode: soft-light;
}

/* Glaskarte „Beispieltag" */
.held-karte {
  position: relative; justify-self: stretch;
  padding: 1.6rem 1.75rem 1.4rem; border-radius: var(--radius);
  background-image: radial-gradient(70% 60% at 100% 0%, var(--leuchten-1), transparent 70%);
}
.karte-kopf { display: flex; align-items: center; gap: .6rem; font-size: 1rem; font-weight: 600; color: var(--muted); }
.karte-punkt { width: .55rem; height: .55rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-schleier); flex: none; }
.karte-zahl {
  margin-top: 1rem; display: flex; align-items: baseline; gap: .2rem;
  font-size: clamp(3.5rem, 2.6rem + 2.8vw, 4.75rem); font-weight: var(--gewicht-titel);
  line-height: 1; letter-spacing: -.03em; color: var(--accent); font-variant-numeric: tabular-nums;
}
.karte-zahl .plus { font-size: .6em; font-weight: 500; }
.karte-zahl [data-zaehlen] { display: inline-block; }
.karte-einheit { font-size: .4em; font-weight: 600; letter-spacing: 0; margin-left: .35rem; color: var(--text); }
.karte-was { margin-top: .5rem; color: var(--text); }
.karte-liste { margin-top: 1.25rem; display: grid; }
.karte-liste li { display: flex; gap: .75rem; padding-block: .6rem; border-top: .8px solid var(--linie); color: var(--muted); font-size: 1rem; }
.karte-n { min-width: 1.75rem; color: var(--accent-hell); font-weight: 650; font-variant-numeric: tabular-nums; }
.karte-fuss { margin-top: .75rem; font-size: 1rem; color: var(--muted); }

.chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.chip {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .55rem 1.1rem; border-radius: var(--radius-rund); font-size: 1rem; color: var(--text);
}
.chip::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: var(--accent); flex: none; }

@media (min-width: 64rem) {
  /* Scheitel unter der Glaskarte: die Linie fällt nach links ab und läuft unter dem Text durch. */
  /* an den Inhalt gebunden, nicht an die Fenstergröße: so bleibt der Text auch bei 1920 und 2560 px frei */
  .held { --horizont-hoehe: calc(50% + 8.25rem); --horizont-x: calc(50% + 14.4rem); }
  .horizont-bogen { width: max(148.5rem, 100%); }
  .held-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 4.5fr); gap: clamp(3rem, 6vw, 6rem); }
  .held-karte { align-self: end; }
}
@media (max-width: 63.99rem) {
  .held { --horizont-hoehe: 52%; }
  .held-karte { max-width: 26rem; }
}

/* ---------- 2 · Problem-Auswahl ---------- */
.probleme { position: relative; isolation: isolate; padding-block: var(--abschnitt) 0; }
.probleme::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 42%;
  width: min(140%, 90rem); height: 70%; transform: translateX(-50%);
  background:
    radial-gradient(35% 45% at 18% 60%, var(--leuchten-1), transparent 70%),
    radial-gradient(30% 40% at 85% 35%, var(--leuchten-2), transparent 70%);
  pointer-events: none;
}
.reiter-leiste { margin-top: 3rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .5rem; }
.reiter {
  display: inline-flex; align-items: center; justify-content: space-between; gap: .75rem;
  min-height: 3rem; padding: .5rem 1.1rem;
  background: var(--feld); color: var(--muted);
  border: .8px solid var(--border); border-radius: var(--radius-rund);
  font: inherit; font-size: 1rem; font-weight: 550; cursor: pointer; text-align: left;
}
.reiter:hover { color: var(--text); border-color: var(--accent-rand); }
.reiter-nr { font-variant-numeric: tabular-nums; font-weight: 500; }
.reiter[aria-selected="true"] { background: var(--accent-schleier); border-color: var(--accent-rand); color: var(--text); }
.reiter[aria-selected="true"] .reiter-nr { color: var(--accent-hell); }
@media (min-width: 64rem) {
  .reiter-leiste { display: flex; flex-wrap: wrap; }
}
/* Ohne JavaScript gibt es keine Reiter: alle Tafeln stehen untereinander. */
:root:not(.js) .reiter-leiste { display: none; }
.tafeln { margin-top: 1.25rem; display: grid; gap: 1.25rem; }
:root:not(.js) .tafeln { margin-top: 3rem; }

.tafel { display: grid; gap: 2.5rem; padding: clamp(1.5rem, 4.5vw, 3.75rem); }
.tafel[hidden] { display: none; }
.tafel-name { font-size: 1.125rem; letter-spacing: 0; color: var(--text); }
.tafel-nr { color: var(--accent-hell); margin-right: .35rem; font-variant-numeric: tabular-nums; }
.tafel-aussage {
  margin-top: 1.25rem; max-width: 16ch;
  font-size: clamp(2.125rem, 1.2rem + 3.4vw, 3.75rem); font-weight: var(--gewicht-aussage);
  line-height: 1.06; letter-spacing: -.03em; color: var(--text); text-wrap: balance;
}
.tafel-loesung { margin-top: 1.5rem; max-width: 34rem; color: var(--muted); }
.tafel-links .knopf { margin-top: 2rem; }
.tafel-rechts { display: grid; gap: 1rem; align-content: start; }
.kette-block, .potenzial-block {
  padding: 1.4rem 1.5rem; border-radius: var(--radius);
  background: var(--feld); border: .8px solid var(--linie);
}
.kette { margin-top: 1rem; display: grid; gap: .95rem; }
.kette li { position: relative; padding-left: 2rem; }
.kette li::before {
  content: ""; position: absolute; left: 0; top: .35em; width: .8rem; height: .8rem; border-radius: 50%;
  border: 2px solid var(--accent); background: var(--bg); box-shadow: 0 0 10px var(--accent-schleier-stark);
}
.kette li:not(:last-child)::after {
  content: ""; position: absolute; left: calc(.4rem - 1px); top: calc(.35em + .8rem);
  height: calc(100% + .95rem - .8rem); width: 2px; background: var(--accent-rand);
}
.potenzial { margin-top: .5rem; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .5rem; }
.potenzial-vor, .potenzial-einheit { color: var(--muted); font-size: 1.0625rem; }
.potenzial-einheit { flex-basis: 100%; }
.potenzial-zahl {
  display: inline-block; font-size: clamp(3.25rem, 2.4rem + 2.8vw, 4.5rem); font-weight: var(--gewicht-titel);
  line-height: 1.05; letter-spacing: -.03em; color: var(--accent); font-variant-numeric: tabular-nums;
}
@media (min-width: 60rem) {
  .tafel { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
}

/* ---------- 3 · Leistungen (klebender Abschnitt) ---------- */
.leistungen { position: relative; padding-block: var(--abschnitt); }
.leistungen-raster { display: grid; gap: 3rem; align-items: start; }
.leistungen-steher { position: relative; isolation: isolate; }
.leistungen-steher::before {
  content: ""; position: absolute; z-index: -1; left: -15%; bottom: -25%; width: 110%; height: 90%;
  background: radial-gradient(closest-side, var(--leuchten-1), transparent);
  pointer-events: none;
}
.steher-karte {
  margin-top: 2.5rem; max-width: 22rem; padding: 1.6rem 1.75rem; border-radius: var(--radius);
  background-image: radial-gradient(70% 60% at 0% 100%, var(--leuchten-1), transparent 70%);
}
.steher-zahl { margin-top: .5rem; font-size: 4rem; font-weight: var(--gewicht-titel); line-height: 1; letter-spacing: -.03em; color: var(--accent); }
.steher-zahl [data-zaehlen] { display: inline-block; }
.steher-einheit { font-size: 1.5rem; letter-spacing: -.01em; color: var(--text); }
.steher-was { margin-top: .75rem; color: var(--muted); font-size: 1rem; }
.leistungen-liste { display: grid; gap: 1.25rem; }
.leistung {
  position: relative; padding: clamp(1.6rem, 3.2vw, 2.75rem); border-radius: var(--radius);
  background-image: radial-gradient(45% 55% at 100% 0%, var(--leuchten-2), transparent 70%);
}
.leistung-nr { font-weight: 600; color: var(--accent-hell); font-variant-numeric: tabular-nums; }
.leistung h3 { margin-top: .75rem; font-size: clamp(1.625rem, 1.3rem + 1vw, 2rem); line-height: 1.12; letter-spacing: -.015em; }
.leistung h3 + p { margin-top: 1rem; max-width: 38rem; color: var(--muted); }
.leistung-preis { margin-top: 1.5rem; padding-top: 1rem; border-top: .8px solid var(--linie); font-weight: 650; }
@media (min-width: 60rem) {
  .leistungen-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(3rem, 6vw, 6rem); }
  .leistungen-steher { position: sticky; top: calc(var(--kopf-hoehe) + 3rem); }
  .leistung { min-height: 22rem; display: flex; flex-direction: column; }
  .leistung-preis { margin-top: auto; }
  .leistung h3 + p { margin-bottom: 1.75rem; }
}

/* ---------- 4 · Ablauf ---------- */
.ablauf { padding-block: 0 var(--abschnitt); }
.schritte { position: relative; margin-top: 3.5rem; display: grid; gap: 2.25rem; }
.schritte::before {
  content: ""; position: absolute; left: .45rem; top: .5rem; bottom: .5rem; width: 2px;
  background: linear-gradient(var(--accent), var(--accent-rand));
  transform-origin: 50% 0;
}
.schritt { position: relative; padding-left: 2.5rem; }
.schritt::before {
  content: ""; position: absolute; left: 0; top: .3rem; width: 1rem; height: 1rem; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 5px var(--bg), 0 0 18px 2px var(--horizont-glut);
}
.schritt-dauer { font-weight: 600; color: var(--accent-hell); }
.schritt h3 { margin-top: .4rem; font-size: 1.625rem; line-height: 1.15; letter-spacing: -.015em; }
.schritt-nr { color: var(--muted); font-weight: 500; margin-right: .25rem; }
.schritt h3 + p { margin-top: .6rem; color: var(--muted); max-width: 22rem; }
@media (min-width: 60rem) {
  .schritte { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
  .schritte::before { left: .5rem; right: .5rem; top: .45rem; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-rand)); transform-origin: 0 50%; }
  .schritt { padding-left: 0; padding-top: 2.5rem; }
  .schritt::before { top: 0; }
}
.zusagen { margin-top: clamp(3.5rem, 6vw, 5rem); display: grid; gap: 1.5rem; }
.zusagen li { padding-top: 1.1rem; border-top: .8px solid var(--border); color: var(--muted); }
.zusage-titel { display: block; margin-bottom: .3rem; color: var(--text); font-weight: 650; }
@media (min-width: 52rem) { .zusagen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }

/* ---------- 5 · Team ---------- */
.team { padding-block: 0 var(--abschnitt); }
.team-raster { display: grid; gap: 3rem; }
.personen { display: grid; gap: 2.5rem 1.5rem; }
.person h3 { margin-top: 1.25rem; font-size: 1.625rem; line-height: 1.15; letter-spacing: -.015em; }
.person-rolle { margin-top: .25rem; color: var(--accent-hell); font-weight: 600; }
.person-rolle + p { margin-top: .6rem; color: var(--muted); max-width: 26rem; }
@media (min-width: 36rem) { .personen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .team-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; } }

/* ---------- 6 · Kontakt ---------- */
.kontakt { position: relative; isolation: isolate; padding-block: 0 var(--abschnitt); }
.kontakt::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 5%;
  width: min(130%, 90rem); height: 90%; transform: translateX(-50%);
  background:
    radial-gradient(35% 45% at 25% 45%, var(--leuchten-1), transparent 70%),
    radial-gradient(30% 40% at 80% 70%, var(--leuchten-2), transparent 70%);
  pointer-events: none;
}
.kontakt-tafel { display: grid; gap: 3rem; padding: clamp(1.5rem, 5vw, 4rem); }
.kontakt-wege { margin-top: 2.25rem; display: grid; gap: 1.25rem; }
.kontakt-wege li { display: grid; gap: .15rem; color: var(--muted); }
.kontakt-wege a { color: var(--text); font-size: 1.25rem; font-weight: 600; }
.formular { display: grid; gap: 1.25rem 1rem; align-content: start; }
.feld label { display: block; margin-bottom: .45rem; color: var(--muted); font-size: 1rem; font-weight: 550; }
.feld input, .feld select, .feld textarea {
  width: 100%; min-height: 3.25rem; padding: .75rem 1rem;
  background: var(--feld); color: var(--text);
  border: .8px solid var(--border); border-radius: var(--radius-klein);
  font: inherit; font-size: 1.0625rem;
}
.feld textarea { resize: vertical; min-height: 7.5rem; }
.feld select option { background: var(--surface); color: var(--text); }
.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: var(--accent-rand); }
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible { outline: 3px solid var(--accent-hell); outline-offset: 1px; }
.formular-ende { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; margin-top: .25rem; }
.formular-hinweis { flex: 1 1 16rem; color: var(--muted); font-size: 1rem; }
.formular-meldung { flex-basis: 100%; padding: .75rem 1rem; border-radius: var(--radius-klein); background: var(--accent-schleier); box-shadow: inset 0 0 0 .8px var(--accent-rand); }
.formular-meldung:empty { display: none; }
@media (min-width: 40rem) {
  .formular { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feld-breit { grid-column: 1 / -1; }
}
@media (min-width: 64rem) { .kontakt-tafel { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(3rem, 5vw, 5rem); } }

/* ---------- Fuß ---------- */
.fuss { border-top: .8px solid var(--linie); padding-top: clamp(3rem, 6vw, 4.5rem); font-size: 1rem; color: var(--muted); }
.fuss-raster { display: grid; gap: 1.75rem; }
.fuss-raster p + p { margin-top: .75rem; }
.fuss-marke { font-size: 1.5rem; color: var(--text); margin-bottom: .75rem; }
.fuss address { font-style: normal; line-height: 1.7; }
.fuss-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.fuss-links a { color: var(--text); }
.fuss-demo { margin-top: 2.5rem; padding-top: 1rem; border-top: .8px solid var(--linie); }
/* D29: letzte Zeile, ganz unten mittig */
.fuss-zeile { width: 100%; max-width: none; text-align: center; padding: 1.5rem 1rem 1.25rem; font-size: 1rem; color: var(--muted); }
@media (min-width: 48rem) { .fuss-raster { grid-template-columns: 4fr 5fr 3fr; } }

/* ==========================================================================
   Bewegung (Grundstufe dieser Vorlage: dynamisch)
   starr      nichts bewegt sich, nur Knöpfe, Links und Reiter reagieren
   mittel     erster Bildschirm baut sich auf, Abschnitte gleiten ein, Zahlen zählen,
              Tafeln wechseln weich, Kettenglieder erscheinen nacheinander, die Ablauf-Linie zeichnet sich
   dynamisch  dazu glüht der Horizont langsam, die Glaskarte schwebt, die Kopfzeile wird
              beim Scrollen schmaler, Leistungen und Bilder wachsen beim Scrollen mit
   Nur transform und opacity werden animiert. „Bewegung reduzieren" am Gerät gewinnt immer.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* --- mittel und dynamisch --- */
  :root:not([data-bewegung="starr"]) { scroll-behavior: smooth; }
  :root.js:not([data-bewegung="starr"]) [data-auftritt] { transition: opacity .8s var(--ease), transform .8s var(--ease); }
  :root.js:not([data-bewegung="starr"]) [data-auftritt]:not(.ist-sichtbar) { opacity: 0; transform: translateY(1.5rem); }

  :root:not([data-bewegung="starr"]) .held-zeile { animation: rein .9s var(--ease) both; }
  :root:not([data-bewegung="starr"]) .held h1 { animation: rein .9s var(--ease) .08s both; }
  :root:not([data-bewegung="starr"]) .held-satz { animation: rein .9s var(--ease) .16s both; }
  :root:not([data-bewegung="starr"]) .held-aktion { animation: rein .9s var(--ease) .24s both; }
  :root:not([data-bewegung="starr"]) .held-karte { animation: karte-rein 1.1s var(--ease) .3s both; }
  :root:not([data-bewegung="starr"]) .chips { animation: rein .9s var(--ease) .45s both; }
  :root:not([data-bewegung="starr"]) .horizont { animation: aufgehen 1.6s var(--ease) both; }

  :root.js:not([data-bewegung="starr"]) .tafel:not([hidden]) { animation: tafel-rein .55s var(--ease) both; }
  :root.js:not([data-bewegung="starr"]) .tafel:not([hidden]) .kette li { animation: rein .6s var(--ease) both; }
  :root.js:not([data-bewegung="starr"]) .tafel:not([hidden]) .kette li:nth-child(2) { animation-delay: .12s; }
  :root.js:not([data-bewegung="starr"]) .tafel:not([hidden]) .kette li:nth-child(3) { animation-delay: .24s; }

  :root.js:not([data-bewegung="starr"]) .schritte::before { transition: transform 1.4s var(--ease) .2s; }
  :root.js:not([data-bewegung="starr"]) .schritte:not(.linie-da)::before { transform: scale(0); }

  :root.js:not([data-bewegung="starr"]) .person .bild-platzhalter { transition: transform 1.1s var(--ease); }
  :root.js:not([data-bewegung="starr"]) .person:not(.ist-sichtbar) .bild-platzhalter { transform: scale(1.04); }

  :root:not([data-bewegung="starr"]) .knopf { transition: transform .2s var(--ease); }
  :root:not([data-bewegung="starr"]) .knopf:active { transform: scale(.97); }
  :root:not([data-bewegung="starr"]) .reiter { transition: color .2s, background-color .2s, border-color .2s; }

  /* --- nur dynamisch --- */
  :root[data-bewegung="dynamisch"] .horizont-hof { animation: glut 9s ease-in-out infinite alternate; }
  :root[data-bewegung="dynamisch"] .horizont-bogen::after { animation: glimmen 6s ease-in-out infinite alternate; }
  :root[data-bewegung="dynamisch"] .held-karte { animation: karte-rein 1.1s var(--ease) .3s both, schweben 7s ease-in-out 1.4s infinite alternate; }
  :root[data-bewegung="dynamisch"] .karte-punkt { animation: puls 2.4s ease-in-out infinite; }
  :root[data-bewegung="dynamisch"] .steher-karte { animation: schweben 8s ease-in-out infinite alternate; }

  :root.js[data-bewegung="dynamisch"] .kopf::before { transition: opacity .5s var(--ease), transform .5s var(--ease); transform-origin: 50% 0; }
  :root.js[data-bewegung="dynamisch"] .kopf:not(.ist-gescrollt)::before { opacity: 0; }
  :root.js[data-bewegung="dynamisch"] .kopf.ist-gescrollt::before { transform: scaleY(.84); }
  :root.js[data-bewegung="dynamisch"] .kopf-innen { transition: transform .5s var(--ease); }
  :root.js[data-bewegung="dynamisch"] .kopf.ist-gescrollt .kopf-innen { transform: translateY(-.36rem); }
}
@keyframes rein { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: none; } }
@keyframes karte-rein { from { opacity: 0; transform: translateY(2rem) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes tafel-rein { from { opacity: .2; transform: translateY(.75rem); } to { opacity: 1; transform: none; } }
@keyframes aufgehen { from { opacity: .3; transform: translateY(3rem); } to { opacity: 1; transform: none; } }
@keyframes glut { from { opacity: .7; transform: translateX(-50%) scale(.96); } to { opacity: 1; transform: translateX(-50%) scale(1.05); } }
@keyframes glimmen { from { opacity: .25; } to { opacity: .8; } }
@keyframes schweben { from { transform: translateY(0); } to { transform: translateY(-.7rem); } }
@keyframes puls { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }

/* An das Scrollen gekoppelt (Chrome, Edge). Nur transform, nie opacity: blasse Schrift hätte zu wenig Kontrast. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    :root[data-bewegung="dynamisch"] .leistung { animation: wachsen linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
    :root[data-bewegung="dynamisch"] .person .bild-platzhalter { animation: bild-wachsen linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
  }
}
@keyframes wachsen { from { transform: scale(.94); } to { transform: none; } }
@keyframes bild-wachsen { from { transform: scale(.92); } to { transform: none; } }

/* Drucken: keine Bewegung, alles sichtbar, kein Glas */
@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-auftritt] { opacity: 1 !important; transform: none !important; }
  .tafel[hidden] { display: grid !important; }
  .horizont, .reiter-leiste { display: none !important; }
}