/* Rechtsseiten der Abo-Firma — bewusst eine einzige, kleine Datei.
   Keine Schriften von aussen, kein JavaScript: Rechtstexte müssen auch dann
   lesbar sein, wenn sonst nichts lädt. */

:root{
  --dark:#1e1b16;
  --text:#33302a;
  --grau:#6f6a61;
  --linie:#e2ddd3;
  --akzent:#8a6d3b;
  --warn-bg:#fdf3e3;
  --warn-rand:#e8cf9e;
  --warn-text:#7a5518;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--text);
  background:#faf8f4;
  line-height:1.65;
  font-size:17px;
}

header{
  background:var(--dark);
  color:#efe9df;
  padding:1.1rem 1.2rem;
}
header a{color:#efe9df;text-decoration:none;font-weight:600}
header nav{margin-top:.5rem;display:flex;gap:.2rem;flex-wrap:wrap}
header nav a{
  font-weight:400;font-size:.88rem;padding:.35rem .7rem;
  border-radius:20px;color:#c9c1b3;
}
header nav a.on{background:rgba(255,255,255,.13);color:#fff}

main{max-width:47rem;margin:0 auto;padding:1.6rem 1.2rem 4rem}

h1{font-size:1.5rem;line-height:1.3;margin:.6rem 0 .4rem}
h2{font-size:1.08rem;margin:2rem 0 .5rem;padding-top:1rem;border-top:1px solid var(--linie)}
h3{font-size:.98rem;margin:1.3rem 0 .3rem}
p,li{max-width:42rem}
ul,ol{padding-left:1.3rem}
li{margin:.25rem 0}

.stand{color:var(--grau);font-size:.85rem;margin:0 0 1.4rem}

.entwurf{
  background:var(--warn-bg);
  border:1px solid var(--warn-rand);
  color:var(--warn-text);
  border-radius:9px;
  padding:.9rem 1.1rem;
  margin:0 0 1.6rem;
  font-size:.9rem;
}
.entwurf b{display:block;margin-bottom:.2rem}

.luecke{
  background:#efe9df;
  border-bottom:2px solid var(--akzent);
  padding:0 .25rem;
  font-weight:600;
  white-space:nowrap;
}

table{border-collapse:collapse;width:100%;margin:.8rem 0;font-size:.92rem}
th,td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--linie);vertical-align:top}
th{background:#f2eee7;font-size:.8rem;text-transform:uppercase;letter-spacing:.03em;color:var(--grau)}

.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.9rem;margin:1.4rem 0}
.karte{
  background:#fff;border:1px solid var(--linie);border-radius:10px;
  padding:1rem 1.1rem;text-decoration:none;color:inherit;display:block;
}
.karte:hover{border-color:var(--akzent)}
.karte b{display:block;font-size:1rem;margin-bottom:.25rem}
.karte span{font-size:.87rem;color:var(--grau);line-height:1.5}

footer{
  border-top:1px solid var(--linie);
  margin-top:3rem;padding-top:1.2rem;
  font-size:.85rem;color:var(--grau);
}
footer a{color:var(--akzent)}

@media (prefers-color-scheme:dark){
  :root{--text:#ddd7cc;--grau:#9a9287;--linie:#3a352d}
  body{background:#16140f;color:var(--text)}
  th{background:#221f19}
  .karte{background:#1e1b16}
  .luecke{background:#332d22}
  .entwurf{background:#2a2216;border-color:#5a4622;color:#e6c98c}
}