/* =============================================================================
   NEONNACHT — Designsystem app.vanaehlismus.de
   =============================================================================

   Abgeleitet aus der Marke, nicht aus einer Stilidee.

   vanaehlismus.de verkauft Meterware, Panels und Buegelbilder mit lauten,
   frechen Motiven — "Fuc* off", "I hate People", "Fee Brechreiz",
   "Punkbaerchen", "Toedchen Kettensaege Rainbow". Die Stoffe sind Neon-Prints
   auf schwarzem Sweat. Der Shop nutzt Bebas Neue als Display, dazu Violett
   #8B5CF6, reines Magenta #FF00FF und Gelb #FBCD0A.

   Daraus folgt:
   - Schwarze Buehne, weil die Ware schwarz ist und die Prints darauf leuchten.
   - Bebas Neue gross und eng — dieselbe Stimme wie der Shop, nur lauter.
   - Der Neonverlauf in der Schrift ist kein Effekt, sondern das Motiv der Ware.
   - Gelb ist ausschliesslich fuer Exklusives reserviert. Wenn eine Farbe nur
     an einer Stelle vorkommt, heisst "nur hier" auch visuell "nur hier".

   Und die Haltung: app.vanaehlismus.de ist kein zweiter Shop, sondern ein
   VIP-Raum. 1-2 Events im Monat, nur fuer freigeschaltete Kundinnen, mit
   Stoffen, die es im normalen Shop nicht oder noch nicht gibt. Alles hier ist
   auf "Drop" gebaut: Countdown, Knappheit, Zugehoerigkeit.

   -----------------------------------------------------------------------------
   Diese Datei ersetzt styles.css und styles-news.css NICHT global, sondern wird
   pro umgestellter Seite anstelle der alten geladen. Nicht umgestellte Seiten
   laufen unveraendert weiter.

   Bewusst dunkel-only. Die Rollen-Tokens sind so gebaut, dass ein heller Modus
   spaeter nachruestbar ist — bei Neon auf Schwarz wuerde er die Marke aber
   verwaessern.
   ============================================================================= */

@import url('fonts.css');

/* =============================================================================
   1  FARBE
   -----------------------------------------------------------------------------
   Zwei Ebenen: die n-Werte sind die Rohwerte, die c-Werte die Rollen.
   Im Code ausschliesslich Rollen verwenden.
   ============================================================================= */

:root {
  /* -- Buehne -------------------------------------------------------------- */
  --n-grund:      #08070A;   /* Grundflaeche, minimal violett gebrochen       */
  --n-tiefer:     #050408;   /* zurueckgesetzt, z.B. Panel-Grund             */
  --n-flaeche:    #121016;   /* Karten                                       */
  --n-erhaben:    #1B1822;   /* angehoben beim Ueberfahren                   */
  --n-kante:      #2A2633;
  --n-kante-hell: #443E52;

  --n-weiss:  #FFFFFF;
  --n-hell-2: #B9B3C4;
  --n-hell-3: #7A7389;

  /* -- Neon: exakt die Akzente von vanaehlismus.de -------------------------- */
  --n-magenta: #FF00FF;
  --n-violett: #8B5CF6;
  --n-cyan:    #22D3EE;
  --n-gelb:    #FBCD0A;

  --n-gut:      #3DDC97;
  --n-schlecht: #FF4757;
  /* Bernstein fuer Warn- und Zwischenzustaende. Bewusst NICHT das VIP-Gelb:
     "Wartet auf Zahlung" und "Teillieferung" brauchen einen Warnton, und wenn
     der dieselbe Farbe traegt wie "nur hier exklusiv", verliert das Gelb genau
     die Bedeutung, wegen der es reserviert wurde. Deutlich unterscheidbar:
     oranger und dunkler als #FBCD0A. */
  --n-bernstein: #E89B3C;

  /* -- Rollen -------------------------------------------------------------- */
  --c-bg:           var(--n-grund);
  --c-bg-tief:      var(--n-tiefer);
  --c-surface:      var(--n-flaeche);
  --c-surface-sunk: rgb(255 255 255 / .05);
  --c-surface-up:   var(--n-erhaben);
  --c-line:         var(--n-kante);
  --c-line-strong:  var(--n-kante-hell);

  --c-text:       var(--n-weiss);
  --c-text-body:  var(--n-hell-2);
  --c-text-muted: var(--n-hell-3);
  --c-text-faint: #5C566B;
  --c-text-on-accent: #08070A;

  --c-accent:     var(--n-magenta);
  --c-accent-2:   var(--n-violett);
  --c-accent-3:   var(--n-cyan);
  --c-verlauf:    linear-gradient(96deg, var(--n-magenta) 0%, var(--n-violett) 48%, var(--n-cyan) 100%);

  /* Gelb NUR fuer Exklusives — nirgends sonst einsetzen. */
  --c-vip: var(--n-gelb);

  --c-good: var(--n-gut);
  --c-warn: var(--n-bernstein);   /* NICHT --n-gelb, siehe oben */
  --c-bad:  var(--n-schlecht);
  --c-info: var(--n-cyan);
  --c-neutral: var(--n-hell-3);

  --c-shadow-hue: 0 0 0;

  color-scheme: dark;
}

/* =============================================================================
   2  TYPOGRAFIE
   -----------------------------------------------------------------------------
   Bebas Neue ist eine reine Versalschrift ohne Kleinbuchstaben. Sie braucht
   enge Zeilen und darf gross werden; bei kleinen Graden wirkt sie gedrungen.
   Deshalb traegt sie ausschliesslich Ueberschriften, Preise und Zahlen.
   Instrument Sans uebernimmt alles, was gelesen statt geschaut wird —
   Fliesstext, Formulare, Tabellen, Navigation.
   ============================================================================= */

:root {
  --font-display: 'Bebas Neue', 'Oswald', Impact, sans-serif;
  --font-ui: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --t-2xs:  0.6875rem;
  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: 0.9375rem;
  --t-md:   1.0625rem;
  --t-lg:   clamp(1.25rem, 0.6vw + 1.1rem, 1.5rem);
  --t-xl:   clamp(1.5rem, 1.4vw + 1.2rem, 2rem);
  --t-2xl:  clamp(1.75rem, 3.2vw + 1rem, 3rem);
  --t-3xl:  clamp(2.5rem, 7vw + 0.5rem, 6rem);
  --t-4xl:  clamp(3.5rem, 13vw, 12rem);

  --lh-display: .88;
  --lh-snug:  1.15;
  --lh-body:  1.6;
  --lh-loose: 1.7;

  --track-display: .005em;
  --track-label:   .16em;
}

.t-display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--c-text);
  margin: 0;
  text-wrap: balance;
}
.t-display-xl { font-size: var(--t-4xl); }
.t-display-l  { font-size: var(--t-3xl); }
.t-display-m  { font-size: var(--t-2xl); }
.t-display-s  { font-size: var(--t-xl); }

/* Der Neonverlauf in der Schrift. Der Schein liegt DAHINTER, nicht als
   text-shadow darauf — sonst wird die Kontur matschig.                      */
.t-neon {
  background: var(--c-verlauf);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  position: relative;
}
.t-neon::before {
  content: '';
  position: absolute; inset: -14% -6%; z-index: -1;
  background: radial-gradient(58% 58% at 50% 50%, rgb(255 0 255 / .28), transparent 70%);
  filter: blur(30px);
}

.t-label {
  font-family: var(--font-ui);
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.t-label--neon {
  background: var(--c-verlauf);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.t-body  { font-size: var(--t-base); line-height: var(--lh-body); color: var(--c-text-body); }
.t-muted { color: var(--c-text-muted); }
.t-lede  { font-size: var(--t-md); line-height: var(--lh-loose); color: var(--c-text-body); max-inline-size: 52ch; }
.t-num   { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* =============================================================================
   3  RAUM, RADIEN, LINIEN
   ============================================================================= */

:root {
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;    --s-11: 12rem;

  --gap-section: clamp(var(--s-7), 7vw, var(--s-9));
  --gutter: clamp(var(--s-4), 4vw, var(--s-7));
  --measure: 60ch;
  --page-max: 88rem;

  /* Kleine Radien. Auf Dunkel wirken grosse Radien schnell weich und
     verlieren die Kante, die hier die Tiefe traegt.                          */
  --r-xs: 2px;  --r-sm: 3px;  --r-md: 6px;  --r-lg: 10px;  --r-full: 999px;

  --line: 1px solid var(--c-line);
  --line-strong: 1px solid var(--c-line-strong);
}

/* =============================================================================
   4  TIEFE
   -----------------------------------------------------------------------------
   Auf Schwarz traegt kein Schatten — er ist unsichtbar. Tiefe entsteht ueber
   Kanten und Flaechenhelligkeit. Schatten gibt es nur dort, wo etwas wirklich
   ueber dem Rest schwebt (Panels, schwebende Knoepfe).
   ============================================================================= */

:root {
  --d-0: none;
  --d-1: 0 1px 2px rgb(0 0 0 / .5);
  --d-2: 0 6px 20px -6px rgb(0 0 0 / .7);
  --d-3: 0 14px 44px -14px rgb(0 0 0 / .85);
  --d-4: 0 30px 70px -20px rgb(0 0 0 / .9);
  --glow-accent: 0 0 40px -8px rgb(255 0 255 / .6);
  --glow-vip:    0 0 36px -8px rgb(251 205 10 / .6);
}

/* =============================================================================
   5  BEWEGUNG
   ============================================================================= */

:root {
  --ease-paper: cubic-bezier(.22, 1, .36, 1);
  --ease-exit:  cubic-bezier(.4, 0, 1, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-4: 450ms; --dur-5: 720ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; --dur-4: 1ms; --dur-5: 1ms; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* =============================================================================
   6  STAPELUNG
   -----------------------------------------------------------------------------
   Die alte App vergibt z-index ohne System (1998, 2999, 3000, 9998, 9999,
   10000, 10001, 99999). Diese Skala liegt bewusst darueber, damit neue
   Bausteine auf noch nicht umgestellten Seiten nicht darunter verschwinden.
   ============================================================================= */

:root {
  --z-base: 0;      --z-raised: 10;
  --z-sticky: 100000; --z-header: 100100; --z-scrim: 100200;
  --z-panel: 100300;  --z-panel-2: 100400;
  --z-popover: 100500; --z-toast: 100600;
  --z-korn: 100700;
}

/* =============================================================================
   7  GRUNDLAGEN
   ============================================================================= */

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

.atelier {
  background-color: var(--c-bg);
  color: var(--c-text-body);
  font-family: var(--font-ui);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  accent-color: var(--c-accent-2);
}

/* Filmkorn — nimmt grossen schwarzen Flaechen das Digitale und verhindert
   Farbbanding in den Verlaeufen. screen, weil es auf Dunkel aufhellen muss. */
.atelier::after {
  content: '';
  position: fixed; inset: 0; z-index: var(--z-korn);
  pointer-events: none; opacity: .05; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Scheinwerfer am Zeiger. --mx/--my kommen aus js/atelier-start.js;
   ohne JS steht er mittig und stoert nicht.                                 */
.atelier::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(44rem 44rem at var(--mx, 50%) var(--my, 30%),
    rgb(139 92 246 / .13) 0%, rgb(34 211 238 / .05) 36%, transparent 68%);
  transition: background .4s linear;
}
@media (prefers-reduced-motion: reduce) { .atelier::before { transition: none; } }

.atelier :focus-visible { outline: 2px solid var(--c-accent-3); outline-offset: 3px; border-radius: var(--r-xs); }
.atelier :focus:not(:focus-visible) { outline: none; }
.atelier ::selection { background: rgb(255 0 255 / .35); color: var(--c-text); }

.a-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* =============================================================================
   8  PRIMITIVES
   ============================================================================= */

.a-page   { max-inline-size: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }
.a-narrow { max-inline-size: var(--measure); margin-inline: auto; }
.a-section { padding-block: var(--gap-section); }
.a-stack > * + * { margin-block-start: var(--flow, var(--s-4)); }

/* -- Karte -------------------------------------------------------------------
   Oben ein Neonstrich, der beim Ueberfahren aufleuchtet — als wuerde der
   Stoff angestrahlt.                                                        */
.a-card {
  position: relative;
  background: var(--c-surface);
  border: var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--dur-3) var(--ease-paper),
              transform var(--dur-3) var(--ease-paper),
              background var(--dur-3) var(--ease-paper);
}
.a-card::after {
  content: ''; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 2px;
  background: var(--c-verlauf); opacity: 0;
  transition: opacity var(--dur-3) var(--ease-paper);
}
.a-card--interactive { cursor: pointer; }
@media (hover: hover) {
  .a-card--interactive:hover { transform: translateY(-4px); border-color: var(--c-line-strong); background: var(--c-surface-up); }
  .a-card--interactive:hover::after { opacity: 1; }
}
.a-card--interactive:active { transform: translateY(-1px); transition-duration: var(--dur-1); }

/* -- Knopf ------------------------------------------------------------------- */
.a-btn {
  --btn-bg: transparent;
  --btn-fg: var(--c-text);
  --btn-bd: var(--c-line-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-block-size: 3rem; padding-inline: var(--s-5);
  font-family: var(--font-ui); font-size: var(--t-sm); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 1px solid var(--btn-bd); border-radius: var(--r-full);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--dur-2) var(--ease-inout), color var(--dur-2) var(--ease-inout),
              border-color var(--dur-2) var(--ease-inout), box-shadow var(--dur-3) var(--ease-paper),
              transform var(--dur-1) var(--ease-paper);
}
.a-btn:active { transform: translateY(1px); }
.a-btn[disabled], .a-btn[aria-disabled='true'] { opacity: .4; cursor: not-allowed; transform: none; }
@media (hover: hover) { .a-btn:hover { --btn-bd: var(--c-text-muted); --btn-bg: rgb(255 255 255 / .05); } }

/* Der Hauptknopf traegt den Verlauf — hier darf die Marke laut sein. */
.a-btn--primary { --btn-fg: var(--c-text-on-accent); --btn-bd: transparent; background: var(--c-verlauf); }
@media (hover: hover) { .a-btn--primary:hover { box-shadow: var(--glow-accent); transform: translateY(-1px); background: var(--c-verlauf); --btn-bd: transparent; } }

.a-btn--vip { --btn-fg: var(--c-text-on-accent); --btn-bg: var(--c-vip); --btn-bd: var(--c-vip); }
@media (hover: hover) { .a-btn--vip:hover { box-shadow: var(--glow-vip); --btn-bg: var(--c-vip); --btn-bd: var(--c-vip); } }

.a-btn--hell { --btn-fg: var(--c-text-on-accent); --btn-bg: var(--c-text); --btn-bd: var(--c-text); }
@media (hover: hover) { .a-btn--hell:hover { --btn-bg: #fff; --btn-bd: #fff; } }

.a-btn--ghost { --btn-bd: transparent; }
.a-btn--sm { min-block-size: 2.25rem; padding-inline: var(--s-4); font-size: var(--t-2xs); }
.a-btn--icon { min-inline-size: 3rem; padding-inline: 0; }
.a-btn--sm.a-btn--icon { min-inline-size: 2.25rem; }

/* -- Eingabefeld ------------------------------------------------------------- */
.a-field {
  inline-size: 100%; min-block-size: 3rem; padding: var(--s-2) var(--s-4);
  font-family: var(--font-ui); font-size: var(--t-base); color: var(--c-text);
  background: var(--c-surface-sunk);
  border: 1px solid var(--c-line); border-radius: var(--r-full);
  transition: border-color var(--dur-2) var(--ease-inout), box-shadow var(--dur-2) var(--ease-inout);
}
.a-field::placeholder { color: var(--c-text-muted); }
.a-field:focus { outline: none; border-color: rgb(139 92 246 / .7); box-shadow: 0 0 0 3px rgb(139 92 246 / .16); }
.a-field[aria-invalid='true'] { border-color: var(--c-bad); }

/* -- Marke --------------------------------------------------------------------
   Auf dem Bild sitzend, deshalb mit eigenem dunklen Grund und Weichzeichner
   dahinter: sonst verschwindet sie im Print.                                 */
.a-mark {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: 2px var(--s-2);
  font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-text-body);
  background: rgb(8 7 10 / .78);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  backdrop-filter: blur(8px);
  white-space: nowrap;
}
.a-mark--good { color: var(--c-good); border-color: rgb(61 220 151 / .4); }
.a-mark--warn { color: var(--c-warn); border-color: rgb(232 155 60 / .45); }
.a-mark--bad  { color: var(--c-bad);  border-color: rgb(255 71 87 / .4); }
.a-mark--neon { color: var(--c-text-on-accent); background: var(--c-verlauf); border-color: transparent; }

/* -- VIP: das Gelb ist ausschliesslich hierfuer da ---------------------------- */
.a-vip {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: var(--s-1) var(--s-3);
  font-size: var(--t-2xs); font-weight: 700;
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--c-text-on-accent); background: var(--c-vip);
  border-radius: var(--r-full);
}
.a-vip--linie { color: var(--c-vip); background: transparent; border: 1px solid rgb(251 205 10 / .45); }

/* -- Trenner ------------------------------------------------------------------ */
.a-rule { block-size: 1px; border: 0; background: linear-gradient(90deg, var(--c-line), transparent); }

/* =============================================================================
   9  EFFEKTE
   ============================================================================= */

/* Neon-Print als Platzhalter, solange keine echten Stofffotos vorliegen.
   Bewusst als Druck auf schwarzem Sweat gedacht, nicht als graue Flaeche.   */
.a-stoff { position: absolute; inset: 0; background: #0A090C; overflow: hidden; }
.a-stoff::before {
  content: ''; position: absolute; inset: -20%;
  background:
    radial-gradient(24% 18% at 22% 26%, var(--p1, #FF00FF), transparent 62%),
    radial-gradient(22% 16% at 68% 34%, var(--p2, #8B5CF6), transparent 62%),
    radial-gradient(26% 20% at 40% 72%, var(--p3, #22D3EE), transparent 62%),
    radial-gradient(18% 14% at 78% 78%, var(--p4, #FBCD0A), transparent 62%);
  filter: blur(14px) saturate(1.3);
  opacity: .85;
}
.a-stoff::after {
  content: ''; position: absolute; inset: 0; opacity: .5; mix-blend-mode: overlay;
  background-image:
    repeating-linear-gradient(0deg, rgb(0 0 0 / .5) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgb(0 0 0 / .5) 0 1px, transparent 1px 3px);
}

/* Bildrahmen */
.a-figure { position: relative; overflow: hidden; background: var(--c-bg-tief); }
.a-figure img {
  display: block; inline-size: 100%; block-size: 100%; object-fit: cover;
  transition: transform var(--dur-5) var(--ease-paper);
}
@media (hover: hover) {
  .a-card--interactive:hover .a-figure img, .a-figure--zoom:hover img { transform: scale(1.06); }
}

/* Auftauchen beim Scrollen — ueber Scroll-Timeline, ohne Beobachter in JS.
   Der Ausgangszustand steht NUR innerhalb von @supports, deshalb braucht es
   keinen Fallback: aeltere Browser zeigen den Inhalt sofort.                */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .a-rise {
      animation: a-rise-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 24%;
    }
    @keyframes a-rise-in {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: none; }
    }
  }
}

/* Laufband — "Irgendwas ist immer" steht so auf vanaehlismus.de.

   Der Aufbau ist zwingend: die Spur enthaelt GENAU ZWEI identische Saetze,
   die Animation verschiebt um -50%. Nur dann trifft der Anfang des zweiten
   Satzes exakt dort auf, wo der erste stand, und der Uebergang ist unsichtbar.

   Zweite Bedingung: ein Satz muss mindestens so breit sein wie das Fenster.
   Ist er schmaler, laeuft er komplett aus dem Bild, bevor der zweite
   nachrueckt — dann klafft eine Luecke. Da die Textlaenge fest ist, die
   Fensterbreite aber nicht, sorgt js/atelier-laufband.js dafuer, dass der
   Satz oft genug wiederholt wird. Ohne dieses Skript laeuft nichts los. */
.a-laufband {
  overflow: hidden; border-block: var(--line); padding-block: var(--s-3);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.a-laufband__spur { display: flex; inline-size: max-content; align-items: center; }
.a-laufband__satz {
  display: flex; gap: var(--s-6); align-items: center;
  padding-inline-end: var(--s-6);   /* Abstand zum naechsten Satz — er gehoert
                                       IN den Satz, sonst stimmt die Haelfte nicht */
  flex: 0 0 auto; white-space: nowrap;
}
.a-laufband__spur span {
  font-family: var(--font-display); font-size: 1.35rem; text-transform: uppercase;
  color: var(--c-text-muted); letter-spacing: .04em;
}
@media (prefers-reduced-motion: no-preference) {
  .a-laufband--bereit .a-laufband__spur { animation: a-lauf var(--lauf-dauer, 32s) linear infinite; }
  @keyframes a-lauf { to { transform: translateX(-50%); } }
}

/* =============================================================================
   PARALLAX
   -----------------------------------------------------------------------------
   Der Hintergrund bleibt beim Scrollen scheinbar stehen, der Inhalt zieht
   darueber hinweg.

   Umgesetzt als scroll-gesteuerte CSS-Animation, nicht ueber einen
   Scroll-Listener: die laeuft im Compositor und bleibt auch dann fluessig,
   wenn der Hauptthread beschaeftigt ist — bei dieser App durchaus der Fall,
   dort haengen Firestore-Listener und Countdown-Intervalle dran.

   Bewusst NICHT background-attachment: fixed. Das ist der klassische Weg,
   iOS Safari ignoriert es aber und stellt still auf "scroll" um — der Effekt
   faellt dort ersatzlos aus, und zwar genau auf den Geraeten, auf denen die
   meisten Kundinnen unterwegs sind.

   Browser ohne Unterstuetzung bekommen ein stehendes Bild. Das ist kein
   Schaden, deshalb gibt es bewusst keinen JavaScript-Ersatz: ein zweiter
   Code-Pfad fuer einen reinen Schmuckeffekt lohnt den Unterhalt nicht.

   Das Bild ist hoeher als sein Rahmen und sitzt etwas oberhalb — sonst
   liefe beim Verschieben der untere Rand ins Bild.
   ============================================================================= */

.a-parallax { position: relative; overflow: clip; }
.a-parallax__ebene {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  /* Die Hoehe setzt js/atelier-parallax.js passend zum eingestellten Faktor.
     Der Wert hier ist nur der Ausgangszustand, falls das Skript nicht laeuft. */
  block-size: 100%;
  z-index: 0;
  pointer-events: none;
}
.a-parallax__ebene img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }

/* Die Bewegung selbst setzt js/atelier-parallax.js — die Begruendung fuer
   diesen Weg steht dort im Kopf. Ohne das Skript oder bei "Bewegung
   reduzieren" steht das Bild still, was voellig in Ordnung ist.

   Die Ebene ist hoeher als ihr Rahmen und sitzt etwas oberhalb, damit beim
   Verschieben kein Rand ins Bild laeuft. */

/* Ladeplatzhalter */
.a-skeleton {
  background: linear-gradient(100deg, var(--c-surface) 30%, var(--c-surface-up) 50%, var(--c-surface) 70%);
  background-size: 220% 100%;
  animation: a-shimmer-neon 1.6s var(--ease-inout) infinite;
  border-radius: var(--r-sm);
}
@keyframes a-shimmer-neon { from { background-position: 180% 0; } to { background-position: -40% 0; } }

/* Pulspunkt (laufendes Event) */
.a-punkt {
  inline-size: 7px; block-size: 7px; border-radius: var(--r-full);
  background: var(--c-good); box-shadow: 0 0 12px 2px rgb(61 220 151 / .5);
}
@media (prefers-reduced-motion: no-preference) {
  .a-punkt { animation: a-pulse-dot 2.6s var(--ease-inout) infinite; }
  @keyframes a-pulse-dot { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
}