:root{
  --bg:#fbfaf8; --fg:#1c1b19; --muted:#5d5a54; --line:#e3ded6;
  --akzent:#1b5e57; --akzent-hell:#e8f2f0; --warn:#8a5a00;
  --max:44rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:400 1.0625rem/1.7 ui-serif,Georgia,"Iowan Old Style",serif;
}
.wrap{max-width:var(--max); margin:0 auto; padding:0 1.25rem}
a{color:var(--akzent); text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}

header.top{border-bottom:1px solid var(--line); background:#fff}
header.top .wrap{display:flex; align-items:baseline; gap:1.5rem;
  padding-top:1.1rem; padding-bottom:1.1rem; flex-wrap:wrap}
.marke{font-weight:700; font-size:1.2rem; letter-spacing:-.01em;
  color:var(--fg); text-decoration:none}
.marke span{color:var(--akzent)}
nav.haupt{margin-left:auto; display:flex; gap:1.25rem;
  font-family:system-ui,sans-serif; font-size:.9rem}
nav.haupt a{color:var(--muted); text-decoration:none}
nav.haupt a:hover{color:var(--akzent); text-decoration:underline}

main{padding:2.75rem 0 3.5rem}
h1{font-size:2rem; line-height:1.22; letter-spacing:-.02em; margin:0 0 .6rem}
h2{font-size:1.35rem; line-height:1.3; margin:2.5rem 0 .7rem; letter-spacing:-.01em}
h3{font-size:1.08rem; margin:1.8rem 0 .4rem}
p{margin:0 0 1.05rem}
ul,ol{margin:0 0 1.05rem; padding-left:1.3rem}
li{margin:.3rem 0}
.lead{font-size:1.16rem; color:var(--muted); margin-bottom:1.8rem}

.kasten{background:var(--akzent-hell); border-left:3px solid var(--akzent);
  padding:1rem 1.15rem; margin:1.6rem 0; border-radius:0 4px 4px 0}
.kasten p:last-child{margin-bottom:0}
.kasten strong{color:var(--akzent)}

table{border-collapse:collapse; width:100%; margin:1.4rem 0;
  font-family:system-ui,sans-serif; font-size:.93rem}
th,td{border-bottom:1px solid var(--line); padding:.6rem .5rem;
  text-align:left; vertical-align:top}
th{font-weight:600; color:var(--muted); font-size:.82rem;
  text-transform:uppercase; letter-spacing:.04em}

.karten{display:grid; gap:1rem; margin:1.8rem 0;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.karte{background:#fff; border:1px solid var(--line); border-radius:6px;
  padding:1.1rem 1.2rem}
.karte h3{margin:0 0 .35rem; font-size:1.02rem}
.karte h3 a{text-decoration:none}
.karte p{margin:0; font-size:.95rem; color:var(--muted)}

.meta{font-family:system-ui,sans-serif; font-size:.82rem;
  color:var(--muted); margin:0 0 2rem}

footer.fuss{border-top:1px solid var(--line); background:#fff;
  padding:1.8rem 0; margin-top:3rem;
  font-family:system-ui,sans-serif; font-size:.85rem; color:var(--muted)}
footer.fuss nav{display:flex; gap:1.1rem; flex-wrap:wrap; margin-bottom:.8rem}
footer.fuss a{color:var(--muted)}
.hinweis-ki{font-size:.8rem; line-height:1.55; margin:0}

@media(max-width:34rem){
  h1{font-size:1.6rem} .lead{font-size:1.06rem}
  nav.haupt{margin-left:0; width:100%; gap:1rem}
}
@media(prefers-color-scheme:dark){
  :root{--bg:#161614; --fg:#eae7e1; --muted:#a8a29a; --line:#33302c;
        --akzent:#6ec4b6; --akzent-hell:#1d2a28}
  header.top,footer.fuss,.karte{background:#1c1b19}
  .marke{color:var(--fg)}
}