/* ============================================================
   Ergaenzungen zur uebernommenen style.css.
   style.css bleibt bewusst unveraendert, damit ein Abgleich mit der
   statischen Vorlage moeglich bleibt. Alles, was erst durch Grav
   noetig wird, steht hier.
   ============================================================ */

/* Der Sprachumschalter ist in Grav ein Link statt eines <button>.
   Damit er aussieht wie vorher, bekommt er die Knopf-Regeln. */
a.lang-btn {
  display: inline-block;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-soft);
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  text-decoration: none;
}
a.lang-btn:hover { color: var(--green-dark); }
a.lang-btn.active { background: var(--green); color: #fff; }
a.lang-btn.active:hover { color: #fff; }

/* Wird der Platz im Kopf knapp, soll der Vereinsname mit Auslassungs-
   punkten enden statt unter das Menue zu laufen: brand-name steht in
   style.css auf nowrap OHNE overflow-Begrenzung, und weil .brand
   schrumpfen darf (min-width: 0), malte sich das Menue sonst genau
   darueber. */
.brand-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ornamentband (Schewiza): style.css sucht das Bild unter ../img/, weil
   die statische Vorlage assets/img/ hatte. Im Theme heisst der Ordner
   images/ - ohne diese Zeile laeuft die Anfrage in einen 404 und das
   Band bleibt ein leerer Streifen. grav.css wird nach style.css
   geladen und ueberschreibt deshalb. */
.shevitsa { background-image: url("../images/shevitsa.svg"); }

/* Sprungmarke fuer Tastatur- und Screenreader-Nutzung. Die statische
   Seite hatte keine - beim Umbau kostet sie nichts. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--green);
  color: #fff;
  padding: 0.7rem 1.2rem;
  border-radius: 0 0 8px 0;
  font-weight: 700;
}
.skip-link:focus {
  left: 0;
  color: #fff;
}

/* Sichtbarer Fokusrahmen - in der statischen Fassung nicht gesetzt. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}

/* Markdown erzeugt Tabellen ohne Klasse. Frueher stand hier ein
   Nachbau der .schedule-Optik mit display: block - dabei schrumpfte
   der Tabellenkasten auf Inhaltsbreite, das gruene Kopfband endete
   mitten in der Karte. Jetzt haengt js/site.js jede Tabelle im
   Fliesstext in .table-wrap und gibt ihr die Klasse .schedule; damit
   greift unveraendert das Vorlagen-CSS aus style.css (Zeilen 365-385).
   Hier bleibt deshalb nichts uebrig - eigene Regeln wuerden die
   Vorlage nur wieder ueberschreiben. */

/* Hinweiskasten: in Markdown als Blockzitat geschrieben, damit die
   Redaktion kein HTML tippen muss. */
.prose blockquote {
  background: var(--green-light);
  border: 1px solid #cbe4d4;
  border-radius: 10px;
  padding: 1rem 1.2rem;
  color: var(--green-dark);
  font-size: 0.95rem;
  margin: 1.4rem 0;
}
.prose blockquote p { color: inherit; margin-bottom: 0; }
.prose blockquote p + p { margin-top: 0.6rem; }

/* Kontaktformular des form-Plugins in die Optik einpassen. */
.form-field { margin-bottom: 1.1rem; }
.form-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--ink);
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field textarea {
  width: 100%;
  font: inherit;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
}
.form-field textarea { min-height: 9rem; resize: vertical; }
.form-field input:focus,
.form-field textarea:focus { border-color: var(--green); }

.buttons button,
.form-actions button {
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  border: 0;
  cursor: pointer;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.buttons button:hover,
.form-actions button:hover { background: var(--green-dark); }

/* ============================================================
   Klappmenues in der Hauptnavigation.
   Die statische Vorlage hatte nur eine Ebene; die bestehende
   Vereinsseite gliedert Schule, Verein und Veranstaltungen in
   Unterseiten. Geoeffnet wird ueber :hover (Maus), :focus-within
   (Tastatur) und einen Schalter mit aria-expanded (Beruehrung) -
   reines :hover waere auf dem Telefon nicht bedienbar.
   ============================================================ */
.site-nav .hat-untermenue { position: relative; display: flex; align-items: center; }

.untermenue-schalter {
  background: none;
  border: 0;
  padding: 0.2rem 0.35rem;
  margin-left: -0.35rem;
  font-size: 0.7rem;
  line-height: 1;
  color: inherit;
  cursor: pointer;
  border-radius: 999px;
}
.untermenue-schalter:hover { color: var(--green-dark); }
.untermenue-schalter span { display: inline-block; transition: transform 0.15s ease; }
.untermenue-schalter[aria-expanded="true"] span { transform: rotate(180deg); }

.site-nav .untermenue {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 40;
  display: none;
  flex-direction: column;
  align-items: stretch;
  min-width: 15rem;
  padding: 0.4rem;
  gap: 0.1rem;
  background: #fff;
  border: 1px solid var(--line, rgba(0,0,0,0.1));
  border-radius: 0.6rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.site-nav .hat-untermenue:hover > .untermenue,
.site-nav .hat-untermenue:focus-within > .untermenue,
.site-nav .untermenue-schalter[aria-expanded="true"] + .untermenue { display: flex; }

.site-nav .untermenue a {
  white-space: normal;      /* lange Gruppennamen duerfen umbrechen */
  font-size: 0.92rem;
  padding: 0.5rem 0.7rem;
}

/* Handlungsaufruf "Стани член" am Ende der Navigation: fuehrt auf
   /antrag. Als gefuellter Knopf abgesetzt - der eine Handlungsaufruf
   im Kopf. */
.site-nav .nav-cta { margin-left: 0.4rem; }
.site-nav .nav-cta a {
  background: var(--green);
  color: #fff;
  border-radius: 999px;
  padding: 0.45rem 1.1rem;
  box-shadow: var(--shadow-sm);
}
.site-nav .nav-cta a:hover,
.site-nav .nav-cta a.active {
  background: var(--green-dark);
  color: #fff;
}

@media (max-width: 900px) {
  /* Im aufgeklappten Hauptmenue kein Schwebemenue, sondern eine
     eingerueckte Liste - sonst laege sie ausserhalb des Bildschirms. */
  .site-nav .hat-untermenue { display: block; }
  .site-nav .untermenue {
    position: static;
    display: none;
    min-width: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0 0 0 1rem;
  }
  .site-nav .hat-untermenue:hover > .untermenue { display: none; }
  .site-nav .untermenue-schalter[aria-expanded="true"] + .untermenue { display: flex; }
  .untermenue-schalter { float: right; padding: 0.55rem 0.7rem; font-size: 0.8rem; }
  /* Im Klappmenue steht der Knopf als eigene Zeile mit etwas Abstand. */
  .site-nav .nav-cta { margin: 0.5rem 0 0; }
  .site-nav .nav-cta a { text-align: center; }
}

/* ============================================================
   Personenraster der Team-Seite.
   Fehlt ein Foto, tritt an seine Stelle ein Kreis mit den
   Initialen - so bleibt das Raster gleichmaessig, auch wenn
   nicht von allen ein Bild vorliegt.
   ============================================================ */
.team-raster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 1.8rem 1.2rem;
}

.team-karte {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
}

.team-foto {
  width: 100%;
  max-width: 11rem;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0.7rem;
  background: var(--green-light, #eef4ee);
}

.team-platzhalter {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--green-dark, #2f5d3a);
  letter-spacing: 0.05em;
}

.team-name { font-weight: 700; line-height: 1.3; }
.team-rolle { font-size: 0.88rem; color: var(--ink-soft, #667); }

@media (max-width: 520px) {
  .team-raster { grid-template-columns: repeat(2, 1fr); gap: 1.2rem 0.8rem; }
  .team-foto { max-width: none; }
  .team-name { font-size: 0.92rem; }
  .team-rolle { font-size: 0.8rem; }
}

/* ============================================================
   Liste vergangener Veranstaltungen auf "Aktuelles".
   Die Einzelseiten stehen bewusst nicht im Menue - 26 Eintraege
   in einem Klappmenue waeren unbenutzbar. Hier nach Jahren
   gruppiert, damit man sich zurechtfindet.
   ============================================================ */
.archiv-jahr {
  margin: 1.6rem 0 0.5rem;
  font-size: 1.05rem;
  color: var(--green-dark, #2f5d3a);
  border-bottom: 1px solid var(--line, rgba(0,0,0,0.1));
  padding-bottom: 0.3rem;
}
.archiv-jahr:first-child { margin-top: 0; }

.archiv-eintraege { list-style: none; margin: 0; padding: 0; }
.archiv-eintraege li + li { border-top: 1px solid var(--line, rgba(0,0,0,0.06)); }

.archiv-eintraege a {
  display: flex;
  gap: 0.9rem;
  align-items: baseline;
  padding: 0.55rem 0.3rem;
  text-decoration: none;
  color: inherit;
  border-radius: 0.4rem;
}
.archiv-eintraege a:hover { background: var(--green-light, #eef4ee); }

.archiv-datum {
  flex: none;
  min-width: 6.2rem;
  font-size: 0.85rem;
  color: var(--ink-soft, #667);
  font-variant-numeric: tabular-nums;
}
.archiv-titel { font-weight: 600; }

@media (max-width: 520px) {
  .archiv-eintraege a { flex-direction: column; gap: 0.1rem; }
  .archiv-datum { min-width: 0; }
}

/* ============================================================
   Termine des Vereinskalenders auf "Събития".

   Hier stand frueher ein eingebetteter Google-Kalender (.kalender-
   rahmen). Der ist weg: die Termine kommen jetzt aus der Verwaltung,
   wo der Vorstand sie ohnehin pflegt und einzeln freigibt - ein Ort
   fuer Termine statt zweier, die auseinanderlaufen.

   Jeder Eintrag: links das Datum als Block (Tag gross, Monat klein),
   rechts Titel, Uhrzeit und die Art des Termins.
   ============================================================ */
/* 50rem wie .news-list und .doc-list im Theme - die Terminliste steht
   direkt ueber den wiederkehrenden Festen, und zwei Listen mit
   unterschiedlicher Breite untereinander sehen nach Versehen aus. */
.termin-liste { display: grid; gap: 0.9rem; max-width: 50rem; }

.termin {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  background: var(--paper, #fff);
  border: 1px solid var(--line, rgba(0,0,0,0.1));
  border-radius: var(--radius, 14px);
  padding: 1rem 1.3rem;
  box-shadow: var(--shadow-sm, 0 2px 10px rgba(28,36,48,0.06));
}

/* Feste Breite: sonst stehen die Titel je nach Monatsname unterschiedlich
   weit rechts und die Liste franst am linken Rand aus. */
.termin-datum {
  flex: 0 0 3.4rem;
  text-align: center;
  line-height: 1.15;
}
.termin-tag {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--green-dark, #155c2f);
}
.termin-monat {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft, #4a5568);
}

.termin-text { min-width: 0; flex: 1; }
.termin-text h3 { margin: 0 0 0.25rem; font-size: 1.02rem; }
/* Der Titel fuehrt zur Einladung, wenn es eine gibt. Farbe erst beim
   Zeigen - eine Liste voller blauer Links liest sich unruhig. */
/* Auch der Titel fuehrt zur Einladung. Er MUSS wie ein Link aussehen:
   erst stand hier `color: inherit; text-decoration: none` und die Farbe
   kam nur beim Zeigen - auf dem Bildschirm war die Einladung damit nicht
   zu finden, und auf dem Telefon gibt es kein Zeigen. Den Pfeil traegt
   der Verweis rechts (.termin-mehr), hier waere er doppelt. */
.termin-link {
  color: var(--green-dark, #155c2f);
  text-decoration: none;
}
.termin-link:hover { text-decoration: underline; }
.termin-text p { margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

.termin-zeit,
.termin-ort {
  font-size: 0.85rem;
  color: var(--ink-soft, #4a5568);
}

/* Veranstaltungen sind hervorgehoben: gruener Streifen links und eine
   kraeftigere Zahl. Sie stehen ohnehin in einer eigenen Liste - die
   Hervorhebung traegt aber auch dann, wenn beide Listen untereinander
   auf dem Bildschirm sind. */
.termin-fest {
  border-left: 4px solid var(--green, #1e7a3f);
  background: linear-gradient(90deg,
    var(--green-light, #e6f2ea) 0, var(--paper, #fff) 3.5rem);
}
.termin-fest .termin-tag { font-size: 1.7rem; }

/* Der Weg zur Einladung, rechts am Eintrag. Er steht NUR dort, wo es
   eine Einladung gibt - anders als der frühere Herunterladen-Knopf, der
   an jedem der 42 Termine hing und damit genau den einen Eintrag
   verdeckte, der wirklich weiterführt. */
.termin-mehr {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.55rem 0.35rem 0.75rem;
  border-radius: 999px;
  color: var(--green-dark, #155c2f);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s ease, gap 0.15s ease;
}
.termin-mehr:hover {
  background: var(--green-light, #e6f2ea);
  color: var(--green-dark, #155c2f);
  gap: 0.55rem;               /* der Pfeil rueckt beim Zeigen nach rechts */
}
.termin-mehr-pfeil { font-size: 1.05em; line-height: 1; }

/* Auf schmalen Geraeten nur der Pfeil: das Wort daneben draengt Titel
   und Ort sonst in den Umbruch. Der aria-label am Link nennt das Ziel
   weiterhin vollstaendig. */
@media (max-width: 560px) {
  .termin-mehr { padding: 0.35rem 0.5rem; }
  .termin-mehr-text { display: none; }
}

/* Ueberschrift und Knopf nebeneinander; auf schmalen Geraeten
   untereinander, sonst quetscht der Knopf die Ueberschrift. */
.termin-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.termin-kopf .btn-ics {
  flex: 0 0 auto;
  font-size: 0.85rem;
  padding: 0.5rem 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
/* Der Pfeil sitzt sonst auf der Grundlinie und wirkt abgesackt. */
.ics-pfeil { display: block; }

/* Die Art des Termins als Plakette - dieselben drei Arten wie im
   Kalender der Verwaltung. */
.termin-art {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--green-light, #e6f2ea);
  color: var(--green-dark, #155c2f);
}
.termin-art-frei { background: #fdecef; color: var(--red-dark, #9d0c24); }
.termin-art-sonder { background: #fdf3e0; color: #8a5a00; }

@media (max-width: 560px) {
  .termin { gap: 0.9rem; padding: 0.9rem 1rem; }
  .termin-datum { flex-basis: 2.9rem; }
  .termin-tag { font-size: 1.3rem; }
}

/* ============================================================
   Grossansicht der Galerie ("Lupe").

   Vorher oeffnete ein Klick das Bild in einem neuen Tab; wer weiter
   wollte, musste zurueck und erneut klicken. Jetzt bleibt man in der
   Ansicht und blaettert mit den Pfeilen, mit den Pfeiltasten oder per
   Wischen; Escape und das Kreuz schliessen.
   ============================================================ */
.lupe {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  background: rgba(12, 16, 14, 0.92);
}
.lupe[hidden] { display: none; }

.lupe-buehne {
  margin: 0;
  max-width: min(1100px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-width: 0;
}
.lupe-buehne img {
  /* Das Bild passt sich an, ohne den Ausschnitt zu beschneiden - in der
     Grossansicht will man das ganze Bild sehen, nicht einen Zuschnitt. */
  max-width: 100%;
  max-height: calc(100vh - 7rem);
  width: auto;
  height: auto;
  margin: 0 auto;
  border-radius: 8px;
  object-fit: contain;
}
.lupe-buehne figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 0.9rem;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.9rem;
  text-align: center;
}
.lupe-zaehler { color: rgba(255, 255, 255, 0.6); font-variant-numeric: tabular-nums; }

/* Knoepfe: gross genug fuer den Daumen (44px ist die uebliche
   Mindestgroesse fuer Beruehrziele). */
.lupe-pfeil,
.lupe-zu {
  flex: 0 0 auto;
  width: 2.9rem;
  height: 2.9rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}
.lupe-pfeil:hover,
.lupe-zu:hover { background: rgba(255, 255, 255, 0.26); }
.lupe-pfeil:focus-visible,
.lupe-zu:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lupe-pfeil[hidden] { display: none; }

.lupe-zu {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.3rem;
}

@media (max-width: 560px) {
  /* Am Telefon nehmen die Pfeile zu viel Platz neben dem Bild weg.
     Sie ruecken deshalb an den unteren Rand - gewischt wird ohnehin. */
  .lupe { padding: 0.5rem; }
  .lupe-pfeil {
    position: absolute;
    bottom: 1.1rem;
  }
  .lupe-zurueck { left: 25%; }
  .lupe-weiter { right: 25%; }
  .lupe-buehne img { max-height: calc(100vh - 9rem); }
}