/* ============================================================
   sellgrad.ch — Stilbasis der Unterseiten (Impressum, Datenschutz)

   Die Startseite ist bewusst eine einzige Datei: sie soll in einem
   Request stehen. Für die Unterseiten wäre dasselbe Verfahren teuer —
   die beiden eingebetteten Schriften wiegen als Base64 rund 100 KB
   und müssten je Seite erneut mitgeliefert werden. Hier liegen sie
   deshalb als eigene Dateien daneben: gleiche Herkunft, kein fremder
   Host, und der Browser lädt sie nur einmal für beide Seiten.

   Farben und Masse sind aus index.html übernommen. Ändert sich dort
   etwas Grundlegendes, gehört es auch hierher.
   ============================================================ */

/* ---------- Schriften ---------- */
@font-face{
  font-family:"Inter Tight";
  src:url(inter-tight.woff2) format("woff2");
  font-weight:400 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url(jetbrains-mono.woff2) format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
}

/* ---------- Tokens ----------
   Der Akzent ist je Thema eigens gesetzt: ein einziger Wert schafft
   die 4.5:1 nicht gleichzeitig gegen Fast-Schwarz und gegen Knochen. */
:root{
  --bg:#efede8; --bg-2:#f7f6f3; --bg-3:#e4e1da;
  --fg:#101114; --dim:#5a5e66; --dim-2:#5f636b;
  --line:rgba(16,17,20,.15); --line-2:rgba(16,17,20,.3); --feld:#6f737b;
  --accent:#1b34d6; --accent-ink:#efede8; --accent-soft:rgba(27,52,214,.09);
  --warn:#a8401b;

  --display:"Inter Tight",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.2,1,.25,1);
  --maxw:1420px;
  --pad:clamp(18px,4vw,64px);
  --bar:26px;
}
html[data-theme="dark"]{
  --bg:#0b0c0f; --bg-2:#121419; --bg-3:#171a20;
  --fg:#e9e7e2; --dim:#9298a3; --dim-2:#828892;
  --line:rgba(233,231,226,.14); --line-2:rgba(233,231,226,.3); --feld:#7b818b;
  --accent:#7d97ff; --accent-ink:#0b0c0f; --accent-soft:rgba(125,151,255,.13);
  --warn:#ff8a5b;
}

/* ---------- Grundlage ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--display);font-size:17px;line-height:1.55;letter-spacing:-.012em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;padding-bottom:var(--bar);
  transition:background .45s var(--ease),color .45s var(--ease);
}
canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
p{margin:0}
h1,h2{margin:0;font-weight:750;letter-spacing:-.04em;line-height:.95}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);position:relative}

/* Abschnittsmarke: 01 / KONTAKT */
.tag{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;
  font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.tag b{color:var(--accent);font-weight:700}
.tag::after{content:"";flex:1;height:1px;background:var(--line);max-width:180px}

/* 72ch statt 58: knapp 80 Zeichen, noch gut lesbar — aber ohne das Loch,
   das 58ch rechts neben jeder Einleitung stehen liessen. */
.lead{font-size:clamp(16.5px,1.45vw,20px);line-height:1.5;color:var(--dim);max-width:72ch}

/* ---------- Hintergrund ---------- */
#plot{position:fixed;inset:0;z-index:0;pointer-events:none}
header,main,footer,#status{position:relative;z-index:1}

/* ---------- Statusleiste ---------- */
#status{position:fixed;left:0;right:0;bottom:0;height:var(--bar);z-index:350;
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);display:flex;align-items:center;
  padding-inline:var(--pad);font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim-2);font-variant-numeric:tabular-nums}
#status i{font-style:normal;padding-inline:14px;border-right:1px solid var(--line);white-space:nowrap}
#status i:first-child{padding-left:0}
#status i b{color:var(--fg);font-weight:500}
#status .push{margin-left:auto;border:0;padding-right:0}
@media(max-width:820px){#status .opt{display:none}}

/* ---------- Kopf ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:300;transition:background .35s var(--ease)}
header.stuck{background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(18px) saturate(150%);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:18px;height:66px}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto;font-weight:800;font-size:20px;letter-spacing:-.045em}
.brand .m{display:grid;gap:2px;width:20px}
.brand .m i{display:block;height:3px;background:var(--fg)}
.brand .m i:nth-child(2){background:var(--accent);width:100%}
.brand .m i:nth-child(1){width:62%}
.brand .m i:nth-child(3){width:42%}
.brand small{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);margin-left:8px}
@media(max-width:640px){.brand small{display:none}}
.tools{display:flex;align-items:center;gap:7px}
.back{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);border:1px solid var(--line);padding:8px 11px;transition:.2s}
.back:hover{color:var(--fg);border-color:var(--line-2)}
.sq{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line);
  background:transparent;cursor:pointer;transition:.2s}
.sq:hover{border-color:var(--line-2)}

/* ---------- Titelblock ---------- */
#top{padding-top:clamp(104px,15vh,168px);padding-bottom:clamp(34px,4.5vw,60px)}
#top h1{font-size:clamp(40px,8vw,116px);letter-spacing:-.05em;font-weight:800;margin:22px 0 0}
#top .lead{margin-top:clamp(20px,2.5vw,32px)}

/* ---------- Fliesstext ---------- */
main section{border-top:1px solid var(--line);padding-block:clamp(38px,4.5vw,62px)}
/* 78ch statt 70. Weiter geht bewusst nicht: ueber die volle Seitenbreite
   waeren es rund 160 Zeichen pro Zeile, und beim Zeilenwechsel findet das
   Auge den naechsten Anfang dann nicht mehr. Ausgerechnet Datenschutz und
   Haftung sind Texte, bei denen das Verlieren der Zeile teuer ist. */
.prose{max-width:78ch;margin-top:20px;display:grid;gap:14px}
.prose p,.prose ul{color:var(--dim);font-size:16.5px;line-height:1.62}
.prose ul{margin:0;padding-left:20px;display:grid;gap:7px}
.prose strong{color:var(--fg);font-weight:650}
.prose a{color:var(--accent);border-bottom:1px solid transparent;transition:border-color .2s}
.prose a:hover{border-bottom-color:var(--accent)}
h2{font-size:clamp(22px,2.6vw,34px);letter-spacing:-.035em}

/* Datenblock: Bezeichnung links, Wert rechts — wie die Kennzahlen
   auf der Startseite, nur ohne Zahlen. */
/* Ohne Breitengrenze: die Tabelle ist keine Fliesstext-Spalte, sondern
   Beschriftung links, Wert rechts. Auf halber Seite abzubrechen sieht aus,
   als fehle der Rest. */
.facts{display:grid;gap:1px;margin-top:22px;background:var(--line);border:1px solid var(--line)}
.facts>div{background:var(--bg);padding:14px 16px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px}
.facts dt{flex:0 0 128px;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim-2);margin:0}
.facts dd{margin:0;flex:1;min-width:min(100%,220px)}
.facts dd a{color:var(--accent)}
.facts dd a:hover{text-decoration:underline}

/* Hinweiskasten für offene Punkte */
.todo{border:1px dashed var(--accent);padding:16px 18px;margin-top:26px;
  font-size:14.5px;line-height:1.55;color:var(--dim)}
.todo strong{color:var(--accent);font-weight:650}

/* ---------- Fuss ---------- */
footer{border-top:1px solid var(--line);padding-block:clamp(34px,4vw,56px)}
.fmark{font-size:clamp(52px,14vw,190px);font-weight:800;letter-spacing:-.055em;line-height:.82;
  display:flex;align-items:baseline;gap:.03em}
.fmark i{font-style:normal;color:var(--accent)}
.frow{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:baseline;justify-content:space-between;
  margin-top:clamp(26px,3.4vw,46px);padding-top:20px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim-2)}
.frow nav{display:flex;gap:20px;flex-wrap:wrap}
.frow a:hover{color:var(--accent)}

/* ---------- Einblenden ---------- */
html.js .rv{opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html.js .rv{opacity:1;transform:none;transition:none}
  *{scroll-behavior:auto!important}
}

/* ---------- nach oben ----------
   Sitzt über der Statusleiste, nicht darauf. Erscheint erst, wenn Scrollen
   überhaupt stattgefunden hat — vorher wäre er ein Knopf ohne Aufgabe. */
#hoch{position:fixed;right:var(--pad);bottom:calc(var(--bar) + 16px);z-index:340;
  width:44px;height:44px;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line);color:var(--dim);
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s,
             color .2s,background .2s,border-color .2s}
#hoch.da{opacity:1;visibility:visible;transform:none}
#hoch:hover,#hoch:focus-visible{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}
#hoch svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:square}
@media(prefers-reduced-motion:reduce){#hoch{transition:opacity .01ms,visibility .01ms}}