/** 
    * Haupt-CSS Datei für die Website
    * Hier werden alle globalen Styles definiert
    * Guide: 2.3
*/

@import './reset.css';


/* 
    Wenn Tailwind CSS genutzt wird, diese Zeilen einkommentieren (Guide: 4.2):
    @import "tailwindcss";
    @source "../../site";
*/
    

body {
    font-family: 'SerifbabeSIGMA', Regular;
    position: relative;
    font-size: 17px; /* Basis-Schriftgröße. Da wir auf bei allen Einheiten der Website auf rem setzen, vergrößern sich alle Elemente proportional zu diesem Wert */
    margin: 0;
    min-height: 100vh; /* Body soll mindestens die Höhe des Viewports haben, damit der Footer immer unten bleiben kann */
    padding: 0 4rem;
    padding-bottom: 20rem; /* Platz für den Footer schaffen */
    background-color: #f7f7f9; 
    color: #1404f3; 
   



}



.home__body .page-cover {
 width: 800px;
 margin-bottom: 20rem;
}

.home__body .page-title {
 font-size: 25px;
 max-width: 700px;
 
}

.wrapper {
    max-width: 1400px;
    margin: 0 auto;
    
}


/* Navigation Styles */

.navigation {
    position: relative;
    display: flex;
    gap: 2rem;
    border-bottom: 1px solid #f35404;
    left: 3px;
    margin-top: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    padding-top: 1rem;
    padding: 1rem 0;
   
}


.navigation-item {
    text-decoration: none;
    color: #1404f3;
}

.navigation-item:hover {
    color: #f35404;
}

.navigation-item.active {
    font-weight: bold;
}

.image-gallery img {
  display: block;
  margin-bottom: 20px;
  max-width: 100%;
} 

.projekt-title {
  font-size: 20px;   /* größere Schrift nur für Titel */
  font-weight: bold;
  margin-bottom: 10px; /* Abstand zum Rest der Karte */
}

.bike-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.big-text {
  font-size: 25px;
  font-weight: bold; /* optional */
}
.content-layout {
  display: flex;
  gap: 40px;              /* Abstand zwischen Text und Bildern */
  align-items: flex-start;
  min-width: 0;
}

.page-intro {
  max-width: 700px;  /* maximale Breite */
  margin: 0 auto;     /* zentriert auf der Seite */
  line-height: 1.5;
  margin-right: 0px;
  margin-left: 1px;
}


.text-block {
  max-width: 700px;  /* maximale Breite */
  margin: 0 auto;     /* zentriert auf der Seite */
  line-height: 1.5;
  margin-right: 0px;
  margin-left: 1px;
  margin-bottom: 1.5em;  /* Abstand nach unten */
  min-width: 0;
       
}

.image-gallery {
  width: 100%;
  max-width: 700px;
  min-width: 0;           
}

.image-gallery img {
  display: block;  
  width: 100%;
  margin-bottom: 20px;
}



.video-wrapper video {
  max-width: 700px;      /* deine Wunschbreite */
  width: 100%;
  max-height: 1000px;
  display: block;
  margin-bottom: 1rem;
}

/* Styles für wiederkehrende Elemente der Seite */
.card {
    display: block;
    text-decoration: none;
    margin-bottom: 0rem;
    color: #1404f3;
    /* padding: 8rem; */
}
.card:hover{
 color: #f35404;
 }

.card-title {
    font-size: 25px;
    font-weight: bold;
    margin-top: 1rem;
    margin-bottom: 0rem;
}

.page-title {
    font-size: 25px;
    font-weight: bold;
    margin-bottom: 10px;
}

.text {
    max-width: 700px; 
    margin-top: 0;

}
.page-cover {
    margin-bottom: 2rem;
}

.page-infos {
    color: #1404f3;
    margin-bottom: 2rem;
    max-width: 700px; 
   
}

.projekt-item a {
    text-decoration: none; /* kein Unterstrich */
    color: inherit;        /* gleiche Farbe wie normaler Text */
    display: block;        /* sorgt dafür, dass sie untereinander stehen */
    font-size: 25px;
}


.projekt-item a:hover {
    color: #f35404; /* deine Akzentfarbe */
}

.footer {
    position: absolute; /* Footer immer am unteren Rand der Seite ankleben */
    bottom: 0;
    width: 100%;
    padding: 2rem;
    border-top: 1px solid #1404f3;
    left: 50%;
    transform: translateX(-50%);
   
}

.article p + p {
    margin-top: 1rem;
}

.artth2 + p {
    margin-top: 1.5rem;
}


/* Font Faces */
@font-face {
    font-family: jetbrainsono;
    font-weight: normal;
    font-style: normal;
    src: url('/src/fonts/SerifbabeSIGMA-Regular.otf') format('otf');
}

@font-face {
    font-family:SerifbabeSIGMA;
    font-weight: bold;
    font-style: normal;
    src: url('/src/fonts/SerifbabeSIGMA-Regular.otf') format('opentype');
}

@media not all and (min-resolution:.001dpcm) { 
  @supports (-webkit-appearance:none) {
    /* Alles hier nur für Safari */
    
    /* Body & Wrapper */
    body {
      padding-left: 0;
      padding-right: 0;
    }

    .wrapper {
      padding-left: 0;
      padding-right: 0;
    }

    /* Flex-Container Kinder */
    .content-layout > *,
    .navigation > * {
      min-width: 0;
    }

    /* Text & Galerie */
    .page-intro,
    .text-block,
    .image-gallery {
      min-width: 0;
      margin-left: 0;
      margin-right: 0;
    }

    /* Galerie Bilder */
    .image-gallery img {
      width: 100%;
    }
  }
}