/* ==========================================================================
   Einwilligung — Leiste unten, Einstellungen im Dialog

   Gleichwertigkeit ist hier eine Rechtsfrage, keine Geschmacksfrage: "Alle
   akzeptieren" und "Nur notwendige" haben dieselbe Groesse, dieselbe Form,
   dieselbe Schriftstaerke und stehen nebeneinander. Unterschiedlich ist nur
   die Fuellung — und die ablehnende Schaltflaeche ist NICHT ausgegraut,
   sondern traegt vollen Kontrast. "Einstellungen" darf leichter sein, weil es
   kein Ausweg, sondern eine Vertiefung ist.

   Kein Amber: die Hausregel haelt Amber dem Moment der Umwandlung vor, und
   eine Einwilligung ist keiner. Die Zustimmung sitzt in Mint — und zwar in
   genau der Paarung, die der Rest der Seite schon benutzt:
   --mint-hell auf --tinte-deep, gemessene 9,08:1 (siehe .btn-mint).

   Token-Namen: der dunkle Grund heisst --tinte-deeper, die helle Flaeche
   --paper. Nicht raten — bmd-tokens.css nachsehen.
   ========================================================================== */

.cc{
  position:fixed; inset:auto 0 0 0; z-index:200;
  background:var(--tinte-deeper);
  border-top:1px solid oklch(0.700 0.130 182 / 0.45);
  box-shadow:0 -18px 50px oklch(0.14 0.025 198 / 0.5);
  color:var(--paper);
}
.cc[hidden]{ display:none; }
.cc-in{
  max-width:var(--wrap); margin:0 auto;
  padding:clamp(1.1rem, 2.4vw, 1.6rem) var(--pad-x);
  display:grid; gap:clamp(1rem, 2.4vw, 1.75rem);
}
.cc-h{
  font:650 clamp(1.05rem, 1.8vw, 1.3rem)/1.25 var(--fd);
  letter-spacing:-0.01em; color:var(--paper);
}
.cc-p{
  margin-top:0.5rem; max-width:62ch;
  font-size:var(--fs-s); line-height:1.6;
  color:oklch(0.975 0.006 190 / 0.86);
}
.cc-link{ color:var(--mint-hell); text-decoration:underline; text-underline-offset:0.22em; }

.cc-btns{ display:flex; flex-wrap:wrap; gap:0.65rem; align-items:center; }

/* Die beiden Hauptschaltflaechen sind bis auf die Fuellung identisch. */
.cc-b{
  font:600 1rem/1 var(--fb); letter-spacing:0.01em;
  border-radius:14px; padding:0.95rem 1.5rem; min-width:12rem;
  text-align:center; cursor:pointer; border:1.5px solid transparent;
  transition:background-color var(--dur-base) var(--eq), color var(--dur-base) var(--eq),
             border-color var(--dur-base) var(--eq);
}
.cc-b--ja{ background:var(--mint-hell); color:var(--tinte-deep); border-color:var(--mint-hell); }
.cc-b--nein{ background:transparent; color:var(--paper); border-color:var(--paper); }
.cc-b--mehr{
  min-width:0; padding:0.95rem 0.5rem; border-color:transparent;
  color:oklch(0.975 0.006 190 / 0.86); text-decoration:underline;
  text-underline-offset:0.22em; background:transparent;
}
.cc-b:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-radius:14px; }
@media (hover:hover){
  .cc-b--ja:hover{ background:var(--mint); border-color:var(--mint); }
  .cc-b--nein:hover{ background:oklch(0.975 0.006 190 / 0.12); }
  .cc-b--mehr:hover{ color:var(--paper); }
}
@media (min-width:900px){
  .cc-in{ grid-template-columns:minmax(0,1fr) auto; align-items:center; }
  .cc-btns{ justify-content:flex-end; }
}

/* Die Leiste liegt ueber dem Seitenende. Solange sie steht, bekommt die Seite
   unten Luft, damit sie nichts verdeckt — vor allem nicht den Absendeknopf. */
.has-cc body{ padding-bottom:17rem; }
@media (min-width:900px){ .has-cc body{ padding-bottom:9.5rem; } }

/* --- Handy: die Leiste darf den ersten Bildschirm nicht verdecken -------- */
/* Gemessen am 13.09.2026 auf 390x844: 320 px hoch, Oberkante bei y 515 — der
   Telefonknopf der Buehne (y 522–573) und die Vertrauens-Chips lagen darunter.
   Ohne Ueberschrift, mit kuerzerem Text (bmd-consent.js) und den beiden
   gleichwertigen Knoepfen nebeneinander bleibt sie unter 190 px; der
   Telefonknopf und die ersten Chip-Reihen sind wieder frei. Die
   Gleichwertigkeit bleibt: beide Knoepfe teilen sich das Raster zur Haelfte. */
@media (max-width:599px){
  .cc-h{ display:none; }
  .cc-in{ padding:0.85rem var(--pad-x) 0.9rem; gap:0.7rem; }
  .cc-p{ margin-top:0; font-size:0.875rem; line-height:1.45; }
  .cc-btns{ display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; }
  .cc-b{ min-width:0; padding:0.75rem 0.5rem; font-size:0.95rem; border-radius:12px; }
  .cc-b--mehr{ grid-column:1 / -1; padding:0.2rem 0.5rem 0; font-size:0.875rem; }
  .has-cc body{ padding-bottom:12.5rem; }
}

/* --- Einstellungen ------------------------------------------------------- */

.cc-dlg{
  border:0; padding:0; max-width:min(38rem, calc(100vw - 2rem));
  border-radius:var(--radius-l); background:var(--paper); color:var(--tinte);
  /* Der Reset setzt * { margin:0 } — damit faellt die Browser-Vorgabe
     margin:auto weg und der Dialog klebt oben links statt in der Mitte. */
  margin:auto;
  box-shadow:0 40px 90px oklch(0.14 0.025 198 / 0.45);
}
.cc-dlg::backdrop{ background:oklch(0.14 0.025 198 / 0.62); }
.cc-dlg-in{
  padding:clamp(1.5rem, 4vw, 2.25rem); position:relative;
  display:grid; gap:1.25rem;
}
.cc-dlg-h{
  font:650 clamp(1.3rem, 2.6vw, 1.7rem)/1.2 var(--fd);
  letter-spacing:-0.014em; color:var(--tinte); padding-right:5rem;
}
.cc-row{
  display:grid; gap:0.45rem;
  border-top:1px solid oklch(0.300 0.050 196 / 0.16); padding-top:1.1rem;
  position:relative;
}
.cc-sw{ display:flex; align-items:center; gap:0.7rem; cursor:pointer; }
.cc-sw input{ width:1.15rem; height:1.15rem; accent-color:var(--mint-tief); cursor:pointer; }
.cc-sw input:disabled{ cursor:default; }
.cc-sw-t{ font:650 1.05rem/1.2 var(--fd); color:var(--tinte); }
.cc-row-p{ font-size:var(--fs-s); line-height:1.6; color:oklch(0.300 0.050 196 / 0.88); max-width:52ch; }
.cc-fest{
  position:absolute; top:1.15rem; right:0;
  font:600 var(--fs-kick)/1 var(--fb); letter-spacing:var(--ls-kick); text-transform:uppercase;
  color:var(--mint-tief);
}
.cc-dlg .cc-b--nein{ color:var(--tinte); border-color:var(--tinte); }
.cc-dlg .cc-b:focus-visible{ outline-color:var(--mint-tief); }
@media (hover:hover){
  .cc-dlg .cc-b--nein:hover{ background:oklch(0.300 0.050 196 / 0.08); }
}
.cc-x{
  position:absolute; top:clamp(1.4rem, 3.4vw, 2rem); right:clamp(1.5rem, 4vw, 2.25rem);
  background:none; border:0; cursor:pointer;
  font:600 var(--fs-s)/1 var(--fb); color:var(--mint-tief);
  text-decoration:underline; text-underline-offset:0.22em;
}
.cc-x:focus-visible{ outline:2px solid var(--mint-tief); outline-offset:3px; }

@media (prefers-reduced-motion: no-preference){
  .cc{ animation:ccAuf var(--dur-slow) var(--eq) both; }
  @keyframes ccAuf{ from{ transform:translateY(100%); } to{ transform:none; } }
}

/* --- Schalter in der Rechtszeile des Fusses ------------------------------ */
/* Er sieht aus wie die Links daneben, ist aber ein Knopf: er fuehrt nirgendwo
   hin, er oeffnet etwas. Ohne JavaScript taete er nichts, also ist er dann
   auch nicht da — .no-js ersetzt bmd-site.js beim ersten Paint. */
.no-js .nur-js{ display:none; }
.foot-recht button[data-consent-open]{
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; color:oklch(0.975 0.006 190 / 0.6);
}
.foot-recht button[data-consent-open]:hover{ color:var(--mint-hell); }
.foot-recht button[data-consent-open]:focus-visible{
  outline:2px solid var(--mint-hell); outline-offset:3px;
}


/* --- Widerruf im Fliesstext ---------------------------------------------- */
/* Ein Knopf, der wie ein Link aussieht — er fuehrt nirgendwo hin, er oeffnet
   die Einstellungen. Dunkler Grund ist der Normalfall, siehe Abschnitt 10 in
   bmd-unterseiten.css: ein vergessener Wrapper soll hellen Text auf hellem
   Grund ergeben, nicht unsichtbaren Text. */
.inline-link{
  background:none; border:0; padding:0; font:inherit; cursor:pointer;
  color:var(--mint-hell); text-decoration:underline;
  text-underline-offset:0.22em; text-decoration-thickness:1.5px;
}
.screen .inline-link{ color:var(--mint-tief); }
.inline-link:focus-visible{ outline:2px solid currentColor; outline-offset:3px; }