:root {
  --bg-dark: #2b2b2b;  /*dunkelgrau*/
  --accent: #0077b6;  /*blau*/
  --accent2: #C6842E; /*hellbraun*/
  --text: #333;
  --text-light: #ffffff;
  --btn-bg: var(--accent);
  --btn-text: var(--text-light);
  --bg-hell: #f5f5f5;
  
}

.textRot{
  color: red;
}

/* Basis-Stile */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: var(--bg-hell);
  color: var(--text);
}
a {
  text-decoration: none;
}

.divdarker {
  background-color: rgba(0, 119, 182, 0.3); /* Abdunklung */
  margin: 0px -40px;
  padding: 0px 40px;
}

img {
  border-radius: 8px;
}

/* Footer */
footer {
  background: var(--bg-dark);
  color: var(--text-light);
  text-align: center;
  padding: 20px;
  border-top: 2px solid var(--accent2);
	border-bottom: 2px solid var(--accent2);
}
.footer-links a,
.footer-social a {
  color: var(--text-light);
  margin: 0 5px;
  font-size: 0.9em;
}
.footer-social a {
  font-weight: bold;
}
.footer-social {
  margin-top: 10px;
}

/*Seitenteile nachladen*/
.lazy-section {
  opacity: 0;
  transition: opacity 0.8s ease;
  min-height: 300px;
  border-bottom: 1px solid #ccc;
}

.lazy-section.visible {
  opacity: 1;
}

.placeholder {
  text-align: center;
  padding: 3rem;
  color: #999;
}

.anchor-offset {
  scroll-margin-top: 200px; /* funktioniert mit smooth scroll und Ankern */
}

.button {
  /*background: var(--highlight);*/
  background: var(--btn-bg);
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  display: inline-block;
}

.button:hover {
    filter: brightness(1.2); /* 1.0 ist normal, >1 ist heller */
    cursor: pointer;
}


.content {
    padding: 0 2rem;
}

.content img {
    max-width: 100%;
    height: auto;
    display: block;
}


/* Galerie / Slider-Galerie-Karussell */
.carousel-wrapper {
  position: relative;
  margin-bottom: 1rem;
}

.responsive-gallery {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 10px;
  padding: 10px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.responsive-gallery::-webkit-scrollbar {
  display: none; /* mobil scrollbar ausblenden */
}

.responsive-gallery img {
  flex-shrink: 0;
  /*width: 250px;
  height: auto;*/
  
    height: 180px;              /* Feste Höhe für alle */
    width: auto;                /* Breite ergibt sich automatisch */
    object-fit: cover;          /* Bild wird ggf. beschnitten */

  border-radius: 8px;
  scroll-snap-align: start;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Desktop-Stil: normale Galerie, kein Karussell */
@media screen and (min-width: 768px) {
  .responsive-gallery {
    display: grid;
    /*grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));*/
    grid-template-columns: repeat(auto-fit, minmax(200px, 270px));
    overflow: visible;
    scroll-snap-type: none;
  }

  .responsive-gallery img {
    height: 180px;              /* Feste Höhe für alle */
    width: auto;                /* Breite ergibt sich automatisch */
    object-fit: cover;          /* Bild wird ggf. beschnitten */
    /*width: 100%;
    max-width: 250px;
    height: auto;*/
  }

  .scroll-hint {
    display: none;
  }
}

/* Text / Bild Block */
.text-image-block {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 40px;
}

.text-part {
  flex: 1 1 50%;
}

/* Bildbereich rechts */
.image-part {
  flex: 1 1 50%;
  max-width: 300px;
}

.image-part img {
  width: auto;
  height: 180px;
}

.scroll-hint {
  margin-top: 8px;
  font-size: 0.9rem;
  color: #666;
}

@media (max-width: 768px) {
  .text-image-block {
    flex-direction: column;
  }
  
  .image-part img {
    max-width: 100%;
    height: auto;
  }
}




/* Boote-Galerie Startseite */
.divBootUe-galerie {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.divBootUe-container {
    position: relative;
    display: inline-block;
}

.divBootUe-container img {
    display: block;
    max-width: 100%;
    height: auto;
}
        
.divBootUe {
    position: absolute;
    top: 10px;
    left: 10px;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 1.3em;
    
}

.divBootUe-unten {
    position: absolute;
    bottom: 5px;
    right: 10px;
    color: var(--text-light);
    text-shadow: 1px 1px 4px black;
    font-weight: bold;
}

.divBootUe-container button {
    position: absolute;
    bottom: 5px;
    left: 10px;
    font-weight: bold;
}


/* PopUp-Fenster für Bilder */
.lightbox {
  display: none;
  position: fixed;
  color: var(--text-light);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
  cursor: pointer;
}

.lightbox.open {
  display: flex;
  flex-direction: column;
}