/* Die einfachen Seiten — Fristenrechner, Unternehmenszinsen, Übersicht.
 *
 * Setzt `tafel.css` und `bausteine.css` voraus und wird nach ihnen geladen.
 *
 * Diese drei sind handgeschriebenes HTML ohne Bau: Sie tragen ihre Struktur
 * in Elementen (`article`, `table`, `footer`) und nicht in Klassen, wie es die
 * Anwendungen mit Bündel tun. Was sie brauchen, steht deshalb hier und nicht
 * in `bausteine.css` — dort stünde es für niemanden sonst.
 *
 * Sie ersetzt die frühere `base.css`, die eine eigene Farbtafel führte
 * (`--primary: #0066cc` auf blassblauem Grund) und damit als einzige aus der
 * Reihe fiel.
 */

/* ------------------------------------------------------------------ Seite */

body {
  padding: 0 0 3rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

/* Der Rumpf beginnt unter der Kopfleiste. Sein oberes Polster steht an ihm
   und nicht am `body`: Die Leiste geht über die volle Fensterbreite und bleibt
   beim Rollen stehen, der Rumpf ist auf Lesebreite begrenzt. */
.rumpf {
  width: 100%;
  max-width: 62rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 0;
}

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

/* Die Kopfleiste steht in `bausteine.css` und ist hier dieselbe wie in jeder
   gebauten Anwendung: `.kopf` mit `.kopf__marke`, `.kopf__titel`,
   `.kopf__unterzeile` und `.kopf__aktionen`. Bis dahin führten diese Seiten
   einen eigenen `.seitenkopf` mit 40-px-Zeichen und 24-px-Titel — dieselbe
   Zeile, zweimal gebaut und in zwei Maßen.

   Der Titel ist hier ein `h1` im `hgroup` und trägt die Klasse; unter den
   Bausteinen ist `h1, h2, h3` bereits ohne Rand. Zu tun bleibt nichts. */

/* ------------------------------------------------------------------ Karte */

article {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  box-shadow: var(--schatten);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

article > :last-child {
  margin-bottom: 0;
}

h2 {
  font-size: 1.15rem;
  margin: 0 0 0.75rem;
}

/* -------------------------------------------------------------- Tabellen */

/* Eine breite Tabelle rollt in ihrer eigenen Hülle und nicht die ganze Seite
   mit sich. */
.rollt {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

table th,
table td {
  padding: 0.6rem 0.7rem;
  text-align: left;
  border-bottom: 1px solid var(--linie);
}

table thead th {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-leise);
  border-bottom: 2px solid var(--linie-stark);
  white-space: nowrap;
}

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

/* Hier steht keiner mehr. Bis September 2026 hielt diese Datei einen zweiten
   Fuß am Element `footer` — dieselben Absätze wie `.fuss` in den Bausteinen,
   nur 0,8 rem statt 12 px, und darin ein `<small>`, das den Autorenhinweis auf
   gut zehn Pixel zusammenzog. Er trägt jetzt überall `class="fuss"` und kommt
   damit aus `gemeinsam/bausteine.css`. */

/* --------------------------------------------------------------- Ausklapp */

details {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 6px;
  margin-bottom: 0.6rem;
}

summary {
  padding: 0.7rem 0.9rem;
  color: var(--primaer);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

summary::before {
  content: "▸ ";
  font-size: 0.85em;
}

details[open] summary::before {
  content: "▾ ";
}

details[open] summary {
  border-bottom: 1px solid var(--linie);
}