/* Beispielhotel Mustermann — gemeinsames Stylesheet (Beispielseite von Luftraumwerk) */
:root{
  --gold:#8B6B30;
  --gold-light:#D7BE8E;
  --ink:#1E1E1E;
  --black:#0d0d0d;
  --beige:#DFD2C8;
  --cream:#F4EFE9;
  --white:#FDFCFA;
  --ease:cubic-bezier(0.16,1,0.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Jost',sans-serif;font-weight:300;color:var(--ink);
  background:var(--white);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Ibarra Real Nova',serif;font-weight:400;line-height:1.15}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.mono{font-family:'Fragment Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.wrap{max-width:1512px;margin:0 auto;padding:0 64px}
h2{font-size:clamp(28px,2.8vw,40px);line-height:1.33}
.center{text-align:center}

/* Reveal — wie im Vorbild: Texte von unten, Bilder seitlich hereingefahren */
.rv{opacity:0;transform:translateY(38px);transition:opacity 2.4s var(--ease),transform 2.4s var(--ease)}
.rv.on{opacity:1;transform:none}
/* Karten & Zitate: größerer Weg von unten */
.rv-up{opacity:0;transform:translateY(100px);transition:opacity 2.6s var(--ease),transform 2.6s var(--ease)}
.rv-up.on{opacity:1;transform:none}
/* Bilder: von links bzw. von rechts */
.rv-l{opacity:0;transform:translateX(-110px);transition:opacity 2.6s var(--ease),transform 2.6s var(--ease)}
.rv-r{opacity:0;transform:translateX(110px);transition:opacity 2.6s var(--ease),transform 2.6s var(--ease)}
.rv-l.on,.rv-r.on{opacity:1;transform:none}
@media(max-width:760px){
  .rv-r{transform:translateX(48px)}
  .rv-l{transform:translateX(-48px)}
}
@media(prefers-reduced-motion:reduce){
  .rv,.rv-up,.rv-l,.rv-r{transition-duration:.01ms;transform:none}
}

/* Buttons */
.btn{
  display:inline-block;font-size:14px;letter-spacing:.08em;
  padding:14px 34px;border-radius:999px;border:1px solid var(--ink);
  transition:background .3s ease,color .3s ease;cursor:pointer;background:transparent;
  font-family:'Jost',sans-serif;
}
.btn:hover{background:var(--ink);color:#fff}
.btn.solid{background:var(--gold);border-color:var(--gold);color:#fff}
.btn.solid:hover{background:#6f5526;border-color:#6f5526}
.btn.light{border-color:#fff;color:#fff}
.btn.light:hover{background:#fff;color:var(--ink)}

/* ---------- Header ---------- */
#hdr{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 40px;
  transition:background .4s ease, box-shadow .4s ease;
}
#hdr.scrolled{background:rgba(253,252,250,.94);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(30,30,30,.07)}
#hdr .logo{display:flex;align-items:center;gap:12px;color:#fff;transition:color .4s ease}
#hdr.scrolled .logo{color:var(--ink)}
#hdr .logo svg{width:38px;height:38px;flex:none}
#hdr .logo .ltxt{display:flex;flex-direction:column}
#hdr .logo .lname{font-family:'Ibarra Real Nova',serif;font-size:15px;letter-spacing:.14em;text-transform:uppercase;line-height:1.3}
#hdr .logo .lsub{font-family:'Fragment Mono',monospace;font-size:9px;letter-spacing:.28em;text-transform:uppercase;opacity:.75}
#hdr nav{display:flex;align-items:center;gap:34px}
#hdr nav a{font-size:14px;letter-spacing:.06em;color:#fff;font-weight:400;transition:color .4s ease, opacity .2s ease}
#hdr.scrolled nav a{color:var(--ink)}
#hdr nav a:hover{opacity:.6}
#hdr nav a.book{border:1px solid currentColor;border-radius:999px;padding:9px 22px}
@media(max-width:860px){#hdr nav a:not(.book){display:none}}

/* Burger — zwei Striche, die sich zum X drehen */
#burger{
  width:34px;height:34px;margin-left:22px;flex:none;position:relative;
  background:none;border:none;cursor:pointer;padding:0;z-index:2;
}
#burger span{
  position:absolute;left:4px;width:26px;height:1px;background:#fff;
  transition:transform 1.3s var(--ease),background .8s ease;
}
#burger span:first-child{top:15px}
#burger span:last-child{top:19px}
#hdr.scrolled #burger span{background:var(--ink)}
body.dark #hdr.scrolled #burger span{background:#fff}
#burger:hover span:first-child{transform:translateY(-2px)}
#burger:hover span:last-child{transform:translateY(2px)}
/* offen: Striche treffen sich in der Mitte und kreuzen sich zum X */
body.menu-open #burger span{background:#fff}
body.menu-open #burger span:first-child{transform:translateY(2px) rotate(45deg)}
body.menu-open #burger span:last-child{transform:translateY(-2px) rotate(-45deg)}
body.menu-open #burger:hover span:first-child{transform:translateY(2px) rotate(135deg)}
body.menu-open #burger:hover span:last-child{transform:translateY(-2px) rotate(45deg)}

/* Header bleibt über dem Overlay: nur Logo + X sichtbar */
body.menu-open #hdr{z-index:70;background:transparent;box-shadow:none}
body.menu-open #hdr .logo{color:#fff}
body.menu-open #hdr nav a{opacity:0;pointer-events:none;transition:opacity .3s ease}

/* Burger-Overlay — gleitet von rechts nach links herein */
#menu{
  position:fixed;inset:0;z-index:60;background:var(--black);
  transform:translateX(100%);visibility:hidden;
  transition:transform 1.6s var(--ease),visibility 1.6s;
  padding:22px 40px;overflow-y:auto;
}
#menu.open{transform:translateX(0);visibility:visible}
#menu .mtop{display:flex;align-items:center;justify-content:space-between;visibility:hidden}
#menu .mtop .logo{display:flex;align-items:center;gap:12px;color:#fff}
#menu .mtop .logo svg{width:38px;height:38px;flex:none}
#menu .mtop .logo .ltxt{display:flex;flex-direction:column}
#menu .mtop .logo .lname{font-family:'Ibarra Real Nova',serif;font-size:15px;letter-spacing:.14em;text-transform:uppercase;line-height:1.3}
#menu .mtop .logo .lsub{font-family:'Fragment Mono',monospace;font-size:9px;letter-spacing:.28em;text-transform:uppercase;opacity:.75}
#menu nav{margin-top:56px;display:flex;flex-direction:column;align-items:flex-start}
#menu nav a{
  font-size:clamp(17px,1.5vw,20px);color:#e9e4dc;padding:9px 0;
  opacity:0;transform:translateX(46px);
  transition:opacity 1.4s var(--ease),transform 1.4s var(--ease),color .25s ease;
}
#menu.open nav a{opacity:1;transform:none}
#menu nav a:hover{color:var(--gold-light)}
#menu .msoc{
  display:flex;gap:26px;margin-top:26px;font-size:12px;color:#9a958c;
  opacity:0;transform:translateX(46px);
  transition:opacity 1.4s var(--ease) 1.2s,transform 1.4s var(--ease) 1.2s;
}
#menu.open .msoc{opacity:1;transform:none}
#menu .msoc a:hover{color:#fff}
body.menu-open{overflow:hidden}

/* Dunkle Seiten: Header bleibt hell auf dunklem Grund */
body.dark #hdr.scrolled{background:rgba(13,13,13,.92)}
body.dark #hdr.scrolled .logo,body.dark #hdr.scrolled nav a{color:#fff}

/* ---------- Inhaltsschicht, die über den Hero fährt ---------- */
#page{position:relative;z-index:2;background:var(--white);box-shadow:0 -30px 60px rgba(0,0,0,.28)}
body.dark #page{background:var(--black)}

/* ---------- Unterseiten-Hero: bleibt stehen, Inhalt schiebt sich darüber ---------- */
.page-hero{position:sticky;top:0;z-index:0;min-height:700px;height:84svh;max-height:920px;display:flex;align-items:flex-end;overflow:hidden}
.page-hero .bg{position:absolute;inset:0;background-size:cover;background-position:center}
.page-hero .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.5) 0%,rgba(10,10,10,.25) 45%,rgba(10,10,10,.78) 100%)}
.page-hero h1{position:relative;z-index:2;color:#fff;font-size:clamp(32px,4.1vw,54px);max-width:1512px;margin:0 auto;width:100%;padding:0 64px 60px}

/* ---------- Footer ---------- */
footer{background:var(--black);color:#CFC8BE;font-size:15px}
footer .top{
  display:grid;grid-template-columns:repeat(3,1fr);gap:50px;
  padding:90px 0 60px;border-bottom:1px solid rgba(255,255,255,.12);
}
footer h4{font-family:'Fragment Mono',monospace;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-light);margin-bottom:20px;font-weight:400}
footer ul{list-style:none}
footer ul li{margin-bottom:10px}
footer ul a:hover{color:#fff}
footer .info{
  display:grid;grid-template-columns:repeat(3,1fr);gap:44px;
  padding:60px 0;border-bottom:1px solid rgba(255,255,255,.12);
}
footer .info p{margin-top:2px;line-height:1.7}
footer .base{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:34px 0;font-size:13px;flex-wrap:wrap;
}
footer .base .soc{display:flex;gap:24px}
footer .base a:hover{color:#fff}
@media(max-width:860px){footer .top,footer .info{grid-template-columns:1fr 1fr}}
@media(max-width:560px){footer .top,footer .info{grid-template-columns:1fr}}

/* ---------- Floating Reserve + Badge ---------- */
/* Schwebender Reservierungsknopf — Monogramm im Quadrat, wie im Vorbild */
#reserve{
  position:fixed;right:26px;bottom:26px;z-index:40;
  display:flex;align-items:stretch;border-radius:10px;overflow:hidden;
  box-shadow:0 14px 38px rgba(0,0,0,.26);font-size:14.5px;letter-spacing:.03em;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
#reserve .ico{
  flex:none;width:52px;display:flex;align-items:center;justify-content:center;
  background:var(--beige);
  font-family:'Ibarra Real Nova',serif;font-style:italic;font-weight:500;
  font-size:29px;line-height:1;color:var(--ink);
  padding-bottom:3px;                 /* optischer Ausgleich der Kursiven */
  border-right:1px solid rgba(30,30,30,.12);
  transition:background .4s ease,color .4s ease;
}
#reserve .txt{
  background:var(--cream);color:var(--ink);
  padding:16px 22px;display:flex;align-items:center;
  transition:background .4s ease;
}
#reserve:hover{transform:translateY(-3px);box-shadow:0 20px 46px rgba(0,0,0,.32)}
#reserve:hover .ico{background:var(--gold);color:#fff}
#reserve:hover .txt{background:#fff}
#lw-badge{
  position:fixed;left:26px;bottom:26px;z-index:40;
  background:rgba(10,10,10,.82);backdrop-filter:blur(8px);color:#fff;
  font-family:'Fragment Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  padding:10px 16px;border-radius:999px;transition:background .3s ease;
}
#lw-badge:hover{background:rgba(10,10,10,.95)}
@media(max-width:760px){#lw-badge{display:none}}

/* ---------- Dunkle Sektionen ---------- */
.sec-dark{background:var(--black);color:#e9e4dc}
.sec-dark h2{color:#fff}

/* ---------- Cookie-Hinweis (Attrappe wie im Vorbild) ---------- */
#cookiebar{
  position:fixed;inset:0;z-index:90;background:rgba(10,10,10,.55);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;transition:opacity .4s var(--ease);
}
#cookiebar.on{opacity:1}
#cookiebar .cc-box{
  background:#fff;color:var(--ink);border-radius:2px;
  width:560px;max-width:92vw;padding:44px 46px;
  box-shadow:0 30px 70px rgba(0,0,0,.3);
}
#cookiebar h3{font-size:20px;font-weight:500;font-family:'Jost',sans-serif;margin-bottom:14px}
#cookiebar p{font-size:13.5px;line-height:1.65;color:#5c564e}
#cookiebar .cc-acts{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap}
#cookiebar .cc-acts button{
  flex:1;min-width:180px;border:1px solid var(--beige);background:var(--beige);color:var(--ink);
  border-radius:2px;padding:13px 18px;font-family:'Jost',sans-serif;font-size:13px;
  letter-spacing:.09em;text-transform:uppercase;cursor:pointer;transition:background .3s ease;
}
#cookiebar .cc-acts button:hover{background:var(--gold-light);border-color:var(--gold-light)}
#cookiebar .cc-links{
  display:flex;gap:18px;margin-top:22px;font-size:12px;color:#8a8378;flex-wrap:wrap;align-items:center;
}
#cookiebar .cc-links a{text-decoration:underline;text-underline-offset:3px}
#cookiebar .cc-links a:hover{color:var(--ink)}
#cookiebar .cc-note{margin-left:auto;font-style:italic}
@media(max-width:560px){#cookiebar .cc-box{padding:32px 26px}}

/* ---------- Mitteilungs-Popup (wie im Vorbild) ---------- */
#mitteilung{
  position:fixed;inset:0;z-index:88;background:rgba(10,10,10,.55);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;transition:opacity .4s var(--ease);
}
#mitteilung.on{opacity:1}
#mitteilung .mt-box{
  position:relative;background:#fff;color:var(--ink);border-radius:2px;
  width:560px;max-width:92vw;padding:52px;
  box-shadow:0 30px 70px rgba(0,0,0,.3);
  transform:translateY(16px);transition:transform .5s var(--ease);
}
#mitteilung.on .mt-box{transform:none}
#mitteilung .mt-x{
  position:absolute;top:18px;right:20px;width:26px;height:26px;
  background:none;border:none;cursor:pointer;
}
#mitteilung .mt-x::before,#mitteilung .mt-x::after{
  content:"";position:absolute;left:3px;top:12px;width:20px;height:1px;background:#8a8378;
  transition:background .25s ease;
}
#mitteilung .mt-x::before{transform:rotate(45deg)}
#mitteilung .mt-x::after{transform:rotate(-45deg)}
#mitteilung .mt-x:hover::before,#mitteilung .mt-x:hover::after{background:var(--ink)}
#mitteilung .mt-kicker{
  font-family:'Fragment Mono',monospace;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);
}
#mitteilung h3{
  font-family:'Ibarra Real Nova',serif;font-size:30px;font-weight:400;margin-top:10px;
}
#mitteilung .mt-rule{width:52px;height:1px;background:var(--gold-light);margin:18px 0 22px}
#mitteilung .mt-date{font-weight:500;font-size:17px;margin-bottom:14px}
#mitteilung p{font-size:14px;line-height:1.7;color:#5c564e}
@media(max-width:560px){#mitteilung .mt-box{padding:40px 26px}}

/* Badge: "Beispielseite von" weiß, Marke in Acid-Gelb (wie auf luftraumwerk.de) */
#lw-badge span{color:#E8FF00}

/* Vorrang: Reveal-Dauer darf nicht von Knopf-/Karten-Übergängen überschrieben werden.
   (Doppelte Klasse = höhere Spezifität, wirkt nur solange das Element noch nicht "on" ist.) */
.rv.rv:not(.on){transition:opacity 2.4s var(--ease),transform 2.4s var(--ease)}
.rv-up.rv-up:not(.on),
.rv-l.rv-l:not(.on),
.rv-r.rv-r:not(.on){transition:opacity 2.6s var(--ease),transform 2.6s var(--ease)}