/* FM Fertighäuser – Ausgabe von Übersicht, Detailseite und Shortcode.
   Nutzt die Farben und Bausteine aus dem globalen FM-Stylesheet (fm-site.css), mit Ersatzwerten. */

.fm-fh { --fh-ink: var(--fm-ink, #11221d); --fh-line: var(--fm-line, #e2e5e1); --fh-muted: var(--fm-muted, #5f6a65);
  --fh-green: var(--fm-green, #4fae55); --fh-green-deep: var(--fm-green-deep, #1f4f2c); --fh-green-btn: var(--fm-green-btn, #3a7d44);
  --fh-head: var(--fm-font-head, "Inter Tight", "Inter", system-ui, sans-serif); color: var(--fh-ink); }
.fm-fh *, .fm-fh-grid * { box-sizing: border-box; }
.fm-fh-main { display: block; }

.fm-fh-h1 { font-family: var(--fh-head); font-size: clamp(36px, 4.4vw, 64px); line-height: 1.04; font-weight: 600; letter-spacing: -0.035em; margin: 0; text-wrap: balance; }
.fm-fh-h2 { font-family: var(--fh-head); font-size: clamp(28px, 3vw, 44px); line-height: 1.08; font-weight: 500; letter-spacing: -0.025em; margin: 0; text-wrap: balance; }
.fm-fh-h3 { font-family: var(--fh-head); font-size: 20px; font-weight: 600; margin: 0 0 14px; }
.fm-fh .fm-eyebrow span { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--fm-green-text, #3a7d44); }
.fm-fh .fm-eyebrow { margin: 0; }
.fm-fh .fm-cta .fm-eyebrow span { color: var(--fm-muted-dark, #b9c2bd); }
.fm-fh .fm-lead p { margin: 0; }

/* Buttons */
.fm-fh a.fm-btn-link--green { background: var(--fh-green-btn); border-color: var(--fh-green-btn); }
.fm-fh a.fm-btn-link--green:hover { background: var(--fh-green); border-color: var(--fh-green); color: var(--fh-ink); }
.fm-fh a.fm-btn-link--ghost { background: transparent; color: var(--fh-ink); }
.fm-fh a.fm-btn-link--ghost:hover { background: var(--fh-ink); color: #fff; }
.fm-fh a.fm-btn-link--ghost::after { content: none; }

/* Übersicht */
.e-con.fm-fh-hero--noimg { grid-template-columns: 1fr !important; }
.fm-fh-hero .fm-btn-link { align-self: flex-start; }
.fm-fh-hero p { margin: 0; }
.fm-fh-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 32px; }
.fm-fh-toolbar .fm-head { margin: 0; }
.fm-fh-filter ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fm-fh-filter a { display: inline-flex; gap: 8px; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--fh-line); background: #fff; font-size: 14px; font-weight: 500; text-decoration: none; color: var(--fh-ink); border-radius: 2px; }
.fm-fh-filter a span { font-size: 12px; color: var(--fh-muted); }
.fm-fh-filter a:hover { border-color: var(--fh-ink); }
.fm-fh-filter a[aria-current="page"] { background: var(--fh-ink); border-color: var(--fh-ink); color: #fff; }
.fm-fh-filter a[aria-current="page"] span { color: #c9d1cc; }
.fm-fh-count { margin: 0; font-size: 14px; color: var(--fh-muted); }
.fm-fh-empty { color: var(--fh-muted); }
.fm-fh-main .page-numbers, .fm-fh .page-numbers { list-style: none; display: flex; gap: 6px; padding: 0; }
.fm-fh .page-numbers a, .fm-fh .page-numbers span { display: grid; place-items: center; min-width: 40px; height: 40px; border: 1px solid var(--fh-line); text-decoration: none; }
.fm-fh .page-numbers .current { background: var(--fh-ink); color: #fff; }

/* Karten */
.fm-fh-grid { display: grid; gap: 28px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fm-fh-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fm-fh-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fm-fh-grid--1 { grid-template-columns: 1fr; }
@media (max-width: 1024px) { .fm-fh-grid, .fm-fh-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .fm-fh-grid, .fm-fh-grid--2, .fm-fh-grid--4 { grid-template-columns: 1fr; } }
.fm-fh-card { margin: 0; }
.fm-fh-card__link { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--fh-line); text-decoration: none; color: var(--fh-ink); border-radius: 2px; overflow: hidden; transition: border-color .2s, box-shadow .25s; }
.fm-fh-card__link:hover { border-color: #c5ccc7; box-shadow: 0 18px 40px -26px rgba(17,34,29,.45); }
.fm-fh-card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #eef0ed; }
.fm-fh-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.fm-fh-card__link:hover .fm-fh-card__media img { transform: scale(1.03); }
.fm-fh-card__media .fm-ph { height: 100%; }
.fm-fh-card__type { position: absolute; left: 14px; top: 14px; background: rgba(255,255,255,.94); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 5px 9px; }
.fm-fh-card__body { display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 20px; flex: 1; }
.fm-fh-card__title { font-family: var(--fh-head); font-size: 21px; font-weight: 600; letter-spacing: -0.015em; margin: 0; }
.fm-fh-card__sub { margin: 0; font-size: 14.5px; color: var(--fh-muted); line-height: 1.5; }
.fm-fh-card__meta { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 13.5px; font-weight: 500; }
.fm-fh-card__meta span { color: #b3bbb6; }
.fm-fh-card__foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--fh-line); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.fm-fh-card__price { margin: 0; font-weight: 600; font-size: 15px; }
.fm-fh-card__more { font-size: 13.5px; font-weight: 600; color: var(--fm-green-text, #3a7d44); white-space: nowrap; }
.fm-fh-card__more::after { content: " →"; }

/* Detailseite: Kopf */
.e-con.fm-fh-top { padding: clamp(28px, 4vw, 56px) var(--fm-gutter, 24px) clamp(40px, 5vw, 72px) !important; }
.e-con.fm-fh-top__grid { display: grid !important; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px) !important; align-items: center; }
.fm-fh-top__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.fm-fh-top__text { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.fm-fh-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fm-fh-chip { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; padding: 5px 9px; background: #fff; border: 1px solid var(--fh-line); color: var(--fh-ink); }
.fm-fh-chip:hover { border-color: var(--fh-ink); }
.fm-fh-top .fm-fh-card__meta { font-size: 15px; margin: 0; }
.fm-fh-price { padding: 16px 0; border-top: 1px solid var(--fh-line); border-bottom: 1px solid var(--fh-line); }
.fm-fh-price__value { margin: 0; font-family: var(--fh-head); font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.fm-fh-price__note { margin: 4px 0 0; font-size: 13.5px; color: var(--fh-muted); }
.fm-fh-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
@media (max-width: 1024px) { .e-con.fm-fh-top__grid { grid-template-columns: 1fr; } }

/* Detailseite: Beschreibung + Hausdaten */
.e-con.fm-fh-body { display: grid !important; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px) !important; align-items: start; }
.fm-fh-body__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.fm-fh-content { font-size: 16.5px; line-height: 1.7; max-width: 68ch; }
.fm-fh-content p { margin: 0 0 1em; }
.fm-fh-features { margin-top: 20px; }
.fm-fh-body__side { position: sticky; top: 100px; background: #fff; border: 1px solid var(--fh-line); padding: 28px; display: flex; flex-direction: column; gap: 4px; }
.fm-fh-body__side p { margin: 20px 0 0; }
.fm-fh-body__side .fm-btn-link { width: 100%; justify-content: space-between; }
@media (max-width: 1024px) { .e-con.fm-fh-body { grid-template-columns: 1fr; } .fm-fh-body__side { position: static; } }

/* Galerie und Grundrisse */
.fm-fh-gallery, .fm-fh-plans { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fm-fh-gallery a, .fm-fh-plans a { display: block; height: 100%; overflow: hidden; background: #eef0ed; }
.fm-fh-gallery img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.fm-fh-gallery a:hover img { transform: scale(1.04); }
.fm-fh-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.fm-fh-plans a { background: #fff; border: 1px solid var(--fh-line); padding: 16px; }
.fm-fh-plans img { width: 100%; height: auto; display: block; }
.fm-fh-plans p { margin: 8px 0 0; font-size: 14px; color: var(--fh-muted); }
@media (max-width: 767px) { .fm-fh-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fm-fh-plans { grid-template-columns: 1fr; } }

/* Bildansicht */
.fm-fh-lightbox { max-width: min(1200px, 94vw); max-height: 92vh; padding: 0; border: 0; background: transparent; overflow: visible; }
.fm-fh-lightbox::backdrop { background: rgba(10,16,14,.88); }
.fm-fh-lightbox img { display: block; max-width: 100%; max-height: 86vh; margin: 0 auto; }
.fm-fh-lightbox button { position: absolute; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.6); border-radius: 50%; background: rgba(0,0,0,.35); color: #fff; font-size: 20px; cursor: pointer; }
.fm-fh-lightbox__close { top: -54px; right: 0; }
.fm-fh-lightbox__prev { left: 12px; top: 50%; transform: translateY(-50%); }
.fm-fh-lightbox__next { right: 12px; top: 50%; transform: translateY(-50%); }

@media (prefers-reduced-motion: reduce) { .fm-fh *, .fm-fh-grid * { transition: none !important; } }