/* ============================================================
   Der Vertraute — Variante B (dunkel)
   Stylesheet für zuhoeren.html
   ============================================================ */

@font-face{
  font-family:'Cormorant Garamond';font-style:normal;font-weight:300;
  font-display:swap;src:url('../fonts/cormorant-garamond.woff2') format('woff2');
}
@font-face{
  font-family:'Cormorant Garamond';font-style:normal;font-weight:400;
  font-display:swap;src:url('../fonts/cormorant-garamond.woff2') format('woff2');
}
@font-face{
  font-family:'Cormorant Garamond';font-style:normal;font-weight:500;
  font-display:swap;src:url('../fonts/cormorant-garamond.woff2') format('woff2');
}
@font-face{
  font-family:'Cormorant Garamond';font-style:italic;font-weight:300;
  font-display:swap;src:url('../fonts/cormorant-garamond-italic.woff2') format('woff2');
}
@font-face{
  font-family:'Cormorant Garamond';font-style:italic;font-weight:400;
  font-display:swap;src:url('../fonts/cormorant-garamond-italic.woff2') format('woff2');
}
@font-face{
  font-family:'Work Sans';font-style:normal;font-weight:300;
  font-display:swap;src:url('../fonts/work-sans.woff2') format('woff2');
}
@font-face{
  font-family:'Work Sans';font-style:normal;font-weight:400;
  font-display:swap;src:url('../fonts/work-sans.woff2') format('woff2');
}
@font-face{
  font-family:'Work Sans';font-style:normal;font-weight:500;
  font-display:swap;src:url('../fonts/work-sans.woff2') format('woff2');
}

:root{
  --bg-1:#1A1714;
  --bg-2:#0F0D0B;
  --bg-3:#1F1A16;
  --paper:#F5F2EE;
  --copper:#B26D40;
  --line:rgba(245,242,238,0.12);
  --text-soft:rgba(245,242,238,0.62);
  --text-softer:rgba(245,242,238,0.45);
}
*{box-sizing:border-box;margin:0;padding:0;}
::selection{background:rgba(178,109,64,0.30);color:var(--paper);}
html{scroll-behavior:smooth;}
body{
  background:var(--bg-1);
  color:var(--paper);
  font-family:'Work Sans',sans-serif;
  font-weight:300;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{
  font-family:'Cormorant Garamond',serif;
  font-weight:300;
  line-height:1.15;
  color:var(--paper);
}
.wrap-narrow{max-width:660px;margin:0 auto;padding:0 clamp(24px,7vw,110px);}
section{padding:clamp(90px,15vh,170px) 0;}
.eyebrow{
  display:block;
  font-family:'Work Sans',sans-serif;
  font-weight:700;
  font-size:calc(12px + 0.2rem);
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--copper);
  margin-bottom:clamp(40px,7vh,60px);
}
.rule{width:44px;height:1px;background:var(--copper);margin:clamp(34px,6vh,52px) 0;}
p.body-text{margin:0 0 1.6em;font-size:19px;line-height:1.8;color:var(--paper);}
p.body-text:last-child{margin-bottom:0;}
.hairline{position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(to right,transparent,rgba(178,109,64,0.45),transparent);}
.hairline--copper{background:linear-gradient(to right,transparent,rgba(178,109,64,0.4),transparent);}

/* HERO */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background:var(--bg-1);
  overflow:hidden;
  padding:0;
}
.hero-media{
  position:absolute;inset:0;overflow:hidden;
  background-color:var(--bg-1);
  background-image:
    linear-gradient(180deg, rgba(15,13,11,0.46) 0%, rgba(26,23,20,0.28) 42%, rgba(15,13,11,0.64) 100%),
    url('../hero-duotone-sand.jpg'),
    radial-gradient(120% 90% at 30% 20%, #2A241E 0%, #1A1714 60%);
  background-size:cover, cover, cover;
  background-position:center, center 18%, center;
  background-repeat:no-repeat, no-repeat, no-repeat;
}
@media (max-width:640px){
  .hero-media{
    background-image:
      linear-gradient(180deg, rgba(15,13,11,0.5) 0%, rgba(26,23,20,0.34) 42%, rgba(15,13,11,0.68) 100%),
      url('../hero-duotone-sand.jpg'),
      radial-gradient(120% 90% at 30% 20%, #2A241E 0%, #1A1714 60%);
    background-position:center, center, center;
  }
}
.hero-drift{
  position:absolute;inset:-15% -10%;pointer-events:none;
  animation:drift 38s linear infinite alternate;
  background:
    radial-gradient(38% 100% at 58% 22%, rgba(245,242,238,0.12), rgba(178,109,64,0.07) 34%, rgba(26,23,20,0) 66%),
    radial-gradient(32% 90% at 28% 62%, rgba(178,109,64,0.05), rgba(26,23,20,0) 60%);
}
.hero-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top, rgba(15,13,11,0.85) 0%, rgba(15,13,11,0.35) 30%, rgba(15,13,11,0) 58%);
}
@keyframes drift{
  0%   { transform:translate3d(-6%, 1%, 0) scale(1.05); opacity:0.5; }
  100% { transform:translate3d(6%, -2%, 0) scale(1.1); opacity:0.85; }
}
@media (prefers-reduced-motion: reduce){
  .hero-drift{ animation:none !important; transform:translate3d(0,-1%,0) scale(1.08) !important; opacity:0.8 !important; }
}
.hero-content{
  position:relative;
  padding:0 clamp(24px,7vw,110px) clamp(56px,12vh,120px);
  max-width:1000px;
}
.hero-content h1{
  font-size:clamp(52px,9.5vw,96px);
  letter-spacing:0.055em;
}
.hero-content .sub{
  margin-top:clamp(14px,2vh,22px);
  font-family:'Cormorant Garamond',serif;
  font-weight:300;
  font-style:italic;
  font-size:clamp(19px,3vw,28px);
  letter-spacing:0.01em;
  color:var(--text-soft);
}

/* INTRO */
.intro{background:var(--bg-2);}
.intro .lede{
  font-family:'Cormorant Garamond',serif;
  font-weight:300;
  font-size:clamp(26px,4.4vw,40px);
  line-height:1.28;
  letter-spacing:0.005em;
}

/* SITZUNG / ABLAUF (glow sections) — Kupfer-Leinen: feines Fadenkreuz + verstärktes Glühen */
.glow-section{
  position:relative;overflow:hidden;
  background-color:#221C16;
  background-image:
    radial-gradient(70% 90% at 50% 0%, rgba(178,109,64,0.09), rgba(34,28,22,0) 60%),
    repeating-linear-gradient(45deg, rgba(178,109,64,0.05) 0px, rgba(178,109,64,0.05) 1px, transparent 1px, transparent 4px),
    repeating-linear-gradient(-45deg, rgba(245,242,238,0.02) 0px, rgba(245,242,238,0.02) 1px, transparent 1px, transparent 4px);
}
.glow-tl::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 68% at 14% 22%, rgba(178,109,64,0.18), rgba(31,26,22,0) 60%);
}
.glow-tr::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 66% at 88% 24%, rgba(178,109,64,0.17), rgba(31,26,22,0) 58%);
}
.glow-section > *{position:relative;}
.sitzung h2{
  font-weight:300;
  font-size:clamp(22px,3.4vw,30px);
  line-height:1.4;
  margin-bottom:0.6em;
}

/* WAS ES GIBT */
.angebot{background:var(--bg-2);}
.angebot-item{padding-bottom:clamp(38px,6vh,54px);border-bottom:1px solid var(--line);}
.angebot-item:last-child{border-bottom:none;padding-bottom:0;padding-top:clamp(38px,6vh,54px);}
.angebot-item h2{font-size:clamp(30px,4.8vw,44px);line-height:1.12;letter-spacing:0.01em;margin-bottom:0.5em;color:var(--copper);}
.angebot-item p.body-text{margin-bottom:0;}

/* ABLAUF */
.ablauf-list{display:flex;flex-direction:column;gap:clamp(30px,5vh,44px);}
.ablauf-step{display:grid;grid-template-columns:56px 1fr;gap:clamp(16px,3vw,32px);align-items:baseline;}
.ablauf-step .num{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:34px;line-height:1;color:var(--text-softer);}
.ablauf-step h3{font-weight:400;font-size:clamp(22px,3.4vw,29px);line-height:1.2;margin-bottom:0.35em;color:var(--copper);}
.ablauf-step p{font-size:18px;line-height:1.8;color:var(--paper);}

/* RAIMUND */
.raimund{background:var(--bg-2);}
.raimund .wrap{max-width:900px;margin:0 auto;padding:0 clamp(24px,7vw,110px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(36px,6vw,72px);align-items:center;}
.raimund-photo{position:relative;width:100%;aspect-ratio:4/5;background:#141210;border:1px solid var(--line);overflow:hidden;}
.raimund-photo img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block;}
.raimund-copy p.body-text{margin-bottom:1.6em;}
.raimund-copy .signoff{font-family:'Cormorant Garamond',serif;font-weight:300;font-style:italic;font-size:26px;letter-spacing:0.02em;}

/* FAQ */
.faq{background:var(--bg-1);}
.faq-item{border-top:1px solid var(--line);}
.faq-end{border-top:1px solid var(--line);}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:clamp(24px,4vh,32px) 0;background:none;border:none;cursor:pointer;text-align:left;
  font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(22px,3.4vw,29px);line-height:1.25;color:var(--copper);
}
.faq-q:focus-visible{outline:2px solid var(--copper);outline-offset:4px;}
.faq-mark{flex:none;font-family:'Work Sans',sans-serif;font-weight:300;font-size:24px;color:var(--text-softer);transition:color .3s,transform .3s;}
.faq-item.open .faq-mark{color:var(--copper);transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-a p{margin:0;padding:0 0 clamp(28px,5vh,38px);max-width:56ch;font-size:17px;line-height:1.85;color:rgba(245,242,238,0.85);}
.faq-item.open .faq-a{max-height:400px;}

/* KONTAKT */
.kontakt{position:relative;overflow:hidden;background:var(--bg-2);}
.kontakt::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 60% at 50% 120%, rgba(178,109,64,0.12), rgba(15,13,11,0) 62%);
}
.kontakt > *{position:relative;}
.kontakt-wrap{max-width:560px;margin:0 auto;padding:0 clamp(24px,7vw,110px);}
.kontakt h2{font-size:clamp(34px,6vw,56px);line-height:1.05;letter-spacing:0.02em;margin-bottom:0.4em;}
.kontakt .sub{
  font-family:'Cormorant Garamond',serif;font-weight:300;font-style:italic;
  font-size:clamp(19px,3vw,24px);color:var(--text-soft);margin-bottom:clamp(40px,7vh,58px);
}
.kontakt p.body-text{margin-bottom:clamp(38px,6vh,52px);}
.btn-mail{
  display:inline-block;background:transparent;border:1px solid rgba(245,242,238,0.35);border-radius:50px;
  padding:16px 40px;font-family:'Work Sans',sans-serif;font-weight:400;font-size:14px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--paper);text-decoration:none;transition:border-color .3s,color .3s;
}
.btn-mail:hover{border-color:var(--copper);color:var(--copper);}
.btn-mail:focus-visible{outline:2px solid var(--copper);outline-offset:4px;}
.kontakt-foot{margin-top:clamp(60px,10vh,90px);font-size:15px;letter-spacing:0.05em;color:var(--text-softer);}
.kontakt-foot a{color:var(--copper);text-decoration:none;transition:opacity .2s;}
.kontakt-foot a:hover{opacity:.75;}

@media(max-width:820px){
  .raimund .wrap{grid-template-columns:1fr;}
}
@media(max-width:640px){
  .raimund-photo{max-width:clamp(160px,45vw,220px);margin:0 auto;justify-self:center;}
}