/* Test-Seite Todesfall (Name «Todesfall-Wegweiser») – ruhig, würdig, gut lesbar
   Gestaltung 30.10.2026: Anthrazit für Kopf und Fuss, ruhige Grautöne statt Weiss, ein zurückhaltender Akzent.
   Kontraste nachrechnen: node werkzeuge/kontrast.mjs (Fliesstext mind. 7:1, grosse Schrift und Knöpfe mind. 4,5:1).

   Variante A (Standard) = kühles Grau, Akzent Taubengrau.
   Variante B = warmes Grau, Akzent Salbei.
     Ganze Seite auf B umstellen (eine Zeile): weiter unten «.variante-b {» durch «:root {» ersetzen.
     Nur zum Ansehen einer einzelnen Seite: <html lang="de-CH" class="variante-b">.
   Rose (Wasserzeichen, eigene Zeichnung aus werkzeuge/rose-zeichnen.mjs):
     Fassung 1 = rose.svg (Standard), Fassung 2 = rose-2.svg – Wechsel in der Zeile «--rose-bild» (oder Klasse «rose-2» am <html>).
   Anderes Symbol (Vorschläge 1–10 in bilder/symbole/, Vergleich bilder/symbole-vergleich-1.png und -2.png):
     Datei nach seite/Website/ kopieren und nur die Zeile «--rose-bild» ändern (Anleitung in STATUS.md). */
:root {
  /* Variante A – kühles Grau */
  --kopf: #2b2f33;            /* Kopfbalken, Anthrazit */
  --kopf-text: #eef0f2;
  --kopf-leise: #c8ced3;
  --marke-akzent: #a9b4bd;
  --fuss: #24282b;            /* Fussbalken */
  --fuss-text: #d3d8dc;
  --grund: #eceef0;           /* Seitenhintergrund, sehr helles Grau */
  --grund-oben: #e2e6e9;
  --flaeche: #f8f9fa;         /* Karten */
  --feld: #ffffff;            /* Eingabefelder bleiben hell */
  --feld-rand: #7b838a;
  --text: #1d2125;
  --leise: #40474e;
  --linie: #d2d7db;
  --haupt: #2e353b;           /* Titel, Links */
  --haupt-hell: #e3e7ea;
  --akzent: #56626c;          /* Knöpfe: gedecktes Taubengrau */
  --akzent-dunkel: #434d56;
  --knopf-text: #ffffff;
  --hinweis-grund: #e5e9ec;
  --etikett-grund: #dde2e6;
  --etikett-text: #3a434b;
  --frist-text: #743a32;      /* Fristen: gedämpftes Rostbraun */
  --frist-grund: #f2ebea;
  --frist-rand: #d4c0bc;
  --rose: #5d6974;
  --rose-deckkraft: .2;
  --rose-bild: url("/zeichen.png"); /* Rose nach Redouté, gemeinfrei (Michael 30.10.2026) */
  --schatten: 0 1px 2px rgba(25, 28, 31, .06), 0 4px 16px rgba(25, 28, 31, .06);
  --rund: 10px;
}
:root { /* Variante B aktiv (Michael 30.10.2026) */
  /* Variante B – warmes Grau */
  --kopf: #34302d;
  --kopf-text: #f1eee9;
  --kopf-leise: #d3ccc3;
  --marke-akzent: #c2b6a5;
  --fuss: #2c2926;
  --fuss-text: #d9d3cb;
  --grund: #f0eeea;
  --grund-oben: #e7e3dc;
  --flaeche: #faf9f7;
  --feld: #ffffff;
  --feld-rand: #847c73;
  --text: #25221f;
  --leise: #48423c;
  --linie: #dbd5cd;
  --haupt: #3a3530;
  --haupt-hell: #e7e3dc;
  --akzent: #5b6a5e;          /* Knöpfe: gedecktes Salbei */
  --akzent-dunkel: #48554b;
  --knopf-text: #ffffff;
  --hinweis-grund: #ebe7e1;
  --etikett-grund: #e3ded6;
  --etikett-text: #453f39;
  --frist-text: #763b30;
  --frist-grund: #f4ece7;
  --frist-rand: #dac4ba;
  --rose: #6f655c;
  --rose-deckkraft: .2;
  --schatten: 0 1px 2px rgba(35, 30, 25, .06), 0 4px 16px rgba(35, 30, 25, .06);
}
.rose-2 { --rose-bild: url("/rose-2.svg"); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--grund); color: var(--text);
  font: 18px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
h1, h2, h3 { font-family: Georgia, "Iowan Old Style", "Times New Roman", serif; color: var(--haupt); line-height: 1.25; font-weight: 700; }
h1 { font-size: clamp(1.8rem, 4.5vw, 2.6rem); margin: .2em 0 .4em; }
h2 { font-size: clamp(1.4rem, 3.2vw, 1.9rem); margin: 0 0 .5em; }
h3 { font-size: 1.15rem; margin: 1.2em 0 .4em; }
p { margin: 0 0 1em; }
a { color: var(--haupt); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.schmal { max-width: 720px; }
.klein { font-size: .88rem; color: var(--leise); }

/* Kopf */
.kopf { background: var(--kopf); color: var(--kopf-text); }
.kopf .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap; }
.marke { color: var(--kopf-text); text-decoration: none; font-family: Georgia, serif; font-size: 1.25rem; font-weight: 700; letter-spacing: .01em; }
.marke span { color: var(--marke-akzent); }
.kopf nav { display: flex; gap: 18px; flex-wrap: wrap; font-size: .95rem; }
.kopf nav a { color: var(--kopf-leise); text-decoration: none; }
.kopf nav a:hover { color: var(--kopf-text); text-decoration: underline; }
.kopf a:focus-visible { outline-color: var(--kopf-text); }

/* Einstieg */
.einstieg { background: linear-gradient(180deg, var(--grund-oben), var(--grund)); padding: 40px 0 24px; }
.einstieg p.unter { font-size: 1.12rem; color: var(--leise); max-width: 760px; }
.vertrauen { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 0; margin: 16px 0 0; list-style: none; font-size: .95rem; color: var(--leise); }
.vertrauen li::before { content: "✓ "; color: var(--akzent); font-weight: 700; }

/* Wasserzeichen: Rose als Maske in der Farbe --rose, sehr zurückhaltend; liegt nie hinter Text oder Rechner */
.einstieg { position: relative; overflow: hidden; }
.einstieg .wrap, main.wrap.schmal { position: relative; }
.einstieg .wrap::after, main.wrap.schmal::after {
  content: ""; position: absolute; display: none; pointer-events: none;
  background: var(--rose); opacity: var(--rose-deckkraft);
  -webkit-mask: var(--rose-bild) no-repeat right top / contain; mask: var(--rose-bild) no-repeat right top / contain;
}
@media (min-width: 600px) {   /* Tablet: kleine Rose oben rechts, Text macht Platz */
  .einstieg .wrap { padding-right: 150px; }
  .einstieg .wrap::after { display: block; right: 8px; top: -8px; width: 130px; height: 221px; }
}
@media (min-width: 900px) {   /* Bildschirm: grössere Rose rechts im Kopfbereich */
  .einstieg .wrap { padding-right: 240px; }
  .einstieg .wrap::after { right: 4px; top: -14px; width: 224px; height: 381px; }
}
@media (min-width: 1200px) {  /* Unterseiten: Rose am rechten Seitenrand neben der schmalen Spalte */
  main.wrap.schmal::after { display: block; top: 34px; left: calc(100% + 36px); width: 180px; height: 306px; }
}
/* Auf dem Handy (unter 600 px) bleibt die Rose ausgeblendet, damit sie den Text nicht überlagert. */

/* Abschnitte und Karten */
section { padding: 28px 0; }
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); box-shadow: var(--schatten); padding: 22px; }
.karte + .karte { margin-top: 18px; }
.raster { display: grid; gap: 18px; }
.raster > * { min-width: 0; }   /* sonst macht die Erbrechner-Tabelle die Startseite am Handy breiter als 375 px (31.10.2026) */
@media (min-width: 860px) { .raster.zwei { grid-template-columns: 1fr 1fr; align-items: start; } }

/* Formulare */
fieldset { border: 1px solid var(--linie); border-radius: var(--rund); padding: 14px 16px 6px; margin: 0 0 14px; min-width: 0; }
legend { font-weight: 700; color: var(--haupt); padding: 0 6px; }
.feld { margin-bottom: 12px; }
.feld label, .feldtitel { display: block; font-weight: 600; margin-bottom: 4px; font-size: .97rem; }
.feld .hilfe { font-size: .85rem; color: var(--leise); margin-top: 3px; }
input[type=number], input[type=text], input[type=email], select, textarea {
  width: 100%; font: inherit; font-size: 1rem; padding: 10px 12px; border: 1px solid var(--feld-rand); border-radius: 8px; background: var(--feld); color: var(--text);
}
input[type=radio], input[type=checkbox] { accent-color: var(--akzent); }
input[type=number] { max-width: 220px; }
.zeile { display: flex; flex-wrap: wrap; gap: 12px; }
.zeile > .feld { flex: 1 1 180px; }
.wahl { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 10px; }
.wahl label { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.wahl.senkrecht { flex-direction: column; gap: 6px; }
fieldset .hilfe { font-size: .85rem; color: var(--leise); margin: 0 0 8px; }
.knopf, button.knopf {
  display: inline-block; background: var(--akzent); color: var(--knopf-text); border: 0; border-radius: 8px; padding: 12px 20px; font: inherit; font-weight: 700;
  text-decoration: none; cursor: pointer;
}
.knopf:hover { background: var(--akzent-dunkel); }
.knopf.zweit { background: var(--flaeche); color: var(--haupt); border: 2px solid var(--haupt); }
.knopf.zweit:hover { background: var(--haupt-hell); }

/* Ergebnis */
.ergebnis { background: var(--haupt-hell); border-radius: var(--rund); padding: 16px 18px; margin-top: 14px; }
.ergebnis[hidden] { display: none; }
.gross { font-size: 1.6rem; font-weight: 800; color: var(--haupt); font-variant-numeric: tabular-nums; }
.warnung { color: var(--frist-text); font-weight: 700; }
.gut { color: var(--akzent-dunkel); font-weight: 700; }
.zahlen { width: 100%; border-collapse: collapse; margin: 8px 0 4px; font-variant-numeric: tabular-nums; }
.zahlen th, .zahlen td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.zahlen td.z, .zahlen th.z { text-align: right; white-space: nowrap; }
.zahlen tr.summe td { font-weight: 800; border-top: 2px solid var(--haupt); }
.tabelle-wrap { overflow-x: auto; }

/* Angebot (Vormerken) */
.angebot { border: 2px solid var(--akzent); }
.preis { font-size: 1.5rem; font-weight: 800; color: var(--haupt); }
.marke-neu { display: inline-block; background: var(--etikett-grund); color: var(--etikett-text); font-size: .8rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; margin-bottom: 6px; }
ul.haken { padding-left: 0; list-style: none; }
ul.haken li { padding-left: 1.5em; position: relative; margin-bottom: .35em; }
ul.haken li::before { content: "✓"; position: absolute; left: 0; color: var(--akzent); font-weight: 800; }

/* Fragen */
details { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); padding: 12px 16px; margin-bottom: 10px; }
summary { cursor: pointer; font-weight: 700; color: var(--haupt); }
details[open] summary { margin-bottom: 8px; }

/* Hinweise und Fuss */
.hinweis { border-left: 4px solid var(--akzent); background: var(--hinweis-grund); padding: 12px 14px; border-radius: 0 8px 8px 0; font-size: .95rem; }
.quellen { font-size: .85rem; color: var(--leise); }
.quellen a { color: var(--leise); }
.fuss { background: var(--fuss); color: var(--fuss-text); padding: 28px 0; margin-top: 30px; font-size: .9rem; }
.fuss a { color: var(--kopf-text); }
.fuss a:focus-visible { outline-color: var(--kopf-text); }
.fuss .wrap { display: grid; gap: 10px; }
.honig { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media print {
  .kopf nav, .fuss, .angebot, .knopf, .einstieg .wrap::after, main.wrap.schmal::after { display: none !important; }
  body, .einstieg { background: #fff; }
}

/* Checkliste */
.phase { margin-bottom: 18px; }
.phase h3 { margin-top: 0; display: flex; align-items: baseline; gap: 10px; }
.phase h3 .wann { font-family: system-ui, sans-serif; font-size: .8rem; font-weight: 700; color: var(--knopf-text); background: var(--haupt); padding: 2px 10px; border-radius: 99px; }
.aufgabe { display: grid; grid-template-columns: 28px 1fr; gap: 4px 8px; padding: 10px 0; border-top: 1px solid var(--linie); }
.aufgabe input { width: 20px; height: 20px; margin-top: 4px; accent-color: var(--haupt); }
.aufgabe .titel { font-weight: 700; }
.aufgabe .mehr { grid-column: 2; font-size: .95rem; color: var(--leise); }
.aufgabe .mehr strong { color: var(--text); }
.aufgabe.fertig .titel { text-decoration: line-through; color: var(--leise); }
.frist { display: inline-block; font-size: .8rem; font-weight: 700; color: var(--frist-text); border: 1px solid var(--frist-rand); background: var(--frist-grund); padding: 0 8px; border-radius: 99px; margin-left: 6px; }
.kantonwahl { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 16px; }
.kantonwahl button { font: inherit; font-weight: 700; padding: 8px 16px; border-radius: 99px; border: 2px solid var(--haupt); background: var(--flaeche); color: var(--haupt); cursor: pointer; }
.kantonwahl button[aria-pressed=true] { background: var(--haupt); color: var(--knopf-text); }
.kinderliste .zeile { align-items: end; }