/* Cookie-Banner im STARDRIVE-Design (CookieConsent v3, selbst gehostet).
   WICHTIG: Hier stehen KEINE festen Farbwerte (kein Hex, kein rgb, kein eigener Verlauf). Alle Farben kommen aus den zentralen
   Variablen der Seite: critical.css (--bg, --card, --alt, --text, --muted, --line, --white, --shade-rgb, --grad, --on-accent) und die
   stündlich wechselnde Farbwelt (--c1, --c2, --c3, gesetzt von includes/head.php und public/assets/js/farbwelt.js).
   Wechselt die Farbwelt, wechselt der Banner automatisch mit, auch wenn er gerade geöffnet ist.
   Rückfallwerte (white, black) stehen nur in var(..., Rückfall) und greifen nur, falls critical.css/config.php auf dem Server noch alt sind
   (sonst wäre "Ablehnen" schwarz auf schwarz). */
#cc-main{
  --cc-font-family:var(--font-body);--cc-z-index:2147483600;
  --cc-bg:var(--card);--cc-primary-color:var(--text);--cc-secondary-color:var(--muted);
  --cc-btn-primary-bg:var(--c2);--cc-btn-primary-color:var(--on-accent,black);--cc-btn-primary-border-color:var(--c2);
  --cc-btn-primary-hover-bg:var(--c2);--cc-btn-primary-hover-color:var(--on-accent,black);--cc-btn-primary-hover-border-color:var(--c2);
  --cc-btn-secondary-bg:var(--white,white);--cc-btn-secondary-color:var(--bg);--cc-btn-secondary-border-color:var(--c2);
  --cc-btn-secondary-hover-bg:var(--white,white);--cc-btn-secondary-hover-color:var(--bg);--cc-btn-secondary-hover-border-color:var(--c2);
  --cc-separator-border-color:var(--line);--cc-section-category-border:var(--line);
  --cc-toggle-on-bg:var(--c2);--cc-toggle-on-knob-bg:var(--bg);--cc-toggle-enabled-icon-color:var(--c2);
  --cc-toggle-off-bg:color-mix(in srgb,var(--muted) 40%,var(--bg));--cc-toggle-off-knob-bg:var(--text);--cc-toggle-disabled-icon-color:var(--bg);
  --cc-toggle-readonly-bg:color-mix(in srgb,var(--muted) 30%,var(--bg));--cc-toggle-readonly-knob-bg:var(--muted);--cc-toggle-readonly-knob-icon-color:var(--bg);
  --cc-cookie-category-block-bg:var(--alt);--cc-cookie-category-block-border:var(--line);
  --cc-cookie-category-block-hover-bg:var(--card);--cc-cookie-category-block-hover-border:color-mix(in srgb,var(--muted) 35%,var(--bg));
  --cc-cookie-category-expanded-block-bg:var(--alt);--cc-cookie-category-expanded-block-hover-bg:var(--card);
  --cc-footer-bg:transparent;--cc-footer-color:var(--text);--cc-footer-border-color:var(--line);
  --cc-webkit-scrollbar-bg:var(--line);--cc-webkit-scrollbar-hover-bg:var(--muted);
  --cc-overlay-bg:rgba(var(--shade-rgb),.4);--cc-link-color:var(--c3)}
#cc-main .cm,#cc-main .pm{border:1px solid var(--line)}
#cc-main .cm__title,#cc-main .pm__title{font-weight:700}
#cc-main a{color:var(--c3);text-decoration:underline}
#cc-main a:focus-visible,#cc-main button:focus-visible{outline:3px solid var(--text);outline-offset:2px}

/* Fußzeilen-Link "Cookie-Einstellungen" der Seite sieht aus wie die anderen Links */
.linklike{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-align:left;cursor:pointer;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.linklike:hover{text-decoration:underline}
.linklike:focus-visible{outline:3px solid var(--text);outline-offset:2px}

/* ---- Banner mittig, Seite dahinter unscharf und abgedunkelt ---- */
.disable--interaction #cc-main .cm-wrapper:before{background:rgba(var(--shade-rgb),.4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#cc-main .cm--box.cm--wide{width:min(600px,calc(100% - 32px));max-width:600px;text-align:center;border-radius:20px;background:var(--card);border:1px solid var(--line);box-shadow:0 20px 60px rgba(var(--shade-rgb),.6)}
#cc-main .cm__texts{padding:.8rem 0 0}
#cc-main .cm__desc{font-size:1rem;line-height:1.6;text-align:center;color:var(--text);padding:1.4rem 1.4rem 1rem!important}
#cc-main .cm__desc a{color:var(--c3);white-space:normal}

/* ---- Buttons (beide Ebenen): "Alle akzeptieren", "Ablehnen" und "Auswahl speichern" sind gleich groß ---- */
#cc-main .cm__btn,#cc-main .pm__btn{
  box-sizing:border-box;min-height:48px;margin:0!important;padding:.7em 1.4em;
  font-family:inherit;font-size:1rem;font-weight:700;line-height:1.2;text-align:center;
  border:2px solid var(--c2);border-radius:999px}
/* Alle akzeptieren: Verlauf der aktuellen Farbwelt, Schrift in der passenden Farbe (--on-accent) */
#cc-main .cm__btn[data-role="all"],#cc-main .pm__btn[data-role="all"]{background:var(--grad);background-origin:border-box;color:var(--on-accent,black);border-color:var(--c2)}
/* Ablehnen: weißer Hintergrund, dunkle Schrift, Rand in der Designfarbe */
#cc-main .cm__btn[data-role="necessary"],#cc-main .pm__btn[data-role="necessary"]{background:var(--white,white);color:var(--bg);border-color:var(--c2)}
/* Auswahl speichern (zweite Ebene): dunkel mit Rand in der Designfarbe */
#cc-main .pm__btn[data-role="save"]{background:var(--card);color:var(--text);border-color:var(--c2)}
#cc-main .cm__btn[data-role="all"]:hover,#cc-main .pm__btn[data-role="all"]:hover{filter:brightness(1.08)}
#cc-main .cm__btn[data-role="necessary"]:hover,#cc-main .pm__btn[data-role="necessary"]:hover{filter:brightness(.94)}
#cc-main .pm__btn[data-role="save"]:hover{background:var(--alt)}

/* ---- Erste Ebene: zwei Buttons nebeneinander (gleich groß), darunter der Textlink "Personalisieren" ---- */
#cc-main .cm--box.cm--wide .cm__btns{display:flex;flex-direction:column;align-items:stretch;gap:6px;border-top:0!important;padding:.2rem 1.4rem 1rem!important}
#cc-main .cm--box.cm--wide .cm__btn-group{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:stretch;gap:12px;width:100%;margin:0}
#cc-main .cm--box.cm--wide .cm__btn[data-role="all"],#cc-main .cm--box.cm--wide .cm__btn[data-role="necessary"]{flex:1 1 0;min-width:0;max-width:260px;width:auto}
#cc-main .cm--box.cm--wide .cm__btn[data-role="show"]{
  flex:0 0 auto;width:100%;max-width:none;min-height:44px;
  background:none;border:0;border-radius:0;padding:.4em 1em;font-weight:500;
  color:var(--c3);text-decoration:underline;text-underline-offset:3px}
#cc-main .cm--box.cm--wide .cm__btn[data-role="show"]:hover{filter:brightness(1.15)}
/* Fußzeile des Banners: nur Impressum und Datenschutz */
#cc-main .cm__footer{background:transparent;border-top:1px solid var(--line);padding:.6rem 0 .8rem;text-align:center;width:100%}
#cc-main .cm__footer .cm__links{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:.4rem;text-align:center;width:100%;max-width:none;padding:0 1rem!important}
#cc-main .cm__footer .cm__link-group{width:100%;text-align:center;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 .15rem}
#cc-main .cm__footer a{display:inline-block;min-height:44px;line-height:44px;padding:0 .6rem;font-size:.95rem}

/* ---- Zweite Ebene "Personalisieren": Buttons untereinander, gleich groß ---- */
#cc-main .pm__footer{display:flex;flex-direction:column;align-items:stretch;gap:10px}
#cc-main .pm__footer .pm__btn-group{display:flex;flex-direction:column;align-items:stretch;gap:10px;width:100%;margin:0}
#cc-main .pm__footer .pm__btn{width:100%;flex:0 0 auto}

/* ---- Handy (unter 600 px): Buttons untereinander, volle Breite, mindestens 44 px hoch ---- */
@media (max-width:599px){
  #cc-main .cm--box.cm--wide{width:calc(100% - 24px)}
  #cc-main .cm--box.cm--wide .cm__btn-group{flex-direction:column;gap:10px}
  #cc-main .cm--box.cm--wide .cm__btn[data-role="all"],#cc-main .cm--box.cm--wide .cm__btn[data-role="necessary"]{flex:0 0 auto;max-width:none;width:100%;min-height:48px}
}