/* ============================================================================
   Di Stella Cadente — Stimmungsbilder und Bewegung
   Ergaenzt stil.css. Wird NACH stil.css geladen.

   Aufbau: 1 Netz · 2 Buehnenbilder · 3 Laufband · 4 Tiefband · 5 Bildstapel
           6 Lesefortschritt · 7 Bewegte Zeichen · 8 Ruhe und Umbrueche

   Grundsatz wie im Rest der Seite: kein Fremdcode, kein Scroll-Hijacking.
   Jede Bewegung ist Zierde — ohne sie ist die Seite vollstaendig da.
   ========================================================================== */

/* ---------------------------------------------------------------- 1 Netz -- */
/* Das Netz gehoert auf main, nie auf html/body: dort macht clip die Seite
   unscrollbar. Kopf, Fusszeile und schwebende Elemente stehen ausserhalb. */
main { overflow-x: clip; }


/* ------------------------------------------------------- 2 Buehnenbilder -- */
/* Ein Foto hinter Hero und Kopfbild. Es liegt unter dem Sternenfeld (z -3),
   traegt keine Aussage und ist deshalb alt="". */

.buehne {
  position: absolute; inset: -8% 0 -8%;
  z-index: -3;
  overflow: hidden;
}
.buehnenbild {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 38%;
  transform: scale(1.06);
}
.buehne-still .buehnenbild { object-position: center 34%; }

/* Tagbilder in einem Nachtkopf: nicht per opacity ausbleichen — das mischt sie
   nur ins Dunkelblau und laesst nichts mehr erkennen. Stattdessen abdunkeln und
   leicht entsaettigen, dann bleibt die Zeichnung des Bildes sichtbar. */
.kopfbild-foto .buehnenbild { filter: saturate(.62) brightness(.78) contrast(1.02); }

/* Das Bild atmet ganz langsam — 40 s, kaum wahrnehmbar, nie ruckelnd. */
.js .hero-foto .buehnenbild { animation: atmen 44s ease-in-out infinite alternate; }

@keyframes atmen {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(0, -1.2%, 0); }
}

/* Mehr Schleier, sobald ein Foto darunter liegt — sonst traegt die Schrift
   ihren Kontrast nicht. Die Werte sind gemessen, nicht geschaetzt. */
.hero-foto .hero-schleier,
.kopfbild-foto .hero-schleier {
  background:
    radial-gradient(60% 48% at 50% 44%, rgba(6, 10, 26, .62), rgba(6, 10, 26, .3) 78%),
    linear-gradient(to bottom, rgba(8, 12, 30, .55) 0%, rgba(8, 12, 30, .25) 38%, rgba(10, 15, 36, .92) 100%);
}
.kopfbild-foto { position: relative; isolation: isolate; }
.kopfbild-foto::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(64% 54% at 50% 40%, rgba(6, 10, 26, .62), rgba(6, 10, 26, .2) 82%),
    linear-gradient(to bottom, rgba(8, 12, 30, .4), rgba(8, 12, 30, .18) 40%, rgba(10, 15, 36, .9));
}
.abschluss-foto::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(56% 58% at 50% 44%, rgba(8, 12, 30, .46), rgba(8, 12, 30, .1) 80%),
    linear-gradient(to bottom, rgba(10, 15, 36, .7), rgba(10, 15, 36, .3) 44%, rgba(10, 15, 36, .8));
}
.abschluss-foto { position: relative; isolation: isolate; }


/* ------------------------------------------------------------ 3 Laufband -- */
/* Acht Naturbilder, die endlos durchlaufen. Die Reihe steht zweimal im HTML —
   die zweite Haelfte ist per aria-hidden aus dem Vorlesefluss genommen, damit
   niemand die Bildunterschriften doppelt hoert. */

.laufbandabschnitt {
  background: var(--creme-2);
  padding-block: clamp(2rem, 4vw, 3.2rem);
  border-top: 1px solid rgba(33, 38, 60, .08);
  border-bottom: 1px solid rgba(33, 38, 60, .08);
}
.laufband { position: relative; overflow: hidden; }

/* Weiche Kanten links und rechts, damit die Bilder nicht abgeschnitten wirken. */
.laufband::before, .laufband::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(2rem, 8vw, 7rem);
  z-index: 2; pointer-events: none;
}
.laufband::before { left: 0;  background: linear-gradient(to right, var(--creme-2), transparent); }
.laufband::after  { right: 0; background: linear-gradient(to left,  var(--creme-2), transparent); }

.laufband-spur { display: flex; width: max-content; }
.laufband-reihe {
  display: flex; gap: clamp(.7rem, 1.6vw, 1.1rem);
  padding-right: clamp(.7rem, 1.6vw, 1.1rem);
  flex: none;
}
.js .laufband-spur { animation: laufen 64s linear infinite; }
.laufband[data-angehalten="wahr"] .laufband-spur,
.laufband:hover .laufband-spur,
.laufband:focus-within .laufband-spur { animation-play-state: paused; }

@keyframes laufen {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.laufband-stueck { flex: none; }
.laufband-stueck figure {
  position: relative; margin: 0;
  width: clamp(180px, 30vw, 340px);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--nacht);
  box-shadow: 0 10px 26px -20px rgba(10, 15, 36, .6);
}
.laufband-bild {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform 900ms cubic-bezier(.22, .61, .36, 1), filter 600ms ease;
  filter: saturate(.92);
}
.laufband-stueck figure:hover .laufband-bild { transform: scale(1.05); filter: saturate(1.05); }
.laufband-stueck figcaption {
  position: absolute; left: .7rem; bottom: .7rem;
  padding: .22rem .6rem; border-radius: 100px;
  background: rgba(10, 15, 36, .68);
  border: 1px solid rgba(244, 220, 174, .28);
  color: var(--gold-hell);
  font-size: .68rem; letter-spacing: .09em; text-transform: uppercase;
}

/* Anhalten von Hand — Pflicht, sobald sich etwas laenger als fuenf Sekunden
   von selbst bewegt (WCAG 2.2.2). */
.laufband-halt {
  position: absolute; right: .6rem; top: .6rem; z-index: 3;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  border: 1px solid rgba(33, 38, 60, .18);
  background: rgba(255, 255, 255, .88);
  cursor: pointer; display: grid; place-items: center;
  transition: background var(--uebergang), border-color var(--uebergang);
}
.laufband-halt:hover { background: #fff; border-color: rgba(200, 148, 74, .55); }
.laufband-halt-zeichen {
  width: .58rem; height: .68rem; display: block;
  border-left: 3px solid var(--tinte); border-right: 3px solid var(--tinte);
}
.laufband-halt[aria-pressed="true"] .laufband-halt-zeichen {
  width: 0; height: 0; border: none;
  border-left: 9px solid var(--tinte); border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
html:not(.js) .laufband-halt { display: none; }


/* ------------------------------------------------------------- 4 Tiefband -- */
/* Ein bildschirmbreites Nachtbild mit einem einzigen Satz darin. */

.tiefband {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(340px, 52vh, 520px);
  display: grid; align-items: center;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  color: var(--hell);
  background: var(--nacht);
}
.tiefband-bild { position: absolute; inset: -12% 0; z-index: -2; }
.tiefband-bild .bandbild, .buehne .bandbild {
  width: 100%; height: 100%; object-fit: cover; object-position: center 45%;
}
.tiefband-schleier {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(62% 58% at 50% 48%, rgba(8, 12, 30, .58), rgba(8, 12, 30, .3) 80%),
    linear-gradient(to bottom, rgba(10, 15, 36, .62), rgba(10, 15, 36, .3) 46%, rgba(10, 15, 36, .8));
}
.tiefband-innen { position: relative; text-align: center; }
.tiefband-satz {
  font-size: var(--grad-gross); margin-bottom: .4em;
  text-wrap: balance;
}
.tiefband-satz em {
  font-style: italic;
  background: linear-gradient(100deg, var(--gold-hell) 6%, var(--gold-warm) 52%, var(--rose) 98%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tiefband-text {
  color: var(--hell-leise); font-size: var(--grad-klein);
  max-width: 52ch; margin-inline: auto;
}


/* ---------------------------------------------------------- 5 Bildstapel -- */
/* Foto hinten, gezeichnete Nachtszene davor — die Zeichnung bleibt das
   Markenzeichen, das Foto gibt ihr Grund. */

.bildstapel { position: relative; padding-bottom: clamp(2.5rem, 7vw, 5rem); }
.bildrahmen-foto {
  margin: 0; border-radius: var(--radius-gross); overflow: hidden;
  box-shadow: var(--schatten-tief);
}
.rahmenbild { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.bildrahmen-schnuppe {
  position: absolute; left: clamp(-.5rem, -2vw, -1.6rem); bottom: 0;
  width: clamp(160px, 46%, 260px);
  margin: 0; border-radius: var(--radius); overflow: hidden;
  border: 1px solid rgba(244, 220, 174, .28);
  box-shadow: var(--schatten-tief);
  background: var(--nacht);
}
.bildrahmen-schnuppe figcaption {
  padding: .55rem .8rem .7rem;
  font-size: .72rem; line-height: 1.4; color: var(--hell-leise);
}


/* ------------------------------------------------------ 6 Lesefortschritt -- */

.lesefortschritt {
  position: sticky; top: 0; z-index: 90;
  height: 2px; background: transparent; pointer-events: none;
}
.lesefortschritt span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--gold), var(--gold-warm), var(--gold-hell));
  transform-origin: left;
}
html:not(.js) .lesefortschritt { display: none; }


/* --------------------------------------------------- 7 Bewegte Zeichen ---- */
/* Die vier Versprechen-Zeichen zeichnen sich, sobald sie auftauchen, und
   schweben danach kaum merklich. */

.js .karte-zeichen svg { transition: transform 700ms cubic-bezier(.22, .61, .36, 1); }
.js .karte.sichtbar .karte-zeichen svg { animation: schweben 6s ease-in-out infinite; }
.karte:hover .karte-zeichen svg { transform: rotate(-6deg) scale(1.08); }

@keyframes schweben {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* Der Stern in der Kopfzeile dreht sich beim Ueberfahren einmal weiter. */
.marke:hover .marke-stern { transform: rotate(72deg); }


/* ------------------------------------------------ 8 Ruhe und Umbrueche ---- */

@media (prefers-reduced-motion: reduce) {
  .js .hero-foto .buehnenbild,
  .js .laufband-spur,
  .js .karte.sichtbar .karte-zeichen svg { animation: none !important; }
  .js .laufband-spur { transform: none; }
  .laufband-spur .laufband-reihe:nth-child(2) { display: none; }
  .lesefortschritt { display: none; }
}

@media (max-width: 900px) {
  .bildrahmen-schnuppe { position: static; width: 100%; margin-top: .9rem; }
  .bildstapel { padding-bottom: 0; }
}

@media (max-width: 620px) {
  .buehnenbild { opacity: .5; }
  .laufband::before, .laufband::after { width: 2rem; }
}

@media print {
  .buehne, .tiefband-bild, .laufbandabschnitt, .lesefortschritt { display: none !important; }
  .tiefband { background: #fff !important; color: #000 !important; min-height: 0; }
}


/* --------------------------------------------------------- 9 Rudel-Mosaik -- */
/* Acht Fotos von Karins Hunden auf «Unsere Hunde».
   Sechs davon sind Studioaufnahmen vor fast schwarzem Grund — deshalb steht der
   Abschnitt auf Nacht: die Bilder verlieren ihre Kante und schweben, statt in
   einem hellen Rahmen zu kleben. Die zwei Aussenbilder (Schnee, Wiese) sind
   dadurch die hellen Akzente.

   Zehn Spalteneinheiten auf fuenf Spalten: die zwei Querformate zaehlen doppelt,
   damit die zwei Reihen glatt aufgehen. Ein Hochformat im Verhaeltnis 3:4 und
   ein Querformat ueber zwei Spalten im Verhaeltnis 3:2 sind fast genau gleich
   hoch — deshalb steht die Reihe gerade, ohne dass eine Hoehe gesetzt wird. */

.rudel {
  position: relative; isolation: isolate; overflow: hidden;
  background: radial-gradient(120% 100% at 50% 0%, #17203f 0%, var(--nacht) 62%);
  padding-block: var(--luft);

  /* 🔴 Ein dunkler Abschnitt muss die ROLLEN setzen, nicht nur `color`.
     stil.css faerbt `.fliess` mit `--schrift-leise`, und das steht ohne diesen
     Block auf `--tinte-leise` — also fast schwarz auf nachtblau. Gemessen am
     08.09.2026: rgb(33,38,60) auf dem Nachtgrund, praktisch unlesbar, und der
     Absatz war ausgerechnet der Einleitungstext. `color` allein reicht nicht,
     weil die Kindregel ihre eigene Farbe setzt. */
  --grund: var(--nacht);
  --schrift: var(--hell);
  --schrift-leise: var(--hell-leise);
  --linie: var(--nacht-rand);
  --akzent: var(--gold-warm);
  color: var(--hell);
}
.rudel .sternenfeld { z-index: -1; }
.rudel-kopf { margin-inline: auto; }
.rudel-text { color: var(--hell-leise); margin-inline: auto; }

.rudelgitter {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(.6rem, 1.4vw, 1.1rem);
}
.rudel-quer { grid-column: span 2; }

.rudel-stueck figure {
  position: relative; margin: 0; height: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background: #0b0f1f;
  border: 1px solid rgba(226, 214, 190, .1);
}
.rudel-bild {
  width: 100%; height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover; object-position: center 30%;
  transition: transform 900ms cubic-bezier(.22, .61, .36, 1);
}
.rudel-quer .rudel-bild { aspect-ratio: 3 / 2; object-position: center 45%; }

/* Der Name steht immer da, nicht erst beim Ueberfahren: auf einem Handy gibt es
   kein Ueberfahren, und dann waere die Beschriftung gar nicht erreichbar. */
.rudel-name {
  position: absolute; left: .6rem; bottom: .6rem;
  padding: .24rem .7rem; border-radius: 100px;
  background: rgba(10, 15, 36, .72);
  border: 1px solid rgba(244, 220, 174, .3);
  color: var(--gold-hell);
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
}
.rudel-stueck figure:hover .rudel-bild { transform: scale(1.04); }

@media (max-width: 1000px) {
  .rudelgitter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rudel-quer { grid-column: span 2; }
}
/* Zwei Spalten bleiben bis hinunter zu 320 px. Bei einer Spalte stapeln sich
   acht Bilder zu acht Bildschirmhoehen — gemessen bei 390 px: 8 Reihen. Ein
   Mosaik, durch das man scrollen muss, ist kein Mosaik mehr. */
@media (max-width: 319px) {
  .rudelgitter { grid-template-columns: minmax(0, 1fr); }
  .rudel-quer { grid-column: span 1; }
}
@media (prefers-reduced-motion: reduce) {
  .rudel-stueck figure:hover .rudel-bild { transform: none; }
}