:root {
  --forest: #23392d;
  --forest-2: #314d3c;
  --olive: #67724a;
  --moss: #8a9167;
  --chocolate: #4b2e22;
  --gold: #b2733d;
  --gold-deep: #8a5423;
  --gold-light: #f0d9b6;
  --wine: #7a2f3a;
  --sand: #d9c7a8;
  --cream: #f7f2e9;
  --paper: #fffaf2;
  --ink: #243027;
  --muted: #667064;
  --line: rgba(36, 48, 39, 0.14);
  --shadow: 0 18px 50px rgba(43, 40, 29, 0.14);
  --radius: 8px;
  --content: 1180px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.65;
}

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

figure {
  margin: 0;
}

a {
  color: inherit;
}

a:hover {
  color: var(--gold);
}

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  padding: 10px 14px;
  color: var(--paper);
  background: var(--forest);
  transform: translateY(-150%);
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 242, 233, 0.95);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}

/* Offset fuer Anker-Sprungziele, damit der sticky Header Inhalte nicht ueberdeckt (8-Anker-Navigation).
   Zwei unterschiedliche Werte, weil die Sektionen strukturell verschieden sind:
   - .hero (Start): Bild fuellt die Sektion randlos aus (kein eigenes Leerraum-Padding oben) -
     braucht deshalb fast die volle Headerhoehe als Puffer, sonst wird das Bild vom Header verdeckt.
   - .section (alle anderen 7 Anker): hat bereits 88px (bzw. 68px ab 820px) eigenes, leeres
     Top-Padding. Dieses leere Padding zaehlt selbst schon als Puffer - ein zusaetzlicher grosser
     scroll-margin-top fuehrte hier bisher zu einer unnoetig grossen Luecke zwischen Header und
     Ueberschrift, wodurch beim Ankersprung zu wenig Platz fuer den Rest des Abschnitts (z.B. hohe
     Bilder) blieb und diese am unteren Rand abgeschnitten wirkten. */
.hero[id] {
  scroll-margin-top: 165px;
}

.section[id] {
  scroll-margin-top: 70px;
}

@media (max-width: 820px) {
  .section[id] {
    scroll-margin-top: 90px;
  }
}

@media (max-width: 620px) {
  .hero[id] {
    scroll-margin-top: 100px;
  }

  .section[id] {
    scroll-margin-top: 44px;
  }
}

.info-bar {
  background: var(--forest);
  color: rgba(255, 250, 242, 0.92);
}

.info-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  min-height: 40px;
  gap: 6px 24px;
  padding: 9px 0;
  font-size: 0.82rem;
  font-weight: 700;
}

.info-bar-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.info-bar a {
  color: inherit;
  text-decoration: none;
}

.info-bar a:hover {
  color: var(--gold-light);
}

.nav-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(var(--content), calc(100% - 32px));
  min-height: 149px;
  margin: 0 auto;
  gap: 22px;
}

.brand-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 26px;
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brand-tagline {
  display: block;
  margin: 0;
  padding-left: 26px;
  border-left: 1px solid var(--line);
  color: var(--ink);
  /* Bewusst kleiner/schmaler als zuvor (war 1.3rem/260px): schafft
     zusaetzlichen Platz, damit die Nav-Links sicher in einer Zeile
     bleiben, statt bei knappen Breiten doch wieder umzubrechen. */
  font-size: 0.95rem;
  font-weight: 620;
  line-height: 1.25;
  max-width: 180px;
}

.brand-badges {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-left: 18px;
  border-left: 1px solid var(--line);
}

.brand-badges img {
  display: block;
  height: 32px;
  width: auto;
}

@media (max-width: 1460px) {
  .brand-tagline {
    display: none;
  }
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--paper);
  background: var(--forest);
  border-radius: 50%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  line-height: 1;
}

.brand-logo {
  display: block;
  height: 116px;
  width: auto;
  transition: transform 0.25s ease;
}

.brand:hover .brand-logo,
.brand:focus-visible .brand-logo {
  transform: scale(1.1);
}

.brand-title {
  display: block;
  color: var(--forest);
  font-weight: 760;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.brand-subtitle {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.2;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--forest);
  cursor: pointer;
}

.nav-toggle span,
.nav-toggle::before,
.nav-toggle::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  margin: 5px auto;
  background: currentColor;
  border-radius: 4px;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px 2px;
}

/* Auf Wunsch der Kundin wieder EINE Zeile statt zwei: der erzwungene
   Zeilenumbruch nach "Ueber mich" ist deaktiviert (das Element bleibt im
   Markup aller Seiten erhalten, traegt aber ohne Breite/Umbruch nichts mehr
   zum Layout bei). Damit alle 8 Links dennoch nebeneinander in die
   verfuegbare Breite passen, ist die Schrift entsprechend kleiner (siehe
   .site-nav a). */
.nav-break {
  display: none;
}

.site-nav a {
  padding: 7px 8px;
  border-radius: var(--radius);
  color: var(--forest);
  font-size: 1rem;
  font-weight: 680;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  background: rgba(103, 114, 74, 0.13);
  color: var(--forest);
}

.hero {
  position: relative;
  min-height: calc(100vh - 150px);
  color: var(--paper);
  background: var(--paper);
  overflow: hidden;
}

.hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  opacity: 0.7;
  /* Zoom-Ursprung auf Hund/Ente (linkes Bilddrittel) – der Ken-Burns-Effekt
     zieht so sanft auf das Motiv, waehrend object-fit:cover garantiert, dass
     bei jeder Skalierung >=1 nie eine Kante Luecken zeigt. */
  transform-origin: 10% 32%;
  animation: heroKenBurns 16s ease-in-out infinite;
  will-change: transform;
}

@keyframes heroKenBurns {
  0% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(1.28);
  }
  100% {
    transform: scale(1.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero img {
    animation: none;
  }

  .media img,
  .duo-panel img,
  .brand-logo,
  .step {
    transition: none;
  }
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(255, 250, 242, 0.4), transparent 42%);
}

/* Startseite (#start): Bild in Originalfarben statt aufgehellt/blass, und ohne
   Ken-Burns-Zoom (Bild soll sich nicht bewegen) - beides nur fuer die
   Startseite, die Zuchtseite (.hero ohne id) behaelt Transparenz + Animation. */
#start img {
  opacity: 1;
  animation: none;
  transform: none;
}

#start::after {
  display: none;
}

/* Zuchtseite-Hero: auf Wunsch dieselbe Behandlung wie die Startseite -
   Bild in Originalfarben statt aufgehellt/blass und ohne Ken-Burns-Zoom,
   damit der Hund klar und unbewegt zu sehen ist. Seit dem Wechsel auf ein
   echtes Querformat-Foto (statt des vorherigen Hochformat-Ganzkoerperbilds)
   funktioniert normales object-fit:cover wieder einwandfrei - der Hund
   steht bereits im linken Bilddrittel, der rechte, ruhige Wiesenbereich
   bietet von Haus aus Platz fuer das Textfeld. */
#zucht-hero img {
  opacity: 1;
  animation: none;
  transform: none;
}

#zucht-hero::after {
  display: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: start;
  width: min(var(--content), calc(100% - 32px));
  min-height: calc(100vh - 150px);
  /* Gleiche Breite/Zentrierung wie .wrap und .nav-shell (margin:0 auto) -
     die rechte Kante des Textcontainers liegt dadurch exakt auf der
     rechten Kante der Header-Navigation und der Bilder in den Abschnitten
     darunter, statt wie zuvor nur mit kleinem Abstand zur echten
     Bildschirmkante zu schweben. */
  margin: 0 auto;
  padding: 28px 0 40px;
}

.hero-panel {
  /* Maximalbreite bewusst auf 640px begrenzt (statt zuvor 720px): das
     Panel haengt jetzt an der Bildschirm-Kante wie die Nav-Texte, ragt
     dadurch bei sehr breiten Screens weiter nach links - 640px haelt bei
     allen relevanten Breiten (Nav ab 1461px sichtbar) sicheren Abstand zu
     Hund/Fuchs im linken Bilddrittel beider Hero-Fotos. */
  max-width: clamp(340px, 40vw, 640px);
  /* min-width:0 ist noetig, weil .hero-panel ein Grid-Kind von
     .hero-content ist: Grid-/Flex-Kinder haben per Default min-width:auto
     und weichen langen, unteilbaren Woertern (z.B. "Jagdhundeausbildung")
     nicht aus - der Kasten wuerde dadurch breiter werden als sein
     Container und ueber den Bildschirmrand hinausragen, statt den Text
     normal umzubrechen. Mit min-width:0 darf der Kasten wieder auf die
     tatsaechlich verfuegbare Breite schrumpfen. */
  min-width: 0;
  margin-left: auto;
  padding: clamp(22px, 3vw, 40px);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  background: rgba(20, 28, 22, 0.55);
  backdrop-filter: blur(8px);
}

/* Startseite: Panel enthaelt nur noch die Ueberschrift (Zusatzzeile entfernt) -
   mehr Luft ueber/unter dem Text und mehr Zeilenabstand innerhalb der
   Ueberschrift, damit das Panel nicht zu knapp/eng wirkt. */
#start .hero-panel {
  padding-top: clamp(40px, 6vw, 72px);
  padding-bottom: clamp(40px, 6vw, 72px);
}

#start .hero-panel h1 {
  line-height: 1.35;
}

.eyebrow {
  margin: 0 0 16px;
  color: var(--gold-light);
  font-size: 0.83rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-panel .section-kicker {
  display: block;
  margin: 0 0 12px;
  color: var(--gold-light);
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--forest);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: 1.08;
  overflow-wrap: break-word;
  /* Kein Silben-Umbruch mit Bindestrich mehr: bei langen deutschen
     Komposita (z.B. "Jagdhundeausbildung") wirkte ein Bindestrich-Umbruch
     mitten im Wort abgeschnitten/unprofessionell. overflow-wrap:break-word
     bleibt als reines Sicherheitsnetz gegen seitliches Ueberlaufen aktiv,
     bricht dann aber ohne Bindestrich am Wortende um. */
  hyphens: none;
}

.hero h1 {
  max-width: 760px;
  color: var(--paper);
  font-size: clamp(2.5rem, 8vw, 5.45rem);
}

.hero-panel h1 {
  max-width: none;
  font-size: clamp(1.9rem, 2.7vw, 3.05rem);
  /* Woerter wie "liebevolle" sollen nicht per Wörterbuch-Trennung mitten im
     Wort mit Bindestrich getrennt werden. overflow-wrap bleibt aber auf
     break-word (geerbt), damit ein zu langes Wort im Notfall ohne
     Bindestrich umbricht statt ueber den Rand hinauszulaufen. */
  hyphens: none;
}

.hero-lead {
  max-width: 680px;
  margin: 16px 0 0;
  color: rgba(255, 250, 242, 0.92);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 22px;
}

.hero-actions .button {
  flex: 1 1 0;
  text-align: center;
}

.section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* Fuer Ankuendigungstexte ohne aktiven Link (z.B. "Bald mehr erfahren"),
   bewusst nicht als Button dargestellt, damit kein toter Link entsteht.
   Gestrichelter Rahmen statt Vollton signalisiert "in Vorbereitung", die
   Pillenform gibt dem Text genug eigenes Gewicht, statt lose/trostlos
   unter der Liste zu stehen. */
.coming-soon-note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin-top: 3cm;
  padding: 12px 22px;
  border: 1px dashed var(--gold);
  border-radius: 999px;
  color: var(--gold-deep);
  font-weight: 700;
  font-style: italic;
  font-size: 1rem;
}

/* Hoehere Spezifitaet noetig: ".copy p { margin: 0 0 18px; }" (siehe unten)
   ist spezifischer als ".coming-soon-note" allein und ueberschreibt sonst
   jeden margin-top-Wert dort, egal welchen Wert man einsetzt. */
.copy .coming-soon-note {
  margin-top: 3cm;
}

.coming-soon-note::before {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: 780;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.button.primary {
  color: var(--forest);
  background: var(--paper);
}

.button.primary:hover {
  color: var(--forest);
  background: var(--gold-light);
}

.button.secondary {
  color: var(--paper);
  border-color: rgba(255, 250, 242, 0.58);
  background: rgba(255, 250, 242, 0.08);
}

.button.secondary:hover {
  color: var(--paper);
  border-color: var(--paper);
  background: rgba(255, 250, 242, 0.2);
}

.button.dark {
  color: var(--paper);
  background: var(--forest);
}

.button.dark:hover {
  color: var(--paper);
  background: var(--forest-2);
}

.button.outline {
  color: var(--forest);
  border-color: var(--forest);
  background: transparent;
}

.button.outline:hover {
  color: var(--paper);
  background: var(--forest);
}

.section-actions.center {
  justify-content: center;
}

.cta-band {
  text-align: center;
}

.hero-note {
  position: absolute;
  right: max(16px, calc((100vw - var(--content)) / 2));
  bottom: 28px;
  z-index: 2;
  max-width: 330px;
  padding: 16px 18px;
  border-left: 3px solid var(--gold);
  color: rgba(255, 250, 242, 0.88);
  background: rgba(26, 34, 26, 0.58);
}

.duo-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 62vh;
}

.duo-panel {
  position: relative;
  display: block;
  overflow: hidden;
  color: var(--paper);
  text-decoration: none;
}

.duo-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.duo-panel:hover img,
.duo-panel:focus-visible img {
  transform: scale(1.05);
}

.duo-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(20, 28, 22, 0.75), rgba(20, 28, 22, 0.06) 55%);
}

.duo-label {
  position: absolute;
  right: 28px;
  bottom: 28px;
  left: 28px;
  z-index: 1;
  display: grid;
  gap: 12px;
}

.duo-title {
  color: var(--paper);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.duo-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 10px 16px;
  border: 1px solid rgba(255, 250, 242, 0.55);
  border-radius: var(--radius);
  background: rgba(255, 250, 242, 0.12);
  font-size: 0.82rem;
  font-weight: 780;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.duo-panel:hover .duo-cta,
.duo-panel:focus-visible .duo-cta {
  color: var(--forest);
  background: var(--paper);
}

.trio-hero {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  min-height: calc(100vh - 156px);
}

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

.showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  width: min(var(--content), calc(100% - 32px));
  margin: 0 auto;
}

.showcase-tile {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--paper);
  text-decoration: none;
}

.showcase-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.showcase-tile:hover img,
.showcase-tile:focus-visible img {
  transform: scale(1.05);
}

.showcase-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(20, 28, 22, 0.85), rgba(20, 28, 22, 0.08) 58%);
}

.showcase-overlay {
  position: absolute;
  right: 24px;
  bottom: 24px;
  left: 24px;
  z-index: 1;
  display: grid;
  gap: 12px;
}

.showcase-title-text {
  display: block;
  color: var(--paper);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 700;
  line-height: 1.15;
}

.showcase-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  padding: 9px 15px;
  border: 1px solid rgba(255, 250, 242, 0.55);
  border-radius: var(--radius);
  background: rgba(255, 250, 242, 0.12);
  font-size: 0.78rem;
  font-weight: 780;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.showcase-cta svg {
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.showcase-tile:hover .showcase-cta,
.showcase-tile:focus-visible .showcase-cta {
  color: var(--forest);
  background: var(--paper);
}

.showcase-tile:hover .showcase-cta svg,
.showcase-tile:focus-visible .showcase-cta svg {
  transform: translateX(3px);
}

.topic-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.topic-tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--paper);
  text-decoration: none;
}

.topic-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.topic-tile:hover img,
.topic-tile:focus-visible img {
  transform: scale(1.06);
}

.topic-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(20, 28, 22, 0.8), transparent 58%);
}

.topic-label {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  z-index: 1;
  font-size: 1.02rem;
  font-weight: 780;
}

.section {
  padding: 88px 0;
}

.section.alt {
  background: var(--paper);
}

.section.deep {
  color: var(--paper);
  background: var(--forest);
}

.section.deep h2,
.section.deep h3 {
  color: var(--paper);
}

.wrap {
  width: min(var(--content), calc(100% - 32px));
  margin: 0 auto;
}

.section-head {
  display: grid;
  gap: 16px;
  max-width: 780px;
  margin-bottom: 42px;
}

.section-head.center {
  max-width: 850px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.section-kicker {
  color: var(--gold-deep);
  font-size: 0.82rem;
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section.deep .section-kicker {
  color: var(--gold-light);
}

.section h2,
.page-hero h1 {
  font-size: clamp(2rem, 4.4vw, 3.65rem);
}

/* "Moderne Jagdhundeausbildung" ist die mit Abstand laengste Abschnitts-
   ueberschrift der Seite - bei der allgemeinen Groesse ragt das lange
   Kompositum "Jagdhundeausbildung" auf breiten Bildschirmen in die
   Bildspalte hinein. Nur hier kleiner skaliert, andere (kuerzere)
   Ueberschriften bleiben unveraendert. */
#ausbildung-title {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
}

.section-head p,
.large-text {
  margin: 0;
  color: var(--muted);
  font-size: 1.2rem;
}

/* "News"-Abschnitt: Text auf Wunsch groesser und praesenter neben dem Bild,
   darf ruhig auf zwei Zeilen umbrechen. Auf Wunsch nachtraeglich auch fuer
   Philosophie/Termine/Kontakt uebernommen, damit alle vier Abschnitte mit
   .large-text dieselbe groessere Schriftgroesse verwenden. */
#news .large-text,
#philosophie .large-text,
#termine .large-text,
#kontakt .large-text {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.35;
}

.section.deep .section-head p,
.section.deep .large-text,
.section.deep p {
  color: rgba(255, 250, 242, 0.82);
}

.trust-grid,
.card-grid,
.steps,
.gallery-grid,
.footer-grid {
  display: grid;
  gap: 18px;
}

.trust-grid {
  grid-template-columns: repeat(3, 1fr);
}

.trust-item,
.card,
.step,
.placeholder-box,
.legal-box {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 250, 242, 0.78);
}

.trust-item {
  min-height: 132px;
  padding: 20px;
}

.trust-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--forest), var(--gold));
  color: var(--paper);
}

.trust-icon.accent-rose {
  background: linear-gradient(135deg, var(--forest), var(--wine));
}

.trust-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trust-item strong {
  display: block;
  color: var(--forest);
  line-height: 1.25;
}

.trust-item p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(320px, 0.96fr);
  gap: 54px;
  align-items: start;
}

.split.reverse {
  grid-template-columns: minmax(320px, 0.96fr) minmax(0, 1.04fr);
}

.split.media-wide {
  grid-template-columns: minmax(0, 0.82fr) minmax(320px, 1.18fr);
}

.split.reverse .media {
  order: -1;
}

/* Fuer Abschnitte mit kurzem Textblock neben einem hohen Hochformat-Bild
   (z.B. Leistungsliste statt Fliesstext): Text vertikal mittig statt oben
   ausgerichtet, damit er nicht verloren in der oberen Ecke wirkt. */
.split-center {
  align-items: center;
}

.media-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.split.reverse .media-stack {
  order: -1;
}

/* Sicherheitsnetz gegen denselben Grid-Blowout-Effekt wie bei .hero-panel:
   .copy ist ein Grid-Kind von .split und hat sonst kein eigenes min-width -
   bei langen Kompositum-Ueberschriften (z.B. "Jagdhundeausbildung") koennte
   es sonst breiter werden als seine Spalte und ueber den Bildschirmrand
   hinausragen, statt normal umzubrechen. */
.copy {
  min-width: 0;
}

.copy p {
  margin: 0 0 18px;
}

.copy p:last-child {
  margin-bottom: 0;
}

.feature-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

/* "Moderne Jagdhundeausbildung"-Abschnitt: 5 Punkte wirken einspaltig
   aufgeraeumter als zweispaltig mit verwaistem letztem Eintrag. */
#ausbildung .feature-list {
  grid-template-columns: 1fr;
}

/* "Zucht"-Abschnitt: 3 Punkte auf Wunsch einspaltig untereinander statt
   zweispaltig mit verwaistem letztem Eintrag. */
#labradorzucht .feature-list {
  grid-template-columns: 1fr;
}

/* "Ueber mich"-Abschnitt: ebenfalls 3 Punkte, auf Wunsch einspaltig
   untereinander statt zweispaltig mit verwaistem letztem Eintrag.
   Selektor an die tatsaechliche Abschnitts-ID #ueber-mich angepasst (ohne
   Umlaut) - vorher griff die Regel nicht mehr, da die ID im HTML
   zwischenzeitlich von #über-mich auf #ueber-mich vereinheitlicht wurde. */
#ueber-mich .feature-list {
  grid-template-columns: 1fr;
}

.feature-list li {
  position: relative;
  padding: 12px 12px 12px 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 250, 242, 0.72);
  font-weight: 650;
}

.feature-list li::before {
  content: "";
  position: absolute;
  top: 19px;
  left: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
}

.media {
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--sand);
}

.media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.media:hover img {
  transform: scale(1.05);
}

.media.tall img {
  aspect-ratio: 5 / 6;
}

.caption {
  margin: 0;
  padding: 13px 15px;
  color: var(--muted);
  background: var(--paper);
  font-size: 0.92rem;
}

.philosophy {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 42px;
  align-items: start;
}

.principles {
  display: grid;
  gap: 14px;
}

.principle {
  padding: 18px;
  border: 1px solid rgba(255, 250, 242, 0.18);
  border-radius: var(--radius);
  background: rgba(255, 250, 242, 0.08);
}

.principle h3 {
  margin-bottom: 8px;
  font-family: inherit;
  font-size: 1.04rem;
}

.principle p {
  margin: 0;
}

.card-grid {
  grid-template-columns: repeat(3, 1fr);
}

.card {
  overflow: hidden;
}

.card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.card-body {
  padding: 22px;
}

.card h3 {
  margin-bottom: 10px;
  font-family: inherit;
  font-size: 1.16rem;
}

.card p {
  margin: 0;
  color: var(--muted);
}

.card-link {
  display: inline-flex;
  margin-top: 18px;
  color: var(--forest);
  font-weight: 800;
  text-decoration: none;
}

.card-link:hover {
  color: var(--gold);
}

.puppy-plan {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 26px;
  align-items: start;
}

.wurfplanung-block {
  margin-top: 56px;
  padding-top: 48px;
  border-top: 1px solid var(--line);
}

.pair-photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.pair-photo {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--sand);
  box-shadow: var(--shadow);
}

.pair-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.pair-photo figcaption {
  padding: 10px 14px;
  background: var(--paper);
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
}

.placeholder-box {
  padding: 26px;
  background: var(--forest);
  color: var(--paper);
}

.placeholder-box h3 {
  color: var(--paper);
  font-family: inherit;
}

.placeholder-box dl {
  display: grid;
  gap: 14px;
  margin: 22px 0 0;
}

.placeholder-box div {
  padding-top: 12px;
  border-top: 1px solid rgba(255, 250, 242, 0.22);
}

.placeholder-box dt {
  font-weight: 800;
}

.placeholder-box dd {
  margin: 2px 0 0;
  color: rgba(255, 250, 242, 0.8);
}

.verband-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px 36px;
  margin: 28px 0 34px;
  padding: 20px 30px;
  border-radius: var(--radius);
  background: rgba(255, 250, 242, 0.6);
  border: 1px solid var(--line);
}

.verband-strip-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.verband-strip-logos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
}

.verband-strip-logos img {
  height: 40px;
  width: auto;
  opacity: 0.85;
}

.partner-logo-link {
  display: block;
  max-width: 320px;
  margin: 32px auto 0;
  padding: 24px 28px;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.partner-logo-link:hover,
.partner-logo-link:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 20px 45px rgba(43, 40, 29, 0.2);
}

.partner-logo-link img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.5s ease;
}

.partner-logo-link:hover img,
.partner-logo-link:focus-visible img {
  transform: scale(1.04);
}

.pedigree-note {
  margin-top: 20px;
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
}

/* Stammbaum: Elterntiere */
.pedigree-tree-wrap {
  margin-top: 8px;
}

.pedigree-tree-title {
  margin-bottom: 16px;
  font-family: inherit;
  font-size: 1.1rem;
}

.parent-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 0 0 32px;
}

.parent-photo {
  margin: 0;
  text-align: center;
}

.parent-photo img {
  display: block;
  width: 100%;
  /* Beide Elterntier-Fotos sollen gleich gross wirken. Vorher: aspect-ratio
     1/1 + object-fit:contain - dadurch fuellte jedes Foto seinen Kasten je
     nach eigenem Seitenverhaeltnis unterschiedlich stark aus (das breitere
     Bontje-Bild bekam grosse Sandraender oben/unten und wirkte kleiner).
     Jetzt: einheitliches 4/3-Kaestchen + object-fit:cover, sodass beide Fotos
     ihren gleich grossen Kasten randlos ausfuellen und die Hunde gleich gross
     erscheinen. Der Zuschnitt entfernt bei beiden nur seitliche Wiese, die
     Hunde selbst bleiben vollstaendig sichtbar. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--sand);
  box-shadow: var(--shadow);
}

.parent-photo figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 14px;
}

.parent-photo-role {
  color: var(--gold-deep);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.parent-photo-name {
  font-weight: 800;
  font-size: 1.4rem;
}

.parent-table-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

/* Huendin und Ruede stehen jetzt als zwei Datenspalten EINER gemeinsamen
   Tabelle (statt zwei unabhaengiger Tabellen nebeneinander) - dadurch
   teilen sich beide Spalten pro Merkmal automatisch dieselbe Zeilenhoehe,
   Zeilen koennen nicht mehr gegeneinander verspringen. Der Scroll-Wrapper
   erlaubt auf schmalen Bildschirmen horizontales Scrollen statt eines zu
   engen Zusammenquetschens der drei Spalten. */
.parent-table-scroll {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Dezenter Hinweis, dass die Vergleichstabelle horizontal gescrollt werden
   kann. Standardmaessig ausgeblendet und nur auf schmalen Bildschirmen (unter
   ~680px) sichtbar - dort ist die Tabelle (min-width:640px) breiter als der
   verfuegbare Platz und wird daher seitlich scrollbar. Gleiche visuelle
   Sprache wie die uebrigen kleinen Kicker-Labels der Seite.
   Breakpoint 671px: die Tabelle scrollt genau dann, wenn der Inhaltsbereich
   (.wrap = Viewport - 32px Rand) schmaler als die 640px min-width der Tabelle
   ist, also ab Viewport < 672px. */
.table-scroll-hint {
  display: none;
}

@media (max-width: 671px) {
  .table-scroll-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .table-scroll-hint::before {
    content: "\2194";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    color: var(--gold-deep);
  }
}

.parent-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.parent-table-role {
  display: block;
  margin-bottom: 4px;
  color: var(--gold-deep);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.parent-table-name {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
}

/* Kopfzeile mit den beiden Spaltentiteln "Huendin"/"Ruede" (ersetzt die
   frueheren <caption>-Elemente der zwei Einzeltabellen). */
.parent-table thead th {
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: bottom;
}

.parent-table th,
.parent-table td {
  padding: 12px 22px;
  border-top: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.parent-table thead tr:first-child th {
  border-top: none;
}

.parent-table tbody tr:first-child th,
.parent-table tbody tr:first-child td {
  border-top: none;
}

.parent-table tbody th[scope="row"] {
  width: 26%;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 780;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.parent-table td {
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.5;
}

.parent-table .group-label th {
  padding-top: 28px;
  padding-bottom: 6px;
  border-top: 2px solid var(--gold-light);
  background: rgba(178, 115, 61, 0.07);
  color: var(--gold-deep);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.parent-table .group-start th,
.parent-table .group-start td {
  padding-top: 28px;
  border-top: 2px solid var(--gold-light);
}

.parent-link-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  align-items: stretch;
  max-width: 700px;
  margin: 32px auto 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.parent-link-card:hover,
.parent-link-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--gold);
}

.parent-link-card img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.parent-link-card:hover img {
  transform: scale(1.05);
}

.parent-link-card span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 20px 24px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.parent-link-card span strong {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--gold-deep);
  font-size: 0.98rem;
  font-weight: 700;
}

.parent-link-card span strong::after {
  content: "↗";
}

@media (max-width: 620px) {
  .parent-link-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .parent-duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .parent-table th,
  .parent-table td {
    padding: 10px 16px;
  }

  .parent-table tbody th[scope="row"] {
    width: 38%;
  }
}

.steps {
  position: relative;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
  counter-reset: step;
}

.steps::before {
  content: "";
  position: absolute;
  top: 52px;
  left: 30px;
  right: 30px;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 10px, transparent 10px 20px);
  opacity: 0.5;
  z-index: 0;
}

.step {
  position: relative;
  z-index: 1;
  min-height: 190px;
  padding: 28px 22px 24px;
  border-radius: 16px;
  overflow: hidden;
  counter-increment: step;
  background: linear-gradient(165deg, rgba(255, 250, 242, 0.96), rgba(217, 199, 168, 0.32));
  box-shadow: 0 10px 26px rgba(43, 40, 29, 0.07);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.step::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-light));
}

.step:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(43, 40, 29, 0.16);
  border-color: rgba(178, 115, 61, 0.45);
}

.step::before {
  content: counter(step, decimal-leading-zero);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--forest), #33513f);
  color: var(--gold-light);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.12rem;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(35, 57, 45, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.step h3,
.step h4 {
  margin: 0 0 8px;
  color: var(--forest);
  font-family: inherit;
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.08;
}

.step p {
  margin: 0;
  color: var(--muted);
  font-size: 0.96rem;
}

.track-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  padding: 9px 20px;
  border-radius: 999px;
  background: var(--forest);
  color: var(--paper);
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.track-title::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-light);
}

.steps + .track-title {
  margin-top: 50px;
}

.gallery-grid {
  grid-template-columns: 1.25fr 0.85fr 0.9fr;
  align-items: stretch;
}

.gallery-item {
  position: relative;
  min-height: 260px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--sand);
}

.gallery-item.large {
  grid-row: span 2;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
}

.gallery-item figcaption {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  padding: 10px 12px;
  color: var(--paper);
  background: rgba(25, 34, 26, 0.72);
  border-radius: var(--radius);
  font-size: 0.92rem;
}

.contact-float {
  position: relative;
  z-index: 5;
  margin-top: -92px;
  margin-bottom: 44px;
}

.hero-text-box-kontakt {
  max-width: 420px;
  margin-right: -14px;
}

.quick-contact-kontakt {
  margin-left: auto;
  margin-right: -14px;
}

.quick-contact {
  display: grid;
  grid-template-columns: 1fr;
  /* Gleiche Breite wie .hero-text-box, damit die Karte links und rechts
     buendig mit dem Text darueber abschliesst (ein einzelner Container,
     keine verschachtelte Box mehr). */
  max-width: 480px;
  gap: 16px;
}

.quick-contact-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.quick-contact-item:hover,
.quick-contact-item:focus-visible {
  transform: translateY(-4px);
  background: var(--gold-light);
  box-shadow: 0 14px 30px rgba(43, 40, 29, 0.18);
}

.quick-contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--forest), var(--gold));
  color: var(--paper);
}

.quick-contact-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quick-contact-text {
  min-width: 0;
}

.quick-contact-label {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 760;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.quick-contact-value {
  display: block;
  margin-top: 2px;
  color: var(--forest);
  font-size: 1.04rem;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  align-items: stretch;
}

.contact-panel {
  padding: 32px;
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
}

/* Kontaktseite, Abschnitt "Bevor Sie schreiben": Fliesstext auf Wunsch
   groesser, im gleichen Stil wie die uebrigen vergroesserten Abschnitte. */
.contact-panel p {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.35;
}

/* Die Bildunterschrift wurde entfernt, damit das Foto den gesamten,
   durch das Grid gestreckten Kartenbereich ausfuellt statt nur den
   festen aspect-ratio-Ausschnitt plus separate Textzeile darunter. */
.contact-band .media {
  height: 100%;
}

.contact-band .media img {
  height: 100%;
  aspect-ratio: auto;
}

.contact-list {
  display: grid;
  gap: 14px;
  margin: 26px 0 0;
}

.contact-row {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.contact-row span {
  display: block;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 760;
  text-transform: uppercase;
}

.contact-row a,
.contact-row strong {
  display: inline-block;
  margin-top: 2px;
  color: var(--forest);
  font-size: 1.08rem;
  font-weight: 800;
  word-break: break-word;
}

.site-footer {
  color: rgba(255, 250, 242, 0.8);
  background: #18251d;
}

.footer-grid {
  grid-template-columns: 1.3fr 0.85fr 0.85fr;
  padding: 58px 0;
}

.site-footer h2,
.site-footer h3 {
  color: var(--paper);
  font-family: inherit;
  font-size: 1rem;
}

.footer-links {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.footer-badges-label {
  margin: 0 0 14px;
  color: rgba(255, 250, 242, 0.5);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255, 250, 242, 0.96);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.footer-badge img {
  display: block;
  height: 26px;
  width: auto;
}

.footer-links a {
  color: rgba(255, 250, 242, 0.78);
  text-decoration: none;
}

.footer-bottom {
  padding: 18px 0;
  border-top: 1px solid rgba(255, 250, 242, 0.14);
  color: rgba(255, 250, 242, 0.62);
  font-size: 0.92rem;
}

.page-hero {
  padding: 86px 0 58px;
  background: var(--paper);
}

.page-hero .wrap {
  display: grid;
  gap: 16px;
}

.page-hero p {
  margin: 0;
  color: var(--muted);
  font-size: 1.22rem;
}

.page-hero.has-image {
  position: relative;
  min-height: calc(100vh - 150px);
  padding: 0;
  overflow: hidden;
  color: var(--paper);
}

.page-hero.has-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}

.page-hero.has-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(20, 28, 22, 0.1) 0%, rgba(20, 28, 22, 0.48) 48%, rgba(20, 28, 22, 0.82) 82%);
}

/* Kontaktseite: das Hintergrundfoto zeigt zwei Hunde nebeneinander statt
   einer einzelnen breiten Landschaft - der normale, staerker abdunkelnde
   Verlauf hat den zweiten (rechten) Hund zu stark verdeckt. Heller und der
   dunkle Bereich beginnt erst spaeter/schmaler, damit beide Hunde sichtbar
   bleiben und nur der aeusserste rechte Rand hinter dem Text abgedunkelt
   wird. */
.page-hero.page-hero-kontakt::after {
  background: linear-gradient(100deg, rgba(20, 28, 22, 0.04) 0%, rgba(20, 28, 22, 0.26) 58%, rgba(20, 28, 22, 0.7) 90%);
}

.page-hero.has-image .wrap {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  max-width: var(--content);
  min-height: calc(100vh - 150px);
}

.page-hero.has-image .hero-text-box {
  display: grid;
  gap: 14px;
  max-width: 480px;
  /* Ohne min-width:0 koennte dieses Flex-Kind von .wrap bei einem sehr
     langen, unteilbaren Wort in Ueberschrift/Kicker nicht schrumpfen und
     ueber den Bildschirmrand hinausragen (gleicher Effekt wie bei
     .hero-panel, siehe dortiger Kommentar). */
  min-width: 0;
  margin-left: auto;
  padding: 64px 0;
}

.page-hero.has-image .section-kicker {
  color: var(--gold-light);
}

.page-hero.has-image h1 {
  color: var(--paper);
}

.page-hero.has-image p {
  color: rgba(255, 250, 242, 0.92);
}

/* Kontaktseite: gleicher dunkler Textcontainer wie im Hero der Startseite/
   Zuchtseite (.hero-panel) statt reinem Text auf Verlaufshintergrund - so
   wirkt die Ueberschrift einheitlich freigestellt und gut lesbar. */
.page-hero.has-image .hero-text-box-kontakt {
  padding: clamp(22px, 3vw, 40px);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  background: rgba(20, 28, 22, 0.55);
  backdrop-filter: blur(8px);
}

/* Garantierter Sicherheitsabstand nach unten: die schwebende Kontakt-Karte
   (.contact-float) zieht sich per negativem Rand (-92px) in den unteren
   Hero-Bereich. Der Hero-Text ist normalerweise vertikal zentriert - bei
   knapperen Bildschirmhoehen konnte sein unterer Rand dadurch in die
   Karte hineinreichen und dahinter verschwinden. Der zusaetzliche
   Innenabstand unten haelt den Text unabhaengig von der Fensterhoehe
   zuverlaessig oberhalb der Karte. */
.page-hero.page-hero-kontakt .wrap {
  padding-bottom: clamp(110px, 14vh, 150px);
}

.legal-box {
  padding: 28px;
}

.legal-box h2,
.legal-box h3 {
  margin-top: 28px;
  margin-bottom: 10px;
  font-family: inherit;
  font-size: 1.25rem;
}

.legal-box h2:first-child,
.legal-box h3:first-child {
  margin-top: 0;
}

.legal-box p,
.legal-box li {
  color: var(--muted);
}

.legal-box code {
  white-space: normal;
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.text-panel {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.text-panel h2,
.text-panel h3 {
  margin-bottom: 10px;
  font-family: inherit;
  font-size: 1.22rem;
}

.text-panel p,
.text-panel li {
  color: var(--muted);
}

.simple-list {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding-left: 20px;
}

.section-spacer {
  margin-top: 42px;
}

/* Vergleichs-Banner (Entwurf/Alternative) */
.compare-banner {
  padding: 12px 0;
  color: var(--paper);
  background: var(--wine);
  text-align: center;
}

.compare-banner .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  font-size: 0.9rem;
  font-weight: 700;
}

.compare-banner a {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.compare-banner a:hover {
  color: var(--gold-light);
}

/* Alternativ-Startseite: Land-Rover-inspirierte Bausteine */
.lr-hero {
  position: relative;
  min-height: calc(100vh - 156px);
  color: var(--paper);
  background: var(--forest);
  overflow: hidden;
}

.lr-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.lr-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(15, 21, 16, 0.86) 0%, rgba(15, 21, 16, 0.25) 45%, rgba(15, 21, 16, 0.15) 100%);
}

.lr-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  min-height: calc(100vh - 156px);
  width: min(var(--content), calc(100% - 32px));
  margin: 0 auto;
  padding: 0 0 72px;
}

.lr-eyebrow {
  display: block;
  margin: 0 0 18px;
  color: var(--gold-light);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.lr-title {
  max-width: 880px;
  margin: 0;
  color: var(--paper);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: clamp(2.3rem, 6.4vw, 4.6rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.lr-sub {
  max-width: 620px;
  margin: 22px 0 0;
  color: rgba(255, 250, 242, 0.92);
  font-size: clamp(1.02rem, 1.7vw, 1.22rem);
}

.lr-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.button.lr {
  border-radius: 2px;
  border-color: rgba(255, 250, 242, 0.7);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lr-section-head {
  display: grid;
  gap: 14px;
  max-width: 820px;
  margin: 0 auto 40px;
  text-align: center;
}

.lr-section-head .lr-eyebrow {
  color: var(--gold-deep);
  margin-bottom: 0;
}

.lr-section-head h2 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.lr-band {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58vh;
  overflow: hidden;
  color: var(--paper);
  text-align: center;
}

.lr-band img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
}

.lr-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(15, 21, 16, 0.82) 0%, rgba(15, 21, 16, 0.42) 60%, rgba(15, 21, 16, 0.5) 100%);
}

.lr-band-content {
  position: relative;
  z-index: 1;
  max-width: 720px;
  padding: 0 24px;
}

.lr-band .lr-eyebrow {
  color: var(--gold-light);
}

.lr-band h2 {
  margin: 0;
  color: var(--paper);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.9rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.12;
}

.lr-band p {
  max-width: 560px;
  margin: 18px auto 0;
  color: rgba(255, 250, 242, 0.92);
  font-size: 1.08rem;
}

.lr-band .section-actions {
  justify-content: center;
}

@media (max-width: 1460px) {
  .nav-toggle {
    display: block;
  }

  .site-nav {
    position: absolute;
    top: 100%;
    right: 16px;
    left: 16px;
    display: none;
    align-items: stretch;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--shadow);
    /* Der Header ist in diesem Breakpoint bis zu 149px hoch; die 110px zuvor
       zogen zu wenig ab, sodass das aufgeklappte Menue bei niedrigen
       Bildschirmhoehen unten aus dem Viewport ragte. 160px lassen unabhaengig
       von der Fensterhoehe einen sicheren Rest-Rand und aktivieren rechtzeitig
       das interne Scrollen. */
    max-height: calc(100vh - 160px);
    overflow-y: auto;
  }

  /* Bewusst display:block (nicht flex): ein Flex-Spalten-Container mit
     ueberlaufenden, nicht schrumpfenden Kindern berechnet in Chromium die
     scrollHeight falsch - overflow-y:auto scrollte dann nicht, und die
     obersten Links ragten unerreichbar ueber den oberen Rand hinaus. Als
     normaler Block-Container mit Block-Links greift overflow-y:auto wieder
     korrekt und das Menue laesst sich auf niedrigen Bildschirmen sauber
     scrollen. */
  .site-nav.is-open {
    display: block;
  }

  .site-nav a {
    display: block;
    padding: 13px 12px;
    /* Im aufgeklappten Dropdown gilt die Ein-Zeilen-Platzbeschraenkung des
       Desktop-Headers nicht (jeder Link steht auf eigener Zeile) - Schrift
       hier bewusst wieder etwas groesser als die kompakte Desktop-Groesse. */
    font-size: 1.15rem;
  }
}

@media (max-width: 1040px) {
  .trust-grid,
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }

  .steps::before {
    content: none;
  }

  .card-grid,
  .topic-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1.3fr 0.85fr 0.85fr;
  }

  .gallery-grid {
    grid-template-columns: 1fr 1fr;
  }

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

  .info-bar-inner {
    justify-content: center;
  }
}

@media (max-width: 820px) {
  body {
    font-size: 17px;
  }

  .hero {
    display: flex;
    flex-direction: column;
    min-height: auto;
  }

  .hero::after {
    display: none;
  }

  .hero img {
    position: static;
    width: 100%;
    height: 300px;
    object-position: left center;
    animation: none;
  }

  /* Zuchtseite-Hero, mobil: Der Hund (linkes Bilddrittel) soll gross und
     moeglichst mittig erscheinen, ohne Rand.
     - Hoeheres Bildband (440px statt 300px): object-fit:cover skaliert das
       Bild dadurch staerker hoch, der Hund wird groesser; beim linksbuendigen
       Ausschnitt rueckt er zugleich naeher zur Mitte. 440px ist bewusst
       gewaehlt, damit der Hund von 320px bis 820px komplett im Bild bleibt
       (hoehere Werte schneiden ihn auf sehr schmalen Handys hinten an).
     - object-position:left center per !important, weil das <img> ein
       Inline-object-position (center 42%) fuer die Desktop-Ausrichtung traegt,
       das sonst gewinnen wuerde. Desktop bleibt davon unveraendert. */
  #zucht-hero img {
    height: 440px;
    object-position: left center !important;
  }

  .hero-content {
    position: relative;
    min-height: auto;
    align-content: start;
    width: min(var(--content), calc(100% - 32px));
    padding: 32px 0 48px;
  }

  .hero-panel {
    max-width: none;
    margin-left: 0;
    padding: 26px;
    background: rgba(20, 28, 22, 0.92);
  }

  .duo-hero,
  .trio-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .duo-panel {
    min-height: 340px;
  }

  .showcase-grid {
    grid-template-columns: 1fr;
  }

  .showcase-tile {
    aspect-ratio: 4 / 3;
  }

  .page-hero.has-image {
    min-height: auto;
  }

  .page-hero.has-image .wrap {
    min-height: auto;
  }

  .lr-hero,
  .lr-hero-content {
    min-height: 640px;
  }

  .lr-hero-content {
    padding-bottom: 44px;
  }

  .lr-band {
    min-height: 46vh;
    padding: 56px 0;
  }

  .compare-banner .wrap {
    font-size: 0.84rem;
  }

  .page-hero.has-image .hero-text-box {
    max-width: none;
    margin-left: 0;
    padding: 44px 0;
  }

  .hero-note {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(var(--content), calc(100% - 32px));
    max-width: none;
    margin: -90px auto 30px;
  }

  .section {
    padding: 68px 0;
  }

  .split,
  .split.reverse,
  .split.media-wide,
  .philosophy,
  .puppy-plan,
  .contact-band {
    grid-template-columns: 1fr;
  }

  .contact-float {
    margin-top: 26px;
  }

  .hero-text-box-kontakt,
  .quick-contact-kontakt {
    margin-right: 0;
  }

  /* Kontaktseite: Textcontainer wird wie .hero-panel auf schmalen
     Bildschirmen volle Breite und deutlich weniger transparent, damit er
     ueber dem Bild gut lesbar bleibt. */
  .page-hero.has-image .hero-text-box-kontakt {
    padding: 26px;
    background: rgba(20, 28, 22, 0.92);
  }

  /* Der zusaetzliche Sicherheitsabstand nach unten (siehe Desktop-Regel)
     ist hier nicht noetig: .contact-float zieht sich auf schmalen
     Bildschirmen nicht mehr per negativem Rand in den Hero hinein
     (siehe .contact-float { margin-top: 26px } weiter unten), daher
     entfaellt jedes Ueberdeckungsrisiko. */
  .page-hero.page-hero-kontakt .wrap {
    padding-bottom: 0;
  }

  .split.reverse .media,
  .split.reverse .media-stack {
    order: 0;
  }

  .feature-list,
  .card-grid,
  .content-grid,
  .footer-grid,
  .topic-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .brand-subtitle {
    display: none;
  }

  .nav-shell {
    min-height: 84px;
  }

  .brand-logo {
    height: 68px;
  }

  .trust-grid,
  .steps,
  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .section h2,
  .page-hero h1 {
    font-size: clamp(1.7rem, 7vw, 3.65rem);
  }

  /* Auf sehr schmalen Screens (<=~375px) reichte die auf 30px fixierte
     Panel-Ueberschrift nicht mehr fuer das lange Kompositum
     "Jagdhundeausbildung" - overflow-wrap:break-word trennte es dann mitten
     im Wort (ein einzelnes "g" rutschte in die naechste Zeile). Die
     Ueberschrift skaliert hier daher mit der Viewport-Breite herunter, bis
     das laengste Wort komplett in eine Zeile passt; ab ~447px greift wieder
     der bisherige Wert (1.9rem), sodass sich fuer breitere Handys nichts
     aendert. */
  .hero-panel h1 {
    font-size: clamp(1.3rem, 6.8vw, 1.9rem);
  }

  .contact-float {
    margin-top: -48px;
  }

  /* Die schwebende Kontakt-Karte zieht sich hier per margin-top:-48px wieder
     in den Hero hinein. Ohne Gegenmassnahme deckt ihre Oberkante die letzte
     Zeile des Hero-Textes ab (auf Desktop verhindert das der grosse
     padding-bottom im .wrap, der bei <=820px aber auf 0 gesetzt ist). Ein
     kleiner padding-bottom schafft unterhalb des Textkastens genug Luft,
     sodass die Karte davor schwebt statt Text zu verdecken. */
  .page-hero.page-hero-kontakt .wrap {
    padding-bottom: 40px;
  }

  .quick-contact {
    max-width: none;
  }

  .quick-contact-value {
    white-space: normal;
  }

  .info-bar-inner {
    gap: 4px 16px;
    font-size: 0.78rem;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .button {
    flex: none;
  }

  .section-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .button {
    width: 100%;
  }

  .gallery-item.large {
    grid-row: auto;
  }

  .contact-panel {
    padding: 24px;
  }
}