/* =========================================================================
   blindklusiv.ch — Design System "Optical Guide" (Design-Alternative)
   Barrierefreiheit: WCAG 2.2 AA. Alle Farbpaare sind kontraststark geprüft.
   Schriften: Lexend (Display/Headings, klar & modern) + Atkinson Hyperlegible
   (Fliesstext — von der Braille Institute eigens für Leser:innen mit
   Sehbeeinträchtigung entwickelt und optimiert).
   Palette: Forest-Teal (Primär) + Spearmint (Akzent) + Navy (dunkle Szenen)
   + warmes Tan (Sektionsflächen) + Blue (dritte Akzentfarbe).
   Inhalt, Struktur, Barrierefreiheit und Responsive-Verhalten identisch zur
   ursprünglichen Design-Version — nur Farben, Schriften und Deko-Elemente
   wurden angepasst.
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400&family=Lexend:wght@500;600;700;800&display=swap");

:root {
  /* Farben (alle gegen #FFFFFF bzw. #041C2C auf AA geprüft) */
  --color-bg: #FDFCFB;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F8F7F2;
  --color-ink: #333132;          /* Fließtext auf hell: ~12.9:1 */
  --color-ink-muted: #565354;    /* gedeckter Text: ~7.6:1 auf Weiss */
  --color-primary: #015258;      /* Forest-Teal, Text/Icons auf weiß: 8.9:1 */
  --color-primary-dark: #014149;
  --color-primary-soft: #E6F2F3;
  --color-accent: #016E77;       /* Spearmint-800, Text auf weiß: 6.0:1 */
  --color-accent-soft: #E6FAF7;
  --color-teal: #1D53A5;         /* dritte Akzentfarbe (Blue-600), Text auf weiß: 7.4:1 */
  --color-teal-soft: #E8F0FA;
  --color-amber: #8A5B00;
  --color-amber-soft: #FFF3D6;
  --color-on-primary: #FFFFFF;   /* Text auf --color-primary: 8.9:1 */
  --color-on-accent: #FFFFFF;    /* Text auf --color-accent: 6.0:1 */
  --color-border: #E3E2DA;
  --color-focus: #1D53A5;        /* Fokusring-Akzent (nur informativ, Doppelring bleibt universell) */
  --color-success: #1F7A4D;

  /* Dunkles Farbschema (für atmosphärische Szenen & Kontrastblöcke) */
  --color-dark-bg: #041C2C;
  --color-dark-surface: #0B2A3D;
  --color-dark-border: #16394D;
  --color-dark-text: #DFE8EE;
  --color-dark-muted: #B7C6D2;   /* ~9.9:1 auf --color-dark-bg */
  --color-dark-accent: #06DFC7;  /* Spearmint-500, Akzent auf Dunkel: 10.3:1 */

  --font-body: "Atkinson Hyperlegible", "Iowan Old Style", "Palatino Linotype", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Lexend", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --maxw: 1180px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6.5rem;

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 20px;

  --shadow-soft: 0 20px 50px -25px rgba(4, 28, 44, 0.28);
  --shadow-card: 0 12px 26px -16px rgba(4, 28, 44, 0.24);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-s: 0.25s;
  --dur-m: 0.6s;
  --dur-l: 0.9s;
}

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

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-bg);
  line-height: 1.65;
  font-size: 1.0625rem;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* fängt die Dekor-Bögen ab, ohne position:sticky der Scroll-Szenen zu brechen */
}

img, svg { max-width: 100%; height: auto; display: block; }

/* Instagram Embed & iframes bleiben im Grid */
iframe, embed, .instagram-container {
  max-width: 100%;
  width: 100%;
  overflow-x: auto;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.12;
  color: var(--color-ink);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-2);
}

h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); }
h4 { font-size: 1.15rem; }

p { margin: 0 0 var(--space-2); max-width: 62ch; }
p.lead { font-size: 1.25rem; color: var(--color-ink-muted); max-width: 48ch; }

ul, ol { padding-left: 1.3em; }
li { margin-bottom: 0.5em; }

a {
  color: var(--color-primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover { color: var(--color-primary-dark); }

/* Sichtbarer, kräftiger Fokus-Indikator überall (WCAG 2.2 Focus Appearance, SC 1.4.11).
   Doppelring (hell + dunkel) statt Einzelfarbe: so ist der Indikator auf JEDEM
   Hintergrund der Seite (hell, dunkel, lila, pink) mit ausreichendem Kontrast
   sichtbar, weil die beiden Ringe stets mind. 17:1 Kontrast zueinander haben. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  border-radius: 4px;
  box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 6px #041C2C;
}
.section-dark a:focus-visible,
.section-dark button:focus-visible {
  box-shadow: 0 0 0 3px #041C2C, 0 0 0 6px #FFFFFF;
}

/* Skip-Link */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  background: var(--color-ink);
  color: #fff;
  padding: 0.85rem 1.4rem;
  border-radius: var(--radius-s);
  z-index: 1000;
  font-weight: 700;
  transition: top var(--dur-s) var(--ease-out);
}
.skip-link:focus {
  top: 1rem;
}

.container {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Header / Navigation ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid var(--color-border);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
}
.site-header .container {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  padding-block: 0.35rem;
  gap: var(--space-2);
  max-width: 1380px;      /* breiter als der Inhaltsbereich, damit die Zeile Platz hat */
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 0;
}
.brand:hover { color: var(--color-ink); }
.brand .dot { color: var(--color-accent); }

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: nowrap;
  min-width: 0;
}
.main-nav ul {
  list-style: none;
  display: flex;
  gap: 1.15rem;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;      /* das Menueband bleibt auf dem Desktop einzeilig */
  white-space: nowrap;
}
.main-nav a {
  color: var(--color-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.98rem;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  border-bottom: 2px solid transparent;
}
.main-nav a:hover {
  color: var(--color-primary);
  background: var(--color-primary-soft);
}
.main-nav a[aria-current="page"] {
  color: var(--color-primary-dark);
  box-shadow: inset 0 -3px 0 var(--color-accent);
  border-radius: 0;
}

.nav-toggle {
  display: none;
  background: none;
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-s);
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-s) var(--ease-out), box-shadow var(--dur-s) var(--ease-out), background var(--dur-s);
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.btn-primary:hover { background: var(--color-primary-dark); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-card); }
.btn-secondary {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-secondary:hover { background: var(--color-primary-soft); color: var(--color-primary-dark); transform: translateY(-2px); }
.btn-accent { background: var(--color-accent); color: var(--color-on-accent); }
.btn-accent:hover { background: #013940; transform: translateY(-2px); box-shadow: var(--shadow-card); }
.btn-block { width: 100%; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-block: clamp(3rem, 8vw, 6.5rem) clamp(2.5rem, 6vw, 5rem);
}
.hero::after {
  content: "";
  position: absolute;
  right: -12%;
  top: -35%;
  width: 46vw;
  height: 46vw;
  max-width: 620px;
  max-height: 620px;
  border-radius: 50%;
  border: 2px solid rgba(1, 82, 88, 0.10);
  box-shadow: 0 0 0 60px rgba(1, 82, 88, 0.03);
  pointer-events: none;
  z-index: 0;
}
.hero .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-5);
  align-items: center;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: var(--color-accent-soft);
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  margin-bottom: var(--space-2);
}
.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: var(--space-3);
}
.hero-art {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-l);
  background: linear-gradient(160deg, var(--color-primary-soft), #fff 60%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-soft);
}
.hero-art svg { width: 78%; height: auto; }

/* Blob decorations */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.5;
  z-index: -1;
}

/* ---------- Sections ---------- */
section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section-alt {
  position: relative;
  background: var(--color-surface-alt);
}
.section-alt::after {
  content: "";
  position: absolute;
  right: -14%;
  bottom: -55%;
  width: 40vw;
  height: 40vw;
  max-width: 560px;
  max-height: 560px;
  border-radius: 50%;
  border: 2px solid rgba(1, 82, 88, 0.10);
  box-shadow: 0 0 0 60px rgba(1, 82, 88, 0.03);
  pointer-events: none;
  z-index: 0;
}
.section-alt > .container { position: relative; z-index: 1; }
.section-dark {
  position: relative;
  background: var(--color-dark-bg);
  color: #fff;
}
.section-dark::after {
  content: "";
  position: absolute;
  left: -10%;
  bottom: -55%;
  width: 42vw;
  height: 42vw;
  max-width: 600px;
  max-height: 600px;
  border-radius: 50%;
  border: 2px solid rgba(6, 223, 199, 0.28);
  box-shadow: 0 0 0 60px rgba(6, 223, 199, 0.04);
  pointer-events: none;
  z-index: 0;
}
.section-dark > .container { position: relative; z-index: 1; }
.section-dark h2, .section-dark h3 { color: #fff; }
.section-dark p { color: #B7C6D2; }

.section-head {
  max-width: 46rem;
  margin-bottom: var(--space-4);
}

/* Reveal-on-scroll (Apple-artiges Einblenden) */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-l) var(--ease-out), transform var(--dur-l) var(--ease-out);
  will-change: transform, opacity;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger.is-visible > * { transition-delay: calc(var(--i, 0) * 90ms); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * {
    transition: opacity 0.2s linear !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ---------- Stat grid ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  padding: var(--space-4) var(--space-3);
  text-align: left;
}
.stat-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 4vw, 3rem);
  color: var(--color-primary);
  display: block;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.stat-card p { margin: 0; font-size: 0.95rem; color: var(--color-ink-muted); }

/* ---------- Cards / services ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--space-3);
}

/* Zielgruppen (ZRM): alle 4 Karten in einer Reihe auf Desktop */
@media (min-width: 1080px) {
  .zielgruppen-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 640px) and (max-width: 1079px) {
  .zielgruppen-grid { grid-template-columns: repeat(2, 1fr); }
}
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-s) var(--ease-out), box-shadow var(--dur-s) var(--ease-out), border-color var(--dur-s);
}
a.card:hover, a.card:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card);
  border-color: var(--color-primary);
}
.card-icon {
  width: 54px; height: 54px;
  border-radius: var(--radius-s);
  background: var(--color-primary-soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primary);
}
.card h3 { margin-bottom: 0.3rem; }
.card p { margin: 0; color: var(--color-ink-muted); font-size: 0.97rem; }
.card .card-link {
  margin-top: auto;
  font-weight: 700;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* ---------- Angebot-Gruppen nach Zielgruppe (Startseite) ---------- */
.angebot-group + .angebot-group { margin-top: var(--space-4); }
.angebot-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin-bottom: var(--space-3);
  padding-left: 1rem;
  border-left: 4px solid var(--group-color);
}
.angebot-group-tag {
  margin: 0;
  background: var(--group-color-soft);
  color: var(--group-color);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  font-weight: 700;
  font-size: 0.92rem;
  white-space: nowrap;
}
.angebot-group-desc {
  margin: 0;
  color: var(--color-ink-muted);
}
.angebot-group .card-icon {
  background: var(--group-color-soft);
  color: var(--group-color);
}
.angebot-group .card .card-link {
  color: var(--group-color);
}
.angebot-group a.card:hover, .angebot-group a.card:focus-visible {
  border-color: var(--group-color);
}
.angebot-group-single .card { max-width: 460px; }
@media (min-width: 780px) {
  .angebot-group-single {
    display: flex;
    justify-content: flex-start;
  }
}
.angebot-group-hint {
  margin-top: var(--space-4);
  text-align: center;
  color: var(--color-ink-muted);
}

/* ---------- Sticky feature / pinned scroll panels (Apple-Stil) ---------- */
.pin-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: start;
}
.pin-feature .pin-visual {
  position: sticky;
  top: 6.5rem;
  aspect-ratio: 1/1;
  border-radius: var(--radius-l);
  background: linear-gradient(155deg, var(--color-primary-soft), #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.pin-feature .pin-visual svg { width: 70%; }
.pin-steps { display: flex; flex-direction: column; gap: var(--space-5); }
.pin-step {
  padding-block: var(--space-3);
  opacity: 0.4;
  transition: opacity var(--dur-m) var(--ease-out);
}
.pin-step.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .pin-step { opacity: 1; }
}

/* ---------- Beispiel-Liste ---------- */
.example-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1rem;
}
.example-list li {
  background: var(--color-surface);
  border-left: 5px solid var(--color-accent);
  border-radius: var(--radius-s);
  padding: 1.1rem 1.3rem;
  margin: 0;
  box-shadow: var(--shadow-card);
}

/* ---------- Zielgruppen-Chips ---------- */
.chip-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chip {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-weight: 600;
  font-size: 0.92rem;
}

/* ---------- Kontakt-Box (auf jeder Seite) ---------- */
.contact-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  padding: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.contact-box a.btn { flex-shrink: 0; }

/* ---------- Koffer-Szene ---------- */
.koffer-scene {
  position: relative;
  height: 520vh;
}
.koffer-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.koffer-progress-label {
  position: absolute;
  top: 1.6rem;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 700;
  color: var(--color-primary-dark);
  background: rgba(255,255,255,0.85);
  padding: 0.4rem 1rem;
  border-radius: 999px;
  font-size: 0.9rem;
}
.koffer-visual {
  position: relative;
  width: min(92vw, 900px);
  height: min(66vh, 620px);
}
.koffer-case { position: absolute; inset: 0; margin: auto; width: 46%; z-index: 5; }
.koffer-item {
  position: absolute;
  width: 15%;
  min-width: 64px;
  opacity: 0;
  transform: translate(0, 0) scale(0.5) rotate(0deg);
  transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out);
  filter: drop-shadow(0 10px 16px rgba(59,22,110,0.25));
}
.koffer-item.is-out { opacity: 1; }
.koffer-item .item-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-s);
  padding: 0.5rem;
  text-align: center;
  box-shadow: var(--shadow-card);
}
.koffer-item .item-card svg { width: 100%; height: auto; }
.koffer-item .item-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  margin-top: 0.3rem;
  color: var(--color-primary-dark);
  line-height: 1.2;
}
.koffer-caption {
  margin-top: 1.2rem;
  font-weight: 700;
  color: var(--color-ink-muted);
  min-height: 1.4em;
}

/* Immer sichtbare, barrierefreie Inhaltsliste des Koffers (unabhängig von Animation) */
.koffer-inventory {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.koffer-inventory .item-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-s);
  padding: 0.9rem;
  text-align: center;
  box-shadow: var(--shadow-card);
  height: 100%;
}
.koffer-inventory svg { width: 56%; margin-inline: auto; }
.koffer-inventory .item-label { display: block; margin-top: 0.6rem; font-weight: 700; font-size: 0.85rem; color: var(--color-primary-dark); }

@media (prefers-reduced-motion: reduce) {
  .koffer-scene { display: none; }
}

/* Koffer-Video (scroll-gescrubbt) */
.koffer-video-frame {
  width: min(92vw, 900px);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: #041C2C;
}
.koffer-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* Barrierefreie, nicht scroll-gekoppelte Videoalternative */
.koffer-video-static { display: none; }
@media (prefers-reduced-motion: reduce) {
  .koffer-video-static { display: block; }
}
.koffer-video-plain {
  width: 100%;
  max-width: 900px;
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
  display: block;
  margin-inline: auto;
  background: #041C2C;
}

/* ---------- Formulare (Spenden) ---------- */
fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  padding: var(--space-3);
  margin: 0 0 var(--space-3);
}
legend {
  font-family: var(--font-display);
  font-weight: 800;
  padding: 0 0.5rem;
  font-size: 1.1rem;
}
.field { margin-bottom: var(--space-2); }
label { display: block; font-weight: 700; margin-bottom: 0.35rem; }
.hint { color: var(--color-ink-muted); font-size: 0.88rem; margin-top: 0.3rem; }
input[type="text"], input[type="email"], input[type="number"], input[type="tel"], select, textarea {
  width: 100%;
  font: inherit;
  padding: 0.75rem 0.9rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-s);
  background: #fff;
  color: var(--color-ink);
}
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--color-primary); }
.radio-grid, .check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.7rem;
}
@media (max-width: 480px) {
  .radio-grid, .check-grid {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
}
.radio-card {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-s);
  padding: 0.7rem 0.9rem;
  cursor: pointer;
  font-weight: 600;
}
.radio-card:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}
.radio-card input { width: 1.15rem; height: 1.15rem; accent-color: var(--color-primary); flex-shrink: 0; }

/* ---------- Blog ---------- */
.post-card { display: flex; flex-direction: column; gap: 0.6rem; }
.post-meta { font-size: 0.85rem; color: var(--color-ink-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }

/* ---------- Table of pages / Sitemap in footer ---------- */
.site-footer {
  background: var(--color-ink);
  color: #DFE8EE;
  padding-block: var(--space-5) var(--space-3);
}
.site-footer h2 { color: #fff; font-size: 1.4rem; }
.site-footer a { color: #DFE8EE; }
.site-footer a:hover { color: #fff; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-4);
}
.footer-grid h3 {
  color: #fff;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.9rem;
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.footer-bottom {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255,255,255,0.15);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.88rem;
  color: #B7C6D2;
}

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.gap-narrow p { max-width: 68ch; }
.badge-list { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: var(--space-3) 0; }

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero-art { order: -1; max-width: 100%; margin-inline: auto; }
  .pin-feature { grid-template-columns: 1fr; }
  .pin-feature .pin-visual { position: static; margin-bottom: var(--space-3); }
  .stat-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1200px) {
  .hero-art { max-width: 420px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* Menueband: unterhalb von 1100px auf das Klappmenue wechseln. Darueber muss
   die Zeile neben dem 375px breiten Logo Platz haben — sie darf nie umbrechen. */
@media (max-width: 1100px) {
  .main-nav { position: fixed; inset: 4.2rem 0 0 0; z-index: 999; background: var(--color-bg); flex-direction: column; align-items: flex-start; padding: var(--space-3); overflow-y: auto; transform: translateX(100%); transition: transform var(--dur-m) var(--ease-out); box-shadow: -4px 0 12px rgba(4, 28, 44, 0.12); }
  .main-nav.is-open { transform: translateX(0); }
  .main-nav ul { flex-direction: column; flex-wrap: nowrap; gap: 0.2rem; width: 100%; }
  .main-nav ul a { display: block; padding: 0.9rem 0.4rem; border-bottom: 1px solid var(--color-border); }
  .main-nav .btn { margin-top: var(--space-2); width: 100%; white-space: normal; }
  .nav-toggle { display: inline-flex; flex-shrink: 0; }
}

@media (max-width: 720px) {
  .stat-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .contact-box { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .koffer-item { min-width: 52px; }
}

/* ---------- Illustrierte Figur (Hero, gehende Person mit Langstock) ---------- */
/* Die Beine stehen ruhig (kein "Zappeln") — einzige Bewegung ist das Auftippen des Blindenstocks. */
.figure-walk .leg-back,
.figure-walk .leg-front,
.walk-figure .leg-back,
.walk-figure .leg-front,
.walk-figure-companion .leg-back,
.walk-figure-companion .leg-front {
  animation: none;
}
.figure-walk .cane-tap,
.walk-figure .cane-tap,
.walk-figure-companion .cane-tap {
  animation: cane-tap-pulse 1.6s ease-out infinite;
  transform-origin: center;
}
.walk-figure-companion .cane-tap { animation-delay: 0.8s; }
.figure-walk .cane-tap-companion { animation-delay: 0.8s; }
@keyframes cane-tap-pulse {
  0% { r: 3; opacity: 0.9; }
  70% { r: 16; opacity: 0; }
  100% { r: 16; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .figure-walk .cane-tap,
  .walk-figure .cane-tap,
  .walk-figure-companion .cane-tap { animation: none !important; }
}

/* ---------- Gehfigur: horizontale Scroll-Szene (Startseite) ---------- */
.walk-scene {
  position: relative;
  height: 280vh;
}
.walk-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--color-dark-bg);
}
.walk-parallax {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14%;
  height: 42%;
}
.walk-skyline {
  position: absolute;
  bottom: 0;
  left: -10%;
  width: 120%;
  height: 100%;
}
.walk-skyline-front { height: 85%; }
.walk-figure {
  position: absolute;
  bottom: 0;
  left: 6%;
  width: 130px;
}
.walk-ground {
  position: absolute;
  left: 0; right: 0;
  bottom: 14%;
  height: 6px;
  background: var(--color-primary);
}
.walk-caption-group {
  position: absolute;
  left: 50%;
  top: 12%;
  transform: translateX(-50%);
  width: min(90vw, 46rem);
  text-align: center;
}
.walk-caption {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  color: var(--color-dark-text);
}
.walk-caption.is-active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .walk-scene { display: none; }
}
@media (max-width: 720px) {
  .walk-scene { height: 220vh; }
  .walk-figure { width: 90px; }
}

/* ---------- Reise-Szene (Barrierefreie Veranstaltungen) ---------- */
.journey-scene {
  position: relative;
  height: 320vh;
}
.journey-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-dark-bg);
}
.journey-parallax {
  position: relative;
  width: 100%;
  height: 46%;
}
.journey-path {
  position: absolute;
  left: 2%;
  right: 2%;
  bottom: 18%;
  height: 5px;
  background: repeating-linear-gradient(90deg, var(--color-primary) 0 14px, transparent 14px 26px);
  border-radius: 3px;
}
.journey-waypoint {
  position: absolute;
  bottom: 12%;
  transform: translateX(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--color-border);
  color: var(--color-ink-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-m) var(--ease-out), color var(--dur-m) var(--ease-out), border-color var(--dur-m) var(--ease-out), transform var(--dur-m) var(--ease-out);
}
.journey-icon svg { width: 22px; height: 22px; }
.journey-waypoint.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  transform: translateX(-50%) scale(1.15);
}
.journey-figure { position: absolute; bottom: 0; left: 2%; width: 110px; }
.journey-caption {
  margin-top: 1.4rem;
  font-weight: 700;
  color: var(--color-dark-text);
  min-height: 1.4em;
}
@media (prefers-reduced-motion: reduce) {
  .journey-scene { display: none; }
}
@media (max-width: 720px) {
  .journey-scene { height: 260vh; }
  .journey-figure { width: 80px; }
  .journey-waypoint { width: 36px; height: 36px; }
  .journey-icon svg { width: 18px; height: 18px; }
}

/* ---------- Schritt-für-Schritt-Liste (barrierefreie Kerninhalte) ---------- */
.journey-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  counter-reset: none;
}
.journey-steps li {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  padding: var(--space-4);
  margin: 0;
}
.journey-steps h3 { margin-bottom: 0.6rem; }
.tech-tip {
  background: var(--color-primary-soft);
  border-radius: var(--radius-s);
  padding: 0.9rem 1.1rem;
  margin: 0.8rem 0 0;
  max-width: none;
  color: var(--color-primary-dark);
}
.tech-tip strong { color: var(--color-ink); }

/* ---------- Glossar ---------- */
.az-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.az-cell {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-s);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-family: var(--font-display);
  text-decoration: none;
}
a.az-cell:hover, a.az-cell:focus-visible {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.az-cell.az-empty {
  color: var(--color-ink-muted);
  opacity: 0.75;
  background: transparent;
  border-style: dashed;
}
h2.glossar-letter {
  font-size: 1.6rem;
  color: var(--color-accent);
  border-bottom: 2px solid var(--color-border);
  padding-bottom: 0.4rem;
  margin-top: var(--space-4);
}

/* ---------- Foto-Platzhalter (bis echtes Bildmaterial vorliegt) ---------- */
.photo-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-align: center;
  background: var(--color-primary-soft);
  border: 2px dashed #80E6DB;
  border-radius: var(--radius-m);
  color: var(--color-primary-dark);
  padding: var(--space-3);
  min-height: 180px;
  font-weight: 700;
  font-size: 0.95rem;
}
.photo-slot .photo-slot-icon {
  width: 40px;
  height: 40px;
  opacity: 0.75;
}
.photo-slot span.photo-slot-hint {
  font-weight: 500;
  color: var(--color-ink-muted);
  font-size: 0.82rem;
}
.photo-slot-wide { aspect-ratio: 16 / 6; }
.photo-slot-square { aspect-ratio: 1 / 1; }
.photo-slot-round {
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  min-height: 0;
  width: 108px;
  height: 108px;
  padding: 0.5rem;
  margin-inline: auto;
}
.photo-slot-round .photo-slot-icon { width: 30px; height: 30px; }

/* ---------- Team-Karten (Gründungsteam etc.): Foto + Bio in einer Karte ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
}
/* ---------- Team-Karten (Ergänzung für Grid-Layout) ---------- */
.team-grid {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}

.team-card {
  flex: 1;
  max-width: 340px; /* Leicht angepasst, um gut zu deinen anderen Cards zu passen */
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  padding: var(--space-4);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.team-card .img-wrapper {
  width: 150px;
  height: 150px;
  margin-bottom: var(--space-2);
}

.team-card .img-wrapper img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.team-card h3 {
  margin-bottom: 0.5rem;
}

.team-card p {
  margin: 0;
  max-width: 42ch;
}

/* ---------- Nav-Dropdown "Angebote" ---------- */
.nav-item-dropdown { position: relative; }
.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--color-ink);
  cursor: pointer;
  padding: 0.55rem 0.9rem;
  border-bottom: 2px solid transparent;
}
.nav-dropdown-toggle:hover,
.nav-dropdown-toggle[aria-expanded="true"] {
  color: var(--color-primary);
  background: var(--color-primary-soft);
}
.nav-dropdown-toggle .caret {
  width: 9px; height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
  transition: transform var(--dur-s) var(--ease-out);
}
.nav-dropdown-toggle[aria-expanded="true"] .caret { transform: rotate(-135deg); margin-top: 3px; }
.main-nav .nav-dropdown-panel {
  list-style: none;
  margin: 0;
  padding: 0.6rem;
  display: none;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 300px;
}
.main-nav .nav-dropdown-panel.is-open { display: flex; }
@media (min-width: 721px) {
  .main-nav .nav-dropdown-panel {
    position: absolute;
    top: calc(100% + 0.6rem);
    left: 0;
    text-align: left;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-soft);
    z-index: 50;
  }
}
.main-nav .nav-dropdown-panel a {
  display: block;
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius-s);
  color: var(--color-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  border-bottom: none;
  text-align: left;
}
.main-nav .nav-dropdown-panel a:hover,
.main-nav .nav-dropdown-panel a:focus-visible,
.main-nav .nav-dropdown-panel a[aria-current="page"] {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}
@media (max-width: 720px) {
  .main-nav .nav-dropdown-panel { min-width: 0; padding-left: 1rem; border-left: 2px solid var(--color-border); }
  .main-nav .nav-dropdown-panel a { padding: 0.7rem 0.4rem; }
}
.nav-dropdown-toggle[aria-current="page"] {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* ---------- Nav-Dropdown "Angebote": kompaktes Mega-Menu mit Icons ----------
   Vom Auftraggeber freigegebene Vorschau-Version: festes, kompaktes Panel
   (statt volle Breite), farbige Kategorie-Labels, rundes Icon pro Angebot
   zur schnelleren Wiedererkennung, sanftes Einblenden. Alle Texte bleiben
   linksbuendig, Struktur (3 Kategorien je eine <ul aria-labelledby>) und
   Barrierefreiheits-Verhalten (Button, aria-expanded/-controls, Escape,
   Tab, Hover zusaetzlich auf Mausgeraeten) sind unveraendert. Die
   .main-nav-Praefixe geben diesen Regeln bewusst mehr Spezifitaet als
   ".main-nav ul { align-items:center }" weiter unten in der Datei, damit
   dessen Zentrierung hier nicht versehentlich durchschlaegt. */
.main-nav .nav-dropdown-panel.nav-mega-panel {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0.6rem 0;
}
@keyframes navPanelIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.main-nav .nav-dropdown-panel.nav-mega-panel.is-open {
  animation: navPanelIn 0.16s var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .main-nav .nav-dropdown-panel.nav-mega-panel.is-open { animation: none; }
}
.main-nav .nav-mega-col {
  align-self: stretch;
  width: 100%;
}
.nav-mega-col + .nav-mega-col {
  margin-top: 0.35rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--color-border);
}
.main-nav .nav-mega-heading {
  margin: 0.3rem 0.9rem 0.25rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-accent);
  text-align: left;
}
.main-nav .nav-mega-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.1rem;
}
.main-nav .nav-mega-col ul > li {
  align-self: stretch;
  width: 100%;
}
.main-nav .nav-mega-panel a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  white-space: normal;
  border-radius: 0;
  padding: 0.65rem 0.9rem;
  border-bottom: 2px solid transparent;
}
.main-nav .nav-mega-panel a:hover,
.main-nav .nav-mega-panel a:focus-visible,
.main-nav .nav-mega-panel a[aria-current="page"] {
  border-bottom-color: var(--color-accent);
}
.main-nav .nav-mega-col:first-of-type ul > li:first-child a {
  border-top-left-radius: var(--radius-m);
  border-top-right-radius: var(--radius-m);
}
.main-nav .nav-mega-col:last-of-type ul > li:last-child a {
  border-bottom-left-radius: var(--radius-m);
  border-bottom-right-radius: var(--radius-m);
}
.nav-icon-badge {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}
.nav-icon-badge svg { width: 17px; height: 17px; }
@media (min-width: 721px) {
  .main-nav .nav-dropdown-panel.nav-mega-panel {
    width: 340px;
    padding: 0.6rem;
  }
}
@media (max-width: 720px) {
  .main-nav .nav-dropdown-panel.nav-mega-panel { padding-left: 0.6rem; border-left: none; }
}

/* ---------- Footer v2: klar gegliedert ---------- */
.footer-grid-v2 {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr 1.1fr;
  gap: var(--space-4);
}
.footer-grid-v2 h3 {
  color: #fff;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.9rem;
}
.footer-grid-v2 ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.footer-legal-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
}
@media (max-width: 980px) {
  .footer-grid-v2 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-grid-v2 { grid-template-columns: 1fr; }
}

/* ---------- Timeline (Schritt-für-Schritt, dunkle Karte) ---------- */
.timeline-card {
  background: var(--color-dark-bg);
  border-radius: var(--radius-l);
  padding: var(--space-4);
  color: #fff;
}
.timeline-card .timeline-kicker {
  margin: 0 0 0.6rem;
  color: #06DFC7;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.8rem;
}
.timeline-card > p.lead { color: var(--color-dark-text); max-width: 52em; }
.timeline {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.timeline-step {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 1.2rem;
}
.timeline-step .timeline-marker {
  display: grid;
  justify-items: center;
  grid-template-rows: auto 1fr;
  gap: 0.4rem;
}
.timeline-step .timeline-num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  flex-shrink: 0;
}
.timeline-step .timeline-line {
  width: 3px;
  flex: 1;
  background: var(--color-dark-border);
  border-radius: 2px;
  min-height: 100%;
}
.timeline-step:last-child .timeline-line { display: none; }
.timeline-step-body { padding-bottom: 1.9rem; }
.timeline-step-body h3 {
  color: #fff;
  font-size: 1.15rem;
  margin: 0.1rem 0 0.6rem;
}
.timeline-step-body p {
  color: var(--color-dark-text);
  line-height: 1.7;
  max-width: 56ch;
}
.tag-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.tag-chip {
  background: var(--color-dark-surface);
  border: 1px solid var(--color-dark-border);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-dark-text);
}

/* ---------- Zitat / Testimonial (Projektseiten) ---------- */
.testimonial {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.4rem;
  align-items: center;
  background: var(--color-surface-alt);
  border-radius: var(--radius-l);
  padding: var(--space-4);
}
.testimonial blockquote {
  margin: 0 0 1rem;
  font-size: 1.2rem;
  font-style: italic;
  color: var(--color-ink);
  line-height: 1.6;
  max-width: none;
}
.testimonial blockquote::before { content: "\201C"; }
.testimonial blockquote::after { content: "\201D"; }
.testimonial cite {
  display: block;
  font-style: normal;
  font-weight: 700;
  color: var(--color-primary-dark);
}
.testimonial cite span {
  display: block;
  font-weight: 500;
  color: var(--color-ink-muted);
  font-size: 0.9rem;
}
@media (max-width: 620px) {
  .testimonial { grid-template-columns: 1fr; text-align: center; }
}

/* ---------- Skip-Link Kontrast Update (neue Farben) ---------- */
.skip-link { background: var(--color-ink); }

/* ---------- Icon-Kacheln für Sitzungen/Illustrationen ---------- */
.illus-panel { width: 100%; }
.illus-panel svg { width: 100%; height: auto; }

/* ---------- Nav-Ausrichtung: Button und Links exakt auf einer Linie, alles linksbündig ---------- */
.main-nav ul { align-items: center; }
.main-nav ul > li { display: flex; align-items: center; }
.nav-dropdown-toggle { line-height: 1; margin: 0; }
.nav-dropdown-toggle .caret { margin-top: 0; }
.main-nav a,
.nav-dropdown-toggle,
.main-nav .nav-dropdown-panel a {
  text-align: left;
  justify-content: flex-start;
}
@media (max-width: 720px) {
  .main-nav ul > li { align-items: flex-start; width: 100%; }
  .main-nav a,
  .nav-dropdown-toggle { width: 100%; }
}

/* ---------- Logo ----------
   Das SVG hat ein Seitenverhaeltnis von 4:1, wurde bisher aber in eine
   375x150-Box gezwaengt. Dadurch entstand oben und unten Leerraum, der das
   Menueband unnoetig hoch machte. Die Schriftzeichen selbst liegen im
   viewBox-Bereich y = 27 bis 68 von 100.
   Loesung: das SVG behaelt seine echte Groesse, der Rahmen darum wird auf die
   Hoehe der Zeichen beschnitten. Das Logo bleibt dadurch exakt gleich gross,
   das Band wird deutlich flacher. */
.brand-logo { width: 375px; height: 94px; flex-shrink: 0; }
.brand {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  height: 58px;          /* beschneidet den Leerraum ober- und unterhalb */
  overflow: hidden;
}

/* Logo responsive auf mobil — Verhaeltnis bleibt erhalten */
@media (max-width: 720px) {
  .brand-logo { width: 250px; height: 63px; }
  .brand { height: 40px; }
}

@media (max-width: 480px) {
  .brand-logo { width: 170px; height: 43px; }
  .brand { height: 28px; }
}

/* Verstecke TTS Button (nur Eye-Able verwenden) */
.tts-button { display: none !important; }
.brand-braille { font-family: 'Courier New', monospace; font-size: 18px; font-weight: 600; color: var(--color-primary); letter-spacing: 2px; }

/* ---------- Spenden-Button: stimmige Akzentfarbe ---------- */
.btn-accent { background: var(--color-accent); color: #fff; }
.btn-accent:hover { background: #014149; transform: translateY(-2px); box-shadow: var(--shadow-card); }

/* ---------- Responsive Robustheit: Titel/Text in Kästen dürfen nie überlaufen ---------- */
.card, .stat-card, .timeline-step-body, .footer-grid-v2 > div, .footer-grid-v2 > nav,
.testimonial > div {
  min-width: 0;
}
.stat-number, .card h3, .timeline-step-body h3, .testimonial blockquote,
.tag-chip, .chip, .az-cell {
  overflow-wrap: break-word;
  word-break: break-word;
}
/* Ueberschriften: lange (zusammengesetzte) deutsche Woerter sollen bei Bedarf
   sauber getrennt werden (mit Trennstrich), nicht wahllos mitten im Wort
   abgeschnitten werden. hyphens:auto braucht ein korrektes lang-Attribut
   (bei uns lang="de-CH" auf <html>), sonst greift es nicht. */
h1, h2, h3 {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}
/* text-wrap:balance verteilt die Zeilen einer Ueberschrift gleichmaessiger,
   damit nicht z. B. ein einzelner Buchstabe allein in der letzten Zeile
   haengen bleibt. Browser ohne Unterstuetzung ignorieren die Zeile einfach
   und behalten den normalen (weiterhin sauberen) Umbruch. */
h1, h2 {
  text-wrap: balance;
}
.testimonial { grid-template-columns: auto minmax(0, 1fr); }
.timeline-step { grid-template-columns: 44px minmax(0, 1fr); }

/* ---------- Footer: Partner & Unterstützer ---------- */
.footer-partners {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255,255,255,0.15);
}
.footer-partners h3 {
  color: #fff;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.9rem;
}
/* Partnerstreifen im Footer: Logos und Handlungsaufruf auf einer Linie */
.footer-partners { grid-column: 1 / -1; margin-top: var(--space-3); }
.footer-partners-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1rem var(--space-3);
}
.footer-partner-logo {
  display: grid; place-items: center;
  width: 150px; height: 88px; padding: 0.6rem 0.9rem;
  background: #fff; border-radius: 10px;
  transition: transform var(--dur-s) var(--ease-out), box-shadow var(--dur-s) var(--ease-out);
}
a.footer-partner-logo:hover, a.footer-partner-logo:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.footer-partner-logo img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.footer-partners-cta { margin-left: auto; white-space: nowrap; }

/* Gerahmte Logo-Kacheln fuer "damit haben wir bereits gearbeitet"-Reihen
   auf hellem Hintergrund (Workshops, Sensibilisierungsanlaesse etc.) */
.partner-logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.partner-logo-card {
  display: grid;
  place-items: center;
  width: 160px;
  height: 92px;
  padding: 0.8rem 1.1rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur-s) var(--ease-out), box-shadow var(--dur-s) var(--ease-out);
}
.partner-logo-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
a.partner-logo-card:hover, a.partner-logo-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
@media (prefers-reduced-motion: reduce) {
  a.partner-logo-card:hover, a.partner-logo-card:focus-visible { transform: none; }
}
@media (max-width: 700px) {
  .footer-partners-cta { margin-left: 0; width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  a.footer-partner-logo:hover, a.footer-partner-logo:focus-visible { transform: none; }
}



.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}
@media (max-width: 480px) {
  .values-grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
}

.value-card {
  background: var(--color-light-gray, #f5f5f5);
  padding: 1.5rem;
  border-radius: 8px;
  border-left: 4px solid var(--color-teal, #015258);
}

.value-card h3 {
  margin-top: 0;
  color: var(--color-teal, #015258);
  font-size: 1.1rem;
  margin-bottom: 0.8rem;
}

.value-card p {
  margin: 0;
  line-height: 1.6;
  color: #565354;
}

/* ---------- Startseite: Community-Gehszene (zwei Figuren) ---------- */
.walk-figure-companion {
  position: absolute;
  bottom: 0;
  left: 2.5%;
  width: 96px;
  opacity: 0.92;
}
@media (max-width: 720px) {
  .walk-figure-companion { width: 66px; }
}

/* ---------- Instagram-Slider (Startseite) ---------- */
.insta-section { background: var(--color-surface-alt); }
.insta-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: var(--space-3);
}
.insta-head a { font-weight: 700; display: inline-flex; align-items: center; gap: 0.4rem; }
.insta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
.insta-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
}
.insta-card .photo-slot { aspect-ratio: 1/1; min-height: 0; }
.insta-card span.insta-caption { font-size: 0.85rem; color: var(--color-ink-muted); }
@media (max-width: 1024px) {
  .insta-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .insta-grid { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
}
@media (max-width: 480px) {
  .insta-grid { grid-template-columns: 1fr; gap: 1rem; }
}

/* ---------- Glossar-Begriff-Link (öffnet Erklärung im Panel, keine Navigation) ---------- */
.term-link {
  font: inherit;
  color: var(--color-primary);
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.term-link:hover { color: var(--color-primary-dark); }
.section-dark .term-link,
.section-dark .term-link:hover { color: #fff; }

/* ---------- Glossar-Panel (natives <dialog>, rechts andockend) ---------- */
dialog.glossar-panel {
  position: fixed;
  inset: 0 0 0 auto;
  top: 0;
  right: 0;
  margin: 0;
  height: 100vh;
  max-height: 100vh;
  width: min(420px, 92vw);
  max-width: min(420px, 92vw);
  border: 0;
  padding: var(--space-4) var(--space-3);
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: -16px 0 40px rgba(27, 18, 48, 0.22);
  overflow-y: auto;
}
dialog.glossar-panel::backdrop {
  background: rgba(27, 18, 48, 0.45);
}
dialog.glossar-panel[open] {
  animation: glossar-panel-in 0.28s ease-out;
}
@keyframes glossar-panel-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  dialog.glossar-panel[open] { animation: none; }
}
.glossar-panel-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--color-surface-alt);
  background: var(--color-surface-alt);
  color: var(--color-ink);
  cursor: pointer;
}
.glossar-panel-close:hover { background: var(--color-accent-soft); }
.glossar-panel-eyebrow {
  margin: 0 0 0.4rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.8rem;
  color: var(--color-accent);
  padding-right: 3rem;
}
.glossar-panel h2 {
  margin-top: 0;
  margin-bottom: var(--space-2);
  padding-right: 3rem;
}
.glossar-panel-body {
  color: var(--color-ink-muted);
  font-size: 1.05rem;
  margin-bottom: var(--space-3);
}
@media (max-width: 480px) {
  dialog.glossar-panel { width: 100vw; max-width: 100vw; }
}

/* ---------- Rubikon-Prozess (ZRM) ---------- */
:root {
  --rubikon-1: #E8B800; /* Bedürfnis – Gelb, dunkler Text 9.7:1 */
  --rubikon-2: #C96A12; /* Motiv – Orange, dunkler Text 4.8:1 */
  --rubikon-3: #2E7A16; /* Intention – Grün, weisser Text 5.4:1 */
  --rubikon-4: #B01E77; /* Präaktionale Planung – Magenta, weisser Text 6.4:1 */
  --rubikon-5: #0B6D8F; /* Handlung – Blau, weisser Text 5.8:1 */
}
.rubikon-scene .journey-waypoint[data-stage="1"].is-active { background: var(--rubikon-1); border-color: var(--rubikon-1); color: #041C2C; }
.rubikon-scene .journey-waypoint[data-stage="2"].is-active { background: var(--rubikon-2); border-color: var(--rubikon-2); color: #041C2C; }
.rubikon-scene .journey-waypoint[data-stage="3"].is-active { background: var(--rubikon-3); border-color: var(--rubikon-3); color: #fff; }
.rubikon-scene .journey-waypoint[data-stage="4"].is-active { background: var(--rubikon-4); border-color: var(--rubikon-4); color: #fff; }
.rubikon-scene .journey-waypoint[data-stage="5"].is-active { background: var(--rubikon-5); border-color: var(--rubikon-5); color: #fff; }
.rubikon-river {
  position: absolute;
  left: 33%;
  width: 12%;
  height: 100%;
  top: 0;
  opacity: 0.55;
}
.rubikon-river-label {
  position: absolute;
  left: 38.5%;
  top: 6%;
  transform: rotate(-8deg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: #fff;
  background: rgba(20, 130, 170, 0.55);
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
}
.rubikon-phase-labels {
  position: absolute;
  left: 2%;
  right: 2%;
  bottom: 4%;
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-dark-muted);
}
.rubikon-phase-labels span:first-child { width: 40%; text-align: left; }
.rubikon-phase-labels span:last-child { width: 55%; text-align: right; }

.rubikon-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-3);
}
.rubikon-step {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 6px solid var(--rubikon-step-color, var(--color-primary));
  border-radius: var(--radius-m);
  padding: var(--space-3);
  min-width: 0;
}
.rubikon-step:nth-child(1) { --rubikon-step-color: var(--rubikon-1); }
.rubikon-step:nth-child(2) { --rubikon-step-color: var(--rubikon-2); }
.rubikon-step:nth-child(3) { --rubikon-step-color: var(--rubikon-3); }
.rubikon-step:nth-child(4) { --rubikon-step-color: var(--rubikon-4); }
.rubikon-step:nth-child(5) { --rubikon-step-color: var(--rubikon-5); }
.rubikon-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--rubikon-step-color, var(--color-primary));
  color: #041C2C;
  font-weight: 800;
  font-family: var(--font-display);
  font-size: 0.9rem;
  margin-bottom: 0.6rem;
}
.rubikon-step:nth-child(3) .rubikon-step-number,
.rubikon-step:nth-child(4) .rubikon-step-number,
.rubikon-step:nth-child(5) .rubikon-step-number { color: #fff; }
.rubikon-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-ink-muted);
  margin-bottom: 0.3rem;
}
.rubikon-step h3 {
  margin-bottom: 0.5rem;
  overflow-wrap: break-word;
}
.rubikon-crossing-note {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: var(--color-teal-soft);
  border-radius: var(--radius-m);
  padding: 0.9rem 1.2rem;
  color: var(--color-teal);
  font-weight: 700;
}
@media (max-width: 620px) {
  .rubikon-phase-labels, .rubikon-river-label { display: none; }
}

/* =========================================================================
   Instagram-Einbettungen — responsiv auf allen Geräten
   Instagram setzt per embed.js Inline-Styles auf blockquote und iframe
   (u. a. min-width: 326px). Diese Regeln überschreiben das, damit die
   Einbettungen in schmalen Rastern und auf Mobilgeräten nicht überlaufen.
   ========================================================================= */

/* Raster passt sich der Breite an, bricht nie unter die Containerbreite */
.insta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13.5rem, 100%), 1fr));
  gap: var(--space-3);
  align-items: start;
}
@media (max-width: 560px) {
  .insta-grid { gap: 1.2rem; }
}

.insta-embed { width: 100%; min-width: 0; }

.insta-embed .instagram-media,
.instagram-media {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 33.75rem !important;   /* 540px, Instagram-Maximalbreite */
  margin-inline: auto !important;
  box-sizing: border-box;
}

.insta-embed .instagram-media iframe,
.instagram-media iframe,
.insta-embed iframe {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Sichtbarer Ersatzlink, solange die Einbettung nicht geladen ist
   (oder wenn Instagram nicht erreichbar ist) */
.instagram-media > a {
  display: inline-block;
  padding: 1rem;
  font-weight: 700;
}

/* Einzelnes Reel im Textfluss: fester Bildausschnitt statt fixer Pixelhöhe */
.ig-frame {
  position: relative;
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
  aspect-ratio: 9 / 14;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--color-surface-alt);
}
.ig-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (max-width: 480px) {
  .ig-frame { aspect-ratio: 9 / 15; }
}

/* Ausweichweg, wenn der Formularversand scheitert */
.form-fallback {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--color-amber-soft);
  border-left: 4px solid var(--color-amber);
  border-radius: var(--radius-s);
}
.form-fallback h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.form-fallback p { margin: 0 0 var(--space-2); font-size: 0.96rem; }
.form-fallback p:last-child { margin-bottom: 0; }
.form-fallback__tech { margin-top: var(--space-2); font-size: 0.85rem; }
.form-fallback__tech summary { cursor: pointer; font-weight: 700; color: var(--color-ink-muted); }
.form-fallback__tech pre {
  margin: 0.6rem 0 0;
  padding: 0.7rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-s);
  font-size: 0.8rem;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Knopf im Menueband: laengere Beschriftung, deshalb kompakter und einzeilig */
.site-header .main-nav .btn-accent {
  white-space: nowrap;
  padding: 0.55rem 1rem;
  font-size: 0.92rem;
}
@media (max-width: 1320px) and (min-width: 1101px) {
  .main-nav ul { gap: 0.85rem; font-size: 0.95rem; }
  .site-header .main-nav .btn-accent { padding: 0.5rem 0.8rem; font-size: 0.85rem; }
  .brand-logo { width: 320px; height: 80px; }
  .brand { height: 50px; }
}

.ig-note { text-align: center; font-size: 0.85rem; margin: var(--space-2) 0 0; }


/* ---------- Partnerlogos: gleich grosse Kacheln, Logo passt sich ein ----------
   Die Logos haben sehr unterschiedliche Seitenverhaeltnisse (von 3.8:1 quer bis
   0.7:1 hoch). Deshalb bekommt jede Kachel dieselbe Flaeche und das Logo wird
   per object-fit eingepasst — statt nur die Hoehe zu begrenzen, was breite
   Logos winzig und schmale riesig gemacht haette. */
.pp-block { margin-top: var(--space-4); }
.pp-block h3 {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-accent); margin-bottom: 0.5rem;
}
.pp-block > p { font-size: 0.96rem; color: var(--color-ink-muted); }
.pp-logos {
  list-style: none; margin: var(--space-3) 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  gap: var(--space-3);
  align-items: start;
}
.pp-logos a,
.pp-logos .pp-feld {
  display: block;
  aspect-ratio: 3 / 2;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
}
.pp-logos a {
  transition: transform var(--dur-s) var(--ease-out), box-shadow var(--dur-s) var(--ease-out);
}
.pp-logos a:hover, .pp-logos a:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.pp-logos img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
}
.pp-logos .pp-was {
  margin: 0.6rem 0 0; font-size: 0.85rem; line-height: 1.45;
  color: var(--color-ink-muted); text-align: center;
}
@media (max-width: 420px) {
  .pp-logos { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .pp-logos a:hover, .pp-logos a:focus-visible { transform: none; }
}


/* ---------- Ansprechpartner-Karte ---------- */
.person {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3);
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-l);
  padding: var(--space-3);
  box-shadow: var(--shadow-card);
}
.person img {
  width: clamp(5.5rem, 14vw, 8rem);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #E6F2F3;
}
.person h2 { font-size: clamp(1.2rem, 2.4vw, 1.6rem); margin-bottom: 0.2rem; }
.person .role {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-primary); margin: 0 0 0.6rem;
}
.person p { margin: 0; font-size: 0.97rem; color: var(--color-ink-muted); max-width: none; }
.person p + p { margin-top: 0.6rem; }
.person .lines { margin-top: var(--space-2); font-size: 0.95rem; }

/* Variante mit Handlungsaufruf rechts — ersetzt den früher separaten Kontaktkasten */
.person.has-cta { grid-template-columns: auto minmax(0, 1fr) auto; }
.person .person-cta { justify-self: end; white-space: nowrap; }

@media (max-width: 860px) {
  .person.has-cta { grid-template-columns: auto minmax(0, 1fr); }
  .person.has-cta .person-cta { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 620px) {
  .person, .person.has-cta { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .person.has-cta .person-cta { justify-self: center; }
}

/* ---------- Hinweiskasten zu Kosten und Finanzierung ---------- */
.kosten {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3);
  align-items: start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 5px solid var(--color-amber);
  border-radius: var(--radius-m);
  padding: var(--space-3);
}
.kosten-betrag {
  font-family: var(--font-display); font-weight: 800; line-height: 1;
  font-size: clamp(1.8rem, 4.5vw, 2.4rem); color: var(--color-primary);
  white-space: nowrap;
}
.kosten p { margin: 0; max-width: 62ch; }
.kosten p + p { margin-top: 0.6rem; font-size: 0.94rem; color: var(--color-ink-muted); }
@media (max-width: 560px) {
  .kosten { grid-template-columns: 1fr; }
}

/* Fehlermeldung im Formular */
.feld-fehler {
  margin: 0.4rem 0 0; font-size: 0.9rem; font-weight: 600;
  color: #A3121A;
}
.feld-fehler:empty { display: none; }