/* Die Farben stammen aus dem Asset-Katalog der App
   (Papier, Blatt, Streifen, Linie, AccentColor). Farben.swift begründet sie:
   "Weiß und Systemgrau sehen nach Formular aus. Eine App übers Wandern soll
   nach Papier aussehen — nach einer Karte, die man auf den Tisch legt." */

:root {
  --papier:   #F4EFE4;
  --blatt:    #FFFBF3;
  --streifen: #FAF5EB;
  --linie:    #E0D8C7;
  --akzent:   #2E6B7A;
  --text:     #1F1C17;
  --leise:    #6B6357;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier:   #171613;
    --blatt:    #221F1A;
    --streifen: #1D1B17;
    --linie:    #35312A;
    --akzent:   #7FBECD;
    --text:     #ECE6DA;
    --leise:    #A79E8E;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  /* Der Klick auf „Weiter" läuft damit weich statt zu springen — reines CSS,
     kein Skript. Wer Bewegung reduziert haben will, bekommt weiter unten
     wieder den harten Sprung. */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
}

h1, h2, h3 {
  font-family: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype",
               "Times New Roman", serif;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  /* Deutsche Komposita sind lang und brechen nicht von selbst.
     „Datenschutzerklärung" allein misst bei 2,25 rem 337 px und schob die
     Seite auf einem 320-px-Gerät zur Seite. */
  overflow-wrap: break-word;
}

h1 { font-size: clamp(1.75rem, 7vw, 2.25rem); margin: 0 0 0.25rem; }
h2 { font-size: 1.4rem; margin: 2.5rem 0 0.6rem; }
h3 { font-size: 1.1rem; margin: 1.8rem 0 0.4rem; }

a { color: var(--akzent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

/* Die Rechtstexte nennen ihre Quellen als volle Adresse — die von Wikimedia ist
   61 Zeichen lang und in einem Stück. Ohne diese Regel schiebt sie die ganze
   Seite auf dem Telefon um 89 px zur Seite. */
.rechtstext a { overflow-wrap: anywhere; }

/* Der erste Bildschirm ist das Gemälde, randlos von Kante zu Kante.
   100svh statt 100vh: auf dem Telefon zählt vh die Adresszeile mit, und der
   Bildschirm wäre beim ersten Blick nicht gefüllt. */
.kopfbild {
  position: relative;
  height: 100svh;
  min-height: 24rem;
  overflow: hidden;
  background: var(--papier);
}

/* cover, nicht contain: das Bild füllt die Fläche. Ein Hochformat auf einem
   breiten Bildschirm wird dabei oben und unten beschnitten — object-position
   hält den Wanderer dabei mittig im Ausschnitt. */
.kopfbild > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
  z-index: 0;
}

/* Ein Schleier oben, damit Logo und Name auf jedem Ausschnitt lesbar bleiben.
   Ohne ihn hinge die Lesbarkeit davon ab, ob gerade heller Himmel oder ein
   dunkler Bergrücken hinter der Schrift liegt — und das ändert sich mit jeder
   Fenstergröße. Unten derselbe Gedanke für den Weiter-Hinweis. */
/* z-index ist hier nicht Kosmetik, sondern der Unterschied zwischen Schleier
   und keinem Schleier: ::before wird vor den Kindelementen gezeichnet, das
   Gemälde läge also darüber und der obere Schleier wäre unsichtbar. ::after
   wird zuletzt gezeichnet und läge über der Schrift. Gemessen waren das
   1,5:1 für die Wortmarke — der Textschatten hatte es nur kaschiert. */
.kopfbild::before,
.kopfbild::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
}
.kopfbild::before {
  top: 0;
  height: 40%;
  background: linear-gradient(to bottom, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0));
}
.kopfbild::after {
  bottom: 0;
  height: 25%;
  background: linear-gradient(to top, rgb(0 0 0 / 0.45), rgb(0 0 0 / 0));
}

/* Logo und Name, links oben ins Bild gesetzt. */
.marke-oben {
  position: absolute;
  z-index: 2;
  top: clamp(1rem, 3vw, 2rem);
  left: clamp(1rem, 3vw, 2.5rem);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: #fff;
}
.marke-oben img {
  width: clamp(40px, 6vw, 54px);
  height: auto;
  border-radius: 22%;
  box-shadow: 0 2px 12px rgb(0 0 0 / 0.35);
}
.marke-oben span {
  font-family: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype",
               "Times New Roman", serif;
  font-size: clamp(1.4rem, 3.2vw, 2rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.5);
}

/* Der Weiter-Hinweis, unten mittig. Ein echter Anker — der weiche Lauf kommt
   von scroll-behavior, nicht von JavaScript, und schaltet sich bei
   prefers-reduced-motion von selbst ab. */
.weiter {
  position: absolute;
  z-index: 2;
  bottom: clamp(1.25rem, 3vh, 2.5rem);
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 1px 10px rgb(0 0 0 / 0.6);
  padding: 0.5rem 1rem;
}
.weiter::after {
  content: "";
  display: block;
  width: 0.7rem;
  height: 0.7rem;
  margin: 0.4rem auto 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.inhalt {
  max-width: 38rem;
  margin: 0 auto;
  padding: 0 1.25rem 4rem;
}

/* Das App-Icon über dem Titel. Kein negativer Rand mehr: es hängt nicht länger
   über einem Bildstreifen, sondern steht am Anfang des Textteils. */
.marke {
  width: 84px;
  height: 84px;
  border-radius: 19px;
  display: block;
  margin: 0 0 1.25rem;
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.18);
  background: var(--blatt);
}

.unterzeile {
  font-size: 1.15rem;
  color: var(--leise);
  margin: 0 0 2rem;
}

p { margin: 0 0 1rem; }

/* Zwei Bildschirmfotos, mittig. Bei zweien braucht es kein Karussell mehr —
   sie passen nebeneinander und stehen zentriert unter dem Text.
   Die Breite ist an das Fenster gekoppelt, damit auch auf 320 px zwei
   nebeneinander passen, ohne die Seite zur Seite zu schieben. */
.bilderreihe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
  margin: 1.75rem 0 2rem;
}
.bilderreihe img {
  flex: 0 0 auto;
  width: min(220px, 40vw);
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--linie);
  background: var(--blatt);
}

/* Rechtstexte: Tabellen und lange Listen brauchen mehr Struktur. */
.rechtstext table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.5rem;
  font-size: 0.95rem;
}
.rechtstext th, .rechtstext td {
  text-align: left;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--linie);
  vertical-align: top;
}
.rechtstext th { font-weight: 600; }
.rechtstext tbody tr:nth-child(even) { background: var(--streifen); }

/* Auf dem Telefon passen drei Spalten nicht nebeneinander — die Tabelle schob
   die ganze Seite um 89 px zur Seite. Statt sie waagerecht scrollen zu lassen,
   wird jede Zeile ein eigener Block, und die Spaltenüberschrift wandert als
   Beschriftung über den Wert. Wer eine aus dem App Store verlinkte
   Datenschutzerklärung liest, liest sie meistens genau hier. */
@media (max-width: 34rem) {
  .rechtstext table, .rechtstext tbody, .rechtstext tr, .rechtstext td {
    display: block;
    width: 100%;
  }
  .rechtstext thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .rechtstext tbody tr {
    border: 1px solid var(--linie);
    border-radius: 8px;
    padding: 0.4rem 0.2rem;
    margin-bottom: 0.9rem;
    background: var(--blatt);
  }
  .rechtstext tbody tr:nth-child(even) { background: var(--blatt); }
  .rechtstext td { border-bottom: 0; padding: 0.3rem 0.7rem; }
  .rechtstext td[data-titel]::before {
    content: attr(data-titel);
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--leise);
  }
}
.rechtstext hr {
  border: 0;
  border-top: 1px solid var(--linie);
  margin: 2.5rem 0;
}
.rechtstext blockquote {
  margin: 1.5rem 0;
  padding: 0.9rem 1.1rem;
  background: var(--blatt);
  border-left: 3px solid var(--akzent);
  border-radius: 0 8px 8px 0;
  color: var(--leise);
  font-size: 0.95rem;
}
.rechtstext blockquote p:last-child { margin-bottom: 0; }
.rechtstext code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--streifen);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}
.rechtstext li { margin-bottom: 0.35rem; }
.stand { color: var(--leise); font-size: 0.95rem; }

.fuss {
  border-top: 1px solid var(--linie);
  margin-top: 3rem;
  padding-top: 1.25rem;
  font-size: 0.92rem;
  color: var(--leise);
}
.fuss a { margin-right: 1.1rem; display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .bilderreihe { scroll-snap-type: none; }
}