/* =========================================================================
   Referenzen (Übersicht + 7 Unterseiten) – nur eigene Klassen menne-ref-*
   ========================================================================= */

/* ---------- Überschriften ---------- */
.menne-ref-h2 { max-width: 17ch; }
.menne-ref-h2-s { font-size: clamp(28px, 3.4vw, 42px) !important; line-height: 1.08; }

/* ---------- Hauptsektion: Intro → Galerie → Projekte ---------- */
.menne-ref-main .menne-ref-split { margin-bottom: 0; }
.menne-ref-split .is-style-menne-lead { margin-bottom: -6px; max-width: none; }
.menne-ref-main .menne-ref-gallery { margin-top: 80px !important; }
.menne-ref-main .menne-ref-cases { margin-top: 100px !important; }

/* ---------- Projekt-Galerie: Karten mit Badge ---------- */
.wp-block-gallery.menne-ref-gallery { --wp--style--unstable-gallery-gap: 28px; gap: 28px !important; }
.wp-block-gallery.menne-ref-gallery > figure.wp-block-image:not(#x) {
	position: relative; display: flex; flex-direction: column !important; justify-content: flex-start;
	background: var(--m-paper); border: 1px solid var(--m-line); border-radius: 3px; overflow: hidden;
}
.wp-block-gallery.menne-ref-gallery > figure.wp-block-image::before { display: none !important; }
.wp-block-gallery.menne-ref-gallery.is-cropped > figure.wp-block-image:not(#x) img {
	flex: none !important; width: 100%; height: auto !important; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0;
}
.wp-block-gallery.menne-ref-gallery > figure.wp-block-image:not(#x) figcaption {
	position: static; flex: 1 1 auto; max-height: none; overflow: visible; margin: 0; padding: 24px 26px 26px;
	background: none; text-align: left; text-shadow: none; color: var(--m-ink-soft); will-change: auto; transform: none;
	font-family: var(--m-body); font-size: 15px; line-height: 1.55;
}
.menne-ref-gallery figcaption br { display: none; }
.menne-ref-gallery figcaption strong { display: block; font-family: var(--m-display); font-weight: 400; font-size: 22px; line-height: 1.15; color: var(--m-ink); }
.menne-ref-gallery figcaption strong:first-child {
	position: absolute; left: 14px; top: 14px; z-index: 2; pointer-events: none;
	background: rgba(42, 32, 23, .86); color: #fff; padding: 6px 11px; border-radius: 2px;
	font-family: var(--m-body); font-weight: 600; font-size: 11px; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase;
}
.menne-ref-gallery figcaption em { display: block; font-style: normal; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--m-ink-mute); margin: 6px 0 11px; }
.wp-block-gallery.menne-ref-gallery .wp-block-image:hover img { transform: scale(1.05); }
@media (max-width: 920px) { .wp-block-gallery.menne-ref-gallery { --wp--style--unstable-gallery-gap: 20px; gap: 20px !important; } }
@media (max-width: 600px) {
	.wp-block-gallery.menne-ref-gallery > figure.wp-block-image:not(#x) { width: 100% !important; }
}

/* ---------- Projekte im Detail (Slider) ---------- */
.wp-block-group.menne-ref-cases { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: end; }
.menne-ref-cases > * { margin: 0 !important; }
.menne-ref-cases > .menne-ref-cases__head { grid-column: 1; grid-row: 1; }
.menne-ref-cases > .is-style-menne-slider { grid-column: 1 / -1; grid-row: 2; margin-top: 34px !important; }
.menne-ref-cases > .menne-slider-nav { grid-column: 2; grid-row: 1; justify-content: flex-end; gap: 12px; }
.menne-ref-cases .menne-slider-count { order: -1; margin: 0 4px 0 0; min-width: 62px; text-align: right; font-family: var(--m-display); font-size: 19px; font-weight: 400; letter-spacing: 0; color: var(--m-ink-mute); }
.menne-ref-cases .menne-slider-nav > button { width: 46px; height: 46px; background: var(--m-paper); color: var(--m-ink-soft); }
.menne-ref-cases .menne-slider-nav > button:hover { background: var(--m-sand); color: var(--m-ink); border-color: var(--m-moss); }
.menne-ref-cases .menne-slider-dots button { transition: background .2s var(--m-ease), transform .2s var(--m-ease); }
.menne-ref-cases .menne-slider-dots button[aria-current="true"] { transform: scale(1.25); }

/* Slide: Bild links, Text rechts */
.wp-block-group.menne-ref-case {
	display: grid; grid-template-columns: 1.02fr .98fr; grid-template-rows: minmax(52px, 1fr) auto auto auto auto minmax(52px, 1fr);
	border: 1px solid var(--m-line); border-radius: 3px; overflow: hidden; background: var(--m-paper);
}
.is-style-menne-slider.is-ready > .menne-ref-case:not(.is-active) { display: none; }
.js .is-style-menne-slider.is-ready > .menne-ref-case.menne-slide.is-active { display: grid; }
.menne-ref-case > * { grid-column: 2; margin: 0 !important; padding-inline: 54px; }
.menne-ref-case > .menne-ref-case__media { grid-column: 1; grid-row: 1 / -1; position: relative; min-height: 360px; padding: 0; overflow: hidden; border-radius: 0; }
.menne-ref-case > .menne-ref-case__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform .6s var(--m-ease); }
.menne-ref-case:hover > .menne-ref-case__media img { transform: scale(1.045); }
.menne-ref-case > .menne-ref-case__kicker { grid-row: 2; letter-spacing: .16em; }
.menne-ref-case > .menne-ref-case__title { grid-row: 3; margin-top: 10px !important; font-size: clamp(24px, 3vw, 34px); line-height: 1.12; letter-spacing: -.01em; }
.menne-ref-case > .menne-ref-case__text { grid-row: 4; margin-top: 16px !important; font-size: 17px; line-height: 1.65; color: var(--m-ink-soft); max-width: calc(48ch + 108px); }
.menne-ref-case > .menne-ref-case__list { grid-row: 5; margin-top: 22px !important; list-style: none; padding-left: 54px; display: flex; flex-direction: column; gap: 10px; }
.menne-ref-case__list > li { position: relative; padding-left: 24px; margin: 0; font-size: 15px; line-height: 1.5; color: var(--m-ink-soft); }
.menne-ref-case__list > li::before { content: "\2014"; position: absolute; left: 0; top: 0; color: var(--m-moss); font-weight: 700; }

@media (max-width: 920px) {
	.wp-block-group.menne-ref-cases { grid-template-columns: 1fr; row-gap: 18px; }
	.menne-ref-cases > .menne-slider-nav { grid-column: 1; grid-row: 2; justify-content: flex-start; }
	.menne-ref-cases > .is-style-menne-slider { grid-row: 3; margin-top: 16px !important; }
	.menne-ref-cases .menne-slider-count { text-align: left; min-width: 0; }
	.wp-block-group.menne-ref-case { grid-template-columns: 1fr; grid-template-rows: auto 40px auto auto auto auto 40px; }
	.menne-ref-case > * { grid-column: 1; padding-inline: 32px; }
	.menne-ref-case > .menne-ref-case__media { grid-row: 1; min-height: 280px; }
	.menne-ref-case > .menne-ref-case__kicker { grid-row: 3; }
	.menne-ref-case > .menne-ref-case__title { grid-row: 4; }
	.menne-ref-case > .menne-ref-case__text { grid-row: 5; }
	.menne-ref-case > .menne-ref-case__list { grid-row: 6; padding-left: 32px; }
}
@media (max-width: 480px) {
	.menne-ref-case > * { padding-inline: 22px; }
	.menne-ref-case > .menne-ref-case__list { padding-left: 22px; }
	.menne-ref-cases > .menne-slider-nav { flex-wrap: wrap; }
}

/* ---------- Kundenstimme ---------- */
.menne-ref-voice { text-align: center; }
.menne-ref-voice .menne-ref-quote { margin-top: 22px !important; }
.menne-ref-voice .menne-ref-quote cite { text-align: center; }

/* ---------- Menne-Original (walnut) ---------- */
.menne-ref-mo > .wp-block-column:first-child .is-style-menne-lead { max-width: 58ch; }
.menne-ref-mo .wp-block-heading { margin-bottom: 16px; }
.menne-ref-actions { margin-top: 60px !important; gap: 18px 28px; }
.menne-ref-actions > * { margin: 0 !important; }

/* ---------- FAQ + Schluss-CTA ---------- */
.menne-ref-faq .menne-faq-list + .is-style-menne-arrow { margin-top: 34px; }
.menne-ref-cta .menne-ref-cta__buttons { margin-top: 30px; }

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
	.menne-ref-case:hover > .menne-ref-case__media img,
	.wp-block-gallery.menne-ref-gallery .wp-block-image:hover img { transform: none; }
}

/* Hochformat-Grafik: Platzhaltergröße vor dem Lazy-Load (WP setzt sonst 3000×1500) */
.menne-ref-mo .wp-block-image img { contain-intrinsic-size: 260px 390px; }

/* ---------- Übersicht: Referenz im Fokus ---------- */
.menne-ref-main--overview .menne-ref-feature { margin-top: 90px !important; }
.wp-block-group.menne-ref-feature { grid-template-rows: minmax(54px, 1fr) auto auto auto auto minmax(54px, 1fr); }
.menne-ref-feature > .menne-ref-feature__media { min-height: 380px; background: var(--m-sand); box-shadow: none; }
.menne-ref-feature > .menne-ref-feature__media img { object-fit: cover; object-position: 50% 50%; height: 100%; }  /* wie Design-Referenz: formatfüllend */
.menne-ref-feature > .menne-ref-case__title { margin-top: 14px !important; }
.menne-ref-feature > .menne-ref-case__text { font-size: 18px; margin-top: 18px !important; }
.menne-ref-feature > .menne-ref-feature__actions { grid-row: 5; margin-top: 28px !important; }
@media (max-width: 920px) {
	.menne-ref-feature > .menne-ref-feature__media { min-height: 0; aspect-ratio: 1023 / 1100; max-height: 520px; }
	.wp-block-group.menne-ref-feature { grid-template-rows: auto 40px auto auto auto auto 40px; }
	.menne-ref-feature > .menne-ref-feature__actions { grid-row: 6; }
}

/* ---------- Übersicht: Kacheln nach Leistung ---------- */
.menne-ref-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin-top: 48px !important; }
.menne-ref-tiles > * { margin: 0 !important; }
.wp-block-group.menne-ref-tile {
	position: relative; display: flex; flex-direction: column; background: var(--m-paper); border: 1px solid var(--m-line); border-radius: 3px; overflow: hidden;
	transition: transform .2s var(--m-ease), box-shadow .2s var(--m-ease);
}
.menne-ref-tile > * { margin: 0 !important; padding-inline: 24px; }
.menne-ref-tile:hover { transform: translateY(-5px); box-shadow: var(--m-shadow-card); }
.menne-ref-tile:focus-within { outline: 3px solid var(--m-moss); outline-offset: 3px; }
.menne-ref-tile > .menne-ref-tile__media { padding: 0; border-radius: 0; box-shadow: none !important; }
.menne-ref-tile > .menne-ref-tile__media img { display: block; width: 100%; height: auto !important; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; }
.menne-ref-tile:hover > .menne-ref-tile__media img { transform: scale(1.05); }
.menne-ref-tile > .menne-ref-tile__badge {
	position: absolute; left: 14px; top: 14px; z-index: 2; padding: 6px 11px; border-radius: 2px; background: rgba(42, 32, 23, .86);
	color: #fff; font-weight: 600; font-size: 11px; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase;
}
.menne-ref-tile > .menne-ref-tile__title { padding-top: 24px; font-size: 23px; line-height: 1.12; letter-spacing: 0; }
.menne-ref-tile__title a { color: var(--m-ink); text-decoration: none; }
.menne-ref-tile__title a::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.menne-ref-tile__title a:focus-visible { outline: none; }
.menne-ref-tile > .menne-ref-tile__text { margin-top: 9px !important; font-size: 15px; line-height: 1.55; color: var(--m-ink-soft); }
.menne-ref-tile > .menne-ref-tile__cta {
	margin-top: auto !important; padding-top: 16px; padding-bottom: 26px; display: flex; align-items: center; gap: 9px;
	color: var(--m-moss); font-weight: 600; font-size: 14px; transition: gap .2s var(--m-ease);
}
.menne-ref-tile > .menne-ref-tile__cta::after {
	content: ""; width: 15px; height: 14px; flex: none; background: currentColor;
	-webkit-mask: var(--m-arrow) no-repeat center / contain; mask: var(--m-arrow) no-repeat center / contain;
}
.menne-ref-tile:hover > .menne-ref-tile__cta { gap: 15px; }
.menne-ref-tile > .menne-ref-tile__text { flex: 0 0 auto; }
@media (max-width: 920px) { .menne-ref-tiles { grid-template-columns: 1fr 1fr; gap: 20px; } }
@media (max-width: 600px) { .menne-ref-tiles { grid-template-columns: 1fr; } }

.menne-ref-system .menne-ref-mo + .is-style-menne-phases + .is-style-menne-arrow { margin-top: 60px; }
@media (prefers-reduced-motion: reduce) {
	.menne-ref-tile:hover, .menne-ref-tile:hover > .menne-ref-tile__media img { transform: none; }
}