/* Powertune · Cookie-Konsole
   ==================================================================================
   Gegenstück zum schwebenden Glas-Kopf (.hdr): dieselbe Materialsprache, nur unten
   statt oben. Der Kopf steht 14 px unter der Oberkante und ist min(1320px, 100% - 28px)
   breit; die Konsole steht 14 px über der Unterkante und ist min(1080px, 100% - 28px)
   breit. Alle Farben, Radien, Kurven und Schatten kommen aus core.css.

   Aufbau
     .cc              schwebender Rahmen, fest am unteren Rand (z-index 200)
     .cc-card         die Glasfläche mit HUD-Ecken
     .cc-stufe1       Stufe 1: Text links, zwei gleich große Knöpfe rechts.
                      Tritt zurück, sobald Stufe 2 offen ist (Höhe 0, inert).
     .cc-detail       Stufe 2: wächst aus derselben Karte nach oben, darin
                        .cc-kopf       Titel und Schließen, fest oben
                        .cc-detail-in  das einzige Scrollfenster, Kanten weich maskiert
                        .cc-foot       Knopfreihe, fest am unteren Rand der Karte
     .cc-scrim        Schleier, nur bei geöffneter Stufe 2 (z-index 199)

   Warum genau ein Knopfpaar und ein fester Fuß: In Stufe 2 lag „Auswahl speichern“ vorher
   im Scrollfenster, am Handy mehr als 1000 px unter dem Sichtbereich. Wer einen Schalter
   umlegte, sah den Knopf dazu nie. Zugleich standen Stufe 1 und Stufe 2 übereinander, also
   zwei Überschriften, zwei Erklärtexte und zweimal dasselbe Knopfpaar in derselben Karte.

   Warum eine eigene Datei und nicht core.css: core.css gehört allen. Diese Datei
   enthält ausschließlich .cc*-Klassen und die zwei Ausweichregeln für .pal, .toast
   und .lang-hint, die sonst unter der Konsole lägen.

   Kontrast (gerechnet gegen die effektive Kartenfläche #14151A, also
   rgba(10,11,13,.88) über #030304):
     --text   #F5F6F7  16,9:1
     --text-2 #A1A4AA   7,3:1
     --ok     #62D596   9,97:1
   var(--text-3) #6A6E75 käme nur auf 3,56:1 und kommt hier deshalb nirgends vor,
   auch nicht in den Mono-Zeilen. Gemessen ist nichts, gerechnet schon.
   ================================================================================== */

/* ---------------------------------------------------------------- Rahmen und Karte */
.cc {
  position: fixed;
  left: 50%;
  bottom: 14px;
  z-index: 200;               /* über .toast (160), .lang-hint (155), .pal (150), .drawer (120), .hdr (100) */
  width: min(1080px, calc(100% - 28px));
  transform: translateX(-50%);
  color: var(--text);
  /* Innerhalb der Konsole gilt immer die dunkle Fassung, auch wenn die Seite gerade
     einen hellen Abschnitt zeigt. --fg-3 zeigt bewusst auf --text-2 (Kontrast). */
  --fg: var(--text);
  --fg-2: var(--text-2);
  --fg-3: var(--text-2);
  --hud-c: rgba(255, 255, 255, .22);
}
.cc[hidden] { display: none; }
/* Beim Öffnen der Einstellungen bekommt die Karte den Fokus, damit Screenreader den Dialog
   ansagen. Sie ist selbst kein Bedienelement, deshalb ohne Ring; jeder Knopf darin behält
   den globalen Ring aus core.css. */
.cc:focus { outline: none; }

.cc-card {
  position: relative;
  padding: 26px 28px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--r-lg);
  /* 0,88 statt der 0,64 des Kopfes: Die Fläche steht auch über hellen Abschnitten
     (.bg-white) zuverlässig dunkel, sonst gelten die Kontrastwerte oben nicht. */
  background: rgba(10, 11, 13, .88);
  -webkit-backdrop-filter: blur(26px) saturate(1.5);
  backdrop-filter: blur(26px) saturate(1.5);
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .05);
}

/* Erscheinen: aus dem unteren Rand aufsteigen. Der Seiteninhalt verschiebt sich nicht. */
.cc {
  opacity: 0;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.cc:not(.is-da) { transform: translateX(-50%) translateY(24px); pointer-events: none; }
.cc.is-da { opacity: 1; transform: translateX(-50%); }

/* ---------------------------------------------------------------- Stufe 1: die Leiste */
/* Sobald Stufe 2 offen ist, tritt die Leiste zurück: Sie faltet sich auf Höhe 0 zusammen,
   im selben Takt, in dem die Einstellungen aufgehen. Die Karte wandelt sich also, statt
   zwei Überschriften, zwei Erklärtexte und zwei gleiche Knopfpaare übereinanderzustapeln.
   consent.js setzt zusätzlich inert, damit die Leiste auch aus der Tabreihenfolge fällt. */
.cc-stufe1 {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .45s var(--ease);
}
.cc.is-offen .cc-stufe1 { grid-template-rows: 0fr; }
.cc-stufe1-in { min-height: 0; overflow: hidden; }

.cc-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  /* 64 px statt 40 px: Textspalte und Knopfblock sind zwei Blöcke, keine Nachbarn in einer
     Zeile. Zusammen mit dem schmaleren Satzspiegel (.cc-p) trennt der Abstand sie deutlich. */
  gap: 18px 64px;
  align-items: center;
  transition: opacity .25s var(--ease);
}
/* Der Text verschwindet früher als die Höhe, sonst schrumpfen die Zeilen sichtbar mit. */
.cc.is-offen .cc-bar { opacity: 0; }
.cc-h {
  margin: 12px 0 0;
  font-family: var(--display);
  font-weight: 560;
  font-size: clamp(19px, 1.5vw, 22px);
  line-height: 1.25;
  letter-spacing: -.02em;
  font-variation-settings: "wdth" 108;
}
.cc-p {
  /* 48 Zeichen je Zeile. 58 waren für eine schwebende Karte zu breit: Das Auge findet den
     Zeilenanfang schlechter, und die Textspalte drängte den Knopfblock an den Rand. */
  max-width: 48ch;
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-2);
}
.cc-p a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.cc-p a:hover { text-decoration-thickness: 2px; }

.cc-act { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }

/* Zwillinge: „Alle ablehnen“ und „Alle annehmen“ sind in Größe, Form, Farbe, Schrift
   und Position gleich. Kein dunkles Muster, keine Hervorhebung der Zustimmung. */
.cc-zwillinge { display: flex; gap: 10px; }
.cc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 168px;
  height: 50px;
  padding: 0 22px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  color: var(--text);
  font: 560 14.5px/1 var(--display);
  font-variation-settings: "wdth" 108;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .35s var(--ease), background-color .3s, border-color .3s, color .3s, box-shadow .35s;
}
.cc-btn:hover { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .26); transform: translateY(-1px); }
.cc-btn:active { transform: scale(.97); }
/* Der einzige hervorgehobene Knopf ist die neutrale Option „Auswahl speichern“. */
.cc-btn-hell { background: #FFFFFF; border-color: #FFFFFF; color: #050506; }
.cc-btn-hell:hover { background: #FFFFFF; border-color: #FFFFFF; box-shadow: 0 12px 34px -12px rgba(255, 255, 255, .35); }

.cc-mehr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: flex-end;
  min-height: 44px;                 /* Trefferfläche, auch wenn der Text kleiner ist */
  padding: 0 6px;
  /* Das Polster der Trefferfläche zieht den Text sonst 6 px von der Kante der Pille
     darüber weg. Der negative Rand holt ihn wieder bündig. */
  margin-right: -6px;
  border: 0;
  background: none;
  color: var(--text-2);
  font: 500 13.5px/1 var(--display);
  cursor: pointer;
  transition: color .25s;
}
.cc-mehr:hover { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.cc-chev { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .3s var(--ease); }
.cc.is-offen .cc-chev { transform: rotate(180deg); }

/* ---------------------------------------------------------------- Stufe 2: Einstellungen */
/* Die Karte wächst nach oben: Breite, Unterkante und Radien bleiben, nur die Höhe läuft.
   grid-template-rows 0fr → 1fr animiert eine unbekannte Höhe ohne Sprung. */
.cc-detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease);
}
.cc.is-offen .cc-detail { grid-template-rows: 1fr; }
.cc-detail[hidden] { display: none; }
.cc-detail-wrap { min-height: 0; overflow: hidden; }

/* Dreiteilung: Kopfzeile fest oben, ein Scrollfenster in der Mitte, Knopfreihe fest unten.
   Nur die Mitte scrollt. „Auswahl speichern“ liegt damit nie unter dem Falz, auch nicht
   bei 360 x 640, und wer einen Schalter umlegt, sieht den Knopf dazu. */
.cc-detail-box { display: flex; flex-direction: column; min-height: 0; }

/* @property macht die beiden Längen animierbar. Ohne Unterstützung springt der Verlauf
   einfach um, das Bild bleibt richtig. */
@property --cc-f-o { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --cc-f-u { syntax: "<length>"; inherits: false; initial-value: 0px; }

.cc-detail-in {
  flex: 1 1 auto;
  min-height: 0;
  /* Rückfallwert. Den genauen Platz rechnet consent.js aus der Fensterhöhe aus, sobald
     Kopfzeile und Knopfreihe stehen (raumMessen). */
  max-height: clamp(160px, calc(100vh - 340px), 640px);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Luft an allen vier Kanten: Der Text klebt weder an der Trennlinie noch am Rollbalken. */
  padding: 20px 6px 22px 0;
  /* Wer mit dem Tabulator zu einem Schalter springt, der gerade außerhalb liegt, soll ihn
     nicht in der verblassenden Kante wiederfinden. Der Browser hält diesen Abstand frei. */
  scroll-padding: 34px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .22) transparent;
  /* Weiche Kanten statt harter Schnitte. Die Maske steht fest am Rahmen des Fensters und
     scrollt nicht mit; eine Zeile, die aus dem Bild läuft, verblasst also, statt mitten im
     Buchstaben abgeschnitten zu werden. consent.js schaltet je Kante nur dann ein, wenn
     dort wirklich etwas liegt: oben erst nach dem ersten Scrollen, unten nur solange noch
     etwas folgt. Am Anfang und am Ende der Liste steht der Text deshalb gestochen. */
  --cc-f-o: 0px;
  --cc-f-u: 0px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--cc-f-o),
    #000 calc(100% - var(--cc-f-u)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--cc-f-o),
    #000 calc(100% - var(--cc-f-u)), transparent 100%);
  transition: --cc-f-o .25s var(--ease), --cc-f-u .25s var(--ease);
}
/* In Stufe 2 steht der Text einspaltig über die ganze Karte. Dort gilt dasselbe Maß wie für
   die Kategorien (.cc-kat-text), sonst stünde der Einleitungssatz auffällig schmal daneben.
   Die 48 Zeichen aus .cc-p gelten für die zweispaltige Leiste der Stufe 1. */
.cc-detail-in .cc-p { max-width: 84ch; }
.cc-detail-in.hat-oben { --cc-f-o: 28px; }
.cc-detail-in.hat-unten { --cc-f-u: 28px; }
.cc-detail-in > :first-child { margin-top: 0; }
.cc-detail-in::-webkit-scrollbar { width: 6px; }
.cc-detail-in::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(255, 255, 255, .22); }

.cc-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex: none;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.cc-h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 560;
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.2;
  letter-spacing: -.02em;
  font-variation-settings: "wdth" 108;
}
.cc-x {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  background: rgba(255, 255, 255, .05);
  color: var(--text-2);
  cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s;
}
/* Gleicher Grund wie beim Schalter: sichtbar bleiben die 40 px, getroffen werden 44 px. */
.cc-x::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; }
.cc-x:hover { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .26); color: var(--text); }
.cc-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }

.cc-note {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-2);
}

/* Kategorien */
.cc-kats { margin: 18px 0 0; padding: 0; list-style: none; }
.cc-kat { padding: 18px 0; border-top: 1px solid var(--line); }
/* Name links, Schalter rechts, beide auf einer Linie. Die Erklärung darunter läuft über die
   ganze Breite, damit sie auch bei 390 px nicht auf 20 Zeichen je Zeile zusammenfällt. */
.cc-kat-kopf { display: grid; grid-template-columns: 1fr auto; gap: 10px 24px; align-items: center; }
.cc-kat-name {
  margin: 0;
  font-family: var(--display);
  font-weight: 560;
  font-size: 16px;
  line-height: 1.3;
  font-variation-settings: "wdth" 106;
}
.cc-kat-mono {
  margin: 6px 0 0;
  font: 500 10.5px/1.4 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-2);
}
.cc-kat-text { max-width: 84ch; margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.cc-kat-sp { max-width: 84ch; margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }

/* Schalter: Zustand steht zusätzlich als Wort daneben, nicht nur als Farbe. */
.cc-sw { display: inline-flex; align-items: center; gap: 12px; }
.cc-sw-wort {
  min-width: 26px;
  font: 500 10.5px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-2);
}
.cc-sw button {
  position: relative;
  flex: none;
  width: 48px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  cursor: pointer;
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.cc-sw button::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #8A8E95;
  transition: transform .25s var(--ease), background-color .25s var(--ease);
}
.cc-sw button[aria-checked="true"] { background: var(--ok); border-color: var(--ok); }
.cc-sw button[aria-checked="true"]::after { transform: translateX(20px); background: #08120D; }
/* Der Schalter ist 48 x 28 px gross, das reicht fuer die Maus, aber nicht fuer den Daumen.
   Diese unsichtbare Flaeche macht das Ziel 60 x 44 px, ohne die Optik zu aendern. */
.cc-sw button::before {
  content: "";
  position: absolute;
  top: -8px;
  right: -6px;
  bottom: -8px;
  left: -6px;
  border-radius: 999px;
}
/* Das Wort steht vor dem Schalter, deshalb schaltet consent.js die Klasse is-an mit um. */
.cc-sw-wort.is-an { color: var(--text); }

/* „Notwendig“ hat keinen Schalter, sondern eine feste Marke. Kein totes Bedienelement. */
.cc-marke {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  font: 500 10.5px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-2);
  white-space: nowrap;
}

.cc-widerruf, .cc-nachweis {
  margin: 18px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
}
.cc-nachweis { margin-top: 10px; padding-top: 0; border-top: 0; }

/* Die feste Knopfreihe am unteren Rand der Karte. Sie steht außerhalb des Scrollfensters
   und ist deshalb immer sichtbar. */
.cc-foot {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  /* Alle drei Knöpfe stehen als eine Gruppe rechts. Vorher klebten die Zwillinge links
     und „Auswahl speichern“ rechts, dazwischen lag am Desktop eine halbe Kartenbreite
     Leere, die nichts bedeutete. */
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.cc-foot .cc-zwillinge { flex: 0 1 auto; }
.cc-foot .cc-btn { flex: 0 0 auto; }
/* Etwas mehr Abstand als zwischen den Zwillingen: „Auswahl speichern“ gehört nicht zum Paar,
   es ist die dritte, eigenständige Entscheidung. */
.cc-foot .cc-btn-hell { flex: 0 0 auto; min-width: 190px; margin-left: 8px; }

/* ---------------------------------------------------------------- Schleier */
.cc-scrim {
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(3, 3, 4, .6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.cc-scrim[hidden] { display: none; }
.cc-scrim.is-da { opacity: 1; }

/* ---------------------------------------------------------------- Eintrag im Fuß */
.ftr-base .ftr-cookie {
  display: block;
  padding: 5px 0;
  border: 0;
  background: none;
  font: 500 15px/1.5 var(--mono);
  letter-spacing: .06em;
  color: var(--text-2);
  text-align: left;
  cursor: pointer;
  transition: color .2s;
}
.ftr-base .ftr-cookie:hover { color: var(--text); }

/* ---------------------------------------------------------------- Kollisionen */
/* Solange die Konsole steht, rücken die anderen schwebenden Bauteile nach oben, statt
   zu verschwinden. Die Höhe misst consent.js und schreibt sie in --cc-h. */
html.pt-cc-an .pal { bottom: calc(16px + var(--cc-h, 0px)); }
html.pt-cc-an .lang-hint { bottom: calc(16px + var(--cc-h, 0px)); }
html.pt-cc-an .toast { bottom: calc(22px + var(--cc-h, 0px)); }
/* Scrollsperre bei geöffneter Stufe 2. Eigene Klasse am html-Element, damit sie sich nicht
   mit der Sperre der mobilen Navigation (body.style.overflow in layout.js) ins Gehege kommt. */
html.pt-cc-fest { overflow: hidden; }
/* Bei offener mobiler Navigation tritt die Konsole zurück. */
body:has(.drawer.open) .cc, body:has(.drawer.open) .cc-scrim, .cc.is-weg { display: none; }

/* ---------------------------------------------------------------- Umbrüche */
@media (max-width: 1023px) {
  .cc { width: calc(100% - 24px); bottom: 12px; }
  .cc-card { padding: 22px; }
  .cc-bar { grid-template-columns: 1fr; gap: 18px; }
  .cc-act { align-items: stretch; }
  .cc-btn { flex: 1 1 0; min-width: 0; }
  html.pt-cc-an .lang-hint { bottom: calc(16px + var(--cc-h, 0px)); }
}
@media (max-width: 720px) {
  .cc { width: calc(100% - 20px); bottom: 10px; }
  .cc-card { padding: 20px 18px; border-radius: var(--r-md); }
  .cc-p { font-size: 14px; }
  .cc-detail-in { max-height: clamp(140px, calc(100vh - 380px), 560px); padding-top: 18px; }
  /* Gestapelt, „Auswahl speichern“ unten: der wichtigste Knopf liegt am nächsten am Daumen. */
  .cc-foot { flex-direction: column; align-items: stretch; padding-top: 16px; }
  .cc-foot .cc-zwillinge { flex: 0 0 auto; }
  /* Nur die Zwillinge teilen sich die Zeile. Der Wert gilt in der Hauptachse, und die läuft
     im gestapelten Fuß senkrecht: „flex: 1 1 0“ auch auf „Auswahl speichern“ hätte dem Knopf
     die Höhe 0 als Grundlage gegeben. Er fiel dadurch auf 18 px zusammen. */
  .cc-foot .cc-zwillinge .cc-btn { flex: 1 1 0; }
  .cc-foot .cc-btn-hell { flex: 0 0 auto; width: 100%; margin-left: 0; }
  .cc-kopf { padding-bottom: 14px; }
  .cc-kat-mono { margin-top: 8px; }
}
@media (max-width: 430px) {
  .cc-card { padding: 18px 16px 16px; }
  .cc-h { font-size: 19px; }
  .cc-zwillinge { gap: 8px; }
  /* white-space: normal statt nowrap. Heute bleibt jede Beschriftung einzeilig; eine spätere
     Sprache mit einem längeren Wortpaar (gemessen: ab etwa 24 Zeichen, zum Beispiel
     „Rechazar todas las cookies“) schob den rechten Knopf sonst über den Kartenrand hinaus.
     Zwei Zeilen à 16 px passen in die 46 px, die Zwillinge bleiben gleich groß. */
  .cc-btn { height: 46px; padding: 0 12px; font-size: 14px; line-height: 1.15; white-space: normal; }
  .cc-mehr { align-self: stretch; width: 100%; margin-right: 0; }
}

/* ---------------------------------------------------------------- Reduzierte Bewegung */
/* core.css schaltet bereits alle Übergänge ab. Hier fällt zusätzlich der Versatz weg,
   damit die Konsole ohne Verzögerung und ohne Bewegung einfach da ist. */
@media (prefers-reduced-motion: reduce) {
  .cc, .cc:not(.is-da), .cc.is-da { transform: translateX(-50%); opacity: 1; }
  .cc:not(.is-da) { pointer-events: auto; }
  .cc-detail { grid-template-rows: 1fr; }
  .cc.is-offen .cc-chev { transform: rotate(180deg); }
  .cc-scrim { opacity: 1; }
}