/* Rechtliche Seiten. Bewusst dieselbe Nuechternheit wie der Rest: weiss,
   Graustufen, ein fast schwarzer Akzent. Farbe traegt hier keine Bedeutung. */
:root{--tinte:#17181a;--grau-1:#6b6f76;--grau-2:#9aa0a8;--linie:#e3e5e8;
  --flaeche:#f6f7f8;--papier:#fff}
*{box-sizing:border-box}
body{margin:0;background:var(--papier);color:var(--tinte);
  font:15px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
.blatt{max-width:660px;margin:0 auto;padding:56px 24px 96px}
h1{font-size:25px;margin:0 0 24px;letter-spacing:-.02em;font-weight:620}
h2{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--grau-2);
  font-weight:600;margin:36px 0 10px;padding-bottom:7px;border-bottom:1px solid var(--linie)}
p{margin:0 0 13px}
a{color:var(--tinte)}
.zurueck{font-size:13px;margin-bottom:28px}
.zurueck a{color:var(--grau-1);text-decoration:none}
.zurueck a:hover{color:var(--tinte)}
.klein{font-size:13px;color:var(--grau-1)}
.fuss{margin-top:48px;padding-top:16px;border-top:1px solid var(--linie);
  font-size:13px;color:var(--grau-2)}
.offen{border:1px solid var(--tinte);border-radius:8px;padding:14px 16px;
  margin:0 0 28px;font-size:14px}
.luecke{background:var(--flaeche);border:1px dashed var(--grau-2);border-radius:4px;
  padding:1px 6px;color:var(--grau-1);font-size:13.5px}
ul{margin:0 0 13px;padding-left:20px}
li{margin-bottom:5px}

/* --- Textseiten -----------------------------------------------------------
   Dieselbe Nuechternheit wie die Rechtsseiten, nur etwas mehr Bauteile: die
   Ratgeberseiten haben Zwischentitel, Tabellen und einen Merkkasten. Bewusst
   kein zweites Stylesheet: zwei Dateien mit derselben Absicht laufen frueher
   oder spaeter auseinander. */
h3{font-size:15px;margin:22px 0 8px;font-weight:620}
.blatt.text{max-width:700px}
.fuehrung{font-size:17px;line-height:1.55;color:var(--tinte);margin:0 0 26px}
/* Die Tabelle scrollt in ihrem eigenen Kasten, nicht die Seite. Ohne das
   schiebt eine dreispaltige Tabelle auf einem Telefon den ganzen Text nach
   links aus dem Bild, und die letzte Spalte ist abgeschnitten. */
.tabelle{overflow-x:auto;margin:0 0 16px;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;margin:0;font-size:14px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--linie);
  vertical-align:top}
th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--grau-2);font-weight:600}
td.zahl,th.zahl{text-align:right;white-space:nowrap}
/* Ein Kasten, kein Farbfeld. Die Aussage traegt der Rand, nicht die Flaeche. */
.merk{border:1px solid var(--tinte);border-radius:8px;padding:14px 16px;
  margin:0 0 20px;font-size:14.5px}
.merk b{display:block;margin-bottom:4px}
/* Der Hinweis aufs Werkzeug. Genau ein Satz, ganz am Ende. Wer hier zuerst
   liest und dann klickt, hat die Antwort schon bekommen. */
.werkzeug{background:var(--flaeche);border-radius:8px;padding:16px;
  margin:32px 0 0;font-size:14.5px}
.werkzeug a{font-weight:600}
.weiter{margin-top:28px;font-size:14px}
.weiter b{display:block;font-size:12px;text-transform:uppercase;
  letter-spacing:.09em;color:var(--grau-2);margin-bottom:8px}
.weiter ul{list-style:none;padding:0;margin:0}
.weiter li{margin-bottom:6px}

/* Auf schmalen Schirmen zuerst enger setzen, damit die meisten Tabellen ganz
   hineinpassen. Erst was dann immer noch zu breit ist, wird gescrollt. */
@media (max-width:560px){
  .blatt{padding:40px 18px 72px}
  table{font-size:13px}
  th,td{padding:7px 8px}
  .fuehrung{font-size:16px}
  h1{font-size:22px}
}

/* Breite Tabellen auf dem Telefon. Statt seitlich zu scrollen wird jede Zeile
   zu einem Block, und jede Zelle traegt ihre Spaltenueberschrift bei sich.
   Ohne diese Beschriftung waere der Block mehrdeutig: "20 cm / 5 cm" sagt
   nichts, "1 cm auf dem Plan: 20 cm" sagt alles. */
@media (max-width:560px){
  .tabelle.bricht{overflow-x:visible}
  .tabelle.bricht table,.tabelle.bricht tbody,
  .tabelle.bricht tr,.tabelle.bricht td{display:block;width:100%}
  .tabelle.bricht tr:first-child{display:none}
  .tabelle.bricht tr{border-bottom:1px solid var(--linie);padding:12px 0}
  .tabelle.bricht tr:last-child{border-bottom:none}
  .tabelle.bricht td{border:none;padding:1px 0;text-align:left}
  .tabelle.bricht td:first-child{font-weight:620;margin-bottom:3px}
  .tabelle.bricht td[data-label]:not(:first-child)::before{
    content:attr(data-label) ": ";color:var(--grau-2)}
}

/* --- Rechner ---------------------------------------------------------------
   Zwei Felder und ein Ergebnis, sonst nichts. Kein Knopf: gerechnet wird bei
   jeder Eingabe, und ein Knopf waere nur ein Schritt mehr zwischen Frage und
   Antwort. Dieselbe Nuechternheit wie der uebrige Text, die Zahl traegt. */
.rechner{border:1px solid var(--linie);border-radius:8px;padding:16px;
  margin:0 0 20px;background:var(--flaeche)}
.rechner-zeile{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.rechner-zeile label{flex:1;font-size:14px;color:var(--grau-1)}
.rechner-zeile input{width:96px;padding:7px 9px;font:inherit;font-size:15px;
  text-align:right;border:1px solid var(--linie);border-radius:6px;
  background:var(--papier);color:var(--tinte);
  font-variant-numeric:tabular-nums}
.rechner-zeile input:focus{outline:none;border-color:var(--tinte)}
.rechner-zeile .einheit{width:22px;font-size:14px;color:var(--grau-2)}
.rechner-ergebnis{margin:0 0 18px;padding-top:10px;font-size:15px;
  border-top:1px solid var(--linie);font-variant-numeric:tabular-nums}
.rechner-ergebnis:last-child{margin-bottom:0}
.rechner-ergebnis b{font-weight:620}
.rechner-hinweis{display:block;margin-top:5px;font-size:13px;color:var(--grau-1)}
/* Auf dem Telefon steht die Beschriftung ueber dem Feld, sonst bleibt fuer
   sie eine Spalte von zwei Woertern Breite uebrig. */
@media (max-width:420px){
  .rechner-zeile{flex-wrap:wrap;gap:6px}
  .rechner-zeile label{flex:0 0 100%}
  .rechner-zeile input{width:120px}
}