/*******************************************************************************
 wanderung.css – Wander-Einzelseiten (wanderungen/<name>/index.html):
 Infokacheln, Beschreibung, Foto-Überschrift. Vorschaubilder und Diashow: diashow.css
 Zusammen mit site.css, kopf.css und diashow.css verwenden (Script: ../js/diashow.js).
*******************************************************************************/

main { padding-top: 24px; }

/* ---------- Infokacheln (Route, Gehzeit, Karte, Anfahrt, Talort, Charakter) ----------
   Spaltenbreiten Desktop: grid-template-columns (Route/Anfahrt = breite erste Spalte) */
.winfo dl {
  margin: 0;
  display: grid; gap: 12px;
  grid-template-columns: 1.7fr 1fr 1fr;
}
.winfo dl > div {
  background: #eef4ef; border-radius: 12px; padding: 12px 16px;
}
.winfo dt { font-size: .95rem; font-weight: 700; color: var(--gruen); }
.winfo dd { margin: 2px 0 0; }

/* Tablet: 2 Spalten, breite Kacheln über die ganze Breite */
@media (max-width: 999px) {
  .winfo dl { grid-template-columns: 1fr 1fr; }
  .winfo dl > .breit { grid-column: 1 / -1; }
}
/* Handy: alles untereinander */
@media (max-width: 599px) {
  .winfo dl { grid-template-columns: 1fr; }
}

/* Karte-Kachel: Knöpfe nebeneinander, darunter Datum der Wanderung */
.knoepfe { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin: 6px 0 10px; }
.knoepfe .knopf { padding: .4em 1em; font-size: .95rem; }
.karte-kachel small { display: block; color: var(--text-leise); font-size: .85rem; }

/* ---------- Beschreibung: 2 Spalten (Spaltenbreite mind. 24 rem, sonst einspaltig) ---------- */
.wtext { margin-top: 28px; columns: 2 24rem; column-gap: 40px; }
.wtext h2 { column-span: all; font-size: 1.35rem; color: var(--gruen); margin: 0 0 8px; }
.wtext h3 { font-size: 1.1rem; color: var(--gruen); margin: 0 0 3px; }
.wtext p { margin: 0 0 12px; }
/* Links im Beschreibungstext (andere Wanderungen, Wegweiser-Fotos): dunkelgrün wie die Kachel-Titel (Marcel, 2026-10-30) */
.wtext a { color: var(--gruen); }

/* ---------- Fotos (Vorschaubilder: diashow.css) ---------- */
.fotos { margin-top: 28px; }
.fotos h2 { font-size: 1.35rem; color: var(--gruen); margin: 0 0 8px; }

/* Vorschaubilder der Wanderungen mit abgerundeten Ecken (Marcel, 2026-10-27, aus federispitz_test).
   Die Galerien (galerie.css) laden wanderung.css nicht und bleiben eckig.
   Radius hier ändern; passt zu den Kartenbildern der Übersicht. */
#thumbs img { border-radius: 6px; }

.warnung { color: #c00; }

@media (max-width: 600px) {
  .knoepfe .knopf { padding: .6em 1.1em; }
}