/* ==========================================================================
   Bilder aus dem Tal — historisches Bildarchiv
   ==========================================================================

   Verwendet ausschliesslich die Tokens aus munta.css. Keine eigenen Farben,
   keine eigenen Abstaende: Was hier steht, soll aussehen wie der Rest der
   Seite und sich mit ihr veraendern.

   Eine Ausnahme gibt es doch, und sie ist Absicht: Die Jahreszahlen sind
   groesser, als es die uebrige Typografie vorsieht. Sie sind der Kompass
   dieser Seite. Wer scrollt, soll die Jahre wandern sehen, ohne zu lesen.
   ========================================================================== */


/* ---------------------------------------------------------------- Kopf */

.bildarchiv__kopf {
  padding: var(--space-6) 0 var(--space-5);
  border-bottom: 2px solid var(--text);
  margin-bottom: var(--space-6);
}

.bildarchiv__unterzeile {
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--orange-dark);
  margin: var(--space-2) 0 var(--space-3);
}

.bildarchiv__einleitung {
  max-width: 62ch;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: var(--space-4);
}

.bildarchiv__aktionen { margin-bottom: var(--space-4); }


/* -------------------------------------------------------------- Suche */

.bildsuche {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  max-width: 40rem;
}

.bildsuche__feld {
  flex: 1 1 16rem;
  min-height: 44px;
  padding: 0 var(--space-3);
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}

.bildsuche__feld:focus-visible {
  outline: 2px solid var(--brand-orange);
  outline-offset: 1px;
}


/* ------------------------------------------------------------ Wegweiser */

.bildpfad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  padding: var(--space-4) 0 var(--space-2);
}

.bildpfad a { color: var(--text-muted); }
.bildpfad a:hover { color: var(--text); }
.bildpfad [aria-current="page"] { color: var(--text); font-weight: 600; }


/* ----------------------------------------------------- Raster mit Navigation */

.bildarchiv__raster {
  display: grid;
  gap: var(--space-5);
  align-items: start;
  padding-bottom: var(--space-7);
}

/*
   Ab 1100px steht die Ortsliste fest links — derselbe Punkt, an dem auch
   die Hauptnavigation von der Fussleiste in die Kopfzeile wandert. Zwei
   verschiedene Umschaltpunkte auf einer Seite waeren unruhig.
*/
@media (min-width: 1100px) {
  .bildarchiv__raster {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--space-6);
  }

  /* --header-gesamt statt --header-height: Seit der zweiten
     Navigationsreihe ist die Kopfzeile hoeher, und eine an der alten
     Hoehe festgemachte Spalte verschwaende zur Haelfte darunter. */
  .bildnav {
    position: sticky;
    top: calc(var(--header-gesamt) + var(--space-3));
    max-height: calc(100vh - var(--header-gesamt) - var(--space-5));
    overflow-y: auto;
  }
}


/* -------------------------------------------------------- Ortsnavigation */

.bildnav__klapp {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.bildnav__schalter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.bildnav__schalter::-webkit-details-marker { display: none; }

.bildnav__klapp[open] .bildnav__pfeil { transform: rotate(180deg); }
.bildnav__pfeil { transition: transform .15s ease; }

.bildnav__inhalt { padding: 0 var(--space-3) var(--space-3); }

.bildnav__titel {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  padding: var(--space-2) 0;
  margin: 0;
  border-bottom: 1px solid var(--border);
}

.bildnav__liste,
.bildnav__zeiten {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bildnav__ort > a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 40px;
  padding: var(--space-2) 0;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}

.bildnav__ort > a:hover { color: var(--orange-dark); }

.bildnav__ort--aktiv > a {
  font-weight: 700;
  color: var(--orange-dark);
}

.bildnav__name { display: flex; flex-direction: column; }

/* Bei Ortsteilen steht die Gemeinde klein darunter — sonst weiss niemand,
   dass Gortipohl zu St. Gallenkirch gehoert. */
.bildnav__zusatz {
  font-size: var(--fs-tiny);
  font-weight: 400;
  color: var(--text-muted);
}

.bildnav__zahl {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  flex: none;
}

.bildnav__zeiten {
  padding: var(--space-1) 0 var(--space-2) var(--space-3);
  border-left: 2px solid var(--orange-soft);
  margin-left: var(--space-1);
}

.bildnav__zeiten a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 36px;
  padding: var(--space-1) 0;
  font-size: var(--fs-md);
  color: var(--text-muted);
  text-decoration: none;
}

.bildnav__zeiten a:hover { color: var(--text); }

.bildnav__zeiten [aria-current="page"] {
  color: var(--orange-dark);
  font-weight: 700;
}

.bildnav__leer {
  font-size: var(--fs-md);
  color: var(--text-muted);
  padding: var(--space-3) 0;
}


/* ------------------------------------------------------- Jahresabschnitte */

.bildjahr { margin-bottom: var(--space-6); }

/*
   Die Jahreszahl ist das groesste Element der Seite — groesser als die
   Bildtitel. Das ist der Kern: Beim Scrollen zaehlen die Jahre rueckwaerts,
   und daraus entsteht das Gefuehl, in die Vergangenheit zu gehen.
*/
.bildjahr__titel {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-size: clamp(2rem, 6vw, 3.25rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text);
  padding-bottom: var(--space-2);
  margin: 0 0 var(--space-4);
  border-bottom: 2px solid var(--text);
  scroll-margin-top: calc(var(--header-gesamt) + var(--space-3));
}

.bildjahr__anzahl {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.bildarchiv__zeitraum {
  display: block;
  font-size: .5em;
  color: var(--orange-dark);
}

.bildarchiv__anzahl {
  color: var(--text-muted);
  font-size: var(--fs-md);
  margin-top: var(--space-1);
}

.bildarchiv__zurueck { margin-bottom: var(--space-4); }
.bildarchiv__zurueck a { color: var(--text-muted); font-size: var(--fs-md); }
.bildarchiv__zurueck a:hover { color: var(--text); }

.section__hinweis {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}


/* ------------------------------------------------------------ Bildraster */

.grid--bilder {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}


/* ------------------------------------------------------------- Bildkarte */

.bildkarte { padding: 0; overflow: hidden; }

.bildkarte__rahmen {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--surface-soft);
  overflow: hidden;
}

.bildkarte__bild {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Alte Aufnahmen wirken freundlicher, wenn sie nicht bis an die Kante
     hart abschneiden — eine Spur Zoom beim Ueberfahren genuegt. */
  transition: transform .3s ease;
}

.bildkarte:hover .bildkarte__bild { transform: scale(1.03); }

.bildkarte__leer {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 2rem;
  opacity: .35;
}

/*
   Die Jahreszahl sitzt IM Bild, nicht darunter. Der dunkle Balken ist
   nicht Dekor: Ohne ihn verschwindet weisse Schrift auf einem hellen
   Himmel, und genau der ist auf Bergfotos die Regel.
*/
.bildkarte__jahr {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: var(--space-1) var(--space-3);
  background: var(--brand-navy);
  color: var(--text-invert);
  font-size: var(--fs-base);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

.bildkarte__anzahl {
  position: absolute;
  right: var(--space-2);
  top: var(--space-2);
  padding: 2px var(--space-2);
  background: rgba(0, 21, 49, .8);
  color: var(--text-invert);
  font-size: var(--fs-tiny);
  font-weight: 700;
  border-radius: var(--radius-xs);
}

.bildkarte .card__body { padding: var(--space-3); }

.bildkarte__nachweis {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
  font-size: var(--fs-tiny);
  line-height: 1.4;
  color: var(--text-muted);
}


/* ---------------------------------------------------------- Ortskacheln */

.ortskacheln {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ortskachel {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
}

.ortskachel:hover {
  background: var(--orange-soft);
  border-color: var(--brand-orange);
}

.ortskachel__zahl {
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}


/* --------------------------------------------------------- Detailansicht */

.bildseite__titel { margin-bottom: var(--space-4); }

/* --- Das Bild in Ansichtsgroesse, nicht in Originalgroesse (06.09.2026)

   Vorher fuellte das Hauptbild die ganze Spaltenbreite und wurde bis zu
   78 % der Fensterhoehe hoch. Bei den Aufnahmen aus dem Landesarchiv ist
   das besonders unguenstig: Viele sind abfotografierte Negative mit
   breitem schwarzem Rand — auf dem Bildschirm stand dann eine
   handtellergrosse Ansicht in einer riesigen dunklen Flaeche, und der
   Text darunter war ausser Sicht.

   Jetzt ist die Ansicht auf eine ruhige Groesse begrenzt. Wer das Bild
   wirklich ansehen will, klickt es an — dafuer gab es die Bildschau
   schon, sie war nur nie noetig, weil ohnehin alles gross dastand.     */
.bildseite__haupt {
  margin: 0 0 var(--space-3);
  background: var(--brand-navy);
  border-radius: var(--radius-sm);
  overflow: hidden;
  /* Etwa zwei Drittel der Lesespalte — genug, um zu erkennen, worum es
     geht, und wenig genug, dass die Angaben darunter noch ins Bild
     passen. */
  max-width: 44rem;
  margin-inline: auto;
}

.bildseite__zoom {
  display: block;
  /* Der Zeiger sagt, dass es groesser geht — der Link tut es auch ohne JS. */
  cursor: zoom-in;
}

.bildseite__zoom img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 46vh;
  object-fit: contain;
  margin-inline: auto;
}

/* Ein Wort statt eines Ratespiels: dass es groesser geht, muss dastehen. */
.bildseite__zoom::after {
  content: "Zum Vergrössern anklicken";
  display: block;
  padding: var(--space-2) var(--space-3);
  background: var(--brand-navy);
  color: var(--text-invert);
  font-size: var(--fs-tiny);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
}

.bildseite__weitere {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.bildseite__weitere li { scroll-snap-align: start; flex: none; }

.bildseite__weitere a {
  display: block;
  width: 7.5rem;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-xs);
  overflow: hidden;
  background: var(--surface-soft);
}

.bildseite__weitere img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bildseite__spalten {
  display: grid;
  gap: var(--space-5);
  align-items: start;
  padding-bottom: var(--space-6);
}

@media (min-width: 860px) {
  .bildseite__spalten { grid-template-columns: minmax(0, 1fr) 20rem; }
}

.bildseite__beschreibung {
  max-width: 62ch;
  line-height: 1.7;
}

.bildseite__daten {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-1) var(--space-4);
  margin: 0;
}

.bildseite__daten dt {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  padding: var(--space-1) 0;
}

.bildseite__daten dd {
  margin: 0;
  padding: var(--space-1) 0;
  font-weight: 600;
}


/* ------------------------------------------------------------ Bildnachweis */

/*
   Der Kasten ist bewusst deutlich sichtbar und nicht ans Seitenende
   verbannt. Bei CC-BY ist die Namensnennung die Bedingung, unter der wir
   das Bild zeigen duerfen — sie gehoert neben das Bild, nicht ins
   Kleingedruckte.
*/
.bildnachweis {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-top: 3px solid var(--brand-navy);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
}

.bildnachweis__titel {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin: 0 0 var(--space-3);
}

.bildnachweis__zeile {
  font-size: var(--fs-md);
  line-height: 1.5;
  margin: 0 0 var(--space-2);
  color: var(--text-muted);
}

.bildnachweis__zeile--haupt {
  color: var(--text);
  font-weight: 700;
}

.bildnachweis__zeile--bearbeitung {
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
  font-style: italic;
}

.bildnachweis__aktion { margin: var(--space-3) 0 0; }


/* ------------------------------------------------------------- Mithelfen */

.bildseite__mithelfen {
  background: var(--orange-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  margin-bottom: var(--space-7);
}

.bildseite__mithelfen h2 { margin-top: 0; }
.bildseite__mithelfen p { max-width: 58ch; color: var(--text); }


/* --------------------------------------------------------------- Formular */

.bildformular { padding-bottom: var(--space-7); }

.bildformular__einleitung {
  max-width: 62ch;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: var(--space-5);
}

.form__block {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: var(--space-4);
  margin: 0 0 var(--space-4);
}

.form__block legend {
  font-weight: 800;
  font-size: var(--fs-base);
  padding: 0 var(--space-2);
}

.form__block--rechte { border-color: var(--brand-navy); border-width: 2px; }

.form__label {
  display: block;
  font-weight: 600;
  font-size: var(--fs-md);
  margin: var(--space-3) 0 var(--space-1);
}

.form__optional {
  font-weight: 400;
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

.form__hinweis {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.5;
  margin: var(--space-1) 0 var(--space-2);
}

.form__input,
.form__select,
.form__textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}

.form__textarea { min-height: 9rem; resize: vertical; line-height: 1.6; }

.form__input:focus-visible,
.form__select:focus-visible,
.form__textarea:focus-visible {
  outline: 2px solid var(--brand-orange);
  outline-offset: 1px;
}

.form__auswahl {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.form__radio,
.form__check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2);
  cursor: pointer;
  line-height: 1.5;
}

.form__radio {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  align-items: center;
  padding: var(--space-2) var(--space-3);
}

.form__radio:has(input:checked) {
  border-color: var(--brand-orange);
  background: var(--orange-soft);
  font-weight: 600;
}

.form__check { padding-block: var(--space-3); }
.form__check + .form__check { border-top: 1px solid var(--border); }
.form__check--wahl { border-top: 1px solid var(--border); }

.form__radio input,
.form__check input { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .15rem; }

.form__jahre { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.form__jahrfeld { flex: 0 1 8rem; }
.form__input--jahr { font-variant-numeric: tabular-nums; }

.form__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-3);
}

.form__schluss { font-size: var(--fs-sm); color: var(--text-muted); }


/* --------------------------------------------------------- Bilder ablegen */

.bildablage {
  display: grid;
  place-items: center;
  min-height: 9rem;
  padding: var(--space-4);
  text-align: center;
  background: var(--bg);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.bildablage:hover,
.bildablage--bereit {
  border-color: var(--brand-orange);
  background: var(--orange-soft);
}

.bildablage__text { font-weight: 600; color: var(--text-muted); }

/* Das Feld bleibt bedienbar (Tastatur, Vorlesehilfen), aber unsichtbar —
   sichtbar ist die grosse Flaeche darum. */
.bildablage__feld {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.bildablage:focus-within {
  outline: 2px solid var(--brand-orange);
  outline-offset: 2px;
}

.bildablage__liste {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: var(--space-2) 0 0;
}


/* ---------------------------------------------------------------- Danke */

.bilddanke { max-width: 46rem; padding: var(--space-7) 0; }
.bilddanke__text { font-size: var(--fs-lg); line-height: 1.7; max-width: 56ch; }
.bilddanke__text--leise { color: var(--text-muted); font-size: var(--fs-base); }


/*
   Keine eigene Lightbox.

   Die Bildschau steht bereits in munta.css (.bildschau*) und wird von
   munta-bild.js aufgebaut — dieselbe, die Marktplatz und Immobilien
   benutzen. Ausgeloest wird sie hier ueber `data-gross` auf den Links.
   Eine zweite haette anders ausgesehen und anders reagiert.
*/


/* ------------------------------------------------------ Kleine Bildschirme */

@media (max-width: 559px) {
  .grid--bilder { grid-template-columns: 1fr; }

  .bildseite__daten { grid-template-columns: 1fr; gap: 0; }
  .bildseite__daten dt { padding-bottom: 0; }
  .bildseite__daten dd { padding-top: 0; margin-bottom: var(--space-2); }
}


/* ==========================================================================
   Pruefliste im Adminbereich
   ========================================================================== */

.adminbilder { padding-bottom: var(--space-7); }

.adminbilder__zahlen {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--fs-md);
  color: var(--text-muted);
}

.adminbilder__wert {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.pruefliste { list-style: none; margin: var(--space-4) 0 0; padding: 0; }

.pruefkarte {
  display: grid;
  gap: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

@media (min-width: 720px) {
  .pruefkarte { grid-template-columns: 16rem minmax(0, 1fr); }
}

.pruefkarte__bild {
  aspect-ratio: 4 / 3;
  background: var(--surface-soft);
  border-radius: var(--radius-xs);
  overflow: hidden;
  display: grid;
  place-items: center;
}

.pruefkarte__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pruefkarte__leer { font-size: 2rem; opacity: .35; }

.pruefkarte__titel { margin: 0 0 var(--space-1); font-size: var(--fs-lg); }

.pruefkarte__kopf {
  color: var(--text-muted);
  font-size: var(--fs-md);
  margin: 0 0 var(--space-3);
}

.pruefkarte__text { margin: 0 0 var(--space-3); line-height: 1.6; }

.pruefkarte__daten {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 2px var(--space-3);
  margin: 0 0 var(--space-3);
  font-size: var(--fs-sm);
}

.pruefkarte__daten dt { color: var(--text-muted); }
.pruefkarte__daten dd { margin: 0; }

.pruefkarte__marke {
  display: inline-block;
  padding: 1px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--surface-soft);
  font-size: var(--fs-tiny);
  font-weight: 700;
  color: var(--text-muted);
}

.pruefkarte__marke--ok { background: var(--forest-soft); color: var(--forest); }
.pruefkarte__marke--pruefen { background: var(--gold-soft); color: var(--warning); }
.pruefkarte__marke--nicht_verwenden { background: var(--danger-soft); color: var(--danger); }

/* Die Duplikatwarnung faellt auf, ohne zu blockieren — entscheiden tut
   der Mensch, nicht die Warnung. */
.pruefkarte__warnung {
  padding: var(--space-2) var(--space-3);
  background: var(--gold-soft);
  border-left: 3px solid var(--gold);
  font-size: var(--fs-sm);
  margin: 0 0 var(--space-3);
}

.pruefkarte__grund {
  padding: var(--space-2) var(--space-3);
  background: var(--danger-soft);
  border-left: 3px solid var(--danger);
  font-size: var(--fs-sm);
  margin: 0 0 var(--space-3);
}

.pruefkarte__aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

.pruefkarte__aktionen .form__input { flex: 1 1 14rem; width: auto; }