:root{
  /* Palette extracted from assets/logo.png */
  --gold-400:#CCB594; /* light warm gold/beige */
  --gold-500:#CAA35F; /* primary gold */
  --gold-600:#A68441; /* darker hover tone (derived) */
  --gold-700:#8A6B2F; /* deep gold for accents */
  --charcoal:#5B462C; /* dark brown/charcoal from logo */
  --charcoal-light:#7A6347; /* lighter charcoal */
  --sand-50:#F2E2C9;  /* very light background */
  --sand-100:#E3CEAD; /* hero bg tone */
  --sand-200:#CCB594; /* alt bg */
  
  /* Extended palette */
  --success:#4CAF50;
  --success-light:#81C784;
  --white-soft:rgba(255,255,255,0.95);
  --glass-bg:rgba(255,255,255,0.7);
  --glass-border:rgba(255,255,255,0.25);
  
  /* Shadows */
  --shadow:0 10px 30px rgba(0,0,0,.06);
  --shadow-md:0 4px 15px rgba(0,0,0,.08);
  --shadow-lg:0 20px 40px rgba(0,0,0,.12);
  --shadow-xl:0 25px 50px rgba(0,0,0,.15);
  --shadow-glow:0 0 20px rgba(202,163,95,.3);
  
  /* Animations */
  --transition-base:0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth:0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--charcoal);
  background:var(--sand-50);
  line-height:1.6;
}

/* Preloader */
#preloader{
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 20% 80%, rgba(202,163,95,.15) 0%, transparent 55%),
    radial-gradient(circle at 80% 20%, rgba(204,181,148,.15) 0%, transparent 55%),
    radial-gradient(circle at 40% 40%, rgba(202,163,95,.1) 0%, transparent 50%),
    linear-gradient(135deg, var(--sand-100) 0%, #ffffff 50%, var(--sand-50) 100%);
  background-size: 200% 200%;
  animation: gradient-shift 15s ease infinite;
  transition:opacity 800ms ease, transform 900ms ease, visibility 0s linear 800ms, background 600ms ease;
}
.preloader-inner{display:grid; place-items:center; padding:24px; position:relative; z-index:1}
/* Text elements in preloader */
.preloader-kicker{
  margin-bottom:12px;
  font-style:italic;
  letter-spacing:.5px;
  color:var(--charcoal);
  opacity:.9;
  animation: fade-up 600ms ease both;
  animation-delay: 120ms;
}
.preloader-title{
  text-align:center;
  margin-top:14px;
  margin-bottom:6px;
  font-weight:800;
  font-size:clamp(20px, 3.4vw, 28px);
  line-height:1.25;
  color:var(--charcoal);
  animation: fade-up 600ms ease both;
  animation-delay: 220ms;
}
.preloader-title strong{ color:inherit; }
/* Subtle rotating glow like the hero */
#preloader::before{
  content:'';
  position:absolute;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  background:radial-gradient(circle, rgba(202,163,95,.08) 0%, transparent 70%);
  animation: rotate 30s linear infinite;
}
.preloader-logo{
  width:clamp(180px, 28vw, 360px);
  height:auto;
  border-radius:24px;
  box-shadow:var(--shadow-xl), 0 0 60px rgba(202,163,95,.15);
  background:transparent;
  /* Pop-in, then continue with the same gentle float as on the hero */
  animation:
    preloader-pop 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both,
    float 6s ease-in-out 700ms infinite;
  will-change: transform, opacity;
}
@keyframes fade-up{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)}}
/* Loading indicator below the logo */
.preloader-loading{margin-top:16px; display:grid; place-items:center; gap:8px}
.loader-ring{
  width:44px; height:44px; border-radius:50%;
  border:3px solid transparent;
  border-top-color: var(--gold-600);
  border-right-color: var(--gold-400);
  animation: spin 1s linear infinite;
  filter: drop-shadow(0 2px 8px rgba(202,163,95,.25));
}
@keyframes spin{to{transform:rotate(360deg)}}
.loader-text{font-weight:600; font-size:.9rem; color:rgba(0,0,0,.65); letter-spacing:.2px}
@keyframes preloader-pop {
  0% { opacity:0; transform:translateY(8px) scale(.96); filter:blur(2px); }
  100% { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
}
/* Hide preloader after JS toggles the class */
body.preload-hide #preloader{
  opacity:0;
  transform:scale(1.02);
  visibility:hidden;
  pointer-events:none;
}
/* Hard cut option to remove any overlap (used at reveal moment) */
body.preload-cut #preloader{
  opacity:0 !important;
  visibility:hidden !important;
  transform:none !important;
  transition:none !important;
  pointer-events:none !important;
}
/* Fade out preloader only when we fully hide it, no see-through */

/* Crossfade the underlying content for smoother reveal */
body:not(.preload-hide) .site-header,
body:not(.preload-hide) main,
body:not(.preload-hide) .site-footer{
  opacity:0;
  transform:translateY(8px);
  filter:blur(2px);
  transition:opacity 700ms ease, transform 800ms ease, filter 800ms ease;
}
body.preload-fading .site-header,
body.preload-fading main,
body.preload-fading .site-footer,
body.preload-hide .site-header,
body.preload-hide main,
body.preload-hide .site-footer{
  opacity:1;
  transform:none;
  filter:none;
}
/* Full-page loader remains opaque until hidden */
/* During preload, completely hide the page structure */
body.preload-active .site-header,
body.preload-active main,
body.preload-active .site-footer{ display:none !important; }
/* Prevent scrolling while preloader is visible */
body:not(.preload-hide){
  overflow:hidden;
}

/* Fade out the preloader content (logo + text) before removing overlay */
#preloader .preloader-inner{
  transition: opacity 600ms ease, transform 600ms ease;
}
body.preloader-out #preloader .preloader-inner{
  opacity:0;
  transform: translateY(-6px) scale(0.98);
}

/* Additionally hide any other direct children except the preloader and noscript */
body.preload-active > *:not(#preloader):not(noscript){
  display:none !important;
}

/* Prepare all revealed children for a crossfade */
body.preload-prep > *:not(#preloader):not(noscript){
  opacity:0;
  transform:translateY(8px);
  filter:blur(2px);
  transition:opacity 700ms ease, transform 800ms ease, filter 800ms ease;
}
/* Then fade in smoothly */
body.preload-fading > *:not(#preloader):not(noscript){
  opacity:1;
  transform:none;
  filter:none;
}

img{max-width:100%; height:auto;}
img.placeholder{display:none}

.container{max-width:1100px; margin:0 auto; padding:0 20px}

/* Main content spacing */
main {
  padding-top: 110px; /* Fixed spacing for header - adjust if needed */
}

/* Dynamic adjustment when header height is known */
main.header-adjusted {
  padding-top: var(--header-h, 110px);
}

/* Header */
.site-header{position:fixed; top:0; left:0; right:0; z-index:30; background:rgba(255,255,255,.85); backdrop-filter:saturate(120%) blur(8px); border-bottom:1px solid rgba(0,0,0,.06);}
.site-header.scrolled{box-shadow:0 6px 24px rgba(0,0,0,.06)}
.topbar{background:linear-gradient(180deg,rgba(204,181,148,.35),rgba(204,181,148,.15)); border-bottom:1px solid rgba(0,0,0,.05); font-size:.9rem}
.topbar .container{display:flex; align-items:center; justify-content:center; padding:8px 20px}
.kicker{opacity:.85; text-align:center; font-style:italic; letter-spacing:0.5px}
.navwrap{display:flex; align-items:center; justify-content:space-between; padding:10px 0; position:relative}
.site-header .brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit}
.site-header .brand img{width:40px; height:40px; object-fit:contain; border-radius:10px; background:transparent; box-shadow:var(--shadow)}
.brand-text{font-weight:700; letter-spacing:.5px}

.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 20px}
.nav-list{display:flex; gap:18px; align-items:center; list-style:none; margin:0}
.nav-list a{color:inherit; text-decoration:none; padding:8px 10px; border-radius:8px; position:relative}
.nav-list a:hover{background:var(--sand-100)}
.nav-list a.active{background:var(--sand-100); box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}

.nav-toggle{display:none; background:none; border:0; width:40px; height:40px; border-radius:8px}
.nav-toggle span{display:block; height:2px; background:var(--charcoal); margin:7px 8px}

/* Buttons */
.btn{
  display:inline-flex; 
  align-items:center; 
  justify-content:center; 
  gap:.5rem; 
  padding:.9rem 1.4rem; 
  border-radius:14px; 
  text-decoration:none; 
  font-weight:600; 
  transition:all var(--transition-base); 
  border:1px solid transparent;
  position:relative;
  overflow:hidden;
}
.btn::before{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:0;
  height:0;
  border-radius:50%;
  background:rgba(255,255,255,.3);
  transform:translate(-50%, -50%);
  transition:width 0.6s, height 0.6s;
}
.btn:active::before{
  width:300px;
  height:300px;
}
.btn-primary{
  color:white; 
  background:linear-gradient(135deg,var(--gold-400),var(--gold-600)); 
  box-shadow:var(--shadow-md);
  border:1px solid rgba(255,255,255,.2);
}
.btn-primary:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:var(--shadow-lg), var(--shadow-glow);
  filter:brightness(1.08);
}
.btn-outline{
  color:var(--charcoal); 
  border:2px solid var(--gold-500); 
  background:transparent;
  position:relative;
}
.btn-outline::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:14px;
  background:linear-gradient(135deg,var(--gold-400),var(--gold-600));
  opacity:0;
  transition:opacity var(--transition-base);
  z-index:-1;
}
.btn-outline:hover{
  color:white;
  transform:translateY(-2px);
  border-color:transparent;
}
.btn-outline:hover::after{opacity:1}

/* Hero */
@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.hero{
  background:
    radial-gradient(circle at 20% 80%, rgba(202,163,95,.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(204,181,148,.15) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(202,163,95,.1) 0%, transparent 50%),
    linear-gradient(135deg, var(--sand-100) 0%, #ffffff 50%, var(--sand-50) 100%);
  background-size: 200% 200%;
  animation: gradient-shift 15s ease infinite;
  border-bottom:1px solid rgba(0,0,0,.06);
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:'';
  position:absolute;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  background:radial-gradient(circle, rgba(202,163,95,.08) 0%, transparent 70%);
  animation:rotate 30s linear infinite;
}
@keyframes rotate{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
/* Service detail pages: keep hero transparent to embed PNGs cleanly */
.service .hero{
  background:
    radial-gradient(circle at 20% 80%, rgba(202,163,95,.12) 0%, transparent 60%),
    radial-gradient(circle at 80% 20%, rgba(204,181,148,.10) 0%, transparent 60%),
    linear-gradient(135deg, var(--sand-50) 0%, rgba(255,255,255,0.95) 50%, var(--sand-50) 100%);
  background-size: 200% 200%;
  animation: gradient-shift 15s ease infinite;
  position:relative;
}
/* Ensure PNG transparency works */
.service .hero-icon{
  mix-blend-mode: normal;
  isolation: isolate;
}
.hero-inner{padding:72px 20px 56px}
.two-col-hero{display:grid; grid-template-columns:1.2fr .8fr; align-items:center}
.hero-logo{display:grid; place-items:center; position:relative; z-index:1}
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-10px) rotate(1deg); }
  66% { transform: translateY(5px) rotate(-1deg); }
}
.hero-logo img{
  max-width:520px; 
  width:100%; 
  height:auto; 
  border-radius:24px; 
  box-shadow:var(--shadow-xl), 0 0 60px rgba(202,163,95,.15); 
  background:transparent;
  animation: float 6s ease-in-out infinite;
  transition: all var(--transition-smooth);
}
.hero-logo img:hover{
  transform: scale(1.05) rotate(2deg);
  box-shadow:var(--shadow-xl), var(--shadow-glow);
}
.hero-icon{display:grid; place-items:center; position:relative; z-index:1}
.hero-icon img{
  max-width:420px; 
  width:100%; 
  height:auto; 
  /* Kein Hintergrund, keine Border-Radius, nur sanfter Schatten */
  background:transparent;
  border-radius:0;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.15));
  animation: float 6s ease-in-out infinite;
  transition: all var(--transition-smooth);
}
.hero-icon img:hover{
  transform: scale(1.05) rotate(3deg);
  filter:drop-shadow(0 15px 40px rgba(202,163,95,.25));
}
.hero h1{margin:.2em 0 .2em; font-size:clamp(28px,4vw,42px); line-height:1.15}
.lead{font-size:clamp(16px,2.2vw,20px); opacity:.9}
.cta{margin-top:18px; display:flex; gap:12px; flex-wrap:wrap}
.trust{margin-top:14px; display:flex; gap:8px; flex-wrap:wrap}
.chip{background:var(--sand-100); border:1px solid rgba(0,0,0,.05); padding:6px 10px; border-radius:999px}

/* Sections */
.section{padding:58px 0}
.section[id]{scroll-margin-top:calc(var(--header-h, 0px) + 12px)}
.section.alt{background:var(--sand-200)}
.section-header{margin-bottom:20px}
.section-header h2{margin:0 0 6px}

.grid{display:grid; gap:18px}
.services{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

.card{
  background:var(--glass-bg); 
  backdrop-filter:blur(10px) saturate(120%); 
  border-radius:20px; 
  padding:24px; 
  box-shadow:var(--shadow-md); 
  border:1px solid var(--glass-border); 
  position:relative;
  transition:all var(--transition-base);
  overflow:hidden;
}
.card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-400), transparent);
  opacity:0;
  transition:opacity var(--transition-base);
}
.card:hover::before{opacity:1}
.card .letter{position:absolute; top:16px; right:16px; font-weight:800; color:var(--gold-700); opacity:.15; font-size:32px; transition:all var(--transition-base)}
.card:hover .letter{opacity:.25; transform:scale(1.1)}
.card .more{display:inline-block; margin-top:12px; font-weight:600; text-decoration:none; color:var(--charcoal); position:relative; transition:color var(--transition-base)}
.card .more::after{
  content:'';
  position:absolute;
  bottom:-2px;
  left:0;
  width:0;
  height:2px;
  background:linear-gradient(90deg, var(--gold-500), var(--gold-600));
  transition:width var(--transition-base);
}
.card .more:hover{color:var(--gold-600)}
.card .more:hover::after{width:100%}
.card:hover{
  transform:translateY(-4px) scale(1.02); 
  box-shadow:var(--shadow-lg), var(--shadow-glow);
  border-color:var(--gold-400);
  background:var(--white-soft);
}

/* Media cards (gallery) */
.card.media{
  margin:0;
  padding:0;
  overflow:hidden;
  background:transparent;
  border:0;
  box-shadow:none;
  aspect-ratio:1/1;
}
.card.media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  background:transparent;
}

/* Placeholder tiles for upcoming images */
.card.placeholder{
  display:grid;
  place-items:center;
  min-height:200px;
  aspect-ratio:1/1;
  background:transparent;
  border:2px dashed rgba(0,0,0,.15);
  color:rgba(0,0,0,.45);
  font-weight:600;
}

/* Breadcrumbs */
.breadcrumbs{
  font-size:.95rem; 
  color:var(--charcoal-light);
  margin-bottom:16px;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.breadcrumbs a{
  color:var(--charcoal);
  text-decoration:none;
  padding:4px 8px;
  margin:-4px -8px;
  border-radius:6px;
  transition:all var(--transition-base);
  position:relative;
  font-weight:500;
}
.breadcrumbs a::after{
  content:'';
  position:absolute;
  bottom:2px;
  left:8px;
  right:8px;
  height:2px;
  background:var(--gold-500);
  transform:scaleX(0);
  transition:transform var(--transition-base);
}
.breadcrumbs a:hover{
  background:var(--sand-100);
  color:var(--gold-600);
}
.breadcrumbs a:hover::after{
  transform:scaleX(1);
}

/* Emoji styling (brand gradient) */
.emoji-gradient{background:linear-gradient(180deg,var(--gold-400),var(--gold-600)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; color:transparent}
.hero-emoji{display:grid; place-items:center}
.hero-emoji .emoji-gradient{font-size:clamp(96px,12vw,180px); line-height:1}
.emoji-tile{display:grid; place-items:center; min-height:180px; font-size:68px}
.card .icon{
  font-size:32px; 
  width:48px; 
  height:48px; 
  display:grid; 
  place-items:center; 
  border-radius:12px; 
  background:linear-gradient(135deg,var(--gold-400),var(--gold-600)); 
  -webkit-background-clip:text; 
  -webkit-text-fill-color:transparent;
  transition:all var(--transition-base);
  position:relative;
}
.card:hover .icon{
  transform:scale(1.15) rotate(5deg);
  filter:drop-shadow(0 4px 8px rgba(202,163,95,.3));
}
@keyframes pulse-glow {
  0%, 100% { filter:drop-shadow(0 0 8px rgba(202,163,95,.4)); }
  50% { filter:drop-shadow(0 0 16px rgba(202,163,95,.6)); }
}
.card:hover .icon{animation:pulse-glow 2s infinite}
.card h3{margin:.8rem 0 .5rem; font-size:1.15rem; font-weight:700; transition:color var(--transition-base)}
.card:hover h3{color:var(--gold-600)}

.two-col{display:grid; grid-template-columns:1.2fr .9fr; gap:22px; align-items:start}
/* Special layout for contact section - wider form */
#kontakt .two-col{grid-template-columns:0.7fr 1.3fr; gap:32px;}
.panel{background:white; border-radius:16px; padding:20px; box-shadow:var(--shadow); border:1px solid rgba(0,0,0,.05)}
.checks{padding-left:18px}
.checks li{margin:.25rem 0}

.badge-row{display:flex; flex-wrap:wrap; gap:10px}
.badge{background:white; border:1px solid rgba(0,0,0,.08); padding:8px 12px; border-radius:999px; box-shadow:var(--shadow)}
.badge.badge-alert{background:var(--gold-500); color:#fff; border-color:transparent; box-shadow:var(--shadow-glow); font-weight:600; letter-spacing:.15px}
.cta + .badge-row{margin-top:16px}

/* Statistics Section */
.stats-section{
  background:linear-gradient(135deg, var(--sand-50) 0%, white 100%);
  position:relative;
  overflow:hidden;
}
.stats-section::before{
  content:'';
  position:absolute;
  top:0;
  left:-50%;
  width:200%;
  height:100%;
  background:radial-gradient(circle at center, rgba(202,163,95,.05) 0%, transparent 70%);
  animation:rotate 40s linear infinite;
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:24px;
  margin-top:48px;
}
.stat-card{
  text-align:center;
  padding:32px 24px;
  background:var(--glass-bg);
  backdrop-filter:blur(10px);
  border-radius:20px;
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow-md);
  position:relative;
  transition:all var(--transition-base);
}
.stat-card:hover{
  transform:translateY(-8px) scale(1.05);
  box-shadow:var(--shadow-lg), var(--shadow-glow);
  background:var(--white-soft);
}
.stat-number{
  font-size:clamp(36px, 5vw, 48px);
  font-weight:800;
  background:linear-gradient(135deg, var(--gold-600), var(--gold-400));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  line-height:1;
  margin-bottom:8px;
  display:inline-block;
}
.stat-suffix{
  display:inline-block;
  font-size:clamp(24px, 3vw, 32px);
  font-weight:700;
  background:linear-gradient(135deg, var(--gold-600), var(--gold-400));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-left:4px;
}
.stat-label{
  font-size:16px;
  color:var(--charcoal);
  font-weight:600;
  margin-top:12px;
}
.stat-icon{
  position:absolute;
  top:16px;
  right:16px;
  font-size:32px;
  opacity:0.15;
  background:linear-gradient(135deg, var(--gold-400), var(--gold-600));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  transition:all var(--transition-base);
}
.stat-card:hover .stat-icon{
  opacity:0.3;
  transform:scale(1.2) rotate(15deg);
}

.testimonials-section{
  background:linear-gradient(135deg, white, var(--sand-50));
  position:relative;
}

.testimonial-slider{
  position:relative;
  overflow:hidden;
  margin-top:40px;
}

.testimonial-track{
  display:flex;
  transition:transform var(--transition-smooth);
}

.testimonial{
  flex:0 0 100%;
  padding:0 40px;
  text-align:center;
  margin:0; /* reset default figure margins to prevent horizontal drift */
}

.testimonial blockquote{
  font-style:italic;
  margin:0 auto;
  max-width:600px;
}

.testimonial figcaption{
  margin-top:12px;
  font-weight:600;
}

.video-highlights{
  background:linear-gradient(135deg, var(--sand-50), #ffffff);
}

.video-grid{
  display:grid;
  gap:24px;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
}

.video-card{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:20px;
  padding:20px;
  box-shadow:var(--shadow-md);
  display:flex;
  flex-direction:column;
  gap:16px;
  transition:transform var(--transition-base), box-shadow var(--transition-base);
}

.video-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg), var(--shadow-glow);
}

.video-wrapper{
  border-radius:16px;
  overflow:hidden;
  background:#000;
}

.video-wrapper iframe{
  width:100%;
  aspect-ratio:16 / 9;
  display:block;
  border:0;
}

.video-card p{
  margin:0;
  font-size:0.95rem;
  opacity:0.85;
}

.slider-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:var(--white-soft);
  border:none;
  width:40px;
  height:40px;
  border-radius:50%;
  box-shadow:var(--shadow);
  cursor:pointer;
  display:grid;
  place-items:center;
}

.slider-btn.prev{left:10px;}
.slider-btn.next{right:10px;}

/* Contact */
.contacts{
  list-style:none; 
  padding:0; 
  margin:24px 0; 
  display:flex; 
  flex-direction:column; 
  gap:16px;
}
.contacts li{
  display:flex;
  align-items:center;
}
.contacts a{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  background:var(--glass-bg);
  backdrop-filter:blur(10px);
  border:1px solid var(--glass-border);
  border-radius:12px;
  text-decoration:none;
  color:var(--charcoal);
  font-weight:500;
  font-size:0.95rem;
  transition:all var(--transition-base);
  box-shadow:var(--shadow-md);
  position:relative;
  overflow:hidden;
  width:100%;
}
/* Adjust contact text for narrower column */
#kontakt .contacts a div{
  flex:1;
  min-width:0;
}
#kontakt .contacts a div span{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.contacts a::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:0;
  height:100%;
  background:linear-gradient(90deg, var(--gold-400), var(--gold-500));
  opacity:0.1;
  transition:width var(--transition-base);
}
.contacts a:hover{
  transform:translateX(8px);
  box-shadow:var(--shadow-lg);
  border-color:var(--gold-400);
  color:var(--gold-600);
}
.contacts a:hover::before{
  width:100%;
}
/* Contact Icons with Gold Gradient */
.contacts .contact-icon{
  font-size:24px;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, var(--gold-400), var(--gold-600));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
/* Contact Form */
.contact-form{
  background:var(--glass-bg);
  backdrop-filter:blur(20px);
  border-radius:24px;
  padding:32px;
  box-shadow:var(--shadow-lg);
  border:1px solid var(--glass-border);
  position:relative;
  overflow:hidden;
}
.contact-form::before{
  content:'';
  position:absolute;
  top:-50%;
  right:-50%;
  width:200%;
  height:200%;
  background:radial-gradient(circle, rgba(202,163,95,.05) 0%, transparent 50%);
  animation:rotate 30s linear infinite;
  pointer-events:none;
}
.field{
  position:relative;
  margin:24px 0;
}
.field label{
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  background:linear-gradient(135deg, var(--gold-600), var(--gold-400));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight:500;
  font-size:1rem;
  pointer-events:none;
  transition:all var(--transition-base);
  padding:0 4px;
}
.field input,
.field select,
.field textarea{
  width:100%;
  padding:16px 20px;
  border-radius:14px;
  border:2px solid transparent;
  background:rgba(255,255,255,0.9);
  font:inherit;
  font-size:1rem;
  transition:all var(--transition-base);
  box-shadow:inset 0 2px 4px rgba(0,0,0,0.05);
}
.field textarea{
  min-height:120px;
  resize:vertical;
  padding-top:20px;
}
.field textarea ~ label{
  top:24px;
  transform:translateY(0);
}
/* Floating Label Animation */
.field input:focus ~ label,
.field input:not(:placeholder-shown) ~ label,
.field textarea:focus ~ label,
.field textarea:not(:placeholder-shown) ~ label{
  display:none; /* Hide labels completely when input has content */
}
/* Special handling for select - hide label completely */
.field select ~ label{
  display:none;
}
.field select option:first-child{
  color:#999;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--gold-500);
  background:white;
  box-shadow:0 0 0 4px rgba(202,163,95,0.1), inset 0 2px 4px rgba(0,0,0,0.05);
}
/* Remove browser validation styles */
.field input:invalid,
.field select:invalid,
.field textarea:invalid{
  box-shadow:none;
}
.field input:invalid:focus,
.field select:invalid:focus,
.field textarea:invalid:focus{
  box-shadow:0 0 0 4px rgba(202,163,95,0.1), inset 0 2px 4px rgba(0,0,0,0.05);
}
.field input:hover,
.field select:hover,
.field textarea:hover{
  border-color:var(--gold-400);
  background:white;
}
/* Select Arrow Styling */
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23CAA35F' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  padding-right:40px;
  color:var(--charcoal);
}
.field select:invalid{
  color:#999;
}
.field select:valid{
  color:var(--charcoal);
}
/* Submit Button Enhancement */
.contact-form .btn-primary{
  width:100%;
  padding:18px;
  font-size:1.1rem;
  margin-top:8px;
  position:relative;
  overflow:hidden;
}
.contact-form .btn-primary::after{
  content:'→';
  position:absolute;
  right:24px;
  top:50%;
  transform:translateY(-50%);
  font-size:28px;
  font-weight:bold;
  transition:all var(--transition-base);
  color:white;
  opacity:0.8;
}
.contact-form .btn-primary:hover::after{
  transform:translateY(-50%) translateX(4px) scale(1.1);
  opacity:1;
}
.hidden{display:none}

/* WhatsApp Business Widget */
.whatsapp-widget{
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:1000;
}

/* Main Button */
.whatsapp-main-btn{
  width:60px;
  height:60px;
  background:linear-gradient(135deg, #25D366, #128C7E);
  border:none;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:white;
  box-shadow:var(--shadow-lg);
  cursor:pointer;
  transition:all var(--transition-base);
  position:relative;
}
@keyframes pulse-whatsapp {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
  70% { box-shadow: 0 0 0 20px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
.whatsapp-main-btn{animation: pulse-whatsapp 2s infinite}
.whatsapp-main-btn:hover{
  transform:scale(1.1) rotate(10deg);
  box-shadow:var(--shadow-xl);
}
.whatsapp-badge{
  position:absolute;
  top:-5px;
  right:-5px;
  background:#FF5252;
  color:white;
  width:20px;
  height:20px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:bold;
  animation:bounce 2s infinite;
}
@keyframes bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

/* Chat Window */
.whatsapp-chat{
  position:absolute;
  bottom:80px;
  right:0;
  width:360px;
  background:white;
  border-radius:16px;
  box-shadow:var(--shadow-xl);
  display:none;
  flex-direction:column;
  overflow:hidden;
  animation:slideUp 0.3s ease;
}
.whatsapp-widget.active .whatsapp-chat{display:flex}
@keyframes slideUp{
  from{opacity:0; transform:translateY(20px)}
  to{opacity:1; transform:translateY(0)}
}

/* Chat Header */
.whatsapp-header{
  background:linear-gradient(135deg, #075E54, #128C7E);
  color:white;
  padding:16px;
  display:flex;
  align-items:center;
  gap:12px;
}
.whatsapp-avatar{
  width:40px;
  height:40px;
  border-radius:50%;
  background:white;
  padding:2px;
  object-fit:contain;
}
.whatsapp-info{flex:1}
.whatsapp-info h4{margin:0; font-size:16px}
.whatsapp-status{font-size:12px; opacity:0.9}
.whatsapp-close{
  background:none;
  border:none;
  color:white;
  font-size:28px;
  cursor:pointer;
  padding:0;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:50%;
  transition:background var(--transition-base);
}
.whatsapp-close:hover{background:rgba(255,255,255,0.2)}

/* Chat Body */
.whatsapp-body{
  padding:20px;
  background:#ECE5DD;
  max-height:400px;
  overflow-y:auto;
}
.whatsapp-message{
  background:white;
  padding:12px;
  border-radius:8px;
  margin-bottom:16px;
  position:relative;
  box-shadow:0 1px 2px rgba(0,0,0,0.1);
}
.whatsapp-message::before{
  content:'';
  position:absolute;
  top:0;
  left:-8px;
  border:8px solid transparent;
  border-right-color:white;
  border-left:0;
}
.whatsapp-message p{margin:4px 0}
.whatsapp-time{
  font-size:11px;
  color:#999;
  display:block;
  text-align:right;
  margin-top:4px;
}

/* Quick Replies */
.whatsapp-quick-replies{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.quick-reply{
  background:white;
  border:1px solid #25D366;
  color:#075E54;
  padding:8px 12px;
  border-radius:20px;
  text-decoration:none;
  font-size:14px;
  font-family:inherit;
  transition:all var(--transition-base);
  display:inline-flex;
  align-items:center;
  gap:4px;
  cursor:pointer;
}
.quick-reply:hover{
  background:#25D366;
  color:white;
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}

/* Start Chat Button */
.whatsapp-start-btn{
  background:linear-gradient(135deg, #25D366, #128C7E);
  color:white;
  padding:12px 20px;
  text-align:center;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:600;
  transition:all var(--transition-base);
}
.whatsapp-start-btn:hover{
  background:linear-gradient(135deg, #128C7E, #075E54);
  filter:brightness(1.1);
}

/* Footer */
.site-footer{padding:24px 0; background:#1d160d; color:#eee}
.footer-inner{display:grid; align-items:center; gap:12px; grid-template-columns:1fr auto;}
.brand-foot{display:flex; align-items:center; gap:10px}
.brand-foot img{width:28px; height:28px; border-radius:6px; background:transparent; object-fit:contain}
.footer-nav{display:flex; gap:14px}
.footer-nav a{color:#ddd; text-decoration:none}
.footer-nav a:hover{color:white}
.footer-credit{
  grid-column:1 / -1;
  text-align:center;
  font-size:.8rem;
  opacity:.7;
}
.footer-credit a{color:var(--gold-400); text-decoration:none; font-weight:600}
.footer-credit a:hover{color:var(--gold-200)}

/* FAQ blocks */
.faq-section .faq-grid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
}
.faq-section details{
  background:white;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:16px 20px;
  box-shadow:var(--shadow);
  transition:box-shadow var(--transition-base);
}
.faq-section details[open]{
  box-shadow:var(--shadow-md);
}
.faq-section summary{
  cursor:pointer;
  font-weight:600;
  font-size:1rem;
  list-style:none;
}
.faq-section summary::-webkit-details-marker{display:none}
.faq-section details p{
  margin-top:12px;
  margin-bottom:0;
  color:rgba(0,0,0,.78);
  line-height:1.55;
}
.faq-section .faq-cta{
  margin-top:18px;
  text-align:center;
  font-weight:600;
  color:var(--charcoal);
}
.faq-section .faq-cta a{
  color:var(--gold-500);
  text-decoration:none;
}
.faq-section .faq-cta a:hover{
  color:var(--gold-600);
}

/* WhatsApp Widget Mobile */
@media (max-width: 480px){
  .whatsapp-chat{
    width:calc(100vw - 40px);
    right:-12px;
    bottom:70px;
  }
  .whatsapp-body{
    max-height:300px;
  }
  .quick-reply{
    font-size:13px;
    padding:6px 10px;
  }
}

/* Responsive */
@media (max-width: 840px){
  .two-col{grid-template-columns:1fr}
  .two-col-hero{grid-template-columns:1fr}
  .hero-logo img{max-width:320px}
  .hero-icon img{max-width:320px}
  
  /* Contact form tablet */
  .contact-form{
    max-width:100%;
  }
}

@media (min-width: 980px){
  .site-header .brand img{width:56px; height:56px}
  .brand-text{font-size:1.15rem}
}

/* Touch devices - bigger click targets */
@media (hover: none) and (pointer: coarse) {
  .breadcrumbs a{
    padding:8px 12px;
    margin:-8px -12px;
    font-size:1rem;
  }
}

/* Small screens refinements */
@media (max-width: 720px){
  /* Topbar is already centered and simplified - no changes needed for mobile */
  .nav-toggle{width:44px; height:44px}
  .site-header .brand img{width:48px; height:48px}
  .hero-inner{padding:64px 16px 40px}
  .section{padding:44px 0}
  .card .letter{font-size:22px}
  .footer-inner{grid-template-columns:1fr; text-align:center}
  .footer-nav{justify-content:center; flex-wrap:wrap}
  .nav-list{min-width:min(92vw,360px)}
  
  /* Contact section mobile */
  #kontakt .two-col{
    grid-template-columns:1fr;
    gap:32px;
  }
  .contact-form{
    width:100%;
    max-width:100%;
    padding:24px;
  }
  .contact-form .field input,
  .contact-form .field select,
  .contact-form .field textarea{
    font-size:16px; /* Prevent iOS zoom */
  }
  .contacts{
    padding:0;
  }
  .contacts li a{
    padding:12px;
    flex-direction:column;
    text-align:center;
  }
  .contacts .contact-icon{
    margin-bottom:8px;
  }
}
@media (max-width: 720px){
  .nav-toggle{display:inline-block}
  .nav-list{position:absolute; right:16px; top:calc(100% + 8px); background:white; padding:10px; border-radius:14px; box-shadow:var(--shadow); border:1px solid rgba(0,0,0,.05); display:none; flex-direction:column; min-width:200px}
  .nav.open .nav-list{display:flex}
}