:root{
  --bg:        #F5F0E5;
  --bg-2:      #EDE7D8;
  --ink:       #000000;
  --ink-soft:  #2D2D2D;
  --green:     #AB8F42; /* alias → gold/wood */
  --wood:      #AB8F42;
  --line:      rgba(0,0,0,0.13);
  --line-soft: rgba(0,0,0,0.07);
  --muted:     rgba(0,0,0,0.48);
  --on-dark:   #EBE3CF; /* warmes Beige für Text auf dunklen Flächen */

  --serif: "DM Serif Display", Georgia, serif;
  --sans:  "DM Sans", "Helvetica Neue", Arial, sans-serif;

  --maxw: 1180px;
  --pad-x: clamp(20px, 5vw, 64px);
}

/* Honeypot field – invisible to humans, visible to bots */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0;}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);overflow-x:clip;}
body{
  font-family:var(--sans);
  font-weight:400;
  font-size:17px;
  line-height:1.7;
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
::selection{background:var(--ink);color:var(--bg)}

/* ---------- Top bar ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding: 16px var(--pad-x);
  display:flex; align-items:center; justify-content:flex-start; gap:16px;
  font-size:13px; letter-spacing:0.08em; text-transform:uppercase;
  background: #000000;
  border-bottom: none;
  box-shadow: none;
}
/* Nav-Übergang entfernt */
.nav .brand{ display:inline-flex; align-items:center; }
.nav-logo{ height: 52px; width: auto; display:block; }

/* Nav links */
.nav-links{
  display:flex; list-style:none; gap:clamp(18px,2.8vw,38px); align-items:center;
  position:absolute; left:50%; transform:translateX(-50%);
}
.nav-links a{
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color: rgba(235,227,207,0.62);
  transition: color .2s ease;
  white-space:nowrap;
}
.nav-links a:hover{ color:var(--wood); }
@media (max-width:1000px){ .nav-links{ display:none; } }
.nav-cta{
  margin-left: auto;
  padding: 8px 16px;
  font-size: 10px;
  box-shadow: none;
}
/* CTA short/full text */
.cta-short{ display: none; }
@media (max-width:860px){
  .cta-full{ display: none; }
  .cta-short{ display: inline; }
}
@media (max-width:720px){
  .nav{padding: 14px var(--pad-x);}
  .nav-logo{ height: 46px; }
  .nav-cta{ padding: 9px 16px; font-size: 10px; }
  .nav-cta .arrow{ display:none; }
}
@media (max-width:720px){
  .hero{ padding-top:160px; }
}
@media (max-width:430px){
  .nav-cta{ display:none; }
}

/* ---------- Layout ---------- */
section{
  padding-left:var(--pad-x);
  padding-right:var(--pad-x);
}
.wrap{
  max-width:var(--maxw); margin:0 auto;
}
.eyebrow{
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--green);
  display:inline-flex; align-items:center; gap:14px;
}
.eyebrow::before{
  content:""; width:20px; height:1px; background:var(--green); display:inline-block; opacity:0.7;
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: 160px;
  padding-bottom: 80px;
  display:flex; align-items:center;
  overflow:hidden;
  isolation:isolate;
}
.hero-bg{
  position:absolute; inset:0; z-index:-1;
  background: #1A1510; /* dunkler Fallback – passt zum Abendlicht */
  overflow:hidden;
}
/* Speicherstadt-Sonnenuntergang durch Fenster */
.hero-bg .photo{
  position:absolute; inset:0;
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  filter: saturate(1.08) brightness(0.96);
  opacity: 1;
}
@media (min-width: 901px){
  .hero-bg .photo{
    background-size: 50%;
  }
}
/* Goldener Warm-Wash – verstärkt Sonnenuntergangs-Atmosphäre */
.hero-bg .tint{
  position:absolute; inset:0;
  background:
    linear-gradient(160deg,
      rgba(161,132,63,0.10) 0%,
      rgba(161,132,63,0.04) 50%,
      rgba(21,35,46,0.12) 100%);
  mix-blend-mode: normal;
  pointer-events:none;
}
/* Scrim links für Textlesbarkeit + oben abdunkeln */
.hero-bg .fade{
  display:none;
}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.18) 38%, transparent 58%);
  pointer-events:none;
}
/* Hero → Seite: im eigenen Anthrazit-Ton des Bildes ausblenden */
.hero::after{
  content:""; position:absolute;
  bottom:0; left:0; right:0;
  height:360px;
  background: linear-gradient(to bottom,
    rgba(26,21,16,0)    0%,
    rgba(26,21,16,0.38) 30%,
    rgba(26,21,16,0.78) 58%,
    rgba(26,21,16,0.96) 80%,
    #1A1510             100%);
  z-index:0;
  pointer-events:none;
}
.hero-inner{
  position:relative; z-index:1;
  max-width:var(--maxw); width:100%; margin:0 auto;
}
.hero h1{
  font-family:var(--sans);
  font-weight:300;
  font-size: clamp(56px, 11vw, 168px);
  line-height:0.95;
  letter-spacing:-0.03em;
  color: var(--on-dark);
  max-width: 14ch;
  text-shadow: 0 2px 8px rgba(0,0,0,0.40);
}
.hero h1 em{
  font-style:italic;
  color: var(--wood);
}
.hero .sub{
  margin-top:28px;
  font-family:var(--sans);
  font-style:normal;
  font-weight:300;
  font-size: clamp(18px, 2vw, 24px);
  color: var(--on-dark);
  max-width:44ch;
  line-height:1.5;
  text-shadow: 0 1px 3px rgba(0,0,0,0.35);
  letter-spacing:0.01em;
}
.hero .eyebrow{ color:var(--wood); text-shadow:0 1px 3px rgba(0,0,0,0.4); }
.hero .eyebrow::before{ background:var(--wood); }
.hero .eyebrow::after{ background:var(--wood); }
.hero .meta{ color:#1A3145; }
.hero-scroll{ color:#1A3145; }
.hero-scroll .line{ background:#1A3145; }
.hero .meta{
  margin-top:48px;
  display:flex; gap:32px; flex-wrap:wrap;
  font-size:13px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--muted);
}
.hero .meta span{display:inline-flex; gap:8px; align-items:center}
.hero .meta .dot{width:5px;height:5px;border-radius:50%;background:var(--wood)}
.hero-scroll{
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  font-size:11px; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--ink-soft); display:flex; flex-direction:column; align-items:center; gap:10px;
  z-index:2;
}
.hero-scroll .line{width:1px; height:36px; background:var(--ink-soft); opacity:.55}
@media (max-width:720px){
  .hero{padding-top:100px; padding-bottom:60px}
  .hero .meta{gap:18px; font-size:12px}
  .hero-scroll{display:none}
  .hero-bg .photo{
    background-position: center center;
  }
}

/* ---------- Section spacing ---------- */
.section{
  padding-top: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(22px, 3.5vw, 44px);
  border-top: 1px solid var(--line-soft);
}
.section + .section{
  border-top: 1px solid rgba(161,132,63,0.18);
}
.section-head{
  display:grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(20px, 4vw, 60px);
  align-items:end;
  margin-bottom: clamp(24px, 3.5vw, 48px);
}
@media (max-width:780px){
  .section-head{grid-template-columns:1fr; align-items:start; gap:24px}
}
.section-head h2{
  font-family:var(--serif);
  font-weight:400;
  font-size: clamp(26px, 3.6vw, 52px);
  line-height:1.08;
  letter-spacing:0;
  color:var(--ink);
}
.section-head h2 em{font-style:italic; font-weight:400; color:var(--green);}
.section-head h2 .en{
  display:block;
  font-style:normal;
  color:var(--green);
  font-size: 0.42em;
  margin-top:16px;
  letter-spacing:0;
}
.section-head .lede{
  font-size:17px;
  line-height:1.65;
  color:var(--ink-soft);
  max-width:46ch;
}
.section-head .lede .en{
  display:block; margin-top:10px;
  font-family:var(--sans); font-style:normal; color:var(--muted);
  font-size:15px;
}

/* ---------- Cards ---------- */
.grid-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
@media (max-width:900px){ .grid-3{grid-template-columns:1fr} }

.card{
  background:var(--bg);
  padding: clamp(28px, 3.5vw, 48px);
  display:flex; flex-direction:column;
  min-height: 0;
  position:relative;
  transition: background .3s ease;
}
.card:hover{ background:var(--bg-2); }
.card .idx{
  font-family:var(--sans);
  font-size:11px; color:var(--green);
  letter-spacing:0.22em; text-transform:uppercase;
}
.card h3{
  margin-top: 28px;
  font-family:var(--serif);
  font-weight:400;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height:1.15;
  letter-spacing:0;
  color:var(--ink);
}
.card .desc{
  margin-top:20px;
  color:var(--muted);
  font-size:15.5px;
  line-height:1.75;
  max-width:34ch;
  flex:1;
}
.card .meta{
  margin-top:36px;
  display:flex; align-items:center; gap:10px;
  font-family:var(--sans);
  font-size:12px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--muted);
}
.card .meta::before{
  content:""; width:20px; height:1px; background:var(--wood); opacity:0.6;
}
@media (max-width:720px){
  .card{min-height:0; padding: 28px 24px}
}

/* ---------- Buttons ---------- */
.btn{
  --bg-btn: var(--ink);
  --fg-btn: var(--bg);
  display:inline-flex; align-items:center; gap:12px;
  padding: 13px 28px;
  background: var(--bg-btn); color: var(--fg-btn);
  border-radius: 4px;
  font-family:var(--sans);
  font-size:11px; font-weight:400;
  letter-spacing:0.18em;
  text-transform:uppercase;
  border:1px solid var(--bg-btn);
  cursor:pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  width:max-content;
}
.btn:hover{
  --bg-btn: transparent;
  --fg-btn: var(--ink);
  border-color: var(--ink);
}
.btn.ghost{
  --bg-btn: transparent;
  --fg-btn: var(--ink);
  border-color: var(--ink);
}
.btn.ghost:hover{ --bg-btn: var(--ink); --fg-btn: var(--bg); }
.btn.ghost-light{
  --bg-btn: transparent;
  --fg-btn: var(--bg);
  border-color: rgba(246,241,230,0.5);
}
.btn.ghost-light:hover{ --bg-btn: var(--bg); --fg-btn: var(--ink); }
.btn.green{
  --bg-btn: transparent;
  --fg-btn: var(--bg);
  border-color: rgba(246,241,230,0.35);
}
.btn.green:hover{
  --bg-btn: var(--bg);
  --fg-btn: var(--ink);
  border-color: var(--bg);
}
.btn .arrow{
  display:inline-block; width:16px; height:1px; background: currentColor; position:relative;
  transition: width .25s ease;
}
.btn .arrow::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 .arrow{ width:24px; }

.enterprise-cta{
  margin-top: clamp(28px, 4vw, 48px);
  display:flex; gap:20px; flex-wrap:wrap; align-items:center;
}
.enterprise-cta .hint{
  color:var(--muted); font-size:13px;
  font-family:var(--sans); font-style:normal;
  letter-spacing:0.03em;
}
/* Privat + Unternehmen: warmes Hellgrau, dunkle Schrift */
.section#privat,
.section.enterprise{
  background: #C2BAB0;
  border-top: none;
}
.section#privat .section-head h2,
.section.enterprise .section-head h2{ color: var(--ink); }
.section#privat .section-head h2 em,
.section.enterprise .section-head h2 em{ color: var(--ink); }
.section#privat .section-head .lede,
.section.enterprise .section-head .lede{ color: var(--ink-soft); }
.section#privat .section-head .lede .en,
.section.enterprise .section-head .lede .en{ color: var(--muted); }
.section#privat .eyebrow,
.section.enterprise .eyebrow{ color: var(--wood); }
.section#privat .eyebrow::before,
.section.enterprise .eyebrow::before{ background: var(--wood); }
.section#privat .enterprise-cta .hint,
.section.enterprise .enterprise-cta .hint{ color: var(--muted); }
/* Gold CTAs */
.section#privat .enterprise-cta .btn,
.section.enterprise .enterprise-cta .btn{
  background: var(--wood);
  color: var(--bg);
  border-color: var(--wood);
}
.section#privat .enterprise-cta .btn:hover,
.section.enterprise .enterprise-cta .btn:hover{
  background: transparent;
  color: var(--wood);
  border-color: var(--wood);
}
/* Helle Karten auf taupe Grund */
.section#privat .card,
.section.enterprise .card{
  background: var(--bg);
}
.section#privat .card:hover,
.section.enterprise .card:hover{
  background: var(--bg-2);
}
/* Grid-Trennlinien: subtil */
.section#privat .grid-3,
.section.enterprise .grid-3{
  background: rgba(0,0,0,0.07);
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08), 0 16px 40px -20px rgba(0,0,0,0.18);
}

/* Weicher Übergang: letzte Sektion → Kontakt/Footer */
.section.enterprise{
  position: relative;
}
.section.enterprise::after{
  content:""; position:absolute;
  bottom:0; left:0; right:0;
  height:120px;
  background: linear-gradient(to bottom, transparent 0%, rgba(30,25,20,0.55) 100%);
  pointer-events:none;
  z-index:0;
}
.section.enterprise > .wrap{
  position:relative; z-index:1;
}

/* ---------- Contact ---------- */
.contact{
  background: var(--ink);
  color: var(--bg);
  padding-top: clamp(36px, 5vw, 64px);
  padding-bottom: clamp(22px, 3.5vw, 44px);
  border-top: none;
  position: relative;
  overflow: visible;
  z-index: 1;
}

/*
 * Papierrolle: Walze quer am Übergang Inhalt → Kontaktformular.
 * Oberseite (sichtbar für den Beige-Bereich darüber) = warmes Papier-Beige.
 * Unterseite = tief schwarz (geht nahtlos in den dunklen Kontakt-Hintergrund).
 */
.contact::before{
  content: "";
  position: absolute;
  top: -18px;
  left: -2%;
  right: -2%;
  height: 36px;
  background: linear-gradient(to bottom,
    #EAE3D2  0%,
    #C8BC9E 20%,
    #6b5538 38%,
    #0e0b07 55%,
    #161208 75%,
    #080604 100%
  );
  border-radius: 50%;
  box-shadow:
    0 6px 22px rgba(0,0,0,0.50),
    0 2px  8px rgba(0,0,0,0.30),
    inset 0 2px 5px rgba(255,255,255,0.09),
    inset 0 -3px 6px rgba(0,0,0,0.45);
  z-index: 2;
  pointer-events: none;
}

/* Feine Reflexlinie an der Oberkante */
.contact::after{
  content: "";
  position: absolute;
  top: -19px;
  left: 8%;
  right: 8%;
  height: 1px;
  border-radius: 50%;
  background: linear-gradient(to right,
    transparent,
    rgba(238,230,214,0.45) 25%,
    rgba(238,230,214,0.75) 50%,
    rgba(238,230,214,0.45) 75%,
    transparent);
  z-index: 3;
  pointer-events: none;
}
.contact .eyebrow{ color:var(--wood) }
.contact .eyebrow::before{ background:var(--wood) }

.contact-grid{
  display:grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items:start;
}
@media (max-width:900px){
  .contact-grid{ grid-template-columns:1fr; }
}
.contact h2{
  font-family:var(--serif);
  font-weight:400;
  font-size: clamp(30px, 4.2vw, 65px);
  line-height:1.08;
  letter-spacing:-0.01em;
  color: var(--on-dark);
  margin-top:18px;
}
.contact h2 em{ font-style:italic; font-weight:400; color:var(--wood); }
.contact .lede{
  margin-top:16px;
  max-width:42ch;
  color: rgba(235,227,207,0.84);
  font-size:18px;
}
.contact .lede .en{
  display:block; margin-top:8px;
  font-family:var(--sans); font-style:normal; color:rgba(235,227,207,0.60);
  font-size:16px;
}
.contact .direct{
  margin-top:24px;
  display:flex; flex-direction:column; gap:14px;
}
.contact .direct a{
  font-family:var(--sans);
  font-size: 18px;
  color: var(--on-dark);
  border-bottom:1px solid rgba(235,227,207,0.28);
  padding-bottom:6px;
  width:max-content;
  transition: border-color .2s ease, color .2s ease;
}
.contact .direct a:hover{ border-color:var(--wood); color:var(--wood) }
.contact .direct .label{
  font-family:var(--sans);
  font-size:12px; letter-spacing:0.18em; text-transform:uppercase;
  color: rgba(235,227,207,0.55);
  margin-bottom:-8px;
}

/* Form */
form.contact-form{
  background: transparent;
  padding: 0;
  border: none;
  display:flex; flex-direction:column; gap:28px;
}
form.contact-form label{
  font-size:10px; letter-spacing:0.22em; text-transform:uppercase;
  color: rgba(235,227,207,0.62);
  display:block; margin-bottom:10px;
}
form.contact-form input,
form.contact-form textarea,
form.contact-form select{
  width:100%;
  background: transparent;
  border:none;
  border-bottom:1px solid rgba(235,227,207,0.22);
  color: var(--on-dark);
  font-family:var(--sans);
  font-size:16px;
  font-weight:300;
  padding: 10px 0 14px;
  transition: border-color .25s ease;
  border-radius:0;
}
form.contact-form input:focus,
form.contact-form textarea:focus,
form.contact-form select:focus{
  outline:none;
  border-bottom-color: rgba(235,227,207,0.65);
}
form.contact-form textarea{
  min-height:130px; resize:vertical;
  font-family:var(--sans);
}
form.contact-form option{ color: #111; }
form.contact-form .btn{
  align-self: flex-start;
  background: var(--wood);
  color: var(--bg);
  border-color: var(--wood);
  margin-top:4px;
}
form.contact-form .btn:hover{
  background: transparent;
  color: var(--wood);
  border-color: var(--wood);
}
form.contact-form .field-row{
  display:grid; grid-template-columns: 1fr 1fr; gap:28px;
}
@media (max-width:560px){
  form.contact-form .field-row{ grid-template-columns:1fr }
}
form.contact-form .status{
  font-family:var(--sans); font-style:normal;
  font-size:13px; letter-spacing:0.06em;
  color: rgba(235,227,207,0.70);
  min-height:1.2em;
}
/* Autofill-Hintergrund überschreiben – Browser-Gelb/-Blau unterdrücken */
form.contact-form input:-webkit-autofill,
form.contact-form input:-webkit-autofill:hover,
form.contact-form input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px #000000 inset;
  -webkit-text-fill-color: var(--on-dark);
  transition: background-color 5000s ease-in-out 0s;
  border-bottom: 1px solid rgba(235,227,207,0.28);
}
form.contact-form input:-webkit-autofill:focus {
  border-bottom-color: var(--wood);
}

/* ---------- Footer ---------- */
.footer{
  background: var(--ink);
  color: rgba(235,227,207,0.70);
  border-top: none;
  padding: 40px var(--pad-x) 32px;
  position: relative;
}
/* Feine goldene Trennlinie Footer-Rand */
.footer::before{
  content:""; position:absolute;
  top:0; left:10%; right:10%;
  height:1px;
  background: linear-gradient(to right, transparent, rgba(171,143,66,0.25), transparent);
  pointer-events:none;
}
.footer-inner{
  max-width:var(--maxw); margin:0 auto;
  display:grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  font-size:13.5px;
  line-height:1.7;
}
@media (max-width:560px){ .footer-inner{ grid-template-columns:1fr } }

.footer h4{
  font-family:var(--sans); font-style:normal;
  font-weight:400; color: var(--on-dark);
  font-size:14px; letter-spacing:0.06em;
  margin-bottom:16px;
}
.footer .legal{
  grid-column: 1 / -1;
  border-top: 1px solid rgba(235,227,207,0.15);
  padding-top:24px;
  margin-top:32px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px;
  font-size:12px; letter-spacing:0.04em;
  color: rgba(235,227,207,0.50);
}
.footer a{ border-bottom:1px solid transparent; transition: border-color .2s ease, color .2s ease;}
.footer a:hover{ color:var(--wood); border-bottom-color:var(--wood); }


/* ---------- Legal pages ---------- */
.legal-page{ background: var(--bg); }
.legal-wrap{
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(120px, 14vw, 180px) var(--pad-x) clamp(80px, 10vw, 120px);
}
.legal-wrap .legal-back{
  display:inline-block;
  font-size:12px; letter-spacing:0.18em; text-transform:uppercase;
  color: var(--green);
  margin-bottom: 28px;
  border-bottom:1px solid transparent;
  transition: border-color .2s ease;
}
.legal-wrap .legal-back:hover{ border-bottom-color: var(--green); }
.legal-wrap h1{
  font-family: var(--sans);
  font-weight:400;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1;
  letter-spacing:-0.015em;
  color: var(--ink);
}
.legal-wrap .legal-sub{
  font-family: var(--sans); font-style:italic;
  color: var(--muted);
  margin-top: 12px;
  margin-bottom: 32px;
  font-size: 18px;
}
.legal-wrap .legal-hint{
  font-size: 13px;
  color: var(--ink-soft);
  background: rgba(21,35,46, 0.05);
  border-left: 2px solid var(--wood);
  padding: 12px 16px;
  margin-bottom: 32px;
  font-family: var(--sans); font-style:italic;
}
.legal-wrap h2{
  font-family: var(--sans);
  font-weight: 400;
  font-size: 22px;
  margin: 32px 0 10px;
  color: var(--ink);
}
.legal-wrap p, .legal-wrap address, .legal-wrap li{
  color: var(--ink-soft);
  font-size: 16px;
  margin-bottom: 12px;
  font-style: normal;
}
.legal-wrap address{ line-height: 1.8 }
.legal-wrap a{ color: var(--ink); border-bottom: 1px solid var(--line); transition: border-color .2s ease; }
.legal-wrap a:hover{ border-bottom-color: var(--wood); color: var(--wood); }

/* ---------- Ornament-Divider ---------- */
.section-ornament{
  display:flex;
  justify-content:center;
  padding-top: clamp(20px, 3vw, 36px);
}
.section-ornament:first-child{
  padding-top: 0;
  padding-bottom: clamp(20px, 3vw, 36px);
}
.section-ornament img{
  width: clamp(300px, 65vw, 620px);
  height: auto;
}

/* ---------- Fade-up ---------- */
.fade-up{
  opacity:0; transform: translateY(14px);
  transition: opacity .8s ease, transform .8s ease;
}
.fade-up.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .fade-up{ opacity:1; transform:none; transition:none; }
  *{scroll-behavior:auto !important}
}

/* ============================================================
   QUIET LUXURY — editorial, zeitlos, reduziert
   ============================================================ */

/* Sekundärzeilen (engl.) ruhig und aufrecht */
.section-head h2 .en,
.section-head .lede .en,
.contact .lede .en{
  font-style:normal;
  letter-spacing:0;
}

/* Body & Fließtext klarer und ruhiger */
.section-head .lede{
  font-weight:400;
  color:var(--ink-soft);
}
.card .desc{
  font-weight:300;
  color:var(--muted);
}

/* Buttons */
.nav-cta{
  border-radius:6px;
  background: var(--wood);
  color: var(--bg);
  border: 1px solid var(--wood);
  box-shadow: none;
  padding: 8px 16px;
  font-size: 10px;
  letter-spacing: 0.18em;
  margin-left: auto;
}
.nav-cta:hover{
  background: transparent;
  color: var(--wood);
  border-color: var(--wood);
}
.btn.green{ border-radius:0; }

/* Karten & Raster */
.section#privat .grid-3{
  border:1px solid var(--line-soft);
  box-shadow:0 1px 0 rgba(0,0,0,0.03), 0 20px 48px -36px rgba(0,0,0,0.22);
}
.section.enterprise .grid-3{
  background: rgba(246,241,230,0.14);
  border: 1px solid rgba(246,241,230,0.14);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 24px 52px -28px rgba(0,0,0,0.24);
}
.card .meta{ color:var(--muted); letter-spacing:0.14em; }

/* Hero */
.hero-bg .tint{
  background:linear-gradient(180deg,
    rgba(246,241,230,0.18) 0%,
    rgba(246,241,230,0.04) 45%,
    rgba(0,0,0,0.12) 100%);
  mix-blend-mode:normal;
}
.hero h1 em{ color:var(--wood); font-style:normal; font-weight:600; }
.hero .eyebrow{
  color: rgba(246,241,230,0.8);
  background: rgba(0,0,0,0.45);
  padding: 8px 16px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 0;
  letter-spacing: 0.26em;
}
.hero .eyebrow::before{ display: none; }

/* ============================================================
   NEUE SEKTIONEN: Über mich · Coaching · Card-Erweiterungen
   ============================================================ */

/* ---------- Über mich ---------- */
.ueber-mich-section{ background:var(--bg); }
.ueber-grid{
  display:grid;
  grid-template-columns: 200px 1fr clamp(180px, 20vw, 280px);
  gap: clamp(32px, 5vw, 80px);
  align-items:start;
}
.ueber-photo img{
  width:100%; height:auto; display:block;
  border-radius:2px;
}
.ueber-label{
  display:flex; flex-direction:column; gap:6px; padding-top:4px;
}
.ueber-label .eyebrow.en{
  font-style:normal; text-transform:uppercase; letter-spacing:0.22em;
  color:var(--green); font-size:11px;
}
.ueber-label .eyebrow::before{ display:none; }
.ueber-text p{
  font-size:19px; line-height:1.68; color:#505050;
  max-width:56ch; margin-bottom:0;
}
.ueber-text p + p{ margin-top:16px; }
/* EN block: no separator line, hidden in DE */
.ueber-text-en{ margin-top:0; padding-top:0; border-top:none; }
html[data-lang="de"] .ueber-text-en{ display:none; }
.ueber-text p.en{
  font-family:var(--sans); font-style:normal;
  font-size:19px; color:#505050; line-height:1.68;
  font-weight:400;
}
@media (max-width:780px){
  .ueber-grid{ grid-template-columns:1fr; gap:20px; }
  .ueber-label{ flex-direction:row; align-items:center; gap:12px; }
  .ueber-label .eyebrow::before{ display:inline-block; }
  .ueber-photo{ max-width:200px; margin-top:8px; margin-left:auto; margin-right:auto; }
}

/* ---------- Coaching-Sektion ---------- */
.section.coaching{
  background: #C2BAB0;
  border-top: none;
}
.section.coaching .section-head h2{ color: var(--ink); }
.section.coaching .section-head h2 em{ color: var(--wood); }
.section.coaching .section-head .lede{ color: var(--ink-soft); }
.section.coaching .section-head .lede .en{ color: var(--muted); }
.section.coaching .eyebrow{ color: var(--wood); }
.section.coaching .eyebrow::before{ background: var(--wood); }
.section.coaching .enterprise-cta .hint{ color: var(--muted); }
.section.coaching .enterprise-cta .btn{
  background: var(--wood);
  color: var(--bg);
  border-color: var(--wood);
}
.section.coaching .enterprise-cta .btn:hover{
  background: transparent;
  color: var(--wood);
  border-color: var(--wood);
}
.section.coaching .card{ background: var(--bg); }
.section.coaching .card:hover{ background: var(--bg-2); }
.section.coaching .grid-3{
  background: rgba(0,0,0,0.07);
  border: 1px solid rgba(0,0,0,0.10);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08), 0 16px 40px -20px rgba(0,0,0,0.18);
}

/* ---------- Card-Erweiterungen ---------- */

/* Englische Beschreibung */
.card .desc-en{
  margin-top:12px;
  font-family:var(--sans); font-style:normal; font-weight:300;
  font-size:15px; color:var(--muted);
  line-height:1.7;
}

/* Coaching: Subtitle (1:1 / Intro Session) */
.card-subtitle{
  display:inline-block;
  margin-top:8px;
  font-size:10px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--wood); font-family:var(--sans);
  opacity:0.75;
}

/* Coaching: Ideal-für Hinweis */
.card .desc-ideal{
  margin-top:10px;
  font-size:13px; color:var(--muted);
  font-style:normal; font-family:var(--sans);
  letter-spacing:0.01em;
}

/* Preis – Einzelpreis */
.card .meta{
  margin-top:36px;
  display:flex; flex-direction:column; gap:4px;
}
.card .meta .price-label{
  font-size:9px; letter-spacing:0.26em; text-transform:uppercase;
  color:var(--muted); font-family:var(--sans);
}
.card .meta .price-label-en{
  margin-top:12px;
  color:rgba(0,0,0,0.28);
}
.card .meta .price-amount{
  font-family:var(--sans); font-style:normal; font-weight:300;
  font-size:22px; color:var(--ink); line-height:1.2;
  letter-spacing:-0.01em;
  margin-top:2px;
}
.card .meta .price-en{
  font-size:16px; font-weight:300; color:var(--muted);
  margin-top:2px;
}

/* Preis – Mehrstufig */
.card .price-list{
  margin-top:36px;
  display:flex; flex-direction:column; gap:0;
}
.card .price-list .price-label{
  font-size:9px; letter-spacing:0.26em; text-transform:uppercase;
  color:var(--muted); font-family:var(--sans);
  margin-bottom:10px;
}
.card .price-list .price-label-en{
  margin-top:14px; margin-bottom:8px;
  color:rgba(0,0,0,0.28);
}
.card .pi{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:7px 0;
  border-bottom:1px solid var(--line-soft);
  gap:12px;
}
.card .pi:last-of-type{ border-bottom:none; }
.card .pi-en{ opacity:0.55; }
.card .pi .pi-l{
  font-size:13px; color:var(--ink-soft); letter-spacing:0.01em;
}
.card .pi .pi-a{
  font-family:var(--sans); font-style:normal; font-weight:300;
  font-size:17px; color:var(--ink);
  white-space:nowrap;
}
.card .pi-en .pi-l{ font-size:12px; color:var(--muted); }
.card .pi-en .pi-a{ font-size:15px; color:var(--muted); }

/* ============================================================
   BURGER MENU
   ============================================================ */
.burger{
  display:none;
  flex-direction:column; justify-content:center; align-items:center;
  gap:5px;
  width:36px; height:36px;
  background:none; border:none; cursor:pointer;
  padding:4px;
  z-index:200;
}
.burger span{
  display:block; width:22px; height:1px;
  background: var(--bg);
  transition: transform .25s ease, opacity .25s ease;
}
.burger.open span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }
@media (max-width:1000px){ .burger{ display:flex; } }

.mobile-nav{
  position:fixed; inset:0; z-index:150;
  background: #000000;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:0;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.77,0,.18,1);
}
.mobile-nav.open{ transform: translateX(0); }
.mobile-nav ul{ list-style:none; text-align:center; }
.mobile-nav ul li{ padding: 14px 0; }
.mobile-nav-link{
  font-size: clamp(28px, 8vw, 52px);
  font-weight:300;
  letter-spacing:-0.02em;
  color: var(--on-dark);
  opacity:0.85;
  transition: opacity .2s, color .2s;
}
.mobile-nav-link:hover{ opacity:1; color: var(--wood); }
.mobile-nav-close{
  position:absolute; top:24px; right:24px;
  background:none; border:none; cursor:pointer;
  font-size:24px; color: rgba(235,227,207,0.50);
  transition: color .2s;
}
.mobile-nav-close:hover{ color: var(--on-dark); }
.mobile-nav-backdrop{
  display:none;
}

/* ============================================================
   LANGUAGE SWITCHER – pill toggle
   ============================================================ */

/* Desktop: pill control pushed to far right */
.nav > .lang-switch{
  margin-left: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: rgba(246,241,230,0.07);
  border: 1px solid rgba(246,241,230,0.14);
  border-radius: 4px;
  padding: 3px;
  gap: 0;
}
.lang-sep{ display: none; }
.lang-btn{
  background: transparent; border: none; cursor: pointer;
  font-family: var(--sans);
  font-size: 10px; letter-spacing: 0.16em; font-weight: 500;
  color: rgba(246,241,230,0.35);
  padding: 5px 12px;
  border-radius: 2px;
  transition: background .2s, color .2s;
  text-align: center; white-space: nowrap;
}
.lang-btn:hover{ color: rgba(246,241,230,0.7); }
.lang-btn.active{
  background: rgba(246,241,230,0.18);
  color: var(--bg);
}

/* Hide main-nav pill on mobile – lang switch lives in burger overlay */
@media (max-width: 860px){
  .nav > .lang-switch{ display: none; }
}

/* Mobile nav lang switch – keep readable */
.mobile-nav .lang-switch{
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: rgba(246,241,230,0.07);
  border: 1px solid rgba(246,241,230,0.14);
  border-radius: 4px;
  padding: 3px;
  max-width: 120px;
}
.mobile-nav .lang-btn{
  font-size: 13px; letter-spacing: 0.14em;
  color: rgba(246,241,230,0.4);
  padding: 8px 14px;
}
.mobile-nav .lang-btn.active{
  background: rgba(246,241,230,0.18);
  color: var(--bg);
}
.mobile-nav .lang-sep{ display: none; }

/* ============================================================
   DE / EN LANGUAGE VISIBILITY
   ============================================================ */

/* Default (DE): hide all .en content */
html[data-lang="de"] .en { display: none !important; }

/* EN mode: hide all .de content, show .en */
html[data-lang="en"] .de { display: none !important; }
html[data-lang="en"] .en { display: block; }
html[data-lang="en"] span.en,
html[data-lang="en"] em.en { display: inline; }

/* In EN mode, .en spans inside headings should look like normal heading text */
html[data-lang="en"] .section-head h2 span.en{
  display: block;
  font-size: 1em;
  color: inherit;
  font-style: normal;
  letter-spacing: inherit;
  margin-top: 0;
}
html[data-lang="en"] .section-head h2 em.en{
  display: inline;
  font-size: 1em;
  color: var(--wood);
}
html[data-lang="en"] .contact h2 span.en{
  display: block;
  font-size: 1em;
  color: inherit;
  margin-top: 0;
}

/* In EN mode, lede .en spans look like normal lede text */
html[data-lang="en"] .lede span.en{
  display: inline;
  font-size: inherit;
  color: inherit;
  font-style: normal;
  margin-top: 0;
}

/* In EN mode, eyebrow .en spans */
html[data-lang="en"] .eyebrow span.en{
  display: inline;
  font-size: inherit;
  color: inherit;
}

/* hint spans */
html[data-lang="en"] .hint.en{ display:inline; }
html[data-lang="de"] .hint.en{ display:none !important; }
html[data-lang="en"] .hint.de{ display:none !important; }

/* Hero h1: DE/EN spans inherit heading styles */
.hero h1 span.de,
.hero h1 span.en{ display:block; }

/* ============================================================
   PREIS-TOGGLE — eingeklappt / ausgeklappt
   ============================================================ */
.price-toggle{
  margin-top: 32px;
  border-top: 1px solid var(--line-soft);
}
.price-toggle-btn{
  display:flex; width:100%; gap:10px;
  align-items:center;
  background:none; border:none;
  padding: 12px 0 0;
  cursor:pointer;
  transition: color .2s ease;
}
.price-toggle-btn:hover .ptb-label{ color:var(--wood); }
.ptb-label{
  font-family:var(--sans);
  font-size:9px; letter-spacing:0.26em; text-transform:uppercase;
  color:var(--muted);
  white-space:nowrap;
  transition: color .2s ease;
}
.ptb-value{
  font-family:var(--sans); font-style:normal; font-weight:300;
  font-size:18px; color:var(--ink); letter-spacing:-0.01em;
  flex:1; text-align:right; padding-right:10px;
}
.price-toggle-chevron{
  flex-shrink:0;
  width:8px; height:8px;
  border-right:1.5px solid var(--muted);
  border-bottom:1.5px solid var(--muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .25s ease, border-color .2s ease;
}
.price-toggle-btn:hover .price-toggle-chevron{ border-color:var(--wood); }
.price-toggle[data-open="true"] .price-toggle-chevron{
  transform: rotate(-135deg) translateY(2px);
}
.price-body{
  max-height:0;
  overflow:hidden;
  transition: max-height .35s ease;
}
.price-toggle[data-open="true"] .price-body{
  max-height:320px;
}
/* Inner meta: compact spacing inside price-body */
.price-body .meta,
.price-body .price-list{
  margin-top:12px !important;
}
.price-body .meta::before{ display:none !important; }

/* Taupe sections: price toggle uses default ink colours (cards are beige = fine) */

/* ---------- Card Detail ("Mehr Informationen") ---------- */
.card-detail {
  margin-top: 20px;
}
.card-detail-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green);
  transition: opacity .2s ease;
}
.card-detail-btn:hover { opacity: 0.65; }
.card-detail-chevron {
  flex-shrink: 0;
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--green);
  border-bottom: 1.5px solid var(--green);
  transform: rotate(45deg) translateY(-1px);
  transition: transform .25s ease;
}
.card-detail[data-open="true"] .card-detail-chevron {
  transform: rotate(-135deg) translateY(1px);
}
.card-detail-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease;
}
.card-detail[data-open="true"] .card-detail-body {
  max-height: 500px;
}
.card-detail-body p {
  margin-top: 16px;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 34ch;
  font-weight: 300;
}

/* Mobile: Toggle-Button in-flow anzeigen; Body bleibt versteckt – JS baut Sheet an body */
@media (max-width: 900px) {
  .stack-wrap .card .card-detail {
    display: block;
    margin-top: 14px;
  }
  .stack-wrap .card .card-detail-body {
    display: none !important;
  }
}

/* ── Bottom Sheet (per JS an document.body gehängt → außerhalb GSAP-Transform-Kontext) */
.card-detail-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  background: var(--bg);
  padding: 52px var(--pad-x) max(32px, env(safe-area-inset-bottom)) var(--pad-x);
  border-top: 2px solid var(--wood);
  box-shadow: 0 -12px 48px rgba(0,0,0,0.22);
  transform: translateY(110%);
  max-height: 62vh;
  overflow-y: auto;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.card-detail-sheet.open {
  transform: translateY(0);
}
.card-detail-sheet p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-soft);
  font-weight: 300;
  max-width: none;
  margin: 0;
}
.card-detail-sheet .sheet-close {
  position: absolute;
  top: 14px;
  right: var(--pad-x);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  color: var(--muted);
  padding: 6px 8px;
  line-height: 1;
  transition: color .2s ease;
}
.card-detail-sheet .sheet-close:hover { color: var(--ink); }

/* Backdrop */
.card-detail-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0);
  z-index: 499;
  transition: background .35s ease;
}
.card-detail-backdrop.visible {
  background: rgba(0,0,0,0.45);
}

/* ---------- Über mich: Expand / Mehr lesen ---------- */
.ueber-expand{ margin-top: 28px; }
.ueber-expand-btn{
  display:flex; align-items:center; gap:10px;
  background:none; border:none; padding:0;
  cursor:pointer;
  font-family:var(--sans);
  font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--green);
  transition: opacity .2s ease;
}
.ueber-expand-btn:hover{ opacity:0.65; }
.ueber-expand-chevron{
  flex-shrink:0;
  width:7px; height:7px;
  border-right:1.5px solid var(--green);
  border-bottom:1.5px solid var(--green);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .25s ease;
}
.ueber-expand[data-open="true"] .ueber-expand-chevron{
  transform: rotate(-135deg) translateY(2px);
}
.ueber-expand-body{
  max-height:0; overflow:hidden;
  transition: max-height .7s ease;
}
.ueber-expand[data-open="true"] .ueber-expand-body{
  max-height: 9000px;
}
.ueber-expand-body p{
  margin-top:24px;
  font-size:19px; line-height:1.72; color:#505050;
  max-width:56ch;
}
.ueber-expand-body p + p{ margin-top:20px; }

/* Walk with her — stiller Nachhall */
.ueber-walkwithher{
  margin-top: clamp(64px, 9vw, 108px) !important;
  margin-bottom: 8px;
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-size: 15px !important;
  color: var(--muted) !important;
  opacity: 0.55;
  letter-spacing: 0.05em;
  line-height: 1.4 !important;
  max-width: none !important;
  font-weight: 300 !important;
}

/* ---------- Powered by ---------- */
.powered-by{
  font-size:11px; color:rgba(235,227,207,0.28);
  letter-spacing:0.03em; width:100%; margin-top:4px;
}
.powered-by a{
  color:#FF0063;
  border-bottom:1px solid transparent;
  transition: color .2s, border-color .2s;
}
.powered-by a:hover{ color:#FF0063; border-bottom-color:#FF0063; opacity:0.8; }

/* ---------- Preis direkt (Einzelpreis, kein Toggle) ---------- */
.price-direct{
  margin-top: 32px;
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
  display:flex; align-items:baseline; gap:10px;
}
.pd-label{
  font-family:var(--sans);
  font-size:9px; letter-spacing:0.26em; text-transform:uppercase;
  color:var(--muted);
  white-space:nowrap;
}
.pd-value{
  font-family:var(--sans); font-style:normal; font-weight:300;
  font-size:18px; color:var(--ink); letter-spacing:-0.01em;
  flex:1; text-align:right;
}

/* ── Card animations ────────────────────────────────────────────── */

/* Desktop: staggered fly-in */
@media (min-width: 901px) {
  .grid-3 .card:nth-child(2).fade-up { transition-delay: 0.12s; }
  .grid-3 .card:nth-child(3).fade-up { transition-delay: 0.24s; }
}

/* ── Mobile: GSAP Card Stacking (wie hr-commerce.de) ── */
@media (max-width: 900px) {

  /* Scroll-Raum — Höhe wird via JS gesetzt (n × 100vh) */
  .stack-outer {
    position: relative;
  }

  /* Sticky Container: vertikal zentriert im Viewport */
  .stack-inner {
    position: sticky;
    top: max(66px, calc((100vh - clamp(340px, 62vh, 460px)) / 2));
    height: clamp(340px, 62vh, 460px);
    overflow: hidden;
  }

  /* Karten-Wrapper: Referenzfläche für absolute Positionierung */
  .stack-wrap {
    position: relative;
    height: 100%;
  }

  /* Jede Karte füllt den Wrap komplett */
  .stack-wrap .card {
    position: absolute;
    inset: 0;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: clamp(32px, 7vw, 52px);
    margin-bottom: 0;
    will-change: transform;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.14);
  }
  .stack-wrap .card:nth-child(1) { z-index: 1; }
  .stack-wrap .card:nth-child(2) { z-index: 2; }
  .stack-wrap .card:nth-child(3) { z-index: 3; }

  /* Nummer oben fixieren */
  .stack-wrap .card .idx {
    position: absolute;
    top: clamp(20px, 4vw, 32px);
    left: clamp(24px, 6vw, 40px);
  }

  /* fade-up deaktivieren — GSAP setzt transform via Inline-Style, kein CSS-Override */
  .stack-wrap .card.fade-up,
  .stack-wrap .card.fade-up.in {
    opacity: 1 !important;
    transition: none !important;
  }

  /* Karten-Inhalte immer sichtbar (kein sequenzielles Einblenden auf mobile) */
  .stack-wrap .card h3,
  .stack-wrap .card .card-subtitle,
  .stack-wrap .card .desc,
  .stack-wrap .card .price-toggle,
  .stack-wrap .card .price-direct {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}