*, *::before, *::after {
    box-sizing: border-box;
  }

  :root {
    --color-secondary: #009de0;
    --color-primary:#0c4479;
    --color-light:#c9e3fa;
    --color-text: hsl(0, 0%, 0%);
    /*--overlay-color: rgba(227, 6, 19, 0.5);*/
    --ff-text: "Open Sans", Helvetica, sans-serif;
    --container-max: 1600px;
    --container-max-narrow: 1200px;
  }

.kesGreyButt, span.resetbutt a, span.submitbutt input, input.kesGreyButt, span.kesGreyButt {

    max-width: 240px !important;

}
#ke_search_sword {

    width: 412px !important;
}

  html {
    scroll-behavior: smooth;
  }

  body {
    transition: all .6s ease-in-out;
    font-family: var(--ff-text);
    color: var(--color-primary);
    background-color: #fff;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.7;
    font-size: clamp(.9rem, 1vw + .7rem, 1.1rem);
    hyphens: auto;
  }



  body > header {
    display: grid;
    grid-template-areas:
      "stack";
      overflow-x: clip;
      position: relative;
  }

  body > header > img {
    object-fit: cover;
    width: 100%;
    object-position: center bottom;
    height:350px;
    grid-area: stack;
  }



  .herotext, .frame-layout-20{
    display: grid;
    width: min(100%, 850px);
    margin-inline: auto;
    align-self: center;
   justify-self: end;
   margin-top: 1.3em;
   background-color: #f2f2f2;
   padding:1.3em;
}

.herotext p, .frame-layout-20 p {
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.4em;
    letter-spacing: 1px;
    font-size: clamp(1rem, 1vw + 1rem, 1.2rem);
}

.herotext .btn, .frame-layout-20 .btn {
  margin-top: 10px;
}

@media (min-width: 1001px) {
  body > header .herotext,   body > header .frame-layout-20 {
    grid-area: stack;
    margin-inline-start: 64%;
    width: min(100%, 370px);
    display: grid;
    align-content: end;
    align-self: end;
    background-color: rgba(12, 68, 121, 0.75);
    margin-bottom: 1em;
  }

  .herotext, .frame-layout-20 {
    margin-top: 100px;
    background-color: transparent;
  }

  .herotext p, .frame-layout-20 p {
    color: #fff;
    text-align: right;
}


.herotext .btn, .frame-layout-20 .btn{
  justify-self: end;
color: var(--color-primary);
background-color: #fff;
}

.herotext .btn:hover, .frame-layout-20 .btn:hover {
  background-color: var(--color-secondary);
  color:#fff;
}
}

  @media (min-width:62.5em) {
    body header > img {
      height:450px;
    }
  }

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: fit-content;
  column-gap: 10px;
  background-color: var(--color-secondary);
  color: #fff;
  text-align: center;
  text-decoration: none;
  padding: 5px 20px;
  font-size: 1rem;
  justify-self: start;
  font-weight: 700;
  transition: background-color 0.3s ease;
}

.btn:hover {
  background-color: var(--color-primary);
}

  main a, .highlight-box a, footer a {
    color:var(--color-primary);
    text-decoration: none;
  }

  main {
    margin: 0 auto;
    overflow-x: clip;
    /* padding-bottom: 100px; */
  }

  main p {
    margin-bottom: 10px;
  }

  footer {
    background-color:var(--color-light);
    background-image: url(../Bilder/footer-wellen.svg);
    background-position:right bottom;
    background-size: contain;
    position: relative;
    background-repeat: no-repeat;
  }


.bg-white {
    background-color: #fff;
    height:50px;
    grid-area: stack;
    transition: all 1s ease-in-out;
  }

.bg-light {
    background-color:var(--color-light);
    padding:1em;
}

  .logo-container {
    display:grid;
    justify-content: center;
    grid-template-areas:
    "logo"
    "menutop";
  }

  img#logo-avakom {
    grid-area: logo;

    width: 100%; /* Füllt den verfügbaren Platz des Wrappers aus */
    max-width: 288px; /* Obergrenze für die Breite */
    justify-self: center;

  }

  @media (min-width: 62.5em) {

    .logo-container {
      /* display:grid; */
      /* grid-template-columns: auto 1fr;
      justify-content: start;
      grid-template-areas:
      "logo menutop";
      overflow: visible;
      height: 150px; */
      display:flex;
      gap:50px;
      height: 120px;
    }

    .logo-avakom-wrapper {
      flex: 0 0 25%;
      width: auto; /* Füllt die erste Spalte aus */
       /* max-width: 300px; */
  }

  .logo-avakom-wrapper img#logo-avakom {
      width: 100%; /* SVG-Bild passt sich der Breite des Wrappers an */
      height: auto; /* Höhe automatisch anpassen, um das Seitenverhältnis beizubehalten */
      transform: translateY(-50px);
      justify-self: start;
      transition: 0.3s;
  }


    .bg-white {
      margin-top: 100px;
      height:120px;
      }

  }



  .highlight-box a {
    color: #fff;
  }

  .lang-search a {
    color:#000;
  }

  .wrapper, .frame {
    width: min(100% - 3em, var(--container-max));
    margin-inline: auto;
    clear: left;
  }

  .wrapperNarrow, .frame-wrapperNarrow {
    width: min(100% - 3em, var(--container-max-narrow));
    margin-inline: auto;
    clear: left;
  }


  .header-container {
    display: flex;
    align-items: baseline;
    gap:25px;

  }

  .header-bar {
    flex: 0 0 20%;
    height: 10px;
    background-color:var(--color-secondary);
  }

  @media (min-width: 62.5em) {
    .header-bar {
      flex: 0 0 33%;
    }

    .header-container {

      gap:50px;

    }
  }

  h1 {
    color:var(--color-primary);
    font-size: clamp(1.4rem, 1vw + 1rem, 2.5rem);
    line-height: 1.5;
    position: relative;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 1em;

  }

h1.balken {
  color:var(--color-primary);
  font-size: clamp(1.3rem, 1vw + 1rem, 2.5rem);
  line-height: 1.5;
  position: relative;
  width:fit-content;
  text-transform: uppercase;
  font-weight: 600;
  flex: 1;
  margin-bottom: 1em;
}

  h3 {
    font-size: clamp(1.1rem, 1vw + 1rem, 1.4rem);
  }

  .container {
    position: relative;
    margin-inline: auto;
  }


  .content-element {
    display: grid;
    gap: 2em;
    margin: 4em auto;
  }

  .overlay-element-container {
    gap: 2em;
    margin: 4em auto;
    max-width: 1200px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
  }

  .overlay-block {
    display: grid;
    gap: 50px;
    position: relative;
    overflow: hidden; /* Wichtig für den Hover-Effekt */
    height: 100%; /* Stellt sicher, dass alle Blöcke gleich hoch sind */
  }


  .overlay-blocker {
    display: grid;
    gap: 50px;
    position: relative;
    overflow: hidden; /* Wichtig für den Hover-Effekt */
    height: 100%; /* Stellt sicher, dass alle Blöcke gleich hoch sind */
    grid-template-areas: "Stack";
  }

  .overlay-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    grid-area: Stack;
  }

  .overlay-text {
    grid-area: Stack;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 51, 102, 0.8);
    color: white;
    padding: 0 25px;
    transition: transform 0.4s ease;
    /* Höhe des nicht-gehoverten Zustands */
    height: 100%;
    /* Startposition: nur der Text ist sichtbar */
    transform: translateY(calc(100% - 35px)); /* Anpassen je nach Ihrer Texthöhe */
  }

  .overlay-text h2 {
    font-size: clamp(1.2rem, 1vw + 1rem, 1.4rem);
  }

  /* Hover-Effekt */
.overlay-blocker:hover .overlay-text {
  transform: translateY(0);
  height: 100%;
  display: flex;

  flex-direction: column;
  padding:25px;
}

  .content-element i.fa {
    color:var(--color-secondary);
    font-size: 1.2rem;
    line-height:1.4;
    margin-top: 3px;
  }

  .content-block {
    display: grid;
    gap: 50px;
  }

  .content-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
  }

  .content-text {
    padding:25px;
  }



  .content-text h2 {
    color: var(--color-primary);
    font-weight: 600;
    text-transform: uppercase;
    margin: 0;
    width: fit-content;
    border-top: 10px solid var(--color-secondary);
    padding-top: 10px;
  }

.footer-infos {
  text-align: left;
  display:grid;
  gap:50px;
  padding:2em 0 3em 0;

}

@media (min-width: 40.0625em) {
  .footer-infos {
    grid-template-columns: repeat(2, 1fr);

  }
}

@media (min-width: 62.5em) {
  .footer-infos {
    grid-template-columns: repeat(3, 1fr);

  }
}

  /* Ab hier Grid Layout für größere Bildschirme */
  @media (min-width: 768px) {
    .content-block {
      grid-template-columns: auto 1fr;
      align-items: center;
      grid-template-areas: "image text";
    }

    /* Für die umgekehrte Anordnung der Elemente */
    .content-block.reverse {
      grid-template-columns: 1fr 1fr;
      grid-template-areas: "text image";
    }

    .overlay-blocker {
      /* grid-template-columns: 1fr 2fr;
      align-items: center;
      grid-template-areas: "eins zwei"; */
    }

    /* Für die umgekehrte Anordnung der Elemente */
    .overlay-blocker.reverse {
      /* grid-template-columns: 2fr 1fr;
      grid-template-areas: "zwei eins"; */
    }

    .content-image {
      grid-area: image;
    }

    .content-text {
      grid-area: text;
    }
  }