/* ============================================================
   Variante 4 (02.11.2026) – auf Basis der ruhigen V3 (pro.css):
   1. „Zur Plattform“ in der Navigation hervorgehoben (Olive, weiß)
   2. Seitenreiter „Kostenlos testen“ als echter Störer (Signalrot, stupst regelmäßig an)
   3. „Jetzt kostenlos starten“ (Zugangs-Kärtchen + Abschluss-Banner) in Signalrot
   4. „Produkt entdecken“ im Hero in Olive
   Nur geladen von index-liquid-4.html (body.v4).
   ============================================================ */
.v4{ --signal: #E1001A; --signal-hover: #C20016; --signal-glow: rgba(225,0,26,.45); }

/* 1. Zur Plattform */
.v4 .nav__cta{
  background: var(--olive); color: #fff; border-color: transparent;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 6px 22px rgba(75,84,57,.55);
  font-weight: 700;
}
.v4 .nav__cta:hover{
  background: color-mix(in srgb, var(--olive) 82%, #fff); color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 10px 30px rgba(75,84,57,.7);
  transform: translateY(-1px);
}

/* 2. Seitenreiter / Handy-Pille „Kostenlos testen“ */
.v4 .float-cta,
.v4 .float-cta.is-visible:hover{ background: var(--signal); color: #fff; }
.v4 .float-cta.is-visible{ box-shadow: 0 10px 30px var(--signal-glow); }
.v4 .float-cta.is-visible:hover{ background: var(--signal-hover); }
@media (min-width: 768px){
  .v4 .float-cta{
    background: var(--signal); color: #fff;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    padding: 28px 16px; font-size: 1rem;
  }
  .v4 .float-cta.is-visible{ animation: v4Nudge 7s ease-in-out 2s infinite; }
  /* rote Verlängerung zum Bildschirmrand: beim Anstupsen entsteht keine schwarze Lücke
     (wegen rotate(180deg) liegt die physisch rechte Kante des Reiters am linken Bildschirmrand) */
  .v4 .float-cta::after{ content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: 16px; background: inherit; }
  .v4 .float-cta.is-visible:hover{ animation: none; transform: translate(0, -50%) rotate(180deg); }
}
/* alle paar Sekunden kurz vorschnellen – auffällig, aber ohne Dauergewackel */
@keyframes v4Nudge{
  0%, 86%, 100% { transform: translate(0, -50%) rotate(180deg); }
  90%           { transform: translate(8px, -50%) rotate(180deg); }
  94%           { transform: translate(0, -50%) rotate(180deg); }
  97%           { transform: translate(5px, -50%) rotate(180deg); }
}
@media (max-width: 767px){
  .v4 .float-cta.is-visible{ animation: v4Pulse 7s ease-in-out 2s infinite; }
}
@keyframes v4Pulse{
  0%, 86%, 100% { box-shadow: 0 10px 30px var(--signal-glow); }
  92%           { box-shadow: 0 0 0 8px rgba(225,0,26,.18), 0 10px 30px var(--signal-glow); }
}
@media (prefers-reduced-motion: reduce){
  .v4 .float-cta.is-visible{ animation: none; }
}

/* 3. „Jetzt kostenlos starten“ im Zugangs-Kärtchen und im Abschluss-Banner */
.v4 .plan .btn--primary, .v4 .cta-banner .btn--primary{ background: var(--signal); color: #fff; }
.v4 .plan .btn--primary:hover, .v4 .cta-banner .btn--primary:hover{ background: var(--signal-hover); color: #fff; box-shadow: 0 10px 28px var(--signal-glow); }

/* 4. „Produkt entdecken“ im Hero in Olive – passend zu „Zur Plattform“; Rot bleibt für „kostenlos starten“ */
.v4 .hero__actions .btn--primary{ background: var(--olive); color: #fff; box-shadow: 0 6px 22px rgba(75,84,57,.55); }
.v4 .hero__actions .btn--primary:hover{ background: color-mix(in srgb, var(--olive) 82%, #fff); color: #fff; box-shadow: 0 10px 30px rgba(75,84,57,.7); }