/* Grundgestaltung der Website von Tanja Gruber.
   Wird von der Startseite und allen Themenseiten geteilt. */

:root{
  --bg:#EDE4D3;
  --bg-dark:#3B4420;
  --moss:#6C763A;
  --moss-deep:#525C2B;
  --ink:#2E2A24;
  --paper:#FAF7F0;
  --clay:#B5651D;
  --clay-deep:#8C4E16;
  --clay-text:#9A4E0D;
  --line: rgba(46,42,36,0.16);
  --line-dark: rgba(250,247,240,0.18);

  --font-display: "Fraunces", serif;
  --font-body: "Karla", sans-serif;

  --max: 1120px;
  --narrow: 640px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ font-size:112.5%; scroll-behavior:smooth; scroll-padding-top:104px; }
@media (min-width:1180px){
  html{ scroll-padding-top:64px; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img,svg{ max-width:100%; display:block; }
a{ color:inherit; }

.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--ink); color:var(--paper); padding:0.75em 1.2em;
  z-index:100; border-radius:2px;
}
.skip-link:focus{ left:1rem; top:1rem; }
:focus-visible{ outline:2px solid var(--moss); outline-offset:3px; }

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:500;
  line-height:1.15;
  margin:0 0 0.5em;
  color:var(--moss);
}
.section-dark{ background:var(--bg-dark); color:var(--paper); }
.section-dark h1, .section-dark h2, .section-dark h3{ color:var(--paper); }

p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

.container{ max-width:var(--max); margin-inline:auto; padding-inline:1.5rem; }
.container.narrow{ max-width:var(--narrow); }

.section{ padding:3.25rem 0; }
@media (min-width:768px){ .section{ padding:4.5rem 0; } }
.section.compact{ padding:2.25rem 0; }
@media (min-width:768px){ .section.compact{ padding:3rem 0; } }

.bg-sand{ background:var(--bg); }

h2.section-title{ font-size:clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem); max-width:20ch; }

.lede{ font-size:1.05rem; max-width:60ch; color:var(--ink); opacity:0.85; }
.section-dark .lede{ color:var(--paper); opacity:0.9; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.4em;
  background:var(--clay); color:var(--paper);
  font-family:var(--font-body); font-weight:700; font-size:0.95rem;
  padding:0.85em 1.6em; border-radius:3px; text-decoration:none;
  border:1px solid var(--clay);
  transition:background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  white-space:nowrap;
}
.btn:hover{ background:var(--clay-deep); border-color:var(--clay-deep); transform:translateY(-2px); }
.btn-small{ padding:0.55em 1em; font-size:0.82rem; }
.btn-outline{ background:transparent; color:var(--ink); border:1px solid var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--paper); }
.btn-ghost{
  background:transparent; color:var(--clay-text); border:none; padding:0;
  font-weight:700; text-decoration:underline; text-underline-offset:3px;
}
.btn-ghost:hover{ color:var(--clay-deep); transform:none; }
.section-dark .btn-ghost{ color:var(--paper); }

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:30;
  background:rgba(250,247,240,0.92);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  /* bewusst breiter als --max: sonst passt das Menue nicht in eine Zeile */
  max-width:1240px; margin-inline:auto; padding:0.7rem 1.5rem;
  display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem 1rem;
}
.header-top-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; width:100%;
}
.wordmark{ font-family:var(--font-display); font-size:1.05rem; letter-spacing:0.02em; flex-shrink:0; }
.wordmark a{ text-decoration:none; }

nav.main-nav{
  order:3; flex-basis:100%; width:100%;
  overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none; min-width:0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 24px), transparent);
  mask-image:linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 24px), transparent);
}
nav.main-nav::-webkit-scrollbar{ display:none; }
nav.main-nav ul{
  list-style:none; display:flex; gap:1.3rem; margin:0; padding:0.3rem 0.1rem;
  white-space:nowrap;
}
nav.main-nav a{
  text-decoration:none; font-size:0.86rem; font-weight:600; color:var(--ink);
  opacity:0.7; padding-bottom:3px; border-bottom:2px solid transparent;
  transition:opacity 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
nav.main-nav a:hover{ opacity:1; }
nav.main-nav a.active{ opacity:1; color:var(--clay-text); border-color:var(--clay-text); }
.header-cta{ flex-shrink:0; }

@media (min-width:1180px){
  .header-inner{ flex-wrap:nowrap; }
  .header-top-row{ width:auto; flex-shrink:0; }
  nav.main-nav{ order:2; flex-basis:auto; flex:1; -webkit-mask-image:none; mask-image:none; }
  .header-cta{ order:3; }
}

/* ---------- Hero ---------- */
.hero{ padding:2.75rem 0 3.5rem; }
@media (min-width:768px){ .hero{ padding:4rem 0 5rem; } }
.hero-inner{
  max-width:var(--max); margin-inline:auto; padding-inline:1.5rem;
  display:grid; gap:2.25rem;
}
@media (min-width:900px){
  .hero-inner{ grid-template-columns:1.1fr 0.9fr; align-items:center; gap:3.5rem; }
  .hero-media{ order:2; }
  .hero-text{ order:1; }
}
.hero-role{
  font-size:0.85rem; font-weight:700; letter-spacing:0.04em; color:var(--clay-text);
  margin-bottom:1rem; text-transform:uppercase;
  padding-bottom:0.9rem; border-bottom:1px solid var(--line);
  display:inline-block;
}
.hero-text h1{
  font-size:clamp(1.9rem, 1.4rem + 2.2vw, 2.85rem);
  max-width:16ch;
}
.hero-sub{ font-size:1.08rem; max-width:52ch; opacity:0.88; margin-block:1.1em 1.7em; }

.hero-text > *{ animation:rise 0.7s ease both; }
.hero-text .hero-role{ animation-delay:0.02s; }
.hero-text h1{ animation-delay:0.1s; }
.hero-text .hero-sub{ animation-delay:0.2s; }
.hero-text .hero-ctas{ animation-delay:0.3s; }
.hero-media{ animation:rise 0.8s ease 0.2s both; }
@keyframes rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }

.hero-ctas{ display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; }

/* ---------- Hero image slider ---------- */
.hero-slider{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  border:1px solid var(--line); background:var(--ink);
}
.hero-slider .slide{
  position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease;
  text-decoration:none;
}
.hero-slider .slide.active{ opacity:1; z-index:1; }
.hero-slider .slide img{ width:100%; height:100%; object-fit:cover; }
.slide-caption{
  position:absolute; left:0; right:0; bottom:0; padding:1.4rem 1rem 1rem;
  background:linear-gradient(0deg, rgba(46,42,36,0.82), rgba(46,42,36,0));
  color:var(--paper); font-size:0.85rem; font-weight:600;
}
.slider-dots{ display:flex; gap:0.45rem; justify-content:center; margin-top:0.9rem; }
.slider-dots button{
  width:8px; height:8px; border-radius:50%; border:none; background:var(--line);
  padding:0; cursor:pointer; transition:background 0.2s ease, transform 0.2s ease;
}
.slider-dots button.active{ background:var(--clay); transform:scale(1.35); }

.scroll-cue{ display:flex; justify-content:center; margin-top:2.25rem; }
.scroll-cue a{
  display:inline-flex; flex-direction:column; align-items:center; gap:0.3rem;
  text-decoration:none; color:var(--ink); opacity:0.55; font-size:0.78rem;
}
.scroll-cue svg{ width:16px; height:16px; animation:bob 2.2s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(5px); } }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity 0.8s ease, transform 0.8s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ---------- Pillar sections ---------- */
.pillar-grid{ display:grid; gap:2.25rem; align-items:center; }
@media (min-width:900px){
  .pillar-grid{ grid-template-columns:1fr 1fr; gap:3.5rem; }
  .pillar-grid.media-left .pillar-media{ order:1; }
  .pillar-grid.media-left .pillar-text{ order:2; }
}
.pillar-icon{ width:40px; height:40px; color:var(--clay); margin-bottom:1.1rem; }
.section-dark .pillar-icon{ color:var(--paper); }
.pillar-eyebrow{
  display:block; font-size:0.78rem; font-weight:700; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--clay-text); opacity:0.9; margin-bottom:0.6rem;
}
.section-dark .pillar-eyebrow{ color:var(--paper); opacity:0.75; }
.begegnung-tag{
  font-family:var(--font-display); font-style:italic; font-size:1.05rem;
  color:var(--clay-text); margin:0 0 1rem; opacity:0.95;
}
.begegnung-tag::before{ content:"\2726"; font-size:0.75em; margin-right:0.45em; }
.section-dark .begegnung-tag{ color:var(--paper); opacity:0.85; }
.pillar-copy{ font-size:1.02rem; max-width:52ch; }
.pillar-media img{
  width:100%; aspect-ratio:3/2; object-fit:cover; border:1px solid var(--line);
  transition:transform 0.5s ease;
}
.section-dark .pillar-media img{ border-color:var(--line-dark); }
.pillar-media.media-stack{ display:flex; flex-direction:column; gap:0.9rem; }
.pillar-media.media-stack img{ aspect-ratio:4/3; }
.pillar-media:hover img{ transform:scale(1.02); }
.pillar-media.wide img{ aspect-ratio:1200/632; }

.pillar-fineprint{ font-size:0.88rem; opacity:0.65; margin-top:0.6rem; }

/* ---------- Lemniskaten-Schleife (Reise) ---------- */
.travel-loop{
  display:flex; justify-content:center; align-items:center;
  overflow:visible; margin-top:0.5rem;
}

.lemniscate-wrap{ margin-top:3rem; display:flex; justify-content:center; }
.lemniscate-stage{
  position:relative; width:900px; height:480px; flex-shrink:0;
  transform-origin:center center;
}
.lem-guide{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; opacity:0.35;
}
.lem-guide path{
  fill:none; stroke:var(--clay); stroke-width:1.5;
  stroke-dasharray:5 7; opacity:0.5;
}
.lemtile{
  position:absolute; top:0; left:0;
  width:150px; height:84px; margin:-42px 0 0 -75px;
  offset-path:path("M 150 240 C 150 130, 360 130, 450 240 C 540 350, 750 350, 750 240 C 750 130, 540 130, 450 240 C 360 350, 150 350, 150 240 Z");
  offset-rotate:0deg;
  animation:lemloop 36s linear infinite;
  border:1px solid var(--paper); border-radius:3px; overflow:hidden;
  box-shadow:0 6px 18px rgba(46,42,36,0.22);
  background:var(--ink);
  will-change:offset-distance;
}
/* Inner wrapper carries the depth-scale pulse, synced to the loop via same duration+delay */
.lemtile-inner{
  position:absolute; inset:0;
  animation:lemdepth 36s linear infinite;
  animation-delay:inherit;
  transform-origin:center center;
}
.lemtile img{ width:100%; height:100%; object-fit:cover; display:block; }
.lemtile-cap{
  position:absolute; left:0; right:0; bottom:0;
  font-size:0.62rem; font-weight:600; color:var(--paper);
  padding:0.6rem 0.4rem 0.28rem; line-height:1;
  background:linear-gradient(0deg, rgba(46,42,36,0.85), rgba(46,42,36,0));
  z-index:2;
}
.lemniscate-stage:hover .lemtile,
.lemniscate-stage:hover .lemtile-inner{ animation-play-state:paused; }
@keyframes lemloop{
  0%    { offset-distance:0%;   z-index:10; }
  12.5% { z-index:1; }
  37.5% { z-index:30; }
  62.5% { z-index:1; }
  87.5% { z-index:30; }
  100%  { offset-distance:100%; z-index:10; }
}
/* Depth: tiles are "in front" (large, bright) on the lower lobes of the 8,
   "behind" (small, dimmed) on the upper lobes. Phase matched to actual path y-position:
   front (y max) at 37.5% & 87.5%, back (y min) at 12.5% & 62.5%. */
@keyframes lemdepth{
  0%    { transform:scale(1);    filter:brightness(0.9); }
  12.5% { transform:scale(0.72); filter:brightness(0.78); }
  25%   { transform:scale(1);    filter:brightness(0.9); }
  37.5% { transform:scale(1.3);  filter:brightness(1.02); }
  50%   { transform:scale(1);    filter:brightness(0.9); }
  62.5% { transform:scale(0.72); filter:brightness(0.78); }
  75%   { transform:scale(1);    filter:brightness(0.9); }
  87.5% { transform:scale(1.3);  filter:brightness(1.02); }
  100%  { transform:scale(1);    filter:brightness(0.9); }
}
@media (prefers-reduced-motion: reduce){
  .lemtile, .lemtile-inner{ animation:none; }
}
/* Fallback: browsers without offset-path support show a simple centered grid */
@supports not (offset-path: path("M0 0")){
  .lemniscate-stage{ width:auto; height:auto; display:flex; flex-wrap:wrap; gap:0.6rem; justify-content:center; max-width:720px; }
  .lem-guide{ display:none; }
  .lemtile{
    position:relative; margin:0; offset-path:none; animation:none;
    width:132px; height:74px;
  }
  .lemtile-inner{ animation:none; }
}
@media (max-width:960px){
  .lemniscate-stage{ transform:scale(0.82); }
  .travel-loop{ height:394px; overflow:hidden; }
}
@media (max-width:680px){
  .lemniscate-stage{ transform:scale(0.62); }
  .travel-loop{ height:298px; }
}
@media (max-width:480px){
  .lemniscate-stage{ transform:scale(0.46); }
  .travel-loop{ height:221px; }
}

/* ---------- Bridge line ---------- */
.bridge{ text-align:center; }
.bridge-heading{
  font-size:clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); margin-bottom:1rem;
}
.bridge p{
  font-family:var(--font-display); font-style:italic; font-size:1.2rem;
  line-height:1.6; max-width:44ch; margin-inline:auto; color:var(--moss);
}

/* ---------- Podcast equalizer ---------- */
.podcast-sample{
  margin:1.6rem 0 1.8rem; padding:1.1rem 1.3rem 1.3rem;
  background:rgba(250,247,240,0.08); border:1px solid var(--line-dark); border-radius:4px;
}
.podcast-sample-label{
  font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--clay); margin-bottom:0.3rem; opacity:0.95;
}
.podcast-sample-title{ font-size:0.98rem; font-weight:600; margin-bottom:0.8rem; }
.podcast-sample audio{ width:100%; height:38px; }
.podcast-sample audio::-webkit-media-controls-panel{ background-color:transparent; }

.podcast-offer{ margin-top:2.2rem; padding-top:2rem; border-top:1px solid var(--line-dark); }
.podcast-offer .price{ font-family:var(--font-display); font-size:1.3rem; color:var(--paper); margin-bottom:0.5rem; }
.podcast-includes{ display:flex; flex-wrap:wrap; gap:0.5rem 1rem; font-size:0.88rem; opacity:0.85; margin-top:0.8rem; }
.eq{
  display:inline-flex; align-items:flex-end; gap:14px; height:56px; margin-bottom:1.8rem;
  padding:0.6rem 0.9rem; margin-left:-0.9rem;
  border-radius:4px; text-decoration:none;
  transition:background 0.2s ease, transform 0.2s ease;
}
.eq-link:hover{ background:rgba(250,247,240,0.1); transform:translateY(-2px); }
.eq span{ display:block; width:10px; background:var(--clay); border-radius:3px; animation:eqbar 1.1s ease-in-out infinite; }
.eq span:nth-child(1){ animation-delay:0s; }
.eq span:nth-child(2){ animation-delay:0.15s; }
.eq span:nth-child(3){ animation-delay:0.3s; }
.eq span:nth-child(4){ animation-delay:0.1s; }
.eq span:nth-child(5){ animation-delay:0.25s; }
.eq span:nth-child(6){ animation-delay:0.4s; }
@keyframes eqbar{ 0%,100%{ height:12px; } 50%{ height:52px; } }

/* ---------- Über mich ---------- */
.narrative p{ font-size:1.05rem; max-width:62ch; }

.fuer-wen{
  font-family:var(--font-display); font-size:clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  line-height:1.5; max-width:46ch; margin-inline:auto; color:var(--moss);
}

.fuer-wen-wrap{
  text-align:center; padding:2.6rem 0; position:relative;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.fuer-wen-mark{
  display:block; font-size:1.1rem; color:var(--clay); margin-bottom:1.2rem;
}
.fuer-wen-lead{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  line-height:1.25; color:var(--moss); max-width:20ch; margin:0 auto 1rem;
}
.fuer-wen-sub{
  font-size:1.02rem; line-height:1.6; color:var(--ink); opacity:0.78;
  max-width:44ch; margin:0 auto;
}

/* ---------- Kontakt ---------- */
.kontakt-grid{ display:grid; gap:3rem; margin-top:2.5rem; }
@media (min-width:860px){ .kontakt-grid{ grid-template-columns:1fr 1fr; } }
.kontakt-block h3{ font-size:1.05rem; margin-bottom:0.6em; }
.kontakt-divider-label{ font-size:0.85rem; opacity:0.6; margin-bottom:1rem; }
form{ display:grid; gap:1rem; max-width:420px; }
label{ font-size:0.88rem; font-weight:600; display:block; margin-bottom:0.35em; }
input, textarea{
  width:100%; font-family:var(--font-body); font-size:0.98rem; padding:0.7em 0.85em;
  border:1px solid var(--line); background:var(--paper); color:var(--ink); border-radius:2px;
}
input:focus, textarea:focus{ outline:2px solid var(--moss); outline-offset:1px; }
textarea{ min-height:110px; resize:vertical; }

footer{ padding:2.5rem 0; border-top:1px solid var(--line); font-size:0.85rem; opacity:0.75; }
.footer-inner{
  display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between;
  max-width:var(--max); margin-inline:auto; padding-inline:1.5rem;
}
.footer-links{ display:flex; gap:1.5rem; }
.footer-links a{ text-decoration:underline; text-underline-offset:3px; }

/* ---------- Testimonials ---------- */
.testimonials-intro{ text-align:center; max-width:640px; margin:0 auto 3rem; }
.testimonials-intro .section-title{ margin-inline:auto; }
.testimonial-grid{ display:grid; gap:2rem; }
@media (min-width:860px){ .testimonial-grid{ grid-template-columns:repeat(2,1fr); max-width:880px; margin-inline:auto; } }
.testimonial-card{
  border-top:2px solid var(--clay); padding-top:1.5rem;
  display:flex; flex-direction:column; gap:1.1rem;
}
.testimonial-video{
  position:relative; aspect-ratio:16/9; background:var(--bg-dark);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.6rem;
  text-decoration:none; color:var(--paper); border:1px solid var(--line-dark);
  transition:transform 0.3s ease, background 0.3s ease;
}
.testimonial-video:hover{ transform:scale(1.02); background:var(--moss-deep); }
video.testimonial-video{ display:block; width:100%; height:auto; object-fit:cover; }
video.testimonial-video:hover{ transform:none; background:var(--bg-dark); }
.testimonial-name a{ color:var(--clay-text); }
.play-icon{ width:42px; height:42px; opacity:0.9; }
.video-label{ font-size:0.76rem; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; opacity:0.85; }
.testimonial-card blockquote{
  font-family:var(--font-display); font-style:italic; font-size:1.05rem;
  line-height:1.5; color:var(--ink); margin:0;
}
.testimonial-name{ font-size:0.88rem; font-weight:600; opacity:0.75; margin:0; }
.placeholder-tag{ font-weight:400; opacity:0.65; font-style:italic; }
.testimonial-note{ text-align:center; font-size:0.85rem; opacity:0.6; font-style:italic; margin-top:2.5rem; }


/* ═══════════════════════════════════════════════════════════
   NEU: Vier Begegnungen, Bewegung, Themenseiten
   ═══════════════════════════════════════════════════════════ */

/* ---------- Farbschicht, die beim Scrollen wandert ---------- */
.ton-schicht{
  position:fixed; inset:0; z-index:-2;
  background:var(--paper);
  transition:background-color 1.2s cubic-bezier(.4,0,.2,1);
}
body{ background:transparent; }
.section-dark, .bg-sand{ position:relative; }

/* ---------- Lesefortschritt ---------- */
.fortschritt{
  position:fixed; top:0; left:0; height:3px; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--moss), var(--clay));
  z-index:60; pointer-events:none;
}

/* ---------- Schwebende organische Formen ---------- */
.schweber{
  position:absolute; border-radius:50%; pointer-events:none; z-index:0;
  filter:blur(38px); opacity:0.35;
}
.schweber-moos{ background:var(--moss); }
.schweber-ton{ background:var(--clay); }
@keyframes schweben{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  33%    { transform:translate3d(22px,-30px,0) scale(1.08); }
  66%    { transform:translate3d(-18px,18px,0) scale(0.95); }
}
.schweber{ animation:schweben 22s ease-in-out infinite; }

/* ---------- Überschrift, Wort für Wort ---------- */
.wortweise{ display:inline-block; overflow:hidden; vertical-align:bottom; }
.wortweise > span{
  display:inline-block;
  transform:translateY(105%);
  animation:wort-hoch 0.9s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes wort-hoch{ to{ transform:translateY(0); } }

/* ---------- Die vier Begegnungen ---------- */
.begegnungen{ position:relative; overflow:hidden; }
.begegnungen-auftakt{
  font-size:0.78rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--clay-text); margin-bottom:0.7rem;
}
.begegnungen-raster{
  display:grid; gap:1.4rem; margin-top:2.5rem; position:relative; z-index:1;
}
@media (min-width:640px){ .begegnungen-raster{ grid-template-columns:repeat(2,1fr); gap:1.6rem; } }
@media (min-width:1080px){ .begegnungen-raster{ grid-template-columns:repeat(4,1fr); gap:1.2rem; } }

.begegnung-karte{
  position:relative; display:flex; flex-direction:column;
  text-decoration:none; color:inherit;
  background:var(--paper); border:1px solid var(--line);
  border-radius:4px; overflow:hidden; isolation:isolate;
  transition:transform 0.5s cubic-bezier(.2,.7,.2,1), box-shadow 0.5s ease, border-color 0.4s ease;
  will-change:transform;
}
@media (min-width:1080px){
  .begegnung-karte:nth-child(even){ transform:translateY(2.2rem); }
  .begegnung-karte:nth-child(even):hover{ transform:translateY(1.6rem); }
}
.begegnung-karte:hover, .begegnung-karte:focus-visible{
  transform:translateY(-6px);
  box-shadow:0 18px 44px -18px rgba(46,42,36,0.45);
  border-color:var(--clay);
}

.karte-bild{ position:relative; display:block; aspect-ratio:4/3; overflow:hidden; background:var(--ink); }
@media (min-width:1080px){ .karte-bild{ aspect-ratio:3/4; } }
.karte-bild img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 0.9s cubic-bezier(.2,.7,.2,1), filter 0.6s ease;
  filter:saturate(0.82);
}
.begegnung-karte:hover .karte-bild img{ transform:scale(1.07); filter:saturate(1.05); }
.karte-bild::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(59,68,32,0.05) 0%, rgba(59,68,32,0.62) 100%);
  transition:opacity 0.6s ease; opacity:1;
}
.begegnung-karte:hover .karte-bild::after{ opacity:0.72; }

.karte-nummer{
  position:absolute; top:0.85rem; left:0.95rem; z-index:2;
  font-family:var(--font-display); font-size:0.92rem; font-weight:600;
  color:var(--paper); opacity:0.85; letter-spacing:0.06em;
}
.karte-icon{
  position:absolute; right:0.85rem; bottom:0.85rem; z-index:2;
  width:34px; height:34px; color:var(--paper);
  transition:transform 0.7s cubic-bezier(.2,.7,.2,1);
}
.begegnung-karte:hover .karte-icon{ transform:rotate(90deg) scale(1.12); }

.karte-koerper{ display:flex; flex-direction:column; flex:1; padding:1.15rem 1.15rem 1.3rem; }
.karte-titel{
  font-family:var(--font-display); font-size:1.12rem; font-weight:600;
  color:var(--moss); line-height:1.2; margin-bottom:0.3rem;
  transition:color 0.3s ease;
}
.begegnung-karte:hover .karte-titel{ color:var(--clay-deep); }
.karte-begegnung{
  font-size:0.76rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--clay-text); margin-bottom:0.75rem;
}
.karte-text{ font-size:0.9rem; opacity:0.82; flex:1; margin-bottom:1rem; }
.karte-mehr{
  display:inline-flex; align-items:center; gap:0.45em;
  font-size:0.85rem; font-weight:700; color:var(--clay-text);
}
.karte-mehr svg{ width:15px; height:15px; transition:transform 0.4s cubic-bezier(.2,.7,.2,1); }
.begegnung-karte:hover .karte-mehr svg{ transform:translateX(5px); }

/* ---------- Themenseiten ---------- */
.thema-hero{ position:relative; overflow:hidden; padding:3rem 0 2.5rem; }
@media (min-width:768px){ .thema-hero{ padding:4.5rem 0 3.5rem; } }
.thema-hero-inner{ position:relative; z-index:1; }
.thema-nummer{
  font-family:var(--font-display);
  font-size:clamp(4rem, 2rem + 14vw, 11rem); line-height:0.8;
  color:var(--moss); opacity:0.1; margin-bottom:-0.35em;
  pointer-events:none; user-select:none;
}
.thema-hero h1{ font-size:clamp(2rem, 1.4rem + 2.8vw, 3.2rem); max-width:16ch; }
.thema-begegnung{
  display:inline-block; font-size:0.8rem; font-weight:700;
  letter-spacing:0.09em; text-transform:uppercase; color:var(--clay-text);
  padding-bottom:0.7rem; border-bottom:1px solid var(--line); margin-bottom:1.2rem;
}
.thema-bild{ position:relative; overflow:hidden; border:1px solid var(--line); margin-top:2.25rem; }
.thema-bild img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
@media (min-width:768px){ .thema-bild img{ aspect-ratio:21/9; } }

.zurueck{
  display:inline-flex; align-items:center; gap:0.45em;
  font-size:0.85rem; font-weight:700; color:var(--clay-text);
  text-decoration:none; margin-bottom:1.6rem;
}
.zurueck svg{ width:15px; height:15px; transition:transform 0.3s ease; }
.zurueck:hover svg{ transform:translateX(-4px); }

.faden{ display:grid; gap:1.5rem; margin-top:1rem; }
@media (min-width:768px){ .faden{ grid-template-columns:repeat(3,1fr); gap:1.75rem; } }
.faden-punkt{ border-top:2px solid var(--clay); padding-top:1rem; }
.faden-punkt h3{ font-size:1.05rem; margin-bottom:0.4rem; }
.faden-punkt p{ font-size:0.92rem; opacity:0.85; }

.weiter-raster{ display:grid; gap:1rem; margin-top:1.5rem; }
@media (min-width:640px){ .weiter-raster{ grid-template-columns:repeat(3,1fr); } }
.weiter-karte{
  display:block; text-decoration:none; padding:1.1rem 1.15rem;
  border:1px solid var(--line); border-radius:3px; background:var(--paper);
  transition:border-color 0.3s ease, transform 0.3s ease;
}
.weiter-karte:hover{ border-color:var(--clay); transform:translateY(-3px); }
.weiter-karte .kt{ display:block; font-family:var(--font-display); font-size:1rem; color:var(--moss); margin-bottom:0.2rem; }
.weiter-karte .kb{ display:block; font-size:0.76rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--clay-text); }

/* ---------- Bewegung abschaltbar ---------- */
@media (prefers-reduced-motion: reduce){
  .schweber{ animation:none; }
  .wortweise > span{ transform:none; animation:none; }
  .ton-schicht{ transition:none; }
  .begegnung-karte,
  .begegnung-karte:nth-child(even){ transform:none !important; }
}

/* ---------- Langsam kreisender Zierring ---------- */
.zierring{
  position:absolute; pointer-events:none; z-index:0;
  border:1px dashed var(--line); border-radius:50%;
  animation:kreisen 46s linear infinite;
}
@keyframes kreisen{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .zierring{ animation:none; } }

/* ---------- Parallax der Motivbilder ---------- */
.pillar-media{ overflow:hidden; }
.pm-inner{ display:block; will-change:transform; }
.pm-inner img{ transform:scale(1.12); transform-origin:center; }
@media (prefers-reduced-motion: reduce){
  .pm-inner{ transform:none !important; }
  .pm-inner img{ transform:none; }
}

/* ---------- Reisebilder ---------- */
.impressionen{
  display:grid; gap:0.7rem; margin-top:1.75rem;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
}
.impressionen figure{ margin:0; position:relative; overflow:hidden; border:1px solid var(--line); }
.impressionen img{ width:100%; aspect-ratio:1/1; object-fit:cover; transition:transform 0.8s cubic-bezier(.2,.7,.2,1); }
.impressionen figure:hover img{ transform:scale(1.08); }
.impressionen figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:1.1rem 0.6rem 0.5rem;
  background:linear-gradient(0deg, rgba(46,42,36,0.8), transparent);
  color:var(--paper); font-size:0.74rem; font-weight:600;
}
/* Faden verträgt drei oder vier Punkte */
@media (min-width:768px){
  .faden{ grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); }
}

/* ---------- Zielliste mit Haken ---------- */
.ziele{ list-style:none; padding:0; margin:1.2rem 0 0; display:grid; gap:0.7rem; }
.ziele li{
  position:relative; padding-left:1.9rem; font-size:0.97rem;
}
.ziele li::before{
  content:""; position:absolute; left:0; top:0.42em;
  width:11px; height:6px; border-left:2px solid var(--clay);
  border-bottom:2px solid var(--clay); transform:rotate(-45deg);
}
.section-dark .ziele li::before{ border-color:var(--paper); }

/* ---------- Angebotskarten ---------- */
.angebote{ display:grid; gap:1.1rem; margin-top:1.6rem; }
@media (min-width:760px){ .angebote{ grid-template-columns:1fr 1fr; } }
.angebot{
  border:1px solid var(--line); border-top:3px solid var(--clay);
  background:var(--paper); padding:1.4rem 1.4rem 1.5rem; border-radius:3px;
  transition:transform 0.4s cubic-bezier(.2,.7,.2,1), box-shadow 0.4s ease;
}
.angebot:hover{ transform:translateY(-4px); box-shadow:0 14px 34px -16px rgba(46,42,36,0.4); }
.angebot h3{ font-size:1.12rem; margin-bottom:0.15rem; }
.angebot .umfang{
  display:block; font-size:0.76rem; font-weight:700; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--clay-text); margin-bottom:0.9rem;
}
.angebot ul{ list-style:none; padding:0; margin:0 0 1.1rem; }
.angebot li{ font-size:0.9rem; padding:0.3rem 0; border-bottom:1px solid var(--line); }
.angebot li:last-child{ border-bottom:none; }

/* ---------- Ortsangaben ---------- */
.orte{ display:grid; gap:1rem; margin-top:1.3rem; }
@media (min-width:640px){ .orte{ grid-template-columns:repeat(3,1fr); } }
.ort{ border-left:2px solid var(--moss); padding-left:0.9rem; }
.ort .plz{ display:block; font-family:var(--font-display); font-size:1.05rem; color:var(--moss); }
.ort .was{ display:block; font-size:0.86rem; opacity:0.8; margin-top:0.15rem; }

/* ---------- Rechtstexte ---------- */
.rechtstext{ max-width:70ch; }
.rechtstext h2{ font-size:1.35rem; margin-top:2.4rem; }
.rechtstext h2:first-of-type{ margin-top:1.2rem; }
.rechtstext h3{ font-size:1.02rem; margin-top:1.6rem; color:var(--ink); }
.rechtstext p, .rechtstext li{ font-size:0.95rem; }
.rechtstext ul{ padding-left:1.1rem; margin:0 0 1.1em; }
.rechtstext li{ margin-bottom:0.4rem; }
.rechtstext .anschrift{
  border-left:3px solid var(--clay); padding:0.2rem 0 0.2rem 1rem;
  margin:1rem 0 1.4rem; font-size:0.95rem; line-height:1.7;
}
.rechtstext .hinweis{
  background:var(--bg); border:1px solid var(--line); border-radius:3px;
  padding:1rem 1.1rem; font-size:0.9rem; margin:1.4rem 0;
}
.rechtstext .hinweis strong{ color:var(--clay-text); }
.stand{ font-size:0.85rem; opacity:0.7; margin-top:2.5rem; }

/* ---------- Auszeichnungsband ---------- */
.auszeichnung{ padding:1.6rem 0; border-block:1px solid var(--line); position:relative; overflow:hidden; }
.auszeichnung-inner{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.1rem 2.2rem;
  max-width:var(--max); margin-inline:auto; padding-inline:1.5rem;
}
.auszeichnung-icon{ width:38px; height:38px; color:var(--clay); flex-shrink:0; }
.auszeichnung-punkt{ flex:1 1 240px; }
.auszeichnung-punkt strong{
  display:block; font-family:var(--font-display); font-size:1.02rem;
  color:var(--moss); font-weight:600; line-height:1.25;
}
.auszeichnung-punkt span{ display:block; font-size:0.85rem; opacity:0.78; margin-top:0.15rem; }

/* ═══════════════════════════════════════════════════════════
   Kontaktbereich: Formular und Geschenk
   ═══════════════════════════════════════════════════════════ */
.kontakt-neu{ display:grid; gap:2rem; margin-top:2.5rem; align-items:start; }
@media (min-width:920px){ .kontakt-neu{ grid-template-columns:1.15fr 0.85fr; gap:2.75rem; } }

/* ---------- Formularfelder ---------- */
.feld{ margin-bottom:1.15rem; }
.feld > label{
  display:block; font-size:0.76rem; font-weight:700; letter-spacing:0.07em;
  text-transform:uppercase; color:var(--clay-text); margin-bottom:0.4rem;
}
.feld input[type="text"],
.feld input[type="email"],
.feld textarea{
  width:100%; display:block; box-sizing:border-box;
  font-family:var(--font-body); font-size:1rem; line-height:1.5; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:3px;
  padding:0.8em 0.9em;
  transition:border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.feld textarea{ min-height:8.5em; resize:vertical; }
.feld input::placeholder, .feld textarea::placeholder{ color:var(--ink); opacity:0.38; }
.feld input:hover, .feld textarea:hover{ border-color:rgba(46,42,36,0.32); }
.feld input:focus, .feld textarea:focus{
  outline:none; border-color:var(--clay);
  box-shadow:0 0 0 3px rgba(181,101,29,0.16);
  background:#fff;
}
.feld .hilfe{ font-size:0.8rem; opacity:0.65; margin:0.35rem 0 0; }

/* ---------- Anliegen als Auswahlchips ---------- */
.anliegen{ display:flex; flex-wrap:wrap; gap:0.5rem; }
.anliegen input{ position:absolute; width:1px; height:1px; opacity:0; }
.anliegen label{
  display:inline-block; cursor:pointer; user-select:none;
  border:1px solid var(--line); border-radius:100px;
  padding:0.55em 1.05em; font-size:0.88rem; font-weight:600;
  background:var(--paper);
  transition:background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.anliegen label:hover{ border-color:var(--moss); transform:translateY(-1px); }
.anliegen input:checked + label{
  background:var(--moss); border-color:var(--moss); color:var(--paper);
}
.anliegen input:focus-visible + label{ outline:2px solid var(--moss); outline-offset:3px; }

/* ---------- Einwilligung ---------- */
.einwilligung{
  display:flex; gap:0.7rem; align-items:flex-start;
  font-size:0.86rem; line-height:1.5; margin:1.3rem 0 1.5rem;
}
.einwilligung input{
  appearance:none; -webkit-appearance:none; flex-shrink:0;
  width:19px; height:19px; margin:0.12rem 0 0;
  border:1px solid var(--line); border-radius:3px; background:var(--paper);
  cursor:pointer; position:relative;
  transition:background-color 0.2s ease, border-color 0.2s ease;
}
.einwilligung input:checked{ background:var(--moss); border-color:var(--moss); }
.einwilligung input:checked::after{
  content:""; position:absolute; left:5.5px; top:2px;
  width:5px; height:10px; border:solid var(--paper);
  border-width:0 2px 2px 0; transform:rotate(45deg);
}
.einwilligung input:focus-visible{ outline:2px solid var(--moss); outline-offset:2px; }
.einwilligung a{ color:var(--clay-text); font-weight:600; }

/* Honigtopf gegen Spam-Roboter */
.honigtopf{ position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; }

/* ---------- Geschenkkarte ---------- */
.geschenk{
  background:var(--bg-dark); color:var(--paper);
  border-radius:4px; padding:1.75rem 1.6rem 1.8rem;
  position:relative; overflow:hidden;
}
.geschenk .zierring{ width:280px; height:280px; top:-120px; right:-110px; border-color:var(--line-dark); }
.geschenk-inhalt{ position:relative; z-index:1; }
.geschenk-marke{
  display:inline-block; font-size:0.72rem; font-weight:700; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--clay); background:rgba(181,101,29,0.16);
  padding:0.35em 0.8em; border-radius:100px; margin-bottom:1rem;
}
.geschenk-icon{ width:42px; height:42px; color:var(--clay); margin-bottom:0.9rem; }
.geschenk h3{ color:var(--paper); font-size:1.28rem; line-height:1.2; margin-bottom:0.5rem; }
.geschenk .untertitel{ font-size:0.9rem; opacity:0.82; margin-bottom:1.1rem; }
.geschenk ul{ list-style:none; padding:0; margin:0 0 1.3rem; }
.geschenk li{
  position:relative; padding-left:1.5rem; font-size:0.88rem;
  opacity:0.9; margin-bottom:0.5rem;
}
.geschenk li::before{
  content:""; position:absolute; left:0; top:0.42em;
  width:9px; height:5px; border-left:2px solid var(--clay);
  border-bottom:2px solid var(--clay); transform:rotate(-45deg);
}
.geschenk .kostenlos{
  display:block; font-family:var(--font-display); font-size:0.95rem;
  padding-top:1rem; border-top:1px solid var(--line-dark); opacity:0.85;
}

/* ---------- Download-Karte auf der Dankeseite ---------- */
.download-karte{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem;
  background:var(--bg-dark); color:var(--paper);
  border-radius:4px; padding:1.5rem 1.6rem; margin:2rem 0 0;
  text-decoration:none; position:relative; overflow:hidden;
  transition:transform 0.4s cubic-bezier(.2,.7,.2,1), box-shadow 0.4s ease;
}
.download-karte:hover{ transform:translateY(-3px); box-shadow:0 16px 38px -18px rgba(46,42,36,0.55); }
.download-karte svg{ width:40px; height:40px; color:var(--clay); flex-shrink:0; }
.download-karte .dk-text{ flex:1 1 220px; }
.download-karte strong{ display:block; font-family:var(--font-display); font-size:1.15rem; margin-bottom:0.2rem; }
.download-karte span{ display:block; font-size:0.86rem; opacity:0.82; }
.download-karte .dk-pfeil{ width:22px; height:22px; color:var(--paper); transition:transform 0.35s ease; }
.download-karte:hover .dk-pfeil{ transform:translateY(3px); }

/* ---------- Direkt-Buchung ---------- */
.buchung{
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.4rem;
  background:var(--bg); border:1px solid var(--line);
  border-left:3px solid var(--clay); border-radius:3px;
  padding:1.15rem 1.35rem; margin-top:2.25rem;
}
.buchung svg.kalender{ width:34px; height:34px; color:var(--clay); flex-shrink:0; }
.buchung .bu-text{ flex:1 1 260px; }
.buchung strong{ display:block; font-family:var(--font-display); font-size:1.08rem; color:var(--moss); margin-bottom:0.15rem; }
.buchung span{ display:block; font-size:0.88rem; opacity:0.8; }

/* ═══════════════════════════════════════════════════════════
   Dunkle Abschnitte: lebendig statt flächig
   Bleibt in der Palette — Moos, Ton, dunkle Basis.
   ═══════════════════════════════════════════════════════════ */
.section-dark{
  position:relative;
  isolation:isolate;
  overflow:hidden;      /* beschneidet die ueberstehenden Lichtfelder */
  background:
    linear-gradient(168deg, #444E23 0%, #3B4420 46%, #333A1B 100%);
}

/* Wandernde Lichtfelder */
.section-dark::before{
  content:"";
  position:absolute; inset:-25% -12%;
  z-index:-2; pointer-events:none;
  background:
    radial-gradient(46% 52% at 14% 12%,  rgba(108,118,58,0.55) 0%, rgba(108,118,58,0) 66%),
    radial-gradient(40% 46% at 88% 84%,  rgba(181,101,29,0.42) 0%, rgba(181,101,29,0) 64%),
    radial-gradient(34% 40% at 72% 10%,  rgba(237,228,211,0.14) 0%, rgba(237,228,211,0) 62%),
    radial-gradient(44% 50% at 32% 96%,  rgba(82,92,43,0.55) 0%,   rgba(82,92,43,0) 66%);
  animation:lichtwandern 34s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes lichtwandern{
  0%   { transform:translate3d(0,0,0) scale(1); }
  50%  { transform:translate3d(3.5%, -2.5%, 0) scale(1.09); }
  100% { transform:translate3d(-3%, 2%, 0) scale(1.04); }
}

/* Feine Körnung — nimmt der Fläche das Digitale */
.section-dark::after{
  content:"";
  position:absolute; inset:0;
  z-index:-1; pointer-events:none; opacity:0.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23k)'/%3E%3C/svg%3E");
}

/* Weiche Kanten statt harter Schnitte */
.section-dark > .container{ position:relative; z-index:1; }
.kante-oben{
  position:absolute; top:0; left:0; right:0; height:1px; z-index:2;
  background:linear-gradient(90deg, transparent, rgba(237,228,211,0.34) 22%, rgba(181,101,29,0.55) 55%, rgba(237,228,211,0.22) 80%, transparent);
}

/* Karten im dunklen Bereich bekommen Tiefe */
.section-dark .podcast-sample{
  background:rgba(250,247,240,0.07);
  border:1px solid rgba(250,247,240,0.16);
  backdrop-filter:blur(3px);
  transition:background-color 0.4s ease, border-color 0.4s ease;
}
.section-dark .podcast-sample:hover{
  background:rgba(250,247,240,0.10);
  border-color:rgba(181,101,29,0.45);
}

@media (prefers-reduced-motion: reduce){
  .section-dark::before{ animation:none; }
}

/* Kontrast im aufgehellten dunklen Bereich sichern */
.section-dark .pillar-eyebrow{ opacity:0.92; }
.section-dark .lede{ opacity:0.95; }
.section-dark .podcast-sample-label{ opacity:0.95; }

/* ═══════════════════════════════════════════════════════════
   Einwilligung (Cookie-Banner und Einstellungen)
   ═══════════════════════════════════════════════════════════ */
.ew-schleier{
  position:fixed; inset:0; z-index:90;
  background:rgba(46,42,36,0.55); backdrop-filter:blur(2px);
  opacity:0; transition:opacity 0.3s ease;
}
.ew-schleier.sichtbar{ opacity:1; }

.ew-banner{
  position:fixed; z-index:95; left:1rem; right:1rem; bottom:1rem;
  max-width:640px; margin-inline:auto;
  background:var(--paper); color:var(--ink);
  border:1px solid var(--line); border-top:3px solid var(--clay);
  border-radius:4px; box-shadow:0 22px 55px -22px rgba(46,42,36,0.6);
  padding:1.4rem 1.4rem 1.5rem;
  transform:translateY(130%); transition:transform 0.45s cubic-bezier(.2,.7,.2,1);
}
.ew-banner.sichtbar{ transform:translateY(0); }
.ew-banner h2{ font-size:1.15rem; margin-bottom:0.45rem; }
.ew-banner p{ font-size:0.9rem; margin-bottom:1.1rem; }
.ew-banner a{ color:var(--clay-text); font-weight:600; }

.ew-knoepfe{ display:flex; flex-wrap:wrap; gap:0.6rem; align-items:center; }
.ew-knoepfe .btn{ flex:1 1 auto; }
@media (min-width:520px){ .ew-knoepfe .btn{ flex:0 0 auto; } }

/* Einstellungsdialog */
.ew-dialog{
  position:fixed; z-index:96; left:1rem; right:1rem; top:50%;
  transform:translateY(-50%) scale(0.97);
  max-width:600px; max-height:86vh; overflow-y:auto; margin-inline:auto;
  background:var(--paper); border:1px solid var(--line); border-radius:4px;
  box-shadow:0 28px 70px -24px rgba(46,42,36,0.65);
  padding:1.6rem 1.5rem 1.7rem;
  opacity:0; transition:opacity 0.3s ease, transform 0.3s cubic-bezier(.2,.7,.2,1);
}
.ew-dialog.sichtbar{ opacity:1; transform:translateY(-50%) scale(1); }
.ew-dialog h2{ font-size:1.3rem; margin-bottom:0.4rem; }
.ew-dialog > p{ font-size:0.9rem; margin-bottom:1.4rem; }

.ew-gruppe{
  border:1px solid var(--line); border-radius:3px;
  padding:1rem 1.1rem; margin-bottom:0.9rem;
  transition:border-color 0.25s ease, background-color 0.25s ease;
}
.ew-gruppe.aktiv{ border-color:var(--moss); background:rgba(108,118,58,0.05); }
.ew-kopf{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.ew-kopf h3{ font-size:1rem; margin:0 0 0.2rem; }
.ew-gruppe p{ font-size:0.85rem; margin:0.35rem 0 0; opacity:0.82; }
.ew-dienste{
  font-size:0.78rem; opacity:0.7; margin-top:0.55rem;
  padding-top:0.55rem; border-top:1px solid var(--line);
}

/* Schalter */
.ew-schalter{ position:relative; flex-shrink:0; width:46px; height:26px; }
.ew-schalter input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.ew-schalter .bahn{
  position:absolute; inset:0; border-radius:100px;
  background:rgba(46,42,36,0.2); transition:background-color 0.25s ease;
  pointer-events:none;
}
.ew-schalter .knopf{
  position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:var(--paper); box-shadow:0 1px 3px rgba(0,0,0,0.3);
  transition:transform 0.25s cubic-bezier(.2,.7,.2,1); pointer-events:none;
}
.ew-schalter input:checked ~ .bahn{ background:var(--moss); }
.ew-schalter input:checked ~ .knopf{ transform:translateX(20px); }
.ew-schalter input:disabled ~ .bahn{ background:var(--moss); opacity:0.45; }
.ew-schalter input:disabled{ cursor:not-allowed; }
.ew-schalter input:focus-visible ~ .bahn{ outline:2px solid var(--moss); outline-offset:3px; }

/* Platzhalter fuer gesperrte Fremdinhalte */
.ew-platzhalter{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:0.8rem; text-align:center;
  background:var(--bg); border:1px dashed var(--line); border-radius:3px;
  padding:2rem 1.4rem; min-height:200px;
}
.ew-platzhalter svg{ width:34px; height:34px; color:var(--moss); opacity:0.7; }
.ew-platzhalter p{ font-size:0.9rem; margin:0; max-width:44ch; }

@media (prefers-reduced-motion: reduce){
  .ew-banner, .ew-dialog, .ew-schleier, .ew-schalter .knopf{ transition:none; }
  .ew-banner{ transform:none; }
  .ew-dialog{ transform:translateY(-50%); }
}

/* Abschnitte mit Schwebeelementen muessen beschneiden,
   sonst ragen die Formen ueber den Seitenrand hinaus. */
.mit-schweber{ position:relative; overflow:hidden; }

/* ---------- Themenseiten: Bild neben der Ueberschrift ---------- */
.thema-hero-raster{ display:grid; gap:2rem; }
@media (min-width:900px){
  .thema-hero-raster{
    grid-template-columns:1.02fr 0.98fr;
    gap:3.25rem; align-items:center;
  }
  .thema-text{ min-width:0; }
  .thema-bild img{ aspect-ratio:4/5; }
  /* Die Geisterziffer darf in der schmaleren Spalte nicht dominieren */
  .thema-nummer{ font-size:clamp(4rem, 1rem + 8vw, 8.5rem); }
  .thema-hero h1{ max-width:14ch; }
}
.thema-bild{ margin-top:0; }

/* Heldenbild der Themenseiten: vollstaendig zeigen, nicht beschneiden.
   Die vier Motive reichen von 1:1 bis 1,9:1 — ein festes Seitenverhaeltnis
   wuerde beim Buchcover den Titel abschneiden. Deshalb auch keine
   Parallax-Vergroesserung an dieser Stelle. */
.thema-bild{ margin:0; }
.thema-bild img{ aspect-ratio:auto; height:auto; }
.thema-bild .pm-inner{ transform:none; }
.thema-bild .pm-inner img{ transform:none; }

/* ═══════════════════════════════════════════════════════════
   Themenmotive: grosse, sehr blasse Zeichnungen, die langsam
   durch den Kopfbereich gleiten. Aussen liegt die Scrollbewegung,
   innen die Eigenbewegung — sonst wuerden sich beide ueberschreiben.
   ═══════════════════════════════════════════════════════════ */
.motiv{
  position:absolute; pointer-events:none; z-index:0;
  will-change:transform;
}
.motiv-inner{ display:block; }
.motiv svg{
  width:100%; height:auto; display:block;
  color:var(--moss); opacity:0.085;
  stroke-linecap:round; stroke-linejoin:round;
}
.motiv.ton svg{ color:var(--clay); opacity:0.16; }

/* Sanftes Schweben mit leichter Drehung */
@keyframes gleiten{
  0%   { transform:translate3d(0,0,0) rotate(0deg); }
  50%  { transform:translate3d(-46px,-32px,0) rotate(-4deg); }
  100% { transform:translate3d(26px,18px,0) rotate(2.5deg); }
}
/* Die Feder faellt eher, als dass sie schwebt */
@keyframes federn{
  0%   { transform:translate3d(0,0,0) rotate(-4deg); }
  50%  { transform:translate3d(-30px,44px,0) rotate(6deg); }
  100% { transform:translate3d(18px,-14px,0) rotate(-2deg); }
}
/* Der Flieger zieht eine laengere Bahn */
@keyframes fliegen{
  0%   { transform:translate3d(-80px,26px,0) rotate(-2deg); }
  100% { transform:translate3d(90px,-30px,0) rotate(3deg); }
}

.motiv-inner{ animation:gleiten 34s ease-in-out infinite alternate; }
.motiv.feder .motiv-inner{ animation:federn 42s ease-in-out infinite alternate; }
.motiv.flug  .motiv-inner{ animation:fliegen 50s ease-in-out infinite alternate; }

@media (prefers-reduced-motion: reduce){
  .motiv-inner{ animation:none !important; }
}
/* Auf kleinen Schirmen zurueckhaltender */
@media (max-width:720px){
  .motiv svg{ opacity:0.06; }
}

/* Motive brauchen einen beschneidenden Abschnitt und erscheinen erst,
   wenn neben der schmalen Textspalte wirklich Rand frei ist. */
.mit-motiv{ position:relative; overflow:hidden; }
.motiv{ display:none; }
@media (min-width:1100px){ .motiv{ display:block; } }

/* Auf dunklem Grund traegt Moosgruen nicht — dort hell zeichnen. */
.section-dark .motiv svg{ color:var(--paper); opacity:0.17; }

/* ═══════════════════════════════════════════════════════════
   Ringwellen: mehrere gestrichelte Kreise laufen versetzt nach
   aussen und verblassen dabei. Durch die negativen Verzoegerungen
   ist die Schleife von der ersten Sekunde an gefuellt.
   ═══════════════════════════════════════════════════════════ */
.ringe{
  position:absolute; aspect-ratio:1;
  pointer-events:none; z-index:0;
  top:-180px; left:-300px; width:820px;
}
.ringe .ring{
  position:absolute; inset:0; border-radius:50%;
  border:1px dashed rgba(46,42,36,0.55);
  opacity:0;
  animation:ringwelle 18s linear infinite;
  will-change:transform, opacity;
}
.ringe .ring:nth-child(2){ animation-delay:-4.5s; }
.ringe .ring:nth-child(3){ animation-delay:-9s; }
.ringe .ring:nth-child(4){ animation-delay:-13.5s; }

@keyframes ringwelle{
  0%   { transform:scale(0.22) rotate(0deg);   opacity:0; }
  14%  { opacity:0.95; }
  65%  { opacity:0.5; }
  100% { transform:scale(1.18) rotate(140deg); opacity:0; }
}

/* Auf dunklem Grund hell zeichnen */
.section-dark .ringe .ring{ border-color:rgba(250,247,240,0.5); }

@media (prefers-reduced-motion: reduce){
  .ringe .ring{ animation:none; opacity:0.5; }
  .ringe .ring:nth-child(1){ transform:scale(0.4); }
  .ringe .ring:nth-child(2){ transform:scale(0.65); }
  .ringe .ring:nth-child(3){ transform:scale(0.9); }
  .ringe .ring:nth-child(4){ transform:scale(1.12); }
}

/* Auf schmalen Schirmen kleiner und blasser, sonst laufen die Ringe
   quer durch die Ueberschrift. */
@media (max-width:900px){
  .ringe{ top:-140px; left:-240px; width:560px; }
  .ringe .ring{ border-color:rgba(46,42,36,0.28); }
  .section-dark .ringe .ring{ border-color:rgba(250,247,240,0.26); }
}

/* ---------- Vorschau des Ratgebers unter der Geschenkkarte ---------- */
.geschenk-spalte{ display:grid; gap:1.5rem; align-content:start; }
.geschenk-vorschau{ margin:0; text-align:center; }
.geschenk-vorschau img{
  display:block; width:100%; max-width:250px; height:auto;
  margin-inline:auto; border-radius:3px;
  border:1px solid var(--line);
  box-shadow:0 14px 32px -14px rgba(46,42,36,0.45);
  transition:transform 0.5s cubic-bezier(.2,.7,.2,1), box-shadow 0.5s ease;
}
.geschenk-vorschau:hover img{
  transform:translateY(-5px) rotate(-1.2deg);
  box-shadow:0 22px 44px -16px rgba(46,42,36,0.55);
}
.geschenk-vorschau figcaption{
  font-size:0.8rem; opacity:0.7; margin-top:0.7rem;
}
@media (prefers-reduced-motion: reduce){
  .geschenk-vorschau:hover img{ transform:none; }
}

/* ---------- Hinweis, wenn der Formularversand scheitert ---------- */
.sende-fehler{
  margin-top:1.4rem; padding:1.1rem 1.2rem;
  border:1px solid var(--clay); border-left:3px solid var(--clay);
  border-radius:3px; background:rgba(181,101,29,0.07);
  font-size:0.92rem;
}
.sende-fehler strong{ display:block; color:var(--clay-deep); margin-bottom:0.4rem; }
.sende-fehler p{ margin:0 0 0.8rem; }
.sende-fehler p:last-child{ margin-bottom:0; }
.sende-fehler .grund{ font-size:0.78rem; opacity:0.6; }

/* ---------- Formular in der Geschenkkarte (heller Text auf dunklem Grund) ---------- */
.geschenk-formular{ margin-top:1.3rem; padding-top:1.3rem; border-top:1px solid var(--line-dark); }
.geschenk-formular .feld{ margin-bottom:0.9rem; }
.geschenk-formular .feld > label{ color:var(--clay); }
.geschenk-formular .freiwillig{
  text-transform:none; letter-spacing:0; font-weight:400;
  color:var(--paper); opacity:0.55;
}
.geschenk-formular input[type="text"],
.geschenk-formular input[type="email"]{
  background:rgba(250,247,240,0.08);
  border-color:rgba(250,247,240,0.22);
  color:var(--paper);
}
.geschenk-formular input::placeholder{ color:var(--paper); opacity:0.42; }
.geschenk-formular input[type="text"]:hover,
.geschenk-formular input[type="email"]:hover{ border-color:rgba(250,247,240,0.4); }
.geschenk-formular input[type="text"]:focus,
.geschenk-formular input[type="email"]:focus{
  background:rgba(250,247,240,0.14);
  border-color:var(--clay);
  box-shadow:0 0 0 3px rgba(181,101,29,0.28);
}
.geschenk-formular .einwilligung{ color:var(--paper); margin:1rem 0 1.2rem; font-size:0.82rem; }
.geschenk-formular .einwilligung input{
  background:rgba(250,247,240,0.1); border-color:rgba(250,247,240,0.3);
}
.geschenk-formular .einwilligung input:checked{ background:var(--clay); border-color:var(--clay); }
.geschenk-formular .btn{ width:100%; }
.geschenk-hinweis{
  font-size:0.78rem; opacity:0.7; margin:0.9rem 0 0; line-height:1.5;
}
.geschenk-hinweis a{ color:var(--clay); font-weight:600; }

/* ---------- Themenwahl auf der Kontaktseite ---------- */
.themenwahl{ border:0; padding:0; margin:0 0 1.7rem; }
.themenwahl legend{
  font-size:0.76rem; font-weight:700; letter-spacing:0.07em;
  text-transform:uppercase; color:var(--clay-text);
  margin-bottom:0.6rem; padding:0;
}
.themenwahl input{ position:absolute; width:1px; height:1px; opacity:0; }
.themenwahl label{
  display:block; cursor:pointer; position:relative;
  background:var(--paper); border:1px solid var(--line); border-radius:3px;
  padding:0.85em 1.1em; margin-bottom:0.55rem;
  transition:border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.themenwahl label:hover{ border-color:var(--moss); transform:translateX(2px); }
.themenwahl input:checked + label{
  border-color:var(--moss);
  background:rgba(108,118,58,0.09);
  box-shadow:inset 3px 0 0 var(--moss);
}
.themenwahl input:focus-visible + label{ outline:2px solid var(--moss); outline-offset:3px; }
.tk-titel{
  display:block; font-family:var(--font-display); font-size:1.02rem;
  color:var(--moss); line-height:1.25;
}
.themenwahl input:checked + label .tk-titel{ color:var(--moss-deep); }
.tk-text{ display:block; font-size:0.84rem; opacity:0.75; margin-top:0.2rem; }

/* ---------- Einstieg zum Kontaktformular auf der Startseite ---------- */
.kontakt-einstieg h3{ font-size:1.15rem; margin-bottom:0.5rem; }
.kontakt-einstieg p{ font-size:0.97rem; }
.kontakt-einstieg .btn{ margin-top:0.4rem; }
.kontakt-direkt{ font-size:0.88rem; opacity:0.78; margin-top:1.2rem; }
.kontakt-direkt a{ color:var(--clay-text); font-weight:600; }

/* ═══════════════════════════════════════════════════════════
   Newsletter-Band über der Fußzeile
   ═══════════════════════════════════════════════════════════ */
.newsletter-band{
  background:var(--bg);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:2rem 0;
  position:relative; overflow:hidden;
}
.newsletter-inner{
  max-width:var(--max); margin-inline:auto; padding-inline:1.5rem;
  display:grid; gap:1.4rem; align-items:center;
}
@media (min-width:860px){
  .newsletter-inner{ grid-template-columns:1fr 1.05fr; gap:2.5rem; }
}
.newsletter-text h2{ font-size:1.35rem; margin-bottom:0.35rem; }
.newsletter-text p{ font-size:0.92rem; opacity:0.82; margin:0; max-width:44ch; }

.newsletter-formular{ display:grid; gap:0.7rem; }
@media (min-width:560px){
  .newsletter-formular{ grid-template-columns:1fr 1.3fr auto; align-items:end; }
  .newsletter-formular .nl-hinweis{ grid-column:1 / -1; }
}
.newsletter-formular .feld{ margin:0; }
.newsletter-formular input[type="text"],
.newsletter-formular input[type="email"]{ background:var(--paper); }
.newsletter-formular .btn{ white-space:nowrap; }
.nl-hinweis{ font-size:0.76rem; opacity:0.7; margin:0; line-height:1.5; }
.nl-hinweis a{ color:var(--clay-text); font-weight:600; }

/* „(freiwillig)" auch außerhalb der dunklen Geschenkkarte */
.feld > label .freiwillig{
  text-transform:none; letter-spacing:0; font-weight:400;
  color:var(--ink); opacity:0.55;
}

/* ---------- Cover neben der Geschenkkarte statt darunter ---------- */
.kontakt-einstieg{ max-width:var(--narrow); margin-bottom:2.25rem; }
@media (min-width:920px){
  .kontakt-neu{ grid-template-columns:0.82fr 1.18fr; align-items:center; }
}
.geschenk-vorschau img{ max-width:340px; }
@media (min-width:920px){
  .geschenk-vorschau img{ max-width:100%; }
}

/* ---------- Soziale Netzwerke in der Fußzeile ---------- */
.sozial{
  display:flex; gap:0.35rem; list-style:none; margin:0; padding:0;
  align-items:center; flex-wrap:wrap;
}
.sozial a{
  display:grid; place-items:center;
  width:36px; height:36px; border-radius:50%;
  color:var(--ink); opacity:0.62;
  transition:opacity 0.25s ease, color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
}
.sozial svg{ width:20px; height:20px; }
.sozial a:hover, .sozial a:focus-visible{
  opacity:1; color:var(--clay-deep);
  background:rgba(181,101,29,0.11);
  transform:translateY(-2px);
}
@media (prefers-reduced-motion: reduce){ .sozial a:hover{ transform:none; } }

/* ---------- Zurück nach oben ---------- */
.nach-oben-zeile{
  max-width:var(--max); margin-inline:auto; padding-inline:1.5rem;
  display:flex; justify-content:flex-end; margin-bottom:1.2rem;
}
.nach-oben{
  display:inline-flex; align-items:center; gap:0.5em;
  font-size:0.84rem; font-weight:600; color:var(--ink);
  text-decoration:none; opacity:0.68;
  padding:0.45em 0.9em 0.45em 0.7em; border-radius:100px;
  border:1px solid transparent;
  transition:opacity 0.25s ease, color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}
.nach-oben:hover, .nach-oben:focus-visible{
  opacity:1; color:var(--clay-deep);
  background:rgba(181,101,29,0.09);
  border-color:rgba(181,101,29,0.28);
}
.nach-oben svg{ width:17px; height:17px; transition:transform 0.3s cubic-bezier(.2,.7,.2,1); }
.nach-oben:hover svg{ transform:translateY(-3px); }
@media (prefers-reduced-motion: reduce){ .nach-oben:hover svg{ transform:none; } }


/* ═══════════════════════════════════════════════════════════
   Buchseite "Was bleibt – Altwerden in Deutschland"
   ═══════════════════════════════════════════════════════════ */
.buch-hero h1{ max-width:18ch; }
.buch-marken{ list-style:none; padding:0; margin:1rem 0 1.25rem; display:flex; flex-wrap:wrap; gap:0.5rem; }
.buch-marken li{
  font-size:0.78rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase;
  padding:0.35rem 0.75rem; border:1px solid var(--clay); color:var(--clay-text); border-radius:999px;
}
.buch-marken li:first-child{ background:var(--clay); border-color:var(--clay); color:var(--paper); }
.buch-knoepfe{ display:flex; flex-wrap:wrap; gap:0.75rem; margin-top:1.6rem; }
.buch-cover{ margin:0; justify-self:center; max-width:420px; width:78%; }
@media (min-width:900px){ .buch-cover{ width:100%; } }
.buch-cover img{
  width:100%; height:auto; display:block;
  box-shadow:0 24px 50px -18px rgba(46,42,36,0.45), 0 6px 14px -6px rgba(46,42,36,0.25);
  transform:rotate(-1.5deg);
}
.buch-intro{ text-align:center; max-width:640px; margin:0 auto 2.5rem; }
.buch-intro .section-title{ margin-inline:auto; }
.buch-intro .lede{ margin-inline:auto; }
.buch-stimmen{ display:grid; gap:2rem; align-items:start; }
@media (min-width:760px){ .buch-stimmen{ grid-template-columns:0.62fr 1fr; max-width:880px; margin-inline:auto; } }
.buch-stimme{ margin:0; border-top:2px solid var(--clay); padding-top:1.25rem; }
.buch-stimme video, .buch-stimme img{ display:block; width:100%; height:auto; background:var(--bg-dark); }
.buch-stimme video{ aspect-ratio:478/850; max-height:620px; object-fit:contain; }
.buch-stimme figcaption{ font-size:0.88rem; margin-top:0.8rem; opacity:0.75; }
.buch-daten{ margin:1.25rem 0 0; border-top:1px solid var(--line); }
.buch-daten > div{ display:grid; grid-template-columns:9.5rem 1fr; gap:1rem; padding:0.8rem 0; border-bottom:1px solid var(--line); }
.buch-daten dt{ font-weight:600; font-size:0.9rem; opacity:0.75; }
.buch-daten dd{ margin:0; }
.buch-daten a{ color:var(--clay-text); }
@media (max-width:480px){ .buch-daten > div{ grid-template-columns:1fr; gap:0.15rem; } }
.buch-band2{ background:var(--bg-dark); color:var(--paper); }
.buch-band2 .section-title{ color:var(--paper); }
.buch-band2 .pillar-eyebrow{ color:#E3A86B; }
.buch-band2 p{ color:var(--paper); opacity:0.9; }
.btn-hell{ background:transparent; color:var(--paper); border:1px solid var(--paper); }
.btn-hell:hover{ background:var(--paper); color:var(--ink); }
.buch-weitere{ display:grid; gap:2rem; align-items:center; }
@media (min-width:860px){ .buch-weitere{ grid-template-columns:0.85fr 1fr; gap:3.5rem; } }
.buch-weitere figure{ margin:0; }
.buch-weitere img{ display:block; width:100%; height:auto; border:1px solid var(--line); }
.buch-cover-mockup{ max-width:560px; }
.buch-cover-mockup img{ transform:none; box-shadow:none; }
.buch-frage{
  font-family:var(--font-display); font-style:italic; font-size:clamp(1.2rem,1rem + 0.8vw,1.5rem);
  line-height:1.4; color:var(--moss-deep); margin:0.5rem 0 1.5rem; padding-left:1.1rem; border-left:3px solid var(--clay);
}
.buch-blick{ display:grid; gap:2rem; align-items:center; }
@media (min-width:860px){ .buch-blick{ grid-template-columns:0.7fr 1fr; gap:3.5rem; max-width:980px; margin-inline:auto; } }
.buch-blick-bild{ margin:0; max-width:340px; justify-self:center; width:80%; }
@media (min-width:860px){ .buch-blick-bild{ width:100%; } }
.buch-blick-bild img{ display:block; width:100%; height:auto; box-shadow:0 18px 40px -16px rgba(46,42,36,0.4); }


/* YouTube-Video auf der Startseite: eigenes Vorschaubild, Video erst nach Zustimmung */
.yt-video{ position:relative; aspect-ratio:16/9; background:var(--bg-dark) center/cover no-repeat; border:1px solid var(--line); }
.yt-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.yt-video .ew-platzhalter{
  position:absolute; inset:0; min-height:0; border:0; border-radius:0; padding:1rem;
  background:rgba(37,43,20,0.62); color:var(--paper); gap:0.6rem;
}
.yt-video .ew-platzhalter svg{ flex:none; width:30px; height:30px; color:var(--paper); }
.yt-video .ew-platzhalter p{ font-size:0.85rem; line-height:1.45; color:var(--paper); }
@media (max-width:520px){
  .yt-video .ew-platzhalter{ gap:0.4rem; padding:0.6rem 0.9rem; }
  .yt-video .ew-platzhalter svg{ display:none; }
  .yt-video .ew-platzhalter p{ font-size:0.74rem; line-height:1.35; }
}
.testimonial-video.yt-video{ display:block; background-size:cover; background-position:center; }
.testimonial-video.yt-video:hover{ transform:none; }
.thema-bild-hoch{ max-width:440px; justify-self:center; }