/* Farbsystem — eine Datei, alle Seiten. Der Nutzer waehlt, nichts ist fest verdrahtet. */
:root{
  --h:150;                     /* Farbton, wird per Schalter gesetzt */
  --s:78%;
  --l:52%;
  --signal:hsl(var(--h) var(--s) var(--l));
  --signal-tief:hsl(var(--h) var(--s) 32%);
  --signal-hell:hsl(var(--h) var(--s) 92%);
  --grund:hsl(var(--h) 8% 5%);
  --flaeche:hsl(var(--h) 10% 8%);
  --kante:hsl(var(--h) 10% 16%);
  --text:hsl(var(--h) 10% 94%);
  --leise:hsl(var(--h) 8% 62%);
}
[data-modus="papier"]{
  --grund:hsl(var(--h) 22% 96%);
  --flaeche:#fffdf8;
  --kante:hsl(var(--h) 14% 86%);
  --text:hsl(var(--h) 24% 10%);
  --leise:hsl(var(--h) 10% 42%);
  --signal-tief:hsl(var(--h) var(--s) 30%);
}
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased}
body{
  margin:0;background:var(--grund);color:var(--text);
  font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.65;
}
.huelle{max-width:1080px;margin:0 auto;padding:0 32px}
a{color:var(--signal)}
h1,h2,h3{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-weight:400;letter-spacing:-.02em}
h1{font-size:60px;line-height:1.04;margin:0 0 24px;max-width:20ch}
h2{font-size:34px;line-height:1.16;margin:0 0 32px;max-width:28ch}
p{margin:0 0 18px}
.lead{font-size:20px;line-height:1.6;color:var(--leise);max-width:56ch}

header{border-bottom:1px solid var(--kante)}
header .huelle{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
.marke{font-size:18px;letter-spacing:-.01em;font-weight:600}
.marke i{font-style:normal;color:var(--signal)}
nav{display:flex;gap:26px;align-items:center;font-size:14.5px}
nav a{color:var(--text);text-decoration:none;opacity:.72}
nav a:hover{opacity:1}

.knopf{display:inline-block;background:var(--signal);color:hsl(var(--h) 40% 6%);text-decoration:none;
  padding:13px 22px;border-radius:3px;font-size:15px;font-weight:600;border:0;cursor:pointer;font-family:inherit}
.knopf.leer{background:transparent;color:var(--text);border:1px solid var(--kante);font-weight:400}

/* Farbschalter */
.schalter{display:flex;gap:9px;align-items:center}
.schalter::before{content:"Farbe";font-size:12px;letter-spacing:.04em;color:var(--leise);margin-right:2px}
.punkt{width:24px;height:24px;border-radius:50%;border:1px solid rgba(128,128,128,.35);cursor:pointer;padding:0}
.punkt[aria-pressed="true"]{outline:2px solid var(--text);outline-offset:3px;transform:scale(1.06)}
.frei{width:24px;height:24px;border-radius:50%;border:1px solid var(--kante);cursor:pointer;padding:0;overflow:hidden;
  background:conic-gradient(#f44,#fa4,#ff4,#4f4,#4ff,#44f,#f4f,#f44)}
.frei::-webkit-color-swatch-wrapper{padding:0}
.frei::-webkit-color-swatch{border:0;opacity:0}

section{padding:78px 0}
.marke-zeile{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--signal);margin:0 0 20px;font-weight:600}

.liste{border-top:1px solid var(--kante)}
.zeile{display:grid;grid-template-columns:56px 1fr 260px;gap:26px;padding:24px 0;border-bottom:1px solid var(--kante);align-items:baseline}
.zeile .nr{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;color:var(--leise)}
.zeile h3{font-size:18px;margin:0 0 5px;font-weight:600;font-family:inherit;letter-spacing:0}
.zeile p{margin:0;color:var(--leise);font-size:15.5px}
.zeile .beleg{font-size:13.5px;color:var(--leise)}

.kasten{border:1px solid var(--kante);background:var(--flaeche);padding:26px}
footer{border-top:1px solid var(--kante);padding:30px 0 50px;font-size:13.5px;color:var(--leise)}
footer .huelle{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
footer a{color:var(--leise)}

@media (max-width:860px){
  h1{font-size:38px} h2{font-size:28px}
  .zeile{grid-template-columns:36px 1fr;gap:12px}
  .zeile .beleg{grid-column:2}
  section{padding:54px 0}
  nav{gap:14px;font-size:13px}
  .schalter{display:none}
}