/* =====================================================================
   bildschau.css — der Stil zur Bildschau (umgezogen am 07.10.2026)
   =====================================================================

   NICHT AUFGERAEUMT, SONDERN UMGEZOGEN. Diese Regeln standen in
   chat.css, weil die Bildschau am 25.09.2026 fuer den Chat gebaut
   wurde. Am 07.10.2026 sollte auch das Event-Banner darin geoeffnet
   werden -- und bereich.html laedt chat.css nicht. Es gab also genau
   zwei Wege: chat.css (5815 Zeilen) auf einer Seite mitladen, die
   keinen Chat hat, oder die 26 Regeln dorthin stellen, wo sie
   hingehoeren.

   Dieselbe Entscheidung wie bei der Code-Anzeige, die am 11.09.2026
   von personen.css nach start.css gewandert ist: Sobald ein Bauteil
   an ZWEI Stellen gebraucht wird, gehoert es keiner der beiden mehr.

   DIE REIHENFOLGE BLEIBT: In chat.html steht diese Datei direkt hinter
   chat.css, also genau dort, wo der Block vorher endete. Nach ihm kamen
   nur Regeln zum Bearbeiten einer Chatnachricht, die mit der Schau
   nichts zu tun haben -- nachgezaehlt, nicht angenommen: null fremde
   Regeln im Block, 26 eigene.
   ===================================================================== */

/* =====================================================================
   =====================================================================
   DIE BILDSCHAU (25.09.2026)
   =====================================================================
   =====================================================================

   Filipe: „wenn man bilder aufmacht, will ich dass die in der mitte
   sind. beim hochformat soll links der husky sein und rechts der hase
   und beim querformat soll oben dogfather und unten team dogi stehen
   da wo platz ist. … ich will nicht dahin geschmissen sondern was
   richtig geiles mit einem geilen hintergrund."

   DER GRUND IST DREI SCHICHTEN, nicht eine Farbe: ein tiefer Verlauf,
   drei weiche Lichter (violett, tuerkis, ein warmer Rest) und ein
   Schleier ganz aussen. Zusammen unter zehn Prozent Deckung -- ein
   Foto soll darauf liegen, nicht dagegen ankaempfen.

   KEIN REINES SCHWARZ. Genau das zeigt der Browser von sich aus, und
   genau daran hat Filipe es gemerkt. Schwarz ist keine Gestaltung,
   sondern ihr Fehlen.
   ===================================================================== */
.bildschau {
  width: 100vw; max-width: 100vw;
  height: 100dvh; max-height: 100dvh;
  padding: 0; margin: 0; border: 0;
  background: none;
  overflow: hidden;
  color: var(--text, #e8f1fa);
}
.bildschau::backdrop { background: rgba(3, 4, 9, .86); backdrop-filter: blur(6px); }

.bildschau__grund {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(70% 55% at 18% 8%, rgba(122, 92, 255, .16), transparent 66%),
    radial-gradient(62% 52% at 84% 88%, rgba(38, 200, 196, .13), transparent 68%),
    radial-gradient(48% 40% at 60% 46%, rgba(255, 176, 92, .06), transparent 70%),
    linear-gradient(168deg, #0a0b14 0%, #070811 55%, #05060c 100%);
}
/* Ein Schleier von aussen nach innen -- er zieht den Blick in die
   Mitte, ohne dass man ihn als Rahmen bemerkt. */
.bildschau__grund::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 95% at 50% 50%, transparent 52%, rgba(0, 0, 0, .55) 100%);
}

/* ---- Die Buehne: das Bild sitzt in der MITTE ----------------------- */
.bildschau__buehne {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  padding: 72px 4vw 56px;
}
.bildschau__bild {
  max-width: 92vw; max-height: 82dvh;
  width: auto; height: auto;
  border-radius: 14px;
  /* Ein feiner heller Saum trennt das Foto vom Grund, auch wenn seine
     Raender selbst dunkel sind. Ohne ihn franst ein dunkles Foto in
     den Hintergrund aus, und man sieht nicht mehr, wo es aufhoert. */
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .1),
    0 40px 90px -40px rgba(0, 0, 0, .95),
    0 0 90px -40px rgba(122, 92, 255, .5);
}

/* ---- Die Begleiter ------------------------------------------------- */
/* Sie liegen HINTER dem Bild (z-index 1 gegen 2) -- ein Husky, der
   ueber einem Foto liegt, waere keine Zierde, sondern ein Hindernis. */
.bildschau__figur {
  position: absolute; bottom: 0; z-index: 1;
  height: min(78dvh, 720px);
  width: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity .32s ease;
}
.bildschau__figur--links  { left: 0; }
/* NICHT SPIEGELN. Der erste Anlauf drehte den Hasen um, damit beide
   „nach innen" schauen -- ein alter Reflex aus dem Plakatsatz. Auf dem
   Probebild stand danach „Hasi Dog" seitenverkehrt auf seinem Hoodie.
   Beide Figuren sehen ohnehin nach vorn; es gibt nichts zu spiegeln,
   und Schrift im Bild spiegelt man nie. */
.bildschau__figur--rechts { right: 0; }
.bildschau[data-lage="hoch"] .bildschau__figur { opacity: .92; }

/* ---- Die zwei Schriftzuege ----------------------------------------- */
.bildschau__wort {
  position: absolute; left: 0; right: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .32s ease;
}
.bildschau__wort--oben  { top: 18px; }
.bildschau__wort--unten { bottom: 16px; }
.bildschau[data-lage="quer"] .bildschau__wort { opacity: 1; }
.bildschau__zeichen { width: 34px; height: 34px; filter: invert(1) opacity(.72); }
/* GESPERRT UND GROSS: Ein Schriftzug ist kein Satz. Die Sperrung macht
   aus zwei Woertern ein Zeichen -- man liest es nicht, man erkennt es. */
.bildschau__wort-text {
  font-size: clamp(1.1rem, 2.6vw, 1.9rem);
  font-weight: 800;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(232, 241, 250, .5);
  text-shadow: 0 0 26px rgba(122, 92, 255, .45);
}
.bildschau__wort--unten .bildschau__wort-text {
  font-size: clamp(.9rem, 2vw, 1.4rem);
  letter-spacing: .42em;
  color: rgba(232, 241, 250, .34);
}

/* ---- Die Leiste ---------------------------------------------------- */
.bildschau__leiste {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(4, 5, 11, .78), transparent);
}
.bildschau__name {
  flex: 1; min-width: 0;
  font-size: .86rem; color: rgba(232, 241, 250, .7);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 44 px hoch, auch am Rechner: Der Schliessen-Knopf ist der einzige
   Weg heraus, den man SIEHT (Escape kennt nicht jeder). */
.bildschau__knopf {
  flex: none;
  min-height: 44px; padding: 0 14px;
  display: inline-flex; align-items: center;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: var(--text, #e8f1fa);
  font: inherit; font-size: .84rem; font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.bildschau__knopf:hover { background: rgba(255, 255, 255, .13); }
.bildschau__knopf:focus-visible { outline: 2px solid #b9a7ff; outline-offset: 2px; }
.bildschau__zu { min-width: 44px; justify-content: center; padding: 0; font-size: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .bildschau__figur, .bildschau__wort { transition: none; }
}
/* Auf einem Telefon fuellt ein Foto den Schirm -- dort gibt es keinen
   Platz fuer Begleiter, und die Schau sagt das ueber `data-lage`
   ohnehin selbst. Hier bleibt nur die Buehne enger. */
@media (max-width: 620px) {
  .bildschau__buehne { padding: 64px 12px 24px; }
  .bildschau__bild { max-width: 96vw; max-height: 78dvh; }
}