:root{
  --paper:#FCFBF9;
  --ink:#24424C;
  --ink-soft:#4A6169;
  --muted:#7A8A8E;
  --accent:#3E7462;
  --line:#DCDCD6;
  --hair:#E7E6E0;
  --flag-bg:#F0F4F1;
  --flag-ink:#2F5A4B;
  --font-display:"Avenir Next","Avenir","Futura","Century Gothic","Segoe UI",system-ui,sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif;
  --measure:63ch;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#141B1E;
    --ink:#E7EDEC;
    --ink-soft:#BAC8C9;
    --muted:#8FA0A3;
    --accent:#7CAF94;
    --line:#2C383C;
    --hair:#232E32;
    --flag-bg:#1D2B26;
    --flag-ink:#9CCBB2;
  }
}
:root[data-theme="dark"]{
  --paper:#141B1E;
  --ink:#E7EDEC;
  --ink-soft:#BAC8C9;
  --muted:#8FA0A3;
  --accent:#7CAF94;
  --line:#2C383C;
  --hair:#232E32;
  --flag-bg:#1D2B26;
  --flag-ink:#9CCBB2;
}

*{box-sizing:border-box;}
html,body{margin:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
  min-height:100%;
}
.sheet{
  width:100%;
  max-width:920px;
  margin:0 auto;
  padding-inline:24px;
}

/* ---- Entwurfshinweis (nur Vorschau) ---- */
.draftbar{
  background:var(--flag-bg);
  color:var(--flag-ink);
  border-bottom:1px solid var(--line);
  font-size:12.5px;
  letter-spacing:.02em;
}
.draftbar .sheet{padding-block:9px;}

/* ---- Kopf ---- */
header.head .sheet{
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  padding-block:34px 0;
}
.brand img{display:block;width:132px;height:auto;max-width:100%;}
.brand .dark{display:none;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .brand .light{display:none;}
  :root:not([data-theme="light"]) .brand .dark{display:block;}
}
:root[data-theme="dark"] .brand .light{display:none;}
:root[data-theme="dark"] .brand .dark{display:block;}

main{flex:1 0 auto;}

/* ---- Startseite ---- */
.lead-block{padding-block:92px 0;max-width:var(--measure);}
h1{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(26px,3.9vw,36px);
  line-height:1.2;
  letter-spacing:-.005em;
  margin:0 0 26px;
  text-wrap:balance;
}
.mail{
  font-size:clamp(17px,2.1vw,20px);
  margin:0;
}
.mail a{
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--accent);
  padding-bottom:2px;
  word-break:break-word;
}
.mail a:hover{color:var(--accent);}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;}

.jump{
  margin-block:64px 0;
  padding-top:22px;
  border-top:1px solid var(--line);
  max-width:var(--measure);
  font-size:13.5px;
  display:flex;
  flex-wrap:wrap;
  gap:8px 22px;
}
.jump a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--hair);}
.jump a:hover{color:var(--accent);border-bottom-color:var(--accent);}

/* ---- Unterseiten ---- */
.back{
  display:inline-block;
  margin-block:44px 0;
  font-size:13px;
  letter-spacing:.02em;
  color:var(--muted);
  text-decoration:none;
  border-bottom:1px solid var(--hair);
}
.back:hover{color:var(--accent);border-bottom-color:var(--accent);}
section.legal{padding-block:34px 0;max-width:var(--measure);}
section.legal > h1{font-size:clamp(24px,3.4vw,30px);margin:0 0 6px;}
.rule{height:1px;background:var(--accent);margin:0 0 30px;max-width:72px;}
h2{
  font-family:var(--font-display);
  font-weight:600;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.13em;
  color:var(--accent);
  margin:32px 0 8px;
}
section.legal p{margin:0 0 12px;font-size:15px;line-height:1.7;color:var(--ink-soft);}
section.legal ul{margin:0 0 12px;padding-left:20px;font-size:15px;line-height:1.7;color:var(--ink-soft);}
section.legal li{margin-bottom:4px;}
section.legal a{color:var(--ink-soft);}
.block{margin:0 0 16px;font-size:15px;line-height:1.75;color:var(--ink-soft);}
.block .name{color:var(--ink);font-weight:600;}

.tbd{
  background:var(--flag-bg);
  color:var(--flag-ink);
  padding:1px 6px;
  border-radius:3px;
  border-bottom:1px dashed currentColor;
  font-size:.94em;
}

/* ---- Fußzeile wie Briefpapier ---- */
footer{
  flex-shrink:0;
  margin-top:96px;
  border-top:1px solid var(--line);
}
footer .sheet{padding-block:18px 44px;}
.fineprint{
  font-size:11.5px;
  line-height:1.9;
  color:var(--muted);
  letter-spacing:.01em;
  margin:0;
}
.fineprint b{color:var(--ink-soft);font-weight:600;}
.fineprint a{color:inherit;text-decoration:none;border-bottom:1px solid var(--hair);}
.fineprint a:hover{color:var(--accent);}
.sep{opacity:.5;padding:0 4px;}

@media print{ .draftbar{display:none;} body{background:#fff;} }