/* ============================================================
   ESCH Objektkonzepte — Landing v2
   editorial, dynamisch, mit Effekten, ohne SaaS-Klischees
   ============================================================ */
:root{
  --c-petrol:#264963; --c-ziegel:#BD3D32; --c-schiefer:#7B96A1;
  --petrol-50:#EDF1F5; --petrol-100:#D3DDE5; --petrol-200:#A7BACC;
  --petrol-300:#7B96B2; --petrol-400:#4F7299; --petrol-500:#264963;
  --petrol-600:#1E3A4F; --petrol-700:#162C3B; --petrol-800:#0E1D28; --petrol-900:#060F14;
  --ziegel-500:#BD3D32; --ziegel-600:#962F27; --ziegel-50:#FBEDEB;
  --schiefer-200:#BAC9CE; --schiefer-400:#7B96A1; --schiefer-500:#5E7C88; --schiefer-700:#374950;
  --paper:#FAFAF7; --paper-warm:#F2EFE8;
  --stone-100:#ECEAE3; --stone-200:#D8D4C8; --stone-300:#B8B3A4; --stone-500:#8A8478; --stone-700:#4D4940;
  --ink:#1A1A18; --white:#FFFFFF;
  --ff-display:"esch",-apple-system,BlinkMacSystemFont,sans-serif;
  --ff-body:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif;
  --ff-mono:"Roboto",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--ff-body); font-size:16px; line-height:1.625;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
.shell{max-width:1320px; margin:0 auto; padding:0 clamp(20px,4vw,56px)}
.section{padding:clamp(72px,10vw,128px) 0; position:relative}

/* ---------- Type ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--ff-body); font-weight:500;
  font-size:11px; line-height:14px; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--c-ziegel);
}
.eyebrow::before{
  content:""; width:24px; height:1px; background:currentColor;
}
.eyebrow.muted{color:var(--schiefer-500)}
.eyebrow.on-petrol{color:var(--schiefer-200)}
.eyebrow.on-petrol::before{background:var(--ziegel-500)}
h1,h2,h3,h4,blockquote{
  font-family:var(--ff-display); font-weight:400;
  font-variation-settings:"opsz" 144;
  color:var(--c-petrol); margin:0; text-wrap:balance;
}
h1 em,h2 em,h3 em,blockquote em{
  font-style:italic; color:var(--c-ziegel);
  font-variation-settings:"opsz" 144,"SOFT" 50;
}
.display-xl{font-size:clamp(40px,6.2vw,88px); line-height:1; letter-spacing:-0.025em}
.display{font-size:clamp(40px,5.6vw,72px); line-height:1.02; letter-spacing:-0.025em}
h2.h{font-size:clamp(30px,4vw,52px); line-height:1.06; letter-spacing:-0.02em}
h3.h{font-size:clamp(22px,2.4vw,28px); line-height:1.2; letter-spacing:-0.01em}
h4.h{font-size:20px; line-height:1.35}
.lead{font-size:19px; line-height:1.65; color:var(--stone-700); max-width:60ch; text-wrap:pretty}
p{text-wrap:pretty}
::selection{background:var(--c-petrol); color:var(--white)}

/* ---------- Buttons ---------- */
.btn{
  position:relative; isolation:isolate;
  font-family:var(--ff-body); font-size:13px; font-weight:500;
  letter-spacing:0.06em; text-transform:uppercase;
  padding:18px 28px; background:var(--c-petrol); color:var(--white);
  border:1px solid var(--c-petrol); border-radius:0;
  display:inline-flex; align-items:center; gap:14px;
  cursor:pointer; overflow:hidden;
  transition:color .35s var(--ease), border-color .35s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--petrol-700); transform:translateY(101%);
  transition:transform .45s var(--ease);
}
.btn:hover::before{transform:translateY(0)}
.btn-accent{background:var(--c-ziegel); border-color:var(--c-ziegel)}
.btn-accent::before{background:var(--ziegel-600)}
.btn-secondary{background:transparent; color:var(--c-petrol)}
.btn-secondary::before{background:var(--c-petrol)}
.btn-secondary:hover{color:var(--white); border-color:var(--c-petrol)}
.btn-light{background:transparent; color:var(--white); border-color:var(--white)}
.btn-light::before{background:var(--white)}
.btn-light:hover{color:var(--c-petrol)}
.btn .arrow{width:20px; height:1px; background:currentColor; position:relative; transition:width .35s var(--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:30px}

.link-arrow{
  display:inline-flex; align-items:center; gap:12px;
  font-size:13px; letter-spacing:0.06em; text-transform:uppercase; font-weight:500;
  color:var(--c-petrol); padding:10px 0;
  border-bottom:1px solid var(--stone-200);
  transition:gap .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.link-arrow:hover{gap:22px; border-color:var(--c-petrol); color:var(--c-ziegel)}
.link-arrow .arrow{width:22px; height:1px; background:currentColor; position:relative; transition:width .35s var(--ease)}
.link-arrow .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)}
.link-arrow:hover .arrow{width:30px}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.reveal.in{opacity:1; transform:none}
.reveal-stagger > *{opacity:0; transform:translateY(20px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal-stagger.in > *{opacity:1; transform:none}
.reveal-stagger.in > *:nth-child(1){transition-delay:0ms}
.reveal-stagger.in > *:nth-child(2){transition-delay:80ms}
.reveal-stagger.in > *:nth-child(3){transition-delay:160ms}
.reveal-stagger.in > *:nth-child(4){transition-delay:240ms}
.reveal-stagger.in > *:nth-child(5){transition-delay:320ms}
.reveal-stagger.in > *:nth-child(6){transition-delay:400ms}

/* Word reveal */
.split-word{display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:0.05em}
.split-word > span{display:inline-block; transform:translateY(110%); transition:transform 1.1s var(--ease)}
.reveal.in .split-word > span{transform:none}
.split-word:nth-child(2) > span{transition-delay:80ms}
.split-word:nth-child(3) > span{transition-delay:160ms}
.split-word:nth-child(4) > span{transition-delay:240ms}
.split-word:nth-child(5) > span{transition-delay:320ms}
.split-word:nth-child(6) > span{transition-delay:400ms}
.split-word:nth-child(7) > span{transition-delay:480ms}

/* ---------- Placeholder images (architecture-suggestive) ---------- */
.ph{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--paper-warm);
  border:1px solid var(--stone-200);
}
.ph .ph-art{position:absolute; inset:0; background-repeat:no-repeat; background-size:cover; background-position:center}
.ph::after{
  content:attr(data-label); position:absolute;
  left:14px; bottom:12px; z-index:3;
  font-family:var(--ff-mono); font-size:10px; letter-spacing:0.08em;
  color:var(--schiefer-700);
  background:rgba(250,250,247,0.94); padding:5px 9px;
  border:1px solid var(--stone-200);
  text-transform:uppercase;
}
.ph .ph-tone{position:absolute; inset:0; z-index:2; mix-blend-mode:multiply; opacity:.92}

/* Hover ken-burns */
.ph.zoom .ph-art{transition:transform 1.4s var(--ease), filter 1s var(--ease)}
.ph.zoom:hover .ph-art{transform:scale(1.06)}

/* Decorative noise overlay */
.ph::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
}

/* Variation tones for placeholders */
.ph.tone-petrol .ph-tone{background:linear-gradient(180deg, rgba(38,73,99,.0) 30%, rgba(38,73,99,.55) 100%)}
.ph.tone-warm  .ph-tone{background:linear-gradient(180deg, rgba(189,61,50,.0) 50%, rgba(38,73,99,.25) 100%)}
.ph.tone-dark  .ph-tone{background:linear-gradient(180deg, rgba(14,29,40,.2) 0%, rgba(14,29,40,.7) 100%)}
.ph.tone-clay .ph-tone{background:linear-gradient(180deg, rgba(189,61,50,.06) 0%, rgba(38,73,99,.45) 100%)}

/* ---------- Scroll progress ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:var(--c-ziegel); z-index:200; transition:width .15s linear;
}

/* ---------- Header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(250,250,247,0.86);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), padding .3s var(--ease), background .3s var(--ease);
}
.site-header.scrolled{border-color:var(--stone-200); background:rgba(250,250,247,0.95)}
.site-header .inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0; transition:padding .3s var(--ease)}
.site-header.scrolled .inner{padding:10px 0}
.brand{display:flex; align-items:center; gap:14px}
.brand img{height:38px; width:auto; transition:height .3s var(--ease)}
.site-header.scrolled .brand img{height:32px}
.brand-meta{
  display:none; font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--schiefer-500); border-left:1px solid var(--stone-200); padding-left:14px;
}
.nav{display:none; align-items:center; gap:36px}
.nav a{
  position:relative; font-size:12px; font-weight:500; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink); padding:8px 0;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:4px; height:1px; width:0;
  background:var(--c-petrol); transition:width .35s var(--ease);
}
.nav a:hover::after{width:100%}
.header-cta{
  display:inline-flex; align-items:center; gap:12px; font-size:11px;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--white) !important;
  background:var(--c-petrol); padding:14px 20px; font-weight:500;
  position:relative; overflow:hidden; isolation:isolate;
}
.header-cta::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--c-ziegel); transform:translateX(-101%); transition:transform .4s var(--ease);
}
.header-cta:hover::before{transform:none}
.header-cta .dot{width:6px; height:6px; background:var(--c-ziegel); transition:background .3s var(--ease)}
.header-cta:hover .dot{background:var(--white)}
@media(min-width:960px){.brand-meta{display:block} .nav{display:flex}}

/* ---------- Side index ---------- */
.side-index{
  position:fixed; right:24px; top:50%; transform:translateY(-50%); z-index:80;
  display:none; flex-direction:column; gap:14px; align-items:flex-end;
  font-family:var(--ff-mono); font-size:10px; letter-spacing:0.1em;
  color:var(--schiefer-500); text-transform:uppercase;
}
.side-index a{display:flex; align-items:center; gap:10px; padding:4px 0; transition:color .25s var(--ease)}
.side-index a .line{width:22px; height:1px; background:currentColor; transition:width .35s var(--ease)}
.side-index a:hover, .side-index a.active{color:var(--c-petrol)}
.side-index a.active .line{width:44px; background:var(--c-ziegel)}
@media(min-width:1200px){.side-index{display:flex}}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  padding:160px 0 0;
  background:var(--paper);
  overflow:hidden;
}
.hero::before{
  /* big petrol mark behind */
  content:"ESCH"; position:absolute; right:-2vw; top:60vh;
  font-family:var(--ff-display); font-style:italic; font-weight:300;
  font-size:clamp(200px, 30vw, 460px); color:var(--petrol-50);
  letter-spacing:-0.05em; line-height:0.8; pointer-events:none;
  z-index:0; user-select:none;
}
.hero-inner{position:relative; z-index:2}
.hero-grid{
  display:grid; grid-template-columns:1fr; gap:48px;
  align-items:start; padding-bottom:48px;
}
@media(min-width:960px){
  .hero-grid{grid-template-columns:1.05fr 0.95fr; gap:64px; align-items:end; padding-bottom:80px}
}
.hero-copy{display:flex; flex-direction:column; gap:32px}
.hero h1{max-width:14ch}
.hero .lead{max-width:48ch; font-size:20px; line-height:1.55}
.hero-ctas{display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.hero-side{
  display:flex; align-items:center; gap:18px;
  font-family:var(--ff-mono); font-size:11px; color:var(--schiefer-500); letter-spacing:0.08em;
  text-transform:uppercase;
}
.hero-side .v{width:1px; height:32px; background:var(--stone-300)}

/* Hero image stack */
.hero-stack{
  position:relative; aspect-ratio:0.88/1; width:100%;
}
.hero-stack .img-a{
  position:absolute; left:0; top:0; width:78%; height:78%;
}
.hero-stack .img-b{
  position:absolute; right:0; bottom:0; width:54%; height:46%;
  outline:8px solid var(--paper);
}
.hero-stack .badge{
  position:absolute; left:-24px; top:32px; z-index:5;
  background:var(--c-petrol); color:var(--white); padding:14px 20px;
  display:flex; flex-direction:column; gap:6px;
}
.hero-stack .badge .small{font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:var(--schiefer-200)}
.hero-stack .badge .big{font-family:var(--ff-display); font-size:22px; line-height:1.1; letter-spacing:-0.01em}
.hero-stack .corner-tag{
  position:absolute; right:0; top:-32px;
  font-family:var(--ff-mono); font-size:10px; letter-spacing:0.1em; color:var(--schiefer-500); text-transform:uppercase;
}

/* Marquee ticker */
.marquee{
  border-top:1px solid var(--stone-200);
  border-bottom:1px solid var(--stone-200);
  overflow:hidden; background:var(--paper);
  position:relative; z-index:2;
}
.marquee-track{
  display:flex; gap:48px; align-items:center;
  width:max-content; padding:22px 0;
  animation:marq 50s linear infinite;
  font-family:var(--ff-display); font-size:28px; color:var(--c-petrol);
  letter-spacing:-0.02em;
}
.marquee-track em{color:var(--c-ziegel); font-style:italic; font-weight:500}
.marquee-track .sep{
  display:inline-block; width:8px; height:8px; background:var(--c-ziegel); transform:rotate(45deg);
}
@keyframes marq{from{transform:none}to{transform:translateX(-50%)}}

/* Stats strip */
.hero-stats{
  background:var(--paper-warm); border-bottom:1px solid var(--stone-200);
  position:relative; z-index:2;
}
.hero-stats .row{
  display:grid; grid-template-columns:repeat(2,1fr);
}
@media(min-width:760px){.hero-stats .row{grid-template-columns:repeat(4,1fr)}}
.hero-stat{
  padding:28px clamp(20px,3vw,36px); border-right:1px solid var(--stone-200);
  position:relative; overflow:hidden;
}
.hero-stat:last-child{border-right:0}
.hero-stat::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:0;
  background:var(--c-petrol); transition:width .5s var(--ease);
}
.hero-stat:hover::before{width:3px}
.hero-stat .num{
  font-family:var(--ff-display); font-size:clamp(32px,3.8vw,46px);
  color:var(--c-petrol); line-height:1; letter-spacing:-0.02em;
  display:flex; align-items:baseline; gap:6px;
}
.hero-stat .num small{font-size:13px; font-family:var(--ff-body); color:var(--stone-700); letter-spacing:0; font-weight:400}
.hero-stat .lbl{margin-top:10px; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--stone-700)}

/* ============================================================
   INTRO
   ============================================================ */
.intro{padding:clamp(96px,12vw,160px) 0}
.intro .grid{display:grid; grid-template-columns:1fr; gap:48px}
@media(min-width:960px){.intro .grid{grid-template-columns:0.45fr 0.55fr; gap:96px}}
.intro h2{max-width:16ch}
.intro .body p{margin:0 0 20px; color:var(--ink); font-size:18px; line-height:1.75; max-width:60ch}
.intro .body p:first-of-type::first-letter{
  font-family:var(--ff-display); font-style:italic; font-weight:500;
  float:left; font-size:72px; line-height:0.85; padding:8px 14px 0 0;
  color:var(--c-ziegel);
}

/* ============================================================
   KONZEPTE — horizontal cards
   ============================================================ */
.konzepte{
  background:var(--paper-warm);
  border-top:1px solid var(--stone-200);
  border-bottom:1px solid var(--stone-200);
}
.konzepte .head{display:grid; grid-template-columns:1fr; gap:24px; margin-bottom:64px; max-width:1320px}
@media(min-width:960px){.konzepte .head{grid-template-columns:0.5fr 0.5fr; gap:80px; align-items:end}}
.konzepte .grid{display:grid; grid-template-columns:1fr; gap:20px}
@media(min-width:720px){.konzepte .grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.konzepte .grid{grid-template-columns:repeat(4,1fr)}}
.konzept-card{
  background:var(--white); border:1px solid var(--stone-200);
  display:flex; flex-direction:column;
  transition:transform .45s var(--ease), border-color .45s var(--ease);
  position:relative; overflow:hidden;
}
.konzept-card:hover{transform:translateY(-8px); border-color:var(--c-petrol)}
.konzept-card .ph{aspect-ratio:1/1}
.konzept-card .body{padding:28px; display:flex; flex-direction:column; gap:14px; flex:1; position:relative}
.konzept-card .corner{
  position:absolute; right:0; top:0; padding:10px 14px;
  font-family:var(--ff-mono); font-size:10px; letter-spacing:0.12em;
  color:var(--white); background:var(--c-petrol);
  text-transform:uppercase;
}
.konzept-card .num{font-family:var(--ff-mono); font-size:11px; color:var(--schiefer-500); letter-spacing:0.1em}
.konzept-card h3{font-size:24px; line-height:1.2; letter-spacing:-0.01em}
.konzept-card p{font-size:14px; color:var(--stone-700); margin:0; line-height:1.6}
.konzept-card .more{
  margin-top:8px; font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--c-petrol); display:inline-flex; gap:8px; align-items:center; font-weight:500;
}
.konzept-card .more::after{content:"→"; transition:transform .3s var(--ease)}
.konzept-card:hover .more::after{transform:translateX(6px)}

/* ============================================================
   BEREICHE — interactive tabs
   ============================================================ */
.bereiche{background:var(--paper)}
.bereiche .head{display:grid; grid-template-columns:1fr; gap:24px; margin-bottom:56px}
@media(min-width:960px){.bereiche .head{grid-template-columns:0.5fr 0.5fr; gap:80px; align-items:end}}
.bereiche .lead{margin:0}

.tabs{
  display:flex; flex-wrap:wrap; gap:0;
  border-top:1px solid var(--stone-200);
  border-bottom:1px solid var(--stone-200);
  margin-bottom:56px;
}
.tab{
  flex:1; min-width:160px; padding:24px clamp(16px,2vw,24px);
  border-right:1px solid var(--stone-200);
  background:transparent;
  font-family:var(--ff-body); font-size:12px; letter-spacing:0.14em;
  text-transform:uppercase; font-weight:500; color:var(--stone-700);
  cursor:pointer; border-top:0; border-bottom:0; border-left:0;
  display:flex; flex-direction:column; gap:10px; align-items:flex-start;
  text-align:left; position:relative; overflow:hidden;
  transition:color .3s var(--ease), background .3s var(--ease);
}
.tab:last-child{border-right:0}
.tab .tab-n{font-family:var(--ff-mono); font-size:10px; color:var(--schiefer-500); letter-spacing:0.1em}
.tab .tab-t{font-family:var(--ff-display); font-size:18px; text-transform:none; letter-spacing:-0.01em; color:var(--c-petrol); line-height:1.2; font-weight:400}
.tab::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--c-ziegel); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.tab.active::after{transform:none}
.tab.active{background:var(--paper-warm)}
.tab.active .tab-t{color:var(--c-ziegel)}

.tab-panel{display:none; opacity:0; animation:fadeUp .6s var(--ease) forwards}
.tab-panel.active{display:grid}
@keyframes fadeUp{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}}
.tab-panel{
  grid-template-columns:1fr; gap:48px; align-items:center;
}
@media(min-width:880px){.tab-panel{grid-template-columns:0.55fr 0.45fr; gap:80px}}
.tab-panel .ph{aspect-ratio:4/3}
.tab-panel .ph.zoom{height:100%}
.tab-panel .copy{display:flex; flex-direction:column; gap:18px; max-width:60ch}
.tab-panel h3{font-size:clamp(28px,3.4vw,42px); line-height:1.1}
.tab-panel p{margin:0; color:var(--stone-700); font-size:17px; line-height:1.75}
.tab-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.tag{
  font-family:var(--ff-body); font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--schiefer-700); padding:8px 12px;
  border:1px solid var(--stone-200); background:var(--paper-warm);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.tag:hover{background:var(--c-petrol); color:var(--white); border-color:var(--c-petrol)}

/* ============================================================
   USPs
   ============================================================ */
.usp{
  background:var(--paper-warm);
  border-top:1px solid var(--stone-200);
}
.usp .head{display:flex; flex-direction:column; gap:20px; margin-bottom:56px; max-width:62ch}
.usp .grid{
  display:grid; grid-template-columns:1fr; gap:0;
  background:var(--white);
  border:1px solid var(--stone-200);
}
@media(min-width:760px){.usp .grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.usp .grid{grid-template-columns:repeat(4,1fr)}}
.usp-item{
  padding:40px 32px; display:flex; flex-direction:column; gap:16px;
  position:relative; min-height:300px; overflow:hidden; isolation:isolate;
  transition:color .45s var(--ease); border-right:1px solid var(--stone-200); border-bottom:1px solid var(--stone-200);
}
@media(min-width:1100px){
  .usp-item:nth-child(4n){border-right:0}
  .usp-item:nth-last-child(-n+4){border-bottom:0}
}
.usp-item::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--c-petrol); transform:translateY(101%);
  transition:transform .55s var(--ease);
}
.usp-item:hover::before{transform:none}
.usp-item:hover, .usp-item:hover *{color:var(--white)}
.usp-item .num{font-family:var(--ff-mono); font-size:11px; letter-spacing:0.12em; color:var(--schiefer-500); transition:color .45s var(--ease)}
.usp-item .mark{width:32px; height:1px; background:var(--c-ziegel); transition:width .45s var(--ease), background .45s var(--ease)}
.usp-item:hover .mark{width:60px; background:var(--white)}
.usp-item h4{font-size:22px; line-height:1.25; color:var(--c-petrol)}
.usp-item p{margin:0; font-size:14px; line-height:1.65; color:var(--stone-700)}

/* ============================================================
   Prozess — number rail
   ============================================================ */
.prozess{background:var(--paper); position:relative}
.prozess .head{display:grid; grid-template-columns:1fr; gap:28px; margin-bottom:72px}
@media(min-width:960px){.prozess .head{grid-template-columns:0.45fr 0.55fr; gap:80px; align-items:end}}
.prozess-list{position:relative; border-top:1px solid var(--stone-200)}
.prozess-step{
  display:grid; grid-template-columns:1fr; gap:10px;
  padding:36px 0; border-bottom:1px solid var(--stone-200);
  position:relative; transition:padding-left .5s var(--ease);
}
.prozess-step::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:0;
  background:var(--c-petrol); transition:width .5s var(--ease); z-index:-1;
}
.prozess-step:hover{padding-left:24px}
.prozess-step:hover .step-num{color:var(--c-ziegel); transform:translateX(8px)}
@media(min-width:760px){
  .prozess-step{grid-template-columns:100px 1fr 1fr; gap:40px; align-items:start}
}
.prozess-step .step-num{
  font-family:var(--ff-display); font-style:italic; font-size:56px;
  color:var(--c-petrol); line-height:1; letter-spacing:-0.03em;
  transition:color .4s var(--ease), transform .5s var(--ease);
}
.prozess-step h3{font-size:24px; line-height:1.25}
.prozess-step p{margin:0; color:var(--stone-700); font-size:16px; line-height:1.7}

/* ============================================================
   MATERIAL on petrol
   ============================================================ */
.material{
  background:var(--c-petrol); color:var(--white); position:relative; overflow:hidden;
}
.material::before{
  content:""; position:absolute; right:-10%; top:-10%; width:60vw; height:60vw;
  background:radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 60%);
  pointer-events:none;
}
.material .grid{display:grid; grid-template-columns:1fr; gap:48px}
@media(min-width:960px){.material .grid{grid-template-columns:1.05fr 0.95fr; gap:88px; align-items:center}}
.material h2{color:var(--white); font-size:clamp(30px,3.8vw,50px)}
.material h2 em{color:var(--schiefer-200); font-style:italic}
.material p{color:var(--schiefer-200); font-size:17px; line-height:1.75; max-width:58ch}
.material .ph{aspect-ratio:4/5; outline:6px solid var(--petrol-700); outline-offset:0}
.material-strip{
  margin-top:64px; display:grid; grid-template-columns:1fr; gap:0;
  border-top:1px solid var(--petrol-700);
}
@media(min-width:720px){.material-strip{grid-template-columns:repeat(3,1fr)}}
.mat-card{
  padding:36px 32px; border-right:1px solid var(--petrol-700);
  position:relative; overflow:hidden; transition:background .4s var(--ease);
}
.mat-card:hover{background:var(--petrol-700)}
.mat-card:last-child{border-right:0}
.mat-card .lbl{font-family:var(--ff-mono); font-size:11px; letter-spacing:0.1em; color:var(--ziegel-500)}
.mat-card h4{color:var(--white); font-size:24px; margin-top:12px}
.mat-card p{margin-top:14px; font-size:14px; line-height:1.7; max-width:none}

/* ============================================================
   QUOTE
   ============================================================ */
.quote{
  background:var(--petrol-700); color:var(--white); position:relative;
  border-top:1px solid var(--petrol-600);
  overflow:hidden;
}
.quote .wrap{display:grid; grid-template-columns:1fr; gap:32px; align-items:center; padding:clamp(80px,10vw,140px) 0; position:relative; z-index:2}
@media(min-width:960px){.quote .wrap{grid-template-columns:0.32fr 0.68fr; gap:48px}}
.quote .qmark{
  font-family:var(--ff-display); font-style:italic; color:var(--c-ziegel);
  font-size:clamp(160px,22vw,280px); line-height:0.7; opacity:.9;
}
.quote blockquote{
  font-family:var(--ff-display); font-style:italic; font-weight:400; color:var(--white);
  font-size:clamp(26px,3.4vw,42px); line-height:1.32; letter-spacing:-0.01em;
  max-width:30ch; margin:0 0 28px;
  border-left: none !important;
}
.quote blockquote em{color:var(--ziegel-500)}
.quote cite{
  display:flex; align-items:center; gap:14px;
  font-style:normal; font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--schiefer-200);
}
.quote cite .l{width:32px; height:1px; background:var(--ziegel-500)}

/* ============================================================
   SHOWCASE — Projektmanufaktur
   ============================================================ */
.showcase{background:var(--paper)}
.showcase .card{display:grid; grid-template-columns:1fr; gap:0; border:1px solid var(--stone-200); background:var(--white); overflow:hidden}
@media(min-width:960px){.showcase .card{grid-template-columns:1fr}}
.showcase .media{position:relative; min-height:0; aspect-ratio:16/7}
@media(max-width:760px){.showcase .media{aspect-ratio:4/3}}
.showcase .media .ph{position:absolute; inset:0}
.showcase .badge-float{
  position:absolute; left:24px; top:24px; z-index:5;
  background:var(--c-ziegel); color:var(--white); padding:10px 14px;
  font-size:10px; letter-spacing:0.22em; text-transform:uppercase; font-weight:500;
}
.showcase .body{padding:clamp(36px,5vw,64px); display:grid; grid-template-columns:1fr; gap:22px 56px}
@media(min-width:960px){
  .showcase .body{grid-template-columns:.78fr 1.22fr; align-items:start}
  .showcase .body .eyebrow, .showcase .body h2{grid-column:1}
  .showcase .body p, .showcase .body .keylist, .showcase .body .link-arrow{grid-column:2}
}
.showcase h2{font-size:clamp(28px,3.6vw,44px); max-width:18ch}
.showcase p{color:var(--stone-700); font-size:16px; line-height:1.7; margin:0; max-width:66ch}
.showcase .keylist{display:grid; grid-template-columns:1fr 1fr; gap:18px 28px; margin-top:12px; padding-top:28px; border-top:1px solid var(--stone-200)}
.showcase .keylist div{display:flex; flex-direction:column; gap:6px}
.showcase .keylist .k{font-family:var(--ff-mono); font-size:10px; letter-spacing:0.1em; color:var(--schiefer-500); text-transform:uppercase}
.showcase .keylist .v{font-family:var(--ff-display); color:var(--c-petrol); font-size:20px; line-height:1.2}

/* ============================================================
   REFERENZEN — bento mosaic
   ============================================================ */
.refs{background:var(--paper-warm); border-top:1px solid var(--stone-200); border-bottom:1px solid var(--stone-200)}
.refs .head{display:grid; grid-template-columns:1fr; gap:28px; margin-bottom:56px}
@media(min-width:960px){.refs .head{grid-template-columns:0.55fr 0.45fr; align-items:end; gap:80px}}
.refs-grid{display:grid; grid-template-columns:1fr; gap:20px}
@media(min-width:760px){.refs-grid{grid-template-columns:repeat(6,1fr); grid-auto-rows:200px}}
.ref-item{position:relative; overflow:hidden; border:1px solid var(--stone-200); background:var(--white); isolation:isolate}
.ref-item .ph{position:absolute; inset:0}
.ref-item .meta{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  padding:20px; color:var(--white);
  background:linear-gradient(to top, rgba(14,29,40,0.85) 0%, rgba(14,29,40,0) 100%);
  transition:padding-bottom .35s var(--ease);
}
.ref-item:hover .meta{padding-bottom:28px}
.ref-item .meta .lbl{font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--schiefer-200)}
.ref-item .meta .ttl{font-family:var(--ff-display); font-size:22px; line-height:1.2; margin-top:6px; letter-spacing:-0.01em}
.ref-item .corner{
  position:absolute; right:14px; top:14px; z-index:4;
  font-family:var(--ff-mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase;
  background:rgba(250,250,247,0.95); color:var(--c-petrol);
  padding:6px 10px;
}
@media(min-width:760px){
  .ref-item.a{grid-column:span 4; grid-row:span 2}
  .ref-item.b{grid-column:span 2; grid-row:span 2}
  .ref-item.c{grid-column:span 2; grid-row:span 2}
  .ref-item.d{grid-column:span 2; grid-row:span 2}
  .ref-item.e{grid-column:span 2; grid-row:span 2}
}

/* ============================================================
   FAQ
   ============================================================ */
.faq{background:var(--paper)}
.faq .head{display:grid; grid-template-columns:1fr; gap:28px; margin-bottom:56px}
@media(min-width:960px){.faq .head{grid-template-columns:0.55fr 0.45fr; align-items:end; gap:80px}}
.faq-list{border-top:1px solid var(--stone-200)}
.faq-item{border-bottom:1px solid var(--stone-200); transition:background .3s var(--ease)}
.faq-item[open]{background:var(--paper-warm)}
.faq-item summary{
  list-style:none; cursor:pointer; padding:28px 0;
  display:grid; grid-template-columns:48px 1fr 32px; gap:24px; align-items:center;
  transition:padding .3s var(--ease);
}
.faq-item[open] summary{padding:28px 24px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item .num{font-family:var(--ff-mono); font-size:12px; color:var(--schiefer-500); letter-spacing:0.08em}
.faq-item .q{font-family:var(--ff-display); color:var(--c-petrol); font-size:clamp(18px,2.1vw,24px); line-height:1.3; letter-spacing:-0.01em; transition:color .3s var(--ease)}
.faq-item[open] .q{color:var(--c-ziegel)}
.faq-item .toggle{position:relative; width:24px; height:24px; justify-self:end}
.faq-item .toggle::before, .faq-item .toggle::after{
  content:""; position:absolute; left:0; top:50%; width:24px; height:1px; background:var(--c-petrol);
  transition:transform .35s var(--ease), background .3s var(--ease);
}
.faq-item .toggle::after{transform:rotate(90deg)}
.faq-item[open] .toggle::before, .faq-item[open] .toggle::after{background:var(--c-ziegel)}
.faq-item[open] .toggle::after{transform:rotate(0deg)}
.faq-item .answer{
  padding:0 32px 32px 96px; color:var(--stone-700);
  font-size:16px; line-height:1.75; max-width:70ch;
}

/* ============================================================
   CTA
   ============================================================ */
.cta{background:var(--c-petrol); color:var(--white); position:relative; overflow:hidden}
.cta::before{
  content:""; position:absolute; left:-10%; bottom:-30%; width:80vw; height:80vw;
  background:radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 55%);
  pointer-events:none;
}
.cta .wrap{display:grid; grid-template-columns:1fr; gap:48px; padding:clamp(80px,9vw,128px) 0; position:relative; z-index:2}
@media(min-width:960px){.cta .wrap{grid-template-columns:0.5fr 0.5fr; gap:88px; align-items:center}}
.cta h2{color:var(--white); max-width:14ch; font-size:clamp(32px,5vw,68px); line-height:1.04; letter-spacing:-0.025em}
.cta h2 em{color:var(--ziegel-500); font-style:italic}
.cta .lead-light{color:var(--schiefer-200); font-size:18px; line-height:1.7; max-width:48ch}
.cta .form{background:var(--petrol-700); border:1px solid var(--petrol-600); padding:clamp(28px,4vw,44px)}
.cta .field{display:flex; flex-direction:column; gap:8px; padding:14px 0; border-bottom:1px solid var(--petrol-600); position:relative}
.cta .field label{font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:var(--schiefer-200); font-weight:500}
.cta .field input, .cta .field select, .cta .field textarea{
  background:transparent; border:0; color:var(--white);
  font-family:var(--ff-body); font-size:16px; padding:4px 0; outline:none; resize:vertical; width:100%;
}
.cta .field input:focus, .cta .field select:focus, .cta .field textarea:focus{outline:none}
.cta .field::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--c-ziegel); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease)}
.cta .field:focus-within::after{transform:none}
.cta .field input::placeholder, .cta .field textarea::placeholder{color:var(--schiefer-400)}
.cta .field select{appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23BAC9CE' stroke-width='1.4'/></svg>"); background-repeat:no-repeat; background-position:right 4px center; background-size:12px}
.cta .form-row{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.cta .submit-row{display:flex; align-items:center; justify-content:end; margin-top:24px; gap:16px; flex-wrap:wrap}
.cta .small{font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--schiefer-400)}

.contact-meta{
  margin-top:36px; display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:520px;
  padding-top:32px; border-top:1px solid var(--petrol-600);
}
.contact-meta .k{font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:var(--schiefer-200); font-weight:500}
.contact-meta .v{margin-top:8px; color:var(--white); font-family:var(--ff-display); font-size:22px; line-height:1.25; letter-spacing:-0.01em}

/* ============================================================
   LANDING TOP-FOOTER
   ============================================================ */
.landing-prefooter{
  background:#E6EEF2; color:var(--petrol-700); position:relative; overflow:hidden;
  border-top:1px solid rgba(38,73,99,.12);
}
.landing-prefooter::before{
  content:"Hotelmöblierung"; position:absolute; left:clamp(18px,4vw,56px); bottom:-.18em;
  font-family:var(--ff-display); font-weight:300; font-size:clamp(70px,13vw,190px);
  line-height:.85; letter-spacing:-.04em; color:rgba(38,73,99,.055); pointer-events:none;
}
.prefooter-head{
  position:relative; z-index:1; display:grid; grid-template-columns:1fr; gap:22px;
  padding-bottom:clamp(36px,5vw,64px); border-bottom:1px solid rgba(38,73,99,.16);
}
@media(min-width:900px){.prefooter-head{grid-template-columns:.85fr 1fr; align-items:end; gap:80px}}
.prefooter-head p{margin:0; max-width:68ch; color:var(--schiefer-700); font-size:17px; line-height:1.72}
.prefooter-grid{
  position:relative; z-index:1; padding-top:clamp(36px,5vw,64px);
  display:grid; grid-template-columns:1fr; gap:34px;
}
@media(min-width:860px){.prefooter-grid{grid-template-columns:1fr 1fr 1.15fr; gap:56px}}
.prefooter-col h3{
  font-size:clamp(28px,3vw,42px); line-height:1.05; letter-spacing:-.02em; color:var(--schiefer-500);
  margin:0 0 24px;
}
.prefooter-col ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px}
.prefooter-col a{
  display:inline-flex; width:max-content; max-width:100%; color:var(--petrol-700); font-size:16px;
  border-bottom:1px solid transparent; transition:color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.prefooter-col a:hover{color:var(--c-ziegel); border-bottom-color:currentColor; transform:translateX(4px)}
.prefooter-cta{
  background:rgba(255,255,255,.48); border:1px solid rgba(38,73,99,.14);
  padding:clamp(24px,3vw,34px);
}
.prefooter-cta h3{color:var(--c-petrol)}
.prefooter-cta p{margin:0 0 22px; color:var(--stone-700); font-size:16px; line-height:1.7}
.prefooter-actions{display:flex; gap:12px; flex-wrap:wrap}
.prefooter-actions .btn{
  background:#7F9AA7; border-color:#7F9AA7; color:var(--white);
  box-shadow:0 12px 28px rgba(38,73,99,.12);
}
.prefooter-actions .btn::before{background:var(--c-petrol)}
.prefooter-actions .btn:hover{border-color:var(--c-petrol); color:var(--white); transform:none}
.prefooter-note{
  position:relative; z-index:1; margin-top:clamp(40px,5vw,64px); padding-top:24px;
  border-top:1px solid rgba(38,73,99,.16); display:flex; flex-wrap:wrap; gap:14px 28px;
  color:var(--schiefer-500); font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:500;
}

/* ===== Cursor blob (subtle) ===== */
.cursor-blob{
  position:fixed; left:0; top:0; width:24px; height:24px; pointer-events:none; z-index:300;
  background:transparent; border:1px solid var(--c-ziegel);
  border-radius:50%; mix-blend-mode:multiply;
  transform:translate(-50%,-50%); transition:transform .25s var(--ease), opacity .3s;
  opacity:0;
}
@media(hover:hover) and (pointer:fine){
  body.cursor-on .cursor-blob{opacity:.7}
  body.cursor-on .cursor-blob.expand{transform:translate(-50%,-50%) scale(2.2); border-color:var(--c-petrol)}
}
/* ============================================================
   WordPress / Elementor conflict overrides
   Scoped to landing template body class.
   ============================================================ */
body.esch-landing-page h1,
body.esch-landing-page h2,
body.esch-landing-page h3:not(footer *),
body.esch-landing-page h4,
body.esch-landing-page blockquote,
body.esch-landing-page .h,
body.esch-landing-page .display,
body.esch-landing-page .display-xl,
body.esch-landing-page .hero-stat .num,
body.esch-landing-page .tab .tab-t,
body.esch-landing-page .faq-item .q,
body.esch-landing-page .showcase .keylist .v,
body.esch-landing-page .contact-meta .v,
body.esch-landing-page .prefooter-cta h3 {
  color:var(--c-petrol) !important;
  font-family:var(--ff-display) !important;
}

body.esch-landing-page h1 em,
body.esch-landing-page h2 em,
body.esch-landing-page h3 em,
body.esch-landing-page blockquote em,
body.esch-landing-page .intro .body p:first-of-type::first-letter,
body.esch-landing-page .eyebrow,
body.esch-landing-page .link-arrow:hover {
  color:var(--c-ziegel) !important;
}

body.esch-landing-page .eyebrow.muted {
  color:var(--schiefer-500) !important;
}

body.esch-landing-page .eyebrow.on-petrol {
  color:var(--schiefer-200) !important;
}

body.esch-landing-page .btn,
body.esch-landing-page a.btn,
body.esch-landing-page button.btn {
  background:var(--c-petrol) !important;
  border:1px solid var(--c-petrol) !important;
  border-radius:0 !important;
  color:var(--white) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:14px !important;
  padding:18px 28px !important;
  font-family:var(--ff-body) !important;
  font-size:13px !important;
  font-weight:500 !important;
  line-height:1 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  text-decoration:none !important;
  box-shadow:none !important;
  cursor:pointer !important;
  overflow:hidden !important;
}

body.esch-landing-page .btn::before,
body.esch-landing-page a.btn::before,
body.esch-landing-page button.btn::before {
  background:var(--petrol-700) !important;
}

body.esch-landing-page .btn:hover,
body.esch-landing-page a.btn:hover,
body.esch-landing-page button.btn:hover,
body.esch-landing-page .btn:focus,
body.esch-landing-page a.btn:focus,
body.esch-landing-page button.btn:focus {
  color:var(--white) !important;
  border-color:var(--c-petrol) !important;
  text-decoration:none !important;
}

body.esch-landing-page .btn-accent,
body.esch-landing-page a.btn-accent,
body.esch-landing-page button.btn-accent {
  background:var(--c-ziegel) !important;
  border-color:var(--c-ziegel) !important;
  color:var(--white) !important;
}

body.esch-landing-page .btn-accent::before {
  background:var(--ziegel-600) !important;
}

body.esch-landing-page .btn-secondary,
body.esch-landing-page a.btn-secondary,
body.esch-landing-page button.btn-secondary {
  background:transparent !important;
  border-color:var(--c-petrol) !important;
  color:var(--c-petrol) !important;
}

body.esch-landing-page .btn-secondary::before {
  background:var(--c-petrol) !important;
}

body.esch-landing-page .btn-secondary:hover,
body.esch-landing-page a.btn-secondary:hover,
body.esch-landing-page button.btn-secondary:hover {
  color:var(--white) !important;
}

body.esch-landing-page .btn-light,
body.esch-landing-page a.btn-light,
body.esch-landing-page button.btn-light {
  background:transparent !important;
  border-color:var(--white) !important;
  color:var(--white) !important;
}

body.esch-landing-page .btn-light::before {
  background:var(--white) !important;
}

body.esch-landing-page .btn-light:hover {
  color:var(--c-petrol) !important;
}

body.esch-landing-page .prefooter-actions .btn,
body.esch-landing-page .prefooter-actions a.btn {
  background:#7F9AA7 !important;
  border-color:#7F9AA7 !important;
  color:var(--white) !important;
  box-shadow:0 12px 28px rgba(38,73,99,.12) !important;
}

body.esch-landing-page .prefooter-actions .btn::before {
  background:var(--c-petrol) !important;
}

body.esch-landing-page .hero-stats .row {
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  float:none !important;
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

body.esch-landing-page .hero-stats .row::before,
body.esch-landing-page .hero-stats .row::after {
  content:none !important;
  display:none !important;
}

body.esch-landing-page .hero-stats .row > .hero-stat {
  float:none !important;
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
}

@media(min-width:760px){
  body.esch-landing-page .hero-stats .row {
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Tabs: protect against theme / Elementor button styles */
body.esch-landing-page .tabs {
  display:flex !important;
  flex-wrap:wrap !important;
  gap:0 !important;
  border-top:1px solid var(--stone-200) !important;
  border-bottom:1px solid var(--stone-200) !important;
  margin-bottom:56px !important;
  background:transparent !important;
}

body.esch-landing-page .tabs .tab,
body.esch-landing-page .bereiche .tabs button.tab {
  appearance:none !important;
  -webkit-appearance:none !important;
  flex:1 1 160px !important;
  min-width:160px !important;
  padding:24px clamp(16px,2vw,24px) !important;
  border:0 !important;
  border-right:1px solid var(--stone-200) !important;
  border-radius:0 !important;
  background:transparent !important;
  color:var(--stone-700) !important;
  box-shadow:none !important;
  outline:0 !important;
  font-family:var(--ff-body) !important;
  font-size:12px !important;
  font-weight:500 !important;
  line-height:1.4 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  gap:10px !important;
  text-align:left !important;
  position:relative !important;
  overflow:hidden !important;
  cursor:pointer !important;
}

body.esch-landing-page .tabs .tab:last-child,
body.esch-landing-page .bereiche .tabs button.tab:last-child {
  border-right:0 !important;
}

body.esch-landing-page .tabs .tab::before,
body.esch-landing-page .bereiche .tabs button.tab::before {
  content:none !important;
  display:none !important;
}

body.esch-landing-page .tabs .tab::after,
body.esch-landing-page .bereiche .tabs button.tab::after {
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  height:2px !important;
  background:var(--c-ziegel) !important;
  transform:scaleX(0) !important;
  transform-origin:left !important;
  transition:transform .45s var(--ease) !important;
  display:block !important;
}

body.esch-landing-page .tabs .tab.active,
body.esch-landing-page .bereiche .tabs button.tab.active,
body.esch-landing-page .tabs .tab[aria-selected="true"] {
  background:var(--paper-warm) !important;
  color:var(--stone-700) !important;
}

body.esch-landing-page .tabs .tab.active::after,
body.esch-landing-page .bereiche .tabs button.tab.active::after,
body.esch-landing-page .tabs .tab[aria-selected="true"]::after {
  transform:none !important;
}

body.esch-landing-page .tabs .tab:hover,
body.esch-landing-page .bereiche .tabs button.tab:hover,
body.esch-landing-page .tabs .tab:focus,
body.esch-landing-page .bereiche .tabs button.tab:focus {
  background:var(--paper-warm) !important;
  color:var(--stone-700) !important;
  box-shadow:none !important;
  outline:0 !important;
}

body.esch-landing-page .tabs .tab .tab-n,
body.esch-landing-page .bereiche .tabs button.tab .tab-n {
  color:var(--schiefer-500) !important;
  font-family:var(--ff-mono) !important;
  font-size:10px !important;
  font-weight:500 !important;
  line-height:1.2 !important;
  letter-spacing:.1em !important;
}

body.esch-landing-page .tabs .tab .tab-t,
body.esch-landing-page .bereiche .tabs button.tab .tab-t {
  color:var(--c-petrol) !important;
  font-family:var(--ff-display) !important;
  font-size:18px !important;
  font-weight:400 !important;
  line-height:1.2 !important;
  letter-spacing:-.01em !important;
  text-transform:none !important;
}

body.esch-landing-page .tabs .tab.active .tab-t,
body.esch-landing-page .bereiche .tabs button.tab.active .tab-t,
body.esch-landing-page .tabs .tab[aria-selected="true"] .tab-t {
  color:var(--c-ziegel) !important;
}

/* USP cards: keep hover text white against global heading overrides */
body.esch-landing-page .usp .usp-item:hover,
body.esch-landing-page .usp .usp-item:hover *,
body.esch-landing-page .usp .usp-item:hover h4,
body.esch-landing-page .usp .usp-item:hover p,
body.esch-landing-page .usp .usp-item:hover .num {
  color:var(--white) !important;
}

body.esch-landing-page .usp .usp-item:hover .mark {
  background:var(--white) !important;
}

/* Dark sections: restore light headings after global heading overrides */
body.esch-landing-page .material h1,
body.esch-landing-page .material h2,
body.esch-landing-page .material h3,
body.esch-landing-page .material h4,
body.esch-landing-page .material .h,
body.esch-landing-page .material .mat-card h4,
body.esch-landing-page .quote h1,
body.esch-landing-page .quote h2,
body.esch-landing-page .quote h3,
body.esch-landing-page .quote h4,
body.esch-landing-page .quote blockquote,
body.esch-landing-page .cta h1,
body.esch-landing-page .cta h2,
body.esch-landing-page .cta h3,
body.esch-landing-page .cta h4,
body.esch-landing-page .cta .h,
body.esch-landing-page .cta .contact-meta .v {
  color:var(--white) !important;
}

body.esch-landing-page .material h1 em,
body.esch-landing-page .material h2 em,
body.esch-landing-page .material h3 em,
body.esch-landing-page .material h4 em,
body.esch-landing-page .material .h em {
  color:var(--schiefer-200) !important;
}

body.esch-landing-page .quote blockquote em,
body.esch-landing-page .cta h1 em,
body.esch-landing-page .cta h2 em,
body.esch-landing-page .cta h3 em,
body.esch-landing-page .cta h4 em,
body.esch-landing-page .cta .h em {
  color:var(--ziegel-500) !important;
}

body.esch-landing-page .material p,
body.esch-landing-page .material .lead,
body.esch-landing-page .quote cite,
body.esch-landing-page .cta .lead-light,
body.esch-landing-page .cta .field label {
  color:var(--schiefer-200) !important;
}

body.esch-landing-page .cta .field input,
body.esch-landing-page .cta .field select,
body.esch-landing-page .cta .field textarea {
  color:var(--white) !important;
}

/* Contact Form 7 inside landing CTA */
body.esch-landing-page .cta .wpcf7,
body.esch-landing-page .cta .wpcf7 form {
  margin:0 !important;
}

body.esch-landing-page .cta .wpcf7 p {
  margin:0 !important;
  padding:0 !important;
}

body.esch-landing-page .cta .field {
  gap:18px !important;
  padding:0 0 18px !important;
  border-bottom:1px solid var(--petrol-600) !important;
}

body.esch-landing-page .cta .field > span:not(.wpcf7-form-control-wrap),
body.esch-landing-page .cta .field > .field-title {
  color:var(--white) !important;
  font-family:var(--ff-body) !important;
  font-size:14px !important;
  font-weight:500 !important;
  line-height:1.25 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}

body.esch-landing-page .cta .wpcf7-form-control-wrap {
  display:block !important;
  width:100% !important;
  position:relative !important;
}

body.esch-landing-page .cta .wpcf7-form-control:not(.wpcf7-submit),
body.esch-landing-page .cta .wpcf7 input[type="text"],
body.esch-landing-page .cta .wpcf7 input[type="email"],
body.esch-landing-page .cta .wpcf7 select,
body.esch-landing-page .cta .wpcf7 textarea {
  appearance:none !important;
  -webkit-appearance:none !important;
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  outline:0 !important;
  color:var(--white) !important;
  font-family:var(--ff-body) !important;
  font-size:16px !important;
  font-weight:400 !important;
  line-height:1.45 !important;
  letter-spacing:0 !important;
  padding:0 !important;
}

body.esch-landing-page .cta .wpcf7 input[type="text"],
body.esch-landing-page .cta .wpcf7 input[type="email"],
body.esch-landing-page .cta .wpcf7 select {
  height:44px !important;
}

body.esch-landing-page .cta .wpcf7 textarea {
  min-height:150px !important;
  height:150px !important;
  max-height:260px !important;
  resize:vertical !important;
}

body.esch-landing-page .cta .wpcf7 select {
  padding-right:28px !important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23BAC9CE' stroke-width='1.4'/></svg>") !important;
  background-repeat:no-repeat !important;
  background-position:right 4px center !important;
  background-size:12px !important;
}

body.esch-landing-page .cta .wpcf7 input::placeholder,
body.esch-landing-page .cta .wpcf7 textarea::placeholder {
  color:var(--schiefer-400) !important;
  opacity:1 !important;
}

body.esch-landing-page .cta .wpcf7 input:focus,
body.esch-landing-page .cta .wpcf7 select:focus,
body.esch-landing-page .cta .wpcf7 textarea:focus {
  outline:0 !important;
  box-shadow:none !important;
}

body.esch-landing-page .cta .submit-row {
  align-items:center !important;
  margin-top:28px !important;
}

body.esch-landing-page .cta .submit-row .wpcf7-form-control-wrap,
body.esch-landing-page .cta .submit-row p {
  display:contents !important;
}

body.esch-landing-page .cta .wpcf7-submit,
body.esch-landing-page .cta input.wpcf7-submit.btn,
body.esch-landing-page .cta input[type="submit"].btn {
  width:auto !important;
  min-width:220px !important;
  height:auto !important;
  background:var(--c-ziegel) !important;
  border:1px solid var(--c-ziegel) !important;
  border-radius:0 !important;
  color:var(--white) !important;
  padding:20px 34px !important;
  font-family:var(--ff-body) !important;
  font-size:13px !important;
  font-weight:700 !important;
  line-height:1 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  box-shadow:none !important;
}

body.esch-landing-page .cta .wpcf7-submit:hover,
body.esch-landing-page .cta input.wpcf7-submit.btn:hover,
body.esch-landing-page .cta input[type="submit"].btn:hover {
  background:var(--ziegel-600) !important;
  border-color:var(--ziegel-600) !important;
  color:var(--white) !important;
}

body.esch-landing-page .cta .wpcf7-spinner {
  margin:0 0 0 12px !important;
  background-color:var(--schiefer-200) !important;
  opacity:.75 !important;
}

body.esch-landing-page .cta .wpcf7-not-valid-tip {
  color:#F7C6BF !important;
  font-size:13px !important;
  margin-top:8px !important;
}

body.esch-landing-page .cta .wpcf7-response-output {
  margin:24px 0 0 !important;
  padding:14px 16px !important;
  border:1px solid var(--petrol-600) !important;
  color:var(--white) !important;
  font-size:14px !important;
  line-height:1.5 !important;
}

@media(max-width:720px){
  body.esch-landing-page .cta .form-row {
    grid-template-columns:1fr !important;
  }

  body.esch-landing-page .cta .submit-row {
    align-items:flex-start !important;
    flex-direction:column !important;
  }

  body.esch-landing-page .cta .wpcf7-submit,
  body.esch-landing-page .cta input.wpcf7-submit.btn,
  body.esch-landing-page .cta input[type="submit"].btn {
    width:100% !important;
  }
}

/* CF7 hard override against global styles.css form rules */
body.esch-landing-page .cta .wpcf7 form .wpcf7-form-control-wrap {
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
}

body.esch-landing-page .cta .wpcf7 form input[type="text"],
body.esch-landing-page .cta .wpcf7 form input[type="email"],
body.esch-landing-page .cta .wpcf7 form input[type="url"],
body.esch-landing-page .cta .wpcf7 form input[type="tel"],
body.esch-landing-page .cta .wpcf7 form textarea,
body.esch-landing-page .cta .wpcf7 form select {
  transition:border-color .35s var(--ease), color .35s var(--ease) !important;
  color:var(--white) !important;
  background-color:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  outline:none !important;
  box-sizing:border-box !important;
  box-shadow:none !important;
  width:100% !important;
  padding:0 !important;
  margin:0 !important;
  font-family:var(--ff-body) !important;
  font-size:16px !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
}

body.esch-landing-page .cta .wpcf7 form input[type="text"],
body.esch-landing-page .cta .wpcf7 form input[type="email"],
body.esch-landing-page .cta .wpcf7 form input[type="url"],
body.esch-landing-page .cta .wpcf7 form input[type="tel"],
body.esch-landing-page .cta .wpcf7 form select {
  height:44px !important;
  line-height:44px !important;
}

body.esch-landing-page .cta .wpcf7 form textarea {
  height:150px !important;
  min-height:150px !important;
  max-height:260px !important;
  line-height:1.45 !important;
  resize:vertical !important;
}

body.esch-landing-page .cta .wpcf7 form input[type="text"]:active,
body.esch-landing-page .cta .wpcf7 form input[type="email"]:active,
body.esch-landing-page .cta .wpcf7 form input[type="url"]:active,
body.esch-landing-page .cta .wpcf7 form input[type="tel"]:active,
body.esch-landing-page .cta .wpcf7 form textarea:active,
body.esch-landing-page .cta .wpcf7 form select:active,
body.esch-landing-page .cta .wpcf7 form input[type="text"]:focus,
body.esch-landing-page .cta .wpcf7 form input[type="email"]:focus,
body.esch-landing-page .cta .wpcf7 form input[type="url"]:focus,
body.esch-landing-page .cta .wpcf7 form input[type="tel"]:focus,
body.esch-landing-page .cta .wpcf7 form textarea:focus,
body.esch-landing-page .cta .wpcf7 form select:focus {
  border:0 !important;
  border-color:transparent !important;
  outline:none !important;
  box-shadow:none !important;
  color:var(--white) !important;
}

body.esch-landing-page .cta .wpcf7 form input[type="submit"],
body.esch-landing-page .cta .wpcf7 form input[type="submit"].btn,
body.esch-landing-page .cta .wpcf7 form .wpcf7-submit {
  background-color:var(--c-ziegel) !important;
  background:var(--c-ziegel) !important;
  color:var(--white) !important;
  height:auto !important;
  min-height:0 !important;
  line-height:1 !important;
  padding:20px 34px !important;
  transition:background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease) !important;
  font-size:13px !important;
  font-weight:700 !important;
  text-align:center !important;
  border:1px solid var(--c-ziegel) !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

body.esch-landing-page .cta .wpcf7 form input[type="submit"]:hover,
body.esch-landing-page .cta .wpcf7 form input[type="submit"].btn:hover,
body.esch-landing-page .cta .wpcf7 form .wpcf7-submit:hover {
  background-color:var(--ziegel-600) !important;
  background:var(--ziegel-600) !important;
  border-color:var(--ziegel-600) !important;
  color:var(--white) !important;
}

/* Contact form usability refinement: clearer fields, no concept dropdown layout */
body.esch-landing-page .cta .form {
  background:rgba(30,58,79,.72) !important;
  border:1px solid rgba(186,201,206,.18) !important;
  padding:clamp(24px,3.4vw,40px) !important;
}

body.esch-landing-page .cta .field {
  margin:0 0 16px !important;
}
body.esch-landing-page .cta .form-row {
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:16px !important;

}

@media(max-width:960px){
    .cta.section .wpcf7{
        padding-top: 50px;
    }
}
@media(min-width:760px){
  body.esch-landing-page .cta .form-row {
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

body.esch-landing-page .cta .field {
  background:rgba(255,255,255,.045) !important;
  border:1px solid rgba(186,201,206,.18) !important;
  border-bottom-color:rgba(186,201,206,.28) !important;
  padding:16px 18px !important;
  gap:10px !important;
  min-height:106px !important;
  transition:border-color .3s var(--ease), background .3s var(--ease) !important;
}

body.esch-landing-page .cta .field.field--full {
  grid-column:1 / -1 !important;
  min-height:0 !important;
}

body.esch-landing-page .cta .field:focus-within {
  background:rgba(255,255,255,.065) !important;
  border-color:rgba(186,201,206,.45) !important;
}

body.esch-landing-page .cta .field::after {
  display:none !important;
  content:none !important;
}

body.esch-landing-page .cta .field > .field-title,
body.esch-landing-page .cta .field > div.field-title {
  color:var(--white) !important;
  font-size:13px !important;
  font-weight:600 !important;
  line-height:1.25 !important;
  letter-spacing:.01em !important;
  text-transform:none !important;
  margin:0 !important;
}

body.esch-landing-page .cta .field > .field-title::before,
body.esch-landing-page .cta .field > div.field-title::before {
  color:var(--schiefer-200) !important;
}

body.esch-landing-page .cta .wpcf7 form input[type="text"],
body.esch-landing-page .cta .wpcf7 form input[type="email"],
body.esch-landing-page .cta .wpcf7 form input[type="url"],
body.esch-landing-page .cta .wpcf7 form input[type="tel"],
body.esch-landing-page .cta .wpcf7 form select {
  height:34px !important;
  line-height:34px !important;
}

body.esch-landing-page .cta .wpcf7 form textarea {
  height:118px !important;
  min-height:118px !important;
  max-height:220px !important;
}

body.esch-landing-page .cta .wpcf7 input::placeholder,
body.esch-landing-page .cta .wpcf7 textarea::placeholder {
  color:rgba(186,201,206,.78) !important;
}

body.esch-landing-page .cta .submit-row {
  margin-top:18px !important;
  padding-top:18px !important;
  border-top:1px solid rgba(186,201,206,.18) !important;
  align-items:center !important;
}

body.esch-landing-page .cta .submit-row .small {
  color:rgba(186,201,206,.78) !important;
  max-width:32ch !important;
}

body.esch-landing-page .cta .wpcf7 form input[type="submit"],
body.esch-landing-page .cta .wpcf7 form input[type="submit"].btn,
body.esch-landing-page .cta .wpcf7 form .wpcf7-submit {
  min-width:220px !important;
  padding:18px 32px !important;
}

@media(max-width:720px){
  body.esch-landing-page .cta .field {
    min-height:98px !important;
  }

  body.esch-landing-page .cta .submit-row .small {
    max-width:none !important;
  }
}

/* References: give absolute image cards height on mobile */
body.esch-landing-page .refs .refs-grid {
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:20px !important;
}

body.esch-landing-page .refs .ref-item {
  min-height:260px !important;
  aspect-ratio:4/3 !important;
}

body.esch-landing-page .refs .ref-item .ph {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
}

body.esch-landing-page .refs .ref-item .ph .ph-art {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
}

@media(min-width:760px){
  body.esch-landing-page .refs .refs-grid {
    grid-template-columns:repeat(6, minmax(0, 1fr)) !important;
    grid-auto-rows:200px !important;
  }

  body.esch-landing-page .refs .ref-item {
    min-height:0 !important;
    aspect-ratio:auto !important;
  }
}
.refs.section .ph::after{
    display: none !important;
}
/* Mobile header spacing inside WordPress/Elementor page wrapper */
@media(max-width:959px){
  body.esch-landing-page .site-header .shell.inner {
    padding-left:clamp(16px,4vw,24px) !important;
    padding-right:clamp(16px,4vw,24px) !important;
  }

  body.esch-landing-page .site-header .brand {
    min-width:0 !important;
  }

  body.esch-landing-page .site-header .brand img {
    height:32px !important;
    max-width:112px !important;
  }

  body.esch-landing-page .site-header .header-cta {
    margin-left:auto !important;
    padding:13px 16px !important;
    font-size:10px !important;
    white-space:nowrap !important;
  }
}

@media(max-width:420px){
  body.esch-landing-page .site-header .shell.inner {
    padding-left:14px !important;
    padding-right:14px !important;
  }

  body.esch-landing-page .site-header .brand img {
    max-width:92px !important;
  }

  body.esch-landing-page .site-header .header-cta {
    padding:12px 13px !important;
    letter-spacing:.06em !important;
  }
}

/* WordPress admin bar offset for fixed landing header */
body.admin-bar.esch-landing-page .site-header {
  top:32px !important;
}

body.admin-bar.esch-landing-page .scroll-progress {
  top:32px !important;
  z-index:201 !important;
}

@media(max-width:782px){
  body.admin-bar.esch-landing-page .site-header {
    top:46px !important;
  }

  body.admin-bar.esch-landing-page .scroll-progress {
    top:46px !important;
  }
}

body.esch-landing-page .site-header {
  z-index:1000 !important;
}

body.esch-landing-page .scroll-progress {
  z-index:1001 !important;
}

/* CTA desktop layout: keep form beside the text, even with Elementor/CF7 wrappers */
@media(min-width:960px){
  body.esch-landing-page .cta .shell.wrap,
  body.esch-landing-page .cta .wrap {
    display:grid !important;
    grid-template-columns:minmax(0, .48fr) minmax(420px, .52fr) !important;
    gap:clamp(56px,6vw,88px) !important;
    align-items:center !important;
  }

  body.esch-landing-page .cta .wrap > .reveal:first-child,
  body.esch-landing-page .cta .wrap > div:first-child:not(.form):not(.wpcf7) {
    grid-column:1 !important;
    grid-row:1 !important;
    min-width:0 !important;
  }

  body.esch-landing-page .cta .wrap > .form,
  body.esch-landing-page .cta .wrap > form,
  body.esch-landing-page .cta .wrap > .wpcf7,
  body.esch-landing-page .cta .wrap > .elementor-shortcode,
  body.esch-landing-page .cta .wrap > div:has(.wpcf7) {
    grid-column:2 !important;
    grid-row:1 !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    align-self:center !important;
  }

  body.esch-landing-page .cta .form,
  body.esch-landing-page .cta .wpcf7 {
    width:100% !important;
    max-width:none !important;
  }
}

/* CTA desktop layout for current WordPress markup: section.cta.section > .shell */
@media(min-width:960px){
  body.esch-landing-page section.cta.section > .shell,
  body.esch-landing-page .cta.section > .shell,
  body.esch-landing-page .cta > .shell {
    display:grid !important;
    grid-template-columns:minmax(0, .48fr) minmax(420px, .52fr) !important;
    gap:clamp(56px,6vw,88px) !important;
    align-items:center !important;
  }

  body.esch-landing-page section.cta.section > .shell > .reveal:first-child,
  body.esch-landing-page .cta.section > .shell > .reveal:first-child,
  body.esch-landing-page .cta > .shell > .reveal:first-child {
    grid-column:1 !important;
    grid-row:1 !important;
    min-width:0 !important;
  }

  body.esch-landing-page section.cta.section > .shell > :not(.reveal):not(style):not(script),
  body.esch-landing-page .cta.section > .shell > :not(.reveal):not(style):not(script),
  body.esch-landing-page .cta > .shell > :not(.reveal):not(style):not(script) {
    grid-column:2 !important;
    grid-row:1 !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    align-self:center !important;
  }

  body.esch-landing-page .cta > .shell > .wpcf7,
  body.esch-landing-page .cta > .shell > .elementor-shortcode,
  body.esch-landing-page .cta > .shell > div:has(.wpcf7),
  body.esch-landing-page .cta > .shell .wpcf7 {
    width:100% !important;
    max-width:none !important;
  }
}