:root {
    --background: #ffffff;
    --text: #000000;
    --page-padding: clamp(14px, 2vw, 35px);
    --content-width: 1500px;
    --transition-duration: 750ms;
  }

  * {
    box-sizing: border-box;
  }

  html,
  body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }

  body {
    overflow: hidden;
    background: var(--background);
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
  }

  /* GRUNDLAYOUT */

  #app {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--background);
    isolation: isolate;
  }

  /* HEADER: EXPLIZIT LINKS VERANKERT */

  #app > .fixed-header {
    position: absolute !important;
    top: var(--page-padding) !important;
    left: 0 !important;
    right: 0 !important;

    transform: none !important;

    width: 100% !important;
    max-width: none !important;
    min-width: 0;

    margin: 0 !important;
    padding: 0 var(--page-padding) !important;

    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
    justify-content: flex-start;

    gap: clamp(10px, 1.5vh, 20px);

    z-index: 20;
    background: var(--background);

    text-align: left !important;

    opacity: 1;
    visibility: visible;

    transition:
      opacity 150ms linear,
      visibility 0s;
  }

  #app.image-active > .fixed-header {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
      opacity 150ms linear,
      visibility 0s linear 150ms;
  }

  #app > .fixed-header > .logo {
    display: block;

    width: clamp(150px, 21vw, 300px);
    max-width: 100%;
    height: auto;
    max-height: 15vh;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain;
    object-position: left center;

    align-self: flex-start;
  }

  #app > .fixed-header > .subline {
    display: block;

    width: 100%;
    max-width: none;

    margin: 10px 0 0 !important;
    padding: 0 !important;

    color: #000000;
    font-size: 36px;
    line-height: 1.2;
    font-weight: 700;

    text-align: left !important;
    align-self: flex-start;
  }

  /* SLIDER-VIEWPORT */

  #app > .slider-viewport {
    position: absolute;

    top: var(--content-top, 290px);
    right: 0;
    bottom: 0;
    left: 0;

    width: 100%;
    margin: 0;
    padding: 0;

    overflow: hidden;
    background: var(--background);
  }

  #app.image-active > .slider-viewport {
    top: 0 !important;
  }

  /* TEXT-SLIDES */

  #app .content-slide {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    margin: 0;
    padding:
      0
      var(--page-padding)
      clamp(12px, 2vh, 28px);

    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;

    background: var(--background);
    color: #000000;

    text-align: left !important;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 0;

    transform: translate3d(100%, 0, 0);

    transition:
      transform var(--transition-duration) ease,
      opacity var(--transition-duration) ease,
      visibility 0s linear var(--transition-duration);

    will-change: transform;
  }

  #app .content-slide::-webkit-scrollbar {
    display: none;
  }

  #app .content-slide.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translate3d(0, 0, 0);
    z-index: 2;

    transition:
      transform var(--transition-duration) ease,
      opacity var(--transition-duration) ease,
      visibility 0s;
  }

  #app .content-slide.exit-left {
    opacity: 0;
    visibility: visible;
    pointer-events: none;

    transform: translate3d(-100%, 0, 0);
    z-index: 1;

    transition:
      transform var(--transition-duration) ease,
      opacity var(--transition-duration) ease,
      visibility 0s;
  }

  #app .content-slide.preparing {
    transition: none !important;
    transform: translate3d(100%, 0, 0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    z-index: 2;
  }

  /* NEWS-CONTAINER: NICHT ZENTRIEREN */

  #app .news-content,
  #app .static-content {
    display: block;

    width: 100%;
    max-width: none !important;
    min-width: 0;

    margin: 0 !important;
    padding: 0 !important;

    align-self: stretch;
    text-align: left !important;
  }

  /* NEWS-ÜBERSCHRIFT */

  #app .news-title {
    display: block;

    width: 100%;
    max-width: none;

    margin: 0 0 clamp(22px, 3.5vh, 42px) !important;
    padding: 0 !important;

    color: #000000;
    font-size: clamp(2rem, 0.92rem + 4.545vi, 6.375rem);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -0.025em;

    text-align: left !important;

    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;

    flex: 0 0 auto;
  }

  /* NEWS-TEXT */

  #app .news-description {
    display: block;

    width: 100%;
    max-width: none;

    margin: 0 !important;
    padding: 0 !important;

    color: #000000;
    font-size: clamp(1rem, 0.46rem + 2.273vi, 3.188rem);
    line-height: 1.45;
    font-weight: 400;

    text-align: left !important;

    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
  }

  /* ABSCHLUSS-SLIDE */

  #app .headline {
    width: 100%;
    max-width: none;

    margin: 0 0 clamp(28px, 5vh, 60px) !important;
    padding: 0 !important;

    color: #000000;
    font-size: clamp(36px, 4.8vw, 78px);
    line-height: 1.16;
    font-weight: 700;
    letter-spacing: -0.025em;

    text-align: left !important;

    overflow-wrap: break-word;
    hyphens: auto;
  }

  #app .static-message {
    margin: 0 !important;
    padding: 0 !important;

    color: #000000;
    font-size: clamp(23px, 2.5vw, 38px);
    line-height: 1.5;

    white-space: pre-line;
    overflow-wrap: anywhere;

    text-align: left !important;
  }

  #app .status-message {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;

    color: #000000;
    font-size: clamp(20px, 2.2vw, 32px);
    line-height: 1.5;

    text-align: left !important;
  }

  /* PARTNERBILD */

  #app .image-slide {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
    background: #ffffff;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 0;

    transform: translate3d(100%, 0, 0);

    transition:
      transform var(--transition-duration) ease,
      opacity var(--transition-duration) ease,
      visibility 0s linear var(--transition-duration);

    will-change: transform;
  }

  #app .image-slide.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translate3d(0, 0, 0);
    z-index: 2;

    transition:
      transform var(--transition-duration) ease,
      opacity var(--transition-duration) ease,
      visibility 0s;
  }

  #app .image-slide.exit-left {
    opacity: 0;
    visibility: visible;
    pointer-events: none;

    transform: translate3d(-100%, 0, 0);
    z-index: 1;

    transition:
      transform var(--transition-duration) ease,
      opacity var(--transition-duration) ease,
      visibility 0s;
  }

  #app .image-slide.preparing {
    transition: none !important;
    transform: translate3d(100%, 0, 0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    z-index: 2;
  }

  #app .extra-image {
    display: block;

    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;

    margin: 0;
    padding: 0;

    object-fit: contain;
    object-position: center center;
  }

  /* TABLETS */

  @media screen and (max-width: 900px) {
    :root {
      --page-padding: 20px;
    }

    #app > .fixed-header > .logo {
      width: clamp(150px, 25vw, 230px);
    }

    #app > .fixed-header > .subline {
      margin-top: 8px !important;
      font-size: clamp(23px, 3.4vw, 29px);
    }

    #app .news-title {
      font-size: clamp(30px, 5.5vw, 48px);
      line-height: 1.2;
    }

    #app .news-description {
      font-size: clamp(21px, 3.2vw, 27px);
    }

    #app .headline {
      font-size: clamp(32px, 5.8vw, 52px);
    }
  }

  /* SMARTPHONES */

  @media screen and (max-width: 500px) {
    :root {
      --page-padding: 14px;
    }

    #app > .fixed-header {
      gap: 10px;
    }

    #app > .fixed-header > .logo {
      width: min(190px, 65vw);
    }

    #app > .fixed-header > .subline {
      margin-top: 8px !important;
      font-size: clamp(21px, 5vw, 25px);
      line-height: 1.2;
    }

    #app .news-title {
      font-size: clamp(28px, 7.2vw, 38px);
      margin-bottom: 22px !important;
    }

    #app .news-description {
      font-size: clamp(19px, 4.8vw, 23px);
      line-height: 1.45;
    }

    #app .headline {
      font-size: clamp(30px, 7.5vw, 42px);
    }

    #app .static-message {
      font-size: 22px;
    }

    #app .extra-image {
      content: url("../img/Wirtschaftsnews-Partner-Hoch.jpg");
    }
  }

  /* NIEDRIGE DISPLAYS */

  @media screen and (max-height: 600px) {
    :root {
      --page-padding: 20px;
    }

    #app > .fixed-header {
      gap: 8px;
    }

    #app > .fixed-header > .logo {
      width: clamp(115px, 14vw, 190px);
      max-height: 10vh;
    }

    #app > .fixed-header > .subline {
      margin-top: 4px !important;
      font-size: clamp(20px, 2.1vw, 27px);
    }

    #app .news-title {
      font-size: clamp(27px, 3.8vw, 48px);
      margin-bottom: 16px !important;
    }

    #app .news-description {
      font-size: clamp(18px, 1.9vw, 25px);
      line-height: 1.4;
    }

    #app .headline {
      font-size: clamp(29px, 4vw, 52px);
    }
  }

  /* LANDSCAPE: HEADER UND NEWS AUF DIESELBE LINIE SETZEN */

  @media screen and (orientation: landscape) and (max-height: 600px) {
    #app > .fixed-header {
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      padding-left: var(--page-padding) !important;
      padding-right: var(--page-padding) !important;
      align-items: flex-start !important;
    }

    #app > .fixed-header > .logo,
    #app > .fixed-header > .subline {
      margin-left: 0 !important;
      align-self: flex-start !important;
      text-align: left !important;
    }

    #app .content-slide {
      padding-left: var(--page-padding) !important;
      padding-right: var(--page-padding) !important;
    }

    #app .news-content,
    #app .news-title,
    #app .news-description,
    #app .static-content,
    #app .headline,
    #app .static-message {
      margin-left: 0 !important;
      text-align: left !important;
    }
  }

  /* REDUZIERTE BEWEGUNG */

  @media (prefers-reduced-motion: reduce) {
    #app .content-slide,
    #app .image-slide {
      transition-duration: 150ms;
    }
  }