/* =========================================================================
   KI-Werkstatt 60plus – Landingpage
   Umsetzung des Design-Canvas "KI-Workshop Landingpage.dc.html".
   Abweichungen vom Entwurf sind mit "A11Y" kommentiert und in der
   CLAUDE.md begruendet: Schriftgroessen und Kontraste sind auf die
   Zielgruppe 60+ angehoben.
   ========================================================================= */

/* ---------- 1. Variablen -------------------------------------------------- */

:root {
  /* Farben (Design-Canvas, Textfarben auf Kontrast 7:1 nachgeschaerft) */
  --farbe-ink: #111111;
  --farbe-ink-muted: #4a4a48;      /* A11Y: war #626260, jetzt 7.9:1 auf Creme */
  --farbe-ink-subtle: #55554f;     /* A11Y: war #7b7b78 */
  --farbe-auf-dunkel: #ffffff;
  --farbe-meta-dunkel: #b9bcc2;    /* A11Y: war #9c9fa5 */
  --farbe-canvas: #f5f1ec;
  --farbe-surface: #ffffff;
  --farbe-surface-2: #ebe7e1;
  --farbe-inverse: #000000;
  --farbe-inverse-surface: #313130;
  --farbe-hairline: #d3cec6;
  --farbe-hairline-soft: #ebe7e1;
  --farbe-akzent: #8a2f00;         /* A11Y: war #ff5600 (nur 2.8:1) */
  --farbe-akzent-hover: #6d2500;
  --farbe-akzent-hell: #ee5a2b;    /* nur Flaeche/Rahmen, NICHT als Textfarbe (3.4:1) */
  --farbe-akzent-hell-dunkel: #d64a1c; /* Hover des orangen Badges */
  --farbe-gruen: #285a34;          /* Etikett Grundlagenkurs; 8:1 mit weisser Schrift */
  --farbe-gruen-dunkel: #1e4527;   /* Hover des gruenen Etiketts */
  --farbe-gruen-hell: #3e8b50;     /* nur Grafiken (Haekchen), nie Textgrund */
  --farbe-rot: #a00000;            /* Hinweis "Datum folgt", 7.7:1 auf Weiss */
  --farbe-akzent-tint: #fbe8de;    /* helle Tönung des Akzents, Hover-Grund */

  /* Abstaende */
  --abstand-xs: 0.5rem;
  --abstand-s: 0.75rem;
  --abstand-m: 1rem;
  --abstand-l: 1.5rem;
  --abstand-xl: 2rem;
  --abstand-xxl: 3rem;
  --abstand-sektion: 5rem;

  /* Radien */
  --radius-m: 8px;
  --radius-l: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;

  /* Typografie */
  --schrift: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --inhalt-breite: 1180px;

  --fokus-farbe: #111111;
  --fokus-breite: 3px;

  /* Seitlicher Mindestabstand, plus die Aussparung bei iPhones im
     Querformat. Faellt auf 0 zurueck, wenn das Geraet keine hat. */
  --rand-links: max(var(--abstand-l), env(safe-area-inset-left));
  --rand-rechts: max(var(--abstand-l), env(safe-area-inset-right));
}

/* ---------- 2. Reset ------------------------------------------------------ */

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

body, h1, h2, h3, p, ul, li, figure, blockquote {
  margin: 0;
  padding: 0;
}

ul { list-style: none; }

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

/* ---------- 3. Basis-Typografie ------------------------------------------ */

html {
  font-size: 100%;
  /* "only light" schaltet Chromes automatisches Dunkeldesign auf Android ab.
     Ohne diese Zeile faerbt der Browser Creme zu Dunkelgrau und Orange zu
     Dunkelrot um, ohne dass die Seite etwas davon merkt. */
  color-scheme: only light;
  /* iOS Safari vergroessert Text im Querformat eigenmaechtig. Das
     zerschiesst das Layout, deshalb abschalten. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--schrift);
  font-size: 1.25rem;           /* A11Y: 20px Grundgroesse (Entwurf: 17px) */
  line-height: 1.6;
  color: var(--farbe-ink);
  background: var(--farbe-canvas);
  -webkit-font-smoothing: antialiased;
  /* Lange Woerter und E-Mail-Adressen duerfen umbrechen, statt die
     Seite seitlich herausragen zu lassen. */
  overflow-wrap: break-word;
}

/* Kein waagrechtes Scrollen, egal wie schmal das Geraet ist. */
html, body { overflow-x: hidden; }

h1, h2, h3 {
  font-weight: 500;
  line-height: 1.15;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  letter-spacing: -0.02em;
  line-height: 1.08;
}

h2 {
  font-size: clamp(1.875rem, 3.5vw, 2.5rem);
  letter-spacing: -0.02em;
}

h3 {
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}

a {
  color: var(--farbe-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:hover { color: var(--farbe-akzent); }

/* A11Y: sichtbarer Fokus, nie entfernt */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: var(--fokus-breite) solid var(--fokus-farbe);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection { background: #ffd9c4; }

/* A11Y: Wer mit der Tastatur bedient, springt mit einem Tastendruck an der
   Navigation vorbei direkt zum Inhalt. Mit der Maus sieht man nichts davon. */
.sprungmarke {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: var(--abstand-s) var(--abstand-m);
  background: var(--farbe-ink);
  color: var(--farbe-auf-dunkel);
  border-radius: 0 0 var(--radius-m) 0;
  text-decoration: none;
}

.sprungmarke:focus {
  left: 0;
  color: var(--farbe-auf-dunkel);
}

/* ---------- 4. Layout-Hilfen --------------------------------------------- */

.navigation-inhalt,
.hero,
.nutzen,
.kurse,
.ueber-mich-inhalt,
.kontakt,
.fusszeile-inhalt {
  max-width: var(--inhalt-breite);
  margin-inline: auto;
  padding-left: var(--rand-links);
  padding-right: var(--rand-rechts);
}

/* ---------- 5. Buttons ---------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;             /* A11Y: Klickflaeche mind. 48px */
  padding: 0.75rem 1.5rem;
  font-family: inherit;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-m);
  cursor: pointer;
  /* Lange Beschriftungen duerfen umbrechen statt ueberzulaufen. */
  text-align: center;
  white-space: normal;
}

.button-primaer {
  background: var(--farbe-ink);
  color: var(--farbe-auf-dunkel);
}
.button-primaer:hover {
  background: var(--farbe-inverse);
  color: var(--farbe-auf-dunkel);
}

.button-sekundaer {
  background: var(--farbe-surface);
  color: var(--farbe-ink);
  border-color: var(--farbe-hairline);
}
.button-sekundaer {
  transition: border-color 150ms ease, background-color 150ms ease;
}
.button-sekundaer:hover {
  background: var(--farbe-akzent-tint);
  border-color: var(--farbe-akzent-hell);
  color: var(--farbe-ink);
}

.button-akzent {
  background: var(--farbe-akzent);
  color: var(--farbe-auf-dunkel);
  transition: background-color 150ms ease;
}
.button-akzent:hover { background: var(--farbe-akzent-hover); }

/* Oranger Haupt-CTA. Weisse Schrift auf #ee5a2b erreicht 3.4:1 –
   bewusst gesetzte Abweichung von der 7:1-Regel, siehe CLAUDE.md.
   Gewicht 600 und 20px gleichen die Lesbarkeit ein Stueck weit aus. */
.button-orange {
  background: var(--farbe-akzent-hell);
  color: var(--farbe-auf-dunkel);
  font-size: 1.25rem;
  font-weight: 600;
  transition: background-color 150ms ease;
}
.button-orange:hover {
  background: var(--farbe-akzent-hell-dunkel);
  color: var(--farbe-auf-dunkel);
}

.button-gruppe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-m);
  justify-content: center;
}

/* ---------- 6. Navigation ------------------------------------------------- */

.navigation-inhalt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-m);
  flex-wrap: wrap;
  padding-block: var(--abstand-m);
}

.wortmarke {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.navigation-links {
  display: flex;
  align-items: center;
  gap: var(--abstand-l);
  flex-wrap: wrap;
}

.navigation-links a:not(.button) {
  font-size: 1.125rem;
  color: var(--farbe-ink-muted);
  text-decoration: none;
  padding: 0.6rem 0;
}
.navigation-links a:not(.button):hover {
  color: var(--farbe-akzent);
  text-decoration: underline;
}

/* ---------- 7. Hero ------------------------------------------------------- */

.hero {
  padding-block: var(--abstand-xl) var(--abstand-sektion);
  text-align: center;
}

/* Abstand zwischen dem Badge und der grossen Ueberschrift. */
.hero-badge { margin-bottom: var(--abstand-l); }

.hero h1 {
  max-width: 20ch;
  margin-inline: auto;
  margin-bottom: var(--abstand-l);
}

.hero-text {
  font-size: 1.375rem;
  line-height: 1.55;
  color: var(--farbe-ink-muted);
  max-width: 40ch;
  margin: 0 auto var(--abstand-xl);
}

.hero-fakten {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--abstand-s) var(--abstand-xl);
  margin-bottom: var(--abstand-l);
  font-size: 1.125rem;
}

.hero-fakten strong { font-weight: 500; }

/* Einleitungstext direkt unter den beiden Buttons */
/* Der Bildbereich umschliesst den Textblock. Das Bild wird absolut
   positioniert und beansprucht deshalb keinen Platz im Textfluss.
   Der Text bleibt exakt dort, wo er vorher war. */
.einleitung-bereich { position: relative; }

/* Auf schmalen Bildschirmen kein Bild, dort fehlt der Platz daneben. */
.einleitung-bild { display: none; }

@media (min-width: 75rem) {
  .einleitung-bild {
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 200px;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: var(--radius-l);
    background: var(--farbe-surface-2);
  }
}

/* Linksbuendig, nicht zentriert. Bei zentriertem Text beginnt jede Zeile
   an einer anderen Stelle, und das Auge verliert beim Zeilenwechsel den
   Anschluss. Bei 100 Woertern ist das deutlich spuerbar. */
.einleitung { text-align: left; }

/* Oben und unten je eine feine Linie, damit der Abschnitt klar
   vom Rest des Kopfbereichs getrennt ist. */
.einleitung {
  max-width: 60ch;
  margin: var(--abstand-xl) auto 0;
  padding-block: var(--abstand-xl);
  border-top: 2px solid var(--farbe-hairline);
  border-bottom: 2px solid var(--farbe-hairline);
}

.einleitung p {
  font-size: 1.375rem;
  line-height: 1.6;
  font-weight: 600;
  /* Kursiv bewusst weggelassen: schraege Schrift ist ueber laengere
     Abschnitte hinweg schwerer zu lesen, gerade fuer die Zielgruppe. */
  color: var(--farbe-ink);
}

.einleitung p + p { margin-top: var(--abstand-m); }

/* ---------- 8. Nutzen (drei Spalten) ------------------------------------- */

.nutzen { padding-bottom: var(--abstand-sektion); }

.eyebrow {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--farbe-akzent);
  margin-bottom: var(--abstand-s);
}

/* Keine Breitenbegrenzung: die Überschrift soll auf einer Zeile stehen.
   Auf schmalen Bildschirmen bricht sie weiterhin von selbst um. */
.nutzen h2 {
  margin-bottom: var(--abstand-xl);
}

.karten-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--abstand-l);
}

.karte {
  background: var(--farbe-surface);
  border: 1px solid var(--farbe-hairline);
  border-radius: var(--radius-l);
  padding: var(--abstand-xl);
}

.karte-icon {
  display: block;
  width: 32px;
  height: 32px;
  color: var(--farbe-akzent);
  margin-bottom: var(--abstand-m);
}

.karte h3 { margin-bottom: var(--abstand-s); }

.karte p {
  color: var(--farbe-ink-muted);
  max-width: 40ch;
}

/* ---------- 8b. Häkchen-Listen (Für wen, Voraussetzungen) ----------------- */

.zielgruppe-liste {
  display: grid;
  gap: var(--abstand-m);
}

.zielgruppe-liste li {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-s);
  max-width: 65ch;
}

.zielgruppe-icon {
  flex: none;
  width: 28px;
  height: 28px;
  color: var(--farbe-gruen-hell);
  margin-top: 0.15em;
}

/* ---------- 9b. Kurstermine ----------------------------------------------- */

.kurse { padding-bottom: var(--abstand-sektion); }

.kurse h2 { margin-bottom: var(--abstand-xl); }

/* Aufhänger über der Kursliste: erklärt den Schnupperkurs und die
   Anrechnung, bevor die Termine kommen. */
/* Die Infokaesten stehen auf allen Bildschirmgroessen untereinander. */
.infokaesten { margin-bottom: var(--abstand-xxl); }

.aufhaenger {
  max-width: 60ch;
  margin-bottom: var(--abstand-xxl);
  padding: var(--abstand-l);
  background: var(--farbe-surface);
  border: 1px solid var(--farbe-hairline);
  border-radius: var(--radius-l);
}

/* Seitenbreite Variante: die Kachel füllt die ganze Inhaltsbreite aus,
   die Textzeilen bleiben aber lesbar begrenzt. */
.aufhaenger--breit { max-width: none; }

.aufhaenger--breit p,
.aufhaenger--breit li { max-width: none; }

.aufhaenger .zielgruppe-liste { margin-bottom: var(--abstand-m); }

/* Etikett des Aufhaengers. Sieht aus wie das Etikett auf den
   Schnupperkurs-Kacheln, ist aber reine Beschriftung. */
.aufhaenger-etikett {
  display: inline-block;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--farbe-auf-dunkel);
  background: var(--farbe-akzent-hell);
  border-radius: var(--radius-m);
  padding: 0.5rem 1rem;
  margin-bottom: var(--abstand-m);
}

/* Gruenes Etikett fuer den Grundlagenkurs, passend zu den Kacheln. */
.aufhaenger-etikett--gruen { background: var(--farbe-gruen); }

.aufhaenger--mitbringen h3 {
  font-size: 1.5rem;
  margin-bottom: var(--abstand-m);
}

.aufhaenger p { line-height: 1.6; }

.aufhaenger p + p { margin-top: var(--abstand-m); }

.aufhaenger-zwischentitel {
  font-weight: 600;
  margin-bottom: var(--abstand-xs);
}

.aufhaenger-liste {
  list-style: disc;
  padding-left: 1.25rem;
  margin-bottom: var(--abstand-m);
}

.aufhaenger-liste li { margin-bottom: var(--abstand-xs); }

/* Ausstattungsliste beim Kursraum: engere Zeilen. */
.ausstattung-liste li {
  margin-bottom: 0;
  line-height: 1.45;
}

/* Hervorgehobener Hinweis innerhalb eines Kastens. Kein Schatten, nur eine
   kraeftige Linie links und ein leicht getoenter Grund. */
.hinweis-kasten {
  margin-top: var(--abstand-m);
  padding: var(--abstand-m) var(--abstand-m) var(--abstand-m) var(--abstand-l);
  background: var(--farbe-akzent-tint);
  border-left: 5px solid var(--farbe-akzent);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
}

.hinweis-titel {
  font-weight: 600;
  color: var(--farbe-akzent);
  margin-bottom: var(--abstand-xs);
}

.hinweis-kasten p + p { margin-top: var(--abstand-s); }

.aufhaenger-fussnote {
  color: var(--farbe-ink-muted);
  font-size: 1.125rem;
}

.kurs-liste {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--abstand-l);
  margin-bottom: var(--abstand-xl);
}

.kurs-karte {
  display: flex;
  flex-direction: column;
  background: var(--farbe-surface);
  border: 1px solid var(--farbe-hairline);
  border-radius: var(--radius-l);
  padding: var(--abstand-l);
}

/* Etikett der Kursart. Sieht aus wie der orange Button, ist aber
   reine Beschriftung: kein Link, nichts zum Anklicken. */
.kurs-art {
  display: inline-block;
  align-self: flex-start;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--farbe-auf-dunkel);
  background: var(--farbe-akzent-hell);
  border-radius: var(--radius-m);
  padding: 0.5rem 1rem;
  margin-bottom: var(--abstand-m);
  transition: background-color 150ms ease;
}

/* Beim Ueberfahren dunkelt das Etikett leicht nach. Keine Bewegung,
   keine Schatten, so bleibt die Seite ruhig. */
.kurs-karte:hover .kurs-art {
  background: var(--farbe-akzent-hell-dunkel);
}

/* Grundlagenkurse bekommen ein gruenes Etikett, damit man die beiden
   Kursarten auf einen Blick auseinanderhaelt. */
.kurs-karte--grundlagenkurs .kurs-art {
  background: var(--farbe-gruen);
}

.kurs-karte--grundlagenkurs:hover .kurs-art {
  background: var(--farbe-gruen-dunkel);
}

.kurs-button--schnupperkurs {
  background: var(--farbe-akzent-hell);
  color: var(--farbe-auf-dunkel);
  font-size: 1.25rem;
  font-weight: 600;
  transition: background-color 150ms ease;
}

.kurs-button--schnupperkurs:hover {
  background: var(--farbe-akzent-hell-dunkel);
  color: var(--farbe-auf-dunkel);
}

.kurs-button--grundlagenkurs {
  background: var(--farbe-gruen);
  color: var(--farbe-auf-dunkel);
  font-size: 1.25rem;
  font-weight: 600;
  transition: background-color 150ms ease;
}

.kurs-button--grundlagenkurs:hover {
  background: var(--farbe-gruen-dunkel);
  color: var(--farbe-auf-dunkel);
}

.kurs-titel {
  font-size: 1.375rem;
  margin-bottom: var(--abstand-m);
}

/* Aufklappbare Kurskarte. Auf dem Handy zugeklappt, ab 768 px offen.
   Den Zustand setzt assets/js/kurse.js. */
.kurs-kopf {
  cursor: pointer;
  list-style: none;
  min-height: 48px;             /* A11Y: Touch-Ziel */
}

.kurs-kopf::-webkit-details-marker { display: none; }

.kurs-kopf .kurs-titel { margin-bottom: 0; }

/* Datum in der Kopfzeile, damit man auch zugeklappt sieht, wann der Kurs
   stattfindet. Ab 768 px steht es in der Datenliste darunter. */
.kurs-kopf-datum {
  display: block;
  margin-top: var(--abstand-xs);
  font-size: 1.125rem;
  color: var(--farbe-ink-muted);
}

/* Pfeil, der nach unten zeigt und sich beim Aufklappen dreht. */
.kurs-kopf::after {
  content: "";
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  margin-top: var(--abstand-s);
  border-right: 3px solid var(--farbe-ink-muted);
  border-bottom: 3px solid var(--farbe-ink-muted);
  transform: rotate(45deg);
  transition: transform 150ms ease;
}

.kurs-klapp[open] > .kurs-kopf::after { transform: rotate(-135deg); }

.kurs-klapp[open] > .kurs-kopf { margin-bottom: var(--abstand-m); }

.kurs-daten {
  margin: 0 0 var(--abstand-l);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.375rem var(--abstand-s);
}

.kurs-daten dt {
  font-size: 1.125rem;
  color: var(--farbe-ink-muted);
}

.kurs-daten dd {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 500;
}

.kurs-ort-link { font-weight: 500; }

/* Zusatz unter dem Preis, z. B. die Anrechnung des Schnupperkurses.
   Darf immer umbrechen, auch wenn die uebrigen Werte auf einer Zeile stehen. */
.kurs-preis-hinweis {
  display: block;
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--farbe-ink-muted);
  white-space: normal;
}

.kurs-ausgebucht { color: var(--farbe-akzent); }

/* Bestaetigte Durchfuehrung. Gruen wie das Etikett des Grundlagenkurses. */
.kurs-findet-statt {
  color: var(--farbe-gruen-dunkel);
  font-weight: 600;
}

/* Noch offenes Datum. Rot, damit es sofort auffaellt. */
.kurs-datum-offen {
  color: var(--farbe-rot);
  font-weight: 700;
}

/* Beispiele, was im Kurs geuebt wird */
.kurs-inhalte-titel {
  font-size: 1.125rem;
  font-weight: 500;
  margin-bottom: var(--abstand-xs);
}

.kurs-inhalte {
  list-style: disc;
  padding-left: 1.25rem;
  margin-bottom: var(--abstand-l);
  font-size: 1.125rem;
  color: var(--farbe-ink-muted);
}

.kurs-inhalte li { margin-bottom: 0.25rem; }

.kurs-button {
  margin-top: auto;
  align-self: flex-start;
}

.kurs-hinweis-ausgebucht {
  margin-top: auto;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--farbe-akzent);
  background: var(--farbe-surface);
  border-radius: var(--radius-m);
  padding: 0.75rem 1rem;
}

.kurse-leer,
.kurse-noscript {
  max-width: 55ch;
  color: var(--farbe-ink-muted);
}

.kurse-noscript {
  background: var(--farbe-surface);
  border: 1px solid var(--farbe-hairline);
  border-radius: var(--radius-l);
  padding: var(--abstand-l);
  color: var(--farbe-ink);
}

/* ---------- 9c. Ueber mich ------------------------------------------------ */

.ueber-mich { padding-block: 0 var(--abstand-sektion); }

.ueber-mich-inhalt {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--abstand-xl);
}

/* Querformat 3:2, passend zum Bildmaterial. Fehlt das Foto,
   bleibt die beige Flaeche als Platzhalter stehen. */
.portraet {
  background: var(--farbe-surface-2);
  border: 1px solid var(--farbe-hairline);
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 3 / 2;
}

.portraet-bildlegende {
  margin-top: var(--abstand-s);
  font-size: 1.125rem;
  color: var(--farbe-ink-muted);
}

.bildlegende-jahre { display: block; }

.portraet img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ueber-mich-text p + p { margin-top: var(--abstand-m); }

.ueber-mich-text h2 { margin-bottom: var(--abstand-m); }

.ueber-mich-text p { color: var(--farbe-ink-muted); }

/* ---------- 9d. Einfache Textseiten (Impressum, Datenschutz, Danke) ------- */

.textseite {
  max-width: 70ch;
  margin-inline: auto;
  padding: var(--abstand-sektion) var(--abstand-l);
}

.textseite h1 { margin-bottom: var(--abstand-l); }

.textseite h2 {
  font-size: 1.5rem;
  margin-top: var(--abstand-xl);
  margin-bottom: var(--abstand-s);
}

.textseite p,
.textseite li { color: var(--farbe-ink-muted); }

.textseite p + p { margin-top: var(--abstand-m); }

.textseite ul {
  list-style: disc;
  padding-left: 1.5rem;
  margin-top: var(--abstand-s);
}

.textseite li { margin-bottom: var(--abstand-xs); }

.zurueck-link {
  display: inline-block;
  margin-bottom: var(--abstand-xl);
  font-size: 1.125rem;
}

.danke-seite { text-align: center; }

/* ---------- 9b. Kursraum und Weg ------------------------------------------ */

.kursraum,
.weg {
  max-width: var(--inhalt-breite);
  margin-inline: auto;
  padding-left: var(--rand-links);
  padding-right: var(--rand-rechts);
}

.kursraum { padding-block: 0 var(--abstand-xl); }

.weg { padding-block: 0 var(--abstand-sektion); }

.kursraum h2,
.weg h2 { margin-bottom: var(--abstand-l); }

.kursraum h3,
.weg h3 {
  font-size: 1.5rem;
  margin-bottom: var(--abstand-s);
}

.raum-bilder {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--abstand-l);
  margin-bottom: var(--abstand-s);
}

.raum-bild {
  display: block;
  border: 1px solid var(--farbe-hairline);
  border-radius: var(--radius-l);
  overflow: hidden;
  transition: border-color 150ms ease;
}

.raum-bild:hover { border-color: var(--farbe-akzent-hell); }

.raum-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 2;
}

.bild-quelle {
  font-size: 1.125rem;
  color: var(--farbe-ink-muted);
  margin-bottom: var(--abstand-xl);
}

.raum-text { max-width: 60ch; }

.weg-figur {
  max-width: 55rem;
  margin: 0 0 var(--abstand-l);
}

.weg-figur img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--farbe-hairline);
  border-radius: var(--radius-l);
}

.weg-figur figcaption {
  margin-top: var(--abstand-s);
  font-size: 1.125rem;
  color: var(--farbe-ink-muted);
}

.wegbeschreibung {
  max-width: 60ch;
  margin-bottom: var(--abstand-l);
}

/* ---------- 10. Kontakt ---------------------------------------------------- */

.kontakt { padding-block: var(--abstand-sektion); }

.kontakt-karte {
  background: var(--farbe-surface);
  border: 1px solid var(--farbe-hairline);
  border-radius: var(--radius-xl);
  padding: var(--abstand-xl);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--abstand-xl);
  align-items: center;
}

.kontakt-karte > * { min-width: 0; }

.kontakt-text h2 {
  margin-bottom: var(--abstand-m);
  overflow-wrap: break-word;
}

/* Lange E-Mail-Adressen brechen um, statt seitlich herauszulaufen. */
.kontakt-daten a { overflow-wrap: anywhere; }

.kontakt-text p {
  color: var(--farbe-ink-muted);
  margin-bottom: var(--abstand-m);
  max-width: 45ch;
}

.kontakt-text p:last-of-type { margin-bottom: var(--abstand-l); }

.kontakt-daten {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-xs);
  margin-bottom: var(--abstand-m);
}

.kontakt-daten strong { font-weight: 500; }

/* Hinweiszeile direkt ueber einer Kontaktangabe: kleiner Abstand,
   damit Text und Angabe als Paar erscheinen. */
.kontakt-text p.kontakt-hinweis { margin-bottom: var(--abstand-xs); }

/* Gesperrte Felder beim Rueckruf-Wunsch: sichtbar, aber ausgegraut.
   Gesetzt wird die Klasse in kurse.js, ohne JavaScript bleiben alle
   Felder normal nutzbar. */
.feld--inaktiv label { color: var(--farbe-ink-muted); }

.feld--inaktiv input,
.feld--inaktiv textarea {
  background: var(--farbe-surface-2);
  cursor: not-allowed;
}

/* Die Erklaerung im gesperrten Feld muss lesbar bleiben. */
.feld--inaktiv input::placeholder {
  color: var(--farbe-ink-muted);
  opacity: 1;
}

/* Der normale Hilfetext wuerde der Erklaerung im Feld widersprechen. */
.feld--inaktiv .feld-hilfe { display: none; }

.kontakt-formular {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-m);
}

/* Vor- und Nachname stehen ab Tablet-Breite nebeneinander. */
.feld-reihe {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--abstand-m);
}

/* Die Adresszeilen brauchen denselben Abstand wie einzelne Felder. */
#adresse-felder {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-m);
}

.pflicht-hinweis {
  font-size: 1.125rem;
  color: var(--farbe-ink-subtle);
}

/* Das hidden-Attribut (Kursfeld beim Rueckruf) gewinnt gegen display:flex. */
.feld[hidden] { display: none; }

.feld {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.feld label {
  font-size: 1.125rem;
  font-weight: 500;
}

.feld input,
.feld select {
  font-family: inherit;
  font-size: 1.125rem;
  min-height: 48px;             /* A11Y: Touch-Ziel */
  padding: 0.75rem 1rem;
  color: var(--farbe-ink);
  background: var(--farbe-surface);
  border: 2px solid var(--farbe-hairline);
  border-radius: var(--radius-m);
  transition: border-color 150ms ease;
}

/* Auswahl des Anliegens im Formular. */
.feld-gruppe {
  border: 2px solid var(--farbe-hairline);
  border-radius: var(--radius-m);
  padding: var(--abstand-m);
  display: flex;
  flex-direction: column;
  gap: var(--abstand-xs);
}

.feld-gruppe legend {
  font-size: 1.125rem;
  font-weight: 500;
  padding-inline: var(--abstand-xs);
}

.auswahl {
  display: flex;
  align-items: center;
  gap: var(--abstand-s);
  min-height: 48px;             /* A11Y: Touch-Ziel */
  cursor: pointer;
  line-height: 1.4;
}

.auswahl input {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  accent-color: var(--farbe-akzent);
}

.feld textarea {
  font-family: inherit;
  font-size: 1.125rem;
  line-height: 1.5;
  padding: 0.75rem 1rem;
  color: var(--farbe-ink);
  background: var(--farbe-surface);
  border: 2px solid var(--farbe-hairline);
  border-radius: var(--radius-m);
  resize: vertical;
  transition: border-color 150ms ease;
}

.feld input:not(:disabled):hover,
.feld select:not(:disabled):hover,
.feld textarea:not(:disabled):hover {
  border-color: var(--farbe-akzent-hell);
  background: var(--farbe-akzent-tint);
}

/* Das Feld, in dem gerade geschrieben wird, ist deutlich orange markiert. */
.feld input:not(:disabled):focus,
.feld select:not(:disabled):focus,
.feld textarea:not(:disabled):focus {
  border-color: var(--farbe-akzent-hell);
  background: var(--farbe-akzent-tint);
}

.feld input:focus-visible,
.feld select:focus-visible,
.feld textarea:focus-visible {
  outline-color: var(--farbe-akzent);
}

/* Aufforderung "Bitte Feld ausfüllen" in leeren Pflichtfeldern. */
.feld input::placeholder {
  color: var(--farbe-ink-muted);
  opacity: 1;
}

/* Noch leere Pflichtfelder sind farbig markiert, bis etwas drinsteht. */
.feld input:required:placeholder-shown:not(:disabled) {
  border-color: var(--farbe-akzent-hell);
  background: var(--farbe-akzent-tint);
}

/* Kurze Erklaerung unter einem Feld. */
.feld-hilfe {
  font-size: 1.125rem;
  line-height: 1.45;
  color: var(--farbe-ink-subtle);
}

.formular-hinweis {
  font-size: 1.125rem;
  color: var(--farbe-ink-subtle);
}

/* ---------- 11. Footer ---------------------------------------------------- */

.fusszeile {
  border-top: 1px solid var(--farbe-hairline-soft);
  padding-block: var(--abstand-xl) var(--abstand-xxl);
}

.fusszeile-inhalt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-l);
}

.fusszeile-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-l);
}

/* A11Y: Footer-Schrift 18px statt 13/14px, Links bleiben unterstrichen */
.fusszeile-links a,
.copyright {
  font-size: 1.125rem;
  color: var(--farbe-ink-muted);
}

.fusszeile-links a { padding: 0.5rem 0; }

/* ---------- 12. Media Queries -------------------------------------------- */

/* Auf dem Handy sind die grossen Abstaende vom Desktop zu viel. Die
   Skala wird an einer Stelle zusammengezogen, dadurch ruecken alle
   Abschnitte gleichmaessig naeher zusammen. */
@media (max-width: 47.99rem) {
  :root {
    --abstand-xxl: 2rem;
    --abstand-sektion: 3rem;
  }
}

/* Auf dem Handy fuellen Buttons die Breite. Grosse Flaeche, leicht zu
   treffen, auch mit unsicherer Hand. */
@media (max-width: 47.99rem) {
  /* Auf schmalen Bildschirmen ist zentrierter Fliesstext schlecht lesbar. */
  .hero-text,
  .hero-fakten { text-align: left; }

  .hero-fakten {
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    gap: var(--abstand-xs);
  }

  /* Auf dem Handy stehen Navigation und Fusszeile untereinander.
     Der Name steht dabei mittig ueber den Links. */
  .navigation-inhalt,
  .fusszeile-inhalt {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

  .navigation-inhalt .wortmarke,
  .fusszeile-inhalt .wortmarke {
    width: 100%;
    text-align: center;
  }

  .navigation-links,
  .fusszeile-links { justify-content: center; }

  /* Etwas weniger Innenabstand, damit der Text nicht ans Kachelende stoesst. */
  .kontakt-karte { padding: var(--abstand-l); }
}

@media (max-width: 29.99rem) {
  .button-gruppe { flex-direction: column; }
  .button-gruppe .button,
  .kontakt-formular .button,
  .kurs-button { width: 100%; }
}

@media (min-width: 48rem) {
  .navigation-inhalt,
  .hero,
  .nutzen,
  .kurse,
  .ueber-mich-inhalt,
  .kontakt,
  .fusszeile-inhalt { padding-inline: var(--abstand-xl); }

  /* Tablet: zwei Spalten */
  .karten-raster { grid-template-columns: repeat(2, 1fr); }

  .feld-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feld-reihe--strasse { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .feld-reihe--ort { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }

  .kurs-liste { grid-template-columns: repeat(2, 1fr); }

  .ueber-mich-inhalt {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: var(--abstand-xxl);
    align-items: start;
  }

  .stimme { padding-inline: var(--abstand-xl); }

  .kursraum,
  .weg { padding-inline: var(--abstand-xl); }

  .raum-bilder { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Ab Tablet sind die Kurskarten immer offen. Die Kopfzeile ist dann
     reine Ueberschrift, nichts zum Antippen. */
  .kurs-kopf {
    cursor: default;
    pointer-events: none;
    min-height: 0;
  }

  .kurs-kopf::after { display: none; }

  .kurs-kopf-datum { display: none; }
}

/* Desktop: drei Spalten, sowohl Nutzen-Kacheln als auch Kurskarten. */
@media (min-width: 64rem) {

  .karten-raster { grid-template-columns: repeat(3, 1fr); }
  .kurs-liste { grid-template-columns: repeat(3, 1fr); }

  /* Beschriftung ueber den Wert stellen. So steht jeder Wert auf einer
     einzigen Zeile, auch wenn die Karte nur ein Drittel breit ist. */
  .kurs-daten {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .kurs-daten dt {
    line-height: 1.3;
  }

  .kurs-daten dd {
    white-space: nowrap;
    margin-bottom: var(--abstand-xs);
  }

  /* Der Hinweis "Datum folgt" ist laenger als ein Datum und darf umbrechen. */
  .kurs-daten dd.kurs-datum-offen { white-space: normal; }

  .kurs-daten dd:last-of-type { margin-bottom: 0; }
}

/* ---------- 12b. Druck ----------------------------------------------------
   Viele in der Zielgruppe drucken sich die Termine aus. Beim Drucken
   verschwindet alles Bedienbare, die Kurskarten sind immer aufgeklappt. */
@media print {
  .navigation,
  .kontakt-formular,
  .button,
  .sprungmarke,
  .kurs-kopf::after { display: none; }

  body { background: #ffffff; }

  .kurs-karte,
  .karte,
  .aufhaenger,
  .kontakt-karte { break-inside: avoid; }

  .kurs-inhalt { display: block; }

  a { text-decoration: none; color: #000000; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 13. Schutz gegen aufgezwungenes Dunkeldesign ----------------- */

/* Manche Android-Browser (Samsung Internet, Chrome mit Auto Dark) schalten
   auf ein dunkles Design um, sobald das Geraet im Dunkelmodus laeuft.
   Hier werden die hellen Farben ausdruecklich noch einmal gesetzt, damit
   die Seite in jedem Fall hell bleibt. */
@media (prefers-color-scheme: dark) {
  :root {
    --farbe-ink: #111111;
    --farbe-ink-muted: #4a4a48;
    --farbe-ink-subtle: #55554f;
    --farbe-auf-dunkel: #ffffff;
    --farbe-canvas: #f5f1ec;
    --farbe-surface: #ffffff;
    --farbe-surface-2: #ebe7e1;
    --farbe-hairline: #d3cec6;
    --farbe-hairline-soft: #ebe7e1;
    --farbe-akzent: #8a2f00;
    --farbe-akzent-hell: #ee5a2b;
    --farbe-gruen: #285a34;
  }

  html, body {
    background: #f5f1ec;
    color: #111111;
  }

  .kurs-karte,
  .karte,
  .aufhaenger,
  .kontakt-karte,
  .hero-badge,
  .feld input {
    background: #ffffff;
    color: #111111;
  }

  .stimme { background: #000000; color: #ffffff; }
}