@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
   
:root{
  --bg: #fff;
  --surface: rgba(255,255,255,.08);
  --surface2: rgba(255,255,255,.12);
  --text: #2c2c2c;
  --muted: #2c2c2c;
  --black: rgba(255,255,255,.55);
  --black: #2c2c2c;
  --white: #fff;
  --yellow:#e49e00;
  --yellow-15: #e4a00021;
  --ring: #e49e00;
  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --radius: 20px;
  --radius-lg: 26px;
  --radius: 10px;

  --container: 1500px;
  --header-h: 75px;
}

*,
*::before,
*::after{ box-sizing: border-box; }

html,body{ height:100%; }

body{
  margin:0;
  font-family: "Outfit", sans-serif;
  background: var(--bg);
  color: var(--text) !important;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

.logo{
  width: 210px;
  height: auto;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button, input, select{ font: inherit; }


.icon-nav {
  font-size: 25px;
}


.container{
  width: min(var(--container), calc(100% - 40px));
  margin-inline: auto;
}

.skip-link{
  position:absolute;
  left:-10px;
  top:10px;
  background:#1c1c1c;
  color:#fff;
  padding:10px 12px;
  border-radius: var(--radius);
  z-index:9999;
}
.skip-link:focus{ left:10px; outline:2px solid var(--yellow); }

/* ===================== Header ===================== */

.site-header{
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 18px 0;
  background: transparent;
}

.header-shell{
  width: min(var(--container), calc(100% - 28px));
  margin-inline: auto;
}

.header-bar{
  height: var(--header-h);
  border-radius: var(--radius);
  background: rgba(255,255,255,.95);
  color: #2c2c2c;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 18px;
  box-shadow: 0px 0px 18px 0px rgba(0,0,0,.2);
  backdrop-filter: blur(10px);
}

.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: .28em;
  font-size: 24px;
  position: relative;
}
.brand__name{ line-height:1; }
.brand__dot{
  width: 7px;
  height: 7px;
  background: var(--yellow);
  border-radius: var(--radius);
  position: absolute;
  top: 4px;
  left: 56px; 
}
/* ===================== Header NAV Hover wie Screenshot ===================== */

/* Nav-Bereich soll die volle Header-Höhe mitnehmen */
.nav,
.nav__list{
  height: 100%;
}

.nav__list{
  display:flex;
  gap: 0;                 /* Tabs direkt nebeneinander wie im Screenshot */
  align-items: stretch;   /* volle Höhe */
  list-style:none;
  padding:0;
  margin:0;
}

/* Link als "Tab" über volle Höhe */
.nav__link{
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 26px;        /* Breite wie Tab */
  font-weight: 600;
  font-size: 16px;
  color: #2c2c2c;
  border-radius: var(--radius);      /* keine Pill-Form */
}

/* Gelbe Unterstreichung */
.nav__link::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;            /* gelbe Linie */
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .5s ease;
}

/* Hover nur auf echten Hover-Geräten */
@media (hover:hover) and (pointer:fine){
  .nav__link:hover{
    background: rgba(0,0,0,.06);
    border-radius: 0px;
  }
  .nav__link:hover::after{
    transform: scaleX(0.5);
  }
}

/* Optional: "aktiver" Menüpunkt */
.nav__link.is-active{
  background: rgba(0,0,0,.06);
}
.nav__link.is-active::after{
  transform: scaleX(0.5);
}
/* ===================== Header ICON Hover wie Screenshot ===================== */

/* Actions-Bereich volle Höhe */
.header-actions{
  display: flex;          /* wichtig */
  flex-direction: row;    /* wichtig */
  flex-wrap: nowrap;      /* wichtig: niemals umbrechen */
  align-items: stretch;   /* volle Höhe */
  height: 100%;
  gap: 0;
  margin-left: 10px;
}

/* Buttons dürfen nicht schrumpfen (sonst wrap/stack bei kleinen widths) */
.icon-btn{
  flex: 0 0 58px;         /* feste Segmentbreite */
  height: 100%;
  width: 58px;
  border-radius: 0;
  background: transparent;
  display: flex;
  border-width: 0px;
  align-items: center;
  justify-content: center;
  position: relative;
}


/* gelbe Linie unten */
.icon-btn::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .5s ease;
}

@media (hover:hover) and (pointer:fine){
  .icon-btn:hover{
    background: rgba(0,0,0,.06);
  }
  .icon-btn:hover::after{
    transform: scaleX(0.5);
  }
}

/* Touch: kein Hover */
@media (hover:none) and (pointer:coarse){
  .icon-btn:hover{ background: transparent; }
  .icon-btn:hover::after{ transform: scaleX(0); }
}

/* Optional: "aktives" Icon (z.B. Warenkorb offen) */
.icon-btn.is-active{
  background: rgba(0,0,0,.06);
}
.icon-btn.is-active::after{
  transform: scaleX(0.5);
}

.icon-btn:focus-visible{
  outline: 3px solid rgba(240,196,55,.6);
  outline-offset: 2px;
}

.icon-btn--menu{ display:none; }




/* ===================== HERO ===================== */

.hero{
  position: relative;
  min-height: 780px;
  padding: 48px 0 28px;
}


.hero__grid {
  position: relative;
  display: grid;
  align-items: center;
  justify-items: center;
  text-align: center;
  padding-top: 4%;
}

.hero__content--center{
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__lead{
  max-width: 700px;
  text-align: center;
}

.hero__cta{
  justify-content: center;
}

.hero__trust{
  justify-content: center;
}

.kicker{
  margin:0 0 14px;
  color: var(--white);
  font-weight: 550;
  letter-spacing: .02em;
}

.hero__title{
  margin:0;
  font-size: clamp(34px, 3.8vw, 54px);
  line-height: 1.06;
  font-weight: 760;
  color: var(--white);
  letter-spacing: -0.02em;
}
.hero__title span{ font-weight: 820; }
.hero__lead{
  margin: 16px 0 0;
  color: var(--white);
  max-width: 52ch;
  font-size: 17px;
}

.hero__cta{
  display:flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}


.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  padding: 12px 18px;
  font-weight: 700;
  letter-spacing: .01em;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  cursor:pointer;
}
.btn--primary{
  background: var(--yellow);
  color: #fff;
  border-color: transparent;
}
.btn--ghost{
  background: rgb(0 0 0 / 6%);
  color: var(--text);
}
.btn--small{ padding: 10px 14px; font-weight: 650; }
.btn--full{ width:100%; }

@media (hover:hover) and (pointer:fine){
  .btn:hover{ transform: translateY(-1px); }
  .btn--ghost:hover{ background: rgba(255,255,255,.10); }
}
.btn:focus-visible{
  outline: 4px solid var(--ring);
  outline-offset: 2px;
}

.hero__trust{
  display:flex;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.trust-pill{
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 10px 12px;
  display:flex;
  align-items:center;
  gap: 10px;
  color: var(--muted);
  font-weight: 600;
  backdrop-filter: blur(10px);
}
.trust-pill__dot{
  width: 9px; height: 9px; border-radius: 10px;
  background: rgba(240,196,55,.95);
  box-shadow: 0 0 0 6px rgba(240,196,55,.15);
}
.trust-pill__dot--alt{ background: rgba(170, 255, 210, .95); box-shadow: 0 0 0 6px rgba(170,255,210,.12); }

/* Hero visual */
.hero__visual{
  position: relative;
  min-height: 520px;
  display:grid;
  place-items:center;
}

.float{
  position:absolute;
  width: min(320px, 44vw);
  filter: drop-shadow(0 24px 44px rgba(0,0,0,.5));
  opacity: .98;
}
.float--top{
  top: 6px;
  right: 6px;
  transform: rotate(-18deg);
}
.float--bottom{
  bottom: -6px;
  right: 64px;
  transform: rotate(22deg);
  width: min(380px, 54vw);
}

/* CSS cylinder (center) */
.cylinder{
  width: min(210px, 32vw);
  height: min(280px, 40vw);
  position: relative;
  transform: rotate(-18deg);
  filter: drop-shadow(0 26px 55px rgba(0,0,0,.55));
}
.cylinder__cap{
  position:absolute;
  left: 22%;
  top: 0;
  width: 56%;
  height: 24%;
  border-radius: 10px;
  background: radial-gradient(circle at 35% 35%, #f3f3f3, #9d9d9d 55%, #2a2a2a 90%);
  box-shadow: inset 0 0 0 10px rgba(255,255,255,.08);
}
.cylinder__body{
  position:absolute;
  left: 14%;
  top: 14%;
  width: 72%;
  height: 84%;
  border-radius: 34px;
  background: linear-gradient(90deg, #2a2a2a, #bdbdbd 30%, #1c1c1c 65%, #6d6d6d);
}
.cylinder__shine{
  position:absolute;
  left: 18%;
  top: 22%;
  width: 24%;
  height: 66%;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,0));
  filter: blur(.2px);
  opacity: .9;
}

/* Responsive hero */
@media (max-width: 980px){
  .hero{ padding-top: 30px; min-height: auto; }
  .hero__grid{ grid-template-columns: 1fr; }
  .hero__visual{ min-height: 440px; }
  .float--bottom{ right: 10px; }
}
@media (max-width: 520px){
  .header-bar{ padding: 0 12px; }
  .brand{ font-size: 22px; }
  .brand__dot{ left: 52px; }
  .hero__lead{ font-size: 16px; }
}

/* ===================== Sections ===================== */

.section{
  padding: 70px 0;
}
.section--accent{
  padding: 78px 0;
}
.section--soft{
  background: rgba(255,255,255,.02);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.section__head{
  margin-bottom: 22px;
}
.section__head--row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.section__title{
  margin:0;
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: -0.02em;
}
.section__subtitle{
  margin: 10px 0 0;
  color: var(--muted);
  max-width: 68ch;
}

.grid{
  display:grid;
  gap: 16px;
}
.grid--3{ grid-template-columns: repeat(3, 1fr); }
.grid--2{ grid-template-columns: repeat(2, 1fr); }

@media (max-width: 980px){
  .grid--3{ grid-template-columns: 1fr; }
  .grid--2{ grid-template-columns: 1fr; }
  .section{ padding: 56px 0; }
}

.card__icon{
  width: 42px; height: 42px;
  border-radius: 14px;
  background: rgba(240,196,55,.16);
  color: rgba(240,196,55,.95);
  display:grid;
  place-items:center;
  margin-bottom: 12px;
}
.card__icon svg{ width: 22px; height: 22px; fill: currentColor; }
.card__title{ margin:0; font-size: 18px; }
.card__text{ margin: 8px 0 0; color: var(--muted); }

/* CTA section */
.cta{
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.12);
  padding: 22px;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  backdrop-filter: blur(12px);
}
.cta__title{ margin:0; font-size: 26px; }
.cta__subtitle{ margin: 10px 0 0; color: var(--muted); }
.cta__bullets{ margin: 14px 0 0; padding-left: 18px; color: var(--muted); }
.cta__bullets li{ margin: 7px 0; }

.cta__form{
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 14px;
}
.field{ display:block; margin-bottom: 12px; }
.field__label{ display:block; font-size: 13px; color: var(--black); margin-bottom: 6px; }
.field__control{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgb(255 255 255);
  border: 1px solid rgba(213, 152, 48, 0.27);
  color: var(--text);
  outline: none;
}
.field__control select {
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  background: rgb(255 255 255);
  border: 1px solid rgba(213, 152, 48, 0.27);
  color: var(--text);
  outline: none;
}
.field__control:focus{ border-color: rgba(240,196,55,.55); box-shadow: 0 0 0 4px rgba(240,196,55,.18); }

.fineprint{ margin: 10px 0 0; font-size: 12px; color: var(--black); }

@media (max-width: 980px){
  .cta{ grid-template-columns: 1fr; }
}

/* Products */
.filter{
  display:flex;
  align-items:center;
  gap: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  padding: 10px 12px;
}

.myloftigo-header  {
  max-width: 200px; height: auto; margin: auto; margin-bottom: 10px;
}

.myloftigo-login  {
  max-width: 250px; height: auto; margin: auto; margin-bottom: 10px;
}


.filter__label{ color: var(--black); font-weight: 600; font-size: 13px; }
.filter__select{
  background: transparent;
  border:0;
  color: var(--text);
  outline:none;
}
.filter__select option{ color: #1c1c1c; }

.product{
  border-radius: var(--radius);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
  transition: transform .12s ease, border-color .12s ease;
}
.product__top{
  padding: 16px;
  position: relative;
  min-height: 150px;
  background: radial-gradient(180px 120px at 30% 30%, rgba(240,196,55,.22), rgba(255,255,255,0) 60%);
}
.badge{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  color: var(--text);
  font-weight: 700;
  font-size: 12px;
}
.product__mock{
  position:absolute;
  right: 12px; bottom: -10px;
  width: 120px; height: 120px;
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.12);
  transform: rotate(18deg);
}
.product__body{ padding: 16px; }
.product__name{ margin:0; font-size: 18px; }
.product__tag{ margin: 8px 0 0; color: var(--black); font-weight: 650; font-size: 13px; }
.product__desc{ margin: 10px 0 0; color: var(--muted); }
.product__bottom{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.product__price{ font-weight: 800; letter-spacing: -0.01em; }

@media (hover:hover) and (pointer:fine){
  .product:hover{ transform: translateY(-2px); border-color: rgba(240,196,55,.35); }
}

/* Quotes */
.quote{
  border-radius: var(--radius);
  padding: 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
}
.quote__text{ margin:0; color: var(--text); font-size: 16px; }
.quote__meta{ margin: 12px 0 0; color: var(--muted); }

/* Newsletter */
.newsletter{
  margin-top: 18px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  padding: 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.newsletter__title{ margin:0; font-size: 18px; }
.newsletter__text{ margin: 8px 0 0; color: var(--muted); }
.newsletter__form{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.newsletter__input{
  min-width: min(320px, 78vw);
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  outline:none;
}
.newsletter__input:focus{ border-color: rgba(240,196,55,.55); box-shadow: 0 0 0 4px rgba(240,196,55,.18); }

/* FAQ */
.faq{
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.faq__item{
  padding: 0 16px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.faq__item:first-child{ border-top:0; }
.faq__q{
  cursor:pointer;
  padding: 16px 4px;
  font-weight: 700;
  list-style:none;
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__a{
  padding: 0 4px 16px;
  color: var(--muted);
}

/* Footer */
.footer{
  padding: 150px 0px 30px;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.93);
}
.footer__grid{
  display:grid;
  grid-template-columns: 1.2fr 1.8fr;
  gap: 18px;
}
.brand--footer{ color: var(--text); }
.footer__text{ margin: 10px 0 0; color: var(--muted); font-size: 10px;max-width:60ch;}
.footer__cols{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.footer__title{ margin:0 0 10px; font-size: 14px; color: var(--text); }
.footer__link{
  display:block;
  color: var(--muted);
  padding: 3px 0;
font-size: 12px;
}
@media (hover:hover) and (pointer:fine){
  .footer__link:hover{ color: var(--text); }
}
.footer__bottom{
  margin-top: 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  color: var(--black);
}
.footer__top{ color: var(--muted); }

@media (max-width: 980px){
  .footer__grid{ grid-template-columns: 1fr; }
  .footer__cols{ grid-template-columns: 1fr; }
  .footer__bottom{ flex-direction: column; align-items:flex-start; }
}


/* ===================== AUTH (Login/Register) ===================== */

.auth{
  position: relative;
  min-height: calc(100vh - (var(--header-h) + 36px)); /* header padding ca. */
  padding: 46px 0 70px;
  display: grid;
  place-items: center;
  overflow: hidden;
}


.auth__bg::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,11,13,.45), rgba(10,11,13,.82) 62%, rgba(10,11,13,.94));
}

.auth__wrap{
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
}

.auth__card{
  width: min(520px, 100%);
  border-radius: var(--radius);
  padding: 22px;
}

.auth__head{
  padding: 6px 6px 10px;
}

.auth__kicker{
  margin: 0 0 10px;
  color: var(--muted);
  font-weight: 650;
  letter-spacing: .02em;
}

.auth__title{
  margin: 0;
  font-size: clamp(28px, 3.2vw, 38px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-weight: 820;
}

.auth__sub{
  margin: 12px 0 0;
  color: var(--muted);
  max-width: 58ch;
}

.auth__form{
  margin-top: 14px;
}

.auth__row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin: 8px 2px 14px;
  flex-wrap: wrap;
}

.auth__check{
  display:flex;
  align-items:center;
  gap: 10px;
  color: var(--muted);
  font-weight: 650;
  user-select: none;
}

.auth__check input { 
  width: 16px;
  height: 16px;
  accent-color: var(--yellow);
}


.auth__check select { 
  width: 16px;
  height: 16px;
  accent-color: var(--yellow);
}

.auth__link{
  color: rgba(0,0,0,.85);
  text-decoration: none;
  border-bottom: 1px solid rgba(240,196,55,.0);
  transition: border-color .12s ease, color .12s ease;
}

@media (hover:hover) and (pointer:fine){
  .auth__link:hover{
    color: rgba(0,0,0,.95);
    border-bottom-color: var(--yellow);
  }
}

.auth__divider{
  position: relative;
  margin: 14px 0;
  text-align: center;
}

.auth__divider::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:50%;
  height: 1px;
  background: rgba(255,255,255,.12);
}

.auth__divider span{
  position: relative;
  display:inline-block;
  padding: 0 10px;
  background: rgba(10,11,13,.35);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  color: var(--faint);
  font-size: 12px;
  margin-top:20px;
  font-weight: 700;
}

.auth__alert{
  margin: 12px 6px 0;
  padding: 12px 12px;
  border-radius: var(--radius);
  background: rgba(255, 85, 85, .12);
  border: 1px solid rgba(255, 85, 85, .25);
  color: rgba(0,0,0,.92);
}

.auth__fine{
  margin: 12px 6px 0;
  color: var(--faint);
  font-size: 12px;
  line-height: 1.45;
}

.auth .field__control{
  background: rgba(255, 255, 255, 1);
  border-color: rgba(213, 152, 48, 0.27);
}

/* Mobile spacing */
@media (max-width: 520px){
  .auth{ padding: 28px 0 52px; }
  .auth__card{ padding: 18px; border-radius: 18px; }
}


/* ===================== Account Popover (Header) ===================== */

.account{ position: relative; height: 100%; display:flex; align-items: stretch; }

.account-popover{
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: min(380px, calc(100vw - 32px));
  z-index: 200;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
}

.account-popover.is-open{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.account-popover__card{
  background: rgba(255,255,255,.98);
  color: #1c1c1c;
  border-radius: var(--radius);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  border: 1px solid rgba(0,0,0,.06);
  overflow: hidden;
}

.account-popover__top{
  padding: 16px;
}

.account-popover__primary{
  border-radius: var(--radius); 
  padding: 14px 18px;
  font-weight: 800;
  letter-spacing: .02em;
}

.account-popover__alt{
  margin-top: 10px;
  text-align: center;
  color: rgba(0,0,0,.72);
  font-size: 14px;
}

.account-popover__link{
  color: rgba(0,0,0,.9);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.account-popover__divider{
  height: 1px;
  background: rgba(0,0,0,.08);
}

.account-popover__links{
  padding: 12px 16px 16px;
  display:flex;
  flex-direction: column;
  gap: 6px;
}

.account-popover__item{
  padding: 10px 12px;
  border-radius: 12px;                 /* oder var(--radius), aber im Popover meist kleiner schöner */
  color: rgba(0,0,0,.86);

  display:flex;                         /* <-- wichtig */
  align-items:center;                   /* <-- vertikal exakt mittig */
  gap: 10px;
  line-height: 1;                       /* verhindert “Icon hängt” */
}

.account-popover__icon{
  width: 22px;                          /* feste Box => perfekte Ausrichtung */
  height: 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 20px;                      /* statt inline style */
  line-height: 1;
  color: var(--yellow);
  flex: 0 0 22px;
  transform: translateY(.5px);          /* optional: mikro-feintuning */
}

@media (hover:hover) and (pointer:fine){
  .account-popover__item:hover{ background: rgba(0,0,0,.05); }
}

.account-popover__top--user{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
}

.account-popover__hello{
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.01em;
}

.account-popover__email{
  margin-top: 2px;
  color: rgba(0,0,0,.55);
  font-weight: 600;
  font-size: 14px;
}

.account-popover__logout{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius);
  color: #fff;
  background: var(--yellow);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .02em;
  white-space: nowrap;
}

@media (hover:hover) and (pointer:fine){
  .account-popover__logout:hover{
    background: rgb(213 141 0);
  }
}

/* Mobile: Popover etwas nach innen */
@media (max-width: 520px){
  .account-popover{ right: -6px; }
}


/* ===================== Account Overview Page ===================== */

.account-page{
  background: #fff;
  color: #1c1c1c;
  padding: 26px 0 70px;
  margin-top:100px;
}

/* Pills Tabs */
.account-tabs{
  display:flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items:center;
  margin: 6px 0 22px;
}

.account-tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 18px;
  border-radius: var(--radius);
  border: 2px solid rgba(0,0,0,.18);
  color: rgba(0,0,0,.88);
  font-weight: 800;
  letter-spacing: .02em;
  background: #fff;
  text-transform: uppercase;
  font-size: 13px;
}

.account-tab.is-active{
  border-color: var(--yellow);
  color: #1c1c1c;
}

@media (hover:hover) and (pointer:fine){
  .account-tab:hover{
    border-color: rgba(0,0,0,.28);
  }
}

/* Header */
.account-hero{
  padding: 10px 0 18px;
}

.account-hero__title{
  margin: 0;
  font-size: clamp(34px, 3.2vw, 54px);
  letter-spacing: -0.02em;
  font-weight: 900;
}

.account-hero__dot{
  color: var(--yellow);
}

.account-hero__sub{
  margin: 14px 0 0;
  color: rgba(0,0,0,.75);
  font-size: 18px;
  max-width: 92ch;
}

/* Two column layout */
.account-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 28px;
  margin-top: 26px;
}

@media (max-width: 980px){
  .account-grid{
    grid-template-columns: 1fr;
  }
}

/* Panels */
.panel__head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.panel__title{
  margin:0;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.accent-dot{
  color: var(--yellow);
}

.panel__link{
  color: rgba(0,0,0,.88);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (hover:hover) and (pointer:fine){
  .panel__link:hover{
    color: #000;
  }
}

/* Orders Table Card */
.table-card{
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 12px 40px rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.08);
  overflow: hidden;
}

.table{
  width:100%;
  border-collapse: collapse;
  font-size: 14px;
}

.table thead th{
  text-align:left;
  padding: 14px 16px;
  background: rgba(0,0,0,.06);
  font-weight: 900;
  color: rgba(0,0,0,.9);
  white-space: nowrap;
}

.table tbody td{
  padding: 16px;
  border-top: 1px solid rgba(0,0,0,.08);
  color: rgba(0,0,0,.85);
  vertical-align: middle;
}

.table__menu{
  width: 54px;
  text-align: right;
}

.status{
  font-weight: 900;
  color: rgba(0,0,0,.88);
}

/* Kebab button */
.kebab{
  width: 42px;
  height: 38px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  display:grid;
  place-items:center;
  cursor:pointer;
}

.kebab span{
  display:block;
  width: 4px;
  height: 4px;
  border-radius: var(--radius);
  background: rgba(0,0,0,.75);
  margin: 2px 0;
}

@media (hover:hover) and (pointer:fine){
  .kebab:hover{ background: rgba(0,0,0,.06); }
}

/* Services Card */
.services-card{
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 40px rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.08);
  padding: 18px;
}

.services-card__text{
  margin: 0;
  color: rgba(0,0,0,.78);
  font-size: 16px;
  line-height: 1.5;
}

.services-card__link{
  color: rgba(0,0,0,.92);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Mobile: table scroll */
@media (max-width: 720px){
  .table-card{ overflow-x:auto; }
  .table{ min-width: 720px; }
}

.settings-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 18px;
}
@media (max-width: 980px){
  .settings-grid{ grid-template-columns: 1fr; }
}

.settings-card{
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 40px rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.08);
  padding: 18px;
}

.settings-card__head{ margin-bottom: 10px; }
.settings-card__title{
  margin:0;
  font-size: 18px;
  font-weight: 900;
}
.settings-card__sub{
  margin: 6px 0 0;
  color: rgba(0,0,0,.65);
}

.settings-card__text{
  margin: 10px 0 12px;
  color: rgba(0,0,0,.75);
}

.settings-alert{
  margin: 14px 0 18px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
}
.settings-alert--ok{
  background: rgba(0, 200, 120, .10);
  border-color: rgba(0, 200, 120, .22);
}
.settings-alert--err{
  background: rgba(255, 75, 75, .10);
  border-color: rgba(255, 75, 75, .22);
}

.tag{
  display:inline-flex;
  align-items:center;
  padding: 4px 10px;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 900;
}
.tag--ok{ background: rgba(0, 200, 120, .12); color: rgba(0,0,0,.8); }
.tag--muted{ background: rgba(0,0,0,.06); color: rgba(0,0,0,.65); }

/* Fix: Select (Country) soll genauso groß aussehen wie Inputs */
select.field__control{
  width: 100%;
  padding: 12px 42px 12px 12px;   /* rechts Platz für Pfeil */
  min-height: 46px;               /* gleiche Höhe wie Input */
  line-height: 1.2;
  border-radius: 14px;
  background: rgb(255 255 255);
  border: 1px solid rgba(213, 152, 48, 0.27);
  color: var(--text);
  outline: none;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* eigener Pfeil */
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(0,0,0,.55) 50%),
    linear-gradient(135deg, rgba(0,0,0,.55) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

select.field__control:focus{
  border-color: rgba(213, 152, 48, .55);
  box-shadow: 0 0 0 4px rgba(213, 152, 48, .18);
}

/* iOS: verhindert “komische” Höhe */
select.field__control{
  font-size: 16px; /* wichtig gegen iOS zoom + wirkt größer */
}

/* ===================== Mega Menu ===================== */

.nav__item--mega{ position: relative; }

/* Panel unter der Header-Bar */
.mega{
  position: absolute;

  /* EXAKT mittig unter der gesamten Header-Bar */
  left: 50%;
  transform: translateX(-50%) translateY(-8px);

  top: calc(100% + 10px);
  width: min(1180px, calc(100vw - 60px));

  z-index: 220;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

/* offen */
.nav__item--mega.is-open > .mega{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* verhindert, dass es links/rechts rausläuft */
@supports (left: clamp(0px, 50%, 100%)){
  .mega{
    left: clamp(30px, 50%, calc(100vw - 30px));
  }
}

/* Bezugspunkt für absolute Mega Panels */
.header-bar{ position: relative; }

.mega__inner{
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius);
  box-shadow: 0 20px 70px rgba(0,0,0,.25);
  overflow: hidden;

  display: grid;
  grid-template-columns:1.15fr 1px 1fr;
  align-items: stretch;
}

.mega.is-open{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.mega__col{ padding: 22px; }
.mega__col--lead{ padding: 28px 26px; }

.mega__divider{ background: rgba(0,0,0,.10); }

.mega__h{
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: #1c1c1c;
}

.mega__dot{ color: var(--yellow); }

.mega__p{
  margin: 0 0 18px;
  color: rgba(0,0,0,.72);
  line-height: 1.45;
  max-width: 42ch;
}

.mega__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  border-radius: var(--radius);
  background: var(--yellow);
  color: #fff;
  font-weight: 900;
  letter-spacing: .02em;
}

/* Item rows */
.mega__item{
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: center;
  padding: 5px;
  border-radius: var(--radius);
  color: #1c1c1c;
}

/* Item rows */
.mega__item2{
  display: grid;
  align-items: center;
      padding: 15px;
    margin-top: 10px;
  border-radius: var(--radius);
  color: #1c1c1c;
}

.mega__img{
  width: 74px;
  height: 74px;
  border-radius: 15px;
  object-fit: cover;
}

.mega__title{
  font-weight: 900;
  font-size: 16px;
  margin: 0 0 4px;
}

.mega__desc{
  color: rgba(0,0,0,.70);
  font-size: 14px;
  line-height: 1.3;
}

/* Hover states */
@media (hover:hover) and (pointer:fine){
  .mega__item:hover{ background: rgba(0,0,0,.05); }
   .mega__item2:hover{ background: rgba(0,0,0,.05); }
  .mega__cta:hover{ filter: brightness(.98); }
}

/* Mobile: kein Hover Mega */
@media (max-width: 980px){
  .mega{ display:none; } /* auf Mobile lieber nur normales Menü */
}

/* ===================== HELP PAGE ===================== */

.help{ background:#fff; color:#1c1c1c; }

.help-title{
  text-align:center;
  margin: 0 0 16px;
  font-size: clamp(34px, 3.2vw, 52px);
  font-weight: 900;
  letter-spacing: -0.02em;
}
.help-dot{ color: var(--yellow); }

/* Categories strip */
.help-cats{
  background: rgba(205, 205, 205, 0.15);
  padding: 44px 0;
}
.help-cats__grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  align-items: stretch;
}
@media (max-width: 980px){
  .help-cats__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .help-cats__grid{ grid-template-columns: 1fr; }
}

.help-cat{
  background:#fff;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  padding: 26px 18px 20px;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap: 14px;
  min-height: 180px;
}
.help-cat__icon{
  width: 74px;
  height: 74px;
  border-radius: var(--radius);
  display:grid;
  place-items:center;
  border: 2px solid rgba(0,0,0,.10);
}
.help-cat__icon i{
  font-size: 40px;
  color: var(--yellow);
}

.help-cat__label{
  font-size: 18px;
  font-weight: 650;
  color: rgba(0,0,0,.88);
}
@media (hover:hover) and (pointer:fine){
  .help-cat:hover{ transform: translateY(-1px); }
}

/* FAQ section */
.help-faq{
  padding: 56px 0 24px;
}
.faq-list{
  max-width: 900px;
  margin: 0 auto;
}
.faq-row{
  border-bottom: 1px solid rgba(0,0,0,.16);
  padding: 6px 0;
}
.faq-row__q{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  padding: 18px 6px;
  font-size: 18px;
  color: rgba(0,0,0,.78);
}
.faq-row__q::-webkit-details-marker{ display:none; }

.faq-row__icon{
  width: 22px;
  height: 22px;
  position: relative;
  flex: 0 0 22px;
  opacity: .55;
}
.faq-row__icon::before,
.faq-row__icon::after{
  content:"";
  position:absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 2px;
  background: rgba(0,0,0,.65);
  transform: translate(-50%,-50%);
}
.faq-row__icon::after{
  transform: translate(-50%,-50%) rotate(90deg);
}
.faq-row[open] .faq-row__icon::after{
  display:none; /* plus -> minus */
}

.faq-row__a{
  padding: 0 6px 18px;
  color: rgba(0,0,0,.68);
  line-height: 1.55;
  font-size: 16px;
}

/* Support search + products */
.help-support{
  padding: 36px 0 70px;
}
.help-search{
  max-width: 820px;
  margin: 0 auto 34px;
  position: relative;
}
.help-search__icon{
  position:absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: rgba(0,0,0,.55);
}
.help-search__input{
  width:100%;
  height: 54px;
  padding: 0 16px 0 44px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.25);
  outline: none;
  font-size: 16px;
}
.help-search__input:focus{
  border-color: rgba(0,0,0,.4);
  box-shadow: 0 0 0 4px rgba(213, 152, 48, .18);
}

.help-products{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  align-items: end;
  margin-top: 10px;
}
@media (max-width: 980px){
  .help-products{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .help-products{ grid-template-columns: 1fr; }
}

.help-product{
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 14px;
  padding: 14px 10px;
  border-radius: 14px;
}
.help-product__imgwrap{
  width: 100%;
  max-width: 260px;
  aspect-ratio: 4 / 3;
  display:grid;
  place-items:center;
}
.help-product__imgwrap img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.10));
}
.help-product__name{
  font-size: 18px;
  font-weight: 650;
  color: rgba(0,0,0,.88);
}

/* ===================== Booking Page ===================== */

.booking{ background:#fff; color:#1c1c1c; }

.booking-search{
  top: 0;
  z-index: 80;
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(0,0,0,.06);
  backdrop-filter: blur(10px);
  padding: 14px 0;
      position: relative;
}

.searchbar{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,1.35fr) minmax(0,.9fr) auto;
  gap: 12px;
  align-items: end;
  padding: 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: #f1f1f1;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

.searchbar__group{
  display:flex;
  flex-direction:column;
  gap: 6px;
  min-width: 0;
  position: relative;
}

.searchbar__group--date{
  min-width: 0;
}

.searchbar__label{
  font-size: 12px;
  font-weight: 900;
  color: #1c1c1c;
  margin-left: 14px;
}

.searchbar__control{
  width: 100%;
  min-width: 0;
  height: 64px;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 0 18px;
  background: transparent;
  outline: none;
  font-size: 15px;
  color: #1c1c1c;
}

.searchbar__control:focus{
  background: #fff;
  border-color: rgba(0,0,0,.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
}

.searchbar__control--trigger{
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 12px;
  text-align: left;
  cursor: pointer;
  background: transparent;
}

.searchbar__control--trigger.is-open,
.searchbar__group.is-open .searchbar__control--trigger{
  background: #fff;
  border-color: rgba(0,0,0,.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
}

.searchbar__trigger-main{
  grid-column: 1;
  grid-row: 1;
  font-weight: 700;
  color: #1c1c1c;
}

.searchbar__trigger-sub{
  grid-column: 1;
  grid-row: 2;
  font-size: 13px;
  color: rgba(0,0,0,.55);
}

.searchbar__control--trigger i{
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 20px;
  color: rgba(0,0,0,.55);
}

.searchbar__submit{
  height: 52px;
  min-width: 132px;
  padding: 0 22px;
  border-radius: 999px;
  border: 0;
  background: var(--yellow);
  color: #fff;
  font-weight: 900;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  cursor:pointer;
  white-space: nowrap;
  align-self: center;
  margin-right: 2px;
  box-shadow: 0 8px 18px rgba(228,158,0,.28);
}

.searchbar__group{ display:flex; flex-direction:column; gap: 6px; }
.searchbar__label{ font-size: 12px; font-weight: 800; color: var(--text); }

.searchbar__control{
  height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  padding: 0 12px;
  background: rgba(0,0,0,.02);
  outline: none;
  font-size: 15px;
}
.searchbar__control:focus{
  border-color: rgba(213, 152, 48, .55);
  box-shadow: 0 0 0 4px rgba(213, 152, 48, .18);
}

.searchbar__submit{
  height: 46px;
  padding: 0 16px;
  border-radius: 12px;
  border: 0;
  background: var(--yellow);
  color: #fff;
  font-weight: 900;
  display:flex;
  align-items:center;
  gap: 10px;
  cursor:pointer;
  white-space: nowrap;
}

.results-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 18px 0 12px;
}
.results-head__title{
  font-size: 18px;
  font-weight: 900;
  color: rgba(0,0,0,.78);
}
.results-sort{
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.12);
  padding: 0 12px;
  background: #fff;
}

/* Listing card */
.listing-list{ display:flex; flex-direction:column; gap: 16px; padding-bottom: 60px; }

.listing{
  display:grid;
  grid-template-columns: 460px 1fr 280px;
  gap: 18px;
  background:#fff;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 14px 44px rgba(0,0,0,.06);
  overflow: hidden;
}

.listing__media{ position: relative; background: rgba(0,0,0,.04); }
/* ===== Booking Carousel (FIX) ===== */

.listing__media{
  position: relative;
  background: rgba(0,0,0,.04);
}

/* Viewport: sorgt dafür, dass nur 1 Slide sichtbar ist */
.carousel-viewport{
  width: 100%;
  height: 270px;
  overflow: hidden;
}

/* Track bewegt sich */
.carousel-track{
  display: flex;
  height: 100%;
  will-change: transform;
  transition: transform .22s ease;
}

/* Jede Slide genau 100% Breite */
.carousel-slide{
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}

.carousel-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Buttons */
.carousel-btn{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: var(--radius);
  border: 0;
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size: 22px;
}
.carousel-btn--prev{ left: 12px; }
.carousel-btn--next{ right: 12px; }

/* Badge */
.carousel-badge{
  position:absolute;
  left: 12px;
  bottom: 12px;
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(0,0,0,.60);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
}

@media (max-width: 820px){
  .carousel-viewport{ height: 240px; }
}

.listing__chip{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: var(--radius);
  background: rgba(0,0,0,.06);
  color: rgba(0,0,0,.65);
  font-size: 12px;
  font-weight: 800;
  margin-left: 8px;
}

.listing__rating{
  font-weight: 900;
  color: rgba(0,0,0,.65);
}

.listing__body{ padding: 18px 0 18px 0; }
.listing__top{ padding: 10px 0 0; }

.listing__name{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding-right: 14px;
}


.listing__meta{
  margin-top: 8px;
  display:flex;
  flex-wrap: wrap;
  gap: 14px;
  color: rgba(0,0,0,.55);
  font-size: 13px;
  padding-right: 14px;
}
.listing__meta i{ margin-right: 6px; }

.listing__desc{
  margin: 12px 0 0;
  color: rgba(0,0,0,.62);
  font-size: 13px;
  line-height: 1.5;
  padding-right: 14px;
  max-width: 72ch;
}

.listing__price{
  border-left: 1px solid rgba(0,0,0,.08);
  padding: 18px;
  display:flex;
  align-items:center;
}

.pricebox{ width:100%; text-align:right; }
.pricebox__dates{ color: rgba(0,0,0,.45); font-size: 12px; }
.pricebox__nights{ color: rgba(0,0,0,.45); font-size: 12px; margin-top: 8px; }
.pricebox__amount{
  margin-top: 10px;
  font-size: 34px;
  font-weight: 900;
  color: var(--yellow);
  letter-spacing: -0.02em;
}
.pricebox__unit{ color: rgba(0,0,0,.45); font-size: 12px; margin-top: 2px; }

.pricebox__actions{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  justify-content:flex-end;
  flex-wrap: wrap;
}
.pricebox__btn{ border-radius: 10px; padding: 10px 14px; }

/* Responsive */
@media (max-width: 1100px){
  .listing{ grid-template-columns: 420px 1fr; }
  .listing__price{ grid-column: 1 / -1; border-left:0; border-top:1px solid rgba(0,0,0,.08); justify-content:flex-end; }
  .listing__body{ padding-left: 14px; }
}
@media (max-width: 820px){
  .searchbar{ grid-template-columns: 1fr 1fr; }
  .searchbar__submit{ grid-column: 1 / -1; justify-content:center; }
  .listing{ grid-template-columns: 1fr; }
  .carousel, .carousel__slide img{ height: 240px; }
  .listing__body{ padding: 14px; }
  .listing__price{ padding: 14px; }
}

@media (max-width: 820px){
  .searchbar{
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  }

  .searchbar__submit{
    grid-column: 1 / -1;
    justify-content: center;
  }
}

/* ===================== Details Page ===================== */

.details{ background:#fff; color:#1c1c1c; padding: 4vh 0 0; }

.details-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin: 6px 0 12px;
}
.details-topbar__title{
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.details-close{
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: rgba(0,0,0,.06);
  display:grid;
  place-items:center;
  font-size: 26px;
  color:#1c1c1c;
}

/* Gallery layout */
.details-gallery{
  position: relative;
  display:grid;
  grid-template-columns: 2.2fr 1fr;
  gap: 8px;
  border-radius: 14px;
  overflow:hidden;
}

.details-gallery__main img{
  width:100%;
  height: 520px;
  object-fit: cover;
  display:block;
}
.details-gallery__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.details-gallery__thumb{
  position: relative;
  overflow:hidden;
  border-radius: 0;
  background: rgba(0,0,0,.06);
}
.details-gallery__thumb img{
  width:100%;
  height: 256px;
  object-fit: cover;
  display:block;
}
.details-gallery__thumb--floor img{ filter: saturate(.95) contrast(1.02); opacity: .85; }

.details-floor{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  color:var(--yellow);
  font-weight: 400;
  background: rgb(255 255 255 / 87%)
}
.details-floor__icon{
  width: 28px; height: 28px;
  border-radius: var(--radius);
  display:grid; place-items:center;
}

/* photos badge */
.details-photos {
    position: absolute;
    left: 14px;
    bottom: 20px;
    border: 0;
    border-radius: 10px;
    padding: 5px 10px;
    background: rgb(255 255 255);
    color: #121212;
    font-weight: 700;
    display: flex;
    font-size: 12px;
    gap: 6px;
    align-items: center;
    cursor: pointer;
}

/* Info section */
.details-info{
  margin-top: 16px;
  align-items:start;
}
.details-subline{
  color: rgba(0,0,0,.55);
  font-size: 13px;
  margin-bottom: 8px;
}
.details-bookable{ font-weight: 800; }

.details-title{
  margin: 0;
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--yellow);
  display:flex;
  align-items:center;
  gap: 12px;
}
.details-icons i{ font-size: 20px; color: rgba(0,0,0,.55); margin-left: 8px; }

.details-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 10px;
    color: #1c1c1c;
    font-size: 16px;
}
.details-meta i{ margin-right: 6px;
    font-size: 20px;
    color: #141414;
}
.details-rating{ font-weight: 900; color: rgba(0,0,0,.65); }

.details-chip{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: var(--radius);
  background: rgba(0,0,0,.06);
  font-weight: 900;
  color: rgba(0,0,0,.65);
}

.details-desc{
  margin: 12px 0 0;
  color: rgba(0,0,0,.62);
  line-height: 1.6;
  max-width: 95ch;
}

/* Right price box */
.details-pricebox{
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 14px 44px rgba(0,0,0,.06);
  padding: 18px;
  text-align: right;
}
.details-total{
  font-size: 38px;
  font-weight: 900;
  color: var(--yellow);
  letter-spacing: -0.02em;
}
.details-unit{
  margin-top: 2px;
  font-size: 12px;
  color: rgba(0,0,0,.45);
}
.details-book{
  margin-top: 14px;
  width: 100%;
  justify-content:center;
  border-radius: 12px;
}
.details-joined{
  margin-top: 14px;
  color: rgba(0,0,0,.45);
  font-size: 12px;
}

/* Lightbox */
.lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.78);
  display:none;
  align-items:center;
  justify-content:center;
  z-index: 9999;
}
.lightbox.is-open{ display:flex; }
.lightbox__content{
  width: min(1100px, calc(100vw - 40px));
  height: min(720px, calc(100vh - 80px));
  position: relative;
  display:grid;
  place-items:center;
}
.lightbox__content img{
  max-width: 100%;
  max-height: 100%;
  border-radius: 14px;
  object-fit: contain;
  background: rgba(0,0,0,.2);
}
.lightbox__close{
  position:absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  border:0;
  font-size: 26px;
  cursor:pointer;
  background: rgba(255,255,255,.92);
}
.lightbox__nav{
  position:absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  display:flex;
  justify-content:space-between;
  pointer-events:none;
}
.lightbox__nav button{
  pointer-events:auto;
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  border:0;
  background: rgba(255,255,255,.92);
  font-size: 26px;
  cursor:pointer;
  margin: 0 10px;
}

/* Responsive */
@media (max-width: 1100px){
  .details-gallery{ grid-template-columns: 1.8fr 1fr; }
  .details-gallery__main img{ height: 460px; }
  .details-gallery__thumb img{ height: 226px; }
  .details-info{ grid-template-columns: 1fr; }
  .details-pricebox{ text-align:left; }
}
@media (max-width: 760px){
  .details-gallery{ grid-template-columns: 1fr; }
  .details-gallery__grid{ padding: 8px; }
  .details-gallery__thumb img{ height: 180px; }
  .details-title{ font-size: 34px; }
}

/* ===================== Checkout (Shopify-like) ===================== */

.checkout{ background:#fff; color:#1c1c1c; padding:120px 0 100px; }
.checkout__wrap{ max-width: 1200px; }

.checkout-grid{
  display:grid;
  grid-template-columns: 1fr 420px;
  gap: 26px;
  align-items:start;
}

.co-head{ margin-bottom: 14px; }
.co-title{ margin:0; font-size: 34px; font-weight: 900; letter-spacing: -0.02em; }
.co-sub{ margin: 10px 0 0; color: rgba(0,0,0,.65); }

.co-block{
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 14px 44px rgba(0,0,0,.06);
  padding: 16px;
  margin-bottom: 14px;
  background:#fff;
}

.co-block--last{ padding: 18px; }

.co-h{
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 900;
}

.co-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 820px){
  .co-row{ grid-template-columns: 1fr; }
}

.co-field{ display:block; margin-bottom: 10px; }
.co-label{ display:block; font-size: 12px; font-weight: 900; color: rgba(0,0,0,.55); margin-bottom: 6px; }

.co-input{
  width: 100%;
  height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.02);
  padding: 0 12px;
  outline: none;
  font-size: 15px;
}
.co-input:focus{
  border-color: rgba(213,152,48,.55);
  box-shadow: 0 0 0 4px rgba(213,152,48,.18);
}

.co-note {
    margin: 6px 0 0;
    color: rgb(0 0 0 / 70%);
    font-size: 15px;
    line-height: 1.45;
}

.co-check{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  color: rgba(0,0,0,.7);
  font-size: 13px;
  margin-bottom: 12px;
}
.co-check input{ margin-top: 2px; accent-color: var(--yellow); }

.co-link{ text-decoration: underline; text-underline-offset: 3px; }

.co-submit{
  width:100%;
  height: 48px;
  border-radius: 12px;
  border: 0;
  background: var(--yellow);
  color: #fff;
  font-weight: 900;
  cursor:pointer;
}

.co-fine{
  margin: 10px 0 0;
  color: rgba(0,0,0,.5);
  font-size: 12px;
}

/* Summary */
.summary{
  position: sticky;
  top: 96px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 14px 44px rgba(0,0,0,.06);
  padding: 16px;
  background:#fff;
}

.summary__top{
  display:grid;
  grid-template-columns: 92px 1fr;
  gap: 12px;
  align-items:center;
}
.summary__img{
  width: 92px;
  height: 92px;
  border-radius: 12px;
  object-fit: cover;
  background: rgba(0,0,0,.04);
}
.summary__name{ font-weight: 900; }
.summary__sub{ color: rgba(0,0,0,.6); font-size: 13px; margin-top: 2px; }
.summary__dates{ color: rgba(0,0,0,.5); font-size: 12px; margin-top: 6px; }

.summary__line{
  height:1px;
  background: rgba(0,0,0,.10);
  margin: 14px 0;
}

.sum-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin: 10px 0;
  color: rgba(0,0,0,.75);
}
.sum-row strong{ color:#1c1c1c; font-weight: 400; }
.sum-row--total{
  font-size: 16px;
  font-weight: 900;
  color:#1c1c1c;
}

.promo{
  display:flex;
  gap: 10px;
  margin-top: 12px;
}
.promo__input{
  flex:1;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  padding: 0 12px;
  background: rgba(0,0,0,.02);
}
.promo__btn{
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background:#fff;
  font-weight: 900;
  cursor:pointer;
}

.summary__fine{
  margin: 12px 0 0;
  color: rgba(0,0,0,.5);
  font-size: 12px;
  line-height: 1.45;
}

/* Payment tabs */
.pay-tabs{
  display:flex;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.pay-tab{
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid rgba(0,0,0,.14);
  background:#fff;
  font-weight: 900;
  cursor:pointer;
}
.pay-tab.is-active{
  border-color: var(--yellow);
  box-shadow: 0 0 0 4px rgba(213,152,48,.18);
}

.pay-panel{ display:none; }
.pay-panel.is-open{ display:block; }

@media (max-width: 980px){
  .checkout-grid{ grid-template-columns: 1fr; }
  .summary{ position: relative; top: 0; }
}
/* ===================== Checkout Steps (Wizard) ===================== */

.stepper{
  display:flex;
  align-items:center;
  gap: 10px;
  margin: 10px 0 16px;
}

.step{
  border: 0;
  background: transparent;
  display:flex;
  align-items:center;
  gap: 10px;
  cursor:pointer;
  padding: 8px 10px;
  border-radius: 12px;
}

.step__num{
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  border: 2px solid rgba(0,0,0,.18);
  display:grid;
  place-items:center;
  font-weight: 900;
  color: rgba(0,0,0,.7);
}

.step__text{
  font-weight: 900;
  color: rgba(0,0,0,.65);
  font-size: 13px;
  white-space: nowrap;
}

.stepper__line{
  height: 2px;
  flex: 1;
  background: rgba(0,0,0,.10);
  border-radius: var(--radius);
  min-width: 30px;
}

.step.is-active .step__num{
  border-color: var(--yellow);
  box-shadow: 0 0 0 4px rgba(213,152,48,.18);
}
.step.is-active .step__text{ color: rgba(0,0,0,.88); }

.step.is-done .step__num{
  background: rgba(213,152,48,.14);
  border-color: rgba(213,152,48,.55);
  color: rgba(0,0,0,.85);
}

.co-step{ display:none; }
.co-step.is-open{ display:block; }

.co-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-top: 10px;
}

.co-next, .co-back{
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  font-weight: 900;
  cursor:pointer;
}

.co-next{
  border:0;
  background: var(--yellow);
  color:#fff;
}

.co-back{
  border: 1px solid rgba(0,0,0,.14);
  background:#fff;
  color:#1c1c1c;
}

/* Extras */
.extras{
  display:flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.extra{
  display:flex;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
  cursor:pointer;
}

.extra__check{
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--yellow);
}

.extra__body{ flex:1; }
.extra__top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 10px;
}
.extra__title{ font-weight: 900; color: rgba(0,0,0,.85); }
.extra__price{ font-weight: 900; color: rgba(0,0,0,.65); }
.extra__desc{ display:block; margin-top: 4px; color: rgba(0,0,0,.55); font-size: 13px; }

.co-summary__row{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  margin: 10px 0;
  color: rgba(0,0,0,.75);
}
.co-summary__line{
  height:1px;
  background: rgba(0,0,0,.10);
  margin: 12px 0;
}
.co-summary__row--total{
  font-size: 16px;
  font-weight: 900;
  color:#1c1c1c;
}

@media (max-width: 980px){
  .stepper{ overflow:auto; padding-bottom: 6px; }
  .stepper__line{ min-width: 18px; }
}

/* ===================== Door Control Page ===================== */

.door-page{
  background:#fff;
  color:#1c1c1c;
  padding: 100px 0 70px;
}

.door-hero{
  margin-bottom: 18px;
}

.door-hero__title{
  margin:0;
  font-size: clamp(34px, 3.2vw, 52px);
  font-weight: 900;
  letter-spacing: -0.02em;
}

.door-hero__sub{
  margin: 12px 0 0;
  color: rgba(0,0,0,.65);
  max-width: 70ch;
}

.door-alert{
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
}

.door-alert--ok{
  background: rgba(0,200,120,.10);
  border-color: rgba(0,200,120,.22);
}

.door-alert--err{
  background: rgba(255,75,75,.10);
  border-color: rgba(255,75,75,.22);
}

.door-card{
  max-width: 760px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 14px 44px rgba(0,0,0,.06);
  background: #fff;
  padding: 22px;
}

.door-card__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.door-card__label{
  font-size: 12px;
  font-weight: 800;
  color: rgba(0,0,0,.5);
  margin-bottom: 6px;
}

.door-card__name{
  font-size: 22px;
  font-weight: 900;
  color: #1c1c1c;
}

.door-status{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: rgba(0,0,0,.05);
  color: rgba(0,0,0,.7);
  font-weight: 800;
  font-size: 13px;
}

.door-status__dot{
  width: 8px;
  height: 8px;
  border-radius: var(--radius);
  background: #1fb96b;
}

.door-actions{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.door-form{
  margin: 0;
}

.door-btn{
  width:100%;
  height: 58px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  cursor:pointer;
  font-weight: 900;
  font-size: 16px;
}

.door-btn i{
  font-size: 20px;
}

.door-btn--primary{
  background: var(--yellow);
  color: #fff;
  border-color: transparent;
}

.door-btn--ghost{
  background: #fff;
  color: #1c1c1c;
}

.door-note{
  margin: 16px 0 0;
  color: rgba(0,0,0,.5);
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 720px){
  .door-actions{
    grid-template-columns: 1fr;
  }
}

/* Extras mit Bild links */
.extra{
  display:flex;
  align-items:center;
  gap: 14px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
  cursor:pointer;
}

.extra__check{
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  accent-color: var(--yellow);
}

.extra__media{
  width: 50px;
  height: 50px;
  border-radius: var(--radius);
  border: 2px solid #d6d6d6;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  flex: 0 0 50px;
}

.extra__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.extra__body{
  flex:1;
  min-width: 0;
}

.extra__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}


.extra__price{
  font-weight: 900;
  color: rgba(0,0,0,.65);
  white-space: nowrap;
}

.extra__desc{
  display:block;
  margin-top: 4px;
  color: rgba(0,0,0,.55);
  font-size: 13px;
}

.extra__tax{
  display:block;
  margin-top: 4px;
  color: rgba(0,0,0,.45);
  font-size: 12px;
}

/* ===== Extras groups ===== */

.extras-group{
  margin-top: 20px;
}

.extras-group:first-child{
  margin-top: 12px;
}

.extras-group__head{
  margin-bottom: 10px;
}

.extras-group__title{
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  color: #1c1c1c;
}

.extras-group__sub{
  margin: 4px 0 0;
  font-size: 13px;
  color: rgba(0,0,0,.55);
}

.extra{
  display:flex;
  align-items:center;
  gap: 14px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
  cursor:pointer;
  margin-bottom: 10px;
}

.extra--mandatory{
  background: rgba(213,152,48,.07);
  border-color: rgba(213,152,48,.20);
}


.extra__check[disabled]{
  opacity: 1;
  cursor: not-allowed;
}


.extra__body{
  flex:1;
  min-width: 0;
}

.extra__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.extra__title{
  font-weight: 900;
  color: rgba(0,0,0,.85);
  display:flex;
  align-items:center;
  flex-wrap: wrap;
}

.extra__badge{
  display:inline-flex;
  align-items:center;
  padding: 4px 8px;
  border-radius: var(--radius);
  background: rgba(213,152,48,.14);
  color: rgba(0,0,0,.72);
  font-size: 11px;
  margin-left: 10px;
  font-weight: 900;
}

.extra__price{
  font-weight: 300;
  color: var(--yellow);
  white-space: nowrap;
}

.extra__desc{
  display:block;
  margin-top: 4px;
  color: rgba(0,0,0,.55);
  font-size: 13px;
}

.extra__tax{
  display:block;
  margin-top: 4px;
  color: rgba(0,0,0,.45);
  font-size: 12px;
}

.extra--disabled{
  opacity: .55;
  cursor: not-allowed;
  background: rgba(0,0,0,.025);
}

.extra--saving{
  border-color: rgba(213,152,48,.22);
  background: rgba(213,152,48,.05);
}

.extra__hint{
  display:block;
  margin-top: 5px;
  font-size: 12px;
  color: rgba(0,0,0,.5);
  font-weight: 700;
}

.extra__hint--saving{
  color: var(--yellow);
}

.extra__hint--disabled{
  color: rgba(255,75,75,.72);
}

#savingRow strong,
#sumSaving{
  color: #1b8f55;
  font-weight: 900;
}

/* Category selector for extras */

.extras-cats{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 18px 0 8px;
}

.extras-cat{
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  border-radius: 16px;
  padding: 14px 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 10px;
  cursor:pointer;
  min-height: 122px;
}

.extras-cat.is-active{
  border-color: rgba(213,152,48,.35);
  background: rgba(213,152,48,.06);
  box-shadow: 0 0 0 4px rgba(213,152,48,.10);
}

.extras-cat__img{
  width: 58px;
  height: 58px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px solid var(--yellow);
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
}

.extras-cat__img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.extras-cat__label{
  font-size: 13px;
  font-weight: 900;
  color: #1c1c1c;
  text-align:center;
}

.extras-group--panel{
  display:none;
}

.extras-group--panel.is-open{
  display:block;
}

@media (max-width: 980px){
  .extras-cats{
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px){
  .extras-cats{
    grid-template-columns: repeat(2, 1fr);
  }

  .extras-cat{
    min-height: 108px;
    padding: 12px 8px;
  }

  .extras-cat__img{
    width: 50px;
    height: 50px;
  }
}

.extras-group--panel{
  display: none;
}

.extras-group--panel.is-open{
  display: block;
}

.extras-cats{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 18px 0 8px;
}

.extras-cat{
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  border-radius: 16px;
  padding: 14px 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 10px;
  cursor:pointer;
  min-height: 122px;
}

.extras-cat.is-active{
  border-color: rgba(213,152,48,.35);
  background: rgba(213,152,48,.06);
  box-shadow: 0 0 0 4px rgba(213,152,48,.10);
}

/* ===================== Admin Dashboard ===================== */

.admin-stats{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 14px 0 28px;
}

.admin-stat{
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 40px rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.08);
  padding: 18px;
}

.admin-stat__label{
  font-size: 12px;
  font-weight: 800;
  color: rgba(0,0,0,.5);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.admin-stat__value{
  margin-top: 8px;
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
}

.admin-actions{
  display:grid;
  gap: 12px;
}

.admin-action{
  display:block;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 40px rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.08);
  padding: 16px;
}

.admin-action__title{
  font-size: 16px;
  font-weight: 900;
  color: #1c1c1c;
}

.admin-action__text{
  margin-top: 6px;
  color: rgba(0,0,0,.68);
  font-size: 14px;
  line-height: 1.45;
}

.admin-sections{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 26px;
}

.admin-box__title{
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 900;
  color: #1c1c1c;
}

@media (hover:hover) and (pointer:fine){
  .admin-action:hover{
    border-color: rgba(213,152,48,.28);
    transform: translateY(-1px);
  }
}

@media (max-width: 980px){
  .admin-stats{
    grid-template-columns: repeat(2, 1fr);
  }

  .admin-sections{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px){
  .admin-stats{
    grid-template-columns: 1fr;
  }
}

/* ===================== Employee / Admin Dashboard ===================== */

.admin-stats{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 14px 0 28px;
}

.admin-stat{
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 40px rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.08);
  padding: 18px;
}

.admin-stat__label{
  font-size: 12px;
  font-weight: 800;
  color: rgba(0,0,0,.5);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.admin-stat__value{
  margin-top: 8px;
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
}

.admin-actions{
  display:grid;
  gap: 12px;
}

.admin-action{
  display:block;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 40px rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.08);
  padding: 16px;
  transition: transform .12s ease, border-color .12s ease;
}

.admin-action__title{
  font-size: 16px;
  font-weight: 900;
  color: #1c1c1c;
}

.admin-action__text{
  margin-top: 6px;
  color: rgba(0,0,0,.68);
  font-size: 14px;
  line-height: 1.45;
}

.admin-sections{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 26px;
}

.admin-box__title{
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 900;
  color: #1c1c1c;
}

@media (hover:hover) and (pointer:fine){
  .admin-action:hover{
    border-color: rgba(213,152,48,.28);
    transform: translateY(-1px);
  }
}

@media (max-width: 980px){
  .admin-stats{
    grid-template-columns: repeat(2, 1fr);
  }

  .admin-sections{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px){
  .admin-stats{
    grid-template-columns: 1fr;
  }
}

.extra--policy .extra__check{
  accent-color: var(--yellow);
}

/* ===================== Guest Check-in Flow ===================== */

.guest-flow{
  padding-top: 36px;
  padding-bottom: 70px;
}

.guest-flow__card{
  width: min(620px, 100%);
}

.guest-flow__hero{
  text-align: center;
  margin-bottom: 18px;
}

.guest-flow__badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: rgba(213,152,48,.10);
  color: rgba(0,0,0,.72);
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 12px;
}

.guest-flow__title{
  margin-bottom: 8px;
}

.guest-flow__sub{
  max-width: 48ch;
  margin-inline: auto;
}

.guest-flow__stay{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}

.guest-flow__stay-item{
  padding: 14px;
  border-radius: 14px;
  background: rgb(255 255 255);
  border: 1px solid rgba(213, 152, 48, 0.27);
}

.guest-flow__stay-label{
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: rgba(0,0,0,.5);
  margin-bottom: 6px;
}

.guest-steps{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 18px;
}

.guest-steps__item{
  display: flex;
  align-items: center;
  gap: 10px;
}

.guest-steps__num{
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  border: 2px solid rgba(0,0,0,.16);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
  background-color: white;
  color: rgba(0,0,0,.65);
}

.guest-steps__text{
  font-size: 13px;
  font-weight: 900;
  color: rgba(0,0,0,.55);
  white-space: nowrap;
}

.guest-steps__line{
  flex: 1;
  min-width: 16px;
  height: 2px;
  border-radius: var(--radius);
  background: rgba(0,0,0,.10);
}

.guest-steps__item.is-active .guest-steps__num{
  border-color: var(--yellow);
  box-shadow: 0 0 0 4px rgba(213,152,48,.12);
}

.guest-steps__item.is-active .guest-steps__text{
  color: rgba(0,0,0,.88);
}

.guest-steps__item.is-done .guest-steps__num{
  background: rgba(213,152,48,.14);
  border-color: rgba(213,152,48,.35);
}

.guest-step{
  display: none;
}

.guest-step.is-open{
  display: block;
}

.guest-flow__success{
  text-align: center;
  padding: 12px 6px 4px;
}

.guest-flow__success-icon{
  width: 72px;
  height: 72px;
  margin: 0 auto 14px;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  background: rgba(0,200,120,.12);
  color: #169a5e;
  font-size: 32px;
  font-weight: 900;
}

.guest-flow__success-title{
  margin: 0;
  font-size: 24px;
  font-weight: 900;
}

.guest-flow__success-text{
  margin: 10px 0 0;
  color: rgba(0,0,0,.72);
}

.guest-flow__success-note{
  margin: 10px 0 0;
  color: rgba(0,0,0,.5);
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 640px){
  .guest-flow__stay{
    grid-template-columns: 1fr;
  }

  .guest-steps{
    overflow: auto;
    padding-bottom: 4px;
  }
}
.guest-flow__card{
  position: relative;
  overflow: hidden;
}

.guest-flow-bg{
  position: absolute;
  inset: 0;
  background: url("../img/checkin-bg.jpg") center/cover no-repeat;
  opacity: 1;
  z-index: 0;
  pointer-events: none;
}

.guest-flow__hero,
.guest-flow__stay,
.guest-steps,
.auth__form,
.auth__alert,
.guest-flow__success{
  position: relative;
  z-index: 1;
}
.guest-flow-bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.82);
}

.authcheckin{
  position: relative;
  min-height: 100%;
  padding: 46px 0 70px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.guest-climate{
  background:#fff;
  color:#1c1c1c;
  padding: 28px 0 70px;
}

.guest-climate__hero{
  margin-bottom: 22px;
}

.guest-climate__title{
  margin:0;
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 900;
  letter-spacing: -0.02em;
}

.guest-climate__sub{
  margin:10px 0 0;
  color: rgba(0,0,0,.62);
  max-width: 64ch;
}

.climate-layout{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items: start;
}

.climate-map-card,
.climate-control-card{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 40px rgba(0,0,0,.05);
  padding: 18px;
}

.climate-map-card__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 16px;
}

.climate-map-card__title{
  font-size: 28px;
  font-weight: 900;
}

.climate-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius: 999px;
  background: rgba(31,185,107,.10);
  color:#15784a;
  font-size: 13px;
  font-weight: 800;
}

.climate-badge::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:#1fb96b;
}

.climate-map{
  position: relative;
  min-height: 420px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(213,152,48,.05), rgba(0,0,0,.02));
  border: 1px solid rgba(0,0,0,.08);
  overflow: hidden;
}

/* simple fake floorplan walls */
.climate-map::before,
.climate-map::after{
  content:"";
  position:absolute;
  background: rgba(0,0,0,.10);
}

.climate-map::before{
  left: 50%;
  top: 18px;
  bottom: 18px;
  width: 2px;
  transform: translateX(-50%);
}

.climate-map::after{
  top: 50%;
  left: 18px;
  right: 18px;
  height: 2px;
  transform: translateY(-50%);
}

.room-spot{
  position:absolute;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  padding: 12px;
  cursor: pointer;
  text-align: left;
  min-width: 150px;
}

.room-spot.is-active{
  border-color: rgba(213,152,48,.35);
  box-shadow: 0 0 0 4px rgba(213,152,48,.10);
}

.room-spot:nth-child(1){ top: 26px; left: 26px; }
.room-spot:nth-child(2){ top: 26px; right: 26px; }
.room-spot:nth-child(3){ bottom: 26px; left: 26px; }
.room-spot:nth-child(4){ bottom: 26px; right: 26px; }

.room-spot__name{
  display:block;
  font-size: 14px;
  font-weight: 900;
  color:#1c1c1c;
}

.room-spot__temp{
  display:block;
  margin-top: 4px;
  font-size: 13px;
  color: rgba(0,0,0,.56);
}

.climate-map-card__hint{
  margin: 12px 0 0;
  font-size: 12px;
  color: rgba(0,0,0,.48);
}

.climate-panel{
  display:none;
}

.climate-panel.is-open{
  display:block;
}

.climate-panel__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 16px;
}

.climate-panel__eyebrow{
  font-size: 12px;
  font-weight: 800;
  color: rgba(0,0,0,.48);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.climate-panel__title{
  margin: 6px 0 0;
  font-size: 26px;
  font-weight: 900;
  color:#1c1c1c;
}

.climate-panel__live{
  font-size: 30px;
  font-weight: 900;
  color: var(--yellow);
  white-space: nowrap;
}

.climate-panel__status{
  display:flex;
  gap:10px;
  margin-bottom: 18px;
}

.mode-btn{
  flex:1;
  height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background:#fff;
  color:#1c1c1c;
  font-weight: 800;
  cursor:pointer;
}

.mode-btn.is-active{
  background: rgba(213,152,48,.10);
  border-color: rgba(213,152,48,.35);
}

.thermo{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 16px;
  background: rgba(0,0,0,.015);
}

.thermo__top{
  display:flex;
  justify-content:space-between;
  font-size: 12px;
  font-weight: 800;
  color: rgba(0,0,0,.48);
  margin-bottom: 12px;
}

.thermo__range{
  width:100%;
  appearance: none;
  -webkit-appearance: none;
  height: 12px;
  border-radius: 999px;
  outline: none;
  background: linear-gradient(90deg, #76a9ff 0%, #f2d2a0 50%, #e77d5f 100%);
}

.thermo__range::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #fff;
  border: 3px solid var(--yellow);
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
  cursor: pointer;
}

.thermo__range::-moz-range-thumb{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #fff;
  border: 3px solid var(--yellow);
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
  cursor: pointer;
}

.thermo__scale{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size: 12px;
  color: rgba(0,0,0,.52);
}

.thermo__value{
  font-size: 18px;
  font-weight: 900;
  color:#1c1c1c;
}

.climate-panel__foot{
  margin-top: 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap: wrap;
}

.climate-panel__note{
  margin:0;
  font-size: 12px;
  color: rgba(0,0,0,.5);
}

@media (hover:hover) and (pointer:fine){
  .room-spot:hover,
  .mode-btn:hover{
    border-color: rgba(213,152,48,.26);
  }
}

@media (max-width: 980px){
  .climate-layout{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px){
  .climate-map{
    min-height: 360px;
  }

  .room-spot{
    min-width: 120px;
    padding: 10px;
  }

  .climate-panel__head,
  .climate-map-card__top{
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ===== The Key (Hugeicons only) ===== */

.thekey-widget{
  display:inline-flex;
  align-items:center;
  gap: 12px;
  margin-left: 10px;
  flex-wrap: wrap;
}

.thekey-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 17px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(0,0,0,.03);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
}

.thekey-pill__icon{
  font-size: 18px;
  color: var(--yellow);
}

.thekey-pill.is-new{
  border-color: rgba(0,0,0,.14);
}

.thekey-pill.is-explorer{
  border-color: #9e9e9e;
  color: #9e9e9e;
}

.thekey-pill.is-resident{
  border-color:#ffbd59;
  color:#ffbd59;
}

.thekey-keys{
  display:flex;
  align-items:center;
  gap: 8px;
}

.thekey-key{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display:flex;
  font-weight: 200;
  align-items:center;
  justify-content:center;
}

.thekey-key i{
  font-size: 18px;
  line-height: 1;
}

.thekey-key.is-on i{
  color: rgba(0,0,0,.85); /* dunkle Keys */
}

.thekey-key.is-off i{
  color: rgba(0,0,0,.22); /* helle Keys */
}

/* ===================== Bottom App Nav (Mobile / iPad) ===================== */

:root{
  --appnav-h: 74px;
}

/* Platz unten schaffen, damit Content nicht unter der Tabbar verschwindet */
@media (max-width: 980px){
  body{
    padding-bottom: calc(var(--appnav-h) + env(safe-area-inset-bottom, 0px));
  }
}

/* Tabbar standardmäßig AUS (Desktop) */
.app-nav{
  display:none;
}

/* Mobile/iPad: Tabbar AN */
@media (max-width: 980px){
  .app-nav{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;


    height: var(--appnav-h);
    padding-bottom: env(safe-area-inset-bottom, 0px);

    background: rgba(255,255,255,.96);
    border-top: 1px solid rgba(0,0,0,.10);
    backdrop-filter: blur(12px);

    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
  }

  .app-nav__item{
    height: 100%;
    display:flex;
    flex-direction: column;
    align-items:center;
    justify-content:center;
    gap: 6px;

    color: rgba(0,0,0,.55);
    text-decoration: none;
    font-weight: 800;
    font-size: 11px;
  }

  .app-nav__icon{
    font-size: 22px;
    line-height: 1;
    color: rgba(0,0,0,.55);
  }

  .app-nav__label{
    line-height: 1;
  }

  /* Active state */
  .app-nav__item.is-active{
    color: rgba(0,0,0,.88);
  }
  .app-nav__item.is-active .app-nav__icon{
    color: var(--yellow);
  }

  /* Optional: kleiner “Dot” unter active */
  .app-nav__item.is-active::after{
    content:"";
    width: 22px;
    height: 3px;
    border-radius: 999px;
    background: var(--yellow);
    margin-top: 2px;
  }

}

/* ===================== App Loader / Page Transition ===================== */
.site-header{
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 18px 0;
}

.app-loader{
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(10px);
}

.app-loader.is-on{
  opacity: 1;
  pointer-events: auto;
}

.app-loader__inner{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  display:flex;
  align-items:center;
  justify-content:center;
}

.app-loader__ring{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 5px solid rgba(213,152,48,.22);
  border-top-color: var(--yellow);
  animation: appSpin .85s linear infinite;
  box-shadow: 0 0 0 8px rgba(213,152,48,.08);
}

@keyframes appSpin{
  to { transform: rotate(360deg); }
}

/* Smooth page enter (app-like) */
html.app-enter body{
  opacity: 0;
}

html.app-enter-ready body{
  opacity: 1;
  transition: opacity .22s ease;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  html.app-enter body,
  html.app-enter-ready body{
    transition: opacity .1s ease !important;
  }
  .app-loader__ring{ animation: none !important; }
}

/* ===================== Mobile: keep header, make it more "app" ===================== */
@media (max-width: 980px){
  :root{ --header-h: 64px; } /* slightly smaller */

  .site-header{
    padding: 10px 0; /* less vertical space */
  }

  .header-bar{
    height: var(--header-h);
    border-radius: 14px;
  }

  /* optional: hide mega on mobile anyway */
  .mega{ display:none !important; }

  /* keep icons but tidy */
  .header-actions .icon-btn{
    flex: 0 0 52px;
    width: 52px;
  }
}

:root{
  --loftigo-yellow: var(--yellow, #e49e00);
}

/* Fullscreen overlay */
.app-preloader{
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(255,255,255,.96);
  display: grid;
  place-items: center;
  transition: opacity .25s ease, visibility .25s ease;
  opacity: 1;
  visibility: visible;
}

/* Hide state */
.app-preloader.is-hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.app-preloader__inner{
  display: grid;
  place-items: center;
  gap: 14px;
}

.app-preloader__spinner{
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 4px solid rgba(0,0,0,.08);
  border-top-color: var(--loftigo-yellow);
  animation: loftigoSpin .9s linear infinite;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

@keyframes loftigoSpin{
  to { transform: rotate(360deg); }
}

.app-preloader__logo{
  width: 160px;
  height: auto;
  opacity: .9;
}

/* Optional: iOS safe-area */
@supports (padding: env(safe-area-inset-top)){
  .app-preloader{
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

.searchbar__group{
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.searchbar__control{
  width: 100%;
  min-width: 0;
}

.searchbar__submit{
  width: 100%;
  min-width: 0;
}


.site-footer{
  padding-top: 30px;
  background: #fff;
  color: #1c1c1c;
}

.site-footer__top{
  background: #f5f5f5;
  padding: 34px 0;
}

.site-footer__topgrid{
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 1fr;
  gap: 34px;
  align-items: center;
}

.site-footer__brandmark{
  display: flex;
  align-items: center;
}

.site-footer__brandlogo{
  width: 150px;
  height: auto;
  filter: brightness(0) invert(1);
}

.site-footer__topitem{
  display: flex;
  align-items: center;
  gap: 16px;
  color: rgba(255,255,255,.92);
  font-size: 15px;
  line-height: 1.35;
}

.site-footer__topitem strong{
  color: #fff;
  font-weight: 900;
}

.site-footer__topicon{
  font-size: 34px;
  color: #f3c743;
  flex: 0 0 auto;
}

.site-footer__main{
  padding: 48px 0 24px;
}

.site-footer__grid{
  display: grid;
  grid-template-columns: 1.05fr 2fr;
  gap: 70px;
  align-items: start;
}

.site-footer__feature{
  max-width: 360px;
}

.site-footer__headline{
  margin: 0;
  color: #fff;
  font-size: 35px;
  line-height: .98;
  letter-spacing: -0.03em;
  font-weight: 900;
}

.site-footer__lead{
  margin: 14px 0 0;
  color: rgba(255,255,255,.88);
  font-size: 17px;
  line-height: 1.4;
  max-width: 24ch;
}

.site-footer__cta{
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 320px;
  min-height: 56px;
  padding: 0 28px;
  border-radius: 999px;
  background: #f3c743;
  color: #000;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: .02em;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.10);
  transition: transform .12s ease, filter .12s ease;
}

.site-footer__cta:hover{
  filter: brightness(.98);
  transform: translateY(-1px);
}

.site-footer__links{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px;
}

.site-footer__title{
  margin: 0 0 18px;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
}

.site-footer__link{
  display: block;
  color: rgba(255,255,255,.70);
  font-size: 15px;
  line-height: 1.35;
  margin-bottom: 11px;
  transition: color .15s ease;
}

.site-footer__link:hover{
  color: #fff;
}

.site-footer__meta{
  margin-top: 54px;
  display: grid;
  grid-template-columns: 1fr 1.3fr auto;
  gap: 34px;
  align-items: end;
}

.site-footer__metaBlock{
  min-width: 0;
}

.site-footer__metahead{
  margin-bottom: 14px;
  color: #1c1c1c;
  font-size: 14px;
  font-weight: 900;
}

.site-footer__sociallist{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.site-footer__social{
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: var(--yellow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: background .15s ease, border-color .15s ease;
}

.site-footer__social:hover{
  background: rgba(255,255,255,.05);
}

.site-footer__payments{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.site-footer__payment{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 6px;
  background: #fff;
  color: #1c1c1c;
  font-size: 12px;
  font-weight: 800;
}

.site-footer__country{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
  color: rgba(255,255,255,.92);
  font-size: 15px;
}

.site-footer__flag{
  font-size: 22px;
  line-height: 1;
}

.site-footer__bottom{
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  color: rgba(255,255,255,.85);
  font-size: 14px;
}

.site-footer__legalnav{
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.site-footer__legalnav a{
  color: rgba(255,255,255,.66);
  font-size: 14px;
  transition: color .15s ease;
}

.site-footer__legalnav a:hover{
  color: #fff;
}

/* Tablet */
@media (max-width: 1180px){
  .site-footer__topgrid{
    grid-template-columns: 1fr 1fr;
  }

  .site-footer__grid{
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .site-footer__feature{
    max-width: 100%;
  }

  .site-footer__lead{
    max-width: 40ch;
  }

  .site-footer__links{
    grid-template-columns: repeat(2, 1fr);
  }

  .site-footer__meta{
    grid-template-columns: 1fr;
    align-items: start;
  }

  .site-footer__country{
    justify-self: start;
  }
}

/* Mobile */
@media (max-width: 760px){
  .site-footer{
    padding-top: 30px;
  }

  .site-footer__top{
    padding: 24px 0;
  }

  .site-footer__topgrid{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .site-footer__brandlogo{
    width: 130px;
  }

  .site-footer__main{
    padding: 36px 0 22px;
  }

  .site-footer__headline{
    font-size: 35px;
  }

  .site-footer__lead{
    font-size: 16px;
    max-width: 100%;
  }

  .site-footer__cta{
    width: 100%;
    min-width: 0;
  }

  .site-footer__links{
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .site-footer__meta{
    margin-top: 38px;
    gap: 24px;
  }

  .site-footer__bottom{
    margin-top: 28px;
    flex-direction: column;
    align-items: flex-start;
  }

  .site-footer__legalnav{
    gap: 14px;
  }
}

.site-footer__title{
  color: #1c1c1c;
}

.site-footer__link{
  color: rgba(0,0,0,.65);
}

.site-footer__link:hover{
  color: #000;
}

.site-footer__headline{
  color: #1c1c1c;
}

.site-footer__lead{
  color: rgba(0,0,0,.7);
}

.site-footer__social{
  color: var(--yellow);
  background: #fff;
}

.site-footer__social:hover{
  background: #f7f7f7;
}

.site-footer__payment{
  background: #f7f7f7;
  color: #1c1c1c;
  border: 1px solid rgba(0,0,0,.06);
}

.site-footer__bottom{
  border-top: 1px solid rgba(0,0,0,.08);
  color: rgba(0,0,0,.65);
}

.site-footer__legalnav a{
  color: rgba(0,0,0,.6);
}

.site-footer__legalnav a:hover{
  color: #000;
}

.hero{
  position: relative;
  overflow: hidden;
}

.hero__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(0,0,0,.35),
    rgba(0,0,0,.35)
  );
}



.site-header{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 18px 0;
  background: transparent;
}

.hero{
  position: relative;
  min-height: 780px;
  padding: 160px 0 28px; /* oben Platz für Header */
  overflow: hidden;
}

.hero__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__overlay{
  position: absolute;
  inset: 0;
  background: rgba(20,20,20,.45);
}

/* ===================== Cookie Banner ===================== */

.cookie-banner{
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 12000;
  display: none;
}

.cookie-banner.is-visible{
  display: block;
}

.cookie-banner__card{
  max-width: 1180px;
  margin: 0 auto;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  backdrop-filter: blur(16px);
  padding: 22px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
}

.cookie-banner__eyebrow{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(0,0,0,.45);
  margin-bottom: 8px;
}

.cookie-banner__title{
  margin: 0;
  font-size: 28px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #1c1c1c;
}

.cookie-banner__text{
  margin: 12px 0 0;
  max-width: 68ch;
  color: rgba(0,0,0,.68);
  font-size: 15px;
  line-height: 1.5;
}

.cookie-banner__options{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.cookie-toggle{
  min-width: 230px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.08);
  cursor: pointer;
}

.cookie-toggle input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.cookie-toggle__slider{
  width: 46px;
  height: 28px;
  border-radius: var(--radius);
  background: rgba(0,0,0,.18);
  position: relative;
  flex: 0 0 46px;
  transition: background .18s ease;
}

.cookie-toggle__slider::after{
  content:"";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  transition: transform .18s ease;
}

.cookie-toggle input:checked + .cookie-toggle__slider{
  background: var(--yellow);
}

.cookie-toggle input:checked + .cookie-toggle__slider::after{
  transform: translateX(18px);
}

.cookie-toggle input:disabled + .cookie-toggle__slider{
  background: rgba(213,152,48,.28);
}

.cookie-toggle__label{
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.cookie-toggle__label strong{
  font-size: 14px;
  color: #1c1c1c;
}

.cookie-toggle__label small{
  margin-top: 3px;
  font-size: 12px;
  color: rgba(0,0,0,.52);
}

.cookie-banner__actions{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.cookie-btn{
  min-height: 48px;
  padding: 0 18px;
  border-radius:  var(--radius);
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  color: #1c1c1c;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.cookie-btn--ghost{
  background: rgba(0,0,0,.03);
}

.cookie-btn--primary{
  background: var(--yellow);
  border-color: transparent;
  color: #fff;
}

@media (hover:hover) and (pointer:fine){
  .cookie-btn:hover{
    transform: translateY(-1px);
  }

  .cookie-btn--ghost:hover{
    background: rgba(0,0,0,.06);
  }
}

@media (max-width: 900px){
  .cookie-banner{
    left: 12px;
    right: 12px;
    bottom: 12px;
  }

  .cookie-banner__card{
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 18px;
  }

  .cookie-banner__title{
    font-size: 24px;
  }

  .cookie-banner__actions{
    justify-content: stretch;
  }

  .cookie-btn{
    flex: 1 1 100%;
    width: 100%;
  }

  .cookie-toggle{
    width: 100%;
  }
}

/* ===================== Airbnb-like Search ===================== */

.air-search{
  position: relative;
  z-index: 120;
}

.air-search__bar{
  margin-top: 100px;
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 1px 1.2fr 1px 1fr auto;
  align-items: center;
  min-height: 82px;
  padding: 8px;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
}

.air-search__segment{
  position: relative;
  min-width: 0;
}

.air-search__segment.is-active .air-search__button{
  background: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,.10);
}

.air-search__button{
  width: 100%;
  min-height: 66px;
  border: 0;
  background: transparent;
  border-radius: var(--radius);
  padding: 0 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease;
}

.air-search__label{
  font-size: 14px;
  font-weight: 900;
  color: #1c1c1c;
  line-height: 1.1;
}

.air-search__value{
  margin-top: 4px;
  font-size: 16px;
  color: rgba(0,0,0,.52);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.air-search__divider{
  width: 1px;
  height: 34px;
  background: rgba(0,0,0,.10);
}

.air-search__submitwrap{
  padding-left: 10px;
  padding-right: 2px;
}

.air-search__submit{
  min-width: 132px;
  height: 56px;
  border: 0;
  border-radius: var(--radius);;
  background: var(--yellow);
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
}

.air-search__submit i{
  font-size: 20px;
}

.air-search__panel{
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  z-index: 300;
}

.air-search__panel--where{
  width: min(430px, calc(100vw - 40px));
}

.air-search__panel--when{
  left: 50%;
  transform: translateX(-50%);
  width: min(920px, calc(100vw - 40px));
}

.air-search__panel--who{
  right: 0;
  left: auto;
  width: min(400px, calc(100vw - 40px));
}

.air-panel{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius);
  box-shadow: 0 24px 70px rgba(0,0,0,.16);
}

.air-panel--where{
  padding: 22px;
}

.air-panel__title{
  font-size: 16px;
  font-weight: 800;
  color: #1c1c1c;
  margin-bottom: 14px;
}

.air-destinations{
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 470px;
  overflow: auto;
  padding-right: 4px;
}

.air-destination{
  width: 100%;
  border: 0;
  background: transparent;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: center;
  text-align: left;
  padding: 10px;
  border-radius: 18px;
  cursor: pointer;
}

.air-destination:hover{
  background: rgba(0,0,0,.04);
}

.air-destination__icon{
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(228,158,0,.10);
  color: var(--yellow);
  display: grid;
  place-items: center;
  font-size: 24px;
}

.air-destination__text strong{
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: #1c1c1c;
}

.air-destination__text small{
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: rgba(0,0,0,.50);
}

/* Calendar */
.air-panel--calendar{
  padding: 26px 28px 22px;
}

.air-calendar__tabs{
  display: flex;
  justify-content: center;
  margin-bottom: 26px;
}

.air-calendar__tabs > div,
.air-calendar__tabs button{
  margin: 0;
}

.air-calendar__tabs{
  gap: 0;
  background: #f0f0f0;
  padding: 5px;
  border-radius: 999px;
  display: inline-grid;
  grid-template-columns: repeat(3, 1fr);
}

.air-calendar__tab{
  min-width: 104px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(0,0,0,.62);
  font-weight: 800;
}

.air-calendar__tab.is-active{
  background: #fff;
  color: #1c1c1c;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

.air-calendar__nav{
  position: relative;
  height: 0;
}

.air-calendar__arrow{
  position: absolute;
  top: 10px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 28px;
  color: rgba(0,0,0,.65);
  cursor: pointer;
}

#prevMonthBtn{ left: 0; }
#nextMonthBtn{ right: 0; }

.air-calendar__months{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
}

.air-month__title{
  text-align: center;
  font-size: 18px;
  font-weight: 900;
  color: #1c1c1c;
  margin-bottom: 16px;
}

.air-month__weekdays,
.air-month__days{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.air-month__weekdays{
  margin-bottom: 10px;
}

.air-month__weekday{
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: rgba(0,0,0,.48);
  padding: 6px 0;
}

.air-day,
.air-day--empty{
  aspect-ratio: 1 / 1;
}

.air-day{
  border: 0;
  background: transparent;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 700;
  color: #1c1c1c;
  cursor: pointer;
}

.air-day:hover{
  background: rgba(228,158,0,.10);
}

.air-day.is-today{
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.14);
}

.air-day.is-start,
.air-day.is-end{
  background: var(--yellow);
  color: #fff;
}

.air-day.is-in-range{
  background: rgba(228,158,0,.14);
  border-radius: var(--radius);
}

.air-day.is-start.is-in-range{
  border-radius: var(--radius);
}

.air-day.is-end.is-in-range{
  border-radius: var(--radius);
}

.air-day.is-start.is-end{
  border-radius: var(--radius);
}

.air-day:disabled{
  opacity: .25;
  cursor: not-allowed;
}

.air-calendar__footer{
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.air-calendar__chips{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.air-chip{
  min-height: 38px;
  padding: 0 15px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  color: #1c1c1c;
  font-weight: 700;
  cursor: pointer;
}

.air-chip.is-active{
  border-color: #1c1c1c;
  background: rgba(0,0,0,.03);
}

.air-calendar__actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.air-calendar__btn{
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  font-weight: 800;
  cursor: pointer;
}

.air-calendar__btn--primary{
  background: var(--yellow);
  border-color: transparent;
  color: #fff;
}

/* Guests */
.air-panel--guests{
  padding: 24px;
}

.air-guests__row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.air-guests__title{
  font-size: 16px;
  font-weight: 900;
  color: #1c1c1c;
}

.air-guests__sub{
  margin-top: 4px;
  font-size: 14px;
  color: rgba(0,0,0,.50);
}

.air-stepper{
  display: flex;
  align-items: center;
  gap: 14px;
}

.air-stepper__btn{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  color: #1c1c1c;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.air-stepper__value{
  min-width: 18px;
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  color: #1c1c1c;
}

/* Mobile */
@media (max-width: 980px){
  .air-search__bar{
    grid-template-columns: 1fr;
    border-radius: 28px;
    padding: 10px;
    gap: 10px;
  }

  .air-search__divider{
    display: none;
  }

  .air-search__submitwrap{
    padding-left: 0;
    padding-right: 0;
  }

  .air-search__submit{
    width: 100%;
  }

  .air-search__panel,
  .air-search__panel--where,
  .air-search__panel--when,
  .air-search__panel--who{
    position: relative;
    top: 10px;
    left: 0;
    right: auto;
    transform: none;
    width: 100%;
  }

  .air-calendar__months{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px){
  .air-panel--calendar{
    padding: 20px 14px 18px;
  }

  .air-calendar__footer{
    flex-direction: column;
    align-items: stretch;
  }

  .air-calendar__actions{
    width: 100%;
  }

  .air-calendar__btn{
    flex: 1 1 100%;
  }
}

@media (max-width: 760px){
  .details-gallery{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .details-gallery__main img{
    height: 320px;
  }

  .details-gallery__grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0;
  }

  /* die 2 mittleren Bilder ausblenden */
  .details-gallery__thumb--t1,
  .details-gallery__thumb--t2{
    display: none;
  }

  /* nur unten links 1 Bild + rechts Grundriss */
  .details-gallery__thumb--t3,
  .details-gallery__thumb--floor{
    display: block;
  }

  .details-gallery__thumb img{
    height: 140px;
  }

  .details-title{
    font-size: 34px;
  }
}

@media (max-width: 760px){
  .details-gallery__thumb img{
    height: 120px;
    border-radius: 0;
  }

  .details-gallery__thumb{
    border-radius: 0;
  }
}

.details-gallery img{
  border-radius: 0;
}

.details-gallery{
  border-radius: 18px;
  overflow: hidden;
}

/* ===================== Checkout Mobile Fix ===================== */


.checkout__wrap{
  width: min(1200px, calc(100% - 24px));
  margin-inline: auto;
}

.checkout-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 24px;
  align-items: start;
}

.co-left,
.co-right{
  min-width: 0;
}

/* Stepper */
.stepper{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 18px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
  scrollbar-width: none;
}

.stepper::-webkit-scrollbar{
  display: none;
}

.step{
  flex: 0 0 auto;
  min-width: max-content;
}

.step__text{
  white-space: nowrap;
}

/* Blocks */
.co-block{
  border-radius: 16px;
  padding: 18px;
}

.co-row{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}

.co-field{
  min-width: 0;
}

.co-input{
  width: 100%;
  min-width: 0;
}

/* Buttons */
.co-nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

.co-next,
.co-back{
  min-height: 46px;
  padding: 0 16px;
  border-radius: 12px;
  white-space: nowrap;
}

/* Summary */
.summary{
  position: sticky;
  top: 24px;
  border-radius: 16px;
}

.summary__top{
  display: grid;
  grid-template-columns: 84px minmax(0,1fr);
  gap: 12px;
  align-items: center;
}

.summary__img{
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 12px;
}

/* Extras */
.extras{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.extra{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
}

.extra__media{
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
}

.extra__body{
  min-width: 0;
  flex: 1;
}

.extra__top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.extra__title{
  min-width: 0;
}

.extra__price{
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Kategorien Extras */
.extras-cats{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}

.extras-cat{
  min-width: 0;
  min-height: 110px;
}

/* Payment tabs */
.pay-tabs{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.pay-tab{
  flex: 1 1 140px;
  text-align: center;
}

/* Große Tablets */
@media (max-width: 1100px){
  .checkout-grid{
    grid-template-columns: 1fr;
  }

  .co-right{
    order: -1;
  }

  .summary{
    position: relative;
    top: 0;
  }
}

/* Mobile */
@media (max-width: 760px){
  .checkout{
    padding: 100px 0 100px;
  }

  .checkout__wrap{
    width: min(100%, calc(100% - 16px));
  }

  .co-title{
    font-size: 30px;
    line-height: 1;
  }

  .co-sub{
    font-size: 14px;
    line-height: 1.45;
  }

  .co-block{
    padding: 14px;
    border-radius: 14px;
    margin-bottom: 12px;
  }

  .co-row{
    grid-template-columns: 1fr;
    gap: 0;
  }

  .co-input{
    height: 48px;
    font-size: 16px; /* verhindert iOS zoom */
  }

  .co-nav{
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .co-next,
  .co-back{
    width: 100%;
    justify-content: center;
  }

  .co-submit{
    width: 100%;
    min-height: 50px;
    border-radius: 12px;
  }

  .summary{
    padding: 14px;
  }

  .summary__top{
    grid-template-columns: 72px minmax(0,1fr);
    gap: 10px;
  }

  .summary__img{
    width: 72px;
    height: 72px;
  }

  .sum-row{
    font-size: 14px;
    gap: 10px;
  }

  .sum-row--total{
    font-size: 16px;
  }

  .extras-cats{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .extras-cat{
    min-height: 98px;
    padding: 10px 8px;
  }

  .extra{
    align-items: flex-start;
  }

  .extra__top{
    flex-direction: column;
    align-items: flex-start;
  }

  .extra__price{
    white-space: normal;
  }

  .pay-tabs{
    flex-direction: column;
  }

  .pay-tab{
    width: 100%;
    flex: 1 1 auto;
  }
}

/* Sehr kleine Geräte */
@media (max-width: 420px){
  .co-title{
    font-size: 26px;
  }

  .step__text{
    font-size: 12px;
  }

  .step__num{
    width: 24px;
    height: 24px;
    font-size: 11px;
  }

  .summary__top{
    grid-template-columns: 64px minmax(0,1fr);
  }

  .summary__img{
    width: 64px;
    height: 64px;
  }

  .extras-cats{
    grid-template-columns: 1fr 1fr;
  }
}

/* Mobile Stepper verbessern */
.stepper{
  display:flex;
  align-items:center;
  gap: 10px;
  margin: 10px 0 18px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.stepper::-webkit-scrollbar{
  display:none;
}

.step{
  flex: 0 0 auto;
  min-width: max-content;
  scroll-snap-align: center;
}

.stepper__line{
  flex: 0 0 28px;
}

@media (max-width: 760px){
  .stepper{
    scroll-snap-type: x proximity;
    padding-inline: 4px;
  }

  .step{
    padding: 8px 6px;
  }

  .step__text{
    font-size: 12px;
    white-space: nowrap;
  }

  .step__num{
    width: 24px;
    height: 24px;
    font-size: 11px;
  }

  .stepper__line{
    min-width: 20px;
    flex-basis: 20px;
  }
}

.co-row--dates{
  grid-template-columns: 1.4fr .7fr;
  align-items: start;
}

.co-field--range{
  position: relative;
  min-width: 0;
}

.co-date-trigger{
  width: 100%;
  min-height: 56px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.02);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.co-date-trigger:hover{
  background: rgba(0,0,0,.03);
}

.co-date-trigger.is-open{
  background: #fff;
  border-color: rgba(213,152,48,.45);
  box-shadow: 0 0 0 4px rgba(213,152,48,.12);
}

.co-date-trigger__main{
  font-size: 15px;
  font-weight: 800;
  color: #1c1c1c;
}

.co-date-trigger__sub{
  margin-top: 4px;
  font-size: 13px;
  color: rgba(0,0,0,.52);
}

.co-date-panel{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 200;
  width: min(920px, calc(100vw - 60px));
}

.co-date-panel .air-panel{
  border-radius: 28px;
}

@media (max-width: 980px){
  .co-row--dates{
    grid-template-columns: 1fr;
  }

  .co-date-panel{
    position: relative;
    top: 12px;
    left: 0;
    width: 100%;
  }
}

.co-row--dates{
  align-items: stretch;
}

.co-field--range,
.co-row--dates .co-field{
  display: flex;
  flex-direction: column;
}

.co-date-trigger,
.co-row--dates .co-input{
  min-height: 72px;
  height: 72px;
}

.co-row--dates .co-input{
  border-radius: 18px;
  padding: 0 18px;
}

/* ===================== Price Info Modal ===================== */

.booking-card__priceline{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.booking-card__priceinfo{
  width: 26px;
  height: 26px;
  border: 0;
  background: transparent;
  color: rgba(0,0,0,.48);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

.booking-card__priceinfo i{
  font-size: 18px;
  color: rgba(0,0,0,.42);
  transition: color .15s ease, transform .15s ease;
}

.booking-card__priceinfo:hover i{
  color: var(--yellow);
  transform: scale(1.05);
}

.price-modal{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
}

.price-modal.is-open{
  display: block;
}

.price-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.42);
  backdrop-filter: blur(2px);
}

.price-modal__dialog{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(450px, calc(100vw - 32px));
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0,0,0,.28);
  overflow: hidden;
}

.price-modal__inner{
  padding: 14px 14px 16px;
}

.price-modal__close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: #f1f1f1;
  color: rgba(0,0,0,.7);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.price-modal__title{
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #3a3a3a;
  line-height: 1.2;
  font-family: Georgia, "Times New Roman", serif;
}

.price-modal__sub{
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: rgba(0,0,0,.58);
}

.price-modal__guestdot{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--yellow);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
}

.price-modal__table{
  margin-top: 14px;
  border: 1px solid rgba(0,0,0,.08);
  border-bottom: 0;
  background: #fff;
}

.price-modal__row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 42px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  font-size: 14px;
  color: rgba(0,0,0,.68);
}

.price-modal__row strong{
  color: #2d2d2d;
  font-weight: 700;
  white-space: nowrap;
}

.price-modal__row--total{
  background: #f3f3f3;
  font-weight: 800;
}

.price-modal__row--total strong{
  font-weight: 800;
}

.price-modal__included{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #454545;
}

.price-modal__included i{
  font-size: 18px;
  color: var(--yellow);
}

@media (max-width: 640px){
  .price-modal__dialog{
    width: calc(100vw - 20px);
  }

  .price-modal__inner{
    padding: 14px 12px 14px;
  }

  .price-modal__row{
    font-size: 13px;
    min-height: 40px;
    padding: 0 10px;
  }
}

.listing__body{
  padding: 15px 0px 15px 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.listing__headrow{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.listing__location{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(0,0,0,.48);
  margin-bottom: 6px;
}

.listing__location i{
  font-size: 14px;
  color: var(--yellow);
}

.listing__name{
  display: block;
  padding-right: 0;
}

.listing__title{
  font-size: 30px;
  font-weight: 900;
  line-height: 1.15;
  color: var(--yellow);
}

.listing__icons {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #9b9b9b1c;
    color: #0a0a0a;
    font-size: 20px;
    padding: 0px 10px 0px 10px;
    border-radius: 10px;
    flex-shrink: 0;
}



.listing__meta{
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  color: rgba(0,0,0,.56);
  font-size: 13px;
  padding-right: 0;
}

.listing__meta span{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.listing__meta i{
  margin-right: 0;
  color: rgba(0,0,0,.48);
}

.listing__desc{
  margin: 14px 0 0;
  color: rgba(0,0,0,.72);
  font-size: 14px;
  line-height: 1.45;
  padding-right: 0;
  max-width: 60ch;
}

.listing__bullets{
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.listing__bullets li{
  position: relative;
  padding-left: 16px;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(0,0,0,.62);
}

.listing__bullets li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--yellow);
  transform: translateY(-50%);
}

.listing__tags{
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.listing__tag{
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.05);
  color: rgba(0,0,0,.66);
  font-size: 12px;
  font-weight: 700;
}

.listing__tag--accent{
  background: rgba(228,158,0,.10);
  color: var(--yellow);
}

@media (max-width: 1100px){
  .listing__body{
    padding: 18px 14px;
  }
}

.carousel-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  border: none;
  cursor: pointer;
  z-index: 5;

  /* neu */
  opacity: 0;
  pointer-events: none;
  transition: all .2s ease;
}

.listing__media:hover .carousel-btn{
  opacity: 1;
  pointer-events: auto;
}

.carousel-btn--prev{
  left: 12px;
}

.carousel-btn--next{
  right: 12px;
}

.carousel-btn:hover{
  background: white;
  transform: translateY(-50%) scale(1.05);
}

.carousel-dots{
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 5;
}

.carousel-dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.6);
  transition: all .2s ease;
}

.carousel-dot.active{
  background: white;
  transform: scale(1.2);
}

.listing__media:hover .carousel-dot{
  opacity: 1;
}

.carousel-dot{
  opacity: .7;
}


/* Helper */
.mt-2 {
  margin-top: 0.5rem !important;
}

/* Services & Facilities */
.apt-extra {
  display: flex;
  gap: 2rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.card {
  flex: 1 1 0%;
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  border-color: rgb(244, 244, 244);
  height: 100%;
}

.services-card h3,
.amenities-card h3 {
  margin-top: 0;
  font-size: 25px;
  font-weight: 600;
  color: #333;
}

.amenities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

.amenities-card h4 {
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: 600;
  color: #333;
  margin-bottom: .5rem;
}

.amenities-card h4 i {
  margin-right: .5rem;
  font-size: 1.1rem;
}

.disclaimer {
  margin-top: 1.5rem;
  font-size: .75rem;
  color: #888;
}

/* Included services grid */
.svc-grid {
  list-style: none;
  margin: .75rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem .75rem;
}

.svc {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: start;
  gap: .5rem;
  border: 1px solid #e9ecef;
  background: #fff;
  border-radius: .7rem;
  padding: .6rem .7rem;
  transition: border-color .15s, box-shadow .15s;
}

.svc:hover {
  border-color: var(--yellow);
  box-shadow: 0 .3rem .8rem rgba(0, 0, 0, .04);
}

.svc i {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--yellow-15);
  color: var(--yellow);
  font-size: 17px;
}

.svc .txt strong {
  display: block;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.25;
  color: #1f2328;
}

.svc .txt small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.3;
  color: #6c757d;
}

/* Extra services list */
.service-list,
.services-list {
  list-style: none;
  margin: .5rem 0 0;
  padding: 0;
  display: grid;
  gap: .5rem;
}

.service-list li,
.services-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .5rem .75rem;
  align-items: center;
  padding: .5rem .6rem;
  border: 1px solid #eceff3;
  border-radius: .6rem;
  background: #fff;
}

.service-list i,
.services-list i {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--yellow) 14%, transparent);
  color: var(--yellow);
  font-size: 12px;
}

.service-list .name,
.services-list .name {
  font-weight: 600;
  color: #212529;
}

.services-card .service-list {
  list-style: none;
  margin: .5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.services-card .service-list > li {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: #fff;
  border: 1px solid #eee;
  border-radius: .6rem;
  padding: .5rem .6rem;
}

.services-card .service-list i {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--yellow) 14%, transparent);
  color: var(--yellow);
  font-size: 12px;
  flex: 0 0 28px;
}

.services-card .service-list .name {
  flex: 1;
  color: #1f2328;
  font-weight: 600;
  line-height: 1.2;
}

/* Pills */
.pill,
.pillgrey {
  display: block;
  width: fit-content;
  background: rgba(152, 152, 152, 0.15);
  border-radius: 5px;
  color: var(--main-primary-text);
  padding: 2px .625rem;
  font-size: 12px;
  line-height: 1.4;
  margin-top: 10px;
  white-space: nowrap;
}

/* Always included + timeline */
.apt-extra2 {
  display: flex;
  gap: 2rem;
}

.info-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}


.apt-extra2 .info-card {
  display: grid;
  grid-template-columns: 32px 1fr;
  column-gap: 16px;
  row-gap: 10px;
  align-items: center;
  align-content: start;
}

.apt-extra2 .info-card .info-icon {
  grid-column: 1;
  grid-row: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--yellow);
  font-size: 45px;
  margin: 0;
}

.apt-extra2 .info-card > h3 {
  grid-column: 2;
  grid-row: 1;
  margin: 0 !important;
  line-height: 1.15;
  font-size: 18px;
  font-weight: 800;
}

.apt-extra2 .info-card > h3 small {
  display: block;
  color: #6b7280;
  font-weight: 200;
  font-size: 18px;
}

.apt-extra2 .info-card > ul {
  grid-column: 1 / -1;
  margin: 8px 0 0 0 !important;
  padding-left: 1.25rem;
  color: #555;
  list-style: disc;
      font-size: 15px;
}

.hours-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.event {
  display: flex;
  margin-bottom: 1.5rem;
}

.event i {
  color: #0B5E3B;
  margin-right: 1rem;
  font-size: 1.5rem;
  flex-shrink: 0;
}

/* Timeline */
.hours-card .timeline {
  --icon: 36px;
  --gap-x: 14px;
  --line-w: 2px;
  --dash: 6px;
  position: relative;
}

.hours-card .event {
  position: relative;
  padding: 14px 0 14px calc(var(--icon) + var(--gap-x));
  margin: 0;
}

.hours-card .event i {
  position: absolute;
  left: 0;
  top: 14px;
  width: var(--icon);
  height: var(--icon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 45px;
  color: var(--yellow);
  background: #fff;
}

.hours-card .event::before {
  content: "";
  position: absolute;
  left: calc(var(--icon) / 2);
  transform: translateX(-50%);
  top: 0;
  bottom: 0;
  width: var(--line-w);
  background: repeating-linear-gradient(
    to bottom,
    var(--yellow) 0 calc(var(--dash)),
    transparent calc(var(--dash)) calc(var(--dash) * 2)
  );
}

.hours-card .event:first-child::before {
  top: calc(14px + var(--icon) / 2);
}

.hours-card .event:last-child::before {
  bottom: calc(14px + var(--icon) / 0.4);
}

.hours-card .event > div small {
  font-size: .85rem;
  color: #555;
  line-height: 1.4;
}

/* Responsive */
@media (max-width: 768px) {
  .apt-extra,
  .apt-extra2 {
    flex-direction: column;
  }

  .svc-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .hours-card .timeline {
    --icon: 30px;
    --gap-x: 12px;
  }

  .hours-card .event {
    padding-left: calc(var(--icon) + var(--gap-x));
  }

  .hours-card .event:first-child::before {
    top: calc(14px + var(--icon) / 2);
  }

  .hours-card .event:last-child::before {
    bottom: calc(14px + var(--icon) / 2);
  }
}

/* ---------- Header actions mobile fix ---------- */
.header-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.icon-btn--menu {
  display: none;
}

/* Mobile */
@media (max-width: 900px) {
  .header-actions {
  }

  /* Profil oben ausblenden, da app-nav das übernimmt */
  .account {
    display: none !important;
  }

  /* Burger auf Mobile immer sichtbar */
  .icon-btn--menu {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Desktop-Navigation ausblenden */
  .nav {
    display: none !important;
  }

  /* Header enger machen */
  .header-bar {
    gap: 12px;
  }

  .brand {
    min-width: 0;
    flex: 1 1 auto;
  }

  .header-actions {
    flex: 0 0 auto;
  }
}

@media (max-width: 900px) {
  .header-bar {
    padding: 10px 14px;
  }

  .brand .logo {
    max-height: 34px;
    width: auto;
  }

  .icon-btn {
    width: 42px;
    height: 42px;
  }

  .icon-nav {
    font-size: 22px;
  }
}
/* ===================== Mobile Menu ===================== */

.mobile-menu{
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}

.mobile-menu.is-open{
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.42);
  border: 0;
  padding: 0;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
}

.mobile-menu__panel{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;

  width: min(82vw, 340px);
  max-width: 340px;
  height: 100dvh;

  background: #fff;
  z-index: 2;

  border-radius: 20px 0 0 20px;
  box-shadow: -18px 0 40px rgba(0,0,0,.16);

  transform: translateX(100%);
  transition: transform .28s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-menu.is-open .mobile-menu__panel{
  transform: translateX(0);
}

.mobile-menu__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 18px 18px 10px;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 3;
}

.mobile-menu__title{
  font-weight: 800;
  font-size: 20px;
  color: #2c2c2c;
}

.mobile-menu__nav{
  display:flex;
  flex-direction:column;
  padding: 8px 14px 24px;
}

.mobile-menu__link{
  display:flex;
  align-items:center;
  min-height: 52px;
  padding: 0 10px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 18px;
  color: #2c2c2c;
}

.mobile-menu__link--muted{
  color: rgba(0,0,0,.58);
  font-weight: 600;
}

.mobile-menu__divider{
  height: 1px;
  background: rgba(0,0,0,.08);
  margin: 10px 10px 12px;
}

@media (hover:hover) and (pointer:fine){
  .mobile-menu__link:hover{
    background: rgba(0,0,0,.04);
  }
}

/* iPhone / Safari blue tap highlight entfernen */
button,
a,
.icon-btn,
.icon-btn--menu,
.mobile-menu__backdrop,
.mobile-menu__link{
  -webkit-tap-highlight-color: transparent;
}

/* Safari Button Defaults killen */
button,
.icon-btn,
.icon-btn--menu{
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  outline: none;
  box-shadow: none;
}

/* Auch beim Fokus nicht blau */
button:focus,
button:active,
.icon-btn:focus,
.icon-btn:active,
.icon-btn--menu:focus,
.icon-btn--menu:active{
  outline: none;
  box-shadow: none;
}

/* ===================== Contact / Support ===================== */

.support-page{
  background:#fff;
  color:#1c1c1c;
  padding: 100px 0 70px;
}

.support-hero{
  padding: 30px 0 24px;
}

.support-hero__inner{
  max-width: 760px;
}

.support-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(213,152,48,.10);
  color: rgba(0,0,0,.72);
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 12px;
}

.support-title{
  margin:0;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.support-sub{
  margin: 14px 0 0;
  color: rgba(0,0,0,.66);
  font-size: 17px;
  line-height: 1.5;
  max-width: 60ch;
}

.support-content{
  padding-top: 10px;
}

.support-layout{
  display:grid;
  grid-template-columns: minmax(0,1fr) 340px;
  gap: 22px;
  align-items:start;
}

.support-layout--single{
  grid-template-columns: minmax(0,760px);
}

.support-card{
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 14px 44px rgba(0,0,0,.06);
  background:#fff;
  padding: 20px;
}

.support-card__title{
  margin: 0 0 16px;
  font-size: 24px;
  font-weight: 900;
}

.support-form .co-input--textarea{
  min-height: 180px;
  height: auto;
  padding: 14px 12px;
  resize: vertical;
}

.support-submit{
  margin-top: 8px;
  min-height: 50px;
  border-radius: 12px;
}

.support-alert{
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14px;
}

.support-alert--error{
  background: rgba(255,75,75,.10);
  border: 1px solid rgba(255,75,75,.22);
}

.support-success{
  text-align:center;
  padding: 10px 6px 4px;
}

.support-success__icon{
  width: 68px;
  height: 68px;
  margin: 0 auto 14px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(0,200,120,.12);
  color: #169a5e;
  font-size: 30px;
  font-weight: 900;
}

.hp-field{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

.support-topics{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}

.support-topic{
  min-height: 110px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.10);
  background:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 10px;
  font-weight: 800;
  color:#1c1c1c;
  cursor:pointer;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.support-topic i{
  font-size: 30px;
  color: var(--yellow);
}

@media (hover:hover) and (pointer:fine){
  .support-topic:hover{
    border-color: rgba(213,152,48,.30);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0,0,0,.05);
  }
}

.support-step{
  display:none;
}

.support-step.is-open{
  display:block;
}

.support-recommendation{
  color: rgba(0,0,0,.72);
  line-height: 1.55;
}

.support-list{
  margin: 14px 0 0;
  padding-left: 18px;
}

.support-actions{
  margin-top: 18px;
}

.support-dual{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

.support-phonebtn{
  min-height: 50px;
  border-radius: 12px;
}

.support-phonehint{
  margin: 10px 0 0;
  color: rgba(0,0,0,.52);
  font-size: 13px;
}

.support-side__title{
  margin:0 0 16px;
  font-size: 20px;
  font-weight: 900;
}

.support-mini{
  padding: 14px;
  border-radius: 14px;
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.06);
  margin-bottom: 12px;
}

.support-mini strong{
  display:block;
  margin-bottom: 6px;
}

.support-mini p{
  margin:0;
  color: rgba(0,0,0,.64);
  font-size: 14px;
  line-height: 1.45;
}

@media (max-width: 980px){
  .support-layout{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px){
  .support-topics{
    grid-template-columns: 1fr;
  }

  .support-card{
    padding: 16px;
    border-radius: 16px;
  }

  .support-card__title{
    font-size: 22px;
  }
}

/* ===================== Brand Pages ===================== */

.brand-page{
  background:#fff;
  color:#1c1c1c;
}

.brand-hero{
  position: relative;
  min-height: 680px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.brand-hero__bg{
  position:absolute;
  inset:0;
}

.brand-hero__bg img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.brand-hero__overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(10,10,10,.70) 0%, rgba(10,10,10,.45) 45%, rgba(10,10,10,.25) 100%);
}

.brand-hero__content{
  position: relative;
  z-index: 2;
  padding: 140px 0 90px;
  color:#fff;
}

.brand-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  color:#fff;
  font-size: 13px;
  font-weight: 900;
  margin-bottom: 16px;
}

.brand-title{
  margin:0;
  max-width: 14ch;
  font-size: clamp(42px, 6vw, 74px);
  line-height: .96;
  letter-spacing: -0.04em;
  font-weight: 900;
  color:#fff;
}

.brand-sub{
  margin: 18px 0 0;
  max-width: 62ch;
  color: rgba(255,255,255,.88);
  font-size: 18px;
  line-height: 1.5;
}

.brand-cta{
  margin-top: 24px;
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

.brand-intro{
  padding: 70px 0 30px;
}

.brand-intro__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 30px;
  align-items:start;
}

.brand-copy h2{
  margin:0 0 12px;
  font-size: 36px;
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 900;
}

.brand-copy p{
  margin:0;
  color: rgba(0,0,0,.68);
  font-size: 17px;
  line-height: 1.65;
  max-width: 62ch;
}

.brand-features{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.brand-feature{
  min-height: 90px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  background:#fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.05);
  padding: 16px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.brand-feature i{
  font-size: 28px;
  color: var(--yellow);
}

.brand-feature span{
  font-weight: 800;
  color:#1c1c1c;
  line-height: 1.35;
}

.brand-section{
  padding: 34px 0 70px;
}

.brand-section__head{
  margin-bottom: 20px;
}

.brand-section__head h2{
  margin:0;
  font-size: 36px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.brand-section__head p{
  margin: 10px 0 0;
  color: rgba(0,0,0,.62);
  font-size: 16px;
}

.brand-cards{
  display:grid;
  gap: 18px;
}

.brand-card{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap: 18px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  overflow:hidden;
  background:#fff;
  box-shadow: 0 14px 40px rgba(0,0,0,.05);
}

.brand-card__image img{
  width:100%;
  height:100%;
  min-height: 280px;
  object-fit:cover;
}

.brand-card__body{
  padding: 18px 18px 18px 0;
  display:flex;
  flex-direction:column;
}

.brand-card__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
}

.brand-card__location{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(0,0,0,.48);
  margin-bottom: 8px;
}

.brand-card__location i{
  color: var(--yellow);
}

.brand-card__title{
  margin:0;
  font-size: 30px;
  line-height: 1.08;
  font-weight: 900;
  color: var(--yellow);
}

.brand-card__rating{
  font-weight: 900;
  color: rgba(0,0,0,.72);
  white-space: nowrap;
}

.brand-card__meta{
  display:flex;
  flex-wrap:wrap;
  gap: 10px 14px;
  margin-top: 12px;
  color: rgba(0,0,0,.58);
  font-size: 14px;
}

.brand-card__meta span{
  display:inline-flex;
  align-items:center;
  gap: 6px;
}

.brand-card__text{
  margin: 14px 0 0;
  color: rgba(0,0,0,.70);
  line-height: 1.55;
  max-width: 70ch;
}

.brand-card__bottom{
  margin-top: auto;
  padding-top: 18px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.brand-card__price{
  font-size: 28px;
  font-weight: 900;
  color:#1c1c1c;
}

.brand-card__price small{
  display:block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(0,0,0,.48);
}

.brand-card__actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.brand-empty{
  padding: 20px;
  border: 1px dashed rgba(0,0,0,.14);
  border-radius: 16px;
  color: rgba(0,0,0,.58);
}

.brand-info-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.brand-info-card{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  background:#fff;
  box-shadow: 0 12px 36px rgba(0,0,0,.05);
  padding: 20px;
}

.brand-info-card i{
  font-size: 32px;
  color: var(--yellow);
}

.brand-info-card h3{
  margin: 14px 0 8px;
  font-size: 20px;
  font-weight: 900;
}

.brand-info-card p{
  margin:0;
  color: rgba(0,0,0,.66);
  line-height: 1.55;
}

.brand-gallery{
  padding: 0 0 70px;
}

.brand-gallery__grid{
  display:grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 14px;
}

.brand-gallery__item{
  border-radius: 18px;
  overflow:hidden;
  min-height: 280px;
  background: rgba(0,0,0,.05);
}

.brand-gallery__item--large{
  min-height: 420px;
}

.brand-gallery__item img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.brand-cta-section{
  padding: 0 0 80px;
}

.brand-cta-box{
  border-radius: 24px;
  padding: 28px;
  background: linear-gradient(135deg, rgba(223,159,33,.10), rgba(223,159,33,.03));
  border: 1px solid rgba(223,159,33,.16);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 20px;
  flex-wrap: wrap;
}

.brand-cta-box h2{
  margin:0 0 8px;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.brand-cta-box p{
  margin:0;
  color: rgba(0,0,0,.66);
  max-width: 60ch;
}

.brand-cta-box__actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 1100px){
  .brand-card{
    grid-template-columns: 1fr;
  }

  .brand-card__body{
    padding: 0 18px 18px;
  }

  .brand-info-grid{
    grid-template-columns: repeat(2, 1fr);
  }

  .brand-gallery__grid{
    grid-template-columns: 1fr;
  }

  .brand-gallery__item,
  .brand-gallery__item--large{
    min-height: 280px;
  }
}

@media (max-width: 760px){
  .brand-hero{
    min-height: 600px;
  }

  .brand-hero__content{
    padding: 120px 0 70px;
  }

  .brand-title{
    max-width: none;
    font-size: clamp(38px, 12vw, 54px);
  }

  .brand-sub{
    font-size: 16px;
  }

  .brand-intro__grid{
    grid-template-columns: 1fr;
  }

  .brand-features{
    grid-template-columns: 1fr;
  }

  .brand-info-grid{
    grid-template-columns: 1fr;
  }

  .brand-card__title{
    font-size: 26px;
  }

  .brand-cta-box{
    padding: 22px;
  }

  .brand-cta-box h2{
    font-size: 28px;
  }
}

/* ===================== Tiny House District / Concept Sections ===================== */

.district-head{
  margin-bottom: 26px;
}

.district-head--center{
  text-align: center;
}

.district-title{
  margin: 0;
  font-size: clamp(34px, 4vw, 56px);
  line-height: .98;
  letter-spacing: -0.03em;
  font-weight: 900;
  color: #1c1c1c;
}

.district-sub{
  margin: 14px 0 0;
  max-width: 74ch;
  color: rgba(0,0,0,.66);
  font-size: 17px;
  line-height: 1.6;
}

.district-head--center .district-sub{
  margin-inline: auto;
}

/* Masterplan */
.district-masterplan{
  padding: 70px 0 20px;
}

.district-plan{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 24px;
  align-items: start;
}

.district-plan__map{
  position: relative;
  min-height: 520px;
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(223,159,33,.12), transparent 30%),
    #f9f9f9;
  border: 1px solid rgba(0,0,0,.08);
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,.05);
}

.district-road{
  position: absolute;
  background: repeating-linear-gradient(
    90deg,
    rgba(0,0,0,.16) 0 14px,
    rgba(255,255,255,.95) 14px 18px
  );
  border-radius: 999px;
}

.district-road--main{
  left: 8%;
  right: 8%;
  top: 48%;
  height: 22px;
}

.district-road--cross{
  top: 10%;
  bottom: 10%;
  left: 48%;
  width: 22px;
  background: repeating-linear-gradient(
    180deg,
    rgba(0,0,0,.16) 0 14px,
    rgba(255,255,255,.95) 14px 18px
  );
}

.district-zone{
  position: absolute;
  border-radius: 22px;
  padding: 18px;
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.05);
  max-width: 240px;
}

.district-zone h3{
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 900;
}

.district-zone p{
  margin: 0;
  color: rgba(0,0,0,.62);
  font-size: 14px;
  line-height: 1.45;
}

.district-zone--homes{
  top: 8%;
  left: 6%;
}

.district-zone--wellness{
  top: 12%;
  right: 6%;
}

.district-zone--social{
  bottom: 10%;
  left: 10%;
}

.district-zone--parking{
  bottom: 8%;
  right: 8%;
}

.district-plan__text{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.district-note{
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 14px;
  align-items: start;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.04);
  padding: 16px;
}

.district-note i{
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: rgba(223,159,33,.10);
  color: var(--yellow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}

.district-note strong{
  display:block;
  font-size: 18px;
  font-weight: 900;
  margin-bottom: 6px;
}

.district-note p{
  margin:0;
  color: rgba(0,0,0,.64);
  line-height: 1.55;
}

/* Units */
.district-units{
  padding: 50px 0 30px;
}

.district-units__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.district-unit{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(0,0,0,.05);
  overflow: hidden;
}

.district-unit__visual{
  min-height: 220px;
  background:
    linear-gradient(180deg, rgba(223,159,33,.06), rgba(223,159,33,.02)),
    #fafafa;
  display: grid;
  place-items: center;
  padding: 20px;
}

.district-unit__body{
  padding: 18px;
}

.district-unit__body h3{
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.08;
  font-weight: 900;
}

.district-unit__body p{
  margin:0;
  color: rgba(0,0,0,.64);
  line-height: 1.55;
}

.district-tags{
  margin-top: 14px;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}

.district-tags span{
  display:inline-flex;
  align-items:center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(223,159,33,.10);
  color: #9a6a00;
  font-size: 12px;
  font-weight: 800;
}

/* Tiny house sketch */
.tiny-sketch{
  position: relative;
  width: 230px;
  height: 150px;
}

.tiny-sketch__roof{
  position:absolute;
  left: 18px;
  right: 18px;
  top: 8px;
  height: 36px;
  background: #2f2f2f;
  clip-path: polygon(8% 100%, 50% 0%, 92% 100%);
}

.tiny-sketch__body{
  position:absolute;
  left: 34px;
  right: 34px;
  bottom: 12px;
  top: 40px;
  border-radius: 10px;
  background: #fff;
  border: 2px solid rgba(0,0,0,.16);
  box-shadow: 0 12px 22px rgba(0,0,0,.05);
}

.tiny-sketch__window{
  position:absolute;
  width: 38px;
  height: 28px;
  top: 18px;
  left: 18px;
  border: 2px solid rgba(0,0,0,.20);
  border-radius: 8px;
  background: rgba(223,159,33,.10);
}

.tiny-sketch__window--right{
  left: auto;
  right: 18px;
}

.tiny-sketch__door{
  position:absolute;
  width: 28px;
  height: 54px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 8px 8px 0 0;
  background: rgba(0,0,0,.08);
  border: 2px solid rgba(0,0,0,.16);
}

.tiny-sketch__terrace{
  position:absolute;
  left: -18px;
  right: -18px;
  bottom: -10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(223,159,33,.25);
}

.tiny-sketch__chimney{
  position:absolute;
  top: -18px;
  right: 26px;
  width: 12px;
  height: 26px;
  border-radius: 4px;
  background: rgba(0,0,0,.28);
}

/* Floorplans */
.district-floorplans{
  padding: 40px 0 30px;
}

.district-floorplans__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.floorplan-card{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(0,0,0,.05);
  overflow: hidden;
}

.floorplan-card__plan{
  padding: 18px;
  background: #fbfbfb;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.floorplan-card__body{
  padding: 18px;
}

.floorplan-card__body h3{
  margin:0 0 8px;
  font-size: 22px;
  font-weight: 900;
}

.floorplan-card__body p{
  margin:0;
  color: rgba(0,0,0,.64);
  line-height: 1.55;
}

.fp{
  min-height: 240px;
  border: 2px solid rgba(0,0,0,.18);
  border-radius: 12px;
  background: #fff;
  padding: 8px;
  display: grid;
  gap: 8px;
}

.fp--a{
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 80px 1fr 62px;
}

.fp--b{
  grid-template-columns: 1.2fr .8fr 1fr;
  grid-template-rows: 90px 1fr 68px;
}

.fp--c{
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 72px 1fr 62px;
}

.fp-room{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  border-radius: 10px;
  background: rgba(223,159,33,.10);
  border: 1px solid rgba(223,159,33,.18);
  font-size: 12px;
  font-weight: 800;
  color: #775200;
  padding: 8px;
}

.fp-room--sleep{ grid-column: 1; grid-row: 1; }
.fp-room--sleep2{ grid-column: 2; grid-row: 1; }
.fp-room--bath{ grid-column: 3; grid-row: 1; background: rgba(0,0,0,.05); color:#444; border-color: rgba(0,0,0,.08); }
.fp-room--living{ grid-column: 1 / span 2; grid-row: 2; }
.fp-room--kitchen{ grid-column: 3; grid-row: 2 / span 2; background: rgba(255,240,210,.7); }
.fp-room--terrace{ grid-column: 1 / -1; grid-row: 3; background: rgba(0,0,0,.04); color:#444; border-color: rgba(0,0,0,.08); }

.fp--b .wide{ grid-column: 1 / span 2; grid-row: 1 / span 2; }
.fp--b .fp-room--kitchen{ grid-column: 3; grid-row: 1; }
.fp--b .fp-room--bath{ grid-column: 3; grid-row: 2; }
.fp--b .fp-room--sleep{ grid-column: 1; grid-row: 3; }
.fp--b .fp-room--sleep2{ grid-column: 2 / span 2; grid-row: 3; }

.fp--c .fp-room--sleep{ grid-column: 1; grid-row: 1; }
.fp--c .fp-room--bath{ grid-column: 2; grid-row: 1; }
.fp--c .tall{ grid-column: 1; grid-row: 2; }
.fp--c .fp-room--kitchen{ grid-column: 2; grid-row: 2; }
.fp--c .fp-room--terrace{ grid-column: 1 / -1; grid-row: 3; }

/* Story */
.district-story{
  padding: 40px 0 80px;
}

.district-story__box{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 22px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(223,159,33,.08), rgba(223,159,33,.02));
  border: 1px solid rgba(223,159,33,.16);
  padding: 26px;
}

.district-story__steps{
  margin-top: 24px;
  display:flex;
  flex-direction:column;
  gap: 14px;
}

.district-step{
  display:grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  align-items:start;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  padding: 14px;
}

.district-step span{
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--yellow);
  color: #fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 18px;
}

.district-step strong{
  display:block;
  margin-bottom: 6px;
  font-size: 18px;
  font-weight: 900;
}

.district-step p{
  margin:0;
  color: rgba(0,0,0,.66);
  line-height: 1.5;
}

.district-story__aside{
  display:flex;
}

.district-aside-card{
  width:100%;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 14px 32px rgba(0,0,0,.05);
  padding: 22px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.district-aside-card i{
  font-size: 38px;
  color: var(--yellow);
}

.district-aside-card h3{
  margin: 16px 0 10px;
  font-size: 28px;
  line-height: 1.02;
  font-weight: 900;
}

.district-aside-card p{
  margin:0 0 18px;
  color: rgba(0,0,0,.66);
  line-height: 1.55;
}

/* Responsive */
@media (max-width: 1100px){
  .district-plan,
  .district-story__box{
    grid-template-columns: 1fr;
  }

  .district-units__grid,
  .district-floorplans__grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px){
  .district-plan__map{
    min-height: 420px;
  }

  .district-zone{
    max-width: 180px;
    padding: 14px;
  }

  .district-zone h3{
    font-size: 16px;
  }

  .district-zone p{
    font-size: 13px;
  }

  .district-title{
    font-size: clamp(30px, 10vw, 42px);
  }

  .district-sub{
    font-size: 15px;
  }
}

/* ===================== Tiny House District ===================== */

.tinydistrict-page{
  background: #fff;
  color: #1c1c1c;
}

.tinydistrict-hero{
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.tinydistrict-hero__bg{
  position: absolute;
  inset: 0;
}

.tinydistrict-hero__bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tinydistrict-hero__overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.42) 40%, rgba(0,0,0,.28) 100%);
}

.tinydistrict-hero__content{
  position: relative;
  z-index: 2;
  padding: 130px 0 80px;
  color: #fff;
}

.tinydistrict-hero__eyebrow,
.tinydistrict-kicker{
  display: inline-block;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--yellow);
}

.tinydistrict-hero__title{
  margin: 0;
  font-size: clamp(42px, 6vw, 82px);
  line-height: .95;
  font-weight: 900;
  letter-spacing: -.03em;
}

.tinydistrict-hero__lead{
  margin: 18px 0 0;
  max-width: 62ch;
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255,255,255,.92);
}

.tinydistrict-hero__actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.tinydistrict-section{
  padding: 82px 0;
}

.tinydistrict-section--soft{
  background: #faf8f4;
}

.tinydistrict-title{
  margin: 0;
  font-size: clamp(28px, 3vw, 48px);
  line-height: 1.02;
  letter-spacing: -.025em;
  font-weight: 900;
  color: #1c1c1c;
}

.tinydistrict-text{
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(0,0,0,.68);
}

.tinydistrict-head{
  display: grid;
  grid-template-columns: 1fr .9fr;
  gap: 28px;
  align-items: end;
  margin-bottom: 26px;
}

.tinydistrict-head__text{
  margin: 0;
  color: rgba(0,0,0,.65);
  line-height: 1.65;
}

.tinydistrict-head--center{
  grid-template-columns: 1fr;
  text-align: center;
}

.tinydistrict-intro,
.tinydistrict-moodboard,
.tinydistrict-hub,
.tinydistrict-wellness{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: center;
}

.tinydistrict-intro__image img,
.tinydistrict-moodboard__image img,
.tinydistrict-hub__image img,
.tinydistrict-wellness__image img,
.tinydistrict-masterplan__image img{
  width: 100%;
  border-radius: 22px;
  object-fit: cover;
  box-shadow: 0 18px 50px rgba(0,0,0,.10);
}

.tinydistrict-masterplan{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 28px;
  align-items: start;
}

.tinydistrict-masterplan__features{
  display: grid;
  gap: 12px;
}

.tinydistrict-feature{
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: start;
  padding: 16px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.04);
}

.tinydistrict-feature i{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--yellow);
  background: rgba(223,159,33,.12);
}

.tinydistrict-feature strong{
  display: block;
  font-size: 15px;
  color: #1c1c1c;
}

.tinydistrict-feature span{
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(0,0,0,.62);
}

.tinydistrict-houses{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.tinydistrict-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,.06);
}

.tinydistrict-card__media img{
  width: 100%;
  height: 320px;
  object-fit: cover;
}

.tinydistrict-card__body{
  padding: 20px;
}

.tinydistrict-card__body h3{
  margin: 0;
  font-size: 22px;
  font-weight: 900;
}

.tinydistrict-card__body p{
  margin: 12px 0 0;
  color: rgba(0,0,0,.66);
  line-height: 1.6;
}

.tinydistrict-card__body ul{
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.tinydistrict-card__body li{
  position: relative;
  padding-left: 16px;
  color: rgba(0,0,0,.70);
}

.tinydistrict-card__body li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .7em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--yellow);
  transform: translateY(-50%);
}

.tinydistrict-iconlist{
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

.tinydistrict-iconlist__item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
}

.tinydistrict-iconlist__item i{
  font-size: 22px;
  color: var(--yellow);
}

.tinydistrict-iconlist__item span{
  font-weight: 700;
  color: rgba(0,0,0,.74);
}

.tinydistrict-statgrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 18px;
}

.tinydistrict-stat{
  padding: 16px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
}

.tinydistrict-stat strong{
  display: block;
  font-size: 22px;
  font-weight: 900;
  color: var(--yellow);
}

.tinydistrict-stat span{
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(0,0,0,.62);
}

.tinydistrict-benefits{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.tinydistrict-benefit{
  padding: 22px 18px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 12px 30px rgba(0,0,0,.05);
}

.tinydistrict-benefit i{
  font-size: 30px;
  color: var(--yellow);
}

.tinydistrict-benefit h3{
  margin: 14px 0 0;
  font-size: 18px;
  font-weight: 900;
}

.tinydistrict-benefit p{
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(0,0,0,.64);
}

.tinydistrict-cta{
  padding: 0 0 90px;
}

.tinydistrict-cta__box{
  background: linear-gradient(135deg, #1d1d1d, #2c2c2c);
  color: #fff;
  border-radius: 24px;
  padding: 34px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
  overflow: hidden;
}

.tinydistrict-cta__box .tinydistrict-title{
  color: #fff;
}

.tinydistrict-cta__box .tinydistrict-text{
  color: rgba(255,255,255,.82);
}

.tinydistrict-cta__actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 1100px){
  .tinydistrict-head,
  .tinydistrict-intro,
  .tinydistrict-moodboard,
  .tinydistrict-hub,
  .tinydistrict-wellness,
  .tinydistrict-masterplan{
    grid-template-columns: 1fr;
  }

  .tinydistrict-benefits{
    grid-template-columns: 1fr 1fr;
  }

  .tinydistrict-statgrid{
    grid-template-columns: 1fr;
  }

  .tinydistrict-cta__box{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px){
  .tinydistrict-hero{
    min-height: 82vh;
  }

  .tinydistrict-hero__content{
    padding: 120px 0 50px;
  }

  .tinydistrict-hero__lead{
    font-size: 16px;
  }

  .tinydistrict-houses,
  .tinydistrict-benefits{
    grid-template-columns: 1fr;
  }

  .tinydistrict-card__media img{
    height: 240px;
  }

  .tinydistrict-section{
    padding: 58px 0;
  }

  .tinydistrict-cta__box{
    padding: 24px;
  }
}

/* ===================== Legal Pages ===================== */

.legal-page{
  background: #fff;
  color: #1c1c1c;
  padding-bottom: 70px;
}

.legal-hero{
  padding: 130px 0 40px;
  background: linear-gradient(180deg, rgba(223,159,33,.08), rgba(223,159,33,0));
}

.legal-hero__inner{
  max-width: 900px;
}

.legal-kicker{
  display: inline-block;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--yellow);
}

.legal-title{
  margin: 0;
  font-size: 45px;
  line-height: .98;
  font-weight: 900;
  letter-spacing: -.03em;
  color: #1c1c1c;
}

.legal-sub{
  margin: 14px 0 0;
  max-width: 60ch;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(0,0,0,.66);
}

.legal-content{
  padding: 20px 0 0;
}

.legal-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 22px;
  box-shadow: 0 18px 50px rgba(0,0,0,.05);
  padding: 30px;
}

.legal-block + .legal-block{
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid rgba(0,0,0,.08);
}

.legal-block h2{
  margin: 0 0 12px;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 900;
  color: #1c1c1c;
}

.legal-block p{
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(0,0,0,.72);
}

.legal-block p:last-child{
  margin-bottom: 0;
}

.legal-block a{
  color: var(--yellow);
  text-decoration: none;
  font-weight: 700;
}

.legal-block a:hover{
  text-decoration: underline;
}

@media (max-width: 760px){
  .legal-hero{
    padding: 110px 0 28px;
  }

  .legal-card{
    padding: 20px;
    border-radius: 18px;
  }

  .legal-block h2{
    font-size: 19px;
  }

  .legal-block p{
    font-size: 14px;
    line-height: 1.7;
  }
}

.legal-list{
  margin: 14px 0 0;
  padding-left: 20px;
  color: rgba(0,0,0,.78);
  line-height: 1.65;
}

.legal-list li{
  margin-bottom: 10px;
}

.legal-formbox{
  margin-top: 16px;
  padding: 18px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  background: rgba(0,0,0,.02);
}

/* ===================== Our Story ===================== */

.story-page{
  background:#fff;
  color:#1c1c1c;
  padding: 40px 0 80px;
}

.story-hero{
  padding: 70px 0 34px;
}

.story-hero__grid{
  display:grid;
  grid-template-columns: minmax(0, 1.2fr) 360px;
  gap: 24px;
  align-items: stretch;
}

.story-hero__content,
.story-hero__cardinner{
  border-radius: 18px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 14px 44px rgba(0,0,0,.06);
  padding: 28px;
}

.story-kicker{
  display:inline-flex;
  align-items:center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(228,158,0,.10);
  color: var(--yellow);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.story-title{
  margin: 16px 0 0;
  font-size: clamp(38px, 5vw, 66px);
  line-height: .95;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.story-sub{
  margin: 16px 0 0;
  max-width: 70ch;
  color: rgba(0,0,0,.66);
  font-size: 16px;
  line-height: 1.6;
}

.story-hero__stats{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin-top: 26px;
}

.story-stat{
  padding: 14px;
  border-radius: 14px;
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.06);
}

.story-stat strong{
  display:block;
  font-size: 14px;
  font-weight: 900;
  color:#1c1c1c;
}

.story-stat span{
  display:block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(0,0,0,.58);
}

.story-mini-kicker{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(0,0,0,.45);
  margin-bottom: 14px;
}

.story-mini-list{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.story-mini-item{
  display:grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items:start;
  padding: 10px 0;
  border-top: 1px solid rgba(0,0,0,.06);
}

.story-mini-item:first-child{
  border-top: 0;
  padding-top: 0;
}

.story-mini-item i{
  display:inline-grid;
  place-items:center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(228,158,0,.10);
  color: var(--yellow);
  font-size: 16px;
}

.story-mini-item span{
  color: rgba(0,0,0,.66);
  line-height: 1.45;
  font-size: 14px;
}

.story-overview{
  padding: 28px 0 10px;
}

.story-overview__head,
.story-values__head{
  text-align:center;
  margin-bottom: 24px;
}

.story-section-title{
  margin:0;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.story-section-sub{
  margin: 12px auto 0;
  max-width: 70ch;
  color: rgba(0,0,0,.62);
  line-height: 1.55;
  font-size: 15px;
}

.story-nav{
  display:flex;
  justify-content:center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 34px;
}

.story-nav__dot{
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background:#fff;
  color: rgba(0,0,0,.62);
  font-size: 13px;
  font-weight: 800;
  cursor:pointer;
  transition: all .18s ease;
}

.story-nav__dot.is-active{
  background: rgba(228,158,0,.10);
  border-color: rgba(228,158,0,.28);
  color: var(--yellow);
}

.story-timeline{
  position: relative;
  padding: 10px 0 20px;
}

.story-timeline__line{
  position:absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    rgba(228,158,0,.18),
    rgba(0,0,0,.08)
  );
}

.story-item{
  position: relative;
  width: 50%;
  padding: 10px 42px 42px;
}

.story-item--left{
  margin-right: auto;
  text-align: right;
}

.story-item--right{
  margin-left: auto;
  text-align: left;
}

.story-item__marker{
  position: absolute;
  top: 18px;
  display:flex;
  align-items:center;
  gap: 12px;
}

.story-item--left .story-item__marker{
  right: -28px;
  flex-direction: row-reverse;
}

.story-item--right .story-item__marker{
  left: -28px;
}

.story-item__point{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background:#fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition: all .18s ease;
}

.story-item__point i{
  font-size: 24px;
  color: rgba(0,0,0,.58);
}

.story-item.is-active .story-item__point{
  background: var(--yellow);
  border-color: transparent;
  transform: scale(1.04);
}

.story-item.is-active .story-item__point i{
  color: #fff;
}

.story-item__year{
  display:inline-flex;
  align-items:center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.04);
  color: rgba(0,0,0,.66);
  font-size: 12px;
  font-weight: 900;
}

.story-item__card{
  border-radius: 18px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 14px 44px rgba(0,0,0,.06);
  padding: 22px;
  transition: all .18s ease;
}

.story-item.is-active .story-item__card{
  border-color: rgba(228,158,0,.20);
  box-shadow: 0 18px 50px rgba(228,158,0,.10);
}

.story-item__tag{
  display:inline-flex;
  align-items:center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(228,158,0,.10);
  color: var(--yellow);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.story-item__title{
  margin: 14px 0 0;
  font-size: 24px;
  line-height: 1.1;
  font-weight: 900;
  color:#1c1c1c;
}

.story-item__subtitle{
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
  color: rgba(0,0,0,.48);
}

.story-item__text{
  margin: 14px 0 0;
  color: rgba(0,0,0,.66);
  line-height: 1.65;
  font-size: 15px;
}

.story-values{
  padding: 50px 0 20px;
}

.story-values__grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 16px;
}

.story-value{
  border-radius: 18px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 14px 44px rgba(0,0,0,.06);
  padding: 22px;
}

.story-value__icon{
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(228,158,0,.10);
  color: var(--yellow);
  display:grid;
  place-items:center;
  font-size: 24px;
  margin-bottom: 14px;
}

.story-value h3{
  margin:0;
  font-size: 18px;
  font-weight: 900;
  color:#1c1c1c;
}

.story-value p{
  margin: 10px 0 0;
  color: rgba(0,0,0,.62);
  line-height: 1.55;
  font-size: 14px;
}

.story-future{
  padding: 50px 0 20px;
}

.story-future__card{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 20px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(228,158,0,.06), rgba(255,255,255,1));
  border:1px solid rgba(228,158,0,.15);
  box-shadow: 0 20px 60px rgba(0,0,0,.06);
  padding: 28px;
}

.story-future__points{
  display:grid;
  gap: 12px;
  margin-top: 22px;
}

.story-future__point{
  display:grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items:center;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(0,0,0,.06);
}

.story-future__point i{
  display:inline-grid;
  place-items:center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(228,158,0,.10);
  color: var(--yellow);
  font-size: 18px;
}

.story-future__point span{
  color: rgba(0,0,0,.70);
  font-weight: 700;
  line-height: 1.4;
  font-size: 14px;
}

.story-future__visual{
  position: relative;
  min-height: 360px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 30% 20%, rgba(228,158,0,.18), transparent 34%),
    radial-gradient(circle at 70% 70%, rgba(228,158,0,.10), transparent 34%),
    #fff;
  border:1px solid rgba(0,0,0,.06);
  overflow: hidden;
}

.story-future__bubble{
  position:absolute;
  min-width: 150px;
  min-height: 86px;
  border-radius: 18px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 14px 40px rgba(0,0,0,.06);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 14px;
  text-align:center;
}

.story-future__bubble i{
  font-size: 24px;
  color: var(--yellow);
}

.story-future__bubble span{
  font-size: 13px;
  font-weight: 900;
  color:#1c1c1c;
}

.story-future__bubble--a{ top: 28px; left: 24px; }
.story-future__bubble--b{ top: 48px; right: 24px; }
.story-future__bubble--c{ bottom: 30px; left: 54px; }
.story-future__bubble--d{ bottom: 56px; right: 44px; }

@media (max-width: 1100px){
  .story-hero__grid,
  .story-future__card{
    grid-template-columns: 1fr;
  }

  .story-values__grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 900px){
  .story-timeline__line{
    left: 22px;
    transform: none;
  }

  .story-item{
    width: 100%;
    padding: 10px 0 28px 64px;
    text-align: left !important;
  }

  .story-item__marker,
  .story-item--left .story-item__marker,
  .story-item--right .story-item__marker{
    left: -6px;
    right: auto;
    flex-direction: row;
  }

  .story-item__year{
    display:none;
  }
}

@media (max-width: 760px){
  .story-page{
    padding: 18px 0 60px;
  }

  .story-hero{
    padding: 24px 0 16px;
  }

  .story-hero__content,
  .story-hero__cardinner,
  .story-item__card,
  .story-value,
  .story-future__card{
    padding: 18px;
    border-radius: 16px;
  }

  .story-hero__stats{
    grid-template-columns: 1fr;
  }

  .story-values__grid{
    grid-template-columns: 1fr;
  }

  .story-title{
    font-size: 42px;
  }

  .story-item__title{
    font-size: 20px;
  }

  .story-item__point{
    width: 48px;
    height: 48px;
  }

  .story-future__visual{
    min-height: 300px;
  }

  .story-future__bubble{
    min-width: 120px;
    min-height: 74px;
    padding: 10px;
  }

  .story-future__bubble span{
    font-size: 12px;
  }
}

/* ===================== My Bookings ===================== */

.mybookings-section{
  margin-top: 28px;
}

.mybookings-empty{
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 12px 40px rgba(0,0,0,.06);
  padding: 18px;
  color: rgba(0,0,0,.62);
}

.booking-feature-list{
  display: grid;
  gap: 18px;
}

.booking-feature-card{
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 50px rgba(0,0,0,.08);
}

.booking-feature-card__media img{
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  display: block;
}

.booking-feature-card__body{
  padding: 22px;
}

.booking-feature-card__top{
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.booking-feature-card__title{
  margin: 10px 0 0;
  font-size: 30px;
  line-height: 1.05;
  font-weight: 900;
  color: var(--yellow);
}

.booking-feature-card__sub{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  color: rgba(0,0,0,.58);
  font-size: 14px;
}

.booking-feature-card__grid{
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}

.booking-kpi{
  border-radius: 14px;
  background: rgba(0,0,0,.03);
  padding: 14px;
}

.booking-kpi__label{
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: rgba(0,0,0,.46);
  margin-bottom: 6px;
}

.booking-kpi strong{
  font-size: 16px;
  color: #1c1c1c;
}

.booking-feature-card__actions{
  margin-top: 20px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.booking-badge{
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.booking-badge--live{
  background: rgba(31,185,107,.12);
  color: #168858;
}

.booking-chip{
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(228,158,0,.12);
  color: var(--yellow);
  font-size: 12px;
  font-weight: 900;
}

.booking-chip--soft{
  background: rgba(0,0,0,.06);
  color: rgba(0,0,0,.62);
}

.booking-feature-card__status{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.mybookings-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 18px;
}

.mybooking-card{
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 12px 40px rgba(0,0,0,.06);
}

.mybooking-card__img img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.mybooking-card__body{
  padding: 16px;
}

.mybooking-card__head{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.mybooking-card__head h3{
  margin: 0;
  font-size: 22px;
  line-height: 1.1;
  font-weight: 900;
  color: var(--yellow);
}

.mybooking-card__meta{
  margin-top: 12px;
  display: grid;
  gap: 8px;
  color: rgba(0,0,0,.62);
  font-size: 14px;
}

.mybooking-card__meta span{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mybooking-card__bottom{
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.mybooking-card__bottom strong{
  font-size: 18px;
  color: #1c1c1c;
}

.mybooking-card--past{
  opacity: .92;
}

@media (max-width: 1100px){
  .booking-feature-card{
    grid-template-columns: 1fr;
  }

  .booking-feature-card__media img{
    height: 280px;
  }

  .mybookings-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px){
  .booking-feature-card__grid{
    grid-template-columns: 1fr 1fr;
  }

  .booking-feature-card__title{
    font-size: 24px;
  }

  .mybooking-card__img img{
    height: 190px;
  }
}

@media (max-width: 520px){
  .booking-feature-card__grid{
    grid-template-columns: 1fr;
  }

  .booking-feature-card__body{
    padding: 16px;
  }

  .mybooking-card__body{
    padding: 14px;
  }
}

.cookie-fab{
  position: fixed;
  left: 18px;
  bottom: 18px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 999px;
  background: #e3a81c;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(0,0,0,.18);
  z-index: 9998;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.cookie-fab:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
}

.cookie-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.cookie-modal.is-open{
  display: block;
}

.cookie-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.16);
}

.cookie-modal__dialog{
  position: absolute;
  left: 24px;
  bottom: 86px;
  width: 372px;
  max-width: calc(100vw - 24px);
  background: #f3f3f3;
  border: 1px solid #d7d7d7;
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
  padding: 24px 28px 22px;
  color: #222;
}

.cookie-modal__close{
  position: absolute;
  top: 14px;
  right: 16px;
  border: none;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  color: #7a7a7a;
  cursor: pointer;
}

.cookie-modal__title{
  margin: 0 0 18px;
  padding-bottom: 14px;
  font-size: 28px;
  font-weight: 500;
  border-bottom: 1px solid #cfcfcf;
}

.cookie-modal__body{
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 22px;
  border-bottom: 1px solid #cfcfcf;
}

.cookie-check{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
}

.cookie-check input{
  margin-top: 2px;
  accent-color: #8ab4f8;
}

.cookie-check--disabled{
  opacity: .7;
  cursor: default;
}

.cookie-modal__footer{
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 16px;
}

.cookie-btn{
  min-width: 92px;
  height: 38px;
  border: 1px solid #bdbdbd;
  background: #fff;
  color: #666;
  font-size: 13px;
  cursor: pointer;
  transition: .18s ease;
}

.cookie-btn--ghost:hover{
  background: #f7f7f7;
}

.cookie-btn--primary{
  border-color: #e3a81c;
  background: #e3a81c;
  color: #fff;
}

.cookie-btn--primary:hover{
  background: #cf9818;
  border-color: #cf9818;
}

@media (max-width: 640px){
  .cookie-fab{
    left: 14px;
    bottom: 14px;
    width: 50px;
    height: 50px;
    font-size: 20px;
  }

  .cookie-modal__dialog{
    left: 14px;
    right: 14px;
    bottom: 76px;
    width: auto;
    max-width: none;
    padding: 20px 18px 18px;
  }

  .cookie-modal__title{
    font-size: 24px;
    padding-right: 28px;
  }
}

.logo-strip{
  position:relative;
  padding:72px 0;
  overflow:hidden;
}

.logo-strip--partners{
  background:linear-gradient(180deg,#fbf8f2 0%, #f6f1e8 100%);
}

.logo-strip--clients{
  background:linear-gradient(180deg,#151515 0%, #0f0f0f 100%);
  color:#fff;
}

.logo-strip__head{
  max-width:900px;
  margin:0 auto 34px;
  text-align:center;
}

.logo-strip__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--yellow);
  margin-bottom:14px;
}

.logo-strip--clients .logo-strip__eyebrow{
  color:#f4c542;
}

.logo-strip__title{
  margin:0;
  font-size:clamp(34px, 5vw, 58px);
  line-height:.98;
  font-weight:900;
  letter-spacing:-.03em;
}

.logo-strip__text{
  max-width:760px;
  margin:18px auto 0;
  font-size:17px;
  line-height:1.75;
  color:rgba(0,0,0,.67);
}

.logo-strip--clients .logo-strip__text{
  color:rgba(255,255,255,.72);
}

.logo-marquee{
  position:relative;
  overflow:hidden;
  width:100%;
  mask-image:linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

.logo-marquee__track{
  display:flex;
  align-items:center;
  gap:18px;
  width:max-content;
  animation:logoMarquee 34s linear infinite;
  padding:8px 0;
}

.logo-marquee--reverse .logo-marquee__track{
  animation-direction:reverse;
  animation-duration:38s;
}

.logo-card{
  flex:0 0 auto;
  width:210px;
  height:104px;
  border-radius:22px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 14px 30px rgba(0,0,0,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px 22px;
  backdrop-filter:blur(8px);
}

.logo-card--client{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:none;
}

.logo-card img{
  max-width:100%;
  max-height:70px;
  object-fit:contain;
  filter:grayscale(1);
  opacity:.8;
  transition:all .2s ease;
}

.logo-card:hover img{
  filter:grayscale(0);
  opacity:1;
  transform:scale(1.03);
}

.logo-card--client img{
  filter:grayscale(1) brightness(1.15);
  opacity:.9;
}

.logo-card--client:hover img{
  filter:grayscale(0) brightness(1);
  opacity:1;
}

@keyframes logoMarquee{
  from{
    transform:translateX(0);
  }
  to{
    transform:translateX(-50%);
  }
}

@media (max-width: 900px){
  .logo-strip{
    padding:56px 0;
  }

  .logo-card{
    width:170px;
    height:88px;
    border-radius:18px;
    padding:14px 18px;
  }

  .logo-card img{
    max-height:100%;
  }

  .logo-marquee__track{
    gap:12px;
    animation-duration:26s;
  }
}

.logo-card img{
  max-width:100%;
  max-height:70px;
  object-fit:contain;
  transition:transform .2s ease, opacity .2s ease, filter .2s ease;
}

/* Standard */
.logo-strip--partners .logo-card img{
  filter: brightness(0) saturate(100%);
  opacity:.88;
}

.logo-strip--clients .logo-card img{
  filter: brightness(0) invert(1);
  opacity:.9;
}

/* Hover */
.logo-strip--partners .logo-card:hover img{
  filter: brightness(0) saturate(100%);
  opacity:1;
  transform:scale(1.03);
}

.logo-strip--clients .logo-card:hover img{
  filter: brightness(0) invert(1);
  opacity:1;
  transform:scale(1.03);
}

/* DEFAULT (Slider) bleibt wie gehabt */

/* STATIC MODE (wenig Logos) */
.logo-marquee.is-static{
  mask-image:none;
  -webkit-mask-image:none;
}

.logo-marquee.is-static .logo-marquee__track{
  animation:none;
  width:100%;
  justify-content:center;
}

/* Optional: schöner Abstand */
.logo-marquee.is-static .logo-card{
  margin:0 8px;
}

.dash-card{
  padding:22px;
  border-radius:22px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 14px 36px rgba(0,0,0,.05);
}

.dash-card__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  margin-bottom:18px;
}

.dash-card__title{
  margin:0;
  font-size:24px;
  font-weight:900;
}

.dash-card__sub{
  margin:6px 0 0;
  color:rgba(0,0,0,.62);
}

.dash-empty{
  color:rgba(0,0,0,.58);
  padding:8px 0;
}

.issue-list-mini{
  display:grid;
  gap:12px;
}

.issue-mini{
  display:block;
  padding:16px;
  border-radius:18px;
  background:rgba(0,0,0,.025);
  border:1px solid rgba(0,0,0,.06);
  text-decoration:none;
  color:inherit;
  transition:.18s ease;
}

.issue-mini:hover{
  transform:translateY(-2px);
  background:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}

.issue-mini__top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

.issue-mini__number{
  font-size:12px;
  font-weight:800;
  color:rgba(0,0,0,.5);
  letter-spacing:.06em;
  text-transform:uppercase;
}

.issue-mini__title{
  display:block;
  font-size:16px;
  font-weight:800;
  margin-bottom:8px;
}

.issue-mini__meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  color:rgba(0,0,0,.58);
  font-size:13px;
  font-weight:700;
}

.issue-prio{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.issue-prio--low{ background:#eef7ee; color:#2f7d32; }
.issue-prio--medium{ background:#fff7e8; color:#9a6b00; }
.issue-prio--high{ background:#fff0e8; color:#c65a00; }
.issue-prio--critical{ background:#fdecec; color:#c62828; }

.issue-status{
  display:inline-flex;
  align-items:center;
  padding:6px 12px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}

/* OPEN = grau */
.issue-status--open{
  background:#f1f1f1;
  color:#555;
}

/* IN PROGRESS = blau */
.issue-status--in_progress{
  background:#e8f1ff;
  color:#1d5eff;
}

/* DONE = grün */
.issue-status--done{
  background:#e9f7ee;
  color:#1f8f4d;
}

/* optional */
.issue-status--waiting{
  background:#fff6e5;
  color:#b77900;
}

.issue-status--closed{
  background:#ececec;
  color:#888;
}

.issue-status::before{
  content:'';
  width:6px;
  height:6px;
  border-radius:50%;
  margin-right:6px;
  background:currentColor;
}

.account-avatar{
  width:34px;
  height:34px;
  border-radius:999px;
  object-fit:cover;
  border:2px solid rgba(0,0,0,.08);
}

.icon-btn.account__btn{
  display:flex;
  align-items:center;
  justify-content:center;
}

.account-avatar{
  transition:.2s ease;
}

.account__btn:hover .account-avatar{
  transform:scale(1.05);
}