/* Yoga-Energie-Reich
   Farben: Forest Green, Grass, Earth; Lime nur als Akzent
   Schriften: Vidaloka (Überschriften), Karla (Text) */

:root {
  --wald: #2e4600;
  --gras: #486b00;
  --lime: #a2c523;
  --erde: #7d4427;
  --hell: #edf0dc;
  --linie: #b9c293;
  --grund: #f8f6ee;
  --creme: #fbf6ea;
  --tinte: #20270f;
  --leise: #586048;

  --titel: "Vidaloka", Georgia, serif;
  --text: "Karla", system-ui, sans-serif;

  --rand: clamp(1.25rem, 6vw, 7rem);
  --abstand: clamp(4rem, 9vw, 8rem);
  --rund: 0.4rem;
}

/* Farbvarianten für den Entwurf. Die Namen der Variablen stammen von der grünen Palette:
   --wald = Hauptfarbe, --gras = Nebenfarbe, --lime = Akzent, --erde = zweite kräftige Farbe */
:root[data-farbe="pflaume-salbei"] {
  --wald: #5b2a5e;
  --gras: #7d4a80;
  --lime: #aebb6c;
  --erde: #4f6240;
  --hell: #f1eaf1;
  --linie: #cfc1d2;
  --grund: #faf7f4;
  --creme: #fbf6ee;
  --tinte: #2a1f2c;
  --leise: #63576a;
}
:root[data-farbe="lila-gold"] {
  --wald: #643468;
  --gras: #855a88;
  --lime: #d4a843;
  --erde: #8a5a2b;
  --hell: #f4ecdf;
  --linie: #dccdb6;
  --grund: #fbf8f2;
  --creme: #fdf7ea;
  --tinte: #2d2030;
  --leise: #675a66;
}
:root[data-farbe="mauve-rosenholz"] {
  --wald: #6b3f63;
  --gras: #8b6483;
  --lime: #e0a899;
  --erde: #8c4a55;
  --hell: #f5eaed;
  --linie: #dfcad1;
  --grund: #fcf8f7;
  --creme: #fdf5f1;
  --tinte: #33242f;
  --leise: #6d5d68;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--text);
  font-size: 1.125rem;
  line-height: 1.6;
}

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
address { font-style: normal; }

h1, h2, h3 {
  font-family: var(--titel);
  font-weight: 400;
  color: var(--wald);
  margin: 0;
  overflow-wrap: break-word;
}
.kopf h1 { hyphens: auto; }
h2 { font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.08; }

p { margin: 0 0 1em; }

a {
  color: var(--wald);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}
a:hover { text-decoration-style: wavy; }

:focus-visible { outline: 3px solid var(--gras); outline-offset: 3px; }

.sprung { position: absolute; left: -999rem; top: 0; background: var(--wald); color: #fff; padding: 0.75rem 1rem; z-index: 20; }
.sprung:focus { left: 0; }

.leise { color: var(--leise); font-size: 0.95rem; }
.unterschrift { font-family: var(--titel); font-size: 1.7rem; color: var(--wald); margin-top: 0.5rem; }

.knopf {
  display: inline-block;
  background: var(--wald);
  color: #fff;
  font: 600 1.05rem var(--text);
  padding: 0.85rem 1.5rem;
  border: 0;
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
}
.knopf:hover { background: var(--tinte); text-decoration: none; }

/* ---------- Menüleiste oben ---------- */

.leiste {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 0.6rem var(--rand);
  background: var(--grund);
  border-bottom: 1px solid var(--linie);
}

.marke { display: flex; align-items: center; gap: 0.9rem; text-decoration: none; }
.marke img { width: 4.2rem; }
.marke span { font-family: var(--titel); font-size: 1.4rem; line-height: 1.2; color: var(--wald); }

.menue-knopf { display: none; }

.leiste nav ul { list-style: none; display: flex; gap: clamp(1rem, 2.4vw, 2.5rem); margin: 0; padding: 0; }
.leiste nav a {
  display: block;
  padding: 0.4rem 0;
  font-family: var(--titel);
  font-size: 1.25rem;
  text-decoration: none;
}
.leiste nav a:hover,
.leiste nav a[aria-current="page"] {
  text-decoration: underline wavy var(--lime);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

.leiste-adresse { display: none; font-size: 0.95rem; line-height: 1.5; color: var(--leise); }

/* ---------- Startseite ---------- */

.start { position: relative; overflow: hidden; }

.bach { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.bach path { fill: none; stroke: var(--lime); stroke-width: 3; stroke-linecap: round; }
.bach .bach-zweite { stroke-width: 1.25; opacity: 0.7; }

.start > section { position: relative; }

/* Auftakt: ein Hauptbild über die ganze Breite, davor die Tafel mit der Überschrift.
   Das Bild richtet sich nach der Fensterhöhe, damit der ganze Auftakt ohne Scrollen zu sehen ist. */
.auftakt {
  --ueberstand: 2.5rem;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.5rem;
  padding: 0 var(--rand) var(--ueberstand);
}
.auftakt-raum { grid-column: 1 / -1; grid-row: 1; margin: 0 calc(-1 * var(--rand)); }
.auftakt-raum img { width: 100%; height: clamp(27rem, calc(100svh - 9.5rem), 46rem); object-fit: cover; object-position: 30% 100%; }
.auftakt-raum.beispielbild::after { top: 0.6rem; bottom: auto; }
.auftakt-tafel {
  grid-column: 1 / span 8;
  grid-row: 1;
  align-self: end;
  margin-bottom: calc(-1 * var(--ueberstand));
  padding: clamp(1.75rem, 3.5vw, 3.25rem);
  background: var(--wald);
  color: var(--creme);
  position: relative;
}
.auftakt-tafel h1 { color: var(--creme); font-size: clamp(2.4rem, 4.4vw, 4.25rem); line-height: 1.02; letter-spacing: -0.01em; }
.auftakt-slogan { font-family: var(--titel); font-size: clamp(1.25rem, 2vw, 1.6rem); color: var(--lime); margin: 1rem 0 1.25rem; }
.auftakt-tafel p { max-width: 36rem; }
.auftakt-weiter { margin: 1.5rem 0 0; }
.knopf-hell { background: var(--creme); color: var(--wald); }
.knopf-hell:hover { background: var(--lime); color: var(--tinte); }
.auftakt-tafel :focus-visible { outline-color: var(--lime); }

.auftakt-gruss {
  grid-column: 10 / -1;
  grid-row: 1;
  align-self: end;
  margin-bottom: calc(-1 * var(--ueberstand));
  position: relative;
  background: var(--erde);
  color: var(--creme);
}
.auftakt-gruss img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 15%; }
.auftakt-gruss-text { display: block; padding: 0.85rem 1rem 1rem; font-size: 1rem; line-height: 1.45; }
.auftakt-gruss-text span { display: block; }
.auftakt-gruss .unterschrift { color: var(--creme); margin-top: 0.25rem; }
a.auftakt-gruss { text-decoration: none; }
a.auftakt-gruss:hover .unterschrift { text-decoration: underline wavy var(--lime); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
a.auftakt-gruss:focus-visible { outline-color: var(--lime); }

/* Kennzeichnung für Bilder, die noch ausgetauscht werden */
.beispielbild { position: relative; }
.beispielbild::after {
  content: "Beispielbild";
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  padding: 0.15rem 0.5rem;
  background: var(--creme);
  color: var(--tinte);
  font-size: 0.8rem;
  line-height: 1.4;
}

/* Abschnittsüberschriften: überall gleich, damit klar ist, wo ein Thema beginnt */
.abschnitt-kopf { margin-bottom: clamp(1.75rem, 3.5vw, 3rem); }
.abschnitt-kopf h2::after {
  content: "";
  display: block;
  width: 9rem;
  height: 0.9rem;
  margin-top: 0.9rem;
  background: var(--lime);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 208 16' fill='none'%3E%3Cpath d='M2 9c14-9 26-8 38 0s24 8 36-1 26-8 38 1 24 8 36-1 28-7 56 1' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 208 16' fill='none'%3E%3Cpath d='M2 9c14-9 26-8 38 0s24 8 36-1 26-8 38 1 24 8 36-1 28-7 56 1' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center / contain;
}
.abschnitt-kopf p { max-width: 38rem; margin: 1rem 0 0; font-size: 1.15rem; }

/* Verzeichnis der Angebote, nach Bereichen */
.verzeichnis { padding: var(--abstand) var(--rand); }
.bereich {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 1rem 3rem;
  padding: 1.75rem 0 1.25rem;
  border-top: 2px solid var(--wald);
}
.bereich-kopf h3 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); line-height: 1.15; color: var(--erde); }
.bereich-kopf p { margin: 0.5rem 0 0; max-width: 18rem; font-size: 1rem; color: var(--leise); }
.bereich-bild { margin-top: 1.25rem; max-width: 17rem; }
.bereich-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.bereich ul { list-style: none; margin: 0; padding: 0; }
.bereich li + li { border-top: 1px solid var(--linie); }
.bereich a {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 0.4rem 1.75rem;
  align-items: baseline;
  padding: 1rem 0.75rem 1rem 0;
  color: inherit;
  text-decoration: none;
}
.bereich li:first-child a { padding-top: 0.15rem; }
.bereich a:hover { background: var(--hell); padding-left: 0.75rem; padding-right: 0; }
.bereich a:hover .verzeichnis-name { text-decoration: underline wavy var(--lime); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.verzeichnis-name { font-family: var(--titel); font-size: clamp(1.5rem, 2.3vw, 2.1rem); line-height: 1.1; color: var(--wald); hyphens: auto; }
.verzeichnis-kurz { font-size: 1.05rem; }

/* Die Woche */
.woche { background: var(--wald); color: var(--grund); padding: clamp(3rem, 7vw, 6rem) var(--rand); }
.woche h2 { color: var(--grund); }
.woche a { color: var(--grund); }
.woche :focus-visible { outline-color: var(--lime); }

.woche-tage {
  list-style: none;
  margin: 0 0 clamp(2rem, 4vw, 3.5rem);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: 1px solid var(--lime);
}
.woche-tage li { min-height: 11rem; padding: 0.9rem 0.6rem 1.25rem; border-left: 1px solid color-mix(in srgb, var(--lime) 35%, transparent); }
.woche-tage li:first-child { border-left: 0; padding-left: 0; }
.woche-tag { font-family: var(--titel); font-size: 1.15rem; }
.woche-tage .frei .woche-tag { opacity: 0.55; }
.woche-kurs {
  display: block;
  margin-top: 0.75rem;
  padding: 0.65rem 0.7rem 0.75rem;
  background: var(--creme);
  border-left: 5px solid var(--lime);
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1.35;
}
.woche a.woche-kurs { color: var(--tinte); }
.woche-kurs:hover { background: var(--hell); }
.woche-kurs strong { display: block; font-size: 1rem; margin-bottom: 0.2rem; hyphens: auto; }
.woche-kurs span { display: block; }
.woche-mehr { margin: 2rem 0 0; }

/* Fünf Matten */
.matten { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2rem; align-items: center; max-width: 48rem; }
.matten p { margin: 0; }
.matten-bild { display: flex; gap: 0.55rem; align-items: flex-end; }
.matten-bild i { display: block; width: 1.5rem; height: 4.4rem; border: 2px solid var(--lime); border-radius: 3px; }
.matten-bild i:nth-child(2) { transform: translateY(-0.3rem) rotate(2deg); }
.matten-bild i:nth-child(3) { transform: rotate(-1.5deg); }
.matten-bild i:nth-child(4) { transform: translateY(-0.45rem) rotate(1deg); }
.matten-bild i:nth-child(5) { transform: rotate(-2.5deg); }

/* Vorstellung */
.vorstellung {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.5rem;
  align-items: center;
  padding: var(--abstand) var(--rand);
  background: var(--hell);
}
.vorstellung figure { grid-column: 1 / span 4; }
.vorstellung img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 62% 50%; border-radius: 999px 999px 0 0; }
.vorstellung-text { grid-column: 6 / -1; }
.vorstellung-text h2 { margin-bottom: 1.25rem; }
.zitat { font-family: var(--titel); font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.2; color: var(--erde); margin-bottom: 1.25rem; }
.vorstellung-text p:last-child { margin-bottom: 0; }

/* Gutschein als Abrisskarte */
.schein-bereich {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 2rem 3.5rem;
  align-items: center;
  padding: var(--abstand) var(--rand);
}
.schein-bereich .abschnitt-kopf { grid-column: 1 / -1; margin-bottom: 0; }
.schein-bereich > p { margin: 0; max-width: 24rem; }
.schein {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  background: var(--erde);
  color: var(--creme);
  text-decoration: none;
  transform: rotate(-1.5deg);
}
a.schein:hover { transform: rotate(-1deg); text-decoration: none; }
.schein-links { padding: clamp(1.5rem, 3vw, 2.5rem); }
.schein-links span { display: block; }
.schein-wort { font-family: var(--titel); font-size: clamp(2.6rem, 5.5vw, 4.5rem); line-height: 1; color: var(--creme); margin-bottom: 0.75rem; }
.schein-rechts {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem clamp(1.25rem, 2.5vw, 2.25rem);
  border-left: 2px dashed var(--creme);
}
.schein-rechts::before,
.schein-rechts::after {
  content: "";
  position: absolute;
  left: -0.7rem;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: var(--grund);
}
.schein-rechts::before { top: -0.65rem; }
.schein-rechts::after { bottom: -0.65rem; }
.schein-wert { font-family: var(--titel); font-size: clamp(1.7rem, 2.6vw, 2.2rem); color: var(--creme); line-height: 1.2; white-space: nowrap; }
.schein-oder { font-size: 0.9rem; }

/* Kontakt und Anfahrt */
.ort { background: var(--erde); color: var(--creme); padding: var(--abstand) var(--rand); }
.ort h2 { color: var(--creme); }
.ort a { color: var(--creme); }
.ort :focus-visible { outline-color: var(--lime); }
.ort-spalten { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem 3rem; align-items: end; }
.ort-adresse { font-family: var(--titel); font-size: clamp(3.2rem, 8vw, 7.5rem); line-height: 0.95; margin: 0; }
.ort-adresse span { display: block; margin-top: 1rem; font-size: clamp(1.2rem, 2vw, 1.7rem); line-height: 1.3; }
.ort-wege p { margin: 0 0 0.5rem; }
.ort-telefon { font-family: var(--titel); font-size: clamp(1.6rem, 2.8vw, 2.3rem); }
.ort-telefon a { text-decoration: none; }

/* ---------- Unterseiten ---------- */

.unterseite { padding: clamp(2.5rem, 6vw, 5rem) var(--rand) var(--abstand); }

.kopf { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.kopf h1 { font-size: clamp(2.8rem, 6vw, 5.5rem); line-height: 1; }
.kopf p { max-width: 38rem; font-size: 1.25rem; margin: 1.25rem 0 0; }
.kopf::after {
  content: "";
  display: block;
  width: 13rem;
  height: 1rem;
  margin-top: 1.75rem;
  background: var(--lime);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 208 16' fill='none'%3E%3Cpath d='M2 9c14-9 26-8 38 0s24 8 36-1 26-8 38 1 24 8 36-1 28-7 56 1' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 208 16' fill='none'%3E%3Cpath d='M2 9c14-9 26-8 38 0s24 8 36-1 26-8 38 1 24 8 36-1 28-7 56 1' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center / contain;
}

/* Angebote */
.sprungmarken ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2.5rem;
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
  padding: 1rem 0;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  font-family: var(--titel);
  font-size: 1.3rem;
}
.sprungmarken a { text-decoration: none; }
.sprungmarken a:hover { text-decoration: underline wavy var(--lime); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }

.angebote { margin-bottom: clamp(3rem, 6vw, 5rem); scroll-margin-top: 1rem; }
.angebote-kopf { background: var(--hell); border-top: 2px solid var(--wald); padding: 1.5rem clamp(1.25rem, 2.5vw, 2rem); }
.angebote-kopf h2 { color: var(--erde); }
.angebote-kopf p { margin: 0.4rem 0 0; }
.angebot {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr);
  gap: 1rem 2.5rem;
  padding: 2.5rem 0;
  border-top: 1px solid var(--linie);
  scroll-margin-top: 1rem;
}
.angebote-kopf + .angebot { border-top: 0; }
.angebot h3 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1.1; hyphens: auto; }
.angebot:target h3 { text-decoration: underline wavy var(--lime); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.angebot-text p:last-child { margin-bottom: 0; }
.angebot-fakten { margin: 0; font-size: 0.98rem; }
.angebot-fakten dt { color: var(--leise); }
.angebot-fakten dd { margin: 0 0 0.75rem; }

/* Termine */
.kopf-zeile { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem 3.5rem; align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.kopf-zeile .kopf { margin-bottom: 0; }
.kopf-bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 35%; border-radius: var(--rund); }
.einzeln-zeile { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem 3.5rem; align-items: center; margin: clamp(3rem, 6vw, 5rem) 0; }
.einzeln-zeile .einzeln { margin: 0; max-width: none; }
.einzeln-bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--rund); }
.regel table { width: 100%; border-collapse: collapse; margin-top: 1.5rem; border-top: 2px solid var(--wald); }
.regel th, .regel td { text-align: left; vertical-align: top; padding: 1.15rem 1.5rem 1.15rem 0; border-bottom: 1px solid var(--linie); }
.regel th { font-family: var(--titel); font-weight: 400; font-size: 1.6rem; color: var(--wald); line-height: 1.2; }
.regel td:last-child { text-align: right; padding-right: 0; white-space: nowrap; }

.einzeln { max-width: 44rem; margin: clamp(3rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 5rem) auto; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--hell); }
.einzeln h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: 1rem; }
.einzeln p:last-child { margin-bottom: 0; }
.einzeln-liste { list-style: none; margin: 0; padding: 0; }
.einzeln-liste li { padding: 1rem 0; border-top: 1px solid var(--linie); }
.einzeln-liste time, .einzeln-liste strong, .einzeln-liste span { display: block; }
.einzeln-liste time { font-family: var(--titel); font-size: 1.3rem; color: var(--wald); }

.hinweise .matten { margin: 1.5rem 0 2rem; }
.hinweise .matten-bild i { border-color: var(--wald); }
.hinweise dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 3rem; max-width: 56rem; }
.hinweise dt { font-family: var(--titel); font-size: 1.35rem; color: var(--wald); }
.hinweise dd { margin: 0.25rem 0 0; }

/* Gutscheine */
.gutschein-zeile { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 3rem clamp(2.5rem, 5vw, 5rem); align-items: start; }
.gutschein-zeile .schein { margin-top: 1.5rem; }
.gutschein-zeile .schein { grid-template-columns: minmax(0, 1fr); }
.gutschein-zeile .schein-rechts { flex-direction: row; gap: 0.75rem; align-items: baseline; border-left: 0; border-top: 2px dashed var(--creme); }
.gutschein-zeile .schein-rechts::before, .gutschein-zeile .schein-rechts::after { top: -0.65rem; bottom: auto; }
.gutschein-zeile .schein-rechts::after { left: auto; right: -0.7rem; }
.ablauf h2 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); }
.ablauf ol { list-style: none; margin: 1.5rem 0 2rem; padding: 0; counter-reset: schritt; }
.ablauf li { counter-increment: schritt; display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); align-items: baseline; padding: 0.9rem 0; border-top: 1px solid var(--linie); }
.ablauf li::before { content: counter(schritt); font-family: var(--titel); font-size: 2.2rem; line-height: 1; color: var(--wald); }
.knopf-zeile { margin-top: 2rem; }

/* Über mich */
.person { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; align-items: start; }
.person-bild { grid-column: 1 / span 5; }
.person-bild img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 999px 999px 0 0; }
.person-text { grid-column: 7 / -1; padding-top: clamp(0rem, 4vw, 4rem); }
.person-text .gross { font-size: 1.4rem; line-height: 1.45; color: var(--wald); }

.weg { margin: var(--abstand) calc(-1 * var(--rand)); padding: clamp(3rem, 7vw, 6rem) var(--rand); background: var(--wald); color: var(--grund); }
.weg h2 { color: var(--grund); }
.weg ol { list-style: none; margin: 2rem 0 0; padding: 0; max-width: 56rem; }
.weg li { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: 1.5rem; align-items: baseline; padding: 1rem 0; border-top: 1px solid color-mix(in srgb, var(--lime) 45%, transparent); }
.weg-zeit { font-family: var(--titel); font-size: 1.4rem; color: var(--lime); }

.jsj { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; align-items: center; }
.jsj > div { grid-column: 1 / span 6; grid-row: 1; }
.jsj h2 { margin-bottom: 1.25rem; }
.jsj figure { grid-column: 8 / -1; grid-row: 1; transform: rotate(2deg); box-shadow: 1rem 1rem 0 var(--erde); }
.jsj img { width: 100%; }

/* Kontakt */
.kontakt { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 3rem clamp(2rem, 5vw, 5rem); align-items: start; }
.formular p { margin: 0 0 1.5rem; }
.formular label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.formular input[type="text"],
.formular input[type="email"],
.formular textarea {
  width: 100%;
  font: inherit;
  color: inherit;
  background: #fff;
  border: 1px solid var(--gras);
  border-radius: 0;
  padding: 0.7rem 0.8rem;
}
.formular fieldset { border: 0; margin: 0 0 1.5rem; padding: 0; }
.formular legend { font-weight: 600; padding: 0; margin-bottom: 0.5rem; }
.formular fieldset ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2rem; }
.formular fieldset li { break-inside: avoid; padding: 0.2rem 0; }
.formular fieldset label { font-weight: 400; margin: 0; }
.formular input[type="checkbox"] { width: 1.1rem; height: 1.1rem; accent-color: var(--wald); vertical-align: -0.1rem; margin-right: 0.4rem; }

.anfahrt { background: var(--erde); color: var(--creme); padding: clamp(1.5rem, 3vw, 2.5rem); }
.anfahrt a { color: var(--creme); }
.anfahrt h2 { color: var(--creme); font-size: clamp(2.2rem, 3.6vw, 3rem); margin-bottom: 0.5rem; }
.anfahrt dl { margin: 1.5rem 0 0; }
.anfahrt dt { font-size: 0.95rem; }
.anfahrt dd { margin: 0 0 0.75rem; overflow-wrap: anywhere; }

/* Impressum, Datenschutz */
.rechtliches > h2 { font-size: 1.6rem; margin: 2rem 0 0.5rem; }
.rechtliches > p { max-width: 42rem; }
.entwurf { background: var(--hell); border-left: 4px solid var(--wald); padding: 1rem 1.25rem; }

/* ---------- Fuß ---------- */

.fuss { border-top: 2px solid var(--wald); padding: 2.5rem var(--rand) 3rem; font-size: 0.98rem; }
.fuss-gruss { font-family: var(--titel); font-size: 1.9rem; color: var(--wald); margin-bottom: 1.5rem; }
.fuss-spalten { display: flex; flex-wrap: wrap; gap: 1.5rem 4rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; }

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

@media (max-width: 62rem) {
  .leiste { flex-wrap: wrap; }
  .marke img { width: 3.4rem; }
  .marke span { font-size: 1.15rem; }
  .menue-knopf {
    display: block;
    font: 600 1rem var(--text);
    color: var(--wald);
    background: none;
    border: 0;
    padding: 0.6rem 0;
    text-decoration: underline wavy var(--lime);
    text-underline-offset: 0.3em;
    cursor: pointer;
  }
  .leiste nav { display: none; width: 100%; }
  .menue-offen .leiste { position: fixed; inset: 0; align-content: start; overflow-y: auto; }
  .menue-offen .leiste nav, .menue-offen .leiste-adresse { display: block; width: 100%; }
  .leiste nav ul { display: block; margin-top: 2rem; }
  .leiste nav a { font-size: 2.2rem; padding: 0.4rem 0; }
  .leiste-adresse { margin-top: 2.5rem; }
}

@media (max-width: 48rem) {
  body { font-size: 1.0625rem; }

  .bach { display: none; }

  .auftakt { display: block; }
  .auftakt-raum img { height: 16rem; }
  .auftakt { padding-bottom: 0; }
  .auftakt-tafel { margin: -5.5rem 0 0; }
  .auftakt-gruss { margin: 2.5rem 0 0; display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; }
  .auftakt-gruss img { height: 100%; }
  .bereich-bild { max-width: 14rem; }

  .bereich { grid-template-columns: minmax(0, 1fr); }
  .bereich a { grid-template-columns: minmax(0, 1fr); }

  .woche-tage { grid-template-columns: minmax(0, 1fr); }
  .woche-tage li { min-height: 0; border-left: 0; padding: 1rem 0; border-top: 1px solid color-mix(in srgb, var(--lime) 35%, transparent); }
  .woche-tage li:first-child { border-top: 0; }
  .woche-tage .frei { display: none; }
  .matten { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }

  .vorstellung { display: block; }
  .vorstellung figure { width: 65%; margin-bottom: 2rem; }

  .schein-bereich { grid-template-columns: minmax(0, 1fr); }
  .schein { grid-template-columns: minmax(0, 1fr); }
  .schein-rechts { flex-direction: row; gap: 0.75rem; border-left: 0; border-top: 2px dashed var(--creme); }
  .schein-rechts::before, .schein-rechts::after { top: -0.65rem; bottom: auto; }
  .schein-rechts::after { left: auto; right: -0.7rem; }

  .ort-spalten { grid-template-columns: minmax(0, 1fr); }

  .angebot { grid-template-columns: minmax(0, 1fr); }

  .regel table, .regel tbody, .regel tr, .regel th, .regel td { display: block; }
  .regel tr { padding: 1rem 0; border-bottom: 1px solid var(--linie); }
  .regel th, .regel td { padding: 0.15rem 0; border: 0; }
  .regel td:last-child { text-align: left; }

  .hinweise dl { grid-template-columns: minmax(0, 1fr); }
  .kopf-zeile, .einzeln-zeile, .gutschein-zeile { grid-template-columns: minmax(0, 1fr); }

  .person, .jsj { display: block; }
  .person-bild { width: 75%; margin-bottom: 2rem; }
  .weg li { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
  .jsj figure { width: 80%; margin: 2rem 0 0; }

  .kontakt { grid-template-columns: minmax(0, 1fr); }
  .formular fieldset ul { columns: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .bereich a { transition: padding 0.2s ease, background-color 0.2s ease; }
  .schein { transition: transform 0.2s ease; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- Farbwahl: nur für den Entwurf, kommt vor dem Start wieder raus ---------- */

.farbwahl {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  max-width: calc(100vw - 2rem);
  padding: 0.5rem 0.6rem;
  background: #fff;
  border: 1px solid #8a8a8a;
  font-size: 0.8rem;
  line-height: 1.2;
  color: #222;
}
.farbwahl button {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.5rem;
  background: #fff;
  border: 1px solid #bbb;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.farbwahl button[aria-pressed="true"] { border-color: #222; box-shadow: inset 0 0 0 1px #222; }
.farbwahl i { display: block; width: 0.8rem; height: 0.8rem; }

/* ---------- Leicht abgerundete Ecken für Kästen und Bilder ---------- */

.auftakt-tafel,
.auftakt-gruss,
.bereich-bild img,
.woche-kurs,
.einzeln,
.angebote-kopf,
.anfahrt,
.entwurf,
.jsj img,
.formular input[type="text"],
.formular input[type="email"],
.formular textarea,
.knopf { border-radius: var(--rund); }
.auftakt-gruss { overflow: hidden; }
.jsj figure { border-radius: var(--rund); }