/* ==========================================================================
   Moki – zentrales Stylesheet
   Farben, Abstände und Rundungen werden ganz oben unter :root gesteuert.
   Aufbau: 1 Variablen · 2 Grundlagen · 3 Kopf & Menü · 4 Inhalt · 5 Hero
           6 Karten · 7 Buttons · 8 Formular · 9 Meldungen · 10 Fuß
           11 Fakten · 12 Zeitleiste · 13 Schritte · 14 Tabelle · 15 Team
           16 Zwei Spalten & Kästen
   Mobile First: Standard = Smartphone, größere Bildschirme per @media.
   ========================================================================== */

/* 1 Variablen ------------------------------------------------------------- */
:root {
  --farbe-primaer:      #1c1f2e;   /* dunkle Schrift, Initialen */
  --farbe-akzent:       #c00000;   /* Buttons, aktive Links */
  --farbe-akzent-dunkel:#9a0000;   /* Hover auf Buttons */
  --farbe-hintergrund:  #fbf8f5;   /* warmes Off-White */
  --farbe-flaeche:      #ffffff;   /* Karten, Formularfelder */
  --farbe-zart:         #fdeef2;   /* zartes Rosa aus dem Logo: Seitenköpfe, Aufrufe */
  --zart-rgb:           253, 238, 242;   /* dieselbe Farbe für Verläufe */
  --farbe-warm:         #f3ede7;   /* Fußbereich */
  --farbe-text:         #1c1f2e;
  --farbe-text-leise:   #5a6070;
  --farbe-linie:        #e6dfd8;
  --farbe-auf-dunkel:   #ffffff;   /* Schrift auf roten Buttons */
  --farbe-erfolg:       #1f7a45;

  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius:        12px;
  --schatten:      0 1px 2px rgba(28, 31, 46, .06), 0 8px 24px rgba(28, 31, 46, .08);
  --schatten-hoch: 0 2px 4px rgba(28, 31, 46, .08), 0 14px 34px rgba(28, 31, 46, .14);

  --breite-inhalt: 76rem;
  --breite-text:   44rem;
  --rand:          1.25rem;        /* seitlicher Abstand auf dem Smartphone */
  --kopf-hoehe:    4rem;
}

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

html {
  scroll-padding-top: calc(var(--kopf-hoehe) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding-top: var(--kopf-hoehe);          /* Platz für den fixierten Kopf */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--farbe-text);
  background: var(--farbe-hintergrund);
}

img { max-width: 100%; height: auto; display: block; border-radius: var(--radius); }

h1, h2, h3 { line-height: 1.2; margin: 0 0 .6em; text-wrap: balance; }
h1 { font-size: clamp(1.9rem, 5vw + .5rem, 3rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.4rem, 2vw + 1rem, 1.9rem); margin-top: 2em; }
h3 { font-size: 1.2rem; }
p, ul, ol { margin: 0 0 1.1em; }

a { color: var(--farbe-akzent); text-underline-offset: .18em; }
a:hover { color: var(--farbe-akzent-dunkel); }

:focus-visible { outline: 3px solid var(--farbe-akzent); outline-offset: 3px; border-radius: 4px; }

.nur-vorleser {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.sprunglink {
  position: fixed; top: -10rem; left: 1rem; z-index: 200;
  padding: .6rem 1rem; background: var(--farbe-flaeche); border-radius: var(--radius);
}
.sprunglink:focus { top: 1rem; }

/* 3 Kopf & Menü ----------------------------------------------------------- */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  color: var(--farbe-text);
  background: rgba(255, 255, 255, .86);              /* helles Glas */
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid rgba(28, 31, 46, .08);
  box-shadow: 0 2px 12px rgba(28, 31, 46, .05);
}

.kopf__innen {
  max-width: var(--breite-inhalt);
  margin: 0 auto;
  padding: 0 var(--rand);
  min-height: var(--kopf-hoehe);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
}

.kopf__logo {
  /* volle Höhe der Kopfleiste: Das Logo bleibt beim Aufklappen des Menüs an seinem Platz */
  display: flex; align-items: center; gap: .5rem;
  min-height: var(--kopf-hoehe);
  color: inherit; text-decoration: none;
}
.kopf__logo:hover { color: inherit; }
.kopf__logo img { height: 2.6rem; width: auto; border-radius: 0; }
@media (min-width: 52rem) { .kopf__logo img { height: 2.9rem; } }
.kopf__logo strong { font-size: 1.45rem; letter-spacing: -.01em; }
.kopf__logo span   { font-size: .85rem; opacity: .75; }

/* Menü-Schalter (Smartphone) */
.menue-schalter { position: absolute; opacity: 0; pointer-events: none; }

.menue-knopf {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; margin-right: -.5rem;
  cursor: pointer; border-radius: var(--radius);
}
.menue-schalter:focus-visible + .menue-knopf { outline: 3px solid var(--farbe-akzent); }

.menue-knopf__striche,
.menue-knopf__striche::before,
.menue-knopf__striche::after {
  display: block; width: 1.5rem; height: 2px; border-radius: 2px;
  background: currentColor; transition: transform .2s, background .2s;
}
.menue-knopf__striche { position: relative; }
.menue-knopf__striche::before,
.menue-knopf__striche::after { content: ""; position: absolute; left: 0; }
.menue-knopf__striche::before { top: -.45rem; }
.menue-knopf__striche::after  { top:  .45rem; }

.menue-schalter:checked + .menue-knopf .menue-knopf__striche { background: transparent; }
.menue-schalter:checked + .menue-knopf .menue-knopf__striche::before { transform: translateY(.45rem) rotate(45deg); }
.menue-schalter:checked + .menue-knopf .menue-knopf__striche::after  { transform: translateY(-.45rem) rotate(-45deg); }

/* Aufgeklapptes Menü auf dem Smartphone: Abstand und feine Linie unter dem Logo */
.menue {
  display: none; width: 100%;
  padding: .75rem 0 1rem;
  border-top: 1px solid var(--farbe-linie);
}
.menue-schalter:checked ~ .menue { display: block; }

.menue ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }

.menue a {
  display: block; padding: .7rem .9rem;
  color: var(--farbe-text); text-decoration: none; font-weight: 500;
  border-radius: var(--radius);
  transition: background .15s, color .15s;
}
.menue a:hover  { color: var(--farbe-akzent); background: var(--farbe-zart); }
.menue a.aktiv  { color: var(--farbe-auf-dunkel); background: var(--farbe-akzent); }

@media (min-width: 52rem) {
  .menue-knopf { display: none; }
  .menue { display: block; width: auto; margin: 0; padding: 0; border: 0; }
  .menue ul { display: flex; gap: .25rem; }
  .menue a { padding: .45rem .85rem; font-size: .98rem; }
}

/* 4 Inhalt ---------------------------------------------------------------- */
.seite { flex: 1; }                      /* <main>: schiebt den Fuß nach unten */

.inhalt {
  width: 100%;
  max-width: var(--breite-inhalt);
  margin: 0 auto;
  padding: 2.5rem var(--rand) 4rem;
}
/* Fließtext auf angenehme Zeilenlänge begrenzen (ca. 75 Zeichen).
   :where() hat keine Gewichtung – Raster wie .karten oder .team nutzen so die volle Breite. */
:where(.inhalt, .abschnitt, .medien__text) > :where(p, ul, ol, h1, h2, h3) {
  max-width: var(--breite-text);
}
.karten, .fakten, .team { max-width: none; }
.inhalt li { margin-bottom: .35em; }

/* Ein Kapitel einer Seite; der kleine rote Strich markiert die Überschrift */
.abschnitt { padding-top: 1rem; }
.abschnitt + .abschnitt { margin-top: 2rem; border-top: 1px solid var(--farbe-linie); }
.abschnitt > h2::before,
.medien__text > h2::before {
  content: ""; display: block; width: 2.5rem; height: 4px; margin-bottom: .8rem;
  background: var(--farbe-akzent); border-radius: 2px;
}

/* Text neben Bild: nebeneinander nur, wenn es das Bild wirklich gibt */
.medien { display: grid; gap: 1.5rem; align-items: start; margin: 1.5rem 0; }
.medien > img { width: 100%; max-height: 28rem; object-fit: cover; box-shadow: var(--schatten); }
@media (min-width: 52rem) {
  .medien:has(> img) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 2.5rem; }
  .medien--umgekehrt:has(> img) > img { order: -1; }
  .medien--umgekehrt:has(> img) { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}
.medien__text > h2 { margin-top: 0; }

/* Sprungmarken unter dem Seitenkopf */
.sprungmarken ul {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 0 0 1.5rem; padding: 0; list-style: none;
}
.sprungmarken li { margin: 0; }
.sprungmarken a {
  display: inline-block; padding: .4rem .9rem;
  font-size: .95rem; font-weight: 500; text-decoration: none;
  color: var(--farbe-text); background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-linie); border-radius: 999px;
  transition: border-color .15s, color .15s;
}
.sprungmarken a:hover { color: var(--farbe-akzent); border-color: var(--farbe-akzent); }

/* "↑ Zur Übersicht" am Ende jedes Abschnitts – springt zurück zu den Sprungmarken */
.zur-uebersicht { margin: 1.5rem 0 0; font-size: .92rem; }
.zur-uebersicht a { font-weight: 600; text-decoration: none; }
.zur-uebersicht a:hover { text-decoration: underline; }

/* Zitat */
.zitat {
  max-width: var(--breite-text);
  margin: 1.5rem 0; padding: 1.25rem 1.5rem;
  font-size: 1.15rem; font-style: italic;
  background: var(--farbe-flaeche);
  border-left: 5px solid var(--farbe-akzent);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}
.zitat p:last-child { margin-bottom: 0; }
.zitat footer { margin-top: .6rem; font-size: .95rem; font-style: normal; color: var(--farbe-text-leise); }

/* Ankündigungen oben auf der Startseite (z. B. Kennenlerntag) */
.ankuendigungen { display: grid; gap: 1.25rem; margin-bottom: 2rem; }
.ankuendigung {
  display: grid; gap: 1.25rem; align-items: start;
  padding: 1.5rem;
  background: var(--farbe-flaeche);
  border-left: 5px solid var(--farbe-akzent);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}
@media (min-width: 40rem) {
  .ankuendigung--mit-bild { grid-template-columns: minmax(0, 1fr) 12rem; }
}
.ankuendigung h2 { margin: 0 0 .3rem; font-size: clamp(1.3rem, 1.5vw + 1rem, 1.6rem); }
.ankuendigung__dachzeile {
  margin: 0 0 .3rem; font-size: .8rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--farbe-akzent);
}
.ankuendigung__termin { margin-bottom: .6rem; font-weight: 700; }
.ankuendigung__links { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin: 1rem 0 0; }
.ankuendigung__links:empty { display: none; }
.ankuendigung__mehr { font-weight: 600; }
.ankuendigung__flyer img {
  width: 100%; max-height: 18rem; object-fit: contain;
  border-radius: calc(var(--radius) / 2); box-shadow: var(--schatten);
  background: var(--farbe-hintergrund);
}

/* Hervorgehobener Hinweis, z. B. "Freie Plätze" */
.hinweis {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  margin-bottom: 2rem; padding: 1rem 1.25rem;
  background: var(--farbe-flaeche);
  border-left: 5px solid var(--farbe-akzent);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}
.hinweis p { margin: 0; flex: 1 1 18rem; font-weight: 600; }
.hinweis__dachzeile {
  display: block; font-size: .8rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--farbe-akzent);
}
.hinweis__text { display: block; margin-top: .2rem; font-weight: 400; color: var(--farbe-text-leise); }

/* Eckdaten einer Stellenanzeige (Art, Umfang, Beginn …): ein Kasten, darin Spalten je nach Breite */
.eckdaten {
  display: grid; gap: 1rem 2rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
  margin: 0 0 2rem; padding: 1.25rem 1.5rem;
  background: var(--farbe-flaeche);
  border-left: 5px solid var(--farbe-akzent);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}
@media (max-width: 40rem) { .eckdaten { grid-template-columns: 1fr 1fr; gap: .9rem 1.25rem; padding: 1.1rem 1.25rem; } }
.eckdaten dt { font-size: .85rem; color: var(--farbe-text-leise); }
.eckdaten dd { margin: 0; font-weight: 600; }

.einleitung { font-size: 1.2rem; color: var(--farbe-text-leise); }
.klein      { font-size: .92rem; color: var(--farbe-text-leise); }

/* Einzelnes Bild am Ende eines Abschnitts */
.abschnitt > img { width: 100%; max-width: 34rem; margin: 1.5rem 0; box-shadow: var(--schatten); }

/* Bilder-Collage (z. B. Aktivitäten & Feste): gleich hohe Reihen, beliebig viele Bilder.
   Jedes Bild ist so breit, wie es sein Seitenverhältnis bei der Reihenhöhe verlangt, und
   wächst im selben Verhältnis mit, bis die Reihe voll ist. Nichts wird abgeschnitten. */
/* Smartphone: zwei Spalten – Querformate über die ganze Breite (3:2), Hochformate nebeneinander (3:4). */
.collage {
  display: grid; grid-template-columns: 1fr 1fr; gap: .75rem;
  margin: 1.5rem 0;
}
.collage__bild {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--schatten);
}
.collage__bild--quer { grid-column: span 2; aspect-ratio: 3 / 2; }
@media (min-width: 40rem) {
  .collage { --reihe: 15rem; display: flex; flex-wrap: wrap; }
  .collage::after { content: ""; flex-grow: 999; }        /* letzte Reihe nicht überdehnen */
  .collage__bild, .collage__bild--quer {
    flex: var(--verhaeltnis) 1 calc(var(--verhaeltnis) * var(--reihe));
    aspect-ratio: auto;
  }
}
.collage__bild img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }

/* Heller Aufruf-Kasten, z. B. am Seitenende. Mit Foto (kopfbild('band-….jpg'))
   füllt das Bild ab Tablet-Breite die rechten 60 % (zugeschnitten, wie beim Seitenkopf)
   und läuft nach links weich aus. */
.band {
  position: relative; isolation: isolate; overflow: hidden;
  margin: 3rem 0; padding: 2.5rem var(--rand);
  background: var(--farbe-zart);
  border-radius: var(--radius);
}
.band > * { max-width: 36rem; }
.band h2 { margin-top: 0; }
.band__aktionen { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (min-width: 52rem) {
  .band { padding: 4rem 3rem; }
  .band[style*="--hero-bild"]::before {
    content: ""; position: absolute; inset: 0 0 0 auto; width: 60%; z-index: -1;
    background-image:
      linear-gradient(90deg, var(--farbe-zart) 0%, rgba(var(--zart-rgb), .55) 22%, rgba(var(--zart-rgb), 0) 50%),
      var(--hero-bild);
    background-size: 100% 100%, cover;
    background-position: 0 0, center var(--hero-pos, 50%);
    background-repeat: no-repeat;
  }
}

/* 5 Hero (Seitenkopf) ----------------------------------------------------- */
/* Hell mit dunkler Schrift. Mit Foto (kopfbild('….jpg')):
   Smartphone – das Foto steht oben und läuft nach unten in den Text aus.
   Ab Tablet  – Text links auf hellem Grund, das Foto rechts. */
.hero {
  margin-top: calc(var(--kopf-hoehe) * -1);            /* läuft unter dem Glas-Kopf durch */
  padding: calc(var(--kopf-hoehe) + 3rem) var(--rand) 3.5rem;
  color: var(--farbe-text);
  background: var(--farbe-zart);
}
/* Das Foto liegt in einer eigenen Fläche (::before) und füllt sie zugeschnitten aus –
   so passt jedes Seitenverhältnis, vom Panorama bis zum Hochformat. */
.hero[style*="--hero-bild"] {
  position: relative; isolation: isolate;
  padding-top: calc(var(--kopf-hoehe) + 54vw);
}
.hero[style*="--hero-bild"]::before {
  content: ""; position: absolute; inset: 0 0 auto 0; z-index: -1;
  height: calc(var(--kopf-hoehe) + 62vw);
  background-image:
    linear-gradient(to bottom, rgba(var(--zart-rgb), 0) calc(var(--kopf-hoehe) + 38vw), var(--farbe-zart) calc(var(--kopf-hoehe) + 58vw)),
    var(--hero-bild);
  background-size: 100% 100%, cover;
  background-position: 0 0, center var(--hero-pos, 50%);
  background-repeat: no-repeat;
}
.hero__innen { max-width: var(--breite-inhalt); margin: 0 auto; }
.hero h1 { max-width: 18ch; }
.hero p  { max-width: 38rem; font-size: 1.2rem; }
.hero__aktionen { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

.hero__dachzeile {
  margin-bottom: .5rem;
  font-size: .85rem !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--farbe-akzent);
}

/* Kleiner Seitenkopf für Unterseiten */
.hero--klein { padding-top: calc(var(--kopf-hoehe) + 2.5rem); padding-bottom: 2.5rem; }
.hero--klein h1 { max-width: 24ch; }
.hero--klein p:last-child { margin-bottom: 0; }

@media (min-width: 52rem) {
  .hero, .hero[style*="--hero-bild"] { padding-top: calc(var(--kopf-hoehe) + 6rem); padding-bottom: 6.5rem; }
  .hero--klein, .hero--klein[style*="--hero-bild"] { padding-top: calc(var(--kopf-hoehe) + 4.5rem); padding-bottom: 4.5rem; }
  /* Foto nur in den rechten 62 %, dort zugeschnitten – so steht die Bildmitte (meist das Motiv)
     neben dem Text statt dahinter. Der linke Rand läuft weich in den rosa Grund aus. */
  .hero[style*="--hero-bild"]::before {
    inset: 0 0 0 auto; width: 62%; height: auto;
    background-image:
      linear-gradient(90deg, var(--farbe-zart) 0%, rgba(var(--zart-rgb), .55) 22%, rgba(var(--zart-rgb), 0) 50%),
      var(--hero-bild);
    background-position: 0 0, center var(--hero-pos, 40%);
  }
}

/* Startseite: höhere, schmalere Bildfläche für das fast quadratische Foto der Villa.
   Die Fläche beginnt erst unter dem Glas-Kopf, damit der Giebel nicht dahinter verschwindet. */
.hero:not(.hero--klein)[style*="--hero-bild"] { padding-top: calc(var(--kopf-hoehe) + 82vw); }
.hero:not(.hero--klein)[style*="--hero-bild"]::before {
  top: var(--kopf-hoehe);
  height: 92vw;
  background-image:
    linear-gradient(to bottom, rgba(var(--zart-rgb), 0) 70vw, var(--farbe-zart) 86vw),
    var(--hero-bild);
  background-size: 100% calc(100% + 2px), cover;   /* verhindert eine feine Linie an der Unterkante */
}
@media (min-width: 52rem) {
  .hero:not(.hero--klein)[style*="--hero-bild"] { padding-top: calc(var(--kopf-hoehe) + 8rem); padding-bottom: 8rem; }
  .hero:not(.hero--klein)[style*="--hero-bild"]::before {
    top: var(--kopf-hoehe); width: 50%; height: auto;
    background-image:
      linear-gradient(90deg, var(--farbe-zart) 0%, rgba(var(--zart-rgb), .4) 14%, rgba(var(--zart-rgb), 0) 32%),
      var(--hero-bild);
  }
}

/* Schwebender Pfeil unten im Startseiten-Kopf: zeigt, dass es weiter unten weitergeht.
   Nur auf größeren Bildschirmen – dort füllt der Kopf oft die ganze Höhe. */
.hero__weiter { display: none; }
@media (min-width: 52rem) {
  .hero:not(.hero--klein) { position: relative; }
  .hero__weiter {
    display: grid; place-items: center;
    position: absolute; left: 50%; bottom: 1.75rem; z-index: 1;
    width: 3rem; height: 3rem; margin-left: -1.5rem;
    color: var(--farbe-akzent);
    background: rgba(255, 255, 255, .92);
    border-radius: 50%;
    box-shadow: var(--schatten);
    animation: weiter-schweben 2.4s ease-in-out infinite;
  }
  .hero__weiter::before {
    content: ""; width: .7rem; height: .7rem; margin-top: -.3rem;
    border-right: 3px solid currentColor; border-bottom: 3px solid currentColor;
    transform: rotate(45deg);
  }
  .hero__weiter:hover { color: var(--farbe-akzent-dunkel); background: #fff; }
}
@keyframes weiter-schweben {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(7px); }
}

/* 6 Karten ---------------------------------------------------------------- */
.karten {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  margin: 2rem 0;
  padding: 0; list-style: none;
}

/* Feste Spaltenzahl, damit keine einzelne Karte allein in der letzten Zeile landet */
@media (min-width: 48rem) {
  .karten--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 48rem) {
  .karten--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.karte {
  display: flex; flex-direction: column;
  padding: 1.5rem;
  background: var(--farbe-flaeche);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  transition: transform .2s, box-shadow .2s;
}
.karte h2, .karte h3 { margin-top: 0; font-size: 1.25rem; }
.karte p { color: var(--farbe-text-leise); }
.karte > :last-child { margin-bottom: 0; margin-top: auto; }
.karte img { margin: -1.5rem -1.5rem 1.25rem; max-width: none; width: calc(100% + 3rem);
             border-radius: var(--radius) var(--radius) 0 0; aspect-ratio: 3 / 2; object-fit: cover; }

a.karte { color: inherit; text-decoration: none; }
a.karte:hover, .karte:has(a:hover) { transform: translateY(-3px); box-shadow: var(--schatten-hoch); }

.karte__mehr { color: var(--farbe-akzent); font-weight: 600; }
.karte__titel { color: inherit; text-decoration: none; }
.karte__titel:hover { color: var(--farbe-akzent); }
.karte .karte__eckdaten { margin-top: -.3rem; font-weight: 600; color: var(--farbe-text); }

/* 7 Buttons --------------------------------------------------------------- */
.button {
  display: inline-block;
  padding: .8rem 1.5rem;
  font: inherit; font-weight: 600; text-decoration: none; text-align: center;
  color: var(--farbe-auf-dunkel);
  background: var(--farbe-akzent);
  border: 2px solid var(--farbe-akzent);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s;
}
.button:hover {
  color: var(--farbe-auf-dunkel);
  background: var(--farbe-akzent-dunkel); border-color: var(--farbe-akzent-dunkel);
  transform: translateY(-1px);
}
/* Zweiter Button neben dem roten: dezent umrandet */
.button--hell { color: var(--farbe-text); background: rgba(255, 255, 255, .7); border-color: rgba(28, 31, 46, .25); }
.button--hell:hover { color: var(--farbe-text); background: #fff; border-color: var(--farbe-text); }

/* 8 Formular -------------------------------------------------------------- */
.formular {
  max-width: var(--breite-text);
  padding: 1.5rem;
  background: var(--farbe-flaeche);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}
.formular__feld { margin-bottom: 1.25rem; }
.formular label,
.formular__label { display: block; margin-bottom: .35rem; font-weight: 600; }

.formular fieldset { margin: 0 0 1.5rem; padding: 0; border: 0; min-width: 0; }
.formular legend {
  width: 100%; margin-bottom: .9rem; padding: 0 0 .4rem;
  font-size: 1.15rem; font-weight: 700;
  border-bottom: 1px solid var(--farbe-linie);
}
.formular__optional { font-weight: 400; color: var(--farbe-text-leise); }

/* Zwei Felder nebeneinander ab Tablet-Breite */
.formular__reihe { display: grid; gap: 0 1rem; }
@media (min-width: 40rem) { .formular__reihe { grid-template-columns: 1fr 1fr; } }

/* Auswahlknöpfe und Häkchen */
.formular .auswahl { display: grid; gap: .5rem; }
.formular .auswahl label,
.formular label.haekchen {
  display: flex; align-items: flex-start; gap: .6rem;
  margin: 0; font-weight: 400; cursor: pointer;
}
.formular input[type="radio"],
.formular input[type="checkbox"] {
  flex: none; width: 1.2rem; height: 1.2rem; margin: .22rem 0 0;
  accent-color: var(--farbe-akzent);
}
.formular .auswahl--kacheln { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.formular .auswahl--kacheln label {
  padding: .8rem 1rem; font-weight: 600;
  border: 1px solid var(--farbe-linie); border-radius: var(--radius);
  background: var(--farbe-hintergrund);
}
.formular .auswahl--kacheln label:has(input:checked) {
  border-color: var(--farbe-akzent); box-shadow: 0 0 0 1px var(--farbe-akzent);
}

/* Langes Formular (Anmeldebogen) */
.formular--breit { max-width: none; container-type: inline-size; }
.formular__pflicht { color: var(--farbe-akzent); font-weight: 700; }

/* Zwei Erziehungsberechtigte nebeneinander, sobald das Formular breit genug ist */
.eltern-paar { display: grid; gap: 0 2rem; }
@container (min-width: 40rem) { .eltern-paar { grid-template-columns: 1fr 1fr; } }

/* Lange Auswahlliste mit Erläuterungen (Elternarbeit) */
.formular .auswahl--liste { gap: .75rem; margin-bottom: 1.25rem; }
@container (min-width: 40rem) { .formular .auswahl--liste { grid-template-columns: 1fr 1fr; } }
.formular .auswahl--liste small { color: var(--farbe-text-leise); font-size: .9rem; line-height: 1.4; }

.formular__liste { padding-left: 1.25rem; }
.formular__details { margin: 0 0 1.25rem; }
.formular__details summary { cursor: pointer; font-weight: 600; color: var(--farbe-akzent); }
.formular__details p { margin-top: .75rem; font-size: .92rem; color: var(--farbe-text-leise); }

.formular input[type="text"],
.formular input[type="password"],
.formular input[type="email"],
.formular input[type="tel"],
.formular input[type="date"],
.formular select,
.formular textarea {
  width: 100%;
  padding: .75rem .9rem;
  font: inherit; font-size: 1rem;            /* mind. 16px: kein Auto-Zoom auf dem iPhone */
  color: inherit; background: var(--farbe-hintergrund);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
}
.formular textarea { resize: vertical; min-height: 9rem; }
.formular input:focus, .formular textarea:focus, .formular select:focus {
  outline: none; border-color: var(--farbe-akzent);
  box-shadow: 0 0 0 3px rgba(192, 0, 0, .18);
}
.formular [aria-invalid="true"] { border-color: var(--farbe-akzent); }
.formular__fehler  { margin: .35rem 0 0; font-size: .92rem; color: var(--farbe-akzent); }
.formular__hinweis { font-size: .92rem; color: var(--farbe-text-leise); }

/* Honeypot gegen Spam-Bots – muss unsichtbar bleiben */
.hp-feld { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* 9 Meldungen ------------------------------------------------------------- */
.meldung {
  max-width: var(--breite-text);
  margin-bottom: 1.5rem; padding: 1.1rem 1.25rem;
  background: var(--farbe-flaeche);
  border-left: 5px solid var(--farbe-linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}
.meldung h2 { margin-top: 0; }
.meldung > :last-child { margin-bottom: 0; }
.meldung--erfolg { border-left-color: var(--farbe-erfolg); }
.meldung--fehler { border-left-color: var(--farbe-akzent); }

/* 10 Fuß ------------------------------------------------------------------ */
.fuss {
  color: var(--farbe-text);
  background: var(--farbe-warm);
  border-top: 1px solid var(--farbe-linie);
  font-size: .95rem;
}
.fuss__innen {
  max-width: var(--breite-inhalt);
  margin: 0 auto;
  padding: 2.5rem var(--rand) 1.5rem;
  display: grid; gap: 1.5rem;
}
.fuss address { font-style: normal; }
.fuss p { margin-bottom: .4em; }
.fuss a { color: var(--farbe-text); text-decoration-color: rgba(28, 31, 46, .3); }
.fuss a:hover { color: var(--farbe-akzent); text-decoration-color: var(--farbe-akzent); text-decoration-thickness: 2px; }
.fuss__links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.fuss__copyright {
  max-width: var(--breite-inhalt);
  margin: 0 auto; padding: 1rem var(--rand) 1.5rem;
  border-top: 1px solid var(--farbe-linie);
  font-size: .85rem; color: var(--farbe-text-leise);
}

@media (min-width: 40rem) {
  .fuss__innen { grid-template-columns: 1fr auto; }
  .fuss__links ul { text-align: right; }
}

/* Bankverbindung (Seite Spenden) */
.bankdaten { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: 0 0 1.1em; }
.bankdaten dt { color: var(--farbe-text-leise); }
.bankdaten dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.bankdaten__iban {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .02em;
  user-select: all;                 /* ein Klick/Tipp markiert die ganze IBAN zum Kopieren */
}
@media (max-width: 30rem) {
  .bankdaten { grid-template-columns: 1fr; }
  .bankdaten dd { margin-bottom: .4rem; }
}

/* 11 Fakten (Zahlen-Kacheln) --------------------------------------------- */
/* 2 x 2 auf dem Smartphone, 4 nebeneinander ab Tablet-Breite – nie 3 + 1 */
.fakten {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 2rem 0; padding: 0; list-style: none;
}
.fakten li {
  margin: 0; padding: 1.25rem;
  background: var(--farbe-flaeche);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}
@media (min-width: 48rem) { .fakten { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fakten strong {
  display: block; margin-bottom: .2rem;
  font-size: 1.9rem; line-height: 1.1; letter-spacing: -.02em;
  color: var(--farbe-akzent);
}
.fakten span { color: var(--farbe-text-leise); }

/* 12 Zeitleiste (Tagesablauf) -------------------------------------------- */
.zeitleiste {
  max-width: var(--breite-text);
  margin: 1.5rem 0; padding: 0; list-style: none;
  border-left: 3px solid var(--farbe-linie);
}
.zeitleiste > li { position: relative; margin: 0; padding: 0 0 1.5rem 1.5rem; }
.zeitleiste > li::before {
  content: ""; position: absolute; left: calc(-.5rem - 1.5px); top: .45rem;
  width: 1rem; height: 1rem; border-radius: 50%;
  background: var(--farbe-hintergrund); border: 3px solid var(--farbe-akzent);
}
.zeitleiste__zeit { display: block; font-weight: 700; color: var(--farbe-akzent); }
.zeitleiste h3 { margin: .1rem 0 .35rem; }
.zeitleiste p { margin-bottom: 0; }

/* 13 Nummerierte Schritte ------------------------------------------------- */
.schritte {
  max-width: var(--breite-text);
  margin: 1.5rem 0; padding: 0; list-style: none;
  counter-reset: schritt;
}
.schritte > li {
  position: relative; counter-increment: schritt;
  margin: 0 0 1.25rem; padding-left: 3.25rem; min-height: 2.25rem;
}
.schritte > li::before {
  content: counter(schritt);
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  font-weight: 700; color: var(--farbe-auf-dunkel);
  background: var(--farbe-akzent); border-radius: 50%;
}
.schritte h3 { margin: .3rem 0 .3rem; font-size: 1.1rem; }
.schritte p { margin: 0; }

/* 14 Tabelle (Kosten) ----------------------------------------------------- */
.tabelle {
  width: 100%; max-width: var(--breite-text);
  margin: 1.5rem 0; border-collapse: collapse;
  background: var(--farbe-flaeche);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--schatten);
}
.tabelle th, .tabelle td { padding: .85rem 1.1rem; text-align: left; vertical-align: top; }
.tabelle tr + tr > * { border-top: 1px solid var(--farbe-linie); }
.tabelle td:last-child { text-align: right; font-weight: 700; white-space: nowrap; }
.tabelle th { font-weight: 400; }
.tabelle small { display: block; color: var(--farbe-text-leise); }

/* 15 Team ----------------------------------------------------------------- */
.team {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  margin: 1.5rem 0; padding: 0; list-style: none;
}
.team li {
  margin: 0; padding: 1.5rem 1.25rem; text-align: center;
  background: var(--farbe-flaeche);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}
.team__bild, .team img {
  display: grid; place-items: center;
  width: 7rem; height: 7rem; margin: 0 auto 1rem;
  border-radius: 50%; object-fit: cover;
  font-size: 1.8rem; font-weight: 700; color: var(--farbe-akzent);
  background: var(--farbe-zart);
}
.team h3 { margin-bottom: .2rem; font-size: 1.1rem; }
.team__rolle { margin: 0 0 .3rem; font-weight: 600; color: var(--farbe-akzent); }
.team__beruf { margin: 0; font-size: .95rem; color: var(--farbe-text-leise); }

/* 16 Zwei Spalten (z. B. Formular + Kontaktkasten) ------------------------ */
.zwei-spalten { display: grid; gap: 2rem; align-items: start; }
.spalte-rechts { display: grid; gap: 1.5rem; }
@media (min-width: 60rem) {
  .zwei-spalten { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
/* Rechte Spalte bleibt beim Scrollen sichtbar – aber nur, wenn das Fenster hoch genug ist,
   sonst wäre ihr unterer Teil erst am Seitenende zu sehen */
@media (min-width: 60rem) and (min-height: 40rem) {
  .spalte-rechts { position: sticky; top: calc(var(--kopf-hoehe) + 1.5rem); }
}
.kasten {
  padding: 1.5rem;
  background: var(--farbe-flaeche);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}
.kasten h2 { margin-top: 0; font-size: 1.25rem; }
.kasten address { margin-bottom: 1.1em; font-style: normal; }
.kasten > :last-child { margin-bottom: 0; }
.kasten--zart { background: var(--farbe-zart); box-shadow: none; }

/* 17 Anmeldeseite (Passwortschutz, solange die Seite nicht öffentlich ist) --- */
.zugang-seite {
  padding: 2rem var(--rand);
  justify-content: center; align-items: center;
  background: var(--farbe-zart);
}
.zugang {
  width: 100%; max-width: 26rem;
  padding: 2rem 1.5rem;
  background: var(--farbe-flaeche);
  border-radius: var(--radius);
  box-shadow: var(--schatten-hoch);
}
.zugang__logo { height: 3.5rem; width: auto; margin: 0 auto 1.5rem; border-radius: 0; }
.zugang h1 { font-size: 1.4rem; text-align: center; }
.zugang > p { color: var(--farbe-text-leise); text-align: center; }
.zugang .formular { padding: 0; box-shadow: none; }
.zugang .button { width: 100%; }

/* Weniger Bewegung, wenn im Gerät so eingestellt -------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}