body {
  font-size: 1rem;

  /* .headline-hX: same look as the heading tag, for headlines rendered as <span> (e.g. background image stage) */
  h1, .headline-h1 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.25;
  }

  /* h2 sizes: 22px mobile, 44px from 768px, 62px from 1200px */
  h2, .headline-h2 {
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.1667;
  }

  h3, .headline-h3 {
    font-size: 1.5625rem;
    font-weight: 500;
    line-height: 1.2;
  }

  p,
  ul li,
  input,
  textarea {
    font-weight: 400;
    line-height: 1.5;
  }

  a {
    font-weight: 400;
  }

    ul {
      list-style: disc;
      padding-left: 1.25em;
  }

  @media (min-width: 768px) {
    h1, .headline-h1 {
      font-size: 3.75rem;
      line-height: 1.1667;
    }
    h2, .headline-h2 {
      font-size: 2.75rem;
      line-height: 1.1111;
    }
    h3, .headline-h3 {
      font-size: 1.875rem;
      line-height: 1.1667;
    }
    p,
    ul li,
    input,
    textarea {
      font-size: 1.125rem;
      line-height: 1.4444;
    }
  }

  @media (min-width: 1024px) {
    h1, .headline-h1 {
      font-size: 6.25rem;
      line-height: 1;
    }
    h3, .headline-h3 {
      font-size: 2.5rem;
      line-height: 1.125;
    }
    p,
    ul li,
    input,
    textarea {
      font-size: 1.25rem;
      line-height: 1.4;
    }
  }

  @media (min-width: 1200px) {
    h2, .headline-h2 {
      font-size: 3.875rem;
      line-height: 1.0667;
    }
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  .headline-h1,
  .headline-h2,
  .headline-h3,
  .headline-h4,
  .headline-h5 {
    /* no automatic hyphenation in headlines (all languages); manual soft hyphens (&shy;) still work.
       Fallback: a single word wider than its box breaks without hyphen instead of being cut off */
    hyphens: manual;
    overflow-wrap: break-word;
  }

  p + ul {
    margin-top: 20px;

    @media (min-width: 768px) {
        margin-top: 30px;
    }
  }

  .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.875rem;

    @media (min-width: 768px) {
      padding: 3.125rem;
    }

    @media (min-width: 1024px) {
      padding: 6.25rem;
    }
  }
  .container-special {
    padding-bottom: 3.125rem;

    @media (min-width: 1024px) {
      padding: 6.25rem;
    }
  }

  footer {
    p, a {
      font-size: 1.125rem;
      line-height: 1.3333;
      color: #888;
    }
  }

  strong {
    font-weight: 600;
  }

  nav a.active {
    color: #941408 !important;
    font-weight: 500;
  }
  .lang-dropdown a.active {
    color: #ffffff !important;
  }

  .expanded-card.visible {
    opacity: 1;
  }

  .news-list-view h3 {
    font-size: 1.25rem;
    line-height: 1.5;
    font-weight: 400;
  }

  .swiper-news h3 {
    font-size: 1.25rem;
    line-height: 1.35;
    font-weight: 600;

    @media (min-width: 768px) {
        font-size: 1.5rem;
        line-height: 1.3;
    }

    @media (min-width: 1024px) {
        font-size: 1.875rem;
        line-height: 1.25;
    }
  }
}

.teaser-text {
    font-size: 1.2rem;
    line-height: 1.25;

    @media (min-width: 768px) {
        font-size: 1.35rem;
        line-height: 1.25;
    }

    @media (min-width: 1024px) {
        font-size: 1.5rem;
        line-height: 1.25;
    }
}

.btn {
    display: inline-block;
    min-width: 160px;
    line-height: 18px;
    border: 3px solid;
    text-align: center;
    margin-top: 15px;
    margin-right: 15px;
    padding: 10px 30px;
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s;

    @media (min-width: 768px) {
        margin-top: 25px;
        margin-right: 30px;
        line-height: 24px;
    }

    &:last-child {
        margin-right: 0;
    }

    &.btn-white {
        border-color: #fff;
        color: #fff;

        &:hover {
            background-color: #fff;
            color: #941408;
        }
    }

    &.btn-red {
        border-color: #941408;
        color: #fff;

        &:hover {
            background-color: #941408;
        }
    }

    &.btn-black {
        border-color: #161616;
        color: #161616;

        &:hover {
            background-color: #161616;
            color: #fff;
        }
    }
}

.mail::before,
.phone::before,
.location::before {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 10px;
    vertical-align: middle;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    content: '';
}

.mail::before {
    background-image: url('../Images/mail.png');
}

.phone::before {
    background-image: url('../Images/phone.png');
}

.location::before {
    background-image: url('../Images/location.png');
}

.divider {
    display: block;
    margin-bottom: 10px;
}

@media (min-width: 1069px) {
    .divider {
        display: inline;
        margin-bottom: 0;
    }
    
    .divider::after {
        display: inline;
        content: '|';
        margin: 0 20px;
        color: rgb(107 114 128);
    }
}

.frame:has(section.bg-dark) + .frame:has(section.bg-dark) .container,
.frame:has(section.bg-white) + .frame:has(section.bg-white) .container {
    padding-top: 15px;
}

.frame-type-form_formframework input::placeholder, .frame-type-form_formframework textarea::placeholder {
  color: #ffffff;
}

.lang-selector.open .lang-dropdown { display: flex; }
.lang-selector.open .lang-chevron { transform: rotate(180deg); }
#mobile-menu.open { display: flex; }

.bars {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.4,0,0.2,1), opacity 0.4s ease;
    transform-origin: 225px 225px;
}

.wheel-wrapper {
    &.step-2 .bars { opacity: 1; }
    &.step-3 .bars { opacity: 1; transform: rotate(-45deg); }
    &.step-4 .bars { opacity: 1; transform: rotate(-45deg); }
    &.step-4 .icons-container { opacity: 1; }
}

.icon-item {
    & svg {
        transition: transform 0.2s ease;
    }

    &.active .icon-tooltip {
        opacity: 1;
    }

    @media (min-width: 1024px) {
        &:hover .icon-tooltip { opacity: 1; }
        &:hover svg { transform: scale(1.2); }
    }
}

.swiper-btn {
    color: #941408;
    vertical-align: bottom;

    &.swiper-button-disabled {
        color: rgb(148 20 8 / 0.3);
    }

    @media (min-width: 1024px) {
      & svg {
        width: 19px !important;
        height: 34px !important;
      }
    }
}

.swiper-news-prev {
  margin-right: 10px;

  @media (min-width: 1024px) {
    margin-right: 25px;
  }
}

.swiper-news {
  width: calc(100% + (100vw - 100%) / 2);
  margin-right: calc(-1 * (100vw - 100%) / 2);
}

.news-list-view .news-img-wrap {
    position: relative;

    &::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.29);
    }
}

@media (min-width: 768px) {
    .news-categories li:nth-child(2) { text-align: center; }
    .news-categories li:nth-child(3) { text-align: right; }
}

.news-categories a.border-etred {
    color: #fff;
}

.news-detail h1 {
    font-size: 1.5625rem;
    line-height: 1.2;

    @media (min-width: 768px) {
        font-size: 1.875rem;
        line-height: 1.1667;
    }

    @media (min-width: 1024px) {
        font-size: 2.5rem;
        line-height: 1.125;
    }
}

.form-element-statictext a {
    text-decoration: underline;
}

.frame-type-ne_imagelisttext + .frame-type-ne_textstage .container {
    padding-top: 0;
}

.frame-type-ne_imagelisttext:has(+ .frame-type-ne_textstage) .container {
    padding-bottom: 20px;

    @media (min-width: 768px) {
        padding-bottom: 30px;
    }
}

p + p:has(> .btn) {
    margin-top: 0 !important;
}

@media (min-width: 1024px) {
  .news-link::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0);
      transition: background 0.5s;
      z-index: 1;
  }

  .news-link:hover::after {
      background: rgba(0, 0, 0, 0.5);
  }
}

.teaser-link img {
    transition: transform 0.5s;
}

.group:hover .teaser-link img {
    transform: scale(1.1);
}

/* this is the fix for the wheel that was too big after using the compiled tailwind version */
.w-\[450px\] {
    width: 450px !important;
}
.h-\[450px\] {
    height: 450px !important;
}
/* this was need to display the category filter in the news correct, pl-0 got overridden by additional.css ul padding-left: 1.25em; */
.pl-0 {
    padding-left: 0 !important;
}
/* this was needed as compiled main.css suddenly had these classes, destroying the contact form */
.col-12, .col-6 {
    grid-column: unset;
}

.news-card-footer {
    transform: translateY(0);
}

@media (min-width: 1024px) {
    .news-link:hover .news-title {
        transform: translateY(-40px);
    }
    .news-card-footer {
        transform: translateY(100%);
    }
    .news-link:hover .news-card-footer {
        transform: translateY(0);
    }
}

@media (max-width: 1023px) {
    .news-title {
        bottom: 40px;
    }
}

/* footer links: never break a single link (long DE/ES page titles, phone/e-mail), wrap whole legal links instead */
.footer-contact a,
.footer-legal a {
    white-space: nowrap;
}

@media (min-width: 768px) {
    .footer-legal {
        flex-wrap: wrap;
        row-gap: 10px;
    }
}

@media (min-width: 1024px) {
    .footer-grid {
        grid-template-columns: auto 1fr auto;
    }
}

/* click text teasers: scale titles with the card width so long words (e.g. "Zuverlässigkeit", "Transparencia")
   stay on one line and the red lines align across all three cards */
.frame-type-ne_clicktextteasers .card h3 {
    overflow-wrap: break-word;
}

@media (min-width: 1024px) {
    .frame-type-ne_clicktextteasers .card {
        container-type: inline-size;
    }

    .frame-type-ne_clicktextteasers .card h3 {
        font-size: min(2.5rem, 11cqi);
    }
}

/* globe animation: the tooltip of the badge icon (icon 7) sits right next to the icon and overlaps the red ring
   with the longer DE/ES texts; the offset in the content markup (left-[calc(100%+0px)]) is overridden here for all languages */
.frame-type-ne_globeanimation .icon-item:has(img[src*="Grafik_Icon_7"]) .icon-tooltip {
    left: calc(100% + 50px);
}

/* consent placeholder for blocked embeds (Usercentrics): hide it as soon as the embed has rendered content */
.uc-embed:has([class*="elfsight-app-"] > *) .uc-embed-placeholder {
    display: none;
}

/* header (desktop and mobile): main menu and language selector in white
   (overrides the global red "nav a.active" rule) */
.lang-selector .lang-dropdown a {
    color: #fff;
}

.main-nav-desktop > a:hover,
.main-nav-desktop > a.active,
.main-nav-mobile a:hover,
.main-nav-mobile a.active,
.lang-selector .lang-dropdown a:hover,
.lang-selector .lang-dropdown a.active {
    color: #fff !important;
}

/* language selector: active and hover state underlined */
.lang-selector .lang-dropdown a:hover,
.lang-selector .lang-dropdown a.active {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
}

/* main menu: red line slides in from left to right on hover, fully visible on the active item */
.main-nav-desktop > a,
.main-nav-mobile a {
    position: relative;
}

.main-nav-desktop > a::after,
.main-nav-mobile a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 100%;
    height: 2px;
    background-color: var(--color-etred);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s ease;
}

.main-nav-desktop > a:hover::after,
.main-nav-desktop > a.active::after,
.main-nav-mobile a:hover::after,
.main-nav-mobile a.active::after {
    transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
    .main-nav-desktop > a::after,
    .main-nav-mobile a::after {
        transition: none;
    }
}

/* header: keep a minimum gap between logo and language selector / hamburger on narrow phones;
   the logo (max. 210px) shrinks instead of touching the language selector */
.header-bar {
    column-gap: 20px;
}

.header-logo {
    flex: 0 1 210px;
    min-width: 0;
}

.header-logo img {
    width: 100%;
    height: auto;
}

/* news slider (news_newsliststicky): clickable arrows, red date
   (scoped to the slider: in the news list the date sits on a red background) */
.frame-type-news_newsliststicky .swiper-nav .swiper-btn {
    cursor: pointer;
}

.frame-type-news_newsliststicky .swiper-nav .swiper-btn.swiper-button-disabled {
    cursor: default;
}

.frame-type-news_newsliststicky .swiper-news .news-list-date.news-card-date {
    color: var(--color-etred);
}