/* =========================================================
   MWE MOBILE HYGIENESTATION — Landingpage
   Design tokens
   ========================================================= */
:root{
  --ink:        #10161d;
  --steel:      #4b5b6b;
  --steel-soft: #7c8b99;
  --primary:    #1c5c9c;
  --primary-dk: #0f3b68;
  --primary-lt: #e7f0f8;
  --accent:     #14a6b3;
  --accent-dk:  #0c7d88;
  --bg:         #eef2f5;
  --surface:    #ffffff;
  --line:       #dbe2e8;
  --line-soft:  #e8edf1;

  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body:    "Inter", -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", "Courier New", monospace;

  --radius: 10px;
  --shadow-sm: 0 2px 8px rgba(16, 22, 29, .06);
  --shadow-md: 0 12px 32px rgba(16, 22, 29, .10);
  --shadow-lg: 0 24px 60px rgba(16, 22, 29, .16);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  font-size: 1rem;
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

::selection{ background: var(--accent); color:#fff; }

a{ color:inherit; text-decoration:none; }

img{ max-width:100%; display:block; }

:focus-visible{
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* -------------------- Typography helpers -------------------- */
.eyebrow{
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-dk);
  font-weight: 600;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}
.eyebrow::before{
  content:"";
  width:22px; height:2px;
  background: var(--accent);
  display:inline-block;
}

.display{
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .96;
  color: var(--primary-dk);
}
.display-hero{ font-size: clamp(2.6rem, 6vw, 4.6rem); }
.display-section{ font-size: clamp(2rem, 4vw, 2.9rem); }
.display-sub{ font-size: clamp(1.3rem, 2.4vw, 1.7rem); }

.lede{
  font-size: 1.15rem;
  color: var(--steel);
  max-width: 46ch;
}

.mono-label{
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--steel-soft);
  letter-spacing: .03em;
}

.section-pad{ padding: 5.5rem 0; }
@media (max-width: 767.98px){ .section-pad{ padding: 3.5rem 0; } }

.section-head{ margin-bottom: 3rem; }

/* -------------------- Buttons -------------------- */
.btn{
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: 999px;
  padding: .75rem 1.6rem;
  font-size: .95rem;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.btn:hover{ transform: translateY(-1px); }

.btn-primary{
  background: var(--primary);
  border-color: var(--primary);
}
.btn-primary:hover, .btn-primary:focus{
  background: var(--primary-dk);
  border-color: var(--primary-dk);
}

.btn-accent{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn-accent:hover{
  background: var(--accent-dk);
  border-color: var(--accent-dk);
  color: #fff;
  box-shadow: var(--shadow-md);
}

.btn-outline-light-line{
  background: transparent;
  border: 1.5px solid rgba(255,255,255,.55);
  color: #fff;
}
.btn-outline-light-line:hover{
  background: rgba(255,255,255,.12);
  border-color: #fff;
  color:#fff;
}

.btn-ghost-ink{
  background: transparent;
  border: 1.5px solid var(--line);
  color: var(--primary-dk);
}
.btn-ghost-ink:hover{
  border-color: var(--primary);
  background: var(--primary-lt);
  color: var(--primary-dk);
}

/* =========================================================
   NAVBAR
   ========================================================= */
.site-nav{
  background: rgba(238,242,245,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding: .55rem 0;
  transition: box-shadow .2s ease;
}
.site-nav.is-scrolled{ box-shadow: var(--shadow-sm); }

.brand-mark{
  display:flex; align-items:center; gap:.65rem;
}
.brand-mark img{ height: 60px; width:auto; border-radius: 4px; }
.brand-mark .brand-text{
  font-family: var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:1.05rem;
  color: var(--primary-dk);
  line-height:1.05;
}
.brand-mark .brand-text small{
  display:block;
  font-family: var(--font-mono);
  text-transform:none;
  font-size:.62rem;
  letter-spacing:.08em;
  color: var(--steel-soft);
  font-weight:500;
}

.nav-link{
  font-weight:600;
  font-size:.92rem;
  color: var(--steel) !important;
  padding: .5rem .9rem !important;
}
.nav-link:hover{ color: var(--primary) !important; }

.nav-phone{
  font-family: var(--font-mono);
  font-size:.85rem;
  color: var(--primary-dk);
  font-weight:600;
  white-space:nowrap;
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  background: linear-gradient(180deg, #f4f7f9 0%, var(--bg) 100%);
  overflow:hidden;
  padding-top: 3.5rem;
}
.hero::before{
  content:"";
  position:absolute; inset:auto 0 0 0; height:55%;
  background:
    radial-gradient(1200px 260px at 20% 100%, rgba(28,92,156,.08), transparent 60%),
    radial-gradient(900px 220px at 85% 100%, rgba(20,166,179,.10), transparent 60%);
  pointer-events:none;
}

.hero-badges{
  display:flex; flex-wrap:wrap; gap:.5rem; margin: 1.5rem 0;
}
.hero-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: 999px;
  padding: .4rem .85rem;
  font-size: .8rem;
  font-weight:600;
  color: var(--steel);
  box-shadow: var(--shadow-sm);
}
.hero-badge i{ color: var(--accent-dk); }

.hero-visual{
  position:relative;
  isolation:isolate;
}
.hero-visual-frame{
  position:relative;
  background: var(--surface);
  border-radius: 20px;
  border:1px solid var(--line);
  box-shadow: var(--shadow-lg);
  padding: 1.75rem;
  overflow:hidden;
}
.hero-visual-frame img{
  border-radius: 12px;
  width:100%;
  object-fit:contain;
}

/* Engineering callouts on hero image (signature element) */
.callout{
  position:absolute;
  display:flex; align-items:center; gap:.5rem;
  z-index:3;
}
.callout-dot{
  width: 26px; height:26px; flex:0 0 auto;
  border-radius:50%;
  background: var(--primary-dk);
  color:#fff;
  font-family: var(--font-mono);
  font-size:.72rem;
  font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 0 0 4px rgba(255,255,255,.9), var(--shadow-sm);
}
.callout-label{
  background: var(--ink);
  color:#fff;
  font-family: var(--font-mono);
  font-size:.72rem;
  padding: .3rem .6rem;
  border-radius: 6px;
  white-space:nowrap;
  box-shadow: var(--shadow-sm);
}
.callout--01{ top: 8%;  left: 4%; }
.callout--02{ top: 4%;  left: 46%; }
.callout--03{ top: 34%; left: 2%; flex-direction:row-reverse; }
.callout--04{ top: 58%; left: 68%; }
.callout--05{ top: 80%; left: 10%; }
.callout--03 .callout-label{ order:2; }

@media (max-width: 991.98px){
  .callout{ display:none; }
}

.hero-stat-strip{
  display:flex; flex-wrap:wrap;
  border-top:1px solid var(--line);
  margin-top: 4rem;
}
.hero-stat{
  flex:1 1 0;
  min-width: 150px;
  padding: 1.4rem 1.2rem;
  border-right:1px solid var(--line);
}
.hero-stat:last-child{ border-right:none; }
.hero-stat .num{
  font-family: var(--font-display);
  font-weight:700;
  font-size: 2rem;
  color: var(--primary-dk);
  line-height:1;
}
.hero-stat .lbl{
  font-size:.82rem;
  color: var(--steel);
  margin-top:.3rem;
}

/* =========================================================
   VORTEILE (feature cards)
   ========================================================= */
.feature-card{
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.9rem 1.6rem;
  height:100%;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.feature-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(28,92,156,.25);
}
.feature-card .icon-wrap{
  width:52px; height:52px;
  border-radius: 12px;
  background: var(--primary-lt);
  color: var(--primary);
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem;
  margin-bottom: 1.1rem;
}
.feature-card h3{
  font-family: var(--font-display);
  text-transform:uppercase;
  font-weight:700;
  font-size:1.2rem;
  color: var(--ink);
  margin-bottom:.5rem;
}
.feature-card p{ color: var(--steel); font-size:.94rem; margin:0; }

/* =========================================================
   EINSATZBEREICHE
   ========================================================= */
.usecase-card{
  position:relative;
  border-radius: var(--radius);
  overflow:hidden;
  background: var(--primary-dk);
  color:#fff;
  padding: 1.8rem 1.6rem;
  height:100%;
  min-height: 210px;
  display:flex; flex-direction:column; justify-content:flex-end;
  isolation:isolate;
}
.usecase-card::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(160deg, var(--primary) 0%, var(--primary-dk) 65%, var(--ink) 130%);
  z-index:-1;
}
.usecase-card .idx{
  font-family: var(--font-mono);
  font-size:.75rem;
  color: rgba(255,255,255,.6);
  margin-bottom: 2rem;
}
.usecase-card h3{
  font-family: var(--font-display);
  text-transform:uppercase;
  font-weight:700;
  font-size:1.25rem;
  margin-bottom:.4rem;
}
.usecase-card p{
  font-size:.88rem;
  color: rgba(255,255,255,.82);
  margin:0;
}
.usecase-card:nth-child(2)::before{ background: linear-gradient(160deg, var(--accent) 0%, var(--accent-dk) 65%, var(--ink) 130%); }

/* =========================================================
   TECHNIK IM DETAIL
   ========================================================= */
.technik-panel{
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.technik-legend{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem 1.2rem;
}
@media (max-width: 575.98px){ .technik-legend{ grid-template-columns:1fr; } }
.technik-legend li{
  display:flex; align-items:baseline; gap:.6rem;
  font-size:.92rem;
  color: var(--steel);
  border-bottom: 1px dashed var(--line-soft);
  padding-bottom:.5rem;
}
.technik-legend b{
  font-family: var(--font-mono);
  color: var(--primary);
  font-size:.8rem;
  min-width: 1.4rem;
}

.spec-table{ width:100%; border-collapse:collapse; }
.spec-table tr{ border-bottom:1px solid var(--line-soft); }
.spec-table tr:last-child{ border-bottom:none; }
.spec-table th, .spec-table td{
  text-align:left;
  padding: .85rem .25rem;
  font-size:.92rem;
  vertical-align:top;
}
.spec-table th{
  color: var(--steel-soft);
  font-weight:600;
  width: 40%;
  font-family: var(--font-mono);
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.spec-table td{ color: var(--ink); font-weight:500; }

/* =========================================================
   MODELLE / PRODUCT GRID
   ========================================================= */
.filter-bar{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin-bottom: 2.75rem;
}
.filter-btn{
  font-family: var(--font-mono);
  font-size:.78rem;
  letter-spacing:.02em;
  border:1px solid var(--line);
  background: var(--surface);
  color: var(--steel);
  padding: .5rem 1.05rem;
  border-radius: 999px;
  cursor:pointer;
  transition: all .15s ease;
}
.filter-btn:hover{ border-color: var(--primary); color: var(--primary); }
.filter-btn.is-active{
  background: var(--primary);
  border-color: var(--primary);
  color:#fff;
}

.group-title{
  font-family: var(--font-display);
  text-transform:uppercase;
  font-weight:700;
  font-size:1.35rem;
  color: var(--primary-dk);
  margin: 3rem 0 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.group-title:first-of-type{ margin-top:0; padding-top:0; border-top:none; }

.model-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  height:100%;
  display:flex; flex-direction:column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.model-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }

.model-card-media{
  background: linear-gradient(180deg, #f7f9fa, #eef2f5);
  padding: 1.1rem;
  border-bottom:1px solid var(--line-soft);
}
.model-card-media img{ aspect-ratio: 4/3.1; object-fit:contain; margin:0 auto; }

.model-card-body{ padding: 1.2rem 1.25rem 1.4rem; flex:1; display:flex; flex-direction:column; }

.model-tags{ display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:.6rem; }
.tag{
  font-family: var(--font-mono);
  font-size:.68rem;
  letter-spacing:.02em;
  text-transform:uppercase;
  padding: .2rem .55rem;
  border-radius: 5px;
  font-weight:600;
}
.tag-edelstahl{ background:#eaf1f7; color: var(--primary-dk); }
.tag-kunststoff{ background:#e9f7f4; color: var(--accent-dk); }
.tag-sensor{ background:#fdf2e3; color:#a15a0a; }
.tag-hebel{ background:#f1eefc; color:#5b3fae; }

.model-card h3{
  font-family: var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:1.15rem;
  color: var(--ink);
  margin-bottom:.15rem;
}
.model-card .subtitle{
  font-size:.82rem;
  color: var(--steel-soft);
  margin-bottom:.8rem;
}
.model-specs{
  list-style:none; padding:0; margin:0 0 1rem;
  font-size:.82rem;
  color: var(--steel);
}
.model-specs li{ padding: .18rem 0; display:flex; gap:.4rem; }
.model-specs li::before{
  content:"";
  width:5px; height:5px; border-radius:50%;
  background: var(--accent);
  margin-top:.55rem; flex:0 0 auto;
}
.model-card-footer{
  margin-top:auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:.5rem;
  padding-top: .9rem;
  border-top: 1px dashed var(--line-soft);
}
.model-artnr{
  font-family: var(--font-mono);
  font-size:.74rem;
  color: var(--steel-soft);
  line-height:1.5;
}
.model-artnr b{ color: var(--primary-dk); }
.btn-inquire{
  font-family: var(--font-mono);
  font-size:.75rem;
  font-weight:600;
  color: var(--primary);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .4rem .85rem;
  white-space:nowrap;
  transition: all .15s ease;
}
.btn-inquire:hover{ background: var(--primary); border-color: var(--primary); color:#fff; }

/* =========================================================
   BAUSATZ
   ========================================================= */
.kit-card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem;
  height:100%;
  position:relative;
}
.kit-card .kit-ribbon{
  position:absolute; top: 1.1rem; right: -0.1rem;
  background: var(--accent);
  color:#fff;
  font-family: var(--font-mono);
  font-size:.68rem;
  font-weight:700;
  padding: .3rem .7rem .3rem .9rem;
  border-radius: 5px 0 0 5px;
  letter-spacing:.03em;
}
.kit-card img{
  border-radius: 8px;
  margin-bottom: 1.1rem;
  background: linear-gradient(180deg, #f7f9fa, #eef2f5);
  padding: .75rem;
  border:1px solid var(--line-soft);
}
.kit-card h3{
  font-family: var(--font-display);
  text-transform:uppercase;
  font-weight:700;
  font-size:1.15rem;
  margin-bottom: .9rem;
}
.kit-list{
  list-style:none; padding:0; margin: 0 0 1rem;
  font-size:.85rem; color: var(--steel);
}
.kit-list li{ padding:.22rem 0; padding-left:1.1rem; position:relative; }
.kit-list li::before{
  content:"\2713";
  position:absolute; left:0; color: var(--accent-dk); font-weight:700; font-size:.78rem;
}

/* =========================================================
   CTA / KONTAKT
   ========================================================= */
.cta-band{
  background: linear-gradient(135deg, var(--primary-dk), var(--primary) 60%, var(--accent-dk));
  color:#fff;
  border-radius: 20px;
  padding: 3.2rem;
  position:relative;
  overflow:hidden;
}
.cta-band::after{
  content:"";
  position:absolute; right:-60px; top:-60px; width:280px; height:280px;
  border-radius:50%;
  background: rgba(255,255,255,.06);
}
.cta-band .display-section{ color:#fff; }

.contact-panel{
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem;
  height:100%;
}
.contact-row{
  display:flex; align-items:flex-start; gap: .9rem;
  padding: .9rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.contact-row:last-child{ border-bottom:none; }
.contact-row .ic{
  width: 38px; height:38px; flex:0 0 auto;
  border-radius: 9px;
  background: var(--primary-lt);
  color: var(--primary);
  display:flex; align-items:center; justify-content:center;
}
.contact-row .lbl{ font-size:.75rem; color: var(--steel-soft); font-family: var(--font-mono); text-transform:uppercase; letter-spacing:.03em; }
.contact-row .val{ font-weight:600; color: var(--ink); }

.form-control, .form-select{
  border-radius: 8px;
  border-color: var(--line);
  padding: .65rem .9rem;
  font-size:.95rem;
}
.form-control:focus, .form-select:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 .2rem rgba(28,92,156,.15);
}
.form-label{ font-size:.85rem; font-weight:600; color: var(--steel); margin-bottom:.35rem; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background: var(--ink);
  color: rgba(255,255,255,.72);
  padding: 3.5rem 0 2rem;
  font-size:.9rem;
}
.site-footer h4{
  font-family: var(--font-display);
  text-transform:uppercase;
  color:#fff;
  font-size:1rem;
  margin-bottom: 1rem;
}
.site-footer a{ color: rgba(255,255,255,.72); }
.site-footer a:hover{ color:#fff; }
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  font-size:.8rem;
  color: rgba(255,255,255,.5);
}

/* back to top */
.back-to-top{
  position: fixed;
  right: 1.25rem; bottom: 1.25rem;
  width: 46px; height:46px;
  border-radius:50%;
  background: var(--primary);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-md);
  opacity:0; visibility:hidden;
  transform: translateY(10px);
  transition: all .25s ease;
  z-index: 1040;
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:none; }