/* ============================================================
   Cookie-Hinweis und Cookie-Einstellungen
   Eigene Datei, damit page.css unberuehrt bleibt.
   Gestaltung nach Vorgabe vom 14.10.2026 (Variante "dunkel").

   Grundregel, die hier nicht veraendert werden darf:
   "Ablehnen" und "Akzeptieren" sehen exakt gleich aus.
   Kein gefuellter, kein hervorgehobener Knopf. Das ist
   Vorschrift, keine Geschmacksfrage.
   ============================================================ */

:root{
  --cc-bg:#1F2C00;
  --cc-head:#FBFCF7;
  --cc-text:#E6F7C0;
  --cc-label:#BDDA79;
  --cc-line:rgba(230,247,192,.4);
  --cc-trenn:rgba(230,247,192,.2);
  --cc-kasten:rgba(230,247,192,.06);
  --cc-pad:clamp(20px,5vw,80px);
}

/* ---------- gemeinsame Knoepfe ---------- */
.cc-btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:16px 18px;
  border:1px solid var(--cc-line); border-radius:0;
  background:transparent; color:var(--cc-text);
  font-family:var(--ui); font-size:11px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; text-align:center;
  cursor:pointer; transition:color .35s;
}
.cc-btn > span{position:relative; z-index:2}
/* Fuellung laeuft von unten nach oben hoch */
.cc-btn::before{
  content:""; position:absolute; inset:0; background:var(--cc-text);
  transform:scaleY(0); transform-origin:bottom; z-index:1;
  transition:transform .4s cubic-bezier(.16,.84,.28,1);
}
.cc-btn:hover{color:var(--cc-bg)}
.cc-btn:hover::before{transform:scaleY(1)}
.cc-btn:focus-visible{outline:2px solid var(--cc-label); outline-offset:3px}

/* ---------- gemeinsame Links ---------- */
.cc-links{display:flex; gap:22px; flex-wrap:wrap; margin-top:12px}
.cc-links a{
  font-family:var(--ui); font-size:13px; color:var(--cc-text);
  text-decoration:underline; text-underline-offset:3px;
}
.cc-links a:hover{color:var(--cc-head)}
.cc-links a:focus-visible{outline:2px solid var(--cc-label); outline-offset:3px}

/* ============================================================
   Ebene 1: der Banner
   ============================================================ */
#cc-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:9000;
  background:var(--cc-bg); border-top:1px solid var(--cc-line);
  padding:22px var(--cc-pad);
  font-family:var(--ui); color:var(--cc-text);
}
#cc-banner[hidden]{display:none}

/* Breites Fenster: Keks links, Text in der Mitte, Knoepfe rechts.
   Der Keks steht ueber alle drei Textzeilen hinweg in seiner eigenen Spalte. */
.cc-banner-inner{
  display:grid; max-width:1600px; margin:0 auto;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:
    "keks titel knoepfe"
    "keks text  knoepfe"
    "keks links knoepfe";
  column-gap:clamp(20px,3vw,44px); row-gap:6px;
  align-items:center;
}
.cc-keks{display:block; grid-area:keks; align-self:center; width:96px; height:96px; flex:none}
.cc-titel{
  grid-area:titel; font-family:var(--serif); font-weight:300; font-size:30px;
  line-height:1.15; color:var(--cc-head); margin:0;
}
.cc-text{grid-area:text; font-size:14.5px; line-height:1.6; margin:0; max-width:64ch}
.cc-links{grid-area:links; margin-top:4px}
/* drei exakt gleich breite Knoepfe, zusammen rund 630px */
.cc-knoepfe{
  grid-area:knoepfe; align-self:center;
  display:grid; grid-template-columns:repeat(3,200px); gap:12px;
}

/* Unter 1200px wird das Nebeneinander zu eng (die drei Knoepfe allein
   brauchen 624px), also untereinander.
   Keks und Ueberschrift bleiben nebeneinander. */
@media (max-width:1199px){
  .cc-banner-inner{
    grid-template-columns:auto 1fr;
    grid-template-areas:
      "keks titel"
      "text text"
      "knoepfe knoepfe"
      "links links";
    row-gap:14px;
  }
  .cc-knoepfe{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cc-text{max-width:none}
}

/* ---------- Handy ---------- */
@media (max-width:700px){
  #cc-banner{padding:18px var(--cc-pad); max-height:52vh; overflow:auto}
  .cc-keks{width:76px; height:76px}
  .cc-titel{font-size:28px}
  .cc-knoepfe{grid-template-columns:1fr 1fr; gap:10px}
  .cc-knoepfe .cc-btn--einstellungen{grid-column:1 / -1; order:3}
  .cc-links{justify-content:center; gap:18px}
}

/* ============================================================
   Ebene 2: die Einstellungen
   ============================================================ */
#cc-overlay{
  position:fixed; inset:0; z-index:9100;
  background:rgba(26,36,0,.5);
  display:grid; place-items:center; padding:24px;
}
#cc-overlay[hidden]{display:none}

#cc-dialog{
  background:var(--cc-bg); border:1px solid var(--cc-line);
  width:100%; max-width:760px; max-height:88vh; overflow:auto;
  padding:clamp(24px,4vw,40px);
  font-family:var(--ui); color:var(--cc-text);
}
.cc-dialog-kopf{display:flex; align-items:center; gap:18px; margin-bottom:18px}
.cc-dialog-kopf h2{
  font-family:var(--serif); font-weight:300; font-size:36px;
  line-height:1.1; color:var(--cc-head); margin:0;
}
.cc-einleitung{font-size:14.5px; line-height:1.6; margin:0 0 6px}

/* ---------- eine Kategorie ---------- */
.cc-kategorie{border-top:1px solid var(--cc-trenn); padding:22px 0}
.cc-kategorie:last-of-type{border-bottom:1px solid var(--cc-trenn)}
.cc-kat-kopf{display:flex; align-items:center; justify-content:space-between; gap:20px}
.cc-kat-kopf h3{
  font-family:var(--serif); font-weight:300; font-size:24px;
  color:var(--cc-head); margin:0;
}
.cc-kat-text{font-size:14px; line-height:1.6; margin:10px 0 0; max-width:62ch}

.cc-badge{
  border:1px solid var(--cc-line); padding:7px 13px; flex:none;
  font-size:11px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--cc-label);
}

/* ---------- Schalter ---------- */
.cc-schalter-feld{display:flex; align-items:center; gap:12px; flex:none}
.cc-schalter-text{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--cc-label); min-width:28px}
.cc-schalter{
  position:relative; width:52px; height:28px; flex:none; padding:0;
  border:1px solid var(--cc-text); border-radius:0;
  background:transparent; cursor:pointer;
  transition:background .25s;
}
.cc-schalter::after{
  content:""; position:absolute; top:3px; left:3px;
  width:20px; height:20px; background:var(--cc-label);
  transition:left .25s, background .25s;
}
.cc-schalter[aria-checked="true"]{background:var(--cc-text)}
.cc-schalter[aria-checked="true"]::after{left:27px; background:var(--cc-bg)}
.cc-schalter:focus-visible{outline:2px solid var(--cc-label); outline-offset:3px}

/* ---------- Details zum Dienst ---------- */
.cc-details-knopf{
  display:inline-flex; align-items:center; gap:9px; margin-top:14px;
  background:none; border:0; padding:4px 0; cursor:pointer;
  font-family:var(--ui); font-size:11px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--cc-label);
  border-bottom:1px solid var(--cc-trenn);
}
.cc-details-knopf:hover{color:var(--cc-text)}
.cc-details-knopf:focus-visible{outline:2px solid var(--cc-label); outline-offset:3px}
.cc-pfeil{transition:transform .25s}
.cc-details-knopf[aria-expanded="true"] .cc-pfeil{transform:rotate(180deg)}

.cc-details{
  background:var(--cc-kasten); padding:18px 20px; margin-top:14px;
  display:grid; grid-template-columns:auto 1fr; gap:11px 24px;
}
.cc-details[hidden]{display:none}
.cc-details dt{
  font-size:11px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--cc-label); white-space:nowrap;
}
.cc-details dd{font-size:13.5px; line-height:1.55; margin:0}

/* ---------- Fuss des Dialogs ---------- */
.cc-dialog-fuss{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:26px}
.cc-hinweis{
  font-size:13px; color:var(--cc-label); margin:16px 0 0; min-height:1.2em;
  opacity:0; transition:opacity .3s;
}
.cc-hinweis.sichtbar{opacity:1}

/* ---------- Handy ---------- */
@media (max-width:700px){
  #cc-overlay{padding:0; place-items:stretch}
  #cc-dialog{max-width:none; max-height:100vh; height:100%; border:0}
  .cc-dialog-kopf h2{font-size:30px}
  .cc-kat-kopf{flex-wrap:wrap; gap:14px}
  .cc-details{grid-template-columns:1fr; gap:4px 0}
  .cc-details dd{margin-bottom:10px}
  .cc-dialog-fuss{grid-template-columns:1fr}
}

/* Keine Animationen fuer Leute, die das abgestellt haben */
@media (prefers-reduced-motion:reduce){
  .cc-btn,.cc-btn::before,.cc-schalter,.cc-schalter::after,.cc-pfeil,.cc-hinweis{transition:none}
}

/* ---------- Link im Fussbereich jeder Seite ----------
   Ein echter Knopf, weil er ein Fenster oeffnet und nicht woanders hinfuehrt.
   font und color erben, damit er genauso aussieht wie die Links daneben. */
.cc-fuss-link{
  display:inline; margin:0 0 0 22px; padding:0;
  border:0; background:none; font:inherit; color:inherit;
  text-decoration:none; cursor:pointer;
}
.cc-fuss-link:hover{text-decoration:underline}
.cc-fuss-link:focus-visible{outline:2px solid var(--cc-label); outline-offset:3px}