/* =====================================================================
   Rechtstexte (Impressum, Datenschutzerklaerung)
   ---------------------------------------------------------------------
   Eigenstaendige Seiten, keine SPA-Routen. Grund: § 5 DDG verlangt
   "staendig verfuegbar" — eine Seite, die erst existiert, wenn app.js
   geladen und die Route gestimmt hat, erfuellt das schlechter als eine
   Datei, die der Server direkt ausliefert. Sie bleiben damit auch dann
   lesbar, wenn JavaScript aus ist oder ein Skript klemmt.

   Benutzt ausschliesslich die --pp-Tokens aus prepp.css. Die liegen auf
   body (nicht auf .pp-root), gelten hier also ohne weiteres Zutun — und
   mit ihnen hell wie dunkel.
   ===================================================================== */

body {
  background: var(--pp-bg);
  color: var(--pp-text);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-weight: 500;
  margin: 0;
}

.lg-top {
  border-bottom: 1px solid var(--pp-line);
  background: var(--pp-bg-2);
  position: sticky;
  top: 0;
  z-index: 2;
}
.lg-top-in {
  max-width: 72ch;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.lg-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--pp-text-2);
  text-decoration: none;
  font-size: var(--pp-fs-klein);
  border: 1px solid var(--pp-line);
  border-radius: 5px;
  padding: 6px 11px;
}
.lg-back:hover { color: var(--pp-text); border-color: var(--pp-line-2); }
/* D1-08/S1-11 (web1014, 14.10.2026): „← Zurück zu PrepP" ist auf jeder
   Rechtsseite der EINZIGE Rückweg und maß am Finger 138 × 31 px. Text,
   also 44 px in der Höhe (R3); mit Maus bleibt der schmale Rahmen. */
@media (pointer: coarse) {
  .lg-back { min-height: 44px; box-sizing: border-box; }
}
.lg-top-name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: var(--pp-fs-h1);
  font-weight: 600;
  letter-spacing: .3px;
  margin-left: auto;
  color: var(--pp-text-2);
}

/* WO9/S1-09: in ch statt px — 780 px trugen am Laptop 126–130 Zeichen je Zeile. */
.lg-wrap { max-width: 72ch; margin: 0 auto; padding: 40px 24px 80px; }

.lg-wrap h1 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: var(--pp-fs-titel);
  font-weight: 600;
  line-height: var(--pp-lh-eng);
  margin: 0 0 10px;
}
.lg-lead { color: var(--pp-text-2); font-size: var(--pp-fs-gross); line-height: var(--pp-lh-weit); margin: 0 0 var(--pp-sp-8); }

.lg-wrap h2 {
  font-family: "Lora", Georgia, serif;
  font-size: var(--pp-fs-h1);
  font-weight: 600;
  margin: 36px 0 12px;
  padding-top: 20px;
  border-top: 1px solid var(--pp-line);
}
.lg-wrap h3 { font-size: var(--pp-fs-gross); font-weight: 600; margin: var(--pp-sp-5) 0 8px; color: var(--pp-text); }

.lg-wrap p, .lg-wrap li { font-size: var(--pp-fs-text); line-height: var(--pp-lh-weit); color: var(--pp-text-2); }
.lg-wrap ul { padding-left: 20px; }
.lg-wrap li { margin-bottom: 7px; }
.lg-wrap a { color: var(--pp-accent-2); }
.lg-wrap strong { color: var(--pp-text); font-weight: 600; }

/* Zweisprachigkeit fuer ganze Bloecke.
   prepp.css schaltet [data-en] auf display:inline — das passt fuer ein paar
   Woerter mitten im Satz, nicht fuer Listen und Absaetze. Hier deshalb eine
   Klasse, die auf block umschaltet. Die Gegenrichtung (data-de in EN-Modus
   ausblenden) erledigt prepp.css bereits richtig. */
body[data-lang="en"] [data-en].lg-blk { display: block; }

/* Anschrift und andere Blockangaben */
.lg-adr {
  border-left: 2px solid var(--pp-accent-line);
  padding: 4px 0 4px 16px;
  margin: 14px 0;
  font-size: var(--pp-fs-text);
  line-height: var(--pp-lh-weit);
  color: var(--pp-text);
}

/* Hervorgehobener Kasten fuer die zentrale Aussage einer Seite */
.lg-note {
  background: var(--pp-surface);
  border: 1px solid var(--pp-line);
  border-radius: 8px;
  padding: 16px var(--pp-sp-4);
  margin: var(--pp-sp-4) 0;
}
.lg-note p:last-child { margin-bottom: 0; }
.lg-note p:first-child { margin-top: 0; }

/* Platzhalter, die vor der Veroeffentlichung ersetzt werden muessen.
   Bewusst laut: test/verify-legal.js laesst die Testsuite rot werden,
   solange hier noch etwas steht. */
.lg-todo {
  background: var(--pp-err-tint);
  border: 1px dashed var(--pp-err);
  border-radius: 4px;
  padding: 1px 7px;
  color: var(--pp-err);
  font-family: "IBM Plex Mono", monospace;
  font-size: var(--pp-fs-klein);
  font-weight: 600;
  white-space: nowrap;
}

.lg-foot {
  margin-top: 44px;
  padding-top: var(--pp-sp-4);
  border-top: 1px solid var(--pp-line);
  font-size: var(--pp-fs-klein);
  color: var(--pp-text-3);
  line-height: var(--pp-lh-weit);
}
.lg-foot a { color: var(--pp-text-2); }

/* =====================================================================
   Preistabelle (preise.html, Paket A der Abo-Sichtbarkeit)
   ---------------------------------------------------------------------
   Sie steht hier statt in einer eigenen Datei: preise.html ist nach dem
   Muster der Rechtsseiten gebaut (JS-frei, eigenstaendig, nur --pp-Tokens)
   und laedt genau deren zwei Stylesheets. Ein drittes waere ein dritter
   Ladepfad fuer denselben Look.

   KEINE display-Regel auf ein span in diesen Zellen — das ist Fallstrick 11
   in seiner zweiten Gestalt (prepp.css, .pp-wj-zeile): Die Sprach-Spans
   data-de/data-en werden ueber `[data-en] { display: none }` (0,1,0)
   versteckt, und jede Regel mit einer Klasse davor (0,2,1) schluege sie —
   die Tabelle stuende dann zweisprachig da. Gesetzt werden hier deshalb nur
   Farbe, Abstand und Ausrichtung.
   ===================================================================== */
.pr-tabwrap { overflow-x: auto; margin: var(--pp-sp-4) 0; }
.pr-tab {
  border-collapse: collapse;
  width: 100%;
  min-width: 520px;          /* darunter scrollt der Wirt, statt zu quetschen */
  font-size: var(--pp-fs-klein);
}
.pr-tab th, .pr-tab td {
  border-bottom: 1px solid var(--pp-line);
  padding: 9px 10px;
  text-align: left;
  vertical-align: top;
  line-height: var(--pp-lh-text);
  color: var(--pp-text-2);
}
.pr-tab thead th {
  color: var(--pp-text);
  font-weight: 600;
  border-bottom: 2px solid var(--pp-line-2);
  white-space: nowrap;
}
.pr-tab td:first-child, .pr-tab th:first-child { width: 46%; }
.pr-tab td:not(:first-child), .pr-tab th:not(:first-child) { text-align: center; }
.pr-tab strong { color: var(--pp-text); font-weight: 600; }
/* Ja/Nein als ZEICHEN plus Farbe, nie Farbe allein (WCAG 1.4.1 „Use of
   Color": Ein Haken und ein Gedankenstrich sind auch in Graustufen
   unterscheidbar, zwei Farbtoene nicht). */
.pr-tab .pr-ja   { color: var(--pp-ok); font-weight: 600; }
.pr-tab .pr-nein { color: var(--pp-text-3); }
.pr-tab .pr-teil { color: var(--pp-text-2); }
.pr-je { color: var(--pp-text-3); }

@media (max-width: 600px) {
  .lg-wrap { padding: 28px var(--pp-sp-4) 60px; }
  .lg-wrap h1 { font-size: var(--pp-fs-h1); }
  .lg-top-name { display: none; }
  /* Preistabelle auf dem Telefon (WebKit 390 px, 07.09.2026): Mit dem
     520-px-Boden scrollte der Wirt, und die zwei bezahlten Spalten —
     also genau die, um die es geht — lagen rechts außerhalb des Bildes.
     Vier schmale Spalten passen in 358 px, wenn die Kopfzeile umbrechen
     darf und die erste Spalte 40 % nimmt; der Wirt bleibt scrollbar als
     Netz für noch schmalere Fenster. */
  .pr-tab { min-width: 0; }   /* Schriftgrad bleibt --pp-fs-klein (Skala, verify-skala.js) */
  .pr-tab thead th { white-space: normal; }
  .pr-tab th, .pr-tab td { padding: 8px 5px; }
  .pr-tab td:first-child, .pr-tab th:first-child { width: 40%; }
}