@charset "UTF-8";
/* =====================================================================
   ImPulz-Gesundheit Aktiv e.V. – Stylesheet der Website (Frontend)
   ---------------------------------------------------------------------
   Grundlage ist die vom Verein genehmigte Gestaltung "Variante B ·
   Gemeinschaft": Moosgruen als Primaerfarbe, Mandarine fuer Handlungen,
   Beere fuer den Kinderbereich, Sonnengelb fuer Hervorhebungen und
   helles Salbei als Grundflaeche. Alle Stile der Vorlage wurden
   unveraendert uebernommen; ergaenzt wurden nur die Bausteine, die es
   in der Vorlage noch nicht gab (Galerie, Team, Stellenanzeigen, Karte,
   Brotkrumen, Blaetterung, Hinweise, Druckansicht).

   Dieses Stylesheet gilt ausschliesslich fuer die oeffentliche Website.
   Der Verwaltungsbereich hat mit assets/css/admin.css ein eigenes.

   INHALTSVERZEICHNIS
   -------------------------------------------------------------------
   01  Designtokens (Farben, Schriften, Radien)
   02  Grundlagen und Typografie
   03  Barrierefreiheit: Sprunglink, Tastaturfokus, Hilfsklassen
   04  Abschnitte und Wellen-Uebergaenge
   05  Schaltflaechen (Pillen)
   06  Kopfbereich und Navigation
   07  Hero mit organischen Blob-Formen
   08  Angebote
   09  Kursplan (Wochenplan)
   10  Schritte (So laeuft es ab)
   11  Kinder und Familie
   12  Motto-Band
   13  Wissen und Handouts
   14  Verein, Stellen-Hinweis, Partner, Zahlen
   15  Freier Text (Richtext)
   16  Kontakt, Lageplan und Formular
   17  Fussbereich
   18  Galerie: Alben, Bildraster, Lightbox
   19  Team
   20  Stellenanzeigen: Karten und Detailseite
   21  Karte mit Einwilligung (OpenStreetMap)
   22  Brotkrumen, Blaetterung, Hinweiskaesten
   23  Beruehrgeraete und reduzierte Bewegung
   24  Responsive Ergaenzungen der neuen Bausteine
   25  Druckstile
   26  Uebersicht aller CSS-Variablen
   ===================================================================== */


/* =====================================================================
   01  DESIGNTOKENS
   Alle Farben der Website stehen hier. Wer spaeter etwas umfaerben
   moechte, aendert ausschliesslich diesen Block.
   ===================================================================== */
:root{
  --ink:#1F2D25;
  --ink-2:#47564D;
  --muted:#6B7A70;
  --ground:#F3F6EE;
  --surface:#FFFFFF;
  --moss:#2F6B45;
  --moss-deep:#23513A;
  --moss-soft:#DCEBDD;
  --mandarine:#F28B3B;
  --mandarine-deep:#D8712A;
  --mandarine-soft:#FDE7D6;
  --beere:#C94F7C;
  --beere-deep:#A83C64;
  --beere-soft:#F8E1EA;
  --sonne:#F6C85F;
  --sonne-soft:#FBEFC9;
  --line:#D9E3D4;
  --radius:24px;
  --radius-sm:14px;
  --shadow:0 20px 45px -25px rgba(31,45,37,.35);
  --font-display:"Baloo 2","Segoe UI",system-ui,sans-serif;
  --font-body:"Figtree","Segoe UI",system-ui,sans-serif;
  --container:1160px;

  /* Ergaenzungen fuer die neuen Bausteine – gleiche Bildsprache. */
  --blau-soft:#E3ECF6;          /* Betreutes Training, Infoflaechen */
  --blau-ink:#2E5680;
  --sonne-ink:#7A5A0A;          /* lesbare Schrift auf Sonnengelb */
  --mandarine-ink:#8B4A16;      /* lesbare Schrift auf Mandarine-Soft */
  --overlay:rgba(24,34,28,.94); /* Lightbox-Hintergrund */
  --header-height:84px;         /* fuer klebende Elemente unter dem Kopf */
}


/* =====================================================================
   02  GRUNDLAGEN UND TYPOGRAFIE
   ===================================================================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font-body);font-size:16.5px;line-height:1.6}
img,svg{max-width:100%}
a{color:var(--moss);text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{color:var(--moss-deep)}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.08;margin:0;text-wrap:balance;font-weight:700;overflow-wrap:break-word}
h1{font-size:clamp(2.6rem,5.6vw,4.4rem);font-weight:800;line-height:1.04}
h2{font-size:clamp(1.9rem,3.4vw,2.8rem)}
h3{font-size:1.35rem}
p{margin:0}
.container{width:min(var(--container),calc(100% - 2.5rem));margin-inline:auto}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--moss);margin-bottom:.9rem}
.eyebrow .icon{width:1.1rem;height:1.1rem;color:var(--mandarine)}
.lead{font-size:1.15rem;color:var(--ink-2);max-width:58ch;line-height:1.65}
.icon{width:1.25em;height:1.25em;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Damit Bilder in runden Flaechen (Blobs, Portraits) immer fuellen. */
.blob img,.member__photo img,.album-card__cover img,.gallery__item img{display:block;width:100%;height:100%;object-fit:cover}


/* =====================================================================
   03  BARRIEREFREIHEIT
   Sichtbarer Tastaturfokus, Sprunglink zum Inhalt, Hilfsklassen.
   ===================================================================== */
:focus-visible{outline:3px solid var(--mandarine);outline-offset:3px;border-radius:6px}

/* Sprunglink: liegt vor dem Kopfbereich und wird erst beim Tabben sichtbar. */
.skip-link{
  position:absolute;top:-120px;left:1rem;z-index:100;display:inline-block;
  background:var(--moss);color:#fff;font-weight:700;text-decoration:none;
  padding:.85rem 1.4rem;border-radius:0 0 var(--radius-sm) var(--radius-sm);
  box-shadow:var(--shadow);transition:top .15s
}
.skip-link:focus,.skip-link:focus-visible{top:0;color:#fff}

/* Nur fuer Screenreader – optisch nicht vorhanden, aber vorlesbar. */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0
}

/* Auf dunklem Moosgrund brauchen Fliesstext und Links helle Farben. */
.section--moss .lead,
.section--moss .section-head p{color:#D7E7DA}
.section--moss .eyebrow{color:var(--sonne)}
.section--moss .eyebrow .icon{color:var(--sonne)}
.section--moss a:not(.btn){color:#fff}


/* =====================================================================
   04  ABSCHNITTE UND WELLEN-UEBERGAENGE
   ===================================================================== */
.section{padding-block:clamp(4rem,8vw,6.5rem);position:relative}
.section--white{background:var(--surface);--wave-fill:#FFFFFF}
.section--ground{background:var(--ground);--wave-fill:#F3F6EE}
.section--rose{background:#FBF1F5;--wave-fill:#FBF1F5}
.section--moss{background:var(--moss);color:#fff;--wave-fill:#2F6B45}
.section-head{display:grid;gap:.9rem;max-width:700px;margin-bottom:clamp(2rem,4vw,3rem)}
/* Rasterzellen duerfen schmaler werden als das laengste Wort, sonst schiebt z.B.
   "Rehabilitationssport" auf dem Handy die ganze Seite zur Seite. Getrennt wird
   nur bei sehr langen Woertern. */
.section-head>*{min-width:0}
.section-head h1{hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:12 5 5}
@media (max-width:480px){.section-head h1{font-size:clamp(1.9rem,8.2vw,2.6rem)}}
.job-card h2,.job-card h3{-webkit-hyphens:auto;hyphenate-limit-chars:12 5 5}
.section-head p{color:var(--ink-2)}
.section-head--center{margin-inline:auto;text-align:center;justify-items:center}

/* Wellen als Übergang zwischen Flächen */
.wave{position:absolute;left:0;right:0;top:0;width:100%;height:clamp(28px,5vw,64px);transform:translateY(-98%);display:block;pointer-events:none}
.wave path{fill:var(--wave-fill)}


/* =====================================================================
   05  SCHALTFLAECHEN
   Pillen, weil rund = freundlich.
   ===================================================================== */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;padding:.9rem 1.5rem;border-radius:999px;font-weight:700;font-size:1rem;
  text-decoration:none;border:2px solid transparent;cursor:pointer;font-family:var(--font-body);
  transition:transform .18s,background .18s,border-color .18s,box-shadow .18s;white-space:nowrap
}
.btn .icon{width:1.1em;height:1.1em}
.btn--primary{background:var(--mandarine);color:#fff;border-color:var(--mandarine);box-shadow:0 10px 24px -12px rgba(242,139,59,.8)}
.btn--primary:hover{background:var(--mandarine-deep);border-color:var(--mandarine-deep);color:#fff;transform:translateY(-2px)}
.btn--outline{background:transparent;color:var(--moss-deep);border-color:var(--moss)}
.btn--outline:hover{background:var(--moss-soft);color:var(--moss-deep)}
.btn--moss{background:var(--moss);color:#fff;border-color:var(--moss)}
.btn--moss:hover{background:var(--moss-deep);border-color:var(--moss-deep);color:#fff;transform:translateY(-2px)}
.btn--white{background:#fff;color:var(--moss-deep);border-color:#fff}
.btn--white:hover{background:var(--sonne);border-color:var(--sonne);color:var(--ink)}


/* =====================================================================
   06  KOPFBEREICH UND NAVIGATION
   ===================================================================== */
.header{position:sticky;top:0;z-index:50;background:rgba(243,246,238,.92);backdrop-filter:blur(10px)}
.header .container{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:84px;position:relative}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--ink)}
.brand__mark{width:50px;height:50px;border-radius:50%;background:var(--moss);display:grid;place-items:center;flex:none;box-shadow:0 6px 0 var(--moss-soft)}
.brand__mark svg{width:30px;height:30px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.brand__mark svg .sonne{stroke:var(--sonne)}
.brand__mark img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.brand__name{font-family:var(--font-display);font-weight:800;font-size:1.2rem;line-height:1;letter-spacing:-.01em}
.brand__sub{display:block;font-family:var(--font-body);font-weight:500;font-size:.72rem;color:var(--muted);margin-top:.2rem}
.nav{display:flex;align-items:center;gap:1.4rem}
.nav ul{list-style:none;margin:0;padding:.3rem;display:flex;gap:.15rem;background:#fff;border-radius:999px;box-shadow:0 2px 0 var(--line)}
.nav a:not(.btn){color:var(--ink-2);text-decoration:none;font-weight:600;font-size:.93rem;padding:.5rem .9rem;border-radius:999px;display:block}
.nav a:not(.btn):hover{background:var(--moss-soft);color:var(--moss-deep)}
.nav a.is-active:not(.btn),
.nav a[aria-current]:not(.btn){background:var(--moss-soft);color:var(--moss-deep)}
/* Viele Menuepunkte auf dem Desktop:
   bis 8 Eintraege exakt wie im Entwurf,
   ab 9 Eintraegen etwas engere Abstaende,
   ab 12 Eintraegen bricht die Leiste in eine zweite Reihe um, statt die Seite seitlich zu verschieben. */
@media (min-width:1001px){
  .nav ul:has(>li:nth-child(9)) a:not(.btn){padding:.5rem .68rem}
  .nav:has(ul>li:nth-child(12)){min-width:0;flex:0 1 auto}
  .nav ul:has(>li:nth-child(12)){flex-wrap:wrap;justify-content:flex-end;row-gap:.15rem;border-radius:26px}
  .nav:has(ul>li:nth-child(12)) .btn{flex:none}
}
.nav-toggle{display:none;background:#fff;border:2px solid var(--line);border-radius:50%;width:46px;height:46px;place-items:center;cursor:pointer;color:var(--ink)}
.nav-toggle .icon{width:22px;height:22px}
.nav-toggle .i-close{display:none}
@media (max-width:1000px){
  .nav-toggle{display:grid}
  .nav{position:absolute;left:0;right:0;top:100%;background:var(--surface);border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow);flex-direction:column;align-items:stretch;padding:1rem 1.25rem 1.5rem;gap:1rem;display:none}
  .nav ul{flex-direction:column;gap:.2rem;background:none;box-shadow:none;padding:0}
  .nav a:not(.btn){padding:.75rem .9rem}
  .header.is-open .nav{display:flex}
  .header.is-open .i-menu{display:none}
  .header.is-open .i-close{display:block}
}
/* Ab 9 Menuepunkten reicht der Platz zwischen 1001 und 1199 Pixel nicht fuer die Leiste:
   dort ebenfalls das aufklappbare Menue verwenden (gleiche Regeln wie oben). */
@media (min-width:1001px) and (max-width:1199px){
  .header:has(.nav ul>li:nth-child(9)) .nav-toggle{display:grid}
  .header:has(.nav ul>li:nth-child(9)) .nav{position:absolute;left:0;right:0;top:100%;background:var(--surface);border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow);flex-direction:column;align-items:stretch;padding:1rem 1.25rem 1.5rem;gap:1rem;display:none;min-width:0}
  .header:has(.nav ul>li:nth-child(9)) .nav ul{flex-direction:column;flex-wrap:nowrap;gap:.2rem;background:none;box-shadow:none;padding:0;border-radius:0}
  .header:has(.nav ul>li:nth-child(9)) .nav a:not(.btn){padding:.75rem .9rem}
  .header.is-open:has(.nav ul>li:nth-child(9)) .nav{display:flex}
  .header.is-open:has(.nav ul>li:nth-child(9)) .i-menu{display:none}
  .header.is-open:has(.nav ul>li:nth-child(9)) .i-close{display:block}
}


/* =====================================================================
   07  HERO
   ===================================================================== */
.hero{padding-block:clamp(2.5rem,6vw,5rem) clamp(4rem,8vw,7rem);overflow:hidden;position:relative}
.hero .container{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.hero h1 .swash{position:relative;display:inline-block;white-space:nowrap}
.hero h1 .swash svg{position:absolute;left:-2%;right:-2%;bottom:-.08em;width:104%;height:.38em;z-index:-1}
.hero h1 .swash svg path{fill:none;stroke:var(--sonne);stroke-width:14;stroke-linecap:round}
.hero .lead{margin-top:1.3rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.hero__for{margin-top:2.2rem}
.hero__for p{font-size:.8rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}
.chips li{background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:.4rem .85rem;font-size:.88rem;font-weight:600;color:var(--ink-2);display:inline-flex;align-items:center;gap:.4rem}
.chips li::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--moss)}
.chips li:nth-child(1)::before{background:var(--beere)}
.chips li:nth-child(2)::before{background:var(--mandarine)}
.chips li:nth-child(4)::before{background:var(--sonne)}

.hero__art{position:relative;min-height:520px}
.rays{position:absolute;right:-8%;top:-12%;width:70%;color:var(--sonne);opacity:.55;z-index:0}
.rays line{stroke:currentColor;stroke-width:3;stroke-linecap:round}
.blob{
  position:absolute;overflow:hidden;isolation:isolate;
  border-radius:58% 42% 55% 45% / 48% 56% 44% 52%;
  background:linear-gradient(150deg,var(--moss-soft),#EAF3E6 60%,var(--sonne-soft));
}
.blob::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(47,107,69,.28),transparent 55%),radial-gradient(circle at 75% 80%,rgba(246,200,95,.45),transparent 50%);z-index:-1}
.blob--main{right:0;top:2%;width:82%;aspect-ratio:1/1.05;z-index:1}
.blob--kids{left:0;bottom:0;width:44%;aspect-ratio:1;z-index:2;border-radius:45% 55% 52% 48% / 55% 45% 55% 45%;background:linear-gradient(150deg,var(--beere-soft),#FBEFF4 60%,var(--sonne-soft))}
.blob--kids::before{background:radial-gradient(circle at 35% 35%,rgba(201,79,124,.3),transparent 55%)}
.ph__note{
  position:absolute;left:50%;bottom:12%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;
  background:rgba(255,255,255,.9);border-radius:999px;padding:.35rem .8rem .35rem .6rem;font-size:.74rem;color:var(--muted);font-weight:600
}
.ph__note .icon{width:1em;height:1em}
.sticker{
  position:absolute;left:4%;top:6%;z-index:3;background:var(--sonne);color:var(--ink);font-family:var(--font-display);font-weight:800;
  font-size:1.05rem;padding:.55rem 1.1rem;border-radius:999px;transform:rotate(-7deg);box-shadow:0 12px 24px -14px rgba(0,0,0,.4);
  animation:bob 5s ease-in-out infinite
}
/* Die wippende Sticker-Pille ist ausdruecklicher Wunsch des Vereins. */
@keyframes bob{0%,100%{transform:rotate(-7deg) translateY(0)}50%{transform:rotate(-7deg) translateY(-6px)}}
.mini-card{
  position:absolute;right:2%;bottom:6%;z-index:3;background:#fff;border-radius:var(--radius-sm);padding:.9rem 1.1rem;display:flex;gap:.7rem;align-items:center;
  box-shadow:var(--shadow);max-width:280px;font-size:.9rem;line-height:1.35
}
.mini-card .icon{width:2rem;height:2rem;color:#fff;background:var(--moss);border-radius:50%;padding:.4rem;stroke-width:2.4}
.mini-card b{display:block;font-family:var(--font-display);font-size:1rem;font-weight:700}
.mini-card span{color:var(--muted);font-size:.82rem}
@media (max-width:900px){
  .hero .container{grid-template-columns:1fr}
  .hero__art{min-height:0;height:420px;max-width:520px}
}
@media (max-width:520px){.hero__art{height:340px}.mini-card{max-width:220px;font-size:.82rem}.sticker{font-size:.9rem}}


/* =====================================================================
   08  ANGEBOTE
   ===================================================================== */
.offers{display:grid;grid-template-columns:repeat(6,1fr);gap:1.3rem}
.offer{
  grid-column:span 2;background:var(--ground);border-radius:var(--radius);padding:1.8rem;display:flex;flex-direction:column;gap:.9rem;
  transition:transform .2s,box-shadow .2s;border:2px solid transparent
}
.offer:nth-child(-n+2){grid-column:span 3}
.offer:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line)}
.offer__icon{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;color:var(--moss-deep);background:var(--moss-soft)}
.offer__icon .icon{width:28px;height:28px;stroke-width:1.8}
.offer--reha .offer__icon{background:var(--moss-soft);color:var(--moss-deep)}
.offer--neuro .offer__icon{background:var(--sonne-soft);color:#8A6A12}
.offer--prev .offer__icon{background:var(--mandarine-soft);color:var(--mandarine-deep)}
.offer--kids .offer__icon{background:var(--beere-soft);color:var(--beere-deep)}
.offer--train .offer__icon{background:#E3ECF6;color:#2E5680}
.offer p{color:var(--ink-2);font-size:.97rem}
.offer__foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:.8rem;flex-wrap:wrap;padding-top:.6rem}
.pill{display:inline-flex;align-items:center;gap:.35rem;border-radius:999px;padding:.3rem .7rem;font-size:.76rem;font-weight:700;background:#fff;color:var(--moss-deep);border:1.5px solid var(--line)}
.pill .icon{width:.9em;height:.9em}
.offer__link{font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:.3rem;font-size:.92rem}
.offer__link .icon{width:1em;height:1em;transition:transform .2s}
.offer:hover .offer__link .icon{transform:translateX(3px)}
@media (max-width:960px){.offers{grid-template-columns:repeat(2,1fr)}.offer,.offer:nth-child(-n+2){grid-column:span 1}}
@media (max-width:600px){.offers{grid-template-columns:1fr}}


/* =====================================================================
   09  KURSPLAN (WOCHENPLAN)
   Die Spaltenzahl setzt der Abschnitt selbst, je nachdem wie viele
   Wochentage Termine haben.
   ===================================================================== */
.plan-head{display:flex;justify-content:space-between;align-items:end;gap:1.5rem;flex-wrap:wrap;margin-bottom:1.8rem}
.badge-example{display:inline-flex;align-items:center;gap:.4rem;background:var(--sonne-soft);color:#7A5A0A;border-radius:999px;padding:.4rem .9rem;font-size:.8rem;font-weight:700}
.badge-example .icon{width:1em;height:1em}
.plan{display:grid;grid-template-columns:repeat(5,1fr);gap:.8rem;overflow-x:auto}
.day{background:#fff;border-radius:var(--radius-sm);padding:1rem;min-width:150px;display:grid;gap:.5rem;align-content:start}
.day h3{font-size:1.05rem;color:var(--moss-deep);padding-bottom:.4rem;border-bottom:2px dashed var(--line);margin-bottom:.3rem}
.slot{border-radius:10px;padding:.55rem .7rem;font-size:.84rem;line-height:1.3;display:grid;gap:.1rem}
.slot time{font-weight:700;font-variant-numeric:tabular-nums;font-size:.78rem;opacity:.85}
.slot--reha{background:var(--moss-soft);color:var(--moss-deep)}
.slot--prev{background:var(--mandarine-soft);color:#8B4A16}
.slot--kids{background:var(--beere-soft);color:var(--beere-deep)}
.slot--train{background:#E3ECF6;color:#2E5680}
.legend{display:flex;flex-wrap:wrap;gap:1rem 1.6rem;margin-top:1.2rem;font-size:.85rem;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:.45rem}
.legend i{width:.8rem;height:.8rem;border-radius:4px;display:inline-block}
@media (max-width:900px){.plan{grid-template-columns:repeat(5,minmax(150px,1fr));padding-bottom:.5rem}}

/* Ergaenzung: Zusatzangaben und Status innerhalb eines Termins. */
.slot small{font-size:.76rem;opacity:.85;line-height:1.25}
.slot .pill{margin-top:.25rem;justify-self:start;background:rgba(255,255,255,.75);border-color:rgba(255,255,255,.9);color:inherit;font-size:.7rem}
.day > .lead{color:var(--muted)}


/* =====================================================================
   10  SCHRITTE
   ===================================================================== */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;position:relative;counter-reset:step}
.step{background:var(--ground);border-radius:var(--radius);padding:2rem 1.7rem 1.7rem;position:relative}
.step::before{
  counter-increment:step;content:counter(step);position:absolute;top:-1rem;left:1.5rem;width:2.6rem;height:2.6rem;border-radius:50%;
  background:var(--mandarine);color:#fff;font-family:var(--font-display);font-weight:800;font-size:1.3rem;display:grid;place-items:center;
  box-shadow:0 6px 0 var(--mandarine-soft)
}
.step h3{margin:.4rem 0 .5rem}
.step p{color:var(--ink-2);font-size:.97rem}
.step small{display:block;margin-top:.9rem;font-size:.82rem;color:var(--muted);background:#fff;border-radius:10px;padding:.55rem .75rem}
@media (max-width:860px){.steps{grid-template-columns:1fr;gap:2.2rem}}


/* =====================================================================
   11  KINDER UND FAMILIE
   ===================================================================== */
.kids{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.kids .eyebrow{color:var(--beere)}
.kids h2 .swash svg path{stroke:var(--beere-soft)}
.kids__art{position:relative;min-height:380px}
.kids__art .blob{position:absolute;inset:0 8% 0 0;border-radius:52% 48% 46% 54% / 44% 52% 48% 56%;background:linear-gradient(150deg,var(--beere-soft),#FDF3F7 55%,var(--sonne-soft))}
.kids__art .blob::before{background:radial-gradient(circle at 30% 30%,rgba(201,79,124,.3),transparent 55%),radial-gradient(circle at 80% 75%,rgba(246,200,95,.5),transparent 50%)}
.kids__art .sticker{left:auto;right:0;top:auto;bottom:8%;background:var(--beere);color:#fff;transform:rotate(5deg);animation:none}
.kids__list{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.9rem}
.kids__list li{display:flex;gap:.8rem;align-items:flex-start;background:#fff;border-radius:var(--radius-sm);padding:1rem 1.1rem}
.kids__list .icon{width:2rem;height:2rem;color:var(--beere-deep);background:var(--beere-soft);border-radius:50%;padding:.4rem;stroke-width:2}
.kids__list b{display:block;font-family:var(--font-display);font-size:1.08rem}
.kids__list span{color:var(--ink-2);font-size:.93rem}
@media (max-width:900px){.kids{grid-template-columns:1fr}.kids__art{min-height:300px;order:-1}}


/* =====================================================================
   12  MOTTO-BAND
   ===================================================================== */
.motto{text-align:center}
.motto .container{display:grid;justify-items:center;gap:1.2rem;max-width:860px}
.motto blockquote{margin:0;font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,4.5vw,3.4rem);line-height:1.1;color:#fff;text-wrap:balance}
.motto blockquote em{font-style:normal;color:var(--sonne)}
.motto p{color:#D7E7DA;font-size:1.05rem;max-width:56ch}
.motto .heart{width:3rem;height:3rem;color:var(--sonne);stroke-width:1.6}


/* =====================================================================
   13  WISSEN UND HANDOUTS
   ===================================================================== */
.knowledge{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,4vw,4rem);align-items:start}
/* Handouts abgeschaltet: "Wissenswertes" nimmt die ganze Breite ein. */
.knowledge--nur-wissen{grid-template-columns:minmax(0,1fr);max-width:62rem;margin-inline:auto}
.handouts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.handouts a{
  display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.1rem .7rem .9rem;background:#fff;border-radius:999px;border:1.5px solid var(--line);
  text-decoration:none;color:var(--ink);font-weight:600;font-size:.92rem;transition:border-color .2s,transform .2s
}
.handouts a:hover{border-color:var(--moss);transform:translateY(-2px)}
.handouts .icon{color:var(--moss);width:1.1rem;height:1.1rem}

/* Uebungsblaetter als Kreise mit Bild und Bezeichnung */
.handouts--kreise{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(8.6rem,1fr));
  gap:1.6rem 1.1rem;align-items:start
}
.handouts--kreise li:not([hidden]){display:flex;justify-content:center}
/* "Alles anzeigen" (frontend.js kuerzt lange Listen) bekommt eine eigene Zeile. */
.handouts--kreise li.is-mehr{grid-column:1/-1;justify-content:flex-start}
.handouts .handout-kreis{
  display:flex;flex-direction:column;align-items:center;gap:.25rem;text-align:center;
  padding:0;background:none;border:0;border-radius:var(--radius-sm);
  width:100%;max-width:11rem;color:var(--ink);text-decoration:none;transition:transform .25s
}
.handouts .handout-kreis:hover{transform:translateY(-4px);color:var(--ink)}
/* Aeusserer Kreis: Rahmen, Schatten und Marke. Innerer Kreis: Bild mit Zoom. */
.handout-kreis__bild{
  position:relative;display:block;width:100%;aspect-ratio:1;border-radius:50%;margin-bottom:.55rem;
  box-shadow:0 0 0 5px var(--surface),0 18px 32px -20px rgba(31,45,37,.55);transition:box-shadow .25s
}
.handout-kreis__foto{
  position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;border-radius:50%;
  background:linear-gradient(150deg,var(--moss-soft),#EAF3E6 60%,var(--sonne-soft))
}
.handout-kreis__foto img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.handouts .handout-kreis:hover .handout-kreis__bild{box-shadow:0 0 0 5px var(--moss-soft),0 22px 36px -20px rgba(31,45,37,.6)}
.handouts .handout-kreis:hover .handout-kreis__foto img{transform:scale(1.06)}
.handout-kreis__bild--2 .handout-kreis__foto{background:linear-gradient(150deg,var(--mandarine-soft),#FFF4EA 60%,var(--sonne-soft))}
.handout-kreis__bild--3 .handout-kreis__foto{background:linear-gradient(150deg,var(--beere-soft),#FCEFF4 60%,var(--moss-soft))}
.handout-kreis__bild--4 .handout-kreis__foto{background:linear-gradient(150deg,var(--sonne-soft),#FFF8E6 60%,var(--mandarine-soft))}
.handouts .handout-kreis__symbol{width:38%;height:38%;color:var(--moss-deep);stroke-width:1.6}
.handout-kreis__bild--2 .handout-kreis__symbol{color:var(--mandarine-ink)}
.handout-kreis__bild--3 .handout-kreis__symbol{color:var(--beere-deep)}
.handout-kreis__bild--4 .handout-kreis__symbol{color:var(--sonne-ink)}
.handout-kreis__marke{
  position:absolute;right:2%;bottom:4%;display:grid;place-items:center;
  min-width:2.3rem;height:2.3rem;padding:0 .45rem;border-radius:999px;
  background:var(--mandarine);color:var(--ink);border:3px solid var(--surface);
  font-family:var(--font-body);font-size:.7rem;font-weight:800;letter-spacing:.04em;line-height:1
}
.handouts .handout-kreis__marke .icon{width:1rem;height:1rem;color:var(--ink)}
/* Dunkle Flaeche "Moosgruen": helle Schrift unter den Kreisen, Knoepfe und Karten dunkel auf Weiss. */
.section--moss .handouts .handout-kreis,
.section--moss .handouts .handout-kreis:hover{color:#fff}
.section--moss .handout-kreis__zusatz{color:#D7E7DA}
.section--moss .handouts a:not(.handout-kreis){color:var(--ink)}
.section--moss .know-card{color:var(--ink)}
.section--moss .know-card a{color:var(--moss)}
.section--moss .is-mehr .btn--outline{color:#fff;border-color:rgba(255,255,255,.7)}
.section--moss .is-mehr .btn--outline:hover{background:#fff;color:var(--moss-deep)}
.handout-kreis__titel{font-family:var(--font-display);font-weight:700;font-size:1.08rem;line-height:1.15;overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:10 4 4}
.handout-kreis__zusatz{color:var(--ink-2);font-size:.84rem;font-weight:500}
/* Transparenter Rahmen: normal unsichtbar, im Kontrastmodus des Systems sichtbar. */
.handouts .handout-kreis:focus-visible{outline:3px solid transparent;outline-offset:4px}
.handouts .handout-kreis:focus-visible .handout-kreis__bild{box-shadow:0 0 0 5px var(--surface),0 0 0 8px var(--mandarine)}
@media (max-width:520px){
  .handouts--kreise{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem .9rem}
  .handouts .handout-kreis{max-width:8.75rem}
  .handout-kreis__titel{font-size:1rem}
}
.know-card{background:#fff;border-radius:var(--radius);padding:1.5rem;display:grid;gap:.5rem;margin-bottom:1rem}
.know-card h3{font-size:1.2rem}
.know-card p{color:var(--ink-2);font-size:.95rem}
.know-card a{font-weight:700;text-decoration:none;display:inline-flex;gap:.35rem;align-items:center;font-size:.92rem}
.know-card a .icon{width:1em;height:1em}
.know-card--lsb{background:var(--moss-soft)}
@media (max-width:900px){.knowledge{grid-template-columns:1fr}}


/* =====================================================================
   14  VEREIN, STELLEN-HINWEIS, PARTNER, ZAHLEN
   ===================================================================== */
.club{display:grid;grid-template-columns:repeat(12,1fr);gap:1.3rem}
.club__about{grid-column:span 7;background:var(--ground);border-radius:var(--radius);padding:2.2rem}
.club__about p{color:var(--ink-2);margin-top:.8rem}
.club__about dl{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem 1.5rem;margin:1.6rem 0 0}
.club__about dt{font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700}
.club__about dd{margin:0;font-weight:600}
.club__jobs{grid-column:span 5;background:var(--sonne-soft);border-radius:var(--radius);padding:2.2rem;display:flex;flex-direction:column;gap:.8rem;position:relative;overflow:hidden}
.club__jobs .eyebrow{color:#8A6A12}
.club__jobs p{color:var(--ink-2)}
.club__jobs .btn{align-self:flex-start;margin-top:.4rem}
.club__jobs .sun{position:absolute;right:-30px;top:-30px;width:150px;color:var(--sonne);opacity:.8;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round}
.partner{grid-column:span 4;background:var(--ground);border-radius:var(--radius);padding:1.6rem;display:grid;gap:.4rem;align-content:start}
.partner span{font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700}
.partner b{font-family:var(--font-display);font-size:1.15rem;font-weight:700}
.partner p{font-size:.9rem;color:var(--ink-2)}
/* Link zur Webseite des Partners - wie die Links der Wissenskarten */
.partner__link{justify-self:start;display:inline-flex;align-items:center;gap:.35rem;margin-top:.3rem;font-weight:700;font-size:.92rem;color:var(--moss);text-decoration:none;overflow-wrap:anywhere}
.partner__link:hover{color:var(--moss-deep);text-decoration:underline}
.partner__link .icon{width:1em;height:1em;flex:none}
.section--moss .partner__link{color:var(--moss)}
.partner--shield{background:var(--moss-soft)}
.partner--shield .icon{width:2rem;height:2rem;color:var(--moss-deep);stroke-width:1.6;margin-bottom:.3rem}
@media (max-width:900px){.club__about,.club__jobs,.partner{grid-column:span 12}}

/* Zahlen-Abschnitt: nutzt dieselben Karten wie die Partner. */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1.3rem}
.facts .partner{grid-column:auto;gap:.3rem}
.facts .partner b{font-family:var(--font-display);font-weight:800;font-size:clamp(2.1rem,4vw,3rem);line-height:1}
.facts .partner b small{font-size:.45em;font-weight:700;margin-left:.1em}
.facts .partner strong{font-family:var(--font-display);font-size:1.08rem;font-weight:700}
.section--white .facts .partner{background:var(--ground)}
.section--ground .facts .partner,
.section--rose .facts .partner{background:var(--surface)}


/* =====================================================================
   15  FREIER TEXT (RICHTEXT)
   Ausgabe des Editors. Nur Grundformen, damit Redakteurinnen und
   Redakteure nichts kaputt gestalten koennen.
   ===================================================================== */
.richtext{color:var(--ink-2)}
.richtext>*:first-child{margin-top:0}
.richtext>*:last-child{margin-bottom:0}
.richtext p,.richtext ul,.richtext ol,.richtext blockquote,.richtext table{margin:0 0 1.1rem}
.richtext h2{margin:2.2rem 0 .8rem;color:var(--ink)}
.richtext h3{margin:1.8rem 0 .6rem;color:var(--ink)}
.richtext ul,.richtext ol{padding-left:1.35rem}
.richtext li{margin-bottom:.45rem}
.richtext blockquote{border-left:4px solid var(--moss-soft);padding-left:1rem;color:var(--ink-2);font-style:italic}
.richtext img{border-radius:var(--radius-sm)}
.richtext hr{border:none;border-top:1px solid var(--line);margin:2.2rem 0}
.richtext a{font-weight:600}
.richtext strong{color:var(--ink)}
.richtext table{width:100%;border-collapse:collapse;font-size:.94rem}
.richtext th,.richtext td{border:1px solid var(--line);padding:.55rem .75rem;text-align:left;vertical-align:top}
.richtext th{background:var(--moss-soft);color:var(--moss-deep);font-weight:700}
.richtext--schmal{max-width:68ch}
.richtext--normal{max-width:84ch}
.richtext--breit{max-width:none}
@media (max-width:600px){.richtext table{display:block;overflow-x:auto}}


/* =====================================================================
   16  KONTAKT, LAGEPLAN UND FORMULAR
   ===================================================================== */
.contact{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,4vw,4rem);align-items:start}
.contact__card{background:var(--moss);color:#fff;border-radius:var(--radius);padding:2rem;position:relative;overflow:hidden}
.contact__card h3{font-size:1.5rem;margin-bottom:1rem}
.contact__card ul{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.contact__card li{display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:start}
.contact__card .icon{width:2rem;height:2rem;background:rgba(255,255,255,.14);border-radius:50%;padding:.42rem;color:var(--sonne);stroke-width:2}
.contact__card b{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;color:#BFD8C4;font-weight:700}
/* Nur Textlinks weiss - der weisse Anruf-Knopf behaelt seine dunkle Schrift. */
.contact__card a:not(.btn){color:#fff;font-weight:600}
.contact__card .btn{margin-top:1.5rem}
/* Symbol im Knopf wie in jedem anderen Knopf, nicht als Kreis der Kontaktliste. */
.contact__card .btn .icon{width:1.1em;height:1.1em;padding:0;background:none;border-radius:0;color:var(--mandarine-deep);stroke-width:2.2}
.contact__card .btn:hover .icon{color:currentColor}
.contact__card .pulse{position:absolute;right:-10px;bottom:-14px;width:180px;color:#fff;opacity:.12}
.map{margin-top:1.2rem;border-radius:var(--radius);overflow:hidden;position:relative;background:#E9EFE4}
.map svg{display:block;width:100%;height:auto}
.map .ph__note{left:1rem;bottom:1rem;transform:none}
.form{background:#fff;border-radius:var(--radius);padding:clamp(1.5rem,3vw,2.4rem);display:grid;gap:1rem;box-shadow:var(--shadow)}
.form h3{font-size:1.5rem}
.form .row{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.field{display:grid;gap:.35rem}
.field label{font-size:.85rem;font-weight:700;color:var(--ink-2)}
.field input,.field select,.field textarea{font:inherit;font-size:.97rem;padding:.8rem 1rem;border:2px solid var(--line);border-radius:14px;background:var(--ground);color:var(--ink);width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--moss);background:#fff}
.field textarea{min-height:120px;resize:vertical}
.check{display:flex;gap:.6rem;align-items:flex-start;font-size:.84rem;color:var(--ink-2)}
.check input{margin-top:.25rem;accent-color:var(--moss)}
.form-note{background:var(--moss-soft);border-radius:14px;padding:.9rem 1rem;font-size:.92rem;color:var(--moss-deep);font-weight:600}
@media (max-width:900px){.contact{grid-template-columns:1fr}}
@media (max-width:560px){.form .row{grid-template-columns:1fr}}

/* Ergaenzung: Tastaturfokus im Formular deutlich sichtbar machen. */
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid var(--mandarine);outline-offset:2px}
.check input:focus-visible{outline:3px solid var(--mandarine);outline-offset:2px}
/* Fehlerhinweis direkt unter dem Feld. */
.field small{font-size:.82rem;color:var(--beere-deep);font-weight:600}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:var(--beere)}
/* Das Honigtopf-Feld gegen Spam bleibt fuer Menschen unsichtbar. */
.form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}


/* =====================================================================
   17  FUSSBEREICH
   ===================================================================== */
.footer{background:var(--moss-deep);color:#CFE0D3;padding-block:4rem 2rem;font-size:.92rem;position:relative;--wave-fill:#23513A}
.footer .grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem}
.footer .brand{color:#fff}
.footer .brand__mark{background:#fff;box-shadow:none}
.footer .brand__mark svg{stroke:var(--moss-deep)}
.footer .brand__mark svg .sonne{stroke:var(--mandarine)}
.footer .brand__sub{color:#A9C7B0}
.footer h4{font-family:var(--font-body);font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;color:#fff;margin-bottom:.9rem;font-weight:700}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.footer a{color:#CFE0D3;text-decoration:none}
.footer a:hover{color:#fff;text-decoration:underline}
.footer address{font-style:normal;margin-top:1rem;line-height:1.7}
.footer .bottom{margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.14);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem;font-size:.82rem;color:#A9C7B0}
/* Zugang zur Verwaltung: bewusst leise, aber immer an derselben Stelle. */
.footer__login{
  display:inline-flex;align-items:center;gap:.4rem;color:#8FB39A;
  border:1px solid rgba(255,255,255,.18);border-radius:999px;
  padding:.25rem .8rem;font-size:.78rem;text-decoration:none;
  transition:color .2s,border-color .2s,background-color .2s
}
.footer__login .icon{width:.95rem;height:.95rem}
.footer__login:hover,.footer__login:focus-visible{
  color:#fff;border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.08);text-decoration:none
}
@media (max-width:900px){.footer .grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer .grid{grid-template-columns:1fr}.footer .bottom{flex-direction:column;align-items:flex-start}}


/* =====================================================================
   18  GALERIE
   Albumkarten, Bildraster (Raster, Mauerwerk, Reihe) und eine Lightbox
   ohne Fremdbibliothek.
   ===================================================================== */

/* --- Albumuebersicht ------------------------------------------------ */
.gallery__albums{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.3rem}
.album-card{
  display:grid;gap:.85rem;align-content:start;background:var(--surface);border-radius:var(--radius);
  padding:.8rem .8rem 1.4rem;text-decoration:none;color:var(--ink);border:2px solid transparent;
  transition:transform .2s,box-shadow .2s,border-color .2s
}
.section--white .album-card{background:var(--ground)}
.album-card:hover,.album-card:focus-visible{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line);color:var(--ink)}
.album-card__cover{
  display:block;position:relative;aspect-ratio:4/3;overflow:hidden;
  border-radius:var(--radius-sm);background:var(--moss-soft)
}
.album-card__cover img{transition:transform .35s ease}
.album-card:hover .album-card__cover img{transform:scale(1.04)}
.album-card__cover--leer{display:grid;place-items:center;background:linear-gradient(150deg,var(--moss-soft),#EAF3E6 60%,var(--sonne-soft))}
.album-card__cover--leer .icon{width:2.4rem;height:2.4rem;color:var(--moss-deep);opacity:.55}
.album-card__body{display:grid;gap:.3rem;padding-inline:.55rem}
.album-card__body b{font-family:var(--font-display);font-size:1.15rem;font-weight:700;line-height:1.15}
.album-card__body small{font-size:.8rem;font-weight:600;color:var(--muted)}
.album-card__text{font-size:.92rem;color:var(--ink-2);line-height:1.5}

/* --- Bildraster ----------------------------------------------------- */
.gallery__grid{display:grid;gap:.9rem;align-items:start;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.gallery__grid--raster{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
/* Im Raster sind die Bilder quadratisch beschnitten. Die Quadratur liegt
   auf dem Bild, nicht auf der Kachel – sonst haette eine Abbildung mit
   Unterschrift keinen Platz mehr fuer ihren Text. */
.gallery__grid--raster .gallery__item img{aspect-ratio:1;height:auto}

/* Mauerwerk: die Bilder behalten ihr eigenes Hochkant- oder Querformat. */
.gallery__grid--mauerwerk{display:block;columns:4 210px;column-gap:.9rem}
.gallery__grid--mauerwerk .gallery__item{display:block;width:100%;margin:0 0 .9rem;break-inside:avoid}
.gallery__grid--mauerwerk .gallery__item img{height:auto}

/* Reihe: waagerecht scrollbares Band, gut fuer schmale Bildschirme. */
.gallery__grid--reihe{
  grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);
  overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.7rem
}
.gallery__grid--reihe .gallery__item{scroll-snap-align:start}
.gallery__grid--reihe .gallery__item img{aspect-ratio:1;height:auto}

.gallery__item{
  position:relative;display:block;margin:0;overflow:hidden;border-radius:var(--radius-sm);
  background:var(--moss-soft);text-decoration:none;color:inherit
}
a.gallery__item img{transition:transform .35s ease}
a.gallery__item:hover img,a.gallery__item:focus-visible img{transform:scale(1.05)}
/* Bildunterschrift: bei anklickbaren Bildern als Band im Bild, bei
   reinen Abbildungen als Zeile darunter. */
.gallery__caption{display:block;font-size:.83rem;line-height:1.35}
a.gallery__item .gallery__caption{
  position:absolute;left:0;right:0;bottom:0;z-index:1;padding:1.6rem .8rem .6rem;color:#fff;font-weight:600;
  background:linear-gradient(180deg,rgba(31,45,37,0),rgba(31,45,37,.82))
}
figure.gallery__item .gallery__caption{background:var(--surface);color:var(--ink-2);padding:.6rem .8rem .7rem}
.section--white figure.gallery__item .gallery__caption{background:var(--ground)}
.gallery__foot{margin-top:2rem;display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.4rem}
.gallery__mehr{font-size:.9rem;color:var(--muted);font-weight:600}

/* --- Lightbox ------------------------------------------------------- */
.lightbox{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:clamp(4rem,8vw,5.5rem) clamp(4.2rem,9vw,7rem);background:var(--overlay)
}
.lightbox[hidden]{display:none}
/* Die Buehne fuellt den freien Platz; das Bild passt sich darin ein.
   Feste Groesse statt "nach Inhalt", sonst faellt das Bild in manchen
   Browsern auf null Pixel zusammen. */
.lightbox__stage{
  flex:1 1 auto;display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;min-width:0;min-height:0
}
.lightbox__stage img{
  display:block;width:auto;height:auto;max-width:100%;max-height:100%;
  border-radius:var(--radius-sm);background:#1F2D25;box-shadow:0 30px 70px -30px rgba(0,0,0,.85)
}
.lightbox__nav,.lightbox__close{
  position:absolute;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;cursor:pointer;
  border:2px solid rgba(255,255,255,.32);background:rgba(255,255,255,.12);color:#fff;
  transition:background .18s,border-color .18s
}
.lightbox__nav:hover,.lightbox__close:hover{background:var(--mandarine);border-color:var(--mandarine);color:#fff}
.lightbox__nav .icon,.lightbox__close .icon{width:24px;height:24px;stroke-width:2.2}
.lightbox__nav--prev{left:clamp(.7rem,2.5vw,1.8rem);top:50%;transform:translateY(-50%)}
.lightbox__nav--prev .icon{transform:rotate(180deg)}
.lightbox__nav--next{right:clamp(.7rem,2.5vw,1.8rem);top:50%;transform:translateY(-50%)}
.lightbox__close{right:clamp(.7rem,2.5vw,1.8rem);top:clamp(.7rem,2.5vw,1.8rem)}
.lightbox__nav[disabled],.lightbox__nav[aria-disabled="true"]{opacity:.35;cursor:default}
.lightbox__caption{
  position:absolute;left:50%;bottom:clamp(1rem,3.5vw,2.2rem);transform:translateX(-50%);
  max-width:min(70ch,92%);text-align:center;color:#EAF1E9;font-size:.92rem;line-height:1.4;
  background:rgba(0,0,0,.38);padding:.5rem 1rem;border-radius:999px
}
.lightbox__caption:empty{display:none}
/* Tastaturhinweis. Bringt die Vorlage ein eigenes Element mit, wird der
   erzeugte Hinweis ausgeblendet. */
.lightbox::after{
  content:"Mit ← und → blättern · Esc schließt";
  position:absolute;left:50%;top:clamp(.9rem,3vw,1.9rem);transform:translateX(-50%);
  color:rgba(234,241,233,.75);font-size:.78rem;font-weight:600;letter-spacing:.02em;white-space:nowrap
}
.lightbox:has(.lightbox__hint)::after{content:none}
.lightbox__hint{
  position:absolute;left:50%;top:clamp(.9rem,3vw,1.9rem);transform:translateX(-50%);margin:0;
  color:rgba(234,241,233,.75);font-size:.78rem;font-weight:600
}
@media (max-width:700px){.lightbox::after,.lightbox__hint{display:none}}


/* =====================================================================
   19  TEAM
   Karten mit organisch abgerundetem Foto. Die Spaltenzahl gibt der
   Abschnitt als --team-spalten mit.
   ===================================================================== */
.team__grid{display:grid;gap:1.4rem;grid-template-columns:repeat(var(--team-spalten,3),minmax(0,1fr))}
.team__grid--reihe{
  grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(250px,1fr);
  overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.7rem
}
.team__grid--reihe .member{scroll-snap-align:start}
.member{
  background:var(--surface);border-radius:var(--radius);padding:1.1rem 1.1rem 1.5rem;
  display:grid;gap:1rem;align-content:start;border:2px solid transparent;
  transition:transform .2s,box-shadow .2s,border-color .2s
}
.section--white .member{background:var(--ground)}
.member:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line)}
.member__photo{
  position:relative;aspect-ratio:1;overflow:hidden;isolation:isolate;
  border-radius:58% 42% 55% 45% / 48% 56% 44% 52%;
  background:linear-gradient(150deg,var(--moss-soft),#EAF3E6 60%,var(--sonne-soft))
}
/* Kleine Formvariationen, damit die Reihe lebendig wirkt. */
.member:nth-child(2n) .member__photo{border-radius:45% 55% 52% 48% / 55% 45% 55% 45%}
.member:nth-child(3n) .member__photo{border-radius:52% 48% 46% 54% / 44% 52% 48% 56%}
.member__photo--leer{display:grid;place-items:center}
.member__monogramm{font-family:var(--font-display);font-weight:800;font-size:2.7rem;color:var(--moss-deep);opacity:.5;letter-spacing:.02em}
.member__body{display:grid;gap:.5rem}
.member__body h3{font-size:1.2rem}
.member__body p{color:var(--ink-2);font-size:.94rem}
.member__role{color:var(--moss);font-weight:700;font-size:.95rem}
.member__quali{list-style:none;margin:.15rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
.member__quali .pill{font-size:.72rem;padding:.25rem .65rem}
.section--white .member .pill{background:var(--surface)}
.member__contact{display:flex;flex-wrap:wrap;gap:.35rem 1rem;font-size:.88rem;margin-top:.2rem}
.member__contact a{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;text-decoration:none;overflow-wrap:anywhere}
.member__contact a:hover{text-decoration:underline}
.member__contact .icon{width:1.05rem;height:1.05rem;color:var(--moss);flex:none}
.team__foot{margin-top:2.2rem;display:flex;justify-content:center}


/* =====================================================================
   20  STELLENANZEIGEN
   Uebersicht als Karten oder Liste, Detailseite mit Eckdatenkasten.
   ===================================================================== */
.jobs{display:grid;gap:1.3rem}
.jobs--karten{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.jobs--liste{grid-template-columns:1fr}
.job-card{
  background:var(--surface);border-radius:var(--radius);padding:1.7rem;display:flex;flex-direction:column;gap:.85rem;
  border:2px solid transparent;transition:transform .2s,box-shadow .2s,border-color .2s
}
.section--white .job-card{background:var(--ground)}
.job-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line)}
/* Auf /stellen ist der Titel ein h2, im Startseiten-Abschnitt ein h3 - beide gleich gestalten. */
.job-card{min-width:0}
.job-card h2,.job-card h3{font-size:1.25rem;line-height:1.15;overflow-wrap:break-word;hyphens:auto}
.job-card h2 a,.job-card h3 a{color:var(--ink);text-decoration:none}
.job-card h2 a:hover,.job-card h3 a:hover{color:var(--moss-deep);text-decoration:underline}
.job-card p{color:var(--ink-2);font-size:.96rem}
.job-card .btn{align-self:flex-start;margin-top:auto}
.job-card__meta{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font-size:.87rem;font-weight:600;color:var(--muted)}
.job-card__meta li{display:inline-flex;align-items:center;gap:.4rem}
.job-card__meta .icon{width:1.05rem;height:1.05rem;color:var(--moss)}
/* justify-self sorgt dafuer, dass die Pille auch im Kopfbereich der
   Detailseite (Raster) nur so breit wird wie ihr Text. */
.job-badge{
  display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start;justify-self:start;margin:0;
  background:var(--mandarine-soft);color:var(--mandarine-ink);border-radius:999px;
  padding:.35rem .9rem;font-size:.78rem;font-weight:700;letter-spacing:.01em
}
.section-head--center .job-badge{justify-self:center}
.job-badge .icon{width:.95em;height:.95em}
/* Beschaeftigungsarten farblich unterscheiden. */
.job-badge--minijob,.job-badge--honorar{background:var(--mandarine-soft);color:var(--mandarine-ink)}
.job-badge--teilzeit,.job-badge--vollzeit{background:var(--moss-soft);color:var(--moss-deep)}
.job-badge--ehrenamt{background:var(--beere-soft);color:var(--beere-deep)}
.job-badge--ausbildung,.job-badge--praktikum{background:var(--blau-soft);color:var(--blau-ink)}

/* Listendarstellung: auf breiten Bildschirmen eine Zeile je Stelle. */
@media (min-width:820px){
  .jobs--liste .job-card{flex-direction:row;flex-wrap:wrap;align-items:center;gap:.7rem 1.4rem;padding:1.5rem 1.8rem}
  /* Die Pille der Beschaeftigungsart ist ebenfalls ein Absatz und darf
     deshalb nicht die ganze Zeile fuellen. */
  .jobs--liste .job-card .job-badge{order:1;flex:0 0 auto}
  .jobs--liste .job-card h3{order:2;flex:1 1 16rem}
  .jobs--liste .job-card .btn{order:3;margin:0 0 0 auto;align-self:center}
  .jobs--liste .job-card p:not(.job-badge){order:4;flex:1 1 100%}
  .jobs--liste .job-card .job-card__meta{order:5;flex:1 1 100%}
}

/* --- Detailseite ---------------------------------------------------- */
.job-detail{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,4vw,3.5rem);align-items:start}
.job-detail__text h2{font-size:1.5rem;margin:2.2rem 0 .8rem}
.job-detail__text>h2:first-child{margin-top:0}
.job-detail__text p,.job-detail__text ul,.job-detail__text ol{margin:0 0 1.1rem;color:var(--ink-2)}
.job-detail__text ul,.job-detail__text ol{padding-left:1.35rem}
.job-detail__text li{margin-bottom:.45rem}
.job-detail__text .hero__actions{margin-top:2rem}
.job-detail__image{margin-bottom:1.8rem;border-radius:var(--radius);overflow:hidden;background:var(--moss-soft)}
.job-detail__image img,.job-detail__photo{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.job-detail__facts{
  background:var(--ground);border-radius:var(--radius);padding:1.8rem;display:grid;gap:1rem;align-content:start;
  position:sticky;top:calc(var(--header-height) + 1.2rem)
}
.section--ground .job-detail__facts,
.section--rose .job-detail__facts{background:var(--surface)}
.job-detail__facts h2{font-size:1.3rem;margin:0}
.job-detail__facts h3{font-size:1.05rem;margin:.5rem 0 0}
.job-detail__facts dl{margin:0;display:grid;gap:.85rem}
.job-detail__facts dl>div{display:grid;gap:.15rem}
.job-detail__facts dt{font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700}
.job-detail__facts dd{margin:0;font-weight:600}
.job-detail__facts .btn{justify-content:center}
.job-detail__contact{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;font-size:.94rem}
.job-detail__contact li{display:flex;align-items:center;gap:.7rem}
.job-detail__contact .icon{width:1.9rem;height:1.9rem;flex:none;padding:.4rem;border-radius:50%;background:var(--moss-soft);color:var(--moss-deep);stroke-width:2}
.job-detail__contact a{font-weight:600;text-decoration:none;overflow-wrap:anywhere}
.job-detail__contact a:hover{text-decoration:underline}


/* =====================================================================
   21  KARTE MIT EINWILLIGUNG
   Erst nach ausdruecklicher Zustimmung werden Kacheln von
   OpenStreetMap geladen. Vorher steht hier eine erklaerende Flaeche.
   ===================================================================== */
.map{min-height:220px}
.map__link{text-decoration:none;color:var(--moss-deep);font-weight:700;transition:background .18s,color .18s}
.map__link:hover{background:#fff;color:var(--moss-deep)}
.map__link .icon{color:var(--mandarine-deep)}

.map__consent{
  position:relative;display:grid;place-items:center;min-height:260px;text-align:center;
  padding:clamp(1.2rem,3vw,2.2rem);
  background:linear-gradient(150deg,var(--moss-soft),#EAF3E6 60%,var(--sonne-soft))
}
.map__consent-inner{
  display:grid;gap:.75rem;justify-items:center;max-width:46ch;
  background:rgba(255,255,255,.93);border-radius:var(--radius-sm);padding:1.4rem 1.5rem;box-shadow:var(--shadow)
}
.map__consent-inner .icon{width:2.2rem;height:2.2rem;padding:.45rem;border-radius:50%;background:var(--moss-soft);color:var(--moss-deep);stroke-width:2}
.map__consent-inner b,.map__consent-inner strong{font-family:var(--font-display);font-size:1.12rem;font-weight:700;color:var(--ink)}
.map__consent-inner p{font-size:.9rem;color:var(--ink-2);line-height:1.5}
.map__consent-inner small{font-size:.8rem;color:var(--muted)}
.map__consent-inner .btn{margin-top:.2rem}

/* Seitenverhaeltnis statt Mindesthoehe: eine Mindesthoehe wuerde ueber
   das Seitenverhaeltnis in eine Mindestbreite umgerechnet und die Karte
   auf schmalen Handys ueber den Rand schieben. */
.map__canvas{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;background:#E9EFE4}
.map__tiles{position:absolute;inset:0;margin:0;padding:0;list-style:none;line-height:0}
.map__tiles img{display:block;max-width:none;border:0;-webkit-user-drag:none;user-select:none}
.map__marker{
  position:absolute;left:50%;top:50%;z-index:2;width:38px;height:38px;margin:-42px 0 0 -19px;
  color:var(--mandarine);pointer-events:none;filter:drop-shadow(0 6px 8px rgba(31,45,37,.35))
}
.map__marker svg{display:block;width:100%;height:100%}
.map__marker::after{content:"";position:absolute;left:50%;top:100%;width:18px;height:7px;margin-top:-3px;transform:translateX(-50%);border-radius:50%;background:rgba(31,45,37,.22)}
.map__controls{position:absolute;right:.7rem;top:.7rem;z-index:3;display:grid;gap:.35rem}
.map__controls button,.map__controls a{
  width:42px;height:42px;display:grid;place-items:center;border-radius:12px;cursor:pointer;text-decoration:none;
  border:1.5px solid var(--line);background:rgba(255,255,255,.95);color:var(--ink);
  font-family:var(--font-display);font-weight:800;font-size:1.3rem;line-height:1;
  box-shadow:0 6px 14px -10px rgba(31,45,37,.6);transition:background .18s,color .18s,border-color .18s
}
.map__controls button:hover,.map__controls a:hover{background:var(--moss);border-color:var(--moss);color:#fff}
.map__controls .icon{width:1.2rem;height:1.2rem}
.map__attribution{
  position:absolute;left:0;right:0;bottom:0;z-index:3;margin:0;text-align:right;
  background:rgba(255,255,255,.86);color:var(--muted);font-size:.68rem;padding:.25rem .6rem
}
.map__attribution a{color:var(--ink-2);font-weight:600}


/* =====================================================================
   22  BROTKRUMEN, BLAETTERUNG, HINWEISKAESTEN
   ===================================================================== */

/* --- Brotkrumen ----------------------------------------------------- */
.breadcrumb{
  margin:0 0 1.6rem;font-size:.87rem;color:var(--muted);
  display:flex;flex-wrap:wrap;align-items:center;gap:.15rem .45rem
}
.breadcrumb ol,.breadcrumb ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:.15rem .45rem}
.breadcrumb li{display:inline-flex;align-items:center;gap:.45rem}
.breadcrumb ol li+li::before,.breadcrumb ul li+li::before{content:"›";color:var(--line);font-weight:700}
.breadcrumb a{color:var(--ink-2);text-decoration:none;font-weight:600}
.breadcrumb a:hover{color:var(--moss-deep);text-decoration:underline}
.breadcrumb [aria-current]{color:var(--ink);font-weight:700}

/* --- Blaetterung ---------------------------------------------------- */
.pagination{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.4rem;
  list-style:none;margin:2.6rem 0 0;padding:0;font-weight:700;font-size:.95rem;
  --pg-bg:var(--surface)
}
/* Auf weissem Grund heben sich die Felder durch den hellen Ton ab. Die
   Flaeche kommt aus einer Variablen, damit die aktive Seite sie
   zuverlaessig ueberschreiben kann. */
.section--white .pagination{--pg-bg:var(--ground)}
.pagination li{display:flex}
.pagination a,.pagination span{
  min-width:2.75rem;height:2.75rem;padding:0 .9rem;display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;border:1.5px solid var(--line);background:var(--pg-bg);color:var(--ink-2);text-decoration:none;
  transition:background .18s,border-color .18s,color .18s
}
.pagination a:hover{background:var(--moss-soft);border-color:var(--moss-soft);color:var(--moss-deep)}
.pagination .is-active,.pagination [aria-current]{background:var(--moss);border-color:var(--moss);color:#fff}
.pagination .is-disabled{opacity:.45;pointer-events:none}

/* --- Hinweiskaesten -------------------------------------------------- */
.notice{
  display:flex;align-items:flex-start;gap:.85rem;margin:0 0 1.7rem;
  background:var(--sonne-soft);border:1.5px solid rgba(246,200,95,.6);border-radius:var(--radius-sm);
  padding:1rem 1.2rem;font-size:.95rem;line-height:1.5;color:#6E5209
}
.notice .icon{width:1.4rem;height:1.4rem;flex:none;margin-top:.12rem;color:#B67A10}
.notice p{margin:0}
.notice p+p{margin-top:.5rem}
.notice ul{margin:.45rem 0 0;padding-left:1.2rem;display:grid;gap:.3rem}
.notice a{color:#6E5209;font-weight:700}
.notice strong{font-weight:700}
.notice--info{background:var(--blau-soft);border-color:#C4DDEA;color:#22536B}
.notice--info .icon,.notice--info a{color:#22536B}
.notice--ok{background:var(--moss-soft);border-color:#C3DDC6;color:var(--moss-deep)}
.notice--ok .icon,.notice--ok a{color:var(--moss-deep)}
.notice--warn{background:var(--mandarine-soft);border-color:#F6CDAB;color:var(--mandarine-ink)}
.notice--warn .icon,.notice--warn a{color:var(--mandarine-ink)}
.notice--error{background:var(--beere-soft);border-color:#EEC4D5;color:var(--beere-deep)}
.notice--error .icon,.notice--error a{color:var(--beere-deep)}


/* =====================================================================
   23  BERUEHRGERAETE UND REDUZIERTE BEWEGUNG
   ===================================================================== */

/* Mindestens 44 Pixel Trefferflaeche, wo mit dem Finger getippt wird. */
@media (pointer:coarse){
  .btn,.nav-toggle{min-height:44px}
  .nav a:not(.btn),
  .footer ul a,
  .footer .bottom a,
  .handouts a,
  .offer__link,
  .know-card a,
  .partner__link,
  .breadcrumb a,
  .member__contact a,
  .job-detail__contact a,
  .map__link{min-height:44px;display:inline-flex;align-items:center}
  .pagination a,.pagination span{min-width:44px;height:44px}
  .lightbox__nav,.lightbox__close,.map__controls button,.map__controls a{width:48px;height:48px}
  .check input{width:22px;height:22px;margin-top:.1rem}
  .chips li{min-height:38px}
}

/* Keine Bewegung, wenn das Betriebssystem das so wuenscht. Die
   Sticker-Pille steht dann still, bleibt aber sichtbar. */
@media (prefers-reduced-motion:reduce){
  .sticker{animation:none}
  .album-card__cover img,a.gallery__item img{transform:none}
  .handouts .handout-kreis:hover,
  .handouts .handout-kreis:hover .handout-kreis__foto img{transform:none}
  .gallery__grid--reihe,.team__grid--reihe{scroll-snap-type:none}
}


/* =====================================================================
   24  RESPONSIVE ERGAENZUNGEN DER NEUEN BAUSTEINE
   Geprueft fuer 360, 768, 1024 und 1440 Pixel Breite.
   ===================================================================== */
/* Die waagerecht scrollbaren Baender ("Reihe") behalten ihre Spalten in
   jeder Groesse - sie werden deshalb ueberall ausgenommen. */
@media (max-width:1024px){
  .job-detail{grid-template-columns:1fr}
  .job-detail__facts{position:static}
  .team__grid:not(.team__grid--reihe){grid-template-columns:repeat(3,minmax(0,1fr))}
  .gallery__grid--mauerwerk{columns:3 190px}
}
@media (max-width:768px){
  .gallery__albums{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
  .gallery__grid:not(.gallery__grid--reihe):not(.gallery__grid--mauerwerk){grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .gallery__grid--mauerwerk{columns:2 150px}
  .team__grid:not(.team__grid--reihe){grid-template-columns:repeat(2,minmax(0,1fr))}
  .jobs--karten{grid-template-columns:1fr}
  .lightbox{padding:3.6rem 1rem 5rem}
  .job-detail__facts{padding:1.4rem}
}
@media (max-width:560px){
  .gallery__albums{grid-template-columns:1fr}
  .team__grid:not(.team__grid--reihe){grid-template-columns:1fr}
  .gallery__grid:not(.gallery__grid--reihe):not(.gallery__grid--mauerwerk){grid-template-columns:repeat(2,minmax(0,1fr))}
  .member__contact{gap:.35rem .7rem}
}
@media (max-width:380px){
  .section{padding-block:3.2rem}
  .offer,.job-card,.step,.club__about,.club__jobs{padding:1.35rem}
  .job-detail__facts{padding:1.2rem}
  .gallery__grid--mauerwerk{columns:1}
  .lightbox__nav,.lightbox__close{width:44px;height:44px}
  .lightbox__nav--prev{left:.5rem}
  .lightbox__nav--next{right:.5rem}
  .lightbox__close{right:.5rem;top:.5rem}
}


/* =====================================================================
   25  DRUCKSTILE (Abschnittsnummer laut Inhaltsverzeichnis)
   Kursplan, Stellenanzeige und Rechtstexte sollen sauber auf Papier
   kommen: ohne Navigation, ohne Formulare, ohne Schmuckflaechen.
   ===================================================================== */
@media print{
  @page{margin:1.4cm}

  html{scroll-behavior:auto}
  body{background:#fff;color:#000;font-size:11pt;line-height:1.45}

  /* Alles, was auf Papier nicht hilft. */
  .header,
  .nav,
  .nav-toggle,
  .skip-link,
  .wave,
  .rays,
  .sticker,
  .mini-card,
  .ph__note,
  .hero__art,
  .kids__art,
  .club__jobs .sun,
  .contact__card .pulse,
  .form,
  .map,
  .lightbox,
  .lightbox[hidden],
  .pagination,
  .breadcrumb,
  .gallery__foot,
  .team__foot,
  .btn,
  .offer__link,
  .hero__actions,
  .presenter{display:none}

  /* Flaechen werden weiss, Text schwarz. */
  .section,
  .section--white,
  .section--ground,
  .section--rose,
  .section--moss{background:#fff;color:#000;padding-block:.5cm}
  .section--moss .lead,.section--moss .section-head p{color:#333}
  .motto blockquote{color:#000}
  .motto blockquote em{color:#000}
  .motto p{color:#333}

  h1{font-size:20pt}
  h2{font-size:15pt}
  h3{font-size:12pt}
  .lead{font-size:11.5pt;color:#222;max-width:none}
  a{color:#000;text-decoration:none}
  /* Bei Fliesstexten die Adresse hinter dem Link mitdrucken. */
  .richtext a[href^="http"]::after,
  .job-detail__text a[href^="http"]::after{content:" (" attr(href) ")";font-size:8.5pt;color:#444;word-break:break-all}

  /* Karten und Kaesten schlicht mit Linie statt Schatten. */
  .offer,.step,.know-card,.job-card,.member,.album-card,.partner,
  .club__about,.club__jobs,.day,.job-detail__facts,.notice,.form-note{
    background:#fff;border:1pt solid #999;border-radius:4pt;box-shadow:none;transform:none;break-inside:avoid
  }
  .contact__card{background:#fff;color:#000;border:1pt solid #999;box-shadow:none}
  .contact__card b{color:#444}
  .contact__card .icon{background:none;color:#000}
  .contact__card a{color:#000}

  /* Kursplan: farbige Bloecke bleiben farbig, sonst geht die
     Zuordnung der Kursarten verloren. */
  .plan{overflow:visible;gap:.25cm}
  .day{min-width:0;padding:.35cm;page-break-inside:avoid}
  .day h3{font-size:11pt;color:#000;border-bottom:1pt dashed #999}
  .slot{
    border:.5pt solid #888;padding:.2cm .25cm;font-size:9pt;
    -webkit-print-color-adjust:exact;print-color-adjust:exact
  }
  .slot .pill{border:.5pt solid #888;background:#fff;color:#000}
  .legend{margin-top:.4cm;font-size:9pt;color:#000}
  .legend i{border:.5pt solid #888;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .badge-example{background:#fff;border:.5pt solid #888;color:#000}

  /* Stellenanzeige: Eckdaten unter den Text, nichts klebt. */
  .job-detail{display:block}
  .job-detail__facts{position:static;margin-top:.6cm;padding:.4cm}
  .job-detail__image{display:none}
  .job-badge{background:#fff;border:.5pt solid #888;color:#000}
  .jobs{display:block}
  .job-card{margin-bottom:.4cm}

  /* Rechtstexte und freier Text. */
  .richtext,.richtext--schmal,.richtext--normal,.richtext--breit{max-width:none;color:#000}
  .richtext th{background:#eee;color:#000;-webkit-print-color-adjust:exact;print-color-adjust:exact}

  /* Galerie und Team drucken nur das Wesentliche. Aus dem scrollbaren
     Band wird auf Papier ein normales Raster. */
  .gallery__grid,.gallery__grid--raster,.gallery__grid--mauerwerk,.gallery__grid--reihe{
    display:grid;grid-auto-flow:row;grid-template-columns:repeat(3,1fr);columns:auto;gap:.3cm;overflow:visible
  }
  .gallery__item{break-inside:avoid;border:.5pt solid #999}
  .gallery__item img{aspect-ratio:auto}
  a.gallery__item .gallery__caption{position:static;background:none;color:#000;padding:.15cm .2cm}
  .team__grid,.team__grid--reihe{grid-auto-flow:row;grid-template-columns:repeat(2,1fr);gap:.4cm;overflow:visible}

  /* Fussbereich als schlichte Adresszeile. */
  .footer{background:#fff;color:#000;padding-block:.5cm 0;border-top:1pt solid #999}
  .footer .grid{display:block}
  .footer h4,.footer ul,.footer .bottom,.footer .brand__mark{display:none}
  .footer .brand,.footer .brand__sub{color:#000}
  .footer address{margin:.2cm 0 0;font-size:10pt}

  /* Ueberschriften nicht allein am Seitenende stehen lassen. */
  h1,h2,h3{break-after:avoid;page-break-after:avoid}
  p,li{orphans:3;widows:3}
}


/* =====================================================================
   26  UEBERSICHT ALLER CSS-VARIABLEN
   ---------------------------------------------------------------------
   Alle Variablen sind in Abschnitt 01 unter :root definiert. Wer die
   Website umfaerbt, aendert nur dort – hier steht, wo die Farbe wirkt.

   FARBEN – SCHRIFT UND FLAECHE
   --ink            #1F2D25  Haupttextfarbe, Ueberschriften
   --ink-2          #47564D  Fliesstext, Vorspann, ruhigere Texte
   --muted          #6B7A70  Nebeninformationen, Datumsangaben, Labels
   --ground         #F3F6EE  heller Seitengrund und Karten auf Weiss
   --surface        #FFFFFF  weisse Flaechen, Karten auf hellem Grund

   FARBEN – MOOSGRUEN (Primaerfarbe, Rehasport)
   --moss           #2F6B45  Links, Kopfzeilen-Marke, Hauptakzent
   --moss-deep      #23513A  Hover, Fussbereich, Schrift auf Moss-Soft
   --moss-soft      #DCEBDD  Flaechen, Pillen, Kursbloecke Rehasport

   FARBEN – MANDARINE (Handlungen, Praeventionskurse)
   --mandarine      #F28B3B  Hauptschaltflaeche, Schritt-Nummern, Marker
   --mandarine-deep #D8712A  Hover der Hauptschaltflaeche
   --mandarine-soft #FDE7D6  Flaechen, Kursbloecke Praevention, Stellen-Pille
   --mandarine-ink  #8B4A16  lesbare Schrift auf --mandarine-soft

   FARBEN – BEERE (Kinder und Familie)
   --beere          #C94F7C  Akzent Kinderbereich, Fehlermeldungen im Formular
   --beere-deep     #A83C64  Schrift auf Beere-Soft
   --beere-soft     #F8E1EA  Flaechen und Kursbloecke Kinderbereich

   FARBEN – SONNE (Hervorhebungen)
   --sonne          #F6C85F  Schwung unter der Ueberschrift, Sticker, Zitate
   --sonne-soft     #FBEFC9  Hinweiskaesten, Stellen-Teaser, Beispiel-Pille
   --sonne-ink      #7A5A0A  lesbare Schrift auf --sonne-soft

   FARBEN – BLAU (Betreutes Training)
   --blau-soft      #E3ECF6  Kursbloecke Training, Info-Hinweise
   --blau-ink       #2E5680  Schrift auf --blau-soft

   WEITERE
   --line           #D9E3D4  Rahmen, Trennlinien, Feldumrandungen
   --overlay        rgba(24,34,28,.94)  Hintergrund der Lightbox

   FORM UND RAUM
   --radius         24px     grosse Karten, Abschnittsflaechen
   --radius-sm      14px     kleine Karten, Bilder, Eingabefelder
   --shadow         0 20px 45px -25px rgba(31,45,37,.35)  weicher Schatten
   --container      1160px   maximale Inhaltsbreite
   --header-height  84px     Hoehe der klebenden Kopfzeile

   SCHRIFTEN (Google Fonts)
   --font-display   "Baloo 2"  Ueberschriften, Marke, Zahlen (600/700/800)
   --font-body      "Figtree"  Fliesstext, Navigation, Formulare (400–700)

   ABSCHNITTSBEZOGEN (wird je Abschnitt gesetzt, nicht in :root)
   --wave-fill      Fuellfarbe der Wellen-Uebergaenge, folgt der Flaeche
   --team-spalten   Spaltenzahl im Team-Raster, kommt aus dem Abschnitt
   ===================================================================== */