/* ==========================================================================
   Hendrik Hüsker Pferdezucht — Stylesheet
   Handgeschriebenes CSS, keine Frameworks, keine externen Requests.
   Reihenfolge: Fonts → Tokens → Themes → Reset → Layout → Komponenten → Seiten
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts — ausschließlich lokal aus /assets/fonts (Font-Richtlinie)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/poppins-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/poppins-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/assets/fonts/dm-sans-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/assets/fonts/dm-sans-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Design-Tokens
   -------------------------------------------------------------------------- */
:root {
  --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  --c-ink: #241a10;
  --c-bark: #4a3423;
  --c-leather: #6b3a22;
  --c-leather-dark: #4f2a18;
  --c-clay: #a85916;
  --c-clay-light: #e0a668;
  --c-olive: #4b5a3a;
  --c-olive-dark: #384329;
  --c-cream: #faf6ee;
  --c-cream-soft: #f2ead9;
  --c-sand: #efe7d8;
  --c-paper: #fffdf8;
  --c-border: #e2d8c3;

  --background: var(--c-cream);
  --foreground: var(--c-ink);

  --wrap: 72rem;
  --gutter: 1.5rem;
  --radius-lg: 1rem;
  --radius-md: 0.75rem;
  --radius-sm: 0.5rem;
}

/* --------------------------------------------------------------------------
   3. Reset & Basis
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  border: 0 solid var(--c-border);
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  height: 100%;
}

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  flex: 1 1 auto;
}

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

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  cursor: pointer;
}

h1,
h2,
h3,
h4 {
  font-size: inherit;
  font-weight: inherit;
}

ul {
  list-style: none;
  padding: 0;
}

dl,
dd {
  margin: 0;
}

::selection {
  background-color: color-mix(in srgb, var(--c-clay) 30%, transparent);
  color: var(--c-ink);
}

:focus-visible {
  outline: 2px solid var(--c-clay);
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Ausblenden per clip statt negativem left — erzeugt keine Scroll-Flaeche. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  background: var(--c-clay);
  color: var(--c-paper);
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 600;
}
.skip-link:focus {
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  padding: 0.75rem 1.25rem;
}

/* --------------------------------------------------------------------------
   4. Layout-Helfer
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--5xl {
  max-width: 64rem;
}
.container--4xl {
  max-width: 56rem;
}
.container--3xl {
  max-width: 48rem;
}

.section {
  padding-block: 5rem;
}
.section--lg {
  padding-block: 6rem;
}
.section--cream {
  background-color: var(--c-cream);
}
.section--soft {
  background-color: var(--c-cream-soft);
}
.section--ink {
  background-color: var(--c-ink);
  color: var(--c-cream);
}

/* --------------------------------------------------------------------------
   5. Typografie
   -------------------------------------------------------------------------- */
.eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--c-clay);
}
.eyebrow--on-ink {
  color: var(--c-clay-light);
}

.headline {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--c-ink);
  /* Deutsche Komposita duerfen auf schmalen Displays umbrechen */
  overflow-wrap: break-word;
}
.headline--xl {
  font-size: 2.25rem;
  line-height: 1.15;
}
.headline--lg {
  font-size: 1.875rem;
  line-height: 1.2;
}
.headline--md {
  font-size: 1.5rem;
  line-height: 1.3;
}
.headline--sm {
  font-size: 1.25rem;
  line-height: 1.35;
}
.headline--on-ink {
  color: inherit;
}

.text-balance {
  text-wrap: balance;
}

.prose {
  line-height: 1.625;
  color: color-mix(in srgb, var(--c-bark) 85%, transparent);
}
.prose--lg {
  font-size: 1.125rem;
}
.prose--on-ink {
  color: color-mix(in srgb, var(--c-cream-soft) 80%, transparent);
}
.prose + .prose {
  margin-top: 1rem;
}

/* Vertikaler Rhythmus zwischen den Textbausteinen */
.eyebrow + .headline {
  margin-top: 0.75rem;
}
.headline + .prose {
  margin-top: 1.25rem;
}
.headline + .prose--lg {
  margin-top: 1.5rem;
}
.headline + .prose--tight {
  margin-top: 1rem;
}
.prose + .inline-link {
  margin-top: 1.5rem;
}
.prose + .btn {
  margin-top: 2rem;
}

.center-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.center-stack .prose {
  max-width: 36rem;
}

.inline-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  color: var(--c-leather);
  transition: color 0.2s ease;
}
.inline-link:hover {
  color: var(--c-clay);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--c-bark) 70%, transparent);
  transition: color 0.2s ease;
}
.back-link:hover {
  color: var(--c-leather);
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  padding: 0.875rem 1.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-align: center;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}
.btn--primary {
  background-color: var(--c-clay);
  color: var(--c-paper);
  box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--c-ink) 20%, transparent);
}
.btn--primary:hover {
  background-color: color-mix(in srgb, var(--c-clay) 90%, transparent);
}
.btn--ghost {
  border: 1px solid color-mix(in srgb, var(--c-paper) 50%, transparent);
  background-color: color-mix(in srgb, var(--c-ink) 10%, transparent);
  color: var(--c-paper);
  backdrop-filter: blur(4px);
}
.btn--ghost:hover {
  background-color: color-mix(in srgb, var(--c-paper) 15%, transparent);
}
.btn--wide {
  padding-inline: 2rem;
}
.btn--outline {
  border: 1.5px solid var(--c-leather);
  background-color: transparent;
  color: var(--c-leather);
  padding: 0.75rem 1.5rem;
  font-size: 0.8125rem;
}
.btn--outline:hover {
  background-color: var(--c-leather);
  color: var(--c-paper);
}
.btn--outline svg {
  transition: transform 0.2s ease;
}
.btn--outline:hover svg {
  transform: translate(2px, -2px);
}

/* --------------------------------------------------------------------------
   7. Header / Navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 2px solid var(--c-ink);
  background-color: var(--c-cream);
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    background-color 0.3s ease;
}
/* Ueber dem Vollbild-Hero wirkt die harte Ink-Kante unfertig; sie kommt
   erst, wenn wirklich Inhalt unter der Leiste durchlaeuft. */
.site-header.is-stuck {
  border-bottom-color: color-mix(in srgb, var(--c-ink) 12%, transparent);
  background-color: color-mix(in srgb, var(--c-cream) 88%, transparent);
  box-shadow: 0 6px 20px -8px rgb(36 26 16 / 22%);
}
@supports (backdrop-filter: blur(8px)) {
  .site-header.is-stuck {
    backdrop-filter: blur(10px) saturate(1.2);
  }
}

.site-header__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 1rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: 0.025em;
  color: var(--c-ink);
  white-space: nowrap;
}
.brand__sub {
  display: none;
  margin-left: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--c-leather);
}

.nav-desktop {
  display: none;
  align-items: center;
  /* Sechs Menüpunkte plus Marke und Theme-Switcher brauchen Platz: die
     waagerechte Navigation erscheint deshalb erst ab 1024px, darunter
     übernimmt das Burger-Menü (siehe Breakpoints). */
  gap: 1.25rem;
}
.nav-desktop a {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-bark);
  transition: color 0.2s ease;
}
.nav-desktop a:hover,
.nav-desktop a[aria-current="page"] {
  color: var(--c-leather);
}

/* Sprachumschalter — sitzt zwischen Navigation und Menue-Knopf und ist
   ohne JavaScript ausgeblendet (dann gibt es nichts umzuschalten). */
.sprache {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  height: 2.5rem;
  padding-inline: 0.75rem;
  flex-shrink: 0;
  margin-left: auto;
  border: 1px solid var(--c-border);
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--c-bark);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}
.sprache:hover {
  background-color: var(--c-sand);
  border-color: color-mix(in srgb, var(--c-leather) 40%, transparent);
  color: var(--c-leather);
}
.sprache[disabled] {
  opacity: 0.55;
  cursor: progress;
}
.sprache svg {
  opacity: 0.7;
}
@media (min-width: 1024px) {
  .sprache {
    margin-left: 0.5rem;
  }
}

.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 48x48 Touch-Ziel; flex-shrink: 0, sonst quetscht der Header ihn schmal */
  height: 3rem;
  width: 3rem;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  color: var(--c-ink);
  transition: background-color 0.2s ease;
}
.nav-toggle:hover {
  background-color: var(--c-sand);
}
.nav-toggle .icon-close {
  display: none;
}
.nav-toggle[aria-expanded="true"] .icon-open {
  display: none;
}
.nav-toggle[aria-expanded="true"] .icon-close {
  display: block;
}

.nav-mobile {
  display: flex;
  flex-direction: column;
  border-top: 1px solid color-mix(in srgb, var(--c-border) 70%, transparent);
  background-color: var(--c-cream);
  padding: 1rem var(--gutter);
}
.nav-mobile a {
  padding-block: 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--c-bark);
  transition: color 0.2s ease;
}
.nav-mobile a:hover,
.nav-mobile a[aria-current="page"] {
  color: var(--c-leather);
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.hero__img {
  position: absolute;
  inset: 0;
  transform: scale(1.1);
  will-change: transform;
}
.hero__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Hochkant bleibt nur rund ein Drittel der Bildbreite stehen: der
     Ausschnitt muss auf Kopf und Vorhand sitzen, sonst zeigt das Handy
     nur Bauch und Beine. */
  object-position: 36% 50%;
}
/* Genau EINE Ebene ueber dem Foto. Vorher lagen hier drei uebereinander
   (Flaeche 35%, Verlauf 55-60% mit Cream-Ausblendung, Pool bis 80%), die
   sich teilweise gegenseitig aufgehoben haben: auf Hoehe der Headline kamen
   nur rund 24% Bildlicht durch, die untere Haelfte war beiger Nebel.
   Jetzt: oben fast klar, damit das Pferd steht — nach unten so weit
   abgedunkelt, wie der Text an dieser Stelle braucht. */
.hero__scrim {
  position: absolute;
  inset: 0;
}
/* Hochkant steht der Text ueber die ganze Breite und beginnt schon bei
   rund 18% Hoehe — der Verlauf muss deshalb frueher zupacken als auf
   dem Desktop, wo die linke Spalte das uebernimmt. */
.hero__scrim--grad {
  background-image: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--c-ink) 15%, transparent) 0%,
    color-mix(in srgb, var(--c-ink) 30%, transparent) 12%,
    color-mix(in srgb, var(--c-ink) 62%, transparent) 26%,
    color-mix(in srgb, var(--c-ink) 74%, transparent) 55%,
    color-mix(in srgb, var(--c-ink) 80%, transparent) 100%
  );
}

.hero__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 5.5rem var(--gutter) 3rem;
  min-height: calc(100svh - var(--header-h, 4.5rem));
  display: flex;
  flex-direction: column;
  /* Text unten: oben bleibt der Bereich frei, in dem das Pferd durchs
     Bild springt, so landet der Text nie auf dem Kopf. */
  justify-content: flex-end;
}

.hero__unten {
  display: flex;
  flex-direction: column;
}

.hero__title {
  max-width: 48rem;
  text-wrap: balance;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.35rem;
  line-height: 1.08;
  color: var(--c-paper);
  /* Knapper als vorher: der Verlauf traegt die Lesbarkeit jetzt selbst,
     der Schatten setzt nur noch die Kante ab. */
  text-shadow: 0 1px 10px rgb(0 0 0 / 32%);
}

.hero__lead {
  margin-top: 1.25rem;
  max-width: 36rem;
  text-wrap: balance;
  font-size: 0.95rem;
  line-height: 1.625;
  color: color-mix(in srgb, var(--c-paper) 95%, transparent);
  text-shadow: 0 1px 8px rgb(0 0 0 / 30%);
}

.hero__actions {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* --------------------------------------------------------------------------
   8b. Hero — Beleg-Leiste
   Die Zahlen stehen sonst nur auf /pferde/. Oben sind sie der Grund,
   ueberhaupt weiterzulesen. Bewusst ohne Hochzaehl-Animation.
   -------------------------------------------------------------------------- */
/* Auf dem Handy als laufende Zeile statt als Raster — vier gestapelte
   Kacheln haetten Headline und CTA unter die Falz gedrueckt. */
.hero__beleg {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--c-paper) 22%, transparent);
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1rem;
}
.hero__beleg div {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
}
.hero__beleg strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.2;
  /* Reines Clay-Light kommt bei 17px auf 4,38:1 und verfehlt AA knapp;
     leicht aufgehellt bleibt der warme Akzent und der Wert stimmt. */
  color: color-mix(in srgb, var(--c-clay-light) 75%, var(--c-paper));
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 8px rgb(0 0 0 / 30%);
}
.hero__beleg span {
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--c-paper) 85%, transparent);
  text-shadow: 0 1px 6px rgb(0 0 0 / 35%);
}

.hero__actions .btn {
  width: 100%;
}

/* --------------------------------------------------------------------------
   9b. CTA-Banner — links Text, rechts Button statt zentrierter Block
   -------------------------------------------------------------------------- */
.cta-banner {
  display: grid;
  gap: 1.5rem;
  align-items: start;
  text-align: left;
}
.cta-banner .headline {
  max-width: 30rem;
}
.cta-banner .prose {
  max-width: 26rem;
}
@media (min-width: 768px) {
  .cta-banner {
    grid-template-columns: 1.3fr auto;
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   9c. Stammbaum-Teaser — der Zuchtbaum ist das Eigenstaendigste der
   Website und war von der Startseite aus nur ueber den Footer erreichbar.
   -------------------------------------------------------------------------- */
.teaser {
  display: grid;
  gap: 2rem;
  border-top: 1px solid var(--c-border);
  padding-top: 2.5rem;
}
.teaser__belege {
  display: grid;
  gap: 1.125rem;
}
.teaser__belege li {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding-left: 1.5rem;
  position: relative;
}
/* Kleines Häkchen statt Emoji oder Icon-Kachel */
.teaser__belege li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--c-clay);
}
.teaser__belege strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--c-ink);
}
.teaser__belege span {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--c-bark) 75%, transparent);
}
.teaser__quelle {
  margin-top: 1.25rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--c-bark) 65%, transparent);
}
.teaser__links {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .teaser {
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   9. Split-Layouts (Bild + Text)
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  gap: 3rem;
}
.split--wide-text {
  gap: 3.5rem;
}

.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media--portrait {
  aspect-ratio: 4 / 5;
}
.media--portrait img {
  object-position: 50% 4%;
}
.media--landscape {
  aspect-ratio: 16 / 10;
}
.media--square {
  aspect-ratio: 1 / 1;
}
.media--card {
  aspect-ratio: 4 / 3;
}

/* Bild steht auf dem Handy unter dem Text, ab md wieder davor */
.split__media--flip {
  order: 2;
}

.section-head {
  margin-bottom: 3rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.section-head .headline {
  margin-top: 0.75rem;
}

/* --------------------------------------------------------------------------
   10. Pferde-Karten
   -------------------------------------------------------------------------- */
.pferde-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

.pferd-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--c-border);
  background-color: var(--c-paper);
  box-shadow: 0 1px 2px 0 rgb(36 26 16 / 5%);
  transition: box-shadow 0.3s ease;
}
.pferd-card:hover {
  box-shadow: 0 20px 25px -5px rgb(36 26 16 / 12%), 0 8px 10px -6px rgb(36 26 16 / 10%);
}
.pferd-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.pferd-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.pferd-card:hover .pferd-card__media img {
  transform: scale(1.05);
}
.pferd-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 1.5rem;
}
.pferd-card__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.pferd-card__arrow {
  margin-top: 0.25rem;
  flex-shrink: 0;
  color: var(--c-clay);
  opacity: 0;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}
.pferd-card:hover .pferd-card__arrow {
  opacity: 1;
  transform: translate(2px, -2px);
}
.pferd-card__jahrgang {
  margin-top: 0.125rem;
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--c-bark) 70%, transparent);
}
.pferd-card__text {
  margin-top: 1rem;
  flex: 1 1 auto;
  font-size: 0.875rem;
  line-height: 1.625;
  color: color-mix(in srgb, var(--c-bark) 80%, transparent);
}
.pferd-card__cta {
  margin-top: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c-leather);
  transition: color 0.2s ease;
}
.pferd-card:hover .pferd-card__cta {
  color: var(--c-clay);
}

.badge {
  display: inline-block;
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: var(--c-cream);
}
.badge--im-verkauf {
  background-color: var(--c-olive);
}
.badge--verkauft {
  background-color: color-mix(in srgb, var(--c-bark) 70%, transparent);
}
.badge--zuchtstute {
  background-color: var(--c-clay);
}
.badge--on-media {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 1;
}

/* Abstammungs-Liste */
.abstammung {
  margin-top: 1rem;
  display: grid;
  gap: 0.375rem;
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--c-bark) 90%, transparent);
}
.abstammung > div {
  display: flex;
  gap: 0.5rem;
}
.abstammung dt {
  flex-shrink: 0;
  font-weight: 500;
  color: color-mix(in srgb, var(--c-ink) 70%, transparent);
}
.abstammung--detail {
  margin-top: 1.5rem;
  gap: 0.5rem;
  border-top: 1px solid var(--c-border);
  padding-top: 1.5rem;
}
.abstammung--detail > div {
  gap: 0.75rem;
}
.abstammung--detail dt {
  width: 6rem;
}

/* Auszeichnungs-Hinweis */
.auszeichnung {
  margin-top: 1rem;
  border-radius: var(--radius-sm);
  background-color: var(--c-cream-soft);
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--c-leather);
}
.auszeichnung--detail {
  margin-top: 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}
.auszeichnung--detail svg {
  margin-top: 0.125rem;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   11. Pferde-Seite: Ansichts-Umschalter & Scroll-Ansicht
   -------------------------------------------------------------------------- */
.view-toggle-bar {
  max-width: var(--wrap);
  margin-inline: auto;
  margin-bottom: 2.5rem;
  padding-inline: var(--gutter);
  display: flex;
  justify-content: flex-end;
}
.view-toggle {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid var(--c-border);
  border-radius: 9999px;
  background-color: var(--c-paper);
  padding: 0.25rem;
}
.view-toggle button {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-bark);
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}
.view-toggle button:hover {
  color: var(--c-leather);
}
.view-toggle button[aria-pressed="true"] {
  background-color: var(--c-clay);
  color: var(--c-paper);
}

.scroll-view {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 5rem;
}
.scroll-item {
  display: grid;
  gap: 2.5rem;
}

.weitere-pferde {
  margin-top: 3.5rem;
  border-top: 1px solid var(--c-border);
  padding-top: 2.5rem;
}
.pferd-preview-row {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.pferd-preview {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 9999px;
  border: 1px solid var(--c-border);
  background-color: var(--c-paper);
  padding: 0.5rem 1.25rem 0.5rem 0.5rem;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.pferd-preview:hover {
  border-color: var(--c-clay);
  box-shadow: 0 4px 12px rgb(36 26 16 / 8%);
}
.pferd-preview__media {
  position: relative;
  overflow: hidden;
  border-radius: 9999px;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
}
.pferd-preview__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Kleine Ausschnitte: Kopf sitzt meist in der oberen Bildhaelfte */
  object-position: 50% 30%;
}
.pferd-preview__name {
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--c-ink);
}

.bild-gruppe {
  display: grid;
  gap: 0.75rem;
}
.bild-gruppe--multi {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bild-gruppe--multi .media--wide {
  grid-column: span 2;
  aspect-ratio: 16 / 10;
}

/* --------------------------------------------------------------------------
   12. Erfolge
   -------------------------------------------------------------------------- */
/* Chronik: Jahreszahl links, Ereignisse rechts an einer durchgehenden
   Zeitleiste. Die Daten kommen aus _data/erfolge.json (generate.mjs). */
.chronik {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Handy: Jahreszahl steht ueber ihren Eintraegen, die Leiste laeuft am
   linken Rand. Ab 640px rueckt die Jahreszahl in eine eigene Spalte. */
.chronik__jahr {
  --leiste-x: 0.3125rem;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 0.75rem;
  padding-left: 1.75rem;
  padding-bottom: 2.25rem;
}
/* Zeitleiste — endet beim letzten Jahr am Punkt */
.chronik__jahr::before {
  content: "";
  position: absolute;
  top: 0.75rem;
  bottom: -0.75rem;
  left: var(--leiste-x);
  width: 1px;
  background-color: var(--c-border);
}
.chronik__jahr:last-child {
  padding-bottom: 0;
}
.chronik__jahr:last-child::before {
  display: none;
}
/* Punkt auf der Leiste auf Hoehe der Jahreszahl */
.chronik__jahr::after {
  content: "";
  position: absolute;
  top: 0.5rem;
  left: calc(var(--leiste-x) - 0.3125rem);
  width: 0.6875rem;
  height: 0.6875rem;
  border-radius: 50%;
  background-color: var(--c-cream);
  border: 2px solid var(--c-clay);
}
.chronik__zahl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--c-clay);
  font-variant-numeric: tabular-nums;
}
.chronik__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.chronik__eintrag {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}
/* Feste Box, damit die Texte buendig stehen; das Foto darin ist
   unbeschnitten eingepasst (Hochformat schmaler, Querformat breiter). */
.chronik__bild {
  flex-shrink: 0;
  width: 5rem;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chronik__bild img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: var(--radius-sm);
  transition: opacity 0.2s ease;
}
.chronik__bild:hover img {
  opacity: 0.85;
}
.chronik__text {
  min-width: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--c-bark);
  overflow-wrap: break-word;
  text-wrap: pretty;
}
.chronik__pferd {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--c-ink);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--c-clay) 45%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.chronik__pferd:hover {
  color: var(--c-clay);
  text-decoration-color: currentColor;
}

@media (min-width: 640px) {
  .chronik__jahr {
    --jahr-breite: 4.25rem;
    --leiste-abstand: 1.5rem;
    --leiste-x: calc(var(--jahr-breite) + var(--leiste-abstand));
    grid-template-columns: var(--jahr-breite) minmax(0, 1fr);
    column-gap: calc(var(--leiste-abstand) * 2);
    padding-left: 0;
  }
  .chronik__zahl {
    text-align: right;
  }
}
@media (min-width: 768px) {
  .chronik__jahr {
    --jahr-breite: 5.5rem;
    --leiste-abstand: 1.75rem;
    padding-bottom: 3rem;
  }
  .chronik__jahr::after {
    top: 0.875rem;
  }
  .chronik__zahl {
    font-size: 2rem;
    line-height: 1.2;
  }
  .chronik__liste {
    gap: 1.25rem;
  }
  .chronik__bild {
    width: 7rem;
  }
  .chronik__text {
    font-size: 1.0625rem;
  }
}

.galerie {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.galerie__item {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-md);
}
.galerie__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.galerie__item:hover img {
  transform: scale(1.05);
}
.galerie__item--feature {
  grid-column: span 2;
  grid-row: span 2;
}

/* --------------------------------------------------------------------------
   13. Kontakt
   -------------------------------------------------------------------------- */
.kontakt-grid {
  margin-top: 3.5rem;
  display: grid;
  gap: 3rem;
}
.kontakt-liste {
  display: grid;
  gap: 1.5rem;
  align-content: start;
}
.kontakt-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.kontakt-item__icon {
  display: flex;
  height: 2.75rem;
  width: 2.75rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: var(--c-cream-soft);
  color: var(--c-clay);
}
.kontakt-item__label {
  font-weight: 500;
  color: var(--c-ink);
}
.kontakt-item__value {
  color: color-mix(in srgb, var(--c-bark) 80%, transparent);
  transition: color 0.2s ease;
}
a.kontakt-item__value:hover {
  color: var(--c-leather);
}

.form {
  display: grid;
  gap: 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--c-border);
  background-color: var(--c-paper);
  padding: 2rem;
}
.form__row {
  display: grid;
  gap: 1.25rem;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-ink);
}
.field input,
.field select,
.field textarea {
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-border);
  background-color: var(--c-cream);
  padding: 0.625rem 1rem;
  color: var(--c-bark);
  font-weight: 400;
  outline: none;
  transition: border-color 0.2s ease;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--c-clay);
}
.field textarea {
  resize: none;
}
.form__submit {
  justify-self: stretch;
}
.form__submit:hover {
  transform: scale(1.02);
}
.form__submit:disabled {
  opacity: 0.6;
  cursor: wait;
  transform: none;
}
/* Honeypot: fuer Menschen unsichtbar, ohne display:none (manche Bots
   ueberspringen ausgeblendete Felder gezielt). */
.form__falle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form__hinweis {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--c-bark) 75%, transparent);
}
.form__hinweis a {
  color: var(--c-leather);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.form__fehler {
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--c-clay) 45%, transparent);
  background-color: color-mix(in srgb, var(--c-clay) 8%, var(--c-paper));
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--c-leather-dark);
}

.form-danke {
  border-radius: var(--radius-lg);
  border: 1px solid var(--c-border);
  background-color: var(--c-paper);
  padding: 2rem;
  text-align: center;
}
.form-danke .prose {
  margin-top: 0.5rem;
}

/* --------------------------------------------------------------------------
   14. Detailseite Pferd
   -------------------------------------------------------------------------- */
.pferd-detail {
  margin-top: 2rem;
  display: grid;
  gap: 2.5rem;
}
.pferd-detail .headline {
  margin-top: 1rem;
}
.pferd-detail__jahrgang {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--c-bark) 70%, transparent);
}
.pferd-detail .prose {
  margin-top: 1.25rem;
}

.pill-row {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.pill {
  border-radius: 9999px;
  border: 1px solid var(--c-border);
  background-color: var(--c-paper);
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-bark);
  transition:
    border-color 0.2s ease,
    color 0.2s ease;
}
.pill:hover {
  border-color: var(--c-clay);
  color: var(--c-leather);
}

/* --------------------------------------------------------------------------
   15. Rechtstexte
   -------------------------------------------------------------------------- */
.legal {
  max-width: 48rem;
  margin-inline: auto;
  padding: 5rem var(--gutter);
}
.legal .prose {
  margin-top: 1.5rem;
}
/* Lange Rechtsbegriffe ("Datenschutzerklaerung") auf dem Handy an der
   Silbe trennen statt mitten im Wort per overflow-wrap */
.legal .headline {
  hyphens: auto;
}
/* ...und weil nicht jeder Browser deutsch trennen kann: die H1 so weit
   verkleinern, dass das laengste Wort bei 375px in eine Zeile passt */
.legal .headline--lg {
  font-size: clamp(1.5rem, 6.2vw, 1.875rem);
}
.legal .headline--md {
  margin-top: 3rem;
}
.legal .headline--sm {
  margin-top: 1.75rem;
}
.legal__stand {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--c-bark) 70%, transparent);
}
.legal address {
  margin-top: 1.25rem;
  font-style: normal;
  line-height: 1.625;
  color: color-mix(in srgb, var(--c-bark) 85%, transparent);
}
.legal ul {
  margin-top: 1rem;
  padding-left: 1.25rem;
  list-style: disc;
  line-height: 1.625;
  color: color-mix(in srgb, var(--c-bark) 85%, transparent);
}
.legal li + li {
  margin-top: 0.375rem;
}
.legal a {
  color: var(--c-leather);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
.legal a:hover {
  color: var(--c-clay);
}
.legal__hinweis {
  margin-top: 1.5rem;
  border-left: 3px solid var(--c-clay);
  padding: 0.75rem 1rem;
  background-color: var(--c-cream-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  line-height: 1.625;
  color: var(--c-bark);
}
.legal__sprache {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--c-bark) 70%, transparent);
}
/* Im deutschen Modus ist der Hinweis zur englischen Fassung ueberfluessig */
html[lang="de"] .legal__sprache {
  display: none;
}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid color-mix(in srgb, var(--c-clay) 40%, transparent);
  background-color: var(--c-ink);
  color: var(--c-cream-soft);
}
.site-footer__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 3.5rem var(--gutter);
}
/* Anrufen ist der eigentliche Kontaktweg: die Nummer steht gross und
   ist auf dem Handy direkt waehlbar. */
.site-footer__frage {
  max-width: 30em;
  font-size: 1.125rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--c-cream-soft) 75%, transparent);
}
.site-footer__tel {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 1rem + 6.5vw, 6.5rem);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--c-paper);
  white-space: nowrap;
  transition: color 0.2s ease;
}
.site-footer__tel:hover {
  color: var(--c-clay-light);
}
.site-footer__wege {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin-top: 1.5rem;
  font-size: 1.125rem;
}
.site-footer__wege a {
  color: var(--c-paper);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  overflow-wrap: anywhere;
  transition: color 0.2s ease;
}
.site-footer__wege a:hover {
  color: var(--c-clay-light);
}
.site-footer__wege span {
  color: color-mix(in srgb, var(--c-cream-soft) 75%, transparent);
}
.site-footer__nav {
  margin-top: 3.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.75rem;
  font-size: 0.9375rem;
}
/* Mindestens 48 px hohe Trefferflaeche fuer die Seitenlinks */
.site-footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: color-mix(in srgb, var(--c-cream-soft) 85%, transparent);
  transition: color 0.2s ease;
}
.site-footer__nav a:hover {
  color: var(--c-paper);
}
.site-footer__bottom {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-top: 1px solid color-mix(in srgb, var(--c-cream-soft) 10%, transparent);
  padding-top: 1.5rem;
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--c-cream-soft) 50%, transparent);
}
.site-footer__legal {
  display: flex;
  gap: 1.25rem;
}
.site-footer__legal a:hover {
  color: var(--c-cream-soft);
}

/* --------------------------------------------------------------------------
   17. Motion — Reveal, Split-Headline, Hero-Einblendung
   -------------------------------------------------------------------------- */
/* Die Ausgangszustaende haengen an html.js — ohne JavaScript ist der
   Inhalt sofort sichtbar statt dauerhaft ausgeblendet. */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-y, 24px));
  transition:
    opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: var(--reveal-delay, 0s);
}
html.js [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

html.js [data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(var(--reveal-y, 24px));
  transition:
    opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
html.js [data-reveal-stagger].is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* Kein margin-right als Wortabstand — zwischen den Spans steht ein echtes
   Leerzeichen (siehe initHeadline), sonst verliert die H1 ihre Wortgrenzen. */
.split-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(28px) rotateX(-30deg);
  transition:
    opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.split-headline.is-visible .split-word {
  opacity: 1;
  transform: none;
}

html.js .hero-fade {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
html.js .hero-fade.is-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   18. Breakpoints
   -------------------------------------------------------------------------- */

/* ≤ 479px — auf schmalen Handys (z. B. 360px) muss die Kopfzeile
   aus Marke und Menue-Button in eine Zeile passen. */
@media (max-width: 479px) {
  .site-header__inner {
    gap: 0.5rem;
  }
  .site-header__brand {
    gap: 0.5rem;
  }
}

/* ≤ 359px — kleinste noch verbreitete Geraetebreite */
@media (max-width: 359px) {
  .site-header__inner {
    gap: 0.375rem;
    padding-inline: 1rem;
  }
  .site-header__brand {
    gap: 0.375rem;
  }
}

/* ≥ 640px (sm) */
@media (min-width: 640px) {
  .brand__sub {
    display: inline;
  }

  .hero__img img {
    object-position: 50% 24%;
  }
  /* Der Text steht links, das Pferd rechts: eine zusaetzliche Abdunkelung
     nur nach links haelt die rechte Bildhaelfte klar. */
  /* Ab 640px steht der Text links, das Pferd fuellt die rechte Haelfte.
     Die Abdunkelung folgt deshalb der Textspalte statt der ganzen Flaeche:
     rechts oben bleibt das Foto weitgehend offen. Werte sind gegen die
     hellste Stelle unter jeder Textzeile gemessen, nicht geschaetzt. */
  .hero__scrim--grad {
    background-image:
      linear-gradient(
        to right,
        color-mix(in srgb, var(--c-ink) 55%, transparent) 0%,
        color-mix(in srgb, var(--c-ink) 55%, transparent) 55%,
        color-mix(in srgb, var(--c-ink) 20%, transparent) 76%,
        transparent 90%
      ),
      linear-gradient(
        to bottom,
        color-mix(in srgb, var(--c-ink) 30%, transparent) 0%,
        color-mix(in srgb, var(--c-ink) 35%, transparent) 30%,
        color-mix(in srgb, var(--c-ink) 55%, transparent) 50%,
        color-mix(in srgb, var(--c-ink) 68%, transparent) 76%,
        color-mix(in srgb, var(--c-ink) 72%, transparent) 100%
      );
  }
  .hero__inner {
    min-height: 86vh;
    padding-top: 10rem;
    padding-bottom: 6rem;
  }
  /* Ab Tablet ist Platz fuer das Raster mit grossen Zahlen. */
  .hero__beleg {
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem 2rem;
    max-width: 34rem;
  }
  .hero__beleg div {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
  }
  .hero__beleg strong {
    font-size: 1.75rem;
  }
  .hero__beleg span {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
  }
  .hero__title {
    font-size: 3rem;
    line-height: 1.1;
  }
  .hero__lead {
    margin-top: 1.5rem;
    font-size: 1.125rem;
  }
  .hero__actions {
    margin-top: 2.25rem;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
  }
  .hero__actions .btn {
    width: auto;
  }

  .headline--xl {
    font-size: 3rem;
    line-height: 1.1;
  }
  .headline--lg {
    font-size: 2.25rem;
  }

  .pferde-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .galerie {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ≥ 768px (md) */
@media (min-width: 768px) {
  .split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
  }
  .split--wide-text {
    grid-template-columns: 1fr 1.3fr;
  }
  .split--two-col {
    align-items: start;
  }

  .hero__title {
    font-size: 3.75rem;
  }

  .split__media--flip {
    order: -1;
  }

  .scroll-item {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 2.5rem;
  }
  .scroll-item--flip .bild-gruppe {
    order: 2;
  }

  .pferd-detail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
  }
}

/* ≥ 1024px (lg) */
@media (min-width: 1024px) {
  .nav-desktop {
    display: flex;
    gap: 1.125rem;
  }
  .nav-toggle {
    display: none;
  }
  .nav-mobile {
    display: none !important;
  }
  .pferde-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .galerie {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .kontakt-grid {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

/* --------------------------------------------------------------------------
   19. Reduzierte Bewegung
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal],
  [data-reveal-stagger] > *,
  .split-word,
  .hero-fade {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   20. Lightbox — anklickbare, vergrößerbare Bilder
   -------------------------------------------------------------------------- */
[data-lightbox] {
  cursor: zoom-in;
}
[data-lightbox]:focus-visible {
  outline: 2px solid var(--c-clay);
  outline-offset: 2px;
}

.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background-color: rgba(23, 19, 15, 0.94);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}
.lightbox-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.lightbox-overlay__img {
  max-width: min(94vw, 1500px);
  max-height: 90vh;
  width: auto;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 45%);
  transform: scale(0.96);
  transition: transform 0.3s ease;
  cursor: zoom-in;
}
.lightbox-overlay.is-open .lightbox-overlay__img {
  transform: scale(1);
}
.lightbox-overlay.is-zoomed .lightbox-overlay__img {
  cursor: grab;
}
.lightbox-overlay.is-zoomed .lightbox-overlay__img:active {
  cursor: grabbing;
}
.lightbox-overlay__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  display: flex;
  height: 2.75rem;
  width: 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.1);
  color: #faf6ee;
  transition: background-color 0.2s ease;
}
.lightbox-overlay__close:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.lightbox-overlay__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  height: 3rem;
  width: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.1);
  color: #faf6ee;
  transition: background-color 0.2s ease;
}
.lightbox-overlay__nav:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.lightbox-overlay__nav--prev {
  left: 1rem;
}
.lightbox-overlay__nav--next {
  right: 1rem;
}
@media (max-width: 640px) {
  .lightbox-overlay__nav {
    height: 2.5rem;
    width: 2.5rem;
  }
  .lightbox-overlay__nav--prev {
    left: 0.5rem;
  }
  .lightbox-overlay__nav--next {
    right: 0.5rem;
  }
}

/* --------------------------------------------------------------------------
   21. Stammbaum — Zuchtlinien, Abstammungstafel, Pferdeseiten
   Alle Farben kommen aus den Tokens, damit die vier Design-Richtungen
   des Theme-Switchers unverändert funktionieren.
   -------------------------------------------------------------------------- */

/* Brotkrumen ------------------------------------------------------------- */
.brotkrumen {
  background-color: var(--c-cream-soft);
  border-bottom: 1px solid var(--c-border);
  font-size: 0.8125rem;
  padding-block: 0.875rem;
}
.brotkrumen .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  color: color-mix(in srgb, var(--c-bark) 80%, transparent);
}
.brotkrumen a {
  color: var(--c-leather);
  text-decoration: none;
}
.brotkrumen a:hover {
  text-decoration: underline;
}
.brotkrumen [aria-current="page"] {
  color: var(--c-ink);
  font-weight: 500;
}

/* Kennzahlen-Reihe ------------------------------------------------------- */
.kennzahlen {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1.5rem;
}
.kennzahlen div {
  border-top: 1px solid color-mix(in srgb, var(--c-cream) 25%, transparent);
  padding-top: 0.875rem;
}
.kennzahlen strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.875rem;
  line-height: 1.1;
  color: var(--c-clay-light);
  font-variant-numeric: tabular-nums;
}
.kennzahlen span {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--c-cream-soft) 75%, transparent);
}

/* Linien-Schnellnavigation ---------------------------------------------- */
.linien-nav {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.linien-nav__karte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  padding: 1.25rem 0.75rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background-color: var(--c-paper);
  text-align: center;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.linien-nav__karte:hover {
  border-color: var(--c-clay);
  transform: translateY(-2px);
}
.linien-nav__bild img {
  height: 4.5rem;
  width: 4.5rem;
  border-radius: 9999px;
  object-fit: cover;
  /* Kleine Ausschnitte: Kopf sitzt meist in der oberen Bildhaelfte */
  object-position: 50% 30%;
  display: block;
}
.linien-nav__name {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--c-ink);
}
.linien-nav__meta {
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--c-bark) 75%, transparent);
}

/* Linien-Block ----------------------------------------------------------- */
.linie {
  scroll-margin-top: calc(var(--header-h, 4.5rem) + 1rem);
}
.linie__kopf {
  display: grid;
  gap: 1.75rem;
  align-items: start;
}
.linie__bild img {
  width: 100%;
  border-radius: var(--radius-lg);
  object-fit: cover;
  aspect-ratio: 4 / 3;
  display: block;
}
.linie__zahlen {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--c-bark) 80%, transparent);
}
.linie__zahlen strong {
  color: var(--c-ink);
  font-family: var(--font-display);
}
.linie__cta {
  margin-top: 1.5rem;
}
/* Betreuungshinweis im Footer — steht bewusst neben den Rechtstexten,
   nicht als eigene Zeile, damit er nicht mit dem Copyright konkurriert. */
.site-footer__betreuung {
  color: color-mix(in srgb, var(--c-cream) 55%, transparent);
}
.site-footer__betreuung a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color 0.2s ease;
}
.site-footer__betreuung a:hover {
  color: var(--c-clay-light);
}

.linie__baum {
  margin-top: 3rem;
  border-top: 1px solid var(--c-border);
  padding-top: 2rem;
}

/* Generationenbaum der eigenen Nachzucht: verschachtelte Liste mit
   Verbindungslinien — jede Einrückung ist eine Generation, ein Klick
   führt zum vollständigen Stammbaum des jeweiligen Pferdes. */
.lb,
.lb__liste {
  list-style: none;
}
.lb--wurzel {
  display: flex;
  flex-direction: column;
}
.lb__liste {
  margin-top: 0.5rem;
  padding-left: 1.75rem;
}
.lb__ast {
  position: relative;
  margin-top: 0.5rem;
}
.lb__ast:first-child {
  margin-top: 0;
}
/* Durchgezogene Linie zum naechsten Geschwister — faellt nur beim
   jeweils letzten Kind einer Gruppe weg, dort endet der Ast. Haengt
   pro Element an dessen eigener Box (inkl. einer moeglichen eigenen
   Unterliste), reicht also unabhaengig davon, wie viele weitere
   Generationen darunter folgen, exakt bis zum naechsten Geschwister. */
.lb__liste > .lb__ast:not(:last-child)::before {
  content: "";
  position: absolute;
  left: -1.75rem;
  top: -0.375rem;
  bottom: -0.5rem;
  width: 3px;
  background-color: var(--c-clay);
}
/* Abzweigung von der Mutter zum jeweiligen Nachkommen */
.lb__liste > .lb__ast::after {
  content: "";
  position: absolute;
  left: -1.75rem;
  top: -0.375rem;
  width: 1.75rem;
  height: 2.75rem;
  border-left: 3px solid var(--c-clay);
  border-bottom: 3px solid var(--c-clay);
  border-bottom-left-radius: 16px;
}
.lb__pferd {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.5rem 0.75rem 0.5rem 0.5rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.lb__pferd:hover {
  background-color: var(--c-sand);
}
.lb__pferd--stamm {
  font-weight: 600;
}
.lb__bild {
  flex-shrink: 0;
  display: flex;
  overflow: hidden;
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--c-sand);
}
.lb__bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Kleine Ausschnitte: Kopf sitzt meist in der oberen Bildhaelfte */
  object-position: 50% 30%;
}
.lb__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.lb__name {
  font-weight: 500;
  color: var(--c-ink);
}
.lb__meta {
  display: block;
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--c-bark) 75%, transparent);
}

/* Badges für den Stammbaum-Bereich -------------------------------------- */

.badge--neutral {
  background-color: color-mix(in srgb, var(--c-bark) 55%, transparent);
}
.badge--offen {
  background-color: transparent;
  border: 1px solid var(--c-border);
  color: color-mix(in srgb, var(--c-bark) 80%, transparent);
}

/* Kopf der Pferdeseite --------------------------------------------------- */
/* Der Jahrgang stand bisher nur unten im Steckbrief. Er gehoert direkt
   unter den Namen — danach wird als Erstes gefragt. */
.pferd-kopf__jahr {
  margin-top: 0.375rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.2;
  color: var(--c-clay);
  font-variant-numeric: tabular-nums;
}
.pferd-kopf__zuchtname {
  margin-top: 0.5rem;
  font-size: 1rem;
  color: color-mix(in srgb, var(--c-bark) 85%, transparent);
}
.pferd-kopf__badges {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.pferd-kopf__abst {
  margin-top: 1.25rem;
}
.hinweis {
  margin-top: 1.25rem;
  border: 1px solid var(--c-border);
  background-color: var(--c-cream-soft);
  padding: 0.875rem 1.125rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--c-bark) 90%, transparent);
}
.hinweis strong {
  color: var(--c-ink);
}

/* Werdegang (Kurzinfo vom Kunden) — auf dem Handy unter den Kopfdaten,
   ab 1024px rechts daneben, unten buendig mit der Abstammungszeile. */
.werdegang {
  margin-top: 2rem;
  max-width: 36rem;
  padding: 1.25rem 1.375rem 1.375rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background-color: var(--c-paper);
}
.werdegang__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-clay);
}
.werdegang__label svg {
  flex-shrink: 0;
}
.werdegang__text {
  margin-top: 0.625rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.45;
  color: var(--c-ink);
  overflow-wrap: break-word;
  text-wrap: pretty;
}
@media (min-width: 1024px) {
  .pferd-kopf__raster {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    column-gap: 4rem;
    align-items: end;
  }
  .werdegang {
    margin-top: 0;
    padding: 1.5rem 1.75rem 1.75rem;
  }
  .werdegang__text {
    font-size: 1.1875rem;
    line-height: 1.5;
  }
}

/* Fotogalerie eines Pferdes --------------------------------------------- */
/* Fotos im eigenen Seitenverhaeltnis, nichts wird beschnitten: Jedes Bild
   waechst proportional zu seinem Verhaeltnis (--r = Breite/Hoehe, vom
   Generator gesetzt), dadurch sind die Bilder einer Reihe gleich hoch.
   max-width begrenzt die Hoehe, falls ein Bild allein in einer Reihe steht. */
.pferd-galerie {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
.pferd-galerie__bild {
  margin: 0;
  flex: var(--r, 1.333) 1 calc(var(--r, 1.333) * 13rem);
  max-width: calc(var(--r, 1.333) * 30rem);
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--c-sand);
}
.pferd-galerie__bild img {
  display: block;
  width: 100%;
  height: auto;
  cursor: zoom-in;
  transition: transform 0.4s ease;
}
.pferd-galerie__bild:hover img {
  transform: scale(1.03);
}

/* Abstammungstafel — klassische Zuchtbuch-Optik ------------------------- */
.ped-figur {
  margin: 2rem 0 0;
}
.ped-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background-color: var(--c-paper);
}
.ped-scroll:focus-visible {
  outline: 2px solid var(--c-clay);
  outline-offset: 2px;
}
.ped {
  border-collapse: collapse;
  width: 100%;
  min-width: 46rem;
  font-size: 0.8125rem;
  table-layout: fixed;
}
.ped__caption {
  caption-side: top;
  text-align: left;
  padding: 0.875rem 1rem 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--c-ink);
}
.ped thead th {
  padding: 0.75rem 0.875rem 0.5rem;
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-clay);
  border-bottom: 1px solid var(--c-border);
}
.ped__cell {
  border: 1px solid var(--c-border);
  padding: 0.5rem 0.75rem;
  vertical-align: middle;
}
.ped__cell--g1 {
  background-color: color-mix(in srgb, var(--c-clay) 7%, transparent);
}
.ped__cell--g2 {
  background-color: color-mix(in srgb, var(--c-clay) 4%, transparent);
}
.ped__cell--leer {
  background-color: color-mix(in srgb, var(--c-sand) 55%, transparent);
}
.ped__name {
  display: block;
  font-weight: 500;
  line-height: 1.35;
  color: var(--c-ink);
}
.ped__name--stark {
  font-weight: 700;
}
.ped__meta {
  display: block;
  margin-top: 0.1875rem;
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--c-bark) 70%, transparent);
}
.ped__eigen {
  margin-left: 0.3125rem;
  color: var(--c-clay);
}
.ped__fuss {
  margin-top: 0.875rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--c-bark) 75%, transparent);
}

/* Variante: Abstammung als Linienbaum ----------------------------------- */
.variante {
  margin-top: 4rem;
  border-top: 1px solid var(--c-border);
  padding-top: 2.5rem;
}
.variante__kopf {
  max-width: 44rem;
}
.baum,
.baum__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.baum {
  margin-top: 2rem;
}
.baum__liste {
  margin-left: 0.75rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--c-border);
}
.baum__liste--wurzel {
  margin-top: 0.5rem;
}
.baum__ast {
  position: relative;
  padding-top: 0.5rem;
}
.baum__ast::before {
  content: "";
  position: absolute;
  left: -1.25rem;
  top: 1.75rem;
  width: 1rem;
  height: 1px;
  background-color: var(--c-border);
}
/* Vater- und Mutterseite werden über die Verbindungslinie und das
   Rollen-Label unterschieden, nicht über einen Balken an der Karte. */
.baum__ast--v > .baum__knoten .baum__rolle {
  color: var(--c-olive);
}
.baum__ast--m > .baum__knoten .baum__rolle {
  color: var(--c-clay);
}
.baum__ast--v::before {
  background-color: color-mix(in srgb, var(--c-olive) 70%, transparent);
}
.baum__ast--m::before {
  background-color: color-mix(in srgb, var(--c-clay) 70%, transparent);
}
.baum__wurzel,
.baum__knoten {
  display: block;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-sm);
  background-color: var(--c-paper);
  border: 1px solid var(--c-border);
}
.baum__wurzel {
  border-color: color-mix(in srgb, var(--c-ink) 45%, transparent);
}
.baum__knoten--stark {
  background-color: color-mix(in srgb, var(--c-clay) 8%, transparent);
}
.baum__rolle {
  display: block;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-clay);
}
.baum__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.3;
  color: var(--c-ink);
}
.baum__meta {
  display: block;
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--c-bark) 70%, transparent);
}

/* Steckbrief, Noten, Schauen, Verwandtschaft ---------------------------- */
.pferd-daten {
  display: grid;
  gap: 3rem;
  align-items: start;
}
.steckbrief {
  margin-top: 1.5rem;
  display: grid;
  gap: 0;
  font-size: 0.875rem;
}
.steckbrief > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.125rem;
  border-bottom: 1px solid var(--c-border);
  padding-block: 0.75rem;
}
.steckbrief dt {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* Clay erreicht auf dem dunkleren Soft-Hintergrund nur 4,27:1 —
     Leather hält die 4,5:1 für kleinen Text sicher ein. */
  color: var(--c-leather);
}
.steckbrief dd {
  margin: 0;
  line-height: 1.55;
  color: color-mix(in srgb, var(--c-bark) 95%, transparent);
}

.verwandt,
.bewertung,
.schauen {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background-color: var(--c-paper);
  padding: 1.5rem;
}
.verwandt + .bewertung,
.verwandt + .schauen,
.bewertung + .schauen {
  margin-top: 1.5rem;
}
.verwandt__zeile {
  margin-top: 0.875rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--c-bark) 90%, transparent);
}
.verwandt__zeile > span {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-clay);
}
.verwandt__zeile a {
  color: var(--c-leather);
}

.bewertung__kopf {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--c-bark) 85%, transparent);
}
.bewertung__kopf strong {
  color: var(--c-ink);
}
.noten {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.375rem;
  font-size: 0.8125rem;
}
.noten li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px dotted var(--c-border);
  padding-bottom: 0.3125rem;
}
.noten__k {
  color: color-mix(in srgb, var(--c-bark) 85%, transparent);
}
.noten__v {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--c-ink);
}
.noten__v[data-wert^="8"],
.noten__v[data-wert^="9"] {
  color: var(--c-olive);
}

.schauen__liste {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.875rem;
  font-size: 0.8125rem;
}
.schauen__liste li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0.125rem 0.75rem;
  border-left: 2px solid var(--c-clay-light);
  padding-left: 0.875rem;
}
.schauen__jahr {
  grid-row: span 3;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--c-ink);
}
.schauen__typ {
  font-weight: 500;
  color: var(--c-ink);
}
.schauen__ort,
.schauen__platz {
  color: color-mix(in srgb, var(--c-bark) 80%, transparent);
}

.cta-reihe {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Breakpoints ------------------------------------------------------------ */
@media (min-width: 640px) {
  /* Drei Kennzahlen seit dem Wegfall von "Generationen" und
     "aeltester Jahrgang" — vier Spalten liessen eine leer. */
  .kennzahlen {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .linien-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .steckbrief > div {
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: 1rem;
    align-items: baseline;
  }
}

@media (min-width: 768px) {
  .linie__kopf {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 2.5rem;
  }
  .baum__liste {
    margin-left: 1.25rem;
    padding-left: 1.75rem;
  }
  .baum__ast::before {
    left: -1.75rem;
    width: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .linien-nav {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .pferd-daten {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
  .ped {
    font-size: 0.875rem;
  }
}

/* Ab 1280px wieder luftigere Navigation */
@media (min-width: 1280px) {
  .nav-desktop {
    gap: 2rem;
  }
}

/* Lesbare Zeilenlänge im Stammbaum-Bereich: ohne Begrenzung laufen die
   Absätze auf großen Bildschirmen auf über 100 Zeichen. */
.seite-pferde .prose {
  max-width: 64ch;
}
.seite-pferde .linie__zahlen,
.seite-pferde .ped__fuss {
  max-width: 72ch;
}