/* VEWI – helle, statische Landingpage */
:root{
  --ink:#3d3c3c;
  --logo-gray:#646363;
  --muted:#777370;
  --gold:#cdbd8a;
  --gold-deep:#aa9863;
  --white:#ffffff;
  --paper:#faf9f6;
  --paper-2:#f4f1e9;
  --line:#e6e0d4;
  --shadow:0 28px 80px rgba(63,57,46,.10);
  --max:1260px;
  --header:94px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,textarea{font:inherit}
.container{width:min(calc(100% - 56px),var(--max));margin-inline:auto}
.eyebrow{display:flex;align-items:center;gap:14px;color:var(--logo-gray);font-size:.72rem;font-weight:700;letter-spacing:.20em;text-transform:uppercase}
.eyebrow::before{content:"";width:38px;height:1px;background:var(--gold)}
h1,h2,h3{margin:0;font-family:Georgia,"Times New Roman",serif;font-weight:400;line-height:1.05;color:var(--logo-gray)}
h1{font-size:clamp(3.3rem,7.2vw,7.1rem);letter-spacing:-.045em}
h2{font-size:clamp(2.25rem,4.5vw,4.7rem);letter-spacing:-.035em}
h3{font-size:clamp(1.4rem,2vw,2rem)}
p{margin:0 0 1rem;color:var(--muted)}
.lead{font-size:clamp(1.08rem,1.55vw,1.32rem);line-height:1.8}
.gold{color:var(--gold-deep)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:50px;padding:14px 21px;border:1px solid var(--gold);background:var(--white);color:var(--logo-gray);font-size:.73rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;transition:transform .3s ease,box-shadow .3s ease,background .3s ease,color .3s ease}
.btn::after{content:"→";font-size:1rem;transition:transform .3s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(69,62,50,.09)}
.btn:hover::after{transform:translateX(5px)}
.btn-gold{background:var(--gold);border-color:var(--gold);color:#353331}
.btn-gold:hover{background:#d7c99d}
.btn-soft{background:var(--paper);border-color:var(--line)}

.site-header{position:fixed;z-index:100;inset:0 0 auto;height:var(--header);display:flex;align-items:center;background:rgba(255,255,255,.95);border-bottom:1px solid rgba(205,189,138,.18);backdrop-filter:blur(14px);transition:height .35s ease,box-shadow .35s ease}
.site-header.scrolled{height:76px;box-shadow:0 10px 40px rgba(63,57,46,.06)}
.site-header .inner{width:min(calc(100% - 56px),1400px);margin:auto;display:flex;align-items:center;justify-content:space-between;gap:30px}
.brand{display:block;flex:0 0 auto}
.brand img{width:260px;height:auto;transition:width .35s ease;filter:none!important}
.site-header.scrolled .brand img{width:225px}
.nav{display:flex;align-items:center;gap:34px}
.nav a{position:relative;color:var(--logo-gray);font-size:.70rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-8px;height:1px;background:var(--gold);transition:right .3s ease}
.nav a:hover::after,.nav a.active::after{right:0}
.nav .contact-link{padding:11px 15px;border:1px solid var(--gold)}
.menu-btn{display:none;border:0;background:transparent;padding:8px;cursor:pointer}
.menu-btn span{display:block;width:27px;height:1px;background:var(--logo-gray);margin:6px 0;transition:.3s ease}

.hero{padding-top:var(--header);min-height:100svh;background:var(--white);display:flex;align-items:stretch}
.hero-stage{width:100%;position:relative;display:flex;align-items:flex-end;min-height:calc(100svh - var(--header));background:url('../img/hero-hamburg.jpg') center center/cover no-repeat;overflow:hidden}
.hero-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.03) 35%,rgba(255,255,255,.26) 100%);pointer-events:none}
.hero-card{display:none;position:relative;z-index:2;width:min(780px,calc(100% - 80px));margin:0 0 56px max(40px,calc((100vw - var(--max))/2));padding:46px 50px 44px;background:rgba(255,255,255,.94);box-shadow:var(--shadow);border-top:3px solid var(--gold)}
.hero-card h1{margin-top:22px;font-size:clamp(3.25rem,6vw,6.2rem)}
.hero-card h1 span{color:var(--gold-deep)}
.hero-card .lead{max-width:650px;margin:25px 0 30px;color:#686461}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.hero-mark{position:absolute;right:42px;bottom:26px;z-index:2;color:rgba(255,255,255,.95);font-family:Georgia,"Times New Roman",serif;font-size:clamp(3rem,7vw,7rem);letter-spacing:-.07em;text-shadow:0 2px 18px rgba(0,0,0,.16);user-select:none}

.intro{padding:140px 0 120px;background:var(--white)}
.intro-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:90px;align-items:start}
.intro-copy{max-width:760px}
.intro-copy .lead{margin-top:30px}
.fine-rule{margin-top:54px;border-top:1px solid var(--line)}

.services{padding:120px 0;background:var(--paper)}
.section-head{display:grid;grid-template-columns:1fr .75fr;gap:80px;align-items:end;margin-bottom:58px}
.section-head .lead{max-width:520px;justify-self:end}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{position:relative;min-height:355px;padding:38px 34px;background:var(--white);border:1px solid var(--line);overflow:hidden;transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.card:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:rgba(205,189,138,.65)}
.card .number{font-family:Georgia,"Times New Roman",serif;font-size:4.5rem;line-height:1;color:rgba(205,189,138,.27);margin-bottom:55px}
.card h3{margin-bottom:18px}
.card::after{content:"";position:absolute;left:34px;bottom:34px;width:44px;height:1px;background:var(--gold)}

.split{display:grid;grid-template-columns:1.06fr .94fr;background:var(--white);min-height:660px}
.split-media{min-height:560px;background:url('../img/hero-hamburg.jpg') 76% center/cover no-repeat}
.split-copy{display:flex;flex-direction:column;justify-content:center;padding:95px 8vw;background:var(--white)}
.split-copy h2{margin-top:22px}
.split-copy .lead{margin:28px 0 30px;max-width:580px}

.values{padding:125px 0;background:var(--paper-2)}
.values-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:90px;align-items:start}
.values-list{border-top:1px solid rgba(170,152,99,.35)}
.value{display:grid;grid-template-columns:60px 1fr;gap:22px;padding:25px 0;border-bottom:1px solid rgba(170,152,99,.35)}
.value .nr{font-family:Georgia,"Times New Roman",serif;color:var(--gold-deep);font-size:1.35rem;font-style:italic}
.value h3{font-size:1.45rem;margin-bottom:6px}
.value p{margin:0}

.process{padding:125px 0;background:var(--white)}
.process h2{margin-top:20px}
.steps{margin-top:55px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.step{padding:35px 32px 40px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.step .nr{font-family:Georgia,"Times New Roman",serif;font-size:2rem;color:var(--gold-deep);margin-bottom:46px}
.step p{margin-top:15px}

.cta{padding:110px 0;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cta-grid{display:grid;grid-template-columns:1fr auto;gap:60px;align-items:end}
.cta h2{margin-top:20px}
.cta .email{display:inline-block;margin-top:24px;font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.25rem,2vw,2rem);color:var(--gold-deep);border-bottom:1px solid rgba(170,152,99,.35)}

.footer{background:var(--white);padding:58px 0 28px;color:var(--muted)}
.footer-top{display:grid;grid-template-columns:1.4fr .7fr .8fr;gap:70px;padding-bottom:42px;border-bottom:1px solid var(--line)}
.footer-logo{width:255px;filter:none!important}
.footer h4{margin:0 0 15px;color:var(--logo-gray);font-size:.69rem;letter-spacing:.16em;text-transform:uppercase}
.footer a{display:block;margin:8px 0;font-size:.9rem}
.footer a:hover{color:var(--gold-deep)}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:24px;font-size:.75rem}

.page-hero{padding:calc(var(--header) + 85px) 0 75px;background:var(--paper);border-bottom:1px solid var(--line)}
.page-hero h1{font-size:clamp(3rem,6vw,5.8rem);margin-top:20px}
.page-hero p{max-width:700px;margin-top:24px;font-size:1.12rem}
.page-content{padding:90px 0 120px;background:#fff}
.prose,.legal{max-width:980px}
.legal h2{font-size:1.8rem;line-height:1.25;margin:46px 0 15px}
.legal h3{font-size:1.28rem;line-height:1.35;margin:30px 0 12px}
.legal p,.legal li{font-size:.98rem;color:#5f5b58}
.legal a{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}
.legal ul,.legal ol{padding-left:24px}

.contact-layout{display:grid;grid-template-columns:.86fr 1.14fr;gap:78px;align-items:start}
.contact-panel{padding:42px;background:var(--paper);border:1px solid var(--line)}
.contact-panel h2{font-size:clamp(2.1rem,4vw,3.7rem);margin:22px 0 34px}
.contact-panel strong{display:block;margin-bottom:8px;color:var(--logo-gray);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase}
.contact-panel a{font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.15rem,2vw,1.5rem);color:var(--gold-deep)}
.contact-panel p{margin-bottom:30px}
.contact-form{display:grid;gap:18px}
.contact-form label{display:block;margin-bottom:6px;color:var(--logo-gray);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.contact-form input,.contact-form textarea{width:100%;padding:14px 0;border:0;border-bottom:1px solid #cfc7b7;background:transparent;color:var(--ink);outline:none;border-radius:0}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--gold-deep)}
.contact-form textarea{min-height:140px;resize:vertical}
.contact-form .note{font-size:.78rem;color:#817c77}
.contact-form button{justify-self:start}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,1,.36,1)}
.reveal.visible{opacity:1;transform:none}
.line-reveal{overflow:hidden}
.line-reveal>*{transform:translateY(105%);transition:transform .95s cubic-bezier(.22,1,.36,1)}
.line-reveal.visible>*{transform:none}

@media(max-width:1020px){
  :root{--header:80px}
  .container{width:min(calc(100% - 40px),var(--max))}
  .site-header .inner{width:calc(100% - 40px)}
  .brand img,.site-header.scrolled .brand img{width:210px}
  .nav{position:fixed;inset:0;background:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:28px;transform:translateX(100%);transition:transform .35s ease}
  .nav.open{transform:none}
  .nav a{font-size:.95rem}
  .menu-btn{display:block;position:relative;z-index:2}
  .brand{position:relative;z-index:2}
  .intro-grid,.section-head,.split,.values-grid,.contact-layout{grid-template-columns:1fr}
  .intro-grid,.section-head,.values-grid,.contact-layout{gap:45px}
  .section-head .lead{justify-self:start}
  .cards,.steps{grid-template-columns:1fr 1fr}
  .split-copy{padding:75px 6vw}
  .cta-grid{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .container{width:calc(100% - 30px)}
  .site-header .inner{width:calc(100% - 30px)}
  .brand img,.site-header.scrolled .brand img{width:168px}
  .hero-stage{min-height:760px;background-position:58% center;align-items:flex-end}
  .hero-card{width:calc(100% - 30px);margin:0 15px 20px;padding:31px 25px 30px}
  .hero-card h1{font-size:clamp(3rem,15vw,4.7rem)}
  .hero-mark{display:none}
  .hero-actions{display:grid;grid-template-columns:1fr}.hero-actions .btn{width:100%}
  .intro,.services,.values,.process{padding:88px 0}
  .cards,.steps{grid-template-columns:1fr}
  .card{min-height:310px}
  .split-media{min-height:370px}
  .split-copy{padding:60px 25px}
  .value{grid-template-columns:45px 1fr}
  .cta{padding:80px 0}
  .footer-top{grid-template-columns:1fr;gap:34px}
  .footer-bottom{flex-direction:column}
  .footer-logo{width:210px}
  .page-hero{padding:calc(var(--header) + 58px) 0 56px}
  .page-content{padding:70px 0 90px}
  .contact-panel{padding:30px 24px}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}.line-reveal>*{transform:none}
}

/* ---------------------------------------------------------
   VEWI – reduzierte Startseite
   --------------------------------------------------------- */
.minimal-home{background:#fff}
.minimal-home .hero-minimal{min-height:100svh}
.minimal-home .hero-minimal .hero-stage{min-height:calc(100svh - var(--header));align-items:center}
.minimal-home .hero-card-minimal{margin-top:42px;margin-bottom:42px;padding-top:44px;padding-bottom:44px;max-width:700px}
.minimal-home .hero-card-minimal h1{font-size:clamp(2.35rem,4.2vw,4.35rem);line-height:1.08;letter-spacing:-.035em}
.minimal-home .hero-card-minimal .lead{margin:20px 0 0;max-width:600px;font-size:clamp(.96rem,1.15vw,1.08rem);line-height:1.7}

@media (max-width: 720px){
  .minimal-home .hero-minimal .hero-stage{min-height:calc(100svh - var(--header));align-items:flex-end}
  .minimal-home .hero-card-minimal{margin:0 15px 20px;padding:28px 24px 30px}
  .minimal-home .hero-card-minimal h1{font-size:clamp(2.15rem,10vw,3rem);line-height:1.08}
  .minimal-home .hero-card-minimal .lead{margin-top:16px;font-size:.96rem;line-height:1.6}
}

/* Fix: Unterlängen der Hero-Headline (z. B. das „g“ in „gedacht“) nicht abschneiden */
.minimal-home .hero-card-minimal .line-reveal{
  padding-bottom:.20em;
  margin-bottom:-.20em;
}
.minimal-home .hero-card-minimal h1{
  padding-bottom:.04em;
}

/* Kontaktseite: Formular über die volle Containerbreite */
.contact-page{padding-top:90px}
.contact-form-wrap{width:100%;max-width:none}
.contact-page .contact-form{width:100%;display:grid;gap:26px}
.contact-page .contact-form>div{width:100%}
.contact-page .contact-form label{margin-bottom:8px}
.contact-page .contact-form input,.contact-page .contact-form textarea{display:block;width:100%;padding:15px 0}
.contact-page .contact-form textarea{min-height:190px}
.contact-page .contact-form .note{max-width:720px;margin:5px 0 0}
.contact-page .contact-form button{margin-top:4px}
@media(max-width:680px){.contact-page{padding-top:65px}.contact-page .contact-form{gap:22px}.contact-page .contact-form textarea{min-height:165px}}

/* Kontakt ohne Hero: Abstand zum festen Header und Trennlinie vor dem Footer */
.contact-page{padding-top:calc(var(--header) + 70px);border-bottom:1px solid var(--line)}
@media(max-width:680px){.contact-page{padding-top:calc(var(--header) + 45px)}}