/* Grundton der Fassung "Kante" fuer ALLE Seiten im gemeinsamen Rahmen (11.11.2026). Tim: "und was ist mit den ganzen
   unterseiten ?", auf meine Rueckfrage "alle unterseiten ?". Erste Welle des Umbaus: Die Unterseiten bekommen Farben und
   Grund der Startseite, ohne dass ihr Aufbau angefasst wird. Wird nach neu.css und grafik.css geladen und ueberschreibt
   nur Farbnamen aus neu.css: warmer Grund statt blaeulich, Tinte statt Graphit als Akzent, keine farbigen Lichtfelder.
   Faden, Auftritt, Nacht und Finale bleiben vorerst der Startseite vorbehalten (kante.css, kante.js). */
:root {
  --faden: #FF7120;
  --grund: #F5F4F0; --grund-2: #ECEAE4; --text: #14161A; --leise: #555962;
  --akzent: #14161A; --akzent-hover: #000000; --auf-akzent: #F5F4F0;
}
@media (prefers-color-scheme: dark) {
  :root {
    --grund: #0D0E11; --grund-2: #14171D; --text: #F5F4F0; --leise: #A6AAB3;
    --akzent: #F5F4F0; --akzent-hover: #FFFFFF; --auf-akzent: #0D0E11;
  }
}
/* Ruhiger Grund wie auf der Startseite: die farbigen Lichtfelder des alten Rahmens entfallen */
.licht { display: none; }

/* ---- Welle 1 (11.11.2026): Faden und Finale auf den Unterseiten (kante-unter.js) ---- */
/* Faden im linken Seitenrand, hinter dem Inhalt. Ohne Skript gibt es ihn nicht. */
.u-faden { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.u-faden path { fill: none; stroke: var(--faden); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.u-perle { position: absolute; z-index: -1; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .85), rgba(255, 255, 255, .12) 42%, rgba(255, 255, 255, .05) 70%);
  -webkit-backdrop-filter: blur(1.5px) saturate(2) brightness(1.08); backdrop-filter: blur(1.5px) saturate(2) brightness(1.08);
  border: 1px solid rgba(255, 255, 255, .7); box-shadow: inset 0 -6px 12px rgba(255, 113, 32, .25), 0 10px 22px -10px rgba(20, 22, 26, .45); }
@media (max-width: 760px) { .u-faden path { stroke-width: 6; } .u-perle { width: 26px; height: 26px; margin: -13px 0 0 -13px; } }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .u-perle { display: none; } }

/* Finale: Klasse k-ende am html, sobald das Kontaktband erreicht ist. Gleiche Farben wie auf der Startseite (kante.css). */
html.k-ende {
  color-scheme: light;
  --faden: #14161A;
  --grund: #FF7120; --grund-2: #F26512; --text: #14161A; --leise: #2E1E12;
  --akzent: #14161A; --akzent-hover: #000000; --auf-akzent: #FFF4EC;
  --glas: rgba(255, 255, 255, .22); --glas-stark: rgba(255, 255, 255, .34); --glas-dicht: rgba(255, 247, 240, .96); --glas-leiste: rgba(255, 250, 246, .94); --kante: rgba(255, 255, 255, .55);
  --linie: rgba(20, 22, 26, .18); --linie-stark: rgba(20, 22, 26, .42); --fuell: rgba(20, 22, 26, .08);
  --schatten: 0 1px 2px rgba(60, 20, 0, .12), 0 24px 60px -28px rgba(60, 20, 0, .45); --glanz: rgba(255, 255, 255, .2);
}
html.k-ende .fuss { background: #0D0E11; --text: #F5F4F0; --leise: #A6AAB3; --linie: rgba(255, 255, 255, .12); --linie-stark: rgba(255, 255, 255, .28); color: var(--leise); }
html.k-ende .kopf-leiste { --text: #14161A; --leise: #434C5B; }
/* Der Wechsel breitet sich als Kreis von der Perle aus (View Transitions); ohne sie wechselt die Farbe weich */
html.u-los, html.u-los body, html.u-los .fuss { transition: background-color .7s ease, color .7s ease; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: k-kreis .75s cubic-bezier(.2, .8, .2, 1); }
@keyframes k-kreis { from { clip-path: circle(0 at var(--k-kx, 50%) var(--k-ky, 50%)); } to { clip-path: circle(150vmax at var(--k-kx, 50%) var(--k-ky, 50%)); } }
@media (prefers-reduced-motion: reduce) { html.u-los, html.u-los body, html.u-los .fuss { transition: none; } }
/* Mit dem Kreis entfaellt der weiche Farbwechsel, sonst liefen beide zugleich */
html.u-vt, html.u-vt body, html.u-vt .fuss { transition: none; }

/* ---- Bewegung auf allen Unterseiten (11.11.2026). Tim: "arbeite mit passenden animationen slide effekte effekte" ----
   Zwei Schichten. Erstens die vorhandenen Einblendungen (data-zeige aus neu.js, 248 Stellen): kraeftiger und laenger.
   Zweitens neue Auftritte, die kante-unter.js an Karten, Bildern, Fragen und den Teilen der Pitch-Seiten anbringt
   (Klasse u-ein, sichtbar mit u-da): von unten, Bilder von der Seite, Geschwister nacheinander.
   Ruhezustand = sichtbar: Ohne Skript gibt es weder .an noch .u-ein. Der erste Bildschirm bekommt keinen Auftritt. Was darunter
   liegt, erscheint beim Hineinscrollen, beim Drucken und spaetestens nach 60 s. Bei "weniger Bewegung" entfaellt alles. */
@media (prefers-reduced-motion: no-preference) {
  .an [data-zeige] { transition: opacity .8s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }
  .an [data-zeige]:not(.da) { opacity: 0; transform: translateY(32px); }
  .an h1[data-zeige]:not(.da), .an h2[data-zeige]:not(.da) { transform: translateY(.5em); }
  .u-ein { transition: opacity .8s ease, transform .95s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--u-n, 0) * 80ms); }
  .u-ein:not(.u-da) { opacity: 0; transform: translateY(44px) scale(.98); }
  .u-ein.u-rechts:not(.u-da) { transform: translateX(64px); }
  .u-ein.u-links:not(.u-da) { transform: translateX(-64px); }
  .u-ein.u-gross:not(.u-da) { transform: translateY(60px) scale(.94); }
}

/* ---- Zeichen (11.11.2026): lokaler Zeichensatz zeichen.svg, Baustein neu/Zeichen.astro ---- */
.zeichen { display: inline-block; width: 1.2em; height: 1.2em; flex: none; vertical-align: -.2em; margin-right: .45em; color: var(--faden); }
.zeichen--gross { display: block; width: 48px; height: 48px; padding: 11px; margin: 0 0 var(--a2); border-radius: 14px; background: var(--faden); color: #14161A; }
html.k-ende .zeichen { color: #14161A; }