/* ═══════════════════════════════════════════════════════════════
   Impressum · Masterarbeit · Fehlerseite — seiteneigene Bausteine
   Setzt css/basis.css voraus; jede Seite lädt BEIDE Dateien in dieser
   Reihenfolge. Hier stehen nur die Teile, die diese drei Textseiten
   brauchen: Lesespalte, Rücklink, Masterarbeits-Bausteine und die
   Fehlerseite.

   Angelegt am 20.08.2026 beim Umstieg der restlichen Seiten auf das
   neue Erscheinungsbild.
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════ Lesespalte ═══════════════════════════ */

/* Textseiten laufen einspaltig in Lesebreite — nicht über die vollen
   1160 px wie die Startseite, dort stünden ~145 Zeichen je Zeile.

   ZWEI Dinge stecken hier drin, beide am 22.08.2026 nachgemessen:

   1. Die Breite steht in Pixeln, NICHT mehr in ch. Die Einheit ch ist die
      Breite der Ziffer „0" der GERADE geladenen Schrift. Mit der
      Ersatzschrift war die Spalte 704 px breit, nach dem Eintreffen von
      Inter 822 px — die ganze Seite sprang waagerecht. Gemessen: 0,253
      Sprungwert auf /masterarbeit, dreimal reproduziert. Googles Grenze
      liegt bei 0,1. 808 px entsprechen den bisherigen 80 Zeichen.

   2. Die Spalte begrenzt jetzt die KINDER, nicht den Container selbst.
      Vorher schrumpfte der Container auf 808 px und wurde mittig gesetzt —
      der Text begann dadurch 216 px rechts vom Logo, während er auf Start-
      und Softwareseite mit ihm fluchtet. Jetzt bleibt der Container auf
      voller Breite, und nur die Zeilenlänge ist gedeckelt. */
.legal-page,
.arbeit-seite {
  padding-top: calc(var(--kopf-hoehe) + clamp(40px, 6vw, 80px));
  padding-bottom: clamp(72px, 9vw, 120px);
}
.legal-page > *,
.arbeit-seite > * { max-width: 808px; }

.legal-page h1,
.arbeit-seite h1 {
  font-family: var(--schrift-display);
  font-size: var(--t-xl);
  font-weight: var(--w-fett);
  letter-spacing: var(--sp-display);
  line-height: 1.15;
  margin-bottom: clamp(18px, 2.2vw, 26px);
}
.legal-page h2,
.arbeit-seite h2 {
  font-family: var(--schrift-display);
  font-size: var(--t-l);
  font-weight: var(--w-halb);
  letter-spacing: var(--sp-display);
  line-height: 1.15;
  margin: clamp(34px, 4vw, 48px) 0 12px;
}
.legal-page h3,
.arbeit-seite h3 {
  font-size: var(--t-s);
  font-weight: var(--w-halb);
  color: var(--text);
  margin: 22px 0 6px;
}
.legal-page p,
.arbeit-seite p { color: var(--text-dim); }
.legal-page p + p,
.arbeit-seite p + p { margin-top: 14px; }
.legal-page strong,
.arbeit-seite strong { color: var(--text); font-weight: var(--w-halb); }
.legal-page ul,
.arbeit-seite ul { display: grid; gap: 8px; margin: 12px 0; }
.legal-page li,
.arbeit-seite li {
  position: relative;
  padding-left: 20px;
  color: var(--text-dim);
}
.legal-page li::before,
.arbeit-seite li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--akzent);
  opacity: 0.7;
}
/* Verweise im Fließtext bleiben erkennbar — anders als in der Navigation,
   wo sie die Textfarbe erben. */
/* .wissen-karte ist als GANZE Karte ein Verweis. Ohne die Ausnahme faerbt
   diese Regel Titel, Datum und Anriss blau und unterstreicht alles — die
   Uebersichtsseite sah dadurch aus wie eine Linkliste mit Kastenrahmen
   (22.08.2026 im Bild gesehen). */
.legal-page a:not(.knopf):not(.legal-back):not(.wissen-karte),
.arbeit-seite a:not(.knopf):not(.legal-back):not(.wissen-karte) {
  color: var(--akzent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Rücklink über der Überschrift ──
   Trefferfläche mindestens 44 px: Die reine Textzeile war 25 px hoch und
   mit dem Finger kaum zu treffen (nachgemessen 20.08.2026). */
.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 14px;
  margin-left: -14px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: var(--t-xs);
  font-weight: var(--w-halb);
  color: var(--text-dim);
  transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}
.legal-back:hover,
.legal-back:focus-visible {
  color: var(--text);
  background: var(--flaeche);
  border-color: var(--kante);
}

.legal-stand { margin-top: clamp(34px, 4vw, 48px); font-size: var(--t-xs); }

/* ═══════════════════════════ Masterarbeit ═══════════════════════════ */

.arbeit-thema {
  font-size: var(--t-s);
  color: var(--text-dim);
  margin-bottom: clamp(24px, 3vw, 34px);
}

/* Vier Eckdaten (Studiengang, Hochschule, Note, Abgabe). */
.arbeit-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: clamp(30px, 3.6vw, 44px);
}
.arbeit-meta > div,
.arbeit-meta li {
  padding: 14px 16px;
  background: var(--flaeche);
  border: 1px solid var(--kante);
  border-radius: var(--radius-klein);
  padding-left: 16px;
}
.arbeit-meta li::before { display: none; }
.fact-label {
  display: block;
  font-size: var(--t-mikro);
  letter-spacing: var(--sp-versal);
  text-transform: uppercase;
  color: var(--text-dim);
}
.fact-value {
  display: block;
  margin-top: 4px;
  font-family: var(--schrift-display);
  font-size: var(--t-s);
  font-weight: var(--w-halb);
  color: var(--text);
}

.arbeit-abstract {
  padding: clamp(20px, 2.6vw, 30px);
  background: var(--flaeche);
  border: 1px solid var(--kante);
  border-left: 2px solid var(--akzent-kante);
  border-radius: var(--radius);
  margin: clamp(24px, 3vw, 34px) 0;
}
.arbeit-sprache {
  display: inline-block;
  margin-bottom: 10px;
  font-size: var(--t-mikro);
  font-weight: var(--w-halb);
  letter-spacing: var(--sp-versal);
  text-transform: uppercase;
  color: var(--text-dim);
}

.arbeit-block { margin-top: clamp(34px, 4vw, 48px); }

.arbeit-ergebnisse {
  display: grid;
  gap: 12px;
  padding: clamp(20px, 2.6vw, 28px);
  background: var(--flaeche);
  border: 1px solid var(--kante);
  border-radius: var(--radius);
}

.arbeit-umfang { margin-top: 20px; font-size: var(--t-xs); color: var(--text-dim); }

/* Gliederung: eingerückte Ebenen ohne Aufzählungspunkte. */
.gliederung { display: grid; gap: 6px; }
.gliederung li::before { display: none; }
.gliederung li { padding-left: 0; }
.gliederung-titel {
  font-weight: var(--w-halb);
  color: var(--text);
  margin-top: 12px;
}
.gliederung-unter { padding-left: 22px; font-size: var(--t-xs); }

/* ═══════════════════════════ Fehlerseite ═══════════════════════════ */

.fehlerseite {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Ebenfalls in Pixeln statt ch — siehe Begründung oben. 610 px
     entsprechen den bisherigen 60 Zeichen. */
  max-width: 610px;
}
/* Die Fehlerseite ist bewusst mittig; ihre Kinder duerfen deshalb die
   linksbuendige Deckelung von .legal-page nicht erben. */
.fehlerseite > * { max-width: 100%; }
.legal-page .fehler-nummer,
.fehler-nummer {
  font-family: var(--schrift-display);
  font-size: var(--t-hero);
  font-weight: var(--w-fett);
  letter-spacing: var(--sp-display);
  line-height: 1;
  background: var(--verlauf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 12px;
}
.legal-page .fehler-text { margin-bottom: 26px; }

/* ═══════════════════════════ Umbrüche ═══════════════════════════ */

@media (max-width: 680px) {
  .arbeit-meta { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════ Fachbeiträge (/wissen) ═══════════════════════
   Angelegt am 22.08.2026. Die Beiträge sind Textseiten wie Impressum und
   Masterarbeit und nutzen deren Lesespalte — hier stehen nur die Teile,
   die es dort nicht gibt: Übersichtskarten, Kopfzeile eines Beitrags,
   Merksatz-Kästen und der Abschluss mit Gesprächsangebot. */

/* ── Übersicht ── */
.wissen-liste { display: grid; gap: 18px; margin-top: clamp(28px, 3.4vw, 40px); }
.wissen-karte {
  display: block;
  padding: clamp(20px, 2.6vw, 28px);
  background: var(--flaeche);
  border: 1px solid var(--kante);
  border-left: 2px solid var(--akzent-kante);
  border-radius: var(--radius);
  transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
}
.wissen-karte:hover,
.wissen-karte:focus-visible {
  border-color: var(--kante-stark);
  background: var(--flaeche-stark);
}
.legal-page .wissen-karte { color: var(--text); text-decoration: none; }
.wissen-karte h2 {
  font-family: var(--schrift-display);
  font-size: var(--t-l);
  font-weight: var(--w-halb);
  letter-spacing: var(--sp-display);
  line-height: 1.15;
  margin: 0 0 10px;
}
.wissen-karte p { font-size: var(--t-s); color: var(--text-dim); margin: 0; }
.wissen-karte .beitrag-meta { margin-bottom: 10px; }

/* ── Kopf eines Beitrags ── */
.beitrag-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: var(--t-mikro);
  font-weight: var(--w-halb);
  letter-spacing: var(--sp-versal);
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 14px;
}
.legal-page .beitrag-vorspann {
  font-size: var(--t-m);
  color: var(--text);
  margin-bottom: clamp(24px, 3vw, 34px);
}

/* ── Merksatz ──
   Ein Kasten je Abschnitt, nicht mehr: Er soll den einen Satz tragen, den
   der Leser mitnimmt, und verliert seine Wirkung, sobald er zur Deko wird. */
.beitrag-merk {
  padding: clamp(18px, 2.2vw, 24px);
  margin: clamp(24px, 3vw, 32px) 0;
  background: var(--flaeche);
  border: 1px solid var(--kante);
  border-left: 2px solid var(--akzent-kante);
  border-radius: var(--radius);
}
.legal-page .beitrag-merk p { color: var(--text); margin: 0; }

/* ── Abschluss ── */
.beitrag-fuss {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--kante);
}
.beitrag-fuss h2 { margin-top: 0; }
.beitrag-weiter { display: grid; gap: 10px; margin-top: clamp(24px, 3vw, 32px); }
.beitrag-weiter a { font-size: var(--t-s); }
.beitrag-weiter-titel {
  font-size: var(--t-mikro);
  font-weight: var(--w-halb);
  letter-spacing: var(--sp-versal);
  text-transform: uppercase;
  color: var(--text-dim);
}