@font-face {
  font-family: 'SyncroBook';
  src: url(fonts/SyncroBook.woff) format('woff');
  font-weight: normal;
  font-style: normal;
}

:root {
  --columns: 12;
  --gap: 0px;
  --swiper-theme-color: #000;
}

html {
  scroll-behavior: smooth;
}

/* statt html, body overflow-x hidden… */
html { overflow-x: hidden; }
body { overflow-x: visible; } /* wichtig für sticky */



body {
  background: white;
  color: black;
  cursor: url('assets/cursor.png'), auto;
}

img {
  max-width: 100%;
  height: auto;
  margin: 0;
  padding-right: 0px;
  display: block;
  border: none;
}




* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.flex-container {
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0.2px;
  font-size: 15px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: var(--gap);
  width: 100%;
  padding: 0px;
}

.col {
  box-sizing: border-box;
  color: black;
  border-radius: 0px;
  position: relative;
}

.col-1  { flex: 0 0 calc(100% / var(--columns) * 1  - (var(--gap) * (var(--columns) - 1)  / var(--columns))); }
.col-2  { flex: 0 0 calc(100% / var(--columns) * 2  - (var(--gap) * (var(--columns) - 2)  / var(--columns))); }
.col-3  { flex: 0 0 calc(100% / var(--columns) * 3  - (var(--gap) * (var(--columns) - 3)  / var(--columns))); }
.col-4  { flex: 0 0 calc(100% / var(--columns) * 4  - (var(--gap) * (var(--columns) - 4)  / var(--columns))); }
.col-5  { flex: 0 0 calc(100% / var(--columns) * 5  - (var(--gap) * (var(--columns) - 5)  / var(--columns))); }
.col-6  { flex: 0 0 calc(100% / var(--columns) * 6  - (var(--gap) * (var(--columns) - 6)  / var(--columns))); }
.col-7  { flex: 0 0 calc(100% / var(--columns) * 7  - (var(--gap) * (var(--columns) - 7)  / var(--columns))); }
.col-8  { flex: 0 0 calc(100% / var(--columns) * 8  - (var(--gap) * (var(--columns) - 8)  / var(--columns))); }
.col-9  { flex: 0 0 calc(100% / var(--columns) * 9  - (var(--gap) * (var(--columns) - 9)  / var(--columns))); }
.col-10 { flex: 0 0 calc(100% / var(--columns) * 10 - (var(--gap) * (var(--columns) - 10) / var(--columns))); }
.col-11 { flex: 0 0 calc(100% / var(--columns) * 11 - (var(--gap) * (var(--columns) - 11) / var(--columns))); }
.col-12 { flex: 0 0 calc(100% / var(--columns) * 12 - (var(--gap) * (var(--columns) - 12) / var(--columns))); }

/* =========================
   NAVIGATION
   ========================= */

#navigation {
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  width: 100%;
  font-weight: 700;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  pointer-events: none; /* Container blockt keine Klicks */
}

#navigation > div { max-width: 100%; }

.nav-left,
.nav-right,
.nav-center {
  position: fixed;
  pointer-events: auto; /* Links sind klickbar */
}



.nav-left {
  left: 0;
  padding-left: 23px;
}



.nav-right {
  top: 0;
  right: 0;
  padding-right: 0px;
}

.nav-center {
  bottom: 10px;
  left: 0;
  padding-left: 23px;
  z-index: 999999; /* ✅ immer über swiper */
}

/* =========================
   TITLES / PROJECT BARS
   ========================= */

.title {
  background-color: rgba(237, 237, 237, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: black;
  padding-left: 2px;

  letter-spacing: 0px;
  transition: letter-spacing 0.7s ease;
}

.title:hover {
  letter-spacing: 1px;
  cursor: pointer;
}

.titel-1  { position: sticky; top: 21px; width: 100%; z-index: 100; }
.titel-2  { position: sticky; top: 38px; z-index: 90; }
.titel-3  { position: sticky; top: calc(38px + 1*17px); z-index: 80; }
.titel-4  { position: sticky; top: calc(38px + 2*17px); z-index: 80; }
.titel-5  { position: sticky; top: calc(38px + 3*17px); z-index: 80; }
.titel-6  { position: sticky; top: calc(38px + 4*17px); z-index: 80; }
.titel-7  { position: sticky; top: calc(38px + 5*17px); z-index: 80; }
.titel-8  { position: sticky; top: calc(38px + 6*17px); z-index: 80; }
.titel-9  { position: sticky; top: calc(38px + 7*17px); z-index: 80; }
.titel-10 { position: sticky; top: calc(38px + 8*17px); z-index: 80; }
.titel-11 { position: sticky; top: calc(38px + 9*17px); z-index: 80; }
.titel-12 { position: sticky; top: calc(38px + 10*17px); z-index: 80; }
.titel-13 { position: sticky; top: calc(38px + 11*17px); z-index: 80; }
.titel-14 { position: sticky; top: calc(38px + 12*17px); z-index: 80; }

.titel-1:hover, .titel-2:hover, .titel-3:hover, .titel-4:hover, .titel-5:hover,
.titel-6:hover, .titel-7:hover, .titel-8:hover, .titel-9:hover, .titel-10:hover,
.titel-11:hover, .titel-12:hover, .titel-13:hover, .titel-14:hover {
  background-color: whitesmoke;
  color: black;
}

/* =========================
   LINKS
   ========================= */

.navigation-link {
  padding-left: 0px;
  padding-right: 0px;
  cursor: pointer;
}



.navigation-link span {
  color: black;
  background-color: white;
  padding: 1px;
  display: inline;
  padding-bottom: 2px;
}


/* ✅ statt blau -> spacing größer */
.navigation-link span:hover {
  letter-spacing: 2px;
}

.website-version {
  color: white;
  background-color: black;
  padding: 1px;
  display: inline;
  padding-bottom: 2px;
}

a {
  text-decoration: none;
  letter-spacing: 0px;
  transition: letter-spacing 0.5s ease;
  cursor: pointer;
  color: black;
}

a:hover {
  letter-spacing: 0.5px;
  color: blue;
}

/* =========================
   SWIPER BASE (DESKTOP)
   ========================= */

/* ✅ NICHT 100vw -> verhindert seitliches Scrollen */
swiper-container {
  width: 100% !important;
  max-width: 100% !important;
  height: auto;
  margin: 0;
  overflow: hidden !important;
}

/* Slides existieren immer (wichtig für transitions) */
swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* collapsed: nur active sichtbar */
swiper-container.collapsed swiper-slide {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.98);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

swiper-container.collapsed .swiper-slide-active {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

/* expanded: alle sichtbar, aber nur active voll opacity */
swiper-container.show swiper-slide {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

swiper-container.show .swiper-slide-active {
  opacity: 1;
}

/* prev/next etwas stärker */
swiper-container.show .swiper-slide-prev,
swiper-container.show .swiper-slide-next {
  opacity: 1;
}

/* deine 4/6 col widths (desktop) */
.swiper-slide-6col {
  flex: 0 0 calc(100% / var(--columns) * 6);
  max-width: calc(100% / var(--columns) * 6);
}
.swiper-slide-4col {
  flex: 0 0 calc(100% / var(--columns) * 4);
  max-width: calc(100% / var(--columns) * 4);
}

/* Images */
swiper-slide img {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  vertical-align: top;
  display: block;
}

.swiper-media,
swiper-slide video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;      /* wie bei deinen Bildern */
  object-position: top;     /* wie bei deinen Bildern */
}

/* Scale Effekt (desktop look) */
.swiper-slide {
  transform: scale(0.5);
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.5, 1),
              opacity 0.6s cubic-bezier(0.25, 0.8, 0.5, 1);
  opacity: 0.5;
}
.swiper-slide-active {
  transform: scale(1);
  opacity: 1;
}
.swiper-slide-prev, .swiper-slide-next {
  transform: scale(0.76);
  transform-origin: top;
  opacity: 0.5;
}

/* arrows desktop (deine custom svgs) */
.swiper-button-prev {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%234c71ae'%2F%3E%3C%2Fsvg%3E") !important;
}
.swiper-button-next {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%234c71ae'%2F%3E%3C%2Fsvg%3E") !important;
}

/* =========================
   TEXT / ABOUT
   ========================= */

.main-text {
  font-size: 15px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  display: none;
  min-width: 45ch;
}

.main-text.show { display: block; }

.more {
  color: blue;
  font-family: "SyncroBook", serif;
  font-size: 12px;
  display: inline-block;
  background-color: white;
  margin-left: 1em;
  font-weight: 400;
  cursor: pointer;
  letter-spacing: 0px;
  transition: letter-spacing 0.3s ease;
}

/*.more:hover { letter-spacing: 2px; }*/

.main-text span {
  background-color: #F9F9F9;
  display: inline;
  padding: 1px;
}

.filler_oben { margin-top: 19px; }

.about-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  margin-top: 210px;
}

.about-title {
  color: black;
  padding: 2px 5px;
  font-size: 14px;
  font-weight: 700;
  display: inline-block;
  text-transform: uppercase;
}

.normal-text {
  font-size: 15px;
  text-align: center;
  padding-left: 25%;
  padding-right: 25%;
  margin-top: 10px;
  margin-bottom: 10px;
}

.normal-text span { background-color: white; }

.subtitle-container {
  display: inline-flex;
  align-items: flex-start;
  gap: 15px;
  width: 100%;
  margin-bottom: 25vh;
}

.subtitle {
  flex: 1;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  color: white;
  display: inline-block;
  text-align: center;
  width: 50%;
}

.subtitle > span {
  background-color: white;
  color: black;
  padding: 1px;
}

.link {
  margin: 10px;
  color: black;
}

.filler_unten { margin-bottom: 80px; }
.leerraum { margin-bottom: 50px; }

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 768px) {
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
  .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    flex: 0 0 100%;
  }
}

@media (max-width: 650px) {
  .normal-text {
    padding-left: 50px;
    padding-right: 50px;
  }

  .subtitle {
    font-size: 1.5vw;
    width: 100%;
    padding: 0px 10px;
  }
}

/* =========================
   MOBILE SWIPER OVERRIDES
   ========================= */
@media (max-width: 800px) {

  /* ✅ Pfeile wirklich weg (Swiper Element) */
  swiper-container::part(button-prev),
  swiper-container::part(button-next) {
    display: none !important;
  }

  /* Full-width slides */
  .swiper-slide-6col,
  .swiper-slide-4col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* ✅ Mobile: keine Scale-Spielereien (macht oft Probleme) */
  .swiper-slide,
  .swiper-slide-active,
  .swiper-slide-prev,
  .swiper-slide-next {
    transform: none !important;
    opacity: 1 !important;
  }

  /* Bilder passen (kein sideways overflow) */
  swiper-slide img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 85vh !important;
    object-fit: contain !important;
    margin: 0 auto;
  }

  /* Navigation bleibt klickbar & sichtbar */
  #navigation { display: block !important; }

  .nav-center {
    position: fixed !important;
    bottom: 10px !important;
    left: 23px !important;
    top: auto !important;
    transform: none !important;
    z-index: 999999 !important;
  }

  /* main-text mobile */
  .main-text {
    position: relative;
    margin: 0px;
  }
}
@media (max-width: 800px) {
  .more {
    display: none;
  }
}

/* Pfeile standardmäßig verstecken */
swiper-container::part(button-prev),
swiper-container::part(button-next),
.swiper-button-prev,
.swiper-button-next {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* Pfeile nur sichtbar, wenn geöffnet (VIEW LESS) */
swiper-container.show::part(button-prev),
swiper-container.show::part(button-next),
swiper-container.show .swiper-button-prev,
swiper-container.show .swiper-button-next {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
@media (max-width: 800px) {
  swiper-container::part(button-prev),
  swiper-container::part(button-next),
  .swiper-button-prev,
  .swiper-button-next {
    display: none !important;
  }
}

@media (max-width: 800px) {
  .nav-center {
    bottom: 100px !important;   /* ← HIER einstellen */
  }
}

@media (max-width: 800px) {
  .nav-center span {
    padding: 4px 6px;
    font-size: 15px;
  }
}

@media (max-width: 800px) {

  /* Größere Klickfläche für INDEX & ABOUT */
  .navigation-link span {
    padding: 6px 8px;      /* größerer Button */
    font-size: 15px;       /* besser lesbar */
    
  }

  /* Optional: etwas mehr Abstand zum Rand */
  .nav-left {
    padding-left: 20px;
  }

 }

 @media (max-width: 800px) {

  /* Navigation: kein Spacing-Change auf Mobile */
  .navigation-link span {
    letter-spacing: 0px !important;
    transition: none !important;
  }

  .navigation-link span:hover,
  .navigation-link span:active {
    letter-spacing: 0px !important;
  }

  /* Falls Links generell betroffen sind */
  a {
    letter-spacing: 0px !important;
    transition: none !important;
  }

  a:hover,
  a:active {
    letter-spacing: 0px !important;
  }
}

@media (max-width: 800px) {

  .subtitle {
    font-size: 12px;   /* oder 14px, je nach Geschmack */
    text-align: center;  /* optional, wirkt oft ruhiger */
  }
}
/* 1) EINMAL definieren */
body {
  cursor: url("assets/cursor.png") 16 16, default !important;
}

/* 2) Alles erbt (verhindert auto -> I-Beam) */
*,
*::before,
*::after {
  cursor: inherit !important;
}

/* 3) Speziell: Titel + Navigation inkl. allen Kindern */
.title, .title *,
#navigation, #navigation *,
.more, .more * {
  cursor: inherit !important;
}

/* 4) Swiper Shadow/Parts */
swiper-container,
swiper-slide,
swiper-container::part(button-prev),
swiper-container::part(button-next) {
  cursor: inherit !important;
}

@media (max-width: 800px) {
.navigation-link span {
  color: black;
  background-color: ;
  padding: 1px;
  display: inline;
  padding-bottom: 2px;
  letter-spacing: 0px;
  transition: letter-spacing 0.5s ease;
}}

@media (max-width: 800px) {
.nav-left {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;              /* GANZE BREITE */
  background-color: white;  /* WEISSER BALKEN */
  padding-left: 23px;      /* HÖHE + LINKER ABSTAND */
  padding-top: 3px;
  padding-bottom: 3px;
  z-index: 1000;
}}