/* ==========================================================================
   S-FRY – Cookie-Consent & Content-Blocker (DSGVO)
   Eigenständig, kein Framework. Farben aus dem S-FRY-Design
   (Navy #0C1540, Gelb #FFD32A, Blau-Akzent #0045a5).
   ========================================================================== */
#sfry-cc, #sfry-cc * { box-sizing: border-box; }
#sfry-cc {
  font-family: "Neue Haas Unica", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── Banner / Dialog ─────────────────────────────────────────────────────── */
.cc-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483000;
  padding: 12px 12px max(12px, env(safe-area-inset-bottom));
}
.cc-card {
  max-width: 880px; margin: 0 auto; background: #fff;
  border: 1px solid #e6e7ef; border-radius: 16px;
  box-shadow: 0 20px 56px -14px rgba(12, 21, 64, .38);
  overflow: hidden;
}
.cc-scroll { max-height: 82vh; overflow-y: auto; }
.cc-pad { padding: 24px 26px; }
.cc-title { font-size: 20px; font-weight: 800; color: #0C1540; margin: 0 0 8px; line-height: 1.25; }
.cc-text { font-size: 14px; line-height: 1.65; color: #3d4362; margin: 0; }
.cc-text a { color: #0045a5; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.cc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.cc-btn {
  font: inherit; font-size: 14px; font-weight: 700; line-height: 1;
  border-radius: 10px; padding: 13px 22px; cursor: pointer;
  border: 2px solid transparent; transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.cc-btn:hover { transform: translateY(-1px); }
.cc-btn--primary { background: #FFD32A; color: #0C1540; border-color: #FFD32A; }
.cc-btn--primary:hover { background: #f5c400; border-color: #f5c400; }
.cc-btn--outline { background: #fff; color: #0C1540; border-color: #0C1540; }
.cc-btn--outline:hover { background: #0C1540; color: #fff; }
.cc-btn--ghost { background: transparent; color: #6b7091; border-color: transparent; }
.cc-btn--ghost:hover { color: #0C1540; }

/* ── Kategorien / Dienste (Einstellungen) ────────────────────────────────── */
.cc-cat { border: 1px solid #e9eaf2; border-radius: 13px; padding: 15px; margin-top: 12px; background: #fafafd; }
.cc-cat__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.cc-cat__t { font-size: 15px; font-weight: 700; color: #0C1540; }
.cc-cat__s { font-size: 12.5px; color: #7b80a0; margin-top: 1px; }
.cc-serv { border-top: 1px solid #e9eaf2; margin: 13px 0 0; padding: 13px 0 0; }
.cc-serv li { list-style: none; font-size: 13px; line-height: 1.55; margin: 0 0 11px; }
.cc-serv li:last-child { margin-bottom: 0; }
.cc-serv b { color: #0C1540; }
.cc-serv .cc-prov { color: #7b80a0; }
.cc-serv p { margin: 2px 0 0; color: #5a6080; }
.cc-serv .cc-store { font-size: 12px; color: #9a9fbb; }

/* ── Toggle ──────────────────────────────────────────────────────────────── */
.cc-switch { position: relative; width: 46px; height: 26px; flex: 0 0 auto; }
.cc-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cc-track { position: absolute; inset: 0; border-radius: 999px; background: #cbd0e0; transition: background .2s ease; pointer-events: none; }
.cc-track::before { content: ""; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .2s ease; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.cc-switch input:checked + .cc-track { background: #0C1540; }
.cc-switch input:checked + .cc-track::before { transform: translateX(20px); }
.cc-switch input:disabled { cursor: not-allowed; }
.cc-switch input:disabled + .cc-track { opacity: .5; }

/* ── Reopen-Button (Widerruf, immer erreichbar) ──────────────────────────────
   #sfry-cc + !important nötig, da Elementor globale <button>-Styles setzt
   (padding/border-radius/min-width) und sonst Form + Icon verzerrt.
   Farben aus dem S-FRY-Design: Navy-Fläche, gelbes Icon + gelber Ring. */
#sfry-cc .cc-fab {
  position: fixed !important; left: 16px !important; bottom: 16px !important; z-index: 2147482000;
  width: 46px !important; height: 46px !important; min-width: 0 !important; padding: 0 !important;
  margin: 0 !important; border-radius: 50% !important;
  background: #0C1540 !important; color: #FFD32A !important; border: 2px solid #FFD32A !important;
  cursor: pointer; display: grid !important; place-items: center !important; line-height: 0 !important;
  box-shadow: 0 8px 22px -6px rgba(12, 21, 64, .55); opacity: .95;
  transition: opacity .2s ease, transform .2s ease;
}
#sfry-cc .cc-fab:hover { opacity: 1; transform: translateY(-2px); background: #0C1540 !important; }
#sfry-cc .cc-fab svg { width: 24px !important; height: 24px !important; display: block; stroke: #FFD32A !important; }

/* ── Content-Blocker-Platzhalter (statt Maps/Vimeo/YouTube) ──────────────── */
.cc-embed-block {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 12px; width: 100%; min-height: 220px; padding: 28px 22px;
  background: #f3f4f7; border: 1px dashed #c3c8dc; border-radius: 10px; color: #3d4362;
}
.cc-embed-block h4 { margin: 0; font-size: 16px; font-weight: 700; color: #0C1540; }
.cc-embed-block p { margin: 0; font-size: 13px; max-width: 440px; line-height: 1.55; }
.cc-embed-block .cc-btn { margin-top: 4px; }
.cc-embed-block a { color: #0045a5; text-decoration: underline; font-size: 12.5px; }

@media (max-width: 560px) {
  .cc-pad { padding: 20px; }
  .cc-actions { flex-direction: column; }
  .cc-btn { width: 100%; }
}