/* =============================================================================
   Bestattungsdienst Schmitz — Einwilligungs-Dialog
   Design & Development: SION Design · Stand 21.09.2026
   -----------------------------------------------------------------------------
   Alle Klassen mit Präfix .schmitz-consent — keine Überschneidung mit dem
   bestehenden Stylesheet (/css/styles.min.css). Werte aus dem Live-CSS:
   Hintergrund #E8E6E1, Text #313532, Schrift Figtree, Primär-Knopf wie
   .btn.btn--filled (#819085, weiß, eckig). Anpassungen nur in den Variablen.
   ========================================================================== */

.schmitz-consent {
  --sc-dunkel: #313532;       /* Textfarbe / theme-color der Seite */
  --sc-akzent: #819085;       /* .btn--filled */
  --sc-akzent-hover: #6d7c71;
  --sc-flaeche: #E8E6E1;      /* body-Hintergrund der Seite */
  --sc-hell: #ffffff;
  --sc-text: #313532;
  --sc-text-leise: #4c514d;
  --sc-schleier: rgba(49, 53, 50, 0.66);
  --sc-radius: 0;             /* Seite ist durchgehend eckig */
  --sc-schrift: Figtree, Arial, "Helvetica Neue", sans-serif;

  display: none;              /* ohne JavaScript unsichtbar */
  position: fixed;
  inset: 0;
  z-index: 2147483000;        /* über Navigation, Menü-Overlay und CTA-Leiste */
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--sc-schleier);
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.schmitz-consent.schmitz-consent--offen {
  display: flex;
}

.schmitz-consent *,
.schmitz-consent *::before,
.schmitz-consent *::after {
  box-sizing: border-box;
}

.schmitz-consent__box {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  margin: auto;
  padding: 32px 32px 28px;
  background: var(--sc-flaeche);
  color: var(--sc-text);
  border-radius: var(--sc-radius);
  border-top: 4px solid var(--sc-akzent);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
  font-family: var(--sc-schrift);
  font-size: 16px;
  line-height: 1.6;
  text-align: left;
  animation: schmitz-consent-ein 0.25s ease-out;
}

.schmitz-consent__box:focus,
.schmitz-consent__box:focus-visible {
  outline: none;              /* Fokus liegt nur zum Start auf dem Dialog selbst */
}

.schmitz-consent__titel {
  margin: 0 0 12px;
  padding: 0;
  font-family: var(--sc-schrift);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--sc-text);
  letter-spacing: 0;
  text-transform: none;
}

.schmitz-consent__text {
  margin: 0 0 24px;
  font-size: 0.95rem;
  color: var(--sc-text-leise);
}

.schmitz-consent__link {
  color: var(--sc-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.schmitz-consent__link:hover {
  text-decoration-thickness: 2px;
}

/* Zwei gleichwertige Knöpfe: gleiche Größe, gleiche Schrift, gleiches Gewicht.
   „Alle akzeptieren" wie .btn--filled, „Nur notwendige" als Outline in #313532.
   Schrift 19px fett = „großer Text" nach WCAG: Weiß auf #819085 (3,35:1)
   erfüllt damit AA (≥ 3:1). */
.schmitz-consent__knoepfe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.schmitz-consent__knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin: 0;
  padding: 12px 16px;
  border: 2px solid var(--sc-akzent);
  border-radius: var(--sc-radius);
  background: var(--sc-akzent);
  color: var(--sc-hell);
  font-family: var(--sc-schrift);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.schmitz-consent__knopf:hover {
  background: var(--sc-akzent-hover);
  border-color: var(--sc-akzent-hover);
}

.schmitz-consent__knopf--outline {
  background: transparent;
  border-color: var(--sc-dunkel);
  color: var(--sc-dunkel);
}

.schmitz-consent__knopf--outline:hover {
  background: var(--sc-dunkel);
  border-color: var(--sc-dunkel);
  color: var(--sc-hell);
}

.schmitz-consent__knopf:focus-visible {
  outline: 2px solid var(--sc-dunkel);
  outline-offset: 3px;
}

/* Seite dahinter nicht scrollbar, solange der Dialog offen ist. */
html.schmitz-consent-offen,
html.schmitz-consent-offen body {
  overflow: hidden;
}

@keyframes schmitz-consent-ein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .schmitz-consent__box { animation: none; }
}

@media (max-width: 480px) {
  .schmitz-consent__box {
    padding: 24px 20px 20px;
  }
  .schmitz-consent__titel {
    font-size: 1.2rem;
  }
  .schmitz-consent__knoepfe {
    grid-template-columns: 1fr;
  }
}

/* Optionaler Fußzeilen-Link „Cookie-Einstellungen" als <button> gestylt wie ein Link. */
button[data-schmitz-consent-oeffnen] {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: inherit;
  cursor: pointer;
}