/* Kleine Seiten: Rechtstexte (datenschutz.php, impressum.php, daten-export.php)
   und die Fehlerseite 404.php. Nur Tokens aus styles.css, keine Effekte. */

/* ---------- Rechtstexte: Lesespalte ---------- */
.legal-stack {
  max-width: 60ch;
  gap: var(--sp-4);
}
.legal-stack h2 {
  font-size: clamp(1.25rem, 1.1rem + .5vw, 1.55rem);
  line-height: var(--lh-snug);
  margin-top: var(--sp-6);
  scroll-margin-top: 110px;
}
.legal-stack h2:first-child {
  margin-top: 0;
}
.legal-stack p,
.legal-stack li {
  line-height: var(--lh-loose);
}
.legal-stack p,
.legal-stack ul,
.legal-stack ol {
  margin-block: 0;
}
.legal-list {
  gap: var(--sp-2);
}
.legal-stack code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
  color: var(--ink);
  overflow-wrap: anywhere;
}
/* Speicherschluessel als Zeilenliste statt als Fliesstext */
.legal-stack .list-rows {
  margin-top: var(--sp-2);
}
.legal-stack .list-row {
  font-size: var(--fs-base);
}
.legal-stack .list-row code {
  font-weight: var(--fw-medium);
}
/* Sprungliste ueber die Abschnitte */
.legal-toc-title {
  margin: 0 0 var(--sp-2);
  font-weight: var(--fw-medium);
}
.legal-toc .list-rows {
  margin-top: 0;
}
.legal-toc .list-row a:not(.button) {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-block: 0;
  margin-block: 0;
}
@media (min-width: 620px) {
  .legal-toc .list-rows {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--sp-5);
  }
}
/* Textlinks: gruen unterstrichen, Tippflaeche 44 px ohne Layoutversatz */
.legal-stack a:not(.button) {
  display: inline-block;
  padding-block: .45rem;
  margin-block: -.45rem;
  color: var(--accent-2);
  text-decoration: underline;
  text-underline-offset: .15em;
  text-decoration-thickness: 1px;
}
.legal-stack a:not(.button):hover {
  color: var(--accent-2-strong);
}
.section-head + .notice {
  margin-top: 0;
}
/* Die erste Ueberschrift braucht denselben Vorlauf wie alle anderen */
.section-head + .legal-stack {
  margin-top: var(--sp-6);
}
.notice {
  max-width: 60ch;
  border-radius: var(--radius-md);
}

/* ---------- Datenauskunft: Formular ---------- */
#daten-export .cf-card {
  max-width: 60ch;
}
#daten-export .cf-field label {
  font-size: var(--fs-sm);
}
#daten-export .cf-hint {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--muted);
}
#daten-export .cf-submit {
  min-height: 44px;
  background: var(--accent-fill);
  box-shadow: none;
  transition: background var(--dur) var(--ease);
}
#daten-export .cf-submit:hover:not(:disabled) {
  background: var(--accent-strong);
}
#daten-export .cf-submit:active:not(:disabled) {
  transform: none;
}
#daten-export .cf-status a {
  display: inline-block;
  padding-block: .45rem;
  margin-block: -.45rem;
  color: var(--accent-2);
  text-decoration: underline;
  text-underline-offset: .15em;
}

/* ---------- Fehlerseite 404 ---------- */
.page-404 .section {
  padding: 2.5rem 0 4rem;
}
.page-404-inner {
  max-width: 720px;
}
.page-404-code {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--muted);
}
.page-404 h1 {
  margin: 0 0 var(--sp-5);
  max-width: 20ch;
  font-size: var(--fs-2xl);
}
.page-404-photo {
  margin: 0 0 var(--sp-5);
}
.page-404-text {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-lg);
  line-height: var(--lh-copy);
  color: var(--muted);
}
.page-404-actions {
  display: flex;
  margin: 0 0 var(--sp-5);
}
.page-404-links {
  margin: 0;
}
.page-404-links .list-row {
  font-size: var(--fs-base);
}
.page-404-links .list-row a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--accent-2);
  text-decoration: underline;
  text-underline-offset: .15em;
  text-decoration-thickness: 1px;
}
.page-404-links .list-row a:hover {
  color: var(--accent-2-strong);
}
.page-404-links .list-row span {
  font-size: var(--fs-md);
  color: var(--muted);
}
.page-404-links .list-row span.page-404-label {
  font-size: var(--fs-base);
  color: var(--ink);
}
.page-404-links .list-row span.page-404-status.is-open {
  color: var(--accent-2);
  font-weight: var(--fw-medium);
}
@media (max-width: 480px) {
  .page-404-actions .button {
    width: 100%;
  }
}