/* PULPA · Unterseiten (Über diese Seite, Impressum, Datenschutz, 404) · unterseite.css v1.3 · Stand 2026-10-05 (v1.3 Fix 5: Fließtext-Links Tippfläche sicher >= 44 px; v1.1 Fix 1: Mikrolabels ohne Schrägstriche, Mikrolabel und Fuß >= 16 px; v1.2 Fix 4: Knopf-Innenabstand)
   Leseseiten im RAVARO-Teil der Marke (DESIGN.md im Arbeitsordner, Werte wie kipp.css): Grund #0E0F12 mit feinem Raster,
   Space Grotesk für Überschriften, Inter für Text, JetBrains Mono für Mikrolabels, Orange #FF7716 nur als Akzent.
   Kopf und Fuß randlos, Fließtext in einer Lesespalte (Regel #11, Grenze für Leseseiten). Einzige Bewegung: dezentes Aufdecken.
   Die 404-Seite liegt in der PULPA-Welt (Abschnitt unten, Klasse .fehlt). Alle Pfade absolut, weil die Seiten in Ordnern liegen
   und die 404 unter jeder Adresse ausgeliefert wird. */

@font-face { font-family: "Space Grotesk"; src: url("/schrift/space-grotesk-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/schrift/inter-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/schrift/jetbrains-mono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Caprasimo"; src: url("/schrift/caprasimo-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --rv-grund: #0E0F12;
  --rv-flaeche: #17181B;
  --rv-linie: rgba(255, 255, 255, 0.14);
  --rv-text: #F8F8F8;
  --rv-leise: #BBBEC3;
  --rv-orange: #FF7716;
  --rv-auf-orange: #0A0B0D;
  --rv-schrift-titel: "Space Grotesk", system-ui, sans-serif;
  --rv-schrift-text: "Inter", system-ui, sans-serif;
  --rv-schrift-mono: "JetBrains Mono", ui-monospace, monospace;
  --rv-rand: clamp(16px, 4.4vw, 112px);
  --rv-raster:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 48px 48px;
  --us-auf: 620ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100svh; display: flex; flex-direction: column;
  background: var(--rv-raster), var(--rv-grund); color: var(--rv-text);
  font-family: var(--rv-schrift-text); font-size: clamp(16.5px, 1.05vw, 21px); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--rv-text); outline-offset: 3px; border-radius: 4px; }

.sprung {
  position: absolute; left: 12px; top: 12px; z-index: 5; padding: 10px 14px; border-radius: 8px;
  background: var(--rv-text); color: var(--rv-grund); transform: translateY(-200%);
}
.sprung:focus { transform: none; }

.us-mikro {
  margin: 0; font-family: var(--rv-schrift-mono); font-weight: 500; font-size: clamp(16px, 0.85vw, 18px);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--rv-leise);
}

/* ---- Kopf: Weg zurück ---- */
.us-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap;
  padding: clamp(14px, 1.4vw, 28px) var(--rv-rand); border-bottom: 1px solid var(--rv-linie);
}
.us-zurueck {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px;
  font-weight: 500; text-decoration: none; color: var(--rv-text);
}
.us-zurueck svg { width: 20px; height: 20px; flex: none; transition: transform 200ms ease; }
@media (hover: hover) { .us-zurueck:hover svg { transform: translateX(-3px); } .us-zurueck:hover span { text-decoration: underline; } }

/* ---- Inhalt: Titel links, Lesespalte rechts (ab 1100 px), sonst untereinander ---- */
.us-haupt {
  flex: 1; width: 100%;
  padding: clamp(48px, 6vw, 140px) var(--rv-rand) clamp(56px, 6vw, 140px);
  display: grid; gap: clamp(20px, 2vw, 40px);
}
@media (min-width: 1100px) {
  .us-haupt { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 6vw, 160px); align-items: start; }
  .us-titelblock { position: sticky; top: clamp(32px, 4vw, 80px); }
}
.us-titel {
  margin: clamp(12px, 1.2vw, 24px) 0 0; font-family: var(--rv-schrift-titel); font-weight: 600;
  font-size: clamp(38px, 4.6vw, 112px); line-height: 1; letter-spacing: -0.02em; text-transform: uppercase;
  overflow-wrap: break-word; hyphens: auto;
}
.us-titel em { font-style: normal; color: var(--rv-orange); }
.us-text { max-width: 65ch; min-width: 0; }
.us-text > :first-child { margin-top: 0; }
.us-text p, .us-text address, .us-text ul { margin: 0 0 1em; }
.us-text address { font-style: normal; }
.us-text h2 {
  margin: 2.2em 0 0.6em; font-family: var(--rv-schrift-titel); font-weight: 600; font-size: clamp(21px, 1.5vw, 32px);
  line-height: 1.2; letter-spacing: -0.01em;
}
.us-text h3 { margin: 1.8em 0 0.4em; font-family: var(--rv-schrift-titel); font-weight: 600; font-size: 1.05em; line-height: 1.3; }
.us-text ul { padding-left: 1.2em; }
.us-text li { margin: 0 0 0.5em; }
.us-text li::marker { color: var(--rv-orange); }
.us-text a { text-decoration-color: rgba(255, 255, 255, 0.45); text-underline-offset: 3px; overflow-wrap: anywhere; }
/* v1.1 Fix 1: Links im Fließtext — Tippfläche 44 px über Innenabstand, ohne die Zeile zu verschieben (wie der Haken-Link im Formular) */
.us-text a { padding: 13px 0; }   /* v1.3 Fix 5: 12 px ergaben 43,x px (Mail-Link im Datenschutz) */
@media (hover: hover) { .us-text a:hover { text-decoration-color: var(--rv-orange); } }
.us-text code { font-family: var(--rv-schrift-mono); font-size: 0.88em; padding: 1px 6px; border-radius: 4px; background: var(--rv-flaeche); border: 1px solid var(--rv-linie); }
.us-lead { font-size: 1.18em; line-height: 1.5; color: var(--rv-text); }
.us-leise { color: var(--rv-leise); }
.us-hinweis {
  margin: 0 0 2em !important; padding: 14px 18px; border: 1px solid var(--rv-linie); border-left: 3px solid var(--rv-orange);
  background: var(--rv-flaeche); border-radius: 0.5rem; color: var(--rv-leise);
}
.us-hinweis b { color: var(--rv-text); font-weight: 600; }
.us-stand { margin-top: 2.4em !important; font-family: var(--rv-schrift-mono); font-size: 0.82em; letter-spacing: 0.06em; color: var(--rv-leise); }

/* ---- Abschluss mit Knopf ---- */
.us-schluss { margin-top: 2.6em; padding-top: 1.6em; border-top: 1px solid var(--rv-linie); }
.us-schluss p { margin: 0 0 1.1em; }
/* v1.2 Fix 4 (Befund 7): .us-text a (Innenabstand 12px 0) war spezifischer und nahm dem Knopf den Rand links und rechts */
.us-knopf, .us-text .us-knopf {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px; border-radius: 8px;
  background: var(--rv-orange); color: var(--rv-auf-orange); font-weight: 600; text-decoration: none; transition: background 200ms ease;
}
.us-knopf svg { width: 18px; height: 18px; flex: none; transition: transform 200ms ease; }
@media (hover: hover) { .us-knopf:hover { background: #FF8A35; } .us-knopf:hover svg { transform: translateX(3px); } }

/* ---- Fuß ---- */
.us-fuss {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 40px;
  padding: clamp(32px, 3vw, 72px) var(--rv-rand); border-top: 1px solid var(--rv-linie);
  font-size: clamp(16px, 0.9vw, 19px); color: var(--rv-leise);
}
.us-fuss p { margin: 0; }
.us-logo { display: block; width: clamp(160px, 11vw, 280px); height: auto; margin: 8px 0; }
.us-fuss-links { display: flex; flex-wrap: wrap; gap: 0 22px; }
.us-fuss-links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.us-fuss-links a:hover, .us-fuss-links a[aria-current="page"] { color: var(--rv-text); text-decoration: underline; text-underline-offset: 4px; }
.us-version { margin-left: auto !important; font-family: var(--rv-schrift-mono); font-weight: 500; letter-spacing: 0.08em; }
@media (max-width: 700px) {
  .us-fuss { gap: 4px 24px; }
  .us-fuss-links { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
}

/* ---- Aufdecken: einmal beim Laden, gestaffelt ---- */
@keyframes us-auf { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.us-auf { animation: us-auf var(--us-auf) cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 80ms); }
@media (prefers-reduced-motion: reduce) { .us-auf { animation: none; } .us-zurueck svg, .us-knopf svg { transition: none; } }

/* =====================================================================================================
   404 — in der PULPA-Welt: Kirschrot, Caprasimo, die Schlange groß
   ===================================================================================================== */
.fehlt {
  --p-grund: #B5121B; --p-tief: #5E0A10; --p-wort: #FBE3D6; --p-tinte: #2F0508;
  background: radial-gradient(120% 90% at 50% 30%, var(--p-grund) 0%, var(--p-tief) 100%); color: var(--p-wort);
}
.fehlt .sprung { background: var(--p-wort); color: var(--p-tinte); }
.fehlt a:focus-visible { outline-color: var(--p-wort); }
.fehlt-kopf { padding: clamp(14px, 1.4vw, 28px) var(--rv-rand); }
.fehlt-marke {
  display: inline-flex; align-items: center; min-height: 44px; font-family: "Caprasimo", Georgia, serif;
  font-size: clamp(24px, 1.8vw, 40px); text-decoration: none; letter-spacing: 0.01em;
}
.fehlt-haupt {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: clamp(16px, 3vw, 64px) var(--rv-rand) clamp(48px, 5vw, 120px);
}
.fehlt-kopfbild { width: clamp(170px, 26vmin, 420px); height: auto; aspect-ratio: 100 / 97; margin: 0 0 clamp(36px, 4.4vmin, 72px); }
.fehlt-kopfbild svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fehlt .sch-kopf { fill: #0B0B0C; stroke: #FBF1E4; stroke-width: 3; stroke-linejoin: round; paint-order: stroke; }
.fehlt .sch-weiss { fill: #FFF7EC; }
.fehlt .sch-pupille, .fehlt .sch-lid { fill: #0B0B0C; }
.fehlt .sch-zunge { transform: translateY(-22px); transition: transform 260ms ease; }
.fehlt .sch-zunge.raus { transform: none; }
.fehlt-titel {
  margin: 0; font-family: "Caprasimo", Georgia, serif; font-weight: 400;
  font-size: clamp(36px, 5.4vw, 120px); line-height: 1.02; max-width: 16ch; text-wrap: balance;
}
.fehlt-satz { margin: clamp(14px, 1.4vw, 28px) 0 0; font-size: clamp(19px, 1.6vw, 36px); line-height: 1.35; }
.fehlt-wege { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; margin-top: clamp(28px, 3vw, 56px); }
.fehlt-knopf {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border-radius: 999px;
  font-weight: 600; text-decoration: none; border: 2px solid var(--p-wort); transition: background 200ms ease, color 200ms ease;
}
.fehlt-knopf--haupt { background: var(--p-wort); color: var(--p-tinte); }
@media (hover: hover) {
  .fehlt-knopf--haupt:hover { background: #FFFFFF; border-color: #FFFFFF; }
  .fehlt-knopf--neben:hover { background: var(--p-wort); color: var(--p-tinte); }
}
.fehlt-fuss {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 22px; padding: 10px var(--rv-rand);
  background: var(--p-tinte); font-size: clamp(13px, 0.85vw, 18px);
}
.fehlt-fuss p { margin: 0; }
.fehlt-fuss a { display: inline-flex; align-items: center; min-height: 44px; }
.fehlt-fuss .us-version { color: var(--p-wort); }
@media (max-width: 700px) {
  .fehlt-wege { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; }
}
@media (max-width: 520px) { .us-kopf .us-mikro { display: none; } }