/* ── 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; }

/* ── projekt-detail.css ── */
/* ─────────────────────────────────────────────────────────────────────────
   Projekt-Detail-Page — visual system extending styles.css.
   Visually consistent with the existing site: Inter, ink/paper, red accent,
   rounded cards, hairline dividers, generous whitespace.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Shared chip atoms ─────────────────────────────────────────────────── */
.fmt-chip {
  display: inline-flex; align-items: center;
  height: 26px; padding: 0 12px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em;

  border-radius: 999px; border: 1px solid transparent;
  white-space: nowrap;
}
.fmt-chip--sm { height: 22px; font-size: 10.5px; padding: 0 9px; }
.status-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 12px 0 10px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em;

  border-radius: 999px; border: 1px solid var(--hair);
  background: rgba(255,255,255,0.92);
  color: var(--ink); backdrop-filter: blur(4px);
}
.status-chip--sm { height: 22px; font-size: 10.5px; padding: 0 10px 0 8px; }
.status-chip__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--muted-2);
}
.status-chip--live .status-chip__dot {
  background: #1e9c52;
  box-shadow: 0 0 0 0 rgba(30,156,82,0.5);
  animation: dot-pulse 2s infinite;
}
.status-chip--past .status-chip__dot { background: var(--muted-2); }
.status-chip--soft .status-chip__dot { background: var(--red); }
@keyframes dot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(30,156,82,0.45); }
  70%  { box-shadow: 0 0 0 8px rgba(30,156,82,0); }
  100% { box-shadow: 0 0 0 0 rgba(30,156,82,0); }
}

/* ── PROJEKT PREVIEW (Map popup) ───────────────────────────────────────── */
.pp-backdrop {
  position: fixed; inset: 0; background: rgba(10,10,10,0.45);
  z-index: 1100; opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.pp-backdrop.show { opacity: 1; pointer-events: auto; }

.pp {
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--ink);
}
.pp--card { width: 340px; max-width: 92vw; }
.pp--sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 1101;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -16px 40px rgba(0,0,0,0.18);
  padding-bottom: 18px;
  animation: pp-slide-up .28s cubic-bezier(.2,.7,.2,1.05);
}
@keyframes pp-slide-up {
  from { transform: translateY(110%); }
  to   { transform: translateY(0); }
}
.pp__grabber {
  width: 44px; height: 5px; border-radius: 999px;
  background: var(--hair); margin: 10px auto 6px;
}
.pp__media {
  position: relative;
  aspect-ratio: 16/10;
  background: var(--paper-2);
  overflow: hidden;
}
.pp__media svg { width: 100%; height: 100%; display: block; }
.pp__chips {
  position: absolute; left: 12px; bottom: 12px; right: 44px;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.pp__close {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px; border-radius: 999px;
  background: rgba(255,255,255,0.94); border: 1px solid var(--hair);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink);
}
.pp__close:hover { background: #fff; }
.pp__body { padding: 16px 18px 18px; }
.pp__title {
  font-size: 18px; line-height: 1.25; font-weight: 700;
  margin: 0 0 6px;
}
.pp__meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--muted); margin-bottom: 10px;
}
.pp__dot { color: var(--muted-2); }
.pp__lead {
  font-size: 13.5px; line-height: 1.5; color: var(--ink-2);
  margin: 0 0 14px; text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pp__cta {
  width: 100%; justify-content: center;
  height: 44px; font-weight: 600;
}

/* ── PROJEKT DETAIL ────────────────────────────────────────────────────── */
.pd {
  --side: clamp(20px, 5vw, 80px);
  padding-top: 0;
}

/* ── 1. Hero ──────────────────────────────────────────────────────────── */
.pd-hero {
  position: relative;
  padding: 0 var(--side) 56px;
}
.pd-hero__media {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  aspect-ratio: 16/7;
  max-height: 640px;
  background: var(--paper-2);
  margin-bottom: 36px;
}
.pd-hero__media svg { width: 100%; height: 100%; display: block; }
.pd-hero__chips {
  position: absolute; left: 24px; bottom: 24px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.pd-hero__head {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "crumb lang"
    "title title"
    "sub   sub"
    "facts facts";
  gap: 8px 24px;
  align-items: end;
}
.pd-hero__breadcrumb {
  grid-area: crumb;
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px; color: var(--muted);
  letter-spacing: 0.02em;
}
.pd-hero__breadcrumb a { text-decoration: none; }
.pd-hero__breadcrumb a:hover { color: var(--red); }
.pd-hero__lang {
  grid-area: lang;
  display: inline-flex; align-items: center;
  gap: 6px;
  font-size: 13px; font-weight: 600;
}
.pd-hero__lang button {
  background: none; border: 0; padding: 6px 8px;
  font: inherit; color: var(--muted-2); border-radius: 6px;
}
.pd-hero__lang button.is-on { color: var(--ink); background: var(--paper-2); }
.pd-hero__lang .sep { color: var(--muted-2); }
.pd-hero__title {
  grid-area: title;
  font-size: clamp(40px, 6.4vw, 88px);
  line-height: 0.98; font-weight: 800;
  letter-spacing: -0.02em;
  margin: 14px 0 0; text-wrap: balance;
}
.pd-hero__subtitle {
  grid-area: sub;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.35; color: var(--muted);
  margin: 10px 0 0; max-width: 720px;
  text-wrap: balance;
}
.pd-hero__facts {
  grid-area: facts;
  list-style: none; margin: 28px 0 0; padding: 22px 0 0;
  border-top: 1px solid var(--hair);
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 24px;
}
.pd-fact__label {
  display: block; font-size: 11.5px; color: var(--muted);
 letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.pd-fact__value {
  display: block; font-size: 15px; font-weight: 600;
  line-height: 1.35;
}

/* ── Section shell ────────────────────────────────────────────────────── */
.pd-content { padding: 0 var(--side); }
.pd-section {
  padding: 72px 0;
  border-top: 1px solid var(--hair);
}
.pd-section:first-child { border-top: 0; padding-top: 0; }
.pd-section__head { margin-bottom: 36px; max-width: 920px; }
.pd-kicker {
  display: inline-block;
  font-size: 11.5px; font-weight: 600; color: var(--red);
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}
.pd-kicker--light { color: rgba(255,255,255,0.7); }
.pd-section__title {
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.04; font-weight: 800;
  letter-spacing: -0.015em;
  margin: 0; text-wrap: balance;
}
.pd-section__count {
  font-weight: 400; color: var(--muted-2); font-size: 0.5em;
  vertical-align: 0.25em; letter-spacing: 0;
}

/* ── 2. Intro ─────────────────────────────────────────────────────────── */
.pd-intro { padding: 60px 0 24px; border-top: 0; }
.pd-intro__lead {
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.3; font-weight: 500;
  letter-spacing: -0.005em;
  max-width: 1040px; margin: 0;
  text-wrap: pretty;
}

/* ── 3. Langtext ──────────────────────────────────────────────────────── */
.pd-longtext__flow {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 32px 56px;
  align-items: start;
}
.pd-longtext__p {
  grid-column: 1 / 2;
  font-size: 16.5px; line-height: 1.65; margin: 0;
  max-width: 56ch; color: var(--ink-2);
}
.pd-longtext__p:nth-of-type(even) { grid-column: 2 / 3; }
/* Zwischenüberschrift (Sarah kann sie im Inhalt als eigenen Block setzen) —
   volle Breite als Abschnitts-Trenner im Textfluss. */
.pd-longtext__h {
  grid-column: 1 / -1;
  margin: 20px 0 -8px;
  font-size: 21px; line-height: 1.3; font-weight: 500;
  letter-spacing: -0.01em; color: var(--ink);
}
.pd-longtext__fig {
  grid-column: 2 / 3;
  margin: 0;
}
.pd-longtext__fig--left { grid-column: 1 / 2; }
/* Inhaltsbilder ungecroppt (Paul 21.09.): kein festes Seitenverhältnis mehr,
   das Bild bestimmt die Höhe. Nur der SVG-Platzhalter (kein src) hält 4:3. */
.pd-longtext__img {
  border-radius: 14px; overflow: hidden;
  background: var(--paper-2); margin-bottom: 10px;
}
.pd-longtext__img--platzhalter { aspect-ratio: 4 / 3; }
.pd-longtext__img svg { width: 100%; height: 100%; display: block; }
.pd-longtext__fig figcaption {
  font-size: 12.5px; color: var(--muted); line-height: 1.5;
}
.pd-credit {
  display: block; font-style: normal; color: var(--muted-2);
  font-size: 11.5px; margin-top: 2px;
}

/* ── 4. Galerie ───────────────────────────────────────────────────────── */
.pd-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.pd-gallery__item { margin: 0; cursor: zoom-in; }
.pd-gallery__img {
  aspect-ratio: 4/3;
  border-radius: 14px; overflow: hidden;
  background: var(--paper-2);
  transition: transform .25s;
}
.pd-gallery__item:hover .pd-gallery__img { transform: translateY(-3px); }
.pd-gallery__img svg { width: 100%; height: 100%; display: block; }
.pd-gallery__item figcaption {
  margin-top: 10px; font-size: 12.5px; line-height: 1.45;
}
.pd-gallery__caption { color: var(--ink-2); }

.pd-lightbox {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(10,10,10,0.92);
  display: flex; align-items: center; justify-content: center;
  padding: 60px;
  animation: pp-slide-up .2s; /* reuse */
}
.pd-lightbox__close {
  position: absolute; top: 24px; right: 24px;
  width: 44px; height: 44px; border-radius: 999px;
  background: rgba(255,255,255,0.12); color: #fff;
  border: 0; display: inline-flex; align-items: center; justify-content: center;
}
.pd-lightbox__close:hover { background: rgba(255,255,255,0.22); }
.pd-lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 56px; height: 56px; border-radius: 999px;
  background: rgba(255,255,255,0.1); color: #fff;
  border: 0; font-size: 28px; line-height: 1; padding: 0;
  /* Pfeil-Glyph exakt auf x/y zentrieren (wie beim Close-Button) — vorher saß
     das ‹/›-Zeichen ohne Flex-Zentrierung leicht daneben (Paul 08/2026). */
  display: inline-flex; align-items: center; justify-content: center;
}
.pd-lightbox__nav:hover { background: rgba(255,255,255,0.22); }
.pd-lightbox__nav--prev { left: 24px; }
.pd-lightbox__nav--next { right: 24px; }
.pd-lightbox__stage {
  max-width: 1100px; width: 100%;
  background: transparent; color: #fff;
  margin: 0;
}
.pd-lightbox__img {
  aspect-ratio: 4/3; max-height: 70vh;
  border-radius: 12px; overflow: hidden;
  background: var(--ink-2);
}
.pd-lightbox__img svg { width: 100%; height: 100%; display: block; }
.pd-lightbox__stage figcaption {
  margin-top: 16px; font-size: 14px;
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.pd-lightbox__counter { margin-left: auto; opacity: 0.6; font-variant-numeric: tabular-nums; }

/* ── 5. Künstler:innen ────────────────────────────────────────────────── */
.pd-artists__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 24px;
}
.pd-artist {
  display: block; text-decoration: none; color: inherit;
}
.pd-artist__photo {
  aspect-ratio: 1; border-radius: 14px; overflow: hidden;
  background: var(--paper-2); margin-bottom: 14px;
  transition: transform .25s;
}
.pd-artist:hover .pd-artist__photo { transform: translateY(-3px); }
.pd-artist__photo svg { width: 100%; height: 100%; display: block; }
.pd-artist__name {
  font-size: 17px; font-weight: 700; margin: 0 0 6px;
  line-height: 1.25;
}
.pd-artist__bio {
  font-size: 13px; line-height: 1.5; color: var(--muted);
  margin: 0;
}
.pd-artists__more a {
  display: flex; flex-direction: column; justify-content: center;
  aspect-ratio: 1; border-radius: 14px; padding: 16px;
  background: var(--paper-2); color: var(--ink);
  text-decoration: none; font-size: 22px; font-weight: 700;
  line-height: 1.1; gap: 8px;
  transition: background .2s;
}
.pd-artists__more a:hover { background: var(--ink); color: #fff; }
.pd-artists__more a svg { width: 14px; height: 14px; }

/* ── 6. Events ────────────────────────────────────────────────────────── */
.pd-events__tabs {
  display: inline-flex;
  background: var(--paper-2);
  padding: 4px; border-radius: 999px;
  margin-bottom: 24px;
}
.pd-events__tabs button {
  background: none; border: 0;
  padding: 9px 18px; border-radius: 999px;
  font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--muted); display: inline-flex; align-items: center; gap: 8px;
}
.pd-events__tabs button[aria-selected="true"] {
  background: #fff; color: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.pd-events__tabcount {
  font-size: 11px; padding: 1px 7px; border-radius: 999px;
  background: var(--hair); color: var(--ink-2);
}
.pd-events__tabs button[aria-selected="true"] .pd-events__tabcount {
  background: var(--ink); color: #fff;
}
.pd-events__list { list-style: none; margin: 0; padding: 0; }
.pd-event {
  display: grid;
  /* Datum-Spalte schmaler (110→94px, Inline-Feedback 07/2026) — Eventtext rückt ~16px nach links */
  grid-template-columns: 94px 1fr auto;
  gap: 32px; padding: 28px 0;
  border-top: 1px solid var(--hair);
}
.pd-event:first-child { border-top: 0; padding-top: 8px; }
.pd-event__date {
  display: flex; flex-direction: column; align-items: flex-start;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.pd-event__day { font-size: 48px; font-weight: 800; letter-spacing: -0.02em; }
.pd-event__month { font-size: 14px; font-weight: 700; letter-spacing: 0.06em; margin-top: 6px; }
.pd-event__year { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.pd-event__chips {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-bottom: 10px;
}
.pd-event__type {
  display: inline-flex; height: 22px; align-items: center;
  padding: 0 10px; border-radius: 999px;
  background: var(--red-soft); color: var(--red-deep);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em;
}
.pd-event__time { font-size: 12.5px; color: var(--muted); }
.pd-event__title { font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0 0 6px; text-wrap: balance; }
.pd-event__loc { font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.pd-event__desc { font-size: 14.5px; line-height: 1.55; margin: 0; max-width: 60ch; color: var(--ink-2); }
.pd-event__cta { align-self: center; }
.pd-event__pastpill {
  display: inline-flex; padding: 6px 12px;
  border: 1px solid var(--hair); border-radius: 999px;
  font-size: 12px; color: var(--muted); letter-spacing: 0.06em;
}
.pd-events__empty { font-size: 15px; color: var(--muted); margin: 24px 0 0; }

/* ── 7. News ──────────────────────────────────────────────────────────── */
.pd-news__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 24px;
}
.pd-news-card a {
  display: block; text-decoration: none; color: inherit;
}
.pd-news-card__media {
  position: relative;
  aspect-ratio: 4/3; border-radius: 14px; overflow: hidden;
  background: var(--paper-2); margin-bottom: 14px;
  transition: transform .25s;
}
.pd-news-card a:hover .pd-news-card__media { transform: translateY(-3px); }
.pd-news-card__media svg { width: 100%; height: 100%; display: block; }
.pd-news-card__type {
  position: absolute; top: 12px; left: 12px;
  background: rgba(255,255,255,0.95); color: var(--ink);
  font-size: 11px; font-weight: 600; padding: 4px 9px;
  border-radius: 999px; letter-spacing: 0.04em;
}
.pd-news-card__date {
  display: block; font-size: 12px; color: var(--muted);
 letter-spacing: 0.06em; margin-bottom: 8px;
}
.pd-news-card__title {
  font-size: 19px; font-weight: 700; line-height: 1.25;
  margin: 0 0 8px; text-wrap: balance;
}
.pd-news-card__excerpt {
  font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 0;
}

/* ── 8. Downloads ─────────────────────────────────────────────────────── */
.pd-downloads__row {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 32px;
  align-items: start;
}
.pd-download--lead {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center; gap: 28px;
  padding: 28px;
  border-radius: var(--r-card);
  background: var(--ink); color: #fff;
  text-decoration: none;
  transition: background .2s;
}
.pd-download--lead:hover { background: var(--red); }
.pd-download__icon {
  width: 56px; height: 64px; border-radius: 8px;
  background: rgba(255,255,255,0.12);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
}
.pd-download__icon--sm {
  width: 36px; height: 42px; font-size: 10px;
  background: var(--paper-2); color: var(--ink-2);
}
.pd-download__text { display: flex; flex-direction: column; gap: 4px; }
.pd-download__kicker {
  font-size: 11.5px; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.65);
}
.pd-download__text strong { font-size: 22px; font-weight: 700; line-height: 1.2; }
.pd-download__text em { font-style: normal; font-size: 13px; color: rgba(255,255,255,0.6); }
.pd-download__cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600;
}
.pd-downloads__list {
  list-style: none; margin: 0; padding: 0;
}
.pd-downloads__list li + li { border-top: 1px solid var(--hair); }
.pd-downloads__list a {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 18px;
  padding: 14px 8px;
  text-decoration: none; color: inherit;
}
.pd-downloads__list a:hover { background: var(--paper-3); }
.pd-download__filename { font-size: 14.5px; font-weight: 600; }
.pd-download__size { font-size: 12.5px; color: var(--muted); }

/* ── 9. Related ──────────────────────────────────────────────────────── */
.pd-related__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.pd-related__chips {
  position: absolute; left: 14px; bottom: 14px;
  display: flex; gap: 6px;
}
.pd-related .project-card__cat { color: var(--ink); }

/* ── 10. CTA ─────────────────────────────────────────────────────────── */
.pd-cta {
  padding: 0; border-top: 0;
  margin: 80px calc(var(--side) * -1) 0;
}
.pd-cta__inner {
  background: var(--ink); color: #fff;
  padding: 72px var(--side);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px; align-items: center;
}
.pd-cta__title {
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.05; font-weight: 800; letter-spacing: -0.02em;
  margin: 0; text-wrap: balance;
}
.pd-cta__lead {
  font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.7);
  margin: 18px 0 0; max-width: 540px;
}
.pd-cta__form { display: flex; flex-direction: column; gap: 18px; align-items: stretch; }
.pd-cta__primary {
  align-self: flex-start; height: 56px; padding: 0 24px;
  font-size: 15px; font-weight: 600;
}
.pd-cta__newsletter {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}
.pd-cta__newsletter input {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff; padding: 0 18px; height: 48px;
  border-radius: 999px; font: inherit; font-size: 14px;
}
.pd-cta__newsletter input::placeholder { color: rgba(255,255,255,0.5); }
.pd-cta__newsletter button {
  background: #fff; color: var(--ink); border-color: #fff;
  height: 48px; padding: 0 22px;
}
.pd-cta__newsletter button:hover { background: var(--paper-2); border-color: var(--paper-2); }

/* ── Demo chrome (preview-popup demo column) ─────────────────────────── */
.pd-demo-bar {
  position: sticky; top: 0; z-index: 80;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hair);
  padding: 14px var(--side);
  display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap;
}
.pd-demo-bar h1 {
  font-size: 14px; font-weight: 700; margin: 0;
  display: flex; align-items: center; gap: 12px;
}
.pd-demo-bar h1 .pill {
  display: inline-flex; padding: 3px 8px; font-size: 10.5px;
  background: var(--red); color: #fff; border-radius: 999px;
 letter-spacing: 0.08em; font-weight: 700;
}
.pd-demo-bar .spacer { flex: 1; }
.pd-demo-bar__group {
  display: inline-flex; background: var(--paper-2);
  border-radius: 999px; padding: 3px; gap: 2px;
}
.pd-demo-bar__group button {
  background: none; border: 0; font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 6px 12px; border-radius: 999px; color: var(--muted);
}
.pd-demo-bar__group button.is-on {
  background: #fff; color: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* Preview-popup demo stage: shows desktop card AND mobile sheet side-by-side */
.pp-demo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 56px var(--side);
  background: var(--paper-3);
  border-bottom: 1px solid var(--hair);
}
.pp-demo--single { grid-template-columns: 1fr; justify-items: center; }
.pp-demo--single .pp-demo__col { width: 100%; max-width: 720px; }
.pp-demo__pin {
  border: 0; padding: 0; cursor: pointer;
}
.pp-demo__pin:hover { filter: brightness(1.08); }
.pp-demo__phone-pin { border: 0; padding: 0; cursor: pointer; }
.pp-demo__hint {
  position: absolute; top: calc(40% + 48px); left: 24%;
  font-size: 12px; color: var(--muted); font-weight: 600;
  background: #fff; padding: 6px 10px; border-radius: 999px;
  border: 1px solid var(--hair);
  white-space: nowrap;
}
.pp-demo__hint--phone {
  top: calc(30% + 36px); left: 30%;
  font-size: 11px; padding: 4px 8px;
}
.pp-demo__col h2 {
  font-size: 13px; font-weight: 700; margin: 0 0 16px;
 letter-spacing: 0.08em; color: var(--muted);
}
.pp-demo__map {
  position: relative; height: 460px; border-radius: var(--r-card);
  background:
    radial-gradient(circle at 30% 40%, #f1ede4 0, #f1ede4 80px, transparent 81px),
    radial-gradient(circle at 70% 60%, #e8e4da 0, #e8e4da 120px, transparent 121px),
    linear-gradient(135deg, var(--sea), #f3fafd);
  border: 1px solid var(--hair);
  overflow: hidden;
}
.pp-demo__pin {
  position: absolute; top: 40%; left: 32%;
  width: 36px; height: 36px;
  border-radius: 999px 999px 999px 4px;
  background: var(--red); transform: rotate(-45deg);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.pp-demo__pin::after {
  content: ""; position: absolute; inset: 8px;
  background: #fff; border-radius: 999px;
}
.pp-demo__card-wrap {
  position: absolute; top: 14%; right: 14%;
}
.pp-demo__phone {
  width: 320px; height: 580px; margin: 0 auto;
  border-radius: 40px; background: #0a0a0a;
  padding: 12px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.18);
  position: relative;
}
.pp-demo__phone-screen {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 30px; overflow: hidden;
  background: #fff;
  display: flex; flex-direction: column;
}
.pp-demo__phone-map {
  flex: 1;
  background:
    radial-gradient(circle at 35% 45%, #f1ede4 0, #f1ede4 60px, transparent 61px),
    linear-gradient(160deg, var(--sea), #f3fafd);
  position: relative;
}
.pp-demo__phone-pin {
  position: absolute; top: 30%; left: 40%;
  width: 24px; height: 24px;
  border-radius: 999px 999px 999px 3px;
  background: var(--red); transform: rotate(-45deg);
}
.pp-demo__phone-pin::after {
  content: ""; position: absolute; inset: 6px;
  background: #fff; border-radius: 999px;
}
/* Force sheet to absolute-position inside phone */
.pp-demo__phone-screen .pp--sheet {
  position: absolute; bottom: 0;
  animation: none;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .pd-hero__media { aspect-ratio: 4/3; }
  .pd-hero__head { grid-template-columns: 1fr; grid-template-areas: "crumb" "lang" "title" "sub" "facts"; }
  .pd-hero__lang { justify-self: start; }
  .pd-hero__facts { grid-template-columns: repeat(2, 1fr); }
  .pd-longtext__flow { grid-template-columns: 1fr; }
  .pd-longtext__p, .pd-longtext__fig, .pd-longtext__h { grid-column: 1 / -1 !important; }
  .pd-gallery__grid { grid-template-columns: repeat(2, 1fr); }
  .pd-artists__grid { grid-template-columns: repeat(2, 1fr); }
  .pd-news__grid { grid-template-columns: 1fr; }
  .pd-downloads__row { grid-template-columns: 1fr; }
  .pd-related__grid { grid-template-columns: 1fr; }
  .pd-cta__inner { grid-template-columns: 1fr; padding: 48px var(--side); }
  .pd-event {
    grid-template-columns: 86px 1fr;
    gap: 18px;
  }
  .pd-event__cta { grid-column: 2 / 3; margin-top: 4px; }
  .pd-event__day { font-size: 38px; }
  .pp-demo { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pd-section { padding: 48px 0; }
  .pd-gallery__grid { grid-template-columns: 1fr; }
  .pd-hero__facts { grid-template-columns: 1fr 1fr; gap: 16px; }
  .pd-lightbox { padding: 16px; }
  .pd-lightbox__nav--prev { left: 8px; }
  .pd-lightbox__nav--next { right: 8px; }
}


/* ═══ Umbau 07/2026 — Site-Stil (Punkt-Kicker, Inter 500, Bild-Hero, Presse) ═══ */

/* Kicker: roter Punkt + Label (wie Home/Über uns), keine Sperrung */
.pd .pd-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--red); margin-bottom: 14px;
}
.pd .pd-kicker__dot {
  width: 10.35px; height: 10.35px; border-radius: 50%;
  background: var(--red); flex: none;
}
.pd .pd-kicker--light { color: #fff; }
.pd .pd-kicker--light .pd-kicker__dot { background: var(--red); }

/* Sektions-Titel: Vorbild-Proportionen (Inter 500, 24–34px) */
.pd .pd-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;
}
.pd .pd-cta__title { font-weight: 500; letter-spacing: -0.025em; }

/* ── Hero: full-bleed Bild, Titel auf dem Bild ── */
.pdh { padding: 0 0 0; }
.pdh__top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px var(--side) 14px;
}
.pdh__breadcrumb {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; color: var(--muted); min-width: 0;
}
.pdh__breadcrumb a { text-decoration: none; color: var(--muted); }
.pdh__breadcrumb a:hover { color: var(--red); }
.pdh__crumb-here { color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdh__media {
  position: relative;
  margin: 0 16px;
  border-radius: var(--r-card);
  overflow: hidden;
  height: min(66vh, 640px);
  min-height: 340px;
  background: var(--paper-2);
}
.pdh__media .pd-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pdh__media svg { width: 100%; height: 100%; display: block; }
.pdh__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,0.44) 0%, rgba(0,0,0,0.10) 30%, rgba(0,0,0,0) 52%);
}
.pdh__chips { position: absolute; left: 20px; top: 20px; display: flex; gap: 8px; flex-wrap: wrap; }
.pdh__text { position: absolute; left: clamp(20px, 3vw, 44px); right: clamp(20px, 3vw, 44px); bottom: clamp(20px, 3vw, 40px); color: #fff; }
.pdh__title {
  margin: 0;
  font-family: var(--sf);
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 500; letter-spacing: -0.03em; line-height: 1.02;
  text-wrap: balance;
}
.pdh__subtitle {
  margin: 10px 0 0; font-size: clamp(16px, 1.5vw, 20px);
  color: rgba(255,255,255,0.86); max-width: 62ch; text-wrap: pretty;
}
.pdh__facts {
  list-style: none; margin: 0 var(--side); padding: 22px 0;
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px;
  border-bottom: 1px solid var(--hair);
}
.pdh__facts .pd-fact__label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.pdh__facts .pd-fact__value { font-size: 15.5px; font-weight: 600; }

/* Galerie als Bildband-Zeilen (Paul 05.10.): --g = Seitenverhältnis × 100
   (flex-grow unter 1 verteilte nur einen Teil der Breite), aspect-ratio
   inline. Volle Zeilen teilen die Breite im Verhältnis der Formate, damit
   sind alle Bilder einer Zeile gleich hoch und nichts wird beschnitten.
   Ersetzt das 4:3-Raster (auch mobil). */
.pd-gallery__grid { display: flex; flex-direction: column; gap: 24px; }
.pd-gallery__zeile { display: flex; gap: 24px; align-items: flex-start; }
.pd-gallery__zeile > .pd-gallery__item { flex: var(--g, 133) 1 0; min-width: 0; }
.pd-gallery__zeile--rest > .pd-gallery__item { flex: none; }

/* Bildpaar im Fließtext (Paul 05.10.): nebeneinander, gleich hoch, zusammen
   so breit wie die Spalte. Schmal untereinander. */
.pd-longtext__paar { display: flex; gap: 16px; align-items: flex-start; margin: 12px 0 6px; }
.pd .pd-longtext__paar > .pd-longtext__fig { flex: var(--g, 100) 1 0; min-width: 0; margin: 0; width: auto; }
.pd-longtext__paar .pd-longtext__img .pd-img { height: 100%; object-fit: cover; }
@media (max-width: 560px) {
  .pd-longtext__paar { flex-direction: column; gap: 18px; }
  .pd .pd-longtext__paar > .pd-longtext__fig { flex: none; width: 100%; }
}

/* Echte Bilder in Bestands-Containern */
.pd-gallery__img .pd-img,
.pd-artist__photo .pd-img, .project-card__media .pd-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Langtext-Bilder: volle Figur-Breite, natürliche Höhe, kein Crop (Paul 21.09.) */
.pd-longtext__img .pd-img { width: 100%; height: auto; aspect-ratio: auto; object-fit: unset; display: block; }
.pd-lightbox__img .pd-img { width: 100%; height: 100%; object-fit: contain; display: block; background: #0a0a0a; }
.pd-artists__more > div {
  display: grid; place-items: center; height: 100%; min-height: 140px;
  border: 1px dashed var(--hair); border-radius: var(--r-card);
  font-size: 15.5px; font-weight: 600; color: var(--muted); text-align: center; line-height: 1.4;
}

/* ── Presse & Material ── */
.pd-presse__kit {
  display: flex; align-items: center; gap: 18px;
  border: 1px solid var(--hair); border-radius: var(--r-card);
  padding: 20px 22px; margin-bottom: 28px; max-width: 640px;
}
.pd-presse__kit-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pd-presse__kit-kicker { font-size: 13px; color: var(--muted); }
.pd-presse__kit-text strong { font-size: 15.5px; font-weight: 600; }
.pd-presse__kit-text em { font-style: normal; font-size: 13px; color: var(--muted); }
.pd-presse__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); }
.pd-presse__subhead { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 6px; }
.pd-presse__list { list-style: none; margin: 0; padding: 0; }
.pd-presse__row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 2px; border-top: 1px solid var(--hair);
}
.pd-presse__row:first-child { border-top: 0; }
.pd-presse__date { flex: none; width: 118px; font-size: 13.5px; color: var(--muted); }
.pd-presse__title { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 600; line-height: 1.35; }
.pd-pdfpill {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 999px;
  border: 1px dashed var(--muted-2); color: var(--muted);
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.pd-pdfpill--live {
  border: 1px solid var(--ink); border-style: solid; color: var(--ink);
  text-decoration: none; transition: background .15s ease, color .15s ease;
}
.pd-pdfpill--live:hover { background: var(--ink); color: #fff; }
.pd-presse__note { margin: 26px 0 0; font-size: 13px; color: var(--muted); }

@media (max-width: 820px) {
  .pdh__media { margin: 0 10px; height: 54vw; min-height: 260px; }
  .pdh__facts { grid-template-columns: 1fr 1fr; gap: 14px; }
  .pd-presse__cols { grid-template-columns: 1fr; }
  .pd-presse__date { width: 92px; }
}

/* Verwandte-Karten: Listing-Styles gehen von absoluter Media + fixer Kartenhöhe
   aus — hier als normale Fluss-Karte überschreiben (Verifier 07/2026). */
.pd-related .project-card {
  position: relative; display: block; height: auto;
  border-radius: 0; overflow: visible; background: none;
}
.pd-related .project-card__media {
  position: static; width: 100%; height: auto; aspect-ratio: 4 / 3;
  border-radius: var(--r-card); overflow: hidden; margin-bottom: 12px;
}
.pd-related .project-card__media { position: relative; } /* für Chips-Overlay */
.pd-related .pd-related__chips { position: absolute; left: 14px; top: 14px; }
.pd-related .project-card__row {
  position: static; display: flex; align-items: center;
  justify-content: space-between; gap: 14px; padding: 0;
  background: none; border: 0;
}
.pd-related .project-card:hover { transform: none; box-shadow: none; }
.pd-related .project-card:hover .project-card__media { box-shadow: 0 14px 32px rgba(10,10,10,0.12); }

/* Feinschliff 07/2026: Intro-Satz mittig zwischen den Linien; Listing-Gradient
   (.project-card::after aus styles.css) auf den Verwandte-Karten entfernen. */
.pd .pd-intro { padding: 44px 0; }
.pd .pd-intro__lead { margin: 0; }
.pd-related .project-card::after { display: none; }

/* Verwandte-Karten (07/2026): grauer Stroke weg, Chips größer, Pfeil im Kreis */
.pd-related .project-card__media { border: 0; }
.pd-related .pd-related__chips .fmt-chip,
.pd-related .pd-related__chips .status-chip { font-size: 13px; padding: 5px 13px; }
/* Hero-Chips (md) ebenfalls anheben — 11.5px war zu klein (Feedback 07/2026) */
.pdh__chips .fmt-chip,
.pdh__chips .status-chip { font-size: 13px; padding: 6px 14px; }
.pd-related .project-card__cat {
  width: 42px; height: 42px; padding: 0;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(10, 10, 10, 0.35);
  background: none; color: var(--ink);
  font-size: 0; letter-spacing: 0;
  transition: background .2s ease, color .2s ease;
}
.pd-related .project-card:hover .project-card__cat { background: var(--ink); color: #fff; }

/* Langtext (Paul 07/2026): das 2-Spalten-Zickzack-Raster wirkte willkürlich
   und riss Weißraum-Löcher (KEIN versteckter Bild-Platzhalter — nur leere
   Grid-Zellen). Neu: ruhige Ein-Spalten-Erzählung, Bilder in voller Breite
   im Textfluss. */
.pd .pd-longtext__flow {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 860px;
}
.pd .pd-longtext__p { max-width: 68ch; font-size: 16px; line-height: 1.55; }
.pd .pd-longtext__fig,
.pd .pd-longtext__fig--left,
.pd .pd-longtext__fig--right { margin: 12px 0 6px; width: 100%; }
/* (16:9-Deckel entfernt, Paul 21.09.: Inhaltsbilder laufen in Originalproportion) */

/* Verwandte-Karten: Stroke saß auf der Karte selbst (a.project-card) */
.pd-related .project-card { border: 0; box-shadow: none; }

/* 07/2026: Status-Punkt pulsiert nicht mehr (weder laufend noch abgeschlossen) */
.status-chip__dot { animation: none !important; }

/* Breadcrumb-Zeile vertikal auf die Mitte der Nav-Pille ausgerichtet
   (Pille: top 28px, ~54px hoch → Mitte bei 55px; Wrapper-Padding 90px). */
@media (min-width: 821px) {
  .has-fixednav .pdh__top {
    height: 54px;
    margin-top: -62px;
    margin-bottom: 20px;
    padding-top: 0;
    padding-bottom: 0;
    align-items: center;
  }
}

/* Termin-Datum: Monat + Jahr 6px nach rechts (Paul 07/2026) */
.pd-event__month, .pd-event__year { margin-left: 6px; }

/* ── Veranstaltungs-Detail (nutzt das pd-Template) ─────────────────────────── */
.ev-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; 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; color: var(--ink); line-height: 1;
}
.ev-chip__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.evd-grid {
  display: grid; grid-template-columns: minmax(300px, 1fr) minmax(300px, 1.2fr);
  gap: clamp(20px, 3vw, 40px); align-items: stretch;
}
.evd-card {
  border: 1px solid var(--hair); border-radius: var(--r-card);
  padding: 26px 28px; display: flex; flex-direction: column; gap: 16px;
}
.evd-card__row { display: flex; flex-direction: column; gap: 3px; }
.evd-card__actions { margin-top: auto; padding-top: 10px; display: flex; gap: 12px; flex-wrap: wrap; }
.evd-projekt {
  display: grid; grid-template-columns: minmax(220px, 320px) 1fr;
  gap: clamp(20px, 3vw, 40px); align-items: center;
  border: 1px solid var(--hair); border-radius: var(--r-card);
  padding: 18px; text-decoration: none; color: inherit;
  transition: box-shadow .2s ease, transform .2s ease;
}
.evd-projekt:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(10,10,10,0.10); }
.evd-projekt__media { aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: var(--paper-2); }
.evd-projekt__media .pd-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.evd-projekt__title { margin: 6px 0 10px; font-size: clamp(20px, 1.8vw, 26px); font-weight: 600; letter-spacing: -0.02em; }
.evd-projekt__cta { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; }
@media (max-width: 820px) {
  .evd-grid { grid-template-columns: 1fr; }
  .evd-projekt { grid-template-columns: 1fr; }
}

/* Verifier-Fix 07/2026: der pd-related-Chip-Kontext streckt Kinder (flex/stretch)
   — den Event-Status-Chip explizit kompakt halten. */
.pd-related .pd-related__chips .ev-chip {
  display: inline-flex;
  height: auto;
  align-self: flex-start;
  flex: none;
}

/* ── Lightbox-Feinschliff (Paul 24.07.2026): Bild + Zähler mittig, Close links,
      Hero-Cover öffnet dieselbe Ansicht ─────────────────────────────────── */
.pd-lightbox__close { left: 24px; right: auto; }
.pd-lightbox__stage { display: flex; flex-direction: column; align-items: center; }
.pd-lightbox__img { display: flex; justify-content: center; width: 100%; }
.pd-lightbox__img img { margin: 0 auto; max-width: 100%; max-height: 76vh; object-fit: contain; }
/* Jedes Format in voller Höhe (05.10.): keine feste 4:3-Box mit schwarzem
   Grund mehr, Hochformate erschienen darin klein. Nur der SVG-Platzhalter
   (kein Bild) behält 4:3. */
.pd-lightbox__img:not(:has(svg)) { aspect-ratio: auto; max-height: none; background: transparent; border-radius: 0; }
.pd-lightbox__img:not(:has(svg)) .pd-img { width: auto; height: auto; background: transparent; }
/* Handy quer (Review 05.10.): ohne die alte 70vh-Kappung ragten Bild und
   Bildunterschrift über den Bildschirm. Sicher zentrieren, notfalls scrollen,
   und bei wenig Höhe Rand und Bild knapper. */
.pd-lightbox { overflow-y: auto; align-items: safe center; }
@media (max-height: 500px) {
  .pd-lightbox { padding: 12px 72px; }
  .pd-lightbox__stage figcaption { margin-top: 8px; }
  .pd-lightbox__img img { max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); }
}
.pd-lightbox__stage figcaption {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 4px; width: 100%;
}
.pd-lightbox__counter { margin-left: 0; }
.pdh__media--klickbar { cursor: zoom-in; }

/* ── 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;
}

/* ── projekt-detail-neu.css ── */
/* ─────────────────────────────────────────────────────────────────────────────
   REDESIGN 08/2026 — Projektdetailseite im Zwirner-Aufbau.
   Lädt NACH projekt-detail.css und überschreibt den Alt-Look:
   Pepe Mory, Hairlines, keine Rundungen (via .hn-page), Headlines im Titelfall.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Kopf: Zweizeiler → Hero-Bild → Info-Spalten ───────────────────────────── */
.pdz-kopf { padding: 34px var(--hn-pad, 48px) 26px; }
.pdz-zeilen {
  margin: 0; font-size: clamp(28px, 3.8vw, 46px); line-height: 1.12;
  font-weight: 400; letter-spacing: -0.015em;
}
.pdz-z1 { color: var(--hn-ink, #1D1D1F); }
.pdz-z2 { color: var(--hn-ink2, #86868B); }

.pdz-hero { margin: 0; background: #F5F5F7; }
/* Gesünderes Seitenverhältnis (Sarah/Paul 08/2026): 16:9 statt flachem
   72vh-Deckel — das Bild wächst in der Höhe, weniger brutaler Beschnitt.
   (Hochkant-Cover: später klären — bis dahin gilt cover + Bildposition.)
   Die Mini-Bilder des Mosaik-Heros nimmt :where(:not()) aus — ohne Aufschlag
   auf die Spezifität, damit die Hochkant-Regel unten weiter per Reihenfolge
   gewinnt (Paul 21.09.). */
.pdz-hero:where(:not(.pdz-hero--mosaik)) .pd-img,
.pdz-hero:where(:not(.pdz-hero--mosaik)) img,
.pdz-hero:where(:not(.pdz-hero--mosaik)) svg {
  width: 100%; aspect-ratio: 16 / 9; height: auto; max-height: 88vh;
  object-fit: cover; display: block;
}
.pdz-hero--klickbar { cursor: zoom-in; }
/* Mosaik-Hero (Paul 21.09.): Mutterprojekte zeigen statt des Beitragsbilds das
   Kachelraster der Töchter (.hn-mosaik--hero aus home-neu.css, dort absolut in
   die Bühne gelegt). Gleiche 16:9-Bühne wie das Cover, nicht klickbar. */
.pdz-hero--mosaik {
  /* Volle Breite (Paul 21.09.). Seit 28.09. (Paul, alle Töchter statt Plus)
     keine feste Höhe mehr: das Mosaik bringt die 16:9-Bühne als Mindesthöhe
     mit und wird bei mehr als zwei Reihen höher. */
  position: relative; width: 100%;
  background: #F5F5F7; overflow: hidden; cursor: default;
}
/* Hochkant-Cover (Zwirner-Manier, Paul 08/2026): Bild schwebt zentriert in
   Originalproportion auf der hellgrauen Bühne, statt auf 16:9 gecroppt zu werden. */
.pdz-hero--hochkant { display: flex; justify-content: center; padding: clamp(32px, 6vh, 72px) var(--hn-pad, 48px); }
.pdz-hero--hochkant .pd-img, .pdz-hero--hochkant img {
  width: auto; max-width: 100%; aspect-ratio: auto;
  height: min(72vh, 760px); object-fit: contain;
}

/* Zwirner-Raster (Paul 08/2026): Info-Zeile unterm Bild — Spalte 1 = Zeitraum,
   Spalte 2 = Ort. Der Fließtext darunter startet per identischer Spalten-
   definition EXAKT auf der x-Höhe der Ort-Spalte. */
.pd { --pdz-col1: clamp(200px, 24vw, 420px); --pdz-gap: clamp(24px, 4vw, 64px); }
.pdz-info {
  display: grid;
  grid-template-columns: var(--pdz-col1) 1.1fr 1fr 0.9fr;
  gap: var(--pdz-gap);
  padding: 28px var(--hn-pad, 48px) 10px;
  align-items: start;
}
.pdz-einzug {
  display: grid;
  grid-template-columns: var(--pdz-col1) minmax(0, 1fr);
  gap: var(--pdz-gap);
  padding: 0 var(--hn-pad, 48px);
}
.pdz-einzug__text { min-width: 0; }
.pdz-info__label { margin: 0 0 8px; font-size: 14px; color: var(--hn-ink2, #86868B); }
.pdz-info__wert { margin: 0; font-size: 16px; line-height: 1.45; color: var(--hn-ink, #1D1D1F); }
.pdz-info__grau { color: var(--hn-ink2, #86868B); }
.pd .pdz-info__link { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.pd .pdz-info__link:hover { color: var(--hn-navy, #284158); }

/* ── Sektionen: ruhiger Rhythmus mit Hairlines statt Karten-Optik ──────────── */
.pd { font-size: 16px; }
/* Divider full-bleed: das Seiten-Padding des Alt-Layouts raus — die Sektionen
   bringen ihr eigenes Innen-Padding mit, die border-top läuft von Rand zu Rand. */
.pd .pd-content { padding: 0; max-width: none; }
.pd .pd-section { padding: 54px var(--hn-pad, 48px) 64px; border-top: 0.5px solid var(--hn-hair, #E8E8ED); }
.pd .pd-intro { border-top: 0; padding-top: 44px; }
/* Text-Spalte: Sektionen dort ohne eigenes Seiten-Padding + einspaltig */
.pdz-einzug .pd-section { padding-left: 0; padding-right: 0; border-top: 0; }
.pdz-einzug .pd-longtext__flow { grid-template-columns: 1fr; }
.pdz-einzug .pd-longtext__p, .pdz-einzug .pd-longtext__fig { grid-column: 1 / -1 !important; }
.pdz-einzug .pd-intro__lead { max-width: 58ch; }
.pdz-einzug .pd-longtext__p { max-width: 62ch; }
.pd .pd-section__title {
  font-size: clamp(22px, 2.4vw, 30px); font-weight: 400; letter-spacing: -0.01em;
  text-transform: none;
}
/* Kurzbeschreibung: große Schrift braucht auch Breite (Sarah: „groß, aber
   schmal" wirkte unproportional) — Breite regelt die Einzug-Spalte. */
.pd .pd-intro__lead { font-size: clamp(18px, 1.8vw, 22px); line-height: 1.5; font-weight: 300; max-width: 58ch; }
/* Absätze aus dem CMS (Sichtprüfung 29.10.): Leerzeile im Feld = eigener Absatz */
.pd .pd-intro__lead + .pd-intro__lead { margin-top: 0.8em; }
.pd .pd-longtext__p { font-size: 16px; line-height: 1.6; font-weight: 300; color: var(--hn-ink, #1D1D1F); }
.pd .pd-longtext__h { font-weight: 400; }
.pd .pd-gallery__caption, .pd .pd-credit, .pd figcaption { color: var(--hn-ink2, #86868B); }

/* ── Filme (Paul 26.10.): im Textraster, so breit wie die Langtext-Bilder ──
   Schließt ohne eigenen Abstand oben an den Langtext an; eckig über .hn-page. */
.pd .pdz-einzug .pd-filme { padding-top: 0; }
.pd-filme { display: flex; flex-direction: column; gap: 40px; max-width: 860px; }
.pd-film { margin: 0; }
.pd-film__video { display: block; width: 100%; height: auto; background: #F5F5F7; }
.pd-film__video:focus-visible { outline: 2px solid var(--hn-navy, #284158); outline-offset: 2px; }
/* Start-Knopf auf dem Vorschaubild (Review 26.10.): ganze Fläche klickbar,
   runder Knopf wie die Play-Zeichen der Filme auf „Über uns" (erlaubte
   Ausnahme für Media-Controls). */
.pd-film__buehne { position: relative; }
.pd-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 .pd-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;
}
.pd-film__knopf svg { margin-left: 3px; }
.hn-page .pd-film__start:hover .pd-film__knopf { border-color: var(--hn-ink2, #86868B); transform: scale(1.04); }
.pd-film__start:focus { outline: none; }
.pd-film__start:focus-visible .pd-film__knopf { outline: 2px solid var(--hn-navy, #284158); outline-offset: 3px; }
@media (max-width: 560px) { .hn-page .pd-film__knopf { width: 52px; height: 52px; } }
.pd-film figcaption { margin-top: 10px; font-size: 12.5px; line-height: 1.5; }
.pd-film__dauer { white-space: nowrap; }
/* YouTube/Vimeo (René 02.11.): gleiche Bühne, eigenes Vorschaubild statt
   <video>, nach dem Klick das iframe in derselben Größe (kein Sprung).
   Darunter der Hinweis auf den Dienst mit Link, grau wie die Unterschrift. */
.pd-film__buehne--extern { overflow: hidden; background: #F5F5F7; }
.pd-film__poster, .pd-film__frame {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0;
}
.pd-film__poster { object-fit: cover; }
.pd-film__dienst { display: block; margin-top: 8px; max-width: 62ch; }
.pd .pd-film__link {
  color: var(--hn-ink, #1D1D1F); white-space: nowrap;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.pd .pd-film__link:hover { color: var(--hn-navy, #284158); }
.pd-film__link svg { margin-left: 4px; vertical-align: -1px; }

/* ── Beteiligte Künstler:innen: Vorstand-Raster wie Über uns (Paul 25.08.) ── */
.pd .pd-artists__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(36px, 5vw, 80px) clamp(28px, 4vw, 64px);
  list-style: none; margin: 0; padding: 0;
}
.pd .pd-artist { background: transparent; border: 0; box-shadow: none; padding: 0; }
.pd .pd-artist__photo {
  max-width: 70%; aspect-ratio: 3 / 4; overflow: hidden; background: #F5F5F7;
}
.pd .pd-artist__photo img, .pd .pd-artist__photo svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd .pd-artist__name { margin: 14px 0 0; font-size: 16.5px; font-weight: 400; color: var(--hn-ink, #1D1D1F); }
.pd .pd-artist__bio { margin: 3px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--hn-ink2, #86868B); }
@media (max-width: 940px) { .pd .pd-artists__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pd .pd-artists__grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; } .pd .pd-artist__photo { max-width: 100%; } }
/* Bildnachweis unter dem Künstlerfoto (Sarah 20.10.): wie in der Galerie
   (.pd-credit, 11.5 px grau), so breit wie das Foto, lange Namen brechen um.
   Den Abstand Foto → Name hält allein der Name (14 px); der alte Außenabstand
   unter dem Foto (projekt-detail.css) würde den Credit sonst abrücken. */
.pd .pd-artist__photo { margin-bottom: 0; }
.pd .pd-artist__credit { max-width: 70%; margin: 6px 0 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .pd .pd-artist__credit { max-width: 100%; } }
/* Namenszeile statt Raster (Paul 21.09.): sobald auch nur ein Porträt fehlt,
   alle Namen als Kommaliste, etwas größer als der Fließtext, Pepe Mory Regular
   (Schrift erbt von .hn-page), Tintenfarbe, keine Bios. */
.pd .pd-artists__namen {
  margin: 0; max-width: 64ch;
  font-family: inherit; font-weight: 400; font-size: 22px; line-height: 1.45;
  color: var(--hn-ink, #1D1D1F);
}

/* ── Termine: kompakte Tages-Zeilen (Kalender-Konsens Paul 25.08.) ─────────── */
.pde-tabs { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); margin-bottom: 22px; }
.pde-tab { background: none; border: 0; padding: 0; font-family: inherit; font-size: 14.5px; color: var(--hn-ink2, #86868B); cursor: pointer; }
.pde-tab:hover, .pde-tab.is-active { color: var(--hn-ink, #1D1D1F); }
.pde-strich { width: 0.5px; height: 18px; background: var(--hn-hair2, #D2D2D7); }
.pde-leer { color: var(--hn-ink2, #86868B); font-size: 15px; }
.pde-liste { list-style: none; margin: 0; padding: 0; }
.pde-zeile {
  /* Datumsspalte wächst mit Zeiträumen („27. Juni bis 5. Oktober 2026"),
     damit die Zeile nicht mitten im Datum umbricht (Paul 21.09.). */
  display: grid; grid-template-columns: minmax(130px, max-content) minmax(0, 1fr) auto;
  gap: 18px; align-items: baseline;
  padding: 16px 0; border-bottom: 0.5px solid var(--hn-hair, #E8E8ED);
}
.pde-zeile:first-child { border-top: 0.5px solid var(--hn-hair, #E8E8ED); }
.pde-datum { color: var(--hn-ink2, #86868B); font-size: 14px; font-variant-numeric: tabular-nums; }
.pde-was { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pde-kind { font-size: 15.5px; color: var(--hn-ink, #1D1D1F); }
.pde-titel { font-size: 15.5px; color: var(--hn-ink2, #86868B); }
.pde-ort { font-size: 13.5px; color: var(--hn-ink2, #86868B); }
@media (max-width: 700px) {
  .pde-zeile { grid-template-columns: 1fr auto; }
  .pde-datum { grid-column: 1 / -1; }
}

/* ── Presse & Material: Zeilen-Anatomie der Presse-Seite (Paul 25.08.) ────── */
.pdp-subhead { margin: 34px 0 14px; font-size: 14px; color: var(--hn-ink2, #86868B); }
.pdp-subhead:first-child { margin-top: 0; }
.pdp-liste { list-style: none; margin: 0; padding: 0; }
.pdp-zeile {
  display: grid; grid-template-columns: 130px minmax(0, 1fr) auto;
  gap: 18px; align-items: baseline;
  padding: 14px 0; border-bottom: 0.5px solid var(--hn-hair, #E8E8ED);
}
.pdp-zeile:first-child { border-top: 0.5px solid var(--hn-hair, #E8E8ED); }
.pdp-datum { color: var(--hn-ink2, #86868B); font-size: 14px; font-variant-numeric: tabular-nums; }
.pdp-titel { font-size: 15.5px; }
.pdp-folgt { color: var(--hn-ink2, #86868B); font-size: 13.5px; }
@media (max-width: 700px) {
  .pdp-zeile { grid-template-columns: 1fr auto; }
  .pdp-datum { grid-column: 1 / -1; }
}
/* Material (Sarah 21.09.): Liste + Viewer aus anhang-viewer.css, hier als
   letzter Block der Sektion. Steht sie direkt unter der Überschrift (keine
   Presse-Zeilen), entfallen Abstand und Hairline oben — wie .pdp-subhead:first-child. */
.pd-presse .pd-section__head + .sfkuk-material { margin-top: 0; padding-top: 0; border-top: 0; }

/* Alt-Akzente (Rot/fette Buttons) → reduziert */
.pd .btn, .pd .pd-pdfpill {
  border-radius: 0 !important; background: transparent; border: 0; padding: 0;
  color: var(--hn-ink, #1D1D1F);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.pd .btn:hover, .pd .pd-pdfpill:hover { color: var(--hn-navy, #284158); background: transparent; }
.pd .btn--solid { background: transparent !important; color: var(--hn-ink, #1D1D1F) !important; }

/* ── Veranstaltungs-Detail: Termin & Anfahrt im System (28.08.) ────────────── */
.pd .evd-card {
  background: transparent; border: 0; box-shadow: none; border-radius: 0 !important;
  padding: 0; display: flex; flex-direction: column; gap: 16px;
}
.pd .evd-card__row { display: flex; flex-direction: column; gap: 6px; }
.pd .evd-card__row .pd-fact__label { font-size: 14px; color: var(--hn-ink2, #86868B); text-transform: none; letter-spacing: 0; }
.pd .evd-card__row .pd-fact__value { font-size: 16px; color: var(--hn-ink, #1D1D1F); }
.pd .evd-card__actions { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 8px; }
.pd .evd-vorbei { font-size: 14px; color: var(--hn-ink2, #86868B); }
/* Karte zum Ort (Sichtprüfung 29.10.): Google Maps erst nach Einwilligung, im
   Aussehen der Reihen-Karte (.pdk-*, weiter unten). Hier nur, was die schmalere
   Spalte neben der Termin-Karte braucht: Bühne füllt die Zeilenhöhe, Hinweis
   breiter, kein Abstand unten; das iframe entsättigt wie die OSM-Kacheln. */
.pd .pdk--ort { display: flex; flex-direction: column; margin: 0; min-width: 0; }
.pd .pdk--ort .pdk-buehne { flex: 1 1 auto; height: auto; min-height: 340px; }
.pd .pdk--ort .pdk-hinweis { width: min(440px, 62%); }
.pd .pdk--ort .pdk-schema { left: min(440px, 62%); }
.pd .pdk--ort iframe.pdk-karte { width: 100%; height: 100%; border: 0; filter: grayscale(1); }
.pd .pdk--ort .evk-extern { font-size: 14px; }
@media (max-width: 700px) {
  .pd .pdk--ort .pdk-hinweis { width: auto; }
  .pd .pdk--ort .pdk-schema { left: 0; }
}

/* Lightbox-Steuerung wie der Landing-Slider (Paul 08/2026): weiße Kreise mit
   Hairline, dunkles Glyph — X und Pfeile identisch. Bewusste Rundungs-Ausnahme. */
.pd .pd-lightbox__close, .pd .pd-lightbox__nav {
  width: 42px; height: 42px;
  border-radius: 999px !important;
  background: #fff; border: 0.5px solid var(--hn-hair2, #D2D2D7);
  color: var(--hn-ink, #1D1D1F);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1; padding: 0;
}
.pd .pd-lightbox__close:hover, .pd .pd-lightbox__nav:hover {
  background: #fff; border-color: var(--hn-ink2, #86868B);
}
/* Zähler und Bild wechseln gemeinsam (Sichtprüfung 29.10.): lädt das Zielbild
   noch, bleibt das alte stehen und blendet erst nach kurzer Verzögerung dezent
   ab, damit schnelle Wechsel nicht flackern. */
.pd-lightbox__img img, .pd-lightbox__img svg { transition: opacity 0.2s ease; }
.pd-lightbox.ist-laedt .pd-lightbox__img img,
.pd-lightbox.ist-laedt .pd-lightbox__img svg { opacity: 0.6; transition-delay: 0.15s; }
.pd-lightbox.ist-laedt .pd-lightbox__stage { cursor: progress; }

/* ── Hinweis-Seiten der Shells (Sichtprüfung 29.10.) ──────────────────────────
   „Projekt nicht gefunden" und „Veranstaltung noch nicht online" (PdHinweisSeite)
   im Aufbau der statischen 404-Seite: Mikrozeile, großer Titel links, ruhiger
   Text, unterstrichene CTAs. Schrift, Farben, keine Rundungen über .hn-page. */
.pd-hinweis { padding: clamp(64px, 12vh, 140px) var(--hn-pad) 96px; min-height: 56vh; }
.pd-hinweis__mikro { margin: 0 0 10px; font-size: 14px; color: var(--hn-ink2); }
.pd-hinweis__titel {
  margin: 0; color: var(--hn-ink); text-wrap: balance;
  font-family: inherit; font-weight: 400; letter-spacing: -0.02em;
  font-size: clamp(34px, 4.6vw, 58px); line-height: 1.05;
}
.pd-hinweis__text { margin: 22px 0 0; max-width: 52ch; font-size: 16px; font-weight: 300; line-height: 1.6; color: var(--hn-ink); }
.pd-hinweis__ctas { margin-top: 36px; display: flex; gap: 14px 32px; flex-wrap: wrap; }
/* Archiv-Kurzseite (02.11.): Ort/Jahr und Kurztext der alten Website zwischen
   Titel und Hinweis; der Hinweis tritt dahinter grau zurück. */
.pd-archiv__ort { margin: 14px 0 0; font-size: 15px; color: var(--hn-ink2); }
.pd-archiv__exzerpt { margin: 28px 0 0; max-width: 60ch; font-size: 17px; font-weight: 300; line-height: 1.6; color: var(--hn-ink); }
.pd-archiv .pd-hinweis__text { font-size: 14px; color: var(--hn-ink2); }

@media (max-width: 700px) {
  .pdz-hero:where(:not(.pdz-hero--mosaik)) .pd-img,
  .pdz-hero:where(:not(.pdz-hero--mosaik)) img { height: 46vh; }
  .pdz-info { grid-template-columns: 1fr 1fr; gap: 20px; }
  .pdz-einzug { grid-template-columns: 1fr; }
  .pdz-einzug__spacer { display: none; }
}

/* ── Projektreihe (Paul 30.08.): Tochterprojekte auf der Mutter-Detailseite ── */
.pd-reihe__zahl { margin: 0; font-size: 14.5px; color: var(--hn-ink2); white-space: nowrap; }
.pd-reihe__grid { row-gap: clamp(44px, 5vw, 72px); }

/* ── Standort-Karte der Reihe (Idee Walter Smerling, Paul 19.10.) ──────────────
   Graue Bühne wie das Hero, Punkte als Tinten-Quadrate, Etiketten mit Hairline.
   Platzhalter und Karte gleich groß (kein Layout-Sprung nach dem Klick).
   z-index: 0 macht die Bühne zum eigenen Stapelkontext, sonst lägen die
   Leaflet-Ebenen (400 bis 1000) über der Sticky-Navigation. */
.pdk { margin: 0 0 clamp(44px, 5vw, 72px); }
.pdk-buehne {
  position: relative; z-index: 0; overflow: hidden;
  height: clamp(340px, 38vw, 560px); background: #F5F5F7;
}
.pdk-karte { position: absolute; inset: 0; }
.pdk-schema { position: absolute; top: 0; right: 0; bottom: 0; left: min(440px, 38%); }
.pdk-anker { position: absolute; width: 0; height: 0; }
.pdk-schema .pdk-pin { opacity: 0.38; cursor: default; }

/* Punkt (ohne Nummer 12 px, mit Nummer 22 px) + Etikett rechts daneben;
   der Anker sitzt genau in der Punktmitte. */
.pdk-pin {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
  transform: translate(-6px, -50%); cursor: pointer;
}
.pdk-pin--nr { transform: translate(-11px, -50%); }
.pdk-pin__punkt {
  flex: none; width: 12px; height: 12px; background: var(--hn-ink, #1D1D1F);
  box-shadow: 0 0 0 1.5px #fff;
}
.pdk-pin--nr .pdk-pin__punkt {
  width: 22px; height: 22px; color: #fff; text-align: center;
  font-size: 12px; line-height: 22px; font-variant-numeric: tabular-nums;
}
.pdk-pin__titel {
  font-size: 13px; line-height: 1.2; padding: 3px 7px;
  background: #fff; color: var(--hn-ink, #1D1D1F); border: 0.5px solid var(--hn-hair2, #D2D2D7);
}
.pdk-pin--links { flex-direction: row-reverse; transform: translate(calc(-100% + 6px), -50%); }
.pdk-pin--nr.pdk-pin--links { transform: translate(calc(-100% + 11px), -50%); }
.pdk-pin--still .pdk-pin__titel { visibility: hidden; }
.pdk .pdk-marker { width: 0; height: 0; }
.pdk .pdk-marker:hover .pdk-pin__titel, .pdk .pdk-marker:focus .pdk-pin__titel,
.pdk .pdk-marker.ist-offen .pdk-pin__titel { visibility: visible; }
.pdk .pdk-marker:hover .pdk-pin__punkt, .pdk .pdk-marker.ist-offen .pdk-pin__punkt { background: var(--hn-navy, #284158); }
.pdk .pdk-marker:focus { outline: none; }
.pdk .pdk-marker:focus-visible .pdk-pin__punkt { outline: 2px solid var(--hn-navy, #284158); outline-offset: 2px; }

/* Einwilligungs-Hinweis auf dem Platzhalter */
.pdk-hinweis {
  position: absolute; left: 0; bottom: 0; width: min(440px, 38%);
  padding: 22px 24px 20px; background: #fff;
  border-top: 0.5px solid var(--hn-hair2, #D2D2D7); border-right: 0.5px solid var(--hn-hair2, #D2D2D7);
}
.pdk-hinweis__titel { margin: 0 0 8px; font-size: 16px; color: var(--hn-ink, #1D1D1F); }
.pdk-hinweis__text { margin: 0 0 14px; font-size: 14px; line-height: 1.45; color: var(--hn-ink2, #86868B); }
.pdk-hinweis__klein { margin: 10px 0 0; font-size: 12.5px; color: var(--hn-ink2, #86868B); }
.pdk-knopf, .pdk-aus {
  background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
  color: var(--hn-ink, #1D1D1F);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.pdk-knopf { font-size: 15px; }
.pdk-aus { font-size: 13.5px; color: var(--hn-ink2, #86868B); }
.pdk-knopf:hover, .pdk-aus:hover { color: var(--hn-navy, #284158); }
.pdk-fuss {
  display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
  margin-top: 10px; font-size: 13.5px; color: var(--hn-ink2, #86868B);
}

/* Leaflet im Seitenstil: Schrift der Seite, eckig, Hairlines statt Schatten */
.pdk .leaflet-container { font-family: inherit; font-size: 14px; background: #F5F5F7; }
/* OSM-Kacheln entsättigt (wie die Karte der Veranstaltungsseite): Grau dominiert */
/* je Kachel statt am Pane: der Pane-Filter zeigt bei halben Zoomstufen Nähte.
   will-change am Kachel-Container nimmt Chrome die hellen Haarlinien zwischen
   den Kacheln auf Retina-Displays. */
.pdk .leaflet-tile { filter: grayscale(1) contrast(0.9) brightness(1.06); }
.pdk .leaflet-tile-container { will-change: transform; }
.pdk .leaflet-control-zoom.leaflet-bar { border: 0.5px solid var(--hn-hair2, #D2D2D7); box-shadow: none; margin: 14px 14px 0 0; }
.pdk .leaflet-control-zoom.leaflet-bar a {
  width: 34px; height: 34px; line-height: 33px; font: 300 20px/33px "Pepe Mory", "Inter", -apple-system, sans-serif;
  color: var(--hn-ink, #1D1D1F); background: #fff; border-bottom: 0.5px solid var(--hn-hair, #E8E8ED);
}
.pdk .leaflet-control-zoom.leaflet-bar a:last-child { border-bottom: 0; }
.pdk .leaflet-control-zoom.leaflet-bar a:hover { color: var(--hn-navy, #284158); background: #fff; }
.pdk .leaflet-control-attribution { font-size: 11px; color: var(--hn-ink2, #86868B); background: rgba(255, 255, 255, 0.85); }
.pdk .leaflet-control-attribution a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.pdk .leaflet-popup-content-wrapper {
  padding: 0; background: #fff; color: var(--hn-ink, #1D1D1F);
  border: 0.5px solid var(--hn-hair2, #D2D2D7); box-shadow: 0 2px 14px rgba(0, 0, 0, 0.10);
}
.pdk .leaflet-popup-content { margin: 16px 34px 16px 18px; font-size: 15px; line-height: 1.3; }
.pdk .leaflet-popup-tip { box-shadow: none; border: 0.5px solid var(--hn-hair2, #D2D2D7); }
.pdk .leaflet-container a.leaflet-popup-close-button { top: 6px; right: 6px; color: var(--hn-ink2, #86868B); font: 300 20px/24px "Pepe Mory", "Inter", sans-serif; }
.pdk .leaflet-container a.leaflet-popup-close-button:hover { color: var(--hn-ink, #1D1D1F); }
.pdk .pdk-pop__z1, .pdk .pdk-pop__z2 { margin: 0; }
.pdk .pdk-pop__z2 { color: var(--hn-ink2, #86868B); }
.pdk .pdk-pop__ort { margin: 8px 0 0; font-size: 13.5px; color: var(--hn-ink2, #86868B); }
.pdk .leaflet-container a.pdk-pop__link {
  display: inline-block; margin-top: 12px; font-size: 14.5px; color: var(--hn-ink, #1D1D1F);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.pdk .leaflet-container a.pdk-pop__link:hover { color: var(--hn-navy, #284158); }

@media (max-width: 700px) {
  .pdk-buehne { height: auto; aspect-ratio: 4 / 5; max-height: 74vh; }
  .pdk-schema { left: 0; bottom: 236px; }
  .pdk-hinweis { width: auto; right: 0; padding: 18px 20px 16px; border-right: 0; }
  .pdk-fuss { flex-direction: column; gap: 6px; }
}

/* Dicht beieinander stehende Werke (Walk: Pin 1 und 10, Review 02.11.): die
   Pins rücken auseinander (reihe-karte.jsx, pdkSpreizen), eine Hairline mit
   kleinem Quadrat zeigt bei größerem Versatz den echten Standort. */
.pdk-leine {
  position: absolute; left: 0; top: 0; height: 0; pointer-events: none;
  border-top: 1px solid var(--hn-ink, #1D1D1F); transform-origin: 0 0;
}
.pdk-leine::before {
  content: ""; position: absolute; left: -2.5px; top: -3px;
  width: 5px; height: 5px; background: var(--hn-ink, #1D1D1F);
}

/* ── Gestaltete Karte der Reihe (Karte Ilke 27.10.) ─────────────────────────────
   Grundkarte + Etiketten-Überleger der Designerin unter der interaktiven
   Karte, je Etikett ein unsichtbarer Link (reihe-grafik.jsx). Die Bühne hält
   das Seitenverhältnis der Vorlage, die Bilder liegen deckungsgleich darin. */
.pdg { margin: 0 0 clamp(44px, 5vw, 72px); }
.pdg-figur { margin: 0; }
.pdg-buehne { position: relative; width: 100%; overflow: hidden; background: #F5F5F7; }
.pd .pdg-buehne img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  display: block; user-select: none; -webkit-user-select: none;
}
.pdg-link { position: absolute; z-index: 2; display: block; }
.pdg-link:hover { box-shadow: 0 0 0 1.5px var(--hn-red, #FE0000); }
.pdg-link:focus { outline: none; }
.pdg-link:focus-visible { box-shadow: 0 0 0 2px var(--hn-red, #FE0000), 0 0 0 4px #fff; }
.pd .pdg-copy, .pdg-voll__copy { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--hn-ink2, #86868B); }
.pdg-copy a, .pdg-voll__copy a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }

/* „Karte vergrößern": bis 1100 px als Feld oben rechts (dort liegt kein
   Etikett, unten rechts steht die 6; auch in Salzburg ist oben rechts frei), bis 700 px ist die
   ganze Karte die Schaltfläche (Etiketten dort zu klein zum Antippen). */
.pdg-gross { display: none; }
@media (max-width: 1100px) {
  .pdg-gross {
    display: block; position: absolute; top: 0; right: 0; z-index: 3;
    margin: 0; padding: 0; border: 0; background: none; cursor: zoom-in;
    font-family: inherit; color: var(--hn-ink, #1D1D1F);
  }
  .pdg-gross__marke {
    display: inline-flex; align-items: center; gap: 7px; margin: 10px;
    padding: 7px 10px; font-size: 13px; line-height: 1;
    background: #fff; border: 0.5px solid var(--hn-hair2, #D2D2D7);
  }
  .pdg-gross:hover .pdg-gross__marke { border-color: var(--hn-ink2, #86868B); }
  .pdg-gross:focus { outline: none; }
  .pdg-gross:focus-visible .pdg-gross__marke { outline: 2px solid var(--hn-navy, #284158); outline-offset: 2px; }
}
@media (max-width: 700px) {
  .pdg-gross { bottom: 0; left: 0; display: flex; align-items: flex-start; justify-content: flex-end; }
  .pdg-figur > .pdg-buehne .pdg-link { display: none; }
}

/* Nummerierte Liste: Zeilen-Anatomie wie Termine/Presse (Hairlines).
   Vierte Spalte: Link „Route" / "Directions" zu Google Maps (Paul 09.11.: nur
   die gestaltete Karte, wo es eine gibt). Feste Breite, damit die Spalten
   auch in Zeilen ohne Link (Walk Nr. 2) bündig bleiben. */
.pdg-liste { list-style: none; margin: 22px 0 0; padding: 0; }
.pdg-zeile {
  display: grid; grid-template-columns: 34px minmax(0, 1.1fr) minmax(0, 1fr) 76px;
  gap: 18px; align-items: baseline;
  padding: 13px 0; border-bottom: 0.5px solid var(--hn-hair, #E8E8ED);
}
.pdg-zeile:first-child { border-top: 0.5px solid var(--hn-hair, #E8E8ED); }
.pdg-nr { color: var(--hn-red, #FE0000); font-size: 15.5px; font-variant-numeric: tabular-nums; }
.pdg-ort { font-size: 15.5px; color: var(--hn-ink, #1D1D1F); }
/* Hinweis hinter dem Ort, z. B. Walk Nr. 2 „im Moment nicht ausgestellt" (Karte Salzburg, Sarah 09.11.) */
.pdg-hinweis { color: var(--hn-ink2, #86868B); }
.pdg-werk { font-size: 14.5px; color: var(--hn-ink2, #86868B); }
.pd a.pdg-werk {
  color: var(--hn-ink, #1D1D1F);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.pd a.pdg-werk:hover { color: var(--hn-navy, #284158); }
/* Route-Link: wie der Werk-Link (Tinte, unterstrichen), etwas kleiner,
   rechtsbündig. Polster mit Gegen-Rand: größere Tippfläche ohne Einfluss
   auf die Zeilenhöhe. */
.pd a.pdg-route {
  grid-column: 4; justify-self: end;
  padding: 6px 0; margin: -6px 0;
  font-size: 13.5px; white-space: nowrap; color: var(--hn-ink, #1D1D1F);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.pd a.pdg-route:hover { color: var(--hn-navy, #284158); }
.pd a.pdg-route:focus { outline: none; }
.pd a.pdg-route:focus-visible { outline: 2px solid var(--hn-navy, #284158); outline-offset: 2px; }
@media (max-width: 700px) {
  /* Handy: Ort und Route in der ersten Zeile, das Werk darunter über beide Spalten */
  .pdg-zeile { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 4px 10px; }
  .pdg-werk { grid-column: 2 / -1; }
  /* unten weniger Polster: die Tippfläche bleibt über dem Werk-Link darunter */
  .pd a.pdg-route { grid-column: 3; grid-row: 1; padding-bottom: 2px; margin-bottom: -2px; }
}

/* Vollbild: weiße Fläche über allem (auch Navigation und Lightbox-Ebene),
   Karte 1200 px breit, in beide Richtungen verschiebbar. */
.pdg-voll {
  position: fixed; inset: 0; z-index: 1250;
  display: flex; flex-direction: column; background: #fff;
}
.pdg-voll__kopf {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px var(--hn-pad, 20px); border-bottom: 0.5px solid var(--hn-hair2, #D2D2D7);
}
.pdg-voll__titel { margin: 0; font-size: 15px; color: var(--hn-ink, #1D1D1F); }
.pdg-voll__zu {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 0;
  background: none; border: 0; cursor: pointer; font-family: inherit; font-size: 14.5px;
  color: var(--hn-ink, #1D1D1F);
}
.pdg-voll__zu span { font-size: 22px; line-height: 1; font-weight: 300; }
.pdg-voll__zu:hover { color: var(--hn-navy, #284158); }
.pdg-voll__zu:focus { outline: none; }
.pdg-voll__zu:focus-visible { outline: 2px solid var(--hn-navy, #284158); outline-offset: 3px; }
.pdg-voll__flaeche {
  flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; background: #F5F5F7;
}
.pdg-voll .pdg-buehne { width: max(1200px, 100%); }
.pdg-voll .pdg-buehne img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block;
}
.pdg-voll__copy { flex: none; margin: 0; padding: 8px var(--hn-pad, 20px); border-top: 0.5px solid var(--hn-hair2, #D2D2D7); }

/* ── CMS-Vorschau (Paul 21.09.): leere Bühne beim Laden + Fallback-Banner ──
   (Das System-Banner kommt aus home-neu.js; dieses hier greift nur ohne
   Helfer oder wenn die Vorschau nicht geladen werden konnte.) */
.pd-vorschau__leer { min-height: 70vh; background: #fff; }
.pd-vorschau {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1300;
  padding: 10px var(--hn-pad, 48px);
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  background: #1D1D1F; color: #fff;
  font-family: "Pepe Mory", "Inter", -apple-system, sans-serif;
  font-size: 13.5px; line-height: 1.4; text-align: center;
}
.pd-vorschau--fehler { background: #FE0000; }

/* ── 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; }