/* ============================================================
   LIVÉRA Property Care — Die Manifestseite

   Wird ausschließlich von /ueber-livera/ geladen (bauen.py,
   `zusatz_css`). Alles hier gehört zu einer einzigen Seite und hat
   deshalb in seiten.css nichts verloren.

   Der Auftrag: viel weniger Text, dafür soll er sich bewegen.

   Die Regel aus der Loader-DNA bleibt trotzdem stehen — „es blendet
   ein, es fliegt nicht herein" und „es bewegt sich immer nur eine
   Sache". Was hier passiert, ist deshalb fast nie Bewegung, sondern
   Reihenfolge: Zeilen treten nacheinander an, Linien wachsen, Wörter
   hellen auf. Der einzige echte Versatz der Seite ist das Bild, das
   beim Scrollen ein paar Prozent gegen die Richtung läuft.

   Zwei Zustände steuern alles, beide setzt manifest.js:
     .ist-da        — der Block steht im Bild, die Staffel läuft an
     --fortschritt  — 0…1, wie weit der Abschnitt durchgescrollt ist

   Ohne JavaScript (.kein-js) und bei prefers-reduced-motion steht
   jeder Endzustand sofort. Ganz unten stehen beide Ausnahmen.
   ============================================================ */

.akt,
.akt-auftakt,
.akt-satz,
.akt-entscheidung {
  /* Die großen Ziffern am Rand ragen bewusst über die Hülle hinaus.
     Ohne diese Klammer schöben sie die Seite seitlich auf. */
  overflow: hidden;
}

/* Ein gemeinsamer Takt für die ganze Seite. Wer die Staffel schneller
   oder langsamer will, ändert ihn hier und nirgends sonst. */
.akt-auftakt,
.akt,
.akt-satz,
.akt-entscheidung,
.akt-anspruch,
.akt-gruenderin {
  --takt:       120ms;   /* Abstand zwischen zwei Zeilen */
  --takt-wort:   45ms;   /* Abstand zwischen zwei Wörtern */
  --anlauf:     240ms;   /* bis die erste Zeile antritt */
  --weg:         14px;   /* wie weit eine Zeile von unten kommt */
}

/* ============================================================
   1 · ATMOSPHÄRE — Licht und Ziffer

   Beides ist Hintergrund und trägt keine Bedeutung: das Licht atmet
   über 26 s, die Ziffer verschiebt sich um wenige Pixel, während der
   Abschnitt durchläuft. Sie sind da, damit die Fläche nicht tot ist.
   ============================================================ */

.akt-licht {
  position: absolute;
  inset: -20% -14%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(42% 48% at 78% 26%, var(--akzent-a08) 0%, transparent 70%),
    radial-gradient(38% 44% at 12% 84%, var(--akzent-a08) 0%, transparent 72%);
  animation: akt-atem 26s ease-in-out infinite;
}

/* Beim Schluss des Manifests darf ein Hauch Gold dazu — genau einmal
   auf der Seite, so wie der goldene Button. */
.akt-licht--warm {
  background:
    radial-gradient(46% 52% at 50% 34%, var(--akzent-a08) 0%, transparent 70%),
    radial-gradient(30% 36% at 74% 78%, var(--gold-a22) 0%, transparent 74%);
  opacity: 0.55;
}

/* Auf Sand wird Gold lehmig — dieselbe Regel, die den Primär-CTA im
   hellen Modus salbeifarben macht. Als weicher Fleck über eine halbe
   Bühne wurde daraus ein olivgrüner Schmierer. Hier bleibt es deshalb
   bei Salbei. */
:root[data-thema="hell"] .akt-licht--warm {
  background:
    radial-gradient(50% 56% at 50% 36%, var(--akzent-a08) 0%, transparent 72%);
  opacity: 0.8;
}

@keyframes akt-atem {
  0%, 100% { opacity: 0.75; transform: scale(1)    translate3d(0, 0, 0); }
  50%      { opacity: 1;    transform: scale(1.07) translate3d(-1.4%, 1.2%, 0); }
}

.akt .huelle,
.akt-auftakt .huelle,
.akt-satz .huelle,
.akt-entscheidung .huelle { position: relative; z-index: 1; }

/* Die Folio-Ziffer am Rand. Sie steht als Kontur, nicht als Fläche —
   gefüllt wäre sie ein Bild, als Umriss bleibt sie Papier. Ein Teil von
   ihr läuft absichtlich aus der Seite heraus; das `overflow: hidden`
   ganz oben schneidet sie sauber ab. */
.akt-nr {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: calc(var(--rand) * -0.5);
  pointer-events: none;
  font-size: clamp(7rem, 20vw, 17rem);
  font-weight: 300;
  line-height: 0.8;
  letter-spacing: -0.02em;
  color: transparent;
  /* Auf der dunklen Bühne trägt die Haarlinie nicht — dort steht die
     Kontur in Salbei, sonst wäre sie schlicht nicht da. */
  -webkit-text-stroke: 1px var(--linie-akzent);
  opacity: 0.5;
  /* --fortschritt kommt aus manifest.js: 0 beim Eintritt, 1 beim
     Austritt. Daraus wird ein Versatz von ±26 px — mehr wäre ein
     Effekt, weniger sähe man nicht. */
  transform: translateY(calc(-50% + (var(--fortschritt, 0.5) - 0.5) * -52px));
}

/* In Bewegung 01 steht rechts das Bild und links der Text — auf halber
   Höhe ist nirgends Platz. Frei ist nur die untere linke Ecke unter der
   Pointe, und dorthin geht die Ziffer. Sie hängt an der Unterkante des
   Abschnitts, damit sie nicht wandert, wenn der Text eine Zeile mehr
   braucht. */
.akt--01 .akt-nr {
  top: auto;
  bottom: calc(var(--sektion) * -0.25);
  right: auto;
  left: calc(var(--rand) * -0.4);
  transform: translateY(calc((var(--fortschritt, 0.5) - 0.5) * -52px));
}

@media (max-width: 1099px) {
  /* Unter dieser Breite gibt es keinen Außenrand mehr, in dem die
     Ziffer stehen könnte — dann lieber gar keine. */
  .akt-nr { display: none; }
}

/* ============================================================
   2 · DIE STAFFEL — das Grundmuster der ganzen Seite

   Jede Zeile ist ein eigenes Element mit laufender Nummer (`--i`,
   gesetzt von bauen.stufen()). Daraus rechnet die Verzögerung. Ein
   <br> hätte dieselben Umbrüche ergeben, aber keine eigenen Einsätze
   — und genau die sind hier der Punkt.
   ============================================================ */

.akt-text .eyebrow,
.akt-text .akt-these,
.akt-text .akt-lead,
.akt-text .akt-anriss,
.akt-text .akt-wende,
.akt-text .akt-pointe,
.akt-text .akt-fuss,
.akt-text .pointe,
.stufe {
  opacity: 0;
  transform: translateY(var(--weg));
  transition: opacity 0.85s var(--kurve-sanft), transform 0.95s var(--kurve);
}

.akt-text.ist-da .eyebrow,
.akt-text.ist-da .akt-these,
.akt-text.ist-da .akt-lead,
.akt-text.ist-da .akt-anriss,
.akt-text.ist-da .akt-wende,
.akt-text.ist-da .akt-pointe,
.akt-text.ist-da .akt-fuss,
.akt-text.ist-da .pointe,
.ist-da .stufe { opacity: 1; transform: none; }

/* Die Reihenfolge innerhalb eines Blocks. Die Zahlen sind keine
   Kunst — sie halten nur den Abstand, den die Staffel darunter
   fortsetzt. */
.akt-text .eyebrow    { transition-delay: 0ms; }
.akt-text .akt-these  { transition-delay: 140ms; }
.akt-text .akt-lead   { transition-delay: 280ms; }
.akt-text .akt-anriss { transition-delay: 280ms; }
.akt-text .akt-wende  { transition-delay: 420ms; }
.stufe                { transition-delay: calc(var(--anlauf) + var(--i, 0) * var(--takt)); }

/* Die Pointe kommt zuletzt — sie ist der Schluss des Gedankens und
   soll nicht gleichzeitig mit seinem Anfang dastehen. */
.akt-text .akt-pointe { transition-delay: 900ms; }
.akt-text .akt-fuss   { transition-delay: 700ms; }

/* ============================================================
   3 · AUFTAKT
   ============================================================ */

.akt-auftakt { padding-bottom: var(--raum-5); }

.auftakt-titel { max-width: 20ch; }

/* Die Schlagzeile tritt Wort für Wort an. Die Spans sind inline, der
   Umbruch bleibt dem Browser überlassen, und vorlesende Programme
   lesen den Satz unverändert. */
.auftakt-titel .wort {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.28em);
  transition: opacity 0.8s var(--kurve-sanft), transform 0.9s var(--kurve);
  transition-delay: calc(var(--i, 0) * 90ms + 120ms);
}

.auftakt.ist-da .auftakt-titel .wort { opacity: 1; transform: none; }

.auftakt-eyebrow {
  opacity: 0;
  transition: opacity 0.9s var(--kurve-sanft);
}
.auftakt.ist-da .auftakt-eyebrow { opacity: 1; }

.auftakt-signatur {
  margin-top: var(--raum-4);
  max-width: 44ch;
  color: var(--text-2);
  opacity: 0;
  transform: translateY(var(--weg));
  transition: opacity 1.1s var(--kurve-sanft) 620ms,
              transform 1.1s var(--kurve) 620ms;
}
.auftakt.ist-da .auftakt-signatur { opacity: 1; transform: none; }

/* Der Faden: dieselbe wandernde Linie, die im Held der Startseite den
   Weg nach unten zeigt. Hier wächst sie erst, wenn die Signatur
   steht. */
.faden {
  display: block;
  margin-top: var(--raum-5);
  opacity: 0;
  transition: opacity 1s var(--kurve-sanft) 1.15s;
}
.auftakt.ist-da .faden { opacity: 1; }

.faden i {
  display: block;
  width: 1px;
  height: 54px;
  background: var(--akzent);
  transform-origin: top;
  animation: scroll-linie 2.8s ease-in-out infinite;
}

/* ============================================================
   4 · BEWEGUNG 01 — die Beobachtungen an der wachsenden Linie
   ============================================================ */

.akt-raster {
  display: grid;
  gap: var(--raum-5);
  align-items: center;
}

@media (min-width: 900px) {
  .akt-raster {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
    gap: clamp(3rem, 6vw, 6.5rem);
  }
}

.akt-these {
  max-width: 18ch;
  margin-bottom: var(--raum-4);
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
}

.akt-these--breit { max-width: 26ch; }

/* In den schmalen Bewegungen steht die These über die volle Spalte —
   18ch ergäben dort einen fünfzeiligen Turm. */
.huelle--schmal .akt-these { max-width: 24ch; }

.akt-lead { max-width: 52ch; }

.akt-zeilen {
  position: relative;
  padding-left: var(--raum-3);
  display: grid;
  gap: 0.7em;
  margin-bottom: var(--raum-5);
}

/* Die Linie wächst mit den Zeilen mit — dieselbe Geste wie im
   Manifest-Auftakt der Startseite, nur über eine längere Strecke. */
.akt-zeilen::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  bottom: 0.4em;
  width: 1px;
  background: linear-gradient(to bottom,
    var(--akzent) 0%, var(--linie-akzent) 78%, transparent 100%);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.6s var(--kurve) 0.2s;
}

.ist-da .akt-zeilen::before { transform: scaleY(1); }

.akt-zeile {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-weight: 300;
  line-height: 1.5;
  color: var(--text-2);
}

/* Die letzte Beobachtung ist die Wende — sie steht heller. */
.akt-zeile:last-child { color: var(--text); }

.akt-pointe {
  max-width: 34ch;
  font-size: clamp(1.2rem, 2.2vw, 1.65rem);
  line-height: 1.45;
  color: var(--text);
}

.akt-pointe::before {
  content: "";
  display: block;
  width: 96px;
  height: 1px;
  margin-bottom: var(--raum-3);
  background: linear-gradient(to right, var(--akzent), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--kurve) 0.85s;
}

.ist-da .akt-pointe::before { transform: scaleX(1); }

/* ============================================================
   5 · DAS BILD — der einzige echte Versatz der Seite

   Der Schnitt trägt den Aufzug, das Bild darin läuft frei weiter.
   `--versatz-px` kommt aus manifest.js und hängt am Scrollstand;
   ohne Script bleibt es 0 und das Bild steht einfach still.
   ============================================================ */

.akt-bild {
  --kragen: clamp(12px, 1.5vw, 24px);
  position: relative;
  overflow: visible;
}

.akt-rahmen {
  position: absolute;
  inset: var(--kragen) calc(var(--kragen) * -1) calc(var(--kragen) * -1) var(--kragen);
  border: 1px solid var(--linie-akzent);
  border-top: 0;
  border-left: 0;
  opacity: 0;
  transform: translate(calc(var(--kragen) * -0.6), calc(var(--kragen) * -0.6));
  transition: opacity 1s var(--kurve-sanft) 0.7s, transform 1.2s var(--kurve) 0.7s;
}

.akt-bild.ist-da .akt-rahmen { opacity: 1; transform: none; }

.akt-schnitt {
  display: block;
  position: relative;
  overflow: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.5s var(--kurve) 0.1s;
}

.akt-bild.ist-da .akt-schnitt { clip-path: inset(0 0 0 0); }

.akt-bild img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  /* Der Aufschlag von 1,12 ist der Spielraum, aus dem der Versatz
     schöpft — ohne ihn liefe an einem Rand die Fläche leer. */
  transform: translate3d(0, var(--versatz-px, 0px), 0) scale(1.12);
  will-change: transform;
}

/* Ein einzelner Lichtstreifen beim Aufziehen. Genau einmal, nicht in
   Schleife — sonst wäre es ein Effekt statt eines Auftritts. */
.akt-schnitt::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(104deg,
    transparent 40%, rgba(233, 240, 231, 0.14) 50%, transparent 60%);
  transform: translateX(-130%);
}

.akt-bild.ist-da .akt-schnitt::after {
  animation: akt-glanz 1.9s var(--kurve-sanft) 0.85s 1 both;
}

@keyframes akt-glanz { to { transform: translateX(130%); } }

/* Hier standen zwei eigene Filter fuer das Fassadenmotiv der
   Bewegung 01. Sie waren spezifischer als `.bild--motiv` und haben
   es an der gemeinsamen Behandlung vorbeigefuehrt: grayscale(0.2)
   liess 80 % Farbe stehen, wo alle anderen Motive auf 32 % gehen.
   Das Bild blieb dadurch das waermste der Seite. Ohne eigenen
   Filter greift jetzt `.bild--motiv`. */

.akt-bild--portraet img { aspect-ratio: 4 / 5; border-radius: var(--kante-fein); }

/* ============================================================
   6 · BEWEGUNG 02 — die Zeit-Kaskade

   Vier Zeilen, jede mit einer kurzen Linie, die von links in sie
   hineinläuft. „Zeit" trägt die Stelle und steht deshalb im Akzent.
   ============================================================ */

.kaskade {
  display: grid;
  gap: clamp(0.7rem, 1.6vw, 1.15rem);
  margin-top: var(--raum-4);
}

.kaskade-zeile {
  position: relative;
  padding-left: clamp(3rem, 6vw, 5.5rem);
  font-size: clamp(1.2rem, 2.6vw, 1.9rem);
  font-weight: 300;
  line-height: 1.35;
  color: var(--text);
  max-width: 36ch;
}

.kaskade-zeile::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: clamp(2rem, 4.4vw, 4rem);
  height: 1px;
  background: var(--akzent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--kurve);
  transition-delay: calc(var(--anlauf) + var(--i, 0) * var(--takt));
}

.ist-da .kaskade-zeile::before { transform: scaleX(1); }

@media (max-width: 500px) {
  .kaskade-zeile {
    padding-left: clamp(1.75rem, 7vw, 2.75rem);
  }
  .kaskade-zeile::before {
    width: clamp(1.25rem, 5vw, 2rem);
  }
}

.kernwort { color: var(--akzent); }

/* Die vierte Zeile ist der lange Nachsatz — sie darf leiser und
   kleiner stehen, sonst kippt die Staffel. */
.kaskade-zeile:last-child {
  font-size: clamp(1.02rem, 1.7vw, 1.25rem);
  color: var(--text-2);
  max-width: 42ch;
  line-height: 1.55;
}

/* ============================================================
   7 · BEWEGUNG 03 — die Wortreihe
   ============================================================ */

.wortreihe {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(0.9rem, 2.4vw, 2.2rem);
  margin-top: var(--raum-5);
}

.wortreihe-wort {
  position: relative;
  font-size: clamp(1.1rem, 2.1vw, 1.5rem);
  font-weight: 300;
  color: var(--text);
}

/* Ein Salbei-Punkt vor jedem Begriff außer dem ersten: er setzt sich
   erst, wenn das Wort steht. */
.wortreihe-wort + .wortreihe-wort::before {
  content: "";
  position: absolute;
  left: calc(clamp(0.9rem, 2.4vw, 2.2rem) * -0.5);
  top: 0.62em;
  width: 3px;
  height: 3px;
  background: var(--akzent);
  transform: scale(0);
  transition: transform 0.6s var(--kurve);
  transition-delay: calc(var(--anlauf) + var(--i, 0) * var(--takt) + 200ms);
}

.ist-da .wortreihe-wort + .wortreihe-wort::before { transform: scale(1); }

/* Der letzte Eintrag ist ein ganzer Halbsatz, kein Begriff mehr. Er
   bekommt deshalb seine eigene Zeile — sonst bricht er irgendwo um und
   sein Trennpunkt hinge allein am Zeilenanfang. */
.wortreihe-wort:last-child {
  flex-basis: 100%;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--text-2);
}

.wortreihe-wort:last-child::before { content: none; }

/* ============================================================
   8 · DER SATZ — die ruhige Mitte

   Zwei Zeilen, sonst nichts. Sie stehen von Anfang an da, aber sehr
   dunkel, und hellen Wort für Wort auf. Es bewegt sich nichts.
   ============================================================ */

.akt-satz { text-align: center; }

.satz {
  font-size: clamp(1.35rem, 3.4vw, 2.5rem);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: var(--sperr-eng);
  text-transform: uppercase;
  text-wrap: balance;
  max-width: 24ch;
  margin-inline: auto;
}

.satz-zeile { display: block; }
.satz-zeile + .satz-zeile { margin-top: 0.35em; color: var(--akzent); }

.satz .wort {
  display: inline-block;
  opacity: 0.14;
  transition: opacity 0.7s var(--kurve-sanft);
  transition-delay: calc(var(--i, 0) * var(--takt-wort) + 150ms);
}

.satz.ist-da .wort { opacity: 1; }

/* ============================================================
   9 · DIE ENTSCHEIDUNG — die einzige Stelle, an der etwas geht

   Drei Gegensatzpaare. Die linke Hälfte tritt an, bekommt ihren
   Strich und verblasst; die rechte bleibt und nimmt den Akzent. Die
   Reihen sind gegeneinander versetzt, damit man den Vorgang dreimal
   sieht statt einmal in dreifacher Ausführung.
   ============================================================ */

.akt-entscheidung { text-align: center; }

.entscheidung-vorsatz {
  max-width: 46ch;
  margin-inline: auto;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  color: var(--text-2);
  opacity: 0;
  transform: translateY(var(--weg));
  transition: opacity 1s var(--kurve-sanft), transform 1s var(--kurve);
}

.entscheidung.ist-da .entscheidung-vorsatz { opacity: 1; transform: none; }

.waage {
  display: grid;
  gap: clamp(0.8rem, 2vw, 1.4rem);
  width: 100%;
  margin: clamp(2.5rem, 6vw, 4.5rem) auto;
}

.waage-reihe {
  --einsatz: calc(600ms + var(--i, 0) * 420ms);
  --trenner-breite: clamp(1.6rem, 5vw, 4rem);
  display: grid;
  /* Gleich breite Außenbahnen halten den Trenner auf der Mittelachse,
     auch wenn die beiden Satzhälften unterschiedlich lang sind. */
  grid-template-columns: minmax(0, 1fr) var(--trenner-breite) minmax(0, 1fr);
  align-items: baseline;
  gap: clamp(0.8rem, 2.4vw, 2rem);
  font-size: clamp(1.1rem, 2.4vw, 1.75rem);
  font-weight: 300;
  letter-spacing: var(--sperr-eng);
  text-transform: uppercase;
}

/* Beide Hälften treten gleich an — die Entscheidung ist ja noch nicht
   gefallen. Erst die Animation weiter unten trennt sie. */
.waage-weg,
.waage-hin {
  color: var(--text-2);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.8s var(--kurve-sanft) var(--einsatz),
              transform 0.8s var(--kurve) var(--einsatz);
}

/* justify-self statt text-align: die Hälfte soll nur so breit sein wie
   ihr Text. Sonst zöge der Strich unten quer durch die ganze Spalte,
   auch dort, wo gar nichts mehr steht. */
.waage-weg { justify-self: end; position: relative; }
.waage-hin { justify-self: start; }

/* Solange die Wahl offen ist, hebt sich auch das tragende Wort nicht
   ab — sonst stünde die Antwort schon da, bevor die Frage gestellt
   ist. */
.waage-weg .kernwort,
.waage-hin .kernwort { color: inherit; }

.entscheidung.ist-da .waage-weg,
.entscheidung.ist-da .waage-hin { opacity: 1; transform: none; }

/* Der Strich durch die verworfene Hälfte. Er wird gezogen, nicht
   eingeblendet — deshalb scaleX aus der Mitte statt Deckkraft. */
.waage-weg::after {
  content: "";
  position: absolute;
  left: -0.1em;
  right: -0.1em;
  /* Mitte der Versalien (Meeting 29.09.2026). Gemessen bei 28 px: der
     Strich lag mit 0.52em 7,9 px über der Schriftmitte — die Zeile hat
     line-height 1,7, die Versalien sitzen darin bei 0,825 em. Alles in
     em, also stimmt es bei jeder Schriftgröße des clamp() mit. */
  top: calc(0.825em - 0.5px);
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.75s var(--kurve);
  transition-delay: calc(var(--einsatz) + 900ms);
}

.entscheidung.ist-da .waage-weg::after { transform: scaleX(1); }

/* Und erst danach fällt die Entscheidung. Als Animation, nicht als
   Übergang: die Deckkraft trägt schon den Auftritt, und ein und
   dieselbe Eigenschaft kann nicht zwei Verzögerungen haben. Mit
   `forwards` liegt die Animation während ihrer Wartezeit still —
   solange gilt der Übergang von oben — und hält danach ihren
   Endzustand.

   Die Reihenfolge ist wichtig: erst der Strich, dann das Zurücktreten.
   Andersherum sähe man den Strich schon nicht mehr. */
.entscheidung.ist-da .waage-weg {
  animation: waage-zurueck 1.2s var(--kurve-sanft) calc(var(--einsatz) + 1250ms) forwards;
}

.entscheidung.ist-da .waage-hin {
  animation: waage-gewaehlt 1.2s var(--kurve-sanft) calc(var(--einsatz) + 1250ms) forwards;
}

@keyframes waage-zurueck {
  to { color: var(--text-3); opacity: var(--zurueck, 1); }
}

@keyframes waage-gewaehlt {
  to { color: var(--akzent); }
}

/* Wie weit die verworfene Hälfte zurücktreten darf, hängt daran, wie
   groß sie steht. Ab 1000 px greift der obere Rand des clamp und die
   Zeile ist mit 24 px „große Schrift" — dort reichen 3:1, und 0,72
   liefert 3,0:1 auf Sand und 3,9:1 auf der dunklen Bühne. Darunter ist
   sie normaler Fließtext und braucht 4,5:1; dann bleibt die Deckkraft
   bei 1 und die Farbe allein (--text-3, 5,0:1) macht den Unterschied.
   Verblassen darf nur, was groß genug ist, um es zu vertragen. */
@media (min-width: 1000px) {
  .waage-weg { --zurueck: 0.72; }
}

/* Der Trenner in der Mitte wächst von links nach rechts durch — er ist
   die Bewegung, die den Blick von der einen auf die andere Seite
   nimmt. */
.waage-strich {
  align-self: center;
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, var(--linie-akzent), var(--akzent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.85s var(--kurve);
  transition-delay: calc(var(--einsatz) + 550ms);
}

.entscheidung.ist-da .waage-strich { transform: scaleX(1); }

@media (max-width: 599px) {
  /* Untereinander bleibt der Gegensatz lesbar, der Strich dreht sich
     mit. Drei Spalten wären bei 360 px zwei Silben pro Zeile. */
  .waage { gap: var(--raum-4); }
  .waage-reihe { grid-template-columns: 1fr; gap: 0.35rem; justify-items: center; }
  .waage-weg, .waage-hin { justify-self: center; text-align: center; }
  .waage-strich { width: 1px; height: 1.1rem; transform-origin: top; transform: scaleY(0);
                  background: linear-gradient(to bottom, var(--linie-akzent), var(--akzent)); }
  .entscheidung.ist-da .waage-strich { transform: scaleY(1); }
}

.entscheidung-schluss {
  font-size: clamp(1.6rem, 4.4vw, 3.2rem);
  max-width: 22ch;
  margin-inline: auto;
}

/* Das letzte Wort des Manifests bekommt die letzte Bewegung: es hellt
   auf, nachdem alle drei Reihen entschieden sind. */
.entscheidung-schluss .wort {
  display: inline-block;
  opacity: 0.12;
  transition: opacity 0.8s var(--kurve-sanft);
  transition-delay: calc(2450ms + var(--i, 0) * 110ms);
}

.entscheidung.ist-da .entscheidung-schluss .wort { opacity: 1; }
.entscheidung.ist-da .entscheidung-schluss .wort:last-child { color: var(--akzent); }

.akt-entscheidung .signatur-block {
  margin-top: clamp(3rem, 7vw, 5rem);
  border-top: 1px solid var(--linie-fein);
  opacity: 0;
  transition: opacity 1.2s var(--kurve-sanft) 3.1s;
}

.entscheidung.ist-da .signatur-block { opacity: 1; }
.akt-entscheidung .signatur-block .serif { color: var(--text-2); }

/* ============================================================
   10 · ANSPRUCH & GRÜNDERIN
   ============================================================ */

/* Im Anspruch steht ueber der Zeile eine gewoehnliche h2 ohne
   Grundabstand — anders als die .akt-these der Bewegungen, die ihren
   schon mitbringt. Ohne das hier klebte die Zeile an der Schlagzeile. */
.akt-anspruch .h2 + .akt-lead { margin-top: var(--raum-3); }

.anspruch-stufen .stufe + .stufe { margin-top: var(--raum-3); }

/* Die Pointe des Anspruchs hellt Wort für Wort auf, sobald der
   Absatz darüber steht. */
.pointe--licht .wort {
  display: inline-block;
  opacity: 0.2;
  transition: opacity 0.65s var(--kurve-sanft);
  transition-delay: calc(var(--i, 0) * var(--takt-wort) + 900ms);
}

.akt-text.ist-da .pointe--licht .wort { opacity: 1; }
.akt-text .pointe--licht { transition-delay: 750ms; }

/* Der Textlink stand vorher mit einem Inline-Stil auf Abstand. Der
   Abstand gehoert hierher, nicht in die Seite. */
.akt-fuss { margin-top: var(--raum-4); }

.akt-wende {
  margin-top: var(--raum-3);
  font-size: clamp(1.15rem, 2.1vw, 1.5rem);
  color: var(--text);
  max-width: 34ch;
}

.akt-gruenderin .akt-bild { --kragen: 0px; }
.akt-gruenderin .portraet { overflow: visible; }

/* Die Ecke aus dem Logo sitzt am Porträt schon in seiten.css. Sie darf
   nur nicht vor dem Bild dastehen, das sie rahmen soll. */
.akt-bild--portraet::before {
  opacity: 0;
  transition: opacity 1s var(--kurve-sanft) 0.75s;
}
.akt-bild--portraet.ist-da::before { opacity: 1; }

/* ============================================================
   11 · DIE BEIDEN AUSNAHMEN

   Ohne JavaScript wird nie ein `ist-da` gesetzt — dann muss jeder
   Endzustand von vornherein dastehen, sonst bliebe die halbe Seite
   unsichtbar. Bei prefers-reduced-motion gilt dasselbe, zusätzlich
   stehen Licht, Glanz und Versatz still.
   ============================================================ */

.kein-js .akt-text .eyebrow,
.kein-js .akt-text .akt-these,
.kein-js .akt-text .akt-lead,
.kein-js .akt-text .akt-anriss,
.kein-js .akt-text .akt-wende,
.kein-js .akt-text .akt-pointe,
.kein-js .akt-text .akt-fuss,
.kein-js .akt-text .pointe,
.kein-js .stufe,
.kein-js .auftakt-titel .wort,
.kein-js .auftakt-eyebrow,
.kein-js .auftakt-signatur,
.kein-js .faden,
.kein-js .akt-rahmen,
.kein-js .satz .wort,
.kein-js .entscheidung-vorsatz,
.kein-js .waage-weg,
.kein-js .waage-hin,
.kein-js .entscheidung-schluss .wort,
.kein-js .akt-entscheidung .signatur-block,
.kein-js .pointe--licht .wort,
.kein-js .akt-bild--portraet::before { opacity: 1; transform: none; }

.kein-js .akt-zeilen::before,
.kein-js .akt-pointe::before,
.kein-js .kaskade-zeile::before,
.kein-js .waage-strich,
.kein-js .wortreihe-wort + .wortreihe-wort::before { transform: none; }

/* Ohne JavaScript fällt die Entscheidung trotzdem — nur eben sofort
   und ohne Vorführung. Der Strich steht, die eine Hälfte ist leise,
   die andere im Akzent. */
.kein-js .waage-weg { color: var(--text-3); }
.kein-js .waage-weg::after { transform: scaleX(1); }
.kein-js .waage-hin { color: var(--akzent); }
.kein-js .entscheidung-schluss .wort:last-child { color: var(--akzent); }
.kein-js .akt-schnitt { clip-path: none; }

@media (prefers-reduced-motion: reduce) {
  .akt-licht { animation: none; }
  .faden i { animation: none; transform: scaleY(1); }
  .akt-schnitt { clip-path: none; }
  .akt-schnitt::after { display: none; }
  .akt-bild img { transform: scale(1.02); }
  .akt-nr { transform: translateY(-50%); }
  .akt--01 .akt-nr { transform: none; }

  .akt-text .eyebrow,
  .akt-text .akt-these,
  .akt-text .akt-lead,
  .akt-text .akt-anriss,
  .akt-text .akt-wende,
  .akt-text .akt-pointe,
  .akt-text .akt-fuss,
  .akt-text .pointe,
  .stufe,
  .auftakt-titel .wort,
  .auftakt-eyebrow,
  .auftakt-signatur,
  .faden,
  .akt-rahmen,
  .satz .wort,
  .entscheidung-vorsatz,
  .waage-weg,
  .waage-hin,
  .entscheidung-schluss .wort,
  .akt-entscheidung .signatur-block,
  .pointe--licht .wort,
  .akt-bild--portraet::before { opacity: 1; transform: none; }

  /* Der Gegensatz bleibt lesbar, nur wird er nicht mehr vorgeführt:
     die verworfene Hälfte steht von Anfang an leise, die gewählte im
     Akzent. */
  .waage-weg { color: var(--text-3); }
  .waage-weg::after { transform: scaleX(1); }
  .waage-hin { color: var(--akzent); }
  .entscheidung-schluss .wort:last-child { color: var(--akzent); }
  .entscheidung.ist-da .waage-weg,
  .entscheidung.ist-da .waage-hin { animation: none; }
  .waage-strich { transform: scaleX(1); }

  .akt-zeilen::before,
  .akt-pointe::before,
  .kaskade-zeile::before { transform: none; }
  .wortreihe-wort + .wortreihe-wort::before { transform: scale(1); }
}

/* Das Fassadenmotiv der Bewegung 01, enger gezogen.
   Bei 3/4 standen vier Etagen uebereinander im Bild — und damit die
   Wiederholung sichtbar, die diese Aufnahme verraet: auf jedem
   Balkon dieselbe Topfpflanze, dieselben zwei Stuehle, in derselben
   Anordnung. Ein Muster faellt erst auf, wenn man es zweimal sieht.
   Das Quadrat zeigt zwei Etagen; damit gibt es kein zweites Mal.

   Die Regel haengt bewusst an `.akt-bild--motiv` und nicht an
   `.akt-bild`: die Klasse traegt nebenan auch das Portraet, und das
   bleibt unberuehrt. */
.akt-bild--motiv img { aspect-ratio: 1 / 1; }

/* Drei Anker geben der langen Manifestseite Orientierung. */
.manifest-sprung {
  border-block: 1px solid var(--linie-fein);
  background: var(--buehne-2);
}
.manifest-sprung .huelle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-2) var(--raum-5);
}
.manifest-sprung a {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  min-height: 48px;
  padding-block: var(--raum-2);
  color: var(--text-2);
  font-size: var(--t-label);
  letter-spacing: var(--sperr-mittel);
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--dauer-kurz) var(--kurve-sanft);
}
.manifest-sprung a:hover,
.manifest-sprung a:focus-visible { color: var(--text); }
.manifest-sprung .icon { width: 1rem; height: 1rem; color: var(--akzent); }
#verstaendnis,
#anspruch,
#vanessa { scroll-margin-top: calc(var(--kopf-hoehe) + var(--raum-3)); }

/* Die Kapitel behalten ihre Pausen, ohne auf langen Seiten zu viel
   ungenutzte Bildschirmhöhe zwischen den Aussagen aufzubauen. */
.akt--01,
.akt--02,
.akt--03,
.akt-satz,
.akt-entscheidung,
.akt-anspruch,
.akt-gruenderin { padding-block: clamp(4rem, 7vw, 7rem); }