.features {
    display: grid;
    margin: auto;
    grid-template-columns: repeat(3, 1fr);
    max-width: 864px;
    grid-gap: 24px;
    margin-top: 50px;
}

.feature {
    background-color: #fffdf7;
    gap: 25px;
    padding: 28px;
    border-radius: 8px;
    box-shadow: 2px 2px 26px rgba(20, 20, 20, .05);
}

.features .feature:nth-child(1) {
    display: grid;
    align-items: center;
    grid-template-columns: repeat(2, 1fr);
    grid-column: span 3;
    min-height: 380px;
}

.image {
    background-color: #f2f0eb;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    overflow: hidden;
    height: 104%;
    
}

.features2 .image {
    background-image: url('../images/persona2.webp');
    background-size: cover; /* Skaliert das Bild, um den Bereich auszufüllen */
    background-position: center; /* Zentriert das Bild */
    background-repeat: no-repeat; /* Verhindert Wiederholungen */
    width: 100%; /* Nimmt die gesamte Breite des Containers ein */
    height: auto; /* Passt die Höhe automatisch an den Inhalt an */
    aspect-ratio: 16 / 9; /* Stellt ein Seitenverhältnis ein */
}

.features2 .f-img {
    width: 42px;
}

.under {
    max-width: 360px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

.f-img {
    margin-bottom: 15px;
}

.f-head {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1.4em;
}

.above {
    position: absolute;
    box-shadow: 1px 1px 24px rgba(20, 20, 20, .1);
    width: 85%;
    top: 67%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
}

.features-two {
    margin: auto;
    max-width: 864px;
}

.feat-block:not(:nth-child(1)) {
    margin-top: 40px;
}

.feat-block {
    display: grid;
    align-items: center;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 350px;
    gap: 80px;
    padding-top: 30px;
}

.feat-block .image {
    align-items: center;
    border-radius: 12px;
}

.feat-block .image img {
    width: 300px;
}

.feat-block:nth-child(2) .image .under {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.heading-three {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.features-blocks {
    margin-top: 50px;
}

.features .image img {
    width: 90%;
    height: auto; 
    max-width: 500px;
    border-radius: 8px; 
    object-fit: cover; 
}

.features .image {
    background-color: #f0f0f2;
    padding: 0;
    height: 100%;
}

/* Rotating Boxes Container */
.rotating-boxes {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 30px 0;
    flex-wrap: wrap;
}

.rotating-boxes .partner-logo {
    width: 70%;
}

/* Flip Card Container */
.flip-card {
    background: transparent; /* Kein Hintergrund für den Container */
    width: 150px;
    height: 150px;
    perspective: 1000px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d; /* 3D-Effekt */
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg); /* Dreht die Karte bei Hover */
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; /* Verhindert, dass die Rückseite sichtbar ist */
    border-radius: 15px; /* Abgerundete Ecken */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    color: white; /* Textfarbe */
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Front Design */
.flip-card-front {
    color: #fff;
}

/* Back Design */
.flip-card-back {
    transform: rotateY(180deg); /* Rückseite umdrehen */
    font-size: 15px;
}

.flip-card-back a {
    color: #333;
    transition: 0.3s ease;
}

.flip-card-back a:hover {
    color: grey;;
}

/* Disable flip effect for the static card */
.no-flip .flip-card-inner {
    transform: none !important; /* Kein Flip-Effekt */
}

.no-flip .flip-card-front {
    color: #333;
    font-size: 15px;
    font-weight: bold;
}

.flip-card { position: relative; overflow: visible; }

.flip-card.softclose { padding-top: 0px; }

/* Rötlicher, transparenter Glassmorphism-Badge – im Card-Bereich oben mittig */
.flip-card.softclose .soft-badge {
  position: absolute;
  top: 8px;                     /* sitzt IN der Karte oben – nicht zwischen Reihen */
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 16px 5px 8px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  z-index: 6;
  pointer-events: none;         /* Hover weiterhin für die Karte */
  
  /* Glassmorphism in rot */
  background: linear-gradient(135deg,
              rgba(220, 40, 40, 0.55),
              rgba(255, 70, 70, 0.45));
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow:
    0 10px 24px rgba(220, 40, 40, 0.28),
    inset 0 1px 1.5px rgba(255,255,255,0.5);
}

/* feiner Glanz */
.flip-card.softclose .soft-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(120% 120% at 10% 0%, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(80% 80% at 100% 100%, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}

/* Icon: Kreis mit Punkt */
.flip-card.softclose .soft-icon {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex: 0 0 18px;

  background: radial-gradient(circle at 50% 50%,
              rgba(255,255,255,0.95) 0 2px,   /* innerer Punkt (2px) */
              rgba(255,255,255,0.95) 2px,     /* harte Kante Punkt */
              rgba(255,255,255,0.25) 2px 9px, /* Kreisfläche */
              rgba(255,255,255,0) 9px);       /* außen transparent */
  box-shadow:
    0 2px 6px rgba(255,255,255,0.25),
    inset 0 0 1px rgba(255,255,255,0.6);
}

/* Text: nicht bold, etwas Tracking, hell */
.flip-card.softclose .soft-text {
  font-weight: 400;                 /* NICHT bold */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 10px;
  color: rgba(255,255,255,0.95);
  white-space: nowrap;
}

/* Bläulicher, transparenter Glassmorphism-Badge – im Card-Bereich oben mittig */
.flip-card.comingsoon .soft-badge {
  position: absolute;
  top: 8px;                     /* sitzt IN der Karte oben – nicht zwischen Reihen */
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 16px 5px 8px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  z-index: 6;
  pointer-events: none;         /* Hover weiterhin für die Karte */
  
  /* Glassmorphism in rot */
  background: linear-gradient(135deg,
              rgba(47, 111, 250, 0.581),
              rgba(74, 131, 255, 0.481));
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow:
    0 10px 24px rgba(47, 111, 250, 0.18),
    inset 0 1px 1.5px rgba(255,255,255,0.5);
}

/* feiner Glanz */
.flip-card.comingsoon .soft-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(120% 120% at 10% 0%, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(80% 80% at 100% 100%, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}

/* Icon: Kreis mit Punkt */
.flip-card.comingsoon .soft-icon {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex: 0 0 18px;

  background: radial-gradient(circle at 50% 50%,
              rgba(255,255,255,0.95) 0 2px,   /* innerer Punkt (2px) */
              rgba(255,255,255,0.95) 2px,     /* harte Kante Punkt */
              rgba(255,255,255,0.25) 2px 9px, /* Kreisfläche */
              rgba(255,255,255,0) 9px);       /* außen transparent */
  box-shadow:
    0 2px 6px rgba(255,255,255,0.25),
    inset 0 0 1px rgba(255,255,255,0.6);
}

/* Text: nicht bold, etwas Tracking, hell */
.flip-card.comingsoon .soft-text {
  font-weight: 400;                 /* NICHT bold */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 10px;
  color: rgba(255,255,255,0.95);
  white-space: nowrap;
}

.no-flip .flip-card-inner {
    transform: none !important;     /* Kein Flip */
    transition: none !important;    /* Keine Animation */
}

.no-flip .flip-card-front {
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.2);
    color: #333;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    padding: 10px;
}