@charset "UTF-8";
.top-promo {
  display: flex; /* Flexbox verwenden */
  justify-content: center; /* Zentriert horizontal */
  align-items: center; /* Zentriert vertikal */
  background: #ffd633; /* Hintergrundfarbe */
  color: black; /* Textfarbe */
  text-decoration: none; /* Kein Unterstrich im Text */
  font-size: 0.75rem; /* Schriftgröße */
  line-height: 1.5; /* Zeilenhöhe */
  width: 100%; /* Volle Breite */
  border: none; /* Kein Rand */
  cursor: pointer; /* Zeigt, dass es anklickbar ist */
  padding: 10px;
  font-weight: bold;
  transition: all 0.3s ease-out; /* HINZUGEFÜGT: Für sanftes Ausblenden */
}

.top-promo:hover {
  background: #ffc400; /* Hintergrundfarbe beim Hover */
  color: white; /* Textfarbe beim Hover */
  text-decoration: none; /* Kein Unterstrich */
}

.navbar-small {
  display: flex;
  justify-content: center; /* Container in der Mitte zentrieren */
  align-items: center; /* Vertikale Zentrierung */
  background: rgba(0, 0, 0, 0.3); /* Hintergrundfarbe */
  color: white; /* Textfarbe */
  width: 100%; /* Navbar deckt die gesamte Breite ab */
  padding: 10px;
  font-weight: normal;
  font-size: 0.75rem;
  transition: all 0.3s ease-out; /* HINZUGEFÜGT: Für sanftes Ausblenden */
}

.navbar-container {
  display: flex; /* Flexbox für die Inhalte */
  justify-content: space-between; /* Linken und rechten Text verteilen */
  align-items: center; /* Vertikal zentriert */
  max-width: 1150px; /* Maximale Breite */
  width: 100%; /* Bei kleineren Bildschirmen nimmt es die volle Breite */
}

/* ERSETZE deine alte ".navbar-left, .navbar-right" Regel
  durch diese ZWEI neuen Regeln:
*/
.navbar-right {
  text-decoration: none;
  cursor: pointer;
}

.navbar-left {
  text-decoration: none;
  cursor: pointer;
  /* === HIER BEGINNT DER FIX === */
  /* 1. Desktop: Zeilenumbruch erlauben */
  display: flex;
  flex-wrap: wrap; /* Erlaubt den Blasen, in die nächste Zeile zu springen */
  gap: 8px; /* Sauberer Abstand (horizontal & vertikal) */
  align-items: center; /* Vertikale Ausrichtung, falls Blasen unterschiedlich hoch sind */
  /* 2. Mobil: Horizontales Scrollen (Swipen) */
  /* === ENDE DES FIX === */
}
@media (max-width: 768px) {
  .navbar-left {
    flex-wrap: nowrap; /* Keinen Zeilenumbruch auf Mobil */
    overflow-x: auto; /* Horizontales Scrollen/Swipen erlauben */
    white-space: nowrap; /* Alle Blasen in einer Zeile halten */
    /* Scrollbar verstecken (optional, aber schöner) */
    -ms-overflow-style: none; /* IE/Edge */
    scrollbar-width: none; /* Firefox */
    /* Chrome/Safari Scrollbar verstecken */
    /* * Verhindert, dass die Blasen beim Scrollen "gequetscht" werden.
      * Wir müssen alle Blasen-Typen ansprechen, die in .navbar-left sind.
    */
  }
  .navbar-left::-webkit-scrollbar {
    display: none;
  }
  .navbar-left .text-in-bubble,
  .navbar-left .text-in-bubble-blue,
  .navbar-left .text-in-bubble-orange,
  .navbar-left .text-in-bubble-yellow {
    flex-shrink: 0;
  }
}

.text-in-bubble-orange {
  padding: 4px 14px;
  background: #e65100;
  border-radius: 75px;
}

.text-in-bubble-blue {
  padding: 4px 14px;
  background: #0096e6;
  border-radius: 75px;
}

.text-in-bubble-yellow {
  padding: 4px 14px;
  background: #e6b000;
  border-radius: 75px;
}

.navbar-small a {
  color: white;
}

.text-in-bubble {
  padding: 3px 14px;
  border: 1px solid white;
  border-radius: 75px;
}
.text-in-bubble a {
  color: white;
}

.navbar-transparent {
  display: flex;
  justify-content: center; /* Container in der Mitte zentrieren */
  align-items: center; /* Vertikale Zentrierung */
  color: white; /* Textfarbe */
  width: 100%; /* Navbar deckt die gesamte Breite ab */
  padding: 10px;
  font-weight: bold;
  font-size: 1.25rem;
}

.navbar-transparent a {
  color: white;
}

.navbar-right a {
  color: white;
  text-decoration: none;
  margin-left: 10px;
}

.promo-transparent {
  display: flex;
  justify-content: center; /* Container in der Mitte zentrieren */
  align-items: center; /* Vertikale Zentrierung */
  color: white; /* Textfarbe */
  width: 100%; /* Navbar deckt die gesamte Breite ab */
  padding: 10px;
  font-weight: bold;
  font-size: 1.25rem;
}

.promo-container-middle {
  display: block; /* Flexbox für die Inhalte */
  align-items: center; /* Vertikal zentriert */
  max-width: 900px; /* Maximale Breite */
  width: 100%;
}

.promo-container-middle h1 {
  text-shadow: black 0 0 2px;
}

.promo-container-middle h2 {
  text-shadow: black 0 0 2px;
}

@media (max-width: 768px) {
  .promo-container-middle h1 {
    font-size: 20pt;
  }
  .promo-container-middle h2 {
    font-size: 16pt;
  }
}
.jumbo-header {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgb(255, 255, 255)), url("/assets/images/background/beach2.jpg") no-repeat center center;
  background-size: cover;
  min-height: 500px;
  position: relative;
  color: white;
}

@media (max-width: 768px) {
  .jumbo-header {
    min-height: 200px;
  }
}
.jumbo-header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.showcase-section {
  max-width: 1150px;
  margin: 20px auto; /* Zentriert die Sektion horizontal */
  padding: 20px;
  display: block; /* Stellt sicher, dass das Element als Block-Level funktioniert */
}

.section-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
}

.custom-card {
  border: none;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background-color: #fff; /* Hintergrund der Karte */
  position: relative; /* Wichtig für die Positionierung der inneren Elemente */
}

.custom-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

a .custom-card {
  color: black;
}

.custom-card-img {
  height: 200px;
  position: relative;
  overflow: hidden; /* Stellt sicher, dass Inhalte nicht aus der Karte herausragen */
}

.custom-card-img img {
  display: block;
  width: 100%; /* Bild passt sich der Breite des Containers an */
  height: 100%; /* Bild passt sich der Höhe des Containers an */
  object-fit: cover; /* Skalierung wie background-size: cover */
  object-position: center; /* Bild wird zentriert */
  border: none; /* Entfernt jegliche Ränder */
}

.deal-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: #000;
  color: #fff;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 5px;
  z-index: 10;
}

.deal-circle {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: #ff5722;
  color: #fff;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 20; /* Höherer Z-Index, damit der Kreis über dem Bild liegt */
  transform: translate(20%, 20%); /* Optional: leichte Verschiebung */
}

.custom-card-body {
  text-align: center;
  padding: 15px;
}

.custom-card-title {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0;
}

.custom-btn {
  background-color: #ffc107;
  color: #000;
  text-transform: uppercase;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  transition: background-color 0.3s ease;
  font-weight: bold;
  display: inline-block;
}

.custom-btn:hover {
  background-color: #ffb300;
}

/* --- Stile für das neue Mobile Hamburger Menü --- */
.mobile-nav-toggle {
  display: none; /* Standardmäßig auf Desktop versteckt */
  font-size: 2rem;
  cursor: pointer;
  user-select: none; /* Verhindert Text-Markierung beim Klicken */
  z-index: 1001; /* Stellt sicher, dass er über dem Header-Bild liegt */
}

.mobile-nav-menu {
  display: none; /* Standardmäßig komplett versteckt */
  position: fixed; /* Bleibt beim Scrollen an Ort und Stelle */
  top: 0;
  left: 0;
  width: 100vw; /* Volle Bildschirmbreite */
  height: 100vh; /* Volle Bildschirmhöhe */
  background: rgba(10, 20, 30, 0.98); /* Dunkles Overlay */
  z-index: 1050; /* Liegt über allem anderen */
  text-align: center;
  padding-top: 80px; /* Platz oben */
}

/* Zeigt das Menü, wenn es per JS die Klasse 'active' bekommt */
.mobile-nav-menu.active {
  display: block;
}

.mobile-nav-close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 3rem;
  color: white;
  cursor: pointer;
  line-height: 1;
}

.mobile-nav-menu a {
  display: block;
  color: white;
  text-decoration: none;
  padding: 20px;
  font-size: 1.5rem; /* Große, klickbare Schrift */
  font-weight: bold;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-nav-menu a:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Dies ist die "Weiche" zwischen Desktop und Mobil */
@media (max-width: 768px) {
  .desktop-nav {
    display: none; /* Desktop-Links auf Mobil ausblenden */
  }
  .mobile-nav-toggle {
    display: block; /* Hamburger-Button auf Mobil einblenden */
  }
}
/* --- STICKY HEADER FIX --- */
.sticky-nav-header {
  position: sticky; /* Der Befehl zum "Klebenbleiben" */
  top: 0; /* Bleibt ganz oben (bei 0px) */
  z-index: 1000; /* Stellt sicher, dass die Navi über allem liegt */
}

/* * WICHTIG: Deine Navbars waren transparent für das Bild.
 * Sobald sie über den Inhalt scrollen, brauchen sie einen soliden Hintergrund,
 * sonst wird der Text unleserlich.
*/
.sticky-nav-header .top-promo {
  /* Behält den gelben Hintergrund, funktioniert gut */
}

.sticky-nav-header .navbar-small {
  background: rgba(0, 0, 0, 0.9); /* Ein fast schwarzer Hintergrund */
  /* Alternative: eine fixe Farbe, z.B. background: #222; */
}

.sticky-nav-header .navbar-transparent {
  background: #ffffff; /* Ein solider weißer Hintergrund */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Ein leichter Schatten */
}

/* * PROBLEM: Deine Links in 'navbar-transparent' waren WEISS
 * (für das dunkle Bild). Auf unserem neuen WEISSEN Hintergrund
 * müssen wir sie umfärben.
*/
.sticky-nav-header .navbar-transparent,
.sticky-nav-header .navbar-transparent .navbar-left,
.sticky-nav-header .navbar-transparent a {
  color: #333; /* Dunkle Farbe für Text & Links */
}

/* Wir müssen auch den mobilen Hamburger-Button umfärben */
.sticky-nav-header .navbar-transparent .mobile-nav-toggle {
  color: #333;
}

/* --- Styling für die neue Akkordeon-Checkliste --- */
.checklist-accordion {
  max-width: 900px; /* Oder eine Breite, die zu deinem Layout passt */
  margin: 2rem auto;
  border-radius: 10px;
  overflow: hidden; /* Sorgt für saubere Kanten bei border-radius */
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid #eee;
}

.checklist-category {
  border-bottom: 1px solid #eee;
}

.checklist-category:last-child {
  border-bottom: none;
}

.checklist-header {
  background-color: #fcfcfc;
  border: none;
  width: 100%;
  padding: 18px 25px;
  text-align: left;
  font-size: 1.2rem; /* 1.2rem entspricht ca. 19px */
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.3s ease;
  color: #333;
}

.checklist-header:hover {
  background-color: #f5f5f5;
}

.checklist-header .header-icon {
  font-size: 1.75rem;
  font-weight: 300;
  color: #007bff; /* Eine Akzentfarbe, passe sie an dein Design an */
  transition: transform 0.3s ease;
}

/* Stil für den aufgeklappten Zustand */
.checklist-header.active {
  background-color: #f5f5f5;
}

.checklist-header.active .header-icon {
  transform: rotate(45deg); /* Dreht das '+' zu einem 'x' */
}

.checklist-panel {
  padding: 0 25px; /* Padding wird im aktiven Zustand gesetzt */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out, padding 0.4s ease-out;
  background-color: #fff;
}

/* Stil für den aufgeklappten Zustand */
.checklist-panel.active {
  max-height: 1000px; /* Ausreichend großer Wert für den Inhalt */
  padding: 20px 25px;
}

.checklist-items {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}

.checklist-item {
  display: flex;
  align-items: center;
  padding: 14px 5px; /* Etwas mehr vertikaler Abstand */
  font-size: 1rem;
  cursor: pointer;
  user-select: none; /* Verhindert Textmarkierung beim Klicken */
  border-bottom: 1px solid #f0f0f0;
}

.checklist-item:last-child {
  border-bottom: none;
}

/* Die neue "Checkbox" */
.checkbox-icon {
  width: 22px;
  height: 22px;
  border: 2px solid #ccc;
  border-radius: 4px;
  margin-right: 15px;
  display: inline-block;
  flex-shrink: 0; /* Verhindert, dass die Box bei langem Text kleiner wird */
  transition: all 0.2s ease;
}

.item-label a {
  text-decoration: none;
  color: #0056b3;
  font-weight: 500;
}

.item-label a:hover {
  text-decoration: underline;
}

/* --- 'Checked' Status (wird per JS hinzugefügt) --- */
.checklist-item.checked .checkbox-icon {
  background-color: #007bff;
  border-color: #007bff;
  /* Eingebettetes SVG für den Haken (funktioniert in allen Browsern) */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.6-1.5-1.5L0 4.26 2.974 7.25 8 2.1z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50%;
}

.checklist-item.checked .item-label {
  text-decoration: line-through;
  color: #999;
}

.checklist-item.checked .item-label a {
  color: #999; /* Link wird ebenfalls ausgegraut */
}

/* --- STICKY HEADER SCROLL-VERHALTEN --- */
.sticky-nav-header.scrolled .top-promo,
.sticky-nav-header.scrolled .navbar-small {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  border: none;
}

/*# sourceMappingURL=urlaubscode.css.map */