:root{
  --papier:#FAF9F5;
  --papier-tief:#F2F0E9;
  --tinte:#16181C;
  --tinte-leise:#5C5F66;
  --linie:#DCD8CE;
  --notenlinie:#B9B3A5;
  --siegel:#9E2B25;
  --serif:"Source Serif 4",Charter,"Bitstream Charter","Iowan Old Style",Georgia,serif;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --papier:#101215;
    --papier-tief:#171A1E;
    --tinte:#E8E6E1;
    --tinte-leise:#9A9DA4;
    --linie:#2A2E34;
    --notenlinie:#4A5058;
    --siegel:#CB6259;
  }
}
:root[data-theme="dark"]{
  --papier:#101215; --papier-tief:#171A1E; --tinte:#E8E6E1;
  --tinte-leise:#9A9DA4; --linie:#2A2E34; --notenlinie:#4A5058; --siegel:#CB6259;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papier); color:var(--tinte);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
a{color:inherit}

.bahn{width:100%; max-width:74rem; margin:0 auto; padding:0 clamp(1.25rem,5vw,3rem)}
.schmal{max-width:38rem}

/* ── Kopf ───────────────────────────────────────── */
.kopf{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:1.75rem}
.wortmarke{
  font-family:var(--serif); font-weight:600; font-size:1.15rem;
  letter-spacing:.18em; text-transform:uppercase; text-decoration:none;
}
.sprachen{display:flex; gap:.15rem; font-size:.82rem; letter-spacing:.06em}
.sprachen a{
  text-decoration:none; padding:.3rem .6rem; border-radius:2px;
  color:var(--tinte-leise); text-transform:uppercase;
}
.sprachen a[aria-current]{color:var(--papier); background:var(--tinte)}
.sprachen a:not([aria-current]):hover{color:var(--tinte); background:var(--papier-tief)}

/* ── Notenlinien als Motiv ───────────────────────── */
.system{display:block; width:100%; height:auto; color:var(--notenlinie)}
.trenner{margin:clamp(2.5rem,6vw,4.5rem) 0; color:var(--linie)}
.trenner svg{display:block; width:100%; height:22px}

/* ── Aufmacher ──────────────────────────────────── */
.aufmacher{padding-block:clamp(1rem,4vw,2.5rem) clamp(2.5rem,6vw,4rem)}
h1{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(2.6rem,8vw,5.5rem); line-height:1.02;
  letter-spacing:.01em; margin:0 0 1.5rem; text-wrap:balance;
}
.versprechen{
  font-family:var(--serif); font-size:clamp(1.25rem,2.6vw,1.7rem);
  line-height:1.45; max-width:34ch; margin:0 0 2rem; text-wrap:balance;
}
.versprechen em{font-style:normal; color:var(--siegel)}
.notenbild{margin:clamp(2rem,5vw,3.5rem) 0 0; max-width:44rem}

/* ── Etiketten & Überschriften ──────────────────── */
.etikett{
  font-size:.72rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--siegel); margin:0 0 1rem;
}
h2{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.7rem,3.6vw,2.5rem); line-height:1.15;
  margin:0 0 1.25rem; text-wrap:balance;
}
h3{
  font-family:var(--serif); font-weight:600; font-size:1.35rem;
  line-height:1.25; margin:0 0 .55rem;
}
p{margin:0 0 1.1rem; max-width:62ch}
.leise{color:var(--tinte-leise)}

/* ── Zwei Wege ──────────────────────────────────── */
.wege{display:grid; gap:clamp(2rem,5vw,3.5rem); grid-template-columns:1fr}
@media (min-width:52rem){.wege{grid-template-columns:1fr 1fr; gap:4rem}}
.weg{display:flex; flex-direction:column; gap:.15rem}
.weg .zeichen{color:var(--siegel); margin-bottom:1rem}
.weg p{margin-bottom:0}

/* ── Was daraus wird ────────────────────────────── */
.koennen{list-style:none; padding:0; margin:0; display:grid; gap:0}
.koennen li{
  display:grid; gap:.2rem .5rem; grid-template-columns:1fr;
  padding:1.15rem 0; border-top:1px solid var(--linie);
}
.koennen li:last-child{border-bottom:1px solid var(--linie)}
@media (min-width:44rem){
  .koennen li{grid-template-columns:14rem 1fr; gap:2rem; align-items:baseline}
}
.koennen b{font-family:var(--serif); font-weight:600; font-size:1.1rem}
.koennen span{color:var(--tinte-leise); max-width:56ch}

/* ── Messung ────────────────────────────────────── */
.messung{
  display:grid; gap:1px; background:var(--linie);
  border:1px solid var(--linie); margin:2rem 0 1.5rem;
  grid-template-columns:1fr;
}
@media (min-width:36rem){.messung{grid-template-columns:repeat(3,1fr)}}
.messwert{background:var(--papier); padding:1.35rem 1.5rem}
.messwert .zahl{
  font-family:var(--serif); font-size:2.4rem; line-height:1;
  font-variant-numeric:tabular-nums; display:block; margin-bottom:.35rem;
}
.messwert .was{font-size:.85rem; color:var(--tinte-leise); letter-spacing:.02em}

/* ── Kostenlos ──────────────────────────────────── */
.kostenlos{background:var(--papier-tief); padding:clamp(2.5rem,6vw,4rem) 0; margin-top:0}
.kostenlos .satz{
  font-family:var(--serif); font-size:clamp(1.35rem,3vw,2rem);
  line-height:1.35; max-width:30ch; margin:0 0 1.5rem; text-wrap:balance;
}

/* ── Stand ──────────────────────────────────────── */
.geraete{display:flex; flex-wrap:wrap; gap:.5rem; margin:1.5rem 0 0; padding:0; list-style:none}
.geraete li{
  border:1px solid var(--linie); padding:.4rem .85rem; border-radius:2px;
  font-size:.88rem; color:var(--tinte-leise);
}

/* ── Fuß ────────────────────────────────────────── */
.fuss{
  border-top:1px solid var(--linie); margin-top:clamp(3.5rem,8vw,6rem);
  padding-block:2rem 3.5rem; font-size:.88rem; color:var(--tinte-leise);
  display:flex; flex-wrap:wrap; gap:.75rem 2rem; justify-content:space-between;
}
.fuss a{color:var(--tinte-leise)}

@media (prefers-reduced-motion:no-preference){
  .kopfnote{animation:heben 2.4s ease-out both}
  @keyframes heben{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
}