/* Products hub, EN + DE, scoped under .wbs-prod. Identical copy lives as
   produkte.css for the DE slug (assets are enqueued per page slug).
   Author: WOODS Business Solutions */
.wbs-prod {
  --dark:#0F0F0F; --lime:#CAF1A2; --lime-hover:#B8E08F; --blue-grey:#363C46;
  --light:#E8E8E8; --white:#FFFFFF;
  --fg1:#fff; --fg2:rgba(255,255,255,.72); --fg3:rgba(255,255,255,.52);
  --on-light1:#232323; --on-light2:rgba(35,35,35,.68); --on-light3:rgba(35,35,35,.48);
  --hair:rgba(255,255,255,.08); --hair-strong:rgba(255,255,255,.16); --hair-dark:rgba(15,15,15,.10);
  --font:'Cubron Grotesk','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --maxw:1512px; --pad:clamp(20px,5vw,40px);
  --r-md:12px; --r-lg:16px;
  --ease:cubic-bezier(.2,0,.2,1); --dur:200ms;
  --shadow-card:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.24);
  --shadow-lime:0 4px 16px rgba(202,241,162,.30);
}
.wbs-prod, .wbs-prod * {box-sizing:border-box}
.wbs-prod {margin:0;background:var(--dark);color:var(--fg1);font-family:var(--font);font-weight:300;font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
.wbs-prod img {max-width:100%;display:block}
.wbs-prod h1,.wbs-prod h2,.wbs-prod h3 {font-weight:600;margin:0;letter-spacing:-.01em;line-height:1.18;color:var(--fg1)}
.wbs-prod h1 {font-size:clamp(40px,4.6vw,60px);line-height:1.05;letter-spacing:-.02em}
.wbs-prod h2 {font-size:clamp(30px,3.2vw,42px)}
.wbs-prod h3 {font-size:clamp(22px,2vw,27px)}
.wbs-prod p {margin:0}
.wbs-prod a {color:inherit;text-decoration:none}
.wbs-prod ::selection {background:var(--lime);color:var(--dark)}
.wbs-prod :focus-visible {outline:none;box-shadow:0 0 0 2px var(--dark),0 0 0 4px var(--lime)}
.wbs-prod .wrap {max-width:var(--maxw);margin:0 auto}
.wbs-prod .eyebrow {font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);margin:0 0 20px;font-weight:600}
.wbs-prod .eyebrow--muted {color:var(--on-light3)}
.wbs-prod .section {padding:clamp(64px,8vw,104px) var(--pad)}
.wbs-prod .lead {font-weight:300;line-height:1.6;color:var(--fg2);font-size:19px}
.wbs-prod .btn {display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border:1px solid transparent;border-radius:var(--r-md);font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:all var(--dur) var(--ease)}
.wbs-prod .btn svg {width:15px;height:15px;transition:transform var(--dur) var(--ease)}
.wbs-prod .btn:hover svg {transform:translateX(3px)}
.wbs-prod .btn--primary {background:var(--lime);color:var(--dark)}
.wbs-prod .btn--primary:hover {background:var(--lime-hover);transform:translateY(-2px);box-shadow:var(--shadow-lime)}
.wbs-prod .btn--ghost {background:transparent;border-color:var(--hair-strong);color:var(--fg1)}
.wbs-prod .btn--ghost:hover {border-color:var(--lime);color:var(--lime);transform:translateY(-2px)}

/* hero */
.wbs-prod .hero {padding:clamp(56px,7vw,96px) var(--pad) clamp(48px,6vw,80px);border-bottom:1px solid var(--hair);background:linear-gradient(rgba(15,15,15,.35),rgba(15,15,15,.35)),url('https://woods.consulting/wp-content/uploads/2025/12/Rectangle-187.jpg') center/cover no-repeat var(--dark)}
.wbs-prod .hero-inner {max-width:900px;margin:0 auto;text-align:center}
.wbs-prod .hero h1 {margin-bottom:22px}
.wbs-prod .hero .lead {max-width:68ch;margin:0 auto}
.wbs-prod .hero-actions {display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}

/* section head */
.wbs-prod .sec-head {max-width:840px;margin:0 auto clamp(44px,5vw,64px);text-align:center}
.wbs-prod .sec-head h2 {margin-bottom:16px}

/* product rows */
.wbs-prod .prow {display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4vw,64px);align-items:center;padding:clamp(36px,4vw,56px) 0;border-top:1px solid var(--hair)}
.wbs-prod .prow:first-of-type {border-top:0;padding-top:0}
.wbs-prod .prow--flip .prow-text {order:2}
.wbs-prod .prow--flip .prow-media {order:1}
.wbs-prod .prow .tag {font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--lime);margin-bottom:12px}
.wbs-prod .prow h3 {margin-bottom:14px}
.wbs-prod .prow .body {color:var(--fg2);line-height:1.6;margin-bottom:18px}
.wbs-prod .prow ul {margin:0 0 24px;padding:0;list-style:none;display:grid;gap:10px}
.wbs-prod .prow li {padding-left:26px;position:relative;color:var(--fg2);line-height:1.5;font-size:15.5px}
.wbs-prod .prow li::before {content:"";position:absolute;left:0;top:7px;width:14px;height:9px;border-left:2px solid var(--lime);border-bottom:2px solid var(--lime);transform:rotate(-45deg) scale(.8)}
.wbs-prod .prow-actions {display:flex;gap:14px;flex-wrap:wrap}
.wbs-prod .prow-media {margin:0}
.wbs-prod .prow-media img {border-radius:var(--r-lg);border:1px solid var(--hair-strong);box-shadow:var(--shadow-card)}

/* spec panels */
.wbs-prod .spec {background:var(--blue-grey);border-radius:var(--r-lg);padding:clamp(24px,3vw,36px);display:grid;gap:22px;box-shadow:var(--shadow-card)}
.wbs-prod .spec-item {display:grid;gap:4px;padding-bottom:18px;border-bottom:1px solid var(--hair)}
.wbs-prod .spec-item:last-child {padding-bottom:0;border-bottom:0}
.wbs-prod .spec .v {font-weight:600;font-size:clamp(24px,2.4vw,32px);color:var(--lime);line-height:1.1}
.wbs-prod .spec .k {font-size:15px;color:var(--fg2);line-height:1.45}

/* light section: flips text, rows, buttons to on-light colors */
.wbs-prod .section--light {background:var(--light)}
.wbs-prod .section--light h2,.wbs-prod .section--light h3 {color:var(--on-light1)}
.wbs-prod .section--light .lead {color:var(--on-light2)}
.wbs-prod .section--light .eyebrow {color:var(--on-light3)}
.wbs-prod .section--light .prow {border-top-color:var(--hair-dark)}
.wbs-prod .section--light .prow .tag {color:var(--on-light3)}
.wbs-prod .section--light .prow .body,.wbs-prod .section--light .prow li {color:var(--on-light2)}
.wbs-prod .section--light .prow li::before {border-color:var(--on-light1)}
.wbs-prod .section--light .prow-media img {border-color:var(--hair-dark)}
.wbs-prod .section--light .btn--ghost {border-color:rgba(15,15,15,.24);color:var(--on-light1)}
.wbs-prod .section--light .btn--ghost:hover {border-color:var(--on-light1);color:var(--on-light1)}
.wbs-prod .section--light .cardlink {color:var(--on-light1);border-color:var(--lime)}
.wbs-prod .section--light .cardlink:hover {border-color:var(--on-light1)}

/* dark section: mid grey with raised cards */
.wbs-prod .section--dark {background:#232323}
.wbs-prod .section--dark .card {background:var(--blue-grey);box-shadow:var(--shadow-card)}
.wbs-prod .section--dark .card h3 {color:var(--fg1)}
.wbs-prod .section--dark .card p {color:var(--fg2)}
.wbs-prod .section--dark .card p a {color:var(--fg1);border-color:var(--hair-strong)}
.wbs-prod .section--dark .card p a:hover {border-color:var(--lime)}
.wbs-prod .section--dark .cards-note {color:var(--fg2)}
.wbs-prod .section--dark .cards-note a {color:var(--fg1);border-color:var(--hair-strong)}
.wbs-prod .section--dark .cards-note a:hover {border-color:var(--lime)}
.wbs-prod .cards {display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.wbs-prod .cards--two {max-width:1000px;margin:0 auto}
.wbs-prod .card {background:var(--white);border-radius:var(--r-lg);padding:28px 26px;box-shadow:0 1px 2px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.06)}
.wbs-prod .card h3 {font-size:21px;margin-bottom:12px}
.wbs-prod .card p {color:var(--on-light2);line-height:1.55;font-size:15.5px}
.wbs-prod .card p a {font-weight:600;color:var(--on-light1);border-bottom:1px solid var(--on-light3)}
.wbs-prod .card p a:hover {border-color:var(--on-light1)}
.wbs-prod .cards-note {margin-top:28px;text-align:center;color:var(--on-light2);font-size:16px}
.wbs-prod .cards-note a {font-weight:600;color:var(--on-light1);border-bottom:1px solid var(--on-light3)}
.wbs-prod .cards-note a:hover {border-color:var(--on-light1)}
.wbs-prod .card--dark {background:var(--blue-grey);box-shadow:var(--shadow-card)}
.wbs-prod .card--dark h3 {color:var(--fg1)}
.wbs-prod .card--dark p {color:var(--fg2)}
.wbs-prod .cardlink {display:inline-block;margin-top:16px;font-weight:600;font-size:15px;color:var(--lime);border-bottom:1px solid transparent;transition:border-color var(--dur) var(--ease)}
.wbs-prod .cardlink:hover {border-color:var(--lime)}

/* cta band: the page's lime moment */
.wbs-prod .band {padding:clamp(64px,8vw,104px) var(--pad);text-align:center;background:var(--lime)}
.wbs-prod .band h2 {margin-bottom:16px;color:var(--on-light1)}
.wbs-prod .band .lead {max-width:56ch;margin:0 auto 32px;color:rgba(35,35,35,.8)}
.wbs-prod .band-actions {display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.wbs-prod .band .btn--primary {background:var(--on-light1);color:var(--white)}
.wbs-prod .band .btn--primary:hover {background:#000;box-shadow:0 4px 16px rgba(15,15,15,.25)}
.wbs-prod .band .note {margin-top:22px;font-size:14px;color:rgba(35,35,35,.55)}
.wbs-prod .band .note a {color:var(--on-light1);border-bottom:1px solid rgba(35,35,35,.35)}

@media (max-width:860px){
  .wbs-prod .prow {grid-template-columns:1fr;align-items:start}
  .wbs-prod .prow--flip .prow-text {order:1}
  .wbs-prod .prow--flip .prow-media {order:2}
}