/* --------------------------- CSS RESET ------------------------------ */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;  
}
  
img { max-width: 100%; height: auto; }

/* Override default gridlex padding */ 
[class*=col] { padding: 0; }
[class*=grid] { margin: 0; }

section { 
  position: relative; 
}

/* ------------------------ Font Styles ------------------------------- */
@font-face {
  font-family: 'Antic Didone';
  src: url('fonts/AnticDidone-Regular.woff2') format('woff2'),
       url('fonts/AnticDidone-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Taviraj';
  src: url('fonts/Taviraj-Light.woff2') format('woff2'),
       url('fonts/Taviraj-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* ------------------------ CSS Variables ------------------------------- */
:root {
  --dark: #112c36;
  --featured: #507585;
  --medium: #83a5b4;
  --light: #CCDAE0;
  --v-light: #f1f5f6;
  --light-text: #EDE8E4;
  --featured-text: #507585;
  --dark-text: #1d1d1d;
}


/* ---------------------- Typography Styles ----------------------------- */
.left    { text-align: left; }
.right   { text-align: right; }
.center  { text-align: center; }

.uppercase    { text-transform: uppercase; }

body {
  font-family: 'Taviraj', 'Didot', 'Bodoni MT', 'Georgia', serif;
  color: var(--dark-text);
}

h1, h2{ 
  font-family: 'Antic Didone', 'Didot', 'Bodoni MT', 'Georgia', serif;
  font-weight: 200;
  margin-bottom: 1.2rem;
}

h4, h5, h6 {
  font-family: 'Montserrat', 'Arial', 'Helvetica', sans-serif;
  line-height: 1.2;
  margin-bottom: 1.2rem;
}

h1 {  font-size: 7rem; 
      font-weight: 200;
      text-transform: uppercase;
      line-height: 1.2;}
h2 { font-size: 4rem; 
     text-transform: uppercase;
     line-height: 1.1;}
h3 { font-size: 2.2rem; 
     font-family: 'Montserrat', 'Arial', 'Helvetica', sans-serif;
     line-height: 1.3;
     text-transform: uppercase;
     margin-bottom: 1.2rem;
     transform: scaleY(1.1);
     letter-spacing: 0.8;}
h4 { font-size: 1.2rem; 
     text-transform: uppercase;}
h5 { font-size: 0.9rem;
     font-weight: 300; 
     text-transform: uppercase;}
h6 { font-size: 0.9rem; 
     font-weight: 250;
     text-transform: uppercase;
}

p, li {
  line-height: 1.4; 
  margin-bottom: 1rem;
  font-family: 'Taviraj', 'Didot', 'Bodoni MT', 'Georgia', serif; 
  font-weight: 300;
  font-size: 1.1rem;
}

h2:last-child, 
h3:last-child, 
h4:last-child, 
h5:last-child, 
h6:last-child, 
p:last-child {
	margin-bottom: 0;
}

.copyright     { opacity: 0.8; font-size: 0.9rem; text-decoration: none; padding: 0 5%;}

/* ------------------------ Buttons & Links ------------------------ */
a {
    color: inherit;
    text-decoration: none;
    font-weight: 300;
}

a:hover {
  color: var(--featured-text); 
}

p a {
    text-decoration: none;
    border-bottom: 1px solid;
}

p a:hover { 
  color: var(--featured-text); 
}

.button { 
    display: inline-block;
    text-decoration: none;
    line-height: 1;
    padding: 0.5rem 1.5rem;
    border: 1px solid;
}

.button:hover {
  background-color: var(--v-light);
  color: var(--featured);
}

.social-icons{
  font-size: 1.5rem;
}

.fa-angles-right {font-size: 1.1rem;}
.fa-angles-left {font-size: 1.2rem;}


/* ------- LANGUAGE switch ------- */
.switch {
  font-size: 1.5rem;
  z-index: 100;
  position: absolute;
  top: 1.7rem;
  right: 6.5rem;
}

.language-toggle {
  position: absolute;
  z-index: 100;
  top: 1.3rem;
  right: 1.5rem;
  background-color: var(--light);
  border: none;
  padding: 10px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 200;
  border-radius: 5px;
}

.language-toggle:hover {
  background-color: var(--medium);
}
/* ------------ Backgrounds & Background Images  ----------------------- */
.bg-light    { background-color: var(--light); }
.bg-v-light  { background-color: var(--v-light); }

.bg-image {
  background-color: var(--light); /* Set a fall-back color while images are loading */ 
  background-size: cover;
  background-position: center; 
  background-repeat: no-repeat;
  position: relative; /* Wichtig, damit das Overlay sich daran ausrichtet für bg-overlay*/
}

/* Aspect Ratios */
.landscape     { padding-bottom: 66% ; }
.portrait      { padding-bottom: 125%; }
.square        { padding-bottom: 100%; border-radius: 15px; }

/* Overlay */
.bg-overlay::after {
  z-index: 1;
  content: ""; 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.55);
}

.bg-overlay > * {
  z-index: 2;
  position: relative;
}

/* overlay one element above the other in the head section */
.main{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.zind5{ z-index: 5;}

/* ------------------------- Contact Forms  --------------------------- */          
form input, 
form textarea {
  margin: 1rem 0rem;
  padding: 0.5rem 1rem;
  border: 2px solid var(--dark);
  border-radius: 5px;
  display: block;
  width: 100%;
  font-family: 'Taviraj', 'Didot', 'Bodoni MT', 'Georgia', serif;
  font-size: 1.1rem;
  line-height: 1.4; 
  font-weight: 300;
}

form input:focus,
form textarea:focus {
  outline: none;
  border-color: var(--medium);
}

textarea {
  min-height: 7em;
}

input[type="submit"] {
  width: auto;
  display: block;
}

form label {
  font-family: inherit;
  font-weight: 0.9rem;
  display: block;
}

form .button {
  border: 2px solid var(--dark);
  border-radius: 5px;
  background: var(--dark);
  color: var(--light-text);
  font-weight: 700;
  padding: 0.8rem 2rem;
  margin-top: 0.5rem;
  cursor: pointer;
  float: right;
  font-family: 'Montserrat', 'Arial', 'Helvetica', sans-serif;
  font-size: 0.9rem;
}

form .button:hover {
  border: 2px solid var(--medium);
}

/* ------------ Markdown Styles -------------  */
.md-style h1 {
  font-family: 'Montserrat', 'Arial', 'Helvetica', sans-serif;
  font-weight: 400;
  font-size: 3.5rem;
  text-transform: none;
}

/* nicht verändern */
.md-style h2 {
  font-family: 'Montserrat', 'Arial', 'Helvetica', sans-serif;
  font-weight: 300;
  font-size: 2.4rem;
  margin-top: 1.8rem;
  text-transform: none;
}

/* nicht verändern */
.md-style h3 {
  font-weight: 300;
  font-size: 2rem;
  text-transform: none;
}

/* nicht verändern */
.md-style h4 {
  font-weight: 300;
  font-size: 1.4rem;
  margin-top: 1.8rem;
  text-transform: none;
}

.md-style p {
  line-height: 1.6;
  font-size: 1.1rem;
}

.md-style li{
  margin-left: 2rem;
  margin-bottom: 0.5rem;
  padding-left: 1rem;
  margin-right: 5rem;
}

/* ------------ Cookie banner Styles  ----------------------- */
#cookie-notice {
  display: none;
  padding: 2rem;
  text-align: center;
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  width: 30%;
  background: var(--featured);
  color: var(--v-light);
  min-height: 30%;
  z-index: 100;
}

#cookie-notice p {
  font-size: 0.8rem;
  line-height: 1.1;
  padding: 1% 5%;
}

#cookie-notice h4{
  font-size: 1.4rem;
  margin-bottom: 0.2rem;
  text-transform: none;
}

#cookie-notice a {
  display: inline-block;
  cursor: pointer;
  margin-left: 0.5rem;
}

#cookie-notice .privacy a {
  padding-top: 1rem;
  font-size: 0.7rem;
  display: inline-block;
  cursor: pointer;
  margin: 0rem;
  color: var(--light);
}

#cookie-notice .privacy a:hover {
  display: inline-block;
  cursor: pointer;
  color: var(--light);
}

#cookie-notice .button-subtle {
  opacity: 0.8;
}

#cookie-banner-datenschutz{
  display: inline-block;
  font-size: 0.8rem;
  margin: 0 1rem;
  text-decoration: none;
  border-bottom: 1px solid;
}

.reshow-button {
  background-color: #faf6fc;
  position: fixed;
  bottom: -0.3rem;
  right: 0.1rem;
  padding: 0.2rem 0.5rem;
  border-radius: 0.8rem 0.8rem 0 0;
  cursor: pointer;
}

.hide-button.reshow-button {
  display:block;
  position: fixed;
  right: 0.1rem;
}

/*------- positions ---------*/
.relative{
  position: relative;
}
.absolute{
  position: absolute;
  width: 90%;
}

/* ------------------  heading --------------- */
.memory {
  position: absolute;
  left: 15.7rem;
  top: auto;
  bottom: 2.1rem;
  width: 70px;
  text-align: left;
}

.overlay-head {
  position: absolute;
  left: 54%;
  top: 16%;
  text-align: left;
  z-index: 0;
}

.img-head{
  position: relative;
  width: 15rem;
  height: 20rem;
  z-index: 0;
}

/* ----------Section Timeline--------- */
.border-r{
  border-right: 2px solid var(--dark);
  z-index: 10;
}
.border-r-1px{
  border-right: 1px solid var(--dark);
  z-index: 10;
}
.border-hr-1{
  border: 0.5px solid var(--dark);
}
.border-l{
  border-left: 1px solid var(--dark);
  opacity: 60%; 
  margin-left: 5%;
}

hr {
    border: none;
    border: 1px solid var(--dark);
    width: 100%;
}

.icon{
  font-size: 3rem;
  padding: 0.5rem;
}

.position-container {
  position: relative;
  display: flex;
  align-items: center;
}

.fixed-item-hr-l {
  position: absolute;  /* Allows precise positioning */
  top: 20%;  /* Moves below the <hr>, adjust as needed */
  left: 50%;
  transform: translateX(-50%);
}

.fixed-item-icon-l{
  position: absolute; 
  top: 14%; 
  left: 50%;
  transform: translateX(-50%);
}

.fixed-item-text-l{
  position: absolute; 
  top: 6%;  
}

.fixed-item-hr-r {
  position: absolute;  /* Allows precise positioning */
  top: 56%;  /* Moves below the <hr>, adjust as needed */
  left: 50%;
  transform: translateX(-50%);
}

.fixed-item-icon-r{
  position: absolute;  
  top: 50%;  
  left: 50%;
  transform: translateX(-50%);
}

.fixed-item-text-r{
  position: absolute; 
  top: 43%;  
}

.margin-timeline{
  margin-top: -6rem;
}

/* ----------Section Banner--------- */
.text-turn-270{
  transform: rotate(270deg); 
  transform-origin: left bottom;
}

.text-turn-90{
  transform: rotate(90deg); 
  transform-origin: right top;
}

.overlay-lu {
  position: absolute;
  left: 2.2rem;
  top: auto;
  bottom: 1rem;
  width: 100vh; /* Gleiche Breite wie die Höhe der Section */
  text-align: left;
}

.overlay-ro {
  position: absolute;
  right: 0.9rem;
  top: 7.2rem;
  text-align: left;
}

/* Slider */
.slider-container {
  padding: 5%;
}

.slider-item {
  padding: 0.25rem;
  display: none;
}

.slider-item:first-child {
  display: block;
}

.slick-next {
  right: -5px;
}

.slick-prev {
  left: -5px;
}

.slick-next, .slick-prev { top: 48%;}

.slick-next::before, .slick-prev::before {
    font-family: inherit;
    font-size: 20px;
    line-height: 1;
    opacity: .75;
    color: var(--featured);
}

.slick-dots {
  left: 0;
  bottom: 20px;
}

.slick-dots li,
.slick-dots li button {
  width: 10px;
}

.slick-dots li button::before {
  color: var(--featured);
}

.slick-dots li.slick-active button::before {
  color: var(--featured); 
}

/* Lazyload -Fade-in-Effekt für Bilder */
.fade {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.lozad {
  opacity: 1; /* Wenn das Bild geladen ist, wird es eingeblendet */
}

/* ------- Footer Styles --------- */
#footer h4{
  font-size: 1.2rem;
  margin: 0.5rem;
}

#footer .margin-b-neg{margin-bottom: -1rem;}

/* --------------- Negative Space Utility Classes  ---------------------- */ 
.capped-width           { max-width: 1000px; margin: auto; overflow: hidden;}

.vh90  { min-height: 90vh; }
.vh80  { min-height: 80vh; }
.vh70  { min-height: 70vh; }
.vh60  { min-height: 60vh; }
.vh50  { min-height: 50vh; }
.vh40  { min-height: 40vh; }
.vh30  { min-height: 30vh; }

/* Padding Utility Classes */ 
.padded    { padding: 5%;   }
.padded-lg { padding: 10%;  }
.padded-b-lg{padding-bottom: 10%;}

.padded-0  {padding: 0;}
.padded-1  { padding: 1rem; }
.padded-2  { padding: 2rem; }

.padded-t  { padding-top: 5%; }
.padded-t-xl { padding-top: 15%; }
.padded-l  { padding-left: 5%; }
.padded-tb  { padding-top: 5%; padding-bottom: 5%; }
.padded-lr  { padding-left: 5%; padding-right: 5%; }
.padded-lr-1  { padding-left: 1rem; padding-right: 1rem; }

.padded-t-2 { padding-top: 2rem; }
.padded-t-0 { padding-top: 0; }

/* Margin Utility Classes */ 
.margin-0 {margin: 0;}
.margin-b-0 { margin-bottom: 0; }

.margin-b { margin-bottom: 5%; }
.margin-r { margin-right: 5%; }

.margin-t-1 { margin-top: 1rem; }
.margin-b-1 { margin-bottom: 1rem; }
.margin-l-2 { margin-left: 2rem; }

.margin-b-lg { margin-bottom: 10%; }

.margin-tb { margin-top: 5%; margin-bottom: 5%; }
.margin-lr { margin-left: 5%; margin-right: 5%; }


/* ------------------------ Responsive Styles -------------------------- */

/* General CSS Responsive Styles (Apply everywhere unless overriden) */ 

.xs-show, 
.sm-show,
.sm-show-flex,
.md-show {
	display: none; 
}

.inline { 
  display: inline-block;
  vertical-align: top;
}

.order-1 {order: 1;}
.order-2 {order: 2;}

/* ------------------ MD Media Query (64em / 1024px) --------------- */ 
/* - Styles added here will apply at devices smaller than 576px, or zoomed in equivalent */ 

@media(max-width:64em) {

	.md-show { display: block; }
	.md-hide { display: none;  }

  .md-padded-l { padding-left: 5%; }

  h1{ font-size: 6rem;}
  h6{ font-size: 0.8rem;}

  .memory {
    left: 15.8rem;
    bottom: 1.8rem;
  }

  .md-vh80{ min-height: 80vh;}

  #cookie-notice {
    width: 50%;
  }
}

/* ------------------- SM Media Query (48em / 768px) --------------- */ 
/* - Styles added here will apply at devices smaller than 768px, or zoomed in equivalent */ 


@media(max-width:48em) {

	.sm-show { display: block; }
  .sm-show-flex {display: flex;}
	.sm-hide { display: none;  }

  .sm-text-center { text-align: center; }

  .sm-padded-img { padding: 5% 15% 0% 15%;}
  .sm-padded-t-xl { padding-top: 15%; }
  .sm-padded-tb { padding: 5% 0 5% 0;}

  .sm-margin-b-0 { margin-bottom: 0; }
  .sm-margin-t-1 {margin-top: 1rem; }
  .sm-margin-b-1 { margin-bottom: 1rem; }

  .sm-landscape     { padding-bottom: 66% ; }
  .sm-portrait      { padding-bottom: 125%; }
  .sm-square        { padding-bottom: 100%; }

  h1{ padding: 0 2rem; font-size: 4.5rem;}
  h2{ font-size: 3rem;}
  h4{ font-size: 1rem;}
  h6{ font-size: 0.6rem;}

  .fa-angles-right {font-size: 0.9rem;}
  .fa-angles-left {font-size: 1rem;}

  .memory {
    left: 11.8rem;
    bottom: 1.3rem;
  }

  .sm-vh60{ min-height: 60vh;}
  .sm-vh50{ min-height: 50vh;}
  .sm-vh40{ min-height: 40vh;}


  .slick-prev {left: -10px; }
  .slick-next {right: -10px; }
  .slick-dots { bottom: -10px; }

/* SM - Markdown - Styles */
  .md-style h1 {
    font-weight: 600;
    font-size: 2.4rem;
  }

  .md-style h2 {
    font-weight: 400;
    font-size: 2rem;
  }

  .md-style h3 {
    font-weight: 400;
    font-size: 1.6rem;
  }

  .md-style h4 {
    font-weight: 400;
  }

  .md-style p {
    font-size: 1rem;
  }

  .order-1 {order: 2;}
  .order-2 {order: 1;}
  .square {padding-bottom: 75%;
    background-position: 50% 30%;}
}

/* ---------------- XS Media Query (36em / 576px) ------------------- */ 
/* - Styles added here will apply at devices smaller than 576px, or zoomed in equivalent */ 

@media(max-width:36em) {

		.xs-show { display: block; }
		.xs-hide { display: none;  }

    .xs-padded     { padding: 7%; }
    .xs-padded-lg    { padding: 10%; }  

    .xs-padded-t10 {padding-top: 10%;}

    h1{ font-size: 4rem; }
    h2{ font-size: 2.5rem;}
    h3{ font-size: 1.8rem;}

    .memory {
      left: 8.6rem;
      bottom: 0.5rem;
    }

    .sm-padded-img { padding: 5%;}
    
    .xs-border-b {
      border-bottom: 2px solid var(--dark);
    }

    .xs-vh30{ min-height: 30vh;}

    #cookie-notice {
      width: calc(100% - 2rem);
    }

   /* XS - Markdown - Styles */
   .md-style h1 {
    font-size: 1.4rem;
  }
  
  .md-style h2 {
    font-size: 1.6rem;
  }
}