/* ==========================================================================
   Lercher Cards - Frontend
   Klare, rahmenlose Karten mit schmalem Farbbalken oben, dezentem Schatten,
   gleicher Kartenhoehe und einem Pfeil unten rechts (Uni-Wien-Stil).
   ========================================================================== */

.lc-card-group {
  --lc-gap: 1.75rem;
  --lc-cols: 1;
  margin: 0 0 3rem;
}

.lc-card-group__header {
  margin: 0 0 1.5rem;
}

.lc-cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lc-gap);
  align-items: stretch;          /* alle Karten gleich hoch */
}

.lc-cards--align-left   { justify-content: flex-start; }
.lc-cards--align-center { justify-content: center; }
.lc-cards--align-right  { justify-content: flex-end; }

.lc-cards__cell {
  display: flex;
  width: calc((100% / var(--lc-cols)) - (var(--lc-gap) * (var(--lc-cols) - 1)) / var(--lc-cols));
}

/* --- einzelne Karte ---------------------------------------------------- */
.lc-card {
  --lc-card-accent: #045ea6;
  --lc-bar-height: 5px;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fff;
  border: 0;                     /* rahmenlos */
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .10), 0 4px 12px rgba(0, 0, 0, .07);
  transition: box-shadow .22s ease, transform .22s ease;
}

/* schmaler Farbbalken oben */
.lc-card::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  height: var(--lc-bar-height);
  background: var(--lc-card-accent);
}

.lc-card__media { width: 100%; overflow: hidden; }
.lc-card__media img,
.lc-card__media picture { display: block; width: 100%; height: auto; }

/* Body als Spalte: der Pfeil wird per margin-top:auto nach unten gedrueckt,
   dadurch stehen alle Pfeile auf einer Linie. */
.lc-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.75rem 1.25rem;
}

.lc-card__title {
  margin: 0 0 .9rem;
  font-size: 1.4rem;
  line-height: 1.25;
  color: #1a1a1a;
  /* Lange deutsche Komposita ("Wahrnehmungskompetenz") passen im
     vierspaltigen Layout unter ca. 1330px Fensterbreite nicht in eine Zeile
     und wuerden aus der Karte ragen. Der Browser trennt hier automatisch
     nach deutschen Regeln (setzt lang="de" am html-Element voraus - ist gesetzt).
     Damit sind manuelle Bindestriche im Titel unnoetig. */
  hyphens: auto;
  overflow-wrap: break-word;
}
.lc-card__title a { color: inherit; text-decoration: none; }
.lc-card:hover .lc-card__title a { color: var(--lc-card-accent); }

.lc-card__text {
  margin: 0;
  color: #333;
  line-height: 1.6;
  hyphens: auto;
  overflow-wrap: break-word;
}
.lc-card__text > *:first-child { margin-top: 0; }
.lc-card__text > *:last-child  { margin-bottom: 0; }

/* --- Pfeil unten rechts ------------------------------------------------- */
.lc-card__arrow {
  margin-top: auto;              /* nach unten */
  align-self: flex-end;          /* nach rechts */
  padding-top: 1.5rem;
  display: block;
  color: var(--lc-card-accent);
  line-height: 0;
  transition: transform .22s ease;
}
.lc-card:hover .lc-card__arrow { transform: translateX(4px); }

/* ganze Karte klickbar, wenn ein Link gesetzt ist */
.lc-card--linked .lc-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Hover: Karte hebt sich leicht an, Schatten wird tiefer */
.lc-card--linked:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12), 0 12px 28px rgba(0, 0, 0, .16);
  transform: translateY(-4px);
}

/* Tastaturbedienung sichtbar machen */
.lc-card--linked:focus-within {
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12), 0 12px 28px rgba(0, 0, 0, .16);
  transform: translateY(-4px);
}
.lc-card__title a:focus-visible { outline: 2px solid var(--lc-card-accent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .lc-card, .lc-card__arrow { transition: none; }
  .lc-card--linked:hover, .lc-card--linked:focus-within { transform: none; }
  .lc-card:hover .lc-card__arrow { transform: none; }
}

/* ==========================================================================
   Kontrastmodus
   Das Sitepackage schaltet ueber das Cookie "cont" zusaetzlich contrast.css
   zu. Diese Datei wird danach geladen, deshalb wuerden die bunten
   Kartenregeln gewinnen. Ueber die body-Klasse "contrast" (gesetzt im
   Projekt-TypoScript) schalten die Karten sauber mit:
   reines Schwarz/Weiss, harte Rahmen statt Schatten, Links unterstrichen.
   ========================================================================== */
.contrast .lc-card {
  background: #fff;
  border: 2px solid #000;
  box-shadow: none;
}

/* Farbbalken wird schwarz - die Themenfarben erreichen im Kontrastmodus
   teils keine ausreichende Kontrastwertung (z.B. Gelbgruen 2,2:1). */
.contrast .lc-card::before { background: #000; }

.contrast .lc-card-group__header,
.contrast .lc-card__title,
.contrast .lc-card__text,
.contrast .lc-card__text * { color: #000; }

.contrast .lc-card__title a { color: #000; text-decoration: underline; }
.contrast .lc-card__arrow { color: #000; }

/* Hover/Fokus: invertieren statt anheben - gleiche Logik wie bei den
   Buttons in contrast.css */
.contrast .lc-card--linked:hover,
.contrast .lc-card--linked:focus-within {
  background: #000;
  border-color: #000;
  box-shadow: none;
  transform: none;
}
.contrast .lc-card--linked:hover::before,
.contrast .lc-card--linked:focus-within::before { background: #fff; }

.contrast .lc-card--linked:hover .lc-card__title,
.contrast .lc-card--linked:hover .lc-card__text,
.contrast .lc-card--linked:hover .lc-card__text *,
.contrast .lc-card--linked:hover .lc-card__arrow,
.contrast .lc-card--linked:focus-within .lc-card__title,
.contrast .lc-card--linked:focus-within .lc-card__text,
.contrast .lc-card--linked:focus-within .lc-card__text *,
.contrast .lc-card--linked:focus-within .lc-card__arrow { color: #fff; }

.contrast .lc-card--linked:hover .lc-card__title a,
.contrast .lc-card--linked:focus-within .lc-card__title a {
  color: #fff;
  text-decoration: none;
}
.contrast .lc-card__title a:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
.contrast .lc-card--linked:hover .lc-card__title a:focus-visible { outline-color: #fff; }

/* --- Spalten ----------------------------------------------------------- */
@media (min-width: 576px) {
  .lc-cards--cols-2 { --lc-cols: 2; }
  .lc-cards--cols-4 { --lc-cols: 2; }
}
@media (min-width: 768px) {
  .lc-cards--cols-3 { --lc-cols: 3; }
}
@media (min-width: 1200px) {
  .lc-cards--cols-4 { --lc-cols: 4; }
}