/*! Copyright (c) 2026 copuNET GmbH · https://copunet.de/
 * Eigene Entwicklung fuer copuNET GmbH. Weiterverwendung eigenstaendig lizenzierbarer Bestandteile nur mit schriftlicher Zustimmung; gesetzliche Rechte und geltende Drittlizenzen bleiben unberuehrt. */
/* Illustrative security scenarios: source, control and destination. */
.cp-security {
    --sec-flaeche:#141718;
    --sec-text:#f4f3ed;
    --sec-linie:#46514a;
    --sec-akzent:#ff6238;
    --sec-erfolg:#72cf94;
    --sec-in:0;
    --sec-out:0;
    background:var(--sec-flaeche);
    color:var(--sec-text);
    padding:28px;
    border:1px solid var(--sec-linie);
    border-radius:6px;
    box-shadow:0 12px 32px #00000014;
    position:relative;
    overflow:hidden
}
.sec-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:22px
}
.sec-head h3 {
    font:400 25px/1.2 Arial,sans-serif;
    color:var(--sec-text);
    margin:0
}
.sec-head>span {
    font-size:9px;
    letter-spacing:.14em;
    color:#a9b4ac
}
.sec-tabs {
    display:flex;
    flex-wrap:wrap;
    gap:8px
}
.cp-security button {
    font:inherit;
    font-size:13px;
    padding:10px 15px;
    color:var(--sec-text);
    background:transparent;
    border:1px solid var(--sec-linie);
    border-radius:6px;
    cursor:pointer
}
.cp-security button:hover,.cp-security button:focus,.cp-security button:active,.cp-security button[aria-pressed=true] {
    background:#202623;
    color:var(--sec-akzent);
    border-color:var(--sec-akzent)
}
.cp-security button:focus-visible {
    outline:2px solid var(--sec-akzent);
    outline-offset:3px
}
.sec-diagram {
    display:grid;
    grid-template-columns:1fr .6fr 1fr .6fr 1fr;
    align-items:center;
    padding:34px 20px 26px;
    position:relative;
    min-height:240px;
    background:linear-gradient(135deg,transparent 78%,#ffffff04 78.1%,transparent 78.3%),linear-gradient(135deg,transparent 81%,#ffffff04 81.1%,transparent 81.3%)
}
.sec-node {
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:12px;
    min-height:160px;
    justify-content:center
}
.sec-node svg {
    width:60px;
    height:60px;
    stroke:var(--sec-linie);
    fill:none;
    stroke-width:1.3;
    stroke-linejoin:round
}
.sec-node strong {
    font-size:14px;
    font-weight:400
}
.sec-node small {
    font-size:10px;
    color:#a9b4ac;
    min-height:16px
}
.sec-gate {
    border:1px solid var(--sec-linie);
    border-radius:6px;
    background:#202623;
    padding:16px 8px
}
.sec-gate svg {
    stroke:var(--sec-akzent);
    width:65px;
    height:65px
}
.sec-shield-mark {
    opacity:0
}
.sec-route {
    height:1px;
    background:var(--sec-linie);
    position:relative;
    align-self:center;
    margin-top:-34px
}
.sec-route:before {
    content:'';
    display:block;
    height:1px;
    width:calc(var(--sec-in)*100%);
    background:var(--sec-akzent)
}
.sec-route-out:before {
    width:calc(var(--sec-out)*100%);
    background:var(--sec-erfolg)
}
.sec-route i {
    position:absolute;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--sec-akzent);
    top:-3px;
    left:calc(var(--sec-in)*100%);
    box-shadow:0 0 0 5px #ff623812;
    transform:translateX(-50%)
}
.sec-route-out i {
    left:calc(var(--sec-out)*100%);
    background:var(--sec-erfolg);
    opacity:var(--sec-out);
    box-shadow:0 0 0 5px #72cf9412
}
.sec-decided .sec-gate {
    border-color:var(--sec-akzent)
}
.sec-decided:not(.sec-allowed) .sec-gate svg {
    stroke:var(--sec-akzent)
}
.sec-decided.sec-allowed .sec-gate {
    border-color:var(--sec-erfolg)
}
.sec-decided.sec-allowed .sec-gate svg,.sec-arrived .sec-target svg {
    stroke:var(--sec-erfolg)
}
.sec-decided.sec-allowed .sec-shield-mark {
    opacity:1
}
.sec-decided:not(.sec-allowed) .sec-route-in i {
    box-shadow:0 0 0 8px #ff623818
}
.sec-explanation {
    border-top:1px solid var(--sec-linie);
    padding:20px 0 16px;
    display:grid;
    grid-template-columns:1fr 1.6fr;
    gap:32px;
    min-height:110px
}
.sec-outcome {
    font-size:17px;
    color:var(--sec-akzent)
}
.sec-allowed.sec-decided .sec-outcome {
    color:var(--sec-erfolg)
}
.sec-explanation p {
    font-size:14px;
    line-height:1.65;
    color:#b7c0ba;
    margin:0
}
.sec-footer {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    border-top:1px solid var(--sec-linie);
    padding-top:18px
}
.sec-footer small {
    max-width:650px;
    font-size:10px;
    line-height:1.5;
    color:#a9b4ac
}
.sec-footer>div {
    display:flex;
    gap:8px;
    flex-shrink:0
}
.sec-footer button {
    font-size:11px;
    padding:7px 11px
}
@media(max-width:767px) {
    .cp-security {
        padding:18px
    }
    .sec-head {
        display:block
    }
    .sec-head h3 {
        font-size:21px
    }
    .sec-head>span {
        display:block;
        margin-top:12px
    }
    .sec-tabs button {
        flex:1 1 40%;
        font-size:11px;
        padding:9px
    }
    .sec-diagram {
        grid-template-columns:1fr 24px 1fr 24px 1fr;
        padding:24px 0 20px;
        min-height:200px
    }
    .sec-node {
        min-height:145px;
        gap:10px
    }
    .sec-node svg {
        width:40px;
        height:40px
    }
    .sec-gate svg {
        width:46px;
        height:46px
    }
    .sec-node strong {
        font-size:11px;
        overflow-wrap:anywhere
    }
    .sec-node small {
        font-size:9px
    }
    .sec-gate {
        padding:12px 4px
    }
    .sec-explanation {
        grid-template-columns:1fr;
        gap:10px;
        min-height:170px
    }
    .sec-explanation p {
        font-size:13px
    }
    .sec-footer {
        align-items:start;
        flex-direction:column;
        gap:14px
    }
}