/* Grundsätzlich */
body {
  margin: 0;
}

@font-face {
  font-family: "OTNeueMontreal-MediumSemiSqueezed";
  src: url("/fonts/OTNeueMontreal-MediumSemiSqueezed.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "OTNeueMontreal-BookSemiSqueezed";
  src: url("/fonts/OTNeueMontreal-BookSemiSqueezed.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "PPNeueMontreal-Medium";
  src: url("/fonts/PPNeueMontreal-Medium.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

::-webkit-scrollbar {
  display: none;
  width: none;
}


h1, h2 {
  font-size: 2vw;
  color: #000b67;
  font-weight: normal;
  font-family: "OTNeueMontreal-MediumSemiSqueezed";
}

.header,
.tagbar,
.footer,
.articlecontainer {
  position: relative;
  z-index: 10;
}

.footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between; 
  align-items: flex-end;
  padding-bottom: 1vw;
  left: 1vw;
  right: 1vw;
  gap: 1vw;
  position: fixed;
  bottom: 0;
  width: auto;
  height: 6vw;
  background: rgba(255, 255, 255, 0.35);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  mask-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 1) 40%,
    rgba(0, 0, 0, 0) 100%
  );
  -webkit-mask-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 1) 40%,
    rgba(0, 0, 0, 0) 100%
  );

  transform: translateY(100%);
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;

  z-index: 10;
}

footer.is-visible {
  transform: translateY(0);
}

.footerbutton {
  font-size: 2vw;
  color: #000b67;
  border: none;
  background-color: transparent;
  font-family: "OTNeueMontreal-MediumSemiSqueezed";
  cursor: pointer;
}

.pfleilrechtsklein {
  width: 1.5vw;
  padding-bottom: 0.7vw;
}

/* Header */

nav {
  display: flex;
  align-items: stretch;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 11;
} 

nav {
  display: inline;
}

/* #titleWrapper {
  flex: 1;                      
  display: flex;
  height: 6vw;
  padding-top: 1vw;
  z-index: 100;
} */

#titleWrapper h1, #titleWrapper h2 {
  display: inline;
  margin: 0;
}

.gatesopen {
  margin-right: 0; 
  padding-left: 1vw;
}

.gesprache {
  white-space: nowrap;
}

#titleWrapper {
  position: fixed; 
  top: 1vw;
  right: 16vw;
  width: 84vw;
  overflow: hidden;
  z-index: 11;
  transition: 0.2s;
}

.is-centered #titleWrapper {
  right: 50vw;
  width: 100vw;
}

.tagbar {
  padding-right: 1vw;   
  display: flex;
  flex-direction: column; 
  gap: 0.5vw;
  position: fixed;
  top: 1vw;
  right: 15vw;
  width: 0vw;
  transition: 0.2s;
}

.is-centered .tagbar {
  right: 49vw;
}

.header-blur {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw; /* ganze Bildschirmbreite */
  height: 6vw; /* Höhe wie Header */

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  /* 🔥 DAS IST DER FIX */
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 40%,
    rgba(0, 0, 0, 0) 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 40%,
    rgba(0, 0, 0, 0) 100%
  );
  min-width: 0;                    /* extrem wichtig */
  z-index: 0; /* hinter Title & Tagbar */
  }

.title-inner {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

#titleWrapper svg {
  flex: 1;
  min-width: 0;
  height: 1.5vw;
  margin: 0vw;
  display: block;
}

a {
  text-decoration: none;
}

.tagbutton {
  display: flex;
  align-items: center;
  font-size: 2vw;
  color: #000b67;
  border: none;
  background-color: transparent;
  font-family: "OTNeueMontreal-MediumSemiSqueezed";
  cursor: pointer;
  width: 100%;
  position: relative; 
}

.tagbutton .tag-arrow {
  width: 1.5vw;
  height: 1.5vw;
  margin-right: 0.3vw;
  position: absolute; 
  left: -2vw;       
  opacity: 0;
  transition: transform 0.15s ease, opacity 0.15s ease, left 0.15s ease;
}

.tagbutton span {
  display: inline-block;
  transition: transform 0.25s ease;
}

.tagbutton.active .tag-arrow {
  animation: arrowBounce 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.tagbutton.active span {
  transform: translateX(1.5vw); /
}

.tagbutton:hover .tag-arrow {
  opacity: 1;
  left: 0;
  transform: translateX(0.3vw); /* kleiner Slide-in */
  }
  
  
  .tagbutton:hover span {
  transform: translateX(1.5vw); /* Text verschiebt sich mit Pfeil */
  }

/* === TAG ROTATION === */


/* Beweglicher Streifen */
.taglist {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

/* Animationszustand */
.taglist.is-animating {
  transition: transform 0.5s ease;
}

/* Fade-In / Fade-Out bei Rotation */

.taglist .tagbutton {
  transition: opacity 0.35s ease;
}

.taglist.is-animating .tagbutton:first-child {
  opacity: 0;
}

.taglist .tagbutton.fade-in {
  opacity: 0;
}

nav {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* nav.is-centered {
  transform: translateX(-35vw);
} */

.articlecontainer {
  display: block; 
  columns: 2;        /* Anzahl der Spalten */
  column-gap: 1vw;   /* Abstand zwischen den Spalten (horizontal) */
  padding: 1vw;
  padding-top: calc(3.5vw + 1vw);
  padding-bottom: calc(4.4vw + 1vw);
  margin-right: calc(15vw + 1vw);
  box-sizing: border-box;
  break-after: column;
  position: absolute;
  top: 0vw;
}

.teilcontainer {
  display: block; 
  columns: 3;        /* Anzahl der Spalten */
  column-gap: 1vw;   /* Abstand zwischen den Spalten (horizontal) */
  padding: 1vw;
  padding-top: calc(3.5vw + 1vw);
  padding-bottom: calc(4.4vw + 1vw);
  margin-right: calc(15vw + 1vw);
  box-sizing: border-box;
  break-after: column;
}

.infocontainer {
  display: block; 
  columns: 2;        /* Anzahl der Spalten */
  column-gap: 1vw;   /* Abstand zwischen den Spalten (horizontal) */
  padding: 1vw;
  padding-top: calc(3.5vw + 1vw);
  padding-bottom: calc(4.4vw + 1vw);
  margin-right: calc(15vw + 1vw);
  box-sizing: border-box;
  break-after: column;
}

.interviewcontainer {
  display: block; 
  columns: 1;        /* Anzahl der Spalten */
  column-gap: 1vw;   /* Abstand zwischen den Spalten (horizontal) */
  padding: 1vw;
  padding-top: calc(3.5vw + 1vw);
  padding-bottom: calc(4.4vw + 1vw);
  margin-right: calc(15vw + 1vw);
  box-sizing: border-box;
  break-after: column;
}


.articletitle {
  display: block;           /* damit es volle Breite einnimmt */
  width: 100%;              /* volle Breite der Box */
  margin: 0;                /* Standard h2-Margin entfernen */
  padding: 0.4vw 1.5vw;       /* oben/unten 0.5vw, links/rechts wie Box */
  font-size: 2vw;
  color: white;             /* Textfarbe */
  background-color: #000b67; /* Defaultfarbe für Streifen */
  box-sizing: border-box;   /* wichtig für volle Breite mit Padding */
  font-family: "OTNeueMontreal-MediumSemiSqueezed";
}

.interview-fulltext {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.interview-item.is-open .interview-fulltext {
  max-height: 2000px; /* groß genug wählen */
}

.interviewcontainer {
  columns: unset;
}

.articlebox {
  position: relative;
  z-index: 20;
}


.fussnote {
  font-size: 0.8vw;
  padding-bottom: 2vw;
}

#hw { 
  background-color: #39ffae; 
  color: #000b67;
} 

#ctp { 
  background-color: #ffff48; 
  color: #000b67;
} 

#caroline { 
  background-color: #00ccff; 
  color: #000b67;
}  

#pp {
  background-color: #ff2356;
}

#nbo {
  background-color: #9e33ce;
}

#shortnotice {
  background-color: #ff8800;
}

#cd {
  background-color: #ff6fa1;
}

#ck {
  background-color: #004018;
}

.articlebox {
  background: transparent; 
  font-family: "PPNeueMontreal-Medium";
  color: #000b67;
  font-size: 1.3vw;

  filter: drop-shadow(0 0 0.2vw rgba(0,0,0,0.35));
  
  animation: popIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  
  box-shadow: none !important;
  opacity: 0; 
  animation-fill-mode: forwards;

  break-inside: avoid; 
  display: inline-block; 
  width: 100%;   
  margin-bottom: 1vw;
}

.header-blur {
  pointer-events: none;
}

.articlebox {
  display: inline-block;
  break-inside: avoid;
}


.interview-fulltext {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

.interview-item.is-open .interview-fulltext {
  max-height: 2000px; /* fallback */
}



#teil-hw {
  background-color: #39ffae;
  --bevel-bg: #39ffae;
  color: #000b67;
}

#hw-head {
  background-color: #39ffae;
  color: #000b67;
}

#teil-ctp {
  background-color:#ffff48;
  --bevel-bg: #ffff48;
  color: #000b67;
}

#ctp-head {
  background-color:#ffff48;
  color: #000b67;
}

#teil-cv {
  background-color:#00ccff;
  --bevel-bg: #00ccff;
  color: #000b67;
}

#cv-head {
  background-color: #00ccff;
  color: #000b67;
}

#teil-sn {
  background-color: #ff8800;
  --bevel-bg: #ff8800; 
  color: white;
}

#sn-head {
  background-color: #ff8800;
  color: white;
}

#teil-pp {
  background-color: #ff2356;
  --bevel-bg: #ff2356;
  color: white;
}

#pp-head {
  background-color: #ff2356;
  color: white;
}

#teil-nbo {
  background-color: #9e33ce;
  --bevel-bg: #9e33ce;
  color: white;
}

#nbo-head {
  background-color: #9e33ce;
  color: white;
}

#teil-cd {
  background-color: #ff6fa1;
  --bevel-bg: #ff6fa1;
  color: white;
}

#cd-head {
  background-color: #ff6fa1;
  color: white;
}

#teil-ck {
  background-color: #004018;
  --bevel-bg: #004018;
  color: white;
}

#ck-head {
  background-color: #004018;
  color: white;
}

.articlebox p {
  margin: 0;
}

.articlebox p:not(.fussnote) {
  margin-bottom: 0.5vw; /* Abstand Text → Fußnote */
  padding-top: 0.6vw;
  padding-left: 1.5vw;
  padding-right: 1.5vw;
  padding-bottom: 0.5vw;
  margin: 0;      /* Verhindert zusätzliche ungewollte Abstände */
  line-height: 1.3; /* Bonus: Etwas mehr Zeilenabstand für bessere Lesbarkeit */
}

.fussnote {
  font-size: 0.9vw;
  margin-top: -1vw;
  padding-left: 3vw;
  padding-bottom: 1vw;
}

.articletext {
  text-indent: 2.5vw;
  }

.shape-rect {
  background: white;
}

.shape-round {
  background: white;
  border-radius: 2.5vw;
}

.shape-round .articletitle {
  border-radius: 2.3vw 2.3vw 0 0;
}

.shape-bevel {
  --bevel-bg: white; /* default */
  --cut: 2vw;
  background: transparent !important;
  }
  
  
  .shape-bevel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bevel-bg);
  z-index: -1;
  clip-path: polygon(
  var(--cut) 0%,
  calc(100% - var(--cut)) 0%,
  100% var(--cut),
  100% calc(100% - var(--cut)),
  calc(100% - var(--cut)) 100%,
  var(--cut) 100%,
  0% calc(100% - var(--cut)),
  0% var(--cut)
  );
  }

.shape-bevel .articletitle {
  clip-path: polygon(
    var(--cut) 0%, 
    calc(100% - var(--cut)) 0%, 
    100% var(--cut), 
    100% 100%, 
    0% 100%, 
    0% var(--cut)
  );
}


.hidden {
  display: none !important;
}


@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.85);
  }
  60% {
    opacity: 1;
    transform: scale(1.05);
  }
  80% {
    opacity: 1;
    transform: scale(0.98);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes arrowBounce {
  0% {
    left: -2vw;
    opacity: 0;
  }
  60% {
    left: 0.3vw;  
    opacity: 1;
  }
  100% {
    left: 0;    
    opacity: 1;
  }
}

.interview-fulltext {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  padding-left: 16vw;
  padding-right: 16vw;
}


.interview-item.is-open .interview-fulltext {
  max-height: 2000px; /* ausreichend groß wählen */
  opacity: 1;
}

.interview-item {
  transition: transform 1s ease;
}

.interview-item.is-open {
  transform: scale(1.01);
}

.interview-item .articletitle,
.interview-item .teaser {
  cursor: pointer;
}


@media (max-width: 768px) {

  body {
    margin: 0;
    overflow-x: hidden;
  }  

    /* Mobile Start */
body.mobile-view .articlecontainer,
body.mobile-view .teilcontainer,
body.mobile-view .infocontainer,
body.mobile-view .interviewcontainer {
  display: none;
}

.articlecontainer,
.teilcontainer,
.infocontainer,
.interviewcontainer {
  width: 100vw;
  max-width: 100vw;
  margin: 0;
  columns: unset;
}

/* Wenn Tag aktiv */
body.mobile-view.mobile-tag-active .articlecontainer {
  display: block;
}

/* Tags ausblenden */
body.mobile-view.mobile-tag-active .tagbar {
  display: none;
}

nav {
  position: static;
  width: 100%;
  text-align: center;
}

.nav-title {
  font-size: 8vw;
}

.nav-subtitle {
  font-size: 5vw;
}

body.mobile-tag-active .nav-subtitle,
body.mobile-tag-active .taglist {
  display: none;
}

.gatesopen {
  position: sticky;
  top: 1vw;         /* Abstand zum oberen Rand */
  z-index: 100;     /* über Content & Tagbar */
  padding: 0 1vw;    /* optional für Abstand links/rechts */
}

body.mobile-view.mobile-tag-active .gesprache {
  display: none;
}


.tagbar {
  padding-right: 1vw;
  padding-top: 1vw;      
  display: flex;
  flex-direction: column; 
  gap: 0.5vw;
  width: 100%;
  max-width: none;
  align-items: center;   /* horizontale Zentrierung */
  text-align: center;
  flex: none; 
}

.taglist {
  width: 100%;
  max-width: none;
  text-align: center;
}

.tagbutton {
  display: flex;
  align-items: center;
  font-size: 6vw;
  color: #ff2356;
  border: none;
  background-color: transparent;
  font-family: "OTNeueMontreal-MediumSemiSqueezed";
  cursor: pointer;
  width: 100%;
  position: relative; 
  text-align: center;
  justify-content: center;
}

.tagbutton .tag-arrow {
  display: none;  /* mobile braucht keine Pfeil-Animation */
}

h1, h2 {
  font-size: 8vw;
  color: #000b67;
  font-weight: normal;
  font-family: "OTNeueMontreal-MediumSemiSqueezed";
}

nav {
  display: flex;
  align-items: stretch;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 11;
  flex-direction: column;   /* 🔥 DAS FEHLT */
  align-items: center;
}

nav.is-centered {
  transform: none;
}

#titleWrapper {
  flex: none;          /* ❗ wichtig */
  display: flex;
  flex-direction: column;
  align-items: center;
  height: auto;
  width: 100%;
}

.title-inner {
  display: flex;
  flex-direction: column;   /* 🔥 DAS FEHLT */
  align-items: center;      /* zentriert */
  justify-content: center;
  gap: 2vw;                 /* optional schöner Abstand */
}

.gatesopen,
.gesprache {
  text-align: center;
}

.header-blur {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw; /* ganze Bildschirmbreite */
  height: 19vw; /* Höhe wie Header */

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  /* 🔥 DAS IST DER FIX */
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 40%,
    rgba(0, 0, 0, 0) 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 40%,
    rgba(0, 0, 0, 0) 100%
  );
  min-width: 0;                    /* extrem wichtig */
  z-index: 0; /* hinter Title & Tagbar */
  }

/* Back Button */
.mobile-back {
  position: fixed;
  top: 4vw;
  left: 4vw;
  z-index: 1000;
  font-size: 7vw;
  font-family: "PPNeueMontreal-Medium";
}

body.mobile-view .mobile-back {
  display: none;
}

body.mobile-view.mobile-tag-active .mobile-back {
  display: block;
}

  .hidden {
    display: none !important;
  }

  .articlecontainer {
    display: block; 
    columns: 1;        /* Anzahl der Spalten */
    column-gap: 1vw;   /* Abstand zwischen den Spalten (horizontal) */
    padding: 1vw;
    padding-top: calc(12vw + 1vw);
    padding-bottom: calc(12vw + 1vw);
    box-sizing: border-box;
    break-after: column;
  }
  
  .teilcontainer {
    display: block; 
    columns: 1;        /* Anzahl der Spalten */
    column-gap: 1vw;   /* Abstand zwischen den Spalten (horizontal) */
    padding: 1vw;
    padding-top: calc(12vw + 1vw);
    padding-bottom: calc(12vw + 1vw);
    box-sizing: border-box;
    break-after: column;
  }
  
  .infocontainer {
    display: block; 
    columns: 1;        /* Anzahl der Spalten */
    column-gap: 1vw;   /* Abstand zwischen den Spalten (horizontal) */
    padding: 1vw;
    padding-top: calc(12vw + 1vw);
    padding-bottom: calc(12vw + 1vw);
    box-sizing: border-box;
    break-after: column;
  }
  
  .interviewcontainer {
    display: block; 
    columns: 1;        /* Anzahl der Spalten */
    column-gap: 1vw;   /* Abstand zwischen den Spalten (horizontal) */
    padding: 1vw;
    padding-top: calc(5vw + 1vw);
    padding-bottom: calc(4.4vw + 1vw);
    box-sizing: border-box;
    break-after: column;
  }

  .articlebox {
    background: transparent; 
    font-family: "PPNeueMontreal-Medium";
    color: #000b67;
    font-size: 5vw;
  
    filter: drop-shadow(0 0 0.2vw rgba(0,0,0,0.35));
    
    animation: popIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    
    box-shadow: none !important;
    opacity: 0; 
    animation-fill-mode: forwards;
  
    break-inside: avoid; 
    display: inline-block; 
    width: 100%;   
    margin-bottom: 1vw;
  }

  .articletitle {
    display: block;           /* damit es volle Breite einnimmt */
    width: 100%;              /* volle Breite der Box */
    margin: 0;                /* Standard h2-Margin entfernen */
    padding: 0.4vw 1.5vw;       /* oben/unten 0.5vw, links/rechts wie Box */
    font-size: 8vw;
    color: white;             /* Textfarbe */
    background-color: #000b67; /* Defaultfarbe für Streifen */
    box-sizing: border-box;   /* wichtig für volle Breite mit Padding */
    font-family: "OTNeueMontreal-MediumSemiSqueezed";
  }
  
  .fussnote {
    font-size: 2.5vw;
    padding-bottom: 3vw;
  }

}