/*
 * Gemeinsame Gestaltung der Rechtstexte (Impressum, Datenschutz, Konto löschen).
 *
 * Bewusst eigenständiges CSS statt Tailwind: Diese Seiten müssen OHNE JavaScript
 * und ohne das App-Bundle funktionieren – Google ruft sie zur Prüfung direkt ab,
 * und die Anbieterkennzeichnung nach § 5 DDG muss auch dann erreichbar sein, wenn
 * sich jemand nicht anmelden kann. Sie liegen deshalb in `static/` (Vites
 * publicDir) und werden unverändert ausgeliefert.
 *
 * Nebeneffekt: `dist/` wird in die native App gebündelt (capacitor.config.ts,
 * webDir), die Seiten liegen damit auf dem Gerät und öffnen auch offline. Das
 * Logo wird relativ eingebunden (../itc-logo-horizontal-white.svg) und ist
 * deshalb in beiden Fällen da.
 *
 * Die Anmutung folgt dem öffentlichen Formular: heller blaustichiger Grund,
 * darauf eine weiße Karte mit Navy-Kopf. Farben und Größen sind an das
 * Design-System angelehnt, aber fest eingetragen – ohne Bundle gibt es keine
 * Tailwind-Tokens.
 */
:root {
  --brand: #122b5a;
  --brand-hell: #2a4d80;
  --text: #1f2937;
  --muted: #5b6b85;
  --line: #dfe4ec;
  --karte: #ffffff;
  --grund: #eef2f8;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  padding: 1.5rem 1rem 3rem;
  background: var(--grund);
  color: var(--text);
  font-family: Archivo, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

main {
  max-width: 48rem;
  margin: 0 auto;
  background: var(--karte);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(18, 43, 90, 0.06), 0 8px 24px rgba(18, 43, 90, 0.08);
}

/* Kopf: Navy-Verlauf mit hellem Lichtbogen – dieselbe Sprache wie Seitenleiste
   und Kopfleiste der App. Titel links, Logo rechts, eine Zeile. */
.kopf {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.1rem 1.75rem;
  background: linear-gradient(155deg, #1c4183 0%, #142f63 55%, #0b1b3a 100%);
  overflow: hidden;
}

.kopf::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 12% -30%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 62%);
  pointer-events: none;
}

.kopf img {
  position: relative;
  flex: 0 0 auto;
  display: block;
  width: 150px;
  height: auto;
}

.kopf h1 {
  position: relative;
  min-width: 0;
  margin: 0;
  color: #fff;
  font-size: 1.3rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* Sehr schmale Geräte: Das Logo würde den Titel sonst umbrechen lassen. Dann
   untereinander, Logo weiterhin rechts. */
@media (max-width: 26rem) {
  .kopf {
    flex-direction: column;
    align-items: flex-end;
    gap: 0.55rem;
  }
  .kopf h1 { align-self: flex-start; }
}

.inhalt {
  padding: 1.5rem 1.75rem 2rem;
}

h2 {
  margin: 1.9rem 0 0.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--brand);
  font-size: 1.08rem;
}

/* Erste Überschrift direkt unter dem Kopf braucht keine Trennlinie darüber. */
.inhalt > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

h3 {
  margin: 1.4rem 0 0.4rem;
  color: var(--brand-hell);
  font-size: 0.98rem;
}

p, ul, ol, table { margin: 0 0 0.9rem; }
ul, ol { padding-left: 1.25rem; }
li { margin-bottom: 0.35rem; }

a { color: var(--brand-hell); }

/* Adressblöcke: nur die Zeilenumbrüche wie geschrieben, ohne Hinterlegung –
   die war zu laut, die Seite hat davon zu viele. */
.block {
  white-space: pre-line;
  margin: 0 0 0.9rem;
}

.stand {
  margin-top: 2.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.85rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

th, td {
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

th {
  background: linear-gradient(180deg, #f3f6fa, #e8eef7);
  color: var(--brand);
  font-weight: 600;
}

/* Auf schmalen Geräten dürfen Tabellen seitlich rollen, statt das Layout zu
   sprengen – die Datenschutzerklärung hat eine breite Übersichtstabelle. */
.tabelle-rollt {
  overflow-x: auto;
  margin-bottom: 0.9rem;
}
.tabelle-rollt table { margin-bottom: 0; }

@media (max-width: 40rem) {
  body { padding: 0.75rem 0.6rem 2rem; }
  .kopf { padding: 1.1rem 1.15rem; }
  .inhalt { padding: 1.2rem 1.15rem 1.6rem; }
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Das Navy der Marke ist auf dunklem Grund nicht mehr lesbar – Überschriften
       und Links laufen deshalb auf die helle Stufe derselben Skala. */
    --brand: #8fa9d4;
    --brand-hell: #a9c0e4;
    --text: #e6ebf3;
    --muted: #9fb0c9;
    --line: #2b3a5c;
    --karte: #131c30;
    --grund: #0b1424;
  }
  th { background: linear-gradient(180deg, #1a2540, #16203a); }
}

/* Theme „Modern" der App (Einstellungen → Darstellung). Die App setzt data-theme am
   <html> dieses Dokuments, wenn sie die Seite im Overlay zeigt (RechtsText.tsx); beim
   direkten Aufruf fehlt das Attribut und es bleibt bei der Fassung oben. Werte wie in
   apps/web/src/themes.css (dort per Token, hier fest — ohne Bundle gibt es keine Tokens).
   Nur für hellen Modus; der dunkle Modus oben bleibt unberührt. */
@media (prefers-color-scheme: no-preference), (prefers-color-scheme: light) {
  html[data-theme='modern'] {
    --grund: #ffffff;
    --line: #e2e8f0;
  }
  html[data-theme='modern'] main {
    border-radius: 5px;
    box-shadow: none;
  }
  /* Kopf: flach getönt wie Menü und Kopfzeile der App, Titel und Logo in Enzianblau. */
  html[data-theme='modern'] .kopf {
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
  }
  html[data-theme='modern'] .kopf::before { display: none; }
  html[data-theme='modern'] .kopf h1 { color: var(--brand); }
  html[data-theme='modern'] .kopf img { content: url("../itc-logo-horizontal.svg"); }
  html[data-theme='modern'] th { background: #f1f5f9; }
}