/* ==========================================================================
   Friedhofsgärtnerei Hilligardt — style.css
   Eine Datei für alle Seiten. Mobile-first. Breakpoints 600 / 900 / 1200.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Schrift
   Noch keine Webfont eingebunden — Kandidaten stehen zur Auswahl.
   Bis dahin: Systemschrift. Der @font-face-Block kommt hierhin.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Marke, aus der alten Seite ausgelesen */
  --gruen-dunkel: #114529;
  --gruen-tief:   #003d1a;
  --gruen-mittel: #85bf5b;
  --gruen-salbei: #769560;
  --limette:      #afcb08;
  --gelb:         #ffe033;
  --grau-warm:    #5f6a56;
  --weiss:        #ffffff;

  /* Ergänzt, weil die Marke allein keinen lesbaren Satz auf Dunkelgrün hergibt.
     --gruen-hell: #85bf5b um 55 % mit Weiß gemischt.
     Kontrast auf --gruen-dunkel 7.87:1, auf --gruen-tief 8.92:1. */
  --gruen-hell:   #c8e2b5;

  /* Neutrale Flächen und Text */
  --tinte:        #2b3328;  /* Fließtext auf Weiß, 13.07:1 */
  --tinte-leise:  #4a5344;  /* Sekundärtext auf Weiß,  8.04:1 */
  --flaeche:      #f4f6f1;  /* helle Sektionen */
  --linie:        #e2e8dc;  /* Trennlinien auf Hell */
  --linie-dunkel: #2f5a41;  /* Trennlinien auf Dunkelgrün */

  /* Semantische Zuweisung */
  --bg:            var(--weiss);
  --text:          var(--tinte);
  --text-leise:    var(--tinte-leise);
  --ueberschrift:  var(--gruen-dunkel);
  --link:          var(--gruen-dunkel);
  --link-hover:    var(--gruen-tief);
  --fokus:         var(--gruen-dunkel);

  /* Typografie */
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-basis: 1.0625rem;                             /* 17px */
  --fs-klein: 0.9375rem;                             /* 15px */
  --fs-h1: clamp(2rem, 1.4rem + 2.6vw, 3.125rem);    /* 32 → 50px */
  --fs-h2: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem);  /* 24 → 34px */
  --fs-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);   /* 20 → 24px */
  --lh-text: 1.6;
  --lh-eng: 1.25;
  --messkolumne: 70ch;                               /* max. Zeilenlänge */

  /* Maße */
  --container: 1200px;
  --rand: 1.25rem;
  --raum-1: 0.5rem;
  --raum-2: 1rem;
  --raum-3: 1.5rem;
  --raum-4: 2rem;
  --raum-5: 3rem;
  --raum-6: 4.5rem;
  --radius: 3px;
}

@media (min-width: 600px) {
  :root { --rand: 2rem; }
}

/* --------------------------------------------------------------------------
   3. Reset, sparsam
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

@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;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--schrift);
  font-size: var(--fs-basis);
  line-height: var(--lh-text);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }

ul, ol { padding: 0; }

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

/* --------------------------------------------------------------------------
   4. Typografie
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  color: var(--ueberschrift);
  font-weight: 700;
  line-height: var(--lh-eng);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-basis); }

p, li { text-wrap: pretty; }

p + p { margin-top: var(--raum-2); }

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

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

strong { font-weight: 700; }

/* Fließtext bleibt schmal genug zum Lesen */
.messkolumne { max-width: var(--messkolumne); }

/* --------------------------------------------------------------------------
   5. Fokus — überall sichtbar
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
  border-radius: 1px;
}

/* Auf Dunkelgrün ist Gelb der sichtbare Ring: 8.37:1 gegen --gruen-dunkel
   (.kopf, .auf-dunkel, .lightbox), 9.49:1 gegen --gruen-tief (.fuss).
   Auf Weiß wäre Gelb mit 1.32:1 unbrauchbar, deshalb nur hier. */
.auf-dunkel :focus-visible,
.kopf :focus-visible,
.fuss :focus-visible,
.lightbox :focus-visible {
  outline-color: var(--gelb);
}

/* --------------------------------------------------------------------------
   6. Hilfsklassen
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--rand);
}

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

.sprungmarke {
  position: absolute;
  left: var(--raum-2);
  top: -100%;
  z-index: 100;
  padding: var(--raum-2) var(--raum-3);
  background: var(--weiss);
  color: var(--gruen-dunkel);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius);
}

.sprungmarke:focus {
  top: var(--raum-2);
}

/* Dunkle Sektionen: Text ist Weiß (11.01:1) oder --gruen-hell (7.87:1).
   Nie --gruen-mittel oder --limette als Fließtext. */
.auf-dunkel {
  background: var(--gruen-dunkel);
  color: var(--weiss);
}

.auf-dunkel h1,
.auf-dunkel h2,
.auf-dunkel h3,
.auf-dunkel h4 { color: var(--weiss); }

.auf-dunkel a { color: var(--gruen-hell); }
.auf-dunkel a:hover { color: var(--weiss); }

/* Rasterhilfe für Kachelsektionen (Leistungen, Galerie) */
.raster {
  display: grid;
  gap: var(--raum-3);
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .raster { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .raster { gap: var(--raum-4); }
  .raster--3 { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */
.kopf {
  background: var(--gruen-dunkel);
  color: var(--weiss);
}

.kopf__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--raum-2);
  padding-block: var(--raum-3);
  position: relative;
}

.kopf__logo {
  display: inline-block;
  color: var(--weiss);
  text-decoration: none;
  text-align: center;
  line-height: 1.2;
}

.kopf__logo:hover { opacity: 0.85; }

.kopf__logo-bild {
  display: block;
  width: clamp(15rem, 10rem + 14vw, 23rem);
  height: auto;
}

/* Burger: nur unter 900px sichtbar */
.burger {
  position: absolute;
  right: 0;
  top: var(--raum-3);
  display: inline-flex;
  align-items: center;
  gap: var(--raum-1);
  padding: 0.625rem 0.75rem;
  background: transparent;
  color: var(--weiss);
  border: 1px solid var(--linie-dunkel);
  border-radius: var(--radius);
  font-size: var(--fs-klein);
  cursor: pointer;
}

.burger:hover {
  background: var(--gruen-tief);
  border-color: var(--gruen-hell);
}

.burger__balken {
  position: relative;
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
}

.burger__balken::before,
.burger__balken::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: currentColor;
}

.burger__balken::before { top: -6px; }
.burger__balken::after  { top: 6px; }

/* Navigation */
.hauptnav { width: 100%; }

.hauptnav__liste {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linie-dunkel);
}

.hauptnav__liste > li { border-bottom: 1px solid var(--linie-dunkel); }

.hauptnav__link {
  display: block;
  padding: 0.875rem var(--raum-1);
  color: var(--weiss);
  text-decoration: none;
  font-weight: 400;
}

.hauptnav__link:hover {
  background: var(--gruen-tief);
  color: var(--gruen-hell);
}

.hauptnav__link[aria-current="page"] {
  font-weight: 700;
  color: var(--gruen-hell);
}

/* Zugeklappt. Ohne JS hebt der <noscript>-Block im Head das wieder auf,
   dann steht das Menü offen und der Burger verschwindet. */
.hauptnav[data-zu] { display: none; }

/* Ab 900px: waagerechte Navigation, kein Burger */
@media (min-width: 900px) {
  .burger { display: none; }

  .hauptnav[data-zu] { display: block; }

  .kopf__inner {
    padding-block: var(--raum-4) 0;
    gap: var(--raum-3);
  }

  .hauptnav__liste {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0 var(--raum-2);
    border-top: 0;
  }

  .hauptnav__liste > li { border-bottom: 0; }

  .hauptnav__link {
    padding: var(--raum-2) var(--raum-2) var(--raum-3);
    border-bottom: 3px solid transparent;
  }

  .hauptnav__link:hover {
    background: transparent;
    border-bottom-color: var(--gruen-hell);
  }

  .hauptnav__link[aria-current="page"] {
    border-bottom-color: var(--gruen-hell);
  }
}

/* --------------------------------------------------------------------------
   8. Main
   -------------------------------------------------------------------------- */
.inhalt {
  flex: 1 0 auto;
}

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */
/* Eine Stufe dunkler als die Sektionen (--gruen-tief statt --gruen-dunkel),
   damit der Footer sich ohne Lücke von der letzten .auf-dunkel-Sektion
   absetzt. Weiß 12.48:1, --gruen-hell 8.92:1 auf --gruen-tief. */
.fuss {
  background: var(--gruen-tief);
  color: var(--weiss);
}

.fuss__spalten {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--raum-4);
  padding-block: var(--raum-5);
}

@media (min-width: 900px) {
  .fuss__spalten {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--raum-5);
    padding-block: var(--raum-6);
  }
}

.fuss__titel {
  margin-bottom: var(--raum-2);
  font-size: var(--fs-klein);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gruen-hell);   /* 8.92:1 auf --gruen-tief */
}

.fuss address {
  font-style: normal;
}

/* Zwei Anschriften unterscheiden (Footer und Kontaktseite, dort auch
   in .auf-dunkel verwendet): 8.92:1 auf --gruen-tief, 7.87:1 auf
   --gruen-dunkel — beide über 4.5:1. */
.fuss__adresslabel {
  color: var(--gruen-hell);
  font-weight: 700;
}

.fuss__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fuss__liste li + li { margin-top: var(--raum-1); }

.fuss a {
  color: var(--weiss);
  text-decoration-color: var(--gruen-hell);
}

.fuss a:hover {
  color: var(--gruen-hell);
}

.fuss__zeiten {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem var(--raum-2);
  margin: 0;
}

.fuss__zeiten dt { color: var(--gruen-hell); }   /* 8.92:1 auf --gruen-tief */
.fuss__zeiten dd { margin: 0; }

.fuss__unten {
  border-top: 1px solid var(--linie-dunkel);
}

.fuss__unten-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-1) var(--raum-3);
  padding-block: var(--raum-3);
  font-size: var(--fs-klein);
}

.fuss__rechtsliste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-1) var(--raum-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.fuss__copyright {
  color: var(--gruen-hell);   /* 8.92:1 auf --gruen-tief */
  margin-inline-start: auto;
}

/* --------------------------------------------------------------------------
   10. Button — wiederverwendbar über alle Seiten
   -------------------------------------------------------------------------- */
.knopf {
  display: inline-block;
  background: var(--gruen-dunkel);
  color: var(--weiss);
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.knopf:hover { background: var(--gruen-tief); color: var(--weiss); }

.knopf--block { display: block; width: 100%; }

/* Für Buttons auf dunklem Grund (z. B. Kontakt-Anriss) */
.knopf--hell { background: var(--weiss); color: var(--gruen-dunkel); }
.knopf--hell:hover { background: var(--flaeche); color: var(--gruen-tief); }

/* .auf-dunkel a hat höhere Spezifität als .knopf--hell allein (zwei
   Klassen statt einer) und würde die Button-Farbe sonst zu --gruen-hell
   kippen. Explizit für den verschachtelten Fall überschreiben. */
.auf-dunkel .knopf--hell { color: var(--gruen-dunkel); }
.auf-dunkel .knopf--hell:hover { color: var(--gruen-tief); }

/* --------------------------------------------------------------------------
   11. Hero — LCP-Element, nur auf der Startseite
   -------------------------------------------------------------------------- */
.hero { position: relative; }

.hero__bild { width: 100%; height: auto; display: block; }

/* Unter 900px steht der Text im normalen Fluss unter dem Bild, nicht
   darüber: Das Hero-Bild bestimmt allein seine Höhe, der Text ist lang
   und kundenseitig änderbar. Jede Mindesthöhe am Bild bricht wieder,
   sobald ein Satz dazukommt — deshalb kein Overlay auf schmalen Screens. */
.hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--raum-2);
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--raum-3) var(--rand);
}

.hero__claim {
  background: var(--weiss);
  color: var(--tinte);           /* 13.07:1 auf --weiss */
  padding: var(--raum-3);
  border-radius: var(--radius);
  font-size: var(--fs-h3);
  font-weight: 700;
}

.hero__begleit {
  background: var(--gruen-dunkel);
  color: var(--weiss);           /* 11.01:1 auf --gruen-dunkel */
  padding: var(--raum-3);
  border-radius: var(--radius);
  font-size: var(--fs-klein);
}

/* Ab 900px passt der Text neben dem hochformatigen Bildausschnitt Platz,
   deshalb hier als Overlay: absolut positioniert, halbtransparent über
   dem Bild statt darunter im Fluss. */
@media (min-width: 900px) {
  .hero__text {
    position: absolute;
    inset-inline-start: var(--raum-5);
    inset-inline-end: var(--raum-2);
    top: var(--raum-5);
    width: auto;
    max-width: 34rem;
    margin-inline: 0;
    padding: 0;
  }

  .hero__claim { background: rgba(255, 255, 255, 0.94); }
  .hero__begleit { background: rgba(17, 69, 41, 0.94); }
}

/* --------------------------------------------------------------------------
   12. Aktuelle Meldungen — zwei Kacheln, Bild + Text
   -------------------------------------------------------------------------- */
.neuigkeiten { padding-block: var(--raum-5); }

.neuigkeiten__liste {
  display: grid;
  gap: var(--raum-3);
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .neuigkeiten__liste { grid-template-columns: repeat(2, 1fr); }
}

/* Bild oben, Text darunter — bis 900px bleibt auch bei zweispaltigem
   Raster (ab 600px) noch genug Kartenbreite für ein seitliches Bild,
   erst darunter ist es zu schmal und die Karte stapelt sich. */
.neuigkeiten__karte {
  display: flex;
  flex-direction: column;
  background: var(--flaeche);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
}

.neuigkeiten__bildwrap { position: relative; display: block; }

/* Sieger-Abzeichen, pulsierend. 9.49:1 (--gruen-tief auf --gelb). */
.neuigkeiten__abzeichen {
  position: absolute;
  top: -0.75rem;
  left: -0.75rem;
  width: 4rem;
  height: 4rem;
  background: var(--gelb);
  color: var(--gruen-tief);
  clip-path: polygon(
    50% 0%,   58% 21%, 75% 7%,   71% 29%,
    93% 25%,  79% 42%, 100% 50%, 79% 58%,
    93% 75%,  71% 71%, 75% 93%,  58% 79%,
    50% 100%, 42% 79%, 25% 93%,  29% 71%,
    7% 75%,   21% 58%, 0% 50%,   21% 42%,
    7% 25%,   29% 29%, 25% 7%,   42% 21%
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.15;
  transform: rotate(-12deg);
  animation: neuigkeitenPuls 1.8s ease-in-out infinite;
  pointer-events: none;
}

.neuigkeiten__abzeichen-klein { font-size: 0.5625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.neuigkeiten__abzeichen-gross { font-size: 1rem; font-weight: 900; }

@keyframes neuigkeitenPuls {
  0%, 100% { transform: scale(1) rotate(-12deg); }
  50%      { transform: scale(1.12) rotate(-12deg); }
}

@media (max-width: 600px) {
  .neuigkeiten__abzeichen { width: 3rem; height: 3rem; top: -0.5rem; left: -0.5rem; }
  .neuigkeiten__abzeichen-gross { font-size: 0.75rem; }
  .neuigkeiten__abzeichen-klein { font-size: 0.4375rem; }
}

.neuigkeiten__bild {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.neuigkeiten__inhalt {
  padding: var(--raum-3);
  display: flex;
  flex-direction: column;
  gap: var(--raum-1);
  min-width: 0;
}

@media (min-width: 900px) {
  .neuigkeiten__karte { flex-direction: row; gap: var(--raum-3); }
  .neuigkeiten__bild { flex: 0 0 38%; aspect-ratio: 3 / 4; }
  .neuigkeiten__inhalt { padding: var(--raum-3) var(--raum-3) var(--raum-3) 0; }
}

.neuigkeiten__titel { font-size: var(--fs-h3); }
.neuigkeiten__text { color: var(--text-leise); }
.neuigkeiten__link { font-weight: 700; color: var(--gruen-dunkel); }

/* --------------------------------------------------------------------------
   13. Unsere Intention für Sie — vier Leistungskacheln
   -------------------------------------------------------------------------- */
.intention { padding-block: var(--raum-5); text-align: center; }

.intention__ueberschrift { margin-bottom: var(--raum-4); }

.intention__liste {
  display: grid;
  gap: var(--raum-4);
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .intention__liste { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .intention__liste { grid-template-columns: repeat(4, 1fr); }
}

/* auto auto 1fr auto: Bild, Titel, Text (flexibel), Button — Buttons
   sitzen dadurch immer auf einer Linie, egal wie lang der Text ist. */
.intention__karte {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--raum-2);
}

.intention__bild {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
}

.intention__titel {
  font-size: 1.0625rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.intention__text { color: var(--text-leise); }

/* --------------------------------------------------------------------------
   14. Testimonials — leeres Gerüst, echte Stimmen folgen
   -------------------------------------------------------------------------- */
.testimonials {
  background: var(--gruen-mittel);
  padding-block: var(--raum-5);
  text-align: center;
}

.testimonials__ueberschrift { color: var(--gruen-tief); margin-bottom: var(--raum-4); }

.testimonials__liste {
  display: grid;
  gap: var(--raum-3);
  grid-template-columns: 1fr;
  text-align: start;
}

@media (min-width: 700px) {
  .testimonials__liste { grid-template-columns: repeat(2, 1fr); }
}

.testimonial {
  background: var(--weiss);
  padding: var(--raum-4);
  border-radius: var(--radius);
}

.testimonial__zitat { font-style: italic; }
.testimonial__name { margin-top: var(--raum-2); font-weight: 700; color: var(--gruen-dunkel); }
.testimonial__ort { font-weight: 400; color: var(--text-leise); }

/* --------------------------------------------------------------------------
   15. Auszeichnungen — hell und lesbar, keine Einblende-Animation
   -------------------------------------------------------------------------- */
.auszeichnungen { background: var(--flaeche); padding-block: var(--raum-5); text-align: center; }

.auszeichnungen__ueberschrift { margin-bottom: var(--raum-4); }

.auszeichnungen__liste {
  display: grid;
  gap: var(--raum-3);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 900px) {
  .auszeichnungen__liste { grid-template-columns: repeat(4, 1fr); }
}

.auszeichnungen__karte {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: var(--raum-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--raum-1);
  text-decoration: none;
  color: inherit;
}

.auszeichnungen__bild { width: 100%; max-width: 9.5rem; height: auto; }
.auszeichnungen__ort { font-weight: 700; color: var(--gruen-dunkel); }
.auszeichnungen__anzahl { color: var(--text-leise); font-size: var(--fs-klein); }
.auszeichnungen__link { margin-top: var(--raum-1); font-weight: 700; color: var(--gruen-dunkel); }

/* --------------------------------------------------------------------------
   16. Kontakt-Anriss
   -------------------------------------------------------------------------- */
.kontakt-anriss { padding-block: var(--raum-5); text-align: center; }

.kontakt-anriss__zeilen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--raum-2) var(--raum-4);
  margin-block: var(--raum-3);
  font-size: var(--fs-h3);
}

/* --------------------------------------------------------------------------
   17. Bildkopf — schmaler Seitenkopf der Unterseiten (kein Vollbild-Hero,
   den hat nur die Startseite)
   -------------------------------------------------------------------------- */
.bildkopf__bild {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}

@media (min-width: 900px) {
  .bildkopf__bild { aspect-ratio: 21 / 6; }
}

/* --------------------------------------------------------------------------
   18. Fließtext-Abschnitte — wiederverwendbar für alle Unterseiten
   -------------------------------------------------------------------------- */
.einleitung { padding-block: var(--raum-5) var(--raum-4); }
.abschnitt { padding-block: var(--raum-4); }

/* Begrenzt Fließtext auf die Messkolumne, ohne den Abschnitt selbst
   einzuengen (Bilder/Tabellen im selben Abschnitt bleiben container-breit). */
.text { max-width: var(--messkolumne); }
.text > * + * { margin-top: var(--raum-3); }

/* --------------------------------------------------------------------------
   19. Bildergalerie — 3 bis 6 Bilder, nutzt das vorhandene .raster
   -------------------------------------------------------------------------- */
.galerie-bild {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}

.text + .raster { margin-top: var(--raum-3); }

/* --------------------------------------------------------------------------
   20. Merkmale-Liste — kurze nummerierte Punkte (z. B. Pflegeturnus)
   -------------------------------------------------------------------------- */
.merkmale {
  list-style: none;
  display: grid;
  gap: var(--raum-3);
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .merkmale { grid-template-columns: repeat(2, 1fr); }
}

.merkmale__punkt {
  background: var(--flaeche);
  border-radius: var(--radius);
  padding: var(--raum-3);
}

.merkmale__titel { display: block; font-weight: 700; color: var(--gruen-dunkel); }
.merkmale__takt { display: block; color: var(--text-leise); font-size: var(--fs-klein); margin-top: 0.25rem; }

/* --------------------------------------------------------------------------
   21. Tabelle — kompakte Datentabellen (z. B. Pflanzenliste)
   -------------------------------------------------------------------------- */
.tabelle-wrap { overflow-x: auto; }

.tabelle { width: 100%; border-collapse: collapse; font-size: var(--fs-klein); }

.tabelle th,
.tabelle td {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--linie);
  vertical-align: top;
}

.tabelle th { color: var(--gruen-dunkel); font-weight: 700; }

/* --------------------------------------------------------------------------
   22. Bildunterschriften — für Figuren in Bildergalerien
   -------------------------------------------------------------------------- */
figure { margin: 0; }

figcaption {
  margin-top: var(--raum-1);
  font-weight: 700;
  color: var(--gruen-dunkel);
  text-align: center;
}

/* Für Galerieplätze ohne verfügbares Foto — hält das Raster gleichmäßig */
.galerie-platzhalter {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--flaeche);
  border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   23. Zeitstrahl — chronologische Meilensteine (Historie)
   -------------------------------------------------------------------------- */
.zeitstrahl {
  display: flex;
  flex-direction: column;
  gap: var(--raum-4);
  margin-top: var(--raum-3);
}

.zeitstrahl__eintrag {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: var(--raum-3);
}

.zeitstrahl__jahr {
  font-size: var(--fs-basis);
  font-weight: 700;
  color: var(--gruen-dunkel);
}

.zeitstrahl__bild {
  width: 100%;
  max-width: 22rem;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  margin-top: var(--raum-2);
}

/* --------------------------------------------------------------------------
   24. Beitragsbild — einzelnes Bild in Fließtext-Abschnitten (News)
   -------------------------------------------------------------------------- */
.beitragsbild {
  display: block;
  width: 100%;
  max-width: 32rem;
  height: auto;
  margin-inline: auto;
  border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   25. Galerie-Filter — ohne JS unsichtbar (hidden-Attribut in der Seite),
   JS blendet sie ein und schaltet die Bilder um. Ohne JS bleiben alle
   Bilder sichtbar.
   -------------------------------------------------------------------------- */
.galerie-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2);
  margin-top: var(--raum-3);
}

.galerie-filter__knopf {
  padding: 0.5rem 1rem;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--weiss);
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
}

.galerie-filter__knopf:hover { border-color: var(--gruen-dunkel); }

.galerie-filter__knopf[aria-pressed="true"] {
  background: var(--gruen-dunkel);
  color: var(--weiss);
  border-color: var(--gruen-dunkel);
}

.galerie-oeffner {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

/* --------------------------------------------------------------------------
   26. Lightbox — <dialog>, kein Overlay-Framework
   -------------------------------------------------------------------------- */
.lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 92vw;
  max-height: 92vh;
}

.lightbox::backdrop { background: rgba(0, 0, 0, 0.85); }

.lightbox__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--raum-2);
}

.lightbox__bild {
  display: block;
  max-width: 92vw;
  max-height: 78vh;
  width: auto;
  height: auto;
  border-radius: var(--radius);
}

.lightbox__unterschrift {
  color: var(--weiss);
  text-align: center;
  max-width: 60ch;
  font-size: var(--fs-klein);
}

.lightbox__schliessen,
.lightbox__zurueck,
.lightbox__vor {
  position: fixed;
  border: 0;
  background: rgba(255, 255, 255, 0.15);
  color: var(--weiss);
  cursor: pointer;
  border-radius: 50%;
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.5rem;
  line-height: 1;
}

.lightbox__schliessen:hover,
.lightbox__zurueck:hover,
.lightbox__vor:hover { background: rgba(255, 255, 255, 0.3); }

.lightbox__schliessen { top: var(--raum-3); right: var(--raum-3); }
.lightbox__zurueck { top: 50%; left: var(--raum-3); transform: translateY(-50%); }
.lightbox__vor { top: 50%; right: var(--raum-3); transform: translateY(-50%); }

/* --------------------------------------------------------------------------
   27. Auszeichnungen-Abschnitte (BUGA) — je Standort Medaillen + Galerie
   -------------------------------------------------------------------------- */
.buga-abschnitt + .buga-abschnitt { border-top: 1px solid var(--linie); }

.buga-abschnitt__bilanz {
  font-weight: 700;
  color: var(--gruen-dunkel);
}