/* AUREON Scroll-Glanz — 04.09.2026
   Zwei Bausteine aus Merts eigenen 21st-Sammlungen, auf die Marke umgebaut:

   1. Wort-Aufdeckung  — "Text Reveal" (@dillionverma, Sammlung "fav").
      Die Woerter einer Kernaussage hellen sich beim Scrollen nacheinander auf.
      Original arbeitet mit einem 200vh-Spacer; das haette die Startseite um zwei
      Bildschirme verlaengert und verstoesst gegen die Laengenregel. Der Fortschritt
      kommt hier stattdessen aus der Lage der Zeile im Bild - gleiche Wirkung,
      keine zusaetzliche Hoehe.

   2. Lichtrand — "Border Beam Panel" (@rmahammad, Sammlung "extra features").
      Zwei Kometen laufen auf einem Kegelverlauf um den Kartenrand. Ring, Maske,
      Dicke, Radius, Glanzschleier und die Federphysik sind 1:1 uebernommen;
      getauscht ist nur die Farbwelt (Motiq-Blau -> AUREON-Verlauf) und die
      Bindung an React.

   Merts Regel (23.08.2026): nichts laeuft, wenn niemand hinsieht. Beide Bausteine
   halten an, sobald ihre Sektion aus dem Bild ist oder der Tab versteckt wird. */

/* ── 1 · Wort-Aufdeckung ─────────────────────────────────────────────────── */

.ag-aufdeck {
  /* Der Geist liegt hinter dem echten Wort - beide brauchen dieselbe Zeile. */
  display: inline;
}

.ag-wort {
  position: relative;
  display: inline-block;
  white-space: pre;
}

/* Geist-Ebene: das Wort in schwacher Deckkraft, damit die Zeile ihre volle
   Breite behaelt und beim Aufdecken nichts umbricht. 1:1 aus dem Original
   (dort `opacity-30`). Fuer Screenreader unsichtbar, sonst liest er doppelt. */
.ag-geist {
  position: absolute;
  inset: 0;
  opacity: .3;
  pointer-events: none;
}

.ag-echt {
  position: relative;
  opacity: 0;
  /* Kein will-change: 04.09.2026 lagen 46 dieser Woerter gleichzeitig als
     eigene Compositing-Ebene im Speicher (von 241 auf der ganzen Seite) - das
     war einer der Gruende fuer Merts "es laggt". Eine reine Deckkraft-Aenderung
     braucht keine reservierte Ebene. */
}

/* Ohne Skript oder bei "weniger Bewegung" steht die Aussage sofort vollstaendig
   da - eine Ueberschrift darf nie unlesbar bleiben, wenn die Technik aussetzt. */
.ag-aufdeck:not([data-ag-bereit]) .ag-echt { opacity: 1; }
.ag-aufdeck:not([data-ag-bereit]) .ag-geist { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .ag-echt { opacity: 1 !important; }
  .ag-geist { opacity: 0 !important; }
}

/* ── 2 · Lichtrand ───────────────────────────────────────────────────────── */

.ag-rand {
  position: relative;
  isolation: isolate;
}

/* Ring und Schein tragen denselben Kegelverlauf; nur der Ring wird auf die
   Randstaerke ausmaskiert. Die Maske ist bewusst eine zweilagige Alpha-Maske
   mit `exclude` - eine SVG-Leuchtdichtemaske greift in Chromium still ins Leere.
   (Begruendung stammt aus dem Original und gilt unveraendert.) */
.ag-rand__ring,
.ag-rand__schein {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from var(--ag-winkel, 0deg), var(--ag-stopps));
}

.ag-rand__ring {
  padding: var(--ag-staerke, 2px);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

/* Der Schein ist der geworfene Lichtschimmer der Karte, nicht eine zweite Kante. */
.ag-rand__schein {
  filter: blur(14px);
  opacity: .35;
  z-index: -1;
}

/* Im Kontrastmodus faellt der Effekt weg und die Kante bleibt eine echte Kante. */
@media (forced-colors: active) {
  .ag-rand__ring,
  .ag-rand__schein { display: none; }
}

/* Bei "weniger Bewegung" steht das Licht still auf einer sichtbaren Kante,
   statt zu kreisen - der Rand leuchtet, nur eben ruhig. */
@media (prefers-reduced-motion: reduce) {
  .ag-rand__ring,
  .ag-rand__schein { --ag-winkel: 40deg; }
}

/* ── 3 · Blattwechsel im Vertragsstapel ──────────────────────────────────────
   Mert, 04.09.2026: "dieses Design bleibt und von links nach rechts wischt das.
   Und es kommen immer andere Dokumente ... nicht immer weisse Blatt, sondern
   rote, gruene, lila ... Es soll wischen in so zwei Sekunden bis drei."

   Das Design bleibt unangetastet: Buehne, Groesse, Radius, Schatten und die drei
   3D-Lagen stehen weiter in portal-revival.css. Hier kommt nur eine Wisch-Ebene
   dazu - die Grundstellung translate3d(-50%, -50%, 76px) steckt unveraendert in
   der Regel, ergaenzt um einen seitlichen Versatz. */

.pr-sheet--front {
  transform: translate3d(calc(-50% + var(--ag-wisch, 0px)), -50%, 76px);
  opacity: var(--ag-blatt-deckung, 1);
  background: var(--ag-blatt-grund, #f2eee7);
  color: var(--ag-blatt-schrift, #171311);
}

/* Nur die Bewegung selbst laeuft weich; der Ruecksprung nach links geschieht
   ohne Uebergang (Klasse .ag-sprung), sonst faehrt das Blatt sichtbar zurueck. */
.pr-sheet--front[data-ag-wechsel] {
  transition:
    transform .36s cubic-bezier(.22,.61,.36,1),
    opacity .36s cubic-bezier(.22,.61,.36,1),
    background-color .36s cubic-bezier(.22,.61,.36,1),
    color .36s cubic-bezier(.22,.61,.36,1);
}
.pr-sheet--front.ag-sprung { transition: none !important; }

/* Beim Blattwechsel bleibt die bisherige Vorderseite als zweite Ebene liegen,
   bis das neue Dokument von links vollstaendig im Stapel angekommen ist. */
.pr-sheet--front.ag-blatt-alt {
  z-index: 2;
  pointer-events: none;
}

/* Auf farbigen Blaettern muessen Kopf-, Fuss- und Fuellzeilen mitgehen -
   sonst steht dunkle Schrift auf dunklem Grund (feste Regel Hell/Dunkel). */
.pr-sheet--front .pr-sheet__topline,
.pr-sheet--front .pr-sheet__footer { color: inherit; }

.pr-sheet--front .pr-sheet__rules span {
  background: currentColor;
  opacity: .16;
}

/* Bei "weniger Bewegung" steht ein Blatt still - kein Wischen, kein Wechsel. */
@media (prefers-reduced-motion: reduce) {
  .pr-sheet--front { --ag-wisch: 0px !important; --ag-blatt-deckung: 1 !important; }
  .pr-sheet--front[data-ag-wechsel] { transition: none !important; }
}

/* Mert, 04.09.2026: "die schrift weiss nicht schwarz, schwarze stellen immer weiss".
   Die Ueberschrift trug eine eigene dunkle Farbe und blieb deshalb schwarz, als das
   Blatt dunkel wurde. Jeder Textteil im vorderen Blatt folgt jetzt der Blattfarbe.
   Die gruenen Marken-Akzente (AUREON, Fusszeile rechts) bleiben Akzent - sie sind
   auf beiden Untergruenden lesbar und tragen die Marke. */
.pr-sheet--front h3,
.pr-sheet--front > p,
.pr-sheet--front strong {
  color: var(--ag-blatt-schrift, #171311);
}

/* Augenbraue und Fliesstext etwas zurueckgenommen, aber in derselben Familie -
   nie eine feste graue Farbe, die auf einem dunklen Blatt verschwindet. */
.pr-sheet--front > p {
  color: color-mix(in srgb, var(--ag-blatt-schrift, #171311) 62%, transparent);
}

/* Der gruene Markenakzent (AUREON oben links, Kennung unten rechts) ist als
   Dunkelgruen angelegt und stand auf den dunklen Blaettern bei Kontrast 2,2.
   Jedes Blatt bringt jetzt seinen eigenen, aufgehellten Akzent mit - auf dem
   Cremeblatt bleibt das Original unveraendert. Die Toene sind mit Weiss
   gebrochen, nicht knallig (feste Regel Farben). */
.pr-sheet--front .pr-sheet__topline span:first-child,
.pr-sheet--front .pr-sheet__footer b {
  color: var(--ag-blatt-akzent, #245e4c);
}


/* Meldungs-Stapel, 04.09.2026 - Mert: "text faellt raus, unprofessionell".
   .dv__wert traegt overflow:hidden und text-overflow:ellipsis, aber ich hatte
   Kopf und Wert als <span> gebaut - auf Inline-Elementen wirkt overflow nicht,
   die Zeile lief ueber die Kartenkante. Als Block greift beides; der Text wird
   im Zweifel mit Auslassungspunkten gekuerzt, statt hinauszulaufen. */
.dv__zeile .dv__inhalt { display: block; min-width: 0; }
.dv__zeile .dv__kopf   { display: flex; }
.dv__zeile .dv__wert   { display: block; }


/* ── 4 · Was gutes Management veraendert ────────────────────────────────────
   Mert, 04.09.2026: "lange leere felder ... immer stoppen, rausnehmen, das sind
   fehler. richtig ist: immer text zu sehen und die scroll animation."
   Vier Nutzenbotschaften in normaler Hoehe. Jeder Satz ist ohne Skript voll
   lesbar, mit Skript als Geist sichtbar und hellt sich beim Scrollen Wort fuer
   Wort auf. */
@font-face {
  font-family: "Satoshi AUREON";
  src: url("../../assets/fonts/satoshi-bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

.vm {
  padding: 84px 32px 24px;
  background: #08080b;
  color: #F3E9EC;
}
@media (max-width: 860px) { .vm { padding: 64px 20px 12px; } }

.vm__innen { max-width: 880px; margin: 0 auto; }

.vm__augenbraue {
  margin: 0 0 clamp(32px, 5vw, 48px);
  font: 800 10.5px/1 "Manrope", system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(243, 233, 236, .5);
}

.vm__punkt {
  --vm-ink: #F3E9EC;
  margin: 0 0 clamp(36px, 5.5vw, 58px);
}
.vm__punkt:nth-of-type(1) { --vm-ink: #BFF8E7; }
.vm__punkt:nth-of-type(2) { --vm-ink: #FFD1CA; }
.vm__punkt:nth-of-type(3) { --vm-ink: #F8DDA0; }
.vm__punkt:nth-of-type(4) { --vm-ink: #B8EEEB; }
.vm__punkt:last-child { margin-bottom: 0; }

.vm__thema {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font: 800 10px/1 "Manrope", system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vm-ink);
  opacity: .72;
}
.vm__thema::before {
  content: "";
  width: 26px;
  height: 1px;
  flex: none;
  background: currentColor;
}

.vm__satz {
  display: block;
  max-width: 22ch;
  margin: 0;
  font-family: "Satoshi AUREON", "Manrope", system-ui, sans-serif;
  font-size: clamp(1.9rem, 5.1vw, 3.35rem);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: 0;
  color: var(--vm-ink);
  text-wrap: balance;
  /* Die Geist-Ebene liegt exakt hinter dem echten Wort; ohne Aufdeckung ist der
     Satz voll da - ein leeres Feld gibt es hier in keinem Zustand. */
}

@media (min-width: 720px) {
  .vm__punkt:nth-of-type(even) { margin-left: clamp(28px, 6vw, 76px); }
}

/* AURI sitzt bis Tabletbreite unten rechts. In seiner Standardposition darf
   der bewegliche Kreis kein Wort ueberdecken; wer ihn selbst verschiebt,
   behaelt weiterhin die freie Position. Der Sicherheitsraum enthaelt Text,
   keinen Scroll-Spacer, und gilt nur solange Inhalt und Kreis sich treffen. */
@media (max-width: 980px) {
  .vm__satz { padding-right: 56px; }
}

/* ── Weniger Compositing-Ebenen ──────────────────────────────────────────────
   Mert, 04.09.2026: "es buggt, laggt, hakt rum". Gemessen lagen **241**
   Elemente gleichzeitig mit `will-change` im Speicher — jedes davon bekommt
   vom Browser eine eigene Ebene. Den groessten Block stellen 112 Buchstaben-
   und Wort-Huellen der Textanimationen.

   `will-change` ist als kurzer Hinweis kurz vor einer Animation gedacht, nicht
   als Dauerzustand. Die betroffenen Effekte setzen `transform`/`opacity`
   ohnehin direkt; der Browser legt die Ebene dann von selbst an, solange sie
   gebraucht wird — und gibt sie danach wieder frei. */
.au-aufdeck__w i,
.au-kannst__liste li,
.ag-echt,
.ag-geist { will-change: auto; }