:root { /* global values */
    --black: #000000; 
    --white: #e8e8e8;
    --light-grey: #000000; 
    --red: #ff0000; 
    --orange: #FF5C00;
    --green: #00ff00;
    --neonblue: #0000ff;
    --yellow: #c3ff00;
    --color-default: #ff0000; /* color default */
    --titel: 2rem; 
    --untertitel: 1.5rem; 
    --lauftext: 1rem; 
    --bildunterschrift: 0.75rem;
    --grid-columns: 1;
    --gutter: 0px;
    --margin: 0px;
    --gap: 30px;
}

html {
  user-select: none;
}

body.page-home {
    padding-top: 10px;
}

@font-face {
    font-family: 'Epson MX-80';
    src: url('../fonts/epson-mx-80/epson-mx-80-t-e-z.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.news-ticker {
    background-color: #000000;
    border-bottom: 1px solid #ff0000;
    padding: 6px 0;
    overflow: hidden;
    white-space: nowrap;
    font-family: 'Epson MX-80', monospace;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

.news-ticker-content {
    display: inline-block;
    padding-left: 100%;
    animation: ticker 50s linear infinite;
    color: #ffffff;
    font-size: 0.9rem;
}

@keyframes ticker {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* overlay-01: Filmpodium */
.img-01-01 { grid-column: 1 / 4 !important; } 
.img-01-02 { grid-column: 1 / 3 !important; }  
.img-01-03 { grid-column: 3 / 4 !important; } 
.img-01-04 { grid-column: 2 / 4 !important; } 

/* overlay-02: Zuhause */
.img-02-01 { grid-column: 1 / 3 !important; }   
.img-02-02 { grid-column: 1 / 2 !important; }   
.img-02-03 { grid-column: 2 / 3 !important; }   
.img-02-04 { grid-column: 3 / 4 !important; }   
.img-02-05 { grid-column: 1 / 2 !important; }   
.img-02-06 { grid-column: 2 / 3 !important; }   
.img-02-07 { grid-column: 3 / 4 !important; }   

/* overlay-03: Magazin Beobachter*in */
.img-03-01 { grid-column: 2 / 4 !important; }
.img-03-02 { grid-column: 1 / 3 !important; }
.img-03-03 { grid-column: 3 / 4 !important; }
.img-03-04 { grid-column: 1 / 4 !important; }
.img-03-05 { grid-column: 1 / 2 !important; }
.img-03-06 { grid-column: 2 / 4 !important; }

/* overlay-04: Horizonte */
.img-04-01 { grid-column: 1 / 4 !important; }
.img-04-02 { grid-column: 1 / 4 !important; }
.img-04-03 { grid-column: 3 / 4 !important; }
.img-04-04 { grid-column: 1 / 4 !important; }
.img-04-05 { grid-column: 1 / 4 !important; }
.img-04-06 { grid-column: 1 / 3 !important; }
.img-04-07 { grid-column: 2 / 4 !important; }

/* overlay-05: Stuhlskulptur */
.img-05-01 { grid-column: 1 / 3 !important; }
.img-05-02 { grid-column: 3 / 4 !important; }
.img-05-03 { grid-column: 1 / 2 !important; }
.img-05-04 { grid-column: 2 / 4 !important; }
.img-05-05 { grid-column: 1 / 4 !important; }
.img-05-06 { grid-column: 1 / 2 !important; }
.img-05-07 { grid-column: 2 / 4 !important; }
.img-05-08 { grid-column: 1 / 4 !important; }
.img-05-09 { grid-column: 1 / 3 !important; }
.img-05-10 { grid-column: 3 / 4 !important; }
.img-05-11 { grid-column: 1 / 4 !important; }
.img-05-12 { grid-column: 1 / 4 !important; }
.img-05-13 { grid-column: 1 / 3 !important; }
.img-05-14 { grid-column: 2 / 4 !important; }
.img-05-15 { grid-column: 1 / 4 !important; }
.img-05-16 { grid-column: 1 / 3 !important; }
.img-05-17 { grid-column: 3 / 4 !important; }
.img-05-18 { grid-column: 1 / 2 !important; }
.img-05-19 { grid-column: 2 / 4 !important; }

/* overlay-06: Kali Trio */
.img-06-01 { grid-column: 1 / 2 !important; }
.img-06-02 { grid-column: 2 / 4 !important; }
.img-06-03 { grid-column: 1 / 4 !important; }

/* overlay-07: REM */
.img-07-01 { grid-column: 1 / 2 !important; }
.img-07-02 { grid-column: 2 / 3 !important; }
.img-07-03 { grid-column: 3 / 4 !important; }
.img-07-04 { grid-column: 1 / 2 !important; }
.img-07-05 { grid-column: 2 / 3 !important; }
.img-07-06 { grid-column: 3 / 4 !important; }
.img-07-07 { grid-column: 1 / 2 !important; }
.img-07-08 { grid-column: 2 / 3 !important; }

/* overlay-08: Flavia Schweizer */
.img-08-01 { grid-column: 2 / 4 !important; }
.img-08-02 { grid-column: 2 / 4 !important; }
.img-08-03 { grid-column: 2 / 4 !important; }
.img-08-04 { grid-column: 2 / 4 !important; }

/* overlay-09: Daniela */
.img-09-01 { grid-column: 1 / 3 !important; }
.img-09-02 { grid-column: 3 / 4 !important; }
.img-09-03 { grid-column: 2 / 3 !important; }
.img-09-05 { grid-column: 1 / 2 !important; }
.img-09-06 { grid-column: 2 / 4 !important; }

/* overlay-10: NSO */
.img-10-01 { grid-column: 1 / 4 !important; }

/* overlay-11: Nebno */
.img-11-01 { grid-column: 1 / 4 !important; }
.img-11-02 { grid-column: 1 / 3 !important; }
.img-11-03 { grid-column: 3 / 4 !important; }
.img-11-04 { grid-column: 1 / 2 !important; }

/* overlay-12: Schulhaus Obererlen Naefels */
.img-12-01 { grid-column: 1 / 4 !important; }
.img-12-02 { grid-column: 1 / 4 !important; }
.img-12-03 { grid-column: 1 / 4 !important; }
.img-12-04 { grid-column: 1 / 4 !important; }
.img-12-05 { grid-column: 1 / 4 !important; }
.img-12-06 { grid-column: 1 / 4 !important; }

/* overlay-13: Diplomausstellung */
.img-13-01 { grid-column: 1 / 3 !important; }
.img-13-02 { grid-column: 3 / 4 !important; }
.img-13-03 { grid-column: 1 / 2 !important; }
.img-13-04 { grid-column: 2 / 4 !important; }
.img-13-05 { grid-column: 3 / 4 !important; }
.img-13-06 { grid-column: 1 / 3 !important; }
.img-13-07 { grid-column: 3 / 4 !important; }

/* overlay-14: Aarebrücke */
.img-14-01 { grid-column: 2 / 4 !important; }
.img-14-02 { grid-column: 1 / 2 !important; }
.img-14-03 { grid-column: 1 / 4 !important; }
.img-14-04 { grid-column: 1 / 4 !important; }
.img-14-05 { grid-column: 3 / 4 !important; }
.img-14-06 { grid-column: 1 / 3 !important; }
.img-14-07 { grid-column: 1 / 4 !important; }
.img-14-08 { grid-column: 1 / 4 !important; }
.img-14-09 { grid-column: 1 / 4 !important; }

/* overlay-15: Ines Boesch 2025 */
.img-15-01 { grid-column: 3 / 4 !important; }
.img-15-02 { grid-column: 1 / 3 !important; }
.img-15-03 { grid-column: 2 / 4 !important; }
.img-15-04 { grid-column: 1 / 3 !important; }
.img-15-05 { grid-column: 3 / 4 !important; }

/* overlay-16: Ruben Boesch */
.img-16-01 { grid-column: 2 / 4 !important; }
.img-16-02 { grid-column: 1 / 2 !important; }
.img-16-03 { grid-column: 2 / 3 !important; }
.img-16-04 { grid-column: 3 / 4 !important; }
.img-16-06 { grid-column: 1 / 2 !important; }
.img-16-07 { grid-column: 2 / 4 !important; }

/* Ooerlay-17: V+V */
.img-17-01 { grid-column: 1 / 3 !important; }
.img-17-02 { grid-column: 1 / 2 !important; }
.img-17-03 { grid-column: 2 / 4 !important; }
.img-17-04 { grid-column: 1 / 4 !important; }
.img-17-05 { grid-column: 1 / 2 !important; }
.img-17-06 { grid-column: 2 / 3 !important; }
.img-17-07 { grid-column: 3 / 4 !important; }
.img-17-08 { grid-column: 1 / 3 !important; }
.img-17-10 { grid-column: 3 / 4 !important; }
.img-17-11 { grid-column: 1 / 2 !important; }
.img-17-12 { grid-column: 2 / 3 !important; }
.img-17-13 { grid-column: 3 / 4 !important; }
.img-17-14 { grid-column: 1 / 2 !important; }
.img-17-15 { grid-column: 2 / 4 !important; }
.img-17-16 { grid-column: 1 / 4 !important; }
.img-17-17 { grid-column: 1 / 2 !important; }
.img-17-18 { grid-column: 2 / 4 !important; }
.img-17-19 { grid-column: 3 / 4 !important; }
.img-17-20 { grid-column: 1 / 3 !important; }

/* overlay-18: Ines Boesch 2023 */
.img-18-01 { grid-column: 1 / 2 !important; }
.img-18-02 { grid-column: 2 / 4 !important; }
.img-18-03 { grid-column: 1 / 2 !important; }
.img-18-04 { grid-column: 3 / 4 !important; }
.img-18-05 { grid-column: 1 / 3 !important; }
.img-18-06 { grid-column: 3 / 4 !important; }

/* overlay-19: Marai */
.img-19-01 { grid-column: 1 / 2 !important; }
.img-19-02 { grid-column: 2 / 4 !important; }
.img-19-03 { grid-column: 3 / 4 !important; }
.img-19-04 { grid-column: 1 / 4 !important; }
.img-19-05 { grid-column: 1 / 2 !important; }
.img-19-06 { grid-column: 2 / 3 !important; }
.img-19-07 { grid-column: 3 / 4 !important; }
.img-19-08 { grid-column: 1 / 3 !important; }
.img-19-10 { grid-column: 2 / 4 !important; }
.img-19-11 { grid-column: 1 / 2 !important; }
.img-19-12 { grid-column: 2 / 3 !important; }
.img-19-13 { grid-column: 3 / 4 !important; }
.img-19-14 { grid-column: 1 / 2 !important; }
.img-19-15 { grid-column: 2 / 4 !important; }
.img-19-16 { grid-column: 1 / 4 !important; }
.img-19-17 { grid-column: 1 / 2 !important; }
.img-19-18 { grid-column: 2 / 4 !important; }
.img-19-19 { grid-column: 1 / 2 !important; }

/* overlay-20: Valentin Egli Terrazzo Tisch */
.img-20-01 { grid-column: 3 / 4 !important; }
.img-20-02 { grid-column: 1 / 2 !important; }
.img-20-03 { grid-column: 2 / 4 !important; }
.img-20-04 { grid-column: 1 / 3 !important; }
.img-20-05 { grid-column: 2 / 3 !important; }
.img-20-06 { grid-column: 3 / 4 !important; }
.img-20-07 { grid-column: 1 / 3 !important; }
.img-20-08 { grid-column: 3 / 4 !important; }

/* overlay-21: True */
.img-21-01 { grid-column: 1 / 3 !important; }
.img-21-02 { grid-column: 3 / 4 !important; }
.img-21-03 { grid-column: 1 / 2 !important; }
.img-21-04 { grid-column: 2 / 4 !important; }
.img-21-05 { grid-column: 1 / 4 !important; }

/* overlay-22: now */
.img-22-01 { grid-column: 1 / 4 !important; }

/* overlay-23: Haubi Universe */
.img-23-01 { grid-column: 1 / 3 !important; }
.img-23-02 { grid-column: 3 / 4 !important; }
.img-23-03 { grid-column: 1 / 4 !important; }
.img-23-04 { grid-column: 2 / 3 !important; }
.img-23-05 { grid-column: 2 / 3 !important; }

/* overlay-24: Move */
.img-24-01 { grid-column: 1 / 3 !important; }
.img-24-02 { grid-column: 3 / 4 !important; }
.img-24-03 { grid-column: 1 / 4 !important; }
.img-24-04 { grid-column: 1 / 4 !important; }
.img-24-05 { grid-column: 3 / 4 !important; }
.img-24-06 { grid-column: 2 / 4 !important; }
.img-24-07 { grid-column: 1 / 2 !important; }
.img-24-08 { grid-column: 1 / 4 !important; }
.img-24-09 { grid-column: 1 / 4 !important; }

/* overlay-25: Gregory */
.img-25-01 { grid-column: 1 / 4 !important; }
.img-25-02 { grid-column: 1 / 2 !important; }
.img-25-03 { grid-column: 2 / 4 !important; }

/* overlay-26: Klamott Athen */
.img-26-01 { grid-column: 1 / 3 !important; }
.img-26-02 { grid-column: 3 / 4 !important; }
.img-26-03 { grid-column: 1 / 2 !important; }
.img-26-04 { grid-column: 2 / 4 !important; }
.img-26-05 { grid-column: 1 / 4 !important; }
.img-26-06 { grid-column: 1 / 2 !important; }
.img-26-07 { grid-column: 2 / 4 !important; }
.img-26-08 { grid-column: 1 / 4 !important; }
.img-26-09 { grid-column: 1 / 3 !important; }
.img-26-10 { grid-column: 3 / 4 !important; }
.img-26-11 { grid-column: 1 / 4 !important; }

/* overlay-27: Divr */
.img-27-01 { grid-column: 2 / 4 !important; }
.img-27-02 { grid-column: 1 / 2 !important; }
.img-27-03 { grid-column: 3 / 4 !important; }
.img-27-04 { grid-column: 2 / 3 !important; }
.img-27-05 { grid-column: 1 / 3 !important; }

/* overlay-28: Salat */
.img-28-01 { grid-column: 2 / 4 !important; }
.img-28-02 { grid-column: 1 / 3 !important; }
.img-28-03 { grid-column: 3 / 4 !important; }
.img-28-04 { grid-column: 1 / 2 !important; }
.img-28-05 { grid-column: 3 / 4 !important; }
.img-28-06 { grid-column: 1 / 3 !important; }

/* overlay-29: Y */ 
.img-29-01 { grid-column: 1 / 3 !important; }
.img-29-02 { grid-column: 3 / 4 !important; }
.img-29-03 { grid-column: 1 / 4 !important; }
.img-29-04 { grid-column: 1 / 2 !important; }
.img-29-05 { grid-column: 1 / 2 !important; }
.img-29-06 { grid-column: 2 / 4 !important; }
.img-29-07 { grid-column: 3 / 4 !important; }
.img-29-08 { grid-column: 1 / 2 !important; }
.img-29-09 { grid-column: 2 / 3 !important; }
.img-29-10 { grid-column: 3 / 4 !important; }
.img-29-11 { grid-column: 1 / 2 !important; }
.img-29-12 { grid-column: 2 / 4 !important; }
.img-29-13 { grid-column: 1 / 4 !important; }

/* overlay-30, Eden Walser Ruther */
.img-30-01 { grid-column: 2 / 4 !important; }
.img-30-02 { grid-column: 1 / 2 !important; }
.img-30-03 { grid-column: 3 / 4 !important; }
.img-30-04 { grid-column: 2 / 3 !important; }

/* overlay-31, Dalia Donadio */
.img-31-01 { grid-column: 1 / 3 !important; }
.img-31-02 { grid-column: 2 / 4 !important; }

/* overlay-32: Klamott, Kollektion 2021 */ 
.img-32-01 { grid-column: 1 / 3 !important; }
.img-32-02 { grid-column: 3 / 4 !important; }
.img-32-03 { grid-column: 2 / 4 !important; }
.img-32-04 { grid-column: 1 / 2 !important; }
.img-32-05 { grid-column: 2 / 4 !important; }
.img-32-06 { grid-column: 1 / 3 !important; }
.img-32-07 { grid-column: 3 / 4 !important; }
.img-32-08 { grid-column: 1 / 4 !important; }


@font-face { /* font: TeX Gyre Heros, regular */
  font-family: "text-gyre";
  src: url("/fonts/texgyreheros/texgyreheros-regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap; 
}

@font-face { /* font: TeX Gyre Heros, regular condensed */
  font-family: "text-gyre";
  src: url("/fonts/texgyreheros/texgyreheroscn-regular.otf") format("opentype");
  font-weight: normal;
  font-stretch: condensed;
  font-display: swap; 
}

html, body {
    overflow-x: hidden;
}

html { 
    margin: 0;
    border: 0;                     
    padding: 0;                     
    height: 100%;  
    width: 100%;   
    user-select: text;
    background-color: var(--black);
    color: var(--blue);   
    overflow-y: auto;  
    max-width: none;
    scroll-behavior: smooth;
}

body { overflow-x: hidden; }

html.no-scroll,
body.no-scroll {
    overflow: hidden;
}

body.no-scroll .nav-inner {
  display: none;
}

@media (max-width: 480px) {
  body.no-scroll .nav-inner {
    display: none;
  }
}

img { /* images */
    max-width: 100%;
    user-select: none;
}   

video, iframe { /* videos */
    max-width: 100%;
    padding: none;
}

::-webkit-scrollbar { /* scrollbar */
    width: 0px;   
}

::-webkit-scrollbar-thumb {
    background: transparent;  
}

::-webkit-scrollbar-thumb:hover {
    background: transparent;    
}

::-webkit-scrollbar-corner {    
    background: transparent;     
}

::selection {
  background-color: rgba(255, 255, 255, 0.2);
  color: inherit;
}

::-moz-selection {
  background-color: rgba(255, 255, 255, 0.2);
  color: inherit;
}

a { /* links */
    text-decoration: none;
    color: var(--white);
    user-select: none;
    cursor: pointer;
}

.container-main { 
    max-width: 50%;
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 2fr);
    column-gap: var(--gutter);
    padding: 0 var(--margin);
    gap: var(--gap);
}

@media (max-width: 480px) {
  .container-main { 
      max-width: 100%;
      display: grid;
      grid-template-columns: 1fr;
      column-gap: 0;
      gap: 10px;
      padding: 70px 2px 70px 2px;
      justify-items: center;
  } 
}

mechanical-ragger {
  hyphens: auto;
  hyphens: manual;
  --ragging-width: 2rem;
}

@media (max-width: 480px) {
  mechanical-ragger { 
    --ragging-width: 0rem;
  } 
}

.container-text-main {
  padding-top: 10px;
  position: fixed;
  top: 1%;
  left: 52%;
  right: 5%;
  font-size: 1.2rem;
  line-height: 1.7rem;
  font-family: "text-gyre";
  font-style: "condensed";
  color: var(--color-default);
}

@media (max-width: 480px) {
  .container-text-main {
    position: relative;
    display: flex;
    left: 0%;
    top: 0px;
    font-size: 1.2rem;
    line-height: 1.7rem;
    padding: 70px 30px 50px 10px;
    font-family: "text-gyre";
    font-style: "condensed";
    color: var(--color-default);
  }
}

@media (max-width: 375px) {
  .container-text-main {
    position: relative;
    display: flex;
    left: 0%;
    top: 0px;
    font-size: 1rem;
    line-height: 1.4rem;
    padding: 70px 30px 50px 10px;
    font-family: "text-gyre";
    font-style: "condensed";
    color: var(--color-default);
  }
}

.titel-overlay {
  position: relative;
  top: 1%;
  left: 52%;
  right: 5%;
  font-family: "text-gyre";
  font-style: "condensed";
  color: var(--color-default);
}

@media (max-width: 480px) {
  .titel-overlay {
    position: relative;
    display: flex;
    left: 0%;
    padding: 40px 10px 10px 10px;
    font-family: "text-gyre";
    font-style: "condensed";
    font-size: 1rem;
    line-height: 1.4rem;
    color: var(--color-default);
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
  }
}

.lauftext-overlay {
  padding: 10px;
  position: relative;
  left: 52%;
  right: 5%;
  font-family: "text-gyre";
  font-style: "condensed";
  color: var(--color-default);
}

@media (max-width: 480px) {
  .lauftext-overlay {
    position: relative;
    display: flex;
    left: 0%;
    padding: 10px 10px 10px 10px;
    font-family: "text-gyre";
    font-style: "condensed";
    font-size: 1rem;
    line-height: 1.4rem;
    color: var(--color-default);
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
  }
}

.lauftext-footer {
  padding: 10px;
  position: relative;
  display: flex;
  font-family: "text-gyre";
  font-style: "condensed";
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--white);
}

@media (max-width: 480px) {
  .lauftext-footer {
    position: relative;
    display: flex;
    padding: 10px;
    font-family: "text-gyre";
    font-style: "condensed";
    font-size: 1rem;
    color: var(--white);
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}

.nav-inner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  font-family: "text-gyre";
  font-size: 1rem;
  line-height: 1.6;
  white-space: nowrap;
  z-index: 9999;
}

@media (max-width: 900px) {
  .nav-inner {
    left: 50%;
    transform: translate(-50%, -50%);
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 90%;
  }
  
  .nav-name {
    font-size: 1rem;
  }
  
  .nav-links {
    gap: 0.8rem;
  }
  
  .nav-links a,
  #kontakt {
    font-size: 1rem;
    padding: 0.3rem 0.4rem;
  }
}

@media (max-width: 700px) {
  .nav-inner {
    left: 50%;
    transform: translate(-50%, -50%);
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 85%;
  }
  
  .nav-name {
    font-size: 0.9rem;
    padding: 0.15rem 0.3rem;
  }
  
  .nav-links {
    gap: 0.5rem;
  }
  
  .nav-links a,
  #kontakt {
    font-size: 0.85rem;
    padding: 0.2rem 0.3rem;
    word-spacing: 2px;
  }
}

@media (min-width: 1200px) {
  .nav-inner {
    left: auto;
    right: 5%;
    transform: translateY(-50%);
    gap: 3rem;
  }
}

@media (min-width: 1600px) {
  .nav-inner {
    right: 10%;
    gap: 4rem;
  }
}

@media (min-width: 2000px) {
  .nav-inner {
    right: 15%;
    gap: 5rem;
  }
}

.nav-inner {
  display: flex;
  align-items: center;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  gap: 2rem;
  font-family: "text-gyre";
  font-size: 1rem;
  line-height: 1.6;
  white-space: nowrap;
  z-index: 1500;
}

.nav-name {
  background-color: black;
  padding: 0.2rem 0.4rem;
  color: white;
  line-height: 1.2;
  font-size: 1.1rem;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  white-space: nowrap;
}

.nav-links a::before,
.nav-links a::after,
#kontakt::before,
#kontakt::after {
  content: '[';
  display: inline;
  transition: content 0.2s ease;
}

.nav-links a::after,
#kontakt::after {
  content: ']';
}

  .nav-links a:hover::before,
  #kontakt:hover::before {
    content: '(';
  }

  .nav-links a:hover::after,
  #kontakt:hover::after {
    content: ')';
  }

  .nav-links a.active::before,
  .nav-links a.active::after {
    content: '(';
  }

  .nav-links a.active::after {
    content: ')';
  }

  .nav-links a.active:hover::before,
  .nav-links a.active:hover::after {
    content: '(';
  }

  .nav-links a.active:hover::after {
    content: ')';
  }

.nav-links a,
#kontakt {
  display: inline-block;
  white-space: nowrap;
  padding: 0.4rem 0.6rem;
  font-size: 1.1rem;
  text-align: center;
  color: var(--white);
  cursor: pointer;
  word-spacing: 3px;
}

/* Kontakt-Info (JS einblendbar) */
.contact-content {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  pointer-events: none;
  transition:
    max-width 0.5s ease,
    opacity 0.3s ease;
  white-space: nowrap;
}

.contact-content.is-open {
  max-width: 500px;
  opacity: 1;
  pointer-events: auto;
}

.kontakt-info {
  display: inline-block;
  white-space: nowrap;
  padding: 0.4rem 0.6rem;
  font-size: 1.1rem;
  text-align: center;
  color: var(--white);
  cursor: pointer;
  word-spacing: 3px;
  text-decoration: none;
}

.contact-content.is-open {
  max-height: 100%;
  opacity: 1;
  font-size: 1.1rem;
  cursor: pointer;
}

@media (max-width: 480px) {
  .container-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1500;
  }
  
  .nav-inner {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 10px 15px;
    width: 100%;
    box-sizing: border-box;
  }

  .nav-name {
    text-align: center;
    background-color: black;
    padding: 0.2rem 0.4rem;
    line-height: 1.2;
    font-size: 1.1rem;
  }

  .nav-links {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    line-height: 1;
    font-size: 1.1rem;
    width: 100%;
    text-align: center;
  }

  .nav-links a,
  #kontakt {
    line-height: 1;
    font-size: 1.1rem;
    display: inline-block;
    padding: 0.2rem 0.4rem;
    background-color: rgba(0, 0, 0, 0.5);
    vertical-align: middle;
  }

  .nav-links a::before,
  .nav-links a::after,
  #kontakt::before,
  #kontakt::after {
    content: '[';
    display: inline;
    transition: content 0.2s ease;
  }

  .nav-links a::after,
  #kontakt::after {
    content: ']';
  }

  .nav-links a:hover::before,
  #kontakt:hover::before {
    content: '(';
  }

  .nav-links a:hover::after,
  #kontakt:hover::after {
    content: ')';
  }

  .kontakt-info {
    line-height: 1;
    font-size: 1.1rem;
    display: inline-block;
    padding: 0.2rem 0;
    background-color: rgba(0, 0, 0, 0.5);
    vertical-align: middle;
    color: var(--white);
    text-decoration: none;
  }

  .kontakt-info::before {
    content: '( ';
  }

  .kontakt-info::after {
    content: ' )';
  }
}

@media (max-width: 320px) {
  .nav-inner {
    position: fixed;
    top: 0;
    left: 0px;
    transform: none;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 10px 15px;
    width: 100%;
    box-sizing: border-box;
  }

  .nav-name {
    text-align: center;
    padding: 0.2rem 0.4rem;
    line-height: 1.2;
    background-color: black;
    font-size: 1.1rem;
  }

  .nav-links {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: nowrap;
    line-height: 1;
    font-size: 1.1rem;
    width: 100%;
  }

  .nav-links a,
  #kontakt {
    line-height: 1;
    font-size: 1.1rem;
    flex-wrap: nowrap;
    gap: 0.2rem;
    justify-content: center;
    flex-direction: row;
    display: inline-block;
    padding: 0.2rem 0.4rem;
    background-color: rgba(0, 0, 0, 0.5); 
  }

  .nav-links a::before,
  .nav-links a::after,
  #kontakt::before,
  #kontakt::after {
    content: '[';
    display: inline;
  }

  .nav-links a::after,
  #kontakt::after {
    content: ']';
  }

  .nav-links a:hover::before,
  #kontakt:hover::before {
    content: '(';
  }

  .nav-links a:hover::after,
  #kontakt:hover::after {
    content: ')';
  }

  .kontakt-info {
    line-height: 1;
    font-size: 1.1rem;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 0.2rem 0.4rem;
  }

  .contact-content.is-open {
    line-height: 1;
    font-size: 1.1rem;
    flex-wrap: nowrap;
  }
}


/* Sehr kleine Screens: 280px */
@media (max-width: 280px) {
  .nav-inner {
    padding: 10px 12px;
    gap: 0.25rem;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
  }

  .nav-name {
    font-size: 1rem;
    padding: 0.2rem 0.4rem;
  }

  .nav-links {
    gap: 0.2rem;
    justify-content: center;
  }

  .nav-links a,
  #kontakt {
    font-size: 1rem;
    padding: 0.15rem 0.3rem;
  }
  .kontakt-info {
    font-size: 1rem;
    padding: 0.15rem 0.3rem;
  }

  .contact-content.is-open {
    font-size: 1rem;
    margin: 0;
  }
}

/* Ultra kleine Screens: 240px */
@media (max-width: 240px) {
  .nav-inner {
    padding: 8px 10px;
    gap: 0.2rem;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
  }

  .nav-name {
    font-size: 0.9rem;
    padding: 0.2rem 0.3rem;
  }

  .nav-links {
    gap: 0.15rem;
    justify-content: center;
  }

  .nav-links a,
  #kontakt {
    font-size: 0.9rem;
    padding: 0.15rem 0.25rem;
  }

  .kontakt-info {
    font-size: 0.9rem;
    padding: 0.15rem 0.25rem;
  }

  .contact-content.is-open {
    font-size: 0.9rem;
  }
}

.contact-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
}

.contact-content.is-open {
  max-height: 300px;
  opacity: 1;
  transform: translateX(3%);
}

@media (max-width: 480px) {
  .contact-content.is-open {
  max-height: 400px; 
  opacity: 1;
  transform: translateY(0);
  font-size: 1rem;
  margin: 0;
  }

  .contact-content.is-open p {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.5rem;
    word-spacing: normal;
    line-height: 0.6rem;
    margin: 0;
  }
}

#kontakt {
  cursor: pointer;
  user-select: none;
}

#kontakt.active {
  opacity: 0.5;
}

#name {
  border: none;
  color: var(--white);
  font-size: inherit;
  line-height: 1.2rem;
  user-select: none;
}

@media (max-width: 480px) {
  #name {
    font-size: 1rem;
    margin-bottom: 0.4rem;
    text-align: center;
    padding: 0.6rem 1rem;
  }
}

.site-footer {
    display: block;
    padding: 40px 20px 20px;
    font-family: "text-gyre";
    font-style: condensed;
    font-size: var(--lauftext);
    color: var(--white);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-section h3 {
    font-size: 0.85rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 12px;
    color: var(--white);
    opacity: 0.6;
}

.footer-section p {
    margin-bottom: 8px;
    line-height: 1.6;
}

.footer-section a {
    color: var(--white);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.footer-section a:hover {
    opacity: 0.7;
}

.footer-copyright {
    grid-column: span 3;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    text-align: center;
    font-size: 0.85rem;
    opacity: 0.7;
}

@media (max-width: 900px) {
  .footer-content {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  .footer-copyright {
    grid-column: span 2;
  }
}

@media (max-width: 600px) {
  .site-footer {
    padding: 30px 15px 20px;
  }
  
  .footer-content {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: center;
  }
  
  .footer-section {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .footer-copyright {
    grid-column: span 1;
  }
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-section h3 {
    font-size: 0.85rem;
    font-weight: 400;
    margin-bottom: 20px;
    color: var(--white);
    opacity: 0.6;
}

.footer-section p {
    margin-bottom: 12px;
    line-height: 1.6;
}

.footer-section a {
    color: var(--white);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.footer-section a:hover {
    opacity: 0.7;
}

.footer-copyright {
    grid-column: span 3;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    text-align: center;
    font-size: 0.85rem;
    opacity: 0.7;
}

@media (max-width: 900px) {
  .footer-content {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
  
  .footer-copyright {
    grid-column: span 2;
  }
}

@media (max-width: 600px) {
  .site-footer {
    padding: 60px 20px 40px;
  }
  
  .footer-content {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  
  .footer-section {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .footer-copyright {
    grid-column: span 1;
  }
}

.footer-fotografie {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gutter);
    padding: 650px 10px 0px 10px;
    font-family: "text-gyre";
    font-style: condensed;
    font-size: var(--lauftext);
    color: var(--white);
    white-space: nowrap;
}

.footer-kunst {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gutter);
    padding: 650px 10px 0px 10px;
    font-family: "text-gyre";
    font-style: condensed;
    font-size: var(--lauftext);
    color: var(--white);
    white-space: nowrap;
}

.clickable-image {
  position: relative;
  cursor: pointer;
  max-width: 100%;
  display: block;
  pointer-events: auto;
}

@media (max-width: 480px) {
  .clickable-image {
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

.audio-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-height: 200px;
  padding: 2rem 0;
  cursor: pointer;
}

@media (max-width: 480px) {
  .clickable-image {
    width: 100%;
    margin-bottom: 10px;
  }
  
  .audio-container {
    width: 100%;
    padding: 10px 0;
    min-height: auto;
  }
}

@media (max-width: 480px) {
  .clickable-image {
    width: 100%;
    margin-bottom: 10px;
  }
}

.audio-play-button {
  background: none;
  border: none;
  font-size: var(--lauftext);
  cursor: pointer;
  color: var(--white);
  padding: 0.5rem 1rem;
  border: 1px solid var(--black);
  border-radius: 3px;
  transition: all 0.2s ease;
}

.audio-play-button:hover {
  background-color: var(--black);
  color: var(--color-default);
}

.audio-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-height: 200px;
  padding: 2rem 0;
}

.audio-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "text-gyre";
  font-size: 0.75rem;
  color: var(--white);
  padding: 0;
  min-height: 1.2em;
  gap: 0.5rem;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 480px) {
  .audio-info {
    flex-direction: row;
    font-size: 0.7rem;
    gap: 0.3rem;
    padding: 5px;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}

.audio-song-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.audio-timecode {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
  .audio-timecode {
    font-size: 0.7rem;
    min-width: 35px;
    text-align: right;
  }
}

.audio-progress-container {
  position: fixed;
  top: 0;
  left: 0;
  height: 5px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.audio-progress {
  height: 100%;
  width: 0%;
  background-color: var(--color-default);
  transition: width 0.1s linear;
}

.overlay.hidden { display: none; }

.clickable-image::after {
  content: attr(data-title);
  position: absolute;
  bottom: 10px;
  left: 10px;
  background-color: var(--color-default);
  color: var(--black);
  font-size: var(--lauftext);
  padding: 0.2rem 0.6rem;
  border-radius: 5px;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  white-space: nowrap;
}

.close-button {
  position: fixed; 
  top: 1rem;
  right: 1rem;
  font-size: 3.5rem;
  background: transparent;
  border: none;
  color: var(--color-default);
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.2s;
  z-index: 1200; 
  user-select: none;
}

@media (max-width: 480px) {
  .close-button { 
    font-size: 2.5rem;
  } 
}

.close-button:hover {
  opacity: 1;
}

.overlay-01-content,
.overlay-02-content,
.overlay-03-content,
.overlay-04-content,
.overlay-05-content,
.overlay-06-content,
.overlay-07-content,
.overlay-08-content,
.overlay-09-content,
.overlay-10-content,
.overlay-11-content,
.overlay-12-content,
.overlay-13-content,
.overlay-14-content,
.overlay-15-content,
.overlay-16-content,
.overlay-17-content,
.overlay-18-content,
.overlay-19-content,
.overlay-20-content,
.overlay-21-content,
.overlay-22-content,
.overlay-23-content,
.overlay-24-content,
.overlay-25-content,
.overlay-26-content,
.overlay-27-content,
.overlay-28-content,
.overlay-29-content,
.overlay-30-content,
.overlay-31-content,
.overlay-32-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: 2rem;
  border-radius: 12px;
  max-width: 100%;
  max-height: 100%;
  overflow-y: auto;
  padding: 10px 10px 50px 10px;
}

/* Overlay grid images — always maintain aspect ratio */
.overlay-01-content img,
.overlay-02-content img,
.overlay-03-content img,
.overlay-04-content img,
.overlay-05-content img,
.overlay-06-content img,
.overlay-07-content img,
.overlay-08-content img,
.overlay-09-content img,
.overlay-10-content img,
.overlay-11-content img,
.overlay-12-content img,
.overlay-13-content img,
.overlay-14-content img,
.overlay-15-content img,
.overlay-16-content img,
.overlay-17-content img,
.overlay-18-content img,
.overlay-19-content img,
.overlay-20-content img,
.overlay-21-content img,
.overlay-22-content img,
.overlay-23-content img,
.overlay-24-content img,
.overlay-25-content img,
.overlay-26-content img,
.overlay-27-content img,
.overlay-28-content img,
.overlay-29-content img,
.overlay-30-content img,
.overlay-31-content img,
.overlay-32-content img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  z-index: 20000;
  overflow-x: hidden;
  overflow-y: auto;
}

@media (max-width: 480px) {
  .overlay-01-content,
  .overlay-02-content,
  .overlay-03-content,
  .overlay-04-content,
  .overlay-05-content,
  .overlay-06-content,
  .overlay-07-content,
  .overlay-08-content,
  .overlay-09-content,
  .overlay-10-content,
  .overlay-11-content,
  .overlay-12-content,
  .overlay-13-content,
  .overlay-14-content,
  .overlay-15-content,
  .overlay-16-content,
  .overlay-17-content,
  .overlay-18-content,
  .overlay-19-content,
  .overlay-20-content,
  .overlay-21-content,
  .overlay-22-content,
  .overlay-23-content,
  .overlay-24-content,
  .overlay-25-content,
  .overlay-26-content,
  .overlay-27-content,
  .overlay-28-content,
  .overlay-29-content,
  .overlay-30-content,
  .overlay-31-content,
  .overlay-32-content,
  .overlay-audio-content {
    display: grid;
    grid-template-columns: 1fr !important;
    grid-column: 1fr !important;
    gap: 10px;
    padding: 60px 2px 60px 2px;
    width: 100%;
    max-width: 100%;
  }
  
  .overlay-01-content img,
  .overlay-02-content img,
  .overlay-03-content img,
  .overlay-04-content img,
  .overlay-05-content img,
  .overlay-06-content img,
  .overlay-07-content img,
  .overlay-08-content img,
  .overlay-09-content img,
  .overlay-10-content img,
  .overlay-11-content img,
  .overlay-12-content img,
  .overlay-13-content img,
  .overlay-14-content img,
  .overlay-15-content img,
  .overlay-16-content img,
  .overlay-17-content img,
  .overlay-18-content img,
  .overlay-19-content img,
  .overlay-20-content img,
  .overlay-21-content img,
  .overlay-22-content img,
  .overlay-23-content img,
  .overlay-24-content img,
  .overlay-25-content img,
  .overlay-26-content img,
  .overlay-27-content img,
  .overlay-28-content img,
  .overlay-29-content img,
  .overlay-30-content img,
  .overlay-31-content img,
  .overlay-32-content img {
    grid-column: 1 / -1 !important;
    width: 100%;
    max-width: 100%;
  }
  
  .item-overlay {
    grid-column: 1 / -1 !important;
    width: 100%;
  }
}

/* Default overlay image wrapper — all images use this class */
/* To control width per image, use .img-N { grid-column: X / Y; } */
/* 3-column grid: lines are 1, 2, 3, 4 */
/* col 1 only: 1/2 | col 2 only: 2/3 | col 3 only: 3/4 */
/* cols 1-2: 1/3 | cols 2-3: 2/4 | full width: 1/4 */
.item-overlay {
  grid-column: span 1; /* default: 1 column */
}

.container-main-fotografie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); 
  gap: 0.5rem;
  width: 100%;
  height: 100%;
}

@media (max-width: 480px) {
  .container-main-fotografie { 
      max-width: 100%;
      display: grid;
      grid-template-columns: 1fr;
      column-gap: 0;
      gap: 10px;
      padding: 70px 2px 70px 2px;
      justify-items: center;
  } 
}

.container-main-kunst {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); 
  gap: 0.5rem;
  width: 100%;
  height: 100%;
}

@media (max-width: 480px) {
  .container-main-kunst { 
      max-width: 100%;
      display: grid;
      grid-template-columns: 1fr;
      column-gap: 0;
      gap: 10px;
      justify-items: center;
      padding: 70px 2px 70px 2px;
  } 
}