/* Blog: Beitragstexte, Galerien, Videos und Filter – passt sich Hell- und Dunkelmodus an */

.fu-prose { font-size: 1.0625rem; line-height: 1.75; color: hsl(var(--fg, var(--ink)) / .85); }
.fu-prose > * + * { margin-top: 1.1rem; }
.fu-prose h2, .fu-prose h3, .fu-prose h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: hsl(var(--fg, var(--ink)));
  line-height: 1.25;
  margin-top: 2.25rem;
}
.fu-prose h2 { font-size: 1.6rem; }
.fu-prose h3 { font-size: 1.35rem; }
.fu-prose h4 { font-size: 1.125rem; }
.fu-prose strong { font-weight: 600; color: hsl(var(--fg, var(--ink))); }
.fu-prose a { color: hsl(var(--brand-deep)); text-underline-offset: 2px; text-decoration: underline; }
.fu-prose a:hover { text-decoration: none; }
html[data-theme="dark"] .fu-prose a { color: hsl(var(--brand-light)); }

.fu-prose ul, .fu-prose ol { padding-left: 1.35rem; }
.fu-prose ul { list-style: disc; }
.fu-prose ol { list-style: decimal; }
.fu-prose li + li { margin-top: .35rem; }
.fu-prose li::marker { color: hsl(var(--brand)); }

.fu-prose blockquote {
  border-left: 3px solid hsl(var(--brand));
  padding: .25rem 0 .25rem 1.1rem;
  color: hsl(var(--fg, var(--ink)) / .75);
  font-style: italic;
}

.fu-prose img { border-radius: 10px; border: 1px solid hsl(var(--border)); display: block; width: 100%; height: auto; }
.fu-prose figure { margin: 0; }
.fu-prose figcaption { margin-top: .5rem; font-size: .8125rem; color: hsl(var(--fg, var(--ink)) / .6); }

/* Hinweiskasten „Auf einen Blick“ */
.fu-callout {
  border: 1px solid hsl(var(--brand-light));
  border-left-width: 4px;
  background: hsl(var(--brand-light) / .16);
  border-radius: 10px;
  padding: 1rem 1.25rem;
}
.fu-callout > * + * { margin-top: .75rem; }

/* Tabellen */
.fu-tabelle { overflow-x: auto; border: 1px solid hsl(var(--border)); border-radius: 10px; }
.fu-tabelle table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.fu-tabelle th, .fu-tabelle td { padding: .625rem .875rem; text-align: left; vertical-align: top; border-bottom: 1px solid hsl(var(--border)); }
.fu-tabelle th { background: hsl(var(--cloud)); font-weight: 600; color: hsl(var(--fg, var(--ink))); white-space: nowrap; }
.fu-tabelle tr:last-child td { border-bottom: 0; }

/* Galerie */
.fu-galerie { display: grid; gap: .625rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .fu-galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fu-gal-item { margin: 0; }
.fu-gal-item img { aspect-ratio: 16 / 9; object-fit: cover; transition: opacity .15s; }
.fu-gal-item a:hover img { opacity: .85; }

/* Video: erst auf Klick wird YouTube geladen */
.fu-video { margin-top: 1.25rem; }
.fu-video-start { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.fu-video-start img { aspect-ratio: 16 / 9; object-fit: cover; }
.fu-video-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 4.5rem; height: 4.5rem; border-radius: 999px;
  background: hsl(var(--brand-deep) / .92);
  box-shadow: 0 8px 24px -8px rgb(0 0 0 / .6);
}
.fu-video-play::after {
  content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%);
  border-style: solid; border-width: .85rem 0 .85rem 1.4rem; border-color: transparent transparent transparent #fff;
}
.fu-video-start:hover .fu-video-play { background: hsl(var(--brand)); }
.fu-video iframe, .fu-video-rahmen { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; display: block; }
.fu-video-hinweis { margin-top: .5rem; font-size: .75rem; color: hsl(var(--fg, var(--ink)) / .55); }

/* Filter auf der Übersicht */
.fu-filter {
  border-radius: 999px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  padding: .4rem .9rem;
  font-size: .875rem;
  color: hsl(var(--fg, var(--ink)) / .75);
  transition: border-color .12s, background-color .12s, color .12s;
  cursor: pointer;
}
.fu-filter:hover { border-color: hsl(var(--brand)); }
.fu-filter-aktiv { border-color: hsl(var(--brand-deep)); background: hsl(var(--brand-deep)); color: #fff; }
.fu-filter-aktiv span { color: rgb(255 255 255 / .7); }

/* Bildbetrachter (Lightbox) – oeffnet Galeriebilder ohne neuen Tab */
.fu-lb {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: 3.5rem 1rem 3.5rem;
  background: rgb(6 10 16 / .93);
  animation: fu-lb-auf .15s ease-out;
}
.fu-lb[hidden] { display: none; }
@keyframes fu-lb-auf { from { opacity: 0 } to { opacity: 1 } }
.fu-lb-buehne { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .75rem; max-width: 100%; }
.fu-lb-buehne img {
  max-width: min(1400px, 92vw); max-height: 78vh;
  width: auto; height: auto; border-radius: 10px; display: block;
  box-shadow: 0 30px 70px -25px rgb(0 0 0 / .9);
}
.fu-lb-text { max-width: 60ch; text-align: center; font-size: .8125rem; color: rgb(255 255 255 / .65); }
.fu-lb-text[hidden] { display: none; }
.fu-lb-zaehler {
  position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%);
  margin: 0; font-size: .8125rem; color: rgb(255 255 255 / .6);
}
.fu-lb-knopf {
  position: absolute; display: flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 999px; border: 1px solid rgb(255 255 255 / .18);
  background: rgb(255 255 255 / .08); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer;
  transition: background-color .12s, border-color .12s;
}
.fu-lb-knopf:hover { background: rgb(255 255 255 / .18); border-color: rgb(255 255 255 / .35); }
.fu-lb-knopf:focus-visible { outline: 2px solid hsl(var(--brand-light)); outline-offset: 2px; }
.fu-lb-knopf[hidden] { display: none; }
.fu-lb-schliessen { top: 1rem; right: 1rem; font-size: 1.1rem; }
.fu-lb-zurueck { left: 1rem; top: 50%; transform: translateY(-50%); }
.fu-lb-weiter { right: 1rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
  .fu-lb { padding: 3.5rem .5rem 4.25rem; }
  .fu-lb-zurueck { left: .5rem; }
  .fu-lb-weiter { right: .5rem; }
  .fu-lb-buehne img { max-height: 70vh; }
}
.fu-gal-item a, .fu-prose figure > a { cursor: zoom-in; }

/* Blättern durch die Beitragsseiten */
.fu-seiten { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: 1.25rem; }
.fu-seiten:empty { display: none; }
.fu-seite {
  min-width: 2.35rem;
  border-radius: .45rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background));
  padding: .45rem .7rem;
  font-size: .875rem;
  color: hsl(var(--fg, var(--ink)) / .8);
  cursor: pointer;
  transition: border-color .12s, background-color .12s, color .12s;
}
.fu-seite:hover:not(:disabled):not(.fu-seite-aktiv) { border-color: hsl(var(--brand)); color: hsl(var(--fg, var(--ink))); }
.fu-seite:disabled { opacity: .45; cursor: default; }
.fu-seite-aktiv { border-color: hsl(var(--brand-deep)); background: hsl(var(--brand-deep)); color: #fff; font-weight: 600; cursor: default; }
.fu-seite:focus-visible { outline: 2px solid hsl(var(--brand)); outline-offset: 2px; }
.fu-seite-luecke { padding: 0 .2rem; color: hsl(var(--fg, var(--ink)) / .45); }

/* Suche im Blogbereich */
.fu-suche { position: relative; display: flex; align-items: center; margin-top: .9rem; max-width: 32rem; }
.fu-suche-lupe { position: absolute; left: .85rem; color: hsl(var(--fg, var(--ink)) / .45); pointer-events: none; }
.fu-suche input {
  width: 100%;
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  background: hsl(var(--background));
  color: hsl(var(--fg, var(--ink)));
  padding: .62rem 2.6rem .62rem 2.8rem;
  font: inherit;
  font-size: .95rem;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.fu-suche input::placeholder { color: hsl(var(--fg, var(--ink)) / .45); }
.fu-suche input:focus { border-color: hsl(var(--brand)); box-shadow: 0 0 0 3px hsl(var(--brand) / .18); }
.fu-suche input::-webkit-search-cancel-button, .fu-suche input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.fu-suche-leeren {
  position: absolute; right: .45rem;
  display: grid; place-items: center;
  width: 1.9rem; height: 1.9rem;
  border: 0; border-radius: 999px; background: transparent;
  color: hsl(var(--fg, var(--ink)) / .55); font-size: .85rem; cursor: pointer;
}
.fu-suche-leeren:hover { background: hsl(var(--cloud)); color: hsl(var(--fg, var(--ink))); }
.fu-suche-leeren[hidden] { display: none; }