/* ==========================================================================
   Vorlage 11 · Szene · Kammlicht, KI-Agentur in Feldkirch (Demo)
   --------------------------------------------------------------------------
   Erster Bildschirm: eine selbst gezeichnete Nachtszene aus Ebenen (Himmel,
   Sterne, Planet mit Mond, drei Bergketten). Danach helle Abschnitte, ein
   dunkler klebender Abschnitt „Ablauf", dunkler Fuß.
   Alle Farben, Maße und die Schrift stehen in tokens.css. Hier nur Variablen.
   Bewegung: im <html>-Tag data-bewegung="starr | mittel | dynamisch".
   ========================================================================== */

/* ---------- Zusammengesetzte Muster (aus den Farben in tokens.css) ---------- */
:root {
  /* Sternenhimmel: drei Kacheln verschiedener Größe, damit sich nichts sichtbar wiederholt */
  --sterne-bild:
    radial-gradient(.9px .9px at 23px 41px, var(--stern-leise), transparent),
    radial-gradient(.9px .9px at 97px 12px, var(--stern-leise), transparent),
    radial-gradient(.8px .8px at 151px 88px, var(--stern-leise), transparent),
    radial-gradient(.9px .9px at 64px 133px, var(--stern-leise), transparent),
    radial-gradient(.8px .8px at 188px 170px, var(--stern-leise), transparent),
    radial-gradient(.9px .9px at 120px 181px, var(--stern-leise), transparent),
    radial-gradient(1.1px 1.1px at 40px 77px, var(--stern), transparent),
    radial-gradient(1px 1px at 211px 29px, var(--stern), transparent),
    radial-gradient(1.1px 1.1px at 129px 204px, var(--stern), transparent),
    radial-gradient(1px 1px at 262px 262px, var(--stern-leise), transparent),
    radial-gradient(1.3px 1.3px at 310px 61px, var(--stern-blau), transparent),
    radial-gradient(1.2px 1.2px at 88px 290px, var(--stern-violett), transparent),
    radial-gradient(1.5px 1.5px at 201px 145px, var(--stern), transparent);
  --sterne-groesse:
    211px 197px, 211px 197px, 211px 197px, 211px 197px, 211px 197px, 211px 197px,
    293px 311px, 293px 311px, 293px 311px, 293px 311px,
    419px 383px, 419px 383px, 419px 383px;
  /* hellere Sterne, die in der Stufe „dynamisch" funkeln */
  --sterne-hell:
    radial-gradient(1.6px 1.6px at 60px 110px, var(--stern), transparent),
    radial-gradient(1.3px 1.3px at 330px 40px, var(--stern-blau), transparent),
    radial-gradient(1.4px 1.4px at 470px 260px, var(--stern), transparent),
    radial-gradient(1.2px 1.2px at 250px 330px, var(--stern-violett), transparent);
  --sterne-hell-groesse: 523px 401px;
  --sterne-hell-2:
    radial-gradient(1.4px 1.4px at 150px 60px, var(--stern), transparent),
    radial-gradient(1.2px 1.2px at 400px 180px, var(--stern-leise), transparent),
    radial-gradient(1.5px 1.5px at 30px 300px, var(--stern-blau), transparent);
  --sterne-hell-2-groesse: 457px 367px;

  /* Planet: weiche Bänder von oben nach unten */
  --planet-baender: linear-gradient(180deg,
    var(--planet-tief) 0%, var(--planet-dunkel) 9%, var(--planet-mitte) 17%,
    var(--planet-flieder) 23%, var(--planet-mitte) 28%, var(--planet-violett) 36%,
    var(--planet-flieder) 44%, var(--planet-hell) 48.5%, var(--planet-eis) 50.5%, var(--planet-hell) 52%,
    var(--planet-violett) 58%, var(--planet-mitte) 66%, var(--planet-dunkel) 71%,
    var(--planet-flieder) 76%, var(--planet-mitte) 81%, var(--planet-dunkel) 90%, var(--planet-tief) 100%);
  /* Wolkenzüge und ein Sturmfleck; eine Kachel ist so breit wie der Planet */
  --planet-wolken:
    radial-gradient(ellipse 6% 2.2% at 30% 63%, var(--planet-eis), transparent),
    radial-gradient(ellipse 13% 4.5% at 30% 63%, var(--planet-hell), transparent),
    radial-gradient(ellipse 38% 1.6% at 60% 41%, var(--planet-sturm), transparent),
    radial-gradient(ellipse 28% 1.3% at 32% 47%, var(--planet-sturm), transparent),
    radial-gradient(ellipse 36% 2% at 62% 29%, var(--planet-glut), transparent),
    radial-gradient(ellipse 25% 1.4% at 70% 73%, var(--planet-sturm), transparent),
    radial-gradient(ellipse 34% 2.2% at 40% 80%, var(--planet-glut), transparent),
    radial-gradient(ellipse 30% 1.2% at 55% 19%, var(--planet-sturm), transparent);
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf) + 1rem); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--schrift); font-size: var(--text-normal); line-height: 1.55;
  font-kerning: normal; overflow-x: clip;
}
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: var(--gewicht-titel); text-wrap: balance; }
h2 { font-size: var(--h2); line-height: 1.06; letter-spacing: var(--sperrung-h2); }
h3 { font-size: var(--h3); line-height: 1.15; letter-spacing: var(--sperrung-h3); }
p { text-wrap: pretty; }
a { color: var(--violett-link); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--fokus, var(--violett-link)); outline-offset: 3px; border-radius: 4px; }
main { overflow-x: clip; }

.behaelter { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }
.sprunglink {
  position: absolute; left: var(--rand); top: -5rem; z-index: 50;
  background: var(--weiss); color: var(--text); padding: .75rem 1.25rem; border-radius: var(--ecke-klein);
}
.sprunglink:focus { top: .75rem; }

/* Abschnittskopf: Überschrift und ein Satz, eine linke Kante */
.abschnitt-kopf { display: grid; gap: 1.25rem; margin-bottom: clamp(2.5rem, 4.5vw, 3.5rem); }
.abschnitt-kopf h2 { max-width: 20ch; }
.abschnitt-kopf p { color: var(--leise); max-width: var(--textspalte); font-size: var(--text-gross); }
.abschnitt-kopf-nacht p { color: var(--auf-nacht-leise); }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.5rem; padding: 1.125rem 2.25rem;
  background: var(--violett); color: var(--auf-nacht);
  border: 1.5px solid var(--violett); border-radius: var(--ecke-rund);
  font-family: inherit; font-weight: var(--gewicht-knopf); font-size: 1rem; line-height: 1.1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.knopf:hover { background: var(--violett-tief); border-color: var(--violett-tief); }
.knopf-rand { background: transparent; color: var(--auf-nacht); border-color: var(--rand-knopf-nacht); }
.knopf-rand:hover { background: var(--knopf-nacht-hover); border-color: var(--auf-nacht); }
.knopf-klein { min-height: 2.5rem; padding: .5rem 1.15rem; font-size: 1rem; }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- Bildrahmen (Platzhalter für Fotos, siehe img/BILDLISTE.md) ---------- */
.bild-platzhalter {
  position: relative; display: flex; align-items: flex-end;
  aspect-ratio: var(--format, 3 / 2);
  background:
    linear-gradient(90deg, var(--bildrahmen-raster) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(var(--bildrahmen-raster) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--bildrahmen);
  border-radius: var(--ecke);
  overflow: hidden;
}
.bild-platzhalter figcaption {
  margin: 1rem; padding: .5rem .75rem; max-width: calc(100% - 2rem);
  background: var(--weiss); color: var(--text); border-radius: var(--ecke-klein);
  font-size: var(--text-klein); line-height: 1.4;
}

/* ---------- Kopfzeile: Nachtblau als Milchglas, bleibt oben ---------- */
/* Die Kopfzeile liegt über der Szene: der negative Abstand unten ist so groß wie die Kopfzeile.
   Wird sie beim Scrollen schmaler, wandern Höhe und Abstand gemeinsam, nichts springt. */
.kopf {
  position: sticky; top: 0; z-index: 30;
  --kopf-hoehe: var(--kopf);
  margin-bottom: calc(var(--kopf-hoehe) * -1);
  background: var(--kopf-glas-fest); color: var(--auf-nacht);
  --fokus: var(--violett-dunkelgrund);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .kopf { background: var(--kopf-glas); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
}
.kopf-innen { display: flex; align-items: center; gap: 2rem; height: var(--kopf-hoehe); }
.marke {
  display: inline-flex; align-items: center; gap: .6rem; margin-right: auto;
  color: var(--auf-nacht); text-decoration: none;
  font-weight: 700; font-size: 1.375rem; letter-spacing: -.025em;
}
.logo circle { fill: var(--violett-dunkelgrund); }
.logo path { fill: var(--auf-nacht); }
.kopf-nav ul { display: flex; gap: 1.75rem; }
.kopf-nav a { color: var(--auf-nacht); text-decoration: none; font-weight: 500; font-size: 1rem; }
.kopf-nav a:hover { color: var(--violett-dunkelgrund); }
@media (max-width: 63.99rem) { .kopf-nav { display: none; } }

/* ==========================================================================
   1 · Szene
   Ebenen von hinten nach vorn. Jede Ebene ist etwas größer als die Bühne
   (inset -2.5rem), damit beim Verschieben mit Maus und Scrollen keine Kante
   sichtbar wird. Die Bühne schneidet sauber ab (overflow: clip).
   ========================================================================== */
.szene {
  position: relative; isolation: isolate; overflow: clip;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(40rem, 100vh, 60.25rem);
  min-height: clamp(40rem, 100svh, 60.25rem);
  padding-top: var(--kopf);
  background: var(--nacht); color: var(--auf-nacht);
  --fokus: var(--violett-dunkelgrund);
  /* Durchmesser des Planeten: wächst mit dem Fenster, höchstens 600 px */
  --d: clamp(14rem, min(62vh, 42vw), 37.5rem);
  --umlauf: 56s;
}
.szene-bild { position: absolute; inset: 0; z-index: -1; }
.ebene { position: absolute; inset: -2.5rem; pointer-events: none; isolation: isolate; }

/* Himmel mit fernen Sternen und einem Lichthof hinter dem Planeten */
.ebene-himmel {
  background:
    var(--sterne-bild),
    radial-gradient(ellipse 55% 50% at 66% 38%, var(--himmel-dunst), transparent 70%),
    radial-gradient(ellipse 90% 40% at 50% 100%, var(--himmel-dunst-blau), transparent 70%),
    linear-gradient(180deg, var(--himmel-oben) 0%, var(--himmel-mitte) 50%, var(--himmel-horizont) 100%);
  background-size: var(--sterne-groesse), auto, auto, auto;
}
/* hellere Sterne, zwei Gruppen, die gegeneinander funkeln */
.ebene-sterne { background: var(--sterne-hell); background-size: var(--sterne-hell-groesse); }
.ebene-sterne::after {
  content: ""; position: absolute; inset: 0;
  background: var(--sterne-hell-2); background-size: var(--sterne-hell-2-groesse);
}

/* Planet mit Umlaufbahn und Mond. Steht rechts in der Inhaltsbreite, damit er auf
   breiten Schirmen nicht an den Fensterrand rutscht. */
.planet-feld { position: absolute; inset: 2.5rem 0; margin-inline: auto; }
.planet-system {
  position: absolute; width: var(--d); height: var(--d);
  top: calc(var(--kopf) + clamp(1rem, 6vh, 4rem));
  right: calc(var(--d) * .25);
}
.planet {
  position: absolute; inset: 0; z-index: 2; border-radius: 50%;
  box-shadow:
    0 0 calc(var(--d) * .1) calc(var(--d) * .01) var(--planet-glut),
    0 0 calc(var(--d) * .5) calc(var(--d) * .08) var(--planet-glut-weit);
}
.planet-oberflaeche {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  background: var(--planet-baender);
}
/* Wolkenzüge: ein doppelt breiter Streifen, der in „dynamisch" langsam durchläuft */
.planet-oberflaeche::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -100%; width: 200%;
  background: var(--planet-wolken);
  background-size: 50% 100%; background-repeat: repeat-x;
}
/* Kugel: Licht oben links, Nachtseite unten rechts, Atmosphäre am Rand */
.planet::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 27% 22%, var(--planet-licht) 0%, transparent 34%),
    radial-gradient(circle at 30% 26%, transparent 26%, var(--planet-daemmerung) 52%, var(--planet-nacht) 80%);
  box-shadow:
    inset calc(var(--d) * .018) calc(var(--d) * .014) calc(var(--d) * .04) var(--planet-hauch),
    inset calc(var(--d) * -.08) calc(var(--d) * -.08) calc(var(--d) * .14) var(--planet-nacht);
}
/* Atmosphäre: ein heller Saum nur auf der Lichtseite */
.planet::before {
  content: ""; position: absolute; inset: -2.5%; border-radius: 50%;
  background: radial-gradient(closest-side, transparent 93.5%, var(--planet-hauch) 96.5%, transparent 100%);
  -webkit-mask-image: linear-gradient(135deg, var(--maske) 15%, transparent 62%);
  mask-image: linear-gradient(135deg, var(--maske) 15%, transparent 62%);
}
/* Umlaufbahn: hintere Hälfte hinter dem Planeten, vordere davor */
.bahn {
  position: absolute; left: -25%; right: -25%; top: 36%; height: 28%;
  border: 1.5px solid var(--bahn-linie); border-radius: 50%;
}
.bahn-hinten { z-index: 1; clip-path: inset(0 0 50% 0); }
.bahn-vorne { z-index: 3; clip-path: inset(50% 0 0 0); }
/* Mond: drei ineinander liegende Teile bewegen sich quer, auf und ab und nach vorn/hinten.
   Zusammen ergibt das eine Ellipse, ohne Drehung. Standbild: vorn links. */
.mond-weg { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 4; }
.mond-quer { position: absolute; transform: translateX(calc(var(--d) * -.55)); }
.mond {
  position: absolute; display: block;
  width: calc(var(--d) * .075); height: calc(var(--d) * .075);
  left: calc(var(--d) * -.0375); top: calc(var(--d) * -.0375);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, var(--mond-hell) 0%, var(--mond-mitte) 45%, var(--mond-schatten) 100%);
  box-shadow: 0 0 calc(var(--d) * .04) var(--planet-glut);
  transform: translateY(calc(var(--d) * .095));
}

/* Bergketten: Umriss als Vieleck, fern blasser und leicht unscharf, nah fast schwarz */
.ebene-fern, .ebene-dunst, .ebene-mitte, .ebene-nah { top: auto; }
.ebene-fern {
  height: 58%;
  background:
    radial-gradient(ellipse 45% 70% at 66% 0%, var(--dunst-tal), transparent 70%),
    linear-gradient(180deg, var(--berg-fern-oben) 10%, var(--berg-fern-unten) 75%);
  clip-path: polygon(0% 100%, 0.00% 35.00%, 1.56% 34.09%, 3.13% 31.96%, 4.69% 29.52%, 6.25% 28.27%, 7.81% 25.60%, 9.38% 23.62%, 10.94% 20.65%, 12.50% 19.52%, 14.06% 21.75%, 15.63% 24.67%, 17.19% 28.08%, 18.75% 30.00%, 20.31% 32.88%, 21.88% 35.57%, 23.44% 33.39%, 25.00% 30.07%, 26.56% 29.55%, 28.13% 27.73%, 29.69% 26.70%, 31.25% 29.43%, 32.81% 30.59%, 34.38% 32.53%, 35.94% 35.26%, 37.50% 35.86%, 39.06% 36.85%, 40.63% 37.81%, 42.19% 38.61%, 43.75% 39.68%, 45.31% 39.96%, 46.88% 41.29%, 48.44% 41.59%, 50.00% 40.49%, 51.56% 40.59%, 53.13% 40.34%, 54.69% 37.83%, 56.25% 35.78%, 57.81% 34.32%, 59.38% 33.40%, 60.94% 32.08%, 62.50% 30.19%, 64.06% 28.89%, 65.63% 31.13%, 67.19% 33.90%, 68.75% 36.62%, 70.31% 39.79%, 71.88% 44.10%, 73.44% 46.51%, 75.00% 49.24%, 76.56% 49.35%, 78.13% 48.53%, 79.69% 45.95%, 81.25% 43.83%, 82.81% 41.26%, 84.38% 43.41%, 85.94% 46.13%, 87.50% 49.41%, 89.06% 52.03%, 90.63% 54.53%, 92.19% 55.82%, 93.75% 56.12%, 95.31% 55.93%, 96.88% 56.65%, 98.44% 56.65%, 100.00% 55.26%, 100% 100%);
  filter: blur(.6px);
}
/* Dunst zwischen den Ketten: gibt Tiefe */
.ebene-dunst {
  height: 42%;
  background: linear-gradient(0deg, transparent 10%, var(--dunst-tal) 55%, transparent 90%);
}
.ebene-mitte {
  height: 40%;
  background: linear-gradient(180deg, var(--berg-mitte-oben) 30%, var(--berg-mitte-unten) 80%);
  clip-path: polygon(0% 100%, 0.00% 41.00%, 1.56% 41.35%, 3.13% 40.54%, 4.69% 41.89%, 6.25% 41.83%, 7.81% 40.84%, 9.38% 40.60%, 10.94% 39.83%, 12.50% 40.44%, 14.06% 40.30%, 15.63% 40.53%, 17.19% 41.62%, 18.75% 41.76%, 20.31% 43.72%, 21.88% 44.41%, 23.44% 44.94%, 25.00% 44.90%, 26.56% 44.59%, 28.13% 42.63%, 29.69% 42.36%, 31.25% 41.43%, 32.81% 38.82%, 34.38% 36.75%, 35.94% 35.01%, 37.50% 33.62%, 39.06% 34.17%, 40.63% 36.24%, 42.19% 36.96%, 43.75% 39.13%, 45.31% 40.10%, 46.88% 40.18%, 48.44% 41.30%, 50.00% 43.34%, 51.56% 42.93%, 53.13% 43.13%, 54.69% 44.34%, 56.25% 45.36%, 57.81% 45.23%, 59.38% 46.32%, 60.94% 46.20%, 62.50% 46.04%, 64.06% 44.63%, 65.63% 44.01%, 67.19% 43.66%, 68.75% 42.36%, 70.31% 42.50%, 71.88% 43.61%, 73.44% 42.86%, 75.00% 42.84%, 76.56% 42.46%, 78.13% 43.36%, 79.69% 43.74%, 81.25% 44.76%, 82.81% 45.42%, 84.38% 45.85%, 85.94% 45.66%, 87.50% 46.37%, 89.06% 45.53%, 90.63% 44.45%, 92.19% 43.97%, 93.75% 43.96%, 95.31% 45.26%, 96.88% 47.83%, 98.44% 48.91%, 100.00% 49.28%, 100% 100%);
}
/* Vorderer Kamm mit Lichtkante: zwei gleiche Umrisse, der hintere 2 px höher und hell */
.ebene-nah { height: 28%; }
.ebene-nah::before, .ebene-nah::after {
  content: ""; position: absolute; inset: 0;
  clip-path: polygon(0% 100%, 0.00% 49.41%, 1.56% 47.81%, 3.13% 45.24%, 4.69% 42.15%, 6.25% 39.58%, 7.81% 39.01%, 9.38% 41.38%, 10.94% 43.23%, 12.50% 43.78%, 14.06% 46.26%, 15.63% 49.07%, 17.19% 50.16%, 18.75% 50.93%, 20.31% 51.08%, 21.88% 49.91%, 23.44% 51.04%, 25.00% 50.67%, 26.56% 50.33%, 28.13% 50.86%, 29.69% 52.12%, 31.25% 51.77%, 32.81% 51.44%, 34.38% 52.46%, 35.94% 53.33%, 37.50% 53.21%, 39.06% 53.92%, 40.63% 55.15%, 42.19% 55.35%, 43.75% 54.57%, 45.31% 53.71%, 46.88% 53.32%, 48.44% 52.39%, 50.00% 50.10%, 51.56% 47.78%, 53.13% 46.86%, 54.69% 45.85%, 56.25% 45.12%, 57.81% 43.20%, 59.38% 42.10%, 60.94% 40.35%, 62.50% 40.20%, 64.06% 38.58%, 65.63% 36.08%, 67.19% 34.87%, 68.75% 34.37%, 70.31% 33.01%, 71.88% 30.60%, 73.44% 32.52%, 75.00% 35.90%, 76.56% 38.35%, 78.13% 40.26%, 79.69% 42.14%, 81.25% 42.92%, 82.81% 44.63%, 84.38% 47.61%, 85.94% 48.56%, 87.50% 49.94%, 89.06% 53.21%, 90.63% 54.97%, 92.19% 55.62%, 93.75% 57.43%, 95.31% 58.24%, 96.88% 59.02%, 98.44% 58.83%, 100.00% 58.14%, 100% 100%);
}
.ebene-nah::before { top: -2px; background: linear-gradient(90deg, transparent 20%, var(--kamm-kante) 70%, transparent 100%); }
.ebene-nah::after { background: var(--berg-nah); }
/* Das Licht am Kamm: eine Hütte, die noch wach ist */
.kammlicht {
  position: absolute; z-index: 1; left: 68.75%; top: calc(34.4% - 6px);
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--kamm-licht);
  box-shadow: 0 0 6px 2px var(--kamm-schein), 0 0 22px 8px var(--dunst-tal);
}

/* Text über der Szene: links unten */
.szene-text { position: relative; padding-block: 7rem clamp(3rem, 8vh, 5.5rem); }
.szene h1 {
  font-size: var(--h1); line-height: 1.02; letter-spacing: var(--sperrung-h1);
  max-width: 8em; text-shadow: 0 2px 30px var(--text-schatten);
}
.szene-satz {
  margin-top: 1.5rem; max-width: 34ch;
  font-size: var(--text-gross); line-height: 1.5; color: var(--auf-nacht-leise);
  text-shadow: 0 1px 16px var(--text-schatten);
}
.szene .knopf-reihe { margin-top: 2.25rem; }

/* Handy und schmale Schirme: Planet mittig oben, Text darunter */
@media (max-width: 47.99rem) {
  .szene { --d: clamp(12.5rem, 60vw, 17rem); }
  .planet-system { right: auto; left: calc(50% - var(--d) / 2); top: calc(var(--kopf) + 1.25rem); }
  .szene-text { padding-top: calc(var(--d) + 4rem); }
  .ebene-fern { height: 50%; }
  .ebene-mitte { height: 36%; }
  .ebene-nah { height: 22%; }
}

/* ==========================================================================
   2 · Agentur, Gründerin, Zahlen
   ========================================================================== */
.agentur { padding-block: var(--abschnitt); }
.agentur-raster { display: grid; gap: 3rem; align-items: center; }
.vorzeile { font-size: var(--text-klein); font-weight: 600; color: var(--violett-link); margin-bottom: 1rem; }
.agentur-text h2 { max-width: 18ch; }
.agentur-text > p:not(.vorzeile) { margin-top: 1.5rem; max-width: var(--textspalte); color: var(--leise); font-size: var(--text-gross); }
.zitat { margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--linie); max-width: var(--textspalte); }
.zitat blockquote p { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.625rem); line-height: 1.4; font-weight: 500; letter-spacing: -.005em; }
.zitat blockquote p::before { content: "„"; }
.zitat blockquote p::after { content: "\201C"; }
.zitat figcaption { margin-top: 1rem; color: var(--leise); }
.zitat figcaption strong { color: var(--text); font-weight: 600; margin-right: .4rem; }
.agentur-bild { border-radius: var(--ecke-gross); max-width: 29rem; width: 100%; justify-self: end; }
@media (min-width: 60rem) {
  .agentur-raster { grid-template-columns: 7fr 5fr; gap: clamp(3rem, 6vw, 6rem); }
}

.zahlen { margin-top: clamp(3.5rem, 6vw, 4.5rem); display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem 1.5rem; }
.zahlen > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .6rem; border-top: 1px solid var(--linie); padding-top: 1.25rem; }
.zahlen dt { color: var(--leise); font-size: var(--text-klein); max-width: 20ch; }
.zahlen dd { font-size: clamp(2.75rem, 1.9rem + 3vw, 4.5rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.zahlen [data-zaehlen] { display: inline-block; }
@media (min-width: 60rem) { .zahlen { grid-template-columns: repeat(4, 1fr); } }

/* ==========================================================================
   3 · Leistungen: Kachelraster, eine große, zwei kleine, eine breite
   ========================================================================== */
.leistungen { padding-block: var(--abschnitt); background: var(--surface); }
.kacheln { display: grid; gap: 1.25rem; }
.kachel {
  display: flex; flex-direction: column; gap: .75rem;
  background: var(--weiss); border-radius: var(--ecke); box-shadow: var(--schatten);
  padding: clamp(1.75rem, 3vw, 2.25rem);
}
.kachel h3 { color: var(--text); }
.kachel p { color: var(--leise); max-width: 46ch; }
.kachel .kachel-preis { margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--linie); color: var(--text); font-weight: 600; max-width: none; }
.kachel-nr {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: .5rem;
  border-radius: 50%; background: var(--violett-hell); color: var(--violett-link);
  font-weight: 700; font-size: 1rem;
}
.kachel-gross { padding: 0; overflow: hidden; }
.kachel-bild { border-radius: 0; }
.kachel-text { display: flex; flex-direction: column; gap: .75rem; flex: 1; padding: clamp(1.75rem, 3vw, 2.5rem); }
@media (min-width: 60rem) {
  .kacheln { grid-template-columns: 7fr 5fr; }
  .kachel-gross { grid-row: span 2; }
  .kachel-breit { grid-column: span 2; display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 2rem; }
  .kachel-breit .kachel-nr { margin-bottom: 0; }
  .kachel-breit p { max-width: 60ch; }
  .kachel-breit .kachel-preis { margin-top: 0; padding-top: 0; border-top: 0; padding-left: 2rem; border-left: 1px solid var(--linie); }
  .kachel-breit h3 + p { margin-top: .5rem; }
}

/* ==========================================================================
   4 · Ablauf: der eine dunkle Abschnitt, klebend
   Links bleibt der Ausschnitt mit dem aufgehenden Planeten stehen (position: sticky),
   rechts laufen vier Schritte durch. Am Handy untereinander. Kein JavaScript nötig;
   mit JavaScript leuchtet der Punkt des Schritts auf, der gerade in der Mitte steht.
   ========================================================================== */
.ablauf {
  padding-block: var(--abschnitt);
  background: radial-gradient(ellipse 60% 45% at 15% 0%, var(--schimmer), transparent 70%), var(--nacht);
  color: var(--auf-nacht);
  --fokus: var(--violett-dunkelgrund);
}
.ablauf-raster { display: grid; gap: 2.5rem; }
.umlauf {
  position: relative; isolation: isolate; overflow: hidden;
  width: 100%; max-width: 34rem; aspect-ratio: 1 / 1;
  border-radius: var(--ecke-gross); border: 1px solid var(--linie-nacht);
  background: var(--sterne-bild), radial-gradient(ellipse 90% 60% at 50% 100%, var(--schimmer), var(--nacht-tief) 75%);
  background-size: var(--sterne-groesse), auto;
}
/* aufgehender Planet: nur als Pseudo-Element, damit er über die Kante hinaus gezeichnet werden kann */
.umlauf::after {
  content: ""; position: absolute; z-index: 1; left: -20%; width: 140%; aspect-ratio: 1 / 1; top: 62%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 50% 14% at 42% 0%, var(--planet-licht), transparent),
    linear-gradient(180deg, transparent 1.5%, var(--planet-daemmerung) 8%, var(--planet-nacht) 20%),
    var(--planet-baender);
  box-shadow: inset 0 3px 8px -3px var(--planet-hauch), 0 0 60px 8px var(--planet-glut), 0 0 160px 40px var(--planet-glut-weit);
}
.umlauf-bahn {
  position: absolute; left: 8%; right: 8%; top: 18%; height: 70%;
  border: 1.5px solid var(--bahn-linie); border-radius: 50%;
}
.umlauf-punkt {
  position: absolute; z-index: 2; width: 2.75rem; height: 2.75rem; margin: -1.375rem 0 0 -1.375rem;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--schimmer); border: 1.5px solid var(--bahn-linie);
  color: var(--auf-nacht); font-weight: 700; font-size: 1rem;
}
.umlauf-punkt::before {
  content: ""; position: absolute; inset: -1px; border-radius: 50%; z-index: -1;
  background: var(--violett);
  box-shadow: 0 0 0 .45rem var(--planet-glut), 0 0 2.5rem .75rem var(--planet-glut);
  opacity: 0;
}
.p1 { left: 10.5%; top: 41%; }
.p2 { left: 29%; top: 22.7%; }
.p3 { left: 71%; top: 22.7%; }
.p4 { left: 89.5%; top: 41%; }
:root.js:not([data-bewegung="starr"]) .umlauf[data-schritt="1"] .p1::before,
:root.js:not([data-bewegung="starr"]) .umlauf[data-schritt="2"] .p2::before,
:root.js:not([data-bewegung="starr"]) .umlauf[data-schritt="3"] .p3::before,
:root.js:not([data-bewegung="starr"]) .umlauf[data-schritt="4"] .p4::before { opacity: 1; }

.schritte { display: grid; }
.schritt { padding-block: 2rem; border-top: 1px solid var(--linie-nacht); }
.schritt:last-child { border-bottom: 1px solid var(--linie-nacht); }
.schritt-nr { font-size: var(--text-klein); font-weight: 600; color: var(--auf-nacht-leise); margin-bottom: .6rem; }
.schritt.ist-aktiv .schritt-nr { color: var(--violett-dunkelgrund); }
.schritt h3 { font-size: var(--h3); }
.schritt p:not(.schritt-nr) { margin-top: .75rem; color: var(--auf-nacht-leise); max-width: 40ch; }
@media (min-width: 60rem) {
  .ablauf-raster { grid-template-columns: 5fr 6fr; gap: clamp(3rem, 7vw, 7rem); align-items: start; }
  .ablauf-buehne { position: sticky; top: calc(var(--kopf) + 3rem); }
  .umlauf { max-width: min(100%, calc(100vh - var(--kopf) - 6rem)); }
  .schritt { padding-block: 2rem; }
}

/* ==========================================================================
   5 · Referenzen und Kundenstimmen
   ========================================================================== */
.referenzen { padding-block: var(--abschnitt); background: var(--surface); }
.projekte { display: grid; gap: 2.5rem 2rem; }
.projekt { display: grid; gap: 1rem; align-content: start; border-top: 2px solid var(--text); padding-top: 1.5rem; }
.projekt-zahl {
  font-size: clamp(2.75rem, 1.9rem + 2.6vw, 4rem); font-weight: 700; line-height: 1;
  letter-spacing: -.03em; color: var(--violett-link);
}
.projekt-einheit { font-size: .42em; font-weight: 600; letter-spacing: 0; color: var(--text); }
.projekt p:not(.projekt-zahl) { color: var(--leise); margin-top: .6rem; }
@media (min-width: 60rem) { .projekte { grid-template-columns: repeat(3, 1fr); } }

.stimmen { margin-top: clamp(3rem, 5vw, 4rem); display: grid; gap: 1.25rem; }
.stimme {
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.75rem;
  background: var(--weiss); border-radius: var(--ecke); box-shadow: var(--schatten);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
}
.stimme blockquote p { font-size: var(--text-gross); line-height: 1.5; font-weight: 500; color: var(--text); }
.stimme blockquote p::before { content: "„"; }
.stimme blockquote p::after { content: "\201C"; }
.stimme figcaption { color: var(--leise); }
.stimme figcaption strong { display: block; color: var(--text); font-weight: 600; }
@media (min-width: 60rem) { .stimmen { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   6 · Neuigkeiten
   ========================================================================== */
.neuigkeiten { padding-block: var(--abschnitt); }
.beitraege { display: grid; gap: 2.25rem 2.5rem; }
.beitrag { display: grid; gap: .6rem; align-content: start; border-top: 1px solid var(--linie); padding-top: 1.25rem; }
.beitrag time { font-size: var(--text-klein); font-weight: 600; color: var(--violett-link); }
.beitrag p { color: var(--leise); }
@media (min-width: 60rem) { .beitraege { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   7 · Erstgespräch (die eine Pastellfläche) und Formular
   ========================================================================== */
.kontakt { padding-block: var(--abschnitt); background: var(--surface); }
.kontakt-raster { display: grid; gap: 1.25rem; align-items: start; }
.angebot {
  background: var(--pastell); color: var(--text);
  border-radius: var(--ecke-gross); padding: clamp(1.75rem, 4vw, 3.25rem);
}
.angebot h2 { max-width: 12ch; }
.angebot > p { margin-top: 1.25rem; max-width: 40ch; }
.haken-liste { margin-top: 1.25rem; display: grid; gap: .75rem; }
.haken-liste li { position: relative; padding-left: 2.25rem; }
.haken-liste li::before {
  content: ""; position: absolute; left: 0; top: .15em; width: 1.5rem; height: 1.5rem;
  border-radius: 50%; background: var(--weiss);
}
.haken-liste li::after {
  content: ""; position: absolute; left: .3rem; top: calc(.15em + .3rem); width: .9rem; height: .9rem;
  background: var(--violett-link);
  clip-path: polygon(10% 52%, 24% 38%, 42% 56%, 78% 20%, 92% 34%, 42% 84%);
}
.kontakt-wege { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--pastell-kante); display: grid; gap: .9rem; }
.kontakt-wege > div { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; }
.kontakt-wege dt { font-weight: 600; }
.kontakt-wege a { color: var(--text); font-weight: 600; }
.kontakt-zeit { display: block; }

.formular {
  display: grid; gap: 1.25rem 1rem;
  background: var(--weiss); border-radius: var(--ecke-gross); box-shadow: var(--schatten);
  padding: clamp(1.5rem, 3.5vw, 3rem);
}
.formular-titel { font-size: var(--text-gross); font-weight: 600; line-height: 1.4; }
.feld { display: grid; gap: .4rem; align-content: start; }
.feld label { font-weight: 600; font-size: var(--text-klein); }
.optional { font-weight: 400; color: var(--leise); }
.feld input, .feld textarea {
  width: 100%; font: inherit; font-size: 1.0625rem; color: var(--text);
  padding: .8rem 1rem; background: var(--weiss);
  border: 1.5px solid var(--feld-rand); border-radius: var(--ecke-klein);
}
.feld textarea { resize: vertical; min-height: 7rem; }
.feld input:focus-visible, .feld textarea:focus-visible { border-color: var(--violett-link); outline-offset: 1px; }
.formular-hinweis { font-size: var(--text-klein); color: var(--leise); }
.formular-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.formular-meldung:empty { display: none; }
.formular-meldung { background: var(--violett-hell); color: var(--text); padding: .75rem 1rem; border-radius: var(--ecke-klein); }
@media (min-width: 40rem) {
  .formular { grid-template-columns: 1fr 1fr; }
  .feld-breit { grid-column: 1 / -1; }
}
@media (min-width: 60rem) { .kontakt-raster { grid-template-columns: 5fr 6fr; gap: 1.5rem; } }

/* ==========================================================================
   Fuß: Nachtblau, ma-ki.io als letzte Zeile mittig (Regel D29)
   ========================================================================== */
.fuss {
  background: var(--nacht); color: var(--auf-nacht-leise);
  padding-top: clamp(3.5rem, 6vw, 5rem); font-size: var(--text-klein);
  --fokus: var(--violett-dunkelgrund);
}
.fuss a { color: var(--auf-nacht); }
.fuss-raster { display: grid; gap: 2rem; }
.fuss-raster p + p { margin-top: .9rem; }
.fuss-marke { font-weight: 700; font-size: 1.75rem; letter-spacing: -.025em; color: var(--auf-nacht); margin-bottom: .75rem; }
.fuss address { font-style: normal; line-height: 1.7; }
.fuss-links { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.fuss-demo { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--linie-nacht); }
.fuss-zeile { width: 100%; max-width: none; margin: 0; text-align: center; padding: 1.5rem 1rem; color: var(--auf-nacht-leise); font-size: var(--text-klein); }
@media (min-width: 48rem) { .fuss-raster { grid-template-columns: 5fr 5fr 3fr; } }

/* ==========================================================================
   Bewegung · Grundstufe dieser Vorlage: dynamisch
   starr      stehendes Bild. Nur Knöpfe und Links reagieren (Farbe, Rahmen).
   mittel     die Szene blendet Ebene für Ebene ein (Tiefe von hinten nach vorn),
              der Titel gleitet ein, Inhalte gleiten beim Scrollen 24 px ein,
              Bilder ziehen sich beim Erscheinen von 104 % auf 100 % zusammen,
              im Ablauf leuchtet der Punkt des aktuellen Schritts, Knöpfe geben nach
   dynamisch  dazu: der Mond kreist (56 s), die Wolken des Planeten ziehen, Sterne funkeln,
              Ebenen verschieben sich beim Scrollen und mit der Maus unterschiedlich weit
              (js/main.js), Zahlen zählen hoch, Bilder wachsen beim Scrollen mit,
              die Kopfzeile wird schmaler
   „Bewegung reduzieren" am Gerät gewinnt immer.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* ---------- mittel und dynamisch ---------- */
  :root:not([data-bewegung="starr"]) .ebene { animation: ebene-rein 1.4s var(--ease) backwards; }
  :root:not([data-bewegung="starr"]) .ebene-sterne { animation-delay: .1s; }
  :root:not([data-bewegung="starr"]) .ebene-planet { animation-name: planet-rein; animation-duration: 1.6s; animation-delay: .1s; }
  :root:not([data-bewegung="starr"]) .ebene-fern { animation-delay: .25s; }
  :root:not([data-bewegung="starr"]) .ebene-dunst { animation-delay: .3s; }
  :root:not([data-bewegung="starr"]) .ebene-mitte { animation-delay: .35s; }
  :root:not([data-bewegung="starr"]) .ebene-nah { animation-delay: .45s; }
  :root:not([data-bewegung="starr"]) .szene h1 { animation: rein .9s var(--ease) .3s backwards; }
  :root:not([data-bewegung="starr"]) .szene-satz { animation: rein .9s var(--ease) .42s backwards; }
  :root:not([data-bewegung="starr"]) .szene .knopf-reihe { animation: rein .9s var(--ease) .54s backwards; }

  :root.js:not([data-bewegung="starr"]) [data-auftritt] { transition: opacity .6s var(--ease), transform .6s var(--ease); }
  :root.js:not([data-bewegung="starr"]) [data-auftritt]:not(.ist-sichtbar) { opacity: 0; transform: translateY(24px); }
  :root.js[data-bewegung="mittel"] [data-bild] { transition: transform 1.1s var(--ease); }
  :root.js[data-bewegung="mittel"] [data-bild]:not(.ist-sichtbar) { transform: scale(1.04); }

  :root:not([data-bewegung="starr"]) .umlauf-punkt::before { transition: opacity .5s var(--ease); }
  :root:not([data-bewegung="starr"]) .schritt-nr { transition: color .4s; }
  :root:not([data-bewegung="starr"]) .knopf { transition: background-color .2s, border-color .2s, transform .2s var(--ease); }
  :root:not([data-bewegung="starr"]) .knopf:active { transform: scale(.97); }

  /* ---------- nur dynamisch ---------- */
  :root[data-bewegung="dynamisch"] .planet-oberflaeche::before { animation: wolken 140s linear infinite; }
  :root[data-bewegung="dynamisch"] .mond-weg { animation: mond-tiefe var(--umlauf) linear infinite; animation-delay: calc(var(--umlauf) * -.38); }
  :root[data-bewegung="dynamisch"] .mond-quer { animation: mond-quer calc(var(--umlauf) / 2) cubic-bezier(.37, 0, .63, 1) infinite alternate; animation-delay: calc(var(--umlauf) * -.38); }
  :root[data-bewegung="dynamisch"] .mond { animation: mond-hoch calc(var(--umlauf) / 2) cubic-bezier(.37, 0, .63, 1) infinite alternate; animation-delay: calc(var(--umlauf) * -.63); }
  :root[data-bewegung="dynamisch"] .ebene-sterne { animation: ebene-rein 1.4s var(--ease) .1s backwards, funkeln 4.5s ease-in-out 1.5s infinite alternate; }
  :root[data-bewegung="dynamisch"] .ebene-sterne::after { animation: funkeln 6s ease-in-out -3s infinite alternate; }
  :root[data-bewegung="dynamisch"] .kammlicht { animation: glimmen 5s ease-in-out infinite alternate; }
  :root.js[data-bewegung="dynamisch"] .ebene { will-change: translate; }
  :root[data-bewegung="dynamisch"] .szene-ruht * { animation-play-state: paused; }
  :root.js[data-bewegung="dynamisch"] .kopf { transition: margin-bottom .35s var(--ease); }
  :root.js[data-bewegung="dynamisch"] .kopf-innen { transition: height .35s var(--ease); }
  :root.js[data-bewegung="dynamisch"] .kopf.ist-schmal { --kopf-hoehe: var(--kopf-klein); }

  @supports (animation-timeline: view()) {
    :root[data-bewegung="dynamisch"] [data-bild] { animation: wachsen linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  }
}
@keyframes ebene-rein { from { opacity: 0; transform: translateY(2.5rem); } to { opacity: 1; transform: none; } }
@keyframes planet-rein { from { opacity: 0; transform: translateY(1.5rem) scale(1.05); } to { opacity: 1; transform: none; } }
@keyframes rein { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes wolken { from { transform: translateX(0); } to { transform: translateX(50%); } }
@keyframes mond-quer { from { transform: translateX(calc(var(--d) * .75)); } to { transform: translateX(calc(var(--d) * -.75)); } }
@keyframes mond-hoch { from { transform: translateY(calc(var(--d) * -.14)) scale(.78); } to { transform: translateY(calc(var(--d) * .14)) scale(1.08); } }
@keyframes mond-tiefe { 0%, 49.9% { z-index: 4; } 50%, 100% { z-index: 1; } }
@keyframes funkeln { from { opacity: 1; } to { opacity: .3; } }
@keyframes glimmen { from { opacity: 1; } to { opacity: .6; } }
@keyframes wachsen { from { transform: scale(.94); } to { transform: none; } }

/* Drucken: keine Bewegung, alles sichtbar */
@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-auftritt], [data-bild] { opacity: 1 !important; transform: none !important; }
  .kopf { position: static; }
}