/* Hoja de estilos del sitio. Secciones: 1 tokens · 2 base · 3 cabecera · 4 botones · 5 secciones con foto ·
   6 contenido · 7 franjas de color · 8 formularios · 9 legal y pie · 10 animación · 11 responsive.
   Colores y fuente son los del diseño original y no se cambian; lo demás se agrupa para no repetir. */

/* 1. Tokens. --on-dark y --on-dark-soft son los dos únicos tonos de texto sobre fondo oscuro.
   --veil es el azul (RGB) de los velos sobre foto; --glow, la sombra que hace legible el texto sobre foto. */
:root{--night:#0e2038;--night2:#15365a;--ocean:#1c4f7c;--clay:#a4623b;--paper:#fcfdfe;--sky:#eaf2f8;--ink:#233140;--soft:#5f6e7d;--line:#d9e2ea;--on-dark:#e3ecf5;--on-dark-soft:#aebfd0;--veil:10,30,55;--glow:0 1px 3px rgba(0,0,0,.35),0 2px 24px rgba(0,0,0,.45);--sans:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif}

/* 2. Base. body en columna flex para que el pie quede abajo también en páginas cortas (404). */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);font:300 16px/1.75 var(--sans);-webkit-font-smoothing:antialiased}
main{flex:1 0 auto}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-weight:300;line-height:1.15;margin:0 0 .6em;text-wrap:balance}
h1{font-size:clamp(2.2rem,5.6vw,4.6rem);font-weight:200;letter-spacing:.05em;text-transform:uppercase}
h2{font-size:clamp(1.7rem,3.4vw,2.6rem);font-weight:200;letter-spacing:.02em}
h3{font-size:1.25rem;letter-spacing:.02em}
p{margin:0 0 1em}
figure{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding:0 1.6rem}
.narrow{max-width:780px}
section{padding:4.5rem 0}
section.wrap{padding-top:4.5rem;padding-bottom:4.5rem}
.two{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start}
.pillars,.three{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem}
.three,.places{margin-top:2.5rem}
.places{display:grid;grid-template-columns:repeat(2,1fr);gap:0 3.5rem}
section.pillars{padding-top:3.5rem}
.pillars div,.three div,.place,.list li,details{border-top:1px solid var(--line)}
.pillars div,.three div{padding-top:1.2rem}
.note{font-size:.85rem;color:var(--soft)}
.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:1rem;background:#fff;color:#000;padding:.5rem;z-index:60}
:focus-visible{outline:2px solid var(--clay);outline-offset:3px}

/* 3. Cabecera. 'over': fija y transparente sobre la foto; sólida al scrollear, en páginas sin foto ('solid')
   y con el menú móvil abierto ('open'). .menu es el botón hamburguesa: sólo existe en móvil con JS (sección 11). */
.site-header{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;gap:1.2rem;padding:1rem 1.8rem;flex-wrap:wrap;color:#fff;text-shadow:var(--glow);transition:background .3s,color .3s,padding .3s}
.site-header.scrolled,.site-header.solid,.site-header.open{background:rgba(252,253,254,.95);backdrop-filter:blur(8px);color:var(--ink);text-shadow:none;border-bottom:1px solid var(--line);padding:.7rem 1.8rem}
.site-header.solid{position:sticky}
.logo{display:flex;flex-direction:column;text-decoration:none;margin-right:auto;line-height:1}
.logo .lg{font-size:1.25rem;letter-spacing:.3em}
.logo .ls{font-size:.58rem;letter-spacing:.34em;margin-top:.4rem;opacity:.85}
.v-home .site-header:not(.scrolled):not(.open) .logo{opacity:0;pointer-events:none}
nav{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
nav a:not(.btn){text-decoration:none;border-bottom:1px solid transparent;padding:.15rem 0}
nav a:not(.btn):hover,nav a.on{border-color:currentColor}
.lang{font-size:.75rem;opacity:.9}
.lang a{padding:0 .2rem}
.menu{display:none}

/* 4. Botones. El fantasma (sobre foto) lleva un relleno translúcido azul noche: así el texto se lee sobre
   cualquier fondo, también sobre cielo o paredes blancas. .ghost.dark es el fantasma sobre fondo claro. */
.btn{display:inline-block;background:var(--night);color:#fff;text-decoration:none;padding:.9rem 1.8rem;border:1px solid var(--night);font:400 .72rem var(--sans);letter-spacing:.22em;text-transform:uppercase;cursor:pointer;transition:background .25s,color .25s,border-color .25s;text-shadow:none}
.btn:hover{background:transparent;color:var(--night)}
.btn.small{padding:.6rem 1.1rem;font-size:.66rem}
.btn.ghost,.site-header:not(.scrolled):not(.solid):not(.open) .btn.small{background:rgba(var(--veil),.38);color:#fff;border-color:rgba(255,255,255,.85);backdrop-filter:blur(6px)}
.btn.ghost:hover,.site-header:not(.scrolled):not(.solid):not(.open) .btn.small:hover{background:#fff;color:var(--night)}
.btn.ghost.dark{background:transparent;color:var(--night);border-color:var(--night);backdrop-filter:none}
.btn.ghost.dark:hover{background:var(--night);color:#fff}

/* 5. Secciones con foto de fondo: .hero (portada), .panband (franja panorámica), .phead (cabecera de página).
   Comparten la base; difieren en altura, alineación y velo. El velo es más denso donde se apoya el texto. */
.hero,.panband,.phead{position:relative;overflow:hidden;padding:0;color:#fff;background:var(--night)}
.hero-img,.panband img,.phead-img{position:absolute;inset:0}
.hero-img,.panband img,.phead-img img{width:100%;height:100%;object-fit:cover}
.hero::after,.panband::after,.phead::after{content:"";position:absolute;inset:0}
.poster,.panband .wrap,.phead .wrap{position:relative;z-index:1;text-shadow:var(--glow)}
.hero{min-height:100vh;min-height:100svh;display:grid;place-items:center}
.hero::after{background:radial-gradient(ellipse 55% 50% at 50% 56%,rgba(var(--veil),.55),rgba(var(--veil),0) 70%),linear-gradient(to bottom,rgba(var(--veil),.58) 0%,rgba(var(--veil),.36) 35%,rgba(var(--veil),.42) 65%,rgba(var(--veil),.78) 100%)}
.poster{text-align:center;padding:6rem 1.2rem 7rem}
.poster h1{margin:0;line-height:1;font-size:clamp(3.2rem,13.5vw,12rem);font-weight:200;letter-spacing:.16em;text-indent:.16em}
.poster .w1,.poster .w2{display:block}
.poster .w2{font-size:clamp(.9rem,2.4vw,2rem);letter-spacing:.9em;text-indent:.9em;margin-top:1.4rem;font-weight:300}
.tag{font-size:clamp(.72rem,1.3vw,.95rem);letter-spacing:.3em;text-transform:uppercase;margin:2.4rem 0 2rem}
.cta{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}
.credits{position:absolute;z-index:1;bottom:1.8rem;left:0;right:0;text-align:center;font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;margin:0;padding:0 1rem;text-shadow:var(--glow)}
.panband{min-height:75vh;display:grid;place-items:center;text-align:center}
.panband::after{background:rgba(var(--veil),.45)}
.panband h2{font-size:clamp(2rem,5.4vw,4.4rem);font-weight:200;letter-spacing:.06em;margin:0}
.phead{min-height:62vh;display:grid;align-items:end}
.phead::after{background:linear-gradient(to bottom,rgba(var(--veil),.6) 0%,rgba(var(--veil),.18) 38%,rgba(var(--veil),.72) 100%)}
.phead .wrap{padding-bottom:3.5rem;padding-top:8rem;width:100%}
.phead h1{margin-bottom:.3em}
.phead .sub{font-size:1.05rem;color:var(--on-dark);max-width:36rem;margin:0}
.kicker{font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;margin:0 0 1rem;color:var(--on-dark)}

/* 6. Bloques de contenido */
.intro h2{max-width:16ch}
.statement{font-size:clamp(1.3rem,2.4vw,1.8rem);font-weight:200;line-height:1.4;letter-spacing:.01em;margin-bottom:1.4rem}
.pillars h3{font-size:1.5rem;font-weight:200;letter-spacing:.12em;text-transform:uppercase}
.pillars p,.card-t p{color:var(--soft)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem}
.card{text-decoration:none;display:block;background:#fff;border:1px solid var(--line);transition:transform .3s,box-shadow .3s}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(14,32,56,.12)}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.card-t{padding:1.4rem 1.4rem 1.6rem}
.card-t p{margin-bottom:.8rem}
.more{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;border-bottom:1px solid var(--clay)}
.list{list-style:none;padding:0;margin:0 0 1.5rem}
.list li{padding:.7rem 0}
.list li:last-child{border-bottom:1px solid var(--line)}
.place{padding:1.3rem 0}
.place h3{margin-bottom:.3rem}
details{padding:1rem 0}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-size:1.15rem}
/* galería de tres fotos (habitaciones) y fotos con pie (contacto) */
.duo{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;max-width:72rem}
.duo img{width:100%;aspect-ratio:3/4;object-fit:cover}
figcaption{font-size:.85rem;letter-spacing:.02em;opacity:.75;margin-top:.6rem;line-height:1.5}
.hist{margin:2.2rem 0 0;max-width:20rem}
.lage{align-items:center;padding-top:1rem}
.lage figure{max-width:26rem}
.hist img,.lage img{box-shadow:0 6px 24px rgba(14,32,56,.15)}

/* 7. Franjas de color: .night (cielo estrellado), .band.ocean (lista de apertura), .band.sand (bodas) */
.night,.band{color:#fff;text-align:center}
.night{background:linear-gradient(var(--night),var(--night2));position:relative;overflow:hidden;padding:6rem 0}
.night::before{content:"";position:absolute;inset:0;opacity:.9;background-image:radial-gradient(1.5px 1.5px at 8% 22%,#fff,transparent),radial-gradient(1px 1px at 17% 64%,#fff,transparent),radial-gradient(1.5px 1.5px at 26% 38%,#fff,transparent),radial-gradient(1px 1px at 34% 78%,#fff,transparent),radial-gradient(1.5px 1.5px at 43% 18%,#fff,transparent),radial-gradient(1px 1px at 52% 52%,#fff,transparent),radial-gradient(1.5px 1.5px at 61% 30%,#fff,transparent),radial-gradient(1px 1px at 69% 72%,#fff,transparent),radial-gradient(1.5px 1.5px at 77% 14%,#fff,transparent),radial-gradient(1px 1px at 84% 48%,#fff,transparent),radial-gradient(1.5px 1.5px at 91% 82%,#fff,transparent),radial-gradient(1px 1px at 96% 26%,#fff,transparent),radial-gradient(1px 1px at 12% 88%,#fff,transparent),radial-gradient(1px 1px at 48% 90%,#fff,transparent),radial-gradient(1px 1px at 73% 92%,#fff,transparent)}
.night .wrap{position:relative}
.night p{color:var(--on-dark);max-width:34rem;margin:0 auto}
.band p{max-width:34rem;margin-left:auto;margin-right:auto}
.band.ocean{background:var(--ocean)}
.band.ocean .note{color:var(--on-dark-soft)}
.band.sand{background:var(--sky);color:var(--ink)}

/* 8. Formularios */
.form{display:grid;grid-template-columns:1fr 1fr;gap:1rem;text-align:left}
.form label{display:grid;gap:.3rem;font-size:.8rem;letter-spacing:.04em;color:var(--soft)}
.form .w,.form label.check{grid-column:1/-1}
.form input,.form select,.form textarea{font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1px solid var(--line);padding:.7rem .8rem;border-radius:0;width:100%}
.form .check{display:flex;gap:.7rem;align-items:flex-start;font-size:.82rem;line-height:1.5}
.form .check input{width:auto;margin-top:.25rem}
.form .btn{justify-self:start}
.band.ocean .form{max-width:34rem;margin:1.5rem auto 0;grid-template-columns:1fr}
.band.ocean .form label{color:var(--on-dark)}
.band.ocean .form .check a{color:#fff}
.band.ocean .btn{background:#fff;color:var(--night);border-color:#fff}
.band.ocean .btn:hover{background:transparent;color:#fff}
.ok,.err{padding:.8rem 1rem;margin:0}
.ok{background:#e4f2e6;color:#1f4a28}
.err{background:#fbe6e3;color:#7a2a20}

/* 9. Legal, 404 y pie. El h1 legal puede partirse ("Datenschutzerklärung" no entra en 390 px). */
.legal{padding-top:8rem}
.legal h1{font-size:clamp(1.6rem,6vw,2.2rem);overflow-wrap:anywhere;hyphens:auto}
.legal h2{font-size:1.3rem;margin-top:2rem}
.todo{background:#fff1c2;color:#5c4700;padding:0 .35rem}
footer{background:var(--night);color:var(--on-dark);text-align:center;padding:3rem 1.5rem;font-size:.9rem}
footer a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.fl{letter-spacing:.3em;font-size:.95rem;color:#fff;font-weight:200}
footer .note{color:var(--on-dark-soft);max-width:36rem;margin:1rem auto 0}

/* 10. Animación de títulos (site.js parte cada título en palabras .w) */
.rv .w{display:inline-block;opacity:0;transform:translateY(.45em);filter:blur(5px);transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.2,.7,.2,1),filter 1.1s ease;transition-delay:calc(var(--i)*55ms)}
.rv.in .w{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){.rv .w{opacity:1;transform:none;filter:none;transition:none}html{scroll-behavior:auto}.card,.menu .bar,.menu .bar::before,.menu .bar::after{transition:none}}

/* 11. Responsive de maquetación (hasta 860 px): una columna. */
@media(max-width:860px){
.hero-img{object-position:22% 50%!important}
section{padding:3rem 0}
section.wrap{padding-top:3rem;padding-bottom:3rem}
.two,.pillars,.three,.cards,.places,.form{grid-template-columns:1fr}
.two{gap:1.5rem}
.wrap{padding:0 1.2rem}
.poster .w2{letter-spacing:.5em;text-indent:.5em}
.panband{min-height:60vh}
.phead{min-height:55vh}
.legal{padding-top:7rem}
}
@media(max-width:520px){.duo{gap:.6rem}.duo figcaption{font-size:.72rem}}

/* 12. Cabecera responsive. De 1024 a 1279 px, compacta (logo y menú más chicos) para que entre en una fila
   también en alemán. Hasta 1023 px, con JS (html.js) logo, botón y hamburguesa en una fila y el menú se
   despliega al tocar; sin JS queda el menú completo visible, como en desktop. */
@media(min-width:1024px) and (max-width:1279px){
.site-header{gap:.9rem;padding:.8rem 1.2rem}
.site-header.scrolled,.site-header.solid,.site-header.open{padding:.6rem 1.2rem}
.logo .lg{font-size:1rem;letter-spacing:.22em}
.logo .ls{font-size:.5rem}
nav{gap:.9rem;font-size:.7rem;flex-wrap:nowrap;white-space:nowrap}
.btn.small{padding:.5rem .8rem;font-size:.6rem;letter-spacing:.14em}
}
@media(max-width:1023px){
.site-header{padding:.8rem 1rem}
.logo{width:100%}
nav{gap:.4rem 1.1rem;width:100%;font-size:.72rem}
.site-header .btn.small{display:none}
.js .site-header{flex-wrap:nowrap;gap:.6rem}
.js .logo{width:auto;flex-shrink:1;min-width:0;white-space:nowrap}
.js .logo .lg{font-size:.82rem;letter-spacing:.18em}
.js .logo .ls{font-size:.46rem;letter-spacing:.3em}
.js nav{display:contents}
.js nav>a:not(.btn),.js nav .lang{display:none}
.js .site-header .btn.small{order:2;flex-shrink:0;display:inline-flex;align-items:center;min-height:44px;padding:0 .55rem;font-size:.54rem;letter-spacing:.1em}
.js .menu{order:3;flex-shrink:0;display:grid;place-items:center;width:44px;height:44px;padding:0;background:transparent;color:inherit;border:1px solid currentColor;cursor:pointer}
.menu .bar,.menu .bar::before,.menu .bar::after{display:block;width:18px;height:2px;background:currentColor;transition:transform .2s,background .2s}
.menu .bar{position:relative}
.menu .bar::before,.menu .bar::after{content:"";position:absolute;left:0}
.menu .bar::before{top:-6px}
.menu .bar::after{top:6px}
.js .site-header.open{flex-wrap:wrap;max-height:100vh;max-height:100dvh;overflow-y:auto}
.js .site-header.open nav>a:not(.btn){display:block;order:4;width:100%;padding:.75rem 0;font-size:1rem;border-bottom:1px solid var(--line)}
.js .site-header.open nav>a.on{border-bottom-color:var(--night)}
.js .site-header.open nav .lang{display:flex;order:5;width:100%;gap:.4rem;align-items:center;padding:.4rem 0;font-size:1rem}
.js .site-header.open nav .lang a{display:inline-flex;align-items:center;min-height:44px;padding:0 .6rem}
.open .menu .bar{background:transparent}
.open .menu .bar::before{transform:translateY(6px) rotate(45deg)}
.open .menu .bar::after{transform:translateY(-6px) rotate(-45deg)}
}
/* Hasta 480 px el logo y el botón no entran en una fila (en alemán el botón mide 154 px): el botón pasa dentro del menú desplegado. */
@media(max-width:480px){.js .site-header:not(.open) .btn.small{display:none}.js .site-header.open .btn.small{order:6;width:100%;justify-content:center;margin:.8rem 0 .4rem}}