/* Einwilligungswerkzeug — Aussehen.
   Nimmt die Palette der Vorlage (--grund, --tinte, --akzent …) und fällt auf
   neutrale Werte zurück, wenn das Werkzeug allein in einer Auslieferung liegt.
   Dadurch sieht das Banner in jeder Vorlage aus wie die Seite und nicht wie
   ein eingekauftes Fremdteil. */
.ks-cookie-consent *, .ks-cookie-modal * { box-sizing: border-box; }

.ks-cookie-consent {
  position: fixed;
  left: 18px; right: 18px; bottom: 18px;
  z-index: 99990;
  display: none;
  justify-content: center;
  pointer-events: none;
  font-family: var(--body, system-ui, -apple-system, "Segoe UI", sans-serif);
}
.ks-cookie-consent.is-visible { display: flex; }

.ks-cookie-box {
  width: min(1080px, 100%);
  background: var(--flaeche, var(--grund-2, var(--grund, #FFFFFF)));
  color: var(--tinte, #1A1A1A);
  border: 1px solid var(--linie-2, var(--linie-stark, rgba(0,0,0,.22)));
  border-radius: var(--radius, var(--r, 4px));
  box-shadow: 0 24px 70px rgba(0, 0, 0, .22);
  /* So flach wie moeglich: der Text laeuft ueber die ganze Kachelbreite,
     damit das Band nicht halb leer und dafuer doppelt so hoch dasteht
     (Hausregel 04.08.2026). */
  padding: 16px 20px;
  pointer-events: auto;
}
.ks-cookie-eyebrow {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--akzent-txt, var(--akzent-text, var(--akzent, #6A4B12))); font-weight: 700; margin-bottom: 5px;
}
.ks-cookie-title {
  font-family: var(--display, inherit);
  font-size: 17px; line-height: 1.25; font-weight: 700; margin: 0 0 6px;
}
.ks-cookie-text {
  font-size: 14px; line-height: 1.55; color: var(--leise, var(--tinte-2, var(--tinte-leise, #52585E)));
  margin: 0; max-width: none;
}
.ks-cookie-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  align-items: center; justify-content: flex-end; margin-top: 14px;
}
.ks-cookie-btn {
  border: 1px solid var(--linie-2, var(--linie-stark, rgba(0,0,0,.22)));
  border-radius: var(--radius, var(--r, 4px));
  padding: 12px 16px;
  font-family: inherit; font-size: 14px; font-weight: 600;
  min-height: 44px;
  cursor: pointer;
  background: var(--grund, var(--flaeche, #FFFFFF));
  color: var(--tinte, #1A1A1A);
  line-height: 1.1;
}
.ks-cookie-btn:hover { border-color: var(--akzent, var(--hebung, #8A6529)); }
.ks-cookie-btn-primary {
  background: var(--akzent, var(--hebung, #8A6529));
  color: var(--akzent-auf, var(--knopf-tinte, #FFFFFF));
  border-color: var(--akzent, var(--hebung, #8A6529));
}
.ks-cookie-btn-primary:hover { filter: brightness(1.08); }
.ks-cookie-btn-quiet { color: var(--leise, var(--tinte-2, var(--tinte-leise, #52585E))); }
.ks-cookie-link {
  color: var(--akzent-txt, var(--akzent-text, var(--akzent, #6A4B12))); font-weight: 600;
  text-underline-offset: 3px;
}

.ks-cookie-modal {
  position: fixed; inset: 0; z-index: 99999;
  display: none; align-items: center; justify-content: center;
  padding: 18px; background: rgba(0, 0, 0, .55);
  font-family: var(--body, system-ui, -apple-system, "Segoe UI", sans-serif);
}
.ks-cookie-modal.is-visible { display: flex; }
.ks-cookie-panel {
  width: min(680px, 100%); max-height: min(760px, 92vh); overflow: auto;
  background: var(--flaeche, var(--grund-2, var(--grund, #FFFFFF))); color: var(--tinte, #1A1A1A);
  border: 1px solid var(--linie-2, var(--linie-stark, rgba(0,0,0,.22)));
  border-radius: var(--radius, var(--r, 4px));
  box-shadow: 0 30px 90px rgba(0, 0, 0, .3);
}
.ks-cookie-panel-head {
  display: flex; justify-content: space-between; gap: 18px; align-items: flex-start;
  padding: 22px 22px 18px; border-bottom: 1px solid var(--linie, rgba(0,0,0,.12));
}
.ks-cookie-close {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: var(--radius, var(--r, 4px));
  border: 1px solid var(--linie-2, var(--linie-stark, rgba(0,0,0,.22)));
  background: var(--grund, var(--flaeche, #FFFFFF)); color: var(--tinte, #1A1A1A);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.ks-cookie-close:hover { border-color: var(--akzent, var(--hebung, #8A6529)); }
.ks-cookie-panel-body { padding: 20px 22px 22px; }
.ks-cookie-category {
  border: 1px solid var(--linie, rgba(0,0,0,.12));
  border-radius: var(--radius, var(--r, 4px));
  padding: 16px; margin-bottom: 14px;
}
.ks-cookie-category-head {
  display: flex; justify-content: space-between; gap: 14px;
  align-items: center; margin-bottom: 10px;
}
.ks-cookie-category-title {
  font-family: var(--display, inherit);
  font-size: 15px; font-weight: 700; margin: 0;
}
.ks-cookie-category-desc {
  font-size: 13.5px; line-height: 1.6; color: var(--leise, var(--tinte-2, var(--tinte-leise, #52585E))); margin: 0;
}
.ks-cookie-switch {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; cursor: pointer; user-select: none;
  color: var(--leise, var(--tinte-2, var(--tinte-leise, #52585E))); font-size: 13px; font-weight: 600; white-space: nowrap;
}
.ks-cookie-switch input {
  width: 20px; height: 20px; accent-color: var(--akzent, var(--hebung, #8A6529));
}
.ks-cookie-switch input:disabled { cursor: not-allowed; opacity: .7; }
.ks-cookie-panel-actions {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; padding-top: 8px;
}

/* Kein dauerhafter Knopf am Bildschirmrand. */
.ks-cookie-settings-btn { display: none !important; }

@media (max-width: 700px) {
  .ks-cookie-consent { left: 10px; right: 10px; bottom: 10px; }
  .ks-cookie-box { padding: 18px; }
  .ks-cookie-actions, .ks-cookie-panel-actions { display: grid; grid-template-columns: 1fr; }
  .ks-cookie-btn { width: 100%; }
  .ks-cookie-category-head { align-items: flex-start; flex-direction: column; gap: 4px; }
}