/* School-Desk – Rechtstexte.
   Übernimmt Farben, Schriften und Struktur der Startseite. Die Titelfläche
   trägt dieselbe Lineatur und denselben roten Heftrand; der Textkörper steht
   im zweispaltigen Raster der breiten Abschnitte, links das Verzeichnis. */

:root{
  --papier:#FAFBFD;
  --papier-tief:#F1F4F9;
  --tinte:#16202E;
  --tinte-weich:#55637A;
  --linie:#CBD9EE;
  --akzent:#46318A;
  --akzent-hell:#5A44A3;
  --akzent-blass:#EDEAF6;
  --korrektur:#DC3B2E;
  --marker:#FFE066;
  --zeile:32px;
  /* Ohne min(): Kennt ein Browser die Funktion nicht, wäre der Wert
     ungültig und der Rand fiele auf null – der Text klebte am Rand.
     7vw erreicht 88px bei 1257px Breite; darüber gedeckelt. */
  --rand:7vw;
  --max:1140px;
}
@media (min-width:1257px){ :root{ --rand:88px } }
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--papier);color:var(--tinte);
  font-family:'Work Sans',system-ui,sans-serif;font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Titel',system-ui,sans-serif;font-weight:700;line-height:1.3;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(2.3rem,5vw,3.6rem);font-weight:700;letter-spacing:-.035em}
p{margin:0 0 1rem}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--rand)}
.eyebrow{
  font-family:inherit;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tinte-weich);margin:0 0 1.1rem;
}

/* ---------- Kopfzeile: identisch zur Startseite ---------- */
.kopf{
  position:sticky;top:0;z-index:60;background:rgba(250,251,253,.88);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--linie);
}
.kopf .wrap{display:flex;align-items:center;gap:1.6rem;height:66px}
.logo{font-family:'Titel',sans-serif;font-weight:700;font-size:1.3rem;letter-spacing:-.03em;text-decoration:none}
.logo span{color:var(--akzent)}
.kopf nav{margin-left:auto;display:flex;align-items:center;gap:1.6rem}
/* :not(.knopf), weil ".kopf nav a" sonst das weisse color des Knopfes
   überschreibt – zwei Klassen plus Element schlagen eine Klasse. */
.kopf nav a:not(.knopf){font-size:.95rem;text-decoration:none;color:var(--tinte-weich)}
.kopf nav a:not(.knopf):hover{color:var(--tinte)}
.knopf{
  display:inline-block;background:var(--akzent);color:#fff;text-decoration:none;
  padding:.72rem 1.35rem;border-radius:2px;font-weight:700;font-size:.95rem;
  border:1px solid var(--akzent);transition:background .18s,transform .18s;
}
.knopf:hover{background:var(--akzent-hell);transform:translateY(-1px)}
.knopf.klein{padding:.5rem 1rem;font-size:.88rem}
:focus-visible{outline:2.5px solid var(--korrektur);outline-offset:3px}

/* ---------- Titelfläche: Lineatur und Heftrand wie im Hero ---------- */
.titel{position:relative;padding:clamp(3rem,6vw,4.6rem) 0 clamp(2rem,4vw,3rem);overflow:hidden}
.titel::before{
  content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;opacity:.55;
  background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--zeile) - 1px),var(--linie) calc(var(--zeile) - 1px),var(--linie) var(--zeile));
  -webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent);
  mask-image:linear-gradient(to bottom,#000 60%,transparent);
}
.titel::after{content:"";position:absolute;top:0;bottom:0;left:calc(var(--rand) - 22px);width:1px;background:var(--korrektur);opacity:.28;z-index:0}
.titel .wrap{position:relative;z-index:1}
.stand{font-size:.95rem;color:var(--tinte-weich);margin:1.1rem 0 0}

/* ---------- Textkörper: einspaltig über die volle Breite ---------- */
.rumpf{padding:clamp(2rem,4vw,3rem) 0 clamp(4rem,7vw,6rem)}
/* Lange Zeilen brauchen mehr Luft zwischen den Zeilen, sonst rutscht das
   Auge beim Zeilenwechsel in die falsche Zeile. */
.text{line-height:1.72}
.text h2{
  font-size:1.5rem;margin:2.8rem 0 .8rem;padding-top:1.5rem;
  border-top:1px solid var(--linie);scroll-margin-top:90px;
}
.text h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.text h3{font-size:1.05rem;margin:1.7rem 0 .4rem}
.text ul,.text ol{padding-left:1.3rem;margin:0 0 1rem}
.text li{margin-bottom:.45rem}
.text a{color:var(--akzent)}
.text strong{font-weight:700}

/* Offene Stellen: müssen vor dem Aufschalten gefüllt werden. */
.lueck{
  background:linear-gradient(transparent 12%,var(--marker) 12%,var(--marker) 92%,transparent 92%);
  padding:0 .22em;font-weight:700;
}
.hinweis{
  background:var(--akzent-blass);border-left:3px solid var(--akzent);
  padding:1.1rem 1.3rem;margin:0 0 2rem;font-size:.95rem;
}
.hinweis p:last-child{margin-bottom:0}

.text table{border-collapse:collapse;width:100%;margin:1.1rem 0;font-size:.94rem}
.text th{
  text-align:left;background:var(--akzent-blass);color:var(--akzent);
  font-family:inherit;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;padding:.5rem .7rem;border-bottom:1px solid var(--akzent);
}
.text td{padding:.55rem .7rem;border-bottom:1px solid var(--linie);vertical-align:top}

/* ---------- Fusszeile: identisch zur Startseite ---------- */
footer{background:var(--tinte);color:#9A9AB4;padding:3rem 0 2.4rem;font-size:.9rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:1.6rem;align-items:baseline}
footer a{color:#C8C4DC;text-decoration:none;margin-right:1.3rem}
footer a:hover{color:#fff}
footer .logo{color:#fff}
footer .logo span{color:var(--akzent-blass)}
footer .rechts{margin-left:auto}

@media (max-width:900px){
  .kopf nav a:not(.knopf){display:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}