/* Layout: die Seite liest sich wie die Jubiläumsschrift von vorne nach hinten.
   Oben der beige Himmel mit dem „100“, unten läuft die Landschaft ins Grün,
   das Programm steht im Grün, danach führen die Hügel zurück ins Beige. */
@font-face { font-family: "Jost"; src: url("fonts/jost-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Jost"; src: url("fonts/jost-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Jost"; src: url("fonts/jost-latin-900-normal.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("fonts/spectral-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("fonts/spectral-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("fonts/spectral-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  color-scheme: light;
  --tanne: #1d3b23;
  --tanne-tief: #16301c;
  --salbei: #4e6852;
  --himmel: #e7ddc2;
  --beige: #f1ead8;
  --sand: #e2d7bb;
  --gold: #b0915a;
  --gold-hell: #dcc391;
  --creme: #f7f1e3;
  --schrift: "Jost", "Futura", "Century Gothic", sans-serif;
  --text: "Spectral", Georgia, "Times New Roman", serif;
  --breite: 70rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  background: var(--beige);
  color: var(--tanne);
  font: 400 1.125rem/1.65 var(--text);
  overflow-x: hidden;
  touch-action: manipulation;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--beige); }
::selection { background: var(--tanne); color: var(--creme); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-color: var(--gold); }
a:hover { color: var(--salbei); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--schrift); font-weight: 900; line-height: 1.02; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(2.5rem, 7vw, 4.75rem); text-transform: uppercase; }
p { margin: 0; max-width: 62ch; text-wrap: pretty; }

.sprung {
  position: absolute; left: 1rem; top: -4rem; z-index: 30;
  background: var(--tanne); color: var(--creme); padding: 0.6rem 1rem; font-family: var(--schrift); font-weight: 700;
}
.sprung:focus, .sprung:hover { top: 0.5rem; color: var(--creme); }

.rahmen {
  width: 100%;
  max-width: calc(var(--breite) + 2 * max(20px, env(safe-area-inset-left, 0px)));
  margin-inline: auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.abschnitt { padding-block: clamp(3.5rem, 8vw, 6rem); }
.abschnitt > .rahmen { display: grid; gap: clamp(2rem, 5vw, 3rem); }
.abschnitt h2 { color: var(--tanne); }

/* Kopfleiste */
.leiste {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: var(--himmel);
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
}
.leiste .rahmen { display: flex; align-items: center; gap: 1.5rem; min-height: 4rem; }
.marke { display: flex; align-items: center; gap: 0.6rem; font: 900 1.1rem/1 var(--schrift); text-transform: uppercase; text-decoration: none; margin-right: auto; white-space: nowrap; }
.marke img { width: 2.5rem; height: 2.5rem; }
.leiste nav { display: flex; gap: 1.5rem; }
.leiste nav a { font: 700 1rem/1 var(--schrift); text-decoration: none; }
.leiste nav a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; color: var(--tanne); }

.knopf {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  background: var(--tanne);
  color: var(--creme);
  font: 700 1.125rem/1.1 var(--schrift);
  text-decoration: none;
  text-align: center;
  border: 2px solid var(--tanne);
  border-radius: 2px;
  transition: background-color 160ms ease-out, color 160ms ease-out, border-color 160ms ease-out;
}
.knopf:hover { background: var(--tanne-tief); border-color: var(--tanne-tief); color: var(--gold-hell); }
.knopf.leer { background: transparent; color: var(--tanne); }
.knopf.leer:hover { background: var(--tanne); color: var(--creme); border-color: var(--tanne); }
.knopf.gold { background: var(--gold-hell); border-color: var(--gold-hell); color: var(--tanne-tief); }
.knopf.gold:hover { background: var(--creme); border-color: var(--creme); color: var(--tanne-tief); }
.leiste .knopf { font-size: 1rem; padding: 0.5rem 1rem; }

/* Eröffnung wie der Umschlag der Festschrift */
.buehne { background: linear-gradient(180deg, var(--himmel), #f1ead8 62%); }
.buehne .rahmen {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: end;
  padding-top: clamp(2rem, 5vw, 3.75rem);
  position: relative;
  z-index: 1;
}
.umschlag { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 0.65rem; min-width: 0; }
.jahreszahl {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font: 700 clamp(0.75rem, 1.5vw, 1rem)/1 var(--schrift); letter-spacing: 0.14em;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 0.6rem;
  align-self: stretch;
  text-align: right;
  grid-row: 1;
}
.umschlag h1 { display: contents; }
.umschlag .logo { grid-column: 2; grid-row: 1; width: 100%; }
.jahre {
  grid-column: 3; grid-row: 1; align-self: end;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font: 900 clamp(1.5rem, 3.6vw, 2.5rem)/0.78 var(--schrift); letter-spacing: 0.04em;
}
.name-wrap { grid-column: 2; grid-row: 2; container-type: inline-size; margin-top: 0.85rem; }
.name { display: block; font-size: 10.1cqw; line-height: 1; white-space: nowrap; }
.wann { display: grid; gap: 1.1rem; justify-items: start; min-width: 0; padding-bottom: 0.25rem; }
.motto { font: italic 400 clamp(1.3rem, 2.5vw, 1.6rem)/1.25 var(--text); }
.datum { font: 900 clamp(2.75rem, 5.6vw, 4rem)/1 var(--schrift); }
.datum span { display: block; font-weight: 500; font-size: 0.5em; margin-top: 0.3rem; color: var(--salbei); }
.ort { font-size: 1.2rem; line-height: 1.4; }
.taten { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.kalender { justify-self: start; color: var(--tanne); font: 500 1.05rem/1.4 var(--schrift); text-decoration: underline; text-underline-offset: 0.2em; }
.kalender:hover { color: var(--gold); }
.landschaft-bild {
  position: relative;
  margin-top: clamp(-3rem, -3vw, -1rem);
  animation: aufgehen 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.landschaft {
  width: 100%;
  aspect-ratio: 1677 / 912;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 9%);
  mask-image: linear-gradient(180deg, transparent, #000 9%);
}
/* Die Fahne liegt als eigenes Bild über dem Himmel, fest.js lässt sie wehen */
.wehe { position: absolute; left: 88.372%; top: 9.868%; width: 7.752%; pointer-events: none; }
.wehe img { width: 100%; }
.wehe.weht img { visibility: hidden; }
@keyframes aufgehen { from { transform: translateY(1.25rem); } to { transform: none; } }

/* Grüner Teil: Gruß und Programm */
.gruen { background: var(--tanne); color: var(--creme); margin-top: -1px; }
.gruen h2 { color: var(--creme); }
.gruen a:hover { color: var(--gold-hell); }
.gruss { position: relative; padding-block: 0.5rem 0; }
.gruss .rahmen { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 6vw, 5rem); align-items: center; }
.gruss .rahmen > p { font-size: clamp(1.3rem, 2.6vw, 1.65rem); line-height: 1.45; max-width: 44ch; }
.fass-feld { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; align-items: center; }
.fass-feld[hidden] { display: none; }
.fass { display: block; width: 100%; height: auto; overflow: visible; }
.hammer { transform: rotate(13deg); transform-origin: 272px 204px; }
.fass.schlag .hammer { animation: schlagen 340ms cubic-bezier(0.5, 0, 0.3, 1); }
@keyframes schlagen { 45% { transform: rotate(-22deg); } }
.fass.schlag .rumpf { animation: ruck 220ms 120ms ease-out; }
@keyframes ruck { 30% { transform: translateX(-3px); } }
.strahl { transform: scaleY(0); transform-origin: 212px 147px; transition: transform 260ms ease-in 160ms; }
.fass.laeuft .strahl { transform: none; }
.lache { transform: scale(0); transform-origin: 212px 212px; transition: transform 240ms ease-out 400ms; }
.fass.laeuft .lache { transform: none; }
.spritzer { opacity: 0; }
.fass.schlag .spritzer { animation: spritzen 420ms 120ms ease-out; }
@keyframes spritzen { 20% { opacity: 1; } 100% { opacity: 0; transform: translate(14px, -22px); } }
.fass-text { display: grid; gap: 0.5rem; justify-items: start; min-width: 0; }
.fass-text .knopf { padding: 0.3rem 0.85rem; font-size: 1rem; background: transparent; border-width: 1px; border-color: var(--gold-hell); color: var(--gold-hell); }
.fass-text .knopf:hover { background: var(--gold-hell); border-color: var(--gold-hell); color: var(--tanne-tief); }
.gruss .tage { font: 500 1.05rem/1.25 var(--schrift); max-width: none; }
.tage b { font-weight: 900; font-size: 2rem; line-height: 1; color: var(--gold-hell); font-variant-numeric: tabular-nums; }
.gruss .anstich-meldung { font-size: 1rem; line-height: 1.35; min-height: 1.35em; }
.gruss .anstich-gesamt { font-size: 1rem; line-height: 1.35; color: var(--sand); }

.tag {
  display: grid;
  grid-template-columns: 11.5rem minmax(0, 1fr);
  gap: 1rem 2.5rem;
  padding-block: 2.25rem;
  border-top: 1px solid color-mix(in srgb, var(--gold-hell) 45%, transparent);
}
.tag h3 { font-size: 2.1rem; text-transform: uppercase; }
.tag h3 span { display: block; font-weight: 500; font-size: 0.62em; margin-top: 0.35rem; color: var(--gold-hell); }
.tagliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; min-width: 0; }
.punkt { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) 9.5rem; gap: 0.25rem 1.25rem; align-items: start; }
.punkt time, .punkt .zeit-wort { font: 700 1.25rem/1.55 var(--schrift); color: var(--gold-hell); font-variant-numeric: tabular-nums; }
.was { min-width: 0; }
.was strong { display: block; font-weight: 600; font-size: 1.3rem; line-height: 1.3; }
.was span { display: block; font-size: 1rem; color: var(--sand); line-height: 1.45; }
.punkt img { justify-self: end; max-height: 5.5rem; width: auto; max-width: 100%; }
.punkt.gross { grid-template-columns: 4.5rem minmax(0, 1fr) 13rem; }
.punkt.gross time { padding-top: 0.35rem; }
.punkt.gross img, .punkt.haupt img { align-self: center; }
.punkt.gross img { max-height: 8rem; }
.punkt.gross strong { font-size: 2rem; }
.abend { display: grid; gap: 1.5rem; margin-inline: -1.5rem; padding: 1.75rem 1.5rem; background: var(--tanne-tief); border-radius: 2px; }
.abend-ticket { display: flex; justify-content: center; }
.abend-ticket .knopf { margin-top: 0; font-size: 1.2rem; }
.punkt.haupt { grid-template-columns: 4.5rem minmax(0, 1fr) 17rem; }
.punkt.haupt time { padding-top: clamp(0.4rem, 1.1vw, 0.9rem); }
.punkt.haupt img { justify-self: end; max-height: 14rem; }
.punkt.haupt strong { font-size: clamp(2.25rem, 4.6vw, 3.5rem); line-height: 1.05; }
.punkt.haupt .was span { font-size: 1.15rem; }
.vorstellung { margin-top: 0.4rem; font-size: 1.05rem; line-height: 1.45; max-width: 60ch; }
.punkt.haupt .vorstellung { font-size: 1.15rem; margin-top: 0.75rem; }
.punkt .knopf { margin-top: 0.75rem; }
.hoeren { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin-top: 0.75rem; font: 700 1.05rem/1.4 var(--schrift); }
.punkt.laeuft { position: relative; }
.punkt.laeuft::before { content: ""; position: absolute; left: -0.75rem; top: 0; bottom: 0; width: 3px; background: var(--gold-hell); }
.punkt.laeuft time { color: var(--creme); }

.huegel { display: block; width: 100%; height: clamp(6rem, 14vw, 12rem); margin-block: -1px; }
.huegel.oben { background: var(--tanne); }
.huegel.unten { background: var(--sand); }

.bannerbild { display: block; width: 100%; height: auto; }

/* Folgt uns: oben im dunklen Fuß, die bunten Zeichen dürfen hier leuchten */
.folgen { padding-bottom: 2.5rem; }
.fuss .folgen { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.5rem clamp(2.5rem, 7vw, 6rem); align-items: center; }
.folgen h2 { font-size: clamp(2.25rem, 5vw, 3.25rem); text-transform: uppercase; }
.kanaele { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem 2rem; }
.kanaele a { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.75rem; align-items: center; color: var(--creme); text-decoration: none; }
.kanaele svg { grid-row: span 2; transition: transform 160ms ease-out; }
.kanaele strong { font: 700 1.25rem/1.2 var(--schrift); align-self: end; }
.kanaele span { font-size: 1rem; line-height: 1.3; color: var(--sand); overflow-wrap: anywhere; align-self: start; }
.kanaele a:hover strong { color: var(--gold-hell); text-decoration: underline; text-decoration-color: var(--gold); }
.kanaele a:hover svg { transform: scale(1.08); }

/* Die Fahne: hängt an der Querstange und lässt sich drehen */
.fahne-raster { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); align-items: center; gap: clamp(2.5rem, 6vw, 5rem); }
.fahne-text { display: grid; gap: 1.1rem; justify-items: start; min-width: 0; }
.fahne-text h2 { font-size: clamp(2.25rem, 5vw, 3.75rem); }
.fahne-tipp { font-size: 1rem; color: var(--sand); }
.fahne-buehne { position: relative; padding: 0.75rem 4% 0; perspective: 1500px; cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.fahne-buehne:active { cursor: grabbing; }
.fahne-dreh { position: relative; aspect-ratio: 1000 / 970; transform-style: preserve-3d; will-change: transform; }
.seite { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.seite.hinten { transform: rotateY(180deg); }
.seite img { width: 100%; height: 100%; }
.querstange { position: absolute; left: -3.5%; right: -3.5%; top: -0.6rem; height: 1.1rem; border-radius: 0.55rem; background: linear-gradient(180deg, #8b7144, var(--gold-hell) 38%, #79623a); box-shadow: 0 0.2rem 0.35rem rgb(0 0 0 / 0.4); }
.querstange::before, .querstange::after { content: ""; position: absolute; top: 50%; width: 1.7rem; height: 1.7rem; margin-top: -0.85rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--creme), var(--gold-hell) 40%, #79623a); }
.querstange::before { left: -0.9rem; }
.querstange::after { right: -0.9rem; }

/* Jetzt auf der Bühne: nur während des Festes sichtbar */
.jetzt { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; display: flex; flex-wrap: wrap; gap: 0.1rem 1.5rem; align-items: baseline; justify-content: center; padding: 0.7rem max(20px, env(safe-area-inset-right, 0px)) calc(0.7rem + env(safe-area-inset-bottom, 0px)); background: var(--tanne-tief); color: var(--creme); border-top: 2px solid var(--gold-hell); font: 500 1.05rem/1.3 var(--schrift); text-decoration: none; }
.jetzt[hidden] { display: none; }
.jetzt:hover { color: var(--creme); }
.jetzt b { font-weight: 900; color: var(--gold-hell); }
.jetzt span { color: var(--sand); }
body.fest { padding-bottom: 4.5rem; }

/* Tickets */
.kasse-raster { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
.kopf { display: grid; gap: 1.1rem; justify-items: start; min-width: 0; }
.kopf p { font-size: 1.2rem; }
.kasse { display: grid; gap: 1.1rem; min-width: 0; margin: 0; }
.kasse div { padding-top: 0.8rem; border-top: 1px solid var(--gold); }
.kasse dt { font: 700 1.3rem/1.2 var(--schrift); }
.kasse dd { margin: 0.1rem 0 0; }

/* Anfahrt und Vereine */
.zwei { background: var(--sand); }
.zwei.hell { background: var(--beige); }
.zwei .rahmen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(3rem, 7vw, 6rem); }
.zwei article { display: grid; gap: 1.1rem; align-content: start; justify-items: start; min-width: 0; }
.zwei h2 { font-size: clamp(2.25rem, 5vw, 3.25rem); }
.adresse { font-size: 1.25rem; line-height: 1.4; font-style: normal; }

/* Geschichte */
.zeit { list-style: none; margin: 0; padding: 0; display: grid; }
.zeit li {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: 0.25rem 2.5rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--gold);
}
.zeit .jahr { font: 900 2.75rem/1.05 var(--schrift); }
.zeit strong { display: block; font-weight: 600; font-size: 1.3rem; line-height: 1.3; margin-bottom: 0.2rem; }
.gruppe { margin: 0; display: grid; gap: 0.6rem; }
.gruppe img { width: 100%; border-radius: 2px; }
.gruppe figcaption { font-style: italic; color: var(--salbei); }

/* Fragen */
.fragen { display: grid; max-width: 50rem; }
details { border-top: 1px solid var(--gold); }
details:last-child { border-bottom: 1px solid var(--gold); }
summary { cursor: pointer; padding-block: 1rem; font: 700 1.2rem/1.3 var(--schrift); }
summary::marker { color: var(--gold); }
details p { padding-bottom: 1.25rem; }

/* Fuß */
.fuss { background: var(--tanne); color: var(--creme); padding-block: 1.5rem 3rem; font-size: 1rem; }
.fuss .rahmen { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; align-items: center; justify-content: space-between; }
.fuss img { width: 5.5rem; height: 5.5rem; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 1.5rem; font-family: var(--schrift); font-weight: 700; }
.fuss a:hover { color: var(--gold-hell); }
.fuss .motto { font-size: 1.3rem; }

/* Rechtstexte */
.recht { padding-block: clamp(3rem, 7vw, 5rem); }
.recht .rahmen { max-width: 46rem; display: grid; gap: 1rem; }
.recht h1 { font-size: clamp(2.5rem, 7vw, 3.75rem); text-transform: uppercase; margin-bottom: 1rem; }
.recht h2 { font: 700 1.25rem/1.3 var(--schrift); text-transform: none; margin-top: 1.5rem; }

@media (max-width: 54rem) {
  .leiste nav { display: none; }
  /* Unten rechts sitzt das Netlify-Schild, deshalb die Leiste hier unter den Kopf */
  .jetzt { top: calc(env(safe-area-inset-top, 0px) + 4.0625rem); bottom: auto; padding-bottom: 0.7rem; border-top: 0; border-bottom: 2px solid var(--gold-hell); }
  body.fest { padding-bottom: 0; }
  body.fest main { padding-top: 5.75rem; }
  html:has(body.fest) { scroll-padding-top: 10.5rem; }
  .buehne .rahmen, .kasse-raster, .zwei .rahmen, .fahne-raster, .gruss .rahmen { grid-template-columns: minmax(0, 1fr); }
  .landschaft-bild { margin-top: 0; }
  .fuss .folgen, .kanaele { grid-template-columns: minmax(0, 1fr); }
  .fahne-buehne { max-width: 34rem; width: 100%; justify-self: center; }
  .tag { grid-template-columns: minmax(0, 1fr); }
  .tag h3 { display: flex; align-items: baseline; gap: 0.75rem; }
  .tag h3 span { margin-top: 0; }
  .punkt.gross { grid-template-columns: 4.5rem minmax(0, 1fr) 11rem; }
  .punkt.haupt { grid-template-columns: 4.5rem minmax(0, 1fr) 13rem; }
  .zeit li { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 38rem) {
  body { font-size: 1.0625rem; }
  .punkt, .punkt.gross, .punkt.haupt { grid-template-columns: 3.75rem minmax(0, 1fr); }
  .punkt img { grid-column: 2; justify-self: start; max-height: 4.5rem; margin-top: 0.4rem; }
  .punkt.gross img { max-height: 6.5rem; }
  .abend { margin-inline: -1rem; padding: 1.5rem 1rem; }
  .punkt.haupt img { justify-self: start; max-height: 11rem; }
  .taten { width: 100%; }
  .taten .knopf { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .landschaft-bild, .fass.schlag .hammer, .fass.schlag .rumpf, .fass.schlag .spritzer { animation: none; }
  .knopf, .strahl, .lache, .kanaele svg { transition: none; }
}