/* ==========================================================
   Erlebnis Wald Nordhessen – Stylesheet
   Aufbau: Mobile First → Anpassungen ab 768px und 1100px
   ========================================================== */


/* ---------- Variablen ---------- */
:root {
  /* Farben */
  --gruen:   #819828;
  --gruen-text:   #5a6a1a;   /* Grün für Text auf Beige (Kontrast 4,8:1) */
  --gruen-hell:   #93ab30;   /* Grün für Text auf Braun (Kontrast 5,2:1) */
  --gruen-dunkel: #667a1e;   /* Grün als Fläche unter weißer Schrift (Kontrast 4,8:1) */
  --braun:   #422918;
  --oliv:    #434c1d;
  --taupe:   #a38276;
  --beige:   #f3e4d8;   /* heller Hintergrund, abgeleitet von Taupe */
  --weiss:   #ffffff;

  /* Schriften */
  --font-headline: "kiln-sans", "Arial Narrow", sans-serif;
  --font-text:     "playpen-sans", "Trebuchet MS", sans-serif;

  /* Abstände */
  --rand: 1.5rem;
  --abstand-section: 4rem;

  /* Höhe der Baumreihen (Mission + Footer). Wächst mit der Breite im
     Seitenverhältnis der Grafik (1200 × 120 = 10:1) → auf breiten
     Bildschirmen werden die Baumspitzen nie abgeschnitten */
  --baum-hoehe: max(4.5rem, 10vw);
}


/* ---------- Grundlagen ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--braun);
  background-color: var(--beige);
}

img {
  display: block;
  max-width: 100%;
}

h1, h2, p, ul {
  margin: 0;
}

a {
  color: inherit;
}

.container {
  position: relative;          /* liegt über den Deko-Grafiken */
  z-index: 1;
  width: 100%;
  max-width: 60rem;
  margin: 0 auto;
  padding: 0 var(--rand);
}

/* Überschriften im Kiln-Look */
.headline {
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.headline--gross {
  font-size: 2.5rem;
}


/* ---------- Navigation / Burger-Menü ---------- */
.menu-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  width: 3rem;
  height: 3rem;
  padding: 0 0.7rem;
  border: none;
  border-radius: 0.8rem;
  background-color: var(--gruen);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.menu-toggle span {
  display: block;
  height: 3px;
  border-radius: 2px;
  background-color: var(--weiss);
  transition: transform 0.3s, opacity 0.3s, width 0.3s;
}

/* unterschiedlich lange Striche wie im Entwurf */
.menu-toggle span:nth-child(1) { width: 100%; }
.menu-toggle span:nth-child(2) { width: 75%; }
.menu-toggle span:nth-child(3) { width: 55%; }

/* Menü offen → X */
.menu-toggle[aria-expanded="true"] span { width: 100%; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Menü als Seitenleiste, die von rechts herausfährt */
.main-nav {
  position: fixed;
  top: 0;
  right: -2px;                     /* ragt 2px über den Rand: keine Haarlinie bei krummen Pixelverhältnissen */
  bottom: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  width: calc(min(85vw, 22rem) + 2px);
  padding: 5rem calc(2.5rem + 2px) 3rem 2.5rem;
  background-color: var(--braun);
  box-shadow: -8px 0 30px rgba(0, 0, 0, 0.35);
  visibility: hidden;              /* geschlossen: Links nicht per Tab erreichbar */
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.45s;
}

.main-nav.ist-offen {
  visibility: visible;
  transform: none;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}

/* abgedunkelte Seite links neben dem Panel – Klick darauf schließt das Menü (main.js) */
.site-header::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 85;
  background-color: rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s, visibility 0s linear 0.4s;
}

.site-header.menu-offen::after {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s, visibility 0s;
}

.main-nav ul {
  list-style: none;
  padding: 0;
}

.main-nav li + li {
  margin-top: 1.25rem;
}

/* Links rutschen nacheinander hinterher */
.main-nav li {
  opacity: 0;
  transform: translateX(1.5rem);
  transition: opacity 0.3s, transform 0.3s;
}

.main-nav.ist-offen li {
  opacity: 1;
  transform: none;
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.main-nav.ist-offen li:nth-child(1) { transition-delay: 0.15s; }
.main-nav.ist-offen li:nth-child(2) { transition-delay: 0.22s; }
.main-nav.ist-offen li:nth-child(3) { transition-delay: 0.29s; }

.main-nav a {
  font-family: var(--font-headline);
  font-size: 1.8rem;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--beige);
  transition: color 0.2s;
}

.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav a[aria-current="page"] {
  color: var(--gruen);
}


/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  color: var(--weiss);
  text-align: center;
}

.hero__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;      /* Motiv-Ausschnitt pro Foto per style="object-position: …" im HTML */
  will-change: transform;        /* Parallax: Verschiebung per JS (main.js) */
}

/* dunkler Schleier für bessere Lesbarkeit */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.45));
}

.hero__inhalt {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--rand) 20vh;   /* Logo sitzt etwas über der Mitte, nicht auf den Gesichtern */
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.logo__icon {
  width: 3.5rem;
  height: 3.5rem;
  color: var(--weiss);
  transform: rotate(-10deg);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}

.logo__text {
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: 2.2rem;
  line-height: 1;
  text-transform: uppercase;
  text-align: right;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.logo__text span {
  display: block;
  font-family: var(--font-text);
  font-size: 0.95rem;
  text-transform: none;
}

/* Claim + Pfeil als Gruppe unten im Hero */
.hero__unten {
  position: absolute;
  bottom: 1.5rem;
  left: 0;
  right: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 0 var(--rand);
}

.hero__claim {
  font-size: 1rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

/* "Reinschreiben": main.js packt jeden Buchstaben in ein span.buchstabe
   und setzt --i (Position im Text) → jeder Buchstabe startet etwas später */
.hero__claim .wort {
  white-space: nowrap;            /* Wörter nicht mitten im Wort umbrechen */
}

.hero__claim .buchstabe {
  display: inline-block;
  animation: schreiben 0.35s ease-out backwards;
  animation-delay: calc(1.2s + var(--i) * 0.06s);
}

@keyframes schreiben {
  from {
    opacity: 0;
    transform: translateY(4px) rotate(-6deg);
    filter: blur(2px);
  }
}

/* Pfeil erscheint erst, wenn der Text fertig geschrieben ist */
.hero__pfeil {
  display: block;
  width: 1.75rem;
  color: var(--weiss);
  opacity: 0.85;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.4));
  animation: wippen 2.4s ease-in-out 4.8s infinite;
}

.hero__pfeil path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* "Zeichnen"-Effekt: Linie wird wie mit dem Stift gezogen */
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.pfeil__linie  { animation: zeichnen 1.2s ease-in-out 3.2s backwards; }
.pfeil__spitze { animation: zeichnen 0.4s ease-out 4.4s backwards; }

/* opacity 0 → 1 im ersten Moment: sonst zeigen die runden Linienenden
   (stroke-linecap: round) vor dem Zeichnen zwei kleine Punkte */
@keyframes zeichnen {
  0%   { stroke-dashoffset: 1; opacity: 0; }
  1%   { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
/* leichtes Wippen mit etwas Schräglage – wirkt verspielter */
@keyframes wippen {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30%      { transform: translateY(6px) rotate(-4deg); }
  60%      { transform: translateY(2px) rotate(3deg); }
}


/* ---------- Unterseiten: kleiner Seitenkopf ---------- */
/* nutzt .hero (Foto, Schleier, Parallax) – nur niedriger */
.hero--klein {
  min-height: 60vh;
  min-height: 60svh;
}

/* etwas dunklerer Schleier – Unterseiten-Fotos sind teils sehr hell */
.hero--klein::after {
  background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.55));
}

.seitenkopf {
  padding-bottom: 3rem;            /* statt 20vh wie auf der Startseite */
}

/* kleines Logo oben links, führt zur Startseite */
.seitenlogo {
  position: absolute;
  top: 1.1rem;
  left: 1rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--weiss);
  text-decoration: none;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.4));
}

.seitenlogo__icon {
  width: 2.1rem;
  height: 2.1rem;
  transform: rotate(-10deg);
}

.seitenlogo__text {
  font-family: var(--font-headline);
  font-size: 1.35rem;
  line-height: 1;
  text-transform: uppercase;
}

.seitenlogo:hover .seitenlogo__icon,
.seitenlogo:focus-visible .seitenlogo__icon {
  transform: rotate(0deg);
}

.seitenlogo:focus-visible {
  outline: 3px dashed var(--weiss);
  outline-offset: 4px;
}

.seitenkopf__titel {
  position: relative;
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: 2.75rem;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* Zusatzzeile (z. B. Jahreszahl) wie handschriftlich dazugeschrieben */
.seitenkopf__zusatz {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 0.6em;
  color: var(--gruen);
  text-transform: none;
  transform: rotate(-4deg);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 2px 12px rgba(0, 0, 0, 0.7);   /* lesbar auch auf hellen Fotos */
}

/* beige Welle zwischen Seitenkopf und Inhalt.
   Die Hülle hat keine Höhe; das SVG ragt nach oben ins Foto
   und 3px in den beigen Abschnitt darunter → keine Haarlinie */
.welle-uebergang {
  position: relative;
  z-index: 2;                      /* über dem Foto des Seitenkopfs */
  height: 0;
}

.welle-uebergang svg {
  position: absolute;
  bottom: -3px;
  left: 0;
  display: block;
  width: 100%;
  height: 2.5rem;
  fill: var(--beige);
  transform: scale(-1, -1);        /* Welle zeigt nach oben, gespiegelt für Abwechslung */
}

/* Einleitungstext */
.einleitung {
  padding: 3rem 0 var(--abstand-section);
}

.einleitung__text {
  max-width: 34rem;
  margin: 0 auto;
  font-size: 1.15rem;
  line-height: 1.6;
  text-align: center;
}

.deko--e1 { width: 7rem; top: 1rem;     left: -2.5rem; transform: rotate(-14deg); }
.deko--e2 { width: 6rem; bottom: 3rem; right: -1.5rem; transform: rotate(16deg); }   /* über der Welle */

/* ist die Einleitung der letzte Abschnitt, Form über die Footer-Bäume heben */
.einleitung.vor-footer .deko--e2 { bottom: calc(var(--baum-hoehe) + 1.5rem); }


/* ---------- Veranstaltung (wiederverwendbarer Abschnitt) ---------- */
/* Farbwechsel braun/beige – so steht jede Veranstaltung für sich.
   Achtung: nth-of-type zählt ALLE <section> in main (Seitenkopf = 1, Einleitung = 2),
   die erste Veranstaltung ist also Nr. 3 → braun, die nächste Nr. 4 → beige usw. */
.veranstaltung {
  --abschnitt-farbe: var(--braun);
  position: relative;
  z-index: 1;                      /* jede Welle liegt über dem Abschnitt davor */
  padding: var(--abstand-section) 0;
  color: var(--beige);
  background-color: var(--abschnitt-farbe);
}

.veranstaltung:nth-of-type(even) {
  --abschnitt-farbe: var(--beige);
  color: var(--braun);
}

/* Welle als Übergang oben: ragt in den Abschnitt darüber, in der eigenen Farbe.
   Form = grafiken/welle.svg (gespiegelt), als Maske → Farbe kommt per CSS.
   Überlappt 3px nach unten, damit keine Haarlinie entsteht.
   Nutzbar für jeden Abschnitt: Klasse .welle-oben + --abschnitt-farbe setzen. */
.welle-oben {
  position: relative;
  z-index: 1;
  background-color: var(--abschnitt-farbe);
}

.veranstaltung::before,
.welle-oben::before {
  content: "";
  position: absolute;
  bottom: calc(100% - 3px);
  left: 0;
  width: 100%;
  height: 2.5rem;
  background-color: var(--abschnitt-farbe);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath transform='matrix(1 0 0 -1 0 60)' d='M0 0H1200V18C1050 50 900 8 720 30C540 52 380 10 220 34C130 47 60 40 0 26Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath transform='matrix(1 0 0 -1 0 60)' d='M0 0H1200V18C1050 50 900 8 720 30C540 52 380 10 220 34C130 47 60 40 0 26Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}

/* jede zweite Welle horizontal gespiegelt – wirkt weniger gleichförmig */
.veranstaltung:nth-of-type(even)::before {
  transform: scaleX(-1);
}

.veranstaltung__raster {
  display: grid;
  gap: 2.5rem;
}

/* Foto mit weißem Rahmen wie im Willkommen-Abschnitt */
.veranstaltung__bild {
  position: relative;
  margin: 0 0.5rem 0 0;
}

.veranstaltung__bild img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 0.4rem solid var(--weiss);
  border-radius: 1.6rem 2.6rem 1.2rem 2.2rem;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

/* Variante --nacht: dunkler, bläulicher Schleier über dem Foto.
   Liegt innerhalb des weißen Rahmens (inset = Rahmenbreite) und
   dreht sich genauso mit wie das Foto (--foto-drehung). */
.veranstaltung__bild {
  --foto-drehung: 2deg;
}

.veranstaltung__bild img {
  transform: rotate(var(--foto-drehung));
}

.veranstaltung__bild--nacht::after,
.veranstaltung__bild--winter::after {
  content: "";
  position: absolute;
  inset: 0.4rem;
  border-radius: 1.2rem 2.2rem 0.8rem 1.8rem;
  transform: rotate(var(--foto-drehung));
  pointer-events: none;
}

.veranstaltung__bild--nacht::after {
  background: linear-gradient(rgba(12, 16, 38, 0.55), rgba(20, 14, 30, 0.75));
}

/* Variante --winter: Farben entsättigt + kühler, hellblauer Schleier */
.veranstaltung__bild--winter img {
  filter: saturate(0.4) brightness(1.08);
}

.veranstaltung__bild--winter::after {
  background: linear-gradient(rgba(220, 238, 250, 0.4), rgba(110, 150, 200, 0.4));
}

/* grünes Datums-Etikett, schräg aufs Foto geklebt */
.datum {
  position: absolute;
  z-index: 1;                      /* über dem Nacht-Schleier */
  top: -1rem;
  left: -0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 0.9rem 0.6rem;
  border-radius: 0.9rem 1.3rem 0.8rem 1.1rem;
  color: var(--weiss);
  background-color: var(--gruen-dunkel);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
  transform: rotate(-7deg);
}

.datum__tag {
  font-family: var(--font-headline);
  font-size: 2.4rem;
  line-height: 1;
}

.datum__monat {
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.2;
  white-space: nowrap;
}

.veranstaltung__titel {
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 1.05;
  text-transform: uppercase;
}

.veranstaltung__text {
  margin-top: 1rem;
  font-size: 1.05rem;
}

/* Highlights-Box: gepunkteter Rahmen greift den Wanderweg auf */
.highlights {
  margin-top: 2rem;
  padding: 1.25rem 1.25rem 1.5rem;
  border: 2px dotted var(--taupe);
  border-radius: 1.2rem 1.8rem 1rem 1.5rem;
}

.highlights__titel {
  margin: 0 0 0.75rem;
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: 1.4rem;
  text-transform: uppercase;
  color: var(--gruen-hell);
}

.highlights__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.6rem 1.5rem;
  padding: 0;
  list-style: none;
}

/* kleine Tanne als Aufzählungszeichen */
.highlights__liste li {
  padding-left: 1.75rem;
  font-weight: 700;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath fill='%23819828' d='M10 0l5 7h-2.5l5 7H14l6 7H0l6-7H2.5l5-7H5zM8.5 21h3v3h-3z'/%3E%3C/svg%3E") left 0.2em / 1.05rem no-repeat;
}

/* ---------- Führungen & Workshops: Steckbrief-Karten ---------- */
/* anderes Layout als die Veranstaltungen: Karten im Raster statt breiter Abschnitte */
.programme {
  --abschnitt-farbe: var(--braun);
  padding: var(--abstand-section) 0;
}

.programme__raster {
  display: grid;
  gap: 3rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* eine Karte = ein Programm */
.programm {
  --karten-drehung: -1deg;
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0.5rem 1.5rem;
  border-radius: 1.4rem 2.2rem 1.2rem 1.8rem;
  color: var(--braun);
  background-color: var(--weiss);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
  transform: rotate(var(--karten-drehung));
}

.programm:nth-child(even) { --karten-drehung: 1deg; }

.programm__bild {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 1rem 1.8rem 0.8rem 1.4rem;
}

/* Titel als grünes Etikett, das aufs Foto geklebt ist */
.programm__titel {
  align-self: flex-start;
  margin: -1.6rem 0 0 1rem;
  padding: 0.45rem 1rem 0.35rem;
  border-radius: 0.7rem 1rem 0.6rem 0.9rem;
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--weiss);
  background-color: var(--gruen-dunkel);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  transform: rotate(-2.5deg);
}

/* Steckbrief: Zeilen mit Icon, Begriff und Wert, gepunktet getrennt */
.steckbrief {
  margin: 1.25rem 1rem 0;
}

.steckbrief__zeile {
  display: grid;
  grid-template-columns: 1.75rem auto 1fr;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0;
  border-bottom: 2px dotted rgba(163, 130, 118, 0.5);
}

.steckbrief__zeile:first-child {
  border-top: 2px dotted rgba(163, 130, 118, 0.5);
}

.steckbrief__icon {
  width: 1.6rem;
  height: 1.6rem;
}

.steckbrief dt {
  font-family: var(--font-headline);
  font-size: 1.05rem;
  text-transform: uppercase;
  color: var(--oliv);
}

.steckbrief dd {
  margin: 0;
  font-weight: 700;
}

.programm__text {
  margin: 1.25rem 1rem 0;
}

/* einleitende Frage, handschriftlich wie bei den Veranstaltungen */
.programm__frage {
  margin: 1.25rem 1rem 0;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--oliv);
  transform: rotate(-1.5deg);
  transform-origin: left center;
}

.programm__frage + .programm__text {
  margin-top: 0.5rem;
}


/* ---------- Angebote für Schulen ---------- */
.schulen {
  --abschnitt-farbe: var(--beige);
  padding: var(--abstand-section) 0;
  color: var(--braun);
}

.schulen__raster {
  display: grid;
  gap: 2rem;
}

.schulen__text {
  margin-top: 1rem;
  font-size: 1.1rem;
}

.themen__titel {
  margin: 0 0 1rem;
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: 1.4rem;
  text-transform: uppercase;
  color: var(--oliv);
}

/* Themen als Kacheln mit Logo-Icon, leicht gedreht */
.themen__liste {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.thema {
  --kachel-drehung: -1.5deg;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.1rem 0.75rem 1rem;
  border-radius: 1.2rem 1.8rem 1rem 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  background-color: var(--weiss);
  box-shadow: 0 6px 16px rgba(66, 41, 24, 0.15);
  transform: rotate(var(--kachel-drehung));
}

.thema:nth-child(even) { --kachel-drehung: 1.5deg; }

.thema__icon {
  width: 2.75rem;
}

/* Hinweis unten: gepunktete Linie wie der Wanderweg */
.schulen__hinweis {
  padding-top: 1.25rem;
  border-top: 2px dotted var(--taupe);
  font-size: 0.95rem;
  font-style: normal;
  opacity: 0.85;
}


/* Fragen als handschriftliche Notizen, leicht schräg */
.veranstaltung__fragen {
  margin-top: 1.25rem;
  padding-right: 1rem;             /* Luft für Einrückung + Schräge */
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.35;
  color: var(--gruen-hell);
}

.veranstaltung__fragen span {
  display: block;
  transform: rotate(-1.5deg);
  transform-origin: left center;
}

.veranstaltung__fragen span + span {
  margin-top: 0.5rem;
  margin-left: 1.25rem;            /* versetzt, wie nacheinander notiert */
  transform: rotate(1deg);
}

/* auf beigen Veranstaltungen dunkleres Grün für besseren Kontrast */
.veranstaltung:nth-of-type(even) .veranstaltung__fragen {
  color: var(--oliv);
}

/* Hinweis zur Zielgruppe: Icon + Text in einem Etikett */
.zielgruppe {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
  padding: 0.7rem 1.1rem 0.7rem 0.8rem;
  border-radius: 1rem 1.4rem 0.9rem 1.2rem;
  font-weight: 700;
  background-color: rgba(129, 152, 40, 0.15);   /* zartes Grün */
}

.zielgruppe__icon {
  flex-shrink: 0;
  width: 2rem;
  transform: rotate(-8deg);
}

/* auf braunen Veranstaltungen etwas kräftiger */
.veranstaltung:nth-of-type(odd) .zielgruppe {
  background-color: rgba(129, 152, 40, 0.3);
}

/* letzter Abschnitt vor dem Footer: Platz für dessen Baumreihe */
.vor-footer {
  padding-bottom: calc(var(--abstand-section) + var(--baum-hoehe));
}


/* ---------- Deko-Grafiken im Hintergrund ---------- */
.muster {
  position: relative;
  overflow: hidden;
}

.deko {
  position: absolute;
  z-index: 0;
  opacity: 0.18;
  filter: grayscale(0.6);
  pointer-events: none;
}

/* "Das erwartet Sie": Formen in den freien Ecken, nicht hinter den Karten –
   oben rechts neben der Überschrift, unten links/rechts neben der Steuerung */
.deko--3 { width: 5rem;  top: 3.25rem;   right: 0.75rem; transform: rotate(14deg); }
.deko--4 { width: 9rem;  bottom: -1.5rem; left: -2.5rem;  transform: rotate(-12deg); }
.deko--5 { width: 6.5rem; bottom: 0.5rem; right: -1rem;   transform: rotate(-18deg); }


/* ---------- Willkommen ---------- */
.willkommen {
  /* unten extra Platz für die Baumreihe der Mission */
  padding: var(--abstand-section) 0 calc(var(--abstand-section) + var(--baum-hoehe));
}

.willkommen__titel {
  margin-bottom: 3rem;
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
}

/* Station = Foto + Text; auf dem Handy untereinander */
.station__bild {
  position: relative;
  width: 80%;
  margin: 0 auto 1.75rem 0;       /* Foto links */
}

.station__bild > img:first-child {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* unregelmäßige Rundungen wie bei der Logo-Form */
  border: 0.4rem solid var(--weiss);
  border-radius: 1.6rem 2.6rem 1.2rem 2.2rem;
  box-shadow: 0 8px 20px rgba(66, 41, 24, 0.2);
  transform: rotate(-3deg);
}

/* Icon als kleiner Stempel an der Fotoecke */
.station__stempel {
  position: absolute;
  right: -1rem;
  bottom: -1.25rem;
  width: 3.75rem;
  padding: 0.6rem;
  border-radius: 1rem;
  background-color: var(--beige);
  box-shadow: 0 4px 10px rgba(66, 41, 24, 0.2);
  transform: rotate(12deg);
}

.station__text {
  max-width: 26rem;
}

/* jede zweite Station gespiegelt: Foto rechts, Text rechtsbündig */
.station--gespiegelt .station__bild {
  margin: 0 0 1.75rem auto;
}

.station--gespiegelt .station__bild > img:first-child {
  transform: rotate(3deg);
}

.station--gespiegelt .station__stempel {
  right: auto;
  left: -1rem;
  transform: rotate(-12deg);
}

.station--gespiegelt .station__text {
  margin-left: auto;
  text-align: right;
}

/* gestrichelter Wanderweg zwischen den Stationen */
.weg {
  display: block;
  width: 100%;
  height: 5rem;
  margin: 1rem 0;
  overflow: visible;
}

.weg path {
  fill: none;
  stroke: var(--taupe);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1 9;           /* runde Punkte = Fußspuren-Look */
}

/* handgezeichnete Markierungen einzelner Wörter */
.markiert {
  position: relative;
  white-space: nowrap;
  font-weight: 700;
}

.markiert svg {
  position: absolute;
  overflow: visible;
  pointer-events: none;
}

.markiert svg path {
  fill: none;
  stroke: var(--gruen);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.markiert__linie {
  left: 0;
  bottom: -0.45em;
  width: 100%;
}

.markiert--kreis {
  margin: 0 0.55em;                /* Platz, damit der Kreis Nachbarwörter nicht berührt */
}

.markiert__kreis {
  left: -7%;
  top: 50%;
  width: 114%;
  transform: translateY(-50%);
}

/* --- Scroll-Animationen (nur wenn JS läuft, siehe main.js → html.js) --- */
.js .station__bild,
.js .station__text {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.js .station__text {
  transition-delay: 0.2s;
}

/* opacity: 0 bis zum Start – sonst sind die runden Linienenden als Punkte zu sehen */
.js .markiert svg path {
  stroke-dashoffset: 1;
  opacity: 0;
  transition: stroke-dashoffset 0.8s ease-in-out 0.9s, opacity 0s linear 0.9s;
}

.js .markiert svg path + path {
  transition-delay: 1.5s;          /* zweiter Strich kommt kurz danach */
}

/* Weg wird von oben nach unten "gelaufen". Der Zuschnitt sitzt auf dem Pfad,
   nicht auf dem SVG – sonst hält der IntersectionObserver das SVG für unsichtbar */
.js .weg path {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.2s ease-in-out;
}

.js .ist-sichtbar .station__bild,
.js .ist-sichtbar .station__text {
  opacity: 1;
  transform: none;
}

.js .ist-sichtbar .markiert svg path {
  stroke-dashoffset: 0;
  opacity: 1;
}

.js .weg.ist-sichtbar path {
  clip-path: inset(0);
}


/* ==========================================================
   Unterseiten: dezente Animationen
   (ruhiger als die Startseite – nur Einblenden + kleine Akzente)
   ========================================================== */

/* --- Seitenkopf beim Laden --- */
.seitenkopf__titel {
  animation: sanft-hoch 0.8s ease-out 0.2s backwards;
}

/* Zusatzzeile kippt wie aufgeklebt an ihren Platz (Endlage = rotate(-4deg) aus dem Grundstil) */
.seitenkopf__zusatz {
  animation: aufkleben 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) 0.8s backwards;
}

.einleitung__text {
  animation: sanft-hoch 0.8s ease-out 1.1s backwards;
}

@keyframes sanft-hoch {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
}

@keyframes aufkleben {
  from {
    opacity: 0;
    transform: rotate(-12deg) scale(1.15);
  }
}

/* --- Veranstaltungen beim Scrollen: Foto, dann Text, dann Datum --- */
.js .veranstaltung__bild,
.js .veranstaltung__inhalt {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.js .veranstaltung__inhalt {
  transition-delay: 0.15s;
}

.js .veranstaltung.ist-sichtbar .veranstaltung__bild,
.js .veranstaltung.ist-sichtbar .veranstaltung__inhalt {
  opacity: 1;
  transform: none;
}

/* Datums-Etikett "klebt" sich mit kleinem Federeffekt aufs Foto */
.js .veranstaltung .datum {
  opacity: 0;
  transform: rotate(-14deg) scale(1.25);
  transition: opacity 0.25s ease-out 0.55s, transform 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) 0.55s;
}

.js .veranstaltung.ist-sichtbar .datum {
  opacity: 1;
  transform: rotate(-7deg);
}

/* --- Führungen: Karten und Themen-Kacheln blenden versetzt ein --- */
.js .programm,
.js .thema {
  opacity: 0;
  transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.3s;
}

.js .programm { transform: rotate(var(--karten-drehung)) translateY(1.25rem); }
.js .thema    { transform: rotate(var(--kachel-drehung)) translateY(0.75rem); }

.js .programm:nth-child(even) { transition-delay: 0.12s, 0.12s, 0s; }
.js .thema:nth-child(2) { transition-delay: 0.08s; }
.js .thema:nth-child(3) { transition-delay: 0.16s; }
.js .thema:nth-child(4) { transition-delay: 0.24s; }

.js .programm.ist-sichtbar,
.js .thema.ist-sichtbar {
  opacity: 1;
}

.js .programm.ist-sichtbar { transform: rotate(var(--karten-drehung)); }
.js .thema.ist-sichtbar    { transform: rotate(var(--kachel-drehung)); }

/* Hover (nur mit Maus): Karte richtet sich auf und hebt sich leicht an */
@media (hover: hover) {
  .programm {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .programm:hover,
  .js .programm.ist-sichtbar:hover {
    transform: rotate(0deg) translateY(-0.4rem);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35);
    transition-delay: 0s;
  }
}


/* ---------- Mission ---------- */
.mission {
  position: relative;
  z-index: 2;                      /* Welle unten liegt über dem nächsten Abschnitt */
  padding: 3rem 0 var(--abstand-section);
  color: var(--beige);
  background-color: var(--braun);
}

/* Baumreihe wächst oben aus der Kante heraus */
.mission__baeume {
  position: absolute;
  bottom: calc(100% - 1px);        /* 1px Überlappung gegen Blitzer */
  left: 0;
  width: 100%;
  height: var(--baum-hoehe);
  fill: var(--braun);
}

/* weiche Welle als Übergang nach unten */
.mission__welle {
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  width: 100%;
  height: 2.5rem;
  fill: var(--braun);
}

/* Waldfoto als dezente Struktur im Hintergrund */
.mission__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.18;
  filter: sepia(0.5);
  /* Foto läuft oben und unten weich ins Braun aus – keine harten Kanten */
  -webkit-mask-image: linear-gradient(transparent, #000 25%, #000 70%, transparent);
          mask-image: linear-gradient(transparent, #000 25%, #000 70%, transparent);
}

/* Überschrift deutlich größer als das Zitat → klare Hierarchie */
.mission .headline {
  font-size: 2.75rem;
}

/* Zitat als "handschriftliche Notiz": andere Schrift, normale Schreibweise,
   kleiner und leicht schräg – hebt sich klar von der Überschrift ab */
.mission__zitat {
  position: relative;
  max-width: 24rem;
  margin-top: 1.75rem;
  padding-left: 4.4rem;            /* Platz für das Anführungszeichen + Abstand */
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.35;
  color: var(--beige);
  transform: rotate(-1.5deg);
  transform-origin: left center;
}

/* großes grünes Anführungszeichen (bleibt in Kiln Sans) */
.mission__zitat::before {
  content: "“";
  position: absolute;
  left: 0;
  top: -0.1em;
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: 8rem;
  line-height: 1;
  color: var(--gruen);
}

.mission__spalten {
  margin-top: 2.5rem;
  padding-left: 1.25rem;
  border-left: 3px dotted var(--taupe);   /* greift den Wanderweg wieder auf */
}

.mission__text + .mission__text {
  margin-top: 1.5rem;
}


/* ---------- Angebote ---------- */
.angebote {
  padding: var(--abstand-section) 0 calc(var(--abstand-section) + 1.5rem);
}

/* --- Karussell --- */
.karussell {
  --karte-breite: min(76vw, 20rem);
  position: relative;
  z-index: 1;                      /* über den Deko-Grafiken */
}

/* die Spur scrollt seitlich und rastet bei jeder Karte mittig ein */
.karussell__spur {
  position: relative;              /* Bezugspunkt für offsetLeft in main.js */
  display: flex;
  gap: 1.25rem;
  margin: 0;
  padding: 2rem calc(50% - var(--karte-breite) / 2) 3.25rem;  /* erste/letzte Karte kann mittig stehen; unten Platz für Schatten */
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;           /* Scrollleiste ausblenden (Firefox) */
}

.karussell__spur::-webkit-scrollbar {
  display: none;                   /* Scrollleiste ausblenden (Chrome/Safari) */
}

.karussell__spur:focus-visible {
  outline: 3px dashed var(--gruen-text);
  outline-offset: -3px;
}

/* einzelne Karte: Foto + Titel, leicht schief wie ein Foto auf dem Tisch */
.karte {
  --drehung: -2deg;
  flex: 0 0 var(--karte-breite);
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0.5rem 1.25rem;
  border-radius: 1.4rem 2.2rem 1.2rem 1.8rem;
  background-color: var(--weiss);
  box-shadow: 0 10px 24px rgba(66, 41, 24, 0.18);
  scroll-snap-align: center;
  transform: rotate(var(--drehung));
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.karte:nth-child(even) { --drehung: 2deg; }
.karte:nth-child(3n)   { --drehung: -1deg; }

/* die Karte in der Mitte richtet sich gerade aus (Klasse setzt main.js) */
.karte.ist-aktiv {
  transform: rotate(0deg) scale(1.03);
  box-shadow: 0 14px 30px rgba(66, 41, 24, 0.25);
}

.karte img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 1rem 1.8rem 0.8rem 1.4rem;
}

.karte__titel {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.4em;               /* zweizeilige Titel → alle Karten gleich hoch */
  margin: 1rem 0.5rem 0;
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  color: var(--braun);
}

/* Steuerung: Pfeile + Punkte */
.karussell__steuerung {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.karussell__pfeil {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0.55rem;
  border: none;
  border-radius: 0.9rem;
  background-color: var(--gruen);
  cursor: pointer;
  transition: transform 0.2s, opacity 0.2s;
}

.karussell__pfeil--zurueck { transform: rotate(-4deg); }
.karussell__pfeil--weiter  { transform: rotate(4deg); }
.karussell__pfeil--weiter svg { transform: scaleX(-1); }   /* gleicher Pfeil, gespiegelt */

.karussell__pfeil:hover:not(:disabled) {
  transform: rotate(0deg) scale(1.08);
}

.karussell__pfeil:disabled {
  opacity: 0.35;
  cursor: default;
}

.karussell__pfeil:focus-visible,
.karussell__punkt:focus-visible {
  outline: 3px solid var(--braun);
  outline-offset: 3px;
}

.karussell__pfeil path {
  fill: none;
  stroke: var(--weiss);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.karussell__punkte {
  display: flex;
  gap: 0.5rem;
}

.karussell__punkt {
  width: 0.75rem;
  height: 0.75rem;
  padding: 0;
  border: none;
  border-radius: 1rem;
  background-color: var(--taupe);
  opacity: 0.5;
  cursor: pointer;
  transition: width 0.3s, background-color 0.3s, opacity 0.3s;
}

.karussell__punkt[aria-current="true"] {
  width: 1.75rem;
  background-color: var(--gruen);
  opacity: 1;
}


/* ---------- Teaser-Links als Wegweiser ---------- */
.teaser {
  padding: 3.5rem 0 0;
  overflow: hidden;
  background-color: var(--braun);
}

.wegweiser {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 34rem;
  padding-bottom: calc(var(--baum-hoehe) + 2rem);   /* Platz für die Baumreihe des Footers */
}

/* Holzpfosten in der Mitte, läuft bis zur Unterkante */
.wegweiser__pfosten {
  position: absolute;
  top: -1.5rem;
  bottom: 0;
  left: calc(50% - 0.6rem);
  width: 1.2rem;
  border-radius: 0.5rem 0.5rem 0 0;
  background: linear-gradient(90deg, #8a6a5e, var(--taupe) 40%, #8a6a5e);
}

/* Link-Hülle: bekommt Schatten + Bewegung. Der Schatten muss per filter
   hierhin, weil clip-path am Brett normale box-shadows abschneiden würde */
.schild {
  position: relative;
  z-index: 1;
  display: block;
  width: 85%;
  text-decoration: none;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.35));
  transition: transform 0.3s ease;
}

.schild--links  { align-self: flex-start; transform: rotate(-3deg); }
.schild--rechts { align-self: flex-end;   transform: rotate(2.5deg); }

/* das eigentliche Brett in Pfeilform, mit leichter Holzmaserung */
.schild__brett {
  display: block;
  padding: 1.3rem 1.5rem;
  font-family: var(--font-headline);
  font-size: 1.45rem;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--braun);
  background:
    repeating-linear-gradient(178deg, transparent 0 7px, rgba(163, 130, 118, 0.14) 7px 9px),
    var(--beige);
  transition: background-color 0.3s, color 0.3s;
}

.schild--links .schild__brett {
  padding-left: 3rem;
  clip-path: polygon(0 50%, 2rem 0, 100% 3%, 99% 100%, 2rem 100%);
}

.schild--rechts .schild__brett {
  padding-right: 3rem;
  text-align: right;
  clip-path: polygon(0 2%, calc(100% - 2rem) 0, 100% 50%, calc(100% - 2rem) 100%, 1% 97%);
}

/* Hover/Fokus: Schild wird grün und "zeigt" in seine Richtung */
.schild:hover .schild__brett,
.schild:focus-visible .schild__brett {
  color: var(--weiss);
  background: var(--gruen-dunkel);
}

.schild--links:hover  { transform: rotate(-3deg) translateX(-0.4rem); }
.schild--rechts:hover { transform: rotate(2.5deg) translateX(0.4rem); }

.schild:focus-visible {
  outline: 3px dashed var(--beige);
  outline-offset: 4px;
}


/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  z-index: 2;                      /* Baumreihe liegt über dem Wegweiser-Pfosten */
  padding: 1.5rem 0 5rem;          /* unten Platz für den Hintergrund-Wald */
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--beige);
  background-color: var(--oliv);
}

/* Baumreihe wächst oben aus dem Footer heraus */
.footer__baeume {
  position: absolute;
  bottom: calc(100% - 1px);
  left: 0;
  width: 100%;
  height: var(--baum-hoehe);
  fill: var(--oliv);
  transform: scaleX(-1);           /* gespiegelt, damit sie nicht wie die Mission-Reihe aussieht */
}

/* blasser Wald im Hintergrund, zwei Schichten für Tiefe */
.footer__wald {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}

.footer__wald--hinten {
  height: max(9rem, 10vw);         /* nie niedriger als 10vw → keine abgeschnittenen Spitzen */
  fill: var(--gruen);
  opacity: 0.12;
}

.footer__wald--vorne {
  height: max(5rem, 10vw);
  fill: #2f3512;                   /* dunkleres Oliv */
  opacity: 0.6;
  transform: scaleX(-1);
}

.site-footer .container {
  z-index: 1;                      /* Text vor dem Wald */
}

/* ---------- Nach-oben-Button ---------- */
/* klein und halbtransparent, damit er nicht stört; erst sichtbar mit .ist-sichtbar (main.js) */
.nach-oben {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 80;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  color: var(--braun);
  background-color: rgba(243, 228, 216, 0.85);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(1rem);
  transition: opacity 0.3s, transform 0.3s, visibility 0.3s, background-color 0.2s;
}

.nach-oben.ist-sichtbar {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nach-oben:hover,
.nach-oben:focus-visible {
  background-color: var(--beige);
  transform: translateY(-3px);
}

.nach-oben:focus-visible {
  outline: 3px solid var(--gruen-text);
  outline-offset: 3px;
}

.nach-oben svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.nach-oben path,
.nach-oben circle {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nach-oben__pfeil {
  stroke: currentColor;
  stroke-width: 2.6;
}

/* Fortschrittsring: startet oben, füllt sich im Uhrzeigersinn */
.nach-oben__ring {
  stroke: var(--gruen);
  stroke-width: 2.5;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--fortschritt, 0));
  transform: rotate(-90deg);
  transform-origin: center;
}


/* Symbol-Sammlung unsichtbar, aber per <use> nutzbar */
.svg-symbole {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Handy: Blöcke untereinander, getrennt durch eine gepunktete Linie */
.footer__raster {
  display: grid;
  gap: 1.5rem;
}

.footer__block + .footer__block {
  padding-top: 1.5rem;
  border-top: 2px dotted rgba(243, 228, 216, 0.35);
}

.footer__titel {
  margin-bottom: 0.6rem;
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: 1.35rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Begriff links, Wert rechts daneben – liest sich wie eine kleine Tabelle */
.footer__liste {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 1rem;
  margin: 0;
}

.footer__liste dt {
  opacity: 0.75;
}

.footer__liste dd {
  margin: 0;
}

.site-footer address {
  font-style: normal;
}

.site-footer address p {
  margin-bottom: 0.75rem;
}

.site-footer a {
  text-decoration: none;
  overflow-wrap: anywhere;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  text-decoration: underline;
}


/* ==========================================================
   Tablet ab 768px
   ========================================================== */
@media (min-width: 768px) {

  :root {
    --rand: 3rem;
    --abstand-section: 6rem;
    --baum-hoehe: max(7rem, 10vw);
  }

  body {
    font-size: 1.05rem;
  }

  .logo__icon { width: 5rem; height: 5rem; }
  .logo__text { font-size: 3.5rem; }
  .logo__text span { font-size: 1.3rem; }
  .hero__claim { font-size: 1.25rem; }

  .seitenlogo { top: 1.5rem; left: 1.5rem; }
  .seitenkopf__titel { font-size: 4.5rem; }
  .welle-uebergang svg { height: 3.5rem; }
  .einleitung__text { font-size: 1.35rem; }
  .deko--e1 { width: 11rem; left: 2rem; }
  .deko--e2 { width: 9rem; right: 3rem; bottom: 4rem; }

  /* Veranstaltung: Foto und Text nebeneinander, jede zweite gespiegelt */
  .veranstaltung__raster {
    grid-template-columns: 5fr 6fr;
    align-items: center;
    gap: 4rem;
  }

  .veranstaltung:nth-of-type(even) .veranstaltung__bild { order: 2; }
  .veranstaltung:nth-of-type(even) .veranstaltung__bild { --foto-drehung: -2deg; }

  .veranstaltung__titel { font-size: 3.25rem; }
  .datum__tag { font-size: 3rem; }


  .veranstaltung::before,
  .welle-oben::before { height: 3.5rem; }

  /* Schulen: Intro links, Themen rechts, Hinweis darunter über volle Breite */
  .schulen__raster {
    grid-template-columns: 2fr 3fr;
    gap: 2.5rem 4rem;
    align-items: start;
  }

  .schulen__hinweis { grid-column: 1 / -1; }
  .thema__icon { width: 3.25rem; }

  /* Programm-Karten nebeneinander */
  .programme__raster {
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 3rem 2.5rem;
  }

  .willkommen__titel { font-size: 1.4rem; margin-bottom: 4rem; }

  /* Stationen: Foto und Text nebeneinander */
  .station {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 3.5rem;
  }

  .station__bild,
  .station--gespiegelt .station__bild {
    width: 100%;
    margin: 0;
  }

  .station--gespiegelt .station__bild { order: 2; }

  .station__stempel { width: 4.5rem; }

  .weg { height: 7rem; }

  .headline { font-size: 3rem; }
  .headline--gross { font-size: 3.75rem; }

  .mission__welle  { height: 3.5rem; }
  .mission .headline { font-size: 4.25rem; }
  .mission__zitat  { max-width: 44rem; font-size: 1.75rem; padding-left: 5.6rem; }
  .mission__zitat::before { font-size: 10rem; }

  /* Texte nebeneinander */
  .mission__spalten {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 3rem;
    padding-left: 2rem;
  }

  .mission__text + .mission__text { margin-top: 0; }

  .karussell { --karte-breite: 22rem; }
  .karte__titel { font-size: 1.75rem; }

  .schild__brett { font-size: 1.9rem; padding-top: 1.5rem; padding-bottom: 1.5rem; }

  .site-footer { font-size: 0.95rem; padding-bottom: 7rem; }
  .footer__wald--hinten { height: max(13rem, 10vw); }
  .footer__wald--vorne  { height: max(7rem, 10vw); }
  .footer__titel { font-size: 1.6rem; }

  /* ab Tablet: Blöcke nebeneinander, Trennlinie senkrecht */
  .footer__raster {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }

  .footer__block + .footer__block {
    padding-top: 0;
    padding-left: 3rem;
    border-top: none;
    border-left: 2px dotted rgba(243, 228, 216, 0.35);
  }

  .deko--3 { width: 10rem; right: 2rem; }
  .deko--4 { width: 13rem; }
  .deko--5 { width: 9rem; right: 3rem; }
}


/* ==========================================================
   Desktop ab 1100px
   ========================================================== */
@media (min-width: 1100px) {

  .menu-toggle {
    top: 1.5rem;
    right: 1.5rem;
  }

  .logo__icon { width: 6.5rem; height: 6.5rem; }
  .logo__text { font-size: 4.5rem; }

  /* Desktop: kein Karussell nötig – alle Karten locker aufgefächert */
  .karussell__spur {
    max-width: 80rem;
    margin: 0 auto;
    padding: 2rem var(--rand) 3rem;
    gap: 1.5rem;
    align-items: flex-start;       /* Karten nicht auf gleiche Höhe strecken */
    overflow: visible;
  }

  .karte {
    flex: 1 1 0;
  }

  .karte:nth-child(even) { margin-top: 2.5rem; }   /* versetzt = aufgefächert */

  .karte.ist-aktiv {
    transform: rotate(var(--drehung));
    box-shadow: 0 10px 24px rgba(66, 41, 24, 0.18);
  }

  .karte:hover {
    transform: rotate(0deg) translateY(-0.5rem);
    box-shadow: 0 16px 32px rgba(66, 41, 24, 0.28);
  }

  .karte__titel {
    min-height: 3.45em;            /* Platz für 3 Zeilen → alle Karten gleich hoch */
    font-size: 1.4rem;
  }

  .karussell__steuerung { display: none; }

  .deko--3 { width: 12rem; top: 1.5rem; right: 8%; }
  .deko--4 { width: 16rem; bottom: -3rem; left: 3%; }
  .deko--5 { width: 11rem; bottom: -1rem; right: 5%; }
}


/* ==========================================================
   Navigationsleiste ab 1024px (Desktop + Tablet quer)
   ersetzt das Burger-Menü
   ========================================================== */
.kopfleiste__logo {
  display: none;                   /* auf kleinen Bildschirmen nicht nötig */
}

@media (min-width: 1024px) {

  /* Sprungziele (#willkommen) nicht unter der festen Leiste verstecken */
  html {
    scroll-padding-top: 5rem;
  }

  /* feste Leiste: oben auf dem Foto transparent, beim Scrollen braun (main.js) */
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4.5rem;
    padding: 0 2rem;
    background-color: rgba(66, 41, 24, 0);
    transition: background-color 0.3s, box-shadow 0.3s;
  }

  /* dunkler Verlauf für Lesbarkeit auf dem Foto, blendet beim Scrollen aus */
  .site-header::before {
    content: "";
    position: absolute;
    inset: 0 0 -1.5rem;
    z-index: -1;
    background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
    pointer-events: none;
    transition: opacity 0.3s;
  }

  .site-header.ist-gescrollt {
    background-color: var(--braun);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  }

  .site-header.ist-gescrollt::before {
    opacity: 0;
  }

  /* Logo links in der Leiste */
  .kopfleiste__logo {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-headline);
    font-size: 1.45rem;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--weiss);
    transition: opacity 0.3s, visibility 0.3s;
  }

  .kopfleiste__logo svg {
    width: 2.1rem;
    height: 2.1rem;
    transform: rotate(-10deg);
    transition: transform 0.3s;
  }

  .kopfleiste__logo:hover svg,
  .kopfleiste__logo:focus-visible svg {
    transform: rotate(0deg);
  }

  /* Startseite: oben steht schon das große Logo im Hero → Leisten-Logo erst beim Scrollen */
  .site-header--start:not(.ist-gescrollt) .kopfleiste__logo {
    opacity: 0;
    visibility: hidden;
  }

  /* Unterseiten: kleines Logo im Seitenkopf wird durch das Leisten-Logo ersetzt */
  .seitenlogo {
    display: none;
  }

  /* Seitentitel nicht unter die Leiste rutschen lassen */
  .seitenkopf {
    padding-top: 4.5rem;
  }

  /* Burger aus, Menü als normale Linkreihe */
  .menu-toggle {
    display: none;
  }

  .main-nav {
    position: static;
    right: auto;
    display: block;
    width: auto;
    padding: 0;
    background: none;
    box-shadow: none;
    visibility: visible;
    transform: none;
    transition: none;
  }

  /* Seitenleisten-Effekte aus dem Handy-Menü zurücksetzen */
  .main-nav li {
    opacity: 1;
    transform: none;
  }

  .site-header::after {
    display: none;
  }

  .main-nav ul {
    display: flex;
    gap: 2.25rem;
  }

  .main-nav li + li {
    margin-top: 0;
  }

  .main-nav a,
  .main-nav a:hover,
  .main-nav a:focus-visible,
  .main-nav a[aria-current="page"] {
    position: relative;
    padding: 0.25rem 0;
    font-size: 1.3rem;
    color: var(--weiss);
  }

  /* grüne Unterstreichung: aktuelle Seite immer, sonst beim Überfahren */
  .main-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.15rem;
    height: 3px;
    border-radius: 3px;
    background-color: var(--gruen);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
  }

  .main-nav a:hover::after,
  .main-nav a:focus-visible::after,
  .main-nav a[aria-current="page"]::after {
    transform: scaleX(1);
  }

  .main-nav a:focus-visible,
  .kopfleiste__logo:focus-visible {
    outline: 3px dashed var(--weiss);
    outline-offset: 5px;
  }
}


/* Barrierefreiheit: Animationen reduzieren */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}


/* ---------- Rechtliche Links im Footer ---------- */
/* Impressum und Datenschutz verweisen auf das Portfolio (fiktives Projekt) */
.footer__recht {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 2px dotted rgba(243, 228, 216, 0.35);
  font-size: 0.9em;
}

.footer__recht .footer__hinweis {
  flex-basis: 100%;
  opacity: 0.75;
}

.footer__recht a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}


/* ==========================================================
   Ergänzungen (Überarbeitung 09/2026)
   ========================================================== */

/* nur für Screenreader sichtbar */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* dauerhafter Hinweis unten links: fiktives Projekt + Weg zurück ins Portfolio */
.fiktiv-hinweis {
  position: fixed;
  left: 0.75rem;
  bottom: 0.75rem;
  z-index: 80;                     /* unter Menü-Panel (90) und Abdunklung (85) */
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--beige);
  background-color: rgba(66, 41, 24, 0.92);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  text-decoration: none;
}

.fiktiv-hinweis span {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.fiktiv-hinweis:hover,
.fiktiv-hinweis:focus-visible {
  background-color: var(--gruen-dunkel);
}

.fiktiv-hinweis:focus-visible {
  outline: 3px solid var(--beige);
  outline-offset: 2px;
}

/* Wochentag / Uhrzeit unter dem Veranstaltungstitel */
.veranstaltung__meta {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* schlichter Text-Link zur Anmeldung / Anfrage (Ziel: Kontaktblock im Footer) */
.cta-link {
  display: inline-block;
  margin-top: 1.25rem;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}

.cta-link:hover,
.cta-link:focus-visible {
  text-decoration-color: var(--gruen);
}

.cta-link:focus-visible {
  outline: 3px dashed currentColor;
  outline-offset: 4px;
}

.programm .cta-link {
  align-self: flex-start;
  margin: 1rem 1rem 0;
}

.schulen__cta {
  grid-column: 1 / -1;
}