@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/BricolageGrotesque-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/BricolageGrotesque-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

:root {
  --white:     #ffffff;
  --grey:      #ecedef;
  --dark:      #2a2d2e;
  --teal:      #005063;
  --teal-deep: #051D23;
  --muted:     #7c878d;
  --silver:    #a8acaf;
  --font:      'Bricolage Grotesque', sans-serif;
  --s: 1; /* scale factor: window.innerHeight / 725 — set via JS */
}

html, body {
  height: 100%;
  overflow: hidden;
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  background: var(--teal-deep);
}

a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
a:hover { opacity: 0.5; }
img { display: block; border: none; outline: none; }

.bg-grey      { background: var(--grey);      }
.bg-teal      { background: var(--teal);      }
.bg-teal-deep { background: var(--teal-deep); }

/* ── TRACK ──────────────────────────────────────────────── */

.track {
  display: flex;
  height: 100vh;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.track::-webkit-scrollbar { display: none; }

/* ── BASE PANEL ─────────────────────────────────────────── */

.panel {
  flex-shrink: 0;
  height: 100vh;
}

/* ── HERO ───────────────────────────────────────────────── */

.panel--hero {
  width: 83vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(60px * var(--s)) 0 calc(60px * var(--s)) calc(60px * var(--s));
  position: relative;
  z-index: 1;
  overflow: visible;
}

h1 {
  font-size: clamp(calc(3rem * var(--s)), 9.7vw, calc(11rem * var(--s)));
  font-weight: 600;
  line-height: 0.88;
  letter-spacing: -0.03em;
  color: var(--white);
  text-align: right;
  position: relative;
  z-index: 1;
  margin-right: -5.8vw;
}

.byline {
  font-size: calc(40px * var(--s));
  font-weight: 600;
  line-height: calc(50px * var(--s));
  letter-spacing: -0.01em;
  color: var(--muted);
  position: relative;
  z-index: 1;
}

/* ── TEXT PANELS ────────────────────────────────────────── */

.panel--text {
  width: calc(604px * var(--s));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 45vh calc(3.5vw * var(--s)) 7vh;
  gap: 2.5vh;
  overflow: visible;
  position: relative;
  z-index: 1;
}

.panel--text.overlap-left {
  padding-left: 0;
  margin-left: calc(-91px * var(--s));
  background: linear-gradient(to right, transparent 0, transparent calc(91px * var(--s)), var(--teal-deep) calc(91px * var(--s)));
}

.panel--text.overlap-big {
  padding-left: 0;
  padding-right: 0;
  padding-top: 6.9vh;
  padding-bottom: 0;
  margin-left: calc(-510px * var(--s));
  z-index: 2;
  justify-content: flex-start;
  background: linear-gradient(to right, transparent 0, transparent calc(510px * var(--s)), var(--teal-deep) calc(510px * var(--s)));
}

.panel--text--wide { width: calc(711px * var(--s)); }

.panel--photo-flush::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: calc(183px * var(--s)); height: 100%;
  background: linear-gradient(270deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}

.statement {
  font-size: calc(40px * var(--s));
  line-height: calc(50px * var(--s));
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--dark);
}

.statement--light { color: var(--white); }

/* ── PHOTO PANELS ───────────────────────────────────────── */

.panel--photo {
  display: flex;
  align-items: center;
  padding: 0 2vw;
}

.panel--photo img {
  height: 63vh;
  width: auto;
  max-width: 62vw;
  object-fit: cover;
}

/* ── DUO PANELS ─────────────────────────────────────────── */

.panel--duo {
  display: flex;
  align-items: center;
  gap: calc(30px * var(--s));
  padding: 0;
  position: relative;
  z-index: 0;
}

.panel--duo img {
  object-fit: cover;
  flex-shrink: 0;
  width: auto;
}

.ph-tall  { height: 68vh; }
.ph-short { height: 60vh; }

.panel--photo-flush { padding: 0; align-items: flex-start; position: relative; z-index: 0; }
.ph-fill { height: 100vh !important; width: auto !important; max-width: none !important; margin-top: 0; margin-bottom: 0; align-self: flex-start; }

/* Y positioning — used on both photo and duo children */
.v-start  { align-self: flex-start; margin-top: calc(60px * var(--s)); }
.v-end    { align-self: flex-end;   margin-bottom: calc(60px * var(--s)); }

/* ── S0 ENDING PANEL (photos top + text bottom) ─────────── */

.panel--s0-end {
  position: relative;
  width: calc(1649px * var(--s));
  margin-left: calc(-70px * var(--s));
  z-index: 1;
  background: linear-gradient(to right, transparent 0, transparent calc(70px * var(--s)), var(--teal-deep) calc(70px * var(--s)));
}

.s0-photo-a {
  position: absolute;
  top: 0;
  left: calc(287px * var(--s));
  height: 66vh;
  width: auto;
}

.s0-photo-b {
  position: absolute;
  top: 8vh;
  left: calc(700px * var(--s));
  height: 92vh;
  width: auto;
}

.s0-end-text {
  position: absolute;
  top: 55vh;
  left: calc(20px * var(--s));
  width: calc(700px * var(--s));
  display: flex;
  flex-direction: column;
  gap: 2vh;
  word-break: break-word;
  overflow: visible;
}

.s0-end-text2 {
  position: absolute;
  left: calc(1252px * var(--s));
  top: 30vh;
  width: calc(341px * var(--s));
  color: var(--white);
}

/* ── S1 GEBURT ──────────────────────────────────────────── */

.panel--s1-main {
  position: relative;
  width: calc(1249px * var(--s));
}

.s1-photo-geburt {
  position: absolute;
  left: 0;
  top: 0;
  height: 100vh;
  width: auto;
  max-width: calc(720px * var(--s));
}

.s1-photo-02 {
  position: absolute;
  left: calc(749px * var(--s));
  top: 8vh;
  height: 46vh;
  width: auto;
  max-width: calc(480px * var(--s));
}

.s1-text-geburt {
  position: absolute;
  left: calc(496px * var(--s));
  top: 70vh;
  width: calc(639px * var(--s));
  color: var(--white);
}

.panel--s1-end {
  position: relative;
  width: calc(1609px * var(--s));
}

.s1-photo-03 {
  position: absolute;
  left: calc(30px * var(--s));
  top: 21vh;
  height: 79vh;
  width: auto;
  max-width: calc(560px * var(--s));
}

.s1-photo-04 {
  position: absolute;
  left: calc(606px * var(--s));
  top: 0;
  height: 61vh;
  width: auto;
}

.s1-photo-05 {
  position: absolute;
  left: calc(1039px * var(--s));
  top: 65vh;
  height: 35vh;
  width: auto;
}

.s1-neues-leben {
  position: absolute;
  left: calc(668px * var(--s));
  top: 58vh;
  width: calc(339px * var(--s));
  color: var(--white);
}

.s1-wovon {
  position: absolute;
  left: calc(1230px * var(--s));
  top: 42vh;
  width: calc(463px * var(--s));
  color: var(--white);
}

/* ── S2 LEBEN ──────────────────────────────────────────── */

.panel--s2-main {
  position: relative;
  width: calc(1050px * var(--s));
}

.s2-photo-01 {
  position: absolute;
  left: 0;
  top: 0;
  height: 100vh;
  width: auto;
}

.s2-text-main {
  position: absolute;
  left: calc(680px * var(--s));
  top: 60vh;
  width: calc(335px * var(--s));
  color: var(--white);
}

.panel--s2-mid {
  position: relative;
  width: calc(1400px * var(--s));
}

.s2-photo-02 {
  position: absolute;
  left: calc(30px * var(--s));
  top: 14vh;
  height: 58vh;
  width: auto;
}

.s2-photo-03 {
  position: absolute;
  left: calc(390px * var(--s));
  top: 8vh;
  height: 52vh;
  width: auto;
}

.s2-text-mid {
  position: absolute;
  left: calc(241px * var(--s));
  top: 60vh;
  width: calc(364px * var(--s));
  color: var(--white);
  text-align: right;
}

.s2-text-frech {
  position: absolute;
  left: calc(989px * var(--s));
  top: calc(118px * var(--s));
  width: calc(360px * var(--s));
  color: var(--white);
  text-align: left;
}

.panel--s2-end {
  position: relative;
  width: calc(652px * var(--s));
}

.s2-photo-04 {
  position: absolute;
  left: 0;
  top: 4vh;
  height: 94vh;
  width: auto;
}

/* ── END PANEL ──────────────────────────────────────────── */

.panel--end {
  width: clamp(calc(300px * var(--s)), 38vw, calc(600px * var(--s)));
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: calc(80px * var(--s)) 4vw 7vh;
  gap: 3vh;
  position: relative;
  margin-left: calc(80px * var(--s));
}

/* Desktop-Schriftgrößen Endpanel */
.panel--end > .statement {
  font-size: calc(48px * var(--s));
  line-height: calc(58px * var(--s));
}
.panel--end .newsletter__label {
  font-size: calc(32px * var(--s));
}
.panel--end .byline {
  font-size: calc(24px * var(--s));
  line-height: calc(32px * var(--s));
}
/* 32px Abstand zwischen "Mehr folgt" und "Aktion verfolgen:" */
.panel--end .newsletter {
  margin-top: calc(32px * var(--s));
}

.end-credits {
  display: flex;
  flex-direction: column;
  gap: calc(32px * var(--s));
}

/* ── Burger-Menü ─────────────────────────────────────────── */

.menu-btn {
  position: absolute;
  top: calc(28px * var(--s));
  right: calc(28px * var(--s));
  width: calc(40px * var(--s));
  height: calc(40px * var(--s));
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--dark);
  cursor: pointer;
  z-index: 5;
}
.menu-btn svg { width: calc(22px * var(--s)); height: calc(22px * var(--s)); }
.menu-btn:hover { opacity: 0.7; }

.menu-dropdown {
  position: absolute;
  top: calc(68px * var(--s));
  right: calc(28px * var(--s));
  background: var(--white);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
  min-width: calc(160px * var(--s));
  overflow: hidden;
  z-index: 6;
}
.menu-dropdown[hidden] { display: none; }
.menu-dropdown__item {
  font-family: var(--font);
  font-size: calc(15px * var(--s));
  color: var(--dark);
  background: none;
  border: none;
  text-align: left;
  padding: calc(12px * var(--s)) calc(16px * var(--s));
  cursor: pointer;
}
.menu-dropdown__item:hover { background: var(--muted-bg, rgba(0,0,0,0.05)); }
.menu-dropdown__item + .menu-dropdown__item { border-top: 1px solid rgba(0,0,0,0.08); }

/* ── Rechtliche Overlays (Datenschutz / Impressum) ─────────── */

.legal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--teal-deep);
  overflow-y: auto;
  padding: 8vh 6vw 10vh;
}
.legal-overlay[hidden] { display: none; }
.legal-overlay__inner {
  max-width: 720px;
  margin: 0 auto;
  color: var(--white);
}
.legal-overlay__inner h2 {
  font-size: calc(40px * var(--s));
  font-weight: 600;
  margin-bottom: 1em;
}
.legal-overlay__inner h3 {
  font-size: calc(18px * var(--s));
  font-weight: 600;
  margin-top: 1.8em;
  margin-bottom: 0.4em;
}
.legal-overlay__inner p,
.legal-overlay__inner li {
  font-size: calc(15px * var(--s));
  line-height: 1.7;
  color: var(--muted);
}
.legal-overlay__inner a { color: var(--white); text-decoration: underline; }
.legal-overlay__inner ul { margin: 0.5em 0 1em 1.2em; }
.legal-overlay__source { margin-top: 2em; opacity: 0.6; }
.legal-overlay__close {
  position: fixed;
  top: 24px;
  right: 5vw;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  background: transparent;
  color: var(--white);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.legal-overlay__close:hover { background: rgba(255,255,255,0.1); }

@media (max-width: 640px) {
  .legal-overlay { padding: 90px 24px 60px; }
  .legal-overlay__inner h2 { font-size: 1.8rem; }
  .legal-overlay__inner h3 { font-size: 1.05rem; }
  .legal-overlay__inner p,
  .legal-overlay__inner li { font-size: 0.95rem; }
  .legal-overlay__close { top: 16px; right: 16px; }
  .menu-btn { top: 20px; right: 16px; width: 36px; height: 36px; }
  .menu-btn svg { width: 20px; height: 20px; }
  .menu-dropdown { top: 56px; right: 16px; }
}

/* ── NEWSLETTER ─────────────────────────────────────────────── */

.newsletter {
  display: flex;
  flex-direction: column;
  gap: calc(14px * var(--s));
}
.newsletter__label {
  font-size: calc(28px * var(--s));
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--dark);
}
.newsletter__form {
  display: flex;
  align-items: stretch;
}
.newsletter__form input[type="email"] {
  font-family: var(--font);
  font-size: calc(17px * var(--s));
  font-weight: 400;
  flex: 1;
  border: none;
  border-bottom: 1.5px solid var(--dark);
  background: transparent;
  padding: calc(8px * var(--s)) 0;
  color: var(--dark);
  outline: none;
}
.newsletter__form input::placeholder { color: var(--silver); }
.newsletter__form button {
  font-family: var(--font);
  font-size: calc(17px * var(--s));
  font-weight: 600;
  background: var(--teal);
  color: var(--white);
  border: none;
  padding: calc(8px * var(--s)) calc(18px * var(--s));
  cursor: pointer;
  margin-left: calc(12px * var(--s));
  transition: opacity 0.15s;
}
.newsletter__form button:hover { opacity: 0.7; }
.newsletter__hint {
  font-size: calc(14px * var(--s));
  line-height: 1.5;
  color: var(--muted);
}
.newsletter__thanks {
  font-size: calc(17px * var(--s));
  font-weight: 600;
  color: var(--dark);
}

/* Instagram-Icon im Footer (einfarbig, nutzt Textfarbe) */
.social-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: calc(12px * var(--s));
  color: var(--dark);
  transition: opacity 0.15s;
}
.social-link svg {
  width: calc(34px * var(--s));
  height: calc(34px * var(--s));
  display: block;
}
.social-link:hover { opacity: 0.6; }

/* ── RITUAL MAP ─────────────────────────────────────────── */

.panel--ritual-map {
  width: calc(650px * var(--s));
  position: relative;
}

.ritual-map__heading {
  position: absolute;
  top: 0;
  left: calc(32px * var(--s));
  margin: 0;
  font-size: calc(64px * var(--s));
  font-weight: 600;
  color: var(--white);
  line-height: calc(70px * var(--s));
  white-space: nowrap;
}

.ritual-map__text {
  position: absolute;
  bottom: calc(60px * var(--s));
  left: calc(32px * var(--s));
  width: calc(442px * var(--s));
  color: var(--white);
}

.ritual-map__svg {
  position: absolute;
  left: calc(80px * var(--s));
  top: 50%;
  transform: translateY(calc(-50% + 35px * var(--s)));
  width: calc(517px * var(--s));
  height: calc(545px * var(--s));
  overflow: visible;
}

.rm-circle {
  fill: none;
  stroke: var(--white);
  stroke-width: 2;
  stroke-dasharray: 4 6;
}
.rm-circle--dim  { stroke-opacity: 0.5; }
.rm-circle--full { stroke-opacity: 1.0; }

.rm-active-blob { fill: var(--teal); opacity: 0.7; }
@keyframes ritualRotate {
  to { transform: rotate(360deg); }
}

.rm-circle {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: ritualRotate 40s linear infinite;
}

/* ── SECTION LABEL ──────────────────────────────────────── */

#section-label {
  position: fixed;
  top: 0;
  left: 2vw;
  display: flex;
  align-items: baseline;
  gap: calc(14px * var(--s));
  font-size: calc(32px * var(--s));
  font-weight: 600;
  line-height: calc(70px * var(--s));
  letter-spacing: 0;
  z-index: 9998;
  pointer-events: none;
}

.nav-past {
  color: var(--muted);
  pointer-events: all;
  cursor: pointer;
  transition: opacity 0.15s;
}
.nav-past:hover { opacity: 0.5; }

.nav-current {
  color: var(--white);
  pointer-events: none;
}

/* ── CURSOR ─────────────────────────────────────────────── */

@media (hover: hover) { * { cursor: none; } }
@media (hover: hover) { .panel--end, .panel--end * { cursor: auto; } }
/* Overlay: nativen Cursor wiederherstellen (.legal-overlay* hat höhere Spezifität als *) */
@media (hover: hover) { .legal-overlay, .legal-overlay * { cursor: auto; } }
@media (hover: hover) { .legal-overlay__close { cursor: pointer; } }
/* Klickbare Ritual-Map-Zahlen: nativer Hand-Cursor statt Custom-Pfeil */
@media (hover: hover) { .rm-dot--link, .rm-dot--link * { cursor: pointer; } }

#cursor {
  position: fixed;
  top: 0; left: 0;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9999;
  color: var(--dark);
}
#cursor svg { width: 44px; height: 44px; }
#cursor.cursor--light { color: var(--white); }

/* ── MOBILE BUTTON ──────────────────────────────────────── */

#mobileBtn {
  display: none;
  position: fixed;
  bottom: 5vh; right: 5vw;
  z-index: 9999;
  background: none; border: none; padding: 0;
  cursor: pointer;
  color: var(--dark);
  width: 48px; height: 48px;
  align-items: center; justify-content: center;
  opacity: 0.45;
}
#mobileBtn:active { opacity: 1; }

/* ── MOBILE: vertikales Layout ──────────────────────────── */

@media (hover: none) and (pointer: coarse), (max-width: 640px) {

  html, body {
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .track {
    flex-direction: column;
    height: auto;
    overflow: visible;
  }

  .panel {
    width: 100%;
    height: auto;
    min-height: 100svh;
    flex-shrink: 1;
  }

  /* Breadcrumb: auf Mobile nicht sinnvoll */
  #section-label { display: none; }

  /* ── Hero (dunkel, absolute Positionierung nach Figma, Basis 390px) ── */

  .panel--hero {
    width: 100%;
    padding: 0;
    height: calc(359px * var(--s));
    min-height: 0;
    background: var(--teal-deep) !important;
    background-image: none !important;
    position: relative;
    overflow: visible;
    display: block;
  }

  .panel--hero::before { display: none; }

  .panel--hero .byline {
    position: absolute;
    top: calc(16px * var(--s));
    left: calc(16px * var(--s));
    font-size: calc(20px * var(--s));
    line-height: calc(24px * var(--s));
    margin: 0;
    z-index: 2;
  }

  .panel--hero h1 {
    position: absolute;
    top: calc(210px * var(--s));
    left: calc(16px * var(--s));
    right: calc(16px * var(--s));
    text-align: right;
    font-size: calc(66px * var(--s));
    line-height: calc(56px * var(--s));
    margin: 0;
    z-index: 2;
  }

  /* ── Texttafeln ── */

  .statement {
    font-size: clamp(1.25rem, 5.6vw, 1.7rem);
    line-height: 1.3;
  }

  .panel--text {
    width: 100%;
    padding: 40px 16px;
    margin-left: 0 !important;
    background: var(--teal-deep) !important;
    justify-content: flex-end;
    min-height: 0;
    height: auto;
  }

  /* "Was passiert, wenn sich Kunst, Ort und Leben..." */
  .panel--text.overlap-left {
    padding: 72px 16px 72px 16px;
  }

  .panel--text.overlap-big {
    padding-top: 40px;
    padding-left: 16px;
    justify-content: flex-end;
  }

  .panel--text--wide,
  .panel--text--wider { width: 100%; }

  /* ── Fotopanels ── */

  .panel--photo {
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0;
    align-items: stretch;
  }

  .panel--photo img {
    height: 68vh;
    width: 100%;
    max-width: 100%;
    object-fit: cover;
  }

  .ph-fill {
    height: 68vh !important;
    width: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    align-self: auto !important;
    margin: 0 !important;
  }

  .panel--photo-flush::after { display: none; }

  /* ── Duo-Panels ── */

  .panel--duo {
    width: 100%;
    height: auto;
    min-height: 0;
    gap: 4px;
    padding: 0;
    align-items: stretch;
  }

  .panel--duo img {
    width: 50%;
    height: 45vh;
    object-fit: cover;
    flex-shrink: 1;
  }

  .ph-tall, .ph-short { height: 45vh; }
  .v-start, .v-end { align-self: auto; margin: 0; }

  /* ── S0-End-Panel ── */

  .panel--s0-end {
    width: 100%;
    margin-left: 0;
    height: auto;
    min-height: auto;
    display: flex;
    flex-direction: column;
    padding-bottom: 60px;
  }

  /* Reihenfolge: Text → Foto-A → Foto-B → Zitat */
  .s0-end-text  { order: 1; }
  .s0-photo-a   { order: 2; }
  .s0-photo-b   { order: 3; }
  .s0-end-text2 { order: 4; }

  .s0-photo-a {
    position: relative;
    left: auto; top: auto;
    height: 68vh;
    width: 100%;
    max-width: 100%;
    object-fit: cover;
    transform: none !important;
    margin-top: 4px;
  }

  .s0-photo-b {
    position: relative;
    left: auto; top: auto;
    height: 75vh;
    width: 100%;
    max-width: 100%;
    object-fit: cover;
    margin-top: 4px;
    transform: none !important;
  }

  .s0-end-text {
    position: relative;
    top: auto; left: auto;
    width: 100%;
    padding: 40px 24px 0;
    transform: none !important;
  }

  .s0-end-text .statement {
    text-align: left !important;
  }

  .s0-end-text2 {
    position: relative;
    left: auto; top: auto;
    width: 100%;
    padding: 30px 24px 0;
    transform: none !important;
  }

  /* ── Ritual Map ── */

  .panel--ritual-map {
    width: 100%;
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 80px 16px 50px;
    align-items: center;
  }

  .ritual-map__heading {
    position: relative;
    top: auto; left: auto;
    font-size: calc(32px * var(--s)) !important;
    line-height: 1.1;
    margin-bottom: 30px;
    align-self: flex-start;
    padding-left: 0;
  }

  .ritual-map__svg {
    position: relative;
    left: auto; top: auto;
    transform: none;
    width: 100%;
    height: auto;
    max-height: 80vh;
  }

  /* ── S1 Geburt (Hauptpanel) ── */

  .panel--s1-main {
    width: 100%;
    height: auto;
    min-height: auto;
    display: flex;
    flex-direction: column;
  }

  .s1-photo-geburt {
    position: relative;
    left: auto; top: auto;
    height: 60vh;
    width: 100%;
    max-width: 100%;
    object-fit: cover;
    transform: none !important;
  }

  .s1-photo-02 {
    position: relative;
    left: auto; top: auto;
    height: 45vh;
    width: 100%;
    max-width: 100%;
    object-fit: cover;
    margin-top: 4px;
    transform: none !important;
  }

  .s1-text-geburt {
    position: relative;
    left: auto; top: auto;
    width: 100%;
    padding: 40px 24px 50px;
    transform: none !important;
  }

  /* ── S1 Geburt (Endpanel) ── */

  .panel--s1-end {
    width: 100%;
    height: auto;
    min-height: auto;
    display: flex;
    flex-direction: column;
    padding-bottom: 60px;
  }

  .s1-photo-03 {
    position: relative;
    left: auto; top: auto;
    height: 60vh;
    width: 100%;
    max-width: 100%;
    object-fit: cover;
    transform: none !important;
  }

  .s1-photo-04 {
    position: relative;
    left: auto; top: auto;
    height: 55vh;
    width: 100%;
    max-width: 100%;
    object-fit: cover;
    margin-top: 4px;
    transform: none !important;
  }

  .s1-photo-05 {
    position: relative;
    left: auto; top: auto;
    height: 40vh;
    width: 100%;
    max-width: 100%;
    object-fit: cover;
    margin-top: 4px;
    transform: none !important;
  }

  .s1-neues-leben {
    position: relative;
    left: auto; top: auto;
    width: 100%;
    padding: 40px 24px;
    transform: none !important;
  }

  .s1-wovon {
    position: relative;
    left: auto; top: auto;
    width: 100%;
    padding: 0 24px 40px;
    transform: none !important;
  }

  /* ── Endpanel ── */

  .panel--end {
    width: 100%;
    min-height: auto;
    padding: 48px 24px;
    justify-content: flex-start;
    gap: 28px;
    margin-left: 0;
  }

  /* Kompakter Footer: alles auf einen Blick sichtbar (inkl. Burger-Menü),
     daher moderater Abstand vor den Credits statt großem Freiraum. */
  .end-credits {
    margin-top: 36px !important;
  }

  /* Mobile-Footer: proportional zu Desktop (48/32/24px) */
  .panel--end > .statement {
    font-size: clamp(2rem, 8vw, 2.6rem);
    line-height: 1.15;
  }

  .panel--end .newsletter__label {
    font-size: clamp(1.2rem, 5.5vw, 1.6rem);
  }

  /* "Aktion verfolgen:" 32px weiter runter auf Mobile */
  .panel--end .newsletter {
    margin-top: 32px;
  }

  .end-credits .byline {
    font-size: clamp(1.35rem, 5.5vw, 1.55rem);
    line-height: 1.4;
    font-weight: 600;
  }

  .newsletter__form input[type="email"],
  .newsletter__hint,
  .newsletter__thanks {
    font-size: 1rem;
  }

  /* Mobiler Abspielen-Knopf: teal statt dark */
  #mobileBtn { color: var(--white); opacity: 0.6; }

}