/* Felenia-Box: Landing und Rechtliches unter felenia.com. Dunkler Cyber-Look wie die App.
   Schriften vom eigenen Server (fonts.css). Keine Inline-Skripte, die Seiten brauchen kein JavaScript. */
:root{
  color-scheme: dark;
  --bg:#070B14; --bg-2:#0A101D; --panel:#0E1524; --panel-2:#121B2E;
  --line:#1B2640; --line-2:#24324F;
  --ink:#E8EEF8; --ink-2:#A3B2CB; --ink-3:#7A8AA6;
  --accent:#5B7CFF; --accent-2:#7F98FF; --cyan:#2BD4C4;
  --live:#3DE38A; --proto:#F5A524; --plan:#5D6B85;
  --r:18px;
  --display:"Bricolage Grotesque", system-ui, sans-serif;
  --sans:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Consolas, monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font:400 16px/1.6 var(--sans); overflow-x:hidden}
a{color:var(--accent-2)}
a:hover{color:#A9BBFF}
img,svg{display:block}
:focus-visible{outline:2px solid var(--accent-2); outline-offset:3px; border-radius:6px}
.bg-grid{position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 500px at 78% -10%, rgba(91,124,255,.20), transparent 60%),
    radial-gradient(700px 420px at -10% 30%, rgba(43,212,196,.08), transparent 60%),
    linear-gradient(rgba(91,124,255,.045) 1px, transparent 1px) 0 0/44px 44px,
    linear-gradient(90deg, rgba(91,124,255,.045) 1px, transparent 1px) 0 0/44px 44px;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); mask-image:linear-gradient(180deg, #000 0%, #000 55%, transparent 100%)}
.wrap{width:min(1180px, 100%); margin:0 auto; padding:0 24px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- Kopf ---------- */
.nav{position:sticky; top:0; z-index:20; backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  background:rgba(7,11,20,.72); border-bottom:1px solid rgba(36,50,79,.55)}
.nav .wrap{display:flex; align-items:center; gap:22px; height:68px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); flex:0 0 auto}
.brand:hover{color:var(--ink)}
.logo{width:36px; height:36px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#fff;
  background:linear-gradient(135deg, var(--accent), #3A56E8); box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, 0 6px 22px -6px rgba(91,124,255,.8)}
.logo svg{width:20px; height:20px}
.wm{font:700 20px/1 var(--display); letter-spacing:-.01em}
.nav nav{display:flex; gap:4px; margin-left:8px}
.nav nav a{color:var(--ink-2); text-decoration:none; font-size:14.5px; font-weight:500; padding:8px 12px; border-radius:9px}
.nav nav a:hover{color:var(--ink); background:rgba(255,255,255,.04)}
.nav .sp{flex:1}

/* ---------- Knoepfe ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; height:46px; padding:0 20px; border-radius:12px;
  font:600 15px/1 var(--sans); text-decoration:none; white-space:nowrap; cursor:pointer;
  color:var(--ink); border:1px solid var(--line-2); background:rgba(14,21,36,.7); transition:border-color .15s, box-shadow .15s, transform .15s}
.btn:hover{color:var(--ink); border-color:#3A4C74}
.btn svg{width:18px; height:18px}
.btn.pri{color:#fff; border-color:rgba(127,152,255,.6); background:linear-gradient(180deg, #6C89FF, #4A69F2);
  box-shadow:0 10px 30px -10px rgba(91,124,255,.95), inset 0 1px 0 rgba(255,255,255,.22)}
.btn.pri:hover{color:#fff; box-shadow:0 0 0 1px rgba(127,152,255,.8), 0 14px 36px -8px rgba(91,124,255,1), inset 0 1px 0 rgba(255,255,255,.22); transform:translateY(-1px)}
.btn.sm{height:40px; padding:0 15px; font-size:14px; border-radius:11px}

/* ---------- Hero ---------- */
.eyebrow{display:inline-flex; align-items:center; gap:10px; margin:0 0 18px; font:500 12px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--cyan)}
.eyebrow::before{content:""; width:22px; height:2px; border-radius:2px; background:var(--cyan); box-shadow:0 0 10px var(--cyan)}
h1{font:700 clamp(38px, 5.2vw, 62px)/1.02 var(--display); letter-spacing:-.025em; margin:0 0 22px}
h1 span{background:linear-gradient(92deg, #8FA5FF, var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent}
.cta{display:flex; flex-wrap:wrap; gap:12px}
.fine{margin:16px 0 0; font:500 12.5px/1.5 var(--mono); letter-spacing:.04em; color:var(--ink-3)}

/* Legende mit Punkt (Stand eines Werkzeugs) */
.lg{display:inline-flex; align-items:center; gap:7px}
.lg i{width:8px; height:8px; border-radius:50%; background:var(--plan)}
.lg.s-live i{background:var(--live); box-shadow:0 0 8px var(--live)}
.lg.s-proto i{background:var(--proto)}

/* ---------- Abschnitte ---------- */
section{scroll-margin-top:84px}
h2{font:700 clamp(28px, 3.6vw, 40px)/1.1 var(--display); letter-spacing:-.02em; margin:0 0 14px}

/* Stand eines Werkzeugs */
.chip{display:inline-flex; align-items:center; gap:7px; font:500 10.5px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase;
  padding:5px 9px; border-radius:999px; border:1px solid var(--line-2); color:var(--ink-2); white-space:nowrap}
.chip i{width:7px; height:7px; border-radius:50%; background:var(--plan)}
.chip.s-live{color:#BFF5D6; border-color:rgba(61,227,138,.35)}
.chip.s-live i{background:var(--live); box-shadow:0 0 8px var(--live)}
.chip.s-proto i{background:var(--proto)}

/* Preise */
.plans{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; align-items:stretch}
.plan{position:relative; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:22px; padding:26px 24px 24px;
  background:linear-gradient(180deg, rgba(18,27,46,.85), rgba(12,18,32,.75))}
.plan.hi{border-color:rgba(127,152,255,.55); box-shadow:0 0 0 1px rgba(91,124,255,.25), 0 30px 80px -40px rgba(91,124,255,.7)}
.plan .tag{position:absolute; top:-12px; left:24px; font:500 10.5px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:#fff;
  padding:6px 10px; border-radius:999px; background:linear-gradient(180deg, #6C89FF, #4A69F2)}
.plan h3{margin:0 0 4px; font:700 22px/1.2 var(--display)}
.plan .for{margin:0 0 18px; color:var(--ink-3); font-size:14px}
.price{display:flex; align-items:baseline; gap:8px; margin:0 0 20px}
.price b{font:700 44px/1 var(--display); letter-spacing:-.02em}
.price span{color:var(--ink-3); font-size:14px}
.plan ul{list-style:none; margin:0 0 24px; padding:0; display:grid; gap:10px; flex:1}
.plan li{display:grid; grid-template-columns:20px minmax(0, 1fr); gap:10px; font-size:15px; color:var(--ink-2)}
.plan li svg{width:18px; height:18px; margin-top:3px; color:var(--cyan)}
.plan li b{color:var(--ink); font-weight:600}
.plan .btn{width:100%}
.plans-fine{margin:22px 0 0; color:var(--ink-3); font-size:13.5px; max-width:60em}

/* Fragen */
.faq{display:grid; gap:10px; max-width:860px}
.faq details{border:1px solid var(--line); border-radius:14px; background:rgba(14,21,36,.6)}
.faq summary{cursor:pointer; list-style:none; display:flex; align-items:center; gap:14px; padding:17px 20px; font-weight:600; font-size:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"›"; margin-left:auto; color:var(--ink-3); font-size:22px; line-height:1; transition:transform .18s}
.faq details[open] summary::after{transform:rotate(90deg)}
.faq details p{margin:0; padding:0 20px 18px; color:var(--ink-2); font-size:15px}

/* Fuss */
.foot{border-top:1px solid var(--line); padding:28px 0 calc(28px + env(safe-area-inset-bottom))}
.foot .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px}
.foot a{color:var(--ink-2); text-decoration:none; font-size:14px}
.foot a:hover{color:var(--ink)}
.foot .pw{margin-left:auto; font:500 11px/1.2 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.foot .pw b{font-weight:600; color:var(--ink-2)}
.foot a.pw:hover, .foot a.pw:hover b{color:var(--ink)}

/* ---------- Rechtliches ---------- */
.legal{max-width:780px; padding:56px 0 80px}
.legal h1{font-size:clamp(32px, 4.4vw, 46px); margin-bottom:10px}
.legal .stand{margin:0 0 30px; font:500 12px/1.4 var(--mono); letter-spacing:.08em; color:var(--ink-3)}
.legal h2{font-size:22px; margin:36px 0 10px}
.legal h3{font:600 17px/1.3 var(--sans); margin:22px 0 6px}
.legal p,.legal li{color:var(--ink-2)}
.legal ul{padding-left:20px}
.legal li{margin:6px 0}
.legal .kurz{border:1px solid var(--line-2); border-radius:16px; padding:6px 22px; background:rgba(14,21,36,.6)}
.legal table{width:100%; border-collapse:collapse; margin:10px 0; font-size:15px}
.legal th,.legal td{text-align:left; vertical-align:top; padding:10px 12px 10px 0; border-top:1px solid var(--line)}
.legal th{color:var(--ink); font-weight:600; white-space:nowrap}
.legal td{color:var(--ink-2)}
.legal .en{font-style:italic}
.legal address{font-style:normal; color:var(--ink-2)}

/* ---------- Handy ---------- */
@media (max-width:980px){
  .plans{grid-template-columns:minmax(0, 1fr); max-width:520px}
}
@media (max-width:760px){
  .nav nav{display:none}
  .wrap{padding:0 16px}
  .foot .pw{margin-left:0; width:100%}
}
@media (max-width:420px){
  .cta .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .btn{transition:none} .btn.pri:hover{transform:none} }