/* ============================================================
   LIVÉRA Property Care — Seitenbausteine
   Held · Manifest · Kompetenzfelder · Gründerin · Kompass ·
   Formulare · Rechtliches
   ============================================================ */

/* Logo-Varianten je Bühne */
.nur-hell { display: none; }
:root[data-thema="hell"] .nur-hell   { display: block; }
:root[data-thema="hell"] .nur-dunkel { display: none; }

/* Kopf und Fußleiste stehen im hellen Modus dunkel (30.09.2026; vorher
   Waldgrün) — dort trägt die Fassung für dunklen
   Grund (helle Schrift, Salbeirahmen). Die Salbei-Fassung
   (wortmarke-auf-salbei.svg, dunkle Tinte) bleibt im Markup, wird
   aber nicht mehr gezeigt. */
.nur-salbei { display: none; }
:root[data-thema="hell"] .kopf .nur-hell   { display: none; }
:root[data-thema="hell"] .kopf .nur-dunkel,
:root[data-thema="hell"] .fuss .nur-dunkel { display: block; }

/* ============================================================
   1 · HELD
   ============================================================ */

.held {
  position: relative;
  min-height: min(100svh, 900px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: calc(var(--kopf-hoehe) + var(--raum-6)) var(--raum-6);
  overflow: hidden;
  isolation: isolate;
}

.held-bild {
  position: absolute;
  inset: -6% 0;
  z-index: -2;
  /* Sanfte Parallax: livera.js setzt --parallax-px beim Scrollen.
     Das Bild ist 6 % höher als der Ausschnitt, damit nie ein Rand
     sichtbar wird. */
  transform: translate3d(0, var(--parallax-px, 0px), 0);
  will-change: transform;
}

.held-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Tageslichtfoto (Meeting 04.09.2026: „heller, freundlicher") — es
     darf jetzt tragen. Vorher 0,34 für die Nachtaufnahme, bis 21.09.
     0,72. Seit dem Meeting 21.09.2026 („dunkles Theme eher als
     Hintergrundbild") voll deckend; die Ruhe für den Text kommt aus
     dem Schleier in ::after, nicht mehr aus durchscheinendem Schwarz. */
  opacity: 1;
}

/* Dunkles Theme: das Foto füllt den ganzen Hero wie ein Hintergrund-
   bild. Statt eines Verlaufs, der links in Schwarz ausläuft, liegt ein
   gleichmäßiger Schleier darüber; links nur ein leichter Schatten mehr
   für die Lesbarkeit, unten ein kurzer Übergang in den Seitengrund. */
.held-bild::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--buehne) 2%, transparent 32%),
    linear-gradient(to right, rgba(20, 21, 18, 0.48) 0%, rgba(20, 21, 18, 0.2) 45%, transparent 70%),
    linear-gradient(rgba(20, 21, 18, 0.32), rgba(20, 21, 18, 0.32));
}

/* Helles Theme (28.09.2026): klare Trennung statt Schleier. Vorher lag
   Creme halbdeckend über dem ganzen Foto, dazu Sockel und Schein um die
   Schrift — die Schlagzeile stand auf einem milchigen Mischgrund, das
   Foto sah verwaschen aus. Jetzt deckt die Creme die Textspalte voll,
   läuft dann auf gut 350 px aus, und rechts steht das Foto unverändert.

   --held-deckung ist die rechte Kante der Textspalte: die Knopfzeile
   ist das breiteste Element (rund 725 px ab dem Rand der Hülle). Ab
   1400 px Hülle sitzt sie bei 50 % + 73 px, darunter bei rund 775 px.
   Unten ein Cremeband, damit die zentrierte Fußzeile nie aufs Foto
   läuft. Die Zwischenstufen mischen --buehne selbst, damit der Auslauf
   jeder Änderung am Cremeton folgt. */
:root[data-thema="hell"] .held-bild::after {
  --held-deckung: max(calc(50% + 80px), 800px);
  background:
    linear-gradient(to top,
      var(--buehne) 0%,
      var(--buehne) 11%,
      transparent 24%),
    linear-gradient(to right,
      var(--buehne) 0%,
      var(--buehne) var(--held-deckung),
      color-mix(in srgb, var(--buehne) 82%, transparent) calc(var(--held-deckung) + 80px),
      color-mix(in srgb, var(--buehne) 45%, transparent) calc(var(--held-deckung) + 180px),
      color-mix(in srgb, var(--buehne) 15%, transparent) calc(var(--held-deckung) + 280px),
      transparent calc(var(--held-deckung) + 370px));
}

/* Schmal läuft die Textspalte über die ganze Breite — das Foto bleibt
   ein Streifen am rechten Rand. */
@media (max-width: 1000px) {
  :root[data-thema="hell"] .held-bild::after {
    background:
      linear-gradient(to top,
        var(--buehne) 0%,
        var(--buehne) 11%,
        transparent 24%),
      linear-gradient(to right,
        var(--buehne) 0%,
        var(--buehne) 58%,
        color-mix(in srgb, var(--buehne) 60%, transparent) 76%,
        color-mix(in srgb, var(--buehne) 15%, transparent) 92%,
        transparent 100%);
  }
}

/* „Rahmen verschoben und größer" — der offene Rahmen aus dem Logo
   als Layout-Element: groß, aus der Mitte gerückt, nur zwei Kanten. */
.held-rahmen {
  position: absolute;
  z-index: -1;
  top: clamp(90px, 14vh, 170px);
  right: clamp(-40px, -2vw, 0px);
  width: clamp(280px, 46vw, 720px);
  height: clamp(240px, 42vh, 560px);
  border-top: 1px solid var(--linie-akzent);
  border-right: 1px solid var(--linie-akzent);
  pointer-events: none;
}

@media (max-width: 1024px) {
  .held-rahmen { right: 0; }
}
@media (max-width: 768px) {
  .held-rahmen { display: none; }
}

.held-rahmen::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: 0;
  width: 34%;
  height: 1px;
  background: var(--linie-akzent);
}

/* Das Rauchband zieht helle Schlieren durch die Schlagzeile. Technisch
   bleibt der Kontrast bei 10,6:1 weit über der Anforderung — optisch
   zerschneidet die Schliere aber die haarfeinen Jost-Züge.
   Gegenmaßnahme eins: ein weit gestreuter Schein, der der Schrift ein
   Bett unterlegt, statt sie zu umranden. Gegenmaßnahme zwei sitzt in
   komponenten.css als Maske auf der Bandebene. */
.held-innen { position: relative; }

/* Gegenmassnahme drei — der Sockel. Ein weich auslaufender Fleck,
   der Foto und Band genau unter der Textspalte zurueckdraengt. Er
   liegt zwischen Bandebene und Schrift: gleiche Ebene wie die
   Baender, aber spaeter im Dokument, also darueber. Nach aussen
   laeuft er ins Nichts, deshalb sieht man keine Flaeche — nur dass
   die Schlagzeile plotzlich Grund unter sich hat. */
.held-innen::before {
  content: "";
  position: absolute;
  inset: -22% -34% -18% -55%;
  z-index: -1;
  background: var(--held-sockel);
  pointer-events: none;
}

.held-titel,
.held-signatur,
.held .eyebrow { text-shadow: var(--held-schein); }

/* Der Dreiklang ist die lauteste Stelle der Seite. Ein Grad ueber
   dem uebrigen Mega-Wert und eine Gewichtsstufe kraeftiger als die
   restlichen Schlagzeilen — Jost 300 zerfaellt bei 7 rem zu einer
   Kontur, 400 gibt den Zuegen wieder Koerper, ohne fett zu wirken. */
.held-titel {
  display: flex;
  flex-direction: column;
  gap: 0.04em;
  margin-bottom: var(--raum-4);
  font-size: var(--t-held);
  font-weight: 400;
  letter-spacing: -0.005em;
}

.held-wort {
  display: block;
  line-height: 0.98;
}

/* Fluchtbündig (Meeting 21.09. und 29.09.2026): alle drei Wörter
   stehen auf der Kante von Eyebrow und Signatur — und zwar so, dass
   auch die Markierung im Browser in einer Flucht beginnt.
   Bis 29.09. schob ein negativer margin-left ERHALTEN (−0,07 em) und
   STEIGERN (−0,028 em) nach links, weil E und S in Jost einen Vorlauf
   vor dem Strich haben: die Tinte stand bündig, die Markierungskästen
   aber nicht (8,5 bzw. 3,4 px Stufe), und das spitze V ließ das E
   optisch nach außen wirken. Jetzt wechselt nur der erste Buchstabe
   jeder Zeile in eine Teilschrift ohne Vorlauf (fonts.css „Jost
   Anfang“, Quelle: _bau/schrift-anfang.py): Tinte und Kasten beginnen
   gemeinsam, E auf der Kante, V und S hängen ein wenig über.
   Gilt für genau diese drei Wörter (inhalt.DREIKLANG); bei anderem
   Wortlaut Skript und Zeichenliste anpassen. */
.held-wort:nth-child(2) { color: var(--akzent); }
.held-wort-innen::first-letter {
  font-family: "Jost Anfang", var(--schrift-sans);
}

.held-signatur {
  max-width: 46ch;
  color: var(--text-2);
  margin-bottom: var(--raum-5);
}

.held-fuss {
  position: relative;
  margin-top: auto;
  padding-top: var(--raum-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--raum-3);
  text-align: center;
}

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

@keyframes scroll-linie {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* --- Hero-Textanimation (Meeting 04.09.2026) ---------------------
   Sobald die Intro-Sequenz vorbei ist (`intro-fertig` am <html>),
   steigen die Zeilen nacheinander auf: Eyebrow, die drei Worte,
   Signatur, Buttons, Fußzeile. Eine Bewegung, eine Kurve, gestaffelt
   um 140 ms. Ohne JavaScript und bei reduzierter Bewegung steht alles
   sofort. */
.held .eyebrow,
.held-signatur,
.held-knoepfe,
.held-fuss {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1.4s var(--kurve-sanft) var(--held-einsatz, 0ms),
              transform 1.3s var(--kurve) var(--held-einsatz, 0ms);
}
.held .eyebrow           { --held-einsatz: 0ms; }
.held-signatur           { --held-einsatz: 1900ms; }
.held-knoepfe            { --held-einsatz: 2100ms; }
.held-fuss               { --held-einsatz: 2350ms; }

/* --- Der Dreiklang fällt als Kaskade heraus -----------------------
   Jede Zeile ist ein Fenster (`.held-wort`, beschnitten), das Wort
   darin (`.held-wort-innen`) startet eine Zeile höher — also genau
   dort, wo das Wort darüber steht — und fällt in sein Fenster. Beim
   Fallen wird es von der Oberkante des Fensters freigegeben: es sieht
   aus, als komme „Erhalten" unten aus „Verwalten" heraus und
   „Steigern" aus „Erhalten". Kein Fade — die Deckkraft bleibt 1, nur
   der Beschnitt und die Bewegung erzeugen den Eindruck. */
.held-wort {
  overflow: clip;
  overflow-clip-margin: 0.06em;
  padding-block: 0.02em;
}
.held-wort-innen {
  display: block;
  transform: translateY(-104%);
  /* Länger und mit der Markenkurve (schneller Antritt, sehr langes
     Auslaufen): das Wort gleitet in seine Zeile, statt zu fallen. Die
     Einsätze überlappen sich, damit die drei Bewegungen eine Welle sind. */
  transition: transform 1.7s var(--kurve) var(--held-einsatz, 0ms);
  will-change: transform;
}
.held-wort:nth-child(1) .held-wort-innen { --held-einsatz: 200ms; }
.held-wort:nth-child(2) .held-wort-innen { --held-einsatz: 720ms; }
.held-wort:nth-child(3) .held-wort-innen { --held-einsatz: 1240ms; }

.intro-fertig .held .eyebrow,
.intro-fertig .held-signatur,
.intro-fertig .held-knoepfe,
.intro-fertig .held-fuss,
.kein-js .held .eyebrow,
.kein-js .held-signatur,
.kein-js .held-knoepfe,
.kein-js .held-fuss { opacity: 1; transform: none; }

.intro-fertig .held-wort-innen,
.kein-js .held-wort-innen { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .held .eyebrow, .held-signatur, .held-knoepfe, .held-fuss {
    opacity: 1; transform: none; transition: none;
  }
  .held-wort-innen { transform: none; transition: none; }
  .held-bild { transform: none; }
}

/* ============================================================
   2 · SEITENKOPF (alle Seiten außer der Startseite)
   ============================================================ */

.sektion-titel {
  padding-top: calc(var(--kopf-hoehe) + var(--sektion));
  padding-bottom: var(--raum-5);
}

.brotkrumen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7em;
  margin-bottom: var(--raum-4);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.brotkrumen a { color: var(--akzent); }
.brotkrumen a:hover { color: var(--text); }

.eyebrow--zentriert { justify-content: center; }

/* ============================================================
   3 · MANIFEST
   ============================================================ */

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

@media (min-width: 900px) {
  /* Die gesetzten Manifest-Zeilen brauchen Platz — ihre Umbrüche sind
     Teil des Textes und sollen nicht vom Layout erzwungen werden. */
  .manifest-raster { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: var(--raum-6); }
}

.manifest-bild {
  position: relative;
  overflow: hidden;
}

.manifest-bild img {
  width: 100%;
  /* Vorher 3/4 — das ganze Haus mit Dach, Ecke und Vorgarten. Von
     allen Motiven der Seite ist dieses das hellste und farbigste,
     und dadurch steht es am naechsten am Architekturrendering.
     Das Quadrat nimmt Dach und Sockel heraus, --fokus schiebt den
     Rest nach unten auf die Balkonzone. */
  aspect-ratio: 1 / 1;
  --fokus: 50% 62%;
  object-fit: cover;
  /* Der fruehere `filter: grayscale(.35) contrast(1.05)` steht jetzt
     als .bild--motiv in komponenten.css und gilt fuer alle Motive
     gemeinsam. Haette er hier stehenbleiben duerfen, wuerde er ihn
     ueberschreiben — `.manifest-bild img` ist spezifischer. */
  opacity: 0.9;
}

.manifest-bild::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--buehne) 0%, transparent 45%);
  opacity: 0.7;
}

:root[data-thema="hell"] .manifest-bild::after {
  background: linear-gradient(to top, var(--buehne) 0%, transparent 22%);
  opacity: 0.4;
}

/* `filter: none` stand hier und hat auf Sand die gesamte
   Motivbehandlung ausgeschaltet — das Bild lief dort ungefiltert.
   Die Hell-Variante von `.bild--motiv` regelt das jetzt. */
:root[data-thema="hell"] .manifest-bild img { opacity: 1; }


/* ------------------------------------------------------------------
   3a · MANIFEST-AUFTAKT (nur Startseite)

   Zwei Dinge waren hier falsch: Der Auftakt fiel hinter dem hellen
   Gründerinnen-Akt auf die blanke Bühne zurück — und er war ein
   Stapel aus neun gleich schweren Zeilen, der sich nur als Ganzes
   einblendete.

   Deshalb hier: eigenes Licht statt Loch (ein sehr weiter
   Salbei-Schein von der Bildseite her, der langsam atmet) und eine
   Staffel statt eines Blocks — These, Beobachtungen, Pointe, jede
   Stufe mit eigenem Einsatz. Der Wortlaut bleibt unverändert.
   ------------------------------------------------------------------ */

/* Licht und Lichtkante kommen aus dem Bauteil `.hat-licht` /
   `.sektion-licht` (komponenten.css). Hier steht nur noch, wohin der
   Auftakt seinen Schwerpunkt legt: hinter das Bild. */
.sektion-manifest .sektion-licht { --lx: 74%; --ly: 38%; --lx2: 10%; --ly2: 66%; }

/* ==================================================================
   NÄHTE — Naht-Plan V3 (12.09.2026, eingearbeitet in Design MD's/Design-v3.md)
   ------------------------------------------------------------------
   Kante und Verlauf allein sind keine Naht. An jeder Naht der
   Startseite passiert jetzt genau eines:

   Verlauf     Unterlage für Band-Bühnen (.sektion--fest): zieht im Fuß
               des Vorgängers auf, läuft am eigenen Fuß aus. Nie das
               Ereignis, nur der Grund.
   Blattstapel Der Hero haftet, der Stapel danach schiebt sich als
               deckendes Blatt darüber.
   Leitlinie   Ein Faden am Inhaltsrand durch die ganze Seite, wechselt
               an den Nähten die Seite (Rahmenecke aus dem Logo), wird
               beim Scrollen gezeichnet, endet mit einem Punkt vor dem
               Erstgespräch. Gezeichnet von livera.js als SVG-Pfad in
               .buehne-stapel. Das eine bewegte Objekt an den Nähten.
   Ziffer      Die Geisterziffer der Manifestseite auf der Naht: eine
               Hälfte im alten, eine im neuen Abschnitt (zwei Elemente,
               weil beide Abschnitte `overflow: hidden` haben können).
   Objekt      Porträt, Fassade, Formularkarte hängen über die Kante.
   Bildband    Ein Foto als Atempause zwischen Kompetenzfeldern und
               Arbeitsweise.
   Lichtsaum   Nur vor dem mittig gesetzten Anspruch (und am Footer).

   Randgeräte brauchen Rand: Leitlinie und Ziffern gibt es erst ab
   1100 px, wie die Ziffern der Manifestseite.
   ================================================================== */

.sektion { --naht-lauf: clamp(160px, 18vh, 260px); }

/* --- Verlauf: Band-Bühne ein- und ausblenden --- */
.sektion:has(+ .sektion--fest)::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: calc(var(--sektion) + var(--naht-lauf));
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 0, var(--buehne-2) var(--naht-lauf));
}

/* (.sektion.sektion--fest schlägt die nth-of-type-Regel in basis.css.) */
.sektion.sektion--fest {
  background-color: transparent;
  background-image: linear-gradient(to bottom,
    var(--buehne-2) 0,
    var(--buehne-2) calc(100% - var(--naht-lauf)),
    transparent 100%);
}

/* Vor einem Bildband endet das Band hinter dem Foto, ohne Auslauf. */
.sektion.sektion--fest:has(+ .bildband) {
  background-image: none;
  background-color: var(--buehne-2);
}

/* Auf diesen Nähten gibt es nichts mehr zu kaschieren. */
.sektion--fest.hat-licht::before,
.sektion--fest + .hat-licht::before,
.bildband + .hat-licht::before,
.sektion-wechsel.hat-licht::before { content: none; }
.sektion--fest + .sektion--linie,
.sektion-referenzen { border-top: 0; }

/* --- Objekt über der Kante --- */

/* Manifest → Kompetenzfelder: das Bild hängt über. Der Überhang bleibt
   kleiner als das Fußpolster, sonst schneidet `overflow: hidden` ab. */
.sektion-manifest { --ueberhang: clamp(40px, 7vw, 96px); }

/* Die weite Wäsche des Kompetenz-Scheins hebt die ganze Fläche um zwei
   Stufen — an der Kante wäre das wieder eine Linie. Also setzt das
   Licht erst unterhalb der Kante ein und liegt hinter der rechts
   gesetzten Überschrift. Der Schein ragt um 18 % über den Abschnitt
   hinaus (inset), die Kante liegt bei 18/136 ≈ 13,2 % seiner Höhe. */
#kompetenzfelder .sektion-licht {
  --lx: 72%; --ly: 27%; --lx2: 14%; --ly2: 72%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 13.2%, #000 calc(13.2% + 280px));
  mask-image: linear-gradient(to bottom, transparent 13.2%, #000 calc(13.2% + 280px));
}

/* → Kompass: die Formularkarte hängt nach oben über die Naht (davor
   liegen die Stimmen, solange sie ausgeblendet sind der Anspruch). Nur
   nebeneinander; untereinander läge sie über dem Text. Die Leitlinie
   wechselt über ihr die Seite (data-leit-ueberhang, livera.js). */
@media (min-width: 900px) {
  #kompass { --ueberhang-oben: clamp(48px, 6vw, 88px); }
  #kompass .einstieg-form {
    align-self: start;
    position: relative;
    z-index: 2;
    margin-top: calc(-1 * (var(--sektion) + var(--ueberhang-oben)));
  }
}

/* Feldseiten: das Kopfbild hängt in das Band (Naht-Plan §5). Wie das
   Fassadenbild im Manifest: am Rasterende ausgerichtet, um den Überhang
   darüber hinaus — die Band-Bühne zieht dahinter auf. Untereinander
   bleibt der Überhang klein. */
.sektion-feld-kopf { --ueberhang: clamp(40px, 7vw, 96px); }
.sektion-feld-kopf .feld-bild {
  align-self: end;
  margin-bottom: calc(-1 * var(--ueberhang));
}

/* --- Blattstapel --- */

/* Der Hero haftet; der Stapel liegt als deckendes Blatt darüber. Die
   Bühne des Stapels ist die flache Bühnenfarbe — im hellen Thema
   fehlt hier der (ohnehin kaum sichtbare) Verlauf von body::before,
   weil ein fester Verlauf im Stapel auch den Hero überdecken würde. */
@media (min-width: 900px) {
  .held { position: sticky; top: 0; z-index: 0; }
}
.buehne-stapel {
  position: relative;
  z-index: 1;
  background: var(--buehne);
}

/* Unterseiten ohne Blattstapel tragen die Leitlinie in einer schlichten
   Hülle: nur ein Bezugsrahmen für den SVG-Pfad, keine eigene Bühne. */
.leit-stapel { position: relative; }

/* --- Leitlinie --- */
.leitlinie {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}
/* 2 px statt 1 px (Meeting 21.09.2026: „Pagefaden etwas dicker“),
   seit 27.09.2026 noch einmal dicker: 3 px. Ungerade Breite auf der
   halben Pixelkoordinate aus livera.js bleibt scharf. */
.leitlinie path {
  fill: none;
  stroke: var(--linie-akzent);
  stroke-width: 3;
}
/* Der Endpunkt ist die eine Ausnahme von „kein Gold an Nähten": er
   steht vor dem goldenen Knopf und gehört zu ihm. */
.leitlinie circle {
  fill: var(--akzent);
  opacity: 0;
  transition: opacity 0.9s var(--kurve-sanft);
}
.leitlinie.ist-fertig circle { opacity: 1; }
@media (max-width: 1099px) { .leitlinie { display: none; } }

/* --- Kapitelziffer --- */
.naht-nr {
  position: absolute;
  z-index: 0;
  right: var(--rand);
  pointer-events: none;
  user-select: none;
  font-size: clamp(7rem, 20vw, 17rem);
  font-weight: 300;
  line-height: 0.8;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1px var(--linie-akzent);
  opacity: 0.5;
}
.naht-nr--oben  { bottom: 0; transform: translateY(50%); }
.naht-nr--unten { top: 0;    transform: translateY(-50%); }
.naht-nr--mitte { right: auto; left: 50%; }
.naht-nr--oben.naht-nr--mitte  { transform: translate(-50%, 50%); }
.naht-nr--unten.naht-nr--mitte { transform: translate(-50%, -50%); }
@media (max-width: 1099px) { .naht-nr { display: none; } }

/* --- Lichtsaum: der mittig gesetzte Anspruch --- */
.sektion-anspruch::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(56%, 640px);
  height: 1px;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, var(--linie-akzent) 50%, transparent 100%);
}

/* --- Bildband --- */
.bildband {
  position: relative;
  height: 40vh;
  min-height: 260px;
  max-height: 520px;
  overflow: hidden;
  background: var(--buehne-2);
}
.bildband-schnitt {
  position: absolute;
  inset: -8% 0;
  display: block;
  transform: translate3d(0, var(--parallax-px, 0px), 0);
  will-change: transform;
}
.bildband-bild {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
}
/* Ein Schleier für die Zeile; oben etwas dichter, damit die Naht zum
   Band nicht hart aufsitzt. */
.bildband::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(6, 7, 6, 0.55) 0%, rgba(6, 7, 6, 0.16) 45%, rgba(6, 7, 6, 0.30) 100%);
}
/* Hell trägt das Band das Tageslichtfoto (Wohnhaus, 30.09.2026 mit dem
   Held getauscht) — die weiße Zeile braucht dort einen dichteren
   Schleier als auf der Dämmerungsaufnahme, sonst verläuft sie im Himmel. */
:root[data-thema="hell"] .bildband::before {
  background: linear-gradient(to top,
    rgba(14, 16, 12, 0.78) 0%,
    rgba(14, 16, 12, 0.55) 38%,
    rgba(14, 16, 12, 0.22) 72%,
    rgba(14, 16, 12, 0.30) 100%);
}
.bildband-zeile {
  position: absolute;
  inset: auto 0 clamp(1.6rem, 5vh, 3.2rem) 0;
  z-index: 2;
  margin: 0;
  padding-inline: var(--rand);
  text-align: center;
  /* Versalien in gesperrter Jost statt Cormorant-Kursiv (Meeting
     21.09.2026: „alles groß") — die Struktur-Schrift der Seite. Der
     Wortlaut in inhalt.DREIKLANG bleibt; groß wird er nur hier. */
  font-family: var(--schrift-sans);
  font-weight: 400;
  font-size: clamp(1.05rem, 2.1vw, 1.75rem);
  letter-spacing: var(--sperr-weit);
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--p-sand-licht);
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.45);
}
.bildband-punkt { display: inline-block; margin-inline: 0.4em; opacity: 0.6; }
@media (max-width: 899px) {
  .bildband { height: 28vh; min-height: 200px; }
}
/* Schmal: die Zeile bleibt eine Zeile (gemessen: 21,6 em breit) —
   die Schrift folgt der Bildschirmbreite, statt umzubrechen. */
@media (max-width: 479px) {
  .bildband-zeile { font-size: min(1.05rem, 4vw); letter-spacing: 0.2em; }
  .bildband-punkt { margin-inline: 0.25em; }
}
@media (prefers-reduced-motion: reduce) {
  .bildband-schnitt { transform: none; }
}

/* --- Raster: das Bild trägt hier mehr als auf der Manifestseite --- */
@media (min-width: 900px) {
  .sektion-manifest .manifest-raster {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    gap: clamp(3rem, 6vw, 6.5rem);
    align-items: center;
  }
}

/* --- Stufe 1: die These --- */
.manifest-these {
  font-size: clamp(1.5rem, 2.9vw, 2.4rem);
  /* „Herausforderungen" ist 17 Zeichen lang — bei knapperem Maß bricht
     das Wort mitten durch, statt sich eine neue Zeile zu nehmen. */
  max-width: 26ch;
  margin-bottom: var(--raum-4);
}

/* --- Stufe 2: die Beobachtungen --- */
.manifest-zeilen {
  position: relative;
  list-style: none;
  margin: 0 0 var(--raum-4);
  padding-left: var(--raum-3);
  display: grid;
  gap: 0.55em;
}

/* Die Linie wächst mit den Zeilen mit — dieselbe Geste wie die
   Scroll-Linie im Held, nur einmal statt in Schleife. */
.manifest-zeilen::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  bottom: 0.4em;
  width: 1px;
  background: linear-gradient(to bottom,
    var(--akzent) 0%, var(--linie-akzent) 55%, transparent 100%);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.5s var(--kurve) 0.15s;
}

.manifest-zeile {
  font-size: clamp(1rem, 1.45vw, 1.14rem);
  font-weight: 300;
  line-height: 1.5;
  color: var(--text-2);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.9s var(--kurve-sanft), transform 0.9s var(--kurve);
  transition-delay: calc(var(--i, 0) * 130ms + 260ms);
}

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

/* --- Stufe 3: die Pointe --- */
.manifest-pointe {
  margin: 0;
  font-family: var(--schrift-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.9vw, 1.5rem);
  line-height: 1.45;
  color: var(--text);
  max-width: 46ch;
}

/* Jede Zeile steht für sich — mit hängendem Einzug, damit ein Umbruch
   auf schmalen Geräten als Fortsetzung lesbar bleibt, und mit eigenem
   Einsatz, damit der Gedanke sich aufbaut statt aufzuklappen. */
.manifest-pointe span {
  display: block;
  padding-left: 1.1em;
  text-indent: -1.1em;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.9s var(--kurve-sanft), transform 0.9s var(--kurve);
  transition-delay: calc(var(--i, 0) * 150ms + 1s);
}

/* Im kursiven Serif hebt sich Aufrechtes ab, nicht Kursives. */
.manifest-pointe em {
  font-style: normal;
  color: var(--akzent);
}

.manifest-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 1s var(--kurve) 0.85s;
}

.manifest-fuss {
  margin-top: var(--raum-4);
  opacity: 0;
  transition: opacity 0.9s var(--kurve-sanft) 1.25s;
}

/* --- Die Einsätze, sobald die Textspalte im Bild steht --- */
.manifest-text.ist-da .manifest-zeilen::before  { transform: scaleY(1); }
.manifest-text.ist-da .manifest-zeile           { opacity: 1; transform: none; }
.manifest-text.ist-da .manifest-pointe span     { opacity: 1; transform: none; }
.manifest-text.ist-da .manifest-pointe::before  { transform: scaleX(1); }
.manifest-text.ist-da .manifest-fuss            { opacity: 1; }

/* --- Das Bild: heller, größer, im offenen Rahmen --- */
.sektion-manifest .manifest-bild {
  --versatz: clamp(12px, 1.5vw, 24px);
  position: relative;
  overflow: visible;
  /* Ans Rasterende, dann um den Überhang darüber hinaus — in die
     Band-Bühne hinein, die ::after unter dem Raster aufzieht. */
  align-self: end;
  margin-bottom: calc(-1 * var(--ueberhang));
}

/* Der offene Rahmen aus dem Logo, versetzt hinter das Bild gelegt.
   Er fährt erst auf, wenn das Bild steht. */
.manifest-rahmen {
  position: absolute;
  inset: var(--versatz) calc(var(--versatz) * -1) calc(var(--versatz) * -1) var(--versatz);
  border: 1px solid var(--linie-akzent);
  border-top: 0;
  border-left: 0;
  opacity: 0;
  transform: translate(calc(var(--versatz) * -0.6), calc(var(--versatz) * -0.6));
  transition: opacity 1s var(--kurve-sanft) 0.75s, transform 1.2s var(--kurve) 0.75s;
}

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

/* Der Schnitt trägt den Aufzug — das Bild darin läuft frei weiter. */
.manifest-schnitt {
  display: block;
  position: relative;
  overflow: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.45s var(--kurve) 0.1s;
}

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

/* Ein einzelner Lichtstreifen, der beim Aufziehen über die Fassade
   läuft. Genau einmal — nicht in Schleife. */
.manifest-schnitt::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(104deg,
    transparent 40%, rgba(233, 240, 231, 0.16) 50%, transparent 60%);
  transform: translateX(-130%);
}

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

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

/* Hier führt das Bild, also darf es leuchten: kaum entfärbt, keine
   Deckelung — nur der Fuß bleibt abgedunkelt, damit der Rahmen
   nicht abschneidet. */
/* Achtung Spezifitaet: diese Regel (0,2,1) schlaegt `.bild--motiv`
   (0,1,0). Sie trug frueher `brightness(1.14) saturate(1.04)` und
   hat das Motiv damit nicht nur an der gemeinsamen Behandlung
   vorbeigefuehrt, sondern in die Gegenrichtung gedreht — es war das
   hellste und farbigste Bild der Seite und las sich am ehesten als
   Architekturrendering. Der Filter steht deshalb hier nicht mehr;
   ohne konkurrierende Deklaration greift `.bild--motiv`.

   Format und Ausschnitt muessen dagegen hier stehen bleiben, weil
   sie aus demselben Grund sonst nicht ankommen. */
.sektion-manifest .manifest-bild img {
  aspect-ratio: 1 / 1;
  object-position: 50% 62%;
  opacity: 1;
  animation: manifest-drift 30s ease-in-out infinite;
}

@keyframes manifest-drift {
  0%, 100% { transform: scale(1.04) translate3d(0, 0, 0); }
  50%      { transform: scale(1.1)  translate3d(-1.2%, -1.4%, 0); }
}

.sektion-manifest .manifest-bild::after {
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(to top, rgba(6, 7, 6, 0.62) 0%, transparent 100%);
  opacity: 0.85;
  z-index: 1;
}

:root[data-thema="hell"] .sektion-manifest .manifest-bild::after {
  background: linear-gradient(to top, rgba(20, 21, 16, 0.30) 0%, transparent 100%);
  opacity: 0.7;
}

/* Auch hier kein eigener Filter mehr — die Hell-Variante von
   `.bild--motiv` uebernimmt. */

/* Ohne JS bekommt nichts ein „ist-da" — dann steht alles sofort. */
.kein-js .manifest-zeile,
.kein-js .manifest-pointe span,
.kein-js .manifest-fuss,
.kein-js .manifest-rahmen { opacity: 1; transform: none; }
.kein-js .manifest-zeilen::before,
.kein-js .manifest-pointe::before { transform: none; }
.kein-js .manifest-schnitt { clip-path: none; }

@media (prefers-reduced-motion: reduce) {
  .manifest-schnitt { clip-path: none; }
  .sektion-manifest .manifest-bild img { animation: none; transform: scale(1.02); }
}

@media (max-width: 899px) {
  /* Untereinander trägt das Bild nicht mehr die halbe Bühne — es wird
     zum Querformat und rückt näher an den Text. */
  /* Das Motiv ist hochformatig (1200 x 1712). Frueher hielt der
     Ausschnitt hier die Dachkante bewusst im Bild — sie war das
     Erkennungszeichen des Hauses. Sie ist zugleich die Kante, an
     der die Aufnahme auffliegt, also bleibt sie draussen. Das
     Format ist ohnehin schon das der grossen Ansicht; es bleibt
     nur noch stehen, damit die Regel selbsterklaerend ist. */
  .sektion-manifest .manifest-bild img {
    aspect-ratio: 1 / 1;
    object-position: 50% 62%;
  }

  /* Die Spalte ist hier ohnehin die Grenze. Ein zusätzliches Maß würde
     das lange Wort nur wieder aufbrechen. */
  .manifest-these { max-width: none; }

  /* Der versetzte Rahmen bräuchte Luft nach rechts, die es neben dem
     Seitenrand nicht gibt. */
  .manifest-rahmen { display: none; }
}

.signatur-block {
  margin-top: var(--raum-5);
  padding-top: var(--raum-4);
  border-top: 1px solid var(--linie-fein);
}

.signatur-marke {
  font-size: var(--t-h2);
  font-weight: 300;
  letter-spacing: var(--sperr-eng);
  text-transform: uppercase;
  margin-bottom: var(--raum-2);
}

.pointe {
  margin-top: var(--raum-4);
  padding-top: var(--raum-3);
  border-top: 1px solid var(--linie-akzent);
  font-family: var(--schrift-serif);
  font-style: italic;
  font-size: var(--t-lead);
  color: var(--akzent);
  max-width: var(--breite-text);
}

/* ============================================================
   4 · ARBEITSWEISE

   Zwei gleich aussehende Textkarten nebeneinander sagen nicht, was
   der Abschnitt sagen will. Es ist eine Rechnung: links, was Zeit
   schafft — rechts, wofür sie da ist. Der Pfeil dazwischen ist die
   Aussage, nicht die Dekoration. Deshalb steht links das Kleingedruckte
   und rechts, in Salbei und größer, das Ergebnis.
   ============================================================ */

.arbeit-rechnung {
  display: grid;
  gap: var(--raum-4);
  align-items: stretch;
}

@media (min-width: 900px) {
  .arbeit-rechnung {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 3rem);
  }
  /* Die Karten stehen gleich hoch — nur der Pfeil sitzt mittig. Sonst
     schwimmt die kuerzere Karte im Kasten und die Rechnung geht
     optisch nicht auf. */
  .arbeit-pfeil { align-self: center; }
}

.arbeit-karte {
  position: relative;
  padding: clamp(var(--raum-3), 3.5vw, var(--raum-5));
  border: 1px solid var(--linie-fein);
  background-color: var(--flaeche);
  background-image: var(--flaeche-licht);
  box-shadow: var(--kantenlicht);
  min-width: 0;
  box-sizing: border-box;
}

/* Die rechte Karte ist das Ergebnis und trägt deshalb den Markenton
   als Fläche — sehr flach, aber genug, um die beiden auseinander-
   zuhalten, ohne dass eine zweite Farbe ins Spiel kommt. */
.arbeit-karte--ziel {
  border-color: var(--linie-akzent);
  background-image: linear-gradient(158deg,
    var(--akzent-a12) 0%, var(--akzent-a08) 34%, transparent 72%);
}

.arbeit-marke {
  font-size: var(--t-label);
  letter-spacing: var(--sperr-mittel);
  text-transform: uppercase;
  color: var(--akzent);
  margin: 0 0 var(--raum-3);
  padding-bottom: var(--raum-2);
  border-bottom: 1px solid var(--linie-fein);
}

.arbeit-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55em;
}

/* Beide Karten sprechen mit derselben Stimme (Meeting 21.09.2026:
   „links und rechts gleich groß") — vorher war rechts größer. */
.arbeit-liste li {
  font-weight: 300;
  font-size: clamp(1.1rem, 1.7vw, 1.32rem);
  line-height: 1.45;
  color: var(--text);
  opacity: 0;
  transform: translateY(9px);
  transition: opacity 0.8s var(--kurve-sanft), transform 0.8s var(--kurve);
  transition-delay: calc(var(--i, 0) * 110ms + 200ms);
}

.arbeit-summe {
  margin: var(--raum-3) 0 0;
  padding-top: var(--raum-3);
  border-top: 1px solid var(--linie-akzent);
  font-size: 1.02rem;
  letter-spacing: var(--sperr-eng);
  text-transform: uppercase;
  color: var(--akzent);
  opacity: 0;
  transform: translateY(9px);
  transition: opacity 0.8s var(--kurve-sanft) 0.7s,
              transform 0.8s var(--kurve) 0.7s;
}

.arbeit-karte.ist-da .arbeit-liste li,
.arbeit-karte.ist-da .arbeit-summe { opacity: 1; transform: none; }

.kein-js .arbeit-liste li,
.kein-js .arbeit-summe { opacity: 1; transform: none; }

/* --- Der Pfeil: das Gleichheitszeichen der Rechnung --- */
.arbeit-pfeil {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  color: var(--akzent);
}

.arbeit-pfeil .icon { width: 26px; height: 26px; flex-shrink: 0; }

.arbeit-pfeil-linie {
  display: block;
  width: 44px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--akzent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--kurve) 0.35s;
}

.arbeit-pfeil.ist-da .arbeit-pfeil-linie { transform: scaleX(1); }
.kein-js .arbeit-pfeil-linie { transform: none; }

/* Untereinander zeigt der Pfeil nach unten — sonst zeigt er ins Leere. */
@media (max-width: 899px) {
  .arbeit-pfeil {
    flex-direction: column;
    justify-self: center;
  }
  .arbeit-pfeil .icon { transform: rotate(90deg); }
  .arbeit-pfeil-linie {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, transparent, var(--akzent));
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.9s var(--kurve) 0.35s;
  }
  .arbeit-pfeil.ist-da .arbeit-pfeil-linie { transform: scaleY(1); }
}

/* --- Der Schluss: die Pointe, nicht noch ein Absatz --- */
.arbeit-schluss {
  margin-top: var(--raum-5);
  text-align: center;
}

.arbeit-schluss .trenner { margin-bottom: var(--raum-4); }

.arbeit-pointe {
  margin: 0 auto;
  max-width: 46ch;
  font-family: var(--schrift-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  line-height: 1.45;
  color: var(--text);
  text-wrap: pretty;
}

/* ============================================================
   5 · KOMPETENZFELDER
   ============================================================ */

.felder-raster { align-items: stretch; }

/* Detailseite — SEIT 13.09.2026 NICHT MEHR EINGEBUNDEN (.feld-kopf,
   .feld-bild, .leistungen, .verwandt-*): die Feldseiten sind jetzt
   Kapitel, siehe Block FELDSEITE unten. Regeln bleiben für den Fall
   eines Rückbaus liegen. */
.feld-kopf {
  display: grid;
  gap: var(--raum-5);
  align-items: center;
}

@media (min-width: 900px) {
  .feld-kopf { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: var(--raum-6); }
}

/* Der Kopfabschnitt muss die feste Kopfleiste freihalten. Ohne das
   stand die Brotkrume vierzehn Pixel unter der Navigation — die
   uebrigen Unterseiten holen sich denselben Abstand ueber
   `.sektion-titel`, hier fehlte er schlicht. */
.sektion-feld-kopf { padding-top: calc(var(--kopf-hoehe) + var(--sektion)); }

.feld-icon { color: var(--akzent); margin-bottom: var(--raum-3); }

.feld-lead { margin-top: var(--raum-4); }

/* „Sondereigentumsmanagement" ist 26 Zeichen lang — die Überschrift
   der Detailseite braucht deshalb eine eigene, kleinere Stufe. */
.feld-kopf .h1 { font-size: clamp(1.55rem, 3.8vw, 3.1rem); }

@media (max-width: 420px) {
  /* „Sondereigentumsmanagement" ist auch getrennt noch lang. */
  .feld-kopf .h1 { letter-spacing: 0.05em; }
}

.feld-claim {
  color: var(--akzent);
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  margin-top: var(--raum-3);
  max-width: 34ch;
}

/* Das Bild bekommt denselben offenen Rahmen wie das Manifestbild:
   versetzt dahintergelegt, nur rechte und untere Kante — die Geometrie
   des Logos. Vorher endete das Foto als harte Kachel im Nichts. */
.feld-bild {
  position: relative;
  --versatz: clamp(10px, 1.3vw, 20px);
}

.feld-rahmen {
  position: absolute;
  inset: var(--versatz) calc(var(--versatz) * -1) calc(var(--versatz) * -1) var(--versatz);
  border: 1px solid var(--linie-akzent);
  border-top: 0;
  border-left: 0;
  opacity: 0;
  transform: translate(calc(var(--versatz) * -0.6), calc(var(--versatz) * -0.6));
  transition: opacity 1s var(--kurve-sanft) 0.45s,
              transform 1.2s var(--kurve) 0.45s;
  pointer-events: none;
}

.feld-bild.ist-da .feld-rahmen { opacity: 1; transform: none; }
.kein-js .feld-rahmen { opacity: 1; transform: none; }

@media (max-width: 720px) {
  /* Auf schmalen Geraeten steht das Bild randnah — der Versatz haette
     dort keinen Platz und wuerde nur die Kante ueberschreiten. */
  .feld-rahmen { display: none; }
}

.feld-bild img {
  width: 100%;
  /* Vorher 4/3 — das ganze Gebaeude. 16/9 war der erste Versuch und
     zu zaghaft: es blieben noch drei Viertel der Bildhoehe stehen,
     also Traufe, Ecke und Bodenanschluss. Hier steht das Motiv
     groesser als in der Kachel, deshalb muss der Schnitt haerter
     sein, nicht weicher. 2:1 laesst zwei Drittel uebrig; --fokus
     (inhalt.FELDER) schiebt den Streifen nach unten, weg vom Dach. */
  aspect-ratio: 2 / 1;
  object-fit: cover;
  opacity: 0.92;
}
.feld-bild::after {
  content: "";
  position: absolute;
  inset: auto auto 0 0;
  width: 46%;
  height: 1px;
  background: var(--akzent);
}

.leistungs-raster { align-items: start; }

/* Links stand bisher eine Zeile neben neun — die Spalte war ein Loch.
   Jetzt traegt sie eine echte Ueberschrift, die Zahl als Bildmarke und
   wandert beim Scrollen mit der Liste mit. */
@media (min-width: 1000px) {
  .leistungs-kopf {
    position: sticky;
    top: calc(var(--kopf-hoehe) + var(--raum-4));
  }
}

.leistungs-kopf .h2 { margin-bottom: var(--raum-4); }

.leistungs-zahl {
  display: flex;
  align-items: baseline;
  gap: 0.7em;
  color: var(--text-3);
}

.leistungs-zahl .zahl {
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: var(--akzent);
  font-variant-numeric: tabular-nums;
}

.leistungs-zahl .zahl-wort { max-width: 20ch; }

.leistungen { display: grid; gap: 0; }

/* Die Zeilen setzen nacheinander ein, nicht als Block — dieselbe Regel
   wie bei den Manifestzeilen. */
.leistungen li {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.7s var(--kurve-sanft), transform 0.7s var(--kurve);
  transition-delay: calc(var(--i, 0) * 55ms);
}

.leistungen.ist-da li { opacity: 1; transform: none; }
.kein-js .leistungen li { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .leistungen li, .feld-rahmen { opacity: 1; transform: none; transition: none; }
}

.leistungen li {
  display: flex;
  align-items: flex-start;
  gap: var(--raum-3);
  padding: var(--raum-3) 0;
  border-bottom: 1px solid var(--linie-fein);
  color: var(--text-2);
}
.leistungen li:first-child { border-top: 1px solid var(--linie-fein); }
.leistungen .icon { color: var(--akzent); margin-top: 0.35em; }

.verwandt-karte {
  display: flex;
  flex-direction: column;
  gap: var(--raum-2);
  padding: var(--raum-4);
  border: 1px solid var(--linie-fein);
  background-color: var(--flaeche);
  background-image: var(--flaeche-licht);
  box-shadow: var(--kantenlicht);
  color: var(--text-2);
  /* Wie bei `.kachel`: die Kurzschreibweise ersetzt die aus `.blende`,
     also muss die Einblendung hier mitgefuehrt werden. */
  transition: border-color var(--dauer) var(--kurve-sanft),
              background-color var(--dauer) var(--kurve-sanft),
              box-shadow var(--dauer) var(--kurve-sanft),
              translate var(--dauer) var(--kurve),
              opacity var(--dauer-blende) var(--kurve-sanft),
              transform var(--dauer-lang) var(--kurve);
}
.verwandt-karte:hover,
.verwandt-karte:focus-visible {
  border-color: var(--linie);
  background-color: var(--flaeche-hover);
  translate: 0 -3px;
}
.verwandt-karte .icon { color: var(--akzent); }

.verwandt-titel {
  font-size: var(--t-h3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
}

.verwandt-claim {
  font-family: var(--schrift-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--akzent);
}

/* Die Karte endete nach dem Claim ins Leere. Der Hinweis unten fuellt
   den Fuss und sagt endlich, dass die Karte ein Weg ist. */
.verwandt-fuss {
  margin-top: auto;
  padding-top: var(--raum-4);
}

/* ============================================================
   6 · GRÜNDERIN
   ============================================================ */

.gruenderin-raster { align-items: start; }

/* Startseite (Meeting 29.09.2026): das Foto ist so hoch wie der Text
   daneben, nicht 215 px höher (514 × 643 gegen 428 px bei 1440 px
   Breite). Die Zeile ist so hoch wie der Text; das Bild liegt absolut
   darin und bestimmt die Höhe nicht — sonst bliebe die Spalte so hoch
   wie das 4:5-Foto. Der Ausschnitt zeigt Kopf, Schultern und den
   Ansatz der verschränkten Arme; die Datei selbst bleibt 4:5 und
   1400 px breit, damit es auch auf hochauflösenden Schirmen scharf
   ist. Einspaltig (unter 1000 px) bleibt es beim Hochformat. */
@media (min-width: 1000px) {
  .gruenderin-raster--bund { align-items: stretch; }
  .gruenderin-raster--bund .portraet { min-height: 21rem; }
  .gruenderin-raster--bund .portraet img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
    object-position: 50% 6%;
  }
}
.gruenderin-profil { max-width: 62ch; }
.gruenderin-profil-auftakt {
  margin-bottom: var(--raum-4);
  padding-left: var(--raum-3);
  border-left: 2px solid var(--akzent);
  color: var(--text);
}
.gruenderin-profil-text { display: grid; gap: var(--raum-3); }
.gruenderin-profil-text .fliess { margin: 0; line-height: 1.75; }

.portraet { position: relative; }

/* Seit 12.09.2026 steht wieder das unbeschnittene Studio-Foto der
   Kundin — nach Mobbin-Referenzen (Upwork „Our Impact", Epidemic Sound,
   Slash) als enger Dreiviertel-Ausschnitt 4:5, in dem die Figur den
   Rahmen füllt: kein toter schwarzer Raum, mittig zum Text. Die Datei
   ist bereits beschnitten (860 × 1075 aus dem Original), das CSS muss
   nichts zoomen. Ein Salbei-Licht hinter der Figur (screen) hebt das
   Studio-Schwarz zu einem dunklen Grund mit Tiefe, eine Haarlinie
   fasst die Karte, die offene Rahmenecke bleibt. Der Lichtschein und
   der Auslauf der Freistellungs-Phase (20.08.–12.09.) sind weg. */
.portraet img {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--kante-fein);
}
/* Zwei Fassungen eines Fotos (Erstgespräch, 30.09.2026: dunkler Grund im
   dunklen, heller Grund im hellen Modus). `.portraet img { display: block }`
   überstimmt die Wegblende `.nur-hell` von oben — im dunklen Modus
   standen deshalb beide Fotos untereinander. */
.portraet img.nur-hell { display: none; }
:root[data-thema="hell"] .portraet img.nur-hell { display: block; }

/* Nur noch die Haarlinie. Der Salbei-Lichtschein über dem Kopf
   (radialer Verlauf, mix-blend-mode: screen) ist seit dem Meeting
   21.09.2026 weg — die Kundin las ihn als weißen Lichtpunkt. */
.portraet::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--kante-fein);
  pointer-events: none;
  z-index: 1;
  box-shadow: inset 0 0 0 1px var(--linie-akzent);
}


.portraet figcaption {
  margin-top: var(--raum-2);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Der offene Rahmen aus dem Logo, um das Portrait gelegt. */
.portraet::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--raum-3));
  left: calc(-1 * var(--raum-3));
  width: 42%;
  height: 42%;
  border-top: 1px solid var(--linie-akzent);
  border-left: 1px solid var(--linie-akzent);
  pointer-events: none;
}

.zitat {
  margin-top: var(--raum-4);
  padding-left: var(--raum-4);
  border-left: 1px solid var(--linie-akzent);
}

.zitat p {
  font-family: var(--schrift-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.6;
  color: var(--text);
}

.zitat footer { margin-top: var(--raum-3); }

.zitat--gross {
  border-left: 0;
  padding-left: 0;
  text-align: center;
}
.zitat--gross p { font-size: clamp(1.3rem, 3vw, 2rem); }
.zitat--gross footer { margin-top: var(--raum-4); }

/* ============================================================
   7 · ANSPRUCH / ABBINDER
   ============================================================ */

/* --- Der Anspruch als kleine Choreografie -------------------------
   Der einzige Abschnitt der Startseite, der mehr tut als einzublenden.
   Fünf Takte, ausgelöst vom Scroll-Wächter (`data-choreo` → `.ist-da`),
   und zu keiner Zeit läuft mehr als eine Sache:

     0,00 s  Eyebrow blendet auf, die Sperrung fällt auf ihr Maß
     0,25 s  Licht läuft einmal quer durch die Schlagzeile — sichtbar
             über der Schrift ist der warme Kern etwa 0,5 bis 1,9 s
     1,35 s  die Goldlinie wächst aus der Mitte
     1,60 s  der Satz hellt Wort für Wort auf, in Leserichtung
     2,25 s  Lead und Textlink blenden nach

   Das Licht in der Schlagzeile ist ein Verlauf hinter der Schrift
   (`background-clip: text`), der verschoben wird — nicht die Schrift
   selbst. Deshalb kostet der ganze Takt eine Kompositor-Eigenschaft
   und nichts bewegt sich wirklich. Genau so ist der Sheen des goldenen
   Buttons gebaut, und aus derselben Regel kommt auch die Dosierung:
   der warme Kern des Lichtstreifens ist das einzige Gold im Abschnitt.
   Als einzige Bewegung der Seite läuft er nicht auf `--kurve`: Licht,
   das durchzieht, darf nicht nach einem Achtel des Weges stehen —
   `--kurve-sanft` trägt es gleichmäßig hindurch.
   ------------------------------------------------------------------ */

/* Der Schein greift über die Hülle hinaus — hier wird er beschnitten,
   sonst wächst das Dokument in der Breite. */
.sektion-anspruch { overflow: clip; }

.anspruch-akt {
  position: relative;
  text-align: center;
}

/* Bühnenlicht hinter dem Block. Es zieht den Blick in die Mitte, ohne
   dass man eine Fläche sieht: unter 10 % Deckkraft, und der Atem
   braucht 28 s für einen Zug. Atmosphäre, kein Effekt. */
.anspruch-schein {
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: -1;
  width: min(124vw, 1180px);
  aspect-ratio: 1.7;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at center,
    var(--akzent-a08) 0%,
    rgba(228, 188, 116, 0.05) 38%,
    transparent 68%);
  transition: opacity 2.4s var(--kurve-sanft);
}

.ist-da .anspruch-schein,
.kein-js .anspruch-schein { opacity: 1; }

.ist-da .anspruch-schein { animation: anspruch-atem 28s ease-in-out 2.4s infinite; }

@keyframes anspruch-atem {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.14); }
}

/* Takt 1 — die Versalien rücken aus der Weite auf ihr Maß zusammen. */
.anspruch-eyebrow {
  opacity: 0;
  letter-spacing: calc(var(--sperr-weit) + 0.2em);
  transition: opacity 1.2s var(--kurve-sanft),
              letter-spacing 1.6s var(--kurve);
}

.ist-da .anspruch-eyebrow,
.kein-js .anspruch-eyebrow { opacity: 1; letter-spacing: var(--sperr-weit); }

/* Takt 2 — der Lichtstreifen. Die Schlagzeile steht zunächst nur als
   Andeutung da; das Licht läuft von links durch sie hindurch und lässt
   sie hinter sich stehen. */
.anspruch-titel {
  --anspruch-fahl:  rgba(255, 255, 255, 0.10);
  --anspruch-kante: #FFFFFF;
  --anspruch-glanz: #FFF0D6;
  margin-inline: auto;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .anspruch-titel {
    color: transparent;
    background-image: linear-gradient(96deg,
      var(--text)           0%,
      var(--text)          38%,
      var(--anspruch-kante) 43%,
      var(--anspruch-glanz) 48%,
      var(--anspruch-kante) 52%,
      var(--anspruch-fahl) 60%,
      var(--anspruch-fahl) 100%);
    background-size: 300% 100%;
    background-position: 100% 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    transition: background-position 1.9s var(--kurve-sanft) 0.25s;
  }

  .ist-da .anspruch-titel,
  .kein-js .anspruch-titel { background-position: 0 0; }

  /* Im Kontrastmodus des Systems ist jeder Verlauf hinfällig. */
  @media (forced-colors: active) {
    .anspruch-titel { color: CanvasText; background-image: none; }
  }
}

/* Auf Sand kehrt sich das Licht um: der Kern wird tiefes Gold, das
   Fahle bleibt Tinte mit wenig Deckkraft. */
:root[data-thema="hell"] .anspruch-titel {
  --anspruch-fahl:  rgba(20, 21, 16, 0.13);
  --anspruch-kante: var(--p-tinte);
  --anspruch-glanz: var(--p-gold-tief);
}

/* Takt 3 — die Linie wächst aus der Mitte. */
.anspruch-linie {
  width: 0;
  margin-block: var(--raum-4);
  transition: width 0.9s var(--kurve) 1.35s;
}

.ist-da .anspruch-linie,
.kein-js .anspruch-linie { width: 64px; }

/* Takt 4 — der Satz hellt Wort für Wort auf. Das Licht aus Takt 2
   läuft gewissermaßen weiter, nur langsamer. */
.anspruch-pointe .wort {
  opacity: 0.14;
  transition: opacity 1s var(--kurve-sanft);
}

.ist-da .anspruch-pointe .wort { transition-delay: calc(1.6s + var(--i) * 50ms); }

.ist-da .anspruch-pointe .wort,
.kein-js .anspruch-pointe .wort { opacity: 1; }

/* Takt 5 — der Rest blendet nach, wie überall sonst auf der Seite. */
.anspruch-lead {
  margin-inline: auto;
  opacity: 0;
  transition: opacity 1.4s var(--kurve-sanft) 2.25s;
}

.anspruch-fuss {
  margin-top: var(--raum-4);
  opacity: 0;
  transition: opacity 1.4s var(--kurve-sanft) 2.45s;
}

.ist-da .anspruch-lead,
.ist-da .anspruch-fuss,
.kein-js .anspruch-lead,
.kein-js .anspruch-fuss { opacity: 1; }

/* Wer Bewegung abgestellt hat, bekommt den Endzustand sofort. Die
   globale Regel in basis.css kürzt nur die Dauern — ohne die Verzögerungen
   hier würden die Takte trotzdem nacheinander aufpoppen. */
@media (prefers-reduced-motion: reduce) {
  .anspruch-schein,
  .anspruch-eyebrow,
  .anspruch-titel,
  .anspruch-linie,
  .anspruch-lead,
  .anspruch-fuss,
  .anspruch-pointe .wort { transition-delay: 0s !important; }

  .ist-da .anspruch-schein { animation: none; }
}

.abbinder {
  display: grid;
  gap: var(--raum-4);
  align-items: center;
}

@media (min-width: 900px) {
  .abbinder { grid-template-columns: minmax(0, 1.2fr) auto; gap: var(--raum-6); }
}

/* --- Schluss auf der Mittelachse (Startseite, Naht 9, 27.09.2026) ---
   Nach Mobbin (Coda, Notion): Überschrift, Satz und Knöpfe mittig,
   feine Linien links und rechts der Überschrift. Die Leitlinie knickt
   auf der Naht zur Achse, spart den Text aus (data-leit-luecke) und
   endet mit dem Punkt über den Knöpfen.
   Der Salbei-Schimmer fällt hier weg: er setzte an der Naht hart ein,
   genau wo das Kompass-Band ausläuft — das war die Kante. Statt dessen
   ein Lichtkegel hinter dem Text, der zur Naht hin auf null geht. */
.sektion-schluss {
  background-image: radial-gradient(ellipse 46% 60% at 50% 60%, var(--licht-weit), transparent 72%);
}

.abbinder--mitte {
  justify-items: center;
  text-align: center;
}
.abbinder--mitte .abbinder-text { width: 100%; }
.abbinder--mitte .lead { margin: var(--raum-3) auto 0; }
.abbinder--mitte .btn-reihe { justify-content: center; }

@media (min-width: 900px) {
  .abbinder.abbinder--mitte { grid-template-columns: minmax(0, 1fr); gap: var(--raum-5); }
}
/* Mit Leitlinie braucht der Faden zwischen Text und Knöpfen Platz für
   ein Stück Linie und den Punkt. */
@media (min-width: 1100px) {
  .abbinder.abbinder--mitte { gap: calc(var(--raum-6) + var(--raum-3)); }
}

.schluss-titel {
  display: grid;
  grid-template-columns: minmax(var(--raum-4), 1fr) auto minmax(var(--raum-4), 1fr);
  align-items: center;
  column-gap: clamp(1rem, 3vw, 2.5rem);
}
.schluss-titel > span { max-width: 13em; }
/* Salbei wie der Faden statt der fast unsichtbaren Haarlinie
   (27.09.2026: „etwas sichtbarer“). */
.schluss-titel::before,
.schluss-titel::after {
  content: "";
  height: 1px;
  background: linear-gradient(to left, var(--linie-akzent), transparent);
}
.schluss-titel::after { background: linear-gradient(to right, var(--linie-akzent), transparent); }
@media (max-width: 719px) {
  .schluss-titel { display: block; }
  .schluss-titel::before,
  .schluss-titel::after { content: none; }
}

/* ============================================================
   8 · KOMPASS — Einladung & Weiche
   ============================================================ */

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

@media (min-width: 900px) {
  .kompass-einladung { grid-template-columns: minmax(0, 1fr) auto; gap: var(--raum-6); }
}

.kompass-dauer {
  display: flex;
  align-items: baseline;
  gap: var(--raum-3);
  padding: var(--raum-4);
  border: 1px solid var(--linie-akzent);
}

.kompass-dauer-zahl {
  font-size: clamp(3rem, 7vw, 5rem);
  font-weight: 300;
  line-height: 1;
  color: var(--akzent);
  font-variant-numeric: tabular-nums;
}

.einladung-text {
  max-width: var(--breite-text);
  margin-inline: auto;
  display: grid;
  gap: var(--raum-3);
}

.weiche-raster { align-items: stretch; }

.weiche-karte {
  display: flex;
  flex-direction: column;
  gap: var(--raum-3);
  padding: clamp(var(--raum-3), 4vw, var(--raum-5)) clamp(var(--raum-3), 3.5vw, var(--raum-4));
  border: 1px solid var(--linie-fein);
  background-color: var(--flaeche);
  background-image: var(--flaeche-licht);
  box-shadow: var(--kantenlicht);
  min-width: 0;
  box-sizing: border-box;
  transition: border-color var(--dauer) var(--kurve-sanft),
              background-color var(--dauer) var(--kurve-sanft);
}

.weiche-karte:hover { border-color: var(--linie); background-color: var(--flaeche-hover); }

:root[data-thema="hell"] .weiche-karte,
:root[data-thema="hell"] .arbeit-karte,
:root[data-thema="hell"] .termin-neben,
:root[data-thema="hell"] .einstieg-form {
  box-shadow: 0 1px 2px rgba(20, 21, 16, 0.04), 0 10px 28px rgba(20, 21, 16, 0.05);
}

.weiche-karte--stark { border-color: var(--linie-akzent); }

/* Der Rahmen bringt seinen eigenen Abstand mit — die Karte ist ein
   Flex-Stapel, sonst zöge er sich über die ganze Breite. */
.weiche-karte .kompass-marke-rahmen { align-self: flex-start; }

.weiche-marke {
  font-size: var(--t-label);
  letter-spacing: var(--sperr-mittel);
  text-transform: uppercase;
  color: var(--akzent);
}

.weiche-zahl {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  font-size: clamp(2.6rem, 6vw, 4rem);
  font-weight: 300;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.weiche-zahl span {
  font-size: var(--t-label);
  letter-spacing: var(--sperr-mittel);
  text-transform: uppercase;
  color: var(--text-3);
}

.weiche-liste { display: grid; gap: var(--raum-2); margin-top: var(--raum-2); }
.weiche-liste li {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  font-size: 0.95rem;
  color: var(--text-3);
}
.weiche-liste .icon { color: var(--akzent); }

.kompass-wechsel { text-align: center; margin-top: var(--raum-5); }

/* ============================================================
   9 · TERMIN & KONTAKT
   ============================================================ */

.kontakt-raster { align-items: start; }
#anfrage {
  scroll-margin-top: calc(var(--kopf-hoehe) + var(--raum-3));
  padding: clamp(1.5rem, 3vw, 2.75rem);
  border: 1px solid var(--linie-akzent);
  border-radius: var(--kante-tafel);
  background: var(--flaeche);
  box-shadow: var(--kantenlicht);
}
#anfrage .formular { max-width: none; }

.erstgespraech-raster {
  display: grid;
  gap: var(--raum-4);
  align-items: stretch;
}
@media (min-width: 760px) {
  .erstgespraech-raster { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}
.erstgespraech-raster .termin-neben {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: var(--kante-tafel);
  padding: clamp(1.5rem, 4vw, 3rem);
}
.erstgespraech-person {
  margin: 0;
  min-width: 0;
}
.erstgespraech-person img { max-height: 38rem; object-fit: cover; }
.erstgespraech-person figcaption { color: var(--text-3); }

.termin-neben {
  padding: var(--raum-4);
  border: 1px solid var(--linie-fein);
  background-color: var(--flaeche);
  background-image: var(--flaeche-licht);
  box-shadow: var(--kantenlicht);
}

.kontakt-liste { display: grid; gap: var(--raum-3); }
.kontakt-liste li {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  min-height: 44px;
  color: var(--text-2);
}
.kontakt-liste .icon { color: var(--akzent); }

/* Das Antippbare ist der Link, nicht der Listenpunkt. */
.kontakt-liste a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ============================================================
   10 · FORMULARE
   ============================================================ */

.formular { display: grid; gap: var(--raum-3); max-width: 34rem; }

/* Mailversand (12.09.2026): Honigtopf, Rückmeldung, Dank an Ort und Stelle. */
.honig {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.formular-meldung {
  margin: 0;
  padding-left: var(--raum-3);
  border-left: 1px solid var(--akzent);
  font-size: var(--t-small, 0.95rem);
  line-height: 1.5;
}
.formular-erfolg {
  padding: var(--raum-4);
  border: 1px solid var(--linie-akzent);
  display: grid;
  gap: var(--raum-2);
}
.formular-erfolg:focus { outline: none; }
.btn[disabled] { opacity: 0.6; cursor: progress; }

.feld { display: grid; gap: 0.5rem; }

.feld-marke {
  font-size: var(--t-label);
  letter-spacing: var(--sperr-mittel);
  text-transform: uppercase;
  color: var(--text-3);
}

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

.eingabe {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--buehne-3);
  border: 1px solid var(--linie);
  border-radius: var(--kante);
  color: var(--text);
  font-size: 1rem;
  transition: border-color var(--dauer-kurz) var(--kurve-sanft),
              background-color var(--dauer-kurz) var(--kurve-sanft);
}

.eingabe::placeholder { color: var(--text-3); }
.eingabe:hover { border-color: var(--linie-akzent); }
.eingabe:focus-visible { border-color: var(--akzent); outline-offset: 0; }
textarea.eingabe { resize: vertical; min-height: 8rem; }

/* ============================================================
   11 · KLEINE BILDSCHIRME
   ============================================================ */

@media (max-width: 768px) {
  .held { min-height: auto; padding-block: calc(var(--kopf-hoehe) + var(--raum-4)) var(--raum-5); }
  .held-rahmen { display: none; }
  .zitat { padding-left: var(--raum-3); }
  .portraet::before { display: none; }
  .kompass-dauer { justify-content: flex-start; }
}

/* ============================================================
   12 · KOMPASS-EINSTIEG
   Die erste Frage steht auf der Seite, nicht hinter einem Link.
   ============================================================ */

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

@media (min-width: 900px) {
  .einstieg { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: var(--raum-6); }
}

.einstieg-form {
  padding: var(--raum-4);
  border: 1px solid var(--linie-akzent);
  background: var(--buehne-3);
  display: grid;
  gap: var(--raum-3);
}

.einstieg-form fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
  display: grid;
  gap: 0.55rem;
}

.einstieg-legende {
  padding: 0;
  margin-bottom: var(--raum-2);
  font-size: var(--t-label);
  letter-spacing: var(--sperr-mittel);
  text-transform: uppercase;
  color: var(--akzent);
}

.einstieg-option { position: relative; }

.einstieg-option input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.einstieg-option label {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--linie-fein);
  background-color: var(--flaeche);
  background-image: var(--flaeche-licht);
  box-shadow: var(--kantenlicht);
  color: var(--text-2);
  font-size: 0.98rem;
  cursor: pointer;
  transition: border-color var(--dauer-kurz) var(--kurve-sanft),
              background-color var(--dauer-kurz) var(--kurve-sanft),
              color var(--dauer-kurz) var(--kurve-sanft);
}

.einstieg-option label:hover {
  border-color: var(--linie-akzent);
  background-color: var(--flaeche-hover);
  color: var(--text);
}

.einstieg-marke {
  position: relative;
  flex-shrink: 0;
  width: 16px; height: 16px;
  border: 1px solid var(--linie-akzent);
  border-radius: 50%;
}

.einstieg-marke::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--akzent);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity var(--dauer-kurz) var(--kurve-sanft),
              transform var(--dauer-kurz) var(--kurve);
}

.einstieg-option input:checked + label {
  border-color: var(--akzent);
  background: var(--akzent-a12);
  color: var(--text);
}
.einstieg-option input:checked + label .einstieg-marke::after { opacity: 1; transform: scale(1); }
.einstieg-option input:focus-visible + label { outline: 2px solid var(--akzent); outline-offset: 3px; }

/* Dieselben vier Zeichen wie in den Kompetenzfeldern — wer sie in der
   Navigation gesehen hat, erkennt sie hier wieder. */
.einstieg-icon {
  width: 20px;
  height: 20px;
  color: var(--akzent);
  opacity: 0.5;
  transition: opacity var(--dauer-kurz) var(--kurve-sanft);
}

.einstieg-option label:hover .einstieg-icon { opacity: 0.85; }
.einstieg-option input:checked + label .einstieg-icon { opacity: 1; }

/* „Wohnungseigentümergemeinschaft" ist ein einziges Wort und bestimmt
   damit die kleinste mögliche Breite der Karte. Mit dem Zeichen davor
   passte es auf 375 px nicht mehr in die Polsterung von 2,5 rem — die
   Karte gibt dort jetzt Platz frei, statt das Wort zu zerbrechen.
   Trennung und `anywhere` sind nur die Reißleine für noch schmalere
   Geräte. */
.einstieg-option-text {
  min-width: 0;
  hyphens: auto;
  overflow-wrap: anywhere;
}

@media (max-width: 520px) {
  .einstieg-form { padding: var(--raum-3); }
}

.einstieg-fuss { margin: 0; }

/* ============================================================
   13 · DER WEG MIT LIVÉRA

   Acht Schritte in einer Liste sind eine Aufzählung, kein Weg. Sie
   liegen deshalb auf einer Spur: eine Linie, acht Marken darauf, die
   nacheinander gesetzt werden. Die Linie wächst mit — sie ist der Weg.

   Drei Fassungen:
   · unter 760 px senkrecht, eine Spalte;
   · 760–1199 px senkrecht, Nummer links, Satz rechts;
   · ab 1200 px eine waagerechte Bahn. Der Abschnitt haftet dann am
     Bildschirm und der senkrechte Scrollweg fährt die Bahn von links
     nach rechts durch (JS setzt `ist-bahn`, `--wechsel-hub` = Fahrweg
     in px, `--wechsel-lage` = 0…1). Ohne JS oder bei reduzierter
     Bewegung ist die Bahn ein gewöhnlicher, waagerecht scrollbarer
     Streifen — derselbe Inhalt, nur ohne Haften.
   ============================================================ */

.wechsel-buehne { position: relative; }
.wechsel-buehne > .huelle { position: relative; z-index: 1; }

/* Auslauf: Luft zwischen den Karten und der Kapitelziffer 05, die
   halb in diesen Abschnitt ragt. Nur wo die Ziffer steht (ab 1100 px). */
@media (min-width: 1100px) {
  .sektion-wechsel {
    --wechsel-auslauf: var(--raum-5);
    padding-bottom: calc(var(--sektion) + var(--wechsel-auslauf));
  }
}

.wechsel-liste {
  position: relative;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0 0 0 var(--raum-4);
  list-style: none;
  counter-reset: none;
}

/* Seit dem Meeting vom 04.09.2026 ist jeder Schritt eine Karte, die
   beim Scrollen von links nach rechts ins Bild läuft — eine nach der
   anderen, 160 ms versetzt. Die Spur wächst weiterhin mit.
   Eingeblendet wird die Bahn (.blende), nicht die Liste: die Liste
   trägt ab 1200 px den Fahrweg als transform. */
.wechsel-schritt {
  position: relative;
  margin: 0 0 var(--raum-3);
  padding: var(--raum-4) var(--raum-4) var(--raum-4) calc(var(--raum-4) + 0.25rem);
  background-color: var(--flaeche);
  background-image: var(--flaeche-licht);
  box-shadow: var(--kantenlicht);
  border: 1px solid var(--linie-fein);
  opacity: 0;
  transform: translateX(-56px);
  transition: opacity 1.1s var(--kurve-sanft), transform 1.3s var(--kurve),
              border-color var(--dauer) var(--kurve-sanft);
  transition-delay: calc(var(--i, 0) * 160ms + 200ms);
}
.wechsel-schritt:last-child { margin-bottom: 0; }
.wechsel-schritt:hover { border-color: var(--linie-akzent); }

.wechsel-bahn.ist-da .wechsel-schritt { opacity: 1; transform: none; }
.kein-js .wechsel-schritt { opacity: 1; transform: none; }

/* Das Zeichen der Karte — eckig gerahmt wie im Logo, über der Ziffer. */
.wechsel-icon-rahmen {
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  margin-bottom: var(--raum-2);
  border: 1px solid var(--linie-akzent);
  color: var(--akzent);
}
.wechsel-icon { width: 1.35rem; height: 1.35rem; stroke-width: 1; }

/* Die Ziffern sind zurückgenommen, aber lesbar — bei 22 % Deckkraft
   lagen sie unter 2:1 und waren für schwache Augen nicht da. */
.wechsel-nr {
  display: block;
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  font-weight: 300;
  line-height: 1;
  color: var(--akzent);
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

.wechsel-titel { margin: var(--raum-2) 0 0; }

/* Der Abstand haengt am Satz, nicht am Schrittnamen — solange kein
   Satz vorliegt, soll die Zeile nicht nachtropfen. */
.wechsel-schritt .kachel-text { margin-top: var(--raum-2); max-width: 42ch; }

/* --- Die Spur, senkrecht: der Standard --- */
.wechsel-spur {
  position: absolute;
  left: 0;
  top: 0.5em;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom,
    var(--linie-akzent) 0%,
    var(--linie-akzent) 82%,
    transparent 100%);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.6s var(--kurve) 0.1s;
}

.wechsel-bahn.ist-da .wechsel-spur { transform: scaleY(1); }
.kein-js .wechsel-spur { transform: none; }

/* Die Marke sitzt auf der Spur. Eckig, wie der Logorahmen — auf die
   Ecke gestellt, damit sie die Linie sichtbar durchstösst. */
.wechsel-marke {
  position: absolute;
  top: 0.5em;
  left: calc(var(--raum-4) * -1);
  width: 7px;
  height: 7px;
  margin-left: -3px;
  background: var(--akzent);
  transform: scale(0) rotate(45deg);
  transition: transform 0.6s var(--kurve);
  transition-delay: calc(var(--i, 0) * 140ms + 450ms);
}

.wechsel-bahn.ist-da .wechsel-marke { transform: scale(1) rotate(45deg); }
.kein-js .wechsel-marke { transform: scale(1) rotate(45deg); }

@media (max-width: 600px) {
  .wechsel-liste { padding-left: 1.25rem; }
  .wechsel-marke { left: -1.25rem; }
  .wechsel-schritt { padding: 1.25rem 1rem; }
  .wechsel-icon-rahmen { width: 2.2rem; height: 2.2rem; }
  .wechsel-icon { width: 1.15rem; height: 1.15rem; }
}

/* --- Dazwischen: Spur senkrecht, aber zweispaltig ---
   Untereinander in einer Spalte bliebe rechts die halbe Sektion leer.
   Nummer und Schrittname stehen deshalb links, der Satz daneben. */
@media (min-width: 760px) and (max-width: 1199px) {
  .wechsel-schritt {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr);
    column-gap: clamp(2rem, 5vw, 4rem);
    align-content: start;
  }
  .wechsel-icon-rahmen { grid-column: 1; grid-row: 1; }
  .wechsel-nr    { grid-column: 1; grid-row: 2; }
  .wechsel-titel { grid-column: 1; grid-row: 3; }
  .wechsel-schritt .kachel-text {
    grid-column: 2;
    grid-row: 1 / span 3;
    margin-top: 0;
    max-width: none;
  }
}

/* --- Ab 1200 px: die Bahn --- */
@media (min-width: 1200px) {
  /* Grundform (gilt auch ohne JS): ein waagerecht scrollbarer Streifen.
     Die Karten haben ein festes Maß, die Liste ist so breit wie alle
     Karten zusammen — sie ragt über das Fenster hinaus. */
  .wechsel-bahn {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: var(--raum-2);
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: var(--linie-akzent) transparent;
  }

  .wechsel-liste {
    display: flex;
    width: max-content;
    column-gap: clamp(1.25rem, 2.2vw, 2.5rem);
    padding: var(--raum-4) 0 0;
  }

  .wechsel-schritt {
    flex: 0 0 clamp(17rem, 20vw, 21.5rem);
    margin: 0;
    padding: var(--raum-3);
    scroll-snap-align: start;
  }

  /* Die Karten sind schmal: der Schrittname wird eine Stufe kleiner
     und enger gesperrt, damit „Bedarfsanalyse" in eine Zeile passt,
     statt mitten im Wort zu brechen. */
  .wechsel-titel {
    font-size: clamp(0.95rem, 1.1vw, 1.2rem);
    letter-spacing: 0.06em;
    hyphens: manual;
    overflow-wrap: normal;
  }

  .wechsel-spur {
    top: 0;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 1px;
    background: linear-gradient(to right,
      var(--linie-akzent) 0%,
      var(--linie-akzent) 82%,
      transparent 100%);
    transform: scaleX(0);
    transform-origin: left;
  }

  .wechsel-bahn.ist-da .wechsel-spur { transform: scaleX(1); }
  .kein-js .wechsel-spur { transform: none; }

  .wechsel-marke {
    top: calc(var(--raum-4) * -1);
    left: 0;
    margin: -3px 0 0;
  }

  /* Die Karten sind schmal — der Satz darf die volle Karte nehmen. */
  .wechsel-schritt .kachel-text { max-width: none; }

  /* „Laufende Betreuung" braucht zwei Zeilen, die übrigen eine. Ohne
     ein festes Maß begänne genau dieser Satz tiefer als die anderen
     und die Reihe verlöre ihre Grundlinie. */
  .wechsel-titel { min-height: 2.6em; }

  /* --- Haften und fahren (nur mit JS, nicht bei reduzierter Bewegung) ---
     Der Abschnitt wird um den Fahrweg höher, die Bühne darin bleibt
     eine Bildschirmhöhe hoch und haftet oben. Während der Abschnitt
     darunter durchläuft, schiebt die Liste um den Fahrweg nach links.
     `overflow: clip` statt `hidden`: `hidden` macht den Abschnitt zum
     Scrollrahmen und sticky haftet dann an ihm statt am Fenster.
     Der Auslauf ist Innenabstand unten: die Bühne haftet nur im
     Inhaltsbereich und läuft danach um den Auslauf weiter hoch. */
  .sektion-wechsel.ist-bahn {
    height: calc(100vh + var(--wechsel-hub, 0px) + var(--wechsel-auslauf, 0px));
    padding-block: 0 var(--wechsel-auslauf, 0px);
    overflow: clip;
  }

  .ist-bahn .wechsel-buehne {
    position: sticky;
    top: 0;
    height: 100vh;
    box-sizing: border-box;
    padding-top: var(--kopf-hoehe-klein);
    display: flex;
    align-items: center;
  }
  .ist-bahn .wechsel-buehne > .huelle { width: 100%; }

  .ist-bahn .wechsel-bahn {
    overflow: visible;
    padding-bottom: 0;
    scroll-snap-type: none;
  }

  .ist-bahn .wechsel-liste {
    transform: translate3d(calc(var(--wechsel-lage, 0) * var(--wechsel-hub, 0px) * -1), 0, 0);
    will-change: transform;
  }

  .ist-bahn .wechsel-schritt { scroll-snap-align: none; }

  /* Auf flachen Bildschirmen rückt der Kopf enger an die Bahn, damit
     beides in eine Bildschirmhöhe passt. */
  .ist-bahn .sektion-kopf { margin-bottom: var(--raum-4); }
  @media (max-height: 820px) {
    .ist-bahn .sektion-kopf { margin-bottom: var(--raum-3); }
    .ist-bahn .sektion-kopf .h2 { margin-bottom: var(--raum-2); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .wechsel-spur { transform: none; }
  .wechsel-marke { transform: scale(1) rotate(45deg); }
}

/* ============================================================
   14 · FAQ
   <details> statt JavaScript: klappt von selbst, ist tastatur-
   bedienbar und wird von Suchmaschinen gelesen.
   ============================================================ */

.faq-liste { display: grid; }

.faq-eintrag { border-bottom: 1px solid var(--linie-fein); }
.faq-eintrag:first-child { border-top: 1px solid var(--linie-fein); }

.faq-frage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-3);
  min-height: 44px;
  padding: var(--raum-3) 0;
  cursor: pointer;
  list-style: none;
  font-size: 1.05rem;
  color: var(--text);
  transition: color var(--dauer-kurz) var(--kurve-sanft);
}

.faq-frage::-webkit-details-marker { display: none; }
.faq-frage:hover { color: var(--akzent); }

/* Solange zu einer Frage keine Antwort vorliegt, wird kein Akkordeon
   gebaut — die Zeile ist dann nichts zum Anklicken. */
.faq-frage--still { cursor: default; }
.faq-frage--still:hover { color: var(--text); }

.faq-pfeil {
  flex-shrink: 0;
  color: var(--akzent);
  transition: transform var(--dauer) var(--kurve);
}

.faq-eintrag[open] .faq-pfeil { transform: rotate(180deg); }
.faq-eintrag[open] .faq-frage { color: var(--akzent); }

.faq-antwort {
  padding: 0 0 var(--raum-4);
  color: var(--text-2);
  max-width: var(--breite-text);
}

/* Der Schlusssatz des Anspruchs ist ein ganzer Satz — als gesperrte
   Versalien wurde daraus eine fünfzeilige Wand. Serif-Kursiv trägt ihn
   besser, und die kurze Zeile darüber macht die Überschrift. */
.anspruch-pointe {
  max-width: 34ch;
  margin: 0 auto var(--raum-4);
  font-size: clamp(1.25rem, 2.6vw, 1.9rem);
  color: var(--akzent);
  line-height: 1.5;
}


/* Gruendungsjahr im Gruenderinnen-Auftritt der Manifestseite.
   Steht direkt unter dem Namen und traegt deshalb kein eigenes
   Gewicht — es ist eine Angabe, keine Aussage. */
.akt-gruendung {
  margin-top: calc(var(--raum-1) * -0.5);
  margin-bottom: var(--raum-3);
  letter-spacing: var(--sperr-eng);
}


/* ============================================================
   Der Gründerinnen-Akt ist ein Blatt auf der Bühne (Naht-System,
   siehe „NÄHTE" oben): Sand auf Nacht, beide Kanten scharf. Die
   weichen Säume von früher, die die dunkle Bühne in den Akt laufen
   ließen, sind weg — sie wirkten wie Schmutz auf dem Blatt. Statt
   eines Verlaufs unterbricht ein Objekt die obere Kante: das
   freigestellte Porträt ragt in den Hero hinein. Der Hero ist
   `isolation: isolate` ohne z-index, die Hülle liegt auf Ebene 1 —
   das Porträt kommt also über das Hero-Bild zu liegen.
   ============================================================ */

.sektion-gruenderin { position: relative; }
.sektion-gruenderin > .huelle { position: relative; z-index: 1; }
/* Der Überhang in den Hero (V2–V4) ist seit 12.09.2026 weg: das Bild
   steht mittig zum Text, das Blatt schiebt sich mit sauberer Kante über
   den klebenden Hero. */


/* Das Manifest-Bild bekommt dieselbe leise Parallax wie der Hero —
   der Schnitt bewegt sich, der Rahmen dahinter steht still. */
.manifest-schnitt {
  transform: translate3d(0, var(--parallax-px, 0px), 0);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .manifest-schnitt { transform: none; }
}

/* Arbeitsweise: ein Zeichen je Zeile (Meeting 04.09.2026). */
.arbeit-liste li {
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
}
.arbeit-icon {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  margin-top: 0.12em;
  stroke-width: 1.2;
  color: var(--akzent);
}


/* ==================================================================
   RECHTSTEXT — Datenschutzerklärung (12.09.2026)
   Ein langer Text, der lesbar bleiben soll: Jost-Kapitälchen als
   Gerüst (Zwischenüberschriften, Sprungliste), die Ziffer in Serif
   als einziger Schmuck, Gold nur an Ziffer, Strich und Widerspruch.
   ================================================================== */

.rechtstext .fliess { max-width: var(--breite-text); }
.rechtstext .fliess strong { color: var(--text); font-weight: 500; }

.recht-kurz {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--raum-4) var(--raum-5);
  margin: 0 0 var(--raum-5);
  padding: 0 0 var(--raum-5);
  border-bottom: 1px solid var(--linie-fein);
}
.recht-kurz strong {
  display: block;
  font-size: var(--t-label);
  font-weight: 400;
  letter-spacing: var(--sperr-weit);
  text-transform: uppercase;
  color: var(--akzent);
  margin-bottom: var(--raum-1);
}
.recht-kurz span { color: var(--text-2); }
@media (max-width: 640px) {
  .recht-kurz { grid-template-columns: 1fr; gap: var(--raum-3); }
}

.recht-nav ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-1) var(--raum-3);
  margin: 0 0 var(--raum-2);
  font-size: var(--t-label);
  letter-spacing: var(--sperr-weit);
  text-transform: uppercase;
}
.recht-nav a {
  display: inline-block;
  padding-left: 2.2em;      /* hängender Einzug: umbrochene Zeilen unter dem Titel, nicht unter der Ziffer */
  text-indent: -2.2em;
  color: var(--text-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dauer) var(--kurve), border-color var(--dauer) var(--kurve);
}
.recht-nav a::before { content: attr(data-nr) "\2002"; color: var(--akzent); }
.recht-nav a:hover, .recht-nav a:focus-visible { color: var(--text); border-color: currentColor; }

.recht-abschnitt { padding-top: var(--raum-5); }   /* Sprungziel: html scroll-padding-top reicht */
.recht-abschnitt + .recht-abschnitt {
  margin-top: var(--raum-5);
  border-top: 1px solid var(--linie-fein);
}
.recht-titel {
  display: flex;
  align-items: baseline;
  gap: var(--raum-2);
  margin: 0 0 var(--raum-3);
  text-wrap: pretty;
}
.recht-nr {
  font-family: var(--schrift-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-lead);
  letter-spacing: 0;
  text-transform: none;
  color: var(--akzent);
  flex: none;
}
.recht-zwischen {
  font-size: var(--t-label);
  font-weight: 400;
  letter-spacing: var(--sperr-weit);
  text-transform: uppercase;
  color: var(--text);
  margin: var(--raum-4) 0 var(--raum-2);
}
.recht-liste {
  max-width: var(--breite-text);
  color: var(--text-2);
  margin: var(--raum-3) 0;
  display: grid;
  gap: var(--raum-1);
}
.recht-liste li { position: relative; padding-left: 1.5em; }
.recht-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 0.75em;
  height: 1px;
  background: var(--akzent);
}
.recht-liste strong { color: var(--text); font-weight: 500; }
.recht-hinweis {
  border-left: 1px solid var(--akzent);
  padding-left: var(--raum-3);
  margin-top: var(--raum-3);
}
.recht-adresse {
  font-style: normal;
  line-height: 1.75;
  color: var(--text);
  margin: var(--raum-3) 0;
}


/* ==================================================================
   ABNAHME 12.09.2026 — vier Befunde aus der Gesamtprüfung
   ================================================================== */

/* 1 · (erledigt am selben Tag anders: der Lichtschein hinter dem Porträt,
   der die Seite 8 px breiter machte, gibt es seit dem Studio-Foto nicht
   mehr — `.portraet::after { content: none }`.) */

/* 2 · Sicherung: nichts darf die Seite breiter machen als den
   Bildschirm. `clip` statt `hidden`, damit der klebende Hero im
   Blattstapel weiter klebt (clip erzeugt keinen Scroll-Container). */
main.seite { overflow-x: clip; }

/* 3 · Tippflächen auf Touch-Geräten: Textlinks, Brotkrumen, Sprung-
   liste und Fußzeilen-Listen sind 18–27 px hoch. Ein unsichtbares
   Pseudo-Element vergrößert die Trefferfläche auf ≥ 44 px, ohne die
   Zeile zu verschieben. Das Instagram-Quadrat wächst auf 44 px. */
@media (pointer: coarse) {
  .link, .textlink, .brotkrumen a, .recht-nav a, .fuss-liste a, .fuss-recht a {
    position: relative;
  }
  .link::after, .textlink::after, .brotkrumen a::after, .recht-nav a::after,
  .fuss-liste a::after, .fuss-recht a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
    background: none;
    border: 0;
  }
  .fuss-sozial a { width: 44px; height: 44px; }
  /* Gestapelte Sprungliste: unsichtbare Flächen würden sich überlappen,
     also echte Höhe je Eintrag. */
  .recht-nav a { padding-block: 11px; }
  .recht-nav a::after { content: none; }
  .recht-nav ol { row-gap: 0; }
}


/* ==================================================================
   REGISTER — die sechs Kompetenzfelder (12.09.2026)
   Liste statt Kacheln: Ziffer in Serif-Kursiv, Name in Jost-Versalien,
   Claim in Serif-Kursiv, Haarlinien dazwischen. Rechts ab 1000 px ein
   klebendes Bildfenster, das beim Überfahren einer Zeile weich auf
   deren Foto wechselt (nur eine Bewegung: die Überblendung). Unter
   1000 px trägt jede Zeile ihr Foto als kleines rundes Bild.
   Referenzen: Koto, Instrument, OFF+BRAND (Zeilen), Locomotive, Büro
   (Liste neben Bild).
   ================================================================== */

.register { display: grid; gap: var(--raum-5); }
@media (min-width: 1000px) {
  .register {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.85fr);
    column-gap: var(--raum-6);
    row-gap: 0;
    align-items: start;
  }
}
/* Das Bildfenster klebt — dafür darf der Abschnitt kein Scroll-
   Container sein: `clip` statt `hidden` (klebt sonst nie). */
#kompetenzfelder.hat-licht,
.sektion--linie.hat-licht:has(.register) { overflow: clip; }
/* Das Fenster soll bis zum Ende des Abschnitts stehen, nicht nur bis
   zum Ende der Liste: der Abschnitts-Unterrand wandert deshalb vom
   Abschnitt in das Register (der klebende Bezugsrahmen). */
@media (min-width: 1000px) {
  /* Ein Rest bleibt Innenabstand der Sektion: so hält das Fenster am
     Ende seines Laufs Luft zum nächsten Abschnitt, statt ihn zu berühren. */
  .sektion:has(> .huelle > .register) { padding-bottom: var(--raum-5); }
  /* Als Rasterzeile, nicht als Innenabstand: der Klebebereich reicht
     nur bis zum Inhaltsrand des Rasters, Innenabstand zählt nicht.
     Zeile plus Rest ergeben wieder den normalen Sektionsabstand. */
  .register::after { content: ""; grid-column: 1 / -1; height: calc(var(--sektion) - var(--raum-5)); }
}

.register-links { min-width: 0; }
/* Auf der Startseite steht der Abschnittskopf in der linken Spalte über
   der Liste: so ist der Klebebereich des Fensters so lang wie Kopf plus
   Liste, nicht nur „Liste minus Fenster". */
.register--mit-kopf .sektion-kopf { max-width: none; margin-bottom: var(--raum-4); }
.register--mit-kopf .sektion-kopf .lead { max-width: var(--breite-text); }
.register-liste { border-top: 1px solid var(--linie); }
.register-zeile { border-bottom: 1px solid var(--linie); }
.register-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--raum-3);
  padding: var(--raum-3) 0;
  color: inherit;
  text-decoration: none;
}
@media (min-width: 720px) { .register-link { padding: var(--raum-4) 0; gap: var(--raum-4); } }
/* Schmal: drei Spalten (Zeichen, Text, Bild), kein Pfeil — die Zeile ist
   als Ganzes der Link, das Bild zeigt es. Sonst blieben dem Text 140 px. */
@media (max-width: 719px) {
  .register-link { grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(0.5rem, 2vw, var(--raum-2)); }
  .register-zeichen .icon { width: 1.4rem; height: 1.4rem; }
  .register-pfeil { display: none; }
  .register-titel { font-size: clamp(0.9rem, 3.8vw, 1.15rem); }
}
@media (max-width: 380px) {
  .register-thumb { width: 48px; height: 48px; }
  .register-titel { font-size: 0.88rem; letter-spacing: 0.05em; }
  .register-claim { font-size: 0.95rem; }
  .register-zeichen .icon { width: 1.25rem; height: 1.25rem; }
}
.register-text > * { min-width: 0; }

/* Das Icon des Feldes steht vorn, wo bis zum 21.09.2026 die Ziffer
   stand — in deren Größe und Farbe (Meeting: „Zahlen weg, Icons nach
   vorne"). Größere Zeichen brauchen den feineren Strich. */
.register-zeichen {
  display: flex;
  color: var(--akzent);
  transition: color var(--dauer-kurz) var(--kurve-sanft);
}
.register-zeichen .icon {
  width: clamp(1.5rem, 2.4vw, 2rem);
  height: clamp(1.5rem, 2.4vw, 2rem);
  stroke-width: 1;
}
.register-text { display: grid; gap: 0.45em; min-width: 0; }
.register-titel {
  margin: 0;
  font-size: var(--t-h3);
  font-weight: 300;
  letter-spacing: 0.1em;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--text);
  overflow-wrap: break-word;
  hyphens: auto;
}
.register-claim {
  font-family: var(--schrift-serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.4;
  color: var(--text-2);
  max-width: 46ch;
}
.register-pfeil {
  color: var(--akzent);
  opacity: 0.55;
  transform: translateX(-6px);
  transition: opacity var(--dauer) var(--kurve), transform var(--dauer) var(--kurve);
}
.register-pfeil .icon { width: 22px; height: 22px; }
.register-thumb {
  width: 64px;
  height: 64px;
  border-radius: var(--kante-zeile);
  overflow: hidden;
  flex: none;
}
.register-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fokus, 50% 50%); }
@media (min-width: 1000px) { .register-thumb { display: none; } }

.register-zeile:hover .register-pfeil,
.register-zeile:focus-within .register-pfeil,
.register-zeile.ist-aktiv .register-pfeil { opacity: 1; transform: none; }
.register-zeile.ist-aktiv .register-zeichen { color: var(--text); }
.register-link:focus-visible { outline-offset: 6px; }

/* Bildfenster: rund gefasst, klebt neben der Liste, blendet um. */
.register-fenster {
  display: none;
  position: sticky;
  align-self: start;
  top: calc(var(--kopf-hoehe) + var(--raum-3));
  aspect-ratio: 4 / 5;
  /* Nie höher als der Bildschirm unter dem Kopf: dann reicht der
     Klebebereich bis fast ans Ende der Liste, und das Fenster löst
     sich erst, wenn der Abschnitt unten ausläuft. */
  max-height: calc(100vh - var(--kopf-hoehe) - var(--raum-3) - var(--raum-4));
  border-radius: var(--kante-tafel);
  overflow: hidden;
  background: var(--flaeche);
  box-shadow: inset 0 0 0 1px var(--linie-fein);
}
@media (min-width: 1000px) { .register-fenster { display: block; } }
.register-bild {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.7s var(--kurve-sanft);
}
.register-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--fokus, 50% 50%);
  transform: scale(1.05);
  transition: transform 1.4s var(--kurve);
}
.register-bild.ist-aktiv { opacity: 1; z-index: 1; }
.register-bild.ist-aktiv img { transform: none; }
.register-bild::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 21, 18, 0.62) 0%, rgba(20, 21, 18, 0.18) 34%, transparent 58%);
  pointer-events: none;
}
.register-kennung {
  position: absolute;
  left: var(--raum-4);
  right: var(--raum-4);
  bottom: var(--raum-4);
  z-index: 1;
  font-size: var(--t-label);
  letter-spacing: var(--sperr-weit);
  text-transform: uppercase;
  color: #F3EFE4;
}

@media (prefers-reduced-motion: reduce) {
  .register-bild, .register-bild img, .register-pfeil { transition: none; }
  .register-bild img { transform: none; }
}


/* ==================================================================
   STIMMEN — Kundenstimmen als Zitat-Strecke (13.09.2026)
   Waagerechte Bahn mit Spalten statt drei Karten: Ziffer als Label,
   das Zitat groß in Serif-Kursiv, Haarlinie links, Absender darunter.
   Jede zweite Spalte steht tiefer (Metalab). Bewegt wird nur, was
   der Nutzer bewegt — Wischen, Ziehen, Pfeile. Referenzen: Metalab,
   Claude, Paraform, Framer (Mobbin).
   ================================================================== */

.stimmen-kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--raum-4);
  margin-bottom: var(--raum-4);
}
.stimmen-kopf .sektion-kopf { margin-bottom: 0; }
.stimmen-pfeile { display: flex; gap: var(--raum-2); padding-bottom: 0.4rem; }
.stimmen-pfeil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--linie-akzent);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--dauer-kurz) var(--kurve-sanft),
              background-color var(--dauer-kurz) var(--kurve-sanft),
              opacity var(--dauer-kurz) var(--kurve-sanft);
}
.stimmen-pfeil .icon { width: 20px; height: 20px; }
.stimmen-pfeil[data-richtung="-1"] .icon { transform: rotate(180deg); }
.stimmen-pfeil:hover, .stimmen-pfeil:focus-visible { border-color: var(--akzent); background: var(--flaeche); }
.stimmen-pfeil[disabled] { opacity: 0.35; cursor: default; background: transparent; border-color: var(--linie); }

.stimmen { position: relative; }
.stimmen-bahn {
  display: flex;
  gap: var(--raum-5);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  scrollbar-width: none;
  padding: var(--raum-2) 0 var(--raum-4);
  cursor: grab;
}
.stimmen-bahn::-webkit-scrollbar { display: none; }
.stimmen-bahn.zieht { cursor: grabbing; scroll-snap-type: none; }
/* Solange rechts noch Stimmen folgen, läuft die Bahn dort weich aus —
   ein harter Schnitt durch ein Zitat sähe nach Zufall aus. */
.stimmen-bahn.hat-mehr {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 140px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 140px), transparent);
}
.stimmen-bahn:focus-visible { outline-offset: 8px; }

.stimme {
  flex: 0 0 min(100%, 27rem);
  scroll-snap-align: start;
  padding-left: var(--raum-4);
  border-left: 1px solid var(--linie);
  display: grid;
  gap: var(--raum-4);
  align-content: start;
  min-height: 100%;
}
@media (min-width: 900px) {
  .stimme:nth-child(even) { margin-top: var(--raum-5); }
}

.stimme-nr {
  display: flex;
  align-items: baseline;
  gap: var(--raum-2);
  margin: 0;
  font-size: var(--t-label);
  letter-spacing: var(--sperr-weit);
  text-transform: uppercase;
  color: var(--akzent);
}
.stimme-nr > span:first-child {
  font-family: var(--schrift-serif);
  font-style: italic;
  font-size: 1.6rem;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
}
.stimme-demo { display: none; color: var(--text-3); }
.stimme--demo .stimme-demo { display: inline; }

.stimme-zitat { margin: 0; }
.stimme-zitat p {
  position: relative;
  margin: 0;
  font-family: var(--schrift-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.3rem, 1.85vw, 1.7rem);
  line-height: 1.4;
  color: var(--text);
  text-wrap: pretty;
}
.stimme-zitat p::before { content: "\201E"; color: var(--akzent); }
.stimme-zitat p::after { content: "\201C"; color: var(--akzent); }

.stimme-fuss {
  display: grid;
  gap: 0.25em;
  margin: 0;
  padding-top: var(--raum-3);
  border-top: 1px solid var(--linie-fein);
  max-width: 28ch;
}
.stimme-name {
  font-size: var(--t-label);
  letter-spacing: var(--sperr-weit);
  text-transform: uppercase;
  color: var(--text);
}
.stimme-rolle { font-size: var(--t-klein); color: var(--text-2); }
.stimme-objekt { font-size: var(--t-klein); color: var(--text-3); }

/* Positionslinie unter der Bahn: Haarlinie, darauf ein Salbei-Segment
   in der Breite des sichtbaren Ausschnitts. */
.stimmen-lauf {
  position: relative;
  height: 1px;
  margin-top: var(--raum-2);
  background: var(--linie-fein);
}
.stimmen-lauf-balken {
  position: absolute;
  top: -1px;
  left: 0;
  height: 3px;
  width: 30%;
  background: var(--akzent);
  border-radius: 2px;
  transition: transform 0.4s var(--kurve), width 0.4s var(--kurve);
}

.referenzen-hinweis { margin-top: var(--raum-3); }

@media (max-width: 719px) {
  .stimmen-kopf { flex-direction: column; align-items: flex-start; }
  .stimme { flex-basis: 84%; }
}
@media (prefers-reduced-motion: reduce) {
  .stimmen-bahn { scroll-behavior: auto; }
  .stimmen-lauf-balken { transition: none; }
}


/* ==================================================================
   FELDSEITE — die sechs Kompetenzfelder als Kapitel (13.09.2026)
   Plan: Design MD's/Design-v3.md (§ 8)
   Bühne (Ziffer, Text, hohe Tafel bis zum Rand), Verzeichnis
   (nummerierte Zeilen, klebender Kopf), Kapitelnavigation.
   Mobbin: AI in Design Report, Trawelt (Ziffer), Dropbox, Faculty
   Department, Instrument (Text + hohe Tafel), United Carriers, Craft
   Agency (Verzeichnis), TIDAL, Udemy (Vor/Zurück).
   ================================================================== */

/* --- Bühne --- */
.sektion-feldbuehne {
  padding-top: calc(var(--kopf-hoehe) + var(--raum-5));
  padding-bottom: var(--sektion);
  /* Die Tafel läuft über den Hüllenrand hinaus: hier abschneiden,
     nicht am Dokument (main.seite clippt zusätzlich). Auch senkrecht,
     sonst ragt die untere Hälfte der Nahtziffer ins Verzeichnis und
     liegt dort doppelt über der .naht-nr--unten. */
  overflow: clip;
}
.feld-buehne {
  display: grid;
  gap: var(--raum-5);
  align-items: center;
}
@media (min-width: 1000px) {
  .feld-buehne {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    column-gap: var(--raum-6);
    min-height: calc(100svh - var(--kopf-hoehe) - var(--raum-5) - var(--sektion));
  }
}
.feld-buehne-text { min-width: 0; }

/* Die Kapitelziffer: dieselbe Ziffer wie im Register, hier sichtbar
   und im Fluss statt als Konturziffer an der Naht. */
.feld-ziffer {
  font-family: var(--schrift-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(4rem, 9vw, 8rem);
  line-height: 0.8;
  letter-spacing: -0.02em;
  color: var(--akzent);
  margin: 0 0 var(--raum-4);
}
.feld-buehne-text .eyebrow { margin-bottom: var(--raum-3); }
/* „Sondereigentumsmanagement“ ist 26 Zeichen lang. */
.feld-titel { font-size: clamp(1.55rem, 3.6vw, 3rem); overflow-wrap: break-word; hyphens: manual; }
@media (max-width: 420px) { .feld-titel { letter-spacing: 0.05em; } }
.feld-buehne .feld-claim { margin-top: var(--raum-3); }

/* Die Tafel: 4:5 wie das Register-Fenster, gerundet, Haarlinie im
   hellen Thema, Kennung unten. Rechts über die Hülle hinaus bis an
   den Bildschirmrand (ab 1000 px). */
.feld-tafel {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  max-height: calc(100svh - var(--kopf-hoehe) - var(--raum-6));
  border-radius: var(--kante-tafel);
  overflow: hidden;
  background: var(--flaeche);
  box-shadow: inset 0 0 0 1px var(--linie-akzent);
  isolation: isolate;
}
/* aspect-ratio + max-height rechnet die Breite aus der Hoehe zurueck;
   dann greift der negative Rand ins Leere. Deshalb die Breite explizit:
   Spalte plus Ueberstand, die Hoehe folgt dem Verhaeltnis und wird vom
   Bildschirm gedeckelt. */
@media (max-width: 999px) {
  .feld-tafel {
    aspect-ratio: 16 / 10;
    max-height: 380px;
    width: 100%;
    margin-inline: auto;
  }
}
@media (min-width: 1000px) {
  .feld-tafel {
    --ueberstand: max(var(--rand), (100vw - var(--breite-weit)) / 2 + var(--rand));
    width: calc(100% + var(--ueberstand));
    margin-right: calc(-1 * var(--ueberstand));
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}
.feld-tafel-schnitt {
  position: absolute;
  inset: -6% 0;
  display: block;
  transform: translate3d(0, var(--parallax-px, 0px), 0);
  will-change: transform;
}
.feld-tafel-schnitt img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--fokus, 50% 50%);
}
.feld-tafel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(20, 21, 18, 0.62) 0%, rgba(20, 21, 18, 0.18) 34%, transparent 58%);
}
.feld-tafel-kennung {
  position: absolute;
  left: var(--raum-4);
  right: var(--raum-4);
  bottom: var(--raum-4);
  z-index: 2;
  font-size: var(--t-label);
  letter-spacing: var(--sperr-weit);
  text-transform: uppercase;
  color: #F3EFE4;
}
.feld-tafel-punkt { margin-inline: 0.6em; color: var(--p-salbei, var(--akzent)); }
@media (prefers-reduced-motion: reduce) { .feld-tafel-schnitt { transform: none; } }

/* Die Kapitelziffer an der Naht steht rechts — dort läuft die Tafel.
   Auf der Feldseite deshalb in die Mitte. */
.sektion-feldbuehne .naht-nr,
.sektion-verzeichnis .naht-nr { right: auto; left: 50%; }
.sektion-feldbuehne .naht-nr--oben  { transform: translate(-50%, 50%); }
/* Die Bühne läuft in ein Band aus (.sektion:has(+ .sektion--fest)::after,
   z-index 0, später gemalt) — ohne das hier verschluckt der Verlauf die
   obere Ziffernhälfte. */
.sektion-feldbuehne .naht-nr { z-index: 1; }
.sektion-verzeichnis .naht-nr--unten { transform: translate(-50%, -50%); }

/* --- Verzeichnis --- */
/* .hat-licht setzt overflow: hidden — das bricht den klebenden Kopf.
   clip statt hidden, wie beim Register. */
.sektion-verzeichnis.hat-licht { overflow: clip; }
.verzeichnis {
  display: block;
}
.verzeichnis-kopf {
  display: grid;
  gap: var(--raum-4);
  margin-bottom: var(--raum-5);
  align-items: end;
}
@media (min-width: 800px) {
  .verzeichnis-kopf { grid-template-columns: minmax(0, 1fr) auto; }
  .verzeichnis-zahl { justify-items: end; text-align: right; }
}
.verzeichnis-kopf .h2 { margin-bottom: var(--raum-3); max-width: 20ch; }
.verzeichnis-einleitung { max-width: 62ch; }
.verzeichnis-zahl {
  display: grid;
  gap: var(--raum-1);
  color: var(--text-3);
}
.verzeichnis-zahl .zahl {
  font-family: var(--schrift-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(5rem, 9vw, 8.5rem);
  line-height: 0.8;
  letter-spacing: -0.02em;
  color: var(--akzent);
}
.verzeichnis-zahl .zahl-wort { max-width: 24ch; }

.verzeichnis-liste {
  display: grid;
  list-style: none;
  margin: 0;
  padding: 0;
  column-gap: var(--raum-5);
}
@media (min-width: 900px) {
  .verzeichnis-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.verzeichnis-zeile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--raum-3);
  padding: var(--raum-3) 0;
  border-top: 1px solid var(--linie);
  color: var(--text-2);
  transition: opacity 1.8s var(--kurve-sanft), transform 1.4s var(--kurve);
}
@media (min-width: 720px) { .verzeichnis-zeile { padding: var(--raum-4) 0; gap: var(--raum-4); } }
.verzeichnis-nr {
  font-family: var(--schrift-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1;
  color: var(--akzent);
  min-width: 2.1em;
  transition: color var(--dauer-kurz) var(--kurve-sanft);
}
.verzeichnis-text {
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.5;
}

/* --- Kapitelnavigation --- */
.sektion-kapitel { padding-block: var(--raum-6); }
.kapitel-nav {
  display: grid;
  gap: var(--raum-4);
  align-items: center;
}
@media (min-width: 720px) {
  .kapitel-nav { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: var(--raum-5); }
  .kapitel-link--weiter { text-align: right; }
  .kapitel-link--weiter .kapitel-richtung { justify-content: flex-end; }
  .kapitel-link--weiter .kapitel-titel { justify-content: flex-end; }
  .kapitel-alle { justify-self: center; }
}
.kapitel-link {
  display: grid;
  gap: var(--raum-2);
  padding-block: var(--raum-2);
  min-height: 44px;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}
.kapitel-richtung {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  transition: color var(--dauer-kurz) var(--kurve-sanft);
}
.kapitel-richtung .icon {
  width: 20px;
  height: 20px;
  color: var(--akzent);
  transition: transform var(--dauer) var(--kurve);
}
.kapitel-link--zurueck .kapitel-richtung .icon { transform: scaleX(-1); }
.kapitel-titel {
  display: flex;
  align-items: baseline;
  gap: 0.55em;
  font-size: var(--t-h3);
  font-weight: 300;
  letter-spacing: 0.1em;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--text);
  overflow-wrap: break-word;
  hyphens: manual;
}
.kapitel-nr {
  font-family: var(--schrift-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.15em;
  letter-spacing: 0;
  text-transform: none;
  color: var(--akzent);
}
.kapitel-link:hover .kapitel-richtung,
.kapitel-link:focus-visible .kapitel-richtung { color: var(--text); }
.kapitel-link--zurueck:hover .kapitel-richtung .icon { transform: scaleX(-1) translateX(6px); }
.kapitel-link--weiter:hover .kapitel-richtung .icon { transform: translateX(6px); }
.kapitel-link:focus-visible { outline-offset: 6px; }
@media (max-width: 719px) {
  .kapitel-alle { order: 3; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .kapitel-richtung .icon { transition: none; }
  .verzeichnis-zeile { transition: none; }
}


/* ==================================================================
   ARBEITSWEISE — Karten rund und mit Hover (14.09.2026)
   Mobbin: incident.io (Rand färbt sich beim Überfahren), Linear (dunkle
   Karten mit feinem Rand, hellen beim Überfahren auf), Clay (weicher
   Lichtschein hinter der Karte). Hier: Ecken wie Register-Fenster und
   Feld-Tafel, beim Überfahren hebt sich die Karte 4 px, der Rand wird
   Salbei, ein Salbei-Licht folgt dem Zeiger (livera.js setzt --mx/--my).
   ================================================================== */
.arbeit-karte {
  border-radius: var(--kante-tafel);
  overflow: hidden;
  isolation: isolate;
  /* Die Kurzschreibweise ersetzt die aus .blende — Einblendung mitführen.
     Der Lift läuft über `translate`, damit er nicht mit dem transform
     der Einblendung konkurriert. */
  transition: opacity var(--dauer-blende) var(--kurve-sanft),
              transform 1.4s var(--kurve),
              translate var(--dauer) var(--kurve),
              border-color var(--dauer) var(--kurve-sanft),
              box-shadow var(--dauer) var(--kurve-sanft);
}
.arbeit-karte > * { position: relative; z-index: 1; }
.arbeit-karte::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 40%),
    var(--licht-salbei) 0%, transparent 70%);
  transition: opacity var(--dauer) var(--kurve-sanft);
}
@media (hover: hover) {
  .arbeit-karte:hover {
    translate: 0 -4px;
    border-color: var(--linie-akzent);
    box-shadow: var(--kantenlicht), 0 18px 40px rgba(0, 0, 0, 0.22);
  }
  .arbeit-karte--ziel:hover { border-color: var(--akzent); }
  .arbeit-karte:hover::after { opacity: 1; }
  /* Auf Sand ist der Schein sonst ein grauer Fleck. */
  :root[data-thema="hell"] .arbeit-karte:hover::after { opacity: 0.45; }
  .arbeit-karte:hover .arbeit-marke { color: var(--text); }
  :root[data-thema="hell"] .arbeit-karte:hover {
    box-shadow: 0 1px 2px rgba(20, 21, 16, 0.05), 0 18px 40px rgba(20, 21, 16, 0.10);
  }
}
@media (prefers-reduced-motion: reduce) {
  .arbeit-karte:hover { translate: none; }
}


/* ==================================================================
   TERMIN — Outlook-Bridge auf der Erstgespräch-Seite
   Drei Spalten: Gespräch, Tag, live gelesene Zeiten.
   ================================================================== */
.sektion-termin .sektion-kopf { max-width: var(--breite-text); }
.termin {
  display: grid;
  gap: var(--raum-4);
  padding: clamp(var(--raum-3), 3.5vw, var(--raum-5));
  border: 1px solid var(--linie-fein);
  border-radius: var(--kante-tafel);
  background-color: var(--flaeche);
  background-image: var(--flaeche-licht);
  box-shadow: var(--kantenlicht);
}
@media (min-width: 1000px) {
  .termin {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr) minmax(0, 0.85fr);
    column-gap: var(--raum-5);
    align-items: start;
  }
  .termin-info { padding-right: var(--raum-4); border-right: 1px solid var(--linie-fein); }
  .termin-zeiten { padding-left: var(--raum-4); border-left: 1px solid var(--linie-fein); }
  .termin-abschluss, .termin-bestaetigung { grid-column: 1 / -1; }
}
.termin-titel {
  margin: 0 0 var(--raum-3);
  font-size: var(--t-h3);
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.termin-fakten { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7em; color: var(--text-2); }
.termin-fakten li { display: flex; align-items: center; gap: 0.7em; }
.termin-fakten .icon { width: 20px; height: 20px; flex: none; color: var(--akzent); }
.termin-hinweis { margin: var(--raum-4) 0 0; padding-top: var(--raum-3); border-top: 1px solid var(--linie-fein); }
.termin-monat { width: 100%; max-width: 30rem; }
@media (max-width: 999px) { .termin-monat { margin-inline: auto; } }

.termin-monat-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--raum-2); margin-bottom: var(--raum-3); }
.termin-monat-name {
  margin: 0;
  font-family: var(--schrift-serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  color: var(--text);
}
.termin-blaettern {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--linie);
  border-radius: 50%;
  background: transparent;
  color: var(--akzent);
  cursor: pointer;
  transition: border-color var(--dauer-kurz) var(--kurve-sanft), color var(--dauer-kurz) var(--kurve-sanft);
}
.termin-blaettern .icon { width: 20px; height: 20px; }
.termin-blaettern--zurueck .icon { transform: scaleX(-1); }
.termin-blaettern:hover, .termin-blaettern:focus-visible { border-color: var(--akzent); color: var(--text); }
.termin-blaettern[disabled] { opacity: 0.3; cursor: default; }
.termin-blaettern[disabled]:hover { border-color: var(--linie); color: var(--akzent); }

.termin-wochentage, .termin-tage { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.termin-wochentage span {
  padding-bottom: 0.6em;
  text-align: center;
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.termin-tag {
  position: relative;
  aspect-ratio: 1;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--kante-zeile);
  background: transparent;
  color: var(--text-2);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color var(--dauer-kurz) var(--kurve-sanft),
              background-color var(--dauer-kurz) var(--kurve-sanft),
              color var(--dauer-kurz) var(--kurve-sanft);
}
.termin-tag--leer { visibility: hidden; }
.termin-tag--waehlbar { color: var(--text); }
.termin-tag--waehlbar::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--akzent);
}
.termin-tag--waehlbar:hover, .termin-tag--waehlbar:focus-visible { border-color: var(--linie-akzent); background-color: var(--flaeche-hover); }
.termin-tag--heute { border-color: var(--linie); }
.termin-tag[disabled] { color: var(--text-3); opacity: 0.45; cursor: default; }
.termin-tag[aria-pressed="true"] { background: var(--akzent); border-color: var(--akzent); color: var(--text-invers); }
.termin-tag[aria-pressed="true"]::after { background: var(--text-invers); }

.termin-zeiten-kopf {
  margin: 0 0 var(--raum-3);
  min-height: 1.6em;
  font-family: var(--schrift-serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--text-2);
}
.termin-zeiten [data-termin-status] { min-height: 1.5em; }
.termin-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
@media (max-width: 360px) {
  .termin-slots { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1000px) {
  .termin-slots { grid-template-columns: minmax(0, 1fr); max-height: 380px; overflow-y: auto; padding-right: 4px; }
}
.termin-slot {
  min-height: 44px;
  padding: 0.6rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em;
  border: 1px solid var(--linie);
  border-radius: var(--kante-zeile);
  background: transparent;
  color: var(--text);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color var(--dauer-kurz) var(--kurve-sanft),
              background-color var(--dauer-kurz) var(--kurve-sanft),
              color var(--dauer-kurz) var(--kurve-sanft);
}
.termin-slot small { font-size: var(--t-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.termin-slot:hover, .termin-slot:focus-visible { border-color: var(--akzent); }
.termin-slot[disabled] { opacity: 0.4; cursor: default; }
.termin-slot[disabled] span:first-child { text-decoration: line-through; }
.termin-slot[disabled]:hover { border-color: var(--linie); }
.termin-slot[aria-pressed="true"] { background: var(--akzent); border-color: var(--akzent); color: var(--text-invers); }
.termin-slot[aria-pressed="true"] small { color: var(--text-invers); }

.termin-abschluss { display: grid; gap: var(--raum-3); padding-top: var(--raum-4); border-top: 1px solid var(--linie-fein); }
.termin-datenschutz, .termin-abschluss .formular-meldung { grid-column: 1 / -1; }
.termin-abschluss .btn[disabled] { cursor: wait; opacity: 0.65; animation: none; }
@media (min-width: 720px) {
  .termin-abschluss { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--raum-4); }
  .termin-wahl, .termin-abschluss .btn { grid-column: 1 / -1; }
  .termin-abschluss .btn { justify-self: start; width: auto; }
}
.termin-wahl {
  margin: 0;
  font-family: var(--schrift-serif);
  font-style: italic;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  color: var(--text);
}
.termin-bestaetigung {
  display: grid;
  gap: var(--raum-2);
  justify-items: start;
  padding-top: var(--raum-4);
  border-top: 1px solid var(--linie-akzent);
}
.termin-bestaetigung:focus { outline: none; }
.termin-bestaetigung > .icon { width: 32px; height: 32px; color: var(--akzent); }
.termin-bestaetigung-titel { margin: 0; font-size: var(--t-h3); font-weight: 300; letter-spacing: 0.1em; text-transform: uppercase; }
.termin-bestaetigung-text { margin: 0; font-family: var(--schrift-serif); font-style: italic; font-size: 1.2rem; color: var(--text-2); }
/* display: grid würde das hidden-Attribut überstimmen. */
.termin-abschluss[hidden], .termin-bestaetigung[hidden] { display: none; }
/* Demo auf /kontakt/ (inhalt.TERMIN_DEMO): gleiche Kennzeichnung wie .referenz--demo. */
.termin--demo { position: relative; border-style: dashed; border-color: var(--linie-akzent); }
.termin--demo::after {
  content: "Platzhalter";
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.3rem 0.6rem;
  border-top-right-radius: var(--kante-tafel);
  font-size: var(--t-label);
  letter-spacing: var(--sperr-mittel);
  text-transform: uppercase;
  color: var(--akzent-flaeche-text);
  background: var(--akzent-flaeche);
  opacity: 0.85;
}
button.textlink { appearance: none; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .termin-tag, .termin-slot, .termin-blaettern { transition: none; }
}