/* Onimai Server — gemeinsames Stylesheet fuer alle Seiten.
   Herausgeloest aus index.html am 20.08.2026, damit Startseite und
   Unterseiten (Datenschutz, Impressum, Login, Panel) nicht auseinanderlaufen. */

/* ===== 0. Design-Tokens ===== */
:root{
  --bg:#0a0714;
  --surface:#120c20;
  --surface-2:#171029;
  --primary:#8b5cf6;
  --secondary:#f472b6;
  --glow:#c4a4ff;
  --text:#f5eeff;
  --muted:#9b8bb8;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(196,164,255,.22);
  --ok:#4ade80;
  --font-display:'Sora',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --ease:cubic-bezier(.16,.84,.44,1);
  --nav-h:78px;
}

/* ===== 1. Reset ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{background:var(--bg);color:var(--text);overflow-x:hidden}
body{font-family:var(--font-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh;position:relative}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
::selection{background:var(--primary);color:#fff}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--primary),var(--secondary));border-radius:10px}
:focus-visible{outline:2px solid var(--secondary);outline-offset:3px;border-radius:6px}

.container{width:100%;max-width:1180px;margin:0 auto;padding:0 32px}
.eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--secondary);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:'';width:22px;height:1px;background:var(--secondary);box-shadow:0 0 8px var(--secondary)}
.section-title{font-family:var(--font-display);font-weight:700;font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.1;letter-spacing:-.02em}
.section-sub{color:var(--muted);font-size:clamp(1rem,1.35vw,1.08rem);max-width:52ch;margin-top:16px}
.grad-text{background:linear-gradient(96deg,var(--text) 12%,var(--secondary) 52%,var(--glow) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:14.5px;padding:13px 26px;border-radius:100px;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease);white-space:nowrap;will-change:transform}
.btn-primary{background:linear-gradient(120deg,var(--primary),var(--secondary));color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 10px 30px -8px var(--glow)}
.btn-primary:hover{box-shadow:0 0 0 1px rgba(255,255,255,.16) inset,0 16px 40px -8px var(--glow)}
.btn-ghost{background:rgba(255,255,255,.035);border:1px solid var(--line-2);color:var(--text);backdrop-filter:blur(10px)}
.btn-ghost:hover{background:rgba(255,255,255,.075);border-color:rgba(196,164,255,.45)}
.btn-sm{padding:10px 20px;font-size:13px}

/* ===== 2. Hintergrund ===== */
#ambient{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.6}
.noise{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='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
main{position:relative;z-index:2}
#scroll-bar{position:fixed;top:0;left:0;height:2px;width:0;z-index:200;background:linear-gradient(90deg,var(--primary),var(--secondary));box-shadow:0 0 12px var(--secondary)}

/* ===== 3. Navbar ===== */
.navbar{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);display:flex;align-items:center;border-bottom:1px solid transparent;transition:height .45s var(--ease),background .45s var(--ease),border-color .45s var(--ease)}
.navbar.scrolled{height:62px;background:rgba(10,7,20,.75);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid var(--line)}
.nav-inner{width:100%;max-width:1180px;margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:700;font-size:18px}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-links a{font-size:14px;font-weight:500;color:var(--muted);position:relative;transition:color .3s}
.nav-links a::after{content:'';position:absolute;left:0;right:0;bottom:-8px;height:1px;background:linear-gradient(90deg,var(--primary),var(--secondary));transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav-links a:hover{color:var(--text)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-burger{display:none;width:40px;height:40px;align-items:center;justify-content:center;background:none;border:none;cursor:pointer}
.nav-burger span{position:relative;width:20px;height:1px;background:#fff;display:block}
.nav-burger span::before,.nav-burger span::after{content:'';position:absolute;left:0;width:20px;height:1px;background:#fff}
.nav-burger span::before{top:-6px}
.nav-burger span::after{top:6px}

/* ===== 4. Hero ===== */
.hero{min-height:100vh;display:flex;align-items:center;padding:calc(var(--nav-h) + 48px) 0 80px;position:relative;overflow:hidden}
.hero-glow{position:absolute;top:-30%;left:55%;transform:translateX(-50%);width:1000px;height:1000px;max-width:170vw;background:radial-gradient(circle,rgba(139,92,246,.3),rgba(244,114,182,.11) 42%,transparent 70%);filter:blur(20px);pointer-events:none;z-index:0}
.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.hero h1{font-family:var(--font-display);font-weight:800;font-size:clamp(2.05rem,3.3vw,2.9rem);line-height:1.04;letter-spacing:-.03em;margin:20px 0 22px}
.hero p.lead{color:var(--muted);font-size:clamp(1rem,1.35vw,1.14rem);max-width:44ch;margin-bottom:34px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:46px}
.hero-stats{display:flex;gap:40px;flex-wrap:wrap}
.hero-stat b{display:block;font-family:var(--font-display);font-size:1.5rem;font-weight:700}
.hero-stat span{font-size:11px;color:var(--muted);font-family:var(--font-mono);letter-spacing:.14em}

/* Terminal-Nachbau im Hero */
.term-wrap{position:relative;perspective:1600px}
.term{position:relative;z-index:1;border-radius:20px;overflow:hidden;background:linear-gradient(165deg,rgba(255,255,255,.06),rgba(255,255,255,.012) 42%),var(--surface);border:1px solid var(--line-2);box-shadow:0 60px 120px -44px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.04) inset,0 0 90px -26px rgba(139,92,246,.45);transform:rotateY(-9deg) rotateX(5deg);transition:transform .25s var(--ease);animation:float-term 7s ease-in-out infinite}
@keyframes float-term{0%,100%{translate:0 0}50%{translate:0 -14px}}
.term-bar{display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid var(--line);background:rgba(0,0,0,.25)}
.term-dot{width:10px;height:10px;border-radius:50%}
.term-title{margin-left:8px;font-family:var(--font-mono);font-size:11.5px;color:var(--muted);letter-spacing:.06em}
.term-body{padding:18px 18px 22px;font-family:var(--font-mono);font-size:12.5px;line-height:1.85;min-height:270px}
.term-body .l{opacity:0;animation:line-in .4s var(--ease) forwards}
@keyframes line-in{to{opacity:1}}
.p-user{color:var(--secondary)}
.p-path{color:var(--glow)}
.p-out{color:var(--muted)}
.p-ok{color:var(--ok)}
.cursor{display:inline-block;width:7px;height:14px;background:var(--secondary);vertical-align:-2px;animation:blink 1.1s steps(2) infinite}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}
.badge-float{position:absolute;z-index:3;padding:9px 15px;border-radius:14px;background:rgba(19,12,34,.62);border:1px solid var(--line-2);backdrop-filter:blur(16px);font-size:12px;font-weight:600;display:flex;align-items:center;gap:8px;box-shadow:0 20px 40px -15px rgba(0,0,0,.65);white-space:nowrap}
.badge-float.b1{top:-30px;left:-3%;animation:float-term 6s ease-in-out infinite .4s}
.badge-float.b2{bottom:8%;right:-4%;animation:float-term 8s ease-in-out infinite 1s}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok);flex-shrink:0}

/* ===== 5. Der Pfad + Feature-Bloecke ===== */
.road-section{position:relative;padding-top:96px}
.road-head{text-align:center;max-width:640px;margin:0 auto 30px;padding:0 32px}
.road-wrap{position:relative;width:100%}
.road-svg-holder{position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(420px,78vw);height:100%;z-index:1;pointer-events:none}
#road-svg{width:100%;height:100%;overflow:visible}
.road-base{fill:none;stroke:rgba(255,255,255,.06);stroke-width:2}
.road-glow{fill:none;stroke:url(#roadGrad);stroke-width:3}
.road-dash{fill:none;stroke:url(#roadGrad);stroke-width:1.4;stroke-dasharray:2 22;opacity:.9}
.road-hud{position:fixed;left:32px;top:50%;transform:translateY(-50%);z-index:20;font-family:var(--font-mono);font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:8px;opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.road-hud.visible{opacity:1}
.hud-num{font-size:32px;font-weight:600;color:var(--text);line-height:1}
.hud-num span{font-size:15px;color:var(--muted)}
.hud-name{letter-spacing:.18em;color:var(--secondary)}
.hud-bar{width:1px;height:60px;background:var(--line-2);position:relative;margin-top:4px}
.hud-bar>i{position:absolute;top:0;left:-1.5px;width:4px;height:0;background:linear-gradient(var(--primary),var(--secondary));box-shadow:0 0 10px var(--secondary);transition:height .35s var(--ease)}

.feature-track{position:relative;z-index:2}
/* Die sechs Stationen standen mit 64vh + 40px so weit auseinander, dass
   zwischen zwei Karten fast ein leerer Bildschirm lag. Enger gestellt:
   der Pfad bleibt lesbar, man scrollt aber nicht mehr durch Leere.
   Der SVG-Pfad daneben skaliert mit (preserveAspectRatio="none"). */
.fblock{min-height:40vh;display:flex;align-items:center;padding:22px 32px}
.fblock.right .fcard{margin-left:auto}
.fblock.left .fcard{margin-right:auto}
.fcard{width:min(440px,92vw);padding:34px 32px;border-radius:24px;background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.014));border:1px solid var(--line);backdrop-filter:blur(18px);box-shadow:0 40px 80px -32px rgba(0,0,0,.72);transition:opacity .6s var(--ease),transform .6s var(--ease),border-color .6s,box-shadow .6s}
.js .fblock .fcard{opacity:.32;transform:translateY(28px) scale(.97)}
.js .fblock.active .fcard{opacity:1;transform:none;border-color:rgba(196,164,255,.35);box-shadow:0 40px 90px -30px rgba(139,92,246,.45),0 0 0 1px rgba(196,164,255,.08) inset}
.fc-num{font-family:var(--font-mono);font-size:12px;color:var(--secondary);letter-spacing:.2em}
.fcard h3{font-family:var(--font-display);font-weight:700;font-size:clamp(1.45rem,2.4vw,1.9rem);line-height:1.14;margin:14px 0 12px;letter-spacing:-.01em}
.fcard p{color:var(--muted);font-size:14.5px;max-width:38ch;margin-bottom:20px}
.fc-visual{border-radius:15px;border:1px solid var(--line);background:rgba(0,0,0,.28);padding:15px;font-family:var(--font-mono);font-size:11.5px;line-height:1.85}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;padding:6px 11px;border-radius:100px;border:1px solid var(--line-2);color:var(--glow);background:rgba(196,164,255,.06);text-transform:uppercase}
.chip.ok{color:var(--ok);border-color:rgba(74,222,128,.3);background:rgba(74,222,128,.07)}
.bars{display:flex;flex-direction:column;gap:10px}
.bar-row{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--muted)}
.bar-row .track{flex:1;height:5px;border-radius:100px;background:rgba(255,255,255,.07);overflow:hidden;display:block}
.bar-row .fill{display:block;height:100%;border-radius:100px;background:linear-gradient(90deg,var(--primary),var(--secondary));width:0;transition:width 1.1s var(--ease)}
.fblock.active .bar-row .fill{width:var(--w,50%)}
.iso-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;text-align:center}
.iso-box{padding:12px 8px;border-radius:12px;border:1px solid var(--line-2);background:rgba(255,255,255,.03);font-size:11px}
.iso-wall{font-size:20px;opacity:.75}

/* ===== 6. Server-Karten ===== */
.servers{padding:110px 0 30px;position:relative;z-index:2}
.servers-head{text-align:center;max-width:620px;margin:0 auto 52px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:26px}
.card{position:relative;padding:30px 28px;border-radius:24px;background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.012));border:1px solid var(--line);backdrop-filter:blur(18px);box-shadow:0 40px 80px -34px rgba(0,0,0,.75);transition:opacity .7s var(--ease),transform .7s var(--ease),border-color .4s,box-shadow .4s;will-change:transform}
.js .card[data-reveal]{opacity:0;transform:translateY(30px)}
.js .card.revealed{opacity:1;transform:none}
.card:hover{border-color:rgba(196,164,255,.4);box-shadow:0 40px 90px -30px rgba(139,92,246,.45),0 0 0 1px rgba(196,164,255,.08) inset}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:5px}
.card-name{font-family:var(--font-display);font-weight:700;font-size:1.5rem;display:flex;align-items:center;gap:11px}
.pill{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;padding:5px 11px;border-radius:100px;border:1px solid rgba(74,222,128,.3);color:var(--ok);background:rgba(74,222,128,.07);text-transform:uppercase}
.card-site{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:12.5px;color:var(--secondary);margin-bottom:16px;word-break:break-all}
.card-site svg{width:13px;height:13px;flex-shrink:0}
.mini-term{border-radius:12px;border:1px solid var(--line);background:rgba(0,0,0,.3);padding:11px 13px;font-family:var(--font-mono);font-size:11px;line-height:1.8;margin-bottom:16px}
.rows{border-top:1px solid var(--line);margin-bottom:20px}
.row{display:flex;justify-content:space-between;gap:14px;padding:10px 0;font-size:13.5px;border-bottom:1px solid var(--line)}
.row .k{color:var(--muted)}
.row .v{font-family:var(--font-mono);color:var(--glow);text-align:right}
.card-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ===== 7. Isolation ===== */
.iso-section{padding:150px 0 120px;text-align:center;position:relative;z-index:2;background:radial-gradient(ellipse at 50% 50%,rgba(139,92,246,.09),transparent 62%)}
.orbit-wrap{position:relative;width:280px;height:280px;margin:52px auto 34px}
.orbit{position:absolute;inset:0;border-radius:50%;border:1px solid var(--line)}
.orbit.o1{animation:spin 22s linear infinite}
.orbit.o2{inset:26px;animation:spin 30s linear infinite reverse}
.orbit.o3{inset:52px;animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.orbit i{position:absolute;top:-3px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--secondary);box-shadow:0 0 10px var(--secondary)}
.orbit.o2 i{background:var(--primary);box-shadow:0 0 10px var(--primary)}
.orbit-core{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.orbit-core svg{width:92px;height:92px;filter:drop-shadow(0 0 30px rgba(196,164,255,.55));animation:pulse 3.4s ease-in-out infinite}
@keyframes pulse{0%,100%{filter:drop-shadow(0 0 20px rgba(196,164,255,.4))}50%{filter:drop-shadow(0 0 42px rgba(244,114,182,.55))}}
.iso-words{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.iso-words span{font-family:var(--font-mono);font-size:12px;letter-spacing:.24em;color:var(--muted)}

/* ===== 8. Zahlen ===== */
.stats-section{padding:60px 0 100px;position:relative;z-index:2}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.stat-cell{background:var(--surface);padding:48px 26px;text-align:center}
.stat-cell .num{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,3.6vw,2.9rem);letter-spacing:-.02em}
.stat-cell .lbl{margin-top:9px;font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;color:var(--muted)}

/* ===== 9. Zugang ===== */
.info-section{padding:20px 0 120px;position:relative;z-index:2}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
.info{padding:28px;border-radius:20px;background:rgba(255,255,255,.03);border:1px solid var(--line);border-left:3px solid var(--primary);font-size:14.5px;color:#d9cdf0;line-height:1.75;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .info[data-reveal]{opacity:0;transform:translateY(24px)}
.js .info.revealed{opacity:1;transform:none}
.info h3{font-family:var(--font-display);font-size:1.1rem;font-weight:600;color:var(--text);margin-bottom:13px}
.info strong{color:var(--text);font-weight:600}
code{background:rgba(0,0,0,.45);padding:.2rem .55rem;border-radius:6px;font-family:var(--font-mono);font-size:.86em;color:var(--secondary)}

/* ===== 9b. Abschluss-Aufruf ===== */
.final-cta{position:relative;padding:150px 0 170px;text-align:center;overflow:hidden;z-index:2}
.final-glow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(139,92,246,.5),rgba(244,114,182,.22) 45%,transparent 72%);filter:blur(30px);animation:cta-atmen 5.5s var(--ease) infinite alternate;z-index:0;pointer-events:none}
@keyframes cta-atmen{from{width:220px;height:220px;opacity:.55}to{width:880px;height:880px;opacity:1}}
.final-cta>.container{position:relative;z-index:1}
.final-cta h2{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,4.4vw,3.4rem);letter-spacing:-.03em;line-height:1.05;margin-top:16px}
.final-cta p.lead{color:var(--muted);margin:20px auto 30px;font-size:1.06rem;max-width:46ch}
.cta-specs{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:34px}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta-hint{margin-top:26px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;color:var(--muted)}

/* ===== 10. Footer ===== */
footer{border-top:1px solid var(--line);padding:46px 0 34px;position:relative;z-index:2}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.footer-logo{font-family:var(--font-display);font-weight:700;font-size:16px;display:flex;align-items:center;gap:9px}
.footer-inner p{font-size:12.5px;color:var(--muted)}

/* ===== 11. Responsive ===== */
@media (max-width:1024px){
  .hero-inner{grid-template-columns:1fr;gap:48px}
  .term-wrap{max-width:460px;margin:0 auto;width:100%}
  .term{transform:none}
  .badge-float.b1{left:0}
  .badge-float.b2{right:0}
  .road-hud{display:none}
}
@media (max-width:860px){
  .nav-links{display:none}
  .nav-burger{display:flex}
  .info-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .container,.nav-inner,.fblock,.road-head{padding-left:20px;padding-right:20px}
  .hero{padding-top:calc(var(--nav-h) + 24px)}
  .hero-stats{gap:24px}
  .fblock{min-height:auto;padding-top:22px;padding-bottom:22px}
  .fcard{width:100%;margin:0 !important}
  .road-svg-holder{width:58vw;opacity:.45}
  .orbit-wrap{width:210px;height:210px}
  .badge-float{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .js .card[data-reveal],.js .info[data-reveal],.js .fblock .fcard{opacity:1 !important;transform:none !important}
}

/* ===== 12. Unterseiten (Datenschutz, Impressum, Login, Panel) ===== */
.subpage{padding:calc(var(--nav-h) + 60px) 0 90px;position:relative;z-index:2;min-height:70vh}
.subpage-head{max-width:760px;margin-bottom:40px}
.subpage-head h1{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,4.2vw,3rem);letter-spacing:-.03em;line-height:1.06;margin-top:16px}
.subpage-head p{color:var(--muted);margin-top:16px;font-size:1.04rem;max-width:60ch}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.toc a{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:7px 13px;border-radius:100px;border:1px solid var(--line-2);color:var(--muted);transition:color .3s,border-color .3s,background .3s}
.toc a:hover{color:var(--text);border-color:rgba(196,164,255,.5);background:rgba(196,164,255,.07)}

.legal{display:flex;flex-direction:column;gap:20px;max-width:900px}
.legal-card{padding:28px 30px;border-radius:20px;background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.012));border:1px solid var(--line);backdrop-filter:blur(14px);transition:opacity .7s var(--ease),transform .7s var(--ease),border-color .4s}
.js .legal-card[data-reveal]{opacity:0;transform:translateY(22px)}
.js .legal-card.revealed{opacity:1;transform:none}
.legal-card:hover{border-color:rgba(196,164,255,.32)}
.legal-card h2{font-family:var(--font-display);font-size:1.15rem;font-weight:700;margin-bottom:14px;color:var(--text)}
.legal-card h2 .n{font-family:var(--font-mono);font-size:.8em;color:var(--secondary);margin-right:8px}
.legal-card p,.legal-card li{color:#cfc3e6;font-size:14.5px;line-height:1.75}
.legal-card p+p{margin-top:12px}
.legal-card ul{margin:10px 0 0;padding-left:0;display:flex;flex-direction:column;gap:9px}
.legal-card li{position:relative;padding-left:20px}
.legal-card li::before{content:'';position:absolute;left:4px;top:.66em;width:5px;height:5px;border-radius:50%;background:var(--secondary);box-shadow:0 0 7px var(--secondary)}
.legal-card strong{color:var(--text);font-weight:600}
.legal-card a{color:var(--secondary);border-bottom:1px solid rgba(244,114,182,.35)}
.legal-card a:hover{color:var(--glow);border-bottom-color:rgba(196,164,255,.55)}
.stand{margin-top:26px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--muted)}

/* Login */
.login-wrap{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - var(--nav-h) - 140px)}
.login-card{width:min(430px,94vw);padding:38px 34px;border-radius:24px;background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.014));border:1px solid var(--line-2);backdrop-filter:blur(18px);box-shadow:0 50px 100px -36px rgba(0,0,0,.8),0 0 80px -30px rgba(139,92,246,.4)}
.login-card h1{font-family:var(--font-display);font-weight:700;font-size:1.75rem;letter-spacing:-.02em;margin:14px 0 8px}
.login-card .sub{color:var(--muted);font-size:14px;margin-bottom:26px}
.field{margin-bottom:16px}
.field label{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.field input{width:100%;padding:13px 15px;border-radius:13px;background:rgba(0,0,0,.32);border:1px solid var(--line);color:var(--text);font-family:var(--font-body);font-size:15px;outline:none;transition:border-color .3s,background .3s}
.field input:focus{border-color:rgba(196,164,255,.55);background:rgba(0,0,0,.45)}
.field input::placeholder{color:#6d6284}
.login-card .btn{width:100%;margin-top:8px}
.formnote{margin-top:18px;font-size:12.5px;color:var(--muted);line-height:1.6;text-align:center}
.msg{display:none;margin-bottom:18px;padding:12px 15px;border-radius:13px;font-size:13.5px;line-height:1.5}
.msg.show{display:block}
.msg.err{color:#ffb4c8;border:1px solid rgba(244,114,182,.35);background:rgba(244,114,182,.09)}
.msg.ok{color:#a9f2c6;border:1px solid rgba(74,222,128,.32);background:rgba(74,222,128,.08)}

/* Panel */
.panel-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:34px}
.gauge{display:flex;flex-direction:column;gap:7px;margin-top:14px}
.gauge-row{display:flex;align-items:center;gap:11px;font-size:12px;color:var(--muted)}
.gauge-row .lbl{width:58px;flex-shrink:0;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.gauge-row .track{flex:1;height:6px;border-radius:100px;background:rgba(255,255,255,.07);overflow:hidden;display:block}
.gauge-row .fill{display:block;height:100%;border-radius:100px;background:linear-gradient(90deg,var(--primary),var(--secondary));width:0;transition:width .9s var(--ease)}
.gauge-row .val{width:110px;text-align:right;font-family:var(--font-mono);font-size:11.5px;color:var(--glow)}
.panel-empty{padding:60px 30px;text-align:center;color:var(--muted);border:1px dashed var(--line-2);border-radius:20px}

/* ===== 12. Anfrageformular (Abschnitt "eigener Server") ===== */
.anfrage-form{max-width:760px;margin:26px auto 0;text-align:left}
.af-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.af-feld{display:flex;flex-direction:column;gap:7px;min-width:0}
.af-feld.af-breit{grid-column:1 / -1}
.af-feld>span{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.af-feld input,.af-feld select,.af-feld textarea{
  width:100%;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:13px;
  padding:12px 14px;color:var(--text);font-family:inherit;font-size:14.5px;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),background .25s}
.af-feld textarea{resize:vertical;min-height:64px}
.af-feld input:focus,.af-feld select:focus,.af-feld textarea:focus{
  outline:none;border-color:var(--secondary);background:rgba(196,164,255,.06);
  box-shadow:0 0 0 3px rgba(196,164,255,.14)}
.af-feld input:invalid:not(:placeholder-shown){border-color:rgba(255,107,107,.5)}

.af-rechnung{margin-top:16px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.02)}
.af-rechnung>summary{cursor:pointer;padding:13px 16px;font-weight:600;list-style:none}
.af-rechnung>summary::-webkit-details-marker{display:none}
.af-rechnung>summary::before{content:'▸ ';color:var(--secondary)}
.af-rechnung[open]>summary::before{content:'▾ '}
.af-rechnung>summary span{font-weight:400;color:var(--muted);font-size:13px}
.af-rechnung .af-grid{padding:0 16px 16px}

/* Honigtopf: nicht display:none — manche Bots erkennen das. Aus dem Bild
   geschoben, aber technisch vorhanden. */
.af-honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.af-meldung{margin-top:14px;font-size:14px;min-height:1.2em}
.af-meldung.ok{color:var(--ok)}
.af-meldung.err{color:#ff6b6b}
.af-klein{margin-top:10px;font-size:12.5px;color:var(--muted)}
.af-klein a{color:var(--secondary)}
.anfrage-form .cta-actions{margin-top:18px}

@media(max-width:720px){
  .af-grid{grid-template-columns:1fr}
}

/* ===== 13. Unterseiten: FAQ, Regeln, Kontakt, Preise ===== */
.info-liste{display:flex;flex-direction:column;gap:14px;max-width:820px}
.info{border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.03);padding:20px 22px}
.info h2{font-family:var(--font-display);font-size:1.12rem;margin:0 0 8px;letter-spacing:-.01em}
.info p{color:var(--muted);line-height:1.7;margin:0}
.info a{color:var(--secondary)}
details.info>summary{cursor:pointer;font-family:var(--font-display);font-size:1.06rem;list-style:none;
  display:flex;align-items:center;gap:10px}
details.info>summary::-webkit-details-marker{display:none}
details.info>summary::before{content:'+';color:var(--secondary);font-family:var(--font-mono);flex:0 0 auto}
details.info[open]>summary::before{content:'–'}
details.info>p{margin-top:10px}

.preis-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
.preis-karte{border:1px solid var(--line);border-radius:22px;padding:24px 22px;
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.014));
  display:flex;flex-direction:column;gap:12px}
.preis-karte.hervor{border-color:rgba(196,164,255,.35);box-shadow:0 40px 90px -40px rgba(139,92,246,.45)}
.preis-karte h2{font-family:var(--font-display);font-size:1.25rem;margin:0;letter-spacing:-.015em}
.preis-zeile{color:var(--muted);font-family:var(--font-mono);font-size:13px}
.preis-zeile strong{color:var(--text);font-size:15px}
.preis-liste{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px}
.preis-liste li{color:var(--muted);font-size:14px;padding-left:18px;position:relative}
.preis-liste li::before{content:'✓';position:absolute;left:0;color:var(--ok)}
.preis-karte .btn{margin-top:auto;align-self:flex-start}

@media(max-width:860px){
  .preis-raster{grid-template-columns:1fr}
}

/* ===== 14. Hinweis: Gewerbe noch nicht angemeldet =====
   Bis zur Gewerbeanmeldung darf hier nichts angeboten oder abgerechnet werden.
   Der Kasten sagt das deutlich, ohne die Seite abzuschalten. Wird er wieder
   entfernt, muessen auch der Rechnungsblock im Formular (siehe Sicherung
   index.html.bak-gewerbe-*) und /preise zurueck. */
.gewerbe-hinweis{
  border:1px solid rgba(255,176,32,.34);border-radius:16px;
  background:linear-gradient(160deg,rgba(255,176,32,.10),rgba(255,176,32,.03));
  padding:16px 18px;margin:0 auto 20px;max-width:760px;text-align:left;
  color:var(--muted);line-height:1.65;font-size:14.5px;
}
.gewerbe-hinweis strong{display:block;color:var(--text);margin-bottom:6px;font-size:15.5px}
.gewerbe-hinweis a{color:var(--secondary)}
.gewerbe-hinweis.gross{max-width:820px;padding:26px 26px;font-size:15.5px}
.gewerbe-hinweis.gross p{margin:0 0 10px}
.gewerbe-hinweis.gross p:last-child{margin-bottom:0}

/* ---------- Handy-Feinschliff (Onimai Server) ----------
   Gemessen bei 390 px: Text unter 11 px ist auf einem Telefon nicht mehr
   lesbar, Tippziele unter 36 px trifft man nicht zuverlaessig. Beides wird
   hier angehoben — am Desktop bleibt alles wie es war.
   Angehobene Selektoren: 5.
   ---------------------------------------------------------------------- */
@media (max-width:760px){
  .chip,
  .field label,
  .gauge-row .lbl,
  .pill,
  .toc a{
    font-size:11.5px !important;
    letter-spacing:.06em !important;
  }

  /* Von JavaScript gesetzte Kleinschriften erreicht keine Klassenregel —
     hier gezielt nur die kleinen Werte. */
  [style*="font-size: 0.58rem"],[style*="font-size:.58rem"],
  [style*="font-size: 0.6rem"],[style*="font-size:.6rem"],
  [style*="font-size: 0.62rem"],[style*="font-size:.62rem"],
  [style*="font-size: 0.65rem"],[style*="font-size:.65rem"],
  [style*="font-size: 0.68rem"],[style*="font-size:.68rem"],
  [style*="font-size:0.8em"]{font-size:11.5px !important;}

  .nav-links a,.footer-inner a{min-height:36px;display:inline-flex;align-items:center;}
  .btn,button{min-height:42px;}
}

/* ═══════════════════════════════════════════════════════════════════
   Premium-Kennzeichen + Handy-Feinschliff
   ═══════════════════════════════════════════════════════════════════ */

/* Premium-Plakette (maxi) — warmes Gold, damit sie sich klar vom
   gruenen "Online" abhebt, ohne aufdringlich zu sein. */
.pill-premium{
  border-color:rgba(255,207,107,.45) !important;
  color:#ffcf6b !important;
  background:linear-gradient(135deg,rgba(255,207,107,.16),rgba(255,168,205,.10));
  box-shadow:0 0 18px rgba(255,207,107,.18);
  margin-left:6px;
}
.card:has(.pill-premium){
  border-color:rgba(255,207,107,.28);
  box-shadow:0 20px 50px -32px rgba(255,207,107,.5);
}

/* ── Handy: lesbare Schrift und greifbare Flaechen ────────────────── */
@media (max-width:820px){

  /* Unter 12px wird es auf dem Handy anstrengend. Kleinteilige Labels
     bekommen deshalb eine Untergrenze. */
  .pill,.k,.v,.p-user,.p-path,.badge,.eyebrow,.toc a,.chip,small,figcaption,
  .lbl,.cta-hint,.term-title,.stat span,.stat-label,.meta,.note,
  .hero-stat span,.hero-stats span,.card-site,.p-user,.p-path,
  label,.field label,.form-label,legend,.hint,
  .af-feld span,.af-feld label,.gauge-row .lbl,.chip{
    font-size:13px !important;
    letter-spacing:.04em !important;
  }
  /* Terminal-Ausgaben: etwas kleiner erlaubt (Monospace wirkt groesser),
     aber nicht unter 12px. */
  .p-ok,.p-out,.p-cmd,pre,code{font-size:12.5px !important;line-height:1.6;}
  body,p,li{font-size:16px;line-height:1.65;}

  /* Alles Antippbare mindestens 44px hoch (Apple/Google-Empfehlung),
     sonst trifft man es mit dem Daumen nicht zuverlaessig. */
  a.btn,button,.btn,.card-site,nav a,.toc a{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding-inline:16px;
  }
  /* Fliesstext-Links sollen NICHT zu Bloecken werden */
  p a,.n-text a,li a{min-height:0;display:inline;padding-inline:0;}

  /* Karten duerfen die volle Breite nutzen und brauchen Luft */
  /* iOS zoomt automatisch hinein, wenn ein Feld unter 16px hat. */
  input,select,textarea{font-size:16px !important;min-height:44px;}
  .card{padding:18px 16px;}
  .row{gap:10px;}
  .row .v{text-align:right;}
}

/* Sehr schmale Geraete (bis 360px) */
@media (max-width:360px){
  .row{flex-direction:column;align-items:flex-start;gap:2px;}
  .row .v{text-align:left;}
}

}

/* Kopfzeile auf dem Handy: Logo, Button und Menue muessen in EINE Zeile.
   Ohne nowrap brach "Onimai Server" um und der Kopf wurde zweizeilig. */
@media (max-width:820px){
  .nav-inner{gap:10px;flex-wrap:nowrap;}
  .nav-logo{white-space:nowrap;font-size:17px;flex:0 0 auto;}
  .nav-inner .btn-sm{
    white-space:nowrap;
    padding:10px 14px;
    font-size:13px !important;
    flex:0 0 auto;
  }
  .nav-burger{flex:0 0 auto;}
}
/* Sehr schmal: Logo-Zusatz "Server" ausblenden, Blume + Onimai reichen */
@media (max-width:400px){
  .nav-logo .grad-text{display:none;}
  .nav-inner .btn-sm{padding:10px 12px;}
}

/* Free-Kennzeichen (maxi) — bewusst zurückhaltend in Grau-Violett,
   damit die goldene Premium-Plakette die auffälligere bleibt. */
.pill-free{
  border-color:rgba(167,139,250,.30) !important;
  color:#a394ad !important;
  background:rgba(255,255,255,.04);
  margin-left:6px;
  white-space:nowrap;
}
@media (max-width:400px){
  /* Auf sehr schmalen Displays nur "Free", der Zusatz sprengt die Zeile */
  .pill-free{font-size:12.5px !important;padding:5px 9px;}
}