/* Messelix Produktseite – Farbwelt Mitternacht/Champagner wie die App (Richtung B „Klarheit").
   Reines CSS, keine externen Dateien. Schrift: Hanken Grotesk, lokal. */
@font-face{font-family:'Hanken Grotesk';src:url('assets/fonts/HankenGrotesk-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
:root{--p:#1B2440;--p2:#2E3A5E;--a:#C9A96E;--a-h:#D8BC86;--bg:#F4F3F0;--surface:#E7E5E0;--surface-2:#DCE2E8;
  --ink:#151B2E;--muted:#555A66;--line:rgba(21,27,46,.14);--on-p:#E4E7F0;--on-p2:#C3CADC;--white:#fff;
  --sans:'Hanken Grotesk','Helvetica Neue','Segoe UI',Arial,sans-serif;--gut:20px;--r:28px}
@media (min-width:760px){:root{--gut:32px;--r:36px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--sans)}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--p);outline-offset:3px}
.hero :focus-visible,.dark :focus-visible,.cta :focus-visible{outline-color:var(--a)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:12px;top:-60px;background:var(--p);color:#fff;padding:10px 16px;border-radius:999px;z-index:30}
.skip:focus{top:12px}

/* Typo */
h1{font-size:clamp(38px,8.2vw,70px);line-height:1.04;font-weight:300;letter-spacing:-.03em;text-wrap:balance}
h2{font-size:clamp(28px,5vw,44px);line-height:1.12;font-weight:350;letter-spacing:-.025em;text-wrap:balance}
h3,dt{font-size:18px;line-height:1.3;font-weight:650;letter-spacing:-.005em}
.lead{font-size:clamp(18px,2.4vw,21px);line-height:1.55;max-width:56ch;color:var(--on-p2)}
.lead-d{font-size:clamp(17px,2.2vw,19px);line-height:1.6;max-width:58ch;color:var(--muted)}
.muted{color:var(--muted)}

/* Knöpfe */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 26px;border-radius:999px;background:var(--p);color:#fff;
  font:600 16px/1.3 var(--sans);text-decoration:none;border:2px solid transparent;transition:background .15s}
.btn:hover{background:var(--p2)}
.btn-sm{min-height:44px;padding:9px 20px;font-size:15px}
.btn-lg{min-height:56px;padding:15px 34px;font-size:17px}
.btn-accent{background:var(--a);color:var(--ink)}.btn-accent:hover{background:var(--a-h)}
.btn-ghost{background:transparent;color:var(--on-p);border-color:rgba(228,231,240,.38)}.btn-ghost:hover{background:rgba(255,255,255,.08);border-color:var(--on-p)}

/* Kopf */
.top{position:sticky;top:0;z-index:20;background:rgba(244,243,240,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.brand{display:block;margin-left:-8px;line-height:0} /* 8 px = Freiraum im Logo (16 von 124 Einheiten bei 60 px Höhe) */
.brand img{width:auto;height:60px}
.menu{display:flex;gap:28px;margin-left:auto}
.menu a{text-decoration:none;font-weight:500;color:var(--muted);padding:8px 2px}
.menu a:hover{color:var(--ink);text-decoration:underline}
@media (min-width:900px){.m-only{display:none}.top-in{gap:28px}}
/* Handy: kompakter Kopf (Logo + Knopf in einer Zeile), Sprungmarken als wischbare Zeile darunter */
@media (max-width:899px){
  html{scroll-padding-top:104px}
  .top-in{flex-wrap:wrap;row-gap:0;padding-top:6px;min-height:0;position:relative}
  .top-in .brand{margin-left:-5px;min-height:48px;display:flex;align-items:center}
  .brand img{height:40px}
  .menu{order:3;flex:0 0 100%;margin:0 calc(var(--gut) * -1);padding:0 var(--gut);gap:22px;overflow-x:auto;white-space:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .menu::-webkit-scrollbar{display:none}
  .menu a{padding:9px 2px;font-size:15px;line-height:1.4}
  /* Verlauf am rechten Rand: Hinweis, dass die Zeile wischbar ist */
  .top-in.has-menu::after{content:"";position:absolute;right:0;bottom:0;width:44px;height:40px;pointer-events:none;background:linear-gradient(to right,rgba(244,243,240,0),#F4F3F0)}
}
/* Hero: dunkle Fläche, Handy wächst von unten ins Bild */
.hero{background:var(--p);color:var(--on-p);margin:12px 12px 0;border-radius:var(--r);overflow:hidden}
@media (min-width:760px){.hero{margin:16px 16px 0}}
@media (min-width:1472px){.hero{margin:16px auto 0;max-width:1440px}}
.hero-in{display:grid;gap:36px;padding:44px 22px 0;max-width:1200px;margin:0 auto}
.hero-text{display:flex;flex-direction:column;gap:24px}
.hero h1{color:#fff}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.hero-facts{display:grid;gap:18px;margin-top:8px;padding-top:24px;border-top:1px solid rgba(228,231,240,.18)}
.hero-facts li{font-size:15px;line-height:1.5;color:var(--on-p2)}
.hero-facts b{display:block;color:#fff;font-weight:650;font-size:16px;margin-bottom:2px}
.hero-shot{display:flex;justify-content:center}
.hero .phone.cut{width:min(290px,78%);margin-top:4px}
.phone.cut{border-bottom:0;border-radius:40px 40px 0 0;max-height:400px;overflow:hidden}
@media (min-width:900px){
  .hero-in{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:56px;padding:76px 32px 0}
  .hero-text{padding-bottom:76px}
  .hero-shot{align-items:flex-end;justify-content:flex-end;padding-top:0}
  .hero .phone.cut{width:min(330px,100%);max-height:none;margin-top:0;align-self:flex-end}
  .hero-facts{grid-template-columns:repeat(3,1fr);gap:22px}
}
@media (min-width:900px) and (max-width:1100px){.hero-facts{grid-template-columns:1fr}}

/* Geräterahmen */
.phone{background:var(--p2);border:9px solid var(--p2);border-radius:44px;overflow:hidden}
.phone img{border-radius:34px}
.phone.cut img{border-radius:32px 32px 0 0}
.phone figcaption,.browser figcaption{font-size:14px;color:var(--muted);padding:12px 6px 0}
.browser{border-radius:20px;border:1px solid var(--line);background:#fff;overflow:hidden}
.browser img{width:100%}
.browser figcaption{padding:12px 18px 14px;background:var(--bg);border-top:1px solid var(--line)}
/* Beschriftung außerhalb des Handy-Rahmens */
.duo>.phone{background:none;border:0;border-radius:0;overflow:visible}
.duo>.phone img{border:9px solid var(--p2);border-radius:44px;background:var(--p2)}

/* Abschnitte */
.sec{padding:64px 0}
.sec-tint{background:var(--surface)}
.dark{background:var(--p);color:var(--on-p)}
.dark h2{color:#fff}.dark .lead-d{color:var(--on-p2)}
.dark dt{color:#fff}.dark .items dd{color:var(--on-p2)}
.dark .items>div{border-top-color:rgba(228,231,240,.22)}
@media (min-width:900px){.sec{padding:104px 0}}
.head-wide{display:grid;gap:16px;margin-bottom:36px}
@media (min-width:900px){.head-wide{margin-bottom:52px}}

/* Erfassen: Überschrift links, Ablauf rechts (echte Reihenfolge, daher nummeriert) */
.split{display:grid;gap:36px}
.split-head{display:grid;gap:16px;align-content:start}
.steps{counter-reset:s;display:grid;gap:0}
.steps li{counter-increment:s;position:relative;padding:22px 0 22px 56px;border-top:1px solid var(--line)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps li::before{content:counter(s);position:absolute;left:0;top:18px;font-size:34px;line-height:1;font-weight:250;color:var(--p2);width:40px}
.steps p{color:var(--muted);margin-top:6px;max-width:52ch}
@media (min-width:900px){.split{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:80px}.split-head{position:sticky;top:110px}}

/* Zwei Spalten mit Bild */
.duo{display:grid;gap:36px;align-items:start}
.duo>.phone{max-width:340px;margin:0 auto;width:100%}
.duo-text{display:grid;gap:20px}
.duo-text .items{margin-top:8px}
@media (min-width:900px){
  .duo{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:80px}
  .duo-rev{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center}
  .duo>.phone{margin:0}
  .duo>.phone{position:sticky;top:100px}
}

/* Merkmalslisten: Linie oben trägt die Gliederung */
.items{display:grid;gap:0}
.items>div{border-top:1px solid var(--line);padding:20px 0 22px;display:grid;gap:6px;align-content:start}
.items dd{color:var(--muted);max-width:60ch}
.items.cols{margin-top:44px}
.head-wide+.items.cols{margin-top:0}
@media (min-width:760px){.items.cols{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}}
@media (min-width:1000px){.items.cols.three{grid-template-columns:repeat(3,minmax(0,1fr))}}
.plain{display:grid;gap:14px}
.plain li{padding-left:20px;position:relative;color:var(--muted);max-width:58ch}
.plain li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:2px;background:var(--a)}
.plain b{color:var(--ink);font-weight:650}

/* Preis */
.price{display:grid;gap:40px}
.price-main{display:grid;gap:20px;align-content:start}
.big{font-size:clamp(20px,3vw,26px);line-height:1.3;font-weight:400;color:var(--ink)}
.big span{display:block;font-size:clamp(76px,16vw,128px);line-height:1;font-weight:250;letter-spacing:-.04em;margin-bottom:8px}
.price-list{gap:0}
.price-list li{padding:20px 0 20px 0;border-top:1px solid var(--line);color:var(--muted)}
.price-list li::before{display:none}
.price-list li:last-child{border-bottom:1px solid var(--line)}
.price-list{max-width:none}
@media (min-width:900px){.price{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:center}.price-list li{padding-left:0}}

/* Kontakt */
.cta{background:var(--p);color:var(--on-p);margin:0 12px;border-radius:var(--r);padding:56px 0}
@media (min-width:760px){.cta{margin:0 16px;padding:80px 0}}
@media (min-width:1472px){.cta{max-width:1440px;margin:0 auto}}
.cta h2{color:#fff}.cta .lead-d{color:var(--on-p2);margin-top:14px}
.cta-in{display:grid;gap:28px;align-items:center}
@media (min-width:900px){.cta-in{grid-template-columns:minmax(0,1fr) auto;gap:64px}}

/* Fuß */
.foot{padding:40px 0 48px;color:var(--muted);font-size:15px}
.foot-in{display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between}
.foot nav{display:flex;gap:24px}
.foot a{padding:10px 0}

/* Kopf mit Text links und Liste rechts */
.head-two{display:grid;gap:28px;margin-bottom:40px}
@media (min-width:900px){.head-two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:end;margin-bottom:56px}}

.cta-act{margin:0}

.foot-id{display:grid;gap:6px}
.foot-logo{width:auto;height:45px;margin-left:-6px}

/* Kopf: Anmelden + Jetzt buchen */
.top-act{display:flex;align-items:center;gap:18px}
.link-quiet{color:var(--muted);text-decoration:none;font-weight:500;padding:10px 2px}
.link-quiet:hover{color:var(--ink);text-decoration:underline}
@media (max-width:899px){.top-act{margin-left:auto;gap:14px}.top-in .menu{margin-left:calc(var(--gut) * -1)}}
/* Preis: Ablauf */
.price-side{display:grid;gap:28px;min-width:0}
.price-alt{display:grid;gap:20px;padding-top:28px;border-top:1px solid var(--line)}
.price-alt .big span{font-size:clamp(56px,11vw,88px)}
.price-side .steps li{padding:18px 0 18px 56px}
.cta-act{display:grid;gap:12px;justify-items:start}
.cta-login{margin:0;color:var(--on-p2);font-size:16px}
.cta-login a{color:#fff}
@media (min-width:900px){.cta-act{justify-items:end}}
.foot-id a{color:inherit}
/* Rechtsseiten */
.legal{padding-top:48px;padding-bottom:96px;max-width:860px;margin:0 auto}
.legal h1{font-size:clamp(32px,6vw,48px);margin-bottom:20px}
.legal h2{font-size:21px;line-height:1.3;font-weight:650;letter-spacing:-.01em;margin:36px 0 10px}
.legal p,.legal ul{max-width:72ch;margin-bottom:12px}
.legal ul{padding-left:22px;list-style:disc}
.legal li{margin-bottom:6px}
.legal a{overflow-wrap:anywhere}
.legal .lead-d{margin-bottom:8px}
.stand{margin-top:36px;color:var(--muted)}
.foot-id a{padding:0}

/* Interessenten-Formular */
.duo-form{display:grid;gap:36px;align-items:start}
@media (min-width:900px){.duo-form{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:80px}}
.req{display:grid;gap:16px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px}
.f-row{display:grid;gap:6px}
.f-row label{font-weight:600;font-size:15px}
.req-s{font-weight:400;color:var(--muted)}
.req input[type=text],.req input[type=email],.req input[type=tel],.req input[type=number]{width:100%;min-height:48px;padding:10px 14px;border:1px solid rgba(21,27,46,.35);border-radius:12px;background:#fff;color:var(--ink);font:inherit}
.req input:focus-visible{outline:3px solid var(--p);outline-offset:1px}
.f-check{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;font-size:15px;line-height:1.5}
.f-check input{width:24px;height:24px;margin:2px 0 0;accent-color:var(--p)}
.f-note{font-size:14px;margin:0}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.btn-outline{background:transparent;color:var(--p);border-color:var(--p)}.btn-outline:hover{background:var(--surface)}
.price-act{display:flex;flex-wrap:wrap;gap:12px}
.cta-act .btn-ghost{justify-self:start}
@media (min-width:900px){.cta-act .btn-ghost{justify-self:end}}