/* WH-Control: eigenständige, responsive Produktgrafiken ohne externe Ressourcen.
   Demo und Architekturdiagramm sind Beispiele, keine Live-Betriebsanzeigen. */
.wc-landing { --wc-ink:#102335; --wc-muted:#536577; --wc-gold:#f2bf4a; --wc-dark:#091727; font-family:Inter,system-ui,sans-serif; }
.wc-landing * { box-sizing:border-box; }
.wc-landing section { scroll-margin-top:110px; }
.wc-landing .container { max-width:1280px; padding-inline:clamp(20px,4vw,48px); }
.wc-landing h1,.wc-landing h2,.wc-landing h3,.wc-landing p { text-transform:none; }
.wc-kicker { display:flex; align-items:center; gap:12px; font-size:.72rem; font-weight:750; letter-spacing:.13em; color:#805c08; }
.wc-brand-mark { display:grid; place-items:center; width:36px; height:36px; color:#132538; background:var(--wc-gold); font-size:.83rem; letter-spacing:-.06em; border-radius:9px; }
.wc-hero { position:relative; overflow:hidden; padding:clamp(60px,7vw,108px) 0; background:radial-gradient(ellipse at 90% 30%,#1c3c57 0,transparent 55%),var(--wc-dark); color:#fff; }
.wc-hero-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(28px,5vw,76px); }
.wc-hero .wc-kicker,.wc-dark .wc-kicker,.wc-closing .wc-kicker { color:#f2cf7a; }
.wc-intro h1 { margin:26px 0 24px; color:#fff; font-size:clamp(2.8rem,4.9vw,4.9rem); line-height:1.04; letter-spacing:-.055em; font-weight:780; }
.wc-intro h1 em { color:var(--wc-gold); font-style:normal; }
.wc-lead { max-width:560px; margin:0 0 30px; color:#bdccdb; font-size:1.08rem; line-height:1.8; }
.wc-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.wc-button { display:inline-flex; gap:18px; align-items:center; justify-content:center; min-height:48px; padding:13px 18px; border:1px solid transparent; border-radius:9px; font-weight:720; font-size:.88rem; text-decoration:none; transition:background .15s; }
.wc-primary,.wc-primary:visited { color:#132333; background:var(--wc-gold); }
.wc-primary:hover { color:#132333; background:#ffda78; text-decoration:none; }
.wc-secondary,.wc-secondary:visited { color:#e2ecf4; border-color:#5a7085; background:transparent; }
.wc-secondary:hover { color:#fff; background:#203c53; text-decoration:none; }
.wc-trust { display:flex; flex-wrap:wrap; gap:10px 20px; padding:0; margin:26px 0 0; list-style:none; color:#a9bdcd; font-size:.76rem; }
.wc-trust li::before { content:'✓'; color:var(--wc-gold); margin-right:7px; }
.wc-console { min-width:0; padding:20px; border:1px solid #4e657b; border-radius:20px; background:#112439; box-shadow:0 28px 70px #0005; }
.wc-console-bar { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; align-items:center; margin-bottom:20px; color:#f0f4f9; font-size:.88rem; }
.wc-console-icon { color:var(--wc-gold); margin-right:6px; }
.wc-demo-label { color:#c0d0dd; padding:5px 7px; background:#1e344a; border:1px solid #425b71; border-radius:5px; font-size:.6rem; letter-spacing:.1em; }
.wc-demo-tabs { display:flex; gap:4px; padding:4px; border-radius:9px; background:#081727; margin-bottom:20px; }
.wc-demo-tabs[hidden],.wc-demo-panel[hidden] { display:none; }
.wc-demo-tabs button { flex:1; min-height:40px; padding:7px 5px; border:0; background:transparent; color:#b7c7d6; font:inherit; font-size:.8rem; border-radius:6px; cursor:pointer; }
.wc-demo-tabs button[aria-selected=true] { background:#2b455f; color:#fff; font-weight:700; }
.wc-demo-tabs button span { margin-left:5px; padding:1px 5px; background:#f2bf4a; color:#132333; border-radius:4px; }
.wc-demo-panel { min-height:326px; margin:0; padding:0; }
.wc-demo-heading { color:#cad9e6; font-size:.82rem; font-weight:650; margin:0 0 16px; letter-spacing:0; }
.wc-metrics { display:grid; grid-template-columns:1fr 1fr 1fr; gap:9px; margin-bottom:14px; }
.wc-metrics>div { padding:13px 10px; border:1px solid #344e66; border-radius:10px; background:#0c1d2e; }
.wc-metrics small { display:block; font-size:.66rem; color:#aabed0; }
.wc-metrics strong { display:block; color:#fff; font-size:1.6rem; line-height:1.5; }
.wc-metrics strong span { font-size:.85rem; color:#9ab0c2; }
.wc-metrics .wc-gold { color:var(--wc-gold); }
.wc-plant { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; padding:13px 10px; margin-top:8px; border:1px solid #334b62; border-radius:9px; background:#172d43; }
.wc-plant strong { display:block; color:#fff; font-size:.8rem; }
.wc-plant small { display:block; color:#b2c4d4; font-size:.65rem; line-height:1.6; }
.wc-status { width:8px; height:8px; border-radius:50%; background:#9cb8d2; }
.wc-status.good { background:#75dfa8; }.wc-status.warning { background:#f2bf4a; }
.wc-pill { display:inline-block; width:fit-content; white-space:nowrap; padding:4px 6px; border-radius:5px; font-size:.6rem; font-weight:650; }
.wc-pill.good { background:#123e38; color:#9aebc1; }.wc-pill.warning { background:#4c3b1d; color:#ffdc8a; }.wc-pill.idle { background:#2d435a; color:#cadbe9; }
.wc-console-foot { display:flex; gap:8px; padding:15px 0 0; color:#acc0d1; font-size:.7rem; line-height:1.6; margin:0; }
.wc-demo-note { border-top:1px solid #334b62; padding-top:14px; margin:16px 0 0; color:#a6bbcd; font-size:.65rem; line-height:1.6; }
.wc-chart-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; color:#bdd0e0; font-size:.75rem; }
.wc-chart-heading strong { color:#fff; font-size:1.6rem; }.wc-chart-heading small { color:#afc3d3; font-size:.75rem; }
.wc-chart { display:block; width:100%; height:auto; margin:20px 0 12px; overflow:visible; }
.wc-chart text { fill:#b1c5d5; font-size:12px; font-family:inherit; }
.wc-grid-line { stroke:#31495e; stroke-width:1; fill:none; }.wc-limit-line { fill:none; stroke:#dba06a; stroke-width:1.5; stroke-dasharray:5 5; }.wc-trend-line { fill:none; stroke:#f2bf4a; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.wc-chart-key { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; color:#d5c395; font-size:.7rem; }
.wc-alert { padding:15px; background:#332e25; border:1px solid #756340; border-radius:10px; }
.wc-alert h3 { color:#ffe4a0; font-size:1.1rem; margin:12px 0 5px; }.wc-alert p { color:#d7c8aa; font-size:.75rem; margin:0; }
.wc-event-list { padding:0; margin:18px 0 0; list-style:none; }.wc-event-list li { display:grid; grid-template-columns:45px 1fr; gap:10px; padding:9px 0; border-bottom:1px solid #30475d; color:#c7d7e4; font-size:.75rem; }.wc-event-list time { color:#f2cf7a; }
.wc-section-nav { background:#fff; border-bottom:1px solid #dfe6ec; }.wc-section-nav .container { display:flex; gap:clamp(16px,4vw,40px); overflow-x:auto; padding-block:18px; }.wc-section-nav a { white-space:nowrap; color:#344d63; font-size:.82rem; font-weight:650; text-decoration:none; }.wc-section-nav a:hover { color:#805c00; text-decoration:underline; }
.wc-section { padding:clamp(60px,7vw,100px) 0; }.wc-light { background:#f4f7f9; color:var(--wc-ink); }.wc-dark { background:var(--wc-dark); color:#fff; }
.wc-section-heading { max-width:780px; margin-bottom:36px; }.wc-section-heading h2 { font-size:clamp(2rem,3.1vw,3.2rem); line-height:1.13; letter-spacing:-.035em; font-weight:760; color:var(--wc-ink); margin:16px 0 20px; }.wc-section-heading p { color:var(--wc-muted); font-size:1rem; line-height:1.8; margin:0 0 15px; }.wc-dark .wc-section-heading h2 { color:#fff; }.wc-dark .wc-section-heading p { color:#b5c8d7; }
.wc-features { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }.wc-feature { min-width:0; padding:28px; background:#fff; border:1px solid #dae3eb; border-radius:14px; }.wc-feature-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }.wc-feature-top i { display:grid; place-items:center; width:42px; height:42px; color:#233e57; background:#eef3f7; border-radius:10px; font-size:1.1rem; }.wc-feature-top span { color:#596f80; font-size:.7rem; letter-spacing:.1em; }.wc-feature h3 { margin:0 0 12px; font-size:1.13rem; font-weight:720; color:#172f44; }.wc-feature p { color:#536577; font-size:.9rem; line-height:1.8; margin:0; }
.wc-flow { display:grid; grid-template-columns:1fr 32px 1.25fr 32px 1.35fr; align-items:center; gap:16px; margin-top:40px; }.wc-flow-node { align-self:stretch; padding:26px; border:1px solid #3b5369; border-radius:14px; background:#102438; }.wc-flow-center { border-color:#9e8243; background:#1a2a37; }.wc-flow-symbol { display:grid; place-items:center; width:52px; height:52px; background:#203a50; color:#f2cf7a; border-radius:13px; margin-bottom:24px; font-size:1.3rem; }.wc-step { font-size:.65rem; font-weight:700; color:#a8bfce; letter-spacing:.12em; }.wc-flow h3 { color:#fff; font-size:1.2rem; margin:10px 0 14px; }.wc-flow-node p { color:#b5c8d7; font-size:.88rem; line-height:1.8; margin:0; }.wc-flow-arrow { font-size:1.6rem; color:#f2bf4a; text-align:center; }.wc-flow-destinations { display:grid; gap:14px; }.wc-flow-destinations>div { display:flex; align-items:center; gap:18px; padding:23px; border:1px solid #3b5369; border-radius:12px; background:#102438; }.wc-flow-destinations i { color:#f2cf7a; font-size:1.25rem; }.wc-flow-destinations strong,.wc-flow-destinations small { display:block; }.wc-flow-destinations strong { color:#fff; font-size:.95rem; }.wc-flow-destinations small { margin-top:7px; color:#b5c8d7; font-size:.78rem; line-height:1.6; }.wc-flow-caption { max-width:800px; margin:26px 0 0; color:#b5c8d7; font-size:.83rem; line-height:1.8; }
.wc-ha-layout { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:60px; }.wc-ha-layout .wc-section-heading { margin:0; }.wc-section-heading .wc-safety { padding-left:18px; border-left:3px solid #c39524; font-size:.86rem; }
.wc-ha-diagram { padding:28px; border:1px solid #d6e0e8; border-radius:16px; background:#fff; }.wc-witness { display:flex; align-items:center; gap:14px; padding:20px; background:#edf3f7; border:1px solid #cedce7; border-radius:12px; }.wc-witness i { color:#3a5972; font-size:1.3rem; }.wc-witness strong,.wc-witness span { display:block; }.wc-witness strong { color:#173249; font-size:.88rem; }.wc-witness span { color:#526a7d; font-size:.72rem; margin-top:5px; }.wc-ha-branches { display:grid; grid-template-columns:1fr 1fr; padding:18px 0; color:#526c80; text-align:center; font-size:.65rem; }.wc-ha-branches span::before { display:block; content:'↓'; color:#b7891d; font-size:1.3rem; line-height:1; margin-bottom:6px; }.wc-ha-nodes { display:grid; grid-template-columns:1fr 1fr; gap:15px; }.wc-ha-nodes article { background:#f7f9fb; padding:20px 16px; border:1px solid #d6e0e8; border-radius:12px; }.wc-ha-nodes i { color:#3a5972; font-size:1.5rem; }.wc-ha-nodes h3 { font-size:.85rem; color:#18344a; margin:14px 0 8px; }.wc-ha-nodes p { font-size:.73rem; color:#526a7d; line-height:1.7; margin:0; }.wc-replication { display:flex; align-items:center; gap:10px; margin-top:20px; padding:12px; background:#fff7e1; border:1px solid #e7d69f; border-radius:8px; color:#66521c; font-size:.72rem; }.wc-replication span { font-size:1.7rem; }.wc-diagram-note { margin:16px 0 0; color:#617586; font-size:.65rem; line-height:1.6; }
.wc-faq { background:#fff; }.wc-faq-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; }.wc-faq-list details { border-bottom:1px solid #dce5ec; padding:21px 0; }.wc-faq-list details:first-child { border-top:1px solid #dce5ec; }.wc-faq-list summary { color:#163249; font-size:.95rem; font-weight:700; cursor:pointer; padding-right:16px; }.wc-faq-list p { margin:16px 0 8px; color:#526779; font-size:.9rem; line-height:1.8; }.wc-faq-list a { color:#275f87; font-weight:650; font-size:.85rem; }
.wc-closing { padding:65px 0; background:#132c43; }.wc-closing .container { display:flex; align-items:center; justify-content:space-between; gap:35px; }.wc-closing h2 { color:#fff; font-size:clamp(1.7rem,3vw,2.6rem); line-height:1.2; letter-spacing:-.03em; margin:16px 0 0; }.wc-closing .wc-actions { max-width:340px; }
.wc-landing :is(a,button,summary,[tabindex]):focus-visible { outline:3px solid #d79c12; outline-offset:5px; }
/* Rücklink des bestehenden Loginformulars bleibt auch nach dem Seitenumbau erhalten. */
.login-portal-back { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:20px; color:#475569; font-size:.88rem; font-weight:700; text-align:center; }
@media(max-width:1050px) { .wc-hero-grid { gap:30px; }.wc-intro h1 { font-size:3.2rem; }.wc-features { grid-template-columns:repeat(2,minmax(0,1fr)); }.wc-ha-layout,.wc-faq-layout { gap:30px; }.wc-flow { grid-template-columns:1fr; gap:14px; }.wc-flow-node { display:block; }.wc-flow-arrow { transform:rotate(90deg); }.wc-flow-destinations { grid-template-columns:1fr 1fr; }.wc-flow-symbol { margin-bottom:16px; }.wc-closing .container { align-items:flex-start; flex-direction:column; }.wc-closing .wc-actions { max-width:none; } }
@media(max-width:800px) { .wc-hero-grid,.wc-ha-layout,.wc-faq-layout { grid-template-columns:1fr; }.wc-intro h1 { font-size:clamp(2.8rem,9vw,4rem); }.wc-console { width:100%; max-width:580px; margin:10px auto 0; }.wc-ha-diagram { max-width:620px; }.wc-section-nav .container { gap:23px; }.wc-demo-panel { min-height:326px; } }
@media(max-width:520px) { .wc-hero { padding:44px 0; }.wc-hero .wc-kicker { font-size:.6rem; letter-spacing:.08em; }.wc-console { padding:14px; border-radius:14px; }.wc-console-bar { font-size:.77rem; }.wc-features { grid-template-columns:1fr; }.wc-feature { padding:24px; }.wc-flow-destinations { grid-template-columns:1fr; }.wc-ha-diagram { padding:16px; }.wc-ha-nodes { gap:9px; }.wc-ha-nodes article { padding:16px 12px; }.wc-plant { grid-template-columns:auto minmax(0,1fr); }.wc-plant .wc-pill { grid-column:2; }.wc-demo-panel { min-height:390px; }.wc-actions { align-items:stretch; flex-direction:column; }.wc-button { width:100%; }.wc-trust { font-size:.7rem; gap:8px 14px; }.wc-closing .wc-actions { width:100%; } }
@media(prefers-reduced-motion:reduce) { .wc-landing * { transition:none!important; scroll-behavior:auto!important; } }