/* --- Reset und Grundstil --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
  color: #333;
  text-align: center;
}
h1 {
  margin: 1rem 0;
  font-size: 2em;
  color: #444;
}

/* 
  .packages (DESKTOP):
  - Flexbox: wrap => mehrere Zeilen möglich
  - gap: 20px => Abstand
  - max-width: 1200px => zentriert
  - padding: 0 1rem 2rem => wie vorher
*/
.packages {
  display: flex;
  flex-wrap: wrap;         
  gap: 20px;               
  max-width: 1200px;       
  margin: 0 auto;          
  padding: 0 1rem 2rem;    
}

/* 
  .price-package => 
  - Größer: 350px (statt 300px)
  - Rest unverändert
*/
.price-package {
  flex: 0 0 350px;             
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden; 
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.price-package:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Inhalt der Karten */
.package-header {
  width: 100%;
  padding: 20px;
  color: #fff;
  text-align: center;
}
.package-header h2 {
  font-size: 1.5em;
  margin-bottom: 5px;
}
.package-subtitle {
  font-size: 0.9em;
  opacity: 0.9;
}

.package-content {
  padding: 20px;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Wrapper für Scrollbereich und Pfeile */
.scrollable-features-wrapper {
  position: relative; /* Ermöglicht die absolute Positionierung der Pfeile */
  display: flex;
  align-items: center;
}

/* 
  Scrollbarer Bereich => 
  max-height von 120px => 250px
*/
.scrollable-features {
  width: 100%;
  max-height: 250px;    
  overflow-y: scroll; /* Immer sichtbar */
  margin-bottom: 1rem;
  
  padding: 10px; /* Abstand zum Rand */
  background-color: #f5f5f5; /* Leicht grauer Hintergrund */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
  border-radius: 6px;
  
  -webkit-overflow-scrolling: touch; /* Reibungsloses Scrollen auf iOS */
}

/* Vertikale Scrollbar-Styling */
.scrollable-features::-webkit-scrollbar {
  width: 12px;              
  background: #eee; 
  display: block; /* Scrollbar erzwingen */  
}


.scrollable-features::-webkit-scrollbar-track {
  border-radius: 8px;
  background: #eee;
}
.scrollable-features::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background: #555; /* Farbe des Scroll-"Daumens" */
  background-color: #006766; 
}

/* Pfeil-Buttons Styling */
.scroll-arrow-vertical {
  position: absolute;
  right: -2px; /* Positioniere die Pfeile rechts neben dem Scrollbereich */
  width: 15px;
  height: 15px;
  background-color: #006766; /* Blau als Hintergrundfarbe */
  color: #f1c40f; /* Gelb als Pfeil-Farbe */
  border: none;
  border-radius: 10%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.scroll-arrow-vertical.up-arrow {
  top: -16px;
}

.scroll-arrow-vertical.down-arrow {
  bottom: 0px;
}

.packetFeatures {
  list-style: disc;
  padding-left: 1rem;  
  text-align: left;    
}
.packetFeatures li {
  margin-bottom: 0.5rem;
}

.package-image {
  max-width: 100%;
  height: auto;
  margin: 1rem 0;
  border-radius: 6px;
}

.price {
  font-size: 2em;
  margin: 0.5rem 0;
  font-weight: bold;
  color: inherit; 
}

.package-button {
  background: #333;
  color: #fff;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 1em;
  cursor: pointer;
  transition: background 0.3s;
  margin-top: 0.5rem;
}
.package-button:hover {
  background: #555;
}

/* 
  1) Knips & Go -> Violett
*/
.cheap .package-header {
  background: #8e44ad;
}
.cheap .price {
  color: #8e44ad;
}

/* 
  2) PartyBoost -> Blau
*/
.midrange .package-header {
  background: #4da8da;
}
.midrange .price {
  color: #4da8da;
}



/* 
  2) Deluxe -> Silber-Farbverlauf
*/
.deluxeMidrange .package-header {
  background: linear-gradient(
    135deg,
    #e0e0e0 0%,     
    #cfd8dc 20%,    
    #b0bec5 40%,    
    #cfd8dc 60%,    
    #e0e0e0 80%,    
    #cfd8dc 100%
  );
}

.deluxeMidrange .price {
  background: linear-gradient(
    135deg,
    #e0e0e0,
    #cfd8dc,
    #b0bec5,
    #cfd8dc,
    #e0e0e0
  );
  -webkit-background-clip: text;
  color: transparent;
}




/* 
  3) Deluxe -> Gold-Farbverlauf
*/
.premium .package-header {
  background: linear-gradient(
    135deg,
    #f9e784 0%,    
    #f6ca0b 20%,   
    #f1b600 40%,   
    #f6ca0b 60%,   
    #f9e784 80%,   
    #f6ca0b 100%
  );
}
.premium .price {
  background: linear-gradient(
    135deg, 
    #f9e784, 
    #f6ca0b, 
    #f1b600, 
    #f6ca0b, 
    #f9e784
  );
  -webkit-background-clip: text;
  color: transparent;
}




/* 
  Mobile => horizontales Scrollen
  => WICHTIG: 
    - "flex: 0 0 80%" bei .price-package 
      => zeige links/rechts Ausschnitt 
    - "scroll-padding-left/right" => 
      sorgt dafür, dass du das erste/letzte 
      Paket ganz einsehen kannst
*/
@media (max-width: 768px) {
  .packages {
    flex-wrap: nowrap;        
    overflow-x: auto;         
    scroll-behavior: smooth;  
    padding: 1rem 10px;         /* etwas horizontaler Platz => 
                                   man sieht links den Ausschnitt vom Paket */
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;  /* Platz für erstes Paket */
    scroll-padding-right: 20px; /* Platz für letztes Paket */
  }
  .price-package {
    /* 80% => man sieht "Nachbarkarte" links/rechts */
    flex: 0 0 80%;
    scroll-snap-align: center;
  }
  .packages::-webkit-scrollbar {
    height: 8px;
  }
  .packages::-webkit-scrollbar-thumb {
    background: #555; 
    border-radius: 4px;
  }
}