/* ===========================================================
   Talvenn — Gestaltung
   Farben und Schriften wie im alten Kompendium, damit die
   Seite sich nicht fremd anfühlt.
   =========================================================== */

:root {
  --abgrund:#07161A; --tief:#0E2429; --hoch:#16343A; --linie:#23474E;
  --text:#DEEAE8; --leise:#7E9E9C;
  --gruen:#79B34F; --blau:#9FD8F2; --ocker:#D9A441; --rost:#B4402F;
  --anzeige:'Fraunces','Iowan Old Style',Palatino,Georgia,serif;
  --lauf:'Spectral','Iowan Old Style',Georgia,serif;
  --fest:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
}

* { box-sizing:border-box; }

html, body {
  margin:0; padding:0;
  background:var(--abgrund); color:var(--text);
  font-family:var(--lauf); font-size:15.5px; line-height:1.6;
}
body { padding-bottom:60px; }
::selection { background:var(--gruen); color:var(--abgrund); }

a { color:var(--blau); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3,h4 { font-family:var(--anzeige); font-weight:500; line-height:1.25; }
code { font-family:var(--fest); font-size:.88em; background:var(--tief);
       padding:1px 5px; border-radius:3px; color:var(--gruen); }
mark { background:rgba(217,164,65,.28); color:var(--text); padding:0 2px; }
hr { border:none; border-top:1px solid var(--linie); margin:26px 0; }

.wrap { max-width:1120px; margin:0 auto; padding:0 20px; }
.spalt { flex:1; }
.leise { color:var(--leise); font-size:.88em; }
.hinweis { color:var(--leise); margin:0 0 16px; }
.klein { font-size:.9em; }

/* ---------- Kopf ---------- */
header.top {
  border-bottom:1px solid var(--linie);
  background:linear-gradient(180deg,#0A1D22 0%, var(--abgrund) 100%);
  padding:22px 0 0; margin-bottom:28px;
}
.brand { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.brand h1 { font-weight:300; font-size:30px; letter-spacing:.14em;
            margin:0; text-transform:uppercase; }
.brand h1 a { color:var(--text); }
.brand h1 a:hover { text-decoration:none; color:var(--gruen); }
.brand .sub { font-size:12.5px; color:var(--leise); letter-spacing:.05em; }
.brand .wer { font-family:var(--fest); font-size:11px; letter-spacing:.1em;
              text-transform:uppercase; color:var(--gruen);
              border:1px solid var(--linie); padding:3px 8px; border-radius:3px; }

.suchleiste input {
  background:var(--tief); border:1px solid var(--linie); color:var(--text);
  font-family:var(--lauf); font-size:13.5px; padding:6px 12px;
  border-radius:3px; width:230px;
}
.suchleiste input:focus { outline:none; border-color:var(--gruen); }

/* ---------- Zyklusuhr ---------- */
.uhr {
  margin:20px 0 0; padding:14px 18px; background:var(--tief);
  border:1px solid var(--linie); border-bottom:none;
  display:flex; gap:26px; align-items:center; flex-wrap:wrap;
}
.sonnen { display:flex; gap:16px; }
.sonne { text-align:center; width:56px; }
.sonne .scheibe {
  width:32px; height:32px; border-radius:50%; margin:0 auto 6px;
  border:1px solid var(--linie); background:#0A1E23;
  transition:box-shadow .4s, background .4s;
}
.sonne .lbl { font-family:var(--fest); font-size:9.5px; letter-spacing:.12em;
              color:var(--leise); text-transform:uppercase; }
.sonne.an .lbl { color:var(--text); }
.sonne.blau.an .scheibe { background:var(--blau); box-shadow:0 0 22px -2px var(--blau); }
.sonne.gelb.an .scheibe { background:var(--ocker); box-shadow:0 0 22px -2px var(--ocker); }
.sonne.rot.an  .scheibe { background:var(--rost); box-shadow:0 0 26px -1px var(--rost); }
.sonnen.gross .sonne { width:72px; }
.sonnen.gross .scheibe { width:46px; height:46px; }

.lage { font-family:var(--anzeige); font-size:19px; }
.lage small { display:block; font-family:var(--lauf); font-size:12.5px;
              color:var(--leise); letter-spacing:.02em; }

.tagwahl label { display:block; font-family:var(--fest); font-size:9.5px;
                 letter-spacing:.12em; text-transform:uppercase;
                 color:var(--leise); margin-bottom:5px; }
.tagwahl .reihe { display:flex; align-items:center; gap:6px; }
.tagwahl input {
  width:74px; background:var(--abgrund); border:1px solid var(--linie);
  color:var(--text); font-family:var(--fest); font-size:14px;
  padding:5px 8px; border-radius:3px; text-align:center;
}
.tagwahl input:disabled { color:var(--leise); }
.tagwahl .von { font-size:12px; color:var(--leise); }
.stups {
  background:var(--hoch); border:1px solid var(--linie); color:var(--text);
  width:26px; height:28px; border-radius:3px; cursor:pointer; font-size:15px;
}
.stups:hover { border-color:var(--gruen); color:var(--gruen); }

.warnung {
  background:rgba(180,64,47,.16); border:1px solid var(--rost);
  border-bottom:none; color:#F0C4BC; padding:8px 18px;
  font-size:13px; letter-spacing:.03em;
}
.warnung.klein { border:none; background:none; padding:4px 0; color:#E5A093; }

.striche { display:flex; gap:1px; height:8px; border:1px solid var(--linie);
           border-bottom:none; background:var(--abgrund); padding:1px; }
.striche .tick { flex:1; background:var(--hoch); }
.striche .tick.gelb { background:var(--ocker); }
.striche .tick.rot { background:var(--rost); }
.striche .tick.beide { background:linear-gradient(180deg,var(--rost) 50%,var(--ocker) 50%); }
.striche .tick.jetzt { background:var(--text); }

.reiter { display:flex; gap:0; border-top:1px solid var(--linie); }
.reiter a {
  padding:11px 20px; color:var(--leise); font-family:var(--fest);
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  border-bottom:2px solid transparent;
}
.reiter a:hover { color:var(--text); text-decoration:none; }
.reiter a.an { color:var(--gruen); border-bottom-color:var(--gruen); }

/* ---------- Unterreiter ---------- */
.unterreiter { display:flex; gap:4px; align-items:center; flex-wrap:wrap;
               margin-bottom:20px; border-bottom:1px solid var(--linie);
               padding-bottom:12px; }
.unterreiter > a {
  padding:6px 13px; color:var(--leise); font-size:14px; border-radius:3px;
  border:1px solid transparent;
}
.unterreiter > a:hover { color:var(--text); text-decoration:none; background:var(--tief); }
.unterreiter > a.an { color:var(--text); background:var(--tief); border-color:var(--linie); }
.anzahl { font-family:var(--fest); font-size:10.5px; color:var(--leise);
          background:var(--abgrund); padding:1px 5px; border-radius:8px;
          border:1px solid var(--linie); margin-left:3px; }

.schlagworte { display:flex; flex-wrap:wrap; gap:6px; margin:-8px 0 20px; }
.schlagworte a { font-size:12.5px; color:var(--leise); padding:3px 9px;
                 border:1px solid var(--linie); border-radius:12px; }
.schlagworte a:hover { color:var(--text); text-decoration:none; border-color:var(--gruen); }
.schlagworte a.an { color:var(--gruen); border-color:var(--gruen); }

/* ---------- Tafeln, Raster ---------- */
.tafel { background:var(--tief); border:1px solid var(--linie);
         padding:22px 24px; margin-bottom:22px; border-radius:3px; }
.tafel h2 { margin:0 0 14px; font-size:21px; letter-spacing:.02em; }
.tafel h3 { font-size:16px; margin:22px 0 10px; }
.tafel h3.klein { font-family:var(--fest); font-size:11px; letter-spacing:.13em;
                  text-transform:uppercase; color:var(--leise); margin-top:26px; }
.doppel { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:860px) { .doppel { grid-template-columns:1fr; } }

.leer { border:1px dashed var(--linie); padding:26px; text-align:center;
        color:var(--leise); border-radius:3px; }
.leer strong { display:block; color:var(--text); font-family:var(--anzeige);
               font-size:17px; margin-bottom:6px; font-weight:500; }

.meldung { padding:10px 16px; border-radius:3px; margin-bottom:18px; font-size:14px; }
.meldung.gut { background:rgba(121,179,79,.14); border:1px solid var(--gruen); }
.meldung.schlecht { background:rgba(180,64,47,.16); border:1px solid var(--rost); }

/* ---------- Knöpfe ---------- */
.knopf {
  display:inline-block; padding:7px 15px; border:1px solid var(--linie);
  background:var(--hoch); color:var(--text); font-family:var(--lauf);
  font-size:14px; border-radius:3px; cursor:pointer; line-height:1.4;
}
.knopf:hover { border-color:var(--gruen); color:var(--gruen); text-decoration:none; }
.knopf.haupt { background:var(--gruen); color:var(--abgrund); border-color:var(--gruen);
               font-weight:600; }
.knopf.haupt:hover { background:#8CC65C; color:var(--abgrund); }
.knopf.klein { padding:4px 11px; font-size:13px; }
.knopf.gefahr { color:#E5A093; border-color:rgba(180,64,47,.6); background:transparent; }
.knopf.gefahr:hover { background:rgba(180,64,47,.18); color:#F0C4BC; border-color:var(--rost); }
.knopf.leise { background:transparent; color:var(--leise); }
.knopfreihe { display:flex; gap:10px; align-items:center; margin-top:22px; }

/* ---------- Karten (Kompendium) ---------- */
.karten { display:grid; grid-template-columns:repeat(auto-fill,minmax(275px,1fr)); gap:16px; }
.karte { background:var(--tief); border:1px solid var(--linie); border-radius:3px;
         overflow:hidden; color:var(--text); display:flex; flex-direction:column; }
.karte:hover { border-color:var(--gruen); text-decoration:none; }
.karte .bild { height:160px; background-size:cover; background-position:center 30%;
               border-bottom:1px solid var(--linie); }
.karte .inhalt { padding:15px 17px; }
.karte h3 { margin:0 0 5px; font-size:17.5px; }
.karte .kurz { margin:0 0 10px; font-size:14px; color:#B9CFCC; }
.merkmale { display:flex; flex-wrap:wrap; gap:10px; font-size:12.5px; color:var(--leise); }
.merkmale .lbl { font-family:var(--fest); font-size:9.5px; letter-spacing:.1em;
                 text-transform:uppercase; opacity:.75; }
.marken { display:flex; flex-wrap:wrap; gap:5px; margin-top:11px; }
.marke { font-family:var(--fest); font-size:10px; letter-spacing:.08em;
         text-transform:uppercase; color:var(--leise);
         border:1px solid var(--linie); padding:2px 7px; border-radius:10px; }
a.marke:hover { color:var(--gruen); border-color:var(--gruen); text-decoration:none; }
.marke.rot { color:#E5A093; border-color:rgba(180,64,47,.5); }

.kacheln { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; }
.kachel { background:var(--abgrund); border:1px solid var(--linie); border-radius:3px;
          padding:18px 12px; text-align:center; color:var(--text); }
.kachel:hover { border-color:var(--gruen); text-decoration:none; }
.kachel .zahl { display:block; font-family:var(--anzeige); font-size:30px;
                font-weight:300; color:var(--gruen); }
.kachel .was { font-family:var(--fest); font-size:10.5px; letter-spacing:.12em;
               text-transform:uppercase; color:var(--leise); }

/* ---------- Lesetext ---------- */
.mitrand { display:grid; grid-template-columns:250px 1fr; gap:34px; align-items:start; }
@media (max-width:900px) { .mitrand { grid-template-columns:1fr; } }
.rand .haftend { position:sticky; top:20px; }
.rand h3 { font-family:var(--fest); font-size:10.5px; letter-spacing:.13em;
           text-transform:uppercase; color:var(--leise); margin:0 0 10px; }
.gliederung { list-style:none; margin:0; padding:0; font-size:13.5px;
              border-left:1px solid var(--linie); }
.gliederung li a { display:block; padding:4px 12px; color:var(--leise); }
.gliederung li a:hover { color:var(--gruen); text-decoration:none; }
.gliederung li.e2 a { padding-left:22px; font-size:13px; }

.lesetext { max-width:70ch; }
.lesetext h1 { font-size:27px; margin:0 0 20px; font-weight:300; letter-spacing:.04em; }
.lesetext h2 { font-size:21px; margin:36px 0 12px; padding-top:10px;
               border-top:1px solid var(--linie); }
.lesetext h3 { font-size:17px; margin:26px 0 8px; color:#C9DEDB; }
.lesetext p { margin:0 0 15px; }
.lesetext ul, .lesetext ol { margin:0 0 16px; padding-left:22px; }
.lesetext li { margin-bottom:6px; }
.lesetext blockquote { margin:0 0 16px; padding:2px 0 2px 18px;
                       border-left:2px solid var(--linie); color:#C0D4D1;
                       font-style:italic; }
.lesetext table { width:100%; border-collapse:collapse; margin:0 0 20px; font-size:14px; }
.lesetext th { text-align:left; font-family:var(--fest); font-size:10.5px;
               letter-spacing:.1em; text-transform:uppercase; color:var(--leise);
               border-bottom:1px solid var(--linie); padding:7px 10px 7px 0; font-weight:400; }
.lesetext td { padding:7px 10px 7px 0; border-bottom:1px solid rgba(35,71,78,.5);
               vertical-align:top; }
.lesetext.gross { font-size:16.5px; line-height:1.72; }
.lesetext.gross p { margin:0 0 18px; }

.verweis { color:var(--gruen); border-bottom:1px dotted rgba(121,179,79,.5); }
.verweis:hover { text-decoration:none; border-bottom-style:solid; }
.verweis.offen { color:var(--leise); border-bottom:1px dotted var(--linie); cursor:help; }

/* ---------- Ein Eintrag ---------- */
.brotkrumen { font-family:var(--fest); font-size:10.5px; letter-spacing:.12em;
              text-transform:uppercase; color:var(--leise); margin:0 0 14px; }
.eintragkopf { display:flex; gap:24px; align-items:flex-start; margin-bottom:26px;
               padding-bottom:22px; border-bottom:1px solid var(--linie); }
.eintragkopf h2 { margin:0 0 6px; font-size:27px; font-weight:300; letter-spacing:.03em; }
.eintragkopf .kurz { margin:0 0 12px; font-size:16px; color:#B9CFCC; font-style:italic; }
.portrait { width:190px; border:1px solid var(--linie); border-radius:3px; flex-shrink:0; }
@media (max-width:640px) { .eintragkopf { flex-direction:column; } .portrait { width:100%; } }
.merkmale.gross { display:grid; grid-template-columns:auto 1fr; gap:3px 14px;
                  margin:0; font-size:13.5px; }
.merkmale.gross dt { font-family:var(--fest); font-size:10px; letter-spacing:.1em;
                     text-transform:uppercase; color:var(--leise); padding-top:2px; }
.merkmale.gross dd { margin:0; }

.anknuepfung { display:grid; grid-template-columns:1fr 1fr; gap:24px;
               margin-top:34px; padding-top:22px; border-top:1px solid var(--linie); }
@media (max-width:720px) { .anknuepfung { grid-template-columns:1fr; } }
.anknuepfung h3 { font-family:var(--fest); font-size:10.5px; letter-spacing:.13em;
                  text-transform:uppercase; color:var(--leise); margin:0 0 10px; }
.anknuepfung ul { list-style:none; margin:0; padding:0; font-size:14px; }
.anknuepfung li { margin-bottom:6px; }

.fussleiste { display:flex; gap:10px; align-items:center; margin-top:34px;
              padding-top:18px; border-top:1px solid var(--linie); }
.fussleiste .leise { flex:1; }
form.inline { display:inline; }

/* ---------- Formulare ---------- */
.formular { max-width:760px; }
.formular.schmal { max-width:420px; }
.formular label { display:block; margin-bottom:16px; font-family:var(--fest);
                  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
                  color:var(--leise); }
.formular input[type=text], .formular input[type=password], .formular input[type=date],
.formular input[type=number], .formular input[type=search],
.formular select, .formular textarea {
  display:block; width:100%; margin-top:6px;
  background:var(--abgrund); border:1px solid var(--linie); color:var(--text);
  font-family:var(--lauf); font-size:15px; padding:9px 12px; border-radius:3px;
  text-transform:none; letter-spacing:normal;
}
.formular textarea { font-size:15.5px; line-height:1.65; resize:vertical; }
.formular input:focus, .formular select:focus, .formular textarea:focus {
  outline:none; border-color:var(--gruen);
}
.formular input[type=file] { margin-top:6px; color:var(--leise); font-family:var(--lauf);
                             text-transform:none; letter-spacing:normal; }
.formular .leise { text-transform:none; letter-spacing:normal; margin:-10px 0 18px; }
.felderreihe { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.felderreihe.vier { grid-template-columns:repeat(4,1fr); }
@media (max-width:760px) { .felderreihe, .felderreihe.vier { grid-template-columns:1fr 1fr; } }
.einwurf label.gross textarea { min-height:340px; }

/* ---------- Strang ---------- */
.strangliste { list-style:none; margin:0 0 16px; padding:0; }
.strangliste li { padding:12px 0; border-bottom:1px solid rgba(35,71,78,.5); }
.strangliste .nr { font-family:var(--fest); font-size:11px; color:var(--leise); }
.strangliste .titel { font-family:var(--anzeige); font-size:16px; margin-left:8px; }
.strangliste .von { display:block; font-size:12px; color:var(--leise); margin-top:2px; }
.strangliste .anriss { margin:6px 0 0; font-size:13.5px; color:#A9C2BF; }

ol.strang { list-style:none; margin:0; padding:0; }
ol.strang > li { border-bottom:1px solid rgba(35,71,78,.5); }
ol.strang > li.marke { border:none; }
ol.strang .reihe { display:flex; gap:18px; align-items:flex-start; padding:15px 4px;
                   color:var(--text); }
ol.strang .reihe:hover { background:var(--tief); text-decoration:none; }
ol.strang .nr { font-family:var(--fest); font-size:12px; color:var(--leise);
                padding-top:3px; min-width:34px; }
ol.strang .mitte { flex:1; }
ol.strang .titel { display:block; font-family:var(--anzeige); font-size:17px; }
ol.strang .anriss { display:block; font-size:13.5px; color:#A9C2BF; margin-top:3px; }
ol.strang .rechts { text-align:right; min-width:104px; }
ol.strang .wer { display:block; font-family:var(--fest); font-size:10.5px;
                 letter-spacing:.1em; text-transform:uppercase; color:var(--gruen); }
ol.strang .rechts .leise { display:block; font-size:12px; }
ol.strang > li.von-jon .wer { color:var(--ocker); }

.kapitelmarke { font-family:var(--fest); font-size:11px; letter-spacing:.2em;
                text-transform:uppercase; color:var(--ocker); margin:32px 0 10px;
                padding-bottom:8px; border-bottom:1px solid rgba(217,164,65,.35); }
.kapitelmarke.gross { font-size:14px; margin:48px 0 20px; }

.beitrag { max-width:74ch; margin:0 auto; }
.beitrag.amstueck { margin-bottom:56px; padding-bottom:34px;
                    border-bottom:1px solid var(--linie); }
.beitragkopf { margin-bottom:26px; }
.beitragkopf .nr { font-family:var(--fest); font-size:11px; color:var(--leise);
                   letter-spacing:.15em; }
.beitragkopf h2 { margin:4px 0 6px; font-size:26px; font-weight:300; letter-spacing:.03em; }
.lagemarke { font-family:var(--fest); font-size:9.5px; letter-spacing:.1em;
             text-transform:uppercase; border:1px solid var(--linie);
             padding:1px 6px; border-radius:8px; margin-left:4px; }
.lagemarke.rot { color:#E5A093; border-color:rgba(180,64,47,.5); }
.lagemarke.gelb { color:var(--ocker); border-color:rgba(217,164,65,.45); }
.blaettern { display:flex; justify-content:space-between; gap:20px; margin-top:44px;
             padding-top:20px; border-top:1px solid var(--linie); font-size:14px; }

/* ---------- Werkzeug ---------- */
.werkzeugleiste { display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap;
                  margin-bottom:22px; }
.werkzeugleiste label { font-family:var(--fest); font-size:10px; letter-spacing:.12em;
                        text-transform:uppercase; color:var(--leise); }
.werkzeugleiste input {
  display:block; margin-top:5px; background:var(--abgrund);
  border:1px solid var(--linie); color:var(--text); font-family:var(--fest);
  font-size:14px; padding:7px 10px; border-radius:3px; width:120px;
}
.werkzeugleiste input:focus { outline:none; border-color:var(--gruen); }
.werkzeugleiste label.weit input { width:320px; font-family:var(--lauf); }

.lagetafel { display:flex; gap:34px; align-items:center; flex-wrap:wrap;
             background:var(--abgrund); border:1px solid var(--linie);
             padding:20px 24px; border-radius:3px; }
.lagetafel h3 { margin:0 0 4px; font-size:22px; font-weight:300; letter-spacing:.04em; }
.lagetafel p { margin:0; color:var(--leise); font-size:14px; }
.lagetafel .zahlen { display:grid; grid-template-columns:auto auto; gap:4px 16px;
                     margin:0; margin-left:auto; font-size:13.5px; }
.lagetafel .zahlen dt { font-family:var(--fest); font-size:9.5px; letter-spacing:.1em;
                        text-transform:uppercase; color:var(--leise); padding-top:2px; }
.lagetafel .zahlen dd { margin:0; text-align:right; }

.zyklusband { display:flex; gap:1px; height:26px; background:var(--abgrund);
              border:1px solid var(--linie); padding:2px; border-radius:3px;
              margin-bottom:8px; }
.zyklusband .strich { flex:1; background:var(--hoch); min-width:1px; }
.zyklusband .strich:hover { outline:1px solid var(--text); }
.zyklusband .strich.gelb { background:var(--ocker); }
.zyklusband .strich.rot { background:var(--rost); }
.zyklusband .strich.beide { background:linear-gradient(180deg,var(--rost) 50%,var(--ocker) 50%); }
.zyklusband .strich.jetzt { background:var(--text); }
.legende { font-size:12px; color:var(--leise); display:flex; gap:16px; align-items:center; }
.punkt { display:inline-block; width:10px; height:10px; border-radius:2px;
         margin-right:5px; vertical-align:-1px; }
.punkt.rot { background:var(--rost); }
.punkt.gelb { background:var(--ocker); }
.punkt.beide { background:linear-gradient(180deg,var(--rost) 50%,var(--ocker) 50%); }

table.schlicht { width:100%; border-collapse:collapse; font-size:14px; }
table.schlicht th { text-align:left; font-family:var(--fest); font-size:10px;
                    letter-spacing:.1em; text-transform:uppercase; color:var(--leise);
                    border-bottom:1px solid var(--linie); padding:6px 12px 6px 0;
                    font-weight:400; }
table.schlicht td { padding:7px 12px 7px 0;
                    border-bottom:1px solid rgba(35,71,78,.45); vertical-align:top; }
table.schlicht td.zahl { font-family:var(--fest); font-size:13px; color:var(--gruen);
                         white-space:nowrap; }
table.schlicht tr.jetzt td { background:rgba(121,179,79,.08); }

.wurf { background:var(--abgrund); border:1px solid var(--linie);
        border-left:3px solid var(--ocker); padding:22px 26px; border-radius:3px; }
.wurfkopf { display:flex; justify-content:space-between; align-items:baseline;
            margin-bottom:10px; }
.wurfkopf .nr { font-family:var(--fest); font-size:10.5px; letter-spacing:.14em;
                text-transform:uppercase; color:var(--leise); }
.wurf h3 { margin:0 0 6px; font-size:25px; font-weight:300; letter-spacing:.03em; }
.staerke { font-family:var(--fest); font-size:11px; letter-spacing:.14em;
           text-transform:uppercase; margin-bottom:18px; color:var(--leise); }
.staerke.stufe2 { color:var(--ocker); }
.staerke.stufe3 { color:#E08A4A; }
.staerke.stufe4 { color:var(--rost); }
.wurfliste { display:grid; grid-template-columns:auto 1fr; gap:9px 20px; margin:0; }
.wurfliste dt { font-family:var(--fest); font-size:9.5px; letter-spacing:.12em;
                text-transform:uppercase; color:var(--leise); padding-top:3px;
                white-space:nowrap; }
.wurfliste dd { margin:0; }
.wurfliste .zeichen { font-style:italic; color:#C0D4D1; }
.kollision { margin-top:20px; padding:11px 15px; background:rgba(180,64,47,.14);
             border:1px solid rgba(180,64,47,.5); border-radius:3px;
             font-size:13.5px; color:#F0C4BC; }

.ausklapp { margin-top:26px; border-top:1px solid var(--linie); padding-top:14px; }
.ausklapp summary { cursor:pointer; font-family:var(--fest); font-size:11px;
                    letter-spacing:.12em; text-transform:uppercase; color:var(--leise); }
.ausklapp summary:hover { color:var(--gruen); }
.ausklapp table { margin-top:16px; }

/* ---------- Suche ---------- */
.fundliste { list-style:none; margin:0; padding:0; }
.fundliste li { padding:12px 0; border-bottom:1px solid rgba(35,71,78,.5); }
.fundliste li > a { font-family:var(--anzeige); font-size:16.5px; }
.fundliste .stelle { margin:5px 0 0; font-size:13.5px; color:#A9C2BF; line-height:1.6; }

/* ---------- Fuß ---------- */
footer.unten { margin-top:44px; padding-top:18px; border-top:1px solid var(--linie);
               display:flex; gap:18px; font-size:12.5px; color:var(--leise); }

/* ---------- Stammbaum ---------- */
.baumfeld { overflow-x:auto; padding:6px 0 12px; }
svg.stammbaum { display:block; min-width:100%; }
svg.stammbaum .ast { fill:none; stroke:var(--linie); stroke-width:1.5; }
svg.stammbaum .ehe { stroke:var(--linie); stroke-width:1.5; }
svg.stammbaum .person rect { fill:var(--abgrund); stroke:var(--linie); stroke-width:1; }
svg.stammbaum .person:hover rect { stroke:var(--gruen); }
svg.stammbaum .person .ton { stroke:none; }
svg.stammbaum .person.hervor rect { fill:var(--hoch); stroke:var(--gruen); stroke-width:2; }
/* Verstorbene: gestrichelter Rand, blasser — das Kreuz steht am Namen. */
svg.stammbaum .person.tot rect { stroke-dasharray:3 3; }
svg.stammbaum .person.tot .nam,
svg.stammbaum .person.tot .zus { opacity:.62; }
svg.stammbaum .nam { fill:var(--text); font-family:var(--anzeige); font-size:14.5px; }
svg.stammbaum .zus { fill:var(--leise); font-family:var(--fest); font-size:9.5px;
                     letter-spacing:.06em; }
svg.stammbaum a { text-decoration:none; cursor:pointer; }

.sippe { margin-top:34px; padding-top:22px; border-top:1px solid var(--linie); }
.sippe h3 { font-family:var(--fest); font-size:10.5px; letter-spacing:.13em;
            text-transform:uppercase; color:var(--leise); margin:0 0 12px; }
.sippenliste { list-style:none; margin:0 0 20px; padding:0;
               display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
               gap:5px 18px; font-size:14px; }
.sippenliste li { display:flex; gap:8px; align-items:baseline; }
.sippenliste .wie { font-family:var(--fest); font-size:9.5px; letter-spacing:.1em;
                    text-transform:uppercase; color:var(--leise); min-width:92px; }

fieldset.verwandtschaft { border:1px solid var(--linie); border-radius:3px;
                          padding:16px 18px 6px; margin:0 0 20px; }
fieldset.verwandtschaft legend { font-family:var(--fest); font-size:10px;
                                 letter-spacing:.13em; text-transform:uppercase;
                                 color:var(--gruen); padding:0 7px; }
fieldset.verwandtschaft .leise { margin:0 0 14px; }
.formular label .wozu { display:block; margin-top:4px; font-family:var(--lauf);
                        font-size:12px; letter-spacing:normal; text-transform:none;
                        color:var(--leise); }
.marken.weit { gap:7px; }
.marken.weit .marke { font-size:12px; padding:4px 10px; }

/* ---------- Ankreuzfelder (Fraktion, verstorben) ----------
   Auf dem Handy ist eine Mehrfachliste im Auswahlfeld kaum zu
   treffen. Deshalb Kaestchen, gross genug fuer einen Daumen. */
fieldset.ankreuz { border:1px solid var(--linie); border-radius:3px;
                   padding:14px 18px 16px; margin:0 0 20px; }
fieldset.ankreuz.breit { grid-column:1 / -1; }
fieldset.ankreuz legend { font-family:var(--fest); font-size:10px;
                          letter-spacing:.13em; text-transform:uppercase;
                          color:var(--gruen); padding:0 7px; }
fieldset.ankreuz legend .wozu { font-family:var(--lauf); font-size:12px;
                                letter-spacing:normal; text-transform:none;
                                color:var(--leise); margin-left:8px; }
.kaestchen { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
             gap:2px 14px; }
.kaestchen-eins { display:flex; align-items:center; gap:9px;
                  padding:7px 8px; border-radius:3px; cursor:pointer;
                  font-family:var(--lauf); font-size:14.5px; }
.kaestchen-eins:hover { background:var(--tief); }
.kaestchen-eins input { width:17px; height:17px; accent-color:var(--gruen);
                        flex:none; margin:0; }
.gruppe { font-family:var(--fest); font-size:10px; letter-spacing:.13em;
          text-transform:uppercase; color:var(--leise);
          margin:12px 0 3px; border-bottom:1px solid var(--linie);
          padding-bottom:4px; }
.gruppe:first-of-type { margin-top:0; }

label.janein { display:flex; align-items:center; gap:9px; align-self:end;
               padding:9px 0; flex-wrap:wrap; }
label.janein input { width:17px; height:17px; accent-color:var(--rost);
                     flex:none; margin:0; }
label.janein .wozu { flex-basis:100%; margin:0; }

/* ---------- Umrechnung neben den Altersfeldern ---------- */
.umgerechnet { display:block; margin-top:5px; font-family:var(--fest);
               font-size:11.5px; color:var(--ocker); min-height:1.2em; }
.umgerechnet:empty { display:none; }

/* ---------- verstorben ---------- */
.kasten.tot { opacity:.72; }
.kasten.tot .name::after { content:' †'; color:var(--rost); }

/* ---------- Welt: die Abschnitte ----------
   Der Ändern-Knopf sitzt neben der Überschrift und erscheint
   erst beim Überfahren, damit er den Lesefluss nicht stört. */
.weltteil { scroll-margin-top:80px; }
.weltteil + .weltteil { margin-top:34px; padding-top:30px;
                        border-top:1px solid var(--linie); }
.weltteilkopf { display:flex; align-items:baseline; justify-content:space-between;
                gap:16px; }
.weltteilkopf h2 { margin:0 0 6px; }
.weltteilkopf h2 a { color:var(--text); }
.weltteilkopf h2 a:hover { color:var(--blau); text-decoration:none; }
.weltteilkopf .knopf { opacity:0; transition:opacity .12s; flex:none; }
.weltteil:hover .weltteilkopf .knopf,
.weltteilkopf .knopf:focus { opacity:1; }
@media (hover:none) { .weltteilkopf .knopf { opacity:1; } }
.knopf.klein { font-size:11px; padding:4px 10px; }

.blaettern { display:flex; justify-content:space-between; gap:16px;
             margin-top:34px; padding-top:18px;
             border-top:1px solid var(--linie); font-family:var(--anzeige); }