/** ==========================================
    Einstieg in HTML und CSS  
    Stylesheet für die Übungswebsite

    layout.css  
    wird in style.css per @import eingebunden

    ======================================= */



/** 
  * 2. Kopfbereich (inklusive Inhalte)  
  */ 

.site-header { 
  padding: 1rem 1rem 0 1rem;
  margin-bottom: 1rem;
  margin-top: 0;
  }
.site-header h1 { margin-bottom: 0; }
.site-header h1 + p { margin-top: 0; }


.h1pheader {
      font-size: 1.2rem;
      color: #00000095;
      text-align: center;
      letter-spacing: 1.1px;
      }
 @media screen and (min-width: 900px) {
 .h1pheader {
      font-size: 1.6rem;
      color: #00000095;
      letter-spacing: 1px;
       }
  }

/**
  * 3. Inhaltsbereich (ohne Inhalte)
  */

.site-content {
  line-height: 1.5;
  padding: 0 1rem;
  margin-bottom: 2rem;
}   

/**
  * 4. Fußbereich (inklusive Inhalte)
  */ 
.site-footer {
  font-size: smaller;
  background-color: var(--grau-dunkel);
  color: var(--basisfarbe);
  padding: 0.5rem 1rem;
}

.site-footer ul {
  list-style-type: none;
  display: flex; 
  /* justify-content: flex-end; */
  gap: 1rem;
  padding: 0;
  margin: 0; 
}
.socialicons li:last-child {
 margin-left: auto;
}

.socialicons ul
 {
 position: static;
 visibility: visible;
 justify-content: ;
 flex-flow: row;
 padding: 0;
 margin-top: 0.5rem;
}

.openhours ul
 {
 position: static;
 visibility: visible;
 justify-content: ;
 flex-flow: row;
 padding: 0;
 margin-top: 0.5rem;
 margin-bottom: 0.5rem;
}

.openhours li:last-child {
 margin-left: auto;
}

.pflichtlinks ul
 {
 position: static;
 visibility: visible;
 justify-content: flex-end;
 flex-flow: row;
 padding: 0;
 margin-top: 1rem;
 margin-bottom: 1rem;
}
.pflichtlinks li:first-child {
 margin-right: auto;
}


.sitelinks {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.sitelinks li:last-child {
 margin-left: auto;
}

.site-footer a {
  color: var(--basisfarbe); 
  text-decoration: none; 
}


 /* Abstandshalter */
 .startseite .abstand {
     margin-bottom: 10rem;
 }

@media screen and (min-width: 900px) {
 .mobile-nav-site .abstand {
     margin-bottom: 30rem;
 }
}

@media screen and (max-width: 899px) {
 .mobile-nav-site .abstand {
     margin-bottom: 15rem;
 }
}




/* Grundlegendes Styling für die Box */
details {
  border: 0;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
  background-color: #ffffff;
  transition: background-color 0.2s ease;
  /* Ermöglicht die Animation des inneren Inhalts */
  interpolate-size: allow-keywords;
}

/* Der versteckte Inhalt (wird automatisch beim Öffnen animiert) */
details::details-content {
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, height 0.3s ease, content-visibility 0.3s allow-discrete;
}

/* Zustand, wenn details geöffnet ist */
details[open]::details-content {
  opacity: 1;
  height: auto;
}

/* Das klickbare Element (Überschrift / Label) */
summary {
  cursor: pointer;
  list-style: none; /* Standard-Dreieck in manchen Browsern ausblenden */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
  color: #0033cc;
}

/* Standard-Pfeil (Marker) für Safari/Chrome entfernen */
summary::-webkit-details-marker {
  display: none;
}

/* Eigenes Plus/Minus- oder Pfeil-Symbol hinzufügen */
summary::after {
  content: "+";
  font-size: 1.2rem;
  font-weight: bold;
  transition: transform 0.2s ease;
}

/* Symbol ändern, wenn details geöffnet ist */
details[open] summary::after {
  content: "-";
}

/* Inhalt der Details */
details p {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
}



/* Ende layout.css */