/* Montessori · Therapie · Treffpunkt – Gestaltung (Leitlinien: DESIGN.md) */

@font-face { font-family: "Lexend"; src: url("../fonts/lexend-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("../fonts/lexend-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("../fonts/lexend-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Lexend"; src: url("../fonts/lexend-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
/* nur für die Wortmarke wie auf der bisherigen Seite */
@font-face { font-family: "Open Sans Wortmarke"; src: url("../fonts/open-sans-latin-800-italic.woff2") format("woff2"); font-weight: 800; font-style: italic; font-display: swap; }

:root {
  --stangenblau: #3f7abe;   /* Logo, Stangen */
  --blau: #3a73b5;          /* Flächen mit weißem Text (4,9 : 1) */
  --tiefblau: #24538f;      /* Überschriften, Links (7,7 : 1 auf Weiß) */
  --nachtblau: #1f3d63;     /* Fuß */
  --rot: #e52330;           /* Stangen, Hauptschaltfläche */
  --rot-tief: #b81c27;
  --holz: #f3e4c6;          /* Senioren */
  --holz-hell: #f9f1e1;
  --flieder: #e6e5fb;       /* Kinder */
  --flieder-hell: #f3f2fd;
  --tinte: #23262d;
  --tinte-leise: #4a4f59;
  --linie: #e3dccd;
  --weiss: #fff;

  --text: "Lexend", system-ui, "Segoe UI", Arial, sans-serif;
  --marke: "Open Sans Wortmarke", "Open Sans", Arial, sans-serif;

  --breite: 82rem;
  --rand: clamp(1.1rem, 4vw, 2.5rem);
  --abstand: clamp(3.5rem, 8vw, 6.5rem);
  --rund: 8px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 7rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
::selection { background: var(--holz); color: var(--tinte); }
body {
  margin: 0; font-family: var(--text); font-weight: 400;
  font-size: 1.125rem; line-height: 1.7; color: var(--tinte); background: var(--weiss);
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
a { color: var(--tiefblau); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--rot-tief); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--rot); outline-offset: 3px; border-radius: 2px; }
/* Auf blauen Flächen ist Rot als Fokusrahmen zu schwach – dort Weiß */
.held :focus-visible, .seitenkopf :focus-visible, .kontaktband :focus-visible, .fuss :focus-visible, .leiste :focus-visible { outline-color: var(--weiss); }
h1, h2, h3 { font-weight: 600; line-height: 1.2; color: var(--tiefblau); margin: 0 0 0.6em; letter-spacing: -0.01em; text-wrap: balance; }
p, li, dd, figcaption { text-wrap: pretty; }
@media (max-width: 40rem) { p, li { hyphens: auto; } } /* lange deutsche Wörter auf dem Handy trennen */
blockquote p { hanging-punctuation: first; }
h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.4rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.3rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1.1em; }
ul { margin: 0 0 1.4em; padding: 0; }
li { margin-bottom: 0.5em; }
strong { font-weight: 600; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: 1rem; top: -5rem; z-index: 300; background: var(--weiss); color: var(--tinte); padding: 0.7rem 1rem; border-radius: var(--rund); }
.skip-link:focus { top: 1rem; }
.wrap { max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); }

/* ---------- Stangen: das Montessori-Material als einziges Schmuckelement ---------- */

/* Eine Stange aus abwechselnd roten und blauen Abschnitten */
.stange {
  display: block; height: 10px;
  background: repeating-linear-gradient(90deg, var(--rot) 0 var(--einheit, 3rem), var(--stangenblau) var(--einheit, 3rem) calc(2 * var(--einheit, 3rem)));
}
/* direkt unter blauen Flächen: tieferes Blau, damit die Abschnitte sichtbar bleiben */
.stange--kante { background: repeating-linear-gradient(90deg, var(--rot) 0 3rem, var(--tiefblau) 3rem 6rem); }
.stange--kurz { width: calc(2 * var(--einheit, 1.5rem)); --einheit: 1.5rem; height: 6px; margin-bottom: 1.1rem; }


/* ---------- Kopf ---------- */

.leiste { background: var(--nachtblau); color: var(--weiss); font-size: 0.92rem; }
.leiste__innen {
  max-width: var(--breite); margin-inline: auto; padding: 0.4rem var(--rand);
  display: flex; flex-wrap: wrap; gap: 0.3rem 1.75rem; justify-content: flex-end;
}
.leiste a, .leiste span { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 0.45rem; }
.leiste a:hover { color: var(--weiss); text-decoration: underline; }
.leiste svg { flex: none; opacity: 0.85; }

.kopf { position: sticky; top: 0; z-index: 100; background: rgb(255 255 255 / 0.97); border-bottom: 1px solid var(--linie); backdrop-filter: blur(6px); }
.kopf__innen {
  max-width: var(--breite); margin-inline: auto; padding: 0.6rem var(--rand);
  display: flex; align-items: center; gap: 1rem 2rem;
}
.marke { display: flex; flex: none; align-items: center; gap: 0.85rem; text-decoration: none; color: var(--tinte); margin-right: auto; }
.marke img { width: 6.5rem; }
.marke__name { display: flex; flex-direction: column; line-height: 1.25; white-space: nowrap; }
.marke__name strong { font-size: 1.05rem; color: var(--tiefblau); font-weight: 600; }
.marke__name span { font-size: 0.88rem; color: var(--tinte-leise); }
.marke:hover strong { color: var(--rot-tief); }

.navi { flex: none; }
.navi ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.25rem 1.35rem; }
.navi li { margin: 0; }
.navi a {
  position: relative; display: block; padding: 0.55rem 0; color: var(--tinte); font-weight: 500;
  font-size: 1rem; text-decoration: none; white-space: nowrap;
}
.navi a::after { /* kleine Stange als Markierung */
  content: ""; position: absolute; left: 0; bottom: 0.1rem; height: 4px; width: 0;
  background: linear-gradient(90deg, var(--rot) 50%, var(--stangenblau) 50%);
}
.navi a:hover { color: var(--tiefblau); }
.navi a:hover::after { width: 1.5rem; }
.navi a[aria-current="page"] { color: var(--tiefblau); }
.navi a[aria-current="page"]::after { width: 2.5rem; }

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 50px; padding: 0.7rem 1.4rem;
  border: 2px solid var(--rot); border-radius: 999px; background: var(--rot); color: var(--weiss);
  font: inherit; font-weight: 600; font-size: 1.02rem; text-decoration: none; cursor: pointer; line-height: 1.2;
}
.knopf:hover { background: var(--rot-tief); border-color: var(--rot-tief); color: var(--weiss); text-decoration: none; }
.knopf--hell { background: transparent; border-color: rgb(255 255 255 / 0.85); color: var(--weiss); }
.knopf--hell:hover { background: var(--weiss); border-color: var(--weiss); color: var(--tiefblau); }
.knopf--rand { background: transparent; border-color: var(--tiefblau); color: var(--tiefblau); }
.knopf--rand:hover { background: var(--tiefblau); border-color: var(--tiefblau); color: var(--weiss); }
.knopf--klein { min-height: 44px; padding: 0.5rem 1.05rem; font-size: 0.95rem; }

.menue-knopf {
  display: none; align-items: center; gap: 0.55rem; min-height: 44px; padding: 0.45rem 0.95rem;
  border: 2px solid var(--tiefblau); border-radius: 999px; background: var(--weiss); color: var(--tiefblau);
  font: inherit; font-weight: 600; cursor: pointer;
}
.menue-knopf__striche, .menue-knopf__striche::before, .menue-knopf__striche::after {
  display: block; width: 1.1rem; height: 2px; background: currentColor; position: relative; border-radius: 2px;
}
.menue-knopf__striche::before, .menue-knopf__striche::after { content: ""; position: absolute; left: 0; }
.menue-knopf__striche::before { top: -6px; }
.menue-knopf__striche::after { top: 6px; }

@media (max-width: 68rem) {
  .kopf__innen { flex-wrap: wrap; }
  .js .menue-knopf { display: inline-flex; }
  .navi { flex-basis: 100%; order: 5; }
  .js .navi { display: none; }
  .js .navi.offen { display: block; }
  .navi ul { flex-direction: column; gap: 0; padding-bottom: 0.4rem; }
  .navi a { padding: 0.85rem 0.25rem; border-top: 1px solid var(--linie); }
  .navi a::after { bottom: 0.5rem; }
  .leiste__innen { justify-content: flex-start; }
}
@media (max-width: 52rem) {
  .leiste .leiste__adresse { display: none; }
}
/* Bei mittlerer Breite reicht der Platz nicht für Name und volles Menü */
@media (min-width: 68.01rem) and (max-width: 88rem) {
  .marke__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@media (max-width: 40rem) {
  .leiste { display: none; } /* Telefon steht als Knopf im Kopf, E-Mail und Adresse im Fuß */
  .kopf__innen { gap: 0.6rem; }
  .kopf .knopf__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .kopf .knopf { width: 44px; padding: 0; }
  .marke img { width: 6.5rem; }
  .marke__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* ---------- Startseite: Eingangsbereich ---------- */

.held { background: var(--blau); color: var(--weiss); overflow: hidden; }
.held__innen {
  max-width: var(--breite); margin-inline: auto; padding: clamp(2.5rem, 6vw, 4.5rem) var(--rand) clamp(2.5rem, 5vw, 3.5rem);
  display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
@media (min-width: 60rem) { .held__innen { grid-template-columns: 1.05fr 1fr; } }
.held__logo { width: min(100%, 25rem); margin-bottom: 1.6rem; }
.wortmarke {
  margin: 0 0 1.25rem; font-family: var(--marke); font-weight: 800; font-style: italic;
  text-transform: uppercase; font-size: clamp(1rem, 0.85rem + 0.6vw, 1.3rem); letter-spacing: 0.01em; line-height: 1.3;
}
.wortmarke__punkt { color: #ff6b74; } /* helles Rot auf Blau, nur Schmuck (aria-hidden) */
.held h1 { color: var(--weiss); max-width: 17ch; margin-bottom: 0.45em; }
.held__text { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); max-width: 34rem; color: var(--weiss); }
.held__aktionen { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.8rem; }
.held__bild { position: relative; }
.held__bild img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--rund); box-shadow: 0 20px 50px rgb(10 30 60 / 0.35); }
.held__bild figcaption { font-size: 0.92rem; color: var(--weiss); margin-top: 0.7rem; }

/* ---------- Startseite: Inhalte ---------- */

.abschnitt { padding-block: var(--abstand); }
.einleitung { display: grid; gap: 2rem 4rem; align-items: start; }
@media (min-width: 56rem) { .einleitung { grid-template-columns: 1.6fr 1fr; } }
.einleitung__text { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem); line-height: 1.55; color: var(--tinte); max-width: 40ch; }
.einleitung__text p:last-child { margin-bottom: 0; }
.hinweis-termin { border-left: 4px solid var(--rot); padding: 0.25rem 0 0.25rem 1.25rem; }
.hinweis-termin p { margin: 0 0 0.6rem; color: var(--tinte-leise); }
.hinweis-termin a.gross { font-size: 1.45rem; font-weight: 600; color: var(--tiefblau); text-decoration: none; }
.hinweis-termin a.gross:hover { color: var(--rot-tief); text-decoration: underline; }

/* Zwei Bereiche in den Farben der bisherigen Seite */
.zwei { display: grid; }
@media (min-width: 56rem) { .zwei { grid-template-columns: 1fr 1fr; } }
.welt { padding: clamp(2.5rem, 5vw, 4rem) var(--rand); display: flex; flex-direction: column; }
.welt--senioren { background: var(--holz); }
.welt--kinder { background: var(--flieder); }
.welt__innen { width: 100%; max-width: 42rem; display: flex; flex-direction: column; flex: 1; }
@media (min-width: 56rem) {
  .welt__innen { max-width: 34rem; }
  .welt--senioren .welt__innen { margin-left: auto; }
}
.welt img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--rund); margin-bottom: 1.75rem; }
.welt h2 { margin-bottom: 0.4em; }
.welt__unterzeile { font-size: 1.15rem; color: var(--tinte); margin-bottom: 1.25rem; }
.welt .weiter { margin-top: auto; padding-top: 0.5rem; }

/* Aufzählungen mit kleinen Stangen statt Punkten */
.punkte { list-style: none; padding: 0; }
.punkte li { position: relative; padding-left: 2.1rem; }
.punkte li::before {
  content: ""; position: absolute; left: 0; top: 0.68em; width: 1.3rem; height: 6px;
  background: linear-gradient(90deg, var(--rot) 50%, var(--stangenblau) 50%);
}

.weiter { font-weight: 600; font-size: 1.05rem; }
.weiter a { display: inline-flex; align-items: center; gap: 0.5rem; }
.weiter svg { transition: transform 0.15s ease; }
.weiter a:hover svg { transform: translateX(3px); }

.kita {
  display: grid; gap: 1.25rem 3rem; align-items: center; padding-block: clamp(2.25rem, 4vw, 3rem);
  border-bottom: 1px solid var(--linie);
}
@media (min-width: 56rem) { .kita { grid-template-columns: 1fr auto; } }
.kita h2 { font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.7rem); margin-bottom: 0.35em; }
.kita p { margin: 0; color: var(--tinte-leise); max-width: 60ch; }

.person { display: grid; gap: 2.5rem 4.5rem; align-items: center; }
@media (min-width: 56rem) { .person { grid-template-columns: minmax(16rem, 23rem) 1fr; } }
.person__bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-radius: var(--rund); }
.person blockquote { margin: 0 0 1.75rem; }
.person blockquote p { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem); line-height: 1.35; font-weight: 500; color: var(--tiefblau); margin-bottom: 0.4rem; }
.person blockquote footer { color: var(--tinte-leise); }
.person h2 { font-size: 1.45rem; margin-bottom: 0.25em; }
.person__rolle { color: var(--tinte-leise); margin-bottom: 1.1rem; }

/* Einblicke: Fotomosaik */
.einblicke__kopf { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.75rem; }
.einblicke__kopf h2 { margin: 0; }
.einblicke__kopf p { margin: 0.4rem 0 0; color: var(--tinte-leise); }
.mosaik { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, 1fr); }
.mosaik img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--rund); aspect-ratio: 4 / 3; }
@media (min-width: 56rem) {
  .mosaik { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 15rem)); }
  .mosaik figure:first-child { grid-row: span 2; }
  .mosaik img { aspect-ratio: auto; }
}

/* Kontaktband */
.kontaktband { background: var(--blau); color: var(--weiss); }
.kontaktband__innen { display: grid; gap: 2rem 4rem; padding-block: clamp(3rem, 6vw, 4.5rem); align-items: end; }
@media (min-width: 56rem) { .kontaktband__innen { grid-template-columns: 1.2fr 1fr; } }
.kontaktband h2 { color: var(--weiss); }
.kontaktband p { color: var(--weiss); max-width: 46ch; }
.kontaktband a { color: var(--weiss); }
.kontaktband__telefon { display: block; font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); font-weight: 600; text-decoration: none; letter-spacing: -0.01em; margin-bottom: 0.5rem; }
.kontaktband__telefon:hover { color: var(--weiss); text-decoration: underline; }
.kontaktband address { font-style: normal; line-height: 1.8; }

/* ---------- Unterseiten ---------- */

.seitenkopf { background: var(--blau); color: var(--weiss); }
.seitenkopf__innen {
  max-width: var(--breite); margin-inline: auto; padding: clamp(2.25rem, 5vw, 3.75rem) var(--rand) clamp(2rem, 4vw, 3rem);
  display: grid; gap: 1.5rem 3rem; align-items: center;
}
@media (min-width: 52rem) { .seitenkopf__innen { grid-template-columns: 1fr auto; } }
.seitenkopf h1 { color: var(--weiss); margin-bottom: 0.35em; }
.seitenkopf p { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); max-width: 44rem; margin: 0; color: var(--weiss); }
.seitenkopf__logo { width: 15rem; }
@media (max-width: 52rem) { .seitenkopf__logo { width: 11rem; order: -1; } }

.seite { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.seite--senioren { background: var(--holz-hell); }
.seite--kinder { background: var(--flieder-hell); }
.seite__raster { display: grid; gap: 3rem 4.5rem; align-items: start; }
@media (min-width: 62rem) { .seite__raster { grid-template-columns: minmax(0, 1fr) 21rem; } }

.text { max-width: 39rem; } /* etwa 65 Zeichen pro Zeile */
.text h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); margin-top: 2.6rem; }
.text h2:first-child { margin-top: 0; }
.text > img, .text figure img { border-radius: var(--rund); width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.text figure { margin: 2rem 0; }
.text figcaption { font-size: 0.95rem; color: var(--tinte-leise); margin-top: 0.6rem; }

.zitat { margin: 2.25rem 0; padding: 0; }
.zitat p { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.65rem); line-height: 1.4; font-weight: 500; color: var(--tiefblau); margin-bottom: 0.4rem; }
.zitat footer { color: var(--tinte-leise); font-size: 1rem; }

.blick { background: var(--weiss); border-radius: var(--rund); padding: 1.75rem; box-shadow: 0 1px 2px rgb(35 38 45 / 0.06), 0 8px 24px rgb(35 38 45 / 0.06); }
@media (min-width: 62rem) { .blick { position: sticky; top: 7.5rem; } }
/* Auf schmalen Bildschirmen stehen die Eckdaten vor dem langen Text; das Bild entfällt dort */
@media (max-width: 61.99rem) {
  .blick { order: -1; }
  .blick picture { display: none; }
}
.blick h2 { font-size: 1.25rem; margin-bottom: 1rem; }
.blick dl { margin: 0 0 1.25rem; }
.blick dt { font-size: 0.9rem; color: var(--tinte-leise); }
.blick dd { margin: 0 0 0.8rem; font-weight: 500; }
.blick img { border-radius: calc(var(--rund) - 2px); margin-bottom: 1.25rem; }
.blick .knopf { width: 100%; }
.blick__telefon { display: block; text-align: center; margin-top: 0.75rem; font-weight: 600; }

.kasten { background: var(--weiss); border-radius: var(--rund); padding: 1.5rem 1.75rem; margin: 1.75rem 0; border-top: 6px solid transparent; border-image: linear-gradient(90deg, var(--rot) 0 50%, var(--stangenblau) 50% 100%) 1; border-image-width: 6px 0 0 0; }
.kasten h3 { margin-top: 0; }
.kasten p:last-child { margin-bottom: 0; }

.zwei-spalten { display: grid; gap: 1.5rem 2.5rem; }
@media (min-width: 48rem) { .zwei-spalten { grid-template-columns: 1fr 1fr; } }

/* Über uns */
.team { display: grid; gap: 1rem 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 3rem; }
.team__person { display: flex; flex-direction: column; gap: 0.2rem; text-decoration: none; color: var(--tinte); }
.team__person img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-radius: var(--rund); margin-bottom: 0.6rem; }
.team__person strong { font-size: 1.2rem; font-weight: 600; color: var(--tiefblau); }
.team__person span { color: var(--tinte-leise); font-size: 0.98rem; }
.team__person:hover strong { color: var(--rot-tief); text-decoration: underline; }
@media (max-width: 40rem) {
  .team__person strong { font-size: 1.05rem; }
  .team__person span { font-size: 0.9rem; }
}
.quali h3 { font-size: 1.2rem; }
.quali ul { list-style: none; padding: 0; }
.quali li { padding: 0.75rem 0; border-bottom: 1px solid var(--linie); margin: 0; }

/* ---------- Galerie ---------- */

.filter { list-style: none; padding: 0; margin: 0 0 0.6rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.filter li { margin: 0; }
.filter button {
  min-height: 46px; padding: 0.5rem 1.25rem; border-radius: 999px; cursor: pointer;
  border: 2px solid var(--tiefblau); background: var(--weiss); color: var(--tiefblau); font: inherit; font-weight: 500;
}
.filter button:hover { background: #eef3fa; }
.filter button[aria-pressed="true"] { background: var(--tiefblau); color: var(--weiss); }
.filter-status { color: var(--tinte-leise); margin-bottom: 2rem; font-size: 0.98rem; }

.galerie { list-style: none; padding: 0; margin: 0; display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); }
.galerie li { margin: 0; }
.galerie li[hidden] { display: none; }
.galerie a { display: block; color: var(--tinte); text-decoration: none; cursor: zoom-in; }
.galerie__rahmen { display: block; overflow: hidden; border-radius: var(--rund); background: var(--linie); }
.galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.35s ease; }
.galerie figcaption { margin-top: 0.7rem; line-height: 1.35; }
.galerie__titel { display: block; font-weight: 500; }
.galerie__gruppe { display: block; font-size: 0.9rem; color: var(--tinte-leise); }
.galerie a:hover .galerie__titel { color: var(--tiefblau); text-decoration: underline; }
@media (prefers-reduced-motion: no-preference) {
  .galerie a:hover img, .galerie a:focus-visible img { transform: scale(1.035); }
}

.leuchtkasten {
  width: min(96vw, 78rem); max-width: none; max-height: 96vh; padding: 0; border: 0; border-radius: var(--rund);
  background: #15171c; color: var(--weiss);
}
.leuchtkasten::backdrop { background: rgb(15 20 30 / 0.88); }
.leuchtkasten__buehne { position: relative; display: flex; align-items: center; justify-content: center; min-height: 40vh; }
.leuchtkasten__bild { max-height: calc(96vh - 5.5rem); width: auto; max-width: 100%; object-fit: contain; }
.leuchtkasten__leiste { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 1.25rem; }
.leuchtkasten__text { margin: 0; font-weight: 500; }
.leuchtkasten__zaehler { margin: 0; color: #c9ccd3; white-space: nowrap; font-size: 0.95rem; }
.leuchtkasten button {
  width: 50px; height: 50px; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: rgb(255 255 255 / 0.94); color: var(--tinte); font: inherit; font-size: 1.6rem; line-height: 1;
}
.leuchtkasten button:hover { background: var(--weiss); }
.leuchtkasten__zurueck, .leuchtkasten__vor { position: absolute; top: 50%; transform: translateY(-50%); }
.leuchtkasten__zurueck { left: 0.85rem; }
.leuchtkasten__vor { right: 0.85rem; }
.leuchtkasten__schliessen { position: absolute; top: 0.85rem; right: 0.85rem; }

/* ---------- Kontakt ---------- */

.karte { border-radius: var(--rund); overflow: hidden; background: #eef3fa; }
.karte iframe { display: block; width: 100%; height: 26rem; border: 0; }
.karte__hinweis { padding: 1.75rem; }
.karte__hinweis p { font-size: 1rem; color: var(--tinte-leise); }
.abstand-oben { margin-top: 1rem; }

/* Rechtliches */
.rechtlich { max-width: 46rem; }
.rechtlich h2 { font-size: 1.3rem; margin-top: 2.25rem; }
.rechtlich ul { padding-left: 1.25rem; list-style: disc; }
.pruefen { background: #ffd34d; color: var(--tinte); padding: 0 0.2em; }

/* ---------- Fuß ---------- */

.fuss { background: var(--nachtblau); color: #c9d8ee; font-size: 1rem; }
.fuss a { color: var(--weiss); }
.fuss__innen { display: grid; gap: 2.25rem 3rem; padding-block: 3.5rem 2.5rem; }
@media (min-width: 52rem) { .fuss__innen { grid-template-columns: 1.4fr 1fr 1fr; } }
.fuss img { width: 10rem; margin-bottom: 1rem; }
.fuss h2 { color: var(--weiss); font-size: 1.05rem; font-weight: 600; margin-bottom: 0.8rem; }
.fuss address { font-style: normal; line-height: 1.8; }
.fuss ul { list-style: none; padding: 0; margin: 0; }
.fuss li { margin-bottom: 0.45rem; }
.fuss__unten { border-top: 1px solid rgb(255 255 255 / 0.15); padding-block: 1.1rem; font-size: 0.9rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; }
.fuss__unten p { margin: 0; }

/* ---------- Druck: Inhalt und Kontaktdaten, ohne Menü und Farbflächen ---------- */
@media print {
  @page { margin: 18mm 16mm; }
  body { font-size: 11pt; line-height: 1.5; color: #000; background: #fff; }
  .leiste, .navi, .menue-knopf, .kopf .knopf, .skip-link, .stange,
  .held__aktionen, .held__bild, .filter, .filter-status, .leuchtkasten, .karte, .weiter, .blick .knopf, .blick__telefon,
  .fuss nav, .fuss__unten, .mosaik, .einblicke__kopf .weiter { display: none !important; }
  .kopf { position: static; border: 0; }
  .marke img { width: 4cm; }
  .held, .seitenkopf, .kontaktband, .fuss, .welt, .seite--senioren, .seite--kinder { background: none !important; color: #000 !important; }
  .held h1, .seitenkopf h1, .seitenkopf p, .held__text, .wortmarke, .kontaktband h2, .kontaktband p, .kontaktband a, .fuss, .fuss a, .fuss h2 { color: #000 !important; }
  .held__logo, .seitenkopf__logo, .fuss img { display: none; }
  h1, h2, h3 { color: #000; break-after: avoid; }
  img { max-width: 8cm !important; break-inside: avoid; }
  .blick { box-shadow: none; border: 1px solid #999; position: static; }
  .seite__raster, .zwei, .person, .einleitung, .kontaktband__innen, .fuss__innen { display: block; }
  a { color: #000; text-decoration: none; }
  .text a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
  .abschnitt, .seite, .welt { padding-block: 0.6cm; }
}

/* ---------- Häufige Fragen (aufklappbar) ---------- */
.fragen { border-top: 1px solid var(--linie); }
.frage { border-bottom: 1px solid var(--linie); }
.frage summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 0; cursor: pointer; list-style: none;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary h2 { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); margin: 0; }
.frage summary::after { /* Plus/Minus statt Pfeil */
  content: "+"; flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--holz-hell); color: var(--tiefblau); font-size: 1.4rem; font-weight: 600; line-height: 1;
}
.frage[open] summary::after { content: "–"; }
.frage summary:hover h2 { color: var(--rot-tief); }
.frage__antwort { padding: 0 0 1.25rem; }
.frage__antwort p:last-child { margin-bottom: 0; }

/* Startseite: Ortsangabe unter der Einleitung, Fragen-Hinweis */
.einleitung__ort { font-size: 1.05rem; line-height: 1.6; color: var(--tinte-leise); margin-top: 1.25rem; }
.kita--fragen { border-bottom: 0; border-top: 1px solid var(--linie); }

/* Längere Seitentitel: etwas kleiner, Trennung nur an Bindestrichen bzw. automatisch auf dem Handy */
.held h1 { max-width: 20ch; }
.seitenkopf h1 { font-size: clamp(1.9rem, 1.35rem + 2.3vw, 3rem); max-width: 24ch; }
@media (max-width: 40rem) { h1 { hyphens: auto; } }