/* Startseite: die Willkommenstafel (KONZEPT-BUEHNE.md). Mit Bühne ist die Karte das Bild und diese Tafel nur der kurze Gruß;
   ohne Bühne gehört ein Stimmungsbild dazu (.nur-ohne-buehne, siehe buehne.css). */

/* ---- Willkommen ---- */
.willkommen-bild {
  position: relative;
  height: clamp(14rem, 40vh, 28rem);
  overflow: hidden;
  background: var(--papier-2);
}
.start-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.willkommen-text { width: min(40rem, 100% - 2 * var(--rand-seite)); margin: 0 auto; padding-block: var(--r-6) var(--r-4); }
.willkommen-text h1 { margin-bottom: var(--r-3); }
.willkommen-satz { margin: 0 0 var(--r-3); font-size: var(--t-mittel); line-height: 1.5; color: var(--tinte-2); max-width: 32rem; }
.willkommen-hinweis { margin: 0; color: var(--tinte-2); }
.willkommen-hinweis.nur-ohne-buehne { margin-top: var(--r-4); display: flex; flex-wrap: wrap; gap: var(--r-2); }
.willkommen-film { margin: var(--r-3) 0 0; }
.willkommen-film .knopf { gap: .5rem; }
.start-nachweis { width: min(40rem, 100% - 2 * var(--rand-seite)); margin: 0 auto var(--r-4); font-size: var(--t-klein); color: var(--tinte-2); }

/* Wege: eine Liste großer Zeilen, am Handy und in der Tafel untereinander */
.willkommen-wege { width: min(40rem, 100% - 2 * var(--rand-seite)); margin: 0 auto; padding-bottom: var(--r-5); }
.willkommen-wege ul { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.weg-zeile {
  position: relative;
  display: flex;
  align-items: center;
  gap: min(1rem, 3vw);
  min-height: 4rem;
  padding: .6rem min(1rem, 3.4vw);
  background: var(--karte);
  border: var(--linienstaerke) solid var(--rand);
  border-radius: var(--rad-l);
  color: var(--tinte);
  text-decoration: none;
}
.weg-zeile:hover { border-color: var(--linie); }
.weg-zeichen { display: grid; place-items: center; flex: none; width: min(2.6rem, 12vw); height: min(2.6rem, 12vw); border-radius: var(--rad-m); background: var(--papier-2); color: var(--akzent); }
.weg-zeichen .symbol { width: 1.4rem; height: 1.4rem; }
.weg-text { display: block; min-width: 0; flex: 1; }
.weg-text strong { display: block; overflow-wrap: anywhere; hyphens: auto; font-family: var(--schrift-titel); font-size: 1.15rem; font-weight: 650; line-height: 1.2; }
.weg-text span { display: block; font-size: var(--t-klein); line-height: 1.3; color: var(--tinte-2); }
.weg-pfeil { flex: none; color: var(--akzent); }
.weg-pfeil .symbol { width: 1.4rem; height: 1.4rem; }
@media (hover: hover) {
  .weg-pfeil { transition: transform var(--d-beruehrung) var(--kurve-schieben); }
  .weg-zeile:hover .weg-pfeil { transform: translateX(4px); }
}
/* Ohne Bühne ist Platz: die Wege stehen als Raster */
@media (min-width: 60rem) {
  html:not(.buehne-an) .willkommen-wege { width: min(var(--huelle), 100% - 2 * var(--rand-seite)); }
  html:not(.buehne-an) .willkommen-wege ul { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: var(--r-4); }
  html:not(.buehne-an) .willkommen-text { width: min(var(--huelle), 100% - 2 * var(--rand-seite)); padding-top: var(--r-7); }
  html:not(.buehne-an) .willkommen-satz { max-width: 38rem; font-size: var(--t-gross); }
}

.zahlen { display: flex; flex-wrap: wrap; gap: var(--r-3) var(--r-7); margin: 0; padding-top: var(--r-5); border-top: 1px dotted var(--linie); }
.zahlen > div { display: flex; flex-direction: column-reverse; gap: .1rem; }
.zahlen dd { margin: 0; font-family: var(--schrift-titel); font-size: 2.4rem; font-weight: 650; line-height: 1; color: var(--akzent); font-variant-numeric: tabular-nums; }
.zahlen dt { font-size: var(--t-klein); font-weight: 650; color: var(--tinte-2); }

/* ---- Bildstreifen ---- */
/* Die Bilder laden erst, wenn der Bereich nah kommt (spart beim ersten Laden) */
.start-archiv { content-visibility: auto; contain-intrinsic-size: auto 26rem; }
.streifen { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 0 var(--rand-seite) var(--r-4); }
.streifen:focus-visible { outline-offset: -3px; }
.streifen-liste {
  display: flex;
  align-items: flex-start;
  gap: var(--r-4);
  width: max-content;
  min-width: min(var(--huelle), 100%);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.streifen-foto { flex: none; scroll-snap-align: center; max-width: 20rem; }
.streifen-foto a {
  display: block;
  padding: .45rem .45rem .7rem;
  background: var(--karte-2);
  border: var(--linienstaerke) solid var(--rand);
  color: var(--tinte);
  text-decoration: none;
}
.streifen-foto img { display: block; width: auto; height: 12rem; max-width: 100%; }
.streifen-unter { display: block; max-width: 16rem; margin-top: .5rem; line-height: 1.3; }
.streifen-unter strong { display: block; font-family: var(--schrift-titel); font-size: 1rem; font-weight: 650; }
.streifen-unter small { color: var(--tinte-2); }
.streifen-foto a:hover { border-color: var(--linie); }

/* ---- Zuletzt geändert ---- */
.zuletzt-liste { display: grid; gap: var(--r-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); margin: 0; padding: 0; list-style: none; }
.zuletzt-eintrag {
  display: flex;
  flex-direction: column;
  gap: var(--r-2);
  height: 100%;
  padding: var(--r-4) var(--r-5);
  background: var(--karte);
  border: var(--linienstaerke) solid var(--rand);
  border-left: 4px solid var(--ocker-fl);
  border-radius: var(--rad-m);
  color: var(--tinte);
  text-decoration: none;
}
.zuletzt-eintrag:hover { border-color: var(--linie); border-left-color: var(--akzent-fl); }
.zuletzt-eintrag strong { font-family: var(--schrift-titel); font-size: 1.2rem; font-weight: 650; line-height: 1.25; }
.zuletzt-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r-2) var(--r-3); font-size: var(--t-klein); color: var(--tinte-2); }
.zuletzt-text { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--t-basis); line-height: 1.5; color: var(--tinte-2); }
.zuletzt-alle { margin: var(--r-6) 0 0; }

/* ---- Mitmachen ---- */
.mitmachen-karte { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--r-5); }
.mitmachen-karte h2 { margin-bottom: var(--r-2); }
.mitmachen-karte p { margin: 0; max-width: 36rem; font-size: var(--t-mittel); color: var(--tinte-2); }