/* =========================
   #c9 Flip-Card (STABIL)
   - Base: Content-Swap (iOS-safe)
   - 3D Flip: nur NON-iOS als Enhancement
   ========================= */

/* Card + Variablen */
#c9 .card-group-element-item .card{
  position: relative;

  /* Desktop Defaults */
  min-height: 630px;

  /* Kreis-Parameter (JS liest das aus!) */
  --c9-circle-size: 44px;
  --c9-circle-right: 26px;
  --c9-circle-bottom: 16px;

  /* Platz unten für Text+Kreis */
  --c9-bottom-space: 90px;

  /* Text-Offset neben Kreis */
  --c9-label-right: 86px;
  --c9-label-bottom: 22px;
  --c9-label-size: 18px;
}

/* Body: Base ohne 3D (damit iOS nie 3D sieht) */
#c9 .card-group-element-item .card .card-body{
  position: relative;
  padding-bottom: var(--c9-bottom-space);
}

/* -------------------------
   BACK (UL) – Base
   ------------------------- */
#c9 .card-group-element-item .card .card-body .list-normal{
  display: none;
  pointer-events: none;
}

/* Rückseite aktiv */
#c9 .card-group-element-item .card.is-flipped .card-body .list-normal{
  display: block;
  pointer-events: auto;
  position: relative;
  padding-top: 2.2rem;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Überschrift auf Rückseite */
#c9 .card-group-element-item .card.is-flipped .card-body ul.list-normal::before{
  content: "Unsere Leistungen";
  position: absolute;
  top: 0;
  left: 0;
  color: #41959e;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.9rem;
  width: 100%;
}

/* Fronttexte ausblenden (Base Swap) */
#c9 .card-group-element-item .card.is-flipped .card-body .card-subtitle,
#c9 .card-group-element-item .card.is-flipped .card-body p{
  display: none;
}

/* =========================
   BUTTON UNTEN RECHTS
   - VORNE: Leistungen + PLUS
   - HINTEN: Zurück + MINUS
   ========================= */

/* Text neben dem Kreis */
#c9 .card-group-element-item .card::before{
  content: "Leistungen";
  position: absolute;
  right: var(--c9-label-right);
  bottom: var(--c9-label-bottom);
  font-size: var(--c9-label-size);
  font-weight: 600;
  color: #3da4a9;
  z-index: 100;
  pointer-events: none;
}

/* Rückseite: Text ändern */
#c9 .card-group-element-item .card.is-flipped::before{
  content: "Zurück";
}

/* Kreis */
#c9 .card-group-element-item .card::after{
  content: "";
  position: absolute;
  right: var(--c9-circle-right);
  bottom: var(--c9-circle-bottom);

  width: var(--c9-circle-size);
  height: var(--c9-circle-size);
  border-radius: 50%;

  background: #3da4a9;
  z-index: 101;
  pointer-events: none;

  /* PLUS (2 Linien) */
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff);
  background-size:
    18px 2px,
    2px 18px;
  background-position:
    center center,
    center center;
  background-repeat: no-repeat;

  transition: transform .15s ease, box-shadow .15s ease;
}

/* Rückseite: MINUS (1 Linie) */
#c9 .card-group-element-item .card.is-flipped::after{
  background-image: linear-gradient(#fff, #fff);
  background-size: 18px 2px;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Hover-Feedback (Desktop per JS: .circle-hover nur wenn Maus wirklich im Kreis) */
#c9 .card-group-element-item .card.circle-hover::after{
  transform: scale(1.12);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

/* Touch-Feedback (Mobile): beim Tippen kurz „drücken“ */
#c9 .card-group-element-item .card:active::after{
  transform: scale(0.96);
}

/* =========================
   Responsive Anpassungen
   ========================= */
@media (max-width: 992px){
  #c9 .card-group-element-item .card{
    min-height: 0;

    --c9-circle-size: 48px;
    --c9-circle-right: 18px;
    --c9-circle-bottom: 14px;

    --c9-bottom-space: 88px;

    --c9-label-right: 78px;
    --c9-label-bottom: 20px;
    --c9-label-size: 16px;
  }

  #c9 .card-group-element-item .card.is-flipped .card-body ul.list-normal::before{
    font-size: 1.4rem;
    line-height: 1.7rem;
  }
}

@media (max-width: 576px){
  #c9 .card-group-element-item .card{
    --c9-circle-size: 52px;
    --c9-circle-right: 14px;
    --c9-circle-bottom: 12px;

    --c9-bottom-space: 96px;

    --c9-label-right: 76px;
    --c9-label-bottom: 18px;
    --c9-label-size: 15px;
  }

  #c9 .card-group-element-item .card .card-body p{
    font-size: 1rem;
    line-height: 1.45;
  }
}

/* =========================
   3D Flip Enhancement – NUR NON-iOS
   (iOS soll das nie sehen, weil es sonst "wegbuggt")
   ========================= */
@supports not (-webkit-touch-callout: none){

  #c9 .card-group-element-item .card{
    perspective: 1000px;
  }

  #c9 .card-group-element-item .card .card-body{
    transform-style: preserve-3d;
    transition: transform 0.6s;
  }

  #c9 .card-group-element-item .card.is-flipped .card-body{
    transform: rotateY(180deg);
  }

  /* Backface verstecken */
  #c9 .card-group-element-item .card .card-body > *{
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  /* Front minimal nach vorne */
  #c9 .card-group-element-item .card .card-body .card-subtitle,
  #c9 .card-group-element-item .card .card-body p{
    transform: translateZ(1px);
  }

  /* Title auf beiden Seiten korrekt */
  #c9 .card-group-element-item .card .card-body .card-title{
    transform: rotateY(0deg) translateZ(2px);
    transition: transform 0.6s;
  }

  #c9 .card-group-element-item .card.is-flipped .card-body .card-title{
    transform: rotateY(180deg) translateZ(2px);
  }

  /* Rückseite (UL) in 3D drehen */
  #c9 .card-group-element-item .card .card-body .list-normal{
    transform: rotateY(180deg) translateZ(1px);
  }
}

/* =========================
   Reduced motion
   ========================= */
@media (prefers-reduced-motion: reduce){
  #c9 .card-group-element-item .card .card-body,
  #c9 .card-group-element-item .card .card-body .card-title{
    transition: none !important;
  }
}

/* =========================================================
   iOS/WebKit Fix: #c9 darf nicht durch scroll-reveal ausgeblendet werden
   ========================================================= */
#main-content #c9.scroll-reveal{
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  will-change: auto !important;
}

#main-content #c9.scroll-reveal.is-visible{
  opacity: 1 !important;
  transform: none !important;
}