/*
 * ============================================
 * karin.css
 * ============================================
 * 
 * Eigene CSS-Stile für das Karin-Projekt
 * 
 * Diese Datei enthält alle projektspezifischen
 * CSS-Styles. Bootstrap wird als Basis verwendet.
 * 
 * Struktur:
 * 1. Variablen
 * 2. Allgemeine Styles
 * 3. Header
 * 4. Navigation
 * 5. Content
 * 6. Footer
 * 
 * ============================================
 */

/* --------------------------------------------
 * 1. Variablen
 * -------------------------------------------- */

/* --------------------------------------------
 * 2. Allgemeine Styles
 * -------------------------------------------- */
   html {
      scroll-behavior: smooth;
   }

   html,
   body {
      height: 100%;
   }
   body {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
   }
/* --------------------------------------------
 * 3. Header
 * -------------------------------------------- */

/* --------------------------------------------
 * 4. Navigation
 * -------------------------------------------- */
 /* Navbar im Ausgangszustand — groß */
   .navbar {
      padding-top: 1.25rem;
      padding-bottom: 1.25rem;
      transition: padding 0.3s ease;
   }

   .navbar .navbar-brand img {
      max-height: 70px;
      transition: max-height 0.3s ease;
   }

   /* Navbar nach dem Scrollen — kleiner */
   .navbar.navbar-scrolled {
      padding-top: 0.4rem;
      padding-bottom: 0.4rem;
   }

   .navbar.navbar-scrolled .navbar-brand img {
      max-height: 40px;
   }

   /* Aktiver Menüpunkt — deutlich sichtbar */
   .navbar .nav-link.active {
      color: #000 !important;
      font-weight: 600;
      border-bottom: 2px solid #000;
   }
/* --------------------------------------------
 * 5. Content
 * -------------------------------------------- */
/* --------------------------------------------
 * Blockquote
 * -------------------------------------------- */

   /* Zitat-Stil im Textinhalt */
   .content blockquote {
      border-left: 4px solid #000;
      padding-left: 1.25rem;
      margin-left: 0;
      font-style: italic;
      color: #555;
   }
   
/* --------------------------------------------
 * 6. Footer
 * -------------------------------------------- */


 /* --------------------------------------------
* Bildergalerie                                                                                                                                     
* -------------------------------------------- */                                                                                                   
                                                                                                                                                   
/* Thumbnail — Hover-Effekt und Klick-Cursor */                                                                                                   
.gallery-thumb {                                                                                                                                  
   cursor: pointer;                                                                                                                               
   overflow: hidden;                                                                                                                              
   border-radius: 0.375rem;                                                                                                                       
}                                                                                                                                                 
               
.gallery-thumb img {                                                                                                                              
   transition: transform 0.3s ease, opacity 0.3s ease;
}                                                                                                                                                 

.gallery-thumb:hover img {                                                                                                                        
   transform: scale(1.05);
   opacity: 0.85;                                                                                                                                 
}                                                                                                                                                 
                                                                                                                                                   
/* Lightbox-Modal — Bild mittig und responsive */                                                                                                 
.modal-content.bg-black {
   background-color: #000 !important;                                                                                                             
}                                                                                                                                                 
                                                                                                                                                   
.modal-content.bg-black .carousel-item img {                                                                                                      
   max-height: 80vh;
   object-fit: contain;                                                                                                                           
   margin: 0 auto;
}                                                                                                                                                 
               
/* Bildunterschrift im Carousel */                                                                                                                
.modal-content.bg-black .carousel-caption {
   background: rgba(0, 0, 0, 0.6);                                                                                                                
   padding: 0.5rem 1rem;                                                                                                                          
   border-radius: 0.25rem;                                                                                                                        
   bottom: 1rem;                                                                                                                                  
}   


/* Hochkant-Bild: feste Höhe, Gesicht oben */
.hero-portrait {
   width: 100%;
   height: 360px;
   object-fit: cover;
   object-position: top center;
}

/* Galerie-Modal Backdrop dunkler — Deckkraft von 0.5 auf 0.9 erhöht */
.modal-backdrop.show {
   opacity: 0.9;
}