/* Pension Mariposa (deobald-sr 1.4.0) – Gestaltung „Fünf Zimmer, fünf Charaktere“
   Nur für die Gestaltung „mariposa“ (Klasse m5-site). Grundlage bleiben
   zwei-orte.css und pension.css (Unterseiten); diese Datei setzt die neue
   Farb- und Schriftwelt und bringt Kopf, Fuß und die Startseite mit.
   Farben: Tinte #111821, Papier #F2EFE7, Weiß #FBFAF6, Blau #174D8D,
   Rost #C74F32, Ocker #D6AA36, Grün #356C62. Schriften Archivo und
   DM Serif Display (lokal, theme-fonts.css).
   Kontraste (WCAG): Tinte auf Papier 15,6:1 · gedämpft #5D646B auf Papier 5,2:1 ·
   Weiß auf Blau 8,6:1 · Weiß auf Rost dunkel #B3432A 5,3:1 (Rost #C74F32 nur
   als Schmuckfläche) · Weiß auf Grün 6,0:1 · Ocker hell #F1C65D auf Tinte
   11,0:1 · Tinte auf Ocker 8,0:1. Kleinste Schrift 11 px (Etiketten), Text ab 12 px. */

.sros-front.m5-site {
  --m5-ink: #111821;
  --m5-bone: #f2efe7;
  --m5-white: #fbfaf6;
  --m5-blue: #174d8d;
  --m5-blue-deep: #103a6c;
  --m5-rust: #c74f32;
  --m5-rust-deep: #b3432a;
  --m5-ochre: #d6aa36;
  --m5-ochre-hell: #f1c65d;
  --m5-green: #356c62;
  --m5-stone: #cbc8bf;
  --m5-muted: #5d646b;
  --m5-sans: "Archivo", Arial, sans-serif;
  --m5-serif: "DM Serif Display", Georgia, serif;
  --m5-head-h: 90px;
  /* Werte für die gemeinsame Grundlage (Unterseiten) */
  --kz-paper: var(--m5-bone);
  --kz-paper2: #e6e2d7;
  --kz-white: var(--m5-white);
  --kz-ink: var(--m5-ink);
  --kz-muted: var(--m5-muted);
  --kz-text2: #3a424b;
  --kz-line: #b9b5aa;
  --kz-em: var(--m5-blue);
  --kz-deep: var(--m5-blue-deep);
  --kz-cta: var(--m5-blue);
  --kz-cta-ink: #fff;
  --kz-focus: var(--m5-blue);
  --kz-sans: var(--m5-sans);
  --kz-serif: var(--m5-sans);
  --sr-lb-accent: var(--m5-blue);
  --t-accent: var(--m5-blue);
  --t-accent-text: var(--m5-blue);
  --t-accent-soft: #e3e9f1;
  --t-accent-soft-ink: var(--m5-blue-deep);
  --t-on-accent: #fff;
  --t-second: var(--m5-ink);
  --t-font-body: var(--m5-sans);
  --t-font-head: var(--m5-sans);
  --t-weight-head: 700;
  --t-track: -.045em;
  line-height: 1.5;
}
html:has(.m5-site) { scroll-padding-top: 100px; }
@media (prefers-reduced-motion: no-preference) { html:has(.m5-site) { scroll-behavior: smooth; } }
.m5-site h1, .m5-site h2, .m5-site h3 { font-family: var(--m5-sans); font-weight: var(--ty-strong, 700); letter-spacing: -.045em; }
.m5-site h1 em, .m5-site h2 em { font-family: var(--m5-serif); font-weight: 400; letter-spacing: -.035em; }
.m5-shell { width: min(1380px, calc(100% - 64px)); margin: 0 auto; }
.m5-label { margin: 0; font-family: var(--m5-sans); font-size: var(--ty-kicker, 11px); font-weight: var(--ty-strong, 700); letter-spacing: .2em; line-height: 1.5; text-transform: uppercase; }

/* ---------- Kopf ---------- */
.m5-site .sros-front-head.m5-head { position: sticky; top: 0; z-index: 60; background: var(--m5-ink); color: #fff; border: 0; box-shadow: none; backdrop-filter: none; transition: background-color .3s ease; }
.m5-head-in { height: var(--m5-head-h); display: flex; align-items: center; justify-content: space-between; gap: 35px; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.m5-site a.m5-brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; color: #fff; font-size: 21px; font-weight: var(--ty-strong, 700); letter-spacing: -.05em; line-height: 1.1; text-decoration: none; }
.m5-brand img { width: 38px; height: 38px; display: block; }
.m5-brand small { display: block; margin-top: 3px; font-size: 11px; font-weight: var(--ty-regular, 500); letter-spacing: .18em; text-transform: uppercase; }
.m5-site .m5-nav { display: flex; align-items: center; gap: 29px; }
.m5-site .m5-nav a { color: #fff; font-size: var(--ty-help, 14px); font-weight: 400; text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; }
.m5-site .m5-nav a::after { display: none !important; }
.m5-site .m5-nav a:hover, .m5-site .m5-nav a[aria-current] { border-bottom-color: currentColor; }
.m5-site .m5-nav a.m5-nav-book { margin-left: 14px; padding: 12px 15px; border: 1px solid currentColor; font-size: var(--ty-btn, 13px); font-weight: 600; }
.m5-site .m5-nav a.m5-nav-book:hover { background: #fff; border-color: #fff; color: var(--m5-ink); }
.m5-site .m5-head a:focus-visible, .m5-site .m5-head button:focus-visible, .m5-site .m5-head summary:focus-visible { outline: 3px solid var(--m5-ochre-hell); outline-offset: 3px; }
.m5-site .m5-lang summary { color: #fff; }
.m5-site .m5-lang ul a { color: var(--m5-ink); }
.m5-site .m5-menu { display: none; }
/* Startseite: Kopf liegt auf dem Einstiegsbild und wird nach dem Scrollen fest
   und dunkel (Klasse ew-scrolled setzt esswiese.js). Ohne JavaScript bleibt
   er von Anfang an dunkel und gut lesbar. */
.m5-site.m5-home .sros-front-head.m5-head { position: fixed; left: 0; right: 0; }
.m5-site.m5-home.ew-nav-ready:not(.ew-scrolled):not(.ew-menu-open) .sros-front-head.m5-head { background: linear-gradient(180deg, rgba(8, 14, 20, .62), rgba(8, 14, 20, 0)); }
.m5-site.m5-home.ew-nav-ready:not(.ew-scrolled):not(.ew-menu-open) .m5-head-in { border-bottom-color: rgba(255, 255, 255, .45); }
.m5-site.ew-scrolled .m5-head-in { border-bottom-color: transparent; }
@media (max-width: 980px) {
  .sros-front.m5-site { --m5-head-h: 74px; }
  .m5-shell { width: min(1380px, calc(100% - 34px)); }
  .m5-site .m5-menu:not([hidden]) { display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(255, 255, 255, .7); background: transparent; color: #fff; padding: 9px 14px; font: 600 var(--ty-help, 14px) var(--m5-sans); cursor: pointer; }
  .m5-site.ew-nav-ready .m5-nav[hidden] { display: none; }
  .m5-site.ew-nav-ready .m5-nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--m5-ink); padding: 6px 17px 22px; box-shadow: 0 22px 40px rgba(0, 0, 0, .3); max-height: calc(100vh - var(--m5-head-h)); overflow-y: auto; }
  .m5-site.ew-nav-ready .m5-nav a { padding: 15px 0; border-bottom: 1px solid rgba(255, 255, 255, .16); font-size: var(--ty-body, 18px); }
  .m5-site.ew-nav-ready .m5-nav a.m5-nav-book { margin: 16px 0 0; padding: 15px; text-align: center; border: 1px solid #fff; }
  /* Ohne JavaScript: Menü umbrechen statt abschneiden */
  .m5-site:not(.ew-nav-ready) .m5-head-in { height: auto; min-height: var(--m5-head-h); flex-wrap: wrap; padding: 12px 0; gap: 10px 20px; }
  .m5-site:not(.ew-nav-ready) .m5-nav { flex-wrap: wrap; gap: 4px 18px; }
  .m5-site:not(.ew-nav-ready) .m5-nav a.m5-nav-book { margin-left: 0; padding: 8px 12px; }
}

/* ---------- Einstieg mit Türen ---------- */
.m5 { background: var(--m5-bone); color: var(--m5-ink); font-family: var(--m5-sans); }
.m5 img { display: block; }
.m5 a { text-decoration: none; }
.m5-hero { position: relative; height: 100svh; min-height: 760px; overflow: hidden; background: var(--m5-ink); color: #fff; }
.m5-doors { display: flex; height: 100%; margin: 0; padding: 0; list-style: none; }
.m5-door { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-right: 1px solid rgba(255, 255, 255, .35); transition: flex-grow .55s cubic-bezier(.2, .75, .25, 1); }
.m5-door:last-child { border-right: 0; }
.m5-door:hover, .m5-door:focus-within, .m5-door.is-active { flex-grow: 2.15; }
.m5-site .m5-door a { position: absolute; inset: 0; display: block; color: #fff; }
.m5-site .m5-door a:focus-visible { outline: 3px solid var(--m5-ochre-hell); outline-offset: -7px; }
.m5-door img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) brightness(.6); transition: filter .4s, transform .7s; }
.m5-door:hover img, .m5-door:focus-within img, .m5-door.is-active img { filter: saturate(.92) brightness(.8); transform: scale(1.025); }
.m5-door a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8, 14, 20, .88), rgba(8, 14, 20, 0) 55%), linear-gradient(180deg, rgba(8, 14, 20, .5), rgba(8, 14, 20, 0) 24%); }
.m5-door-top { position: absolute; z-index: 2; left: 20px; right: 20px; top: calc(var(--m5-head-h) + 30px); display: flex; justify-content: space-between; gap: 8px; font-size: var(--ty-kicker, 11px); font-weight: var(--ty-regular, 500); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.m5-door-name { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 122px; font-size: var(--ty-title, clamp(19px, 2vw, 33px)); font-weight: 600; letter-spacing: -.05em; line-height: .95; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; text-transform: uppercase; }
.m5-door:hover .m5-door-name, .m5-door:focus-within .m5-door-name, .m5-door.is-active .m5-door-name { writing-mode: horizontal-tb; transform: none; white-space: normal; bottom: 152px; font-size: var(--ty-title, clamp(30px, calc(19vw / var(--m5-n, 5)), 62px)); }
.m5-door-tag { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 122px; font-family: var(--m5-serif); font-size: var(--ty-body, 16px); line-height: 1.2; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m5-door:hover .m5-door-tag, .m5-door:focus-within .m5-door-tag, .m5-door.is-active .m5-door-tag { opacity: 1; transform: none; }
/* Schleier hinter dem Titel: Ocker und Weiß bleiben auf jedem Bild lesbar */
.m5-hero::after { content: ""; position: absolute; z-index: 3; inset: 0; pointer-events: none; background: radial-gradient(ellipse 46% 38% at 50% 45%, rgba(8, 14, 20, .5), rgba(8, 14, 20, 0) 100%); }
.m5-hero-title { position: absolute; z-index: 4; left: 50%; top: 45%; transform: translate(-50%, -50%); width: min(900px, 86vw); text-align: center; pointer-events: none; text-shadow: 0 6px 30px rgba(0, 0, 0, .55); }
.m5-hero-title .m5-label { letter-spacing: .22em; }
.m5-hero-title h1 { margin: 18px 0; font-size: var(--ty-display, clamp(76px, 11vw, 170px)); line-height: .72; letter-spacing: -.075em; color: #fff; }
.m5-hero-title h1 em { display: block; padding-bottom: .12em; color: var(--m5-ochre-hell); font-style: italic; letter-spacing: -.035em; }
.m5-hero-lead { margin: 22px auto 0; max-width: 38ch; font-family: var(--m5-serif); font-size: var(--ty-body, 18px); line-height: 1.5; }
.m5-star { position: absolute; z-index: 5; right: 30px; top: calc(var(--m5-head-h) + 22px); width: 98px; height: 98px; display: grid; place-items: center; background: var(--m5-rust); clip-path: polygon(50% 0, 64% 29%, 100% 19%, 78% 50%, 100% 81%, 64% 71%, 50% 100%, 36% 71%, 0 81%, 22% 50%, 0 19%, 36% 29%); font-family: var(--m5-serif); font-size: var(--ty-title, 29px); color: #fff; pointer-events: none; }
.m5-hero--leer .m5-hero-title { position: relative; left: auto; top: auto; transform: none; margin: 0 auto; padding-top: 30vh; }

/* Aktionsleiste */
.m5-action { position: absolute; z-index: 6; left: 50%; bottom: 25px; transform: translateX(-50%); width: min(1000px, calc(100% - 64px)); display: grid; grid-template-columns: 1.3fr 1fr 1fr auto; background: var(--m5-bone); color: var(--m5-ink); box-shadow: 0 22px 50px rgba(0, 0, 0, .25); }
.m5-action-cell { margin: 0; padding: 16px 22px; border-right: 1px solid rgba(17, 24, 33, .18); min-width: 0; }
.m5-action-cell > span, .m5-action-cell label { display: block; margin-bottom: 4px; font-size: var(--ty-label, 11px); font-weight: var(--ty-regular, 500); letter-spacing: .16em; text-transform: uppercase; color: var(--m5-muted); }
.m5-action-cell strong, .m5-action-cell input { font-family: var(--m5-serif); font-weight: 400; font-size: var(--ty-input, 19px); line-height: 1.3; color: var(--m5-ink); }
.m5-action-cell input { width: 100%; min-height: 26px; padding: 0; border: 0; border-radius: 0; background: none; }
.m5-action-go { border: 0; background: var(--m5-blue); color: #fff; padding: 0 26px; font: 600 var(--ty-btn, 14px) var(--m5-sans); cursor: pointer; }
.m5-action-go:hover { background: var(--m5-blue-deep); }
.m5-site .m5-action-go:focus-visible { outline: 3px solid var(--m5-ochre-hell); outline-offset: 3px; }

/* ---------- Aussage ---------- */
.m5-statement { padding: 150px 0 130px; }
.m5-statement-grid { display: grid; grid-template-columns: 2.4fr 7.6fr 2fr; gap: 55px; }
.m5-statement h2 { margin: 0; font-size: var(--ty-h2, clamp(46px, 7vw, 102px)); line-height: .9; letter-spacing: -.06em; overflow-wrap: break-word; }
.m5-statement h2 em { color: var(--m5-blue); font-style: italic; }
.m5-statement-aside { max-width: 46ch; margin-top: 56px; padding-top: 18px; border-top: 7px solid var(--m5-rust); font-family: var(--m5-serif); font-size: var(--ty-body, 17px); line-height: 1.6; }
.m5-statement-aside p { margin: 0 0 12px; }
.m5-statement-number { align-self: start; margin: 0; padding: 22px; background: var(--m5-ochre); color: var(--m5-ink); }
.m5-statement-number strong { display: block; font-size: var(--ty-title, 62px); font-weight: var(--ty-strong, 700); line-height: 1; letter-spacing: -.05em; }
.m5-statement-number span { display: block; margin-top: 8px; font-size: var(--ty-kicker, 11px); font-weight: var(--ty-regular, 500); line-height: 1.45; letter-spacing: .12em; text-transform: uppercase; }

/* ---------- Zimmerlabor ---------- */
.m5-lab-section { padding: 120px 0 140px; background: var(--m5-ink); color: #fff; }
.m5-lab-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 55px; }
.m5-lab-head h2 { margin: 15px 0 0; font-size: var(--ty-h2, clamp(42px, 6vw, 88px)); line-height: .9; color: #fff; }
.m5-lab-head h2 em { color: var(--m5-ochre-hell); font-style: italic; }
.m5-lab-head > p { margin: 0; max-width: 34ch; font-family: var(--m5-serif); font-size: var(--ty-body, 17px); line-height: 1.5; color: rgba(255, 255, 255, .72); }
.m5-lab { display: grid; grid-template-columns: 1fr; gap: 24px; color: var(--m5-ink); }
.m5-lab.is-ready { grid-template-columns: 2.2fr 9.8fr; gap: 0; min-height: 660px; background: var(--m5-white); }
.m5-tabs { display: flex; flex-direction: column; background: #202a36; }
.m5-tabs[hidden] { display: none; }
.m5-tab { flex: 1; display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: center; padding: 13px 20px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .17); border-radius: 0; background: transparent; color: rgba(255, 255, 255, .72); font-family: var(--m5-sans); text-align: left; cursor: pointer; }
.m5-tab:last-child { border-bottom: 0; }
.m5-tab b { font-size: var(--ty-min, 12px); font-weight: var(--ty-strong, 700); color: var(--m5-ochre); }
.m5-tab strong { font-size: var(--ty-kicker, 13px); font-weight: var(--ty-strong, 700); letter-spacing: .04em; text-transform: uppercase; }
.m5-tab:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.m5-tab[aria-selected="true"] { background: var(--m5-blue); color: #fff; }
.m5-tab[aria-selected="true"] b { color: #fff; }
.m5-tab--2[aria-selected="true"] { background: var(--m5-rust-deep); }
.m5-tab--3[aria-selected="true"] { background: #1b1b1b; }
.m5-tab--4[aria-selected="true"] { background: var(--m5-green); }
.m5-site .m5-tab:focus-visible { outline: 3px solid var(--m5-ochre-hell); outline-offset: -4px; }
.m5-panels { display: grid; gap: 24px; min-width: 0; }
.m5-panel { display: grid; grid-template-columns: 6.8fr 3fr; min-height: 560px; background: var(--m5-white); }
.m5-lab.is-ready .m5-panel { min-height: 660px; }
.m5-panel[hidden] { display: none; }
.m5-site .m5-panel:focus-visible { outline: 3px solid var(--m5-ochre-hell); outline-offset: 3px; }
.m5-visual { position: relative; overflow: hidden; min-height: 320px; background: #202a36; }
.m5-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.m5-visual::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 18px rgba(255, 255, 255, .16); pointer-events: none; }
.m5-code { position: absolute; left: 24px; bottom: 20px; font-size: var(--ty-display, 120px); font-weight: var(--ty-strong, 700); line-height: .75; letter-spacing: -.09em; color: rgba(255, 255, 255, .6); mix-blend-mode: overlay; pointer-events: none; }
.m5-info { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: 38px 32px; border-left: 1px solid rgba(17, 24, 33, .12); min-width: 0; }
.m5-info .m5-label { color: var(--m5-muted); }
.m5-info h3 { margin: 12px 0 20px; font-size: var(--ty-title, clamp(34px, 3.1vw, 45px)); line-height: .92; letter-spacing: -.06em; overflow-wrap: break-word; text-transform: uppercase; }
.m5-tagline { margin: 0; font-family: var(--m5-serif); font-size: var(--ty-lead, 21px); line-height: 1.4; }
.m5-description { margin: 22px 0 0; font-family: var(--m5-serif); font-size: var(--ty-small, 15px); line-height: 1.65; color: var(--m5-muted); }
.m5-facts { margin: 30px 0 0; border-top: 1px solid rgba(17, 24, 33, .2); }
.m5-facts div { display: flex; justify-content: space-between; gap: 15px; padding: 10px 0; border-bottom: 1px solid rgba(17, 24, 33, .12); font-size: var(--ty-min, 13px); line-height: 1.4; }
.m5-facts dt { flex: 0 0 auto; color: var(--m5-muted); }
.m5-facts dd { margin: 0; font-weight: var(--ty-strong, 700); text-align: right; }
.m5-more { margin: 18px 0 0; font-size: var(--ty-min, 13px); }
.m5-site .m5-more a { color: var(--m5-blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.m5-site a.m5-select { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 15px 17px; background: var(--m5-ink); color: #fff; font-size: var(--ty-help, 14px); font-weight: 600; }
.m5-site a.m5-select:hover { background: var(--m5-blue); }
.m5-site a.m5-select:focus-visible { outline: 3px solid var(--m5-blue); outline-offset: 3px; }

/* ---------- Lage ---------- */
.m5-city { padding: 140px 0; background: var(--m5-bone); }
.m5-city-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 80px; align-items: center; }
.m5-city-copy h2 { margin: 20px 0 32px; font-family: var(--m5-serif); font-weight: 400; font-size: var(--ty-h2, clamp(44px, 6.4vw, 96px)); line-height: .88; letter-spacing: -.035em; }
.m5-city-copy h2 em { color: var(--m5-blue); }
.m5-city-lead { margin: 0; max-width: 39ch; font-family: var(--m5-serif); font-size: var(--ty-body, 19px); line-height: 1.6; }
.m5-city-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 42px 0 0; }
.m5-city-facts div { padding: 18px 18px 18px 0; border-top: 1px solid var(--m5-ink); }
.m5-city-facts dt { font-size: var(--ty-title, 31px); font-weight: var(--ty-strong, 700); line-height: 1.2; letter-spacing: -.04em; }
.m5-city-facts dd { margin: 6px 0 0; font-size: var(--ty-kicker, 11px); font-weight: var(--ty-regular, 500); line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; color: var(--m5-muted); }
.m5-city-link { margin: 30px 0 0; font-size: var(--ty-help, 14px); font-weight: var(--ty-strong, 700); }
.m5-site .m5-city-link a { color: var(--m5-ink); text-decoration: underline; text-underline-offset: 4px; }
.m5-map { position: relative; margin: 0 18px 18px 0; aspect-ratio: 1.07; overflow: hidden; background: #d8d5cb; border: 14px solid var(--m5-white); box-shadow: 18px 18px 0 var(--m5-ochre); }
.m5-map::before, .m5-map::after { content: ""; position: absolute; border-radius: 50%; background: rgba(23, 77, 141, .13); }
.m5-map::before { width: 80%; aspect-ratio: 1; left: -21%; top: -29%; }
.m5-map::after { width: 47%; aspect-ratio: 1; right: -11%; bottom: -14%; background: rgba(199, 79, 50, .16); }
.m5-map-street { position: absolute; background: #8c8d88; }
.m5-map-street:nth-child(1) { height: 9px; width: 130%; left: -15%; top: 41%; transform: rotate(-12deg); }
.m5-map-street:nth-child(2) { height: 7px; width: 110%; left: 0; top: 60%; transform: rotate(18deg); }
.m5-map-street:nth-child(3) { width: 8px; height: 130%; left: 61%; top: -15%; transform: rotate(9deg); }
.m5-map-pin { position: absolute; z-index: 1; left: 53%; top: 44%; width: 90px; height: 90px; margin: -45px 0 0 -45px; display: grid; place-items: center; border-radius: 50%; border: 10px solid var(--m5-white); background: var(--m5-blue); color: #fff; font-family: var(--m5-serif); font-size: var(--ty-title, 33px); box-shadow: 0 15px 30px rgba(17, 24, 33, .2); }
.m5-map-label { position: absolute; z-index: 1; left: 53%; top: 61%; transform: translateX(-50%); max-width: 88%; padding: 12px 15px; background: var(--m5-ink); color: #fff; font-size: var(--ty-label, 12px); line-height: 1.5; text-align: center; }
.m5-map-label strong { font-weight: var(--ty-strong, 700); }
/* Echte Karte (1.4.11) */
.m5-map--karte::before, .m5-map--karte::after { content: none; }
.m5-map--karte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 25%; }
.m5-map--karte .m5-map-label { left: 16px; top: auto; bottom: 30px; transform: none; max-width: calc(100% - 32px); }
.m5-map--karte .karte-quelle { position: absolute; z-index: 1; right: 0; bottom: 0; padding: 3px 8px; background: rgba(255, 255, 255, .85); font-size: 11px; line-height: 1.4; color: #333; }
.m5-site .m5-map--karte .karte-quelle a { display: inline; color: inherit; font-weight: 400; }
.m5-site .m5-map-label a { display: block; color: var(--m5-ochre-hell); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.m5-site .m5-map-label a:focus-visible { outline: 3px solid var(--m5-ochre-hell); outline-offset: 2px; }

/* ---------- Buchung ---------- */
.m5-booking { padding: 130px 0; background: var(--m5-blue); color: #fff; }
.m5-booking-head { display: grid; grid-template-columns: 7fr 5fr; gap: 50px; align-items: end; margin-bottom: 55px; }
.m5-booking-head h2 { margin: 0; font-size: var(--ty-h2, clamp(48px, 7.5vw, 110px)); line-height: .82; color: #fff; }
.m5-booking-head h2 em { display: inline-block; padding-bottom: .1em; font-style: italic; }
.m5-booking-head p { margin: 0; max-width: 38ch; font-family: var(--m5-serif); font-size: var(--ty-body, 19px); line-height: 1.55; }
.m5-board { background: var(--m5-white); color: var(--m5-ink); box-shadow: 16px 16px 0 var(--m5-ink); margin-right: 16px; }
.m5-board-inputs { display: grid; grid-template-columns: 1.15fr 1.15fr .8fr 1.2fr auto; border-bottom: 1px solid rgba(17, 24, 33, .2); }
.m5-board-inputs--extern { grid-template-columns: 1.15fr 1.15fr 1.3fr auto; }
.m5-field { margin: 0; padding: 19px 20px; border-right: 1px solid rgba(17, 24, 33, .18); min-width: 0; }
.m5-field label { display: block; margin-bottom: 8px; font-size: var(--ty-label, 11px); font-weight: var(--ty-regular, 500); letter-spacing: .16em; text-transform: uppercase; color: var(--m5-muted); }
.m5-field input, .m5-field select { width: 100%; min-height: 28px; padding: 0; border: 0; border-radius: 0; background-color: transparent; color: var(--m5-ink); font: 600 var(--ty-input, 16px) var(--m5-sans); }
.m5-site .m5-field input:focus-visible, .m5-site .m5-field select:focus-visible, .m5-site .m5-action-cell input:focus-visible { outline: 3px solid var(--m5-blue); outline-offset: 4px; }
.m5-board-go { border: 0; background: var(--m5-rust-deep); color: #fff; padding: 0 28px; min-height: 58px; font: 600 var(--ty-btn, 15px) var(--m5-sans); cursor: pointer; }
.m5-board-go:hover { background: var(--m5-ink); }
.m5-site .m5-board-go:focus-visible { outline: 3px solid var(--m5-ink); outline-offset: 3px; }
.m5-result { display: grid; grid-template-columns: 150px 1fr auto auto; gap: 24px; align-items: center; padding: 24px; border-bottom: 1px solid rgba(17, 24, 33, .12); }
.m5-result[hidden], .m5-wish[hidden] { display: none; }
.m5-result img { width: 150px; height: 100px; object-fit: cover; }
.m5-result-name { margin: 0; min-width: 0; }
.m5-result-kicker { display: block; margin-bottom: 6px; font-size: var(--ty-kicker, 11px); font-weight: var(--ty-regular, 500); letter-spacing: .16em; text-transform: uppercase; color: var(--m5-muted); }
.m5-result-name strong { display: block; font-size: var(--ty-title, 29px); font-weight: var(--ty-strong, 700); line-height: 1.05; letter-spacing: -.05em; text-transform: uppercase; }
.m5-result-name > span:last-child { display: block; margin-top: 7px; font-size: var(--ty-min, 13px); color: var(--m5-muted); }
.m5-result-price { margin: 0; text-align: right; }
.m5-result-price strong { display: block; font-family: var(--m5-serif); font-size: var(--ty-h3, 25px); font-weight: 400; line-height: 1.2; }
.m5-result-price span { font-size: var(--ty-kicker, 11px); font-weight: var(--ty-regular, 500); letter-spacing: .12em; text-transform: uppercase; color: var(--m5-muted); }
.m5-result.is-belegt { opacity: .62; }
.m5-site a.m5-result-go { padding: 14px 15px; background: var(--m5-ink); color: #fff; font-size: var(--ty-help, 14px); font-weight: 600; white-space: nowrap; }
.m5-site a.m5-result-go:hover { background: var(--m5-blue); }
.m5-board-foot { margin: 0; padding: 18px 24px 20px; font-size: var(--ty-min, 13px); line-height: 1.55; color: var(--m5-muted); }
.m5-booking-more { display: grid; grid-template-columns: 7fr 5fr; gap: 50px; margin-top: 54px; font-size: var(--ty-help, 14px); line-height: 1.6; }
.m5-booking-more p { margin: 0; max-width: 52ch; color: rgba(255, 255, 255, .88); }
.m5-points { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 30px; margin: 0; padding: 0; list-style: none; }
.m5-points li { padding: 12px 0 0; border-top: 1px solid rgba(255, 255, 255, .45); font-weight: 600; }

/* ---------- Verbindungen ---------- */
.m5-connections { display: grid; grid-template-columns: 1fr 1fr; }
.m5-connections--1 { grid-template-columns: 1fr; }
.m5-connections--3 { grid-template-columns: repeat(3, 1fr); }
.m5-connections--3 .m5-connection { min-height: 680px; }
.m5-connection { position: relative; min-height: 620px; overflow: hidden; background: var(--m5-ink); color: #fff; }
.m5-connection > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) brightness(.58); transition: transform .5s, filter .5s; }
.m5-connection:hover > img { transform: scale(1.025); filter: saturate(.88) brightness(.66); }
.m5-connection.has-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8, 14, 18, .86), rgba(8, 14, 18, .1) 70%); }
.m5-connection--nachbar:not(.has-image) { background: var(--m5-green); }
.m5-connection--nachbar:not(.has-image)::before { content: ""; position: absolute; width: min(520px, 110%); aspect-ratio: 1; left: 50%; top: 27%; transform: translate(-50%, -50%); border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%; }
.m5-word { position: absolute; inset: 7% 0 auto 0; height: 40%; display: grid; place-items: center; font-family: var(--m5-serif); font-style: italic; font-size: var(--ty-display, clamp(110px, 16vw, 240px)); line-height: 1; color: #e9cf9d; opacity: .88; }
.m5-connections--3 .m5-word, .m5-connections--4 .m5-word { font-size: var(--ty-display, clamp(96px, 11vw, 170px)); }
.m5-connection-copy { position: absolute; z-index: 2; left: 45px; right: 45px; bottom: 45px; }
.m5-connection-copy h2 { margin: 18px 0; font-size: var(--ty-h2, clamp(42px, 6vw, 86px)); line-height: .88; color: #fff; overflow-wrap: break-word; hyphens: auto; }
.m5-connections--3 .m5-connection-copy h2 { font-size: var(--ty-h2, clamp(30px, 2.9vw, 44px)); line-height: .95; }
.m5-connections--4 .m5-connection-copy h2 { font-size: var(--ty-h2, clamp(34px, 4vw, 60px)); }
.m5-connection-copy h2 em { font-style: italic; }
.m5-connection-copy p:not(.m5-label) { margin: 0; max-width: 38ch; font-family: var(--m5-serif); font-size: var(--ty-body, 17px); line-height: 1.5; }
.m5-site a.m5-connection-link { display: inline-flex; align-items: center; gap: 35px; margin-top: 20px; padding: 10px 0; border-bottom: 1px solid #fff; color: #fff; font-size: var(--ty-help, 14px); font-weight: 600; }
.m5-site a.m5-connection-link:hover { border-bottom-width: 3px; padding-bottom: 8px; }
.m5-site a.m5-connection-link:focus-visible { outline: 3px solid var(--m5-ochre-hell); outline-offset: 4px; }

/* ---------- Fuß ---------- */
.m5-foot { padding: 65px 0 28px; background: #0e141b; color: #fff; font-family: var(--m5-sans); }
.m5-foot-grid { display: grid; grid-template-columns: 4fr 3fr 3fr 3fr; gap: 50px; } /* Haus · Navigation · Orte · Rechtliches (1.4.8) */
.m5-foot-addr { margin: 18px 0 0; font-size: var(--ty-help, 14px); line-height: 1.6; color: rgba(255, 255, 255, .74); }
.m5-foot-brand { margin: 0; font-size: var(--ty-title, 48px); font-weight: var(--ty-strong, 700); line-height: .9; letter-spacing: -.06em; }
.m5-foot-col h2 { margin: 0 0 18px; font-family: var(--m5-sans); font-size: var(--ty-kicker, 11px); font-weight: var(--ty-strong, 700); letter-spacing: .2em; text-transform: uppercase; color: #e5bd55; }
.m5-foot-col ul { margin: 0; padding: 0; list-style: none; }
.m5-foot-col p, .m5-foot-col li { margin: 8px 0; font-size: var(--ty-help, 14px); line-height: 1.5; color: rgba(255, 255, 255, .74); }
.m5-site .m5-foot a { color: rgba(255, 255, 255, .74); text-decoration: none; }
.m5-site .m5-foot a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.m5-site .m5-foot a:focus-visible { outline: 3px solid var(--m5-ochre-hell); outline-offset: 2px; }
.m5-foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 30px; margin-top: 55px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .18); font-size: var(--ty-min, 12px); color: rgba(255, 255, 255, .64); }
.m5-foot-bottom nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.m5-site .m5-foot-bottom a { color: rgba(255, 255, 255, .74); }
.m5-site .m5-foot-credit a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Unterseiten im selben Stil ---------- */
.m5-site .sros-eyebrow { font-family: var(--m5-sans); font-size: var(--ty-kicker, 11px); font-weight: var(--ty-strong, 700); letter-spacing: .2em; color: var(--m5-ink); }
.m5-site .sr-page-hero h1, .m5-site .sr-detail-heading h1, .m5-site .sr-detail-head h1, .m5-site .sr-contact-intro h1 { font-family: var(--m5-sans); font-weight: var(--ty-strong, 700); letter-spacing: -.06em; line-height: .92; }
.m5-site .sr-page-hero h1 { font-size: var(--ty-h2, clamp(40px, 6vw, 86px)); }
.m5-site .sr-page--faq .sr-page-hero h1 { font-size: var(--ty-h2, clamp(34px, 3.6vw, 52px)); line-height: .98; }
.m5-site .sr-page-lead, .m5-site .sr-page-hero .sr-page-lead { font-family: var(--m5-serif); font-size: var(--ty-body, 20px); line-height: 1.5; color: var(--m5-ink); }
.m5-site .sr-page-body h2, .m5-site .sros-richtext h2 { font-size: var(--ty-h3, 24px); letter-spacing: -.03em; }
.m5-site .sros-richtext h3 { font-size: var(--ty-h4, 19px); letter-spacing: -.02em; }
.m5-site .sros-richtext a, .m5-site .sr-page-body a { color: var(--m5-blue); }
.m5-site .sr-faq-item summary { font-family: var(--m5-sans); font-size: var(--ty-body, 20px); font-weight: 600; letter-spacing: -.02em; }
.m5-site .sr-faq-item summary:hover { color: var(--m5-blue); }
.m5-site .sr-detail-heading { border-bottom: 7px solid var(--m5-rust); padding-bottom: 22px; }
.m5-site .sr-detail-heading h1 { font-size: var(--ty-h2, clamp(44px, 7vw, 104px)); text-transform: uppercase; }
.m5-site .sr-detail-heading h1 + p { font-family: var(--m5-serif); font-size: var(--ty-lead, 21px); color: var(--m5-ink); }
.m5-site .sr-section-head h2 { font-size: var(--ty-title, clamp(28px, 3vw, 40px)); line-height: 1; }
.m5-site .sros-bookbox:not(.kz-bookbox) { border-top: 7px solid var(--m5-blue); box-shadow: 12px 12px 0 var(--m5-ochre); }
.m5-site .sros-btn--primary, .m5-site .sros-btn.sros-btn--primary { background: var(--m5-blue); border-color: var(--m5-blue); color: #fff; font-family: var(--m5-sans); font-weight: 600; }
.m5-site .sros-btn--primary:hover { background: var(--m5-ink); border-color: var(--m5-ink); }
.m5-site .sr-breadcrumbs a { color: var(--m5-blue); }
/* Karten der Unterseiten (Rechtstexte, 404, Zahlung, Kundenkonto): kantig wie die Startseite */
.m5-site .sros-card { border: 0; border-radius: 0; background: var(--m5-white); box-shadow: none; }
.m5-site .sros-front-wrap > .sros-card { border-top: 7px solid var(--m5-blue); box-shadow: 12px 12px 0 var(--m5-ochre); margin-right: 12px; }
.m5-site .sros-card h1 { font-family: var(--m5-sans); font-weight: var(--ty-strong, 700); letter-spacing: -.045em; line-height: 1.02; overflow-wrap: break-word; hyphens: auto; }
.m5-site .sros-btn, .m5-site .sros-input, .m5-site .sros-select, .m5-site .sros-textarea { border-radius: 0; }
/* Kontaktseite */
.m5-site .sr-contact-intro { background: var(--m5-ink); color: #fff; border-bottom: 0; padding: 90px 20px 80px; }
.m5-site .sr-contact-intro h1 { color: #fff; font-size: var(--ty-h2, clamp(40px, 6vw, 86px)); }
.m5-site .mp-contact-phone { font-family: var(--m5-serif); font-style: italic; }
.m5-site .mp-contact-phone a { color: var(--m5-ochre-hell); }
.m5-site .sr-contact-company { color: rgba(255, 255, 255, .86); }
.m5-site .sr-contact-company strong { color: #fff; }
.m5-site .sr-contact-intro a:focus-visible { outline-color: var(--m5-ochre-hell); }
.m5-site a.mp-btn { display: inline-flex; align-items: center; gap: 20px; padding: 14px 20px; border: 1px solid #fff; color: #fff; font-size: var(--ty-help, 14px); font-weight: 600; text-decoration: none; }
.m5-site a.mp-btn:hover { background: #fff; color: var(--m5-ink); }
.m5-site .sr-contact-form .sr-section-head h2 { font-size: var(--ty-title, clamp(30px, 3.4vw, 46px)); }

/* ---------- Kleinere Bildschirme ---------- */
@media (max-width: 1180px) {
  .m5-site .m5-nav { gap: 20px; }
  .m5-connections--3 { grid-template-columns: 1fr 1fr; }
  .m5-connections--3 .m5-connection:first-child { grid-column: 1 / 3; min-height: 520px; }
  .m5-connections--3 .m5-connection:first-child .m5-connection-copy h2 { font-size: var(--ty-h2, clamp(40px, 6vw, 72px)); }
  .m5-connections--3 .m5-connection:first-child .m5-word { font-size: var(--ty-display, clamp(110px, 18vw, 220px)); }
  .m5-connections--3 .m5-connection-copy h2 { font-size: var(--ty-h2, clamp(30px, 4.4vw, 48px)); }
}
@media (max-width: 980px) {
  .m5-hero-title { top: 40%; }
  .m5-hero-lead { display: none; }
  .m5-action { grid-template-columns: 1fr 1fr; width: calc(100% - 34px); }
  .m5-action-title { grid-column: 1 / 3; border-right: 0; border-bottom: 1px solid rgba(17, 24, 33, .18); }
  .m5-action-cell:nth-child(3) { border-right: 0; }
  .m5-action-go { grid-column: 1 / 3; min-height: 52px; }
  .m5-door-name { bottom: 236px; }
  .m5-door:hover .m5-door-name, .m5-door:focus-within .m5-door-name, .m5-door.is-active .m5-door-name { bottom: 250px; font-size: var(--ty-title, clamp(26px, calc(22vw / var(--m5-n, 5)), 48px)); }
  .m5-door-tag { bottom: 222px; }
  .m5-statement-grid { grid-template-columns: 1fr; gap: 34px; }
  .m5-statement-number { max-width: 210px; }
  .m5-lab-head { display: block; }
  .m5-lab-head > p { margin-top: 24px; }
  .m5-lab.is-ready { grid-template-columns: 1fr; min-height: 0; }
  .m5-tabs { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .m5-tabs::-webkit-scrollbar { display: none; }
  .m5-tab { flex: 1 0 auto; display: block; min-width: 96px; padding: 13px 16px; border-bottom: 0; border-right: 1px solid rgba(255, 255, 255, .17); text-align: center; }
  .m5-tab b { display: block; margin-bottom: 2px; }
  .m5-tab strong { font-size: var(--ty-min, 12px); white-space: nowrap; }
  .m5-panel, .m5-lab.is-ready .m5-panel { grid-template-columns: 1fr; min-height: 0; }
  .m5-visual { height: 460px; }
  .m5-info { border-left: 0; }
  .m5-city-grid { grid-template-columns: 1fr; gap: 60px; }
  .m5-booking-head, .m5-booking-more { grid-template-columns: 1fr; gap: 30px; }
  .m5-board-inputs, .m5-board-inputs--extern { grid-template-columns: 1fr 1fr; }
  .m5-field { border-bottom: 1px solid rgba(17, 24, 33, .15); }
  .m5-field:nth-of-type(even) { border-right: 0; }
  .m5-board-inputs--extern .m5-field:nth-of-type(3) { grid-column: 1 / 3; border-right: 0; }
  .m5-board-go { grid-column: 1 / 3; }
  .m5-result { grid-template-columns: 120px 1fr auto; }
  .m5-result img { width: 120px; height: 84px; }
  .m5-site a.m5-result-go { grid-column: 2 / 4; justify-self: start; }
  .m5-foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .m5-foot-haus { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .m5-hero { min-height: 700px; }
  /* Türen: zwei im Blick, die übrigen durch Wischen erreichbar */
  .m5-doors { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .m5-doors::-webkit-scrollbar { display: none; }
  .m5-door, .m5-door:hover, .m5-door:focus-within, .m5-door.is-active { flex: 0 0 44%; scroll-snap-align: start; }
  .m5-door-top { left: 13px; right: 13px; top: calc(var(--m5-head-h) + 16px); }
  .m5-door-name, .m5-door:hover .m5-door-name, .m5-door:focus-within .m5-door-name, .m5-door.is-active .m5-door-name { left: 13px; bottom: 238px; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-size: var(--ty-title, 25px); }
  .m5-door-tag { display: none; }
  .m5-hero-title h1 { font-size: var(--ty-display, clamp(54px, 17.4vw, 68px)); }
  .m5-star { width: 74px; height: 74px; right: 15px; top: calc(var(--m5-head-h) + 44px); font-size: var(--ty-title, 23px); }
  .m5-action { bottom: 17px; }
  .m5-action-cell { padding: 12px 13px; }
  .m5-action-cell strong, .m5-action-cell input { font-size: var(--ty-input, 16px); }
  .m5-statement { padding: 105px 0 85px; }
  .m5-statement h2 { font-size: var(--ty-h2, clamp(38px, 11.6vw, 52px)); }
  .m5-statement-aside { margin-top: 40px; }
  .m5-lab-section { padding: 85px 0; }
  .m5-lab-head { margin-bottom: 38px; }
  .m5-visual { height: auto; aspect-ratio: 4 / 3.6; }
  .m5-code { font-size: var(--ty-display, 90px); left: 20px; }
  .m5-info { padding: 28px 20px; }
  .m5-city { padding: 90px 0; }
  .m5-city-facts { grid-template-columns: 1fr; }
  .m5-map { border-width: 10px; margin: 0 10px 10px 0; box-shadow: 10px 10px 0 var(--m5-ochre); }
  .m5-map-pin { width: 70px; height: 70px; margin: -35px 0 0 -35px; border-width: 8px; font-size: var(--ty-title, 26px); }
  .m5-map-label { top: 58%; width: 84%; }
  .m5-map--karte .m5-map-label { top: auto; width: auto; }
  .m5-booking { padding: 90px 0; }
  .m5-board { box-shadow: 10px 10px 0 var(--m5-ink); margin-right: 10px; }
  .m5-board-inputs, .m5-board-inputs--extern { grid-template-columns: 1fr; }
  .m5-field, .m5-board-inputs--extern .m5-field:nth-of-type(3) { grid-column: auto; border-right: 0; }
  .m5-board-go { grid-column: auto; }
  .m5-result { grid-template-columns: 90px 1fr; gap: 14px 16px; padding: 18px; }
  .m5-result img { width: 90px; height: 75px; }
  .m5-result-name strong { font-size: var(--ty-title, 23px); }
  .m5-result-price { grid-column: 2; text-align: left; }
  .m5-site a.m5-result-go { grid-column: 1 / 3; justify-self: stretch; text-align: center; }
  .m5-points { grid-template-columns: 1fr; }
  .m5-connections, .m5-connections--3 { grid-template-columns: 1fr; }
  .m5-connection, .m5-connections--3 .m5-connection:first-child { grid-column: auto; min-height: 500px; }
  .m5-connection-copy { left: 24px; right: 24px; bottom: 30px; }
  .m5-connection-copy h2, .m5-connections--3 .m5-connection-copy h2, .m5-connections--3 .m5-connection:first-child .m5-connection-copy h2 { font-size: var(--ty-h2, clamp(34px, 10vw, 46px)); }
  .m5-word, .m5-connections--3 .m5-word, .m5-connections--3 .m5-connection:first-child .m5-word { font-size: var(--ty-display, clamp(100px, 34vw, 150px)); }
  .m5-foot-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .m5-foot-bottom { display: block; }
  .m5-foot-bottom > * { display: block; margin-top: 8px; }
  .m5-foot-bottom nav { display: flex; }
  .m5-site .sr-contact-intro { padding: 60px 17px 56px; }
  .m5-site .sros-front-wrap > .sros-card { box-shadow: 8px 8px 0 var(--m5-ochre); margin-right: 8px; }
  .m5-site .sros-card h1 { font-size: var(--ty-h2, clamp(23px, 6.5vw, 32px)); }
}
@media (prefers-reduced-motion: reduce) {
  .m5-door, .m5-door img, .m5-door-tag, .m5-connection > img, .m5-site .sros-front-head.m5-head { transition: none; }
  .m5-door:hover img, .m5-door:focus-within img, .m5-door.is-active img, .m5-connection:hover > img { transform: none; }
}

/* Lageplan auf dem Handy (1.4.11): Kasten unter die Karte statt darüber */
@media (max-width: 640px) {
  .kz-map--karte, .m5-map--karte, .hh-site .kz-contact .kz-map--karte { aspect-ratio: auto !important; overflow: visible; }
  .kz-map--karte img, .m5-map--karte img { position: static; display: block; width: 100%; height: auto; aspect-ratio: 1.1; }
  .kz-map--karte .kz-map-label, .m5-map--karte .m5-map-label { position: static; transform: none; max-width: none; width: auto; margin: 0; text-align: left; }
  .kz-map--karte .karte-quelle, .m5-map--karte .karte-quelle { position: static; display: block; text-align: right; background: none; padding: 6px 0 0; }
}