/* ==========================================================================
   cf-card: eine Kartenbasis für die ganze Website (#190, Option 3 „Material-Glas“)
   Aufbau: .cf-card + Füllung (--neutral | --accent | --featured)
           + Größe (--s | --m | --l) + Verhalten (--link | --option) + Inhaltsklassen.
   Kein backdrop-filter auf Karten (nur Navbar, Modale, Cookie-Banner).
   Layout (flex/grid) bleibt Sache des Markups; die Basis setzt kein display.
   Mauslicht für --link: public/js/cf-card.js.
   ========================================================================== */

/* --- Basis: Fläche, Lichtkante, zweistufiger Schatten -------------------- */
.cf-card {
  --cf-pad: 1.75rem;
  --cf-radius: 1.5rem;
  --cf-top: rgba(255, 255, 255, 0.09);
  --cf-bottom: rgba(255, 255, 255, 0.04);
  --cf-border: rgba(255, 255, 255, 0.14);
  --cf-glow: rgba(16, 185, 129, 0);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  padding: var(--cf-pad);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius);
  color: #f8f9fa;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, var(--cf-top), var(--cf-bottom));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.25),
    0 24px 48px -12px rgba(0, 0, 0, 0.55),
    0 0 36px -10px var(--cf-glow);
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

/* Rand mit Lichtverlauf von oben links (Pseudo-Ebene, Kinder bleiben unberührt) */
.cf-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.34),
    rgba(255, 255, 255, 0.05) 40%,
    rgba(255, 255, 255, 0) 70%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* feine Körnung wie mattiertes Glas */
.cf-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Füllung -------------------------------------------------------------- */
.cf-card--accent {
  --cf-top: rgba(16, 185, 129, 0.16);
  --cf-bottom: rgba(16, 185, 129, 0.07);
  --cf-border: rgba(16, 185, 129, 0.35);
  --cf-glow: rgba(16, 185, 129, 0.18);
}
.cf-card--featured {
  --cf-top: rgba(255, 255, 255, 0.16);
  --cf-bottom: rgba(16, 185, 129, 0.1);
  --cf-border: rgba(52, 211, 153, 0.55);
  --cf-glow: rgba(16, 185, 129, 0.45);
}

/* --- Größe: Innenabstand und Rundung -------------------------------------- */
.cf-card--s {
  --cf-pad: 1.25rem;
  --cf-radius: 1rem;
}
.cf-card--m {
  --cf-pad: 1.75rem;
  --cf-radius: 1.5rem;
}
.cf-card--l {
  --cf-pad: 2.5rem;
  --cf-radius: 1.75rem;
}
@media (max-width: 640px) {
  .cf-card--s {
    --cf-pad: 1rem;
  }
  .cf-card--m {
    --cf-pad: 1.25rem;
  }
  .cf-card--l {
    --cf-pad: 1.75rem;
  }
}

/* --- Hover: nur Karten mit Funktion heben sich an (1,5 px) ---------------- */
.cf-card:hover {
  --cf-border: rgba(255, 255, 255, 0.24);
}
.cf-card--accent:hover {
  --cf-border: rgba(52, 211, 153, 0.6);
  --cf-glow: rgba(16, 185, 129, 0.2);
}
.cf-card--featured:hover {
  --cf-border: rgba(110, 231, 183, 0.8);
  --cf-glow: rgba(16, 185, 129, 0.32);
}
.cf-card--link:hover,
.cf-card--featured:hover,
.cf-card:has(.cf-card__actions):not(:has(form, input, select, textarea, .cf-card--option)):hover,
.cf-card:has(> .cf-btn-primary, > .cf-btn-secondary):hover {
  transform: translateY(-1.5px);
}

/* --- Verhalten ------------------------------------------------------------ */
.cf-card--link {
  --x: 50%;
  --y: 0%;
  --o: 0;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.cf-card--link:hover .cf-card__title {
  color: #34d399;
}
.cf-card--link:focus-visible,
.cf-card:focus-within:has(:focus-visible) {
  outline: 2px solid #34d399;
  outline-offset: 3px;
}
/* Bild bündig am Rand (Bild-Teaser): Innenabstand trägt das Markup im Textteil */
.cf-card--flush {
  --cf-pad: 0;
}
/* Link-Karten sind Blöcke; :where() hält die Spezifität bei 0, damit flex/grid aus dem Markup gewinnt */
:where(a.cf-card) {
  display: block;
}
/* Deko, die bewusst über den Rand ragt (z. B. Puls-Punkt): nicht abschneiden */
.cf-card--visible {
  overflow: visible;
}
/* Auswahl-Karte im Formular (<label>): Zustand per :checked */
.cf-card--option {
  cursor: pointer;
}
.cf-card--option:has(:checked) {
  --cf-top: rgba(16, 185, 129, 0.2);
  --cf-bottom: rgba(16, 185, 129, 0.08);
  --cf-border: rgba(52, 211, 153, 0.7);
}

/* Mauslicht (nur --link; Elemente setzt cf-card.js) */
.cf-spot,
.cf-ring {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--o);
  transition: opacity 0.4s;
}
.cf-spot {
  background: radial-gradient(260px circle at var(--x) var(--y), rgba(52, 211, 153, 0.09), transparent 45%);
}
.cf-ring {
  padding: 1px;
  background: radial-gradient(160px circle at var(--x) var(--y), rgba(52, 211, 153, 0.45), transparent 60%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* --- Inhaltsklassen -------------------------------------------------------- */
.cf-card__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  margin-bottom: 1.25rem;
  border-radius: 14px;
  color: #34d399;
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.3);
  font-weight: 700;
}
.cf-card.text-center .cf-card__icon {
  margin-inline: auto;
}
.cf-card__title {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 700;
  color: #f8f9fa;
  transition: color 0.25s ease;
}
.cf-card__text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #b6bcc7;
}
.cf-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 1.5rem;
}

/* --- Barrierefreiheit und Fallbacks --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cf-card {
    transition:
      border-color 0.25s ease,
      box-shadow 0.25s ease;
  }
  .cf-card:hover,
  .cf-card--link:hover,
  .cf-card--featured:hover {
    transform: none;
  }
  .cf-spot,
  .cf-ring {
    display: none;
  }
}
@media (hover: none) {
  .cf-spot,
  .cf-ring {
    display: none;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .cf-card {
    background: #121816;
  }
  .cf-card::after,
  .cf-spot,
  .cf-ring {
    display: none;
  }
}