/* ============================================================
   Linni & Boo — Cookie-Hinweis
   Weiche Karte unten, Marken-Farben, Pill-Buttons, viel Luft.
   Die Farbwerte kommen aus dem Theme, die Ersatzwerte sorgen dafuer,
   dass der Hinweis auch dann richtig aussieht, wenn main.css spaeter laedt.
   ============================================================ */

.lb-consent {
  /* Standardmaessig unsichtbar. Erst das Skript im Kopf der Seite entscheidet,
     ob gefragt werden muss. So ist jede gecachte Seite fuer jede Besucherin richtig. */
  display: none;
}

html.lb-consent-fragen .lb-consent,
html.lb-consent-offen .lb-consent {
  display: block;
}

.lb-consent {
  position: fixed;
  z-index: 99999;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px;
  /* Kein dunkles Overlay: die Seite bleibt bedienbar. */
  pointer-events: none;
}

.lb-consent-karte {
  pointer-events: auto;
  box-sizing: border-box;
  max-width: 560px;
  margin: 0 auto 0 0;
  background: var(--card, #FFFFFF);
  color: var(--ink, #4B4237);
  border: 1px solid var(--line, #E9E2D3);
  border-radius: var(--radius-lg, 26px);
  box-shadow: 0 14px 40px rgba(75, 66, 55, .16);
  padding: 22px 24px 20px;
  font-family: var(--font-body, "Nunito", system-ui, sans-serif);
  font-size: 15px;
  line-height: 1.6;
  animation: lb-consent-auf .28s ease-out both;
}

@media (min-width: 900px) {
  .lb-consent { padding: 22px; }
  .lb-consent-karte { margin-left: 22px; }
}

@keyframes lb-consent-auf {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.lb-consent-karte * { box-sizing: border-box; }

.lb-consent-titel {
  font-family: var(--font-head, "Baloo 2", system-ui, sans-serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 8px;
  color: var(--ink, #4B4237);
}

.lb-consent-text p {
  margin: 0 0 8px;
  color: var(--ink, #4B4237);
}

.lb-consent-text p:last-child { margin-bottom: 0; }

/* ---------------- Knoepfe ----------------
   Beide Entscheidungen sind absichtlich gleich gross, gleich rund und gleich gut lesbar.
   Es gibt keinen bunten Ja-Knopf neben einem blassen Nein-Link. */

.lb-consent-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.lb-consent-knopf {
  flex: 1 1 190px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 2px solid var(--rose, #EFA99E);
  background: var(--rose-soft, #F6CDC6);
  color: var(--ink, #4B4237);
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.lb-consent-knopf + .lb-consent-knopf {
  border-color: var(--green-strong, #7E9C6B);
  background: var(--green-soft, #EBEFDB);
}

.lb-consent-knopf:hover { background: var(--cream-2, #F1EBDE); }
.lb-consent-knopf:active { transform: scale(.98); }

/* ---------------- Dezente Links ---------------- */

.lb-consent-fuss {
  margin: 14px 0 0;
  font-size: 13.5px;
  color: var(--muted, #8A8072);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.lb-consent-fuss a,
.lb-consent-link {
  color: var(--muted, #8A8072);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lb-consent-link {
  background: none;
  border: 0;
  padding: 4px 2px;
  margin: 0;
  font: inherit;
  cursor: pointer;
}

.lb-consent-fuss a:hover,
.lb-consent-link:hover { color: var(--ink, #4B4237); }

.lb-consent-trenner { color: var(--line, #E9E2D3); }

/* ---------------- Einstellungs-Ansicht ---------------- */

/* Die Huelle traegt die weiche Kante, damit sichtbar ist, dass die Liste weitergeht.
   Sonst bricht der Text am unteren Rand einfach mitten im Satz ab: auf Touch-Geraeten
   und bei ueberlagerten Scrollleisten gibt es sonst keinerlei Hinweis auf den Rest. */
.lb-consent-detail .lb-consent-liste-huelle {
  position: relative;
  margin-top: 14px;
}

.lb-consent-detail .lb-consent-liste {
  max-height: 46vh;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-gutter: stable;
}

.lb-consent-detail .lb-consent-liste-huelle::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 38px;
  border-radius: 0 0 var(--radius, 16px) var(--radius, 16px);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--card, #FFFFFF) 78%);
  opacity: 0;
  transition: opacity .16s ease;
  pointer-events: none;
}

/* consent.js setzt die Klasse, solange nach unten noch etwas folgt. */
.lb-consent-detail .lb-consent-liste-huelle.lb-consent-mehr-unten::after { opacity: 1; }

/* ---------------- Aufklappbare Dienst-Angaben ----------------
   Eingeklappt bleibt die Karte kurz und die waehlbare Kategorie sichtbar.
   Alle Angaben zu Zweck, Speicherdauer und Empfaenger stehen weiter vollstaendig
   in derselben Ansicht, nur einen Klick entfernt. */

.lb-consent-mehr {
  margin-top: 10px;
  border-top: 1px dashed var(--line, #E9E2D3);
  padding-top: 8px;
}

.lb-consent-mehr > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 2px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--green-strong, #7E9C6B);
  cursor: pointer;
}

.lb-consent-mehr > summary::-webkit-details-marker { display: none; }

.lb-consent-mehr > summary::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .16s ease;
}

.lb-consent-mehr[open] > summary::before {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.lb-consent-mehr > summary:hover { color: var(--ink, #4B4237); }

.lb-consent-kategorie {
  border: 1px solid var(--line, #E9E2D3);
  border-radius: var(--radius, 16px);
  background: var(--cream-3, #FBF9F4);
  padding: 14px 16px;
}

.lb-consent-kategorie + .lb-consent-kategorie { margin-top: 10px; }

.lb-consent-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lb-consent-kopf-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.lb-consent-name {
  font-family: var(--font-head, "Baloo 2", system-ui, sans-serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink, #4B4237);
  cursor: pointer;
}

.lb-consent-immer {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--green-strong, #7E9C6B);
  background: var(--green-soft, #EBEFDB);
  border-radius: 999px;
  padding: 2px 10px;
}

.lb-consent-erklaerung {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--ink, #4B4237);
}

/* Schalter: eine echte Checkbox, nur schoener gezeichnet.
   Die Checkbox bleibt bedienbar und fuer Screenreader vorhanden. */

.lb-consent-schalter {
  position: relative;
  flex: 0 0 auto;
  width: 54px;
  height: 30px;
  display: inline-block;
}

.lb-consent-schalter input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.lb-consent-schalter input:disabled { cursor: default; }

.lb-consent-schieber {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--cream-2, #F1EBDE);
  border: 2px solid var(--line, #E9E2D3);
  transition: background .18s ease, border-color .18s ease;
  pointer-events: none;
}

.lb-consent-schieber::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--card, #FFFFFF);
  box-shadow: 0 2px 5px rgba(75, 66, 55, .25);
  transition: transform .18s ease;
}

.lb-consent-schalter input:checked ~ .lb-consent-schieber {
  background: var(--green, #A9C297);
  border-color: var(--green-strong, #7E9C6B);
}

.lb-consent-schalter input:checked ~ .lb-consent-schieber::after {
  transform: translateX(24px);
}

.lb-consent-schalter input:disabled ~ .lb-consent-schieber { opacity: .75; }

.lb-consent-dienste {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}

.lb-consent-dienste li {
  padding-top: 10px;
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--muted, #8A8072);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lb-consent-dienste li + li { border-top: 1px dashed var(--line, #E9E2D3); }

.lb-consent-dienste strong {
  color: var(--ink, #4B4237);
  font-size: 14.5px;
}

.lb-consent-dienste code {
  font-size: 12.5px;
  background: var(--cream-2, #F1EBDE);
  border-radius: 6px;
  padding: 1px 6px;
  word-break: break-word;
}

.lb-consent-detailzeile { line-height: 1.45; }

/* ---------------- Link im Footer ----------------
   Ohne JavaScript kann der Knopf nichts tun, deshalb erscheint er auch nur mit JavaScript. */

.lb-consent-oeffnen { display: none; }

html.lb-consent-js .lb-consent-oeffnen {
  display: inline;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

html.lb-consent-js .lb-consent-oeffnen:hover { text-decoration: underline; }

/* ---------------- Fokus und Bewegung ---------------- */

.lb-consent-karte :focus-visible,
.lb-consent-oeffnen:focus-visible {
  outline: 3px solid var(--green-strong, #7E9C6B);
  outline-offset: 2px;
  border-radius: 6px;
}

.lb-consent-schalter input:focus-visible ~ .lb-consent-schieber {
  outline: 3px solid var(--green-strong, #7E9C6B);
  outline-offset: 2px;
}

.lb-consent-karte:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .lb-consent-karte { animation: none; }
  .lb-consent-knopf,
  .lb-consent-schieber,
  .lb-consent-mehr > summary::before,
  .lb-consent-detail .lb-consent-liste-huelle::after,
  .lb-consent-schieber::after { transition: none; }
}

/* ---------------- Kleine Bildschirme ---------------- */

@media (max-width: 520px) {
  .lb-consent { padding: 10px; }
  .lb-consent-karte { padding: 18px 18px 16px; border-radius: var(--radius, 16px); }
  .lb-consent-titel { font-size: 18px; }
  .lb-consent-knoepfe { flex-direction: column; }
  .lb-consent-knopf { flex: 1 1 auto; width: 100%; }
  .lb-consent-detail .lb-consent-liste { max-height: 52vh; }
}