/* Foresain Marketing — 1:1 auf Basis des Foresain Design Systems (designsystem-Repo).
   Fonts selbst gehostet (DSGVO: kein Google-CDN). Sharp-corner system, Electric Blue. */

@font-face{font-family:"Roboto Serif";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/roboto-serif-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Roboto Serif";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/roboto-serif-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/schibsted-grotesk-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/schibsted-grotesk-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/schibsted-grotesk-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2")}

/* ===== Tokens (designsystem/tokens + export/foresain-site/styles.css) ===== */
:root{
--fore-950:#0A0B0D;--fore-900:#0E1B33;--fore-800:#0F3D7A;--fore-700:#0F62C8;--fore-600:#1D80F5;--fore-500:#298DFF;--fore-400:#55A4FF;--fore-200:#B9D9FF;--fore-100:#DCEDFF;--fore-50:#EFF7FF;
--paper:#F7F8FA;--paper-raised:#FFFFFF;--paper-sunken:#EDEFF3;
--ink:#0D0F14;--ink-2:#3B414D;--ink-3:#697180;--ink-4:#9AA1AD;
--line:#E4E7EC;--line-strong:#C9CED8;
--signal-green:#00D42A;--signal-green-bg:#DCF7E1;--signal-green-ink:#0A6E20;
--signal-amber:#F5D800;--signal-amber-bg:#FBF1C9;--signal-amber-ink:#7A5A00;
--signal-red:#F456AF;--signal-red-bg:#FCE1EF;--signal-red-ink:#A81466;
--signal-neutral:#7E8BA5;--signal-neutral-bg:#DEE5F0;--signal-neutral-ink:#4C586E;
--surface-page:var(--paper);--surface-card:var(--paper-raised);--surface-inset:var(--paper-sunken);--surface-inverse:var(--fore-950);
--text-body:var(--ink);--text-secondary:var(--ink-2);--text-muted:var(--ink-3);--text-inverse:#F2F4F8;--text-inverse-muted:#8E97A8;
--text-link:var(--fore-600);--text-link-hover:var(--fore-700);
--accent:var(--fore-600);--accent-hover:#0F62C8;
--border-default:var(--line);--border-strong:var(--line-strong);--border-focus:var(--fore-500);
--font-display:"Roboto Serif",Georgia,serif;
--font-grotesk:"Schibsted Grotesk","IBM Plex Sans",-apple-system,sans-serif;
--font-body:"IBM Plex Sans",-apple-system,"Segoe UI",sans-serif;
--font-mono:"IBM Plex Mono",ui-monospace,monospace;
--container-max:1240px;
--ease-out:cubic-bezier(.2,.7,.3,1);--dur-med:200ms;
--glow-dark:radial-gradient(1000px 560px at 50% 118%,rgba(41,141,255,.38) 0%,rgba(15,98,200,.14) 45%,rgba(41,141,255,0) 68%),radial-gradient(680px 420px at 90% -10%,rgba(15,98,200,.42) 0%,rgba(15,61,122,.15) 45%,rgba(15,98,200,0) 62%);
}
[data-theme="dark"]{
--surface-page:#0A0C10;--surface-card:#12151B;--surface-inset:#0E1015;
--text-body:#E9ECF1;--text-secondary:#A3ABBA;--text-muted:#6C7484;
--text-link:#6FB6FF;--text-link-hover:#A3D2FF;
--border-default:#22262E;--border-strong:#353B47;--line:#22262E;
color:var(--text-body);background:var(--surface-page);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0}
body{font-family:var(--font-body);color:var(--text-body);background:var(--surface-page);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--text-link-hover)}
.wrap{max-width:var(--container-max);margin:0 auto;padding:0 40px}
.slash{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.logo{display:inline-block;background:#fff;-webkit-mask:var(--m) no-repeat center/contain;mask:var(--m) no-repeat center/contain}

/* ===== Announce + Nav ===== */
.announce{background:linear-gradient(90deg,var(--fore-700) 0%,var(--fore-500) 100%);color:#fff;text-align:center;font-size:13px;font-weight:500;padding:9px 16px}
.announce a{color:#fff;font-weight:600}
.nav{position:relative;z-index:50;background:#0A0B0D}
.nav .bar{display:flex;align-items:center;justify-content:space-between;height:72px}
.nav .links{display:flex;gap:34px;font-size:15px;font-weight:500;color:rgba(255,255,255,.9)}
.nav .links a{color:inherit}
.nav .links a:hover{color:#fff}
.cta-blue{display:inline-flex;align-items:center;gap:8px;font-weight:600;padding:12px 24px;background:var(--fore-500);color:#fff;font-size:15px;font-family:var(--font-body)}
.cta-blue:hover{background:var(--fore-400);color:#fff}
.menu-t{display:none}
.burger{display:none;width:48px;height:48px;background:rgba(255,255,255,.12);border:none;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.burger span{width:20px;height:2px;background:#fff;transition:transform var(--dur-med) var(--ease-out)}
.menu-t:checked ~ .bar .burger{background:#fff}
.menu-t:checked ~ .bar .burger span{background:#0A0B0D}
.menu-t:checked ~ .bar .burger span:first-child{transform:translateY(4px) rotate(45deg)}
.menu-t:checked ~ .bar .burger span:last-child{transform:translateY(-4px) rotate(-45deg)}
.mobilemenu{display:none;position:absolute;top:72px;left:0;right:0;background:#0A0B0D;border-top:1px solid rgba(255,255,255,.15);border-bottom:1px solid rgba(255,255,255,.15)}
.menu-t:checked ~ .mobilemenu{display:block}
.mobilemenu .inner{padding:28px 40px 36px;display:grid;gap:4px}
.mobilemenu a{color:#fff;font-family:var(--font-grotesk);font-size:34px;font-weight:500;letter-spacing:-.02em;padding:12px 0;border-bottom:1px dotted rgba(255,255,255,.25);display:flex;justify-content:space-between}
.mobilemenu a span{color:var(--fore-500)}

/* ===== Hero ===== */
.hero{position:relative;min-height:92vh;display:flex;flex-direction:column;align-items:center;background:linear-gradient(180deg,#03050A 0%,#071228 16%,#0E2C66 38%,#1E5AC8 58%,#298DFF 76%,#A6CFFF 100%);overflow:hidden}
.hero .sp1{flex:1.2}.hero .sp2{flex:1}
.hero h1{font-family:var(--font-display);font-size:clamp(64px,11.5vw,168px);line-height:1.04;font-weight:400;letter-spacing:-.02em;margin:0;color:#fff;text-align:center;padding:0 16px}
.hero .w1{filter:blur(6px);text-shadow:0 0 18px rgba(160,200,255,.35);display:inline-block}
.hero .w2{filter:blur(.5px);text-shadow:0 0 30px rgba(255,255,255,.75);display:inline-block}
.hero .w3{filter:blur(3.5px);text-shadow:0 0 18px rgba(160,200,255,.35);display:inline-block}
.hero .sub{font-size:22px;color:#fff;margin:0 0 44px;max-width:34ch;text-align:center;line-height:1.45;text-shadow:0 1px 12px rgba(10,40,90,.3);padding:0 20px}
.hero .ctas{display:flex;margin-bottom:72px;flex-wrap:wrap;justify-content:center}
.hero .ctas a{display:inline-flex;align-items:center;gap:8px;font-weight:600;padding:17px 34px;font-size:16.5px}
.hero .ctas .dark{background:#0A0B0D;color:#fff}
.hero .ctas .light{background:#fff;color:#0A0B0D}

/* ===== Standards strip ===== */
.standards{border-bottom:1px solid var(--border-default);background:var(--surface-card)}
.standards .row{padding:22px 0;display:flex;align-items:center;gap:34px;flex-wrap:wrap}
.standards .lead{font-size:13px;color:var(--text-muted);font-weight:500;white-space:nowrap}
.standards .list{display:flex;gap:28px;flex-wrap:wrap;flex:1;justify-content:flex-end}
.standards .list span{font-family:var(--font-mono);font-size:13px;color:var(--ink-3);font-weight:500;white-space:nowrap}

/* ===== Statement ===== */
.statement{padding:110px 0 120px}
.chip{font-family:var(--font-mono);font-size:13.5px;background:var(--surface-inset);color:var(--ink-2);padding:4px 10px}
.statement .big{font-family:var(--font-grotesk);font-size:clamp(30px,4.9vw,64px);font-weight:500;letter-spacing:-.03em;line-height:1.18;margin-top:26px}
.hl{background:#0A0B0D;color:#fff;white-space:nowrap;padding-right:10px}
.hl .ic{display:inline-flex;align-items:center;justify-content:center;width:1.05em;height:1.05em;background:var(--fore-500);color:#fff;font-size:.6em;vertical-align:-.12em;margin-right:.18em}
.hl .ic.pink{background:#F456AF}
.statement .sub{font-size:17px;color:var(--text-secondary);margin:30px 0 0;max-width:62ch;line-height:1.6}

/* ===== Stripes ===== */
.stripes{height:150px;background:linear-gradient(90deg,#55A4FF 0%,#298DFF 6%,#0F3D7A 11%,#03050A 17%,#000 22%,#0E2C66 28%,#1E5AC8 34%,#298DFF 40%,#0A1930 47%,#123F55 52%,#55A4FF 58%,#298DFF 66%,#4FA0FF 74%,#298DFF 82%,#7FBCFF 90%,#55A4FF 100%)}

/* ===== Stack (schwarz, Iso-Würfel) ===== */
.stack{background:#050505;color:#fff}
.stack .inner{padding:110px 0 120px}
.stack h2{font-family:var(--font-display);font-size:clamp(48px,8.4vw,118px);font-weight:400;letter-spacing:-.02em;margin:0 0 22px;text-align:center;line-height:1}
.stack .lead{text-align:center;font-size:19px;color:rgba(255,255,255,.9);margin-bottom:90px}
.stack .lead .ico{display:inline-block;width:17px;height:16.5px;vertical-align:-2px;background:var(--fore-500);-webkit-mask:url(/assets/foresain-icon.svg) no-repeat center/contain;mask:url(/assets/foresain-icon.svg) no-repeat center/contain;margin-right:12px}
.stackrows{position:relative}
.stackrows .dots{position:absolute;left:50%;top:0;bottom:0;width:1px;background-image:linear-gradient(rgba(255,255,255,.6) 12%,transparent 12%);background-size:1px 14px;transform:translateX(-.5px)}
.srow{position:relative;display:flex;padding-bottom:90px}
.srow.r{justify-content:flex-end}
.srow .node{position:absolute;left:50%;top:44px;width:13px;height:13px;background:#fff;transform:translateX(-50%);z-index:2}
.srow .cardw{width:46%}
.term{position:relative;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.02);width:100%;font-family:var(--font-mono)}
.term .vline{position:absolute;left:47px;top:74px;bottom:58px;width:1px;background:rgba(255,255,255,.3)}
.term .head{display:flex;align-items:center;gap:18px;padding:20px 24px}
.term .head .n{border:1px solid rgba(255,255,255,.4);padding:6px 12px;font-size:16px;color:#fff}
.term .head .t{font-size:16px;letter-spacing:.1em;color:#fff}
.term .cube{border-top:1px solid rgba(255,255,255,.22);border-bottom:1px solid rgba(255,255,255,.22);padding:22px 26px}
.term .cube svg{width:100%;display:block}
.term .foot{display:flex;align-items:center;gap:16px;padding:20px 24px 20px 66px}
.term .foot .code{border:1px solid rgba(255,255,255,.4);padding:9px 12px;font-size:14px;color:#fff;background:#0A0B0D}
.term .foot .name{font-family:var(--font-body);font-size:19px;color:rgba(255,255,255,.75)}
.stack .more{text-align:center;margin-top:20px;font-size:15px;color:rgba(255,255,255,.6)}
.stack .more a{color:#fff;font-weight:600}

/* ===== IsList ===== */
.islist{padding:0 0 120px}
.islist .row{border-top:1px solid var(--border-default);padding:24px 8px;font-family:var(--font-display);font-size:clamp(28px,4vw,52px);font-weight:400;letter-spacing:-.015em;display:flex;justify-content:space-between;align-items:center}
.islist .row span{color:var(--fore-600);font-size:30px}
.islist .end{border-top:1px solid var(--border-default)}

/* ===== TwoCol ===== */
.twocol{padding:110px 0;display:flex;gap:64px;flex-wrap:wrap}
.twocol .col{flex:1;min-width:320px}
.twocol h3{font-family:var(--font-display);font-size:40px;font-weight:400;letter-spacing:-.01em;margin:0 0 22px}
.twocol .item{border-top:1px solid var(--border-default);padding:16px 4px;font-size:16px;color:var(--text-secondary);line-height:1.5}

/* ===== Roles (dark + glow) ===== */
.roles{background:var(--glow-dark),#0A0C10;color:#E9ECF1}
.roles .inner{padding:110px 0}
.roles h2{font-family:var(--font-display);font-size:clamp(40px,6.4vw,88px);font-weight:400;letter-spacing:-.015em;line-height:1.02;margin:0 0 46px;max-width:16ch}
.roles .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.roles .card{background:#12151B;border:1px solid #22262E;padding:24px 22px;display:flex;flex-direction:column;min-height:250px}
.roles .card h3{font-family:var(--font-grotesk);font-size:22px;font-weight:600;letter-spacing:-.01em;margin:0 0 14px}
.roles .card p{font-size:13.5px;color:#A3ABBA;line-height:1.7;white-space:pre-line;flex:1;margin:0}
.roles .card a{font-size:14px;font-weight:600;margin-top:16px;color:#6FB6FF}

/* ===== GetStarted (schwarz) ===== */
.getstarted{background:#050505;color:#fff;padding:90px 0 60px}
.gsrow{border-top:1px dotted rgba(255,255,255,.35);position:relative}
.gsrow.active{background:#1B1D21}
.gsrow .node{position:absolute;left:10px;top:10px;width:11px;height:11px;background:var(--fore-500)}
.gsrow .inner{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:start;padding:54px 0 60px}
.gsrow .t{font-family:var(--font-grotesk);font-size:clamp(34px,5.6vw,76px);font-weight:500;letter-spacing:-.03em;line-height:1}
.gsrow .d{font-size:19px;color:rgba(255,255,255,.55);line-height:1.5;max-width:40ch}
.gsrow.active .d{color:#fff}
.gsrow .go{display:inline-flex;align-items:center;gap:8px;font-weight:600;margin-top:34px;padding:15px 26px;background:var(--fore-500);color:#fff;font-size:16px;width:100%;box-sizing:border-box}

/* ===== Kontakt (dark, DS-Formular) ===== */
.contact{background:#050505;color:#fff;padding:20px 0 110px}
.contact .grid{display:grid;grid-template-columns:1fr 1.2fr;gap:48px}
.contact h2{font-family:var(--font-display);font-size:clamp(38px,4.6vw,64px);font-weight:400;letter-spacing:-.015em;margin:0 0 18px;line-height:1.05}
.contact .info p{color:rgba(255,255,255,.65);font-size:15.5px;line-height:1.65}
.contact .mail{font-family:var(--font-mono);font-size:14px;color:#fff}
form.cf{border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.02);padding:28px}
.cf label{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);margin:0 0 6px}
.cf input,.cf textarea{width:100%;padding:12px;border:1px solid rgba(255,255,255,.28);font-size:15px;font-family:var(--font-body);margin-bottom:18px;background:rgba(255,255,255,.04);color:#fff}
.cf input:focus,.cf textarea:focus{outline:none;border-color:var(--fore-500);box-shadow:0 0 0 1px var(--fore-500)}
.cf textarea{min-height:120px;resize:vertical}
.cf button{width:100%;padding:15px;background:var(--fore-500);color:#fff;border:none;font-family:var(--font-body);font-weight:600;font-size:16px;cursor:pointer}
.cf button:hover{background:var(--fore-400)}
.cf .hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.ok-note{background:rgba(0,212,42,.12);border:1px solid var(--signal-green);padding:12px 16px;font-size:14px;margin-bottom:16px;color:#fff}
.err-note{background:rgba(244,86,175,.12);border:1px solid var(--signal-red);padding:12px 16px;font-size:14px;margin-bottom:16px;color:#fff}

/* ===== Ascii-Teppich ===== */
.ascii{background:#050505;padding:40px 0 110px}
.ascii pre{font-family:var(--font-mono);font-size:13px;line-height:1.9;letter-spacing:.14em;text-align:center;white-space:pre;margin:0;color:#26292E}
.ascii .p{color:#F456AF}.ascii .b{color:var(--fore-500)}

/* ===== Footer ===== */
.footer{border-top:1px solid var(--border-default);background:var(--surface-page)}
.footer .inner{padding:80px 0 30px}
.footer .lead14{font-family:var(--font-display);font-size:clamp(64px,10vw,130px);font-weight:400;letter-spacing:-.03em;line-height:1;color:var(--fore-600)}
.footer .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:64px 0 56px}
.footer .cols a{font-size:14px;color:var(--text-secondary)}
.footer .cols .li{margin-bottom:9px}
.footer .base{border-top:1px solid var(--border-default);padding-top:22px;display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--text-muted);gap:14px;flex-wrap:wrap}
.footer .base .lm{display:inline-block;background:var(--ink);width:96px;height:18px;-webkit-mask:url(/assets/foresain-brand-icon.svg) no-repeat left center/contain;mask:url(/assets/foresain-brand-icon.svg) no-repeat left center/contain}

/* ===== Legal ===== */
.legal{padding:70px 0;max-width:760px}
.legal h1{font-family:var(--font-display);font-weight:400;font-size:40px}
.legal h2{font-family:var(--font-grotesk);font-size:20px;font-weight:600;margin-top:30px}
.legal p,.legal li{font-size:14.5px;color:var(--text-secondary)}
.todo{background:var(--signal-amber-bg);border:1px solid var(--signal-amber);padding:10px 14px;font-size:13px;color:var(--signal-amber-ink)}

/* ===== Responsiv ===== */
@media(max-width:1024px){
  .nav .links{display:none}
  .nav .cta-blue{display:none}
  .burger{display:flex}
  .roles .grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  .wrap{padding:0 20px}
  .srow .cardw{width:100%}
  .stackrows .dots,.srow .node{display:none}
  .gsrow .inner{grid-template-columns:1fr;gap:18px}
  .contact .grid{grid-template-columns:1fr}
  .footer .cols{grid-template-columns:repeat(2,1fr)}
  .hero{min-height:76vh}
}
@media(max-width:560px){
  .roles .grid{grid-template-columns:1fr}
  .standards .list{justify-content:flex-start}
  .ascii pre{font-size:10px}
}

/* ===== Alle Module (dunkel, Term-Ästhetik) ===== */
.allmods{background:#050505;color:#fff}
.allmods .inner{padding:100px 0 110px}
.allmods h2{font-family:var(--font-display);font-size:clamp(40px,5.4vw,72px);font-weight:400;letter-spacing:-.015em;margin:0 0 14px}
.allmods .lead{font-size:17px;color:rgba(255,255,255,.6);margin:0 0 46px;max-width:62ch}
.modgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.modcard{border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.02);padding:20px 22px;display:flex;flex-direction:column}
.modcard:hover{border-color:var(--fore-500)}
.mc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.mc-code{font-family:var(--font-mono);font-size:14px;color:#fff;border:1px solid rgba(255,255,255,.4);padding:5px 10px}
.mc-name{font-family:var(--font-grotesk);font-size:20px;font-weight:600;letter-spacing:-.01em;margin-bottom:8px}
.mc-desc{font-size:13.5px;color:rgba(255,255,255,.6);line-height:1.65;margin:0;flex:1}
.mc-norm{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--fore-400);margin-top:16px}
@media(max-width:1024px){.modgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.modgrid{grid-template-columns:1fr}}