/* Startseite (oeffentliche Landingpage, views/startseite.ejs) -- bewusst
   getrennt von style.css, da die Seite ohne App-Layout auskommt. Inter wird
   lokal aus /fonts geladen (keine externen Ressourcen). */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/inter-500.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/inter-600.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/inter-700.woff2") format("woff2")}

/* Layout: dunkle Kiosk-Bühne – Header mit Anmelden, Hero mit App-Mock, Ablauf, Zielgruppen, Injector-Teaser, Abschlussband, Footer */
:root{
  --bg:#070A23; --bg2:#0E1338; --panel:#121845; --line:rgba(255,255,255,.12);
  --text:#FFFFFF; --muted:#B7BCD6; --soft:#DADDEE;
  --red:#D5213A; --red2:#F0334D; --cloud:#29B6F6; --yellow:#F2D600;
  --app-bg:#f4f6fb; --app-ink:#1a2240; --app-sub:#5b6690;
  --font:"Segoe UI","Inter",Roboto,"Helvetica Neue",Arial,sans-serif;
  --radius:18px; --max:1180px;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
.red{color:var(--red2)} .blue{color:var(--cloud)}
h1,h2,h3{margin:0;text-wrap:balance;letter-spacing:-.01em}
p{margin:0}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.tag{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;background:var(--red);color:#fff;padding:.4em .85em;border-radius:6px}
.btn{display:inline-flex;align-items:center;gap:.55em;font:inherit;font-weight:700;text-decoration:none;border:0;cursor:pointer;border-radius:999px;padding:.8em 1.5em;transition:transform .15s ease, background .15s ease}
.btn svg{width:1.1em;height:1.1em}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 8px 24px rgba(213,33,58,.35)}
.btn-primary:hover{background:var(--red2);transform:translateY(-1px)}
.btn-ghost{background:rgba(255,255,255,.07);color:#fff;border:1px solid var(--line)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn:focus-visible{outline:3px solid var(--cloud);outline-offset:3px}
.flowline{height:3px;border-radius:2px;background:linear-gradient(90deg,var(--red2),var(--cloud))}

/* Header */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top, 0px);z-index:10;background:var(--bg)}
.top{position:sticky;top:env(safe-area-inset-top, 0px);z-index:5;background:linear-gradient(180deg,rgba(7,10,35,.97),rgba(7,10,35,.86));backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.brand{display:flex;align-items:center;gap:.6em;text-decoration:none}
.brand svg{width:34px;height:34px;color:var(--cloud);flex:none}
.brand b{font-size:1.45rem;font-weight:800;line-height:1}
.brand small{display:block;font-size:.72rem;color:var(--muted);font-weight:600;letter-spacing:.02em}
.top .btn{padding:.6em 1.25em}

/* Hero */
.hero{position:relative;overflow:hidden;background:radial-gradient(ellipse 50% 70% at 82% 40%,rgba(41,182,246,.18),transparent 70%),radial-gradient(ellipse 45% 60% at 0% 100%,rgba(213,33,58,.16),transparent 70%)}
.hero .wrap:not(.hero-line){display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:center;padding-block:72px 64px}
.hero .eyebrow{color:var(--cloud)}
.hero-line{padding-bottom:1px}
.hero h1{font-size:clamp(2.3rem,5vw,3.7rem);font-weight:800;line-height:1.04;margin:.35em 0 .35em}
.hero .lead{font-size:1.12rem;color:var(--soft);max-width:34em}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero .note{margin-top:18px;font-size:.88rem;color:var(--muted)}
.hero .vis{display:flex;justify-content:center;font-size:clamp(11px,1.45vw,16px)}

/* App-Mock (wie im Kiosk) */
.cloudui{width:30em;max-width:100%;border-radius:1em;overflow:hidden;background:var(--app-bg);color:var(--app-ink);box-shadow:0 1.6em 3.5em rgba(0,0,0,.55);text-align:left}
.cloudui .cbar{display:flex;align-items:center;gap:.6em;padding:.8em 1.1em;background:linear-gradient(90deg,#0f5fa8,#29B6F6);color:#fff;font-weight:800}
.cloudui .cbar svg{width:1.5em;height:1.5em;fill:none;stroke:#fff;stroke-width:2}
.cloudui .cbar small{margin-left:auto;font-weight:600;opacity:.85;font-size:.75em}
.cloudui .cbody{padding:1em 1.1em;display:grid;gap:.6em}
.cloudui .site{display:flex;align-items:center;gap:.7em;font-weight:800;font-size:1.02em}
.cloudui .site .qrm{width:2.2em;height:2.2em;border-radius:.3em;background:conic-gradient(from 90deg at 30% 30%,#1a2240 25%,transparent 0) 0 0/0.73em 0.73em,#fff;border:.15em solid #1a2240;flex:none}
.cloudui .site small{display:block;font-weight:500;color:var(--app-sub);font-size:.72em}
.cloudui .ent{display:grid;grid-template-columns:auto 1fr auto;gap:.7em;align-items:center;background:#fff;border-radius:.6em;padding:.6em .8em;box-shadow:0 .1em .4em rgba(20,40,90,.08)}
.cloudui .ent .dot{width:1.9em;height:1.9em;border-radius:50%;display:grid;place-items:center;background:#e3f8ec;color:#1a9b57;font-weight:900;font-size:.85em}
.cloudui .ent.auto .dot{background:#e1f3fd;color:#0f7fc7}
.cloudui .ent b{font-size:.85em;display:block}
.cloudui .ent small{font-size:.7em;color:#6a7497}
.cloudui .pdf{font-size:.66em;font-weight:800;color:#fff;background:var(--red);padding:.3em .5em;border-radius:.3em}
.cloudui .chipauto{display:inline-block;font-size:.8em;font-weight:800;color:#0f7fc7;background:#e1f3fd;padding:.05em .45em;border-radius:.3em;margin-left:.3em}

/* Sektionen */
section{padding-block:72px}
.sec-head{display:grid;gap:10px;margin-bottom:36px;max-width:44em}
.sec-head h2{font-size:clamp(1.7rem,3.2vw,2.4rem);font-weight:800;line-height:1.1}
.sec-head p{color:var(--muted);font-size:1.05rem}

/* Ablauf */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;position:relative}
.step{padding:22px 22px 24px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.step b{display:flex;align-items:center;gap:.6em;font-size:1.2rem}
.step b i{display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:50%;background:var(--red);font-style:normal;font-size:.75em;flex:none}
.step p{color:var(--muted);margin-top:.5em;font-size:.97rem}

/* Zielgruppen */
.groups{background:linear-gradient(180deg,transparent,rgba(14,19,56,.55) 30%,transparent)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card{position:relative;border-radius:var(--radius);border:1px solid var(--line);background:radial-gradient(ellipse at 50% 20%,rgba(255,255,255,.06),transparent 65%),var(--bg2);padding:26px 24px 24px;overflow:hidden;min-width:0}
.card::before{content:"";position:absolute;left:0;top:0;right:0;height:5px;background:var(--c)}
.card h3{font-size:1.3rem;font-weight:800}
.card .sub{color:var(--muted);font-size:.92rem;margin:.3em 0 1.1em}
.card ul{list-style:none;margin:0;padding:0;display:grid;gap:.6em;color:var(--soft);font-size:.97rem}
.card li{position:relative;padding-left:1.45em;line-height:1.4}
.card li::before{content:"";position:absolute;left:0;top:.42em;width:.7em;height:.7em;border-radius:50%;background:var(--c)}
.card li b{color:#fff}

/* Funktionen */
.feats{display:flex;flex-wrap:wrap;gap:10px}
.feats span{font-size:.95rem;font-weight:700;padding:.55em 1.05em;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.06)}

/* Injector-Teaser */
.inj-band{border-radius:24px;border:1px solid var(--line);background:radial-gradient(ellipse 50% 80% at 85% 50%,rgba(255,255,255,.09),transparent 70%),var(--bg2);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px;align-items:center;padding:40px 44px;overflow:hidden}
.inj-band .eyebrow{color:var(--yellow)}
.inj-band h2{font-size:clamp(1.7rem,3vw,2.3rem);font-weight:800;margin:.3em 0 .4em}
.inj-band p{color:var(--soft)}
.avail{display:inline-flex;align-items:center;gap:.55em;margin-top:18px;font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.5em .95em;border-radius:999px;border:1.5px solid var(--cloud);background:rgba(41,182,246,.12)}
.avail i{width:.6em;height:.6em;border-radius:50%;background:var(--cloud);box-shadow:0 0 .6em var(--cloud)}
.inj-band .vis{display:flex;justify-content:center;font-size:clamp(9px,1.05vw,12.5px)}
.inj{position:relative;width:17.6em;padding-top:3em}
.inj .pipes{position:absolute;top:0;left:3.2em;right:3.2em;height:3.4em;border:.9em solid #b9bec9;border-bottom:0;border-radius:1.6em 1.6em 0 0}
.inj .valve{position:absolute;top:-.6em;left:50%;transform:translateX(-50%);width:3.6em;height:2em;border-radius:.4em;background:linear-gradient(#e7e9ee,#9aa0ad)}
.inj .box{position:relative;height:19em;border-radius:.9em;background:linear-gradient(115deg,#f3f4f7 0%,#c9cdd6 30%,#eef0f4 52%,#aeb3bf 100%);box-shadow:0 1.4em 3em rgba(0,0,0,.55),inset 0 0 0 .2em rgba(255,255,255,.5);padding:1.6em 1.5em}
.inj .screen2{height:10.5em;border-radius:.5em;background:#0b1030;border:.35em solid #222735;padding:.8em .9em;color:#fff;display:flex;flex-direction:column;gap:.5em}
.inj .srow{display:flex;justify-content:space-between;align-items:center;font-size:.72em;color:#9fb0d8;font-weight:600;white-space:nowrap}
.inj .stat{display:flex;align-items:center;gap:.9em}
.inj .ring{width:4.6em;height:4.6em;border-radius:50%;background:conic-gradient(#3DDC84 0 65%,rgba(255,255,255,.12) 0);display:grid;place-items:center;flex:none}
.inj .ring span{width:3.7em;height:3.7em;border-radius:50%;background:#0b1030;display:grid;place-items:center;font-weight:800;font-size:.95em}
.inj .stat b{display:block;font-size:.92em;white-space:nowrap}
.inj .stat small{color:#9fb0d8;font-size:.64em;white-space:nowrap}
.inj .steps2{display:flex;gap:.35em;font-size:.62em;font-weight:700}
.inj .steps2 span{flex:1;text-align:center;padding:.35em 0;border-radius:.4em;background:rgba(255,255,255,.08);color:#9fb0d8;white-space:nowrap}
.inj .steps2 .ok{background:rgba(61,220,132,.2);color:#7ff0ae}
.inj .steps2 .act{background:#3DDC84;color:#062b16}
.inj .led{margin:1.1em auto 0;width:80%;height:.55em;border-radius:1em;background:#3DDC84;box-shadow:0 0 1.4em #3DDC84;animation:led 2.4s ease-in-out infinite}
@keyframes led{50%{opacity:.5;box-shadow:0 0 .5em #3DDC84}}
.inj .logo2{margin-top:1.2em;display:flex;justify-content:space-between;align-items:center;font-weight:800;color:#1b2a6b;font-size:.95em}
.inj .logo2 em{font-style:normal;color:var(--red)}
.inj .logo2 .ap{background:var(--red);color:#fff;padding:.15em .5em;border-radius:.35em;font-size:.9em}
.inj .hoses{display:flex;justify-content:center;gap:3em}
.inj .hoses i{width:1.1em;height:3.5em;background:linear-gradient(90deg,#9cc6e6,#dff0fb,#9cc6e6);border-radius:0 0 .5em .5em;opacity:.9}
.inj .hoses i:nth-child(2){background:#2a2d36;width:1.6em;height:2.8em}

/* Abschluss */
.cta{border-radius:24px;padding:40px 44px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;position:relative;overflow:hidden;
  background:linear-gradient(120deg,rgba(213,33,58,.96),rgba(120,16,45,.93) 55%,rgba(20,60,120,.95))}
.cta::after{content:"";position:absolute;right:-10%;top:-70%;width:45%;height:240%;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 60%);pointer-events:none}
.cta h2{font-size:clamp(1.5rem,2.8vw,2.1rem);font-weight:800}
.cta p{opacity:.92;margin-top:.4em}
.cta .btn{background:#fff;color:var(--red);box-shadow:none;position:relative;z-index:1}
.cta .btn:hover{background:#f3f4f8}

/* Footer */
footer{border-top:1px solid var(--line);margin-top:72px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;padding-block:28px 36px;color:var(--muted);font-size:.9rem}
footer img{height:38px;width:auto;display:block}
footer nav{display:flex;flex-wrap:wrap;gap:6px 22px}
footer nav a{text-decoration:none}
footer nav a:hover{color:#fff;text-decoration:underline}


@media (max-width:900px){
  .hero .wrap:not(.hero-line),.inj-band{grid-template-columns:1fr}
  .hero .wrap:not(.hero-line){padding-block:48px 40px;gap:36px}
  .hero .vis{font-size:clamp(9px,2.6vw,14px)}
  .cards,.steps{grid-template-columns:1fr}
  .inj-band,.cta{padding:28px 22px}
  .inj-band .vis{order:-1;font-size:11px}
  .cta{grid-template-columns:1fr}
  section{padding-block:52px}
}
@media (max-width:480px){
  .brand small{display:none}
  .brand b{font-size:1.25rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}