@font-face{font-family:'Butler';src:url('../fonts/butler.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --c-blue:#1c1a37;--c-blue-2:#272447;--c-gold:#937831;--c-gold-soft:#b89a55;
  --c-cream:#f5efe2;--c-cream-2:#ece2cf;--c-ink:#1c1a37;--c-muted:#6d6a82;
  --font-display:'Butler','Cormorant Garamond',Georgia,serif;
  --font-body:'Montserrat',system-ui,sans-serif;--font-script:'Pinyon Script',cursive;
  --maxw:1280px;--pad:clamp(20px,5vw,80px);--ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--c-ink);background:var(--c-cream);line-height:1.7;font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}a{color:inherit;text-decoration:none}
.section-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.05;letter-spacing:0}
.eyebrow{font-family:var(--font-body);font-size:.72rem;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--c-gold);display:inline-block;margin-bottom:1.1rem}
.eyebrow.on-dark{color:var(--c-gold-soft)}
.script{font-family:var(--font-script);font-weight:400;color:var(--c-gold)}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
section{position:relative}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.04;background-image:url("../images/noise.svg")}
.rule{width:64px;height:1px;background:var(--c-gold);margin:0 auto 1.6rem}
.rule.left{margin-left:0}
.btn{display:inline-flex;align-items:center;gap:.6em;cursor:pointer;font-family:var(--font-body);font-size:.74rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;padding:1.05em 2.1em;border:1px solid var(--c-gold);background:transparent;color:var(--c-ink);transition:all .4s var(--ease)}
.btn:hover{background:var(--c-gold);color:#fff;letter-spacing:.26em}
.btn.solid{background:var(--c-gold);color:#fff}.btn.solid:hover{background:transparent;color:var(--c-ink)}
.btn.on-dark{color:var(--c-cream);border-color:var(--c-gold-soft)}.btn.on-dark:hover{background:var(--c-gold);color:#fff;border-color:var(--c-gold)}
/* HEADER */
header{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;padding:1.4rem var(--pad);transition:background .5s var(--ease),padding .5s var(--ease),box-shadow .5s var(--ease)}
header.scrolled{background:rgba(28,26,55,.96);backdrop-filter:blur(8px);padding:.9rem var(--pad);box-shadow:0 1px 0 rgba(147,120,49,.35)}
.brand{display:flex;flex-direction:column;line-height:1;color:#fff}
.brand .mono{font-family:var(--font-display);font-size:1.15rem;letter-spacing:.4em;font-weight:700;text-indent:.4em}
.brand .sub{font-family:var(--font-body);font-size:.52rem;letter-spacing:.42em;text-transform:uppercase;color:var(--c-gold-soft);margin-top:.45rem;text-indent:.42em}
nav.main{display:flex;align-items:center;gap:1.8rem}
nav.main a{color:rgba(255,255,255,.82);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;transition:color .3s}
nav.main a:hover{color:var(--c-gold-soft)}
nav.main .btn{padding:.8em 1.4em;color:#fff}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px}
.burger span{width:24px;height:1.5px;background:#fff;transition:.3s}
@media(max-width:1040px){
  nav.main{position:fixed;inset:0;background:var(--c-blue);flex-direction:column;justify-content:center;gap:2rem;transform:translateX(100%);transition:transform .5s var(--ease)}
  nav.main.open{transform:translateX(0)}nav.main a{font-size:1rem}
  .burger{display:flex;z-index:1100}
  .burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
}
/* HERO */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--c-cream);position:relative;overflow:hidden;background-color:var(--c-blue);isolation:isolate}
.hero .section-bg{z-index:0}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(28,26,55,.5) 0%,rgba(28,26,55,.35) 35%,rgba(28,26,55,.82) 100%)}
.hero .inner{max-width:900px;padding-top:6rem;opacity:0;transform:translateY(24px);animation:rise 1.2s var(--ease) .25s forwards;position:relative;z-index:2}
.hero h1{font-size:clamp(3rem,9.5vw,7.4rem);font-weight:700;margin:.3rem 0 .1rem}
.hero .accent{display:block;font-family:var(--font-script);color:var(--c-gold-soft);font-size:clamp(2.1rem,6vw,3.6rem);font-weight:400;margin:-.05em 0 .35em}
.hero p.lede{font-size:clamp(1rem,1.7vw,1.18rem);font-weight:300;max-width:640px;margin:1.4rem auto 2.4rem;color:rgba(245,239,226,.92)}
.hero .cta-row{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.scrollcue{position:absolute;bottom:2.2rem;left:50%;transform:translateX(-50%);color:var(--c-gold-soft);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:.8rem;animation:fade 2s ease-in-out infinite alternate;z-index:2}
.scrollcue .line{width:1px;height:46px;background:linear-gradient(var(--c-gold-soft),transparent)}
@keyframes rise{to{opacity:1;transform:none}}@keyframes fade{from{opacity:.4}to{opacity:1}}
/* SECTION */
.section-pad{padding:clamp(5rem,11vw,9rem) 0}
.center{text-align:center}
.lead-h2{font-size:clamp(2.2rem,4.8vw,3.6rem);font-weight:700;margin-bottom:1.4rem;line-height:1.08}
.lead-h2 em{font-style:italic;color:var(--c-gold);font-weight:500}
.body-lg{font-size:1.06rem;font-weight:300;color:#4a4860;max-width:62ch}
.center .body-lg{margin-inline:auto}
.sub-h3{font-family:var(--font-display);font-weight:700;font-size:clamp(1.5rem,3vw,2.2rem);margin:.2rem 0 1rem;color:var(--c-blue)}
/* INTRO dark */
.intro{color:var(--c-cream);position:relative;isolation:isolate}
.intro::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(28,26,55,.9),rgba(28,26,55,.93))}
.intro .body-lg{color:rgba(245,239,226,.86)}
.intro .lead-h2 em{color:var(--c-gold-soft)}
.signoff{font-family:var(--font-script);font-size:2.2rem;color:var(--c-gold-soft);margin-top:1.6rem}
/* SPLIT */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.split .media{aspect-ratio:4/5;box-shadow:0 30px 60px -30px rgba(28,26,55,.45);overflow:hidden;background:var(--c-blue)}
.split .media img{width:100%;height:100%;object-fit:cover}
@media(max-width:820px){.split{grid-template-columns:1fr}}
/* LISTE mit Gold-Markern */
.gold-list{list-style:none;margin:1.4rem 0 0}
.gold-list li{position:relative;padding-left:1.8rem;margin-bottom:.9rem;font-weight:300;color:#4a4860}
.gold-list li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:8px;background:var(--c-gold);transform:rotate(45deg)}
.intro .gold-list li{color:rgba(245,239,226,.85)}
/* HIGHLIGHT block */
.highlight{background:#fff;border-left:3px solid var(--c-gold);padding:2rem 2.2rem;margin-top:2.5rem;box-shadow:0 24px 50px -38px rgba(28,26,55,.5)}
.highlight p{font-weight:300;color:#4a4860}.highlight p+p{margin-top:1rem}
/* FEATURE GRID (Regeln) */
.featuregrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-top:3.5rem}
.feature{background:#fff;border:1px solid rgba(28,26,55,.08);padding:1.8rem;box-shadow:0 24px 50px -40px rgba(28,26,55,.5)}
.feature .fnum{font-family:var(--font-display);font-weight:700;font-size:1.1rem;color:var(--c-gold)}
.feature h4{font-family:var(--font-display);font-weight:700;font-size:1.3rem;color:var(--c-blue);margin:.5rem 0 .7rem}
.feature p{font-size:.88rem;font-weight:300;line-height:1.65;color:#4a4860}
@media(max-width:860px){.featuregrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.featuregrid{grid-template-columns:1fr}}
/* AREA GRID (Räume und Bereiche) */
.areagrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:3.5rem}
.area{background:#fff;border:1px solid rgba(28,26,55,.08);overflow:hidden;box-shadow:0 28px 56px -42px rgba(28,26,55,.55);display:flex;flex-direction:column}
.area .aimg{aspect-ratio:4/3;position:relative;overflow:hidden;background:var(--c-blue)}
.area .aimg img{width:100%;height:100%;object-fit:cover}
.area .atag{position:absolute;top:1rem;left:1rem;background:rgba(28,26,55,.78);color:var(--c-gold-soft);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;padding:.5em 1em;backdrop-filter:blur(4px)}
.area h4{font-family:var(--font-display);font-weight:700;font-size:1.5rem;color:var(--c-blue);margin:1.3rem 1.4rem .6rem}
.area p{font-size:.9rem;font-weight:300;line-height:1.7;color:#4a4860;margin:0 1.4rem 1.6rem}
@media(max-width:860px){.areagrid{grid-template-columns:1fr}}
/* KULINARIK */
.kulinarik{background:var(--c-cream)}
.kgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-top:3.5rem}
.kcard{background:#fff;border:1px solid rgba(28,26,55,.08);box-shadow:0 24px 50px -40px rgba(28,26,55,.5);display:flex;flex-direction:column;overflow:hidden}
.kcard .kimg{aspect-ratio:3/2;overflow:hidden;background:var(--c-blue)}
.kcard .kimg img{width:100%;height:100%;object-fit:cover}
.kcard h4{font-family:var(--font-display);font-weight:700;font-size:1.25rem;color:var(--c-blue);margin:1.2rem 1.3rem .5rem}
.kcard p{font-size:.84rem;font-weight:300;line-height:1.65;color:#4a4860;margin:0 1.3rem 1.5rem}
@media(max-width:900px){.kgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.kgrid{grid-template-columns:1fr}}
.kdetails{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:3.5rem}
.kdetails .kd h4{font-family:var(--font-display);font-weight:700;font-size:1.4rem;color:var(--c-blue);margin-bottom:.6rem}
.kdetails .kd p{font-size:.92rem;font-weight:300;color:#4a4860}
@media(max-width:820px){.kdetails{grid-template-columns:1fr;gap:2.2rem}}
/* STEPS */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:1.2rem;margin-top:3.5rem}
.step{background:#fff;border:1px solid rgba(28,26,55,.08);padding:1.6rem;box-shadow:0 24px 50px -42px rgba(28,26,55,.5)}
.step .snum{font-family:var(--font-display);font-weight:700;font-size:2.4rem;color:var(--c-gold);line-height:1}
.step h4{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--c-blue);margin:.6rem 0 .5rem}
.step p{font-size:.8rem;font-weight:300;line-height:1.6;color:#4a4860}
@media(max-width:980px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
/* sorglos / banner */
.banner{margin-top:4rem;text-align:center;background:var(--c-blue);color:var(--c-cream);padding:clamp(2.6rem,5vw,4.2rem)}
.banner h3{font-family:var(--font-display);font-weight:700;font-size:clamp(1.6rem,3.4vw,2.4rem);color:#fff;max-width:26ch;margin:0 auto 1rem;line-height:1.15}
.banner p{max-width:62ch;margin:0 auto 2rem;font-weight:300;color:rgba(245,239,226,.85)}
/* GALLERY */
.gallery{background:var(--c-cream-2)}
.grid-gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:14px;margin-top:3rem}
.gallery-item{position:relative;overflow:hidden;cursor:pointer;transition:transform .6s var(--ease);border:0;padding:0;background:var(--c-blue);font:inherit;text-align:inherit}
.gallery-item img{width:100%;height:100%;object-fit:cover}
.gallery-item:hover{transform:scale(.985)}
.gallery-item::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(28,26,55,.55));opacity:0;transition:opacity .4s}
.gallery-item:hover::after{opacity:1}
.gallery-item .ico{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.6rem;opacity:0;transition:opacity .4s;transform:scale(.8);z-index:2}
.gallery-item:hover .ico{opacity:1;transform:scale(1)}
.gallery-item.big{grid-column:span 2;grid-row:span 2}.gallery-item.tall{grid-row:span 2}.gallery-item.wide{grid-column:span 2}
@media(max-width:820px){.grid-gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}.gallery-item.big{grid-column:span 2;grid-row:span 2}}
.lightbox{position:fixed;inset:0;background:rgba(28,26,55,.94);z-index:2000;display:none;align-items:center;justify-content:center;padding:3vw}
.lightbox.open{display:flex}
.lightbox .lbimg{width:min(1100px,92vw);height:min(75vh,88vh);box-shadow:0 30px 80px rgba(0,0,0,.6);object-fit:cover;background:var(--c-blue)}
.lightbox .close{position:absolute;top:24px;right:30px;color:#fff;font-size:2rem;cursor:pointer}
.lightbox .nav-btn{position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-size:2.4rem;cursor:pointer;padding:1rem;opacity:.7;transition:opacity .3s}
.lightbox .nav-btn:hover{opacity:1}.lightbox .prev{left:10px}.lightbox .next{right:10px}
/* ANFAHRT */
.anfahrt{background:var(--c-cream-2)}
.map-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;margin-top:3rem;align-items:stretch}
.map-embed{position:relative;aspect-ratio:4/3;border:1px solid rgba(28,26,55,.12);overflow:hidden;background:var(--c-blue)}
.map-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.2) contrast(1.02)}
.commute{background:#fff;border:1px solid rgba(28,26,55,.12);padding:2rem;display:flex;flex-direction:column;justify-content:center}
.commute label{display:block;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--c-muted);margin:1.1rem 0 .5rem}
.commute label:first-of-type{margin-top:0}
.commute input,.commute select{width:100%;padding:.85em 1em;border:1px solid rgba(28,26,55,.18);background:var(--c-cream);font-family:var(--font-body);font-size:.95rem}
.commute .btn{margin-top:1.6rem;justify-content:center}
.facts{display:flex;flex-wrap:wrap;gap:0;margin-top:1.8rem;border-top:1px solid rgba(28,26,55,.12);padding-top:1.4rem}
.facts .f{flex:1 1 120px}
.facts .f b{font-family:var(--font-display);font-weight:700;font-size:1.3rem;color:var(--c-gold);display:block}
.facts .f span{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted)}
@media(max-width:820px){.map-grid{grid-template-columns:1fr}}
/* QUOTE */
.quote{color:var(--c-cream);text-align:center;position:relative;isolation:isolate}
.quote::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(28,26,55,.84),rgba(28,26,55,.9))}
.quote blockquote{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:clamp(1.6rem,3.6vw,2.6rem);max-width:26ch;margin:0 auto;line-height:1.3}
.quote cite{display:block;margin-top:1.6rem;font-family:var(--font-body);font-style:normal;font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--c-gold-soft)}
/* KONTAKT */
.kontakt{background:var(--c-cream)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.chip{font-size:.68rem;letter-spacing:.04em;border:1px solid rgba(147,120,49,.5);color:var(--c-gold);padding:.42em .9em;border-radius:40px}
.kontakt-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);margin-top:3rem}
.kform .frow{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.kform label{display:block;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--c-muted);margin:1.1rem 0 .45rem}
.kform input,.kform select,.kform textarea{width:100%;padding:.85em 1em;border:1px solid rgba(28,26,55,.18);background:#fff;font-family:var(--font-body);font-size:.95rem;color:var(--c-ink)}
.kform textarea{resize:vertical;min-height:120px}
.kform .btn{margin-top:1.8rem;justify-content:center;width:100%}
.kinfo .ki{margin-bottom:1.8rem}
.kinfo .ki .k-lbl{font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--c-gold);margin-bottom:.4rem}
.kinfo .ki a,.kinfo .ki p{font-family:var(--font-display);font-weight:700;font-size:1.35rem;color:var(--c-blue);line-height:1.3}
@media(max-width:820px){.kontakt-grid{grid-template-columns:1fr}.kform .frow{grid-template-columns:1fr}}
/* FOOTER */
footer{background:var(--c-blue);color:rgba(245,239,226,.75);padding:4.5rem var(--pad) 2.5rem}
.foot-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:2.5rem}
.foot-brand .mono{font-family:var(--font-display);font-weight:700;font-size:1.5rem;letter-spacing:.38em;color:#fff;text-indent:.38em}
.foot-brand p{font-size:.86rem;font-weight:300;max-width:34ch;margin-top:1rem}
footer h5{font-family:var(--font-body);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--c-gold-soft);margin-bottom:1.1rem}
footer ul{list-style:none}footer li{margin-bottom:.6rem;font-size:.86rem;font-weight:300}
footer a:hover{color:var(--c-gold-soft)}
.foot-bottom{max-width:var(--maxw);margin:3rem auto 0;padding-top:1.6rem;border-top:1px solid rgba(147,120,49,.25);display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.7rem;letter-spacing:.06em;color:rgba(245,239,226,.5)}
@media(max-width:680px){.foot-grid{grid-template-columns:1fr}}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
/* ═══════════════════════════════════════════════════════════
   UPDATE — Butler Black (900) für alle Überschriften
   Hinweis: Butler besitzt keinen echten Kursivschnitt; die
   kursiven Akzent-Headlines werden als geneigtes Butler Black
   dargestellt (synthetischer Kursiv).
   ═══════════════════════════════════════════════════════════ */
.hero h1, h1, h2, h3, h4, .lead-h2, .sub-h3{font-weight:900}
.lead-h2 em, h1 em, h2 em, h3 em, h4 em{font-weight:900;font-style:italic}

/* ═══════════════════════════════════════════════════════════
   UPDATE — Haus-Sektion: vollbreites Feature-Bild im Fokus
   ═══════════════════════════════════════════════════════════ */
#haus .haus-feature{position:relative;margin:0 0 clamp(2.4rem,5vw,4rem);overflow:hidden}
#haus .haus-feature-img{width:100%;height:clamp(360px,52vh,640px);background-color:var(--c-blue);box-shadow:0 40px 80px -50px rgba(28,26,55,.55)}
#haus .haus-feature-img img{width:100%;height:100%;object-fit:cover;object-position:center 55%}
#haus .haus-feature figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.4rem clamp(20px,5vw,80px);color:rgba(245,239,226,.92);font-family:var(--font-body);font-size:.7rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
#haus .haus-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media(max-width:820px){
  #haus .haus-feature-img{height:clamp(240px,60vw,400px)}
  #haus .haus-feature-img img{object-position:center}
  #haus .haus-grid{grid-template-columns:1fr;gap:2rem}
}