/* ============================
  ShimmerStone Luxury Premium CSS   
   Mobile-First, Flexbox-only Layouts
   Brand: ShimmerStone Architektur & Design
   By: Professional CSS/UI Designer
=============================== */
/* -------------------
   CSS RESET & BASE
------------------- */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{
  margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
  display:block;
}
body{
  line-height:1; font-family:'Open Sans', Arial, sans-serif; background:#F6F5F0; color:#2A3D45;
}
ul,ol { list-style:none; }
a { text-decoration:none; color:inherit; transition:color 0.2s; }
img { border:0; max-width:100%; display:block; }
*,*:before,*:after{ box-sizing:border-box; }
:root{
  --color-primary: #2A3D45;
  --color-secondary: #A6B7B0;
  --color-accent: #F6F5F0;
  --color-gold: #BA9A56;
  --color-dark: #22292A;
  --color-white: #fff;
  --shadow-medium: 0 6px 28px rgba(34,41,42,0.13), 0 1.5px 5px rgba(186,154,86,0.11);
  --shadow-card: 0 2px 12px rgba(42,61,69,0.08), 0 1px 3px rgba(186,154,86,0.07);
  --radius:16px;
  --radius-button:32px;
  --radius-card:18px;
}

/* -----------
    TYPOGRAPHY
------------- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Open+Sans:wght@400;600&display=swap');
h1, .h1 {
  font-family:'Montserrat', Arial, sans-serif;
  font-weight:700;
  font-size:2.2rem;
  letter-spacing:-0.5px;
  color:var(--color-primary);
  margin-bottom:20px;
}
h2, .h2 {
  font-family:'Montserrat', Arial, sans-serif;
  font-size:1.5rem;
  font-weight:600;
  letter-spacing:-0.3px;
  color:var(--color-primary);
  margin-bottom:18px;
}
h3, .h3 {
  font-family:'Montserrat', Arial, sans-serif;
  font-size:1.18rem;
  font-weight:600;
  color:var(--color-dark);
  margin-bottom:8px;
}
p, li, ul, ol {
  font-family:'Open Sans', Arial, sans-serif;
  font-size:1rem;
  color:var(--color-primary);
  margin-bottom:10px;
  line-height:1.6;
}
strong, b { color:var(--color-dark); font-weight:700; }

/* Visual Hierarchy */
main h2 {
  border-left:4px solid var(--color-gold);
  padding-left:16px;
  margin-top:10px;
}

/* -------------------------
   BRANDING: COLORS & LUXURY
--------------------------- */
body {
  background:var(--color-accent);
  color:var(--color-primary);
  font-size:16px;
}
hr {
  border:0;
  border-top:1px solid var(--color-secondary);
  margin:32px 0;
}

/* ---------------
     CONTAINERS
----------------- */
.container {
  max-width:1220px;
  margin:0 auto;
  padding:0 20px;
  width:100%;
  display:flex;
  flex-direction:column;
}
.content-wrapper {
  width:100%;
  display:flex;
  flex-direction:column;
  gap: 24px;
  align-items:flex-start;
  margin-bottom:0;
}

/* ---------------
   SECTIONS & CARDS
----------------- */
.section {
  margin-bottom:60px !important;
  padding:40px 20px;
  background:var(--color-accent);
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
}
.card-container {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
}
.card {
  background:var(--color-white);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
  padding:28px 22px;
  flex:1 1 320px;
  margin-bottom:20px;
  display:flex;
  flex-direction:column;
  position:relative;
  transition:box-shadow 0.18s, transform 0.18s;
}
.card:hover {
  box-shadow:0 4px 22px rgba(42,61,69,0.13), 0 1px 3px rgba(186,154,86,0.13);
  transform:translateY(-4px) scale(1.012);
}
.card h3 {
  color:var(--color-gold);
  margin-bottom:10px;
}

/* ------ Feature Grid ------ */
.feature-grid {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  margin-bottom:24px;
}
.feature-grid > div {
  flex:1 1 250px;
  background:var(--color-white);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
  padding:28px 18px 18px 18px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  border-top:4px solid var(--color-gold);
  min-width:240px;
  transition:box-shadow 0.18s;
}
.feature-grid > div:hover {
  box-shadow:var(--shadow-medium);
}
.feature-grid img {
  width:38px; height:38px; margin-bottom:16px;
}
.feature-grid ul {
  margin:0 0 0 12px;  padding:0;
}

/* -----------
   HERO BANNER
------------- */
.hero {
  padding: 56px 0 36px 0;
  background:linear-gradient(120deg,var(--color-primary) 85%,var(--color-gold) 100%);
  color:var(--color-accent);
  border-bottom-left-radius:64px;
  border-bottom-right-radius:64px;
  box-shadow:0 8px 32px rgba(42,61,69,0.10);
}
.hero .container {
  align-items:flex-start;
}
.hero h1, .hero h2, .hero h3 {
  color:var(--color-accent);
  font-size:2.5rem;
  letter-spacing:-1.5px;
  line-height:1.15;
}
.hero p {
  color:var(--color-accent);
  font-size:1.12rem;
  font-weight:400;
  margin-bottom:32px;
  letter-spacing:0.01em;
}
.hero .cta-btn {
  margin-top:14px;
}

/* -----------
    BUTTONS
------------- */
.cta-btn, .cookie-banner button, .cookie-modal-action {
  background:var(--color-gold);
  color:var(--color-primary);
  font-weight:700;
  font-family:'Montserrat', Arial, sans-serif;
  font-size:1.05rem;
  padding:13px 34px;
  border-radius:var(--radius-button);
  border:none;
  outline:none;
  box-shadow: 0 2px 6px rgba(186,154,86,0.10);
  cursor:pointer;
  letter-spacing:0.04em;
  transition:background 0.18s, color 0.18s, box-shadow 0.16s, transform 0.19s;
  display:inline-block;
  text-align:center;
  margin-right:10px;
  margin-bottom:12px;
}
.cta-btn:hover, .cookie-banner button:hover, .cookie-modal-action:hover {
  background: #e7c778;
  color: var(--color-dark);
  box-shadow: 0 4px 18px rgba(186,154,86,0.15);
  transform:translateY(-2px) scale(1.01);
}
nav .cta-btn {
  margin-left:24px;
}

/* Clean secondary button */
.cookie-banner .cookie-settings,
.cookie-modal-action.secondary {
  background: var(--color-accent);
  color: var(--color-primary);
  border: 1.5px solid var(--color-gold);
}
.cookie-banner .cookie-settings:hover,
.cookie-modal-action.secondary:hover {
  background: var(--color-gold);
  color: var(--color-primary);
  border-color:var(--color-gold);
}

/* ---------
  NAVIGATION
----------- */
header {
  width:100%;
  background:var(--color-white);
  box-shadow:0 1px 12px 0 rgba(42,61,69,0.05);
  z-index:60;
  position:relative;
}
header .container {
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  padding:14px 20px;
}
header nav {
  display:flex;
  flex-direction:row;
  gap:24px;
}
header nav a {
  font-family:'Montserrat', Arial, sans-serif;
  color:var(--color-primary);
  font-weight:600;
  font-size:1rem;
  position:relative;
  padding-bottom:4px;
  transition:color 0.12s;
}
header nav a:not(.cta-btn):hover {
  color:var(--color-gold);
}
header nav a.active {
  border-bottom:2px solid var(--color-gold);
  color:var(--color-gold);
}
header img {
  display:block;
  height:44px;
  margin-right:24px;
}
.mobile-menu-toggle {
  display:none;
  background:none;
  border:none;
  font-size:2.1rem;
  color:var(--color-gold);
  cursor:pointer;
  margin-left:16px;
  z-index:1011;
}

/* ---------  FOOTER ----------- */
footer {
  background:var(--color-primary);
  padding:36px 0 16px 0;
  color:var(--color-accent);
  border-top-left-radius:44px;
  border-top-right-radius:44px;
}
footer .container {
  flex-direction:column;
  align-items:center;
  gap:24px;
}
footer nav {
  flex-direction:row;
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  justify-content:center;
  margin:14px 0 8px 0;
}
footer nav a {
  color:var(--color-accent);
  font-family:'Montserrat', Arial, sans-serif;
  opacity:0.81;
  font-size:1rem;
  margin-bottom:3px;
  transition:color 0.16s, opacity 0.12s;
}
footer nav a:hover { color:var(--color-gold); opacity:1; }
footer img { height:42px; margin-bottom:8px; }
.footer-contact {
  display:flex;
  flex-direction:row;
  gap:32px;
  align-items:center;
  margin-top:10px;
  opacity:0.91;
  font-size:1rem;
  flex-wrap:wrap;
}
.footer-contact span {
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:6px;
  color:var(--color-accent);
  font-size:0.98rem;
}
.footer-contact img { height:19px; width:19px; }

/* ------
  TESTIMONIAL CARDS
------- */
.testimonial-card {
  display:flex;
  align-items:center;
  gap:20px;
  background:var(--color-white);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
  padding:20px;
  margin-bottom:20px;
  border-left:4px solid var(--color-gold);
  color:var(--color-dark);
  font-size:1.04rem;
  transition:box-shadow 0.18s, background 0.16s;
  min-width:0;
}
.testimonial-card:hover {
  box-shadow:0 4px 22px rgba(186,154,86,0.13), 0 1px 3px rgba(186,154,86,0.13);
  background:#faf9f5;
}
.testimonial-card p {
  flex:1;
  font-family:'Open Sans', Arial,sans-serif;
  font-size:1.00rem;
  color:var(--color-primary);
  margin:0 0 6px 0;
}
.testimonial-card strong {
  color:var(--color-gold);
}
.testimonial-card div {
  font-family:'Montserrat', Arial,sans-serif;
  font-size:0.98rem;
  color:var(--color-secondary);
}

/* -------------
   SECTION LAYOUTS
--------------- */
.content-grid {
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  justify-content:space-between;
}
.text-image-section {
  display:flex;
  align-items:center;
  gap:30px;
  flex-wrap:wrap;
  margin-bottom:20px;
}
.feature-item {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:15px;
}

/* -------------
   MAP PLACEHOLDER (Contact)
--------------- */
.map-placeholder {
  width:100%;
  min-height:140px;
  background:var(--color-secondary);
  border-radius:var(--radius);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--color-white);
  font-style:italic;
  font-size:1.12rem;
  opacity:0.9;
  margin-top:12px;
}

/* -------------
 CONTACT NOTE
--------------- */
.contact-note {
  background:rgba(186,154,86,0.09);
  border-left:4px solid var(--color-gold);
  padding:18px 24px;
  border-radius:var(--radius);
  margin-top:18px;
  font-size:1.02rem;
  color:var(--color-primary);
}

/* -------------
 FORMS (Newsletter signup placeholder)
--------------- */
input, textarea, select {
  border:1.5px solid var(--color-secondary);
  border-radius:var(--radius-button);
  padding:12px 16px;
  font-size:1rem;
  font-family:'Open Sans',Arial,sans-serif;
  margin-bottom:14px;
  width:100%;
  background:var(--color-white);
  color:var(--color-primary);
  outline:none;
  transition:border 0.14s, box-shadow 0.14s;
}
input:focus, textarea:focus, select:focus {
  border-color:var(--color-gold);
  box-shadow:0 0 4px 0 var(--color-gold);
}

/* -------------
   UL/OL in Content
--------------- */
ul, ol {
  margin:0 0 8px 24px;
}
ul li, ol li {
  margin-bottom:7px;
  font-size:1.01rem;
  padding-left:0.5em;
}
ul > li::marker, ol > li::marker {
  color:var(--color-gold);
  font-weight:700;
}

/* -----------------------------------
          MOBILE NAVIGATION MENU
------------------------------------- */
.mobile-menu-toggle {
  display:none;
}
.mobile-menu {
  position:fixed;
  top:0; left:0;
  width:100vw; height:100vh;
  background:rgba(42,61,69,0.98);
  z-index:1300;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  pointer-events:none;
  opacity:0;
  transform:translateX(-100%);
  transition:transform 0.35s cubic-bezier(.8,.03,.2,.96), opacity 0.22s;
}
.mobile-menu.open {
  pointer-events:auto;
  opacity:1;
  transform:translateX(0);
}
.mobile-menu-close {
  background:none;
  border:none;
  color:var(--color-gold);
  font-size:2.2rem;
  position:absolute;
  top:32px;
  right:32px;
  z-index:1040;
  cursor:pointer;
  transition:color 0.17s;
}
.mobile-menu-close:hover { color:var(--color-white); }
.mobile-nav {
  display:flex;
  flex-direction:column;
  gap:32px;
  align-items: flex-start;
  margin:92px 0 0 34px;
}
.mobile-nav a {
  font-family:'Montserrat', Arial, sans-serif;
  color:var(--color-accent);
  font-size:1.31rem;
  font-weight: 600;
  padding:8px 0 8px 8px;
  border-radius:6px;
  display:block;
  transition:background 0.18s, color 0.14s;
}
.mobile-nav a:hover, .mobile-nav a.active {
  color:var(--color-gold); background:rgba(186,154,86,0.09);
}
@media (max-width:1060px) {
  header .container {
    padding-left:10px; padding-right:10px;
  }
}
@media (max-width:900px) {
  .container { padding-left:10px; padding-right:10px; }
  .hero { padding-left:0; padding-right:0; }
  .footer-contact { gap:16px; }
}
@media (max-width:768px) {
  .container { padding-left:0; padding-right:0; }
  header nav {
    display:none;
  }
  .mobile-menu-toggle {
    display:inline-block;
  }
  .footer-contact {
    flex-direction:column;
    gap:10px;
    align-items:flex-start;
  }
  .feature-grid {
    flex-direction:column;
    gap:18px;
  }
  .content-grid {
    flex-direction:column;
    gap:20px;
  }
  .testimonial-card {
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    font-size:0.99rem;
  }
  .text-image-section {
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
  }
  .hero {
    border-bottom-left-radius:28px;
    border-bottom-right-radius:28px;
    padding: 38px 0 20px 0;
  }
  .hero h1, .hero h2 {
    font-size:2rem;
  }
  .section, .map-placeholder {
    padding:30px 12px;
  }
  footer .container { padding:0 10px; }
}

@media (max-width:480px) {
  .section, .map-placeholder { padding:22px 0; }
  .hero { padding-bottom:16px; }
  .hero h1 { font-size:1.3rem; }
  main h2 { font-size:1.09rem; }
}

/* -----------------------------------
       COOKIE CONSENT BANNER & MODAL
-------------------------------------- */
.cookie-banner {
  position:fixed;
  bottom:0; left:0; width:100vw;
  background:var(--color-white);
  border-top:3px solid var(--color-gold);
  box-shadow:0 -3px 18px rgba(34,41,42,0.09);
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:24px;
  justify-content:space-between;
  padding:22px 24px 16px 24px;
  z-index:1500;
  font-size:1rem;
  animation:cookieBannerAppear 0.55s cubic-bezier(.7,.19,.13,.95);
}
@keyframes cookieBannerAppear {
  0%{ transform:translateY(120px); opacity:0; }
  100%{ transform:translateY(0); opacity:1; }
}
.cookie-banner p {
  color:var(--color-primary);
  font-size:1.01rem;
  margin-bottom:0;
  max-width:550px;
}
.cookie-banner .btn-group {
  display:flex;
  flex-direction:row;
  gap:12px;
}
.cookie-banner button {
  min-width:132px;
}
@media (max-width:700px) {
  .cookie-banner { flex-direction:column; align-items:flex-start; gap:18px; padding:19px 8px; }
  .cookie-banner .btn-group { width:100%; gap:9px; }
}

.cookie-modal-backdrop {
  position:fixed;
  top:0; left:0; width:100vw; height:100vh;
  background:rgba(42,61,69,0.58);
  z-index:1750;
  display:flex;
  align-items:center;
  justify-content:center;
  animation:cookieModalBackdropAnim 0.28s cubic-bezier(.79,.18,.18,.99);
}
@keyframes cookieModalBackdropAnim{
  0%{opacity:0;}
  100%{opacity:1;}
}
.cookie-modal {
  background:var(--color-white);
  border-radius:var(--radius);
  box-shadow:0 16px 46px rgba(42,61,69,0.13), 0 1.5px 9px rgba(186,154,86,0.14);
  min-width:300px;
  max-width:420px;
  padding:34px 32px 24px 32px;
  position:relative;
  z-index:1800;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  animation:cookieModalAnim 0.29s cubic-bezier(.79,.18,.28,.93);
}
@keyframes cookieModalAnim {
  0%{ transform:scale(0.87); opacity:0; }
  100%{ transform:scale(1); opacity:1; }
}
.cookie-modal h3 {
  color:var(--color-gold);
  font-size:1.25rem;
  margin-bottom:9px;
  font-weight:700;
}
.cookie-modal .cookie-category {
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:18px;
  margin: 13px 0;
  width:100%;
}
.cookie-modal .cookie-category label {
  font-family:'Open Sans',Arial,sans-serif;
  color:var(--color-primary);
  font-size:1.01rem;
  flex:1;
  cursor:pointer;
}
.cookie-category input[type="checkbox"] {
  width:22px; height:22px;
  accent-color:var(--color-gold);
}
.cookie-modal .cookie-category.essential label {
  color:var(--color-dark);
  font-weight:700;
}
.cookie-modal-actions {
  display:flex;
  flex-direction:row;
  gap:18px;
  width:100%;
  margin-top:18px;
  flex-wrap:wrap;
}
.cookie-modal-action {
  font-size:1.05rem;
}
.cookie-modal-close {
  position:absolute;
  right:18px;
  top:18px;
  background:none;
  border:none;
  font-size:1.60rem;
  color:var(--color-gold);
  cursor:pointer;
  z-index:1801;
  padding:2px 4px;
  transition:color 0.16s;
}
.cookie-modal-close:hover { color:var(--color-dark); }
@media (max-width:550px) {
  .cookie-modal { min-width:0; max-width:94vw; padding:25px 10px 17px 15px; }
}

/* ---------------
  ADDITIONAL MICRO-INTERACTIONS
----------------- */
a, .cta-btn, button, input, textarea {
  transition: all 0.17s cubic-bezier(.38,.01,.24,.99);
}
.cta-btn:focus,
.cookie-banner button:focus,
.cookie-modal-action:focus {
  box-shadow:0 0 0 3px rgba(186,154,86,0.20);
  outline:none;
}

/* ---------------
    UTILITY (for overall spacing)
----------------- */
section { margin-bottom:60px; padding:40px 0; }

/* ---------------
    PRINT FRIENDLY
----------------- */
@media print {
  header, footer, .cookie-banner, .cookie-modal-backdrop, .mobile-menu { display:none !important; }
  .container, .content-wrapper { max-width:100%; padding:0; }
  body { background:#fff; color:#111; }
}