:root {
  --black: #080808; --dark: #0F0F0F; --card: #161616; --border: #252525;
  --gold: #F5B800; --gold-dark: #D4A000; --red: #CC2929;
  --cream: #FAF6EE; --muted: #888888;
}
#produkte, #galerie, #kontakt { scroll-margin-top: 104px; }
* { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; }
body { font-family:'Inter',sans-serif; background:var(--dark); color:var(--cream); overflow-x:hidden; }

nav { position:fixed; top:0; left:0; right:0; z-index:1000; background:rgba(8,8,8,0.96); backdrop-filter:blur(14px); border-bottom:1px solid var(--border); padding:0 28px; display:flex; align-items:center; justify-content:space-between; height:64px; }
.nav-logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.logo-text { font-family:'Syne',sans-serif; font-size:18px; font-weight:800; letter-spacing:1px; color:var(--cream); line-height:1.1; }
.logo-text span { color:var(--gold); display:block; font-size:11px; font-weight:600; letter-spacing:3px; }
.nav-links { display:flex; align-items:center; gap:24px; list-style:none; }
.nav-links a { text-decoration:none; color:var(--muted); font-size:14px; font-weight:500; transition:color 0.2s; }
.nav-links a:hover { color:var(--cream); }
.nav-wa { background:var(--gold); color:#000 !important; padding:8px 16px; border-radius:6px; font-weight:700 !important; transition:background 0.2s !important; }
.nav-wa:hover { background:var(--gold-dark) !important; }
.lang-toggle { display:flex; background:var(--card); border:1px solid var(--border); border-radius:20px; overflow:hidden; margin-left:14px; }
.lang-btn { padding:5px 12px; font-size:12px; font-weight:600; color:var(--muted); border:none; background:transparent; cursor:pointer; transition:all 0.2s; }
.lang-btn.active { background:var(--gold); color:#000; border-radius:20px; }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; background:none; border:none; }
.hamburger span { display:block; width:24px; height:2px; background:var(--cream); transition:all 0.3s; border-radius:2px; }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.mobile-menu { display:none; position:fixed; top:64px; left:0; right:0; background:rgba(8,8,8,0.98); backdrop-filter:blur(14px); border-bottom:1px solid var(--border); z-index:999; max-height:0; overflow:hidden; transition:max-height 0.4s ease, padding 0.3s ease; }
.mobile-menu.open { max-height:440px; padding:16px 0 24px; }
.mobile-menu a { display:block; padding:14px 28px; color:var(--cream); text-decoration:none; font-size:16px; font-weight:500; border-bottom:1px solid var(--border); transition:all 0.2s; }
.mobile-menu a:hover { background:var(--card); color:var(--gold); }
.mobile-menu a.wa-link { color:var(--gold); font-weight:700; border-bottom:none; }
.mobile-lang { display:flex; gap:10px; padding:14px 28px; }
.mobile-lang button { padding:6px 16px; border-radius:20px; border:1px solid var(--border); background:transparent; color:var(--muted); font-size:13px; font-weight:600; cursor:pointer; transition:all 0.2s; }
.mobile-lang button.active { background:var(--gold); color:#000; border-color:var(--gold); }

.ticker-wrap { background:var(--gold); overflow:hidden; white-space:nowrap; padding:9px 0; margin-top:64px; }
.ticker-track { display:inline-block; animation:ticker 32s linear infinite; }
.ticker-track span { display:inline-block; padding:0 28px; font-size:13px; font-weight:700; letter-spacing:3px; color:#000; }
.ticker-dot { color:rgba(0,0,0,0.35) !important; padding:0 4px !important; }
@keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

.hero { position:relative; height:calc(100vh - 100px); min-height:580px; display:flex; align-items:center; overflow:hidden; }
.hero-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(to right,rgba(8,8,8,0.93) 50%,rgba(8,8,8,0.25) 100%); }
.hero-content { position:relative; z-index:2; max-width:1200px; margin:0 auto; padding:0 44px; width:100%; }
.hero-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(245,184,0,0.12); border:1px solid rgba(245,184,0,0.4); border-radius:20px; padding:6px 14px; margin-bottom:22px; font-size:12px; font-weight:700; letter-spacing:2px; color:var(--gold); text-transform:uppercase; }
.hero-badge::before { content:''; width:6px; height:6px; background:var(--gold); border-radius:50%; animation:blink 1.8s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.3;transform:scale(0.6)} }
.hero h1 { font-family:'Syne',sans-serif; font-size:clamp(44px,7vw,90px); font-weight:800; line-height:0.95; color:var(--cream); margin-bottom:16px; letter-spacing:-1px; }
.hero h1 em { color:var(--gold); font-style:normal; }
.hero-sub { font-size:16px; color:var(--muted); line-height:1.7; max-width:440px; margin-bottom:34px; }
.hero-cta { display:flex; gap:14px; flex-wrap:wrap; }
.btn-gold { display:inline-flex; align-items:center; gap:10px; background:var(--gold); color:#000; padding:15px 30px; border-radius:8px; font-size:15px; font-weight:700; text-decoration:none; transition:all 0.25s; }
.btn-gold:hover { background:var(--gold-dark); transform:translateY(-2px); box-shadow:0 8px 28px rgba(245,184,0,0.35); }
.btn-outline { display:inline-flex; align-items:center; gap:10px; background:transparent; color:var(--cream); padding:15px 30px; border-radius:8px; font-size:15px; font-weight:600; text-decoration:none; border:1px solid rgba(250,246,238,0.2); transition:all 0.25s; }
.btn-outline:hover { background:rgba(250,246,238,0.08); border-color:rgba(250,246,238,0.5); }
.hero-flags { display:flex; gap:6px; margin-top:36px; flex-wrap:wrap; align-items:center; }
.hero-flags span { font-size:22px; }
.hero-flags p { font-size:13px; color:var(--muted); margin-left:8px; }

.badges { background:var(--card); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:32px 40px; }
.badges-inner { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; text-align:center; }
.badge-item { display:flex; flex-direction:column; align-items:center; gap:10px; }
.badge-icon { width:56px; height:56px; background:rgba(245,184,0,0.1); border:1px solid rgba(245,184,0,0.25); border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:26px; }
.badge-title { font-weight:700; font-size:13px; color:var(--cream); }
.badge-desc { font-size:12px; color:var(--muted); }

.section { max-width:1200px; margin:0 auto; padding:80px 44px; }
.section-eyebrow { display:inline-block; background:rgba(245,184,0,0.1); border:1px solid rgba(245,184,0,0.3); color:var(--gold); font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase; padding:5px 14px; border-radius:20px; margin-bottom:14px; }
.section-title { font-family:'Syne',sans-serif; font-size:clamp(32px,5vw,56px); font-weight:800; line-height:1.0; color:var(--cream); margin-bottom:14px; }
.section-title em { color:var(--gold); font-style:normal; }
.section-desc { color:var(--muted); font-size:15px; line-height:1.75; max-width:520px; margin-bottom:48px; }

.products-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.product-card { background:var(--card); border:1px solid var(--border); border-radius:16px; overflow:hidden; transition:all 0.3s; }
.product-card:hover { border-color:var(--gold); transform:translateY(-4px); box-shadow:0 12px 36px rgba(245,184,0,0.15); }
.product-card img { width:100%; height:200px; object-fit:cover; display:block; }
.product-card-body { padding:18px; }
.product-card-tag { font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--gold); margin-bottom:6px; }
.product-card-title { font-family:'Syne',sans-serif; font-size:20px; font-weight:700; color:var(--cream); margin-bottom:6px; }
.product-card-desc { font-size:13px; color:var(--muted); line-height:1.55; }

.exterior-section { background:#0A0A0A; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:80px 0; }
.exterior-inner { max-width:1200px; margin:0 auto; padding:0 44px; }
.exterior-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:40px; }
.exterior-img { width:100%; height:400px; object-fit:cover; border-radius:16px; border:1px solid var(--border); }

.gallery-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:40px; }
.gallery-img { width:100%; height:180px; object-fit:cover; border-radius:12px; border:1px solid var(--border); transition:all 0.3s; }
.gallery-img:hover { border-color:var(--gold); transform:scale(1.02); }

.contact-section { background:#0A0A0A; border-top:1px solid var(--border); padding:80px 0; }
.contact-inner { max-width:1200px; margin:0 auto; padding:0 44px; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.info-block { display:flex; align-items:flex-start; gap:16px; margin-bottom:28px; }
.info-icon { width:44px; height:44px; background:rgba(245,184,0,0.1); border:1px solid rgba(245,184,0,0.25); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.info-label { font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.info-value { font-size:15px; color:var(--cream); line-height:1.6; }
.info-value a { color:var(--gold); text-decoration:none; }
.info-value a:hover { text-decoration:underline; }
.map-embed { width:100%; height:360px; border-radius:16px; overflow:hidden; border:1px solid var(--border); }
.map-embed iframe { width:100%; height:100%; border:none; }
.map-consent { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:28px; text-align:center; background:var(--card); }
.map-consent p { font-size:13px; color:var(--muted); line-height:1.6; max-width:320px; margin:0; }
.map-consent p a { color:var(--gold); text-decoration:none; }
.map-consent p a:hover { text-decoration:underline; }
.map-load-button { border:1px solid var(--gold); background:transparent; color:var(--gold); padding:11px 24px; border-radius:8px; font-family:inherit; font-size:14px; font-weight:700; cursor:pointer; transition:all 0.2s; }
.map-load-button:hover { background:var(--gold); color:#000; }

.wa-cta { background:linear-gradient(135deg,#0A1A0A,#0F1F0F); border-top:1px solid var(--border); padding:64px 44px; text-align:center; }
.wa-cta h2 { font-family:'Syne',sans-serif; font-size:clamp(26px,4vw,44px); font-weight:800; color:var(--cream); margin-bottom:10px; }
.wa-cta p { color:var(--muted); font-size:15px; margin-bottom:28px; }
.wa-big { display:inline-flex; align-items:center; gap:14px; background:#25D366; color:#fff; padding:18px 36px; border-radius:50px; font-size:18px; font-weight:700; text-decoration:none; transition:all 0.25s; box-shadow:0 4px 20px rgba(37,211,102,0.4); }
.wa-big:hover { background:#20b558; transform:translateY(-2px); }

footer { background:#050505; border-top:1px solid var(--border); padding:40px 44px; text-align:center; }
.footer-logo { font-family:'Syne',sans-serif; font-size:22px; font-weight:800; letter-spacing:2px; color:var(--cream); margin-bottom:6px; }
.footer-logo span { color:var(--gold); }
.footer-sub { font-size:13px; color:var(--muted); margin-bottom:24px; }
.footer-links { display:flex; justify-content:center; gap:24px; flex-wrap:wrap; margin-bottom:24px; }
.footer-links a { color:var(--muted); text-decoration:none; font-size:13px; transition:color 0.2s; }
.footer-links a:hover { color:var(--gold); }
.footer-legal { display:flex; justify-content:center; gap:18px; flex-wrap:wrap; margin-bottom:16px; }
.footer-legal a { color:rgba(136,136,136,0.65); text-decoration:none; font-size:12px; transition:color 0.2s; }
.footer-legal a:hover { color:var(--gold); }
.footer-copy { font-size:12px; color:rgba(136,136,136,0.4); }

.floating-wa { position:fixed; bottom:28px; right:28px; z-index:900; }
.float-wa-btn { display:flex; align-items:center; gap:10px; background:#25D366; color:#fff; padding:14px 22px; border-radius:50px; font-size:14px; font-weight:700; text-decoration:none; box-shadow:0 4px 20px rgba(37,211,102,0.5); transition:all 0.25s; animation:waPulse 2.5s ease-in-out infinite; }
.float-wa-btn:hover { transform:scale(1.05); }
@keyframes waPulse { 0%,100%{box-shadow:0 4px 20px rgba(37,211,102,0.5)} 50%{box-shadow:0 4px 35px rgba(37,211,102,0.85)} }

body.lang-en [data-de] { display:none !important; }
body.lang-de [data-en] { display:none !important; }

@media (max-width:900px) {
  .nav-links { display:none; } .hamburger { display:flex; } .mobile-menu { display:block; }
  .products-grid { grid-template-columns:repeat(2,1fr); }
  .badges-inner { grid-template-columns:repeat(3,1fr); }
  .exterior-grid { grid-template-columns:1fr; }
  .gallery-grid { grid-template-columns:repeat(2,1fr); }
  .contact-inner { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  .hero h1 { font-size:9vw; letter-spacing:-0.5px; }
  nav { padding:0 16px; } .hero-content { padding:0 20px; }
  .section { padding:60px 20px; } .badges { padding:24px 20px; }
  .exterior-inner,.contact-inner { padding:0 20px; }
  .wa-cta,.footer { padding:36px 20px; }
  .products-grid { grid-template-columns:1fr; }
  .exterior-img { height:240px; }
  .float-wa-btn .label { display:none; }
  .float-wa-btn { padding:14px; border-radius:50%; width:52px; height:52px; justify-content:center; }
}