/* Kopie aus der gerenderten Astro-Website (http://127.0.0.1:8099, bausteine/karte.css, kompiliert mit Autoprefixer), Stand 07.10.2026. Nicht von Hand angleichen, sondern neu kopieren. */
/* Karte (bausteine/Karte.tsx). Maße: Baustein-Tokens --bb-karte-* (tokens.css),
   Farben: Ton-Variablen (--bb-*). Module stellen für eine Variante nur die
   Tokens um, nicht die Regeln. */
.bb-karte {
  --bb-karte-flaeche: var(--bb-karte-grund, var(--bb-karte));
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--bb-karte-radius);
  background: var(--bb-karte-flaeche);
  color: var(--bb-text);
  text-decoration: none;
}
a.bb-karte:focus-visible { outline: var(--bm-fokus-breite) solid var(--bb-fokus); outline-offset: 3px; }

/* ── Medium ────────────────────────────────────────────────────────────── */
.bb-karte__medium {
  position: relative;
  display: block;
  flex: none;
  height: var(--bb-karte-bild-hoehe);
  overflow: hidden;
}
.bb-karte__medium > .bb-medium { border-radius: 0; }
/* Verlauf: das Bild läuft in die Kartenfläche aus, der Inhalt beginnt darin. */
.bb-karte--verlauf .bb-karte__medium { z-index: -1; background: var(--bm-flaeche-dunkel); }
.bb-karte--verlauf .bb-karte__medium::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent var(--bb-karte-verlauf-start), var(--bb-karte-flaeche) 100%);
  pointer-events: none;
}
.bb-karte--verlauf .bb-karte__inhalt { margin-top: calc(-1 * var(--bb-karte-verlauf-ueberlapp)); }
/* Bild wächst beim Überfahren der verlinkten Karte. */
.bb-karte--link:is(:hover, :focus-within) .bb-medium__bild { transform: scale(var(--bb-karte-zoom)); }

/* bild-voll: Medium füllt die Karte, Inhalt unten auf dem Schleier. */
.bb-karte--bild-voll { justify-content: flex-end; min-height: 22rem; }
.bb-karte--bild-voll .bb-karte__medium { position: absolute; z-index: -1; inset: 0; height: auto; }
.bb-karte--bild-voll .bb-karte__medium > .bb-medium { height: 100%; aspect-ratio: auto; }
.bb-karte--bild-voll .bb-karte__inhalt { flex-grow: 0; }
.bb-karte--bild-voll .bb-karte__medium::after { content: ''; position: absolute; inset: 0; background: var(--bm-schleier-bild); }

/* ── Inhalt ────────────────────────────────────────────────────────────── */
.bb-karte__inhalt {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--bb-karte-innen);
}
.bb-karte__nummer {
  display: block;
  margin-bottom: 1.25rem;
  font-family: var(--bm-font-ziffer);
  font-size: var(--bm-t-ziffer);
  font-weight: var(--bm-g-mittel);
  letter-spacing: var(--bm-sp-ziffer);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.bb-karte__etikett {
  display: block;
  margin-bottom: 0.75rem;
  font-size: var(--bm-t-klein);
  line-height: var(--bm-zh-mittel);
  color: var(--bb-text-ruhig);
}
.bb-karte__titel {
  display: block;
  margin: 0;
  font-family: var(--bm-font-titel);
  font-size: var(--bb-karte-titel-groesse);
  font-weight: var(--bm-g-titel);
  font-synthesis: none;
  line-height: var(--bb-karte-titel-zh);
  letter-spacing: var(--bb-karte-titel-sp);
  color: var(--bb-text);
  text-wrap: balance;
  overflow-wrap: break-word;
}
/* Titel-Link: Tippfläche ≥ 44 px über Innenabstand und Gegenrand. */
.bb-karte__titel-link {
  display: block;
  margin-block: -0.625rem;
  padding-block: 0.625rem;
  color: inherit;
  text-decoration: none;
}
.bb-karte__titel-link:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.12em; }
.bb-karte__titel-link:focus-visible { outline: var(--bm-fokus-breite) solid var(--bb-fokus); outline-offset: 2px; }
.bb-karte__text {
  display: block;
  margin: var(--bb-karte-text-abstand) 0 0;
  font-size: var(--bm-t-fest);
  line-height: var(--bb-karte-text-zh);
  color: var(--bb-text-ruhig);
  text-wrap: pretty;
}
.bb-karte__punkte { margin-top: 1.25rem; }

/* Aktionen unten bündig: gleiche Kartenhöhe je Reihe → Knöpfe auf einer Linie. */
.bb-karte__aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.75rem;
  margin-top: auto;
  padding-top: var(--bb-karte-aktionen-abstand);
}

@media (prefers-reduced-motion: reduce) {
  .bb-karte--link:is(:hover, :focus-within) .bb-medium__bild { transform: none; }
}