/* ==========================================================================
   UBF Bausteine für Beiträge (components.css)
   --------------------------------------------------------------------------
   Zentrale Gestaltung aller Inhalts-Bausteine. Beiträge enthalten nur HTML
   mit diesen Klassen – kein eigenes CSS, keine style-Attribute.
   Farben/Schriften kommen aus den Template-Variablen in style.css.
   Katalog: Beispielseite "Bausteine" (Beitrag), Prompt-Spickzettel im Projekt.
   ========================================================================== */

:root {
  --ubf-danger: #c0392b;
  --ubf-danger-light: #fdf0ef;
  --ubf-warning: #e67e22;
  --ubf-warning-light: #fff8f0;
  --ubf-radius: 10px;
  --ubf-space: 1.5rem;
  --ubf-font-heading: 'Outfit', sans-serif;
}

/* Gemeinsame Abstände der Box-Bausteine */
.ubf-summary, .ubf-timeline, .ubf-case, .ubf-chart, .ubf-problems,
.ubf-pullquote, .ubf-alert, .ubf-links {
  margin: var(--ubf-space) 0 2rem;
}

/* Bausteine mit eigener Listen-Gestaltung (die Template-Regel in style.css
   nimmt genau diese aus): ul.ubf-list, Listen in .ubf-summary und .ubf-links */
.ubf-list, .ubf-summary ul, .ubf-links ul { list-style: none; margin: 0; padding: 0; }
.ubf-list li, .ubf-summary li, .ubf-links li { margin: 0 0 0.6rem; }
.ubf-list li:last-child, .ubf-summary li:last-child, .ubf-links li:last-child { margin-bottom: 0; }

/* Kleine Hinweistexte: Quelle, Fußnote, Haftungshinweis
   <p class="ubf-source">Quelle: …</p>
   <p class="ubf-disclaimer">Dieser Beitrag gibt die Meinung der UBF wieder …</p> */
.ubf-source, .ubf-summary-src {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0.9rem 0 0;
}
.ubf-disclaimer {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--text-muted);
  margin-top: 2rem;
}

/* --------------------------------------------------------------------------
   Kurzfassung "Das Wichtigste in Kürze"
   <div class="ubf-summary"><h4><i class="fa-solid fa-list-check"></i> Titel</h4>
     <ul><li>…</li></ul><p class="ubf-source">Quelle</p></div>
   Varianten: ubf-summary--negative (✗ rot), ubf-summary--positive (✓ grün)
   -------------------------------------------------------------------------- */
.ubf-summary {
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  border-top: 4px solid var(--accent);
  border-radius: var(--ubf-radius);
  padding: 1.25rem 1.5rem;
}
.com-content-article__body .ubf-summary h4,
.ubf-summary h4 {
  font-family: var(--ubf-font-heading);
  font-size: 1rem;
  color: var(--text-main);
  margin: 0 0 0.85rem;
}
.ubf-summary h4 i { color: var(--accent); margin-right: 6px; }
.ubf-summary li {
  position: relative;
  padding-left: 1.6rem;
  line-height: 1.5;
  font-size: 0.95rem;
}
.ubf-summary li::before {
  content: "\f111";               /* Punkt */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute; left: 0; top: 0.35em;
  font-size: 0.5rem;
  color: var(--accent);
}
.ubf-summary--negative li::before { content: "\f00d"; font-size: 0.95rem; top: 1px; color: var(--ubf-danger); }
.ubf-summary--positive li::before { content: "\f00c"; font-size: 0.95rem; top: 1px; color: var(--success); }

/* --------------------------------------------------------------------------
   Vorher/Nachher-Vergleich
   <div class="ubf-timeline">
     <div class="ubf-tl-col past"><div class="ubf-tl-label">2022</div><p>…</p></div>
     <div class="ubf-tl-col now"><div class="ubf-tl-label">Heute</div><p>…</p></div>
   </div>
   -------------------------------------------------------------------------- */
.ubf-timeline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border-color);
  border-radius: var(--ubf-radius);
  overflow: hidden;
}
.ubf-tl-col { padding: 1.25rem 1.5rem; }
.ubf-tl-col.past { background: var(--bg-light); border-right: 1px solid var(--border-color); }
.ubf-tl-col.now { background: var(--bg-white); }
.ubf-tl-label {
  font-family: var(--ubf-font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}
.ubf-tl-col.now .ubf-tl-label { color: var(--accent); }
.ubf-tl-col p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--text-main); }
@media (max-width: 600px) {
  .ubf-timeline { grid-template-columns: 1fr; }
  .ubf-tl-col.past { border-right: 0; border-bottom: 1px solid var(--border-color); }
}

/* --------------------------------------------------------------------------
   Fallbeispiel / Faktenkasten mit Zeilen
   <div class="ubf-case"><div class="ubf-case-head">Titel</div>
     <div class="ubf-case-row neg|warn|pos"><i class="fa-solid fa-…"></i><span>…</span></div></div>
   -------------------------------------------------------------------------- */
.ubf-case {
  border: 1px solid var(--border-color);
  border-radius: var(--ubf-radius);
  overflow: hidden;
}
.ubf-case-head {
  background: var(--accent);
  color: #fff;
  padding: 10px 16px;
  font-family: var(--ubf-font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.ubf-case-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 9px 16px;
  border-top: 1px solid var(--border-color);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text-main);
}
.ubf-case-row i { width: 18px; text-align: center; flex-shrink: 0; margin-top: 2px; color: var(--text-muted); }
.ubf-case-row.neg i { color: var(--ubf-danger); }
.ubf-case-row.warn i { color: var(--ubf-warning); }
.ubf-case-row.pos i { color: var(--success); }

/* --------------------------------------------------------------------------
   Diagramm-Box mit Balken
   <div class="ubf-chart"><div class="ubf-chart-title">Titel</div>
     <div class="ubf-bar-row"><div class="ubf-bar-label">Beschriftung</div>
       <div class="ubf-bar-track"><div class="ubf-bar-fill" style="width:7%"></div></div>
       <span class="ubf-bar-value">~7 %</span></div>
     <p class="ubf-chart-note">Hinweis</p></div>
   Balkenfarben: (Standard) Akzent, .total = Primärfarbe. Breite = Datenwert.
   Für eigene Grafiken (SVG): <div class="ubf-chart-scroll"><svg …></svg></div>
   -------------------------------------------------------------------------- */
.ubf-chart {
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  border-radius: var(--ubf-radius);
  padding: 1.25rem 1.5rem 1.5rem;
}
.ubf-chart-title {
  font-family: var(--ubf-font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
  color: var(--text-main);
}
.ubf-bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ubf-bar-label {
  width: 180px;
  flex-shrink: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.3;
}
.ubf-bar-track {
  flex: 1;
  background: var(--border-color);
  border-radius: 4px;
  height: 26px;
  overflow: hidden;
}
.ubf-bar-fill {
  height: 100%;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding-left: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  background: var(--accent);
}
.ubf-bar-fill.total { background: var(--primary); width: 100%; }
.ubf-bar-value {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}
.ubf-chart-note {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0.75rem 0 0;
  line-height: 1.5;
}
.ubf-chart-scroll { overflow-x: auto; }
.ubf-chart-scroll svg { display: block; max-width: 820px; width: 100%; height: auto; margin: 0 auto; font-family: 'Inter', sans-serif; }
@media (max-width: 500px) { .ubf-bar-label { width: 110px; } }

/* --------------------------------------------------------------------------
   Problem-/Stellungnahme-Karten mit farbiger Kante
   <div class="ubf-problems">
     <div class="ubf-problem [warn-2|warn-3]">
       <div class="ubf-problem-num">Behörde</div><div class="ubf-problem-title">Kernaussage</div>
       <p class="ubf-problem-text">…</p>
       <p class="ubf-problem-text ubf-abw">Abwägung: …</p>
       <p class="ubf-problem-text ubf-src">[Quelle]</p></div></div>
   Kante: Standard rot (schwer), warn-2 orange (mittel), warn-3 Akzent (leicht)
   -------------------------------------------------------------------------- */
.ubf-problem {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--ubf-danger);
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.25rem;
  margin-bottom: 0.85rem;
}
.ubf-problem.warn-2 { border-left-color: var(--ubf-warning); }
.ubf-problem.warn-3 { border-left-color: var(--accent); }
.ubf-problem-num {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.ubf-problem-title {
  font-family: var(--ubf-font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-main);
  margin-bottom: 6px;
}
.ubf-problem-text { font-size: 0.875rem; color: var(--text-muted); line-height: 1.55; margin: 0; }
.ubf-problem-text.ubf-abw { margin-top: 8px; }
.ubf-problem-text.ubf-src { margin-top: 6px; font-size: 0.78rem; }

/* --------------------------------------------------------------------------
   Hervorgehobenes Zitat
   <blockquote class="ubf-pullquote">„…“<cite>Quelle</cite></blockquote>
   -------------------------------------------------------------------------- */
.ubf-pullquote {
  border-left: 4px solid var(--accent);
  background: var(--accent-light);
  padding: 1rem 1.5rem;
  border-radius: 0 8px 8px 0;
  font-style: italic;
  font-size: 1rem;
  color: var(--text-main);
}
.ubf-pullquote cite {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Warnbox (wichtige Kernaussage)
   <div class="ubf-alert"><div class="ubf-alert-icon"><i class="fa-solid fa-circle-exclamation"></i></div>
     <div><h2>Titel</h2><p>…</p><p>Fettgedruckter Schlusssatz</p></div></div>
   -------------------------------------------------------------------------- */
.ubf-alert {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  background: var(--ubf-danger-light);
  border: 2px solid var(--ubf-danger);
  border-left-width: 8px;
  border-radius: var(--ubf-radius);
  padding: 1.5rem 1.75rem;
}
.ubf-alert-icon { font-size: 2.6rem; color: var(--ubf-danger); flex-shrink: 0; line-height: 1; margin-top: 2px; }
.com-content-article__body .ubf-alert h2,
.ubf-alert h2 { color: var(--ubf-danger); margin: 0 0 0.75rem; }
.ubf-alert p { margin: 0 0 0.75rem; color: var(--text-main); }
.ubf-alert p:last-child { margin-bottom: 0; font-weight: 700; }
@media (max-width: 500px) { .ubf-alert { flex-direction: column; gap: 0.5rem; } }

/* --------------------------------------------------------------------------
   Linkliste "Zum Thema"
   <div class="ubf-links"><h4><i class="fa-solid fa-link"></i> Zum Thema</h4>
     <ul><li><a href="…">…</a></li></ul></div>
   -------------------------------------------------------------------------- */
.ubf-links {
  background: var(--bg-light);
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--ubf-radius) var(--ubf-radius) 0;
  padding: 1.25rem 1.5rem;
}
.com-content-article__body .ubf-links h4,
.ubf-links h4 {
  font-family: var(--ubf-font-heading);
  font-size: 1rem;
  color: var(--primary-dark);
  margin: 0 0 0.9rem;
}
.ubf-links h4 i { color: var(--primary); margin-right: 6px; }
.ubf-links li { position: relative; padding-left: 1.6rem; line-height: 1.45; }
.ubf-links li::before {
  content: "\f0c1";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute; left: 0; top: 1px;
  color: var(--accent);
  font-size: 0.85rem;
}
.com-content-article__body .ubf-links li a { color: var(--primary); text-decoration: none; font-weight: 500; }
.com-content-article__body .ubf-links li a:hover { color: var(--accent); text-decoration: underline; }

/* ==========================================================================
   Layout-Bausteine
   ========================================================================== */

/* --------------------------------------------------------------------------
   Abschnitt mit Trennlinie unten (für längere, nummerierte Abschnitte)
   <section class="ubf-section"><h2>…</h2><p>…</p></section>
   -------------------------------------------------------------------------- */
.ubf-section {
  margin: 0 0 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border-color);
}
.ubf-section:last-child { border-bottom: 0; }
.com-content-article__body .ubf-section > h2:first-child,
.ubf-section > h2:first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   Text neben Bild
   <section class="ubf-feature [ubf-feature--reverse]">
     <div class="ubf-feature-text"><h2>…</h2><p>…</p></div>
     <figure class="ubf-figure"><img src="…" alt="…"><figcaption>…</figcaption></figure>
   </section>
   Text steht im HTML immer zuerst. --reverse = Bild auf großen Bildschirmen links.
   Auf dem Handy steht der Text immer oben.
   -------------------------------------------------------------------------- */
.ubf-feature {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin: 0 0 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border-color);
}
.ubf-feature:last-child { border-bottom: 0; }
.ubf-feature--reverse { flex-direction: row-reverse; }
.ubf-feature > * { flex: 1 1 0; min-width: 0; }
.com-content-article__body .ubf-feature-text > h2:first-child,
.ubf-feature-text > h2:first-child { margin-top: 0; }
@media (max-width: 768px) {
  .ubf-feature, .ubf-feature--reverse { flex-direction: column; align-items: stretch; gap: 1.25rem; }
}

/* Bild mit Bildunterschrift (auch einzeln verwendbar)
   <figure class="ubf-figure"><img src="…" alt="…"><figcaption>Quelle / Erklärung</figcaption></figure> */
.ubf-figure { margin: 0; text-align: center; }
.ubf-figure img {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin: 0 auto;
  border-radius: var(--ubf-radius);
  box-shadow: var(--shadow-medium);
}
.ubf-figure figcaption {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Liste mit Akzent-Quadraten (Eckdaten, Stichpunkte)
   <ul class="ubf-list"><li><strong>Leistung:</strong> …</li></ul> */
.ubf-list { margin: 0 0 1rem; }
.ubf-list li { position: relative; padding-left: 1.5rem; line-height: 1.55; }
.ubf-list li::before {
  content: "";
  position: absolute; left: 0; top: 0.55em;
  width: 0.5em; height: 0.5em;
  background: var(--accent);
  border-radius: 1px;
}

/* Dekorativer Wellen-Trenner
   <hr class="ubf-divider"> */
.ubf-divider {
  border: 0;
  height: 24px;
  margin: 1rem 0;
  background-color: var(--accent);
  opacity: 0.4;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0,10 C20,20 40,0 60,10 C80,20 100,0 120,10' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0,10 C20,20 40,0 60,10 C80,20 100,0 120,10' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* --------------------------------------------------------------------------
   Hinweisbox
   <div class="ubf-box [ubf-box--danger|ubf-box--muted]"><h2>Optionaler Titel</h2><p>…</p></div>
   Standard: neutral (hell, Rahmen) · --danger: rot (Warnung, Kritik) · --muted: grau, zentriert, klein (Stand/Quelle)
   -------------------------------------------------------------------------- */
.ubf-box {
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  border-radius: var(--ubf-radius);
  padding: 1.25rem 1.5rem;
  margin: var(--ubf-space) 0;
}
.ubf-box > :last-child { margin-bottom: 0; }
.com-content-article__body .ubf-box > h2:first-child,
.ubf-box > h2:first-child { margin-top: 0; }
.ubf-box--danger { background: var(--ubf-danger-light); border-color: var(--ubf-danger); }
.com-content-article__body .ubf-box--danger > h2,
.ubf-box--danger > h2 { color: var(--ubf-danger); }
.ubf-box--muted {
  text-align: center;
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* Kurzer Hinweis in Kursiv (z. B. "Hinweis: Die Angaben beruhen auf …")
   <p class="ubf-note">…</p> */
.ubf-note { font-size: 0.9rem; font-style: italic; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   Tabelle (z. B. Abstimmungsergebnisse)
   <div class="ubf-table-wrap"><table class="ubf-table">
     <thead><tr><th>Projekt</th><th>Ausschuss<br><small>14.04.</small></th></tr></thead>
     <tbody><tr><th scope="row">Elektrolyseur</th><td>
       <span class="ubf-vote"><span class="ubf-vote-yes">JA:</span> 2x CDU</span>
       <span class="ubf-vote"><span class="ubf-vote-no">NEIN:</span> 2x AfD</span>
       <span class="ubf-vote"><span class="ubf-vote-abst">ENTH:</span> 1x …</span>
       <span class="ubf-result ubf-result--rejected">ABGELEHNT</span></td></tr></tbody>
   </table></div>
   Ergebnis: --accepted (grün) · --rejected (rot) · --pending (grau, z. B. "zurückgezogen")
   -------------------------------------------------------------------------- */
.ubf-table-wrap { overflow-x: auto; margin: var(--ubf-space) 0 2rem; }
.ubf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--text-main);
}
.ubf-table thead th {
  background: var(--primary);
  color: #fff;
  padding: 10px 8px;
  border: 1px solid var(--border-color);
  text-align: center;
  font-family: var(--ubf-font-heading);
  font-weight: 600;
}
.ubf-table td, .ubf-table tbody th {
  border: 1px solid var(--border-color);
  padding: 8px;
  vertical-align: top;
  text-align: left;
}
.ubf-table tbody th { background: var(--bg-light); font-weight: 700; width: 15%; }
.ubf-vote { display: block; margin-bottom: 2px; }
.ubf-vote-yes { color: var(--success); font-weight: 700; }
.ubf-vote-no { color: var(--ubf-danger); font-weight: 700; }
.ubf-vote-abst { color: var(--text-muted); font-style: italic; }
.ubf-result {
  display: block;
  margin-top: 6px;
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  background: var(--bg-light);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
}
.ubf-result--accepted { background: #e6f4ea; border-color: #b7dfc3; color: var(--success); }
.ubf-result--rejected { background: var(--ubf-danger-light); border-color: #f1b9b3; color: var(--ubf-danger); }

/* Eingebettete Seite (Umfrage, Karte …)
   <iframe class="ubf-embed" src="…" height="750" title="…"></iframe>  (Höhe als Attribut) */
.ubf-embed { display: block; width: 100%; border: 0; }

/* ==========================================================================
   Kleine Helfer (ersetzen frühere Inline-Styles in Beiträgen)
   ========================================================================== */

/* Tabellenzellen ausrichten: <td class="ubf-right">1.234 €</td> */
.ubf-right { text-align: right; }
.ubf-center { text-align: center; }

/* Bild mit Textumfluss (rechts/links), auf dem Handy volle Breite
   <img class="ubf-img-right" src="…" alt="…">  · schmaler: ubf-img-right ubf-img--sm */
.ubf-img-right, .ubf-img-left {
  width: 300px;
  max-width: 45%;
  height: auto;
  border-radius: var(--border-radius-sm);
}
.ubf-img-right { float: right; margin: 0 0 1.25rem 1.5rem; }
.ubf-img-left  { float: left;  margin: 0 1.5rem 1.25rem 0; }
.ubf-img--sm { width: 200px; }
@media (max-width: 600px) {
  .ubf-img-right, .ubf-img-left { float: none; display: block; width: 100%; max-width: 100%; margin: 0 0 1.25rem; }
}

/* Unsichtbares Vorschaubild für soziale Netzwerke (bleibt im HTML, ist aber nicht sichtbar)
   <img class="ubf-og-image" src="…" alt=""> */
.ubf-og-image {
  position: absolute !important; /* einzige Ausnahme: muss auch Bild-Regeln des Templates schlagen */
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

/* Hervorhebungen im Text */
.ubf-text-alert { color: var(--ubf-danger); font-weight: 600; }   /* Update / Achtung */
.ubf-text-lg { font-size: 1.25rem; line-height: 1.4; }              /* größerer Hinweis */
.ubf-text-xl { font-size: 1.6rem; line-height: 1.3; font-family: var(--ubf-font-heading); font-weight: 700; }
.ubf-text-accent { color: var(--accent); }

/* Kleine Ampel-Markierung (z. B. Abstimmungsnummern)
   <span class="ubf-badge ubf-badge--yes">1</span> · --no = rot */
.ubf-badge {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 0.4em;
  border-radius: 4px;
  text-align: center;
  font-weight: 700;
  color: #fff;
  background: var(--text-muted);
}
.ubf-badge--yes { background: var(--success); }
.ubf-badge--no { background: var(--ubf-danger); }

/* Schwebende Box mit Bild + Bildunterschrift neben dem Text
   <figure class="ubf-float-right"><img src="…" alt="…"><figcaption>…</figcaption></figure>
   (auch als <div class="ubf-float-right">…</div>) */
.ubf-float-right, .ubf-float-left {
  width: 350px;
  max-width: 45%;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.ubf-float-right { float: right; margin: 0 0 1.25rem 1.5rem; }
.ubf-float-left  { float: left;  margin: 0 1.5rem 1.25rem 0; }
.ubf-float-right img, .ubf-float-left img { width: 100%; height: auto; border-radius: var(--border-radius-sm); }
.ubf-float-right figure, .ubf-float-left figure { margin: 0; }
.ubf-float-right figcaption, .ubf-float-left figcaption { margin-top: 0.4rem; }
@media (max-width: 600px) {
  .ubf-float-right, .ubf-float-left { float: none; width: 100%; max-width: 100%; margin: 0 0 1.25rem; }
}

/* --------------------------------------------------------------------------
   YouTube-Video mit "Klick zum Laden" (DSGVO) – Script: js/ubf-video.js
   <div class="ubf-video" data-yt="VIDEO-ID">
     <a class="ubf-video-poster" href="https://www.youtube.com/watch?v=VIDEO-ID" target="_blank" rel="noopener">
       <img src="/images/youtube/VIDEO-ID.jpg" alt="Vorschau: Titel" loading="lazy">
       <span class="ubf-video-play" aria-hidden="true"></span>
       <span class="ubf-video-title">Titel</span></a>
     <p class="ubf-video-note">Beim Abspielen werden Daten an YouTube (Google) übertragen.</p>
   </div>
   Vorschaubild einmalig nach /images/youtube/ legen (nicht von Google laden).
   -------------------------------------------------------------------------- */
.ubf-video { margin: var(--ubf-space) 0 2rem; max-width: 820px; }
.ubf-video-poster, .ubf-video-frame {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--ubf-radius);
  overflow: hidden;
  background: #0b1a24;
  box-shadow: var(--shadow-medium);
}
.ubf-video-poster img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;            /* schneidet auch schwarze Balken alter 4:3-Vorschaubilder ab */
  transition: transform 0.4s ease, filter 0.4s ease;
}
.ubf-video-poster::after {     /* dunkler Verlauf für lesbaren Titel */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0.35) 100%);
}
.ubf-video-title {
  position: absolute; left: 1rem; right: 1rem; top: 0.9rem;
  z-index: 1;
  color: #fff;
  font-family: var(--ubf-font-heading);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  display: -webkit-box;          /* höchstens 2 Zeilen, damit der Play-Knopf frei bleibt */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ubf-video-play {
  position: absolute; left: 50%; top: 50%;
  z-index: 1;
  width: 72px; height: 72px;
  margin: -36px 0 0 -36px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s ease, background-color 0.25s ease;
}
.ubf-video-play::before {      /* Dreieck */
  content: "";
  position: absolute; left: 29px; top: 22px;
  border-style: solid;
  border-width: 14px 0 14px 22px;
  border-color: transparent transparent transparent #fff;
}
.ubf-video-poster:hover img, .ubf-video-poster:focus-visible img { transform: scale(1.03); filter: brightness(0.9); }
.ubf-video-poster:hover .ubf-video-play, .ubf-video-poster:focus-visible .ubf-video-play { transform: scale(1.1); background: var(--accent-hover); }
.ubf-video-poster:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.ubf-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.com-content-article__body .ubf-video-note,
.ubf-video-note {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.ubf-video.is-playing .ubf-video-note { display: none; }
@media (max-width: 500px) {
  .ubf-video-play { width: 58px; height: 58px; margin: -29px 0 0 -29px; }
  .ubf-video-play::before { left: 23px; top: 17px; border-width: 12px 0 12px 18px; }
  .ubf-video-title { font-size: 0.8rem; top: 0.6rem; left: 0.75rem; right: 0.75rem; }
}

/* --------------------------------------------------------------------------
   Anmelde-Bereich (z. B. Newsletter): Bild + Formular-Karte nebeneinander
   <section class="ubf-signup">
     <figure class="ubf-signup-media"><img src="…" alt="…"></figure>
     <div class="ubf-signup-card">{loadposition newsletter}</div>
   </section>
   -------------------------------------------------------------------------- */
.ubf-signup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 2.5rem;
  margin: 0.5rem 0 2rem;
}
.ubf-signup-media { margin: 0; text-align: center; }
.ubf-signup-media img { width: 100%; max-width: 460px; height: auto; display: inline-block; }
.ubf-signup-card {
  background: var(--bg-light);
  border: 1px solid var(--border-color);
  border-top: 4px solid var(--primary);
  border-radius: var(--ubf-radius);
  padding: 1.5rem 1.75rem;
}
.ubf-signup-card h3, .ubf-signup-card .moduletable > h3 { margin-top: 0; }
.ubf-signup-card input[type="text"], .ubf-signup-card input[type="email"] { width: 100%; max-width: none; }
.ubf-signup-card .acysubbuttons, .ubf-signup-card [type="submit"] { width: 100%; }
@media (max-width: 768px) {
  .ubf-signup { grid-template-columns: 1fr; gap: 1.25rem; }
  .ubf-signup-media img { max-width: 260px; }
  .ubf-signup-card { padding: 1.25rem; }
}
/* AcyMailing-Formular in der Anmelde-Karte: volle Kartenbreite (Template begrenzt sonst auf 380/400px) */
.ubf-signup-card .acym_module { max-width: none !important; margin-bottom: 0 !important; }
.ubf-signup-card .acym_form input.cell { max-width: none !important; }
.ubf-signup-card .acysubbuttons { margin: 0 !important; }
.ubf-signup-card .acysubbuttons .subbutton { width: 100% !important; max-width: none !important; }
/* Zustimmungszeile als normaler Fließtext (Checkbox + "Ich akzeptiere die Datenschutzerklärung") */
.acym_form .onefield.fieldacyterms label { display: block !important; line-height: 1.5; }
.acym_form .onefield.fieldacyterms input.checkbox { vertical-align: -3px; margin-right: 0.45rem !important; }

/* Schmaler Block (z. B. Login-Formular im Beitrag): <div class="ubf-narrow">…</div> */
.ubf-narrow { max-width: 300px; }

/* Externe Einbettung erst nach Klick (z. B. Umfrage) – Script: js/ubf-video.js */
.ubf-consent { margin: var(--ubf-space) 0 2rem; }
.ubf-consent-box {
  background: var(--bg-light);
  border: 1px dashed var(--border-color);
  border-radius: var(--ubf-radius);
  padding: 1.5rem;
  text-align: center;
}
.ubf-consent-box p { margin: 0 0 1rem; color: var(--text-muted); font-size: 0.9rem; }
.ubf-consent-box p strong { color: var(--text-main); display: block; font-size: 1.05rem; margin-bottom: 0.25rem; }
.ubf-consent-load {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.65rem 1.4rem;
  border: 0; border-radius: 8px;
  background: var(--primary); color: #fff;
  font-family: var(--ubf-font-heading); font-weight: 600; cursor: pointer;
}
.ubf-consent-load:hover { background: var(--primary-dark); }