/* ============================================================
   ZERO ONE IT — Cookie-/Consent-Center
   Eigenstaendiges, praefixiertes Stylesheet (.cookie-consent / .cc-*),
   damit nichts mit bestehenden Klassen der Seiten kollidiert.
   Nutzt die vorhandenen Design-Tokens (--bg, --accent, --surface, ...),
   die in jeder Seite bereits im :root definiert sind.
   ============================================================ */

.cookie-consent{position:fixed;inset:0;z-index:900;display:none;visibility:hidden;
  --cc-icon-size:88px;--cc-shell-pad:calc(var(--cc-icon-size) * .84)}
.cookie-consent.cc-visible{display:block;visibility:visible}

.cc-backdrop{position:absolute;inset:0;background:var(--schleier);opacity:0;transition:opacity .38s ease;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.cookie-consent.cc-open .cc-backdrop{opacity:1}

/* align-items/justify-content werden bewusst zweimal deklariert: die "safe"-Variante
   verhindert, dass zentrierter, ueberlaufender Inhalt am oberen Rand abgeschnitten wird
   (klassisches Flexbox-Centering-Problem). Browser ohne Unterstuetzung ignorieren die
   ungueltige Deklaration und behalten die vorherige "center"-Zeile als Fallback. */
.cc-viewport{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  align-items:safe center;justify-content:safe center;
  padding:20px;overflow-y:auto;overscroll-behavior:contain}

/* ===== Shell: reserviert echten Platz fuer das Icon, damit weder die Zentrierung
   in .cc-viewport noch das overflow:auto von .cc-dialog es beschneiden. Das Icon liegt
   als Geschwister VOR .cc-dialog, ausserhalb von dessen Clipping-/Scroll-Box. ===== */
.cc-shell{position:relative;width:100%;max-width:540px;overflow:visible;
  padding-top:var(--cc-shell-pad)}

.cc-dialog{position:relative;width:100%;z-index:1;
  background:linear-gradient(165deg,rgba(var(--hoch-rgb),0.94) 0%,rgba(var(--grund-rgb),0.97) 100%);
  border:1px solid var(--border-accent);border-radius:22px;
  padding:52px 40px 36px;
  box-shadow:0 40px 90px -24px rgba(var(--schatten-rgb),.65),0 0 0 1px rgba(var(--waesche-rgb),.03),0 0 70px -18px var(--accent-glow);
  opacity:0;transform:translateY(22px) scale(.98);
  transition:opacity .42s var(--ease-out,cubic-bezier(.23,1,.32,1)),transform .42s var(--ease-out,cubic-bezier(.23,1,.32,1)),border-color .3s ease;
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  max-height:calc(100dvh - 40px - var(--cc-shell-pad));overflow-y:auto}
.cookie-consent.cc-open .cc-dialog{opacity:1;transform:translateY(0) scale(1)}
.cc-dialog:focus{outline:none}
.cc-dialog:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* ===== Icon: liegt VOLLSTAENDIG innerhalb der von .cc-shell reservierten Flaeche
   (top:0 = oberste Kante der Shell selbst, keine negative Verschiebung nach oben -
   dadurch kennt die Flexbox-Zentrierung in .cc-viewport die tatsaechliche Gesamthoehe
   und das Icon kann nie ueber den sichtbaren Viewport hinausragen). Der Ueberlapp auf
   die obere Dialog-Kante entsteht allein dadurch, dass --cc-shell-pad kleiner ist als
   --cc-icon-size (Dialog beginnt, bevor das Icon endet).
   .cc-icon uebernimmt NUR die Positionierung (nie animiert) - .cc-icon-visual
   NUR die Eintritts-Animation (Opacity/Scale). So ueberschreiben sich Positions-
   und Animations-Transform nie gegenseitig. */
.cc-icon{position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:var(--cc-icon-size);height:var(--cc-icon-size);z-index:2;pointer-events:none}
.cc-icon-visual{display:block;width:100%;height:100%;opacity:0;transform:scale(.92);
  transition:opacity .4s ease .1s,transform .4s var(--ease-out,cubic-bezier(.23,1,.32,1)) .1s}
.cookie-consent.cc-open .cc-icon-visual{opacity:1;transform:scale(1)}
.cc-icon-visual svg{display:block;width:100%;height:100%}
.cc-icon-pulse{animation:cc-pulse 3.6s ease-in-out infinite}

@keyframes cc-pulse{
  0%,100%{opacity:.16;transform:scale(1)}
  50%{opacity:.32;transform:scale(1.045)}
}

/* ===== Inhalt ===== */
.cc-panes{position:relative}
.cc-pane{opacity:1;transform:translateX(0);transition:opacity .22s var(--ease-out,cubic-bezier(.23,1,.32,1)),transform .22s var(--ease-out,cubic-bezier(.23,1,.32,1))}
.cc-pane[hidden]{display:none}
.cc-panes.cc-switching-fwd .cc-pane-main{opacity:0;transform:translateX(-14px)}
.cc-panes.cc-switching-fwd .cc-pane-settings{opacity:0;transform:translateX(14px)}
.cc-panes.cc-switching-back .cc-pane-settings{opacity:0;transform:translateX(14px)}
.cc-panes.cc-switching-back .cc-pane-main{opacity:0;transform:translateX(-14px)}

.cc-overline{font-family:var(--font-mono);font-size:.6875rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);text-align:center;margin-bottom:14px}
.cc-title{font-family:var(--font-display);font-weight:700;font-size:clamp(1.375rem,3vw,1.625rem);line-height:1.2;letter-spacing:-.01em;color:var(--text-1);text-align:center;margin-bottom:14px}
.cc-text{font-size:.9375rem;line-height:1.65;color:var(--text-2);text-align:center;margin-bottom:28px}

.cc-actions{display:flex;flex-direction:column;gap:12px;align-items:stretch}

.cc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  min-height:50px;padding:14px 24px;border-radius:100px;border:none;cursor:pointer;
  font-family:var(--font-display);font-size:.9375rem;font-weight:600;
  transition:background .2s,color .2s,border-color .2s,transform .16s var(--ease-out,cubic-bezier(.23,1,.32,1)),box-shadow .25s ease}
.cc-btn:active{transform:scale(.98)}
.cc-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.cc-btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 10px 30px -10px rgba(0,201,167,.45)}
.cc-btn-primary:hover{background:var(--accent-hell);transform:translateY(-1px);box-shadow:0 14px 36px -10px rgba(0,201,167,.6)}

.cc-btn-outline{background:transparent;color:var(--text-1);border:1px solid var(--border)}
.cc-btn-outline:hover{border-color:var(--accent-text);color:var(--accent-text);background:var(--accent-dim)}

.cc-settings-link{display:block;width:100%;text-align:center;background:none;border:none;cursor:pointer;
  margin-top:18px;padding:10px;font-family:var(--font-body);font-size:.875rem;font-weight:500;
  color:var(--text-2);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;
  transition:color .2s,text-decoration-color .2s}
.cc-settings-link:hover{color:var(--accent-text);text-decoration-color:var(--accent-text)}
.cc-settings-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

.cc-privacy-link{text-align:center;margin-top:16px}
.cc-privacy-link a{font-size:.8125rem;color:var(--text-3);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}
.cc-privacy-link a:hover{color:var(--accent-text);text-decoration-color:var(--accent-text)}
.cc-privacy-link a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ===== Einstellungen-Ansicht ===== */
.cc-back{display:inline-flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;
  color:var(--text-2);font-family:var(--font-body);font-size:.8125rem;font-weight:500;padding:6px 4px;margin-bottom:18px;
  transition:color .2s}
.cc-back svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.cc-back:hover{color:var(--accent-text)}
.cc-back:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

.cc-categories{display:flex;flex-direction:column;gap:0;border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:24px}
.cc-category{padding:18px 20px;border-bottom:1px solid var(--border)}
.cc-category:last-child{border-bottom:none}
.cc-category-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}
.cc-category-name{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:600;font-size:.9375rem;color:var(--text-1)}
.cc-lock-icon{width:14px;height:14px;stroke:var(--text-3);fill:none;stroke-width:1.6;flex:0 0 auto}
.cc-locked-badge{font-family:var(--font-mono);font-size:.625rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);
  background:var(--surface-up);border:1px solid var(--border);border-radius:100px;padding:4px 10px;white-space:nowrap}
.cc-category-desc{font-size:.8125rem;line-height:1.6;color:var(--text-2)}

/* Toggle */
.cc-toggle{position:relative;width:44px;height:26px;border-radius:100px;border:1px solid var(--border);
  background:var(--surface-up);cursor:pointer;flex:0 0 auto;padding:0;transition:background .22s ease,border-color .22s ease}
.cc-toggle-knob{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--text-3);
  transition:transform .22s var(--ease-out,cubic-bezier(.23,1,.32,1)),background .22s ease}
.cc-toggle[aria-checked="true"]{background:var(--accent);border-color:var(--accent-text)}
.cc-toggle[aria-checked="true"] .cc-toggle-knob{transform:translateX(18px);background:var(--accent-ink)}
.cc-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.cc-actions-settings{margin-top:4px}

/* ===== Responsive ===== */
@media(max-width:560px){
  .cookie-consent{--cc-icon-size:72px}
  .cc-dialog{padding:46px 22px 28px;border-radius:20px}
  .cc-title{font-size:1.25rem}
}
@media(max-height:700px){
  .cookie-consent{--cc-icon-size:68px}
  .cc-dialog{padding-top:42px}
  .cc-text{margin-bottom:20px}
}

/* ===== prefers-reduced-motion ===== */
@media(prefers-reduced-motion:reduce){
  .cc-backdrop,.cc-dialog,.cc-icon-visual,.cc-pane,.cc-btn,.cc-toggle,.cc-toggle-knob{transition:none!important}
  .cc-icon-pulse{animation:none!important}
  .cookie-consent.cc-open .cc-dialog{transform:none}
  .cc-icon-visual{transform:none!important}
}

/* ===== Footer-Link (dezent, blendet sich in bestehende Footer-Stile ein) ===== */
button.cc-footer-link{background:none;border:none;padding:0;margin:0;font:inherit;cursor:pointer;
  display:inline-flex;align-items:center;min-height:44px}