/* ==========================================================================
   aeovi.com · Einwilligung, Gestaltung für CookieConsent v3
   Liquid Glass: gleichmäßig durchscheinende Fläche, haarfeine Lichtkante,
   Randbrechung (Chromium, siehe consent.js). Keine Verläufe, keine Konturen.
   Zustimmen und Ablehnen gleichwertig.
   ========================================================================== */
#cc-main {
  --cc-font-family: "Barlow", "Segoe UI", sans-serif;
  --cc-modal-border-radius: 22px;
  --cc-btn-border-radius: 12px;
  --cc-pm-toggle-border-radius: 999px;
  --cc-modal-transition-duration: .5s;
  --cc-modal-margin: 20px;
  --cc-z-index: 2147483000;

  --cc-bg: transparent;
  --cc-primary-color: #f2f3f7;
  --cc-secondary-color: #a3a7b7;
  --cc-link-color: #f2f3f7;
  --cc-overlay-bg: rgba(5, 6, 11, .28);
  --cc-separator-border-color: rgba(255, 255, 255, .08);

  /* gleichwertige Knöpfe: Glas ohne Kontur, Hover in Magenta */
  --cc-btn-primary-bg: rgba(255, 255, 255, .11);
  --cc-btn-primary-color: #f2f3f7;
  --cc-btn-primary-border-color: transparent;
  --cc-btn-primary-hover-bg: #e6047e;
  --cc-btn-primary-hover-color: #fff;
  --cc-btn-primary-hover-border-color: transparent;
  --cc-btn-secondary-bg: transparent;
  --cc-btn-secondary-color: #a3a7b7;
  --cc-btn-secondary-border-color: transparent;
  --cc-btn-secondary-hover-bg: rgba(255, 255, 255, .06);
  --cc-btn-secondary-hover-color: #f2f3f7;
  --cc-btn-secondary-hover-border-color: transparent;

  --cc-footer-bg: transparent;
  --cc-footer-color: #8a8fa3;
  --cc-footer-border-color: rgba(255, 255, 255, .08);
  --cc-webkit-scrollbar-bg: rgba(255, 255, 255, .14);
  --cc-webkit-scrollbar-hover-bg: rgba(255, 255, 255, .24);
}

/* ---------- Glas ---------- */
#cc-main .cm, #cc-main .pm {
  --cc-glass: blur(4px) saturate(170%) brightness(.72);
  isolation: isolate;
  background: rgba(16, 18, 28, .38);
  -webkit-backdrop-filter: var(--cc-glass);
  backdrop-filter: var(--cc-glass);
  border: 0;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .4);
}
/* Chromium mit Linse: nahezu klares Glas, Lesbarkeit über Textschatten */
#cc-main .cm.cc-lens, #cc-main .pm.cc-lens {
  --cc-glass: blur(.6px) saturate(160%) brightness(.9);
  background: rgba(255, 255, 255, .025);
  backdrop-filter: var(--cc-lens) var(--cc-glass);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
}
/* Wie bei Apple zwei Stufen: Banner „Clear“, das textreiche Einstellungsfenster „Regular“ (mehr Streuung) */
#cc-main .cm.cc-lens { --cc-glass: blur(2px) saturate(160%) brightness(.82); }
#cc-main .pm.cc-lens { --cc-glass: blur(14px) saturate(170%) brightness(.6); background: rgba(255, 255, 255, .03); }
#cc-main .cc-lens .cm__title, #cc-main .cc-lens .cm__desc, #cc-main .cc-lens .pm__title,
#cc-main .cc-lens .pm__section-title, #cc-main .cc-lens .pm__section-desc, #cc-main .cc-lens .cc-note {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7), 0 0 16px rgba(0, 0, 0, .55);
}
#cc-main .cc-lens .cm__desc, #cc-main .cc-lens .pm__section-desc { color: #c3c6d1; }
#cc-main .cc-lens .cm__btn:not(.cm__btn--secondary), #cc-main .cc-lens .pm__btn:not(.pm__btn--secondary) {
  -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%);
}
/* Lichtkante: Haarlinie, die nur oben links und unten rechts aufleuchtet */
#cc-main .cm::before, #cc-main .pm::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .1) 16%, rgba(255, 255, 255, .03) 40%, rgba(255, 255, 255, .03) 62%, rgba(255, 255, 255, .1) 84%, rgba(255, 255, 255, .38));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* Ohne backdrop-filter oder bei Wunsch nach weniger Transparenz: dichte Fläche */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #cc-main .cm, #cc-main .pm { background: rgba(14, 16, 26, .96); }
}
@media (prefers-reduced-transparency: reduce) {
  #cc-main .cm, #cc-main .pm { background: rgba(14, 16, 26, .96); }
}

/* ---------- Banner: flach, rechts unten ---------- */
#cc-main .cm { transition-timing-function: cubic-bezier(.16, 1, .3, 1); }
#cc-main .cm--cloud { max-width: 660px; }
#cc-main .cm--cloud .cm__body { align-items: center; padding: 8px; }
#cc-main .cm__texts { padding: 14px 10px 14px 16px; gap: 0; }
#cc-main .cm__title {
  font: 300 22px/1.1 "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: -.005em; color: #f2f3f7; padding: 0;
}
#cc-main .cm__title b { font-weight: 600; }
#cc-main .cm__desc { padding: 0; margin-top: 8px; max-height: none; font-size: 13.5px; line-height: 1.55; color: #a3a7b7; }
#cc-main .cm--cloud .cm__btns { border: 0 !important; padding: 6px; max-width: none; }
#cc-main .cm__btn-group { gap: 6px; }
#cc-main .cm--cloud .cm__btn { min-width: 0; width: 148px; }
#cc-main .cm .cm__btn-group .cm__btn { margin: 0 !important; }
#cc-main .cm__btn-group + .cm__btn-group { margin-top: 6px; }

/* ---------- Knöpfe ---------- */
#cc-main .cm__btn, #cc-main .pm__btn {
  font: 600 14px "Barlow", sans-serif; letter-spacing: .02em; min-height: 40px; padding: 0 18px; margin: 0;
  border: 0 !important; box-shadow: none;
  transition: background-color .2s, color .2s, transform .3s cubic-bezier(.16, 1, .3, 1);
}
#cc-main .cm__btn:active, #cc-main .pm__btn:active { transform: scale(.97); }
#cc-main .cm__btn--secondary, #cc-main .pm__btn--secondary { font-weight: 500; min-height: 34px; }

/* ---------- Einstellungen: ruhige Liste mit Haarlinien ---------- */
#cc-main .pm--box { height: auto; max-height: min(calc(100% - 2em), 37.5em); max-width: 560px; }
#cc-main .pm__header { padding: 20px 20px 16px 24px; border-bottom: 0; }
#cc-main .pm__title { font: 300 26px/1.1 "Barlow Condensed", "Arial Narrow", sans-serif; color: #f2f3f7; margin: 0; }
#cc-main .pm__close-btn { width: 34px; height: 34px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .08); }
#cc-main .pm__close-btn:hover { background: rgba(255, 255, 255, .14); }
#cc-main .pm__close-btn svg { stroke: #f2f3f7; }
#cc-main .pm__body { padding: 0 24px; }
#cc-main .pm__section-desc, #cc-main .pm__section-desc-wrapper { font-size: 14px; line-height: 1.55; color: #a3a7b7; }
#cc-main .pm__section-desc a { color: #f2f3f7; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .3); }
#cc-main .pm__section:first-child { margin: 0 0 18px; padding: 0; }

/* jede Kategorie: Titel + Hinweis links, Schalter rechts, Beschreibung darunter, gleicher Abstand */
#cc-main .pm__section--toggle {
  background: none; border: 0; border-top: 1px solid rgba(255, 255, 255, .08); border-radius: 0;
  margin: 0; padding: 18px 0;
}
#cc-main .pm__section--toggle:hover { background: none; }
#cc-main .pm__section--toggle .pm__section-title,
#cc-main .pm__section--expandable .pm__section-title {
  background: none !important; border: 0 !important; border-radius: 0; min-height: 26px; padding: 0 64px 0 0;
  font: 600 15px "Barlow", sans-serif; color: #f2f3f7; cursor: default; justify-content: flex-start; gap: 10px;
}
#cc-main .pm__section-arrow { display: none !important; }
#cc-main .pm__section--toggle .pm__section-desc-wrapper { display: block !important; border: 0; margin-top: 6px !important; overflow: visible; }
#cc-main .pm__section--toggle .pm__section-desc { padding: 0 64px 0 0; }
#cc-main .cc-note { font: 500 10.5px/1 "JetBrains Mono", Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; color: #6f7487; }

/* Schalter: klarer Zustand, aus = grau links, an = Magenta rechts */
#cc-main .section__toggle-wrapper { right: 0; }
#cc-main .section__toggle, #cc-main .section__toggle-wrapper, #cc-main .toggle__icon, #cc-main .toggle__label { width: 46px; height: 26px; }
#cc-main .toggle__icon { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); transition: background-color .25s; }
#cc-main .toggle__icon-circle { width: 20px; height: 20px; top: 3px; left: 3px; background: #c9ccd6; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: transform .3s cubic-bezier(.16, 1, .3, 1), background-color .25s; }
#cc-main .toggle__icon-on, #cc-main .toggle__icon-off { display: none; }
#cc-main .section__toggle:checked ~ .toggle__icon { background: #e6047e; box-shadow: none; }
#cc-main .section__toggle:checked ~ .toggle__icon .toggle__icon-circle { background: #fff; transform: translateX(20px); }
#cc-main .section__toggle:checked:disabled ~ .toggle__icon { background: rgba(230, 4, 126, .38); box-shadow: none; }
#cc-main .section__toggle:checked:disabled ~ .toggle__icon .toggle__icon-circle { background: rgba(255, 255, 255, .75); }
#cc-main .section__toggle:focus-visible ~ .toggle__icon { outline: 2px solid #ffc414; outline-offset: 3px; }

#cc-main .pm__footer { padding: 16px 24px 20px; border-top: 1px solid rgba(255, 255, 255, .08); gap: 8px; }
#cc-main .pm__btn-group { gap: 8px; }
#cc-main .pm__btn + .pm__btn { margin-left: 0 !important; }

/* Fokus nur bei Tastaturbedienung; der per Skript gesetzte Fokus beim Öffnen bleibt unsichtbar */
#cc-main :focus-visible { outline: 2px solid #ffc414; outline-offset: 3px; }
#cc-main [tabindex="-1"]:focus, #cc-main [tabindex="-1"]:focus-visible { outline: none; }

/* ---------- Hover nur mit Maus ---------- */
@media (hover: hover) {
  #cc-main .cm__btn:not(.cm__btn--secondary):hover, #cc-main .pm__btn:not(.pm__btn--secondary):hover { box-shadow: 0 6px 22px rgba(230, 4, 126, .35); }
}
@media (hover: none) {
  #cc-main { --cc-btn-primary-hover-bg: rgba(255, 255, 255, .11); --cc-btn-primary-hover-color: #f2f3f7; --cc-btn-secondary-hover-bg: transparent; }
}

/* ---------- Handy ---------- */
@media (max-width: 640px) {
  #cc-main .cm--cloud { left: 10px; right: 10px; bottom: 10px; margin: 0; }
  #cc-main .cm--cloud .cm__body { flex-direction: column; align-items: stretch; padding: 6px; }
  #cc-main .cm__texts { padding: 12px 12px 6px; }
  #cc-main .cm__title { font-size: 21px; }
  #cc-main .cm__desc { font-size: 13px; }
  #cc-main .cm--cloud .cm__btns { padding: 6px; }
  #cc-main .cm__btn-group { display: flex; flex-direction: row !important; }
  #cc-main .cm--cloud .cm__btn { width: auto; flex: 1 1 0 !important; }
  /* Einstellungen als Blatt von unten */
  #cc-main .pm--box { top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important; height: auto !important; max-height: 88vh !important; border-radius: 22px 22px 0 0; transform: translateY(1.6em); }
  #cc-main .pm__body { flex: 0 1 auto; padding: 0 20px; }
  #cc-main .pm__header { padding: 18px 16px 14px 20px; }
  #cc-main .pm__footer { padding: 14px 20px 20px; }
  .show--preferences #cc-main .pm--box { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #cc-main { --cc-modal-transition-duration: 0s; }
  #cc-main .cm__btn, #cc-main .pm__btn, #cc-main .toggle__icon-circle { transition: none; }
}

/* Footer-Link „Cookie-Einstellungen“ (Knopf im Stil der Fußzeilen-Links) */
.foot .cc-open { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; transition: color .2s; }
.foot .cc-open:hover { color: var(--text); }