/* CisaBella - Site-Shell (Header + Footer) */
/* Quelle der Wahrheit fuer das Schale-CSS, das auf allen Unterseiten geteilt wird.
   index.php hat sein eigenes inline-CSS und nutzt diese Datei nicht. */

:root{
  --green:#537A4C;
  --green-deep:#3E5D39;
  --green-ink:#2B3B28;
  --rose:#F2D2DD;
  --rose-soft:#F8E5EB;
  --sage:#D5E3D0;
  --cream:#FAF7F2;
  --paper:#F1EBDD;
  --ink:#252822;
  --muted:#7A756B;
  --rule:#CFC6B4;
  --banner-h:40px;
}
html,body{background:var(--cream); color:var(--ink); overflow-x:hidden; max-width:100vw}
body{font-family:'EB Garamond', Georgia, serif; font-size:18px; line-height:1.6; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}

/* Skip-Link (A11y) */
.site-skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.site-skip-link:focus{
  position:fixed; left:50%; top:12px; transform:translateX(-50%);
  width:auto; height:auto; z-index:9999;
  padding:12px 22px; background:var(--green); color:var(--cream);
  font-family:Inter, sans-serif; font-size:13px; letter-spacing:.2em; text-transform:uppercase;
  border-radius:4px; box-shadow:0 4px 18px rgba(42,46,40,.25);
}

/* Promo Banner */
.promo-banner{
  position:fixed; top:0; left:0; right:0; z-index:101;
  height:var(--banner-h);
  display:flex; align-items:center; justify-content:center; gap:20px;
  background:var(--rose); color:var(--green-ink);
  font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:400;
  font-size:16px; letter-spacing:.01em;
  text-align:center; padding:0 24px;
  white-space:nowrap; overflow:hidden;
  transition:background .2s ease;
}
.promo-banner:hover{background:var(--rose-soft)}
.promo-banner .sep{opacity:.55}

/* Nav */
.site-nav{
  position:fixed; top:var(--banner-h); left:0; right:0; z-index:100;
  background:rgba(250,247,242,.78);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(42,46,40,.07);
}
.site-nav .nav-inner{max-width:1440px; margin:0 auto; padding:16px 56px; display:flex; align-items:center; justify-content:space-between}
.site-nav .brand{display:flex; gap:12px; align-items:center}
.site-nav .brand img{height:42px}
.site-nav .brand .script{font-family:'Allura', cursive; font-size:28px; color:var(--green); line-height:.9}
.site-nav .brand small{font-family:Inter; font-size:9px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); display:block; margin-top:3px}
.site-nav .menu{display:flex; gap:32px; list-style:none; padding:0; margin:0}
.site-nav .menu a{font-family:Inter; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink)}
.site-nav .menu a:hover{color:var(--green)}
.site-nav .nav-cta{
  font-family:Inter; font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  background:var(--green); color:var(--cream);
  padding:12px 22px; border-radius:2px;
  transition:all .2s ease;
}
.site-nav .nav-cta:hover{background:var(--green-deep)}

/* Burger (Mobile) */
.nav-burger{
  display:none; appearance:none; -webkit-appearance:none;
  width:44px; height:44px; padding:0; margin:0;
  background:transparent; border:1px solid var(--rule); border-radius:6px;
  color:var(--green-ink); cursor:pointer;
  align-items:center; justify-content:center;
  transition:background .2s ease, border-color .2s ease;
}
.nav-burger:hover{background:rgba(58,82,57,.06); border-color:var(--green)}
.nav-burger .burger-bars{position:relative; width:20px; height:14px; display:block}
.nav-burger .burger-bars span{
  position:absolute; left:0; right:0; height:2px; background:currentColor; border-radius:2px;
  transition:transform .25s ease, top .25s ease, opacity .2s ease;
}
.nav-burger .burger-bars span:nth-child(1){top:0}
.nav-burger .burger-bars span:nth-child(2){top:6px}
.nav-burger .burger-bars span:nth-child(3){top:12px}
.nav-burger[aria-expanded="true"] .burger-bars span:nth-child(1){top:6px; transform:rotate(45deg)}
.nav-burger[aria-expanded="true"] .burger-bars span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] .burger-bars span:nth-child(3){top:6px; transform:rotate(-45deg)}

/* Mobile-Menue */
.mobile-menu{
  position:absolute; left:0; right:0; top:100%;
  background:rgba(250,247,242,.98);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(42,46,40,.08);
  box-shadow:0 18px 30px -16px rgba(42,46,40,.25);
  padding:24px 24px 28px;
  transform:translateY(-12px); opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  z-index:99;
}
.mobile-menu.is-open{opacity:1; transform:translateY(0); pointer-events:auto}
.mobile-menu ul{list-style:none; display:flex; flex-direction:column; gap:4px; margin:0 0 18px; padding:0}
.mobile-menu a{
  display:block; padding:14px 6px;
  font-family:Inter; font-size:13px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink); border-bottom:1px solid rgba(42,46,40,.08);
}
.mobile-menu a:last-child{border-bottom:0}
.mobile-menu .nav-cta{
  display:inline-flex; align-items:center; justify-content:center; width:100%;
  padding:16px 22px; font-size:12px;
  font-family:Inter; letter-spacing:.26em; text-transform:uppercase;
  background:var(--green); color:var(--cream); border-radius:2px;
  transition:all .2s ease;
}
.mobile-menu .nav-cta:hover{background:var(--green-deep)}

/* Spacer fuer fixed Banner+Nav, damit Inhalt drunter rutscht */
.site-shell-spacer{height:calc(var(--banner-h) + 76px)}

/* Footer */
.site-footer{background:var(--green-ink); color:var(--cream); padding:70px 56px 36px; border-top:1px solid rgba(242,210,221,.15)}
.site-footer .footer-inner{max-width:1360px; margin:0 auto}
.site-footer .footer-top{display:grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap:60px; padding-bottom:50px; border-bottom:1px solid rgba(242,210,221,.2)}
.site-footer .footer-brand .script{font-family:Allura, cursive; font-size:52px; color:var(--rose); line-height:.9}
.site-footer .footer-brand p{font-size:14px; line-height:1.65; color:rgba(250,247,242,.7); max-width:280px; margin-top:14px}
.site-footer .footer-col h5{font-family:Inter; font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--rose); margin-bottom:16px; font-weight:500}
.site-footer .footer-col ul{list-style:none; padding:0; margin:0}
.site-footer .footer-col li{padding:3px 0; font-size:14px}
.site-footer .footer-col a{color:inherit}
.site-footer .footer-col a:hover{color:var(--rose)}
.site-footer .footer-services{margin:0; padding:24px 0 4px; text-align:center; font-family:Inter; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:rgba(250,247,242,.45)}
.site-footer .footer-bottom{display:flex; justify-content:space-between; padding-top:18px; font-family:Inter; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:rgba(250,247,242,.5)}
.site-footer .footer-bottom a{color:inherit}
.site-footer .footer-bottom a:hover{color:var(--rose)}
.site-footer .footer-credit{
  margin-top:18px; padding-top:18px;
  border-top:1px solid rgba(242,210,221,.12);
  text-align:center;
  font-family:Inter; font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(250,247,242,.4);
}
.site-footer .footer-credit a{color:inherit; border-bottom:1px solid rgba(250,247,242,.25); padding-bottom:1px}
.site-footer .footer-credit a:hover{color:var(--rose); border-color:var(--rose)}

/* Responsive */
@media (max-width: 960px){
  :root{--banner-h:56px}
  .promo-banner{font-size:14px; letter-spacing:.01em; padding:6px 14px; white-space:normal; line-height:1.4}
  .site-nav .nav-inner{padding:14px 24px}
  .site-nav .menu{display:none}
  .site-nav .nav-inner > .nav-cta{display:none}
  .nav-burger{display:inline-flex}
  .site-shell-spacer{height:calc(var(--banner-h) + 70px)}
  .site-footer{padding:50px 24px 30px}
  .site-footer .footer-top{grid-template-columns:1fr 1fr; gap:30px}
  .site-footer .footer-bottom{flex-direction:column; gap:10px}
}