/* EMPARA · Website · Stand v0.1 (14.10.2026)
   Farbwelt „Glut auf Tiefsee“ aus Modul 01. Schriften lokal, kein Netzabruf. */

@font-face{font-family:"Bricolage Grotesque";src:url("../fonts/bricolage-grotesque-var.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("../fonts/instrument-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("../fonts/instrument-sans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("../fonts/instrument-sans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/ibm-plex-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/ibm-plex-mono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/poppins-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --ground:#0c242c;
  --ground-2:#123540;
  --surface:rgba(31,78,95,.30);
  --surface-solid:#11303a;
  --line:rgba(143,190,192,.22);
  --fg:#e9efec;
  --muted:#9fb6b8;
  --spur:#6fc3c0;
  --glut:#eaa35c;
  --glut-hover:#f0b672;
  --ink:#1a1408;
  --f-mark:"Poppins",ui-sans-serif,system-ui,sans-serif;
  --f-display:"Bricolage Grotesque","Avenir Next",ui-sans-serif,system-ui,sans-serif;
  --f-body:"Instrument Sans","Segoe UI",ui-sans-serif,system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --wrap:1240px;
  --gutter:40px;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--fg);font-family:var(--f-body);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p,ul,ol,figure{margin:0}
img,svg{display:block;max-width:100%}
a{color:var(--glut)}
a:hover{color:var(--glut-hover)}
:focus-visible{outline:2px solid var(--glut);outline-offset:3px}
.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}
.skip{position:absolute;left:16px;top:-60px;z-index:50;background:var(--glut);color:var(--ink);padding:12px 18px;border-radius:999px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}

/* Partikelfeld: liegt hinter allem, reagiert auf Scrollen und Zeiger */
#field{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;
  background:radial-gradient(110% 90% at 72% 38%,var(--ground-2) 0%,var(--ground) 62%)}
.page{position:relative;z-index:1}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}

/* Typografie */
.mark{font-family:var(--f-mark);font-weight:700;letter-spacing:.06em;color:var(--fg);text-decoration:none}
.eyebrow{font-family:var(--f-mono);font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--glut)}
.display{font-family:var(--f-display);font-weight:640;letter-spacing:-.022em;line-height:1.04;text-wrap:balance;font-variation-settings:"opsz" 96}
.h1{font-size:clamp(44px,6.2vw,84px)}
.h2{font-size:clamp(36px,4.4vw,60px)}
.lede{font-size:clamp(19px,1.6vw,22px);line-height:1.5;color:var(--muted);text-wrap:pretty;max-width:640px}
.lede b{color:var(--fg);font-weight:500}
.hi{color:var(--glut)}

/* Kopf */
.top{position:sticky;top:0;z-index:20;background:rgba(12,36,44,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:74px}
.top .mark{font-size:22px;padding:10px 0}
.nav{display:flex;gap:30px;align-items:center}
.nav a{font-family:var(--f-mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-decoration:none;padding:12px 0}
.nav a:hover,.nav a[aria-current="page"]{color:var(--fg)}
.nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--glut)}
.nav .btn{font-family:var(--f-body);font-size:15px;letter-spacing:0;text-transform:none;color:var(--ink);padding:0 20px}
.nav .btn:hover{color:var(--ink)}
.menu{display:none;background:none;border:1px solid var(--line);color:var(--fg);border-radius:999px;min-height:44px;padding:0 18px;font:500 14px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}

/* Knöpfe */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 26px;border-radius:999px;font-weight:600;font-size:16px;text-decoration:none;border:1px solid transparent;transition:transform .25s var(--ease),background .25s,border-color .25s}
.btn:hover{transform:translateY(-2px)}
.btn-p{background:var(--glut);color:var(--ink)}
.btn-p:hover{background:var(--glut-hover);color:var(--ink)}
.btn-g{border-color:var(--line);color:var(--fg);background:rgba(12,36,44,.4)}
.btn-g:hover{border-color:var(--spur);color:var(--fg)}
.row{display:flex;gap:14px;flex-wrap:wrap}

/* Auftritt: einmalig beim Hineinscrollen */
.r{opacity:0;transform:translateY(26px);filter:blur(4px);transition:opacity .9s var(--ease),transform 1.1s var(--ease),filter .9s ease;transition-delay:calc(var(--d,0) * 1ms)}
.r.in{opacity:1;transform:none;filter:none}
.no-js .r{opacity:1;transform:none;filter:none}

/* Szenen-Abschnitte */
.scene{position:relative;min-height:100vh;display:flex;align-items:center;padding:120px 0}
.scene.auto{min-height:0}
.scene > .wrap{width:100%}
.col{display:flex;flex-direction:column;gap:28px;max-width:640px}
.col.wide{max-width:980px}

/* Hero */
.hero{min-height:calc(100vh - 74px)}
.word{font-family:var(--f-mark);font-weight:700;font-size:clamp(84px,15vw,214px);line-height:.88;letter-spacing:.015em;display:flex}
.word span{display:inline-block}
.tag{font-family:var(--f-display);font-style:italic;font-weight:400;font-size:clamp(28px,3vw,44px);letter-spacing:-.01em;font-variation-settings:"opsz" 60}
.tag em{color:var(--glut)}
.sub{font-size:clamp(20px,2vw,28px);line-height:1.38;max-width:860px}
.sub span{color:var(--muted)}
.scroll-hint{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:10px}
.scroll-hint i{display:block;width:1px;height:40px;background:linear-gradient(var(--glut),transparent)}

/* Drei Felder */
.fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:64px}
.card{border:1px solid var(--line);background:var(--surface);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);padding:34px 32px 30px;display:flex;flex-direction:column;gap:16px;min-width:0;text-decoration:none;color:var(--fg);transition:border-color .3s,transform .3s var(--ease)}
.card:hover{border-color:rgba(234,163,92,.6);transform:translateY(-3px);color:var(--fg)}
.card h3{font-family:var(--f-display);font-size:clamp(26px,2.4vw,34px);font-weight:600;line-height:1.1;letter-spacing:-.012em;text-wrap:balance}
.card p{color:var(--muted);font-size:18px}
.card .more{margin-top:auto;padding-top:6px;font-weight:600;font-size:16px;color:var(--glut)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--spur);border:1px solid var(--line);padding:6px 10px;border-radius:999px}

/* Herkunft */
.origin{display:grid;grid-template-columns:auto minmax(0,1fr);gap:48px;align-items:center;margin-top:24px}
.num{font-family:var(--f-mark);font-weight:700;font-size:clamp(130px,17vw,250px);line-height:.8;color:var(--glut)}
.unit{font-family:var(--f-display);font-size:clamp(28px,3vw,42px);font-weight:500;line-height:1.16;letter-spacing:-.012em;text-wrap:balance}
.gap{display:inline-block;border:1.5px dashed var(--glut);color:var(--glut);font-family:var(--f-mono);font-size:13px;letter-spacing:.06em;padding:10px 14px;align-self:flex-start}

/* Name */
.name{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;max-width:980px}
.big{font-family:var(--f-mark);font-weight:700;font-size:clamp(96px,13vw,200px);line-height:.86;letter-spacing:.01em}
.big .dot{color:var(--glut)}
.name h3{font-family:var(--f-display);font-weight:600;font-size:clamp(30px,3vw,42px);margin:16px 0 8px;letter-spacing:-.01em}
.name p{color:var(--muted);font-size:20px;max-width:460px}

/* Denkweisen */
.dw-head{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.six{display:flex;gap:9px}
.six i{display:block;width:11px;height:11px;border-radius:50%;border:1.5px solid var(--muted);opacity:.7}
.six i.on{background:var(--glut);border-color:var(--glut);opacity:1}
.pill{font-family:var(--f-mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--glut);border:1px solid var(--glut);padding:8px 14px;border-radius:999px}
.blk{display:flex;flex-direction:column;gap:8px;border-left:1px solid var(--line);padding-left:22px}
.blk .k{font-family:var(--f-mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.blk.you .k{color:var(--glut)}
.blk p{font-size:20px;line-height:1.5;text-wrap:pretty}
.labels{display:flex;flex-wrap:wrap;gap:10px}
.labels span{font-family:var(--f-mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line);background:var(--surface);padding:10px 14px;border-radius:999px}
.labels span b{color:var(--glut);font-weight:500;margin-right:8px}

/* Werkzeug */
.mem{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px}
.mem div{border-top:2px solid var(--glut);padding-top:16px;display:flex;flex-direction:column;gap:4px}
.mem b{font-family:var(--f-mono);font-weight:500;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--glut)}
.duo{display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);gap:40px;border:1px solid var(--line);background:var(--surface);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);padding:34px}
.duo .rule{background:var(--line)}
.duo .k{font-family:var(--f-mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.duo .v{font-family:var(--f-display);font-size:clamp(22px,2.2vw,30px);line-height:1.2;font-weight:500;letter-spacing:-.01em;text-wrap:balance}
.duo .before .v{color:var(--muted)}
.duo .after .k{color:var(--glut)}

/* Einstieg */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin-top:56px}
.step{display:flex;flex-direction:column;gap:12px}
.step .n{font-family:var(--f-mark);font-weight:700;font-size:64px;line-height:1;color:var(--glut)}
.step .bar{height:1px;background:var(--line);margin:4px 0 8px}
.step h3{font-family:var(--f-display);font-size:28px;font-weight:600;letter-spacing:-.01em}
.step p{color:var(--muted)}

/* Impulse */
.imps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:56px}
.imp{display:flex;flex-direction:column;gap:14px;border:1px solid var(--line);background:var(--surface);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);padding:30px;min-width:0}
.imp h3{font-family:var(--f-display);font-size:26px;font-weight:600;line-height:1.15;letter-spacing:-.01em}
.imp p{color:var(--muted);font-size:17px}
.imp .soon{margin-top:auto;font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* Kontakt */
.cta h2{max-width:960px}

/* Fuß */
.foot{position:relative;z-index:1;border-top:1px solid var(--line);background:rgba(12,36,44,.86)}
.foot .wrap{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;padding-top:44px;padding-bottom:52px;color:var(--muted);font-size:15px}
.foot .brand{display:flex;flex-direction:column;gap:6px}
.foot .brand .mark{font-size:18px}
.foot .links{display:flex;gap:26px;flex-wrap:wrap;align-items:center}
.foot .links a{color:var(--muted);text-decoration:none;padding:10px 0}
.foot .links a:hover,.foot .links a[aria-current="page"]{color:var(--fg)}

/* Leistungen */
.tabs{display:flex;gap:12px;flex-wrap:wrap}
.tab{cursor:pointer;min-height:50px;padding:0 22px;display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:999px;font:600 16px var(--f-body);color:var(--muted);background:rgba(12,36,44,.5);transition:border-color .2s,color .2s,background .2s}
.tab:hover{color:var(--fg);border-color:var(--spur)}
.tab .l{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;color:var(--glut)}
.tab[aria-selected="true"]{background:var(--surface-solid);color:var(--fg);border-color:var(--glut)}
.panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
.panel[hidden]{display:none}
.panel .left{display:flex;flex-direction:column;gap:24px;position:sticky;top:110px}
.q{display:flex;flex-direction:column;gap:10px;padding-top:20px;border-top:1px solid var(--line)}
.q .k{font-family:var(--f-mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.q ul{padding-left:20px;display:flex;flex-direction:column;gap:6px}
.q li::marker{color:var(--glut)}
.units{display:flex;flex-direction:column;gap:16px}
.units > .k{font-family:var(--f-mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--glut)}
.unitc{border:1px solid var(--line);background:var(--surface);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);padding:26px 28px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 24px;transition:border-color .25s}
.unitc:hover{border-color:rgba(234,163,92,.6)}
.unitc h3{font-family:var(--f-display);font-size:26px;font-weight:600;line-height:1.15;letter-spacing:-.01em}
.unitc .f{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap;padding-top:8px}
.unitc p{grid-column:1 / -1;color:var(--muted);font-size:17px}
.unitc p b{color:var(--fg);font-weight:500}
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:48px}
.flow div{border-top:2px solid var(--glut);padding-top:16px;display:flex;flex-direction:column;gap:8px}
.flow b{font-family:var(--f-mono);font-weight:500;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--glut)}
.flow h3{font-family:var(--f-display);font-size:26px;font-weight:600;letter-spacing:-.01em}
.flow p{color:var(--muted);font-size:17px}

/* Rechtliches */
.legal{padding:100px 0 110px}
.legal .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:64px;align-items:start}
.legal .side{display:flex;flex-direction:column;gap:18px;position:sticky;top:110px}
.legal .side p{color:var(--muted)}
.rows{display:flex;flex-direction:column}
.rows .row2{display:grid;grid-template-columns:240px minmax(0,1fr);gap:24px;padding:22px 0;border-top:1px solid var(--line)}
.rows .row2:last-child{border-bottom:1px solid var(--line)}
.rows .k{font-family:var(--f-mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-top:4px;hyphens:auto}
.toc{display:flex;flex-direction:column;padding-top:8px}
.toc a{font-size:16px;color:var(--muted);text-decoration:none;padding:9px 0;border-top:1px solid var(--line)}
.toc a:hover{color:var(--fg)}
.prose{display:flex;flex-direction:column;gap:48px}
.prose section{display:flex;flex-direction:column;gap:14px;scroll-margin-top:100px}
.prose h2{font-family:var(--f-display);font-size:30px;font-weight:600;letter-spacing:-.01em;line-height:1.15}
.prose h2 .n{font-family:var(--f-mono);font-size:14px;letter-spacing:.12em;color:var(--glut);margin-right:12px;vertical-align:middle}
.prose p,.prose li{color:#cfdcdc}
.prose ul{padding-left:22px;display:flex;flex-direction:column;gap:4px}
.prose li::marker{color:var(--glut)}
.todo{border:1.5px dashed var(--glut);color:var(--glut);font-family:var(--f-mono);font-size:13px;letter-spacing:.04em;padding:2px 8px;white-space:normal}

/* Responsiv */
@media (max-width:980px){
  :root{--gutter:28px}
  .fields,.steps,.imps{grid-template-columns:minmax(0,1fr)}
  .origin{grid-template-columns:minmax(0,1fr);gap:20px}
  .duo{grid-template-columns:minmax(0,1fr);gap:24px}
  .duo .rule{height:1px}
  .panel{grid-template-columns:minmax(0,1fr);gap:40px}
  .panel .left,.legal .side{position:static}
  .flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .legal .wrap{grid-template-columns:minmax(0,1fr);gap:40px}
  .scene{min-height:0;padding:96px 0}
  .scene.tall{min-height:90vh}
  #field{opacity:.55}
}
@media (max-width:760px){
  :root{--gutter:16px}
  .menu{display:inline-flex;align-items:center}
  .nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;padding:8px 16px 20px;background:rgba(12,36,44,.97);border-bottom:1px solid var(--line);display:none}
  .nav.open{display:flex}
  .nav a{padding:14px 0;border-top:1px solid var(--line)}
  .nav .btn{margin-top:12px;border-top:0}
  .name{grid-template-columns:minmax(0,1fr);gap:32px}
  .flow{grid-template-columns:minmax(0,1fr)}
  .mem{grid-template-columns:minmax(0,1fr)}
  .unitc{grid-template-columns:minmax(0,1fr)}
  .unitc .f{padding-top:0}
  .rows .row2{grid-template-columns:minmax(0,1fr);gap:6px}
  .scroll-hint{display:none}
  .legal{padding:64px 0 72px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .r{opacity:1;transform:none;filter:none;transition:none}
  .btn,.card,.tab,.unitc{transition:none}
}