/* ===========================================================
   Überarbeitete Grafiken für die Startseite
   1) Drei Schichten als Plattenstapel (ersetzt das Ringbild)
   2) Einsatzgebiete als Umschalter mit Ablaufbild
   =========================================================== */

/* ---------- 1) Plattenstapel ---------- */
.pl-raum{position:relative;width:100%;max-width:calc(100vw - 2 * var(--pad));min-width:0;
  height:100%;min-height:clamp(340px,40vw,560px);
  perspective:1500px;perspective-origin:50% 42%;--fx:54px;--fy:50px}
@media(max-width:1120px){.pl-raum{--fx:30px;--fy:34px}}
@media(max-width:700px){.pl-raum{--fx:18px;--fy:24px}}
.pl-stapel{position:absolute;left:50%;top:50%;width:min(452px,100% - 3 * var(--fx));
  height:258px;transform:translate(-50%,-50%);transform-style:preserve-3d}
.pl{position:absolute;inset:0;border-radius:18px;padding:17px 18px;background:#fff;overflow:hidden;
  border:1px solid var(--linie);color:var(--text);font-size:11px;
  box-shadow:0 26px 54px -22px rgba(8,31,68,.42),0 2px 6px -2px rgba(8,31,68,.18);
  transform:rotateX(17deg) rotateZ(-6deg)
    translate3d(calc(var(--n) * var(--fx) - var(--fx)),calc(var(--fy) - var(--n) * var(--fy)),
    calc(var(--n) * -34px));
  transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .45s,box-shadow .45s;
  opacity:.3}
.pl h4{margin:0 0 12px;font-size:13.5px;font-weight:600;color:var(--navy);
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;letter-spacing:-.01em}
.pl h4 span{font-weight:500;color:var(--grau-h);font-size:10.5px;white-space:nowrap}
.pl1{--n:0;background:linear-gradient(140deg,#0C2A5C,var(--navy));border-color:rgba(224,238,254,.22)}
.pl1 h4{color:#fff} .pl1 h4 span{color:rgba(224,238,254,.7)}
.pl2{--n:1} .pl3{--n:2;padding:14px}
html:not(.js) .pl{opacity:1}
.pl.hell,.pl-raum[data-an="1"] .pl1,.pl-raum[data-an="2"] .pl2,.pl-raum[data-an="3"] .pl3{
  opacity:1;box-shadow:0 46px 80px -28px rgba(8,31,68,.55),0 2px 6px -2px rgba(8,31,68,.2)}
.pl-raum[data-an="1"] .pl1,.pl1.hell{transform:rotateX(13deg) rotateZ(-4deg)
  translate3d(calc(-1 * var(--fx)),var(--fy),124px)}
.pl-raum[data-an="2"] .pl2,.pl2.hell{transform:rotateX(13deg) rotateZ(-4deg)
  translate3d(0,0,124px)}
.pl-raum[data-an="3"] .pl3,.pl3.hell{transform:rotateX(13deg) rotateZ(-4deg)
  translate3d(var(--fx),calc(-1 * var(--fy)),124px)}

.pl-netz{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}
.pl-netz span{aspect-ratio:1;border-radius:9px;display:grid;place-items:center;
  color:#fff;font-size:11px;font-weight:700;letter-spacing:-.02em}
.pl-netz .leer{background:rgba(224,238,254,.13)}
.pl-fuss{margin-top:12px;padding-top:10px;flex-wrap:wrap;border-top:1px solid rgba(224,238,254,.18);
  color:rgba(224,238,254,.7);font-size:10.5px;display:flex;justify-content:space-between;gap:10px}
.pl-fuss b{color:#fff;font-weight:600}
.pl-zuord{display:grid;gap:8px;list-style:none;margin:0;padding:0}
.pl-zuord li{display:grid;grid-template-columns:92px minmax(0,1fr) 14px minmax(0,1fr);
  align-items:center;gap:7px;font-size:10.5px}
.pl-zuord em{font-style:normal;color:var(--grau)}
.pl-zuord code{font:500 10px/1 ui-monospace,'SF Mono',Menlo,Consolas,monospace;padding:5px 6px;
  border-radius:6px;background:#F1F4FA;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-zuord code.raus{background:#E9F7F0;color:#156B49}
.pl-zuord i{color:var(--grau-h);font-style:normal;text-align:center}
.pl-schuss{margin-top:8px;border-radius:10px;overflow:hidden;border:1px solid var(--linie);
  background:#F7F9FD;height:186px}
.pl-schuss img{width:100%;height:100%;object-fit:cover;object-position:left top;display:block}

/* ---------- 2) Einsatzgebiete als Umschalter ---------- */
.eg-um{margin-top:clamp(28px,3.6vw,48px);display:grid;gap:clamp(16px,2vw,24px);
  grid-template-columns:1fr}
@media(min-width:980px){.eg-um{grid-template-columns:.88fr 1.12fr;align-items:start}}
.eg-wahl{display:grid;gap:9px;align-content:start}
.eg-zeile{border:1px solid var(--linie);border-radius:var(--r-m);background:#fff;overflow:hidden;
  transition:border-color .2s,box-shadow .2s}
.eg-zeile[data-auf="1"]{border-color:#BFCFE6;box-shadow:var(--sch)}
.eg-zeile>button{display:flex;align-items:center;gap:13px;width:100%;padding:16px 18px;border:0;
  background:none;font-family:inherit;text-align:left;cursor:pointer;color:var(--navy);
  font-size:1.02rem;font-weight:600;letter-spacing:-.02em}
.eg-zeile>button i{width:32px;height:32px;border-radius:10px;flex:none;display:grid;
  place-items:center;background:var(--hellblau);color:var(--blau-d);font-style:normal;font-size:.9rem}
.eg-zeile[data-auf="1"]>button i{background:var(--rot);color:#fff}
.eg-zeile>button u{text-decoration:none;margin-left:auto;flex:none;font-size:.74rem;font-weight:600;
  color:var(--rot);font-variant-numeric:tabular-nums}
.eg-rumpf{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s cubic-bezier(.16,1,.3,1)}
.eg-zeile[data-auf="1"] .eg-rumpf{grid-template-rows:1fr}
.eg-rumpf>div{overflow:hidden;padding:0 18px}
.eg-zeile[data-auf="1"] .eg-rumpf>div{padding-bottom:17px}
.eg-rumpf p{font-size:.9rem;line-height:1.6;color:var(--grau)}
.eg-rumpf ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:7px}
.eg-rumpf li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:9px;font-size:.86rem;
  color:var(--text);line-height:1.5}
.eg-rumpf li i{font-style:normal;color:var(--rot);font-weight:700}
.eg-rumpf a{display:inline-flex;align-items:center;gap:7px;margin-top:13px;font-size:.86rem;
  font-weight:600;color:var(--navy);border-bottom:2px solid var(--rot);padding-bottom:2px}
.eg-rumpf a:hover{color:var(--rot)}

.eg-bild{border-radius:var(--r-l);border:1px solid var(--linie);background:#fff;
  box-shadow:0 2px 8px rgba(8,31,68,.05),0 24px 60px -24px rgba(8,31,68,.26);
  overflow:hidden;position:sticky;top:calc(var(--kopfh,110px) + 14px)}
.eg-kopf{display:flex;align-items:center;gap:11px;height:46px;padding:0 16px;
  border-bottom:1px solid var(--linie);font-size:.8rem;color:var(--grau-h)}
.eg-kopf b{color:var(--navy);font-weight:600}
.eg-kopf .punkte{display:flex;gap:6px}
.eg-kopf .punkte i{width:9px;height:9px;border-radius:50%;background:#DADFEA}
.eg-kopf em{margin-left:auto;font-style:normal;font-variant-numeric:tabular-nums}
.eg-spuren{padding:17px 16px 19px;display:grid;gap:10px;
  background:radial-gradient(circle at 1px 1px,#E7EDF6 1px,transparent 0) 0 0/20px 20px}
.eg-spur{display:grid;grid-template-columns:124px minmax(0,1fr);gap:12px;align-items:center}
.eg-spur>u{text-decoration:none;font-size:.74rem;color:var(--grau);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.eg-bahn{height:30px;border-radius:9px;background:var(--flaeche);border:1px solid var(--linie);
  position:relative;overflow:hidden}
.eg-balken{position:absolute;top:0;bottom:0;border-radius:8px;padding:0 10px;font-size:.7rem;
  font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  line-height:30px;transform-origin:left;transition:transform .7s cubic-bezier(.16,1,.3,1)}
html:not(.js) .eg-balken{transform:none}
.js .eg-balken{transform:scaleX(0)}
.js .eg-bild.da .eg-balken{transform:scaleX(1)}
.bl-gruen{background:#1B9E6A} .bl-blau{background:var(--blau)}
.bl-rot{background:var(--rot)} .bl-grau{background:#8795AB}
.eg-fuss{display:flex;align-items:center;gap:10px;padding:13px 16px;border-top:1px solid var(--linie);
  font-size:.78rem;color:var(--grau)}
.eg-fuss b{color:#1B9E6A;font-weight:600}
.eg-fuss em{margin-left:auto;font-style:normal;color:var(--grau-h);font-variant-numeric:tabular-nums}

/* Kachelfarben, die nur hier gebraucht werden */
.k-xls{background:#1D7A46} .k-dir{background:#4A5163} .k-cal{background:#C4651A}
.k-pdf{background:#B3262E}

/* Bildspalte darf nicht über den Seitenrand laufen */
.kr-bild{width:100%;min-width:0;max-width:100%;flex:1 1 auto}