/* Interventionsatlas – Styles, nur im Shadow Root aktiv. */
:host {
  all: initial;
  display: block;
  --black: #000;
  --white: #fff;
  --red: #dd3636;
  --map-bg: #b0bff7;
  --grey-1: #b4b4b4;
  --grey-2: #cbcbcb;
  --grey-3: #e2e2e2;
  --radius-l: 69px;
  --radius-m: 50px;
  --font: "NETTZ App Space Grotesk", system-ui, sans-serif;
  --text: clamp(16px, 1.3vw, 25px);
  --label: clamp(15px, 1.6vw, 32px);
  --panel-title: clamp(24px, 2.35vw, 45px);
}

*, *::before, *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
.app {
  font-family: var(--font);
  font-size: var(--text);
  line-height: 1.32;
  letter-spacing: .02em;
  color: var(--black);
  background: var(--white);
}
a { color: inherit; text-decoration: underline; text-underline-offset: .15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; border-radius: 6px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
button { font: inherit; color: inherit; letter-spacing: inherit; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: min(100vh, 64.4vw);
  padding: clamp(24px, 5.3vw, 101px) clamp(16px, 8.5vw, 164px);
  background: #c9d3e6 url("img/hero.webp") center / cover no-repeat;
}
.hero__card {
  position: relative;
  max-width: min(100%, max(55.5vw, 560px));
  padding: clamp(28px, 3.6vw, 69px) clamp(24px, 3.6vw, 69px) clamp(28px, 3vw, 56px);
  background: var(--white);
  border-radius: clamp(28px, 3.6vw, var(--radius-l));
}
.hero__title { margin: 0; font-size: clamp(30px, 2.9vw, 56px); line-height: 1.12; font-weight: 700; }
.hero__subtitle { margin: .35em 0 1.1em; font-size: clamp(20px, 2.1vw, 40px); line-height: 1.15; font-weight: 700; }
.hero__text { margin: 0 0 1.4em; }
.hero__discover {
  display: inline-flex; align-items: center; gap: .15em;
  font-size: clamp(22px, 2.35vw, 45px); font-weight: 700; text-decoration: underline;
}
.hero__discover svg { width: .55em; height: .55em; }

/* Info "i" with speech bubble. --s = px per design px (1920px artboard). */
.info { position: absolute; z-index: 10; --size: calc(101 * var(--s)); width: var(--size); height: var(--size); }
.info__button {
  display: grid; place-items: center; width: 100%; height: 100%;
  padding: 0; border: calc(5 * var(--s)) solid var(--red); border-radius: 50%;
  background: var(--red); color: var(--white);
  font-size: calc(67 * var(--s)); font-weight: 700; line-height: 1; cursor: pointer;
  transition: background-color .3s ease-out, color .3s ease-out, border-color .3s ease-out;
}
.info__button:hover, .info.is-open .info__button { background: var(--white); color: var(--black); border-color: var(--black); }
.info__bubble {
  position: absolute; left: calc(var(--size) + 57 * var(--s)); top: calc(-39 * var(--s));
  width: var(--bubble-w); padding: var(--bubble-pad);
  background: var(--bubble-bg); border-radius: calc(42 * var(--s));
  font-size: max(14px, calc(22 * var(--s))); line-height: 1.36;
  opacity: 0; visibility: hidden; translate: -10px 0;
  transition: opacity .3s ease-out, translate .3s ease-out, visibility 0s linear .3s;
}
.info.is-open .info__bubble { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .3s ease-out, translate .3s ease-out; }
.info__bubble::before {
  content: ""; position: absolute; left: calc(-57 * var(--s) - 1px); top: calc(39 * var(--s) + var(--size) / 2 - 30.5 * var(--s));
  width: calc(63 * var(--s)); height: calc(61 * var(--s));
  background: inherit; clip-path: polygon(0 50%, 100% 0, 100% 100%);
}
.info__bubble p { margin: 0; }

.hero__info {
  --s: max(0.6px, min(1px, 100vw / 1920));
  --bubble-bg: var(--white); --bubble-w: calc(503 * var(--s)); --bubble-pad: calc(52 * var(--s));
  top: calc(-10 * var(--s)); right: calc(-35 * var(--s));
}
.hero__info .info__bubble { min-height: calc(705 * var(--s)); }
.credits__eu { display: block; width: calc(119 * var(--s)); min-width: 80px; margin-top: calc(56 * var(--s)); }
@media (max-width: 1200px) {
  /* Not enough room to the right: open below the button, tail pointing up. */
  .hero__info .info__bubble {
    left: auto; right: 0; top: calc(var(--size) + 24px);
    width: min(503px, calc(100vw - 32px)); min-height: 0; padding: 28px; translate: 0 -10px;
    box-shadow: 0 10px 40px rgb(0 0 0 / .25);
  }
  .hero__info.is-open .info__bubble { translate: 0 0; }
  .hero__info .info__bubble::before {
    left: auto; right: calc(var(--size) / 2 - 15px); top: -24px; width: 30px; height: 25px;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
  }
}

/* ---------- Atlas (desktop: positions taken 1:1 from the 1920px artboard) ---------- */
.atlas { container-type: inline-size; position: relative; padding-bottom: 2.5cqw; }
.stage { position: relative; height: calc(1090 / 19.2 * 1cqw); }
.stage > * { position: absolute; }
.timeline-graphic { left: calc(73 / 19.2 * 1cqw); top: calc(77 / 19.2 * 1cqw); width: calc(1758 / 19.2 * 1cqw); }
.phases { left: 0; top: calc(130 / 19.2 * 1cqw); width: 100%; margin: 0; padding: 0; list-style: none; }
.phases li {
  position: absolute; transform: translateX(-50%); white-space: nowrap;
  font-size: calc(32 / 19.2 * 1cqw); font-weight: 500;
}
.atlas__info {
  --s: calc(1cqw / 19.2);
  --bubble-bg: #e3e3e3; --bubble-w: max(240px, calc(420 * var(--s))); --bubble-pad: calc(30 * var(--s)) calc(53 * var(--s));
  left: calc(239 * var(--s)); top: calc(40 * var(--s));
}
.atlas__info .info__bubble { top: calc(-32 * var(--s)); left: calc(var(--size) + 56 * var(--s)); min-height: calc(166 * var(--s)); display: flex; align-items: center; }
.atlas__info .info__bubble::before { top: calc(32 * var(--s) + var(--size) / 2 - 30.5 * var(--s)); left: calc(-56 * var(--s) - 1px); }
.atlas__hint { display: none; }
.brace { left: calc(265 / 19.2 * 1cqw); top: calc(606 / 19.2 * 1cqw); width: calc(1390 / 19.2 * 1cqw); }

.category-list { margin: 0; padding: 0; list-style: none; }
.stage .category-list, .tree { inset: 0; }
.tree { pointer-events: none; }
.tree > * { pointer-events: auto; }
.category { --c: #999; }
.stage .category, .tree .category {
  position: absolute; z-index: 3; transform: translateX(-50%);
  width: calc(320 / 19.2 * 1cqw);
}
.stage .category:focus-within { z-index: 6; }
.stage .category.is-active { z-index: 5; }
.category-button {
  display: flex; flex-direction: column; align-items: center; gap: .6em;
  width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
  font-weight: 500; line-height: 1.05; text-align: center;
}
.stage .category-button { font-size: calc(32 / 19.2 * 1cqw); }
.tree .category-button { font-size: calc(28 / 19.2 * 1cqw); }
.icon {
  position: relative; display: block; flex: none;
  width: calc(227 / 19.2 * 1cqw); aspect-ratio: 1;
  transition: transform .3s ease-out;
}
.tree .icon { width: calc(180 / 19.2 * 1cqw); }
.icon img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }
/* Radar pulse: rings in the category color run from the circle outwards. */
/* One ring per cycle, then a pause in which nothing is left around the icon. */
.icon::before {
  content: ""; position: absolute; left: var(--rx, 50%); top: var(--ry, 50%);
  width: var(--rd, 100%); aspect-ratio: 1; border-radius: 50%;
  background: var(--c); translate: -50% -50%; opacity: 0;
  animation: radar 3s cubic-bezier(.2, .6, .35, 1) infinite;
}
/* Icons hidden behind an open panel stay still. */
.category.is-covered .icon::before { animation: none; }
@keyframes radar {
  0%        { scale: .95; opacity: .6; }
  45%, 100% { scale: 1.4; opacity: 0; }
}
.category-button:hover .icon, .category-button:focus-visible .icon, .category-button[aria-expanded="true"] .icon { transform: scale(1.1); }
.category-button:focus-visible { outline: none; }
.category-button:focus-visible .icon img { outline: 3px solid var(--red); outline-offset: 6px; border-radius: 50%; }
/* The open node's label gives way to its panel title (still read by screen readers). */
.category.is-active > .category-button .label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* While one of the five timeline categories is open, brace and cross-cutting category step back. */
.atlas.is-open-timeline .brace, .atlas.is-open-timeline .category--cross { display: none; }

.tree-lines { position: absolute; left: 0; top: 0; width: 100%; z-index: 1; overflow: visible; }

.scroll-down {
  display: block; width: calc(40 / 19.2 * 1cqw); min-width: 24px; margin: 2cqw auto 0;
}
.scroll-down svg { display: block; width: 100%; }

/* ---------- Detail panels ---------- */
.panel {
  position: relative; isolation: isolate;
  border-radius: clamp(24px, 2.6vw, var(--radius-m));
  background: var(--panel-bg);
}
/* Tail with a block below it, so it also fills the rounded corner when it sits near the edge. */
.panel.has-tail::before {
  content: ""; position: absolute; top: -22px; left: max(22px, var(--arrow-x, 50%)); translate: -50% 0;
  width: 44px; height: 74px; background: var(--panel-bg); z-index: -1;
  clip-path: polygon(50% 0, 100% 23px, 100% 100%, 0 100%, 0 23px);
}
.panel__close {
  position: absolute; top: clamp(10px, 1.1vw, 22px); right: clamp(10px, 1.1vw, 22px); z-index: 1;
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  transition: background-color .2s ease-out;
}
.panel__close:hover { background: rgb(0 0 0 / .1); }
.panel__close svg { width: 18px; height: 18px; }
.panel :is(h2, h3, h4, h5) { padding-right: 36px; }
.panel.is-new { animation: panel-in .35s ease-out; }
@keyframes panel-in { from { opacity: 0; translate: 0 10px; } }
.panel h2, .panel h3, .panel h4, .panel h5 { margin: 0 0 .5em; line-height: 1.1; font-weight: 700; }
.panel :is(h2, h3, h4, h5):focus { outline: none; }
.panel p { margin: 0; }
.tree .panel {
  position: absolute; z-index: 4;
  padding: calc(48 / 19.2 * 1cqw) calc(60 / 19.2 * 1cqw);
  font-size: max(14px, calc(25 / 19.2 * 1cqw));
}
.tree .panel :is(h2, h3, h4, h5) { font-size: max(20px, calc(45 / 19.2 * 1cqw)); }
.tree .panel.is-right { padding-left: calc(92 / 19.2 * 1cqw); }
.tree .panel.is-left { padding-right: calc(92 / 19.2 * 1cqw); }
.tree .panel.is-left .panel__close { right: calc(48 / 19.2 * 1cqw); }

/* ---------- Map ---------- */
.map { padding: clamp(40px, 5vw, 100px) clamp(16px, 11.8vw, 226px); background: var(--map-bg); }
.map h2 { margin: 0 0 .6em; font-size: clamp(26px, 2.6vw, 50px); line-height: 1.15; font-weight: 700; }
.map p { max-width: 1440px; margin: 0; }
.map img { display: block; width: min(1150px, 100%); height: auto; margin: clamp(24px, 3vw, 60px) 0; }

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

/* ---------- Small screens: use the width ---------- */
@media (max-width: 600px) {
  .hero { padding: 28px 10px 24px; }
  .hero__card { padding: 26px 18px 22px; border-radius: 24px; }
  .hero__subtitle { margin-bottom: .8em; }
  .hero { padding-top: 40px; }
  .hero__info { --s: 0.5px; top: -24px; right: 8px; }
  .map { padding: 32px 16px 36px; }
  .map img { margin: 20px 0; }
}

/* ---------- Mobile: grid of categories, details as a vertical tree under the tapped icon ---------- */
@media (max-width: 800px) {
  .stage { height: auto !important; padding: 32px 16px 0; }
  .stage > * { position: static; }
  .timeline-graphic, .brace, .phases, .atlas__info, .tree { display: none; }
  .atlas__hint { display: block; margin: 0 0 24px; text-align: center; }
  .stage .category-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
  .stage .category { position: static; transform: none; width: auto; }
  .stage .category-button { font-size: 17px; }
  .stage .category-button .icon { width: min(140px, 36vw); }
  .stage .category[data-phase]::before {
    content: attr(data-phase); display: block; margin-bottom: 8px;
    font-size: 13px; text-align: center; color: #555;
  }
  .atlas.is-open-timeline .category--cross { display: block; }
  .scroll-down { margin-top: 32px; }

  .m-details { grid-column: 1 / -1; margin-top: 4px; }
  .m-details .panel, .m-tree .panel { padding: 24px; font-size: 16px; margin-top: 22px; }
  .m-details .panel :is(h2, h3, h4, h5), .m-tree .panel :is(h2, h3, h4, h5) { font-size: 22px; }
  .m-tree { margin: 0 0 0 30px; padding: 0; list-style: none; }
  .stage .m-tree > .category { position: relative; padding: 14px 0 0 24px; }
  /* Tree lines: a tick into each icon, the vertical runs on until the last item. */
  .m-tree > .category::before {
    content: ""; position: absolute; left: 0; top: 44px; width: 20px; border-top: 3px solid var(--line);
  }
  .m-tree > .category::after {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: 3px solid var(--line);
  }
  .m-tree > .category:last-child::after { bottom: auto; height: 47px; }
  .m-tree .category-button { flex-direction: row; gap: 14px; font-size: 17px; text-align: left; }
  .m-tree .category-button .icon { width: 64px; }
  .m-tree .m-children { margin-top: 0; }
  .m-tree .m-children > .m-tree { margin-left: 30px; }
  /* The tail sits right at the left corner here: keep that corner nearly square, no notch. */
  .m-tree .panel.has-tail { border-top-left-radius: 8px; }
}
  
/* Drupal: body text from the node, anchors below the fixed site header. */
.hero__text { margin: 0 0 1.4em; }
.hero__text p { margin: 0 0 .8em; }
.hero__text p:last-child { margin-bottom: 0; }
[id] { scroll-margin-top: 110px; }
.panel { scroll-margin-top: 110px; }
.map__embed { margin: clamp(24px, 3vw, 60px) 0; }
.map__embed img { margin: 0; }