/* ── Custom Properties ───────────────────────────────────── */
/* PicoCSS uses [data-theme=light] with specificity (0,1,0) and :root:not([data-theme=dark])
   with (0,2,0), both higher than plain :root (0,1,0). Mirror their selectors to win. */
:root,
[data-theme=light],
:root:not([data-theme=dark]) {
  --pico-primary:            #1B4B2E;
  --pico-primary-background: #1B4B2E;
  --pico-primary-border:     #1B4B2E;
  --pico-primary-hover:      #143d23;
  --pico-primary-hover-background: #143d23;
  --pico-primary-focus:      rgba(27, 75, 46, 0.25);
  --pico-primary-inverse:    #fff;
  --pico-background-color:   #FAFAF8;
  --pico-color:              #1a1a1a;
  --pico-font-size:          16px;
  --gj-red:                  #B8272C;
  --gj-green:                #1B4B2E;
  --gj-blue:                 #1F5FBF;
  --gj-header-height:        72px;
  --gj-border:               #e0e0d8;
  --gj-placeholder-gradient: linear-gradient(135deg, var(--gj-green) 0%, #2d6e48 100%);
  --gj-shadow-hover:         0 4px 16px rgba(0,0,0,.1);
  --gj-shadow-lift:          0 3px 12px rgba(27,75,46,.13);
  --gj-border-accent:        #dde8e2;
  --gj-border-hover:         #b0ccba;
}

/* ── PicoCSS resets ──────────────────────────────────────── */
article {
  padding: 0; background: none; box-shadow: none;
  border: none; border-radius: 0; margin-bottom: 0;
}

/* ── Base ────────────────────────────────────────────────── */
* { box-sizing: border-box; }
img { max-width: 100%; height: auto; display: block; }
picture { display: block; }

/* Sticky footer */
body { display: flex; flex-direction: column; min-height: 100vh; }
main.container { flex: 1; }

/* ── Site Header ─────────────────────────────────────────── */
.site-header {
  background: var(--gj-green);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  padding: 0; /* override PicoCSS header padding-block */
}
.site-header--hero {
  position: relative;
  z-index: auto; /* override z-index:100 from .site-header — prevents stacking context that traps position:fixed nav-menu */
  height: min(56vw, 52vh);
  min-height: min(220px, 56vw);
  background-color: var(--gj-green); /* Fallback wenn Bild noch lädt */
  display: flex;
  flex-direction: column;
  box-shadow: none;
}
/* Hero-Hintergrundbild als <picture>-Element für AVIF/WebP/srcset-Support */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}
.site-header--hero::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(27,75,46,.35);
  pointer-events: none;
  z-index: 1; /* über hero-bg img */
}
.site-header--hero .hero-content { position: relative; z-index: 2; }
/* site-nav braucht einen höheren Stacking-Context als hero-content: das
   mobile .nav-menu ist position:fixed, aber als Kind von .site-nav in dessen
   Stacking-Context gefangen. Bei gleichem z-index würde das später im DOM
   stehende hero-content das aufgeklappte Menü überdecken. */
.site-header--hero .site-nav { position: relative; z-index: 3; }

/* ── Navigation wrapper ──────────────────────────────────── */
.site-nav {
  display: flex;
  align-items: center;
  height: var(--gj-header-height);
  padding-inline: 1rem;
  max-width: 1200px;
  margin-inline: auto;
  /* reset PicoCSS nav styles */
  gap: 0;
  justify-content: flex-start;
}

/* Site title — visible on mobile between logo and hamburger, hidden on desktop */
.site-title {
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  margin-left: .75rem;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 768px) {
  .site-title { display: none; }
}
.site-header--hero .site-title { display: none; }

/* Logo badge */
.site-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  background: #fff;
  border-radius: 8px;
  padding: 4px 4px;
  height: 60px;
}
.site-logo img { height: 52px; width: auto; }
.site-logo__text {
  color: var(--gj-green);
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Hamburger */
.nav-toggle {
  margin-left: auto;
  background: none;
  border: 2px solid rgba(255,255,255,.4);
  border-radius: 6px;
  cursor: pointer;
  padding: .35rem .45rem;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .22s, opacity .22s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile nav menu ─────────────────────────────────────── */
/* !important needed: PicoCSS nav ul has higher specificity (0,1,1) than .nav-menu (0,1,0) */
.nav-menu {
  display: none !important;
  list-style: none;
  margin: 0;
  padding: .75rem 1rem 1.25rem;
  position: fixed;
  top: var(--gj-header-height);
  left: 0;
  right: 0;
  background: #143d23;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  max-height: calc(100vh - var(--gj-header-height));
  z-index: 999;
}
.nav-menu.is-open { display: block !important; }

.nav-item {
  display: block;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.nav-item:last-child { border-bottom: none; }
.nav-item > a {
  display: block;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: .7rem .25rem;
  font-size: 1rem;
}
.nav-item > a:hover,
.nav-item--active > a { color: #f0d080; }

.nav-dropdown {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0 0 .5rem .75rem;
}
.nav-dropdown li { display: block; }
.nav-dropdown a {
  display: block;
  color: rgba(255,255,255,.8);
  text-decoration: none;
  font-size: .9rem;
  padding: .4rem .25rem;
}
.nav-dropdown a:hover { color: #fff; }

/* ── Desktop nav (≥768px) ────────────────────────────────── */
@media (min-width: 768px) {
  .nav-toggle { display: none !important; }

  .nav-menu {
    display: flex !important;
    position: static;
    background: none;
    padding: 0;
    padding-left: 1.5rem;
    max-height: none;
    overflow: visible;
    gap: .1rem;
    align-items: center;
    flex-wrap: nowrap;
  }

  .nav-item {
    border: none;
    position: relative;
  }
  .nav-item > a {
    padding: .4rem .75rem;
    border-radius: 4px;
    white-space: nowrap;
    font-size: .9rem;
  }
  .nav-item > a:hover { background: rgba(255,255,255,.1); }
  .nav-item--active > a { background: rgba(255,255,255,.15); color: #f0d080; }

  .nav-dropdown {
    display: none;
    position: absolute;
    top: 100%;        /* kein Gap — Maus verliert Verbindung nicht mehr */
    left: 0;
    background: #143d23;
    min-width: max-content;
    padding: .5rem 0 .4rem; /* padding-top als unsichtbare Brücke zum Nav-Item */
    border-radius: 0 0 6px 6px;
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
  }
  .nav-dropdown li { display: block; }
  .nav-dropdown a {
    padding: .45rem 1rem;
    white-space: nowrap;
    font-size: .9rem;
  }
  .nav-dropdown a:hover { background: rgba(255,255,255,.08); color: #fff; }

  .nav-item:hover .nav-dropdown,
  .nav-item:has(:focus-visible) .nav-dropdown { display: block; }
}

/* ── Header-Suche ────────────────────────────────────────── */
/* Screenreader-only Utility (auch von der Suchseite genutzt). */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Progressive Enhancement: Form ist immer da. Ohne JS klappt das Feld nicht
   auf – der Lupen-Submit führt dann mit leerem q auf /suche (Seitenformular). */
.site-search {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-width: 0;     /* darf unter Inhalts-Mindestbreite schrumpfen → drängt im
                       offenen Zustand den Hamburger nicht aus der Leiste */
  margin: 0;
}
/* Spezifität muss PicoCSS' input:not(…)[type=search] (0,2,1) erreichen – daher
   das Element `input` mit drin (sonst gewinnen Picos width:100%, Lupen-Icon und
   linke Einrückung). Gleiche Spezifität, aber theme.css lädt nach pico → gewinnt. */
.site-search input.site-search__input {
  width: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  margin: 0;
  height: 40px;
  border-radius: 6px;
  background-color: #fff;
  background-image: none;     /* entfernt Picos Lupen-Icon im Suchfeld ([type=search]) */
  color: var(--gj-color, #1a1a1a);
  font-size: 16px;            /* ≥16px: verhindert iOS-Auto-Zoom */
  appearance: none;           /* entfernt die UA-Such-Dekoration (sonst Mindestbreite) */
  -webkit-appearance: none;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  flex: 0 0 auto;             /* kein Mitwachsen im eingeklappten Zustand */
  transition: width .25s ease, opacity .2s ease, padding .25s ease;
}
.site-search .site-search__input::placeholder { color: #6b6b66; }
.site-search.site-search--open .site-search__input {
  width: 11rem;
  padding: 0 .6rem;
  margin-right: .35rem;
  opacity: 1;
  pointer-events: auto;
}
/* Höhere Spezifität nötig: PicoCSS setzt Submit-Buttons sonst auf volle Breite. */
.site-search .site-search__btn {
  flex: 0 0 44px;            /* feste Breite, wächst/schrumpft nie */
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  background: none;
  color: #fff;
  border: 2px solid rgba(255,255,255,.4);
  border-radius: 6px;
  cursor: pointer;
}
.site-search .site-search__btn:hover { background: rgba(255,255,255,.12); }

/* Mobile/Tablet (< 768px): Lupe sitzt neben dem Hamburger – etwas Luft dazwischen.
   Die Lupe selbst per margin-left:auto nach rechts schieben (nicht über den Titel-
   Füller, den der Hero-Header der Homepage ausblendet); dafür das konkurrierende
   auto am Hamburger hier entfernen, sonst entstünde eine Lücke zwischen beiden. */
@media (max-width: 767px) {
  .site-search { margin-left: auto; margin-right: .5rem; }
  .nav-toggle { margin-left: 0; }
}
/* Nur sehr schmal (Handy, < 600px): aufgeklappt füllt das Feld die ganze Leiste,
   der Titel weicht (das ist hier OK), und es bleibt etwas Abstand zum Vereins-Logo. */
@media (max-width: 599px) {
  .site-nav:has(.site-search--open) .site-title { display: none; }
  .site-search.site-search--open { flex: 1; margin-left: .5rem; }
  .site-search.site-search--open input.site-search__input { width: auto; flex: 1; }
}
/* Ab 600px ist genug Platz: aufgeklapptes Feld bleibt fix (11rem) und überdeckt
   den Titel „Grüne Jäger" nicht mehr (greift unverändert die Basis-Open-Regel). */
/* Desktop (≥ 768px): Menü bleibt links beim Logo; nur die Lupe wird per
   margin-left:auto an den rechten Rand geschoben (dorthin, wo auf Mobile der
   Hamburger sitzt). order:99 macht die Suche zum letzten Flex-Element. */
@media (min-width: 768px) {
  .site-search { order: 99; margin-left: auto; }
  /* Bei sichtbarem Menü ist rechts mehr Platz → Feld 30px breiter. */
  .site-search.site-search--open input.site-search__input { width: calc(11rem + 30px); }
}

/* ── Suchseite (/suche) ──────────────────────────────────── */
.search-form {
  display: flex;
  gap: .5rem;
  margin-top: 1.1rem;
  max-width: 32rem;
}
.search-form input[type="search"] {
  flex: 1 1 auto;     /* Feld nutzt den Platz; (0,2,1) schlägt Picos [role=search]-Regel */
  margin: 0;
  font-size: 16px;
}
/* flex:0 0 auto bremst Picos flex:1 1 auto (sonst wächst der Button mit);
   schmaleres Innenpolster statt Picos 2rem → kompakter „Suchen"-Button. */
.search-form button { margin: 0; flex: 0 0 auto; width: auto; padding-inline: 1.4rem; }
.search-count { color: #6b6b66; margin-top: 1.25rem; }

/* ── Hero Zoom Button ────────────────────────────────────── */
.hero-zoom-btn {
  position: absolute;
  bottom: .75rem;
  right: .75rem;
  z-index: 2;
  background: rgba(0,0,0,.35);
  color: #fff;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 6px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  opacity: 0.5;
  transition: opacity .25s, background .15s, border-color .15s;
}
.hero-zoom-btn:hover {
  opacity: 1;
  background: rgba(0,0,0,.55);
  border-color: rgba(255,255,255,.7);
}

/* ── Hero Lightbox ───────────────────────────────────────── */
.hero-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: #000;
  cursor: zoom-out;
  align-items: center;
  justify-content: center;
}
.hero-lightbox.is-open {
  display: flex;
  animation: lightbox-in .2s ease;
}
@keyframes lightbox-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.hero-lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: default;
  user-select: none;
}
.hero-lightbox__close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  background: rgba(0,0,0,.5);
  color: #fff;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 8px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  z-index: 1;
  transition: background .15s;
}
.hero-lightbox__close:hover { background: rgba(0,0,0,.75); }

/* ── Hero Content ────────────────────────────────────────── */
.hero-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 2.5rem;
  padding-inline: 1rem;
  max-width: 1200px;
  margin-inline: auto;
  width: 100%;
}
.hero-title {
  color: #fff;
  font-size: clamp(2rem, 6vw, 3.5rem);
  margin: 0 0 .3rem;
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.hero-sub {
  color: rgba(255,255,255,.88);
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  margin: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}

/* ── Main ────────────────────────────────────────────────── */
main.container {
  max-width: 1200px;
  margin-inline: auto;
  padding: 2rem 1rem 3rem;
}

/* ── Page Content ────────────────────────────────────────── */
.page-content { max-width: 820px; }

/* ── Article Grid ────────────────────────────────────────── */
.articles-grid, .card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
@media (min-width: 500px) { .articles-grid, .card-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 900px) { .articles-grid, .card-grid { grid-template-columns: repeat(3,1fr); } }

/* ── Jahres-Archiv ───────────────────────────────────────── */
.beitraege-archiv { margin-top: 3rem; }
.beitraege-archiv h2 { margin-bottom: 1rem; }
.year-archive {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
}
.year-archive li { list-style: none; padding-left: 0; }
.year-archive li::marker { content: none; }
@media (min-width: 600px) { .year-archive { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 960px) { .year-archive { grid-template-columns: repeat(3,1fr); } }
.year-archive a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  padding: .75rem 1rem;
  border: 1px solid var(--gj-border);
  border-radius: 8px;
  background: #fff;
  text-decoration: none;
  color: var(--gj-green);
  transition: box-shadow .2s, border-color .2s;
}
.year-archive a:hover { box-shadow: var(--gj-shadow-hover); border-color: var(--gj-border-hover); }
.year-archive__year { font-size: 1.25rem; font-weight: 700; }
.year-archive__count { color: #666; font-size: .9rem; }

/* Gemeinsames Kachel-Grundgerüst für Beitrags- und Termin-Karten
   (Bild oben + Textkörper). Komponenten-Klassen ergänzen nur Abweichendes. */
.card {
  position: relative;
  border: 1px solid var(--gj-border);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s;
}
.card:hover { box-shadow: var(--gj-shadow-hover); }
/* Bild-/Platzhalter-/Textkörper-Bausteine des .card-Grundgerüsts.
   Geteilt von .article-card und .page-card (.termin-card hat einen eigenen
   Visual-Bereich mit Datumsbadge, teilt aber die Bildhöhe). Konvention #8:
   nicht in Komponenten duplizieren.
   Flache 2∶1-Kachelbilder auf allen Geräten; object-position: top hält beim
   Beschneiden den oberen Bildteil (Köpfe). */
.card__media img { width: 100%; aspect-ratio: 2/1; object-fit: cover; object-position: top; display: block; }
.card__placeholder {
  width: 100%;
  aspect-ratio: 2/1;
  background: var(--gj-placeholder-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
}
.termin-card__visual { aspect-ratio: 2/1; }
.card__body { padding: 1rem; flex: 1; display: flex; flex-direction: column; }
.card__body h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
.card__body h3 a { color: inherit; text-decoration: none; }
.card__body h3 a:hover { color: var(--gj-green); }
/* Stretched link: macht die ganze Kachel klickbar (führt zum Artikel/zur Seite),
   wie bei der Termin-Kachel. Greift auf .article-card und .page-card. */
.card__body h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}
.card__body .card-text { flex: 1; }

/* Beitrags-Karte: nur das Abweichende (Meta-Zeile mit Badge + Datum). */
.article-card__meta { display: flex; gap: .75rem; align-items: center; margin-bottom: .5rem; font-size: .85rem; color: #666; }

/* ── Geteilte Basis-Klassen ──────────────────────────────── */
/* Wiederverwendbare Bausteine, die mehrere Komponenten teilen (siehe
   CLAUDE.md Konvention #8). Werden direkt im HTML als Klasse gesetzt; muss
   eine einzelne Komponente abweichen, ergänzt sie die Basis-Klasse um eine
   zweite, komponentenspezifische BEM-Klasse (z. B. .article-card .card-text).
   Diese Werte NICHT in Komponenten-Klassen duplizieren. */

/* Kurzbeschreibung / Teaser auf Kacheln (Beiträge + Termine):
   einheitliche Schrift/Farbe + Begrenzung auf 3 Zeilen (gleichmäßige Kachelhöhen). */
.card-text {
  font-size: .9rem;
  color: #555;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Kleines Großbuchstaben-Label über dem Namen (Kontakt- + Vorstand-Karten) */
.card-role {
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gj-green);
  margin: 0 0 .25rem;
}

/* Kleines Icon in einer Detail-/Meta-Zeile (Termin, Kontakt, Vorstand) */
.detail-icon {
  flex-shrink: 0;
  opacity: .55;
  color: var(--gj-green);
}

/* Großes, gedämpftes Icon im Bild-Platzhalter (leere Kachelbilder) */
.placeholder-icon {
  width: 38%;
  height: auto;
  color: #fff;
  opacity: .3;
}

/* Status-Markierung auf Kacheln; Basis ohne Farbe, die Variante setzt den
   Hintergrund. Generisch gehalten, damit auch Beitrags-Kacheln sie nutzen können. */
.status-badge {
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  padding: .15rem .45rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}
.status-badge--abgesagt  { background: var(--gj-red); }
.status-badge--vergangen { background: #8a8a82; }

/* ── Termine ─────────────────────────────────────────────── */
.termine-feed { margin-bottom: 2.5rem; }

.termine-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
@media (min-width: 500px) { .termine-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .termine-grid { grid-template-columns: repeat(3, 1fr); } }

/* Card */
/* nur das Abweichende; Grundgerüst kommt aus .card */
.termin-card { position: relative; }

/* Visual: image or placeholder */
.termin-card__visual {
  position: relative;
  /* Bildhöhe (16∶9 mobil / 2∶1 Desktop) wird zentral bei den geteilten
     Kachel-Bausteinen gesetzt, damit der Desktop-Override sicher greift. */
  overflow: hidden;
  flex-shrink: 0;
}
.termin-card__visual img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}
.termin-card__placeholder {
  width: 100%; height: 100%;
  background: var(--gj-placeholder-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Date badge overlaid on visual */
.termin-card__datebadge {
  position: absolute;
  bottom: .6rem;
  right: .6rem;
  background: rgba(0,0,0,.62);
  color: #fff;
  border-radius: 8px;
  padding: .45rem .85rem .4rem;
  text-align: center;
  line-height: 1.15;
  backdrop-filter: blur(4px);
}
.termin-card__datebadge-day {
  display: block;
  font-size: 1.65rem;
  font-weight: 700;
}
.termin-card__datebadge-month {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .85;
}
.termin-card__datebadge-year {
  display: block;
  font-size: .9rem;
  opacity: .65;
}

/* Card body */
.termin-card__body {
  padding: .75rem .9rem .85rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.termin-card__meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .35rem;
}
.termin-card__titel {
  margin: 0 0 .2rem;
  font-size: 1.05rem;
}
.termin-card__titel a { color: inherit; text-decoration: none; }
.termin-card__titel a:hover { color: var(--gj-green); }
/* Stretched link: macht die ganze Kachel klickbar (führt zum Artikel) */
.termin-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* Maps- und ICS-Link liegen über der Overlay-Fläche und bleiben eigenständig klickbar */
.termin-card__maps, .termin-card__ical { position: relative; z-index: 1; }
.termin-card__details {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: .15rem .75rem;
}
.termin-card__detail {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .82rem;
  color: #666;
}
.termin-card__beschreibung {
  margin: .35rem 0 0;
}
.termin-card__link {
  display: inline-block;
}

/* Abgesagt */
.termin-card--abgesagt { background: #fff8f8; }
.termin-card--abgesagt .termin-card__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(184,39,44,.35);
}
.termin-card--abgesagt .termin-card__titel {
  text-decoration: line-through;
  color: #999;
}
.termin-card__abgesagt-info {
  font-size: .85rem;
  color: var(--gj-red);
  font-weight: 500;
  margin: .4rem 0 0;
  padding: .35rem .55rem;
  background: rgba(184,39,44,.07);
  border-radius: 4px;
}

/* Vergangen (Archiv) — gedämpft/neutral, bewusst nicht alarmierend wie „Abgesagt" */
.termin-card--vergangen { background: #f6f6f4; }
.termin-card--vergangen .termin-card__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(120,120,115,.28);
}
.termin-card--vergangen .termin-card__visual img { filter: grayscale(.4); }
.termin-card--vergangen .termin-card__titel a { color: #555; }

/* Archiv-Link unten auf den Termine-Übersichten */
/* Aktionsleiste am Ende der Termin-Übersicht (Abonnieren + Archiv) */
.termine-aktionen {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
}
.termine-aktion {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  padding: .6rem 1.2rem;
  background: #fff;
  border: 1px solid var(--gj-border-accent);
  border-radius: 6px;
  color: var(--gj-green);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  transition: box-shadow .16s, border-color .16s, transform .16s;
}
.termine-aktion:hover {
  box-shadow: var(--gj-shadow-lift);
  border-color: var(--gj-border-hover);
  transform: translateY(-1px);
}
.termine-aktion svg { opacity: .65; flex-shrink: 0; }
/* Abonnieren = Primär-Aktion: gefüllt, etwas präsenter als der Archiv-Link */
.termine-aktion--primary {
  background: var(--gj-green);
  border-color: var(--gj-green);
  color: #fff;
}
.termine-aktion--primary:hover { border-color: var(--gj-green); }
.termine-aktion--primary svg { opacity: .9; }

/* Anleitungsseite „Termine abonnieren" */
.abo-intro { font-size: 1.05rem; }

/* Auswahl, welcher Kalender abonniert wird */
.abo-auswahl {
  border: 1px solid var(--gj-border-accent);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  margin: 1.75rem 0 1rem;
}
.abo-auswahl legend {
  font-weight: 600;
  padding: 0 .4rem;
}
.abo-option {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .65rem .5rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color .12s;
}
.abo-option:hover { background-color: rgba(27,75,46,.05); }
.abo-option input {
  width: 20px;
  height: 20px;
  min-height: unset;
  margin-top: .15rem;
  flex-shrink: 0;
}
.abo-option__text { display: flex; flex-direction: column; }
.abo-option__label { font-weight: 600; }
.abo-option__hint { font-size: .9rem; color: #555; }

.abo-tipp {
  font-size: .9rem;
  color: #555;
  margin: 0 0 1.5rem;
}

.abo-cta { margin: 1.5rem 0; }
.abo-button {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  padding: .85rem 1.4rem;
  background: var(--gj-green);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  transition: box-shadow .16s, transform .16s;
}
.abo-button:hover { box-shadow: var(--gj-shadow-lift); transform: translateY(-1px); }
.abo-hint { margin-top: 2rem; font-size: .95rem; color: #555; }
.abo-url { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.abo-url code {
  flex: 1 1 12rem;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: .5rem .7rem;
  background: #f0f0ec;
  border-radius: 6px;
  font-size: .9rem;
}
.abo-copy { flex: 0 0 auto; width: auto; min-height: 44px; padding: .5rem 1rem; font-size: .9rem; }
.abo-zurueck { margin-top: 2.5rem; }

.termine-feed__mehr,
.articles-feed__mehr {
  margin-top: 1rem;
  text-align: right;
}
.termine-feed__mehr a,
.articles-feed__mehr a {
  color: var(--gj-green);
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
}
.termine-feed__mehr a:hover,
.articles-feed__mehr a:hover { text-decoration: underline; }

.termin-leer { color: #666; font-size: .95rem; margin-top: 1rem; }

/* ── Badge ───────────────────────────────────────────────── */
.badge {
  background: var(--gj-green); color: #fff;
  font-size: .75rem; padding: .15rem .5rem;
  border-radius: 99px; white-space: nowrap;
}


/* ── Hero images ─────────────────────────────────────────── */
.article-hero {
  position: relative;
  margin-bottom: 1.5rem;
  line-height: 0;
}
.article-hero img {
  width: 100%; max-height: 500px; object-fit: cover;
  border-radius: 8px; display: block;
}

.register-photo-wrap {
  position: relative;
  margin-bottom: 1.5rem;
  line-height: 0;
}
.register-photo-wrap img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* ── Article Single ──────────────────────────────────────── */
.article-single { max-width: 780px; }
.article-single__meta { color: #666; font-size: .9rem; margin-bottom: .25rem; }
.termin-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; }
.termin-meta__detail { display: inline-flex; align-items: center; gap: .3rem; }
.article-single__footer {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
/* ── Share ───────────────────────────────────────────────── */
.share-wrap { position: relative; }

/* Mini-Pill: kleiner umrandeter Aktions-Button/-Link (grau → grün auf Hover).
   Geteilt von „Teilen"-Button (.share-btn) und iCal-Link (.ical-link); enthält
   die Resets beider Element-Typen (background/cursor + text-decoration). */
.pill-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .85rem;
  color: #666;
  background: none;
  border: 1px solid #d0d0c8;
  border-radius: 5px;
  padding: .3rem .65rem;
  cursor: pointer;
  text-decoration: none;
  transition: color .15s, border-color .15s;
}
.pill-link:hover { color: var(--gj-green); border-color: var(--gj-green); }

.share-panel {
  display: none;
  position: absolute;
  bottom: calc(100% + .5rem);
  left: 0;
  background: #fff;
  border: 1px solid var(--gj-border);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,.12);
  padding: .4rem;
  min-width: 170px;
  z-index: 200;
  flex-direction: column;
  gap: .1rem;
}
.share-panel.is-open { display: flex; }
.share-panel a,
.share-panel button {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .7rem;
  font-size: .85rem;
  color: #333;
  text-decoration: none;
  background: none;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background .12s;
}
.share-panel a:hover,
.share-panel button:hover { background: #f3f3f0; color: var(--gj-green); }
.share-panel svg { flex-shrink: 0; opacity: .55; }

.parent-link { display: inline-block; margin-top: 1rem; color: var(--gj-green); font-weight: 500; text-decoration: none; }
.article-single__footer .parent-link { margin-top: 0; }
.parent-link:hover { text-decoration: underline; }
.maps-link, .ical-inline { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }
.maps-link:hover, .ical-inline:hover { color: var(--gj-green); }

/* ── Orchester-Seite ─────────────────────────────────────── */
.orchester-history-cta {
  margin: 2.5rem 0 .5rem;
  text-align: center;
}

/* ── Rechtstexte (Impressum & Datenschutz) ───────────────── */
.impressum-page h2,
.datenschutz-page h2 { font-size: 1.1rem; margin-top: 2rem; color: var(--gj-green); }
.impressum-rolle { color: var(--pico-muted-color, #6b6b66); font-weight: normal; }

/* ── Gallery ─────────────────────────────────────────────── */
.gallery__title {
  margin-top: 2rem; padding-top: 1.25rem;
  border-top: 1px solid var(--pico-muted-border-color, #e3e3df);
  font-size: 1.1rem; color: var(--gj-green);
}
.gallery {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: .75rem; margin-top: 1.5rem;
}
@media (min-width: 600px) { .gallery { grid-template-columns: repeat(3,1fr); } }
.gallery__item {
  display: block; padding: 0; margin: 0; border: 0; background: none;
  border-radius: 6px; overflow: hidden; cursor: zoom-in;
}
.gallery__item:focus-visible { outline: 2px solid var(--gj-green); outline-offset: 2px; }
.gallery img { border-radius: 6px; aspect-ratio: 3/2; object-fit: cover; width: 100%; display: block; }

/* ── Galerie single-photo override ──────────────────────── */
.gallery--single { display: block; max-width: 820px; margin-inline: auto; }
.gallery--single .gallery__item { display: block; width: 100%; border-radius: 8px; overflow: hidden; }
.gallery--single .gallery img { aspect-ratio: 4/3; border-radius: 8px; }

/* ── Kapellenbilder-Übersicht ────────────────────────────── */
.jahresbild-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  list-style: none; padding: 0; margin: 1.5rem 0 0;
}
@media (min-width: 500px) { .jahresbild-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .jahresbild-grid { grid-template-columns: repeat(4, 1fr); } }

.jahresbild-card {
  border-radius: 8px; overflow: hidden; position: relative;
  background: #333;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
  transition: box-shadow .2s, transform .15s;
}
.jahresbild-card:hover { box-shadow: var(--gj-shadow-hover); transform: translateY(-2px); }
.jahresbild-card a { display: block; text-decoration: none; color: #fff; position: relative; }
.jahresbild-card picture { display: block; }
.jahresbild-card picture img,
.jahresbild-card img {
  aspect-ratio: 4 / 3; width: 100%; display: block; object-fit: cover;
  transition: opacity .2s;
}
.jahresbild-card:hover img { opacity: .9; }
.jahresbild-card__placeholder {
  aspect-ratio: 4 / 3;
  background: var(--gj-placeholder-gradient);
  display: flex; align-items: center; justify-content: center;
}
.jahresbild-card__label {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.72));
  padding: 1.5rem .75rem .6rem;
}
.jahresbild-card__year {
  display: block; font-size: 1.35rem; font-weight: 700; line-height: 1;
}
.jahresbild-card__text {
  display: block; font-size: .78rem; margin-top: .25rem; opacity: .85; line-height: 1.4;
}

/* ── Galerie-Lightbox (Navigation) ───────────────────────── */
.gallery-lightbox img { cursor: pointer; } /* Klick aufs Bild = nächstes */
.gallery-lightbox__nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,.5); color: #fff; border: 1px solid rgba(255,255,255,.4);
  border-radius: 8px; width: 48px; height: 48px; font-size: 1.8rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  padding: 0; z-index: 1; transition: background .15s;
}
.gallery-lightbox__nav:hover { background: rgba(0,0,0,.75); }
.gallery-lightbox__prev { left: 1rem; }
.gallery-lightbox__next { right: 1rem; }

/* ── Form ────────────────────────────────────────────────── */
.form-page { max-width: 680px; }
.form-row { display: grid; gap: 1rem; }
@media (min-width: 500px) { .form-row { grid-template-columns: 1fr 1fr; } }
.form-group { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .75rem; }
.form-group label { font-weight: 500; font-size: .95rem; }
.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group textarea,
.form-group select {
  width: 100%; font-size: 16px;
  padding: .6rem .8rem;
  border: 1px solid #ccc; border-radius: 6px;
  min-height: 44px; background: #fff; color: #1a1a1a;
}
.form-group textarea { min-height: 120px; resize: vertical; }
.form-group--narrow { max-width: 120px; }
.btn-submit {
  background: var(--gj-green); color: #fff;
  border: none; border-radius: 6px;
  padding: .75rem 2rem; font-size: 1rem; font-weight: 600;
  cursor: pointer; min-height: 48px; margin-top: .5rem;
  transition: background .2s;
}
.btn-submit:hover { background: var(--pico-primary-hover); }
small.error { color: var(--gj-red); font-size: .85rem; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-group--date input { max-width: 200px; }
.field-hint { font-size: .8rem; color: #888; font-weight: 400; }
.form-required-note { font-size: .85rem; color: #888; margin-top: .5rem; }

/* ── Mitgliedsantrag fieldset ────────────────────────────── */
.form-fieldset { border: 1px solid var(--gj-border); border-radius: 8px; padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; }
.form-fieldset legend { font-weight: 700; font-size: 1rem; padding: 0 .4rem; color: var(--gj-green); }

/* Tarif-Karten */
.tarif-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-top: .5rem; }
.tarif-card {
  display: flex; align-items: flex-start; gap: .75rem;
  border: 2px solid #ddd; border-radius: 8px; padding: .9rem 1rem;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.tarif-card:has(input:checked),
.tarif-card--active { border-color: var(--gj-green); background: rgba(27,75,46,.05); }
.tarif-card input[type="radio"] { width: 18px; height: 18px; min-height: unset; flex-shrink: 0; margin-top: 3px; }
.tarif-card__body { display: flex; flex-direction: column; gap: .15rem; }
.tarif-price { font-size: .95rem; color: var(--gj-green); font-weight: 600; }
.tarif-hint { font-size: .8rem; color: #666; }

/* Einzugsermächtigung Checkbox */
.checkbox-wrap {
  display: flex; align-items: flex-start; gap: .75rem;
  border: 2px solid #ddd; border-radius: 8px; padding: .75rem 1rem;
  cursor: pointer; transition: border-color .15s; margin-bottom: .25rem;
}
.checkbox-wrap:has(input:checked) { border-color: var(--gj-green); }
.checkbox-wrap input[type="checkbox"] { width: 20px; height: 20px; min-height: unset; flex-shrink: 0; margin-top: 2px; }
.checkbox-wrap span { font-size: .95rem; line-height: 1.4; }

/* IBAN-Feld */
.iban-input { font-family: monospace; letter-spacing: .04em; }

/* Datenschutz-Box */
.legal-box {
  background: #f3f3f0; border-left: 4px solid var(--gj-green);
  border-radius: 4px; padding: 1rem 1.25rem; margin-bottom: 1.5rem;
  font-size: .875rem; color: #444;
}
.legal-box strong { display: block; margin-bottom: .5rem; color: #1a1a1a; font-size: .9rem; }
.legal-box p { margin: 0 0 .5rem; }
.legal-box p:last-child { margin-bottom: 0; }
.legal-note { font-size: .8rem; color: #666; margin-top: .75rem; font-style: italic; }

/* ── Alerts ──────────────────────────────────────────────── */
/* Linker Akzent-Balken (4px) für alle Alerts; Farbe je Variante.
   Varianten setzen border-color (nicht den border-Shorthand), damit die
   4px-Kante aus .alert erhalten bleibt. */
.alert {
  padding: 1rem 1.25rem;
  border-radius: 6px;
  margin-bottom: 1.5rem;
  border: 1px solid;
  border-left-width: 4px;
}
.alert--success   { background: #d4edda; border-color: #c3e6cb; border-left-color: #2f8a44;     color: #155724; }
.alert--error     { background: #f8d7da; border-color: #f5c6cb; border-left-color: var(--gj-red); color: #721c24; }
.alert--vergangen { background: #f3f3f0; border-color: var(--gj-border); border-left-color: #b0b0a8;     color: #555; }

/* ── Footer ──────────────────────────────────────────────── */
.site-footer {
  background: var(--gj-green);
  color: rgba(255,255,255,.85);
  padding: 0.0rem 0 0.0rem;
  margin-top: 0rem;
}
.site-footer .container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.footer-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; flex-direction: row; gap: .25rem 1.25rem;
  align-items: center;
}
.footer-nav a { color: rgba(255,255,255,.85); text-decoration: none; font-size: .9rem; }
.footer-nav a:hover { color: #fff; text-decoration: underline; }

/* ── Kontakt ─────────────────────────────────────────────── */
.kontakt-form-section { margin-top: 1rem; }
.kontakt-form-section h2 { margin-bottom: 1.25rem; }

/* ── Sponsoren-Seite ─────────────────────────────────────── */
/* Sponsoring-Möglichkeiten als Karten (Icon + Titel + Text) */
.sponsor-options {
  display: grid;
  /* Mobile: immer einspaltig (untereinander). */
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 2rem 0;
}
/* Ab Tablet/Desktop selbst-balancierend: 3 Karten sitzen im schmalen Container
   (820px) in einer Reihe und reflowen bei mehr/weniger Möglichkeiten. */
@media (min-width: 768px) {
  .sponsor-options { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
}
.sponsor-option {
  border: 1px solid var(--gj-border);
  border-radius: 10px;
  padding: 1.5rem;
  background: #fff;
}
.sponsor-option__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: rgba(27, 75, 46, .08);
  color: var(--gj-green);
  margin-bottom: .85rem;
}
.sponsor-option__icon svg { width: 26px; height: 26px; }
.sponsor-option h3 { margin: 0 0 .4rem; color: var(--gj-green); }
.sponsor-option { display: flex; flex-direction: column; }
.sponsor-option p { margin: 0; }
/* Verlinkte Möglichkeit-Kachel: ganze Kachel klickbar, mit Hover + „Mehr erfahren". */
a.sponsor-option {
  color: inherit;
  text-decoration: none;
  transition: box-shadow .16s, border-color .16s, transform .16s;
}
a.sponsor-option:hover {
  box-shadow: var(--gj-shadow-hover);
  border-color: var(--gj-border-hover);
  transform: translateY(-2px);
}
.sponsor-option__more {
  margin-top: auto;
  padding-top: .9rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  color: var(--gj-green);
}
.sponsor-option__more svg { transition: transform .16s; }
a.sponsor-option:hover .sponsor-option__more svg { transform: translateX(3px); }

/* Noten-Sponsoring: Abschnitte */
.noten-form-section { margin-top: 2rem; }
.noten-form-section h2,
.sponsoren-ansprechpartner h2 { margin-bottom: 1.25rem; }
.sponsoren-ansprechpartner { margin-top: 2.5rem; }

/* Noten-Sponsoring: Stufen-Tabelle */
.stufen-hinweis {
  font-size: .95rem;
  margin-bottom: .75rem;
  color: #444;
}
.stufen-tabelle-wrap {
  overflow-x: auto;
  margin: 0 0 2rem;
  -webkit-overflow-scrolling: touch;
}
.stufen-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
  table-layout: fixed;
}
.stufen-tabelle th,
.stufen-tabelle td {
  padding: .6rem .85rem;
  text-align: center;
  border: 1px solid #ddd;
  word-break: break-word;
  hyphens: auto;
}
.stufen-tabelle th:first-child,
.stufen-tabelle td:first-child {
  width: 36%;
  text-align: left;
  font-weight: 500;
  background: #f5f5f3;
}
@media (max-width: 480px) {
  .stufen-tabelle th,
  .stufen-tabelle td {
    padding: .45rem .5rem;
    font-size: .82rem;
  }
}
.stufen-tabelle thead th {
  background: #e8ede9;
  color: #1a1a1a;
  font-weight: 700;
  vertical-align: bottom;
}
.stufe-check {
  color: var(--gj-gruen);
  font-weight: 700;
}
.stufe-dash {
  color: #bbb;
}

/* Noten-Sponsoring: Stufen-Zusatzleistungen */
#zusatzleistungen { border-top: 1px solid var(--gj-gruen); margin: 1.25rem 0; padding-top: 1rem; }
.stufe-erreicht { font-size: .9rem; font-weight: 600; color: var(--gj-gruen); margin-bottom: .75rem; }
.zusatz-option { margin-bottom: .5rem; }
#logo-details { margin-top: .75rem; padding-left: .25rem; }

/* Anhänger-Sponsoring: 3D-Konfigurator */
.anhaenger-sponsoring {
  max-width: 1280px;
}
.page-content.anhaenger-sponsoring,
.form-page.anhaenger-sponsoring,
.anhaenger-sponsoring .form-page {
  max-width: 1280px;
}
.anhaenger-konfigurator {
  margin: 2rem 0 2.5rem;
}
.anhaenger-block {
  margin: 1.5rem 0;
}
.anhaenger-konfigurator__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: .7rem;
  margin-bottom: 1rem;
}
.anhaenger-konfigurator__head h2 {
  margin: 0;
}
.anhaenger-selection {
  display: block;
  width: 100%;
  max-width: 100%;
  color: var(--gj-green);
  font-weight: 700;
  text-align: left;
}
.anhaenger-viewer {
  position: relative;
  width: 100%;
  min-width: 0;
  container-type: inline-size;
  border: 1px solid var(--gj-border);
  border-radius: 8px;
  overflow: hidden;
  background: #f5f7f6;
}
.anhaenger-viewer__canvas {
  min-height: 0;
  height: min(56vw, 660px, calc(100vh - var(--gj-header-height) - 1rem));
  height: min(56cqw, 660px, calc(100dvh - var(--gj-header-height) - 1rem));
}
.anhaenger-viewer__canvas canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}
.anhaenger-viewer__canvas canvas:active {
  cursor: grabbing;
}
.anhaenger-viewer__hud {
  position: absolute;
  left: .8rem;
  bottom: .8rem;
  display: none; /* JS baut das HUD in das Info-Panel um; vor JS-Init unsichtbar */
  flex-wrap: wrap;
  align-items: stretch;
  gap: .45rem;
  max-width: calc(100% - 5rem);
  z-index: 2;
  pointer-events: none;
}
.anhaenger-viewer__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  padding: .45rem .55rem;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 8px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
  font-size: .82rem;
  color: #26312b;
  pointer-events: auto;
}
.anhaenger-viewer__legend span {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.anhaenger-viewer__legend i {
  width: .8rem;
  height: .8rem;
  border-radius: 3px;
  display: inline-block;
}
.anhaenger-viewer__legend .is-available { background: var(--gj-green); opacity: .7; }
.anhaenger-viewer__legend .is-selected { background: var(--gj-blue); }
.anhaenger-viewer__legend .is-occupied { background: #858f89; }
.anhaenger-logo-toggle {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  padding: .45rem .55rem;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 8px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
  color: #26312b;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  pointer-events: auto;
}
.anhaenger-logo-toggle input {
  width: 2rem;
  height: 1.1rem;
  margin: 0;
  border-radius: 999px;
  cursor: pointer;
  accent-color: var(--gj-green);
}
.anhaenger-panel {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  min-width: 0;
}
.anhaenger-surface-button {
  width: 100%;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin: 0;
  padding: .7rem .8rem;
  border: 1px solid var(--gj-border);
  border-radius: 8px;
  background: #fff;
  color: #1a1a1a;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s, background-color .15s;
}
.anhaenger-surface-button:hover {
  border-color: var(--gj-border-hover);
  transform: translateY(-1px);
}
.anhaenger-surface-button:focus-visible {
  outline: 2px solid var(--gj-green);
  outline-offset: 2px;
}
.anhaenger-surface-button.is-selected {
  border-color: var(--gj-blue);
  box-shadow: 0 0 0 1px var(--gj-blue);
  background: #eaf2ff;
}
.anhaenger-surface-button:disabled {
  cursor: not-allowed;
  color: #6a716d;
  background: #f3f4f2;
  transform: none;
}
.anhaenger-surface-button strong,
.anhaenger-surface-button small,
.anhaenger-surface-button em {
  display: block;
}
.anhaenger-surface-button strong {
  color: var(--gj-green);
  line-height: 1.2;
}
.anhaenger-surface-button small {
  color: #555;
  margin-top: .15rem;
  line-height: 1.3;
}
.anhaenger-surface-button em {
  font-style: normal;
  font-weight: 700;
  color: var(--gj-red);
  white-space: nowrap;
}
.anhaenger-upload {
  margin-bottom: 0;
}
.anhaenger-upload label {
  margin-bottom: 0;
}
.anhaenger-upload input {
  width: 100%;
  min-width: 0;
}
.anhaenger-upload small.field-hint {
  display: block;
  margin-top: .1rem;
  line-height: 1.35;
}
.anhaenger-form-section {
  margin-top: 2rem;
}
.anhaenger-form-section h2 {
  margin-bottom: 1.25rem;
}
.anhaenger-form-row {
  align-items: start;
}
.anhaenger-form-row .form-group {
  min-width: 0;
}
@media (max-width: 640px) {
  .anhaenger-selection {
    width: 100%;
  }
  .anhaenger-viewer__canvas {
    min-height: 0;
    height: min(72vw, 310px, calc(100vh - var(--gj-header-height) - 1rem));
    height: min(72cqw, 310px, calc(100dvh - var(--gj-header-height) - 1rem));
  }
  .anhaenger-viewer__hud {
    left: .6rem;
    right: .6rem;
    bottom: .6rem;
    max-width: calc(100% - 1.2rem);
  }
  .anhaenger-logo-toggle {
    width: fit-content;
  }
}
.anhaenger-overlay-btn {
  z-index: 3;
}
.anhaenger-overlay-close {
  display: none;
}
.anhaenger-viewer.is-overlay-open {
  position: fixed;
  inset: 0;
  z-index: 9000;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  border: 0;
  border-radius: 0;
  background: #f5f7f6;
}
.anhaenger-viewer.is-overlay-open .anhaenger-viewer__canvas {
  height: 100vh;
  height: 100dvh;
}
.anhaenger-viewer.is-overlay-open .anhaenger-overlay-btn {
  display: none;
}
.anhaenger-viewer.is-overlay-open .anhaenger-overlay-close {
  display: flex;
}

/* ── Anhänger Info-Button & Panel ────────────────────────── */
/* Buttons im Viewer: enger am Rand als hero-zoom-btn default */
.anhaenger-viewer .hero-zoom-btn {
  bottom: 0;
}
/* Info-Button: links unten */
.anhaenger-info-btn {
  left: .4rem;
  right: auto;
}

/* Panel: klappt über dem Button auf */
@keyframes info-panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}
.anhaenger-info-panel {
  display: none;
  position: absolute;
  bottom: calc(38px + .3rem);
  left: .75rem;
  z-index: 3;
  width: min(288px, calc(100% - 1.5rem));
  max-height: calc(100% - 5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 12px;
  padding: .9rem 1rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .08);
}
.anhaenger-info-panel.is-open {
  display: block;
  animation: info-panel-in .16s ease;
}

.anhaenger-info-panel__divider {
  border: none;
  border-top: 1px solid #e6e9e6;
  margin: .75rem 0;
}
.anhaenger-info-panel__section-title {
  margin: 0 0 .5rem;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #9aaa9d;
}

/* Legende und Logo-Toggle: im Panel ohne Glass-Pill */
.anhaenger-info-panel .anhaenger-viewer__legend {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  pointer-events: auto;
  font-size: .84rem;
}
.anhaenger-info-panel .anhaenger-logo-toggle {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  font-size: .84rem;
  color: #1a1a1a;
  width: 100%;
}

/* Steuerungs-Zeilen */
.anhaenger-help-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.anhaenger-help-row {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.anhaenger-help-icon {
  flex-shrink: 0;
  width: 44px;
  color: var(--gj-green);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .85;
}
.anhaenger-help-text {
  display: flex;
  flex-direction: column;
  gap: .05rem;
  min-width: 0;
}
.anhaenger-help-text strong {
  font-size: .84rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.3;
}
.anhaenger-help-text span {
  font-size: .76rem;
  color: var(--gj-green);
  font-weight: 600;
  opacity: .8;
}

/* Vorschau des hochgeladenen Anzeigenmotivs (clientseitig) */
.anzeige-preview { margin: .75rem 0 0; }
.anzeige-preview img {
  max-width: 220px;
  max-height: 140px;
  width: auto;
  height: auto;
  border: 1px solid var(--gj-border);
  border-radius: 6px;
  background: #fff;
  display: block;
}
.anzeige-preview figcaption { font-size: .85rem; color: #555; margin-top: .35rem; }
/* Datei-Upload-Feld: grüner Button (statt PicoCSS-Blau), kein Überlappen */
input[type="file"] {
  height: auto;
  padding: .5rem;
  line-height: 1.4;
}
input[type="file"]::file-selector-button {
  margin: 0 .8rem 0 0;
  padding: .5rem 1rem;
  border: 0;
  border-radius: 6px;
  background: var(--gj-green);
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  transition: background-color .15s;
}
input[type="file"]::file-selector-button:hover { background: var(--pico-primary-hover); }

/* Handlungsaufruf: gefüllter Primär-Button zur Kontaktseite */
.sponsor-cta { text-align: center; margin: 2.5rem 0; }
.sponsor-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .8rem 1.6rem;
  background: var(--gj-green);
  color: #fff;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: box-shadow .16s, transform .16s, background-color .16s;
}
.sponsor-cta__btn:hover {
  background: var(--pico-primary-hover);
  box-shadow: var(--gj-shadow-lift);
  transform: translateY(-1px);
}

/* Logo-Wand der aktuellen Sponsoren */
.sponsor-logos-section { margin-top: 3rem; }
.sponsoren-block { margin-bottom: 1.5rem; }
.sponsor-thanks { color: #555; margin-bottom: 1.5rem; }
.sponsor-logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Logo-Wand: dichter als die Arten-Karten – 2 nebeneinander auf Mobile,
     ~4 im schmalen Container (820px). auto-fill (statt -fit) hält die Kachel-
     größe in einer nicht voll gefüllten letzten Reihe konstant. */
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1.25rem;
}
.sponsor-logos li { margin: 0; list-style: none; }
.sponsor-logo__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  height: 100%;
  min-height: 165px;
  padding: 1.25rem;
  border: 1px solid var(--gj-border);
  border-radius: 8px;
  background: #fff;
  text-align: center;
}
a.sponsor-logo__box { transition: box-shadow .16s, border-color .16s, transform .16s; }
a.sponsor-logo__box:hover {
  box-shadow: var(--gj-shadow-hover);
  border-color: var(--gj-border-hover);
  transform: translateY(-2px);
}
/* Logo in der zentrierten Box (Marken-Logos): eingepasst, füllt die Box gut aus. */
.sponsor-logo__box img {
  max-width: 100%;
  max-height: 125px;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* Klickbare Marken-Logos: dezent gedämpft, im Hover voll farbig. */
a.sponsor-logo__box img {
  filter: grayscale(1);
  opacity: .8;
  transition: filter .2s, opacity .2s;
}
a.sponsor-logo__box:hover img { filter: grayscale(0); opacity: 1; }
.sponsor-logo__name { font-weight: 600; color: var(--gj-green); }

/* Card-Variante (Bild ohne Website, z. B. privater Sponsor): Bild vollflächig
   oben (2∶1-Zuschnitt wie die übrigen Cards), Name im Textkörper darunter. */
.sponsor-logo__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 165px;
  border: 1px solid var(--gj-border);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow .16s, border-color .16s, transform .16s;
}
.sponsor-logo__card:hover {
  box-shadow: var(--gj-shadow-hover);
  border-color: var(--gj-border-hover);
  transform: translateY(-2px);
}
/* Bild bekommt den Löwenanteil der Höhe (füllt die Kachel via flex). */
.sponsor-logo__media { flex: 1; width: 100%; min-height: 90px; overflow: hidden; }
.sponsor-logo__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
  /* ausgegraut bis Hover (wie die Marken-Logos) */
  filter: grayscale(1);
  opacity: .85;
  transition: filter .2s, opacity .2s;
}
.sponsor-logo__card:hover .sponsor-logo__media img { filter: grayscale(0); opacity: 1; }
/* Name kompakt unter dem Bild. */
.sponsor-logo__caption {
  padding: .5rem .75rem;
  font-weight: 600;
  font-size: .9rem;
  color: var(--gj-green);
  text-align: center;
}

/* „Hervorgehoben"-Variante (Block-Option): größere, zentrierte Logos – passend
   für einen einzelnen oder wenige Sponsoren. Flex statt Grid, damit wenige
   Kacheln mittig stehen statt links in einer breiten Zeile zu kleben. */
.sponsor-logos--featured {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.sponsor-logos--featured .sponsor-logo { flex: 0 1 260px; }
.sponsor-logos--featured .sponsor-logo__box {
  min-height: 180px;
  padding: 1.75rem;
}
.sponsor-logos--featured img { max-height: 130px; }

/* ── Personen-Karte (Vorstand + Kontakt) ─────────────────── */
/* Geteiltes Karten-Grid + Karte für Vorstandschaft und Kontaktseite
   (Snippet `person-card`). Klickbare Portraits hängen am Grid `.person-grid`
   im Lightbox-JS (assets/js/nav.js). */
.person-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  /* etwas größerer Abstand oben: auf der Vorstandschaft trennt er das
     vollbreite Gruppenfoto von der Personenliste. */
  margin: 2rem 0 1rem;
}
@media (min-width: 600px)  { .person-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .person-grid { grid-template-columns: repeat(3, 1fr); } }

/* „Stand: …“ – dezenter Hinweis unter Personen-/Register-Grids mit festem
   Stichtag (z. B. in vergänglichen Beiträgen). */
.grid-stand {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--muted, #666);
  text-align: right;
}

.person-card {
  background: #fff;
  border: 1px solid var(--gj-border);
  border-radius: 8px;
  overflow: hidden;
  /* Mobil: Portrait klein links, Text rechts */
  display: flex;
  align-items: stretch;
}
.person-card__foto {
  flex-shrink: 0;
  width: 88px;
  background: #f0f0ea;
  overflow: hidden;
}
.person-card__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Klickbares Portrait öffnet die Lightbox (wie Register/Galerie) */
.person-card__foto-btn {
  padding: 0;
  border: 0;
  margin: 0;
  cursor: zoom-in;
}
.person-card__foto-btn:focus-visible {
  outline: 2px solid var(--gj-green);
  outline-offset: -2px;
}
.person-card__foto--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gj-placeholder-gradient);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.person-card__body {
  padding: 1rem 1.1rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Ab Tablet: Karte als Spalte, großes Hochformat-Portrait oben */
@media (min-width: 600px) {
  .person-card { flex-direction: column; }
  .person-card__foto {
    width: 100%;
    aspect-ratio: 4 / 5;
  }
  .person-card__foto--placeholder { font-size: 2.5rem; }
  .person-card__body { justify-content: flex-start; }
}

.person-card__name {
  font-size: 1.15rem;
  margin: 0 0 .6rem;
}
.person-card__details {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  font-size: .9rem;
}
.person-card__detail {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
}
.person-card__detail a {
  color: var(--gj-green);
  overflow-wrap: anywhere;
}

/* ── Ehrenmitglieder ─────────────────────────────────────── */
/* Übersicht: kompakte „Galerie der Ehrenmitglieder" – nur Foto + Name + Jahr,
   chronologisch nach Eintritt. Verlinkt jeweils auf die Detailseite
   (Template `ehrenmitglied`, Route in config.php). */
.ehren-grid {
  list-style: none;
  margin: 2rem 0 2.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 1rem;
}
@media (min-width: 600px) { .ehren-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .ehren-grid { grid-template-columns: repeat(4, 1fr); gap: 2rem 1.5rem; } }

/* li selbst entmarkieren – Pico setzt Marker auf Element-Ebene, was die
   geerbte list-style:none des Grids überschreibt. */
.ehren-card { list-style: none; }
.ehren-card::marker { content: ""; }

.ehren-card__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: inherit;
}
.ehren-card__static {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: inherit;
}
.ehren-card__media {
  width: 100%;
  max-width: 160px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: #f0f0ea;
  border: 3px solid #fff;
  box-shadow: var(--gj-shadow-lift);
  transition: transform .15s ease, box-shadow .15s ease;
}
.ehren-card__link:hover .ehren-card__media,
.ehren-card__link:focus-visible .ehren-card__media {
  transform: translateY(-3px);
  box-shadow: var(--gj-shadow-hover);
}
.ehren-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ehren-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--gj-placeholder-gradient);
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.ehren-card__name {
  margin-top: .75rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--gj-green);
}
.ehren-card__link:hover .ehren-card__name { text-decoration: underline; }
.ehren-card__cross { color: var(--gj-red); font-weight: 700; }
.ehren-card__since {
  margin-top: .15rem;
  font-size: .82rem;
  color: #6b6b63;
}
/* Verstorbene Mitglieder dezent in Graustufe, bis sie fokussiert werden */
.ehren-card--verstorben .ehren-card__media img { filter: grayscale(0.35); }
.ehren-card--verstorben .ehren-card__link:hover .ehren-card__media img,
.ehren-card--verstorben .ehren-card__link:focus-visible .ehren-card__media img { filter: none; }

/* Detailseite eines Ehrenmitglieds */
.ehren-detail__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  margin-bottom: 2rem;
}
@media (min-width: 600px) {
  .ehren-detail__head { flex-direction: row; align-items: center; text-align: left; gap: 1.75rem; }
}
/* Wrapper bleibt unbeschnitten, damit der Expand-Button (hero-zoom-btn) nicht
   vom runden overflow:hidden des Portraits abgeschnitten wird. */
.ehren-detail__portrait {
  position: relative;
  flex-shrink: 0;
  width: 160px;
  max-width: 100%;
}
.ehren-detail__foto {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: #f0f0ea;
  border: 3px solid #fff;
  box-shadow: var(--gj-shadow-lift);
}
/* Expand-Button kompakter und enger am runden Portrait als der Default. */
.ehren-detail__zoom {
  width: 34px;
  height: 34px;
  bottom: 4px;
  right: 4px;
  opacity: .85;
}
.ehren-detail__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ehren-detail__intro h1 { margin: 0 0 .25rem; }
.ehren-detail__lebensdaten { margin: .4rem 0 0; color: #6b6b63; font-size: .95rem; }

.ehren-detail__facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem 1.5rem;
  margin: 0 0 2rem;
  padding: 1.1rem 1.25rem;
  background: #fff;
  border: 1px solid var(--gj-border-accent);
  border-radius: 8px;
}
@media (min-width: 500px) { .ehren-detail__facts { grid-template-columns: repeat(2, 1fr); } }
.ehren-detail__fact { display: flex; flex-direction: column; gap: .1rem; }
.ehren-detail__fact dt {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gj-green);
}
.ehren-detail__fact dd { margin: 0; font-size: 1.05rem; }

.ehren-detail__section { margin: 0 0 2rem; }
.ehren-detail__section h2 { font-size: 1.25rem; margin: 0 0 .75rem; }

.ehren-aemter { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.ehren-amt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem .9rem;
  background: #fff;
  border: 1px solid var(--gj-border-accent);
  border-radius: 6px;
}
.ehren-amt__name { font-weight: 500; }
.ehren-detail__bemerkung { line-height: 1.7; }

/* ── Layout field (12-column grid) ───────────────────────── */
.page-layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.page-column {
  grid-column: span var(--col-span, 12);
}
/* On mobile: alle Spalten stacken */
@media (max-width: 600px) {
  .page-column { grid-column: span 12 !important; }
}

/* ── Silbentrennung (Hyphenation) ────────────────────────── */
/* Greift nur, weil <html lang="de"> gesetzt ist; der Browser nutzt
   das deutsche Trennmuster. Auf Fließtext-Bereiche beschränkt –
   Navigation, Logo und Buttons bleiben ungetrennt.
   overflow-wrap fängt überlange Wörter / URLs ab (kein H-Overflow). */
.page-content,
.article-single__body,
.register-single,
.page-layout {
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
  /* erst ab etwas schmaleren Spalten trennen, nicht mitten im Wort bei breitem Layout */
  hyphenate-limit-chars: 6 3 2;
}

/* Überschriften sehen mit Silbentrennung oft schlecht aus: lieber
   ganze Wörter umbrechen, nur als Notfall trennen. */
.page-content :is(h1, h2, h3, h4),
.article-single__body :is(h2, h3, h4),
.register-single :is(h1, h2, h3, h4) {
  hyphens: manual;
  -webkit-hyphens: manual;
  text-wrap: balance;
}

/* ── Vereinsgeschichte – Zeitstrahl ──────────────────────── */

.timeline {
  position: relative;
  max-width: 900px;
  margin: 2.5rem auto 3rem;
  /* Mobil: keine Seitenpolsterung – der umgebende main.container liefert
     bereits 1rem. Sonst läge die Linie 1rem links neben den Knoten (die
     relativ zum item sitzen, das um diese Polsterung eingerückt wäre).
     Desktop bekommt die 1rem im Media-Query zurück. */
  padding: 0;
}

/* Vertikale Linie */
.timeline__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0.25rem;
  width: 3px;
  background: linear-gradient(to bottom, var(--gj-green) 0%, color-mix(in srgb, var(--gj-green) 30%, transparent) 100%);
  border-radius: 2px;
}

/* Einzelner Eintrag (mobil: schmalerer Einzug = breitere Karten,
   engerer vertikaler Abstand). Der Einzug muss Linie + Knoten freihalten. */
.timeline__item {
  position: relative;
  padding: 0 0 1.5rem 1.75rem;
}

/* Punkt auf der Linie */
.timeline__dot {
  position: absolute;
  left: calc(0.25rem - 7px);
  /* auf Höhe der Jahres-Badge: Card-Padding (1.25rem) + halbe Badge-Höhe */
  top: 1.65rem;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--gj-green);
  border: 3px solid var(--background-color, #fafaf8);
  box-shadow: 0 0 0 2px var(--gj-green);
  z-index: 1;
}

/* Karte */
.timeline__card {
  background: var(--card-background-color, #fff);
  border: 1px solid var(--muted-border-color, #e0e0e0);
  border-radius: var(--border-radius, .5rem);
  padding: 1.25rem 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.timeline__year {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--gj-green);
  border-radius: 3px;
  padding: .15em .6em;
  margin-bottom: .6rem;
}

.timeline__title {
  font-size: 1.15rem;
  margin: 0 0 .6rem;
  color: var(--color, #1a1a1a);
}

.timeline__text {
  margin: 0 0 .8rem;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--muted-color, #555);
}

/* Vorschaubild */
.timeline__thumb {
  margin: .8rem 0;
}

.timeline__zoom {
  position: relative;
  display: block;
  cursor: zoom-in;
  border: none;
  padding: 0;
  background: none;
  border-radius: calc(var(--border-radius, .5rem) - 2px);
  overflow: hidden;
  max-width: 100%;
}

.timeline__zoom picture,
.timeline__zoom img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--border-radius, .5rem) - 2px);
  transition: opacity .2s;
}

.timeline__zoom:hover img,
.timeline__zoom:focus-visible img {
  opacity: .88;
}

.timeline__zoom-icon {
  position: absolute;
  bottom: .5rem;
  right: .5rem;
  width: 2rem;
  height: 2rem;
  background: rgba(0,0,0,.55);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
}

.timeline__zoom:hover .timeline__zoom-icon,
.timeline__zoom:focus-visible .timeline__zoom-icon {
  opacity: 1;
}

.timeline__more {
  display: inline-block;
  margin-top: .5rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--gj-green);
  text-decoration: none;
}

.timeline__more:hover {
  text-decoration: underline;
}

/* ── Desktop: Zwei-Spalten-Packung (ab 700 px) ─────────────
   Beide Seiten sind absolut positionierte Spalten. JS stapelt
   pro Spalte jede Karte direkt unter die vorherige (mit Abstand).
   → keine Überlappung möglich, minimale Gesamthöhe.
   `top` wird für ALLE Items per JS gesetzt.                  */

@media (min-width: 700px) {
  /* Seitenpolsterung wieder herstellen (auf Mobil entfernt) */
  .timeline {
    padding: 0 1rem;
  }

  .timeline__line {
    left: 50%;
    transform: translateX(-50%);
  }

  /* Reset mobile-padding für alle Items */
  .timeline__item {
    padding: 0;
    position: absolute;
    width: 50%;
    /* top wird per JS gesetzt */
  }

  .timeline__item--left {
    left: 0;
    padding-right: 2.5rem;
    text-align: right;
  }

  .timeline__item--right {
    left: 50%;
    padding-left: 2.5rem;
  }

  /* Punkt am rechten Rand der linken Karte → auf der Mittellinie
     (top erbt von der Basis-Regel: Höhe der Jahres-Badge) */
  .timeline__item--left .timeline__dot {
    left: auto;
    right: -8.5px;
  }

  /* Punkt am linken Rand der rechten Karte → auf der Mittellinie */
  .timeline__item--right .timeline__dot {
    left: -8.5px;
    right: auto;
  }

  .timeline__item--left .timeline__thumb {
    display: flex;
    justify-content: flex-end;
  }

  .timeline__item--left .timeline__zoom,
  .timeline__item--right .timeline__zoom {
    max-width: 240px;
  }
}