
@media screen and (min-width: 1360px) {

  body:after {
    content: "XL";
  }

  .only-l {
    display: none !important;
  }

  .only-xl {
    display: block !important;
  }

  .no-xl {
    display: none !important;
  }


  /* ------------[ Schriften ]------------ */

  /* ------------[ Body ]------------ */

  /* ==============================[ Begrenzung Inhalt ]============================== */

  /* ==============================[ Formate für Sektionen ]============================== */

  /* ------------[ spezielle Klassen für Sektionen ]------------ */

  /* ========================[ universelle Klassen ]======================== */

  /* ------------[ Positionierung der Elmente ]------------ */

  /* ------------[ verschiedene Abstände ]------------ */

  /* ------------[ verschiedene Abstände im Grid ]------------ */

  /* ------------[ Klassen für Texte ]------------ */

  /* ========================[ Header-Bereich ]======================== */

  /* ------------[ Logo ]------------ */

  /* ------------[ Hauptnavigation ]------------ */

  /* ------------[ Subnavigation ]------------ */

  /* ------------[ Mobile Navigation ]------------ */

  /* ========================[ Standard-Elemente ]======================== */

  /* ------------[ Überschriften ]------------ */

  /* ------------[ Absätze ]------------ */

  /* ------------[ Verlinkungen ]------------ */

  /* ------------[ Bilder ]------------ */

  /* ------------[ Bild größer klicken ]------------ */

  /* ------------[ Text-Bild-Element ]------------ */

  /* ------------[ Unnummerierte Listen ]------------ */

  /* ------------[ Nummerierte Listen ]------------ */

  /* ------------[ Listen mit mehr Abstand ]------------ */

  /* ------------[ Tabellen ]------------ */

  /* ========================[ Sonderelmente ]======================== */

  /* ------------[ Infobox ]------------ */

  /* ------------[ Teaser ]------------ */

  /* ------------[ Akkordeon ]------------ */

  /* ------------[ Videoplayer ]------------ */

  /* ------------[ Formulare ]------------ */

  /* ========================[ Sonderelmente Website ]======================== */

  /* ------------[ Keyvisual ]------------ */

  .keyvisual {
    --phone-w: min(22vw, 330px);
    height: 100vh;
  }

  .keyvisual .logo {
    width: 200px;
    margin: 42px 120px;
  }

  .keyvisual-text-box {
    display: block;
    width: 62%;
    position: relative;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background-color: var(--color-dark-green);
  }

  .keyvisual-text {
    width: 100%;
    max-width: 900px;
    position: relative;
    position: absolute;
    top: 160px;
    bottom: 120px;
    right: 0;
    text-align: right;
    padding: 120px 180px 0px 60px;
  }

  .keyvisual-text h1 {
    transform: translateX(120px);
    font-size: 72px;
    line-height: 80px;
    color: var(--color-bright-green);
  }

  .keyvisual-text p.intro {
    font-size: 24px;
    line-height: 32px;
  }

  .keyvisual-image {
    width: 100%;
    height: 100%;
  }

  .keyvisual-image img {
    width: var(--phone-w);
    position: absolute;
    top: 16vh;
    left: 62vw;
    transform: translateX(-120px);
  }

  .keyvisual .stoerer {
    width: 360px;
    height: 360px;
    bottom: 30px;
    left: auto;
    right: 24px;
    padding: 30px;
  }


  /* ------------[ Sichtfenster: Duplikat des Hintergrunds, exakt auf den iPhone-Screen zugeschnitten ]------------ */

  .keyvisual-image:before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--bg-image);
    background-size: cover;
    background-position: var(--bg-position, bottom right);
    clip-path: inset(
      calc(16vh + var(--phone-w) * 0.163872)
      calc(42vw + 120px - var(--phone-w) * 0.9444445)
      calc(80vh - var(--phone-w) * 1.7948276)
      calc(62vw - 120px + var(--phone-w) * 0.0555556)
      round calc(var(--phone-w) * var(--screen-radius-r))
    );
    z-index: 3;
    pointer-events: none;
  }


  /* ------------[ Call to Action ]------------ */

  /* ========================[ Footer-Bereich ]======================== */

}
