/* IDIAG website — brand: garnet + IDIAG orange, warm grey, beige; Neo Sans Std */

@font-face { font-family: "Neo Sans"; src: url("fonts/NeoSansStd-Light.otf") format("opentype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Neo Sans"; src: url("fonts/NeoSansStd-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Neo Sans"; src: url("fonts/NeoSansStd-Medium.otf") format("opentype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Neo Sans"; src: url("fonts/NeoSansStd-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }

:root {
  --garnet: #641d14;
  --garnet-deep: #4a150e;
  --garnet-ink: #2e1410;
  --orange: #ff6900;
  --orange-logo: #eb650f;
  --orange-dark: #d95700;
  --grey: #928981;
  --grey-dark: #525354;
  --ink: #333333;
  --beige: #e9e7e1;
  --beige-light: #f8f8f8;
  --line: #d6d4ce;
  --white: #ffffff;
  --max: 1180px;
  --gutter: 24px;
  --radius: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Neo Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--orange-dark); }
a:hover { color: var(--garnet); }
h1, h2, h3, h4 { font-weight: 500; line-height: 1.15; margin: 0 0 .5em; color: var(--garnet); letter-spacing: .01em; }
h1 { font-size: clamp(38px, 6vw, 72px); font-weight: 700; text-transform: uppercase; }
h2 { font-size: clamp(28px, 3.6vw, 44px); text-transform: uppercase; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }
p { margin: 0 0 1em; }
strong { font-weight: 500; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.eyebrow { font-size: 14px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); margin-bottom: 14px; display: block; }
.lead { font-size: 21px; color: var(--grey-dark); max-width: 760px; }
.accent { color: var(--orange); }
.muted { color: var(--grey); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--white); padding: 8px 12px; }

/* ---------- header ---------- */
.site-header { background: var(--garnet); color: var(--white); position: sticky; top: 0; z-index: 50; box-shadow: 0 1px 0 rgba(255,255,255,.08); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }
.logo img { height: 34px; width: auto; }
.nav { display: flex; align-items: center; gap: 26px; }
.nav a { color: var(--white); text-decoration: none; font-size: 15px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; opacity: .88; padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { opacity: 1; border-bottom-color: var(--orange); color: var(--white); }
.nav .btn { opacity: 1; border: 0; padding: 10px 18px; }
.nav .lang-switch { font-size: 13px; opacity: .7; }
.site-header .header-demo { display: none; }
@media (max-width: 359px) { .header-demo-long { display: none; } }
.nav-toggle { display: none; background: none; border: 0; color: var(--white); font: inherit; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; padding: 10px 0; }
@media (max-width: 1080px) {
  .nav-toggle { display: block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--garnet-deep); flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 20px; }
  .nav.open { display: flex; }
  .nav a { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .nav .btn { margin-top: 14px; text-align: center; }
  /* "Book a demo" stays visible next to MENU when the navigation folds away (it stays in the menu too) */
  .site-header .wrap { gap: 14px; }
  .logo { flex: none; }
  .site-header .header-demo { display: inline-block; margin-left: auto; font-size: 13px; letter-spacing: .06em; line-height: 1.2; padding: 9px 14px; white-space: nowrap; }
  .nav-toggle { white-space: nowrap; }
}

/* ---------- buttons ---------- */
.btn { display: inline-block; background: var(--orange); color: var(--white); text-decoration: none; font-weight: 500; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; padding: 15px 26px; border-radius: var(--radius); transition: background .15s; }
.btn:hover { background: var(--orange-dark); color: var(--white); }
.btn-ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.btn-ghost:hover { background: rgba(255,255,255,.08); color: inherit; }
.on-light .btn-ghost:hover { background: rgba(100,29,20,.06); }
.btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.link-arrow { font-weight: 500; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--orange-dark); }
.link-arrow::after { content: " \2192"; }

/* ---------- sections ---------- */
.section { padding: 96px 0; }
.section-tight { padding: 64px 0; }
.bg-beige { background: var(--beige); }
.bg-light { background: var(--beige-light); }
.bg-garnet { background: var(--garnet); color: rgba(255,255,255,.9); }
.bg-garnet-deep { background: var(--garnet-deep); color: rgba(255,255,255,.9); }
.bg-garnet h1, .bg-garnet h2, .bg-garnet h3, .bg-garnet h4,
.bg-garnet-deep h1, .bg-garnet-deep h2, .bg-garnet-deep h3, .bg-garnet-deep h4 { color: var(--white); }
/* white cards on a dark section keep the normal heading colour */
.bg-garnet .card h3, .bg-garnet-deep .card h3 { color: var(--garnet); }
.bg-garnet .lead, .bg-garnet-deep .lead { color: rgba(255,255,255,.82); }
.section-head { margin-bottom: 48px; max-width: 820px; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--garnet); color: var(--white); padding: 96px 0 0; }
.hero .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 40px; align-items: center; }
.hero h1 { color: var(--white); margin-bottom: 24px; }
.hero .lead { color: rgba(255,255,255,.85); }
.hero-spine { position: absolute; left: -40px; top: -60px; width: 260px; opacity: .22; pointer-events: none; }
.hero-text { position: relative; padding-left: 170px; padding-bottom: 96px; }
.hero-media { justify-self: center; align-self: end; }
.hero-media img { max-height: 520px; width: auto; }
.hero-caption { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); text-align: center; padding: 14px 0 24px; border-top: 1px solid rgba(255,255,255,.18); margin-top: 8px; }
.hero-sub { padding: 72px 0 96px; }
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-text { padding-left: 0; padding-bottom: 24px; }
  .hero-spine { display: none; }
  .hero-media img { max-height: 340px; }
}

/* page hero (inner pages) */
.page-hero { background: var(--garnet); color: var(--white); padding: 88px 0 80px; position: relative; overflow: hidden; }
.page-hero h1 { color: var(--white); font-size: clamp(34px, 5vw, 60px); }
.page-hero .lead { color: rgba(255,255,255,.85); }
.page-hero .hero-spine { left: auto; right: -30px; top: -80px; width: 220px; opacity: .16; }
@media (max-width: 900px) { .page-hero .hero-spine { display: none; } }

/* ---------- grids & cards ---------- */
.grid { display: grid; gap: 28px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 56px; align-items: center; }

.card { background: var(--white); border-radius: var(--radius); padding: 32px; box-shadow: 0 1px 0 var(--line), 0 0 0 1px rgba(100,29,20,.06); display: flex; flex-direction: column; gap: 6px; }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--grey-dark); font-size: 17px; }
.card .link-arrow { margin-top: auto; padding-top: 8px; }
.card-tag { font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
.card-icon { width: 56px; height: 56px; margin-bottom: 12px; }
a.card { text-decoration: none; transition: background .15s, box-shadow .15s; }
a.card h3, a.card p, a.card .link-arrow { transition: color .15s; }
.card-dark, a.card:hover, a.card:focus-visible { background: var(--garnet); color: rgba(255,255,255,.88); box-shadow: none; }
.card-dark h3, a.card:hover h3, a.card:focus-visible h3 { color: var(--white); }
.card-dark p, a.card:hover p, a.card:focus-visible p { color: rgba(255,255,255,.82); }
.card-dark .link-arrow, a.card:hover .link-arrow, a.card:focus-visible .link-arrow { color: var(--orange); }
.card-photo { padding: 0; overflow: hidden; }
.card-photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.card-photo .card-body { padding: 26px 30px 30px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-media { position: relative; display: block; }
/* play mark on the video cards, top right (rack, lamp or window in the picture; not the laptop, faces or name tags):
   with a mouse only on hover, on touch screens (no hover) always there and smaller */
.card-play { position: absolute; right: 12px; top: 12px; width: 48px; height: 48px; border-radius: 50%; background: var(--orange); box-shadow: 0 6px 18px rgba(46,20,16,.35); opacity: 0; transform: scale(.85); transition: opacity .15s, transform .15s; pointer-events: none; }
.card-play::after { content: ""; position: absolute; left: 39%; top: 50%; transform: translateY(-50%); border-style: solid; border-width: 9px 0 9px 14px; border-color: transparent transparent transparent var(--white); }
a.card:hover .card-play, a.card:focus-visible .card-play { opacity: 1; transform: none; }
@media (hover: none) {
  .card-play { width: 40px; height: 40px; opacity: .92; transform: none; }
  .card-play::after { border-width: 7px 0 7px 11px; }
}
#video .section-head .lead, .card-photo .card-body p { text-wrap: pretty; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 40px; }
.fact { border-top: 2px solid var(--orange); padding-top: 18px; }
.fact h3 { font-size: 18px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.fact p { font-size: 16px; margin: 0; }
.bg-garnet .fact p, .bg-garnet-deep .fact p { color: rgba(255,255,255,.78); }
.fact-icon { display: flex; gap: 18px; align-items: flex-start; }
.fact-icon img { width: 56px; flex: none; }

.steps { counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 28px; }
.step { position: relative; padding-top: 58px; }
.step::before { counter-increment: step; content: counter(step); position: absolute; top: 0; left: 0; width: 42px; height: 42px; border-radius: 50%; background: var(--orange); color: var(--white); font-weight: 500; display: grid; place-items: center; }
.step h3 { font-size: 19px; }
.step p { font-size: 16px; color: var(--grey-dark); }
.bg-garnet .step p { color: rgba(255,255,255,.8); }
/* steps with a picture above number and title (fitness.html #check): 4 columns, tablet 2 × 2, mobile 1 */
.steps-media { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps-media .step { padding-top: 0; display: flex; flex-direction: column; }
.steps-media .step::before { position: static; order: 1; margin: 20px 0 14px; flex: none; }
.steps-media .step > * { order: 2; }
.steps-media .step-img { order: 0; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); box-shadow: 0 0 0 1px rgba(100,29,20,.06); }
@media (max-width: 1080px) { .steps-media { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 28px; } }
@media (max-width: 600px) { .steps-media { grid-template-columns: minmax(0, 1fr); } }
/* five steps without pictures in one row (sleep-ergonomics-wellness.html #ablauf): tablet 2 columns, mobile 1 */
.steps-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1080px) { .steps-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 28px; } }
@media (max-width: 600px) { .steps-5 { grid-template-columns: minmax(0, 1fr); } }
/* business case calculator (sleep-ergonomics-wellness.html #rechnung): fields side by side, on mobile one below the other */
.calc { gap: 24px; }
.calc h3 { margin: 0; }
.calc-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 20px 24px; }
.calc-fields label { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; font-size: 15px; color: var(--grey-dark); }
.calc-fields input { font: inherit; font-size: 20px; color: var(--garnet); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; width: 100%; }
.calc-fields input:focus, .calc-fields input[aria-invalid="true"] { outline: 2px solid var(--orange); outline-offset: 1px; border-color: var(--orange); }
.calc-results .fact h3 { font-size: 30px; letter-spacing: .02em; }
.calc-results .fact p { color: var(--grey-dark); }

/* explainer video with chapter bar */
.explainer-media { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--garnet-ink); }
.explainer-media video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.explainer-play { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; background: rgba(46,20,16,.12); cursor: pointer; display: grid; place-items: center; }
.explainer-play[hidden] { display: none; }
.explainer-play span { position: relative; width: clamp(64px, 9vw, 96px); aspect-ratio: 1; border-radius: 50%; background: var(--orange); box-shadow: 0 8px 24px rgba(46,20,16,.35); transition: background .15s, transform .15s; }
.explainer-play span::after { content: ""; position: absolute; left: 39%; top: 50%; transform: translateY(-50%); border-style: solid; border-width: .62em 0 .62em 1.05em; border-color: transparent transparent transparent var(--white); font-size: clamp(16px, 2.2vw, 24px); }
.explainer-play:hover span { background: var(--orange-dark); transform: scale(1.04); }
.explainer-play:focus-visible { outline: none; }
.explainer-play:focus-visible span { outline: 3px solid var(--white); outline-offset: 4px; }
/* narrow screens: a smaller play button, so it does not cover the picture (e.g. the laptop in the posters) */
@media (max-width: 600px) { .explainer-play span { width: 48px; } .explainer-play span::after { font-size: 12px; } }
.chapters { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.chapter { display: flex; flex-direction: column; justify-content: flex-start; width: 100%; height: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; background: rgba(255,255,255,.06); border: 0; border-top: 3px solid rgba(255,255,255,.22); border-radius: 0 0 var(--radius) var(--radius); padding: 14px 16px 16px; transition: background .15s, border-color .15s; }
.chapter:hover { background: rgba(255,255,255,.1); }
.chapter:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.chapter-when { display: block; font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.chapter-title { display: block; font-size: 18px; font-weight: 500; color: var(--white); margin: 4px 0 6px; }
.chapter-text { display: block; font-size: 15px; line-height: 1.45; color: rgba(255,255,255,.78); }
.chapter.is-active { border-top-color: var(--orange); background: rgba(255,105,0,.12); }
.chapter.is-active .chapter-when { color: var(--orange); }
@media (max-width: 760px) {
  .chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .chapter { padding: 12px 12px 14px; }
  .chapter-when { font-size: 12px; letter-spacing: .08em; }
  .chapter-title { font-size: 16px; }
  .chapter-text { font-size: 14px; }
}
/* five chapters (sleep-ergonomics-wellness.html #video): one row on desktop; where four chapters go to
   two columns, five go to one column, so no chapter is left alone in a half row */
.chapters--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 760px) { .chapters--5 { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .explainer-play span, .chapter, .card-play { transition: none; } .explainer-play:hover span { transform: none; } }

.checks { list-style: none; padding: 0; margin: 0 0 24px; }
.checks li { padding: 8px 0 8px 32px; position: relative; border-bottom: 1px solid var(--line); }
.checks li::before { content: ""; position: absolute; left: 4px; top: 16px; width: 12px; height: 7px; border-left: 2px solid var(--orange); border-bottom: 2px solid var(--orange); transform: rotate(-45deg); }
.bg-garnet .checks li { border-bottom-color: rgba(255,255,255,.14); }

.price { font-size: 64px; font-weight: 700; color: var(--garnet); line-height: 1; }
.price small { font-size: 16px; font-weight: 400; color: var(--grey); display: block; margin-top: 8px; letter-spacing: .06em; text-transform: uppercase; }

.quote { border-left: 3px solid var(--orange); padding: 4px 0 4px 26px; }
.quote p { font-size: 21px; color: var(--garnet); font-weight: 400; }
.quote cite { font-style: normal; font-size: 15px; color: var(--grey); }

.figure { background: var(--white); border-radius: var(--radius); padding: 22px; box-shadow: 0 0 0 1px rgba(100,29,20,.06); }
.figure figcaption { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); margin-top: 12px; }
/* example training plan as a printout (fitness.html, from result to training plan): table on desktop,
   on mobile every exercise on its own with the two week columns side by side */
.plan-figure { margin: 0; }
.plan-figure figcaption { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); margin-top: 14px; }
.plan-sheet { background: var(--white); border-radius: var(--radius); padding: 28px 30px 24px; box-shadow: 0 1px 0 var(--line), 0 0 0 1px rgba(100,29,20,.06); }
.plan-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 16px; border-bottom: 2px solid var(--garnet); }
.plan-title { margin: 0; font-size: 24px; }
.plan-sub { margin: 4px 0 0; font-size: 15px; color: var(--grey-dark); }
.plan-label { flex: none; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--grey-dark); background: var(--beige); border-radius: 999px; padding: 4px 10px; }
.plan-finding { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.plan-finding p { margin: 0; font-size: 16px; color: var(--grey-dark); }
.plan-finding strong { color: var(--garnet); font-weight: 500; }
.plan-scores { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--grey-dark); }
.plan-scores b { margin-left: 4px; font-size: 18px; font-weight: 500; letter-spacing: 0; color: var(--garnet); }
.plan-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.4; }
.plan-table th, .plan-table td { text-align: left; vertical-align: top; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line); }
.plan-table thead th { padding: 14px 12px 6px 0; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); }
.plan-table .plan-goal-row th { padding: 18px 0 4px; font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-dark); }
.plan-table tbody th[scope="row"] { width: 46%; font-weight: 500; color: var(--garnet); }
.plan-table tbody th span { display: block; font-size: 13px; font-weight: 400; color: var(--grey); }
.plan-table td { color: var(--grey-dark); }
.plan-foot { margin-top: 18px; padding-top: 14px; border-top: 2px solid var(--garnet); }
.plan-foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 15px; font-weight: 500; color: var(--garnet); }
.plan-foot p { margin: 8px 0 0; font-size: 13px; color: var(--grey); }
@media (max-width: 520px) {
  .plan-sheet { padding: 22px 18px 20px; }
  .plan-head { flex-direction: column-reverse; gap: 10px; }
  .plan-table, .plan-table tbody { display: block; }
  .plan-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .plan-table tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .plan-table .plan-goal-row { display: block; padding: 0; border: 0; }
  .plan-table th, .plan-table td { padding: 0; border: 0; }
  .plan-table .plan-goal-row th { display: block; padding: 16px 0 0; }
  .plan-table tbody th[scope="row"] { grid-column: 1 / -1; width: auto; padding-bottom: 6px; }
  .plan-table td::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); }
}
figure { margin: 0; }

/* plan adapter (fitness.html #plan-adapter): example result + equipment tabs */
.pa { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 32px; align-items: start; }
.pa-result { background: var(--white); border-radius: var(--radius); border-top: 3px solid var(--orange); padding: 22px 20px; box-shadow: 0 0 0 1px rgba(100,29,20,.06); display: flex; flex-direction: column; gap: 16px; }
.pa-scores { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pa-score { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pa-ring-wrap { position: relative; width: 100%; max-width: 72px; }
.pa-ring-wrap svg { display: block; width: 100%; height: auto; }
.pa-ring-bg, .pa-ring { fill: none; stroke-width: 6; }
.pa-ring-bg { stroke: var(--beige); }
.pa-ring { stroke: var(--orange); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 32px 32px; }
.pa-score-val { position: absolute; inset: 0; display: grid; place-items: center; font-size: 20px; font-weight: 700; color: var(--garnet-ink); }
.pa-score-label { margin-top: 6px; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--grey-dark); }
.pa-finding { border: 2px solid var(--orange); border-radius: var(--radius); background: rgba(255,105,0,.06); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.pa-finding-label { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-dark); }
.pa-finding strong { font-size: 22px; font-weight: 700; line-height: 1.15; text-transform: uppercase; color: var(--garnet-ink); }
.pa-finding span:last-child { font-size: 15px; color: var(--grey-dark); }
.pa-goals { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.pa-goals-label { flex-basis: 100%; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--grey-dark); }
.pa-goal-tag { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--orange-dark); }
.pa-small { margin: 0; font-size: 13px; line-height: 1.5; color: var(--grey); }
.pa-pick { margin: 0 0 10px; font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--grey-dark); }
.pa-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.pa-tab { font: inherit; font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--garnet); background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.pa-tab:hover { border-color: var(--garnet); }
.pa-tab[aria-selected="true"] { background: var(--garnet); border-color: var(--garnet); color: var(--white); }
.pa-tab:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.pa-panels { display: grid; }
.pa-panel { grid-area: 1 / 1; background: var(--white); border-radius: var(--radius); border-top: 3px solid var(--orange); padding: 8px 24px 20px; box-shadow: 0 0 0 1px rgba(100,29,20,.06); min-width: 0; }
.pa-panel[hidden] { display: none; }
.pa-panel:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.pa-goal { margin: 16px 0 4px; font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-dark); }
.pa-slots { list-style: none; margin: 0; padding: 0; }
.pa-slot { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pa-panel .pa-slots:last-child .pa-slot:last-child { border-bottom: 0; }
.pa-fig { margin: 0; background: var(--beige-light); border-radius: var(--radius); padding: 4px; }
.pa-fig svg { display: block; width: 100%; height: auto; }
.pa-slot-body p { margin: 0; }
.pa-ex { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.pa-ex strong { font-size: 18px; font-weight: 500; color: var(--garnet); }
.pa-dose { font-size: 14px; font-weight: 500; color: var(--orange-dark); white-space: nowrap; }
.pa-device { margin-top: 4px !important; font-size: 16px; line-height: 1.45; color: var(--ink); }
.pa-type { display: inline-block; margin-left: 6px; vertical-align: 2px; font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--grey-dark); background: var(--beige); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.pa-note { margin: 14px 0 0; font-size: 13px; color: var(--grey); }
/* swap one exercise (fitness.html #plan-adapter, script at the end of the section) */
.pa-type-alt { color: var(--orange-dark); background: rgba(255,105,0,.12); }
.pa-swap { display: inline-flex; align-items: center; min-height: 40px; margin-top: 8px; font: inherit; font-size: 14px; font-weight: 500; line-height: 1.3; text-align: left; color: var(--orange-dark); background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; cursor: pointer; transition: background .15s, border-color .15s; }
.pa-swap:hover { border-color: var(--orange); }
.pa-swap:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.pa-swap[aria-pressed="true"] { color: var(--garnet); background: var(--beige-light); }
.pa-swap-note { margin-top: 28px; }
/* crossfade: the outgoing panel fades out on top of the incoming one; slots that change fade in */
.pa-panels.is-switching .pa-panel { transition: opacity .2s ease; }
.pa-panel.is-leaving { opacity: 0; pointer-events: none; z-index: 1; }
.pa-panel .pa-slot.is-entering { opacity: 0; }
.pa-panel .pa-slot { transition: opacity .2s ease; }
/* exercise figures from the Idiag exercise catalog, coloured with the site tokens */
.pa-fig .floor { stroke: var(--line); stroke-width: 2; }
.pa-fig .mach { stroke: var(--grey); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pa-fig .mach-fill { fill: var(--white); stroke: var(--grey); stroke-width: 2.5; }
.pa-fig .stack { fill: var(--line); }
.pa-fig .limb { stroke: var(--garnet-ink); stroke-linecap: round; stroke-linejoin: round; fill: none; }
.pa-fig .limb-soft { stroke: var(--grey); stroke-linecap: round; stroke-linejoin: round; fill: none; }
.pa-fig .body-fill { fill: var(--garnet-ink); }
.pa-fig .soft-fill { fill: var(--grey); }
.pa-fig .grip { fill: var(--orange); }
.pa-fig .cable { stroke: var(--orange); stroke-width: 1.6; }
.pa-fig .path-guide { stroke: var(--orange); stroke-width: 1.5; fill: none; stroke-dasharray: 4 5; opacity: .7; }
.pa-fig .roller { fill: rgba(255,105,0,.14); stroke: var(--orange); stroke-width: 2; }
.pa-fig .wall { stroke: var(--grey); stroke-width: 5; stroke-linecap: round; }
/* desktop: the example result stays next to the plan while scrolling (header is 76px high and sticky) */
@media (min-width: 901px) { .pa-result { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 100px); } }
@media (max-width: 900px) { .pa { grid-template-columns: minmax(0, 1fr); } .pa-result { max-width: 520px; } }
@media (max-width: 560px) {
  .pa-panel { padding: 4px 14px 14px; }
  .pa-slot { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
  .pa-ex strong { font-size: 16px; }
  .pa-device { font-size: 15px; }
  .pa-type { display: table; margin: 4px 0 0; }
  .pa-tab { font-size: 14px; padding: 7px 13px; }
  .pa-swap { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .pa-panels.is-switching .pa-panel, .pa-panel .pa-slot, .pa-tab { transition: none; } }

/* FAQ */
.faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq summary { cursor: pointer; font-weight: 500; color: var(--garnet); font-size: 19px; list-style: none; position: relative; padding-right: 36px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: -2px; color: var(--orange); font-size: 26px; font-weight: 400; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin: 12px 0 0; color: var(--grey-dark); }


/* notice */
.notice { background: var(--beige-light); border-left: 3px solid var(--grey); padding: 16px 20px; font-size: 15px; color: var(--grey-dark); }

/* CTA band */
.cta { text-align: center; }
.cta .lead { margin: 0 auto; }
.cta .btns { justify-content: center; }

/* ---------- footer ---------- */
.site-footer { background: var(--garnet-ink); color: rgba(255,255,255,.72); font-size: 15px; padding: 72px 0 32px; }
.site-footer a { color: rgba(255,255,255,.72); text-decoration: none; }
.site-footer a:hover { color: var(--white); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 40px; }
.footer-grid h4 { color: var(--white); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 14px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 8px; }
.footer-grid address { font-style: normal; line-height: 1.7; }
.footer-logo img { height: 30px; width: auto; margin-bottom: 16px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.14); margin-top: 56px; padding-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-size: 14px; }
.footer-bottom a + a { margin-left: 20px; }
.footer-note { font-size: 13px; color: rgba(255,255,255,.5); max-width: 760px; margin-top: 20px; }

/* prose (legal pages) */
.prose { max-width: 820px; }
.prose h2 { font-size: 26px; text-transform: none; margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }

/* solutions dropdown */
.dropdown { position: relative; }
.dropdown-label::after { content: " \25BE"; font-size: 12px; }
.dropdown-menu { display: none; position: absolute; left: -18px; top: 100%; min-width: 250px; background: var(--garnet-deep); padding: 10px 18px; border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 12px 24px rgba(0,0,0,.18); }
.dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: flex; flex-direction: column; }
.dropdown-menu a { padding: 10px 0; text-transform: none; letter-spacing: .02em; font-size: 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.dropdown-menu a:last-child { border-bottom: 0; }
@media (max-width: 1080px) {
  .dropdown-label { display: none !important; }
  .dropdown-menu { display: flex; flex-direction: column; position: static; padding: 0; background: none; box-shadow: none; min-width: 0; }
  .dropdown-menu a { font-size: 15px; text-transform: uppercase; letter-spacing: .06em; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
}


/* Stripe buy button */
.stripe-buy { margin: 8px 0 0; }

/* product photo at the top of a card (e.g. the Orbbec Astra 2) */
.product-img { width: 100%; max-width: 420px; height: auto; margin: 0 auto 18px; display: block; }

/* schematic hero illustration (camera + laptop): uses the full column width */
.hero-media { width: 100%; }
.hero-media img.hero-illustration { width: 100%; max-width: 480px; max-height: none; height: auto; display: block; margin: 0 auto; }

/* Contact form (contact.html #form) */
.contact-layout { align-items: start; }
.contact-form { display: flex; flex-direction: column; gap: 16px; background: var(--white); border-radius: var(--radius); padding: 32px; box-shadow: 0 1px 0 var(--line), 0 0 0 1px rgba(100,29,20,.06); }
.contact-form label { display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--grey-dark); }
.contact-form input, .contact-form select, .contact-form textarea { font: inherit; font-size: 17px; color: var(--garnet); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; width: 100%; }
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus, .contact-form [aria-invalid="true"] { outline: 2px solid var(--orange); outline-offset: 1px; border-color: var(--orange); }
.form-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.contact-form .form-check { flex-direction: row; align-items: flex-start; gap: 10px; }
.contact-form .form-check input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--orange); }
.contact-form .btn { align-self: flex-start; border: 0; cursor: pointer; font-family: inherit; }
.contact-form .btn[disabled] { opacity: .6; cursor: default; }
.form-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-size: 16px; color: var(--grey-dark); margin: 0; }
.form-ok { color: var(--garnet); font-weight: 500; }

/* Customer references: count-up numbers and dot-matrix world map (build.py {{ref_*}}, {{world_map}}) */
.ref-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 32px; }
.ref-stat { border-top: 2px solid var(--orange); padding-top: 16px; }
.ref-num, .ref-plus { font-size: clamp(40px, 6vw, 60px); font-weight: 500; line-height: 1; color: var(--garnet); font-variant-numeric: tabular-nums; }
.ref-plus { color: var(--orange); margin-left: 2px; }
.ref-stat p { margin: 10px 0 0; font-size: 16px; color: var(--grey-dark); }
.ref-map { margin-top: 48px; }
.world-map { display: block; width: 100%; height: auto; }
.wm-land { fill: #d2cfc7; }
.wm-mark { fill: var(--orange); fill-opacity: .78; stroke: var(--white); stroke-width: 1; transform-box: fill-box; transform-origin: center; }
.refs-anim .wm-mark { transform: scale(0); opacity: 0; transition: transform .5s cubic-bezier(.3, 1.4, .6, 1), opacity .3s; transition-delay: calc(var(--i) * 35ms); }
.refs-anim.is-in .wm-mark { transform: scale(1); opacity: 1; }
.ref-note { margin: 28px 0 0; font-size: 13px; color: var(--grey); max-width: 820px; }
@media (prefers-reduced-motion: reduce) { .refs-anim .wm-mark { transition: none; transform: none; opacity: 1; } }

/* complete kits on the pricing page: two-currency prices fit on one line */
#kits .price { font-size: 48px; }

/* price breakdown under a kit price: hardware + license first year + renewal */
.kit-split { display: grid; grid-template-columns: auto auto; justify-content: start; column-gap: 24px; row-gap: 4px; margin-top: 16px; font-size: 15px; color: var(--grey); }
.kit-split span:nth-child(even) { font-weight: 500; color: var(--garnet); }

/* three options side by side (pricing #kits, fitness #price): long two-currency prices fit the narrow cards */
#kits .options .price, .options .price { font-size: 36px; }
.options .kit-split { grid-template-columns: 1fr; row-gap: 0; }
.options .kit-split span:nth-child(even) { margin-bottom: 8px; }

/* fitness.html hero with the studio illustration (hero-fitness-studio.svg): light, picture right and bleeding off,
   text left on the calm wall; on mobile the picture follows the text */
.hero-scene { background: #f3efea; color: var(--garnet-ink); padding: 0; min-height: 620px; display: flex; align-items: center; }
.hero-scene .wrap { display: block; width: 100%; }
.hero-scene .hero-text { padding: 88px 0; max-width: 600px; position: relative; z-index: 1; }
.hero-scene h1 { color: var(--garnet); font-size: clamp(36px, 4.2vw, 58px); }
.hero-scene .lead { color: var(--grey-dark); }
.hero-scene-img { position: absolute; right: 0; bottom: 0; height: 100%; width: auto; max-width: 60%; object-fit: cover; object-position: left bottom;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16%); mask-image: linear-gradient(to right, transparent 0, #000 16%); pointer-events: none; }
.hero-facts { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 15px; letter-spacing: .04em; color: var(--grey-dark); }
.hero-facts li { display: flex; align-items: center; gap: 8px; }
.hero-facts li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); flex: none; }
@media (max-width: 1180px) { .hero-scene .hero-text { max-width: 470px; } .hero-scene-img { max-width: 54%; } }
@media (max-width: 900px) {
  .hero-scene { display: block; min-height: 0; }
  .hero-scene .hero-text { padding: 56px 0 8px; max-width: none; }
  .hero-scene-img { position: static; display: block; width: 100%; height: auto; max-width: none; -webkit-mask-image: none; mask-image: none; }
}
/* three steps with real screens (fitness.html #how): screenshots of different shapes, shown whole on white */
.steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.steps-3 .step-img { aspect-ratio: 4 / 3; object-fit: contain; background: var(--white); padding: 12px; }
@media (max-width: 1080px) { .steps-3 { grid-template-columns: minmax(0, 1fr); max-width: 560px; } }
/* fitness.html #price: the two-camera kit as a line below the two options; #support add-on list */
.kit-more { margin-top: 28px; font-size: 18px; color: var(--garnet); }
.addons { list-style: none; margin: 12px 0 16px; padding: 0; }
.addons li { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.addons li:last-child { border-bottom: 0; }
.addons strong { color: var(--garnet); font-weight: 500; }
.addons span { color: var(--garnet); white-space: nowrap; }
.addons small { grid-column: 1 / -1; color: var(--grey-dark); font-size: 15px; }

/* fitness.html hero with the studio photo (hero-fitness-photo.webp, 21:9): full width, text on the bright window side;
   a light veil on the left keeps the text readable; on mobile the cropped photo (people) follows the text */
.hero-scene-photo { min-height: 640px; }
.hero-photo { position: absolute; inset: 0; display: block; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 60%; display: block; }
.hero-scene-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(246,244,240,.95) 0, rgba(246,244,240,.86) 36%, rgba(246,244,240,0) 56%); }
.hero-scene-photo .wrap { position: relative; z-index: 1; }
@media (max-width: 1180px) {
  .hero-scene-photo { display: block; min-height: 0; }
  .hero-scene-photo .hero-text { padding: 56px 0 28px; max-width: 640px; }
  .hero-scene-photo::after { display: none; }
  .hero-photo { position: static; }
  .hero-photo img { height: auto; aspect-ratio: 1584 / 672; }
}
@media (max-width: 900px) { .hero-photo img { aspect-ratio: 900 / 658; } }

/* corporate-health.html: the people stand further left in this photo, so on desktop the photo is a block on the
   right (cropped to the measuring scene) that fades into the background; the text sits on the calm surface */
@media (min-width: 1181px) {
  .hero-photo-right .hero-photo { left: auto; width: 60%; }
  .hero-photo-right .hero-photo img { object-position: 74% 50%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
  .hero-photo-right::after { display: none; }
  .hero-photo-right .hero-text { max-width: 560px; }
  .hero-photo-right h1 { font-size: clamp(34px, 3.3vw, 48px); }
}

/* sleep-ergonomics-wellness.html: the lying customer reaches far left in the photo, so the text column is narrower */
@media (min-width: 1181px) { .hero-text-narrow .hero-text { max-width: 510px; } }

/* Back Week break-even calculator (fitness.html #business-case): option and currency as radio cards, fields with
   help text below the input, a hint line for missing or invalid entries. The German page calculates in euros only,
   so the currency choice is hidden there. */
.calc-choice { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px 16px; }
.calc-choice legend { font-size: 15px; color: var(--grey-dark); margin-bottom: 10px; padding: 0; }
.calc-choice label { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: baseline; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); cursor: pointer; }
.calc-choice label span { color: var(--garnet); font-weight: 500; }
.calc-choice label small { grid-column: 2; color: var(--grey-dark); font-size: 14px; }
.calc-choice input { accent-color: var(--orange); width: 18px; height: 18px; margin: 0; align-self: center; }
.calc-choice label:has(input:checked) { border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); }
.calc-choice input:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.calc-currency { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 220px)); }
:lang(de) .calc-currency { display: none; }
.calc-field { display: flex; flex-direction: column; gap: 8px; }
.calc-field label { display: block; font-size: 15px; color: var(--grey-dark); }
.calc-field input { font: inherit; font-size: 20px; color: var(--garnet); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; width: 100%; }
.calc-field input:focus, .calc-field input[aria-invalid="true"] { outline: 2px solid var(--orange); outline-offset: 1px; border-color: var(--orange); }
.calc-help { font-size: 14px; color: var(--grey); margin: 0; }
.calc-hint { margin: 0; min-height: 1.5em; color: var(--garnet); font-size: 15px; }

/* plan adapter (fitness.html #plan-adapter), desktop: label and tabs form their own row above the plan, so the
   result card on the left starts level with the plan panel (the plan column's children join the .pa grid) */
@media (min-width: 901px) {
  .pa { row-gap: 0; }
  .pa-plan { display: contents; }
  .pa-pick { grid-column: 2; grid-row: 1; }
  .pa-tabs { grid-column: 2; grid-row: 2; }
  .pa-panels { grid-column: 2; grid-row: 3; }
  .pa-note { grid-column: 2; grid-row: 4; }
  .pa-result { grid-column: 1; grid-row: 3 / span 2; align-self: start; }
}

/* Back Week calculator sliders: label left, current value right; a slider without a value yet (no preset) is grey */
.calc-label { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.calc-value { font-size: 22px; font-weight: 500; color: var(--garnet); white-space: nowrap; }
.calc-sliders input[type="range"] { width: 100%; margin: 6px 0 2px; accent-color: var(--orange); height: 28px; cursor: pointer; }
.calc-sliders input[type="range"]:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 4px; }
.calc-sliders input[type="range"].is-unset { accent-color: var(--grey); opacity: .7; }
/* the three sliders share rows: label, slider and help text each line up across the columns (subgrid);
   browsers without subgrid keep the normal stacked fields */
@supports (grid-template-rows: subgrid) {
  .calc-sliders { grid-auto-rows: auto; row-gap: 0; }
  .calc-sliders .calc-field { display: grid; grid-row: span 3; grid-template-rows: subgrid; gap: 0; align-content: start; }
  .calc-sliders .calc-label { align-self: end; padding-bottom: 6px; }
  .calc-sliders input[type="range"] { align-self: center; }
  .calc-sliders .calc-help { align-self: start; padding-top: 6px; padding-bottom: 20px; }
}