/* ==========================================================================
   Reitstall Hasselbrook, Ossenbeck. Relaunch-Entwurf.
   Kein Framework, kein Build, keine externe Verbindung.

   Papier und Tinte. Die Seite ist das Blatt, auf dem das Pferd gezeichnet
   ist: derselbe Cremeton der Zeichenblaetter.

   WICHTIG, das ist eine bewusste Trennung: Das Blau gehoert der Zeichnung,
   nicht der Seite. Ein Kugelschreiber schreibt blau, deshalb sind die Pferde,
   die Bodenlinien und das Hindernis blau. Schrift und Flaechen folgen dagegen
   der Marke, und die besteht aus Rot, Weiss und fast Schwarz, ohne Blau.
   Wer --tinte blau macht, faerbt die halbe Seite in einer Farbe, die im Logo
   nicht vorkommt. Das war einmal so und war falsch.

   Formsystem, gilt ausnahmslos:
     Flaechen, Bilder, Karten .............. 14px  (--r)
     kleine Marken, Eingaben ...............  8px  (--r-klein)
     Bedienelemente (Knoepfe, Pillen) ...... Pille (--r-pille)

   Kein style-Attribut im HTML, siehe README. Alles steht hier in Klassen.
   ========================================================================== */

/* --- Schriften, lokal ------------------------------------------------------
   Archivo fuer Ueberschriften. Variabel in Gewicht und Breite, hier leicht
   ueberbreit gefahren: das gibt den kurzen Ueberschriften Standfestigkeit,
   ohne dass sie laut werden. Instrument Sans fuer alles Laufende, hohe
   x-Hoehe, auf kleinen Groessen gut lesbar. Beide liegen im Ordner, es wird
   nichts von Google nachgeladen.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  font-weight: 100 900; font-stretch: 62% 125%;
  font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  font-weight: 100 900; font-stretch: 62% 125%;
  font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('../fonts/instrument-sans.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
}

/* --- Merkmale -------------------------------------------------------------- */
:root {
  color-scheme: light dark;

  /* Tinte. Warmes Fastschwarz, passend zur dunklen Kontur im Logo (#0a0a0a)
     und zum cremefarbenen Papier. Kein Blau, siehe Kopfkommentar. */
  --tinte:   #1e1b16;
  --tinte-2: #514c42;
  --tinte-3: #6e685c;

  /* Papier. Der Cremeton der Zeichenblaetter, plus zwei Abstufungen. */
  --papier:   #f7f4ec;
  --papier-2: #efeade;
  --papier-3: #fdfbf5;

  /* Der einzige Akzent: das Rot der Wortmarke. Aus der Logodatei
     ausgezaehlt, haeufigster Ton der roten Flaeche. Weisse Schrift darauf
     liegt bei 9,0:1, das Rot als Schrift auf Papier bei 8,2:1. */
  --rot:      #940f15;
  --rot-tief: #6f0b10;

  /* Tiefe Flaeche fuer Kontakt und Fusszeile: das Markenrot, abgedunkelt.
     Das weisse Pferd darauf wiederholt die Anordnung des Logos in
     Seitengroesse. Kein Moduswechsel, nur ein satterer Markenton.
     Wer es ruhiger will, setzt hier ein Fastschwarz #191610 ein und
     --auf-tief-2 auf #b9b3a5. Sonst aendert sich nichts. */
  --tief:      #7c0d12;
  --auf-tief:  #f3f0e6;
  --auf-tief-2:#e6c3c4;
  --linie-tief: rgba(243, 240, 230, .18);

  --linie:   rgba(30, 27, 22, .17);
  --linie-2: rgba(30, 27, 22, .09);

  /* Die Zeichnung. Eigene Marken, damit sie im dunklen Modus mitkippen.
     --zeichnung ist der Strich, --zeichnung-fuell der Koerper darunter.
     Der Koerper hat die Papierfarbe: die Zeichnung bringt ihr Blatt mit und
     ist deshalb auch ueber einem Foto nicht durchsichtig.
     Hier und nur hier ist das Blau des Kugelschreibers zu Hause. */
  --zeichnung: #232a4e;
  --zeichnung-fuell: #f7f4ec;
  --zeichnung-deckung: 1;

  --r:       14px;
  --r-klein:  8px;
  --r-pille: 999px;

  --kopfhoehe: 70px;
  --breite: 1280px;
  --rand: clamp(1.15rem, 4vw, 3.25rem);

  /* Boden. Eine einzige Marke fuer die Hoehe der Bodenlinie ueber der
     Bandunterkante. Bodenlinie, Pferd, Hindernis und Zirkel haengen alle
     daran, sonst schwebt das Pferd oder versinkt darin. Nicht einzeln
     nachjustieren, nur diesen Wert aendern. */
  --boden: clamp(26px, 4.2vw, 54px);
  /* Breite der Zeichnung. Steht hier, weil zwei Dinge daran haengen: die
     Groesse des Pferdes und der Ausgleich fuer den Leerraum unter dem
     tiefsten Huf. Die gemeinsame Leinwand der sechs Galoppblaetter richtet
     sich am tiefsten Huf aller sechs aus, im Mittel liegen die Hufe 7 %
     darueber. Ohne Ausgleich schwebt das Pferd ueber der Bodenlinie. */
  --pferdbreite: clamp(190px, 27vw, 330px);
  /* Gelaende. Bodenlinie und Pferd muessen dieselbe Kuppe nehmen, sonst
     laeuft das Pferd neben dem Weg. Beide leiten sich deshalb aus einer
     einzigen Marke ab: --gelaendebox ist die Hoehe des gezeichneten
     Feldes, --kuppe der Anteil davon, den die Linie tatsaechlich steigt. */
  --gelaendebox: clamp(46px, 6vw, 78px);
  --kuppe: calc(var(--gelaendebox) * .73);
  --zirkeltiefe: clamp(44px, 6.8vw, 92px);  /* halbe Hoehe des Zirkels */
  --sprunghoehe: clamp(64px, 9vw, 116px);   /* Scheitel ueber dem Hindernis */

  --weich: cubic-bezier(.16, 1, .3, 1);

  /* Ebenen. Nur diese vier Werte. */
  --z-bahn: 0;
  --z-inhalt: 1;
  --z-kopf: 40;
  --z-menue: 50;
}

/* --- Dunkler Modus ---------------------------------------------------------
   Das Blatt wird zur Nacht, die Tinte zur Kreide. Ein einziger Umschlag
   ueber die Merkmale, kein zweites Stilblatt, keine Klasse an einzelnen
   Abschnitten. Die Zeichnungen kippen automatisch mit, weil sie als Maske
   ueber einer Flaeche liegen und nicht als fertig gefaerbtes Bild.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --tinte:   #ece9df;
    --tinte-2: #b4afa3;
    --tinte-3: #8d8879;

    --papier:   #1a1712;
    --papier-2: #241f18;
    --papier-3: #131009;

    --rot:      #e8636a;
    --rot-tief: #f0868c;

    --tief:      #5e0a0e;
    --auf-tief:  #ece9df;
    --auf-tief-2:#e0b9ba;
    --linie-tief: rgba(236, 233, 223, .16);

    --linie:   rgba(236, 233, 223, .17);
    --linie-2: rgba(236, 233, 223, .09);

    --zeichnung: #e3e0d4;
    --zeichnung-fuell: #1a1712;
    --zeichnung-deckung: 1;
  }
}

/* --- Grundlage ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopfhoehe) + 1.25rem);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--papier);
  color: var(--tinte);
  font-family: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:where(h1, h2, h3, h4) {
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-stretch: 108%;
  letter-spacing: -.021em;
  line-height: 1.06;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 5.6vw, 4.15rem); font-weight: 800; }
h2 { font-size: clamp(1.95rem, 4.4vw, 3.1rem); }
h3 { font-size: clamp(1.12rem, 1.7vw, 1.35rem); letter-spacing: -.012em; line-height: 1.22; }

p { max-width: 62ch; }
/* Zwei Absaetze hintereinander brauchen Luft. Der Sternchen-Reset oben
   nimmt allen Elementen den Abstand, hier kommt er gezielt zurueck. */
p + p { margin-top: .9rem; }
.satz { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--tinte-2); }

.hof { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); }

.nur-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.sprung {
  position: absolute; left: 1rem; top: -4rem; z-index: 99;
  background: var(--tief); color: var(--auf-tief);
  padding: .7rem 1.2rem; border-radius: var(--r-pille); text-decoration: none;
  transition: top .2s var(--weich);
}
.sprung:focus { top: 1rem; }

:where(a, button, summary):focus-visible {
  outline: 2px solid var(--rot);
  outline-offset: 3px;
  border-radius: var(--r-klein);
}

.symbolvorrat { display: none; }
.sym { width: 1.05em; height: 1.05em; fill: currentColor; flex: none; }

/* Ein offener Punkt, der im Erstgespraech nicht untergehen darf. */
.luecke {
  display: inline-block;
  font-size: .8rem; font-weight: 600; letter-spacing: .01em;
  color: var(--rot);
  border: 1px dashed currentColor; border-radius: var(--r-klein);
  padding: .1rem .5rem;
}

/* --- Knoepfe --------------------------------------------------------------- */
.knopf {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.45rem;
  border-radius: var(--r-pille);
  font-weight: 600; font-size: 1rem; text-decoration: none;
  white-space: nowrap;
  transition: background .18s, color .18s, border-color .18s, translate .18s var(--weich);
}
.knopf:hover { translate: 0 -1px; }
.knopf:active { translate: 0 1px; }

.knopf--voll { background: var(--rot); color: #fff; }
.knopf--voll:hover { background: var(--rot-tief); }
@media (prefers-color-scheme: dark) {
  /* Auf dunklem Grund traegt das helle Rot die Schrift nicht mehr, also
     wird der Knopf umgedreht: rote Schrift auf Papier. */
  .knopf--voll { background: var(--tinte); color: var(--papier); }
  .knopf--voll:hover { background: var(--rot); color: #1a1712; }
}

.knopf--rand { border: 1.5px solid var(--linie); color: var(--tinte); }
.knopf--rand:hover { border-color: var(--tinte); }

.knopf--hell { background: var(--auf-tief); color: var(--tief); }
.knopf--hell:hover { background: #fff; }
.knopf--tiefrand { border: 1.5px solid var(--linie-tief); color: var(--auf-tief); }
.knopf--tiefrand:hover { border-color: var(--auf-tief); }

.textlink {
  display: inline-flex; align-items: center; gap: .35rem;
  color: inherit; text-decoration: none;
  border-bottom: 1.5px solid var(--rot);
  padding-bottom: 1px; font-weight: 600;
  transition: color .18s;
}
.textlink:hover { color: var(--rot); }

/* --- Kopfzeile ------------------------------------------------------------- */
/* Hinweisband: alles, was kurzfristig gilt — Halle gesperrt, Turnier
   auf dem Hof. Wird im Pflegebereich ein- und ausgeschaltet.

   Es steht ÜBER der Kopfzeile im normalen Fluss und scrollt mit weg.
   Das geht nur, weil die Kopfzeile "sticky" ist; bei einem festen Kopf
   läge es unsichtbar dahinter. */
.hinweisband {
  background: var(--rot);
  color: var(--papier);
  position: relative; z-index: calc(var(--z-kopf) + 1);
}
.hinweisband p {
  padding-block: .6rem;
  font-size: .94rem;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
  text-wrap: balance;
}

/* Wann jemand auf dem Hof anzutreffen ist. Steht nur da, wenn im
   Pflegebereich Zeiten eingetragen sind. */
.antreffen { margin-top: 1rem; }
.antreffen__zeile { display: block; }

/* Seit wann der Satz über die freien Boxen gilt. Der Monat kommt aus
   dem Zeitpunkt der letzten Pflege — genau die Angabe, die auf der
   alten Seite fehlte und den Satz wertlos machte. */
.stand__seit {
  font-size: .82rem;
  opacity: .75;
  white-space: nowrap;
}

.kopf {
  position: sticky; top: 0; z-index: var(--z-kopf);
  height: var(--kopfhoehe);
  transition: background .25s, box-shadow .25s, border-color .25s;
  border-bottom: 1px solid transparent;
}
.kopf[data-fest="ja"] {
  background: color-mix(in srgb, var(--papier) 88%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--linie);
}
.kopf__innen {
  height: 100%; display: flex; align-items: center; gap: 1.5rem;
  width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand);
}

.marke { display: flex; align-items: center; gap: .8rem; text-decoration: none; margin-right: auto; }
/* Die Wortmarke steckt im Bild, sie wird daneben nicht noch einmal gesetzt.
   52 Punkte ist das Groesste, was in die 70 Punkte hohe Kopfzeile passt,
   ohne dass es klemmt. Darunter wird die zweizeilige Wortmarke unleserlich. */
.marke img { width: auto; height: 52px; }
.marke__ort {
  font-size: .78rem; color: var(--tinte-3); letter-spacing: .05em;
  padding-left: .8rem; border-left: 1px solid var(--linie);
  white-space: nowrap;
}
@media (max-width: 560px) { .marke__ort { display: none; } }

.menue { display: flex; align-items: center; gap: 1.6rem; }
.menue a { text-decoration: none; font-size: .97rem; font-weight: 500; }
.menue a:not(.knopf) { color: var(--tinte-2); transition: color .18s; }
.menue a:not(.knopf):hover { color: var(--tinte); }
.menue .knopf { padding: .58rem 1.15rem; font-size: .95rem; }

.klapper { display: none; padding: .5rem; }
.klapper .sym { width: 1.5rem; height: 1.5rem; }
.klapper .sym--zu { display: none; }
.klapper[aria-expanded="true"] .sym--auf { display: none; }
.klapper[aria-expanded="true"] .sym--zu { display: block; }

@media (max-width: 900px) {
  .klapper { display: block; }
  .menue {
    position: absolute; top: var(--kopfhoehe); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--papier); border-bottom: 1px solid var(--linie);
    padding: .5rem var(--rand) 1.4rem;
    z-index: var(--z-menue);
  }
  .menue[data-offen="nein"] { display: none; }
  .menue a:not(.knopf) { padding: .85rem 0; border-bottom: 1px solid var(--linie-2); }
  .menue .knopf { margin-top: 1rem; justify-content: center; }
}

/* --- Kopfbereich -----------------------------------------------------------
   Ungleiche Doppelspalte, 46 zu 54. Das Foto laeuft rechts aus dem Raster
   heraus bis an den Bildschirmrand: erst dieser Anschnitt nimmt der Seite die
   Kastenwirkung, ein gerahmtes Bild neben Text ist immer statisch.

   Im Foto steht das gezeichnete Pferd auf dem echten Hofweg. Damit steht die
   Aussage der ganzen Seite schon im ersten Bildschirm: Zeichnung im Foto.
   -------------------------------------------------------------------------- */
.kopfbereich { position: relative; padding-top: clamp(2rem, 5vw, 4rem); }
.kopfbereich__gitter {
  display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  gap: clamp(1.4rem, 3vw, 2.6rem); align-items: start;
}
.kopfbereich h1 { font-size: clamp(2.7rem, 6.4vw, 4.9rem); max-width: 11ch; margin-bottom: 1rem; }
.kopfbereich .satz { max-width: 34ch; margin-bottom: 1.6rem; }
.kopfbereich__knoepfe { display: flex; flex-wrap: wrap; gap: .7rem; }

.kopfbereich__bild {
  position: relative;
  height: clamp(280px, 42vw, 520px);
  border-radius: var(--r) 0 0 var(--r);
  overflow: hidden;
  /* Zieht das Bild bis an den Bildschirmrand. Der Wert ist der Abstand von
     der Innenkante des Rasters bis dorthin: halbe Restbreite plus Rand.
     Nicht durch einen glatten Wert ersetzen, der stimmt nur bei einer
     einzigen Bildschirmbreite. */
  margin-right: calc(-1 * ((100vw - min(100vw, var(--breite))) / 2 + var(--rand)));
}
.kopfbereich__bild img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 860px) {
  .kopfbereich__gitter { grid-template-columns: 1fr; }
  .kopfbereich .satz { max-width: none; }
  .kopfbereich__bild {
    border-radius: 0;
    margin-inline: calc(-1 * ((100vw - min(100vw, var(--breite))) / 2 + var(--rand)));
  }
}

/* Das Statusband. Steht bewusst unter dem Kopfbereich und nicht darin. */
.stand {
  margin-top: clamp(.4rem, 1.2vw, 1rem);
  border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
  padding-block: 1.15rem;
}
.stand__innen {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem;
}
.stand__wort { font-family: 'Archivo', sans-serif; font-weight: 700; font-stretch: 108%; font-size: 1.12rem; }
.stand__rest { color: var(--tinte-2); font-size: .97rem; }

/* ==========================================================================
   DER RITT
   Jeder Abschnitt der Anlage ist eine Szene. Unten laeuft ein Band mit einer
   handgezogenen Bodenlinie, darauf reitet die Zeichnung durchs Bild. Welche
   Bewegung, richtet sich nach dem Inhalt: auf dem Springplatz wird
   gesprungen, am Zirkel geht es im Bogen, im Gelaende ueber eine Kuppe.

   Die Bewegung haengt an der Scrollposition, nicht an der Uhr. Umgesetzt
   ueber scrollgetriebene CSS-Zeitachsen (view-timeline). Es gibt nirgends
   einen scroll-Horcher, das Skript ruehrt die Bewegung nicht an.
   ========================================================================== */
.szene { position: relative; padding-top: clamp(3.5rem, 8vw, 6.5rem); }
.szene__wort { max-width: 46ch; }
.szene__wort h2 { margin-bottom: .8rem; }
.szene__wort p { color: var(--tinte-2); }

/* Vier verschiedene Bauformen, damit die Szenen nicht zur Leiste werden. */
.szene--links  .szene__gitter { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(1.4rem,3.5vw,3rem); align-items: center; }
.szene--breit  .szene__wort   { max-width: 34ch; margin-bottom: clamp(1.4rem,3vw,2.4rem); }
.szene--rechts .szene__gitter { display: grid; grid-template-columns: 6fr 6fr; gap: clamp(1.4rem,3.5vw,3rem); align-items: center; }
.szene--rechts .szene__wort   { order: 2; }
.szene--voll   .szene__wort   { max-width: 30ch; }

/* Bildpaar: ein breites und ein hohes Bild nebeneinander, ungleich geteilt. */
.szene--paar .szene__wort { max-width: 38ch; margin-bottom: clamp(1.4rem,3vw,2.4rem); }
.szene__paar { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(.7rem,1.6vw,1.2rem); }
.szene__paar .szene__bild { aspect-ratio: auto; }
.szene__paar .szene__bild:first-child { aspect-ratio: 16/9; }

.szene__bild { border-radius: var(--r); overflow: hidden; }
.szene__bild img { width: 100%; height: 100%; object-fit: cover; }
.szene__bild--rund { border-radius: 50%; aspect-ratio: 1; }
.szene--voll .szene__bild { aspect-ratio: 21/9; }
.szene--breit .szene__bild { aspect-ratio: 21/8; }

@media (max-width: 860px) {
  .szene--links .szene__gitter,
  .szene--rechts .szene__gitter { grid-template-columns: 1fr; }
  .szene--rechts .szene__wort { order: 0; }
  .szene__bild--rund { border-radius: var(--r); aspect-ratio: 16/10; }
  .szene__paar { grid-template-columns: 1fr; }
  .szene--voll .szene__bild,
  .szene--breit .szene__bild { aspect-ratio: 16/10; }
}

/* --- Das Band, in dem geritten wird --------------------------------------- */
.bahn {
  position: relative;
  height: clamp(170px, 23vw, 280px);
  /* Zieht das Band ueber die Unterkante des Bildes darueber, damit das Pferd
     durchs Bild reitet und nicht darunter entlang. */
  margin-top: clamp(-90px, -7vw, -40px);
  overflow: hidden;
  z-index: var(--z-inhalt);
  pointer-events: none;
}
/* Die Bodenlinie liegt als flacher Streifen genau auf --boden. Sie laeuft
   ueber die volle Breite und ist in allen Baendern gleich hoch, dadurch
   liest sich die ganze Seite als ein einziger durchgehender Weg. */
/* Das Sprungband braucht Luft nach oben, sonst wird das Pferd im Scheitel
   des Bogens abgeschnitten. Es zieht dafuer weiter ueber das Bild darueber,
   die Seite wird also nicht laenger. */
.bahn--sprung {
  height: clamp(240px, 32vw, 410px);
  margin-top: clamp(-210px, -16vw, -100px);
}

.bahn__grund {
  position: absolute;
  left: 0; right: 0; bottom: var(--boden);
  width: 100%; height: 20px;
  color: var(--zeichnung);   /* gezeichnet, also blau wie das Pferd */
  opacity: .34;
}
/* Im Gelaende geht der Weg ueber eine Kuppe, das Feld ist dafuer hoeher. */
.bahn--gelaende { height: clamp(205px, 27vw, 345px); margin-top: clamp(-140px, -10vw, -60px); }
.bahn--gelaende .bahn__grund {
  height: var(--gelaendebox);
  bottom: calc(var(--boden) - 8px);
}
/* Der Zirkel ist keine Linie, sondern ein liegender Kreis. Seine nahe
   Seite liegt auf --boden, die ferne entsprechend hoeher. */
.bahn--zirkel .bahn__grund {
  height: calc(var(--zirkeltiefe) * 2 + 8px);
  bottom: calc(var(--boden) - 4px);
  opacity: .26;
}

/* Das Pferd. Alle Zeichnungen liegen uebereinander, sichtbar ist immer
   genau eine. Gefaerbt wird ueber die Flaeche, das Bild ist nur die Maske,
   deshalb kippt die Zeichnung im dunklen Modus von selbst mit. */
.pferd {
  position: absolute;
  left: 0; bottom: calc(var(--boden) - var(--pferdbreite) * .04);
  width: var(--pferdbreite);
  aspect-ratio: 620 / 341;
  transform-origin: 50% 100%;
  translate: 42vw 0;
  opacity: var(--zeichnung-deckung);
}
.pferd--hoch { aspect-ratio: 560 / 634; width: clamp(120px, 17vw, 210px); bottom: var(--boden); }
.bahn--weide .pferd {
  aspect-ratio: 560 / 365; width: clamp(150px, 21vw, 260px);
  bottom: var(--boden);
  translate: 16vw 0;   /* steht unter der Weide, nicht mittig im Band */
}
.pferd--sprungmass { aspect-ratio: 620 / 414; }
/* --- Das Pferd im Kopfbereich ---------------------------------------------
   Es steht von Anfang an im Foto auf dem Hofweg, ohne Auftritt. Ein Einritt
   beim Laden war gebaut und wurde wieder entfernt: Die Seite hat ihre
   Bewegung am Scrollrad, eine zweite an der Uhr direkt beim Aufschlagen ist
   eine zu viel.

   Es bekommt trotzdem einen eigenen Kasten, weil das stehende Blatt hoch und
   schmal ist und die Galoppblaetter breit und flach. Ohne das springt das
   Pferd in der Groesse, sobald jemand die Zeichnung austauscht.
   -------------------------------------------------------------------------- */
.bahn--kopf {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  height: clamp(190px, 26vw, 320px);
  z-index: var(--z-inhalt);
}
/* Im Kopfbereich keine gezeichnete Bodenlinie: Das Pferd steht auf dem
   echten Hofweg im Foto, der ist der Boden. Eine zweite Linie quer durch
   das Bild waere eine Behauptung zu viel. */
.bahn--kopf .bahn__grund { display: none; }
.bahn--kopf .pferd {
  --pferdbreite: clamp(200px, 26vw, 340px);
  width: var(--pferdbreite);
  height: 0; aspect-ratio: auto;
  bottom: var(--boden);
  translate: 26vw 0;
}
.bahn--kopf .gang {
  position: absolute; top: auto; bottom: 0;
  left: 28%; width: 44%; aspect-ratio: 560 / 634;
}
.bahn--kopf .gang .bild { opacity: 1; }

/* Das Schlussbild steht rechts und geht nicht mehr weiter. */
.pferd--ende { left: auto; right: clamp(1rem, 8vw, 8rem); translate: 0 0; }

/* Das Hindernis. Steht dort, wo der Sprungbogen seinen Scheitel hat, also
   bei 50vw plus einer halben Pferdebreite. Wird der Weg geaendert, muss
   dieser Wert mitwandern. */
/* Das Hindernis steht genau unter dem Scheitel des Sprungbogens. Der
   Scheitel liegt bei 52vw, das Pferd ist eine halbe Pferdebreite breiter,
   deshalb der Zuschlag. Wird weg-sprung geaendert, muss dieser Wert mit. */
.hindernis {
  position: absolute;
  left: 50vw; margin-left: clamp(58px, 8.4vw, 108px);
  bottom: var(--boden);
  width: clamp(95px, 13vw, 160px);
  height: auto; aspect-ratio: 260/160;
  color: var(--zeichnung);   /* gezeichnet, also blau wie das Pferd */
  opacity: .42;
}

.gang { position: absolute; inset: 0; }
.bild { position: absolute; inset: 0; opacity: 0; }
/* Zwei Ebenen: ::before ist der Koerper, ::after sind die Striche darueber.
   Die Maske muss auf den Ebenen liegen und nicht auf .bild selbst, sonst
   wuerde die Strichmaske den Koerper gleich wieder wegschneiden. */
.bild::before, .bild::after {
  content: ''; position: absolute; inset: 0;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center bottom; mask-position: center bottom;
  -webkit-mask-size: contain; mask-size: contain;
}
.bild::before { background: var(--zeichnung-fuell); }
.bild::after  { background: var(--zeichnung); }
/* Ohne Bewegung ist genau ein Bild sichtbar, sonst steht die Szene leer. */
.bild--ruhe { opacity: 1; }

.b-g1::before { -webkit-mask-image: url('../img/pferd/galopp-1-fuell.webp'); mask-image: url('../img/pferd/galopp-1-fuell.webp'); }
.b-g1::after  { -webkit-mask-image: url('../img/pferd/galopp-1.webp');       mask-image: url('../img/pferd/galopp-1.webp'); }
.b-g2::before { -webkit-mask-image: url('../img/pferd/galopp-2-fuell.webp'); mask-image: url('../img/pferd/galopp-2-fuell.webp'); }
.b-g2::after  { -webkit-mask-image: url('../img/pferd/galopp-2.webp');       mask-image: url('../img/pferd/galopp-2.webp'); }
.b-g3::before { -webkit-mask-image: url('../img/pferd/galopp-3-fuell.webp'); mask-image: url('../img/pferd/galopp-3-fuell.webp'); }
.b-g3::after  { -webkit-mask-image: url('../img/pferd/galopp-3.webp');       mask-image: url('../img/pferd/galopp-3.webp'); }
.b-g4::before { -webkit-mask-image: url('../img/pferd/galopp-4-fuell.webp'); mask-image: url('../img/pferd/galopp-4-fuell.webp'); }
.b-g4::after  { -webkit-mask-image: url('../img/pferd/galopp-4.webp');       mask-image: url('../img/pferd/galopp-4.webp'); }
.b-g5::before { -webkit-mask-image: url('../img/pferd/galopp-5-fuell.webp'); mask-image: url('../img/pferd/galopp-5-fuell.webp'); }
.b-g5::after  { -webkit-mask-image: url('../img/pferd/galopp-5.webp');       mask-image: url('../img/pferd/galopp-5.webp'); }
.b-g6::before { -webkit-mask-image: url('../img/pferd/galopp-6-fuell.webp'); mask-image: url('../img/pferd/galopp-6-fuell.webp'); }
.b-g6::after  { -webkit-mask-image: url('../img/pferd/galopp-6.webp');       mask-image: url('../img/pferd/galopp-6.webp'); }
.b-s1::before { -webkit-mask-image: url('../img/pferd/sprung-1-fuell.webp'); mask-image: url('../img/pferd/sprung-1-fuell.webp'); }
.b-s1::after  { -webkit-mask-image: url('../img/pferd/sprung-1.webp');       mask-image: url('../img/pferd/sprung-1.webp'); }
.b-s2::before { -webkit-mask-image: url('../img/pferd/sprung-2-fuell.webp'); mask-image: url('../img/pferd/sprung-2-fuell.webp'); }
.b-s2::after  { -webkit-mask-image: url('../img/pferd/sprung-2.webp');       mask-image: url('../img/pferd/sprung-2.webp'); }
.b-s3::before { -webkit-mask-image: url('../img/pferd/sprung-3-fuell.webp'); mask-image: url('../img/pferd/sprung-3-fuell.webp'); }
.b-s3::after  { -webkit-mask-image: url('../img/pferd/sprung-3.webp');       mask-image: url('../img/pferd/sprung-3.webp'); }
.b-st::before { -webkit-mask-image: url('../img/pferd/stehend-fuell.webp'); mask-image: url('../img/pferd/stehend-fuell.webp'); }
.b-st::after  { -webkit-mask-image: url('../img/pferd/stehend.webp');       mask-image: url('../img/pferd/stehend.webp'); }
.b-gr::before { -webkit-mask-image: url('../img/pferd/grasen-fuell.webp'); mask-image: url('../img/pferd/grasen-fuell.webp'); }
.b-gr::after  { -webkit-mask-image: url('../img/pferd/grasen.webp');       mask-image: url('../img/pferd/grasen.webp'); }
.b-au::before { -webkit-mask-image: url('../img/pferd/aufbaeumen-fuell.webp'); mask-image: url('../img/pferd/aufbaeumen-fuell.webp'); }
.b-au::after  { -webkit-mask-image: url('../img/pferd/aufbaeumen.webp');       mask-image: url('../img/pferd/aufbaeumen.webp'); }

/* --- Die Gangart, sechs Zeichnungen im Wechsel ----------------------------
   Ein Galoppsprung besteht aus sechs Blaettern. Jedes ist genau ein Sechstel
   des Takts lang sichtbar. Nicht ueberblenden, sondern hart schneiden: so
   wird es von Hand gezeichnet und so soll es aussehen.
   -------------------------------------------------------------------------- */
@keyframes takt-1 { 0%,16.6%{opacity:1} 16.7%,100%{opacity:0} }
@keyframes takt-2 { 0%,16.6%{opacity:0} 16.7%,33.2%{opacity:1} 33.3%,100%{opacity:0} }
@keyframes takt-3 { 0%,33.2%{opacity:0} 33.3%,49.9%{opacity:1} 50%,100%{opacity:0} }
@keyframes takt-4 { 0%,49.9%{opacity:0} 50%,66.5%{opacity:1} 66.6%,100%{opacity:0} }
@keyframes takt-5 { 0%,66.5%{opacity:0} 66.6%,83.2%{opacity:1} 83.3%,100%{opacity:0} }
@keyframes takt-6 { 0%,83.2%{opacity:0} 83.3%,100%{opacity:1} }

/* --- Die Wege --------------------------------------------------------------
   Alles in Ansichtsbreiten, damit die Wege auf jedem Bildschirm gleich
   wirken. Bewegt werden nur translate, rotate und scale.
   -------------------------------------------------------------------------- */
@keyframes weg-gerade {
  from { translate: -36vw 0; }
  to   { translate: 122vw 0; }
}

/* Gelaende: der Weg geht ueber eine Kuppe und wieder herunter. Die Hoehe
   steht in --kuppe und gilt zugleich fuer die gezeichnete Bodenlinie,
   deshalb laeuft das Pferd auf dem Weg und nicht daneben. */
@keyframes weg-gelaende {
  0%   { translate: -36vw 0;                              rotate: 0deg; }
  45%  { translate:  24vw calc(var(--kuppe) * -1);        rotate: -2.5deg; }
  72%  { translate:  64vw 0;                              rotate: 2deg; }
  100% { translate: 122vw 0;                              rotate: 0deg; }
}

/* Zirkel: das Pferd geht auf der nahen Haelfte eines liegenden Kreises.
   An den Seiten ist es weiter weg, also hoeher und kleiner, in der Mitte
   kommt es auf den Betrachter zu. Genau das macht ein longiertes Pferd.
   Es laeuft nicht rechts aus dem Bild: der Weg endet am Rand des Zirkels,
   dort ist das Pferd am weitesten weg und blendet aus. Ein longiertes Pferd
   verlaesst den Kreis nicht. Die Werte 3vw und 71vw sind die Zirkelraender
   abzueglich der halben Pferdebreite, sie haengen an --pferdbreite. */
@keyframes weg-zirkel {
  0%   { translate:  3vw calc(var(--zirkeltiefe) * -1); scale: .56; opacity: 0; }
  10%  { opacity: 1; }
  50%  { translate: 37vw 0;                             scale: 1;   opacity: 1; }
  90%  { opacity: 1; }
  100% { translate: 71vw calc(var(--zirkeltiefe) * -1); scale: .56; opacity: 0; }
}

/* Sprung: Anlauf, Absprung, Bogen, Landung, Abgalopp. Der Scheitel liegt bei
   58 Prozent, dort steht auch das Hindernis in der Bodenlinie. */
@keyframes weg-sprung {
  0%   { translate: -36vw 0;                                 rotate: 0deg; }
  40%  { translate:  28vw 0;                                 rotate: 0deg; }
  46%  { translate:  36vw calc(var(--sprunghoehe) * -.32);   rotate: -14deg; }
  52%  { translate:  44vw calc(var(--sprunghoehe) * -.82);   rotate: -8deg; }
  58%  { translate:  52vw calc(var(--sprunghoehe) * -1);     rotate: -1deg; }
  66%  { translate:  60vw calc(var(--sprunghoehe) * -.8);    rotate: 7deg; }
  72%  { translate:  66vw calc(var(--sprunghoehe) * -.3);    rotate: 9deg; }
  79%  { translate:  73vw 0;                                 rotate: 0deg; }
  100% { translate: 122vw 0;                                 rotate: 0deg; }
}

/* Beim Sprung wird zwischen zwei Saetzen von Zeichnungen umgeschaltet:
   vorher und nachher Galopp, dazwischen die drei Sprungblaetter. */
@keyframes nur-galopp { 0%,40.9%{opacity:1} 41%,78.9%{opacity:0} 79%,100%{opacity:1} }
@keyframes nur-sprung { 0%,40.9%{opacity:0} 41%,78.9%{opacity:1} 79%,100%{opacity:0} }
@keyframes sprung-1   { 0%,40.9%{opacity:0} 41%,48.9%{opacity:1} 49%,100%{opacity:0} }
@keyframes sprung-2   { 0%,48.9%{opacity:0} 49%,66.9%{opacity:1} 67%,100%{opacity:0} }
@keyframes sprung-3   { 0%,66.9%{opacity:0} 67%,100%{opacity:1} }

/* Das grasende Pferd bekommt keinen Weg. Ein Pferd, das frisst, geht nicht
   nebenher durchs Bild, es steht. Deshalb hier bewusst keine Keyframes. */

/* Das Aufbaeumen am Ende: das Pferd kommt an und richtet sich auf. */
@keyframes ankommen {
  0%   { translate: -12vw 0; scale: .88; opacity: 0; }
  35%  { opacity: var(--zeichnung-deckung); }
  100% { translate: 0 0; scale: 1; opacity: var(--zeichnung-deckung); }
}

/* --- Anschluss an die Scrollposition --------------------------------------
   Nur wenn der Browser scrollgetriebene Zeitachsen kann. Kann er es nicht,
   steht das Pferd still an einer sinnvollen Stelle und es fehlt nichts.
   -------------------------------------------------------------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    .szene { view-timeline-name: --szene; view-timeline-axis: block; }

    .pferd {
      animation-timeline: --szene;
      animation-range: cover 4% cover 96%;
      animation-timing-function: linear;
      animation-fill-mode: both;
    }
    .bahn--galopp   .pferd { animation-name: weg-gerade; }
    .bahn--gelaende .pferd { animation-name: weg-gelaende; }
    .bahn--zirkel   .pferd { animation-name: weg-zirkel; }
    .bahn--sprung   .pferd { animation-name: weg-sprung; }
    .bahn--ankunft  .pferd { animation-name: ankommen; }

    /* Die Beine laufen an derselben Zeitachse, nur vielfach schneller.
       Dadurch galoppiert das Pferd genau so schnell, wie gescrollt wird:
       langsam scrollen heisst langsamer Galopp, anhalten heisst Standbild. */
    .bahn--galopp .bild, .bahn--gelaende .bild,
    .bahn--zirkel .bild, .bahn--sprung .bild {
      animation-timeline: --szene;
      animation-range: cover 4% cover 96%;
      animation-timing-function: linear;
      animation-fill-mode: both;
    }
    .bahn--galopp   .bild { animation-iteration-count: 9; }
    .bahn--gelaende .bild { animation-iteration-count: 10; }
    .bahn--zirkel   .bild { animation-iteration-count: 8; }

    .bild--ruhe { opacity: 0; }

    .b-g1 { animation-name: takt-1; }
    .b-g2 { animation-name: takt-2; }
    .b-g3 { animation-name: takt-3; }
    .b-g4 { animation-name: takt-4; }
    .b-g5 { animation-name: takt-5; }
    .b-g6 { animation-name: takt-6; }

    /* Im Sprungband gilt eine eigene Ordnung: der Galopptakt laeuft im
       Anlauf und im Abgalopp, die Sprungblaetter dazwischen. */
    .bahn--sprung .gang {
      animation-timeline: --szene;
      animation-range: cover 4% cover 96%;
      animation-timing-function: linear;
      animation-fill-mode: both;
    }
    .bahn--sprung .gang--galopp { animation-name: nur-galopp; }
    .bahn--sprung .gang--sprung { animation-name: nur-sprung; }
    .bahn--sprung .gang--galopp .bild { animation-iteration-count: 7; }
    .bahn--sprung .b-s1 { animation-name: sprung-1; }
    .bahn--sprung .b-s2 { animation-name: sprung-2; }
    .bahn--sprung .b-s3 { animation-name: sprung-3; }

    /* Grasendes und stehendes Pferd bleiben ein einzelnes Blatt. */
    .bahn--weide .bild--ruhe,
    .bahn--ankunft .bild--ruhe { opacity: 1; }
  }
}

/* Ohne Bewegung: das Pferd steht mittig im Band, ein Blatt, fertig. */
@media (prefers-reduced-motion: reduce) {
  .pferd { translate: 38vw 0 !important; animation: none !important; }
  .bahn--kopf .pferd { translate: 26vw 0 !important; }
  .bild--ruhe { opacity: 1; }
  .bahn--galopp .b-g4, .bahn--gelaende .b-g4,
  .bahn--zirkel .b-g4, .bahn--sprung .b-s2 { opacity: 1; }
}

/* --- Abschnitte, die einblenden -------------------------------------------
   Der versteckte Ausgangszustand haengt an der Klasse am html-Element. Die
   setzt das Skript erst, wenn es das Einblenden auch uebernehmen kann.
   Fehlt das Skript, bleibt der Inhalt schlicht sichtbar. Eine Verzierung
   darf den Inhalt nie verschlucken. Diese Reihenfolge nicht umdrehen.
   -------------------------------------------------------------------------- */
.js-bewegt [data-auf="nein"] {
  opacity: 0; translate: 0 20px;
  transition: opacity .7s var(--weich), translate .7s var(--weich);
}
.js-bewegt [data-auf="ja"] { opacity: 1; translate: 0 0; }
.verzug-1 { transition-delay: .09s; }
.verzug-2 { transition-delay: .18s; }
.verzug-3 { transition-delay: .27s; }

/* --- Die Box. Kachelraster mit ungleichen Feldern -------------------------- */
.abschnitt { padding-block: clamp(3.5rem, 8vw, 7rem); }
.abschnitt__kopf { margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.abschnitt__kopf p { color: var(--tinte-2); margin-top: .7rem; }

.kacheln {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(.7rem, 1.4vw, 1.1rem);
}
.kachel {
  border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--linie);
  display: flex; flex-direction: column;
  min-height: 200px;
}
.kachel--gross { grid-column: span 6; }
.kachel--halb  { grid-column: span 6; }
.kachel--drittel { grid-column: span 4; }
.kachel--viertel { grid-column: span 3; }
/* Feste Bildproportion, nicht "was uebrig bleibt". Sonst bekommt jede
   Kachel eine andere Bildhoehe, je nachdem wie lang ihr Text ist, und die
   Reihe endet auf vier verschiedenen Hoehen. Gleich breite Kacheln in einer
   Reihe haben so zwangslaeufig gleich hohe Bilder. */
.kachel__bild { flex: none; aspect-ratio: 4 / 3; overflow: hidden; }
.kachel__bild img { width: 100%; height: 100%; object-fit: cover; }
.kachel__wort { padding: 1.1rem 1.25rem 1.25rem; }
.kachel__wort p { color: var(--tinte-2); font-size: .95rem; margin-top: .35rem; }
.kachel--tinte { background: var(--papier-2); border-color: transparent; }
.kachel--tinte .kachel__wort { padding-block: 1.4rem; }

@media (max-width: 1050px) {
  .kacheln { grid-template-columns: repeat(2, 1fr); }
  .kachel--gross, .kachel--halb, .kachel--drittel, .kachel--viertel { grid-column: span 1; }
}

@media (max-width: 700px) {
  .kacheln { grid-template-columns: 1fr; }
}

/* --- Versorgung. Drei Gruppen, keine Zeilenliste -------------------------- */
.gruppen { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 3vw, 2.6rem); }
.gruppe { border-top: 2px solid var(--tinte); padding-top: 1.1rem; }
.gruppe h3 { margin-bottom: .8rem; }
.gruppe dl { display: grid; gap: .55rem; }
.gruppe dt { font-weight: 600; font-size: .95rem; }
.gruppe dd { margin: 0 0 .5rem; color: var(--tinte-2); font-size: .95rem; }
@media (max-width: 860px) { .gruppen { grid-template-columns: 1fr; } }

/* --- Zeitleiste ------------------------------------------------------------ */
.zeit { display: grid; gap: 0; margin-top: 1rem; }
.zeit__eintrag {
  display: grid; grid-template-columns: 6.5rem 1fr;
  gap: clamp(1rem, 3vw, 2.4rem);
  padding-block: 1.05rem;
  border-top: 1px solid var(--linie);
}
.zeit__eintrag:last-child { border-bottom: 1px solid var(--linie); }
.zeit__jahr {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-stretch: 92%;
  font-size: 1.1rem; color: var(--rot); font-variant-numeric: tabular-nums;
}
.zeit__was { color: var(--tinte-2); }
.zeit__eintrag--stark .zeit__was { color: var(--tinte); font-weight: 600; }
@media (max-width: 620px) {
  .zeit__eintrag { grid-template-columns: 1fr; gap: .15rem; }
}

/* --- Unterricht ------------------------------------------------------------ */
.unterricht { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: start; }
.merk {
  border: 1px solid var(--linie); border-radius: var(--r);
  padding: clamp(1.2rem, 2.5vw, 1.7rem);
  background: var(--papier-3);
}
.merk h3 { margin-bottom: .6rem; }
.merk p { color: var(--tinte-2); font-size: .97rem; }
.merk__zeile { display: inline-flex; align-items: center; gap: .55rem; margin-top: .9rem; font-weight: 600; }
@media (max-width: 860px) { .unterricht { grid-template-columns: 1fr; } }

/* --- Kontakt. Tiefe Flaeche, gleiche Tinte, nur satter -------------------- */
.kontakt { background: var(--tief); color: var(--auf-tief); position: relative; }
.kontakt .satz, .kontakt p { color: var(--auf-tief-2); }
.kontakt h2 { color: var(--auf-tief); }
.kontakt__gitter {
  display: grid; grid-template-columns: 6fr 6fr;
  gap: clamp(1.8rem, 4vw, 3.6rem); align-items: start;
}
.kontakt__knoepfe { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.7rem; }
.anschrift { display: grid; gap: 1.15rem; }
.anschrift__teil { display: flex; gap: .85rem; align-items: flex-start; }
.anschrift__zeichen {
  width: 2.3rem; height: 2.3rem; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--linie-tief); border-radius: var(--r-pille);
}
.anschrift__teil h3 { font-size: 1rem; margin-bottom: .1rem; color: var(--auf-tief); }
.anschrift__teil a { text-decoration: none; color: var(--auf-tief-2); }
.anschrift__teil a:hover { color: var(--auf-tief); }
.kontakt .textlink { border-bottom-color: var(--auf-tief); color: var(--auf-tief); }
@media (max-width: 860px) { .kontakt__gitter { grid-template-columns: 1fr; } }

/* Im Kontaktband ist der Grund tief, dort muss die Zeichnung hell sein. */
/* Im Kontaktband ist der Grund tief, dort muessen Strich und Koerper
   getauscht werden: helle Striche auf tiefem Koerper. */
.bahn--auftief .bild::after  { background: var(--auf-tief); }
.bahn--auftief .bild::before { background: var(--tief); }
.bahn--auftief .bahn__grund { color: var(--auf-tief); }

/* --- Fusszeile ------------------------------------------------------------- */
.fuss { background: var(--tief); color: var(--auf-tief-2); padding-block: 2.2rem; border-top: 1px solid var(--linie-tief); }
.fuss__innen { display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; align-items: center; justify-content: space-between; font-size: .92rem; }
.fuss a { text-decoration: none; }
.fuss a:hover { color: var(--auf-tief); text-decoration: underline; }
.fuss__wege { display: flex; flex-wrap: wrap; gap: 1.2rem; }

/* --- Rechtstexte ----------------------------------------------------------- */
.text { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.text h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: 1.6rem; }
.text h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); margin-top: 2.4rem; margin-bottom: .7rem; }
.text h3 { margin-top: 1.6rem; margin-bottom: .4rem; }
.text p, .text li { color: var(--tinte-2); margin-bottom: .8rem; }
.text ul { padding-left: 1.2rem; }
.text a { color: var(--tinte); }


/* Ersatz fuer ein Wortzeichen, das es in der
   Musterfassung nicht gibt. Erbt Farbe und Groesse
   von der Kopfzeile, in der es steht. */
.marke-ersatz {
  font-weight: 700;
  font-size: 1.05em;
  letter-spacing: -.01em;
  white-space: nowrap;
  color: currentColor;
}