/* ============================================================
   ShortNews  v1.4.5
   Helles Design · WCAG 2.1 AA · Responsiv
   ============================================================ */

/* ── Screenreader-only ─────────────────────────────────────── */
.sn-sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ── Ad-Unterdrückung ──────────────────────────────────────── */
.shortnews-wrapper ins,
.shortnews-wrapper [class*="advads"],
.shortnews-wrapper [class*="advanced-ads"],
.shortnews-wrapper [id^="advads_"],
.shortnews-wrapper [id^="advanced-ads-"],
.shortnews-wrapper iframe[src*="googlesyndication"],
.shortnews-wrapper iframe[src*="doubleclick"] {
  display: none !important;
  height: 0 !important;
}

/* ============================================================
   WRAPPER
   ============================================================ */
.shortnews-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  margin-inline: 0 !important;
  box-sizing: border-box;
  font-family: inherit;
}

.shortnews-wrapper *,
.shortnews-wrapper *::before,
.shortnews-wrapper *::after {
  box-sizing: border-box;
}

/* ── Links ─────────────────────────────────────────────────── */
.sn-hero__link,
.sn-card__link {
  display: block;
  text-decoration: none !important;
  color: inherit;
}

.sn-hero__link:focus-visible,
.sn-card__link:focus-visible {
  outline: 2px solid #0070c9;
  outline-offset: 3px;
  border-radius: 12px;
}

/* ============================================================
   HERO
   ============================================================ */
.sn-hero {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #ccdde8;
  box-shadow: 0 2px 10px rgba(28,43,58,.12);
  transition: box-shadow .2s ease;
}

.sn-hero:hover { box-shadow: 0 5px 20px rgba(28,43,58,.20); }

.sn-hero__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  display: block;
}

.sn-hero__img-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}

.sn-hero:hover .sn-hero__img-wrap img { transform: scale(1.03); }

.sn-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10,22,38,.82)  0%,
    rgba(10,22,38,.30) 52%,
    rgba(10,22,38,.00) 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px 16px 14px;
}

.sn-hero__title {
  margin: 0;
  font-size: clamp(1rem, 3.8vw, 1.45rem);
  font-weight: 700;
  line-height: 1.25;
  color: #ffffff;
}

/* Hero-Meta: eine Zeile unter dem Bild */
.sn-hero__meta {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  padding: 9px 14px 10px !important;
  margin: 0 !important;
  background: #ffffff;
  border-top: 1px solid #e4edf5;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}

/* ============================================================
   GRID  2 × 2
   ─────────────────────────────────────────────────────────────
   KEIN grid-auto-rows:1fr — das würde alle Zellen auf die
   Höhe der größten strecken und Leerraum zwischen Titel und
   Meta erzeugen. Stattdessen natürliche Höhe (auto) und
   Symmetrie über min-height am Titel-Element.
   ============================================================ */
.sn-grid {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  margin-inline: 0 !important;
  list-style: none !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: auto;
  gap: 10px;
  /* align-items:start — Karten nehmen nur ihre natürliche Höhe ein.
     Symmetrie kommt ausschließlich über min-height am Titel. */
  align-items: start;
}

.sn-grid__item {
  display: block;
}

.sn-grid__item::before,
.sn-grid__item::marker { display: none !important; content: none !important; }

/* ── Karte ─────────────────────────────────────────────────── */
.sn-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e0e8f0;
  box-shadow: 0 1px 5px rgba(28,43,58,.09);
  transition: box-shadow .2s ease, transform .2s ease;
}

.sn-card:hover {
  box-shadow: 0 4px 16px rgba(28,43,58,.16);
  transform: translateY(-2px);
}

.sn-card__link {
  display: block;
  overflow: hidden;
}

/* Bild: 16:9, nie gestreckt */
.sn-card__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #d5e5f0;
  flex-shrink: 0;
  flex-grow: 0;
}

.sn-card__img-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}

.sn-card__link:hover .sn-card__img-wrap img { transform: scale(1.04); }

.sn-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #d5e8f5 0%, #bed4e5 100%);
}

/* ── Karten-Body ───────────────────────────────────────────────
   KEIN flex:1, KEIN margin-top:auto auf Meta.
   Body ist nur so groß wie sein Inhalt: Titel + Meta.
   ─────────────────────────────────────────────────────────── */
.sn-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 8px 10px 10px;
  /* KEIN flex:1 — Body ist nur so groß wie Titel + 5px + Meta */
}

/* ── Karten-Titel ──────────────────────────────────────────────
   min-height = 2 Zeilen → kurze Titel lassen keinen Leerraum,
   weil gap:5px der einzige Abstand zum Meta ist.
   max-height + line-clamp begrenzt lange Titel auf 2 Zeilen.
   ─────────────────────────────────────────────────────────── */
.sn-card__title {
  margin: 0;           /* KEIN margin-bottom — gap auf __body übernimmt das */
  font-size: clamp(.82rem, 2vw, .95rem);
  font-weight: 600;
  line-height: 1.4em;
  color: #1c2b3a;
  min-height: 2.8em;   /* 2 × 1.4em = 2.8em — Symmetrie */
  max-height: 2.8em;   /* Kein Überlaufen */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Karten-Meta ───────────────────────────────────────────────
   Direkt nach dem Titel dank gap:5px auf __body.
   KEIN margin-top:auto — das würde Meta an den Unterrand schieben.
   ─────────────────────────────────────────────────────────── */
.sn-card__meta {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  margin: 0 !important;     /* kein auto — direkt unter Titel */
  padding: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ============================================================
   GEMEINSAME META-ELEMENTE (Hero + Karte)
   ============================================================ */
.sn-meta-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: .72rem !important;
  line-height: 1.3 !important;
  color: #4a5e70 !important;
  white-space: nowrap;
  margin: 0 !important;
  padding: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}

.sn-meta-sep {
  color: #b0bec8;
  font-size: .72rem;
  line-height: 1;
  user-select: none;
  flex-shrink: 0;
}

.sn-icon {
  display: inline-block !important;
  width: 12px !important;
  height: 12px !important;
  min-width: 12px;
  flex-shrink: 0;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  overflow: visible !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width: 900px) {
  .sn-grid { grid-template-columns: repeat(4, 1fr); }
  .sn-hero__title { font-size: 1.5rem; }
}

@media (max-width: 359px) {
  .sn-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .sn-hero, .sn-card,
  .sn-hero__img-wrap img,
  .sn-card__img-wrap img { transition: none !important; }
  .sn-hero:hover .sn-hero__img-wrap img,
  .sn-card__link:hover .sn-card__img-wrap img,
  .sn-card:hover { transform: none !important; }
}

/* ============================================================
   DARK MODE
   ============================================================ */
@media (prefers-color-scheme: dark) {
  .sn-card { background: #192e44; border-color: #243d58; }
  .sn-card__title { color: #ddeeff; }
  .sn-hero__meta { background: #192e44 !important; border-top-color: #243d58 !important; }
  .sn-meta-item { color: #7aaabf !important; }
  .sn-meta-sep  { color: #3d607a; }
  .sn-card__img-wrap { background: #1d3450; }
}

/* ============================================================
   LEERZUSTAND
   ============================================================ */
.sn-empty { padding: 16px; color: #4a5e70; font-style: italic; }