/* Clearfront — Leitrichtung Favorit Studio (Refero 58aa5f84-1477-482d-8ded-f90c28860cb7),
   Preise nach Displace (fe0ac316-3a0e-4041-9da6-39c05efe2d59). Eigene Tokens, keine Kopie. */
:root{
  --canvas:#ffffff;
  --ink:#000000;
  --gutter:clamp(1.2rem, 0.65rem + 0.77vw, 1.4rem);
  --pad-y:clamp(2.75rem, 1.8rem + 1.3vw, 4.5rem);
  --serif:"Newsreader", "Times New Roman", Times, serif;
  --sans:"Inter", "Helvetica Neue", Helvetica, sans-serif;
  --ease:cubic-bezier(.22, 1, .36, 1);
  --measure:38rem;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important; transition:none!important}
}
body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(16px, 0.9rem + 0.25vw, 18.5px);
  line-height:1.45;
  letter-spacing:-0.01em;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration-thickness:1px; text-underline-offset:0.2em}
a:hover{text-decoration:none}
button,input,textarea{font:inherit; color:inherit; background:transparent; border:0; border-radius:0}
button{cursor:pointer}
:focus-visible{outline:1px solid var(--ink); outline-offset:3px}
.dark :focus-visible{outline-color:var(--canvas)}
.skip{
  position:absolute; left:var(--gutter); top:0; transform:translateY(-120%);
  background:var(--ink); color:var(--canvas); padding:8px 12px; z-index:20;
}
.skip:focus{transform:none}
.vis{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* —— Masthead (Favorit: editorial identity, no logo capsule) —— */
.mast{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem 2rem;
  flex-wrap:wrap;
  padding:0.7rem var(--gutter) 0.55rem;
}
.mast{
  align-items:center;
  padding:0.85rem var(--gutter);
  /* slightly tighter than the old monumental mast */
}
.mast .brand{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.45rem, 1.15rem + 0.7vw, 1.8rem);
  line-height:1;
  letter-spacing:-0.025em;
  text-decoration:none;
}
nav.main{
  display:flex;
  flex-wrap:wrap;
  gap:0.35rem 1.35rem;
  font-size:clamp(14px, 0.8rem + 0.25vw, 16.5px);
  letter-spacing:-0.01em;
  padding-top:0;
}
nav.main a{text-decoration:none}
nav.main a:hover,nav.main a[aria-current]{text-decoration:underline}

/* —— Hero: two-column offer + product mockup
   Layout from Krisp (b02de7c8-4c35-415a-810f-416588407db5) and Cal.com (299fb661-8aaa-479e-aa31-2dc8dee3893e):
   slim nav wordmark, headline + subline + primary/secondary CTA left, framed product on the right,
   compact proof row. Tokens stay Favorit (white/black, Regular, 0-radius actions, no pills, no shadows).
   Floating desktop+phone from Squarespace/Craftwork imagery role, rebuilt with the anonymized Praxis-Beispielentwurf. —— */
.hero{
  display:grid;
  gap:1.5rem 2.75rem;
  align-items:start;
  padding:1.15rem var(--gutter) 2.2rem;
}
@media (min-width:960px){
  .hero{
    grid-template-columns:minmax(20rem, 0.88fr) minmax(28rem, 1.22fr);
    padding:1.5rem var(--gutter) 2.4rem;
    align-items:center;
    /* First screen is a complete poster; next chapter starts below the fold. */
    min-height:calc(100vh - 3.6rem);
  }
}
.hero-copy h1{
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(2.15rem, 2.15rem + 2.15vw, 4.05rem);
  line-height:0.98;
  letter-spacing:-0.045em;
  margin:0;
  text-wrap:balance;
  max-width:14ch;
}
.hero-copy .lead{
  margin:1.05rem 0 0;
  font-size:clamp(1.02rem, 0.94rem + 0.32vw, 1.22rem);
  line-height:1.4;
  letter-spacing:-0.01em;
  max-width:28rem;
}
.actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0.85rem 1.35rem;
  margin-top:1.45rem;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--ink);
  color:var(--canvas);
  text-decoration:none;
  padding:0.78rem 1.2rem;
  letter-spacing:-0.015em;
  font-size:1rem;
  line-height:1;
  border-radius:0;
  transition:opacity 0.3s var(--ease);
}
.btn:hover{opacity:0.78; text-decoration:none; color:var(--canvas)}
.btn-ghost{
  text-decoration:none;
  border-bottom:1px solid var(--ink);
  padding-bottom:0.12rem;
  letter-spacing:-0.015em;
}
.btn-ghost:hover{border-bottom-color:transparent}
.facts{
  margin:1.45rem 0 0;
  padding-top:0.85rem;
  border-top:1px solid var(--ink);
  font-size:clamp(12.5px, 0.7rem + 0.15vw, 14.5px);
  letter-spacing:-0.012em;
  line-height:1.45;
  max-width:36rem;
}

/* Browser + phone mockup */
.hero-stage{
  position:relative;
  padding:0 0 0.85rem 0;
}
@media (min-width:1100px){
  .hero-stage{padding:0.15rem 3.6rem 1.1rem 0}
}
.browser{
  border:1px solid var(--ink);
  background:var(--canvas);
  overflow:hidden;
}
.chrome{
  display:flex;
  align-items:center;
  gap:0.7rem;
  height:34px;
  padding:0 0.75rem;
  border-bottom:1px solid var(--ink);
  font-size:11.5px;
  letter-spacing:-0.01em;
}
.chrome .dots{display:flex; gap:6px; flex-shrink:0}
.chrome .dots i{
  display:block;
  width:8px; height:8px;
  border:1px solid var(--ink);
  border-radius:50%;
}
.chrome .url{
  flex:1;
  text-align:center;
  opacity:0.75;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.browser .cmp{
  aspect-ratio:16/10;
  border:0;
}
.phone{
  display:none;
}
@media (min-width:1100px){
  .phone{
    display:block;
    position:absolute;
    right:0;
    left:auto;
    bottom:0.55rem;
    width:20%;
    min-width:128px;
    max-width:156px;
    z-index:3;
    background:#111;
    border:1px solid var(--ink);
    border-radius:16px;
    padding:9px 7px 10px;
    overflow:hidden;
  }
  .phone img{
    width:100%;
    height:auto;
    aspect-ratio:390/820;
    object-fit:cover;
    object-position:top;
    border-radius:9px;
  }
}
.hero-note{
  margin:0.55rem 0 0;
  font-size:12px;
  letter-spacing:-0.01em;
  line-height:1.35;
  max-width:36rem;
}

.cap{
  margin:0 var(--gutter) var(--pad-y);
  font-size:12.5px;
  line-height:1.35;
  letter-spacing:-0.01em;
  max-width:42rem;
}

/* —— Proof / sliders —— */
.proof{padding:0 0 clamp(4rem, 9vw, 8rem)}
.chapter{
  display:block;
  padding:0 var(--gutter) 1.15rem;
  border-top:1px solid var(--ink);
  margin:0;
}
.chapter .rail{
  font-size:clamp(14px, 0.85rem + 0.2vw, 17px);
  padding:0.85rem 0 0.15rem;
  letter-spacing:-0.01em;
}
.chapter h2{
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(2rem, 3.8vw + 0.4rem, 4rem);
  line-height:1;
  letter-spacing:-0.04em;
  margin:0;
  text-wrap:balance;
  max-width:16ch;
  padding:0.1rem 0 0.2rem;
}
.intro{
  margin:0 var(--gutter) 2.2rem;
  max-width:36rem;
  font-size:clamp(1rem, 0.92rem + 0.3vw, 1.2rem);
  line-height:1.4;
}
.ex{
  margin:0 0 clamp(2.4rem, 5vw, 4.2rem);
  padding:0 var(--gutter);
}
.ex header{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1rem;
  flex-wrap:wrap;
  margin:0 0 0.7rem;
}
.ex h3{
  font-weight:400;
  font-size:clamp(1.35rem, 1.8vw + 0.6rem, 2.15rem);
  letter-spacing:-0.03em;
  line-height:1.1;
  margin:0;
}
.ex .find{
  font-size:14px;
  letter-spacing:-0.01em;
}
/* Comparison slider */
.cmp{
  --pos:52%;
  position:relative;
  container-type:inline-size;
  aspect-ratio:16/10;
  overflow:hidden;
  background:#111;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}
.cmp img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  pointer-events:none;
}
.cmp .clip{
  position:absolute;
  inset:0 auto 0 0;
  width:var(--pos);
  overflow:hidden;
  z-index:1;
}
.cmp .clip img{
  width:100cqi;
  max-width:none;
  height:100%;
}
.cmp .bar{
  position:absolute;
  top:0; bottom:0;
  left:var(--pos);
  width:1px;
  background:var(--canvas);
  transform:translateX(-0.5px);
  z-index:2;
  pointer-events:none;
}
.cmp .bar::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:36px;
  height:36px;
  border:1px solid var(--canvas);
  background:var(--ink);
  transform:translate(-50%,-50%);
  /* two chevrons via box-shadow? keep a simple square — Favorit: sharp corners */
}
.cmp .bar::after{
  content:"‹ ›";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-52%);
  color:var(--canvas);
  font-size:15px;
  letter-spacing:-0.08em;
  line-height:1;
  pointer-events:none;
}
.cmp input[type=range]{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  cursor:ew-resize;
  z-index:3;
  appearance:none;
  background:transparent;
}
.cmp .tag{
  position:absolute;
  bottom:10px;
  z-index:2;
  font-size:11px;
  letter-spacing:0.02em;
  color:var(--canvas);
  background:var(--ink);
  padding:3px 7px;
  pointer-events:none;
}
.cmp .tag-l{left:10px}
.cmp .tag-r{right:10px}
.note{
  margin:0 var(--gutter);
  font-size:13.5px;
  max-width:40rem;
  line-height:1.4;
}

/* —— Pricing (Displace: ruled operational list, monumental figure) —— */
.offer{
  padding:0 0 clamp(4.5rem, 9vw, 8rem);
}
.offer .amt{
  font-size:clamp(4.4rem, 16vw, 13.5rem);
  line-height:0.85;
  letter-spacing:-0.055em;
  font-weight:400;
  margin:0.2rem var(--gutter) 0.4rem;
  text-wrap:balance;
}
.offer .amt span{
  font-size:0.22em;
  letter-spacing:-0.02em;
  margin-left:0.15em;
  vertical-align:super;
  line-height:1;
}
.offer .blurb{
  margin:0 var(--gutter) 2.6rem;
  max-width:36rem;
}
.rows{
  margin:0 var(--gutter);
  border-top:1px solid var(--ink);
  max-width:none;
}
.row{
  display:grid;
  gap:0.35rem 2rem;
  padding:1.15rem 0 1.25rem;
  border-bottom:1px solid var(--ink);
  align-items:baseline;
}
@media (min-width:760px){
  .row{grid-template-columns:minmax(10rem,0.9fr) minmax(8rem,0.55fr) minmax(12rem,1.4fr); padding:1.35rem 0 1.45rem}
}
.row h3{
  font-weight:400;
  font-size:clamp(1.2rem, 1.4vw + 0.7rem, 1.7rem);
  letter-spacing:-0.03em;
  margin:0;
  line-height:1.15;
}
.row .fig{
  font-size:clamp(1.2rem, 1.4vw + 0.7rem, 1.7rem);
  letter-spacing:-0.035em;
  margin:0;
  line-height:1.15;
}
.row p{margin:0; font-size:0.95em; line-height:1.35; max-width:34rem}

/* —— Capability wall + Ablauf —— */
.wall{
  position:relative;
  background:var(--canvas);
  padding:clamp(3rem, 6vw, 5rem) var(--gutter) 0;
  border-top:1px solid var(--ink);
}
.wall-words{
  position:relative;
  z-index:1;
  margin:0;
  font-size:clamp(2.6rem, 9.4vw, 8.5rem);
  line-height:0.98;
  letter-spacing:-0.035em;
  font-weight:400;
  color:var(--canvas);
  mix-blend-mode:difference;
  text-wrap:balance;
  padding-bottom:0.12em;
}
.wall .band{
  position:absolute;
  left:0; right:0; bottom:0;
  height:46%;
  background:var(--ink);
  pointer-events:none;
}
.dark{
  background:var(--ink);
  color:var(--canvas);
}
.ablauf{
  padding:clamp(3rem, 6vw, 5.5rem) var(--gutter) clamp(4rem, 8vw, 7rem);
}
.ablauf-grid{
  display:grid;
  gap:2.5rem 4rem;
  align-items:start;
}
@media (min-width:860px){
  .ablauf-grid{grid-template-columns:1.1fr 0.9fr}
}
.island{
  max-width:26rem;
  font-size:clamp(1.15rem, 0.95rem + 0.55vw, 1.45rem);
  line-height:1.35;
  margin:0 0 2.4rem;
}
.steps{margin:0; padding:0; list-style:none}
.steps li{
  display:grid;
  grid-template-columns:2.2rem 1fr;
  gap:0.6rem 1rem;
  padding:0.95rem 0;
  border-top:1px solid currentColor;
}
.steps li:last-child{border-bottom:1px solid currentColor}
.steps .num{font-size:0.95rem; letter-spacing:-0.01em; padding-top:0.15rem}
.steps h3{font-weight:400; font-size:1.2rem; letter-spacing:-0.03em; margin:0 0 0.25rem; line-height:1.15}
.steps p{margin:0; font-size:0.98rem; line-height:1.35; max-width:32rem}
.ablauf figure{margin:0}
.ablauf figure img{width:100%; height:auto; max-height:min(78vh, 860px); object-fit:cover; object-position:center}

/* —— Contact —— */
.contact{
  padding:clamp(3.2rem, 7vw, 6rem) var(--gutter) 0;
}
.contact h2{
  font-weight:400;
  font-size:clamp(2.1rem, 4.2vw + 0.4rem, 4.2rem);
  line-height:1;
  letter-spacing:-0.04em;
  margin:0 0 0.8rem;
  text-wrap:balance;
  max-width:16ch;
}
.contact .mail{
  display:block;
  font-size:clamp(1.6rem, 4.8vw, 4.4rem);
  line-height:1.05;
  letter-spacing:-0.04em;
  text-decoration:none;
  margin:1.4rem 0 2.4rem;
  overflow-wrap:anywhere;
  border-bottom:1px solid currentColor;
  padding-bottom:0.12em;
  width:fit-content;
  max-width:100%;
}
.contact .mail:hover{opacity:0.65}
.form{
  display:grid;
  gap:1.15rem;
  max-width:28rem;
  padding-bottom:clamp(3rem, 6vw, 5rem);
}
.form label{
  display:grid;
  gap:0.35rem;
  font-size:13px;
  letter-spacing:-0.01em;
}
.form input,.form textarea{
  border-bottom:1px solid currentColor;
  padding:0.55rem 0 0.45rem;
  border-radius:0;
}
.form input:focus,.form textarea:focus{outline:none; border-bottom-width:2px}
.form button{
  justify-self:start;
  margin-top:0.5rem;
  border:1px solid currentColor;
  padding:0.7rem 1.15rem;
  font-size:14px;
  letter-spacing:-0.01em;
  border-radius:0;
  transition:background 0.3s var(--ease), color 0.3s var(--ease);
}
.form button:hover{background:var(--canvas); color:var(--ink)}
.form-note{font-size:13px; line-height:1.4; margin:0.3rem 0 0; opacity:0.85; max-width:28rem}

.site-foot{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:0.8rem 2rem;
  padding:1.2rem 0 1.8rem;
  border-top:1px solid currentColor;
  font-size:13.5px;
}
.site-foot a{text-decoration:none}
.site-foot a:hover{text-decoration:underline}

/* legal pages */
.legal{padding:clamp(2.5rem, 5vw, 4.5rem) var(--gutter) clamp(4rem, 8vw, 7rem); max-width:42rem}
.legal h1{
  font-weight:400;
  font-size:clamp(2.2rem, 5vw, 4rem);
  letter-spacing:-0.04em;
  line-height:1;
  margin:0 0 1.4rem;
}
.legal h2{font-weight:400; font-size:1.25rem; letter-spacing:-0.03em; margin:2rem 0 0.5rem}
.legal p{margin:0 0 0.9rem; max-width:38rem}

@media (max-width:700px){
  .mast{padding-top:0.85rem}
  .stage img{max-height:54vh}
  /* keep 16/10 on mobile so website screenshots are fully visible */
  .row .fig{margin-top:0.15rem}
}

/* Unterseiten teilen die nav-große Wortmarke */
.sub .mast{padding-bottom:0.85rem; border-bottom:1px solid var(--ink); margin-bottom:0}

@media (max-width:959px){
  .hero{padding:1.15rem var(--gutter) 2.2rem; gap:1.35rem}
  .hero-copy h1{font-size:clamp(2.15rem, 1.4rem + 6.2vw, 2.85rem); max-width:11ch}
  .actions{margin-top:1.15rem}
  .facts{margin-top:1.15rem}
  .hero-stage{order:2}
  .browser .cmp{aspect-ratio:16/10}
}