/* ============================================================================
   Oeffentliche WH-Control-Landingpage
   Eigenstaendige Klassennamen verhindern Wechselwirkungen mit dem Admin-Portal.
   ============================================================================ */

.customer-portal-page { background:#f5f7fa; color:#0f172a; }

.customer-portal-hero {
    padding:clamp(80px,10vw,140px) 0;
    overflow:hidden;
    color:#fff;
    background:
        radial-gradient(circle at 82% 20%,rgba(36,99,154,.38),transparent 34%),
        radial-gradient(circle at 12% 92%,rgba(212,175,55,.14),transparent 27%),
        linear-gradient(135deg,#07111f 0%,#0b2036 55%,#0f2d4a 100%);
}

.customer-portal-hero::before {
    content:"";
    position:absolute;
    inset:0;
    opacity:.16;
    background-image:linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px);
    background-size:56px 56px;
    mask-image:linear-gradient(90deg,#000,transparent 75%);
}

.customer-portal-hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr); align-items:center; gap:clamp(48px,7vw,100px); }
.customer-portal-kicker { display:inline-flex; align-items:center; gap:9px; padding:8px 14px; border:1px solid rgba(212,175,55,.42); border-radius:999px; color:#f2cc54; background:rgba(212,175,55,.09); font-size:.78rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.customer-portal-hero h1 { max-width:760px; margin:24px 0; color:#fff; font-size:clamp(3rem,7vw,6.4rem); font-weight:800; line-height:.96; letter-spacing:-.055em; }
.customer-portal-hero h1 span { color:#e2b92e; }
.customer-portal-lead { max-width:720px; margin:0; color:#c8d3df; font-size:clamp(1.05rem,1.5vw,1.25rem); line-height:1.8; }
.customer-portal-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.customer-portal-actions .btn-primary-custom,.customer-portal-actions .btn-outline-custom { text-decoration:none; }
.customer-portal-trust { display:flex; flex-wrap:wrap; gap:12px 24px; margin-top:34px; color:#dbe5ee; font-size:.9rem; }
.customer-portal-trust li { display:flex; align-items:center; gap:8px; }
.customer-portal-trust i { display:grid; place-items:center; width:21px; height:21px; border-radius:50%; color:#06271a; background:#4ade80; font-size:.68rem; }

/* Bewusst vereinfachtes Portal-Mockup: Es zeigt den Nutzen, ohne reale Kundendaten
   oder Screenshots aus dem geschuetzten Bereich zu veroeffentlichen. */
.customer-portal-preview { position:relative; padding:18px; border:1px solid rgba(255,255,255,.17); border-radius:28px; background:rgba(255,255,255,.09); box-shadow:0 35px 90px rgba(0,0,0,.34); backdrop-filter:blur(18px); transform:perspective(1200px) rotateY(-5deg) rotateX(2deg); }
.customer-portal-preview::after { content:""; position:absolute; inset:15% -18% -20% 25%; z-index:-1; background:rgba(36,99,154,.22); filter:blur(60px); }
.portal-preview-toolbar { display:flex; align-items:center; justify-content:space-between; padding:4px 4px 17px; color:#fff; font-weight:800; }
.portal-preview-toolbar>span:first-child { display:flex; align-items:center; gap:9px; }
.portal-preview-live { display:inline-flex; align-items:center; gap:7px; padding:6px 10px; border-radius:999px; color:#b9f8cb; background:rgba(34,197,94,.15); font-size:.76rem; text-transform:uppercase; }
.portal-preview-live i { width:8px; height:8px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 0 rgba(74,222,128,.65); animation:portal-live-ring 2s infinite; }
.portal-preview-summary { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.portal-preview-summary>div { padding:16px; border:1px solid rgba(255,255,255,.11); border-radius:15px; background:rgba(4,16,28,.36); }
.portal-preview-summary span,.portal-preview-summary strong { display:block; }
.portal-preview-summary span { color:#9eb0c2; font-size:.75rem; }
.portal-preview-summary strong { margin-top:4px; color:#fff; font-size:1.35rem; }
.portal-preview-list { display:grid; gap:9px; }
.portal-preview-list article { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:14px; border:1px solid rgba(255,255,255,.1); border-radius:14px; background:rgba(255,255,255,.94); color:#0f172a; }
.portal-preview-list article.is-green { box-shadow:inset 4px 0 #22c55e; }
.portal-preview-list article.is-yellow { box-shadow:inset 4px 0 #eab308; }
.portal-preview-light { width:13px; height:13px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 5px rgba(34,197,94,.12); }
.portal-preview-list .is-yellow .portal-preview-light { background:#eab308; box-shadow:0 0 0 5px rgba(234,179,8,.13); }
.portal-preview-list strong,.portal-preview-list small { display:block; }
.portal-preview-list strong { font-size:.88rem; }
.portal-preview-list small,.portal-preview-list time { color:#64748b; font-size:.72rem; }
.portal-preview-message { display:flex; align-items:center; gap:12px; margin-top:12px; padding:13px 15px; border-radius:14px; color:#dbeafe; background:#071b2f; }
.portal-preview-message>i { color:#e2b92e; font-size:1.3rem; }
.portal-preview-message strong,.portal-preview-message span { display:block; }
.portal-preview-message strong { font-size:.82rem; }
.portal-preview-message span { color:#91a5b8; font-size:.72rem; }

.customer-portal-benefits { padding:clamp(80px,9vw,125px) 0; }
.customer-portal-section-heading { max-width:780px; margin:0 auto 52px; text-align:center; }
.customer-portal-section-heading h2 { margin:12px 0 16px; color:#0f172a; font-size:clamp(2.2rem,5vw,4rem); font-weight:800; line-height:1.08; letter-spacing:-.035em; }
.customer-portal-section-heading p { margin:0; color:#64748b; font-size:1.1rem; }
.customer-portal-benefit-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.customer-portal-benefit-grid article { padding:30px; border:1px solid #dce4ec; border-radius:22px; background:#fff; box-shadow:0 14px 38px rgba(15,23,42,.06); transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease; }
.customer-portal-benefit-grid article:hover { transform:translateY(-7px); border-color:rgba(212,175,55,.62); box-shadow:0 22px 48px rgba(15,23,42,.11); }
.portal-feature-icon { display:grid; place-items:center; width:52px; height:52px; margin-bottom:22px; border-radius:15px; color:#ad8300; background:#fff7d6; font-size:1.25rem; }
.customer-portal-benefit-grid h3 { margin:0 0 10px; color:#0f172a; font-size:1.18rem; font-weight:800; }
.customer-portal-benefit-grid p { margin:0; color:#64748b; line-height:1.75; }

.customer-portal-technology { padding:clamp(90px,10vw,140px) 0; overflow:hidden; color:#fff; background:#07111f; }
.customer-portal-technology::before { content:""; position:absolute; inset:0; opacity:.22; background:radial-gradient(circle at 50% 40%,#174b73,transparent 47%); }
.customer-portal-technology .container { position:relative; z-index:1; }
.customer-portal-section-heading.is-light h2 { color:#fff; }
.customer-portal-section-heading.is-light p { color:#9fb0c1; }
.portal-technology-flow { position:relative; margin-top:62px; }
.portal-technology-flow::before { content:""; position:absolute; top:62px; left:7%; right:7%; height:2px; background:linear-gradient(90deg,rgba(212,175,55,.2),#d4af37 45%,rgba(58,137,201,.7)); }
.portal-technology-flow ol { position:relative; z-index:1; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; }
.portal-technology-flow li { min-width:0; text-align:center; }
.portal-flow-number { display:block; margin-bottom:8px; color:#77899b; font-size:.67rem; font-weight:800; letter-spacing:.15em; }
.portal-flow-icon { position:relative; display:grid; place-items:center; width:74px; height:74px; margin:0 auto 19px; border:1px solid rgba(212,175,55,.45); border-radius:21px; color:#f1c94a; background:#0c2136; box-shadow:0 0 0 8px #07111f; font-size:1.55rem; animation:portal-node-glow 3s ease-in-out infinite; animation-delay:var(--flow-delay); }
.portal-flow-icon::after { content:""; position:absolute; inset:-1px; border:1px solid rgba(212,175,55,.35); border-radius:21px; animation:portal-node-ring 3s ease-out infinite; animation-delay:var(--flow-delay); }
.portal-technology-flow strong,.portal-technology-flow small { display:block; }
.portal-technology-flow strong { color:#fff; font-size:1rem; }
.portal-technology-flow small { max-width:165px; margin:7px auto 0; color:#8fa2b5; font-size:.75rem; line-height:1.5; }
.portal-flow-pulse { position:absolute; z-index:2; top:57px; left:7%; width:12px; height:12px; border-radius:50%; background:#fff4b5; box-shadow:0 0 10px #f4cc4f,0 0 28px #d4af37; animation:portal-data-travel 5.5s linear infinite; }
.portal-technology-note { display:flex; align-items:flex-start; justify-content:center; gap:10px; max-width:860px; margin:46px auto 0; padding:15px 18px; border:1px solid rgba(255,255,255,.1); border-radius:14px; color:#9fb0c1; background:rgba(255,255,255,.04); font-size:.88rem; text-align:center; }
.portal-technology-note i { margin-top:5px; color:#d4af37; }

/* Die HA-Erklärung bleibt als eigener, ruhiger Informationsblock unter dem
   Prozessfluss lesbar. Sie zeigt das Prinzip, ohne interne Betriebsdaten oder
   technische Zugangspunkte der drei Standorte öffentlich zu machen. */
.portal-ha-overview { max-width:1100px; margin:48px auto 0; padding:clamp(26px,4vw,44px); border:1px solid rgba(212,175,55,.24); border-radius:24px; background:linear-gradient(145deg,rgba(13,38,61,.92),rgba(8,24,40,.96)); box-shadow:0 24px 70px rgba(0,0,0,.22); }
.portal-ha-intro { max-width:820px; margin:0 auto 30px; text-align:center; }
.portal-ha-intro h3 { margin:12px 0 14px; color:#fff; font-size:clamp(1.65rem,3vw,2.35rem); font-weight:800; letter-spacing:-.025em; }
.portal-ha-intro p { margin:0; color:#aebdcb; line-height:1.75; }
.portal-ha-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.portal-ha-grid article { display:flex; align-items:flex-start; gap:18px; min-width:0; padding:24px; border:1px solid rgba(255,255,255,.1); border-radius:18px; background:rgba(255,255,255,.045); }
.portal-ha-icon { display:grid; flex:0 0 48px; place-items:center; width:48px; height:48px; border-radius:14px; color:#f2cc54; background:rgba(212,175,55,.12); font-size:1.15rem; }
.portal-ha-grid strong { display:block; margin:1px 0 8px; color:#fff; font-size:1.02rem; }
.portal-ha-grid p { margin:0; color:#9fb0c1; font-size:.88rem; line-height:1.7; }
.portal-ha-safety { display:flex; align-items:flex-start; justify-content:center; gap:10px; margin:22px 0 0; padding-top:22px; border-top:1px solid rgba(255,255,255,.09); color:#c7d3de; font-size:.88rem; line-height:1.65; text-align:center; }
.portal-ha-safety i { margin-top:5px; color:#4ade80; }

.customer-portal-steps { padding:75px 0; background:#fff; }
.customer-portal-steps-grid { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:40px; }
.customer-portal-steps h2 { margin:10px 0 12px; color:#0f172a; font-size:clamp(2rem,4vw,3.2rem); font-weight:800; letter-spacing:-.03em; }
.customer-portal-steps p { max-width:760px; margin:0; color:#64748b; font-size:1.05rem; }
.customer-portal-steps .btn-primary-custom { color:#fff; text-decoration:none; }
.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; }
.login-portal-back:hover { color:#0f172a; }

@keyframes portal-live-ring { 0%{box-shadow:0 0 0 0 rgba(74,222,128,.65)}70%{box-shadow:0 0 0 9px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)} }
@keyframes portal-node-glow { 0%,100%{border-color:rgba(212,175,55,.3);box-shadow:0 0 0 8px #07111f}50%{border-color:#d4af37;box-shadow:0 0 0 8px #07111f,0 0 28px rgba(212,175,55,.22)} }
@keyframes portal-node-ring { 0%,45%{opacity:0;transform:scale(1)}65%{opacity:.6}100%{opacity:0;transform:scale(1.35)} }
@keyframes portal-data-travel { from{left:7%}to{left:92%} }

@media(max-width:1100px) {
    .customer-portal-hero-grid { grid-template-columns:1fr; }
    .customer-portal-preview { max-width:720px; transform:none; }
    .customer-portal-benefit-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .portal-technology-flow { overflow-x:auto; padding-bottom:18px; }
    .portal-technology-flow ol { min-width:980px; }
    .portal-technology-flow::before { min-width:840px; }
    .portal-flow-pulse { animation:none; }
}

@media(max-width:700px) {
    .customer-portal-hero { padding:72px 0; }
    .customer-portal-hero h1 { font-size:clamp(2.7rem,15vw,4.5rem); }
    .customer-portal-actions { align-items:stretch; flex-direction:column; }
    .customer-portal-actions a { width:100%; white-space:normal; text-align:center; }
    .customer-portal-trust { align-items:flex-start; flex-direction:column; }
    .customer-portal-preview { padding:12px; border-radius:20px; }
    .portal-preview-list article { grid-template-columns:auto 1fr; }
    .portal-preview-list time { display:none; }
    .customer-portal-benefit-grid { grid-template-columns:1fr; }
    .portal-ha-grid { grid-template-columns:1fr; }
    .portal-ha-grid article { padding:20px; }
    .customer-portal-steps-grid { grid-template-columns:1fr; }
    .customer-portal-steps .btn-primary-custom { width:100%; white-space:normal; text-align:center; }
}

@media(prefers-reduced-motion:reduce) {
    .portal-preview-live i,.portal-flow-icon,.portal-flow-icon::after,.portal-flow-pulse { animation:none; }
    .customer-portal-benefit-grid article:hover { transform:none; }
}