@charset "utf-8";

/*
  =====================================================================
  BEREINIGTE styles.css
  Nur die wirklich benötigten Ergänzungen für diese Startseite.
  Die Grundbühne, Hintergründe und Titel kommen weiterhin aus:
  - styles_bee.css
  Die Navigation kommt weiterhin aus:
  - styles_nav.css
  =====================================================================
*/

/* -------------------------------------------------
   1) GRUNDLAGEN
   ------------------------------------------------- */

/* Einheitliches Box-Modell */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Standardbild-Verhalten */
img {
  max-width: 100%;
  display: block;
}

/* Grundlegendes Body-Fallback */
body {
  margin: 0;
  line-height: 1.5;
  font-family: Inter, Arial, Helvetica, sans-serif;
  color: #ffffff;
}

/* Links */
a {
  color: #9bd3fc;
  text-decoration: none;
}

a:hover {
  color: #ffffff;
}

/* Überschriften im klassischen Vereinsstil für Footer usw. */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 12px 0;
}

/* -------------------------------------------------
   2) HEADER / TOPBAR / WRAPPER
   ------------------------------------------------- */

/*
  Der bestehende Header aus styles_bee.css ist fixed.
  Hier definieren wir zusätzlich den mittigen Innenbereich.
*/
#wrapper {
  width: min(1200px, calc(100% - 32px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Logo-Link */
.start {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* -------------------------------------------------
   3) SAMSTAGS-SEKTION
   ------------------------------------------------- */

/*
  Hauptlayout der Samstag-Sektion:
  Bild links, Infos rechts
*/
.dk-main-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 50px;
  margin-top: 110px;
  color: #ffffff;
}

/* Linke Spalte mit Perspektive für Hover-Effekt */
.dk-image-side {
  flex: 1 1 55%;
  max-width: 750px;
  perspective: 1200px;
}

/* Anklickbarer Bereich */
.dk-3d-anchor {
  display: block;
  text-decoration: none;
}

/* Karte mit sanfter 3D-Animation */
.dk-3d-card {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.dk-3d-card img {
  width: 100%;
  height: auto;
  border-radius: 16px;
}

/* Hover-Effekt */
.dk-3d-card:hover {
  transform: rotateY(-12deg) rotateX(5deg) scale(1.02);
}

/* Ticket-Hinweis auf dem Bild */
.dk-overlay-hint {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%) translateZ(40px);
  padding: 10px 20px;
  border-radius: 999px;
  background: rgba(128, 171, 30, 0.95);
  color: #ffffff;
  font-weight: 700;
  font-size: 1.1rem;
  white-space: nowrap;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Rechte Spalte */
.dk-info-side {
  flex: 1 1 45%;
  text-align: left;
}

/* Hervorgehobener Datums-/Preisblock */
.dk-highlight-box {
  margin-bottom: 24px;
}

/* Datums-Kapsel */
.dk-event-date {
  display: inline-block;
  margin-bottom: 50px;
  padding: 18px 40px 20px 40px;
  border: 4px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  background: rgba(128, 171, 30, 0.95);
  color: #ffffff;
  font-size: 2.5rem;
  font-weight: 900;
}

/* Preisliste */
.dk-price-list {
  margin-top: 8px;
  font-size: 1.25rem;
}

.dk-price-list p {
  margin: 0 0 10px 0;
}

.dk-price-list strong {
  font-size: 1.7rem;
  color: #ffffff;
}

/* Gute-Freunde-Karte */
.dk-promo-card {
  margin-bottom: 28px;
  padding: 24px;
  border-left: 6px solid #80ab1e;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(4px);
}

.dk-promo-card h3 {
  margin-bottom: 18px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 2rem;
  color: #ffffff;
}

/* Vorteils-Liste */
.dk-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dk-list-pong {
  list-style: none;
  margin: 0;
  padding: 0;
}


.dk-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  color: #ffffff;
  font-size: 1.2rem;
}

.dk-list-pong li {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  color: #ffffff;
  font-size: 2.0rem;
}

.dk-list li:last-child {
  margin-bottom: 0;
}

.dk-list img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

/* Hinweis unter dem Paket */
.dk-footer-info {
  color: #e7e7e7;
  line-height: 1.4;
}

.age-note {
  margin: 0 0 6px 0;
  font-size: 1.4rem;
}

/* -------------------------------------------------
   4) SONNTAGS-SEKTION (NEU, ZWEISPALTIG)
   ------------------------------------------------- */

/*
  Eigene Section mit halbtransparentem Hintergrund,
  damit sie sich unterhalb der Samstag-Werbung klar absetzt.
*/
.program-step {
  padding: 100px 0 90px;
  position: relative;
  z-index: -10;
}

.alt-bg {
  background: rgba(7, 45, 18, 0.62);
  backdrop-filter: blur(4px);
  
}

/* Zweispaltiges Raster */
.program-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: start;
}

/* Linke Spalte */
.program-content {
  color: #ffffff;
}

/* Kleine Sektion-Kennzeichnung */
.section-badge {
  display: inline-block;
  margin-bottom: 18px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(233, 215, 182, 0.14);
  border: 1px solid rgba(233, 215, 182, 0.35);
  color: #e9d7b6;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Sonntag-Headline */
.program-title {
  margin-bottom: 50px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: #ffffff;
}

/* Kurzer Einleitungstext */
.program-intro {
  margin: 0 0 30px 0;
  max-width: 60ch;
  color: rgba(255, 255, 255, 0.82);
  font-size: 2.08rem;
}

/* Einzelner Programmpunkt */
.event-entry {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
  padding-left: 20px;
  border-left: 3px solid #80ab1e;
  transition: transform 0.3s ease;
}

.event-entry:hover {
  transform: translateX(8px);
}

/* Uhrzeit-Spalte */
.event-time {
  min-width: 170px;
  color: #e9d7b6;
  font-size: 2.15rem;
  font-weight: 700;
}

/* Text rechts */
.event-desc h3 {
min-width: 550px;
  margin: 0 0 6px 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 2.45rem;
  color: #ffffff;
}

.event-desc p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
}



/* Abschluss-Badge für 18 Uhr */
.info-badge {
  display: inline-block;
  margin-top: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(128, 171, 30, 0.95);
  color: #ffffff;
  font-weight: 700;
}

/* Rechte Spalte */
.program-visual {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Bilderrahmen */
.deco-frame {
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(6px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* Bild in rechter Spalte */
.featured-img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  object-fit: cover;
}



/* -------------------------------------------------
   5) FOOTER
   ------------------------------------------------- */

footer {
  position: relative;
  z-index: 10;
  margin-top: 0;
  padding: 40px 0;
  background: #2c3133;
  color: #ffffff;
}

/* Footer-Innenbreite */
.wrapper {
  width: min(1200px, calc(100% - 32px));
  margin: 0 auto;
}

/* Zeile im Footer */
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

/* Drei Spalten */
.column {
  flex: 1 1 300px;
}

/* Drittel-Spaltenklasse kompatibel beibehalten */
.third {
  flex: 1 1 300px;
}

/* Einzelne Box im Footer */
.footer-box {
  padding: 8px 0;
}

.footer-box p {
  margin: 0 0 10px 0;
}

.white {
  color: #ffffff;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.5rem;
}

/* -------------------------------------------------
   6) RESPONSIVE
   ------------------------------------------------- */

@media (max-width: 1100px) {
  .program-layout {
    grid-template-columns: 1fr;
  }

  .program-visual {
    max-width: 760px;
  }
}

@media (max-width: 900px) {
  #wrapper {
    gap: 16px;
  }

  .dk-main-wrapper {
    flex-direction: column;
    align-items: center;
    gap: 36px;
    margin-top: 100px;
  }

  .dk-image-side,
  .dk-info-side {
    width: 100%;
    max-width: 820px;
  }

  .dk-info-side {
    text-align: center;
  }

  .dk-highlight-box {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .dk-list li {
    justify-content: center;
    text-align: left;
  }

  .dk-3d-card:hover {
    transform: scale(1.02);
  }

  .program-step {
    padding: 80px 0 70px;
  }

  .event-entry {
    flex-direction: column;
    gap: 8px;
    padding-left: 0;
    padding-top: 16px;
    border-left: none;
    border-top: 2px solid #80ab1e;
  }

  .event-time {
    min-width: auto;
  }
}
/* -------------------------------------------------
   7) NEUE GALERIE-SECTION (NEU)
   ------------------------------------------------- */
/* Container für die statische Ansicht */
.gallery-static-container {
  width: 100%;
  background-color: #1a3c1a; /* Dunkelgrün */
  padding: 60px 20px;
  border-top: 3px solid #2d5a2d;
  text-align: center;
}

.gallery-title {
  color: #ffffff;
  font-family: 'Playfair Display', serif;
  margin-bottom: 40px;
  font-size: 3rem;
}

/* Anordnung der 7 Kacheln */
.sponsor-grid {
  display: flex;
  flex-wrap: wrap; /* Erlaubt Zeilenumbruch auf kleinen Bildschirmen */
  justify-content: center; /* Zentriert die Kacheln mittig */
  gap: 20px; /* Abstand zwischen den Kacheln */
  max-width: 2000px;
  margin: 0 auto;
}

/* Einzelne Kachel */
.gallery-item {
  flex: 0 1 250px; /* Basisbreite von 180px */
  height: 250px;
  background-color: rgba(7, 45, 18, 0.62);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  cursor: pointer;
}

.gallery-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* HOVER-EFFEKT: Kachel wird größer */
.gallery-item:hover {
  transform: scale(2.1); /* 20% Vergrößerung */
  z-index: 100;
  box-shadow: 0 15px 30px rgba(0,0,0,0.5);
}

/* Mobile Optimierung */
@media (max-width: 980px) {
  .gallery-item {
    flex: 0 1 140px;
    height: 100px;
  }
}
@media (max-width: 600px) {
  .dk-event-date {
    padding: 14px 18px;
    font-size: 1.35rem;
    border-radius: 22px;
  }

  .dk-price-list strong {
    font-size: 1.35rem;
  }

  .dk-promo-card h3 {
    font-size: 1.5rem;
  }

  .dk-list li {
    font-size: 1rem;
  }

  .age-note {
    font-size: 1.1rem;
  }

  .program-title {
    font-size: rem;
  }

  .event-desc h3 {
    font-size: 1.2rem;
  }

  .program-side-card {
    padding: 18px;
  }
}