/* Die Rechtstexte im Gewand der Website.

   Eigene Datei und eigenes Stylesheet, weil diese Seiten nichts von der
   Startseite brauchen: keine Bühne, keine Geräte, keine Farbwelle, keine
   scrollgesteuerten Animationen. Sie sind Text, den jemand liest, weil er
   etwas wissen will — meist eine einzige Angabe, meist in Eile.

   Der Inhalt kommt aus der Anwendung und trägt keine Klassen mehr (siehe
   rechtliches.mjs). Formatiert wird deshalb nach Element. Das klingt nach
   einem Rückschritt und ist hier genau richtig: der Text ist sauber
   ausgezeichnet, und was sauber ausgezeichnet ist, braucht keine Klassen. */

/* The page inherits Lumo's own values rather than inventing a second identity.
   A marketing page in different colours from the product it sells reads as a
   page about some other app. */

:root {
  /* --- Ink and paper ---
     The app's background is #f5f4f1. The page sits one step lighter, so a
     screenshot dropped onto it reads as an object on a surface rather than as
     a patch of the same colour. Neither is pure white: #fff next to a warm
     off-white screenshot makes the screenshot look grey and dirty. */
  --paper: #fbfaf9;
  --paper-sunk: #f4f2ef;
  --ink: #111114;
  --ink-soft: #6f7278;
  --hairline: rgba(0, 0, 0, 0.08);

  /* Lumo's accent, unchanged. The only colour on the page that is not a grey. */
  --accent: #5b7cfa;

  /* --- Type ---
     Caveat carries the wordmark and every section's eyebrow, because it is the
     one thing that is unmistakably Lumo: it sits above every screen in the app
     itself. Inter does all the work. */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --hand: "Caveat", var(--sans);

  /* --- Rhythm ---
     One spacing scale, so no section invents its own gap. */
  --gap-xs: 0.5rem;
  --gap-s: 1rem;
  --gap-m: 2rem;
  --gap-l: 4rem;
  --gap-xl: 8rem;
  --section-y: clamp(7rem, 16vh, 14rem);
  --shell: min(1180px, 100% - 2 * clamp(1.5rem, 5vw, 5rem));

  /* --- Motion ---
     One curve. It is the app's own ease-apple: fast to leave, long and soft to
     settle, no overshoot. Durations are longer here than in the app — a page
     being read can afford what a button being tapped cannot. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal: 1000ms;
  --swap: 700ms;
}

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

html {
  /* Nur im Hochformat — am Schreibtisch ist die Seite bereits ruhig, und ein
     Einrasten dort nähme dem Mausrad die Feinsteuerung. */
  /* The whole page is one scroll story, so the browser's own smooth scrolling
     is the right behaviour for the few in-page jumps that exist. */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
  /* Nothing may scroll sideways. One element a few pixels too wide otherwise
     lets the entire page slide, which is the single most common way a
     carefully built layout falls apart on a phone. */
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }

::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}

/* The column everything lives in. */
.shell {
  width: var(--shell);
  margin-inline: auto;
}

.section {
  padding-block: var(--section-y);
}

/* A hairline between chapters. Lighter than a border: it should be felt at the
   edge of vision, not read. */
.section--ruled { border-top: 1px solid var(--hairline); }

/* Reachable by keyboard, invisible otherwise. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* --- Einrasten, nur auf schmalen Fenstern ---
   Siehe sections.css: die Abschnitte sind dort genau einen Bildschirm hoch.
   Ohne das hier landen sie trotzdem nicht — Höhe allein rastet nichts ein. */
@media (max-width: 900px) {
  html {
    scroll-snap-type: y proximity;
    /* Ohne das rastet Safari beim Ankersprung mitten in einen Abschnitt. */
    scroll-padding-top: 0;
  }
}

/* Apple's hierarchy, not a web page's: three sizes carry the whole story, and
   the largest one is very large. Big type is the cheapest way to look
   deliberate — but only if there is almost nothing else on the screen. */

.display {
  margin: 0;
  font-size: clamp(2.75rem, 7.5vw, 6.5rem);
  font-weight: 600;
  line-height: 0.98;
  /* Large type needs negative tracking or it reads as loose and amateur. The
     bigger the size, the tighter it wants to be. */
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.headline {
  margin: 0;
  font-size: clamp(2.125rem, 5vw, 4rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

/* The statement section: one sentence, nothing else, as large as the display. */
.statement {
  margin: 0;
  font-size: clamp(2rem, 5.5vw, 4.5rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.lede {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(1.0625rem, 1.35vw, 1.3125rem);
  line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* Caveat, the app's own hand. It names the chapter the way the app names every
   screen — and it is the detail that ties page and product together. */
.eyebrow {
  margin: 0 0 var(--gap-s);
  font-family: var(--hand);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
}

.wordmark {
  font-family: var(--hand);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
}

.accent { color: var(--accent); }
.muted { color: var(--ink-soft); }


/* --- Der Kopf ---
   Eine Zeile, ein Weg zurück. */
.recht__kopf {
  width: var(--shell);
  /* Dieselbe Spalte wie der Text darunter. Vorher lief der Kopf über die volle
     Seitenbreite, der Text über 42rem — der Zurück-Link stand dann links außen
     und die Überschrift weiter rechts, als wären es zwei Seiten. */
  max-width: 42rem;
  margin-inline: auto;
  padding-block: clamp(1.5rem, 4vh, 2.5rem);
}

.recht__heim {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  /* 44 Punkte, die Untergrenze, unter der Zielen zur Übung wird. */
  min-height: 44px;
  color: var(--ink);
  font-size: 1.6rem;
  text-decoration: none;
  transition: opacity 200ms var(--ease);
}

.recht__heim:hover { opacity: 0.62; }
.recht__heim svg { width: 1.1rem; height: 1.1rem; margin-top: 0.1em; }

/* --- Der Text ---
   Eine Spalte, 68 Zeichen breit. Längere Zeilen verliert das Auge beim
   Rücksprung, und ein Datenschutztext wird ohnehin lang genug. */
.recht {
  width: var(--shell);
  max-width: 42rem;
  margin-inline: auto;
  padding-bottom: clamp(4rem, 12vh, 7rem);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.65;
}

.recht h1 {
  margin: 0 0 0.25rem;
  font-size: clamp(2rem, 4.5vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

/* Der Untertitel direkt unter der Überschrift — „Angaben nach § 5 DDG" und
   seine Geschwister. Das erste <p> nach dem <header> ist immer dieser. */
.recht header p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

.recht header { margin-bottom: clamp(2rem, 5vh, 3rem); }

/* Die Abschnittsmarke. In der Anwendung eine Klasse auf einem <span>, hier
   das, was sie inhaltlich immer war. */
.recht h2 {
  margin: 0 0 0.75rem;
  color: var(--ink-soft);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.recht h3 {
  margin: 1.75rem 0 0.5rem;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.recht section { margin-bottom: clamp(2rem, 5vh, 2.75rem); }
.recht p { margin: 0 0 0.875rem; text-wrap: pretty; }
.recht p:last-child { margin-bottom: 0; }

.recht ul, .recht ol { margin: 0 0 0.875rem; padding-left: 1.25rem; }
.recht li { margin-bottom: 0.375rem; }

.recht address { font-style: normal; line-height: 1.7; }

.recht a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

/* Die Kästen der Anwendung waren `.glass`. Hier reicht eine Linie: auf einer
   Textseite ist ein Rahmen eine Gliederung, kein Material. */
.recht section > div {
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--paper-sunk);
}

.recht section > div p:first-child { margin-top: 0; }

/* Kleingedrucktes bleibt klein, aber lesbar. Unter 14px wird aus einem
   Hinweis eine Formalie, die niemand liest — und genau davon handelt der
   Vorwurf, den man sich mit zu kleiner Schrift einhandelt. */
.recht small,
.recht .recht__klein { font-size: 0.875rem; color: var(--ink-soft); }

/* --- Die Fußzeile ---
   Dieselbe wie auf der Startseite, damit man von jeder Rechtsseite zu jeder
   anderen kommt, ohne zurückzugehen. */
.site-footer {
  width: var(--shell);
  max-width: 42rem;
  margin-inline: auto;
  padding-block: clamp(2.5rem, 6vh, 4rem);
  border-top: 1px solid var(--hairline);
  text-align: center;
}

.footer-mark {
  margin: 0 0 1rem;
  font-family: var(--hand);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
}

.footer-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  text-decoration: none;
  transition: color 200ms var(--ease);
}

.footer-links a:hover { color: var(--ink); }

.footer-note {
  margin: 0.75rem 0 0;
  color: var(--ink-soft);
  font-size: 0.875rem;
}