/* ------------------------------------------------------------
   EINWILLIGUNG — Leiste, Fenster, Abzeichen.

   Nachbau des Cookiebot-Dialogs in unseren Farben. Aufgebaut wird das
   Markup in marketing.js; hier stehen ausschliesslich eigene
   Klassennamen (e-...). Kein !important noetig und keine fremden
   Kennungen — das ist der Unterschied zu den zwei Fassungen davor, die
   gegen das Stylesheet eines Anbieters anschreiben mussten.

   MASSE aus einem laufenden Cookiebot-Banner abgenommen (fonio.ai,
   09.09.2026): Schalter 57x32 mit Radius 32, Knopfradius 4, Knopfbreite
   287, Titel und Knoepfe 15px/600, Fliesstext 15px/400 auf
   Zeilenhoehe 24, Fensterbreite 900 mit Radius 8 und Schatten
   0 32px 68px rgba(0,0,0,.3).

   FARBEN sind unsere: Gelb statt Cookiebots Indigo. Weil Gelb keine
   weisse Schrift traegt, steht auf dem gefuellten Knopf Tinte statt
   Weiss — dasselbe tut die Seite bei ihrem Hauptknopf.
   ------------------------------------------------------------ */

/* Tarteaucitrons eigene Anzeige bleibt ungenutzt. Sie laedt ihr
   Stylesheet gar nicht erst (useExternalCss in marketing.js), stuende
   ohne diese Zeile also ungestylt mitten auf der Seite. */
#tarteaucitronRoot { display: none !important; }

#fix30Einwilligung {
  --e-tinte: #131313;
  --e-linie: #e4e4df;
  --e-gelb: #fcc50d;
  --e-grau: #6f6f6a;
  --e-schrift: 'Manrope', system-ui, -apple-system, sans-serif;
}
#fix30Einwilligung *, #fix30Einwilligung *::before, #fix30Einwilligung *::after { box-sizing: border-box; }
#fix30Einwilligung [hidden] { display: none !important; }

/* ---------- Leiste am unteren Rand ---------- */
#fix30Einwilligung .e-leiste {
  position: fixed; inset: auto 0 0 0;
  z-index: 2147483000;
  background: #fff;
  border-top: 1px solid var(--e-linie);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.10);
  font-family: var(--e-schrift);
  color: var(--e-tinte);
  padding: 1.6rem 1.5rem calc(1.6rem + env(safe-area-inset-bottom));
  /* Bewegung: von unten hereinschieben. Die Klasse e-an setzt
     marketing.js, sobald das Element sichtbar ist. */
  transform: translateY(101%);
  transition: transform .34s cubic-bezier(.22, .61, .36, 1);
}
#fix30Einwilligung .e-leiste.e-an { transform: translateY(0); }
#fix30Einwilligung .e-leiste-innen {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr) 17rem;
  gap: 1rem 1.75rem;
  align-items: center;
  max-width: 82rem;
  margin: 0 auto;
}
#fix30Einwilligung .e-marke .fix30-logo { font-size: 1.35rem; }
#fix30Einwilligung .e-marke .pfeil { width: 0.9em; height: 0.72em; }

#fix30Einwilligung .e-titel {
  font-size: 0.92rem; font-weight: 700; line-height: 1.5;
  margin: 0 0 0.3rem; color: var(--e-tinte);
}
#fix30Einwilligung .e-fliess {
  font-size: 0.92rem; font-weight: 400; line-height: 1.55;
  margin: 0 0 0.7rem; color: var(--e-tinte);
}
/* Cookiebot faerbt den Verweis in seinem Indigo. Gelb traegt keinen
   lesbaren Text. Die Fettung traegt den Verweis allein, der Unterstrich
   kommt erst beim Zeigen: In einer Leiste mit zwei Knoepfen, drei
   Schaltern und zwei Textverweisen ist jeder zusaetzliche Strich
   Unruhe. */
#fix30Einwilligung a {
  color: var(--e-tinte); font-weight: 700;
  text-decoration: none;
}
#fix30Einwilligung a:hover,
#fix30Einwilligung a:focus-visible {
  text-decoration: underline; text-underline-offset: 3px;
}
#fix30Einwilligung .e-gpc {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 0.88rem; font-weight: 600; margin: 0 0 0.7rem;
}
#fix30Einwilligung .e-gpc span { color: var(--e-gelb); font-size: 1.05rem; }

/* ---------- Schalterreihe ---------- */
#fix30Einwilligung .e-reihe {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.6rem 1.5rem;
}
#fix30Einwilligung .e-schalter {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.92rem; font-weight: 700; cursor: pointer;
}
#fix30Einwilligung .e-schalter.e-fest { cursor: default; }
#fix30Einwilligung .e-schalter input {
  position: absolute; opacity: 0; width: 0; height: 0;
}
/* Im Fenster in Cookiebots Mass (57x32), in der Leiste eine Nummer
   kleiner — dort zaehlt jeder Millimeter Hoehe. */
#fix30Einwilligung .e-gleis {
  position: relative; flex: none;
  width: 48px; height: 27px; border-radius: 27px;
  background: var(--e-tinte);
  transition: background-color .3s ease;
}
#fix30Einwilligung .e-gleis::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 21px; height: 21px; border-radius: 50%;
  background: #fff;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
#fix30Einwilligung input:checked + .e-gleis { background: var(--e-gelb); }
#fix30Einwilligung input:checked + .e-gleis::after { transform: translateX(21px); }
#fix30Einwilligung .e-fenster .e-gleis { width: 57px; height: 32px; border-radius: 32px; }
#fix30Einwilligung .e-fenster .e-gleis::after { width: 26px; height: 26px; }
#fix30Einwilligung .e-fenster input:checked + .e-gleis::after { transform: translateX(25px); }
#fix30Einwilligung input:disabled + .e-gleis { opacity: 0.55; }
#fix30Einwilligung input:focus-visible + .e-gleis {
  outline: 2px solid var(--e-tinte); outline-offset: 3px;
}

#fix30Einwilligung .e-details {
  background: none; border: 0; padding: 0;
  font-family: inherit; font-size: 0.92rem; font-weight: 700;
  color: var(--e-tinte); cursor: pointer;
  text-decoration: none;
}
#fix30Einwilligung .e-details:hover,
#fix30Einwilligung .e-details:focus-visible {
  text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- Knoepfe ---------- */
#fix30Einwilligung .e-knoepfe { display: grid; gap: 0.5rem; }
#fix30Einwilligung .e-knopf {
  font-family: inherit; font-size: 0.92rem; font-weight: 700;
  padding: 0.8rem 1rem; border-radius: 4px; cursor: pointer;
  /* Cookiebot zeichnet 2px, wir 1px. Der Rahmen soll den Knopf
     begrenzen, nicht ihn tragen — bei einem so breiten Knopf wirkt
     schon 1,5px wie ein Kasten. */
  border: 1px solid var(--e-tinte);
  background: #fff; color: var(--e-tinte);
  transition: transform .12s ease, background-color .12s ease;
}
#fix30Einwilligung .e-knopf:active { transform: scale(0.98); }
#fix30Einwilligung .e-ja {
  background: var(--e-gelb); border-color: var(--e-gelb); color: var(--e-tinte);
}
#fix30Einwilligung .e-knopf:focus-visible { outline: 2px solid var(--e-tinte); outline-offset: 2px; }

/* ---------- Fenster ---------- */
#fix30Einwilligung .e-schleier {
  position: fixed; inset: 0; z-index: 2147483001;
  background: rgba(19, 19, 19, 0.38);
  opacity: 0; transition: opacity .28s ease;
}
#fix30Einwilligung .e-schleier.e-an { opacity: 1; }
#fix30Einwilligung .e-fenster {
  position: fixed; z-index: 2147483002;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(94vw, 56rem); max-height: min(88vh, 46rem);
  display: flex; flex-direction: column;
  background: #fff; border-radius: 8px;
  box-shadow: 0 32px 68px rgba(0, 0, 0, 0.3);
  font-family: var(--e-schrift); color: var(--e-tinte);
  overflow: hidden;
  /* Aus der Mitte heraus aufziehen, nicht einfach erscheinen. Der
     Ausgangswert ist etwas kleiner und tiefer, damit die Bewegung eine
     Richtung hat. */
  opacity: 0; transform: translate(-50%, -48%) scale(0.97);
  transition: opacity .26s ease, transform .3s cubic-bezier(.22, .61, .36, 1);
}
#fix30Einwilligung .e-fenster.e-an {
  opacity: 1; transform: translate(-50%, -50%) scale(1);
}
#fix30Einwilligung .e-fenster-kopf {
  padding: 1.4rem 1.75rem;
  border-bottom: 1px solid var(--e-linie);
}
#fix30Einwilligung .e-fenster-kopf .fix30-logo { font-size: 1.6rem; }

/* Reiter: aktiv traegt einen kraeftigen Strich statt farbiger Schrift —
   Gelb waere als Schriftfarbe nicht lesbar. */
#fix30Einwilligung .e-reiter {
  display: flex; border-bottom: 1px solid var(--e-linie);
}
#fix30Einwilligung .e-reiter-knopf {
  flex: 1; background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 0.94rem; font-weight: 700;
  color: var(--e-grau); padding: 1.05rem 0.5rem;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
#fix30Einwilligung .e-reiter-knopf[aria-selected="true"] {
  color: var(--e-tinte); border-bottom-color: var(--e-gelb);
}

#fix30Einwilligung .e-fenster-inhalt { overflow-y: auto; padding: 1.6rem 1.75rem; }
#fix30Einwilligung .e-blatt .e-reihe { margin-top: 1.25rem; }

/* ---------- Kategorie-Zeilen im Reiter "Details" ---------- */
#fix30Einwilligung .e-zeile {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 0.5rem 1rem;
  padding: 1.15rem 0; border-bottom: 1px solid var(--e-linie);
}
#fix30Einwilligung .e-zeile:last-child { border-bottom: 0; }
#fix30Einwilligung .e-zeile-kopf {
  display: flex; align-items: center; gap: 0.6rem;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 1.05rem; font-weight: 800; color: var(--e-tinte);
}
#fix30Einwilligung .e-pfeil {
  width: 0.55rem; height: 0.55rem; flex: none;
  border-right: 2px solid var(--e-tinte); border-bottom: 2px solid var(--e-tinte);
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .2s ease;
}
#fix30Einwilligung .e-offen .e-pfeil { transform: rotate(225deg) translate(-2px, -2px); }
#fix30Einwilligung .e-zahl {
  font-size: 0.78rem; font-weight: 700; color: var(--e-grau);
  background: #f3f3ef; border-radius: 999px; padding: 0.12rem 0.55rem;
}
#fix30Einwilligung .e-zeile .e-schalter { grid-column: 2; grid-row: 1; }
#fix30Einwilligung .e-zeile .e-schalter-name { display: none; }
#fix30Einwilligung .e-zeile-text {
  grid-column: 1 / -1;
  font-size: 0.94rem; line-height: 1.65; color: var(--e-tinte);
  margin: 0.6rem 0 0;
}

/* Die aufklappbare Keksliste. Die Huelle waechst von 0fr auf 1fr —
   so laesst sich eine Hoehe weich aufziehen, die man vorher nicht
   kennt. Das Kind muss dafuer overflow: hidden tragen. */
#fix30Einwilligung .e-huelle {
  grid-column: 1 / -1;
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .3s cubic-bezier(.22, .61, .36, 1);
}
#fix30Einwilligung .e-offen .e-huelle { grid-template-rows: 1fr; }
#fix30Einwilligung .e-kekse { overflow: hidden; list-style: none; margin: 0; padding: 0; }
#fix30Einwilligung .e-keks {
  display: grid;
  grid-template-columns: minmax(9rem, auto) 5rem minmax(0, 1fr) auto;
  gap: 0.35rem 1rem; align-items: baseline;
  padding: 0.6rem 0; border-top: 1px solid var(--e-linie);
  font-size: 0.86rem; line-height: 1.4;
}
#fix30Einwilligung .e-kekse li:first-child { margin-top: 0.7rem; }
#fix30Einwilligung .e-keks-name { font-weight: 800; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
#fix30Einwilligung .e-keks-wer,
#fix30Einwilligung .e-keks-dauer { color: var(--e-grau); font-weight: 600; }
#fix30Einwilligung .e-keks-dauer { text-align: right; white-space: nowrap; }

#fix30Einwilligung .e-fenster-fuss {
  display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 0.6rem;
  padding: 1.25rem 1.75rem; border-top: 1px solid var(--e-linie);
}
#fix30Einwilligung .e-fenster-fuss .e-knopf { min-width: 11rem; }

/* ---------- Abzeichen zum Wiederoeffnen ----------
   Cookiebots kleines rundes Zeichen. Es lag frueher genau ueber dem
   Buchen-Knopf, deshalb rechts, gedaempft — und am Telefon gar nicht:
   dort ist jeder Pixel daneben kostbar. Der Widerruf bleibt ueber die
   Datenschutzerklaerung erreichbar. */
#fix30Einwilligung .e-abzeichen {
  position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 2147482999;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; border: 1.5px solid var(--e-linie);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.10);
  cursor: pointer;
  opacity: 0; transform: scale(0.8);
  transition: opacity .25s ease, transform .25s cubic-bezier(.22, .61, .36, 1);
}
#fix30Einwilligung .e-abzeichen.e-an { opacity: 0.55; transform: scale(1); }
#fix30Einwilligung .e-abzeichen.e-an:hover { opacity: 1; }
#fix30Einwilligung .e-abzeichen svg { width: 22px; height: 22px; fill: var(--e-tinte); }

/* ---------- Schmale Fenster ---------- */
@media (max-width: 1080px) {
  #fix30Einwilligung .e-leiste-innen { grid-template-columns: minmax(0, 1fr) 16rem; }
  #fix30Einwilligung .e-marke { display: none; }
}
@media (max-width: 860px) {
  #fix30Einwilligung .e-abzeichen { display: none; }
  #fix30Einwilligung .e-leiste { padding: 1.25rem 1rem calc(1.25rem + env(safe-area-inset-bottom)); max-height: 88vh; overflow-y: auto; }
  #fix30Einwilligung .e-leiste-innen { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  #fix30Einwilligung .e-reihe { gap: 0.8rem 1.25rem; }
  #fix30Einwilligung .e-fenster { width: 100vw; max-width: none; height: 100vh; max-height: none; border-radius: 0; top: 0; left: 0; transform: none; }
  #fix30Einwilligung .e-fenster-fuss .e-knopf { flex: 1 1 100%; min-width: 0; }
}

/* Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt hier
   keine. Die Zeitschranke in marketing.js sorgt dafuer, dass das
   Ausblenden trotzdem endet, wenn kein Uebergang laeuft. */
@media (prefers-reduced-motion: reduce) {
  #fix30Einwilligung *,
  #fix30Einwilligung *::before,
  #fix30Einwilligung *::after { transition-duration: 0.01ms !important; }
  #fix30Einwilligung .e-leiste { transform: none; }
}