/* SILVER APPLICATIONS · site.css */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:300;font-display:swap;src:url("/assets/fonts/IBMPlexSans-Light-Latin1.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/IBMPlexSans-Regular-Latin1.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/IBMPlexSans-Medium-Latin1.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/IBMPlexSans-SemiBold-Latin1.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/IBMPlexSans-Bold-Latin1.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/IBMPlexMono-Regular-Latin1.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/IBMPlexMono-Regular-Pi.woff2") format("woff2");unicode-range:U+2190-2199}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/IBMPlexMono-Medium-Latin1.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/IBMPlexMono-SemiBold-Latin1.woff2") format("woff2")}

:root{
  --a900:#15181B; --a700:#1E2328; --graphit:#3A4148; --dim:#6B747D;
  --s300:#9BA3AB; --s100:#D9DDE1; --weiss:#F4F5F6;
  --p500:#1D7A6E; --p300:#3FA893; --tanne:#123F39;
  --sans:"IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{background:var(--a900);color:var(--s100);margin:0}
html{scroll-padding-top:72px}
img,svg{max-width:100%}
body{font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--a900)}
a{color:inherit}
:focus-visible{outline:2px solid var(--p300);outline-offset:3px}
.wrap{padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px));max-width:1440px;margin-inline:auto}
.eyebrow{font:500 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--p300);margin:0 0 20px}
h2{font:300 clamp(30px,3.6vw,50px)/1.08 var(--sans);color:var(--weiss);margin:0 0 18px;letter-spacing:-.018em;text-wrap:balance}
h2 b{font-weight:600}

/* Navigation */
.skip{position:absolute;left:-9999px;top:0;z-index:50;background:var(--p500);color:var(--weiss);padding:10px 14px}
.skip:focus{left:16px;top:16px}
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--a900) 86%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--a700)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand svg{width:32px;height:32px;flex:none}
.wm{display:flex;flex-direction:column;font-family:var(--sans);font-size:12.5px;line-height:1.08;letter-spacing:.09em;text-transform:uppercase}
.wm b{font-weight:700;color:var(--weiss)}
.wm span{font-weight:400;color:var(--s300)}
.links{display:flex;gap:28px;font-size:14px;color:var(--s300)}
.links a{text-decoration:none}
.links a:hover{color:var(--weiss)}
.lang{display:flex;border:1px solid var(--graphit)}
.lang a{font:500 12px/1 var(--mono);letter-spacing:.08em;color:var(--s300);padding:8px 10px;text-decoration:none}
.lang a[aria-current="true"]{background:var(--s100);color:var(--a900)}
@media (max-width:860px){.links{display:none}}

/* Hero */
.hero{position:relative;height:min(92vh,860px);min-height:620px;overflow:hidden;border-bottom:1px solid var(--a700)}
#stage{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
.hero-inner{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-block:48px;pointer-events:none}
.copy{max-width:560px;pointer-events:auto}
h1{font-weight:300;font-size:clamp(40px,6.4vw,84px);line-height:1.02;letter-spacing:-.025em;color:var(--weiss);margin:0 0 22px;text-wrap:balance}
h1 b{font-weight:600}
.lead{font-size:clamp(16px,1.35vw,18px);color:var(--s300);max-width:46ch;margin:0 0 32px}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.btn{font:500 14px/1 var(--sans);padding:15px 22px;text-decoration:none;border:1px solid var(--graphit);color:var(--s100);transition:border-color .2s,background .2s}
.btn:hover{border-color:var(--s300)}
.btn.primary{background:var(--p500);border-color:var(--p500);color:var(--weiss)}
.btn.primary:hover{background:var(--p300);border-color:var(--p300);color:var(--a900)}

/* Ladebalken: Ablauf der Dienstleistung */
.phases{position:absolute;right:max(24px,env(safe-area-inset-right,0px));bottom:52px;width:min(380px,100%);pointer-events:auto}
.phases ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.phases li{min-width:0}
.phases .bar{display:block;height:3px;background:var(--graphit);overflow:hidden}
.phases .bar i{display:block;height:100%;width:0;background:var(--s300)}
.phases li.on .bar i{background:var(--p300)}
.phases .lbl{display:block;margin-top:8px;font:400 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);transition:color .3s}
.phases li.on .lbl{color:var(--weiss)}
.phases li.done .lbl{color:var(--s300)}
.replay{margin-top:14px;font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;background:none;border:0;color:var(--dim);padding:4px 0;cursor:pointer}
.replay:hover{color:var(--p300)}
@media (max-width:860px){
  .hero{height:auto;min-height:0}
  .hero-inner{padding-top:var(--logoA,380px)}
  .phases{position:static;margin-top:32px}
}

/* Sektion 2: Problem */
.problem{border-bottom:1px solid var(--a700)}
.problem .pinwrap{position:relative;height:250vh}
.problem .sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden}
.problem .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center;width:100%;padding-block:72px 24px}
#gantt{max-height:calc(100vh - 160px)}
.problem p{color:var(--s300);max-width:48ch;margin:0}
#gantt{width:100%;height:auto;display:block;max-width:100%}
#gantt .face{stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
#gantt .acc{stroke:var(--p300);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
#gantt .dimln{stroke:var(--graphit);stroke-width:1;fill:none}
#gantt .ms{font:500 16px var(--mono);fill:var(--p300);letter-spacing:.1em}
#gantt .lab{font:400 13px var(--mono);fill:var(--dim);letter-spacing:.12em}
#gantt .shadow{fill:#0E1012;opacity:.7}
.gstate{display:flex;gap:14px;margin-top:10px;font:400 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.gstate .on{color:var(--p300)}
@media (max-width:860px){.problem .wrap{grid-template-columns:1fr;gap:16px;padding-block:64px 8px}.problem h2{font-size:clamp(26px,7vw,34px)}.problem p{font-size:15px;line-height:1.55}#gantt{max-height:38vh;margin-inline:auto}}

/* Sektion 3: Methode */
.method{position:relative;height:500vh;border-bottom:1px solid var(--a700)}
.method .sticky{position:sticky;top:0;height:100vh;height:100svh;min-height:560px;overflow:hidden}
#drawing{position:absolute;inset:0;width:100%;height:100%;display:block}
#drawing .g{stroke:var(--graphit);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
#drawing .ln{stroke:var(--s300);stroke-width:2.5;fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
#drawing .acc{stroke:var(--p300);stroke-width:4;fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
#drawing .dimln{stroke:var(--s300);stroke-width:1.5;fill:none;vector-effect:non-scaling-stroke}
#drawing .cl{stroke:var(--dim);stroke-width:1.5;fill:none;stroke-dasharray:14 6 3 6;vector-effect:non-scaling-stroke}
#drawing .face{stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
#drawing .tx{font-family:var(--mono);font-size:24px;fill:var(--s100);letter-spacing:.06em}
#drawing .tx.p{fill:var(--p300)}
#drawing .tt{font-family:var(--mono);font-size:30px;font-weight:500;fill:var(--p300);letter-spacing:.16em}
#drawing .shadow{fill:#0E1012;opacity:.7}
.method-ui{position:relative;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding-block:88px 48px;pointer-events:none}
.method-ui>*{pointer-events:auto}
.mhead{max-width:520px;position:relative;isolation:isolate}
.mhead::before{content:"";position:absolute;inset:-60px -120px -50px -60px;background:radial-gradient(closest-side,rgba(21,24,27,.97) 55%,rgba(21,24,27,0));z-index:-1;pointer-events:none}
.stations{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;border-top:1px solid var(--graphit);background:linear-gradient(to top,var(--a900) 70%,transparent)}
.stations li{padding-top:18px;min-width:0;opacity:.38;transition:opacity .4s;position:relative}
.stations li::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;background:var(--a900);border:1px solid var(--s300)}
.stations li.on{opacity:1}
.stations li.on::before{border-color:var(--p300);background:var(--p300)}
.stations .n{font:500 12px/1 var(--mono);color:var(--p300);letter-spacing:.12em;display:block;margin-bottom:10px}
.stations h3{font-weight:500;font-size:19px;color:var(--weiss);margin:0 0 6px}
.stations p{font-size:15px;color:var(--s300);margin:0}
.static .stations li{opacity:1}
.static.method{height:100vh}
@media (max-width:860px){
  .stations{grid-template-columns:1fr;gap:0}
  .stations li{display:none;padding-bottom:4px}
  .stations li.on{display:block}
  .static .stations li{display:block}
  .static.method{height:auto}
  .static.method .sticky{position:relative;height:auto}
  .static #drawing{display:none}
}

/* Sektion 4: Hintergrund */
.eng{border-bottom:1px solid var(--a700)}
.eng .pinwrap{position:relative;height:440vh}
.eng .sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center}
.eng .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"txt gfx" "bom gfx";grid-template-rows:auto 1fr;column-gap:48px;align-items:start;width:100%;padding-block:88px 32px}
.eng .txt{grid-area:txt;align-self:end}
.eng .gfx{grid-area:gfx;align-self:center}
.eng .bomwrap{grid-area:bom}
.eng p.body{color:var(--s300);max-width:50ch;margin:0 0 32px}
#explo{width:100%;height:auto;max-height:calc(100vh - 140px);display:block;max-width:100%}
#explo .dl{font:500 15px var(--mono);fill:var(--p300);letter-spacing:.06em}
#explo .dln{stroke:var(--p300);stroke-width:1.2;fill:none}
@media (max-width:860px){
  .eng .sticky{position:static;height:100%;display:block}
  .eng .wrap{display:flex;flex-direction:column;height:100%;padding-block:72px 0}
  .eng .gfx{position:sticky;top:57px;z-index:1;background:var(--a900);height:min(88vw,46vh);padding-top:8px}
  #explo{height:100%;width:100%;max-height:none}
  .eng .bomwrap{position:sticky;top:calc(57px + min(88vw,46vh));background:var(--a900);padding-block:12px 24px}
  .eng .txt{padding-bottom:24px}
}
#explo .face{stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
#explo .cl{stroke:var(--dim);stroke-width:1.5;stroke-dasharray:16 6 3 6;fill:none}
#explo .lead{stroke:var(--s300);stroke-width:1.2;fill:none}
#explo .bal{fill:var(--a900);stroke:var(--s100);stroke-width:1.5}
#explo .bn{font:500 18px var(--mono);fill:var(--weiss)}
#explo .shadow{fill:#0E1012;opacity:.7}
.bom{width:100%;max-width:520px;border-collapse:collapse;font:400 14px/1.4 var(--mono);font-variant-numeric:tabular-nums}
.bom caption{text-align:left;font:500 12px/1 var(--mono);letter-spacing:.16em;color:var(--p300);padding-bottom:14px;text-transform:uppercase}
.bom th{font-weight:500;font-size:11px;letter-spacing:.14em;color:var(--dim);text-align:left;padding:0 12px 10px 0;border-bottom:1px solid var(--s300);text-transform:uppercase}
.bom td{padding:11px 12px 11px 0;border-bottom:1px solid var(--graphit);color:var(--s100)}
.bom td:first-child{color:var(--dim);width:3em}
.bom tr.core td:last-child{color:var(--p300)}

/* Sektion 5: Leistungen */
.svc{border-bottom:1px solid var(--a700)}
.svc .wrap{padding-block:112px}
.svc h2{margin-bottom:56px}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.card{position:relative;min-width:0;border:1px solid var(--graphit);padding:20px 24px 28px;background:linear-gradient(var(--a700),var(--a900));transition:border-color .3s}
.card::before,.card::after{content:"";position:absolute;width:14px;height:14px;border:1.5px solid var(--s300);transition:border-color .3s}
.card::before{top:-4px;left:-4px;border-right:0;border-bottom:0}
.card::after{bottom:-4px;right:-4px;border-left:0;border-top:0}
.card:hover{border-color:var(--s300)}
.card:hover::before,.card:hover::after{border-color:var(--p300)}
.card .n{font:500 12px/1 var(--mono);letter-spacing:.14em;color:var(--p300)}
.card .tag{float:right;font:400 11px/1 var(--mono);color:var(--dim);letter-spacing:.08em}
.card svg{display:block;width:100%;height:auto;margin:18px 0 10px}
.card svg .obj{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.card:hover svg .obj{transform:translateY(-10px)}
.card h3{font:500 22px/1.2 var(--sans);color:var(--weiss);margin:0 0 10px}
.card p{font-size:15px;line-height:1.6;color:var(--s300);margin:0 0 16px}
.card ul{list-style:none;margin:0;padding:12px 0 0;border-top:1px solid var(--graphit);font:400 12px/1.9 var(--mono);color:var(--s100);letter-spacing:.04em}
.card li::before{content:"– ";color:var(--dim)}
.card .face{stroke-width:1.2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
/* Einblenden nur wenn JS aktiv */
.js-reveal .card{opacity:0;transform:translateY(40px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1),border-color .3s}
.js-reveal .card.in{opacity:1;transform:none}
@media (max-width:1100px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cards{grid-template-columns:1fr}.svc .wrap{padding-block:80px}}

/* Sektion 6: Apps */
.apps{border-bottom:1px solid var(--a700)}
.apps .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center;padding-block:112px}
.apps p.body{color:var(--s300);max-width:46ch;margin:0 0 32px}
.astatus{font:400 12px/1 var(--mono);letter-spacing:.14em;color:var(--dim);margin:0 0 28px;display:flex;gap:10px;align-items:center;text-transform:uppercase}
.astatus i{width:8px;height:8px;background:var(--p300);display:inline-block}
.notify{display:flex;max-width:480px;border:1px solid var(--graphit)}
.notify input{flex:1;min-width:0;background:var(--a700);border:0;color:var(--weiss);font:400 15px var(--sans);padding:16px 18px}
.notify input::placeholder{color:var(--dim)}
.notify button{background:var(--p500);color:var(--weiss);border:0;font:500 14px var(--sans);padding:0 22px;cursor:pointer}
.notify button:hover{background:var(--p300);color:var(--a900)}
.anote{font:400 12px/1.6 var(--mono);color:var(--dim);margin-top:12px;letter-spacing:.02em;max-width:480px}
.anote.ok{color:var(--p300)}
#appsvg{width:100%;height:auto;display:block;max-width:100%}
#appsvg .face{stroke-width:1.2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
@media (max-width:860px){.apps .wrap{grid-template-columns:1fr;padding-block:80px}.apps .gfx{order:-1}}
@media (max-width:420px){.notify{flex-direction:column}.notify button{padding:14px}}

/* Sektion 7: Kontakt */
.contact .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center;padding-block:112px}
.contact p.body{color:var(--s300);max-width:44ch;margin:0 0 32px}
.mail{display:flex;align-items:stretch;max-width:480px;border:1px solid var(--graphit)}
.mail span{flex:1;min-width:0;font:500 clamp(13.5px,3.6vw,17px)/1.2 var(--mono);color:var(--weiss);padding:18px;letter-spacing:.02em;user-select:all;overflow-wrap:anywhere}
.mail button{background:none;border:0;border-left:1px solid var(--graphit);color:var(--p300);font:500 12px var(--mono);letter-spacing:.12em;padding:0 clamp(10px,3vw,20px);text-transform:uppercase;cursor:pointer}
.mail button:hover{background:var(--a700)}
.avail{font:400 12px/1.5 var(--mono);letter-spacing:.14em;color:var(--dim);margin-top:16px;text-transform:uppercase}
#trend{width:100%;height:auto;display:block;max-width:100%}
@media (max-width:860px){.contact .wrap{grid-template-columns:1fr;padding-block:80px}}
/* Fußzeile */
.foot{border-top:1px solid var(--a700)}
.foot .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;padding-block:28px;font:400 12px/1.4 var(--mono);color:var(--dim);letter-spacing:.08em}
.fb{display:flex;align-items:center;gap:12px;color:var(--weiss);letter-spacing:.16em;text-decoration:none}
.fb svg{width:24px;height:24px}
.fl{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.fl a{color:var(--s300);text-decoration:none}.fl a:hover{color:var(--weiss)}
/* Rechtliches (eigene Seiten) */
.legal .wrap{max-width:860px;padding-block:72px 96px}
.legal h1{font-size:clamp(36px,5vw,56px);margin-bottom:8px}
.legal h2{font:500 20px/1.3 var(--sans);color:var(--weiss);margin:40px 0 10px;letter-spacing:0}
.legal p,.legal li{color:var(--s300);font-size:16px;line-height:1.7;max-width:70ch}
.legal p{margin:0 0 12px}
.legal address{font-style:normal;color:var(--s100);line-height:1.7;margin-bottom:12px}
.legal .back{display:inline-block;margin-top:40px;font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--p300);text-decoration:none}
.legal .note{font:400 13px/1.6 var(--mono);color:var(--dim);margin-bottom:24px}
/* Seiten 404 / Danke */
.simple{min-height:70vh;display:flex;align-items:center}
.simple .wrap{padding-block:96px}
.simple p{color:var(--s300);max-width:52ch}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hp{display:none}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}