@charset "UTF-8";
/* Villa Weissensee: Ergaenzungen zum neuen Design (Basis: startseite-neu.css, design-basis.css, ferienwohnung-neu.css).
   Hier steht nur, was sich inhaltlich von der Vorlage unterscheidet: Lageplan, zwei Ferienhaeuser, Umgebungs-Liste. */

/* ---------- Startseite: Einleitung als zweispaltiger Fliesstext (zwei unterschiedlich lange Absaetze) ---------- */
.he15 .he15-intro__flow { display: block; columns: 2; column-gap: var(--h-gap); }
.he15 .he15-intro__flow p + p { margin-top: 1.4em; }

/* ---------- Startseite: Bootshaus | Lageplan | Bungalow ---------- */
.he15 #block-ferienwohnungen .block-element:nth-child(n) { grid-column: span 4; }
.he15 #block-ferienwohnungen .block-element:nth-child(1) { order: 2; }
.he15 #block-ferienwohnungen .block-element:nth-child(2) { order: 1; }
.he15 #block-ferienwohnungen .block-element:nth-child(3) { order: 3; }
.he15 #block-ferienwohnungen .block-element-lageplan {
  position: relative; min-height: 440px; background: #fff; border: 1px solid rgba(34, 34, 34, .08); border-radius: var(--h-card); overflow: hidden;
  transition: box-shadow .35s ease;
}
.he15 #block-ferienwohnungen .block-element-lageplan:hover { box-shadow: 0 34px 60px -40px rgba(34, 34, 34, .5); }
.he15 #block-ferienwohnungen .block-element-lageplan figure { position: absolute; inset: 0; margin: 0; }
.he15 #block-ferienwohnungen .block-element-lageplan #myImg { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; border-radius: 0; cursor: zoom-in; }
.he15 #block-ferienwohnungen .block-element-lageplan #myImg:hover { opacity: 1; }
.he15 #block-ferienwohnungen .block-element-lageplan figure::after {
  content: "+"; position: absolute; right: 16px; bottom: 16px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--h-brand); color: #fff; font-size: 1.5rem; font-weight: 400; line-height: 1; pointer-events: none; transition: transform .25s ease;
}
.he15 #block-ferienwohnungen .block-element-lageplan:hover figure::after { transform: scale(1.12); }

/* Lageplan-Vergroesserung: ueber Header und Sticky-Leiste */
.he15 .modal { z-index: 100000001; box-sizing: border-box; padding: clamp(16px, 4vh, 48px) 16px; background-color: rgba(18, 22, 26, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: zoom-out; }
.he15 .modal .modal-content { width: auto; max-width: min(1000px, 100%); height: auto; border-radius: var(--h-card); cursor: default; }
.he15 .modal .close { position: fixed; top: 18px; right: 26px; cursor: pointer; font-weight: 300; }

/* ---------- Generelle Ausstattung: Luftbild der Anlage, Haupthaus und Garten bleiben links neben der Karte sichtbar ---------- */
.he15 .he15-amen__photo img, .ki .ki-amen__photo img { object-position: 0% 0%; }

/* ---------- Startseite: Umgebung (Liste der Sehenswuerdigkeiten im dunklen Panel) ---------- */
.he15 .he15-lage-panel ul.he15-sights { list-style: none; margin: 1.8em 0 0; padding: 0; }
.he15 .he15-lage-panel ul.he15-sights li {
  position: relative; margin: 0; padding: .62em 0 .62em 1.6em; border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: .98rem; line-height: 1.5; letter-spacing: .01em; color: rgba(255, 255, 255, .88);
}
.he15 .he15-lage-panel ul.he15-sights li::before { content: "\25C6"; position: absolute; left: 0; top: 2.3em; font-size: .5em; color: var(--h-sand); }

/* ---------- Startseite: Termine (Satz ueber dem Kalender-Link) ---------- */
.he15 .he15-section .he15-evbox p.he15-cal { flex-direction: column; align-items: center; gap: 14px; font-size: .95rem; font-weight: 300; color: #3b3b3b; text-align: center; }

/* ---------- Ferienhaus-Seiten: zwei Eckdaten statt drei ---------- */
@media (min-width: 961px) {
  .kifw .fw-facts__bar--two,
  .ltki .fw-split__media .fw-facts__bar.fw-facts__bar--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kifw .fw-facts__bar--two .fw-fact { justify-content: center; }
}

@media (max-width: 1099px) {
  .he15 #block-ferienwohnungen .block-element:nth-child(n) { grid-column: span 6; }
  .he15 #block-ferienwohnungen .block-element:nth-child(1) { order: 3; grid-column: 1 / -1; min-height: 0; height: clamp(420px, 78vw, 700px); }
  .he15 #block-ferienwohnungen .block-element:nth-child(3) { order: 2; }
}
@media (max-width: 899px) {
  .he15 .he15-intro__flow { columns: 1; }
}
@media (max-width: 719px) {
  .he15 #block-ferienwohnungen .block-element:nth-child(n) { grid-column: 1 / -1; }
}

/* ---------- Logo: die Datei hat links und rechts viel leeren Rand (Motiv = 41 % der Breite) ---------- */
.he15 .he15-stoerer__card figure, .he15 .he15-cta__logo { overflow: hidden; }
.he15 .he15-stoerer__card figure img, .he15 .he15-cta__logo img { width: 240%; max-width: none; margin-left: -70%; }
@media (min-width: 960px) {
  .he15 header#moveHeader div#block-element-logo, .ki header#moveHeader div#block-element-logo { width: 250px; max-width: none; padding-top: 4px; }
  .he15 header#moveHeader.sticky div#block-element-logo, .ki header#moveHeader.sticky div#block-element-logo,
  .home.page.he15 header#moveHeader.sticky div#block-element-logo { width: 205px; max-width: none; padding: 3px 0 0; }
}

/* ---------- Mobiles Menue (heller Hintergrund): Links beim Darueberfahren blau statt weiss (alte Theme-Regel "header ul li > a:hover") ---------- */
@media (max-width: 959px) {
  .he15 header#moveHeader ul#menu-navigation-header li.menu-item:not(.popup-open) > a:hover,
  .he15 header#moveHeader ul#menu-navigation-header li.menu-item:not(.popup-open) > a:focus-visible,
  .ki header#moveHeader ul#menu-navigation-header li.menu-item:not(.popup-open) > a:hover,
  .ki header#moveHeader ul#menu-navigation-header li.menu-item:not(.popup-open) > a:focus-visible { color: var(--h-brand); }
}