/* ==========================================================================
   Hintergrund hinter dem Handy, Fassung 6: Variante a „Versetzt“, von Steven gewählt (13.11.2026), mit leiserem Blau.
   Sein Urteil zur ersten Fassung: „Das Blau knallt zu sehr. Das Grüne ist okay.“ Deshalb ist der tiefe blaue Kern heller
   und durchsichtiger, der weite Schein zurückgenommen. Mint ist unverändert.
   Wird NACH r_v5.css geladen und gestaltet nur .kk-grund und dessen Kinder.

   Idee: Derselbe weiche, blaue Charakter wie in der Grundlage, aber nicht mittig. Das Licht kommt von schräg hinten:
   - .g-weit  heller blauer Schein, umhüllt das Handy, Schwerpunkt rechts von der Mitte
   - .g-kern  tieferes Blau hinter der rechten Schulter des Handys (der eigentliche Schwerpunkt)
   - .g-mint  leiser mintgrüner Fleck links unterhalb, als Gegengewicht: So entsteht die Diagonale
   Alle drei sind schräg gestellte Ovale aus reinen Verläufen (kein Weichzeichner, keine Bewegung).

   Maße: --g-b = Breite des Films, --g-h = seine Höhe. Alle Größen hängen daran, so passt es bei jeder Breite.
   Der Kasten ist nie breiter als das Fenster (kein seitliches Überlaufen) und schneidet seine Kinder ab.
   Nach unten blendet alles aus: Im unteren Fünftel des Handys ist der Grund weiß.
   ========================================================================== */

.kk-grund {
  --g-b: min(372px, 100vw - 2 * var(--rand));
  --g-h: calc(var(--g-b) * 1382 / 864);
  --g-dreh: -26deg;
  /* Abfall der Flecken: weich wie eine Glockenkurve, ohne sichtbare Stufe */
  --g-blau: 219 234 254;
  --g-tief: 206 226 254;      /* vorher 191 219 254: zu kräftig */
  --g-gruen: 209 250 229;

  position: absolute;
  z-index: -1;
  left: calc(var(--rand) * -1);
  right: calc(var(--rand) * -1);
  top: calc(var(--g-h) * -.42);
  width: auto;
  height: calc(var(--g-h) * 1.2);
  transform: none;
  overflow: hidden;
  pointer-events: none;
  background: none;
  /* Oben ein weicher Einstieg (hinter Überschrift und Knöpfen bleibt nur ein Hauch),
     unten blendet alles aus, bevor der Film ausläuft: Dort ist der Grund weiß. */
  -webkit-mask-image: linear-gradient(transparent 0%, rgb(0 0 0 / .5) 9%, #000 20%, #000 72%, rgb(0 0 0 / .82) 78%, rgb(0 0 0 / .5) 84%, rgb(0 0 0 / .2) 90%, rgb(0 0 0 / .05) 94%, transparent 97%);
  mask-image: linear-gradient(transparent 0%, rgb(0 0 0 / .5) 9%, #000 20%, #000 72%, rgb(0 0 0 / .82) 78%, rgb(0 0 0 / .5) 84%, rgb(0 0 0 / .2) 90%, rgb(0 0 0 / .05) 94%, transparent 97%);
}

.kk-grund > span {
  position: absolute;
  /* Mitte des Ovals: --g-x ab der Mitte der Bühne, --g-y ab der Oberkante der Bühne */
  left: calc(50% + var(--g-x) - var(--g-w) / 2);
  top: calc(var(--g-h) * .42 + var(--g-y) - var(--g-t) / 2);
  width: var(--g-w);
  height: var(--g-t);
  transform: rotate(var(--g-dreh));
  background: radial-gradient(closest-side,
    rgb(var(--g-f, var(--g-blau)) / calc(var(--g-a, 1) * 1)) 0%,
    rgb(var(--g-f, var(--g-blau)) / calc(var(--g-a, 1) * .94)) 12%,
    rgb(var(--g-f, var(--g-blau)) / calc(var(--g-a, 1) * .8)) 26%,
    rgb(var(--g-f, var(--g-blau)) / calc(var(--g-a, 1) * .6)) 40%,
    rgb(var(--g-f, var(--g-blau)) / calc(var(--g-a, 1) * .4)) 54%,
    rgb(var(--g-f, var(--g-blau)) / calc(var(--g-a, 1) * .23)) 67%,
    rgb(var(--g-f, var(--g-blau)) / calc(var(--g-a, 1) * .11)) 79%,
    rgb(var(--g-f, var(--g-blau)) / calc(var(--g-a, 1) * .035)) 90%,
    rgb(var(--g-f, var(--g-blau)) / 0) 100%);
}

/* Handy (unter 768 px): Das Handy füllt fast die ganze Breite, die Karten stehen darunter.
   Blau schaut über die rechte Schulter, Mint sitzt links auf halber Höhe am Rand. */
.kk-grund .g-weit { --g-a: .62; --g-x: calc(var(--g-b) * .2);   --g-y: calc(var(--g-h) * .2);   --g-w: calc(var(--g-b) * 2.2); --g-t: calc(var(--g-b) * 1.7); }
.kk-grund .g-kern { --g-f: var(--g-tief);  --g-a: .58; --g-x: calc(var(--g-b) * .49);  --g-y: calc(var(--g-h) * .084); --g-w: calc(var(--g-b) * 1.3); --g-t: calc(var(--g-b) * 1); }
.kk-grund .g-mint { --g-f: var(--g-gruen); --g-a: .8;  --g-x: calc(var(--g-b) * -.6);  --g-y: calc(var(--g-h) * .46);  --g-w: calc(var(--g-b) * 1.4); --g-t: calc(var(--g-b) * 1.05); }

/* Tablet (768 bis 1023 px): Neben dem Handy ist Platz, die Flecken dürfen sich zeigen */
@media (min-width: 768px) {
  .kk-grund .g-weit { --g-a: .7; }
  .kk-grund .g-kern { --g-a: .66; --g-w: calc(var(--g-b) * 1.5); --g-t: calc(var(--g-b) * 1.1); }
  .kk-grund .g-mint { --g-a: 1; --g-x: calc(var(--g-b) * -.66); --g-w: calc(var(--g-b) * 1.5); --g-t: calc(var(--g-b) * 1.12); }
}

/* Computer (ab 1024 px): volle Fassung, die Karten liegen links und rechts auf dem Verlauf */
@media (min-width: 1024px) {
  .kk-grund { --g-b: 432px; }
  .kk-grund .g-weit { --g-x: 130px;  --g-y: 170px; --g-w: 1040px; --g-t: 780px; }
  .kk-grund .g-kern { --g-x: 212px;  --g-y: 58px;  --g-w: 780px;  --g-t: 540px; }
  .kk-grund .g-mint { --g-x: -300px; --g-y: 300px; --g-w: 720px;  --g-t: 540px; }
}