/* ============================================================
   Unterlagen-/Exposé-Abruf (rechtssicherer Versand, /unterlagen)
   Optische Führung (Dirk 15.10.2026): Objektkarte → Schrittanzeige
   „1 Bestätigen → 2 Exposé herunterladen“ → je Erklärung eine Karte
   (Kästchen + aufklappbarer Text) → großer Absende-Knopf; danach
   die Dokumente als Knöpfe. Markup: View\DocumentRequest.
   <main id="documents" class="narrow"> …
   ============================================================ */

/* --- Objekt, um das es geht --- */
#documents .doc-object {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-end: var(--gap-block);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-alt);
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius-lg);
}

#documents .doc-object > div {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

#documents .doc-object span {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

#documents .doc-object a {
  font-size: var(--text-sm);
  white-space: nowrap;
}

/* --- Schrittanzeige --- */
#documents .doc-steps {
  display: flex;
  gap: var(--space-2);
  margin: 0 0 var(--gap-block);
  padding: 0;
  list-style: none;
  counter-reset: none;
}

#documents .doc-steps li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  border-block-end: 0.1875rem solid var(--color-border);
}

#documents .doc-steps li > span {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  font-weight: 600;
  border: 0.125rem solid currentColor;
  border-radius: var(--radius-pill);
}

#documents .doc-steps li[aria-current="step"] {
  color: var(--color-text);
  font-weight: 600;
  border-block-end-color: var(--color-primary);
}

#documents .doc-steps li[aria-current="step"] > span {
  color: var(--color-text-inverse);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

#documents .doc-steps li.is-done {
  border-block-end-color: var(--color-success);
}

/* --- Erklärungen: je Punkt eine Karte --- */
#documents .doc-form {
  gap: var(--space-3);
}

#documents .doc-item {
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition), box-shadow var(--transition);
}

#documents .doc-item:has(input:checked) {
  border-color: var(--color-success);
}

#documents .doc-item:has(input:focus-visible) {
  box-shadow: var(--shadow-sm);
}

#documents .doc-item > label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  font-weight: 500;
  cursor: pointer;
}

#documents .doc-item > label input {
  margin-block-start: 0.2em;
  flex: none;
}

#documents .doc-item details {
  margin-block-start: var(--space-2);
  padding-inline-start: calc(1em + var(--space-2));
}

#documents .doc-item summary {
  font-size: var(--text-sm);
  color: var(--color-primary);
  cursor: pointer;
}

#documents .doc-text {
  max-height: 18rem;
  overflow: auto;
  margin-block-start: var(--space-2);
  padding: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  background: var(--color-bg-alt);
  border-radius: var(--radius);
}

/* --- Absenden --- */
#documents .doc-submit {
  margin-block-start: var(--space-2);
}

#documents .doc-submit button {
  width: 100%;
  justify-content: center;
}

/* --- Dokumente nach dem Bestätigen --- */
#documents .doc-downloads {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

#documents .doc-download {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: var(--color-text);
  text-decoration: none;
  background: var(--color-bg);
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition), box-shadow var(--transition);
}

#documents .doc-download:hover,
#documents .doc-download:focus-visible {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

#documents .doc-download svg {
  flex: none;
  color: var(--color-primary);
}

#documents .doc-name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

#documents .doc-size {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
}

@media (max-width: 30rem) {
  #documents .doc-object { flex-wrap: wrap; }
  #documents .doc-steps li { font-size: var(--text-xs); padding-inline: var(--space-1); }
}

/* --- Widerruf (§ 356a BGB) nach dem Abruf: eigene, zurückhaltende Karte --- */
#documents .doc-revoke {
  margin-block-start: var(--gap-section);
  padding: var(--space-4);
  background: var(--color-bg-alt);
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius-lg);
}

#documents .doc-revoke h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
}

#documents .doc-revoke p {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* --- Objektkarte mit Bild + Eckdaten (wie Objektliste, PropertyCard-Bausteine) --- */
#documents .doc-object img {
  width: 6rem;
  height: 4.5rem;
  flex: none;
  object-fit: cover;
  border-radius: var(--radius);
}

#documents .doc-object .doc-facts {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  color: var(--color-text);
}

#documents .doc-object a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

/* Widerrufen-Knopf: die Karte hat --color-bg-alt — der helle Knopf verschwand darin (Dirk 15.10.2026) */
#documents .doc-revoke .btn {
  color: var(--color-text);
  background: var(--color-bg);
  border: 0.0625rem solid var(--color-border-dark);
}

#documents .doc-revoke .btn:hover,
#documents .doc-revoke .btn:focus-visible {
  border-color: var(--color-text);
}