/* Cookie-Banner im Design der Kundenseite: nutzt die CSS-Variablen aus DESIGN.md/stil.css (--grund, --flaeche, --text, --gedaempft,
   --linie, --akzent, --akzent-text, --fliess, --r1, --r2) mit neutralem Ersatz. «Alle ablehnen» und «Alle akzeptieren» gleich stark
   (equalWeightButtons in cookie-konfig.js), Fokus sichtbar, keine Bewegung bei prefers-reduced-motion. */
#cc-main{
  --cc-font-family:var(--fliess,system-ui,-apple-system,"Segoe UI",sans-serif);
  --cc-modal-border-radius:var(--r2,8px);--cc-btn-border-radius:var(--r1,6px);
  --cc-bg:var(--flaeche,#fff);--cc-primary-color:var(--text,#1a1a1a);--cc-secondary-color:var(--gedaempft,#555);
  --cc-btn-primary-bg:var(--akzent,#1a1a1a);--cc-btn-primary-color:var(--akzent-text,#fff);--cc-btn-primary-border-color:var(--akzent,#1a1a1a);
  --cc-btn-primary-hover-bg:var(--text,#000);--cc-btn-primary-hover-color:var(--flaeche,#fff);--cc-btn-primary-hover-border-color:var(--text,#000);
  --cc-btn-secondary-bg:var(--grund,#f2f2f2);--cc-btn-secondary-color:var(--text,#1a1a1a);--cc-btn-secondary-border-color:var(--linie,#ccc);
  --cc-btn-secondary-hover-bg:var(--flaeche,#fff);--cc-btn-secondary-hover-color:var(--text,#1a1a1a);--cc-btn-secondary-hover-border-color:var(--text,#1a1a1a);
  --cc-separator-border-color:var(--linie,#ddd);--cc-toggle-on-bg:var(--akzent,#1a1a1a);--cc-toggle-readonly-bg:var(--linie,#ccc);
  --cc-cookie-category-block-bg:var(--grund,#f5f5f5);--cc-cookie-category-block-border:var(--linie,#ddd);
  --cc-cookie-category-block-hover-bg:var(--grund,#f0f0f0);--cc-cookie-category-block-hover-border:var(--linie,#ccc);
  --cc-footer-bg:var(--grund,#f5f5f5);--cc-footer-color:var(--gedaempft,#555);--cc-footer-border-color:var(--linie,#ddd);
  --cc-link-color:var(--text,#1a1a1a)
}
#cc-main a{text-decoration:underline}
#cc-main :focus-visible{outline:3px solid var(--akzent,#1a1a1a);outline-offset:2px}
#cc-main .cm__btn,#cc-main .pm__btn{min-height:44px}
/* Mobil kompakt (Luis 21.10.2026: das Banner deckte auf dem Handy rund ein Drittel des Bildschirms).
   Nur Masse und Abstaende werden kleiner, nie die Wahl: «Alle ablehnen» bleibt gleich gross, gleich gestaltet und
   gleich sichtbar wie «Alle akzeptieren» (equalWeightButtons), nichts ist vorausgewaehlt, Klickflaeche bleibt 44 px. */
@media (max-width:560px){
  #cc-main .cm--cloud,#cc-main .cm--box{--cc-modal-border-radius:var(--r1,6px)}
  #cc-main .cm{padding:12px 12px 10px;gap:8px;max-height:min(46vh,420px);overflow-y:auto;overscroll-behavior:contain}
  #cc-main .cm__title{font-size:1rem;line-height:1.25;margin:0 0 2px}
  #cc-main .cm__desc{font-size:.82rem;line-height:1.35}
  #cc-main .cm__texts{padding:0}
  #cc-main .cm__link-group{flex-wrap:wrap;gap:4px 12px}
  #cc-main .cm__link-group a{overflow-wrap:anywhere;hyphens:auto}
  /* Knopfreihe bleibt sichtbar, auch wenn der Einwilligungstext laenger ist als das Fenster:
   «Alle ablehnen» darf nie aus dem Blick rutschen (Rechts-Gate 5.2). Der Text wird nie abgeschnitten. */
  #cc-main .cm__btns{padding:8px 0 0;gap:8px;position:sticky;bottom:0;background:var(--cc-bg);box-shadow:0 -8px 12px -8px rgba(0,0,0,.25)}
  #cc-main .cm__btn-group{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
  #cc-main .cm__btn-group .cm__btn{width:100%;margin:0}
  #cc-main .cm__btn{min-height:44px;padding:10px 12px;font-size:.92rem}
  #cc-main .cm__btn--close,#cc-main .cm__btn[data-role="show"]{grid-column:1 / -1}
}
@media (prefers-reduced-motion:reduce){#cc-main *,#cc-main *::before,#cc-main *::after{transition:none!important;animation:none!important}}
.link-knopf{background:none;border:0;margin:0;padding:10px 0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer;min-height:24px}
.link-knopf:focus-visible{outline:3px solid currentColor;outline-offset:2px}
.zwei-klick{border:1px solid var(--linie,#ccc);border-radius:var(--r1,6px);background:var(--grund,#f5f5f5);padding:24px}