/* ======================================
    "Grundeinstellungen"
    ===================================== */

@font-face {
  font-family: "ABC Monument Grotesk";
  src: url("../fonts/ABCMonumentGrotesk-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

/*:root ist das oberste Element der Seite*/
:root {
  --page-padding: 16px;
  --font-base: "ABC Monument Grotesk", Arial, Helvetica, sans-serif;

  /* Typografisches Raster */
  --font-small: 24px;
  --line-small: 28px;

  --font-large: 40px;
  --line-large: 56px;

  --font-running-text: 20px;
  --line-running-text: 28px;

  --title-gap: 25px;
  --baseline-offset: 5px; /* damit Namensliste auf selber Grundlinie anfängt wie Projekttitel */
}

*{
  box-sizing: border-box; /* WICHTIG dass die Seitenränder clean bleiben */
  }

  body {
  position: relative;
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
  margin: 0;
  font-family: var(--font-base);
}

body {
  scrollbar-gutter: stable;
}

/* optional Fallback */
@supports not (scrollbar-gutter: stable) {
  body {
    overflow-y: scroll;
  }
}


/* ======================================
    Header Inhalte
    ===================================== */

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: baseline; /* wichtig für Typo */
  font-size: var(--font-small);
  line-height: var(--line-small);
  font-weight: normal;
  margin-bottom: var(--line-large);
}

.left-side {
  display: flex;
  gap: 4.5px;
}
  
.header-pill {
  display: inline-flex;
  align-items: baseline;

  background-color: rgb(190, 190, 190);
  color: rgb(239,240,241);

  padding: 0.5px 4.3px;
  border-left: 0px;
  text-decoration: none; /* wichtig für <a> */
  cursor: pointer;
}

.header-pill:hover {
  background-color: rgb(239,240,241);
  color: rgb(190, 190, 190);
}

#toggle-button {
  font-size: var(--font-small);
  font-style: normal;
  cursor: pointer;
  user-select: none;
}

/* info-button */
#info-button {
  font-size: var(--font-small);
  font-style: normal;
  cursor: pointer;
  user-select: none;
  padding-right: 5px;
}

#info_text {
  font-size: var(--font-running-text);
  line-height: var(--line-running-text);
  color: rgb(168,168,168);

  overflow: hidden;
  transition: max-height 0.3s ease-out, padding 0.3s ease-out;

  max-height: 0;

  /* Desktop-Breite */
  max-width: calc(80% - 10px);
  margin-left: auto;
  padding-left: 25px;
  padding-right: 5px;
}

#info_text.show {
  max-height: 1500px;
  padding-bottom: 52px;
}


  /*Personenliste mit Farbigen Boxen beim Darüberhovern*/

  #person_list {
    position: absolute;
    left: var(--page-padding);
    z-index: 2000;
    font-size: var(--font-small);
    line-height: var(--line-small);
  
    padding-top: calc( 
      (var(--line-large) - var(--line-small)) / 2
      + var(--baseline-offset)
    );  /* damit Namensliste auf selber Grundlinie anfängt wie Projekttitel */
  
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease-out;
  }  
  
  #person_list p {
    margin: 0;
    display: block;
    width: fit-content;
    padding: 0px 4.3px;          
    background: transparent;
    cursor: default;
    color: rgb(184,184,184);
  }

  #person_list.show {
    max-height: 1000px;
    max-width: 20%;
  }


/* Box-Farben */

  #person_list .font_color_red:hover {
    background-color: rgb(255,8,28);
    color: rgb(239,240,241);
  }

  #person_list .font_color_peach:hover {
    background-color: rgb(255,140,135);
    color: rgb(239,240,241);
  }

  #person_list .font_color_babyblue:hover {
    background-color: rgb(132,182,213);
    color: rgb(239,240,241);
  }

  #person_list .font_color_signalpink:hover {
    background-color: rgb(255,11,250);
    color: rgb(239,240,241);
  }
  
  #person_list .font_color_lilac:hover {
    background-color: rgb(174,136,225);
    color: rgb(239,240,241);
  }

  #person_list .font_color_darkgreen:hover {
    background-color: rgb(0,107,18);
    color: rgb(239,240,241);
  }

  #person_list .font_color_yellow:hover {
    background-color: rgb(251,215,6);
    color: rgb(239,240,241);
  }
  
  #person_list .font_color_royalblue:hover {
    background-color: rgb(0,2,249);
    color: rgb(239,240,241);
  }

  #person_list .font_color_purple:hover {
    background-color: rgb(147,65,194);
    color: rgb(239,240,241);
  }

  #person_list .font_color_navygreen:hover {
    background-color: rgb(143,177,132);
    color: rgb(239,240,241);
  }
  
  #person_list .font_color_darkblue:hover {
    background-color: rgb(0,0,147);
    color: rgb(239,240,241);
  }
  
  #person_list .font_color_cyan:hover {
    background-color: rgb(0,150,215);
    color: rgb(239,240,241);
  }

  #person_list .font_color_ochre:hover {
    background-color: rgb(180,136,58);
    color: rgb(239,240,241);
  }

  #person_list .font_color_burgundy:hover {
    background-color: rgb(157,23,21);
    color: rgb(239,240,241);
  }

  #person_list .font_color_rose:hover {
    background-color: rgb(255,166,252);
    color: rgb(239,240,241);
  }

  #person_list .font_color_darkpurple:hover {
    background-color: rgb(122,23,122);
    color: rgb(239,240,241);
  }

  #person_list .font_color_olive:hover {
    background-color: rgb(187,183,125);
    color: rgb(239,240,241);
  }

  #person_list .font_color_brown:hover {
    background-color: rgb(121,69,33);
    color: rgb(239,240,241);
  }

  #person_list .font_color_turquoise:hover {
    background-color: rgb(122,201,205);
    color: rgb(239,240,241);
  }

  #person_list .font_color_mossgreen:hover {
    background-color: rgb(104,119,93);
    color: rgb(239,240,241);
  }

  #person_list .font_color_signalgreen:hover {
    background-color: rgb(0,229,0);
    color: rgb(239,240,241);
  }
  
  #person_list .font_color_orange:hover {
    background-color: rgb(232,147,70);
    color: rgb(239,240,241);
  }

  /* ==============================================
      Main Content: Projekte (gilt für ALLE Geräte) 
    =============================================== */

    .content {
      position: relative;
      z-index: 1;
    }

    
  /* Neue Struktur: Farben sind Basis  */
 
  .content a{
    color: inherit; /* Farbe vom Elternelement wird übernommen */
    text-decoration: none;
  }

  /* FARBEN sind IMMER definiert (Mobile + Desktop) */
 .content .font_color_mossgreen:hover,
 .content .font_color_mossgreen:hover a{
  color:rgb(104,119,93);
 }
 
  .content .font_color_royalblue, 
  .content .font_color_royalblue a {
    color: rgb(0,2,249);
  }

  .content .font_color_rose, 
  .content .font_color_rose a {
    color: rgb(255,166,252);
  }

  .content .font_color_red,
  .content .font_color_red a{
    color: rgb(255,8,28);
  }

  .content .font_color_darkgreen,
  .content .font_color_darkgreen a {
    color: rgb(0,107,18);
  }

  .content .font_color_signalpink,
  .content .font_color_signalpink a {
    color: rgb(255,11,250);
  }

  .content .font_color_orange,
  .content .font_color_orange a {
    color: rgb(238,142,45);
  }

  .content .font_color_brown, 
  .content .font_color_brown a {
    color: rgb(129,66,23);
  }

  .content .font_color_signalgreen, 
  .content .font_color_signalgreen a {
    color: rgb(0,229,0);
  }

  .content .font_color_babyblue,
  .content .font_color_babyblue a {
    color: rgb(139,182,215);
  }

  .content .klasse, 
  .content .klasse a {
    color: black;
  }

  .content .collab, 
  .content .collab a {
    color: rgb(255,137,84);
  }




  /* Emojis sind standardmäßig sichtbar (Mobile) */
  .content .emoji {
    opacity: 1;
    color: initial !important;
  }

  .content .emoji a{
    color: initial !important;
  }

  /* Abstand nach Projekttitel zum nächsten Bild */
  .project_title::after {
    content: " ";
    margin-right: var(--title-gap);
  }



  /* =============================================
     DESKTOP VERSION: Opacity-Effekte nur ab 769px
     ============================================= */

     .content {
      font-size: var(--font-large);
      line-height: var(--line-large);
    }  
  
    .project_title {
      display: inline;
      vertical-align: baseline;
    }
    
    .project_title::after {
      content: " ";
      margin-right: var(--title-gap);
    }
    
    .project_title {
      hyphens: manual;
    }

     @media (min-width: 769px) {

     /* Alle farbigen Elemente starten unsichtbar */
    .content .font_color_royalblue,
    .content .font_color_rose,
    .content .font_color_red,
    .content .font_color_darkgreen,
    .content .font_color_signalpink,
    .content .font_color_orange,
    .content .font_color_brown,
    .content .font_color_mossgreen:hover,
    .content .font_color_signalgreen,
    .content .font_color_babyblue,
    .content .klasse,
    .content .collab, 
    .content .emoji{
      opacity: 0;
      transition: opacity 0s ease-out;
      transition-delay: 4s ; /* Verzögerung beim Ausblenden */
    }

    /* Hover macht sie sichtbar */
    .content .font_color_royalblue:hover,
    .content .font_color_rose:hover,
    .content .font_color_red:hover,
    .content .font_color_darkgreen:hover,
    .content .font_color_signalpink:hover,
    .content .font_color_orange:hover,
    .content .font_color_brown:hover,
    .content .font_color_signalgreen:hover,
    .content .font_color_babyblue:hover,
    .content .font_color_mossgreen:hover,
    .content .klasse:hover,
    .content .collab:hover,
    .content .emoji:hover 
     {
      opacity: 1;
      transition-delay: 0s; /* Sofort sichtbar beim Hover */
    }

    /* Highlighted-Elemente sind auf Desktop immer sichtbar */
    .content .highlighted {
      opacity: 1 !important;
      transition:  opacity 0s ease-out !important;
      transition-delay: 0s !important;
    }

    /* Funktionsweise des Sichtbar-/ Unsichtbar-Seins der Projekttitel:
       Sobald auf Personlist dann nur die Perojekttitel einer Person sichtbar */
    
    /* Name-Filter-Modus aktiv */
    body.name-hover-mode .project_title {
      opacity: 0 !important;
      transition: none !important;
      transition-delay: 0s !important;
    }    
  
    body.name-hover-mode .project_title.highlighted {
      opacity: 1 !important;
    }

      /* Hover im Namensmodus komplett abschalten */
  body.name-hover-mode .content .project_title:hover {
    opacity: 0 !important;
    transition: none !important;
  }
  
  }
  

  
  /* ============================================
     MOBILE ANPASSUNGEN (max-width: 768px)
     ============================================ */


     @media (max-width: 768px) {
      :root {
        --font-large: 22px;
        --line-large: 30px;

       --font-small: 18px;
       --line-small: 24px;

       --title-gap: 6px;
       --header-height-mobile: 36px;
      }


   /* Beim Laden der Website: Erst Bilder dann verzögert die Projekttitel */

      .project_title {
        opacity: 0;
        transition: opacity 1.8s ease;
      }
    
      body.titles-ready .project_title {
        opacity: 1;
      }


  /* Header Mobile */

      header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;

        padding-left: var(--page-padding);
        padding-right: var(--page-padding);
        height: var(--header-height-mobile);
        z-index: 1000;

        pointer-events: auto;
      }

      .header-content {
        margin-bottom: 3px;
      }

      #info_text {
        max-width: 100%;
        margin-left: 0;
        margin-top: 28px;
        padding-left: 0;
        padding-right: 0;
        font-size: var(--font-small);
        line-height: var(--line-small);
      }

      #info_text.show {
        max-width: 100%;
      }

      body {
        padding-top: var(--header-height-mobile);
      }

  /* Personenliste Mobile */

      #person_list {
        position: static;
        margin-top: 0; 
        max-width: 100%;
        margin-left: 0;
        left: 0;
        padding-top: 5px;
      }
    
      #person_list.show {
        max-width: 100%;
      }
    
      #person_list p {
        width: fit-content;         /* Namen dürfen volle Breite nutzen */
        color: rgb(239,240,241);
      }

      /* Boxen immer sichtbar (nicht nur bei Hover) */
      #person_list .font_color_red {
        background-color: rgb(255,8,28);
      }
    
      #person_list .font_color_peach {
        background-color: rgb(255,140,135);
      }
    
      #person_list .font_color_babyblue {
        background-color: rgb(132,182,213);
      }
    
      #person_list .font_color_signalpink {
        background-color: rgb(255,11,250);
      }
    
      #person_list .font_color_lilac {
      background-color: rgb(174,136,225);
      }

      #person_list .font_color_darkgreen {
        background-color: rgb(0,107,18);
      }
    
      #person_list .font_color_yellow {
        background-color: rgb(251,215,6);
      }
    
      #person_list .font_color_royalblue {
        background-color: rgb(0,2,249);
      }
    
      #person_list .font_color_purple {
        background-color: rgb(147,65,194);
      }
    
      #person_list .font_color_navygreen {
        background-color: rgb(143,177,132);
      }
    
      #person_list .font_color_darkblue {
        background-color: rgb(0,0,147);
      }
    
      #person_list .font_color_cyan {
        background-color: rgb(0,150,215);
      }
    
      #person_list .font_color_ochre {
        background-color: rgb(180,136,58);
      }
    
      #person_list .font_color_burgundy {
        background-color: rgb(157,23,21);
      }
    
      #person_list .font_color_rose {
        background-color: rgb(255,166,252);
      }
    
      #person_list .font_color_darkpurple {
        background-color: rgb(122,23,122);
      }
    
      #person_list .font_color_olive {
        background-color: rgb(187,183,125);
      }
    
      #person_list .font_color_brown {
        background-color: rgb(121,69,33);
      }
    
      #person_list .font_color_turquoise {
        background-color: rgb(122,201,205);
      }
    
      #person_list .font_color_mossgreen {
        background-color: rgb(104,119,93);
      }
    
      #person_list .font_color_signalgreen {
        background-color: rgb(0,229,0);
      }
    
      #person_list .font_color_orange {
        background-color: rgb(232,147,70);
      }



  /* Beim Klicken auf Namen bleiben nur die Projekte der Person sichtbar */

      .content .mobile-hidden {
        visibility: hidden;
      }
    
      .content {
        margin-top: 8px; 
      }
    }
    

   /* Header-Boxen färben sich nicht hell wenn auf sie geklickt wird */
    
    .header-pill:focus {
      outline: none;
      background-color: rgb(190,190,190);
      color: rgb(239,240,241);
    }

    @media (hover: none) {
      .header-pill:hover {
        background-color: rgb(190,190,190);
        color: rgb(239,240,241);
      }
    
    }