/* Breathwork Nordsee — Ueber-uns Erzaehlseite (2026-11-07) */
:root{ --story-maxw: 72rem; }

.story-wrap{ max-width: var(--story-maxw); margin-inline:auto; padding-inline: var(--margin); }

/* --- Hero --- */
.story-hero{ background: var(--surface); padding: clamp(3.5rem,8vw,7rem) 0 0; text-align:center; }
.story-hero .eyebrow{ font-family: var(--font-display); font-size:.82rem; letter-spacing:.2em; text-transform:uppercase; color: var(--sea); margin:0 0 1rem; }
.story-hero h1{ font-family:"Literata",Georgia,serif; font-weight:600; font-size: clamp(2.3rem,1.4rem+4.2vw,4.4rem); line-height:1.04; letter-spacing:-.01em; color: var(--ink); margin:0 auto; max-width:16ch; }
.story-hero .lead{ font-size: clamp(1.15rem,1rem+.6vw,1.45rem); color: var(--muted); max-width:46ch; margin:1.4rem auto 0; line-height:1.55; }
.story-hero-img{ margin-top: clamp(2.5rem,6vw,4.5rem); aspect-ratio:21/9; overflow:hidden; }
.story-hero-img img{ width:100%; height:100%; object-fit:cover; display:block; }
@media(max-width:52em){ .story-hero-img{ aspect-ratio:4/3; } }

/* --- Story sections --- */
.story{ padding-block: clamp(3rem,7vw,6rem); }
.story:nth-of-type(even){ background: var(--bg); }
.story-inner{ display:grid; grid-template-columns:1fr 1fr; gap: clamp(2rem,5vw,4.5rem); align-items:center; }
.story.rev .story-media{ order:2; }
.story.rev .story-text{ order:1; }
.story-text .eyebrow{ font-family:var(--font-display); font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color: var(--sea); margin:0 0 .6rem; }
.story-text h2{ font-family:"Literata",Georgia,serif; font-weight:600; font-size: clamp(1.7rem,1.2rem+1.8vw,2.6rem); line-height:1.12; color:var(--ink); margin:0 0 1.1rem; }
.story-text p{ color: color-mix(in srgb, var(--ink) 86%, var(--muted)); line-height:1.72; margin:0 0 1rem; max-width:40ch; }
.story-media{ position:relative; }
.story-media img{ width:100%; height:100%; max-height:34rem; object-fit:cover; display:block; border-radius: 2px; box-shadow: 0 24px 60px -30px rgba(10,43,39,.6); }
@media(max-width:52em){
  .story-inner{ grid-template-columns:1fr; gap:1.6rem; }
  .story.rev .story-media{ order:0; }
  .story.rev .story-text{ order:1; }
  .story-text p{ max-width:none; }
}

/* --- Pull quotes --- */
.pullquote{ background: var(--ink); color: var(--bg); padding: clamp(3.5rem,8vw,6.5rem) 0; text-align:center; }
.pullquote .pq-inner{ max-width:50rem; margin-inline:auto; padding-inline:var(--margin); }
.pq-text{ font-family:"Literata",Georgia,serif; font-style:italic; font-weight:500; font-size: clamp(1.5rem,1.1rem+2vw,2.5rem); line-height:1.3; margin:0; letter-spacing:-.005em; }
.pullquote .bfly{ width: clamp(56px,8vw,88px); height:auto; margin:0 auto 1.6rem; display:block; color: var(--gold, #c9a45a); }

/* --- Butterfly motif --- */
.bfly{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; color:#c9a45a; }
.story-bfly{ width:64px; height:auto; margin:0 0 1.2rem; display:block; }

/* --- Values --- */
.values{ background: var(--surface); padding-block: clamp(3rem,7vw,5.5rem); }
.values .story-wrap{ text-align:center; }
.values h2{ font-family:"Literata",Georgia,serif; font-weight:600; font-size:clamp(1.7rem,1.2rem+1.8vw,2.6rem); color:var(--ink); margin:0 0 .6rem; }
.values .vlead{ color:var(--muted); max-width:42ch; margin:0 auto clamp(2rem,4vw,3rem); line-height:1.6; }
.values-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:1.2rem; text-align:left; }
.value-card{ background: var(--bg); padding:1.6rem 1.5rem; border-radius:2px; border-top:3px solid var(--accent); }
.value-card h3{ font-family:var(--font-display); font-size:1.12rem; font-weight:700; color:var(--ink); margin:0 0 .5rem; }
.value-card p{ color:var(--muted); line-height:1.6; margin:0; font-size:.98rem; }

/* --- Journey (Chris + Vanessa) --- */
.journey{ padding-block: clamp(3rem,7vw,6rem); }
.journey .story-wrap > .jhead{ text-align:center; max-width:44rem; margin:0 auto clamp(2rem,4vw,3.2rem); }
.journey .jhead h2{ font-family:"Literata",Georgia,serif; font-weight:600; font-size:clamp(1.7rem,1.2rem+1.8vw,2.6rem); color:var(--ink); margin:0 0 .6rem; }
.journey .jhead p{ color:var(--muted); line-height:1.6; margin:0; }
.journey-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,4vw,3rem); }
.jcard{ background:var(--surface); border-radius:2px; overflow:hidden; display:flex; flex-direction:column; }
.jcard-img{ aspect-ratio:3/2; overflow:hidden; }
.jcard-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.jcard-body{ padding:1.7rem 1.6rem; }
.jcard-body h3{ font-family:var(--font-display); font-weight:700; font-size:1.25rem; color:var(--ink); margin:0 0 .3rem; }
.jcard-body .jrole{ font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--sea); margin:0 0 .9rem; }
.jcard-body p{ color:color-mix(in srgb, var(--ink) 84%, var(--muted)); line-height:1.68; margin:0 0 .8rem; font-size:.98rem; }
@media(max-width:52em){ .journey-grid{ grid-template-columns:1fr; } }

/* --- Nordsee close + CTA --- */
.about-nordsee{ position:relative; padding: clamp(4rem,10vw,8rem) 0; background: var(--ink); color:var(--bg); text-align:center; overflow:hidden; }
.about-nordsee img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.32; }
.about-nordsee .an-inner{ position:relative; z-index:2; max-width:46rem; margin-inline:auto; padding-inline:var(--margin); }
.about-nordsee h2{ font-family:"Literata",Georgia,serif; font-weight:600; font-size:clamp(1.8rem,1.2rem+2vw,2.8rem); margin:0 0 1.1rem; }
.about-nordsee p{ font-size:clamp(1.05rem,1rem+.4vw,1.3rem); line-height:1.6; opacity:.94; margin:0 auto; }
.about-cta{ background: var(--surface); text-align:center; padding: clamp(3rem,7vw,5rem) 0; }
.about-cta h2{ font-family:"Literata",Georgia,serif; font-weight:600; font-size:clamp(1.6rem,1.2rem+1.6vw,2.4rem); color:var(--ink); margin:0 0 .8rem; }
.about-cta p{ color:var(--muted); max-width:40ch; margin:0 auto 1.6rem; line-height:1.6; }