/* ============================================================================
   EMBER – HINTERGRUND-THEME
   ----------------------------------------------------------------------------
   Zentrale Hintergrundebene für alle EMBER-Bereiche (Login, Dashboard, Module).

   Aktivierung:   <html class="ember-bg" data-bg="app">
   Einbindung:    <link rel="stylesheet" href="/assets/css/ember-background.css">

   Diese Datei enthält ausschließlich Darstellung. Keine Layoutregeln,
   keine Komponenten, keine Abhängigkeit zu anderen Stylesheets.
   Sie kann jederzeit entfernt werden, ohne dass EMBER kaputtgeht –
   ohne die Klasse am <html>-Element passiert schlicht nichts.

   Stand: 28.08.2026
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. STELLSCHRAUBEN
   Alles, was man später ändern will, steht hier. Nur hier.
   --------------------------------------------------------------------------- */
:root{
  /* Grundfarbe hinter allem – auch sichtbar, solange das Bild lädt */
  --ember-bg-base:      #0A0A0B;

  /* Bildquelle. Wird weiter unten je Bildschirmbreite überschrieben. */
  --ember-bg-image:     url("../backgrounds/ember-bg-1536.webp");
  --ember-bg-position:  center;

  /* Die zwei Regler, die über Wirkung und Lesbarkeit entscheiden */
  --ember-bg-opacity:   .46;   /* Deckkraft des Bildes            0 = aus     */
  --ember-bg-scrim:     .60;   /* Dichte des Lesbarkeitsschleiers 0 = keiner  */

  /* Deckkraft der Inhaltsflächen. Höher = Hintergrund tritt zurück. */
  --ember-surface-alpha: .76;
}

/* ---------------------------------------------------------------------------
   2. EBENEN
   Zwei fixierte Ebenen hinter dem Inhalt:
   ::before trägt das Bild, ::after den Schleier, der die Mitte ruhig hält.

   Bewusst KEIN background-attachment: fixed – das ruckelt auf iOS.
   Fixierte Pseudo-Elemente übernimmt der Compositor.
   --------------------------------------------------------------------------- */
html.ember-bg{
  background-color: var(--ember-bg-base);
}
html.ember-bg body{
  background-color: transparent;   /* damit die Ebenen sichtbar bleiben */
}

html.ember-bg body::before{
  content:"";
  position:fixed; inset:0;
  z-index:-2;
  pointer-events:none;
  background-image: var(--ember-bg-image);
  background-size: cover;          /* skaliert proportional – verzerrt nie */
  background-position: var(--ember-bg-position);
  background-repeat: no-repeat;
  opacity: var(--ember-bg-opacity);
}

html.ember-bg body::after{
  content:"";
  position:fixed; inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(74% 64% at 50% 44%,
      rgba(10,9,10, var(--ember-bg-scrim)) 0%,
      rgba(10,9,10,.38) 58%,
      rgba(10,9,10,0)  100%),
    linear-gradient(180deg,
      rgba(10,9,10,.50) 0%,
      rgba(10,9,10,.18) 42%,
      rgba(10,9,10,.55) 100%);
}

/* ---------------------------------------------------------------------------
   3. AUFLÖSUNGSSTUFEN
   Immer dasselbe Seitenverhältnis, nur andere Kantenlänge.
   --------------------------------------------------------------------------- */
@media (max-width: 900px){
  :root{ --ember-bg-image: url("../backgrounds/ember-bg-800.webp"); }
}
@media (min-width: 901px) and (max-width: 1399px){
  :root{ --ember-bg-image: url("../backgrounds/ember-bg-1200.webp"); }
}

/* Smartphone hochkant: eigene Fassung.
   Das Querformat würde hier so stark beschnitten, dass die Glut verschwindet.
   Die Hochformat-Datei enthält dasselbe Bild unverzerrt am unteren Rand. */
@media (orientation: portrait) and (max-width: 820px){
  :root{
    --ember-bg-image:    url("../backgrounds/ember-bg-portrait-900.webp");
    --ember-bg-position: bottom center;
    --ember-bg-opacity:  .28;
  }
}

/* ---------------------------------------------------------------------------
   4. BEREICHS-VARIANTEN
   Dieselbe Datei, andere Intensität – gesteuert über data-bg am <html>.
   --------------------------------------------------------------------------- */

/* Login: das Bild darf die Bühne sein */
html.ember-bg[data-bg="login"]{
  --ember-bg-opacity:   .85;
  --ember-bg-scrim:     .30;
  --ember-surface-alpha: .92;
}

/* Arbeitsoberfläche: dezent, der Inhalt führt */
html.ember-bg[data-bg="app"]{
  --ember-bg-opacity:   .46;
  --ember-bg-scrim:     .60;
  --ember-surface-alpha: .76;
}

/* Bereiche mit viel Text, Tabellen oder Formularen */
html.ember-bg[data-bg="quiet"]{
  --ember-bg-opacity:   .16;
  --ember-bg-scrim:     .86;
  --ember-surface-alpha: .94;
}

/* ---------------------------------------------------------------------------
   5. BILDLAUFLEISTEN
   Gilt für alle scrollbaren Bereiche unterhalb von html.ember-bg –
   Seite, Seitenleiste, Tabellen, Textfelder. Bewusst schmal und ruhig;
   erst beim Anfassen glüht der Griff.
   --------------------------------------------------------------------------- */
:root{
  --ember-scroll-size:   11px;
  --ember-scroll-track:  rgba(255,255,255,.035);
  --ember-scroll-thumb:  #4B3327;
  --ember-scroll-hot:    #FF6A13;
}

/* Firefox */
html.ember-bg{
  scrollbar-width: thin;
  scrollbar-color: var(--ember-scroll-thumb) var(--ember-scroll-track);
}

/* WebKit / Blink */
html.ember-bg ::-webkit-scrollbar{
  width:  var(--ember-scroll-size);
  height: var(--ember-scroll-size);
}
html.ember-bg ::-webkit-scrollbar-track{
  background: var(--ember-scroll-track);
  border-radius: 99px;
}
html.ember-bg ::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, #5C3D2A 0%, #3A2A22 100%);
  border: 3px solid transparent;      /* erzeugt die Luft um den Griff */
  background-clip: padding-box;
  border-radius: 99px;
}
html.ember-bg ::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, var(--ember-scroll-hot) 0%, #A33C07 100%);
  background-clip: padding-box;
}
html.ember-bg ::-webkit-scrollbar-thumb:active{
  background: linear-gradient(180deg, #FF9247 0%, var(--ember-scroll-hot) 100%);
  background-clip: padding-box;
}
html.ember-bg ::-webkit-scrollbar-corner{ background: transparent; }

/* ---------------------------------------------------------------------------
   6. GLUTSCHICHT ("forge")
   Für Bereiche, in denen EMBER Bühne sein darf: Login, Passwort vergessen,
   Fehler- und Wartungsseiten, Onboarding.

   Aktiviert durch Einbinden von /assets/js/ember-forge.js – das Skript legt
   die Ebenen selbst an. Ohne das Skript passiert hier nichts.
   --------------------------------------------------------------------------- */
.forge{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }

/* Glutbecken aus den Ecken, langsam atmend */
.forge__bed{
  position:absolute; inset:0;
  background:
    radial-gradient(58% 46% at -6% 106%, rgba(255,124,28,.56) 0%, rgba(255,80,10,.18) 38%, rgba(255,80,10,0) 68%),
    radial-gradient(46% 40% at 106% 104%, rgba(255,108,20,.32) 0%, rgba(230,70,10,.10) 40%, rgba(230,70,10,0) 68%),
    radial-gradient(52% 44% at 104% -6%, rgba(255,120,26,.38) 0%, rgba(230,80,12,.12) 38%, rgba(230,80,12,0) 68%);
  animation: forge-bed 9s ease-in-out infinite;
}
@keyframes forge-bed{ 0%,100%{ opacity:.80; } 50%{ opacity:1; } }

/* Hitzeschleier in der Mitte, hinter dem Inhalt */
.forge__halo{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(820px,130vw); height:min(820px,130vw);
  background:radial-gradient(circle, rgba(255,106,19,.22) 0%, rgba(255,106,19,.08) 38%, rgba(255,106,19,0) 68%);
  animation: forge-halo 7s ease-in-out infinite;
}
@keyframes forge-halo{
  0%,100%{ transform:translate(-50%,-50%) scale(1);    opacity:.85; }
  50%    { transform:translate(-50%,-50%) scale(1.08); opacity:1; }
}

/* Feuerlinie am unteren Rand: dort, wo die Glut liegt */
.forge__line{
  position:absolute; left:0; right:0; bottom:0; height:clamp(90px,16vh,190px);
  background:linear-gradient(0deg,
    rgba(255,116,24,.30) 0%,
    rgba(255,96,16,.12) 34%,
    rgba(255,96,16,0) 100%);
  animation: forge-flicker 3.4s ease-in-out infinite;
}
@keyframes forge-flicker{
  0%,100%{ opacity:.85; transform:scaleY(1); }
  38%    { opacity:1;   transform:scaleY(1.06); }
  61%    { opacity:.78; transform:scaleY(.97); }
}
.forge__line{ transform-origin:bottom; }

.forge__sparks{ position:absolute; inset:0; width:100%; height:100%; }

/* Bewegung gelöscht: die Glut bleibt stehen, sie verschwindet nicht */
html[data-motion="off"] .forge__bed,
html[data-motion="off"] .forge__halo,
html[data-motion="off"] .forge__line{ animation:none; }

/* ---------------------------------------------------------------------------
   7. RÜCKSICHTEN
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .forge__bed, .forge__halo, .forge__line{ animation:none; }
}

/* Datensparmodus: Grundfarbe genügt */
@media (prefers-reduced-data: reduce){
  html.ember-bg body::before{ background-image:none; }
}

/* Hoher Kontrast erzwungen: Hintergrund zurücknehmen */
@media (prefers-contrast: more){
  html.ember-bg{ --ember-bg-opacity:.12; --ember-bg-scrim:.92; --ember-surface-alpha:.97; }
}

/* Druck: Hintergrund weg */
@media print{
  html.ember-bg body::before,
  html.ember-bg body::after{ display:none; }
}