/* Adapted from Claude Design: Hero Desktop 1440 / Mobil 390, 2026-10-01. */

.lm-hero{
  --lm-ink:#304e5b; --lm-cream:#f2ede5; --lm-mint:#d2e0e0; --lm-cta:#bf4415; --lm-z:#ee653f; --lm-text:#22363f; --lm-muted:#3f5861;
  position:relative; overflow:hidden; background:var(--lm-cream); color:var(--lm-text);
  font-family:Outfit,"Segoe UI",system-ui,sans-serif;
}
.lm-hero *{box-sizing:border-box}
.lm-hero .lm-hero__inner{position:relative; margin:0 auto; padding-top:64px; padding-bottom:40px}
.lm-hero .lm-hero__text{width:calc(50% - 64px); max-width:640px; min-height:556px; display:flex; flex-direction:column; justify-content:center}

/* H1 = Keyword-Zeile + Claim */
.lm-hero .lm-hero__title{margin:0; font:inherit}
.lm-hero .lm-hero__kicker{display:flex; align-items:center; gap:10px; color:var(--lm-ink);
  font:500 14px/1.4 Outfit,"Segoe UI",system-ui,sans-serif; letter-spacing:.14em; text-transform:uppercase}
.lm-hero .lm-hero__wavelet{flex:0 0 auto; color:var(--lm-z)}
.lm-hero .lm-hero__claim{display:block; margin-top:20px; color:var(--lm-ink);
  font:500 clamp(40px, 4.3vw, 60px)/1.14 Comfortaa,"Trebuchet MS",sans-serif; letter-spacing:-.01em}
.lm-hero .lm-hero__claim-last{position:relative; display:inline-block}
/* The rounded stroke extends past the SVG viewport at the wave's troughs. */
.lm-hero .lm-hero__swash{position:absolute; left:0; right:0; bottom:-12px; width:100%; height:12px; overflow:visible}

.lm-hero .lm-hero__lead{margin:34px 0 0; font-size:18px; line-height:1.6; font-weight:300; text-wrap:balance}

/* zwei Unterkünfte, kompakt */
.lm-hero .lm-hero__types{list-style:none; margin:28px 0 0; padding:20px 0 0; border-top:1px solid rgba(48,78,91,.24);
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr))}
.lm-hero .lm-hero__types li + li{padding-left:28px; border-left:1px solid rgba(48,78,91,.24)}
.lm-hero .lm-hero__types a{display:flex; flex-direction:column; gap:6px; min-height:48px; color:var(--lm-ink); text-decoration:none}
.lm-hero .lm-hero__guests{font-size:15px; line-height:1; color:var(--lm-muted)}
.lm-hero .lm-hero__guests b{margin:0 3px; font:600 34px/1 Comfortaa,"Trebuchet MS",sans-serif; color:var(--lm-ink)}
.lm-hero .lm-hero__type{display:inline-flex; align-items:center; gap:8px; font-size:17px; font-weight:600}
.lm-hero .lm-hero__type span{text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:4px}
.lm-hero .lm-hero__type svg{transition:transform .2s ease}
.lm-hero .lm-hero__types a:hover{color:var(--lm-cta)}
.lm-hero .lm-hero__types a:hover svg{transform:translateX(4px)}

.lm-hero .lm-hero__buttons{display:flex; flex-wrap:wrap; gap:14px; margin-top:30px}
.lm-hero .lm-hero__btn{display:inline-flex; align-items:center; justify-content:center; min-height:54px; padding:0 26px; border-radius:8px;
  font:500 18px/1 Outfit,"Segoe UI",system-ui,sans-serif; text-decoration:none; transition:background-color .2s ease,color .2s ease}
.lm-hero .lm-hero__btn--primary{background:var(--lm-cta); color:#fff}
.lm-hero .lm-hero__btn--primary:hover{background:#a23a12; color:#fff}
.lm-hero .lm-hero__btn--secondary{border:1.5px solid var(--lm-ink); color:var(--lm-ink); background:transparent}
.lm-hero .lm-hero__btn--secondary:hover{background:var(--lm-ink); color:#fff}
.lm-hero a:focus-visible{outline:3px solid var(--lm-cta); outline-offset:3px; border-radius:4px}

.lm-hero .lm-hero__place{display:flex; align-items:flex-start; gap:8px; margin:20px 0 0; font-size:15px; line-height:1.45; color:var(--lm-muted)}
.lm-hero .lm-hero__place svg{flex:0 0 auto; margin-top:1px; color:var(--lm-ink)}
.lm-hero .lm-hero__types,.lm-hero .lm-hero__buttons,.lm-hero .lm-hero__place{max-width:472px}

/* Align both edges with the shared content container, including its 15px gutters. */
.lm-hero .lm-hero__media{position:absolute; top:0; right:15px; left:calc(50% + 15px); height:560px}
.lm-hero .lm-hero__photo{margin:0; overflow:hidden; background:var(--lm-mint)}
.lm-hero .lm-hero__photo img{display:block; width:100%; height:100%; object-fit:cover}
.lm-hero .lm-hero__photo--main{position:absolute; inset:0; border-radius:0 0 28px 28px}
.lm-hero .lm-hero__photo--main img{object-position:50% 60%}
.lm-hero .lm-hero__photo--small{position:absolute; left:-48px; top:424px; width:300px; aspect-ratio:3/2;
  border:6px solid var(--lm-cream); border-radius:22px; box-shadow:0 18px 40px rgba(34,54,63,.22)}
.lm-hero .lm-hero__photo figcaption{position:absolute; padding:7px 12px; border-radius:6px; background:var(--lm-ink); color:#fff;
  font-size:12px; line-height:1; font-weight:500; letter-spacing:.12em; text-transform:uppercase}
.lm-hero .lm-hero__photo--main figcaption{right:20px; bottom:20px}
.lm-hero .lm-hero__photo--small figcaption{left:10px; bottom:10px}

.lm-hero .lm-hero__wave{display:block; width:100%; height:48px}

/* ---- schmaler Desktop: kleines Foto rückt ins große ---- */
@media (max-width:1279.98px){
  .lm-hero .lm-hero__photo--small{left:-24px; width:260px}
}

/* ---- Tablet: Text oben, Fotos darunter ---- */
@media (max-width:991.98px){
  .lm-hero .lm-hero__inner{padding-top:48px; padding-bottom:0}
  .lm-hero .lm-hero__types,.lm-hero .lm-hero__buttons,.lm-hero .lm-hero__place{max-width:none}
  .lm-hero .lm-hero__text{width:auto; max-width:640px; min-height:0}
  .lm-hero .lm-hero__media{position:relative; left:auto; right:auto; height:auto; margin:48px 0 76px}
  .lm-hero .lm-hero__photo--main{position:relative; inset:auto; aspect-ratio:16/10; border-radius:24px}
  .lm-hero .lm-hero__photo--small{left:20px; top:auto; bottom:-44px; width:38%; max-width:300px}
}

/* ---- Mobil ---- */
@media (max-width:767.98px){
  .lm-hero .lm-hero__inner{padding-top:28px; padding-bottom:0}
  .lm-hero .lm-hero__kicker{font-size:12px; letter-spacing:.12em}
  .lm-hero .lm-hero__claim{margin-top:14px; font-size:38px}
  .lm-hero .lm-hero__lead{margin-top:28px; font-size:16.5px}
  .lm-hero .lm-hero__types{margin-top:22px; padding-top:16px}
  .lm-hero .lm-hero__types li + li{padding-left:18px}
  .lm-hero .lm-hero__guests b{font-size:30px}
  .lm-hero .lm-hero__type{font-size:16px}
  .lm-hero .lm-hero__buttons{flex-direction:column; gap:10px; margin-top:24px}
  .lm-hero .lm-hero__btn{width:100%; min-height:52px}
  .lm-hero .lm-hero__place{margin-top:16px; font-size:14.5px}
  .lm-hero .lm-hero__media{margin:32px 0 56px}
  .lm-hero .lm-hero__photo--main{aspect-ratio:4/3; border-radius:20px}
  .lm-hero .lm-hero__photo--small{left:12px; bottom:-34px; width:150px; border-width:4px; border-radius:16px}
  .lm-hero .lm-hero__photo figcaption{padding:6px 9px; font-size:10.5px}
  .lm-hero .lm-hero__photo--main figcaption{right:12px; bottom:12px}
  .lm-hero .lm-hero__photo--small figcaption{left:6px; bottom:6px}
  .lm-hero .lm-hero__wave{height:28px}
}

@media (max-width:359.98px){
  .lm-hero .lm-hero__claim{font-size:33px}
}

@media (prefers-reduced-motion:reduce){
  .lm-hero *{transition:none !important}
}

/* Integrate with the shared theme typography without inheriting generic H1/p margins. */
.lm-hero .lm-hero__lead p{margin:0;font:inherit;color:inherit}
.lm-hero .lm-hero__types li{margin:0;list-style:none}
.lm-hero .lm-hero__photo{padding:0}
.lm-hero .lm-hero__type svg{flex-shrink:0}
.lm-hero .lm-hero__btn:hover{text-decoration:none}
/* The page has a fixed header and legacy #start rules from its initial build. */
body.home #start.lm-hero{padding:0;margin-top:var(--header-height,102px)}
body.home #start.lm-hero .lm-hero__title{max-width:none;font:inherit;overflow-wrap:normal}
.editor-styles-wrapper .lm-hero{padding:0}