:root{
  /* Bildgrößen zentral steuerbar (sorgt fürs saubere Einpassen) */
  --hero-aspect: 21/9;   /* breiter Hero */
  --card-aspect: 4/3;    /* höhere Produktkarten */
  --kv-aspect: 21/9;     /* breite Service/Wholesale-Bilder */

  --accent:#1d9bf0; --brand:#2d3e50; --text:#0b1220; --muted:#5a6b80;
  --light:#f6f9fc; --card:#fff; --line:#e8eef5;
  --shadow:0 10px 25px rgba(2,8,23,.08);
}

*{box-sizing:border-box}
html{scroll-padding-top:80px}
html,body{
  margin:0; padding:0; background:var(--light); color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.small{font-size:.9rem;color:#6b7c90}

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

/* Header / Nav */
.site-header{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid #e5e9ef;box-shadow:var(--shadow)}
.nav{display:flex;align-items:center;gap:16px;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;color:#223140;letter-spacing:.02em}
.brand img{height:28px;width:auto}
.links{display:flex;gap:10px}
.links a{font-weight:600;color:#223140;padding:6px 8px;border-radius:10px}
.right{display:flex;align-items:center;gap:10px}

.langswitch{display:flex;gap:6px}
.langswitch .lang{
  border:1px solid #e1e7ee;background:#fff;padding:.35rem .6rem;border-radius:10px;
  cursor:pointer;font-weight:600
}
.langswitch .lang.active{background:var(--accent);color:#fff;border-color:var(--accent)}

.btn{display:inline-block;border-radius:12px;padding:.7rem 1rem;font-weight:700;border:1px solid #d7dde4;background:#fff}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.badge{display:inline-flex;gap:10px;background:#e8f4ff;color:#0a4a7c;padding:.35rem .7rem;border-radius:999px;font-weight:700}

/* Hero */
.hero{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:28px; align-items:start; padding:36px 0 20px;
}
.hero h1{font-size:40px;line-height:1.1;margin:.2rem 0}
.hero p{font-size:1.08rem;color:#4d5b6c}
.actions{display:flex;gap:10px;margin-top:14px}
.stats{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px}
.stat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 14px;min-width:180px;box-shadow:var(--shadow)}

.image,.imgframe{border-radius:18px;overflow:hidden;box-shadow:var(--shadow);background:#fff;border:1px solid var(--line)}
.img-hero{display:block;width:100%;height:auto;aspect-ratio:var(--hero-aspect);object-fit:cover;object-position:100% center}

/* Sections */
.section{padding:36px 0}
.section h2{font-size:28px;margin:0 0 12px}
.lead{color:#4a596a;margin-top:0}

/* Cards / Grid */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);
  display:flex;flex-direction:column;height:100%;
}
.card img{width:100%;height:auto;aspect-ratio:var(--card-aspect);object-fit:cover;object-position:center}
.card .body{padding:14px;display:flex;flex-direction:column;gap:8px;flex:1}
.card h3{margin:0 0 4px;font-size:18px}

/* KV (Bild + Text) */
.kv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
.img-kv{display:block;width:100%;height:auto;aspect-ratio:var(--kv-aspect);object-fit:cover;object-position:center}
.kv ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.kv li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;box-shadow:var(--shadow)}

/* Partners */
.partners{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.partner{
  background:#fff;border:1px dashed #d7e1ea;height:72px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;color:#7a8ea5;font-weight:600
}

/* Contact */
.contact{display:grid;grid-template-columns:1.2fr 1fr;gap:18px}
form{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;display:grid;gap:10px;box-shadow:var(--shadow)
}
label{font-weight:600}
input,textarea{width:100%;padding:.7rem;border:1px solid #d9e2ea;border-radius:10px;background:#fbfdff}
.form-actions{margin-top:6px}

/* Footer */
.site-footer{background:#0f172a;color:#c9d6e8;margin-top:24px}
.footer-inner{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:18px;padding:24px 0}
.footer-inner a{color:#eaf1ff}
.legal{border-top:1px solid #26344a;color:#a6b5c9;padding:10px 0;font-size:.92rem}

/* Responsive */
@media (max-width:990px){
  .hero{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr}
  .partners{grid-template-columns:repeat(3,1fr)}
}

/* Safety */
main,section,.container,.card,.kv,.partners{min-width:0}

/* === Großhandel: Bild größer === */
#grosshandel .kv{
  /* mehr Platz für die Bildspalte rechts */
  grid-template-columns: minmax(0,0.85fr) minmax(0,1.15fr);
}

#grosshandel .img-kv{
  /* mehr Höhe nur hier (statt globalem --kv-aspect) */
  aspect-ratio: 6/5;        /* Alternativen: 4/3 (noch höher), 16/9 (etwas höher) */
  object-fit: cover;
  object-position: center 45%;  /* Ausschnitt leicht nach oben/unten schieben: 0% = oben, 100% = unten */
}