/*
 * dialog-v2.css — Dialog-Tool v2 (5-Schritte-Modell)
 *
 * Ausgelagerte Stylesheet-Datei (kein inline-<style>), damit die strikte
 * CSP der Live-Site (default-src 'self'; style-src 'self' 'unsafe-inline')
 * ohne Bedenken greift und alle im HTML genutzten Klassen an EINEM Ort
 * definiert sind (Selbst-Verifikations-Anforderung Phase 5).
 *
 * Farbwerte 1:1 aus der bestehenden dialog.html / gut-tokens.css (Dark-Redesign):
 *   Hintergrund #1a1a2e · Marken-Teal #0097B2 · Text #fff.
 * Schriften kommen self-hosted aus assets/css/gut-fonts.css (kein CDN).
 *
 * Angelegt: 2026-07-02 (Phase 5 Neubau, GUTB-264). OFFLINE — nicht live.
 */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Das [hidden]-Attribut muss immer gewinnen (JS steuert damit Sichtbarkeit). */
[hidden] { display: none !important; }

/* Struktur-Hook: die drei Pfad-Blöcke in Schritt 2 (JS zeigt nur den passenden). */
.wizard-pfad-block { margin: 0; }

html, body {
  min-height: 100vh;
  font-family: 'Montserrat', system-ui, sans-serif;
  background: #1a1a2e;
  color: #fff;
  line-height: 1.6;
}

/* ── Header ── */
header {
  border-bottom: 1px solid rgba(255,255,255,0.07);
  padding: 1.25rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  margin: 0 auto;
}

.header-logo { display: flex; align-items: center; text-decoration: none; }
.header-logo img { height: 48px; width: auto; }

.header-nav { display: flex; gap: 2rem; list-style: none; }
.header-nav a {
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 0.2s;
}
.header-nav a:hover { color: #fff; }
.header-nav a.active { color: #0097B2; }

/* ── Hero ── */
.hero {
  max-width: 760px;
  margin: 0 auto;
  padding: 4rem 2rem 2.5rem;
}

.hero-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #0097B2;
  margin-bottom: 1rem;
}

.hero h1 {
  font-family: 'Bree Serif', serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.6);
  max-width: 560px;
  line-height: 1.7;
}

/* ── Wizard Container ── */
.wizard-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 2rem 5rem;
}

/* Reset fieldset chrome (wir nutzen <fieldset> semantisch, nicht optisch) */
.wizard-step {
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0;
}

/* ── Progress (nur mit JS sichtbar) ── */
.wizard-progress { margin-bottom: 2rem; }

.wizard-progress__bar {
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.wizard-progress__fill {
  height: 100%;
  width: 0;
  background: #0097B2;
  border-radius: 2px;
  transition: width 0.4s ease;
}

.wizard-progress__label {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.55);
  letter-spacing: 1px;
}

/* ── Wizard Steps ──
 * OHNE JS: alle Schritte sichtbar (ein langes Formular).
 * MIT JS: <body class="js"> blendet nur den aktiven Schritt ein. */
body.js .wizard-step { display: none; }
body.js .wizard-step.is-active { display: block; }

.wizard-step__title {
  font-family: 'Bree Serif', serif;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 400;
  color: #fff;
  margin-bottom: 1rem;
  line-height: 1.2;
  padding: 0;
}
/* Schritt-Überschrift ist Fokus-Ziel beim Schrittwechsel — kein sichtbarer
   Fokusring nötig, aber tabindex=-1 darf keinen Default-Outline erzwingen. */
.wizard-step__title:focus { outline: none; }
.wizard-step__title:focus-visible {
  outline: 2px solid #0097B2;
  outline-offset: 4px;
  border-radius: 4px;
}

.wizard-step__subtitle {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  margin-bottom: 0.6rem;
  margin-top: 1.5rem;
}

.wizard-step__text {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.6);
  margin-bottom: 1.25rem;
  line-height: 1.7;
}

.wizard-step__text--small { font-size: 0.875rem; }

.wizard-step a { color: #0097B2; text-decoration: none; }
.wizard-step a:hover { color: #33b8cf; }

.optional-tag { font-weight: 400; color: rgba(255,255,255,0.55); }

/* ── Wizard Cards (Radio, Pfad-Wahl) ── */
.wizard-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
  border: none;
  padding: 0;
}

.wizard-card {
  position: relative;
  display: block;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 1.5rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.wizard-card:hover {
  border-color: rgba(0,151,178,0.5);
  background: rgba(0,151,178,0.06);
}

.wizard-card input[type="radio"] {
  position: absolute;
  top: 1rem;
  right: 1rem;
  accent-color: #0097B2;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.wizard-card:has(input:checked) {
  border-color: #0097B2;
  background: rgba(0,151,178,0.12);
}

.wizard-card__title {
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  margin-bottom: 0.5rem;
  padding-right: 1.5rem;
}

.wizard-card__text {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.6;
}

/* ── Checkbox List ── */
.wizard-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.wizard-checkbox-list label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.925rem;
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.06);
  transition: background 0.15s, border-color 0.15s;
}

.wizard-checkbox-list label:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
}

.wizard-checkbox-list input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: #0097B2;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* Erklärender Inline-Hinweis in einer Checkbox-Option (z.B. Newsletter-DOI).
   Bewusst als eigener Block dargestellt, transparent statt kleingedruckt. */
.wizard-inline-note {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.5;
}

/* ── Radio List ── */
.wizard-radio-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
  border: none;
  padding: 0;
}

.wizard-radio-list__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.925rem;
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  transition: background 0.15s, border-color 0.15s;
}

.wizard-radio-list__item:hover {
  background: rgba(0,151,178,0.07);
  border-color: rgba(0,151,178,0.3);
}

.wizard-radio-list__item:has(input:checked) {
  background: rgba(0,151,178,0.12);
  border-color: #0097B2;
  color: #fff;
}

.wizard-radio-list__item input[type="radio"] {
  accent-color: #0097B2;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
}

/* ── Consent ── */
.wizard-consent {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.25rem;
}

.wizard-consent__item {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
  padding: 1rem 1.25rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 10px;
  cursor: pointer;
}

.wizard-consent__item input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 3px;
  accent-color: #0097B2;
  width: 17px;
  height: 17px;
  cursor: pointer;
}

.wizard-consent__item strong { color: #fff; }
.wizard-consent__item em { color: rgba(255,255,255,0.55); font-size: 0.85rem; font-style: italic; }

/* ── Textarea / Select / Input ── */
textarea, select, input[type="text"], input[type="email"] {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  padding: 0.75rem 1rem;
  transition: border-color 0.2s;
  margin-bottom: 0.5rem;
}

textarea { resize: vertical; min-height: 100px; }

textarea:focus, select:focus, input[type="text"]:focus, input[type="email"]:focus {
  outline: none;
  border-color: #0097B2;
  background: rgba(0,151,178,0.07);
}

textarea::placeholder, input::placeholder { color: rgba(255,255,255,0.3); }

select option { background: #1a1a2e; color: #fff; }

.form-group { margin-bottom: 1.25rem; }

.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  margin-bottom: 0.4rem;
  letter-spacing: 0.3px;
}

/* ── Hint Box ── */
.wizard-hint {
  background: rgba(0,151,178,0.08);
  border-left: 3px solid #0097B2;
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
}

.wizard-hint strong { color: #fff; display: block; margin-bottom: 0.25rem; }

/* Kontakt-Trio-Block (konditional) */
.wizard-kontakt {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}
/* MIT JS wird der Block bei Bedarf per [hidden] gesteuert; ohne JS immer sichtbar. */

/* ── Summary ── */
.wizard-summary {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 1.5rem;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.8;
  margin-bottom: 1rem;
}

.wizard-summary__row { display: flex; gap: 1rem; padding: 0.2rem 0; }
.wizard-summary__label { flex: 0 0 40%; color: rgba(255,255,255,0.55); }
.wizard-summary__value { flex: 1; color: #fff; }

/* ── Error / Alert ── */
.wizard-error {
  background: rgba(220,38,38,0.12);
  border: 1px solid rgba(220,38,38,0.3);
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  color: #fca5a5;
  font-size: 0.9rem;
  margin-bottom: 1rem;
  margin-top: 1rem;
}

/* ── Buttons ── */
.wizard-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.07);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 1.6rem;
  border-radius: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background 0.2s, transform 0.15s, opacity 0.2s;
  text-decoration: none;
}

.btn--green, .btn--green:visited {
  background: #007a90;
  color: #fff !important;
}

.btn--green:hover {
  background: #065666;
  transform: translateY(-1px);
}

.btn--lg { padding: 0.85rem 2rem; font-size: 1rem; }

.btn--outline {
  background: transparent;
  color: rgba(255,255,255,0.6) !important;
  border: 1.5px solid rgba(255,255,255,0.18);
}

.btn--outline:hover {
  border-color: rgba(255,255,255,0.4);
  color: #fff !important;
}

/* Überspringen-Button (Schritt 3) — gleichwertig, kein visueller Nachteil */
.btn--skip {
  background: transparent;
  color: rgba(255,255,255,0.7) !important;
  border: 1.5px solid rgba(255,255,255,0.18);
}
.btn--skip:hover { border-color: rgba(255,255,255,0.4); color: #fff !important; }

/* ── Fokus-Sichtbarkeit (F-ACCESS §8) ──
 * Sichtbarer Tastatur-Fokus auf allen interaktiven Elementen. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.wizard-card:focus-within,
.wizard-checkbox-list label:focus-within,
.wizard-radio-list__item:focus-within,
.wizard-consent__item:focus-within {
  outline: 2px solid #0097B2;
  outline-offset: 2px;
}

/* ── Honeypot (visuell + akustisch versteckt, im DOM erhalten) ── */
.wizard-honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
  height: 0;
  overflow: hidden;
}

/* ── Chat-Bereich + KI-Kennzeichnung (EU-KI-VO Art. 50) ── */
.chat-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 2rem 3rem;
}

.chat-section h2 {
  font-family: 'Bree Serif', serif;
  font-weight: 400;
  font-size: 1.6rem;
  margin-bottom: 0.4rem;
}

.chat-section p { color: rgba(255,255,255,0.6); margin-bottom: 1rem; }

.ki-hinweis {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(0,151,178,0.08);
  border: 1px solid rgba(0,151,178,0.3);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.75);
}
.ki-hinweis strong { color: #fff; }

/* ── Footer ── */
footer {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 2rem;
  text-align: center;
}

footer p { font-size: 0.8rem; color: rgba(255,255,255,0.55); line-height: 1.8; }

footer a {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  margin: 0 0.5rem;
  transition: color 0.2s;
}

footer a:hover { color: #fff; }

/* ── Danke-Seite ── */
.danke-wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 5rem 2rem;
}
.danke-wrap h1 {
  font-family: 'Bree Serif', serif;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: 1.5rem;
}
.danke-wrap p { font-size: 1rem; color: rgba(255,255,255,0.65); margin-bottom: 1.25rem; line-height: 1.7; }
.danke-wrap .danke-accent { color: #fff; font-weight: 600; }

/* ── Reduced Motion (F-ACCESS §8) ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 600px) {
  header { padding: 1rem; }
  .header-nav { gap: 1.25rem; }
  .hero, .wizard-wrap, .chat-section { padding-left: 1rem; padding-right: 1rem; }
  .wizard-cards { grid-template-columns: 1fr; }
  .wizard-summary__row { flex-direction: column; gap: 0.1rem; }
  .wizard-summary__label { flex-basis: auto; }
}