/* ============================================================
   Deep5 — Grund
   Reset, Zugänglichkeit, Grundtypografie, Bahn und Raster.
   Alles, was für die ganze Seite gilt.
   ============================================================ */

/* ============================================================
   Reset
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--papier);
  color:var(--text-2);
  font-family:var(--body);
  font-size:var(--grad-grund);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
figure{ margin:0; }

/* CD: Kursiv ist verboten. */
i,em,address,cite{ font-style:normal; }

/* Ein Ankersprung endet unter der klebenden Kopfzeile, nicht darunter. */
section[id],article[id]{ scroll-margin-top:var(--sprung-abstand); }

/* Träger für den Beschnittpfad im Kopf des Dokuments — nimmt keinen Platz ein. */
.formen{ position:absolute; }

/* ============================================================
   Zugänglichkeit
   ============================================================ */
:focus{ outline:none; }
:focus-visible{
  outline:var(--strich-stark) solid var(--bordeaux);
  outline-offset:3px;
  border-radius:1px;
}
.sec--dark :focus-visible{ outline-color:var(--hellblau); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--tinte); color:var(--weiss); padding:var(--raum-12) var(--raum-18);
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
}
.skip:focus{ left:var(--raum-12); top:var(--raum-12); }

/* ============================================================
   Typografie
   ============================================================ */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  letter-spacing:-.015em;
  color:var(--text-1);
  margin:0;
  line-height:1.04;
  font-style:normal;
  text-transform:none;
}

/* Versalien bleiben den beiden grossen Graden vorbehalten — lange Zeilen
   in Versalien liest niemand gern, und "professioneller" heisst hier lesbarer. */
.d1{ font-weight:900; text-transform:uppercase; font-size:var(--grad-d1); line-height:.9; letter-spacing:-.025em; }
.d2{ font-weight:900; text-transform:uppercase; font-size:var(--grad-d2); line-height:.94; letter-spacing:-.02em; }
.d3{ font-size:var(--grad-d3); line-height:1.12; letter-spacing:-.015em; }

.lead{
  font-size:var(--grad-lead);
  line-height:1.56;
  color:var(--text-2);
  max-width:44ch;
  margin:0;
}

p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }

/* ============================================================
   Bahn und Raster: Schiene links, Inhalt rechts
   ============================================================ */
.shell{
  width:100%; max-width:var(--bahn);
  margin-inline:auto;
  padding-inline:var(--rand);
}

.sec{ padding-block:var(--abschnitt-y); position:relative; }
.sec--dark{ background:var(--tinte); color:var(--text-hell-2); }
.sec--dark h1,.sec--dark h2,.sec--dark h3,.sec--dark h4{ color:var(--text-hell-1); }
.sec--dark .lead{ color:var(--text-hell-2); }

.grid{
  display:grid;
  grid-template-columns:var(--schiene) minmax(0,1fr);
  gap:var(--steg);
  align-items:start;
}

.rail{
  position:sticky; top:var(--kopf-klebt);
  display:flex; flex-direction:column; gap:var(--raum-18);
  padding-top:.4em;
}
.rail__link{
  font-family:var(--mono); font-size:var(--grad-mono-6); font-weight:500;
  letter-spacing:.04em; text-transform:none;
  color:var(--text-3); text-decoration:none;
  display:inline-flex; align-items:baseline; gap:.5em;
  border-top:var(--strich) solid var(--linie); padding-top:var(--raum-12);
  transition:color var(--zeit-zustand) var(--kurve-zustand);
}
.rail__link:hover{ color:var(--bordeaux); }
.sec--dark .rail__link{ color:var(--text-hell-3); border-top-color:var(--linie-hell); }
.sec--dark .rail__link:hover{ color:var(--hellblau); }

.head{ max-width:34ch; }
.head .lead{ margin-top:var(--raum-20); }

@media (max-width:1180px){
  .rail{ position:static; }
}

@media (max-width:1023px){
  .grid{ grid-template-columns:minmax(0,1fr); }
  .rail{
    position:static; flex-direction:row; flex-wrap:wrap;
    align-items:baseline; justify-content:space-between; gap:var(--raum-14) var(--raum-24);
    padding-top:0; margin-bottom:var(--raum-6);
  }
  .rail__link{ border-top:0; padding-top:0; }
  .head{ max-width:none; }
}

/* Die ganze Bewegung der Seite steht in css/bewegung.css — auch die
   Ausgangszustände, die früher hier standen. Hier bleibt nur, was
   ohne Bewegung gilt. */