@charset "UTF-8";

/* ==================================================================
   Familienzentrum Spatzennest – Stylesheet
   ==================================================================
   Aufbau:
     1. Design-Tokens (Farben, Radien, Schatten, Abstände)
     2. Reset & Grundlagen
     3. Barrierefreiheit (Fokus, Skip-Link, Bewegung)
     4. Layout-Rahmen (Seite, Header, Footer)
     5. Bausteine (Hero, Band, Karten, Kacheln, CTA …)
     6. Seitenspezifische Bausteine (Termine, Rechtstexte)
     7. Responsive (Reflow bis 320px – WCAG 1.4.10)

   Farbhinweis (wichtig):
     Geometrie, Abstände und Typo-Skala entsprechen exakt dem
     HTML-Entwurf. Wo im Entwurf Text auf farbigem Grund lag, wurden
     die *textführenden* Farbtöne abgedunkelt, damit der Kontrast
     WCAG 2.1 AA erreicht (4.5:1, bei großer Schrift 3:1) – für
     öffentliche Träger verpflichtend (BFSG/BITV).
     Die hellen Originaltöne (--orange, --green, --blue, --pink)
     bleiben für dekorative Flächen erhalten (Icon-Kacheln, Punkte,
     Kreise). Wer die Originalfarben zurück will, ändert nur die
     Tokens --*-strong / --*-text unten.
   ================================================================== */

/* ------------------------------------------------------------------
   1. Design-Tokens
   ------------------------------------------------------------------ */
:root {
  /* Flächen */
  --body-bg:      #efe7d6;
  --page-bg:      #fbf6ec;
  --white:        #fff;
  --tint-blue:    #e6f3fa;
  --tint-green:   #eef4e3;
  --tint-orange:  #fbeede;
  --tint-pink:    #fdeef2;
  --tint-sand:    #fdf0dd;
  --tint-sand-2:  #f3ebd9;
  --cream:        #fff5e6;
  --border-sand:  #f0e6d2;

  /* Schriftfarben */
  --ink:          #3a3327;
  --ink-nav:      #4a4236;
  --ink-soft:     #6b6152;
  --ink-warm:     #6b5e4c;
  --ink-cool:     #55606a;
  --ink-neutral:  #55524a;
  --on-band:      #f2f8e6;

  /* Dekorative Vollfarben (nur Flächen ohne Text) */
  --orange:       #ee8a1e;
  --green:        #8bc34a;
  --blue:         #2ba6d9;
  --pink:         #e05a7d;
  --yellow:       #f6c343;
  --purple:       #8a63c9;
  --red:          #e0453f;

  /* Textführende Varianten (kontraststark, AA) */
  /*
  --orange-strong: #9c5000;
  --green-strong:  #567620;
  --green-text:    #4f6d1e;
  --blue-strong:   #1c6f92;
  --blue-text:     #2c5d72;
  --pink-strong:   #b02a4e;
  --alert:         #c0392b;
  */
  --orange-strong: #ee8a1e;
  --green-strong:  #8bc34a;
  --green-text:    #4f6d1e;
  --blue-strong:   #2ba6d9;
  --blue-text:     #2c5d72;
  --pink-strong:   #b02a4e;
  --alert:         #c0392b;

  /* Form */
  --radius-card:   28px;
  --radius-tile:   20px;
  --radius-icon:   100%;
  --radius-pill:   999px;
  --blob-1: 55% 45% 52% 48% / 58% 55% 45% 42%;
  --blob-2: 48% 52% 45% 55% / 52% 45% 55% 48%;
  --blob-3: 52% 48% 54% 46% / 56% 54% 46% 44%;

  --shadow-blob:   0 24px 50px -20px rgba(58, 51, 39, .5);
  --shadow-blob-s: 0 20px 44px -20px rgba(58, 51, 39, .5);
  --shadow-card:   0 16px 34px -14px rgba(58, 51, 39, .5);
  --shadow-logo:   0 16px 32px -16px rgba(58, 51, 39, .4);

  /* Raster & Schrift */
  --page-max:  1180px;
  --gutter:    44px;
  --font-head: 'Baloo 2', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--body-bg);
  -webkit-font-smoothing: antialiased;
}

img,
svg { max-width: 100%; }

img {
  height: auto;
  display: block;
}

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
ul, ol { margin: 0; }

/* Fließtext aus dem Panel (Kirbytext) */
.rich > * + * { margin-top: .8em; }
.rich a {
  color: var(--green-text);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .15em;
}
.rich ul,
.rich ol { padding-left: 1.3em; }
.rich li + li { margin-top: .3em; }
.rich strong { font-weight: 800; }

/* Nur für Screenreader */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------
   3. Barrierefreiheit
   ------------------------------------------------------------------ */

/* Sichtbarer Fokus – bitte nie entfernen */
:focus-visible {
  outline: 3px solid var(--blue-strong);
  outline-offset: 3px;
  border-radius: 6px;
}
.band__inner :focus-visible,
.cta :focus-visible {
  outline-color: var(--white);
}

/* Sprunglink zum Inhalt */
.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 100;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 700;
  padding: 12px 22px;
  border-radius: 0 0 var(--radius-pill) var(--radius-pill);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: transform .15s ease-out;
}
.skip-link:focus { transform: translate(-50%, 0); }

/* Dekoratives „Schweben“ */
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

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

/* Höherer Kontrast, wenn das System es verlangt */
@media (prefers-contrast: more) {
  :root {
    --ink-soft:    #554d3f;
    --ink-warm:    #574b3b;
    --ink-cool:    #414b54;
    --ink-neutral: #43413a;
    --on-band:     #fff;
  }
}

/* ------------------------------------------------------------------
   4. Layout-Rahmen
   ------------------------------------------------------------------ */
.page {
  max-width: var(--page-max);
  margin: 0 auto;
  background: var(--page-bg);
  overflow: hidden;
}

/* --- Kopfbereich --- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px var(--gutter);
  background: var(--page-bg);
  position: relative;
}

.site-logo {
  background: var(--white);
  border-radius: var(--blob-3);
  margin: -56px 0 0 -104px;
  box-shadow: var(--shadow-logo);
  width: 372px;
  height: 224px;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 114px 55px 0;
}
.site-logo img {
  height: 102px;
  width: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink-nav);
}
.nav-list {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  padding: 0;
}
.nav-list a {
  text-decoration: none;
  display: inline-block;
  padding: 8px 2px;
}
.nav-list a:hover { text-decoration: underline; }
.nav-list [aria-current="page"] {
  color: var(--orange-strong);
  font-weight: 800;
}
.nav-cta a {
  background: var(--orange-strong);
  color: var(--white);
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 18px -6px rgba(156, 80, 0, .55);
  text-decoration: none;
  white-space: nowrap;
}
.nav-cta a:hover { text-decoration: underline; }

/* Menü-Button – erst ab Tablet sichtbar */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink-nav);
  background: var(--white);
  border: 2px solid var(--border-sand);
  border-radius: var(--radius-pill);
  padding: 10px 18px;
  min-height: 44px;
  cursor: pointer;
}
.nav-toggle svg {
  width: 22px;
  height: 22px;
}

/* --- Fußbereich --- */
.site-footer { background: var(--white); }
.footer-curve {
  display: block;
  width: 100%;
  height: 60px;
  background: var(--page-bg);
}
.footer-inner {
  padding: 20px var(--gutter) 40px;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.footer-brand { max-width: 400px; }
.footer-brand img {
  height: 110px;
  width: auto;
  margin-bottom: 18px;
}
.footer-brand p {
  line-height: 1.6;
  color: var(--ink-soft);
}
.footer-col {
  line-height: 1.9;
  color: var(--ink-nav);
}
.footer-col h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
  color: var(--orange-strong);
  margin-bottom: 6px;
  line-height: 1.4;
}
.footer-col ul {
  list-style: none;
  padding: 0;
}
.footer-col a {
  color: var(--green-text);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .15em;
}
.footer-meta {
  padding: 0 var(--gutter) 32px;
  font-size: 14px;
  color: var(--ink-soft);
}

/* ------------------------------------------------------------------
   5. Bausteine
   ------------------------------------------------------------------ */

/* --- Abschnittsrahmen --- */
.section { padding: 60px var(--gutter); }
.section--tight     { padding: 34px var(--gutter) 70px; }
.section--tight-sm  { padding: 34px var(--gutter) 60px; }
.section--bottom    { padding: 0 var(--gutter) 60px; }
.section--sand      { background: var(--tint-sand); }
.section--sand-2    { background: var(--tint-sand-2); }

.section-head {
  text-align: center;
  margin-bottom: 34px;
}
.section-head--tight { margin-bottom: 32px; }
.section-head h2 {
  font-size: clamp(28px, 4.6vw, 40px);
  margin: 6px 0 0;
}
.section-head h2 + p { margin-top: 10px; }
.section-head p {
  max-width: 680px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.eyebrow {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--orange-strong);
  display: block;
}
.eyebrow--blue  { color: var(--blue-strong); }
.eyebrow--green { color: var(--green-text); }

/* --- Hero --- */
.hero {
  position: relative;
  padding: 30px var(--gutter) 90px;
  overflow: hidden;
}
.hero--sub  { padding: 24px var(--gutter) 80px; }
.hero--text { padding: 24px var(--gutter) 70px; }

.hero-inner {
  display: flex;
  gap: 40px;
  align-items: center;
}
.hero-body { flex: 1; min-width: 0; }
.hero--text .hero-body { max-width: 640px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--tint-green);
  color: var(--green-text);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: 22px;
}
.badge--blue {
  background: var(--tint-blue);
  color: var(--blue-text);
}

.hero h1 {
  font-size: clamp(34px, 5.4vw, 58px);
  line-height: 1.05;
  margin: 0 0 18px;
}
.hero--sub h1,
.hero--text h1 { font-size: clamp(32px, 5.2vw, 56px); }

.hero-lead {
  font-size: clamp(17px, 1.7vw, 19px);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 470px;
}
.hero-lead + .btn-row { margin-top: 30px; }

.hl { color: var(--orange-strong); }
.hl--green { color: var(--green); }

/* Bild-Blob */
.hero-media {
  flex: 0 0 460px;
  position: relative;
}
.hero-media--s { flex-basis: 430px; }
.blob {
  overflow: hidden;
  box-shadow: var(--shadow-blob);
  border-radius: var(--blob-1);
  aspect-ratio: 460 / 420;
}
.blob img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blob--2 {
  border-radius: var(--blob-2);
  box-shadow: var(--shadow-blob-s);
}
.blob--3 {
  border-radius: var(--blob-3);
  box-shadow: var(--shadow-blob-s);
}

/* Freistehende Info-Karte am Hero-Bild */
.hero-card {
  position: absolute;
  bottom: 24px;
  left: -26px;
  background: var(--white);
  border-radius: 50px;
  padding: 14px 20px;
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero-card__icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  background: var(--green);
  display: grid;
  place-items: center;
  font-size: 22px;
}
.hero-card__value {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 20px;
  line-height: 1;
}
.hero-card__label {
  font-size: 13px;
  color: var(--ink-soft);
}

/* Dekorative Kreise */
.deco {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.deco--sun {
  width: 74px;
  height: 74px;
  background: var(--yellow);
  box-shadow: 0 0 0 12px rgba(246, 195, 67, .25);
  animation: floaty 5s ease-in-out infinite;
}
.deco--dot   { width: 16px; height: 16px; background: var(--pink); }
.deco--dot-s { width: 12px; height: 12px; background: var(--blue); }

/* Positionen wie im Entwurf – je Hero-Variante */
.hero--home .deco--sun { top: 40px; right: 300px; }
.hero--home .deco--1   { top: 150px; left: 480px; }
.hero--home .deco--2   { bottom: 150px; left: 430px; }

.hero--sub .deco--sun  { top: 30px; right: 320px; }
.hero--sub .deco--1    { bottom: 120px; left: 440px; width: 14px; height: 14px; background: var(--blue); }

.hero--text .deco--sun { top: 40px; right: 180px; }
.hero--text .deco--1   { bottom: 60px; right: 380px; width: 14px; height: 14px; background: var(--blue); }

/* --- Buttons --- */
.btn-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  padding: 15px 30px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  gap: .4em; /* Abstand zum dekorativen Pfeil */
}
.btn:hover { text-decoration: underline; }
.btn--blue {
  background: var(--blue-strong);
  color: var(--white);
  box-shadow: 0 12px 24px -8px rgba(28, 111, 146, .7);
}
.btn--green {
  background: var(--green-strong);
  color: var(--white);
  box-shadow: 0 12px 24px -8px rgba(86, 118, 32, .75);
}
.btn--orange {
  background: var(--orange-strong);
  color: var(--white);
  box-shadow: 0 12px 24px -8px rgba(156, 80, 0, .6);
}
.btn--white {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 8px 20px -10px rgba(58, 51, 39, .4);
}

/* --- Grünes Band mit Wellen --- */
.band { position: relative; }
.band__curve {
  display: block;
  width: 100%;
  height: 50px;
}
.band__inner {
  background: var(--green-strong);
  padding: 10px var(--gutter) 10px;
  color: var(--white);
}
.band__inner .eyebrow { color: var(--white); }
.band__inner h2 {
  font-size: clamp(26px, 3.6vw, 34px);
  margin: 6px 0 12px;
}
.band__inner .section-head p {
  max-width: 740px;
  font-size: clamp(17px, 1.7vw, 19px);
  line-height: 1.65;
  color: var(--on-band);
}

/* Panels im Band (abgedunkelt statt aufgehellt – Kontrast) */
.band-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.band-card {
  background: rgba(0, 0, 0, .14);
  border-radius: 22px;
  padding: 24px;
}
.band-card__emoji {
  font-size: 28px;
  margin-bottom: 10px;
}
.band-card h3 {
  font-size: 19px;
  margin-bottom: 6px;
}
.band-card p {
  line-height: 1.55;
  color: var(--on-band);
}

/* Weiße Karten im Band */
.band-white-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  list-style: none;
  padding: 0;
}
.band-white-card a {
  display: block;
  text-decoration: none;
}
.band-white-card a:hover .datecard__day { text-decoration: underline; }
.band-white-cards--2 { grid-template-columns: 1fr 1fr; }
.band-white-card {
  background: var(--white);
  border-radius: 24px;
  padding: 26px;
  color: var(--ink);
}
.band-white-card--pad { padding: 30px 34px; }
.band-white-card h3 {
  font-size: 19px;
  margin: 0 0 12px;
}
.band-white-card__lines {
  line-height: 1.9;
  color: var(--ink-neutral);
}

/* --- Karten-Raster --- */
.cards {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr 1fr;
}
.cards--3 {
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.cards--gap-s { gap: 20px; }
.cards--gap-m { gap: 22px; }
.cards--credits { grid-template-columns: 1.2fr 1fr; }
.card--wide { grid-column: span 2; }

.card {
  border-radius: var(--radius-card);
  padding: 34px;
  position: relative;
  overflow: hidden;
  background: var(--white);
  color: var(--ink-soft);
}
.card--pad-s { padding: 28px; }
.card--pad-l { padding: 36px; }
.card--pad-m { padding: 30px; }
.card--outline {
  background: var(--white);
  border: 2px solid var(--border-sand);
  border-radius: 26px;
}
.card--center { text-align: center; }
.card h3 {
  font-size: 22px;
  margin: 0 0 6px;
  color: var(--ink);
}
.card--lg h3 { font-size: 26px; }
.card p { line-height: 1.6; }

/* Farbvarianten */
.card--blue   { background: var(--tint-blue);   color: var(--ink-cool); }
.card--orange { background: var(--tint-orange); color: var(--ink-warm); }
.card--green  { background: var(--tint-green);  color: var(--ink-cool); }
.card--pink   { background: var(--tint-pink);   color: var(--ink-cool); }
.card--sand   { background: var(--page-bg);     color: var(--ink-soft); border: 2px solid var(--border-sand); }

/* Dekorativer Kreis oben rechts */
.card__bubble {
  position: absolute;
  top: -30px;
  right: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(58, 51, 39, .06);
  pointer-events: none;
}
/* Weiße Karte mit farbigem Deko-Kreis (Ansprechpartner-Karten) */
.card--bubble-blue  .card__bubble { background: rgba(43, 166, 217, .12); }
.card--bubble-green .card__bubble { background: rgba(139, 195, 74, .14); }

.card--blue   .card__bubble { background: rgba(43, 166, 217, .16); }
.card--orange .card__bubble { background: rgba(238, 138, 30, .16); }
.card--green  .card__bubble { background: rgba(139, 195, 74, .18); }
.card--pink   .card__bubble { background: rgba(224, 90, 125, .14); }

/* Icon-Kachel (dekorative Farbfläche) */
.icon-tile {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border-radius: 100%;
  display: grid;
  place-items: center;
  font-size: 30px;
  margin-bottom: 18px;
  background: var(--green);
}
.icon-tile--s {
  width: 52px;
  height: 52px;
  flex-basis: 52px;
  font-size: 26px;
  margin-bottom: 14px;
}
.icon-tile--xs {
  width: 50px;
  height: 50px;
  flex-basis: 50px;
  font-size: 24px;
  margin-bottom: 0;
}
.icon-tile--blue   { background: var(--blue); }
.icon-tile--orange { background: var(--orange); }
.icon-tile--green  { background: var(--green); }
.icon-tile--pink   { background: var(--pink); }
.icon-tile--yellow { background: var(--yellow); }
.card--center .icon-tile { margin: 0 auto 16px; }

.card__quote {
  font-style: italic;
  font-weight: 700;
  margin: 0 0 12px;
}
.card--blue   .card__quote { color: var(--blue-strong); }
.card--orange .card__quote { color: var(--orange-strong); }
.card--green  .card__quote { color: var(--green-text); }
.card--pink   .card__quote { color: var(--pink-strong); }

.card__subtitle {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 8px;
}
.card--blue   .card__subtitle { color: var(--blue-strong); }
.card--green  .card__subtitle { color: var(--green-text); }
.card--orange .card__subtitle { color: var(--orange-strong); }
.card__subtitle--blue  { color: var(--blue-strong); }
.card__subtitle--green { color: var(--green-text); }

/* Schlichter Zeilenblock in einer Karte (z. B. Kontaktangaben) */
.card__lines {
  margin-top: 22px;
  font-size: 15px;
  line-height: 1.6;
}
/* E-Mail-Adressen in Kontaktzeilen sind klickbar – als Link erkennbar
   durch Farbe UND Unterstreichung (WCAG 1.4.1). */
.card__lines a {
  color: var(--green-text);
  text-decoration: underline;
  text-underline-offset: .15em;
}
/* Folgt direkt eine Kontaktliste, bilden beide einen zusammenhängenden
   Block (kein doppelter Abstand). */
.card__lines + .contact-list { margin-top: 0; }

/* Zentrierter Button unter einem Abschnitt (z. B. Konzept-Download) */
.section__action {
  margin: 34px 0 0;
  text-align: center;
}

/* Button unter einer Karte */
.card__action { margin-top: 22px; }
.card__action .btn {
  padding: 13px 26px;
  font-size: 16px;
  font-weight: 800;
  box-shadow: none;
}

.card__body { min-width: 0; }
.card--row {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.card--row .icon-tile { margin-bottom: 0; }
.card--row-s { gap: 16px; }

/* Gruppenfarben (zwei Punkte) */
.dots {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.dots span {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: block;
}
.dot--orange { background: var(--orange); }
.dot--green  { background: var(--green); }
.dot--blue   { background: var(--blue); }
.dot--red    { background: var(--red); }
.dot--yellow { background: var(--yellow); }
.dot--purple { background: var(--purple); }

.cards-note {
  text-align: center;
  margin: 24px auto 0;
  max-width: 760px;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* --- Kontaktzeilen --- */
.contact-list {
  display: flex;
  flex-direction: column;
  font-size: 15px;
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
}
.contact-list--tight { margin-top: 0; gap: 10px; }
.contact-list li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.contact-list__icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 9px;
  background: var(--tint-blue);
  display: grid;
  place-items: center;
  font-size: 15px;
}
.contact-list--tight .contact-list__icon {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
  border-radius: 10px;
}
.card--green .contact-list__icon,
.contact-list--green .contact-list__icon { background: var(--tint-green); }
.contact-list a {
  color: var(--green-text);
  text-decoration: underline;
  text-underline-offset: .15em;
}

/* --- Kachel-Raster (klein) --- */
.tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.tiles--2 { grid-template-columns: 1fr 1fr; }
.tile {
  background: var(--white);
  border-radius: var(--radius-tile);
  padding: 20px;
}
.tile--pad { padding: 22px; }
.tile--wide { grid-column: span 2; }
.tile h3 {
  font-size: 17px;
  margin: 0 0 4px;
}
.tile p {
  font-size: 14px;
  color: var(--ink-warm);
  line-height: 1.5;
}

/* --- Chips --- */
.chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  list-style: none;
  padding: 0;
}
.chips li {
  background: var(--tint-blue);
  border-radius: 16px;
  padding: 14px 18px;
  font-weight: 700;
  color: var(--blue-text);
}
.chips--3 { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.chips--plain li {
  background: var(--page-bg);
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--ink-neutral);
}

/* --- Zweispalter Bild + Text --- */
.split {
  display: flex;
  gap: 40px;
  align-items: center;
}
.split--top { align-items: flex-start; gap: 44px; }
.split--mb  { margin-bottom: 34px; }
.split__media {
  flex: 0 0 420px;
  height: 320px;
}
.split__media--s {
  flex-basis: 400px;
  height: 340px;
}
.split__media--xs {
  flex-basis: 380px;
  height: auto;
}
.split__media .blob {
  height: 100%;
  aspect-ratio: auto;
}
.split__media--xs .blob { height: 240px; }
.split__body { flex: 1; min-width: 0; }
.split__body h2 {
  font-size: clamp(26px, 3.8vw, 36px);
  margin: 6px 0 14px;
}
.split__body p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-warm);
}
.split__body p + p { margin-top: 12px; }
.split__quote {
  font-style: italic;
  font-weight: 700;
}
.split__intro { margin-bottom: 22px; }
.split--reverse { flex-direction: row-reverse; }

/* --- Öffnungszeiten --- */
.hours {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}
.hours__row {
  background: var(--white);
  border-radius: 16px;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.hours__row dt { font-weight: 700; }
.hours__row dd {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--orange-strong);
}

/* --- Infobox --- */
.infobox {
  margin-top: 22px;
  background: var(--cream);
  border-radius: 16px;
  padding: 18px 22px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.infobox--l {
  border-radius: 22px;
  padding: 24px 28px;
  gap: 16px;
}
.infobox--xl {
  border-radius: var(--radius-card);
  padding: 34px 38px;
  gap: 22px;
  margin-top: 0;
}
.infobox--white {
  background: var(--white);
  border: 2px solid var(--border-sand);
  border-radius: 26px;
  padding: 28px 32px;
  align-items: center;
  gap: 22px;
}
.infobox--blue {
  background: var(--tint-blue);
  border-radius: 24px;
  padding: 28px 32px;
  gap: 18px;
}
.infobox__icon {
  flex: 0 0 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--orange);
  display: grid;
  place-items: center;
  font-size: 22px;
}
.infobox--l .infobox__icon,
.infobox--blue .infobox__icon {
  flex-basis: 46px;
  height: 46px;
  border-radius: 14px;
  font-size: 24px;
}
.infobox--xl .infobox__icon,
.infobox--white .infobox__icon {
  flex-basis: 52px;
  height: 52px;
  border-radius: 16px;
  font-size: 26px;
}
.infobox__icon--blue   { background: var(--blue); }
.infobox__icon--yellow { background: var(--yellow); }
.infobox h3 {
  font-size: 18px;
  margin: 0 0 4px;
}
.infobox--l h3,
.infobox--blue h3 { font-size: 19px; }
.infobox--white h3 { font-size: 22px; }
.infobox--xl h3 { font-size: 24px; margin-bottom: 8px; }
.infobox p {
  color: var(--ink-warm);
  line-height: 1.6;
  font-size: 15px;
}
.infobox--l p,
.infobox--white p,
.infobox--xl p,
.infobox--blue p { font-size: 16px; }
.infobox--blue p { color: var(--ink-cool); }

/* --- Galerie --- */
.gallery {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 150px 150px;
  gap: 16px;
}
.gallery figure {
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
}
.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery figure:nth-child(1) { grid-row: span 2; }
.gallery figure:nth-child(4) { grid-column: span 2; }

/* --- CTA-Panel --- */
.cta {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  padding: 48px 52px;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  background: var(--orange-strong);
}
.cta--blue  { background: var(--blue-strong); }
.cta--green { background: var(--green-strong); padding: 46px 52px; }
.cta__bubble {
  position: absolute;
  bottom: -50px;
  right: 120px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  pointer-events: none;
}
.cta__body {
  position: relative;
  min-width: 0;
}
.cta h2 {
  font-size: clamp(26px, 3.6vw, 34px);
  margin: 0 0 8px;
}
.cta p {
  font-size: 18px;
  max-width: 560px;
}
.cta .btn {
  position: relative;
  background: var(--white);
  font-weight: 800;
  font-size: 18px;
  padding: 16px 32px;
  white-space: nowrap;
  color: var(--orange-strong);
}
.cta--blue .btn  { color: var(--blue-strong); }
.cta--green .btn { color: var(--green-text); }
.cta__lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 17px;
  line-height: 1.6;
  list-style: none;
  padding: 0;
}
.cta__lines strong {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 20px;
}
.cta__lines a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: .15em;
}

/* ------------------------------------------------------------------
   6. Seitenspezifische Bausteine
   ------------------------------------------------------------------ */

/* --- Tagesablauf --- */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  padding: 0;
}
.timeline li {
  background: var(--page-bg);
  border: 2px solid var(--border-sand);
  border-radius: var(--radius-tile);
  padding: 20px 26px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.timeline__time {
  flex: 0 0 150px;
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--orange-strong);
  font-size: 18px;
}
.timeline h3 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 16px;
  margin: 0 0 2px;
}
.timeline p {
  color: var(--ink-soft);
  line-height: 1.55;
}

/* --- Besichtigungstermine --- */
.datecard { text-align: center; }
.datecard__day {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 36px;
  line-height: 1;
  color: var(--green-text);
  display: block;
}
.datecard__label {
  font-weight: 700;
  margin-top: 6px;
  display: block;
}

/* --- Highlight-Karten mit Datumsplakette --- */
.highlight__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.highlight__date {
  flex: 0 0 62px;
  height: 62px;
  border-radius: var(--radius-icon);
  background: var(--pink-strong);
  color: var(--white);
  display: grid;
  place-items: center;
  align-content: center;
  font-family: var(--font-head);
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
  font-size: 20px;
}
.highlight__date span {
  font-size: 12px;
  display: block;
}
.highlight__date--blue   { background: var(--blue-strong); }
.highlight__date--green  { background: var(--green-strong); }
.highlight__date--orange { background: var(--orange-strong); }
.highlight__date time { display: block; line-height: 1rem; }
.highlight h3 {
  font-size: 24px;
  margin: 0;
}
.highlight h3 a { text-decoration: none; }
.highlight h3 a:hover { text-decoration: underline; }

/* Termin-Titel im Monatsplan: Farbe wie im Entwurf (dunkel, fett),
   zusätzlich eine zarte Unterstreichung – so ist der Link nicht nur
   über die Farbe erkennbar (WCAG 1.4.1). */
.month__text strong a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--border-sand);
  text-decoration-thickness: 2px;
  text-underline-offset: .18em;
}
.month__text strong a:hover { text-decoration-color: currentColor; }
.highlight__note {
  color: var(--blue-text);
  font-weight: 700;
  line-height: 1.6;
  margin-top: 12px;
}

/* --- Monatsplan --- */
.months {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.month {
  background: var(--white);
  border-radius: 26px;
  padding: 30px 34px;
}
.month__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.month__head h3 {
  font-size: 26px;
  margin: 0;
}
.month__topic {
  background: var(--tint-orange);
  color: var(--orange-strong);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
}
.month__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.month__list li {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  border-bottom: 2px dotted var(--border-sand);
  padding-bottom: 10px;
}
.month__list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.month__date {
  flex: 0 0 190px;
  font-weight: 800;
  color: var(--green-text);
}
.month__date--closed { color: var(--alert); }
.month__text {
  flex: 1;
  color: var(--ink-neutral);
  line-height: 1.5;
  min-width: 0;
}
.month__text strong { font-weight: 800; }
.month__text a {
  color: var(--green-text);
  text-decoration: underline;
  text-underline-offset: .15em;
}
.month__note {
  margin-top: 16px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
}
.months-note {
  margin: 22px auto 0;
  max-width: 820px;
  text-align: center;
  color: var(--ink-warm);
  line-height: 1.6;
  font-size: 15px;
}

/* --- Rechtstexte --- */
.legal-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.legal-item {
  background: var(--page-bg);
  border: 2px solid var(--border-sand);
  border-radius: 22px;
  padding: 28px 32px;
}
.legal-item h3 {
  font-size: 21px;
  margin: 0 0 8px;
}
.legal-item p,
.legal-item .rich {
  color: var(--ink-soft);
  line-height: 1.65;
}
.legal-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.legal-card {
  background: var(--white);
  border-radius: 24px;
  padding: 30px 34px;
}
.legal-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.legal-card__head h3 {
  font-size: 22px;
  margin: 0;
}
.legal-card__icon {
  flex: 0 0 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 22px;
  background: var(--tint-blue);
}
.legal-card__icon--green  { background: var(--tint-green); }
.legal-card__icon--orange { background: var(--tint-orange); }
.legal-card__icon--pink   { background: var(--tint-pink); }
.legal-card p,
.legal-card .rich {
  color: var(--ink-neutral);
  line-height: 1.65;
}
.legal-card .chips { margin: 12px 0; }
.rights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.right-item {
  background: var(--page-bg);
  border: 2px solid var(--border-sand);
  border-radius: 22px;
  padding: 26px;
}
.right-item h3 {
  font-size: 19px;
  margin: 0 0 6px;
}
.right-item p {
  color: var(--ink-soft);
  line-height: 1.55;
  font-size: 15px;
}

/* --- Einzelnes Event (Detailseite) --- */
.event-detail__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  font-weight: 700;
  color: var(--green-text);
  margin-bottom: 18px;
}
.event-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin-top: 24px;
}
.event-detail__tags a {
  display: inline-block;
  background: var(--tint-green);
  color: var(--green-text);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  text-decoration: none;
}
.event-detail__tags a:hover { text-decoration: underline; }
.backlink {
  display: inline-block;
  margin-top: 30px;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--green-text);
  text-decoration: underline;
  text-underline-offset: .15em;
}
.empty-note {
  background: var(--page-bg);
  border: 2px solid var(--border-sand);
  border-radius: 22px;
  padding: 28px 32px;
  color: var(--ink-soft);
}
.empty-note a {
  color: var(--green-text);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .15em;
}

/* ------------------------------------------------------------------
   7. Responsive – Reflow ohne horizontales Scrollen (WCAG 1.4.10)
   ------------------------------------------------------------------ */

/* Ab hier wird die Kopfnavigation zum Menü */
@media (max-width: 1080px) {
  :root { --gutter: 32px; }

  .site-header {
    align-items: flex-start;
    padding-top: 16px;
  }
  .site-logo {
    width: 250px;
    height: 150px;
    margin: -36px 0 0 -68px;
    padding: 0 74px 34px 0;
  }
  .site-logo img { height: 68px; }

  /* Der Menü-Button ersetzt die Liste nur, wenn JavaScript läuft.
     Ohne JS bleibt die vollständige Navigation sichtbar. */
  .js .nav-toggle { display: inline-flex; }
  .site-nav {
    position: relative;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
  }
  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: var(--white);
    border: 2px solid var(--border-sand);
    border-radius: 22px;
    padding: 14px 20px;
    box-shadow: var(--shadow-card);
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 20;
    min-width: 230px;
  }
  .js .nav-list { display: none; }
  .js .site-nav.is-open .nav-list { display: flex; }
  .nav-list li { text-align: right; }
  .nav-list a {
    display: block;
    padding: 12px 4px;
    min-height: 44px;
  }
  .nav-cta a {
    display: block;
    margin-top: 6px;
    text-align: center;
  }
}

@media (max-width: 940px) {
  .hero-inner,
  .split {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
  }
  .split--reverse { flex-direction: column; }
  .hero-media,
  .hero-media--s,
  .split__media,
  .split__media--s,
  .split__media--xs {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    max-width: 460px;
    margin: 0 auto;
  }
  .split__media .blob,
  .split__media--xs .blob {
    aspect-ratio: 4 / 3;
    height: auto;
  }
  .hero-lead { max-width: none; }
  .hero-card { left: 0; }

  .cards,
  .cards--3,
  .band-cards,
  .band-white-cards,
  .band-white-cards--2,
  .rights-grid,
  .tiles,
  .tiles--2 {
    grid-template-columns: 1fr 1fr;
  }

  .gallery {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .gallery figure { aspect-ratio: 4 / 3; }
  .gallery figure:nth-child(1) { grid-row: auto; }
  .gallery figure:nth-child(4) { grid-column: span 2; }

  .deco { display: none; }
}

@media (max-width: 700px) {
  :root { --gutter: 20px; }

  .section           { padding: 44px var(--gutter); }
  .section--tight,
  .section--tight-sm { padding: 28px var(--gutter) 44px; }
  .section--bottom   { padding: 0 var(--gutter) 44px; }
  .hero              { padding: 20px var(--gutter) 48px; }
  .hero--sub,
  .hero--text        { padding: 16px var(--gutter) 44px; }
  .band__inner       { padding: 10px var(--gutter) 40px; }
  .band__curve       { height: 34px; }

  .cards,
  .cards--3,
  .band-cards,
  .band-white-cards,
  .band-white-cards--2,
  .rights-grid,
  .tiles,
  .tiles--2,
  .chips,
  .chips--3 {
    grid-template-columns: 1fr;
  }
  .tile--wide { grid-column: auto; }

  .gallery { grid-template-columns: 1fr; }
  .gallery figure:nth-child(4) { grid-column: auto; }

  .card,
  .card--pad-l,
  .card--pad-m,
  .card--lg { padding: 26px; }
  .month { padding: 24px 22px; }
  .legal-card,
  .legal-item,
  .infobox--white,
  .infobox--blue,
  .infobox--xl,
  .band-white-card--pad { padding: 24px 22px; }

  .timeline li,
  .month__list li {
    flex-direction: column;
    gap: 6px;
  }
  .timeline li { padding: 18px 20px; }
  .timeline__time,
  .month__date { flex-basis: auto; }

  .cta {
    padding: 32px 26px;
    border-radius: 26px;
  }
  .cta--green { padding: 32px 26px; }
  .cta .btn { width: 100%; }
  .cta__bubble { display: none; }

  .footer-inner { gap: 28px; }
  .footer-brand img { height: 84px; }

  .site-logo {
    width: 200px;
    height: 124px;
    margin: -28px 0 0 -54px;
    padding: 0 58px 26px 0;
  }
  .site-logo img { height: 54px; }
}

@media (max-width: 400px) {
  .site-logo {
    width: 168px;
    height: 108px;
    margin: -24px 0 0 -46px;
    padding: 0 48px 22px 0;
  }
  .site-logo img { height: 46px; }
  .nav-toggle span { display: none; }
}

/* ------------------------------------------------------------------
   Druckausgabe – Termine und Rechtstexte sollen sauber ausdrucken
   ------------------------------------------------------------------ */
@media print {
  body { background: #fff; }
  .page { max-width: none; }
  .site-nav,
  .skip-link,
  .deco,
  .footer-curve,
  .cta { display: none !important; }
  .band__inner { background: #fff !important; color: #000 !important; }
  .band-card { background: #f4f4f4 !important; }
  .band__inner .eyebrow,
  .band-card p { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; }
}