/* styles.css */


 :root {
   --c1: rgb(20, 64, 245);
   --c2: rgb(232, 50, 35);
   --c3: rgb(241, 240, 237);
   --nummer-gap: clamp(12px, 9vw, 120px);
   --secondary-color: #2ecc71;

 }

 .c1 {
   color: var(--c1);
 }

 .c3 {
   background-color: var(--c3);
 }

 .bg-c1 {
   background-color: var(--c1);


 }


 .text-c1 {
   color: var(--c1);
 }
 .text-c3 {
   color: var(--c3);
 }

 .text-mono {
   font-family: monospace !important;
 }

 .text-monogross {
   font-family: monospace !important;
   font-size: 1.4em !important;
 }

 .border-c1 {
   border-color: var(--c1);
 }

 .border-dotted {
   border-style: dotted;
 }


 body {
   background-color: var(--c3) !important;
   /* Blassgelber Hintergrund */
   margin: 0;
   padding: 0;
   font-family: monospace !important;
   cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%3E%3Ccircle%20cx='16'%20cy='16'%20r='8'%20fill='rgb(20,	64,	245)'/%3E%3C/svg%3E") 16 16, auto;
 }

 a:hover,
 button:hover {
   cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%3E%3Ccircle%20cx='16'%20cy='16'%20r='8'%20fill='rgb(232,	50,	35)'/%3E%3C/svg%3E") 16 16, auto;
 }



 .color {

   color: #f9ab00;
   /* Kleintext-Gelb */
   /* Um Farbe zu deaktivieren:
  color: inherit;
  */
 }








 /* === TITEL (h1) ==================================== */
 h1 {
   font-size: 2em;
   font-family: 'Roboto', Arial, sans-serif;
   color: var(--c1);
   /* Titel-Blau */
   /* Um Farbe zu deaktivieren:
  color: inherit;
  
  */
 }

 /* === UNTERTITEL (h2) ============================== */
 h2 {
   font-size: 1.5em !important;
   font-family: monospace;
   color: var(--c1);
   /* Untertitel-Grün */
   /* Um Farbe zu deaktivieren:
  color: inherit;
  */
 }

 h3 {
   font-size: 1.2em !important;
   line-height: 1.6;
   color: var(--c1);
   font-family: 'Roboto', sans-serif !important;
 }

 h4 {
   font-size: 1em;
   line-height: 1.6;
   color: var(--c1);
   font-family: monospace !important;
 }

 /* === FLIESSTEXT (p) ============================== */
 p {
   font-size: .95em;
   color: var(--c1);
   /* Fließtext-Grau */
   line-height: 1.6;
   font-family: 'Roboto', sans-serif !important;
   /* Um Farbe zu deaktivieren:
  color: inherit;
  */
 }

 /* === KURSIVER TEXT (em) ========================== */
 em {
   font-style: oblique !important;
   /*font-family: monospace !important;*/
   color: var(--c2);
   /* Kursiv-Rot */
   /* Um Farbe zu deaktivieren:
  color: inherit;
  */
 }

 /* === KLEINER TEXT (.small-text) ================== */
 .small-text {
   font-size: 0.8em;
   color: var(--c1);
   /* Kleintext-Gelb */
   /* Um Farbe zu deaktivieren:
  color: inherit;
  */
 }

 /* === BUTTON-TEXT (button) ======================== */
 

 /* === BUTTONS-Startseite (button) ======================== */
 .button-container {
   display: flex;
   /* Stellt sicher, dass die Buttons horizontal angeordnet sind */
   gap: 15px;
   /* Abstand zwischen den Buttons */
   overflow-x: auto;
   /* Aktiviert das horizontale Scrollen, wenn der Platz nicht ausreicht */
   padding: 4px;
   /* Optional: fügt etwas Abstand um den Container hinzu */
 }

 /* === BUTTONS-Startseite (button) ======================== */
 .button-container a {
   flex-shrink: 0;
   /* Verhindert, dass die Buttons schrumpfen */
   /* width: 150px; /* Feste Breite für die Buttons */
   height: 40px;
   /* Feste Höhe für die Buttons */
   display: inline-flex;
   /* Setzt die Buttons als flexbox-Elemente */
   align-items: center;
   /* Zentriert den Text vertikal */
   justify-content: center;
   /* Zentriert den Text horizontal */
 }


#menu {
  position: fixed; /* Menü bleibt oben fixiert */
  top: -120%; /* Menü beginnt über dem Bildschirm */
  left: 0;
  width: 100%;
  height: 'auto'; /* Deckt die gesamte Bildschirmhöhe ab */
  background-color: var(--c3);
  transition: top 0.3s ease; /* Glatte Animation */
  z-index: 20; /* Sicherstellen, dass das Menü über anderen Inhalten liegt */
}

#menu.open {
  top: 0; /* Menü kommt nach unten */
  margin-top: 3rem;
}

#menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#menu li a {
  text-decoration: none;
  font-size: 1.5rem;
  padding: 1rem;
  color: #333; /* Farbe der Links */
}







 .projektliste {
   list-style: none;
   padding: 0;
   max-width: auto;
   margin: 0 left;

 }

 .projektliste li {

   border-radius: 0px;
   margin-bottom: 28px;
   overflow: hidden;
   cursor: none;
   transition: transform 0.2s;
 }

 

 /*.projektliste li:hover {
      /* transform: scale(1.01); 
      
      
    } */

 .projektlink {
   display: flex;
   text-decoration: none;
   color: inherit;
   align-items: flex-start;
   padding: 0px;
 }

 .nummer {
   /*font-weight: bold; */
   width: 60px;
   margin-right: var(--nummer-gap);
   /* definniert Abstand oben in den Variable */
   flex-shrink: 0;
 }
 @media (max-width: 640px) {
  .nummer {
    display: none;
  }
  }

 .li-linie::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   /* Default für mobile */
   right: 0;
   height: 1px;
   background-color: var(--c1);
 }

 /* Ab sm (640px) überschreiben wir `left:` */
 @media (min-width: 640px) {
   .li-linie::after {
     left: calc(60px + var(--nummer-gap));
   }
 }


 .titel {
   flex: 1;
   margin-right: 20px;

 }

 .vorschau {
   width: clamp(80px, 35vw, 500px);
   height: clamp(80px, 25vw, 350px);
   object-fit: cover;
   border-radius: 4px;
   flex-shrink: 0;
   filter: grayscale(100%);

 }

 @media (max-width: 600px) {
   .projektlink {
     flex-direction: column;
     align-items: flex-start;
   }

   .vorschau {
     width: 100%;
     height: auto;
     margin-top: 10px;
   }
 }

 .bnw {
   
   filter: grayscale(100%);

 }

 


 .blocksatz {
   text-align: justify;

   margin: 0 left;
   line-height: 1.6;
 }




 .no-scrollbar::-webkit-scrollbar {
   display: none;
 }

 .no-scrollbar {
   -ms-overflow-style: none;
   /* IE/Edge */
   scrollbar-width: none;
   /* Firefox */
 }

 .swiper {
   width: 100%;
   height: 65vh;
   /* Das Karussell nimmt den vollen Container ein */
   position: relative;
   /* Positionierung der Navigation und Pagination */
 }

 .swiper-slide {
   height: 25vh;
   width: auto;
 }

 .swiper-slide img {
   height: 100%;
   width: auto;
   object-fit: contain;
   display: block;
   pointer-events: none;
   user-select: none;
 }

 .swiper-slide:hover {
   cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%3E%3Ccircle%20cx='16'%20cy='16'%20r='8'%20fill='rgb(232,50,35)'/%3E%3C/svg%3E") 16 16, auto;
 }

 .swiper-slide a:hover,
 .swiper-slide button:hover {
   cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%3E%3Ccircle%20cx='16'%20cy='16'%20r='8'%20fill='rgb(232,50,35)'/%3E%3C/svg%3E") 16 16, auto;
 }

 #systemCode {
   transition: opacity 0.2s ease-in-out;
   opacity: 1;
 }

 .hidden {
   opacity: 0;
 }

.introbild {
   width: clamp(80px, 35vw, 500px);
   height: auto;
   object-fit: cover;
   border-radius: 4px;
   flex-shrink: 0;
  

 }
 @media (max-width: 600px) {
   .introbild {
     width: fit-content;
     margin-top: 1rem;
    
   }
}
.scrollmaarginarchitektur {
  scroll-margin-top: 83px;
}

 .back-to-top {
   position: fixed;
   bottom: 25px;
   /* Abstand vom unteren Rand */
   right: 1px;
   /* Abstand vom rechten Rand */
   background-color: transparent;
   /* Kein Hintergrund */
   border: none;
   /* Kein Rand */
   color: var(--c2);
   /* Schwarzer Pfeil */
   font-size: 1.5rem;
   /* Schriftgröße des Pfeils */
   cursor: pointer;
   /* Zeigt an, dass der Button klickbar ist */
   transition: opacity 0.3s ease, transform 0.3s ease;
   /* Smooth Transition */
   z-index: 100;
   /* Überlagert andere Inhalte */
 }

 /* Hover-Effekt */


 /* Wenn der Button ausgeblendet wird, wird die Opazität auf 0 gesetzt */
 .back-to-top.hidden {
   opacity: 0;
   pointer-events: none;
   /* Verhindert, dass der Button inaktiv ist */
 }

 @media (max-width: 639px) {
    .hide-mobile {
      display: none;
    }
  }