/* ============================================================
   Floating Card — z.B. ueber Hero-Bildern oder als Overlay
   ============================================================ */

.floating-card {
  position: absolute; bottom: var(--space-xl); left: -40px;
  background: var(--color-gruen); color: var(--color-sand);
  padding: var(--space-md) var(--space-lg);
  font-family: var(--font-headline); z-index: 5;
  box-shadow: 0 12px 36px rgba(0,0,0,0.18);
  max-width: 280px;
  animation: fade-up 0.9s cubic-bezier(0.22,1,0.36,1) 1.1s both;
}
.floating-card-eyebrow {
  font-family: var(--font-classic-tech);
  font-size: 0.72rem; letter-spacing: 0.18em;
  text-transform: uppercase; opacity: 0.85; margin-bottom: 0.4em;
}
.floating-card-title { font-size: 1.4rem; font-style: italic; line-height: 1.15; margin-bottom: 0.4em; }
.floating-card-meta { font-family: var(--font-classic-tech); font-size: 0.85rem; opacity: 0.85; }

@media (max-width: 880px) {
  .floating-card { left: var(--space-md); bottom: var(--space-md); }
}

@media (max-width: 720px) {
  .floating-card { left: var(--space-sm); bottom: var(--space-sm); max-width: 200px; padding: var(--space-sm) var(--space-md); }
  .floating-card-title { font-size: 1rem; }
  .floating-card-eyebrow { font-size: 0.62rem; }
  .floating-card-meta { font-size: 0.75rem; }
}

@media (max-width: 380px) {
  .floating-card { max-width: 180px; padding: 0.6em 0.9em; }
  .floating-card-title { font-size: 0.92rem; }
}