/* ===========================================================================
   PINKI — das gemeinsame Hinweis-Fenster (Franz, 22.08.2026)
   ===========================================================================
   EIN Fenster fuer alles, was das Portal und die Landingpages erklaeren oder
   abweisen muessen: Pinki-Erklaertexte und der Bild-/Video-Schutz. Vorbild ist
   Franz' Zweitprojekt (eeg-ewiv.eu/musterseite.html): ein zentriertes Fenster
   statt der nackten Browser-Blase "portal.8xregio.com enthaelt".

   Bewusst KEIN <dialog>-Element: Safari hat das erst spaet und lueckenhaft
   bekommen, ein normales div mit role="dialog" tut hier dasselbe.

   FARBEN SIND FEST — KEIN var(), KEINE VERERBUNG (Franz-Gesetz UEG, 22.08.2026).
   Vorher standen hier var(--c-panel, …) & Co. mit den Navy-Werten als Rueckfall.
   Das sah auf jeder Domain anders aus, weil jede Seite die Variablen anders
   belegt. Mira hat es live gemessen:
     - chance.8xregio.com: Karte rgb(11,56,111) = #0b386f, weil chance --c-panel
       so definiert — auf einer fast schwarzen Seite (rgb(0,8,26)) ein Fremdkoerper.
     - legal/impressum.html: Text rgb(43,46,51), weil diese Seite --c-text fuer
       HELLEN Untergrund setzt — dunkler Text auf dunkler Karte, kaum lesbar.
     - Im Portal stimmte es nur zufaellig, weil dort dieselben Werte gelten.
   Die Werte unten sind exakt die frueheren Rueckfallwerte; sie sind jetzt
   verbindlich. Das Fenster bringt seine Farben selbst mit und fragt die Seite
   nicht mehr. Wer es aendert, aendert es fuer ALLE Domains — genau so ist es
   gemeint. Bitte hier KEIN var(--…) wieder einfuehren; tests/pinki.test.js
   prueft das ausdruecklich.
   =========================================================================== */

/* Der Rahmen: fuellt das Fenster, zentriert die Karte. */
.pinki-ov{
  position:fixed; inset:0; z-index:100000;
  display:grid; place-items:center;
  padding:24px 16px;
}
.pinki-ov[hidden]{ display:none; }

/* Abgedunkelter Hintergrund — ein Klick darauf schliesst (siehe pinki.js). */
.pinki-bg{
  position:absolute; inset:0;
  background:rgba(0,4,14,.72);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}

/* Die Karte. Oberkante in 8XREGIO-Magenta — das ist das Erkennungszeichen. */
.pinki-karte{
  position:relative;
  width:min(520px,100%);
  max-height:calc(100vh - 48px); overflow:auto;
  background:#08182f;
  border:1px solid rgba(201,166,87,.28);
  border-top:4px solid #e6007e;
  border-radius:14px;
  box-shadow:0 24px 70px rgba(0,0,0,.6);
  padding:22px 24px 18px;
  animation:pinki-auf .16s ease-out;
}
@keyframes pinki-auf{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* Titelzeile: Magenta, Grossbuchstaben, gesperrt. Rechts bleibt Platz fuer das ✕. */
.pinki-titel{
  margin:0 40px 12px 0;
  color:#e6007e;
  font-size:.95rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.09em; line-height:1.35;
}

/* Fliesstext. Franz 04.09.2026: "Die Schrift ist zu dunkel. Bitte heller und im
   hellen Modus ebenfalls pruefen. Generell fuer alle Hinweise!" - gemessen: im
   hellen Modus erbte .muted die Seitenfarbe #454e5c (dunkelgrau) auf der dunklen
   Karte, kaum lesbar. Die Karte ist immer dunkel, also stehen ALLE Textfarben
   hier fest - auch fuer .muted, das die Hinweise aus dem Portal mitbringen. */
.pinki-text{ color:#dde5ee; font-size:.94rem; line-height:1.62; }
.pinki-text .muted{ color:#b9c6d6 !important; }
.pinki-text p{ margin:0 0 10px; }
.pinki-text p:last-child{ margin:0; }
.pinki-text ul,.pinki-text ol{ margin:0 0 10px; padding-left:20px; }
.pinki-text li{ margin:0 0 5px; }
.pinki-text strong{ color:#c9a657; }
.pinki-text a{ color:#c9a657; }

/* Rundes ✕ oben rechts. */
.pinki-x{
  position:absolute; top:12px; right:12px;
  width:30px; height:30px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(201,166,87,.28);
  color:#9fb0c4;
  font-size:1.05rem; line-height:1; cursor:pointer; padding:0;
  transition:.15s;
}
.pinki-x:hover{ background:#e6007e; border-color:#e6007e; color:#fff; }
.pinki-x:focus-visible{ outline:2px solid #e6007e; outline-offset:2px; }

/* "Verstanden" unten rechts. */
.pinki-fuss{ display:flex; justify-content:flex-end; margin-top:18px; }
.pinki-ok{
  background:#e6007e; color:#fff;
  border:none; border-radius:8px;
  padding:9px 20px;
  font-size:.86rem; font-weight:700; letter-spacing:.02em;
  cursor:pointer; transition:.15s;
}
.pinki-ok:hover{ filter:brightness(1.1); }
.pinki-ok:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* ---------------------------------------------------------------------------
   Das "pinki" selbst: der runde Info-Knopf, der das Fenster oeffnet.
   Rund, 20px, Magenta, weisses kursives i in Georgia. Das ist das definierte
   Zeichen — nicht neu erfinden.
   --------------------------------------------------------------------------- */
.pinki{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%;
  background:#e6007e; color:#fff;
  font-family:Georgia,'Times New Roman',serif;
  font-size:12px; font-weight:800; font-style:italic; line-height:1;
  border:none; padding:0; cursor:pointer;
  vertical-align:middle; margin-left:6px;
  box-shadow:0 1px 4px rgba(230,0,126,.45);
  transition:.15s;
}
.pinki:hover{ filter:brightness(1.08); transform:scale(1.12); }
.pinki:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* Schmale Geraete: die Karte darf die volle Breite nehmen. */
@media (max-width:480px){
  .pinki-ov{ padding:14px 10px; }
  .pinki-karte{ padding:18px 16px 14px; border-radius:12px; }
  .pinki-titel{ font-size:.88rem; margin-right:36px; }
  .pinki-fuss{ justify-content:stretch; }
  .pinki-ok{ width:100%; padding:11px 20px; }
}

/* Wer Bewegung reduziert haben will, bekommt sie nicht. */
@media (prefers-reduced-motion:reduce){
  .pinki-karte{ animation:none; }
  .pinki-x,.pinki-ok,.pinki{ transition:none; }
}