/* Unterrichtsmaterial im Reiter-/Kapitelstapel-Prinzip wie IT VI.01.
   Die echten BG-Motive bleiben auf einer getrennten Ebene hinter allen Textkarten. */
html{scroll-padding-top:155px}
body{background:#081018!important}
body::before{display:none!important}
.support-backdrop{
  --support-wall:url("../assets/dau-backgrounds/network-ports-1536.webp");
  position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#08121b
}
.support-backdrop::before{
  content:"";position:absolute;inset:-16vh -9vw;
  background-image:linear-gradient(90deg,#07121bad,#07121b8c),var(--support-wall);
  background-size:cover;background-repeat:no-repeat;background-position:center;
  transform:translate3d(0,var(--support-wall-shift,0px),0);will-change:transform
}
.support-backdrop::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,#07101bcc,#08131ab0 45%,#081019ec)
}
body[data-active-topic="diagnose"] .support-backdrop{--support-wall:url("../assets/dau-backgrounds/server-1536.webp")}
body[data-active-topic="abschluss"] .support-backdrop{--support-wall:url("../assets/dau-backgrounds/circuit-signal-1536.webp")}
body>.top,body>.hero,body>.content,body>.foot{position:relative;z-index:2}
body>.top{position:sticky;top:0;z-index:120!important;min-height:64px}
body>.content{overflow:visible!important;isolation:isolate}
.hero{padding:65px 0 48px}
.hero-decoration{opacity:.22}
.hero h1{color:#f7f2e8}.hero h1 em{color:#e8b84a}
.panel-intro{border-color:#71e3d34c;background:linear-gradient(135deg,#12242cef,#0b1720f0)}
.panel-intro small{color:#95e8d9}
.toolbar{margin:12px 0 16px}
.map{
  position:sticky!important;top:64px!important;z-index:100!important;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;
  margin:0 0 30px!important;padding:8px!important;border:1px solid #70e5d449;border-radius:13px;
  background:#0b1821f5;backdrop-filter:blur(18px);box-shadow:0 12px 34px #000a
}
.map .jump{min-height:64px;padding:10px 14px;border-radius:9px;gap:2px}
.map .jump span{font-size:10px;letter-spacing:.12em}
.map .jump b{font-size:13px;text-transform:none;margin-top:1px}
.map .jump small{font-size:11px}
.map .jump:hover{transform:none}
.map .jump.is-current,.map .jump[aria-selected="true"]{
  border-color:#e8b84aaf;background:linear-gradient(125deg,#294542,#1b2c36);
  box-shadow:inset 0 -3px #e8b84a;color:#f9f5e9
}
.map .jump:focus-visible{outline:2px solid #e8b84a;outline-offset:2px}
.support-search-status{margin:0 0 22px;font-size:13px;color:#a8e9de}
.support-flow{position:relative;overflow:visible!important;padding-bottom:12px}
.support-flow>.chapter{
  isolation:isolate;min-height:520px;margin:0 0 clamp(90px,12vh,145px);
  border:1px solid #70dace65;border-radius:20px;overflow:hidden;
  background:linear-gradient(145deg,#12232cf5,#0a161ff9)!important;
  box-shadow:0 24px 70px #000c,inset 0 1px #ffffff12;
  scroll-margin-top:145px;transition:filter .24s ease,transform .24s ease
}
.support-flow>.chapter[hidden]{display:none!important}
/* Deterministische Stapelreihenfolge unabhängig von ResizeObserver und Script-Timing. */
#annehmen,#diagnose,#abschluss{z-index:10!important}
#sla,#beheben,#qualitaet{z-index:11!important}
.support-flow>.chapter::before{
  content:"";position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,#e8b84a,#75e4d0 58%,transparent);z-index:1
}
.chapter-title{
  display:flex;align-items:center;gap:18px;padding:25px 29px;
  background:linear-gradient(100deg,#18333aee,#101e29ed);border-bottom:1px solid #7ee2d138
}
.chapter-title .chapter-head strong{font-size:clamp(21px,2.4vw,30px);color:#f6f1e8;line-height:1.2}
.chapter-title .chapter-head small{font-size:13px;color:#bcd1d4}
.chapter-title .num{font-size:14px;padding:10px 12px;border-color:#d6b96762;color:#e8b84a}
.chapter-body{padding:clamp(20px,3.8vw,43px)!important}
.chapter-body>.lead{color:#d8eee8;font-size:clamp(16px,1.5vw,19px)}
.chapter-body .box,.chapter-body .sample,.chapter-body .qa{background-color:#0b1a24e8}
.chapter-body .box{border-color:#6aa9ad44}
.chapter-body .sample{border-color:#75cfb44b}
.chapter-body .qa{border-color:#6dbbad45}
.end{position:relative;z-index:40;background:linear-gradient(140deg,#10262bf5,#101d28f8);border-color:#e8b84a50}
/* Suchtreffer erscheinen nicht übereinander, auch wenn sie aus verschiedenen Reitern stammen. */
body[data-active-topic="search"] .support-flow>.chapter{
  position:relative!important;top:auto!important;transform:none!important;
  filter:none!important;margin-bottom:26px!important
}
@media(min-width:901px) and (prefers-reduced-motion:no-preference){
  .support-flow>.chapter:not([hidden]){
    position:sticky!important;top:var(--support-fold-top,145px)!important;
    z-index:var(--support-stack-z,10);transform:scale(var(--support-fold-scale,1));
    transform-origin:50% 100%;filter:brightness(var(--support-card-light,1))
  }
}
@media(max-width:900px){
  .map{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
  .map .jump{flex:0 0 190px;min-height:60px}
  .support-flow>.chapter{position:relative!important;top:auto!important;margin:0 0 23px;min-height:0;transform:none!important}
}
@media(max-width:600px){
  .map{top:64px!important;padding:6px!important;margin-bottom:18px!important}
  .map .jump{flex-basis:158px;padding:9px}
  .map .jump b{font-size:12px}
  .map .jump small{display:none}
  .chapter-title{padding:18px 15px;gap:12px}
  .chapter-title .chapter-head strong{font-size:19px}
  .chapter-body{padding:18px!important}
}
@media(prefers-reduced-motion:reduce){
  .support-backdrop::before{transform:none!important;will-change:auto}
  .support-flow>.chapter{transform:none!important;transition:none!important;position:relative!important;top:auto!important}
}
@media print{
  .support-backdrop,.map,.support-search-status{display:none!important}
  .support-flow>.chapter[hidden]{display:block!important}
  .support-flow>.chapter{position:static!important;min-height:0!important;margin:0 0 20px!important;
    border:1px solid #aaa!important;background:#fff!important;box-shadow:none!important;color:#111!important}
  .chapter-title,.chapter-body{background:#fff!important;color:#111!important}
  .chapter-title .chapter-head strong,.chapter-body .lead{color:#111!important}
}