/* FMT Redaktion — Einzelansichten (Beitrag / Veranstaltung).
   Bewusst schlank: Das Grundlayout kommt weiter aus dem Theme, hier stehen
   nur Korrekturen und Ergänzungen für Inhalte aus dem Redaktionsformular. */

/* ── Absatzabstände ──
   Jeder Absatz bekam margin-bottom UND padding-bottom (je 16px), zusammen
   32px. Diese doppelte Vergabe nehmen wir überall heraus und setzen einen
   klaren Abstand:

     Beschreibung/Fließtext  ~13px  — luftig genug zum Lesen
     Organisatorisches        ~6px  — dort stehen nur Ort, Datum, Uhrzeit

   Beide Werte mit !important: Das Theme setzt in aegean.css eine eigene,
   sehr spezifische Regel (body.single .event-section p), gegen die eine
   normale Klassenregel nicht ankommt. */
.event-section p {
  padding-bottom: 0 !important;
  margin-bottom: .8em !important;
}
.event-section p:last-child { margin-bottom: 0 !important; }

/* Aufzählungen im selben Rhythmus */
.event-section ul,
.event-section ol { padding-bottom: 0 !important; margin-bottom: .8em !important; }
.event-section li { padding-bottom: 0 !important; margin-bottom: .2em !important; }

/* ── VIDEO ──
   Fester 16:9-Rahmen, damit die Seite beim Laden nicht springt. */
.event-section--video { margin-top: 4em !important; }
.fmt-video {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: #1b1b1b; border-radius: 12px; overflow: hidden;
}
.fmt-video__frame,
.fmt-video__player {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  display: block; object-fit: contain; background: #000;
}
/* Vorschau mit Hinweis — das ist der Zustand VOR dem Klick */
.fmt-video__start {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 20px; cursor: pointer; border: 0;
  background-color: #1b1b1b; background-size: cover; background-position: center;
  color: #fff; font: inherit; text-align: center;
}
/* Abdunkeln, damit der Hinweis auf jedem Bild lesbar bleibt */
.fmt-video__start::before {
  content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.45);
}
.fmt-video__icon, .fmt-video__note { position: relative; }
.fmt-video__icon {
  width: 66px; height: 66px; border-radius: 50%;
  background: rgba(255,255,255,.92);
  display: block; flex-shrink: 0;
}
/* Abspiel-Dreieck, rein zeichnerisch — kein zusätzliches Bild nötig */
.fmt-video__icon::after {
  content: ""; position: absolute; top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid; border-width: 13px 0 13px 22px;
  border-color: transparent transparent transparent #1b1b1b;
}
.fmt-video__start:hover .fmt-video__icon { background: #fff; }
.fmt-video__note { font-size: .85rem; line-height: 1.4; max-width: 34ch; }

/* Datenblock: dichter als Fließtext */
.event-section--org p { margin-bottom: .35em !important; }
.event-section--org p:last-child { margin-bottom: 0 !important; }

/* Die Überschrift „Organisatorisches" trennt den Datenblock vom Fließtext
   darüber — durchgehende Linie über die volle Breite, darunter Abstand.
   !important, weil das Kind-Theme (aegean.css) Überschriften im
   Veranstaltungsbereich eigene Abstände gibt. */
.event-section--desc,
.event-section--org { margin-top: 4em !important; }
.event-section--org h2 {
  border-bottom: 1px solid rgba(0,0,0,.15);
  padding-bottom: .35em !important;
  margin-bottom: 1em !important;
}

/* ── Textausrichtung aus dem Editor ──
   Quill schreibt die Ausrichtung als Klasse an den Absatz. Ohne diese Regeln
   bliebe sie im Frontend wirkungslos, weil das Theme die Klassen nicht kennt. */
.event-section .ql-align-center  { text-align: center; }
.event-section .ql-align-right   { text-align: right; }
.event-section .ql-align-justify { text-align: justify; }

/* Einrückungen aus dem Editor */
.event-section .ql-indent-1 { padding-left: 3em; }
.event-section .ql-indent-2 { padding-left: 6em; }
.event-section .ql-indent-3 { padding-left: 9em; }

/* ── Lightbox: Bilder größer zeigen ──
   Das Theme (aegean.css) begrenzt die Höhe auf 82vh und legt rundum ein
   Padding von bis zu 48px. Auf großen Bildschirmen bleibt dadurch viel Fläche
   ungenutzt. Wir trennen die Abstände: seitlich so viel, dass die
   Blätter-Knöpfe (52px breit) neben dem Bild Platz haben statt darauf zu
   liegen — oben und unten nur wenig.

   ID-Selektor, weil die Theme-Regel dieselbe Klassen-Spezifität hat und die
   Ladereihenfolge von Theme- und Plugin-Stylesheet nicht garantiert ist. */
#fmtLb {
  padding: clamp(10px, 2vh, 22px) clamp(64px, 7vw, 104px);
}
#fmtLb .lightbox__img {
  max-width: 100%;
  max-height: 92vh;
}

/* Schmale Schirme: Knöpfe sind dort 44px, entsprechend weniger Rand */
@media (max-width: 560px) {
  #fmtLb { padding: 10px 50px; }
  #fmtLb .lightbox__img { max-height: 86vh; }
}

/* ── Kopfzeile über dem Beitrag ──
   Links „Zurück", rechts der Teilen-Block. Auf schmalen Schirmen rutscht der
   Teilen-Block unter den Zurück-Link, statt die Zeile zu sprengen. */
.fmt-back {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  flex-wrap: wrap;
}

/* ── Teilen ──
   Schlichte Umrisse statt Markenfarben: Bunte Netzwerk-Knöpfe reißen die
   Aufmerksamkeit an sich und altern schlecht, sobald ein Netzwerk sein
   Erscheinungsbild ändert. Klein gesetzt, weil der Block neben „Zurück"
   sitzt und dem Beitrag nicht die Schau stehlen soll. */
.fmt-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}
.fmt-share__label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-right: 12px;      /* deutlicher Abstand zu den Schaltflächen */
}

/* Gleiche Höhe für alle: <a> und <button> rendern von Haus aus
   unterschiedlich hoch. inline-flex mit fester Zeilenhöhe und einheitlichem
   Kastenmodell bringt beide auf dieselbe Linie. */
.fmt-share__btn {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 1.95rem;
  padding: 0 .8em;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  color: inherit;
  background: none;
  font-family: inherit;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.fmt-share__btn:hover,
.fmt-share__btn:focus-visible {
  background: rgba(0,0,0,.08);
}
.fmt-share__btn--nativ { font-weight: 700; }
.fmt-share__btn.is-ok { border-style: dashed; }

/* Kein Ausblenden der Beschriftung per Medienabfrage: Ob sie weg soll,
   entscheidet single-views.js — nämlich nur dann, wenn stattdessen der
   Knopf „Teilen" erscheint. Eine zusätzliche CSS-Regel hätte beides
   verschwinden lassen, sobald der Geräte-Dialog nicht verfügbar ist. */

@media (prefers-reduced-motion: reduce) {
  .fmt-share__btn { transition: none; }
}

/* ── Hinweis statt Inhalt bei inaktiven Beiträgen ──
   Bewusst eine gestaltete Seite und keine Fehlermeldung: Der Besucher hat
   nichts falsch gemacht, der Inhalt ist nur nicht mehr da. Deshalb auch ein
   Weg zurück ins Angebot statt einer Sackgasse. */
.fmt-gone {
  max-width: 34rem;
  margin: clamp(2rem, 7vw, 5rem) auto;
  padding: clamp(1.6rem, 4vw, 2.6rem);
  text-align: center;
}
.fmt-gone__icon  { color: currentColor; opacity: .3; margin-bottom: .6rem; }
.fmt-gone__title { margin: 0 0 .5em; font-size: clamp(1.3rem, 3.4vw, 1.75rem); }
.fmt-gone__text  { margin: 0 0 1.6em; opacity: .8; line-height: 1.65; }
.fmt-gone__actions { margin: 0; }
.fmt-gone__btn   { display: inline-block; }

/* Banner für angemeldete Redakteure auf einer inaktiven Seite */
.fmt-gone-note {
  margin: 0 0 1.2rem;
  padding: .7em 1em;
  border: 1px dashed rgba(0,0,0,.35);
  border-radius: 8px;
  background: rgba(0,0,0,.04);
  font-size: .88rem;
  line-height: 1.5;
}

/* ── Bildschutz auf den Einzelansichten ──
   Ergänzt den globalen Schutz aus dem Divi-Footer, der über die
   Theme-Builder-Vorlagen der Einzelansichten nicht zuverlässig greift.
   Den Rechtsklick blockiert single-views.js. */
.photo-grid img,
.hero-postcard__media img,
#fmtLb .lightbox__img {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}