/* ============================================================================
   Uncle Savvy — Rechtsseiten (Impressum, Datenschutz)
   Bewusst eigenständig: diese Seiten laden weder app.css noch app.js. Sie
   brauchen weder Raster noch Scroll-Mechanik, nur lesbaren Fließtext in den
   Tokens der Hauptseite. Alle Farben und Maße kommen aus tokens.css.
   ========================================================================== */

body {
  margin: 0;
  background: var(--background-default);
  color: var(--text-default);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

.seite {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px 96px;
}

/* ---- Kopf ---------------------------------------------------------------- */

.zurueck {
  display: inline-block;
  margin-bottom: 40px;
  font-size: var(--text-sm);
  text-decoration: none;
  color: var(--text-accent);
}
.zurueck:hover { text-decoration: underline; }

h1 {
  font-family: var(--font-display);
  font-weight: 480;
  letter-spacing: -.02em;
  font-size: var(--text-3xl);
  line-height: 1.15;
  margin: 0 0 8px;
}

.stand {
  margin: 0 0 40px;
  font-size: var(--text-sm);
  color: var(--text-subdued);
}

/* ---- Gliederung ---------------------------------------------------------- */

h2 {
  font-family: var(--font-display);
  font-weight: 480;
  letter-spacing: -.01em;
  font-size: var(--text-xl);
  line-height: 1.25;
  margin: 48px 0 12px;
  padding-top: 24px;
  border-top: 1px solid var(--border-subdued);
}

h3 {
  font-size: var(--text-base);
  font-weight: 600;
  margin: 28px 0 8px;
  color: var(--text-default);
}

p { margin: 0 0 12px; color: var(--text-subdued); }
p strong, li strong { color: var(--text-default); font-weight: 600; }

ul { margin: 0 0 12px; padding-left: 20px; color: var(--text-subdued); }
li { margin-bottom: 6px; }

a { color: var(--text-accent); overflow-wrap: anywhere; }

/* Anschrift, Kontaktzeilen: Zeilenumbrüche sollen stehen bleiben, deshalb
   ein eigener Block statt <br>-Ketten im Fließtext. */
.block { margin: 0 0 12px; color: var(--text-default); }

/* ---- Dienstkarte --------------------------------------------------------- */
/* Ein eingesetzter Dienst mit Anbieter, Links und Rechtsgrundlage. Die
   Aufzählung ist bewusst eine Definitionsliste: Bezeichnung und Wert
   gehören inhaltlich zusammen. */

.dienst {
  margin: 16px 0 24px;
  padding: 16px 18px;
  background: var(--surface-elevated);
  border: 1px solid var(--border-subdued);
  border-radius: var(--radius-xl);
}
.dienst > p:first-child { margin-top: 0; color: var(--text-default); font-weight: 600; }
.dienst dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; font-size: var(--text-sm); }
.dienst dt { color: var(--text-subdued); }
.dienst dd { margin: 0; color: var(--text-default); overflow-wrap: anywhere; }

@media (max-width: 560px) {
  .dienst dl { grid-template-columns: 1fr; gap: 0 0; }
  .dienst dd { margin-bottom: 10px; }
}

/* ---- Tabelle ------------------------------------------------------------- */
/* Breite Tabellen scrollen in ihrem eigenen Kasten, damit die Seite selbst
   auf dem Telefon nie seitwärts läuft. */

.tabelle-scroll { overflow-x: auto; margin: 16px 0 24px; }
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 560px;
  font-size: var(--text-sm);
}
th, td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-subdued);
}
th { color: var(--text-default); font-weight: 600; background: var(--surface-elevated); }
td { color: var(--text-subdued); }

/* ---- Fuß ----------------------------------------------------------------- */

.quelle {
  margin: 48px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--border-subdued);
  font-size: var(--text-xs);
  color: var(--text-subdued);
}