/* ============================================================
   #643 Einwilligungs-Gate (Consent-Overlay)
   ------------------------------------------------------------
   Erscheint NACH der Fallnummer-Eingabe, VOR WS-Connect/Mikro.
   Nutzt AUSSCHLIESSLICH Design-Tokens aus showcase-theme.css →
   automatisch Artemed-CI UND ?whitelabel-neutral (kein Logo,
   keine Marken-Literale). Mobile: Karte scrollt, Touch-Ziele
   über --touch-min. Geladen nach showcase-rethought-app.css,
   vor showcase-whitelabel.css (Token-Overrides greifen).
   ============================================================ */

.consent-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 110; /* über dem Fallnummer-Overlay (100) */
  padding: var(--space-4);
}
.consent-overlay::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--gradient-brand);
}
.consent-overlay.hidden { display: none; }

.consent-card {
  width: 100%;
  max-width: 560px;
  max-height: min(92dvh, 100%);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-5) var(--space-5) var(--space-4);
}

.consent-draft {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  background: var(--tint);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
}
.consent-draft:empty { display: none; }

.consent-card h2 {
  font-size: var(--fs-xl);
  font-weight: 700;
  margin-bottom: var(--space-2);
}
.consent-intro {
  color: var(--text-secondary);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  margin-bottom: var(--space-4);
}

/* #786 KI-Kennzeichnung (AI Act Art. 50): Informationspflicht, kein Pflichtpunkt.
   Deshalb bewusst KEINE Checkbox-Optik, aber deutlich abgesetzt statt Fliesstext
   im Intro: der Hinweis soll gelesen und nicht überblättert werden. Leerer Text
   blendet den Absatz aus, damit die Rechtsabnahme ihn über die Textdatei
   steuern kann (gleiche Mechanik wie .consent-draft). */
.consent-ai {
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text);
  background: var(--accent-tint, var(--tint));
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}
.consent-ai:empty { display: none; }

.consent-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.consent-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  min-height: var(--touch-min); /* #6: Touch-Ziel — ganze Karte klickbar */
  -webkit-tap-highlight-color: transparent;
}
.consent-item:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-tint);
}
.consent-item input[type="checkbox"] {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  margin-top: 2px;
  accent-color: var(--accent);
  cursor: pointer;
}
.consent-item-text { display: block; }
.consent-item-text strong {
  display: block;
  font-size: var(--fs-base);
  margin-bottom: 2px;
}
.consent-item-text span {
  display: block;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: var(--lh-normal);
}

/* #881 Sprech-Hinweis: reiner Praxis-Tipp (Testrunden-Befund STT-Fehlerfassung
   bei schnellem/undeutlichem Sprechen). Bewusst NICHT im .consent-ai-Look
   (das wäre eine Verwechslung mit der Art.-50-Informationspflicht) — eigener,
   ruhigerer Kasten, aber gut lesbar (--fs-md, mindestens 18px) und deutlich
   abgesetzt statt Fliesstext. Leerer Text blendet den Absatz aus (gleiche
   Mechanik wie .consent-ai:empty). */
.consent-speaking-hint {
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: var(--lh-normal);
  color: var(--text);
  background: var(--tint);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}
.consent-speaking-hint:empty { display: none; }

.consent-abort {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}
.consent-decline-hint {
  font-size: var(--fs-sm);
  color: var(--error);
  border: 1px solid var(--error);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
}
.consent-decline-hint[hidden] { display: none; }

/* === #1036 Ablehnungs-Ausgang ===
   „Nicht einwilligen" ist ein gültiger Ausgang, kein Hinweis über einem weiter
   offenen Formular. Im Zustand .consent-declined bleiben nur Titel, der
   Ausgangs-Hinweis und der Rückweg stehen. Bewusst als Klasse auf dem Overlay
   und nicht als [hidden] auf jedem Element einzeln: so kann der Rückweg den
   Zustand mit einem classList.remove vollständig zurücknehmen. */
.consent-declined .consent-draft,
.consent-declined .consent-intro,
.consent-declined .consent-ai,
.consent-declined .consent-items,
.consent-declined .consent-speaking-hint,
.consent-declined .consent-abort,
.consent-declined .consent-actions { display: none; }

.consent-decline-back { display: none; }
.consent-declined .consent-decline-back {
  display: block;
  width: 100%;
  min-height: var(--touch-min);
  border-radius: var(--radius-pill);
  font-size: var(--fs-md);
  font-weight: 600;
  padding: 0 var(--space-5);
  cursor: pointer;
  background: var(--surface);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  -webkit-tap-highlight-color: transparent;
}
.consent-declined .consent-decline-back:hover { border-color: var(--accent); color: var(--accent); }

.consent-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap; /* Mobil: Buttons untereinander statt abgeschnitten */
  justify-content: flex-end;
}
.consent-actions button {
  min-height: var(--touch-min);
  border-radius: var(--radius-pill);
  font-size: var(--fs-md);
  font-weight: 600;
  padding: 0 var(--space-5);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
  -webkit-tap-highlight-color: transparent;
  flex: 1 1 auto;
}
.consent-decline {
  background: var(--surface);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.consent-decline:hover { border-color: var(--error); color: var(--error); }
.consent-accept {
  background: var(--accent);
  color: #fff;
  border: none;
}
.consent-accept:hover { background: var(--accent-hover); }
.consent-accept:disabled { background: var(--border); cursor: not-allowed; }