/* ═══════════════════════════════════════════════════════════════
   zquady.com, Startseite „Edel" (01.10.2026) - im Stil der App
   Entwurf „Zquady.com, edler“, vom User am 01.10.2026 ganz freigegeben
   („sehr cool mach bitte“): alle zwoelf Ideen fest an. Hier steht nur, was
   die Startseite braucht. Was alle Seiten teilen (Pillen 52/44, Fuss mit
   Muster, Cover, Monogramm, Aufbau, Token), steht in basis.css; Rechtstexte
   und /z/, /u/ in seiten.css. Gezeichnet wird mit muster.js + edel.js.

   Farben nur aus den Website-Token und den Toenen der App (theme.ts,
   zeitFarbe.ts, avatarGen.ts). Flaechen flach: kein Glas, kein Verlauf als
   Material, kein zweiter Schatten. Bewegung nur einmal oder am Scroll
   (transform), nie als Schleife; „Bewegung reduzieren“ = sofort da.
   ═══════════════════════════════════════════════════════════════ */

/* ═══ 1 · Kopf mit Hoehenlinien ═══════════════════════════════════════
   Das Muster „zquady.com“ liegt ueber Foto und Schleier, unter dem Text:
   oben und unten blendet es aus, um das Telefon bleibt es frei (die Lage
   rechnet edel.js aus derselben Formel wie home.css). */
.ed-kopfmuster {
  position: absolute; inset: 0; pointer-events: none; color: var(--ed-linie); opacity: .2;
  --ed-tel-x: -9999px; --ed-tel-y: -9999px; --ed-tel-rx: 1px; --ed-tel-ry: 1px;
}
.ed-kopfmuster.ed-da { opacity: 1; }
.ed-kopfmuster > .ed-maske {
  position: absolute; inset: 0;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0, #000 15%, #000 62%, rgba(0,0,0,0) 94%), radial-gradient(ellipse var(--ed-tel-rx) var(--ed-tel-ry) at var(--ed-tel-x) var(--ed-tel-y), rgba(0,0,0,0) 70%, #000 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0, #000 15%, #000 62%, rgba(0,0,0,0) 94%), radial-gradient(ellipse var(--ed-tel-rx) var(--ed-tel-ry) at var(--ed-tel-x) var(--ed-tel-y), rgba(0,0,0,0) 70%, #000 100%);
          mask-composite: intersect;
}
.held-v .inhalt > * { position: relative; }
@media (max-width: 860px) {
  /* Handy/Tablet: das Muster liegt hinter Ueberschrift und Knopf - wie im
     Profil-Kopf der App hinter Bild und Name - und endet vor dem Foto. */
  .ed-kopfmuster { bottom: auto; height: var(--ed-kopf-h, 620px); }
  .ed-kopfmuster > .ed-maske {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0, #000 22%, #000 58%, rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0, #000 22%, #000 58%, rgba(0,0,0,0) 100%);
  }
}

/* ═══ 2 · Dein Muster zum Ausprobieren ════════════════════════════════
   Ein Name wird zu Hoehenlinien wie im Profil-Kopf der App. Gerechnet wird
   nur im Browser; ohne Skript bleibt der Abschnitt weg (noscript in index.html). */
.ed-dein-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 88px; align-items: center; }
.ed-dein-raster h2 { font-size: clamp(36px, 4.2vw, 56px); }
.ed-eingabe { margin-top: 40px; max-width: 420px; }
.ed-eingabe label { display: block; font-size: 15px; font-weight: 600; color: var(--tinte-2); margin-bottom: 10px; }
.ed-feld { position: relative; display: flex; align-items: center; height: 56px; border-radius: 999px; background: var(--karte); box-shadow: inset 0 0 0 1.5px var(--linie); padding: 0 6px 0 20px; transition: box-shadow .16s; }
/* v115 (7-6): der Rand beim Tippen im tiefen Oliv (--fokus, basis.css), der helle Hof bleibt */
.ed-feld:focus-within { box-shadow: inset 0 0 0 1.5px var(--fokus), 0 0 0 4px var(--oliv-glanz); }
.ed-feld .ed-at { font-size: 17px; font-weight: 600; color: var(--tinte-3); margin-right: 1px; }
.ed-feld input { flex: 1 1 0; width: 0; min-width: 0; height: 100%; border: 0; background: none; font: 600 17px/1 'Inter', sans-serif; letter-spacing: -.02em; color: var(--tinte); outline: none; }
.ed-feld input::placeholder { color: var(--tinte-3); font-weight: 400; }
.ed-wuerfel { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--knopf); color: var(--knopf-text); font-size: 14px; font-weight: 700; letter-spacing: -.02em; cursor: pointer; transition: opacity .2s, transform .2s; }
.ed-wuerfel:hover { opacity: .86; }
.ed-wuerfel:active { transform: scale(.97); }
.ed-wuerfel svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ed-hinweis { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 16.5px; line-height: 1.45; color: var(--tinte-3); }
.ed-hinweis svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ed-dein-buehne { position: relative; border-radius: 40px; background: var(--flaeche); padding: 40px 36px 32px; display: grid; gap: 14px; justify-items: center; }
/* Der Profil-Kopf der App: Muster 250 hoch, oben und unten in den Grund
   (Entwurf: 0 · 20 % · 55 % · 100 %), das Bild mit zwei feinen Linien. */
.ed-profil { position: relative; width: 100%; max-width: 440px; height: 266px; border-radius: 28px; background: var(--karte); border: 1px solid var(--ed-ring); overflow: hidden; }
.ed-profil-muster {
  position: absolute; left: 0; right: 0; top: 0; height: 250px; color: var(--ed-linie);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0, #000 20%, #000 55%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0, #000 20%, #000 55%, rgba(0,0,0,0) 100%);
}
.ed-profil-bild { position: absolute; left: 50%; top: 100px; width: 100px; height: 100px; margin: -50px 0 0 -50px; }
.ed-profil-bild .ed-mono { width: 100px; height: 100px; font-size: 38px; letter-spacing: -1px; }
.ed-profil-bild .ed-ringe { position: absolute; left: -16px; top: -16px; width: 132px; height: 132px; overflow: visible; }
.ed-profil-name { position: absolute; left: 16px; right: 16px; top: 184px; text-align: center; font: 600 26px/1.1 'Inter', sans-serif; letter-spacing: -.035em; color: var(--tinte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-profil-zeile { position: absolute; left: 16px; right: 16px; top: 222px; text-align: center; font-size: 14px; font-weight: 600; color: var(--oliv-tief); letter-spacing: -.01em; }
.ed-beispiele { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 440px; }
.ed-beispiel { position: relative; display: grid; justify-items: center; gap: 8px; padding: 18px 8px 14px; border: 0; border-radius: 22px; background: var(--karte); color: var(--tinte); cursor: pointer; overflow: hidden; font: inherit; box-shadow: inset 0 0 0 1px var(--ed-ring); transition: transform .2s, box-shadow .16s; }
.ed-beispiel:active { transform: scale(.97); }
.ed-beispiel:hover .ed-beispiel-name { color: var(--tinte); }
.ed-beispiel[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--oliv); }
.ed-beispiel-muster {
  position: absolute; inset: 0; color: var(--ed-linie-leise);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0, #000 18%, #000 50%, rgba(0,0,0,0) 92%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0, #000 18%, #000 50%, rgba(0,0,0,0) 92%);
}
.ed-beispiel > :not(.ed-beispiel-muster) { position: relative; }
.ed-beispiel .ed-mono { width: 44px; height: 44px; font-size: 16.72px; letter-spacing: -.44px; }
.ed-beispiel-name { max-width: 100%; font-size: 12.5px; font-weight: 600; letter-spacing: -.02em; color: var(--tinte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 980px) {
  .ed-dein-raster { grid-template-columns: minmax(0, 1fr); gap: 48px; }
}
@media (max-width: 720px) {
  .ed-dein-buehne { border-radius: 28px; padding: 16px 12px 14px; }
  .ed-beispiel { padding: 14px 6px 12px; }
  .ed-beispiel-name { font-size: 11.5px; }
}

/* ═══ 3 · In der Liste ════════════════════════════════════════════════
   Seit v80 (04.10.2026) nur Text: Ueberschrift links, Satz und Legende
   rechts, unten buendig. Die Karten selbst stehen oben in den Telefonen
   (app-home.js, Kopf- und Karten-Foto) - die eigene Buehne rechts war
   doppelt (User). Bis v79 stand dort eine Buehne mit drei Karten, bis v74
   eigene .ed-zk-Karten. */
/* Oben mehr Luft als bis v79 (24 px): ohne Buehne folgt der Text sonst zu
   dicht auf das Schild unter dem Karten-Foto. */
.ed-karten { padding-block: 88px 64px; }
.ed-karten-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 88px; align-items: end; }
.ed-karten-kopf h2 { font-size: clamp(36px, 4.2vw, 56px); margin: 0; }
.ed-karten-text .unter { font-size: 18px; margin: 0; }
.ed-karten-legende { margin: 36px 0 0; padding-top: 20px; border-top: 1px solid var(--linie); display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14.5px; color: var(--tinte-2); }
.ed-karten-legende > span { display: inline-flex; align-items: center; gap: 8px; }
.ed-karten-legende i { width: 8px; height: 8px; border-radius: 4px; background: var(--p); box-shadow: inset 0 0 0 1.5px var(--pr, rgba(0,0,0,0)); }
.ed-karten-legende i.ring { width: 14px; height: 14px; border-radius: 50%; background: none; box-shadow: inset 0 0 0 1px #A7B77A; }
@media (max-width: 980px) { .ed-karten-raster { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
@media (max-width: 720px) {
  .ed-karten { padding-block: 8px 88px; }
}

/* ═══ 4 · Das Cover als Buehne ════════════════════════════════════════
   Ueber „Vor, waehrend, danach“ das Cover des Zquads, um das es dort geht
   (Grundform in basis.css). Im dunklen Abschnitt immer die dunkle Fassung -
   sonst verschwaende die Tinte. Tiefe im Cover (edel.js): das Muster bleibt
   beim Scrollen zurueck, der Tag sinkt und verblasst. */
.ed-cover-huelle { margin-top: 64px; }
.ed-cover-huelle .ed-cover { background: #1B1C19; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.ed-cover-huelle .ed-cover-muster { top: -20%; bottom: auto; height: 140%; will-change: transform; }
.ed-cover-huelle .ed-cover-tagbahn { will-change: transform, opacity; }
.ed-cover-zeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 18px 6px 0; font-size: 15px; color: var(--nacht-tinte-2); }
.ed-cover-zeile b { font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: var(--nacht-tinte); }
@media (min-width: 721px) {
  .ed-cover-huelle .ed-cover { aspect-ratio: auto; height: 320px; border-radius: 32px; }
  .ed-cover-huelle .ed-cover-tag { left: 22px; bottom: -58px; padding-right: 22px; font-size: 300px; letter-spacing: -14px; }
  .ed-cover-huelle .ed-cover-oben { left: 30px; right: 30px; top: 26px; font-size: 15px; line-height: 18px; }
  .ed-cover-huelle .ed-cover-unten { right: 30px; bottom: 26px; }
  .ed-cover-huelle .ed-cover-zeit { font-size: 40px; letter-spacing: -1.3px; }
  .ed-cover-huelle .ed-cover-monat { font-size: 15px; line-height: 18px; }
  .ed-cover-huelle .ed-cover-zeit + .ed-cover-monat { margin-top: 6px; }
}
@media (max-width: 720px) { .ed-cover-huelle { margin-top: 44px; } }

/* ═══ 5 · Linien als Uebergang ════════════════════════════════════════
   Wo hell und dunkel wechseln, laeuft die Kante als Hoehenlinie eines
   Hangs, darueber und darunter feine Linien (edel.js). Sie wandern beim
   Scrollen ein paar Pixel (transform, an den Scroll gebunden). */
.nacht { border-block: 0; }
.ed-band { position: absolute; left: 0; right: 0; height: var(--ed-band-h, 160px); pointer-events: none; z-index: 1; overflow: hidden; }
.ed-band.oben { top: calc(var(--ed-band-h, 160px) / -2); }
.ed-band.unten { bottom: calc(var(--ed-band-h, 160px) / -2); }
.ed-band svg { position: absolute; top: 0; height: 100%; display: block; overflow: visible; }
.ed-band .ed-flaeche { left: 0; width: 100%; }
.ed-band .ed-flaeche .hell { fill: var(--grund); }
.ed-band .ed-flaeche .dunkel { fill: var(--nacht); }
.ed-band .ed-zug {
  left: -24px; width: calc(100% + 48px);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0, #000 26%, #000 74%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0, #000 26%, #000 74%, rgba(0,0,0,0) 100%);
}
/* Strich wie die grossen Flaechen (edel.js STRICH_GROSS): 1,6 CSS-px, rund, ruhig. */
.ed-band .ed-zug path { fill: none; stroke-width: 1.6px; stroke-linecap: round; stroke-linejoin: round; shape-rendering: geometricPrecision; vector-effect: non-scaling-stroke; }
.ed-band .ed-zug.hell path { stroke: var(--ed-linie); }
.ed-band .ed-zug.dunkel path { stroke: var(--ed-linie-nacht); }

/* ═══ 6 · Abschnittskoepfe als Lockup ═════════════════════════════════
   Wie KopfLockup.tsx: die kleine Zeile dicht ueber dem Titel, in Tinte.
   Die Titel bleiben Inter 600 (Website-Regel: Sora nur fuer Zahlen und
   Wortmarke) - darum die 53 in Sora wie die Zahlen der App. Die Feature-
   Reiter als ReiterZeile: Woerter, der gewaehlte fett, darunter gleitet ein
   oliver Strich (2,5 pt, 260 ms; die Lage setzt site.js). */
.abschnitt-name { margin-bottom: 8px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--tinte); }
.nacht .abschnitt-name { color: var(--nacht-tinte); }
.zahl b { font-family: 'Sora', 'Inter', sans-serif; font-weight: 600; letter-spacing: -.07em; }
.reiter-huelle { margin-top: 52px; border-bottom: 1px solid var(--linie); }
.reiter { gap: 30px; padding: 0; border-radius: 0; background: none; }
.reiter button { height: auto; padding: 6px 0 12px; border-radius: 0; font-size: 17px; font-weight: 500; letter-spacing: -.02em; color: var(--tinte); }
.reiter button > span { opacity: .62; transition: opacity .16s; }
.reiter button[aria-selected="true"] { font-weight: 700; }
.reiter button[aria-selected="true"] > span { opacity: 1; }
.reiter button small { margin-left: 4px; font-size: 12px; font-weight: 800; color: var(--oliv-tief); }
.laeufer { top: auto; bottom: 0; height: 2.5px; border-radius: 2px; background: var(--oliv); box-shadow: none; transition: transform .26s cubic-bezier(.33,1,.68,1), width .26s cubic-bezier(.33,1,.68,1); }

/* ═══ 7 · Wegmarken fuer Vor · Waehrend · Danach ══════════════════════
   Wegmarken.tsx: ein fein gepunkteter Weg (2 pt, alle 6 pt, 42 %), an jeder
   Buehne ein ruhiger Ring mit Punkt (Entwurf „Punkt und Ziel“ B2,
   02.10.2026 - statt der drei Querstreifen, die wie eine Flagge aussahen),
   die aktive oliv. Weg, Zeilen und Marken stehen im HTML, edel.js legt sie
   an die Buehnen (.ed-weg-an). */
.drei { position: relative; isolation: isolate; }
.phase { position: relative; }
/* Am Weg blenden die Buehnen nur ein, ohne den Hub von .reveal (14 px):
   edel.js misst ihre Lage mit Verschiebung - sonst sassen die Marken
   untereinander 14 px in der Buehne statt auf ihrer Kante. Der Hub springt
   ohne Uebergang weg, damit schon die erste Messung stimmt. */
.drei.ed-weg-an > .phase.reveal { transform: none; transition: opacity .8s ease; }
.ed-weg, .ed-weg-linie { display: none; }
.drei.ed-weg-an > .ed-weg { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.drei.ed-weg-an > .ed-weg-linie { display: block; position: absolute; left: 0; top: -80px; overflow: visible; z-index: -1; }
.ed-weg-linie path { fill: none; stroke: var(--nacht-tinte); stroke-opacity: .42; stroke-width: 2; stroke-linecap: round; stroke-dasharray: .1 6; }
.ed-weg-start { position: absolute; display: flex; align-items: center; gap: 9px; white-space: nowrap; font-size: 13.5px; font-weight: 700; letter-spacing: -.15px; color: var(--nacht-tinte); transform: translateY(-50%); }
.ed-weg-start i { width: 16px; height: 16px; border-radius: 50%; background: rgba(255,255,255,.12); display: grid; place-items: center; flex: none; }
.ed-weg-start i::after { content: ""; width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box; border: 2.5px solid var(--nacht); background: #A7B77A; }
.ed-weg-zeile { position: absolute; white-space: nowrap; font-size: 13px; font-weight: 600; letter-spacing: -.1px; color: var(--nacht-tinte-2); transform: translate(-50%, -100%); }
.ed-weg-zeile b { color: var(--nacht-tinte); font-weight: 700; }
/* Die Marke wie WegmarkeZeichen (Punkt und Ziel B2): Ring 16 (Strich 1,75)
   mit Punkt 6, darum 3 Rand im Seitengrund, der den Weg ausstanzt; innen die
   Flaeche der Buehne. Die Mitte sitzt auf dem Weg (bzw. auf der Kante der
   Buehne). Wie die Schritte im Abschluss-Blatt: die anderen in Tinte, die
   aktive oliv. */
.ed-weg-marke { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; }
.ed-weg-marke > svg { display: block; width: 22px; height: 22px; overflow: visible; }
.ed-ziel-grund { fill: var(--nacht); }
.ed-ziel-ring { fill: var(--nacht-flaeche); stroke: var(--nacht-tinte); stroke-width: 1.75px; transition: stroke .16s; }
.ed-ziel-punkt { fill: var(--nacht-tinte); transition: fill .16s; }
.ed-weg-marke.an .ed-ziel-ring { stroke: #A7B77A; }
.ed-weg-marke.an .ed-ziel-punkt { fill: #A7B77A; }
.ed-weg-marke > .ed-weg-puls { position: absolute; inset: -2px; border-radius: 50%; border: 2px solid #A7B77A; opacity: 0; }
/* Wie MarkenPuls (Wegmarken.tsx, v73): dreimal 1,1 s auf ease-out-quad bis
   zum 2,6-Fachen, dazwischen 220 ms Pause (das letzte Sechstel steht leer). */
.ed-weg-marke.puls.an > .ed-weg-puls { animation: ed-puls 1.32s 3 both; }
@keyframes ed-puls {
  0% { opacity: .85; transform: scale(1); animation-timing-function: cubic-bezier(.5,1,.89,1); }
  83.333% { opacity: 0; transform: scale(2.6); }
  100% { opacity: 0; transform: scale(2.6); }
}
/* Bis der Weg sich einzeichnet (einmal, sobald er zu sehen ist), steht er
   verborgen: die Linie abgeschnitten, Marken und Zeilen aus. */
.drei.ed-weg-zeigt > .ed-weg-linie { clip-path: inset(0 100% 0 0); }
.drei.ed-weg-zeigt.senkrecht > .ed-weg-linie { clip-path: inset(0 0 100% 0); }
.drei.ed-weg-zeigt .ed-weg-marke, .drei.ed-weg-zeigt .ed-weg-zeile, .drei.ed-weg-zeigt .ed-weg-start { opacity: 0; }
@media (max-width: 980px) {
  /* Untereinander: der Weg laeuft links bei x = 32 wie in „Meine“, die
     Zeilen stehen zwischen den Karten. */
  .drei { gap: 46px; margin-top: 96px; }
  .ed-weg-zeile { transform: translate(0, -50%); }
}

/* ═══ 8 · Pillen und Knoepfe (Startseite) ═════════════════════════════
   Hauptknopf 52 (basis.css), daneben „So laeuft ein Zquad ab“ als
   Rahmen-Pille, gleich hoch. Store-Knoepfe gibt es nicht mehr: seit 18.10.2026
   stehen dort die offiziellen Badges (home.css .store-badge).
   Im Download-Finale fasst das Muster den QR-Code ein wie im Pass „Dein Code“. */
.held-v .aktionen { gap: 10px; }
@media (max-width: 560px) { .held-v .aktionen .knopf { padding: 0 19px; } }
.manifest .textlink { height: 44px; padding: 0 18px; border-radius: 999px; gap: 8px; font-size: 14.5px; font-weight: 700; letter-spacing: -.02em; background: rgba(0,0,0,0); color: var(--tinte); box-shadow: inset 0 0 0 1.5px var(--linie); transition: box-shadow .2s; }
.manifest .textlink:hover { box-shadow: inset 0 0 0 1.5px var(--tinte-3); }
.schluss-karte::before { display: none; }
.schluss-karte > .ed-schluss-muster { position: absolute; inset: 0; pointer-events: none; color: rgba(167,183,122,.40); }
.ed-schluss-muster > .ed-maske {
  position: absolute; inset: 0;
  -webkit-mask-image: radial-gradient(ellipse 52% 95% at 84% 50%, #000 34%, rgba(0,0,0,.5) 60%, rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(ellipse 52% 95% at 84% 50%, #000 34%, rgba(0,0,0,.5) 60%, rgba(0,0,0,0) 100%);
}
.fin-qr-bild { box-shadow: 0 0 0 10px #1B1C19, 0 30px 80px rgba(0,0,0,.5); }
/* Der Start am 1.12. (10.10.2026): dasselbe Muster um die Zahl, links */
.start-karte > .ed-start-muster { position: absolute; inset: 0; pointer-events: none; color: rgba(167,183,122,.40); }
.ed-start-muster > .ed-maske {
  position: absolute; inset: 0;
  -webkit-mask-image: radial-gradient(ellipse 46% 92% at 22% 50%, #000 30%, rgba(0,0,0,.5) 60%, rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(ellipse 46% 92% at 22% 50%, #000 30%, rgba(0,0,0,.5) 60%, rgba(0,0,0,0) 100%);
}
@media (max-width: 960px) {
  .ed-start-muster > .ed-maske {
    -webkit-mask-image: radial-gradient(ellipse 90% 55% at 30% 18%, #000 25%, rgba(0,0,0,0) 100%);
            mask-image: radial-gradient(ellipse 90% 55% at 30% 18%, #000 25%, rgba(0,0,0,0) 100%);
  }
}
@media (max-width: 720px) {
  .ed-schluss-muster > .ed-maske {
    -webkit-mask-image: radial-gradient(ellipse 90% 60% at 100% 0%, #000 20%, rgba(0,0,0,0) 100%);
            mask-image: radial-gradient(ellipse 90% 60% at 100% 0%, #000 20%, rgba(0,0,0,0) 100%);
  }
}

/* ═══ 9 · Tageszeit-Stimmung ══════════════════════════════════════════
   Die Zeile ueber der Ueberschrift gruesst nach der Uhrzeit (edel.js
   zeigt einen der vier Gruesse, die Texte stehen in site.js). Der Grund im
   Kopf nimmt die Tageszeit kaum merklich auf (TageszeitGrund.tsx): oben der
   Ton der Tageszeit, ab zwei Dritteln laeuft er in den Seitengrund aus. Nur
   der Grund - das Foto bleibt, wie es ist. */
@property --ed-tz { syntax: '<color>'; inherits: true; initial-value: rgba(0,0,0,0); }
.ed-gruss-teil { display: none; align-items: baseline; gap: 8px; white-space: nowrap; flex: none; }
.ed-gruss-teil.an { display: inline-flex; }
.ed-gruss { color: var(--tinte); font-weight: 600; }
.ed-gruss > span { display: none; }
.ed-gruss > span.an { display: inline; }
.held-v .hinweis { flex-wrap: wrap; row-gap: 2px; }
@media (max-width: 560px) { .ed-gruss-trenner { display: none; } }
.held-v { --ed-tz: var(--grund); background: linear-gradient(to bottom, var(--ed-tz) 0, var(--ed-tz) 62%, var(--grund) 100%); transition: --ed-tz 1.3s ease-in-out; }
.held-v .schleier {
  background: linear-gradient(to bottom, var(--ed-tz) 0, var(--ed-tz) 62%, var(--grund) 100%);
  -webkit-mask-image: linear-gradient(100deg, #000 8%, rgba(0,0,0,.85) 30%, rgba(0,0,0,.4) 48%, rgba(0,0,0,0) 64%);
          mask-image: linear-gradient(100deg, #000 8%, rgba(0,0,0,.85) 30%, rgba(0,0,0,.4) 48%, rgba(0,0,0,0) 64%);
}

/* ── Bewegung reduzieren: alles steht sofort da ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .held-v, .ed-beispiel, .ed-feld, .reiter button > span, .ed-ziel-ring, .ed-ziel-punkt, .drei.ed-weg-an > .phase.reveal { transition: none !important; }
  .ed-weg-marke.puls.an > .ed-weg-puls { animation: none; }
  .ed-cover-huelle .ed-cover-muster, .ed-cover-huelle .ed-cover-tagbahn { transform: none !important; }
  .ed-cover-huelle .ed-cover-tagbahn { opacity: 1 !important; }
}