/* Artwork is independent of scrolling, dropdown positioning and pointer input. */
html[data-ct-theme] { --ct-ink:#0b1016; }
html[data-ct-theme] body { isolation:isolate; }
.ct-atmosphere {
  position:absolute; inset:0 0 auto; z-index:-1; height:clamp(22rem,34vw,32rem);
  overflow:hidden; pointer-events:none; background:var(--ct-ink);
}
.ct-atmosphere .ct-art {
  position:absolute; inset:0 0 0 14%;
  background:var(--ct-field) no-repeat right var(--ct-focus) / cover;
}
.ct-atmosphere::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg,var(--ct-ink) 0%,rgba(11,16,22,.85) 14%,transparent 62%),
    linear-gradient(90deg,var(--ct-ink) 4%,rgba(11,16,22,.97) 20%,rgba(11,16,22,.79) 44%,rgba(11,16,22,.34) 66%,rgba(11,16,22,.14) 83%,rgba(11,16,22,.43) 100%);
}
html[data-ct-mode="portrait"] .ct-art {
  background-position:center 42%; opacity:.74;
}
html[data-ct-mode="portrait"] .ct-atmosphere::before {
  content:""; z-index:1; position:absolute; inset:3rem 3% 0 38%; pointer-events:none;
  background:var(--ct-image) no-repeat 76% 24% / auto 96%;
  mask-image:linear-gradient(0deg,transparent 0%,#000 36%,#000 83%,transparent 100%);
  mix-blend-mode:lighten;
}
html:is([data-ct-theme^="portraet-"],[data-ct-theme^="auswertung-"],[data-ct-theme^="beruf-"]) .ct-atmosphere::before {
  inset:2.65rem 4% auto auto; width:min(45vw,36rem); height:80%;
  background-position:center 40%;background-size:cover;
  mask-image:radial-gradient(ellipse 54% 62% at 50% 48%,#000 24%,rgba(0,0,0,.9) 49%,transparent 95%);
}
html[data-ct-theme] body>.header {
  background-color:#0b1016;
  background-image:linear-gradient(90deg,rgba(9,15,21,.91),rgba(9,15,21,.83) 40%,rgba(9,15,21,.73) 74%,rgba(9,15,21,.88)),var(--ct-field);
  background-position:center,center var(--ct-focus); background-size:cover; background-repeat:no-repeat;
  border-bottom-color:#3e4140;
}
/* The homepage hero retains the original unmodified panorama and its crop. */
html[data-ct-mode="home"] body>.header {background-position:center,center 44%;}
/* Standalone guide documents and both planners have their own title/navigation shells. */
html[data-ct-theme] body:is(.standalone-guide,.cp-body) {--ct-ink:#0c121a;}
html[data-ct-theme] :is(.cantina-guide-header,.cp-app .planner-top.panel) {
  background-color:#101925;
  background-image:linear-gradient(90deg,rgba(12,19,28,.96) 5%,rgba(12,19,28,.87) 45%,rgba(12,19,28,.50) 78%,rgba(12,19,28,.70)),var(--ct-field);
  background-position:center,center var(--ct-focus);background-repeat:no-repeat;background-size:cover;
}
html[data-ct-theme] .cantina-guide-header:has(h1) {padding:clamp(1rem,3vw,2.5rem); border-radius:.35rem;}
html[data-ct-theme] .cp-app .planner-top.panel {
  background-color:#0b1320;
  background-image:linear-gradient(to bottom,transparent,#0b1320 15rem),
    linear-gradient(90deg,rgba(10,16,26,.94),rgba(10,16,26,.45)),var(--ct-field);
  background-position:top,top,center 38%;background-size:100% 100%,100% 17rem,cover;
}
html[data-ct-theme="freunde"] body>header:not(.header) {
  background:linear-gradient(90deg,#0b111bed,#0b111bba),var(--ct-image) center var(--ct-focus)/cover;
}
html[data-ct-theme] :is(.enc-guide,.library,.section,.parser-page) h1 {text-shadow:0 2px 14px #070c13a6;}
@media(max-width:780px){
  .ct-atmosphere {height:23rem;}
  .ct-atmosphere .ct-art {left:0;background-position:64% var(--ct-focus);}
  .ct-atmosphere::after {
    background:linear-gradient(0deg,var(--ct-ink),rgba(11,16,22,.72) 26%,rgba(11,16,22,.12) 77%),
      linear-gradient(90deg,rgba(11,16,22,.94) 0%,rgba(11,16,22,.78) 38%,rgba(11,16,22,.32) 76%,rgba(11,16,22,.28));
  }
  html[data-ct-mode="portrait"] .ct-atmosphere::before {left:44%;right:0;opacity:.65;background-position:center 22%;background-size:auto 76%;}
}
@media(forced-colors:active),print {
  .ct-atmosphere {display:none;}
  html[data-ct-theme] :is(body>.header,.cantina-guide-header,.cp-app .planner-top.panel,body>header:not(.header)) {background-image:none;}
}