/* ============================================================
   Einwilligungsbanner
   ============================================================

   Warum eine eigene Datei:

   Die Seite hat ZWEI Einstiegspunkte mit unterschiedlichen
   Stylesheets. index.php (die Startseite) laedt ausschliesslich
   rmn-2026.css; alle uebrigen Seiten laufen ueber page.php und
   includes/header.php und laden main.css.

   Der Banner stand nur in main.css. Auf der Startseite — also dort,
   wo die meisten Besucher zuerst landen — griff davon KEINE einzige
   Regel. Die Klassen des heutigen Markups (.cookie-card,
   .cookie-card-kicker, .cookie-btn …) kamen in rmn-2026.css gar nicht
   vor; dort lag noch eine Fassung fuer ein aelteres Markup
   (.cookie-banner-inner, .cookie-banner-head …), das es nicht mehr
   gibt. Ergebnis auf der Startseite: ein Balken ueber die volle
   Breite mit unformatierten Schaltflaechen statt der Karte.

   Deshalb liegt die Gestaltung jetzt hier und wird von BEIDEN
   Einstiegspunkten geladen. Eine Fassung, keine Kopien, die
   auseinanderlaufen koennen.

   Die Werte stammen aus einer Messung des freigegebenen Entwurfs
   (Kanten, Abstaende und Farben punktweise abgegriffen), nicht aus
   Schaetzung. Deshalb stehen Farben ausgeschrieben statt als
   Variablen: die Karte ist HELLER als die Seite und traegt einen
   helleren Rahmen als das uebrige Haarlinien-Grau — mit
   var(--hairline) verschwamm sie mit dem Hintergrund.

   Zwei Rahmentoene, das ist Absicht:
     #505050  aussen und um die zweite Schaltflaeche — hebt die Karte
              als eigenstaendige Flaeche vom Seitengrund ab
     #333333  innere Trennlinien — gliedern, ohne zu zerschneiden
   ============================================================ */

/* ── Einwilligungsbanner ───────────────────────────────────────────────
   Kompakte Karte unten links statt eines Balkens ueber die volle Breite.
   Ein Balken nimmt auf dem Telefon die halbe Hoehe und wirkt wie eine
   Sperre; die Karte laesst den Inhalt sichtbar. */
.cookie-banner{
  position:fixed;
  left:var(--pad,24px); bottom:var(--pad,24px);
  z-index:100;
  /* 444px, am freigegebenen Entwurf ausgemessen. */
  width:min(444px, calc(100vw - 2 * var(--pad,24px)));
  max-height:calc(100dvh - 2 * var(--pad,24px));
  overflow-y:auto;
  transform:translateY(12px);
  opacity:0;
  pointer-events:none;
  transition:transform .32s cubic-bezier(.22,1,.36,1), opacity .24s ease;
}
.cookie-banner.is-visible{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}
@media (prefers-reduced-motion: reduce){
  .cookie-banner{ transition:opacity .15s ease; transform:none; }
}

.cookie-card{
  /* Werte aus dem freigegebenen Entwurf ausgemessen, nicht geschaetzt.
     Deshalb stehen sie hier ausgeschrieben statt als Variablen: die
     Karte ist heller als die Seite (#0F0F0F auf #0A0A0A) und traegt
     einen deutlich helleren Rahmen als das uebrige Haarlinien-Grau.
     Mit var(--hairline) = #1C1C1C verschwamm sie mit dem Hintergrund.

     Zwei Rahmentoene, das ist Absicht:
       #505050  aussen und um die zweite Schaltflaeche — hebt die Karte
                als eigenstaendige Flaeche vom Seitengrund ab
       #333333  innere Trennlinien — gliedern, ohne zu zerschneiden */
  background:#0F0F0F;
  border:1px solid #505050;
  box-shadow:0 18px 48px -18px rgba(0,0,0,.75);
}

/* Kicker-Zeile mit Quadrat — dieselbe Sprache wie die Sektionslabels
   der Seite, damit der Banner nicht wie ein Fremdkoerper wirkt. */
.cookie-card-kicker{
  display:flex; align-items:center; gap:10px;
  padding:0 18px;
  min-height:43px;
  border-bottom:1px solid #333333;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:#999999;
}
.cookie-card-bullet{
  width:7px; height:7px;
  /* Gedaempft, nicht voll orange: das Quadrat setzt einen Akzent, es
     soll aber nicht mit der Schaltflaeche darunter konkurrieren. */
  background:#572D0B;
  flex:none;
}

.cookie-card-body{
  padding:16px 18px;
  border-bottom:1px solid #333333;
}
/* 13.2px ist keine runde Zahl, sondern das Ergebnis einer Messung:
   Bei 14px lief der Text 7% breiter als im Entwurf und brach ein Wort
   frueher um, bei 13px ein Wort spaeter. Bei 13.2px stimmen Zeilenbreiten
   und Umbruchstellen mit dem Entwurf ueberein. Der Zeilenabstand ist so
   gewaehlt, dass die Zeilen auf denselben Hoehen sitzen wie dort
   (13.2 x 1.56 = 20.6px, gemessen 20.5px). */
.cookie-card-text{
  margin:0;
  font-size:13.2px; line-height:1.56;
  color:#DADADA;
}
/* Der erste Satz traegt die Aussage und steht deshalb in der
   Vordergrundfarbe — der Rest erlaeutert. */
.cookie-card-text strong{
  color:#FAFAFA;
  font-weight:600;
}
.cookie-card-link{
  display:inline-block;
  margin-top:10px;
  font-size:12px;
  color:#999999;
  text-decoration:underline;
  text-underline-offset:3px;
}
.cookie-card-link:hover{ color:var(--orange); }
/* Der Verweis sitzt am Fuss des Details-Bereichs statt in der ersten
   Ansicht. Dort folgt er auf eine Aufstellung und braucht mehr Abstand. */
.cookie-card-prefs .cookie-card-link{ margin-top:16px; }

.cookie-card-actions{
  display:flex; align-items:stretch; flex-wrap:wrap; gap:8px;
  padding:14px 18px;
}
.cookie-btn{
  appearance:none; cursor:pointer;
  font:inherit;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:44px;
  padding:0 14px;
  border:1px solid transparent;
  border-radius:0;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600;
  white-space:nowrap;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.cookie-btn--primary{
  background:var(--orange); color:#0A0A0A;
  border-color:var(--orange);
}
.cookie-btn--primary:hover{
  background:color-mix(in oklab, var(--orange) 86%, white);
  border-color:color-mix(in oklab, var(--orange) 86%, white);
}
.cookie-btn--outline{
  background:transparent; color:#FAFAFA;
  /* Grauer Rahmen, nicht weiss: ein weisser Rahmen zoege den Blick von
     der eigentlichen Zustimmung daneben ab. */
  border-color:#505050;
}
.cookie-btn--outline:hover{ border-color:var(--orange); color:var(--orange); }
/* Dritte Ebene: nur Text. Die Wahl soll sichtbar sein, aber nicht mit
   den beiden Entscheidungen darueber konkurrieren. */
.cookie-btn--quiet{
  background:transparent; color:#939393;
  border-color:transparent;
  margin-left:auto;
  padding-left:4px; padding-right:4px;
}
.cookie-btn--quiet:hover{ color:#FAFAFA; }
.cookie-btn-caret{ font-size:9px; opacity:.7; }

/* HIER LAG DER EIGENTLICHE FEHLER.
   Die Steuerung blendet Schaltflaechen ueber das hidden-Attribut aus —
   "Auswahl speichern" ist in der ersten Ansicht verborgen und erscheint
   erst, wenn man Details oeffnet. Das display:none dafuer kommt aus dem
   Standard-Stylesheet des Browsers und wird von JEDER eigenen
   display-Angabe ueberstimmt. Durch display:inline-flex oben stand die
   Schaltflaeche also die ganze Zeit da: vier Knoepfe statt drei, die
   Reihe brach um und der Kasten wurde ueber 60px hoeher als vorgesehen.

   Gilt fuer alle Elemente des Banners, nicht nur die Schaltflaechen —
   auch der Details-Bereich wird ueber hidden gesteuert. */
.cookie-banner [hidden]{ display:none !important; }

.cookie-card-prefs{
  padding:4px 20px 16px;
  border-bottom:1px solid var(--hairline);
}
.cookie-card-subhead{
  margin:18px 0 8px;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-2);
}
.cookie-pref{
  display:flex; align-items:flex-start; gap:16px;
  padding:14px 0;
  border-bottom:1px solid var(--hairline);
}
.cookie-pref:last-of-type{ border-bottom:0; }
.cookie-pref-info{ flex:1; min-width:0; }
.cookie-pref-name{
  display:block;
  font-size:13px; font-weight:500; color:var(--fg);
  margin-bottom:3px;
}
.cookie-pref-desc{
  margin:0;
  font-size:12px; line-height:1.45; color:var(--muted);
}
.cookie-pref-toggle{ position:relative; flex:none; padding-top:2px; }
.cookie-pref-toggle input{
  position:absolute; inset:0;
  opacity:0; width:100%; height:100%;
  margin:0; cursor:pointer;
}
.cookie-pref-switch{
  display:block; width:38px; height:20px;
  background:var(--hairline);
  border:1px solid var(--hairline);
  position:relative;
  transition:background .15s ease;
}
.cookie-pref-switch::after{
  content:""; position:absolute;
  top:2px; left:2px; width:14px; height:14px;
  background:var(--muted);
  transition:transform .15s ease, background .15s ease;
}
.cookie-pref-toggle input:checked + .cookie-pref-switch{ background:color-mix(in oklab, var(--orange) 28%, transparent); }
.cookie-pref-toggle input:checked + .cookie-pref-switch::after{ transform:translateX(18px); background:var(--orange); }
.cookie-pref-toggle input:focus-visible + .cookie-pref-switch{ outline:2px solid var(--orange); outline-offset:2px; }
.cookie-pref-toggle--locked{ opacity:.55; }
.cookie-pref-toggle--locked input{ cursor:not-allowed; }

.cookie-detail-list{ list-style:none; margin:0; padding:0; }
.cookie-detail-item{
  display:grid;
  grid-template-columns:1fr auto;
  gap:2px 12px;
  padding:10px 0;
  border-bottom:1px solid var(--hairline);
  font-size:11px;
}
.cookie-detail-item:last-child{ border-bottom:0; }
.cookie-detail-name{ color:var(--fg); }
.cookie-detail-region{ color:var(--muted-2); text-align:right; }
.cookie-detail-purpose{ color:var(--muted); grid-column:1 / -1; }
.cookie-detail-gated{ color:var(--orange); grid-column:1 / -1; font-size:10px; }
.cookie-detail{
  margin-top:var(--s-3);
  padding-top:var(--s-3);
  border-top:1px solid var(--hairline);
}
.cookie-detail-summary{
  cursor:pointer;
  font-size:13px;
  letter-spacing:0.04em;
  color:var(--muted);
  list-style:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.cookie-detail-summary::-webkit-details-marker{ display:none; }
.cookie-detail-summary::before{
  content:'+';
  display:inline-block;
  width:14px;
  text-align:center;
  color:var(--orange);
  font-weight:500;
}
.cookie-detail[open] .cookie-detail-summary::before{
  content:'−';
}
.cookie-detail-summary:hover{ color:var(--fg); }
.cookie-detail-list{
  list-style:none;
  margin:var(--s-3) 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
}
.cookie-detail-item{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:4px 16px;
  padding:var(--s-2) 0;
  border-top:1px solid var(--hairline);
  font-size:12px;
  line-height:1.45;
}
.cookie-detail-item:first-child{ border-top:none; padding-top:0; }
.cookie-detail-name{
  grid-column:1;
  grid-row:1;
  color:var(--orange);
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
}
.cookie-detail-purpose{
  grid-column:2;
  grid-row:1;
  color:var(--fg);
}
.cookie-detail-region{
  grid-column:1;
  grid-row:2;
  color:var(--muted);
  font-size:11px;
  letter-spacing:0.04em;
}
.cookie-detail-gated{
  grid-column:2;
  grid-row:2;
  color:var(--muted);
  font-size:11px;
}

@media (max-width:560px){
  .cookie-banner{
    left:12px; right:12px; bottom:12px;
    width:auto;
  }
  .cookie-card-actions{ gap:8px; }
  .cookie-btn{ flex:1 1 auto; justify-content:center; }
  .cookie-btn--quiet{ margin-left:0; flex-basis:100%; }
}