/* Witwenrechner — ruhig, hell, gross, seriös. Zielgruppe 55+: Lesbarkeit schlaegt Eleganz.
   Nur Systemschriften — keine externen Fonts (DSGVO). */

:root {
  --papier: #fbfaf8;
  --karte: #ffffff;
  --text: #22222a;
  --text-leise: #56565f;
  --linie: #e2e0da;
  --akzent: #2f5d50;      /* ruhiges Dunkelgruen, kein Werbe-Blau */
  --akzent-hell: #eef3f1;
  --hinweis: #fdf9ec;
  --hinweis-linie: #e6d9b0;
}

* { box-sizing: border-box; margin: 0; }

html { font-size: 112.5%; }          /* 18px Basis — bewusst gross */

body {
  background: var(--papier);
  color: var(--text);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

.wrap { width: min(46rem, 92vw); margin-inline: auto; }

/* Tastatur-Sprungmarke (Barrierefreiheit) */
.skip {
  position: absolute; left: -9999px;
  background: var(--akzent); color: #fff; padding: .6rem 1rem;
}
.skip:focus { left: 1rem; top: 1rem; z-index: 10; }

header {
  background: var(--karte);
  border-bottom: 1px solid var(--linie);
  padding: 1rem 0;
}
header .wrap { display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; align-items: baseline; }
.marke {
  font-size: 1.35rem; font-weight: 700; color: var(--akzent);
  text-decoration: none; letter-spacing: .01em;
}
header nav { display: flex; flex-wrap: wrap; gap: 1.1rem; font-size: .92rem; }
header nav a { color: var(--text-leise); text-decoration: none; }
header nav a:hover, header nav a:focus { color: var(--akzent); text-decoration: underline; }

main { padding: 2.5rem 0 3rem; }

h1 {
  font-size: 1.9rem; line-height: 1.25; font-weight: 700;
  margin-bottom: .6rem; letter-spacing: -.01em;
}
h2 { font-size: 1.3rem; margin: 2rem 0 .6rem; line-height: 1.3; }
h3 { font-size: 1.08rem; margin: 1.4rem 0 .4rem; }

p, ul, ol { margin-bottom: 1rem; }
ul, ol { padding-left: 1.3rem; }
li { margin-bottom: .35rem; }

a { color: var(--akzent); text-underline-offset: .15em; }

.stand {
  color: var(--text-leise); font-size: .87rem;
  border-bottom: 1px solid var(--linie); padding-bottom: 1rem; margin-bottom: 1.6rem;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Rechenbeispiel-Kasten */
.beispiel {
  background: var(--akzent-hell);
  border-left: 4px solid var(--akzent);
  padding: 1rem 1.2rem; margin: 1.4rem 0; border-radius: 0 6px 6px 0;
}
.beispiel h3 { margin-top: 0; }
.beispiel table { width: 100%; border-collapse: collapse; font-family: system-ui, sans-serif; font-size: .95rem; }
.beispiel td { padding: .3rem 0; vertical-align: baseline; }
.beispiel td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.beispiel tr.summe td { border-top: 1px solid var(--akzent); font-weight: 700; padding-top: .5rem; }

/* Hinweis-/Merkkasten */
.merk {
  background: var(--hinweis); border: 1px solid var(--hinweis-linie);
  padding: 1rem 1.2rem; border-radius: 6px; margin: 1.4rem 0;
}
.merk p:last-child { margin-bottom: 0; }

/* Pflicht-Disclaimer (genau EINER pro Seite) */
.disclaimer {
  margin: 2.5rem 0 0; padding: 1rem 1.2rem;
  background: var(--karte); border: 1px solid var(--linie); border-radius: 6px;
  font-size: .9rem; color: var(--text-leise);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.disclaimer p { margin-bottom: 0; }

.quellen {
  margin-top: 2rem; font-size: .88rem; color: var(--text-leise);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.quellen h2 { font-size: 1rem; margin-bottom: .5rem; }

footer {
  background: var(--karte); border-top: 1px solid var(--linie);
  padding: 1.6rem 0; margin-top: 3rem;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: .88rem;
}
footer nav { display: flex; gap: 1.2rem; }

/* Sichtbarer Fokus fuer Tastaturnutzung */
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--akzent); outline-offset: 2px;
}

@media (max-width: 34rem) {
  html { font-size: 106%; }
  h1 { font-size: 1.6rem; }
}