/* ===== Root & Reset ===== */ 
:root { --primary: #0077be;
     --secondary: #c9e9f9;
      --dark: #1f1f1f;
       --header-height: 110px;
     } 
     * { box-sizing: border-box;
         margin: 0;
          padding: 0; } 

body { font-family: "Segoe UI", sans-serif;
     color: var(--dark);
      line-height: 1.6; } 

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

header { position: fixed;
     top: 0; left: 0; width: 100%;
      height: var(--header-height);
       background: white;
        display: flex;
         align-items: center;
          justify-content: space-between;
           padding: 0 2rem;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
             z-index: 1000; }
             
/* Logo */
 .logo-container { display: flex;
     align-items: center;
      height: 100%;
     }
     
.logo { max-height: 110px;
     
/* Desktop */ 

width: auto; 
height: auto; 
object-fit: contain; 
display: block; } 

/* SEO-H1 unsichtbar */ 
.sr-only { position: absolute; 
     width: 1px; 
     height: 1px; 
     overflow: hidden; 
     clip: rect(0,0,0,0); } 

     /* ===== Navigation ===== */
     /* Desktop Menü */ 
     
.desktop-menu ul { display: flex;
      flex-direction: row;
       list-style: none; gap: 2rem; } 
       
.desktop-menu ul li a { text-decoration: none;
     color: var(--dark); 
     font-weight: 500; 
     padding: 5px 10px; } /* Hamburger Icon (Mobile) */ 
     
.menu-btn { display: none; font-size: 1.8rem; cursor: pointer; } 

/* Mobile Menü */ 
.mobile-menu { display: none; 
     position: absolute; 
     top: var(--header-height); right: 1rem; 
     background: white; width: 220px; box-shadow: 0 6px 20px rgba(0,0,0,0.15); 
     flex-direction: column; gap: 10px; padding: 0.5rem 0; border-radius: 8px; } 
     .mobile-menu a { display: 
          block; padding: 1rem 1.2rem; border-bottom: 1px 
          solid #eee; color: var(--dark); text-decoration: 
          none; }
          
          /* ===== Main Content ===== */ 
          
          
main { margin-top: var(--header-height); } 

section { padding: 4rem 2rem; } 

/* Anchor-Fix */ 

section[id] { scroll-margin-top: var(--header-height); } 

/* ===== Hero ===== */ 

.hero { background: linear-gradient(to right, var(--primary), #00aaff); 
     color: white; text-align: center; } 
     
.hero h2 { font-size: 2.2rem; margin-bottom: 1rem; } 

/* ===== Grid / Cards ===== */

.grid { display: grid; 
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
     gap: 2rem; max-width: 1200px; margin: auto; } 
     



     .card2 { background: white; 
          padding: 2rem; 
          border-radius: 12px; 
          box-shadow: 0 6px 20px rgba(0,0,0,0.08); }      

.card2 img.cardpic { width: 100%; 
     height: auto; display: block; 
     border-radius: 12px; object-fit: cover; } 
    


.card { background: white; 
          padding: 2rem; 
          border-radius: 12px; 
          box-shadow: 0 6px 20px rgba(0,0,0,0.08); }      

.card img.cardpic { width: 100%; 
     height: auto; display: block; 
     border-radius: 12px; object-fit: cover; } 
    

.grid1 { display: block; gap: 2rem; max-width: 1200px; margin: auto; text-align: center; } 

.grid2 { display: grid; 
     grid-template-columns: repeat(auto-fit, minmax(50%, 1fr)); 
     gap: 2rem; max-width: 1200px; margin: auto; } 

     
/* Desktop: max. Höhe, Bild wird trotzdem proportional */ 

@media (min-width: 769px) { 
     
.card img.cardpic { max-height: 300px; 
     
/* oder 250px – passt zu deinem Grid */ } } 

/* Mobile: volle Breite, Höhe automatisch */ 

@media (max-width: 768px) { 
.card img.cardpic { max-height: none; 
     
/* Bild passt sich flexibel an */ 

height: auto; } } 

/* ===== Kontaktformular ===== */ 

#kontakt form { max-width: 600px; 
margin: auto; 
display: flex; 
flex-direction: column; 
gap: 1rem; } #kontakt input, #kontakt textarea { padding: 0.8rem; border-radius: 8px; border: 1px solid #ccc; font-family: inherit; } #kontakt textarea { min-height: 140px; resize: vertical; } #kontakt button { background: var(--primary); color: white; border: none; padding: 0.9rem; border-radius: 8px; font-size: 1rem; cursor: pointer; } /* ===== Footer ===== */ footer { background: var(--dark); color: white; text-align: center; padding: 1.5rem; } footer a { color: #7491c5; text-decoration: none; margin: 0 1rem; } /* ===== Hover nur Desktop ===== */ @media (hover: hover) and (pointer: fine) { nav a, footer a, .mobile-menu a { transition: transform 0.2s ease; } nav a:hover, footer a:hover, .mobile-menu a:hover { transform: scale(1.08); } img { transition: filter 0.3s ease; filter: saturate(85%); } img:hover { filter: saturate(120%); } } /* ===== Mobile ===== */ @media (max-width: 768px) { :root { --header-height: 95px; } .logo { max-height: 95px; } /* Desktop-Menü ausblenden */ .desktop-menu { display: none; } /* Hamburger Icon einblenden */ .menu-btn { display: block; } /* Mobile Menü sichtbar, wenn 'active' */ .mobile-menu.active { display: flex; } } .fc-event.full { background: #aaa; border-color: #aaa; cursor: not-allowed; } .modal { display: none; /* versteckt */ position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.5); } .modal-content { background-color: #fff; margin: 5% auto; padding: 20px; border-radius: 10px; width: 80%; max-width: 600px; position: relative; } .close { color: #333; position: absolute; top: 10px; right: 20px; font-size: 28px; font-weight: bold; cursor: pointer; } .close:hover { color: red; } .booking-iframe { width: 100%; height: 900px; border: none; } /* Overlay */ .consent-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.75); display: flex; justify-content: center; align-items: center; z-index: 1000; } /* Box */ .consent-box { background: #fff; padding: 2rem; max-width: 500px; text-align: center; border-radius: 10px; box-shadow: 0 0 15px rgba(0,0,0,0.5); } .consent-btn { margin-top: 1rem; padding: 0.8rem 1.5rem; font-size: 1rem; border: none; border-radius: 6px; background: #0077cc; color: white; cursor: pointer; } 

.consent-btn:hover { opacity: 0.9; } /* Iframe initially hidden */ .hidden { display: none; }