/* ============================================================
   SCHRIFTEN – vom eigenen Server, nicht von Google
   ------------------------------------------------------------
   Die Schriften lagen vorher bei fonts.googleapis.com. Damit
   ging bei jedem Seitenaufruf die IP-Adresse des Besuchers an
   Google in die USA – ohne Einwilligung. Das Landgericht
   München I hat das am 20.01.2022 (Az. 3 O 17493/20) als
   datenschutzwidrig eingestuft und 100 € Schadensersatz an
   einen einzelnen Besucher zugesprochen.

   Jetzt liegen die Dateien in assets/fonts/. Es besteht keine
   Verbindung zu Google mehr. Beim Austauschen von Schriften
   also nicht wieder eine Google-Adresse einbauen.

   Nur die tatsächlich benutzten Schnitte sind dabei (7 statt
   der 40, die Google anbietet) und nur der Zeichensatz "latin",
   der Umlaute und ß enthält. Zusammen 284 kB.
   ============================================================ */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2'),
       url('assets/fonts/cormorant-garamond-latin-400-normal.woff') format('woff');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2'),
       url('assets/fonts/cormorant-garamond-latin-400-italic.woff') format('woff');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2'),
       url('assets/fonts/cormorant-garamond-latin-500-normal.woff') format('woff');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2'),
       url('assets/fonts/cormorant-garamond-latin-600-normal.woff') format('woff');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/jost-latin-300-normal.woff2') format('woff2'),
       url('assets/fonts/jost-latin-300-normal.woff') format('woff');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/jost-latin-400-normal.woff2') format('woff2'),
       url('assets/fonts/jost-latin-400-normal.woff') format('woff');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/jost-latin-500-normal.woff2') format('woff2'),
       url('assets/fonts/jost-latin-500-normal.woff') format('woff');
}


:root {
  --color-mauve: #8C5B5E;
  --color-mauve-dark: #6E4548;
  --color-cream: #FAF6F1;
  --color-cream-dark: #F1E9E0;
  --color-ink: #362B27;
  --color-ink-deep: #2A211E;
  --color-ink-soft: #5A4C47;
  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'Jost', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Grundregel für alle Bilder.
   Im HTML steht bei jedem Bild width und height – das reserviert beim
   Laden den richtigen Platz, damit die Seite nicht springt (Google
   bewertet das). Der Browser liest diese Attribute aber wie eine
   CSS-Angabe. Wenn eine Regel dann die Breite auf 100 % setzt, stehen
   Breite und Höhe fest und das Bild wird verzerrt oder falsch
   beschnitten. height: auto stellt klar: die Höhe ergibt sich aus der
   Breite. Regeln mit Klassennamen (z. B. .logo-img) sind spezifischer
   und behalten Vorrang, wenn dort absichtlich eine Höhe steht. */
img { height: auto; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-cream);
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--color-mauve-dark);
  font-weight: 500;
  margin: 0 0 0.5em;
  overflow-wrap: break-word;
  hyphens: auto;
}

h1 { font-size: clamp(2.8rem, 6vw, 4.5rem); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); line-height: 1.15; }
h3 { font-size: 1.4rem; }

p { margin: 0 0 1em; }

.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  color: var(--color-mauve);
  margin-bottom: 0.6em;
}

.center { text-align: center; }
.section-intro.center, p.section-intro { color: var(--color-ink-soft); max-width: 560px; margin-left: auto; margin-right: auto; }

.btn {
  display: inline-block;
  padding: 0.85em 2em;
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  transition: all 0.25s ease;
}
.btn-primary {
  background: var(--color-mauve);
  color: #fff;
}
.btn-primary:hover { background: var(--color-mauve-dark); }
.btn-outline {
  border: 1px solid var(--color-mauve);
  color: var(--color-mauve-dark);
}
.btn-outline:hover { background: var(--color-mauve); color: #fff; }

/* Header */
.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  padding: 24px 0;
}
/* zarter Schleier, damit Logo und Navigation auf hellen Bildstellen lesbar bleiben */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  height: 160px;
  background: linear-gradient(180deg, rgba(42,33,30,0.45) 0%, rgba(42,33,30,0) 100%);
  pointer-events: none;
}
.header-inner { position: relative; }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.logo-img { height: 40px; width: auto; }

/* Baum in Weiß, damit er zur weißen Wortmarke passt.
   brightness(0) macht jeden farbigen Bildpunkt schwarz, invert(1) dreht ihn
   auf Weiß – die durchsichtigen Stellen bleiben durchsichtig. Dieselbe
   Rezeptur wie beim Logo in der Fußzeile, damit oben und unten gleich
   aussehen. Die leichte Transparenz nimmt der harten Kante etwas Schärfe,
   ohne dass der Baum blass wirkt.
   ACHTUNG: Gilt nur für die dunkle Kopfleiste. Auf den hellen Seiten
   (Danke-Seiten, Fehlerseite) steht die Kopfleiste auf Creme – dort wäre
   ein weißes Logo unsichtbar. Die Rücknahme steht weiter unten bei
   .site-header-hell. */
.site-header .logo-img {
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
.logo-wordmark {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: #fff;
  letter-spacing: 0.02em;
}
.main-nav a {
  color: #fff;
  text-decoration: none;
  margin-left: 28px;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  opacity: 0.9;
}
.main-nav a:hover { opacity: 1; text-decoration: underline; }
.main-nav a.is-current { opacity: 1; text-decoration: underline; }

/* ---------------------------------------------------------------
   Ausklappmenü unter „Kurse"
   ---------------------------------------------------------------
   Öffnet auf zwei Wegen: :hover für die Maus, :focus-within für die
   Tastatur. Beides ist nötig – wer mit der Tabulatortaste navigiert,
   fährt mit nichts „darüber", und ein Menü, das man nur mit der Maus
   erreicht, ist für einen Teil der Besucherinnen gar nicht da.

   Kein JavaScript: Das Untermenü ist eine Bequemlichkeit, kein
   Muss. „Kurse" bleibt ein echter Link auf die Übersichtsseite –
   auf Tablets, wo es kein „darüberfahren" gibt, führt ein Tipp
   also einfach zur Seite, auf der alle Kurse ohnehin stehen.
   --------------------------------------------------------------- */
.nav-gruppe {
  position: relative;
  display: inline-block;
  margin-left: 28px;
  /* Der Streifen nach unten verlängert die Hover-Fläche bis an das
     aufgeklappte Feld. Ohne ihn würde die Maus auf dem Weg nach unten
     durch eine Lücke fahren, das Menü verlöre den Hover und
     verschwände genau in dem Moment, in dem man hinklicken will.
     Das negative margin nimmt die Höhe optisch wieder heraus. */
  padding-bottom: 16px;
  margin-bottom: -16px;
}
.nav-gruppe > a { margin-left: 0; }

/* kleines Dreieck als Hinweis, dass hier mehr kommt */
.nav-pfeil {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 7px;
  vertical-align: 2px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.75;
  transition: transform 0.2s ease;
}
.nav-gruppe:hover .nav-pfeil,
.nav-gruppe:focus-within .nav-pfeil { transform: rotate(180deg); opacity: 1; }

.nav-untermenue {
  position: absolute;
  top: 100%;
  left: -18px;
  min-width: 310px;
  padding: 10px 0;
  background: var(--color-cream);
  border-radius: 10px;
  box-shadow: 0 14px 38px rgba(42, 33, 30, 0.26);
  z-index: 40;
  /* visibility zusätzlich zu opacity: Ein nur durchsichtiges Menü
     wäre unsichtbar, aber weiterhin anklickbar und für Vorleseprogramme
     vorhanden. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.nav-gruppe:hover .nav-untermenue,
.nav-gruppe:focus-within .nav-untermenue {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.nav-untermenue a {
  display: block;
  margin-left: 0;
  padding: 9px 20px;
  color: var(--color-ink);
  opacity: 1;
  font-size: 0.9rem;
  line-height: 1.35;
}
.nav-untermenue a:hover,
.nav-untermenue a:focus-visible {
  background: rgba(140, 91, 94, 0.1);
  color: var(--color-mauve-dark);
  text-decoration: none;
}
.nav-untermenue a.is-current {
  color: var(--color-mauve-dark);
  text-decoration: none;
  font-weight: 500;
}
/* erster Eintrag ist die Übersicht – optisch abgesetzt */
.nav-untermenue a:first-child {
  border-bottom: 1px solid rgba(54, 43, 39, 0.12);
  margin-bottom: 6px;
  padding-bottom: 12px;
}

/* Mobiles Hamburger-Menü (per Default versteckt, erscheint nur unter 860px) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 30;
}
.nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
body.nav-open { overflow: hidden; }

/* Hero (Startseite) */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
/* Startbild gewechselt am 13.09.2026 (Thomas). Die Gestaltung bleibt wie sie
   war - nur das Bild ist neu (von vier Entwuerfen die Fassung "A").
   ZWEI STELLEN, siehe auch die Regel weiter unten im Handy-Abschnitt: Fuer
   schmale Bildschirme laedt die Seite eine eigene, kleinere Datei. Wer hier
   tauscht und die dort vergisst, sieht am Rechner das neue Bild und auf dem
   Handy weiter das alte - und merkt es nicht, weil man selten beides prueft.
   Neue Dateinamen statt gleicher: Bilder liegen einen Monat im Zwischenspeicher
   des Browsers; bei gleichem Namen saehe jeder Wiederkehrer wochenlang das alte. */
.hero-bg-wald { background-image: url('assets/images/hero-lichtung.jpg'); }
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(42,33,30,0.30) 0%, rgba(42,33,30,0.60) 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  margin: 0 auto;
}
.hero-logo {
  height: 118px;
  width: auto;
  margin-bottom: 0.9em;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}
.hero h1 { color: #fff; }
.hero-tagline {
  font-size: 1.15rem;
  max-width: 520px;
  margin: 0 auto 1.8em;
  color: rgba(255,255,255,0.92);
}

/* --------------------------------------------------------------------------
   Kopfbereich: Markenversprechen (18.08.2026)
   Die Groesse wird hier auf ".hero .hero-tagline" beschraenkt und NICHT an der
   Grundregel geaendert - dieselbe Klasse traegt auf allen Unterseiten den
   Untertitel im Banner. Aendert man die Grundregel, wachsen alle Unterseiten
   mit. Genau so eine stille Nebenwirkung wollen wir nicht.
   -------------------------------------------------------------------------- */
.hero .hero-tagline {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  line-height: 1.3;
  max-width: 620px;
  margin: 0 auto 0.5em;
}
/* Die zwei Saetze stehen je in einem <span> mit inline-block. Damit bricht die
   Zeile, wenn es eng wird, ZWISCHEN den Saetzen um - und nicht mitten im
   zweiten ("Verbunden mit / der Natur."), wie es auf dem Handy zuerst war. */
.hero .hero-tagline span { display: inline-block; }
.hero-satz {
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 520px;
  margin: 0 auto 1.6em;
  color: rgba(255,255,255,0.86);
  text-wrap: balance;
}

/* Die Wortreihe unter dem Versprechen: Wege, keine Schlagworte.
   Trennpunkte kommen aus CSS (::after), damit im Text kein "·" steht, das
   Vorleseprogramme mitsprechen wuerden. */
.marken-worte {
  list-style: none;
  margin: 0 auto 2em;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.15em 0;
  max-width: 620px;
}
.marken-worte li { display: flex; align-items: center; }
.marken-worte li::after {
  content: '·';
  color: rgba(255,255,255,0.45);
  margin: 0 0.7em;
}
.marken-worte li:last-child::after { content: none; }
.marken-worte a {
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.marken-worte a:hover,
.marken-worte a:focus-visible {
  color: #fff;
  border-bottom-color: rgba(255,255,255,0.8);
}

/* --------------------------------------------------------------------------
   Wandelband unter dem Kopfbereich (18.08.2026)
   Bewusst ohne Foto: die Zeilen brauchen Ruhe, und direkt ueber den bunten
   Kurskarten waere ein weiteres Bild eine Reizquelle zu viel.
   -------------------------------------------------------------------------- */


/* Gleiche Absicht wie oben in der Kopfzeile: der Umbruch soll zwischen den
   beiden Saetzen liegen, nicht vor "Neugier." */


/* Banner für Unterseiten */
.page-banner {
  position: relative;
  min-height: 52vh;
  display: flex;
  align-items: flex-end;
  color: #fff;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.page-banner-nebel { background-image: url('assets/images/naturbilder-620.jpg'); }
.page-banner-lichter { background-image: url('assets/images/kurs-banner-lichter.jpg'); }
/* Über mich: Melli mit Rahmentrommel im Kiefernwald – sitzt rechts, Text steht links daneben */
.page-banner-trommel {
  background-image: url('assets/images/mel-trommel-banner.jpg');
  background-position: center 40%;
}
.page-banner .hero-overlay {
  background: linear-gradient(180deg, rgba(42,33,30,0.45) 0%, rgba(42,33,30,0.72) 100%);
}
.page-banner-content {
  position: relative;
  z-index: 2;
  width: 100%;              /* sonst schrumpft der Flex-Container auf Textbreite und wird mittig gesetzt */
  padding-top: 120px;
  padding-bottom: 56px;
}
/* Text sitzt links, das Motiv bleibt rechts daneben frei sichtbar */
.page-banner h1, .page-banner .hero-tagline, .page-banner .breadcrumb { max-width: 620px; }
.page-banner .hero-overlay {
  background:
    linear-gradient(90deg, rgba(42,33,30,0.72) 0%, rgba(42,33,30,0.30) 62%, rgba(42,33,30,0.18) 100%),
    linear-gradient(180deg, rgba(42,33,30,0.35) 0%, rgba(42,33,30,0.55) 100%);
}
.page-banner h1 { color: #fff; font-size: clamp(2.3rem, 5vw, 3.6rem); margin-bottom: 0.3em; }
.page-banner .hero-tagline { margin: 0; max-width: 560px; }
.breadcrumb {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  margin-bottom: 1em;
}
.breadcrumb a { color: rgba(255,255,255,0.9); }

/* Sections */
.section { padding: 72px 0; }
.section-tight { padding: 48px 0; }

/* Ruhiger Übergang zwischen Banner und erstem Kurs-Panel:
   heller Streifen, damit das Bannerfoto nicht direkt auf das nächste Foto stößt. */
.kurse-lead {
  background: var(--color-cream);
  padding: 56px 0 52px;
  text-align: center;
}
.kurse-lead h2 { margin-bottom: 0.35em; }

/* ---------------------------------------------------------------
   Split-Panel: randlos, Bild füllt IMMER die komplette Sektionshöhe.
   Ersetzt das alte Spaltenlayout mit kleinem Foto neben viel Text.
   --------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: var(--color-cream);
}
.split-media {
  background-size: cover;
  background-position: center;
  min-height: 460px;
}
/* Für hohe Motive, bei denen sonst der Kopf oben abgeschnitten wird */
.split-media.oben { background-position: center 12%; }
.split-body {
  padding: 72px clamp(28px, 4.5vw, 76px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.split-body-inner { max-width: 560px; }
.split.reverse .split-media { order: 2; }
.split.reverse .split-body { order: 1; }
.split.reverse .split-body-inner { margin-left: auto; }
.split-alt { background: var(--color-cream-dark); }
.split-dark { background: var(--color-ink-deep); color: rgba(255,255,255,0.82); }
.split-dark h2 { color: #fff; }
.split-dark .eyebrow { color: rgba(255,255,255,0.65); }
.split-dark .kurs-detail-label { color: #fff; }
.split-dark .kurs-detail-list { color: rgba(255,255,255,0.78); }
.split-dark .kurs-format { color: rgba(255,255,255,0.6); }
.split-dark .kurs-meta { color: #fff; }
.split-dark .kurs-detail-list-inline li { background: rgba(255,255,255,0.12); color: #fff; }
.split-dark .btn-primary { background: var(--color-mauve); }
.split-dark .btn-primary:hover { background: #fff; color: var(--color-ink-deep); }

/* Bildband über die volle Breite (statt leerem Weißraum) */
.band {
  position: relative;
  padding: 104px 0;
  background-size: cover;
  background-position: center;
  color: #fff;
  text-align: center;
}
.band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(42,33,30,0.62);
}
.band .container { position: relative; z-index: 1; }
.band-nebel { background-image: url('assets/images/natur-3.jpg'); }
/* Neu am 13.09.2026 (Thomas): Sonnenaufgangsband unter den Kurskacheln auf der
   Startseite. BEWUSST EINE EIGENE KLASSE statt .band-nebel zu ueberschreiben -
   .band-nebel steht auch auf kurse.html unter dem Kontaktaufruf, und dort war
   keine Aenderung gewuenscht. Wer beide angleichen will, setzt auf kurse.html
   dieselbe Klasse; das Bild ist dann schon geladen.
   Der Schleier ist kraeftiger als der Standard (0.62), weil die Sonne im Bild
   sehr hell ist und die weisse Kursivschrift sonst darin verschwindet. */
.band-sonnenaufgang { background-image: url('assets/images/band-sonnenaufgang.jpg'); }
.band-sonnenaufgang::before { background: rgba(42,33,30,0.58); }
/* helles Herbstbild braucht einen kräftigeren Schleier, damit weiße Schrift lesbar bleibt */
.band-wald { background-image: url('assets/images/naturbilder-580.jpg'); }
.band-wald::before { background: rgba(42,33,30,0.72); }
.band-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.5;
  max-width: 760px;
  margin: 0 auto 0.6em;
  color: #fff;
}
.band-source {
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  margin: 0;
}
.band h2 { color: #fff; }
.band .eyebrow { color: rgba(255,255,255,0.78); }
.band-moos { background-image: url('assets/images/naturbilder-570.jpg'); }
.band-feuer { background-image: url('assets/images/kurs-feuer.jpg'); }
.band-feuer::before { background: rgba(42,33,30,0.55); }
.band-sonne {
  background-image: url('assets/images/band-sonne.jpg');
  background-position: center 62%;
}
.band-sonne::before { background: rgba(42,33,30,0.60); }
.band .section-intro { color: rgba(255,255,255,0.85); margin-bottom: 1.6em; }
.band .btn-outline { border-color: #fff; color: #fff; }
.band .btn-outline:hover { background: #fff; color: var(--color-ink-deep); }

/* Textbausteine in Split-Panels */
.intro-quote {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--color-ink);
  font-style: italic;
}
.intro-signature {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-mauve-dark);
  margin-top: 1.2em;
}
.price-note {
  font-weight: 500;
  color: var(--color-mauve-dark);
}
.kurs-detail-label {
  font-weight: 500;
  color: var(--color-mauve-dark);
  margin-bottom: 0.4em;
}
.kurs-detail-list {
  margin: 0 0 1.2em;
  padding-left: 1.1em;
  color: var(--color-ink-soft);
  font-size: 0.95rem;
}
.kurs-detail-list li { margin-bottom: 0.35em; }
.kurs-detail-list-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-left: 0;
  list-style: none;
  margin-bottom: 1.2em;
}
.kurs-detail-list-inline li {
  background: rgba(140,91,94,0.1);
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  margin-bottom: 0;
  color: var(--color-mauve-dark);
}
.kurs-format {
  font-size: 0.88rem;
  color: var(--color-ink-soft);
  font-style: italic;
  margin-bottom: 0.6em;
}
.split .kurs-meta {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--color-mauve-dark);
  margin-bottom: 1.4em;
}
/* muss nach .split .kurs-meta stehen, sonst gewinnt die mauve Farbe auf dunklem Grund */
.split.split-dark .kurs-meta { color: #fff; }
.split .btn { align-self: flex-start; }

/* Kurskacheln (Startseite) */
.kurse-bg {
  background: var(--color-cream-dark);
  padding-top: 64px;
  padding-bottom: 64px;
}
.kurse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
  margin-top: 40px;
}
.kurs-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(54,43,39,0.06);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.kurs-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(54,43,39,0.13);
}
.kurs-img {
  height: 200px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.kurs-card h3, .kurs-card p { padding-left: 20px; padding-right: 20px; }
.kurs-card h3 {
  margin-top: 0.7em;
  font-size: 1.2rem;
  line-height: 1.3;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}
.kurs-card p {
  padding-bottom: 20px;
  color: var(--color-ink-soft);
  font-size: 0.95rem;
  flex-grow: 1;
}
.kurs-card .kurs-meta {
  margin-top: auto;
  padding-top: 12px;
  padding-bottom: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-mauve-dark);
  border-top: 1px solid var(--color-cream-dark);
  flex-grow: 0;
}
/* Sichtbarer Hinweis, dass die Kachel anklickbar ist.
   Bewusst ein <span> und kein <a> – die ganze Kachel ist bereits ein Link,
   und ein Link im Link wäre ungültiges HTML. */
.kurs-mehr {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 20px 18px;
  font-size: 0.88rem;
  color: var(--color-mauve);
  transition: color 0.2s ease;
}
.kurs-pfeil {
  transition: transform 0.25s ease;
  font-size: 1.05em;
  line-height: 1;
}
.kurs-card:hover .kurs-mehr,
.kurs-card:focus-visible .kurs-mehr { color: var(--color-mauve-dark); }
.kurs-card:hover .kurs-pfeil { transform: translateX(4px); }
.kurs-card:focus-visible { outline: 3px solid var(--color-mauve); outline-offset: 3px; }
.kurse-all-link { margin-top: 36px; margin-bottom: 0; }

/* ---------------------------------------------------------------
   Schmaler, mittiger Textblock (Weiße-Hexe-Seite: Einweihung, Wort an
   die Männer). Beides sind kurze, ruhige Abschnitte ohne Bild – über die
   volle Containerbreite gesetzt würden sie als lange Zeilen zerfallen.
   --------------------------------------------------------------- */
.schmal-mittig {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
/* Der Abschnitt an die Männer steht am Ende einer Seite, die durchgehend
   Frauen anspricht. Er soll nicht wie ein Nachtrag wirken, aber auch nicht
   mit den Kursinhalten konkurrieren – deshalb der ruhige Cremeton und eine
   feine Linie oben statt eines eigenen Panels. */
.maenner-section {
  background: var(--color-cream-dark);
  border-top: 1px solid rgba(140, 91, 94, 0.18);
  padding-top: 56px;
  padding-bottom: 56px;
}
.maenner-section .eyebrow { margin-bottom: 14px; }
.maenner-section .section-intro { margin-bottom: 26px; }

/* ---------------------------------------------------------------
   Einstiegsband über den Kurskacheln (Startseite)

   Warum es das gibt: Das Raster darunter fasst bei Desktopbreite genau vier
   Kacheln. Der fünfte Kurs stand allein in einer neuen Reihe, drei Viertel
   davon leer. Statt das Raster umzubauen bekommt die Einstiegsstufe eine
   eigene Form über die volle Breite – das löst die Lücke und sagt gleichzeitig,
   dass dieser Kurs der Anfang ist und nicht der fünfte gleichrangige.

   Aufbau: Bild links, Text rechts. Auf dem Handy stapelt es sich, dort ist
   nebeneinander sinnlos.
   --------------------------------------------------------------- */
.kurs-einstieg {
  display: grid;
  /* Feste Bildspalte statt Anteil: Bei einem Anteil (z. B. 1fr 2fr) wächst das
     Bild auf großen Bildschirmen mit und das Band wird kopflastig. 380 px sind
     gemessen der Punkt, an dem Bild und Textblock sich die Waage halten. */
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(54, 43, 39, 0.06);
  text-decoration: none;
  color: inherit;
  margin-top: 40px;
  /* Bewusst dieselbe weiße Fläche und derselbe Schatten wie bei den Kacheln
     darunter. Das Band hebt sich durch Form und Überzeile ab, nicht durch
     Farbe – sonst konkurriert es mit dem Angebot statt es einzuleiten. */
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.kurs-einstieg:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(54, 43, 39, 0.13);
}
.kurs-einstieg:focus-visible {
  outline: 3px solid var(--color-mauve);
  outline-offset: 3px;
}
.kurs-einstieg-img {
  background-size: cover;
  background-position: center 55%;
  /* Ohne Mindesthöhe hätte die Bildspalte im Grid keine eigene Höhe und wäre
     bei kurzem Text zusammengefallen. */
  min-height: 210px;
}
.kurs-einstieg-text {
  padding: 26px 30px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.kurs-einstieg-label {
  margin: 0 0 2px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-mauve);
}
.kurs-einstieg-text h3 {
  margin: 0 0 8px;
  font-size: 1.6rem;
  line-height: 1.2;
  color: var(--color-mauve-dark);
}
.kurs-einstieg-lead {
  margin: 0 0 14px;
  color: var(--color-ink-soft);
  font-size: 0.97rem;
  max-width: 52ch;
}
/* Die Meta- und Mehr-Zeile erben aus den Kacheln ein Innenabstands- und
   Randbild, das hier nicht passt – der Kasten hat schon eigenes Polster. */
.kurs-einstieg .kurs-meta {
  margin: 0 0 10px;
  padding: 0;
  border-top: none;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-mauve-dark);
}
.kurs-einstieg .kurs-mehr { padding: 0; }
.kurs-einstieg:hover .kurs-mehr { color: var(--color-mauve-dark); }
.kurs-einstieg:hover .kurs-pfeil { transform: translateX(4px); }

/* ---------------------------------------------------------------
   Über-mich-Seite
   --------------------------------------------------------------- */

/* Sichtbarer Entwurfshinweis – vor Go-Live samt HTML entfernen */
.draft-note {
  background: #FBF0D9;
  border-bottom: 1px solid #E8D7B4;
  color: #6B5320;
  font-size: 0.88rem;
  padding: 12px 0;
}
.draft-mark {
  color: var(--color-mauve);
  font-size: 0.9em;
  cursor: help;
}

/* Rollen */
.rollen-section { background: var(--color-cream-dark); }
.rollen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 40px;
}
.rolle-card {
  background: #fff;
  border-radius: 10px;
  padding: 28px 26px;
  box-shadow: 0 4px 20px rgba(54,43,39,0.05);
}
.rolle-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.4em;
}
.rolle-card p {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: 0.95rem;
}

/* Galerie als Mosaik: unterschiedlich große Kacheln statt gleichförmiger Reihen */
.galerie-section { background: var(--color-cream); }
/* Spaltenlayout statt festem Raster: Die Bilder behalten ihr eigenes Seitenverhältnis.
   Dadurch wird nichts abgeschnitten und es entstehen keine Löcher am Ende. */
/* Grundzustand (auch wenn JavaScript aus ist): einfache Spalten */
.mosaik {
  column-count: 3;
  column-gap: 16px;
  margin-top: 40px;
}
/* Sobald das Skript läuft, werden die Bilder gleichmäßig auf Spalten verteilt,
   damit unten keine lange Lücke entsteht. */
.mosaik.verteilt {
  column-count: auto;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.mosaik-spalte {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mosaik.verteilt .mosaik-item { margin-bottom: 0; }
.mosaik-item {
  position: relative;
  margin: 0 0 14px;
  overflow: hidden;
  border-radius: 8px;
  cursor: pointer;
  background: var(--color-cream-dark);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  display: block;
}
.mosaik-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.6s ease;
}
.mosaik-item:hover img,
.mosaik-item:focus-visible img { transform: scale(1.06); }
.mosaik-item:focus-visible { outline: 3px solid var(--color-mauve); outline-offset: 2px; }
/* Bildunterschrift erscheint erst beim Darüberfahren */
.mosaik-item figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 16px 14px;
  font-size: 0.86rem;
  line-height: 1.35;
  color: #fff;
  background: linear-gradient(180deg, rgba(42,33,30,0) 0%, rgba(42,33,30,0.82) 60%);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.mosaik-item:hover figcaption,
.mosaik-item:focus-visible figcaption { opacity: 1; transform: translateY(0); }
.galerie-hinweis {
  margin-top: 18px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-ink-soft);
}

/* Vergrößerungsansicht */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(26,20,18,0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 64px;
}
.lightbox[hidden] { display: none; }
.lb-figure { margin: 0; max-width: 100%; max-height: 100%; text-align: center; }
.lb-figure img {
  max-width: 100%;
  max-height: 82vh;
  border-radius: 6px;
  display: block;
  margin: 0 auto;
}
.lb-figure figcaption {
  margin-top: 14px;
  color: rgba(255,255,255,0.85);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
}
.lb-close, .lb-nav {
  position: absolute;
  background: rgba(255,255,255,0.1);
  border: none;
  color: #fff;
  cursor: pointer;
  border-radius: 999px;
  line-height: 1;
  transition: background 0.2s ease;
}
.lb-close:hover, .lb-nav:hover { background: rgba(255,255,255,0.24); }
.lb-close { top: 20px; right: 24px; width: 46px; height: 46px; font-size: 1.9rem; }
.lb-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 2.2rem; }
.lb-prev { left: 18px; }
.lb-next { right: 18px; }

/* Privat: bewusst gemütlichere Schnappschüsse, im Querformat und mit Bildunterschrift */
.privat-section { background: var(--color-cream); }
.privat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 40px;
}
.privat-item { margin: 0; }
.privat-item img {
  width: 100%;
  /* height: auto ist hier zwingend, nicht Kosmetik: Im HTML steht bei
     jedem Bild width="900" height="675". Diese Attribute halten beim
     Laden den Platz frei (sonst ruckelt die Seite). Der Browser
     behandelt sie aber wie eine CSS-Höhe von 675 px – und sobald
     Breite UND Höhe feststehen, ignoriert er aspect-ratio. Ergebnis
     ohne diese Zeile: 347 px breit, 675 px hoch, und object-fit
     schneidet die Hochkant-Streifen aus den Querformaten heraus.
     Genau das war der Fehler im Abschnitt Privat am 17.08.2026. */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.privat-item figcaption {
  margin-top: 10px;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
  font-style: italic;
}

/* ---------------------------------------------------------------
   Mitlaufende Buchen-Leiste
   ---------------------------------------------------------------
   Bewusst zurückhaltend: Creme statt Signalfarbe, dünne Linie
   oben, kein Aufpoppen. Sie erscheint erst im mittleren Teil der
   Seite und verschwindet, sobald der Terminbereich im Blick ist –
   die Steuerung dazu steht in buchen.js.

   Grund für die Leiste: Der Terminbereich beginnt auf den
   Kursseiten erst bei etwa 64 % der Seitenlänge (nachgemessen).
   Wer vorher entscheidet, findet den Weg nicht.

   Ohne JavaScript bleibt sie unsichtbar – sie hat keine eigene
   Funktion, die dann fehlen würde.
   --------------------------------------------------------------- */
.buchen-leiste {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 25;
  background: var(--color-cream);
  border-top: 1px solid rgba(140, 91, 94, 0.28);
  box-shadow: 0 -6px 24px rgba(42, 33, 30, 0.1);
  transform: translateY(105%);
  transition: transform 0.28s ease;
}
.buchen-leiste.ist-sichtbar { transform: none; }
/* Wer Bewegung reduziert haben will, bekommt sie ohne Fahrt */
@media (prefers-reduced-motion: reduce) {
  .buchen-leiste { transition: none; }
}
.buchen-leiste-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 24px;
  max-width: 1140px;
  margin: 0 auto;
}
.buchen-leiste-text {
  font-size: 0.95rem;
  color: var(--color-ink);
}
.buchen-leiste-kurs { font-family: var(--font-display); font-size: 1.15rem; color: var(--color-mauve-dark); }
.buchen-leiste-trenner { color: var(--color-mauve); margin: 0 6px; }
.buchen-leiste-preis { color: var(--color-ink-soft); }
.buchen-leiste .btn { padding: 0.6em 1.5em; white-space: nowrap; }

/* Sprunglink in der Faktenleiste */
.fakt-sprung a {
  color: var(--color-mauve-dark);
  text-decoration: none;
  border-bottom: 1px solid rgba(140, 91, 94, 0.45);
  padding-bottom: 2px;
}
.fakt-sprung a:hover { border-bottom-color: var(--color-mauve-dark); }

/* Ausgebuchter Termin: matter, aber lesbar – nicht ausgegraut,
   weil dort noch der Wartelisten-Weg steht. */
.termin.ist-ausgebucht { opacity: 0.82; }
.termin.ist-ausgebucht .termin-preis { text-decoration: line-through; }

/* ---------------------------------------------------------------
   Kurs-Detailseiten
   --------------------------------------------------------------- */
/* Am 13.09.2026 gewechselt (Thomas). Vorher: kraeuter-hand.jpg - ein echtes Foto,
   das NICHT geloescht ist und weiter verwendet werden kann.

   KI-ILLUSTRATION, kein Foto. Sie zeigt keine Person. Der Hinweis steht im
   Impressum unter "Bilder" und nennt inzwischen alle DREI Kursseiten - wer hier
   etwas aendert, prueft den Satz dort mit.

   65 %: Bei 50 % ist der Tisch unten angeschnitten, bei 65 % stehen Moerser,
   Schale, Lavendelbuendel und Schere im Bild - also das Verarbeiten, worum es in
   diesen Kursen geht. Drei Ausschnitte gerendert und verglichen. */
.page-banner-kraeuter {
  background-image: url('assets/images/heilkraeuter-wiese.jpg');
  background-position: center 65%;
}
/* Am 13.09.2026 gewechselt (Thomas). Vorher stand hier schnupperkurs-kraeuter.jpg -
   dasselbe Bild, das auch im Abschnitt "Worum es geht" darunter lag. Zweimal
   dasselbe Foto auf einer Seite las sich wie ein Versehen. Jetzt: oben die
   Kraeutergirlande, darunter das Korbfoto.

   KI-ILLUSTRATION, kein Foto. Erkennbar an der Gleichmaessigkeit der Buendel und
   am makellosen Putz. Sie zeigt keine Person - deshalb kann sie niemand fuer eine
   Aufnahme aus Mellis Kursen halten. Der Hinweis darauf steht im Impressum unter
   "Bilder"; wer dieses Bild austauscht, prueft den Satz dort mit.

   50 % statt der frueheren 30 %: Die Girlande haengt in der Bildmitte. Bei 30 %
   waere oben zu viel leere Wand zu sehen und die Bluetenenden unten abgeschnitten.

   schnupperkurs-kraeuter.jpg ist NICHT geloescht - es ist ein echtes Foto aus
   Mellis Bestand und kann jederzeit wieder eingesetzt werden. */
.page-banner-schnupperkurs {
  background-image: url('assets/images/schnupperkurs-girlande.jpg');
  background-position: center 50%;
}
.page-banner-jahreskreis { background-image: url('assets/images/jahreskreis-2.jpg'); }
.page-banner-moos { background-image: url('assets/images/naturbilder-570.jpg'); }
/* schlichter Banner für Rechtstexte – kein Foto nötig */
.page-banner-schlicht {
  background: var(--color-ink-deep);
  min-height: 34vh;
}
.page-banner-schlicht .hero-overlay { background: none; }
/* .page-banner-rauch entfallen am 01.09.2026 mit dem Räucherkurs */
/* Banner der Gutscheinseite: selbst bemalte Kerzen aus einem echten Ritual, mit
   den aufgeschriebenen Wünschen "Vertrauen", "Gesundheit", "Lebensfreude".
   Bewusst dieses Motiv und kein Naturbild - es zeigt etwas Selbstgemachtes und
   Zugedachtes, und genau das ist ein Geschenk. Geprüft: keine erkennbaren
   Teilnehmerinnen im Bild (das Foto ist in der Galerie NICHT mit
   data-personen="ja" markiert), also auch ohne Einwilligungen verwendbar.
   Bildmitte etwas nach oben, damit die Kerzenflammen nicht unter der
   Überschrift verschwinden. */
.page-banner-verschenken {
  background-image: url('assets/images/banner-verschenken.jpg');
  background-position: center 42%;
}
/* Am 13.09.2026 von hexe-lichter.jpg auf die Illustration gewechselt (Thomas).
   Das Foto der Lichtertüten ist NICHT gelöscht - es steht weiter unten auf
   derselben Seite im Abschnitt zu den Jahreskreisfesten.

   28 % statt der frueheren 60 %: Das Bild ist 3:2, der Banner gut 400 Pixel
   hoch - es wird also stark beschnitten. Bei 60 % waere der Kopf der Figur oben
   angeschnitten und unten nur noch Kleid und Farn zu sehen. Bei 28 % steht das
   Gesicht ganz im Bild, der Hirsch frei, und der Sonnenuntergang bringt Licht
   in die rechte Haelfte - dort, wo keine Schrift steht.

   ES IST EINE KI-ILLUSTRATION, kein Foto. Der Hinweis darauf steht im
   Impressum unter "Bilder". Wer das Bild austauscht, prueft den Satz dort mit:
   Stimmt er dann noch? */
/* Am 13.09.2026 nachmittags gegen eine GRÖSSERE Fassung derselben Illustration
   getauscht: 2500 statt 1536 Pixel Ausgangsbreite. Damit ist die leichte
   Weichzeichnung auf grossen Bildschirmen weg, die ich beim ersten Einbau
   angemerkt hatte.

   NEUER DATEINAME, obwohl es dasselbe Motiv ist - und das ist Absicht:
   Bilder liegen laut .htaccess einen Monat im Zwischenspeicher des Browsers.
   Haette die neue Datei wieder "hexe-illustration.jpg" geheissen, saehe jeder,
   der die Seite schon besucht hat, wochenlang die alte, unschaerfere Fassung -
   und niemand haette es bemerkt. Das Versionskuerzel hinter style.css hilft
   hier NICHT, es gilt nur fuer das Stylesheet selbst.

   20 % statt 28 %: Die Komposition der neuen Fassung ist etwas anders. Bei
   28 % wird der Blumenkranz oben angeschnitten, bei 20 % steht er ganz im
   Bild und der Sonnenuntergang bekommt mehr Raum. Gerendert und verglichen. */
.page-banner-hexe {
  background-image: url('assets/images/hexe-waldfee.jpg');
  background-position: center 20%;
}

/* Die acht Jahreskreisfeste */
.feste-section { background: var(--color-cream); }
.feste-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  margin-top: 36px;
}
.fest-karte {
  background: #fff;
  border-radius: 10px;
  padding: 22px 22px 24px;
  box-shadow: 0 3px 16px rgba(54,43,39,0.05);
  border-top: 3px solid var(--color-mauve);
}
.fest-zeit {
  display: block;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-mauve);
  margin-bottom: 0.5em;
}
.fest-karte h3 { font-size: 1.2rem; margin-bottom: 0.35em; }
.fest-karte p { margin: 0; font-size: 0.92rem; color: var(--color-ink-soft); }

/* Aufnahmeweg in drei Schritten */
.aufnahme-section { background: var(--color-cream-dark); }
.schritte-liste {
  list-style: none;
  margin: 40px auto 0;
  padding: 0;
  max-width: 720px;
}
.schritte-liste li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 26px;
}
.schritt-nr {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-mauve);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.schritte-liste h3 { font-size: 1.2rem; margin-bottom: 0.25em; }
.schritte-liste p { margin: 0; color: var(--color-ink-soft); font-size: 0.96rem; }

.preis-kasten {
  max-width: 720px;
  margin: 8px auto 0;
  background: #fff;
  border-radius: 10px;
  padding: 28px 30px;
  box-shadow: 0 4px 20px rgba(54,43,39,0.06);
}
.preis-kasten h3 { font-size: 1.15rem; margin-bottom: 0.4em; }
.preis-gross {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--color-mauve-dark);
  margin-bottom: 0.3em;
}
.preis-zusatz { font-family: var(--font-body); font-size: 0.95rem; color: var(--color-ink-soft); }
.preis-kasten p:last-child { margin: 0; color: var(--color-ink-soft); font-size: 0.94rem; }

/* Bewerbungsformular */
.formular-section { background: var(--color-cream); }
.bewerbung-form {
  max-width: 720px;
  margin: 36px auto 0;
  background: #fff;
  border-radius: 12px;
  padding: 34px 34px 30px;
  box-shadow: 0 4px 24px rgba(54,43,39,0.07);
}
.feld-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.feld { display: block; margin-bottom: 18px; }
.feld > span {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 6px;
  color: var(--color-ink);
}
.feld em { font-style: normal; color: var(--color-ink-soft); font-size: 0.85em; }
.feld input, .feld select, .feld textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid #DED3C7;
  border-radius: 7px;
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--color-ink);
  background: var(--color-cream);
}
.feld textarea { resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: 2px solid var(--color-mauve);
  outline-offset: 1px;
  border-color: var(--color-mauve);
}
.feld-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
  margin: 6px 0 22px;
}
.feld-check input { margin-top: 3px; flex-shrink: 0; }
.formular-hinweis {
  margin: 14px 0 0;
  font-size: 0.88rem;
  color: var(--color-ink-soft);
}

/* Fakten auf einen Blick, direkt unter dem Banner */
.fakten-leiste {
  background: var(--color-ink-deep);
  color: rgba(255,255,255,0.9);
  padding: 22px 0;
}
.fakten-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
  justify-content: space-between;
}
.fakt { display: flex; flex-direction: column; gap: 2px; }
.fakt-label {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.fakt-wert { font-size: 1rem; color: #fff; }

/* Zwei Listen nebeneinander (passt/passt nicht, mitbringen/inklusive) */
.zwei-listen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 36px;
}
.liste-block h3 { font-size: 1.15rem; margin-bottom: 0.6em; }
.haken-liste, .minus-liste {
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--color-ink-soft);
  font-size: 0.96rem;
}
.haken-liste li, .minus-liste li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 0.6em;
}
.haken-liste li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-mauve);
}
.minus-liste li::before {
  content: '–';
  position: absolute;
  left: 4px;
  color: var(--color-ink-soft);
}
/* HINWEIS: `.minus-liste` und `.fuer-wen` werden seit dem 23.08.2026 auf keiner
   Seite mehr verwendet – die Abschnitte „Passt das zu Dir?" sind entfallen, ihre
   Inhalte stecken jetzt in den FAQ der jeweiligen Kursseite. Die Regeln bleiben
   trotzdem stehen: Sie sind zusammen sieben Zeilen, und sollte je wieder eine
   Gegenüberstellung gebraucht werden, ist sie damit sofort da. `.haken-liste`,
   `.zwei-listen` und `.liste-block` sind weiter im Einsatz (Mitbringen/Inklusive). */
.fuer-wen { background: var(--color-cream); }

/* Die drei Jahreszeiten */
.jahreszeiten-section { background: var(--color-cream-dark); }
/* Inhalts-Karten ("Was Dich erwartet", "Drei Jahreszeiten").
   Die Mindestbreite ist 240 px und nicht 260 px, und das ist gemessen, nicht
   geschätzt: Bei 1092 px Containerbreite brauchen vier Spalten
   4 × 260 + 3 × 24 = 1112 px – zwölf Pixel zu viel. Deshalb brachen die vier
   Karten auf Räucherkurs- und Schnupperkursseite in 3 + 1 um, mit einer fast
   leeren Reihe darunter (Thomas' Beobachtung, 23.08.2026). Mit 240 px sind es
   1032 px, die vier Karten stehen in einer Reihe.
   Die Heilkräuterseite mit ihren drei Karten bleibt unberührt: auto-fit legt
   keine leeren Spalten an, drei Karten füllen die Breite weiter zu dritt. */
.jahreszeiten-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 36px;
}
/* Mittlere Breiten: zwei Spalten statt drei, damit vier Karten 2 + 2 ergeben
   statt 3 + 1. Dieselbe Grenze wie bei den Kurskacheln auf der Startseite.

   Das `:has(> :nth-child(4))` ist wichtig und kein Schmuck: Die Regel darf NUR
   greifen, wenn wirklich vier Karten da sind. Ohne die Bedingung wurde die
   Heilkräuterseite mit ihren DREI Karten bei 1024 px zu 2 + 1 – gemessen, und
   das war schlechter als die drei in einer Reihe davor. Mit der Bedingung
   bleibt sie unberührt und die Anpassung geschieht automatisch, sobald ein
   Grid vier Karten hat.

   Falls ein sehr alter Browser `:has` nicht kennt, greift die Regel nicht und
   es bleibt beim alten 3 + 1 – unschön, aber nichts geht kaputt. */
@media (min-width: 861px) and (max-width: 1150px) {
  .jahreszeiten-grid:has(> :nth-child(4)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.jahreszeit-karte {
  background: #fff;
  border-radius: 10px;
  padding: 28px 26px;
  box-shadow: 0 4px 20px rgba(54,43,39,0.05);
}
.jahreszeit-karte h3 { font-size: 1.25rem; margin-bottom: 0.4em; }
.jahreszeit-karte p { margin: 0; color: var(--color-ink-soft); font-size: 0.95rem; }

/* Tagesablauf */
.ablauf-section { background: var(--color-cream); }
.ablauf-liste {
  list-style: none;
  margin: 36px auto 0;
  padding: 0;
  max-width: 640px;
  position: relative;
}
.ablauf-liste::before {
  content: '';
  position: absolute;
  left: 76px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: rgba(140,91,94,0.28);
}
.ablauf-liste li {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 34px;
  padding-bottom: 26px;
  position: relative;
}
.ablauf-liste li:last-child { padding-bottom: 0; }
.ablauf-liste li::before {
  content: '';
  position: absolute;
  left: 72px;
  top: 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-mauve);
}
.ablauf-zeit {
  text-align: right;
  font-size: 0.9rem;
  color: var(--color-mauve);
  padding-top: 1px;
}
.ablauf-liste h3 { font-size: 1.1rem; margin-bottom: 0.2em; }
.ablauf-liste p { margin: 0; color: var(--color-ink-soft); font-size: 0.94rem; }

.mitbringen-section { background: var(--color-cream-dark); }

/* Termine mit Buchen-Knopf */
.termine-section { background: var(--color-cream); }
.termin-liste { margin-top: 36px; }
.termin {
  display: grid;
  grid-template-columns: 130px 1fr auto auto;
  align-items: center;
  gap: 24px;
  background: #fff;
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 14px;
  box-shadow: 0 3px 14px rgba(54,43,39,0.05);
}
.termin-paket {
  background: var(--color-cream-dark);
  border: 1px solid rgba(140,91,94,0.25);
}
.termin-datum { display: flex; flex-direction: column; line-height: 1.15; }
.termin-tag {
  font-family: var(--font-display);
  font-size: 1.9rem;
  color: var(--color-mauve-dark);
}
.termin-monat { font-size: 0.85rem; color: var(--color-ink-soft); }
.termin-info h3 { font-size: 1.1rem; margin-bottom: 0.15em; }
.termin-info p { margin: 0; font-size: 0.9rem; color: var(--color-ink-soft); }
.termin-preis {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--color-mauve-dark);
  white-space: nowrap;
}
.termin-btn { white-space: nowrap; }
/* solange kein Zahlungslink hinterlegt ist */
.termin-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* Termine ohne Zahlungslink: Der Knopf ist ein <span>, kein <a>.
   Vorher war es ein <a href="#"> mit aria-disabled – das sah nach Knopf aus,
   sprang beim Klick aber an den Seitenanfang und war mit der Tastatur weiter
   anspringbar. Thomas ist am 18.08.2026 genau darüber gestolpert: über den
   Sprunglink "Termine ansehen" beim Knopf gelandet, und der tat nichts.
   Ein <span> lässt sich nicht klicken und nicht antabben, und der Text sagt
   jetzt, was los ist. Die gedämpfte Darstellung kommt aus der Regel darüber. */
.termin-btn-aus {
  /* opacity zurücksetzen: Die Regel darüber dämpft auf 0.55, zusammen mit der
     hellen Fläche wäre der Text kaum noch lesbar. Die Farbe reicht als Signal. */
  opacity: 1;
  background: var(--color-cream-dark);
  color: var(--color-ink-soft);
  cursor: default;
  font-style: italic;
}
.termin-hinweis {
  margin-top: 22px;
  text-align: center;
  font-size: 0.92rem;
  color: var(--color-ink-soft);
}

/* FAQ als aufklappbare Fragen – braucht kein JavaScript */
.faq-section { background: var(--color-cream-dark); }
.faq-liste { max-width: 760px; margin: 36px auto 0; }
.faq-eintrag {
  background: #fff;
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
}
.faq-eintrag summary {
  padding: 16px 22px;
  cursor: pointer;
  font-weight: 500;
  color: var(--color-mauve-dark);
  list-style: none;
  position: relative;
  padding-right: 48px;
}
.faq-eintrag summary::-webkit-details-marker { display: none; }
.faq-eintrag summary::after {
  content: '+';
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3rem;
  color: var(--color-mauve);
}
.faq-eintrag[open] summary::after { content: '–'; }
.faq-eintrag p {
  margin: 0;
  padding: 0 22px 18px;
  color: var(--color-ink-soft);
  font-size: 0.95rem;
}

/* ---------------------------------------------------------------
   Dankeseiten
   --------------------------------------------------------------- */
/* Kopfzeile auf hellen Seiten: kein Bild dahinter, also dunkle Schrift und kein Verlauf */
.site-header-hell::before { display: none; }
.site-header-hell .logo-wordmark { color: var(--color-mauve-dark); }
/* Hier steht die Kopfleiste auf Creme: Baum wieder in seinen eigenen Farben,
   sonst wäre er weiß auf hell und damit weg. Diese Zeile muss NACH der
   Weiß-Regel oben stehen – beide sind gleich stark, die spätere gewinnt. */
.site-header-hell .logo-img { filter: none; opacity: 1; }

.danke-seite {
  min-height: 82vh;
  display: flex;
  align-items: center;
  background: var(--color-cream);
  padding: 140px 0 80px;
  text-align: center;
}
.danke-inhalt { max-width: 640px; }
.danke-logo {
  height: 74px;
  width: auto;
  opacity: 0.85;
  margin-bottom: 1.4em;
}
.danke-seite h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 0.5em; }
.danke-text {
  color: var(--color-ink-soft);
  font-size: 1.02rem;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}
.danke-kasten {
  background: #fff;
  border-radius: 10px;
  padding: 26px 30px;
  margin: 2em auto;
  max-width: 540px;
  text-align: left;
  box-shadow: 0 4px 20px rgba(54,43,39,0.06);
}
.danke-kasten h2 { font-size: 1.15rem; margin-bottom: 0.7em; }
.danke-text a, .danke-kasten a { color: var(--color-mauve-dark); }
.danke-kasten .haken-liste li { margin-bottom: 0.7em; }
.danke-links { margin-top: 2.2em; }
.danke-zurueck {
  display: block;
  margin-top: 14px;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
}
.danke-seite .site-footer { margin-top: 0; }

/* Fehlermeldung über dem Bewerbungsformular */
.formular-fehler {
  background: #F7E2E2;
  border-left: 3px solid #C98B8B;
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  margin-bottom: 22px;
  color: #7A3B3B;
  font-size: 0.94rem;
}
.formular-fehler[hidden] { display: none; }

/* Honigtopf gegen Spam-Roboter: für Menschen unsichtbar, für Bots verlockend */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------------------
   FAQ-Seite und Rechtstexte
   --------------------------------------------------------------- */
.faq-seite { background: var(--color-cream); }
.faq-sprung {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 46px;
}
.faq-sprung a {
  background: var(--color-cream-dark);
  color: var(--color-mauve-dark);
  text-decoration: none;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 0.88rem;
  transition: background 0.2s ease, color 0.2s ease;
}
.faq-sprung a:hover { background: var(--color-mauve); color: #fff; }
.faq-gruppe { margin-bottom: 46px; scroll-margin-top: 100px; }
.faq-gruppe > h2 {
  text-align: center;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin-bottom: 0.7em;
}
.faq-gruppe .faq-liste { margin-top: 0; }
.faq-seite .faq-eintrag { box-shadow: 0 2px 10px rgba(54,43,39,0.04); }
.faq-eintrag a { color: var(--color-mauve-dark); }

/* Warnstreifen für den Entwurf der Teilnahmebedingungen */
.draft-note-warnung {
  background: #F7E2E2;
  border-bottom-color: #E4BFBF;
  color: #7A3B3B;
}

/* Rechtstext */
.rechtstext-section { background: var(--color-cream); }
.rechtstext {
  max-width: 780px;
  color: var(--color-ink-soft);
}
.rechtstext .stand {
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  margin-bottom: 2.4em;
}
.rechtstext h2 {
  font-size: 1.25rem;
  margin-top: 1.9em;
  margin-bottom: 0.5em;
  color: var(--color-mauve-dark);
}
.rechtstext h2:first-of-type { margin-top: 0; }
.rechtstext p { font-size: 0.97rem; line-height: 1.7; }
.rechtstext a { color: var(--color-mauve-dark); }

/* Für Impressum, Datenschutz und Teilnahmebedingungen: Zwischenüberschriften,
   Listen und eine schlichte Angabentafel. Bis zum 18.08.2026 gab es hier nur
   Regeln für p und h2 – Listen erbten die Größe des Grundtextes und fielen
   dadurch aus dem Bild. */
.rechtstext h3 {
  font-size: 1.02rem;
  margin-top: 1.5em;
  margin-bottom: 0.4em;
  color: var(--color-ink);
}
.rechtstext ul, .rechtstext ol { margin: 0.5em 0 1.3em; padding-left: 1.3em; }
.rechtstext li { font-size: 0.97rem; line-height: 1.7; margin-bottom: 0.35em; }
.rechtstext .angaben {
  list-style: none;
  margin: 0.4em 0 1.6em;
  padding: 0;
}
.rechtstext .angaben li {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 6px 18px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--color-cream-dark);
  margin: 0;
}
.rechtstext .angaben li > span:first-child { color: var(--color-ink); }
@media (max-width: 560px) {
  .rechtstext .angaben li { grid-template-columns: 1fr; gap: 2px; }
  .rechtstext .angaben li > span:first-child { font-size: 0.85rem; }
}

/* ============================================================
   Gutschein (gutschein.php und verschenken.html)
   ============================================================ */

/* Gutschein-Karten.
   Feste Spaltenzahl statt `auto-fit`: Vorher stand hier
   `auto-fit, minmax(260px, 1fr)` – im schmalen Rechtstext-Container ergab das
   2 + 1 (Thomas' Beobachtung vom 23.08.2026). Das Gitter liegt jetzt im vollen
   Container, und mit fester Spaltenzahl kann es bei Textänderungen nicht wieder
   umbrechen.

   23.08.2026: Von drei auf VIER Spalten, seit der Kräuter-Schnupperkurs
   dazugekommen ist. Vier Karten à rund 250 px sind schmal, aber die Titel
   brechen sauber (`hyphens: auto` weiter unten) – nachgemessen bei 1440, 1200
   und 1024 px. Unter 1150 px wird auf 2 + 2 umgestellt, siehe Media-Query
   weiter unten: Vier Spalten wären dort unter 230 px breit. */
.verschenken-gitter {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin: 2.4em 0 1.2em;
}
/* Mittlere Breiten: 2 + 2 statt vier gequetschter Spalten.
   Dieselbe Grenze wie bei den Kurskacheln und den Inhalts-Karten. */
@media (min-width: 861px) and (max-width: 1150px) {
  .verschenken-gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.verschenken-karte {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(54, 43, 39, 0.06);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.verschenken-karte:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(54, 43, 39, 0.13);
}
.verschenken-karte:focus-visible {
  outline: 3px solid var(--color-mauve);
  outline-offset: 3px;
}
/* Feste Bildhöhe, damit die drei Karten oben auf einer Linie beginnen.
   `background-size: cover` statt <img>: Die Bilder haben unterschiedliche
   Seitenverhältnisse, und hier soll die Fläche gefüllt werden. */
.verschenken-bild {
  height: 170px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.verschenken-inhalt {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.verschenken-karte h3 {
  margin: 0 0 0.5em;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--color-mauve-dark);
  overflow-wrap: break-word;
  hyphens: auto;
}
.verschenken-karte p { font-size: 0.95rem; line-height: 1.6; margin-bottom: 1em; }
/* Der Preis wird nach unten geschoben, damit er bei allen drei Karten auf
   gleicher Höhe sitzt – auch wenn die Beschreibungen unterschiedlich lang sind.
   ACHTUNG Spezifität: Der Selektor muss `.verschenken-karte .verschenken-preis`
   heißen. Mit nur `.verschenken-preis` (eine Klasse) gewinnt die Regel
   `.verschenken-karte p` (zwei Klassen) und der Preis erschien in 0,95rem
   Fließtextgröße statt in 1,7rem – gesehen im gerenderten Bild, nicht im Code. */
.verschenken-karte .verschenken-preis {
  font-family: var(--font-display);
  font-size: 1.7rem;
  line-height: 1.1;
  color: var(--color-mauve-dark);
  margin: auto 0 0.7em;
}
/* Knöpfe in den Gutscheinkarten kompakter als sonst.
   Grund: Seit vier Karten nebeneinander stehen (rund 257 px je Karte) brach
   "Zahlungspflichtig buchen" auf zwei Zeilen. Kürzen ist keine Option - die
   Beschriftung ist nach § 312j Abs. 3 BGB (Buttonlösung) vorgeschrieben, siehe
   Eintrag vom 18.08.2026. Also kleinere Schrift und weniger Innenabstand;
   nachgemessen bleibt der Knopf damit einzeilig und die Klickfläche über 44 px
   hoch, also weiter gut treffbar. */
.verschenken-karte .btn {
  align-self: stretch;
  text-align: center;
  padding: 0.8em 1.1em;
  font-size: 0.86rem;
}
.verschenken-hinweis {
  font-size: 0.88rem;
  color: var(--color-ink-soft);
  margin-top: 0.4em;
  margin-bottom: 0;
}
/* Der Textteil unter den Karten bekommt den dunkleren Cremeton.
   Vorher hatten Kartenbereich und Textteil dieselbe Fläche - dadurch wirkte der
   Abstand zwischen beiden wie unmotivierter Leerraum statt wie eine Trennung
   (gesehen im gerenderten Bild). Mit dem Farbwechsel ist die Lücke begründet:
   oben das Angebot, unten das Kleingedruckte. */
.rechtstext-section.rechtstext-anschluss {
  background: var(--color-cream-dark);
}

/* Der Gutschein selbst. Beim Drucken bleibt NUR dieser Kasten stehen -
   deshalb steht die Druckregel weiter unten und blendet alles andere aus. */
.gutschein {
  border: 2px solid var(--color-mauve);
  border-radius: 12px;
  background: #fff;
  padding: 40px 38px 34px;
  text-align: center;
  margin: 2em 0;
}
.gutschein-kopf { margin-bottom: 1.6em; }
.gutschein-logo { width: 62px; height: auto; display: block; margin: 0 auto 8px; }
.gutschein-marke {
  font-family: var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.82rem;
  color: var(--color-ink-soft);
  margin: 0;
}
.gutschein-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  color: var(--color-mauve-dark);
  margin: 0 0 0.5em;
}
.gutschein-titel {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  line-height: 1.2;
  margin: 0 0 0.7em;
  color: var(--color-ink);
}
.gutschein-fuer { font-size: 1.05rem; margin: 0 0 1em; }
.gutschein-widmung {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--color-ink-soft);
  max-width: 34em;
  margin: 0 auto 1em;
}
.gutschein-von { font-size: 0.95rem; color: var(--color-ink-soft); margin: 0 0 1.8em; }
.gutschein-daten {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 40px;
  border-top: 1px solid var(--color-cream-dark);
  border-bottom: 1px solid var(--color-cream-dark);
  padding: 16px 0;
  margin-bottom: 1.4em;
}
.gutschein-daten > span { font-size: 1rem; }
.gutschein-label {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.66rem;
  color: var(--color-ink-soft);
  margin-bottom: 3px;
}
.gutschein-einloesen {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--color-ink-soft);
  margin: 0;
}
.gutschein-klein { font-size: 0.82rem; line-height: 1.6; color: var(--color-ink-soft); }
.gutschein-fuss-hinweis { font-size: 0.9rem; color: var(--color-ink-soft); }

/* Beim Drucken soll ein Blatt herauskommen, auf dem NUR der Gutschein steht -
   ohne Menü, ohne Erklärtext, ohne Druckknopf. Sonst verschenkt jemand ein
   Blatt, auf dem "Drucken oder als PDF speichern" steht. */
@media print {
  body.gutschein-seite > *:not(section),
  .gutschein-hinweis,
  .gutschein-klein { display: none !important; }
  body.gutschein-seite,
  body.gutschein-seite .section,
  body.gutschein-seite .container { background: #fff; padding: 0; margin: 0; max-width: none; }
  .gutschein {
    border-color: #8C5B5E;
    margin: 0;
    padding: 32px 30px;
    page-break-inside: avoid;
  }
  .gutschein-logo { width: 54px; }
}

/* Die Widerrufsbelehrung und das Muster-Widerrufsformular müssen sich vom
   übrigen Text abheben – sie sind gesetzlich vorgegebene Bausteine und keine
   selbst formulierten Bedingungen. */
.widerruf-kasten {
  border: 1px solid var(--color-cream-dark);
  background: #fff;
  border-radius: 8px;
  padding: 22px 26px;
  margin: 1.2em 0 1.8em;
}
.widerruf-kasten h3:first-child { margin-top: 0; }
.widerruf-kasten p:last-child { margin-bottom: 0; }
/* offene Stellen deutlich sichtbar machen */
.rechtstext .offen {
  background: #FBF0D9;
  padding: 1px 6px;
  border-radius: 3px;
  color: #6B5320;
}
.offen-kasten {
  background: #FBF0D9;
  border-left: 3px solid #D9B871;
  border-radius: 0 8px 8px 0;
  padding: 18px 22px;
  margin: 1.2em 0 1.6em;
  color: #6B5320;
}
.offen-kasten p { margin-bottom: 0.7em; }
.offen-kasten p:last-child { margin-bottom: 0; }
.offen-kasten ul { margin: 0.4em 0 0; padding-left: 1.2em; }
.offen-kasten li { margin-bottom: 0.3em; }

/* Stornostaffel als saubere Gegenüberstellung */
.storno-liste {
  list-style: none;
  margin: 0.6em 0 1.6em;
  padding: 0;
  border-top: 1px solid var(--color-cream-dark);
}
.storno-liste li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--color-cream-dark);
  font-size: 0.96rem;
}
.storno-liste strong {
  color: var(--color-mauve-dark);
  white-space: nowrap;
}

/* Ausbildungsweg als Zeitleiste */
.weg-section { background: var(--color-cream-dark); }
.weg-liste {
  list-style: none;
  margin: 40px auto 0;
  padding: 0;
  max-width: 720px;
  position: relative;
}
.weg-liste::before {
  content: '';
  position: absolute;
  left: 88px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: rgba(140,91,94,0.28);
}
.weg-liste li {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 40px;
  padding-bottom: 32px;
  position: relative;
}
.weg-liste li:last-child { padding-bottom: 0; }
.weg-liste li::before {
  content: '';
  position: absolute;
  left: 84px;
  top: 9px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-mauve);
}
.weg-jahr {
  text-align: right;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-mauve);
  padding-top: 2px;
}
.weg-liste h3 { font-size: 1.2rem; margin-bottom: 0.25em; }
.weg-liste p { margin: 0; color: var(--color-ink-soft); font-size: 0.95rem; }

/* Footer */
.site-footer {
  background: var(--color-ink-deep);
  color: rgba(255,255,255,0.85);
  padding: 64px 0 24px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
}
/* Logo im Footer: transparente Variante, per Filter auf Weiß gesetzt.
   (logo-weiss.png hat einen weißen Hintergrund und wirkte deshalb wie ein kleiner heller Kasten.) */
/* align-items: flex-start ist wichtig – sonst zieht der Spalten-Flexcontainer
   das Logo auf die volle Spaltenbreite und es wird verzerrt dargestellt. */
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.footer-logo {
  height: 84px;
  width: auto;
  align-self: flex-start;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}
.footer-wordmark {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: #fff;
  letter-spacing: 0.02em;
}
.site-footer h3 {
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.8em;
}
.site-footer a { color: rgba(255,255,255,0.85); }
.footer-note { font-size: 0.8rem; color: rgba(255,255,255,0.5); margin-top: 1em; }
.footer-bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
}

/* Kleineres Hero-Bild fürs Handy (Datenvolumen) */
@media (max-width: 600px) {
  /* Handyfassung des Startbildes - die zweite Stelle. 1000 statt 2400 Pixel,
     177 statt 688 KB. Am 13.09.2026 zusammen mit der grossen getauscht. */
  .hero-bg-wald { background-image: url('assets/images/hero-lichtung-handy.jpg'); }
}

/* Galerie: mittlere Bildschirme drei Spalten */
@media (max-width: 1000px) {
  .mosaik { column-count: 3; }
}

/* Kurskacheln bei mittleren Breiten: zwei Spalten, nicht drei.
   Warum: Das Raster ist `auto-fit, minmax(240px, 1fr)`. In diesem Bereich
   passen dort genau drei Spalten – bei vier Kacheln ergibt das 3 + 1, also
   eine Reihe mit zwei leeren Plätzen. Gemessen am 22.08.2026 bei 1024 px.
   Mit zwei Spalten sind es 2 + 2, zwei vollständige Reihen.

   Die untere Grenze ist 861 px und kein Zufall: Ab 860 px abwärts greift der
   Schmalmodus-Block weiter unten (Hamburger-Menü, alles einspaltig). Der steht
   später im Stylesheet und gewinnt bei gleicher Spezifität – eine Regel ab
   700 px wäre dort also wirkungslos gewesen und der Kommentar hätte etwas
   behauptet, was nicht passiert. Nachgemessen: 820 px einspaltig, 1024 und
   1150 px zweispaltig, ab 1200 px vierspaltig.

   Das `:has(> :nth-child(4))` ist die gleiche Absicherung wie bei den
   Inhalts-Karten weiter unten: Die Regel greift nur, wenn wirklich vier Kacheln
   da sind. Sie wurde am 23.08.2026 nötig, als die Ausbildung zum/zur
   Ritualleiter:in aus dem Angebot fiel – seitdem sind es DREI Kacheln, und mit
   zwei Spalten hätte das 2 + 1 ergeben, also genau die halbleere Reihe, gegen
   die diese Regel gebaut wurde. Drei Kacheln stehen jetzt wieder zu dritt.

   Kommt eine vierte Kachel zurück (oder eine fünfte dazu), greift die Regel
   automatisch wieder – dann bitte nachmessen: Bei fünf Kacheln entstünde
   2 + 2 + 1. */
@media (min-width: 861px) and (max-width: 1150px) {
  .kurse-grid:has(> :nth-child(4)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Split-Panels stapeln früher als der Rest, sonst wird die Textspalte zu schmal */
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: initial; }
  .split.reverse .split-body { order: initial; }
  .split.reverse .split-body-inner { margin-left: 0; }
  .split-media { min-height: 300px; }
  .split-body { padding: 48px 24px; }
  .split-body-inner { max-width: none; }
}

@media (max-width: 860px) {
  .container { padding: 0 20px; }

  /* Header + mobiles Menü */
  .site-header { padding: 18px 0; }
  .logo-wordmark { font-size: 1.1rem; }
  .nav-toggle { display: flex; }
  .main-nav {
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: min(78vw, 320px);
    background: var(--color-ink-deep);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    padding: 24px 32px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 20;
  }
  .main-nav.is-open { transform: translateX(0); }
  .main-nav a {
    margin-left: 0;
    padding: 14px 0;
    font-size: 1.15rem;
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }

  /* Auf dem Handy KEIN Aufklappen. Das Menü ist hier schon ein
     Seitenfeld, das man aufschieben muss – ein Aufklapper darin wäre
     ein zweiter Griff für dieselbe Information. Die Kurse stehen
     deshalb dauerhaft eingerückt unter „Kurse". */
  .nav-gruppe {
    display: block;
    width: 100%;
    margin-left: 0;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .nav-pfeil { display: none; }
  .nav-untermenue {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: none;
    box-shadow: none;
    border-radius: 0;
    min-width: 0;
    padding: 4px 0 8px;
    transition: none;
  }
  .nav-untermenue a {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.98rem;
    padding: 10px 0 10px 16px;
    border-bottom: none;
    border-left: 1px solid rgba(255, 255, 255, 0.22);
  }
  .nav-untermenue a:first-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 10px;
  }
  .nav-untermenue a:hover,
  .nav-untermenue a:focus-visible,
  .nav-untermenue a.is-current { background: none; color: #fff; }

  /* Hero + Banner */
  .hero-logo { height: 86px; }
  .hero-tagline { font-size: 1rem; padding: 0 12px; }
  /* Auf dem Handy stehen fuenf Textbloecke uebereinander auf einem Foto.
     Deshalb hier alles etwas enger und die Wortreihe kleiner - sie darf
     umbrechen, aber die Zeilen sollen sich nicht beruehren. */
  .hero .hero-tagline { font-size: 1.28rem; padding: 0 8px; margin-bottom: 0.55em; }
  .hero-satz { font-size: 0.97rem; padding: 0 14px; margin-bottom: 1.5em; }
  /* Trennpunkte fallen weg: bricht die Reihe um, haengt sonst ein Punkt am
     Zeilenende in der Luft. Der Abstand trennt hier genauso gut. */
  .marken-worte { margin-bottom: 1.9em; gap: 0.55em 1.4em; padding: 0 22px; }
  .marken-worte a { font-size: 0.8rem; letter-spacing: 0.07em; }
  .marken-worte li::after { content: none; }
  
  
  
  .btn { padding: 0.95em 1.8em; }
  .page-banner { min-height: 42vh; }
  .page-banner-content { padding-top: 96px; padding-bottom: 40px; }

  /* Sections: weniger Weißraum auf kleinen Screens */
  .section { padding: 52px 0; }
  .section-tight { padding: 36px 0; }
  .kurse-bg { padding-top: 48px; padding-bottom: 48px; }
  .band { padding: 72px 0; }
  .intro-quote { font-size: 1.1rem; }

  .kurse-grid { grid-template-columns: 1fr; gap: 22px; margin-top: 32px; }
  /* Gutschein-Karten auf dem Handy einspaltig, Bild etwas flacher */
  .verschenken-gitter { grid-template-columns: 1fr; gap: 20px; }
  .verschenken-bild { height: 170px; }

  /* Einstiegsband: auf dem Handy stapeln. Nebeneinander bliebe für Bild und
     Text je rund 170 px – zu wenig für beides. */
  .kurs-einstieg { grid-template-columns: 1fr; margin-top: 32px; }
  .kurs-einstieg-img { min-height: 180px; }
  .kurs-einstieg-text { padding: 20px 20px 22px; }
  .kurs-einstieg-text h3 { font-size: 1.35rem; }
  .kurs-einstieg-lead { font-size: 0.94rem; }
  .kurs-detail-list-inline li { font-size: 0.8rem; padding: 4px 12px; }

  /* Über mich */
  /* Galerie auf dem Handy: 2 Spalten */
  .mosaik { column-count: 2; column-gap: 10px; margin-top: 32px; }
  .mosaik-item { margin-bottom: 10px; }
  /* auf Touchgeräten gibt es kein Hover – Bildunterschrift dauerhaft zeigen */
  .mosaik-item figcaption { opacity: 1; transform: none; font-size: 0.76rem; padding: 20px 10px 9px; }

  /* Buchen-Leiste auf dem Handy: schmaler, Kursname weg –
     der Platz gehört dem Knopf. */
  .buchen-leiste-inner { padding: 10px 16px; gap: 12px; }
  .buchen-leiste-kurs, .buchen-leiste-trenner { display: none; }
  .buchen-leiste .btn { padding: 0.65em 1.2em; font-size: 0.9rem; }

  .privat-grid { grid-template-columns: 1fr; gap: 22px; margin-top: 32px; }

  /* Kurs-Detailseiten */
  .fakten-grid { gap: 14px 26px; }
  .fakt { flex: 1 1 40%; }
  .zwei-listen { grid-template-columns: 1fr; gap: 30px; margin-top: 28px; }
  .ablauf-liste li { grid-template-columns: 52px 1fr; gap: 20px; }
  .ablauf-liste::before { left: 60px; }
  .ablauf-liste li::before { left: 56px; }
  /* Termine stapeln, Buchen-Knopf über die volle Breite */
  .termin {
    grid-template-columns: auto 1fr;
    gap: 8px 18px;
    padding: 18px 18px 20px;
  }
  .termin-info { grid-column: 2; }
  .termin-preis { grid-column: 1 / -1; font-size: 1.1rem; }
  .termin-btn { grid-column: 1 / -1; text-align: center; }
  .schritte-liste li { grid-template-columns: 46px 1fr; gap: 16px; }
  .schritt-nr { width: 46px; height: 46px; font-size: 1.3rem; }
  .bewerbung-form { padding: 24px 20px 22px; }
  .feld-reihe { grid-template-columns: 1fr; gap: 0; }

  .lightbox { padding: 16px; }
  .lb-close { top: 12px; right: 12px; width: 42px; height: 42px; }
  .lb-nav { width: 44px; height: 44px; font-size: 1.8rem; }
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }
  .lb-figure img { max-height: 70vh; }
  .rollen-grid { grid-template-columns: 1fr; gap: 18px; margin-top: 32px; }
  .weg-liste li { grid-template-columns: 60px 1fr; gap: 22px; }
  .weg-liste::before { left: 66px; }
  .weg-liste li::before { left: 62px; }

  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
}

/* Sicherheitsnetz: nie horizontal scrollen, egal wie schmal das Gerät ist */
html, body { max-width: 100%; overflow-x: hidden; }

/* Inhalte-Liste auf der Heilkräuterseite (Mellis Punkte, 01.09.2026).
   Eine Hakenliste im schmalen Container - die Punkte sind teils lang,
   in drei Spalten wären sie unlesbar geworden. */
.inhalte-section { background: var(--color-cream); }
.inhalte-liste { text-align: left; margin: 1.6em 0 0; }
.inhalte-liste li { margin-bottom: 0.9em; line-height: 1.65; }
.inhalte-liste em {
  display: block;
  margin-top: 0.35em;
  font-size: 0.93em;
  color: var(--color-ink-soft);
}
.inhalte-schluss {
  margin-top: 2em;
  font-style: italic;
  color: var(--color-ink-soft);
  text-align: center;
}

/* "· Termin zur Wahl" hinter der Jahreszeit. Bewusst leiser gesetzt als die
   Jahreszeit selbst: Die Überschrift der Zeile ist "Frühling", der Zusatz
   erklärt nur, dass es zwei Termine dafür gibt. */
.termin-wahl {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--color-ink-soft);
  white-space: nowrap;
}
.fakt-klein {
  display: block;
  font-size: 0.74rem;
  font-weight: 300;
  color: var(--color-ink-soft);
  margin-top: 2px;
}


/* ---------------------------------------------------------------------------
   ARTIKELSEITE (Mellis SEIN-Beitrag, 01.09.2026)
   Ein durchgehender Lesetext, kein Angebot - deshalb schmaler Satzspiegel und
   größere Zeilenhöhe als auf den Kursseiten. 34em sind rund 75 Zeichen je
   Zeile; darüber verliert das Auge beim Zeilenwechsel die Spur.
   --------------------------------------------------------------------------- */
.artikel { background: var(--color-cream); }
.artikeltext { max-width: 34em; }
.artikeltext p { line-height: 1.8; margin-bottom: 1.3em; }
.artikeltext h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  margin: 2.4em 0 0.7em;
}
.artikeltext h2:first-of-type { margin-top: 1.2em; }

.artikel-vorspann {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.08rem;
  color: var(--color-ink-soft);
  border-bottom: 1px solid var(--color-cream-dark);
  padding-bottom: 1.4em;
}

.artikel-zitat {
  margin: 2.4em 0;
  padding: 0 0 0 1.2em;
  border-left: 2px solid var(--color-mauve);
}
.artikel-zitat p {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.6vw, 1.5rem);
  line-height: 1.45;
  color: var(--color-mauve-dark);
  margin: 0;
}

.artikel-bild { margin: 2.4em 0; }
.artikel-bild img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}
.artikel-bild figcaption {
  margin-top: 0.7em;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--color-ink-soft);
  font-style: italic;
}

/* Die Kästen standen in der Zeitschrift neben dem Fließtext. Auf dem Handy
   wären zwei Spalten unlesbar, deshalb hier untereinander und abgesetzt. */
.artikel-kasten {
  background: #fff;
  border: 1px solid var(--color-cream-dark);
  border-radius: 6px;
  padding: 1.8em 1.9em 1.4em;
  margin: 2.6em 0;
}
.artikel-kasten h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--color-mauve-dark);
  margin: 0 0 0.8em;
}
.artikel-kasten h4 {
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  margin: 1.5em 0 0.35em;
  color: var(--color-ink);
}
.artikel-kasten h4:first-of-type { margin-top: 1em; }
.artikel-kasten p { font-size: 0.97rem; line-height: 1.7; margin-bottom: 0.9em; }
.artikel-kasten p:last-child { margin-bottom: 0; }

.artikel-quelle {
  margin-top: 3em;
  padding-top: 1.4em;
  border-top: 1px solid var(--color-cream-dark);
  font-size: 0.85rem;
  color: var(--color-ink-soft);
}

@media (max-width: 620px) {
  .artikel-kasten { padding: 1.4em 1.3em 1.1em; }
}

/* Verweis auf Mellis Artikel (Über mich, 01.09.2026) */
.artikel-verweis-section { background: var(--color-cream-dark); }
.artikel-hinweis {
  margin-top: 1.4em;
  font-size: 0.95rem;
  color: var(--color-ink-soft);
}


/* ---------------------------------------------------------------------------
   TEILNEHMERSTIMMEN (01.09.2026)
   Auf mehrere Stimmen ausgelegt, auch wenn zunächst nur eine dasteht:
   Bei einer Stimme zentriert das Raster sie, ab zwei stehen sie nebeneinander.
   So muss beim Nachtragen nur das Markup ergänzt werden, nichts umgebaut.
   --------------------------------------------------------------------------- */
.stimmen-section { background: var(--color-cream-dark); }
.stimmen-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
  margin-top: 2em;
  justify-items: center;
}
.stimme {
  margin: 0;
  max-width: 34em;
  text-align: center;
}
.stimme blockquote { margin: 0; }
.stimme blockquote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.05rem, 2.1vw, 1.22rem);
  line-height: 1.6;
  color: var(--color-ink);
  margin: 0;
}
.stimme figcaption { margin-top: 1.3em; }
.stimme-name {
  display: block;
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--color-ink);
}
.stimme-quelle {
  display: block;
  margin-top: 0.35em;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--color-ink-soft);
}
/* Ab zwei Stimmen wird es eng - dann etwas kleiner setzen. */
.stimmen-liste:has(> :nth-child(2)) .stimme blockquote p { font-size: 1.02rem; }


/* ---------------------------------------------------------------------------
   BILDBAND AUS DEM KURS (01.09.2026)
   Vier Fotos in unterschiedlichen Seitenverhältnissen - Handyaufnahmen von
   einer Teilnehmerin. Statt sie zu beschneiden, bekommen alle dieselbe Höhe
   und werden mittig ausgeschnitten (object-fit). So bleibt das Band ruhig,
   ohne dass am Original etwas verlorengeht.
   --------------------------------------------------------------------------- */
.kursbilder-section { background: var(--color-cream); }
.kursbilder-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
  margin-top: 2em;
}
.kursbilder-band figure { margin: 0; }
.kursbilder-band img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}
.kursbilder-band figcaption {
  margin-top: 0.6em;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--color-ink-soft);
}
.kursbilder-quelle {
  margin-top: 1.6em;
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--color-ink-soft);
}
@media (max-width: 620px) {
  .kursbilder-band img { height: 220px; }
}

/* Einzelnes Kursfoto im Textfluss (Schnupperkurs) */
/* ---------------------------------------------------------------------------
   Was wurde gebucht – Kasten auf danke.php (02.09.2026)
   Absichtlich ruhiger als .danke-kasten daneben: Das hier sind Angaben zum
   Nachlesen, keine Handlungsaufforderung. Deshalb heller Grund, keine Haken,
   und die Termine als schlichte Liste - man soll sie abschreiben können.
   --------------------------------------------------------------------------- */
.danke-buchung {
  margin: 1.8rem auto 0;
  max-width: 30rem;
  padding: 1.3rem 1.6rem;
  border: 1px solid var(--color-linie, rgba(0,0,0,.12));
  border-radius: 6px;
  text-align: left;
}
.danke-buchung-titel {
  margin: 0;
  font-family: var(--font-display, serif);
  font-size: 1.15rem;
  line-height: 1.35;
}
.danke-menge {
  display: block;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--color-ink-soft);
}
.danke-buchung-label {
  margin: 1.1em 0 0.3em;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.danke-termine {
  margin: 0;
  padding-left: 1.1em;
  line-height: 1.75;
}
.danke-buchung-fuss {
  margin: 0.9em 0 0;
  font-size: 0.85rem;
  color: var(--color-ink-soft);
}

/* Einzelnes Kursfoto in voller Satzbreite.
   Geändert am 02.09.2026: Vorher stand es eingerückt (680px) direkt unter dem
   randabfallenden Foto des Textabschnitts - zwei Bilder in zwei Ausrichtungen
   übereinander. Jetzt steht es weiter unten und läuft über die ganze Breite.
   Die feste Höhe statt "height: auto" ist Absicht: Bei 1092px Satzbreite wäre
   das 4:3-Foto über 800px hoch geworden und hätte den Abschnitt erschlagen.
   Gleiche Bauart wie .kursbilder-band auf der Heilkräuterseite. */
.kursbild-einzeln figure { margin: 0; }
.kursbild-einzeln img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}
@media (max-width: 620px) {
  .kursbild-einzeln img { height: 260px; }
}
.kursbild-einzeln figcaption {
  margin-top: 0.7em;
  font-size: 0.8rem;
  color: var(--color-ink-soft);
  text-align: center;
}

/* ============================================================
   TERMINE IN JAHRESZEITEN-BLÖCKEN  (13.09.2026)
   ============================================================
   Vorher lagen die sechs Heilkräuter-Termine als sechs gleich
   aussehende Karten untereinander. Preis und Uhrzeit standen
   sechsmal da und waren jedes Mal gleich - sie nahmen den
   meisten Platz ein und trugen nichts zur Unterscheidung bei.
   Jetzt: ein Block je Jahreszeit, Preis und Uhrzeit einmal im
   Kopf, darunter die zwei Termine als schlanke Zeilen.

   Die Zeilen behalten die Klasse .termin, weil buchen.js danach
   sucht. Deshalb muessen die Kartenmerkmale hier ausdruecklich
   zurueckgenommen werden - eigener Hintergrund, Schatten,
   Abstand und Raster kommen sonst doppelt. */
.jahreszeit {
  background: #fff;
  border-radius: 10px;
  padding: 22px 26px 8px;
  margin-bottom: 16px;
  box-shadow: 0 3px 14px rgba(54,43,39,0.05);
}
.jahreszeit-kopf {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(54,43,39,0.10);
}
.jahreszeit-name {
  font-family: var(--font-display);
  font-size: 1.45rem;
  color: var(--color-mauve-dark);
  margin: 0 0 0.15em;
}
.jahreszeit-wahl {
  margin: 0;
  font-size: 0.88rem;
  color: var(--color-ink-soft);
}
.jahreszeit-eckdaten {
  margin: 0;
  text-align: right;
  line-height: 1.35;
  white-space: nowrap;
}
.jahreszeit-preis {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--color-mauve-dark);
}
.jahreszeit-zeit {
  display: block;
  font-size: 0.85rem;
  color: var(--color-ink-soft);
}

/* Die Datumszeile: alle Kartenmerkmale zuruecknehmen. */
.jahreszeit .termin.termin-zeile {
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px 20px;
  background: none;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  padding: 15px 0;
  border-bottom: 1px solid rgba(54,43,39,0.07);
}
.jahreszeit .termin.termin-zeile:last-child { border-bottom: none; }
.termin-titel {
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.2;
}
/* Der Tag gross, der Monat leiser - dasselbe Verhaeltnis wie in den
   alten Karten, nur nebeneinander statt uebereinander. */
.jahreszeit .termin-tag {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--color-ink-deep);
}
.jahreszeit .termin-monat {
  font-size: 0.95rem;
  color: var(--color-ink);
}
.termin-zeile-status {
  grid-column: 1;
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-ink-soft);
}
.jahreszeit .termin-btn { grid-column: 2; grid-row: 1 / span 2; }

/* Nur fuer Bildschirmlesegeraete. Bewusst NICHT display:none -
   damit waere der Text auch fuer sie weg, und buchen.js braucht
   ihn ausserdem in textContent fuer den Betreff der
   Warteliste-Mail. */
.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 720px) {
  .jahreszeit { padding: 18px 18px 6px; }
  .jahreszeit-kopf { flex-direction: column; gap: 6px; }
  .jahreszeit-eckdaten { text-align: left; }
  .jahreszeit-preis { display: inline; }
  .jahreszeit-zeit { display: inline; }
  .jahreszeit-zeit::before { content: " · "; }
  .jahreszeit .termin.termin-zeile {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 16px 0 18px;
  }
  .jahreszeit .termin-btn {
    grid-column: 1;
    grid-row: auto;
    text-align: center;
    margin-top: 8px;
  }
}