/* Gemeinsame Gestaltung der Rechtsseiten (Impressum, Datenschutz).
   Bewusst eigene Datei statt Kopie in jeder Seite: Rechtstexte werden
   nachgezogen, und dann soll nur der Text wandern, nicht das Layout.
   Farben und Schrift kommen aus der Startseite, damit die Seiten sichtbar
   zu LernLocker gehoeren und nicht wie ein fremder Generator wirken. */

:root {
  --bg: #090d1a;
  --surface: #10182c;
  --text: #f6f3ec;
  --text-dim: #96a2ba;
  --text-dim2: #6c7793;
  --gold: #d4af37;
  --gold-bright: #f3d375;
  --border: rgba(255, 255, 255, 0.11);
}

/* Inter selbst ausgeliefert -- siehe Begruendung in index.html
   (IP-Abfluss an Google ohne Einwilligung, LG Muenchen I, 3 O 17493/20). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.7;
}

.wrap { max-width: 46rem; margin: 0 auto; padding: clamp(2rem, 6vh, 4rem) clamp(1.2rem, 5vw, 2rem) clamp(3rem, 8vh, 5rem); }

/* Kopf mit Rueckweg -- eine Rechtsseite ohne Weg zurueck ist eine Sackgasse. */
.back {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--text-dim); text-decoration: none; font-size: .87rem;
  padding: .4rem 0; margin-bottom: 2rem;
  transition: color .25s ease;
}
.back:hover, .back:focus-visible { color: var(--gold-bright); }
.back:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; border-radius: 4px; }
.back svg { width: 14px; height: 14px; }

h1 {
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  font-weight: 800; letter-spacing: -.015em; line-height: 1.2;
  text-wrap: balance;
}
.lead { margin-top: .8rem; color: var(--text-dim); font-size: 1rem; }

h2 {
  margin-top: 2.6rem; margin-bottom: .7rem;
  font-size: 1.12rem; font-weight: 700; letter-spacing: -.005em;
  color: var(--gold-bright);
  text-wrap: balance;
}
h3 { margin-top: 1.5rem; margin-bottom: .4rem; font-size: .97rem; font-weight: 700; }

p { margin-bottom: .9rem; color: var(--text-dim); font-size: .95rem; }
p strong, li strong { color: var(--text); font-weight: 600; }

ul, ol { margin: 0 0 .9rem 1.2rem; color: var(--text-dim); font-size: .95rem; }
li { margin-bottom: .35rem; }

a { color: var(--gold); }
a:hover, a:focus-visible { color: var(--gold-bright); }
a:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; border-radius: 3px; }

/* Anschrift und aehnliche Bloecke: als Block lesbar, nicht als Fliesstext. */
.block {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 1.2rem 1.3rem; margin-bottom: 1.2rem;
  color: var(--text); font-size: .95rem; line-height: 1.75;
}
.block .label {
  display: block; font-size: .7rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-dim2); margin-bottom: .45rem; font-weight: 600;
}

/* Tabellen (Empfaenger, Rechtsgrundlagen) muessen auf dem Handy scrollen
   duerfen, ohne die ganze Seite seitlich zu verschieben. */
.tablewrap { overflow-x: auto; margin-bottom: 1.2rem; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 30rem; }
th, td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--text-dim); }
th { color: var(--text); font-weight: 600; font-size: .78rem; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
td strong { color: var(--text); }

.stand { margin-top: 2.8rem; padding-top: 1.2rem; border-top: 1px solid var(--border); font-size: .82rem; color: var(--text-dim2); }

.pagefoot { margin-top: 2rem; font-size: .82rem; color: var(--text-dim2); display: flex; gap: 1.1rem; flex-wrap: wrap; }
.pagefoot a { color: var(--text-dim); text-decoration: none; }
.pagefoot a:hover, .pagefoot a:focus-visible { color: var(--gold-bright); }