/*
 * Gemeinsame Stile aller Layouts – werden immer geladen, auch bei
 * "grundstil": false (pruefurteil, rangtafel, warentafel laden site.css nicht).
 *
 * Cookie-Hinweis, uebernommen aus superdeals (3.11.2026): fuer alle Layouts
 * gleich, unten, schmal, neutral. Aussehen im Backend (Layout & Verhalten →
 * "Aussehen des Cookie-Hinweises"): dunkel, hell oder transparent.
 * Das Layout gestaltet den Hinweis NICHT selbst (LAYOUT-BAUSTEINE Abschnitt 18).
 *
 * Ebene 55: ueber dem Sticky-Banner der schwebenden Layouts (40), unter allen
 * Overlays und dem Exit-Popup (60 bzw. 80) – die muessen obenauf bleiben.
 * Solange der Hinweis steht, setzt site.js am body die Klasse hat-cookie und
 * die Hoehe --ck-hoehe; das Produktbanner rueckt um diese Hoehe nach oben.
 */
.ck { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: flex; align-items: center; gap: 12px;
  padding: 9px 16px calc(9px + env(safe-area-inset-bottom));
  font: 400 12.5px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: rgba(32, 33, 36, .88); color: #f1f1f1;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .08); }
.ck[hidden] { display: none; }
.ck p { margin: 0; flex: 1; min-width: 0; }
.ck a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ck-bt { display: flex; gap: 8px; flex-shrink: 0; }
.ck button { font: inherit; font-weight: 600; border-radius: 6px; padding: 6px 16px; min-height: 36px; min-width: 64px; cursor: pointer; }
.ck .ck-ok { background: #fff; color: #202124; border: 0; }
.ck .ck-no { background: transparent; color: inherit; border: 1px solid rgba(255, 255, 255, .45); }
.ck button:focus-visible { outline: 2px solid #8ab4f8; outline-offset: 2px; }

/* hell */
.ck.ck-hell { background: rgba(255, 255, 255, .92); color: #2a2b2e; box-shadow: 0 -1px 0 rgba(0, 0, 0, .1); }
.ck.ck-hell .ck-ok { background: #202124; color: #fff; }
.ck.ck-hell .ck-no { border-color: rgba(0, 0, 0, .3); }
.ck.ck-hell button:focus-visible { outline-color: #1a73e8; }

/* transparent: deutlich durchsichtig, wenig Weichzeichner, Schrift mit Schatten lesbar */
.ck.ck-transparent { background: rgba(20, 21, 24, .55); color: #fff;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55); box-shadow: none; }
.ck.ck-transparent button { text-shadow: none; }
.ck.ck-transparent .ck-ok { background: rgba(255, 255, 255, .95); color: #202124; }
.ck.ck-transparent .ck-no { border-color: rgba(255, 255, 255, .7); background: rgba(0, 0, 0, .15); }

@media (max-width: 900px) {
  .ck { flex-wrap: wrap; gap: 8px; padding: 9px 12px calc(10px + env(safe-area-inset-bottom)); }
  .ck p { flex-basis: 100%; }
  .ck-bt { width: 100%; }
  .ck button { flex: 1; min-height: 40px; }
}

/*
 * Produktbanner ueber den Hinweis heben – in allen Layouts gleich.
 * margin-bottom verschiebt ein fest positioniertes Element mit bottom-Angabe
 * nach oben, ohne dessen transform/translate (Ein-/Ausblenden) anzufassen.
 */
body.hat-cookie .banner { margin-bottom: var(--ck-hoehe, 54px); }

@media print { .ck { display: none !important; } }