@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/fraunces-v119-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;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/fraunces-v119-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;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/fraunces-v119-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;
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/nunito-sans-v119-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;
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/nunito-sans-v119-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;
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/nunito-sans-v119-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;
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/nunito-sans-v119-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;
}

:root {
  --mist: #F7F5F1;
  --deep-water: #23434A;
  --sky: #8FC4D7;
  --reed: #7A8561;
  --driftwood: #8C6A52;
  --evening: #D4B46A;
  --stone: #B6B0A8;
  --ink: #1F2324;
  --white: #FFFFFF;

  --serif: "Fraunces", Georgia, serif;
  --sans: "Nunito Sans", Arial, sans-serif;

  /* One desktop geometry system. */
  --river-rail-width: 416px;
  --river-visual-edge: 174px;
  --desktop-river-safe: 425px;
  --content-river-gap: 110px;
  --content-global-left: calc(var(--river-visual-edge) + var(--content-river-gap));
  --content-local-left: calc(var(--content-global-left) - var(--desktop-river-safe));
  --content-right-gap: clamp(44px, 3.8vw, 82px);
  --content-width: calc(100vw - var(--content-global-left) - var(--content-right-gap));
  --column-gap: 1.6rem;

  --river-hover-panel-width: 292px;
  --river-hover-copy-width: 210px;
  --river-label-global-x: 204px;

  /* Vertical river distribution. */
  --river-y-1: 18%;
  --river-y-2: 50%;
  --river-y-3: 35%;
  --river-y-4: 65%;
  --river-y-5: 81%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--mist);
  font-family: var(--sans);
  line-height: 1.65;
}
a { color: inherit; }
img { max-width: 100%; }
p { margin-top: 0; }
h1, h2, h3 {
  margin-top: 0;
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.04;
  text-wrap: balance;
}
h1 { font-size: clamp(3.1rem, 5.4vw, 6.6rem); letter-spacing: -.055em; }
h2 { font-size: clamp(2.5rem, 5vw, 5rem); letter-spacing: -.045em; }
h3 { font-size: clamp(1.8rem, 3vw, 2.8rem); letter-spacing: -.035em; }

/* --------------------------------------------------------------------------
   Desktop river navigation
   -------------------------------------------------------------------------- */
.river-rail {
  position: fixed;
  z-index: 30;
  inset: 0 auto 0 -14px;
  width: var(--river-rail-width);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-10px);
  transition: opacity .32s ease, transform .32s ease, visibility 0s linear .32s;
}
body.river-visible .river-rail {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition-delay: 0s;
}
.river-base {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(14px 0 24px rgba(35,67,74,.08));
}
.river-base path:first-child { fill: var(--sky); }
.current { fill: none; stroke-linecap: round; }
.current.main { stroke: rgba(255,255,255,.42); stroke-width: 2.5; }
.current.soft { stroke: rgba(255,255,255,.24); stroke-width: 1.9; }

/* Full-height reading panel. It sits below the river and only slides out when
   an actual river item is hovered or keyboard-focused. */
.river-hover-panel {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 138px;
  width: var(--river-hover-panel-width);
  background: rgba(247,245,241,.97);
  box-shadow: 16px 0 34px rgba(35,67,74,.08);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-100%);
  pointer-events: none;
  transition:
    transform .32s cubic-bezier(.22,.72,.2,1),
    opacity .18s ease-out,
    visibility 0s linear .32s;
}
.river-rail:has(.river-item:hover) .river-hover-panel,
.river-rail:has(.river-item:focus) .river-hover-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition-delay: 0s;
}

.river-decor {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
}
.river-items {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
}

/* Artenvielfalt decor is anchored to the first kayak's percentage position,
   rather than to a fixed screen height. */
.river-eagle,
.shore-tree {
  position: absolute;
  display: block;
  opacity: 0;
  visibility: hidden;
  transform-origin: center;
  transition: opacity .24s ease, visibility 0s linear .24s;
}
.river-eagle {
  left: 123px;
  top: clamp(176px, 31vh, 238px);
  width: 35px;
  height: 22px;
  transform: rotate(-74deg);
}
.tree-1 {
  left: 158px;
  top: clamp(166px, 29.7vh, 228px);
  width: 74px;
  height: 74px;
}
.tree-2 {
  left: 165px;
  top: clamp(126px, 23.4vh, 180px);
  width: 58px;
  height: 58px;
}
.river-eagle svg,
.shore-tree svg { width: 100%; height: 100%; overflow: visible; }
.eagle-fill,
.eagle-head { fill: #5E4836; }
.tree-crown { fill: var(--reed); }
.tree-crown-detail {
  fill: none;
  stroke: rgba(255,255,255,.18);
  stroke-width: 1.8;
  stroke-linecap: round;
}
.river-rail:has(.item-1:hover) .river-eagle,
.river-rail:has(.item-1:hover) .shore-tree,
.river-rail:has(.item-1:focus) .river-eagle,
.river-rail:has(.item-1:focus) .shore-tree {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* Storytelling spiral: open line with two continuing waves. */
.river-spiral {
  position: absolute;
  z-index: 5;
  left: 106px;
  top: calc(var(--river-y-2) + 44px);
  width: 78px;
  height: 52px;
  display: block;
  opacity: 0;
  visibility: hidden;
  transform: rotate(-5deg) scale(.96);
  transform-origin: left center;
  pointer-events: none;
  transition: opacity .24s ease, transform .28s ease, visibility 0s linear .24s;
}
.river-spiral svg { width: 100%; height: 100%; overflow: visible; }
.spiral-stroke {
  fill: none;
  stroke: var(--mist);
  stroke-width: 4.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 1px rgba(31,35,36,.24));
}
.spiral-wave {
  fill: none;
  stroke: rgba(247,245,241,.9);
  stroke-width: 4.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .92;
}
.river-rail:has(.item-2:hover) .river-spiral,
.river-rail:has(.item-2:focus) .river-spiral {
  opacity: 1;
  visibility: visible;
  transform: rotate(-5deg) scale(1);
  transition-delay: 0s;
}

.river-item {
  --item-x: 29px;
  position: absolute;
  left: var(--item-x);
  width: 84px;
  min-width: 84px;
  height: 118px;
  text-decoration: none;
  pointer-events: auto;
}
.item-1 { --item-x: 29px; top: clamp(68px, var(--river-y-1), calc(100vh - 128px)); }
.item-2 { --item-x: 22px; top: clamp(68px, var(--river-y-2), calc(100vh - 128px)); }
.item-3 { --item-x: 37px; top: clamp(68px, var(--river-y-3), calc(100vh - 128px)); }
.item-4 { --item-x: 35px; top: clamp(68px, var(--river-y-4), calc(100vh - 128px)); }
.item-5 { --item-x: 29px; top: clamp(68px, var(--river-y-5), calc(100vh - 128px)); }
.theme-wildnis,
.theme-geschichten,
.theme-atem,
.theme-sterne,
.theme-begegnung { --theme-fill: var(--mist); }

.river-kayak {
  position: absolute;
  z-index: 3;
  left: 32px;
  top: 13px;
  width: 40px;
  height: 90px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.river-kayak svg { width: 100%; height: 100%; overflow: visible; }
.kayak-outline {
  fill: var(--theme-fill);
  stroke: rgba(20,24,24,.94);
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kayak-sketch,
.cockpit-sketch,
.paddle-sketch,
.paddle-blade-sketch {
  fill: none;
  stroke: rgba(20,24,24,.25);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kayak-sketch { stroke-width: .85; }
.cockpit-sketch { stroke-width: .8; }
.paddle-sketch,
.paddle-blade-sketch { stroke-width: .65; }
.deck-mark,
.cockpit-outline {
  fill: none;
  stroke: rgba(20,24,24,.9);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.deck-mark { stroke-width: 1.55; }
.cockpit-outline { stroke-width: 1.85; }
.paddle-shaft {
  stroke: rgba(20,24,24,.92);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.paddle-blade {
  fill: var(--theme-fill);
  stroke: rgba(20,24,24,.92);
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hover-branch {
  position: absolute;
  left: calc(var(--river-label-global-x) - var(--item-x));
  top: 10px;
  width: var(--river-hover-copy-width);
  height: 82px;
  overflow: visible;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-18px);
  pointer-events: none;
  transition:
    opacity .16s ease-out,
    transform .32s cubic-bezier(.22,.72,.2,1),
    visibility 0s linear .32s;
}
.item-1 .hover-branch { left: 195px; }
.river-item:hover .hover-branch,
.river-item:focus .hover-branch {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition-delay: 0s;
}
.branch-inner {
  position: relative;
  z-index: 2;
  width: var(--river-hover-copy-width);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: .15rem;
  color: var(--deep-water);
  text-align: left;
  text-shadow: 0 1px 0 rgba(247,245,241,.72);
}
.branch-inner strong {
  white-space: nowrap;
  font-family: var(--serif);
  font-size: 1.18rem;
  line-height: 1.05;
}
.branch-inner em {
  max-width: 180px;
  font-style: normal;
  font-size: .79rem;
  line-height: 1.22;
}
.item-1 .branch-inner em { max-width: 205px; }

.lotus-detached {
  position: absolute;
  left: 96px;
  top: 38px;
  width: 44px;
  height: auto;
  max-width: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .24s ease, visibility 0s linear .24s;
}
.item-3:hover .lotus-detached,
.item-3:focus .lotus-detached {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.encounter-bubble {
  position: absolute;
  left: 83px;
  top: 38px;
  width: 27px;
  height: 22px;
  display: block;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-4px);
  pointer-events: none;
  transition: opacity .24s ease, transform .24s ease, visibility 0s linear .24s;
}
.encounter-bubble svg { width: 100%; height: 100%; overflow: visible; }
.encounter-bubble-shape {
  fill: var(--mist);
  stroke: rgba(31,35,36,.9);
  stroke-width: 1.15;
  stroke-linejoin: round;
}
.encounter-bubble-eye { fill: rgba(31,35,36,.82); }
.encounter-bubble-smile {
  fill: none;
  stroke: rgba(31,35,36,.82);
  stroke-width: 1.35;
  stroke-linecap: round;
}
.item-6:hover .encounter-bubble,
.item-6:focus .encounter-bubble {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition-delay: 0s;
}

.night-decor {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(.8);
  transform-origin: left center;
  transition: opacity .24s ease, visibility 0s linear .24s;
}
.night-decor svg { position: absolute; overflow: visible; }
.star-spark {
  fill: var(--white);
  stroke: rgba(20,24,24,.18);
  stroke-width: .45;
}
.item-5:hover .night-decor,
.item-5:focus .night-decor {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* --------------------------------------------------------------------------
   Mobile river navigation
   -------------------------------------------------------------------------- */
.mobile-river-nav { display: none; }
.mobile-river-track {
  position: relative;
  display: flex;
  gap: .45rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}
.mobile-river-track a {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  min-width: 128px;
  display: flex;
  align-items: center;
  padding: .46rem .82rem;
  border: 1px solid rgba(35,67,74,.14);
  border-radius: 999px;
  background: rgba(247,245,241,.9);
  color: var(--deep-water);
  text-decoration: none;
  font-size: .82rem;
  font-weight: 700;
  box-shadow: 0 5px 16px rgba(35,67,74,.08);
}
.mobile-river-track a b {
  display: block;
  color: var(--reed);
  font-size: .62rem;
  letter-spacing: .08em;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Header and hero
   -------------------------------------------------------------------------- */
.page-shell { position: relative; margin-left: 0; }
.site-header {
  position: fixed;
  z-index: 120;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem clamp(1.2rem, 4vw, 4.5rem) 1.2rem 26px;
  color: white;
  transition: background .3s ease, color .3s ease, box-shadow .3s ease;
}
.site-header.scrolled {
  background: rgba(247,245,241,.94);
  color: var(--deep-water);
  box-shadow: 0 1px 0 rgba(31,35,36,.09);
  backdrop-filter: blur(10px);
}
.wordmark {
  position: relative;
  z-index: 130;
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: -.04em;
  text-decoration: none;
}
.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(.85rem, 1.35vw, 1.45rem);
}
.main-nav a { text-decoration: none; font-size: .93rem; font-weight: 600; }
.nav-cta { padding: .55rem 1rem; border: 1px solid currentColor; border-radius: 999px; }
.menu-toggle { display: none; }

.hero {
  position: relative;
  min-height: min(100svh, 1100px);
  display: grid;
  align-items: end;
  overflow: hidden;
  color: white;
}
.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0 !important;
}
.hero-photo { display: block; object-fit: cover; object-position: center center; }
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(35,67,74,.18), rgba(35,67,74,.78));
}
.hero-content {
  position: relative;
  z-index: 2;
  width: min(1100px, calc(100% - 2.4rem));
  margin: 0 auto;
  padding: 12rem 0 7rem;
}
.hero-content h1 { max-width: 950px; margin-bottom: 1.5rem; }
.hero-copy { max-width: 720px; font-size: clamp(1.05rem, 2vw, 1.35rem); }
.eyebrow {
  margin-bottom: 1rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.eyebrow.dark { color: var(--reed); }
.scroll-hint {
  position: absolute;
  z-index: 3;
  right: 3rem;
  bottom: 2.5rem;
  font-size: 1.8rem;
  text-decoration: none;
}
.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .8rem 1.3rem;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.button-light { background: white; color: var(--deep-water); }
.button-dark { background: var(--deep-water); color: white; }

/* --------------------------------------------------------------------------
   Shared content system
   -------------------------------------------------------------------------- */
.section,
.contact-section {
  width: min(1240px, calc(100% - 2.4rem));
  margin: 0 auto;
}
.section { padding: clamp(5rem, 10vw, 10rem) 0; }
.section-number { display: none !important; }
.section-heading {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-bottom: 4rem;
}
.section-heading h2 { max-width: 940px; }
.section-heading > div { min-width: 0; }

/* --------------------------------------------------------------------------
   Idea
   -------------------------------------------------------------------------- */
.intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--column-gap);
}
.intro h2 { max-width: 760px; }
.intro-copy { max-width: 560px; padding-top: 3rem; }
.lead { font-size: 1.35rem; color: var(--deep-water); }
#idee .intro h2 {
  max-width: none;
  font-size: clamp(2.2rem, 4vw, 4.05rem);
  line-height: 1.08;
}

/* --------------------------------------------------------------------------
   Experiences
   -------------------------------------------------------------------------- */
.experience-question {
  display: inline-block;
  margin: 1.5rem 0 0;
  padding: .6rem 1.05rem .7rem;
  border-radius: 999px;
  background: rgba(143,196,215,.34);
  color: var(--deep-water);
  font-family: var(--serif);
  font-size: clamp(1.7rem, 2.8vw, 2.45rem);
  font-weight: 650;
  line-height: 1.08;
}
.experience-time-note {
  width: 100%;
  max-width: 80ch;
  margin: 1rem 0 0;
  color: rgba(35,67,74,.78);
  font-size: .94rem;
  line-height: 1.55;
  text-wrap: pretty;
}
.experience-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
.experience-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 28px;
  background: white;
  scroll-margin-top: 150px;
}
.card-image { min-height: 360px; }
#wildnis-card .card-image { height: auto; min-height: 360px; }
.card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 4vw, 3rem);
}
.card-index { font-size: .72rem; letter-spacing: .18em; color: var(--stone); }
.card-content p:not(.card-index) { max-width: 520px; }
.card-content a,
.text-link { font-weight: 700; text-underline-offset: 5px; }
.card-content > a { margin-top: auto; padding-top: 1.1rem; }

.experience-profile {
  display: grid;
  gap: .62rem;
  margin: 1.35rem 0 1.5rem;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(35,67,74,.14);
}
.profile-label {
  margin: 0 0 .18rem;
  color: var(--reed);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.2;
  text-transform: uppercase;
}
.spectrum-row {
  display: grid;
  gap: .28rem;
}
.spectrum-labels {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: rgba(35,67,74,.9);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.2;
}
.spectrum-track {
  position: relative;
  height: 14px;
}
.spectrum-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(35,67,74,.28), rgba(143,196,215,.62), rgba(35,67,74,.28));
}
.spectrum-dot {
  position: absolute;
  top: 1px;
  left: var(--focus);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--deep-water);
  box-shadow: 0 0 0 3px rgba(247,245,241,.96);
  transform: translateX(-50%);
}
.tour-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
  margin: .75rem 0 .25rem;
}
.tour-facts p {
  min-width: 0;
  margin: 0;
  padding: .68rem .75rem;
  border-radius: 13px;
  background: rgba(143,196,215,.13);
}
.tour-facts span,
.tour-facts strong { display: block; }
.tour-facts span {
  color: var(--reed);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.2;
  text-transform: uppercase;
}
.tour-facts strong {
  margin-top: .18rem;
  color: var(--deep-water);
  font-size: .8rem;
  line-height: 1.3;
}
.prerequisite {
  margin: .55rem 0 0;
  color: rgba(35,67,74,.82);
  font-size: .82rem;
  line-height: 1.4;
}
.prerequisite strong,
.river-location > strong { color: var(--deep-water); }
.river-location { margin: .55rem 0 0; color: rgba(35,67,74,.82); }
.river-location > strong { display: block; margin-bottom: .42rem; font-size: .82rem; }
.river-tags { display: flex; flex-wrap: wrap; gap: .38rem; }
.river-tags span {
  min-height: 27px;
  display: inline-flex;
  align-items: center;
  padding: .28rem .55rem;
  border: 1px solid rgba(122,133,97,.22);
  border-radius: 999px;
  background: rgba(122,133,97,.08);
  color: rgba(35,67,74,.88);
  font-size: .72rem;
  line-height: 1.15;
}

.placeholder-image {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 1.2rem;
  border-radius: 24px;
  color: rgba(255,255,255,.88);
  background:
    radial-gradient(circle at 25% 22%, rgba(247,245,241,.75), transparent 25%),
    linear-gradient(145deg, #79909a, #31535b 48%, #75836b);
}
.placeholder-image::after {
  content: "";
  position: absolute;
  inset: auto -10% -25% -10%;
  height: 55%;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: rgba(247,245,241,.15);
  transform: rotate(-4deg);
}
.placeholder-image span {
  position: relative;
  z-index: 2;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.placeholder-image.sky { background: linear-gradient(150deg, var(--sky), #dcebed 45%, var(--driftwood)); color: var(--deep-water); }
.placeholder-image.night { background: radial-gradient(circle at 70% 18%, #f7f5f1 0 1%, transparent 1.5%), linear-gradient(160deg, #162c34, #23434a 55%, #765e55); }
.placeholder-image.stone { background: linear-gradient(145deg, #c8c2b9, #908d87 48%, #53686b); }
.placeholder-image.reed { background: linear-gradient(145deg, #aeb795, #6b7655 48%, #314f53); }
.placeholder-image.photo-card {
  background-size: cover;
  background-position: center center;
  color: rgba(255,255,255,.96);
}
.placeholder-image.photo-card::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(16,28,24,.10) 0%, rgba(16,28,24,.02) 42%, rgba(16,28,24,.55) 100%);
}
.placeholder-image.photo-card span { text-shadow: 0 2px 10px rgba(0,0,0,.32); }
.placeholder-image.artenvielfalt-photo {
  background-image: url('assets/artenvielfalt.jpg');
  background-position: center 54%;
}
.placeholder-image.artenvielfalt-photo::after,
.placeholder-image.artenvielfalt-photo > span { display: none; }

/* --------------------------------------------------------------------------
   Flussgemeinschaft
   -------------------------------------------------------------------------- */
.gestalterinnen-lead {
  display: grid;
  grid-template-columns: minmax(280px,.78fr) minmax(0,1.22fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: stretch;
  margin: 2rem 0 2.5rem;
}
.gestalterinnen-lead .split-media { min-height: 460px; border-radius: 28px; }
.gestalterinnen-damian {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid rgba(35,67,74,.08);
  border-radius: 28px;
  background: rgba(255,255,255,.68);
}
.gestalterinnen-damian h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  line-height: 1.1;
}
.gestalterinnen-damian .text-link { margin-top: .35rem; }
.damian-facts {
  display: grid;
  gap: .5rem;
  margin: 1.2rem 0 1.6rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid rgba(35,67,74,.14);
  border-radius: 18px;
  background: rgba(143,196,215,.12);
}
.damian-facts p { margin: 0; font-size: .92rem; line-height: 1.5; }
.damian-facts strong { color: var(--deep-water); }
.voices-intro {
  width: 100%;
  max-width: 80ch;
  margin-left: 0;
  font-size: 1.2rem;
  text-wrap: pretty;
}
.voice-grid {
  --community-photo-height: clamp(250px, 26vw, 360px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1.2rem;
  margin-top: 3rem;
  background: transparent;
  border: 0;
}
.voice-grid article.profile-card {
  padding: clamp(1.7rem, 3vw, 2.3rem);
  border-radius: 24px;
  background: var(--deep-water);
  color: white;
}
.profile-experience {
  margin: 0 0 .55rem;
  color: rgba(255,255,255,.72);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.profile-card h3 {
  margin: 0;
  color: white;
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2.1vw, 1.95rem);
  line-height: 1.1;
}
.profile-role { margin: .35rem 0 .85rem; color: var(--sky); font-weight: 700; }
.profile-copy { margin: 0; color: white; }

/* --------------------------------------------------------------------------
   Kayaks
   -------------------------------------------------------------------------- */
.kayaks-section { padding-top: clamp(5rem, 9vw, 9rem); padding-bottom: clamp(5rem, 9vw, 9rem); }
.kayaks-section .section-heading,
.kayaks-section .section-heading > div,
.kayaks-section .section-heading h2 { width: 100%; max-width: none; }
.kayak-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1.5rem;
}
.kayak-card { overflow: hidden; border-radius: 28px; background: white; }
.kayak-card-visual {
  min-height: 300px;
  display: flex;
  align-items: flex-end;
  padding: 1.2rem;
  color: white;
  background:
    radial-gradient(ellipse at 50% 62%, rgba(247,245,241,.86) 0 7%, transparent 7.5%),
    linear-gradient(150deg, var(--sky), #5e8290 55%, var(--deep-water));
}
.kayak-card-visual.second {
  background-image:
    linear-gradient(180deg, rgba(16,28,24,.08) 0%, rgba(16,28,24,.02) 44%, rgba(16,28,24,.42) 100%),
    url('assets/solaris-410c.jpg');
  background-size: cover;
  background-position: center center;
}
.kayak-card-visual span {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.kayak-card-visual.second span { display: none; }
.kayak-card-copy { padding: clamp(1.5rem, 4vw, 3rem); }
.kayak-card-copy p:last-child { max-width: 520px; }

/* --------------------------------------------------------------------------
   Impressions
   -------------------------------------------------------------------------- */
.impressions { padding-top: clamp(5rem, 9vw, 9rem); padding-bottom: clamp(5rem, 9vw, 9rem); }
.impression-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1.5rem;
}
.impression-card { overflow: hidden; border-radius: 28px; background: rgba(255,255,255,.92); }
.impression-card .card-image { min-height: 260px; }

/* --------------------------------------------------------------------------
   Regions
   -------------------------------------------------------------------------- */
.regions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  padding: clamp(5rem, 10vw, 10rem) max(1.2rem, calc((100vw - 1240px)/2));
  background: var(--deep-water);
  color: white;
}
.regions > div { padding-left: 42px; }
.regions ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.25); }
.regions li {
  position: relative;
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(255,255,255,.25);
  font-size: 1.1rem;
  cursor: default;
  outline: none;
}
.region-name { display: block; font-weight: 700; }
.region-info {
  display: block;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  color: rgba(255,255,255,.78);
  font-size: .94rem;
  line-height: 1.45;
  transition: max-height .28s ease, opacity .22s ease, margin-top .28s ease;
}
.regions li:hover .region-info,
.regions li:focus .region-info,
.regions li:focus-within .region-info {
  max-height: 5rem;
  margin-top: .55rem;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact-section {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: var(--column-gap);
  padding: clamp(5rem, 10vw, 10rem) 0;
}
.contact-intro {
  position: sticky;
  top: 7rem;
  align-self: start;
  max-width: 540px;
}
.contact-form {
  width: 100%;
  max-width: 680px;
  display: grid;
  gap: 1.4rem;
  justify-self: start;
  padding: clamp(1.5rem, 5vw, 4rem);
  border-radius: 28px;
  background: white;
}
.contact-form label,
legend { display: grid; gap: .5rem; font-weight: 700; }
.contact-note { margin-top: 1rem; color: rgba(31,35,36,.84); }
.field-note {
  display: block;
  margin-top: .15rem;
  color: rgba(35,67,74,.8);
  font-size: .86rem;
  font-weight: 500;
}
input,
textarea {
  width: 100%;
  padding: .8rem .1rem;
  border: 0;
  border-bottom: 1px solid var(--stone);
  background: transparent;
  color: var(--ink);
  font: inherit;
}
fieldset { margin: 0; padding: 0; border: 0; }
.checks { max-width: 360px; display: grid; grid-template-columns: 1fr; gap: .6rem; }
.checks label {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: .55rem .8rem;
  border: 1px solid var(--stone);
  border-radius: 999px;
  font-weight: 600;
}
.checks input { width: auto; }
.two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.form-note { color: #666; font-size: .85rem; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
footer {
  padding: 5rem max(1.2rem, calc((100vw - 1240px)/2));
  background: #172e34;
  color: white;
}
.footer-wordmark { display: inline-block; margin-bottom: 1rem; font-size: 3rem; }
.footer-line { margin: 4rem 0 0; font-family: var(--serif); font-size: 1.5rem; }

/* --------------------------------------------------------------------------
   Desktop geometry (river visible)
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  .page-shell { margin-left: var(--desktop-river-safe); }
  .hero { margin-left: calc(-1 * var(--desktop-river-safe)); }
  .hero-content {
    width: min(1100px, calc(100% - 2.4rem));
    margin-left: auto;
    margin-right: auto;
  }

  /* All primary content uses the same 110px global river gap. The right side
     stays fluid instead of being trapped in a narrow max-width container. */
  .section,
  .contact-section {
    width: var(--content-width);
    margin-left: var(--content-local-left);
    margin-right: 0;
  }

  .intro {
    grid-template-columns: minmax(0,1.02fr) minmax(360px,.82fr);
    column-gap: var(--column-gap);
  }
  .intro-copy { max-width: 560px; padding-top: 2.4rem; }

  .section-heading { max-width: none; }
  .experience-time-note,
  .voices-intro { max-width: none; width: 100%; }

  /* Lower full-width blocks share exactly the same global left axis. */
  .regions,
  footer {
    width: calc(100vw - var(--content-global-left));
    margin-left: var(--content-local-left);
    padding-left: 0;
    padding-right: var(--content-right-gap);
  }
  .regions > div { padding-left: 56px; }
  footer > .footer-wordmark,
  footer > p { margin-left: 56px; }

  .contact-section {
    grid-template-columns: 1fr 1fr;
    gap: var(--column-gap);
  }
  .contact-form { max-width: 680px; }

  .kayaks-section .section-heading,
  .kayaks-section .section-heading > div,
  .kayaks-section .section-heading h2 { max-width: none; width: 100%; }
}

/* Taller desktops keep the hero from growing indefinitely. */
@media (min-width: 1280px) and (min-height: 1101px) {
  .hero { min-height: 1100px; }
}

/* Short desktop windows: preserve percentage distribution but reduce the
   physical river item footprint so the five items do not collide. */
@media (min-width: 1280px) and (max-height: 620px) {
  .river-item { height: 102px; }
  .item-1 { top: clamp(58px, var(--river-y-1), calc(100vh - 110px)); }
  .item-2 { top: clamp(58px, var(--river-y-2), calc(100vh - 110px)); }
  .item-3 { top: clamp(58px, var(--river-y-3), calc(100vh - 110px)); }
  .item-4 { top: clamp(58px, var(--river-y-4), calc(100vh - 110px)); }
  .item-5 { top: clamp(58px, var(--river-y-5), calc(100vh - 110px)); }
  .river-kayak { top: 8px; width: 36px; height: 82px; }
  .hover-branch { top: 5px; }
}

/* --------------------------------------------------------------------------
   Tablet and mobile
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .river-rail { display: none; }
  .page-shell,
  .hero { margin-left: 0; }
  .hero-content {
    width: min(1100px, calc(100% - 2.4rem));
    margin-left: auto;
    margin-right: auto;
  }
  .site-header { left: 0; padding-left: 1.2rem; }
  .mobile-river-nav {
    position: sticky;
    z-index: 90;
    top: 72px;
    display: block;
    padding: .5rem 0 .72rem;
    background: var(--sky);
    box-shadow: 0 1px 0 rgba(35,67,74,.1), 0 8px 20px rgba(35,67,74,.08);
  }
  .mobile-river-nav::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    bottom: -11px;
    height: 13px;
    background: var(--sky);
    clip-path: polygon(0 0, 100% 0, 100% 46%, 90% 67%, 80% 49%, 70% 72%, 60% 52%, 50% 76%, 40% 54%, 30% 70%, 20% 48%, 10% 65%, 0 45%);
    pointer-events: none;
  }
  .mobile-river-track { z-index: 1; padding: .15rem 1rem .2rem; }
}

@media (max-width: 860px) {
  .menu-toggle {
    display: block;
    padding: .45rem .8rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: transparent;
    color: inherit;
  }
  .main-nav {
    position: absolute;
    top: 100%;
    left: 1rem;
    right: 1rem;
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 1rem;
    border-radius: 18px;
    background: var(--mist);
    color: var(--deep-water);
    box-shadow: 0 20px 40px rgba(0,0,0,.12);
  }
  .main-nav.open { display: flex; }
  .intro,
  .section-heading,
  .experience-grid,
  .gestalterinnen-lead,
  .voice-grid,
  .kayak-grid,
  .impression-grid,
  .regions,
  .contact-section { grid-template-columns: 1fr; }
  .intro-copy { padding-top: 0; }
  .gestalterinnen-lead .split-media { min-height: 420px; }
  .kayak-card-visual { min-height: 240px; }
  .regions > div { padding-left: 0; }
  .contact-intro { position: static; }
  .contact-form { max-width: none; }
}

@media (max-width: 560px) {
  h1 { font-size: 3.5rem; }
  .hero-content { padding-bottom: 5rem; }
  .scroll-hint { display: none; }
  .two-columns,
  .tour-facts { grid-template-columns: 1fr; }
  .mobile-river-nav { top: 68px; }
  .mobile-river-track a { min-width: 112px; padding-inline: .62rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* V105 — fluid inner columns for wide browsers, while preserving the Clean axis system */
@media (min-width: 1280px) {
  /* Same familiar 1.6rem relationship as V101, but both columns now grow with the viewport. */
  #idee.intro {
    grid-template-columns: minmax(0, 1.04fr) minmax(340px, .96fr);
    column-gap: var(--column-gap);
    justify-content: stretch;
  }

  #idee .intro-copy {
    margin-left: 0;
    max-width: none;
    width: 100%;
  }

  /* Contact text and form scale together instead of staying trapped at V101 widths. */
  .contact-section {
    grid-template-columns: minmax(360px, 1.04fr) minmax(430px, .96fr);
    column-gap: var(--column-gap);
    justify-content: stretch;
  }

  .contact-intro {
    max-width: none;
    width: 100%;
  }

  .contact-form {
    justify-self: stretch;
    width: 100%;
    max-width: none;
  }

  /* Explicitly allow the named section texts to use the entire content width. */
  .experience-time-note,
  .voices-intro,
  .kayaks-section .section-heading,
  .kayaks-section .section-heading > div,
  .kayaks-section .section-heading h2 {
    max-width: none;
    width: 100%;
  }
}


/* V106 — editorial line breaks and adjusted section headline scale */
#erlebnisse .section-heading h2 {
  max-width: none;
  font-size: clamp(2.35rem, 4.15vw, 4.35rem);
  line-height: 1.06;
  text-wrap: balance;
}
#gestalterinnen .section-heading h2 {
  max-width: none;
  font-size: clamp(2.3rem, 4vw, 4.2rem);
  line-height: 1.07;
  text-wrap: balance;
}
#erlebnisse .experience-time-note br {
  display: block;
  content: "";
  margin-top: .22rem;
}


/* V107 — panorama break, Flussgemeinschaft intro placement and kayak intro */
.panorama-break {
  width: min(1240px, calc(100% - 2.4rem));
  height: clamp(170px, 17vw, 260px);
  margin: 0 auto;
  border-radius: 28px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(247,245,241,.06), rgba(35,67,74,.14)),
    linear-gradient(145deg, #b8c8c0 0%, #8fc4d7 42%, #6f8790 68%, #405f66 100%);
}
.panorama-break::after {
  width: 42%;
  height: 180%;
  left: 34%;
  top: -62%;
  border-radius: 50%;
  opacity: .34;
}
.panorama-break span {
  position: absolute;
  left: 1.2rem;
  bottom: 1rem;
  z-index: 2;
  color: rgba(255,255,255,.9);
}

#gestalterinnen .section-heading {
  margin-bottom: 2.5rem;
}
#gestalterinnen .voices-intro {
  margin: 1rem 0 0;
  width: 100%;
  max-width: none;
}

.kayak-intro {
  width: 100%;
  max-width: 84ch;
  margin: 1rem 0 0;
  color: rgba(35,67,74,.78);
  font-size: .96rem;
  line-height: 1.6;
  text-wrap: pretty;
}

@media (min-width: 1280px) {
  /* Pull the right idea column slightly left while preserving its existing right edge. */
  #idee .intro-copy {
    margin-left: -18px;
    width: calc(100% + 18px);
  }

  .panorama-break {
    margin-left: var(--content-axis-left);
    margin-right: auto;
    width: min(
      var(--content-max),
      calc(100vw - var(--river-visual-edge) - var(--content-river-gap) - var(--content-right-gap))
    );
  }

  #kajaks .kayak-intro {
    max-width: none;
  }
}

@media (max-width: 1279px) {
  .panorama-break {
    width: min(1240px, calc(100% - 2.4rem));
  }
}


/* V108 — full width panorama and visible heading helper texts */
.panorama-break.full-bleed {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0;
  height: clamp(180px, 20vw, 280px);
}

.panorama-break.full-bleed::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(247,245,241,.08) 0%, rgba(247,245,241,0) 24%, rgba(27,50,57,.16) 100%),
    linear-gradient(180deg, rgba(143,196,215,.42) 0%, rgba(111,135,144,.4) 43%, rgba(64,95,102,.82) 100%);
}

.panorama-break.full-bleed::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 48%;
  background:
    radial-gradient(ellipse at 12% 86%, rgba(247,245,241,.28) 0 12%, transparent 13%),
    radial-gradient(ellipse at 26% 82%, rgba(247,245,241,.20) 0 12%, transparent 13%),
    radial-gradient(ellipse at 52% 80%, rgba(247,245,241,.15) 0 12%, transparent 13%),
    linear-gradient(180deg, transparent 0%, rgba(34,67,74,.2) 70%, rgba(34,67,74,.44) 100%);
  opacity: .55;
}

.panorama-break.full-bleed span {
  left: max(1.5rem, var(--content-axis-left));
  bottom: 1.15rem;
  z-index: 2;
  font-weight: 600;
  letter-spacing: .04em;
}

#gestalterinnen .section-heading > div:last-child,
#kajaks .section-heading > div:last-child {
  display: block;
}

#gestalterinnen .voices-intro,
#kajaks .kayak-intro {
  display: block;
  margin-top: 1rem;
  width: 100%;
}

#kajaks .kayak-intro {
  max-width: none;
  color: rgba(35,67,74,.78);
  font-size: .96rem;
  line-height: 1.6;
}


/* V109 — stable navigation sizing, resonance title, footer alignment and imprint */
.main-nav {
  gap: clamp(.9rem, 1.05vw, 1.35rem);
}
.main-nav a {
  font-size: clamp(.88rem, .84rem + .10vw, .95rem);
}
.nav-cta {
  padding: .52rem .92rem;
}

.imprint-section {
  background: var(--mist);
  color: var(--deep-water);
  padding: clamp(4rem, 7vw, 6.5rem) 0;
}
.imprint-inner {
  width: min(1240px, calc(100% - 2.4rem));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(220px,.65fr) minmax(0,1.35fr);
  gap: clamp(2rem,5vw,5rem);
}
.imprint-heading h2 {
  margin: 0;
  font-size: clamp(2.1rem,3.6vw,3.7rem);
}
.imprint-copy > p {
  margin-top: 0;
  max-width: 62ch;
}
.imprint-data {
  margin: 1.8rem 0 0;
  display: grid;
  grid-template-columns: minmax(180px,.45fr) minmax(0,1fr);
  gap: .65rem 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(35,67,74,.16);
}
.imprint-data dt { font-weight: 700; }
.imprint-data dd { margin: 0; color: rgba(35,67,74,.72); }
.footer-legal {
  margin-top: 2rem;
}
.footer-legal a {
  color: rgba(255,255,255,.74);
  text-decoration: underline;
  text-underline-offset: .2em;
}

@media (min-width:1280px) {
  /* .footer-line's class margin previously overruled the generic footer paragraph axis. */
  footer > .footer-line {
    margin-left: 56px;
  }
  footer > .footer-legal {
    margin-left: 56px;
  }

  .imprint-inner {
    width: var(--content-width);
    margin-left: var(--content-global-left);
    margin-right: 0;
  }
}

@media (max-width:860px) {
  .imprint-inner,
  .imprint-data {
    grid-template-columns: 1fr;
  }
  .imprint-data { gap: .25rem; }
  .imprint-data dd { margin-bottom: .8rem; }
}


/* V110 — legal area: participation, privacy and imprint */
.legal-stack {
  position: relative;
  z-index: 2;
}
.legal-section {
  color: var(--deep-water);
  padding: clamp(4.5rem, 7.5vw, 7.5rem) 0;
}
.legal-section-light { background: #fff; }
.legal-section-mist { background: var(--mist); }
.legal-inner {
  width: min(1240px, calc(100% - 2.4rem));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(210px, .55fr) minmax(0, 1.45fr);
  gap: clamp(2.2rem, 5vw, 6rem);
  align-items: start;
}
.legal-heading {
  position: sticky;
  top: 7.2rem;
  align-self: start;
}
.legal-heading h2 {
  margin: 0;
  font-size: clamp(2.15rem, 3.6vw, 3.8rem);
  line-height: 1.02;
  text-wrap: balance;
}
.legal-status {
  margin: 1rem 0 0;
  color: rgba(35,67,74,.55);
  font-size: .78rem;
  letter-spacing: .04em;
}
.legal-copy {
  max-width: 82ch;
}
.legal-lead {
  margin: 0 0 2.5rem;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.15rem + .35vw, 1.65rem);
  line-height: 1.5;
  color: rgba(35,67,74,.94);
}
.legal-copy h3 {
  margin: 2.25rem 0 .55rem;
  font-family: var(--sans);
  font-size: .9rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--reed);
}
.legal-copy p,
.legal-copy dd,
.legal-address {
  font-size: .96rem;
  line-height: 1.7;
}
.legal-copy p { margin: .6rem 0 1rem; }
.legal-copy a {
  color: var(--deep-water);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
.legal-address {
  margin: .5rem 0 1.4rem;
  font-style: normal;
}
.legal-open-point {
  margin-top: 2.6rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid rgba(35,67,74,.16);
  border-radius: 14px;
  background: rgba(143,196,215,.10);
}
.legal-open-point strong {
  display: block;
  margin-bottom: .35rem;
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--deep-water);
}
.legal-open-point p {
  margin: 0;
  color: rgba(35,67,74,.72);
  font-size: .86rem;
  line-height: 1.55;
}
.legal-muted {
  color: rgba(35,67,74,.55);
  font-size: .9em;
}
.legal-section .imprint-data {
  margin: 0;
  grid-template-columns: minmax(190px, .45fr) minmax(0,1fr);
}
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem 1.3rem;
}
.form-note a {
  color: inherit;
  text-underline-offset: .18em;
}

@media (min-width:1280px) {
  .legal-inner {
    width: var(--content-width);
    margin-left: var(--content-global-left);
    margin-right: 0;
  }
}
@media (max-width:860px) {
  .legal-inner {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
  .legal-heading {
    position: static;
  }
  .legal-copy {
    max-width: none;
  }
  .legal-section .imprint-data {
    grid-template-columns: 1fr;
  }
}


/* V111 — compact legal accordions on the same content axis as the main sections */
.legal-stack {
  position: relative;
  z-index: 2;
  width: min(1240px, calc(100% - 2.4rem));
  margin: 0 auto;
  padding: clamp(3.5rem, 6vw, 6rem) 0;
  color: var(--deep-water);
}

.legal-dropdown {
  width: 100%;
  margin: 0;
  border: 0;
  border-top: 1px solid rgba(35,67,74,.22);
  background: transparent;
}

.legal-dropdown:last-child {
  border-bottom: 1px solid rgba(35,67,74,.22);
}

.legal-summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 78px;
  padding: 1.15rem 0;
  cursor: pointer;
  list-style: none;
  color: var(--deep-water);
  user-select: none;
}

.legal-summary::-webkit-details-marker {
  display: none;
}

.legal-summary::marker {
  content: "";
}

.legal-summary-title {
  font-family: var(--serif);
  font-size: clamp(1.55rem, 1.25rem + .8vw, 2.15rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.025em;
}

.legal-summary-icon {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(35,67,74,.28);
  border-radius: 50%;
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1;
  transition: transform .2s ease;
}

.legal-dropdown[open] .legal-summary-icon {
  transform: rotate(45deg);
}

.legal-dropdown-content {
  padding: .25rem 0 3.25rem;
}

.legal-dropdown .legal-status {
  margin: 0 0 1.4rem;
}

.legal-dropdown .legal-copy {
  width: min(100%, 88ch);
  max-width: 88ch;
}

.legal-dropdown .legal-lead {
  margin-bottom: 2.2rem;
}

.legal-dropdown .imprint-data {
  margin-top: .4rem;
}

/* Old V110 section wrappers no longer control layout. */
.legal-section,
.legal-inner,
.legal-heading {
  all: unset;
}

@media (min-width: 1280px) {
  .legal-stack {
    width: var(--content-width);
    margin-left: var(--content-local-left);
    margin-right: 0;
  }
}

@media (max-width: 860px) {
  .legal-stack {
    width: min(1240px, calc(100% - 2.4rem));
    margin-left: auto;
    margin-right: auto;
  }

  .legal-summary {
    min-height: 68px;
  }

  .legal-dropdown .legal-copy {
    max-width: none;
  }
}


/* V112 — panorama image, updated copy, dark bottlepost form and refined cards */
.panorama-break.full-bleed {
  background-image: url('assets/panorama-break-v112.jpg');
  background-size: cover;
  background-position: center 20%;
}
.panorama-break.full-bleed::before {
  background:
    linear-gradient(180deg, rgba(247,245,241,.04) 0%, rgba(247,245,241,0) 24%, rgba(27,50,57,.10) 100%),
    linear-gradient(180deg, rgba(143,196,215,.18) 0%, rgba(111,135,144,.14) 43%, rgba(64,95,102,.30) 100%);
}
.panorama-break.full-bleed::after,
.panorama-break span {
  display: none;
}

#gestalterinnen .voices-intro {
  max-width: 68ch;
}

#kajaks h2 {
  max-width: 16ch;
}

.kayak-card-visual.second {
  background-image:
    linear-gradient(180deg, rgba(16,28,24,.06) 0%, rgba(16,28,24,.03) 44%, rgba(16,28,24,.36) 100%),
    url('assets/solaris-410c-v112.jpg');
  background-position: center center;
}

.theresa-card .profile-copy {
  max-width: none;
}

.contact-form {
  position: relative;
  isolation: isolate;
  overflow: visible;
  margin-top: 2rem;
  padding-top: clamp(2.5rem, 6vw, 4.7rem);
  background: var(--deep-water);
  color: var(--white);
  box-shadow: 0 22px 40px rgba(17, 36, 42, .16);
}
.contact-form::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -34px;
  height: 38px;
  background: no-repeat center top / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath d='M0 80 V36 C60 52 120 58 180 46 C240 34 300 8 360 10 C420 12 480 42 540 46 C600 50 660 24 720 18 C780 12 840 22 900 34 C960 46 1020 58 1080 54 C1140 50 1170 44 1200 38 V80 Z' fill='%2323434A'/%3E%3C/svg%3E");
  pointer-events: none;
}
.contact-form label,
.contact-form legend,
.contact-form .form-note,
.contact-form .field-note {
  color: rgba(255,255,255,.92);
}
.contact-form input,
.contact-form textarea {
  border-bottom-color: rgba(255,255,255,.42);
  color: var(--white);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(255,255,255,.58);
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-bottom-color: rgba(255,255,255,.82);
}
.contact-form .checks label {
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: var(--white);
}
.contact-form .checks input {
  accent-color: var(--sky);
}
.contact-form .button-dark {
  background: rgba(255,255,255,.96);
  color: var(--deep-water);
  border: 0;
  justify-content: center;
  text-align: center;
}
.contact-form .button-dark:hover {
  background: var(--white);
}
.contact-form .form-note a {
  color: var(--sky);
}
.contact-form .form-note.is-sent {
  color: rgba(255,255,255,.96);
  font-weight: 700;
}

@media (max-width: 860px) {
  .contact-form {
    margin-top: 1.5rem;
  }
}


/* V113 — Flussgemeinschaft copy correction and integrated bottlepost wave */
#gestalterinnen .section-heading h2 {
  max-width: 19ch;
}
#gestalterinnen .voices-intro {
  max-width: none;
  width: 100%;
}

/* The form itself begins square at the top. A very shallow wave forms only
   the upper horizontal edge, instead of looking like a separate block. */
.contact-form {
  border-radius: 0 0 28px 28px;
  margin-top: 1.6rem;
  padding-top: clamp(2rem, 5vw, 3.8rem);
}
.contact-form::before {
  top: -16px;
  height: 17px;
  background: no-repeat center bottom / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 34' preserveAspectRatio='none'%3E%3Cpath d='M0 25 C90 12 165 12 255 23 C345 34 425 31 510 18 C595 5 690 4 780 18 C870 32 950 34 1035 23 C1110 13 1160 13 1200 18 L1200 34 L0 34 Z' fill='%2323434A'/%3E%3C/svg%3E");
}


/* V114 — updated imagery, full-width headings and simplified impressions */
.panorama-break.full-bleed {
  background-image: url('assets/panorama-break-v114.jpg');
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center 34%;
}
@media (max-width: 900px) {
  .panorama-break.full-bleed {
    background-size: cover;
    background-position: center 42%;
  }
}
.placeholder-image.artenvielfalt-heron-photo { background-image: url('assets/artenvielfalt-heron-v114.jpg'); background-position: center 63%; }
.placeholder-image.atem-photo { background-image: url('assets/artenvielfalt.jpg'); background-position: center 54%; }
.placeholder-image.geschichten-photo { background-image: url('assets/geschichten-v114.jpg'); background-position: center center; }
.placeholder-image.sterne-photo { background-image: url('assets/sterne-v114.jpg'); background-position: center 52%; }
.placeholder-image.damian-photo { background-image: url('assets/damian-v114.jpg'); background-position: center 28%; }
.placeholder-image.artenvielfalt-heron-photo::after,
.placeholder-image.artenvielfalt-heron-photo > span,
.placeholder-image.atem-photo::after,
.placeholder-image.atem-photo > span,
.placeholder-image.geschichten-photo::after,
.placeholder-image.geschichten-photo > span,
.placeholder-image.sterne-photo::after,
.placeholder-image.sterne-photo > span,
.placeholder-image.damian-photo::after,
.placeholder-image.damian-photo > span { display: none; }
#gestalterinnen .section-heading,
#gestalterinnen .section-heading > div:last-child,
#gestalterinnen .section-heading h2,
#impressionen .section-heading,
#impressionen .section-heading > div:last-child,
#impressionen .section-heading h2 {
  width: 100%;
  max-width: none;
}
#gestalterinnen .section-heading h2 { max-width: none; }
#gestalterinnen .voices-intro { max-width: none; width: 100%; }
.impressions-placeholder {
  width: 100%;
  padding: clamp(1.25rem, 2vw, 1.75rem) 0 0;
  color: rgba(35,67,74,.76);
  font-size: 1rem;
  line-height: 1.7;
}
.impressions-placeholder p { max-width: none; }
.regions .region-list .region-info { max-width: 52ch; }


/* V115 — panorama framing, story crop, maps and bottlepost */

@media (min-width: 1280px) {
  .panorama-break.full-bleed {
    width: calc(100vw - var(--river-visual-edge));
    max-width: calc(100vw - var(--river-visual-edge));
    margin-left: var(--river-visual-edge);
    margin-right: 0;
  }
}

.panorama-break.full-bleed {
  background-image: url('assets/panorama-break-v115.jpg');
  background-size: 100% auto;
  background-position: 44% 64%;
  height: clamp(220px, 24vw, 340px);
}
@media (max-width: 1279px) {
  .panorama-break.full-bleed {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    background-size: cover;
    background-position: 48% 58%;
    height: clamp(210px, 34vw, 320px);
  }
}

.placeholder-image.artenvielfalt-heron-photo {
  background-image: url('assets/artenvielfalt-heron-v115.jpg');
  background-position: center 58%;
}
.placeholder-image.damian-photo {
  background-image: url('assets/damian-v115.jpg');
  background-position: center 26%;
}
.placeholder-image.sterne-photo {
  background-image: url('assets/sterne-v115.jpg');
  background-position: center 56%;
}
.placeholder-image.geschichten-photo {
  background-image: url('assets/geschichten-v115.jpg');
  background-position: center 62%;
  background-size: cover;
}

#gestalterinnen .section-heading h2 {
  max-width: none;
  width: 100%;
}

#kajaks h2 {
  max-width: none;
}
#kajaks .kayak-intro {
  max-width: 58ch;
}

.contact-form {
  overflow: visible;
}
.form-bottlepost {
  position: absolute;
  top: -40px;
  right: clamp(1rem, 3vw, 2.3rem);
  width: clamp(150px, 20vw, 220px);
  pointer-events: none;
  z-index: 3;
}
.bottlepost-illustration {
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 8px 10px rgba(11, 27, 35, .18));
}
.bottlepost-illustration .bottle-group {
  transform-origin: 50% 50%;
  animation: bottleFloat 5.6s ease-in-out infinite;
}
.bottlepost-illustration .wave-lines {
  animation: bottleWave 6.2s ease-in-out infinite;
}
@keyframes bottleFloat {
  0%, 100% { transform: translate(116px,64px) rotate(-12deg) translateY(0px); }
  50% { transform: translate(116px,64px) rotate(-9deg) translateY(-3px); }
}
@keyframes bottleWave {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(1.5px); opacity: .92; }
}

.region-list {
  border-top: 1px solid rgba(255,255,255,.25);
}
.region-list li {
  padding: 1.05rem 0 1.15rem;
}
.region-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 1rem;
  align-items: start;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  transition: max-height .32s ease, opacity .22s ease, margin-top .28s ease;
}
.region-info {
  max-height: none;
  opacity: 1;
  margin-top: 0;
}
.regions li:hover .region-detail,
.regions li:focus .region-detail,
.regions li:focus-within .region-detail {
  max-height: 220px;
  margin-top: .7rem;
  opacity: 1;
}
.region-map {
  position: relative;
  display: block;
  min-height: 118px;
  border-radius: 18px;
  background-color: rgba(247,245,241,.96);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(35,67,74,.05), 0 10px 18px rgba(7, 22, 26, .08);
  overflow: hidden;
}
.region-map::before,
.region-map::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
}
.region-map::before {
  opacity: .28;
  background-image:
    linear-gradient(transparent 0, transparent calc(100% - 1px), rgba(35,67,74,.08) calc(100% - 1px)),
    linear-gradient(90deg, transparent 0, transparent calc(100% - 1px), rgba(35,67,74,.08) calc(100% - 1px));
  background-size: 100% 22px, 22px 100%;
}
.region-map::after {
  inset: 12px;
  border-radius: 14px;
  background-size: contain;
  background-position: center;
}
.region-map .map-title {
  position: absolute;
  left: 12px;
  bottom: 10px;
  z-index: 2;
  color: var(--deep-water);
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .03em;
}
.map-altarme::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 120'%3E%3Crect width='180' height='120' fill='none'/%3E%3Cpath d='M18 78c12-18 23-24 35-30 16-8 23-17 33-34 0 0 10 19 27 23 16 3 26 10 49 1' fill='none' stroke='%2323434A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M78 48c7 5 11 9 17 18' fill='none' stroke='%238FC4D7' stroke-width='4.8' stroke-linecap='round'/%3E%3Ccircle cx='114' cy='51' r='4.4' fill='%23D4B46A'/%3E%3Cpath d='M117 44l8-7' fill='none' stroke='%23D4B46A' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.map-donaukanal::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 120'%3E%3Cpath d='M30 86c8-5 19-10 29-15 15-8 26-17 36-29 15-17 27-32 61-45' fill='none' stroke='%2323434A' stroke-width='2.6' stroke-linecap='round'/%3E%3Crect x='42' y='22' width='26' height='18' rx='4' fill='none' stroke='%238C6A52' stroke-width='1.8'/%3E%3Crect x='112' y='58' width='24' height='15' rx='4' fill='none' stroke='%238C6A52' stroke-width='1.8'/%3E%3Ccircle cx='94' cy='52' r='4' fill='%23D4B46A'/%3E%3C/svg%3E");
}
.map-thaya::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 120'%3E%3Cpath d='M28 95c17-11 25-21 35-35 10-14 16-25 29-29 14-5 28 5 39-1 13-7 18-24 26-40' fill='none' stroke='%2323434A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M25 36l22 12M121 21l16 13' fill='none' stroke='%237A8561' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='78' cy='50' r='4.2' fill='%23D4B46A'/%3E%3C/svg%3E");
}
.map-marchfeld::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 120'%3E%3Cpath d='M20 62h22c8 0 13-4 20-10 9-8 17-10 28-10h65' fill='none' stroke='%2323434A' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M20 82h48c11 0 19-5 26-11 9-8 17-12 36-12h25' fill='none' stroke='%238FC4D7' stroke-width='3.4' stroke-linecap='round'/%3E%3Ccircle cx='100' cy='59' r='4.2' fill='%23D4B46A'/%3E%3C/svg%3E");
}
.map-europe::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 120'%3E%3Cpath d='M25 29c12-7 27-12 40-11 10 1 16 6 25 4 12-2 18-15 30-14 11 0 19 8 31 14' fill='none' stroke='%238C6A52' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M31 91c16-13 39-22 55-38 11-12 15-29 33-34 14-4 30 2 44 10' fill='none' stroke='%2323434A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='95' cy='54' r='4.4' fill='%23D4B46A'/%3E%3Cpath d='M92 48l-9-11' fill='none' stroke='%23D4B46A' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

@media (max-width: 900px) {
  .form-bottlepost {
    width: 150px;
    right: .7rem;
    top: -34px;
  }
  .region-detail {
    grid-template-columns: 1fr;
  }
  .region-map {
    min-height: 106px;
    max-width: 220px;
  }
}


/* V116 — copy refinements, lower story crop, maps/bottlepost removed */
.placeholder-image.geschichten-photo {
  background-position: center 76%;
}

#gestalterinnen .section-heading h2 {
  width: 100%;
  max-width: none;
}

#kajaks .kayak-intro {
  max-width: none;
  width: 100%;
}

#impressionen .section-heading h2 {
  width: 100%;
  max-width: none;
  font-size: clamp(2.35rem, 4.15vw, 4.35rem);
  line-height: 1.06;
}

/* Region dropdowns are back to text-only. */
.region-list > li .region-info {
  display: block;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  color: rgba(255,255,255,.78);
  font-size: .94rem;
  line-height: 1.45;
  transition: max-height .28s ease, opacity .22s ease, margin-top .28s ease;
}
.region-list > li:hover .region-info,
.region-list > li:focus .region-info,
.region-list > li:focus-within .region-info {
  max-height: 12rem;
  margin-top: .55rem;
  opacity: 1;
}


/* V117 — panorama at river edge, experience order and copy refinements */
:root {
  --river-y-2: 35%;
  --river-y-3: 50%;
}

/* The panorama begins exactly at the visible blue river edge on desktop.
   Since .page-shell itself starts 425px in from the viewport, the negative
   margin returns the photo to the global river edge rather than the content axis. */
@media (min-width: 1280px) {
  .panorama-break.full-bleed {
    width: calc(100vw - var(--river-visual-edge));
    max-width: calc(100vw - var(--river-visual-edge));
    margin-left: calc(var(--river-visual-edge) - var(--desktop-river-safe));
    margin-right: 0;
  }
}

.placeholder-image.geschichten-photo {
  background-position: center 88%;
}

#gestalterinnen .section-heading h2 {
  max-width: none;
  width: 100%;
}
.community-line-one {
  display: inline-block;
}
@media (min-width: 1280px) {
  .community-line-one { white-space: nowrap; }
}
@media (max-width: 720px) {
  .community-line-break { display: none; }
}

.kayak-equipment-note {
  width: 100%;
  margin: 1.6rem 0 0;
  padding: 1rem 1.2rem;
  border-radius: 18px;
  background: rgba(143,196,215,.18);
  color: var(--deep-water);
  font-size: 1.03rem;
  line-height: 1.55;
}
.kayak-equipment-note strong {
  display: block;
  margin-bottom: .18rem;
  font-size: 1.05em;
}
.kayak-equipment-note span {
  display: block;
  color: rgba(35,67,74,.82);
}

/* --------------------------------------------------------------------------
   V120 — layout rhythm, sixth experience, image crops and form refinements
   -------------------------------------------------------------------------- */

/* Panorama: start at global x = 150px on desktop; keep right edge flush. */
@media (min-width: 1280px) {
  .panorama-break.full-bleed {
    width: calc(100vw - 150px);
    max-width: calc(100vw - 150px);
    margin-left: calc(150px - var(--desktop-river-safe));
    margin-right: 0;
  }
}

/* Reduce the vertical breathing room between the major page blocks by ~30%. */
.section,
.contact-section {
  padding-top: clamp(3.5rem, 7vw, 7rem);
  padding-bottom: clamp(3.5rem, 7vw, 7rem);
}
.regions {
  padding-top: clamp(3.5rem, 7vw, 7rem);
  padding-bottom: clamp(3.5rem, 7vw, 7rem);
}

/* Requested experience image crops. */
.placeholder-image.artenvielfalt-heron-photo {
  background-position: center 67%;
}
.placeholder-image.geschichten-photo {
  background-position: center 94%;
}
.placeholder-image.begegnung-photo {
  background-image:
    linear-gradient(180deg, rgba(22,42,47,.04) 0%, rgba(22,42,47,.02) 55%, rgba(22,42,47,.22) 100%),
    url('assets/begegnung-v120.jpg');
  background-size: cover;
  background-position: center 50%;
}
.placeholder-image.sinne-photo {
  background-image:
    linear-gradient(180deg, rgba(35,67,74,.08), rgba(35,67,74,.28)),
    url('assets/hero-fluss.jpg');
  background-size: cover;
  background-position: center 58%;
}

/* Sixth river-navigation entry and tighter vertical distribution. */
:root {
  --river-y-1: 13%;
  --river-y-2: 27%;
  --river-y-3: 41%;
  --river-y-4: 55%;
  --river-y-5: 69%;
  --river-y-6: 83%;
}
.item-1 { top: clamp(58px, var(--river-y-1), calc(100vh - 110px)); }
.item-2 { top: clamp(58px, var(--river-y-2), calc(100vh - 110px)); }
.item-3 { top: clamp(58px, var(--river-y-3), calc(100vh - 110px)); }
.item-4 { top: clamp(58px, var(--river-y-4), calc(100vh - 110px)); }
.item-5 { top: clamp(58px, var(--river-y-5), calc(100vh - 110px)); }
.item-6 { --item-x: 29px; top: clamp(58px, var(--river-y-6), calc(100vh - 110px)); }
.theme-sinne { --theme-fill: var(--evening); }
.sensory-mark {
  position: absolute;
  left: 74px;
  top: 48%;
  width: 44px;
  transform: translateY(-50%);
  pointer-events: none;
}
.sensory-mark svg { display: block; width: 100%; height: auto; overflow: visible; }
.sensory-eye,
.sensory-pupil {
  fill: none;
  stroke: rgba(255,255,255,.92);
  stroke-width: 2.2;
  vector-effect: non-scaling-stroke;
}
.sensory-pupil { fill: rgba(255,255,255,.92); stroke: none; }

/* Connection profile: one named axis per slider rather than opposing poles. */
.connection-profile .single-spectrum .spectrum-labels {
  justify-content: flex-start;
}
.connection-profile .single-spectrum .spectrum-labels span {
  width: 100%;
}

/* Small collaborator chip on experience cards. */
.experience-companion {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin: -.15rem 0 1.2rem;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--deep-water);
  font-size: .94rem;
  line-height: 1.35;
}
.experience-companion span { opacity: 1; }
.experience-companion a {
  color: inherit;
  font-weight: 400;
  text-decoration: none;
}
.experience-companion a:hover,
.experience-companion a:focus {
  text-decoration: none;
}

.damian-role {
  margin: -.25rem 0 1rem;
  color: var(--reed);
  font-weight: 800;
}

/* Three boats on wider screens. */
.kayak-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.kayak-card-visual.safari {
  background:
    radial-gradient(ellipse at 50% 64%, rgba(247,245,241,.88) 0 7%, transparent 7.5%),
    linear-gradient(145deg, var(--reed), #58716a 52%, var(--deep-water));
}
@media (max-width: 980px) {
  .kayak-grid { grid-template-columns: 1fr; }
}

/* Keep Wunschdatum and Personenzahl inputs precisely aligned. */
.contact-form .two-columns {
  align-items: start;
}
.contact-form .two-columns > label {
  align-content: start;
  grid-template-rows: auto 52px auto;
}
.contact-form .two-columns input {
  height: 52px;
}

/* Datenschutz lead should use the same sans-serif body face as the rest. */
#datenschutz .legal-lead {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  font-weight: 400;
}

/* V121 — Impressum typography: one consistent typeface throughout. */
#impressum,
#impressum .legal-summary-title,
#impressum .legal-status,
#impressum .legal-copy,
#impressum .legal-copy p,
#impressum .legal-copy h3,
#impressum .imprint-data,
#impressum .imprint-data dt,
#impressum .imprint-data dd,
#impressum .legal-address,
#impressum a,
#impressum strong {
  font-family: var(--sans);
}

/* --------------------------------------------------------------------------
   V123 — font parity refinements, desktop river simplification and stronger
   image-crop overrides
   -------------------------------------------------------------------------- */

/* Keep the Fluss & Sinne entry in the mobile river track, but remove the
   desktop side-river boat as requested. Rebalance the remaining visible items. */
@media (min-width: 1280px) {
  .river-rail .item-4.theme-sinne {
    display: none;
  }

  .river-rail .item-1 { top: clamp(58px, 14%, calc(100vh - 110px)); }
  .river-rail .item-2 { top: clamp(58px, 29%, calc(100vh - 110px)); }
  .river-rail .item-3 { top: clamp(58px, 44%, calc(100vh - 110px)); }
  .river-rail .item-5 { top: clamp(58px, 61%, calc(100vh - 110px)); }
  .river-rail .item-6 { top: clamp(58px, 79%, calc(100vh - 110px)); }
}

/* Strong, explicit crop overrides so the requested percentage changes become
   visually noticeable and are not softened by older cascade entries. */
.placeholder-image.artenvielfalt-heron-photo {
  background-image: url('assets/artenvielfalt-heron-v115.jpg');
  background-size: cover;
  background-position: center 67% !important;
}

.placeholder-image.geschichten-photo {
  background-image: url('assets/geschichten-v115.jpg');
  background-size: cover;
  background-position: center 94% !important;
}

.placeholder-image.begegnung-photo {
  background-image:
    linear-gradient(180deg, rgba(22,42,47,.04) 0%, rgba(22,42,47,.02) 55%, rgba(22,42,47,.22) 100%),
    url('assets/begegnung-v123.jpg');
  background-size: cover;
  background-position: center 52% !important;
}


/* --------------------------------------------------------------------------
   V125 — encounter image, stronger crops, expandable card copy and waves
   -------------------------------------------------------------------------- */

/* Stronger requested image crops and updated Begegnung photo from upload. */
.placeholder-image.artenvielfalt-heron-photo {
  background-image: url('assets/artenvielfalt-heron-v115.jpg');
  background-size: cover;
  background-position: center 78% !important;
}
.placeholder-image.geschichten-photo {
  background-image: url('assets/geschichten-v115.jpg');
  background-size: cover;
  background-position: center 100% !important;
}
.placeholder-image.begegnung-photo {
  background-image:
    linear-gradient(180deg, rgba(22,42,47,.04) 0%, rgba(22,42,47,.02) 55%, rgba(22,42,47,.26) 100%),
    url('assets/begegnung-v125.jpg');
  background-size: cover;
  background-position: center 63% !important;
}

/* Remove decorative semicircle overlays from the experience photos,
   but keep the three keyword labels visible on every image. */
.experience-card .placeholder-image::after {
  display: none !important;
}
.experience-card .placeholder-image > span {
  display: inline-block !important;
  position: relative;
  z-index: 2;
}
.experience-card .placeholder-image.photo-card::before {
  background: linear-gradient(180deg, rgba(16,28,24,.08) 0%, rgba(16,28,24,.04) 44%, rgba(16,28,24,.54) 100%);
}

/* Expandable copy when the teaser would exceed four lines. */
.experience-description {
  position: relative;
  margin: 0 0 .85rem;
  line-height: 1.65;
}
.experience-description p {
  margin: 0;
}
.experience-description p + p {
  margin-top: .95rem;
}
.experience-description.clampable {
  max-height: calc(1.65em * 4);
  overflow: hidden;
}
.experience-description.clampable::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.6rem;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.92) 64%, rgba(255,255,255,1) 100%);
  pointer-events: none;
}
.experience-description.is-expanded {
  max-height: none;
}
.experience-description.is-expanded::after {
  display: none;
}
.card-toggle {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: 0 0 1.05rem;
  padding: .15rem 0;
  border: 0;
  background: transparent;
  color: var(--deep-water);
  font: inherit;
  font-size: .95rem;
  font-weight: 800;
  cursor: pointer;
}
.card-toggle::after {
  content: '▾';
  font-size: .9em;
  line-height: 1;
  transform: translateY(-1px);
}
.card-toggle.is-open::after {
  content: '▴';
}
.card-toggle[hidden] {
  display: none !important;
}

/* Slightly more compact three-column tour facts to fit small and large tours. */
.tour-facts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 640px) {
  .tour-facts {
    grid-template-columns: 1fr;
  }
}

/* Same gentle wave structure as the form on both edges of the dark regions block. */
.regions {
  position: relative;
  overflow: visible;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.regions::before,
.regions::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 17px;
  background: no-repeat center bottom / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 34' preserveAspectRatio='none'%3E%3Cpath d='M0 25 C90 12 165 12 255 23 C345 34 425 31 510 18 C595 5 690 4 780 18 C870 32 950 34 1035 23 C1110 13 1160 13 1200 18 L1200 34 L0 34 Z' fill='%2323434A'/%3E%3C/svg%3E");
  pointer-events: none;
}
.regions::before {
  top: -16px;
}
.regions::after {
  bottom: -16px;
  transform: scaleY(-1);
}

/* --------------------------------------------------------------------------
   V126 — true lower photo crops, pending portraits/photos, legal type parity
   -------------------------------------------------------------------------- */

/* Priority 1: these are newly cropped source images, not another background-
   position tweak. The full original width is retained; the crop simply starts
   lower in each vertical original so the subject moves visibly upward. */
.placeholder-image.artenvielfalt-heron-photo {
  background-image: url('assets/artenvielfalt-heron-v126.jpg') !important;
  background-size: cover !important;
  background-position: center 56% !important;
}
.placeholder-image.geschichten-photo {
  background-image: url('assets/geschichten-v126.jpg') !important;
  background-size: cover !important;
  background-position: center center !important;
}

/* Pending V126 image updates. */
.placeholder-image.sinne-photo {
  background-image:
    linear-gradient(180deg, rgba(35,67,74,.015), rgba(35,67,74,.10)),
    url('assets/sinne-thaya-v126.jpg') !important;
  background-size: cover !important;
  background-position: center 55% !important;
}
.kayak-card-visual.swing2-photo {
  background-image:
    linear-gradient(180deg, rgba(16,28,24,.02) 0%, rgba(16,28,24,.015) 52%, rgba(16,28,24,.22) 100%),
    url('assets/swing2-v126.jpg') !important;
  background-size: cover !important;
  background-position: 53% 56% !important;
}
.kayak-card-visual.swing2-photo span {
  display: none;
}

/* Theresa portrait in her profile card. */
.theresa-photo {
  display: block;
  width: 100%;
  height: var(--community-photo-height);
  margin: 0 0 1.25rem;
  border-radius: 16px;
  object-fit: cover;
  object-position: center 48%;
}

/* Keep legal typography consistent: Fraunces only for accordion headings,
   Nunito Sans for the body copy. This also fixes the previously serif lead. */
.legal-stack .legal-summary-title {
  font-family: var(--serif) !important;
}
.legal-stack .legal-copy,
.legal-stack .legal-copy p,
.legal-stack .legal-copy h3,
.legal-stack .legal-copy dl,
.legal-stack .legal-copy dt,
.legal-stack .legal-copy dd,
.legal-stack .legal-copy address,
.legal-stack .legal-copy a,
.legal-stack .legal-copy strong,
.legal-stack .legal-lead {
  font-family: var(--sans) !important;
}
#teilnahme .legal-lead,
#datenschutz .legal-lead {
  font-size: 1rem;
  line-height: 1.65;
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   V128 — Live-Version: launch banner, final tour labels and layout refinements
   -------------------------------------------------------------------------- */

/* Graureiher: move the visible crop upward (the bird therefore sits lower in
   the card) without adding any extra zoom beyond the normal cover behaviour. */
.placeholder-image.artenvielfalt-heron-photo {
  background-image: url('assets/artenvielfalt-heron-v126.jpg') !important;
  background-size: cover !important;
  background-position: center 12% !important;
}

/* Swing 2: shift the photograph slightly so the boat sits a touch farther right. */
.kayak-card-visual.swing2-photo {
  background-position: 47% 56% !important;
}

/* Collaborator line belongs directly to the experience title and stays quiet. */
#geschichten-card .experience-companion {
  margin: -.2rem 0 .8rem;
  padding: 0;
  background: transparent;
  color: rgba(35,67,74,.78);
  font-size: .9rem;
  font-weight: 400;
}
#geschichten-card .experience-companion a,
#geschichten-card .experience-companion a:hover,
#geschichten-card .experience-companion a:focus {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}

/* First-season / introductory-price note: deliberately calm, not salesy. */
.founding-banner {
  position: relative;
  overflow: hidden;
  margin: -1.4rem 0 2.6rem;
  padding: clamp(1.5rem, 3vw, 2.2rem) clamp(1.4rem, 3.4vw, 2.8rem);
  border: 1px solid rgba(35,67,74,.09);
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(143,196,215,.22), rgba(247,245,241,.82) 58%, rgba(212,180,106,.12));
  color: var(--deep-water);
}
.founding-banner::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: 0;
  height: 18px;
  opacity: .45;
  background: no-repeat center bottom / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 34' preserveAspectRatio='none'%3E%3Cpath d='M0 19 C90 7 165 7 255 18 C345 29 425 27 510 14 C595 1 690 1 780 14 C870 28 950 29 1035 18 C1110 8 1160 8 1200 13' fill='none' stroke='%238FC4D7' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  pointer-events: none;
}
.founding-banner .founding-kicker {
  margin: 0 0 .45rem;
  color: var(--reed);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.founding-banner h3 {
  margin: 0 0 .8rem;
  font-size: clamp(1.7rem, 2.5vw, 2.45rem);
  line-height: 1.08;
}
.founding-banner p {
  max-width: 78ch;
  margin: 0 0 .65rem;
  line-height: 1.65;
}
.founding-banner .founding-feedback {
  margin-bottom: .35rem;
  font-weight: 800;
}

/* Tour-fact labels are longer now; allow them to breathe. */
.tour-facts span {
  line-height: 1.25;
}
.tour-facts strong {
  margin-top: .12rem;
}

/* Only Theresa remains in the collaborator cards for now. */
.voice-grid {
  grid-template-columns: minmax(0, 1fr);
  max-width: 660px;
}

/* Equipment is part of the offer, so place it directly beneath the section title. */
#kajaks .kayak-equipment-note {
  max-width: 760px;
  margin: 1.15rem 0 .95rem;
  padding: 1rem 1.2rem 1.05rem;
  border: 1px solid rgba(35,67,74,.08);
  border-radius: 18px;
  background: rgba(143,196,215,.19);
  box-shadow: none;
}
#kajaks .kayak-equipment-note strong {
  font-size: 1.08rem;
  line-height: 1.35;
}
#kajaks .kayak-equipment-note span {
  margin-top: .18rem;
  font-size: .96rem;
}
#kajaks .kayak-intro {
  margin-top: 0;
}

/* Invisible honeypot for simple spam protection. */
.form-trap {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}
#submit-button:disabled {
  opacity: .62;
  cursor: wait;
}
.form-note.is-error {
  color: #ffe0d7;
  font-weight: 700;
}

@media (max-width: 720px) {
  .founding-banner {
    margin-top: -.6rem;
    margin-bottom: 1.8rem;
    border-radius: 20px;
  }
  .tour-facts {
    grid-template-columns: 1fr;
  }
}


/* --------------------------------------------------------------------------
   V129 — canonical experience names, founding prices and profile refinements
   -------------------------------------------------------------------------- */

/* Use the full vertical Graureiher original fitted to width so vertical
   positioning has real travel. No additional zoom is applied. The crop is
   intentionally moved upward so the bird sits visibly lower in the card. */
.placeholder-image.artenvielfalt-heron-photo {
  background-image: url('assets/artenvielfalt-heron-v114.jpg') !important;
  background-size: 100% auto !important;
  background-repeat: no-repeat !important;
  background-position: center 50% !important;
  background-color: #60715c;
}

/* Swing 2 previously had almost no horizontal overflow, so x-position changes
   were visually ineffective. A very small oversize creates enough travel to
   shift the boat clearly, but still subtly, to the right. */
.kayak-card-visual.swing2-photo {
  background-size: 106% auto !important;
  background-position: 0% 56% !important;
}

/* The collaborator line should read as a subtitle belonging to the heading. */
#geschichten-card h3 {
  margin-bottom: .08rem;
}
#geschichten-card .experience-companion {
  margin: 0 0 .7rem;
  font-size: .9rem;
  line-height: 1.25;
}

/* Founding copy spans the entire available content width. */
.founding-banner p {
  width: 100%;
  max-width: none;
}

/* Two collaborator cards again: Theresa + Raffael placeholder. */
.voice-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: none;
}
.placeholder-profile {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.placeholder-profile .profile-copy {
  color: rgba(255,255,255,.78);
}
@media (max-width: 760px) {
  .voice-grid { grid-template-columns: 1fr; }
}

/* Prices are included directly in the two tour-format facts. */
.tour-facts strong {
  font-size: .92rem;
}


/* --------------------------------------------------------------------------
   V130 — restrained image positioning, clearer tour prices and footer badge
   -------------------------------------------------------------------------- */

/* Graureiher: return to the V128 image/crop treatment and move the bird only
   minimally downward from that state. No extra zoom and no alternate source. */
.placeholder-image.artenvielfalt-heron-photo {
  background-image: url('assets/artenvielfalt-heron-v126.jpg') !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center 10% !important;
  background-color: transparent;
}

/* Swing 2: fully undo V129's artificial oversize/edge anchoring. */
.kayak-card-visual.swing2-photo {
  background-size: cover !important;
  background-position: 47% 56% !important;
}

/* Give duration and price their own clear lines instead of compressing both
   into one value line. */
.tour-facts p {
  padding-top: .82rem;
  padding-bottom: .82rem;
}
.tour-facts .tour-time {
  margin-top: .22rem;
  font-size: .98rem;
  line-height: 1.35;
}
.tour-facts .tour-price {
  display: block;
  margin-top: .3rem;
  color: var(--deep-water);
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.3;
}

/* Raffael intentionally has no photo yet, but should read as a complete
   collaborator card rather than an empty placeholder. */
.raffael-card.placeholder-profile {
  justify-content: flex-start;
}

/* Official GreenWebspace hosting badge at the foot of the page. */
.hosting-badge {
  display: block;
  width: fit-content;
  margin-top: 1.8rem;
}
.hosting-badge img {
  display: block;
  width: 132px;
  max-width: 100%;
  height: auto;
}
@media (min-width: 1280px) {
  footer > .hosting-badge {
    margin-left: 56px;
  }
}


/* --------------------------------------------------------------------------
   V131 — calm central price communication and compact footer badge placement
   -------------------------------------------------------------------------- */

/* Prices live in the founding note, not inside the duration facts. */
.tour-facts .tour-price { display: none !important; }

/* The founding note now closes the experience section, below all cards. */
#gruendungspreis.founding-banner {
  width: 100%;
  margin: 2.4rem 0 0;
  scroll-margin-top: 120px;
}
#gruendungspreis .founding-prices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
  max-width: 620px;
  margin: 1rem 0 1rem;
}
#gruendungspreis .founding-price-card {
  display: grid;
  gap: .08rem;
  padding: .9rem 1rem;
  border: 1px solid rgba(35,67,74,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.58);
}
#gruendungspreis .founding-price-card span {
  color: rgba(35,67,74,.76);
  font-size: .78rem;
  font-weight: 700;
}
#gruendungspreis .founding-price-card strong {
  color: var(--deep-water);
  font-family: var(--serif);
  font-size: 1.45rem;
  line-height: 1.15;
}
#gruendungspreis .founding-price-card small {
  color: rgba(35,67,74,.72);
  font-size: .78rem;
}

/* Each experience card ends with a quiet link to the price rationale. */
.price-design-box {
  margin-top: .75rem;
  padding: .68rem .82rem;
  border: 1px solid rgba(35,67,74,.12);
  border-radius: 13px;
  background: rgba(143,196,215,.10);
}
.price-design-box a,
.card-content .price-design-box a {
  color: var(--deep-water);
  font-size: .84rem;
  font-weight: 800;
  text-decoration: none;
}
.price-design-box a:hover,
.price-design-box a:focus {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Keep the hosting badge on the same visual row as “Bis bald am Wasser.”
   It is absolutely positioned so the dark footer does not grow taller. */
footer {
  position: relative;
}
footer > .hosting-badge {
  position: absolute;
  left: max(1.2rem, calc((100vw - 1240px)/2));
  top: 10.55rem;
  margin: 0;
  z-index: 2;
}
@media (min-width: 1280px) {
  footer > .footer-line {
    margin-left: 205px;
  }
  footer > .hosting-badge {
    margin-left: 0;
  }
}
@media (max-width: 720px) {
  #gruendungspreis .founding-prices {
    grid-template-columns: 1fr;
  }
  footer > .hosting-badge {
    left: 1.2rem;
    top: auto;
    bottom: 5.1rem;
  }
  footer > .footer-line {
    padding-left: 150px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* --------------------------------------------------------------------------
   V132 — tighter section rhythm, price CTA order, simplified spiral and Safari photo
   -------------------------------------------------------------------------- */

/* Halve only the two requested inter-section gaps. */
#erlebnisse {
  padding-bottom: clamp(1.75rem, 3.5vw, 3.5rem);
}
#gestalterinnen {
  padding-top: clamp(1.75rem, 3.5vw, 3.5rem);
}
#kajaks {
  padding-bottom: clamp(1.75rem, 3.5vw, 3.5rem);
}
#impressionen {
  padding-top: clamp(1.75rem, 3.5vw, 3.5rem);
}

/* The price rationale sits immediately above the enquiry link at the foot of
   every experience card. */
.experience-card .price-design-box {
  margin-top: auto;
  margin-bottom: .55rem;
}
.experience-card .card-content > a[href="#kontakt"] {
  margin-top: 0;
  padding-top: 0;
}

/* Clear booking action inside the first-season price note. */
#gruendungspreis .founding-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-top: .8rem;
  padding: .78rem 1.15rem;
  border-radius: 999px;
  background: var(--deep-water);
  color: white;
  font-weight: 800;
  text-decoration: none;
}
#gruendungspreis .founding-cta:hover,
#gruendungspreis .founding-cta:focus {
  text-decoration: none;
  transform: translateY(-1px);
}

/* Safari: use the supplied fleet photo and keep the complete image visible so
   all three boats remain in frame. */
.kayak-card-visual.safari {
  background-image: url('assets/safari-v132.jpg') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-color: #718061 !important;
}
.kayak-card-visual.safari span {
  display: none;
}


/* --------------------------------------------------------------------------
   V133 — unified card CTAs, tighter community/kayak rhythm and kayak intro
   -------------------------------------------------------------------------- */

/* Halve the space between the collaborator cards and the kayak section. */
#gestalterinnen {
  padding-bottom: clamp(1.75rem, 3.5vw, 3.5rem);
}
#kajaks {
  padding-top: clamp(1.75rem, 3.5vw, 3.5rem);
}

/* Price rationale and booking action share one quiet box. */
.experience-card .price-design-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  margin-top: auto;
  margin-bottom: 0;
}
.experience-card .price-design-box .experience-booking-link {
  margin-left: auto;
  text-align: right;
  white-space: nowrap;
}

/* The equipment promise is a full-width introduction to the whole fleet. */
#kajaks .kayak-equipment-note {
  width: 100%;
  max-width: none;
  margin: 1.15rem 0 1rem;
  padding: 1.15rem 1.3rem 1.2rem;
}
#kajaks .kayak-equipment-note span {
  max-width: none;
  margin-top: .32rem;
  line-height: 1.55;
}

/* Safari photo: fill the visual edge-to-edge while keeping the fleet centered. */
.kayak-card-visual.safari {
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
}

@media (max-width: 520px) {
  .experience-card .price-design-box {
    gap: .65rem;
  }
  .experience-card .price-design-box a {
    font-size: .8rem;
  }
}


/* --------------------------------------------------------------------------
   V134 — card rhythm, kayak copy and footer badge alignment
   -------------------------------------------------------------------------- */

/* Give the collaborator subtitle a touch more breathing room so the first
   body-copy lines in Arten am Fluss and Geschichten am Fluss align visually. */
#geschichten-card .experience-companion {
  margin-bottom: 1.02rem;
}

/* Keep the GreenWebspace badge on the “Bis bald am Wasser.” row, but align it
   flush to the right edge of the footer content instead of the left. */
footer > .hosting-badge {
  left: auto !important;
  right: max(1.2rem, calc((100vw - 1240px)/2));
}
@media (min-width: 1280px) {
  footer > .footer-line {
    margin-left: 56px;
    margin-right: 190px;
  }
}
@media (max-width: 720px) {
  footer > .hosting-badge {
    left: auto !important;
    right: 1.2rem;
  }
  footer > .footer-line {
    padding-left: 0;
    padding-right: 150px;
  }
}


/* --------------------------------------------------------------------------
   V135 — exact first-row copy alignment and footer badge on legal row
   -------------------------------------------------------------------------- */

/* Give Arten and Geschichten the same fixed title zone. This keeps the first
   body-copy line on exactly the same vertical axis while leaving Theresa's
   collaborator line visually attached to the Geschichten title. */
#wildnis-card .experience-title-zone,
#geschichten-card .experience-title-zone {
  height: 5.75rem;
}
#wildnis-card .experience-title-zone h3,
#geschichten-card .experience-title-zone h3 {
  margin: 0;
}
#geschichten-card .experience-title-zone .experience-companion {
  margin: .28rem 0 0;
  padding: 0;
}

@media (max-width: 720px) {
  #wildnis-card .experience-title-zone,
  #geschichten-card .experience-title-zone {
    height: auto;
    min-height: 5.2rem;
  }
}

/* Put the GreenWebspace badge on the same baseline/row as the legal links.
   Using a real flex row is more robust than the earlier absolute positioning. */
footer > .footer-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 2rem;
}
footer > .footer-meta-row .footer-legal {
  margin: 0 !important;
}
footer > .footer-meta-row .hosting-badge {
  position: static !important;
  inset: auto !important;
  margin: 0 !important;
  flex: 0 0 auto;
  line-height: 0;
}
footer > .footer-meta-row .hosting-badge img {
  display: block;
  width: auto;
  height: 28px;
}
@media (min-width: 1280px) {
  footer > .footer-meta-row {
    margin-left: 56px;
  }
}
@media (max-width: 720px) {
  footer > .footer-meta-row {
    align-items: center;
    gap: .85rem;
  }
  footer > .footer-meta-row .hosting-badge img {
    height: 24px;
  }
}

/* --------------------------------------------------------------------------
   V139 — restore the original GreenWebspace badge size while keeping the
   current legal-row position and exact lower edge.
   -------------------------------------------------------------------------- */
footer > .footer-meta-row .hosting-badge {
  position: relative !important;
  width: 132px;
  height: 28px;
  overflow: visible;
  align-self: flex-end;
}
footer > .footer-meta-row .hosting-badge img {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 132px;
  max-width: none;
  height: auto;
}
@media (max-width: 720px) {
  footer > .footer-meta-row .hosting-badge {
    width: 132px;
    height: 24px;
  }
  footer > .footer-meta-row .hosting-badge img {
    width: 132px;
    height: auto;
  }
}

/* --------------------------------------------------------------------------
   V141 — dynamic mobile anchors, earlier hero fade and refined card surfaces
   -------------------------------------------------------------------------- */

/* Same calm blue-to-light treatment as the founding note, but deliberately
   finishing in clean white rather than sand/ochre. */
.experience-card {
  background: linear-gradient(
    135deg,
    rgba(143,196,215,.28) 0%,
    rgba(220,239,246,.42) 34%,
    rgba(248,252,253,.82) 62%,
    #ffffff 84%,
    #ffffff 100%
  ) !important;
}
.experience-card .card-content {
  background: transparent !important;
}

/* Planned regular price stays quiet; the actual 2026 founding price is clear. */
#gruendungspreis .founding-price-line {
  display: flex;
  align-items: baseline;
  gap: .65rem;
  margin: .08rem 0 .06rem;
}
#gruendungspreis .founding-regular-price {
  color: rgba(35,67,74,.46);
  font-size: .94rem;
  font-weight: 700;
  text-decoration-thickness: 1.5px;
}
#gruendungspreis .founding-current-price {
  margin: 0;
}

@media (max-width: 1279px) {
  /* The mobile river is a second sticky layer, positioned from the measured
     header height rather than a guessed pixel value. */
  .mobile-river-nav {
    top: var(--header-height) !important;
    z-index: 110;
  }

  /* Every meaningful in-page target clears the exact rendered header + river
     height (including the decorative river tail) plus a small breathing gap. */
  #idee,
  #erlebnisse,
  #gestalterinnen,
  #kajaks,
  #impressionen,
  #kontakt,
  #gruendungspreis,
  .experience-card {
    scroll-margin-top: var(--mobile-anchor-offset) !important;
  }
}

@media (max-width: 720px) {
  /* More editorial and less pill-like: balanced width, calm type and real
     inner margins on narrow phones. */
  .experience-question {
    box-sizing: border-box;
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    margin: 1.2rem 0 1.15rem !important;
    padding: .95rem 1.2rem 1rem !important;
    border-radius: 18px !important;
    font-size: clamp(1.28rem, 6.1vw, 1.52rem) !important;
    line-height: 1.12 !important;
    text-align: left;
    text-wrap: balance;
  }

  /* Give the sticky river enough stacking priority to sit cleanly under the
     white header without the bubbles being clipped. */
  .mobile-river-nav {
    overflow: visible;
  }
  .mobile-river-track {
    position: relative;
    z-index: 2;
    padding-top: .48rem;
  }

  #gruendungspreis .founding-price-line {
    gap: .55rem;
  }
}


/* --------------------------------------------------------------------------
   V142 — tighter dynamic mobile anchors and visible experience-card surfaces
   -------------------------------------------------------------------------- */

/* Put the colour treatment on the actual text surface beneath each photo so
   it cannot be hidden by older card backgrounds. It echoes the founding box,
   but fades cleanly into white instead of sand/ochre. */
.experience-card {
  position: relative;
  background: #fff !important;
}
.experience-card .card-content {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    rgba(143,196,215,.31) 0%,
    rgba(207,232,241,.30) 34%,
    rgba(244,250,252,.72) 63%,
    rgba(255,255,255,.98) 84%,
    #ffffff 100%
  ) !important;
  padding-bottom: calc(clamp(1.5rem, 4vw, 3rem) + .8rem);
}

/* Same calm waterline used at the foot of the founding box. */
.experience-card .card-content::after {
  content: "";
  position: absolute;
  z-index: 5;
  left: -2%;
  right: -2%;
  bottom: 0;
  height: 18px;
  opacity: .52;
  background: no-repeat center bottom / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 34' preserveAspectRatio='none'%3E%3Cpath d='M0 19 C90 7 165 7 255 18 C345 29 425 27 510 14 C595 1 690 1 780 14 C870 28 950 29 1035 18 C1110 8 1160 8 1200 13' fill='none' stroke='%238FC4D7' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  pointer-events: none;
}

@media (max-width: 1279px) {
  /* Header + sticky river remain measured dynamically. V142 only trims the
     extra breathing room, which was visibly too generous across menu jumps. */
  #idee,
  #erlebnisse,
  #gestalterinnen,
  #kajaks,
  #impressionen,
  #kontakt,
  #gruendungspreis,
  .experience-card {
    scroll-margin-top: var(--mobile-anchor-offset) !important;
  }
}


/* --------------------------------------------------------------------------
   V143 — white experience surfaces + heading-aware mobile anchor jumps
   -------------------------------------------------------------------------- */

/* Return the experience text surfaces to clean white while retaining the
   subtle waterline at the foot of every card. */
.experience-card,
.experience-card .card-content {
  background: #ffffff !important;
}

/* The wave itself stays exactly as the visual closing element. */
.experience-card .card-content::after {
  display: block !important;
}


/* --------------------------------------------------------------------------
   V144 — content refinements, single-format Sterne tour and kayak partner
   -------------------------------------------------------------------------- */
#sterne-card .tour-facts.sterne-halfday-only {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.kayak-partner-note {
  width: 100%;
  margin: 1.35rem 0 0;
  color: rgba(35,67,74,.82);
  font-size: .96rem;
  line-height: 1.6;
}
.kayak-partner-note a {
  color: var(--deep-water);
  font-weight: 800;
  text-underline-offset: 4px;
}
@media (max-width: 640px) {
  #sterne-card .tour-facts.sterne-halfday-only {
    grid-template-columns: 1fr;
  }
}


/* --------------------------------------------------------------------------
   V146 — Mathias profile and Sterne collaborator
   -------------------------------------------------------------------------- */
.profile-person-photo,
.mathias-photo {
  display: block;
  width: 100%;
  height: var(--community-photo-height);
  margin: 0 0 1.25rem;
  border-radius: 16px;
  object-fit: cover;
  object-position: center 44%;
}
#sterne-card h3 {
  margin-bottom: .08rem;
}
#sterne-card .experience-companion {
  margin: 0 0 1.02rem;
  color: rgba(35,67,74,.78);
  font-size: .9rem;
  line-height: 1.25;
}
#sterne-card .experience-companion a,
#sterne-card .experience-companion a:hover,
#sterne-card .experience-companion a:focus {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}

/* V147 — open tour places and partner details */
.open-tours { margin: 0 0 2.8rem; scroll-margin-top: calc(var(--mobile-anchor-offset, 100px) + 24px); }
.open-tours-intro { margin: 0 0 1.3rem; max-width: 65ch; }
.open-tours-intro .eyebrow { margin-bottom: .45rem; }
.open-tours-intro h3 { margin: 0 0 .6rem; font-size: clamp(1.6rem, 2.2vw, 2rem); }
.open-tours-intro > p:last-child { margin: 0; }
.open-tour-card { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.65fr); overflow: hidden; border-radius: 20px; background: #edf5f7; border: 1px solid rgba(35,67,74,.09); }
.open-tour-photo { display: block; width: 100%; height: 100%; min-height: 300px; object-fit: cover; object-position: center 72%; }
.open-tour-content { position: relative; padding: clamp(1.4rem, 3vw, 2.3rem); }
.open-tour-content::after { content: ""; position: absolute; bottom: 15px; right: 20px; width: 78px; height: 15px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 16'%3E%3Cpath d='M2 8Q12 0 22 8T42 8T62 8T78 8' fill='none' stroke='%238FC4D7' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.open-tour-topline { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: .85rem; }
.open-tour-topline .eyebrow { margin: 0; }
.availability-pill { padding: .3rem .7rem; border-radius: 999px; background: #dcecef; color: var(--deep-water); font-size: .78rem; font-weight: 700; }
.open-tour-content h3 { margin: 0 0 .65rem; font-size: clamp(1.6rem, 2.3vw, 2.15rem); }
.open-tour-content p { margin: 0 0 1rem; }
.open-tour-content .open-tour-facts { font-weight: 800; line-height: 1.6; }
.open-tour-content .open-tour-equipment { font-size: .88rem; color: rgba(35,67,74,.75); }
.open-tour-booking { margin-top: .3rem; }
.next-tour-note { margin: .1rem 0 1rem; font-size: .85rem; line-height: 1.5; }
.next-tour-note a { color: var(--deep-water); text-decoration: none; border-bottom: 0; }
.next-tour-note a:hover { text-decoration: underline; }
.kayak-partner-note a, .kayak-partner-note a:hover, .kayak-partner-note a:focus { text-decoration: none; border-bottom: 0; background-image: none; }
footer > .footer-partner-logo { display: block; width: fit-content; margin: 1.8rem 0 0; text-decoration: none; border: 0; }
.footer-partner-logo img { display: block; width: 142px; max-width: 100%; height: auto; }
.footer-partner-logo:focus-visible, .open-tour-booking:focus-visible { outline: 2px solid var(--sky); outline-offset: 5px; }
@media (max-width: 760px) {
 .open-tour-card { grid-template-columns: 1fr; }
 .open-tour-photo { min-height: 0; height: 190px; }
 .open-tour-content { padding: 1.4rem 1.25rem 1.9rem; }
 .open-tour-content .open-tour-facts { font-size: .93rem; }
}

@media (min-width: 1280px) { footer > .footer-partner-logo { margin-left: 56px; } }

/* V148 — open places follow the experience cards and founding prices. */
.open-tours { margin: 2.8rem 0 0; }
.open-tours-intro { width: 100%; max-width: none; }
.open-tours-intro > p:last-child { width: 100%; max-width: none; }
.experience-card .next-tour-note { margin: .9rem 0 0; font-size: .85rem; line-height: 1.5; }

/* V149 — tour waters, regional scope and left-aligned footer badges. */
.experience-card .tour-facts,
#sterne-card .tour-facts.sterne-halfday-only { grid-template-columns: 1fr; }
.tour-facts .tour-routes { font-size: .92rem; line-height: 1.5; margin-top: .3rem; }
.regions-format-note { margin: 1.2rem 0 0; max-width: 55ch; line-height: 1.6; }
footer > .footer-meta-row { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.footer-badge-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; }
footer > .footer-meta-row .footer-badge-stack .hosting-badge { width: 132px; height: auto; align-self: flex-start; }
footer > .footer-meta-row .footer-badge-stack .hosting-badge img { position: static; width: 132px; max-width: 100%; height: auto; }
.footer-badge-stack .footer-partner-logo { display: block; margin: 0; border: 0; text-decoration: none; }

/* V150 — tour formats side by side and footer layout from the supplied sketch. */
.experience-card .tour-facts,
#sterne-card .tour-facts.sterne-halfday-only {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.experience-card .tour-facts > p:nth-child(3),
#sterne-card .tour-facts.sterne-halfday-only > p:nth-child(2) {
  grid-column: 1 / -1;
}
footer > .footer-meta-row {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
}
.footer-badge-stack {
  flex: 0 0 142px;
  align-items: flex-start;
  gap: 1.15rem;
}
.footer-badge-stack .footer-partner-logo img {
  width: 142px;
}
@media (max-width: 720px) {
  .experience-card .tour-facts,
  #sterne-card .tour-facts.sterne-halfday-only {
    grid-template-columns: 1fr;
  }
  .experience-card .tour-facts > p:nth-child(3),
  #sterne-card .tour-facts.sterne-halfday-only > p:nth-child(2) {
    grid-column: auto;
  }
  footer > .footer-meta-row {
    flex-direction: column;
  }
}

/* --------------------------------------------------------------------------
   V152 — new collaborators, October dates and compact open-tour overview
   -------------------------------------------------------------------------- */
.open-tours-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}
.open-tours-grid .open-tour-card {
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.65fr);
  min-width: 0;
}
.open-tours-grid .open-tour-photo {
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-position: center 58%;
}
.open-tours-grid .open-tour-content {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.open-tours-grid .open-tour-booking {
  align-self: flex-start;
  margin-top: .3rem;
}
.open-tours-grid .open-tour-equipment {
  margin-top: auto;
}
.profile-card {
  scroll-margin-top: calc(var(--mobile-anchor-offset, 100px) + 24px);
}
/* V154 — non-destructive portrait crop: focus on Brigitte and her paddle. */
.brigitte-photo-frame {
  position: relative;
  width: 100%;
  height: var(--community-photo-height);
  margin: 0 0 1.25rem;
  overflow: hidden;
  border-radius: 16px;
}
.brigitte-photo-frame .brigitte-photo {
  position: absolute;
  inset: 0;
  height: 100%;
  margin: 0;
  border-radius: 0;
  object-position: 66% 28%;
  transform: scale(1.15);
  transform-origin: 66% 28%;
}
.cedric-photo {
  object-position: 58% 48%;
}
/* V153 — preserve Viktor's face in landscape and narrow profile crops. */
.viktor-photo {
  object-position: 48% 50%;
}
.open-tours-grid .cedric-tour-photo {
  object-position: 58% 48%;
}

@media (max-width: 760px) {
  .open-tours-grid .open-tour-card {
    grid-template-columns: 1fr;
  }
  .open-tours-grid .open-tour-photo {
    height: 220px;
    min-height: 0;
  }
}

@media (max-width: 520px) {
  .open-tours-grid .open-tour-photo {
    height: 190px;
  }
}

/* V156 — shared flex layout prevents collapsed heading/subtitle margins. */
:is(#wildnis-card, #geschichten-card, #atem-card, #sterne-card) .experience-title-zone {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: .28rem;
  height: auto;
  min-height: 5.75rem;
  padding-bottom: 1rem;
}
:is(#wildnis-card, #geschichten-card, #atem-card, #sterne-card) .experience-title-zone h3 {
  margin: 0;
}
:is(#wildnis-card, #geschichten-card, #atem-card, #sterne-card) .experience-title-zone .experience-companion {
  display: block;
  margin: 0;
  padding: 0;
  color: rgba(35,67,74,.78);
  font-size: .9rem;
  line-height: 1.25;
}
.experience-title-zone .experience-companion span { margin-right: .35rem; }
:is(#wildnis-card, #geschichten-card, #atem-card, #sterne-card) .experience-companion :is(a, a:hover, a:focus) {
  font-weight: 800;
}
.open-tours-grid .atem-tour-photo { object-position: center 54%; }
.viktor-photo-frame {
  position: relative;
  width: 100%;
  height: var(--community-photo-height);
  overflow: hidden;
  border-radius: 16px;
  margin: 0 0 1.25rem;
}
.viktor-photo-frame .viktor-photo {
  position: absolute;
  inset: 0;
  height: 100%;
  margin: 0;
  border-radius: 0;
  object-position: 48% 42%;
  transform: scale(1.85);
  transform-origin: 48% 42%;
}
.guest-quotes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}
.guest-quote {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border-radius: 24px;
  background: #edf5f7;
  color: var(--deep-water);
}
.guest-quote blockquote { margin: 0 0 1.5rem; }
.guest-quote blockquote p { margin: 0; line-height: 1.8; }
.guest-quote figcaption { margin-top: auto; }
.guest-quote figcaption strong { display: block; font-weight: 800; }
.guest-quote figcaption span { font-size: .88rem; }
footer > .footer-meta-row { align-items: center; }
.footer-partners { flex: 0 0 auto; }
.footer-partners .footer-partner-logo {
  display: block;
  width: 142px;
  margin: 0;
  border: 0;
  line-height: 0;
}
.footer-partners .footer-partner-logo img { display: block; width: 100%; height: auto; }
@media (max-width: 720px) {
  :is(#wildnis-card, #geschichten-card, #atem-card, #sterne-card) .experience-title-zone {
    min-height: 5.2rem;
  }
  .guest-quotes { grid-template-columns: 1fr; }
  footer > .footer-meta-row { align-items: flex-start; }
}