/* ========== Reset & Base ========== */
* { margin:0; padding:0; box-sizing:border-box; }

:root{ --header-h: 80px; }                /* Fallback-Höhe Header */
@media (min-width:768px){ :root{ --header-h: 88px; } }

body{
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height:1.6;
  color:#333;
  background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  padding-top:var(--header-h);            /* Platz für fixed Header */
}

/* Ankerversatz für #hash Sprünge */
section, .hero, [id]{ scroll-margin-top: calc(var(--header-h) + 12px); }

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

/* ========== Header & Navigation ========== */
.header{
  background:#ffffff;
  backdrop-filter:blur(10px);
  padding:0.75rem 0 0.9rem;
  position:fixed; top:0; left:0; right:0; z-index:1000;
  box-shadow:0 2px 20px rgba(0,0,0,.1);
}

.nav{ display:flex; align-items:center; gap:.6rem; }
.logo{ flex:0 0 auto; }
.logo img{ display:block; height:auto; }

/* Burger-Button (mobil sichtbar) */
.nav-toggle{
  appearance:none; border:0; background:transparent; width:44px; height:44px;
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  cursor:pointer; margin-left:auto;
}
.nav-toggle span{ width:24px; height:2px; background:#111; display:block; transition:.25s ease; }

/* Sprach-Flags */
.lang-switch{ display:flex; align-items:center; gap:.6rem; }
.lang-switch img{ width:24px; height:auto; display:block; }

/* Hauptnavigation – mobil als Dropdown */
.nav-links{
  list-style:none; margin:0; padding:0;
  position:absolute; left:0; right:0; top:100%;
  background:#fff; border-bottom:1px solid #e5e7eb;
  display:none; flex-direction:column; align-items:center; gap:.8rem; padding:1rem 0;
  box-shadow:0 12px 24px rgba(0,0,0,.08);
}
.nav-links.open{ display:flex; }

.nav-links a{
  text-decoration:none; color:#333; font-weight:500; transition:color .3s ease;
}
.nav-links a:hover{ color:#667eea; }

/* Desktop: Links inline, Burger ausblenden */
@media (min-width:768px){
  .nav{ gap:1rem; }
  .nav-toggle{ display:none; }
  .nav-links{
    position:static; display:flex !important; flex-direction:row; gap:1.2rem;
    background:transparent; border:0; box-shadow:none; padding:0; margin-left:1rem;
  }
  .lang-switch img{ width:20px; }
}

/* ========== Hero ========== */
.hero{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  text-align:center; color:#fff; position:relative; overflow:hidden;
}
.hero::before{
  content:''; position:absolute; inset:0;
  background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><polygon fill="rgba(255,255,255,0.1)" points="0,1000 1000,0 1000,1000"/></svg>');
  animation:float 6s ease-in-out infinite;
}
@keyframes float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }

.hero-content{ position:relative; z-index:2; max-width:950px; animation:slideUp 1s ease-out; }
@keyframes slideUp{ from{opacity:0; transform:translateY(50px)} to{opacity:1; transform:translateY(0)} }

.hero h1{
  font-size:clamp(2.5rem,5vw,4rem);
  margin-bottom:1.5rem; font-weight:700; line-height:1.2;
  text-shadow:0 2px 4px rgba(0,0,0,0.3);
}
.hero p{
  font-size:clamp(1.1rem,2vw,1.3rem);
  margin-bottom:2.5rem; opacity:.9; max-width:600px; margin-left:auto; margin-right:auto;
}

/* CTA */
.cta-button{
  display:inline-block; background:linear-gradient(45deg,#ff6b6b,#ee5a24); color:#fff;
  padding:1rem 2.5rem; text-decoration:none; border-radius:50px; font-weight:600; font-size:1.1rem;
  transition:all .3s ease; box-shadow:0 4px 15px rgba(0,0,0,.2); text-transform:uppercase; letter-spacing:1px;
}
.cta-button:hover{ transform:translateY(-3px); box-shadow:0 8px 25px rgba(0,0,0,.3); background:linear-gradient(45deg,#ee5a24,#ff6b6b); }

/* ========== Features ========== */
.features{ padding:5rem 0; background:#fff; }
.features-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:3rem; margin-top:3rem; }
.feature-card{
  text-align:center; padding:2rem; border-radius:15px; background:linear-gradient(135deg,#f8f9fa,#e9ecef);
  box-shadow:0 5px 15px rgba(0,0,0,.1); transition:transform .3s ease;
}
.feature-card:hover{ transform:translateY(-5px); box-shadow:0 10px 25px rgba(0,0,0,.15); }
.feature-icon{
  width:80px; height:80px; background:linear-gradient(45deg,#667eea,#764ba2);
  border-radius:50%; margin:0 auto 1.5rem; display:flex; align-items:center; justify-content:center; font-size:2rem; color:#fff;
}

.section-title{ text-align:center; font-size:2.5rem; margin-bottom:1rem; color:#333; }
.section-subtitle{ text-align:center; font-size:1.1rem; color:#666; max-width:600px; margin:0 auto; }

/* ========== Produkte ========== */
.products-preview{ padding:5rem 0; background:#f8f9fa; }
.products-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:2rem; margin-top:3rem; }

.product-card{
  background:#fff; border-radius:15px; padding:1.5rem; box-shadow:0 5px 15px rgba(0,0,0,.1);
  transition:all .3s ease; text-decoration:none; color:inherit; position:relative; overflow:hidden;  /* overflow hidden: Gürtel & Hosenträger */
}
.product-card:hover{ transform:translateY(-5px); box-shadow:0 10px 25px rgba(0,0,0,.15); text-decoration:none; }
.product-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(45deg,#667eea,#764ba2); }

/* Bildbox – keine Scrollbars („Streifen“) */


.product-image {
            width: 100%;
            height: 180px;
            background: linear-gradient(135deg, #fffff, #764ba2);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 2rem;
            margin-bottom: 1rem;
        }


.product-image::-webkit-scrollbar{ width:0; height:0; display:none; } /* WebKit/Chromium */

.product-image img{
  display:block;
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain;              /* skaliert ins Kästchen */
}

.product-name{
  font-size:1.1rem; font-weight:600; margin-bottom:.5rem; color:#333;
  overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2;
}
.product-description{
  font-size:.9rem; color:#666; margin-bottom:1rem;
  overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; line-height:1.4;
}
.product-price{ font-size:1.2rem; font-weight:bold; color:#667eea; margin-bottom:.5rem; }

.product-loading{ text-align:center; padding:3rem; grid-column:1 / -1; }
.loading-spinner{
  width:40px; height:40px; border:4px solid #f3f3f3; border-top:4px solid #667eea; border-radius:50%;
  animation:spin 1s linear infinite; margin:0 auto 1rem;
}
@keyframes spin{ 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }

.products-cta{ text-align:center; margin-top:3rem; }

/* ========== Testimonials ========== */
.testimonials{ padding:5rem 0; background:linear-gradient(135deg,#667eea,#764ba2); color:#fff; }
.testimonial-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(350px,1fr)); gap:2rem; margin-top:3rem; }
.testimonial{
  background:rgba(255,255,255,.1); padding:2rem; border-radius:15px; backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.2);
}
.testimonial-text{ font-style:italic; font-size:1.1rem; margin-bottom:1rem; line-height:1.6; }
.testimonial-author{ font-weight:600; }

/* ========== CTA Section ========== */
.cta-section{ padding:5rem 0; background:#f8f9fa; text-align:center; }
.cta-section h2{ font-size:2.5rem; margin-bottom:1rem; color:#333; }
.cta-section p{ font-size:1.2rem; color:#666; margin-bottom:2rem; max-width:600px; margin-left:auto; margin-right:auto; }

/* ========== Footer ========== */
.footer{ background:#333; color:#fff; padding:2rem 0; text-align:center; }
.footer-links{ display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; }
.footer-links a{ color:#fff; text-decoration:none; transition:color .3s ease; }
.footer-links a:hover{ color:#667eea; }

/* ========== Scroll Indicator ========== */
.scroll-indicator{
  position:fixed; bottom:2rem; left:50%; transform:translateX(-50%);
  color:#fff; animation:bounce 2s infinite; z-index:1000;
}
@keyframes bounce{
  0%,20%,50%,80%,100%{ transform:translate(-50%,0) }
  40%{ transform:translate(-50%,-10px) }
  60%{ transform:translate(-50%,-5px) }
}

/* ========== Responsive ========== */
@media (max-width:768px){
  .hero{ padding:0 1rem; }
  .features-grid, .testimonial-grid{ grid-template-columns:1fr; }
  .section-title{ font-size:2rem; }
}

/* Pulse-Effekt */
.pulse{ animation:pulse 2s infinite; }
@keyframes pulse{ 0%{ transform:scale(1) } 50%{ transform:scale(1.05) } 100%{ transform:scale(1) } }