/* Inter, vom eigenen Server.

   Bis zur Neugestaltung kam die Schrift von fonts.googleapis.com. Das heißt:
   Jeder Besuch schickte die IP-Adresse des Besuchers an Google, bevor er eine
   Zeile gelesen hatte — und die Datenschutzerklärung erwähnt Google Fonts mit
   keinem Wort. Das Landgericht München hat 2022 genau das beanstandet. Jetzt
   lädt die Seite nichts mehr von fremden Servern.

   Zwei Schnitte, 400 und 600, nur der lateinische Zeichensatz (Umlaute, ß,
   „deutsche" Anführungszeichen und Gedankenstrich sind darin): 35 kB für die
   ganze Seite. Die Wortmarke braucht keine Schrift, sie ist ein Pfad.

   Die Ersatzschrift ist auf Inters Maße gestreckt. Ohne das springt beim
   Eintreffen der Schrift jede Zeile um ein paar Pixel — bei einer Überschrift
   von hundert Pixeln sieht man das. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-400.27ae72da.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-600.87d718a2.woff2") format("woff2");
}

@font-face {
  font-family: "Inter Ersatz";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  ascent-override: 90.2%;
  descent-override: 22.48%;
  line-gap-override: 0%;
  size-adjust: 107.4%;
}

/* Die Grundlage: Farben, Maße, Schrift, Rhythmus.

   Die Werte sind Lumos eigene (native-ios/Shared/LumoPalette.swift). Eine
   Werbeseite in anderen Farben als das Produkt, das sie zeigt, liest sich wie
   eine Seite über eine andere App.

   Eine Abweichung, mit Absicht: Das Papier der Seite ist eine Stufe heller als
   der Hintergrund der App (#f5f4f1). So liegt ein Bildschirmfoto auf der Seite
   wie ein Gegenstand auf einer Fläche, statt als Fleck derselben Farbe darin
   zu verschwinden. Reines Weiß ist es trotzdem nicht: neben #fff wirkt das
   warme Grau der Aufnahmen schmutzig. */

:root {
  /* --- Papier und Tinte --- */
  --papier: #fbfaf8;
  --papier-tief: #f3f1ec;
  --papier-hell: #ffffff;
  --app-grund: #f5f4f1;
  --tinte: #1c1c1e;
  /* Das Grau des Fließtexts. #6e6e73 auf dem Papier: 4,9 : 1 — über der
     Grenze für Fließtext, und weich genug, dass die Überschrift führt. */
  --tinte-2: #6e6e73;
  --tinte-3: #8e8e93;
  --linie: rgba(28, 28, 30, 0.09);

  /* Lumos Akzent. Auf hellem Grund reicht #5b7cfa nur für Flächen und große
     Schrift (3,8 : 1); für Text steht die Fassung aus „Mehr Kontrast" in der
     App bereit, 7 : 1. */
  --akzent: #5b7cfa;
  --akzent-text: #2f4fd8;
  --akzent-zart: #eef1fe;

  /* --- Form --- */
  --rund-karte: 28px;
  --rund-knopf: 999px;

  /* --- Maße ---
     Eine Spalte, die mit dem Fenster wächst und bei 1180 px stehen bleibt.
     Der Rand ist nie schmaler als der Sicherheitsbereich: Quer gehaltene
     iPhones legen die Seite sonst unter die Dynamic Island. */
  --rand: max(clamp(20px, 5.2vw, 56px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --spalte: min(1180px, 100% - 2 * var(--rand));
  --kopf-h: 52px;
  --abstand: clamp(96px, 15vh, 180px);

  /* --- Bewegung ---
     Eine Kurve, die aus der App: schnell los, lang und weich ankommen, kein
     Überschwingen. */
  --weich: cubic-bezier(0.22, 1, 0.36, 1);

  /* Scrollweg je Takt, in Fensterhöhen (11-szene.css, szene.js). */
  --dehnung: 1;

  --schrift: "Inter", "Inter Ersatz", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Die Sprungziele sollen nicht unter dem festen Kopf landen. */
  scroll-padding-top: calc(var(--kopf-h) + 12px);
  background: var(--papier);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Ein Element, das beim Hereinfahren kurz über den Rand ragt, darf nie eine
     waagerechte Bildlaufleiste erzeugen. `clip` statt `hidden`: hidden würde
     body zum Scrollcontainer machen und jedes `position: sticky` darunter
     lahmlegen. */
  overflow-x: clip;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

p,
h1,
h2,
h3,
figure {
  margin: 0;
}

/* Sichtbar, wenn jemand mit der Tastatur unterwegs ist — und nur dann. */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--akzent-text);
  outline-offset: 3px;
  border-radius: 6px;
}

.nur-vorlesen {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sprung {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--tinte);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 200ms var(--weich);
}

.sprung:focus-visible {
  transform: none;
}

.spalte {
  width: var(--spalte);
  margin-inline: auto;
}

/* --- Die Wortmarke ---
   Ein Pfad in currentColor. Höhe statt Breite, damit sie neben Text auf der
   Grundlinie steht wie ein Wort. */
.wortmarke {
  display: inline-block;
  width: auto;
  height: 1em;
  overflow: visible;
}

/* --- Schrift ---
   Wenige Stufen, alle fließend. Negative Laufweite erst ab den großen Graden:
   Inter ist für Fließtext gezeichnet und läuft groß gesetzt zu weit. */
.gross {
  font-size: clamp(2.7rem, 1.3rem + 5.3vw, 5.6rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.047em;
  text-wrap: balance;
}

.titel {
  font-size: clamp(2.35rem, 1.2rem + 4.3vw, 4.75rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.042em;
  text-wrap: balance;
}

.zwischen {
  font-size: clamp(1.6rem, 1.05rem + 1.9vw, 2.45rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.lede {
  font-size: clamp(1.13rem, 0.98rem + 0.55vw, 1.5rem);
  line-height: 1.42;
  letter-spacing: -0.018em;
  color: var(--tinte-2);
  text-wrap: pretty;
}

/* Der hervorgehobene Teil eines Satzes: dunkel im Grau. Ein Satz, der zur
   Hälfte gelesen schon verstanden ist. */
.lede strong,
.lede b {
  color: var(--tinte);
  font-weight: 600;
}

.augenbraue {
  display: block;
  margin-bottom: 0.9rem;
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.2rem);
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--akzent-text);
}

.klein {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--tinte-2);
}

/* --- Schmal ---
   Was auf dem Telefon anders sein muss, und nur das: der Scrollweg je Takt
   (zwei Drittel eines Fensters statt eines ganzen — ein Fenster ist dort halb
   so hoch, und dieselbe Geschichte kostete sonst doppelt so viele Wischer)
   und der Abstand zwischen den Abschnitten. Luft bleibt, aber weniger davon. */
@media (max-width: 767px) {
  :root {
    --dehnung: 0.68;
    --abstand: clamp(72px, 11vh, 120px);
  }
}

/* Der Kopf und das Menü.

   Fest oben, halb durchsichtig über dem, was darunter vorbeiläuft. Die Linie
   darunter erscheint erst, wenn die Seite gescrollt ist — über dem ersten
   Bildschirm wäre sie ein Strich durch ein leeres Blatt.

   `viewport-fit=cover` legt die Seite auf dem iPhone bis unter die Uhr. Der
   Kopf trägt deshalb den Sicherheitsabstand oben selbst, sonst säße die
   Wortmarke unter der Dynamic Island. */

.kopf {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  padding-top: env(safe-area-inset-top);
  background: rgba(251, 250, 248, 0.78);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 transparent;
  transition: box-shadow 300ms var(--weich), background-color 300ms var(--weich);
}

.kopf.ist-gescrollt {
  box-shadow: 0 1px 0 var(--linie);
}

.kopf__innen {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 32px);
  width: var(--spalte);
  height: var(--kopf-h);
  margin-inline: auto;
}

.kopf__marke {
  display: flex;
  align-items: center;
  /* 44 px Zielfläche, auch wenn die Marke nur 26 hoch ist. */
  min-height: 44px;
  margin-right: auto;
  color: var(--tinte);
  text-decoration: none;
}

.kopf__marke .wortmarke {
  height: 25px;
  margin-top: 3px;
}

.kopf__reihe {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 30px);
}

.kopf__ziel {
  padding-block: 12px;
  font-size: 0.875rem;
  color: var(--tinte);
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 200ms var(--weich);
}

/* Zeigergeräte nur: Auf dem Telefon bleibt ein Hover-Zustand nach dem Tippen
   hängen, bis man irgendwo anders hintippt — er sieht dann aus wie eine
   Auswahl, die niemand getroffen hat. */
@media (hover: hover) {
  .kopf__ziel:hover {
    opacity: 1;
  }
}

.kopf__laden {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 15px;
  border-radius: var(--rund-knopf);
  background: var(--tinte);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: background-color 200ms var(--weich), transform 200ms var(--weich);
}

@media (hover: hover) {
  .kopf__laden:hover {
    background: #000;
  }
}

.kopf__laden:active {
  transform: scale(0.97);
}

/* Der Menüknopf: zwei Striche, die zum Kreuz werden. */
.kopf__knopf {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.kopf__striche,
.kopf__striche::before {
  display: block;
  width: 18px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--tinte);
  transition: transform 320ms var(--weich);
}

.kopf__striche {
  position: relative;
  transform: translateY(-3.5px);
}

.kopf__striche::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(7px);
}

.kopf__knopf[aria-expanded="true"] .kopf__striche {
  transform: rotate(45deg);
}

.kopf__knopf[aria-expanded="true"] .kopf__striche::before {
  transform: rotate(-90deg);
}

@media (max-width: 899px) {
  .kopf__reihe {
    display: none;
  }

  .kopf__knopf {
    display: grid;
  }

  .kopf__innen {
    gap: 6px;
  }

  /* Größer als am Schreibtisch: Hier ist er das einzige sichtbare Ziel neben
     dem Menü, und er wird mit dem Daumen getroffen, nicht mit dem Zeiger. */
  .kopf__laden {
    min-height: 44px;
    margin-right: 2px;
    padding: 0 18px;
    font-size: 0.875rem;
  }
}

/* --- Das Menü --- */
.menue {
  position: fixed;
  inset: 0;
  z-index: 49;
  padding: calc(env(safe-area-inset-top) + var(--kopf-h) + 12px) 0 calc(env(safe-area-inset-bottom) + 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--papier);
}

.menue[hidden] {
  display: none;
}

.menue__innen {
  display: flex;
  flex-direction: column;
  width: var(--spalte);
  margin-inline: auto;
}

.menue__ziel {
  padding-block: 10px;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--tinte);
  text-decoration: none;
  animation: menue-ein 460ms var(--weich) both;
}

/* Die Rechtstexte stehen im Menü, weil dort sonst kein Weg hinführt — aber
   kleiner, unter einem Abstand. Wer das Menü öffnet, sucht meistens etwas
   anderes. */
.menue__ziel[data-nav="imprint"],
.menue__ziel[data-nav="privacy"] {
  padding-block: 8px;
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--tinte-2);
}

.menue__ziel[data-nav="imprint"] {
  margin-top: 20px;
  padding-top: 24px;
  border-top: 1px solid var(--linie);
}

.menue__ziel:nth-child(2) { animation-delay: 30ms; }
.menue__ziel:nth-child(3) { animation-delay: 60ms; }
.menue__ziel:nth-child(4) { animation-delay: 90ms; }
.menue__ziel:nth-child(5) { animation-delay: 120ms; }
.menue__ziel:nth-child(6) { animation-delay: 150ms; }
.menue__ziel:nth-child(n + 7) { animation-delay: 180ms; }

.menue__laden {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin-top: 28px;
  border-radius: var(--rund-knopf);
  background: var(--tinte);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  animation: menue-ein 460ms 200ms var(--weich) both;
}

@keyframes menue-ein {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .menue__ziel,
  .menue__laden {
    animation: none;
  }
}

/* Solange das Menü offen ist, steht die Seite darunter still. */
html.menue-offen,
html.menue-offen body {
  overflow: hidden;
}

/* Die Fußzeile: drei Zeilen, leise. */

.fuss {
  padding: clamp(48px, 8vh, 72px) 0 calc(env(safe-area-inset-bottom) + 40px);
  border-top: 1px solid var(--linie);
  background: var(--papier);
  font-size: 0.875rem;
  color: var(--tinte-2);
}

.fuss__oben {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.fuss__marke {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--tinte);
}

.fuss__marke .wortmarke {
  height: 30px;
}

.fuss__wege {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 26px;
  margin-top: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--linie);
}

.fuss__wege a,
.fuss__recht a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  text-decoration: none;
  transition: color 200ms var(--weich);
}

.fuss__wege a {
  color: var(--tinte);
}

@media (hover: hover) {
  .fuss__wege a:hover,
  .fuss__recht a:hover {
    color: var(--akzent-text);
  }
}

.fuss__unten {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 20px;
}

.fuss__recht {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
}

@media (max-width: 767px) {
  /* Auf dem Telefon zwei Spalten statt einer flatternden Reihe: gleich lange
     Zeilen, 44 Pixel hoch, damit jeder Link ein Ziel für den Daumen ist. Die
     Rechtstexte bleiben eine Reihe, aber mit derselben Zeilenhöhe. */
  .fuss {
    font-size: 0.9375rem;
  }

  .fuss__oben {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .fuss__oben .knopf--klein {
    min-height: 44px;
    padding: 0 22px;
  }

  .fuss__wege {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
    margin-top: 24px;
    padding-bottom: 16px;
  }

  .fuss__wege a,
  .fuss__recht a {
    min-height: 44px;
  }

  .fuss__recht {
    gap: 0 20px;
  }

  .fuss__unten {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 4px;
    margin-top: 12px;
  }
}

/* Die Knöpfe. Einer, der zählt — „Im App Store laden" —, und ein leiser
   Verweis daneben. Mehr Sorten gibt es nicht. */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: var(--rund-knopf);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 220ms var(--weich), transform 220ms var(--weich), box-shadow 220ms var(--weich);
}

.knopf:active {
  transform: scale(0.97);
}

.knopf--dunkel {
  background: var(--tinte);
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 8px 24px -10px rgba(0, 0, 0, 0.35);
}

/* Nur für Zeigergeräte: Getippt bliebe der Hover-Zustand nach dem Loslassen
   stehen. Was der Finger braucht, ist :active — das gibt es darüber. */
@media (hover: hover) {
  .knopf--dunkel:hover {
    background: #000;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), 0 12px 30px -10px rgba(0, 0, 0, 0.4);
  }
}

.knopf--klein {
  min-height: 40px;
  padding: 0 18px;
  font-size: 0.9375rem;
  box-shadow: none;
}

/* Das App-Symbol im Knopf — derselbe Schriftzug wie auf dem Homescreen. */
.knopf__symbol {
  width: 26px;
  height: 26px;
  margin-left: -8px;
  border-radius: 7px;
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.25);
}

.verweis {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  font-size: 1.0625rem;
  font-weight: 400;
  color: var(--akzent-text);
  text-decoration: none;
}

.verweis::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 3px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-1px) rotate(-45deg);
  transition: transform 220ms var(--weich);
}

.verweis--runter::after {
  transform: translateY(-3px) rotate(45deg);
}

@media (hover: hover) {
  .verweis:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .verweis:hover::after {
    transform: translate(2px, -1px) rotate(-45deg);
  }

  .verweis--runter:hover::after {
    transform: translateY(0) rotate(45deg);
  }
}

/* Auf dem Telefon die Rückmeldung, die es dort gibt: kurzes Nachgeben. */
.verweis:active {
  opacity: 0.6;
}

/* Die Rechtstexte im Gewand der Website.

   Sie brauchen nichts von der Startseite außer der Grundlage (00- bis 0x-
   Dateien, von build.mjs davorgesetzt): keine Bühne, kein Telefon, keine
   Zeitleiste. Es sind Texte, die jemand liest, weil er etwas wissen will —
   meistens eine einzige Angabe, meistens in Eile.

   Der Inhalt kommt aus der Anwendung und trägt keine Klassen mehr (siehe
   rechtliches.mjs). Formatiert wird deshalb nach Element. */

.recht {
  width: var(--spalte);
  max-width: 44rem;
  margin-inline: auto;
  padding: calc(env(safe-area-inset-top) + var(--kopf-h) + clamp(48px, 10vh, 96px)) 0 clamp(72px, 12vh, 120px);
  font-size: 1.0625rem;
  line-height: 1.62;
}

.recht header {
  margin-bottom: clamp(32px, 6vh, 56px);
}

.recht h1 {
  font-size: clamp(2.3rem, 1.5rem + 3vw, 3.5rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.recht header p {
  margin-top: 14px;
  font-size: clamp(1.13rem, 1rem + 0.4vw, 1.35rem);
  line-height: 1.42;
  letter-spacing: -0.016em;
  color: var(--tinte-2);
}

.recht section {
  padding-top: 26px;
  margin-top: 30px;
  border-top: 1px solid var(--linie);
}

.recht h2 {
  margin: 0 0 10px;
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.recht p,
.recht address,
.recht ul {
  margin: 0 0 14px;
  color: #3a3a3e;
}

.recht address {
  font-style: normal;
}

.recht ul {
  padding-left: 1.2em;
}

.recht li + li {
  margin-top: 6px;
}

.recht a {
  color: var(--akzent-text);
  text-underline-offset: 3px;
}

/* Die Lizenzliste: Name links, Lizenz und Fassung rechts. */
.recht li > span:first-child {
  font-weight: 600;
  color: var(--tinte);
}

.recht li > span + span {
  margin-left: 8px;
  color: var(--tinte-2);
}

.recht li > span + span > span {
  margin-left: 6px;
  color: var(--tinte-3);
}