/* Rentify - Landingpage
 *
 * Gestaltungsidee: der Rentify-Briefbogen auf dem Bildschirm.
 * Die Marke existiert bereits als gedruckter Brief (siehe Rentify-Falschparker,
 * lib/pdf/letterhead.ts): Logo mittig oben, viel Weissraum, darunter eine Haarlinie
 * und eine zentrierte Fusszeile in Zona Pro mit fetter erster Zeile.
 * Genau diese Anordnung traegt die Seite - nichts dazuerfunden.
 *
 * Aufbau: 1 Schriften  2 Farb- und Massvariablen  3 Grundlagen
 *         4 Browser-Oberflaechen  5 Seitengeruest  6 Startseite
 *         7 Dokumentseite  8 Fusszeile  9 Bewegung  10 Druck
 */

/* ---------------------------------------------------------------- 1 Schriften
 * Zona Pro ist die Hausschrift aus dem Briefbogen. Nur die beiden Schnitte,
 * die auch wirklich vorkommen (Regular fuer Text, Bold fuer die Namenszeile).
 * Lizenzhinweis siehe README.md. */

@font-face {
  font-family: "Zona Pro";
  src: url("fonts/ZonaPro-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Zona Pro";
  src: url("fonts/ZonaPro-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------- 2 Farb- und Massvariablen */

:root {
  /* Heller Modus. Kein reines Weiss, kein reines Schwarz: beides nimmt der
   * Flaeche die Tiefe. Der Grundton ist leicht warm wie Briefpapier. */
  --bg: #faf9f6;
  --ink: #191814;
  --ink-soft: #45423a;
  --ink-muted: #6b675c;
  --rule: rgb(25 24 20 / 0.13);
  --rule-strong: rgb(25 24 20 / 0.3);

  /* Genau ein Akzent, und der arbeitet ausschliesslich an bedienbaren Stellen:
   * Link im Hover, Fokusring, Textauswahl. Die Marke selbst bleibt schwarz. */
  --accent: #2a4fb8;
  --selection: rgb(42 79 184 / 0.16);

  /* Das Logo ist reines Schwarz auf Transparenz und laesst sich darum sauber
   * umkehren. Im hellen Modus bleibt es unberuehrt. */
  --logo-filter: none;

  /* Starkes Ease-out: startet schnell, kommt weich zur Ruhe. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  --measure: 46rem;
  --pad: clamp(1.5rem, 1rem + 3vw, 3.5rem);

  color-scheme: light;
  accent-color: var(--accent);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131311;
    --ink: #edebe4;
    --ink-soft: #c3bfb3;
    --ink-muted: #9c978a;
    --rule: rgb(237 235 228 / 0.15);
    --rule-strong: rgb(237 235 228 / 0.32);
    --accent: #93abf7;
    --selection: rgb(147 171 247 / 0.24);

    /* Umgekehrt waere das Logo reines Weiss und damit haerter als jeder Text
     * daneben. brightness nimmt die Spitze, sepia gleicht es der warmen
     * Grundfarbe an. */
    --logo-filter: invert(1) brightness(0.94) sepia(0.06);

    color-scheme: dark;
  }
}

/* -------------------------------------------------------------- 3 Grundlagen */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: "Zona Pro", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  /* Geometrische Grotesken laufen eng; eine Spur Laufweite oeffnet den Text. */
  letter-spacing: 0.005em;
}

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

p {
  text-wrap: pretty;
}

/* ------------------------------------------------- 4 Browser-Oberflaechen
 * Auswahl, Fokusring, Bildlaufleiste und Unterstreichung kommen sonst
 * unveraendert vom Browser und gehoeren dann zu keinem Entwurf. */

::selection {
  background: var(--selection);
  color: var(--ink);
}

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

html {
  scrollbar-width: thin;
  scrollbar-color: var(--rule-strong) transparent;
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--rule-strong);
  background-clip: padding-box;
  border: 4px solid transparent;
  border-radius: 99px;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  transition:
    color 160ms var(--ease-out),
    text-decoration-color 160ms var(--ease-out),
    text-decoration-thickness 160ms var(--ease-out);
}

/* Touch-Geraete loesen :hover beim Tippen aus, darum die Abfrage. */
@media (hover: hover) and (pointer: fine) {
  a:hover {
    color: var(--accent);
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
  }
}

a:active {
  color: var(--accent);
}

/* Kleine Textlinks haetten sonst nur die Hoehe ihrer Zeile (16 px) als
 * Trefferflaeche. Innenabstand vergroessert sie auf ueber 24 px, der
 * gleich grosse negative Aussenabstand haelt das Satzbild an Ort und Stelle. */
.colophon__block a,
.facts a {
  display: inline-block;
  padding: 0.5rem 0.35rem;
  margin: -0.5rem -0.35rem;
}

/* ---------------------------------------------------------- 5 Seitengeruest */

.page {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding: var(--pad);
}

/* ------------------------------------------------------------- 6 Startseite */

.stage {
  flex: 1;
  display: grid;
  place-items: center;
  /* Optische Mitte statt geometrischer: knapp oberhalb wirkt ruhiger. */
  padding-bottom: 6vh;
}

.wordmark {
  margin: 0;
  line-height: 0;
}

/* Hoechstens 208 px breit - die Quelldatei hat 417 px und bleibt damit
 * auch auf Retina-Displays scharf. Entspricht zugleich der Proportion
 * des Briefbogens (48 mm Logo auf 210 mm Blatt). */
.wordmark img {
  width: clamp(9.5rem, 6rem + 12vw, 13rem);
  filter: var(--logo-filter);
}

/* --------------------------------------------------------- 7 Dokumentseite */

.masthead {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(2.5rem, 7vh, 4.5rem);
}

.masthead a {
  display: block;
  text-decoration: none;
}

.masthead img {
  width: clamp(7rem, 5rem + 6vw, 8.5rem);
  filter: var(--logo-filter);
}

.doc {
  flex: 1;
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
}

.doc h1 {
  font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.4rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin-bottom: clamp(2rem, 5vh, 3rem);
}

/* Fliesstext, nur auf der Datenschutzseite gebraucht. Ueber einer
 * Zwischenueberschrift steht mehr Luft als darunter, damit sie zum
 * folgenden Absatz gehoert und nicht zwischen den Bloecken schwebt. */
.doc h2 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 2.75rem 0 0.65rem;
}

/* 52ch, nicht 65ch: Die Einheit ch misst die Breite der Null, und die ist in
 * Zona Pro mit 12,6 px deutlich breiter als ein Durchschnittsbuchstabe.
 * 65ch ergaben im Browser nachgemessen 73 echte Zeichen je Zeile, 52ch
 * ergeben rund 65 und damit die bequeme Mitte des lesbaren Bereichs. */
.doc p,
.doc ul {
  max-width: 52ch;
  margin-bottom: 0.95rem;
}

.doc ul {
  padding-left: 1.15rem;
}

.doc li {
  margin-bottom: 0.3rem;
}

.doc li::marker {
  color: var(--ink-muted);
}

.doc__stand {
  margin-top: 3rem;
  font-size: 0.875rem;
  color: var(--ink-muted);
}

/* Beschriftung und Angabe als Definitionsliste. Getrennt wird durch Raum,
 * nicht durch Rahmen oder eine Linie unter jeder Zeile. */
.facts dt {
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.012em;
  color: var(--ink-muted);
}

.facts dd {
  margin: 0.25rem 0 1.75rem;
}

.facts dd:last-child {
  margin-bottom: 0;
}

.facts__aside {
  display: inline-block;
  font-size: 0.875rem;
  color: var(--ink-muted);
}

@media (min-width: 44rem) {
  .facts {
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr);
    column-gap: 2.5rem;
  }

  .facts dt {
    grid-column: 1;
    /* Beschriftung auf die Grundlinie der Angabe ziehen (im Browser
     * nachgemessen: Grundlinien liegen damit deckungsgleich). */
    padding-top: 0.46em;
  }

  .facts dd {
    grid-column: 2;
    margin: 0 0 1.6rem;
  }
}

/* -------------------------------------------------------------- 8 Fusszeile
 * Haarlinie und zentrierter Block wie im Briefbogen, erste Zeile fett.
 * Auf Papier steht das in Versalien; am Bildschirm liest sich Gemischtsatz
 * bei 13 px deutlich besser, darum hier ohne. */

.colophon {
  width: 100%;
  max-width: var(--measure);
  margin: clamp(3rem, 8vh, 5rem) auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.75;
  letter-spacing: 0.012em;
  color: var(--ink-muted);
}

.colophon__name {
  font-weight: 700;
  color: var(--ink-soft);
}

/* Zwei Links nebeneinander. Getrennt wird durch Abstand, nicht durch einen
 * Mittelpunkt: In einer dreizeiligen Fusszeile ist das ruhiger.
 * Hier kein negativer Aussenabstand, sonst frisst er den Abstand der Flexbox;
 * das margin-top ist um den Innenabstand der Links verringert. */
.colophon__nav {
  margin-top: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 0.75rem;
}

.colophon__nav a {
  display: inline-block;
  padding: 0.5rem 0.35rem;
}

/* --------------------------------------------------------------- 9 Bewegung
 * Ein einziger inszenierter Moment: die Marke setzt sich beim Laden,
 * die Fusszeile folgt knapp dahinter. Sonst bewegt sich nichts.
 * Die Impressumsseite bekommt ihn bewusst nicht - wer dorthin geht,
 * will lesen, nicht warten.
 *
 * Ausgangszustand ist sichtbar: ohne diese Regel (oder bei reduzierter
 * Bewegung) steht die Seite sofort da. */

@media (prefers-reduced-motion: no-preference) {
  .enter {
    animation: enter 520ms var(--ease-out) backwards;
  }

  .enter--after {
    animation-delay: 90ms;
  }
}

@keyframes enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* ------------------------------------------------------------------ 10 Druck
 * Ein Impressum wird ausgedruckt oder als PDF abgelegt. */

@media print {
  :root {
    --bg: #fff;
    --ink: #000;
    --ink-soft: #000;
    --ink-muted: #333;
    --rule: #000;
    --logo-filter: none;
  }

  .page {
    min-height: 0;
    padding: 0;
  }

  a {
    text-decoration: none;
  }

  .colophon {
    border-top-width: 0.5pt;
  }

  .colophon__nav {
    display: none;
  }
}