/* ================================================
   gesund und kreativ – globale Stile
   Design-Tokens zentral definiert – Farben und
   Schriften NUR hier ändern, wirkt überall.
   ================================================ */

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

/* Alle ersetzten Elemente responsiv: nie breiter als ihr Container */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}

:root {
  /* ─── Farbpalette (Variante A – weicher Gelbton) ─ */
  /* Hintergründe */
  --color-bg:          #FDFCF8;   /* Papier (leicht warmes Weiß) */
  --color-bg-subtle:   #F3F1EA;   /* Papier, wärmer  */
  --color-bg-dark:     #2A2620;   /* Tinte           */

  /* Text */
  --color-text:        #2A2620;   /* Tinte           */
  --color-text-muted:  #5C5248;   /* Warmgrau, ~7,4:1 auf #FDFCF8 */
  --color-text-on-dark:#FDFCF8;   /* Papier auf Tinte*/
  --color-muted-on-dark:#C5C4C1;  /* Papier gedämpft – Sekundärtext/Links auf Tinte */

  /* Hauptfarbe & Akzent */
  --color-primary:     #96BE10;   /* Grün aus dem Logo ("gesund") – Akzente/gefüllte Flächen (Art-Badge, Checkbox-Akzent). IMMER dunkle Schrift (--color-text) darauf, NIEMALS weiß */
  --color-accent:      #F8C90D;   /* Signalgelb – Akzent UND gefüllte Aktions-Buttons */
  --color-btn-hover:   #E4B400;   /* Signalgelb, dunkler – Button-Hover/Aktiv */
  --color-error:       #B4451F;   /* Terrakotta – Pflichtfeld-/Fehlerzustände */
  --color-datum:       #68584F;   /* Taupe-Grau aus dem Logo-Schriftzug – Standard-Hintergrund von .date-badge (Termine-Seite + Startseiten-Teaser nutzen den Kategorie-Farbcode) */

  /* Überschriften & Links */
  --color-heading:     #2A2620;   /* Tinte (dunkel)  */
  --color-link:        #556C08;   /* Grün-Text (dunklere, gelbstichige Variante) – ~5,79:1 auf hellem Grund */
  --color-link-hover:  #364405;   /* Grün-Text, dunkler – Hover-Zustand von Text-Links */

  /* Rahmen */
  --color-border:      #D9D2C6;   /* Warmer Grauton  */

  /* Fokus-Rahmen (Tastaturnavigation) */
  --color-focus:       #556C08;   /* Grün-Text – Fokus-Rahmen */

  /* ─── Mosaik-Akzente (NUR für Deko-Elemente,
         niemals hinter/unter Text) ─────────────── */
  --mosaik-gelb:       #F8C90D;
  --mosaik-marken-gruen: #96BE10;
  --mosaik-gruen:      #2F5E3A;
  --mosaik-terrakotta: #B4451F;
  --mosaik-pflaume:    #5E2A4E;

  /* ─── Kategorie-Farbcode (NUR Termine-Seite) ────
         Flächen-Farben (Datums-Kasten, Kategorie-Badge,
         feiner Balken) – darauf IMMER dunkle Schrift
         (--color-text), NIEMALS weiß. Farbiger TEXT nur
         in den dunkleren -text-Varianten. ───────── */
  --kat-mosaik:        #F19400;   /* Logo-Orange – Flächen/Akzente (dunkle Schrift ~6,4:1) */
  --kat-mosaik-text:   #A54B00;   /* dunkleres Orange – nur für farbigen Text/Links auf Weiß */
  --kat-qigong:        #96BE10;   /* Logo-Grün – Flächen/Akzente (dunkle Schrift ~6,9:1) */
  --kat-qigong-text:   #556C08;   /* dunkleres Grün – nur für farbigen Text/Links auf Weiß */

  /* ─── Typografie ─────────────────────────────── */
  --font-serif: 'Fraunces Variable', Georgia, serif;
  --font-sans:  'Atkinson Hyperlegible', system-ui, sans-serif;
  --font-size-sm:   1rem;       /* 16 px */
  --font-size-base: 1.125rem;   /* 18 px */
  --font-size-lg:   1.25rem;    /* 20 px */
  --font-size-xl:   1.5rem;     /* 24 px */
  --font-size-2xl:  2rem;       /* 32 px */
  --font-size-3xl:  2.75rem;    /* 44 px */
  --line-height: 1.7;

  /* ─── Layout ─────────────────────────────────── */
  --max-width: 1100px;
  --radius: 4px;
  --spacing: 1rem;
}

/* ---- Basis ---- */
html {
  font-size: 100%;
  scroll-behavior: smooth;
  /* Hintergrundfarbe auch auf <html> setzen, damit bei horizontalem
     Überlauf kein weißer Streifen rechts erscheint. */
  background: var(--color-bg);
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: var(--line-height);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---- Barrierefreiheit ---- */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--spacing);
  z-index: 9999;
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark);
  padding: 0.75rem 1.5rem;
  font-weight: bold;
  text-decoration: none;
  border-radius: 0 0 var(--radius) var(--radius);
}
.skip-link:focus {
  top: 0;
}

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

/* ---- Typografie ---- */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-heading);
  font-family: var(--font-serif);
  line-height: 1.25;
  font-weight: 700;
}
h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }

p {
  max-width: 68ch;
  margin-bottom: 1.25rem;
}
p:last-child { margin-bottom: 0; }

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

ul, ol {
  padding-left: 1.5rem;
}
li { margin-bottom: 0.25rem; }

/* ---- Layout-Helfer ---- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

main { flex: 1; }

/* ---- Header & Navigation ---- */
header {
  background: var(--color-bg);
  border-bottom: 2px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* nowrap: Logo und Menü-Button bleiben bei JEDER Breite in einer
     Zeile. Auf sehr schmalen Bildschirmen wird stattdessen der
     Schriftzug im Logo selbst mehrzeilig (siehe .logo flex-shrink),
     die Kopfzeile wird dadurch etwas höher, bricht aber nie um. */
  flex-wrap: nowrap;
  min-height: 6rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  /* Darf auf schmalen Bildschirmen schrumpfen, damit Logo + Menü-Button
     nie horizontal überlaufen (siehe .logo-bild max-width: 100%). */
  flex-shrink: 1;
  min-width: 0;
  padding: 0.375rem 0;
}

/* Offizielles Logo (Herz + Schriftzug + Untertitel in einer Bilddatei) */
.logo-bild {
  display: block;
  width: auto;
  height: auto;
  max-height: 84px; /* Desktop-Zielgröße, ca. 72–84px */
  max-width: 100%;  /* schrumpft proportional mit, überlappt nie den Menü-Button */
}

/* Auf schmalen Bildschirmen bewusst kleiner (proportional zur Höhe) */
@media (max-width: 480px) {
  .logo-bild { max-height: 52px; }
}

/* ---- Navigation: einheitliches Menü auf allen Bildschirmgrößen ----
   <details>/<summary> statt <button> + JS: die Klapp-Funktion (öffnen,
   schließen, Tastatur) ist damit nativ im Browser eingebaut und
   funktioniert auch ganz ohne JavaScript. Das Skript in Layout.astro
   ergänzt nur noch Komfort (Klick außerhalb schließt, Escape schließt,
   explizites aria-expanded). */
header nav {
  /* Button darf nicht schrumpfen – sonst wandert der rechtsbündige
     Dropdown-Anker mit und das Panel kann links überstehen. Auf sehr
     schmalen Bildschirmen schrumpft stattdessen nur das Logo (siehe
     .logo flex-shrink weiter oben). */
  flex-shrink: 0;
}
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  list-style: none;
  background: transparent;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.625rem 1.125rem;
  min-height: 52px;
  min-width: 44px;
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
}
/* Standard-Aufklapp-Dreieck vor <summary> entfernen (Firefox/Chrome/Safari) */
.nav-toggle::-webkit-details-marker {
  display: none;
}
.nav-toggle:hover {
  background: var(--color-bg-subtle);
}

.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  display: block;
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
}
.nav-toggle-icon {
  position: relative;
}
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: '';
  position: absolute;
  left: 0;
  transition: transform 0.15s, top 0.15s;
}
.nav-toggle-icon::before { top: -7px; }
.nav-toggle-icon::after  { top: 7px; }
/* Icon wird zum X, sobald <details> offen ist – rein CSS-basiert auf
   dem nativen [open]-Attribut, unabhängig vom Skript. */
.nav-details[open] .nav-toggle-icon {
  background: transparent;
}
.nav-details[open] .nav-toggle-icon::before {
  top: 0;
  transform: rotate(45deg);
}
.nav-details[open] .nav-toggle-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

/* <details> ist genau so breit wie der sichtbare Button (<summary>) –
   dadurch lässt sich das Dropdown exakt daran ausrichten (rechtsbündig,
   direkt darunter), statt über die volle Kopfzeilenbreite. */
.nav-details {
  position: relative;
}

/* Wichtig: Layout für #nav-list NUR für den offenen Zustand definieren.
   Ohne die [open]-Bedingung würde diese Autor-Regel das native
   Verstecken von <details>-Inhalten (UA-Stylesheet: details:not([open])
   > *:not(summary) { display:none }) überstimmen (Autor-CSS schlägt
   User-Agent-CSS unabhängig von der Spezifität) – derselbe Fehler wie
   beim Kategorie-Filter (siehe .date-item[hidden] weiter unten).
   Kompaktes Panel: feste Breite, rechtsbündig unter dem Button, als
   Overlay (schiebt den Seiteninhalt nicht nach unten). min() sorgt
   dafür, dass auf sehr schmalen Bildschirmen etwas Abstand zum
   Bildschirmrand bleibt, statt das Panel abzuschneiden (4rem Puffer,
   da 100vw eine ggf. vorhandene Scrollbar nicht mit einrechnet). */
.nav-details[open] #nav-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: min(240px, calc(100vw - 4rem));
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.5rem;
  gap: 0.25rem;
  margin: 0;
  list-style: none;
  box-shadow: 0 8px 20px rgba(35, 39, 31, 0.14);
}
#nav-list li {
  margin-bottom: 0;
}
#nav-list a {
  display: flex;
  align-items: center;
  width: 100%;
  text-decoration: none;
  color: var(--color-text);
  padding: 0.875rem 1rem;
  border-radius: var(--radius);
  font-size: var(--font-size-base);
  font-weight: 500;
  min-height: 52px;
}
#nav-list a:hover {
  background: var(--color-bg-subtle);
  color: var(--color-heading);
}
#nav-list a[aria-current="page"] {
  background: var(--color-bg-subtle);
  color: var(--color-heading);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Abschnitte ---- */
.section {
  padding: 4rem 0;
}
.section--alt {
  background: var(--color-bg-subtle);
}

.section-header {
  text-align: center;
  margin-bottom: 2.5rem;
}
.section-header h2 {
  margin-bottom: 0.75rem;
}
.section-header p {
  color: var(--color-text-muted);
  max-width: 55ch;
  margin-inline: auto;
  margin-bottom: 0;
}

/* ---- Hero (Startseite) ---- */
.hero {
  position: relative;
  min-height: 60vh;
  max-height: 640px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Bildband: vier Fotos nebeneinander als Hintergrund */
.hero-bildband {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
}
.hero-bild,
.hero-bild-platzhalter {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-bild-platzhalter {
  background: var(--color-bg-subtle);
}

/* Deckendes Textfeld über dem Bildband */
.hero-panel-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}
/* Kasten (Überschrift + Text) und Button darunter, beide zentriert */
.hero-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.hero-panel {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.75rem 2rem;
  width: fit-content;
  max-width: min(90vw, 480px);
  text-align: center;
}
.hero-panel h1 {
  margin-bottom: 1rem;
}
.hero-panel .hero-subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: 0;
}

/* ---- Seiten-Hero (Unterseiten) ---- */
.page-hero {
  background: var(--color-accent);
  border-bottom: 1px solid var(--color-border);
  padding: 3rem 0;
}
.page-hero h1 {
  margin-bottom: 0.5rem;
}
.page-hero .page-subtitle {
  color: var(--color-text);
  font-size: var(--font-size-lg);
  margin-bottom: 0;
  max-width: 60ch;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 2rem;
  font-size: var(--font-size-base);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
  min-height: 52px;
  min-width: 44px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.btn-primary {
  background: var(--color-accent);
  color: var(--color-text);
  border-color: var(--color-accent);
}
.btn-primary:hover {
  background: var(--color-btn-hover);
  color: var(--color-text);
  border-color: var(--color-btn-hover);
}
.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn-secondary:hover {
  background: var(--color-bg-subtle);
  border-color: var(--color-text-muted);
}
.btn-full { width: 100%; }

/* ---- Karten ---- */
.cards {
  display: grid;
  /* Handy: gestapelt (eine Spalte) */
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
/* Mittlere Breiten: 2x2-Raster */
@media (min-width: 560px) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Große Breiten: alle Kacheln in einer Reihe */
@media (min-width: 1000px) {
  .cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
}
.card h3 {
  margin-bottom: 0.75rem;
  /* verhindert, dass lange Wörter aus der schmalen Kachel herausragen */
  overflow-wrap: break-word;
  text-align: center;
}
.card p {
  color: var(--color-text-muted);
  flex: 1;
  margin-bottom: 1.5rem;
  text-align: center;
}

/* Startseite „Was ich anbiete": Angebots-Kästen hellgrau hinterlegt –
   dasselbe Token wie Termin-Karten und .section--alt (--color-bg-subtle),
   gleiche 8px-Abrundung wie die Termin-Karten. Kontraste auf #F3F1EA:
   Überschrift 13,3:1 · Warmgrau-Text 6,7:1. */
.angebote-cards .card {
  background: var(--color-bg-subtle);
  border-radius: 8px;
}
/* Der umrandete „Mehr erfahren"-Button ist sonst transparent mit hellem
   Rahmen (1,3:1 auf dem Grau) und hätte beim Hover genau das Kastengrau.
   Im grauen Kasten daher: heller Papiergrund + Warmgrau-Rahmen (6,7:1),
   Hover mit dunklerem Grau + Tinte-Rahmen. Schrift/Größe unverändert. */
.angebote-cards .btn-secondary {
  background: var(--color-bg);
  border-color: var(--color-text-muted);
}
.angebote-cards .btn-secondary:hover {
  background: var(--color-border);
  border-color: var(--color-text);
}

/* ---- Bildplatzhalter ---- */
.placeholder-img {
  background: #E3DED5;
  border: 1px dashed #BBB5AD;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  aspect-ratio: 4 / 3;
  text-align: center;
  padding: 1rem;
}

/* ---- Galerie-Gitter ---- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.einblick-bild {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}

/* ---- Über-mich-Teaser ---- */
.portrait-bild {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
}

.about-teaser {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.about-teaser .about-text h2 {
  margin-bottom: 1rem;
}
.about-teaser .about-text p {
  margin-bottom: 1.5rem;
}

/* ---- Terminliste ---- */
.date-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}
.date-item {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  padding: 1.25rem 1.5rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
/* Autor-CSS (display:flex) würde sonst das native [hidden]
   (display:none aus dem User-Agent-Stylesheet) überstimmen –
   deshalb hier explizit erzwingen. Notwendig, damit der
   Kategorie-Filter Termine wirklich ausblendet. */
.date-item[hidden] {
  display: none;
}
.date-badge {
  background: var(--color-datum);
  color: var(--color-text-on-dark);
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: var(--font-size-sm);
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.5;
}
.date-info strong {
  display: block;
  margin-bottom: 0.25rem;
}
.date-info p {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin-bottom: 0;
}

/* ---- Termine: Bereiche (Mosaik-Workshops / VHS) und Stadt-Gruppen ---- */
.termin-bereich {
  margin-bottom: 3rem;
}
.termin-bereich > h2 {
  margin-bottom: 1.25rem;
}
.stadt-gruppe {
  margin-bottom: 2rem;
}
.stadt-gruppe:last-child {
  margin-bottom: 0;
}
.stadt-heading {
  font-size: var(--font-size-lg);
  margin-bottom: 0.875rem;
  padding-bottom: 0.375rem;
  border-bottom: 2px solid var(--color-border);
}
/* Kontaktdaten der VHS – einmal je Stadt-Abschnitt unter der Überschrift */
.vhs-kontakt {
  margin-top: -0.375rem;
  margin-bottom: 1.25rem;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}
.vhs-kontakt a {
  font-weight: 600;
}
.vhs-kontakt .extern-icon {
  font-weight: 400;
}
/* Sprungziele der Inhaltsübersicht: unter dem sticky Header freihalten */
.termin-bereich,
.stadt-gruppe {
  scroll-margin-top: 6rem;
}

/* ---- Termine: Layout mit seitlicher Inhaltsübersicht (Scrollspy) ---- */
.termine-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
/* verhindert, dass lange Inhalte die Grid-Spalte sprengen (horizontaler Überlauf) */
.termine-content {
  min-width: 0;
}
@media (min-width: 900px) {
  .termine-layout {
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
  }
  .scrollspy {
    position: sticky;
    top: 6rem;
    align-self: start;
  }
}

.scrollspy-box {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg-subtle);
}
.scrollspy-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.75rem 1rem;
  cursor: pointer;
  font-weight: 700;
  font-size: var(--font-size-sm);
  color: var(--color-heading);
  list-style: none;
}
.scrollspy-summary::-webkit-details-marker {
  display: none;
}
.scrollspy-summary::before {
  content: '▸';
  transition: transform 0.15s;
}
.scrollspy-box[open] .scrollspy-summary::before {
  transform: rotate(90deg);
}
.scrollspy-list {
  list-style: none;
  margin: 0;
  padding: 0.25rem;
}
.scrollspy-list li {
  margin: 0;
}
.scrollspy-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid transparent;
  border-radius: var(--radius);
  color: var(--color-link);
  text-decoration: none;
  font-size: var(--font-size-sm);
  line-height: 1.4;
}
.scrollspy-link:hover {
  background: var(--color-bg);
}
.scrollspy-link.is-active,
.scrollspy-link[aria-current="true"] {
  background: var(--color-bg);
  border-left-color: var(--color-link);
  color: var(--color-heading);
  font-weight: 700;
}
/* Desktop: Übersicht ist die dauerhaft sichtbare Seitenleiste –
   Summary wirkt als statische Überschrift, kein Aufklapp-Dreieck. */
@media (min-width: 900px) {
  .scrollspy-summary {
    cursor: default;
  }
  .scrollspy-summary::before {
    display: none;
  }
}

/* ---- Kontakt-Aufruf (dunkel) ---- */
.contact-cta {
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark);
  padding: 5rem 0;
  text-align: center;
}
.contact-cta h2 {
  color: var(--color-text-on-dark);
  margin-bottom: 1rem;
}
.contact-cta .cta-subtitle {
  color: var(--color-muted-on-dark);
  font-size: var(--font-size-lg);
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: 2rem;
}
/* .btn-primary ist bereits Signalgelb mit dunkler Schrift – das hat auf
   dem dunklen Kontakt-CTA-Hintergrund von sich aus genug Kontrast, eine
   eigene Umkehr-Variante ist nicht mehr nötig. */

/* ---- Kontaktseite ---- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}
.contact-data address {
  font-style: normal;
  line-height: 2;
}
.contact-data a {
  display: inline-block;
  min-height: 44px;
  padding: 0.25rem 0;
}

/* ---- Angebote ---- */
.offer-list {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.offer-item {
  border-top: 2px solid var(--color-border);
  padding-top: 2rem;
}
.offer-item h2 {
  margin-bottom: 0.75rem;
}
.offer-item p {
  margin-bottom: 1rem;
}
.offer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.offer-meta {
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  display: inline-block;
  font-size: var(--font-size-sm);
}

/* ---- Rechtliche Seiten ---- */
.legal-content {
  max-width: 72ch;
}

.legal-content h2 {
  font-size: var(--font-size-xl);
  margin-top: 3rem;
  margin-bottom: 1rem;
  border-top: 1px solid var(--color-border);
  padding-top: 2.5rem;
}
.legal-content h2:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

.legal-content h3 {
  font-size: var(--font-size-lg);
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}

.legal-content p {
  margin-bottom: 1rem;
}

.legal-content address {
  font-style: normal;
  line-height: 1.9;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  display: block;
}

/* Kleine Quellenangabe am Seitenende (z. B. Impressum-Generator) */
.legal-quelle {
  margin-top: 2.5rem;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Aufzählungsliste in rechtlichen Texten */
.legal-liste {
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-bottom: 1.25rem;
}
.legal-liste li {
  padding-left: 1.25rem;
  border-left: 3px solid var(--color-border);
  margin: 0;
}

/* ---- Platzhalter-Blöcke (rechtliche Seiten) ---- */
.legal-platzhalter {
  background: #F0ECE2;
  border-left: 4px solid var(--color-text-muted);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0.875rem 1.25rem 0.875rem 1.25rem;
  margin: 0.25rem 0 1rem;
}
.legal-platzhalter::before {
  content: 'Platzhalter – bitte ausfüllen';
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}
.legal-platzhalter p {
  color: var(--color-text-muted);
  font-style: italic;
  font-size: var(--font-size-sm);
  margin-bottom: 0.5rem;
  max-width: 64ch;
}
.legal-platzhalter p:last-child {
  margin-bottom: 0;
}

/* ---- Zitat (hervorgehobenes Zitat) ---- */
.zitat {
  border-left: 4px solid var(--color-accent);
  margin: 2rem 0;
  padding: 0.25rem 0 0.25rem 1.5rem;
}
.zitat p {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--color-heading);
  margin-bottom: 0.5rem;
}
.zitat p.zitat-quelle {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-style: normal;
  color: var(--color-text-muted);
  margin-bottom: 0;
}

/* ---- Footer ---- */
footer {
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark);
  margin-top: auto;
}
.footer-inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding: 3rem 1.5rem 2rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 4rem;
}
.footer-contact strong {
  display: block;
  font-size: var(--font-size-base);
  margin-bottom: 0.75rem;
  color: var(--color-text-on-dark);
}
footer address {
  font-style: normal;
  line-height: 2;
}
footer a {
  color: var(--color-muted-on-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
footer a:hover { color: var(--color-text-on-dark); }
.footer-nav-heading {
  font-weight: 700;
  color: var(--color-text-on-dark);
  margin-bottom: 0.75rem;
  max-width: none;
}
footer nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.25rem 0;
  font-size: var(--font-size-sm);
}
.footer-copy {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 1.25rem 1.5rem;
  text-align: center;
  font-size: var(--font-size-sm);
  color: #8A7F6F;
  max-width: none;
  margin-bottom: 0;
}

/* ---- Responsive ---- */
@media (max-width: 800px) {
  :root {
    --font-size-3xl: 2.125rem;
    --font-size-2xl: 1.625rem;
  }

  .about-teaser,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
  }

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

  /* Hero: kein Bildband-Overlay mehr – Textfeld und Bilder gestapelt,
     Bilder als 2x2-Raster statt vier schmaler Streifen. */
  .hero {
    position: static;
    display: block;
    min-height: 0;
    max-height: none;
    overflow: visible;
    padding: 2.5rem 0;
  }
  .hero-panel-wrap {
    position: static;
    margin-bottom: 1.5rem;
  }
  .hero-bildband {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
  }
  .hero-bild,
  .hero-bild-platzhalter {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .section { padding: 2.5rem 0; }
}

@media (max-width: 500px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }
  .date-item {
    flex-direction: column;
    gap: 0.75rem;
  }
}

/* ===================================================
   KONTAKTSEITE – Formular
   =================================================== */

/* Kontakt-Buttons (Telefon, E-Mail) */
.kontakt-btn {
  width: 100%;
  justify-content: center;
}

/* Formular: nicht konfiguriert */
.formular-hinweis {
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
}

/* Status-Meldung (Erfolg / Fehler) */
.formular-status {
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  border: 2px solid;
  margin-bottom: 1.5rem;
  font-size: var(--font-size-base);
}
.formular-status[hidden] { display: none; }

.formular-status--erfolg {
  background: #e6f0e8;
  border-color: var(--mosaik-gruen);
  color: #1a3820;
}
.formular-status--fehler {
  background: #f5ece8;
  border-color: var(--color-error);
  color: #4a1a0a;
}

/* Formular-Gruppe (Label + Input) */
.formular-gruppe {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-bottom: 1.5rem;
}
.formular-gruppe--checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.75rem;
}

/* Label */
.formular-label {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-heading);
}

/* Pflicht-Stern und optionaler Hinweis */
.pflicht-stern {
  color: var(--color-error);
  font-weight: 700;
  margin-left: 0.1em;
}
.optional-hinweis {
  font-weight: 400;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin-left: 0.35em;
}

/* Eingabefelder */
.formular-input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: var(--font-size-base);
  font-family: inherit;
  line-height: var(--line-height);
  color: var(--color-text);
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  min-height: 52px;
  transition: border-color 0.15s;
  /* Verhindert unerwünschte Browser-Styles */
  appearance: none;
  -webkit-appearance: none;
}
.formular-input:hover {
  border-color: var(--color-text-muted);
}
.formular-input:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 0;
  border-color: var(--color-focus);
}
.formular-input:invalid:not(:placeholder-shown) {
  border-color: var(--color-error);
}

/* Textarea */
.formular-textarea {
  resize: vertical;
  min-height: 160px;
}

/* Checkbox */
.formular-checkbox {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 0.2rem;
  cursor: pointer;
  accent-color: var(--color-primary);
  border: 2px solid var(--color-border);
  border-radius: 3px;
}
.formular-checkbox:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* Checkbox-Label */
.formular-checkbox-label {
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  cursor: pointer;
}
.formular-checkbox-label a {
  font-weight: 600;
}

/* Pflichtfeld-Hinweis */
.pflichtfeld-hinweis {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: 1.75rem;
  max-width: none;
}

/* Absenden-Button */
.formular-submit {
  width: 100%;
}
.formular-submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* ---- Screenreader-Hilfsklasse ---- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Breadcrumb ---- */
.breadcrumb {
  font-size: var(--font-size-sm);
  margin-bottom: 0.75rem;
  max-width: none;
}
.breadcrumb a {
  color: var(--color-text);
}
.breadcrumb a:hover {
  color: var(--color-text);
}

/* ===================================================
   GALERIE – Übersicht
   =================================================== */

.alben-grid {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 1.75rem;
}

.album-kachel {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.album-kachel:hover,
.album-kachel:focus-visible {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  border-color: var(--color-text-muted);
  outline: none;
}
.album-kachel:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.album-kachel-bild-wrap {
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--color-bg-subtle);
}
.album-kachel-bild {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s ease;
}
.album-kachel:hover .album-kachel-bild {
  transform: scale(1.03);
}

.album-kachel-info {
  padding: 1.25rem 1.5rem 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.album-kachel-titel {
  font-size: var(--font-size-xl);
  margin: 0;
}
.album-kachel-beschreibung {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin: 0;
  flex: 1;
}
.album-kachel-link-hint {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-top: 0.25rem;
}

/* ===================================================
   GALERIE – Albumdetail (Bildergitter)
   =================================================== */

.galerie-bilder-grid {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.galerie-bild-btn {
  display: block;
  width: 100%;
  border: 2px solid transparent;
  border-radius: var(--radius);
  padding: 0;
  cursor: pointer;
  background: var(--color-bg-subtle);
  overflow: hidden;
  transition: border-color 0.15s;
}
.galerie-bild-btn:hover {
  border-color: var(--color-text-muted);
}
.galerie-bild-btn:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-color: var(--color-focus);
}

.galerie-bild-thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: opacity 0.15s;
}
.galerie-bild-btn:hover .galerie-bild-thumb {
  opacity: 0.9;
}

/* ===================================================
   LIGHTBOX
   =================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox[hidden] {
  display: none;
}

.lb-hintergrund {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  cursor: pointer;
}

.lb-inhalt {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(95vw, 1200px);
  max-height: 95vh;
  gap: 0.75rem;
}

/* Kopfzeile: Zähler + Schließen-Button */
.lb-kopfzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.lb-zaehler {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--font-size-sm);
  margin: 0;
  max-width: none;
}

/* Hauptbereich: Zurück-Bild-Vor */
.lb-hauptbereich {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 0;
}

.lb-bild-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  min-width: 0;
}
.lb-bild {
  display: block;
  max-width: 100%;
  max-height: calc(95vh - 10rem);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius);
}

/* Beschriftung */
.lb-beschriftung {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--font-size-sm);
  text-align: center;
  margin: 0;
  max-width: none;
  padding: 0 3rem;
  min-height: 1.5rem;
}

/* Lightbox-Buttons */
.lb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 52px;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius);
  font-size: 1.5rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.15s, border-color 0.15s;
  line-height: 1;
}
.lb-btn:hover {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.7);
}
.lb-btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}
.lb-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.lb-btn-schliessen {
  font-size: 1.25rem;
  padding: 0.375rem 0.625rem;
}

.lb-btn-nav {
  font-size: 2rem;
  padding: 0.5rem 0.75rem;
  min-height: 64px;
}

/* ===================================================
   GALERIE – Responsive
   =================================================== */

@media (max-width: 800px) {
  .galerie-bilder-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }
  .alben-grid {
    grid-template-columns: 1fr;
  }
  .lb-btn-nav {
    min-width: 44px;
    min-height: 56px;
    font-size: 1.75rem;
    padding: 0.375rem 0.5rem;
  }
  .lb-beschriftung {
    padding: 0 0.5rem;
  }
}

@media (max-width: 500px) {
  .galerie-bilder-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Termine: Art-Kennzeichnung ---- */
.date-badges {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  flex-shrink: 0;
  align-items: flex-start;
  min-width: 130px;
}

.art-badge {
  display: inline-block;
  padding: 0.2rem 0.625rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.art-badge--atelier {
  background: var(--color-primary);
  color: var(--color-text);
}
.art-badge--vhs {
  background: var(--color-accent);
  color: var(--color-text);
}
.art-badge--sonstiges {
  background: transparent;
  color: var(--color-text);
  border: 1.5px solid var(--color-border);
}

/* ---- Termine: Kategorie-Farbcode (Mosaik = Orange, Qi Gong = Grün) ----
   Gilt auf der Termine-Seite (.termine-content) und im Startseiten-Teaser
   „Nächste Termine" (.termine-teaser) – sonst nirgends.
   Nur Akzente werden eingefärbt (Datums-Kasten, Kategorie-Badge, feiner
   linker Balken) – der Text bleibt überall dunkel. Die Kategorie steht
   zusätzlich immer als Text („Mosaik"/„Qi Gong") im Badge – die Farbe ist
   nie die einzige Information. */
.termine-content .date-item.kat--mosaik,
.termine-teaser .date-item.kat--mosaik { --kat-farbe: var(--kat-mosaik); }
.termine-content .date-item.kat--qigong,
.termine-teaser .date-item.kat--qigong { --kat-farbe: var(--kat-qigong); }
.termine-content .date-item.kat--mosaik,
.termine-content .date-item.kat--qigong,
.termine-teaser .date-item.kat--mosaik,
.termine-teaser .date-item.kat--qigong {
  border-left: 4px solid var(--kat-farbe);
}
.termine-content .date-item.kat--mosaik .date-badge,
.termine-content .date-item.kat--qigong .date-badge,
.termine-teaser .date-item.kat--mosaik .date-badge,
.termine-teaser .date-item.kat--qigong .date-badge {
  background: var(--kat-farbe);
  color: var(--color-text);
}
.kat-badge {
  display: inline-block;
  padding: 0.2rem 0.625rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  background: var(--kat-farbe, transparent);
  color: var(--color-text);
}
/* Art-Badge (Mosaik-Workshop / VHS-Kurs) auf Termine-Seite und im Teaser neutral
   umrandet statt farbig gefüllt – sonst stünden Orange, Grün und Gelb
   nebeneinander. So trägt allein die Kategorie die Farbe. */
.termine-content .art-badge,
.termine-teaser .art-badge {
  background: transparent;
  color: var(--color-text);
  border: 1.5px solid var(--color-border);
}
/* Sektions-Akzent: kurzer farbiger Balken unter der Überschrift.
   Genutzt auf der Termine-Seite (Workshop-Bereich = Orange) und auf der
   Angebote-Seite (jede Angebots-Überschrift: Mosaik = Orange, Qi Gong =
   Grün). Rein dekorativ, Überschrift selbst bleibt dunkel. */
.kat-heading--mosaik { --kat-farbe: var(--kat-mosaik); }
.kat-heading--qigong { --kat-farbe: var(--kat-qigong); }
.kat-heading--mosaik::after,
.kat-heading--qigong::after {
  content: "";
  display: block;
  width: 3rem;
  height: 4px;
  margin-top: 0.5rem;
  border-radius: 2px;
  background: var(--kat-farbe);
}

/* ---- Termin: Zusatzinfos ---- */
.date-meta-label {
  font-weight: 600;
}
.date-hinweis {
  font-style: italic;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* ---- Termine: Kategorie-Filter ---- */
.termin-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2rem;
}
.filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.75rem;
  font-size: var(--font-size-base);
  font-weight: 600;
  border-radius: var(--radius);
  min-height: 52px;
  min-width: 44px;
  border: 2px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.filter-btn:hover {
  border-color: var(--color-text-muted);
}
.filter-btn[aria-pressed="true"] {
  background: var(--color-accent);
  color: var(--color-text);
  border-color: var(--color-accent);
}

/* ---- Termin: Beschreibung („Mehr anzeigen") ---- */
.date-beschreibung {
  margin-top: 0.5rem;
}
.btn-mehr {
  display: inline-flex;
  align-items: center;
  margin-top: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-size: var(--font-size-sm);
  font-weight: 600;
  border-radius: var(--radius);
  min-height: 44px;
  border: 2px solid var(--color-border);
  background: transparent;
  color: var(--color-link);
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.btn-mehr:hover {
  background: var(--color-bg-subtle);
  border-color: var(--color-text-muted);
}

/* ---- Termine-Seite: Termin-Karten auf hellgrauem Grund ----
   Gleiches Hellgrau wie die Abschnitts-Unterteilung der Startseite
   (.section--alt → --color-bg-subtle), damit sich die Karten vom weißen
   Seitenhintergrund abheben. Termine-Seite (.termine-content) und – in
   kompakter Form – Startseiten-Teaser (.termine-teaser, siehe unten);
   Datums-Kasten, Kategorie-Balken und Badges bleiben unverändert.
   Kontraste auf #F3F1EA: Text 13,3:1 · Warmgrau 6,7:1 · Grün-Link 5,3:1. */
.termine-content .date-list {
  gap: 1.25rem;
}
.termine-content .date-item {
  background: var(--color-bg-subtle);
  border-radius: 8px;
  padding: 1.5rem 1.75rem;
}
@media (max-width: 500px) {
  .termine-content .date-item {
    padding: 1.25rem;
  }
}
/* Startseiten-Teaser „Nächste Termine": gleiche Karten-Optik (Hellgrau,
   8px Abrundung), aber kompakter – Innenabstand und Kartenabstand bleiben
   beim Standard von .date-item/.date-list. Der Teaser-Abschnitt ist dafür
   weiß (kein .section--alt), sonst verschwänden die Karten im Grau. */
.termine-teaser .date-item {
  background: var(--color-bg-subtle);
  border-radius: 8px;
}
/* Hover des „Mehr anzeigen"-Buttons wäre auf dem Kartengrau unsichtbar –
   daher hier heller Papiergrund statt Grau. */
.termine-content .btn-mehr:hover {
  background: var(--color-bg);
}

/* ---- Leerer Zustand (Termine-Seite) ---- */
.empty-state {
  padding: 3rem 2rem;
  text-align: center;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.empty-state p {
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: 0.75rem;
}
.empty-state p:last-of-type {
  margin-bottom: 0;
}

/* ---- Leerer Zustand (Startseiten-Teaser) ---- */
.termine-empty-teaser {
  color: var(--color-text-muted);
  max-width: 56ch;
  margin-inline: auto;
  text-align: center;
  margin-bottom: 1.5rem;
}