/* ── styles.css ── */
/* SfKuK — Stiftung für Kunst und Kultur e.V. Bonn
   Visual system, distilled from the Figma drafts:
   - Type: Inter as primary UI face (Mukta Mahee available for display)
   - Palette: ink black, paper white, signal red (#FE0000 / #DF3013), warm grey neutrals
   - Map sea: very pale blue (#EAF9FF), land: light grey (#E1E1E1)
   - Forms: rounded pill controls (radius 999), 20px card radius, 1px hairline dividers
*/

:root {
  --ink: #0a0a0a;
  --ink-2: #1a1a1a;
  --muted: #6a6a6a;
  --muted-2: #afafaf;
  --hair: #eaeaea;
  --hair-2: #f2f2f2;
  --paper: #ffffff;
  --paper-2: #f5f5f5;
  --paper-3: #fafafa;
  --red: #fe0000;
  --red-deep: #df3013;
  --red-soft: #ffe4e4;
  --sea: #eaf9ff;
  --land: #e1e1e1;
  --land-stroke: #cbcbcb;

  --r-card: 20px;
  --r-thumb: 18px; /* kleinere Bilder etwas eckiger (Kompromiss Sarah/Paul 08/2026) */
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.04);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.04);

  --header-h: 80px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Overscroll-Canvas (Gummiband beim zu weiten Hochscrollen) immer weiß —
   ohne explizites html-Background blitzt sonst Schwarz auf. */
html { background: #fff; }
body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font-family: inherit; cursor: pointer; }
a { color: inherit; }

::selection { background: var(--red); color: #fff; }

/* ───── Header ───── */

.app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, background .25s;
}
.app-header.scrolled { border-bottom-color: var(--hair); }
.app-header__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 14px 40px;
  height: var(--header-h);
}
.header-search-group {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 720px;
  justify-self: end;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.app-header.scrolled .header-search-group,
.app-header.force-search .header-search-group {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.app-header.force-search .search--in-header .search__input { height: 44px; font-size: 14px; padding: 0 56px 0 20px; }
.app-header.force-search .search--in-header .search__btn { width: 34px; height: 34px; }
.app-header .search--in-header {
  width: 100%;
  max-width: 520px;
  flex: 1;
}
.header__filter-btn {
  height: 44px;
  flex: none;
  align-self: center;
}
.app-header.scrolled .search--in-header .search__input { height: 44px; font-size: 14px; padding: 0 56px 0 20px; }
.app-header.scrolled .search--in-header .search__btn { width: 34px; height: 34px; }
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}
.brand__mark {
  position: relative;
  width: 47px;
  height: 47px;
  border: 2.6px solid var(--ink);
  flex: none;
}
.brand__mark::before,
.brand__mark::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.brand__mark::before { /* top-left red */
  width: 7px; height: 7px;
  top: -4px; left: -4px;
  background: var(--red);
}
.brand__mark::after { /* bottom-right black */
  width: 7px; height: 7px;
  bottom: -4px; right: -4px;
  background: var(--ink);
}
.brand__mark svg {
  position: absolute;
  inset: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
}
.brand__words {
  font-weight: 700;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.005em;
  color: var(--ink);
  white-space: pre;
}
.brand__words em {
  font-style: normal;
  color: var(--muted);
  font-weight: 500;
}

.search {
  position: relative;
  max-width: 720px;
  width: 100%;
  justify-self: center;
}
.search__input {
  width: 100%;
  height: 52px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hair);
  background: var(--paper);
  padding: 0 64px 0 24px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  outline: none;
  transition: box-shadow .2s, border-color .2s;
}
.search__input::placeholder { color: var(--muted-2); }
.search__input:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(0,0,0,0.05);
}
.search__btn {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--red);
  border: none;
  color: #fff;
  display: grid;
  place-items: center;
  transition: transform .15s, background .15s;
}
.search__btn { will-change: transform, box-shadow; }
.search__btn svg { transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.search__btn:hover {
  background: var(--red-deep);
  transform: scale(1.08) rotate(-4deg);
  box-shadow: 0 6px 18px rgba(254, 1, 0, 0.35);
}
.search__btn:hover svg { transform: scale(1.12); }
.search__btn:active { transform: scale(0.96) rotate(0deg); transition: transform .08s ease; }

.header__actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hair);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  transition: background .15s, border-color .15s, transform .1s;
}
/* Hover ohne harten schwarzen Stroke (Paul 08/2026): dezente Fläche + weicher
   Schatten statt Rahmen-Sprung auf Ink. */
.btn:hover { background: var(--paper-2); border-color: var(--hair); box-shadow: 0 4px 14px rgba(10,10,10,0.07); }
.btn:active { transform: translateY(1px); }
/* CTAs als <a>: kein Unterstrich — Pfeil/Pillenform sind Signal genug. */
a.btn { text-decoration: none; }
.btn--solid {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.btn--solid:hover { background: #000; border-color: #000; }
.btn--red {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.btn--red:hover { background: var(--red-deep); border-color: var(--red-deep); }
.btn--ghost {
  border: 1px solid var(--hair);
  background: transparent;
}
.btn--icon {
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  flex: 0 0 auto; /* never let long titles squash the circle into an oval */
}

.menu-btn {
  position: relative;
}
.menu-btn::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--red);
}

/* ───── Nav tabs ───── */

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 40px;
  border-top: 1px solid var(--hair);
  height: 52px;
  background: var(--paper);
}
.nav__tab {
  height: 100%;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  position: relative;
  transition: color .15s;
}
.nav__tab:hover { color: var(--ink); }
.nav__tab[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--red);
}
.nav__tab .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted-2);
}
.nav__tab[aria-current="page"] .dot { background: var(--red); }

/* ───── Page shell ───── */

.page { padding: 0 40px 60px; }
.page__head {
  padding: 36px 0 24px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}
.page__title {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
}
.page__sub {
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 8px;
}

/* ───── Hero (landing) ───── */

.hero {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 48px;
  padding: 40px 40px 40px;
  align-items: start;
  min-height: calc(100vh - var(--header-h));
}
.hero__left {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: 60px;
}
.hero__title {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 520px;
}
.hero__sub { font-size: 13.5px; color: var(--muted); margin: -16px 0 0; }
.hero__lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 520px;
  margin: 0;
}
.hero__search { max-width: 360px; width: 100%; }
.hero__search-row { display: flex; gap: 12px; max-width: 480px; }
.hero__quick { margin-top: 8px; }
.hero__quick h4 {
  font-size: 12px;

  letter-spacing: 0.08em;
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
  margin: 0 0 12px;
}
.hero__quick .chips { gap: 8px; }
.hero__quick .chip[aria-pressed="true"] {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.hero__right {
  position: relative;
  align-self: stretch;
  align-items: flex-end;
  min-height: 640px;
  display: flex;
  flex-direction: column;
}
.hero__wordmark {
  font-family: "Inter", "Helvetica Neue", sans-serif;
  font-weight: 800;
  font-size: clamp(40px, 4.6vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--red);
  margin: 0 0 28px;
  pointer-events: none;
}
.hero__map-wrap { margin-top: auto; }
.hero__wordmark .line { display: block; }
.hero__wordmark .bonn { color: var(--ink); font-weight: 700; }
.hero__map-wrap {
  position: relative;
  margin-left: auto;
  width: 100%;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--sea);
  border: 1px solid var(--hair);
  aspect-ratio: 16 / 7;
  width: 100%;
  height: auto;
}
.hero__map-wrap .map__svg { width: 100%; height: 100%; }

/* Collage pin: a "sculpture" floating where a city would be */
.collage {
  position: absolute;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
  cursor: pointer;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,0.18));
}
.collage:hover { transform: translate(-50%, calc(-100% - 4px)); transition: transform .15s; }
.collage__cluster {
  position: absolute;
  top: -10px;
  right: -14px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
  border: 2px solid #fff;
  z-index: 2;
}
.collage__art {
  width: 110px;
  height: 160px;
  position: relative;
}
.collage__art svg { width: 100%; height: 100%; display: block; }

/* ───── Section: about / projects on the landing ───── */

.landing-section {
  padding: 100px 40px;
  border-top: 1px solid var(--hair);
}
.landing-section__head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 60px;
  margin-bottom: 48px;
}
.landing-section__kicker {
  font-size: 12px;
  letter-spacing: 0.1em;

  color: var(--red);
  font-weight: 600;
  margin-bottom: 24px;
}
.landing-section__title {
  font-family: "Inter", sans-serif;
  font-size: clamp(40px, 4.6vw, 68px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 0;
}
.landing-section__lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
}

.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: stretch;
}
.about-grid__media {
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--hair);
  min-height: 480px;
  background: var(--paper-2);
}
.about-grid__media--photo {
  position: relative;
  min-height: 0;
  display: block;
  isolation: isolate;
}
.about-grid__media--photo img {
  width: 100%;
  height: 100%;
  min-height: 480px;
  object-fit: cover;
  display: block;
}
/* Linked image that fades in over the default photo when its pillar is hovered/focused.
   Uses a keyframe animation (not a transition) — this preview renderer freezes
   opacity while a CSS transition is attached. */
.about-grid__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 1;
}
.about-grid__overlay > * { width: 100%; height: 100%; }
.about-grid__overlay img,
.about-grid__overlay .placeholder {
  width: 100%;
  height: 100%;
  min-height: 480px;
  object-fit: cover;
  display: block;
}
.about-grid__caption {
  position: absolute;
  z-index: 3;
  left: 16px;
  bottom: 16px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.94);
  border: 1px solid var(--hair);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Small intro text block above the keyfacts/stats */
.about-intro {
  margin: 80px 0 0;
  padding: 56px 0 0;
  border-top: 1px solid var(--hair);
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  align-items: start;
}
.about-intro__kicker {
  font-size: 12px;
  letter-spacing: 0.1em;

  color: var(--red);
  font-weight: 600;
  padding-top: 6px;
}
.about-intro__title {
  font-family: "Inter", sans-serif;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 700;
  margin: 0;
  max-width: 720px;
}
.about-intro__body {
  grid-column: 2;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 14px 0 0;
  max-width: 680px;
}
.about-grid__pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-content: start;
}
.pillar {
  padding: 22px;
  border: 1px solid var(--hair);
  border-radius: 16px;
  background: #fff;
  transition: border-color .15s, transform .15s;
  cursor: pointer;
  outline: none;
}
.pillar:hover,
.pillar:focus-visible,
.pillar.is-active { border-color: var(--ink); transform: translateY(-2px); }
.pillar__num {
  font-family: "Inter", sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: var(--red);
}
.pillar__head { font-size: 16px; font-weight: 700; margin: 0 0 6px; color: var(--red); }
.pillar__body { font-size: 13.5px; color: var(--muted); line-height: 1.5; margin: 0; }

.focus-row {
  display: flex; align-items: end; justify-content: space-between;
  margin-bottom: 28px;
  gap: 24px;
}
.focus-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 24px;
}
.focus {
  cursor: pointer;
  display: flex; flex-direction: column; gap: 12px;
}
.focus__media {
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--hair);
  background: var(--paper-2);
  position: relative;
  transition: transform .25s;
}
.focus:hover .focus__media { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.focus--big { grid-row: span 2; }
/* Let the media grow to fill the 2-row span minus the title row, so the big
   card's bottom edge lines up with the bottom row of small cards. */
.focus--big .focus__media { aspect-ratio: auto; flex: 1 1 0; min-height: 0; }
.focus__media:not(:has(.focus--big)) { }
.focus--sm .focus__media { aspect-ratio: 4/3; }
.focus__num {
  position: absolute; top: 16px; left: 16px;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 14px;
  background: rgba(255,255,255,0.92);
  border-radius: 999px;
  padding: 4px 12px;
}
.focus__title {
  font-size: 17px; font-weight: 700; margin: 0; line-height: 1.25;
  /* Long titles: clamp to 1 line on desktop (2 on mobile, see mobile.css)
     and end with "…". Hover (or press-and-hold on touch) reveals the rest. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.focus__title:hover,
.focus__title:active { -webkit-line-clamp: 99; }
.focus__row > div:first-child { min-width: 0; } /* allow the text column to shrink so the clamp can kick in */
.focus__meta { font-size: 13px; color: var(--muted); }
.focus__row { display: flex; justify-content: space-between; align-items: start; gap: 16px; }



.catalog {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 28px;
  align-items: start;
}

@media (max-width: 1100px) {
  .catalog { grid-template-columns: 1fr; }
}

.results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 20px;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-card);
  background: var(--paper-2);
  overflow: hidden;
  border: 1px solid var(--hair);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover .card__media {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.card__media svg {
  width: 100%; height: 100%;
  display: block;
}
.card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255,255,255,0.92);
  border-radius: var(--r-pill);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.card__badge .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--red);
}
.card__fav {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  border: none;
  display: grid;
  place-items: center;
  transition: transform .15s, background .15s;
}
.card__fav:hover { transform: scale(1.05); }
.card__fav.on { background: var(--red); color: #fff; }

.card__title-row {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
}
.card__title {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}
.card__meta {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
}
.card__year {
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tag {
  font-size: 11.25px;
  background: var(--paper-2);
  padding: 4px 10px;
  border-radius: 6px;
  color: var(--ink);
}
.tag--red { background: var(--red-soft); color: var(--red-deep); }

/* ───── Map ───── */

.map {
  position: sticky;
  top: calc(var(--header-h) + 52px + 16px);
  height: calc(100vh - var(--header-h) - 52px - 32px);
  min-height: 640px;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--sea);
  border: 1px solid var(--hair);
}
.map__svg {
  width: 100%;
  height: 100%;
  display: block;
}
.map__svg .land {
  fill: var(--land);
  stroke: var(--land-stroke);
  stroke-width: 0.6;
  transition: fill .2s;
}
.map__svg .land.active { fill: #d4d4d4; }

.map__controls {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 5;
}
.map__ctrl {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--hair);
  display: grid;
  place-items: center;
  transition: background .15s;
}
.map__ctrl:hover { background: var(--paper-2); }
.map__zoom {
  width: 40px;
  height: 82px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--hair);
  display: grid;
  grid-template-rows: 1fr 1px 1fr;
  align-items: stretch;
}
.map__zoom button {
  border: none;
  background: transparent;
  display: grid;
  place-items: center;
  font-size: 18px;
}
.map__zoom button:hover { background: var(--paper-2); }
.map__zoom .sep { background: var(--hair); }

.map__legend {
  position: absolute;
  left: 16px;
  bottom: 16px;
  background: rgba(255,255,255,0.94);
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 11.5px;
  display: flex;
  gap: 14px;
  align-items: center;
  z-index: 5;
}
.map__legend .li {
  display: inline-flex; align-items: center; gap: 6px;
}
.map__legend .pin {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 2px #fff;
}
.map__legend .pin.cluster { background: var(--ink); }

.pin {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 4;
}
.pin__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--red);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  transition: transform .15s;
}
.pin:hover .pin__dot { transform: scale(1.25); }
.pin.active .pin__dot {
  background: #fff;
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(254,0,0,0.18), 0 1px 4px rgba(0,0,0,0.3);
}
.pin.cluster .pin__dot {
  width: 38px;
  height: 38px;
  background: var(--red);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 13.5px;
  font-weight: 700;
  border: 2.6px solid #fff;
}

.tooltip {
  position: absolute;
  transform: translate(-50%, calc(-100% - 16px));
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 10px;
  width: 220px;
  box-shadow: var(--shadow-md);
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s, transform .15s;
}
.tooltip.show { opacity: 1; transform: translate(-50%, calc(-100% - 22px)); pointer-events: auto; }
.tooltip__media {
  height: 96px;
  background: var(--paper-2);
  border-radius: 10px;
  margin-bottom: 8px;
  overflow: hidden;
}
.tooltip__title { font-size: 12.5px; font-weight: 700; line-height: 1.3; margin-bottom: 2px; }
.tooltip__meta { font-size: 11px; color: var(--muted); }

/* ───── Filter drawer ───── */

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.32);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.drawer-backdrop.show { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 420px;
  max-width: 100vw;
  background: #fff;
  z-index: 100;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
  display: flex;
  flex-direction: column;
  /* Schatten nur im offenen Zustand: geschlossen ragte er als grauer Streifen
     in den rechten Bildrand (05.10.) */
  box-shadow: none;
}
.drawer.show { transform: translateX(0); box-shadow: var(--shadow-lg); }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px;
  border-bottom: 1px solid var(--hair);
}
.drawer__title { font-size: 18px; font-weight: 700; margin: 0; }
.drawer__body { padding: 24px; overflow: auto; flex: 1; }
.drawer__foot {
  padding: 18px 24px;
  border-top: 1px solid var(--hair);
  display: flex;
  gap: 12px;
}

.filter-group { margin-bottom: 24px; }
.filter-group h4 {
  font-size: 12px;

  letter-spacing: 0.08em;
  margin: 0 0 10px;
  color: var(--muted);
  font-weight: 600;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 7px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hair);
  background: #fff;
  font-size: 13px;
  cursor: pointer;
  transition: all .15s;
}
.chip:hover { border-color: var(--hair); background: var(--paper-2); }
.chip[aria-pressed="true"] {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.range {
  display: grid;
  grid-template-columns: 1fr 12px 1fr;
  gap: 8px;
  align-items: center;
}
.range input {
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--hair);
  background: #fff;
  padding: 0 12px;
  font: inherit;
  font-size: 13px;
  width: 100%;
}
.range span { text-align: center; color: var(--muted); }

/* ───── Detail overlay ───── */

.detail-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 110;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.detail-backdrop.show { opacity: 1; pointer-events: auto; }
.detail {
  position: fixed;
  top: 50%; left: 50%;
  width: min(720px, 92vw);
  max-height: min(640px, 88vh);
  transform: translate(-50%, -50%) scale(0.96);
  background: #fff;
  border-radius: 22px;
  z-index: 120;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  opacity: 0;
  pointer-events: none;
  transition: transform .25s, opacity .25s;
  box-shadow: var(--shadow-lg);
}
@media (max-width: 700px) {
  .detail {
    width: 94vw; max-height: 88vh;
    grid-template-columns: 1fr;
    grid-template-rows: 220px 1fr;
  }
}
.detail.show {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}
.detail__body { padding: 28px 28px 24px; }
.detail h2 { font-size: 26px !important; margin: 0 0 4px !important; }
.detail__lead { font-size: 14.5px !important; margin-bottom: 20px !important; }
.detail__facts { grid-template-columns: 1fr 1fr !important; gap: 12px 18px !important; margin-bottom: 20px !important; }
.detail__facts--single { grid-template-columns: 1fr !important; }

/* Artist line: bolder so it sits between title and lead. Always shown. */
.detail__artists {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.5;
  margin: 6px 0 14px;
  text-wrap: pretty;
}
.detail__artists--placeholder { color: var(--muted-2); font-weight: 500; font-style: italic; }

/* Description — clamped to 4 lines by default; toggle expands. */
.detail__lead {
  font-size: 14.5px !important;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 4px !important;
  overflow: hidden;
  text-wrap: pretty;
}
.detail__lead.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
.detail__more {
  display: inline-block;
  background: none;
  border: 0;
  padding: 4px 0 16px;
  font: inherit;
  font-size: 13.5px;
  color: var(--red);
  font-weight: 600;
  cursor: pointer;
}
.detail__more:hover { text-decoration: underline; text-underline-offset: 3px; }
.detail__cta-row { display: flex; gap: 10px; flex-wrap: wrap; }
.detail__media {
  background: var(--paper-2);
  position: relative;
}
.detail__media svg { width: 100%; height: 100%; }
.detail__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--hair);
  display: grid; place-items: center;
  z-index: 5;
}
.detail__body {
  padding: 40px;
  overflow: auto;
}
.detail__year {
  font-size: 12px;
  letter-spacing: 0.1em;

  color: var(--red);
  font-weight: 600;
  margin-bottom: 24px;
}
.detail h2 {
  font-size: 32px;
  line-height: 1.1;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.detail__artist {
  color: var(--muted);
  font-size: 15px;
  margin-bottom: 24px;
}
.detail__lead {
  font-size: 16px;
  line-height: 1.55;
  margin-bottom: 28px;
}
.detail__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  border-top: 1px solid var(--hair);
  padding-top: 22px;
  margin-bottom: 24px;
}
.detail__facts dt {
  font-size: 11px;

  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 4px;
}
.detail__facts dd { margin: 0; font-size: 14px; font-weight: 500; }

/* ───── Map fullscreen ───── */

.fullmap {
  position: fixed;
  inset: 0;
  background: var(--sea);
  z-index: 130;
  display: none;
}
.fullmap.show { display: block; }
.fullmap__head {
  position: absolute;
  top: 24px; left: 24px; right: 24px;
  display: flex; justify-content: space-between; gap: 16px;
  z-index: 5;
}
.fullmap__panel {
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 24px;
  width: 360px;
  background: #fff;
  border-radius: var(--r-card);
  border: 1px solid var(--hair);
  padding: 24px;
  overflow: auto;
  z-index: 5;
  box-shadow: var(--shadow-md);
}
.fullmap__map {
  position: absolute;
  top: 24px; right: 24px; bottom: 24px;
  left: 412px;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--sea);
  border: 1px solid var(--hair);
}
.fullmap .map__controls { top: 16px; right: 16px; }
.fullmap__close {
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 999px;
  height: 44px;
  padding: 0 18px;
  display: inline-flex; align-items: center; gap: 10px;
  font: inherit; font-size: 14px; font-weight: 500;
}

.heatmap__bar {
  height: 6px; border-radius: 999px;
  background: var(--paper-2);
  overflow: hidden;
}
.heatmap__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--red-soft), var(--red));
  transition: width .4s;
}

/* ───── About page ───── */

.about__hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  padding: 40px 0 80px;
  align-items: center;
  border-bottom: 1px solid var(--hair);
}
.about__kicker {
  font-size: 12px;
  letter-spacing: 0.1em;

  color: var(--red);
  font-weight: 600;
  margin-bottom: 16px;
}
.about__title {
  font-family: "Mukta Mahee", "Inter", sans-serif;
  font-size: 64px;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}
.about__title em { font-style: normal; color: var(--red); }
.about__lead {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 540px;
}
.about__hero-img {
  aspect-ratio: 4/5;
  border-radius: var(--r-card);
  background: var(--paper-2);
  border: 1px solid var(--hair);
  overflow: hidden;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding: 60px 0;
  border-bottom: 1px solid var(--hair);
}
.stat__num {
  font-family: "Mukta Mahee", sans-serif;
  font-size: 64px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat__num em { font-style: normal; color: var(--red); }
.stat__label {
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
  max-width: 220px;
  line-height: 1.4;
}

/* ───── Milestone moments (About page photo strip) ───── */
.moments {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 8px;
}
.moment { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.moment__media {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--hair);
  aspect-ratio: 4 / 3;
  background: var(--paper-2);
}
.moment__media img,
.moment__media svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.moment__year {
  position: absolute; left: 16px; top: 16px;
  background: rgba(0,0,0,0.78); color: #fff;
  padding: 6px 12px; border-radius: 999px;
  font-family: "Mukta Mahee", sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
}
.moment__caption {
  display: flex; flex-direction: column; gap: 4px;
  padding-left: 4px;
}
.moment__kind {
  font-size: 11px; letter-spacing: 0.12em;
  color: var(--red); font-weight: 700;
}
.moment__text { font-size: 14px; line-height: 1.5; color: var(--ink); }
@media (max-width: 980px) {
  .moments { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .moments { grid-template-columns: 1fr; }
}

/* ───── Stats card (Keyfacts) ───── */
.stats-card {
  margin-top: 56px;
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  background: var(--paper-3);
  overflow: hidden;
  position: relative;
}
.stats-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding: 28px 32px 24px;
  border-bottom: 1px solid var(--hair);
  background: #fff;
}
.stats-card__kicker {
  font-size: 12px;
  letter-spacing: 0.1em;

  color: var(--red);
  font-weight: 700;
  margin-bottom: 6px;
}
.stats-card__sub {
  font-size: 13.5px;
  color: var(--muted);
  letter-spacing: -0.005em;
}
.stats-card__link { white-space: nowrap; }
.stats-card__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.kf {
  padding: 40px 32px 36px;
  border-right: 1px solid var(--hair);
  display: flex;
  flex-direction: column;
  gap: 8px;
  background:
    radial-gradient(160px 80px at 100% 0%, rgba(254,0,0,0.04), transparent 70%);
}
.kf:last-child { border-right: none; }
.kf__num {
  font-family: "Mukta Mahee", var(--sf);
  font-size: 76px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  color: var(--ink);
}
.kf__num em { font-style: normal; color: inherit; }
.kf__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-top: 4px;
}
.kf__sub {
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: 0.005em;
}
.stats-card__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  border-top: 1px solid var(--hair);
  background: #fff;
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.stats-card__pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 0 rgba(254,0,0,0.6);
  animation: kfPulse 1.8s ease-out infinite;
  flex: none;
}
@keyframes kfPulse {
  0%   { box-shadow: 0 0 0 0 rgba(254,0,0,0.45); }
  70%  { box-shadow: 0 0 0 10px rgba(254,0,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(254,0,0,0); }
}
@media (max-width: 980px) {
  .stats-card__head { flex-direction: column; align-items: flex-start; }
  .stats-card__grid { grid-template-columns: repeat(2, 1fr); }
  .kf:nth-child(2) { border-right: none; }
  .kf:nth-child(1), .kf:nth-child(2) { border-bottom: 1px solid var(--hair); }
  .kf__num { font-size: 52px; }
}

/* ───── Editorial "in figures" section (replaces the boxed stat cards) ───── */
.figs { margin-top: 64px; }
.figs__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--hair);
}
.figs__kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;

  color: var(--red);
  margin-bottom: 12px;
}
.figs__title {
  font-family: var(--sf);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  max-width: 16ch;
}
.figs__note { font-size: 12.5px; color: var(--muted); margin: 0; max-width: 30ch; text-align: right; }

.figs__circles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 46px;
}
.figc {
  width: 100%;
  max-width: 250px;
  justify-self: center;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.figc:hover { transform: translateY(-5px); }
.figc__num {
  font-family: "Mukta Mahee", var(--sf);
  font-size: clamp(42px, 4.4vw, 62px);
  font-weight: 500;
  line-height: 0.95;
  white-space: nowrap;
  transform: translateY(20px);
}
.figc__label {
  margin-top: 13px;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0.01em;
  transform: translateY(20px);
}
.figc__label span { display: block; }
.figc__label span + span { opacity: 0.84; }

@media (max-width: 760px) {
  .figs__head { flex-direction: column; align-items: flex-start; }
  .figs__note { text-align: left; }
  .figs__circles { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .figc { padding: 16px; }
}

.section {
  padding: 80px 0;
  border-bottom: 1px solid var(--hair);
}
.section__head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 60px;
  margin-bottom: 40px;
}
.section__title {
  font-family: "Mukta Mahee", sans-serif;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
}
.section__lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
}

.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--hair);
}
.timeline__item {
  padding: 32px 24px 24px 24px;
  border-right: 1px solid var(--hair);
  position: relative;
}
.timeline__item:first-child { padding-left: 0; }
.timeline__item:last-child { border-right: 0; }
.timeline__year {
  font-family: "Mukta Mahee", sans-serif;
  font-size: 32px;
  margin-top: 4px;
  margin-bottom: 4px;
  font-weight: 800;
  color: var(--red);
}
.timeline__head {
  font-size: 15px;
  font-weight: 600;
  margin: 6px 0 8px;
}
.timeline__body { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.timeline__item::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 24px; height: 3px;
  background: var(--red);
}

.team {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.team__card {
  display: flex; flex-direction: column; gap: 12px;
}
.team__photo {
  aspect-ratio: 4/5;
  border-radius: 14px;
  background: var(--paper-2);
  overflow: hidden;
  border: 1px solid var(--hair);
}
.team__name { font-size: 15px; font-weight: 700; margin: 0; }
.team__role { font-size: 12.5px; color: var(--muted); margin: 0; }

/* ───── Cases page ───── */

.cases-hero {
  padding: 40px 0 60px;
  border-bottom: 1px solid var(--hair);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
}
.case-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 24px 0;
  border-bottom: 1px solid var(--hair);
}

.case-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 28px 24px;
  padding: 36px 0;
}
.case {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.case--xl { grid-column: span 8; }
.case--lg { grid-column: span 6; }
.case--md { grid-column: span 4; }
.case--sm { grid-column: span 4; }
.case__media {
  border-radius: var(--r-card);
  background: var(--paper-2);
  border: 1px solid var(--hair);
  overflow: hidden;
  position: relative;
  transition: transform .25s ease;
}
.case--xl .case__media { aspect-ratio: 16/9; }
.case--lg .case__media { aspect-ratio: 4/3; }
.case--md .case__media { aspect-ratio: 1/1; }
.case--sm .case__media { aspect-ratio: 4/5; }
.case:hover .case__media { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.case__media svg { width: 100%; height: 100%; display: block; }
.case__num {
  position: absolute;
  top: 16px; left: 16px;
  font-family: "Mukta Mahee", sans-serif;
  font-size: 13px;
  font-weight: 700;
  background: rgba(255,255,255,0.92);
  border-radius: 999px;
  padding: 4px 10px;
}
.case__title { font-size: 18px; font-weight: 700; margin: 0; line-height: 1.25; }
.case__meta { font-size: 13px; color: var(--muted); }
.case__row {
  display: flex; justify-content: space-between; align-items: start;
  gap: 16px;
}

/* ───── Placeholders for art imagery ───── */

.placeholder {
  width: 100%; height: 100%;
  display: block;
}

/* ───── Footer ───── */

/* ───── Footer — Liquid-Glass-Karte (Mock: uploads/Footer-SfKuK.png) ───── */
/* Glas wie die Navbar; vorbereitet, damit später Sticker hinter der Karte
   durchscheinen. Karte nimmt fast die volle Breite ein (36-px-Ränder). */
.footer {
  background: transparent;
  color: var(--ink);
  padding: clamp(56px, 7vw, 96px) 36px 36px;
  margin-top: 0;
}
.footer__card {
  position: relative;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 14px 44px rgba(10, 10, 10, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  padding: clamp(44px, 5.5vw, 80px) clamp(26px, 5vw, 88px) 34px;
}
.footer__word {
  font-family: "Inter", sans-serif;
  /* 10 % kleiner, 48 px höher, dann 6 px zurück (Inline-Feedback 07/2026) */
  font-size: clamp(38px, 4.7vw, 74px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--red);
  margin: -42px 0 clamp(44px, 6vw, 84px);
}
.footer__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px; /* −15 % (Inline-Feedback 07/2026) */
  padding-bottom: clamp(40px, 5vw, 64px);
  border-bottom: 1px solid rgba(10, 10, 10, 0.16);
}
.footer h3 {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 18px;
  letter-spacing: 0;
}
.footer__grid p {
  margin: 0;
  font-size: 12px;
  line-height: 1.68;
  color: rgba(10, 10, 10, 0.66);
}
.footer__grid a { color: inherit; text-decoration: none; transition: color .15s ease; }
.footer__grid a:hover { color: var(--red); }
@media (max-width: 820px) {
  .footer { padding: 48px 16px 16px; }
  .footer__card { border-radius: 24px; }
  .footer__word { margin-top: -20px; } /* auf Schmal weniger hochziehen — Karten-Padding ist kleiner */
  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
}
.footer__bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 26px;
  font-size: 12px;
  color: var(--ink);
}
.footer__legal { display: flex; gap: clamp(28px, 5vw, 64px); font-weight: 600; }
.footer__legal a { color: inherit; text-decoration: none; }
.footer__legal a:hover { color: var(--red); }
@media (max-width: 640px) {
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* favourite heart */
.heart-on { fill: #fff; stroke: #fff; }

/* ───── Brand logo (full lockup SVG) ───── */
.brand__logo { display: block; }
.brand__logo--light { filter: invert(1) brightness(2); }

/* ───── Atlas (Leaflet) map ───── */
.atlas-map {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--sea);
  border: 1px solid var(--hair);
  /* Establish own stacking context so Leaflet's high-z panes can't escape
     above the page header. */
  z-index: 0;
  isolation: isolate;
}
.atlas-map__canvas { position: absolute; inset: 0; }
.atlas-map .leaflet-container { background: #CAE8F2; font-family: inherit; }
/* Lift saturation/contrast on the basemap tiles for a livelier look. */
.atlas-map .leaflet-tile-pane { filter: saturate(1.25) contrast(1.04); }
.atlas-map .leaflet-control-attribution {
  background: rgba(255,255,255,0.7);
  font-size: 10px;
  padding: 2px 6px;
}

/* Floating control stack: expand → filter → zoom */
.atlas-map__controls {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 500;
}
/* When the map is fullscreen, the sticky header floats above it.
   Push the controls down past the header so they are not covered.
   Keep z-index high so Leaflet's marker/popup panes (z:600) don't cover them. */
.atlas-map--expanded .atlas-map__controls {
  top: calc(var(--header-h) + 16px);
  z-index: 1000;
}
.atlas-map--expanded .atlas-filter-card {
  top: calc(var(--header-h) + 16px);
  z-index: 1100;
}
.atlas-map__controls .map__ctrl {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--hair);
  display: grid; place-items: center;
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.atlas-map__controls .map__ctrl:hover { background: var(--paper-2); }
.atlas-map__controls .map__ctrl.is-active { background: var(--red); color: #fff; border-color: var(--red); }
.atlas-map__controls .map__zoom {
  width: 40px;
  height: 82px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--hair);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.atlas-map__controls .map__zoom button {
  flex: 1; border: none; background: transparent;
  font-size: 18px; cursor: pointer; color: var(--ink);
}
.atlas-map__controls .map__zoom button:hover { background: var(--paper-2); }
.atlas-map__controls .map__zoom .sep { height: 1px; background: var(--hair); }

/* Filter card (appears next to the slider button) */
.atlas-filter-card {
  position: absolute;
  width: 360px;
  top: 16px;
  right: 64px;
  width: 280px;
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  padding: 14px 16px;
  z-index: 600;
  font-size: 13px;
}
.atlas-filter-card__head {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 600;
  margin-bottom: 10px;
}
.atlas-filter-card__x {
  background: transparent; border: none; cursor: pointer;
  width: 24px; height: 24px; display: grid; place-items: center;
  color: var(--muted);
}
.atlas-filter-card__group { margin-top: 10px; }
.atlas-filter-card__group h5 {
  font-size: 11px;

  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 8px;
  font-weight: 600;
  display: flex; justify-content: space-between;
}
.atlas-filter-card__group h5 .muted { color: var(--ink); font-weight: 600; text-transform: none; letter-spacing: 0; }
.atlas-filter-card__group .chips { display: flex; gap: 6px; flex-wrap: nowrap; }
.atlas-filter-card__group .chip { white-space: nowrap; }
.atlas-filter-card__group .chip {
  background: #fff;
  border: 1px solid var(--hair);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-size: 12px;
  cursor: pointer;
  color: var(--ink);
}
.atlas-filter-card__group .chip[aria-pressed="true"] {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.atlas-range {
  position: relative;
  height: 26px;
  margin-top: 6px;
}
.atlas-range__track {
  position: absolute; left: 0; right: 0; top: 11px;
  height: 4px; border-radius: 999px;
  background: var(--hair);
}
.atlas-range__fill {
  position: absolute; top: 11px; height: 4px;
  background: var(--red); border-radius: 999px;
}
.atlas-range input[type="range"] {
  position: absolute; left: 0; right: 0; top: 5px;
  width: 100%; height: 16px;
  background: transparent;
  -webkit-appearance: none;
  pointer-events: none;
  margin: 0;
}
.atlas-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--red); border: 2px solid #fff;
  pointer-events: auto;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.atlas-range input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--red); border: 2px solid #fff;
  pointer-events: auto;
}
.atlas-range__labels {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--muted); margin-top: 2px;
}

/* Atlas pin (Leaflet divIcon) */
.atlas-pin-wrap { background: transparent !important; border: none !important; }
.atlas-pin {
  position: relative;
  width: 56px; height: 70px;
  pointer-events: auto;
  cursor: pointer;
  transform-origin: 50% 100%;
  transition: transform .15s;
}
.atlas-pin:hover { transform: translateY(-3px) scale(1.04); }
.atlas-pin__img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}
.atlas-pin svg { width: 100%; height: 100%; display: block; }
.atlas-pin__badge {
  position: absolute;
  top: -4px; right: -6px;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  background: var(--red);
  color: #fff;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  display: grid; place-items: center;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

/* Expanded full-screen overlay state — sits BEHIND the header so the
   sticky header floats with its blurred translucency over the map. */
.atlas-map--expanded {
  position: fixed;
  top: calc(var(--header-h) + 16px);
  right: 16px;
  bottom: 16px;
  left: 16px;
  width: auto;
  height: auto;
  border-radius: var(--r-card);
  border: 1px solid var(--hair);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  z-index: 40;
}
/* Blurred backdrop behind the rounded card — covers the whole viewport
   below the header so the page content (red headline, etc.) doesn't bleed
   through the 16 px gutter. The header itself sits above this overlay. */
.atlas-map--expanded::before {
  content: "";
  position: fixed;
  top: var(--header-h);
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  z-index: -1;
  pointer-events: none;
}
/* Controls sit inside the rounded card, not flush to the viewport. */
.atlas-map--expanded .atlas-map__controls { top: 16px; right: 16px; z-index: 1000; }
.atlas-map--expanded .atlas-filter-card { top: 16px; z-index: 1100; }


/* ───── Main nav (replaces in-header search) ───── */
.app-header__row {
  grid-template-columns: auto 1fr auto;
}
.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  justify-self: center;
}
.nav-link {
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
  padding: 8px 2px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .15s ease;
}
.nav-link:hover { color: var(--red); }
.nav-link.is-active { color: var(--red); }
.nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 2px;
  background: var(--red);
  border-radius: 2px;
}
.nav-link__ext { opacity: 0.65; }
.header__cta {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
  font-weight: 600;
  height: 44px;
  padding: 0 20px;
  font-size: 14px;
  letter-spacing: 0.01em;
}
.header__cta:hover { background: var(--red-deep); border-color: var(--red-deep); }

/* ───── Projekte page ───── */
.projects-hero {
  padding: 40px 0 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  /* Lead vertikal mittig zur Headline (Feedback 07/2026, vorher: end) */
  align-items: center;
  border-bottom: 1px solid var(--hair);
}
.projects-map {
  height: 560px;
  width: 100%;
  margin-top: 28px;
}
.projects-map .atlas-map {
  border: 1px solid var(--hair);
}
.projects-filterbar {
  margin-top: 28px;
  display: grid;
  gap: 16px;
}
.projects-search { max-width: 100%; }
.projects-filterbar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  padding-bottom: 16px;
}
.projects-filterbar__group {
  display: flex;
  align-items: center;
  gap: 12px;
}
.projects-filterbar__label {
  font-size: 12px;

  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 600;
}
.projects-select {
  height: 36px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hair);
  background: var(--paper);
  padding: 0 28px 0 14px;
  font-size: 13.5px;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23111' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1.5 L6 6.5 L11 1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.projects-filterbar__count {
  margin-left: auto;
  font-size: 13px;
  color: var(--muted);
}
.projects-grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 24px;
  padding-bottom: 60px;
}
.project-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  transition: transform .25s ease;
}
.project-card:hover { transform: translateY(-3px); }
.project-card__media {
  position: relative;
  border-radius: var(--r-card);
  background: var(--paper-2);
  overflow: hidden;
  aspect-ratio: 4/3;
  border: 1px solid var(--hair);
}
.project-card__media svg { width: 100%; height: 100%; display: block; }
.project-card__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}
.project-card__title {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
  line-height: 1.25;
}
.project-card__meta {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}
.project-card__cat {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;

  color: var(--muted);
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  padding: 4px 10px;
  white-space: nowrap;
  flex: none;
}
.projects-empty {
  grid-column: 1 / -1;
  padding: 60px 0;
  text-align: center;
  color: var(--muted);
  display: grid;
  gap: 16px;
  justify-content: center;
}

/* ───── News highlights (landing) ───── */
.news-highlights .nh-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 40px;
}
.nh-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.nh-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--hair);
  background: var(--paper-2);
  transition: transform .25s ease, box-shadow .25s ease;
}
.nh-card:hover .nh-card__media {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.nh-card__media svg { width: 100%; height: 100%; display: block; }
.nh-card__kind {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.nh-card__body { display: flex; flex-direction: column; gap: 8px; }
.nh-card__date {
  font-size: 12.5px;
  letter-spacing: 0.04em;

  color: var(--muted);
  font-weight: 600;
}
.nh-card__title {
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 2px 0 0;
}
.nh-card__lead {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}
.nh-card__cta { align-self: flex-start; margin-top: 6px; }

/* ── Weiter entdecken — Abschluss der Landingpage ── */
.discover { padding: clamp(72px, 8vw, 110px) clamp(28px, 3.5vw, 64px) 0; }
.discover__inner { max-width: 1280px; margin: 0 auto; }
.discover__kick {
  display: flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 600; letter-spacing: 0.02em; color: var(--red);
}
.discover__kick::before {
  content: ""; width: 11.9px; height: 11.9px; border-radius: 50%;
  background: var(--red); flex: none;
}
.discover__title {
  font-family: "Inter", sans-serif;
  font-size: clamp(24px, 2.1vw, 34px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin: 14px 0 36px;
}
.discover__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.discover-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--hair); border-radius: var(--r-card);
  overflow: hidden; background: #fff;
  padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.discover-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(10, 10, 10, 0.10); }
.discover-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-2); }
.discover-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.discover-card__body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 8px; }
.discover-card__label { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--muted); }
.discover-card__title { font-size: clamp(19px, 1.6vw, 24px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin: 0; }
.discover-card__sub { font-size: 15.5px; line-height: 1.5; color: var(--ink-2); margin: 0; }
.discover-card__cta { margin-top: 10px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
@media (max-width: 760px) {
  .discover { padding: 56px 22px 0; }
  .discover__grid { grid-template-columns: 1fr; }
}

/* ───── Newsletter CTA ───── */
.newsletter-cta {
  margin: 72px auto 0;
  /* Home: bündig mit den „Weiter entdecken“-Karten (max 1280 + gleiche Seitenränder) */
  max-width: 1280px;
  width: calc(100% - 2 * clamp(28px, 3.5vw, 64px));
  padding: 56px;
  border-radius: var(--r-card);
  background: var(--ink);
  color: #fff;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.newsletter-cta::before {
  content: "";
  position: absolute;
  inset: -2px;
  background:
    radial-gradient(600px 280px at 100% 0%, rgba(254,0,0,0.18), transparent 70%),
    radial-gradient(500px 260px at 0% 100%, rgba(255,255,255,0.06), transparent 70%);
  pointer-events: none;
}
.newsletter-cta > * { position: relative; }
/* Auf Unterseiten (in .page): bündig mit den Sektions-Trennlinien */
.page .newsletter-cta { width: 100%; max-width: none; margin-left: 0; margin-right: 0; }
.newsletter-cta__kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  letter-spacing: 0.02em;
  color: var(--red);
  font-weight: 600;
  margin-bottom: 14px;
}
.newsletter-cta__kicker::before {
  content: "";
  width: 11.9px; height: 11.9px;
  border-radius: 50%;
  background: var(--red);
  flex: none;
}
.newsletter-cta__title {
  font-family: "Inter", sans-serif;
  font-size: clamp(24px, 2.1vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 500;
  margin: 0 0 12px;
  color: #fff;
}
.newsletter-cta__sub {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,0.65);
  margin: 0;
  max-width: 460px;
}
.newsletter-cta__form {
  display: flex;
  gap: 10px;
  align-items: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  padding: 6px 6px 6px 22px;
}
.newsletter-cta__input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font: inherit;
  font-size: 15px;
  height: 48px;
}
.newsletter-cta__input::placeholder { color: rgba(255,255,255,0.45); }
.newsletter-cta__btn {
  height: 48px;
  padding: 0 22px;
  flex: none;
  border-radius: 999px;
}
.newsletter-cta__sent {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
}
.newsletter-cta__sent strong { display: block; color: #fff; margin-bottom: 2px; }
.newsletter-cta__sent span { color: rgba(255,255,255,0.7); }
.newsletter-cta__sent-tick {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  display: grid;
  place-items: center;
  flex: none;
  font-weight: 700;
}

@media (max-width: 980px) {
  .news-highlights .nh-grid { grid-template-columns: 1fr; }
  .newsletter-cta { grid-template-columns: 1fr; padding: 36px; }
  .about-intro { grid-template-columns: 1fr; gap: 12px; }
  .about-intro__body { grid-column: 1; }
}

/* ───── News page ───── */
.news-filterbar {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 8px;
}
.news-search { max-width: 560px; }
/* News: Hero ohne Trennstrich — die einzige Linie liegt zwischen Suchzeile
   und Liste; Suche flext in der Button-Zeile (Umbau 07/2026). */
.news-hero { border-bottom: none; padding-bottom: 4px; }
.projects-toolbar__row .news-search { flex: 1 1 300px; }
.news-filterbar__row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; animation: projFilterIn .25s ease both; }
.news-filterbar__group { display: flex; align-items: center; gap: 10px; }
.news-filterbar__label { font-size: 12px; letter-spacing: 0.08em; color: var(--muted); font-weight: 600; }
.news-filterbar__count { font-size: 13px; color: var(--muted); margin-left: auto; }

.news-list {
  margin-top: 28px;
  display: grid;
  gap: 0;
  padding-bottom: 60px;
}
.news-item {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 36px;
  padding: 32px 0;
  border-bottom: 1px solid var(--hair);
  align-items: center;
}
.news-item:first-child { border-top: 1px solid var(--hair); }
.news-item__media {
  position: relative; /* Anker für das absolut positionierte Foto (n.img) */
  border-radius: var(--r-thumb);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--paper-2);
  border: 1px solid var(--hair);
}
.news-item__media svg { width: 100%; height: 100%; display: block; }
.news-item__body { display: flex; flex-direction: column; gap: 10px; }
.news-item__meta {
  display: flex;
  gap: 8px;
  font-size: 14px; /* 12 → 14, Sperrung reduziert (07/2026) */

  letter-spacing: 0.02em;
  color: var(--muted);
  font-weight: 600;
}
.news-item__title { font-size: 26px; line-height: 1.2; margin: 4px 0 6px; font-weight: 700; }
.news-item__lead { font-size: 15px; line-height: 1.45; margin: 0; color: var(--ink); max-width: 600px; }
.news-item__cta { align-self: flex-start; margin-top: 10px; }


/* ───── Burger button + nav drawer ───── */
.burger-btn {
  position: relative;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--ink);
  border-radius: 999px;
  transition: background .15s ease;
  justify-self: end;
}
.burger-btn:hover { background: rgba(0,0,0,0.05); }
.burger-btn__dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 2px #fff;
}

.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,15,15,0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 95;
}
.nav-backdrop.show { opacity: 1; pointer-events: auto; }

.nav-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 420px;
  max-width: 92vw;
  background: #fff;
  z-index: 100;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
  box-shadow: var(--shadow-lg);
}
.nav-drawer.show { transform: translateX(0); }
.nav-drawer__head {
  display: flex;
  justify-content: flex-end;
  padding: 18px 24px;
}
.nav-drawer__nav {
  display: flex;
  flex-direction: column;
  padding: 8px 24px 24px;
  gap: 4px;
}
.nav-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  padding: 18px 4px;
  border-bottom: 1px solid var(--hair);
  transition: color .15s ease, padding .2s ease;
}
.nav-drawer__link:hover { color: var(--red); padding-left: 8px; }
.nav-drawer__link.is-active { color: var(--red); }
.nav-drawer__link svg { opacity: 0.55; }
.nav-drawer__ext { opacity: 0.55; }

/* Featured "Unser Museum" card with background image + pill */
.nav-drawer__feature {
  position: relative;
  display: block;
  margin: 18px 0 4px;
  height: 170px;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  background-image: url("assets/museum-kuppersmuhle.png");
  background-size: cover;
  background-position: center;
  isolation: isolate;
  transition: transform .2s ease, box-shadow .2s ease;
}
.nav-drawer__feature::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.18) 100%);
  pointer-events: none;
}
.nav-drawer__feature { transition: box-shadow .25s ease; }
.nav-drawer__feature:hover { box-shadow: var(--shadow-md); }
.nav-drawer__feature-pill {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  background: #111;
  color: #fff;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
}
.nav-drawer__feature:hover .nav-drawer__feature-pill {
  transform: translate(-50%, -54%) scale(1.04);
  box-shadow: 0 10px 28px rgba(0,0,0,0.32);
}
.nav-drawer__feature-arrow { color: #fff; opacity: 1; transition: transform .25s ease; }
.nav-drawer__feature:hover .nav-drawer__feature-arrow { transform: translate(2px, -2px); }
.nav-drawer__foot {
  margin-top: auto;
  padding: 24px;
  border-top: 1px solid var(--hair);
}
.nav-drawer__cta {
  width: 100%;
  height: 52px;
  border: none;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, filter .25s ease;
}
.nav-drawer__cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}
.nav-drawer__cta:hover svg { transform: translateX(3px); transition: transform .25s ease; }
.nav-drawer__cta:active { transform: translateY(0); transition: transform .08s ease; }

/* Hide the old top-row inline nav (now lives in drawer) */
.main-nav, .header__cta { display: none !important; }

/* ───── Search: autocomplete dropdown ───── */
.search { position: relative; }
.search-suggest {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 90;
  max-height: 420px;
  overflow-y: auto;
}
.search-suggest__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 6px;
  font-size: 11px;

  letter-spacing: 0.08em;
  color: var(--ink-mute, #777);
}
.search-suggest__clear {
  background: none;
  border: 0;
  font: inherit;
  color: var(--red, #fe0000);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}
.search-suggest__row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: 0;
  border-radius: 10px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}
.search-suggest__row:hover { background: var(--bg-soft, #f6f4ef); }
.search-suggest__row--recent { color: var(--ink-mute, #555); }
.search-suggest__dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}
.search-suggest__title {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-suggest__title mark.hl,
.hit-card mark.hl,
.search-page__title em {
  background: rgba(254, 0, 0, 0.14);
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
  font-style: normal;
}
.search-suggest__kind {
  font-size: 11px;

  letter-spacing: 0.08em;
  color: var(--ink-mute, #888);
}
.search-suggest__empty {
  padding: 16px 12px 8px;
  font-size: 14px;
  color: var(--ink-mute, #777);
}
.search-suggest__see-all {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  margin-top: 4px;
  border-top: 1px solid var(--hair);
  background: none;
  border-left: 0; border-right: 0; border-bottom: 0;
  font: inherit;
  font-weight: 600;
  color: var(--red, #fe0000);
  cursor: pointer;
  text-align: left;
}
.search-suggest__see-all svg { transition: transform .2s cubic-bezier(.2,.7,.2,1); }
.search-suggest__see-all:hover { background: var(--bg-soft, #f6f4ef); color: var(--red); padding-left: 18px; }
.search-suggest__see-all:hover svg { transform: translateX(4px); }

/* ───── Search results page ───── */
.search-page { padding: 32px 40px 80px; }
@media (min-width: 1280px) {
  .search-page { padding-left: 64px; padding-right: 64px; }
}
.search-page__head { padding: 24px 0 32px; max-width: 760px; }
.search-page__kicker {
  font-size: 11px;

  letter-spacing: 0.12em;
  color: var(--ink-mute, #888);
  margin-bottom: 12px;
}
.search-page__title {
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0 0 16px;
}
.search-page__sub { font-size: 16px; color: var(--ink-mute, #555); margin: 0; }
.search-page__map {
  height: 420px;
  border-radius: var(--r-card, 16px);
  overflow: hidden;
  border: 1px solid var(--hair);
  margin: 32px 0 48px;
  position: relative;
}
.search-page__map .atlas-map { height: 100%; }
.search-page__empty {
  padding: 60px 0;
  text-align: center;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.search-page__empty h3 { font-size: 24px; margin: 0 0 8px; }
.search-page__empty p  { color: var(--ink-mute, #666); margin: 0; }
.search-page__empty em { color: var(--ink); font-style: normal; font-weight: 600; }

.search-section { margin-top: 56px; }
.search-section__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid var(--hair);
  padding-bottom: 12px;
  margin-bottom: 24px;
}
.search-section__head h2 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}
.search-section__count {
  font-size: 13px;
  color: var(--ink-mute, #888);
}
.search-section__grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, 1fr);
}
.search-section__grid--news { grid-template-columns: repeat(2, 1fr); }

.hit-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: var(--r-thumb, 16px);
  overflow: hidden;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.hit-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: #d8d2c8; }
.hit-card__media { aspect-ratio: 4/3; background: #ece6dc; }
.hit-card__body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.hit-card__kicker {
  font-size: 11px;

  letter-spacing: 0.1em;
  color: var(--ink-mute, #888);
}
.hit-card h3 { font-size: 18px; line-height: 1.25; margin: 0; font-weight: 600; }
.hit-card__meta { font-size: 13px; color: var(--ink-mute, #555); }
.hit-card__lead { font-size: 13px; line-height: 1.45; color: var(--ink-mute, #555); margin: 6px 0 0; }
.hit-card--event, .hit-card--news { cursor: default; }
.hit-card--news { cursor: pointer; }
@media (max-width: 900px) {
  .search-section__grid, .search-section__grid--news { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════
   V3 — Liquid-glass video hero (Website-Draft) + relocated map section
   ════════════════════════════════════════════════════════════════════════ */

:root {
  --sf: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}
body { font-family: var(--sf); }
.vhero__wordmark, .hero__wordmark, .landing-section__title,
.about-intro__title, .about__title, .pd-hero__title,
.projects-hero h1, .hero__title { font-family: var(--sf); }

.vhero {
  position: relative;
  padding: 18px 0 0;
  background: #fff;
  --p: 0;
  --rubber: 0px;
  overflow-x: clip;
}

/* Horizontal track: video shrinks as the projects panel unfolds on the right.
   Driven by --p (0 → 1). Left whitespace compresses, gap + projects grow. */
.vhero__track {
  display: flex;
  align-items: stretch;
  gap: calc(var(--p) * 28px);
  padding-left: calc(210px - var(--p) * 56px);
  padding-right: calc(26px + var(--p) * 40px);
  transform: translateX(var(--rubber));
  will-change: transform;
}
.vhero__projects {
  position: relative;
  flex: 0 0 calc(var(--p) * 380px);
  height: min(90vh, 1000px);
  overflow: hidden;
  will-change: flex-basis;
}
.vhero__projects-inner {
  width: 380px;
  height: 100%;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  padding: 6px 0 6px;
  transform: translateX(calc((1 - var(--p)) * 34px));
}
.vhero__projects-head { flex: 0 0 auto; margin-bottom: 24px; }
.vhero__projects-kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;

  color: var(--red);
  margin-bottom: 10px;
}
.vhero__projects-title {
  font-family: var(--sf), "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0 0 10px;
  color: var(--ink);
}
.vhero__projects-lead {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
  max-width: 330px;
  text-wrap: pretty;
}
.vhero__plist {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.vproj {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.vproj__media {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  background:
    radial-gradient(120% 85% at 76% -5%, oklch(0.74 0.15 var(--h, 12)) 0%, transparent 56%),
    linear-gradient(155deg, oklch(0.52 0.15 var(--h, 12)) 0%, oklch(0.27 0.10 var(--h, 12)) 100%);
  transition: transform .25s, box-shadow .25s;
}
.vproj__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 60% at 30% 110%, rgba(255,255,255,0.14), transparent 60%),
    linear-gradient(165deg, rgba(0,0,0,0) 50%, rgba(10,6,4,0.34));
  pointer-events: none;
}
.vproj__num {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 12px;
  background: rgba(255,255,255,0.92);
  color: var(--ink);
  border-radius: 999px;
  padding: 3px 11px;
}
.vproj:hover .vproj__media { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.vproj__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.vproj__title { font-size: 15px; font-weight: 700; margin: 0; line-height: 1.25; color: var(--ink); letter-spacing: -0.01em; }
.vproj__meta { font-size: 12px; color: var(--muted); margin-top: 3px; }
.vproj__go {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--ink);
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.vproj__go svg { width: 16px; height: 16px; }
/* Red only when hovering the arrow icon itself, not the whole project card. */
.vproj__go:hover { background: var(--red); border-color: var(--red); color: #fff; }

/* Same behaviour for the "Projekte im Fokus" arrow buttons. */
.focus__row .btn--icon { transition: background .18s ease, border-color .18s ease, color .18s ease; }
.focus__row .btn--icon:hover { background: var(--red); border-color: var(--red); color: #fff; }

/* ── Burger "dot" — sits in the left margin beside the video ── */
.vhero__burger {
  position: absolute;
  top: 40px;
  /* Stay centred between the screen's left edge and the video, even as the
     video slides left when the projects unfold (stage left = 210 − p·56). */
  left: calc(78px - var(--p) * 28px);
  z-index: 6;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #0a0a0a;
  border: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: background .2s;
}
/* Decorative-only for now (menu subpages pending): plain black dot. */
.vhero__burger--dot { cursor: default; }
.vhero__burger--dot:hover { background: #0a0a0a; }
/* Language toggle living in the dot — current language in the old
   burger-stroke grey; tap switches de ⇄ en. */
.vhero__burger--lang { cursor: pointer; }
.vhero__burger--lang:hover { background: #1a1a1a; }
.vhero__burger--lang:active { transform: scale(0.92); }
.vhero__burger--lang { transition: background .2s, transform .15s ease; }
/* Neutralise the inherited burger-stroke styling (width/height/background
   made the label look like a white bar) and centre the code in the circle. */
.vhero__burger--lang .vhero__lang-current {
  width: auto;
  height: auto;
  background: transparent;
  border-radius: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #9c9c9c;

  line-height: 1;
  user-select: none;
}
/* Flip-in runs ONLY on an actual language toggle (class set by Hero) — the
   resting state carries no animation/transform, so the label is always
   readable even where animations are paused. */
.vhero__burger--lang .vhero__lang-current.is-swap {
  animation: langSwap .35s cubic-bezier(.2,.7,.2,1);
}
@keyframes langSwap {
  from { transform: rotateX(85deg) scale(0.6); }
  to   { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vhero__burger--lang .vhero__lang-current.is-swap { animation: none; }
}
.vhero__burger:hover { background: #1a1a1a; }
.vhero__burger span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform .28s cubic-bezier(.2,.7,.2,1), opacity .18s ease;
}
/* Burger morphs into an "X" while the menu is open — pinned in front of the
   black backdrop so it always stays a usable close button. */
.vhero__burger.is-open { z-index: 130; background: #fff; }   /* offen: weißer Kreis, dunkles X — Kontrast zum Backdrop */
.vhero__burger.is-open span { background: #111114; }
.vhero__burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.vhero__burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.vhero__burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── Video stage: large, rounded; flex-shrinks as projects unfold ── */
.vhero__stage {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: min(90vh, 1000px);
  border-radius: var(--vhero-r, 48px);
}
.vhero__screen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  background: #0c0c10;
}
.vhero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Animated placeholder standing in for the looping background video. */
.vhero__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(130% 130% at 30% 10%, #28303a 0%, #0e1116 64%);
  overflow: hidden;
}
.vhero__drift {
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(38% 38% at 30% 34%, rgba(254,0,0,0.55), transparent 70%),
    radial-gradient(36% 36% at 72% 58%, rgba(95,140,255,0.40), transparent 72%),
    radial-gradient(44% 44% at 54% 86%, rgba(255,176,84,0.34), transparent 72%);
  filter: blur(26px);
  animation: vheroDrift 20s ease-in-out infinite alternate;
}
@keyframes vheroDrift {
  0%   { transform: translate3d(-4%, -3%, 0) scale(1.06); }
  50%  { transform: translate3d(4%, 2%, 0)  scale(1.16); }
  100% { transform: translate3d(-2%, 4%, 0) scale(1.10); }
}
.vhero__grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.07;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.vhero__ph-label {
  position: absolute;
  z-index: 2;
  left: 24px;
  bottom: 22px;
  font-family: ui-monospace, "SF Mono", "Menlo", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.65);
}

/* ── Floating liquid-glass chrome over the video ── */
.vhero__chrome {
  position: absolute;
  top: 22px;
  left: 34px;
  right: 34px;
  z-index: 5;
  display: flex;
  align-items: stretch;
  /* Nav pill removed for the birthday release — the logo pill alone sits at
     the right edge of the video (where the nav used to be). */
  justify-content: flex-end;
  gap: 34px;
  pointer-events: none;
}
.is-open .gnav { pointer-events: auto; }
.glogo, .gnav {
  pointer-events: auto;
  background: rgba(255,255,255,0.14);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.30);
  border-radius: 999px;
  box-shadow: 0 10px 34px rgba(0,0,0,0.18),
              inset 0 1px 0 rgba(255,255,255,0.55),
              inset 0 -8px 18px rgba(255,255,255,0.06);
}
.glogo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: calc(280px - var(--p) * 64px);
  gap: calc(15px - var(--p) * 5px);
  height: 54px;
  padding: 0 calc(24px - var(--p) * 11px) 0 calc(22px - var(--p) * 10px);
  text-decoration: none;
}
.glogo__mark { height: 34px; width: auto; display: block; }

/* New single-lockup logo (40-Jahre mark + wordmark baked into one SVG) —
   the pill hugs the artwork instead of reserving width for separate text. */
.glogo--lockup {
  width: auto;
  gap: 0; /* the two crops butt together — spacing is baked into the SVGs */
  padding: 0 22px;
}
.glogo--lockup .glogo__mark,
.glogo--lockup .glogo__word { height: 40px; width: auto; display: block; }
.glogo__mark--pop { animation: glogoPop .5s cubic-bezier(.2,.7,.2,1); }
@keyframes glogoPop {
  0%   { transform: scale(1) rotate(0deg); }
  35%  { transform: scale(1.12) rotate(-2.5deg); }
  60%  { transform: scale(0.98) rotate(1.2deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.glogo__text {
  display: flex;
  flex-direction: column;
  color: #fff;
  font-size: 12px;
  line-height: 0.95;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.gnav {
  display: flex;
  align-items: center;
  transition: opacity .35s ease;
  flex: 1;
  gap: 0;
  height: 54px;
  padding: 0 calc(14px - var(--p) * 6px) 0 calc(28px - var(--p) * 16px);
}
.gnav__links {
  display: flex;
  align-items: center;
  /* The gap glides with the drag/spring progress (--p) instead of snapping
     when the is-open class flips at the very end of the close animation.
     Adjust the resting gap via --gap-rest below (the inline style is
     deliberately overridden so open/close can interpolate smoothly). */
  /* Reiter-Gap fluid: wächst/schrumpft mit der Displaybreite, mit hartem
     Minimum (12px, damit die 4 Reiter nie kleben) und Maximum (30px). */
  --gap-rest: clamp(12px, 1.5vw, 30px);
  gap: calc(var(--gap-rest) - var(--p, 0) * (var(--gap-rest) - 10px)) !important;
  margin: 0 auto;
}
.gnav__link {
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  padding: 8px calc(16px - var(--p, 0) * 5px);
  border-radius: 999px;
  opacity: 0.94;
  transition: background .2s, opacity .2s;
}
.gnav__link:hover { background: rgba(255,255,255,0.16); opacity: 1; }
.gnav__cta {
  background: var(--red);
  color: #fff;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  padding: 11px 26px;
  border-radius: 999px;
  margin-left: 0;
  transition: background .2s, transform .2s;
}
.gnav__cta:hover { background: var(--red-deep); transform: translateY(-1px); }

/* ── Search + filter over the video ── */
.vhero__search {
  position: absolute;
  /* Closed: centred on the video — but the centre is capped so the group's
     right edge always keeps ≥18px of air to the red handle (right: 3.5%,
     196px wide). Only kicks in on narrower desktops, and only minimally.
     Open: slides toward the left edge so the Filter clears the handle. */
  left: min(
    calc(50% - var(--p) * 50% + var(--p) * 307px),
    calc(96.5% - 196px - 18px - (clamp(320px, 40vw, 420px) + 160px) / 2)
  );
  bottom: 7%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
}
.is-open .vhero__search { pointer-events: auto; }
.vhero__search .search.hero__search {
  max-width: none;
  width: clamp(320px, 40vw, 420px);
}
.vhero__search .search__input {
  height: 46px;
  background: rgba(255,255,255,0.14);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.30);
  color: #fff;
  font-size: 14px;
  padding: 0 50px 0 20px;
  box-shadow: 0 10px 34px rgba(0,0,0,0.18),
              inset 0 1px 0 rgba(255,255,255,0.55),
              inset 0 -8px 18px rgba(255,255,255,0.06);
}
.vhero__search .search__input::placeholder { color: rgba(255,255,255,0.82); }
.vhero__search .search__input:focus {
  border-color: rgba(255,255,255,0.6);
  box-shadow: 0 10px 34px rgba(0,0,0,0.18),
              inset 0 1px 0 rgba(255,255,255,0.55),
              inset 0 -8px 18px rgba(255,255,255,0.06),
              0 0 0 4px rgba(255,255,255,0.12);
}
.vhero__search .search__btn { width: 36px; height: 36px; top: 5px; right: 8px; background: #fff; color: var(--red); }
.vhero__search .search__btn:hover { background: #fff; color: var(--red-deep); box-shadow: 0 6px 18px rgba(0,0,0,0.18); }
.vhero__filter {
  height: 46px;
  background: rgba(255,255,255,0.14);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.30);
  border-radius: 999px;
  padding: 0 20px;
  gap: 9px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  box-shadow: 0 10px 34px rgba(0,0,0,0.18),
              inset 0 1px 0 rgba(255,255,255,0.55),
              inset 0 -8px 18px rgba(255,255,255,0.06);
  transition: width .35s cubic-bezier(.2,.7,.2,1), padding .35s cubic-bezier(.2,.7,.2,1), background .2s, border-color .2s;
}
.vhero__filter:hover { background: rgba(255,255,255,0.24); border-color: rgba(255,255,255,0.30); }
/* When the projects unfold, drop the "Filter" label and keep a round icon-only
   glass bubble — saves room and clears the red handle. */
.is-open .vhero__filter {
  width: 46px;
  padding: 0;
  gap: 0;
  justify-content: center;
}
.is-open .vhero__filter-label { display: none; }

/* ── Red dot (bottom-right of the video) — click it or drag to unfold projects ── */
.vhero__handle {
  position: absolute;
  z-index: 8;
  right: 3.5%;
  bottom: 6%;
  width: 196px;
  height: 196px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  cursor: grab;
  display: grid;
  place-items: center;
  box-shadow: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: background .2s;
}
.vhero__handle:hover { background: var(--red-deep); }
.is-dragging .vhero__handle { cursor: grabbing; }
.vhero__handle-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.vhero__handle-arrow { width: 53px; height: 53px; animation: handleNudge 1.8s ease-in-out infinite; }
.is-open .vhero__handle-arrow, .is-dragging .vhero__handle-arrow { animation: none; }
.vhero__handle-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;

  text-align: center;
  line-height: 1.25;
  white-space: nowrap; /* each line stays as authored — text never escapes the circle */
}
@keyframes handleNudge {
  0%, 100% { transform: translateX(-3px); }
  50% { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .vhero__handle-arrow { animation: none; }
}

/* ── Big red wordmark below the video, right-aligned ── */
.vhero__wordmark {
  text-align: right;
  padding: 110px 26px 0 210px;
  font-weight: 800;
  font-size: clamp(40px, 5.6vw, 86px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--red);
}
.vhero__wordmark .line { display: block; }
.vhero__wordmark .bonn {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.02em;
}

@media (prefers-reduced-motion: reduce) {
  .vhero__drift { animation: none; }
}

/* ── About head sized up to match the draft ── */
.landing-section--about { border-top: 0; padding-top: 28px; }
.landing-section--about .landing-section__head {
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 40px;
}
.landing-section--about .landing-section__lead {
  max-width: 640px;
  margin-left: 0;
  font-size: 15px;
  line-height: 1.45;
}
.landing-section--about .landing-section__title {
  max-width: 640px;
}

/* ── Relocated interactive map ("the Card") ── */
.map-section {
  padding: 100px 40px;
  border-top: 1px solid var(--hair);
}
.map-section__head {
  max-width: 720px;
  margin: 0 auto 44px;
  text-align: center;
}
.map-section__head .landing-section__title { margin: 0 auto; }
.map-section__lead {
  font-size: 17px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 540px;
  margin: 18px auto 0;
  text-wrap: pretty;
}
.map-section__stage {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  height: 660px;
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid var(--hair);
  background: var(--sea);
  box-shadow: none;
  transition: box-shadow .3s ease;
}
.map-section__stage:hover { box-shadow: var(--shadow-md); }
.map-section__stage .atlas-map { border: 0; border-radius: 0; }
.map-section__stage .hero__map-wrap { border-radius: 0; }

/* NOTE: the former in-between hero breakpoint at 1100px is gone — below
   1050px the mobile layout takes over in one single jump, so the video keeps
   its desktop aspect ratio all the way down to 1051px. */
@media (max-width: 720px) {
  .vhero { padding: 12px 0 0; }
  .vhero__track { padding-left: 70px; padding-right: 12px; gap: 0; }
  .vhero__burger { top: 16px; left: 12px; width: 46px; height: 46px; transform: none; }
  .vhero__stage { height: 72vh; }
  .vhero__projects, .vhero__handle { display: none; }
  .vhero__chrome { top: 12px; left: 12px; right: 12px; gap: 10px; }
  .gnav { padding-left: 14px; gap: 2px; }
  .gnav__link { display: none; }
  .glogo { padding: 9px 16px; }
  .vhero__search { width: calc(100% - 40px); flex-direction: column; bottom: 6%; }
  .vhero__search .search.hero__search { width: 100%; }
  .vhero__wordmark { text-align: left; padding: 32px 20px 0; }
  .map-section { padding: 72px 20px; }
  .map-section__stage { height: 480px; border-radius: 22px; }
}

/* ============================================================
   Birthday-release additions
   · coming-soon button states
   · ProjectPeek + NewsModal popups
   · Museum Küppersmühle showcase (replaces the Atlas map)
   · inert newsletter form
   ============================================================ */

/* ── Coming-soon buttons ── */
.btn.is-soon {
  pointer-events: none;
  cursor: default;
  color: #8c8c8c;
  background: #f3f3f3;
  border-color: transparent;
}
.soon-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;

  padding: 4px 9px;
  border-radius: 999px;
  background: #e3e3e3;
  color: #6f6f6f;
  white-space: nowrap;
}

/* ── Shared popup backdrop ── */
.peek-backdrop,
.nmodal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 220;
  background: rgba(8,8,10,0.45);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  display: grid;
  place-items: center;
  padding: 20px;
  animation: popupFade .22s ease both;
}
@keyframes popupFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes popupRise {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .peek-backdrop, .nmodal-backdrop, .peek, .nmodal { animation: none; }
}

/* ── ProjectPeek — mini project detail with image slider ── */
.peek {
  position: relative;
  width: min(520px, 100%);
  max-height: calc(100svh - 40px);
  overflow-y: auto;
  background: #fff;
  border-radius: 26px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
  animation: popupRise .3s cubic-bezier(.2,.7,.2,1) both;
}
.peek__close,
.nmodal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 6;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .15s ease;
}
.peek__close:hover,
.nmodal__close:hover { background: #fff; }

.peek__carousel { position: relative; }
.peek__viewport { overflow: hidden; border-radius: 26px 26px 0 0; background: #ededed; }
.peek__track {
  display: flex;
  transition: transform .45s cubic-bezier(.65,0,.35,1);
}
.peek__slide { flex: 0 0 100%; min-width: 0; aspect-ratio: 4 / 3; }
.peek__slide image-slot { display: block; width: 100%; height: 100%; }
.peek__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.4);
  background: rgba(20,20,20,0.42);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .15s ease;
}
.peek__nav:hover { background: rgba(20,20,20,0.62); }
.peek__nav svg { width: 20px; height: 20px; }
.peek__nav--prev { left: 12px; }
.peek__nav--next { right: 12px; }
.peek__dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
}
.peek__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.peek__dot.is-on { background: #fff; transform: scale(1.25); }
.peek__body { padding: 22px 26px 28px; }
.peek__kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;

  color: var(--red);
  margin-bottom: 8px;
}
.peek__title {
  font-size: 23px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
  color: var(--ink);
  text-wrap: pretty;
}
.peek__meta { font-size: 13.5px; color: var(--muted); margin-bottom: 14px; }
.peek__info { font-size: 14.5px; line-height: 1.6; color: var(--ink); margin: 0; text-wrap: pretty; }

/* ── NewsModal — text-forward ── */
.nmodal {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100svh - 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-radius: 26px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
  animation: popupRise .3s cubic-bezier(.2,.7,.2,1) both;
}
/* Inner scroller: the white card itself never moves, only the text scrolls
   — so the background stays full-bleed and the close button stays put. */
.nmodal__inner {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 36px 38px 42px;
}
.nmodal__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.nmodal__kind {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;

  color: #fff;
  background: var(--red);
  border-radius: 999px;
  padding: 5px 12px;
}
.nmodal__date { font-size: 13px; color: var(--muted); }
.nmodal__title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 16px;
  color: var(--ink);
  text-wrap: balance;
}
.nmodal__body {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}
.nmodal__long .nmodal__body { margin: 0 0 16px; font-size: 15px; }
.nmodal__long .nmodal__body:last-child { margin-bottom: 0; }
.nmodal__h {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 26px 0 10px;
}
/* On phones the long-read popup goes full-bleed ("vollflächig") — the white
   surface covers the whole screen, so the page never peeks out at the top or
   bottom edge while scrolling. */
@media (max-width: 720px) {
  .nmodal-backdrop { padding: 0; }
  .nmodal {
    width: 100%;
    height: 100svh;
    max-height: none;
    border-radius: 0;
  }
  .nmodal__inner { padding: 30px 22px 48px; }
  .nmodal__title { font-size: 24px; }
}

/* ── Museum Küppersmühle showcase ── */
.museum-panel {
  display: grid;
  grid-template-columns: minmax(340px, 520px) 1fr;
  gap: 56px;
  align-items: center;
  padding: 56px;
  border-radius: var(--r-card);
  background: var(--ink);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.museum-panel::before {
  content: "";
  position: absolute;
  inset: -2px;
  background:
    radial-gradient(600px 280px at 100% 0%, rgba(254,0,0,0.18), transparent 70%),
    radial-gradient(500px 260px at 0% 100%, rgba(255,255,255,0.06), transparent 70%);
  pointer-events: none;
}
.museum-panel > * { position: relative; }
.museum-panel__media { aspect-ratio: 3 / 4; min-width: 0; }
.museum-panel__media image-slot {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 24px;
}
.museum-panel__kicker {
  font-size: 12px;
  letter-spacing: 0.12em;

  color: var(--red);
  font-weight: 700;
  margin-bottom: 14px;
}
.museum-panel__title {
  font-family: var(--sf), "SF Pro Display", -apple-system, sans-serif;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-weight: 700;
  margin: 0 0 18px;
  color: #fff;
  text-wrap: balance;
}
.museum-panel__lead {
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
  margin: 0 0 12px;
  max-width: 56ch;
  text-wrap: pretty;
}
.museum-panel__lead--sub { color: rgba(255,255,255,0.6); }
.museum-panel__cta-row { margin-top: 26px; }
.museum-panel__cta { text-decoration: none; }
@media (max-width: 980px) {
  .museum-panel {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 26px;
  }
  .museum-panel__media {
    /* Square on mobile — keeps the section compact (portrait is desktop-only). */
    aspect-ratio: 1 / 1;
    max-width: 420px;
  }
  .museum-panel__cta-row { display: flex; }
  .museum-panel__cta { flex: 1 1 auto; justify-content: center; }
}

/* ── Newsletter — inert until the service is connected ── */
.newsletter-cta__title { text-wrap: balance; }
.newsletter-cta__form--soon { opacity: 0.9; }
.newsletter-cta__input[disabled] { cursor: default; }
.newsletter-cta__btn--soon,
.newsletter-cta__btn--soon:hover {
  pointer-events: none;
  cursor: default;
  background: rgba(255,255,255,0.16);
  border-color: transparent;
  color: rgba(255,255,255,0.55);
  transform: none;
}

/* ── Footer: coming-soon entries + legal links ── */
.footer__soon {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #a3a3a3;
  cursor: default;
}
.footer__soon .soon-badge { background: #ececec; color: #8a8a8a; }
.footer__legal a { color: inherit; }

/* ── Legal page (Impressum + Datenschutz) — super clean ── */
.legal {
  max-width: 820px;
  margin: 0 auto;
  padding: 44px 24px 110px;
}
.legal__back { margin-bottom: 56px; }
.legal__hero { margin-bottom: 56px; }
.legal__section + .legal__section {
  margin-top: 84px;
  padding-top: 64px;
  border-top: 1px solid var(--hair);
}
.legal__h2 {
  font-family: var(--sf), "SF Pro Display", -apple-system, sans-serif;
  font-size: clamp(28px, 4vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-weight: 700;
  margin: 0 0 28px;
  color: var(--ink);
}
.legal__intro {
  font-size: 15px;
  color: var(--muted);
  margin: 0 0 16px;
}
.legal__card {
  padding: 30px 34px;
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ink);
}
.legal__card strong {
  display: block;
  font-size: 18px;
  margin-bottom: 12px;
}
.legal__card p { margin: 0 0 16px; }
.legal__card p:last-child { margin-bottom: 0; }
.legal__section > p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink);
  margin: 0 0 20px;
  text-wrap: pretty;
}
.legal__section > p > strong { color: var(--ink); }
.legal__section a { color: var(--red); text-decoration: none; word-break: break-word; }
.legal__section a:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .legal { padding: 24px 18px 80px; }
  .legal__back { margin-bottom: 36px; }
  .legal__hero { margin-bottom: 32px; }
  .legal__hero .about__title { font-size: clamp(34px, 9vw, 44px); }
  .legal__h2 { font-size: 24px; margin-bottom: 18px; }
  .legal__card { padding: 18px 18px; font-size: 13.5px; line-height: 1.6; }
  .legal__card strong { font-size: 15.5px; margin-bottom: 8px; }
  .legal__card p { margin-bottom: 12px; }
  .legal__intro { font-size: 13.5px; margin-bottom: 12px; }
  .legal__section > p { font-size: 13.5px; line-height: 1.6; margin-bottom: 14px; }
  .legal__section + .legal__section { margin-top: 52px; padding-top: 40px; }
}


/* ════════════════════════════════════════════════════════════════════
   V3 / V3.1 — Politur aus Claude Design (angehängt, überschreibt per Cascade)
   Pill-System · zurückgenommenes Rot · Kicker-Pills · vereinheitlichte
   Headlines · Navbar (.app-nav/.app-header--home) · Lang-Globe (schwarz)
   · Header-Suche · Projekte-Seite. Sprach-Button bleibt --ink (schwarz).
   ════════════════════════════════════════════════════════════════════ */

/* ── Section kickers become pills (the mini-heading above big titles).
   Red is dropped from the label itself and survives only as the dot —
   so red reads as a deliberate accent, not a default. ── */
.landing-section__kicker,
.about__kicker,
.about-intro__kicker,
.figs__kicker,
.search-page__kicker,
.stats-card__kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 9px 17px;
  background: var(--paper-2);
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.11em;

  line-height: 1;
  margin-bottom: 24px;
}
/* Red accent dot removed per design feedback — the pill carries the accent
   on its own; the dot read as too fiddly. */

/* ── Stat figures: a red number-circle with its label set below it ──
   (numbers now sit centred inside the circle; the descriptive text reads
   underneath in ink rather than crammed into the shape.) */
.figs__circles { gap: 34px 24px; align-items: start; }
.figc {
  max-width: none;
  aspect-ratio: auto;
  min-height: 0;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 22px;
}
.figc__num {
  width: 100%;
  height: 118px;
  border-radius: var(--r-pill);
  background: var(--red);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(34px, 3.6vw, 50px);
  line-height: 1;
}
.figc__label {
  margin-top: 0;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
}
.figc__label span { display: block; }
.figc__label span + span { color: var(--muted); opacity: 1; }
@media (max-width: 760px) {
  .figc__num { height: 104px; }
}

/* ── Pull red back from incidental text accents ── */
.pillar__head { color: var(--ink); }

/* ════════ Projekte page ════════ */
.projects-map { display: none; }

/* Generous top + bottom whitespace puts more air between the lead text and the
   search bar, and lets the first view rest on the headline + intro alone. */
.projects-head {
  min-height: 95vh;
  padding: clamp(120px, 22vh, 280px) 0 64px;
  max-width: 880px;
}
.projects-head__title {
  font-family: var(--sf);
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin: 0 0 18px;
}
.projects-head__title em { font-style: normal; color: var(--ink); }
.projects-head__lead {
  font-size: 17px;
  line-height: 1.45; /* kompakter (Feedback 07/2026) */
  color: var(--ink-2);
  max-width: 600px;
  margin: 0;
  text-wrap: pretty;
}

/* The toolbar clamps under the header (sticky) once the headline scrolls past,
   so the search + categories stay as a persistent overview while browsing.
   It rides with the header's hide-on-scroll-down / reveal-on-scroll-up
   (driven by body[data-nav]) once it is actually stuck. */
.projects-toolbar {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 0 20px;
  /* Same frosted-glass look as the navbar: translucent + backdrop blur. */
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--hair);
  margin-bottom: 56px;
  transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .25s;
}
.projects-toolbar.is-stuck { box-shadow: none; }
body[data-nav="hidden"] .projects-toolbar.is-stuck {
  transform: translateY(calc(-100% - var(--header-h)));
}
.projects-toolbar .projects-search {
  width: 100%;
  max-width: 460px;
  margin: 0;
  justify-self: start;
}
.projects-toolbar .projects-search .search__input { height: 52px; }
.projects-toolbar__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between; /* Panel: Chips links, Jahrzehnt rechts */
  gap: 14px 22px;
  width: 100%;
  animation: projFilterIn .25s ease both;
}
@keyframes projFilterIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.projects-cats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.projects-cats__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;

  color: var(--muted);
  margin-right: 2px;
}
.projects-toolbar__right {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}
/* Umbau 07/2026: Suche + Filter-Button in einer Zeile; Kategorien &
   Jahrzehnt klappen als Panel darunter aus (Klick aufs Trichter-Icon). */
.projects-toolbar__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.projects-toolbar__row .projects-search { margin-top: 0; flex: 1 1 300px; }
.projects-toolbar__row .projects-count { margin-left: auto; }
.projects-filterbtn {
  width: 52px; height: 52px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: #fff;
  color: var(--ink);
  display: grid; place-items: center;
  cursor: pointer;
  flex: none;
  position: relative;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.projects-filterbtn:hover { border-color: var(--hair); background: var(--paper-2); box-shadow: 0 4px 14px rgba(10,10,10,0.07); }
.projects-filterbtn[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.projects-filterbtn__dot {
  position: absolute; top: 9px; right: 9px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--red);
  border: 2px solid #fff;
}
.projects-filterbtn[aria-expanded="true"] .projects-filterbtn__dot { border-color: var(--ink); }
/* Länder-Dropdown mit Mehrfachauswahl im Filterpanel (07/2026) */
.projects-toolbar__gruppe { display: flex; align-items: center; gap: 12px; }
.projects-laender { position: relative; }
.projects-laender__btn {
  height: 36px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hair);
  background: #fff;
  color: var(--ink);
  padding: 0 14px;
  font: inherit;
  font-size: 13.5px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: border-color .15s ease;
}
.projects-laender__btn:hover { border-color: var(--hair); background: var(--paper-2); box-shadow: 0 4px 14px rgba(10,10,10,0.07); }
.projects-laender__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 224px;
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(10, 10, 10, 0.12);
  padding: 8px;
  z-index: 30;
  display: grid;
  gap: 2px;
  animation: projFilterIn .2s ease both;
}
.projects-laender__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  text-align: left;
  border-radius: 9px;
  color: var(--ink);
}
.projects-laender__opt:hover { background: var(--paper-2); }
.projects-laender__box {
  width: 16px; height: 16px;
  border-radius: 5px;
  border: 1px solid var(--muted-2);
  display: grid;
  place-items: center;
  flex: none;
  color: #fff;
  background: #fff;
  transition: background .12s ease, border-color .12s ease;
}
.projects-laender__opt[aria-pressed="true"] .projects-laender__box { background: var(--red); border-color: var(--red); }
.projects-laender__reset {
  margin-top: 4px;
  padding: 8px 10px;
  border: 0;
  border-top: 1px solid var(--hair);
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  color: var(--muted);
  text-align: left;
}
.projects-laender__reset:hover { color: var(--red); }
.projects-count {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}

/* Editorial image-tile grid — uniform row unit, some tiles span 2 rows */
/* Umbau 08/2026 (Paul): einheitliche „ganze" Kacheln + mehr Weißraum statt
   des gemischten Rhythmus aus halben/ganzen Kacheln. Höhe über aspect-ratio,
   damit nichts mehr in feste Reihen gequetscht wird (behebt Mobile-Overlap). */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  margin-top: 0;
  padding-bottom: 80px;
}
.project-card {
  position: relative;
  aspect-ratio: 4 / 5;
  display: block;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--hair);
  background: var(--paper-2);
  cursor: pointer;
  transform: none;
}
.project-card:hover { transform: none; }
.project-card--tall { grid-row: auto; }  /* Rhythmus abgeschafft (08/2026) — Klasse ungenutzt */
/* Responsive-Breakpoints stehen weiter unten bei den bestehenden Media-Queries. */
.project-card__media {
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: 0;
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.project-card__media svg { width: 100%; height: 100%; display: block; }
.project-card:hover .project-card__media { transform: scale(1.045); }
.project-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.20) 42%, rgba(0,0,0,0) 72%);
  pointer-events: none;
}
.project-card__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 16px 18px 16px;
  color: #fff;
}
.project-card__overlay .project-card__title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.22;
  margin: 0;
  color: #fff;
}
.project-card--tall .project-card__overlay .project-card__title { font-size: 20px; }
.project-card__overlay .project-card__meta {
  font-size: 12.5px;
  margin-top: 4px;
  color: rgba(255,255,255,0.82);
}
.project-card__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  /* Symmetrisches Padding, kein Dot-Gap mehr; Schrift 13px (Feedback 07/2026:
     11px zu klein, links wirkte das Padding durch den leeren Dot-Span breiter). */
  padding: 6px 14px;
  background: var(--red);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--r-pill);
  letter-spacing: 0.01em;
}
.project-card__cat-pill {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  padding: 6px 14px;
  background: rgba(255,255,255,0.92);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--r-pill);
  letter-spacing: 0.01em;
}
.projects-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 0;
  color: var(--muted);
}

/* ── Mutterkacheln: Projekt-Bündel im Grid (z. B. Kunstprojekt Bonn) ── */
.project-card__bundle-badge {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 2;
  padding: 6px 14px;
  background: rgba(17, 17, 20, 0.82);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--r-pill);
  letter-spacing: 0.01em;
  backdrop-filter: blur(4px);
}
.project-card--bundle-open { outline: 2px solid var(--red); outline-offset: 2px; }
.projekt-buendel {
  grid-column: 1 / -1;
  grid-row: auto;
  background: var(--paper-2);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  padding: 18px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: buendelAuf .3s ease;
}
@keyframes buendelAuf { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.projekt-buendel__hint { font-size: 13px; font-weight: 600; color: var(--muted); }
.projekt-buendel__grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: auto;
  gap: 18px;
}
.projekt-buendel__grid .project-card { grid-row: auto; }
.projekt-buendel__more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px dashed var(--hair-2, #d6d6d6);
  border-radius: var(--r-card);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: border-color .2s ease, color .2s ease;
}
.projekt-buendel__more:hover { border-color: var(--red); color: var(--red); }
@media (max-width: 980px) {
  .projekt-buendel { grid-row: auto; }
  .projekt-buendel__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
}

/* ── Projektarchiv (alle Alt-Projekte seit 1986, aufklappbar) ── */
.projekt-archiv {
  margin-top: 88px;
  padding-top: 44px;
  border-top: 1px solid var(--hair);
}
.projekt-archiv__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.projekt-archiv__title {
  margin: 0;
  font-weight: 500;
  font-size: clamp(24px, 2.1vw, 34px);
  letter-spacing: -0.025em;
  line-height: 1.12;
}
.projekt-archiv__lead {
  margin: 12px 0 0;
  max-width: 560px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}
.projekt-archiv__toggle { flex: none; }
.projekt-archiv__list { margin-top: 36px; }
.projekt-archiv__group {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 24px;
  padding: 18px 0;
  border-top: 1px solid var(--hair);
}
.projekt-archiv__year {
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--red);
}
.projekt-archiv__year--offen { font-size: 14px; color: var(--muted); font-weight: 600; }
.projekt-archiv__items {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 48px;
}
.projekt-archiv__items li {
  font-size: 14.5px;
  line-height: 1.5;
  padding: 4px 0;
  break-inside: avoid;
}
.projekt-archiv__item-ort { color: var(--muted); }
@media (max-width: 820px) {
  .projekt-archiv__group { grid-template-columns: 1fr; gap: 8px; }
  .projekt-archiv__items { columns: 1; }
}

@media (max-width: 980px) {
  /* Höhe kommt aus aspect-ratio (08/2026) — feste grid-auto-rows entfernt,
     sonst überlaufen die Kacheln ihre Reihe und überschneiden sich. */
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
  .projekt-buendel__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .projects-grid { grid-template-columns: 1fr; gap: 16px; }
  .project-card { aspect-ratio: 4 / 3; }
  .projekt-buendel__grid { grid-template-columns: 1fr; }
  .projects-toolbar .projects-search { max-width: 100%; }
  .projects-toolbar__right { width: 100%; margin-left: 0; justify-content: space-between; }
}

/* ════════ Header — search opens from an icon next to the burger ════════ */
.app-header__spacer { min-width: 0; }
.app-header__actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
}
.header__search-toggle {
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hair);
  background: var(--paper);
  color: var(--ink);
  display: grid;
  place-items: center;
  transition: background .15s, color .15s, transform .15s, border-color .15s;
}
.header__search-toggle:hover { background: var(--paper-2); transform: translateY(-1px); }
.header__search-toggle.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.header-search-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: min(520px, calc(100vw - 32px));
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  padding: 12px;
  z-index: 60;
  animation: hdrSearchIn .18s cubic-bezier(.2,.7,.2,1);
}
@keyframes hdrSearchIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
.header-search-panel .search--in-header { width: 100%; }
/* No harsh black focus border on the in-navbar search field. */
.header-search-panel .search__input,
.header-search-panel .search__input:focus {
  border-color: var(--hair);
  box-shadow: none;
}
.header-search-panel .search__input {
  height: 48px;
  font-size: 14px;
  padding: 0 54px 0 18px;
}
.header-search-panel .search__btn { width: 36px; height: 36px; }
.header-search-panel .search-suggest { position: static; margin-top: 10px; box-shadow: none; border: 0; }

/* ════════ Language toggle ════════ */
/* Landing (desktop): a glass globe button stands in for the now-redundant
   burger — the glass nav pill already covers navigation. */
.vhero__lang {
  position: absolute;
  top: 40px;
  left: calc(78px - var(--p) * 28px);
  z-index: 6;
  min-width: 54px;
  height: 54px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.82);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  color: #3a3a3a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  transition: transform .2s, background .2s;
}
.vhero__lang:hover { transform: translateY(-1px); background: #fff; }
.vhero__lang svg { width: 22px; height: 22px; flex: none; }
/* Globe by default; the language code (DE/EN) reveals on hover and stays
   shown once the toggle has been clicked. */
.vhero__lang-code {
  max-width: 0;
  opacity: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #1a1a1a;
  white-space: nowrap;
  transition: max-width .24s cubic-bezier(.2,.7,.2,1), opacity .2s, margin .2s;
}
.vhero__lang:hover .vhero__lang-code,
.vhero__lang.is-shown .vhero__lang-code { max-width: 32px; opacity: 1; margin-left: 9px; }

/* On desktop landing the burger is replaced by the globe above. */
.vhero__burger { display: none; }

/* Language pill inside the nav drawer (mobile landing + all subpages). */
.lang-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hair);
  background: var(--paper-2);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: background .15s, border-color .15s, transform .15s;
}
.lang-pill:hover { background: #fff; border-color: var(--hair); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(10,10,10,0.07); }
.lang-pill svg { color: #3a3a3a; flex: none; }

/* Search route — its own visible field (header search is now icon-triggered) */
.search-page__field { max-width: 520px; margin: 20px 0 0; }
.search-page__field .search__input { height: 52px; }

/* ════════════════════════════════════════════════════════════════════
   V3.1 — one consistent header across every page
   The sticky header now carries the same inline nav as the landing hero,
   so navigation never "disappears" on subpages. The burger is reserved
   for mobile only; on desktop the links are always visible.
   ════════════════════════════════════════════════════════════════════ */

.app-header__row { gap: 24px; }

/* The header is hidden at the very top of the LANDING page (the hero glass
   chrome is the nav there) and slides down once the hero search has scrolled
   away — so the big hero search bar visually hands off to the header's
   search icon. On subpages the header is always present. */
.app-header {
  transition: transform .5s cubic-bezier(.22,.61,.36,1), opacity .42s ease,
              border-color .25s, background .25s;
}
/* Header hide/reveal is driven by body[data-nav] so it stays perfectly in step
   with the Projekte sticky toolbar (which reads the same attribute). */
body[data-nav="hidden"] .app-header {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
/* On the landing page the header floats (fixed) so it reserves no space at the
   top — the hero stays full-bleed — and overlays content once it slides in. */
.app-header--home {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

/* Inline navigation (desktop) */
.app-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-self: end;
}
.app-nav__link {
  padding: 9px 15px;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.app-nav__link:hover { background: var(--paper-2); color: var(--ink); }
.app-nav__link.is-active { background: var(--paper-2); color: var(--ink); font-weight: 600; }
.app-nav__cta {
  margin-left: 6px;
  padding: 10px 20px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  border: 0;
  white-space: nowrap;
  transition: background .2s, transform .2s;
}
.app-nav__cta:hover { background: var(--red); transform: translateY(-1px); }
.app-nav__cta.is-active { background: var(--red); }

/* Search icon scales/fades in — the in-header counterpart of the hero search
   bar, so the transition between the two reads as a morph rather than a pop. */
.header__search-toggle { animation: hdrToggleIn .3s cubic-bezier(.2,.7,.2,1) both; }
@keyframes hdrToggleIn {
  from { opacity: 0; transform: scale(.55); }
  to   { opacity: 1; transform: scale(1); }
}

/* Header language globe — globe by default; the code (DE/EN) reveals on
   hover and stays visible once the toggle has been used. */
.lang-globe {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hair);
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
  transition: background .15s, border-color .15s;
}
.lang-globe svg { width: 20px; height: 20px; flex: none; }
.lang-globe__code {
  max-width: 0;
  opacity: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: max-width .24s cubic-bezier(.2,.7,.2,1), opacity .2s, margin .2s;
}
.lang-globe:hover { background: var(--paper-2); }
.lang-globe:hover .lang-globe__code,
.lang-globe.is-shown .lang-globe__code { max-width: 32px; opacity: 1; margin-left: 8px; }

/* Desktop: inline nav + globe, no burger. Mobile: burger only. */
@media (min-width: 1051px) {
  .app-header .burger-btn { display: none; }
}
@media (max-width: 1050px) {
  .app-nav,
  .app-header .lang-globe { display: none; }
}


/* ════════════════════════════════════════════════════════════════════
   Sticker-Layer — spielerische, frei ziehbare Kunstwerk-Sticker im
   White-Space der Projekt-Seite. Spielwiese = .projects-playground
   (Kopf + Toolbar) bis zur grauen Linie unter den Filtern. Rein
   dekorativ (kein Klick-Ziel), Maus + Touch (Pointer Events).
   ════════════════════════════════════════════════════════════════════ */
.projects-playground { position: relative; }
.sticker-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;   /* Layer durchlässig … */
  z-index: 42;            /* … über Toolbar (40), unter Header (50) */
}
.sticker {
  position: absolute;
  width: var(--w, 150px);
  height: auto;
  pointer-events: auto;          /* … nur die Sticker fangen den Zug ab */
  touch-action: none;            /* Sticker ziehen, Seite scrollt daneben */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  transform: translate(-50%, -50%) rotate(var(--tilt, 0deg));
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.18));
  transition: filter .15s ease, transform .12s ease;
  will-change: left, top;
}
@media (hover: hover) {
  .sticker:hover { filter: drop-shadow(0 16px 26px rgba(0,0,0,0.24)); }
}
.sticker.is-dragging {
  cursor: grabbing;
  transform: translate(-50%, -50%) rotate(var(--tilt, 0deg)) scale(1.06);
  filter: drop-shadow(0 20px 34px rgba(0,0,0,0.28));
  transition: filter .15s ease;
}
/* Auf schmalen Screens kleiner, damit sie den Text nicht erschlagen */
@media (max-width: 760px) { .sticker { width: calc(var(--w, 150px) * 0.72); } }
@media (max-width: 480px) { .sticker { width: calc(var(--w, 150px) * 0.56); } }
@media (prefers-reduced-motion: reduce) {
  .sticker { transition: none; }
}


/* ════════════════════════════════════════════════════════════════════
   Refinements (Iteration 2) — Feedback-Fixes
   ════════════════════════════════════════════════════════════════════ */

/* 1) Hero-Sprach-Button: der schwarze Kreis kommt zurück (V3 hatte alle
   .vhero__burger ausgeblendet). Jetzt mit Globe-Icon über dem DE/EN-Code,
   weiß auf Schwarz. Klick schaltet DE⇄EN (bestehende handleToggleLang-Logik). */
.vhero__burger--lang { display: flex !important; gap: 3px; }
.vhero__burger--lang svg { width: 21px; height: 21px; color: #fff; flex: none; }
.vhero__burger--lang .vhero__lang-current {
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;

  line-height: 1;
}

/* 2) Handle-Pfeil dreht sich, wenn die News-Leiste rechts ausgeklappt ist
   (statt der bisherigen, fehlenden/konstanten Nudge-Animation). */
.vhero__handle-arrow {
  animation: none !important;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.vhero.is-open .vhero__handle-arrow { transform: rotate(180deg); }

/* 3) NavBar-Reiter-Abstand stabil halten beim Öffnen (das --p-getriebene
   Interpolieren von gap/padding ließ die Reiter beim Aufklappen „haken"). */
.gnav__links { gap: clamp(12px, 1.5vw, 30px) !important; }
.gnav__link { padding: 8px 16px !important; }

/* 4) Sekundäre NavBar: CTA ist „Mitglied werden" (rot) wie in der primären
   Navbar; „Über uns" ist jetzt ein regulärer Reiter. */
.app-nav__cta { background: var(--red) !important; }
.app-nav__cta:hover { background: var(--red-deep) !important; transform: translateY(-1px); }


/* 5) Liquid-Glass der Landing-Navbar dunkler füllen (70 % Schwarz) statt heller
   Glasfilm — besserer Kontrast für die weiße Schrift/Logo über dem Hero-Video.
   Blur/Border/Inset-Glanz bleiben (Glas-Look), nur der Fill wird dunkel. */
.glogo, .gnav { background: rgba(0, 0, 0, 0.20); }


/* 6) Sekundärer NavBar-CTA rot wie die primäre GlassNav (.gnav__cta). */
.app-nav__cta { background: var(--red); }
.app-nav__cta:hover { background: var(--red-deep); }


/* ════════════════════════════════════════════════════════════════════════
   V4 — Landing-Hero Redesign (Figma 1262:249 / 1262:373)
   Eingerücktes, gerundetes Video (~½ Screen), dunkler Menü-Burger auf dem
   Video, rote MKM-Kachel, großes 40-Jahre-Lockup darunter, plus eine beim
   Hochscrollen eingeblendete Liquid-Glass-Navbar. Überschreibt den früheren
   V3-Drag-Hero (dessen Markup bleibt erhalten, wird aber ausgeblendet).
   ════════════════════════════════════════════════════════════════════════ */

/* Alte Glass-Logo/Nav bleibt weg (ersetzt durch Burger + Drawer). Handle +
   News-Panel (roter „Was gibt's neues?"-Button) sind wieder aktiv — wie zuvor. */
.vhero__chrome { display: none !important; }

/* Drag-Track aktiv (Video schrumpft, News-Panel klappt rechts auf) — mit neuem
   Inset / Rundung / Höhe. */
.vhero__track {
  display: flex;
  align-items: stretch;
  gap: calc(var(--p) * 24px);
  padding-left: clamp(16px, 2.2vw, 32px);
  padding-right: calc(clamp(16px, 2.2vw, 32px) + var(--p) * 24px);
  transform: translateX(var(--rubber));
}
.vhero__stage {
  position: relative;
  flex: 1 1 auto;
  height: min(62vh, 744px);                   /* +20 % Y-Höhe (war 52vh) */
  border-radius: clamp(24px, 3.2vw, 50px);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}
/* News-Panel: geschlossen = Videohöhe (kein Layout-Sprung), geöffnet fast bis
   zum unteren Displayrand (mit kleinem Gap) — via --p interpoliert. */
.vhero__projects { height: calc(62vh + var(--p) * 38vh - var(--p) * 46px); }

/* Roter News-Button: gleicher Abstand zur rechten UND unteren Video-Kante. */
.vhero__handle { right: clamp(20px, 2.5vw, 40px); bottom: clamp(20px, 2.5vw, 40px); }
.vhero__screen { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.vhero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }

/* Menü-Burger auf dem Video, oben links — schwarzer Kreis, dunkelgraue Linien. */
.vhero__burger {
  position: absolute;
  /* Gleicher Abstand zur oberen UND linken Video-Kante (Video-Ecke: 18px oben,
     track-padding links). */
  top: calc(18px + clamp(16px, 2vw, 24px));
  left: calc(clamp(16px, 2.2vw, 32px) + clamp(16px, 2vw, 24px));
  width: 46px; height: 46px;
  border-radius: 50%;
  background: #111114;
  border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  z-index: 6;
  transition: background .2s ease, transform .15s ease;
}
.vhero__burger:hover { background: #1d1d22; }
.vhero__burger:active { transform: scale(0.94); }
.vhero__burger span {
  display: block; width: 18px; height: 2px; border-radius: 2px;
  background: #6f6f78;            /* dunkelgraue Akzentlinien */
  transition: transform .28s cubic-bezier(.2, .7, .2, 1), opacity .18s ease, background .2s ease;
}
.vhero__burger:hover span { background: #9a9aa4; }

/* Rote MKM-Kachel, unten rechts auf dem Video. */
.vhero__mkm {
  position: absolute;
  right: clamp(16px, 3vw, 54px);
  bottom: clamp(16px, 3vw, 48px);
  width: clamp(132px, 15vw, 196px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--red, #FE0000);
  color: #fff;
  display: grid; place-items: center;
  text-align: center; text-decoration: none;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
  z-index: 6;
  transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s ease;
}
.vhero__mkm:hover { transform: scale(1.05) rotate(-2deg); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.34); }
.vhero__mkm-inner { display: block; transform: rotate(-8deg); line-height: 1.22; }
.vhero__mkm-small { display: block; font-size: clamp(12px, 1vw, 15px); font-weight: 400; }
.vhero__mkm-big { display: block; font-size: clamp(14px, 1.25vw, 19px); font-weight: 700; }

/* Rotes Schriftbild unten links (ohne Marke) — ~20 % größer als im Draft. */
.vhero__brand {
  display: block;
  width: fit-content;
  /* Deutlicher White-Space danach: „Über uns" soll erst beim Scrollen kommen. */
  margin: clamp(28px, 4vh, 52px) 0 clamp(160px, 28vh, 360px);
  padding: 0 clamp(20px, 2.6vw, 44px);
}
.vhero__brand-img { height: clamp(92px, 12.5vw, 143px); width: auto; display: block; }

/* ── LiquidNav — semi-fixe Liquid-Glass-Leiste, beim Hochscrollen eingeblendet ── */
/* Zentrierte Floating-Glass-Pille (Position + Optik aus dem Fable-Handoff
   übernommen): oben zentriert, Burger links + 40-Jahre-Logo rechts in einer
   Pille. Unsere Konfetti-Animation (40 Jahre) + der Menü-Drawer bleiben. */
.liquidnav {
  position: fixed; top: 28px; left: 50%;
  z-index: 96;
  display: flex; align-items: center; gap: 14px;
  padding: 7px 16px 7px 7px;
  border-radius: 999px;
  overflow: hidden;
  /* Figma-Effekt „Glass": Fill #FFFFFF @ 10 %, Frost 13 (→ Blur), Light −45°/80 %,
     KEIN Stroke. Refraction/Dispersion/Depth haben in CSS kein direktes Pendant —
     dies ist die produktionssichere Emulation (backdrop-filter + Licht-Sheen +
     chromatischer Saum). Für echte Brechung s. optionalen SVG-Displacement-Layer. */
  background: rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(6px) saturate(150%) brightness(1.03);
  backdrop-filter: blur(6px) saturate(150%) brightness(1.03);
  /* Weicher, leicht getönter Schatten: definiert die Pillenform auch auf hellem
     Subseiten-Hintergrund (Fables Glas war für das dunkle Hero-Video getunt). */
  box-shadow: 0 8px 24px rgba(20, 22, 40, 0.16),
              0 2px 6px rgba(20, 22, 40, 0.10),
              inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transform: translateX(-50%) translateY(-180%);
  opacity: 0;
  transition: transform .38s cubic-bezier(.2, .7, .2, 1), opacity .3s ease,
              background .3s ease, box-shadow .3s ease,
              -webkit-backdrop-filter .3s ease, backdrop-filter .3s ease;
  will-change: transform;
}
/* Light −45°, 80 % → diagonaler Glanz-Sweep von oben-links. */
.liquidnav::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.06) 34%, transparent 56%);
  transition: opacity .3s ease;
}
/* Dispersion 50 → dezenter chromatischer Saum an der Unterkante. */
.liquidnav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(255, 120, 180, 0), rgba(120, 180, 255, 0.28) 50%, rgba(255, 120, 180, 0));
}
.liquidnav.is-revealed { transform: translateX(-50%) translateY(0); opacity: 1; }

/* Unterseiten: oben Platz für die fixe Floating-Glass-Pille (auf Home liegt sie
   über dem Hero und braucht dort keinen Platz). */
.has-fixednav { padding-top: 90px; overflow-x: clip; }
.liquidnav__burger {
  position: relative; z-index: 1;          /* über dem Glanz-Sweep */
  width: 40px; height: 40px; border-radius: 50%;
  background: #111114; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  transition: background .2s ease, transform .15s ease;
}
.liquidnav__burger:hover { background: #1d1d22; }
.liquidnav__burger:active { transform: scale(0.94); }
/* Burger-Morph in zwei Phasen, damit beim Schließen kein „Knick“ entsteht:
   Verschieben (span) und Drehen (::before) laufen nacheinander statt
   gleichzeitig. Öffnen: erst zusammenschieben, dann zum X drehen —
   Schließen: erst zurückdrehen, dann auseinanderschieben. */
.liquidnav__burger span {
  display: block; position: relative;
  width: 18px; height: 2px;
  background: transparent;
  transition: transform .14s cubic-bezier(.2, .7, .2, 1) .12s, opacity .12s ease .14s;
}
.liquidnav__burger span::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 2px; background: #6f6f78;
  transition: transform .14s cubic-bezier(.2, .7, .2, 1), background .2s ease;
}
/* Menü offen: Glas-Untergrund bleibt IDENTISCH — der visuelle Switch kommt
   allein von der Invertierung: Burger wird zum X (weißer Kreis), das Logo
   wechselt auf seine weiße Variante (per src-Swap in header.jsx). Die Pille
   liegt über dem Backdrop, damit das X klickbar bleibt. */
.liquidnav.is-menu {
  z-index: 130;
  pointer-events: none;
}
.liquidnav.is-menu .liquidnav__logo { pointer-events: none; }
.liquidnav.is-menu .liquidnav__burger { pointer-events: auto; }
.liquidnav__burger.is-open { background: #fff; }
.liquidnav__burger.is-open span { transition: transform .14s cubic-bezier(.2, .7, .2, 1), opacity .1s ease; }
.liquidnav__burger.is-open span::before {
  background: #111114;
  transition: transform .14s cubic-bezier(.2, .7, .2, 1) .12s, background .2s ease;
}
.liquidnav__burger.is-open span:nth-child(1) { transform: translateY(6px); }
.liquidnav__burger.is-open span:nth-child(1)::before { transform: rotate(45deg); }
.liquidnav__burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.liquidnav__burger.is-open span:nth-child(3) { transform: translateY(-6px); }
.liquidnav__burger.is-open span:nth-child(3)::before { transform: rotate(-45deg); }
.liquidnav__logo { position: relative; z-index: 1; }
.liquidnav__logo img { height: 36px; width: auto; display: block; transition: opacity .3s ease; }
/* Logo-Invertierung bei offenem Menü: nur auf breiten Screens, wo die Pille
   über dem dunklen Backdrop liegt. Unter ~1012px überlappt der weiße Drawer
   (420px, rechts) die zentrierte Pille — dort bleibt die dunkle Variante,
   sonst wäre das Logo weiß auf weiß unsichtbar. */
.liquidnav__logo-white,
.liquidnav__logo img.liquidnav__logo-white { display: none; }
@media (min-width: 1012px) {
  .liquidnav.is-menu .liquidnav__logo img.liquidnav__logo-dark { display: none; }
  .liquidnav.is-menu .liquidnav__logo img.liquidnav__logo-white { display: block; }
}
.liquidnav__logo-pop { animation: glogoPop .5s cubic-bezier(.2, .7, .2, 1); }

/* ── Drawer: größerer Museums-Banner (Bild + Kicker + Titel + „Besuchen"-CTA) ── */
.nav-drawer__feature {
  height: 232px;
  border-radius: 16px;
  background-image: url("assets/museum-kuppersmuhle.jpg");
}
.nav-drawer__feature::after {
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.30) 48%, rgba(0, 0, 0, 0.52) 100%);
}
.nav-drawer__feature-body {
  position: absolute; inset: 0;
  z-index: 1;
  padding: 20px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;   /* Inhalt zentriert */
  gap: 4px; text-align: center;
  color: #fff;
}
.nav-drawer__feature-kicker {
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em;
 opacity: 0.9;
}
.nav-drawer__feature-title {
  font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1;
  margin-bottom: 12px;
}
.nav-drawer__feature-cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 6px;
  padding: 11px 20px;
  background: #111; color: #fff;         /* CTA schwarz, Schrift weiß */
  border-radius: 999px;
  font-size: 14px; font-weight: 600;
  transition: transform .25s cubic-bezier(.2, .7, .2, 1), background .2s ease;
}
.nav-drawer__feature:hover .nav-drawer__feature-cta {
  transform: translateY(-1px); background: #2a2a2a;
}
.nav-drawer__feature-cta .nav-drawer__feature-arrow { color: #fff; }

/* ── Mini-Labels & Kicker vereinheitlicht (07/2026) ──────────────────────────
   Die alte Kombi „11 px / Semibold–Bold / starke Sperrung" war als Form
   unerwünscht (Feedback). Neu überall: 13 px / REGULAR / dezente Sperrung.
   Badges/Pills behalten ihre kompakte Größe, verlieren aber die Fette. */
.projects-cats__label,
.vhero__projects-kicker,
.figs__kicker,
.detail__facts dt,
.atlas-filter-card__group h5,
.search-suggest__head,
.search-suggest__kind,
.search-page__kicker,
.hit-card__kicker,
.peek__kicker,
.nmodal__kind,
.moment__kind {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.06em;
}
.card__badge,
.project-card__tag,
.project-card__cat-pill,
.atlas-pin__badge,
.vhero__lang-current {
  font-weight: 400;
}

/* ═══ Foto-Schaufenster im Projekte-Kopf (24.07.2026) ═══
   Ersetzt vorerst die Sticker-Spielwiese: großes abgerundetes Foto-Quadrat
   auf der rechten Bildschirmhälfte mit rotierenden Projektbildern. */
.projekte-hero { display: flex; align-items: center; gap: clamp(24px, 4vw, 72px); }
.projekte-hero .projects-head { flex: 1 1 auto; min-width: 0; }
.projekt-schaufenster {
  position: relative; flex: none; margin-left: auto;
  width: min(44vw, 700px); aspect-ratio: 1 / 1;
  border-radius: 28px; overflow: hidden; display: block;
  background: #f2f2f0;
  box-shadow: 0 30px 90px rgba(17, 17, 17, 0.22);
}
.projekt-schaufenster__bild {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 1.1s ease;
}
.projekt-schaufenster__bild.ist-aktiv { opacity: 1; }
.projekt-schaufenster__chip {
  position: absolute; left: 18px; bottom: 18px; z-index: 2;
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 20px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: var(--ink); max-width: min(78%, 440px);
}
.projekt-schaufenster__chip strong {
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.projekt-schaufenster__chip span { font-size: 13px; color: var(--ink-2); }
/* ═══ Projekte-Kopf mobil (27.07.2026, Paul): wie der Über-uns-Auftakt —
   Foto-Karte, Kicker + weiße Headline unten links AUF dem Bild.
   Metriken 1:1 von .ueber-heroimg übernommen. ═══ */
@media (max-width: 1020px) {
  .projekte-hero { position: relative; display: block; }
  .projekt-schaufenster {
    display: block; width: 100%; margin-left: 0;
    aspect-ratio: auto; height: 60vh; min-height: 340px;
    border-radius: var(--r-card); margin-top: 8px;
    box-shadow: none;
  }
  .projekt-schaufenster::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.10) 24%, rgba(0, 0, 0, 0) 42%);
    pointer-events: none;
  }
  .projekt-schaufenster__chip { display: none; }
  .projekte-hero .projects-head {
    position: absolute; z-index: 2;
    left: clamp(24px, 4vw, 56px); right: clamp(24px, 4vw, 56px);
    bottom: clamp(24px, 4vw, 52px);
    min-height: 0; padding: 0; max-width: 800px;
  }
  .projekte-hero .projects-head__title { color: #fff; margin: 0; }
  .projekte-hero .projects-head__title em { color: #fff; }
  .projekte-hero .projects-head__lead { display: none; }
}

/* ── events.css ── */
/* ───── Veranstaltungen page ───── */
.events-upcoming { margin-top: 34px; }
.events-upcoming__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hair);
}
.events-upcoming__title {
  font-size: 38px;
  line-height: 1.1;
  margin: 0;
  font-weight: 500; /* gleiches Gewicht wie die übrigen Headlines (07/2026) */
  letter-spacing: -0.01em;
}
.events-upcoming__legend {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.events-upcoming__grid {
  display: grid;
  grid-template-columns: minmax(320px, 380px) 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 900px) {
  .events-upcoming__grid { grid-template-columns: 1fr; gap: 32px; }
}

.events-upcoming__cal { position: sticky; top: 88px; }

/* Mini calendar */
.cal {
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  padding: 16px;
  background: var(--paper);
}
.cal__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.cal__month { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.cal__nav {
  width: 28px; height: 28px; border-radius: 999px;
  border: 1px solid var(--hair); background: transparent;
  font-size: 16px; line-height: 1; cursor: pointer; color: var(--ink);
}
.cal__nav:hover { background: rgba(0,0,0,.04); }
.cal__weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr);
  font-size: 11px; color: var(--muted);
  text-align: center; padding: 4px 0 6px;
  border-bottom: 1px solid var(--hair);
}
.cal__grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 2px; padding-top: 6px;
}
.cal__cell {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 0; background: transparent;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--ink);
  border-radius: 8px; cursor: default;
  font-family: inherit;
}
.cal__cell--blank { visibility: hidden; }
.cal__cell--event {
  cursor: pointer; font-weight: 600;
}
.cal__cell--event:hover { background: rgba(0,0,0,.05); }
.cal__cell--selected,
.cal__cell--selected:hover {
  background: var(--ink); color: var(--paper);
}
.cal__cell--selected .cal__dot { background: var(--paper); }
.cal__dot {
  position: absolute; bottom: 4px; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 999px;
  background: var(--accent, #c9352b);
}
.cal__dot--legend { position: static; transform: none; }
.cal__hint { font-size: 12px; color: var(--muted); margin-top: 12px; line-height: 1.5; }

/* Upcoming list */
.upcoming-list { display: flex; flex-direction: column; gap: 28px; }
.upcoming-group__label {
  font-size: 14.5px; letter-spacing: 0.02em; /* größer + entsperrt (07/2026) */
  color: var(--muted); font-weight: 600;
  margin-bottom: 8px;
}
.upcoming-item {
  display: grid;
  grid-template-columns: 84px 1fr 24px;
  gap: 24px;
  padding: 20px 4px 22px;
  border-top: 1px solid var(--hair);
  cursor: pointer;
  transition: background .15s ease;
}
.upcoming-item:hover { background: rgba(0,0,0,.015); }
.upcoming-item:last-child { border-bottom: 1px solid var(--hair); }
.upcoming-item__date {
  display: flex; flex-direction: column; align-items: center;
  padding-top: 2px;
}
.upcoming-item__day {
  font-size: 38px; line-height: 1; font-weight: 700; letter-spacing: -0.02em;
}
.upcoming-item__month {
  font-size: 13px; margin-top: 4px; color: var(--ink); font-weight: 500;
}
.upcoming-item__weekday {
  font-size: 11px; color: var(--muted); margin-top: 2px;
  letter-spacing: 0.04em;
}
.upcoming-item__body { min-width: 0; }
.upcoming-item__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 14px; color: var(--muted); margin-bottom: 6px; /* 12,5 → 14 (07/2026) */
}
.upcoming-item__kind {
  padding: 3px 11px; border-radius: 999px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.02em; /* 11,5 → 13 */
}
.upcoming-item__free { color: var(--accent, #c9352b); font-weight: 600; }
.upcoming-item__title {
  font-size: 22px; line-height: 1.25; font-weight: 700;
  margin: 2px 0 0; letter-spacing: -0.01em;
}
.upcoming-item__detail {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--hair);
}
.upcoming-item__detail p {
  margin: 0 0 14px; font-size: 14.5px; line-height: 1.6; max-width: 620px;
}
.upcoming-item__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.upcoming-item__chev {
  font-size: 22px; color: var(--muted); align-self: center;
  font-weight: 300; line-height: 1;
}
.upcoming-item--open .upcoming-item__chev { color: var(--ink); }

/* Past events block — reuses .news-filterbar / .news-list */
.events-past { margin-top: 96px; }

/* ── mobile.css ── */
/* ============================================================
   SfKuK — Mobile interpretation of the landing page
   ------------------------------------------------------------
   Loaded AFTER styles.css + events.css. The desktop layout is
   left completely untouched; everything here lives inside a
   max-width media query and only re-flows the page for phones.
   To roll this experiment back, simply unlink this file.
   ============================================================ */

/* Mobile-only hero controls — never shown on desktop. */
.vhero__mnews,
.vhero__mbtn,
.vhero__mcue { display: none; }

@media (max-width: 1050px) {

  /* =========================================================
     HERO  ·  two mobile states driven by `.vhero.is-mnews`
     ---------------------------------------------------------
     State A (default): rounded video card + 40-Jahre logo pill
       (top-right), dark glass burger (top-left), big red word-
       mark below, a red "Was gibt's neues?" button low-right of
       the video, and a "wische runter" scroll cue at the foot.
       The search bar is intentionally hidden for now.
     State B (.is-mnews): the video group slides out left and a
       full-screen "Aktuelles auf einen Blick" news panel slides
       in from the right; the red button shrinks into a back-dot
       bottom-left, the scroll cue moves bottom-right.
     ========================================================= */
  .vhero {
    position: relative;
    height: 100svh;
    min-height: 600px;
    overflow: hidden;
    padding: 0 !important;
    --vh-card: 57svh;
  }

  /* Hide the desktop drag pieces + (for now) the search */
  .vhero__handle,
  .vhero__search,
  .vhero__projects { display: none !important; }

  /* ── Video group: the card + wordmark slide together ── */
  .vhero__track {
    position: absolute !important;
    top: 14px; left: 0; right: 0;
    height: var(--vh-card);
    padding: 0 14px !important;
    gap: 0 !important;
    transform: none !important;
    transition: transform .55s cubic-bezier(.65,0,.35,1), opacity .45s ease;
    z-index: 4;
  }
  .vhero__stage {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 1 1 auto !important;
    border-radius: 30px;
  }

  /* Burger — dark glass dot, top-left inside the video */
  /* Burger — solid BLACK dot (matches desktop), top-left. Same Y and the
     same inset from the video edge as the logo pill (≈14px on each side). */
  .vhero__burger {
    top: 36px !important;
    left: 36px !important;
    right: auto !important;
    width: 50px; height: 50px;
    transform: none !important;
    background: #111 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 0 !important;
    z-index: 6;
    transition: opacity .4s ease;
  }

  /* Close-X mobil NICHT weiß (das X liegt auf dem weißen Drawer) — Kreis bleibt
     dunkel, Striche dunkelgrau/anthrazit, konsistent mit dem geschlossenen Burger. */
  .vhero__burger.is-open,
  .liquidnav__burger.is-open { background: #111114; }
  .vhero__burger.is-open span { background: #6f6f78; }
  /* LiquidNav-Burger: die Balkenfarbe sitzt seit dem 2-Phasen-Morph auf
     span::before (span selbst ist transparent) — die alte span-Regel
     übermalte die Rotation und verhinderte das X auf Mobile (Bug 07/2026). */
  .liquidnav__burger.is-open span { background: transparent; }
  .liquidnav__burger.is-open span::before { background: #6f6f78; }

  /* Logo pill — top-RIGHT, same Y + same edge-inset as the burger (22px from
     the card edges; burger is +14 because it is anchored to the screen, not
     the card, so 36 − 14 card-inset = 22 from the card edge too). */
  .vhero__chrome {
    top: 22px !important;
    left: auto !important;
    right: 22px !important;
    width: auto;
    gap: 0 !important;
    justify-content: flex-end !important;
    align-items: center !important;
  }
  .gnav { display: none !important; }
  .glogo {
    width: auto !important;
    height: 50px !important;
    padding: 0 14px !important;
    gap: 0 !important;
  }
  .glogo__mark, .glogo__word { height: 30px !important; }

  /* Rotes Schriftbild (SVG) unter dem Video */
  .vhero__brand {
    position: absolute !important;
    top: calc(14px + var(--vh-card) + 22px);
    left: 0; right: auto;
    margin: 0 !important;
    padding: 0 22px !important;
    width: auto !important;
    z-index: 4;
    transition: transform .55s cubic-bezier(.65,0,.35,1), opacity .45s ease;
  }
  .vhero__brand-img {
    height: auto !important;
    width: min(80vw, 360px) !important;
    display: block;
  }

  /* ── State B: slide the video group out, fade the burger ── */
  .vhero.is-mnews .vhero__track,
  .vhero.is-mnews .vhero__brand {
    transform: translateX(-22%);
    opacity: 0;
    pointer-events: none;
  }
  .vhero.is-mnews .vhero__burger { opacity: 0; pointer-events: none; }

  /* ── Mobile news overlay ── */
  .vhero__mnews {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    z-index: 10;
    background: #fff;
    padding: 40px 20px 92px;
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform .55s cubic-bezier(.65,0,.35,1), opacity .4s ease;
  }
  .vhero.is-mnews .vhero__mnews {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }
  .vhero__mnews-head { flex: 0 0 auto; margin-bottom: 8px; }
  .vhero__mnews-kicker {
    font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
 color: var(--red); margin-bottom: 10px;
  }
  .vhero__mnews-title {
    font-family: var(--sf), "SF Pro Display", -apple-system, sans-serif;
    font-size: clamp(28px, 8vw, 36px); line-height: 1.02;
    letter-spacing: -0.01em; color: var(--ink); margin: 0 0 10px;
  }
  .vhero__mnews-lead {
    font-size: 13.5px; line-height: 1.5; color: var(--muted);
    margin: 0; max-width: 40ch; text-wrap: pretty;
  }
  /* Cards stack from the top with a capped gap; any leftover space falls
     BELOW the list (between the news and the "wische runter" cue) instead
     of inflating the gaps on tall tablets. On very narrow/short screens
     (e.g. iPhone SE, ≤342px wide) the list scrolls internally instead of
     clipping the last card. */
  .vhero__mnews-list {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
    justify-content: flex-start; gap: clamp(14px, 2.6svh, 30px);
    padding-top: 4px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .vhero__mnews-list::-webkit-scrollbar { display: none; }
  .vmnews { flex: 0 0 auto; }
  .vmnews { display: flex; flex-direction: column; gap: 8px; text-decoration: none; }
  .vmnews__media {
    position: relative;            /* anchor for the absolutely-positioned <img> */
    overflow: hidden;              /* keep the cover-crop inside the rounded frame */
    width: 100%;
    height: clamp(72px, 15svh, 142px); /* taller on real phones (15svh) → ~15% less whitespace; the low floor keeps short/landscape windows from clipping */
    border-radius: 16px;
    background:
      linear-gradient(135deg,
        oklch(0.64 0.17 var(--h, 12)),
        oklch(0.45 0.16 calc(var(--h, 12) + 34)));
  }
  .vmnews__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .vmnews__txt { min-width: 0; }
  .vmnews__title {
    font-size: 15.5px; font-weight: 700; line-height: 1.18;
    color: var(--ink); margin: 0 0 3px; text-wrap: pretty;
  }
  .vmnews__meta { font-size: 12.5px; color: var(--muted); }
  .vmnews__go {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.12);
    color: var(--ink);
  }
  .vmnews__go svg { width: 17px; height: 17px; }

  /* ── Morphing red button: "Was gibt's neues?" ⇄ back-dot ── */
  .vhero__mbtn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    position: absolute;
    z-index: 30;
    width: 126px; height: 126px;
    left: calc(100vw - 28px - 126px);
    bottom: calc(100svh - var(--vh-card) + 6px);
    border-radius: 50%;
    background: var(--red);
    color: #fff; border: 0; cursor: pointer;
    box-shadow: 0 14px 30px rgba(0,0,0,0.20);
    transition: left .55s cubic-bezier(.65,0,.35,1),
                bottom .55s cubic-bezier(.65,0,.35,1),
                width .5s ease, height .5s ease, box-shadow .3s ease;
  }
  .vhero__mbtn-arrow { width: 34px; height: 34px; transition: transform .5s ease, width .4s, height .4s; }
  .vhero__mbtn-label {
    font-size: 13px; font-weight: 600; line-height: 1.05; max-width: 90px;
    overflow: hidden; max-height: 32px; transition: opacity .25s ease, max-height .4s ease;
  }
  .vhero.is-mnews .vhero__mbtn {
    width: 54px; height: 54px;
    left: 20px;
    bottom: 22px;
    gap: 0;            /* no label gap -> arrow sits dead-centre */
    box-shadow: 0 8px 18px rgba(0,0,0,0.22);
  }
  .vhero.is-mnews .vhero__mbtn-arrow { transform: rotate(180deg); width: 24px; height: 24px; }
  .vhero.is-mnews .vhero__mbtn-label { display: none; } /* fully gone → arrow exactly centred */

  /* ── Scroll cue pill ── */
  .vhero__mcue {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    position: absolute;
    z-index: 28;
    bottom: 22px;
    right: 50%;
    transform: translateX(50%);
    height: 54px;            /* matches the red back-dot height */
    padding: 0 22px;
    border-radius: 999px;
    background: rgba(255,255,255,0.88);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    color: var(--ink);
    font-size: 13px; font-weight: 500; white-space: nowrap;
    cursor: pointer;
    transition: right .55s cubic-bezier(.65,0,.35,1), transform .55s cubic-bezier(.65,0,.35,1);
  }
  .vhero__mcue svg { width: 17px; height: 17px; }
  .vhero.is-mnews .vhero__mcue {
    right: 20px;
    transform: translateX(0);
  }

  /* ---------------------------------------------------------
     BURGER MENU DRAWER — full-bleed on mobile; nav pushed down
     so the close (X) button never sits on top of "Projekte".
     --------------------------------------------------------- */
  .nav-drawer {
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
  }
  .nav-drawer__head { display: none !important; }
  .nav-drawer__nav { padding: 96px 22px 8px !important; }

  /* ---------------------------------------------------------
     SHARED SECTION RHYTHM
     --------------------------------------------------------- */
  /* Seiten-Gutter der Unterseiten: 18px statt Desktop-40px (Freigabe 07/2026) —
     fluchtet mit den Landing-Sektionen und der 14px-Footer-Kante. */
  .page { padding-left: 18px !important; padding-right: 18px !important; }
  .landing-section { padding: 60px 18px !important; }
  .map-section { padding: 60px 18px !important; }

  .landing-section__head {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-bottom: 30px !important;
  }
  .landing-section__title {
    font-size: clamp(30px, 8.6vw, 46px) !important;
  }
  .landing-section__lead { font-size: 15px !important; }

  /* ---------------------------------------------------------
     ABOUT
     --------------------------------------------------------- */
  .landing-section--about { padding-top: 18px !important; }
  .about-grid {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }
  .about-grid__media { min-height: 0 !important; }
  .about-grid__media--photo img,
  .about-grid__overlay img,
  .about-grid__overlay .placeholder { min-height: 300px !important; }
  .about-grid__pillars {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .about-grid__pillars > div[style] { flex-wrap: wrap; }
  .about-grid__pillars .btn { flex: 1 1 auto; justify-content: center; }

  /* Caption pill: left-aligned like desktop, fixed inset from the image's
     left + bottom edge; wide enough to stay at 1–2 lines on most screens. */
  .about-grid__caption {
    left: 14px !important;
    right: auto !important;
    bottom: 14px !important;
    transform: none;
    max-width: calc(100% - 28px);
    text-align: left;
    line-height: 1.35;
    /* Equalise the two wrapped lines so the shrink-wrapped pill (JS in
       AboutBlock) hugs the text with symmetric padding. */
    text-wrap: balance;
  }

  /* "In figures" — inline 66px headline forced down; 2×2 red dots */
  .figs { margin-top: 48px !important; }
  .figs__title { font-size: clamp(26px, 8vw, 40px) !important; }
  .figs__circles {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    margin-top: 32px !important;
  }
  .figc { padding: 14px !important; }

  /* ---------------------------------------------------------
     PROJECTS IN FOCUS
     --------------------------------------------------------- */
  .focus-row {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 16px;
  }
  .focus-row .btn { align-self: stretch; justify-content: center; }
  /* Two projects per row; the first (the showcase project) spans a full row */
  .focus-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; gap: 16px !important; }
  .focus--big { grid-row: auto !important; grid-column: 1 / -1 !important; }
  .focus--big .focus__media {
    aspect-ratio: 16 / 9 !important;
    flex: none !important;
    min-height: 0 !important;
  }
  .focus--sm .focus__media {
    aspect-ratio: 4 / 3 !important;
    flex: none !important;
    min-height: 0 !important;
  }
  /* Titles: max 2 lines on phones (1 on desktop); press-and-hold shows all */
  .focus__title { -webkit-line-clamp: 2; }
  .focus__title:active { -webkit-line-clamp: 99; }

  /* ---------------------------------------------------------
     MAP SECTION
     --------------------------------------------------------- */
  .map-section__head { margin-bottom: 26px !important; }
  .map-section__lead { font-size: 15px !important; }
  .map-section__stage {
    height: 62vh !important;
    min-height: 420px;
    border-radius: 22px !important;
  }

  /* ---------------------------------------------------------
     NEWS HIGHLIGHTS + NEWSLETTER
     --------------------------------------------------------- */
  /* Two news cards per row on the landing page */
  .nh-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; gap: 16px !important; }
  .nh-card__lead {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .newsletter-cta { padding: 28px 22px !important; margin-top: 48px !important; }
  .newsletter-cta__title { font-size: 24px !important; }
  /* Drop the single-pill wrapper on mobile — it makes a broken pill-in-pill
     once the input + button stack. Give each its own rounded field. */
  .newsletter-cta__form {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }
  .newsletter-cta__input {
    width: 100%;
    flex: none !important;
    height: 52px;
    box-sizing: border-box;
    padding: 0 18px;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
    border-radius: 999px;
  }
  .newsletter-cta__btn { width: 100%; height: 52px; justify-content: center; }

  /* ---------------------------------------------------------
     FOOTER
     --------------------------------------------------------- */
  .footer { padding: 44px 14px 14px !important; }
  /* Glas-Karte: auf Tablet zwei Spalten (Presse rutscht in Zeile 2),
     auf Schmal alles untereinander. */
  .footer__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px 24px !important;
  }
  @media (max-width: 640px) {
    .footer__grid { grid-template-columns: 1fr !important; }
  }
}

/* Extra squeeze for the smallest handsets */
@media (max-width: 380px) {
  .vhero__wordmark .line { font-size: clamp(24px, 8vw, 34px) !important; }
  .figc__num { font-size: clamp(34px, 11vw, 46px) !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   Unterseiten — 2-Spalter mobil auf 1 Spalte umbrechen (news/events/about).
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  /* Radikal gekürzte Vertikal-Abstände auf allen Seiten (Feedback 07/2026) */
  .section { padding: 40px 0; }
  .news-list { margin-top: 12px; padding-bottom: 32px; }
  .events-upcoming { margin-top: 8px; } /* Headline → Kalender enger (07/2026) */
  .newsletter-cta { margin-top: 40px; }
  /* Suche kompakt: schmaler + niedriger, Platzhalter nur „Suche" */
  .projects-toolbar__row { gap: 10px; }
  .projects-toolbar__row .news-search,
  .projects-toolbar__row .projects-search { flex: 1 1 140px; min-width: 0; }
  .news-filterbar .search__input,
  .projects-toolbar .search__input { height: 46px !important; }
  .projects-filterbtn { width: 46px; height: 46px; }
  /* Roter Such-Kreis: mittig in der 46-px-Pille statt über den Rand (07/2026) */
  .news-filterbar .search__btn,
  .projects-toolbar .search__btn { width: 36px; height: 36px; top: 5px; right: 5px; }

  /* Seiten-Kopf (Titel | Lead) untereinander — News, Events, Über uns, Projekte. */
  .projects-hero {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 22px 0 12px;
    align-items: start;
  }
  .projects-head__title { font-size: clamp(34px, 10vw, 52px); }

  /* News-/Events-Liste: Bild oben, Text darunter (statt fixer 320px-Spalte). */
  .news-item {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 24px 0;
    align-items: stretch;
  }
  .news-item__media { aspect-ratio: 16 / 10; }

  /* Sektions-Kopf (Titel | Text) untereinander. */
  .section__head {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 28px;
  }
  .section__title { font-size: clamp(30px, 8.5vw, 40px); }

  /* Über-uns: Intro (Text | Bild) + Zahlen-Kacheln untereinander. */
  .about__hero {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px 0 32px;
  }
  .about-grid { grid-template-columns: 1fr; gap: 22px; }
  .stats-card__grid { grid-template-columns: 1fr; }
  .stats-card__grid .kf { border-right: 0; border-bottom: 1px solid var(--hair); }
  .stats-card__grid .kf:last-child { border-bottom: 0; }

  /* Grid-Kinder dürfen schrumpfen (kein min-content-Überlauf). */
  .projects-hero > *, .about__hero > *, .news-item > *, .section__head > *, .about-grid > * { min-width: 0; }
}

/* Veranstaltungen: Mini-Kalender mobil nicht mehr sticky (klebte am Scrollen). */
@media (max-width: 820px) {
  .events-upcoming__cal { position: static; top: auto; }
}

/* ── ueber-uns.css ── */
/* ── Über uns (Neuaufbau 2026) ────────────────────────────────────────────────
   Eigenständiges Stylesheet für src/about.jsx. Nutzt die Tokens aus styles.css
   (--ink, --muted, --hair, --red, --r-card …) und folgt den bestehenden
   Mustern: Pill-Kicker, .section-Gerüst, Karten-Radien, Hairlines.
   Mobile-Breakpoint wie mobile.css: 760 px. */

/* Sektions-Köpfe: auf dieser Seite einheitlich linksbündig gestapelt
   (Titel, darunter Lead) — ruhiger als das globale Links/Rechts-Raster. */
.ueber-page .section__head {
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 36px;
}
.ueber-page .section__lead { max-width: 62ch; line-height: 1.55; margin: 0; }
/* Auf großen Screens darf der Fließtext breiter laufen — spart Y-Höhe;
   auf kleineren bleibt die schmalere Lesebreite (Feedback 07/2026). */
@media (min-width: 1100px) {
  .ueber-page .section__lead { max-width: 88ch; }
}
.ueber-page .projects-head__lead { line-height: 1.5; font-size: 16px; }
/* Headline in den Proportionen der Projekte-Seite (globale Regel: SF-Stack,
   clamp 40–72px) — nur die Farbe kommt auf dem Foto per .ueber-heroimg__title. */
.ueber-page .projects-head__title { font-size: clamp(40px, 5vw, 72px); font-family: var(--sf); }

/* Überschriften-System: Vorbild ist die Stapler-Headline („Vier Jahrzehnte.
   Karte für Karte.“) — Inter, weight 500, enge Laufweite. Alle Sektions-
   Titel folgen ihr; nur der Seitentitel im Hero darf größer sein. */
.ueber-page .section__title {
  font-family: "Inter", sans-serif;
  font-size: clamp(24px, 2.1vw, 34px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.12;
  max-width: 640px;
  text-wrap: pretty;
}

/* Mini-Überschrift (roter Punkt + Label) — identisch zu den Home-Sektionen. */
.ueber-kick {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ueber-kick__dot {
  width: 11.9px; height: 11.9px; /* 2× +15 % (Feedback 07/2026) */
  border-radius: 50%;
  background: var(--red);
  flex: none;
}
.ueber-kick__label {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--red);
  line-height: 1;
}

/* ── Linien-System ──
   Custom gesetzt, wo sie am meisten tragen:
   · Kennzahlen sind oben UND unten gerahmt (Intro-Abschluss)
   · Trennstrich nach der Meilenstein-Sektion (section--after-panel)
   · volle Hairline am Ende von Schwerpunkten, Vorstand & Beirat, Kontakt
   · kurze Hairlines nur als Listen-Trenner (Vorstands-Karten, Stationen) */
.ueber-intro {
  border-bottom: 1px solid var(--hair);
  padding-bottom: 44px;
}
.ueber-page .section--after-panel { border-top: 1px solid var(--hair); }

/* Vollflächiger Bild-Auftakt: Kranfoto mit Claim unten links */
.ueber-heroimg {
  position: relative;
  height: min(84vh, 880px);
  min-height: 420px;
  border-radius: var(--r-card);
  overflow: hidden;
  margin-top: 24px;
  background: var(--paper-2);
}
.ueber-heroimg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.ueber-heroimg__scrim {
  position: absolute; inset: 0;
  /* bewusst dezent — das Bild soll hell bleiben (Feedback 07/2026), nur der
     Claim unten links braucht etwas Halt */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.10) 24%, rgba(0, 0, 0, 0) 42%);
  pointer-events: none;
}
.ueber-heroimg__text {
  position: absolute;
  left: clamp(24px, 4vw, 56px);
  right: clamp(24px, 4vw, 56px);
  bottom: clamp(24px, 4vw, 52px);
  max-width: 800px;
}
.ueber-heroimg__title { color: #fff; margin: 0; }
/* Das em erbt sonst das dunkle Akzent-Styling der globalen Titel-Regel —
   auf dem Foto muss es hell bleiben. */
.ueber-heroimg__title em { color: #fff; }

/* Hero: Text links (schmaler, mehr Luft zum Karussell), Karussell rechts */
.ueber-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 46%);
  gap: clamp(36px, 5vw, 96px);
  align-items: center;
  padding: 56px 0 0;
}
.ueber-hero__text { max-width: 560px; }
.ueber-hero .projects-head__lead { margin: 0 0 14px; max-width: 50ch; }
.ueber-hero__cta { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }

/* Karussell: großes Frame + Miniatur-Navigation darunter */
.ueber-carousel { display: flex; flex-direction: column; gap: 12px; }
.ueber-carousel__frame {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--paper-2);
}
.ueber-carousel__thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  padding: 2px; /* Luft für den Aktiv-Ring */
}
.ueber-carousel__thumb {
  padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: 12px; overflow: hidden;
  aspect-ratio: 4 / 3;
  opacity: 0.55;
  transition: opacity .2s ease;
}
.ueber-carousel__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ueber-carousel__thumb:hover { opacity: 0.85; }
.ueber-carousel__thumb.is-active { opacity: 1; outline: 2px solid var(--red); outline-offset: 2px; }
.ueber-carousel__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .7s ease;
}
.ueber-carousel__img.is-active { opacity: 1; }
.ueber-carousel__cap {
  position: absolute;
  left: 14px; bottom: 14px;
  max-width: calc(100% - 170px);
  padding: 9px 15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
.ueber-carousel__nav {
  position: absolute;
  right: 12px; bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ueber-carousel__btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.ueber-carousel__btn:hover { background: #fff; }
.ueber-carousel__btn:active { transform: scale(0.94); }

/* Kennzahlen-Zeile — eigener Streifen nach „Unsere Arbeit“ */
.ueber-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  padding: 64px 0 72px;
  border-bottom: 1px solid var(--hair);
}
.ueber-stat__num {
  font-size: clamp(34px, 3.2vw, 50px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ueber-stat__label { font-size: 15.5px; font-weight: 600; margin-top: 10px; line-height: 1.4; }
.ueber-stat__sub { font-size: 13px; color: var(--muted); margin-top: 3px; line-height: 1.5; }

/* Sichtbare Verifizierungs-Hinweise (bewusst markiert, nicht dekorativ) */
.ueber-verify {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
  color: var(--muted-2);
  margin: 10px 0 0;
}

/* Schwerpunkte: alternierende Bild/Text-Zeilen — Trennstriche über JEDEM
   Segment (auch vor dem ersten: trennt CTAs vom ersten Schwerpunkt, 07/2026) */
.ueber-sp {
  display: grid;
  grid-template-columns: minmax(320px, 440px) 1fr;
  gap: clamp(28px, 4.5vw, 72px);
  align-items: center;
  padding: 40px 0;
  border-top: 1px solid var(--hair);
}
/* Letztes Segment: Abstand Bild → Sektions-Endlinie auf die 40 px der
   übrigen Trenner angleichen (Sektions-Padding 80 px wird neutralisiert) */
@media (min-width: 761px) {
  .ueber-page .section .ueber-sp:last-of-type { padding-bottom: 0; margin-bottom: -40px; }
}
.ueber-sp--flip { grid-template-columns: 1fr minmax(320px, 440px); }
.ueber-sp--flip .ueber-sp__media { order: 2; }
.ueber-sp__media {
  border-radius: var(--r-card);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--paper-2);
}
.ueber-sp__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ueber-sp__num { font-size: 16px; font-weight: 600; color: var(--red); margin-bottom: 10px; }
.ueber-sp__title {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 14px;
  text-wrap: pretty;
}
.ueber-sp__body p {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 12px;
  max-width: 62ch;
  text-wrap: pretty;
}
.ueber-sp__body p:last-child { margin-bottom: 0; }
.ueber-sp__cta { margin-top: 20px; }

/* Vorsitzender (Porträt + Kurzbio) — Bild streckt sich auf Texthöhe */
.ueber-lead {
  display: grid;
  grid-template-columns: minmax(260px, 350px) 1fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: stretch;
  padding-bottom: 24px;
}
.ueber-lead__media {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  height: 100%;
  min-height: 380px;
  background: var(--paper-2);
}
.ueber-lead__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  display: block;
}
.ueber-lead__media image-slot { display: block; width: 100%; height: 100%; }
/* Rot bleibt den Mini-Überschriften der Sektionen vorbehalten — die Rolle
   über dem Namen ist deshalb neutral grau (wie .ueber-subhead). */
.ueber-lead__role { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--muted); }
.ueber-lead__name {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  letter-spacing: -0.025em;
  margin: 6px 0 16px;
}
.ueber-lead__bio p {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 12px;
  max-width: 62ch;
  text-wrap: pretty;
}
.ueber-lead__facts { list-style: none; margin: 22px 0 0; padding: 0; max-width: 560px; }
.ueber-lead__facts li {
  padding: 10px 0;
  border-top: 1px solid var(--hair);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.ueber-lead__links { margin-top: 18px; }
.ueber-lead__links-sep { color: var(--muted-2); padding: 0 8px; }

/* Vorstand / Beirat */
.ueber-subhead {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin: 44px 0 6px;
}
.ueber-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 28px;
}
.ueber-board__item { padding: 16px 0 20px; }
.ueber-board__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 14px;
  display: block;
  background: var(--paper-2);
  margin-bottom: 12px;
}
.ueber-board__name { font-size: 15.5px; font-weight: 600; line-height: 1.35; }
.ueber-board__meta { font-size: 13px; color: var(--muted); margin-top: 3px; }
.ueber-beirat {
  font-size: 15.5px;
  line-height: 1.9;
  color: var(--ink-2);
  max-width: 78ch;
  margin: 0;
  padding-top: 8px;
}
.ueber-beirat .sep { color: var(--muted-2); padding: 0 7px; }

/* Kontakt + Spenden */
.ueber-kontakt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.ueber-kontakt .ueber-subhead { margin-top: 0; }
.ueber-kontakt__block p {
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--ink-2);
  margin: 0 0 10px;
}
.ueber-kontakt__block p:last-child { margin-bottom: 0; }
.ueber-iban { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.ueber-link {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--muted-2);
}
.ueber-link:hover { text-decoration-color: var(--ink); }

/* ── Meilenstein-Zeitleiste (Lineal-Optik, draggbar) ── */
.zl__head {
  display: flex !important;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}
/* Kick + Titel im Zeitleisten-Kopf: gleicher 10-px-Abstand wie in den
   übrigen Sektionsköpfen (Paul 07/2026) */
.zl__head > div:first-child { display: grid; gap: 10px; }
.zl__arrows { display: flex; gap: 10px; flex: none; padding-bottom: 4px; }
.zl__arrow {
  width: 50px; height: 50px;
  border-radius: 50%;
  border: 1px solid rgba(10, 10, 10, 0.35);
  background: rgba(255, 255, 255, 0.5);
  color: var(--ink);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease, opacity .2s ease;
}
.zl__arrow:hover:not(:disabled) { background: #fff; transform: scale(1.06); }
.zl__arrow:active:not(:disabled) { transform: scale(0.95); }
.zl__arrow:disabled { opacity: 0.3; cursor: default; }

.zl__body { position: relative; }
/* Durchgängige Linie am Fokusjahr — von der Jahreszeile bis zur Unterkante
   des Detail-Blocks (deckt die Segment-Hairline des aktiven Jahres). */
.zl__focusline {
  position: absolute;
  top: 12px; bottom: 0;
  width: 1px;
  background: var(--hair);
  z-index: 1;
  pointer-events: none;
}
.zl__wrap {
  position: relative;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  padding: 6px 0 2px;
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 90px), transparent);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 90px), transparent);
  outline: none;
}
.zl__wrap:active { cursor: grabbing; }
.zl__wrap:focus-visible { box-shadow: 0 0 0 2px var(--red); border-radius: 8px; }
.zl__track { position: relative; display: flex; will-change: transform; padding-bottom: 26px; }
/* Lineal: nur feine Minor-Ticks, KEIN horizontaler Balken (Mock-Vorgabe) —
   läuft über die volle Track-Breite hinaus */
.zl__ruler {
  position: absolute;
  /* Überhang = Vielfaches der 14-px-Tick-Periode, damit das Raster durch
     x = 0 läuft und die Segment-Striche (Vielfache von 14) darauf sitzen. */
  left: -406px; right: 0; bottom: 0;
  height: 12px;
  background-image: repeating-linear-gradient(to right, var(--hair) 0 1px, transparent 1px 14px);
}
.zl__seg { position: relative; flex: none; }
.zl__seg::before {
  content: "";
  position: absolute;
  left: 0; top: 6px;
  /* bis zur Unterkante der Tick-Reihe durchziehen (Track-Padding 26px =
     Lücke + Lineal) — der Jahres-Strich reiht sich wie im Mock bei den
     kleinen Strichen ein; nur die Fokuslinie läuft weiter nach unten. */
  bottom: -26px;
  width: 1px;
  background: var(--hair);
  transition: opacity .25s ease;
}
/* Beim Draggen und am Fokus-Slot verschwindet die Segment-Hairline — die
   fixe Fokuslinie bleibt der einzige vertikale Strich vor der Jahreszahl. */
.zl.is-dragging .zl__seg::before,
.zl__seg.is-active::before { opacity: 0; }
.zl__year {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 2px 18px 20px;
  cursor: pointer;
  transform-origin: left bottom;
  color: var(--muted-2);
  font: inherit;
}
.zl__num {
  display: block;
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: inherit;
}
.zl__label {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: inherit;
}
.zl__year.is-active { color: var(--ink); }
.zl__year.is-active .zl__num { font-weight: 600; }
.zl__year.is-active .zl__label { color: var(--red); }

/* Detail unter dem Fokuspunkt — blendet bei Jahreswechsel weich ein;
   Padding rückt den Inhalt rechts neben die Fokuslinie */
.zl__detail { max-width: 620px; margin-top: 30px; padding-left: 18px; animation: zlIn .4s ease both; }
.zl__dtitle {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.zl__dtext {
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--ink-2);
  margin: 0 0 18px;
  text-wrap: pretty;
}
.zl__dimg {
  display: block;
  width: min(300px, 70%);
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(10, 10, 10, 0.14);
}
@keyframes zlIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .zl__track, .zl__year { transition: none !important; }
  .zl__detail { animation: none; }
}

/* ── Kompakte Gremien-Darstellung (Vorschlag 07/2026) ── */
.ueber-lead--kompakt {
  grid-template-columns: minmax(190px, 235px) 1fr;
  gap: clamp(24px, 3vw, 44px);
  padding-bottom: 10px;
}
.ueber-lead--kompakt .ueber-lead__bio p { margin-bottom: 0; }
.ueber-lead--kompakt .ueber-lead__links { margin-top: 12px; margin-bottom: 18px; }
.ueber-klapp { border-top: 1px solid var(--hair); }
/* Nur die Werdegang-Klappe in der schmalen Smerling-Spalte begrenzen — die
   Beirat-Klappe unter dem Grid spannt die volle Sektionsbreite (Linien-System). */
.ueber-gremium__lead .ueber-klapp { max-width: 640px; }
.ueber-klapp__btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 2px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.ueber-klapp__btn:hover { color: var(--red); }
.ueber-klapp__count { font-size: 13px; color: var(--muted); font-weight: 400; margin-left: 10px; }
.ueber-klapp__chev { flex: none; transition: transform .25s ease; }
.ueber-klapp.is-open .ueber-klapp__chev { transform: rotate(180deg); }
.ueber-klapp__panel { padding: 2px 2px 18px; animation: zlIn .3s ease both; }
.ueber-klapp__panel .ueber-lead__facts { margin-top: 14px; }
/* Vorstand: kompakte Chips statt hoher Foto-Karten */
.ueber-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px 22px;
  padding: 4px 0 26px;
}
.ueber-chip { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ueber-chip__photo {
  width: 46px; height: 46px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: var(--paper-2);
}
.ueber-chip__name { font-size: 14.5px; font-weight: 600; line-height: 1.25; }
.ueber-chip__meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

/* ── Klassische Gremien-Tafel (Iteration 07/2026) ──
   Smerling links, Vorstand rechts; rechteckige Porträts, Passepartout-
   Rahmung, ruhige Versalien-Labels (Regular, gesperrt) — klassischer als
   die runden Chips. */
.ueber-gremium {
  display: grid;
  grid-template-columns: minmax(300px, 5fr) minmax(340px, 6fr);
  gap: clamp(36px, 5vw, 92px);
  align-items: start;
  padding-bottom: 12px;
}
.ueber-passe {
  margin: 0 0 18px;
  padding: 12px;
  border: 1px solid var(--hair);
  background: #fff;
  max-width: 300px;
}
.ueber-passe img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.ueber-caps {
  /* keine Versalien mehr (Paul 07/2026) — ruhiges graues Label */
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin-bottom: 10px;
}
.ueber-gremium__name {
  font-family: var(--sf);
  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.ueber-gremium__lead .ueber-lead__bio p { margin-bottom: 0; }
.ueber-gremium__lead .ueber-lead__links { margin-top: 12px; margin-bottom: 18px; }
.ueber-roster { border-top: 1px solid var(--hair); }
.ueber-roster__row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 9px 2px;
  border-bottom: 1px solid var(--hair);
}
.ueber-roster__photo {
  width: 40px; height: 50px;
  object-fit: cover;
  display: block;
  background: var(--paper-2);
}
.ueber-roster__name { font-size: 15.5px; font-weight: 500; letter-spacing: 0.01em; min-width: 0; }
.ueber-roster__city { font-size: 13.5px; color: var(--muted); text-align: right; white-space: nowrap; }

/* ── Team-Tafel nach Kunden-Mock (07/2026) ── */
.ueber-vintro {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 1.5fr;
  gap: clamp(28px, 4vw, 72px);
  padding: 6px 0 34px;
}
.ueber-vintro__statement {
  /* keine Versalien — No-Go (Paul 07/2026); Abgrenzung über Gewicht */
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.55;
  color: var(--ink);
  max-width: 34ch;
}
.ueber-vintro__body p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.62; color: var(--ink-2); max-width: 62ch; text-wrap: pretty; }
.ueber-vintro__body p:last-child { margin: 0; }

/* Große Segment-Labels links oben (Gründer / Vorstand / Beirat) —
   Paul 07/2026: größer als die alten Grau-Labels, keine Versalien. */
.ueber-glabel {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  border-top: 1px solid var(--hair);
  padding-top: 18px;
  margin: 30px 0 16px;
}
.ueber-founder {
  display: grid;
  /* Foto-Spalte ≈ Breite einer Raster-Spalte (4er-Grid, Gap ~28px) */
  grid-template-columns: calc(25% - 21px) 1fr;
  gap: clamp(24px, 3vw, 44px);
  /* stretch: Foto beginnt bündig mit der Pille und schließt bündig
     mit der Textspalte ab (Paul 07/2026) */
  align-items: stretch;
  padding: 0 0 10px;
}
.ueber-founder .ueber-tphoto { height: 100%; }
.ueber-founder .ueber-tphoto img { height: 100%; aspect-ratio: auto; min-height: 220px; object-fit: cover; }
.ueber-founder .ueber-klapp { max-width: 640px; }
.ueber-tphoto { margin: 0; border-radius: 18px; overflow: hidden; background: var(--paper-2); }
.ueber-tphoto img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.ueber-tphoto--gross img { aspect-ratio: 3 / 4; }
.ueber-namepill {
  display: inline-block;
  padding: 7px 15px;
  border: 1px solid var(--ink);
  border-radius: 18px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  background: #fff;
  text-decoration: none;
  max-width: 100%;
  /* lange Namen/Adressen umbrechen statt abschneiden (Verifier 07/2026) */
  overflow-wrap: anywhere;
}
.ueber-tcard__role { font-size: 13.5px; color: var(--muted); margin-top: 8px; }
.ueber-team {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.2vw, 28px);
}
.ueber-tcard { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.ueber-tcard .ueber-namepill { margin-top: 14px; }
.ueber-tcard--mail {
  /* Anthrazit statt Rot (Sarah/Paul 08/2026): „Rotton zu knallig". */
  background: #2b2b2b;
  border-radius: 18px;
  padding: 20px;
  color: #fff;
}
.ueber-tcard--mail__icons { display: flex; gap: 8px; }
.ueber-icnbtn {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #fff;
  color: var(--red);
  display: grid;
  place-items: center;
  transition: transform .15s ease;
}
.ueber-icnbtn:hover { transform: scale(1.08); }
.ueber-tcard--mail__text { font-size: 14px; line-height: 1.5; color: #fff; margin: 16px 0 auto; text-wrap: pretty; }
.ueber-namepill--mail {
  border-color: #fff; background: #fff; color: var(--red); margin-top: 18px;
  font-size: 12.5px; padding: 6px 12px;
  /* kontrollierter Umbruch nur am <wbr> (nach dem @) — nie in der TLD */
  overflow-wrap: normal;
  word-break: keep-all;
}
.ueber-tcard--mail .ueber-tcard__role { color: rgba(255, 255, 255, 0.78); }
/* Werdegang & Auszeichnungen als ruhige Stationen-Zeile (statt Dropdown) —
   Zeilenabstand bewusst knapp (Platzsparen, Paul 07/2026) */
.ueber-stationen {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 72ch;
  text-wrap: pretty;
}
.ueber-stationen .sep { color: var(--muted-2); padding: 0 7px; }
.ueber-founder .ueber-lead__links { margin-top: 10px; margin-bottom: 0; }
/* Beirat-Pills: volle Segmentbreite, wie das Foto-Raster */
.ueber-beirat-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.ueber-beirat__caps { margin: 40px 0 12px; }

/* Mobile */
@media (max-width: 760px) {
  .ueber-heroimg { height: 60vh; min-height: 340px; margin-top: 8px; }
  .ueber-hero { grid-template-columns: 1fr; gap: 26px; padding-top: 36px; }
  /* Kennzahlen wie die Zahlen-Sektion der mobilen Landingpage: vollflächig
     roter Hintergrund, weiße Schrift, weiße Hairlines zwischen den Werten. */
  .ueber-stats {
    grid-template-columns: 1fr;
    gap: 0;
    border-bottom: none;
    background: var(--red);
    margin: 0 calc(50% - 50vw);
    padding: 40px 22px 20px;
  }
  .ueber-stat { border-top: 1px solid rgba(255, 255, 255, 0.30); padding: 18px 0 24px; }
  .ueber-stat__num { color: #fff; font-weight: 600; font-size: clamp(46px, 13vw, 64px); letter-spacing: -0.04em; }
  .ueber-stat__label { color: #fff; }
  .ueber-stat__sub { color: rgba(255, 255, 255, 0.72); }
  .ueber-intro { padding-bottom: 0; border-bottom: none; }
  .ueber-sp, .ueber-sp--flip { grid-template-columns: 1fr; gap: 20px; padding: 30px 0; }
  .ueber-sp--flip .ueber-sp__media { order: 0; }
  .ueber-lead { grid-template-columns: 1fr; gap: 24px; }
  .ueber-lead--kompakt { grid-template-columns: 1fr; }
  .ueber-lead--kompakt .ueber-lead__media { max-width: 235px; }
  .ueber-gremium { grid-template-columns: 1fr; gap: 34px; }
  .ueber-passe { max-width: 250px; }
  .ueber-roster__city { white-space: normal; max-width: 40vw; }
  .ueber-vintro { grid-template-columns: 1fr; gap: 16px; padding-bottom: 26px; }
  .ueber-founder { grid-template-columns: 1fr; }
  .ueber-founder .ueber-tphoto { max-width: 250px; height: auto; }
  .ueber-founder .ueber-tphoto img { aspect-ratio: 1 / 1; height: auto; min-height: 0; }
  .ueber-team { grid-template-columns: 1fr 1fr; }
  .ueber-lead__media { max-width: 340px; height: auto; min-height: 0; aspect-ratio: 3 / 4; }
  .ueber-lead__media img { position: absolute; }
  .ueber-board { grid-template-columns: 1fr 1fr; gap: 0 20px; }
  .ueber-kontakt { grid-template-columns: 1fr; gap: 30px; }
  .ueber-sp > *, .ueber-lead > *, .ueber-kontakt > * { min-width: 0; }
  .zl__head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .zl__arrows { padding-bottom: 0; }
  .zl__arrow { width: 44px; height: 44px; }
  .zl__detail { margin-left: 20px !important; max-width: none; padding-right: 4px; }
  .zl__dimg { width: min(280px, 88%); }
}

/* ═══ Mitglied-werden-Seite (Neuaufbau 08/2026, Inhalte aus dem Flyer) ═══ */
.member-benefits {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 14px 40px; max-width: 900px;
}
.member-benefits li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 16px; line-height: 1.5; color: var(--ink);
}
.member-benefits__check {
  flex: none; width: 24px; height: 24px; margin-top: 1px;
  border-radius: 50%; background: var(--red); color: #fff;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
}
.member-tiers {
  margin-top: 8px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.member-tier {
  border: 1px solid var(--hair); border-radius: var(--r-card);
  padding: 24px 22px; background: var(--paper-2);
  display: flex; flex-direction: column; gap: 4px;
}
.member-tier__name { font-size: 17px; font-weight: 600; margin: 0 0 8px; }
.member-tier__price { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.member-tier__suffix { font-size: 13px; color: var(--muted); line-height: 1.4; }
.member-cta { display: flex; flex-wrap: wrap; gap: 14px; }
.member-bank { margin: 22px 0 0; font-size: 13px; color: var(--muted); }
@media (max-width: 900px) {
  .member-benefits { grid-template-columns: 1fr; }
  .member-tiers { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .member-tiers { grid-template-columns: 1fr; }
}

/* ── home-cinematic.css ── */
/* home-cinematic.css — Pseudo-/Hover-Zustände + Keyframes für den Kino-Hero.
   Die Layout-/Farbstyles liegen inline in home-cinematic.jsx (aus Fable 1:1
   übernommen); hier steht nur, was Inline-Styles nicht können. */

/* Pulsierendes "+" im Ziel-Feld des Meilenstein-Staplers */
@keyframes msPulse {
  0%   { transform: scale(1);   opacity: 0.95; }
  50%  { transform: scale(1.1); opacity: 0.6; }
  100% { transform: scale(1);   opacity: 0.95; }
}

/* Spekulares Kantenlicht der Glas-Kapsel (Fable style-before) */
.hc-capsule::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(132deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.10) 30%, transparent 52%);
}

/* ── Hover-/Active-Zustände (Fable style-hover / style-active) ── */
.hc-cta:hover        { background: #df3013; transform: translateX(-50%) scale(1.05); box-shadow: 0 16px 40px rgba(254,1,0,0.30); }
.hc-cta:active       { transform: translateX(-50%) scale(0.97); }

.hc-znext:hover      { background: rgba(255,255,255,0.14); transform: translateX(-50%) scale(1.06); }
.hc-znext:active     { transform: translateX(-50%) scale(0.95); }

.hc-member-cta:hover { background: #df3013; transform: scale(1.04); }
.hc-member-cta:active{ transform: scale(0.97); }

.hc-stapler-cta:hover { background: #df3013; transform: scale(1.04); }
.hc-stapler-cta:active{ transform: scale(0.97); }

.hc-reset:hover      { background: #111114; color: #ffffff; }
.hc-reset:active     { transform: scale(0.93); }

.hc-weiter:hover     { background: rgba(255,255,255,0.95); transform: scale(1.06); }
.hc-weiter:active    { transform: scale(0.95); }

/* Engagement-Sektion (04): Links dimmen sanft beim Hover */
.hc-bandlink { transition: opacity .2s ease; }
.hc-bandlink:hover { opacity: 0.72; }

/* Reduced motion: kein Dauer-Puls */
@media (prefers-reduced-motion: reduce) {
  .hc-capsule [style*="msPulse"] { animation: none !important; }
}

/* ── home-neu.css ── */
/* ─────────────────────────────────────────────────────────────────────────────
   REDESIGN 08/2026 — Landingpage + Navigation (Sarah/Paul)
   Referenzen: Hauser & Wirth (Aufbau), David Zwirner (Nav + Slider + Typo-Logik),
   Louisiana (Ruhe). Systemregeln aus Figma (251125_SFKUK):
     Text #1D1D1F · Sekundär #86868B · Hairline #E8E8ED / Alt #D2D2D7 (0.5px)
     Akzent Navy #284158 (sparsam!) · Rot #FE0000 nur Marken-Punkt/CTA
     Pepe Mory · KEINE Rundungen · KEINE Mittelpunkte · Divider immer full-width
     CTAs: unterstrichen ODER Pfeil ↗ — keine zwei Pfeilrichtungen mehr.
   Alles unter .hn- gescoped; Subseiten bleiben vorerst im alten Look.
   ───────────────────────────────────────────────────────────────────────────── */

/* Pepe Mory (lokal, keine CDN-Requests) */
@font-face { font-family: "Pepe Mory"; src: url("assets/fonts/PepeMory-Extralight.woff2") format("woff2"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Pepe Mory"; src: url("assets/fonts/PepeMory-Book.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Pepe Mory"; src: url("assets/fonts/PepeMory-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Pepe Mory"; src: url("assets/fonts/PepeMory-RegularItalic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Pepe Mory"; src: url("assets/fonts/PepeMory-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

.hn-page {
  --hn-ink: #1D1D1F;
  --hn-ink2: #86868B;
  --hn-hair: #E8E8ED;
  --hn-hair2: #D2D2D7;
  --hn-navy: #284158;
  --hn-red: #FE0000;
  --hn-pad: clamp(20px, 4vw, 64px);
  font-family: "Pepe Mory", "Inter", -apple-system, sans-serif;
  color: var(--hn-ink);
  background: #fff;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.005em;
}
.hn-page *, .hn-page *::before, .hn-page *::after { border-radius: 0 !important; box-sizing: border-box; }
.hn-page img, .hn-page video { display: block; max-width: 100%; }
.hn-page a { color: inherit; text-decoration: none; }

/* Divider: IMMER full-bleed, ultradünn (Figma-Hairline) */
.hn-hr { border: 0; border-top: 0.5px solid var(--hn-hair); margin: 0; width: 100%; }

/* Kicker/Labels: graue Uppercase-Zeilen wie im Figma-Journal-Frame */
.hn-label {
  font-size: 12px; font-weight: 400; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--hn-ink2);
}

/* CTAs: unterstrichen oder ↗ (Navy). Mit .hn-page präfixiert, damit die Regel
   das globale a-Reset (.hn-page a) sicher schlägt — sonst fehlt der Unterstrich. */
.hn-page .hn-cta { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; font-size: 15px; cursor: pointer; }
.hn-page .hn-cta:hover { color: var(--hn-navy); }
.hn-page .hn-cta--arrow { text-decoration: none; display: inline-flex; align-items: center; gap: 7px; color: var(--hn-navy); }
.hn-page .hn-cta--arrow:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; color: var(--hn-navy); }

/* ── Navigation: Logo links, Punkte rechts (Zwirner) ───────────────────────── */
.hn-nav {
  position: sticky; top: 0; z-index: 400;
  background: #fff;
  border-bottom: 0.5px solid var(--hn-hair);
  transition: transform 0.28s ease;
}
/* Projekte-Seite: Nav taucht beim Runterscrollen ab (html[data-hnnav]) */
html[data-hnnav="hidden"] .hn-nav { transform: translateY(-100%); }
.hn-nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--hn-pad);
  gap: 24px;
}
.hn-nav__brand { display: flex; align-items: center; gap: 12px; }
/* 40-Jahre-Wort-Bild-Marke (Sarah 01.09.): ein SVG, ersetzt Icon + Wortmarke */
.hn-nav__brand img { height: 40px; width: auto; }
@media (max-width: 940px) { .hn-nav__brand img { height: 30px; } }
/* Externer Punkt (Museum): Pfeil ↗ zeigt das Verlassen der Seite an */
.hn-nav__link--extern { display: inline-flex; align-items: center; gap: 5px; }
.hn-nav__link--extern svg { color: var(--hn-ink2); }
.hn-nav__link--extern:hover svg { color: var(--hn-navy); }
/* Schriftbild bündig zum Quadrat: 3 Zeilen dürfen die Ober-/Unterkante des
   Logo-Rahmens NICHT überragen (Paul 08/2026) → 3 × 10.5 × 1.14 ≈ 36px. */
.hn-nav__wordmark {
  font-size: 10.5px; line-height: 1.14; font-weight: 600; letter-spacing: 0.01em;
}
.hn-nav__links { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 38px); }
.hn-nav__link {
  font-size: 15px; color: var(--hn-ink); cursor: pointer;
  background: none; border: 0; padding: 0; font-family: inherit;
}
.hn-nav__link:hover { color: var(--hn-navy); }
.hn-nav__link.ist-aktiv { color: var(--hn-ink2); }   /* aktive Seite im Headline-Grau */
/* Language-Switch: gleiche Größe, bewusst hellgrau, kein Icon */
.hn-nav__lang { color: var(--hn-ink2); }
.hn-nav__lang:hover { color: var(--hn-ink); }

/* Über-uns-Subnavigation: kein „Kastel" mehr, sondern ein full-width-Band,
   das nahtlos unter der Nav-Hairline aufklappt (Paul 08/2026). Rechtsbündig
   auf Höhe der Menüpunkte, unten wieder mit Hairline geschlossen. */
.hn-nav__drop { position: static; }
/* 1:1 wie die Projekte-Subnav (Paul 08/2026): eigener Trennstrich OBEN (das
   Panel überdeckt sonst die Nav-Hairline), gleiche Schriftgröße + Paddings. */
.hn-nav__panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff;
  border-top: 0.5px solid var(--hn-hair);
  border-bottom: 0.5px solid var(--hn-hair);
  padding: 12px var(--hn-pad); text-align: right;
  font-size: 14.5px; line-height: normal;
  display: none;
}
.hn-nav__drop:focus-within .hn-nav__panel,
.hn-nav__panel.is-open { display: block; }
/* Look wie die Projekte-Subnav (Paul 08/2026): gleiche Textgröße/Höhe,
   graue vertikale Trennstriche zwischen den Punkten. */
.hn-nav__panel a, .hn-nav__panel button {
  display: inline-block; padding: 0 0 0 clamp(16px, 2vw, 28px); margin: 0;
  font-size: 14.5px; color: var(--hn-ink2); background: none; border: 0; cursor: pointer; font-family: inherit;
}
.hn-nav__panel a + a, .hn-nav__panel a + button {
  border-left: 0.5px solid var(--hn-hair2);
  margin-left: clamp(16px, 2vw, 28px);
}
.hn-nav__panel a:hover, .hn-nav__panel button:hover { color: var(--hn-ink); }
/* „Mitglied werden" als einziges Signal im Stiftungsrot */
.hn-nav__panel a.ist-rot, .hn-nav__panel a.ist-rot:hover { color: var(--hn-red); }
.hn-nav__panel a.ist-rot:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* Mobile-Nav: schlichtes „Menü" in Grau, flaches Panel */
.hn-nav__toggle { display: none; }
@media (max-width: 940px) {
  .hn-nav__links { display: none; }
  .hn-nav__links.is-open {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0;
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-bottom: 0.5px solid var(--hn-hair);
    padding: 8px var(--hn-pad) 18px;
  }
  /* display:block: der Stiftung-Link steckt im Drop-Wrapper und wäre sonst
     inline — vertikales Padding zählte nicht, der Abstand wirkte kleiner. */
  .hn-nav__links.is-open .hn-nav__link { padding: 10px 0; font-size: 17px; display: block; }
  .hn-nav__links.is-open .hn-nav__drop { width: 100%; }
  .hn-nav__links.is-open .hn-nav__panel { position: static; display: block; border: 0; padding: 0 0 0 18px; text-align: left; }
  /* Desktop-Trennstriche zwischen den Punkten gehören NICHT ins Mobile-Panel */
  /* Grau heißt mobil nur „hier bist du" (Paul 15.10.): Unterpunkte schwarz wie
     die Hauptpunkte, „Mitglied werden" rot wie am Desktop, grau nur der
     Unterpunkt der aktuellen Seite. „Über uns" bleibt dann schwarz. */
  .hn-nav__links.is-open .hn-nav__panel a { display: block; margin: 0; padding: 8px 0; color: var(--hn-ink); border-left: 0; }
  .hn-nav__links.is-open .hn-nav__panel a.ist-rot { color: var(--hn-red); }
  .hn-nav__links.is-open .hn-nav__panel a.ist-aktiv { color: var(--hn-ink2); }
  .hn-nav__links.is-open .hn-nav__link.ist-aktiv.hat-sub-aktiv { color: var(--hn-ink); }
  .hn-nav__toggle { display: block; font-size: 15px; color: var(--hn-ink2); background: none; border: 0; font-family: inherit; cursor: pointer; }
}

/* ── Header-Slider (Zwirner-Aufbau: Medium groß, Textzeile darunter) ───────── */
.hn-hero { position: relative; }
.hn-hero__media { position: relative; height: min(74vh, 760px); overflow: hidden; background: #F5F5F7; }
.hn-hero__slide {
  position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s ease;
  pointer-events: none;
}
.hn-hero__slide.is-active { opacity: 1; pointer-events: auto; }
.hn-hero__slide img, .hn-hero__slide video { width: 100%; height: 100%; object-fit: cover; }
.hn-hero__text {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px;
  padding: 26px var(--hn-pad) 44px; align-items: start;
}
/* Zwei GLEICH große Zeilen (Zwirner, Paul 08/2026): Zeile 1 Anthrazit,
   Zeile 2 Grau — Hierarchie ausschließlich über die Farbe. */
.hn-hero__zeilen {
  margin: 0; font-size: clamp(28px, 3.8vw, 46px); line-height: 1.12;
  font-weight: 400; letter-spacing: -0.015em;
}
.hn-hero__z1 { color: var(--hn-ink); }
.hn-hero__z2 { color: var(--hn-ink2); }
/* Textblock schrumpft auf die längste Titelzeile — Ort links, Datum
   rechtsbündig an deren Endkante (Paul 08/2026). Wichtig: als Grid-Item wird
   inline-block „blockifiziert" → fit-content + justify-self:start nötig. */
.hn-hero__textblock { width: fit-content; max-width: 100%; justify-self: start; }
.hn-hero__meta {
  margin: 16px 0 0; font-size: 15px; color: var(--hn-ink2);
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 28px; flex-wrap: wrap;
}
.hn-hero__datum { text-align: right; }
.hn-hero__cta { margin-top: 18px; display: inline-block; }
/* Steuerung: dünne Kreise (Hairline), Zähler tabellarisch */
.hn-hero__nav { display: flex; align-items: center; gap: 12px; padding-top: 8px; }
.hn-hero__count { font-size: 13px; color: var(--hn-ink2); font-variant-numeric: tabular-nums; margin-right: 6px; }
.hn-hero__btn {
  width: 42px; height: 42px; border: 0.5px solid var(--hn-hair2); background: #fff;
  color: var(--hn-ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px !important; /* bewusste Ausnahme: runde Slider-Pfeile wie bei Zwirner */
}
.hn-hero__btn:hover { border-color: var(--hn-ink2); }
.hn-hero__btn svg { display: block; }

/* ── Sektionen ─────────────────────────────────────────────────────────────── */
.hn-section { padding: 54px var(--hn-pad) 72px; }
.hn-section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; margin-bottom: 34px;
  /* Sichtprüfung 29.10.: „Alle Veranstaltungen ↗" brach auf 390px in sich um.
     Der CTA bleibt einzeilig; reicht der Platz neben dem Titel nicht, rutscht
     er als Ganzes in die nächste Zeile (statt Schrift zu verkleinern). */
  flex-wrap: wrap; row-gap: 10px;
}
.hn-section__head .hn-cta { white-space: nowrap; }
@media (max-width: 560px) { .hn-section__head { column-gap: 12px; } }
.hn-section__title {
  margin: 0; font-size: clamp(22px, 2.4vw, 30px); font-weight: 400; letter-spacing: -0.01em;
}

/* Karten-Raster (Ausstellungen / Veranstaltungen / Neuigkeiten) */
.hn-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); }
.hn-card { display: block; }
.hn-card__img { aspect-ratio: 4 / 3; overflow: hidden; background: #F5F5F7; margin-bottom: 16px; }
.hn-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.hn-card:hover .hn-card__img img { transform: scale(1.02); }
.hn-card__kicker { margin: 0 0 8px; }
/* Kachel-Zweizeiler wie im Slider: gleiche Größe, Hierarchie nur über Grau.
   Zeilenabstände um 25% verringert (Paul 08/2026): 1.32→1.12 bzw. 1.55→1.16. */
.hn-card__title { margin: 0; font-size: 18px; line-height: 1.12; font-weight: 400; letter-spacing: -0.005em; }
.hn-card__sub { margin: 0; font-size: 18px; line-height: 1.12; font-weight: 400; color: var(--hn-ink2); }
.hn-card__meta { margin: 10px 0 0; font-size: 14.5px; color: var(--hn-ink2); line-height: 1.16; }
.hn-card__meta div { margin: 0; }

/* Bildplatzhalter mit Such-Icon (Paul 30.08.): hellgraue Fläche bleibt, das
   Icon ist dünn und leise (Hairline-Grau, Hover Headline-Grau). */
.hn-bildsuche {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: #F5F5F7; border: 0; padding: 0; margin: 0; cursor: pointer;
  color: var(--hn-hair2); transition: color 0.2s ease;
}
.hn-bildsuche:hover { color: var(--hn-ink2); }
/* Alt-CSS skaliert svg in Foto-Containern auf 100% (z. B. .pd-artist__photo
   svg) — die Lupe ist davon ausgenommen: IMMER 13px, nie gestreckt. */
.hn-bildsuche svg { width: 18px !important; height: 18px !important; object-fit: unset; }
.hn-card:hover .hn-card__title { color: var(--hn-navy); }

/* ── Mosaik für Projektreihen (Paul/Sarah 21.09., v3 seit 28.09.) ───────────
   Hellgraues Feld (#F5F5F7) mit Mini-Kacheln (4:3). pointer-events none: der
   Kachel-Klick bleibt der Aufklapper, im Hero gibt es keine Lightbox; nur die
   Punkte nehmen Klicks an. Hover nur ganz leise über die Deckkraft, KEINE
   Skalierung: die Fugen sprängen.
   KACHEL: das Feld füllt den 4:3-Rahmen (absolut, Größen-Container). Die
   Bühne ist ein 2 x 2-Raster, so groß wie Rahmen minus Rand es zulässt
   (--bw); alle Slides liegen übereinander in derselben Zelle und blenden per
   Deckkraft über. Die Punkte sitzen mittig im unteren Rand.
   HERO: normaler Fluss, mindestens die 16:9-Bühne, wächst mit den Reihen.
   Bis zwei Reihen ist die Breite so gedeckelt, dass sie in die Bühne passen
   (wie bisher); ab drei Reihen (hn-mosaik--hoch) volle Breite, das Feld wird
   höher. */
.hn-mosaik {
  --mg: clamp(10px, 3.2cqw, 14px);            /* Fuge zwischen den Minis */
  --mp: clamp(14px, 6cqw, 26px);              /* Rand ums Raster */
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: #F5F5F7; pointer-events: none;
  container-type: size;
}
.hn-mosaik__buehne {
  --bw: min(100cqw - 2 * var(--mp), (100cqh - 2 * var(--mp) - var(--mg)) * 4 / 3 + var(--mg));
  width: var(--bw); height: calc((var(--bw) - var(--mg)) * 3 / 4 + var(--mg));
  display: grid;
}
/* Z-Verlauf (Paul 28.09.): die Minis füllen von links oben nach rechts
   unten, eine unvollständige letzte Reihe steht links (3 = 2 oben + 1 unten
   links), nicht mittig. Die Bühne selbst bleibt mittig im Feld. Ausnahme:
   eine Reihe mit insgesamt nur zwei Bildern (eine Zeile) steht senkrecht
   mittig, oben angeklebt wirkte die Kachel leer. */
.hn-mosaik__slide {
  grid-area: 1 / 1;
  display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; gap: var(--mg);
  opacity: 0; transition: opacity 0.9s ease;
}
.hn-mosaik--kachel.hn-mosaik--n2 .hn-mosaik__slide { align-content: center; }
.hn-mosaik__slide.ist-aktiv { opacity: 1; }
.hn-mosaik__item {
  flex: 0 0 calc((100% - var(--mg)) / 2);
  aspect-ratio: 4 / 3; min-width: 0; overflow: hidden; background: #E8E8EA;
}
.hn-mosaik__item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0.92; transition: opacity 0.3s ease;
}
.hn-card:hover .hn-mosaik__item img { opacity: 1; }
/* Kachel-Zoom (.hn-card:hover .hn-card__img img) gilt hier NICHT */
.hn-card:hover .hn-card__img .hn-mosaik img { transform: none; }
/* Punkte: Anzeige + Auswahl der Slides. Kleine Kreise im unteren Rand,
   aktiver dunkler; die Trefferfläche ist größer als der Punkt. */
.hn-mosaik__punkte {
  position: absolute; left: 0; right: 0; bottom: calc(var(--mp) / 2);
  transform: translateY(50%);
  display: flex; justify-content: center; pointer-events: auto;
}
.hn-mosaik__punkt { padding: 5px 4px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hn-page .hn-mosaik__punkt i {   /* rund trotz Radius-Reset (.hn-page *) */
  display: block; width: 5px; height: 5px; border-radius: 999px !important;
  background: var(--hn-hair2); transition: background-color 0.3s ease;
}
.hn-page .hn-mosaik__punkt.ist-aktiv i { background: var(--hn-ink2); }
@media (hover: hover) { .hn-page .hn-mosaik__punkt:hover i { background: #A1A1A6; } }
@media (prefers-reduced-motion: reduce) { .hn-mosaik__slide { transition: none; } }

/* Hero der Mutter-Detailseite: alle Töchter, Spalten per Klasse. */
.hn-mosaik--hero {
  --mg: clamp(12px, 1.6vw, 24px);
  --mp: clamp(20px, 5vw, 56px);
  --sp: 3;
  position: relative; inset: auto; container-type: normal;
  min-height: min(56.25vw, 88vh); padding: var(--mp);
}
.hn-mosaik--s2 { --sp: 2; }
.hn-mosaik--s3 { --sp: 3; }
.hn-mosaik--s4 { --sp: 4; }
.hn-mosaik--hero .hn-mosaik__buehne {
  display: block; height: auto;
  width: min(100%, calc(var(--sp) * (min(56.25vw, 88vh) - 2 * var(--mp) - var(--mg)) * 2 / 3 + (var(--sp) - 1) * var(--mg)));
}
.hn-mosaik--hero.hn-mosaik--hoch .hn-mosaik__buehne { width: 100%; }
/* Nur eine Reihe (2 oder 3 Töchter, Sarah/Paul 05.10.: „nur zwei kleine
   Bilder"): die Minis wachsen, bis die Reihe die Bühnenhöhe oder die volle
   Breite füllt, statt für zwei Reihen bemessen zu sein. Bei drei Bildern
   begrenzt die Breite, dann richtet sich die Höhe nach dem Inhalt. */
.hn-mosaik--hero.hn-mosaik--r1 .hn-mosaik__buehne {
  width: min(100%, calc(var(--sp) * (min(56.25vw, 88vh) - 2 * var(--mp)) * 4 / 3 + (var(--sp) - 1) * var(--mg)));
}
.hn-mosaik--hero.hn-mosaik--r1.hn-mosaik--n3 { min-height: 0; }
/* Vier Spalten (ab sieben Töchtern) füllen schon die volle Breite, die 16:9-
   Mindesthöhe ließe nur leeres Grau über und unter dem Raster: Höhe hier
   allein aus Inhalt + Rand. */
.hn-mosaik--hero.hn-mosaik--s4 { min-height: 0; }
.hn-mosaik--hero .hn-mosaik__slide { opacity: 1; transition: none; }
.hn-mosaik--hero .hn-mosaik__item { flex-basis: calc((100% - (var(--sp) - 1) * var(--mg)) / var(--sp)); }
@media (max-width: 700px) {
  .hn-mosaik--hero.hn-mosaik--s4 { --sp: 3; }
}

/* Feature (MKM / Kunstprojekt Bonn): Text + großes Bild */
.hn-feature {
  display: grid; grid-template-columns: minmax(280px, 5fr) 7fr;
  gap: clamp(28px, 4vw, 72px); align-items: center;
  padding: 64px var(--hn-pad);
}
.hn-feature--flip { grid-template-columns: 7fr minmax(280px, 5fr); }
.hn-feature__text { max-width: 46ch; }
.hn-feature--flip .hn-feature__text { order: 2; justify-self: end; }
.hn-feature--flip .hn-feature__media { order: 1; }
.hn-feature__title { margin: 14px 0 0; font-size: clamp(26px, 3vw, 38px); line-height: 1.12; font-weight: 400; letter-spacing: -0.015em; }
.hn-feature__body { margin: 18px 0 0; font-size: 16px; line-height: 1.6; color: var(--hn-ink); font-weight: 300; }
.hn-feature__ctas { margin-top: 22px; display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.hn-feature__media { overflow: hidden; background: #F5F5F7; }
.hn-feature__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }

/* Neuigkeiten: reine Text-Spalten (wie H&W „Ursula") */
.hn-news__title { margin: 0; font-size: 18px; line-height: 1.35; font-weight: 600; }
.hn-news__body {
  margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--hn-ink2); font-weight: 300;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.hn-news__date { margin: 12px 0 0; font-size: 13.5px; color: var(--hn-ink2); }
.hn-card--news:hover .hn-news__title { color: var(--hn-navy); }

/* ── Footer ────────────────────────────────────────────────────────────────── */
/* Viel Luft zur letzten Sektion (min. 128px, Paul 08/2026); der Trennstrich
   vor der Legal-Zeile läuft als full-bleed-hr über die ganze Breite. */
.hn-footer { padding: 0; }
/* Fünfte Spalte „Spenden" (Audit 12.11.): etwas breiter, damit die IBAN in
   einer Zeile steht; die Marke gibt dafür Breite ab. */
/* Spaltenabstand 10 % enger (Paul 12.11.), die gewonnene Breite geht an die
   Marke: 1.29fr statt 1.2fr hält die übrigen Spalten bei 1440 px gleich breit. */
.hn-footer__grid {
  display: grid; grid-template-columns: minmax(180px, 1.29fr) repeat(3, minmax(130px, 1fr)) minmax(250px, 1.5fr);
  column-gap: clamp(21.6px, 2.7vw, 50.4px);
  row-gap: clamp(24px, 3vw, 56px);
  padding: 204px var(--hn-pad) 52px;   /* +50% Luft nach oben (Paul 08/2026) */
}
.hn-footer__iban { white-space: nowrap; font-variant-numeric: tabular-nums; }
.hn-footer__zus { white-space: nowrap; }
.hn-footer__notiz { margin: 14px 0 0; max-width: 34ch; font-size: 13px; line-height: 1.5; color: var(--hn-ink2); }
/* Unter 1180 px reichen fünf Spalten nicht: drei Spalten (Marke, Entdecken,
   Stiftung / Kontakt, Spenden), unter 940 px zwei mit Spenden über die volle
   Breite (Regel im Responsive-Block unten). */
@media (max-width: 1180px) {
  .hn-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Kontakt im Fünf-Spalten-Raster ein Stück nach links (Paul 12.11.): die Texte
   sind schmaler als die Spalte, der Block stand sonst sichtbar näher an
   „Spenden“ als an „Stiftung“. 20 px bei 1440 px. */
@media (min-width: 1181px) {
  /* rechts derselbe Betrag dazu: die Spalte bleibt gleich breit, der Umbruch
     der Anschrift ändert sich nicht */
  .hn-footer__kontakt { --hn-ruck: clamp(16px, 1.4vw, 27px); margin-left: calc(-1 * var(--hn-ruck)); margin-right: var(--hn-ruck); }
}
.hn-footer__brand img { height: 40px; }
.hn-footer__brand .hn-nav__wordmark { margin-top: 14px; }
/* Spalten-Überschriften: keine Versalien, doppelter Abstand zur Liste,
   gleiche Größe wie die Listen-Links darunter (14.5px, Paul 08/2026) */
.hn-footer h4 { margin: 0 0 30px; font-size: 14.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--hn-ink2); }
.hn-footer ul { list-style: none; margin: 0; padding: 0; }
.hn-footer li { margin: 0 0 9px; }
.hn-footer a, .hn-footer button { font-size: 14.5px; color: var(--hn-ink); background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; }
.hn-footer a:hover, .hn-footer button:hover { color: var(--hn-navy); }
.hn-footer__addr { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--hn-ink2); font-style: normal; }
.hn-footer__legal {
  padding: 18px var(--hn-pad) 40px;
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  /* ohne Versalien (Paul 12.11.): normale Schreibweise wie im übrigen Footer */
  font-size: 13px; color: var(--hn-ink2);
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 940px) {
  .hn-grid3 { grid-template-columns: 1fr; gap: 40px; }
  .hn-feature, .hn-feature--flip { grid-template-columns: 1fr; padding: 44px var(--hn-pad); }
  .hn-feature--flip .hn-feature__text { order: 1; justify-self: start; }
  .hn-feature--flip .hn-feature__media { order: 2; }
  .hn-hero__media { height: 58vh; }
  .hn-hero__text { grid-template-columns: 1fr; }
  .hn-hero__nav { order: -1; justify-content: flex-end; }
  .hn-footer__grid { grid-template-columns: 1fr 1fr; }
  .hn-footer__spenden { grid-column: 1 / -1; }
  .hn-section { padding: 40px var(--hn-pad) 56px; }
}
@media (max-width: 560px) {
  .hn-footer__grid { grid-template-columns: 1fr; }
  .hn-nav__wordmark { display: none; }
}

/* ── Newsletter auf der Landingpage (Sarah 01.09.) ─────────────────────────── */
.hn-newsletter__text { margin: 0 0 24px; font-size: 16px; font-weight: 300; max-width: 52ch; }
.hn-newsletter__form { display: flex; gap: 32px; align-items: flex-end; flex-wrap: wrap; }
.hn-newsletter__form input {
  width: min(420px, 100%); border: 0; border-bottom: 0.5px solid var(--hn-hair2);
  padding: 6px 0; margin: 0; font-family: inherit; font-size: 16px; font-weight: 300;
  color: var(--hn-ink); background: none; outline: none; border-radius: 0;
}
.hn-newsletter__form input::placeholder { color: var(--hn-ink2); }
.hn-newsletter__form input:focus { border-bottom-color: var(--hn-ink2); }
.hn-newsletter__form button { background: none; border: 0; padding: 0 0 6px; font-family: inherit; }
/* „Anmelden" auf einer Linie mit dem Feld (Paul 15.10.): Unterstrich als Rand
   mit denselben 6 px Abstand wie im Feld statt Text-Unterstreichung, so liegen
   Schrift und Linie auf der Höhe des Felds. */
.hn-page .hn-newsletter__form .hn-cta { text-decoration: none; border-bottom: 1px solid currentColor; }

/* ── Statischer Stiftungstext unterm Slider (Sarah/Paul 02.09.) ───────────── */
.hn-intro__gross {
  margin: 0; max-width: 34em;
  font-size: clamp(20px, 2.2vw, 28px); line-height: 1.42;
  font-weight: 300; letter-spacing: -0.01em;
}
.hn-intro__klein { margin: 24px 0 0; max-width: 62ch; font-size: 16px; line-height: 1.6; font-weight: 300; }

/* Hero: Titel klickbar — neutrale Farben bleiben, nur der Zeiger zeigt es */
.hn-hero__titellink { display: inline-block; color: inherit; }

/* Footer-Marke: 40-Jahre-Logo (02.09.) */
.hn-footer__brand img { height: 42px; width: auto; }

/* ── Bildnachweis unterm Hero (Sarah 20.10.: Credits unter Künstlerfotos) ──
   Projekt-, Veranstaltungs- und Neuigkeiten-Hero: kleine graue Zeile „© Name"
   rechtsbündig direkt unter dem Bild, gleiche Größe wie die Galerie-Credits
   (.pd-credit, 11.5 px). Hier statt in projekt-detail-neu.css, weil der
   Neuigkeiten-Artikel nur das Startseiten-Bündel lädt. */
.hn-page .pdz-credit {
  margin: 0; padding: 7px var(--hn-pad) 0;
  font-size: 11.5px; line-height: 1.4; font-style: normal; text-align: right;
  color: var(--hn-ink2);
}

/* ── Vorschau-Banner (Paul 21.09.): schmale fixe Leiste unten, Weiß auf Ink ──
   Liegt außerhalb von .hn-page (app.jsx rendert sie neben der Route), darum
   Farben + Schrift ausgeschrieben statt über die Tokens. z 900: über Nav (400)
   und Subnav (380), unter Vollbild-Overlays (Anhang-Viewer, Lightbox). */
.hn-vorschau {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  padding: 8px clamp(20px, 4vw, 64px) calc(8px + env(safe-area-inset-bottom, 0px));
  background: #1D1D1F; color: #fff;
  font-family: "Pepe Mory", "Inter", -apple-system, sans-serif;
  font-size: 12.5px; line-height: 1.4; letter-spacing: 0.01em; text-align: center;
}

/* ── seiten-neu.css ── */
/* ─────────────────────────────────────────────────────────────────────────────
   REDESIGN 08/2026 — Unterseiten (Projekte, Presse) + Über-uns-Restyle.
   Gleiche Systemregeln wie home-neu.css (Pepe Mory, Hairlines, keine Rundungen).
   ───────────────────────────────────────────────────────────────────────────── */

/* Großer Seitentitel links (Zwirner „Exhibitions") */
.hn-seitentitel {
  margin: 6px 0 34px;
  font-size: clamp(34px, 4.6vw, 58px); line-height: 1.05;
  font-weight: 400; letter-spacing: -0.02em;
}
.hn-leer { color: var(--hn-ink2); font-size: 16px; max-width: 52ch; }
/* padding 0: die Browser-Vorgabe für Knöpfe (6px seitlich) rückte „Mehr
   anzeigen" aus der Flucht der Liste (Sichtprüfung 29.10.) */
.hn-mehr { margin-top: 34px; padding: 0; background: none; border: 0; font-family: inherit; color: var(--hn-ink); }

/* ── Subnav (Zwirner): Tabs links der Mitte rechts, Strich, Filter ─────────── */
.hn-subnav {
  position: sticky; top: 0; z-index: 380;
  background: #fff; border-bottom: 0.5px solid var(--hn-hair);
  transition: top 0.28s ease;
}
/* Weißer „Schurz" über dem Band (Paul 31.08.): Nav (transform) und Band (top)
   animieren getrennt und laufen bei schnellem Scrollen kurz auseinander — die
   Fuge dazwischen bleibt so immer weiß gedeckt statt den Seiteninhalt zu
   zeigen. Liegt unter der Nav (z 400 > 380), stört also nie. */
.hn-subnav::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 90px;
  background: #fff;
}
/* Haupt-Nav sichtbar → Subnav klebt direkt darunter; Nav abgetaucht → oben. */
html[data-hnnav="shown"] .hn-subnav { top: 64px; }
html[data-hnnav="hidden"] .hn-subnav { top: 0; }
.hn-subnav__row {
  display: flex; align-items: center; justify-content: flex-end;
  gap: clamp(16px, 2vw, 28px); padding: 12px var(--hn-pad);
}
.hn-subnav__tabs { display: flex; gap: clamp(16px, 2vw, 28px); }
.hn-subnav__tab {
  background: none; border: 0; padding: 0; font-family: inherit;
  font-size: 14.5px; color: var(--hn-ink2); cursor: pointer;
}
.hn-subnav__tab:hover { color: var(--hn-ink); }
.hn-subnav__tab.is-active { color: var(--hn-ink); }
.hn-subnav__right { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); }
.hn-subnav__strich { width: 0.5px; height: 18px; background: var(--hn-hair2); }

/* Filter-Ausklapper: ruhige Textzeilen, keine Chips, keine Kästen */
.hn-filter { padding: 6px var(--hn-pad) 20px; border-top: 0.5px solid var(--hn-hair); }
/* Beschriftung als eigene Spalte (Sichtprüfung 29.10.): die Optionen brechen
   in ihrer Spalte um und laufen bündig untereinander weiter, statt unter
   „Kategorie"/„Ort"/„Anlass" zu rutschen. Spaltenbreite wie bisher 125px +
   8px Abstand (Paul 08/2026), am Handy schmaler. */
.hn-filter__gruppe {
  display: grid; grid-template-columns: 133px minmax(0, 1fr); align-items: baseline;
  padding: 10px 0 2px;
}
.hn-filter__optionen {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 10px clamp(14px, 1.8vw, 24px); min-width: 0;
}
/* Filter-Labels ohne Versalien (Paul 08/2026) */
.hn-filter__gruppe .hn-label { text-transform: none; letter-spacing: 0; font-size: 13.5px; }
@media (max-width: 560px) {
  .hn-filter__gruppe { grid-template-columns: 92px minmax(0, 1fr); }
}
.hn-filter__opt {
  background: none; border: 0; padding: 0; font-family: inherit;
  font-size: 14.5px; color: var(--hn-ink2); cursor: pointer;
}
.hn-filter__opt:hover { color: var(--hn-ink); }
.hn-filter__opt.is-active {
  color: var(--hn-ink);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}

/* Suche im Band (Paul 29.08.): schlichte Eingabezeile unter der Subnav,
   Treffer live ab dem ersten Buchstaben. Kein Kasten, keine Rundung. */
.hn-suche { padding: 14px var(--hn-pad) 18px; border-top: 0.5px solid var(--hn-hair); }
.hn-suche__input {
  width: 100%; max-width: 560px; margin: 0; padding: 0;
  border: 0; background: none; outline: none;
  -webkit-appearance: none; appearance: none; border-radius: 0;
  font-family: inherit; font-size: 16px; font-weight: 300; color: var(--hn-ink);
}
.hn-suche__input::placeholder { color: var(--hn-ink2); }
.hn-suche__input::-webkit-search-cancel-button { -webkit-appearance: none; }
/* Alt-Archiv-Treffer: ruhige Hairline-Zeilen unter dem Kachel-Grid */
.hn-suche__archivtitel { margin: 64px 0 0; }
.hn-suche__archivtitel.ist-oben { margin-top: 0; }
.hn-suche__archiv { list-style: none; margin: 14px 0 0; padding: 0; }
.hn-suche__archiv li { border-bottom: 0.5px solid var(--hn-hair); }
.hn-suche__archiv li:first-child { border-top: 0.5px solid var(--hn-hair); }
.hn-suche__archiv a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
  padding: 14px 0; font-size: 16px; font-weight: 300;
}
.hn-suche__archiv a:hover .hn-suche__atitel { color: var(--hn-navy); }
.hn-suche__ameta { font-size: 13.5px; color: var(--hn-ink2); white-space: nowrap; }
@media (max-width: 480px) {
  /* Band darf umbrechen: 3 Tabs + Filter + Suche passen sonst nicht in 320px */
  .hn-subnav__row { flex-wrap: wrap; gap: 10px 14px; }
  .hn-subnav__tabs { gap: 14px; }
  .hn-subnav__right { gap: 14px; }
  /* Hairline zwischen den Zeilen (Paul 23.09., Screenshot 390px): nur wenn
     Filter/Suche wirklich in Zeile 2 rutschen (Projekte ja, Neuigkeiten mit
     zwei Tabs nicht). Der Strich hängt 12px über .hn-subnav__right; steht die
     Gruppe in Zeile 1, liegt er über der Zeilen-Oberkante und das overflow
     der Zeile schneidet ihn weg. Dafür wandern 8 der 12px Oberluft von der
     Zeile auf die Subnav (4px bleiben für Fokusrahmen), die Zeilenfuge wächst
     auf 24px. Seitlich per ±100vw, von der Zeile auf volle Breite gekappt. */
  .hn-subnav { padding-top: 8px; }
  .hn-subnav__row { padding-top: 4px; row-gap: 24px; overflow: hidden; }
  .hn-subnav__right { position: relative; }
  .hn-subnav__right::before {
    content: ""; position: absolute; top: -12.25px; left: -100vw; right: -100vw;
    height: 0.5px; background: var(--hn-hair); pointer-events: none;
  }
}

/* Projekte-Grid: gleiche Karten wie Landing, mehr Vertikal-Rhythmus */
.hn-grid3--seite { row-gap: clamp(44px, 5vw, 72px); }

/* ── Mutterprojekte (Paul 30.08.): Kachel klappt ihre Töchter auf ──────────
   Kennzeichnung rechtsbündig auf Meta-Höhe: Zeile 1 „Projektreihe", Zeile 2
   Zähler + Winkel (Paul 30.08., Screenshot). Kein Signal, kein Schatten. */
.hn-card__meta--mutter {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 18px;
}
.hn-card__reihe { text-align: right; white-space: nowrap; }
.hn-card__reihe svg { margin-left: 6px; vertical-align: -0.5px; transition: transform 0.22s ease; }
.hn-card--mutter.ist-offen .hn-card__reihe { color: var(--hn-ink); }
/* Bund: volle Grid-Breite; die Hairlines laufen per Negativ-Offset über die
   KOMPLETTE Displaybreite (Paul 30.08.: Divider ohne Seitenabstand). */
.hn-bund {
  grid-column: 1 / -1; position: relative;
  padding: 48px 0 72px;   /* mehr Weißraum oben/unten (Paul 31.08.) */
  animation: hnBundAuf 0.25s ease;
  /* Ziel des Aufklapp-Scrolls (Paul 28.09.): die obere Haarlinie landet knapp
     unter der klebenden Subnav (Haupt-Nav taucht beim Runterscrollen ab). */
  scroll-margin-top: 56px;
}
@media (max-width: 480px) { .hn-bund { scroll-margin-top: 104px; } }
/* Tochter-Kacheln: deutlich mehr Luft zwischen den Zeilen (Paul 31.08.) */
.hn-bund .hn-grid3 { row-gap: clamp(64px, 7vw, 104px); }
.hn-bund::before, .hn-bund::after {
  content: ""; position: absolute;
  left: calc(-1 * var(--hn-pad)); right: calc(-1 * var(--hn-pad));
  height: 0.5px; background: var(--hn-hair);
}
.hn-bund::before { top: 0; }
.hn-bund::after { bottom: 0; }
@keyframes hnBundAuf { from { opacity: 0; transform: translateY(-6px); } }
/* Label in Sektionstitel-Größe wie „Bilder von der Ausstellung" (Paul 31.08.) */
.hn-bund__label {
  margin: 0 0 44px;
  font-size: clamp(22px, 2.4vw, 30px); font-weight: 400; letter-spacing: -0.01em;
}

/* Mosaik in der Mutterkachel (Paul 21.09.): Rahmen für das absolute
   .hn-mosaik (v2 in home-neu.css, damit die Höhe sicher aus der aspect-ratio
   der Kachel kommt). */
.hn-card--mutter .hn-card__img { position: relative; }

/* Infokachel im Bund (Paul/Sarah 21.09.): die Extra-Kachel zur Projektseite
   sah mit Motiv aus wie ein weiteres Teilprojekt. Jetzt ein hellgraues Feld
   ohne Bild, oben links der Titel in Dunkelgrau und „Über das Projekt" im
   Sekundärgrau; darunter nur der CTA. Hover wie bei .hn-card: Titel wird
   navy, kein Bild-Zoom. */
.hn-infokachel {
  display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;
  padding: clamp(16px, 8%, 28px); background: #F5F5F7;
}
.hn-infokachel__titel { font-size: 17px; line-height: 1.3; letter-spacing: -0.005em; color: #3A3A3C; transition: color 0.2s ease; }
.hn-infokachel__sub { margin-top: 4px; font-size: 15px; line-height: 1.3; color: var(--hn-ink2); }
.hn-bund__mutter:hover .hn-infokachel__titel { color: var(--hn-navy); }
/* Kurzbeschreibung in der Karte (Paul 29.09.), auf sechs Zeilen gekappt,
   damit die 4:3-Karte nie überläuft; voller Text auf der Projektseite. */
.hn-infokachel__text {
  margin-top: 18px; font-size: 14.5px; line-height: 1.45; color: #3A3A3C;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden;
}
@media (min-width: 1300px) { .hn-infokachel__text { -webkit-line-clamp: 8; } }
@media (max-width: 480px) { .hn-infokachel__text { -webkit-line-clamp: 5; font-size: 14px; } }

/* ── Im Spotlight (Paul 11.11., Wunsch von Walter Smerling) ──────────────────
   Tab Vergangen: oben die im CMS markierten Projekte in größeren Karten (zwei
   Spalten statt drei; dieselbe Karte wie überall: Bild 4:3, Zweizeiler, Zeit
   und Ort, die Zeilen eine Stufe größer), darunter eine Haarlinie über die
   volle Breite und die Liste mit eigener Überschrift. Bis 940 px untereinander
   wie die übrigen Karten. scroll-margin-top: Ziel des Sprungs
   (#projekte/vergangen/spotlight) knapp unter der klebenden Subnav, Werte wie
   .hn-bund. Überschriften in Sektionstitel-Größe wie .hn-bund__label. */
.hn-spotlight {
  position: relative; scroll-margin-top: 56px;
  padding: 0 0 clamp(56px, 6vw, 88px); margin: 0 0 clamp(44px, 5vw, 64px);
}
@media (max-width: 480px) { .hn-spotlight { scroll-margin-top: 104px; } }
.hn-spotlight::after {
  content: ""; position: absolute; bottom: 0;
  left: calc(-1 * var(--hn-pad)); right: calc(-1 * var(--hn-pad));
  height: 0.5px; background: var(--hn-hair);
}
.hn-spotlight__titel {
  margin: 0 0 clamp(24px, 3vw, 36px);
  font-size: clamp(22px, 2.4vw, 30px); font-weight: 400; letter-spacing: -0.01em;
}
.hn-spotlight__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(44px, 5vw, 72px) clamp(20px, 3vw, 44px);
}
.hn-spotlight__grid .hn-card__title,
.hn-spotlight__grid .hn-card__sub { font-size: clamp(18px, 1.6vw, 22px); }
.hn-spotlight__grid .hn-card__meta { font-size: 15px; }
/* Mosaik der Projektreihen braucht den Rahmen wie die Mutterkachel */
.hn-spotlight__karte .hn-card__img { position: relative; }
/* Suchtreffer „Im Spotlight": Infokachel, Hover wie die im Bund */
.hn-spotlight__treffer:hover .hn-infokachel__titel { color: var(--hn-navy); }
@media (max-width: 940px) {
  .hn-spotlight__grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ── Presse ────────────────────────────────────────────────────────────────── */
.hn-presse__intro {
  display: grid; grid-template-columns: repeat(2, minmax(220px, 420px));
  gap: clamp(24px, 4vw, 72px);
}
.hn-presse__block { margin: 20px 0 0; font-size: 16px; line-height: 1.6; }
/* Mikro-Überschrift: kein Versal, Headline-Grau (Paul 29.08.) */
.hn-mikro { margin: 0; font-size: 14px; color: var(--hn-ink2); }
.hn-presse__liste { list-style: none; margin: 0; padding: 0; }
.hn-presse__zeile {
  display: grid; grid-template-columns: 110px minmax(0, 1fr) auto;
  gap: 18px; align-items: baseline;
  padding: 16px 0; border-bottom: 0.5px solid var(--hn-hair);
}
.hn-presse__zeile:first-child { border-top: 0.5px solid var(--hn-hair); }
.hn-presse__jahr { color: var(--hn-ink2); font-size: 14px; font-variant-numeric: tabular-nums; }
.hn-presse__was { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hn-presse__projekt { font-size: 16px; }
.hn-presse__projekt:hover { color: var(--hn-navy); }
.hn-presse__label { font-size: 13.5px; color: var(--hn-ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Presse-Seite mit drei Blöcken (Kontakt, Pressematerial, Hinweis; Audit
   12.11.), unter 1100 px zwei Spalten, ab 700 px wie alle Intros eine. */
.hn-presse__intro--drei { grid-template-columns: repeat(3, minmax(200px, 360px)); }
@media (max-width: 1100px) {
  .hn-presse__intro--drei { grid-template-columns: repeat(2, minmax(220px, 420px)); }
}
/* Spendenbescheinigung unter der Bankverbindung („Mitglied werden") */
.hn-presse__block.mg-spendenhinweis { margin-top: 12px; max-width: 40ch; font-size: 14px; line-height: 1.5; color: var(--hn-ink2); }
@media (max-width: 700px) {
  .hn-presse__intro, .hn-presse__intro--drei { grid-template-columns: 1fr; }
  .hn-presse__zeile { grid-template-columns: 1fr auto; }
  .hn-presse__jahr { grid-column: 1 / -1; }
}

/* ── Über uns (Neubau 08/2026 — ersetzt den früheren Override-Layer) ───────── */
.un-kopf { padding: 34px var(--hn-pad) 26px; }
.un-hero { margin: 0; background: #F5F5F7; }
.un-hero img { width: 100%; height: min(72vh, 740px); object-fit: cover; display: block; }

.un-intro__lead { margin: 0; font-size: clamp(19px, 2vw, 24px); line-height: 1.45; font-weight: 300; max-width: 62ch; }
.un-intro__body { margin: 22px 0 0; font-size: 16px; line-height: 1.6; font-weight: 300; max-width: 68ch; }
.un-intro__body p { margin: 0 0 14px; }
/* Zwischenzeile auf der Mitglied-Seite (Sarah 22.09.): zweiter Absatzblock */
.un-intro__lead.mg-zwischen { margin-top: 44px; }
.un-intro__body a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.un-ctas { margin-top: 26px; display: flex; gap: 32px; flex-wrap: wrap; }

/* Schwerpunkte ohne eigene Headline — Luftpolster oben, weil viel Text folgt
   (Paul 28.08.). Hairlines zwischen den vier Abschnitten laufen auf ALLEN
   Größen über die volle Displaybreite (Paul 31.08.; vorher nur mobil —
   die Blöcke tragen ihr Padding selbst, der Strich reicht Kante zu Kante). */
.un-features { padding-top: clamp(32px, 5vw, 64px); }
.un-features .hn-feature + .hn-feature { border-top: 0.5px solid var(--hn-hair); }

/* Meilensteine: ruhige Jahres-Liste mit Hairlines */
.un-zeit { list-style: none; margin: 0; padding: 0; }
.un-zeit__zeile {
  display: grid; grid-template-columns: 110px minmax(0, 1fr);
  gap: 18px; align-items: baseline;
  padding: 16px 0; border-bottom: 0.5px solid var(--hn-hair);
}
.un-zeit__zeile:first-child { border-top: 0.5px solid var(--hn-hair); }
.un-zeit__jahr { color: var(--hn-ink2); font-size: 14px; font-variant-numeric: tabular-nums; }
.un-zeit__was { display: flex; flex-direction: column; gap: 2px; }
.un-zeit__label { font-size: 16px; }
.un-zeit__titel { font-size: 13.5px; color: var(--hn-ink2); }

/* Zeitstrahl: das alte Drag-Element im neuen Gewand (Paul 25.08.) —
   Kicker weg, Titel + Pfeile + Akzente auf Systemlinie. */
.un-zl .zl { padding: 54px var(--hn-pad) 64px; }
.un-zl .ueber-kick { display: none; }   /* roter Punkt-Kicker: im neuen System obsolet */
.un-zl .section__title {
  font-family: inherit; font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 400; letter-spacing: -0.01em; color: var(--hn-ink);
}
.un-zl .zl__arrow {
  width: 42px; height: 42px; border-radius: 999px !important;
  background: #fff; border: 0.5px solid var(--hn-hair2); color: var(--hn-ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.un-zl .zl__arrow:hover:not(:disabled) { background: #fff; border-color: var(--hn-ink2); }
.un-zl .zl__arrow:disabled { opacity: 0.35; }
.un-zl .zl__year.is-active .zl__label { color: var(--hn-navy); }
.un-zl .zl__wrap:focus-visible { box-shadow: 0 0 0 1px var(--hn-ink2); border-radius: 0; }
.un-zl .zl__dtitle { font-family: inherit; font-weight: 400; }
.un-zl .zl__dimg { box-shadow: none; }   /* kein Drop-Shadow (Paul 25.08.) */

/* Menschen */
.un-vintro { display: grid; grid-template-columns: minmax(260px, 5fr) 7fr; gap: clamp(24px, 4vw, 72px); align-items: start; }
.un-vintro .un-intro__body { margin-top: 4px; }   /* auf Statement-Höhe (Paul 29.08.) */
.un-vintro__statement { margin: 0; font-size: clamp(19px, 2.2vw, 26px); line-height: 1.35; font-weight: 300; }
.un-glabel { margin: 56px 0 20px; font-size: 14px; color: var(--hn-ink2); }
.un-founder { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.un-foto { margin: 0; background: #F5F5F7; }
.un-foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.un-name { margin: 14px 0 0; font-size: 16.5px; color: var(--hn-ink); }
.un-founder .un-name { margin-top: 0; }
.un-rolle { margin: 3px 0 0; font-size: 14px; color: var(--hn-ink2); }
.un-bio { margin: 12px 0 0; font-size: 15.5px; line-height: 1.6; font-weight: 300; max-width: 62ch; }
.un-stationen { list-style: none; margin: 16px 0 0; padding: 0; }
.un-stationen li { font-size: 13.5px; color: var(--hn-ink2); line-height: 1.55; margin: 0 0 4px; }
/* flex-wrap seit dem Vita-PDF als drittem Link (Audit 12.11.), mobil bricht
   er in die nächste Zeile */
.un-links { margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 12px 28px; }
/* Filme von Walter Smerling (Paul 28.09.): eingeklappte Zeile unter dem
   Gründer-Block, zwischen zwei Haarlinien. Links der Zweizeiler (dunkel/grau
   wie die Kachel-Titel), rechts Zähler + Winkel wie an der Mutterkachel.
   Aufgeklappt das normale Kachelraster; das Play-Zeichen ist ein runder
   Kreis, die erlaubte Ausnahme für Media-Controls. */
.un-filme { margin-top: 56px; border-top: 0.5px solid var(--hn-hair2); border-bottom: 0.5px solid var(--hn-hair2); }
.un-filme__kopf {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 20px 0; margin: 0; background: none; border: 0; font-family: inherit; text-align: left;
  color: var(--hn-ink); cursor: pointer;
}
.un-filme__titel { display: flex; flex-direction: column; }
.un-filme__z1, .un-filme__z2 { font-size: 18px; line-height: 1.12; font-weight: 400; }
.un-filme__z2 { color: var(--hn-ink2); }
.un-filme__kopf:hover .un-filme__z1 { color: var(--hn-navy); }
.un-filme__kopf:focus { outline: none; }
.un-filme__kopf:focus-visible { outline: 1px solid var(--hn-ink); outline-offset: 4px; }
.un-filme__zahl { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--hn-ink2); white-space: nowrap; }
.un-filme__raster { padding: 20px 0 64px; }
/* Smerling-Text (Paul 26.10.): schließt bündig an den Film-Aufklapper an,
   eine gemeinsame Haarlinie statt zwei. Fließtext wie die Bio. */
.un-filme + .un-text { margin-top: 0; border-top: 0; }
/* Kolumne „Zaster" (Audit 12.11.): dritter Aufklapper, ebenso bündig; die
   Zeilenliste bringt ihre eigene Haarlinie oben mit, darum dort keine. */
.un-filme + .un-kolumne { margin-top: 0; border-top: 0; }
.un-kolumne__liste { padding: 4px 0 40px; }
.un-kolumne__liste .hn-presse__zeile:first-child { border-top: 0; }
.un-kolumne__liste .hn-presse__zeile:last-child { border-bottom: 0; }
.un-text__inhalt { padding: 4px 0 48px; max-width: 62ch; }
.un-text__inhalt p { margin: 0 0 1em; font-size: 15.5px; line-height: 1.6; font-weight: 300; }
.un-text__inhalt p:last-child { margin-bottom: 0; }
.un-film__bild { position: relative; }
.hn-page .un-film__play {   /* rund trotz Radius-Reset, Optik wie die Reel-Buttons */
  position: absolute; left: 14px; bottom: 14px; width: 34px; height: 34px; border-radius: 999px !important;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.92); border: 0.5px solid var(--hn-hair2);
  color: var(--hn-ink); transition: border-color 0.2s ease;
}
.un-film__play svg { width: 18px !important; height: 18px !important; margin-left: 2px; }
.hn-page .un-film:hover .un-film__play { border-color: var(--hn-ink2); }
.un-film__quelle { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 940px) {
  .un-filme__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 20px; }
}
@media (max-width: 480px) {
  .un-filme__raster .hn-card__title, .un-filme__raster .hn-card__sub { font-size: 15px; }
  .un-filme__raster .hn-card__meta { font-size: 13px; }
  .un-filme__z1, .un-filme__z2 { font-size: 16px; }
  .hn-page .un-film__play { left: 10px; bottom: 10px; width: 28px; height: 28px; }
}
/* Vorstand: Fotos ~30% kleiner, dafür mehr Weißraum (Paul 25.08.) */
.un-team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(36px, 5vw, 80px) clamp(28px, 4vw, 64px); }
.un-team .un-foto { max-width: 70%; }
.un-beirat { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 36px; }
.un-beirat li { font-size: 15px; }

@media (max-width: 940px) {
  .un-vintro, .un-founder { grid-template-columns: 1fr; }
  .un-team { grid-template-columns: 1fr 1fr; }
  /* Smerling-Foto mobil deutlich kleiner (Paul 28.08.) */
  .un-founder .un-foto { max-width: 200px; }
}
@media (max-width: 560px) {
  /* Vorstand bleibt auch klein ein 2er-Raster — Bilder fressen sonst den Screen */
  .un-team { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .un-team .un-foto { max-width: 100%; }
  .un-hero img { height: 46vh; }
}

/* ── Veranstaltungen: Hybrid-Kalender (Konsens Paul 25.08.) ────────────────── */
.vn-kopf { padding-bottom: 28px; }
.vn-layout {
  display: grid; grid-template-columns: clamp(240px, 22vw, 300px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 88px);
  padding: 0 var(--hn-pad) 80px;
  align-items: start;
}
/* Sticky-Schiene: bleibt beim Scrollen in Sichtweite (unser Bestand) */
.vn-rail { position: sticky; top: 96px; }
.vn-cal__kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.vn-cal__monat { font-size: 15px; }
.vn-cal__pfeil {
  width: 32px; height: 32px; border-radius: 999px !important;
  background: #fff; border: 0.5px solid var(--hn-hair2); color: var(--hn-ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.vn-cal__pfeil:hover { border-color: var(--hn-ink2); }
.vn-cal__wtage, .vn-cal__tage { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.vn-cal__wtage span { font-size: 11px; color: var(--hn-ink2); text-align: center; padding: 4px 0 8px; }
.vn-cal__tag {
  aspect-ratio: 1; border: 0; background: none; font-family: inherit; font-size: 12.5px;
  color: var(--hn-ink2); border-radius: 999px !important;
  display: inline-flex; align-items: center; justify-content: center;
}
.vn-cal__tag:disabled { opacity: 0.45; }
.vn-cal__tag.hat-event { background: #fff; border: 0.5px solid var(--hn-hair2); color: var(--hn-ink); cursor: pointer; }
.vn-cal__tag.hat-event:hover { border-color: var(--hn-navy); color: var(--hn-navy); }
.vn-cal__tag.ist-heute { background: var(--hn-ink); color: #fff; opacity: 1; }
.vn-aktionen { display: flex; gap: 28px; margin-top: 18px; }
.vn-heute, .vn-filtertoggle { background: none; border: 0; padding: 0; font-family: inherit; color: var(--hn-ink); }
.vn-filtertoggle { display: none; }   /* nur Mobile sichtbar */
.vn-artfilter { margin-top: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.vn-artfilter__label { margin: 0 0 4px; font-size: 14px; color: var(--hn-ink2); }

/* Monats-Header wie Beyeler: groß und ruhig */
.vn-monat__titel {
  margin: 0; padding: 34px 0 18px;
  font-size: clamp(30px, 3.6vw, 44px); font-weight: 400; letter-spacing: -0.015em;
}
.vn-monat:first-child .vn-monat__titel { padding-top: 0; }

/* Tages-Zeile: große Tageszahl links, Einträge in Spalten mit Hairlines */
.vn-tag {
  display: grid; grid-template-columns: 96px minmax(0, 1fr);
  gap: 18px; padding: 22px 0;
  border-top: 0.5px solid var(--hn-hair);
}
.vn-tag__zahl { display: block; font-size: 34px; line-height: 1; letter-spacing: -0.01em; }
.vn-tag__wtag { display: block; margin-top: 6px; font-size: 13px; color: var(--hn-ink2); }
/* Spalten breiter (Paul 28.09.): Text plus 128px-Thumbnail brauchen Platz;
   min() hält schmale Listen ohne Überlauf. */
.vn-tag__eintraege { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 18px; }
/* z-index 2: Zeileninhalt UND Hairlines laufen über dem Impressionen-
   Slider (z1, derzeit nicht gerendert). */
.vn-tag { position: relative; z-index: 2; }

/* ── Impressionen-Slider (Experiment Paul 31.08.) ──────────────────────────
   Ambient ohne Steuerung, absolut im rechten Weißraum der Liste — das
   Listen-Layout bleibt unberührt. Mobile (einspaltig) gibt es den
   Weißraum nicht → ausgeblendet. */
.vn { position: relative; }
.vn-impressionen {
  /* Oberkante bündig mit der Headline: 54px Section-Padding + 6px Titel-
     Margin (.hn-seitentitel) = 60px ab Seitenanfang; rechts an der
     Inhaltskante (--hn-pad). */
  position: absolute; right: var(--hn-pad); top: 60px; z-index: 1;
  width: clamp(300px, 26vw, 460px); aspect-ratio: 4 / 3;
  overflow: hidden; background: #F5F5F7; pointer-events: none;
}
/* Headline liegt sicherheitshalber über dem Bild (schmale Viewports) */
.vn-kopf .hn-seitentitel { position: relative; z-index: 2; }
.vn-impressionen img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 1.4s ease;
}
.vn-impressionen img.ist-aktiv { opacity: 1; }
.vn-monat__titel { position: relative; z-index: 2; }
@media (max-width: 940px) { .vn-impressionen { display: none; } }
/* Eintrag (Paul 28.09.): Text links, 4:3-Thumbnail rechts IM Eintrag und
   immer sichtbar (vorher Hover-Bild am Zeilenrand, mobil nur per Wischen).
   Oben bündig mit der Zeitzeile; ohne Motiv bleibt das Feld leer-grau, damit
   die Spalten ruhig stehen. Hover wie .hn-card: Bild 1.02, Titel navy. */
.vn-eintrag {
  display: grid; grid-template-columns: minmax(0, 1fr) 128px;
  column-gap: 16px; align-items: start;
  border-left: 0.5px solid var(--hn-hair2); padding-left: 16px; min-height: 112px;
}
.vn-eintrag__inhalt { display: flex; flex-direction: column; gap: 4px; align-self: stretch; min-width: 0; }
.vn-eintrag__zeit { font-size: 13.5px; color: var(--hn-ink2); }
.vn-eintrag__titel { font-size: 16.5px; line-height: 1.3; color: var(--hn-ink); overflow-wrap: break-word; hyphens: auto; }
.vn-eintrag:hover .vn-eintrag__titel { color: var(--hn-navy); }
.vn-eintrag__labels { margin-top: auto; padding-top: 10px; font-size: 12.5px; color: var(--hn-ink2); display: flex; flex-wrap: wrap; gap: 4px 18px; }
.vn-eintrag.ist-vergangen { opacity: 0.55; }
.vn-eintrag__bild { display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #F5F5F7; }
.vn-eintrag__bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.vn-eintrag:hover .vn-eintrag__bild img { transform: scale(1.02); }

/* ── Band über dem Kalender (Paul 28.09.) ──────────────────────────────────
   Zwei Kacheln im Hellgrau-Feld (7 : 5, Fuge wie .hn-grid3): „Jetzt zu
   sehen" mit Zeilen aus Mini-Thumb und Zweizeiler, „Führungen im MKM" mit
   Bild oben. Seitenränder wie .vn-layout. Beide Kacheln sind gleich hoch,
   der Fuß (Hairline, Zusatzzeile, CTA) sitzt jeweils unten bündig. */
.vn-band {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(20px, 3vw, 44px);
  padding: 0 var(--hn-pad) clamp(48px, 6vw, 88px);
}
.vn-kachel { display: flex; flex-direction: column; min-width: 0; background: #F5F5F7; }
.vn-kachel__text { flex: 1; display: flex; flex-direction: column; padding: clamp(20px, 2.4vw, 32px); }
.vn-kachel__titel { margin: 0; font-size: 18px; line-height: 1.12; font-weight: 400; letter-spacing: -0.005em; }
.vn-kachel__sub { margin: 0; font-size: 18px; line-height: 1.12; font-weight: 400; color: var(--hn-ink2); }
.vn-kachel__fuss { margin-top: auto; }
.vn-kachel__cta { padding-top: 22px; }
/* Bild etwas flacher als 16:9, damit die MKM-Kachel die Nachbarin nicht
   überragt; gestapelt (≤940px) je nach Breite 5:2 bzw. 16:9 */
.vn-kachel__bild { aspect-ratio: 2 / 1; overflow: hidden; background: var(--hn-hair); }
.vn-kachel__bild img { width: 100%; height: 100%; object-fit: cover; }

/* Jetzt zu sehen: Zeile = Thumb (4:3, gleiches Maß wie die Termin-Thumbs
   darunter, also EIN Thumbnail-Format auf der Seite) + Titel dunkel,
   Künstlerin bzw. Künstler grau, darunter „bis …" und Ort. Leeres Bildfeld
   auf dem grauen Grund in Hairline-Grau, damit es sichtbar bleibt. */
.vn-jetzt__liste { list-style: none; margin: 22px 0 0; padding: 0; }
.vn-jetzt__zeile { border-top: 0.5px solid var(--hn-hair2); }
.vn-jetzt__link {
  display: grid; grid-template-columns: 128px minmax(0, 1fr);
  gap: 16px; align-items: start; padding: 16px 0;
}
.vn-jetzt__bild { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--hn-hair); }
.vn-jetzt__bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.vn-jetzt__link:hover .vn-jetzt__bild img { transform: scale(1.02); }
.vn-jetzt__text { display: flex; flex-direction: column; min-width: 0; }
.vn-jetzt__titel, .vn-jetzt__sub {
  font-size: 16.5px; line-height: 1.2; overflow-wrap: break-word;
  hyphens: auto; -webkit-hyphens: auto;   /* 320 px: „Gruppenausstellung" mit Trennstrich statt hartem Umbruch (Review 28.09.) */
}
.vn-jetzt__titel { color: var(--hn-ink); transition: color 0.2s ease; }
.vn-jetzt__sub { color: var(--hn-ink2); }
.vn-jetzt__link:hover .vn-jetzt__titel { color: var(--hn-navy); }
.vn-jetzt__meta { font-size: 14.5px; line-height: 1.16; color: var(--hn-ink2); }
.vn-jetzt__sub + .vn-jetzt__meta { margin-top: 8px; }
.vn-jetzt__leer { margin: 22px 0 14px; font-size: 14.5px; line-height: 1.4; color: var(--hn-ink2); }
.vn-jetzt__dauer {
  margin: 0; padding-top: 14px; border-top: 0.5px solid var(--hn-hair2);
  font-size: 14.5px; line-height: 1.45; color: var(--hn-ink2);
}
.hn-page .vn-jetzt__dauer a { color: var(--hn-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 0.5px; }
.hn-page .vn-jetzt__dauer a:hover { color: var(--hn-navy); }

/* Führungen im MKM: Zweizeiler (Name dunkel, Rhythmus grau), Beschreibung,
   nächster Termin dunkel; darunter der Hinweis zu Anmeldung und Eintritt. */
.vn-mkm__liste { list-style: none; margin: 22px 0 0; padding: 0; }
.vn-mkm__fuehrung { display: flex; flex-direction: column; padding: 14px 0; border-top: 0.5px solid var(--hn-hair2); }
.vn-mkm__name, .vn-mkm__rhythmus { font-size: 16.5px; line-height: 1.2; }
.vn-mkm__rhythmus { color: var(--hn-ink2); }
.vn-mkm__text { margin-top: 8px; font-size: 14.5px; line-height: 1.3; color: var(--hn-ink2); }
.vn-mkm__termin { margin-top: 4px; font-size: 14.5px; line-height: 1.3; color: var(--hn-ink); }
.vn-mkm__hinweis {
  margin: 0; padding-top: 14px; border-top: 0.5px solid var(--hn-hair2);
  font-size: 14.5px; line-height: 1.45; color: var(--hn-ink2);
}

@media (max-width: 940px) {
  .vn-layout { grid-template-columns: 1fr; }
  /* Rail als Spalte: Kalender oben, darunter „Heute" + „Filter" (Paul 28.08.) */
  .vn-rail { position: static; display: block; max-width: 400px; }
  .vn-aktionen { margin-top: 20px; }
  .vn-filtertoggle { display: inline-block; }
  .vn-filtertoggle.is-active { color: var(--hn-navy); }
  .vn-artfilter { display: none; margin-top: 18px; }
  .vn-artfilter.is-open { display: flex; }
  .vn-tag { grid-template-columns: 64px minmax(0, 1fr); }
  .vn-tag__zahl { font-size: 26px; }
  /* Mobil dasselbe Raster wie am Desktop, nur mit kleinerem Thumbnail
     (Paul 28.09.): die Wisch-Spur mit dem Bild außerhalb des Bildschirms
     war praktisch unauffindbar. */
  .vn-tag__eintraege { grid-template-columns: minmax(0, 1fr); }
  .vn-eintrag { grid-template-columns: minmax(0, 1fr) 96px; column-gap: 14px; padding-left: 14px; min-height: 0; }
  /* Band: Kacheln untereinander, Thumbs wie die Termine */
  .vn-band { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .vn-jetzt__link { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
  .vn-kachel__bild { aspect-ratio: 5 / 2; }
}
@media (max-width: 560px) {
  .vn-kachel__bild { aspect-ratio: 16 / 9; }
}
@media (max-width: 480px) {
  .vn-eintrag { grid-template-columns: minmax(0, 1fr) 84px; column-gap: 12px; }
  .vn-jetzt__link { grid-template-columns: 84px minmax(0, 1fr); }
}

/* ── Neuigkeiten (28.08.) ──────────────────────────────────────────────────── */
/* Die pdz-Klassen leben sonst nur auf den Detailseiten — für die Artikel-
   Ansicht in der Haupt-App hier nachgebaut (Layoutprinzipien der Projektseite). */
.nn .pdz-kopf { padding: 34px var(--hn-pad) 26px; }
.nn .pdz-zeilen {
  margin: 0; font-size: clamp(28px, 3.8vw, 46px); line-height: 1.12;
  font-weight: 400; letter-spacing: -0.015em;
}
.nn .pdz-z1 { color: var(--hn-ink); }
.nn .pdz-z2 { color: var(--hn-ink2); }
.nn .pdz-hero { margin: 0; background: #F5F5F7; }
.nn .pdz-hero img { width: 100%; aspect-ratio: 16 / 9; max-height: 70vh; object-fit: cover; display: block; }
.nn .pdz-hero--hochkant { display: flex; justify-content: center; padding: clamp(32px, 6vh, 72px) var(--hn-pad); }
.nn .pdz-hero--hochkant img { width: auto; max-width: 100%; aspect-ratio: auto; height: min(72vh, 760px); object-fit: contain; }
.nn .pdz-einzug {
  display: grid; grid-template-columns: clamp(200px, 24vw, 420px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  padding: 34px var(--hn-pad) 80px;
}
.nn .pdz-info__label { margin: 0; font-size: 14px; color: var(--hn-ink2); }
@media (max-width: 700px) {
  /* minmax(0, 1fr) statt 1fr (Sichtprüfung 09.11.): lange Material-Namen
     (nowrap, Auslassungspunkte) machten die Spalte sonst breiter als das
     Handy, Text rechts abgeschnitten, Seite herausgezoomt */
  .nn .pdz-einzug { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  /* Linke Spalte ist ohne Datum leer (Sarah 09.11.): einspaltig keine Leerzeile */
  .nn .pdz-einzug__spacer { display: none; }
}
.nn-zwischen { margin: 34px 0 0; font-size: 21px; line-height: 1.3; font-weight: 400; letter-spacing: -0.01em; }
.nn-absatz { margin: 14px 0 0; font-size: 16px; line-height: 1.6; font-weight: 300; max-width: 62ch; }
.nn-artikel .pd-intro__lead { font-size: clamp(18px, 1.8vw, 22px); line-height: 1.5; font-weight: 300; max-width: 58ch; margin: 0 0 10px; }
.nn-zurueck { margin: 44px 0 0; }
/* Filme in Neuigkeiten (Paul 09.11.): nach dem Vorspann, Hochformat-Clips
   nebeneinander (je höchstens 300 px breit), auf dem Handy untereinander.
   Start-Knopf wie .pd-film__knopf auf den Detailseiten. */
.nn-filme { display: grid; grid-template-columns: minmax(0, 300px); gap: 28px 24px; margin: 28px 0 8px; }
.nn-filme--mehrere { grid-template-columns: repeat(2, minmax(0, 300px)); }
.nn-film { margin: 0; min-width: 0; }
.nn-film__buehne { position: relative; }
.nn-film__video { display: block; width: 100%; height: auto; background: #F5F5F7; }
.nn-film__video:focus-visible { outline: 2px solid var(--hn-navy, #284158); outline-offset: 2px; }
.nn-film__start {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; color: var(--hn-ink, #1D1D1F);
}
.hn-page .nn-film__knopf {
  width: 64px; height: 64px; border-radius: 999px !important;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.92); border: 0.5px solid var(--hn-hair2, #D2D2D7);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.nn-film__knopf svg { margin-left: 3px; }
.hn-page .nn-film__start:hover .nn-film__knopf { border-color: var(--hn-ink2, #86868B); transform: scale(1.04); }
.nn-film__start:focus { outline: none; }
.nn-film__start:focus-visible .nn-film__knopf { outline: 2px solid var(--hn-navy, #284158); outline-offset: 3px; }
.nn-film figcaption { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--hn-ink2, #86868B); }
.nn-film__titel { color: var(--hn-ink, #1D1D1F); }
.nn-film__dauer { white-space: nowrap; }
.nn-film__credit { display: block; font-style: normal; }
@media (max-width: 560px) {
  .nn-filme, .nn-filme--mehrere { grid-template-columns: minmax(0, 1fr); }
  .nn-film__buehne, .nn-film figcaption { max-width: 340px; }
  .hn-page .nn-film__knopf { width: 52px; height: 52px; }
}
/* Material zu einer Neuigkeit: seit Runde 2 (Paul/Sarah 21.09.) der
   gemeinsame Baustein .sfkuk-material in anhang-viewer.css. */

/* ── Mitglied werden (29.08.) ──────────────────────────────────────────────── */
.mg-liste { list-style: none; margin: 0; padding: 0; }
.mg-zeile {
  position: relative;
  padding: 16px 0; border-bottom: 0.5px solid var(--hn-hair);
  font-size: 16px; font-weight: 300;
}
.mg-zeile:first-child { border-top: 0.5px solid var(--hn-hair); }
/* Vorteils-Hover-Bild (Paul 01.09.): rechts in der Zeile, GRÖSSER als die
   Zeile (überlappt die Nachbarzeilen samt Hairlines, solange gehovert wird —
   Anatomie wie das Kalender-Hover-Bild). Mobile ohne Hover → aus. */
.mg-zeile.hat-bild:hover { z-index: 4; }
.mg-zeile__bild {
  position: absolute; right: 0; top: 50%;
  height: 200px; aspect-ratio: 4 / 3; overflow: hidden;
  transform: translateY(-50%) translateX(6px);
  opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none; z-index: 3; background: #F5F5F7;
}
.mg-zeile__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mg-zeile.hat-bild:hover .mg-zeile__bild { opacity: 1; transform: translateY(-50%) translateX(0); }
@media (max-width: 940px) { .mg-zeile__bild { display: none; } }
.mg-zeile--beitrag {
  display: grid; grid-template-columns: minmax(160px, 280px) minmax(0, 1fr) auto;
  gap: 18px; align-items: baseline;
}
.mg-name { font-weight: 400; }
.mg-suffix { font-size: 13.5px; color: var(--hn-ink2); }
.mg-preis { font-size: 17px; font-variant-numeric: tabular-nums; }
.mg-hinweis { margin: 0 0 22px; font-size: 14px; color: var(--hn-ink2); }
.mg-ctas { margin-top: 32px; display: flex; gap: 32px; flex-wrap: wrap; }
@media (max-width: 700px) {
  /* Mobil: Name + Preis in EINER Zeile (kein kontextloses „Jahr" mehr,
     Paul 29.08.) — Zusatzinfo (Next Generation) darunter in voller Breite. */
  .mg-zeile--beitrag { grid-template-columns: 1fr auto; gap: 6px 18px; }
  .mg-name { grid-row: 1; grid-column: 1; }
  .mg-preis { grid-row: 1; grid-column: 2; }
  .mg-suffix { grid-row: 2; grid-column: 1 / -1; }
  .mg-suffix:empty { display: none; }
}

/* ── Online-Mitgliedsantrag (Paul 19.10.) ─────────────────────────────────────
   Gruppen wie die Projekt-Einzüge: Titel links, Felder rechts, Hairline oben.
   Felder als Unterstrich-Zeilen wie der Newsletter; Auswahl als Hairline-
   Zeilen wie die Beitragsliste; eckige Kästchen statt runder Radios. */
.mg-antrag__pdf { font-size: 14px; }
.mg-form { --mg-fehler: #C40000; max-width: 1280px; }
.mg-form__erklaerung {
  margin: 0 0 34px; max-width: 58ch;
  font-size: clamp(18px, 1.8vw, 22px); line-height: 1.45; font-weight: 300;
}
.mg-form__gruppe {
  display: grid; grid-template-columns: clamp(180px, 22vw, 360px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  padding: 30px 0 38px; border-top: 0.5px solid var(--hn-hair);
}
.mg-form__titel { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 400; }
.mg-form__felder {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 32px; max-width: 760px; align-items: start;
}
.mg-form__feld--breit { grid-column: 1 / -1; }
.mg-form__feld { display: flex; flex-direction: column; min-width: 0; }
.mg-form__label { display: block; margin: 0 0 4px; padding: 0; font-size: 13.5px; color: var(--hn-ink2); }
.mg-form__optional { color: var(--hn-ink2); }
.hn-page .mg-form__input {
  width: 100%; margin: 0; padding: 6px 0;
  border: 0; border-bottom: 0.5px solid var(--hn-hair2); background: none; outline: none;
  -webkit-appearance: none; appearance: none;
  font-family: inherit; font-size: 16px; font-weight: 300; color: var(--hn-ink);
}
.mg-form__input::placeholder { color: var(--hn-hair2); }
.mg-form__input:focus { border-bottom-color: var(--hn-ink); }
.mg-form__input:focus-visible { box-shadow: 0 1px 0 0 var(--hn-ink); }
.mg-form__input[type="number"] { -moz-appearance: textfield; max-width: 220px; }
.mg-form__input[type="number"]::-webkit-inner-spin-button,
.mg-form__input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.hat-fehler > .mg-form__input { border-bottom-color: var(--mg-fehler); }
.mg-form__hinweis { margin: 6px 0 0; font-size: 13px; color: var(--hn-ink2); }
.mg-form__fehler { margin: 6px 0 0; font-size: 13px; color: var(--mg-fehler); }
.mg-form__fehler--gross { font-size: 15px; }

/* Auswahl-Zeilen (Kategorie, Zahlungsart) */
.mg-form__wahl { margin: 0; padding: 0; border: 0; min-width: 0; }
.mg-form__wahl > .mg-form__label { margin-bottom: 10px; }
.mg-form__option {
  display: grid; grid-template-columns: 18px minmax(120px, 220px) minmax(0, 1fr) auto;
  gap: 16px; align-items: baseline;
  padding: 13px 0; border-bottom: 0.5px solid var(--hn-hair);
  font-size: 16px; font-weight: 300; cursor: pointer;
}
.mg-form__wahl > .mg-form__label + .mg-form__option { border-top: 0.5px solid var(--hn-hair); }
.mg-form__option--kurz { grid-template-columns: 18px minmax(0, 1fr); }
.mg-form__option:hover .mg-form__optname { color: var(--hn-navy); }
.mg-form__optname { font-weight: 400; }
.mg-form__optsuf { font-size: 13.5px; color: var(--hn-ink2); }
.mg-form__optpreis { font-size: 15px; color: var(--hn-ink2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Eckige Kästchen: Radio = gefülltes Innenquadrat, Checkbox = Haken */
.mg-form input[type="radio"], .mg-form input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; flex: none;
  width: 16px; height: 16px; margin: 0; position: relative; top: 2px;
  border: 1px solid var(--hn-ink2); background: #fff; cursor: pointer;
}
.mg-form input[type="radio"]:checked { border-color: var(--hn-ink); box-shadow: inset 0 0 0 3px #fff; background: var(--hn-ink); }
.mg-form input[type="checkbox"]:checked {
  border-color: var(--hn-ink); background: var(--hn-ink) no-repeat center / 12px 12px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E");
}
.mg-form input[type="radio"]:focus-visible, .mg-form input[type="checkbox"]:focus-visible { outline: 1px solid var(--hn-navy); outline-offset: 2px; }
.hat-fehler input[type="checkbox"] { border-color: var(--mg-fehler); }

.mg-form__haken { min-width: 0; }
.mg-form__check { display: flex; gap: 14px; align-items: flex-start; font-size: 16px; line-height: 1.5; font-weight: 300; cursor: pointer; max-width: 68ch; }
.mg-form__check input { top: 3px; }
.mg-form__haken .mg-form__fehler { margin-left: 30px; }

/* Texte (Erklärung, Mandat, Spendenbescheinigung) */
.mg-form__summe { margin: 0; font-size: 16px; line-height: 1.6; font-weight: 300; max-width: 62ch; }
.mg-form__text { margin: 0 0 12px; font-size: 16px; line-height: 1.6; font-weight: 300; max-width: 68ch; }
.mg-form__klein { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--hn-ink2); max-width: 72ch; }
.mg-form__mandat { padding: 4px 0 0; }
.mg-form__mandat-titel { margin: 0 0 4px; font-size: 16px; font-weight: 400; }
.mg-form__bank { font-weight: 400; }
.hn-page .mg-form__link { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.hn-page .mg-form__link:hover { color: var(--hn-navy); }

/* Absenden: CTA-Unterstrich wie „Anmelden" im Newsletter */
.mg-form__senden { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 6px; }
.hn-page .mg-form__knopf {
  background: none; border: 0; border-bottom: 1px solid currentColor; padding: 0 0 4px;
  font-family: inherit; font-size: 17px; color: var(--hn-ink); text-decoration: none;
}
.hn-page .mg-form__knopf:hover { color: var(--hn-navy); }
.hn-page .mg-form__knopf:disabled { color: var(--hn-ink2); cursor: progress; }
.mg-form__meldung:empty { display: none; }
.mg-form__meldung .mg-form__klein { margin-top: 8px; }

/* Honigtopf: aus dem Blickfeld, aber nicht display:none (manche Bots prüfen das) */
.mg-form__honig { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Danke-Zustand */
.mg-form__dank { padding: 30px 0 10px; border-top: 0.5px solid var(--hn-hair); outline: none; max-width: 760px; }
.mg-form__dank-titel { margin: 0 0 12px; font-size: clamp(22px, 2.4vw, 30px); font-weight: 400; letter-spacing: -0.01em; }

@media (max-width: 700px) {
  .mg-form__gruppe { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 24px 0 30px; }
  .mg-form__felder { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  /* Auswahl mobil: Kästchen + Name + Preis in einer Zeile, Zusatz darunter */
  .mg-form__option { grid-template-columns: 18px minmax(0, 1fr) auto; gap: 4px 14px; }
  .mg-form__optsuf { grid-row: 2; grid-column: 2 / -1; }
  .mg-form__optsuf:empty { display: none; }
  .mg-form__option--kurz { grid-template-columns: 18px minmax(0, 1fr); }
  .mg-form__input[type="number"] { max-width: none; }
}

/* ── Impressum + Datenschutz (29.08.) ─────────────────────────────────────── */
.lg-absatz { margin: 14px 0 0; font-size: 16px; line-height: 1.6; font-weight: 300; max-width: 72ch; }
.lg-absatz strong { font-weight: 500; }
.lg-bloecke { margin-top: 30px; }
.lg-vorstand { margin-top: 34px; }
/* Links im Fließtext: unterstrichen, Hover Navy (wie überall im System) */
.lg .lg-absatz a { word-break: break-word; }
/* Datenschutzerklärung neu (10.11.): nummerierte Zwischentitel, Listen mit
   kurzem Hairline-Strich statt Punkt (keine Mittelpunkte im System), Art. 21
   abgesetzt (Pflicht: getrennt von anderen Informationen), Haftung im Impressum */
.lg-titel {
  margin: 46px 0 0; max-width: 72ch;
  font-size: clamp(18px, 1.7vw, 21px); line-height: 1.3; font-weight: 400; letter-spacing: -0.005em;
}
.lg-liste { list-style: none; margin: 12px 0 0; padding: 0; max-width: 72ch; font-size: 16px; line-height: 1.6; font-weight: 300; }
.lg-liste li { position: relative; margin: 6px 0 0; padding-left: 22px; }
.lg-liste li::before {
  content: ""; position: absolute; left: 0; top: 0.8em; width: 10px;
  border-top: 1px solid var(--hn-ink2);
}
.lg-hervor { margin-top: 24px; max-width: 72ch; padding: 4px 0 6px 20px; border-left: 1px solid var(--hn-ink); }
.lg-hervor .lg-absatz:first-child { margin-top: 0; }
.lg-hervor .lg-absatz strong { font-weight: 500; }
.lg-haftung { margin-top: 44px; }
.lg-haftung .lg-absatz:first-of-type { margin-top: 18px; }
.lg-stand { margin-top: 30px; color: var(--hn-ink2); }
.lg .hn-presse__block a { word-break: break-word; }

/* ── Über uns: Pilot-Reel (Sarah 01.09., Feinschliff Paul 02.09.) ──────────
   Hochformat auf grauer Bühne, mit Luft oben/unten (Video dadurch kleiner);
   Pause- und Ton-Button rechts unten AM VIDEO — runde Kreise sind die
   erlaubte Ausnahme für Media-Controls (wie Lightbox/Slider-Pfeile). */
.un-hero--reel {
  background: #F5F5F7; display: flex; justify-content: center;
  height: min(80vh, 840px);
  padding: clamp(28px, 4vw, 56px) 0;
}
.un-reel { position: relative; height: 100%; }
/* 9:16 fest (Sichtprüfung 29.10.): das Reel lädt erst nach den Bildern, bis
   dahin bestimmt das Poster die Breite; ohne festes Format sprang die Bühne,
   solange auch das Poster noch fehlte (Video-Standard 300 x 150). */
.un-reel video { height: 100%; width: auto; max-width: 100%; display: block; aspect-ratio: 9 / 16; }
.un-reel__controls {
  position: absolute; right: 12px; bottom: 12px;
  display: flex; gap: 8px;
}
.hn-page .un-reel__btn {
  width: 40px; height: 40px; border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.92); border: 0.5px solid var(--hn-hair2);
  color: var(--hn-ink); cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.hn-page .un-reel__btn:hover { border-color: var(--hn-ink2); }
@media (max-width: 700px) {
  .un-hero--reel { padding: 20px 0; }
  .un-reel__controls { right: 10px; bottom: 10px; }
  .hn-page .un-reel__btn { width: 36px; height: 36px; }
}

/* ── anhang-viewer.css ── */
/* ── Anhang-Viewer (Paul 21.09.) ──────────────────────────────────────────
   Vollbild-Overlay für News-Anhänge (PDF komplett gerendert, Bilder). Optik
   bewusst wie .pd-lightbox (projekt-detail.css): dunkler Grund, runde
   Buttons mit dünnen Stroke-Icons, Zähler mit Tabellenziffern. Präfix .av */
.av {
  position: fixed; inset: 0; z-index: 1300;
  background: rgba(10,10,10,0.92); color: #fff;
  display: flex; flex-direction: column;
  padding: 0 60px 24px;
  font-family: "Pepe Mory", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  animation: av-ein .2s;
}
@keyframes av-ein { from { opacity: 0; } to { opacity: 1; } }

.av__close {
  position: absolute; top: 24px; right: 24px; z-index: 2;
  width: 44px; height: 44px; border-radius: 999px;
  background: rgba(255,255,255,0.12); color: #fff;
  border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.av__close:hover { background: rgba(255,255,255,0.22); }
.av__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 56px; height: 56px; border-radius: 999px;
  background: rgba(255,255,255,0.1); color: #fff;
  border: 0; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.av__nav:hover { background: rgba(255,255,255,0.22); }
.av__nav--prev { left: 24px; }
.av__nav--next { right: 24px; }

/* Kopfzeile: Name (+ Größe), Zähler, Download. Rechts Platz für den Close. */
.av__kopf {
  flex: none; min-height: 92px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 24px 72px 12px 0; font-size: 15px; line-height: 1.4;
}
.av__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av__groesse { margin-left: 10px; opacity: 0.55; font-variant-numeric: tabular-nums; }
.av__zaehler { opacity: 0.6; font-variant-numeric: tabular-nums; white-space: nowrap; }
.av__download {
  margin-left: auto; color: #fff; white-space: nowrap;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.av__download:hover { opacity: 0.75; }

/* Bühne: scrollt bei PDFs, Bild wird mittig eingepasst. */
.av__stage {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; align-items: center;
  -webkit-overflow-scrolling: touch;
}
.av__bild {
  display: block; margin: auto;
  max-width: 92vw; max-height: 84vh; object-fit: contain;
}
.av__seiten { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.av__seiten[hidden] { display: none; }
.av__seite { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.av__seite canvas { display: block; background: #fff; box-shadow: 0 1px 10px rgba(0,0,0,0.5); }
.av__seite figcaption { font-size: 12.5px; opacity: 0.55; font-variant-numeric: tabular-nums; }
.av__laden { margin: 16px 0; font-size: 14px; opacity: 0.7; }

/* Fallback: Browser-eigene Anzeige im iframe plus Link. */
.av__fallback {
  width: min(920px, 92vw); flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.av__fehler { margin: 0; font-size: 14px; opacity: 0.8; }
.av__fehler a { color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.av__iframe { flex: 1 1 auto; width: 100%; min-height: 60vh; border: 0; background: #fff; }

@media (max-width: 560px) {
  .av { padding: 0 16px 16px; }
  .av__kopf { padding-right: 60px; gap: 12px; min-height: 80px; }
  .av__nav { width: 44px; height: 44px; }
  .av__nav--prev { left: 8px; }
  .av__nav--next { right: 8px; }
  .av__close { top: 16px; right: 16px; }
}

/* Innerhalb der Seiten-Wrapper (.hn-page) setzt home-neu.css alle Radien auf 0;
   die runden Media-Buttons des Viewers sind die erlaubte Ausnahme (wie Lightbox). */
.hn-page .av__close, .hn-page .av__nav { border-radius: 999px !important; }

/* ── Material-Liste (Paul/Sarah 21.09.) ───────────────────────────────────
   Aus seiten-neu.css (.nn-material) hierher gezogen und umbenannt, weil die
   Liste jetzt auch auf Projekt- und Veranstaltungsseiten steht (detail.css).
   Metrik unverändert: dünner Trennstrich oben, kleine graue Überschrift,
   Hairline-Zeilen, Hover unterstreicht den Namen, Hinweis rechts gedämpft.
   Token-Fallbacks (gleiche Werte wie .hn-page in home-neu.css), falls die
   Liste einmal außerhalb von .hn-page steht. Präfix .sfkuk-material */
.sfkuk-material { margin: 44px 0 0; padding-top: 22px; border-top: 0.5px solid var(--hn-hair, #E8E8ED); max-width: 62ch; }
.sfkuk-material__titel { margin: 0 0 6px; font-size: 14px; font-weight: 400; color: var(--hn-ink2, #86868B); letter-spacing: 0; }
.sfkuk-material__liste { list-style: none; margin: 0; padding: 0; }
.sfkuk-material__btn {
  display: flex; align-items: center; gap: 12px; width: 100%;
  margin: 0; padding: 11px 0; background: none; border: 0;
  border-bottom: 0.5px solid var(--hn-hair, #E8E8ED);
  font-family: inherit; font-size: 16px; font-weight: 300; color: var(--hn-ink, #1D1D1F);
  text-align: left; cursor: pointer;
}
.sfkuk-material__btn svg { flex: 0 0 auto; color: var(--hn-ink2, #86868B); }
.sfkuk-material__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sfkuk-material__btn:hover .sfkuk-material__name { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.sfkuk-material__hint { margin-left: auto; flex: 0 0 auto; font-size: 13.5px; color: var(--hn-ink2, #86868B); white-space: nowrap; }