/* Bereichsabhängige Wasserzeichen – Dartabend (tanisas.work)
   Eingebunden in App.razor direkt nach app.css. Gilt nur für .theme-shell (ThemeShell.razor) und
   überschreibt keine bestehenden Regeln für .hero, .poster, .topbar, .tablewrap oder Karten.

   Aufbau:
   - .theme-shell bildet einen eigenen Stapelkontext (isolation:isolate). Das Motiv liegt als ::before
     mit z-index:-1 darin: über dem (durchsichtigen) Hintergrund des Wrappers, unter allen Inhalten.
     Die Fehlerleiste #blazor-error-ui liegt außerhalb des Wrappers und bleibt obenauf.
   - Der Wrapper selbst bleibt durchsichtig, damit die vorhandenen Radialverläufe des body
     sichtbar bleiben. Lädt ein Bild nicht, bleibt genau dieser grüne Hintergrund stehen.
   - Die Bild-URLs stehen nur in Custom Properties. Angefordert wird erst die Datei, die
     background-image tatsächlich verwendet: ein Motiv, eine Gerätevariante.
   - Pfade sind relativ zu dieser CSS-Datei und funktionieren deshalb auch unter einem Base-Path. */

.theme-shell{
  position:relative;
  isolation:isolate;
  min-height:100vh;
  min-height:100svh;
  --wm-desktop:none;
  --wm-mobile:none;
  --wm-opacity:.58;
}

.theme-shell::before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  z-index:-1;
  width:min(100%,1100px);
  aspect-ratio:1;
  background-image:var(--wm-desktop);
  background-position:right top;
  background-size:contain;
  background-repeat:no-repeat;
  opacity:var(--wm-opacity);
  pointer-events:none;
  /* Motiv läuft nach links und unten weich aus – keine harte Bildkante, ruhige Fläche unter Tabellen */
  -webkit-mask-image:radial-gradient(ellipse 100% 100% at 100% 0,#000 0,#000 42%,rgba(0,0,0,.55) 66%,transparent 92%);
          mask-image:radial-gradient(ellipse 100% 100% at 100% 0,#000 0,#000 42%,rgba(0,0,0,.55) 66%,transparent 92%);
}

/* Zuordnung Theme → Motiv (Werte kommen aus Services/PageTheme.cs) */
.theme-shell[data-page-theme="home"]{
  --wm-desktop:url("images/watermarks/home-desktop.webp");
  --wm-mobile:url("images/watermarks/home-mobile.webp");
  /* Auf der Startseite liegt das Hero-Bild darüber; das Wasserzeichen nur leicht dazu */
  --wm-opacity:.42;
}
.theme-shell[data-page-theme="spielinfo"]{
  --wm-desktop:url("images/watermarks/spielinfo-desktop.webp");
  --wm-mobile:url("images/watermarks/spielinfo-mobile.webp");
}
.theme-shell[data-page-theme="spiele"]{
  --wm-desktop:url("images/watermarks/spiele-desktop.webp");
  --wm-mobile:url("images/watermarks/spiele-mobile.webp");
}
.theme-shell[data-page-theme="saison"]{
  --wm-desktop:url("images/watermarks/saison-desktop.webp");
  --wm-mobile:url("images/watermarks/saison-mobile.webp");
}
.theme-shell[data-page-theme="spielplan"]{
  --wm-desktop:url("images/watermarks/spielplan-desktop.webp");
  --wm-mobile:url("images/watermarks/spielplan-mobile.webp");
}
.theme-shell[data-page-theme="profil"]{
  --wm-desktop:url("images/watermarks/profil-desktop.webp");
  --wm-mobile:url("images/watermarks/profil-mobile.webp");
}
/* Anmelden und Registrieren: ruhige Konto-Variante des Trikots */
.theme-shell[data-page-theme="konto"]{
  --wm-desktop:url("images/watermarks/profil-desktop.webp");
  --wm-mobile:url("images/watermarks/profil-mobile.webp");
  --wm-opacity:.4;
}
.theme-shell[data-page-theme="verwaltung"]{
  --wm-desktop:url("images/watermarks/verwaltung-desktop.webp");
  --wm-mobile:url("images/watermarks/verwaltung-mobile.webp");
}
.theme-shell[data-page-theme="spielarten"]{
  --wm-desktop:url("images/watermarks/spielarten-desktop.webp");
  --wm-mobile:url("images/watermarks/spielarten-mobile.webp");
}
.theme-shell[data-page-theme="turnier"]{
  --wm-desktop:url("images/watermarks/turnier-desktop.webp");
  --wm-mobile:url("images/watermarks/turnier-mobile.webp");
}
/* Lesetexte, die direkt auf dem Hintergrund stehen (nicht in Karten/Panels): ein weicher dunkler Hof
   trennt sie von den Goldkonturen. Gilt nur innerhalb des Theme-Wrappers und nur für Seiten mit Motiv. */
.theme-shell:not([data-page-theme="neutral"]) :is(.poster p,.rulehint,.loginhint,.thero-date,.tvfoot p){
  text-shadow:0 0 2px #03140b,0 0 6px #03140b,0 0 12px rgba(3,20,11,.9);
}

/* "neutral" (Fehlerseite, unbekannte Pfade): keine Variablen gesetzt → kein Motiv, kein Request */
.theme-shell[data-page-theme="neutral"]::before{content:none}

/* Smartphone: nur die kleine Variante, kompakt oben, höchstens Viewportbreite, etwas dezenter */
@media (max-width:767.98px){
  .theme-shell{--wm-opacity:.5}
  .theme-shell[data-page-theme="home"]{--wm-opacity:.36}
  .theme-shell[data-page-theme="konto"]{--wm-opacity:.34}
  .theme-shell::before{
    width:min(100%,560px);
    background-image:var(--wm-mobile);
  }
}

/* Hoher Kontrast / erzwungene Farben und Druck: keine Motive */
@media (forced-colors:active){
  .theme-shell::before{content:none;display:none}
}
@media print{
  .theme-shell::before{content:none;display:none}
}