/* NEXUS Datenschutz & Sicherheit V3.10 – Ergänzung zu ds.css. Präfix: dsx-
   1) Venn Datenschutz/Sicherheit  2) Schichtenmodell „Sicherheit im Betrieb“  3) NEU: Ernstfall-Uhr  4) Datenfluss je Lösung */
:root{--dsx-sky:#7DD3FC;--dsx-steel:#C9D6E3;--dsx-night:#0B1727;--dsx-ok:#35C78A;--dsx-warn:#F2B35C;--dsx-b:#0A6CF0;--dsx-ease:cubic-bezier(.2,.7,.2,1)}
.dsx-emerg svg:not(.dsx-clock svg),.dsx-law svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ================= 1) Venn ================= */
.dsx-venn{margin:26px 0 30px}
.dsx-vstage{position:relative;height:340px;max-width:900px;margin:0 auto}
.dsx-circle{position:absolute;top:0;width:340px;height:340px;border-radius:50%;display:flex;flex-direction:column;justify-content:center;padding:0 60px;transition:transform 1.1s cubic-bezier(.3,1.2,.4,1)}
.dsx-c-dp{left:50%;margin-left:-300px;background:radial-gradient(circle at 35% 40%,rgba(125,211,252,.35),rgba(125,211,252,.12));border:1.5px solid rgba(56,160,220,.45);align-items:flex-start;transform:translateX(-90px)}
.dsx-c-sec{left:50%;margin-left:-40px;background:radial-gradient(circle at 65% 40%,rgba(120,140,170,.3),rgba(120,140,170,.1));border:1.5px solid rgba(90,110,140,.45);align-items:flex-end;text-align:right;transform:translateX(90px)}
.dsx-venn.is-in .dsx-circle{transform:none}
.dsx-circle b{font-size:1.2rem;color:var(--tinte)}
.dsx-circle small{font-size:.76rem;color:var(--schiefer);margin-bottom:10px}
.dsx-circle ul{list-style:none;margin:0;padding:0;display:grid;gap:5px;max-width:130px}
.dsx-circle li{font-size:.8rem;font-weight:600;color:#34465E;line-height:1.3;opacity:0;transition:opacity .5s .9s}
.dsx-venn.is-in .dsx-circle li{opacity:1}
.dsx-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.6);width:170px;text-align:center;display:grid;gap:4px;opacity:0;transition:opacity .5s 1s,transform .6s cubic-bezier(.3,1.5,.5,1) 1s}
.dsx-venn.is-in .dsx-core{opacity:1;transform:translate(-50%,-50%)}
.dsx-core small{font-size:.68rem;font-weight:700;color:#0A4FB0}
.dsx-core b{padding:7px 10px;border-radius:12px;background:var(--dsx-night);color:#fff;font-size:.86rem;box-shadow:0 10px 24px rgba(11,23,39,.3)}
.dsx-core ul{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:3px}
.dsx-core li{font-size:.74rem;font-weight:650;color:#0A3A6B}
.dsx-venn figcaption{text-align:center;font-size:.76rem;color:#7A8BA2;margin-top:6px}

/* ================= 2) Sicherheit im Betrieb (dunkel) ================= */
.ds-section.dsx-sec{background:radial-gradient(ellipse at 15% 20%,rgba(125,211,252,.14),rgba(11,23,39,0) 50%),linear-gradient(170deg,#0F2034,#0A1523);color:#fff}
.dsx-sec h2 em{color:var(--dsx-sky)}
.dsx-sec .eyebrow{color:var(--dsx-sky)}
.dsx-sec .ds-body{color:#B7C4D4}
.dsx-layers-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,64px);align-items:center}
.dsx-stack{position:relative;height:380px;perspective:1100px}
.dsx-plate{position:absolute;left:50%;top:50%;width:250px;height:250px;margin:-125px 0 0 -125px;border-radius:26px;background:linear-gradient(135deg,rgba(125,211,252,.22),rgba(125,211,252,.05));border:1.5px solid rgba(125,211,252,.45);box-shadow:0 30px 50px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.04);transform:rotateX(62deg) rotateZ(-40deg) translateZ(calc(var(--i)*-70px + 90px));opacity:0;transition:transform 1s cubic-bezier(.3,1.2,.4,1) calc(var(--i)*.15s),opacity .6s calc(var(--i)*.15s),border-color .4s,background .4s}
.dsx-stack.is-in .dsx-plate{opacity:1}
.dsx-stack:not(.is-in) .dsx-plate{transform:rotateX(62deg) rotateZ(-40deg) translateZ(-300px)}
.dsx-plate span{position:absolute;right:-8px;bottom:14px;transform:rotateZ(40deg) rotateX(-62deg);transform-origin:right bottom;padding:4px 10px;border-radius:8px;background:#13263E;border:1px solid rgba(125,211,252,.4);color:#DCEFFB;font-size:.78rem;font-weight:700;white-space:nowrap;transition:background .4s,color .4s}
.dsx-plate.is-hl{border-color:var(--dsx-sky);background:linear-gradient(135deg,rgba(125,211,252,.5),rgba(125,211,252,.15));transform:rotateX(62deg) rotateZ(-40deg) translateZ(calc(var(--i)*-70px + 130px))}
.dsx-plate.is-hl span{background:var(--dsx-sky);color:#062033}
.dsx-datacore{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;transform:translateY(-130px);border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#8FE3FF,#1E78B8);box-shadow:0 0 40px rgba(125,211,252,.6);opacity:0;transition:opacity .6s .8s,transform .8s cubic-bezier(.3,1.4,.5,1) .8s}
.dsx-stack.is-in .dsx-datacore{opacity:1;transform:translateY(-150px)}
.dsx-datacore b{color:#062033;font-size:.9rem}
.dsx-proof article{cursor:pointer;background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.1)!important;transition:border-color .3s,background .3s,transform .3s var(--dsx-ease)}
.dsx-proof article b{color:#fff}.dsx-proof article span:not(.ds-p-ic){color:#B7C4D4}
.dsx-proof .ds-p-ic{background:rgba(125,211,252,.14)!important;color:var(--dsx-sky)!important}
.dsx-proof article:hover,.dsx-proof article:focus-visible{border-color:rgba(125,211,252,.5)!important;outline:none}
.dsx-proof article[aria-pressed="true"]{border-color:var(--dsx-sky)!important;background:rgba(125,211,252,.1)!important;transform:translateX(-6px)}

/* ================= 3) Ernstfall (hell) ================= */
.ds-section.dsx-emerg{background:linear-gradient(180deg,#F6F9FC,#EDF2F8)}
.dsx-emerg h2 em{color:#0A6CF0}
.dsx-emerg-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(24px,5vw,64px);align-items:center}
.dsx-clock{position:relative;margin:0;width:min(100%,280px);justify-self:center}
.dsx-clock svg{display:block;width:100%;height:auto;transform:rotate(-90deg)}
.dsx-ck-bg{fill:#fff;stroke:#DDE6F2;stroke-width:12}
.dsx-ck-fg{fill:none;stroke:var(--dsx-b);stroke-width:12;stroke-linecap:round;stroke-dasharray:0 100;transition:stroke-dasharray .9s var(--dsx-ease),stroke .5s}
.dsx-ck-tick{stroke:#C8D6E8;stroke-width:2}
.dsx-clock.is-late .dsx-ck-fg{stroke:var(--dsx-warn)}
.dsx-ck-in{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.dsx-ck-in b{font-size:3rem;line-height:1;font-weight:800;color:var(--tinte);font-variant-numeric:tabular-nums}
.dsx-ck-in span{font-size:.9rem;font-weight:650;color:#34465E}
.dsx-ck-in small{font-size:.72rem;color:#7A8BA2}
.dsx-evs{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dsx-ev{display:grid;grid-template-columns:78px minmax(0,1fr);gap:14px;align-items:start;padding:12px 16px;border-radius:16px;background:#fff;border:1px solid #DDE6F2;opacity:.5;transition:opacity .4s,border-color .4s,box-shadow .4s,transform .4s var(--dsx-ease)}
.dsx-ev-t{padding:4px 8px;border-radius:8px;background:#EEF3FA;font-size:.74rem;font-weight:800;color:#34465E;text-align:center;font-variant-numeric:tabular-nums}
.dsx-ev b{display:block;font-size:.98rem;color:var(--tinte)}
.dsx-ev p{margin:2px 0 0;font-size:.86rem;line-height:1.5;color:var(--schiefer)}
.dsx-ev.is-done{opacity:.85}
.dsx-ev.is-now{opacity:1;border-color:var(--dsx-b);box-shadow:0 14px 34px rgba(10,108,240,.14);transform:translateX(6px)}
.dsx-ev.is-now .dsx-ev-t{background:var(--dsx-b);color:#fff}
.dsx-ev[data-e="3"].is-now{border-color:var(--dsx-warn);box-shadow:0 14px 34px rgba(242,179,92,.2)}
.dsx-ev[data-e="3"].is-now .dsx-ev-t{background:var(--dsx-warn);color:#3B2606}
.dsx-law{display:flex;gap:12px;margin-top:14px;padding:14px 16px;border-radius:16px;background:#FFF8EA;border:1px solid #F2D593}
.dsx-law span{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:10px;background:#F2B35C;color:#3B2606}
.dsx-law svg{width:18px;height:18px}
.dsx-law p{margin:0;font-size:.86rem;line-height:1.6;color:#5A4520}
.dsx-law strong{color:#3B2606}
.dsx-ebar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:14px}
.dsx-play{padding:9px 16px;border-radius:999px;border:0;background:var(--dsx-night);color:#fff;font-size:.86rem;font-weight:700;cursor:pointer}
.dsx-play:hover{background:#12294A}
.dsx-ebar small{font-size:.74rem;color:#7A8BA2}

/* ================= 4) Datenfluss je Lösung ================= */
.dsx-resp{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.dsx-flow{grid-column:1 / -1;margin-top:30px;padding:clamp(18px,2.6vw,28px);border-radius:24px;background:var(--dsx-night);color:#fff;box-shadow:0 30px 70px rgba(11,23,39,.2)}
.dsx-flow-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
.dsx-flow-q{margin:0;font-weight:700;color:var(--dsx-sky);font-size:.9rem}
.dsx-ftabs{display:flex;flex-wrap:wrap;gap:6px;padding:4px;border-radius:999px;background:rgba(255,255,255,.06)}
.dsx-ftabs button{border:0;background:transparent;padding:8px 14px;border-radius:999px;color:#B7C4D4;font-size:.84rem;font-weight:650;cursor:pointer;transition:all .25s}
.dsx-ftabs button[aria-pressed="true"]{background:var(--dsx-sky);color:#062033}
.dsx-lanes{display:grid;grid-template-columns:minmax(0,1fr) 60px minmax(0,1.2fr) 60px minmax(0,1fr);align-items:stretch}
.dsx-lane{padding:14px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.dsx-lane>small{display:block;margin-bottom:8px;font-size:.72rem;font-weight:700;color:#8DA6C3}
.dsx-lane ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.dsx-lane li{padding:5px 10px;border-radius:8px;background:rgba(125,211,252,.14);color:#DCEFFB;font-size:.8rem;font-weight:650;animation:dsxPop .4s cubic-bezier(.3,1.4,.5,1) backwards}
.dsx-lane li:nth-child(2){animation-delay:.08s}.dsx-lane li:nth-child(3){animation-delay:.16s}.dsx-lane li:nth-child(4){animation-delay:.24s}
.dsx-lane p{margin:0;font-size:.9rem;line-height:1.5;color:#DCE6F2;animation:dsxPop .4s ease backwards .2s}
.dsx-pipe{position:relative;display:grid;align-content:center;gap:10px;padding:0 8px}
.dsx-pipe i{position:relative;height:2px;background:rgba(125,211,252,.2);overflow:hidden}
.dsx-pipe i::after{content:"";position:absolute;top:0;left:-30%;width:30%;height:100%;background:linear-gradient(90deg,transparent,var(--dsx-sky),transparent);animation:dsxFlow 1.6s linear infinite}
.dsx-pipe i:nth-child(2)::after{animation-delay:.5s}.dsx-pipe i:nth-child(3)::after{animation-delay:1s}
.dsx-roles{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);font-size:.84rem;color:#B7C4D4}
.dsx-roles b{padding:4px 10px;border-radius:999px;border:1px dashed rgba(125,211,252,.5);color:#fff;font-size:.8rem}
.dsx-flow-foot{margin:10px 0 0;font-size:.74rem;color:#8193AA}

@keyframes dsxPop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@keyframes dsxFlow{to{left:100%}}
@media(max-width:960px){
  .dsx-layers-grid,.dsx-emerg-grid,.dsx-resp{grid-template-columns:minmax(0,1fr)}
  .dsx-stack{height:320px}
  .dsx-lanes{grid-template-columns:minmax(0,1fr)}
  .dsx-pipe{height:30px;grid-template-columns:repeat(3,2px);justify-content:center;gap:14px}
  .dsx-pipe i{height:100%;width:2px}
  .dsx-pipe i::after{width:100%;height:30%;left:0;top:-30%;background:linear-gradient(180deg,transparent,var(--dsx-sky),transparent);animation-name:dsxFlowV}
}
@keyframes dsxFlowV{to{top:100%}}
@media(max-width:700px){
  .dsx-vstage{height:auto;display:grid;gap:10px}
  .dsx-circle,.dsx-core{position:static;width:auto;height:auto;margin:0;border-radius:22px;padding:18px;transform:none!important;align-items:flex-start;text-align:left}
  .dsx-circle ul{max-width:none}
  .dsx-core{order:3;opacity:1}
  .dsx-circle li{opacity:1}
  .dsx-plate{width:190px;height:190px;margin:-95px 0 0 -95px}
  .dsx-ev{grid-template-columns:1fr;gap:6px}.dsx-ev-t{justify-self:start}
}
@media(prefers-reduced-motion:reduce){
  .dsx-venn *,.dsx-stack *,.dsx-emerg *,.dsx-flow *{animation:none!important;transition:none!important}
}
/* Korrekturen */
.dsx-vstage{height:360px}
.dsx-circle{width:360px;height:360px;padding:0 54px}
.dsx-c-dp{margin-left:-330px}
.dsx-c-sec{margin-left:-30px}
.dsx-circle ul{max-width:140px}
.dsx-core{width:160px}
.dsx-plate span{display:none}
.dsx-stack-cap{position:absolute;left:0;right:0;bottom:0;margin:0;text-align:center;font-weight:700;color:var(--dsx-sky);font-size:.95rem;transition:opacity .3s}
@media(max-width:700px){
  .dsx-vstage{height:auto}
  .dsx-circle{position:static;width:auto;height:auto;margin:0;border-radius:22px;padding:18px}
  .dsx-c-dp,.dsx-c-sec{margin-left:0}
  .dsx-core{position:static;width:auto;margin:0}
  .dsx-stack{height:340px}
  .dsx-stack-cap{font-size:.84rem}
}