/*
 * Darstellung von Kalender und Terminen.
 *
 * Liegt im Plugin und nicht im Theme: der Kalender soll auch mit einem anderen
 * Theme benutzbar aussehen. Die Farben greifen auf die Variablen des Themes zu
 * und haben jeweils einen Rückfallwert, falls ein fremdes Theme sie nicht
 * setzt.
 */

.svn-kalender {
  --svn-gruen: var(--farbe-gruen, #1c6b45);
  --svn-gruen-hell: var(--farbe-gruen-hell, #e8f2ec);
  --svn-rand: var(--farbe-rand, #d8d4c8);
  --svn-leise: var(--farbe-text-leise, #5a635c);
  --svn-sand: var(--farbe-sand, #f6f3ec);

  margin: 2rem 0;
}

/* --------------------------------------------------------------------------
   Navigation zwischen den Monaten
   -------------------------------------------------------------------------- */

.svn-kalender__navigation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
}

.svn-kalender__monat {
  margin: 0;
  font-size: 1.25rem;
  text-align: center;
  flex: 1 1 auto;
}

.svn-kalender__schritt {
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--svn-rand);
  border-radius: 0.375rem;
  text-decoration: none;
  font-size: 0.875rem;
  white-space: nowrap;
}

.svn-kalender__schritt:hover {
  background: var(--svn-gruen-hell);
}

/* --------------------------------------------------------------------------
   Monatstabelle

   Zwei Spalten, weil der Schießstand freitags und samstags geöffnet ist.
   -------------------------------------------------------------------------- */

.svn-kalender__tabelle {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/* Die Beschriftung erklärt die Tabelle für Bildschirmleser. Optisch verborgen,
   aber nicht entfernt. */
.svn-kalender__tabelle caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.svn-kalender__tabelle th {
  padding: 0.5rem;
  background: var(--svn-gruen);
  color: #fff;
  font-size: 0.9375rem;
  text-align: left;
  border: 1px solid var(--svn-gruen);
}

.svn-kalender__tabelle th abbr {
  text-decoration: none;
  border: 0;
}

.svn-kalender__tabelle td {
  width: 50%;
  height: 7rem;
  padding: 0.5rem;
  vertical-align: top;
  border: 1px solid var(--svn-rand);
}

.svn-kalender__ausserhalb {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 6px,
    rgba(0, 0, 0, 0.03) 6px,
    rgba(0, 0, 0, 0.03) 12px
  );
}

.svn-kalender__tag--heute {
  background: var(--svn-gruen-hell);
  outline: 2px solid var(--svn-gruen);
  outline-offset: -2px;
}

.svn-kalender__datum {
  display: block;
  font-weight: 700;
  font-size: 0.9375rem;
  margin-bottom: 0.375rem;
}

.svn-kalender__heute-marke {
  margin-left: 0.375rem;
  padding: 0.0625rem 0.3125rem;
  font-size: 0.6875rem;
  font-weight: 400;
  color: #fff;
  background: var(--svn-gruen);
  border-radius: 0.1875rem;
  vertical-align: middle;
}

.svn-kalender__leer {
  padding: 1.5rem;
  text-align: center;
  color: var(--svn-leise);
}

/* --------------------------------------------------------------------------
   Geschlossen wegen eines gesetzlichen Feiertags

   Dieselbe Schraffur wie bei Tagen aussserhalb des Monats, aber mit Beschriftung
   und gedämpfter Datumszahl. Die Schraffur allein wäre eine reine Farbaussage;
   der Name des Feiertags steht deshalb als Text im Feld und nicht nur in einem
   title-Attribut.
   -------------------------------------------------------------------------- */

.svn-kalender__tag--geschlossen {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 6px,
    rgba(0, 0, 0, 0.05) 6px,
    rgba(0, 0, 0, 0.05) 12px
  );
}

.svn-kalender__tag--geschlossen .svn-kalender__datum {
  color: var(--svn-leise);
}

.svn-kalender__geschlossen {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--svn-leise);
}

.svn-kalender__feiertag {
  display: block;
  font-size: 0.8125rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.svn-legende__eintrag--geschlossen {
  border-left-color: var(--svn-leise);
  color: var(--svn-leise);
}

/* --------------------------------------------------------------------------
   Sondertermine über dem Monatsgitter

   Abgesetzt dargestellt, weil sie die Ausnahme von der Regel sind: der
   Schießstand ist freitags und samstags geöffnet, ein Sondertermin ist es
   nicht. Ein Block, der aussieht wie der Kalender, würde die Ausnahme
   verschweigen.
   -------------------------------------------------------------------------- */

.svn-kalender__sondertermine {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: var(--svn-sand);
  border: 1px solid var(--svn-rand);
  border-left: 4px solid var(--svn-gruen);
  border-radius: 0.25rem;
}

.svn-kalender__sondertermine h4 {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
}

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

.svn-sondertermin {
  background: #fff;
}

.svn-sondertermin + .svn-sondertermin {
  margin-top: 0.375rem;
}

.svn-sondertermin__datum {
  display: block;
  font-weight: 700;
  font-size: 0.8125rem;
}

.svn-termin__art,
.svn-termin__sonder {
  display: block;
  font-size: 0.75rem;
  color: var(--svn-leise);
}

.svn-termin__sonder {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* --------------------------------------------------------------------------
   Standardtermin aus einer Vorlage

   Zurückhaltender als ein eigener Termin: gestrichelter Rand statt
   durchgezogenem. Ein Standardtermin ist die Regel, ein eigener Termin die
   Nachricht — und die Darstellung soll das in dieser Reihenfolge sagen.

   Die Unterscheidung hängt nicht allein an der Linienart: der Titel ist nicht
   verlinkt, weil es keine Einzelseite gibt. Das ist der verlässlichere
   Unterschied, denn er wirkt auch ohne Stilvorlage.
   -------------------------------------------------------------------------- */

.svn-termin--vorlage {
  border-left-style: dashed;
  background: transparent;
}

.svn-termin--vorlage .svn-termin__titel {
  font-weight: 500;
}

.svn-legende__eintrag--vorlage {
  border-left-style: dashed;
}

/* --------------------------------------------------------------------------
   Termine im Kalenderfeld
   -------------------------------------------------------------------------- */

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

.svn-termin {
  margin-bottom: 0.375rem;
  padding: 0.25rem 0.375rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  background: var(--svn-sand);
  border-left: 3px solid var(--svn-gruen);
  border-radius: 0.1875rem;
}

.svn-termin__titel {
  display: block;
  font-weight: 600;
  text-decoration: none;
}

.svn-termin__titel:hover {
  text-decoration: underline;
}

.svn-termin__zeit,
.svn-termin__ort {
  display: block;
  color: var(--svn-leise);
  font-size: 0.75rem;
}

.svn-termin__intern {
  display: inline-block;
  margin-top: 0.125rem;
  font-size: 0.6875rem;
  color: var(--svn-leise);
}

.svn-termin__intern::before {
  content: "\1F512\00a0";
}

/* --------------------------------------------------------------------------
   Arten von Terminen

   Die Unterscheidung erfolgt über Farbe UND Beschriftung. Farbe allein wäre
   für Menschen mit Farbfehlsichtigkeit keine Information.
   -------------------------------------------------------------------------- */

.termin--uebung {
  border-left-color: #1c6b45;
}

.termin--wettkampf {
  border-left-color: #8a5a00;
}

.termin--arbeitseinsatz {
  border-left-color: #4a5568;
}

.termin--versammlung {
  border-left-color: #2b6cb0;
}

.termin--feier {
  border-left-color: #9b2c6f;
}

.termin--sonstiges {
  border-left-color: #718096;
}

/* --------------------------------------------------------------------------
   Legende
   -------------------------------------------------------------------------- */

.svn-kalender__legende {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: var(--svn-sand);
  border-radius: 0.375rem;
}

.svn-kalender__legende h4 {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
}

.svn-kalender__legende ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
}

.svn-legende__eintrag {
  padding-left: 0.5rem;
  border-left: 3px solid var(--svn-gruen);
}

/* --------------------------------------------------------------------------
   Terminliste, etwa auf der Startseite
   -------------------------------------------------------------------------- */

.svn-termine {
  margin: 1rem 0;
  padding: 0;
  list-style: none;
}

.svn-termine__eintrag {
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  background: var(--farbe-sand, #f6f3ec);
  border-left: 4px solid var(--farbe-gruen, #1c6b45);
  border-radius: 0.375rem;
}

.svn-termine__datum {
  display: block;
  font-size: 0.8125rem;
  color: var(--farbe-text-leise, #5a635c);
}

.svn-termine__titel {
  display: block;
  font-weight: 700;
  text-decoration: none;
  margin: 0.125rem 0;
}

.svn-termine__angaben {
  display: block;
  font-size: 0.8125rem;
  color: var(--farbe-text-leise, #5a635c);
}

.svn-termine__leer {
  padding: 1rem;
  color: var(--farbe-text-leise, #5a635c);
}

/* --------------------------------------------------------------------------
   Geschützte Inhalte
   -------------------------------------------------------------------------- */

.svn-geschuetzt {
  margin: 2rem 0;
}

.svn-intern {
  padding: 1rem 1.25rem;
  border: 1px dashed var(--farbe-rand, #d8d4c8);
  border-radius: 0.375rem;
  background: var(--farbe-gruen-hell, #e8f2ec);
}

/* --------------------------------------------------------------------------
   Schmale Bildschirme

   Die zwei Spalten bleiben erhalten — bei nur zwei Tagen ist das auch auf
   einem Telefon lesbar. Nur die Felder werden flacher.
   -------------------------------------------------------------------------- */

@media (max-width: 34rem) {
  .svn-kalender__tabelle td {
    height: auto;
    min-height: 4rem;
    padding: 0.375rem;
  }

  .svn-kalender__monat {
    order: -1;
    flex-basis: 100%;
  }

  .svn-kalender__schritt {
    flex: 1 1 auto;
    text-align: center;
  }
}

@media print {
  .svn-kalender__navigation,
  .svn-kalender__legende {
    display: none;
  }

  .svn-kalender__tabelle th {
    background: transparent;
    color: #000;
    border-color: #000;
  }

  .svn-kalender__tabelle td {
    border-color: #666;
  }
}

/* --------------------------------------------------------------------------
   Anfahrt

   Das Lagebild ist ein eigenes SVG und keine eingebettete Karte. Die
   Datenschutzerklärung dieser Webseite sagt zu, dass keine Inhalte fremder
   Anbieter eingebettet werden — eine Google-Karte würde sie zur Falschaussage
   machen. Erst ein Klick führt hinaus.
   -------------------------------------------------------------------------- */

.svn-anfahrt {
  margin: 1.5rem 0;
}

.svn-anfahrt__titel {
  margin: 0 0 0.75rem;
}

.svn-anfahrt__verweis {
  position: relative;
  display: block;
  width: 100%;
  max-width: 25rem;
  border: 1px solid var(--svn-rand);
  border-radius: 0.375rem;
  overflow: hidden;
  text-decoration: none;
}

.svn-anfahrt__verweis:focus-visible {
  outline: 3px solid var(--svn-gruen);
  outline-offset: 2px;
}

/* Breite 100 Prozent mit automatischer Höhe: der Lageplan ist 400 x 250 und
   soll auf einem Telefon mitschrumpfen. width und height stehen am img, damit
   der Platz vor dem Laden reserviert ist und die Seite nicht springt. */
.svn-anfahrt__bild {
  display: block;
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   Pulsierender Marker über dem Lageplan

   karte.gif ist ein Einzelbild — GIF89a, aber ohne Graphic-Control-Extensions
   und ohne Loop-Block. Die Bewegung kommt deshalb von hier.

   Das ist auch die bessere Stelle: ein animiertes GIF läuft unaufhörlich und
   lässt sich nicht anhalten, denn prefers-reduced-motion greift nicht auf
   Bilddaten. Ein Marker aus Markup hält die Einstellung ein.

   Die Lage kommt als style-Angabe aus dem Shortcode, weil sie am Bild
   abgelesen ist und korrigierbar bleiben soll.
   -------------------------------------------------------------------------- */

.svn-anfahrt__marker {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

.svn-anfahrt__punkt,
.svn-anfahrt__puls {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  border-radius: 50%;
  /* Um den eigenen Mittelpunkt zentrieren, damit die Prozentangabe den
     Mittelpunkt trifft und nicht die linke obere Ecke. */
  transform: translate(-50%, -50%);
}

.svn-anfahrt__punkt {
  width: 0.75rem;
  height: 0.75rem;
  background: var(--svn-gruen);
  box-shadow: 0 0 0 2px #fff;
}

.svn-anfahrt__puls {
  width: 2.5rem;
  height: 2.5rem;
  background: var(--svn-gruen);
  opacity: 0;
  animation: svn-puls 2.8s ease-out infinite;
}

/* Der zweite Ring läuft versetzt, damit eine fortlaufende Bewegung entsteht
   und nicht ein Blinken. */
.svn-anfahrt__puls:nth-of-type(2) {
  animation-delay: 1.4s;
}

@keyframes svn-puls {
  0% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(0.3);
  }
  70% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.6);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.6);
  }
}

/* Wer am Gerät eingestellt hat, Bewegung zu vermeiden, bekommt einen ruhigen
   Ring. Eine Dauerbewegung ohne Abschaltmöglichkeit kann Schwindel und
   Übelkeit auslösen — das ist keine Geschmacksfrage. */
@media (prefers-reduced-motion: reduce) {
  .svn-anfahrt__puls {
    animation: none;
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(1);
  }

  .svn-anfahrt__puls:nth-of-type(2) {
    display: none;
  }
}

.svn-anfahrt__marke {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
  background: var(--svn-gruen);
  border-radius: 0.1875rem;
}

.svn-anfahrt__hinweis {
  max-width: 34rem;
  margin: 0.5rem 0 0.75rem;
  font-size: 0.8125rem;
  color: var(--svn-leise);
}

.svn-anfahrt__verweise {
  margin: 0 0 0.75rem;
  padding-left: 1.25rem;
}

.svn-anfahrt__koordinaten {
  font-size: 0.875rem;
}

.svn-anfahrt__koordinaten code {
  padding: 0.0625rem 0.25rem;
  background: var(--svn-sand);
  border-radius: 0.1875rem;
}

/* ==========================================================================
   Bildgalerie
   ========================================================================== */
.svn-galerie {
  --svn-gruen: var(--farbe-gruen, #1c6b45);
  --svn-rand: var(--farbe-rand, #d8d4c8);
  --svn-leise: var(--farbe-text-leise, #5a635c);
  --svn-sand: var(--farbe-sand, #f6f3ec);
  margin: 2rem 0;
}
.svn-galerie__titel {
  margin: 0 0 1rem;
}
/* Die Spaltenzahl aus dem Shortcode ist eine Obergrenze, keine Festlegung.
   `auto-fit` mit `minmax` verteilt die Bilder auf so viele Spalten, wie die
   Breite bei 14rem Mindestbreite hergibt — auf einem Telefon wird daraus von
   selbst eine Spalte. Ohne diese Rechnung bräuchte es eine Medienabfrage je
   Spaltenzahl, und drei Spalten auf 320 Pixeln ergäben Briefmarken.

   Die Obergrenze kommt über die Breite: mehr als `spalten` Spalten können
   nicht entstehen, weil das Gitter nicht breiter wird als die Spalten
   zusammen. */
.svn-galerie__liste {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(14rem, 100%), 1fr)
  );
  gap: 1rem;
  max-width: calc(var(--svn-galerie-spalten, 3) * 22rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.svn-galerie__eintrag {
  margin: 0;
}
.svn-galerie__bild {
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.svn-galerie__verweis {
  display: block;
  border: 1px solid var(--svn-rand);
  border-radius: 0.375rem;
  overflow: hidden;
  background: var(--svn-sand);
  line-height: 0;
}
/* Alle Kacheln gleich hoch, obwohl die Bilder es nicht sind: eines der
   Winterbilder ist hochkant, die Panoramen sind flach. Ohne festes
   Seitenverhältnis stünde das Gitter treppenförmig.

   `object-fit: cover` beschneidet dafür. Das ist hier vertretbar, weil ein
   Klick die ungeschnittene Fassung zeigt — und `object-position: center`
   nimmt die Mitte, nicht den oberen Rand. */
.svn-galerie__abbildung {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  object-position: center;
  transition: transform 0.25s ease;
}
.svn-galerie__verweis:hover .svn-galerie__abbildung,
.svn-galerie__verweis:focus-visible .svn-galerie__abbildung {
  transform: scale(1.03);
}
@media (prefers-reduced-motion: reduce) {
  .svn-galerie__abbildung {
    transition: none;
  }
  .svn-galerie__verweis:hover .svn-galerie__abbildung,
  .svn-galerie__verweis:focus-visible .svn-galerie__abbildung {
    transform: none;
  }
}
/* Der Tastaturfokus liegt auf dem Verweis und muss sichtbar sein. `outline`
   mit `offset`, damit der Rahmen nicht unter dem Bild verschwindet. */
.svn-galerie__verweis:focus-visible {
  outline: 3px solid var(--svn-gruen);
  outline-offset: 2px;
}
.svn-galerie__beschriftung {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--svn-leise);
}
.svn-galerie--leer {
  margin: 2rem 0;
}

/* ==========================================================================
   Terminanfrage
   ========================================================================== */
.svn-anfrage {
  --svn-gruen: var(--farbe-gruen, #1c6b45);
  --svn-rand: var(--farbe-rand, #d8d4c8);
  --svn-leise: var(--farbe-text-leise, #5a635c);
  --svn-sand: var(--farbe-sand, #f6f3ec);
  --svn-rot: var(--farbe-rot, #a3281e);
  max-width: 38rem;
  margin: 2rem 0;
}
.svn-anfrage__einleitung {
  margin: 0 0 1.5rem;
}
.svn-anfrage__gruppe {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem 0.5rem;
  border: 1px solid var(--svn-rand);
  border-radius: 0.375rem;
}
.svn-anfrage__gruppe legend {
  padding: 0 0.5rem;
  font-weight: 600;
}
.svn-anfrage__feld {
  margin: 0 0 1.25rem;
}
.svn-anfrage__feld label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
}
/* Die Kennzeichnung steht als Wort im Label und nicht als Sternchen. Ein
   Sternchen braucht eine Legende, und die liest niemand; „(Pflichtangabe)"
   steht da, wo die Auskunft gebraucht wird. Kleiner und leiser gesetzt,
   damit die Bezeichnung des Feldes vorn bleibt. */
.svn-anfrage__pflicht,
.svn-anfrage__freiwillig {
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--svn-leise);
}
.svn-anfrage input[type="text"],
.svn-anfrage input[type="tel"],
.svn-anfrage input[type="email"],
.svn-anfrage input[type="date"],
.svn-anfrage input[type="time"],
.svn-anfrage textarea {
  width: 100%;
  padding: 0.5rem 0.625rem;
  font: inherit;
  /* 16px auf Telefonen: darunter zoomt iOS beim Fokus in das Feld hinein
     und der Besucher sitzt in einer vergrößerten Seite fest. */
  font-size: max(1rem, 16px);
  color: inherit;
  background: #fff;
  border: 1px solid var(--svn-rand);
  border-radius: 0.25rem;
}
.svn-anfrage input[type="date"],
.svn-anfrage input[type="time"] {
  width: auto;
  min-width: 11rem;
}
.svn-anfrage textarea {
  resize: vertical;
  line-height: 1.5;
}
.svn-anfrage :is(input, textarea):focus-visible {
  outline: 3px solid var(--svn-gruen);
  outline-offset: 1px;
  border-color: var(--svn-gruen);
}
.svn-anfrage__hinweis,
.svn-anfrage__fehler {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.4;
}
.svn-anfrage__hinweis {
  color: var(--svn-leise);
}
/* Der Fehler ist nicht nur rot: Farbe allein ist keine Auskunft für Menschen,
   die Rot und Grün nicht unterscheiden. Der Text sagt, was fehlt, und das
   Feld trägt zusätzlich einen linken Balken. */
.svn-anfrage__fehler {
  color: var(--svn-rot);
  font-weight: 600;
}
.svn-anfrage__feld--fehler {
  padding-left: 0.75rem;
  border-left: 3px solid var(--svn-rot);
}
.svn-anfrage__feld--fehler :is(input, textarea) {
  border-color: var(--svn-rot);
}
.svn-anfrage__datenschutz {
  margin: 0 0 1.25rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--svn-leise);
}
.svn-anfrage__absenden {
  margin: 0;
}
.svn-anfrage__ergebnis {
  max-width: 38rem;
  margin: 2rem 0;
}
/* --------------------------------------------------------------------------
   Das Feld, das leer bleiben muss

   Aus dem Bild genommen, aber nicht mit `display: none` und nicht mit
   `visibility: hidden` — beides erkennen Werbeautomaten, und dann füllen sie
   es gerade nicht. Stattdessen wird es aus dem sichtbaren Bereich geschoben.

   Das Markup trägt zusätzlich `aria-hidden` und `tabindex="-1"`, damit es für
   Bildschirmleser und für die Tastatur nicht existiert. Fällt diese
   Stilvorlage aus, erscheint das Feld sichtbar mit seinem Label „Bitte leer
   lassen" — dann ist es benutzbar statt unsichtbar und doch vorhanden.
   -------------------------------------------------------------------------- */
.svn-anfrage__honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.svn-anfrageknopf {
  margin: 1.5rem 0;
}