/* =====================================================================
   DiamApps – gemeinsame Stildatei aller Seiten
   ---------------------------------------------------------------------
   DUNKLE FASSUNG (04.09.2026). Marios Vorgabe: elegant, dunkel, modern.
   Mattes Schwarz als Grund, Flächen nur eine Spur davon abgesetzt, und
   als Akzent ein heller Diamantton – ein kühles, sehr helles Blau, das
   die Titan-Night-Facetten des Steins aufnimmt. Funktionen, Texte und
   Namen sind unverändert; geändert sind
   ausschließlich Farben, Flächen und das Logo.

   Kontraste sind gerechnet, nicht geschätzt (Grund --bg #050505):
     Text #F5F5F7 = 18,7:1 · Nebentext #A3A3A8 = 8,1:1
     Diamantton #B4D6EC = 13,4:1
   ===================================================================== */

:root {
  --diamant: #B4D6EC;        /* Diamantton – heller, kühler Akzent für Schrift */
  --diamant-hell: #EAF4FB;   /* Eis, fast weiß – Glanzstellen */
  --ink: #F5F5F7;            /* modernes helles Weiß, neutral */
  --ink-soft: #A3A3A8;       /* Nebentext */
  --bg: #050505;             /* mattes Schwarz */
  --flaeche: #0C0C0E;        /* Karten: schwarz, nur eine Spur abgesetzt */
  --flaeche-hoch: #131316;
  --line: rgba(255, 255, 255, 0.09);
  --card-kante: rgba(255, 255, 255, 0.07);
  /* App-Symbole tragen seit 1.0.7 den Nachtgrund der Apps (#16161B) und wären
     sonst kaum von der Karte zu unterscheiden – dieser feine helle Rand setzt
     sie ab, ohne aufzutragen. Nur hier; die Symbole selbst sind unverändert. */
  --appicon-kante: rgba(255, 255, 255, 0.24);
  --schatten: 0 22px 50px rgba(0, 0, 0, 0.6);
  --radius: 26px;

  /* ---- Schrift-Skala ----
     Sieben Stufen, mehr braucht die Seite nicht. Vorher lagen allein auf
     der Ebene h3 vier verschiedene Groessen (1,55/1,45/1,30/1,08rem) und
     im Fliesstext fuenf (1,00-0,90rem) – das wirkte unabsichtlich. */
  --t-mikro: 0.8125rem;   /* 13px – Chips, Abzeichen, Fussnoten */
  --t-klein: 0.9375rem;   /* 15px – Navigation, Kartentext, Tabellen */
  --t-body:  1rem;        /* 16px – Fliesstext */
  --t-lead:  1.125rem;    /* 18px – Vorspann, Anspruch, Einleitung */
  --t-h4:    1.0625rem;   /* 17px – Kartenueberschrift */
  --t-h3:    1.375rem;    /* 22px – Abschnittsueberschrift zweiter Ebene */
  --t-h2:    2rem;        /* 32px – Abschnittsueberschrift */

  /* ---- Zeilenhoehen: je groesser die Schrift, desto enger ---- */
  --z-display: 1.06;
  --z-h2: 1.18;
  --z-h3: 1.28;
  --z-h4: 1.38;
  --z-text: 1.65;

  /* ---- Senkrechter Rhythmus, durchgehend Vielfache von 4 ---- */
  --a-etikett: 10px;   /* Etikett -> Ueberschrift */
  --a-titel: 12px;     /* Ueberschrift -> Text */
  --a-absatz: 12px;    /* Absatz -> Absatz */
  --a-block: 48px;     /* Abschnittsteil -> naechster */
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: var(--z-text);
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(180, 214, 236, 0.28); color: #fff; }

/* ---------- Bühne: mattes Schwarz ----------
   Zwei Ebenen. Unten ein neutraler, sehr flacher Verlauf. Darüber eine
   feine Körnung aus fraktalem
   Rauschen – als SVG in der Datei, also ohne zusätzliche Anfrage und in
   jeder Auflösung scharf. Die Körnung ist das, was den Lederton macht:
   ohne sie wäre es nur ein schwarzes Feld. */
.stage {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, #060607 0%, var(--bg) 42%, #040404 100%);
}
.stage::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='k'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23k)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.035' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='420' height='420' filter='url(%23g)'/></svg>");
  background-size: 200px 200px, 420px 420px;
  opacity: 0.055;
  mix-blend-mode: soft-light;
}
/* Sprungmarke für Tastatur- und Screenreader-Nutzung */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--flaeche-hoch); color: var(--diamant); padding: 12px 18px;
  border: 1px solid var(--line); border-radius: 0 0 14px 0; font-weight: 600;
}
.skip:focus { left: 0; }

/* ---------- Navigation ---------- */
header {
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  background: rgba(5, 5, 5, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.nav {
  max-width: 1060px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; gap: 12px;
}
.nav img { width: 34px; height: 34px; object-fit: contain; }
.nav a.brandlink { text-decoration: none; color: inherit; display: flex; align-items: center; gap: 12px; }
/* Die Wortmarke traegt bewusst eine eigene Groesse: sie ist Markenzeichen,
   kein Text – deshalb steht sie ausserhalb der Skala. */
.nav .brand { font-size: 1.18rem; font-weight: 700; letter-spacing: -0.02em; }
.nav .brand span { color: var(--diamant); }
.nav nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.nav nav a { color: var(--ink-soft); text-decoration: none; font-size: var(--t-klein); font-weight: 500; }
.nav nav a:hover, .nav nav a:focus-visible { color: var(--diamant-hell); }
.nav nav a[aria-current="page"], .nav nav a.navaktiv { color: var(--diamant); font-weight: 600; }
.langswitch {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 4px; background: var(--flaeche);
}
.langswitch a {
  font-size: var(--t-mikro); font-weight: 600; text-decoration: none;
  color: var(--ink-soft); padding: 3px 9px; border-radius: 999px; line-height: 1.4;
}
.langswitch a[aria-current="true"] {
  background: linear-gradient(135deg, var(--diamant-hell), var(--diamant)); color: #08131A;
}
@media (max-width: 720px) {
  .nav { padding: 12px 16px; gap: 9px; flex-wrap: wrap; }
  .nav nav { gap: 14px; width: 100%; margin-left: 0; padding-top: 4px; overflow-x: auto; }
  .nav nav a { font-size: var(--t-mikro); white-space: nowrap; }
  .nav .brand { font-size: 1.06rem; }
}

/* ---------- Hero (Startseite) ---------- */
.hero { max-width: 1060px; margin: 0 auto; padding: 84px 24px 64px; text-align: center; }
.hero img.logo {
  width: 118px; height: 118px;
  object-fit: contain;
  animation: floaty 8s ease-in-out infinite;
  filter: drop-shadow(0 14px 32px rgba(0, 0, 0, 0.6));
}
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) { .hero img.logo { animation: none; } }
.hero h1 {
  font-size: clamp(2.6rem, 7vw, 4.2rem);
  font-weight: 800; letter-spacing: -0.035em; margin-top: 18px;
  filter: drop-shadow(0 0 26px rgba(180, 214, 236, 0.16));
  background: linear-gradient(108deg, #9FC6DF 0%, #EAF4FB 12%, #FFFFFF 24%, #A9CFE6 38%, #FFFFFF 50%, #C6E1F3 62%, #86B2CD 76%, #F2F9FD 90%, #FFFFFF 100%);
  background-size: 160% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  line-height: var(--z-display);
}
.hero p.tag { max-width: 560px; margin: 22px auto 0; font-size: var(--t-lead); color: var(--ink-soft); }
.hero .cta, .contact-card .cta {
  display: inline-block; margin-top: 34px;
  padding: 14px 34px; border-radius: 999px;
  background: linear-gradient(135deg, var(--diamant-hell), var(--diamant));
  color: #08131A; text-decoration: none; font-weight: 700; font-size: var(--t-body);
  box-shadow: 0 14px 34px rgba(180, 214, 236, 0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hero .cta:hover, .contact-card .cta:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(180, 214, 236, 0.28); }

/* ---------- Abschnitte ---------- */
section { max-width: 1060px; margin: 0 auto; padding: 56px 24px; }
.kicker { color: var(--diamant); font-weight: 700; font-size: var(--t-mikro); letter-spacing: 0.16em; text-transform: uppercase; }
h2 { font-size: var(--t-h2); letter-spacing: -0.025em; margin-top: var(--a-etikett);
  line-height: var(--z-h2);
}
.lead { color: var(--ink-soft); max-width: 640px; margin-top: var(--a-titel);
  font-size: var(--t-lead);
}

/* ---------- App-Karten ---------- */
.apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px; margin-top: 36px; }
.app-card {
  background: var(--flaeche);
  border: 1px solid var(--card-kante);
  border-radius: var(--radius); padding: 34px 30px;
  box-shadow: var(--schatten);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  display: flex; flex-direction: column;
}
.app-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 30px 62px rgba(0, 0, 0, 0.62);
}
.app-card img.appicon {
  width: 104px; height: 104px; border-radius: 24%;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  border: 1px solid var(--appicon-kante);
}
.app-card h3 { font-size: var(--t-h3); margin-top: 20px; letter-spacing: -0.02em;
  line-height: var(--z-h3);
}
.app-card .sub { color: var(--diamant); font-weight: 600; font-size: var(--t-klein); margin-top: 6px; }
.app-card p.desc { color: var(--ink-soft); margin-top: var(--a-titel); font-size: var(--t-body); }
.app-card .more { margin-top: 18px; align-self: flex-start; text-decoration: none; color: var(--diamant); font-weight: 600; font-size: var(--t-klein); }
.app-card .more:hover { color: var(--diamant-hell); text-decoration: underline; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chip {
  font-size: var(--t-mikro); font-weight: 600; color: var(--ink-soft);
  background: var(--flaeche);
  border: 1px solid var(--card-kante);
  padding: 5px 12px; border-radius: 999px;
}
.chip.status { color: var(--diamant); background: rgba(180, 214, 236, 0.10); border-color: rgba(180, 214, 236, 0.26); }

/* ---------- Werte ---------- */
.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; margin-top: 36px; }
.value {
  background: var(--flaeche);
  border: 1px solid var(--card-kante);
  border-radius: 22px; padding: 26px 24px;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.45);
}
.value .icon {
  /* Eigene Linien-Symbole statt Emoji: gleiche Strichstärke, gleiche
     Sprache wie das Logo. Bewusst ohne Kachel – auf mattem Schwarz wirkt
     das Zeichen für sich ruhiger als in einem Kästchen. */
  width: 34px; height: 34px;
  color: var(--diamant);
  filter: drop-shadow(0 0 16px rgba(180, 214, 236, 0.20));
}
.value .icon svg { width: 100%; height: 100%; display: block; }
.value h3 { font-size: var(--t-h4); margin-top: 16px;
  line-height: var(--z-h4);
}
.value p { color: var(--ink-soft); font-size: var(--t-klein); margin-top: 8px; }

/* ---------- App-Detailseiten ---------- */
.crumb { max-width: 1060px; margin: 0 auto; padding: 22px 24px 0; }
.crumb a { color: var(--ink-soft); text-decoration: none; font-size: var(--t-klein); font-weight: 500; }
.crumb a:hover { color: var(--diamant); }

.apphead { max-width: 1060px; margin: 0 auto; padding: 26px 24px 10px; display: flex; gap: 30px; align-items: flex-start; }
.apphead img.appicon {
  width: 124px; height: 124px; border-radius: 24%;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.55);
  border: 1px solid var(--appicon-kante);
  flex-shrink: 0;
}
.apphead h1 {
  font-size: clamp(2.1rem, 5vw, 3rem); font-weight: 800; letter-spacing: -0.035em; line-height: var(--z-display);
  background: linear-gradient(108deg, #9FC6DF 0%, #EAF4FB 12%, #FFFFFF 24%, #A9CFE6 38%, #FFFFFF 50%, #C6E1F3 62%, #86B2CD 76%, #F2F9FD 90%, #FFFFFF 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.apphead .claim { font-size: var(--t-lead); color: var(--ink-soft); margin-top: var(--a-titel); }
.apphead .meta { margin-top: 16px; font-size: var(--t-klein); color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.badge {
  display: inline-block; font-size: var(--t-mikro); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
  color: var(--diamant); background: rgba(180, 214, 236, 0.14); border: 1px solid var(--line);
}
/* „In Entwicklung" bewusst leiser als „Beta": je weiter von der Reife
   entfernt, desto zurückhaltender das Abzeichen. */
.badge.dev { color: var(--ink-soft); background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.12); }
@media (max-width: 640px) {
  .apphead { flex-direction: column; gap: 18px; padding-top: 18px; }
  .apphead img.appicon { width: 96px; height: 96px; }
}

.appintro { max-width: 1060px; margin: 0 auto; padding: 10px 24px 0; }
.appintro p { max-width: 700px; font-size: var(--t-lead); color: var(--ink-soft); }

.toc { max-width: 1060px; margin: 26px auto 0; padding: 0 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.toc a {
  font-size: var(--t-mikro); font-weight: 600; text-decoration: none;
  color: var(--ink-soft); background: var(--flaeche);
  border: 1px solid var(--card-kante); padding: 6px 13px; border-radius: 999px;
}
.toc a:hover { color: var(--diamant); background: rgba(180, 214, 236, 0.10); border-color: rgba(180, 214, 236, 0.26); }

.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin-top: var(--a-block); }
.feature.flip .feature-text { order: 2; }
.feature > :only-child { grid-column: 1 / -1; max-width: 760px; }
.feature h2, .feature h3 { font-size: var(--t-h3); letter-spacing: -0.02em;
  line-height: var(--z-h3);
  margin-top: 0;
}
.feature .eyebrow { color: var(--diamant); font-weight: 700; font-size: var(--t-mikro); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: var(--a-etikett); }
.feature p { color: var(--ink-soft); margin-top: var(--a-titel); }
.feature ul { margin-top: 14px; padding-left: 0; list-style: none; display: grid; gap: 9px; }
.feature ul li { color: var(--ink-soft); padding-left: 26px; position: relative; }
.feature ul li::before {
  content: ""; position: absolute; left: 6px; top: 0.62em;
  width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(135deg, var(--diamant-hell), var(--diamant));
}
@media (max-width: 820px) {
  .feature { grid-template-columns: 1fr; gap: 24px; margin-top: 40px; }
  .feature.flip .feature-text { order: 0; }
}

/* Bildschirmfoto-Rahmen: die Aufnahmen sind hell, deshalb ein ruhiger
   dunkler Rahmen mit schmaler heller Kante statt einer hellen Glasfläche. */
.shot {
  border-radius: 30px; overflow: hidden;
  background: var(--flaeche);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 26px 56px rgba(0, 0, 0, 0.6);
  padding: 18px;
}
.shot img { display: block; width: 100%; height: auto; border-radius: 18px; }

.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 32px; }
.mini {
  background: var(--flaeche);
  border: 1px solid var(--card-kante);
  border-radius: 22px; padding: 24px 22px;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.45);
}
.mini h3 { font-size: var(--t-h4); letter-spacing: -0.01em;
  line-height: var(--z-h4);
}
.mini p { color: var(--ink-soft); font-size: var(--t-klein); margin-top: 8px; }

/* Abschnitt „Ehrlich gesagt" – Grenzen offen benennen */
.honest {
  margin-top: var(--a-block); border-radius: var(--radius);
  background: var(--flaeche);
  border: 1px solid var(--card-kante);
  padding: 32px 30px;
}
.honest h2 { font-size: var(--t-h3); letter-spacing: -0.02em;
  line-height: var(--z-h3);
  margin-top: 0;
}
.honest ul { margin-top: 14px; padding-left: 0; list-style: none; display: grid; gap: 10px; }
.honest ul li { color: var(--ink-soft); padding-left: 26px; position: relative; }
.honest ul li::before { content: "–"; position: absolute; left: 6px; top: 0; color: var(--diamant); font-weight: 700; }

/* Rechtlicher Hinweiskasten */
.notice {
  margin-top: 26px; border-radius: 20px;
  border: 1px solid rgba(180, 214, 236, 0.26);
  background: rgba(180, 214, 236, 0.06);
  padding: 22px 24px;
}
.notice h3 { font-size: var(--t-h4); color: var(--diamant);
  line-height: var(--z-h4);
}
.notice p { font-size: var(--t-klein); color: var(--ink-soft); margin-top: 8px; }

.specs { margin-top: 30px; display: grid; gap: 0; }
.specs .row { display: grid; grid-template-columns: 220px 1fr; gap: 20px; padding: 14px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.specs .row dt { font-weight: 600; font-size: var(--t-klein); }
.specs .row dd { color: var(--ink-soft); font-size: var(--t-klein); }
@media (max-width: 560px) { .specs .row { grid-template-columns: 1fr; gap: 3px; } }

/* ---------- Kontakt ---------- */
.contact-card {
  margin-top: 34px; text-align: center;
  background: var(--flaeche);
  border: 1px solid var(--card-kante);
  border-radius: var(--radius); padding: 48px 30px;
  box-shadow: var(--schatten);
}
.contact-card p { color: var(--ink-soft); max-width: 480px; margin: 8px auto 0; }
.contact-card a { color: var(--diamant); }
.contact-form { max-width: 560px; margin: 28px auto 0; text-align: left; display: grid; gap: 16px; }
.contact-form .field label { display: block; font-size: var(--t-klein); font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%; font: inherit; color: var(--ink);
  background: var(--flaeche);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 14px; padding: 12px 14px; outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none; appearance: none;
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(176, 168, 153, 0.65); }
.contact-form textarea { resize: vertical; min-height: 130px; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  border-color: var(--diamant); box-shadow: 0 0 0 3px rgba(180, 214, 236, 0.22);
}
.contact-form option { background: var(--flaeche-hoch); color: var(--ink); }
.contact-form .select-wrap { position: relative; }
.contact-form .select-wrap::after { content: "▾"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-soft); pointer-events: none; }
.contact-form button.send {
  justify-self: center; padding: 13px 34px; border-radius: 999px; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--diamant-hell), var(--diamant));
  color: #08131A; font: inherit; font-weight: 700; font-size: var(--t-body);
  box-shadow: 0 14px 34px rgba(180, 214, 236, 0.22);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.contact-form button.send:hover { transform: translateY(-2px); }
.contact-form button.send:disabled { opacity: 0.6; transform: none; cursor: default; }
.form-note { font-size: var(--t-mikro); color: var(--ink-soft); text-align: center; margin-top: 2px; }
.form-note a { color: var(--diamant); }
.form-status { display: none; margin: 26px auto 0; max-width: 480px; padding: 18px 22px; border-radius: 18px; font-weight: 500; }
.form-status.ok { display: block; background: rgba(96, 190, 130, 0.12); color: #8FD9AC; border: 1px solid rgba(96, 190, 130, 0.30); }
.form-status.err { display: block; background: rgba(224, 100, 100, 0.12); color: #F0A0A0; border: 1px solid rgba(224, 100, 100, 0.30); }

.contact-card .notice { text-align: left; max-width: 480px; margin-inline: auto; }

.mailto-hinweis { margin-top: 26px; font-size: var(--t-klein); }

.honest h2 + p { color: var(--ink-soft); margin-top: 8px; }

.contact-card .cta-zeile { margin-top: 18px; }
.contact-card .nachsatz  { margin-top: 20px; }
.contact-form .pflichtfeld-hinweis { text-align: left; margin-bottom: 4px; }

/* ---------- Fußzeile ---------- */
footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 40px; padding: 34px 24px 44px;
  text-align: center; color: var(--ink-soft); font-size: var(--t-klein);
}
footer .foot-brand { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; color: var(--ink); }
footer .foot-brand img { width: 22px; height: 22px; object-fit: contain; display: block; }
footer .footlinks { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; }
footer .footlinks a { color: var(--ink-soft); text-decoration: none; }
footer .footlinks a:hover { color: var(--diamant); text-decoration: underline; }
footer .copy { margin-top: 14px; font-size: var(--t-mikro); }

/* ---------- Rechtsseiten ---------- */
.legal { max-width: 760px; }
.legal h1 {
  font-size: clamp(2rem, 5vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em;
  background: linear-gradient(108deg, #9FC6DF 0%, #EAF4FB 12%, #FFFFFF 24%, #A9CFE6 38%, #FFFFFF 50%, #C6E1F3 62%, #86B2CD 76%, #F2F9FD 90%, #FFFFFF 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  line-height: var(--z-display);
}
.legal h2 { font-size: var(--t-h3); margin-top: 36px; letter-spacing: -0.015em;
  line-height: var(--z-h3);
}
.legal h3 { font-size: var(--t-h4); margin-top: 28px; letter-spacing: -0.01em;
  line-height: var(--z-h4); color: var(--ink);
}
.legal p { color: var(--ink-soft); margin-top: var(--a-absatz); }
.legal a { color: var(--diamant); }
.legal address { font-style: normal; color: var(--ink); margin-top: 10px; line-height: 1.75; }
.legal .updated { font-size: var(--t-mikro); color: var(--ink-soft); margin-top: 40px; }

/* Sprungziele nicht unter die klebende Kopfzeile schieben. */
[id] { scroll-margin-top: 124px; }
@media (min-width: 721px) { [id] { scroll-margin-top: 86px; } }

/* Erzwungener Kontrastmodus: Der Browser unterdrückt dort Hintergründe.
   Ohne diese Regel verschwände die Überschrift jeder Seite, weil ihre
   Füllung transparent ist. */
@media (forced-colors: active) {
  .hero h1, .apphead h1, .legal h1 {
    background: none; -webkit-text-fill-color: currentColor; color: CanvasText;
  }
  .stage { display: none; }
}