:root{
  --bg:#f5f1ea;
  --paper:#fffdfa;
  --ink:#201a14;
  --muted:#6a6058;
  --line:#e6ddd1;
  --gold:#b08a2e;
  --gold-dark:#8c6b1f;
  --charcoal:#171310;
  --shadow:0 18px 48px rgba(19,14,10,.10);
  --radius:20px;
  --container:1200px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Georgia, "Times New Roman", serif;
  color:var(--ink);
  background:linear-gradient(180deg,#f7f3ed 0%, #f3eee6 100%);
  line-height:1.7;
}
img{max-width:100%;display:block}
a{color:inherit}
.container{width:min(var(--container), calc(100% - 40px)); margin:0 auto}
.narrow{width:min(880px, 100%)}

.topline{
  background:#111;
  color:#f6efe1;
  font-size:14px;
}
.topline .container{
  display:flex;
  gap:18px;
  justify-content:space-between;
  padding:10px 0;
  flex-wrap:wrap;
}
.topline .left, .topline .right{display:flex;gap:18px;flex-wrap:wrap}
.topline a{text-decoration:none;opacity:.95}

header{
  position:sticky;
  top:0;
  z-index:100;
  backdrop-filter:blur(10px);
  background:rgba(255,253,250,.94);
  border-bottom:1px solid rgba(176,138,46,.16);
}
.navbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:92px;
}
.logo-wrap{display:flex; align-items:center; gap:18px; text-decoration:none}
.logo-wrap img{height:120px; width:auto; object-fit:contain}
.brand-copy{display:flex; flex-direction:column}
.brand-copy strong{font-size:18px; letter-spacing:.08em; text-transform:uppercase}
.brand-copy span{font-size:13px; color:var(--muted); letter-spacing:.06em}
nav ul{
  margin:0; padding:0; list-style:none;
  display:flex; gap:28px; flex-wrap:wrap; justify-content:flex-end;
}
nav a{
  text-decoration:none;
  font-size:15px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#2b241d;
}
nav a:hover, nav a.active{color:var(--gold-dark)}

.hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at top right, rgba(176,138,46,.22), transparent 22%),
    radial-gradient(circle at left 20%, rgba(176,138,46,.12), transparent 20%),
    linear-gradient(135deg, rgba(17,13,10,.86), rgba(33,26,21,.74)),
    url('images/placeholder-hero.jpg') center/cover no-repeat;
  color:#fff;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(15,12,10,.72) 0%, rgba(15,12,10,.42) 55%, rgba(15,12,10,.20) 100%);
}
.hero-inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:36px;
  min-height:720px;
  align-items:center;
  padding:72px 0;
}
.hero-kicker{
  display:inline-block;
  padding:8px 14px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:999px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:12px;
  margin-bottom:18px;
  color:#efe7d7;
}
.hero h1{
  margin:0 0 18px;
  font-size:clamp(42px,6vw,76px);
  line-height:1.08;
  letter-spacing:-.02em;
}
.hero p{
  max-width:760px;
  margin:0 0 16px;
  font-size:19px;
  color:#efe7d7;
}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap; margin-top:28px}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 24px;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  letter-spacing:.04em;
  border:1px solid transparent;
  transition:.2s ease;
}
.button-primary{background:var(--gold); color:#fff}
.button-primary:hover{background:var(--gold-dark); transform:translateY(-1px)}
.button-secondary{border-color:rgba(255,255,255,.35); color:#fff; background:rgba(255,255,255,.06)}
.button-secondary:hover{background:rgba(255,255,255,.12)}

.hero-panel{
  position:relative;
  z-index:1;
  background:rgba(255,253,250,.10);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:var(--shadow);
  border-radius:28px;
  padding:28px;
  backdrop-filter:blur(14px);
}
.hero-panel h3{margin:0 0 16px; font-size:24px}
.hero-panel ul{margin:0; padding-left:20px; color:#f6efe1}
.hero-panel li{margin:0 0 10px}
.quick-contact{
  margin-top:22px;
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.quick-contact .item{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  padding:14px 16px;
  color:#fff;
}

main section{padding:92px 0}
.section-light{background:var(--paper)}
.section-tint{background:#f7f2ea}
.section-dark{background:var(--charcoal); color:#f6efe1}
.section-dark .eyebrow, .section-dark p, .section-dark li{color:#e8dbc3}
.section-dark h2, .section-dark h3{color:#fff}

.eyebrow{
  color:var(--gold-dark);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:12px;
  margin-bottom:14px;
}
.section-head{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:36px;
  align-items:end;
  margin-bottom:34px;
}
.section-head h2{
  margin:0;
  font-size:clamp(32px,4.6vw,52px);
  line-height:1.1;
}
.section-head p{margin:0; color:var(--muted)}

.cards-2, .cards-3, .cards-4, .stats, .gallery, .process, .areas, .faq-grid{
  display:grid;
  gap:24px;
}
.cards-2{grid-template-columns:repeat(2,1fr)}
.cards-3{grid-template-columns:repeat(3,1fr)}
.cards-4{grid-template-columns:repeat(4,1fr)}
.stats{grid-template-columns:repeat(4,1fr)}
.gallery{grid-template-columns:repeat(3,1fr)}
.process{grid-template-columns:repeat(4,1fr)}
.areas{grid-template-columns:repeat(4,1fr)}
.faq-grid{grid-template-columns:repeat(2,1fr)}

.card, .stat, .gallery-card, .process-step, .faq-item, .contact-box, .notice-box{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.card, .faq-item, .contact-box, .notice-box{padding:28px}
.card h3, .faq-item h3, .process-step h3, .gallery-card h3, .contact-box h3, .notice-box h3{margin:0 0 12px; font-size:24px}
.card p, .faq-item p, .contact-box p, .notice-box p{margin:0 0 10px; color:var(--muted)}
.card ul, .contact-box ul, .notice-box ul{margin:0; padding-left:18px; color:var(--muted)}
.card li, .contact-box li, .notice-box li{margin:0 0 8px}

.feature-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px 24px;
  margin-top:18px;
}
.feature-item{
  padding:14px 16px;
  border-radius:16px;
  background:#f8f2e5;
  border:1px solid #ebddbf;
  font-size:15px;
}

.stat{
  padding:26px 22px;
  text-align:center;
}
.stat strong{display:block; font-size:40px; color:var(--gold-dark); line-height:1.1; margin-bottom:8px}
.stat span{color:var(--muted); font-size:15px}

.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:34px;
  align-items:center;
}
.visual-stack{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.placeholder-tall, .placeholder-wide, .placeholder-small{
  border-radius:28px;
  background:
   linear-gradient(135deg, rgba(176,138,46,.18), rgba(176,138,46,.03)),
   repeating-linear-gradient(135deg, rgba(255,255,255,.30) 0 12px, rgba(255,255,255,.08) 12px 24px),
   linear-gradient(180deg, #d8cec0, #f4eee4);
  border:1px solid rgba(176,138,46,.18);
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.placeholder-tall::after, .placeholder-wide::after, .placeholder-small::after{
  content:"Bildplatzhalter";
  position:absolute;
  left:18px;
  bottom:16px;
  color:#6f5d39;
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.placeholder-tall{min-height:500px}
.placeholder-wide{min-height:290px}
.placeholder-small{min-height:190px}

.gallery-card{overflow:hidden}
.gallery-thumb{
  aspect-ratio:4/3;
  background:
    linear-gradient(135deg, rgba(176,138,46,.18), rgba(176,138,46,.03)),
    linear-gradient(180deg, #ddd3c6, #f7f2ea);
  position:relative;
}
.gallery-thumb::after{
  content:"Platzhalterbild";
  position:absolute;
  left:16px;
  bottom:14px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:#6f5d39;
}
.gallery-card .copy{padding:22px}
.gallery-card p{margin:0; color:var(--muted)}

.process-step{
  padding:28px 22px;
  position:relative;
}
.step-no{
  display:inline-flex;
  width:44px; height:44px;
  border-radius:50%;
  align-items:center; justify-content:center;
  background:#f6ebd2;
  color:var(--gold-dark);
  font-weight:700;
  margin-bottom:16px;
}
.process-step p{margin:0; color:var(--muted)}

.checklist{
  list-style:none;
  padding:0;
  margin:18px 0 0;
  display:grid;
  gap:12px;
}
.checklist li{
  position:relative;
  padding-left:28px;
}
.checklist li::before{
  content:"✓";
  position:absolute;
  left:0; top:0;
  color:var(--gold-dark);
  font-weight:700;
}

.cta-band{
  padding:34px;
  border-radius:28px;
  background:linear-gradient(135deg, #1e1813, #35281b);
  color:#fff;
  box-shadow:var(--shadow);
  display:flex;
  gap:20px;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
}
.cta-band h3{margin:0; font-size:30px}
.cta-band p{margin:8px 0 0; color:#efe7d7}

.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.contact-box a{color:var(--gold-dark); text-decoration:none}
.notice-box{background:#faf5ea}

footer{
  background:#120f0c;
  color:#f3ead8;
  padding:64px 0 28px;
  margin-top:0;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr .9fr;
  gap:28px;
  margin-bottom:30px;
}
footer h3{margin:0 0 14px; font-size:22px}
footer p, footer li, footer a{color:#dbcdb3; text-decoration:none}
footer ul{margin:0; padding-left:18px}
.footer-bottom{
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.10);
  font-size:14px;
  color:#b7a98e;
}

.content-article h1{
  font-size:clamp(38px,5vw,62px);
  line-height:1.08;
  margin:0 0 18px;
}
.content-article h2{
  font-size:36px;
  line-height:1.15;
  margin:0 0 16px;
}
.content-article h3{
  font-size:26px;
  margin:34px 0 12px;
}
.content-article p{margin:0 0 16px; color:var(--muted)}
.content-article ul{margin:0 0 18px; padding-left:22px; color:var(--muted)}
.breadcrumbs{
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gold-dark);
  margin-bottom:18px;
}

.sticky-bar{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:120;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.sticky-bar a{
  min-width:190px;
  text-decoration:none;
  box-shadow:var(--shadow);
}

@media (max-width: 1100px){
  .hero-inner, .section-head, .split, .contact-grid, .footer-grid{grid-template-columns:1fr}
  .cards-4, .stats, .process, .areas{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 800px){
  .navbar{align-items:flex-start; min-height:auto; padding:18px 0}
  #main-menu ul{gap:14px}
  .cards-2, .cards-3, .cards-4, .stats, .gallery, .process, .areas, .faq-grid, .feature-list{grid-template-columns:1fr}
  .container{width:min(var(--container), calc(100% - 24px))}
  .hero-inner{min-height:auto; padding:56px 0}
  .hero h1{font-size:40px}
  .section-head h2{font-size:34px}
  .brand-copy{display:none}
  .sticky-bar{left:12px; right:12px}
  .sticky-bar a{min-width:0}
}
.ticker{
overflow:hidden;
white-space:nowrap;
position:relative;
}

.ticker-text{
display:inline-block;
padding-left:100%;
animation:tickerMove 18s linear infinite;
}

@keyframes tickerMove{

0%{
transform:translateX(0);
}

100%{
transform:translateX(-100%);
}
}
/* MENU RESET + MOBILE MENU */

@media (max-width:900px){
 .navbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: auto;
    padding: 18px 0;
  }

  .brand-copy {
    display: none !important;
  }

  .mobile-menu-toggle {
    display: block !important;
    font-size: 32px;
    background: none;
    border: none;
    cursor: pointer;
    color: #111 !important;
    padding: 8px 10px;
    line-height: 1;
    margin-left: auto;
    position: relative;
    z-index: 2001;
  }

  #main-menu {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: #fffdfa;
    padding: 20px;
    border-top: 1px solid #ddd;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    z-index: 2000;
  }

  #main-menu.menu-open {
    display: block !important;
  }

  #main-menu ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 15px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  #main-menu li {
    width: 100%;
  }

  #main-menu a {
    display: block;
    width: 100%;
    padding: 10px 0;
  }

  nav > ul {
    display: none !important;
  }
}/* ===== MOBILE MENU FINAL FIX ===== */

@media screen and (max-width: 900px) {
  header .navbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-height: auto !important;
    padding: 18px 0 !important;
    position: relative !important;
  }

  header .brand-copy {
    display: none !important;
  }

  header .mobile-menu-toggle {
    display: block !important;
    appearance: none;
    -webkit-appearance: none;
    background: #111 !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 10px;
    padding: 10px 14px !important;
    font-size: 28px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    margin-left: auto !important;
    z-index: 9999 !important;
  }

  header #main-menu {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: #fffdfa !important;
    border-top: 1px solid #ddd !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important;
    padding: 20px !important;
    z-index: 9998 !important;
  }

  header #main-menu.menu-open {
    display: block !important;
  }

  header #main-menu ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100% !important;
  }

  header #main-menu li {
    width: 100% !important;
  }

  header #main-menu a {
    display: block !important;
    width: 100% !important;
    padding: 10px 0 !important;
  }
}@media (max-width:900px){

  nav ul{
    display:none !important;
  }

  #main-menu.menu-open ul{
    display:flex !important;
    flex-direction:column !important;
  }

}/* FINAL MOBILE MENU OVERRIDE */

@media (min-width: 901px) {
  .mobile-menu-toggle {
    display: none !important;
  }

  header #main-menu {
    display: block !important;
    position: static !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border: 0 !important;
  }

  header #main-menu ul {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
}

@media (max-width: 900px) {
  header .navbar {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  header .brand-copy {
    display: none !important;
  }

  header .mobile-menu-toggle {
    display: block !important;
    background: #111 !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-size: 28px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    margin-left: auto !important;
    z-index: 9999 !important;
  }

  header #main-menu {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: #fffdfa !important;
    padding: 20px !important;
    border-top: 1px solid #ddd !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important;
    z-index: 9998 !important;
  }

  header #main-menu.menu-open {
    display: block !important;
  }

  header #main-menu ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100% !important;
  }

  header #main-menu li {
    width: 100% !important;
  }

  header #main-menu a {
    display: block !important;
    width: 100% !important;
    padding: 10px 0 !important;
  }
}/* ===== NEW HEADER / MENU FIX ===== */

.site-header{
  position:sticky;
  top:0;
  z-index:5000;
  backdrop-filter:blur(10px);
  background:rgba(255,253,250,.94);
  border-bottom:1px solid rgba(176,138,46,.16);
}

.site-header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:92px;
}

.site-logo{
  display:flex;
  align-items:center;
  gap:18px;
  text-decoration:none;
  color:inherit;
}

.site-logo img{
  height:120px;
  width:auto;
  object-fit:contain;
}

.site-brand{
  display:flex;
  flex-direction:column;
}

.site-brand strong{
  font-size:18px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.site-brand span{
  font-size:13px;
  color:var(--muted);
  letter-spacing:.06em;
}

.site-nav-desktop ul{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  gap:28px;
  align-items:center;
}

.site-nav-desktop a{
  text-decoration:none;
  font-size:15px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#2b241d;
}

.site-nav-desktop a:hover,
.site-nav-desktop a.active{
  color:var(--gold-dark);
}

.site-nav-mobile{
  display:none;
  position:relative;
}

.site-nav-mobile summary{
  list-style:none;
  cursor:pointer;
  user-select:none;
  font-size:28px;
  line-height:1;
  background:#111;
  color:#fff;
  border-radius:10px;
  padding:10px 14px;
}

.site-nav-mobile summary::-webkit-details-marker{
  display:none;
}

.site-mobile-panel{
  position:absolute;
  top:calc(100% + 12px);
  right:0;
  min-width:240px;
  background:#fffdfa;
  border:1px solid #e6ddd1;
  border-radius:16px;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
  padding:12px 16px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.site-mobile-panel a{
  text-decoration:none;
  color:#2b241d;
  padding:10px 0;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:14px;
}

.site-mobile-panel a.active,
.site-mobile-panel a:hover{
  color:var(--gold-dark);
}

@media (max-width: 900px){
  .site-header-inner{
    min-height:auto;
    padding:18px 0;
  }

  .site-brand{
    display:none;
  }

  .site-nav-desktop{
    display:none;
  }

  .site-nav-mobile{
    display:block;
    margin-left:auto;
  }
}/* MOBILE MENU FIX */

@media (max-width:900px){

nav ul{
display:none !important;
}

.mobile-menu-toggle{
display:block !important;
}

}