@charset "UTF-8";

/* EKB GmbH Landingpage Juli 2025 */

:root {
    
--fs-xs: 0.875rem;      
--fs-sm: 1rem;          
--fs-base: 1.25rem;    
--fs-md: 1.5rem;       
--fs-lg: 1.75rem;        
--fs-xl: 2.5rem;          
--fs-xxl: 3.25rem;         

--clr-theme-100: #FFFFFF;
--clr-theme-900: #014784;
  
--clr-accent-200: #02ACE4;
--clr-accent-400: #E7F2FC;
--clr-accent-600: #D2488E;

--margin-block-10: 2.5rem;
--margin-block-20: 5rem;
--margin-block-30: 7.5rem
  
--section-spacing-10: 1rem;
--section-spacing-20: 2.5rem;
--section-spacing-30: 5rem;
--section-spacing-40: 7.5rem;
--section-spacing-50: 10rem;
  
--gap-10: 1em;
--gap-20: 2em;
--gap-30: 3em;
  
--border-radius: .5em;
  
--button-bg-color: ;
--button-border-color: ;
  
--z-index-10: 10;
--z-index-20: 20;
--z-index-30: 30;
--z-index-40: 40;
  
}
    

/* Accessibility Style */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: clip;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
  }
  
.skip-links--link {
    background-color: var(--theme-color-600);
    border-radius: .25em;
    color: var(--theme-color-100);
    font-family: var(--preset-ff-base);
    padding: .5em;
    position: absolute;
    top: .25em;
    left: 1em;
    transform: translateY(-320%);
    transition: transform 325ms ease-in;
    z-index: var(--z-index-40);
      
    &:hover,
    &:focus-visible {
        outline: 1px dashed var(--theme-color-100);
        outline-offset: 2px;
        transform: translateY(0%);
    }
}
  
  /* BASE */
  
.section-width {
    --max-width: 100%;
    --container-spacing-inline: 1rem;
    margin-inline: auto;
    width: min(var(--max-width), 100% - var(--container-spacing-inline) * 2)
}
  
.width-100 {
    --max-width: 50rem
  }
  
.width-200 {
    --max-width: 64rem
}
  
.width-300 {
    --max-width: 80rem
}
  
.spacing-10 {
    padding-block: var(--section-spacing-10);
}

.spacing-20 {
  padding-block: var(--section-spacing-20);
}

.spacing-30 {
  padding-block: var(--section-spacing-30);
}

.spacing-40 {
  padding-block: var(--section-spacing-40);
}

.layout {
  background-color: var(--clr-theme-900);
  color: var(--clr-theme-100);
}

/* Vermeidung von Standard-Margen für Flexibilität */
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin-block-end: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'TTHoves-Bold', sans-serif;
  line-height: 1.2;
  text-wrap: balance; 
  max-inline-size: 70ch;
  overflow-wrap: break-word;
}

p, ul, figcaption {
  font-family: 'TTHoves-Regular', sans-serif;
  font-size: var(--fs-base);
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.6;
}

/* Button */

.btn {
    min-width: 240px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 1em;
    position: relative;
    font-family: 'TTHoves-Medium', sans-serif;
    font-size: var(--fs-base);  
    line-height: 1;
    padding: 1em;
    cursor: pointer;
    border-radius: 100vw;
  }
  
  .btn-default {
    background-color: var(--clr-accent-200);
    color: var(--clr-theme-100);
  
    &:hover {
      background-color: var(--clr-accent-600);
      color: var(--clr-theme-100);
    }
  
    &:focus-visible {
      outline: 1px dashed currentColor;
      outline-offset: 2px;
    }
  }

/* EKB GmbH Landingpage Juli 2025 */

.site-header {
  display: flex;
  justify-content: flex-end;
  position: relative;
}

.site-header > * {
  --max-width: 80rem;
  --container-spacing-inline: 1rem;
  margin-inline: auto;
  width: min(var(--max-width), 100% - var(--container-spacing-inline) * 2);
}

.site-header--logo {
  position: relative;
}

.site-header--logo img {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10;
  background-color: var(--clr-theme-900);
  padding: .5em 0 2em 0;
  width: 220px;
  height: 110px;
  object-fit: contain;
}

.stage-header {
    width: 100%;
    position: relative;
    overflow: hidden;
}
  
.stage-header--bg {
    width: 100%;
    height: 80vh;
    height: 80dvh;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center; 
}

.stage-header--bg { 
    background-image: linear-gradient(to top, rgba(2, 2, 2, 0.8),transparent max(76%, 76vw)), var(--bg-url);
    background-repeat: no-repeat;
}

.stage-header--text > *:not(:last-child) {
  margin-block-end: 1rem;
}

.stage-header--text h1 {
    font-family: 'TTHoves-Bold', sans-serif;
  font-size: var(--fs-xxl);
  max-width: 40ch;
}

@media (min-width: 40em) {
    
 .stage-header--text h1 {
    max-width: 28ch;
}

    
}

.stage-header--text p {
  font-size: var(--fs-md);
}

.section-nav {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    position: sticky;
    top: 0;
    background-color: var(--clr-accent-200);
    z-index: var(--z-index-20);
}
  
.section-nav--list {
  display: flex;
  justify-content: center;
  gap: 1em;
  padding: 1em;
  margin: 0;
  font-family: var(--ff-tthoves-medium);
  font-size: var(--fs-base);  
}

.section-nav--list li a {
  color: var(--clr-theme-100);
  text-decoration-color: currentColor;
  text-decoration-line: underline;
  text-decoration-skip: spaces;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

.section-nav--list li a:hover {
  color: var(--clr-theme-900);
  text-decoration-color: currentColor;
  text-decoration-line: underline;
  text-decoration-skip: spaces;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}
/* Main Hauptinhalt */

/*
.section-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2em;
}

@media (min-width: 40em) {
    .section-content {
      flex-direction: row;
      flex-wrap: wrap;
    }
  
    .section-content--blocks {
      flex: 1 1 48%;
    }
}
*/

.section-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 30em), 1fr));
  gap: 2em;
}

.section-content--blocks > *:not(:last-child) {
  margin-block-end: 1rem;
}

.section-content--blocks {
  padding: 1em;
}

.section-content--blocks h2 {
 font-size: var(--fs-xl);
}

.section-content--blocks h3 {
  font-size: var(--fs-md);
}

.section-content--blocks ul {
    line-height: 2.25rem;
}
.section-content--blocks li {
 position: relative;
}


.section-content--blocks li span {
  width: 1.75rem;
  display: inline-flex;
  align-items: center;
}

.section-content--blocks figcaption {
    font-size: var(--fs-sm);
     padding: .5em 0;
    
}

.link-items {
    position: relative;
}

.link-items {
    & > * + ::before {
      content: '';
      display: block;
      width: 100%;
      height: 1px;
      background-color: var(--clr-theme-900);
    }
}

.link-items--link {
    padding: .5em;
}

.link-items--link {
    color: var(--clr-theme-900);
    display: block;
}
  
.link-items--link:hover {
    color: var(--clr-theme-100);
  background-color: var(--clr-theme-900);
}

.custom-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.custom-list--item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1em;
}

@media (min-width: 40em) {
    .custom-list--item {
      flex-wrap: nowrap;
    }
  }
  
.custom-list--item .icon {
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.custom-list--item .icon img {
    width: 80px;
    height: 80px;
    display: block;
    object-fit: contain;
}

.custom-list--item .info {
    flex: 1 1 auto;
    min-width: 0;
    align-self: flex-start;
}

.section-superhero {
  display: flex;
  justify-content: center;
  align-items: center;
}

.section-superhero img { 
  width: 680px;
  max-width: 100%;
  height: auto;
}

.section-superhero::before {
  content: '';
  height: 1px;
  background-color: var(--clr-accent-600);
  margin-right: 10px;
  display: inline-flex;
  flex: 1;
}

.section-superhero:after {
  content: '';
  height: 1px;
  background-color: var(--clr-accent-600);
  margin-left: 10px;
  display: inline-flex;
  flex: 1;
}

.section-address {
  display: flex;
  justify-content: center;
  align-items: center;
}

.section-address::before {
  content: '';
  height: 1px;
  background-color: var(--clr-accent-600);
  margin-right: 50px;
  display: inline-flex;
  flex: 1;
}

.section-address:after {
  content: '';
  height: 1px;
  background-color: var(--clr-accent-600);
  margin-left: 50px;
  display: inline-flex;
  flex: 1;
}

.section-content--teaser {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.section-content--teaser > * {
  margin-block-end: 2rem;
}

.section-content--teaser h3 {
  font-size: var(--fs-xl);
  max-inline-size: 40ch;
}

.image-content {
  position: relative;
  transform: translateY(100px);
}

.image-content img {
  width: 800px;
  max-width: 100%;
  height: auto;
   
}


.site-footer {
  border-top: 1px solid var(--clr-accent-600);
  padding-block: 2.5em;
  position: relative;
}

.site-footer > * {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  --max-width: 80rem;
  --container-spacing-inline: 1rem;
  margin-inline: auto;
  width: min(var(--max-width), 100% - var(--container-spacing-inline) * 2);
}

.footer-block ul {
  display: inline-flex;
  align-items: center;
  gap: 1em;
}

.footer-block li span {
  width: 1.25rem;
  display: inline-flex;
  align-items: center;
}

.footer-meta--nav ul {
  display: inline-flex;
  align-items: center;
  gap: 1em;
}