/**
 * SP Mastodon Feed – Stylesheet
 *
 * Responsives CSS Grid, Divi-kompatibel (eigene sp-mf-* Klassen),
 * immer im Light Mode – ignoriert prefers-color-scheme.
 */

/* ============================================================
   CSS Custom Properties (Light Mode)
   ============================================================ */
:root {
  --sp-mf-bg:            #ffffff;
  --sp-mf-card-bg:       #ffffff;
  --sp-mf-card-border:   #d8d8d8;
  --sp-mf-card-shadow:   none;
  --sp-mf-card-radius:   10px;
  --sp-mf-text:          #333333;
  --sp-mf-text-muted:    #999999;
  --sp-mf-link:          #c44237;
  --sp-mf-link-hover:    #a33028;
  --sp-mf-accent:        #c44237;
  --sp-mf-gap:           1.25rem;
  --sp-mf-font-size:     1rem;
  --sp-mf-font-size-sm:  0.875rem;
  /* Breite der Beitragsspalte. Nicht die volle Divi-Breite nutzen: ab etwa
     80 Zeichen pro Zeile verliert man beim Zeilenwechsel die Zeile. Hier
     anpassen, wenn der Feed schmaler oder breiter stehen soll. */
  --sp-mf-max-width:     720px;
  /* Bildformat. Gemessen an den Beitraegen von @_seapunks sind 171 von 190
     Bildern Hochformat: 118 im Verhaeltnis 3:4, 49 im Instagram-Format 4:5,
     nur 17 querformatig. Der Rahmen steht deshalb auf 4:5 -- die 4:5-Bilder
     fuellen ihn genau, die 3:4-Bilder werden seitlich um knapp 6 Prozent
     beschnitten, was nicht auffaellt.

     Beschnitten statt eingepasst, wie bei Mastodon und X: In der Uebersicht
     zaehlt ein ruhiges Bild ohne Raender, das vollstaendige Bild zeigt die
     Lightbox beim Klick. Wer lieber Raender als Beschnitt moechte, setzt
     --sp-mf-bild-fit auf contain. */
  --sp-mf-bild-format:   4 / 5;
  --sp-mf-bild-fit:      cover;
  --sp-mf-bild-bg:       #f2f2f2;
  /* Obergrenze, damit ein Bild nie den ganzen Bildschirm fuellt. */
  --sp-mf-bild-max:      560px;
  /* Kachelformat. 4:5 statt quadratisch, weil die Bilder dieses Kontos
     ueberwiegend hochformatig sind -- 1:1 schneidet bei einem 3:4-Bild rund
     ein Viertel weg. Je Einbindung ueberschreibbar:
     [mastodon_feed layout="kacheln" format="1/1"] */
  --sp-mf-kachel-format: 4 / 5;
}


/* ============================================================
   Feed-Container
   ============================================================ */
.sp-mf-feed {
  width: 100%;
  box-sizing: border-box;
  font-size: var(--sp-mf-font-size);
  color: var(--sp-mf-text);
  color-scheme: light;
  background-color: transparent;
}

.sp-mf-empty .sp-mf-notice {
  padding: 2rem;
  text-align: center;
  color: var(--sp-mf-text-muted);
  border: 1px dashed var(--sp-mf-card-border);
  border-radius: var(--sp-mf-card-radius);
}

/* ============================================================
   Grid
   ============================================================

   Einspaltig, auch auf dem Desktop.

   Zwei mehrspaltige Anlaeufe sind am echten Material gescheitert:
   column-count fuellt spaltenweise, man scrollt also die linke Spalte durch
   und faengt rechts oben wieder an -- bei einem chronologischen Feed
   unbrauchbar. Ein Grid fuellt zwar zeilenweise, aber die Beitraege sind
   verschieden hoch (Threads, Bilder), sodass die Unterkanten ausfransen und
   Luecken entstehen.

   Eine Spalte hat beides nicht: die Reihenfolge ist eindeutig von oben nach
   unten, und ungleiche Hoehen fallen nicht auf, weil nichts nebeneinander
   steht.

   Die Breite ist begrenzt und zentriert -- ueber die volle Breite eines
   Divi-Bereichs waeren die Zeilen zu lang zum Lesen.
   ============================================================ */
.sp-mf-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-mf-gap);
  max-width: var(--sp-mf-max-width);
  margin-inline: auto;
}

/* Zweispaltig, per Shortcode: [mastodon_feed spalten="2"]
 *
 * Zeilenweise gefuellt, damit die Reihenfolge stimmt. Die Karten bleiben
 * unterschiedlich hoch -- ohne Masonry lassen sich Luecken nicht vermeiden,
 * und Masonry mit richtiger Reihenfolge braucht JavaScript. */
.sp-mf-grid--2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: start;
  max-width: min(100%, 1100px);
}

@media (min-width: 720px) {
  .sp-mf-grid--2 {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================================================
   Bildergalerie (mehrere Medien an einem Beitrag)
   ============================================================

   Grundlage ist scroll-snap, nicht JavaScript: So laesst sich die Galerie
   auch ohne JS wischen und scrollen, und auf dem Handy fuehlt sie sich an
   wie gewohnt. Das Skript ergaenzt lediglich Pfeile, Punkte und
   Tastaturbedienung -- faellt es aus, bleibt die Galerie benutzbar.

   Die feste Bildhoehe ist der eigentliche Gewinn: Ein Beitrag mit vier
   Bildern ist damit genauso hoch wie einer mit einem. Bei diesem Konto
   haben 51 von 100 Beitraegen mehrere Bilder, 28 davon vier.
   ============================================================ */
.sp-mf-gallery {
  position: relative;
}

.sp-mf-gallery__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Die Bildleiste selbst soll keine sichtbare Scrollbar haben -- geblaettert
     wird per Wischen, Pfeil oder Punkt. */
  scrollbar-width: none;
}

.sp-mf-gallery__track::-webkit-scrollbar {
  display: none;
}

.sp-mf-gallery__item {
  flex: 0 0 100%;
  scroll-snap-align: start;
  margin: 0;
}

/* Die Bildmasse selbst stehen weiter unten bei den Medien -- eine Stelle
   fuer alle Bilder, ob einzeln oder in einer Galerie. */

/* Zaehler rechts oben, damit erkennbar ist, dass mehr als ein Bild da ist */
.sp-mf-gallery__zaehler {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  margin: 0;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: var(--sp-mf-font-size-sm);
  line-height: 1.4;
  pointer-events: none;
}

/* Pfeile und Punkte legt das Skript an; ohne JS existieren sie nicht. */
.sp-mf-gallery__pfeil {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, opacity 0.2s ease;
}

.sp-mf-gallery__pfeil:hover,
.sp-mf-gallery__pfeil:focus-visible {
  background: rgba(0, 0, 0, 0.8);
}

.sp-mf-gallery__pfeil--zurueck { left: 0.5rem; }
.sp-mf-gallery__pfeil--vor     { right: 0.5rem; }

/* Am Anfang bzw. Ende ausgeblendet, statt ins Leere zu klicken */
.sp-mf-gallery__pfeil[hidden] {
  display: none;
}

.sp-mf-gallery__punkte {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.5rem 0 0.1rem;
}

.sp-mf-gallery__punkt {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #cfcfcf;
  cursor: pointer;
}

.sp-mf-gallery__punkt[aria-current="true"] {
  background: var(--sp-mf-accent);
}

/* In der Galerie haetten Bildunterschriften wechselnder Laenge die Hoehe
   wieder ungleich gemacht -- deshalb auf zwei Zeilen begrenzt. */
.sp-mf-gallery .sp-mf-media__caption {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   Post-Karte
   ============================================================ */
.sp-mf-card {
  display: flex;
  flex-direction: column;
  background: var(--sp-mf-card-bg);
  border: 1px solid var(--sp-mf-card-border);
  border-radius: var(--sp-mf-card-radius);
  box-shadow: var(--sp-mf-card-shadow);
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  /* Kein margin-bottom und kein break-inside mehr: beides stammte aus dem
     mehrspaltigen Satz. Im Grid sorgt gap fuer den Abstand, ein zusaetzlicher
     Rand ergaebe unten den doppelten. */
}

.sp-mf-card:hover {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

/* Thread-Badge */
.sp-mf-thread-badge {
  padding: 0.4rem 1rem;
  font-size: var(--sp-mf-font-size-sm);
  font-weight: 600;
  color: var(--sp-mf-link);
  background: color-mix(in srgb, var(--sp-mf-link) 10%, transparent);
  border-bottom: 1px solid var(--sp-mf-card-border);
  letter-spacing: 0.01em;
}

/* Trennlinie zwischen Thread-Posts */
.sp-mf-thread-divider {
  margin: 0;
  border: none;
  border-top: 1px dashed var(--sp-mf-card-border);
}

/* Post-Teil innerhalb einer Thread-Karte */
.sp-mf-post-part {
  display: flex;
  flex-direction: column;
}

/* Header */
.sp-mf-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem 0;
}

/* Direktlink zu einzelnem Thread-Post */
.sp-mf-thread-post-link {
  font-size: var(--sp-mf-font-size-sm);
  color: var(--sp-mf-text-muted);
  text-decoration: none;
  line-height: 1;
  padding: 0.1rem 0.25rem;
  border-radius: 3px;
  transition: color 0.15s ease;
}

.sp-mf-thread-post-link:hover {
  color: var(--sp-mf-link);
}

.sp-mf-card__date {
  font-size: var(--sp-mf-font-size-sm);
  color: var(--sp-mf-text-muted);
}

/* Content */
.sp-mf-card__content {
  padding: 0.75rem 1rem;
  line-height: 1.65;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Mastodon-HTML: Links in Posts */
.sp-mf-card__content a {
  color: var(--sp-mf-link);
  text-decoration: none;
  word-break: break-all;
}

.sp-mf-card__content a:hover {
  color: var(--sp-mf-link-hover);
  text-decoration: underline;
}

/* Paragraphen im Post-Content */
.sp-mf-card__content p {
  margin: 0 0 0.75em;
}

.sp-mf-card__content p:last-child {
  margin-bottom: 0;
}

/* ============================================================
   Medien
   ============================================================ */
.sp-mf-card__media {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sp-mf-media {
  margin: 0;
  overflow: hidden;
  background: var(--sp-mf-card-border);
}

/* Bilder */
.sp-mf-media--image {
  position: relative;
}

/* Fester Rahmen, Bild vollstaendig eingepasst.
 *
 * object-fit: contain statt cover: Von den Bildern dieses Kontos sind 171
 * von 190 Hochformat (ueberwiegend 3:4, daneben 4:5). In einem
 * querformatigen Ausschnitt wuerde cover genau die Bildmitte behalten und
 * oben und unten abschneiden -- bei Fotos von Einsaetzen und Crew das
 * Wesentliche. Die Raender links und rechts nimmt der Rahmen auf.
 *
 * Die feste Hoehe gilt fuer alle Bilder, einzeln wie in der Galerie: sonst
 * waere eine Karte mit einem Hochformat hoeher als eine mit vier Bildern. */
.sp-mf-media__img {
  width: 100%;
  aspect-ratio: var(--sp-mf-bild-format);
  max-height: var(--sp-mf-bild-max);
  object-fit: var(--sp-mf-bild-fit);
  background: var(--sp-mf-bild-bg);
  display: block;
  cursor: zoom-in;
  transition: opacity 0.2s ease;
}

.sp-mf-media__img:hover {
  opacity: 0.9;
}

/* Videos: gleiche Rahmenhoehe wie Bilder, damit Karten mit Video und Karten
   mit Foto gleich hoch sind. Kein festes Seitenverhaeltnis mehr -- 16:9 traf
   die hochformatigen Aufnahmen nicht. */
.sp-mf-media--video .sp-mf-media__video {
  width: 100%;
  aspect-ratio: var(--sp-mf-bild-format);
  max-height: var(--sp-mf-bild-max);
  display: block;
  background: #000;
  /* Video bleibt eingepasst: ein beschnittenes Standbild waere beim
     Abspielen irritierend. */
  object-fit: contain;
}

/* Audio */
.sp-mf-media--audio {
  padding: 0.75rem 1rem;
}

.sp-mf-media__audio {
  width: 100%;
}

/* Bildunterschriften */
.sp-mf-media__caption {
  padding: 0.4rem 0.75rem;
  font-size: var(--sp-mf-font-size-sm);
  color: var(--sp-mf-text-muted);
  font-style: italic;
  background: var(--sp-mf-card-bg);
}

/* ============================================================
   Footer / Link
   ============================================================ */
.sp-mf-card__footer {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--sp-mf-card-border);
  margin-top: auto;
}

.sp-mf-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--sp-mf-font-size-sm);
  color: var(--sp-mf-link);
  text-decoration: none;
  font-weight: 500;
}

.sp-mf-card__link:hover {
  color: var(--sp-mf-link-hover);
  text-decoration: underline;
}

.sp-mf-card__link-icon {
  font-size: 0.8em;
  line-height: 1;
}

/* ============================================================
   Pagination
   ============================================================ */
.sp-mf-pagination {
  margin-top: 2rem;
  text-align: center;
}

.sp-mf-pagination .page-numbers {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sp-mf-pagination .page-numbers li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sp-mf-pagination .page-numbers a,
.sp-mf-pagination .page-numbers span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--sp-mf-card-border);
  border-radius: 6px;
  font-size: var(--sp-mf-font-size-sm);
  color: var(--sp-mf-link);
  text-decoration: none;
  background: var(--sp-mf-card-bg);
  transition: background 0.15s ease, color 0.15s ease;
}

.sp-mf-pagination .page-numbers a:hover {
  background: var(--sp-mf-accent);
  color: #ffffff;
  border-color: var(--sp-mf-accent);
}

.sp-mf-pagination .page-numbers .current {
  background: var(--sp-mf-accent);
  color: #ffffff;
  border-color: var(--sp-mf-accent);
  font-weight: 600;
}

.sp-mf-pagination .page-numbers .dots {
  border-color: transparent;
  background: transparent;
  color: var(--sp-mf-text-muted);
  cursor: default;
}

.sp-mf-pagination__info {
  margin-top: 0.75rem;
  font-size: var(--sp-mf-font-size-sm);
  color: var(--sp-mf-text-muted);
}

/* ============================================================
   Lightbox (via JS aktiviert)
   ============================================================ */
.sp-mf-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.92);
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}

.sp-mf-lightbox.is-open {
  display: flex;
}

.sp-mf-lightbox__img {
  max-width: 95vw;
  max-height: 95vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}

.sp-mf-lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: background 0.15s ease;
}

.sp-mf-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* ============================================================
   Divi-Kompatibilität: Resets für Divi-Module
   ============================================================ */

/* Sicherstellen, dass Divi-Generics das Grid nicht brechen */
.et_pb_text .sp-mf-feed *,
.et_pb_code .sp-mf-feed * {
  box-sizing: border-box;
}

/* Divi setzt manchmal margin auf figure auf 0 — korrigieren */
.sp-mf-media {
  margin: 0 !important;
}

/* Divi-Listenreset für Pagination */
.sp-mf-pagination ul,
.sp-mf-pagination ul li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================================================
   Kachelansicht ([mastodon_feed layout="kacheln"])
   ============================================================

   Quadratisches Raster wie auf einem Instagram-Profil. Alle Kacheln sind
   gleich gross -- unabhaengig von Textlaenge, Bildzahl und Threads. Genau
   daran sind die Kartenlayouts gescheitert.

   Der Text tritt dafuer zurueck: sichtbar beim Darueberfahren, auf dem
   Touchgerät dauerhaft im unteren Streifen. Wer die Texte lesen soll,
   braucht die Kartenansicht.
   ============================================================ */
.sp-mf-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.5rem;
}

.sp-mf-kachel {
  position: relative;
  display: block;
  aspect-ratio: var(--sp-mf-kachel-format);
  overflow: hidden;
  border-radius: var(--sp-mf-card-radius);
  background: var(--sp-mf-bild-bg);
  text-decoration: none;
  color: #fff;
}

.sp-mf-kachel__bild {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.sp-mf-kachel:hover .sp-mf-kachel__bild,
.sp-mf-kachel:focus-visible .sp-mf-kachel__bild {
  transform: scale(1.04);
}

/* Beitraege ohne Bild -- bei diesem Konto 29 von 100. Ohne eigene Form
   waeren sie leere Kacheln, also bekommen sie den Text als Inhalt. */
.sp-mf-kachel--ohne-bild {
  background: var(--sp-mf-accent);
}

.sp-mf-kachel--ohne-bild .sp-mf-kachel__text {
  position: static;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 1rem;
  background: none;
  opacity: 1;
}

.sp-mf-kachel--ohne-bild .sp-mf-kachel__auszug {
  -webkit-line-clamp: 8;
}

.sp-mf-kachel__zeichen {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  display: flex;
  gap: 0.35rem;
  font-size: 1rem;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.sp-mf-kachel__text {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.5rem 0.75rem 0.75rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
  font-size: var(--sp-mf-font-size-sm);
  line-height: 1.35;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.sp-mf-kachel:hover .sp-mf-kachel__text,
.sp-mf-kachel:focus-visible .sp-mf-kachel__text {
  opacity: 1;
}

/* Ohne Zeigegeraet gibt es kein "darueberfahren" -- dort bleibt der Streifen
   sichtbar, sonst waere der Text auf dem Handy unerreichbar. */
@media (hover: none) {
  .sp-mf-kachel__text {
    opacity: 1;
  }
}

.sp-mf-kachel__datum {
  display: block;
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.sp-mf-kachel__auszug {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Videokacheln brauchen ein Zeichen: Sichtbar ist nur das Standbild, ohne
   Hinweis waere nicht zu erkennen, dass sich dahinter ein Video verbirgt. */
.sp-mf-kachel__abspielen {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 1.1rem;
  padding-left: 0.2rem;
  pointer-events: none;
}

/* ============================================================
   Medienraster innerhalb einer Karte ([mastodon_feed medien="raster"])
   ============================================================

   Das Muster von X und Mastodon: alle Bilder eines Beitrags zugleich, in
   einem Block fester Hoehe. Zwei stehen nebeneinander, drei als eins gross
   plus zwei, vier im Quadrat. Beschnitten wird beherzt -- das vollstaendige
   Bild zeigt der Klick in der Lightbox.

   Gegenueber der Galerie: alles auf einen Blick, kein Weiterschalten. Dafuer
   ist jedes einzelne Bild kleiner, und ab fuenf Bildern werden die weiteren
   nicht gezeigt (wie bei X).
   ============================================================ */
.sp-mf-medienraster {
  display: grid;
  gap: 3px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.sp-mf-medienraster .sp-mf-media {
  margin: 0;
  min-height: 0;   /* sonst sprengt das Bild seine Rasterzelle */
  overflow: hidden;
}

/* Im Raster fuellt jedes Bild seine Zelle -- aspect-ratio und max-height aus
   der Einzelansicht wuerden das Raster zerreissen. */
.sp-mf-medienraster .sp-mf-media__img,
.sp-mf-medienraster .sp-mf-media__video {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  max-height: none;
  object-fit: cover;
}

/* Bildunterschriften wuerden die Zellen ueberlagern; im Raster traegt der
   alt-Text die Beschreibung. */
.sp-mf-medienraster .sp-mf-media__caption {
  display: none;
}

.sp-mf-medienraster--2 {
  grid-template-columns: 1fr 1fr;
}

/* Drei: links eines ueber die volle Hoehe, rechts zwei uebereinander */
.sp-mf-medienraster--3 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.sp-mf-medienraster--3 .sp-mf-media:first-child {
  grid-row: 1 / span 2;
}

.sp-mf-medienraster--4 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

/* ============================================================
   Zweispaltig mit spaltenweisem Fluss ([mastodon_feed fluss="spalten"])
   ============================================================

   Erst die linke Spalte von oben nach unten, dann die rechte. Die Karten
   ruecken dicht aneinander, es entstehen keine Luecken durch ungleiche
   Hoehen -- der Preis ist, dass die Reihenfolge der Beitraege nur
   spaltenweise zu lesen ist.
   ============================================================ */
.sp-mf-grid--spaltenfluss {
  display: block;
  column-count: 2;
  column-gap: var(--sp-mf-gap);
  max-width: min(100%, 1100px);
  margin-inline: auto;
}

/* Im Spaltensatz sorgt kein gap fuer den Abstand -- und eine Karte darf
   nicht mitten im Umbruch zerrissen werden. */
.sp-mf-grid--spaltenfluss .sp-mf-card {
  break-inside: avoid;
  margin-bottom: var(--sp-mf-gap);
}

@media (max-width: 720px) {
  .sp-mf-grid--spaltenfluss {
    column-count: 1;
  }
}

/* Einspaltig linksbuendig statt zentriert */
.sp-mf-grid--links {
  margin-inline: 0;
}

/* Bildbeschreibungen ausblenden ([mastodon_feed beschreibungen="aus"]).
   Der alt-Text bleibt erhalten, nur die sichtbare Zeile entfaellt. */
.sp-mf-ohne-beschreibungen .sp-mf-media__caption {
  display: none;
}

/* ============================================================
   Streifenansicht ([mastodon_feed layout="streifen"])
   ============================================================

   Waagerecht wischbar, fuer Seiten, auf denen der Feed nicht die Hauptsache
   ist. Er nimmt nur die Hoehe einer Kartenreihe ein, unabhaengig davon, wie
   viele Beitraege dahinterstehen -- damit loest sich das Problem, dass ein
   Thread mit acht Beitraegen die Startseite sprengt.
   ============================================================ */
.sp-mf-streifen {
  position: relative;
}

.sp-mf-streifen__spur {
  display: flex;
  gap: var(--sp-mf-gap);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* Platz fuer den Schatten der Karten, sonst wird er abgeschnitten */
  padding: 2px 2px 0.75rem;
}

.sp-mf-streifen__spur::-webkit-scrollbar {
  display: none;
}

.sp-mf-streifen__karte {
  flex: 0 0 clamp(220px, 24vw, 280px);
  scroll-snap-align: start;
  background: var(--sp-mf-card-bg);
  border: 1px solid var(--sp-mf-card-border);
  border-radius: var(--sp-mf-card-radius);
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.sp-mf-streifen__karte:hover {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.sp-mf-streifen__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: var(--sp-mf-text);
}

.sp-mf-streifen__bild {
  width: 100%;
  aspect-ratio: var(--sp-mf-bild-format);
  object-fit: cover;
  background: var(--sp-mf-bild-bg);
  display: block;
}

.sp-mf-streifen__inhalt {
  display: block;
  padding: 0.7rem 0.8rem 0.9rem;
}

.sp-mf-streifen__datum {
  display: block;
  font-size: var(--sp-mf-font-size-sm);
  color: var(--sp-mf-text-muted);
  margin-bottom: 0.3rem;
}

.sp-mf-streifen__marke {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--sp-mf-accent);
  color: #fff;
  font-size: 0.75rem;
}

/* Vier Zeilen: genug fuer den Einstieg, zu wenig zum Lesen -- der Streifen
   soll neugierig machen, nicht die Vollansicht ersetzen. */
.sp-mf-streifen__text {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--sp-mf-font-size-sm);
  line-height: 1.4;
}

/* Letzte Karte: Verweis auf die vollstaendige Ansicht */
.sp-mf-streifen__karte--mehr {
  background: var(--sp-mf-accent);
  border-color: var(--sp-mf-accent);
}

.sp-mf-streifen__karte--mehr .sp-mf-streifen__link {
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 1.5rem 1rem;
  text-align: center;
  font-weight: 600;
}

.sp-mf-streifen__pfeil {
  position: absolute;
  top: calc(50% - 1.5rem);
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp-mf-streifen__pfeil:hover,
.sp-mf-streifen__pfeil:focus-visible {
  background: rgba(0, 0, 0, 0.85);
}

.sp-mf-streifen__pfeil--zurueck { left: -0.5rem; }
.sp-mf-streifen__pfeil--vor     { right: -0.5rem; }

.sp-mf-streifen__pfeil[hidden] {
  display: none;
}

/* Die Punkte waeren bei vielen Beitraegen eine unleserliche Reihe --
   im Streifen genuegen die Pfeile und das Wischen. */
.sp-mf-streifen__punkte {
  display: none;
}

/* ============================================================
   Detailansicht (Klick auf eine Streifenkarte)
   ============================================================

   Zeigt den vollstaendigen Beitrag auf der Seite, statt zu Mastodon zu
   springen. Der Inhalt kommt aus einem <template> in der Karte; ohne
   JavaScript bleibt der Link zu Mastodon.
   ============================================================ */
.sp-mf-detail {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 3vh 1rem;
  background: rgba(0, 0, 0, 0.75);
  overflow-y: auto;
}

.sp-mf-detail.is-open {
  display: flex;
}

.sp-mf-detail__rahmen {
  position: relative;
  width: 100%;
  max-width: 640px;
  background: var(--sp-mf-card-bg);
  border-radius: var(--sp-mf-card-radius);
  padding: 2.5rem 1.5rem 1.5rem;
  color: var(--sp-mf-text);
}

.sp-mf-detail__schliessen {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--sp-mf-text-muted);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.sp-mf-detail__schliessen:hover,
.sp-mf-detail__schliessen:focus-visible {
  background: #eee;
  color: var(--sp-mf-text);
}

.sp-mf-detail__datum {
  margin: 0 0 0.5rem;
  font-size: var(--sp-mf-font-size-sm);
  color: var(--sp-mf-text-muted);
}

/* In der Detailansicht stehen die Bilder untereinander und vollstaendig --
   hier ist Platz, und es geht um den einen Beitrag. */
.sp-mf-detail__medium {
  margin: 0.75rem 0 0;
}

.sp-mf-detail__medium img,
.sp-mf-detail__medium video {
  width: 100%;
  height: auto;
  max-height: 75vh;
  object-fit: contain;
  background: var(--sp-mf-bild-bg);
  border-radius: 6px;
  display: block;
}

.sp-mf-detail__medium figcaption {
  margin-top: 0.3rem;
  font-size: var(--sp-mf-font-size-sm);
  color: var(--sp-mf-text-muted);
}

.sp-mf-detail__fuss {
  margin: 1.25rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--sp-mf-card-border);
}

.sp-mf-detail__fuss a {
  color: var(--sp-mf-link);
  font-size: var(--sp-mf-font-size-sm);
  text-decoration: none;
}

.sp-mf-detail__fuss a:hover {
  color: var(--sp-mf-link-hover);
  text-decoration: underline;
}

/* Huelle um eine Kachel: traegt die Vorlage fuer die Detailansicht, damit
   jede Kachel ihre eigene behaelt. Sie selbst ist unsichtbar -- Format und
   Aussehen bringt die Kachel mit. */
.sp-mf-kachel-huelle {
  display: block;
  min-width: 0;
}

/* ============================================================
   Teaser ([mastodon_feed layout="teaser"])
   ============================================================

   Kurzer Ausschnitt fuer die Startseite unter den News: vier Beitraege
   nebeneinander am Desktop, 2 x 2 am Tablet, am Handy eine kompakte Liste.
   Die Liste statt grosser Kacheln untereinander, weil ein Hochformatbild
   ueber die volle Handybreite allein rund 450 px hoch ist -- vier davon
   haetten den Teaser auf ueber 2.000 px gestreckt.

   Die Umbrueche folgen Divis Stufen (Tablet bis 980 px, Handy bis 767 px),
   damit der Teaser mit den Spalten der Seite drumherum umbricht.
   ============================================================ */
.sp-mf-teaser {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-mf-gap);
}

.sp-mf-teaser__karte {
  min-width: 0;
  background: var(--sp-mf-card-bg);
  border: 1px solid var(--sp-mf-card-border);
  border-radius: var(--sp-mf-card-radius);
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.sp-mf-teaser__karte:hover {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.sp-mf-teaser__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--sp-mf-text);
}

.sp-mf-teaser__bildrahmen {
  display: block;
  aspect-ratio: var(--sp-mf-bild-format);
  background: var(--sp-mf-bild-bg);
  overflow: hidden;
}

/* Beitrag ohne Bild: Am Desktop bleibt die Flaeche als ruhiger Platzhalter,
   damit die vier Karten gleich hoch beginnen. */
.sp-mf-teaser__karte--ohne-bild .sp-mf-teaser__bildrahmen {
  background: var(--sp-mf-bild-bg) linear-gradient(135deg, rgba(196, 66, 55, 0.08), rgba(196, 66, 55, 0));
}

.sp-mf-teaser__bild {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--sp-mf-bild-fit);
}

.sp-mf-teaser__inhalt {
  display: block;
  padding: 0.7rem 0.8rem 0.9rem;
}

.sp-mf-teaser__datum {
  display: block;
  font-size: var(--sp-mf-font-size-sm);
  color: var(--sp-mf-text-muted);
  margin-bottom: 0.3rem;
}

.sp-mf-teaser__marke {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--sp-mf-accent);
  color: #fff;
  font-size: 0.75rem;
}

.sp-mf-teaser__text {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--sp-mf-font-size-sm);
  line-height: 1.4;
}

.sp-mf-teaser__mehr {
  margin: 1rem 0 0;
  text-align: center;
}

/* Tablet: 2 x 2 */
@media (max-width: 980px) {
  .sp-mf-teaser {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Handy: kompakte Liste -- kleines Bild links, Datum und drei Zeilen rechts */
@media (max-width: 767px) {
  .sp-mf-teaser {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .sp-mf-teaser__karte:hover {
    transform: none;
  }

  .sp-mf-teaser__link {
    flex-direction: row;
    align-items: stretch;
  }

  /* Das Bild richtet sich nach der Zeile, nicht umgekehrt: absolut im
     Rahmen, sonst streckt ein Hochformat die Zeile auf seine eigene Hoehe
     (gemessen 107 bis 173 px statt einheitlich). */
  .sp-mf-teaser__bildrahmen {
    position: relative;
    flex: 0 0 96px;
    width: 96px;
    aspect-ratio: auto;
    min-height: 96px;
  }

  .sp-mf-teaser__bild {
    position: absolute;
    inset: 0;
  }

  /* Ohne Bild braucht die Liste keinen leeren Kasten. */
  .sp-mf-teaser__karte--ohne-bild .sp-mf-teaser__bildrahmen {
    display: none;
  }

  .sp-mf-teaser__inhalt {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.55rem 0.75rem;
  }

  .sp-mf-teaser__text {
    -webkit-line-clamp: 3;
  }
}

/* ============================================================
   Bedienelemente gegen Theme-Vorgaben absichern
   ============================================================

   Divi und andere Themes geben button-Elementen eigene Rahmen, Farben und
   Innenabstaende. Ohne diesen Reset erscheinen Pfeile und Punkte als
   gewoehnliche Schaltflaechen ueber die volle Breite.
   ============================================================ */
.sp-mf-feed button.sp-mf-gallery__pfeil,
.sp-mf-feed button.sp-mf-gallery__punkt,
.sp-mf-feed button.sp-mf-streifen__pfeil,
.sp-mf-feed button.sp-mf-streifen__punkt,
.sp-mf-detail button.sp-mf-detail__schliessen {
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  font-family: inherit;
  min-width: 0;
  width: auto;
}

.sp-mf-feed button.sp-mf-gallery__pfeil,
.sp-mf-feed button.sp-mf-streifen__pfeil {
  position: absolute;
  padding: 0;
  margin: 0;
  border: 0;
}

.sp-mf-feed button.sp-mf-gallery__pfeil {
  width: 2.25rem;
  height: 2.25rem;
}

.sp-mf-feed button.sp-mf-streifen__pfeil {
  width: 2.5rem;
  height: 2.5rem;
}

.sp-mf-feed button.sp-mf-gallery__punkt,
.sp-mf-feed button.sp-mf-streifen__punkt {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
}

/* Divi setzt auf Links im Inhalt eigene Farben und Unterstreichungen --
   die Kacheln und Streifenkarten sind aber Flaechen, keine Textlinks. */
.sp-mf-feed a.sp-mf-kachel,
.sp-mf-feed a.sp-mf-streifen__link,
.sp-mf-feed a.sp-mf-teaser__link {
  box-shadow: none;
  text-decoration: none;
}