:root{
  --bg:#0f0c0a;
  --panel:#14100d;
  --text:#f3f0ec;
  --muted:rgba(243,240,236,.7);
  --line:rgba(242,140,27,.35);
  --accent:#f28c1b;
  --accent-2:#d87412;
  --shadow:0 14px 40px rgba(0,0,0,.45);
  --radius:14px;
  --max:1180px;
  --topbar-h:76px;
}

*{box-sizing:border-box}
html,body{height:100%;overflow-x:hidden}
body{
  margin:0;
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
}

a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- Topbar ---------- */
.topbar{
  position:fixed;
  top:0;left:0;right:0;
  height:var(--topbar-h);
  z-index:50;
  overflow:visible;
  /* dunkler Balken + feine gold/orange Verzierung wie Mockup */
  background:
    linear-gradient(to bottom, rgba(26,18,13,.96), rgba(20,14,10,.72)),
    repeating-linear-gradient(90deg, rgba(242,140,27,.045) 0 1px, rgba(0,0,0,0) 1px 18px);
  border-top:1px solid rgba(242,140,27,.65);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.topbar::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:2px;
  background:linear-gradient(90deg, rgba(242,140,27,0), rgba(242,140,27,.95), rgba(242,140,27,0));
  opacity:.75;
}
.topbar::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  background:linear-gradient(90deg, rgba(242,140,27,0), rgba(242,140,27,.75), rgba(242,140,27,0));
  opacity:.55;
}
.topbar__inner{
  height:100%;
  max-width:var(--max);
  margin:0 auto;
  padding:0 18px;
  display:flex;
  position:relative;
  align-items:center;
  gap:18px;
}

/* Center logo badge */
.topbar__centerlogo{
  position:absolute;
  left:50%;
  top:-70px;
  transform:translateX(-50%);
  width:400px;height:400px;
  display:grid;
  place-items:center;
  text-decoration:none;
  z-index:60;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.65));
  transition: transform .35s ease, opacity .35s ease, filter .35s ease;
}
.topbar__centerlogo img{
  width:100%;
  height:100%;
  display:block;
  opacity:1;
  object-fit:contain;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.70));
}


/* Logo goes into the background when scrolling (keeps bar layout) */
body.is-scrolled .topbar__centerlogo,
body.is-scrolled .topbar__logo{
  opacity:.10;
  pointer-events:none;                 /* never block clicks on content */
  z-index:0 !important;               /* push behind other UI layers */
  transform:translate(-50%, -170%) scale(.55) !important; /* lift it out of the content */
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.35));
}
@media (max-width: 760px){
  body.is-scrolled .topbar__centerlogo,
  body.is-scrolled .topbar__logo{
    transform:translate(-50%, -140%) scale(.55) !important;
    opacity:.08;
  }
}
body.is-scrolled .topbar__centerlogo img,
body.is-scrolled .topbar__logo img{
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.45));
}
.topbar__ring{
  position:absolute;
  inset:-22px;
  border:14px solid var(--accent);
  border-radius:999px;
  background:rgba(0,0,0,.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

@media (max-width: 780px){
  .topbar__centerlogo{width:190px;height:190px;top:-18px}
  .topbar__centerlogo img{width:164px}
  .topbar__ring{inset:-14px;border-width:10px}
}

.brandmark{
  width:44px;height:44px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  display:grid;
  place-items:center;
  color:rgba(255,255,255,.8);
  background:rgba(0,0,0,.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.brandmark__home{font-size:18px;line-height:1}

.nav{
  display:flex;
  align-items:center;
  gap:22px;
  padding-left:10px;
}
.nav__link{
  color:rgba(255,255,255,.78);
  font-size:14px;
  letter-spacing:.2px;
  position:relative;
  padding:8px 2px;
}
.nav__link::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  background:transparent;
}
.nav__link.is-active{color:rgba(255,255,255,.92)}
.nav__link.is-active::after{background:rgba(242,140,27,.65)}

.topbar__right{margin-left:auto;display:flex;align-items:center;gap:12px}
.phone{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.82)}
.phone__icon{opacity:.85}
.phone__number{font-weight:500;font-size:14px}

.iconbtn{
  width:40px;height:40px;
  border-radius:12px;
  border:1px solid rgba(242,140,27,.35);
  background:rgba(0,0,0,.18);
  color:rgba(255,255,255,.9);
  display:grid;
  place-items:center;
  cursor:pointer;
}
.iconbtn:hover{border-color:rgba(242,140,27,.7)}

.btn{
  height:40px;
  padding:0 16px;
  border-radius:10px;
  border:1px solid rgba(242,140,27,.35);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-weight:600;
  font-size:14px;
  letter-spacing:.2px;
  cursor:pointer;
  user-select:none;
  text-decoration:none;
}
.btn:hover{text-decoration:none}
.btn--accent{
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  border-color:rgba(0,0,0,.25);
  color:#1b0f06;
}
.btn--accent:hover{filter:brightness(1.02)}
.btn--ghost{
  background:rgba(0,0,0,.12);
  color:rgba(255,255,255,.9);
}
.btn--ghost:hover{border-color:rgba(242,140,27,.65)}
.btn--wide{height:46px;padding:0 22px;border-radius:12px}

.burger{display:none;background:transparent;border:none;cursor:pointer;padding:6px}
.burger span{display:block;width:22px;height:2px;background:rgba(255,255,255,.85);margin:5px 0;border-radius:2px}

.mobile{
  display:none;
  background:rgba(18,12,9,.98);
  border-top:1px solid rgba(255,255,255,.06);
  padding:14px 18px 18px;
}
.mobile.is-open{display:block}

/* Keep interactive elements above the decorative center logo */
.topbar__right,
.nav,
.brandmark{
  position:relative;
  z-index:90;
}

/* --- Mobile layout fixes (menu + logo overlap) --- */
@media (max-width: 760px){
  /* Phone topbar: focus on "Bestellen" and keep the bar clean */
  .topbar__right .iconbtn{display:none}     /* remove search from topbar on mobile */
  .topbar__right .btn--accent{display:none} /* move "Reservieren" into the burger menu */
  .topbar__right .btn--ghost{
    display:inline-flex;
    height:38px;
    padding:0 14px;
    border-radius:10px;
    font-size:13px;
    white-space:nowrap;
    /* make "Bestellen" look like the primary action */
    background:linear-gradient(180deg,var(--accent),var(--accent-2));
    border-color:rgba(0,0,0,.25);
    color:#1b0f06;
  }
  .topbar__right .burger{display:block}

  /* Place the big logo below the bar so it never covers search/reserve */
  .topbar__logo{
    top: calc(100% + 10px);
    transform: translate(-50%, 0);
    z-index: 10;
    pointer-events: none; /* prevents blocking taps */
  }
  .topbar__logo img{height: 124px}

  /* Make the bar a bit more compact */
  :root{ --topbar-h: 76px; }
  .topbar, .navbar{min-height: var(--topbar-h)}
  .topbar__inner{padding: 12px 14px}

  /* Mobile menu should drop down under the bar */
  .mobile{
    position:absolute;
    left:0;
    right:0;
    top:100%;
    border-top:1px solid rgba(255,255,255,.08);
    padding:14px 16px 18px;
    z-index: 120;
  }

  /* Push page content down so the large logo (now below the bar) doesn't overlap the hero */
  .hero{padding-top: calc(var(--topbar-h) + 160px);}
  .page{padding-top: calc(var(--topbar-h) + 160px);}
}

/* Mobile: hero CTAs stacked, "Bestellen" stays the primary button */
@media (max-width: 760px){
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__actions .btn{width:100%}
}

@media (max-width: 420px){
  .topbar__logo img{height: 110px}
}
.mobile__link{display:block;padding:12px 2px;color:rgba(255,255,255,.85)}
.mobile__link.is-active{color:var(--accent)}
.mobile__actions{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}

/* ---------- Hero ---------- */
.hero{
  min-height:100vh;
  min-height:100svh;
  padding-top:calc(var(--topbar-h) + 20px);
  background:
    radial-gradient(1100px 520px at 12% 25%, rgba(242,140,27,.16), transparent 55%),
    radial-gradient(900px 450px at 80% 20%, rgba(255,255,255,.08), transparent 60%),
    var(--bg);
  position:relative;
  overflow:hidden;
}

/* Background image layer (allows smooth zoom-in on load) */
.hero__bg{
  position:absolute;
  inset:0;
  background-image:var(--hero-img);
  background-size:cover;
  background-position:center bottom;
  filter:saturate(1.05) contrast(1.05);
  transform:scale(1.08);
  z-index:0;
  animation: heroZoom 1200ms ease-out forwards;
}

@keyframes heroZoom{
  from{transform:scale(1.08)}
  to{transform:scale(1.02)}
}

/* Subtle Gepetto brand ring (signature) */
.hero__brandring{
  position:absolute;
  width:min(760px, 88vw);
  height:min(760px, 88vw);
  right:-220px;
  top:calc(var(--topbar-h) + 40px);
  border-radius:999px;
  border:18px solid rgba(242,140,27,.20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  filter: blur(0.2px);
  opacity:.55;
  z-index:1;
  pointer-events:none;
}
.hero__overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(10,7,6,.92) 0%, rgba(10,7,6,.65) 48%, rgba(10,7,6,.30) 100%),
    radial-gradient(900px 600px at 20% 30%, rgba(0,0,0,.45), transparent 60%),
    radial-gradient(1200px 700px at 70% 40%, rgba(0,0,0,.25), transparent 62%);
  z-index:2;
}

/* Soft blur/dim transition behind left text (no visible box) */
.hero__fog{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
}
.hero__fog::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:min(62%, 860px);
  /* marble-like tint from the stone board + smooth fade-out */
  background:linear-gradient(90deg,
    rgba(22,18,16,.78) 0%,
    rgba(22,18,16,.52) 36%,
    rgba(22,18,16,.20) 60%,
    rgba(22,18,16,0) 82%
  );
-webkit-backdrop-filter: blur(12px);
  /* extra softening so there is never a hard edge */
  mask-image: linear-gradient(90deg, #000 0%, #000 68%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 68%, transparent 100%);
}
.hero__inner{
  position:relative;
  z-index:4;
  max-width:var(--max);
  margin:0 auto;
  padding:22px 18px 26px;
  display:grid;
  grid-template-columns: 1fr 420px;
  gap:26px;
}

.hero__logo{display:none;}
.hero__logo img{width:min(260px, 66vw);height:auto;filter:drop-shadow(0 14px 26px rgba(0,0,0,.55))}

.hero__content{
  max-width:640px;
  padding:18px 0 14px;
  position:relative;
}
.hero__headline{
  font-family:"Great Vibes", cursive;
  font-weight:400;
  font-size:clamp(44px, 5vw, 74px);
  line-height:1.02;
  margin:0;
  text-shadow:0 18px 36px rgba(0,0,0,.55);
}
.hero__headline span{display:block}

.hero__divider{
  width:460px;
  max-width:85%;
  height:2px;
  margin:18px 0 16px;
  background:linear-gradient(90deg, rgba(242,140,27,.0), rgba(242,140,27,.75), rgba(242,140,27,.0));
  opacity:.9;
}

.hero__text{
  margin:0 0 18px;
  color:rgba(255,255,255,.74);
  font-size:14px;
  line-height:1.7;
  max-width:520px;
}

.hero__bullets{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:10px}
.hero__bullets li{display:flex;gap:10px;align-items:flex-start;color:rgba(255,255,255,.82)}
.tick{color:var(--accent);font-weight:700}

.hero__actions{display:flex;gap:12px;flex-wrap:wrap;margin:6px 0 18px}

.hero__contact{display:flex;gap:20px;flex-wrap:wrap;color:rgba(255,255,255,.70);font-size:14px}
.hero__contactItem{display:flex;gap:10px;align-items:center}
.hero__contactItem a{text-decoration:none}
.hero__contactItem a:hover{text-decoration:underline}
.muted{opacity:.85}

.hero__map{display:flex;align-items:flex-end;justify-content:flex-end}
.mapcard{
  width:100%;
  max-width:420px;
  height:220px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
  background:rgba(0,0,0,.20);
  box-shadow:var(--shadow);
}
.mapcard iframe{width:100%;height:100%;border:0;filter:contrast(1.02) saturate(1.05)}

/* ---------- Pages ---------- */
.page{
  min-height:100vh;
  padding-top:calc(var(--topbar-h) + 22px);
  padding-bottom:44px;
  background:
    radial-gradient(900px 420px at 10% 10%, rgba(242,140,27,.14), transparent 55%),
    radial-gradient(900px 520px at 80% 10%, rgba(255,255,255,.06), transparent 65%),
    var(--bg);
}

/* ---------- Generic section (below hero) ---------- */
.section{
  padding:46px 0 80px;
  background:
    radial-gradient(900px 420px at 10% 10%, rgba(242,140,27,.12), transparent 55%),
    radial-gradient(900px 520px at 80% 10%, rgba(255,255,255,.05), transparent 65%),
    var(--bg);
}

.h1--small{ font-size:48px; }

/* ---------- Instagram embeds ---------- */

.insta-card{
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 980px){
  .insta-card{ max-width: 100%; }
}

@media (min-width: 1100px){
  .insta-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


.insta-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}
.insta-grid .instagram-media{
  margin:0 auto !important;
  max-width:100% !important;
  width:100% !important;
  min-width:0 !important;
}

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

.insta-fallback{
  margin-top:12px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.22);
  color:rgba(255,255,255,.78);
  font-size:13px;
}

.container{max-width:var(--max);margin:0 auto;padding:0 18px}
.card{
  background:linear-gradient(180deg, rgba(20,14,10,.72), rgba(12,8,6,.72));
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:20px;
  box-shadow:var(--shadow);
}
.h1{font-family:"Great Vibes", cursive;font-weight:400;font-size:56px;margin:0 0 12px}
.p{color:rgba(255,255,255,.75);line-height:1.75;margin:0 0 16px;font-size:14px}

.grid2{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}

/* Menu */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 14px;padding:12px 12px;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.10)}
.filters__spacer{flex:1 1 auto;min-width:12px}

.menu__sectionhead{
  grid-column: 1 / -1;
  margin: 22px 0 10px;              /* clearer separation */
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(242,140,27,.22);
  background:
    linear-gradient(180deg, rgba(242,140,27,.08), rgba(0,0,0,.10));
  position: relative;
  overflow: hidden;
}
.menu__sectionhead::before{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  top:10px;
  height:1px;
  background: linear-gradient(90deg, rgba(242,140,27,0), rgba(242,140,27,.55), rgba(242,140,27,0));
  opacity:.9;
}
.menu__sectiontitle{
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(255,255,255,.88);
  margin-top: 6px;
}

.tag{
  display:inline-block;
  margin-top:8px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.82);
  background:rgba(0,0,0,.10);
}
.tag--veg{
  border-color: rgba(96, 220, 140, .35);
  background: rgba(96, 220, 140, .10);
  color: rgba(160, 255, 200, .95);
}

.hint{
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255,255,255,.60);
}
.chip{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(242,140,27,.35);
  background:rgba(0,0,0,.12);
  color:rgba(255,255,255,.88);
  font-size:13px;
  cursor:pointer;
}
.chip.is-active{background:rgba(242,140,27,.18);border-color:rgba(242,140,27,.7);color:var(--accent)}

.menu{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}
.item{
  padding:14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
}
.item__top{display:flex;gap:12px;align-items:flex-start}
.item__name{font-weight:600}
.item__desc{color:rgba(255,255,255,.68);font-size:13px;line-height:1.5;margin-top:4px}
.item__price{margin-left:auto;color:var(--accent);font-weight:700}

/* Forms */
.form{display:grid;gap:12px;margin-top:10px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
label{font-size:13px;color:rgba(255,255,255,.80)}
input,select,textarea{
  width:100%;
  margin-top:6px;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.22);
  color:rgba(255,255,255,.92);
  outline:none;
}
input:focus,select:focus,textarea:focus{border-color:rgba(242,140,27,.70);box-shadow:0 0 0 3px rgba(242,140,27,.16)}
textarea{min-height:110px;resize:vertical}

.note{font-size:13px;color:rgba(255,255,255,.70)}
.success{
  display:none;
  margin-top:12px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(242,140,27,.45);
  background:rgba(242,140,27,.10);
  color:rgba(255,255,255,.88);
}
.success.is-visible{display:block}

/* Reservation extras */
.reserve-info{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0 10px}
.reserve-info__box{border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.16);border-radius:14px;padding:12px 12px}
.reserve-info__title{font-weight:600;font-size:13px;color:rgba(255,255,255,.92)}
.reserve-info__text{margin-top:6px;font-size:13px;line-height:1.55;color:rgba(255,255,255,.72)}

.help{margin-top:6px;font-size:12px;color:rgba(255,255,255,.58)}
.form-errors{display:none;margin-top:12px;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,120,120,.35);background:rgba(255,120,120,.10);color:rgba(255,255,255,.88)}
.form-errors.is-visible{display:block}

.seg{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.seg__item{display:flex;gap:8px;align-items:center;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.18);cursor:pointer;user-select:none}
.seg__item input{margin:0;width:auto}

.consent{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.14)}
.consent input{margin-top:3px;width:auto}
.consent span{font-size:13px;line-height:1.5;color:rgba(255,255,255,.78)}

.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Modal */
.modal{position:fixed;inset:0;display:none;z-index:2000}
.modal.is-open{display:block}
.modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.62)}
.modal__panel{
  position:absolute;
  top:calc(var(--topbar-h) + 20px);
  left:50%;
  transform:translateX(-50%);
  width:min(680px, calc(100% - 24px));
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(20,14,10,.95), rgba(10,7,6,.92));
  box-shadow:var(--shadow);
  padding:16px;
}
.modal__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.modal__title{font-weight:600}
.search{display:flex;gap:10px}
.search__input{flex:1;margin:0}
.modal__hint{margin-top:10px;color:rgba(255,255,255,.70);font-size:13px}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .nav{display:none}
  .burger{display:block}
  .phone{display:none}
  .hero__inner{grid-template-columns:1fr;}
  .hero__map{justify-content:flex-start}
  .mapcard{max-width:520px}
  .grid2{grid-template-columns:1fr}
  .menu{grid-template-columns:1fr}
}

@media (max-width: 520px){
  .topbar__inner{gap:10px}
  .btn{padding:0 12px}
  .btn--ghost{display:none}
  .hero__divider{margin:14px 0}
  .row{grid-template-columns:1fr}
  .reserve-info{grid-template-columns:1fr}

  /* Center logo scales down on very small screens */
  .topbar__centerlogo{width:150px;height:150px;top:-30px}
  .topbar__centerlogo img{width:100%;height:100%}
  .topbar__ring{border-width:6px}
}


/* Map under address (inline) */
.hero__mapInline{
  margin-top:12px;
  width: min(520px, 100%);
}
.hero__mapInline .mapcard{
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(242,140,27,.22);
  box-shadow:0 18px 44px rgba(0,0,0,.35);
}
.hero__mapInline iframe{
  width:100%;
  height:220px;
  border:0;
  display:block;
}

/* --- Rev7: smaller clickable button, logo unchanged --- */
.nav-logo .logo-btn {
  width: 80px;
  height: 80px;
}

.nav-logo img {
  width: 110px;
  height: 110px;
}

/* --- Rev8: logo only, no button, no ring --- */
.nav-logo .logo-btn {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
}

.nav-logo .logo-ring {
  display: none !important;
}

.nav-logo img {
  display: block;
  width: 110px;
  height: 110px;
  opacity: 1;
  cursor: pointer;
}

/* --- Rev9: HARD REMOVE logo ring & button --- */
.logo-ring,
.logo-border,
.logo-circle,
.nav-logo::before,
.nav-logo::after {
  display: none !important;
  content: none !important;
}

.nav-logo a,
.nav-logo button {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.nav-logo img {
  width: 110px;
  height: 110px;
  opacity: 1 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
}

/* --- Rev10: logo resized & positioned cleanly --- */
.nav-logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-logo img {
  width: 78px;
  height: auto;
  max-height: 78px;
  object-fit: contain;
  margin: 6px 12px;
}

.topbar,
.navbar {
  min-height: 88px;
  overflow: visible;
}

/* ensure nav items are not overlapped */
.nav-items {
  padding-top: 0;
}

/* --- Rev11: remove logo & logo button entirely --- */
.nav-logo,
.logo,
.logo-btn,
.logo-ring,
.logo-circle {
  display: none !important;
}

/* --- Rev14 centered logo --- */
.topbar { position: sticky; top: 0; z-index: 999; }
.topbar__inner { position: relative; }

.topbar__logo{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  z-index: 60;
  transition: transform .35s ease, opacity .35s ease, filter .35s ease;
}


.topbar__logo img{
  height: 56px;
  width: auto;
  display: block;
}

/* On small screens, make it a bit smaller to not overlap nav */
@media (max-width: 760px){
  .topbar__logo img{ height: 44px; }
}

/* --- Rev15: full logo image in topbar --- */
.topbar__logo img{
  height: 72px;
  width: auto;
  object-fit: contain;
}

@media (max-width: 760px){
  .topbar__logo img{ height: 56px; }
}

/* --- Rev16: much larger centered logo --- */
.topbar__logo img{
  height: 110px;   /* deutlich größer */
  width: auto;
  object-fit: contain;
}

@media (max-width: 760px){
  .topbar__logo img{
    height: 78px;
  }
}

/* --- Rev17: logo much bigger and pushed down --- */
.topbar__logo {
  top: 75%;              /* deutlich weiter nach unten */
  transform: translate(-50%, -50%);
}

.topbar__logo img{
  height: 220px;         /* doppelt so groß wie vorher */
  width: auto;
  object-fit: contain;
}

/* Mobile Anpassung */
@media (max-width: 760px){
  .topbar__logo {
    top: 70%;
  }
  .topbar__logo img{
    height: 140px;
  }
}

/* --- Rev18: push logo much further down (head fully visible) --- */
.topbar__logo {
  top: 92%;              /* deutlich weiter nach unten */
  transform: translate(-50%, -50%);
}

@media (max-width: 760px){
  .topbar__logo {
    top: 88%;
  }
}

/* --- Rev19: desktop logo at 87% --- */
.topbar__logo { top: 87%; }

/* --- Rev20: move logo much further down --- */
.topbar__logo {
  top: 97%;
}

/* --- Rev21: move logo even further down (3x first step) --- */
.topbar__logo {
  top: 102%;
}

/* --- Rev22: move logo much further down (4x first step) --- */
.topbar__logo {
  top: 122%;
}

/* --- Rev23: extreme positioning & +20% size --- */
.topbar__logo {
  top: 150%; /* nochmals doppelt so weit runter */
}

.topbar__logo img{
  height: 264px; /* 220px + 20% */
}

@media (max-width: 760px){
  .topbar__logo {
    top: 135%;
  }
  .topbar__logo img{
    height: 168px;
    max-width: 72vw;
  }
}


.main{position:relative; z-index:1;}


/* ================================
   Page cut transition (Scissors)
   - v4: seam, scissors, opening are 1:1 aligned (same rotator)
   - v4: next page becomes visible WHILE cutting (iframe preload)
   ================================ */

#cut-transition{
  --cut-angle: 35deg;   /* diagonal direction */
  --cut-dur: 6.00s;     /* slower overall: more readable */
  /* First: draw the cut line. Then: open/reveal along that same seam. */
  --reveal-delay: 52%;

  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  background: transparent;
}

#cut-transition.is-active{ opacity: 1; }

/* Next page behind the cut (revealed while opening) */
#cut-transition .cut-next{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  opacity: 0;
  background: #0f0c0a;
  transform: scale(1.01);
  z-index: 0;
}

/* Rotator: everything that defines the seam lives here */
#cut-transition .cut-rot{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 240vmax;      /* extra large so no corners peek through */
  height: 240vmax;
  transform: translate(-50%, -50%) rotate(var(--cut-angle)) translateZ(0);
  transform-origin: center;
  overflow: visible;
  will-change: transform;
  z-index: 1;
}

/* Two dark panels that open away from the seam */
#cut-transition .cut-panel{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background: rgba(0,0,0,0.88);
will-change: transform;
  z-index: 2;
}

#cut-transition .cut-panel.left{ left: 0; transform: translateX(0); }
#cut-transition .cut-panel.right{ right: 0; transform: translateX(0); }

/* Seam line (vertical in rotator space => diagonal on screen) */
#cut-transition .cut-line{
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 5px;
  transform: translateX(-50%) scaleY(0);
  transform-origin: center top;
  opacity: 0;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0),
    rgba(255,255,255,0.90),
    rgba(255,255,255,0)
  );
  filter: drop-shadow(0 0 12px rgba(255,170,70,0.55));
  will-change: transform, opacity;
  z-index: 3;
}

/* Scissors ride exactly on the seam
   IMPORTANT: do NOT use % for Y here, because the rotator is huge (vmax-based).
   We anchor to the seam center and animate with viewport units so it always stays visible.
*/
#cut-transition .cut-scissors{
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(360px, 46vw);
  height: auto;

  /* Mirror + rotate so the opening reads correctly, and move along seam in viewport units */
  transform: translate3d(-50%, -50%, 0) translateY(-110vh) rotate(270deg) scaleX(-1);
  opacity: 0;

  /* Lighter shadow = fewer repaints */
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.45));
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  z-index: 4;
}

/* Play */
#cut-transition.play .cut-panel.left{
  animation: cutLeftOut var(--cut-dur) cubic-bezier(.2,.9,.2,1) forwards;
}
#cut-transition.play .cut-panel.right{
  animation: cutRightOut var(--cut-dur) cubic-bezier(.2,.9,.2,1) forwards;
}
#cut-transition.play .cut-line{
  animation: cutLineGrow var(--cut-dur) ease-in forwards;
}
#cut-transition.play .cut-scissors{
  animation: scissorsAlongSeam var(--cut-dur) linear forwards;
}
#cut-transition.play .cut-next{
  /* slow, steady reveal (matches the "cut comes from the scissors" illusion) */
  animation: nextFadeIn var(--cut-dur) cubic-bezier(.16,.85,.16,1) forwards;
}

/* Animations */
@keyframes cutLeftOut{
  0%   { transform: translateX(0); }
  52%  { transform: translateX(0); }       /* wait until the cut is fully drawn */
  100% { transform: translateX(-112%); }   /* slow curtain-like opening */
}
@keyframes cutRightOut{
  0%   { transform: translateX(0); }
  52%  { transform: translateX(0); }
  100% { transform: translateX(112%); }
}
@keyframes cutLineGrow{
  0%   { opacity: 0; transform: translateX(-50%) scaleY(0); }
  6%   { opacity: 1; }
  /* Line finishes BEFORE the reveal starts */
  52%  { opacity: 1; transform: translateX(-50%) scaleY(1); }
  62%  { opacity: 0; transform: translateX(-50%) scaleY(1); }
  100% { opacity: 0; transform: translateX(-50%) scaleY(1); }
}
@keyframes scissorsAlongSeam{
  0%   { opacity: 0; transform: translate3d(-50%, -50%, 0) translateY(-110vh) rotate(270deg) scaleX(-1); }
  4%   { opacity: 1; }
  52%  { opacity: 1; transform: translate3d(-50%, -50%, 0) translateY(110vh) rotate(270deg) scaleX(-1); }
  54%  { opacity: 0; transform: translate3d(-50%, -50%, 0) translateY(125vh) rotate(270deg) scaleX(-1); }
  100% { opacity: 0; transform: translate3d(-50%, -50%, 0) translateY(125vh) rotate(270deg) scaleX(-1); }
}

@keyframes nextFadeIn{
  0%   { opacity: 0; }
  52%  { opacity: 0; }
  78%  { opacity: .82; }  /* let the "curtains" do the revealing */
  100% { opacity: 1; }
}

@media (max-width: 760px){
  #cut-transition .cut-scissors{
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(360px, 46vw);
  height: auto;

  /* Mirror + rotate so the opening reads correctly, and move along seam in viewport units */
  transform: translate3d(-50%, -50%, 0) translateY(-110vh) rotate(270deg) scaleX(-1);
  opacity: 0;

  /* Lighter shadow = fewer repaints */
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.45));
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  z-index: 4;
}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  #cut-transition{ display: none !important; }
}

/* =====================================================
   FINAL OVERRIDE: Logo dim / reveal on scroll direction
   - scroll DOWN: logo fades away (never blocks UI)
   - scroll UP:   logo fades back in (no need to reach the very top)
   ===================================================== */

/* smooth reveal */
.topbar__logo,
.topbar__centerlogo{
  transition: opacity .55s ease, transform .55s ease, filter .55s ease;
  transform: none;
}

html.logo-dim .topbar__logo,
body.logo-dim .topbar__logo,
html.logo-dim .topbar__centerlogo,
body.logo-dim .topbar__centerlogo{
  opacity: .08 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  transform: translateY(-12px) scale(.98) !important;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.35)) !important;
}

@media (max-width: 760px){
  html.logo-dim .topbar__logo,
  body.logo-dim .topbar__logo,
  html.logo-dim .topbar__centerlogo,
  body.logo-dim .topbar__centerlogo{
    opacity: .06 !important;
    transform: translateY(-10px) scale(.98) !important;
  }
}

#page-transition .pt-panel{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 52vw;
  background: rgba(10,10,10,0.98);
}

#page-transition .pt-left{
  left: 0;
  transform: translateX(-110%);
  clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
}

#page-transition .pt-right{
  right: 0;
  transform: translateX(110%);
  clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%);
}

#page-transition .pt-cutline{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%) scaleY(0);
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,200,120,0.55), rgba(255,255,255,0));
  filter: blur(0.2px);
  opacity: 0.9;
}

#page-transition .pt-scissors{
  position: absolute;
  left: -120px;
  top: 52%;
  transform: translateY(-50%) rotate(-8deg);
  width: 220px;
  height: auto;
  opacity: 0;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.55));
}

@media (max-width: 760px){
  #page-transition .pt-scissors{ width: 170px; }
}

#page-transition.is-active .pt-left{
  animation: ptSlideInLeft 0.62s ease-in forwards;
}
#page-transition.is-active .pt-right{
  animation: ptSlideInRight 0.62s ease-in forwards;
}
#page-transition.is-active .pt-cutline{
  animation: ptCutLine 0.62s ease-in forwards;
}
#page-transition.is-active .pt-scissors{
  animation: ptScissors 0.72s cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes ptSlideInLeft{
  to{ transform: translateX(0); }
}

@keyframes ptSlideInRight{
  to{ transform: translateX(0); }
}

@keyframes ptCutLine{
  0%{ transform: translateX(-50%) scaleY(0); }
  60%{ transform: translateX(-50%) scaleY(1); }
  100%{ transform: translateX(-50%) scaleY(1); }
}

@keyframes ptScissors{
  0%{ left: -120px; opacity: 0; transform: translateY(-50%) rotate(-10deg) scale(0.98); }
  15%{ opacity: 1; }
  60%{ left: calc(50% - 110px); opacity: 1; transform: translateY(-50%) rotate(2deg) scale(1); }
  100%{ left: calc(100% + 40px); opacity: 0; transform: translateY(-50%) rotate(6deg) scale(1.02); }
}

@media (prefers-reduced-motion: reduce){
  #page-transition{ display: none !important; }
}


/* =====================================================
   FINAL OVERRIDE: Topbar logo placement
   - centered inside the topbar
   - protrudes downward
   - stays clickable
   ===================================================== */

/* keep the bar fixed on top (some older rev blocks set sticky) */
.topbar{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 999 !important;
}

.topbar__inner{ position: relative !important; }

/* Logo anchored to the bar (not the page) */
.topbar__logo{
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;                 /* middle of the bar */
  transform: translate(-50%, -22%) !important; /* shift up a bit so it hangs DOWN */
  z-index: 60 !important;
  pointer-events: auto !important;
}

/* Logo size (big, but not "middle of page" big) */
.topbar__logo img{
  height: 190px !important;
  width: auto !important;
  display: block !important;
  object-fit: contain !important;
}

/* push page content down so the protruding logo never overlaps the hero */
.hero,
.page{
  padding-top: calc(var(--topbar-h) + 150px) !important;
}

@media (max-width: 760px){
  .topbar__logo img{ height: 140px !important; }
}

/* =====================================================
   FINAL OVERRIDE: Topbar logo placement
   - centered inside the topbar
   - protrudes downward
   - stays clickable
   ===================================================== */

/* keep the bar fixed on top (some older rev blocks set sticky) */
.topbar{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 999 !important;
}

.topbar__inner{
  position: relative !important;
}

/* logo centered in the bar, slightly lifted so it hangs down */
.topbar__logo{
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -25%) !important; /* more space below */
  z-index: 60 !important;
  pointer-events: auto !important;
}

/* size: big enough to stand out, without dropping into page center */
.topbar__logo img{
  height: 190px !important;
  width: auto !important;
  display: block !important;
  object-fit: contain !important;
}

@media (max-width: 760px){
  .topbar__logo{
    transform: translate(-50%, -20%) !important;
  }
  .topbar__logo img{
    height: 140px !important;
  }

  .hero,
  .page{
    padding-top: calc(var(--topbar-h) + 125px) !important;
  }
}

@media (max-width: 420px){
  .topbar__logo img{ height: 125px !important; }
}

/* =====================================================
   FINAL OVERRIDE (no swing + mobile safe)
   ===================================================== */

:root{
  --logo-overhang: 62px; /* how much the logo hangs into the hero (desktop) */
  --logo-size: 165px;
  --logo-y: -28%;
  --logo-shift: 0px;
  --logo-scale: 1;
}

@media (max-width: 760px){
  :root{
    /* Mobile: keep the logo visible, but never let it cover hero buttons */
    --logo-overhang: 102px;
    --logo-size: 112px;
    --logo-y: -32%;
  }
}

/* Anchor the logo to the TOPBAR center and let it hang down */
.topbar{ position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 999 !important; overflow: visible !important; }
.topbar__inner{ position: relative; overflow: visible; }

.topbar__logo{
  position: absolute !important;
  left: 50% !important;
  top: 100% !important; /* bottom edge of the topbar */
  transform: translate(-50%, var(--logo-y)) translateY(var(--logo-shift)) scale(var(--logo-scale)) !important;
  transform-origin: center top;
  z-index: 60 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  transition: opacity .55s ease, transform .55s ease, filter .55s ease;
}

.topbar__logo img{
  height: var(--logo-size) !important;
  width: auto !important;
  max-width: min(72vw, 320px);
  display: block;
  object-fit: contain;
}

/* Scroll down -> dim/hide, but DO NOT change X (prevents right-swing) */
html.logo-dim .topbar__logo,
body.logo-dim .topbar__logo{
  opacity: .08 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  --logo-shift: -10px;
  --logo-scale: .98;
  /* Force the same transform function to avoid any sideways jump */
  transform: translate(-50%, var(--logo-y)) translateY(var(--logo-shift)) scale(var(--logo-scale)) !important;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.35)) !important;
}

/* Hero spacing: keep buttons visible (especially on mobile) */
.hero{ padding-top: calc(var(--topbar-h) + var(--logo-overhang) + 18px) !important; }
.page{ padding-top: calc(var(--topbar-h) + var(--logo-overhang) + 22px) !important; }

@media (max-width: 760px){
  /* tighter hero so everything fits nicer */
  .hero__inner{ padding: 14px 14px 18px !important; gap: 18px !important; }
  .hero__content{ padding: 10px 0 10px !important; }
  .hero__actions{ gap: 10px !important; margin: 6px 0 14px !important; }
  .hero__divider{ margin: 14px 0 12px !important; }
  .hero__text{ margin-bottom: 14px !important; }

  /* the inline map makes the first screen too tall -> hide on mobile */
  .hero__mapInline{ display: none !important; }

  /* Slightly tighter type on mobile so the first view feels "one-screen" */
  .hero__headline{ font-size: clamp(38px, 9vw, 56px) !important; }
}



/* Mobile: ensure vertical view shows everything without overlap */
@media (max-width: 768px) {
  .hero {
    min-height: 100svh;
    padding-top: 96px; /* space for logo */
  }
  .logo {
    width: 150px;
    transform: translate(-50%, -20%);
  }
  .hero-buttons {
    margin-top: 12px;
  }
}


/* ===== v5: fixes per feedback ===== */
/* 1) Desktop logo ~2x bigger (uses existing CSS variables) */
@media (min-width: 1024px){
  :root{
    --logo-size: 320px;   /* was ~165px */
    --logo-y: -26%;
  }
}

/* 2) Prevent any sideways "swing" when dimming: keep the same transform signature */
html.logo-dim .topbar__logo,
body.logo-dim .topbar__logo{
  transform: translate(-50%, var(--logo-y)) translateY(var(--logo-shift)) scale(var(--logo-scale)) !important;
}
html.logo-dim .topbar__centerlogo,
body.logo-dim .topbar__centerlogo{
  transform: translateX(-50%) translateY(-12px) scale(.98) !important;
}

/* 3) Mobile portrait: ensure hero fits in ONE vertical screen (no cut-off) */
@media (max-width: 760px){
  :root{
    --logo-size: 150px;
    --logo-y: -18%;
  }

  /* enough space for the hanging logo, but still compact */
  .hero{
    padding-top: calc(var(--topbar-h) + 120px) !important;
    min-height: 100svh !important;
  }

  /* tighten text/spacing so CTA + text always fits */
  .hero__inner{ gap: 14px !important; padding: 12px 14px 14px !important; }
  .hero__divider{ width: 320px !important; margin: 10px 0 10px !important; }
  .hero__text{ font-size: 15px !important; margin-bottom: 10px !important; }
  .hero__actions{ margin: 4px 0 10px !important; }
}



/* =========================
   v6 FIX: Logo positioning + internal page spacing
   - Desktop logo ~2x bigger
   - No horizontal "swerve" (consistent translateX)
   - Portrait mobile: hero content not clipped
   ========================= */

/* Use variables so we can drive spacing everywhere */
:root{
  --logo-size: 160px;     /* mobile/tablet default */
  --logo-overhang: 115px;  /* hangs below topbar (more space so it won't clip) */
  --logo-ty: -22%;         /* how much we lift it up from the bottom edge */
  --logo-ty-dim: -12%;     /* lift while fading (keeps X stable) */
}

/* Desktop: nearly double the previous size */
@media (min-width: 1024px){
  :root{
    --logo-size: 320px;
    --logo-overhang: 215px;
    --logo-ty: -28%;
    --logo-ty-dim: -16%;
  }
}

/* Anchor logo to the TOPBAR (not the viewport / page content) */
.topbar{
  position: fixed;
  overflow: visible;
}

.topbar__logo{
  position: absolute !important;
  left: 50% !important;
  top: 100% !important; /* bottom edge of topbar */
  width: var(--logo-size) !important;
  height: auto !important;
  transform: translateX(-50%) translateY(var(--logo-ty)) !important; /* centered + slight lift so it hangs down */
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 60 !important;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
  transition: opacity .35s ease, transform .35s ease;
}

.topbar__logo img{
  width: 100%;
  height: auto;
  display: block;
}

/* Internal pages: add enough top padding so logo never overlaps the H1 */
.page{
  padding-top: calc(var(--topbar-h) + var(--logo-overhang) + 28px) !important;
}

/* Home hero: ensure portrait view shows CTA without needing landscape */
.hero{
  min-height: 100svh !important;
  padding-top: calc(var(--topbar-h) + var(--logo-overhang) + 10px) !important;
  padding-bottom: 18px !important;
}

@media (max-width: 768px){
  .hero .hero-content{
    padding-top: 0 !important;
  }
  .hero .hero-title{
    font-size: clamp(28px, 7vw, 38px) !important;
    line-height: 1.05 !important;
  }
  .hero .hero-subtitle{
    font-size: 14px !important;
    line-height: 1.35 !important;
  }
  .hero .hero-buttons{
    gap: 10px !important;
  }
  .hero .hero-buttons .btn{
    width: 100%;
  }
}


/* =========================================
   Bottom bar (Impressum / Datenschutz)
   ========================================= */
:root{ --bottombar-h: 54px; }

.bottombar{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--bottombar-h);
  z-index: 70;
  /* Hidden by default – appears only near page bottom */
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
  transition: transform .38s cubic-bezier(.2,.9,.2,1), opacity .28s ease;
  background:
    linear-gradient(to top, rgba(26,18,13,.96), rgba(20,14,10,.78)),
    repeating-linear-gradient(90deg, rgba(242,140,27,.040) 0 1px, rgba(0,0,0,0) 1px 18px);
  border-top: 1px solid rgba(242,140,27,.45);
}

/* show only when body toggles it (scroll at bottom) */
body.bottombar-visible .bottombar{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.bottombar__inner{
  max-width: var(--max);
  height: 100%;
  margin: 0 auto;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: rgba(255,255,255,.78);
  font-size: 12.5px;
}

.bottombar__links{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.bottombar__links a{
  color: rgba(255,255,255,.82);
  text-decoration: none;
  border-bottom: 1px solid rgba(242,140,27,.0);
}
.bottombar__links a:hover{
  border-bottom-color: rgba(242,140,27,.55);
  text-decoration: none;
}
.bottombar__links .sep{ opacity: .6; }

/* When the bar is visible, add bottom padding so content isn't covered */
body.bottombar-visible .hero{ padding-bottom: calc(var(--bottombar-h) + 22px) !important; }
body.bottombar-visible .page{ padding-bottom: calc(var(--bottombar-h) + 44px) !important; }

@media (max-width: 520px){
  :root{ --bottombar-h: 60px; }
  .bottombar__inner{ font-size: 12px; padding: 0 14px; }
}


/* Ensure the big logo never overlays search modal or form fields */
html.search-open .topbar__logo,
body.search-open .topbar__logo,
html.ui-focus .topbar__logo,
body.ui-focus .topbar__logo{
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* =========================
   v41: Logo should "go to background" when scrolling down
   - visible but non-blocking
   - never covers text while scrolling
   ========================= */
.topbar__inner{ position: relative !important; z-index: 100 !important; }

html.logo-dim .topbar__logo,
body.logo-dim .topbar__logo{
  opacity: .14 !important;
  pointer-events: none !important;
  z-index: 1 !important;   /* behind nav/text */
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.25)) !important;
}

html:not(.logo-dim) .topbar__logo,
body:not(.logo-dim) .topbar__logo{
  opacity: 1 !important;
  z-index: 60 !important;
  pointer-events: auto !important;
}


/* ===== Modern form polish ===== */
.form .btn{ transition: transform .14s ease, filter .14s ease, box-shadow .14s ease; }
.form .btn:active{ transform: translateY(0); }
.form .btn--accent{
  box-shadow: 0 14px 30px rgba(242,140,27,.14), 0 10px 18px rgba(0,0,0,.35);
}
.form .btn--accent:hover{ transform: translateY(-1px); filter: brightness(1.03); }
.form .btn--ghost:hover{ transform: translateY(-1px); }

.inputgroup{
  position: relative;
  display:flex;
  align-items:stretch;
  gap:10px;
}
.inputgroup input{
  flex:1;
  padding-right: 48px; /* space for icon button */
}
.iconbtn--infield{
  position:absolute;
  right:6px;
  top:50%;
  transform: translateY(-50%);
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
}
.iconbtn--infield:hover{ border-color: rgba(242,140,27,.55); }

/* ===== Datepicker (custom) ===== */
.datepicker{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 2500;
}
.datepicker.is-open{ display:block; }
.datepicker__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.62);
}
.datepicker__panel{
  position:absolute;
  left:50%;
  top: calc(var(--topbar-h) + 34px);
  transform: translateX(-50%);
  width: min(420px, calc(100% - 24px));
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(20,14,10,.97), rgba(10,7,6,.94));
  box-shadow: var(--shadow);
  padding: 14px;
}
.datepicker__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}
.datepicker__title{
  font-weight: 600;
  color: rgba(255,255,255,.90);
}
.datepicker__dow{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  color: rgba(255,255,255,.55);
  font-size: 12px;
  margin-bottom: 8px;
}
.datepicker__grid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.dp-day{
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.92);
  cursor:pointer;
}
.dp-day:hover{ border-color: rgba(242,140,27,.55); }
.dp-day.is-muted{ opacity:.35; cursor: default; }
.dp-day.is-disabled{ opacity:.28; cursor: not-allowed; }
.dp-day.is-selected{
  background: rgba(242,140,27,.18);
  border-color: rgba(242,140,27,.75);
  color: var(--accent);
  font-weight: 700;
}
.datepicker__foot{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top: 12px;
}
@media (max-width: 520px){
  .datepicker__panel{ top: calc(var(--topbar-h) + 18px); }
  .dp-day{ height: 40px; }
  .datepicker__foot .btn{ flex:1; }
}

/* Button row modern layout */
.buttonrow{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:8px;
}
.buttonrow .btn{ height: 46px; border-radius: 14px; padding: 0 18px; }
.buttonrow .btn--accent{ min-width: 220px; }
@media (max-width: 520px){
  .buttonrow{ flex-direction: column; align-items: stretch; }
  .buttonrow .btn{ width: 100%; }
  .buttonrow .btn--accent{ min-width: 0; }
}


/* ===== Fix: big hanging logo must NEVER block form fields (PC click issue) ===== */
.topbar__logo{ pointer-events: none !important; } /* home navigation still available via ⌂ (brandmark) */
.topbar__logo img{ pointer-events: none !important; }

.page .card, .page .container{ position: relative; z-index: 2; } /* ensure content is above decorative layers */


/* ===== Fix v8: header must never block clicks on the page ===== */
.topbar{ pointer-events: none !important; }
.topbar__inner,
.topbar__right,
.topbar__right * ,
.brandmark,
.brandmark * ,
.nav,
.nav * ,
.burger,
.burger * ,
.mobile,
.mobile * ,
.phone,
.phone * ,
.iconbtn{ pointer-events: auto !important; }

/* keep the big logo decorative only */
.topbar__logo{ pointer-events:none !important; }
.topbar__logo img{ pointer-events:none !important; }