/* ============================================================
   STYLE — CDI Alumni Deutschland e.V.
   ------------------------------------------------------------
   Nutzt die Werte aus tokens.css (var(--...)).
   Farben/Schriften bevorzugt in tokens.css aendern, nicht hier.
   Reines CSS, keine externen Bibliotheken. Schrift: IBM Plex
   Sans, ausschliesslich aus /fonts geladen (kein externer
   Abruf, DSGVO-konform).
   ============================================================ */

/* ---------- Lokale Schrift: IBM Plex Sans (selbst gehostet) ----------
   WOFF2, auf lateinische Zeichen reduziert (inkl. Umlaute, é, ß, € …).
   Lizenz: fonts/OFL.txt. Fehlt eine Datei, greift die System-Schrift. */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-300.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-600.woff2") format("woff2");
}
/* Kursiv (u. a. fuer "The Future Engine EUROPE"); wird nur geladen, wo kursiver Text vorkommt */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-300-italic.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-600-italic.woff2") format("woff2");
}

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

html {
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.nav-open { overflow: hidden; }

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

/* ---------- Typografie ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-sm);
  text-wrap: balance;
}

p { margin: 0 0 var(--space-sm); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Links im Fliesstext immer klar erkennbar: unterstrichen, kraeftiger */
:where(p, li, address, dd) > a:not([class]) {
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
:where(p, li, address, dd) > a:not([class]):hover {
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

strong, b { font-weight: var(--fw-semibold); }

/* Firmennamen: halbfett und nie mitten im Namen umbrochen */
.company { font-weight: var(--fw-semibold); white-space: nowrap; }

/* Motto "The Future Engine EUROPE": EUROPE in Versalien und kursiv */
.motto em { font-style: italic; letter-spacing: 0.02em; }

/* ---------- Layout-Hilfen ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(var(--container-narrow) + 2 * var(--gutter)); }

/* Oberer Abstand (Sektionsbeginn bis Ueberschrift) bewusst halbiert; unten voller Abstand */
.section { padding-block: calc(var(--section-y) / 2) var(--section-y); }
.section--alt { background: var(--color-surface-alt); }

.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;
}

/* Sprunglink fuer Tastatur-/Screenreader-Nutzung */
.skip-link {
  position: absolute;
  left: 1rem; top: -100%;
  z-index: var(--z-overlay);
  background: var(--color-primary);
  color: #fff;
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-sm);
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: 1rem; text-decoration: none; }

/* Sichtbarer Fokus (Barrierefreiheit) */
:where(a, button, summary, input, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---------- Icons ---------- */
.icon {
  width: 1.25em; height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
/* Das Chevron-Symbol zeigt nach unten; gedreht ergibt es links/rechts */
.icon--left  { transform: rotate(90deg); }
.icon--right { transform: rotate(-90deg); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-nav);
  font-weight: var(--fw-semibold);
  line-height: 1;
  cursor: pointer;
  text-align: center;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn .icon { width: 1.1em; height: 1.1em; }
.btn--sm { padding: 0.6rem 1.1rem; }

.btn--accent { background: var(--color-accent); color: #fff; }
.btn--accent:hover { background: var(--color-accent-strong); }


/* Umriss auf hellem Grund */
.btn--ghost { background: transparent; color: var(--color-primary); border-color: var(--color-border); }
.btn--ghost:hover { border-color: var(--color-primary); background: var(--color-surface); }

/* Umriss auf dunklem Grund (Hero, dunkle Panels) */
.btn--light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.btn--light:hover { background: #fff; color: var(--color-primary); border-color: #fff; }

/* Textlink mit Pfeil (z. B. "Zum Rueckblick") */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
}
.link-arrow .icon { width: 1.1em; height: 1.1em; transition: transform var(--dur-fast) var(--ease-out); }
.link-arrow:hover { text-decoration: none; }
.link-arrow:hover .icon { transform: translateX(3px); }

/* ============================================================
   KOPFZEILE / NAVIGATION
   ------------------------------------------------------------
   Desktop: Logo | Navigation (Links + Mitgliederportal) |
   "Mitglied werden". Tablet/Mobil: Logo | "Mitglied werden" |
   Menue-Knopf. "Mitglied werden" steht ausserhalb der
   Navigation und ist dadurch auf allen Bildschirmen sichtbar.
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-height: var(--header-h);
}

/* Logo: dunkles und weisses Logo liegen deckungsgleich uebereinander
   und werden nur ueberblendet. Die Klickflaeche entspricht damit immer
   genau dem sichtbaren Logo (fuehrt zur Startseite). */
.brand {
  --logo-h: 2.5rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  line-height: 0;
  flex: none;
}
.brand__logo {
  width: auto;
  height: var(--logo-h);
  transition: opacity var(--dur) var(--ease-out), height var(--dur) var(--ease-out);
}
/* Weisses Logo: ueber dem dunklen, gleiche Groesse. Standard (gescrollt): ausgeblendet. */
.brand__logo--light {
  position: absolute;
  top: 50%;
  left: 0;
  translate: 0 -50%;
  opacity: 0;
  pointer-events: none;
}

/* Navigation (Desktop) */
.primary-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.2rem + 1.4vw, 1.9rem);
  margin-left: auto;
}
.primary-nav > a:not(.btn) {
  color: var(--color-text);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-nav);
  padding-block: 0.4rem;
  position: relative;
}
.primary-nav > a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--color-accent);
  transition: width var(--dur-fast) var(--ease-out);
}
.primary-nav > a:not(.btn):hover { text-decoration: none; }
.primary-nav > a:not(.btn):hover::after { width: 100%; }

.nav__cta {
  flex: none;
  white-space: nowrap;
  max-width: 16rem;
  overflow: hidden;
  transition: max-width var(--dur) var(--ease-out),
              padding var(--dur) var(--ease-out),
              margin var(--dur) var(--ease-out),
              border-width var(--dur) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
/* Solange der "Mitglied werden"-Button im Hero sichtbar ist, klappt der
   Button in der Kopfzeile ein (kein doppelter Button). main.js steuert
   die Klasse; sobald der Hero-Button wegscrollt, gleitet er wieder herein. */
body.hero-cta-visible .nav__cta {
  max-width: 0;
  padding-inline: 0;
  border-width: 0;
  opacity: 0;
  visibility: hidden;
}
@media (min-width: 1201px) {
  /* den Flex-Abstand zum Mitgliederportal-Button mit einklappen */
  body.hero-cta-visible .nav__cta { margin-left: calc(-1 * var(--space-md)); }
}

/* Umschalt-Knopf (nur Tablet/Mobil) */
.nav-toggle {
  display: none;
  flex: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem; height: 2.75rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle__bar {
  display: block;
  width: 22px; height: 2px;
  margin-inline: auto;
  background: var(--color-primary);
  transition: transform var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Kopfzeile ueber dem Hero (transparent) --- */
body.has-hero .site-header:not(.is-scrolled) {
  background: transparent;
  border-bottom-color: transparent;
}
body.has-hero .site-header:not(.is-scrolled) .brand__logo--light { opacity: 1; }
body.has-hero .site-header:not(.is-scrolled) .brand__logo--dark { opacity: 0; }

/* Desktop ueber dem Hero: etwas groesseres Logo mit mehr Luft nach oben.
   Die Verschiebung per transform aendert das Layout nicht; beim Scrollen
   gleitet die Kopfzeile sanft in ihre normale Position. */
.site-header__inner { transition: transform var(--dur) var(--ease-out); }
@media (min-width: 1201px) {
  body.has-hero .site-header:not(.is-scrolled) .brand { --logo-h: 3.25rem; }
  body.has-hero .site-header:not(.is-scrolled) .site-header__inner { transform: translateY(0.75rem); }
}
/* Ueber dem Hero sind die Textlinks ausgeblendet (nur die Buttons bleiben) */
body.has-hero .site-header:not(.is-scrolled) .primary-nav > a:not(.btn) { display: none; }
body.has-hero .site-header:not(.is-scrolled) .nav-toggle { border-color: rgba(255, 255, 255, 0.5); }
body.has-hero .site-header:not(.is-scrolled) .nav-toggle__bar { background: #fff; }

/* Mitgliederportal-Button: heller Umriss ueber dem Hero, sonst Ghost-Stil */
body.has-hero .site-header:not(.is-scrolled) .nav__login {
  color: #fff;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
}
body.has-hero .site-header:not(.is-scrolled) .nav__login:hover {
  background: #fff;
  color: var(--color-primary);
  border-color: #fff;
}

/* Sobald man den Hero verlaesst (Kopfzeile "is-scrolled"): Links sanft einblenden */
@keyframes header-nav-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
body.has-hero .site-header.is-scrolled .primary-nav > a:not(.btn) {
  animation: header-nav-in var(--dur) var(--ease-out) both;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;   /* Text vertikal mittig -> sofort sichtbar */
  min-height: 100vh;
  min-height: 100dvh;
  margin-top: calc(-1 * var(--header-h));  /* Bild unter die Kopfzeile ziehen */
  padding-top: var(--header-h);
  color: #fff;
  background: var(--navy-800);   /* Fallback, solange das Bild laedt */
  overflow: hidden;
}
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
  z-index: -2;
}
/* Abdunkelung fuer gut lesbaren Text: links (Textseite) kraeftiger,
   oben leicht (Kopfzeile). Rechts bleiben die Gesichter gut sichtbar. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(20, 33, 58, 0.6) 0%, rgba(20, 33, 58, 0) 26%),
    linear-gradient(90deg, rgba(20, 33, 58, 0.9) 0%, rgba(20, 33, 58, 0.72) 38%, rgba(20, 33, 58, 0.25) 72%, rgba(20, 33, 58, 0.15) 100%);
}
.hero__inner {
  padding-block: clamp(3rem, 1.5rem + 6vw, 6rem);
}
.hero__content { max-width: 44rem; }
.hero__lead {
  margin: var(--space-md) 0 0;
  max-width: 36rem;
  font-size: var(--fs-lead);
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
  animation: hero-rise 0.9s var(--ease-out) 0.3s both;
}
/* Dezenter Hinweis auf den naechsten Termin */
.hero__next {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  margin-top: var(--space-xl);
  padding: 0.6rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-sm);
  background: rgba(10, 17, 31, 0.45);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: var(--fs-sm);
  animation: hero-rise 0.9s var(--ease-out) 0.6s both;
}
.hero__next:hover { text-decoration: none; background: rgba(10, 17, 31, 0.65); }
.hero__next-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold-soft);
}
.hero__next strong { font-weight: var(--fw-semibold); }
.hero__next .icon { width: 1em; height: 1em; }
.hero--page .hero__kicker { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
.hero__img--stage { object-position: 50% 35%; }
.hero__kicker {
  margin: 0 0 var(--space-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold-soft);
  animation: hero-rise 0.9s var(--ease-out) 0.05s both;
}
.hero__title {
  color: #fff;
  font-size: var(--fs-hero);
  font-weight: var(--fw-light);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
  animation: hero-rise 0.9s var(--ease-out) 0.15s both;
}
.hero__date {
  margin: var(--space-md) 0 0;
  font-size: clamp(1.35rem, 1rem + 1.4vw, 2.1rem);
  font-weight: var(--fw-regular);
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
  animation: hero-rise 0.9s var(--ease-out) 0.3s both;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  animation: hero-rise 0.9s var(--ease-out) 0.45s both;
}
.hero__actions + .hero__next { display: flex; width: fit-content; }

/* Hero auf Unterseiten (z. B. Konvent-Rueckblick): niedriger, Text unten */
.hero--page { min-height: 72vh; min-height: 72svh; align-items: flex-end; }
.hero--page .hero__content { max-width: 52rem; }
.hero--page::before {
  background:
    linear-gradient(180deg, rgba(20, 33, 58, 0.55) 0%, rgba(20, 33, 58, 0) 30%),
    linear-gradient(90deg, rgba(20, 33, 58, 0.78) 0%, rgba(20, 33, 58, 0.45) 45%, rgba(20, 33, 58, 0) 75%),
    linear-gradient(0deg, rgba(20, 33, 58, 0.9) 0%, rgba(20, 33, 58, 0.35) 55%, rgba(20, 33, 58, 0.1) 100%);
}

/* Moderne, gestaffelte Einblend-Animation fuer den Hero-Text */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   ABSCHNITTS-KOPF (Titel + kurze Akzent-Linie + Intro)
   ============================================================ */
.section__head { max-width: 46rem; margin-bottom: var(--space-lg); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__title {
  font-size: var(--fs-h2);
  margin: 0;
}
.section__title::after {
  content: "";
  display: block;
  width: 3rem; height: 3px;
  margin-top: var(--space-sm);
  background: var(--color-accent);
  border-radius: 2px;
}
.section__head--center .section__title::after { margin-inline: auto; }
.section__intro + .section__intro { margin-top: var(--space-sm); }
.section__intro {
  margin-top: var(--space-md);
  font-size: var(--fs-lead);
  color: var(--color-text-muted);
  max-width: 62ch;
}
.section__head--center .section__intro { margin-inline: auto; }
#rueckblicke .section__head { max-width: none; }

/* ============================================================
   RÜCKBLICKE / ALUMNI-KONVENTE — Karten mit Foto-Karussell
   ============================================================ */
.timeline__heading { font-size: var(--fs-h3); color: var(--color-primary); margin: 0 0 var(--space-md); }

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* zwei Konvent-Kacheln nebeneinander */
  gap: clamp(var(--space-lg), 3vw, var(--space-xl));
}

/* Eine Konvent-Kachel = eine Karte (Bild oben, Text darunter) */
.timeline__item {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.timeline__item:hover { box-shadow: var(--shadow); }

/* Neuester Konvent: ueber die volle Breite, Bild links, Text rechts */
.timeline__item--featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
}
/* Breite kommt aus der Spalte, Hoehe aus der Karte – nie umgekehrt,
   sonst schiebt sich das Foto bei langem Text ueber die Textspalte. */
.timeline__item--featured .timeline__media {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
  min-height: 24rem;
}
.timeline__item--featured .timeline__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(var(--space-lg), 3vw, var(--space-xl));
}
.timeline__item--featured .timeline__title { font-size: var(--fs-h2); }

/* Bildflaeche (16:9) oben in der Karte */
.timeline__media {
  margin: 0;
  aspect-ratio: 16 / 9;
  min-height: 0;
  background: linear-gradient(135deg, var(--navy-100), var(--color-surface-alt));
}

/* Textbereich der Karte */
.timeline__content { padding: var(--space-lg); }

.timeline__year {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  margin: 0 0 0.15rem;
}
.timeline__title { font-size: 1.2rem; line-height: var(--lh-snug); margin: 0 0 0.35rem; }
.timeline__meta {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
  margin: 0 0 var(--space-xs);
}
.timeline__text { color: var(--color-text-muted); max-width: 62ch; margin: 0; }
.timeline__more { margin-top: var(--space-md); align-self: flex-start; }
/* Knopf "Ältere Rückblicke anzeigen" (von main.js ergaenzt, nur auf dem Handy sichtbar) */
.timeline__toggle { display: none; }

/* ---------- Foto-Karussell (Wischen auf Touch, Pfeile per Klick) ----------
   Ohne JavaScript bleibt es eine horizontal wischbare Bildleiste.
   Pfeile + Zaehler werden von main.js ergaenzt (nur bei > 1 Foto). */
.carousel { position: relative; overflow: hidden; }
.carousel__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  height: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.carousel__slide picture { display: contents; }
.carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* Bild fuellt die Flaeche; Ueberstand wird beschnitten */
}

/* Dezente Pfeile: auf Geraeten mit Maus erst beim Ueberfahren sichtbar */
.carousel__btn {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
  color: var(--navy-900);
  box-shadow: 0 2px 10px rgba(20, 33, 58, 0.25);
  cursor: pointer;
  opacity: 0.85;
  transition: opacity var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.carousel__btn:hover { background: #fff; opacity: 1; }
.carousel__btn .icon { width: 1.15rem; height: 1.15rem; stroke-width: 2.4; }
.carousel__btn--prev { left: 0.75rem; }
.carousel__btn--next { right: 0.75rem; }

.carousel__count {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  margin: 0;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  background: rgba(20, 33, 58, 0.72);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .carousel__btn { opacity: 0; }
  .carousel:hover .carousel__btn,
  .carousel:focus-within .carousel__btn { opacity: 0.85; }
  .carousel:hover .carousel__btn:hover { opacity: 1; }
}

/* Bildunterschrift im Karussell (unten links, neben dem Zaehler) */
.carousel__slide { position: relative; }
.carousel__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: 2.75rem 5.5rem 0.85rem 1rem;
  background: linear-gradient(180deg, rgba(10, 17, 31, 0) 0%, rgba(10, 17, 31, 0.78) 100%);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  pointer-events: none;
}

/* ============================================================
   AUSBLICK — Hinweiskarte zum naechsten Termin
   ============================================================ */
.section--compact { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.callout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.callout__media { position: relative; min-height: 15rem; background: var(--navy-800); }
.callout__media picture { display: contents; }
.callout__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.callout__body {
  padding: clamp(var(--space-lg), 3vw, var(--space-xl));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.callout__kicker {
  margin: 0 0 0.3rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
}
.callout__title { font-size: var(--fs-h2); margin: 0 0 var(--space-2xs); }
.callout__date { margin: 0 0 var(--space-sm); font-size: var(--fs-lead); font-weight: var(--fw-semibold); color: var(--color-primary); }
.callout__body > p:not([class]) { color: var(--color-text-muted); max-width: 60ch; }
.callout__body .link-arrow { margin-top: var(--space-xs); }

/* Datums-Plakette (z. B. auf dem Foto der Hinweiskarte) */
.date-badge {
  position: absolute;
  left: var(--space-md);
  bottom: var(--space-md);
  display: grid;
  place-items: center;
  align-content: center;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--color-accent), var(--color-accent-strong));
  color: #fff;
  text-align: center;
  line-height: 1.05;
  box-shadow: var(--shadow);
}
.date-badge__day { font-size: 2.1rem; font-weight: var(--fw-semibold); }
.date-badge__month { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; }

/* Zweispaltige Einleitung (volle Breite, angenehme Zeilenlaenge) */
.intro-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(var(--space-lg), 4vw, var(--space-2xl));
}
.intro-cols .section__intro { max-width: none; }
.intro-cols .section__intro + .section__intro { margin-top: var(--space-md); }

/* Kurzer Info-Kasten (z. B. "So nehmen Sie teil") */
.info-note {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  margin: 0 0 var(--space-xl);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-sm);
  color: var(--color-text);
}
.info-note .icon { color: var(--color-primary); margin-top: 0.2rem; }
.info-note p { margin: 0; }

/* ============================================================
   HAUS-METAPHER — Dach / drei Säulen / Fundament (Über den Verein)
   ============================================================ */
.haus {
  margin: 0 auto;
  max-width: 920px;
  display: grid;
  gap: 6px;
}
/* Dach: Trapez (Navy) mit abgerundeten unteren Ecken. polygon() ist der Fallback. */
.haus__dach {
  clip-path: polygon(28% 0, 72% 0, 100% 100%, 0 100%);
  clip-path: shape(
    from 28% 0,
    line to 72% 0,
    line to calc(100% - 8px) calc(100% - 12px),
    curve to calc(100% - 14px) 100% with 100% 100%,
    line to 14px 100%,
    curve to 8px calc(100% - 12px) with 0% 100%,
    close
  );
  background: linear-gradient(160deg, var(--navy-500), var(--navy-700));
  min-height: 96px;
  display: grid;
  place-items: center;
  gap: var(--space-3xs);
  padding: var(--space-md) var(--space-lg) var(--space-2xs);
}
.haus__dach-label {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  color: #fff;
  text-align: center;
}
/* Säulen: drei tragende Spalten unter dem Dach */
.haus__saeulen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.haus__saeule { display: flex; }
.haus__saeule a {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: var(--space-md);
  background: linear-gradient(180deg, var(--navy-600), var(--navy-800));
  color: #fff;
  text-decoration: none;
  border-top: 4px solid var(--color-accent);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.haus__saeule:first-child a { border-top-left-radius: var(--radius); }
.haus__saeule:last-child a { border-top-right-radius: var(--radius); }
.haus__saeule a:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  background: linear-gradient(180deg, var(--navy-500), var(--navy-700));
  text-decoration: none;
}
.haus__kicker {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-on-dark-muted);
}
/* Das Dach ist heller als Säulen und Fundament: etwas hellere Schrift fuer genug Kontrast */
.haus__dach .haus__kicker { color: rgba(255, 255, 255, 0.85); }
.haus__saeule-titel {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: #fff;
}
.haus__saeule-text { font-size: var(--fs-sm); color: var(--color-on-dark-muted); }
/* Fundament: breite Basis unter den Säulen */
.haus__fundament {
  background: var(--navy-900);
  color: #fff;
  padding: var(--space-md) var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.2rem var(--space-sm);
  text-align: center;
  border-radius: 0 0 var(--radius) var(--radius);
}
.haus__fundament-text { color: var(--color-on-dark-muted); font-size: var(--fs-lead); }

/* Erläuterung Fundament + Dach (zwei Spalten unter der Grafik) */
.haus-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  max-width: 920px;
  margin: var(--space-xl) auto 0;
}
.haus-detail__item h3 { font-size: var(--fs-h3); margin: 0 0 var(--space-2xs); }
.haus-detail__item p { color: var(--color-text-muted); margin: 0; }

/* ============================================================
   GERMAN LEADERSHIP AWARD — dunkler, ausgezeichneter Abschnitt
   ============================================================ */
.award {
  background:
    radial-gradient(120% 130% at 50% -10%, var(--navy-700), var(--navy-900) 70%);
  color: var(--color-on-dark);
  text-align: center;
}
.award__inner {
  display: grid;
  justify-items: center;
  gap: var(--space-md);
}
.award__medal {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 1rem + 2vw, 2.4rem) clamp(1.8rem, 1.2rem + 3vw, 3.4rem);
  box-shadow: var(--shadow-lg);
  margin-bottom: var(--space-sm);
}
.award__medal img { height: clamp(84px, 60px + 6vw, 128px); width: auto; }
.award__title { color: #fff; font-size: var(--fs-h2); margin: 0; }
.award__title::after {
  content: "";
  display: block;
  width: 3rem; height: 3px;
  margin: var(--space-sm) auto 0;
  background: var(--color-gold);
  border-radius: 2px;
}
.award__lead {
  color: var(--color-on-dark-muted);
  font-size: var(--fs-lead);
  max-width: 62ch;
}
.award__invite { color: var(--color-gold-soft); font-size: var(--fs-lead); max-width: 62ch; margin: var(--space-sm) 0 0; }
.award__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; margin-top: var(--space-md); }

/* Juengste Preistraegerinnen und Preistraeger */
.laureates { width: 100%; margin-top: var(--space-xl); }
.laureates__title {
  margin: 0 0 var(--space-md);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-on-dark-muted);
}
.laureates__list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  text-align: left;
}
.laureates__list li {
  padding: var(--space-md);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 2px solid var(--color-gold);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
}
.laureates__year { display: block; color: var(--color-gold-soft); font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.laureates__name { display: block; margin-top: 0.2rem; color: #fff; font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.laureates__role { display: block; margin-top: 0.3rem; color: var(--color-on-dark-muted); font-size: var(--fs-sm); line-height: var(--lh-snug); }
.laureates__more { display: inline-flex; margin-top: var(--space-md); color: var(--color-gold-soft); }

/* ============================================================
   EVENTS & VERNETZUNG
   ============================================================ */
.events-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.event-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}
.event-card__title { font-size: var(--fs-h3); margin: 0 0 var(--space-sm); }
.event-card__list { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.5rem; }
.event-card__list li { color: var(--color-text-muted); }

/* WhatsApp-Community: links Logo + Text, rechts eine Kennzahl-Kachel
   ueber die volle Kartenhoehe */
.community {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 30%);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: var(--space-lg);
}
.community__main { padding: clamp(var(--space-lg), 3vw, var(--space-xl)); }
.community__head { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-xs); }
.community__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: #25D366;   /* WhatsApp-Gruen */
  color: #fff;
}
.community__mark svg { width: 1.75rem; height: 1.75rem; }
.community__title { font-size: var(--fs-h3); margin: 0; }
.community__body > p { color: var(--color-text-muted); margin: 0; max-width: 70ch; padding-left: calc(3rem + var(--space-sm)); }
.community__body .community__access { margin-top: var(--space-sm); font-size: var(--fs-sm); }
.community__access strong { color: var(--color-text); }
.community__stat {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  padding: var(--space-lg);
  background: var(--color-surface-alt);
  border-left: 1px solid var(--color-border);
  text-align: center;
}
.community__stat strong {
  font-size: clamp(2.4rem, 1.8rem + 2vw, 3.2rem);
  font-weight: var(--fw-semibold);
  line-height: 1;
  color: var(--color-primary);
}
.community__stat span { font-size: var(--fs-sm); color: var(--color-text-muted); }

/* CDI Angels — hervorgehobene Initiative
   Breite Bildschirme: Symbol | Text | Kennzahl + Schwerpunkte.
   Schmaler: Kennzahl + Schwerpunkte wandern unter den Text. */
.angels {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(16rem, 24rem);
  align-items: start;
  gap: var(--space-lg) var(--space-xl);
  background: radial-gradient(120% 140% at 0% 0%, var(--navy-700), var(--navy-900) 70%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow);
}
.angels__mark {
  width: 4rem;
  height: 4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--color-accent), var(--color-accent-strong));
  color: #fff;
}
.angels__icon { width: 2rem; height: 2rem; stroke-width: 2; }
.angels__kicker {
  color: var(--color-on-dark-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin: 0 0 0.2rem;
}
.angels__title { color: #fff; font-size: var(--fs-h2); margin: 0 0 var(--space-sm); }
.angels__body p { color: var(--color-on-dark-muted); max-width: 68ch; margin: 0; }

/* CDI Angels: eine Kennzahl + Schwerpunkte */
.angels__highlights {
  display: grid;
  gap: var(--space-md);
  align-self: center;
  padding-left: var(--space-xl);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.angels__stat { display: flex; align-items: center; gap: 0.75rem; margin: 0; color: var(--color-on-dark-muted); }
.angels__stat strong { font-size: 2.2rem; line-height: 1; font-weight: var(--fw-semibold); color: var(--color-gold-soft); }
.angels__stat span { max-width: 12rem; font-size: var(--fs-sm); line-height: var(--lh-snug); }
.angels__sectors { margin: 0; }
/* Schwerpunkte als Schlagwort-Kapseln: brechen sauber um, ohne Trennzeichen */
.angels__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.angels__tags li {
  padding: 0.2rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--color-on-dark);
}
.angels__label {
  display: block;
  margin: 0 0 0.5rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold-soft);
}

/* ============================================================
   VORSTAND — Personen mit rundem Portrait
   ============================================================ */
.board {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: var(--space-lg);
}
.board__member {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  text-align: left;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.board__member:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
/* Textbereich rechts neben dem Bild */
.board__body { min-width: 0; }
.board__avatar {
  width: 7rem; height: 7rem;   /* rundes Portrait */
  flex: none;                  /* Bild behaelt seine Groesse (nicht schrumpfen) */
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(145deg, var(--navy-500), var(--navy-800));
}
.board__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.board__name { font-size: var(--fs-h3); margin: 0 0 0.2rem; }
.board__role { color: var(--color-accent); font-weight: var(--fw-semibold); font-size: var(--fs-sm); margin: 0; }
/* Motivation des Vorstands: Zitat + drei Leitgedanken */
.motivation {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(var(--space-lg), 4vw, var(--space-2xl));
  align-items: center;
  margin: 0 0 var(--space-xl);
}
.motivation__quote {
  margin: 0;
  padding-left: var(--space-lg);
  border-left: 3px solid var(--color-accent);
}
.motivation__quote p {
  margin: 0;
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  line-height: 1.55;
  color: var(--color-ink);
}
.motivation__quote footer {
  margin-top: var(--space-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
}
.motivation__points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.motivation__points li { padding-left: var(--space-sm); border-left: 1px solid var(--color-border); }
.motivation__points strong { display: block; color: var(--color-ink); }
.motivation__points span { display: block; font-size: var(--fs-sm); color: var(--color-text-muted); }

/* LinkedIn-Link unter dem Namen */
.board__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
}
.board__link .icon { width: 1.1rem; height: 1.1rem; fill: currentColor; stroke: none; }

/* ============================================================
   MITGLIEDSCHAFT — Vorteile + drei Schritte
   ============================================================ */
.membership {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(var(--space-lg), 4vw, var(--space-2xl));
  align-items: stretch;
}
.membership__benefits {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-lg), 3vw, var(--space-xl));
  box-shadow: var(--shadow-sm);
}
.membership__benefits h3,
.steps__title { font-size: var(--fs-h3); margin: 0 0 var(--space-md); }
.membership__fee { margin: var(--space-md) 0 0; padding-top: var(--space-sm); border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--fs-sm); }

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.checklist li { position: relative; padding-left: 1.9rem; color: var(--color-text); }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.3em;
  width: 1.15rem; height: 1.15rem;
  border-radius: 50%;
  background: var(--color-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 0.8rem no-repeat;
}

.membership__steps { display: flex; flex-direction: column; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); counter-reset: step; }
/* Hoehendifferenz zur linken Karte gleichmaessig auf alle Schritte verteilen,
   Inhalt jeweils vertikal mittig (Ziffer bleibt auf Hoehe des Titels) */
.membership__steps .steps { flex: 1; display: flex; flex-direction: column; }
.membership__steps .steps li { flex: 1 1 auto; align-content: center; }
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr);
  column-gap: var(--space-sm);
  row-gap: 0.3rem;
  align-items: center;
  align-content: start;
  padding: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.steps li::before {
  content: counter(step);
  grid-column: 1;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 2.1rem; height: 2.1rem;
  border-radius: 50%;
  background: var(--navy-700);
  color: #fff;
  font-weight: var(--fw-semibold);
}
.steps h4 { grid-column: 2; grid-row: 1; font-size: 1.1rem; margin: 0; }
.steps p { grid-column: 2; margin: 0; color: var(--color-text-muted); }

/* Letzter Schritt als Hoehepunkt: dunkel, mit goldener Ziffer */
.steps .steps__highlight {
  background: linear-gradient(150deg, var(--navy-700), var(--navy-900));
  border-color: transparent;
  box-shadow: var(--shadow);
}
.steps .steps__highlight::before { background: var(--color-gold); color: var(--navy-900); }
.steps .steps__highlight h4 { color: #fff; }
.steps .steps__highlight p { color: var(--color-on-dark-muted); }

/* Weitere Vorteile, bewusst zurueckhaltend */
.membership__note { margin: var(--space-md) 0 0; color: var(--color-text-muted); font-size: var(--fs-sm); }
.checklist strong { color: var(--color-ink); }

.membership__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
  margin-top: var(--space-xl);
}

.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--navy-800); }

/* ============================================================
   FAQ — aufklappbare Fragen (native <details>)
   ============================================================ */
.faq { display: grid; gap: var(--space-sm); max-width: 56rem; }
.faq__item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--color-ink);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .icon { color: var(--color-primary); transition: transform var(--dur-fast) var(--ease-out); }
.faq__item[open] summary .icon { transform: rotate(180deg); }
.faq__answer { padding: 0 var(--space-lg) var(--space-md); }
.faq__answer p { color: var(--color-text-muted); }

/* ============================================================
   KONVENT-RÜCKBLICK (Unterseite, z. B. konvent-2026.html)
   ============================================================ */
.breadcrumb { margin: 0 0 var(--space-md); font-size: var(--fs-sm); color: var(--color-text-muted); }
.breadcrumb a { display: inline-block; padding-block: 0.35rem; font-weight: var(--fw-semibold); }

/* Einleitung + Eckdaten nebeneinander */
.about {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(var(--space-lg), 4vw, var(--space-2xl));
  align-items: start;
}
.about__text > p { color: var(--color-text-muted); max-width: 62ch; }
.about__text .section__intro { color: var(--color-text); margin-bottom: var(--space-md); }
.about__facts {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: var(--space-sm);
}
.about__facts li {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius);
  padding: var(--space-sm) var(--space-md);
  box-shadow: var(--shadow-sm);
}
.about__label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.about__value {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--fs-lead);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  line-height: var(--lh-snug);
}

/* Programm: drei Tage nebeneinander, der Haupttag hervorgehoben */
.programm {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: var(--space-md);
  align-items: stretch;
}
.programm__day {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}
.programm__day h3 { font-size: var(--fs-h3); margin: 0 0 var(--space-2xs); }
.programm__day p,
.programm__day li { color: var(--color-text-muted); }
.programm__day ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.35rem; }
.programm__date {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
  margin: 0 0 var(--space-3xs);
}
.programm__day--main {
  background: linear-gradient(150deg, var(--navy-700), var(--navy-900));
  border-color: transparent;
  box-shadow: var(--shadow);
}
.programm__day--main h3 { color: #fff; }
.programm__day--main p,
.programm__day--main li { color: var(--color-on-dark-muted); }
.programm__day--main .programm__date { color: var(--color-gold-soft); }

/* Galerie: Vorschaubilder, Klick oeffnet die Grossansicht.
   Drei Spalten, das erste Foto belegt 2 x 2 Felder: bei 6 Fotos
   (oder 9, 12 ...) gehen alle Reihen genau auf. */
.gallery {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
}
.gallery li:first-child { grid-column: span 2; grid-row: span 2; }
.gallery__item {
  display: block;
  height: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--navy-100);
}
.gallery__item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform var(--dur) var(--ease-out);
}
.gallery__item:hover img { transform: scale(1.04); }
.gallery__item picture { display: contents; }

/* ---------- Angaben mit Trennpunkt, z. B. "Ort · Datum" ----------
   Jeder Teil bekommt den Punkt vorangestellt; die Zeile ist um die
   Punktbreite nach links verschoben und dort abgeschnitten. So steht
   der Punkt nur ZWISCHEN zwei Teilen einer Zeile. Bricht ein Teil in
   die naechste Zeile um, verschwindet sein Punkt links, statt am
   Zeilenende haengen zu bleiben. */
:is(p, span).seps {
  display: flex;
  flex-wrap: wrap;
  margin-left: -1.1em;
  clip-path: inset(-2em -2em -2em 1.1em);
}
.seps > *::before {
  content: "·";
  content: "·" / "";
  display: inline-block;
  width: 1.1em;
  text-align: center;
  font-weight: var(--fw-regular);
}

/* Grossansicht (Lightbox) — wird von main.js erzeugt */
.lightbox {
  width: 100vw; height: 100vh;
  width: 100dvw; height: 100dvh;
  max-width: none; max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(10, 17, 31, 0.94);
  color: #fff;
  overscroll-behavior: contain;
}
.lightbox::backdrop { background: rgba(10, 17, 31, 0.6); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox__figure {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: var(--space-xs);
  padding: 3.5rem var(--space-md) var(--space-md);
  max-width: 100%;
  max-height: 100%;
}
.lightbox__figure picture { display: contents; }
.lightbox__figure img {
  max-width: min(100%, 1600px);
  max-height: calc(100dvh - 8rem);
  width: auto; height: auto;
  border-radius: var(--radius-sm);
  touch-action: pan-y;
  user-select: none;
}
.lightbox__caption { color: var(--color-on-dark-muted); font-size: var(--fs-sm); text-align: center; }
.lightbox__btn,
.lightbox__close {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.lightbox__btn:hover,
.lightbox__close:hover { background: rgba(255, 255, 255, 0.25); }
.lightbox__btn .icon,
.lightbox__close .icon { width: 1.4rem; height: 1.4rem; }
.lightbox__btn { top: 50%; translate: 0 -50%; }
.lightbox__btn--prev { left: var(--space-sm); }
.lightbox__btn--next { right: var(--space-sm); }
.lightbox__close { top: var(--space-sm); right: var(--space-sm); }
.lightbox__count {
  position: absolute;
  top: calc(var(--space-sm) + 0.8rem);
  left: var(--space-md);
  margin: 0;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--color-on-dark-muted);
}

/* ============================================================
   AUFRUF ZUM MITMACHEN (CTA-Band)
   ============================================================ */
.cta {
  background: linear-gradient(135deg, var(--navy-700), var(--navy-900));
  color: var(--color-on-dark);
}
.section.cta { padding-block: var(--section-y); }
.cta__inner { text-align: center; max-width: 46rem; margin-inline: auto; }
.cta__title { color: #fff; font-size: var(--fs-h2); margin: 0 0 var(--space-sm); }
.cta__lead { color: var(--color-on-dark-muted); font-size: var(--fs-lead); margin: 0 0 var(--space-lg); }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; }

/* ============================================================
   FUSSZEILE
   ============================================================ */
.site-footer { background: var(--navy-900); color: var(--color-on-dark-muted); }
.site-footer__inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: var(--space-xl);
  padding-block: var(--space-2xl);
}
.site-footer__logo { height: 3.25rem; width: auto; margin-bottom: var(--space-sm); }
.site-footer__brand p { max-width: 30ch; margin: 0; }
.site-footer__h {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-on-dark);
  margin: 0 0 var(--space-sm);
}
.site-footer__links, .site-footer__contact { display: grid; gap: 0.5rem; align-content: start; }
.site-footer address { font-style: normal; }
.site-footer a { color: var(--color-on-dark-muted); }
.site-footer p > a:not([class]) { font-weight: var(--fw-regular); text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer__contact p { margin: 0; }

.site-footer__bar { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.site-footer__barinner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-md);
  font-size: var(--fs-sm);
}
.site-footer__barinner nav { display: flex; gap: var(--space-md); }

/* ============================================================
   INHALTSSEITEN (Impressum, Datenschutz)
   ============================================================ */
.page-head {
  background: linear-gradient(135deg, var(--navy-700), var(--navy-900));
  color: #fff;
  padding-block: var(--space-2xl);
}
.page-head h1 { color: #fff; font-size: var(--fs-h2); margin: 0; }
.page-head p { color: var(--color-on-dark-muted); margin: var(--space-xs) 0 0; }
.prose { max-width: 72ch; }
.prose h2 { font-size: var(--fs-h3); margin: var(--space-xl) 0 var(--space-xs); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.1rem; margin: var(--space-lg) 0 var(--space-2xs); }
.prose p, .prose address, .prose ul { margin: 0 0 var(--space-sm); font-style: normal; color: var(--color-text); }
.prose ul { padding-left: 1.2rem; }
.prose li + li { margin-top: 0.3rem; }
.prose a:not(.btn) { text-decoration: underline; overflow-wrap: anywhere; }

/* ============================================================
   EINBLEND-ANIMATION (nur wenn erlaubt; Inhalt sonst sichtbar)
   ============================================================ */
body.motion-ok .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
body.motion-ok .reveal.is-visible { opacity: 1; transform: none; }

/* Kraeftigerer "Einflug von unten" fuer die Konvent-Rueckblicke;
   die Eintraege erscheinen leicht nacheinander (gestaffelt). */
body.motion-ok .timeline__item.reveal {
  transform: translateY(60px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
body.motion-ok .timeline__item.reveal.is-visible { transform: none; }
body.motion-ok .timeline__item:nth-child(even).reveal { transition-delay: 0.05s; }
body.motion-ok .timeline__item:nth-child(odd).reveal  { transition-delay: 0.18s; }
body.motion-ok .timeline__item:first-child.reveal     { transition-delay: 0.05s; }

/* ============================================================
   RESPONSIV
   ============================================================ */
/* ---------- Navigation: Menü-Knopf (Tablet & Mobil) ----------
   Ab hier klappt die Navigation zu einem Menü zusammen. Der
   Menü-Knopf blendet es ein/aus (siehe main.js). "Mitglied
   werden" bleibt daneben in der Kopfzeile sichtbar. */
@media (max-width: 1200px) {
  /* Im HTML steht der Menü-Knopf direkt vor dem Menü (sinnvolle Tab-
     Reihenfolge); optisch sitzt er ganz rechts neben "Mitglied werden". */
  .nav-toggle { display: flex; order: 2; }
  .nav__cta { margin-left: auto; order: 1; }

  .primary-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3xs);
    margin-left: 0;
    padding: var(--space-sm) var(--gutter) var(--space-md);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    display: none;
  }
  .primary-nav.is-open { display: flex; }

  /* Menü geöffnet: Kopfzeile immer solide (auch über dem Hero) */
  body.nav-open .site-header,
  body.nav-open.has-hero .site-header:not(.is-scrolled) { background: var(--color-surface); border-bottom-color: var(--color-border); }
  body.nav-open.has-hero .site-header:not(.is-scrolled) .brand__logo--light { opacity: 0; }
  body.nav-open.has-hero .site-header:not(.is-scrolled) .brand__logo--dark { opacity: 1; }
  body.nav-open.has-hero .site-header:not(.is-scrolled) .nav-toggle { border-color: var(--color-border); }
  body.nav-open.has-hero .site-header:not(.is-scrolled) .nav-toggle__bar { background: var(--color-primary); }

  /* Links im geöffneten Menü anzeigen (überschreibt Hero-Regeln) */
  .site-header .primary-nav.is-open > a:not(.btn),
  body.nav-open.has-hero .site-header:not(.is-scrolled) .primary-nav > a:not(.btn) {
    display: block;
    color: var(--color-text);
    font-size: var(--fs-lead);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
  }
  .site-header .primary-nav.is-open > a:not(.btn):hover { background: var(--color-surface-alt); text-decoration: none; }
  .site-header .primary-nav.is-open > a:not(.btn)::after { display: none; }

  /* Mitgliederportal im Menü: volle Breite, Ghost-Stil (heller Panel-Grund) */
  .primary-nav.is-open .btn { width: 100%; justify-content: center; margin-top: var(--space-3xs); }
  body.nav-open.has-hero .site-header:not(.is-scrolled) .nav__login {
    color: var(--color-primary);
    background: transparent;
    border-color: var(--color-border);
  }
}

@media (max-width: 900px) {
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
  .timeline__item--featured { grid-template-columns: 1fr; }
  .timeline__item--featured .timeline__media { height: auto; min-height: 0; aspect-ratio: 3 / 2; }
  .programm { grid-template-columns: 1fr; }
  .about { grid-template-columns: 1fr; }
  .callout { grid-template-columns: 1fr; }
  .callout__media { min-height: 13rem; }
  .membership { grid-template-columns: 1fr; }
  .intro-cols { grid-template-columns: 1fr; }
  .intro-cols .section__intro + .section__intro { margin-top: var(--space-sm); }
  .motivation { grid-template-columns: 1fr; }
  .laureates__list { grid-template-columns: repeat(2, 1fr); }
  /* Kachel wandert unter den Text und wird zu einer schmalen Leiste */
  .community { grid-template-columns: 1fr; }
  .community__stat { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 0.75rem; padding: var(--space-md) clamp(var(--space-lg), 3vw, var(--space-xl)); border-left: 0; border-top: 1px solid var(--color-border); }
}

@media (max-width: 1100px) {
  /* CDI Angels: Kennzahl + Schwerpunkte unter dem Text */
  .angels { grid-template-columns: auto minmax(0, 1fr); }
  .angels__highlights {
    grid-column: 2;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-md) var(--space-xl);
    padding: var(--space-md) 0 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
}

@media (max-width: 720px) {
  .timeline { grid-template-columns: 1fr; }
  .haus-detail { grid-template-columns: 1fr; }
  .events-grid { grid-template-columns: 1fr; }
  .award__actions { flex-direction: column; align-items: stretch; }
  /* Galerie: zwei Spalten, erstes Foto ueber die volle Breite. Bei
     gerader Anzahl auch das letzte, sonst stuende es allein in der Reihe. */
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xs); }
  .gallery li:first-child { grid-column: 1 / -1; grid-row: auto; }
  .gallery li:first-child:nth-last-child(even) ~ li:last-child { grid-column: 1 / -1; }
  /* Hero: Text ueber die ganze Breite -> gleichmaessigere Abdunkelung */
  .hero::before {
    background: linear-gradient(180deg, rgba(20, 33, 58, 0.5) 0%, rgba(20, 33, 58, 0.6) 35%, rgba(20, 33, 58, 0.86) 100%);
  }
  .hero { align-items: flex-end; }
  .hero--page::before {
    background:
      linear-gradient(180deg, rgba(20, 33, 58, 0.55) 0%, rgba(20, 33, 58, 0) 30%),
      linear-gradient(0deg, rgba(20, 33, 58, 0.92) 0%, rgba(20, 33, 58, 0.4) 65%, rgba(20, 33, 58, 0.15) 100%);
  }
  .lightbox__btn { top: auto; bottom: var(--space-sm); translate: none; }
}

/* Handy: die aelteren Rueckblicke sind zunaechst eingeklappt, damit die
   Startseite nicht endlos lang wird (main.js setzt .is-collapsed und den Knopf) */
@media screen and (max-width: 720px) {
  .timeline.is-collapsed > .timeline__item:not(:first-child) { display: none; }
  .timeline__toggle { display: flex; width: 100%; justify-content: center; margin-top: var(--space-md); }
}

@media (max-width: 600px) {
  .community__body > p { padding-left: 0; }
  .laureates__list { grid-template-columns: 1fr; }
  .angels { grid-template-columns: 1fr; padding: var(--space-lg); }
  .angels__highlights { grid-column: auto; grid-template-columns: 1fr; }
  .haus__saeule a { padding: var(--space-sm); }
  .haus__saeule-titel { font-size: var(--fs-base); }
}

@media (max-width: 560px) {
  .site-footer__inner { grid-template-columns: 1fr; gap: var(--space-lg); }
  .site-footer__links { gap: 0; }
  .site-footer__links a, .site-footer__barinner nav a { display: inline-block; padding-block: 0.7rem; }
  .site-footer__contact a { display: inline-block; padding-block: 0.6rem; }
  .btn { width: 100%; justify-content: center; }
  .hero__actions .btn, .cta .btn { width: 100%; }
  /* Kopfzeile: Logo, "Mitglied werden" und Menü-Knopf passen nebeneinander */
  .site-header .btn { width: auto; }
  .site-header__inner { gap: var(--space-xs); }
  .nav__cta { font-size: 0.95rem; padding: 0.55rem 0.9rem; }
}

@media (max-width: 380px) {
  .site-header__inner { gap: var(--space-2xs); }
  .brand { --logo-h: 1.9rem; }
  .nav__cta { font-size: 0.8125rem; padding: 0.5rem 0.65rem; }
  .nav-toggle { width: 2.5rem; height: 2.5rem; }
}

@media (max-width: 480px) {
  /* Termin-Hinweis im Hero: Label oben, darunter Text und Pfeil nebeneinander
     (sonst rutscht der Pfeil bei umbrechendem Text allein in eine Zeile) */
  .hero__next,
  .hero__actions + .hero__next { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .hero__next-label { grid-column: 1 / -1; }
  /* Haus bleibt als Metapher erkennbar (drei Säulen), wird aber kompakter */
  .haus__saeule a { padding: var(--space-xs); }
  .haus__kicker { font-size: 0.75rem; letter-spacing: 0.08em; }
  .haus__saeule .haus__kicker { display: none; }
  .haus__saeule-titel { font-size: 0.95rem; }
  .haus__saeule-text { display: none; }
}

/* ---------- Weniger Bewegung (Barrierefreiheit) ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .btn:hover, .board__member:hover, .haus__saeule a:hover { transform: none; }
}

/* ---------- Druck: alle Inhalte sichtbar, keine Bedienelemente ---------- */
@media print {
  .site-header, .skip-link, .carousel__btn, .carousel__count, .hero__actions { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero { min-height: 0; margin-top: 0; color: #000; }
  .hero::before, .hero__img { display: none; }
  .hero__title, .hero__date { color: #000; text-shadow: none; }
}