/* =========================================================
   Zen in Walldorf — Minimal Nature Theme
   01) Tokens
   02) Base + Layout
   03) Navigation
   04) Components
   05) Sections
   06) Animations + Accessibility
   ========================================================= */

/* 01) TOKENS */
:root{
  --bg: #ffffff;
  --paper: #fbfcfb;
  --ink: #141814;
  --muted: #4e5a4e;
  --line: rgba(20, 24, 20, .12);

  --green: #2f6b46;
  --green-2: #4f8a62;
  --green-ghost: rgba(47, 107, 70, .08);

  --radius: 18px;
  --radius-sm: 12px;

  --shadow: 0 12px 30px rgba(20, 24, 20, .06);

  --container: 1100px;

  --s1: 6px;
  --s2: 10px;
  --s3: 16px;
  --s4: 24px;
  --s5: 36px;
  --s6: 54px;
  --s7: 84px;

  --serif: Georgia, "Times New Roman", Times, serif;
  --sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --footer-gap: 55px;
}

/* 02) BASE + LAYOUT */
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
}
a{ color: inherit; text-decoration: none; }
p{ margin: 0; color: var(--muted); }
h1,h2,h3{
  font-family: var(--serif);
  letter-spacing: .2px;
  margin:0;
  color: var(--ink);
  font-weight: 600;
}
h1{ font-size: clamp(34px, 4vw, 54px); line-height: 1.05; }
h2{ font-size: clamp(24px, 2.4vw, 36px); line-height: 1.15; }
h3{ font-size: 18px; line-height: 1.25; font-family: var(--sans); font-weight: 650; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--s4);
}
.section{
  padding: var(--s7) 0;
  position: relative;
}
.section.compact{ padding: var(--s6) 0; }
.section.paper{ background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* Fixed right-side wallpaper (subtle) */
.wallpaper{
  position: fixed;
  top: 0;
  right: 0;
  width: min(38vw, 520px);
  height: 100vh;
  pointer-events: none;
  opacity: .18;
  background:
    linear-gradient(to left, rgba(255,255,255,.92), rgba(255,255,255,.3) 40%, rgba(255,255,255,0)),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='520' height='980' viewBox='0 0 520 980'> <rect width='520' height='980' fill='white'/> <g fill='none' stroke='#2f6b46' stroke-opacity='.35' stroke-width='2'>  <path d='M420 50c-28 60-28 120 0 180'/>  <path d='M455 120c-22 48-22 96 0 144'/>  <path d='M395 210c-30 58-30 116 0 174'/>  <path d='M465 320c-25 55-25 110 0 165'/>  <path d='M410 420c-33 62-33 124 0 186'/>  <path d='M455 540c-22 50-22 100 0 150'/>  <path d='M400 650c-30 58-30 116 0 174'/>  <path d='M460 760c-22 48-22 96 0 144'/> </g> <g fill='#4f8a62' fill-opacity='.18'>  <ellipse cx='448' cy='130' rx='40' ry='18' transform='rotate(-18 448 130)'/>  <ellipse cx='412' cy='260' rx='48' ry='20' transform='rotate(12 412 260)'/>  <ellipse cx='455' cy='430' rx='46' ry='20' transform='rotate(-10 455 430)'/>  <ellipse cx='410' cy='585' rx='52' ry='22' transform='rotate(16 410 585)'/>  <ellipse cx='452' cy='740' rx='44' ry='19' transform='rotate(-12 452 740)'/>  <ellipse cx='415' cy='860' rx='56' ry='24' transform='rotate(10 415 860)'/> </g></svg>");
  background-size: cover;
  background-position: center;
}
@media (max-width: 980px){
  .wallpaper{ display:none; }
}

/* 03) NAVIGATION */
.nav-wrap{
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
}
.navbar{
  display:flex;
  align-items:center;
  justify-content: flex-start;
  gap: var(--s4);
  padding: 22px 0;
}
.brandmark{
  display:flex;
  align-items:center;
  gap: 10px;
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: .2px;
}
.brandmark .mark{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(79,138,98,.22), rgba(47,107,70,.12));
  border: 1px solid rgba(47,107,70,.18);
  position: relative;
}
.brandmark .mark:after{
  content:"";
  position:absolute;
  inset: 9px 11px;
  border-left: 2px solid rgba(47,107,70,.55);
  border-top: 2px solid rgba(47,107,70,.35);
  border-radius: 12px 0 12px 0;
  transform: rotate(-20deg);
}
.nav-links{
  display:flex;
  margin-left: 10px;
  align-items:center;
  gap: 18px;
  font-size: 16px;
}
.nav-links a{
  color: var(--muted);
  padding: 10px 16px;
  border-radius: 999px;
  transition: background .18s ease, color .18s ease;
}
.nav-links a:hover{
  background: var(--green-ghost);
  color: var(--green);
}
.nav-actions{
  margin-left: auto;
  display:flex;
  align-items:center;
  gap: 12px;
}

/* Language dropdown */
.lang{ position: relative; }
.lang-btn{
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--muted);
  border-radius: 999px;
  padding: 10px 18px;
  display:flex;
  align-items:center;
  gap: 10px;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.lang-btn:hover{ border-color: rgba(47,107,70,.30); background: #fff; }
.lang-menu{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 170px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 6px;
  display: none;
}
.lang-menu[aria-hidden="false"]{ display:block; }
.lang-opt{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  background: transparent;
  padding: 10px 10px;
  border-radius: 12px;
  cursor:pointer;
  color: var(--ink);
  font-size: 14px;
}
.lang-opt:hover{ background: var(--green-ghost); }
.flag{
  width: 24px;
  height: 17px;
  border-radius: 3px;
  border: 1px solid rgba(20,24,20,.18);
  overflow:hidden;
  flex: 0 0 auto;
}
.flag.de{ background: linear-gradient(#000 0 33%, #dd0000 33% 66%, #ffce00 66%); }
.flag.en{
  background: repeating-linear-gradient(
    to bottom,
    #b22234 0 7.692%,
    #fff 7.692% 15.384%
  );
  position: relative;
}
.flag.en:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width: 54%;
  height: 53.846%;
  background:#3c3b6e;
}
.flag.en:after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width: 54%;
  height: 53.846%;
  background-image:
    radial-gradient(circle, #fff 0 1px, transparent 1.2px),
    radial-gradient(circle, #fff 0 1px, transparent 1.2px);
  background-size: 4px 4px, 4px 4px;
  background-position: 1px 1px, 3px 3px;
  opacity: .85;
}

/* Mobile */
.burger{
  display:none;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  cursor:pointer;
}
.burger span{
  display:block;
  width: 18px;
  height: 2px;
  margin: 4px auto;
  background: rgba(20,24,20,.55);
  border-radius: 9px;
}
.mobile-menu{
  display:none;
  padding: 10px 0 16px;
}
.mobile-menu a{
  display:block;
  padding: 10px 10px;
  border-radius: 12px;
  color: var(--muted);
}
.mobile-menu a:hover{ background: var(--green-ghost); color: var(--green); }

@media (max-width: 860px){
  .nav-links{ display:none; }
  .burger{ display:block; }
  .mobile-menu[aria-hidden="false"]{ display:block; }
}

/* 04) COMPONENTS */
.eyebrow{
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--green);
}
.dot{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--green);
  opacity: .55;
}
.lead{
  font-size: 16px;
  color: var(--muted);
  max-width: 68ch;
}
.stack{ display:flex; flex-direction: column; }
.stack.tight > * + *{ margin-top: var(--s2); }
.stack > * + *{ margin-top: var(--s3); }
.stack.loose > * + *{ margin-top: var(--s4); }

.grid{ display:grid; gap: var(--s5); }
.grid.two{ grid-template-columns: 1.2fr .8fr; align-items: start; }
.grid.cards-3{ grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.grid.cards-2{ grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
@media (max-width: 960px){ .grid.two{ grid-template-columns: 1fr; } }
@media (max-width: 860px){ .grid.cards-3{ grid-template-columns: 1fr; } .grid.cards-2{ grid-template-columns: 1fr; } }

.card{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 1px 0 rgba(20,24,20,.02);
}
.card.pad{ padding: var(--s4); }
.fine{ font-size: 13px; color: rgba(20,24,20,.62); }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  cursor:pointer;
  transition: transform .12s ease, background .18s ease, border-color .18s ease;
}
.btn:hover{
  background: var(--paper);
  border-color: rgba(47,107,70,.28);
  transform: translateY(-1px);
}
.btn.primary{
  background: rgba(47,107,70,.10);
  border-color: rgba(47,107,70,.28);
}
.btn.primary:hover{ background: rgba(47,107,70,.14); }
.actions{ display:flex; flex-wrap: wrap; gap: 12px; }

.form{ display:grid; gap: 12px; }
.input, .textarea{
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 12px;
  font-family: var(--sans);
  font-size: 14px;
  outline: none;
  background: #fff;
}
.input:focus, .textarea:focus{ border-color: rgba(47,107,70,.35); box-shadow: 0 0 0 4px rgba(47,107,70,.08); }
.textarea{ min-height: 120px; resize: vertical; }

.hr{ height: 1px; background: var(--line); margin: var(--s5) 0; }


/* Über mich (Portrait) */
.portrait .media{
  width: 100%;
  max-width: 360px;
}
.portrait img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  border: none;
  background: #fff;
  box-shadow: 0 14px 40px rgba(10,30,10,.07);
  outline: none;
}
@media (max-width: 860px){
  .portrait .media{ max-width: 420px; }
}


/* GROUP SECTION */
.group-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}

.group-head{
  padding-top: 4px;
}
.group-kicker{
  font-size: clamp(26px, 3.2vw, 36px);
  text-transform: none;
  letter-spacing: .2px;
  color: var(--ink);
  margin-bottom: 6px;
  font-weight: 700;
}
.group-title{
  margin: 0;
  font-size: 16px;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--muted);
  font-family: var(--sans);
  line-height: 1.6;
}

.group-split{
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 80px;
  align-items: center;
}
@media (max-width: 900px){
  .group-split{ grid-template-columns: 1fr; }
}

.group-photo{
  margin: 0;
}
.group-photo img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  box-shadow: var(--shadow);
  max-width: 420px;
}
@media (max-width: 900px){
  .group-photo img{ max-width: 100%; }
}


.group-body{
  margin: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.group-body p{
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}
.group-body p + p{ margin-top: 14px; }

.group-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  align-items: center;
  margin-top: 16px;
  justify-content: center;
}

.group-lead{
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(250, 252, 250, .9);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  margin: 0 auto;
  width: fit-content;
}  text-align: center;  margin: 0 auto;  width: fit-content;

}

/* 05) SECTIONS */
.hero{ padding: var(--s7) 0 var(--s6); }
.hero--spacious{ padding: calc(var(--s7) + var(--s4)) 0 calc(var(--s6) + var(--s4)); }
.quote{
  font-family: var(--serif);
  font-size: clamp(18px, 1.9vw, 22px);
  color: rgba(20,24,20,.78);
  line-height: 1.45;
  border-left: 2px solid rgba(47,107,70,.35);
  padding-left: var(--s4);
}
.quote .author{
  display:block;
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 13px;
  color: rgba(20,24,20,.58);
}
.note{
  background: rgba(47,107,70,.06);
  border: 1px solid rgba(47,107,70,.18);
  border-radius: var(--radius);
  padding: var(--s4);
}
.badge{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(47,107,70,.20);
  background: rgba(47,107,70,.06);
  color: var(--green);
  font-size: 13px;
}

/* Auto-marquee testimonials (JS-driven, slow + hover-to-center) */
.marquee{
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #fff;
}
.track{
  display:flex;
  width: max-content;
  gap: var(--s4);
  padding: var(--s4);
  will-change: transform;
}
.review{
  width: 480px;
  flex: 0 0 auto;
  border: 1px solid rgba(20,24,20,.10);
  border-radius: 18px;
  padding: 20px 20px;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.review:hover{
  transform: scale(1.03);
  background: #fff;
  box-shadow: var(--shadow);
}
.review p{ color: rgba(20,24,20,.68); font-size: 15px; line-height: 1.55; }
.review .who{ margin-top: 12px; color: rgba(20,24,20,.55); font-size: 13px; }

@media (max-width: 860px){
  .review{ width: 84vw; }
}
  to{ transform: translateX(-50%); }
}

.footer{
  margin-top: 0; /* handled by footer-spacer */
  padding: calc(var(--s6) + 86px) 0 calc(var(--s6) + 120px);
    background: var(--paper);
  margin-bottom: var(--footer-gap); /* visible space to page end */
}
.footer-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s5);
}
.footer a{ color: rgba(20,24,20,.70); }
.footer a:hover{ color: var(--green); }
.footer small{ color: rgba(20,24,20,.55); }
@media (max-width: 860px){ .footer-grid{ grid-template-columns: 1fr; } }



.card.pad-xl{ padding: var(--s5); }

.media-frame{
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 1px 0 rgba(20,24,20,.02);
}
.landing .hero .media-frame{
  border-radius: 24px;
  overflow: hidden;
}
.landing .hero .media-frame img{ border-radius: 24px; }
.media-frame.no-frame{
  border: none;
  box-shadow: none;
  background: transparent;
}
.media-frame.no-frame img{ background: transparent; }
.media-frame img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  display:block;
}
.media-frame .cap{
  padding: 12px 14px;
  font-size: 12px;
  color: rgba(20,24,20,.58);
    background: var(--paper);
}

/* Hero image: show full image (no crop), wider/taller */
.hero .media-frame img{
  height: 320px;
  object-fit: contain;
  background: #fff;
}
@media (max-width: 960px){
  .hero .media-frame img{ height: 260px; }
}
@media (max-width: 520px){
  .hero .media-frame img{ height: 220px; }
}
@media (max-width: 960px){
  .media-frame img{ height: 200px; }
}

/* Was-ist-Zen Layout: larger explanation box */
.zen-grid{ grid-template-columns: .9fr 1.1fr; align-items: start; gap: var(--s3); }
.zen-grid .fine{ font-size: 16px; line-height: 1.6; }
@media (max-width: 960px){ .zen-grid{ grid-template-columns: 1fr; } }

/* 06) ANIMATIONS + ACCESSIBILITY */
.reveal{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .track{ animation: none !important; }
  .reveal{ opacity: 1; transform: none; transition: none; }
  .btn{ transition: none; }
}


/* Language helpers */
html[lang="de"] .only-en{ display:none !important; }
html[lang="en"] .only-de{ display:none !important; }
/* Map + profile helpers */
.grid.map{ grid-template-columns: 1.6fr .8fr; }
@media (max-width: 960px){ .grid.map{ grid-template-columns: 1fr; } }

.map-embed{
  width: 100%;
  position: relative;
  min-height: 560px; /* stretched */
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: transparent;
  box-shadow: 0 1px 0 rgba(20,24,20,.02);
  line-height: 0; /* avoid any inline gap */
}
@media (max-width: 900px){
  .map-embed{ min-height: 420px; }
}
.map-embed iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (max-width: 960px){
  .map-embed iframe{ height: 520px; }
}

.portrait{
  border-radius: var(--radius);
  overflow: hidden;
  border: none;
  background: #fff;
  box-shadow: 0 1px 0 rgba(20,24,20,.02);
}

/* Portrait: no borders */
.portrait, .portrait .media, .portrait img{ border: 0 !important; outline: 0 !important; }
.portrait .media{
  aspect-ratio: 4 / 5;
  width: 100%;
  display: grid;
  place-items: center;
  background: rgba(47,107,70,.05);
}
.portrait img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.portrait .fallback{
  display:none;
  width: 100%;
  height: 100%;
  align-items:center;
  justify-content:center;
  color: rgba(20,24,20,.55);
  font-size: 13px;
}


/* Footer columns (Übersicht + Rechtliches side-by-side) */
.footer-cols{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s5);
}
@media (max-width: 860px){
  .footer-cols{ grid-template-columns: 1fr; }
}


/* Quote variant (used in hero bubble) */
.quote-plain{ border-left: 0; padding-left: 0; }
/* Hero spacing (slightly larger gap between columns) */
.hero-grid{ gap: calc(var(--s5) + 10px); }
@media (max-width: 960px){
  .hero-grid{ gap: var(--s5); }
}

/* Zen card larger presence */
.zen-card{ padding: calc(var(--s4) + 10px); margin-left: calc(-1 * var(--s2)); width: calc(100% + var(--s2)); }


/* Zen card stretch reset */
@media (max-width: 960px){
  .zen-card{ margin-left: 0; width: 100%; }
}
/* Photo block */
.photo{
  border-radius: var(--radius);
  overflow: hidden;
  border: none;
  background: #fff;
  box-shadow: 0 1px 0 rgba(20,24,20,.02);
}
.photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}
.photo.tall{ aspect-ratio: 4 / 5; }
.photo.wide{ aspect-ratio: 16 / 10; }


/* Zazen photo smaller */
.zazen-photo{ max-width: 50%; }
@media (max-width: 960px){ .zazen-photo{ max-width: 100%; } }

/* --- Override: Testimonial cards (Was Klienten berichten) --- */
.review{
  min-height: 300px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
/* Larger type (approx. doubled) but tuned to still fit */
.review p{
  font-size: 32px;
  font-weight: 750;
  line-height: 1.18;
  letter-spacing: .1px;
  color: rgba(20,24,20,.74);
}
.review .who{
  margin-top: auto;
  padding-top: 18px;
  font-size: 16px;
  font-weight: 800;
  color: rgba(20,24,20,.60);
}
@media (max-width: 860px){
  .review p{ font-size: 26px; line-height: 1.2; }
}
/* Contact spacing tweaks */
.contact-form{ margin-top: 44px; }
@media (max-width: 960px){ .contact-form{ margin-top: 18px; } }

/* Extra distance between Kontakt section and footer */
section#kontakt{ padding-bottom: calc(var(--s7) + 30px); }

/* Failsafe: extra whitespace after footer */
body{ padding-bottom: 24px; }

/* Accordion */
.accordion details{
    padding: 14px 0;
}
.accordion details:last-child{
  border-bottom: 1px solid var(--line);
}
.accordion summary{
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-weight: 700;
  color: rgba(20,24,20,.78);
  letter-spacing: .1px;
}
.accordion summary::-webkit-details-marker{ display:none; }
.accordion summary::after{
  content: "＋";
  font-weight: 700;
  opacity: .6;
  transform: translateY(-1px);
}
.accordion details[open] summary::after{ content: "–"; opacity: .65; }
.accordion .acc-body{
  padding-top: 10px;
}
.accordion .acc-body p{
  margin: 0;
  color: rgba(20,24,20,.70);
  line-height: 1.6;
}
/* Leere Wolke section (top row + centered accordion) */
.wolke-top{
  grid-template-columns: .78fr 1.22fr;
  align-items: center;
  gap: var(--s5);
}
.wolke-image{ max-width: 760px; justify-self: end; }
@media (max-width: 960px){
  .wolke-top{ grid-template-columns: 1fr; }
  .wolke-image{ max-width: 100%; justify-self: start; }
}

.wolke-accordion-wrap{
  max-width: 980px;
  margin: 34px auto 0;
  text-align: left;
}
/* Leere Wolke image: prevent cropping, allow wider graphic */
.wolke-logo{
  aspect-ratio: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  margin-top: 18px;
}
.wolke-logo img{
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* --- Override: Zen text card stretch to the left (strong) --- */
@media (min-width: 961px){
  .zen-card{
    margin-left: calc(-1 * (var(--s7) + 26px));
    width: calc(100% + (var(--s7) + 26px));
  }
  .zen-grid{ gap: var(--s2); }
}


/* Utility: visually hide a whole section but keep it in the code */
.is-hidden{ display:none !important; }
/* Zen text collapse */
.zen-collapse{
    padding-top: 12px;
}
.zen-collapse summary{
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-weight: 750;
  color: rgba(20,24,20,.78);
}
.zen-collapse summary::-webkit-details-marker{ display:none; }
.zen-collapse summary::after{
  content: "＋";
  font-weight: 800;
  opacity: .55;
}
.zen-collapse[open] summary::after{ content: "–"; opacity: .65; }
.zen-collapse .acc-body{ padding-top: 14px; }

/* Landing hero: centered, larger, and above the fold */
.landing .hero{
  min-height: calc(100vh - 78px); /* keep next section below the fold */
  display: flex;
  align-items: center;
  padding: 32px 0 40px;
}
@media (max-width: 960px){
  .landing .hero{ min-height: calc(100vh - 68px); padding: 22px 0 28px; }
}

/* Center the whole hero block */
.landing .hero .hero-grid{
  grid-template-columns: minmax(360px, 640px) minmax(300px, 560px);
  justify-content: center;
  align-items: stretch;
  gap: calc(var(--s5) + 14px);
}
@media (max-width: 960px){
  .landing .hero .hero-grid{ grid-template-columns: 1fr; justify-content: start; }
}

/* Center text/content in hero */
.landing .hero .stack,
.landing .hero h1,
.landing .hero p,
.landing .hero aside{
  text-align: center !important;
}
.landing .hero .eyebrow{ justify-content: center; }
.landing .hero .lead{
  max-width: 54ch;
  margin-left: auto;
  margin-right: auto;
}

/* Larger type for first impression */
.landing .hero h1{
  font-size: clamp(46px, 5.4vw, 74px);
  line-height: 1.02;
  letter-spacing: .2px;
}
.landing .hero .lead{
  font-size: 19px;
  line-height: 1.55;
}
@media (max-width: 960px){
  .landing .hero h1{ font-size: clamp(38px, 8.5vw, 58px); }
  .landing .hero .lead{ font-size: 17px; }
}

/* Right bubble: keep it visually centered and slightly larger */
.landing .hero aside.card{
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.landing .hero .quote{ font-size: 18px; line-height: 1.55; }

.hero-left{
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}
.hero-top{ align-self: start; }
.hero-center{ align-self: center; margin: 0; }
.hero-bottom{ align-self: end; }
.landing .hero .hero-left{
  align-self: start;
  margin-top: -120px;
}
.landing .hero .hero-center{ margin-bottom: 0.3em; }
.landing .hero .hero-bottom .stack.tight > * + *{ margin-top: 6px; }
.landing .hero .hero-bottom .hr{ margin: 8px 0; }
@media (max-width: 960px){
  .hero-left{ display: flex; flex-direction: column; height: auto; }
  .hero-center{ align-self: auto; margin: 0; }
  .hero-bottom{ align-self: auto; }
  .landing .hero .hero-left{ margin-top: 0; }
}


/* Hide eyebrow headings (green micro-headings) */
.eyebrow{ display:none !important; }
/* Zen snippet (collapsed preview) */
.zen-snippet{
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* at least two lines visible */
  overflow: hidden;
  font-weight: 400;
  color: rgba(20,24,20,.70);
  line-height: 1.6;
}
}

.landing .hero.pop{ opacity: 1; transform:none; }
}

}

}

}
/* Alternatives section layout */
.alt-grid{
  align-items: start;
  gap: var(--s5);
}
@media (min-width: 961px){
  .alt-grid{ grid-template-columns: 1.05fr .95fr; }
}

/* Navbar delayed reveal on home (robust): nav-delay set via inline head script on index only */
html
/* Landing intro sequence (index only) */
.intro-seq body.landing h1#heroTitle{
  opacity: 0; /* prevent flash before JS sets position */
}
.intro-seq body.landing .hero .hero-rest{
  opacity: 0 !important;
  transform: translateY(12px);
}

.nav-delay body.landing .nav-wrap{
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity 700ms ease, transform 700ms ease;
  will-change: opacity, transform;
}
html.nav-delay.nav-in body.landing .nav-wrap{
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  html.nav-delay body.landing .nav-wrap{ transition: none; transform: none; }
}

/* Optional spacer */
.footer-gap{ height: 48px; }


/* Leere Wolke button spacing */
.wolke-actions{ justify-content: center; margin-top: 25px; }
/* Explicit gap before footer (prevents "touching" even when borders/backgrounds blend) */
.footer-spacer{
  height: var(--footer-gap);
}
@media (max-width: 960px){
  :root{ --footer-gap: 35px; }
}
/* Hero quote: enforce 2-line layout on desktop */
.quote-line{ display:block; }
.quote-author{
  display:block;
  margin-top: 10px;
  font-weight: 750;
  opacity: .75;
}
@media (min-width: 961px){
  .quote-line{ white-space: nowrap; }
}
@media (max-width: 960px){
  .quote-line{ white-space: normal; }
}
/* Landing hero: XXL */
@media (min-width: 961px){
  body.landing .hero{
    min-height: calc(100vh - 78px);
    padding-top: 54px;
    padding-bottom: 70px;
  }
  body.landing .hero h1{
    font-size: clamp(56px, 6.2vw, 92px);
    line-height: 1.0;
    letter-spacing: .15px;
  }
  body.landing .hero .lead{
    font-size: 21px;
    line-height: 1.6;
    max-width: 60ch;
  }
  body.landing .hero aside.card{
    max-width: 620px;
  }
  body.landing .hero .quote{
    font-size: 20px;
    line-height: 1.6;
  }
  body.landing .hero .hero-grid{
    gap: calc(var(--s6) + 8px);
  }
}
@media (max-width: 960px){
  body.landing .hero{
    min-height: calc(100vh - 68px);
    padding-top: 28px;
    padding-bottom: 36px;
  }
  body.landing .hero h1{ font-size: clamp(40px, 9.5vw, 64px); }
  body.landing .hero .lead{ font-size: 17.5px; }
}
body.landing .hero .lead,
body.landing .hero .quote,
body.landing .hero .quote-author{
  font-size: 16px;
  line-height: 1.6;
}
/* Contact: title/info left, form right */
.contact-grid{
  display: grid;
  grid-template-columns: minmax(280px, 520px) minmax(320px, 520px);
  justify-content: center;
  align-items: start;
  gap: calc(var(--s6) + 8px);
}
@media (max-width: 960px){
  .contact-grid{ grid-template-columns: 1fr; }
}

.page-contact .contact-grid{
  grid-template-columns: minmax(280px, 1fr) minmax(320px, 1fr);
  justify-content: space-between;
}
@media (max-width: 960px){
  .page-contact .contact-grid{ grid-template-columns: 1fr; }
}

/* Pop animation: only when JS is available */
.js section.pop{
  opacity: 0;
  transform: translateY(12px) scale(.996);
  transition: opacity 900ms cubic-bezier(.2,.8,.2,1), transform 900ms cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}
.js section.pop.is-in{
  opacity: 1;
  transform: none;
}

/* Hero gets an even smoother "first impression" pop */
.js body.landing section.hero.pop{
  transform: translateY(10px) scale(.997);
  transition-duration: 1100ms;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .js section.pop{
    transition: none;
    transform: none;
    opacity: 1;
  }
}
/* Brand icon */
.mark-icon{
  width: 34px;
  height: 34px;
  display:block;
  object-fit: contain;
}

  .zazen-info .zazen-extra{
  font-size: 13px;
  line-height: 1.6;
  font-weight: 400;
  color: rgba(20,24,20,.62);
}
}

/* Zazen schedule card: readable, not bold */
.zazen-info .zazen-when{
  font-size: 13px;
  line-height: 1.6;
  font-weight: 400;
  color: rgba(20,24,20,.62);
}
.zazen-info .zazen-extra{
  font-size: 17px;
  line-height: 1.65;
  font-weight: 450;
}
/* Avoid bold label inside the card */
.zazen-info strong{ font-weight: 500; }

/* Zazen info: normal body size and clean paragraph spacing */
.zazen-info .zazen-when,
.zazen-info .zazen-extra{
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--muted);
}
.zazen-info .zazen-extra{ margin: 10px 0 0; }
.zazen-info .zazen-extra:first-of-type{ margin-top: 12px; }

@media (max-width: 960px){
  .zazen-info .zazen-when{ font-size: 16.5px; }
  .zazen-info .zazen-extra{ font-size: 16px; }
}

/* Hide specific nav items without removing them */
.nav-hide{ display: none !important; }


/* Button variant */
.btn.subtle{
  background: rgba(250, 252, 250, .9);
}
.btn.subtle:hover{
  background: rgba(250, 252, 250, 1);
}

/* GROUP SECTION (safe overrides) */
.group-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}
.group-split{
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 900px){
  .group-split{ grid-template-columns: 1fr; }
}
.group-photo{ margin: 0; }
.group-photo img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  box-shadow: var(--shadow);
  max-width: 420px;
}
@media (max-width: 900px){
  .group-photo img{ max-width: 100%; }
}
.group-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
}
.group-lead{
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(250, 252, 250, .9);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  width: fit-content;
  margin: 0 auto;
}


/* FAQ hero spacing */
.hero.hero-faq{
  padding-top: 110px;
  padding-bottom: 70px;
}
@media (max-width: 900px){
  .hero.hero-faq{
    padding-top: 96px;
    padding-bottom: 60px;
  }
}


/* v100 fixes: ensure group image is vertically centered relative to text */
#gruppe .group-split{ align-items: center !important; }
#gruppe .group-photo{ display:flex; align-items:center; justify-content:center; }
#gruppe .group-photo img{ max-width: 360px; width: 100%; }



/* v100 fixes: Zazen info lines same typography */
.zazen-info p{
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: var(--muted) !important;
}
.zazen-info .zazen-when strong{ font-weight: 700; }



/* Hero logo above title */
.hero-logo{
  margin: 0 0 10px 0;
}
.hero-logo img{
  display:block;
  height: 120px;
  width: auto;
  max-width: 100%;
  opacity: .92;
  transform: scaleX(1.25);
  transform-origin: center;
}
@media (max-width: 960px){
  .hero-logo img{ height: 104px; }
}
@media (max-width: 520px){
  .hero-logo{ margin-bottom: 8px; }
  .hero-logo img{ height: 86px; }
  .hero-logo img{ transform: scaleX(1.15); }
}
  .hero-logo img{ max-width: 240px; }
}



/* Zazen section: show full image (no crop) */
.zazen-photo{
  background: rgba(16, 64, 48, 0.04);
}
.zazen-photo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.zazen-photo.photo.tall{
  min-height: 360px;
}
@media (max-width: 720px){
  .zazen-photo.photo.tall{ min-height: 280px; }
}



/* Hero image: no frame/border */
.hero .media-frame{
  border: 0;
  background: transparent;
  box-shadow: none;
}