/*
Theme Name:   FKM Child
Theme URI:    https://www.freie-kunstwerkstatt.de/
Description:  Child-Theme der Freien Kunstwerkstatt München für Hello Elementor: lokale Schriften, Inhaltstypen, Block-Stil „Bildstrecke“, gebündeltes CSS.
Author:       Zirkus Digitalo
Author URI:   https://zirkusdigitalo.com/
Template:     hello-elementor
Version:      0.1.25
Requires PHP: 7.4
Text Domain:  fkm-child
*/

/*
 * Gebündeltes CSS (CLAUDE.md Regel 4). Hier steht nur, was Elementor nicht selbst gestalten kann:
 * 1. Schriften   2. Inhalte aus dem Block-Editor (Post Content)   3. Bildstrecke (Slider aus dem Galerie-Block)
 * Alles andere (Layout, Typo-Skala, Komponenten) lebt in Elementor: V4-Variablen --fkm-* + globale Klassen.
 * Quelle der Werte: static/src/scss (Prototyp), docs/03_design-system.md.
 */

/* 1. Schriften – lokal, OFL-1.1 (Lizenzen in /fonts) ---------------------------------------------- */
@font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/roboto-condensed-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/roboto-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/source-serif-4-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/source-serif-4-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/source-serif-4-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 700; font-display: swap; src: url("fonts/source-serif-4-latin-700-italic.woff2") format("woff2"); }

/* Grundschrift für alles, was nicht aus Elementor-V4-Elementen kommt (Cookie-Banner, Formulare, Fehlerseiten) */
body { font-family: "Source Serif 4", Georgia, serif; font-size: 18px; line-height: 1.65; color: var(--fkm-color-text, #161616); }
:focus-visible { outline: 2px solid var(--fkm-color-primary, #0064ed); outline-offset: 3px; }

/* Header-Template (Kundenfeedback 2026-10): keine Menü-Leiste mehr, Seite nutzt die volle Breite */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Logo oben ohne Abstand (Review 2026-10-11): Flex-Element ist der Link um das Logo (e-image mit Link), nicht das <img> mit der Klasse fkm-header-logo */
.elementor-location-header a:has(> .fkm-header-logo) { align-self: flex-start; }
/* Nach-oben-Pfeil (alle Breakpoints): erscheint nach ~1,5 Bildschirmhöhen (fkm.js setzt .is-visible) */
.fkm-totop { opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; }
.fkm-totop.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .25s ease; }

/* Off-Canvas-Menü (Elementor-Pro-Widget im Header, nicht per MCP gestaltbar) – Prototyp: static/src/scss/layout/_offcanvas.scss
   Desktop: Panel 440 px am rechten Rand, Tablet/Mobil volle Breite. Kopfzeile mit Schließen-X links (fkm.js) + Sprachumschalter rechts. */
.elementor-location-header .elementor-widget-off-canvas {
  --e-off-canvas-width: 440px; --e-off-canvas-justify-content: flex-end;
  --e-off-canvas-overlay-opacity: 0; --e-off-canvas-animation-duration: .4s; --e-off-canvas-animation-duration-minimum: .4s;
}
.elementor-location-header .e-off-canvas { z-index: 110; } /* über dem Nach-oben-Pfeil (90) */
/* Ein- und Ausfahren von rechts (0,4 s, wie Prototyp) – unabhängig von der Widget-Einstellung „Animation“:
   Elementor blendet beim Schließen sofort aus (opacity/visibility) → Sichtbarkeit erst nach der Ausfahrt umschalten. */
.elementor-location-header .elementor-widget-off-canvas .e-off-canvas[aria-hidden="true"] { opacity: 1; visibility: hidden; transition: visibility 0s linear .4s; }
.elementor-location-header .elementor-widget-off-canvas .e-off-canvas[aria-hidden="false"] { visibility: visible; transition: none; }
.elementor-location-header .elementor-widget-off-canvas .e-off-canvas__main { opacity: 1; visibility: inherit; animation: none; }
.elementor-location-header .elementor-widget-off-canvas .e-off-canvas__content { transform: translateX(100%); transition: transform .4s cubic-bezier(.22, .61, .36, 1); }
.elementor-location-header .elementor-widget-off-canvas .e-off-canvas[aria-hidden="false"] .e-off-canvas__content { transform: none; }
.elementor-location-header .e-off-canvas__content {
  padding: var(--fkm-space-l, 40px) var(--fkm-space-xl, 64px) var(--fkm-space-xl, 64px);
  background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: -16px 0 40px rgba(22, 22, 22, .08);
  text-align: right;
}
.elementor-location-header .e-off-canvas .menu,
.elementor-location-header .e-off-canvas .sub-menu { list-style: none; margin: 0; padding: 0; }
/* Container im Panel ohne Elementor-Innenabstand (10 px) → Menü 297 px breit wie im Prototyp, „Grundlagenjahr / Mappenvorbereitung“ einzeilig */
.elementor-location-header .e-off-canvas__content > .e-con { --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px; padding: 0; }
.elementor-location-header .e-off-canvas .menu > li { padding-block: 18px; border-bottom: 1px solid var(--fkm-color-line, #d4d4d4); line-height: 1.3; }
.elementor-location-header .e-off-canvas .menu > li > a {
  font-family: var(--fkm-font-display, "Roboto Condensed"), sans-serif; font-size: 18px; font-weight: 700; line-height: 1.3;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fkm-color-text, #161616); text-decoration: none;
}
.elementor-location-header .e-off-canvas .sub-menu { margin-top: 10px; }
.elementor-location-header .e-off-canvas .sub-menu li { line-height: 1.3; }
.elementor-location-header .e-off-canvas .sub-menu li + li { margin-top: 4px; }
.elementor-location-header .e-off-canvas .sub-menu a {
  font-family: var(--fkm-font-body, "Source Serif 4"), serif; font-size: 16px; color: var(--fkm-color-text, #161616); text-decoration: none;
}
.elementor-location-header .e-off-canvas a:hover,
.elementor-location-header .e-off-canvas .current-menu-item > a { color: var(--fkm-color-primary, #0064ed); }
/* Menüpunkte leicht versetzt einblenden */
.elementor-location-header .e-off-canvas .menu > li { opacity: 0; transform: translateX(24px); transition: opacity .3s ease, transform .3s ease; }
.elementor-location-header .e-off-canvas[aria-hidden="false"] .menu > li { opacity: 1; transform: none; }
.elementor-location-header .e-off-canvas[aria-hidden="false"] .menu > li:nth-child(1) { transition-delay: .16s; }
.elementor-location-header .e-off-canvas[aria-hidden="false"] .menu > li:nth-child(2) { transition-delay: .20s; }
.elementor-location-header .e-off-canvas[aria-hidden="false"] .menu > li:nth-child(3) { transition-delay: .24s; }
.elementor-location-header .e-off-canvas[aria-hidden="false"] .menu > li:nth-child(4) { transition-delay: .28s; }
.elementor-location-header .e-off-canvas[aria-hidden="false"] .menu > li:nth-child(5) { transition-delay: .32s; }
.elementor-location-header .e-off-canvas[aria-hidden="false"] .menu > li:nth-child(6) { transition-delay: .36s; }
.elementor-location-header .e-off-canvas[aria-hidden="false"] .menu > li:nth-child(7) { transition-delay: .40s; }
.elementor-location-header .e-off-canvas[aria-hidden="false"] .menu > li:nth-child(8) { transition-delay: .44s; }
/* Kopfzeile im Panel (fkm.js): Schließen-X links, Sprachumschalter rechts */
.fkm-offcanvas-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--fkm-space-xl, 64px); }
.fkm-offcanvas-close {
  display: flex; position: relative; width: 52px; height: 52px; margin: 30px 0 0 -30px; padding: 0; border: 0; background: none; cursor: pointer;
}
@media (max-width: 767px) { .fkm-offcanvas-close { margin: 0 0 0 -9px; } } /* mobil nur 24 px Innenabstand */
.fkm-offcanvas-close::before, .fkm-offcanvas-close::after {
  content: ""; position: absolute; left: 50%; top: 9px; width: 3px; height: 34px; margin-left: -1.5px; background: var(--fkm-color-primary, #0064ed);
  transition: background-color .15s;
}
.fkm-offcanvas-close::before { transform: rotate(45deg); }
.fkm-offcanvas-close::after { transform: rotate(-45deg); }
.fkm-offcanvas-close:hover::before, .fkm-offcanvas-close:hover::after { background: var(--fkm-color-primary-hover, #0050be); }
/* Hello-Theme färbt Buttons bei Hover/Fokus pink (#c36) und rundet sie – für das X zurücksetzen, Fokus nur als Umriss */
.e-off-canvas .fkm-offcanvas-close, .e-off-canvas .fkm-offcanvas-close:hover, .e-off-canvas .fkm-offcanvas-close:focus, .e-off-canvas .fkm-offcanvas-close:active {
  background: none; border: 0; border-radius: 0; box-shadow: none; color: var(--fkm-color-primary, #0064ed);
}
.e-off-canvas .fkm-offcanvas-close:focus { outline: none; }
.e-off-canvas .fkm-offcanvas-close:focus-visible { outline: 2px solid var(--fkm-color-primary, #0064ed); outline-offset: 2px; }
/* Sprachumschalter „DE / EN“ (fkm.js aus den hreflang-Links von TranslatePress) */
.fkm-lang { margin: 0; font-family: var(--fkm-font-display, "Roboto Condensed"), sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .14em; }
.fkm-lang a { color: var(--fkm-color-text-muted, #6b6b6b); text-decoration: none; }
.fkm-lang a:hover, .fkm-lang a[aria-current] { color: var(--fkm-color-primary, #0064ed); }
.fkm-lang span { margin-inline: 6px; color: var(--fkm-color-line, #d4d4d4); }
/* TranslatePress-Umschalter im Panel ausblenden, bis fkm.js ihn ersetzt (kein Aufblitzen) */
.elementor-location-header .e-off-canvas .trp-shortcode-switcher__wrapper { display: none; }
@media (max-width: 1024px) {
  .elementor-location-header .elementor-widget-off-canvas { --e-off-canvas-width: 100%; }
  .elementor-location-header .e-off-canvas__content { box-shadow: none; text-align: center; }
}
@media (max-width: 767px) {
  .elementor-location-header .e-off-canvas__content { padding: var(--fkm-space-m, 24px); }
  .fkm-offcanvas-top { margin-bottom: var(--fkm-space-l, 40px); }
}
@media (prefers-reduced-motion: reduce) {
  .elementor-location-header .e-off-canvas .menu > li,
  .elementor-location-header .elementor-widget-off-canvas .e-off-canvas__content { transition: none; }
  .elementor-location-header .elementor-widget-off-canvas .e-off-canvas[aria-hidden="true"] { transition: none; }
}

/* Einblicke-Archiv: aktiven Filter markieren (Elementor-Buttons fkm-filter__link; Body-Klassen von WordPress) */
.post-type-archive-galerie .fkm-filter__link[href$="/einblicke/"],
.term-ausstellungen .fkm-filter__link[href*="/kategorie/ausstellungen/"],
.term-werke .fkm-filter__link[href*="/kategorie/werke/"],
.term-abschluesse .fkm-filter__link[href*="/kategorie/abschluesse/"],
.term-veranstaltungen .fkm-filter__link[href*="/kategorie/veranstaltungen/"] {
  color: var(--fkm-color-primary, #0064ed); box-shadow: inset 0 -3px 0 var(--fkm-color-primary, #0064ed);
}

/* Veranstaltungen (Loop-Item fkm-event): Markierung ohne Detailseite unsichtbar; ohne „Mehr“, Titel nicht klickbar.
   Ohne Titelbild läuft der Text über die Bildspalte (leeres Beitragsbild rendert kein <img>). fkm.js entfernt die Links ganz. */
.fkm-event__flag { display: none !important; }
.fkm-event:has(.fkm-event__flag:not(:empty)) .fkm-more { display: none; }
.fkm-event:has(.fkm-event__flag:not(:empty)) :is(h3, .fkm-event__title) a { pointer-events: none; color: inherit; }
/* Ohne Beitragsbild gibt Elementor ein <img> ohne src aus → ausblenden, Text läuft über die Bildspalte */
img.fkm-event__img:not([src]), img.fkm-event__img[src=""] { display: none; }
.fkm-event:not(:has(img.fkm-event__img[src]:not([src=""]))) .fkm-event__body { grid-column: 2 / -1; }

/* Kontakt: Karte (Shortcode [fkm_karte]) – 4:3, mobil quadratisch; Complianz-Platzhalter füllt dieselbe Fläche */
.fkm-map { position: relative; aspect-ratio: 4 / 3; background: var(--fkm-color-white, #fff); border: 1px solid var(--fkm-color-line, #d4d4d4); }
.fkm-map iframe, .fkm-map .cmplz-placeholder-element { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 767px) { .fkm-map { aspect-ratio: 1; } }

/* Newsletter (Brevo-Plugin-Formular im Shortcode-Widget, Container-Klasse fkm-newsletter) – Optik wie fkm-form im Prototyp.
   Das Plugin legt die Felder in .sib_signup_box_inside_<ID> → Abstände dort; Hello-Theme-Farben (pink) überschreiben. */
.fkm-newsletter form { margin: 0; }
.fkm-newsletter [class^="sib_signup_box_inside"] { display: grid; gap: var(--fkm-space-m, 24px); }
.fkm-newsletter .sib_msg_disp:empty { display: none; }
.fkm-newsletter .sib_msg_disp { font-size: 15px; line-height: 1.5; }
.fkm-newsletter .fkm-field { display: flex; flex-direction: column; gap: 6px; }
.fkm-newsletter label { font-family: var(--fkm-font-display, "Roboto Condensed"), sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.fkm-newsletter input[type="email"], .fkm-newsletter input[type="text"] {
  display: block; width: 100%; margin: 0; padding: 12px 14px; border: 1px solid #8a8a8a; border-radius: 0; background: #fff;
  font: inherit; font-size: 17px; line-height: 1.5; color: var(--fkm-color-text, #161616);
}
.fkm-newsletter input:focus { outline: 2px solid var(--fkm-color-primary, #0064ed); outline-offset: 0; border-color: var(--fkm-color-primary, #0064ed); }
.fkm-newsletter .fkm-check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
.fkm-newsletter .fkm-check label { font-family: inherit; font-size: inherit; line-height: inherit; letter-spacing: 0; text-transform: none; font-weight: 400; } /* Plugin setzt line-height 1 */
.fkm-newsletter input[type="checkbox"] { width: 20px; height: 20px; margin: 3px 0 0; flex: none; accent-color: var(--fkm-color-primary, #0064ed); }
.fkm-newsletter a { color: var(--fkm-color-primary, #0064ed); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.fkm-newsletter a:hover, .fkm-newsletter a:focus { color: var(--fkm-color-primary-hover, #0050be); }
.fkm-newsletter [type="submit"], .fkm-newsletter [type="submit"]:focus {
  justify-self: start; padding: 14px 28px; border: 0; border-radius: 0; background: var(--fkm-color-primary, #0064ed); color: #fff; cursor: pointer;
  font-family: var(--fkm-font-display, "Roboto Condensed"), sans-serif; font-size: 15px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.fkm-newsletter [type="submit"]:hover { background: var(--fkm-color-primary-hover, #0050be); color: #fff; }
.fkm-newsletter [type="submit"]:focus-visible { outline: 2px solid var(--fkm-color-primary, #0064ed); outline-offset: 2px; }
.fkm-newsletter .fkm-hint { margin: 0; font-size: 14px; color: var(--fkm-color-text-muted, #6b6b6b); }

/* Block-Editor: gleiche Schrift wie auf der Seite (wird per add_editor_style geladen) */
.editor-styles-wrapper { font-family: "Source Serif 4", Georgia, serif; font-size: 18px; line-height: 1.65; }
.editor-styles-wrapper :is(h1, h2, h3, h4) { font-family: "Roboto Condensed", "Arial Narrow", sans-serif; text-transform: uppercase; }

/* 2. Inhalte aus dem Block-Editor ---------------------------------------------------------------- */
/* Wrapper um das Post-Content-Widget bekommt in Elementor die Klasse fkm-prose (Typografie dort);
   hier nur Block-Markup von WordPress. */

/* Das V3-Widget „Beitragsinhalt“ setzt Elementors alte Standard-Typo (Roboto, #7A7A7A) direkt auf sich selbst –
   das überdeckt die geerbte Typo von fkm-prose. Zurück auf Erben. */
.fkm-prose .elementor-widget-theme-post-content:not(#fkm) { color: inherit; font-family: inherit; font-weight: inherit; }

/* Silbentrennung für Fließtext (lang="de") */
.fkm-prose :is(p, li, figcaption, blockquote) { hyphens: auto; hyphenate-limit-chars: 8 4 4; }

/* „Weite Breite“: bricht aus der Textspalte auf Inhaltsbreite aus.
   Voraussetzung: der Sektions-Container trägt container-type: inline-size (Elementor-Klasse fkm-section--prose). */
.fkm-prose .alignwide {
  position: relative; left: 50%; translate: -50%;
  width: min(var(--fkm-width-content, 1120px), 100cqw - 2 * var(--fkm-gutter, 20px));
  max-width: none; margin-block: var(--fkm-space-xl, 64px);
}

/* Galerie-Block (ohne Stil „Bildstrecke“) = Masonry, Bilder unbeschnitten, Lightbox über Elementor.
   :not(#fkm) hebt die Spezifität über die WordPress-Regel mit :not(#individual-image). */
.wp-block-gallery.has-nested-images:not(.is-style-bildstrecke):not(#fkm) {
  display: block; columns: 3 150px; column-gap: var(--fkm-space-s, 16px); margin-inline: 0;
}
.wp-block-gallery.has-nested-images:not(.is-style-bildstrecke) figure.wp-block-image:not(#fkm) {
  width: 100%; margin: 0 0 var(--fkm-space-s, 16px); break-inside: avoid;
}
.wp-block-gallery.has-nested-images:not(.is-style-bildstrecke) figure.wp-block-image:not(#fkm) :is(a, img) { display: block; width: 100%; }
.wp-block-gallery.has-nested-images:not(.is-style-bildstrecke) figure.wp-block-image:not(#fkm) img {
  height: auto; max-width: 100%; object-fit: initial; /* Kunst nie beschneiden – auch bei „Bilder zuschneiden“ */
}
.wp-block-gallery.has-nested-images figure.wp-block-image:not(#fkm) figcaption {
  position: static; padding: var(--fkm-space-xs, 8px) 0 0; background: none; color: var(--fkm-color-text-muted, #5f5f5f);
  font-size: 13px; line-height: 1.4; text-align: left; text-shadow: none;
}
/* Elementor-Lightbox (Bilder aus Galerie-Blöcken, inc/blocks.php): weißer Grund statt Schwarz, Bedienelemente blau,
   Zähler/Text grau – wie die Prototyp-Lightbox (_content.scss .fkm-lightbox).
   Elementor-nativ wäre Website-Einstellungen → Lightbox; hier gebündelt, damit es versioniert ist. */
.elementor-lightbox.dialog-type-lightbox:not(#fkm) {
  background-color: var(--fkm-color-white, #fff);
  --lightbox-ui-color: var(--fkm-color-primary, #0064ed);
  --lightbox-ui-color-hover: var(--fkm-color-primary-hover, #0050be);
  --lightbox-text-color: var(--fkm-color-text-muted, #5f5f5f);
}
/* Pfeile: e-swiper.min.css setzt für Swiper-Pfeile eine feste helle Farbe (ignoriert --lightbox-ui-color) */
.elementor-lightbox .swiper .elementor-swiper-button:not(#fkm) { color: var(--lightbox-ui-color); }
.elementor-lightbox .swiper .elementor-swiper-button:not(#fkm) svg { fill: var(--lightbox-ui-color); }
.elementor-lightbox .swiper .elementor-swiper-button:not(#fkm):hover { color: var(--lightbox-ui-color-hover); }
.elementor-lightbox .swiper .elementor-swiper-button:not(#fkm):hover svg { fill: var(--lightbox-ui-color-hover); }
.elementor-lightbox .elementor-slideshow__counter:not(#fkm) { color: var(--lightbox-text-color); }
/* Mobil: Pfeile nicht als Streifen über dem Bild, sondern 52 × 52 px unten links/rechts (wie Prototyp .fkm-lightbox) */
@media (max-width: 767px) {
  .elementor-lightbox .swiper .elementor-swiper-button:not(#fkm) { top: auto; bottom: var(--fkm-space-xs, 8px); width: 52px; height: 52px; transform: none; }
  .elementor-lightbox .swiper .elementor-swiper-button-prev:not(#fkm) { left: var(--fkm-space-xs, 8px); }
  .elementor-lightbox .swiper .elementor-swiper-button-next:not(#fkm) { right: var(--fkm-space-xs, 8px); }
}
/* Galerie-Seiten (CPT galerie): drei breite Spalten auf Inhaltsbreite */
.single-galerie .wp-block-gallery.has-nested-images:not(.is-style-bildstrecke):not(#fkm) { columns: 3 280px; column-gap: var(--fkm-space-m, 24px); }

/* 3. Bildstrecke (fkm.js baut den Slider aus dem Galerie-Block) – identisch zum Prototyp (_slider.scss) ----- */
.fkm-slider { --fkm-slider-ratio: 3 / 2; --fkm-slider-nav: 56px; position: relative; }
.fkm-slider__viewport { overflow: hidden; touch-action: pan-y; }
.fkm-slider__track { display: flex; transition: transform .5s cubic-bezier(.25, .8, .25, 1); }
.fkm-slider__track > * { flex: 0 0 100%; min-width: 0; }
.fkm-slider__navbox { position: absolute; inset: 0 0 auto; aspect-ratio: var(--fkm-slider-ratio); pointer-events: none; }
.fkm-slider__nav {
  position: absolute; top: 100%; left: 0; right: 0; height: var(--fkm-slider-nav);
  display: flex; align-items: center; justify-content: space-between; pointer-events: auto;
}
.fkm-slider__btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--fkm-color-primary, #0064ed);
  font-family: var(--fkm-font-display, "Roboto Condensed"), sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.fkm-slider__btn:hover, .fkm-slider__btn:focus { color: var(--fkm-color-primary-hover, #0050be); background: none; }
.fkm-slider__btn::before, .fkm-slider__btn::after { border-block: 5px solid transparent; }
.fkm-slider__btn--prev::before { content: ""; border-right: 7px solid currentColor; }
.fkm-slider__btn--next::after { content: ""; border-left: 7px solid currentColor; }
.fkm-slider__count {
  margin: 0; color: var(--fkm-color-text-muted, #5f5f5f); font-variant-numeric: tabular-nums;
  font-family: var(--fkm-font-display, "Roboto Condensed"), sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .14em;
}
.fkm-slider--media .fkm-slide { margin: 0; }
.fkm-slider--media .fkm-slide:not(#fkm) img {
  width: 100%; height: auto; aspect-ratio: var(--fkm-slider-ratio); object-fit: contain; background: var(--fkm-color-surface-muted, #f2f2f0);
}
.fkm-slider--media .fkm-slide:not(#fkm) figcaption {
  position: static; padding: calc(var(--fkm-slider-nav) + var(--fkm-space-xs, 8px)) 0 0; background: none; text-shadow: none;
  font-size: 15px; line-height: 1.45; color: var(--fkm-color-text-muted, #5f5f5f); text-align: left;
}
@media (prefers-reduced-motion: reduce) { .fkm-slider__track { transition: none; } }

/* 4. Startseiten-Hero (V4-Loop mit Klasse fkm-hero-loop, Query-ID fkm_slides) – fkm.js macht daraus einen Slider.
   Layout einer Slide (Bild 84 % rechts, Karte links überlappend) liegt in den Elementor-Klassen fkm-slide/fkm-slide__*;
   hier nur das Slider-Verhalten: Slides übereinander, Überblendung 0,8 s, Leiste „Zurück · 1 / 4 · Weiter“ unter dem Bild. */
.fkm-hero-loop.fkm-slider { --fkm-slider-ratio: 16 / 9; padding-bottom: var(--fkm-slider-nav); }
.fkm-hero-loop .fkm-slider__track:not(#fkm) { /* überschreibt das Loop-Raster (3 Spalten, gap 20px, Zeilen 1fr) */
  display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 0; transition: none; touch-action: pan-y; }
.fkm-hero-loop .fkm-slider__track > * { grid-area: 1 / 1; opacity: 0; visibility: hidden;
  transition: opacity .8s ease, visibility 0s linear .8s; }
.fkm-hero-loop .fkm-slider__track > .is-active { opacity: 1; visibility: visible; z-index: 1;
  transition: opacity .8s ease, visibility 0s; }
.fkm-hero-loop .fkm-slider__navbox { left: 16%; } /* Leiste auf Bildbreite (fkm-slide__img: 84 %, rechts) */
.fkm-hero-loop .fkm-slider__btn { color: var(--fkm-color-primary, #0064ed); } /* Leiste auf Weiß (getönte Fläche entfällt seit 0.1.23) */
@media (max-width: 767px) {
  /* Mobil: Bild volle Breite (4:3), Karte darunter und füllt die Slide-Höhe, Leiste direkt unter der Karte */
  .fkm-hero-loop.fkm-slider { --fkm-slider-ratio: 4 / 3; --fkm-slider-nav: 48px; padding-bottom: 0; }
  .fkm-hero-loop .fkm-slide:not(#fkm) { display: flex; flex-direction: column; }
  .fkm-hero-loop .fkm-slide__card { flex: 1; }
  .fkm-hero-loop .fkm-slider__navbox, .fkm-hero-loop .fkm-slider__nav { position: static; aspect-ratio: auto; }
  .fkm-hero-loop .fkm-slider__nav { padding-inline: var(--fkm-space-s, 16px); }
}
@media (prefers-reduced-motion: reduce) { .fkm-hero-loop .fkm-slider__track > * { transition: none; } }

/* Im Block-Editor: Bildstrecke als Bildreihe zeigen (der Slider entsteht erst im Frontend) */
.editor-styles-wrapper .wp-block-gallery.is-style-bildstrecke { outline: 2px dashed #0064ed33; outline-offset: 6px; }