/* ============================================================
   Datei:        assets/css/shared/karte.css
   Seite:        Startseite
   Zweck:        Projektkarte mit Kategoriefarbe, Hover-Anheben und Glow, der der Maus folgt
   Abhängig von: assets/css/shared/variablen.css, assets/css/shared/badge.css
   Genutzt von:  assets/js/shared/projekt-karte.js (einzige Stelle, die Karten baut)
   ============================================================ */

/* --- 1. Rahmen (Kategoriefarbe kommt als --kat-farbe per JS) --- */
.karte {
  --kat-farbe: var(--akzent-1);
  --maus-x: 50%;
  --maus-y: 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rahmen);
  border-radius: var(--radius);
  transition: transform var(--dauer-mittel) var(--ease), border-color var(--dauer-mittel),
    box-shadow var(--dauer-mittel);
}

/* Farbstreifen am linken Rand */
.karte::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 2;
  width: 3px;
  background: var(--kat-farbe);
}

/* --- 2. Glow, folgt der Maus (--maus-x, --maus-y setzt karte-effekt.js) --- */
.karte::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    320px circle at var(--maus-x) var(--maus-y),
    color-mix(in srgb, var(--kat-farbe) 22%, transparent),
    transparent 65%
  );
  transition: opacity var(--dauer-mittel);
}

.karte:focus-within {
  border-color: var(--kat-farbe);
}

@media (hover: hover) {
  .karte:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--kat-farbe) 55%, var(--farbe-rahmen));
    box-shadow: var(--schatten-glow);
  }

  .karte:hover::after {
    opacity: 1;
  }
}

/* Touchgeräte: kurzes Aufleuchten beim Antippen (Klasse setzt karte-effekt.js) */
.karte--aufleuchten::after {
  animation: karte-aufleuchten 450ms ease-out;
}

/* --- 3. Inhalt --- */
.karte__inhalt {
  display: grid;
  flex: 1;
  align-content: start;
  gap: var(--abstand-2);
  padding: var(--abstand-4);
}

.karte__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-2);
}

.karte__titel {
  font-size: 1.25rem;
}

.karte__link {
  color: var(--farbe-text);
  text-decoration: none;
}

/* Die ganze Karte ist klickbar: Der Link spannt eine unsichtbare Fläche auf */
.karte__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.karte__kurz {
  color: var(--farbe-text-gedaempft);
}

/* Hinweis "Ansehen →": der Pfeil rückt beim Überfahren etwas vor */
.karte__mehr {
  margin-top: var(--abstand-2);
  color: var(--kat-farbe);
  font-family: var(--schrift-mono);
  font-size: var(--schrift-klein);
  transition: transform var(--dauer-mittel) var(--ease);
}

.karte:hover .karte__mehr,
.karte:focus-within .karte__mehr {
  transform: translateX(6px);
}

/* --- 4. Zusatzbutton (liegt über der klickbaren Fläche) --- */
.karte__aktionen {
  position: relative;
  z-index: 3;
  padding: 0 var(--abstand-3) var(--abstand-3) var(--abstand-4);
}