/* ---------------------------------------------------------------
   site.css — Stylesheet der Landingpage (DE und EN gemeinsam)
   --------------------------------------------------------------- */
html{color-scheme:light dark;}
  body{margin:0;}
  img{max-width:100%;}
  [hidden]{display:none!important;}


:root{
  --paper:#ffffff;
  --haze:#f3f6f9;
  --ink:#101b2e;
  --navy:#243861;
  --muted:#5c6b84;
  --rule:#dbe2ec;
  --rule-soft:#e9eef4;
  --action:#1863dc;
  --cyan:#8dd5fb;
  --spark:#ec00eb;
  --ok:#0e7a52;
  --warn:#b0491a;
  --unknown:#6b7a92;
  --on-grad:#ffffff;
  --grad:linear-gradient(112deg,#8dd5fb 0%,#3c98e9 26%,#1863dc 52%,#243861 78%,#3a1f5e 100%);
  --measure:62ch;
  --pad:clamp(20px,5vw,64px);
  --gap:clamp(28px,4vw,56px);
  --sec:clamp(64px,8vw,132px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0b1220;
    --haze:#111c2e;
    --ink:#e8eef7;
    --navy:#bcd0f0;
    --muted:#93a4be;
    --rule:#23324c;
    --rule-soft:#1a2740;
    --action:#6aa6ff;
    --cyan:#8dd5fb;
    --spark:#ff5cf6;
    --ok:#3fc596;
    --warn:#e8945c;
    --unknown:#8695ad;
  }
}
:root[data-theme="dark"]{
  --paper:#0b1220;
  --haze:#111c2e;
  --ink:#e8eef7;
  --navy:#bcd0f0;
  --muted:#93a4be;
  --rule:#23324c;
  --rule-soft:#1a2740;
  --action:#6aa6ff;
  --cyan:#8dd5fb;
  --spark:#ff5cf6;
  --ok:#3fc596;
  --warn:#e8945c;
  --unknown:#8695ad;
}

*{box-sizing:border-box;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:inherit;}
:focus-visible{outline:2px solid var(--action);outline-offset:3px;}

.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--pad);}

/* ---------- type roles ---------- */
.mono{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
}
.display{
  font-family:Abel,"IBM Plex Sans",sans-serif;font-weight:400;
  text-transform:uppercase;line-height:1.04;letter-spacing:.005em;
  text-wrap:balance;margin:0;
}
h1.display{font-size:clamp(38px,7.2vw,86px);}
h2.display{font-size:clamp(30px,4.6vw,58px);}
h3.display{font-size:clamp(19px,2vw,25px);line-height:1.14;}
p{margin:0;}
.lead{font-size:clamp(16px,1.35vw,18px);color:var(--muted);max-width:var(--measure);}
.body{color:var(--muted);max-width:var(--measure);}
.strong{color:var(--ink);}

/* ---------- header ---------- */
.top{
  position:sticky;top:0;z-index:30;background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.top-in{display:flex;align-items:center;gap:clamp(16px,3vw,40px);height:62px;}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none;}
.brand-mark{width:auto;height:30px;flex:none;display:block;}
.brand-name{
  font-family:Abel,sans-serif;font-size:23px;letter-spacing:-.005em;
  color:var(--navy);line-height:1;
}
.top nav{display:flex;gap:clamp(14px,2vw,26px);margin-left:auto;}
.top nav a{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;color:var(--muted);
  padding:4px 0;border-bottom:1px solid transparent;transition:color .15s,border-color .15s;
}
.top nav a:hover{color:var(--ink);border-bottom-color:var(--action);}
@media(max-width:1000px){.top nav{display:none;}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;font-weight:500;text-decoration:none;
  padding:13px 20px;border:1px solid transparent;border-radius:0;
  transition:background .16s,color .16s,border-color .16s;white-space:nowrap;
}
.btn-solid{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.btn-solid:hover{background:var(--action);border-color:var(--action);color:#fff;}
.btn-line{background:transparent;color:var(--ink);border-color:var(--rule);}
.btn-line:hover{border-color:var(--ink);}
.btn-onGrad{background:#fff;color:#0b1220;border-color:#fff;}
.btn-onGrad:hover{background:transparent;color:#fff;}
.btn-onGradLine{background:transparent;color:#fff;border-color:rgba(255,255,255,.55);}
.btn-onGradLine:hover{border-color:#fff;background:rgba(255,255,255,.1);}
.btn .arw{font-size:13px;line-height:1;}
.top .btn{padding:9px 15px;}
.top .btn .cta-short{display:none;}
@media(max-width:520px){
  .top .btn{padding:8px 11px;font-size:10px;letter-spacing:.09em;gap:6px;}
  .top-in{gap:12px;}
  .top .btn .cta-long{display:none;}
  .top .btn .cta-short{display:inline;}
}
@media(max-width:330px){.top .btn{display:none;}}

/* sehr schmale Displays: lange deutsche Komposita umbrechen lassen */
@media(max-width:400px){
  .display,.lead,.body,.hero-sub{overflow-wrap:anywhere;hyphens:auto;}
}

/* ---------- gradient panels ---------- */
.grad{background:var(--grad);background-size:180% 180%;color:var(--on-grad);position:relative;overflow:hidden;}
.grad::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 74% at 84% 12%,rgba(236,0,235,.42),transparent 68%);
  mix-blend-mode:screen;
}
@media(prefers-reduced-motion:no-preference){
  .grad{animation:drift 26s ease-in-out infinite alternate;}
}
@keyframes drift{from{background-position:0% 50%;}to{background-position:100% 50%;}}
.grad>*{position:relative;z-index:1;}

.hero{padding-block:clamp(56px,9vw,110px) clamp(46px,7vw,84px);}
.hero .mono{color:rgba(255,255,255,.78);}
.hero h1{color:#fff;max-width:16ch;margin-top:22px;}
.hero-sub{
  margin-top:26px;max-width:52ch;font-size:clamp(16px,1.4vw,19px);
  color:rgba(255,255,255,.9);
}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;}
.hero-strip{
  margin-top:clamp(40px,6vw,72px);padding-top:20px;
  border-top:1px solid rgba(255,255,255,.28);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:20px 28px;
}
.hero-strip div{color:rgba(255,255,255,.85);font-size:13.5px;line-height:1.45;}
.hero-strip b{display:block;color:#fff;font-weight:500;margin-bottom:3px;}

/* ---------- section frame ---------- */
.sec{border-top:1px solid var(--rule);padding-block:var(--sec);}
.sec.alt{background:var(--haze);}
.meta{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  color:var(--muted);padding-bottom:clamp(30px,4vw,52px);
}
.meta .idx{color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;}
.head{
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:var(--gap);align-items:start;
}
@media(max-width:880px){.head{grid-template-columns:1fr;}}
.pull{
  font-family:Abel,sans-serif;text-transform:none;
  font-size:clamp(21px,2.5vw,31px);line-height:1.24;color:var(--navy);
  max-width:30ch;margin-top:clamp(34px,4.5vw,60px);
  padding-left:20px;border-left:2px solid var(--spark);
}

/* ---------- four-beat chain ---------- */
.chain{
  margin-top:clamp(40px,5.5vw,72px);
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:2px solid transparent;
  border-image:var(--grad) 1;
}
@media(max-width:940px){.chain{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.chain{grid-template-columns:1fr;}}
.beat{padding:22px 22px 4px 0;border-left:1px solid var(--rule);padding-left:22px;}
.beat:first-child{border-left:0;padding-left:0;}
@media(max-width:940px){
  .beat:nth-child(3){border-left:0;padding-left:0;}
  .beat:nth-child(n+3){margin-top:26px;}
}
@media(max-width:520px){
  .beat{border-left:0;padding-left:0;}
  .beat:nth-child(n+2){margin-top:26px;}
}
.beat .n{color:var(--action);display:block;margin-bottom:12px;}
.beat h3{margin-bottom:9px;}
.beat p{font-size:14px;color:var(--muted);line-height:1.5;}
.beat .q{font-size:13.5px;color:var(--ink);margin-bottom:7px;}

/* ---------- detail grid ---------- */
.detail{
  margin-top:clamp(38px,5vw,64px);padding-top:26px;border-top:1px solid var(--rule);
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
}
@media(max-width:940px){.detail{grid-template-columns:repeat(2,1fr);row-gap:30px;}}
@media(max-width:560px){.detail{grid-template-columns:1fr;row-gap:26px;}}
.detail>div{padding-left:22px;padding-right:22px;border-left:1px solid var(--rule-soft);}
.detail>div:first-child{border-left:0;padding-left:0;}
@media(max-width:940px){.detail>div:nth-child(3){border-left:0;padding-left:0;}}
@media(max-width:560px){.detail>div{border-left:0;padding-left:0;padding-right:0;}}
.detail .mono{color:var(--action);display:block;margin-bottom:10px;}
.detail p{font-size:14px;color:var(--muted);line-height:1.55;}

/* ---------- question list ---------- */
.qs{
  margin-top:clamp(38px,5vw,60px);border-top:1px solid var(--rule);
  display:grid;grid-template-columns:repeat(2,1fr);
}
@media(max-width:720px){.qs{grid-template-columns:1fr;}}
.q-row{
  display:flex;gap:16px;align-items:baseline;
  padding:16px 22px 16px 0;border-bottom:1px solid var(--rule-soft);
}
.qs>.q-row:nth-child(even){padding-left:22px;border-left:1px solid var(--rule-soft);}
@media(max-width:720px){.qs>.q-row:nth-child(even){padding-left:0;border-left:0;}}
.q-row .mono{color:var(--muted);flex:none;font-variant-numeric:tabular-nums;}
.q-row span:last-child{font-size:15.5px;}

/* ---------- verdict pills ---------- */
.verdicts{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;}
.pill{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;padding:6px 12px;border:1px solid currentColor;
}
.pill.ok{color:var(--ok);}
.pill.bad{color:var(--warn);}
.pill.unk{color:var(--unknown);}

/* ---------- architecture rail ---------- */
.arch{
  margin-top:clamp(38px,5vw,64px);display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--rule);
}
@media(max-width:820px){.arch{grid-template-columns:1fr;}}
.arch>div{padding:24px 22px 0 22px;border-left:1px solid var(--rule-soft);}
.arch>div:first-child{border-left:0;padding-left:0;}
@media(max-width:820px){.arch>div{border-left:0;padding-left:0;padding-right:0;}}
.arch .mono{display:block;color:var(--action);margin-bottom:10px;}
.arch p{font-size:14px;color:var(--muted);line-height:1.55;}

/* ---------- closing ---------- */
.close{padding-block:clamp(64px,9vw,116px) clamp(58px,7vw,92px);}
.close h2{color:#fff;max-width:20ch;}
.close p{color:rgba(255,255,255,.9);max-width:48ch;margin-top:22px;font-size:clamp(16px,1.3vw,18px);}
.close .mono{color:rgba(255,255,255,.78);}
.close-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;}

/* ---------- contact form ---------- */
#demo,#kontakt,#contact{scroll-margin-top:74px;}
.close-direct{
  margin-top:clamp(28px,4vw,44px);padding-top:22px;
  border-top:1px solid rgba(255,255,255,.28);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,max-content));gap:18px 40px;
}
.close-direct div{color:rgba(255,255,255,.85);font-size:14px;line-height:1.5;}
.close-direct .mono{display:block;color:rgba(255,255,255,.7);margin-bottom:5px;}
.close-direct a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45);}
.close-direct a:hover{border-bottom-color:#fff;}
.close-in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,clamp(330px,40%,470px));
  gap:clamp(32px,5vw,68px);align-items:start;
}
@media(max-width:920px){.close-in{grid-template-columns:1fr;}}

.close .form-card{
  background:var(--paper);color:var(--ink);
  padding:clamp(24px,3vw,34px);
  box-shadow:0 20px 54px rgba(11,18,32,.26);
}
.close .form-card .mono{color:var(--muted);display:block;}
.close .form-card h3{
  font-family:Abel,"IBM Plex Sans",sans-serif;font-weight:400;text-transform:uppercase;
  font-size:clamp(20px,2vw,26px);line-height:1.12;letter-spacing:.005em;
  color:var(--ink);margin:10px 0 0;
}
.close .form-card p{color:var(--muted);max-width:none;margin-top:0;font-size:13px;line-height:1.55;}

.field{display:block;margin-top:17px;}
.field-label{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;font-weight:500;color:var(--muted);
  display:block;margin-bottom:6px;
}
.field-label .req{color:var(--spark);}
.field input,.field textarea{
  width:100%;display:block;font-family:inherit;font-size:15px;line-height:1.5;
  color:var(--ink);background:var(--haze);
  border:1px solid var(--rule);border-radius:0;padding:11px 13px;
  transition:border-color .15s,background .15s,box-shadow .15s;
}
.field textarea{min-height:116px;resize:vertical;}
.field input:hover,.field textarea:hover{border-color:var(--muted);}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--action);background:var(--paper);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--action) 22%,transparent);
}
.field input:user-invalid,.field textarea:user-invalid{border-color:var(--warn);}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:480px){.field-row{grid-template-columns:1fr;gap:0;}}
.field-row .field{margin-top:17px;}

.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}

.close .form-card button.btn{cursor:pointer;margin-top:22px;width:100%;justify-content:center;}
.close .form-card button.btn[disabled]{opacity:.6;cursor:progress;}
.close .form-card .form-status{
  margin-top:12px;font-size:13px;line-height:1.5;color:var(--muted);
}
.close .form-card .form-status.is-error{color:var(--warn);}
.close .form-card .form-note{margin-top:16px;font-size:12px;color:var(--muted);}
.close .form-card .form-note a{color:var(--action);}

.close .form-done{padding:clamp(6px,1vw,12px) 0;}
.close .form-done .mono{color:var(--ok);}
.close .form-done h3{margin-top:10px;}
.close .form-done p{margin-top:12px;font-size:14px;}
.close .form-done:focus{outline:none;}
.close .form-done:focus-visible{outline:2px solid var(--action);outline-offset:6px;}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--rule);padding-block:44px 52px;}
.foot-in{display:flex;flex-wrap:wrap;gap:26px 40px;align-items:flex-start;}
.foot .mono{color:var(--muted);}
.foot-note{margin-left:auto;max-width:44ch;font-size:13px;color:var(--muted);line-height:1.55;}
.foot-brand{display:flex;align-items:center;gap:9px;}
.foot-legal{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;}
.foot-legal a{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;color:var(--muted);
  border-bottom:1px solid transparent;transition:color .15s,border-color .15s;
}
.foot-legal a:hover{color:var(--ink);border-bottom-color:var(--action);}

/* ---------- Sprachumschalter ---------- */
.lang{display:flex;align-items:center;gap:7px;flex:none;}
.lang a{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;color:var(--muted);
  padding:3px 5px;border:1px solid transparent;transition:color .15s,border-color .15s;
}
.lang a:hover{color:var(--ink);border-color:var(--rule);}
.lang a[aria-current="true"]{color:var(--ink);border-color:var(--action);}
.lang .sep{color:var(--rule);font-size:11px;}
.top .lang{margin-left:clamp(10px,2vw,20px);}
@media(max-width:1000px){.top .lang{margin-left:auto;}}

/* schmale Displays: Kopfzeile zweizeilig, Umschalter in die zweite Reihe */
@media(max-width:620px){
  .top-in{height:auto;flex-wrap:wrap;gap:12px;row-gap:8px;padding-block:10px;}
  .brand{order:1;}
  .top .btn{order:2;margin-left:auto;}
  .top .lang{order:3;margin-left:0;width:100%;}
  #demo,#kontakt,#contact{scroll-margin-top:104px;}
}
.foot-legal .lang{margin-left:4px;}