h2.catalog_header{
  color: black;
  position:relative;
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center;     /* vertikal */
}

.catalog {
  display:flex;
  flex-wrap:wrap;
  /* angebrochene Reihen werden zentriert - der Seitenabstand kommt aus
     --seiten-rand und bleibt damit trotzdem auf der Fluchtlinie */
  justify-content:center;
  gap:24px;
  padding:32px var(--seiten-rand);
}
.card{
  background:var(--karte);
  border:1px solid var(--linie);
  position: relative;
  flex:1 1 min(360px, 100%);
  min-width:0;
  max-width: 445px;
  border-radius:14px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.card:hover{
  transform:translateY(-4px);
  border-color:var(--weg);
  box-shadow:0 16px 30px rgba(23,32,25,0.14);
}
@media (prefers-reduced-motion: reduce){
  .card{ transition:none; }
  .card:hover{ transform:none; }
}

.card__image{
  aspect-ratio:16/9;
  display:block;
}
.card__image img{
  display:block;
  width:100%;
  height:100%;
}

/* Kein Bild hochgeladen: das Logo auf dunklem Grund haelt die Kachel, damit
   die Karte dieselbe Hoehe behaelt wie ihre Nachbarn. */
.card__image--leer{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--navy-blue);
}
.card__image--leer img{
  width:auto;
  height:44%;
  max-width:55%;
  opacity:0.85;
}

.card__body{
  padding:18px 18px 20px;
  display:flex;
  flex-direction:column;
  gap:2px;
}

/* Kopf einer Katalog-Karte: Titel und Kurzbeschreibung stehen dicht
   beieinander, das Feld haelt aber immer den Platz zweier Titel- und zweier
   Beschreibungszeilen frei. Ein einzeiliger Titel laesst den freien Rest
   darunter stehen, statt ihn zwischen Titel und Beschreibung zu legen - so
   ruecken Wochenpfad und Marken auf keiner Karte nach oben oder unten.
   Die Rechnung sind die Zeilenhoehen der beiden Blocks darunter. */
.card__kopf{
  min-height:calc(2 * 1.05 * 24px + 8px + 2 * 1.55 * 13.5px);
  margin:0 0 16px;
}

/* Was ueber zwei Zeilen hinausgeht, wird abgeschnitten - sonst sprengt ein
   langer Titel den Kopf. Ganz steht er auf der Referatsseite. */
.card__title{
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:700;
  font-size:24px;
  text-transform:uppercase;
  letter-spacing:0.01em;
  line-height:1.05;
  color:var(--tanne);
  margin:0 0 8px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.card__desc{
  font-size:13.5px;
  line-height:1.55;
  color:#3E4A42;
  margin:0 0 16px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Den Abstand nach unten traegt das Kopffeld - laege er an der Beschreibung,
   zaehlte er zur Kopfhoehe dazu und das Feld waere 16px zu hoch. */
.card__kopf .card__desc{
  margin-bottom:0;
}

/* Wochen-Pfad (Termine) */
/* Der Punkt eines Termintages ist groesser als der ruhende. Eine Karte ganz
   ohne Termin waere deshalb ein paar Pixel flacher und ihre Marken stuenden
   hoeher als nebenan - die Zeile haelt darum immer die Hoehe der grossen
   Variante frei: Punkt + Abstand + Beschriftung. */
.card__path{
  position:relative;
  display:flex;
  justify-content:space-between;
  padding:0 2px;
  margin:0 0 16px;
  min-height:calc(13px + 5px + 9.5px * 1.2);
}
.card__path::before{
  content:'';
  position:absolute;
  left:6px; right:6px;
  top:6px;
  height:0;
  border-top:2px dashed rgba(110,140,116,0.35);
}
.day{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
}
.day__punkt{
  width:9px; height:9px;
  border-radius:50%;
  background:var(--nebel);
  border:2px solid var(--moos);
}
/* Zeilenhoehe fest, sonst haengt die Hoehe des Pfads an der Schriftart und
   die min-height oben passt nicht mehr dazu. */
.day__label{
  font-family:'JetBrains Mono', monospace;
  font-size:9.5px;
  line-height:1.2;
  letter-spacing:0.03em;
  color:var(--moos);
}
.day.ist-termin .day__punkt{
  width:13px; height:13px;
  background:var(--weg);
  border-color:var(--weg);
  box-shadow:0 0 0 3px rgba(217,164,65,0.22);
}
.day.ist-termin .day__label{
  color:var(--tinte);
  font-weight:700;
}

/* Tags (nur rendern wenn gesetzt) */
.card__tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.tag{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 10px;
  border-radius:999px;
  font-family:'JetBrains Mono', monospace;
  font-size:10.5px;
  font-weight:500;
  letter-spacing:0.03em;
  text-transform:uppercase;
  line-height:1;
}
.tag--kosten{
  background:rgba(217,164,65,0.14);
  color:var(--weg-dunkel);
  border:1px solid rgba(217,164,65,0.4);
}
.tag--anmeldung{
  background:rgba(62,124,140,0.14);
  color:var(--berg-dunkel);
  border:1px solid rgba(62,124,140,0.4);
}


.card__link {
  color: inherit;
  text-decoration: none;
}
.card__link::after {
  content: '';
  position: absolute;
  inset: 0;
}

/* ==========================
   Katalog ohne Treffer
   ========================== */
/* Nimmt die volle Zeile, damit die Meldung im Flex-Katalog nicht als schmale
   Karte in der Mitte haengt. */
.katalog-leer {
  flex: 1 1 100%;
  padding: 48px 0;
  text-align: center;
  font-size: 16px;
  line-height: 1.6;
  color: #3e4a42;
}
.katalog-leer a {
  color: var(--berg-dunkel);
}

@media (max-width: 640px) {
  .catalog {
    padding: 20px var(--seiten-rand);
    gap: 16px;
  }

  h2.catalog_header {
    padding: 0 var(--seiten-rand);
    text-align: center;
  }
}