@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-tight-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/inter-tight-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:900;font-display:swap;src:url('fonts/inter-tight-latin-900-normal.woff2') format('woff2')}

:root{
  --black:#09090b;
  --raised:#0f0f12;
  --bronze:#A07830;
  --bronze-dim:rgba(160,120,48,.32);
  --cream:#F5F0E8;
  --cream-mid:rgba(245,240,232,.72);
  --cream-low:rgba(245,240,232,.45);
  --line:rgba(245,240,232,.13);
  --maxw:1080px;
}
*{box-sizing:border-box;margin:0;padding:0;border-radius:0}
html{scroll-behavior:smooth}
body{
  background:var(--black);
  color:var(--cream);
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
h1,h2,h3{font-family:"Inter Tight","Inter",sans-serif;font-weight:700;line-height:1.08;letter-spacing:-.02em}
p{max-width:62ch}
a{color:inherit}

/* eyebrow */
.eyebrow{
  font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--bronze);margin-bottom:28px;display:block;
}

/* header */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(9,9,11,.88);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.hbar{display:flex;align-items:center;justify-content:space-between;height:98px}
.logo{display:block;text-decoration:none;line-height:0}
.logo svg{height:52px;width:auto;display:block}
.flogo{margin-bottom:18px;line-height:0}
.flogo svg{height:42px;width:auto;display:block}
nav{display:flex;align-items:center;gap:34px}
nav a{font-size:14px;color:var(--cream-mid);text-decoration:none;transition:color .2s}
nav a:hover{color:var(--cream)}
.btn{
  display:inline-block;border:1px solid var(--bronze);color:var(--bronze);
  padding:13px 26px;font-size:14px;font-weight:500;text-decoration:none;
  transition:background .2s,color .2s;
}
.btn:hover{background:var(--bronze);color:var(--black)}
.btn.solid{background:var(--bronze);color:var(--black)}
.btn.solid:hover{background:transparent;color:var(--bronze)}
nav .btn{padding:11px 20px}

/* sections */
section{padding:120px 0;border-bottom:1px solid var(--line)}
section.raised{background:var(--raised)}

/* hero */
.hero{padding:170px 0 130px;border-bottom:1px solid var(--line)}
.hero h1{font-size:clamp(2.7rem,7.2vw,5.1rem);max-width:16ch}
.hero .sub{margin-top:34px;font-size:1.22rem;color:var(--cream-mid);max-width:50ch}
.hero .cta{margin-top:52px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.hero .note{font-size:14px;color:var(--cream-low)}

/* generic section head */
h2{font-size:clamp(1.9rem,4vw,2.9rem);max-width:19ch;margin-bottom:34px}
.lead{font-size:1.08rem;color:var(--cream-mid)}
.lead + .lead{margin-top:22px}

/* signature: systemgrenze */
.grenze{margin-top:80px;border-top:1px solid var(--line);padding-top:34px}
.grenze-labels{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-low);margin-bottom:26px}
.grenze-labels .right{color:var(--bronze)}
.field{
  display:grid;grid-template-columns:1fr 1px 240px;gap:0;align-items:stretch;min-height:250px;
}
.scatter{position:relative;padding:6px 40px 6px 0}
.frag{
  display:inline-block;border:1px solid var(--line);
  padding:9px 14px;font-size:13px;color:var(--cream-mid);
  margin:0 12px 12px 0;background:rgba(245,240,232,.02);
  white-space:nowrap;
}
.frag.faint{color:var(--cream-low);border-color:rgba(245,240,232,.07)}
.divider{background:var(--bronze);position:relative}
.divider span{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) rotate(90deg);
  transform-origin:center;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bronze);background:var(--black);padding:6px 10px;white-space:nowrap;
}
section.raised .divider span{background:var(--raised)}
.systembox{
  border:1px solid var(--bronze-dim);margin-left:40px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:10px;padding:30px;text-align:center;
}
.systembox strong{font-family:"Inter Tight",sans-serif;font-size:1.5rem;letter-spacing:.04em}
.systembox small{font-size:13px;color:var(--cream-low);line-height:1.5}
.grenze-foot{margin-top:26px;font-size:14px;color:var(--cream-low)}

/* ablauf */
.steps{margin-top:20px}
.step{
  display:grid;grid-template-columns:52px 1fr;gap:28px;
  padding:34px 0;border-top:1px solid var(--line);
}
.step:last-child{border-bottom:1px solid var(--line)}
.step .num{font-family:"Inter Tight",sans-serif;font-size:14px;color:var(--bronze);padding-top:5px;letter-spacing:.1em}
.step h3{font-size:1.32rem;margin-bottom:12px;font-weight:600}
.step p{color:var(--cream-mid);font-size:16px}
.price{
  display:inline-block;margin-top:16px;font-size:14px;
  border-left:2px solid var(--bronze);padding-left:14px;color:var(--cream);
}

/* beispiele */
.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);margin-top:14px;border:1px solid var(--line)}
.case{background:var(--black);padding:34px}
section.raised .case{background:var(--raised)}
.case h3{font-size:1.05rem;margin-bottom:11px;font-weight:600;color:var(--bronze)}
.case p{font-size:15px;color:var(--cream-mid)}
.cases-foot{margin-top:34px;font-size:1.02rem;color:var(--cream)}

/* rechner */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;margin-top:8px}
.calc-in{display:flex;flex-direction:column;gap:34px}
.calc-in label{display:block}
.calc-in label > span{
  display:block;font-family:"Inter Tight","Inter",sans-serif;font-weight:600;
  font-size:15px;color:var(--cream);margin-bottom:14px;line-height:1.35;
}
.sliderow{display:flex;align-items:center;gap:20px}
.sliderow input[type=range]{
  flex:1;accent-color:var(--bronze);height:2px;background:var(--line);cursor:pointer;
}
.sliderow input[type=range]:focus-visible{outline:2px solid var(--bronze);outline-offset:6px}
.sliderow b{
  font-family:"Inter Tight","Inter",sans-serif;font-weight:700;font-size:1.4rem;
  color:var(--bronze);min-width:3.2rem;text-align:right;line-height:1;
}
.calc-out{border-left:2px solid var(--bronze);padding:6px 0 6px 34px}
.co-k{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-low);margin-bottom:10px}
.co-sep{margin-top:38px}
.calc-out strong{
  display:block;font-family:"Inter Tight","Inter",sans-serif;font-weight:700;
  font-size:clamp(1.9rem,4vw,2.9rem);letter-spacing:-.02em;line-height:1;color:var(--cream);
}
.calc-out strong.hi{color:var(--bronze)}
.co-s{display:block;font-size:14px;color:var(--cream-low);margin-top:9px}
.calc-foot{margin-top:48px;font-size:15px;color:var(--cream-low);max-width:64ch}
@media (max-width:860px){
  .calc{grid-template-columns:1fr;gap:40px}
  .calc-out{padding-left:24px}
}

/* einwand, aufklappbar */
.einwand{margin-top:60px;border-left:2px solid var(--bronze);padding-left:0;max-width:78ch}
.einwand + .einwand{margin-top:0;border-top:1px solid var(--line)}
.einwand summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 36px;position:relative;
  font-family:"Inter Tight","Inter",sans-serif;font-weight:600;font-size:1.24rem;
  line-height:1.3;color:var(--cream);transition:color .2s;
}
.einwand summary::-webkit-details-marker{display:none}
.einwand summary:hover{color:var(--bronze)}
.einwand summary::after{
  content:"";position:absolute;right:12px;top:50%;width:13px;height:2px;
  background:var(--bronze);transform:translateY(-50%);
}
.einwand summary::before{
  content:"";position:absolute;right:17.5px;top:50%;width:2px;height:13px;
  background:var(--bronze);transform:translateY(-50%);transition:transform .25s ease,opacity .2s ease;
}
.einwand[open] summary::before{transform:translateY(-50%) rotate(90deg);opacity:0}
.einwand-body{padding:0 36px 26px 36px}
.einwand-body p{color:var(--cream-mid);font-size:16px}
.einwand-body p + p{margin-top:16px}
@media (prefers-reduced-motion:reduce){.einwand summary::before{transition:none}}

/* ablauf einer umsetzung */
.ablauf{margin-top:96px;border-top:1px solid var(--line);padding-top:56px}
.ablauf h2{margin-bottom:22px}
.ablauf .lead{margin-bottom:38px}
.phasen{border-top:1px solid var(--line)}
.phase{display:grid;grid-template-columns:180px 1fr;gap:32px;padding:22px 0;border-bottom:1px solid var(--line);align-items:baseline}
.phase b{font-family:"Inter Tight",sans-serif;font-weight:600;font-size:15px;color:var(--bronze)}
.phase span{color:var(--cream-mid);font-size:16px;max-width:60ch}
.ablauf-foot{margin-top:28px;font-size:15px;color:var(--cream-low)}

/* person */
.person{display:grid;grid-template-columns:300px 1fr;gap:64px;align-items:start}
.person img{width:100%;display:block}
.person .txt p{color:var(--cream-mid)}
.person .txt p + p{margin-top:20px}
.facts{margin-top:34px;border-top:1px solid var(--line);padding-top:24px}
.fact{display:flex;gap:14px;padding:9px 0;font-size:15px;color:var(--cream-mid);align-items:baseline}
.fact b{color:var(--bronze);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;min-width:112px;flex-shrink:0}

/* schluss */
.schluss{text-align:left}
.schluss h2{max-width:22ch}
.schluss .cta{margin-top:44px}

/* footer */
footer{padding:64px 0;font-size:14px;color:var(--cream-low)}
.fbar{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
footer a{color:var(--cream-low);text-decoration:none;margin-right:22px}
footer a:hover{color:var(--cream)}

/* reveal */
.rv{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

@media (max-width:860px){
  .wrap{padding:0 22px}
  nav a:not(.btn){display:none}
  .hbar{height:72px}
  .logo svg{height:36px}
  .flogo svg{height:32px}
  section{padding:80px 0}
  .hero{padding:110px 0 90px}
  .field{grid-template-columns:1fr;min-height:0}
  .divider{height:1px;margin:34px 0}
  .divider span{transform:translate(-50%,-50%)}
  .scatter{padding:0}
  .systembox{margin-left:0}
  .cases{grid-template-columns:1fr}
  .phase{grid-template-columns:1fr;gap:8px}
  .ablauf{margin-top:64px;padding-top:40px}
  .person{grid-template-columns:1fr;gap:34px}
  .person img{max-width:240px}
}

/* rechtsseiten */
.legal{padding:150px 0 110px}
.legal h1{font-size:clamp(2rem,4.5vw,3rem);margin-bottom:34px}
.legal h2{font-size:1.35rem;max-width:none;margin:46px 0 16px}
.legal h3{font-size:1.05rem;font-weight:600;margin:30px 0 10px;color:var(--bronze)}
.legal p,.legal li{color:var(--cream-mid);font-size:16px;max-width:78ch}
.legal p{margin-bottom:14px}
.legal ul{margin:0 0 14px 20px}
.legal li{margin-bottom:7px}
.legal a{color:var(--bronze)}
.legal .updated{font-size:13px;color:var(--cream-low);margin-bottom:44px}
.legal .back{display:inline-block;margin-top:52px;font-size:14px;color:var(--bronze);text-decoration:none;border-bottom:1px solid var(--bronze-dim);padding-bottom:3px}
.todo{border-left:2px solid var(--bronze);background:rgba(160,120,48,.07);padding:16px 20px;margin:18px 0;font-size:15px;color:var(--cream)}
.todo b{color:var(--bronze);display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px}