/* home-a1.css - gemeinsame Startseiten-Optik esd.equipment + boxic24
   Stand 2026-08-23. Quelle: Inline-<style> der esd-Startseite (cms_page 48).
   Die Palette gilt fuer beide Sites. Aendern bitte NUR hier und danach den
   Versionsstempel ?v= in cms_page 48/5/51/71/72 hochziehen, sonst haelt
   Cloudflare die alte Datei fest. */
.a1-home{--a1-navy:#0e2a47;--a1-navy-2:#14395e;--a1-orange:#f47a1f;--a1-orange-ink:#ad5716;--a1-ink:#1c2b3a;--a1-muted:#5a6b7d;--a1-line:#e2e8ef;--a1-bg:#f5f7fa;color:var(--a1-ink);font-family:inherit;line-height:1.55;-webkit-font-smoothing:antialiased}
.a1-home *,.a1-home *::before,.a1-home *::after{box-sizing:border-box}
.a1-home img{max-width:100%;height:auto;display:block}
.a1-home a{text-decoration:none}
.a1-home a:focus-visible,.a1-home button:focus-visible{outline:3px solid var(--a1-orange);outline-offset:3px;border-radius:2px}
.a1-home .a1-bleed{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.a1-home .a1-wrap{max-width:1360px;margin:0 auto;padding:0 20px}

/* ---------- HERO ---------- */
.a1-home .a1-hero{position:relative;min-height:390px;display:flex;align-items:center;overflow:hidden;background:var(--a1-navy)}
.a1-home .a1-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;z-index:0}
.a1-home .a1-hero__veil{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(9,26,45,.96) 0%,rgba(9,26,45,.90) 26%,rgba(10,30,50,.62) 52%,rgba(10,30,50,.18) 78%,rgba(10,30,50,.05) 100%)}
.a1-home .a1-hero__inner{position:relative;z-index:2;width:100%;padding:52px 0}
.a1-home .a1-hero__copy{max-width:610px}
.a1-home .a1-eyebrow{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 9px;max-width:100%;background:rgba(244,122,31,.16);border:1px solid rgba(244,122,31,.5);color:#ffd6b3;font-size:12.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:7px 14px;border-radius:999px;margin-bottom:18px}
.a1-home .a1-eyebrow b{color:#fff;font-weight:700}
.a1-home .a1-hero h1{margin:0 0 14px;color:#fff;font-size:clamp(28px,4vw,45px);line-height:1.15;font-weight:800;letter-spacing:-.5px}
.a1-home .a1-hero h1 .a1-acc{color:var(--a1-orange)}
.a1-home .a1-hero p{margin:0 0 26px;color:#cbd8e6;font-size:clamp(15px,1.35vw,17.5px);max-width:560px}
.a1-home .a1-ctas{display:flex;flex-wrap:wrap;gap:12px}
.a1-home .a1-btn{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:700;padding:14px 26px;border-radius:6px;transition:background .18s,color .18s,border-color .18s,transform .18s}
.a1-home .a1-btn--pri{background:var(--a1-orange);color:#0e2a47}
.a1-home .a1-btn--pri:hover{background:#ff8c30;color:#0e2a47;transform:translateY(-1px)}
.a1-home .a1-btn--ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55)}
.a1-home .a1-btn--ghost:hover{background:#fff;color:var(--a1-navy);border-color:#fff}
.a1-home .a1-btn svg{flex:0 0 auto}

/* ---------- STAT STRIP ---------- */
.a1-home .a1-stats{background:var(--a1-navy);border-top:1px solid rgba(255,255,255,.09)}
.a1-home .a1-stats ul{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;margin:0;padding:0}
.a1-home .a1-stats li{padding:20px 18px;text-align:center;border-left:1px solid rgba(255,255,255,.1)}
.a1-home .a1-stats li:first-child{border-left:0}
.a1-home .a1-stats b{display:block;color:#fff;font-size:clamp(15px,1.5vw,19px);font-weight:800;line-height:1.25}
.a1-home .a1-stats span{display:block;color:#9db3c8;font-size:12.5px;margin-top:4px;letter-spacing:.3px}

/* ---------- SECTIONS ---------- */
.a1-home .a1-sec{padding:54px 0}
.a1-home .a1-sec--alt{background:var(--a1-bg)}
.a1-home .a1-head{margin:0 0 8px;font-size:clamp(22px,2.6vw,31px);font-weight:800;color:var(--a1-navy);letter-spacing:-.3px}
.a1-home .a1-sub{margin:0 0 28px;color:var(--a1-muted);font-size:15.5px;max-width:760px}
.a1-home .a1-rowhead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:24px;padding-bottom:14px;border-bottom:2px solid var(--a1-line)}
.a1-home .a1-rowhead .a1-rh-t{margin:0 0 5px;font-size:clamp(19px,2.1vw,25px);font-weight:800;color:var(--a1-navy)}
.a1-home .a1-rowhead .a1-rh-d{margin:0;color:var(--a1-muted);font-size:14.5px;max-width:680px}
.a1-home .a1-rowhead .a1-rh-d a{color:var(--a1-navy);font-weight:700;border-bottom:1px solid rgba(14,42,71,.28)}
.a1-home .a1-rowhead .a1-rh-d a:hover{color:var(--a1-orange);border-bottom-color:var(--a1-orange)}
.a1-home .a1-more{white-space:nowrap;color:var(--a1-navy);font-weight:700;font-size:14.5px;display:inline-flex;align-items:center;gap:7px;padding:7px 2px}
.a1-home .a1-more:hover{color:var(--a1-orange)}
.a1-home .a1-more svg{transition:transform .18s}
.a1-home .a1-more:hover svg{transform:translateX(3px)}

/* ---------- CATEGORY GRID ---------- */
.a1-home .a1-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.a1-home .a1-cat{display:block;background:#fff;border:1px solid var(--a1-line);border-radius:9px;overflow:hidden;transition:box-shadow .2s,border-color .2s,transform .2s}
.a1-home .a1-cat:hover{box-shadow:0 12px 30px rgba(14,42,71,.14);border-color:#c8d5e2;transform:translateY(-3px)}
.a1-home .a1-cat__ph{display:block;position:relative;aspect-ratio:880/562;background:#eef2f6;overflow:hidden}
.a1-home .a1-cat__ph img{width:100%;height:100%;object-fit:cover}
.a1-home .a1-cat__b{display:block;padding:17px 19px 19px}
.a1-home .a1-cat__t{display:block;margin:0 0 6px;font-size:17px;font-weight:800;color:var(--a1-navy);line-height:1.3}
.a1-home .a1-cat__d{display:block;margin:0 0 12px;font-size:13.5px;color:var(--a1-muted);line-height:1.5}
.a1-home .a1-cat__c{font-size:13.5px;font-weight:700;color:var(--a1-orange-ink);display:inline-flex;align-items:center;gap:6px}

/* ---------- PRODUCT GRID ---------- */
.a1-home .a1-prods{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.a1-home .a1-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--a1-line);border-radius:9px;overflow:hidden;transition:box-shadow .2s,border-color .2s,transform .2s}
.a1-home .a1-card:hover{box-shadow:0 12px 30px rgba(14,42,71,.13);border-color:#c8d5e2;transform:translateY(-3px)}
.a1-home .a1-card__ph{display:block;position:relative;aspect-ratio:1/1;background:#fff;border-bottom:1px solid var(--a1-line);padding:12px}
.a1-home .a1-card__ph img{width:100%;height:100%;object-fit:contain}
.a1-home .a1-card__b{display:flex;flex-direction:column;flex:1;padding:15px 16px 16px}
.a1-home .a1-brand{display:block;font-size:11.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--a1-orange-ink);margin-bottom:7px}
.a1-home .a1-card__t{display:block;margin:0 0 9px;font-size:14.5px;font-weight:700;color:var(--a1-ink);line-height:1.4}
.a1-home .a1-art{display:block;font-size:12px;color:var(--a1-muted);margin:0 0 14px}
.a1-home .a1-art b{color:#3d4d5e;font-weight:700}
.a1-home .a1-card__c{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:13.5px;font-weight:700;color:var(--a1-navy);background:#eef2f7;border:1px solid #dae2ec;border-radius:5px;padding:10px 14px;transition:background .18s,color .18s,border-color .18s}
.a1-home .a1-card:hover .a1-card__c{background:var(--a1-navy);color:#fff;border-color:var(--a1-navy)}


/* ---------- CTA BAND ---------- */
.a1-home .a1-band{background:var(--a1-navy);background-image:linear-gradient(120deg,#0e2a47 0%,#14395e 100%)}
.a1-home .a1-band__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:26px;padding:46px 0}
.a1-home .a1-band h2{margin:0 0 9px;color:#fff;font-size:clamp(21px,2.4vw,29px);font-weight:800;letter-spacing:-.3px}
.a1-home .a1-band p{margin:0;color:#b6c8da;font-size:15.5px;max-width:620px}

@media(max-width:1024px){
  .a1-home .a1-cats{grid-template-columns:repeat(2,1fr)}
  .a1-home .a1-prods{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .a1-home .a1-hero{min-height:0}
  .a1-home .a1-hero__inner{padding:40px 0 38px}
  .a1-home .a1-eyebrow{font-size:11px;letter-spacing:.2px;gap:3px 7px;padding:6px 12px}
  .a1-home .a1-hero__veil{background:linear-gradient(180deg,rgba(9,26,45,.92) 0%,rgba(9,26,45,.86) 60%,rgba(9,26,45,.9) 100%)}
  .a1-home .a1-hero__copy{max-width:none}
  .a1-home .a1-ctas .a1-btn{flex:1 1 100%;justify-content:center}
  .a1-home .a1-stats ul{grid-template-columns:repeat(2,1fr)}
  .a1-home .a1-stats li{border-left:0;border-top:1px solid rgba(255,255,255,.1);padding:16px 12px}
  .a1-home .a1-stats li:nth-child(-n+2){border-top:0}
  .a1-home .a1-stats li:nth-child(even){border-left:1px solid rgba(255,255,255,.1)}
  .a1-home .a1-sec{padding:40px 0}
  .a1-home .a1-band__in{padding:36px 0}
}
@media(max-width:560px){
  .a1-home .a1-cats{grid-template-columns:1fr}
  .a1-home .a1-prods{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .a1-home *{transition:none !important}
}

/* --- boxic24: zwei strukturelle Abweichungen -------------------------
   1) Der Hero hat kein Foto, sondern ein SVG-Pattern.
   2) Die Kategoriebilder sind freigestellte Renderings, keine Fotos.
      Mit dem esd-Regelsatz (object-fit:cover) wuerden sie angeschnitten,
      deshalb der Modifier .a1-home--contain auf dem Wrapper. */
.a1-home .a1-hero__art{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.45;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120%22%20height%3D%22120%22%20viewBox%3D%220%200%20120%20120%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%237fb2e8%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M0%200%20H51%20V14%20H43%20V24%20H77%20V14%20H69%20V0%20H120%20V51%20H106%20V43%20H96%20V77%20H106%20V69%20H120%20V120%20H69%20V106%20H77%20V96%20H43%20V106%20H51%20V120%20H0%20V69%20H14%20V77%20H24%20V43%20H14%20V51%20H0%20Z%22%2F%3E%3Ccircle%20cx%3D%2260%22%20cy%3D%2260%22%20r%3D%2212%22%2F%3E%3Ccircle%20cx%3D%2260%22%20cy%3D%2260%22%20r%3D%225%22%20stroke-width%3D%221.4%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-repeat:repeat;background-size:120px 120px;background-position:center}
.a1-home--contain .a1-cat__ph{background:#f2f6fa;padding:14px}
.a1-home--contain .a1-cat__ph img{object-fit:contain;mix-blend-mode:multiply}