/* ─────────────────────────────────────────────────────────
   Brigitta Kocher · Shared Stylesheet
   Tokens · Type · Nav · Hero base · Buttons · CTA · Footer
   ───────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Noto Sans Devanagari';
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  src: url('fonts/NotoSansDevanagari-ExtraLight.woff2') format('woff2');
  unicode-range: U+0950, U+0020;
}

/* ─── Tokens ─────────────────────────────────────────── */
:root{
  --green:#1e3b3d;
  --green-light:#2a5254;
  --green-deep:#16302f;
  --green-pale:#e4eeee;
  --gold:#eede96;
  --gold-dark:#c9bc60;
  --cream:#F7F4EE;
  --cream-dark:#ede9e0;
  --text:#12272a;
  --text-light:#3d5e60;

  --serif:'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --sans:'Jost', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --gutter:96px;
  --max:1280px;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ─── Reset + base ───────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans);
  font-weight:300;
  font-size:17px;
  line-height:1.65;
  color:var(--text);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,blockquote,figure{margin:0;padding:0}
ul,ol{list-style:none}

/* ─── Type ───────────────────────────────────────────── */
.serif{font-family:var(--serif);font-weight:300}
h1,h2,h3{font-family:var(--serif);font-weight:300;letter-spacing:-.005em;color:var(--text)}
h1{font-size:clamp(54px, 6.6vw, 92px);line-height:1.02;letter-spacing:-.015em}
h1 em{font-style:italic;font-weight:300;color:var(--gold)}
h2{font-size:clamp(40px, 4.2vw, 60px);line-height:1.08}
h2 em{font-style:italic;font-weight:300;color:var(--gold-dark)}
h3{font-size:26px;line-height:1.2;font-weight:400}
.body-l{font-size:19px;line-height:1.7;color:var(--text-light)}
p{max-width:65ch;text-wrap:pretty}

.eyebrow{
  font-family:var(--sans);
  font-weight:400;
  font-size:11.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-dark);
  display:inline-flex;
  align-items:center;
  gap:14px;
}
.eyebrow::before{
  content:"";
  width:28px;
  height:1px;
  background:currentColor;
  display:inline-block;
}
.eyebrow--on-dark{color:var(--gold)}
.eyebrow--bare::before{display:none}

/* ─── Layout helpers ─────────────────────────────────── */
.container{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.section{padding:140px 0}
.section--cream{background:var(--cream)}
.section--cream-dark{background:var(--cream-dark)}
.section--green{background:var(--green);color:var(--cream)}
.section--green h2{color:var(--cream)}
.section--green .eyebrow{color:var(--gold)}
.section--green p{color:rgba(247,244,238,.82)}

.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:60px;margin-bottom:80px}
.section-head .lead{max-width:42ch;color:var(--text-light);font-size:17px}
.section--green .section-head .lead{color:rgba(247,244,238,.78)}

/* ── Werdegang · OM-Zeichen ─────────────────── */
.om-mark{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  align-self:stretch;
  color:var(--gold-dark);
  line-height:1;
  padding-right:112px;
  padding-top:38px;
}
.om-mark .om{
  font-family:'Noto Sans Devanagari',serif;
  font-weight:200;
  font-size:132px;
  line-height:1;
  color:inherit;
  display:block;
}
@media (max-width:768px){
  .om-mark{justify-content:flex-start;padding-right:0}
  .om-mark .om{font-size:64px}
}

/* fade-in */
.fade{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease), transform 1s var(--ease)}
.fade.in{opacity:1;transform:none}

/* selection */
::selection{background:var(--gold);color:var(--green)}

/* ─── Nav ────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding:26px 0;
  transition:background .35s var(--ease), padding .35s var(--ease), box-shadow .35s var(--ease), color .35s var(--ease);
  color:var(--cream);
}
.nav-inner{
  max-width:var(--max);margin:0 auto;padding:0 var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:48px;
}
.brand{
  font-family:var(--serif);
  font-size:26px;
  font-weight:400;
  letter-spacing:.01em;
  line-height:1;
  white-space:nowrap;
}
.brand .brand-sub{
  display:block;
  font-family:var(--sans);
  font-size:9.5px;
  font-weight:400;
  letter-spacing:.32em;
  text-transform:uppercase;
  opacity:.7;
  margin-top:4px;
}
.nav-links{display:flex;align-items:center;gap:36px}
.nav-links > li{position:relative}
.nav-link{
  font-size:13.5px;
  letter-spacing:.04em;
  font-weight:400;
  padding:8px 0;
  position:relative;
  display:inline-flex;align-items:center;gap:6px;
}
.nav-link::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;
  height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav-link:hover::after,
.has-dropdown:hover .nav-link::after,
.nav-link.is-active::after{transform:scaleX(1)}
.chev{width:9px;height:9px;border-right:1.2px solid currentColor;border-bottom:1.2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s var(--ease)}
.has-dropdown:hover .chev{transform:rotate(225deg) translateY(-2px)}

.dropdown{
  position:absolute;top:calc(100% + 6px);left:-20px;
  min-width:260px;
  background:var(--cream);color:var(--text);
  padding:14px 0;
  border:1px solid rgba(18,39,42,.08);
  box-shadow:0 24px 60px -20px rgba(18,39,42,.25);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.has-dropdown:hover .dropdown{opacity:1;visibility:visible;transform:none}
.dropdown a{
  display:block;
  padding:11px 24px;
  font-size:14px;
  letter-spacing:.01em;
  transition:background .2s var(--ease), color .2s var(--ease), padding-left .2s var(--ease);
}
.dropdown a:hover{background:var(--green-pale);padding-left:30px;color:var(--green)}

.nav-cta{
  border:1px solid currentColor;
  padding:11px 22px;
  font-size:12.5px;
  letter-spacing:.15em;
  text-transform:uppercase;
  font-weight:400;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.nav-cta:hover{background:var(--gold);color:var(--green);border-color:var(--gold)}

.nav.scrolled{
  background:var(--cream);
  color:var(--text);
  padding:16px 0;
  box-shadow:0 1px 0 rgba(18,39,42,.08), 0 12px 32px -22px rgba(18,39,42,.2);
}
.nav.scrolled .brand-sub{opacity:.55}
.nav.scrolled .nav-cta:hover{background:var(--green);color:var(--cream);border-color:var(--green)}

/* Pages without a hero start with cream nav already */
body.nav-solid .nav{
  background:var(--cream);
  color:var(--text);
  box-shadow:0 1px 0 rgba(18,39,42,.06);
}

/* ─── Hero (base) ────────────────────────────────────── */
.hero{
  position:relative;
  overflow:hidden;
  color:var(--cream);
  display:flex;
  isolation:isolate;
}
.hero--full{min-height:100vh;height:100vh}
.hero--mid{min-height:70vh;height:70vh}
.hero--short{min-height:50vh;height:50vh}

.hero-video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  z-index:-2;
}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(135deg, rgba(18,40,32,0.82) 0%, rgba(45,82,70,0.65) 50%, rgba(18,40,32,0.55) 100%);
  z-index:-1;
}
.hero-overlay::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(10,25,22,.55) 100%);
}
.hero--mid .hero-overlay{
  background:linear-gradient(135deg, rgba(18,40,32,0.78) 0%, rgba(45,82,70,0.6) 60%, rgba(18,40,32,0.5) 100%);
}
.hero--short .hero-overlay{
  background:linear-gradient(135deg, rgba(18,40,32,0.74) 0%, rgba(45,82,70,0.55) 60%, rgba(18,40,32,0.45) 100%);
}

.hero-inner{
  max-width:var(--max);margin:0 auto;padding:0 var(--gutter);
  width:100%;
  align-self:center;
  display:flex;flex-direction:column;
  position:relative;
  padding-top:120px;
  padding-bottom:120px;
}
.hero--mid .hero-inner,.hero--short .hero-inner{padding-top:140px;padding-bottom:80px}

.hero .eyebrow{color:var(--gold)}
.hero h1{
  color:var(--cream);
  margin-top:32px;
  max-width:16ch;
}
.hero--mid h1{font-size:clamp(48px,5.4vw,76px)}
.hero--short h1{font-size:clamp(40px,4.4vw,62px)}

.hero-quote{
  font-family:var(--serif);
  font-style:italic;
  font-size:21px;
  line-height:1.5;
  color:rgba(247,244,238,.92);
  border-left:2px solid var(--gold);
  padding:6px 0 6px 22px;
  max-width:46ch;
  margin-top:44px;
}
.hero-quote cite{display:block;font-style:normal;font-family:var(--sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-top:10px;font-weight:400}

.hero-subline{
  margin-top:28px;
  font-size:19px;
  line-height:1.55;
  color:rgba(247,244,238,.85);
  max-width:50ch;
  font-weight:300;
}

.hero-cta-row{margin-top:54px;display:flex;align-items:center;gap:32px;flex-wrap:wrap}

/* scroll hint */
.scroll-hint{
  position:absolute;left:var(--gutter);bottom:42px;
  display:flex;align-items:center;gap:16px;
  font-family:var(--sans);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--cream);
  opacity:.85;
}
.scroll-hint::before{content:"";width:48px;height:1px;background:var(--gold)}
.scroll-hint .dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--gold);animation:bob 2.4s var(--ease) infinite;margin-left:6px}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.9}50%{transform:translateY(4px);opacity:.4}}

.hero-corner{
  position:absolute;right:var(--gutter);bottom:42px;
  font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(247,244,238,.7);
  display:flex;align-items:center;gap:14px;
}
.hero-corner::before{content:"";width:28px;height:1px;background:var(--gold);opacity:.9}

/* ─── Buttons ────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:14px;
  border:1px solid var(--gold);
  color:var(--gold);
  background:transparent;
  padding:18px 30px;
  font-size:12.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:400;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.btn .arr{width:18px;height:1px;background:currentColor;position:relative;transition:width .35s var(--ease);display:inline-block}
.btn .arr::after{
  content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;
  transform:rotate(45deg);
}
.btn:hover{background:var(--gold);color:var(--green)}
.btn:hover .arr{width:26px}

.btn-secondary{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cream);padding:6px 0;
  border-bottom:1px solid rgba(238,222,150,.4);
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.btn-secondary:hover{color:var(--gold);border-color:var(--gold)}

.btn--dark{border-color:var(--green);color:var(--green)}
.btn--dark:hover{background:var(--green);color:var(--cream)}

.btn--gold-solid{background:var(--gold);color:var(--green);border-color:var(--gold)}
.btn--gold-solid:hover{background:transparent;color:var(--gold)}

/* small text link with arrow */
.link-arrow{
  display:inline-flex;align-items:center;gap:14px;
  font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--green);
  padding-bottom:6px;border-bottom:1px solid rgba(30,59,61,.3);
  transition:gap .25s var(--ease), border-color .25s var(--ease);
  font-weight:400;
}
.link-arrow:hover{border-color:var(--green);gap:20px}
.link-arrow .arr{width:18px;height:1px;background:currentColor;position:relative;display:inline-block}
.link-arrow .arr::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.link-arrow--gold{color:var(--gold);border-color:rgba(238,222,150,.4)}
.link-arrow--gold:hover{border-color:var(--gold)}

/* ─── CTA Strip ──────────────────────────────────────── */
.cta-strip{background:var(--green-deep);padding:120px 0;position:relative;overflow:hidden}
.cta-strip::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at right top, rgba(238,222,150,.08), transparent 60%);
  pointer-events:none;
}
.cta-inner{
  max-width:var(--max);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:1.4fr 1fr;gap:60px;align-items:center;
  position:relative;
}
.cta-strip h2{color:var(--cream);max-width:14ch}
.cta-strip h2 em{color:var(--gold)}
.cta-strip .sub{color:rgba(247,244,238,.7);margin-top:18px;font-size:17px}
.cta-strip .actions{display:flex;flex-direction:column;align-items:flex-end;gap:18px}
.cta-strip .phone{font-family:var(--serif);font-size:28px;color:var(--gold);font-weight:400;letter-spacing:.01em}
.cta-strip .phone-lbl{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(247,244,238,.55);margin-bottom:-4px}

/* ─── Footer ─────────────────────────────────────────── */
footer{background:var(--cream);padding:90px 0 50px;border-top:1px solid rgba(18,39,42,.08)}
.foot-grid{
  max-width:var(--max);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:80px;
  margin-bottom:64px;
}
.foot-brand{font-family:var(--serif);font-size:30px;font-weight:400;line-height:1;margin-bottom:6px}
.foot-sub{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:32px}
.foot-addr{font-size:14.5px;line-height:1.8;color:var(--text-light);font-style:normal}
.foot-addr a{transition:color .2s var(--ease)}
.foot-addr a:hover{color:var(--green)}
.foot-col h4{font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-dark);font-weight:500;margin-bottom:22px}
.foot-col ul{display:flex;flex-direction:column;gap:11px}
.foot-col a{font-size:14.5px;color:var(--text-light);transition:color .2s var(--ease), padding-left .2s var(--ease)}
.foot-col a:hover{color:var(--green);padding-left:6px}
.foot-bot{
  max-width:var(--max);margin:0 auto;padding:32px var(--gutter) 0;
  border-top:1px solid rgba(18,39,42,.08);
  display:flex;justify-content:space-between;align-items:center;
  font-size:12px;letter-spacing:.04em;color:var(--text-light);
}
.foot-bot .meta{display:flex;gap:32px}
.foot-legal{display:inline-flex;gap:20px;align-items:center}
.foot-legal a{color:inherit;opacity:.7;font-size:11.5px;letter-spacing:.06em;text-decoration:none}
.foot-legal a:hover{opacity:1;color:var(--gold-dark)}

/* ─── Reduced motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
  .fade{opacity:1;transform:none}
}

/* ─────────────────────────────────────────────────────────
   Reusable content patterns
   ───────────────────────────────────────────────────────── */

/* Lead intro block (right after hero) */
.lead-block{
  max-width:760px;
  font-family:var(--serif);
  font-size:28px;
  line-height:1.45;
  color:var(--text);
  font-weight:300;
}
.lead-block em{font-style:italic;color:var(--gold-dark)}
.lead-block strong{font-weight:500;color:var(--text)}

/* Body prose (multi-paragraph text after lead) */
.prose{display:flex;flex-direction:column;gap:22px;max-width:65ch}
.prose p{font-size:17px;line-height:1.75;color:var(--text-light);max-width:65ch}
.prose strong{color:var(--text);font-weight:500}
.prose--on-dark p{color:rgba(247,244,238,.85)}
.prose--on-dark strong{color:var(--cream)}

/* ── Prose · Lange Textseiten (Impressum, Datenschutz) ───── */
.prose-doc{font-family:var(--sans);font-size:16px;line-height:1.75;color:var(--text);max-width:65ch}
.prose-doc h2{font-family:var(--serif);font-weight:300;font-size:26px;line-height:1.3;color:var(--text);margin:48px 0 16px}
.prose-doc h3{font-family:var(--sans);font-weight:500;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--text);margin:32px 0 12px}
.prose-doc p{margin:0 0 18px;color:var(--text-light)}
.prose-doc p strong{color:var(--text);font-weight:500}
.prose-doc a{color:var(--gold-dark);border-bottom:1px solid rgba(201,188,96,.4);text-decoration:none}
.prose-doc a:hover{border-bottom-color:var(--gold-dark)}
.prose-doc ul{margin:0 0 18px;padding-left:20px;color:var(--text-light)}
.prose-doc ul li{margin-bottom:6px}
@media (max-width:768px){
  .prose-doc h2{font-size:22px;margin-top:36px}
  .prose-doc{font-size:15px}
}

/* H3 sub-section heading */
.h-sub{
  font-family:var(--serif);
  font-size:36px;line-height:1.15;font-weight:300;
  margin-bottom:32px;
  letter-spacing:-.005em;
}
.h-sub em{font-style:italic;color:var(--gold-dark)}
.section--green .h-sub em{color:var(--gold)}

/* Two-column text + image split */
.split-ti{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:96px;
  align-items:center;
}
.split-ti--image-right .img-side{order:2}
.split-ti--image-left  .img-side{order:1}
.split-ti .img-side img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:center top;
  display:block;
  background:var(--cream-dark);
}
.split-ti .img-side{position:relative}
.split-ti .img-tag{
  position:absolute;left:24px;bottom:24px;
  display:flex;align-items:center;gap:12px;
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--cream);
  background:rgba(18,39,42,.6);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:11px 18px;
  border:1px solid rgba(238,222,150,.25);
}
.split-ti .img-tag::before{content:"";width:18px;height:1px;background:var(--gold)}

/* Gold-dot bulleted list */
.gold-list{
  display:flex;flex-direction:column;
  gap:14px;
  max-width:60ch;
}
.gold-list li{
  position:relative;
  padding-left:30px;
  font-size:17px;
  line-height:1.6;
  color:var(--text-light);
}
.gold-list li::before{
  content:"";position:absolute;left:0;top:11px;
  width:8px;height:8px;
  background:var(--gold-dark);
  border-radius:50%;
}
.section--green .gold-list li{color:rgba(247,244,238,.85)}
.section--green .gold-list li::before{background:var(--gold)}
.section--cream-dark .gold-list li::before,
.section--cream .gold-list li::before{background:var(--gold-dark)}
.gold-list--two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 60px;
  max-width:none;
}

/* Big centered italic quote (closing quote) */
.quote-block{
  max-width:920px;margin:0 auto;
  text-align:left;
  padding:60px 64px;
  border-left:2px solid var(--gold-dark);
  background:transparent;
}
.section--green .quote-block{border-left-color:var(--gold)}
.quote-block .q{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(28px,2.6vw,40px);
  line-height:1.35;
  color:var(--text);
  font-weight:300;
}
.section--green .quote-block .q,
.section--cream-dark .quote-block.on-light .q{color:inherit}
.section--green .quote-block .q{color:var(--cream)}
.quote-block .cite{
  display:block;margin-top:26px;
  font-family:var(--sans);font-style:normal;
  font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-dark);font-weight:400;
}
.section--green .quote-block .cite{color:var(--gold)}

/* Big block-quote testimonial (full-width centered, single voice) */
.testimonial-block{
  max-width:980px;margin:0 auto;
  text-align:left;
  position:relative;
  padding:0 0 0 60px;
}
.testimonial-block .qmark{
  position:absolute;left:0;top:-26px;
  font-family:var(--serif);font-style:italic;
  font-size:120px;line-height:1;color:var(--gold-dark);
}
.section--green .testimonial-block .qmark{color:var(--gold)}
.section--cream-dark .testimonial-block .qmark{color:var(--gold-dark)}
.testimonial-block .q{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(24px,2.2vw,32px);
  line-height:1.45;
  color:var(--text);
  font-weight:300;
}
.section--green .testimonial-block .q{color:var(--cream)}
.testimonial-block .cite{
  display:flex;align-items:center;gap:14px;
  margin-top:32px;
  font-family:var(--sans);font-style:normal;
  font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-dark);font-weight:400;
}
.testimonial-block .cite::before{content:"";width:24px;height:1px;background:currentColor}
.section--green .testimonial-block .cite{color:var(--gold)}

/* Process · 4 horizontal numbered steps */
.process{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2px;
  background:rgba(238,222,150,.18);
}
.section--green .process{background:rgba(238,222,150,.22)}
.proc-step{
  padding:42px 36px 38px;
  background:var(--green);
  color:var(--cream);
  position:relative;
  display:flex;flex-direction:column;gap:14px;
  transition:background .35s var(--ease);
}
.proc-step:hover{background:var(--green-light)}
.proc-step .pnum{
  font-family:var(--serif);
  font-style:italic;
  font-size:48px;line-height:1;
  color:var(--gold);
  font-weight:300;
}
.proc-step h3{
  color:var(--cream);
  font-family:var(--serif);
  font-size:24px;
  line-height:1.2;
  font-weight:400;
  margin-top:6px;
}
.proc-step .pdesc{
  font-size:15px;
  line-height:1.55;
  color:rgba(247,244,238,.78);
  max-width:30ch;
  margin-top:auto;
}

/* Numbered-card grid (for principles / topic cards) */
.num-cards{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:2px;
  background:var(--green);
}
.num-cards--3col{grid-template-columns:repeat(3,1fr)}
.num-card{
  background:var(--cream);
  padding:54px 48px 48px;
  display:flex;flex-direction:column;
  min-height:320px;
  position:relative;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.num-card .nc-num{
  font-family:var(--serif);font-style:italic;
  font-size:54px;line-height:1;color:var(--gold-dark);font-weight:300;
  transition:color .35s var(--ease);
}
.num-card h3{
  margin-top:22px;
  font-size:28px;line-height:1.2;
  transition:color .35s var(--ease);
}
.num-card .nc-body{
  margin-top:18px;
  color:var(--text-light);
  font-size:16px;line-height:1.7;
  flex-grow:1;
  transition:color .35s var(--ease);
}
.num-card:hover{background:var(--green)}
.num-card:hover .nc-num{color:var(--gold)}
.num-card:hover h3{color:var(--cream)}
.num-card:hover .nc-body{color:rgba(247,244,238,.82)}
.num-card--on-dark{background:var(--cream-dark)}
.num-card--on-dark:hover{background:var(--green)}

/* Info block on green (full-section panel) */
.info-panel{
  background:var(--green);
  color:var(--cream);
  padding:80px 96px;
  display:grid;
  grid-template-columns:.7fr 1fr;
  gap:80px;
  align-items:start;
}
.info-panel h2{color:var(--cream);max-width:14ch}
.info-panel h2 em{color:var(--gold)}
.info-panel .eyebrow{color:var(--gold)}

/* Small note strip */
.note-strip{
  background:var(--green);color:var(--cream);
  padding:48px 0;
  text-align:center;
}
.note-strip .ns-inner{
  max-width:var(--max);margin:0 auto;padding:0 var(--gutter);
  display:flex;align-items:center;justify-content:center;gap:38px;flex-wrap:wrap;
}
.note-strip .ns-item{
  font-family:var(--serif);font-size:21px;font-style:italic;color:var(--cream);
  display:flex;align-items:center;gap:14px;
}
.note-strip .ns-item::before{content:"";width:8px;height:8px;background:var(--gold);border-radius:50%}


/* ─────────────────────────────────────────────────────────
   Hamburger Nav · injected via app.js
   ───────────────────────────────────────────────────────── */
.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  padding:10px 6px;
  position:relative;
  z-index:60;
}
.nav-toggle .bar{
  display:block;
  width:22px;
  height:1.5px;
  background:currentColor;
  transition:transform .3s var(--ease), opacity .3s var(--ease);
  transform-origin:center;
}
.nav-toggle.is-open .bar:nth-child(1){transform:rotate(45deg) translate(4.6px,4.6px)}
.nav-toggle.is-open .bar:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-toggle.is-open .bar:nth-child(3){transform:rotate(-45deg) translate(4.6px,-4.6px)}

.nav-overlay{
  position:fixed;inset:0;
  background:var(--green-deep);
  z-index:49;
  display:flex;flex-direction:column;justify-content:center;
  padding:100px var(--gutter) 60px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .35s var(--ease),visibility .35s;
  overflow-y:auto;
}
.nav-overlay.is-open{opacity:1;visibility:visible;pointer-events:auto}

.nav-overlay-links{display:flex;flex-direction:column}

.nav-overlay-links > a{
  font-family:var(--serif);
  font-size:clamp(34px,8.5vw,52px);
  font-weight:300;
  color:var(--cream);
  padding:14px 0;
  border-bottom:1px solid rgba(238,222,150,.15);
  display:block;
  letter-spacing:-.005em;
  transition:color .2s var(--ease),padding-left .2s var(--ease);
}
.nav-overlay-links > a:hover,
.nav-overlay-links > a:active{color:var(--gold);padding-left:10px}

.nav-overlay-label{
  font-family:var(--sans);
  font-size:11px;
  font-weight:400;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(247,244,238,.4);
  padding:20px 0 6px;
  display:block;
}
.nav-overlay-sub{
  display:flex;flex-direction:column;
  margin-bottom:4px;
}
.nav-overlay-sub a{
  font-family:var(--serif);
  font-size:clamp(26px,6.5vw,40px);
  font-weight:300;
  color:rgba(247,244,238,.72);
  padding:10px 0;
  border-bottom:1px solid rgba(238,222,150,.1);
  display:block;
  transition:color .2s var(--ease),padding-left .2s var(--ease);
}
.nav-overlay-sub a:last-child{border-bottom:1px solid rgba(238,222,150,.15)}
.nav-overlay-sub a:hover,
.nav-overlay-sub a:active{color:var(--gold);padding-left:10px}

/* ─────────────────────────────────────────────────────────
   1024px · Tablet
   ───────────────────────────────────────────────────────── */
@media (max-width:1024px){
  :root{--gutter:48px}
  .section{padding:90px 0}
  .process{grid-template-columns:repeat(2,1fr)}
  .num-cards--3col{grid-template-columns:repeat(2,1fr)}
  .cta-inner{gap:48px}
  .split-ti{gap:56px}
  .info-panel{padding:60px 60px;gap:60px}
}

/* ─────────────────────────────────────────────────────────
   760px · Mobile
   ───────────────────────────────────────────────────────── */
@media (max-width:760px){
  :root{--gutter:20px}
  html,body{overflow-x:clip}

  /* Sections */
  .section{padding:64px 0}
  .section-head{
    flex-direction:column;gap:18px;
    align-items:flex-start;margin-bottom:36px;
  }
  .section-head .lead{max-width:none}

  /* Nav */
  .nav-links{display:none}
  .nav-toggle{display:flex;padding:10px 40px 10px 10px}

  /* Hero heights */
  .hero--full{min-height:100svh;height:100svh}
  .hero--mid{min-height:60vh;height:60vh}
  .hero--short{min-height:45vh;height:45vh}

  /* H1 – min to 36px */
  h1{font-size:clamp(36px,9vw,72px)}
  .hero--mid h1{font-size:clamp(36px,7.5vw,60px)}
  .hero--short h1{font-size:clamp(32px,6vw,50px)}

  /* H2 */
  h2{font-size:clamp(30px,7vw,48px)}

  /* Hero inner */
  .hero-inner{padding-top:96px;padding-bottom:52px}
  .hero--mid .hero-inner,
  .hero--short .hero-inner{padding-top:96px;padding-bottom:40px}
  .scroll-hint,.hero-corner{display:none}
  .hero-subline{font-size:17px;margin-top:18px}
  .hero-cta-row{margin-top:32px;gap:16px;flex-wrap:wrap}

  /* Lead block */
  .lead-block{font-size:clamp(22px,5.6vw,26px)}

  /* Shared grids → single column */
  .split-ti{grid-template-columns:1fr;gap:32px}
  .split-ti--image-right .img-side{order:0}
  .split-ti .img-side img{aspect-ratio:4/3}
  .num-cards{grid-template-columns:1fr}
  .num-cards--3col{grid-template-columns:1fr}
  .process{grid-template-columns:1fr}
  .gold-list--two-col{grid-template-columns:1fr}
  .info-panel{grid-template-columns:1fr;padding:48px var(--gutter)}

  /* CTA strip */
  .cta-strip{padding:72px 0}
  .cta-inner{grid-template-columns:1fr;gap:36px}
  .cta-strip .actions{align-items:flex-start}
  .cta-strip .phone{font-size:22px}

  /* Quote / Testimonial */
  .quote-block{padding:28px 20px}
  .testimonial-block{padding-left:30px}
  .testimonial-block .qmark{font-size:72px;top:-16px}

  /* Footer – single column, centred */
  footer{padding:60px 0 36px}
  .foot-grid{grid-template-columns:1fr;gap:36px;text-align:center}
  .foot-addr{text-align:center}
  .foot-col ul{align-items:center}
  .foot-bot{
    flex-direction:column;gap:14px;
    text-align:center;padding-top:24px;
  }
  .foot-bot .meta{justify-content:center;flex-wrap:wrap;gap:12px}
  .foot-legal{margin-top:8px}

  /* Touch tap highlight */
  .num-card:active{background:var(--green)}
  .num-card:active .nc-num{color:var(--gold)}
  .num-card:active h3{color:var(--cream)}
  .num-card:active .nc-body{color:rgba(247,244,238,.82)}
  .proc-step:active{background:var(--green-light)}
}

/* ─────────────────────────────────────────────────────────
   Accessibility · Skip-Link + Focus-Visible
   ───────────────────────────────────────────────────────── */

/* Skip-link: versteckt, beim Fokus sichtbar */
.skip-link{
  position:absolute;
  top:-120px;left:20px;
  z-index:200;
  background:var(--green);
  color:var(--gold);
  padding:12px 22px;
  font-family:var(--sans);
  font-size:14px;
  font-weight:400;
  letter-spacing:.04em;
  border:1px solid var(--gold);
  transition:top .2s var(--ease);
  text-decoration:none;
}
.skip-link:focus,
.skip-link:focus-visible{
  top:20px;
  outline:2px solid var(--gold);
  outline-offset:2px;
}

/* Focus-visible: Gold-Outline 2px */
:focus-visible{
  outline:2px solid var(--gold-dark);
  outline-offset:3px;
}
.hero :focus-visible,
.section--green :focus-visible,
.cta-strip :focus-visible,
footer :focus-visible,
.nav-overlay :focus-visible{
  outline-color:var(--gold);
}

/* Nav bekommt focus-visible sichtbar auf beiden Hintergründen */
.nav :focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}
.nav.scrolled :focus-visible{
  outline-color:var(--gold-dark);
}