/* Farben und Schriftgrade stammen aus den Design-Tokens des Produkts. */
:root {
  --papier:#fcfaf5; --flaeche:#ffffff; --linie:#efe5d0;
  --tinte:#241b12; --tinte-2:#46372a; --tinte-3:#5d4b3a;
  --rot:#b81f28; --oliv:#616f3e; --gold:#c69c3b;
  --rund:4px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --papier:#12100c; --flaeche:#1e1912; --linie:#332a20;
    --tinte:#f7f1e6; --tinte-2:#d7cbb5; --tinte-3:#b0a189;
    --rot:#de554f; --oliv:#a0ad6f; --gold:#d9b355;
  }
}
* { box-sizing:border-box; }
body {
  margin:0; padding:2.5rem 1.5rem; background:var(--papier); color:var(--tinte);
  font:16px/1.65 ui-sans-serif,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.blatt { max-width:44rem; margin:0 auto; }
.kopf { display:flex; align-items:center; gap:.85rem; margin-bottom:2rem; }
.kopf svg { width:34px; height:34px; color:var(--tinte); flex:none; }
h1 { font-size:1.4rem; margin:0; font-weight:640; letter-spacing:-.01em; }
.unter { color:var(--tinte-3); font-size:.9rem; margin:.15rem 0 0; }
h2 { font-size:.78rem; text-transform:uppercase; letter-spacing:.09em;
     color:var(--tinte-3); margin:2.2rem 0 .7rem; font-weight:620; }
p { color:var(--tinte-2); margin:0 0 1rem; }
ul { list-style:none; padding:0; margin:0; }
li { display:flex; gap:.7rem; padding:.6rem 0; border-bottom:1px solid var(--linie);
     align-items:baseline; }
li:last-child { border-bottom:0; }
.punkt { width:.5rem; height:.5rem; border-radius:50%; flex:none;
         transform:translateY(-.1rem); }
.ja  { background:var(--oliv); }
.nein{ background:var(--gold); }
.was { flex:1; }
.wie { color:var(--tinte-3); font-size:.85rem; text-align:right; }
blockquote { margin:2rem 0 0; padding:1rem 1.15rem; background:var(--flaeche);
             border:1px solid var(--linie); border-left:3px solid var(--rot);
             border-radius:var(--rund); }
blockquote p { margin:0 0 .35rem; color:var(--tinte-2); }
blockquote p:last-child { margin:0; }
footer { margin-top:2.5rem; padding-top:1.1rem; border-top:1px solid var(--linie);
         color:var(--tinte-3); font-size:.82rem; }
@media (max-width:34rem) {
  li { flex-wrap:wrap; gap:.4rem .7rem; }
  .was { flex:1 1 auto; }
  .wie { flex:1 1 100%; text-align:left; padding-left:1.2rem; }
}
