/* ==========================
   1) RESET / GRUNDLAGEN
========================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  font-family: 'Open Sans', sans-serif;
  color: #333;
  background-color: #f4f4f4;
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Optionale Fade-In-Animation */
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- FAQ Accordion Styles (Modernisiert) --- */
.faq-section {
    padding: 3rem 1rem; /* Mehr vertikaler Abstand */
    background-color: #f9f9f9; /* Sehr heller, fast weißer Hintergrund */
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1rem; /* Konsistenter Abstand */
}

/* Hauptüberschrift der FAQ-Sektion */
.faq-section .section-title {
    text-align: center;
    color: #ff9100; /* Haupt-Akzentfarbe */
    font-family: 'Fredoka One', cursive;
    font-size: 2.5rem; /* Konsistent mit anderen Sektionen */
    margin-bottom: 0.5rem; /* Weniger Abstand zum Subtitel */
}

/* Subtitel der FAQ-Sektion */
.faq-section .section-subtitle {
    text-align: center;
    font-size: 1.2rem;
    color: #555; /* Etwas dunkleres Grau */
    margin-bottom: 2.5rem; /* Mehr Abstand zu den Fragen */
}

.faq-item {
    background-color: #ffffff;
    border: 1px solid #e0e0e0; /* Hellerer Rand */
    border-radius: 8px; /* Etwas größere Rundung */
    margin-bottom: 1rem; /* Abstand zwischen Items */
    box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* Subtiler Schatten */
    overflow: hidden;
    transition: box-shadow 0.3s ease; /* Übergang für Hover-Effekt */
}

.faq-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.12); /* Stärkerer Schatten beim Hover */
}

.faq-question { /* Styling für das <summary> Element */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem; /* Mehr Padding */
    cursor: pointer;
    font-weight: 600; /* Etwas fetter */
    color: #333; /* Dunkle Textfarbe */
    background-color: #fff; /* Weißer Hintergrund für die Frage */
    transition: background-color 0.2s ease;
    list-style: none; /* Standard-Marker entfernen (wichtig für Firefox) */
}
/* Entfernt den Standard-Pfeil des <details> Elements in Webkit-Browsern */
.faq-question::-webkit-details-marker {
    display: none;
}

.faq-question:hover {
    background-color: #f8f8f8; /* Sehr leichter Hover-Effekt */
}

.faq-question h3 {
    margin: 0;
    font-size: 1.1rem;
    flex-grow: 1;
    margin-right: 1rem; /* Abstand zum Icon */
    font-family: 'Open Sans', sans-serif; /* Standard-Textschrift */
}

.faq-question i { /* Styling für das FontAwesome Icon */
    font-size: 1rem;
    color: #ff9100; /* Haupt-Akzentfarbe */
    transition: transform 0.3s ease; /* Sanfte Drehung */
    flex-shrink: 0; /* Verhindert Schrumpfen des Icons */
}

.faq-item[open] > .faq-question {
    /* Optional: Hintergrund leicht ändern, wenn offen */
    /* background-color: #f5f5f5; */
    border-bottom: 1px solid #e0e0e0; /* Linie, wenn offen */
}

.faq-item[open] > .faq-question i { /* Icon drehen, wenn das Item offen ist */
    transform: rotate(180deg);
}

.faq-answer { /* Styling für den Inhalt (Antwort) */
    padding: 1.5rem; /* Mehr Padding */
    /* border-top: 1px solid #e0e0e0; */ /* Wird jetzt durch Border am Question ersetzt */
    background-color: #ffffff;
    color: #555; /* Etwas helleres Grau für Antworttext */
    line-height: 1.6;
}

.faq-answer p {
    margin-bottom: 1rem;
}

.faq-answer p:last-child {
    margin-bottom: 0;
}

/* Highlight für Links innerhalb der Antworten (konsistent) */
.link-highlight {
    color: #ff6600; /* Sekundäre Akzentfarbe */
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid #ffcc99; /* Hellere, gepunktete Linie */
    transition: color 0.2s ease, border-bottom-color 0.2s ease;
}

.link-highlight:hover {
    color: #ff9100; /* Haupt-Akzentfarbe beim Hover */
    border-bottom-color: #ff9100;
}

/* ==========================
   2) HEADER
========================== */
.site-header {
  background-color: #ffffff;
  padding: 1rem;
  text-align: center;
  animation: fadeIn 0.8s ease forwards;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 100; /* Stellt sicher, dass der Header über dem Inhalt liegt */
}

.site-header .logo img {
  max-width: 150px;
  height: auto;
}

/* ==========================
   3) HERO SECTION
========================== */
.hero-section {
  /* background: linear-gradient(120deg, #4a90e2, #78c7f0); */ /* Blauen Gradienten auskommentiert/entfernt */
  background: linear-gradient(120deg, #ff6600, #ff9100); /* Standard Orange Gradient */
  color: #fff;
  text-align: center;
  padding: 3rem 1rem;
  animation: fadeIn 0.8s ease forwards;
}

.hero-section h1 {
  font-family: 'Fredoka One', cursive;
  font-size: 3rem;
  margin-bottom: 1rem;
}

.hero-section p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

.hero-cta {
  margin-bottom: 1rem;
}

/* ==========================
   4) BUTTONS (global)
========================== */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  border-radius: 999px;
  color: #fff;
  transition: all 0.3s ease;
}

.btn-primary {
  background-color: #ff9100;
}

.btn-primary:hover {
      background-color: #ff6600;
      transform: translateY(-2px);
  }

/* Specific button style for Play Store link */
.btn-playstore {
    background-color: #3DDC84; /* Google Play green */
}

.btn-playstore:hover {
    background-color: #30b870; /* Slightly darker green on hover */
    transform: translateY(-2px); /* Consistent hover effect */
}

/* ==========================
   12) MAIN NAVIGATION STYLES
========================== */
.main-nav {
  /* Nimmt verfügbaren Platz neben dem Logo ein */
  flex-grow: 1;
  text-align: center; /* Menüpunkte zentrieren */
}

.main-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-block; /* Sorgt dafür, dass ul sich an Inhalt anpasst */
}

.main-nav li {
  display: inline-block; /* Listenelemente nebeneinander */
  margin-left: 1.5rem; /* Abstand zwischen Menüpunkten */
}

.main-nav a {
  color: #333; /* Dunkle Textfarbe für Kontrast */
  text-decoration: none;
  font-weight: 600; /* Etwas fetter für bessere Lesbarkeit */
  padding: 0.5rem 0; /* Vertikaler Klickbereich */
  position: relative; /* Für den ::after Pseudo-Effekt */
  transition: color 0.3s ease;
}

.main-nav a::after { /* Unterstrich-Effekt beim Hover */
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #ff9100; /* Akzentfarbe */
  transition: width 0.3s ease;
}

.main-nav a:hover {
  color: #ff9100; /* Farbe ändern beim Hover */
}

.main-nav a:hover::after {
  width: 100%; /* Unterstrich einblenden */
}

/* Aktiven Menüpunkt hervorheben */
.main-nav a.active {
  color: #ff9100; /* Akzentfarbe für aktiven Link */
  font-weight: 700; /* Noch etwas fetter */
}

.main-nav a.active::after {
  width: 100%; /* Unterstrich für aktiven Link immer sichtbar */
}

/* ==========================
   13) MOBILE MENU TOGGLE BUTTON
========================== */
.mobile-menu-toggle {
  display: none; /* Standardmäßig versteckt */
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  position: absolute; /* Positionierung relativ zum Header-Container */
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1001; /* Über dem Menü */
}

.mobile-menu-toggle span {
  display: block;
  width: 25px;
  height: 3px;
  background-color: #333;
  margin: 5px 0;
  transition: all 0.3s ease;
}

/* Burger-Icon Animation (optional, für "X" beim Öffnen) */
.mobile-menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0;
}
.mobile-menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}


/* Anpassungen für kleinere Bildschirme */
@media (max-width: 992px) { /* Beispiel-Breakpoint für Tablet/kleinere Desktops */
  .main-nav li {
    margin-left: 1rem; /* Weniger Abstand */
  }
  .main-nav a {
    font-size: 0.95rem; /* Kleinere Schrift */
  }
}

@media (max-width: 768px) { /* Breakpoint für Mobile */

  .main-nav ul {
      display: none; /* Hauptmenü standardmäßig ausblenden */
      position: absolute;
      top: 60px; /* Position unter dem Header anpassen */
      left: 0;
      right: 0;
      background-color: #fff; /* Hintergrund für das mobile Menü */
      padding: 1rem 0;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      z-index: 1000;
      text-align: center;
      width: 100%; /* Volle Breite sicherstellen */
  }

  .main-nav ul.active { /* Klasse, die per JS hinzugefügt wird */
      display: block !important; /* Menü anzeigen, wenn aktiv - mit !important um andere Regeln zu überschreiben */
      max-height: calc(100vh - 60px); /* Maximale Höhe: 100% der Viewport-Höhe minus Header-Höhe */
      overflow-y: auto; /* Vertikales Scrollen ermöglichen, falls nötig */
  }

  .main-nav li {
      display: block; /* Menüpunkte untereinander */
      margin: 1rem 0; /* Vertikaler Abstand */
      margin-left: 0; /* Linken Abstand zurücksetzen */
  }

   .main-nav a::after { /* Unterstrich auf Mobil entfernen */
      display: none;
   }

   .mobile-menu-toggle {
       display: block; /* Burger-Button anzeigen */
   }

   /* Verhindern, dass der Body scrollt, wenn das Menü offen ist (optional) */
   body.mobile-menu-open {
       overflow: hidden;
   }
}

/* ==========================
   5) PLATTFORMEN SECTION
========================== */
.platforms-section {
  padding: 2rem 1rem;
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
  animation: fadeIn 0.8s ease forwards;
}

.platforms-section h2 {
  font-family: 'Fredoka One', cursive;
  color: #ff9100;
  margin-bottom: 2rem;
}

.platforms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  padding: 0 1rem;
}

.platform-card {
  background: #fff;
  border-radius: 0.5rem;
  padding: 1.5rem 1rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.platform-card:hover {
  transform: translateY(-3px);
}

.platform-icon {
  width: 60px;
  margin-bottom: 1rem;
}

.platform-card h3 {
  font-family: 'Fredoka One', cursive;
  font-size: 1.3rem;
  margin: 0.5rem 0;
}

.platform-card p {
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.platform-btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: #444;
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.3s;
}

.platform-btn:hover {
  background-color: #222;
}

/* ==========================
   6) WARUM MOLOTOW SECTION
========================== */
.why-molotow-section {
  padding: 2rem 1rem;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  animation: fadeIn 0.8s ease forwards;
}

.why-molotow-section h2 {
  font-family: 'Fredoka One', cursive;
  color: #ff9100;
  margin-bottom: 2rem;
}

.why-molotow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  padding: 0 1rem;
}

.why-molotow-card {
  background: #fff;
  border-radius: 0.5rem;
  padding: 1.5rem 1rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.why-molotow-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 10px rgba(0,0,0,0.15);
}

.why-icon {
  width: 60px;
  margin-bottom: 1rem;
}

.why-molotow-card h3 {
  font-family: 'Fredoka One', cursive;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.why-molotow-card p {
  font-size: 0.95rem;
  line-height: 1.4;
}

/* ==========================
   7) iOS-INSTALL-SECTION
========================== */
.ios-install-section {
  padding: 2rem 1rem;
  background: #fff;
  margin: 2rem 0;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 0.5rem;
  animation: fadeIn 0.8s ease forwards;
}

.ios-install-section h2 {
  font-family: 'Fredoka One', cursive;
  color: #ff9100;
  margin-bottom: 1rem;
  text-align: center;
}

.ios-install-section ol {
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

.ios-install-section .hint {
  font-style: italic;
  margin-top: 1rem;
  background: #ffecd6;
  padding: 1rem;
  border-radius: 0.5rem;
}

/* ==========================
   8) GALLERY SECTION
========================== */
.gallery-section {
  background: #fdfdfd;
  padding: 2rem 1rem;
  text-align: center;
  animation: fadeIn 0.8s ease forwards;
}

.gallery-section h2 {
  font-family: 'Fredoka One', cursive;
  color: #ff9100;
  margin-bottom: 1rem;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.gallery img {
  max-width: 200px;
  border-radius: 0.5rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* ==========================
   9) DOWNLOAD-CTA
========================== */
.download-cta {
  background: #ff9100;
  color: #fff;
  text-align: center;
  padding: 2rem 1rem;
  margin-top: 2rem;
  animation: fadeIn 0.8s ease forwards;
}

.download-cta h2 {
  font-family: 'Fredoka One', cursive;
  margin-bottom: 1rem;
}

    /* Sicherstellen, dass Buttons im CTA den primären Stil haben (Orange Hintergrund, weißer Text)
       Die Farben werden jetzt primär durch die Klasse .btn-primary im HTML gesteuert.
       Diese Regel bleibt bestehen für eventuelle spezifische CTA-Button-Anpassungen (z.B. Größe, Margin),
       aber die redundanten Farbdefinitionen werden entfernt. */
    .download-cta .btn {
        /* Erbt grundlegende Stile von .btn und .btn-primary */
        /* background-color: #ff9100; */ /* Entfernt -> kommt von .btn-primary */
        /* color: #fff; */ /* Entfernt -> kommt von .btn-primary */
        padding: 0.75rem 1.5rem; /* Beibehaltung des Paddings */
        font-weight: 600; /* Beibehaltung der Schriftstärke */
    border-radius: 999px; /* Beibehaltung der Rundung */
    transition: all 0.3s ease;
    display: inline-block; /* Falls nicht schon von .btn geerbt */
    text-decoration: none; /* Falls nicht schon von .btn geerbt */
    }

    .download-cta .btn:hover {
        /* Hover-Effekte werden von .btn-primary:hover geerbt */
        /* background-color: #ff6600; */ /* Entfernt -> kommt von .btn-primary:hover */
        /* color: #fff; */ /* Entfernt -> kommt von .btn-primary:hover */
        transform: translateY(-2px); /* Konsistenter Hover-Effekt beibehalten/überschreiben falls nötig */
    }


/* ==========================
   10) FOOTER
========================== */
.site-footer {
  background: #333;
  color: #fff;
  text-align: center;
  margin-top: 2rem; /* Abstand zum vorherigen Element (z.B. CTA) hinzugefügt */
  padding: 1rem;
  font-size: 0.9rem;
  animation: fadeIn 0.8s ease forwards;
}

.footer-nav {
  margin-top: 0.5rem;
}

.footer-nav a {
  margin: 0 0.5rem;
  text-decoration: underline;
  color: #fff;
  transition: color 0.2s;
}

.footer-nav a:hover {
  color: #ff9100;
}

/* ==========================
   📌 iOS-INSTALLATION SECTION (Responsive)
========================== */
.ios-install-section {
  background: #fff;
  padding: 3rem 1rem;
  max-width: 1200px;
  margin: 2rem auto;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.ios-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ios-text {
  max-width: 600px;
}

.ios-icon {
  width: 30px;
  margin-right: 10px;
  vertical-align: middle;
}

.ios-steps {
  text-align: left;
  list-style-type: none;
  padding: 0;
}

.ios-steps li {
  margin: 1rem 0;
  font-size: 1rem;
  font-weight: 600;
}

/* 📌 Automatische Anpassung der Bilder – max. Größe wie die Screenshots */
.ios-step-img {
  width: 100%;
  max-width: 200px; /* Maximal 200px, um nicht größer als die Screenshots zu sein */
  height: auto;
  border-radius: 10px;
  margin-top: 0.5rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.ios-image img {
  width: 100%;
  max-width: 200px; /* Maximal 200px, gleiche Größe wie Screenshots */
  height: auto;
  margin-top: 1rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
}


/* 📌 Responsive Anpassung für größere Bildschirme */
@media (min-width: 768px) {
  .ios-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
  }

  .ios-text {
    flex: 1;
  }

  .ios-image {
    flex: 1;
    text-align: center;
  }
}
/* ==========================
   📌 iOS-INSTALLATION PAGE DESIGN
========================== */
.ios-install-page {
  text-align: center;
  padding: 3rem 1rem;
  max-width: 1200px;
  margin: auto;
}

.ios-install-page h1 {
  font-size: 2.5rem;
  font-family: 'Fredoka One', cursive;
  color: #ff9100;
  margin-bottom: 1rem;
}

.ios-install-page p {
  font-size: 1.2rem;
  color: #444;
  margin-bottom: 2rem;
}

/* 📌 Container für die Installationsschritte */
.ios-install-container {
  display: flex;
  justify-content: center;
}

/* 📌 Schritte als Karten */
.ios-install-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  max-width: 900px;
  width: 100%;
}

.ios-step {
  background: #fff;
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ios-step:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.ios-step h2 {
  font-size: 1.4rem;
  color: #ff6600;
  margin-bottom: 0.5rem;
}

/* 📌 Bilder */
.ios-step-img {
  width: 100%;
  max-width: 250px; /* Gleiche Größe für alle Screenshots */
  height: auto;
  margin-top: 1rem;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* 📌 Hinweisbox */
.ios-hint {
  font-style: italic;
  background: #ffecd6;
  padding: 1rem;
  border-radius: 5px;
  margin-top: 2rem;
}

/* 📌 CTA-Buttons */
.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}

.btn-primary, .btn-secondary {
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  border-radius: 999px;
  color: #fff;
  transition: all 0.3s ease;
}

.btn-primary {
  background-color: #ff9100;
}

.btn-primary:hover {
  background-color: #ff6600;
  transform: translateY(-2px);
}

.btn-secondary {
  background-color: #444;
}

.btn-secondary:hover {
  background-color: #222;
}

/* 📌 Responsive Optimierung */
@media (max-width: 768px) {
  .ios-install-steps {
    grid-template-columns: 1fr;
  }
}
/* 📌 Container für Screenshots & Video */
.screenshot-gallery {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem; /* Abstand zwischen Screenshots & Video exakt gleich */
  max-width: 900px;
  margin: auto;
}

/* 📌 Screenshots haben feste Größe */
.screenshot-img {
  width: 100%;
  max-width: 250px; /* Exakte Screenshot-Größe */
  aspect-ratio: 9 / 16; /* Seitenverhältnis der Screenshots beibehalten */
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* 📌 Wrapper für das Video – sorgt für sauberes Zuschneiden */
.video-wrapper {
  width: 100%;
  max-width: 250px; /* Exakte Screenshot-Größe */
  aspect-ratio: 9 / 16; /* Seitenverhältnis exakt beibehalten */
  border-radius: 10px;
  overflow: hidden; /* Alles außerhalb dieses Rahmens wird ausgeblendet */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* 📌 Video exakt auf Screenshot-Größe zuschneiden */
.webapp-video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Video wird exakt auf Screenshot-Format zugeschnitten */
}
    .contact-intro {
        text-align: center;
        padding: 2rem 1rem;
        max-width: 800px;
        margin: 0 auto;
    }
    .contact-intro h2 {
        font-size: 2rem;
        margin-bottom: 1rem;
    }
    .contact-intro p {
        font-size: 1.2rem;
        margin-bottom: 1.5rem;
    }
    .contact-intro .btn {
        display: inline-block;
        padding: 0.75rem 1.5rem;
        font-size: 1.2rem;
        border-radius: 5px;
        background-color: #ff9100;
        color: white;
        text-decoration: none;
        font-weight: bold;
        transition: background-color 0.3s ease;
    }
    .contact-intro .btn:hover {
        background-color: #ff6600;
    }
    .contact-intro {
      text-align: center;
      padding: 2rem 1rem;
      max-width: 800px;
      margin: 0 auto;
      animation: fadeIn 0.8s ease forwards;
  }

  .contact-intro h2 {
      font-family: 'Fredoka One', cursive;
      color: #ff9100;
      margin-bottom: 1rem;
  }

  .contact-intro p {
      font-size: 1.2rem;
      margin-bottom: 1.5rem;
  }

  .contact-intro .btn {
      display: inline-block;
      padding: 0.75rem 1.5rem;
      font-weight: 600;
      border-radius: 999px;
      background-color: #ff9100;
      color: white;
      text-decoration: none;
      transition: all 0.3s ease;
  }

  .contact-intro .btn:hover {
      background-color: #ff6600;
      transform: translateY(-2px);
  }

/* ==========================
   11) RESPONSIVE
========================== */
@media (max-width: 600px) {
  .hero-section h1 {
    font-size: 2.2rem;
  }

  .hero-section p {
    font-size: 1rem;
  }

  .platform-icon,
  .why-icon {
    width: 50px;
  }

  .gallery img {
    max-width: 150px;
  }
}

/* ==========================
   📌 JASS RULES PAGE STYLES
========================== */
.rules-container {
    max-width: 800px;
    margin: 2rem auto; /* Angepasster Margin */
    padding: 2rem; /* Angepasstes Padding */
    background-color: #fff; /* Weißer Hintergrund */
    border-radius: 8px; /* Abgerundete Ecken */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Leichter Schatten */
    animation: fadeIn 0.8s ease forwards; /* Fade-in Animation */
}
.rules-container h1,
.rules-container h2,
.rules-container h3 {
    color: #333;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
    margin-top: 20px;
    margin-bottom: 15px; /* Abstand nach Überschriften */
    font-family: 'Fredoka One', cursive; /* Gleiche Schrift wie andere Titel */
}
.rules-container h1 {
    text-align: center;
    color: #ff9100; /* Haupt-Akzentfarbe */
    font-size: 2.2rem; /* Angepasste Größe */
}
.rules-container h2 {
    font-size: 1.8rem; /* Angepasste Größe */
    color: #ff6600; /* Sekundäre Akzentfarbe */
}
.rules-container h3 {
    font-size: 1.5rem; /* Angepasste Größe */
}
.rules-container table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    margin-bottom: 20px; /* Abstand nach Tabellen */
    font-size: 0.95rem; /* Etwas kleinere Schrift in Tabellen */
}
.rules-container th,
.rules-container td {
    border: 1px solid #ddd;
    padding: 10px; /* Mehr Padding */
    text-align: left;
}
.rules-container th {
    background-color: #f8f8f8; /* Hellerer Hintergrund für Header */
    font-weight: 600;
}
.rules-container ul {
    list-style-type: disc;
    margin-left: 20px;
    margin-bottom: 15px; /* Abstand nach Listen */
}
.rules-container li {
    margin-bottom: 8px; /* Mehr Abstand zwischen Listenelementen */
}
.rules-container hr {
    border: 0;
    height: 1px;
    background-color: #ddd;
    margin: 40px 0;
}

/* Trinkspiel-Karten */
.drinking-rules-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 20px; /* Mehr Abstand */
    padding: 20px; /* Mehr Padding */
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.drinking-rules-card h4 {
    margin-top: 0;
    margin-bottom: 10px; /* Abstand nach Titel */
    font-family: 'Fredoka One', cursive;
    font-size: 1.3rem;
}
.drinking-rules-card p {
    margin-bottom: 10px;
}

/* Info/Warnungs-Karten */
.info-card {
    background-color: #e8f4f8;
    border-left: 5px solid #3498db; /* Blauer Rand */
}
.info-card h4 {
    color: #3498db; /* Blaue Schrift */
}
.warning-card {
    background-color: #fbeae5;
    border-left: 5px solid #e74c3c; /* Roter Rand */
}
.warning-card h4 {
     color: #e74c3c; /* Rote Schrift */
}

/* Intensitätsanzeige (Beispiel mit SVG-Maske) */
.intensity-meter span {
    display: inline-block;
    width: 18px; /* Etwas größer */
    height: 18px;
    background-color: #ccc; /* Helleres Grau */
    margin-right: 3px;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/></svg>') no-repeat center / contain; /* Beispiel: Info-Icon */
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/></svg>') no-repeat center / contain;
    vertical-align: middle; /* Bessere Ausrichtung */
}
.intensity-meter span.active {
    background-color: #ff9100; /* Haupt-Akzentfarbe */
}

/* Spezifische Styles für Trinkspiel-Karten-Layout (aus HTML übernommen) */
.drinking-rules-card .points-display {
    width: 60px;
    height: 60px;
    border: 2px solid; /* Farbe wird unten gesetzt */
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
    color: inherit; /* Farbe wird unten gesetzt */
    background-color: rgba(0,0,0,0.03); /* Leichter Hintergrund */
    margin-right: 15px; /* Abstand zum Text */
    flex-shrink: 0; /* Verhindert Schrumpfen */
}
.drinking-rules-card .card-content {
    flex: 1;
}
.drinking-rules-card .card-layout {
    display: flex;
    align-items: center;
}
/* Farben für Punkte-Anzeige (Beispiel) */
.drinking-rules-card[data-points-color="blue"] .points-display { border-color: blue; color: blue; }
.drinking-rules-card[data-points-color="green"] .points-display { border-color: green; color: green; }
/* usw. - Farben müssten dynamisch oder über Klassen gesetzt werden */


/* ==========================
   DATENSCHUTZ PAGE STYLES
========================== */
.datenschutz-page {
    max-width: 800px;
    margin: 2rem auto; /* Use consistent spacing like rules-container */
    padding: 2rem; /* Use consistent spacing */
    background-color: #fff; /* Add background like rules-container */
    border-radius: 8px; /* Add border-radius like rules-container */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Add shadow like rules-container */
    animation: fadeIn 0.8s ease forwards; /* Add fade-in */
}

.datenschutz-page h1,
.datenschutz-page h2,
.datenschutz-page h3 {
    color: #333; /* Default heading color from rules */
    border-bottom: 1px solid #eee; /* Consistent underline */
    padding-bottom: 5px; /* Consistent padding */
    margin-bottom: 15px; /* Consistent margin */
    font-family: 'Fredoka One', cursive; /* Consistent font */
}

.datenschutz-page h1 {
    text-align: center;
    margin-bottom: 20px; /* Keep original */
    color: #ff9100; /* Main accent color like rules */
    font-size: 2.2rem; /* Consistent size */
}

.datenschutz-page h2 {
    margin-top: 20px; /* Keep original */
    color: #ff6600; /* Secondary accent color like rules */
    font-size: 1.8rem; /* Consistent size */
}

.datenschutz-page h3 {
    margin-top: 10px; /* Keep original */
    font-size: 1.5rem; /* Consistent size */
}

.datenschutz-page p {
    margin-bottom: 10px; /* Keep original */
    line-height: 1.6; /* Ensure consistent line-height */
}

.datenschutz-page a { /* Style links within the page */
    color: #ff6600; /* Use secondary accent color */
    text-decoration: underline;
}

.datenschutz-page a:hover {
    color: #ff9100; /* Main accent on hover */
}


/* ==========================
   IMPRESSUM PAGE STYLES
========================== */
.impressum-page {
    max-width: 800px;
    margin: 2rem auto; /* Consistent spacing */
    padding: 2rem; /* Consistent spacing */
    background-color: #fff; /* Consistent background */
    border-radius: 8px; /* Consistent border-radius */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Consistent shadow */
    animation: fadeIn 0.8s ease forwards; /* Consistent fade-in */
}

.impressum-page h1,
.impressum-page h2,
.impressum-page h3 {
    color: #333; /* Default heading color */
    border-bottom: 1px solid #eee; /* Consistent underline */
    padding-bottom: 5px; /* Consistent padding */
    margin-bottom: 15px; /* Consistent margin */
    font-family: 'Fredoka One', cursive; /* Consistent font */
}

.impressum-page h1 {
    text-align: center;
    margin-bottom: 20px; /* Keep original */
    color: #ff9100; /* Main accent color */
    font-size: 2.2rem; /* Consistent size */
}

.impressum-page h2 {
    margin-top: 20px; /* Keep original */
    color: #ff6600; /* Secondary accent color */
    font-size: 1.8rem; /* Consistent size */
}

.impressum-page h3 {
    margin-top: 10px; /* Keep original */
    font-size: 1.5rem; /* Consistent size */
}

.impressum-page p {
    margin-bottom: 10px; /* Keep original */
    line-height: 1.6; /* Ensure consistent line-height */
}

.impressum-page a { /* Style links within the page */
    color: #ff6600; /* Use secondary accent color */
    text-decoration: underline;
}

.impressum-page a:hover {
    color: #ff9100; /* Main accent on hover */
}

/* Specific style for logo within impressum was removed as header handles logo */

/* ==========================
   TESTIMONIALS PAGE STYLES
========================== */
/* Define CSS Variables (optional, but good practice for consistency) */
:root {
    --primary-color: #ff9100;
    --primary-color-light: #ffcc80;
    --text-primary: #333;
    --text-secondary: #555;
    --background-light: #f9f9f9;
    --border-radius-md: 8px;
    --shadow-md: 0 4px 8px rgba(0,0,0,0.1);
    --spacing-sm: 10px;
    --spacing-md: 20px;
    --spacing-lg: 30px;
    --spacing-xl: 60px;
}

.testimonials-section {
    padding: var(--spacing-xl, 60px) 0; /* Standard-Padding verwenden */
    background-color: var(--background-light, #f9f9f9); /* Heller Hintergrund */
    animation: fadeIn 0.8s ease forwards; /* Fade-in hinzufügen */
}

.testimonial-container {
    max-width: 900px; /* Etwas breiter für Testimonials */
    margin: 0 auto;
    padding: 0 var(--spacing-md, 20px); /* Seitenabstand */
}

/* Section Title (if needed within this section, otherwise use Hero) */
.testimonials-section .section-title {
    text-align: center;
    margin-bottom: 40px;
    font-family: 'Fredoka One', cursive;
    color: var(--primary-color, #ff9100);
    font-size: 2rem; /* Adjust size as needed */
}

.testimonial-item {
    background-color: #ffffff;
    border-radius: var(--border-radius-md, 8px);
    box-shadow: var(--shadow-md, 0 4px 8px rgba(0,0,0,0.1));
    margin-bottom: var(--spacing-lg, 30px);
    padding: var(--spacing-md, 20px);
    border-left: 5px solid var(--primary-color, #ff9100); /* Akzentfarbe links */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Hover effect */
}

.testimonial-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.testimonial-quote {
    font-style: italic;
    color: var(--text-secondary, #555);
    margin-bottom: var(--spacing-sm, 10px);
    position: relative;
    padding-left: 35px; /* Mehr Platz für Anführungszeichen */
    line-height: 1.6;
}

.testimonial-quote::before {
    content: '“'; /* Öffnendes Anführungszeichen */
    font-size: 3em; /* Größer */
    font-family: Georgia, serif; /* Serifenschrift für Zitatzeichen */
    color: var(--primary-color-light, #ffcc80);
    position: absolute;
    left: 0;
    top: -15px; /* Position anpassen */
    line-height: 1;
}

.testimonial-author {
    font-weight: bold;
    color: var(--text-primary, #333);
    text-align: right;
    margin-top: var(--spacing-sm, 10px);
}

.testimonial-author span {
    font-weight: normal;
    font-size: 0.9em;
    color: var(--text-secondary, #777);
    display: block; /* Name und Ort untereinander */
}


/* ==========================
   MOLOTOW DESCRIPTION PAGE STYLES
========================== */
/* .description-page .hero-section { */ /* Diese Regel wird entfernt, da der Standard-Hero jetzt orange ist */
    /* Override default hero background */
    /* background: linear-gradient(120deg, #4a90e2, #78c7f0); */ /* Specific gradient for this page */
    /* padding: 2rem 1rem; */ /* Specific padding from inline style */
/* } */

.description-page .why-molotow-section {
    padding: 2rem 1rem; /* Specific padding from inline style */
    /* Inherits other styles from global .why-molotow-section */
}

.description-page .download-cta {
    margin-top: 2rem; /* Specific margin from inline style */
    /* Inherits background etc. from global .download-cta */
}

/* Explizite Regel für den Button auf der Description-Seite, um sicherzustellen, dass er primär ist */
.description-page .download-cta .btn {
    background-color: #ff9100; /* Primäre Button-Farbe (Orange) */
    color: #fff; /* Weißer Text */
    /* Erbt andere Stile wie padding, border-radius von .btn und .download-cta .btn */
}

.description-page .download-cta .btn:hover {
    background-color: #ff6600; /* Dunkleres Orange beim Hover */
    color: #fff; /* Textfarbe bleibt weiß */
    /* Erbt transform von .download-cta .btn:hover */
}

/* ==========================
   KONTAKT PAGE STYLES
========================== */
.contact-section {
    text-align: center;
    /* padding: 2rem 1rem; Removed as overridden by next line */
    padding: 2rem; /* Combined padding */
    max-width: 600px;
    margin: 2rem auto; /* Added top/bottom margin for consistency */
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    animation: fadeIn 0.8s ease forwards; /* Added fade-in */
}
/* H1 and P styles might be redundant if Hero section is always used, but kept for now */
.contact-section h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
    font-family: 'Fredoka One', cursive; /* Consistent font */
    color: #ff9100; /* Consistent color */
}
.contact-section p {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    color: #666;
}
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: left; /* Align labels left */
}
.contact-form label {
    font-weight: bold;
    /* text-align: left; Moved to parent */
}
.contact-form input, .contact-form textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
    font-family: 'Open Sans', sans-serif; /* Ensure consistent font */
}
.contact-form textarea {
    resize: none; /* Keep resize none */
    height: 120px;
}
/* Specific button style for the form submit */
.contact-form .btn-primary {
    padding: 0.75rem;
    font-size: 1.2rem;
    background-color: #ff9100;
    color: white;
    border: none;
    border-radius: 5px; /* Specific radius for this button */
    cursor: pointer;
    transition: background 0.3s ease;
    font-weight: bold; /* Added for consistency */
}
.contact-form .btn-primary:hover {
    background-color: #ff6600;
}
.message-box {
    margin-top: 1rem;
    font-size: 1rem;
    display: none; /* Keep hidden initially */
    padding: 1rem;
    border-radius: 5px;
    text-align: center; /* Center text in message box */
}
.message-box.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.message-box.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}
/* Specific style for the 'Back to Home' button on contact page */
.contact-section .home-button { /* Specific to contact section */
    display: inline-block; /* Changed from block to inline-block */
    margin-top: 2rem; /* Keep margin */
    /* text-align: center; Removed as inline-block centers with parent */
    font-size: 1.1rem; /* Slightly smaller */
    padding: 0.6rem 1.2rem; /* Slightly smaller padding */
    border-radius: 999px; /* Consistent pill shape */
    background-color: #444; /* Keep dark grey */
    color: white;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.3s ease;
}
.contact-section .home-button:hover {
    background-color: #222;
}