/* Freie Kita Dortmund e. V. — Design-System (Phase 2)
   Tokens dokumentiert in ../design-system.md — bei Abweichung gilt diese Datei. */

@font-face {
  font-family: 'Baloo 2';
  font-weight: 600;
  font-style: normal;
  src: url('fonts/baloo2-600.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Baloo 2';
  font-weight: 700;
  font-style: normal;
  src: url('fonts/baloo2-700.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  font-weight: 400;
  font-style: normal;
  src: url('fonts/nunito-400.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  font-weight: 700;
  font-style: normal;
  src: url('fonts/nunito-700.woff2') format('woff2');
  font-display: swap;
}

:root {
  /* Marke */
  --color-brand: #E46E00;

  /* Themen-Akzente */
  --tint-orange: #FBEADA; --deep-orange: #8A4300;
  --tint-blue:   #E3EEF3; --deep-blue:   #2E5A70; --color-accent-blue: #4C86A8;
  --tint-green:  #E6EFE4; --deep-green:  #2F5C3D; --color-accent-green: #4F8F63;
  /* etwas dunklere Varianten von Blau/Grün für Flächen mit Text direkt
     darauf (Stempel, aktive Pills) – die Basistöne erreichen dort mit
     weißem Text nur 3.9:1/3.86:1 statt der nötigen 4.5:1 (WCAG AA) */
  --color-accent-blue-solid: #447897;
  --color-accent-green-solid: #478059;

  /* Neutrale */
  --color-bg: #EFE3D3;
  --color-surface: #FBF5EA;
  --color-ink: #3B2A2E;
  --color-ink-muted: #5C4A47;
  --color-ink-faint: #8A7A72;

  /* Typografie */
  --font-display: 'Baloo 2', ui-rounded, 'Segoe UI', sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;
  --text-h1: clamp(1.5rem, 3.2vw, 2.05rem);
  --text-body: 1rem;
  --text-small: 0.82rem;
  --text-caption: 0.72rem;

  /* Layout */
  --content-width: 1280px;
  /* Gemeinsame rechte Kante für Fließtext/Listen/Bilder im Hauptinhalt –
     vorher hatten p/ul (62ch) und img (640px) leicht unterschiedliche
     Breiten und liefen dadurch an keiner gemeinsamen Sichtachse aus. */
  --content-measure: 640px;
}

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

html { scroll-behavior: smooth; height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.65;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

a { color: inherit; }

.wrap {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---------- Header ---------- */

.site-header {
  padding: .75rem 0;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), background-color .3s ease, box-shadow .3s ease;
  z-index: 100;
}

.site-header.is-sticky-pinned {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: var(--color-bg);
  box-shadow: 0 6px 22px rgba(59, 42, 46, .14);
  transform: translateY(0);
}

.site-header.is-sticky-unpinned {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: var(--color-bg);
  transform: translateY(-100%);
}

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .3rem .7rem .3rem .3rem;
  background: var(--color-surface);
  border-radius: 12px;
  box-shadow: 0 3px 12px rgba(59, 42, 46, .1);
  text-decoration: none;
  flex: none;
  transition: transform .2s cubic-bezier(.34, 1.56, .64, 1);
}

.brand:hover {
  transform: translateY(-1px);
}

.brand img.logo {
  display: block;
  height: 36px;
  width: auto;
  border-radius: 6px;
}

.brand-name {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-ink);
  letter-spacing: -0.01em;
}

.brand-sub {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .64rem;
  color: var(--color-ink-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ---------- Navigation: Desktop & CTA ---------- */

.nav-desktop { display: none; }
.nav-cta-desktop { display: none; }

@media (min-width: 760px) {
  .nav-desktop { display: block; }
  .nav-mobile { display: none; }

  /* 3-Spalten-Grid für perfekte Symmetrie: Logo links (1fr), Menü genau mittig (auto), CTA rechts (1fr) */
  .header-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.5rem;
  }

  /* Logo-Karte übernimmt die exakte 195px-Breite des schwebenden Sekundärmenüs (.sidebar-toc) */
  .brand {
    justify-self: start;
    width: 195px;
    box-sizing: border-box;
  }
  .nav-desktop { justify-self: center; }

  .nav-cta-desktop {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: .4rem;
    padding: .45rem 1.1rem;
    border-radius: 999px;
    background: var(--color-brand);
    color: #352529;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--text-small);
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 3px 12px rgba(228, 110, 0, .25);
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
    flex: none;
  }

  .nav-cta-desktop:hover,
  .nav-cta-desktop:focus-visible {
    background: #d46300;
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(228, 110, 0, .35);
  }

  .nav-cta-desktop[aria-current="page"] {
    background: var(--deep-orange);
    color: #ffffff;
    box-shadow: 0 3px 12px rgba(138, 67, 0, .3);
  }
}

.nav-desktop ul {
  list-style: none;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem;
  margin: 0;
  padding: .35rem .45rem;
  border-radius: 999px;
  background: rgba(59, 42, 46, .06);
}

.nav-desktop a {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-small);
  padding: .45rem .85rem;
  border-radius: 999px;
  color: var(--color-ink-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease, background-color .15s ease, transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .15s ease;
}

.nav-desktop a:hover,
.nav-desktop a:focus-visible {
  color: var(--color-ink);
  background: var(--color-surface);
  transform: translateY(-1px);
}

/* Icon in Nav-Links mit spielerischer Wiggle-Motion bei Hover */
.nav-icon {
  flex: none;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}

.nav-desktop a:hover .nav-icon {
  transform: scale(1.22) rotate(-8deg);
}

/* Farbkonsistenz mit den Kacheln der Startseite (1=Orange, 2=Blau, 3=Grün): */

/* 1. Über uns (Orange Kachel) */
.nav-desktop a[href*="wir-ueber-uns"]:hover,
.nav-desktop a[href*="wir-ueber-uns"][aria-current="page"] {
  background: var(--tint-orange);
  color: var(--deep-orange);
  box-shadow: inset 0 0 0 1px rgba(228, 110, 0, .28);
}

/* 2. Das ist uns wichtig (Blaue Kachel) */
.nav-desktop a[href*="was-uns-wichtig-ist"]:hover,
.nav-desktop a[href*="was-uns-wichtig-ist"][aria-current="page"] {
  background: var(--tint-blue);
  color: var(--deep-blue);
  box-shadow: inset 0 0 0 1px rgba(68, 120, 151, .28);
}

/* 3. Eltern der Kita (Grüne Kachel) */
.nav-desktop a[href*="elternarbeit"]:hover,
.nav-desktop a[href*="elternarbeit"][aria-current="page"] {
  background: var(--tint-green);
  color: var(--deep-green);
  box-shadow: inset 0 0 0 1px rgba(71, 128, 89, .28);
}

/* Start-Seite (Neutral/Warm) */
.nav-desktop a[href="index.html"][aria-current="page"] {
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: inset 0 0 0 1px rgba(59, 42, 46, .15);
}

/* ---------- Navigation: Mobile (Hamburger, kein JS) ---------- */

/* ---------- Mobile Header Actions & Kontakt-CTA-Icon ---------- */
.header-actions-mobile {
  display: flex;
  align-items: center;
  gap: .5rem;
}

@media (min-width: 760px) {
  .header-actions-mobile {
    display: none;
  }
}

.nav-cloud-mobile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(59, 42, 46, .06);
  color: var(--color-ink);
  text-decoration: none;
  transition: background-color .15s ease, transform .15s ease;
}

.nav-cloud-mobile:hover,
.nav-cloud-mobile:focus-visible {
  background: rgba(59, 42, 46, .12);
  transform: scale(1.05);
}

.nav-cloud-mobile .nav-icon {
  width: 18px;
  height: 18px;
  margin: 0;
}

.nav-cta-mobile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--color-brand);
  color: #352529;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(228, 110, 0, .28);
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.nav-cta-mobile:hover,
.nav-cta-mobile:focus-visible {
  background: #d46300;
  transform: scale(1.06);
  box-shadow: 0 5px 14px rgba(228, 110, 0, .35);
}

.nav-cta-mobile[aria-current="page"] {
  background: var(--deep-orange);
  color: #ffffff;
}

.nav-cta-mobile .nav-icon {
  width: 18px;
  height: 18px;
  margin: 0;
}

.nav-mobile {
  position: relative;
}

.nav-mobile > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(59, 42, 46, .06);
}

.nav-mobile > summary::-webkit-details-marker { display: none; }
.nav-mobile > summary::marker { content: ""; }

.hamburger,
.hamburger::before,
.hamburger::after {
  width: 18px;
  height: 2px;
  background: var(--color-ink);
  border-radius: 2px;
  display: block;
}

.hamburger {
  position: relative;
}

.hamburger::before,
.hamburger::after {
  content: "";
  position: absolute;
  left: 0;
}

.hamburger::before { top: -6px; }
.hamburger::after { top: 6px; }

.nav-mobile[open] > summary { background: var(--color-ink); }
.nav-mobile[open] .hamburger,
.nav-mobile[open] .hamburger::before,
.nav-mobile[open] .hamburger::after { background: var(--color-bg); }

.nav-mobile .panel {
  position: absolute;
  top: calc(100% + .6rem);
  right: 0;
  min-width: 220px;
  max-width: calc(100vw - 3rem);
  background: var(--color-surface);
  border-radius: 16px;
  box-shadow: 0 16px 32px rgba(59, 42, 46, .2);
  padding: .6rem;
  z-index: 30;
}

.nav-mobile ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-mobile li + li { margin-top: .1rem; }

.nav-mobile a {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-small);
  padding: .65rem .8rem;
  border-radius: 10px;
  color: var(--color-ink-muted);
  text-decoration: none;
}

.nav-mobile a:hover,
.nav-mobile a:focus-visible {
  background: var(--color-bg);
  color: var(--color-ink);
}

.nav-mobile a[aria-current="page"] {
  background: var(--color-brand);
  color: #352529;
}

/* ---------- Seiten-interne Sprungmarken ("Auf dieser Seite") ----------
   Für die konsolidierten Seiten wir-ueber-uns.html / was-uns-wichtig-ist.html,
   nicht Teil der Hauptnavigation. Vorherige Version war eine sticky Pill-
   Zeile, die bei vielen Ankern (8 auf was-uns-wichtig-ist.html) horizontal
   scrollen musste – ohne jeden Hinweis, dass dort noch mehr Inhalt folgt,
   ein bekanntes Auffindbarkeits-Antipattern (siehe Recherche unten). Jetzt
   ein <details>/<summary>-Aufklapp-Element, exakt dasselbe Muster wie das
   mobile Hamburger-Menü im Header: zusammengeklappt eine kompakte, sticky
   Leiste ("Auf dieser Seite ▾" + aktueller Abschnitt), aufgeklappt zeigt
   sie alle Anker als frei umbrechende Pills (kein Scroll nötig). Aktiver
   Abschnitt weiterhin per Scrollspy (subnav.js, IntersectionObserver)
   markiert und zusätzlich im Leisten-Text sichtbar, auch zugeklappt. */

/* ---------- 2-Spalten-Layout (Desktop Sidebar + Content) ---------- */

/* ---------- 2-Spalten-Layout (Desktop Sidebar + Content) ---------- */

.page-with-sidebar {
  display: block;
}

.sidebar-toc {
  display: none;
}

@media (min-width: 960px) {
  /* Exakt selbe 3-Spalten-Struktur wie .header-bar: 1fr 640px 1fr
     Dadurch fluchtet der Hauptinhalt in Spalte 2 exakt mit der linken Kante der Hauptnavigation! */
  .page-with-sidebar {
    display: grid;
    grid-template-columns: 1fr 640px 1fr;
    gap: 2rem;
    align-items: start;
  }

  .main-content {
    grid-column: 2;
    width: 100%;
    max-width: 640px;
  }

  /* Sekundärmenü im linken Bereich (Spalte 1), vertikal im Viewport zentriert */
  .sidebar-toc {
    display: block;
    grid-column: 1;
    justify-self: start;
    position: sticky;
    top: calc(50vh - 130px);
    width: 100%;
    max-width: 195px;
    padding: .4rem 0;
    background: transparent;
    border-left: 1px solid rgba(59, 42, 46, .12);
  }

  .toc-title {
    display: block;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: .76rem;
    color: var(--color-ink-faint);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .6rem;
    padding-left: .8rem;
  }

  .sidebar-toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .sidebar-toc li + li {
    margin-top: .2rem;
  }

  /* 1. Eintrag ("Überblick"): Neutrale/sanfte Einfärbung */
  .sidebar-toc li:nth-child(1) a { --toc-tint: rgba(59, 42, 46, .07); --toc-deep: var(--color-ink); }

  /* Ab Sektion 1 (2. Li-Eintrag): Exakt synchrone Farbfolge zu den Stempeln 1=Orange, 2=Blau, 3=Grün */
  .sidebar-toc li:nth-child(3n+2) a { --toc-tint: var(--tint-orange); --toc-deep: var(--deep-orange); }
  .sidebar-toc li:nth-child(3n+3) a { --toc-tint: var(--tint-blue);   --toc-deep: var(--deep-blue); }
  .sidebar-toc li:nth-child(3n+4) a { --toc-tint: var(--tint-green);  --toc-deep: var(--deep-green); }

  .sidebar-toc a {
    display: block;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--text-small);
    color: var(--color-ink-muted);
    text-decoration: none;
    padding: .35rem .65rem;
    margin-left: -1px;
    border-left: 2px solid transparent;
    border-radius: 0 8px 8px 0;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
  }

  .sidebar-toc a:hover,
  .sidebar-toc a:focus-visible {
    color: var(--color-ink);
    border-left-color: rgba(59, 42, 46, .25);
  }

  .sidebar-toc a[aria-current="true"] {
    background: var(--toc-tint);
    color: var(--toc-deep);
    border-left-color: var(--toc-deep);
    font-weight: 700;
  }
}

/* ---------- Themen-Abschnitte (Akkordeon-Karten mobil / ausgeklappt desktop) ---------- */

.topic-section {
  max-width: var(--content-measure);
  margin: 1.2rem auto 0;
  background: var(--color-surface);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(59, 42, 46, .07);
  overflow: hidden;
  scroll-margin-top: 110px;
}

.topic-section:last-of-type {
  margin-bottom: 3.5rem;
}

.topic-summary {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1rem 1.2rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.topic-summary::-webkit-details-marker { display: none; }
.topic-summary::marker { content: ""; }

.topic-summary h2 {
  margin: 0;
  font-size: 1.2rem;
  flex: 1;
}

.acc-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(59, 42, 46, .06);
  flex: none;
  transition: transform .2s ease, background-color .2s ease;
}

.acc-icon::before {
  content: "▾";
  font-size: .85rem;
  color: var(--color-ink-muted);
}

.topic-section[open] .acc-icon {
  transform: rotate(180deg);
  background: rgba(59, 42, 46, .12);
}

.topic-body {
  padding: 0 1.2rem 1.2rem;
}

.topic-body p:first-child {
  margin-top: 0;
}

/* Fotos in Themen-Abschnitten: Kompakt, im Text schwebend, sanfter Thema-Rahmen & vergrößerbar */
.topic-body img {
  display: block;
  width: 100%;
  max-width: 260px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
  cursor: zoom-in;
  margin: 1rem auto;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.topic-body img:hover {
  transform: scale(1.02);
}

/* Sanfter Thema-Rahmen + Schatten in der Farbe des jeweiligen Themen-Stempels */
.topic-section:has(.topic-stamp--orange) .topic-body img {
  border: 3px solid var(--tint-orange);
  box-shadow: 0 6px 18px rgba(228, 110, 0, .14);
}

.topic-section:has(.topic-stamp--blue) .topic-body img {
  border: 3px solid var(--tint-blue);
  box-shadow: 0 6px 18px rgba(46, 90, 112, .14);
}

.topic-section:has(.topic-stamp--green) .topic-body img {
  border: 3px solid var(--tint-green);
  box-shadow: 0 6px 18px rgba(47, 92, 61, .14);
}

@media (min-width: 640px) {
  .topic-body img {
    float: right;
    margin: .2rem 0 1rem 1.4rem;
  }

  /* Abwechselnd rechts/links im Text umbrechen für lebendige Optik */
  .topic-section:nth-of-type(even) .topic-body img {
    float: left;
    margin: .2rem 1.4rem 1rem 0;
  }

  .topic-body::after {
    content: "";
    display: table;
    clear: both;
  }
}

@media (min-width: 960px) {
  .topic-section {
    background: transparent;
    box-shadow: none;
    margin-top: 2.8rem;
    overflow: visible;
  }

  .topic-summary {
    cursor: default;
    padding: 0;
    margin-bottom: 1rem;
    pointer-events: none;
  }

  .acc-icon {
    display: none;
  }

  .topic-body {
    padding: 0;
  }
}

/* ---------- Hauptinhalt ---------- */

main {
  flex: 1 0 auto;
  padding: 2.2rem 0 3.5rem;
}

/* Großer Seiten-Icon-Stempel inline neben h1 im Hauptinhalt */
.page-title-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  max-width: var(--content-measure);
  margin: 0 auto 1.4rem;
}

.page-title-wrap h1 {
  margin: 0;
  text-align: left;
}

.page-hero-stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(59, 42, 46, .1);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

.page-hero-stamp:hover {
  transform: scale(1.1) rotate(-6deg);
}

.page-hero-stamp svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.page-hero-stamp--orange {
  background: var(--tint-orange);
  color: var(--deep-orange);
  border: 2px solid rgba(228, 110, 0, .28);
}

.page-hero-stamp--blue {
  background: var(--tint-blue);
  color: var(--deep-blue);
  border: 2px solid rgba(68, 120, 151, .28);
}

.page-hero-stamp--green {
  background: var(--tint-green);
  color: var(--deep-green);
  border: 2px solid rgba(71, 128, 89, .28);
}

@media (min-width: 960px) {
  .main-content .page-title-wrap {
    justify-content: flex-start;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Gemeinsame zentrierte Spalte für den gesamten Textinhalt (h1/h2/p/ul/img/
   address) – vorher hingen diese Elemente linksbündig in der viel breiteren
   1280px-Seitenhülle, während .cards/.hero/.carousel/Sprungmarken-Nav die
   volle Breite nutzen. Das ließ jede Seite anders "verteilt" wirken, je
   nachdem, wie viel volle-Breite-Inhalt sie zufällig hatte. Jetzt teilen
   sich alle Textelemente auf jeder Seite dieselbe zentrierte Spalte;
   .cards/.hero/.carousel/Subnav bleiben davon unberührt (eigene Selektoren,
   keine Breiten-/Margin-Vorgabe hier). */

main h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h1);
  line-height: 1.2;
  max-width: var(--content-measure);
  margin: 1.2rem auto 2.2rem;
  text-align: center;
  text-wrap: balance;
}

@media (min-width: 960px) {
  .main-content h1 {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
    margin-top: 1.2rem;
    margin-bottom: 2.5rem;
  }
}

main p {
  color: var(--color-ink-muted);
  max-width: var(--content-measure);
  margin: 0 auto 1.2rem;
}

main a {
  color: var(--deep-blue);
  text-decoration-thickness: 1.5px;
}

main strong { color: var(--color-ink); }

address {
  font-style: normal;
  color: var(--color-ink-muted);
  max-width: var(--content-measure);
  margin: 0 auto 1.2rem;
  line-height: 1.6;
}

main h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.35rem, 3vw, 1.7rem);
  line-height: 1.2;
  max-width: var(--content-measure);
  margin: 2.6rem auto 1rem;
  text-wrap: balance;
}

main section:first-of-type h2 { margin-top: 1.2rem; }

main ul {
  color: var(--color-ink-muted);
  max-width: var(--content-measure);
  margin: 0 auto 1.2rem;
  padding-left: 1.2rem;
}

main li + li { margin-top: .4rem; }

main img {
  display: block;
  width: 100%;
  max-width: var(--content-measure);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  height: auto;
  margin: 1.5rem auto;
  border: 1px solid rgba(59, 42, 46, .14);
}

.hero img {
  max-width: 100%;
  max-height: 420px;
  object-fit: cover;
}

/* ---------- Themenkarten (für Was-uns-wichtig-ist & Co.) ---------- */

.cards {
  display: flex;
  flex-wrap: wrap;
  /* zentriert statt Flex-Start: bei 4 Karten bleibt auf breiten Screens meist
     eine Restzeile mit einer einzelnen Karte übrig, und einspaltig (Mobile,
     s.u.) hing die schmalere Karte sonst sichtbar linksbündig in der vollen
     Zeilenbreite statt in der Seite zentriert zu wirken. */
  justify-content: center;
  gap: 1.4rem;
  margin: 2rem 0;
}

.card {
  display: block;
  /* Statt fester 230px-Breite gleichmäßig auf die volle Zeilenbreite
     verteilt (vorher blieb bei 1280px viel leerer Raum rechts der drei
     schmalen Karten). */
  flex: 1 1 260px;
  padding: 1.5rem 1.3rem;
  background: var(--tint);
  border: 1px solid var(--accent);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  /* dezente Basis-Elevation, damit die Karten sich von der Fläche abheben,
     nicht erst beim Hover (passt zur Logo-Badge, die immer einen Schatten hat) */
  box-shadow: 0 4px 12px rgba(59, 42, 46, .08);
  transition: box-shadow .15s ease, filter .15s ease;
}

a.card:hover,
a.card:focus-visible {
  filter: brightness(1.03);
  box-shadow: 0 10px 24px rgba(59, 42, 46, .16);
}

.card:nth-child(1) { --accent: var(--color-brand);       --accent-solid: var(--color-brand);             --tint: var(--tint-orange); --deep: var(--deep-orange); transform: rotate(-1.4deg); }
.card:nth-child(2) { --accent: var(--color-accent-blue);  --accent-solid: var(--color-accent-blue-solid);  --tint: var(--tint-blue);   --deep: var(--deep-blue);  transform: rotate(.8deg); margin-top: .6rem; }
.card:nth-child(3) { --accent: var(--color-accent-green); --accent-solid: var(--color-accent-green-solid); --tint: var(--tint-green);  --deep: var(--deep-green); transform: rotate(-.5deg); }
/* 4. Karte (seit "Elternarbeit" dazukam): kein vierter Akzent erfunden,
   sondern wie in design-system.md für diesen Fall vorgesehen die drei
   bestehenden Farben zyklisch wiederholt – wieder Orange, wie Karte 1. */
.card:nth-child(4) { --accent: var(--color-brand);       --accent-solid: var(--color-brand);             --tint: var(--tint-orange); --deep: var(--deep-orange); transform: rotate(.9deg); }

.card-header {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: .65rem;
}

.card .stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  /* --accent-solid statt --accent: die Basistöne von Blau/Grün erreichen
     mit weißem Text nur 3.9:1/3.86:1 (WCAG AA braucht 4.5:1) */
  background: var(--accent-solid);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .85rem;
  flex: none;
}

.card .stamp svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.card .tag {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  color: var(--deep);
  line-height: 1.2;
}

.card p {
  font-size: var(--text-small);
  margin: 0;
}

@media (max-width: 700px) {
  .card { transform: none !important; margin-top: 0 !important; flex-basis: 100%; width: 100%; max-width: 340px; }
}

/* ---------- Abschnitts-Überschriften mit Themen-Stempel ----------
   Für Wir über uns / Was uns wichtig ist: Stempel + h2 in einer Zeile,
   dieselben 3 Akzentfarben wie .card, zyklisch wiederverwendet statt
   einer vierten Farbe (design-system.md). Über :has() färben sich auch
   die h2-Schrift und der Bildrahmen im Abschnitt passend mit ein – mehr
   Farbe im Seitenverlauf, ohne neue Akzente einzuführen. */

.section-heading {
  display: flex;
  align-items: center;
  gap: .8rem;
  max-width: var(--content-measure);
  margin: 2.6rem auto 1rem;
}

main section:first-of-type .section-heading { margin-top: 1.2rem; }

.section-heading h2 { margin: 0; }

.topic-stamp {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .85rem;
}

.topic-stamp--orange { background: var(--color-brand); }
.topic-stamp--blue { background: var(--color-accent-blue-solid); }
.topic-stamp--green { background: var(--color-accent-green-solid); }

main section:has(.topic-stamp--orange) h2 { color: var(--deep-orange); }
main section:has(.topic-stamp--blue) h2 { color: var(--deep-blue); }
main section:has(.topic-stamp--green) h2 { color: var(--deep-green); }

main section:has(.topic-stamp--orange) img { border-color: var(--color-brand); border-width: 2px; }
main section:has(.topic-stamp--blue) img { border-color: var(--color-accent-blue); border-width: 2px; }
main section:has(.topic-stamp--green) img { border-color: var(--color-accent-green); border-width: 2px; }

/* ---------- Call to Action ---------- */

.btn-cta {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-small);
  background: var(--color-brand);
  /* etwas dunkler als --color-ink: bei Button-Textgröße reicht --color-ink
     allein nicht für WCAG-AA-Kontrast (4.19:1 statt 4.5:1) auf Orange */
  color: #352529;
  border: none;
  border-radius: 999px;
  padding: .85rem 1.8rem;
  text-decoration: none;
  cursor: pointer;
}

.btn-cta:hover,
.btn-cta:focus-visible {
  filter: brightness(1.05);
}

/* ---------- Footer ---------- */

.site-footer {
  position: relative;
  border-top: 1px solid rgba(59, 42, 46, .14);
  padding: 1.6rem 0 2.4rem;
  text-align: center;
}

/* Extra Bodenabstand, damit der fixierte "Zurück nach oben"-Button (unten
   rechts, siehe .back-to-top) auf schmalen Viewports nicht die Links
   Impressum/Datenschutz überdeckt – die Fußzeile ist dort zentriert und
   fast so breit wie der Viewport, der Button säße sonst genau darauf. */
@media (max-width: 959px) {
  .site-footer {
    padding-bottom: 5.5rem;
  }
}

/* Dünner Farbstreifen als durchgehendes, seitenübergreifendes Farb-Element
   (auf jeder der 9 Seiten sichtbar) – dieselben 3 Akzentfarben wie überall
   sonst, keine neue Farbe. */
.site-footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--color-brand) 0 33%,
    var(--color-accent-blue) 33% 66%,
    var(--color-accent-green) 66% 100%
  );
}

.site-footer p {
  font-size: var(--text-caption);
  /* --color-ink-faint allein erreicht bei dieser Textgröße nur 3.25:1
     (WCAG-AA braucht 4.5:1 für Fließtext dieser Größe) */
  color: #6E615B;
  margin: 0;
}

.site-footer a {
  color: #6E615B;
  text-decoration: underline;
}

/* ---------- Karussell (Eindrücke-Seite) ---------- */

.carousel {
  position: relative;
  /* Vorher volle .wrap-Breite: bei breiten Screens waren dadurch bis zu 4
     Kacheln komplett und 2 weitere angeschnitten gleichzeitig sichtbar –
     dann ergibt weder "ein Bild anschauen" noch der Zähler ("11 / 19")
     einen erkennbaren Sinn, weil unklar ist, welche der ~6 Kacheln gerade
     "die aktuelle" sein soll. Wie bei einem klassischen Karussell auf eine
     Spaltenbreite begrenzt (dieselbe wie der Fließtext, --content-measure),
     damit klar erkennbar eine Kachel im Zentrum steht und links/rechts nur
     kurze Ausschnitte der Nachbarn hereinragen. */
  max-width: var(--content-measure);
  margin: 2rem auto;
}

.carousel-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.carousel-track::-webkit-scrollbar { display: none; }

.carousel-slide {
  flex: none;
  width: 68vw;
  margin: 0;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  background: var(--color-surface);
  border: 1px solid rgba(59, 42, 46, .14);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(59, 42, 46, .08);
  overflow: hidden;
  cursor: zoom-in;
}

@media (min-width: 700px) {
  .carousel-slide { width: 78%; }
}

.carousel-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  max-width: none;
  margin: 0;
  border: 0;
}

.carousel-slide figcaption {
  padding: .6rem .8rem .7rem;
  font-size: var(--text-caption);
  color: var(--color-ink-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Rand-Fade: Dezent und schmal, damit die angeschnittenen Nachbarbilder auf Mobilgeräten gut sichtbar bleiben */
.carousel::before,
.carousel::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1.2rem;
  max-width: 8%;
  pointer-events: none;
  z-index: 4;
  opacity: 1;
  transition: opacity .2s ease;
}

@media (min-width: 700px) {
  .carousel::before,
  .carousel::after {
    width: 2.5rem;
    max-width: 12%;
  }
}

.carousel::before {
  left: 0;
  background: linear-gradient(to right, var(--color-bg), transparent);
}

.carousel::after {
  right: 0;
  background: linear-gradient(to left, var(--color-bg), transparent);
}

.carousel.at-start::before,
.carousel.at-end::after {
  opacity: 0;
}

.carousel-counter-sep {
  font-weight: 400;
  opacity: .7;
}

.carousel-prev,
.carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: 1.4rem;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(59, 42, 46, .18);
  cursor: pointer;
}

.carousel-prev:hover, .carousel-prev:focus-visible,
.carousel-next:hover, .carousel-next:focus-visible {
  background: var(--color-ink);
  color: var(--color-bg);
}

@media (max-width: 699px) {
  .carousel-prev,
  .carousel-next {
    display: none !important;
  }
}

@media (min-width: 700px) {
  .carousel-prev { left: -1.2rem; }
  .carousel-next { right: -1.2rem; }
}

/* ---------- Lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(30, 20, 20, .88);
  z-index: 100;
}

.lightbox.is-open { display: flex; }

.lightbox-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
}

.lightbox img {
  max-width: 100%;
  max-height: calc(100vh - 9rem);
  object-fit: contain;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .4);
}

.lightbox figcaption {
  max-width: 60ch;
  text-align: center;
  color: var(--color-bg);
  font-size: var(--text-small);
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-ink);
  line-height: 1;
  cursor: pointer;
}

.lightbox-close:hover, .lightbox-close:focus-visible,
.lightbox-prev:hover, .lightbox-prev:focus-visible,
.lightbox-next:hover, .lightbox-next:focus-visible {
  background: var(--color-ink);
  color: var(--color-bg);
}

.lightbox-close {
  top: 1.2rem;
  right: 1.2rem;
  font-size: 1.6rem;
}

.lightbox-prev,
.lightbox-next {
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
}

.lightbox-prev { left: .8rem; }
.lightbox-next { right: .8rem; }

@media (min-width: 700px) {
  .lightbox-prev { left: 1.5rem; }
  .lightbox-next { right: 1.5rem; }
}

/* ---------- Floating "Zurück nach oben"-Button ---------- */
.back-to-top {
  position: fixed;
  bottom: 1.6rem;
  right: 1.6rem;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--color-ink);
  border: 1.5px solid rgba(59, 42, 46, .18);
  box-shadow: 0 6px 20px rgba(59, 42, 46, .18);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(.88);
  transition: opacity .25s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1), visibility .25s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.back-to-top:hover,
.back-to-top:focus-visible {
  background: var(--tint-orange);
  color: var(--deep-orange);
  border-color: var(--color-brand);
  box-shadow: 0 8px 24px rgba(228, 110, 0, .28);
  transform: translateY(-2px) scale(1.06);
}

.back-to-top svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* ---------- Akkordeon "Alle aufklappen"-Button (nur mobil) ---------- */
.accordion-toggle-all {
  display: none !important;
}

@media (max-width: 959px) {
  .accordion-toggle-all {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin: 0 0 1.2rem;
    padding: .5rem 1.1rem;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--text-small);
    color: var(--deep-blue);
    background: var(--tint-blue);
    border: 1.5px solid rgba(68, 120, 151, .3);
    border-radius: 999px;
    box-shadow: 0 3px 10px rgba(59, 42, 46, .08);
    cursor: pointer;
    transition: background-color .15s ease, transform .15s ease;
  }

  .accordion-toggle-all:hover,
  .accordion-toggle-all:focus-visible {
    background: #d9e9f3;
    transform: translateY(-1px);
  }

  .accordion-toggle-all .toggle-icon {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}

/* ---------- Infobox auf Kontaktseite: Wie geht es weiter ---------- */
.next-steps-info {
  background: var(--tint-orange);
  border: 1.5px solid rgba(228, 110, 0, .25);
  border-radius: 16px;
  padding: 1.3rem 1.5rem;
  margin: 2rem 0;
  max-width: var(--content-measure);
}

.next-steps-info h2 {
  font-size: 1.15rem;
  color: var(--deep-orange);
  margin: 0 0 .6rem;
}

.next-steps-info p {
  font-size: var(--text-small);
  margin: 0 0 .5rem;
}

.next-steps-info p:last-child {
  margin-bottom: 0;
}

/* ---------- Visible Play/Pause Toggle Button in Carousel ---------- */
.carousel-playpause {
  position: absolute;
  top: .7rem;
  right: .7rem;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 999px;
  background: rgba(59, 42, 46, .72);
  color: var(--color-bg);
  font-size: .8rem;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
  transition: background-color .15s ease, transform .15s ease;
}

.carousel-playpause:hover,
.carousel-playpause:focus-visible {
  background: rgba(59, 42, 46, .92);
  transform: scale(1.08);
}