/* ==========================================================================
   Kündigungs-Flow nach § 312k BGB — eigenes, bewusst minimales Stylesheet.

   Getrennt von site-home.css/auth.css, weil auf diesen Seiten nach BGH
   I ZR 200/25 nichts außer Formular und Bestätigungsschaltfläche stehen darf.
   Hier gibt es deshalb keine Karten-, Badge-, Banner- oder CTA-Bausteine.
   Farben stammen aus dem Tokenset in site-base.css.

   Kontraste (WCAG AA, >= 4.5:1 auf --bg #14120f):
     --ink   #f4efe6 -> 15.9:1
     --ink-2 #cfc7ba -> 11.0:1
     --muted #a49a8c ->  6.7:1
   Der Absenden-Button ist dunkler Text auf --ink -> 15.9:1.
   ========================================================================== */

.kuendigung-body { background: var(--bg); }

.kuendigung {
  position: relative;
  z-index: 1;
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4rem) var(--gutter) clamp(3rem, 8vw, 5rem);
}

.kuendigung__brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.15rem;
  margin-bottom: 2.2rem;
}
.kuendigung__brand svg { width: 1.5rem; height: 1.5rem; flex: none; }

.kuendigung h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  line-height: 1.15;
  margin: 0 0 0.9rem;
  color: var(--ink);
}

.kuendigung .lead {
  color: var(--ink-2);
  margin: 0 0 2rem;
}

/* --- Formular ------------------------------------------------------------- */
.kuendigung fieldset {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1.1rem 1.2rem 1.3rem;
  margin: 0 0 1.6rem;
}

.kuendigung legend {
  padding: 0 0.4rem;
  font-weight: 600;
  color: var(--ink);
}

.kuendigung .field { margin-bottom: 1.15rem; }
.kuendigung .field:last-child { margin-bottom: 0; }

.kuendigung label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.92rem;
  color: var(--ink-2);
}

.kuendigung input[type="text"],
.kuendigung input[type="email"],
.kuendigung input[type="date"],
.kuendigung select,
.kuendigung textarea {
  width: 100%;
  padding: 0.72rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--ink);
  font: 400 1rem/1.4 var(--body);
}
.kuendigung textarea { min-height: 6.5rem; resize: vertical; }
.kuendigung input:focus-visible,
.kuendigung select:focus-visible,
.kuendigung textarea:focus-visible,
.kuendigung a:focus-visible,
.kuendigung button:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

.kuendigung .choice {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.55rem;
}
.kuendigung .choice input[type="radio"] {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.15rem 0 0;
  accent-color: var(--signal);
  flex: none;
}
.kuendigung .choice label { margin: 0; color: var(--ink); }
.kuendigung .choice label .choice__hint {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
}

.kuendigung .hint {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0.35rem 0 0;
}

/* Bedingte Felder.

   Grundsatz: sichtbar per Default. Erst wenn :has() unterstützt wird UND die
   jeweils andere Option gewählt ist, wird ausgeblendet. Ohne :has()-Support
   bleiben beide Felder sichtbar — das ist der unschädliche Ausfall, denn
   beide sind ohnehin freiwillig bzw. nur bei aktiver Auswahl auszufüllen.
   Bewusst ohne JavaScript, damit die Seite auch ohne Skripte vollständig
   bedienbar bleibt (BFSG). */
form:has(#type-ordinary:checked) .kuendigung-reason { display: none; }
form:has(#zeitpunkt-next:checked) .kuendigung-date { display: none; }

/* --- Fehler --------------------------------------------------------------- */
.kuendigung .errors {
  border: 1px solid #e0a3a3;
  border-radius: 3px;
  background: rgba(224, 163, 163, 0.09);
  color: #f2d6d6;
  padding: 0.9rem 1.1rem;
  margin: 0 0 1.6rem;
}
.kuendigung .errors h2 { font-size: 1rem; margin: 0 0 0.5rem; color: #f2d6d6; }
.kuendigung .errors ul { margin: 0; padding-left: 1.2rem; }
.kuendigung .field-error {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.87rem;
  color: #f2d6d6;
}

/* --- Aktion --------------------------------------------------------------- */
.kuendigung .submit {
  display: inline-flex;
  align-items: center;
  padding: 0.95rem 1.7rem;
  background: var(--ink);
  color: #16130f;
  font: 600 1.05rem/1 var(--body);
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.25s var(--ease);
}
.kuendigung .submit:hover { background: var(--signal); }

/* --- Bestätigungsseite ---------------------------------------------------- */
.kuendigung .facts {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.8rem;
}
.kuendigung .facts th,
.kuendigung .facts td {
  text-align: left;
  vertical-align: top;
  padding: 0.6rem 0.9rem 0.6rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-weight: 400;
}
.kuendigung .facts th { color: var(--muted); width: 16rem; }
.kuendigung .facts td { color: var(--ink); }

.kuendigung .declaration {
  white-space: pre-wrap;
  font: 400 0.92rem/1.6 ui-monospace, Consolas, "Courier New", monospace;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1.1rem 1.2rem;
  margin: 0 0 1.6rem;
  overflow-x: auto;
}

.kuendigung .download {
  display: inline-flex;
  align-items: center;
  padding: 0.8rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
}
.kuendigung .download:hover { border-color: var(--signal); color: var(--signal); }

.kuendigung__imprint {
  margin: 3rem 0 0;
  font-size: 0.85rem;
}
.kuendigung__imprint a { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .kuendigung * { transition: none !important; }
}