/* nuara — Marketingseite.
   Dunkler Grund, uebergrosse Typografie, EIN Mint-Akzent.
   Keine Schrift, kein Bild, kein Skript von fremden Hosts — diese Datei
   laedt nichts nach (das behauptet Szene 09 ueber sich selbst, also muss es
   stimmen).

   Aufbau:
     1 Marken-Werte      2 Grundlage       3 Bausteine
     4 Kopf/Fuss         5 Die elf Szenen  6 Die drei Ruhezustaende
   Die Ruhezustaende stehen bewusst zuletzt: sie duerfen alles ueberschreiben.
*/

/* ── 1 Marken-Werte ──────────────────────────────────────────────────── */

:root {
  color-scheme: dark;

  /* Grund und Tiefe. Der Grundton ist derselbe wie theme-color.
     SEIT 19.09.2026 — „Schwarz pur": jeder unbunte Wert dieser Seite ist
     exakt neutral, R = G = B, ohne Ausnahme. Es gibt keine Temperatur mehr,
     weder warm noch kuehl; Licht entsteht nur noch ueber Helligkeit. Mint
     ist die EINZIGE Buntfarbe (plus das Bernstein-Feld im Punktfeld von
     Szene 02, das im Shader steht). Wer hier eine getoente Farbe einsetzt,
     bricht die Variante. */
  --grund:        #050505;
  --grund-tief:   #020202;
  /* Glasflaeche. Die Tafeln dieser Seite sind seit der Politur deckend
     (siehe „Material einer Tafel"); --flor lebt weiter, weil scenes.js die
     Kacheln in den Szenen 06/07 damit fuellt. */
  --flor:         rgba(255, 255, 255, .032);
  /* Die Kante ist reines Weiss mit niedriger Deckkraft — kein Blaustich,
     kein Cremeton. Sie ist der wichtigste Baustein dieser Variante: der
     Kontrast kommt aus ihr und aus fast weisser Schrift, nicht aus einem
     helleren Grund. */
  --kante:        rgba(255, 255, 255, .11);
  --kante-hell:   rgba(255, 255, 255, .26);

  /* Der Koerper einer Tafel — ein Hauch ueber dem Grund (14 gegen 5).
     Mehr Unterschied braucht es nicht, wenn die Oberkante stimmt. */
  --tafel-oben:   #0e0e0e;
  --tafel-kern:   #0a0a0a;
  --tafel-unten:  #060606;

  /* Licht. Die Seite ist nicht schwarz, sie ist dunkel und beleuchtet:
     jede Szene steht in einer eigenen, sehr flachen Lichtpfuetze (2-4 %
     Helligkeit). --stimmung regelt, wie stark die festen Schleier hinter
     allem tragen — ohne Buehne (kein WebGL, reduzierte Bewegung) sind sie
     das EINZIGE Licht und werden hochgedreht (siehe Abschnitt 6). */
  --stimmung:     .85;

  /* Schrift. Drei Lautstaerken, mehr braucht die Seite nicht.
     --schrift-mittel ist bewusst eine Spur dunkler und leiser als
     --schrift: darauf steht der Fliesstext, und Hierarchie entsteht erst,
     wenn zwischen Aussage und Fliesstext Luft ist.
     ACHTUNG: dieser Wert steht als Literal auch in scenes.js
     (Pointe-Hervorhebung, der Zielname in Tafel 3, PILLE_RUHE) — GSAP kann
     keine CSS-Variable interpolieren. Wer hier aendert, zieht die Literale
     dort mit.
     Alle drei Lautstaerken sind gegen die warme Fassung NACHGERECHNET
     (Rec.709) und liegen darueber — „nichts wird blasser" gilt auch fuer
     die leisen Stufen, sonst gewinnt man den Kontrast nur auf dem Papier:
       --schrift        239,0 -> 250,0
       --schrift-mittel 192,1 -> 202,0
       --schrift-leise  138,9 -> 150,0
     Spanne R-B ueberall 0, also exakt neutral. */
  --schrift:      #fafafa;
  --schrift-mittel: #cacaca;
  --schrift-leise:  #969696;

  /* Der eine Akzent. Mint bleibt die einzige Buntfarbe; flaechig NUR auf
     den primaeren Knopfen und dem hervorgehobenen Tarif — nirgends sonst,
     insbesondere nicht auf Flaechen, Linien oder Text ohne Knopf-Funktion.
     ACHTUNG: dieser Wert steht normalisiert (0-1) auch als Literal in
     scenes.js (Fundstelle im Punktfeld von Szene 02) — GSAP/WebGL koennen
     keine CSS-Variable interpolieren. Wer hier aendert, zieht das Literal
     dort mit. */
  --mint:         #55d6ae;
  --mint-tief:    #2a9a7c;
  --mint-hauch:   rgba(85, 214, 174, .12);

  /* Schriftstapel: nur was auf dem Geraet schon liegt.
     Mac/iOS -> SF, Windows -> Segoe UI Variable, sonst Roboto/Arial. */
  --stapel-text: -apple-system, BlinkMacSystemFont, "SF Pro Text",
                 "Segoe UI Variable Text", "Segoe UI", Inter, Roboto,
                 "Helvetica Neue", Arial, sans-serif;
  --stapel-gross: -apple-system, BlinkMacSystemFont, "SF Pro Display",
                 "Segoe UI Variable Display", "Segoe UI", Inter, Roboto,
                 "Helvetica Neue", Arial, sans-serif;

  /* Mass und Rand. Der Seitenrand waechst mit dem Fenster, der Textblock
     nicht — sonst werden Zeilen unlesbar lang.
     ALLE Hoehen-Anteile dieser Datei nutzen svh, nie vh: auf iOS faehrt
     Safaris Adressleiste ein und aus und aendert dabei window.innerHeight
     mitten im Scrollen. Plain vh friert zwar neuerdings auf die grosse
     (leistenlose) Ansicht ein, svh ist aber die vom Spec garantiert
     KONSTANTE kleine Ansicht — dieselbe Referenz, die main > section schon
     fuer min-height:100svh verwendet (Task 7). Ein Mix aus vh- und
     svh-Hoehen in derselben Seite liess scrollHeight beim Ein-/Ausfahren
     der Leiste schrumpfen, worauf der Browser scrollY herunterklemmt —
     das ist der dokumentierte Seitenende-Sprung (siehe Scrollsprung-iOS-
     Report). */
  --rand:      clamp(1.5rem, 5.5vw, 7.5rem);
  --luft:      clamp(4.5rem, 11svh, 9rem);      /* Innenabstand einer Szene */
  --mass:      74rem;                          /* Breite einer Szene       */
  --mass-text: 58ch;                           /* Breite eines Absatzes    */
  --mass-eng:  44ch;

  --radius:     18px;
  --radius-klein: 12px;
}

/* ── 2 Grundlage ─────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  /* clip statt hidden: verhindert den waagerechten Ausbruch, macht das
     Wurzelelement aber NICHT zum Scrollbehaelter — sonst waeren sticky,
     100svh und die Scroll-Mechanik aus Task 7 kaputt. */
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

/* Rueckwaertssprung am Dokumentende (Bugreport 29.09.2026): Lenis haengt
   NUR am Zeigegeraet (nuara.js prueft dasselbe "(hover: hover)"), faengt
   dort aber jedes Wheel-Delta ab und dreht es 1:1 in echtes Scrollen um —
   ohne this.options.overscroll zu greifen, denn diese Bremse in Lenis
   wirkt laut Quelltext nur bei einem eigenen wrapper-Element, nicht beim
   window. Das elastische Zurueckfedern, das Trackpads am Seitenende
   erzeugen, bleibt damit ungefiltert: was ohne Lenis nur ein optischer
   Gummiband-Effekt waere (die Engine haelt scrollTop fest, animiert nur
   die Anzeige), wird zu einer echten Rueckwaertsbewegung. Diese Regel
   nimmt dem Rand-Federn die Grundlage, bevor es als Wheel-Delta bei Lenis
   ankommt — auf Touch-Geraeten (kein Lenis, hover:none) bleibt das native
   Federn beim Erreichen des Endes unangetastet. */
@media (hover: hover) {
  html, body { overscroll-behavior-y: none; }
}

body {
  margin: 0;
  font-family: var(--stapel-text);
  font-size: clamp(1rem, .95rem + .25vw, 1.1rem);
  line-height: 1.65;
  color: var(--schrift);

  /* Das Licht der GANZEN Seite liegt hier, nicht in den Szenen: der
     Hintergrund des body wird auf die Leinwand hochgereicht und ist damit
     das einzige Element, das ueber die volle Fensterbreite UND die volle
     Dokumenthoehe reicht — ohne 100vw (Scrollbalken!) und ohne dass
     irgendwo eine senkrechte Kante entstehen kann.
     Der Wellen-Rhythmus bleibt — die elf Szenen sollen als Raeume lesbar
     bleiben —, aber ohne jede Temperatur: seit „Schwarz pur" steht ueberall
     dasselbe neutrale Weiss bei 1-2 %. Was frueher Farbe war (bernstein hier,
     blaeulich-kuehl dort), ist jetzt nur noch Helligkeit. Beim Scrollen liest
     sich das als Gang durch verschieden helle Raeume statt als schwarze
     Roehre. */
  background-color: var(--grund);
  background-image:
    linear-gradient(180deg,
      rgba(255, 255, 255, .020) 0%,
      rgba(255, 255, 255, .007) 7%,
      rgba(255, 255, 255, 0)    13%,
      rgba(255, 255, 255, .012) 22%,
      rgba(255, 255, 255, 0)    31%,
      rgba(255, 255, 255, .016) 41%,
      rgba(255, 255, 255, 0)    50%,
      rgba(255, 255, 255, .011) 59%,
      rgba(255, 255, 255, 0)    67%,
      rgba(255, 255, 255, .014) 77%,
      rgba(255, 255, 255, 0)    85%,
      rgba(255, 255, 255, .018) 94%,
      rgba(255, 255, 255, .005) 100%),
    radial-gradient(78% 22% at 50% 0%, rgba(255, 255, 255, .030), transparent 72%);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Zwei feste Schleier — Tiefe statt Farbe. Sie haengen am Fenster, nicht am
   Dokument: dadurch wandert das Licht beim Scrollen ueber die Szenen hinweg.
   Liegt fest hinter allem und faengt nie einen Klick ab.
   Seit „Schwarz pur" tragen sie nur noch Helligkeit, dafuer eine haertere
   Randabdunklung (.62 statt .38). Das Bild wird dadurch nicht heller,
   sondern in der Mitte klarer und aussen schwarz. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: var(--stimmung);
  background:
    radial-gradient(80% 50% at 15% 105%, rgba(255, 255, 255, .026), transparent 70%),
    radial-gradient(55% 38% at 96% 38%, rgba(255, 255, 255, .018), transparent 70%),
    radial-gradient(120% 70% at 50% 50%, transparent 40%, rgba(0, 0, 0, .62) 100%);
}

/* Die WebGL-Buehne liegt hinter dem Inhalt und ist reine Stimmung. */
#buehne {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

img, canvas, audio, video, svg { max-width: 100%; }

/* Das Skript blendet Bereiche mit [hidden] um. Ohne !important wuerde jede
   display-Regel von uns das aushebeln und die Demo zeigte alles gleichzeitig. */
[hidden] { display: none !important; }

h1, h2, h3 {
  font-family: var(--stapel-gross);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}

p, ul, ol, figure { margin: 0; }
ul { list-style: none; padding: 0; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: var(--mint); color: var(--grund-tief); }

/* ── 3 Bausteine ─────────────────────────────────────────────────────── */

/* Die Szene. Jede bekommt eine volle Bildschirmhoehe, damit die
   Szenenwechsel aus Task 7/8 ueberhaupt Platz zum Wirken haben. */
main > section {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.5rem, 3.5svh, 2.75rem);
  min-height: 100svh;
  padding: var(--luft) var(--rand);
  max-width: calc(var(--mass) + 2 * var(--rand));
  margin-inline: auto;
  width: 100%;
  background-repeat: no-repeat;
}

main > section > * { min-width: 0; }

/* Die Lichtpfuetze einer Szene.
   WARUM RADIAL UND MITTIG: der Kasten einer Szene ist schmaler als das
   Fenster (max-width + margin:auto). Ein senkrechter Verlauf haette darum
   an beiden Seiten eine sichtbare Kante, und ein Verlauf, der am oberen
   oder unteren Rand noch Farbe hat, haette eine waagerechte. Ein Radial,
   das VOR den eigenen Raendern auf null faellt, hat weder das eine noch
   das andere — es setzt nur einen Lichtschwerpunkt, und die Naht zur
   naechsten Szene ist per Bauart weich.
   Die Werte bleiben unter 5 %: man soll es beim Scrollen spueren, nicht
   als Flaeche sehen.

   DIE REGEL, DIE DAZUGEHOERT — und die diese Zeilen bis 14.09.2026 gebrochen
   haben (Martins Befund "links neben der Hook ist es dunkler"): ein Radial
   faellt nur dann wirklich vor dem eigenen Rand auf null, wenn der Abstand
   des Mittelpunkts zum naeheren Rand mindestens so gross ist wie der
   Farbauslauf. In Zahlen, je Achse:

       min(MITTE, 100% - MITTE)  >=  AUSLAUF x RADIUS

   #szene-nacht stand auf "74% 46% at 30% 54%, … transparent 72%":
   30 % Abstand nach links gegen 0,72 x 74 % = 53 % Auslauf. Der Schatten war
   an der linken Kante des Szenenkastens noch zu 4/10 da und wurde dort hart
   abgeschnitten — bei rgba(2,5,4,.58) sind das gemessene 2,2 von 255
   Helligkeit auf einen Pixel, ueber 900 Pixel Hoehe. Die Leinwand und der
   body-Verlauf laufen ueber das ganze Fenster, also las sich die Kante als
   "die Animation hoert hier auf". Sechs weitere Szenen hatten denselben
   Fehler auf ihrer Seite (bis 2,8 von 255) — auch bei 6 % Alpha ist das
   sichtbar, weil helle Farbe auf fast schwarzem Grund liegt.
   tests/test_marketing_claims.py rechnet die Ungleichung jetzt nach.
   Der Hero steht deshalb mittig: seine Zeile laeuft ueber die ganze Breite,
   ein Schatten mit Schwerpunkt links haette sie nur halb getragen. */
/* Der Hero ist die Ausnahme: hier faellt das Licht von oben (der Verlauf im
   body), und die Szene setzt einen WEICHEN SCHATTEN unter die Zeilen. Auf
   dem Handy steht die grosse Zeile sonst mitten im dichtesten Sternenfeld
   und franst aus — der Schatten ist kein Kasten, sondern eine Verdunklung,
   die vor den eigenen Raendern ausgeht. */
/* Dieselbe Choreografie wie vorher, komplett entfaerbt: keine Temperatur,
   nur Helligkeit. Nur die Abschlussszene behaelt Mint — dort steht der Knopf.
   Die Geometrie (Radius, Mitte, Auslauf) bleibt Zeile fuer Zeile unveraendert,
   damit tests/test_marketing_claims.py weiter dieselbe Ungleichung nachrechnet. */
#szene-nacht        { background-image: radial-gradient(66% 46% at 50% 54%, rgba(0, 0, 0, .62), transparent 72%); }
#szene-raeume       { background-image: radial-gradient(34% 42% at 76% 46%, rgba(255, 255, 255, .026), transparent 70%); }
#szene-verdichtung  { background-image: radial-gradient(56% 40% at 50% 50%, rgba(255, 255, 255, .030), transparent 68%); }
#szene-briefing     { background-image: radial-gradient(40% 44% at 72% 50%, rgba(255, 255, 255, .028), transparent 70%); }
#szene-obacht       { background-image: radial-gradient(42% 42% at 30% 50%, rgba(255, 255, 255, .024), transparent 70%); }
#szene-herkunft     { background-image: radial-gradient(54% 42% at 62% 48%, rgba(255, 255, 255, .026), transparent 70%); }
#szene-antwort      { background-image: radial-gradient(50% 40% at 34% 50%, rgba(255, 255, 255, .024), transparent 68%); }
#szene-moment       { background-image: radial-gradient(45% 44% at 68% 50%, rgba(255, 255, 255, .026), transparent 70%); }
#szene-daten        { background-image: radial-gradient(40% 42% at 28% 50%, rgba(255, 255, 255, .022), transparent 70%); }
#szene-eintritt     { background-image: radial-gradient(60% 44% at 50% 48%, rgba(255, 255, 255, .028), transparent 70%); }
#szene-abschluss    { background-image: radial-gradient(56% 46% at 50% 50%, rgba(85, 214, 174, .085), transparent 68%); }

/* Ueberschrift einer Szene — gross, aber unter dem Hero. */
main > section > h2 {
  font-size: clamp(2.1rem, 1.1rem + 4.1vw, 4.6rem);
  line-height: 1.04;
  max-width: 18ch;
}

/* Der Strich ueber der Ueberschrift.
   Eine Kickerzeile waere Text und damit eine Aenderung am Inhalt — dieser
   Strich leistet dasselbe ohne ein Wort: er setzt die Ueberschrift ab,
   gibt ihr eine Oberkante und bringt den einen Akzent in jede Szene.
   #szene-obacht braucht hier keine eigene Zeile mehr: ihre Ueberschrift
   „So arbeitet nuara fuer dich." ist seit dem 19.09.2026 ein direktes Kind
   von section und trifft main > section > h2::before von selbst — die
   beiden Unterueberschriften (jetzt h3, in Szene 09/10-Manier) bekommen den
   Strich bewusst nicht, genau wie .zusagen h3 und .tarif h3 auch keinen
   haben. */
main > section > h2::before {
  content: "";
  display: block;
  width: 2.6rem;
  height: 2px;
  margin-bottom: clamp(1rem, 2.2svh, 1.6rem);
  border-radius: 2px;
  background: linear-gradient(90deg, var(--mint), rgba(85, 214, 174, .06));
}

/* Der Abschluss hat schon eine gesperrte Zeile ueber der Ueberschrift —
   ein zweites Signal an derselben Stelle waere eins zu viel. */
#szene-abschluss h2::before { display: none; }

/* ── Material einer Tafel ─────────────────────────────────────────────
   Preistafel, Demo-Karte und die Karte in Szene 08 sind
   dasselbe Ding: eine Flaeche, die vor dem Grund steht. Drei Schichten
   machen das aus, eine allein reicht nie:
     Flaeche  ein eigener, DECKENDER Koerper (heller an der Oberkante,
              dunkler an der Unterkante). Deckend ist keine Kleinigkeit:
              waere die Flaeche durchscheinend, schiene die Verlaufskante
              unten mit durch die ganze Karte — statt einer Kante haette
              man einen hellen Schleier ueber der Tafel
     Kante    1 px, aber als VERLAUF: oben Licht, unten fast nichts.
              Deshalb liegt sie als zweiter Hintergrund in der border-box
              und nicht in border-color — eine Kante in einer Farbe sieht
              gedruckt aus, eine mit Verlauf sieht gebaut aus
     Licht    ein Schein direkt unter der Oberkante und ein weicher,
              breiter Schatten darunter, der die Tafel abhebt
   .klassen li bekommt das bewusst NICHT: scenes.js animiert dort
   borderColor inline, und eine Verlaufskante haette keine.
   Die Zusagen in Szene 09 bekommen es seit dem Umbau ebenfalls nicht
   mehr: vier gleiche Tafeln nebeneinander lasen sich als Merkmal-Raster,
   und ein Raster verkauft — eine Zusage soll ruhig dastehen. */
.demo-card,
.tarif {
  border: 1px solid transparent;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .034), rgba(255, 255, 255, .008) 38%,
                            rgba(255, 255, 255, 0) 100%) padding-box,
    linear-gradient(180deg, var(--tafel-oben) 0%, var(--tafel-kern) 56%,
                            var(--tafel-unten) 100%) padding-box,
    linear-gradient(170deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .10) 32%,
                            rgba(255, 255, 255, .035) 100%) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 1px 2px rgba(0, 0, 0, .7),
    0 38px 74px -44px rgba(0, 0, 0, 1);
}

/* ── DER Knopf ────────────────────────────────────────────────────────
   Vier Stellen fuehren dieselbe Handlung aus (Kopfzeile, Demo, der
   hervorgehobene Tarif, der Abschluss) — also sehen sie gleich aus und
   sind auf jedem Bildschirmfoto als der eine Knopf lesbar.
   Mint als Flaeche, dunkle Schrift, eine feine helle Oberkante (so faellt
   Licht auf einen Koerper) und eine dunkle Unterkante. Der Schein darunter
   ist breit und schwach, nicht eng und grell — sonst leuchtet der Knopf,
   statt zu liegen. Beim Zeigen wird er heller, er springt nicht: eine
   Bewegung an dieser Stelle wirkt billig. */
.site-header .cta,
.demo-btn,
.cta-gross,
.tarif-hervorgehoben .tarif-cta {
  color: #04120e;
  border: 0;
  background-color: var(--mint);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .32),
                                            rgba(255, 255, 255, 0) 46%,
                                            rgba(4, 30, 24, .1));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    inset 0 -1px 0 rgba(4, 24, 19, .25),
    0 1px 2px rgba(0, 0, 0, .45),
    0 20px 46px -26px rgba(85, 214, 174, .5);
  transition: box-shadow .3s ease, filter .3s ease;
}

.site-header .cta:hover,
.demo-btn:hover:not([disabled]),
.cta-gross:hover,
.tarif-hervorgehoben .tarif-cta:hover {
  filter: brightness(1.07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    inset 0 -1px 0 rgba(4, 24, 19, .25),
    0 1px 2px rgba(0, 0, 0, .45),
    0 26px 56px -24px rgba(85, 214, 174, .62);
}

/* Der Gedanke der Szene: eine Stufe groesser und heller als der Fliesstext. */
.these {
  font-size: clamp(1.15rem, 1rem + .8vw, 1.7rem);
  line-height: 1.45;
  letter-spacing: -.012em;
  color: var(--schrift);
  max-width: var(--mass-text);
  text-wrap: pretty;
}

/* Fliesstext ist leiser als die Aussage darueber. */
main > section > p,
main > section article > p {
  color: var(--schrift-mittel);
  max-width: var(--mass-text);
  text-wrap: pretty;
}

/* Der Metall-Verlauf im Buchstaben steht bei den Stellen, die ihn tragen
   (Hero, Zahlen, Abschluss) — jeweils hinter einem @supports, damit Text
   ohne background-clip schlichter wird statt unsichtbar. */

/* ── 4 Kopf und Fuss ─────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 4vw, 3rem);
  padding: .9rem var(--rand);
  background: linear-gradient(180deg, rgba(3, 3, 3, .93), rgba(3, 3, 3, .62));
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--kante);
}

/* Der Boden der Kopfzeile.
   Ohne ihn schwimmt sie ueber hellen Sternenfeldern: die Haarlinie allein
   trennt nicht, wenn dahinter etwas leuchtet. Ein kurzer Verlauf unter der
   Kante gibt ihr Gewicht, ohne einen Balken zu zeichnen. Er liegt ausserhalb
   der Kopfzeile und darf nie einen Klick abfangen. */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 28px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 3, 3, .5), rgba(3, 3, 3, 0));
}

/* Die Wortmarke ist seit 14.09.2026 das echte Logo, kein gesetzter Text.
   Der Mint-Punkt von frueher ist damit weg: das Logo bringt seine eigenen
   Klangwellen mit, und zwei Akzente nebeneinander waeren einer zu viel. */
.brand {
  display: flex;
  align-items: center;
  margin-right: auto;
  text-decoration: none;
  /* Ohne flex:none quetscht die Kopfzeile das Bild auf schmalen Geraeten
     zusammen — die Hoehe bleibt, die Breite nicht, und die Buchstaben
     werden schmal. Bei Text fiel das nie auf, bei einem Bild sofort. */
  flex: none;
}

/* Die Hoehe steht hier, die Breite folgt dem Seitenverhaeltnis. Die
   ausgelieferte Datei ist 280 x 65 px — bei 1.6 rem Hoehe (~26 px) ist das
   Faktor 2,7 und damit auf jedem Retina-Schirm noch scharf. width/height am
   <img> stehen nur fuer den Platzhalter beim Laden (die Kopfzeile soll nicht
   springen), nicht fuer die Darstellung. */
.brand img {
  display: block;
  height: 1.6rem;
  width: auto;
}

.site-header nav {
  display: flex;
  gap: clamp(1rem, 2.2vw, 2rem);
}

.site-header nav a {
  font-size: .92rem;
  color: var(--schrift-mittel);
  text-decoration: none;
  transition: color .25s ease;
}

.site-header nav a:hover { color: var(--schrift); }

.site-header .cta {
  flex: none;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  padding: .66em 1.25em;
  border-radius: 999px;
}

/* ── Sprungmenue fuer schmale Geraete ────────────────────────────────
   Unter 47 rem verschwindet die Leiste (siehe Abschnitt "Schmale
   Geraete") — bis heute ersatzlos. Der Burger und das Overlay hier sind
   ihr Ersatz.

   Beide starten auf display:none und werden NUR unter `.js` und nur im
   schmalen Fenster eingeblendet. Das ist der ganze Ohne-JavaScript-Plan:
   ein Schalter ohne Schaltung ist kaputt, ein :target-Overlay waere die
   zweite Mechanik fuer dieselbe Sache — und ein Vollbild-Kasten, der
   ohne JS im Dokument steht, ist genau die Art von Ding, die der
   Fallback-E2E in einer der fuenf Lagen ueber dem Inhalt findet. */

.menue-knopf {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;      /* 44 px — die kleinste Flaeche, die ein Daumen sicher trifft */
  height: 2.75rem;
  margin: -.5rem -.7rem -.5rem 0;   /* optisch buendig, Trefferflaeche bleibt */
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--schrift-mittel);
}

.menue-knopf:hover { color: var(--schrift); }

/* Drei Striche aus einem Element: der mittlere ist der Balken selbst,
   die beiden anderen haengen daran. */
.menue-balken,
.menue-balken::before,
.menue-balken::after {
  display: block;
  width: 1.25rem;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
}

.menue-balken { position: relative; }

.menue-balken::before,
.menue-balken::after {
  content: "";
  position: absolute;
  left: 0;
}

.menue-balken::before { top: -6px; }
.menue-balken::after  { top:  6px; }

/* Das Overlay. Deckend, nicht durchscheinend: was darunter liegt, soll
   waehrenddessen nicht mitlesen. Neutraler Grund wie die Nachtszene, das
   Licht kommt von oben — dieselbe Lichtfuehrung wie auf der Seite. */
.sprungmenue {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  padding: .9rem var(--rand) max(2rem, env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: #040404;
  background-image:
    radial-gradient(110% 46% at 50% 0%, rgba(255, 255, 255, .035), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, .016), rgba(255, 255, 255, 0) 38%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}

/* Verborgen ist verborgen: das display:flex oben wuerde das
   hidden-Attribut ueberstimmen — dagegen steht die globale Regel
   `[hidden] { display: none !important }` aus Abschnitt 2. Sie ist der
   Grund, warum das Overlay ohne JavaScript nicht im Weg steht; wer sie
   dort entfernt, oeffnet es in jeder Lage. */

.sprungmenue.ist-offen { opacity: 1; pointer-events: auto; }

/* Die Kopfzeile des Overlays ist so hoch wie die Kopfzeile der Seite:
   das X steht dann genau dort, wo eben noch der Burger war. */
.sprungmenue-kopf {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 2.75rem;
  margin-bottom: 2rem;
}

.sprungmenue-zu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -.7rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--schrift-mittel);
}

.sprungmenue-zu:hover { color: var(--schrift); }

.sprungmenue-zu span { position: relative; display: block; width: 1.25rem; height: 1.25rem; }

.sprungmenue-zu span::before,
.sprungmenue-zu span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
}

.sprungmenue-zu span::before { transform: rotate(45deg); }
.sprungmenue-zu span::after  { transform: rotate(-45deg); }

.sprungmenue nav {
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;
}

/* Grosse Ziele untereinander, je eine Haarlinie darunter. Die Linie traegt
   die Ordnung, damit die Namen ohne Kasten, Punkt oder Pfeil auskommen. */
.sprungmenue nav a {
  font-family: var(--stapel-gross);
  font-size: clamp(1.7rem, 9vw, 2.3rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--schrift);
  text-decoration: none;
  padding: .62em 0;
  border-bottom: 1px solid var(--kante);
  transition: color .25s ease;
}

.sprungmenue nav a:first-child { border-top: 1px solid var(--kante); }
.sprungmenue nav a:active { color: var(--schrift-mittel); }

/* Der Knopf sitzt unten — nach den Zielen, nicht zwischen ihnen. `auto`
   schiebt ihn auf hohen Schirmen an den Fuss, auf kurzen bleibt er direkt
   unter dem letzten Ziel stehen (mit Abstand, nicht angeklebt). */
.sprungmenue .cta-gross {
  margin-top: auto;
  padding-top: 1.1em;
  padding-bottom: 1.1em;
  text-align: center;
}

/* Der Fuss ist der dunkelste Punkt der Seite — das Licht laeuft aus.
   Die Trennlinie steht als Verlauf im Hintergrund, damit sie in der Mitte
   traegt und an den Raendern verschwindet. */
footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 3rem var(--rand) 3.5rem;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, .02), var(--kante) 30%,
                           var(--kante) 70%, rgba(255, 255, 255, .02)),
    linear-gradient(180deg, rgba(0, 0, 0, .4), rgba(0, 0, 0, 0) 40%);
  background-size: 100% 1px, 100% 100%;
  background-repeat: no-repeat;
  color: var(--schrift-leise);
  font-size: .88rem;
}

footer a { transition: color .25s ease; }
footer a:hover { color: var(--schrift-mittel); }

footer nav { display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; }
footer a { text-decoration: none; }
footer p { margin: 0; }

/* Zwei Nav-Bloecke (Weiterfuehrend, Rechtliches) sollen als eine
   zusammenhaengende Zeile wirken statt einzeln ueber "justify-content:
   space-between" auseinandergezogen zu werden. */
.footer-links { display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; }

/* ── 5 Die elf Szenen ────────────────────────────────────────────────── */

/* Szene 01 — Waehrend du schlaefst, liest nuara. -------------------- */

#szene-nacht { justify-content: center; gap: clamp(2rem, 5svh, 3.5rem); }

#szene-nacht h1 {
  font-size: clamp(3rem, 1rem + 10.5vw, 9.5rem);
  line-height: .93;
  letter-spacing: -.042em;
  font-weight: 600;
  max-width: 14ch;
  color: var(--schrift);
}

#szene-nacht h1 .line { display: block; }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  #szene-nacht h1 {
    background-image: linear-gradient(176deg, #ffffff 2%, #e5e5e5 34%, #9c9c9c 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
  }
}

#szene-nacht p {
  font-size: clamp(1.05rem, .95rem + .6vw, 1.4rem);
  line-height: 1.55;
  max-width: var(--mass-eng);
}

/* Szene 02 — Relevanz kann man nicht abonnieren. --------------------- */

#szene-raeume { gap: clamp(2rem, 5svh, 3.25rem); }

.raeume {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: clamp(1rem, 2.5vw, 2.25rem);
}

/* Die Linie ueber dem Wort ist ein Verlauf, keine Leiste: links Licht,
   rechts fast nichts. Deshalb liegt sie als Hintergrund und nicht als
   border-top — eine durchgehende Haarlinie in einer Farbe sieht nach
   Tabelle aus. */
.raeume li {
  padding-top: 1rem;
  background-image: linear-gradient(90deg, var(--kante-hell), rgba(255, 255, 255, .03));
  background-size: 100% 1px;
  background-repeat: no-repeat;
  font-family: var(--stapel-gross);
  font-size: clamp(1.15rem, .95rem + .75vw, 1.65rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  text-wrap: balance;
  color: var(--schrift);
}

/* NUR wenn die Buehne laeuft (scenes.js setzt die Klasse, siehe dort):
   die drei Zeilen sind dann nicht mehr eine Liste, sondern die
   Beschriftungen von drei Lichtfeldern — und ein Feld braucht Platz unter
   seinem Wort. Ohne Buehne (kein WebGL, reduzierte Bewegung, kein
   JavaScript) bliebe hier eine Luecke, in der nichts steht; deshalb haengt
   der Raum an der Klasse und nicht an der Liste.
   Die Verschiebung der Zeilen setzt scenes.js als transform — im
   Ruhezustand steht hier nichts absolut Positioniertes. */
.buehne-laeuft .raeume {
  row-gap: clamp(4rem, 15svh, 8rem);
  padding-bottom: clamp(2.5rem, 8svh, 6rem);
}

/* Die Enthuellung (Abschnitt 6) legt auf jedes [data-reveal] einen
   Uebergang von .7s auf opacity und transform. Hier ist das schaedlich:
   scenes.js setzt beide Werte JE BILD neu, und ein Uebergang laesst die
   Beschriftung ihrem Feld dann um eine dreiviertel Sekunde hinterherhinken
   — beim Springen im Dokument stand das Wort noch hell und unverschoben da,
   waehrend sein Feld schon zusammengefallen war. Wer die Szene selbst
   inszeniert, braucht keine Enthuellung mehr. */
.buehne-laeuft .raeume li { transition: none; }

/* Zwei echte Treffer, als haette die Seite sie gerade gefunden.
   Die Mintkante links glimmt nach innen — ein Fund, kein Zitatkasten.
   Sie sind das Ziel der zwei Punkte: jeder Punkt landet an der Mintkante
   SEINER Karte (scenes.js rechnet die Stelle aus dieser Kante aus). Darum
   stehen sie versetzt und mit Luft — eingequetscht waere die Landung nicht
   zu sehen. */
.treffer {
  position: relative;
  max-width: 46ch;
  padding: 1.4rem 1.7rem;
  border: 1px solid var(--kante);
  border-left: 2px solid var(--mint);
  border-radius: 4px var(--radius-klein) var(--radius-klein) 4px;
  background:
    linear-gradient(90deg, rgba(85, 214, 174, .13), rgba(255, 255, 255, .026) 55%),
    linear-gradient(180deg, rgba(18, 18, 18, .7), rgba(7, 7, 7, .82));
  color: var(--schrift);
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
  line-height: 1.5;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05),
    inset 12px 0 24px -20px rgba(85, 214, 174, .9),
    0 24px 50px -40px rgba(0, 0, 0, .95);
}

/* Der zweite Treffer steht rechts und tiefer — zwei Fundstuecke, nicht
   eine Liste. Die Diagonale ist auch die Bahn der zwei Punkte: sie laufen
   aus derselben Wolke nach links unten und nach rechts unten auseinander. */
.treffer + .treffer {
  margin-left: auto;
  margin-top: clamp(.5rem, 2.5svh, 2rem);
}

/* Szene 03 — Verdichtung ------------------------------------------- */

/* Die einzige Szene ohne volle Bildhoehe. Sie ist eine Pointe, kein Raum:
   der Satz davor ("Dass es zwei, drei sind und nicht zwanzig") und die drei
   Zahlen gehoeren zusammengelesen. Mit min-height:100svh standen 480 Pixel
   Leere dazwischen — Szenenrand unten, Szenenrand oben und der Rest, den
   das Zentrieren einer kurzen Szene uebrig laesst. Jetzt bleibt der
   Szenenrand und sonst nichts. */
#szene-verdichtung {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  align-content: center;
  gap: clamp(2.5rem, 5vw, 4rem);
  min-height: auto;
  padding-block: clamp(3rem, 8svh, 5.5rem);
}

.zahl { display: flex; flex-direction: column; gap: .35rem; }

.zahl b {
  font-family: var(--stapel-gross);
  /* Untergrenze 5.5rem: auf dem Handy soll die Zahl die Szene tragen,
     nicht bloss eine grosse Ziffer sein. */
  font-size: clamp(5.5rem, 1rem + 12vw, 11rem);
  font-weight: 600;
  line-height: .85;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
  color: var(--schrift);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .zahl b {
    background-image: linear-gradient(176deg, #ffffff 2%, #dedede 42%, #828282 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
  }

  /* Die Null ist die Pointe der Szene, nicht eine Zahl unter dreien.
     Nur sie bekommt den Akzent. */
  .zahl b[data-count="0"] {
    background-image: linear-gradient(176deg, #b3ecda 2%, var(--mint) 45%, var(--mint-tief) 100%);
  }
}

.zahl span {
  color: var(--schrift-mittel);
  font-size: clamp(.95rem, .9rem + .2vw, 1.05rem);
  line-height: 1.45;
  max-width: 24ch;
}

/* Szene 04 — Instant-Demo ------------------------------------------ */

#szene-briefing { gap: clamp(2.25rem, 5svh, 3.5rem); }

.usp {
  font-family: var(--stapel-gross);
  font-size: clamp(1.35rem, 1rem + 1.5vw, 2.3rem);
  font-weight: 500;
  line-height: 1.26;
  letter-spacing: -.022em;
  color: var(--schrift);   /* Leitsatz, nicht Fliesstext — muss hell sein */
  max-width: 24ch;
  text-wrap: balance;
}

/* Ab Grossformat stehen Leitsatz und Demo nebeneinander: die Szene ist die
   einzige, in der etwas zu tun ist — das Formular gehoert ins Blickfeld,
   nicht unter fuenf Zeilen Text. */
@media (min-width: 64rem) {
  #szene-briefing {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    align-content: center;
    column-gap: clamp(2.5rem, 5vw, 5rem);
  }

  .usp { max-width: 22ch; }
  .demo-card { max-width: none; }
}

/* Material siehe Abschnitt 3. Hier steht nur, was diese Tafel eigen hat:
   Groesse, Polsterung und ein Mint-Hauch, weil in dieser Szene etwas zu
   tun ist. */
.demo-card {
  width: 100%;
  max-width: 44rem;
  padding: clamp(1.5rem, 3.2vw, 2.5rem);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 1px 2px rgba(0, 0, 0, .5),
    0 44px 90px -52px rgba(0, 0, 0, .95),
    0 0 80px -40px rgba(85, 214, 174, .3);
}

.demo-row {
  display: grid;
  /* 15rem: passen Rolle und Branche nicht beide unbeschnitten nebeneinander
     (schmale Karte, langer Platzhalter), stapeln sie sich lieber. */
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: .75rem;
  margin-bottom: .75rem;
}

/* Ein Feld ist das Gegenteil einer Tafel: es liegt TIEFER als die Karte.
   Deshalb dunkle Flaeche, ein Schatten von der Oberkante nach innen und
   die helle Haarlinie unten statt oben — dasselbe Licht, andere Richtung. */
.demo-inp {
  width: 100%;
  min-width: 0;
  font: inherit;
  font-family: var(--stapel-text);
  color: var(--schrift);
  background: rgba(0, 0, 0, .26);
  border: 1px solid rgba(255, 255, 255, .09);
  border-bottom-color: rgba(255, 255, 255, .16);
  border-radius: var(--radius-klein);
  padding: .85rem 1rem;
  resize: vertical;
  box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, .9);
  transition: border-color .25s ease, box-shadow .25s ease;
}

/* rows="2" reicht dem Platzhalter auf dem Handy nicht — er braucht drei
   Zeilen und wurde sonst mitten im Wort abgeschnitten. */
textarea.demo-inp { min-height: 7rem; line-height: 1.5; }

.demo-inp::placeholder { color: var(--schrift-leise); }

.demo-inp:focus {
  border-color: rgba(85, 214, 174, .45);
  outline-offset: 1px;
  box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, .9), 0 0 0 3px rgba(85, 214, 174, .1);
}

/* Flaeche, Kante und Licht stehen bei „DER Knopf" (Abschnitt 3). */
.demo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: .5rem;
  font: inherit;
  font-family: var(--stapel-text);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  border-radius: 999px;
  padding: 1.1em 1.6em;
}

.demo-btn[disabled] { opacity: .55; cursor: default; }

.demo-hint {
  margin: .9rem 0 0;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--schrift-leise);
}

.demo-step {
  margin: 1.25rem 0 .6rem;
  font-size: .95rem;
  color: var(--schrift-mittel);
}

.demo-bar-track {
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
  overflow: hidden;
}

.demo-bar-fill {
  height: 100%;
  width: 4%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--mint-tief), var(--mint));
  transition: width .5s ease;
}

#ldAudio { width: 100%; margin-top: .5rem; }

/* Dieselbe Pillen-Bauart wie .klassen in Szene 06 ("Jede Aussage hat einen Absender."), nur
   kompakter — hier stehen mehrere Chips in einer engen Karte statt fuenf
   grosser Kacheln in voller Breite. Keine eigene Farbe je Klasse (wie auf
   der Teilen-Seite): das Etikett ist hier ein Wort, keine Bewertung. */
.demo-quellen {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.demo-quelle {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .8rem;
  border: 1px solid var(--kante);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .012) 60%),
    linear-gradient(180deg, rgba(18, 18, 18, .6), rgba(7, 7, 7, .75));
  color: var(--schrift-mittel);
  font-size: .82rem;
  white-space: nowrap;
}

.demo-quelle::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mint);
  opacity: .55;
  flex: none;
}

.demo-quelle-klasse { color: var(--schrift-leise); font-size: .74rem; }

/* DER Knopf (Abschnitt 3) ist von Haus aus inline und schmal — hier soll er,
   wie der Absende-Knopf darueber, die ganze Kartenbreite tragen. */
#ldResult .cta-gross { display: flex; width: 100%; margin-top: 1.25rem; }

#ldError { color: #f0b4ac; }

/* Szene 05 — Was nuara im Auge behaelt ----------------------------- */

#szene-obacht {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  align-content: center;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}

/* Die Sektions-Ueberschrift „So arbeitet nuara fuer dich." (seit 19.09.2026)
   ist ein drittes direktes Kind von section, neben den beiden Artikeln —
   ohne diese Zeile bekaeme sie eine eigene Grid-Spalte statt ueber beiden
   zu stehen. */
#szene-obacht > h2 { grid-column: 1 / -1; }

/* Der dritte Artikel (#obacht-netz, seit 19.09.2026) faellt im Raster hinter
   die beiden anderen. Er nimmt die ganze Zeile — ausser dort, wo wirklich
   DREI Spalten nebeneinander passen; dann ist er die dritte.

   Der Haltepunkt ist nachgerechnet, nicht geraten: drei Spalten brauchen
   3 x 20rem + 2 x gap, der Kasten einer Szene ist min(74rem, 100vw - 2 x
   --rand) = min(1184px, 0.89 x vw) breit und gap ist clamp(2.5rem, 5vw,
   4.5rem). 960 + 2 x 0.05vw <= 0.89vw geht ab etwa 1213 px auf; 76rem ist
   der naechste runde Wert darueber. Liegt der Wert einmal daneben, ist das
   kein Bruch: dann steht das Netz entweder eine Spalte frueher oder eine
   spaeter ueber die ganze Zeile.

   Warum ueberhaupt: allein in einer halben Zeile zu stehen, sieht aus wie
   ein Rest. Ueber die ganze Zeile bekommt das Netz stattdessen die Breite,
   ab der es sein dreispaltiges Bild zeichnet (drei Themen, drei Menschen). */
#obacht-netz { grid-column: 1 / -1; }

@media (min-width: 76rem) {
  #obacht-netz { grid-column: auto; }
}

#szene-obacht article { display: flex; flex-direction: column; gap: 1.25rem; }

/* Die beiden Unterueberschriften der Artikel (h3 seit 19.09.2026, vorher
   h2 — dasselbe Muster wie .zusagen h3 in Szene 09 und .tarif h3 in
   Szene 10: h3 fuer Unterpunkte einer bereits ueberschriebenen Sektion). */
#szene-obacht h3 {
  font-size: clamp(1.75rem, 1.1rem + 2.3vw, 3.1rem);
  max-width: 16ch;
}

#szene-obacht p { color: var(--schrift-mittel); max-width: var(--mass-text); }

#obacht-themen ul { display: flex; flex-direction: column; gap: .65rem; }

/* Dieselbe Verlaufslinie wie in Szene 02: links Licht, rechts Auslauf. */
#obacht-themen li {
  padding-top: .7rem;
  background-image: linear-gradient(90deg, var(--kante-hell), rgba(255, 255, 255, .02));
  background-size: 100% 1px;
  background-repeat: no-repeat;
  color: var(--schrift-mittel);
  font-size: .98rem;
}

/* Szene 06 — Jede Aussage hat einen Absender. ---------------------------------------- */

.klassen { display: flex; flex-wrap: wrap; gap: .6rem; }

/* Kante bleibt EINE Farbe: scenes.js faehrt borderColor inline hoch und
   runter, ein Verlauf haette dort nichts zum Interpolieren. Das Licht
   kommt darum aus dem Schein unter der Oberkante. */
.klassen li {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .62rem 1.1rem;
  border: 1px solid var(--kante);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .012) 60%),
    linear-gradient(180deg, rgba(18, 18, 18, .6), rgba(7, 7, 7, .75));
  color: var(--schrift-mittel);
  font-size: .95rem;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 10px 22px -18px rgba(0, 0, 0, .9);
}

.klassen li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mint);
  opacity: .55;
  flex: none;
}

/* Szene 07 — Es steht Rede und Antwort ----------------------------- */
/* traegt die Grundform der Szene, braucht nichts Eigenes. */

/* Szene 08 — Fuer den Moment, der zaehlt --------------------------- */
/* traegt die Grundform der Szene, braucht nichts Eigenes. „Briefing fuer
   jemand anderen" ist ersatzlos von der Seite genommen (Martins Entscheidung
   19.09.2026) — das Feature bleibt im Produkt, wird hier nur nicht mehr
   beworben. */

/* Szene 09 — Was mit deinen Daten passiert ------------------------- */

/* Vorher standen hier vier gleich grosse Tafeln in einem Zweier-Raster.
   Vier gleiche Kaesten sind die Form eines Merkmal-Vergleichs — und damit
   genau die falsche: dieser Abschnitt verkauft nichts, er sagt etwas zu.
   Jetzt ist es ein Register: untereinander, jede Zusage gross und links,
   ihre Erklaerung leise und rechts, dazwischen nichts als Luft und eine
   Haarlinie. Kein Kasten, kein Symbol, keine Farbe ausser der einen im
   Verweis.

   Die Haarlinie ist NICHT neu erfunden, sondern dieselbe wie in Szene 02
   und Szene 05: ein 1 px hoher Verlauf als Hintergrundbild, links Licht,
   nach rechts auslaufend. So gehoert das Register zur Seite, statt ein
   eigener Einfall zu sein. */
.zusagen {
  display: flex;
  flex-direction: column;
  gap: clamp(1.6rem, 4svh, 3rem);
  max-width: 58rem;
  /* Etwas mehr Luft nach oben und unten, als der Szenenabstand allein
     gibt: sonst liest sich die erste Haarlinie als Unterstreichung des
     Absatzes darueber statt als Oberkante des Registers. */
  margin-block: clamp(.4rem, 2svh, 1.4rem);
}

/* Die Linie steht UEBER jeder Zeile (padding-top), auch ueber der ersten:
   so bekommt das Register eine Oberkante. Unten hoert es offen auf — ein
   Abschlussstrich waere die fuenfte Linie und machte eine Tabelle daraus. */
.zusagen li {
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 46ch);
  gap: clamp(1.1rem, 3.4vw, 4rem);
  align-items: start;
  padding-top: clamp(1.6rem, 4svh, 3rem);
  background-image: linear-gradient(90deg, var(--kante-hell), rgba(255, 255, 255, .02));
  background-size: 100% 1px;
  background-repeat: no-repeat;
}

/* Die Zusage. Gross genug, um fuer sich zu stehen, und in der
   Anzeigeschrift wie die Ueberschriften — sie ist ein Satz, keine
   Beschriftung.
   Das Feld ist bewusst schmal: alle vier Zusagen bestehen aus drei
   Woertern und brechen darin auf zwei Zeilen. Vier gleich gebaute
   Umbrueche untereinander sind der Takt des Registers — bei einem breiten
   Feld stand „AVV im Teamvertrag" als einzige einzeilig, und der Takt
   stolperte.

   Das Mass steht in em, nicht in rem: die Schriftgroesse waechst mit dem
   Fenster, ein festes rem-Mass tut das nicht. Bei 16rem brach der Takt
   darum um 800 px wieder auf — dort war die Schrift kleiner, das Feld aber
   gleich breit, und „AVV im Teamvertrag" passte wieder in eine Zeile.
   7,5em traegt die laengste Einzelzeile („offen benannt") und bricht die
   kuerzeste Zusage („AVV im Teamvertrag") in jeder Groesse. */
.zusagen h3 {
  margin: 0;
  max-width: 7.5em;
  font-family: var(--stapel-gross);
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.024em;
  text-wrap: balance;
}

/* Die Erklaerung. Der kleine Versatz nach unten setzt ihre x-Hoehe neben
   die der Zusage — an der Oberkante ausgerichtet haenge sie sonst sichtbar
   zu hoch, weil die Zusage doppelt so gross ist. */
.zusagen p {
  margin: 0;
  padding-top: .5rem;
  font-size: .97rem;
  line-height: 1.62;
  color: var(--schrift-mittel);
}

.zusagen a { color: var(--mint); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Auf dem Handy gibt es keine zweite Spalte: Zusage, darunter Erklaerung.
   Der Versatz der Erklaerung faellt weg, sonst klafft er unter der Zusage.
   Und das schmale Mass der Zusage faellt weg: es gibt hier keine zweite
   Spalte, neben die es passen muesste — eine auf 7,5em gezwungene Zeile
   liesse nur rechts daneben Leere stehen. */
@media (max-width: 46rem) {
  .zusagen li { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .zusagen h3 { max-width: none; }
  .zusagen p { padding-top: 0; }
}

/* Feedbackrunde 4: der Satz stand vorher direkt unter der letzten Zusage
   (AVV im Teamvertrag), mit einer LINKEN Kante als Randbemerkung — genau
   der Rhythmus eines Registereintrags, nur leiser. Er gilt aber der ganzen
   Seite, nicht dem AVV-Punkt darueber. Zwei Aenderungen loesen ihn aus dem
   Register: eine eigene OBERE Kante, wie sie jede Zusage schon traegt (also
   dieselbe Formensprache), aber mit deutlich mehr Luft davor, als der
   Szenentakt allein liefert — der sichtbare Bruch macht ihn zu einem
   eigenen, uebergreifenden Absatz statt zur naechsten Zeile derselben
   Tabelle. */
.hinweis {
  max-width: 68ch;
  margin-top: clamp(1.4rem, 4.5svh, 3rem);
  padding-top: 1.4rem;
  background-image: linear-gradient(90deg, var(--kante-hell), rgba(255, 255, 255, .02));
  background-size: 100% 1px;
  background-repeat: no-repeat;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--schrift-leise);
}

/* Szene 10 — Der Eintritt ------------------------------------------ */

/* Vorher auto-fit — das ergab bei 1024px DREI Spalten mit der vierten
   Karte (Enterprise) allein in Reihe 2: eine Waisenkarte. Martins Vorgabe:
   nur 1, 2 oder 4 Spalten nebeneinander, nie 3, nie eine Karte allein in
   ihrer Reihe. Darum jetzt feste Spaltenzahlen statt auto-fit, mit
   Haltepunkten aus derselben Rechnung wie die 76rem-Marke in Szene 05:

   Der Kasten einer Szene ist min(--mass, 100vw - 2 x --rand). Im Bereich,
   in dem --rand = 5.5vw greift (ab ~436px), vereinfacht sich das zu
   0.89 x vw — das nimmt die Rechnung unten direkt auf.

   ZWEI Spalten brauchen 2 x 17rem (272px) + 1 x gap. Unter 850px vw steht
   der gap-Bodensatz (1.6vw < .85rem), also .85rem = 13.6px:
   0.89 x vw >= 544 + 13.6 = 557.6  =>  vw >= 626.5px = 39.16rem;
   aufgerundet 40rem.

   VIER Spalten brauchen 4 x 272 + 3 x gap. Ab 1250px vw steht der
   gap-Deckel bei 1.25rem = 20px:
   0.89 x vw >= 1088 + 60 = 1148  =>  vw >= 1289.9px = 80.62rem;
   aufgerundet 81rem — das liegt vor 83.14rem, wo --mass=74rem die Breite
   ohnehin deckelt (dort passen vier Spalten mit 1184px Kasten erst recht). */
.tarife {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(.85rem, 1.6vw, 1.25rem);
  align-items: stretch;
}

@media (min-width: 40rem) {
  .tarife { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 81rem) {
  .tarife { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Material siehe Abschnitt 3. */
.tarif {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-width: 0;
  padding: clamp(1.6rem, 2.6vw, 2.1rem);
}

.tarif h3 {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--schrift-mittel);
}

.preis {
  font-family: var(--stapel-gross);
  font-size: clamp(2.4rem, 1.6rem + 2.2vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1.1;
  margin: .35rem 0 0;
}

.preis span {
  font-size: .95rem;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--schrift-leise);
}

.bedingung {
  margin: 0;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--schrift-leise);
}

/* :not([class]) trifft nur den Leistungssatz. Ohne diese Einschraenkung
   schlaegt die Elementkette .tarif > p die Klassen .preis und .bedingung
   (hoehere Spezifitaet) und der Preis erscheint in Fliesstextgroesse. */
.tarif > p:not([class]) { margin: .5rem 0 0; color: var(--schrift-mittel); font-size: .95rem; }

/* Der zweite Knopf: dieselbe Form, aber ohne Flaeche — er begleitet, er
   fuehrt nicht. Auch er bekommt eine Oberkante aus Licht, sonst waere er
   ein Rechteck mit Rand. */
.tarif-cta {
  /* margin-top:auto schiebt den Knopf ans Kartenende, damit alle drei auf
     einer Linie stehen — auch die Karte ohne Preis. */
  margin-top: auto;
  padding: .95em 1.4em;
  border: 1px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(180deg, #1a1a1a, #111111) padding-box,
    linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .08)) border-box;
  color: var(--schrift);
  display: block;
  text-align: center;
  text-decoration: none;
  font-size: .95rem;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: background-color .3s ease, box-shadow .3s ease;
}

.tarif-cta:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 1px rgba(255, 255, 255, .12); }

/* Mindestabstand zum Text darueber, ohne das margin-top:auto zu zerstoeren:
   der Abstand haengt am vorletzten Kind, nicht am Knopf. */
.tarif > :nth-last-child(2) { margin-bottom: 1rem; }

/* Eine Karte fuehrt. Nur sie traegt den Akzent — dieselbe Bauart wie die
   anderen Tafeln, aber die Kante fuehrt Mint und die Karte steht in einem
   eigenen, sehr weichen Schein. */
.tarif-hervorgehoben {
  background:
    linear-gradient(180deg, rgba(85, 214, 174, .1), rgba(85, 214, 174, .02) 48%,
                            rgba(255, 255, 255, 0) 100%) padding-box,
    linear-gradient(180deg, #131313, #0d0d0d 62%, #090909) padding-box,
    linear-gradient(165deg, rgba(136, 230, 203, .6), rgba(85, 214, 174, .22) 40%,
                            rgba(85, 214, 174, .1) 100%) border-box;
  box-shadow:
    inset 0 1px 0 rgba(168, 237, 217, .18),
    0 1px 2px rgba(0, 0, 0, .5),
    0 36px 70px -48px rgba(0, 0, 0, .95),
    0 0 90px -44px rgba(85, 214, 174, .55);
}

.tarif-hervorgehoben h3 { color: var(--mint); }

.tarife-fussnote {
  margin-top: .5rem;
  font-size: .86rem;
  color: var(--schrift-leise);
}

/* Szene 11 — Dein erstes Briefing wartet schon. -------------------- */

#szene-abschluss {
  align-items: center;
  text-align: center;
  gap: clamp(1.5rem, 3.5svh, 2.5rem);
}

.kicker {
  margin: 0;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--schrift-leise);
}

#szene-abschluss h2 {
  font-size: clamp(2.6rem, 1rem + 7.2vw, 7rem);
  line-height: .98;
  letter-spacing: -.038em;
  max-width: 16ch;
  color: var(--schrift);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  #szene-abschluss h2 {
    background-image: linear-gradient(176deg, #ffffff 2%, #e5e5e5 34%, #9c9c9c 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
  }
}

/* Flaeche, Kante und Licht stehen bei „DER Knopf" (Abschnitt 3). */
.cta-gross {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
  font-family: var(--stapel-text);
  font-size: clamp(1rem, .95rem + .35vw, 1.2rem);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border-radius: 999px;
  padding: 1.2em 2.6em;
}

/* ── Schmale Geraete ─────────────────────────────────────────────── */

@media (max-width: 47rem) {
  /* Fuenf Navigationspunkte passen nicht neben Wortmarke und Knopf, ohne
     dass der Kopf umbricht. Statt sie ersatzlos zu streichen (so stand es
     hier bis 14.09.2026 — auf dem Handy gab es dann GAR kein Menue) tritt
     der Burger an ihre Stelle und oeffnet dieselben fuenf Ziele. */
  .site-header nav { display: none; }
  .js .menue-knopf { display: flex; }

  /* Logo, Knopf und Burger stehen auf 320 px sehr eng beieinander. Die
     Wortmarke gibt als erstes nach — sie bleibt auch kleiner lesbar. */
  .brand img { height: 1.4rem; }
  .site-header { gap: 1rem; }

  /* Auf dem Handy nehmen beide Karten die volle Breite: der Versatz waere
     ein Rest von zwanzig Pixeln und saehe aus wie ein Fehler. Die zwei
     Punkte landen trotzdem an je einer Mintkante — sie stehen dann
     untereinander statt nebeneinander. */
  .treffer + .treffer { margin-left: 0; }

  main > section { gap: 1.5rem; }
}

/* Die schmalsten Geraete, die es noch gibt (iPhone SE, 320 px).
   Gemessen am 14.09.2026: Logo, Knopf und Burger brauchen dort zusammen
   348 px — 28 zu viel, der Kopf lief aus dem Fenster. Mit dem gesetzten
   Schriftzug fiel das nie an, das Logo ist breiter als das Wort. Beide
   geben etwas nach, damit keiner ganz weichen muss. */
@media (max-width: 22.5rem) {
  .brand img { height: 1.2rem; }
  .site-header .cta { font-size: .82rem; padding: .62em 1em; }
  .site-header { gap: .7rem; }
}

/* ── 6 Die drei Ruhezustaende ────────────────────────────────────────
   Stehen zuletzt, damit sie jede Gestaltung darueber ueberschreiben.
   Kein Zustand dieser Seite darf leer sein. */

/* Solange das Sprungmenue offen ist, steht die Seite darunter still. Die
   Klasse setzt und nimmt nuara.js — sie haengt am <html>, weil DAS hier das
   scrollende Element ist. `overflow-x: clip` von oben wird dabei fuer die
   Dauer zu `hidden`; das ist gewollt und endet mit dem Schliessen. */
html.menue-offen,
html.menue-offen body { overflow: hidden; }

/* Ohne JavaScript ist alles da. Enthuellung ist ein Aufschlag, kein Schalter. */
[data-reveal] { opacity: 1; transform: none; }

/* Erst wenn JS laeuft, darf etwas verborgen starten. */
.js [data-reveal] { opacity: 0; transform: translateY(1.5rem); transition: opacity .7s, transform .7s; }
.js [data-reveal].ist-sichtbar { opacity: 1; transform: none; }

/* Wer weniger Bewegung will, bekommt sie nicht — und sieht trotzdem alles.
   Ohne Buehne ist der Verlauf das einzige Licht: --stimmung geht hoch,
   damit die Seite auch dann Raeume hat und nicht schwarz wird. */
@media (prefers-reduced-motion: reduce) {
  :root { --stimmung: 1; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  #buehne { display: none; }
  .demo-bar-fill { transition: none; }

  /* Auch die stillen Uebergaenge an Knoepfen und Feldern bleiben aus. */
  .site-header .cta, .demo-btn, .cta-gross, .tarif-cta,
  .demo-inp, .site-header nav a { transition: none; }

  /* Das Sprungmenue erscheint ohne Blende — es ist dann da oder weg.
     Zum Ziel wird gesprungen, nicht geglitten (nuara.js schaltet dafuer
     auf behavior:'auto'). */
  .sprungmenue, .sprungmenue nav a, .menue-knopf, .sprungmenue-zu { transition: none; }
}

/* Kein WebGL: die Buehne bleibt leer, der Verlauf traegt die Stimmung —
   und traegt sie deutlicher, weil nichts anderes mehr da ist. */
.kein-webgl { --stimmung: 1; }
.kein-webgl #buehne { display: none; }