/* Coherent illustration series; desktop presentation only. */
.v4-s1-angelika,.v4-devin-work { display:none; }
.scene-art,.team-art,.configurator-screen { display:contents; }
.v4-configurator { display:contents; }
.v4-ew-person { display:contents; }
#ablauf .scene-art > img { display:block;width:100%;height:auto;margin:0; }

@media (min-width:1100px) {
  html[data-design="calm"] .ich-team-reihe .team-art { display:block; }
  html[data-design="calm"] .ich-team-reihe .team-art img { mix-blend-mode:multiply; }
  html[data-design="calm"] #ablauf .pfad .schritt-bild::before { display:none; }
  html[data-design="calm"] #ablauf .pfad :is(.s2-bild,.s3-bild,.s5-bild,.s6-bild,.s7-bild) { min-height:0; }
  html[data-design="calm"] #ablauf .pfad .schritt-bild { position:relative; }
  html[data-design="calm"] #ablauf .scene-art { display:block;position:relative;width:100%;line-height:0; }
  html[data-design="calm"] #ablauf .scene-art > img { display:block;width:100%;height:auto;max-width:none;border-radius:0;mix-blend-mode:normal; }

  /* The gallery keeps its full area. Angelika works beside its lower edge. */
  html[data-design="calm"] #ablauf .galerie3 .s1-weg { position:relative;margin-left:0; }
  html[data-design="calm"] #ablauf .s1-mitte { position:static; }
  html[data-design="calm"] #ablauf .s1-pfeil { top:204px;left:179px; }
  html[data-design="calm"] #ablauf .s1-angelika { display:none; }
  html[data-design="calm"] #ablauf .v4-s1-angelika { display:block;position:absolute;left:346px;bottom:0;width:166px;height:auto;pointer-events:none; }

  /* Before/after windows retain their original pixel scale. */
  html[data-design="calm"] #ablauf .s2-bild .scene-art { width:514px;max-width:100%; }

  /* Full configurator with a complete workplace, outside its screen area. */
  html[data-design="calm"] #ablauf .v4-configurator { display:grid;grid-template-columns:140px 450px;align-items:end;gap:10px;width:600px;flex:none;margin-left:-42px; }
  html[data-design="calm"] #ablauf .configurator-screen { display:block;grid-column:2;grid-row:1;width:450px; }
  html[data-design="calm"] #ablauf .configurator-screen > img { width:450px;height:auto;max-width:none;border-radius:0;mix-blend-mode:normal; }
  html[data-design="calm"] #ablauf .v4-devin-work { display:block;grid-column:1;grid-row:1;width:140px;height:auto;max-width:none;margin:0 0 -28px;pointer-events:none; }

  /* The live browser keeps its 450px width. Figure and window share a base. */
  html[data-design="calm"] #ablauf .pfad .schritt-ew .schritt-bild { grid-template-columns:450px 100px;width:566px;max-width:none; }
  html[data-design="calm"] #ablauf .v4-ew-person { display:block;grid-column:2;grid-row:1;align-self:end;line-height:0; }
  html[data-design="calm"] #ablauf .v4-ew-person .ew-angelika { display:block;position:static;width:100px;height:auto;margin:0;max-width:none;mix-blend-mode:normal; }
  html[data-design="calm"] #ablauf .ew-schritte { margin-top:4px; }

  html[data-design="calm"] #ablauf .pfad .s6-bild .scene-art { width:500px;max-width:100%; }
  html[data-design="calm"] #ablauf .s5-buehne > .scene-art,
  html[data-design="calm"] #ablauf .s7-buehne > .scene-art { position:relative;z-index:1;pointer-events:none; }
  html[data-design="calm"] #ablauf .s7-buehne .scene-art img { aspect-ratio:1354 / 1161; }
  html[data-design="calm"] #ablauf .s5-buehne .scene-art img { aspect-ratio:1000 / 854; }
}

@media (min-width:1100px) and (max-width:1359px) {
  html[data-design="calm"] #ablauf .v4-configurator { width:450px;margin-left:0;grid-template-columns:1fr;gap:12px; }
  html[data-design="calm"] #ablauf .configurator-screen { grid-column:1; }
  html[data-design="calm"] #ablauf .v4-devin-work { grid-column:1;grid-row:2;width:150px;justify-self:start;margin:0; }
  html[data-design="calm"] #ablauf .v4-s1-angelika { left:340px;width:130px;bottom:0; }
}

@media (min-width:1100px) and (max-width:1279px) {
  html[data-design="calm"] #ablauf .pfad .schritt-ew .schritt-bild { grid-template-columns:450px;width:450px;gap:18px; }
  html[data-design="calm"] #ablauf .v4-ew-person { grid-column:1;grid-row:2;justify-self:end; }
  html[data-design="calm"] #ablauf .v4-ew-person .ew-angelika { width:84px; }
  html[data-design="calm"] #ablauf .ew-schritte { grid-column:1;grid-row:3; }
}

/* Preserve the pre-existing non-desktop presentation while wrapping images. */
@media (max-width:1099px) {
  #ablauf .v4-configurator .configurator-screen > img { width:100%;height:auto;mix-blend-mode:multiply; }
  #ablauf .scene-art > img { mix-blend-mode:multiply; }
  #ablauf .s5-buehne .scene-art > img,#ablauf .s7-buehne .scene-art > img { position:relative;z-index:1; }
  #ablauf .v4-ew-person .ew-angelika { display:none; }
}