/* ===========================
   FONT-FACES
   =========================== */
@font-face {
  font-family: 'HelveticaNowText-Light';
  src: url('fonts/HelveticaNowText-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'HelveticaNowText-Medium';
  src: url('fonts/HelveticaNowText-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'HelveticaNowText-Black';
  src: url('fonts/HelveticaNowText-Black.ttf') format('truetype');
}
@font-face {
  font-family: 'OPTIAuvantGothic-Bold';
  src: url('fonts/OPTIAuvantGothic-Bold.otf') format('opentype');
}
@font-face {
  font-family: 'OPTIAuvantGothic-DemiBold';
  src: url('fonts/OPTIAuvantGothic-DemiBold.otf') format('opentype');
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  background: #f1f1f1;
  color: #121212;
  font-family: 'HelveticaNowText-Light', Arial, sans-serif;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9000;
  opacity: 1;
  text-align: center;
  padding: 14px;
  background: transparent;
  pointer-events: auto;
}
.header-content h1 {
  font-family: 'OPTIAuvantGothic-DemiBold', Arial, sans-serif;
  font-size: 1rem;
  margin: 0; 
}
.header-line {
  background-color: #121212;
  height: 1.4px;
  width: 100%;
  margin-top: 13px;
}
header .header-content {
  opacity: 0;
  transform: translateY(12vh);
  transition: opacity 1.2s cubic-bezier(.7,0,.5,1), transform 1.1s cubic-bezier(.7,0,.5,1);
}
header.header-animated .header-content {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: Auch den Strich mit einblenden */
.header-content .header-line {
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(.7,0,.5,1) 0.0s; /* etwas später als Text */
}
header.header-animated .header-content .header-line {
  opacity: 1;
}



.menu-nav ul li a:focus {
  outline: none;
  box-shadow: none;
}

/* MENU-TOGGLE */
.menu-toggle {
  position: fixed;
  left: 20px;
  top: 13px;
  width: 26px;
  height: 26px;
  z-index: 10001;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: auto;
  transform: translateY(80px);
  transition: opacity 1.2s cubic-bezier(.7,0,.5,1), transform 1s cubic-bezier(.7,0,.5,1);
  pointer-events: auto;
  display: block;
  box-sizing: content-box;
  padding: 12px;                  /* +24px Breite/Höhe → Ziel ca. 44px je Dimension */
  margin: -12px
}

/* LANGUAGE TOGGLE (rechts, gespiegelt zum Menu-Icon) */
.lang-toggle {
  position: fixed;
  right: 20px;
  top: 13px;
  height: 26px;

  z-index: 10001;
  display: flex;
  align-items: center;
  gap: 8px;

  /* exakt wie Footer */
  font-family: 'HelveticaNowText-Light', Arial, sans-serif;
  font-size: 0.7rem;
  color: #121212;

  /* gleiche "Touch-Zone" & Spiegelung wie menu-toggle */
  box-sizing: content-box;
  padding: 12px;
  margin: -12px;

  /* gleiche Intro-Animation wie menu-toggle */
  opacity: 0;
  transform: translateY(80px);
  transition: opacity 1.2s cubic-bezier(.7,0,.5,1), transform 1s cubic-bezier(.7,0,.5,1);

  user-select: none;
  pointer-events: auto;
}

body.header-animated .lang-toggle {
  opacity: 1;
  transform: translateY(0);
}

.lang-toggle .lang-link {
  color: inherit;
  text-decoration: none;
  line-height: 1;
}

.lang-toggle .lang-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lang-toggle .lang-sep {
  opacity: 0.8;
  line-height: 1;
}


header.header-animated ~ .menu-toggle,
.header-animated + .menu-toggle {
  /* General sibling: sobald header animiert ist, animiere Icon auch */
  opacity: 1;
  transform: translateY(0px);
}

/* Fallback (sollte das CSS nicht greifen, s. Hinweis unten) */
body.header-animated .menu-toggle {
  opacity: 1;
  transform: translateY(0);
}

.glass-blur {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  /* Höhe exakt so groß wie der Abstand vom oberen Rand bis zum unteren Rand des .header-line */
  height: calc(17px + 1.2em + 13px + 1.4px); /* padding oben + h1 + margin-top + line-höhe */
  z-index: 8999; /* Muss unter header-content (z-index: 9000) liegen! */
  background: #f1f1f10b; /* Weiß-milchig */
  backdrop-filter: blur(13px) saturate(0.7) brightness(1);
  -webkit-backdrop-filter: blur(13px) saturate(0.7) brightness(1);
  pointer-events: none;
}
.header-content, .header-line, .header-content h1 {
  position: relative;
  z-index: 9000;
}




/* MAIN + AUDIO-PAGE */
main {
  width: 100%;
  padding-top: 92px; /* Platz für Header */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1 0 auto;
  min-height: 72vh;
  position: relative;
}

.audio-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0 40px;
  opacity: 1;
  pointer-events: all;
  min-height: 600px;
}

footer {
  flex-shrink: 0;
  opacity: 1;
  text-align: center;
  font-family: 'HelveticaNowText-Light', Arial, sans-serif;
  font-size: 0.7rem;
  padding: 10px 0 10px 0;
  color: #121212;
}

/* ======= KLANGARCHIV SECTIONS: COLOMBIA/BERLIN ======= */
:root{
  --karchiv-hover-dur: 0.9s;
  --karchiv-hover-ease: cubic-bezier(.7,0,.5,1);
}

.colombia-container, .berlin-container, .betlem-container, .bolivia-container {
  width: 100%;
  min-height: 480px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-end;
  margin: 10px 0 30px 0;
  position: relative;
}

/* Gemeinsame Gruppe für Text + Bild */
.colombia-group, .berlin-group, .betlem-group, .bolivia-group {
  position: relative;
  display: inline-block;
}

/* Bild */
.colombia-image, .berlin-image, .betlem-image, .bolivia-image {
  display: block;
  width: 540px;
  height: auto;
  object-fit: cover;
  z-index: 1;
}

.berlin-image {
  width: 480px;
}
.berlin-group .karchiv-img-frame{
  margin-left: -192px; /* gleiche Optik wie vorher, aber ohne Bild-Cut */
}

.betlem-image {
  width: 610px;
}

.bolivia-image {
  width: 520px;
}

/* ======= KLANGARCHIV: Hover-Zoom (Frame bleibt fix) ======= */
.karchiv-img-frame{
  display: inline-block;
  overflow: hidden;      /* <- das ist der “fixe Rahmen” */
  line-height: 0;        /* verhindert kleine Inline-Gaps */
}

.karchiv-img-zoom{
  display: block;
  transform: scale(1);
  transform-origin: 50% 50%;
  transition: transform var(--karchiv-hover-dur) var(--karchiv-hover-ease);
  will-change: transform;
}

/* Hover ODER Tastatur-Fokus (weil deine Text-Layer tabindex haben) */
.karchiv-entry:hover .karchiv-img-zoom,
.karchiv-entry:focus-within .karchiv-img-zoom{
  transform: scale(1.1); /* +10% */
}

@media (prefers-reduced-motion: reduce){
  .karchiv-img-zoom{ transition: none; }
}

/* Text-Gruppe liegt absolut über dem Bild */
.colombia-text-group, .berlin-text-group, .betlem-text-group, .bolivia-text-group {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none; /* sorgt dafür, dass nur die Kind-Elemente selbst klickbar sind */
}

/* Schwarzer/weißer Text: Overlap-Look */
.colombia-text, .berlin-text, .betlem-text, .bolivia-text {
  position: absolute;
  font-family: 'OPTIAuvantGothic-Bold', Arial, sans-serif;
  font-size: 8vw;
  white-space: nowrap;
  user-select: none;
  line-height: 1;
  pointer-events: auto;
}

.colombia-text {
  top: 400px;      /* Feinjustierung für Y-Position */
  left: -25.97vw;     /* Feinjustierung für X-Position */
}

.berlin-text {
  top: 380px;      /* Feinjustierung für Y-Position */
  right: -10.3vw;     /* Feinjustierung für X-Position */
}

.betlem-text {
  bottom: 30px;      /* Feinjustierung für Y-Position */
  left: -16.1vw;     /* Feinjustierung für X-Position */
}

.bolivia-text {
  bottom: 260px;      /* Feinjustierung für Y-Position */
  right: -18.5vw;     /* Feinjustierung für X-Position */
}

.colombia-text-black, .berlin-text-black, .betlem-text-black, .bolivia-text-black {
  color: #121212;
  z-index: 2;
}
.colombia-text-white {
  color: #845053;
  z-index: 3;
  clip-path: inset(0 0 0 25.97vw);
}
.berlin-text-white {
  color: #c6cdc2;
  z-index: 3;
  clip-path: inset(0 10.31vw 0 0);
}
.betlem-text-white {
  color: #7c97af;
  z-index: 3;
  clip-path: inset(0 0 0 16.11vw);
}
.bolivia-text-white {
  color: #b29f23;  /* golden monkey: 887111; 424D33*/ 
  z-index: 3;
  clip-path: inset(0 18.5vw 0 0);
}

/* ======= KLANGARCHIV: Title Hover -> Akzentfarbe füllt komplett ======= */

/* Gleiche Bewegung wie Bild-Zoom */
.colombia-text-white,
.berlin-text-white,
.betlem-text-white,
.bolivia-text-white{
  transition:
    clip-path var(--karchiv-hover-dur) var(--karchiv-hover-ease),
    -webkit-clip-path var(--karchiv-hover-dur) var(--karchiv-hover-ease);
  will-change: clip-path;
}

/* COLOMBIA: Hover auf schwarz ODER auf Akzent-Teil => Akzent füllt komplett */
.colombia-text-white:hover,
.colombia-text-black:hover ~ .colombia-text-white,
.colombia-text-white:focus-visible,
.colombia-text-black:focus-visible ~ .colombia-text-white{
  clip-path: inset(0);
}

/* BERLIN */
.berlin-text-white:hover,
.berlin-text-black:hover ~ .berlin-text-white,
.berlin-text-white:focus-visible,
.berlin-text-black:focus-visible ~ .berlin-text-white{
  clip-path: inset(0);
}

/* BETLEM */
.betlem-text-white:hover,
.betlem-text-black:hover ~ .betlem-text-white,
.betlem-text-white:focus-visible,
.betlem-text-black:focus-visible ~ .betlem-text-white{
  clip-path: inset(0);
}

/* BOLIVIA */
.bolivia-text-white:hover,
.bolivia-text-black:hover ~ .bolivia-text-white,
.bolivia-text-white:focus-visible,
.bolivia-text-black:focus-visible ~ .bolivia-text-white{
  clip-path: inset(0);
}

/* Wenn man irgendwo in der Kachel hovert (auch nur Bild), füllt sich der Titel komplett */
.karchiv-entry:hover .colombia-text-white,
.karchiv-entry:hover .berlin-text-white,
.karchiv-entry:hover .betlem-text-white,
.karchiv-entry:hover .bolivia-text-white,
.karchiv-entry:focus-within .colombia-text-white,
.karchiv-entry:focus-within .berlin-text-white,
.karchiv-entry:focus-within .betlem-text-white,
.karchiv-entry:focus-within .bolivia-text-white{
  clip-path: inset(0);
}

/* Optional: bei Reduced Motion keine Animation */
@media (prefers-reduced-motion: reduce){
  .colombia-text-white,
  .berlin-text-white,
  .betlem-text-white,
  .bolivia-text-white{
    transition: none;
  }
}

/* Symmetrische Gruppen-Positionierung: Abstand vom Rand */
.colombia-group { margin-right: 2vw; }
.bolivia-group { margin-right: 48vw; }
.berlin-group   { margin-right: 52vw; }
.betlem-group   { margin-right: 10vw; margin-top: 40px}

.betlem-text-black,
.betlem-text-white,
.berlin-text-black,
.berlin-text-white,
.colombia-text-black,
.colombia-text-white,
.bolivia-text-black,
.bolivia-text-white {
  pointer-events: auto;
}


/* ======= MENU OVERLAY ======= */
.menu-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.87);
  opacity: 0;
  pointer-events: none;
  z-index: 12000;
  transition: opacity 0.18s;
  display: none;
}
/* ==== REVERT: Kein sichtbarer Fokus-Rahmen im Menü-Overlay =================== */
.menu-overlay .menu-nav ul li a:focus-visible,
.menu-overlay .menu-nav ul li a:focus {
  outline: none !important;
  box-shadow: none !important;
}

.menu-close {
  position: absolute;
  left: 20px;
  top: 13px;
  width: 26px;
  height: 26px;
  z-index: 13000;
  cursor: pointer;
  background: none;
  border: none;
  opacity: 1;
  transition: opacity 0.4s;
  display: block;
  box-sizing: content-box;
  padding: 12px;
  margin: -12px;
}
.menu-close:active {
  opacity: 0.6;
}
body.menu-open .menu-toggle {
  display: none;
}
body.menu-open .menu-overlay {
  opacity: 1;
  pointer-events: all;
  display: block;
}
.menu-nav {
  position: absolute;
  top: 80px;
  left: 20px;
}
.menu-nav ul {
  list-style: none;
  margin: 0; padding: 0;
}
.menu-nav ul li {
  margin: 20px 0;
  opacity: 0;
  transform: translateY(-20px);
  animation-fill-mode: forwards;
  animation-duration: 0.72s;
  animation-timing-function: ease-in-out;
}
.menu-item { animation-name: fadeSlideInQuick;}
@keyframes fadeSlideInQuick {
  0%   { opacity: 0; transform: translateY(-20px);}
  100% { opacity: 1; transform: translateY(0);}
}
.menu-nav ul li a {
  color: #f1f1f1;
  text-decoration: none;
  font-size: 1.4rem;
  font-family: 'HelveticaNowText-Medium', Arial, sans-serif;
}
.menu-footer {
  position: absolute;
  left: 26px;
  bottom: 30px;
  color: #f1f1f1;
  font-family: 'HelveticaNowText-Medium', Arial, sans-serif;
  font-size: 0.8rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s;
  letter-spacing: 0.01em;
  z-index: 13000;
}
body.menu-open .menu-footer {
  opacity: 1;
  pointer-events: auto;
}

.klangraum-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2vw;
  margin: 220px auto 1px auto;
  width: fit-content;
  min-height: 2.6em; /* verhindert, dass das Bild aus der Reihe fällt */
}

.klangraum-text {
  font-family: 'OPTIAuvantGothic-Bold', Arial, sans-serif;
  font-size: 1.5rem;
  line-height: 1.05;
  letter-spacing: 0.05em;
  color: #121212;
  text-align: left;
  white-space: pre-line;
  display: flex;         /* NEU: für bessere Mitte */
  align-items: center;   /* NEU */
  height: 4em;         /* Gleiche Höhe wie das Bild */
}

.klangraum-img {
  height: 8.6em;
  margin-top: 0em;
  margin-bottom: 1em;
  width: auto;
  vertical-align: middle;
  object-fit: contain;
  display: inline-block;

  transform: translateY(1vh);
}

/* Animation ist wie bei karchiv-fadein */



/* ======= RESPONSIVE: max-width: 780px ======= */
/* ===== Mobile Reset für Klangarchiv (nur bis 780px) ===== */
@media (max-width: 780px) {
  main {
    padding-top: 14px;
  }
  .audio-page {
    padding: 0;
  }

  /* 1) Container: zentriert, keine Überstände */
  .colombia-container,
  .berlin-container,
  .betlem-container,
  .bolivia-container {
    flex-direction: column;
    align-items: center;            /* statt flex-start */
    justify-content: flex-start;
     min-height: auto;
    width: 100%;
    margin: 0px 0px 0 0;             /* neutraler Außenabstand */
    padding: 0;                      /* kein Innenabstand */
    /*overflow: hidden;                /* falls Overlays “ausmalen” wollen */
  }
  .bolivia-container {
    margin-top: calc(17px + 1.2em + 13px + 1.4px);
  }

  /* 2) Group: gibt die Breite vor (80vw/svw) und ist Positionierungs-Referenz */
  .colombia-group,
  .berlin-group,
  .betlem-group,
  .bolivia-group {
    position: relative;
    display: block;                  /* statt inline-block → saubere Breite */
    width: min(100svw, 100%);         /* iOS-sicher; nicht breiter als Spalte */
    margin: 0 auto;                  /* zentriert */
  }
  /* Fallback für Browser ohne svw */
  @supports not (width: 1svw) {
    .colombia-group,
    .berlin-group,
    .betlem-group,
    .bolivia-group { width: min(100vw, 100%); }
  }

  /* 3) Bild: füllt die Group-Breite, keine negativen Margins */
  .colombia-image,
  .berlin-image,
  .betlem-image,
  .bolivia-image {
    display: block;
    width: 100%;                     /* skaliert in Group */
    max-width: 100%;
    height: auto;
    margin: 0;                       /* << entfernt 0 -20px 0 20px */
    object-fit: cover;
  }

  .karchiv-img-frame{
    display: block;
    width: 100%;
  }

  .berlin-group .karchiv-img-frame{
    margin-left: 0;
  }

  /* 4) Overlay-Fläche: an Group kleben, Inhalt beschneiden */
  .colombia-text-group,
  .berlin-text-group,
  .betlem-text-group,
  .bolivia-text-group {
    position: absolute;
    inset: 0;                        /* top/right/bottom/left: 0 */
    overflow: hidden;                /* schützt vor horizont. Overflow */
    pointer-events: none;
  }

  /* 5) Texte: neutral positionieren; keine großen +/-vw Offsets */
  .colombia-text,
  .berlin-text,
  .betlem-text,
  .bolivia-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* mittig im Overlay */
    margin: 0;                         /* << entfernt -50px etc. */
    white-space: nowrap;
    line-height: 1;
    font-size: clamp(20px, 9svw, 56px);
    pointer-events: auto;
    overflow: hidden;
  }
  @supports not (width: 1svw) {
    .colombia-text,
    .berlin-text,
    .betlem-text,
    .bolivia-text { font-size: clamp(20px, 9vw, 56px); }
  }

  /* 6) Clip-Paths/Rest-Offsets für Mobile neutralisieren */
  .colombia-text-white,
  .berlin-text-white,
  .betlem-text-white,
  .bolivia-text-white { clip-path: none; }

  .colombia-text,
  .berlin-text,
  .betlem-text,
  .bolivia-text { top: 50%; right: auto; bottom: auto; left: 50%; }

  /* 7) Desktop-Margins auf Mobile neutralisieren */
  .colombia-group, 
  .berlin-group,
  .betlem-group   { margin: 0px 0 0 0;}
  .bolivia-group  { margin: 0 0 0 0;}

  /* 8) Main-Polster klein halten, damit 80vw immer reinpasst */
  main { padding-inline: 0px; }     /* statt 20px – optional */

.klangraum-img{
  margin: 0 0px 1em 0;
  height: 4.6em;
}

.klangraum-row{
  margin: 100px auto 1px auto;
  padding-left: 18px;
}
.lang-toggle { font-size: 10px; }
}


/* ======= UTILITIES ======= */
body.menu-open header,
body.menu-open main,
body.menu-open footer,
body.menu-open .audio-page {
  filter: blur(12px);
  transition: filter 0.15s;
}

.karchiv-fadein {
  opacity: 0;
  transform: translateY(40vh);
  transition: opacity 2.5s cubic-bezier(.7,0,.5,1), transform 1.4s cubic-bezier(.7,0,.5,1);
  will-change: opacity, transform;
}
.karchiv-fadein.visible {
  opacity: 1;
  transform: translateY(0);
}


/* === Debug Panels === */
#chla-debug { position: fixed; inset: 0; pointer-events: none; z-index: 9999; }
#chla-debug.chla-hidden .chla-panel { display: none; }
.chla-panel {
  position: absolute; pointer-events: auto; font: 12px/1.3 system-ui, Arial, sans-serif;
  color: #0f0f0f; background: rgba(240, 240, 240, 0.699); border: 1px solid #ffffff3d; border-radius: 0px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.449); padding: 10px 12px; width: 360px; max-height: 46vh; overflow:auto;
}
#panel-analysis { top: 12px; left: 12px; }
#panel-modes    { top: 12px; right: 12px; width: 420px; }
#panel-meter    { bottom: 12px; left: 12px; width: 360px; height: 170px; }
#panel-meter canvas { width: 100%; height: 120px; display:block; background:#fff; border:1px solid #ddd; }

#chla-overlay { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; }

.chla-row { display: flex; gap: 14px; margin: 6px 0; }
.chla-kv  { display:flex; gap:8px; align-items:baseline; margin:2px 0; }
.chla-kv > span:first-child { color:#333; min-width: 140px; }
.chla-small { color:#666; font-size:11px; }
.chla-list { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:8px; display:flex; flex-wrap:wrap; gap:8px; }
.chla-badge { padding:2px 6px; border-radius:0px; background:#d7d7d7; }
.chla-badge strong { margin-right:6px; }

.chla-modes-list { display:grid; grid-template-columns: repeat(2, minmax(160px,1fr)); gap:6px; margin-top:6px; }
.chla-mode-item { display:flex; align-items:center; gap:6px; font-family: ui-monospace, monospace; }
.chla-swatch { width:12px; height:12px; border-radius:3px; border:1px solid rgba(0,0,0,0.15); }
.chla-sub { margin-top:8px; color:#333; font-weight:600; }
.chla-coupling { display:flex; flex-direction:column; gap:4px; font: 11px ui-monospace, monospace; }

/* Skalenbeschriftung Meter */
#chla-meter-scale { margin-top:4px; display:flex; justify-content:space-between; font-size:10px; color:#666; }