/* ==========================================================================
   Dashboard-Hintergrund „Skyline bei Sonnenaufgang“ (js/dash/hintergrund.js) und durchscheinende Widgets.
   Atmosphäre, kein Inhalt: nie lauter als die Karten. Nur Variablen (--hg-* in css/app.css).
   --hg-staerke (0 / 1 / 1.6) setzt das Skript aus der Einstellung „Dashboard-Hintergrund“.
   Bewegung nur über opacity und transform; will-change nur an Licht und den zwei Skyline-Ebenen.
   ========================================================================== */
.dash-hg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; --hg-staerke: 1; contain: strict; }
.dash-hg > * { position: absolute; inset: 0; }

/* 1) Grund: Galaxy Black oben, ein Hauch wärmer unten (hell: warmes Off-White zu Seal Grey) */
.hg-grund { background: linear-gradient(180deg, var(--hg-0) 0%, var(--hg-1) 100%); }

/* 1b) Himmel: feine Sterne nur im Dunkeln (--hg-stern, hell 0), Dunst als weicher Streifen über dem Horizont */
.hg-himmel { height: 60%; bottom: auto; fill: var(--hg-linie); opacity: calc(var(--hg-stern) * min(1, var(--hg-staerke)));
  -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent 100%); mask-image: linear-gradient(180deg, #000 20%, transparent 100%); }
.hg-dunst { background: linear-gradient(180deg, transparent 38%, var(--hg-dunst) 62%, var(--hg-saum) 82%, transparent 100%); opacity: min(1, var(--hg-staerke)); }

/* 2) Sonnenaufgangs-Licht: großer oranger Schein unten rechts (knapp außerhalb), kleiner kühler Schimmer oben links; atmet langsam */
.hg-licht {
  inset: -10%;
  background:
    radial-gradient(70vw 70vw at 96% 108%, var(--hg-licht), transparent 72%),
    radial-gradient(120vw 40vw at 70% 112%, var(--hg-saum), transparent 75%),
    radial-gradient(38vw 38vw at 4% -6%, var(--hg-kuehl), transparent 72%);
  opacity: min(1, var(--hg-staerke));
  will-change: transform, opacity;
  animation: hg-atmen 28s ease-in-out infinite alternate;
}
@keyframes hg-atmen { from { transform: scale(1); opacity: min(1, var(--hg-staerke)); } to { transform: scale(1.06); opacity: calc(min(1, var(--hg-staerke)) * .94); } }

/* 3) Blaupausen-Raster: Punkte im 40-px-Takt, Mitte ausgeblendet, zu den Rändern sichtbar */
.hg-raster {
  background-image: radial-gradient(circle at 1px 1px, var(--hg-raster) 1px, transparent 1.5px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 45%, transparent 35%, #000 100%);
  mask-image: radial-gradient(ellipse 60% 55% at 50% 45%, transparent 35%, #000 100%);
  opacity: min(1, var(--hg-staerke));
}

/* 4) Linien-Skyline: unten verankert, bis etwa 55 % der Höhe, nach oben und seitlich weich auslaufend */
.hg-skyline { top: auto; height: 55%; width: 100%; fill: none; stroke: var(--hg-linie); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round;
  -webkit-mask-image: linear-gradient(0deg, #000 35%, transparent 100%), linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(0deg, #000 35%, transparent 100%), linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-composite: intersect;
}
.hg-skyline * { vector-effect: non-scaling-stroke; }
.hg-fern { opacity: calc(var(--hg-fern) * var(--hg-staerke)); will-change: transform; }
.hg-fern .hg-ebene { transform: translateY(-90px) scale(.78); transform-origin: 50% 100%; }
.hg-hinten { opacity: calc(var(--hg-hinten) * var(--hg-staerke)); will-change: transform; }
.hg-vorn { will-change: transform; }
.hg-vorn .hg-ebene, .hg-boden { opacity: calc(var(--hg-vorn) * var(--hg-staerke)); }
/* beleuchtete Fenster: ruhig, ohne Bewegung (Seal Grey, hell dunkles Grau) */
.hg-hell rect { fill: var(--hg-fenster); stroke: none; opacity: min(1, var(--hg-staerke)); }
.hg-hinten .hg-ebene { transform: translateY(-40px) scale(.9); transform-origin: 50% 100%; }
/* orange Fenster: glimmen nacheinander ganz langsam auf und ab (Zeichen für „Mieteingang“) */
.hg-glut rect { fill: var(--accent); stroke: none; opacity: 0; filter: drop-shadow(0 0 6px var(--hg-glow)); animation: hg-glut var(--z, 10s) ease-in-out var(--v, 0s) infinite; }
@keyframes hg-glut { 0%, 100% { opacity: 0; } 45%, 60% { opacity: calc(var(--hg-glut) * min(1, var(--hg-staerke))); } }

/* 5) Körnung gegen Banding */
.hg-korn {
  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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay; opacity: var(--hg-korn);
}

/* 6) Vignette */
.hg-vignette { background: radial-gradient(ellipse 90% 85% at 50% 45%, transparent 55%, var(--hg-vignette) 100%); }

/* „Aus“: nur der ruhige Grundverlauf */
.dash-hg.hg-aus > :not(.hg-grund) { display: none; }
/* Ohne Bewegung: statisches Bild (Fenster leuchten gleichmäßig schwach) */
.dash-hg.hg-statisch .hg-licht { animation: none; }
.dash-hg.hg-statisch .hg-glut rect { animation: none; opacity: calc(var(--hg-glut) * .6 * min(1, var(--hg-staerke))); }
/* Versteckter Tab, Ziehen im Raster: alles steht */
.dash-hg.hg-pause *, html.dash-zieht .dash-hg * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .hg-licht, .hg-glut rect { animation: none !important; } }
html.ohne-bewegung .hg-licht, html.ohne-bewegung .hg-glut rect { animation: none !important; }

/* Handy: nur Grund, Licht und vordere Skyline; keine Körnung, kein Parallax (Skript), kein Raster */
@media (max-width: 760px) {
  .hg-raster, .hg-korn, .hg-hinten, .hg-fern, .hg-himmel { display: none; }
  .hg-licht, .hg-glut rect { animation: none; }   /* Akku: am Handy keine Dauerschleifen */
  .hg-skyline { height: 42%; }
}

/* ---------- Seite über dem Hintergrund ---------- */
/* Der Seitengrund wird durchsichtig, damit der Hintergrund hinter dem Raster liegt (Kopf behält seine Glasfläche) */
html.mit-dash-hg, html.mit-dash-hg body { background: transparent; }
html.mit-dash-hg { background-color: var(--hg-0); }

/* Widgets leicht durchscheinend: Kartenfarbe 62 % (hell 70 %), Unschärfe 14 px dahinter: die Skyline ist als weicher
   Schimmer zu ahnen, Linien scheinen nie scharf durch Zahlen. Kontrast an der ungünstigsten Stelle gerechnet (Stärke
   „kräftig“, oranger Schein und Saum unten rechts, Linien): dunkel --ink-3 5,7 : 1, --akzent-schrift 5,2 : 1; hell
   --ink-3 5,6 : 1, --akzent-schrift 4,7 : 1, --warn 4,9 : 1. Mehr Durchsicht ginge im Hellen auf Kosten des Orange. */
html.mit-dash-hg .dash2 .widget {
  background-color: var(--card-glas);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.mit-dash-hg .dash2 .widget { background-color: color-mix(in srgb, var(--card) 94%, transparent); }
}

/* Anmeldeseite: dieselbe Linien-Skyline dezent unten im Informationsteil (ohne glimmende Fenster) */
.anm-info { position: relative; overflow: hidden; isolation: isolate; }
.anm-skyline { position: absolute; inset: auto 0 0 0; height: 46%; z-index: -1; pointer-events: none; opacity: .07; }
.anm-skyline .hg-skyline { position: absolute; inset: auto 0 0 0; height: 100%; }
@media (max-width: 760px) { .anm-skyline { display: none; } }
@media (prefers-reduced-transparency: reduce) {
  html.mit-dash-hg .dash2 .widget { background-color: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; }
}