/*
      --- 01 TYPOGRAPHY SYSTEM
      - Font sizes (px)
      10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
      - Font weights
      Default: 
      Medium: 
      Semi-bold: 
      Bold: 
      - Line heights
      Default : 1
      medium : 1.2
      high : 1.5
      higher : 1.8
      - Letter spacing
      --- 02 COLORS
      - header: #eeedf2
      - Tints:
      - Shades: 
      - Accents:
      - Greys : #868686
      #6c6c6c
      --- 05 SHADOWS
      box-shadow: 0 0 6px #bbbbbb;
      --- 06 BORDER-RADIUS
      --- 07 WHITESPACE
      - Spacing system (px)
      2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
      */
      /* Default padding / Margin */
      :root {
    --color-primary-brand: #eb322f;
        }
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html {
        font-size: 62.5%;
      }
      body {
        font-family: EurostileNextLTPro-SmBd, sans-serif;
        line-height: 1;
        color: #000000;
        font-weight: 400;
      }
      .grid {
        display: grid;
        align-items: center;
        justify-content: center;
        column-gap: 1.2rem;
      }
      .grid--3--col {
        grid-template-columns: repeat(3, 1fr);
      }
      .grid--5--col {
        grid-template-columns: repeat(5, 1fr);
      }
      .grid--6--col {
        grid-template-columns: repeat(6, 1fr);
      }
      .list-style {
        list-style: none;
      }
      *:focus {
        outline: none;
        /* outline: 4px dotted #e67e22; */
        /* outline-offset: 8px; */
        /* box-shadow: 0 0 0 0.8rem rgba(230, 125, 34, 0.5); */
      }
      /*====================*/
      /* HEADER SECTION */
      /*====================*/
      .section-header {
        background-color: #eeedf2;
        box-shadow: 0 0 6px #bbbbbb;
      }
      .header-container {
        max-width: 94rem;
        margin: 0 auto;
        padding-top: 2rem;
        padding-bottom: 2rem;
      }
      .menu-icon {
        width: 3rem;
        height: 3rem;
        color: #868686;
        cursor: pointer;
      }
      .menu-text {
        color: #868686;
        font-size: 1.2rem;
        text-align: center;
      }
      .logo-img {
        max-height: 6rem;
        display: inline-block;
      }
      .menu {
        justify-self: left;
      }
      .logo {
        justify-self: center;
      }
      .nav {
        justify-self: right;
      }
      .main-nav {
        display: flex;
        gap: 1.5rem;
        align-items: center;
        justify-content: center;
      }
      .nav-text:link,
      .nav-text:visited {
        font-size: 1.2rem;
        color: #868686;
        border-left: 1px solid #c4c4c4;
        padding-left: 1.2rem;
        line-height: 1.5;
        text-decoration: none;
        display: inline-block;
      }
      .nav-text:hover,
      .nav-text:active {
        color: #e1172b;
      }
      .nav-text-line {
        border-right: 1px solid #c4c4c4;
        padding-right: 1.2rem;
      }
      .nav-icon {
        width: 2.5rem;
        height: 2.5rem;
        color: #868686;
      }
      .nav-icon:hover {
        color: #e1172b;
      }
      /*====================*/
      /* HEADER SECTION */
      /*====================*/
      .section-navigation {
        padding: 2rem 2rem 1.5rem;
      }
      .navigation-box {
        display: flex;
        gap: 2rem;
        justify-content: center;
        margin-bottom: 7.2rem;
      }
      .navigation-text:link,
      .navigation-text:visited {
        font-size: 1.3rem;
        color: #6c6c6c;
        display: inline-block;
        text-decoration: none;
      }
      .navigation-text:hover,
      .navigation-text:active {
        color: #e1172b;
      }
      .nav-text-line-right {
        border-left: 1px solid #c4c4c4;
        padding-left: 2rem;
      }
      .navigation-text2:link,
      .navigation-text2:visited {
        color: #888888;
        text-decoration: underline;
        font-size: 1.1rem;
      }
      .navigation-text2:hover,
      .navigation-text2:active {
        color: #888888;
        text-decoration: none;
      }
      .arrow-color {
        color: #888888;
      }
      /*====================*/
      /* CTA SECTION */
      /*====================*/
      .homepage-link:link,
      .homepage-link:visited {
        color: #595959;
        text-shadow: #363636 0 0 0.1rem;
        text-decoration: underline;
      }
      .homepage-link:hover,
      .homepage-link:active {
        color: #c21000;
      }

      .section-cta1 {
    
        background-image: url("https://image.email.groupeseb.com/lib/fe3111717564047c7d1d76/m/1/02123039-a4f6-4161-90dc-850a21a776f5.jpg");
        background-size: cover;
        background-position: center bottom;
        background-repeat: no-repeat;
        padding: 7.5rem 0px 0px 0px;
      }

      .section-cta2 {
    
        background-image: url("https://image.email.groupeseb.com/lib/fe3111717564047c7d1d76/m/1/3b301f0d-514b-4f8c-b85a-a4c150f43666.jpg");
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
        padding: 0px 0px 7.5rem 0px;
      }

      .section-cta {

        background-image: url("https://image.email.groupeseb.com/lib/fe3111717564047c7d1d76/m/1/7b216ce0-9f2a-4589-a8fb-6c84a720694e.jpg");
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
      
        padding: 7.5rem 0;
      }
      .cta-container {
        max-width: 160rem;
        margin: 0 auto;
      }
      .image-cta-container-1 img,
      .main-img img {
         width: 100vw;
         padding: 0px 10px;
      }
      .cta-headline {
        font-size: 6.4rem;
        line-height: 1.2;
        text-shadow: 2px 2px 10px rgb(0 0 0 / 0.6);
        color: #ffffff;
        text-align: center;
        font-family: din-condensed, sans-serif;
        display: block;
        padding-top: 3.6rem;
        padding-bottom: 3.6rem;
      }
      .cta-headline::before {
        content: "";
        background-image: url(https://image.email.groupeseb.com/lib/fe3611717564047d721177/m/1/4df2e3aa-eb1b-4adb-8566-b39457cbb39c.png);
        top: 0;
        left: 0;
        position: absolute;
        width: 12.8rem;
        height: 5.1rem;
        background-size: cover;
        background-position: top center;
      }
      .cta-headline::after {
        content: "";
        background-image: url(https://image.email.groupeseb.com/lib/fe3611717564047d721177/m/1/9251d4a3-f7c5-490c-b095-5963569923b5.png);
        bottom: 0;
        right: 0;
        position: absolute;
        width: 12.8rem;
        height: 5.1rem;
        background-size: cover;
        background-position: top center;
      }


      .mod-headline {
        padding:0px 3rem 10px 3rem;
      }

      .graph{
        display: block; 
        width: 10rem; 
        height: 4rem;
        margin-bottom: 10px;
      }

      
      .cta-headline_p {
        font-size: 3.5rem;
        line-height: 1;
        text-shadow: 2px 2px 8px rgb(0 0 0 / 0.6);
        color: #ffffff;
        text-align: center;
        font-family: din-condensed, sans-serif;
        display: block;
        padding-bottom: 3.6rem;
      }
      .headline-container {
        position: relative;
        max-width: 70rem;
        margin: 0 auto;
      }
      .cta-red-headerline {
        color: var(--color-primary-brand);
      }
      .cta-box {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 3rem;
        justify-content: center;
        align-items: start;
      }
      .form-background-color {
        background-color: rgba(255, 255, 255, 0.75);
        padding:  9.5rem 6.5rem;
        margin-right: 11.5rem;
        margin-top: 0px;
        border-radius: 5px;
      }
      .form-background-color h1 {
        color: var(--color-primary-brand);
        margin-bottom: 1rem;
        font-size: 3.5rem;
        font-family: 'open sans', sans-serif;
        text-transform: uppercase;
        font-weight: 900;
        line-height: 1.2;
      }
      .form-background-color h2 {
        color: #565655;
        font-size: 2.5rem;
        font-family: 'open sans', sans-serif;
        text-transform: uppercase;
        font-weight: 800;
        line-height: 1.2;
      }
      .form-background-color h3 {
        color: #000000;
        margin-bottom: 2rem;
        font-size: 2.2rem;
        font-family: 'open sans', sans-serif;
        font-weight: 500;
        line-height: 1.2;
      }
      .form-background-color input,
      .form-background-color select {
        border: 1px solid #63636d;
        border-radius: 0;
        height: 4.2rem;
        color: #000000;
        padding: 2rem 2rem 0.5rem 1rem;
        display: block;
        margin-bottom: 2rem;
        width: 100%;
        font-size: 1.4rem;
        font-family: inherit;
        letter-spacing: 0.2px;
        background-color: #ffffff;
      }
      .form-background-color select {
        width: 11rem;
        color: #555555;
      }
      .form-background-color button {
        background-color: var(--color-primary-brand); 
        font-family: open sans, sans-serif;
        color: #ffffff;
        border: none;
        font-weight: 800;
        text-transform: uppercase;
        width: 100%;
        padding: 1.2rem 3rem;
        border-radius: 1.5rem;
        cursor: pointer;
        margin-top: 4rem;
        
        font-size: 2rem;
      }
      .checkbox-flex {
        display: flex;
        gap: 3.5rem;
        margin-top: 1.5rem;
      }
      .cta-text {
        color: #565655;
        font-size: 1.5rem;
        line-height: 3rem;
        font-family: 'open sans', sans-serif;
        font-weight: 600;
      }
      .form-background-color label {
        font-family: open sans, sans-serif;
        font-size: 1.2rem;
        line-height: 1.7;
        max-width: 90%;
        cursor: pointer;
        margin-bottom: 2rem;
      }
      input[type='checkbox'] {
        height: 20px;
        width: 20px;
        cursor: pointer;
      }
      /*====================*/
      /* SLIDER */
      /*====================*/
      /* SLIDER */
      .slider_middle {
        justify-content: start;
        align-items: center;
      }
      /* Slideshow container */
      .slideshow-container {
        max-width: 69em;
        position: relative;
        margin: auto;
        padding: 0px 20px 0px 20px;
      }
      /*====================*/
      /* TABLE SECTION */
      /*====================*/   

      .table_title {
        color: #565655;
        font-size: 1.8rem;
        font-family: 'open sans', sans-serif;
        font-weight: 600;
        line-height: 1.2;
      }

      .title_container{
      background-color: rgba(255, 255, 255, 0.75);
      padding: 2rem 1.5rem;
      margin-top: 0px;
      border-radius: 5px;
      }

      tbody {
        padding:1.5em;
        background: #f5f5f5
      }
      table {
        border: 1px #a39485 solid;
        font-size: 1.3rem;
        box-shadow: 0 2px 5px rgba(0,0,0,.25);
        width: 100%;
        border-collapse: collapse;
        border-radius: 5px;
        overflow: hidden;
        font-family: 'open sans', sans-serif;
        
      }
      th {
        text-align: left;
      }
      thead {
        font-weight: bold;
        color: #fff;
        background: #565655;
        
      }
      td, th {
        padding: .75em;
        vertical-align: middle;
        padding-left: 25px;
      }
      td {
        border-bottom: 1px solid rgba(0,0,0,.1);
        background: #fff;
        
      }
      a {
        color: #73685d;
      }
      ::-webkit-scrollbar {
        width: 6px;
      }
      ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
      }
      ::-webkit-scrollbar-thumb {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
      }
      /*====================*/
      /* ICON SECTION */
      /*====================*/
      .section-icon {
        padding: 4rem 0;
      }
      .container-icon {
        max-width: 100%;
        margin: 0 16rem;
      }
      .grid--5--icon {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        column-gap: 8rem;
      }
      .icon-img {
        width: 4.8rem;
        height: 4.8rem;
      }
      .center-icon-content {
        text-align: center;
      }
      .icon-headline:link,
      .icon-headline:visited {
        color: #ff1027;
        font-size: 1.4rem;
        line-height: 1.2;
        margin-top: 1rem 0;
        padding: 0px 3rem;
        margin-top: 1rem;
        font-weight: 600;
        text-decoration: none;
        display: inline-block;
        min-height: 3.2rem;
      }
      .icon-description {
        font-size: 1.2rem;
        color: #888888;
        margin-top: 1.5rem;
        line-height: 1.5;
        padding: 0 1.2rem;
      }
      .icon-img:hover {
        opacity: 0.6;
      }

.main-img {
width:81%;
display:block;}
      /*====================*/
      /* FOOTER SECTION */
      /*====================*/
      .footer-box {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        column-gap: 7rem;
      }
      .section-footer {
        background-color: #eeedf238;
        border-top: 1px solid #c2c1bf;
      }
      .footer-container {
        max-width: 94rem;
        margin: 0 auto;
        padding-top: 2rem;
        padding-bottom: 2rem;
      }
      .footer-heading:link,
      .footer-heading:visited {
        font-family: EurostileNextLTPro-Light, arial, helvetica, sans-serif;
        font-weight: 400;
        font-size: 1.1rem;
        line-height: 1.3;
        text-transform: uppercase;
        text-decoration: none;
        color: #909090;
      }
      .footer-heading:active {
        text-decoration: underline;
      }
      .footer-heading1 {
        font-family: EurostileNextLTPro-Light, arial, helvetica, sans-serif;
        font-weight: 400;
        font-size: 1.1rem;
        line-height: 1.3;
        text-transform: uppercase;
        text-decoration: none;
        color: #909090;
      }
      .footer-nav:link,
      .footer-nav:visited {
        color: #909090;
        text-decoration: none;
        font-size: 1rem;
        line-height: 1.3;
      }
      .footer-nav:active {
        text-decoration: underline;
      }
      .grid--7 {
        grid-column: 5 / 6;
      }
      .footer-border {
        border-top: 1px solid #dadada;
      }
      .footer-nav img {
        max-width: 100%;
      }
      /* .footer-nav1 {
      width: 100%;
      grid-column: 6 / -1;
      } */
      /* .footer-box1 {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      column-gap: 7rem;
      }
      .footer-container1 {
      width: 94rem;
      margin: 0 auto;
      padding-top: 2rem;
      padding-bottom: 2rem;
      } */
      /* .footer-bg {
      background-image: url(https://image.email.groupeseb.com/lib/fe3611717564047d721177/m/1/ffc3838e-2bc5-4eba-bca3-bd15f1f3fedd.jpg);
      background-position: top center;
      overflow: auto;
      } */
      .footer-icon-image {
        transform: translate(0, 0);
      }
      .footer-nav-container {
        max-width: 92.5rem;
        margin: 0 auto;
      }
      .footer-nav-box {
        display: grid;
        grid-template-columns: 4fr 1fr;
        justify-content: center;
      }
      .footer-navigation:link,
      .footer-navigation:visited {
        color: #909090;
        text-decoration: none;
        font-size: 1rem;
        line-height: 1.3;
      }
      .footer-navigation:active {
        text-decoration: underline;
      }
      .footer-links span {
        color: #909090;
      }
      .footer-logo {
        width: 8.6rem;
        height: auto;
        display: block;
        margin-bottom: 1rem;
        margin-top: 2rem;
      }
      .footer-map-img {
        width: 8.6rem;
        height: auto;
        display: block;
        margin-bottom: 2.4rem;
      }
      .footer-icons {
        justify-self: right;
        margin-right: 3rem;
      }
      .link-style {
        text-align: center;
        margin-bottom: 1rem;
        display: block;
      }
      .footer-container ul {
        font-size:1.3rem;
        line-height:2rem;
        list-style-type: none;
        font-family: 'open sans', sans-serif;
        font-weight: 600;
        padding:0px 20px 0px 20px;
      }
       @media (max-width: 130em) {
        .form-background-color {
          margin-right: 4rem;
          padding:  5.5rem 6.5rem 9.5rem 4.5rem;
        }
      }
      @media (max-width: 94em) {
        .form-background-color {
          margin-right: 4rem;
          padding: 5.5rem 6.5rem 9.5rem 4.5rem;
        }
      }
      @media (max-width: 81em) {
        .form-background-color {
          margin-right: 3rem;
          padding: 7rem 6.5rem 8rem 4.5rem;
        }
        .grid--5--icon {
          grid-template-columns: repeat(6, 1fr);
          column-gap: 2.4rem;
        }
        .GARANTIE-col {
          grid-row: 1;
          grid-column: span 2;
        }
        .REPARATUREN-col {
          grid-row: 1;
          grid-column: span 2;
        }
        .BEDIENUNGS-col {
          grid-row: 1;
          grid-column: span 2;
        }
        .HÄUFIG-col {
          grid-column: span 3;
          margin-top: 5rem;
          width: 64%;
          justify-self: right;
        }
        .KONTAKTSEITE-col {
          grid-column: span 3;
          margin-top: 5rem;
          width: 64%;
        }
        .icon-headline:link,
        .icon-headline:visited {
          padding: 0;
        }
        .icon-description {
          padding: 0;
        }
        .container-icon {
          margin: 0 4rem;
        }
      }
      
      @media (max-width:76em) {
      .form-background-color {
          margin-right: 2rem;
          padding:  6.5rem 6.5rem;
        }
       
      }
      @media (max-width: 68em) {
        .form-background-color {
          margin-right: 2rem;
          padding: 8.5rem 6.5rem;
        }
      }     

      @media (max-width:63em) {
        .grid--3--col {
          grid-template-columns: repeat(2, 1fr);
          row-gap: 2.4rem;
        }
        .logo {
          justify-self: right;
          margin-right: 2rem;
        }
        .menu {
          margin-left: 2rem;
        }
        .nav {
          grid-column: 1 / -1;
          justify-self: center;
        }
        .footer-box {
          grid-template-columns: repeat(3, 1fr);
          column-gap: 3.2rem;
          row-gap: 2rem;
          margin-left: 2rem;
          margin-right: 2rem;
        }
        .grid--7 {
          grid-column: 1 / 2;
        }
        .nav-text-border:link {
          border-left: 0px;
          padding-left: 0;
        }
        .navigation-box {
          flex-wrap: wrap;
        }
        .footer-links {
          margin-left: 2rem;
          margin-right: 2rem;
        }
        .cta-box {
          grid-template-columns: 1fr;
          
          
        }
        .form-background-color {
          max-width: 65rem;
          margin: 0 auto;
          padding: 8.5rem 3.5rem 8.5rem 3.5rem;
        }
        .slide {
          padding-top: 5rem;
        }
        .cta-headline {
          font-size: 5.5rem;
        }
        .section-cta1 {
          padding: 4rem 0 0 0;
        }
        .section-cta2 {
          padding:0 0 4rem 0;
        }
     
      }
      @media (max-width:44em) {
        .form-background-color {
          max-width: 100%;
          margin: 3rem 0rem;
          padding: 2.5rem 1em;
        }
        .mod-headline {
        padding:0px 1rem 10px 1rem;
      }


      .form-background-color button {
        width: 95%;
      }

        .form-background-color label {
          margin-bottom: 0;
          font-size: 1.06rem;
          line-height: 1.4rem;
        }
        .checkbox-flex {
          gap: 1rem;
        }
        .CSSgal {
          padding-left: 30px;
          padding-right: 30px;
        }
        .cta-headline {
          font-size: 4.5rem;
        }
        .headline-container {
          margin: 0 3rem;
        }
        .cta-headline {
          font-size: 4.5rem;
        }
        .graph{
      
      width: 9rem; 
      height: 3rem;
      }   
      }
      @media (max-width:38em) {
        .cta-headline {
          font-size: 3.5rem;
          line-height: 1.2;
          text-shadow: 2px 2px 10px rgb(0 0 0 / 0.6);
          color: #ffffff;
          text-align: center;
          font-family: din-condensed, sans-serif;
          display: block;
          padding-top: 3.6rem;
          padding-bottom: 3.6rem;
          padding-left: 2rem;
          padding-right: 2rem;
        }
        .headline-container {
          margin: 0 3rem;
        }
        .slide {
          width: 100%;
          height: auto;
          padding-left: 2rem;
          padding-right: 2rem;
        }
      }
      @media (max-width:30em) {
        .navigation-text:link,
        .navigation-text:visited {
          font-size: 1.1rem;
        }
        .icon-img {
          width: 3rem;
          height: 3rem;
        }
        .cta-headline {
          font-size: 2.5rem;
        }
        .cta-headline_p {
          font-size: 1.5rem;
        }
        .cta-headline::before {
          width: 9.2rem;
          height: 3.2rem;
        }
        .cta-headline::after {
          width: 9.2rem;
          height: 3.2rem;
        }
        .icon-headline:link,
        .icon-headline:visited {
          font-size: 1rem;
        }
        .container-icon {
          margin: 0 1rem;
        }
        .icon-description {
          font-size: 0.9rem;
        }
        .CSSgal {
          padding-left: 40px;
          padding-right: 40px;
        }
        .slide {
          width: 100%;
          height: auto;
          padding-left: 2rem;
          padding-right: 2rem;
        }
        th, td{
          padding: .7rem;
        }
        .cta-box{
           padding: 0em 3em 0em 3em;
        }
      }

      @media (max-width:24em) {
        
        td {
            text-align: center;
        }
        th {
            text-align: left;
            padding-left: 10px;
        }
       
      }
     
      @media (min-width:310px) and (max-width:480px) { 
        .cta-headline {
          font-size: 3.2rem;
        }
      .cta-headline_p {
          font-size: 2.5rem;
        }
      }      
      
     
     @media (max-width:310px) { 
       table{
          width: 98%;
          font-size: 1.2em;
        }
        th, td{
          padding: 3px;
        }
        .slideshow-container {
          max-width: 31em;
        }
      }
      @media (min-width:310px) and (max-width:480px) { 
        .cta-headline {
        font-size: 3.2rem;
        }
        .cta-headline_p {
        font-size: 2.5rem;
        }
    }   
        

        @media (max-width:310px) { 
        table{
        width: 98%;
        font-size: 1.2em;
        }
        th, td{
        padding: 3px;
        }
        .slideshow-container {
        max-width: 31em;
        }
    }