/* ── Klaro consent manager — custom theme ──────────────────────────────
   Klaro ships zero built-in CSS in this build (klaro-no-css.js), so every
   rule below is authored from scratch against Klaro's own real DOM output
   (verified against the installed klaro npm package's compiled bundle,
   not just its published docs, since the two didn't fully agree) rather
   than overriding a bundled stylesheet. Palette/type mirror the site's
   own tokens (assets/css/styles.css :root) exactly, so the banner and
   modal read as part of the site rather than a bolted-on widget.
   Consent-gated embeds (Google Maps, Elfsight) additionally get a
   placeholder box further down (.consent-placeholder) — its show/hide is
   driven by each service's own callback in klaro-config.js, not by CSS,
   since a widget's loader script can rewrite the DOM around itself once
   it runs in ways a CSS attribute selector can't reliably track. */

.klaro,
.klaro button {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.55;
}

/* ── Bottom consent bar (not a fullscreen overlay) ─────────────────── */
.klaro .cookie-notice {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  background: var(--pine-950);
  color: var(--on-pine-muted);
  border-top: 1px solid var(--line-gold);
  box-shadow: 0 -8px 28px rgba(15, 35, 28, 0.28);
}

.klaro .cookie-notice-hidden {
  display: none !important;
}

.klaro .cookie-notice .cn-body {
  max-width: 1180px;
  margin-inline: auto;
  padding: 22px clamp(16px, 4vw, 32px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}

.klaro .cookie-notice .cn-body > p {
  flex: 1 1 420px;
  margin: 0;
  color: var(--on-pine-muted);
  font-size: 0.88rem;
}

.klaro .cookie-notice .cn-body > p a {
  color: var(--gold-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.klaro .cookie-notice .cn-body > p a:hover {
  color: var(--gold);
}

.klaro .cookie-notice h2 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--on-pine);
  margin: 0 0 8px;
}

/* Accept / decline / settings — same size and weight, so none of the
   three reads as more or less clickable than the others. */
.klaro .cookie-notice .cn-ok {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  flex: 0 0 auto;
}

.klaro .cookie-notice .cn-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}

.klaro .cookie-notice .cm-btn,
.klaro .cookie-notice .cn-learn-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 20px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--line-on-pine-strong);
  border-radius: 1px;
  background: transparent;
  color: var(--on-pine);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.klaro .cookie-notice .cn-learn-more:hover,
.klaro .cookie-notice .cm-btn.cm-btn-danger:hover {
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.08);
}

.klaro .cookie-notice .cm-btn.cm-btn-success {
  background: var(--gold-gradient);
  border-color: transparent;
  color: var(--pine-950);
}

.klaro .cookie-notice .cm-btn.cm-btn-success:hover {
  background: linear-gradient(150deg, var(--gold-light) 0%, var(--gold-light) 32%, var(--gold) 68%, var(--gold-light) 100%);
}

@media (max-width: 640px) {
  .klaro .cookie-notice .cn-body {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }

  /* The 420px flex-basis above is a row-layout width hint; in a column
     flex container the main axis is vertical, so that same basis would
     otherwise become a 420px-tall paragraph. */
  .klaro .cookie-notice .cn-body > p {
    flex: none;
  }

  .klaro .cookie-notice .cn-ok {
    flex-direction: column;
    align-items: stretch;
  }

  .klaro .cookie-notice .cn-buttons {
    flex-direction: column;
  }

  .klaro .cookie-notice .cm-btn,
  .klaro .cookie-notice .cn-learn-more {
    width: 100%;
  }
}

/* ── Settings modal ─────────────────────────────────────────────────── */
.klaro .cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.klaro .cookie-modal .cm-bg {
  position: fixed;
  inset: 0;
  background: rgba(15, 35, 28, 0.6);
}

.klaro .cookie-modal .cm-modal.cm-klaro {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  max-height: min(88vh, 720px);
  overflow-y: auto;
  background: var(--paper);
  color: var(--on-paper);
  border: 1px solid var(--line-on-paper-strong);
  box-shadow: 0 24px 60px rgba(15, 35, 28, 0.3);
}

.klaro .cookie-modal .cm-header {
  position: relative;
  padding: 28px 56px 20px 28px;
  border-bottom: 1px solid var(--line-on-paper);
}

.klaro .cookie-modal .cm-header h1.title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--on-paper);
  margin: 0 0 10px;
}

.klaro .cookie-modal .cm-header p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--on-paper-muted);
}

.klaro .cookie-modal .cm-header p a {
  color: var(--gold-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.klaro .cookie-modal .cm-header .hide {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-on-paper-strong);
  background: transparent;
  color: var(--on-paper-muted);
  cursor: pointer;
}

.klaro .cookie-modal .cm-header .hide:hover {
  border-color: var(--gold-dark);
  color: var(--gold-dark);
}

.klaro .cookie-modal .cm-header .hide svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
}

.klaro .cookie-modal .cm-body {
  padding: 8px 28px 4px;
}

.klaro .cookie-modal .cm-body ul.cm-services {
  list-style: none;
  margin: 0;
  padding: 0;
}

.klaro .cookie-modal .cm-body li.cm-service {
  position: relative;
  padding: 18px 66px 18px 0;
  border-bottom: 1px solid var(--line-on-paper);
}

.klaro .cookie-modal .cm-body li.cm-service:first-child {
  padding-top: 4px;
}

.klaro .cookie-modal .cm-body li.cm-service:last-child {
  border-bottom: 0;
}

.klaro .cookie-modal .cm-list-title {
  display: block;
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--on-paper);
}

.klaro .cookie-modal .cm-list-description,
.klaro .cookie-modal p.purposes {
  margin: 4px 0 0;
  font-size: 0.84rem;
  color: var(--on-paper-muted);
}

.klaro .cookie-modal p.purposes {
  color: var(--on-paper-faint);
  font-size: 0.78rem;
}

.klaro .cookie-modal .cm-required,
.klaro .cookie-modal .cm-opt-out {
  margin-left: 8px;
  font-size: 0.72rem;
  color: var(--on-paper-faint);
}

/* Toggle switch, recolored to the site's gold/pine palette.
   Real markup: <label class="cm-list-label"> wraps BOTH the title text
   AND the switch (<span class="cm-list-title">…</span><span
   class="cm-switch">…</span>) — it is not just the switch. So the label
   itself stays in normal flow (title reads at full width); only
   .cm-switch, the actual little track+thumb, is pulled into the
   padding-right rail reserved on li.cm-service. The real (invisible)
   checkbox is layered exactly on top of that same rail so the click
   target matches what's visible. */
.klaro .cookie-modal .cm-list-input {
  position: absolute;
  opacity: 0;
  width: 46px;
  height: 26px;
  top: 18px;
  right: 0;
  margin: 0;
  cursor: pointer;
  z-index: 2;
}

.klaro .cookie-modal .cm-list-label {
  display: block;
  cursor: pointer;
}

.klaro .cookie-modal .cm-switch {
  position: absolute;
  top: 18px;
  right: 0;
  width: 46px;
  height: 26px;
  display: block;
}

.klaro .cookie-modal .slider {
  position: absolute;
  inset: 0;
  background: var(--line-on-paper-strong);
  border-radius: 999px;
  transition: background-color 160ms ease;
}

.klaro .cookie-modal .slider::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 1px 3px rgba(15, 35, 28, 0.35);
  transition: transform 160ms ease;
}

.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider {
  background: var(--gold-gradient);
}

.klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider::before {
  transform: translateX(20px);
}

.klaro .cookie-modal .cm-list-input:focus-visible + .cm-list-label .slider {
  outline: 2px solid var(--gold-dark);
  outline-offset: 2px;
}

.klaro .cookie-modal .cm-footer {
  padding: 20px 28px 24px;
  border-top: 1px solid var(--line-on-paper);
}

.klaro .cookie-modal .cm-footer-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.klaro .cookie-modal .cm-footer .cm-btn {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid var(--line-on-paper-strong);
  border-radius: 1px;
  background: transparent;
  color: var(--on-paper);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.klaro .cookie-modal .cm-footer .cm-btn:hover {
  border-color: var(--gold-dark);
  background: var(--gold-wash);
}

.klaro .cookie-modal .cm-footer .cm-btn.cm-btn-accept-all {
  background: var(--gold-gradient);
  border-color: transparent;
  color: var(--pine-950);
}

.klaro .cookie-modal .cm-footer .cm-btn.cm-btn-accept-all:hover {
  background: linear-gradient(150deg, var(--gold-light) 0%, var(--gold-light) 32%, var(--gold) 68%, var(--gold-light) 100%);
}

.klaro .cookie-modal .cm-powered-by {
  margin: 14px 0 0;
  text-align: right;
  font-size: 0.7rem;
}

.klaro .cookie-modal .cm-powered-by a {
  color: var(--on-paper-faint);
}

/* ── Consent placeholders (Maps / Elfsight, before consent) ──────────
   Shown by default; hidden by klaro-config.js's per-service callback once
   consent is granted (not a CSS attribute-selector trick — a widget
   loader's own script can mutate the DOM around its script tag once it
   runs, which would make a pure-CSS sibling selector unreliable). */
.consent-placeholder {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding: 24px;
  max-width: 100%;
  box-sizing: border-box;
}

/* The site's .btn is white-space:nowrap by default (fine for short
   labels elsewhere) — "Zustimmen & Karte laden" / "… & Bewertungen
   laden" are long enough to overflow a narrow mobile placeholder box, so
   let it wrap here instead of forcing the frame's overflow:hidden to
   clip it. */
.consent-placeholder .btn {
  white-space: normal;
  text-align: center;
  max-width: 100%;
}

.consent-placeholder svg {
  width: 30px;
  height: 30px;
  color: var(--gold-dark);
}

.consent-placeholder p {
  font-size: 0.88rem;
  color: var(--on-paper-faint);
  max-width: 34ch;
}

.consent-placeholder .consent-placeholder__addr {
  color: var(--on-paper-muted);
}

.reviews-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}