:root{--bg:#090b0c;--surface:#111415;--raised:#171a1b;--interactive:#1d2021;--line:#2b2f30;--text:#f5f3ee;--muted:#8d9390;--accent:#f47a2a;--accent-rgb:244,122,42;--success:#65d59b;--warning:#ffb340;--danger:#f25587;--offline:#747a78}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.4}
button,a{font:inherit}
button{color:inherit}
svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.topbar{height:76px;max-width:1500px;margin:auto;padding:0 28px;display:flex;align-items:center;gap:34px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:18px;color:var(--text);text-decoration:none}
.brand img{width:142px;filter:invert(1) brightness(1.45)}
.brand span{padding-left:18px;border-left:1px solid #383c3d;font-size:.7rem;letter-spacing:.18em}
.brand b{color:var(--accent)}
.topbar nav{display:flex;gap:26px}
.topbar nav a{color:var(--muted);text-decoration:none;font-size:.72rem}
.topbar nav a:hover{color:var(--text)}
.version{margin-left:auto;color:#6e7471;font-size:.6rem;letter-spacing:.1em}
main{max-width:1500px;margin:auto;padding:0 28px}
.hero{min-height:560px;display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center;border-bottom:1px solid var(--line);background:radial-gradient(circle at 78% 48%,rgba(var(--accent-rgb),.15),transparent 29%)}
.eyebrow{color:var(--accent);font-size:.68rem;letter-spacing:.18em}
.hero h1{font-size:clamp(3.2rem,6vw,6.8rem);line-height:.93;letter-spacing:-.055em;font-weight:450;margin:24px 0}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero-copy>p{max-width:720px;color:#a6aba8;font-size:1.1rem}
.principles{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.principles span{padding:10px 14px;border:1px solid var(--line);border-radius:999px;color:#a9aeab;font-size:.68rem}
.system-mark{text-align:center;justify-self:center}
.orbit{width:250px;height:250px;border:1px solid rgba(var(--accent-rgb),.55);border-radius:50%;display:grid;place-items:center;box-shadow:0 0 0 22px rgba(var(--accent-rgb),.04),0 0 0 52px rgba(var(--accent-rgb),.025),inset 0 0 70px rgba(var(--accent-rgb),.1)}
.orbit img{width:130px;filter:invert(1) brightness(1.4)}
.system-mark strong{display:block;letter-spacing:.24em;margin-top:34px;font-size:1.1rem}
.system-mark>span{color:var(--muted);font-size:.58rem;letter-spacing:.16em}
.section{padding:80px 0}
.section-head{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:end;margin-bottom:28px}
.section-head>div{display:flex;align-items:baseline;gap:16px}
.section-head span{color:var(--accent);font-size:.72rem}
.section-head h2{font-size:2.6rem;font-weight:450;letter-spacing:-.04em;margin:0}
.section-head p{color:var(--muted);margin:0;max-width:620px}
.module-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}
.module{min-height:165px;background:var(--surface);border:1px solid var(--line);border-radius:18px;text-align:left;padding:18px;display:flex;flex-direction:column;cursor:pointer;transition:.25s}
.module:hover,.module.active{transform:translateY(-4px);border-color:var(--module-color,var(--accent));box-shadow:0 18px 45px #0008,0 0 30px color-mix(in srgb,var(--module-color,var(--accent)) 15%,transparent)}
.module svg{width:34px;height:34px;color:var(--module-color,var(--accent));margin-bottom:auto}
.module span{font-size:.55rem;letter-spacing:.13em;color:#7f8582}
.module strong{font-size:.82rem;margin-top:4px}
.module i{font-size:.56rem;font-style:normal;color:var(--module-color,var(--accent));margin-top:8px}
.module[data-theme=brand]{--module-color:#f47a2a}
.module[data-theme=energy]{--module-color:#ffb340}
.module[data-theme=climate]{--module-color:#ff6259}
.module[data-theme=water]{--module-color:#35b9d6}
.module[data-theme=mobility]{--module-color:#a87cff}
.module[data-theme=light]{--module-color:#ffd84a}
.module[data-theme=security]{--module-color:#f25587}
.module[data-theme=intelligence]{--module-color:#65d5b0}
.showcase{display:grid;grid-template-columns:430px 1fr;gap:70px;padding:30px 0 90px;align-items:center}
.phone-shell{width:390px;min-height:820px;justify-self:center;border:1px solid #3a3f40;border-radius:48px;background:#080a0b;box-shadow:0 30px 100px #000,0 0 60px rgba(var(--accent-rgb),.08);overflow:hidden;padding:13px;position:relative}
.phone-top{height:34px;display:flex;justify-content:space-between;align-items:center;padding:0 18px;font-size:.66rem}
.phone-top i{width:72px;height:19px;border-radius:14px;background:#000;position:absolute;top:9px;left:50%;transform:translateX(-50%)}
.app-head{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;padding:10px 6px 18px}
.app-head button{width:44px;height:44px;border:0;border-radius:13px;background:var(--surface);display:grid;place-items:center}
.app-head div{padding-left:12px}
.app-head small{display:block;color:var(--accent);font-size:.52rem;letter-spacing:.13em}
.app-head strong{display:block;font-size:1.2rem}
.app-content{padding:0 5px 86px}
.state-card{min-height:142px;border:1px solid rgba(var(--accent-rgb),.35);border-radius:24px;background:linear-gradient(145deg,rgba(var(--accent-rgb),.14),#131617);padding:20px;display:flex;justify-content:space-between}
.state-card>svg{width:54px;height:54px;color:var(--success)}
.state-card small{color:#989e9b;font-size:.5rem;letter-spacing:.14em}
.state-card h3{font-size:1.2rem;margin:8px 0 3px}
.state-card p{font-size:.66rem;color:#8f9592;margin:0}
.state-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--success);margin-right:7px}
.app-label{display:flex;justify-content:space-between;margin:24px 4px 12px;font-size:.72rem}
.app-label button{border:0;background:none;color:var(--accent);font-size:.62rem}
.app-modules{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.app-card{min-height:145px;border:1px solid #25292a;border-radius:20px;background:var(--surface);padding:16px;position:relative;overflow:hidden}
.app-card:after{content:"";position:absolute;width:70px;height:70px;border-radius:50%;right:-20px;top:-20px;background:currentColor;opacity:.05}
.app-card svg{display:block;color:currentColor;margin-bottom:16px}
.app-card small{display:block;color:#808683;font-size:.5rem;letter-spacing:.12em}
.app-card strong{display:block;color:var(--text);font-size:1.45rem;font-weight:550;margin:3px 0}
.app-card span{display:block;color:#969c99;font-size:.62rem}
.app-card>i{position:absolute;top:16px;right:16px;font-style:normal;font-size:.55rem;padding:4px 7px;border-radius:9px;background:color-mix(in srgb,currentColor 12%,transparent)}
.app-card.energy{color:#ffb340}
.app-card.climate{color:#ff6259}
.app-card.mobility{color:#a87cff}
.app-card.water{color:#35b9d6}
.app-card.light{color:#ffd84a}
.app-card.wide{grid-column:1/-1;min-height:118px;display:flex;justify-content:space-between;align-items:center}
.app-card.wide svg{margin-bottom:7px}
.mini-ring{width:68px;height:68px;border-radius:50%;background:conic-gradient(currentColor 68%,#2d2831 0);display:grid;place-items:center;position:relative}
.mini-ring:after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--surface)}
.mini-ring b{z-index:1;color:var(--text);font-size:.8rem}
.app-nav{position:absolute;left:18px;right:18px;bottom:18px;height:67px;border:1px solid #272b2c;border-radius:24px;background:#0d0f10eF;backdrop-filter:blur(18px);display:grid;grid-template-columns:repeat(4,1fr);box-shadow:0 14px 40px #000}
.app-nav button{border:0;background:none;color:#666c69;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.app-nav button.active{color:var(--accent)}
.app-nav svg{width:20px;height:20px}
.app-nav span{font-size:.48rem}
.component-board{min-width:0}
.section-head.compact{grid-template-columns:1fr;align-items:start}
.rules{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rules article,.kpi,.device{border:1px solid var(--line);border-radius:18px;background:var(--surface);padding:20px}
.rules b{display:block;color:var(--accent);font-size:.6rem;margin-bottom:22px}
.rules strong{font-size:1rem}
.rules p{color:var(--muted);font-size:.72rem;margin:6px 0 0}
.component-row{display:grid;grid-template-columns:1fr 1.5fr;gap:10px;margin-top:10px}
.kpi small,.device small{font-size:.55rem;color:#858b88;letter-spacing:.11em}
.kpi strong{display:block;font-size:2.4rem;font-weight:500;margin:12px 0}
.kpi strong i{font-size:.9rem;color:#9ba09e;font-style:normal}
.kpi span{color:var(--success);font-size:.7rem}
.device{display:flex;align-items:center;gap:16px}
.device-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:16px;background:rgba(var(--accent-rgb),.1);color:var(--accent)}
.device strong,.device span{display:block}
.device span{font-size:.65rem;color:var(--muted)}
.online{margin-left:auto;color:var(--success);font-size:.55rem}
.semantic{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.semantic div{border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;align-items:center;gap:8px;color:#969c99;font-size:.62rem}
.semantic i{width:8px;height:8px;border-radius:50%}
.success{background:var(--success)}
.warning{background:var(--warning)}
.danger{background:var(--danger)}
.offline{background:var(--offline)}
.icon-grid{display:grid;grid-template-columns:repeat(13,1fr);gap:9px}
.icon-item{min-height:112px;border:1px solid var(--line);border-radius:16px;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.icon-item:hover{border-color:var(--accent);background:rgba(var(--accent-rgb),.06)}
.icon-item svg{width:30px;height:30px;color:var(--accent)}
.icon-item span{font-size:.55rem;color:#8a908d}
.tokens{display:grid;grid-template-columns:1fr 1fr 1.35fr 1fr;border:1px solid var(--line);border-radius:20px;overflow:hidden;margin-bottom:70px}
.tokens>div{padding:24px;border-right:1px solid var(--line)}
.tokens>div:last-child{border:0}
.tokens span{display:block;color:var(--accent);font-size:.55rem;letter-spacing:.12em}
.tokens strong{display:block;font-size:1rem;margin:9px 0}
.tokens p{color:var(--muted);font-size:.65rem;margin:0}
footer{max-width:1500px;margin:auto;padding:24px 28px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:#6f7572;font-size:.58rem;letter-spacing:.11em}

/* Interaktionszustaende (Regel 9): Hover/Fokus + Ladezustand fuer Auswahlfelder, Eingaben, Buttons */
select,input,button{transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease}
select:hover,select:focus-visible,input:hover,input:focus-visible,button:hover,button:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.15)}
.is-loading{position:relative;color:transparent!important;pointer-events:none;background:var(--interactive)!important;border-color:var(--line)!important}
.is-loading::after{content:"";position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:moduray-spin .7s linear infinite}
@keyframes moduray-spin{to{transform:rotate(360deg)}}

/* Copy-Button fuer sensible/zu sichernde Felder (Regel 11) */
.copy-field{display:flex;align-items:center;gap:8px}
.copy-field>:first-child{flex:1;min-width:0}
.copy-button{flex:0 0 auto;width:36px;height:36px;padding:0;display:grid;place-items:center;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--muted)}
.copy-button .ui-icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.copy-button.is-copied{border-color:var(--success);color:var(--success)}
.copy-confirm{min-height:1.2em;font-size:11px;font-weight:800;color:var(--success)}

body[data-accent=energy]{--accent:#ffb340;--accent-rgb:255,179,64}
body[data-accent=climate]{--accent:#ff6259;--accent-rgb:255,98,89}
body[data-accent=water]{--accent:#35b9d6;--accent-rgb:53,185,214}
body[data-accent=mobility]{--accent:#a87cff;--accent-rgb:168,124,255}
body[data-accent=light]{--accent:#ffd84a;--accent-rgb:255,216,74}
body[data-accent=security]{--accent:#f25587;--accent-rgb:242,85,135}
body[data-accent=intelligence]{--accent:#65d5b0;--accent-rgb:101,213,176}

@media(max-width:1150px){.module-grid{grid-template-columns:repeat(4,1fr)}
.showcase{grid-template-columns:390px 1fr;gap:28px}
.icon-grid{grid-template-columns:repeat(7,1fr)}
}

@media(max-width:820px){.topbar nav,.version{display:none}
.hero{grid-template-columns:1fr;min-height:auto;padding:70px 0}
.system-mark{display:none}
.section-head{grid-template-columns:1fr}
.showcase{grid-template-columns:1fr}
.component-board{width:100%}
.icon-grid{grid-template-columns:repeat(4,1fr)}
.tokens{grid-template-columns:1fr 1fr}
.tokens>div{border-bottom:1px solid var(--line)}
.module-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:460px){main{padding:0 12px}
.topbar{padding:0 14px}
.brand img{width:116px}
.hero h1{font-size:3rem}
.phone-shell{width:100%;border-radius:35px}
.showcase{padding-top:0}
.rules,.component-row{grid-template-columns:1fr}
.semantic{grid-template-columns:1fr 1fr}
.icon-grid{grid-template-columns:repeat(3,1fr)}
.tokens{grid-template-columns:1fr}
.tokens>div{border-right:0}
.section{padding:60px 0}
.module{min-height:145px}
.section-head h2{font-size:2rem}
footer{padding:20px 14px;gap:10px;flex-direction:column}
}