/* ============================================================
   Gründungsfehler – Karten mit thematischen, animierten Grafiken
   (Sektion "Sechs Fehler, die später richtig teuer werden" auf
   gruender.html)
   ============================================================ */

.gfail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.4rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 980px) { .gfail-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .gfail-grid { grid-template-columns: 1fr; } }

.gfail-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(20, 33, 61, 0.08);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 6px 18px -12px rgba(20, 33, 61, 0.14);
  transition: transform 0.5s cubic-bezier(0.2,0.8,0.2,1),
              box-shadow 0.5s cubic-bezier(0.2,0.8,0.2,1),
              border-color 0.4s ease;
}
.gfail-card.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.65s cubic-bezier(0.2,0.8,0.2,1) var(--gf-delay, 0s),
              transform 0.65s cubic-bezier(0.2,0.8,0.2,1) var(--gf-delay, 0s),
              box-shadow 0.5s ease, border-color 0.4s ease;
}
.gfail-card.reveal.is-visible { opacity: 1; transform: translateY(0); }
.gfail-card:hover,
.gfail-card:focus-within {
  transform: translateY(-6px);
  border-color: rgba(212, 179, 106, 0.55);
  box-shadow: 0 24px 50px -22px rgba(176, 136, 86, 0.32);
}
/* gold top accent bar */
.gfail-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 2;
  background: linear-gradient(90deg, #B08856 0%, #D4B36A 55%, #E4C988 100%);
  transform: scaleX(0.22);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.2,0.8,0.2,1);
}
.gfail-card:hover::before,
.gfail-card:focus-within::before { transform: scaleX(1); }

/* --- Graphic area --- */
.gfail-card__graphic {
  height: 124px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 28% 22%, rgba(212, 179, 106, 0.18), transparent 60%),
    radial-gradient(circle at 82% 90%, rgba(20, 33, 61, 0.05), transparent 60%),
    linear-gradient(155deg, #fbf6ea 0%, #f6f1e3 100%);
  border-bottom: 1px solid rgba(176, 136, 86, 0.18);
  overflow: hidden;
}
.gfail-card__graphic svg {
  width: auto;
  height: 96px;
  display: block;
}

/* --- Body --- */
.gfail-card__body {
  padding: 1.15rem 1.35rem 1.35rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.gfail-card__title {
  font-size: 1.04rem;
  font-weight: 600;
  color: #14213D;
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
  line-height: 1.32;
  transition: color 0.3s ease;
}
.gfail-card:hover .gfail-card__title,
.gfail-card:focus-within .gfail-card__title { color: #B08856; }

/* Beschreibungstext ist eingeklappt – öffnet sich erst bei Hover / Fokus */
.gfail-card__desc {
  font-size: 0.89rem;
  line-height: 1.56;
  color: #4b5366;
  max-height: 0;
  opacity: 0;
  margin: 0;
  overflow: hidden;
  transition: max-height 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
              opacity 0.4s ease,
              margin 0.5s ease;
}
.gfail-card:hover .gfail-card__desc,
.gfail-card:focus-within .gfail-card__desc {
  max-height: 360px;
  opacity: 1;
  margin: 0 0 1rem;
}

/* Hinweis "mehr erfahren", nur sichtbar wenn eingeklappt */
.gfail-card__hint {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #B08856;
  margin-bottom: 0.85rem;
  transition: opacity 0.3s ease, max-height 0.4s ease, margin 0.4s ease;
}
.gfail-card__hint svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.gfail-card:hover .gfail-card__hint,
.gfail-card:focus-within .gfail-card__hint {
  opacity: 0;
  max-height: 0;
  margin: 0;
  overflow: hidden;
}

.gfail-card__badge {
  align-self: flex-start;
  margin-top: 0.15rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #D4B36A;
  background: linear-gradient(135deg, #14213D 0%, #1f3258 100%);
  border: 1px solid rgba(212, 179, 106, 0.35);
  padding: 0.44rem 0.8rem;
  border-radius: 999px;
}
.gfail-card__badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #D4B36A;
  flex-shrink: 0;
}

/* ============================================================
   Per-graphic animations
   ============================================================ */

/* ① Mustersatzung — Kopie schiebt sich heraus */
.gf-copy {
  animation: gf-copy 4.6s ease-in-out infinite;
}
@keyframes gf-copy {
  0%, 100% { transform: translate(0, 0);   opacity: 1;   }
  42%, 58% { transform: translate(8px, -7px); opacity: 0.6; }
}

/* ② Holding — fehlendes Mutter-Element pulsiert, Linie fließt */
.gf-missing {
  animation: gf-missing 2.6s ease-in-out infinite;
}
@keyframes gf-missing {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 1;    }
}
.gf-flow {
  stroke-dasharray: 4 4;
  animation: gf-flow 1.3s linear infinite;
}
@keyframes gf-flow { to { stroke-dashoffset: -16; } }

/* ③ Anstellungsvertrag — fehlende Fläche pulsiert */
.gf-gap {
  transform-box: view-box;
  transform-origin: 60px 60px;
  animation: gf-gap 2.3s ease-in-out infinite;
}
@keyframes gf-gap {
  0%, 100% { opacity: 0.35; transform: scale(1);    }
  50%      { opacity: 1;    transform: scale(1.05); }
}

/* ④ Statusfeststellung — Zeiger dreht, Alarm pulsiert */
.gf-hand {
  transform-box: view-box;
  transform-origin: 56px 47px;
  animation: gf-hand 3s steps(12) infinite;
}
@keyframes gf-hand { to { transform: rotate(360deg); } }
.gf-alert {
  transform-box: view-box;
  transform-origin: 86px 22px;
  animation: gf-alert 1.6s ease-in-out infinite;
}
@keyframes gf-alert {
  0%, 100% { transform: scale(1);   opacity: 1;   }
  50%      { transform: scale(1.18); opacity: 0.65; }
}

/* ⑤ IP — schwebt ungebunden zwischen Privat und GmbH */
.gf-float {
  animation: gf-float 3.4s ease-in-out infinite;
}
@keyframes gf-float {
  0%, 100% { transform: translateY(0);    }
  50%      { transform: translateY(-7px); }
}

/* ⑥ Cap Table — Tortenstücke wackeln chaotisch */
.gf-jitter {
  transform-box: view-box;
  transform-origin: 60px 46px;
  animation: gf-jitter 1s ease-in-out infinite;
}
.gf-jitter--2 { animation-delay: 0.18s; animation-duration: 1.15s; }
.gf-jitter--3 { animation-delay: 0.34s; animation-duration: 0.9s;  }
.gf-jitter--4 { animation-delay: 0.5s;  animation-duration: 1.25s; }
@keyframes gf-jitter {
  0%, 100% { transform: rotate(0deg);   }
  25%      { transform: rotate(-3.5deg);}
  75%      { transform: rotate(3.5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .gfail-card, .gfail-card *,
  .gf-copy, .gf-missing, .gf-flow, .gf-gap,
  .gf-hand, .gf-alert, .gf-float, .gf-jitter {
    animation: none !important;
    transition: none !important;
  }
}