/* ============================================================================
 * themenseiten.css — gemeinsames Aussehen der öffentlichen Themenseiten
 * ============================================================================
 *
 * Die achtzehn Seiten unter /public/<thema>/index.html trugen jede ihren
 * eigenen, kopierten <style>-Block: rund fünfzig Zeilen, achtzehnmal
 * nebeneinander gepflegt — und alle in der alten Palette aus Blau (#3b82f6,
 * #60a5fa) und Lila (#8b5cf6). Beides ist laut Corporate Design Altlast: die
 * Marke führt in Teal, Magenta und Lila sind seit dem 14.07.2026 abgelöst, und
 * Blau war nie eine Markenfarbe, sondern unmigrierter Rest.
 *
 * Hier stehen die Farben deshalb als Merkmale (Tokens) und nicht als rohe
 * Zahlenwerte, und die Seiten binden diese Datei ein, statt sie zu kopieren.
 *
 * Grundsätze aus dem Corporate Design, die hier tragen:
 *   - Graphit trägt die Fläche, Teal führt als einzige Akzentfarbe.
 *   - Kein sichtbarer weißer Rahmen. Tiefe entsteht über Fläche und Haarlinie.
 *   - Inter als Hausschrift; die Seiten liefen vorher in der Systemschrift und
 *     sahen dadurch auf jedem Betriebssystem anders aus als die Startseite.
 *   - Fließtext höchstens 65 Zeichen breit, Zeilenhöhe rund 1,55.
 */

/* Hausschrift, selbst ausgeliefert.
 *
 * Nicht über ein fremdes Schriften-Netz: die Seite verspricht
 * Datensouveränität, und eine Schrift vom Server eines Dritten verrät jedem
 * Besuch die Adresse des Lesers. Die Dateien liegen unter /assets/fonts/ und
 * sind bewusst Kopien mit festem Namen — im Build tragen sie einen Prüfwert
 * im Dateinamen, der sich bei jedem Bauen ändert und den eine statische Seite
 * nicht mitbekommt.
 *
 * `font-display: swap`: der Text steht sofort da und wird nachträglich in
 * Inter gesetzt, statt für eine halbe Sekunde unsichtbar zu bleiben.
 */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-800-normal.woff2') format('woff2');
}

:root {
  /* Flächen */
  --graphite-950: #15171b;
  --graphite-900: #191c21;
  --graphite-850: #202429;
  --graphite-800: #272c33;
  --graphite-line: #2b2f37;
  --seiten-grund: #101215;

  /* Schrift */
  --text-hi: #f3f4f6;
  --text-mid: #9ca2ac;
  --text-lo: #6a6f7a;

  /* Marke */
  --brand: #22d3ee;
  --brand-bright: #67e8f9;
  --brand-deep: #0e9bb8;
  --brand-green: #4ade80;
  --grad-brand: linear-gradient(135deg, var(--brand-green), var(--brand) 55%, var(--brand-deep));

  /* Zustände (nur semantisch verwenden) */
  --fn-ok: #4ade80;
  --fn-alert: #ef4444;
  --fn-amber: #d9a441;
}

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

body {
  background: var(--seiten-grund);
  color: var(--text-hi);
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  line-height: 1.6;
}

a { color: var(--brand-bright); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Kopfzeile ───────────────────────────────────────────────────────────── */

nav {
  background: rgba(16, 18, 21, 0.92);
  border-bottom: 1px solid var(--graphite-line);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
nav img { height: 26px; width: auto; }
nav a { color: var(--text-mid); font-size: 13px; font-weight: 500; }
nav a:hover { color: var(--text-hi); text-decoration: none; }
nav .sep { color: var(--text-lo); }

/* Die Marken-Schaltfläche: Teal-Fläche mit dunkler Schrift darauf — so steht
   es im Corporate Design für den primären Ruf zur Handlung. */
.nav-cta {
  background: var(--brand);
  color: #06232b;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: 8px;
}
.nav-cta:hover { background: var(--brand-bright); color: #06232b; text-decoration: none; }

/* ── Satzspiegel ─────────────────────────────────────────────────────────── */

.wrap { max-width: 820px; margin: 0 auto; padding: 0 24px; }
.hero { padding: 64px 0 52px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(34, 211, 238, 0.1);
  border-radius: 100px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-bright);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

h1 {
  font-size: clamp(26px, 4.5vw, 44px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 14px;
  color: var(--text-hi);
}
h2 {
  font-size: clamp(19px, 2.5vw, 25px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 48px 0 14px;
  color: var(--text-hi);
}
h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; color: var(--text-hi); }

.lead {
  font-size: 17px;
  color: var(--text-mid);
  line-height: 1.7;
  max-width: 62ch;
  margin-bottom: 32px;
}
p { color: var(--text-mid); font-size: 15.5px; line-height: 1.7; margin-bottom: 14px; max-width: 68ch; }

/* ── Querverweise ────────────────────────────────────────────────────────── */

.back-links { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 36px; font-size: 13px; }
.back-links a {
  color: var(--text-mid);
  padding: 7px 13px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  /* Mindestmaß zum Antippen (WCAG 2.5.8) — vorher 26px hoch. */
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}
.back-links a:hover { color: var(--text-hi); background: rgba(255, 255, 255, 0.08); text-decoration: none; }

/* ── Karten und Kästen ───────────────────────────────────────────────────── */

.scenario-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 12px;
  margin: 20px 0;
}
.sce-card {
  background: var(--graphite-850);
  border-radius: 14px;
  padding: 20px 18px;
  position: relative;
  overflow: hidden;
}
.sce-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-brand);
}
.sce-card .icon { font-size: 26px; margin-bottom: 10px; }
.sce-card h3 { font-size: 15px; margin-bottom: 6px; }
.sce-card p { font-size: 13.5px; color: var(--text-mid); margin: 0; }

.checklist { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--text-mid);
  font-size: 14.5px;
  line-height: 1.55;
}
.checklist li::before { content: "✓"; color: var(--brand); flex-shrink: 0; font-weight: 700; margin-top: 1px; }

.highlight-box {
  background: rgba(34, 211, 238, 0.06);
  border-radius: 14px;
  padding: 24px;
  margin: 20px 0;
}
.highlight-box h3 { color: var(--brand-bright); margin-bottom: 10px; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0; }
@media (max-width: 540px) { .two-col { grid-template-columns: 1fr; } }
.col-box { background: var(--graphite-850); border-radius: 12px; padding: 18px; }
.col-box h3 { font-size: 14.5px; margin-bottom: 10px; }
.col-box ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.col-box li { font-size: 13.5px; color: var(--text-mid); display: flex; gap: 8px; }
.col-box li::before { content: "›"; color: var(--brand); flex-shrink: 0; }

.stat-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0; }
.stat-pill {
  background: rgba(34, 211, 238, 0.1);
  border-radius: 100px;
  padding: 8px 18px;
  font-size: 13px;
  color: var(--brand-bright);
  font-weight: 600;
}

/* ── Tabellen ────────────────────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; margin: 16px 0; }
.fwdv-table, .compare-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
.fwdv-table th, .compare-table th {
  background: rgba(34, 211, 238, 0.08);
  padding: 10px 14px;
  text-align: left;
  font-weight: 700;
  color: var(--brand-bright);
  border-bottom: 1px solid var(--graphite-line);
}
.fwdv-table td, .compare-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--graphite-line);
  color: var(--text-mid);
}
.fwdv-table tr:last-child td, .compare-table tr:last-child td { border-bottom: none; }

/* ── Häufige Fragen ──────────────────────────────────────────────────────── */

/* Eine Frage je Kasten, Antwort direkt darunter — dieselbe Form, die auch das
   strukturierte Datenblatt (FAQPage) der Seite abbildet. Ausgeschriebene
   Fragen sind das, was Suchmaschinen und Antwortdienste zitieren. */
.faq-liste { display: flex; flex-direction: column; gap: 10px; margin: 20px 0; }
.faq-item { background: var(--graphite-850); border-radius: 12px; padding: 18px 20px; }
.faq-item h3 { font-size: 15.5px; color: var(--text-hi); margin-bottom: 8px; }
.faq-item p { font-size: 14.5px; color: var(--text-mid); margin: 0; max-width: none; }

/* ── Abschluss ───────────────────────────────────────────────────────────── */

.cta-box {
  background: var(--graphite-850);
  border-radius: 20px;
  padding: 48px 40px;
  text-align: center;
  margin: 64px 0;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--brand);
  color: #06232b;
  font-weight: 700;
  font-size: 15px;
  padding: 14px 32px;
  border-radius: 12px;
  text-decoration: none;
}
.btn:hover { background: var(--brand-bright); color: #06232b; text-decoration: none; }

footer {
  background: var(--graphite-950);
  border-top: 1px solid var(--graphite-line);
  padding: 28px 24px;
  margin-top: 64px;
}
.footer-inner {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12.5px;
  color: var(--text-lo);
}
.footer-inner a { color: var(--text-mid); text-decoration: none; }
.footer-inner a:hover { color: var(--text-hi); }

@media (max-width: 600px) {
  .hero { padding: 48px 0 36px; }
  .cta-box { padding: 32px 20px; }
}