/* ============================================================
   Cookie-Hinweis
   ============================================================
   Das EINZIGE Stylesheet fuer EXT:wacon_cookie_management.

   Bis 01.09.2026 lagen hier ZWEI uebereinander: die Datei der
   Extension (in dieser Installation eine blaue Fassung aus dem
   Projekt Ruschmeier & Paul) und diese hier, die sie Regel fuer
   Regel wieder ueberschrieb. Beides zusammen waren 28 KB, von
   denen die Haelfte nie sichtbar wurde, und jede Aenderung
   musste erst gegen die andere Datei gewinnen. Die Datei der
   Extension ist in page.typoscript abbestellt.

   Bedient wird die Box von cookie.js — nicht mehr vom Skript
   der Extension und ohne jQuery. Damit gibt es hier auch keine
   Inline-Stile mehr zu schlagen: kein !important in dieser
   Datei, kein display auf Elementen, die ein fremdes Skript
   ebenfalls anfasst.

   Aufbau:
     1  Huelle und Kasten
     2  Ansichten (Intro / Einstellungen)
     3  Text
     4  Knoepfe
     5  Kategorien und Schalter
     6  Einzelheiten
     7  Schliessen und Fokus
     8  Schmale Fenster
     9  Bewegung
    10  Platzhalter vor fremden Inhalten
    11  Cookie-Liste auf der Datenschutzseite
   ============================================================ */

/* ------------------------------------------------------------
   1  Huelle und Kasten
   ------------------------------------------------------------
   Die Huelle liegt ueber der ganzen Seite, laesst aber alles
   durch: der Hinweis sperrt die Seite NICHT. Wer ihn wegklickt,
   soll weiterlesen koennen; wer ihn stehen laesst, ebenso. Nur
   der Kasten selbst nimmt Klicks an.

   FALLE, gemessen: Die <section> traegt NICHT den sichtbaren
   Kasten. Ihr Kind #CookieBox ist selbst position:fixed und
   damit aus dem Fluss — Grund, Rahmen und Schatten gehoeren an
   #CookieBox.
   ------------------------------------------------------------ */
.waconcookiemanagement {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 320;
  pointer-events: none;
}

.waconcookiemanagement.cd-cookie--offen { display: block; }

#CookieBox.cookiemanagement {
  pointer-events: auto;
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  max-block-size: 88vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--cd-a6) var(--cd-rinne) var(--cd-a6);
  background: var(--cd-tinte);
  color: var(--cd-weiss);
  border-block-start: 3px solid var(--cd-rot);
  box-shadow: 0 -34px 64px -40px rgb(0 0 0 / .8);
}

/* Der Balken der Extension wird nicht gebraucht — die rote
   Oberkante uebernimmt das. Er bleibt im Markup, weil das
   PHP der Extension ihn dort erwartet. */
.waconcookiemanagement .wcm-bar { display: none; }

/* EINE Spalte fuer alles: kurzer Hinweis, Einstellungen und
   Knopfleiste liegen damit von selbst in einer Flucht. Frueher
   hatte jeder Teil seine eigene Breite und seinen eigenen
   Einzug — gemessen standen Liste (573 px ab x=457) und
   Knopfleiste (1140 px ab x=174) voellig unabhaengig
   voneinander. */
.waconcookiemanagement .middle-center {
  inline-size: 100%;
  max-inline-size: 816px;
  margin-inline: auto;
}

/* ------------------------------------------------------------
   2  Ansichten
   ------------------------------------------------------------
   Welche der beiden Ansichten sichtbar ist, sagt EIN Attribut
   am Kasten. Vorher schaltete jQuery drei Elemente einzeln per
   Inline-Stil — und liess dabei eine ausgerechnete Hoehe von
   805 px stehen, obwohl der Inhalt 580 px hoch war (gemessene
   267 px Leere ueber der Knopfleiste).
   ------------------------------------------------------------ */
#CookieBox[data-ansicht="intro"] .box-cookie-management,
#CookieBox[data-ansicht="intro"] .cookie-fix { display: none; }
#CookieBox[data-ansicht="einstellungen"] .intro { display: none; }

/* ------------------------------------------------------------
   3  Text
   ------------------------------------------------------------ */
.waconcookiemanagement .wcm-title {
  display: flex;
  align-items: center;
  gap: var(--cd-a3);
  margin: 0 0 var(--cd-a3);
  font-family: var(--cd-schrift-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -.02em;
  line-height: var(--cd-zeile-kopf);
  color: var(--cd-weiss);
}
.waconcookiemanagement .wcm-ico {
  flex: 0 0 auto;
  inline-size: 22px;
  color: var(--cd-rot-auf-dunkel);
}
.waconcookiemanagement .wcm-ico svg { inline-size: 100%; block-size: auto; display: block; }

.waconcookiemanagement .cd-cookie__text {
  margin: 0 0 var(--cd-a5);
  max-inline-size: 62ch;
  font-size: 15.5px;
  line-height: var(--cd-zeile-text);
  color: var(--cd-text-auf-dunkel);
}

/* ------------------------------------------------------------
   4  Knoepfe
   ------------------------------------------------------------
   ALLE Aktionsknoepfe des Hinweises haben dieselbe Groesse,
   Farbe, Hoehe und Schrift. So bevorzugt die Gestaltung weder
   Zustimmung noch Ablehnung oder Einzelauswahl.

   Das ist hier nicht Geschmack, sondern die Sache selbst: eine
   Einwilligung, die leichter zu geben als zu verweigern ist, ist
   keine freie Einwilligung. Ein kleiner „Ablehnen"-Textlink neben
   einem grossen roten „Alle akzeptieren" waere genau das. Und ein
   Textlink fuer „Individuelle Einstellungen" sieht nicht nach
   Handlung aus — was wie ein Verweis aussieht, wird auch wie
   einer gelesen.

   Umgebrochen wird an genau EINER Stelle: unter 900 px stehen
   alle drei voll breit untereinander. Darueber sind es drei
   gleiche Spalten — und zwar unabhaengig vom Wortlaut, den
   jemand im Backend eintraegt. Ein Umbruch, der an der
   Textlaenge haengt, brachte 2+1 und damit einen doppelt so
   breiten letzten Knopf.
   ------------------------------------------------------------ */

/* RASTER, nicht Flex — und das ist der Punkt, an dem der erste
   Versuch scheiterte.

   Mit flex-wrap sass der Fliesstext in derselben Zeile wie die
   Knoepfe: er traegt flex-basis 100%, aber auch max-inline-size
   62ch fuer eine lesbare Zeilenlaenge. Fuer den Zeilenumbruch
   zaehlt die GEDECKELTE Groesse — gemessen 577 statt 816 px.
   Die restlichen 239 px reichten den drei Knoepfen mit
   flex-basis 0, also rueckten sie neben den Text und wurden
   68 px breit und 99 px hoch.

   Im Raster kann das nicht passieren: drei gleiche Spalten,
   und was ueber die ganze Breite gehoert, spannt ueber alle
   drei. Der Deckel am Text ist dann harmlos.

   Die Reihenfolge steht im Markup und braucht kein order —
   Titel, Text, Zustimmen, Einstellungen, Ablehnen, Rechtszeile. */
.waconcookiemanagement .intro {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cd-a3);
  align-items: stretch;
}
.waconcookiemanagement .intro > .wcm-title,
.waconcookiemanagement .intro > .cd-cookie__text,
.waconcookiemanagement .intro > .cookie-legal { grid-column: 1 / -1; }

/* Die Rasterkinder sind die <p>-Huellen, nicht die Knoepfe
   darin — die Extension packt jeden Knopf in einen eigenen
   Absatz. Also traegt die Huelle die Spalte und der Knopf
   fuellt sie.

   max-inline-size: none ist dabei Pflicht, nicht Zierde: basis.css
   deckelt JEDEN Absatz auf p { max-width: 68ch } — eine
   Lesebreite fuer Fliesstext. Die Knopfhuellen sind aber
   <p>-Elemente, und ab 800 px war die Spalte breiter als
   68ch: „Speichern" wurde 653 px breit, „Zurueck" und
   „Ablehnen" (die keine eigene <p>-Huelle haben) 816 px.
   Gemessen, nicht vermutet. */
.waconcookiemanagement .cookie-accept-container,
.waconcookiemanagement .cookie-refuse-container,
.waconcookiemanagement .cookie-management-container {
  display: flex;
  margin: 0;
  max-inline-size: none;
}

/* Die eine Bauform fuer jeden Knopf im Hinweis. */
.waconcookiemanagement .cookie-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  min-block-size: var(--cd-zielgroesse, 44px);
  padding: 13px 20px;
  border: 1px solid transparent;
  border-radius: var(--cd-r-knopf);
  font-family: var(--cd-schrift-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .01em;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background var(--cd-zeit) ease, color var(--cd-zeit) ease, border-color var(--cd-zeit) ease;
}

/* Eine gemeinsame Darstellung fuer ALLE Entscheidungswege. */
.waconcookiemanagement .cookie-btn {
  background: var(--cd-rot);
  border-color: var(--cd-rot);
  color: var(--cd-weiss);
}
.waconcookiemanagement .cookie-btn:hover {
  background: var(--cd-rot-hell);
  border-color: var(--cd-rot-hell);
}

/* Die Knopfleiste der Einstellungen. Dieselbe Bauform wie oben:
   drei gleich grosse Knoepfe in einer Reihe, die umbricht.
   Vorher schwammen sie im float-Layout der Extension — Speichern
   links, Zurueck und Ablehnen rechts, in drei verschiedenen
   Groessen. */
.waconcookiemanagement .cookie-fix {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cd-a3);
  align-items: stretch;
  margin-block-start: var(--cd-a5);
  padding-block-start: var(--cd-a5);
  border-block-start: 1px solid var(--cd-dunkel-3);
}
.waconcookiemanagement .cookie-fix .cookie-save {
  display: flex;
  margin: 0;
  max-inline-size: none;
}
/* display:contents loest die Huelle auf, ohne sie zu entfernen:
   die zwei Knoepfe darin werden Kinder des Rasters und stehen
   damit in derselben Reihe wie „Speichern". Die Huelle bleibt
   im Markup, weil die Extension sie dort erwartet. */
.waconcookiemanagement .cookie-fix .text-back-right { display: contents; }
.waconcookiemanagement .cookie-fix .cookie-legal { grid-column: 1 / -1; }

/* --- Rechtszeile --- */
.waconcookiemanagement .cookie-legal {
  display: flex;
  gap: var(--cd-a5);
  margin: 0;
  max-inline-size: none;
  font-size: var(--cd-gr-klein);
}
/* Zielgroesse der beiden Rechtsverweise.

   Am 04.09.2026 gemessen: "Datenschutz" 73 x 21 px, "Impressum"
   67 x 21 px. WCAG 2.2 verlangt 24 x 24 px (Erfolgskriterium 2.5.8,
   Zielgroesse Minimum) — mit einer Ausnahme: Kleinere Ziele sind
   erlaubt, solange 24-px-Kreise um ihre Mitten sich nicht schneiden.

   Genau die Ausnahme greift hier NICHT. Die beiden Verweise stehen
   nebeneinander in einer Flexzeile; gemessen war ihr Mittenabstand
   kleiner als 24 px. (Die Verweise im Fussbereich sind ebenfalls
   21 px hoch, stehen aber weit genug auseinander und sind deshalb
   konform — sie bleiben unveraendert.)

   Geloest ueber die Hoehe und nicht ueber den Abstand: Ein groesserer
   Abstand loest zwar dieselbe Pruefung, macht die Ziele aber nicht
   groesser. Wer mit dem Daumen zielt, hat davon nichts.

   inline-block, weil ein reines <a> die senkrechte Polsterung nicht
   in seine Trefferflaeche uebernimmt. Der negative Aussenabstand
   nimmt die zusaetzliche Polsterung optisch wieder heraus, damit die
   Zeile so eng am Text steht wie vorher. */
.waconcookiemanagement .cookie-legal a {
  color: var(--cd-text-auf-dunkel-2);
  display: inline-block;
  padding-block: 6px;
  margin-block: -6px;
}
.waconcookiemanagement .cookie-legal a:hover { color: var(--cd-weiss); }

/* ------------------------------------------------------------
   5  Kategorien und Schalter
   ------------------------------------------------------------ */
.waconcookiemanagement .box-cookie-management-in > .wcm-title { margin-block-start: 0; }

.waconcookiemanagement .category {
  padding-block: var(--cd-a5);
  border-block-start: 1px solid var(--cd-dunkel-3);
}
.waconcookiemanagement .category:first-of-type { border-block-start: 0; }

/* Ueberschrift und Schalter in EINER Zeile, an derselben
   Grundlinie. Vorher schwebte der Schalter oben rechts, ohne
   Bezug zu der Zeile, die er schaltet. */
.waconcookiemanagement .cd-cookie__kopf {
  display: flex;
  align-items: center;
  gap: var(--cd-a4);
  margin-block-end: var(--cd-a2);
}
.waconcookiemanagement .category .h3 {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--cd-schrift-text);
  font-size: 16px;
  font-weight: 600;
  color: var(--cd-weiss);
}
.waconcookiemanagement .cd-cookie__beschreibung {
  margin: 0;
  max-inline-size: 62ch;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--cd-text-auf-dunkel-2);
}

/* „Notwendig" hat keinen Schalter. Frueher stand dort gar
   nichts — der Besucher konnte nicht wissen, ob die Kategorie
   an ist oder ob der Schalter fehlt. */
.waconcookiemanagement .cd-cookie__immer {
  flex: 0 0 auto;
  padding: 5px 11px;
  border: 1px solid var(--cd-linie-auf-dunkel);
  border-radius: 999px;
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cd-text-auf-dunkel-2);
}

/* Der Schalter: Wort und Pille. Das Wort ist nicht Zierrat —
   ohne es truegen Farbe und Knopfstellung den Zustand allein. */
.waconcookiemanagement .cd-cookie__schalter {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--cd-a3);
  min-block-size: var(--cd-zielgroesse, 44px);
  padding: 0;
  border: 0;
  background: none;
  color: var(--cd-text-auf-dunkel);
  font: inherit;
  cursor: pointer;
}
.waconcookiemanagement .cd-cookie__wort {
  min-inline-size: 2.4em;
  text-align: end;
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-klein);
  letter-spacing: .04em;
}
.waconcookiemanagement .cookie-on .cd-cookie__wort { color: var(--cd-weiss); }

.waconcookiemanagement .activated {
  position: relative;
  display: block;
  inline-size: 46px;
  block-size: 26px;
  border-radius: 999px;
  background: var(--cd-dunkel-3);
  border: 1px solid var(--cd-linie-auf-dunkel);
  transition: background var(--cd-zeit) ease, border-color var(--cd-zeit) ease;
}
.waconcookiemanagement .activated .on {
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 3px;
  inline-size: 18px;
  block-size: 18px;
  border-radius: 50%;
  background: var(--cd-text-auf-dunkel);
  transition: transform var(--cd-zeit) var(--cd-kurve), background var(--cd-zeit) ease;
}
.waconcookiemanagement .cookie-on .activated {
  background: var(--cd-rot);
  border-color: var(--cd-rot);
}
.waconcookiemanagement .cookie-on .activated .on {
  background: var(--cd-weiss);
  transform: translateX(20px);
}

.waconcookiemanagement .cd-cookie__schalter--klein .activated {
  inline-size: 38px;
  block-size: 22px;
}
.waconcookiemanagement .cd-cookie__schalter--klein .activated .on {
  inline-size: 14px;
  block-size: 14px;
}
.waconcookiemanagement .cd-cookie__schalter--klein.cookie-on .activated .on { transform: translateX(16px); }

/* ------------------------------------------------------------
   6  Einzelheiten
   ------------------------------------------------------------ */
.waconcookiemanagement .cookie-acc {
  display: inline-flex;
  align-items: center;
  gap: var(--cd-a2);
  min-block-size: var(--cd-zielgroesse, 44px);
  margin-block-start: var(--cd-a2);
  padding: 0;
  border: 0;
  background: none;
  color: var(--cd-text-auf-dunkel-2);
  font-family: var(--cd-schrift-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}
.waconcookiemanagement .cookie-acc:hover { color: var(--cd-weiss); }
.waconcookiemanagement .cookie-acc .arrow {
  inline-size: 0;
  block-size: 0;
  border-inline: 4px solid transparent;
  border-block-start: 5px solid currentColor;
  transition: transform var(--cd-zeit) ease;
}
.waconcookiemanagement .cookie-acc .arrow.up { transform: rotate(180deg); }

.waconcookiemanagement .info-text { display: none; }
.waconcookiemanagement .cookie-acc[aria-expanded="true"] + .info-text { display: block; }

.waconcookiemanagement .cookie-info {
  margin-block-start: var(--cd-a4);
  padding: var(--cd-a4);
  background: var(--cd-dunkel-2);
  border-radius: var(--cd-r-feld);
  font-size: 13px;
  color: var(--cd-text-auf-dunkel-2);
}
.waconcookiemanagement .cd-cookie__dienstkopf {
  display: flex;
  align-items: center;
  gap: var(--cd-a4);
}
.waconcookiemanagement .cd-cookie__dienst {
  flex: 1 1 auto;
  margin: 0;
  color: var(--cd-weiss);
  font-size: 14px;
}
.waconcookiemanagement .cd-cookie__zweck { margin-block-start: var(--cd-a2); }
.waconcookiemanagement .cd-cookie__zweck p { margin: 0; }

.waconcookiemanagement .cookie-info table {
  inline-size: 100%;
  margin-block-start: var(--cd-a3);
  border-collapse: collapse;
  font-size: 12.5px;
}
.waconcookiemanagement .cookie-info td {
  padding: 3px 10px 3px 0;
  vertical-align: top;
  overflow-wrap: anywhere;
}
/* Die Beschriftungsspalte war mit --cd-text-schwach auf
   --cd-dunkel-2 gemessene 4.23:1 — knapp unter den 4.5, die
   Text dieser Groesse braucht (WCAG 1.4.3). Die Abstufung
   zwischen Beschriftung und Wert liegt jetzt umgekehrt: der
   WERT ist der hellere von beiden, und das ist er auch der
   Sache nach. */
.waconcookiemanagement .cookie-info td:first-child {
  inline-size: 34%;
  color: var(--cd-text-auf-dunkel-2);
}
.waconcookiemanagement .cookie-info td + td { color: var(--cd-text-auf-dunkel); }

/* ------------------------------------------------------------
   7  Schliessen und Fokus
   ------------------------------------------------------------
   Das Kreuz erscheint erst, wenn eine Entscheidung im Cookie
   steht. Solange keine da ist, gibt es keinen Ausweg ausser
   einer der drei Antworten — so sieht es die Extension vor.
   ------------------------------------------------------------ */
.waconcookiemanagement .cookieclose {
  position: absolute;
  inset-block-start: var(--cd-a4);
  inset-inline-end: var(--cd-a4);
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--cd-zielgroesse, 44px);
  block-size: var(--cd-zielgroesse, 44px);
  padding: 0;
  border: 0;
  background: none;
  color: var(--cd-text-auf-dunkel-2);
  cursor: pointer;
}
.waconcookiemanagement .cookieclose:hover { color: var(--cd-weiss); }
#CookieBox[data-entschieden="nein"] .cookieclose { display: none; }

/* Fokus auf dunklem Grund: weiss, nicht rot (WCAG 1.4.11). */
.waconcookiemanagement :is(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--cd-weiss);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Der Kasten selbst bekommt beim Oeffnen den Fokus, damit ein
   Vorleseprogramm Titel und Text ansagt. Ein Rahmen um den
   ganzen Kasten waere dabei nur Laerm. */
#CookieBox:focus { outline: none; }
#CookieBox:focus-visible { outline: none; }

/* ------------------------------------------------------------
   8  Schmale Fenster
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  #CookieBox.cookiemanagement {
    max-block-size: 92vh;
    padding: var(--cd-a5) var(--cd-rinne) var(--cd-a5);
  }
  /* Untereinander und voll breit. Der Daumen trifft dann jeden
     Knopf gleich gut — nebeneinander waeren es bei 390 px drei
     Knoepfe zu je 110 px. */
  /* Eine Spalte: die Knoepfe stehen untereinander und voll
     breit. Der Daumen trifft dann jeden gleich gut —
     nebeneinander waeren es bei 390 px drei zu je 110 px. */
  .waconcookiemanagement .intro,
  .waconcookiemanagement .cookie-fix { grid-template-columns: minmax(0, 1fr); }
  .waconcookiemanagement .cookieclose {
    inset-block-start: var(--cd-a2);
    inset-inline-end: var(--cd-a2);
  }
  .waconcookiemanagement .wcm-title { padding-inline-end: 44px; }

  /* ----------------------------------------------------------
     Gedeckelte Fassung — Schalter cd.cookie.hoehe
     ----------------------------------------------------------
     Gemessen am 04.09.2026 bei 390 x 844: Der Kasten war 561 px
     hoch, zwei Drittel des Bildschirms. Er verdeckte die
     Ueberschrift der Seite und war das groesste gezeichnete
     Element — der Text allein 201 px.

     WAS HIER GEDECKELT WIRD, IST NUR DER TEXT. Nicht der ganze
     Kasten: Deckelte man den, koennte die Ablehnen-Schaltflaeche
     unter die Falte rutschen, und genau das macht eine
     Einwilligung angreifbar. So bleiben Ueberschrift, alle drei
     Knoepfe und die Rechtszeile zwangslaeufig im Bild, und nur
     der Fliesstext scrollt in sich.

     Die Hoehe ist bewusst nicht knapp gewaehlt: 19vh zeigt bei
     844 px rund fuenf der sieben Zeilen. Wer weniger zeigt, macht
     aus einer Information eine Andeutung.

     Der Rest sind Abstaende: 96 px steckten in den Luecken
     zwischen den sechs Bloecken, 48 px in der Polsterung. Beides
     kostet nichts an Inhalt.
     ---------------------------------------------------------- */
  body[data-cookie-hoehe="gedeckelt"] .waconcookiemanagement .cd-cookie__text {
    max-block-size: 19vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Damit sichtbar ist, DASS es weitergeht — ohne Rand wirkt der
       abgeschnittene Text wie ein Satzende. */
    padding-inline-end: var(--cd-a2);
  }

  body[data-cookie-hoehe="gedeckelt"] .waconcookiemanagement .intro { gap: var(--cd-a2); }

  body[data-cookie-hoehe="gedeckelt"] #CookieBox.cookiemanagement {
    padding: var(--cd-a4) var(--cd-rinne) var(--cd-a4);
  }
}

/* Sehr niedrige Fenster (Handy quer): der Kasten darf fast die
   ganze Hoehe nehmen, sonst passt nicht einmal das Knopfpaar
   hinein. Er scrollt dann in sich. */
@media (max-height: 520px) {
  #CookieBox.cookiemanagement { max-block-size: 96vh; }
}

/* ------------------------------------------------------------
   9  Bewegung
   ------------------------------------------------------------ */
@keyframes cdCookieAuf {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cdCookieZu {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(100%); }
}
#CookieBox.cookiemanagement {
  animation: cdCookieAuf .45s cubic-bezier(.16, .84, .44, 1) both;
}
.waconcookiemanagement.wcm-leaving #CookieBox.cookiemanagement {
  animation: cdCookieZu .32s cubic-bezier(.4, 0, .7, .2) forwards;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  #CookieBox.cookiemanagement,
  .waconcookiemanagement.wcm-leaving #CookieBox.cookiemanagement { animation: none; }
  .waconcookiemanagement .activated,
  .waconcookiemanagement .activated .on,
  .waconcookiemanagement .cookie-btn,
  .waconcookiemanagement .cookie-acc .arrow { transition: none; }
}

/* ------------------------------------------------------------
   10  Platzhalter vor fremden Inhalten
   ------------------------------------------------------------
   Die Extension kann ein Inhaltselement hinter die Einwilligung
   stellen (Plugin „Script", Show.html) und zeigt bis dahin einen
   Platzhalter: `.cookie-set.script` fuehrt in die Einstellungen,
   `.cookie-set-direct` willigt sofort ein.

   Auf keiner Seite von web2026 steht das zurzeit — die paar
   Regeln stehen trotzdem hier, weil die einzigen Regeln dafuer
   in der abbestellten Datei der Extension lagen. Ohne sie waere
   der Platzhalter nackt, sobald ihn jemand einsetzt.

   ACHTUNG: Hier darf NICHTS stehen, das `.cookie-set` verbirgt.
   In der Vorgaengerfassung deckelte
   `.cookie-set { position:absolute; 1px; clip-path: inset(50%) }`
   den unsichtbaren Aufrufer der Extension — und traf damit auch
   den Einwilligungsknopf aus cd_galerie, der dieselbe Klasse
   traegt. Der Aufrufer der Extension steht heute gar nicht mehr
   in der Vorlage; der Fussbereich hat einen echten Knopf.
   ------------------------------------------------------------ */
.cookie-set,
.cookie-set-direct { cursor: pointer; }

.cookie-set.script,
.cookie-set-direct.script {
  position: relative;
  display: grid;
  place-items: center;
  min-block-size: 220px;
  padding: var(--cd-a6);
  background: var(--cd-flaeche-2);
  border: 1px dashed var(--cd-linie);
  border-radius: var(--cd-r-karte);
  text-align: center;
}
.cookie-set.script p,
.cookie-set-direct.script p {
  margin: 0;
  max-inline-size: 46ch;
  color: var(--cd-text-2);
}
.cookie-set.script img,
.cookie-set-direct.script img { max-inline-size: 100%; block-size: auto; }

/* ------------------------------------------------------------
   11  Cookie-Liste auf der Datenschutzseite
   ------------------------------------------------------------
   Zweite Huelle der Extension: .waconcookiemanagementlist ist
   das INHALTSELEMENT (Cookielist.html, #CookieBox2), nicht der
   Hinweis. Die Klassen gleichen sich bis auf das angehaengte
   „list" — eine Regel auf der falschen Huelle scheitert stumm.

   Zurzeit steht dieses Element auf keiner Seite. Die paar
   Regeln stehen hier trotzdem, damit es nicht nackt erscheint,
   falls es jemand einsetzt.
   ------------------------------------------------------------ */
.waconcookiemanagementlist #CookieBox2 {
  padding: var(--cd-a5);
  background: var(--cd-flaeche-1);
  border: 1px solid var(--cd-linie);
  border-radius: var(--cd-r-karte);
  color: var(--cd-tinte);
}
.waconcookiemanagementlist .cookie-info {
  padding-block: var(--cd-a4);
  border-block-start: 1px solid var(--cd-linie);
}
.waconcookiemanagementlist table { inline-size: 100%; border-collapse: collapse; }
.waconcookiemanagementlist td { padding: 3px 10px 3px 0; vertical-align: top; }