/* ══════════════════════════════════════════════════════════════════════════════
   CEDIVIS · Schale der Nebenseiten (Impressum, Datenschutz, Danke, 404)

   Diese Seiten sind zum LESEN da, nicht zum Ueberzeugen. Sie erben darum die
   Materialsprache der Startseite (dieselben Grautoene, dieselben Schriften,
   dieselbe geschliffene Kante), aber keinen ihrer Auftritte: kein Rad, kein
   WebGL, keine gepinnte Strecke, kein Eintritt. Wer ein Impressum sucht, will
   es finden und wieder weg.

   Die Tokens sind bewusst nur die, die hier gebraucht werden. Ein Duplikat des
   ganzen Token-Blocks der Startseite waere eine zweite Wahrheit, und die
   driftet.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --g02:#fbfaf9; --g05:#f4f3f0; --g10:#eeedea; --g16:#e5e3de; --g24:#d6d4cf;
  --g62:#767676; --g98:#0e0e0f;
  --grund:var(--g10); --ink:var(--g98); --grau:var(--g62);
  --akzent-tief:#2c3018; --akzent:#5b6236; --akzent-hell:#b6bf87;
  --linie:rgba(14,14,15,.13);
  --font-display:'Archivo','Archivo Expanded',ui-sans-serif,sans-serif;
  --font-text:'Newsreader',Georgia,'Times New Roman',serif;
  --chrom:linear-gradient(122deg,#f6f6f6 0%,#cfcfcf 14%,#7c7c7c 29%,#efefef 41%,
          #5f5f5f 55%,#c6c6c6 67%,#fbfbfb 78%,#7a7a7a 90%,#dcdcdc 100%);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--grund); color:var(--ink);
  font-family:var(--font-text); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
::selection{background:var(--akzent); color:#fff}

/* ── Kopf ─────────────────────────────────────────────────────────────────── */
.kopf{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:0 clamp(18px,3.4vw,52px); height:76px;
  background:rgba(238,237,234,.94); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linie);
}
.kopf img{height:38px; width:auto}
.kopf a{text-decoration:none}
.kopf-zurueck{
  font-family:var(--font-display); font-stretch:108%; font-weight:700;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--grau);
  display:inline-flex; align-items:center; gap:10px;
}
.kopf-zurueck::before{
  content:""; width:8px; height:13px; background:currentColor;
  clip-path:polygon(100% 0, 66% 0, 0 100%, 34% 100%);
}
.kopf-zurueck:hover{color:var(--ink)}
.kopf a:focus-visible{outline:2px solid var(--akzent); outline-offset:4px}

/* ── Blatt ────────────────────────────────────────────────────────────────── */
main{
  max-width:74ch; margin:0 auto;
  padding:clamp(44px,6vw,86px) clamp(20px,4vw,32px) clamp(70px,9vw,120px);
}
h1{
  font-family:var(--font-display); font-stretch:118%; font-weight:800;
  font-size:clamp(2.05rem,4.6vw,3.15rem); line-height:1.04; letter-spacing:-.03em;
  margin:0 0 14px;
}
.vorspann{
  font-size:clamp(1.04rem,1.6vw,1.2rem); color:#3d3d44; margin:0 0 clamp(34px,4.4vw,54px);
  padding-bottom:clamp(26px,3.4vw,38px); border-bottom:1px solid var(--linie);
}
h2{
  font-family:var(--font-display); font-stretch:112%; font-weight:700;
  font-size:clamp(1.18rem,2vw,1.42rem); line-height:1.2; letter-spacing:-.018em;
  margin:clamp(38px,4.6vw,58px) 0 12px;
}
h2:first-of-type{margin-top:0}
p,li{margin:0 0 15px}
ul{padding-left:22px}
a{color:var(--akzent-tief); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--akzent)}
a:focus-visible{outline:2px solid var(--akzent); outline-offset:3px}
strong{font-weight:600}

/* Die Datentafel: dieselbe Blechtafel wie auf der Startseite. */
.tafel{
  position:relative; margin:0 0 clamp(30px,3.6vw,44px);
  padding:clamp(24px,3vw,34px) clamp(22px,2.6vw,30px);
  background:linear-gradient(168deg, var(--g02) 0%, var(--g10) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 22px 44px -32px rgba(14,14,15,.9);
}
.tafel::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:var(--chrom); opacity:.55;
}
.tafel p:last-child{margin-bottom:0}
.tafel-titel{
  display:block; font-family:var(--font-display); font-stretch:106%; font-weight:700;
  font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--grau);
  margin-bottom:14px;
}

/* Der Hinweis auf eine ehrliche Luecke. Kein Schmuck, ein Vermerk. */
.vermerk{
  position:relative; padding:16px 0 0; margin:22px 0;
  color:#3d3d44; font-size:.95rem;
}
.vermerk::before{
  content:""; position:absolute; left:0; top:0; width:64px; height:2px;
  background:var(--chrom); opacity:.7;
}

/* ── Taste (identisch zur Startseite) ─────────────────────────────────────── */
.knopf{
  position:relative; display:inline-flex; align-items:center; gap:11px;
  font-family:var(--font-display); font-stretch:110%; font-weight:700;
  font-size:13.5px; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; background:var(--akzent); text-decoration:none;
  padding:16px 26px; border:0; border-radius:2px; cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24);
  transition:filter .18s linear, transform .12s linear;
}
.knopf::before{
  content:""; flex:0 0 auto; width:9px; height:15px; background:currentColor;
  clip-path:polygon(0 100%, 34% 100%, 100% 0, 66% 0);
  transition:transform .2s cubic-bezier(.2,.7,.2,1);
}
.knopf::after{content:""; flex:0 0 auto; width:9px; height:15px}
.knopf:hover{filter:brightness(.9); color:#fff}
.knopf:hover::before{transform:translateX(3px)}
.knopf:active{transform:translateY(1px)}
.knopf:focus-visible{outline:2px solid var(--ink); outline-offset:3px}

/* ── Fuss ─────────────────────────────────────────────────────────────────── */
.fuss{
  background:var(--g98); color:#c9c7c2;
  padding:clamp(34px,4.4vw,52px) clamp(20px,4vw,52px);
  font-size:13.5px;
}
.fuss-innen{
  max-width:1180px; margin:0 auto;
  display:flex; flex-wrap:wrap; gap:14px 34px; align-items:center;
  justify-content:space-between;
}
.fuss a{color:#e6e4df; text-decoration:none}
.fuss a:hover{color:#fff; text-decoration:underline}
.fuss a:focus-visible{outline:2px solid var(--akzent-hell); outline-offset:3px}
.fuss-wege{display:flex; flex-wrap:wrap; gap:8px 22px}

/* ── Mittige Seiten (Danke, 404) ──────────────────────────────────────────── */
.mitte{
  min-height:calc(100dvh - 76px - 140px);
  display:flex; flex-direction:column; justify-content:center;
  max-width:60ch;
}
.mitte .knopf{align-self:flex-start; margin-top:12px}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition:none !important}
}