body {
      font-family: 'Georgia', serif;
      font-size: 20px;
      background-color: #f8f4f0;
      color: #3e3a36;
      padding-top: 70px; /* Höhe der Navbar + etwas Puffer */
    }
    .navbar {
      background-color: #4a3f35;
    }
    .navbar-brand, .nav-link {
      color: #f3e9dc !important;
    }
    .dropdown-menu .dropdown-item {
      font-size: 1.3rem; /* z.B. 110% der normalen Schriftgröße */
    }

    .hero {
      background: url('pics/schloss-groeditz2.jpg') center center/cover no-repeat;
      height: 60vh;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #f3e9dc;
      text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
    }
    section {
      scroll-margin-top: 80px; /* Höhe deiner Navbar */
    }

    .section-title {
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Georgia', serif;
      font-weight: 700;
      font-size: 2.5rem;
      letter-spacing: 1px;
      color: #3a2f28;
      margin: 1rem 0;
      margin-bottom: 3rem;
      text-align: center;
    }

    .section-title::before,
    .section-title::after {
      content: "";
      flex: 1;                           /* füllt links/rechts auf */
      height: 2px;
      margin: 0 1rem;                    /* Abstand zwischen Linie und Text */
      background: linear-gradient(to right, transparent, #8b6f47, transparent);
    }

    .card {
      border: none;
      box-shadow: 0 2px 8px rgb(0 0 0 / 0.1);
    }
    footer {
      background-color: #4a3f35;
      color: #f3e9dc;
      padding: 2rem 0;
      width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
    }
    img {
      max-width: 100%;
      height: auto;
    }
    
    
    .text-image-wrap {
      overflow: auto; /* sorgt dafür, dass Container die Floats erkennt */
      margin-bottom: 1.5rem;
    }

    .text-image-wrap img {
      max-width: 100%;
      height: auto;
      margin-bottom: 1rem;
    }

    /* Standard float rechts */
    .text-image-right {
      float: right;
      margin-left: 1rem;
      margin-bottom: 1rem;
    }

    /* Float links */
    .text-image-left {
      float: left;
      margin-right: 1rem;
      margin-bottom: 1rem;
    }

    /* Unterhalb von 1400px immer zentrieren */
    @media (max-width: 1400px) {
      .text-image-right,
      .text-image-left {
          float: none;
          display: block;
          margin: 0 auto 1rem auto; /* zentriert */
      }
    }

    /* Eigene Bootstrap-Erweiterung */
    .text-justify {
        text-align: justify;
    }

    /* Optional: Blocksatz auch in mobilen Ansichten etwas lockerer machen */
    @media (max-width: 576px) {
        .text-justify {
            text-align: left;
        }
    }

    .mySwiperBig .swiper-wrapper,
    .mySwiperSmall .swiper-wrapper {
      align-items: center;
      overflow: visible;
    }

    .mySwiperBig .swiper-slide,
    .mySwiperSmall .swiper-slide {
      height: var(--slide-h);
    }

    .mySwiperBig .swiper-slide,
    .mySwiperSmall .swiper-slide {  
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: visible;
      transition: transform 0.3s ease, z-index 0.3s ease;
      z-index: 1;
    }

    .mySwiperBig .swiper-slide img,
    .mySwiperSmall .swiper-slide img {
      height: 100%;
      width: auto !important;
      object-fit: contain;
      border-radius: 15px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      transform-origin: center center;
    }

    .mySwiperBig .swiper-slide-active,
    .mySwiperSmall .swiper-slide-active {
      z-index: 10;
    }

    .mySwiperBig .swiper-slide-active img,
    .mySwiperSmall .swiper-slide-active img {
      transform: scale(1.6);

    }

    @media (min-width: 1200px) { .mySwiperBig { --slide-h: 650px; } .mySwiperSmall { --slide-h: 400px; }}
    @media (max-width: 1200px) { .mySwiperBig { --slide-h: 50vw; } .mySwiperSmall { --slide-h: 25vw; }}
    @media (max-width: 992px)  { .mySwiperBig { --slide-h: 45vw; } .mySwiperSmall { --slide-h: 20vw; }}
    @media (max-width: 768px)  { .mySwiperBig { --slide-h: 40vw; } .mySwiperSmall { --slide-h: 20vw; }}