/* Motel Isar – Theme-Styles (Frontend + Editor). Farben/Schriften kommen aus theme.json. */

:root {
	--mi-blue: var(--wp--preset--color--primary, #3399cc);
	--mi-blue-a: rgba(51, 153, 204, 0.85);
	--mi-text: var(--wp--preset--color--text, #666);
	--mi-dark: var(--wp--preset--color--dark, #343434);
	--mi-serif: var(--wp--preset--font-family--heading, "Playfair Display", serif);
	--mi-header-h: 100px;
}

body { -webkit-font-smoothing: antialiased; }
strong, b { font-weight: 700; }
.wp-site-blocks > * + * { margin-block-start: 0; }
.mi-main { margin-block-start: 0; }
.mi-content > * + * { margin-block-start: 0; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* ---------- Header ---------- */
.mi-site-header { position: sticky; top: 0; z-index: 50; }
.admin-bar .mi-site-header { top: var(--wp-admin--admin-bar--height, 32px); }
.mi-header { padding-top: 12px; padding-bottom: 12px; }
.mi-header__inner { gap: 1.5rem; align-items: center !important; }
.mi-logo { margin: 0; flex-shrink: 0; }
.mi-logo img { width: 250px !important; height: auto; }
.mi-header__right { gap: 0.6rem !important; align-items: flex-end !important; }
.mi-header__contact { margin: 0; font-size: 0.8125rem; line-height: 1; }
.mi-header__contact a { color: var(--mi-dark); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.mi-header__contact a:hover { color: var(--mi-blue); }
.mi-phone::before,
.mi-facebook::before { content: ""; display: inline-block; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--mi-icon) center / contain no-repeat; mask: var(--mi-icon) center / contain no-repeat; }
.mi-phone::before { --mi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.2 15.2 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E"); }
.mi-facebook { margin-left: 14px; }
.mi-facebook::before { width: 16px; height: 16px; --mi-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 2H2v20h10.7v-7.7h-2.6v-3h2.6V9.1c0-2.6 1.6-4 3.9-4 1.1 0 2.1.1 2.3.1v2.7h-1.6c-1.3 0-1.5.6-1.5 1.5v1.9h3l-.4 3h-2.6V22H22z'/%3E%3C/svg%3E"); }
.mi-nav { gap: 1.4rem; }
.mi-nav .wp-block-navigation-item__content { color: var(--mi-dark); text-decoration: none; letter-spacing: 0.02em; }
.mi-nav .wp-block-navigation-item__content:hover,
.mi-nav .current-menu-item > .wp-block-navigation-item__content { color: #8a8a8a; }
.mi-nav .wp-block-navigation-item:first-child { display: none; } /* "Motel Isar" = Logo-Link, wie im Original */
.mi-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:first-child { display: flex; }
.mi-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--header); padding: 2rem; }
.mi-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 1.125rem; padding: 0.4rem 0; }

/* ---------- Hero (Slider) ---------- */
.mi-hero { position: relative; min-height: max(420px, 100vh); display: flex; align-items: center; justify-content: center; overflow: hidden; background: #ccc; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
.mi-hero > .mi-hero__slides { position: absolute; inset: 0; margin: 0 !important; display: block !important; gap: 0 !important; }
.mi-hero > .mi-hero__slides > figure.wp-block-image { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; margin: 0 !important; opacity: 0; transition: opacity 1.2s ease; }
.mi-hero > .mi-hero__slides > figure.wp-block-image:first-child,
.mi-hero > .mi-hero__slides > figure.wp-block-image.is-active { opacity: 1; }
.mi-hero > .mi-hero__slides.mi-js > figure.wp-block-image:not(.is-active) { opacity: 0; }
.mi-hero > .mi-hero__slides > figure img { width: 100% !important; height: 100% !important; object-fit: cover; }
.mi-hero__content { position: static; text-align: center; padding: 3rem 1rem 6rem; max-width: 1100px; display: flex; flex-direction: column; align-items: center; gap: 0 !important; }
.mi-hero__content > * { position: relative; z-index: 2; }
.mi-hero__kicker { display: inline-block; background: var(--mi-blue-a); color: #fff; font-size: 2em; text-transform: uppercase; padding: 0.35rem 1rem; margin: 0 0 0.6rem !important; }
.mi-hero__title { color: #fff !important; text-transform: uppercase !important; font-size: 4em !important; line-height: 1.55 !important; margin: 0 !important; }
.mi-hero__title { display: inline; background: var(--mi-blue-a); padding: 0.05em 0.25em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.mi-hero__content > .mi-hero__badge { position: absolute; z-index: 3; top: 16%; right: clamp(1rem, 8vw, 9rem); margin: 0 !important; }
.mi-hero__badge a { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 160px; height: 160px; border-radius: 50%; background: var(--mi-blue-a); color: #fff; text-decoration: none; transform: rotate(15deg); font-size: 1rem; line-height: 1.15; text-align: center; padding: 1.2rem; }
.mi-hero__badge strong { font-family: var(--mi-serif); font-weight: 400; font-size: 2.6rem; line-height: 1.1; display: block; }
.mi-hero__buttons { position: absolute; left: 0; right: 0; bottom: clamp(1.5rem, 5vw, 4.25rem); z-index: 2; margin: 0 !important; }
.mi-hero .mi-booking .wp-block-button__link { text-transform: uppercase; font-size: 1rem; padding: 1rem 2rem; }
.mi-hero__arrow { position: absolute; top: 50%; z-index: 3; width: 48px; height: 48px; margin-top: -24px; border: 0; background: transparent; cursor: pointer; opacity: 0.9; }
.mi-hero__arrow::before { content: ""; position: absolute; inset: 14px; border: solid #fff; border-width: 0 4px 4px 0; }
.mi-hero__arrow--prev { left: 12px; } .mi-hero__arrow--prev::before { transform: rotate(135deg); left: 18px; }
.mi-hero__arrow--next { right: 12px; } .mi-hero__arrow--next::before { transform: rotate(-45deg); right: 18px; }
.mi-hero__arrow:focus-visible { outline: 2px solid #fff; }

/* ---------- Abschnitte ---------- */
.mi-section { padding-top: 80px; padding-bottom: 80px; } /* wie Contao "space-p" (Desktop und Handy) */
.mi-section.mi-space-pt { padding-bottom: 0; }
.mi-section.mi-space-pb { padding-top: 0; }
.mi-section.mi-space-0 { padding-top: 0; padding-bottom: 0; }
.mi-section--blue, .mi-section--blue :is(h1, h2, h3, h4, p, li, a) { color: #fff !important; }
.mi-section--blue .mi-kicker::before { background: #fff; }
.mi-section > * { margin-block-end: 0; }
.mi-section > * + * { margin-block-start: 12px; }
.mi-section > .mi-headline + * { margin-block-start: 60px; }
.mi-section > * + .mi-headline,
.wp-block-cover.mi-section--image .wp-block-cover__inner-container > * + .mi-headline { margin-block-start: var(--wp--preset--spacing--50) !important; }

.mi-headline { margin-bottom: 0; }
.mi-headline > * { margin: 0 !important; }
.mi-headline > .mi-subheadline { margin-top: 0.3rem !important; }
.mi-kicker { position: relative; padding-left: 40px; font-size: 0.875rem !important; text-transform: uppercase; font-weight: 300; line-height: 1.6; }
.mi-kicker::before { content: ""; position: absolute; left: 0; top: 50%; width: 28px; height: 2px; background: var(--mi-blue); }
.mi-title { text-transform: uppercase; font-size: var(--wp--preset--font-size--x-large) !important; }

.mi-flow-2col { column-count: 2; column-gap: 60px; }
.mi-flow-2col > * { break-inside: avoid; margin-top: 0 !important; margin-bottom: 12px !important; }
.mi-flow-2col > p { margin-bottom: 60px !important; }
.mi-flow-2col > p:last-child, .mi-flow-2col > :last-child { margin-bottom: 0 !important; }
.mi-flow-2col > h2 { margin-bottom: 25px !important; }
.mi-flow-2col > h3 { margin-bottom: 15px !important; }
.mi-flow-2col > h3:first-child + p { margin-top: 32px !important; }
.mi-flow-2col > p:has(+ .wp-block-buttons) { margin-bottom: 24px !important; }
.mi-flow-2col > :is(h2, h3):not(:first-child) { break-before: column; }

.wp-block-columns { gap: 2.5rem; }
.mi-section .wp-block-column > h3:first-child strong { font-weight: 400; }

/* Bild-/Parallax-Abschnitte */
.mi-section--image { min-height: 420px; }
.mi-section--image .mi-parallax-small,
.mi-section--image .mi-parallax-big { display: table; margin-left: auto !important; margin-right: auto !important; background: var(--mi-blue-a); color: #fff; text-transform: uppercase; }
.mi-section--image .mi-parallax-small { font-size: 1.125rem; padding: 0.3rem 0.9rem; }
.mi-section--image .mi-parallax-big { font-family: var(--mi-serif); font-size: var(--wp--preset--font-size--x-large); padding: 0.4rem 1rem; line-height: 1.4; margin-top: 1rem !important; }
.wp-block-cover.mi-section--image .wp-block-cover__inner-container > * + * { margin-block-start: 12px; }
.wp-block-cover.mi-section--image .wp-block-cover__inner-container > .mi-headline + * { margin-block-start: 60px; }

/* Services */
.mi-services { gap: 1.75rem !important; }
.mi-service { background: var(--mi-blue); color: #fff; padding: 1.75rem 1.25rem; text-align: center; }
.mi-service > * { margin: 0 0 0.6rem !important; }
.mi-service h3 { color: #fff !important; font-size: 1.4em !important; }
.mi-service p { font-size: 0.95em; line-height: 1.6; color: #fff; }
.mi-service__icon img { width: 40px !important; height: 40px; object-fit: contain; filter: brightness(0) invert(1); }

/* Partner-Boxen */
.mi-box { min-height: 240px !important; padding: 1.5rem !important; }
.mi-box .wp-block-cover__inner-container > * { margin: 0 0 0.4rem !important; color: #fff; }
.mi-box h3 { font-family: var(--wp--preset--font-family--body); font-weight: 700; text-transform: uppercase; font-size: 1.75rem !important; color: #fff !important; line-height: 1.05; }
.mi-box .mi-kicker-small { font-weight: 700; text-transform: uppercase; font-size: 0.75rem !important; }
.mi-box a { color: #fff !important; }

/* Galerien */
.mi-gallery.wp-block-gallery { gap: 10px !important; padding: 20px 0; }
.is-layout-constrained > .mi-gallery.wp-block-gallery { max-width: min(calc(100% + 10px), 1150px) !important; width: calc(100% + 10px); margin-left: -5px !important; margin-right: -5px !important; }
@media (min-width: 1210px) { .is-layout-constrained > .mi-gallery.wp-block-gallery { margin-left: auto !important; margin-right: auto !important; } }
/* Bilder ungeschnitten wie im Original (Hochformat bleibt Hochformat) */
.mi-gallery.wp-block-gallery.has-nested-images { align-items: flex-start; }
.mi-gallery.wp-block-gallery.has-nested-images figure.wp-block-image { align-self: flex-start; }
.mi-gallery.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img { height: auto; object-fit: initial; flex: 0 0 auto; }
.mi-gallery.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) > a { flex: 0 0 auto; }
.mi-gallery.mi-gallery--crop-8x5.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) img { aspect-ratio: 8 / 5; object-fit: cover; }

/* Videos, Karte */
.wp-block-video video { width: 100%; background: #000; }
.mi-map { margin-top: 3rem; }
.mi-map iframe { width: 100%; height: 455px; border: 1px solid #ccc; display: block; }
.mi-map__consent { min-height: 455px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 0.75rem; padding: 2rem 1.5rem; background: #eef3f6 linear-gradient(135deg, rgba(51, 153, 204, 0.06) 25%, transparent 25%, transparent 50%, rgba(51, 153, 204, 0.06) 50%, rgba(51, 153, 204, 0.06) 75%, transparent 75%) 0 0 / 28px 28px; border: 1px solid #d7e3ea; }
.mi-map__consent > * { margin: 0 !important; max-width: 560px; }
.mi-map__title { font-family: var(--mi-serif); font-size: 1.375rem; color: var(--mi-dark); }
.mi-map__text { font-size: 0.875rem; }
.mi-map__actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; justify-content: center; }
.mi-map__load { border: 0; cursor: pointer; }
.mi-map__ext { font-size: 0.875rem; }

/* Buttons */
.wp-block-button__link { text-decoration: none; }
.mi-section--blue .wp-block-button__link { background: #fff; color: var(--mi-blue) !important; }

/* Listen */
.mi-section ul:not(.mi-glossar__list):not(.mi-tiles) { padding-left: 20px; padding-top: 10px; }
.mi-section ul.wp-block-list > li { line-height: 1.2; margin-bottom: 10px; }
.mi-section ul.wp-block-list > li:last-child { margin-bottom: 0; }

/* ---------- Zimmer-ABC ---------- */

.mi-glossar__list, .mi-glossar-entry > * { max-width: 640px; }
.mi-glossar-entry > .wp-block-post-content { max-width: 820px; }
.mi-glossar__alpha { margin-bottom: 1.5rem; }
.mi-glossar__all { font-family: var(--mi-serif); text-transform: uppercase; font-size: 0.8125rem; color: var(--mi-text); text-decoration: none; }
.mi-glossar__letters { display: flex; flex-wrap: wrap; gap: 0.35rem 0.6rem; font-family: var(--mi-serif); font-size: 1.6rem; line-height: 1.2; }
.mi-glossar__letters a { color: var(--mi-blue); text-decoration: none; }
.mi-glossar__letters a.is-active, .mi-glossar__all.is-active { text-decoration: underline; text-underline-offset: 4px; }
.mi-glossar__letters span { color: #777; }
.mi-glossar__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #999; }
.mi-glossar__list li { border-bottom: 1px solid #999; }
.mi-glossar__list a { display: block; padding: 1rem 0; font-family: var(--mi-serif); font-size: 1.125rem; color: var(--mi-text); text-decoration: none; }
.mi-glossar__list a:hover { color: var(--mi-blue); }
.mi-glossar__empty { padding: 1rem 0; }
.mi-glossar-entry__title { text-transform: none !important; font-size: var(--wp--preset--font-size--x-large) !important; margin-bottom: 1.5rem; }
.mi-back { margin-top: 2rem; }
.mi-back__link { display: inline-block; background: var(--mi-blue); color: #fff !important; padding: 0.5rem 1.2rem; text-decoration: none; }
.mi-back__link:hover { background: var(--mi-dark); }

/* Zimmer-ABC als Akkordeon */
.mi-glossar__accordion { border-top: 1px solid #999; }
.mi-acc { border-bottom: 1px solid #999; }
.mi-acc__title { list-style: none; cursor: pointer; position: relative; padding: 1rem 2.5rem 1rem 0; font-family: var(--mi-serif); font-size: 1.125rem; color: var(--mi-text); }
.mi-acc__title::-webkit-details-marker { display: none; }
.mi-acc__title::before, .mi-acc__title::after { content: ""; position: absolute; right: 0.4rem; top: 50%; width: 16px; height: 2px; background: var(--mi-blue); transition: transform 0.2s ease; }
.mi-acc__title::after { transform: rotate(90deg); }
.mi-acc[open] > .mi-acc__title { color: var(--mi-blue); }
.mi-acc[open] > .mi-acc__title::after { transform: rotate(0deg); }
.mi-acc__title:hover { color: var(--mi-blue); }
.mi-acc__title:focus-visible { outline: 2px solid var(--mi-blue); outline-offset: 2px; }
.mi-acc__body { padding: 0 0 1.25rem; }
.mi-acc__body > * { margin: 0 0 0.8rem; }
.mi-acc__body img { max-width: 100%; height: auto; }
.mi-acc__link { font-size: 0.8125rem; }
@media (prefers-reduced-motion: reduce) { .mi-acc__title::before, .mi-acc__title::after { transition: none; } }

/* Zimmer-ABC als Kacheln – responsives Raster: 1 Spalte (Handy) bis 4 Spalten (Desktop) */
.mi-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: clamp(0.75rem, 2vw, 1.5rem); }
.mi-tile { position: relative; display: flex; flex-direction: column; gap: 0.5rem; min-height: 11rem; padding: 1.4rem 1.25rem 1.1rem; background: #fff; border: 1px solid #e2e2e2; border-top: 3px solid var(--mi-blue); transition: box-shadow 0.2s ease, transform 0.2s ease; }
.mi-tile:hover, .mi-tile:focus-within { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); transform: translateY(-2px); }
.mi-tile__letter { position: absolute; top: 0.6rem; right: 0.9rem; font-family: var(--mi-serif); font-size: 2.25rem; line-height: 1; color: rgba(51, 153, 204, 0.15); }
.mi-tile__title { margin: 0 !important; font-size: 1.125rem !important; line-height: 1.3; padding-right: 2.25rem; text-transform: none !important; }
.mi-tile__link { color: var(--mi-text); text-decoration: none; }
.mi-tile__link::after { content: ""; position: absolute; inset: 0; } /* ganze Kachel klickbar */
.mi-tile__link:focus-visible { outline: none; }
.mi-tile:focus-within { outline: 2px solid var(--mi-blue); outline-offset: 2px; }
.mi-tile:hover .mi-tile__link { color: var(--mi-blue); }
.mi-tile__text { margin: 0; font-size: 0.875rem; line-height: 1.6; color: var(--mi-text); flex-grow: 1; overflow-wrap: anywhere; }
.mi-tile__more { font-size: 0.8125rem; color: var(--mi-blue); text-transform: uppercase; letter-spacing: 0.03em; }
.mi-tile__more::after { content: " →"; }
@media (max-width: 600px) {
	.mi-tile { min-height: 0; padding: 1rem 1rem 0.9rem; }
	.mi-glossar__letters { font-size: 1.35rem; gap: 0.3rem 0.55rem; }
}
@media (prefers-reduced-motion: reduce) { .mi-tile { transition: none; } .mi-tile:hover, .mi-tile:focus-within { transform: none; } }

/* Bedienungsanleitung Lüftung (Zimmer-ABC) */
.mi-manual__intro { font-size: 1rem; }
.mi-manual__device { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.5rem 2rem; align-items: center; background: var(--wp--preset--color--light, #f4f4f4); padding: clamp(1rem, 3vw, 1.75rem); margin: 1.5rem 0 2rem !important; }
.mi-manual__device > * { margin: 0 !important; }
.mi-device-figure { margin: 0; }
.mi-device { display: block; width: 100%; height: auto; }
.mi-manual__device ul { list-style: none; padding: 0 !important; margin: 0; font-size: 0.875rem; line-height: 1.5; }
.mi-manual__device li { padding: 0.35rem 0; border-bottom: 1px solid #e2e2e2; }
.mi-manual__device li:last-child { border-bottom: 0; }
.mi-manual__device li strong { color: var(--mi-blue); }
.mi-glossar-entry h2, .mi-acc__body h2, .mi-manual__intro ~ h2.wp-block-heading { font-size: 1.25rem !important; text-transform: none !important; margin: 2rem 0 0.75rem !important; }
.mi-glossar-entry ol, .mi-acc__body ol { padding-left: 1.4rem; }
.mi-glossar-entry ol li, .mi-acc__body ol li { margin-bottom: 0.4rem; }
.mi-manual__hint { border-left: 3px solid var(--mi-blue); background: #f2f8fc; padding: 0.7rem 1rem; font-size: 0.875rem; }
.mi-manual__table { margin: 1rem 0 !important; }
.mi-manual__table table { border-collapse: collapse; width: 100%; max-width: 480px; font-size: 0.875rem; }
.mi-manual__table th, .mi-manual__table td { border: 0 !important; border-bottom: 1px solid #e2e2e2 !important; padding: 0.5rem 0.75rem; text-align: left; }
.mi-manual__table th { background: var(--mi-blue); color: #fff; font-weight: 400; }
.mi-manual__table thead { border-bottom: 0 !important; }
.mi-manual__table td:last-child { letter-spacing: 0.05em; color: var(--mi-dark); }
.mi-manual__source { font-size: 0.8125rem; margin-top: 2rem !important; }
@media (max-width: 700px) {
	.mi-manual__device { grid-template-columns: 1fr; }
}

/* Popup (Startseite) – ohne JavaScript bzw. vor dem Öffnen unsichtbar */
.mi-content > .mi-popup { display: none; }
.mi-popup-dialog { position: fixed; inset: 0; margin: auto; height: fit-content; width: min(92vw, 560px); max-height: 92vh; padding: 0; border: 0; background: #fff; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); overflow: auto; }
.mi-popup-dialog::backdrop { background: rgba(20, 30, 36, 0.65); }
.mi-popup-dialog .mi-popup { display: block; margin: 0 !important; padding: 0 0 1.25rem; }
.mi-popup-dialog .mi-popup > * { margin: 0 !important; }
.mi-popup-dialog .mi-popup .wp-block-image img { display: block; width: 100%; height: auto; max-height: 75vh; object-fit: cover; }
.mi-popup-dialog .mi-popup .wp-block-buttons { margin-top: 1.25rem !important; }
.mi-popup__close { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--mi-dark); font-size: 1.6rem; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); }
.mi-popup__close:hover { background: #fff; color: var(--mi-blue); }
.mi-popup__close:focus-visible { outline: 3px solid var(--mi-blue); outline-offset: 2px; }

/* ---------- Kontaktformular ---------- */
.mi-form { display: flex; flex-wrap: wrap; gap: 0 2rem; }
.mi-form__field { flex: 1 1 100%; margin: 0 0 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.mi-form__field--half { flex-basis: calc(50% - 1rem); }
.mi-form label { font-weight: 400; }
.mi-req { color: #d21; }
.mi-form input, .mi-form textarea { font: inherit; color: var(--mi-dark); border: 1px solid #ddd; padding: 0.7rem 0.8rem; width: 100%; box-sizing: border-box; background: #fff; }
.mi-form input:focus, .mi-form textarea:focus { outline: 2px solid var(--mi-blue); outline-offset: 0; border-color: var(--mi-blue); }
.mi-form__hp { position: absolute !important; left: -9999px; }
.mi-form__note { flex-basis: 100%; margin: 0 0 1rem; }
.mi-form__submit { flex-basis: 100%; text-align: center; margin: 0; }
.mi-form__submit button { cursor: pointer; border: 0; }
.mi-form__notice { padding: 1rem 1.25rem; margin-bottom: 1.5rem; border-left: 4px solid; }
.mi-form__notice--ok { border-color: #2e8b57; background: #eef8f1; }
.mi-form__notice--error { border-color: #d21; background: #fdeeee; }

/* ---------- Footer ---------- */
.mi-footer { padding-top: 72px; padding-bottom: 0; text-align: center; font-size: 0.95em; border-top: 1px solid #e6e6e6; }
.mi-footer > * + * { margin-block-start: 1.25rem; }
.mi-footer__address strong { font-weight: 700; }
.mi-footer a { color: var(--mi-dark); text-decoration: none; }
.mi-footer__contact a { color: var(--mi-dark); }
.mi-footer__award { margin-top: 60px !important; margin-bottom: 0 !important; }
.mi-footer { padding-bottom: 24px !important; }
.mi-footer__links, .mi-footer__copy { padding: 0.55rem 1rem; margin: 0 !important; }
.mi-footer__links p, .mi-copyright { margin: 0; font-size: 0.75rem !important; }
.mi-footer__links a { color: #fff; text-decoration: none; margin: 0 0.35rem; }

/* ---------- Mobil ---------- */
@media (max-width: 781px) {
	.mi-logo img { width: 150px !important; }
	.mi-header__right { gap: 0.25rem !important; }
	.mi-hero { min-height: 70vh; }
	.mi-hero__badge a { width: 110px; height: 110px; font-size: 0.75rem; padding: 0.8rem; }
	.mi-hero__badge strong { font-size: 1.8rem; }
	.mi-hero__content > .mi-hero__badge { top: 1rem; right: 1rem; }
	.mi-hero__content { padding-top: 7rem; }
	.mi-hero__title { font-size: 2em !important; }
	.mi-hero__kicker { font-size: 1em; }
	.mi-hero__arrow { display: none; }
	.mi-services { gap: 10px !important; }
	.mi-service { padding: 0.9rem 1.25rem; }
	.mi-flow-2col { column-count: 1; }
	.mi-flow-2col > :is(h2, h3):not(:first-child) { break-before: auto; }
	.mi-form__field--half { flex-basis: 100%; }
	.mi-section--image { background-attachment: scroll !important; }
	.mi-gallery.wp-block-gallery.has-nested-images figure.wp-block-image { width: calc(50% - 5px) !important; flex-grow: 0 !important; }
}

/* ---------- Raster wie im Original (Contao): Textspalte 690 px, linksbündig ---------- */
body { line-height: 1.7; }
@media (max-width: 992px) { body { font-size: 14px; } }
.mi-section :where(p, li) { line-height: 1.7; }
.mi-section:not(.wp-block-cover).is-layout-constrained > :is(p, ul.wp-block-list, ol.wp-block-list, h2:not(.mi-title), h3, h4, .mi-text, .mi-subheadline, figure.wp-block-image:not(.alignwide):not(.alignfull)):not(.has-text-align-center) {
	max-width: 690px !important;
	margin-left: max(0px, calc((100% - 1140px) / 2)) !important;
	margin-right: auto !important;
}
.mi-section > h2:not(.mi-title) + * { margin-block-start: 25px; }
.mi-section > h3 + * { margin-block-start: 15px; }
:where(.mi-section, .mi-glossar-entry) h2:not(.mi-title) { font-size: 1.9em; text-transform: none; }
:where(.mi-section, .mi-glossar-entry) h3 { font-size: 1.6em; }
.mi-section > .mi-gap-before, .mi-flow-2col > .mi-gap-before { margin-block-start: 48px !important; } /* im Original: leerer Absatz als Abstand */
.mi-headline .mi-title, .mi-title { font-size: 2.8125rem !important; }
@media (max-width: 767px) {
	.mi-headline .mi-title, .mi-title { font-size: 1.8em !important; }
}

/* Listen mit Haken wie im Original */
.mi-section ul.wp-block-list { list-style: none; }
.mi-section ul.wp-block-list > li { position: relative; }
.mi-section ul.wp-block-list > li::before { content: ""; position: absolute; left: -20px; top: 50%; width: 1rem; height: 1rem; transform: translateY(-50%); background: var(--mi-blue); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat; }
.mi-section--blue ul.wp-block-list > li::before { background: #fff; }
/* Startseite: Einleitungstext kursiv wie im Original */
.mi-start .mi-content > .mi-section:not(.wp-block-cover):first-of-type .mi-flow-2col > p { font-style: italic; }

/* ---------- Feinabgleich 1.1.3: Größen wie im Original (gemessen gegen motel-isar.de) ---------- */
@media (min-width: 782px) { .mi-header { padding-top: 17px; padding-bottom: 17px; } } /* Handy-Header bleibt wie gehabt */

/* Hero */
.mi-hero__kicker { padding: 15px !important; line-height: 1.2; margin-bottom: 0.6rem !important; }
.mi-hero__title { padding: 15px !important; line-height: 1.88 !important; }
.mi-hero__badge a { box-sizing: border-box; width: 160px; height: 160px; padding: 28px; font-size: 1.1em; }
.mi-hero__badge strong { font-size: 3em; }
.mi-hero .mi-booking .wp-block-button__link { box-sizing: border-box; width: 300px; max-width: 85vw; padding: 25px !important; font-size: 1.2em; line-height: normal; }

/* Überschriften-Block */
.mi-kicker { font-size: 1em !important; line-height: normal; }
.mi-title, .mi-headline .mi-title { line-height: normal !important; }

/* Bild-/Parallax-Abschnitte: Höhe ergibt sich aus dem Inhalt (Original: 80 px + Text + 80 px) */
.wp-block-cover.mi-section--image { min-height: 0 !important; padding-left: 30px !important; padding-right: 30px !important; }
.mi-section--image .mi-parallax-small { font-size: 1.6em; line-height: 1.2; padding: 10px 20px; margin-top: 2px !important; }
.mi-section--image .mi-parallax-big { font-size: 4em; line-height: 1.33; padding: 10px 20px; margin-top: 18px !important; margin-bottom: 16px !important; }

/* Partner-Boxen */
.mi-section .wp-block-columns { gap: 60px; }
.mi-box { min-height: 236px !important; }

/* Anfahrtskarte: volle Breite, 455 px hoch, ohne Rahmen, 50 px Abstand wie im Original */
.mi-section > .mi-map { max-width: none !important; margin-top: 50px !important; margin-left: calc(var(--wp--style--root--padding-left, 30px) * -1) !important; margin-right: calc(var(--wp--style--root--padding-right, 30px) * -1) !important; }
.mi-map iframe { box-sizing: border-box; height: 455px; border: 0; }
.mi-map__consent { border: 0; }
.mi-map__below { margin: 0 !important; padding: 0 var(--wp--style--root--padding-left, 30px); font-size: 0.8333em; line-height: 1.2; }
.mi-map__below a { color: var(--mi-dark); }
.mi-map:not(.is-loaded) .mi-map__below { display: none; }

/* Zimmer-ABC */
.mi-glossar__list, .mi-glossar__alpha { max-width: 678px; }
.mi-glossar--akkordeon .mi-glossar__accordion { max-width: none; } /* Akkordeon über die volle Inhaltsbreite */
.mi-glossar--akkordeon .mi-acc__body { max-width: 860px; }
.mi-glossar__list { border-top: 0; }
.mi-glossar__list li { border-top: 1px solid #666; border-bottom: 0; }
.mi-glossar__list li:last-child { border-bottom: 1px solid #666; }
.mi-glossar__list a { padding: 20px 0 35px; font-size: 1.35em; line-height: normal; }
.mi-glossar-entry > * { max-width: 690px; }
.mi-glossar-entry > .wp-block-post-content { max-width: 690px; }
.mi-glossar-entry__title { font-size: 2.5em !important; line-height: normal; }

/* Kontaktformular */
.mi-form input, .mi-form textarea { padding: 15px; }

@media (max-width: 767px) {
	.mi-hero__content > .mi-hero__badge { display: none; } /* im Original auf dem Handy ausgeblendet */
	.mi-hero__kicker { padding: 15px !important; }
	.mi-section--image .mi-parallax-small { font-size: 1.1em; }
	.mi-section--image .mi-parallax-big { font-size: 2.2em; }
	.mi-glossar-entry__title { font-size: 1.8em !important; }
	.mi-box { min-height: 226px !important; }
}
@media (min-width: 782px) {
	/* Spaltenumbruch: Abstand am Spaltenende entfällt (wie im Original) */
	.mi-flow-2col > :has(+ :is(h2, h3):not(:first-child)) { margin-bottom: 0 !important; }
}
/* Einfache Überschrift (Contao "Überschrift", kein Titel-Block): normale H2 wie im Original */
.mi-section > h2.mi-title { font-size: 1.9em !important; text-transform: none; line-height: normal !important; }
.mi-section > h2.mi-title + * { margin-block-start: 25px; }
/* mehrzeilige Listenpunkte (mit Zeilenumbrüchen) mit normaler Zeilenhöhe */
.mi-section ul.wp-block-list > li:has(br) { line-height: 1.7; }
/* zwei aufeinanderfolgende zweispaltige Textblöcke (Startseite) */
.mi-flow-2col + .mi-flow-2col { margin-block-start: 47px !important; }
@media (max-width: 781px) { .mi-flow-2col + .mi-flow-2col { margin-block-start: 84px !important; } }

/* ---------- Hero-Ausrichtung wie im Original (1.1.6) ----------
   Original: Textblock (Unterzeile + Titel) mittig im Bild, Titel-Hintergrund pro Zeile,
   Preis-Badge 100 px über dem Textblock am rechten Rand des 1200-px-Rasters,
   Buchungsbutton mit 12 % Abstand zum unteren Bildrand. */
.mi-hero__content { --mi-shift: -10px; position: relative; top: var(--mi-shift); display: block !important; width: min(100%, 1200px); max-width: none; padding: 0 !important; text-align: center; }
.mi-hero__content > .mi-hero__kicker { display: table; margin: 0 auto !important; }
.mi-hero__content > .mi-hero__title { display: inline !important; }
.mi-hero__content > .mi-hero__badge { position: absolute; top: -99px; right: 20px; margin: 0 !important; }
.mi-hero__content > .mi-hero__buttons { position: absolute; left: 0; right: 0; bottom: auto; top: calc(50% + 0.38 * max(420px, 100vh) - var(--mi-shift) - 10px); transform: translateY(-100%); }
.mi-hero__content:not(:has(> .mi-hero__kicker)) { --mi-shift: -1px; } /* Unterseiten: nur Titel */
@media (max-width: 781px) {
	.mi-hero__content > .mi-hero__buttons { top: calc(50% + 0.38 * 70vh - var(--mi-shift) - 10px); }
	.mi-hero__content > .mi-hero__kicker { margin-bottom: 8px !important; }
	.mi-hero__content:has(> .mi-hero__kicker) { --mi-shift: -6px; }
}

/* Menü wie im Original: 16,5 px, dunkel, beim Überfahren weiß */
.mi-nav { gap: 0 !important; }
.mi-nav .wp-block-navigation-item__content { font-size: 1.1em; padding: 10px !important; color: #343434 !important; letter-spacing: 0; }
.mi-nav .wp-block-navigation-item__content:hover,
.mi-nav .wp-block-navigation-item__content:focus-visible { color: #fff !important; }
.mi-nav .current-menu-item > .wp-block-navigation-item__content { color: #343434 !important; cursor: default; }
.mi-nav .current-menu-item > .wp-block-navigation-item__content:hover { color: #fff !important; }
.mi-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { padding: 0.4rem 0 !important; }

/* Footer wie im Original: Copyright und Links weiß, 0,75 em */
.mi-footer__copy { padding: 15px 30px !important; }
.mi-footer__copy .mi-copyright, .mi-footer__copy .mi-copyright a { color: #fff !important; font-size: 0.75em !important; line-height: normal; }
.mi-footer__links { padding: 12px 30px !important; }
.mi-footer__links p, .mi-footer__links a { font-size: 0.75em !important; font-weight: 400; line-height: normal; }
.mi-footer__links p a { font-size: 1em !important; }
.mi-footer__links a:hover { opacity: 0.7; }
.mi-footer__links { background-color: #38ace6 !important; }
.mi-nav .wp-block-navigation-item__content { line-height: normal; }
@media (min-width: 782px) { .mi-header__inner { padding-left: 15px; padding-right: 15px; } } /* Raster des Originals: Logo/Menü 15 px eingerückt */
@media (min-width: 782px) {
	.mi-header__right { gap: 20px !important; }
	.mi-header__contact { font-size: 1em; }
	.mi-logo { margin-top: -4px !important; }
}

/* Text-Auszeichnungen wie im Original: fett = Schriftstärke 400 (Fließtext ist 300), Links dunkelgrau */
:where(.mi-content, .mi-glossar-entry, .mi-acc__body) :is(strong, b) { font-weight: 400; }
:where(.mi-content, .mi-glossar-entry) :is(h1, h2, h3, h4) :is(strong, b) { font-weight: 700; }
:where(.mi-content, .mi-glossar-entry) :is(p, li, td) a:not(.wp-block-button__link) { color: #343434; }
:where(.mi-content, .mi-glossar-entry) :is(p, li, td) a:not(.wp-block-button__link):hover { color: var(--mi-blue); }
.mi-section--blue :is(p, li) a:not(.wp-block-button__link) { color: #343434 !important; }
.mi-section--blue :is(p, li) a:not(.wp-block-button__link):hover { color: #fff !important; }

/* Café-Seite „Eine Auswahl unserer Leistungen“: Listenpunkt mit mehreren Zeilen wie im Original
   (dort einzelne Absätze: 37,5 px Zeilenabstand, 20 px weiter eingerückt) und kleiner Hinweistext */
.mi-section ul.wp-block-list > li:has(br) { line-height: 2.5; margin-left: 20px; }
.mi-section > p.mi-fussnote { font-size: 0.9em; margin-block-start: 43px; }
.mi-gallery.wp-block-gallery { padding: 25px 0 30px; }
.mi-section > .mi-headline:has(.mi-subheadline) + * { margin-block-start: 48px; }

/* Preis-Badge im Hero exakt wie im Original (1.1.9): Verlauf, weiße Roboto-Schrift, beim Überfahren 8° statt 15° gedreht */
.mi-hero .mi-hero__badge a,
.mi-hero .mi-hero__badge a:hover,
.mi-hero .mi-hero__badge a:focus-visible {
	display: block !important;
	box-sizing: border-box;
	width: 160px; height: 160px; padding: 28px;
	border-radius: 100%;
	background: #427a9d linear-gradient(to bottom, #427a9d 0%, #6099b2 100%) !important;
	color: #fff !important;
	font-family: var(--wp--preset--font-family--body, Roboto, sans-serif);
	font-size: 16.5px; font-weight: 300; line-height: normal;
	text-align: center; text-decoration: none !important;
	transition: all 300ms ease-in-out;
}
.mi-hero .mi-hero__badge a { transform: rotate(15deg); }
.mi-hero .mi-hero__badge a:hover, .mi-hero .mi-hero__badge a:focus-visible { transform: rotate(8deg); }
.mi-hero .mi-hero__badge strong { display: block; width: 100%; font-family: inherit; font-size: 45px; font-weight: 400; line-height: normal; color: #fff; }
@media (prefers-reduced-motion: reduce) { .mi-hero .mi-hero__badge a { transition: none; } }

/* Bild-Abschnitte: Abdunklung/Bild immer bündig (der allgemeine 12-px-Abstand zwischen Elementen verschob die Abdunklung nach unten -> 12 px Streifen) */
.wp-block-cover.mi-section > :is(.wp-block-cover__background, .wp-block-cover__image-background, .wp-block-cover__video-background) { margin: 0 !important; }

/* ---------- Speisekarte (Block motel-isar/speisekarte) ---------- */
.mi-menu { margin-block-start: 60px; }
.mi-menu__sections { column-count: 2; column-gap: 60px; }
.mi-menu__section { break-inside: avoid; margin: 0 0 40px; }
.mi-menu__title { position: relative; margin: 0 0 20px !important; padding-left: 40px; font-family: var(--mi-serif); font-size: 1.6em !important; font-weight: 400; text-transform: uppercase; color: var(--mi-dark); line-height: normal; }
.mi-menu__title::before { content: ""; position: absolute; left: 0; top: 50%; width: 30px; height: 2px; background: var(--mi-blue); }
.mi-menu__list { list-style: none; margin: 0 !important; padding: 0 !important; }
.mi-menu__item { display: flex; align-items: center; gap: 16px; margin: 0 0 14px !important; line-height: 1.5 !important; }
.mi-menu__text { flex: 1 1 auto; min-width: 0; }
.mi-menu__img { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #e2e2e2; }
.mi-menu__img--empty { box-shadow: none; }
.mi-menu__item::before { display: none !important; }
.mi-menu__row { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.mi-menu__name { font-weight: 400; color: var(--mi-dark); }
.mi-menu__dots { flex: 1 1 auto; min-width: 20px; border-bottom: 2px dotted #c4c4c4; transform: translateY(-4px); }
.mi-menu__price { white-space: nowrap; font-weight: 400; color: var(--mi-blue); }
.mi-menu__desc { margin: 2px 0 0; font-size: 0.9em; color: var(--mi-text); max-width: 85%; }
.mi-menu__tag svg { display: inline-block; width: 1em; height: 1em; vertical-align: -0.12em; }
.mi-menu__tag--vegetarisch svg { fill: #5f9a32; }
.mi-menu__tag--scharf svg { fill: #c8372d; }
.mi-menu__section-note { margin: 8px 0 0; font-size: 0.9em; font-style: italic; }
.mi-menu__note { display: flex; align-items: center; gap: 16px; margin: 10px 0 0 !important; font-family: var(--mi-serif); font-size: 1.15em; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mi-dark); }
.mi-menu__note::before, .mi-menu__note::after { content: ""; flex: 1 1 auto; height: 1px; background: #d5d5d5; }
@media (max-width: 781px) {
	.mi-menu__sections { column-count: 1; }
	.mi-menu__desc { max-width: none; }
}

/* Zimmer ABC als Akkordeon (1.2.0): Schrift wie die Liste des Originals, Sprungziel nicht unter dem Kopf */
.mi-glossar__accordion { border-top: 1px solid #666; }
.mi-acc { border-bottom: 1px solid #666; scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 130px); }
.mi-acc__title { font-size: 1.35em; color: #343434; padding: 20px 2.5rem 20px 0; line-height: normal; }
.mi-acc__body { padding: 0 0 24px; }
.mi-acc__body > :is(p, ul, ol) { max-width: 640px; }