/* ── Klaro! layout fixes ─────────────────────────────────────────────────────
   Two bugs caused by conflicts between site.css and klaro.min.css:

   BUG 1 — site.css line 13499: `*, ::before, ::after { position: relative }`
   This makes label.cm-list-label a positioned ancestor. Normally it is
   position:static, so .cm-switch { position:absolute; left:0 } is scoped to
   .cm-switch-container. With the global reset, the switch positions relative
   to the label (which sits in the content area alongside the text), causing
   the toggle to overlap the text. Fix: reset label to position:static.

   BUG 2 — klaro.min.css: `.cm-modal .cm-body span { width: auto }` has
   specificity 0,4,1 which beats `.cm-switch { width: 50px }` at 0,3,0.
   Since .cm-switch is a <span>, it collapses to 0 width, making the slider
   track invisible (only the knob ::before pseudo-element shows). Fix: restore
   the correct dimensions with !important.
   ─────────────────────────────────────────────────────────────────────────── */

/* Fix 1 */
.klaro .cookie-modal .cm-list-label,
.klaro .cookie-notice .cm-list-label,
.klaro .context-notice .cm-list-label {
  position: static !important;
}

/* Fix 2 */
.klaro .cookie-modal .cm-switch,
.klaro .cookie-notice .cm-switch,
.klaro .context-notice .cm-switch {
  width: 50px !important;
  height: 30px !important;
  max-height: 30px !important;
  overflow: hidden !important;
}

/* The slider has `top:0; bottom:0` which stretches it to the container height.
   Cap it explicitly so it doesn't expand on mobile where rows are taller. */
.klaro .cookie-modal .cm-list-label .slider,
.klaro .cookie-notice .cm-list-label .slider,
.klaro .context-notice .cm-list-label .slider {
  width: 50px !important;
  height: 30px !important;
  bottom: auto !important;
}

/* ── Brand theme ──────────────────────────────────────────────────────────────
   Klaro ships no `:root` variable block — every value is `var(--name, default)`,
   so the supported way to theme is to declare the variables ourselves here.
   Brand palette (from site.css):
     blue/navy  #1a2b3c   CTA gradient  #f89b29 → #FA6721 (orange)   font Inter
   Surfaces are flipped to white so the navy-outline secondary button reads.
   ─────────────────────────────────────────────────────────────────────────── */
.klaro {
  --font-family: 'Inter', sans-serif;
  --title-font-family: 'Inter', sans-serif;

  --border-radius: 0;            /* sharp corners */
  --border-width: 1px;

  --dark1: #ffffff;              /* notice / modal surface → white */
  --light1: #1a2b3c;             /* headings + body text → navy   */

  --green1: #1a2b3c;             /* toggle ON track (and half-checked) → brand blue */
  --green2: #1a2b3c;             /* required / save-var slider          → brand blue */
  --green3: #1a2b3c;

  --button-text-color: #ffffff;
}

/* Surface polish: lighter dividers + the site's elevation-lg shadow on both
   the settings modal and the first-visit notice (radius is 0 now). */
.klaro .cookie-modal .cm-modal.cm-klaro,
.klaro .cookie-notice:not(.cookie-modal-notice) {
  box-shadow: var(--elevation-lg, 0 12px 24px 0 rgba(0,0,0,.14), 0 6px 32px 0 rgba(0,0,0,.10)) !important;
}
.klaro .cookie-modal .cm-modal .cm-footer,
.klaro .cookie-modal .cm-modal .cm-header {
  border-color: #e6e8eb !important;
}
.klaro .cookie-modal .cm-switch-container,
.klaro .cookie-notice .cm-switch-container,
.klaro .context-notice .cm-switch-container {
  border-bottom-color: #e6e8eb !important;
}

/* Body copy / descriptions: keep readable on the white surface */
.klaro .cookie-modal .cm-list-description,
.klaro .cookie-notice .cm-list-description,
.klaro .context-notice .cm-list-description,
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose .cm-services .cm-caret,
.klaro .cookie-modal p,
.klaro .cookie-notice p {
  color: #4a5560 !important;
}

/* Links inside copy → brand orange */
.klaro .cookie-modal a,
.klaro .cookie-notice a,
.klaro .context-notice a {
  color: #FA6721;
}

/* First-visit consent notice ("Wir nutzen Cookies …") → smaller, tighter (text-sm).
   site.css inflates this paragraph to ~18px; the description is the notice's only
   <p> (id is auto-generated), so target it directly. */
.klaro .cookie-notice .cn-body p,
.klaro .cookie-notice p,
.klaro .cookie-modal .cm-modal .cm-header p {
  /* px, not rem: the site's root font-size is a fluid ~24px, so rem units
     balloon. site.css also sets `p { font-size: clamp(12px,2.59vmin,28px) }`.
     Covers the notice description and the settings-modal intro paragraph. */
  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */

/* Shared: square corners, comfortable weight, smooth hover */
.klaro .cookie-modal .cm-btn,
.klaro .cookie-notice .cm-btn,
.klaro .context-notice .cm-btn {
  border-radius: 0 !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: filter 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

/* Primary accept button → amber→orange brand gradient (mirrors site CTAs).
   Two cases:
     • modal:  "Alle akzeptieren" = cm-btn-success cm-btn-accept-all
     • notice: "Das ist ok"       = cm-btn-success  (no accept-all class)
   In the notice, cm-btn-success is only ever the primary button, so it's safe
   to gradient broadly there; in the modal we scope to accept-all so the
   "Auswahl speichern" button keeps its navy outline. */
.klaro .cookie-modal .cm-btn.cm-btn-success.cm-btn-accept-all,
.klaro .context-notice .cm-btn.cm-btn-success.cm-btn-accept-all,
.klaro .cookie-notice .cm-btn.cm-btn-success {
  background-image: linear-gradient(101.76deg, #f89b29 12%, #FA6721 100%) !important;
  background-color: #FA6721 !important;   /* fallback */
  color: #ffffff !important;
  border: none !important;
}
.klaro .cookie-modal .cm-btn.cm-btn-success.cm-btn-accept-all:hover,
.klaro .context-notice .cm-btn.cm-btn-success.cm-btn-accept-all:hover,
.klaro .cookie-notice .cm-btn.cm-btn-success:hover {
  filter: brightness(1.07);
}

/* "Auswahl speichern" → navy outline (ghost).
   Klaro labels this button `cm-btn-info cm-btn-accept` until a toggle changes,
   then `cm-btn-success-var cm-btn-accept` — so we target the stable
   `cm-btn-accept` class (excluding accept-all) to cover both states. */
.klaro .cookie-modal .cm-btn.cm-btn-accept:not(.cm-btn-accept-all),
.klaro .cookie-notice .cm-btn.cm-btn-accept:not(.cm-btn-accept-all),
.klaro .context-notice .cm-btn.cm-btn-accept:not(.cm-btn-accept-all) {
  background-color: transparent !important;
  background-image: none !important;
  color: #1a2b3c !important;
  border: 1.5px solid #1a2b3c !important;
  text-decoration: none !important;
}
.klaro .cookie-modal .cm-btn.cm-btn-accept:not(.cm-btn-accept-all):hover,
.klaro .cookie-notice .cm-btn.cm-btn-accept:not(.cm-btn-accept-all):hover,
.klaro .context-notice .cm-btn.cm-btn-accept:not(.cm-btn-accept-all):hover {
  background-color: #1a2b3c !important;
  color: #ffffff !important;
}

/* "Ablehnen" → quiet ghost so it doesn't compete with the primary CTA.
   Modal uses cm-btn-decline; the notice uses cn-decline/cm-btn-danger — cover both. */
.klaro .cookie-modal .cm-btn.cm-btn-decline,
.klaro .cookie-notice .cm-btn.cm-btn-decline,
.klaro .context-notice .cm-btn.cm-btn-decline,
.klaro .cookie-modal .cm-btn.cn-decline,
.klaro .cookie-notice .cm-btn.cn-decline,
.klaro .context-notice .cm-btn.cn-decline {
  background-color: transparent !important;
  background-image: none !important;
  color: #5c6770 !important;
  border: 1.5px solid #d4d8dd !important;
}
.klaro .cookie-modal .cm-btn.cm-btn-decline:hover,
.klaro .cookie-notice .cm-btn.cm-btn-decline:hover,
.klaro .context-notice .cm-btn.cm-btn-decline:hover,
.klaro .cookie-modal .cm-btn.cn-decline:hover,
.klaro .cookie-notice .cm-btn.cn-decline:hover,
.klaro .context-notice .cm-btn.cn-decline:hover {
  color: #1a2b3c !important;
  border-color: #1a2b3c !important;
}

/* "Einstellungen" / learn-more → pink text link.
   Exclude `cm-btn-accept` so the modal's "Auswahl speichern" (which also carries
   cm-btn-info) keeps its navy-outline style above. */
.klaro .cookie-modal .cm-btn.cm-btn-info:not(.cm-btn-accept),
.klaro .cookie-notice .cm-btn.cm-btn-info:not(.cm-btn-accept),
.klaro .context-notice .cm-btn.cm-btn-info:not(.cm-btn-accept),
.klaro .cookie-notice .cn-learn-more {
  background-color: transparent !important;
  color: #FA6721 !important;
  border: none !important;
  text-decoration: underline;
}