/* ================================================================
   TOM·SON DENTAL — Cookie-Banner & Einstellungen
   Nutzt die Design-Tokens aus styles.css (CSS-Custom-Properties)
   ================================================================ */

/* ----------------------------------------------------------------
   Banner (unten fixiert)
   ---------------------------------------------------------------- */
#tsd-cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 8888; /* unterhalb des Page-Transitions-Overlays (9999) */
  padding: 1.25rem 1.5rem;
  background: #fffef9;
  border-top: 1px solid rgba(68, 47, 41, .13);
  box-shadow: 0 -8px 40px rgba(68, 47, 41, .10);

  /* Eintrittsanimation: von unten hochschieben */
  transform: translateY(100%);
  opacity: 0;
  transition:
    transform .42s cubic-bezier(.16, 1, .3, 1),
    opacity   .42s ease;
}

#tsd-cookie-banner.is-visible {
  transform: translateY(0);
  opacity: 1;
}

#tsd-cookie-banner.is-hiding {
  transform: translateY(110%);
  opacity: 0;
}

.tsd-cb-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.tsd-cb-text {
  flex: 1;
  min-width: 0;
}

.tsd-cb-title {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #2a1c18;
  margin-bottom: .3rem;
}

.tsd-cb-desc {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: .8125rem;
  line-height: 1.65;
  color: rgba(42, 28, 24, .58);
  margin: 0;
}

.tsd-cb-desc a {
  color: #442f29;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tsd-cb-desc a:hover {
  color: #2a1c18;
}

.tsd-cb-actions {
  display: flex;
  align-items: center;
  gap: .625rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* ----------------------------------------------------------------
   Gemeinsame Button-Basis
   ---------------------------------------------------------------- */
.tsd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .5625rem 1.25rem;
  border-radius: 9999px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  background: none;
  transition:
    background   .18s ease,
    color        .18s ease,
    border-color .18s ease,
    opacity      .18s ease;
}

/* Ghost: nur Unterstreichung */
.tsd-btn--ghost {
  color: rgba(42, 28, 24, .55);
  text-decoration: underline;
  text-underline-offset: 2px;
  padding-left: .25rem;
  padding-right: .25rem;
}
.tsd-btn--ghost:hover {
  color: #2a1c18;
}

/* Outline: rahmenloser Stil mit Rand */
.tsd-btn--outline {
  border: 1px solid rgba(68, 47, 41, .25);
  color: #442f29;
  background: transparent;
}
.tsd-btn--outline:hover {
  border-color: rgba(68, 47, 41, .5);
  background: rgba(68, 47, 41, .04);
}

/* Primary: gefüllt */
.tsd-btn--primary {
  background: #442f29;
  color: #fffef9;
}
.tsd-btn--primary:hover {
  background: #352520;
}

/* Fokus-Ring für Tastaturnavigation */
.tsd-btn:focus-visible {
  outline: 2px solid #442f29;
  outline-offset: 3px;
}

/* ----------------------------------------------------------------
   Einstellungs-Modal (Overlay + Panel)
   ---------------------------------------------------------------- */
#tsd-cookie-settings {
  position: fixed;
  inset: 0;
  z-index: 8999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;

  /* Unsichtbar & nicht interaktiv solange geschlossen */
  pointer-events: none;
  opacity: 0;
  transition: opacity .28s ease;
}

#tsd-cookie-settings.is-open {
  pointer-events: auto;
  opacity: 1;
}

/* Hintergrund-Overlay */
.tsd-cs-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(42, 28, 24, .38);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Weißes Panel */
.tsd-cs-panel {
  position: relative;
  background: #fffef9;
  border-radius: 20px;
  border: 1px solid rgba(68, 47, 41, .11);
  box-shadow: 0 20px 70px rgba(68, 47, 41, .16);
  max-width: 560px;
  width: 100%;
  max-height: 90dvh;
  overflow-y: auto;
  padding: 2rem;

  /* Einfahranimation */
  transform: translateY(16px) scale(.975);
  opacity: 0;
  transition:
    transform .38s cubic-bezier(.16, 1, .3, 1),
    opacity   .28s ease;
}

#tsd-cookie-settings.is-open .tsd-cs-panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Panel-Header */
.tsd-cs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.tsd-cs-title {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.015em;
  color: #2a1c18;
}

/* Schließen-Button */
.tsd-cs-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  color: rgba(42, 28, 24, .45);
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .18s, color .18s;
}
.tsd-cs-close:hover {
  background: rgba(68, 47, 41, .07);
  color: #2a1c18;
}
.tsd-cs-close:focus-visible {
  outline: 2px solid #442f29;
  outline-offset: 2px;
}

/* Einleitungstext */
.tsd-cs-intro {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: .875rem;
  line-height: 1.7;
  color: rgba(42, 28, 24, .58);
  margin-bottom: 1.5rem;
}

/* Gruppenrahmen */
.tsd-cs-group {
  border: 1px solid rgba(68, 47, 41, .11);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

/* Einzelner Cookie-Eintrag */
.tsd-cs-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(68, 47, 41, .09);
}
.tsd-cs-item:last-child {
  border-bottom: none;
}

.tsd-cs-item-info {
  flex: 1;
  min-width: 0;
}
.tsd-cs-item-info strong {
  display: block;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: .9rem;
  font-weight: 600;
  color: #2a1c18;
  margin-bottom: .375rem;
}
.tsd-cs-item-info p {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: .8rem;
  line-height: 1.65;
  color: rgba(42, 28, 24, .55);
  margin: 0;
}

/* ----------------------------------------------------------------
   Toggle-Schalter (Checkbox → eigenes Styling)
   ---------------------------------------------------------------- */
.tsd-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  flex-shrink: 0;
  cursor: pointer;
}

/* Checkbox visuell verstecken (bleibt für Screenreader sichtbar) */
.tsd-toggle input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Track (Hintergrund des Toggles) */
.tsd-toggle-track {
  display: block;
  width: 46px;
  height: 26px;
  background: rgba(68, 47, 41, .17);
  border-radius: 9999px;
  position: relative;
  transition: background .22s ease;
}

/* Thumb (weißer Kreis) */
.tsd-toggle-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  background: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .18);
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1);
}

/* Aktivierter Zustand */
.tsd-toggle input:checked + .tsd-toggle-track {
  background: #442f29;
}
.tsd-toggle input:checked + .tsd-toggle-track::after {
  transform: translateX(20px);
}

/* Tastatur-Fokus */
.tsd-toggle input:focus-visible + .tsd-toggle-track {
  outline: 2px solid #442f29;
  outline-offset: 3px;
}

.tsd-toggle-label {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: .72rem;
  color: rgba(42, 28, 24, .45);
  white-space: nowrap;
  text-align: center;
}

/* Gesperrter Toggle (Notwendige Cookies – immer aktiv) */
.tsd-toggle.is-locked {
  cursor: default;
  pointer-events: none;
}
.tsd-toggle.is-locked .tsd-toggle-label {
  color: #5a8a47;
  font-weight: 500;
  font-size: .72rem;
}
.tsd-toggle.is-locked .tsd-toggle-track {
  background: rgba(90, 138, 71, .25);
  cursor: default;
}

/* Panel-Footer */
.tsd-cs-footer {
  display: flex;
  justify-content: flex-end;
}
.tsd-cs-footer .tsd-btn {
  padding: .7rem 1.75rem;
  font-size: .875rem;
}

/* ----------------------------------------------------------------
   Widerruf-Link (im Footer der Seite – optional)
   ---------------------------------------------------------------- */
.tsd-revoke-link {
  display: inline-block;
  font-size: .8rem;
  color: rgba(42, 28, 24, .45);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  background: none;
  border: none;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  padding: 0;
  transition: color .18s;
}
.tsd-revoke-link:hover {
  color: #442f29;
}

/* ----------------------------------------------------------------
   Mobile (≤ 680 px)
   ---------------------------------------------------------------- */
@media (max-width: 680px) {
  .tsd-cb-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .tsd-cb-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .tsd-btn {
    justify-content: center;
    padding: .7rem 1rem;
    font-size: .875rem;
  }

  #tsd-cookie-banner {
    padding: 1.25rem 1rem 1.5rem;
  }

  .tsd-cs-panel {
    padding: 1.5rem 1.25rem;
    border-radius: 16px 16px 0 0;
    max-height: 88dvh;
  }

  /* Panel am unteren Rand andocken */
  #tsd-cookie-settings {
    align-items: flex-end;
    padding: 0;
  }

  #tsd-cookie-settings.is-open .tsd-cs-panel {
    transform: translateY(0) scale(1);
  }

  .tsd-cs-item {
    flex-direction: column;
    gap: 1rem;
  }

  .tsd-toggle {
    flex-direction: row;
    align-items: center;
  }
}

/* ----------------------------------------------------------------
   Reduzierte Bewegung
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #tsd-cookie-banner,
  .tsd-cs-panel,
  #tsd-cookie-settings,
  .tsd-toggle-track,
  .tsd-toggle-track::after {
    transition: none;
  }
}