/* KaaTai — Portal-Stylesheet. Self-hosted Fonts, keine externen CDNs (DSGVO-clean). */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/fraunces.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url('/fonts/manrope.woff2') format('woff2');}

:root{
  --bg:#0c0f11;
  --bg-2:#111619;
  --surface:#151b1f;
  --surface-2:#1a2226;
  --line:#26313650;
  --line-solid:#28343a;
  --ink:#eaf1f2;
  --ink-mut:#93a1a6;
  --ink-dim:#63727a;
  --teal:#2fd6bd;
  --teal-deep:#149e8b;
  --coral:#ff6f5c;
  --coral-deep:#e4442f;
  --radius:16px;
  --maxw:1120px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Manrope',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  font-weight:400;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
  min-height:100vh;
}
/* Grain overlay */
body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Atmospheric glow */
body::before{
  content:"";position:fixed;top:-18vh;left:50%;transform:translateX(-50%);
  width:min(1400px,140vw);height:70vh;z-index:0;pointer-events:none;
  background:
    radial-gradient(46% 60% at 32% 30%, color-mix(in srgb, var(--teal) 26%, transparent), transparent 70%),
    radial-gradient(44% 58% at 72% 44%, color-mix(in srgb, var(--coral) 20%, transparent), transparent 72%);
  filter:blur(20px);opacity:.55;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;position:relative;z-index:2}

/* ---------- Top bar ---------- */
.topbar{position:sticky;top:0;z-index:20;backdrop-filter:blur(10px);
  background:linear-gradient(to bottom, color-mix(in srgb,var(--bg) 82%, transparent), transparent);
  border-bottom:1px solid var(--line);}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{font-family:var(--serif);font-weight:900;font-size:22px;letter-spacing:-.01em;display:flex;align-items:center;gap:.5ch}
.brand .dot{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 14px var(--teal);margin-bottom:8px}
.topnav{display:flex;gap:26px;align-items:center;font-size:14px;color:var(--ink-mut)}
.topnav a{transition:color .25s var(--ease)}
.topnav a:hover{color:var(--teal)}
@media(max-width:560px){.topnav a.hide-sm{display:none}}

/* ---------- Hero ---------- */
.hero{padding:clamp(64px,12vh,140px) 0 clamp(40px,7vh,72px)}
.eyebrow{font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--teal);
  font-weight:600;display:inline-flex;align-items:center;gap:12px;margin-bottom:26px}
.eyebrow::before{content:"";width:34px;height:1px;background:linear-gradient(90deg,var(--teal),transparent)}
.hero h1{font-family:var(--serif);font-weight:900;line-height:.98;letter-spacing:-.02em;
  font-size:clamp(44px,8.5vw,104px);max-width:14ch}
.hero h1 em{font-style:italic;font-weight:400;color:transparent;
  background:linear-gradient(120deg,var(--teal),var(--coral));-webkit-background-clip:text;background-clip:text}
.hero p.lede{margin-top:30px;max-width:52ch;font-size:clamp(16px,2vw,19px);color:var(--ink-mut);font-weight:400}
.hero .meta{margin-top:40px;display:flex;flex-wrap:wrap;gap:10px 26px;font-size:13px;color:var(--ink-dim);
  letter-spacing:.02em;border-top:1px solid var(--line);padding-top:22px}
.hero .meta b{color:var(--ink-mut);font-weight:600}

/* ---------- Projects ---------- */
.sectionhead{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  margin:clamp(30px,5vh,54px) 0 24px}
.sectionhead h2{font-family:var(--serif);font-weight:600;font-size:clamp(20px,2.6vw,26px);letter-spacing:-.01em}
.sectionhead span{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim)}

.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(max-width:760px){.grid{grid-template-columns:1fr}}

.card{position:relative;display:flex;flex-direction:column;gap:14px;
  background:linear-gradient(180deg,var(--surface),var(--bg-2));
  border:1px solid var(--line-solid);border-radius:var(--radius);
  padding:30px 30px 26px;overflow:hidden;isolation:isolate;
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
.card::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:radial-gradient(80% 120% at 100% 0%, color-mix(in srgb,var(--teal) 16%,transparent), transparent 60%);
  transition:opacity .45s var(--ease)}
.card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--teal) 55%, var(--line-solid));
  box-shadow:0 18px 50px -24px color-mix(in srgb,var(--teal) 60%, transparent),0 2px 0 color-mix(in srgb,var(--teal) 12%,transparent) inset}
.card:hover::before{opacity:1}
.card .row1{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.card .idx{font-family:var(--serif);font-weight:400;font-size:15px;color:var(--ink-dim);
  letter-spacing:.04em;transition:color .4s var(--ease)}
.card:hover .idx{color:var(--coral)}
.card .arrow{color:var(--ink-dim);transition:transform .4s var(--ease),color .4s var(--ease);flex:none}
.card:hover .arrow{color:var(--teal);transform:translate(4px,-4px)}
.card h3{font-family:var(--serif);font-weight:600;font-size:26px;letter-spacing:-.01em;line-height:1.1}
.card p{color:var(--ink-mut);font-size:15px;max-width:44ch}
.card .dom{margin-top:auto;padding-top:8px;font-size:13px;letter-spacing:.02em;color:var(--ink-dim);
  display:flex;align-items:center;gap:8px}
.card .dom .tick{width:5px;height:5px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px var(--teal)}
.card .socials{display:flex;gap:12px;margin-top:2px;position:relative;z-index:2}
.card .socials a{color:var(--ink-dim);transition:color .3s var(--ease)}
.card .socials a:hover{color:var(--teal)}
/* Stretched-Link: ganze Karte klickbar, ohne verschachtelte <a> */
.card .cardlink{color:inherit}
.card .cardlink::after{content:"";position:absolute;inset:0;z-index:1}

/* Full-bleed featured (first) card spans 2 cols */
.card.feature{grid-column:1/-1}
@media(min-width:761px){.card.feature{flex-direction:row;align-items:stretch;gap:40px}
  .card.feature .txt{flex:1;display:flex;flex-direction:column;gap:14px}
  .card.feature h3{font-size:34px}
  .card.feature .side{width:210px;flex:none;border-left:1px solid var(--line);padding-left:30px;
    display:flex;flex-direction:column;justify-content:center;gap:14px}}
.card .side .claim{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-mut);letter-spacing:.02em}
.card .side .claim .tick{width:5px;height:5px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px var(--teal);flex:none}

/* ---------- Footer ---------- */
footer{margin-top:clamp(50px,9vh,110px);border-top:1px solid var(--line);
  background:linear-gradient(180deg,transparent,var(--bg-2))}
footer .wrap{padding-top:46px;padding-bottom:46px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px}
@media(max-width:680px){footer .wrap{grid-template-columns:1fr;gap:26px}}
footer .brand{font-size:20px}
footer .col h4{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:14px;font-weight:600}
footer .col a,footer .col p{display:block;color:var(--ink-mut);font-size:14px;margin-bottom:9px;transition:color .25s var(--ease)}
footer .col a:hover{color:var(--teal)}
footer .legalbar{border-top:1px solid var(--line)}
footer .legalbar .wrap{grid-template-columns:1fr;padding-top:22px;padding-bottom:34px;display:flex;
  justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px;color:var(--ink-dim)}

/* ---------- Legal pages ---------- */
.legal{padding:clamp(48px,9vh,96px) 0 40px}
.legal .back{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mut);
  display:inline-flex;gap:8px;align-items:center;margin-bottom:34px;transition:color .25s var(--ease)}
.legal .back:hover{color:var(--teal)}
.legal h1{font-family:var(--serif);font-weight:900;font-size:clamp(34px,6vw,56px);letter-spacing:-.02em;margin-bottom:10px}
.legal .updated{color:var(--ink-dim);font-size:13px;letter-spacing:.04em;margin-bottom:40px}
.prose{max-width:74ch}
.prose h2{font-family:var(--serif);font-weight:600;font-size:22px;letter-spacing:-.01em;
  margin:38px 0 12px;color:var(--ink);padding-top:22px;border-top:1px solid var(--line)}
.prose h3{font-size:15px;font-weight:700;margin:22px 0 6px;color:var(--ink)}
.prose p,.prose li{color:var(--ink-mut);font-size:15.5px;margin-bottom:12px}
.prose ul{padding-left:20px;margin-bottom:12px}
.prose li{margin-bottom:6px}
.prose a{color:var(--teal);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--teal-deep)}
.prose strong{color:var(--ink);font-weight:600}
.prose .box{background:var(--surface);border:1px solid var(--line-solid);border-radius:12px;padding:22px 24px;margin:8px 0 20px}
.prose .box p:last-child{margin-bottom:0}

/* ---------- Ökosystem-Diagramm ---------- */
.eco{padding-top:clamp(28px,5vh,56px)}
.eco-stage{max-width:720px;margin:22px auto 0}
.eco-svg{width:100%;height:auto;display:block;overflow:visible}
.eco-svg .base{stroke:var(--line-solid);stroke-width:1.5;fill:none}
.eco-svg .flow{stroke:var(--teal);stroke-width:2;fill:none;stroke-dasharray:2 13;stroke-linecap:round;
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--teal) 80%,transparent));animation:ecoflow 1.9s linear infinite}
@keyframes ecoflow{to{stroke-dashoffset:-30}}
.eco-node{transition:transform .4s var(--ease);transform-box:fill-box;transform-origin:center}
.eco-node:hover{transform:scale(1.07)}
.eco-node .ring{fill:var(--surface-2);stroke:var(--line-solid);stroke-width:1.5}
.eco-node.center .ring{fill:color-mix(in srgb,var(--teal) 15%, var(--surface-2));stroke:var(--teal);stroke-width:2}
.eco-node.center .halo{fill:none;stroke:var(--teal);stroke-width:1.5;transform-box:fill-box;transform-origin:center;
  animation:ecopulse 3.4s ease-in-out infinite}
@keyframes ecopulse{0%,100%{opacity:.12;transform:scale(1)}50%{opacity:.5;transform:scale(1.24)}}
.eco-node text{font-family:var(--sans);font-weight:600;text-anchor:middle;fill:var(--ink);font-size:13px}
.eco-node.center text{fill:var(--teal);font-size:17px;font-family:var(--serif)}
.eco-node.center .sub{fill:var(--ink-dim);font-size:11px;font-family:var(--sans);font-weight:500}
.eco-rel{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:36px}
@media(max-width:640px){.eco-rel{grid-template-columns:1fr}}
.eco-rel .item{display:flex;gap:12px;align-items:flex-start;padding:17px 19px;background:var(--surface);
  border:1px solid var(--line-solid);border-radius:12px;transition:border-color .3s var(--ease)}
.eco-rel .item:hover{border-color:color-mix(in srgb,var(--teal) 45%,var(--line-solid))}
.eco-rel .item .k{color:var(--coral);font-size:18px;line-height:1.3;flex:none}
.eco-rel .item b{color:var(--ink);font-weight:600;display:block;margin-bottom:3px;font-size:14px}
.eco-rel .item p{color:var(--ink-mut);font-size:14.5px}
@media(prefers-reduced-motion:reduce){.eco-svg .flow{animation:none;stroke-dasharray:none;opacity:.6}
  .eco-node.center .halo{animation:none;opacity:.3}}

/* ---------- Load animation ---------- */
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(16px);animation:rise .8s var(--ease) forwards}
  @keyframes rise{to{opacity:1;transform:none}}
  .d1{animation-delay:.05s}.d2{animation-delay:.13s}.d3{animation-delay:.21s}
  .d4{animation-delay:.29s}.d5{animation-delay:.37s}.d6{animation-delay:.45s}.d7{animation-delay:.53s}
}