/* Katalog-Download (Leistungsseiten Fenster & Haustüren, Zimmer- & Spezialtüren) – Werte aus dem Prototyp (.kat-*, .mk-*). */

/* Aufbau: Text links, Karten rechts */
.menne-kat-wrap .menne-kat-h2 { max-width: 16ch; }
.menne-kat-wrap .is-style-menne-lead { max-width: 46ch; margin-top: 22px; }
.menne-kat-note { font-size: 15px; line-height: 1.6; color: var(--m-ink-mute); max-width: 46ch; margin-top: 18px !important; }
.menne-kat-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.menne-kat-grid > * { margin: 0 !important; }

/* Karte */
.menne-kat-card { background: var(--m-paper); border: 1px solid var(--m-line); border-radius: 3px; overflow: hidden; display: flex !important; flex-direction: column; transition: transform .25s var(--m-ease), box-shadow .25s var(--m-ease); }
.menne-kat-card:hover { transform: translateY(-5px); box-shadow: var(--m-shadow-card-hover); }
.menne-kat-card > * { margin: 0 !important; }
.menne-kat-card > :not(.menne-kat-cover) { padding-inline: 24px; }
.menne-kat-cover { position: relative; overflow: hidden; background: var(--m-walnut); }
.menne-kat-cover a { display: block; }
.menne-kat-cover img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s var(--m-ease); }
.menne-kat-card:hover .menne-kat-cover img { transform: scale(1.045); }
.menne-kat-cover .wp-element-caption { position: absolute; left: 0; bottom: 16px; margin: 0; max-width: 85%; text-align: left; background: var(--m-paper); border-left: 3px solid var(--m-moss); padding: 10px 16px; font-family: var(--m-display); font-size: 16px; line-height: 1.2; color: var(--m-ink); pointer-events: none; }
.menne-kat-cover .wp-element-caption strong { display: block; margin-bottom: 3px; font-family: var(--m-body); font-weight: 600; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--m-moss); }
.menne-kat-cover .wp-element-caption br { display: none; }
.menne-kat-card .menne-kat-t { font-family: var(--m-display); font-weight: 500; font-size: 21px; line-height: 1.2; color: var(--m-ink); padding-top: 22px; }
.menne-kat-card .menne-kat-s { font-size: 15px; line-height: 1.6; color: var(--m-ink-soft); margin: 8px 0 20px !important; flex: 1; }
.menne-kat-btn { display: block !important; }
.menne-kat-btn .wp-block-button { width: 100%; }
.menne-kat-btn .wp-block-button__link { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 14px 22px; font-size: 15px; }
.menne-kat-btn .wp-block-button__link::before, .mk-btn::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: var(--mk-dl) center / contain no-repeat; mask: var(--mk-dl) center / contain no-repeat; }
.menne-kat-card .menne-kat-meta { margin-top: 10px !important; padding-bottom: 24px; font-size: 13px; color: var(--m-ink-mute); text-align: center; }
:root { --mk-dl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v9M3.5 7 8 11.5 12.5 7M2 14h12'/%3E%3C/svg%3E"); }

/* Formular bleibt bis zum Öffnen des Fensters verborgen (im Editor sichtbar). */
.menne-katalog-form { display: none !important; }

/* Fenster (Dialog) */
.mk-ov { position: fixed; inset: 0; z-index: 200; background: rgba(26, 18, 10, .62); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity .2s var(--m-ease); }
.mk-ov.on { opacity: 1; }
.mk-box { position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 40px); overflow: auto; box-sizing: border-box; background: var(--m-paper); border-radius: 3px; box-shadow: 0 30px 70px -30px rgba(14, 9, 4, .7); padding: 40px 40px 34px; transform: translateY(14px); transition: transform .25s var(--m-ease); font-family: var(--m-body); color: var(--m-ink); }
.mk-ov.on .mk-box { transform: none; }
.mk-x { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer; font-size: 26px; line-height: 1; color: var(--m-ink-mute); border-radius: 2px; }
.mk-x:hover { background: var(--m-sand); color: var(--m-ink); }
.mk-eye { font-weight: 600; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--m-moss); }
.mk-h { font-family: var(--m-display); font-weight: 500; font-size: 30px; line-height: 1.12; letter-spacing: -.01em; margin: 12px 0 0; color: var(--m-ink); outline: none; }
.mk-p { font-size: 16px; line-height: 1.6; color: var(--m-ink-soft); margin: 14px 0 0; }
.mk-box .wpcf7 { margin: 0; }
.mk-box .mk-field { display: block; }
.mk-box .mk-lbl { display: block; font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--m-ink-soft); margin: 24px 0 8px; }
.mk-box input[type=email] { width: 100%; box-sizing: border-box; font: inherit; font-size: 17px; padding: 13px 15px; border: 1px solid var(--m-line); border-radius: 2px; background: #fff; color: var(--m-ink); outline: none; transition: border-color .2s, box-shadow .2s; }
.mk-box input[type=email]:focus { border-color: var(--m-moss); box-shadow: 0 0 0 3px rgba(110, 147, 34, .18); }
.mk-chk { margin-top: 18px; font-size: 14px; line-height: 1.55; color: var(--m-ink-soft); }
.mk-chk .wpcf7-list-item { margin: 0; }
.mk-chk label { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.mk-chk input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--m-moss); }
.mk-chk a { color: var(--m-moss); }
.mk-box .wpcf7-not-valid-tip { color: #9b2c1f; font-size: 14px; margin-top: 8px; }
.mk-box .wpcf7-not-valid { border-color: #b5453b !important; }
.mk-submit { position: relative; margin-top: 18px; }
.mk-box .wpcf7-submit, .mk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; box-sizing: border-box; margin-top: 8px; padding: 16px 28px; border: 0; border-radius: 2px; background: var(--m-moss); color: #fff; font: inherit; font-weight: 600; font-size: 16px; cursor: pointer; text-decoration: none; transition: background .2s, transform .2s; }
.mk-box .wpcf7-submit:hover, .mk-btn:hover { background: var(--m-ink); color: #fff; transform: translateY(-2px); }
.mk-box .wpcf7-submit:focus-visible, .mk-btn:focus-visible, .mk-x:focus-visible { outline: 3px solid var(--m-moss); outline-offset: 3px; }
.mk-box .wpcf7-spinner { position: absolute; right: 12px; top: 50%; margin: 0; transform: translateY(-50%); }
.mk-box .wpcf7-response-output { margin: 14px 0 0 !important; padding: 10px 14px !important; font-size: 14px; border-radius: 2px; }
.mk-box form.sent .wpcf7-response-output, .mk-box form.invalid .wpcf7-response-output { display: none; }
.mk-meta { margin-top: 14px; font-size: 13px; color: var(--m-ink-mute); text-align: center; }
.mk-ok { width: 52px; height: 52px; border-radius: 50%; background: rgba(110, 147, 34, .14); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.mk-ok::before { content: ""; width: 24px; height: 24px; background: var(--m-moss); -webkit-mask: var(--mk-ok) center / contain no-repeat; mask: var(--mk-ok) center / contain no-repeat; }
:root { --mk-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E"); }

@media (max-width: 920px) {
	.menne-kat-wrap { row-gap: 40px !important; }
}
@media (max-width: 520px) {
	.mk-box { padding: 34px 22px 26px; }
	.mk-h { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) {
	.menne-kat-card, .menne-kat-card:hover, .menne-kat-cover img, .mk-ov, .mk-box, .mk-btn { transition: none; transform: none; }
}