/* Globale Stile für die Seite */
.apple-style-page {
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: #f5f5f7;
}

/* Der Hauptcontainer für jede Dienstleistung */
.service-container {
  perspective: 2000px;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  border-bottom: 1px solid #d2d2d7;
  border-radius: 0 !important;
  background: linear-gradient(145deg, #eef6ff 0%, #f7f7f9 100%); /* Standard-Hintergrund */
}

@media (max-width: 600px) {
  .service-container {
    margin-bottom: 0.4em;
  }
}

/* Der innere Wrapper, der sich tatsächlich dreht */
.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 1s cubic-bezier(0.76, 0, 0.24, 1);
  transform-style: preserve-3d;
  
  /* --- KORREKTUR: Wir benutzen Grid statt Absolute Positioning --- */
  display: grid;
}

/* Wenn der Container die .flipped-Klasse hat, dreht sich der innere Teil */
.service-container.flipped .flip-inner {
  transform: rotateY(180deg);
}

/* --- KORRIGIERTE "BULLETPROOF" VERSION --- */
.service-front,
.service-back {
  grid-area: 1 / 1 / 1 / 1;
  
  /* Diese drei Eigenschaften sind der Schlüssel zur sauberen Animation */
  -webkit-backface-visibility: hidden; /* Für Safari/iOS */
  backface-visibility: hidden;
  -webkit-transform: translateZ(0); /* Zwingt das Element auf eine eigene GPU-Ebene */
  transform: translateZ(0);       /* und verhindert das Flackern. */

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 5rem 2rem;
  min-height: 70vh;
}

/* Die Rückseite ist standardmäßig um 180 Grad gedreht */
.service-back {
  transform: rotateY(180deg) translateZ(1px); /* HIER IST DIE MAGIE! */
}

/* =============================================== */
/* == Ergänzungen für Service-Rückseite (Tags & Liste) == */
/* =============================================== */

/* Grid-Layout für Text links, Liste rechts */
.back-content-grid {
  display: grid;
  grid-template-columns: 2fr 1fr; /* Text bekommt 2/3, Liste 1/3 der Breite */
  gap: 2.5rem; /* Abstand zwischen Text und Liste */
  align-items: start;
  text-align: left; /* Text linksbündig für bessere Lesbarkeit */
  margin-bottom: 2rem;
  width: 100%;
  max-width: 900px; /* Begrenzt die Gesamtbreite für große Bildschirme */
}

/* Styling für die Stichpunkt-Liste */
.checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.checklist li {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* Abstand zwischen Haken und Text */
  margin-bottom: 0.8rem;
  font-size: 1.05rem;
}

.checklist .lucide-check {
  color: #0071e3; /* Blaue Farbe für die Haken */
  flex-shrink: 0; /* Verhindert, dass das Icon schrumpft */
}

/* Container für die Tags */
.service-tags-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
  max-width: 600px;
}

/* Styling für die einzelnen Tags (ähnlich wie auf deiner Landingpage) */
.tag-chip {
  display: inline-block;
  padding: 0.4em 1.2em;
  border-radius: 20px;
  font-size: 0.95em;
  background: rgba(255, 255, 255, 0.6);
  color: #333;
  font-weight: 500;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: all 0.2s ease;
}

.tag-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.06);
}

/* --- Responsive Anpassung für Mobilgeräte --- */
@media (max-width: 768px) {
  .back-content-grid {
    /* Auf mobilen Geräten: nur eine Spalte, alles untereinander */
    grid-template-columns: 1fr;
    gap: 1.5rem;
    text-align: center; /* Zentriert den Text wieder auf mobilen Geräten */
  }

  .checklist {
    /* Zentriert die Listenelemente auf mobilen Geräten */
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start; /* Haken und Text bleiben linksbündig */
    text-align: left;
  }
}

/* --- Unveränderte Stile von vorher --- */
.service-content { z-index: 2; position: relative; max-width: 600px; }
.service-title { font-size: 3.5rem; font-weight: 700; color: #1d1d1f; margin: 0 0 0.5rem 0; }
.service-description { font-size: 1.3rem; color: #333; line-height: 1.5; margin-bottom: 1.5rem; }
.service-buttons { display: flex; justify-content: center; gap: 1rem; }
.cta-button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-size: 1rem; font-weight: 500; padding: 0.75rem 1.5rem; border-radius: 980px; transition: all 0.3s ease; border: none; cursor: pointer; }
.cta-button.primary { background-color: #215084; color: #fff; }
.cta-button.primary:hover { background-color: #215084; }
.cta-button.secondary { color: #36a9db; background-color: transparent; }
.cta-button.secondary:hover { text-decoration: underline; }
.cta-button .lucide { width: 1em; height: 1em; margin-left: 0.3em; margin-right: -0.2em; position: relative; top: 6px; }
.cta-button.flip-trigger-backward .lucide { margin-left: -0.2em; margin-right: 0.3em; }
.service-visual { z-index: 1; margin-top: 2rem; }
.service-visual img { max-width: 100%; max-height: 300px; object-fit: contain; display: none; }

/* Styling für die Rückseite */
.service-title-back { font-size: 2.5rem; font-weight: 600; margin-bottom: 1rem; }
.service-description-back { font-size: 1.1rem; line-height: 1.6; max-width: 550px; }

/* =============================================== */
/* == Individuelle Container-Stile (KORRIGIERT) == */
/* =============================================== */

/* Wir geben der Rückseite (.service-back) explizit den gleichen Hintergrund
   wie dem Hauptcontainer, um Rendering-Fehler auf mobilen Geräten zu beheben. */

.service-container.style-one,
.service-container.style-one .service-back {
  background: linear-gradient(145deg, #eef6ff 0%, #f7f7f9 100%);
}

@media (max-width: 600px) {
  .service-content {
    padding-top: 5em;
  }
}

.service-container.style-two,
.service-container.style-two .service-back {
  background: linear-gradient(145deg, #f5f5f7 0%, #e8f0e8 100%);
}

.service-container.style-three,
.service-container.style-three .service-back {
  background: linear-gradient(145deg, #fdf6e6 0%, #f9f7f2 100%);
}

.service-container.style-four,
.service-container.style-four .service-back {
  background: linear-gradient(145deg, #e6f8f6 0%, #f2f9f8 100%);
}

.service-container.style-five,
.service-container.style-five .service-back {
  background: linear-gradient(145deg, #e6f0fa 0%, #f2f5f9 100%);
}

.service-container.style-six,
.service-container.style-six .service-back {
  background: linear-gradient(145deg, #fae6e6 0%, #f9f2f2 100%);
}

.service-container.style-seven,
.service-container.style-seven .service-back {
  background: linear-gradient(145deg, #f2e6fa 0%, #f6f2f9 100%);
}

.service-container.style-eight,
.service-container.style-eight .service-back {
  background: linear-gradient(145deg, #ebfae6 0%, #f4f9f2 100%);
}

.service-container.style-nine,
.service-container.style-nine .service-back {
  background: linear-gradient(145deg, #e6eaeb 0%, #f2f3f4 100%);
}
/* Responsive Anpassungen */
@media (max-width: 768px) {
  .service-front, .service-back { padding: 4rem 1rem; min-height: 60vh; }
  .service-title { font-size: 2.5rem; }
  .service-description { font-size: 1.1rem; }
  .service-buttons { flex-direction: column; align-items: center; }
  .service-visual img { max-height: 200px; }
  .service-title-back { font-size: 2rem; }
}