/* ==========================================================================
   Smart-Meter-Adapter — design system
   Palette and typography follow xdevelop.at: white/red/gray, Poppins.
   No framework, no build step. Sections:
     1. Tokens      2. Reset      3. Typography   4. Layout
     5. Buttons     6. Cards      7. Header/nav   8. Footer
     9. Hero       10. Sections  11. Tables      12. Forms
    13. Wizard     14. Accordion 15. Utilities   16. Print
   ========================================================================== */

/* 1. Tokens ============================================================== */

/* Poppins, self-hosted (SIL Open Font License 1.1) — no Google Fonts request.
   Split latin / latin-ext so most visitors only download the ~8 KB latin cut. */

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/poppins-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/poppins-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Brand. #FF2C10 on white is 3.9:1 — large text and UI chrome only.
     --brand-dark is the accessible variant for small text and links. */
  --brand: #ff2c10;
  --brand-dark: #d42107;
  --brand-darker: #a81905;
  --brand-tint: #fff1ee;

  /* Ink and structure */
  --ink: #1e293b;
  --body: #3c4754;
  --muted: #67768e;
  --faint: #89919a;

  --line: #eceff3;
  --line-strong: #d8dee7;
  --surface: #f2f5f7;
  --bg: #fafafa;
  --white: #fff;

  /* Status */
  --ok: #17795e;
  --ok-tint: #e7f5f0;
  --warn: #8a5a00;
  --warn-tint: #fdf3e0;
  --info-tint: #eef4fb;
  --info: #1a5fa8;

  /* Type */
  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  /* Metrics. Two content widths only: the page container and the reading
     column inside it. Anything else invites the layout to drift. */
  --wrap: 1180px;
  --measure: 52rem;
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 16px;

  --gap: 1.5rem;
  --section-y: 5rem;

  --shadow-sm: 0 1px 2px rgba(30, 41, 59, .06), 0 1px 3px rgba(30, 41, 59, .04);
  --shadow: 0 2px 4px rgba(30, 41, 59, .04), 0 8px 24px rgba(30, 41, 59, .07);
  --shadow-lg: 0 4px 8px rgba(30, 41, 59, .05), 0 20px 48px rgba(30, 41, 59, .11);

  --header-h: 72px;
}

/* 2. Reset =============================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 2px;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: .75rem 1.25rem;
  background: var(--ink);
  color: #fff;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* 3. Typography ========================================================== */

h1, h2, h3, h4 {
  margin: 0 0 .6em;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.02em;
  text-wrap: balance;
  /* German compounds ("Schnittstellenplatinen", "Kundenschnittstelle") can
     exceed a narrow card, so let the browser hyphenate and, failing that,
     break rather than overflow. */
  hyphens: auto;
  overflow-wrap: break-word;
}

h1 { font-size: clamp(2rem, 1.35rem + 2.7vw, 3.25rem); }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.25rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + .45vw, 1.375rem); }
h4 { font-size: 1.0625rem; }

p { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand-dark); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--brand-darker); }

strong, b { font-weight: 600; color: var(--ink); }
small { font-size: .875rem; }

code, kbd, samp {
  font-family: var(--mono);
  font-size: .875em;
  background: var(--surface);
  padding: .12em .38em;
  border-radius: 4px;
  color: var(--ink);
}

pre {
  margin: 0 0 1.15rem;
  padding: 1.15rem 1.25rem;
  background: var(--ink);
  color: #e7ecf3;
  border-radius: var(--radius);
  overflow-x: auto;
  font-size: .8125rem;
  line-height: 1.6;
}
pre code { background: none; padding: 0; color: inherit; font-size: inherit; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

.lead {
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  line-height: 1.6;
  color: var(--muted);
}

.eyebrow {
  display: inline-block;
  margin-bottom: .85rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--brand-dark);
}

ul, ol { margin: 0 0 1.15rem; padding-left: 1.35rem; }
li { margin-bottom: .4rem; }
li:last-child { margin-bottom: 0; }

/* Checkmark list */
.list-check { list-style: none; padding-left: 0; }
.list-check li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: .55rem;
}
.list-check li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: .55rem;
  height: .3rem;
  border-left: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(-45deg);
}

/* 4. Layout ============================================================== */

/* The site has exactly one page width. Every section container is .wrap, so the
   left edge of the content is identical on every page and never shifts as you
   navigate. Blocks that need a shorter line length use .measure *inside* it and
   stay left-aligned — re-centring them at a narrower width is what made the
   layout appear to jump between pages. */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* Reading column: long-form text, forms and the wizard. Left-aligned, so it
   starts on the same vertical line as the page heading above it. */
.measure { max-width: var(--measure); }

/* .measure sits on the container itself for convenience. It must not shrink
   the container — .wrap centres itself with margin-inline:auto, so a narrower
   container would drift toward the middle and move the left edge. Cap the
   children instead: the frame stays put, the text column stays readable. */
.wrap.measure { max-width: var(--wrap); }
.wrap.measure > * { max-width: var(--measure); }

/* Deliberately symmetric blocks — section intros, closing CTAs, the 404 — are
   centred across the full width, which leaves the frame intact. */
.wrap.center > * { margin-inline: auto; }

.section { padding-block: var(--section-y); }
.section-tight { padding-block: 3rem; }
.section-surface { background: var(--surface); }
.section-bg { background: var(--bg); }
.section-ink { background: var(--ink); color: #cbd4e0; }
.section-ink h2, .section-ink h3 { color: #fff; }

.section-head { max-width: 46rem; margin-bottom: 3rem; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p:last-child { margin-bottom: 0; }

.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.split-wide { grid-template-columns: 1.15fr .85fr; }

/* A grid item's automatic minimum size is its content's min-content width, so
   a nowrap table inside one refuses to shrink and pushes the page wider than
   the viewport — even though the table has its own scroll container. */
.grid > *, .split > * { min-width: 0; }

@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  :root { --section-y: 3.25rem; }
  .grid-2, .grid-3, .grid-4, .split, .split-wide { grid-template-columns: 1fr; }
}

/* 5. Buttons ============================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, transform .08s;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }

.btn-secondary {
  background: var(--white);
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn-secondary:hover { border-color: var(--brand); color: var(--brand-dark); }

.btn-ghost { background: transparent; color: var(--brand-dark); padding-inline: .35rem; }
.btn-ghost:hover { color: var(--brand-darker); text-decoration: underline; }

.btn-on-ink {
  background: transparent;
  border-color: rgba(255, 255, 255, .32);
  color: #fff;
}
.btn-on-ink:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; }

.btn[disabled], .btn[aria-disabled='true'] {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-lg { padding: 1rem 1.9rem; font-size: 1rem; }
.btn-sm { padding: .5rem 1rem; font-size: .875rem; }
.btn-block { display: flex; width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
}

/* 6. Cards =============================================================== */

.card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
}
.card > :last-child { margin-bottom: 0; }
.card-hover { transition: box-shadow .18s, border-color .18s, transform .18s; }
.card-hover:hover { box-shadow: var(--shadow); border-color: var(--line-strong); transform: translateY(-2px); }
.card-flush { padding: 0; overflow: hidden; }
.card-accent { border-top: 3px solid var(--brand); }

.card-media { background: var(--surface); aspect-ratio: 4 / 3; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: contain; padding: 1.25rem; }

/* Flex column and flex:1 so .push-bottom can pin the call to action to the
   bottom, keeping buttons aligned across cards with different text lengths. */
.card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.75rem;
}

.card-title { margin-bottom: .5rem; }
.card-text { color: var(--muted); font-size: .9375rem; }

.icon-badge {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1.15rem;
  border-radius: var(--radius-sm);
  background: var(--brand-tint);
  color: var(--brand-dark);
  flex: none;
}
.icon-badge svg { width: 1.4rem; height: 1.4rem; }

/* Numbered step */
.step-num {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 1.15rem;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  font-size: 1.0625rem;
}

/* Price block */
.price {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
  margin: .35rem 0 1rem;
}
.price-value { font-size: 1.875rem; font-weight: 600; color: var(--ink); letter-spacing: -.02em; }
.price-note { font-size: .8125rem; color: var(--faint); }

/* 7. Header / nav ======================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.brand:hover { color: var(--ink); }
.brand-mark { width: 1.75rem; height: 1.75rem; flex: none; }
.brand-sub { color: var(--brand); }

.nav { margin-left: auto; }
.nav-list {
  display: flex;
  align-items: center;
  gap: .15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* The global `li { margin-bottom: .4rem }` is for prose lists. In a flex row
   with align-items:center the margin box is what gets centred, so every item
   except the last (zeroed by li:last-child) sat 3px higher — the last nav item
   visibly dropped below the rest. Horizontal lists must clear it. */
.nav-list li { margin: 0; }
.nav-link {
  display: block;
  padding: .45rem .5rem;
  border-radius: var(--radius-sm);
  font-size: .875rem;
  font-weight: 500;
  color: var(--body);
  text-decoration: none;
  white-space: nowrap;
}
.nav-link:hover { background: var(--surface); color: var(--ink); }
.nav-link[aria-current='page'] { color: var(--brand-dark); }

.header-actions {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-left: .5rem;
}

.lang-switch {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  font-size: .8125rem;
  font-weight: 500;
}
.lang-switch a, .lang-switch span {
  padding: .3rem .55rem;
  text-decoration: none;
  color: var(--muted);
  background: var(--white);
}
.lang-switch a:hover { background: var(--surface); color: var(--ink); }
.lang-switch .is-active { background: var(--ink); color: #fff; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle svg { width: 1.25rem; height: 1.25rem; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded='true'] .icon-close { display: block; }
.nav-toggle[aria-expanded='true'] .icon-open { display: none; }

/* The primary nav carries eleven items. Measured at its natural width it needs
   just under 1300px, so the hamburger takes over below that rather than at a
   round breakpoint — otherwise the last item pushes the page into a horizontal
   scroll on 1280px displays. */
@media (max-width: 1300px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: .75rem 1.25rem 1.25rem;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .nav.is-open { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-link { padding: .7rem .5rem; border-radius: 0; border-bottom: 1px solid var(--line); }
  .header-inner { position: relative; }
  .header-actions { margin-left: auto; }
}

/* 8. Footer ============================================================== */

.site-footer {
  background: var(--ink);
  color: #9fadc0;
  padding-block: 3.5rem 2rem;
  font-size: .9rem;
}
.site-footer a { color: #cbd4e0; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.footer-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  padding-bottom: 2.5rem;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; gap: 2rem; } }

.footer-title {
  margin-bottom: 1rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #fff;
}
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { margin-bottom: .55rem; }

.footer-brand { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; color: #fff; font-weight: 600; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .8125rem;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.footer-legal li { margin: 0; }   /* same flex-row / li-margin trap as .nav-list */

/* 9. Hero ================================================================ */

.hero {
  position: relative;
  padding-block: clamp(3rem, 7vw, 6rem);
  background:
    radial-gradient(circle at 88% 12%, var(--brand-tint) 0%, transparent 46%),
    linear-gradient(180deg, var(--white) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
}
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } }

.hero h1 { margin-bottom: 1.1rem; }
.hero .lead { margin-bottom: 1.9rem; }
.hero-media img { border-radius: var(--radius-lg); }

.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line-strong);
  list-style: none;
  padding-left: 0;
  font-size: .875rem;
  color: var(--muted);
}
.hero-points li { display: flex; align-items: center; gap: .45rem; margin: 0; }
.hero-points svg { width: 1rem; height: 1rem; color: var(--brand); flex: none; }

/* Page header for interior pages */
.page-head {
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem);
  background: linear-gradient(180deg, var(--bg) 0%, var(--white) 100%);
  border-bottom: 1px solid var(--line);
}
.page-head h1 { margin-bottom: .75rem; }
.page-head .lead { max-width: 48rem; }

/* 10. Sections =========================================================== */

.stat-row {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.stat { text-align: center; }
.stat-value {
  display: block;
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.03em;
  line-height: 1.1;
}
.stat-label { font-size: .875rem; color: var(--muted); }

/* .stat-value sets --ink explicitly, which is also the dark band's background,
   so it has to be lifted back out on .section-ink. */
.section-ink .stat-value { color: #fff; }
.section-ink .stat-label { color: #9fadc0; }

.callout {
  padding: 1.25rem 1.4rem;
  border-radius: var(--radius);
  border-left: 3px solid var(--brand);
  background: var(--brand-tint);
  font-size: .9375rem;
}
.callout > :last-child { margin-bottom: 0; }
.callout-title { display: block; font-weight: 600; color: var(--ink); margin-bottom: .25rem; }

.callout-info { background: var(--info-tint); border-left-color: var(--info); }
.callout-warn { background: var(--warn-tint); border-left-color: var(--warn); }
.callout-ok   { background: var(--ok-tint);   border-left-color: var(--ok); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.5;
  background: var(--surface);
  color: var(--muted);
  white-space: nowrap;
}
.badge-brand { background: var(--brand-tint); color: var(--brand-dark); }
.badge-ok    { background: var(--ok-tint);    color: var(--ok); }
.badge-warn  { background: var(--warn-tint);  color: var(--warn); }
.badge-muted { background: var(--surface);    color: var(--faint); }

/* 11. Tables ============================================================= */

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.table-scroll > table { border-radius: inherit; }

table.data {
  font-size: .9375rem;
  background: var(--white);
}
table.data th,
table.data td {
  padding: .8rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
table.data thead th {
  position: sticky;
  top: 0;
  background: var(--surface);
  color: var(--ink);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  z-index: 1;
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--bg); }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data .is-unsupported { color: var(--faint); }
table.data .is-unsupported td { background: var(--bg); }

/* Two-column spec list */
.spec-list { margin: 0; }
.spec-list div {
  display: grid;
  grid-template-columns: minmax(9rem, 34%) 1fr;
  gap: 1rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--line);
}
.spec-list div:last-child { border-bottom: 0; }
/* German labels here run long ("Umgebungstemperatur", "Datenschnittstellen")
   and will happily overrun a fixed first column, on screen and in print. */
.spec-list dt,
.spec-list dd { hyphens: auto; overflow-wrap: break-word; }
.spec-list dt { color: var(--muted); font-size: .9375rem; }
.spec-list dd { margin: 0; color: var(--ink); font-weight: 500; font-size: .9375rem; }
@media (max-width: 520px) {
  .spec-list div { grid-template-columns: 1fr; gap: .15rem; }
}

/* LED swatch used in the status table */
.led {
  display: inline-block;
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
  margin-right: .45rem;
  vertical-align: -1px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.led-orange  { background: #ff9500; }
.led-green   { background: #24b47e; }
.led-blue    { background: #2f7ff0; }
.led-red     { background: #e5342a; }
.led-cyan    { background: #17c0c9; }
.led-multi   { background: linear-gradient(135deg, #2f7ff0 0 33%, #24b47e 33% 66%, #e5342a 66%); }

/* 12. Forms ============================================================== */

.form-grid {
  display: grid;
  gap: 1.15rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: .35rem; }
.field > label {
  font-size: .875rem;
  font-weight: 500;
  color: var(--ink);
}
.field .req { color: var(--brand-dark); }
.field .hint { font-size: .8125rem; color: var(--faint); }

.input, .select, .textarea {
  width: 100%;
  padding: .65rem .85rem;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: .9375rem;
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--faint); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(255, 44, 16, .13);
}
.textarea { min-height: 8rem; resize: vertical; }

.select {
  appearance: none;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2367768e' stroke-width='1.6'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: 1rem;
}

.field.has-error .input,
.field.has-error .select,
.field.has-error .textarea { border-color: var(--brand-dark); }
.field-error { font-size: .8125rem; color: var(--brand-dark); font-weight: 500; }

.check {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  gap: .7rem;
  align-items: start;
  font-size: .9rem;
  cursor: pointer;
}
.check input { margin: .28rem 0 0; width: 1.15rem; height: 1.15rem; accent-color: var(--brand); }

/* Honeypot — off-screen rather than display:none, which some bots skip. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.qty-input {
  width: 5.5rem;
  padding: .45rem .6rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.form-status {
  padding: 1.15rem 1.35rem;
  border-radius: var(--radius);
  margin-bottom: 2rem;
  font-size: .9375rem;
}
.form-status-ok    { background: var(--ok-tint);    border-left: 3px solid var(--ok);    color: #145c48; }
.form-status-error { background: var(--brand-tint); border-left: 3px solid var(--brand); color: var(--brand-darker); }
.form-status > :last-child { margin-bottom: 0; }

/* Order summary bar */
.order-total {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
  padding: 1.15rem 1.35rem;
  background: var(--surface);
  border-radius: var(--radius);
  margin-top: 1.5rem;
}
.order-total-value { font-size: 1.5rem; font-weight: 600; color: var(--ink); letter-spacing: -.02em; }
.order-total-note { font-size: .8125rem; color: var(--muted); }
.order-total.is-invalid { background: var(--brand-tint); }

/* 13. Wizard ============================================================= */

.wizard {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.wizard-steps {
  display: flex;
  gap: .25rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  list-style: none;
  margin: 0;
  font-size: .8125rem;
  overflow-x: auto;
}
.wizard-steps li {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  padding-right: .9rem;
  color: var(--faint);
  white-space: nowrap;
}
.wizard-steps li::after {
  content: '';
  width: .35rem;
  height: .35rem;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: .5;
  margin-left: .5rem;
}
.wizard-steps li:last-child { padding-right: 0; }
.wizard-steps li:last-child::after { display: none; }
.wizard-steps .dot {
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--line);
  color: var(--muted);
  font-size: .6875rem;
  font-weight: 600;
  flex: none;
}
.wizard-steps .is-active { color: var(--ink); font-weight: 500; }
.wizard-steps .is-active .dot { background: var(--brand); color: #fff; }
.wizard-steps .is-done .dot { background: var(--ok); color: #fff; }

.wizard-body { padding: clamp(1.5rem, 3vw, 2.25rem); }
.wizard-body h3 { margin-bottom: .35rem; }
.wizard-prompt { color: var(--muted); font-size: .9375rem; margin-bottom: 1.5rem; }

.wizard-search { margin-bottom: 1.25rem; }

.option-grid {
  display: grid;
  gap: .65rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.option {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  width: 100%;
  padding: .9rem 1.1rem;
  text-align: left;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.option:hover {
  border-color: var(--brand);
  background: var(--brand-tint);
  box-shadow: var(--shadow-sm);
}
.option-title { font-weight: 500; color: var(--ink); font-size: .9375rem; }
.option-meta { font-size: .8125rem; color: var(--muted); }

.wizard-back {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-bottom: 1.25rem;
  background: none;
  border: 0;
  padding: 0;
  font-size: .875rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
}
.wizard-back:hover { color: var(--brand-dark); }
.wizard-back::before {
  content: '';
  width: .45rem;
  height: .45rem;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

/* Result */
.result-head {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.result-check {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--ok-tint);
  color: var(--ok);
  flex: none;
}
.result-check svg { width: 1.15rem; height: 1.15rem; }
.result-head h3 { margin: 0; }
.result-head .meta { font-size: .875rem; color: var(--muted); }

.result-items { display: grid; gap: .75rem; margin-bottom: 1.5rem; }
.result-item {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
}
.result-item img { width: 4.5rem; height: 3.5rem; object-fit: contain; }
.result-item-name { font-weight: 500; color: var(--ink); }
.result-item-desc { font-size: .8125rem; color: var(--muted); }
.result-item-price { text-align: right; font-weight: 600; color: var(--ink); white-space: nowrap; }
.result-item-price small { display: block; font-weight: 400; color: var(--faint); font-size: .75rem; }
@media (max-width: 540px) {
  .result-item { grid-template-columns: 3rem 1fr; }
  .result-item-price { grid-column: 2; text-align: left; }
}

.result-notes { display: grid; gap: .6rem; margin-bottom: 1.75rem; }

.result-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem 1.1rem;
  background: var(--surface);
  border-radius: var(--radius-sm);
  margin-bottom: 1.5rem;
  font-weight: 500;
  color: var(--ink);
}
.result-total strong { font-size: 1.25rem; letter-spacing: -.02em; }
/* The figures sit on the right of the row. As a class, not a style attribute:
   the CSP sets style-src 'self' with no 'unsafe-inline', which blocks inline
   style attributes — a style="" here would silently do nothing. */
.result-total-figures { text-align: right; }

/* 14. Accordion / FAQ ==================================================== */

.faq-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  margin-bottom: 2rem;
}
.faq-search { flex: 1 1 18rem; }

.chip-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  padding: .35rem .8rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--white);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s;
}
.chip:hover { border-color: var(--brand); color: var(--brand-dark); }
.chip[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: #fff; }

.faq-group { margin-bottom: 2.5rem; }
.faq-group h2 { font-size: 1.25rem; margin-bottom: 1rem; }

.qa {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: .6rem;
  background: var(--white);
}
.qa[open] { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.qa > summary {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  font-weight: 500;
  color: var(--ink);
  list-style: none;
  font-size: .9375rem;
}
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary::after {
  content: '';
  width: .5rem;
  height: .5rem;
  margin-left: auto;
  margin-top: .38rem;
  border-right: 1.8px solid var(--faint);
  border-bottom: 1.8px solid var(--faint);
  transform: rotate(45deg);
  transition: transform .18s;
  flex: none;
}
.qa[open] > summary::after { transform: rotate(-135deg); }
.qa > summary:hover { color: var(--brand-dark); }
.qa-body {
  padding: 0 1.25rem 1.25rem;
  font-size: .9375rem;
  color: var(--body);
}
.qa-body > :last-child { margin-bottom: 0; }

.qa-empty { padding: 2rem; text-align: center; color: var(--muted); }

/* 15. Utilities ========================================================== */

.center { text-align: center; }
.mb-0 { margin-bottom: 0 !important; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: .875rem; }
.xsmall { font-size: .8125rem; }
.nowrap { white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }

.is-hidden { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.rounded { border-radius: var(--radius); }
.shadow { box-shadow: var(--shadow); }
.bordered { border: 1px solid var(--line); }

.figure { margin: 0; }
.figure img { border-radius: var(--radius); background: var(--surface); }
.figure figcaption { margin-top: .6rem; font-size: .8125rem; color: var(--faint); }

.anchor-link {
  margin-left: .4rem;
  opacity: 0;
  color: var(--faint);
  text-decoration: none;
  font-weight: 400;
}
h2:hover .anchor-link, h3:hover .anchor-link, .anchor-link:focus { opacity: 1; }

/* 16. Print ============================================================== */

/* The PDFs in public/downloads/ are these pages printed by tools/make_pdfs.sh,
   so this block is what the datasheet and quick start guide actually look like.
   There is no second set of templates to keep in step. */

@page {
  size: A4;
  margin: 16mm 15mm 18mm;
}

@media print {
  /* Site chrome and anything interactive has no meaning on paper. */
  .site-header,
  .site-footer,
  .docs-nav,
  .nav-toggle,
  .skip-link,
  .btn,
  .btn-row,
  .wizard-steps,
  .faq-toolbar,
  .chip-row { display: none !important; }

  html { font-size: 10pt; }
  body {
    color: #1e293b;
    background: #fff;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* The page is the sheet; the screen's centring and side padding are noise. */
  .wrap { max-width: none; padding-inline: 0; }
  .wrap.measure > * { max-width: none; }
  .section, .section-tight { padding-block: 0 0 !important; }
  .section + .section, .section-tight + .section-tight,
  .section + .section-tight, .section-tight + .section { padding-top: 9pt !important; }
  .section-surface, .section-bg, .section-ink { background: none !important; }
  .section-ink, .section-ink h2, .section-ink h3 { color: #1e293b !important; }

  /* A printed masthead, so the sheet identifies itself. */
  .page-head {
    padding: 0 0 9pt;
    margin-bottom: 12pt;
    background: none;
    border-bottom: 2pt solid #1e293b;
  }
  .page-head::before {
    content: 'Smart-Meter-Adapter — xDevelop GmbH';
    display: block;
    margin-bottom: 6pt;
    font-size: 7.5pt;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand);
  }
  .page-head h1 { font-size: 22pt; }
  .page-head .lead { font-size: 10.5pt; }

  h2 {
    font-size: 12pt;
    margin-top: 14pt;
    padding-bottom: 3pt;
    border-bottom: 1.5pt solid var(--brand);
    break-after: avoid;
  }
  h3 { font-size: 10pt; margin-top: 9pt; break-after: avoid; }
  p, li, td, th, dd, dt { font-size: 9pt; }

  /* Two-column grids stay two columns; anything wider would be unreadable. */
  .grid-3, .grid-4 { grid-template-columns: 1fr 1fr !important; }
  .split, .split-wide { grid-template-columns: 1.3fr 1fr !important; }

  .card, .callout, .table-scroll, .figure, tr, .steps > li, pre {
    break-inside: avoid;
  }
  .card { box-shadow: none; border-color: #d8dee7; }
  .table-scroll { overflow: visible; border: 0; }
  table.data thead th { position: static; }
  pre { font-size: 7.5pt; white-space: pre-wrap; }
  figure img { max-height: 62mm; object-fit: contain; }

  /* Print the destination of real links, but not of every navigation chip. */
  main a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: .8em;
    color: #67768e;
    word-break: break-all;
  }
}

/* Legal pages: long-form prose, denser heading rhythm than marketing sections */
.legal-body h2 { font-size: 1.15rem; margin-top: 2.25rem; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body ul { margin-bottom: 1.15rem; }
.legal-body p, .legal-body li { font-size: .9375rem; }
.legal-body .callout { margin-bottom: 1.75rem; }

/* 17. Layout utilities ===================================================
   These exist as classes rather than inline style attributes because the
   Content-Security-Policy sets style-src 'self' with no 'unsafe-inline',
   which blocks style="" outright. Keep it that way: add a class here rather
   than reaching for an inline style. */

.items-start { align-items: start; }

.mx-auto { margin-inline: auto; }
.ml-auto { margin-left: auto; }
.push-bottom { margin-top: auto; }
.pt-1 { padding-top: .5rem; }
.pt-2 { padding-top: 1rem; }

/* Only two width tokens survive: .wrap for the page and .measure for the
   reading column. .mw-sm is a short paragraph in the footer, not a page frame. */
.mw-sm { max-width: 24rem; }
.mw-lg { max-width: var(--measure); }

.gap-lg  { gap: 1.75rem; }
.gap-xl  { gap: 2rem; }
.gap-2xl { gap: 3rem; }

.btn-row-center { justify-content: center; }

/* Card and section headings that must not inherit the full h2/h3 scale. */
.h-sm { font-size: 1.15rem; }
.h-md { font-size: 1.25rem; }
.h-lg { font-size: 1.375rem; }

/* A bold lead-in above a list, e.g. "Enthalten". */
.list-label {
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .5rem;
}

/* Definition values that are prose rather than a short value. */
.dd-normal { font-weight: 400; }

/* Filter controls in the compatibility toolbar. */
.filter-field      { min-width: 11rem; }
.filter-field-wide { min-width: 13rem; }

/* Text on the dark (.section-ink) band. */
.on-ink-muted { color: #9fadc0; }
.on-ink-faint { color: #89919a; }

/* The headline price on the dark band. */
.price-hero {
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: .25rem;
}
.price-hero-unit { font-size: 1rem; font-weight: 400; }

/* A B2B order row whose quantity is below the per-article minimum. */
table.data tr.is-invalid td { background: var(--brand-tint); }
table.data tr.is-invalid .qty-input { border-color: var(--brand); }

/* Documentation section sub-navigation ==================================== */

.docs-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 90;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.docs-nav ul {
  display: flex;
  gap: .25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.docs-nav ul::-webkit-scrollbar { display: none; }
.docs-nav li { margin: 0; }   /* the flex-row / li-margin trap again */
.docs-nav a {
  display: block;
  padding: .8rem .85rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.docs-nav a:hover { color: var(--ink); }
.docs-nav a[aria-current='page'] {
  color: var(--brand-dark);
  border-bottom-color: var(--brand);
}

/* Anchors inside a docs page must clear both sticky bars. */
.docs-page { scroll-padding-top: calc(var(--header-h) * 2 + 1rem); }

/* Numbered procedure, used by the quick start guide. */
.steps { counter-reset: step; list-style: none; padding-left: 0; }
.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 2.75rem;
  margin-bottom: 1.15rem;
}
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -.1rem;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: .875rem;
  font-weight: 600;
}
.steps > li > strong { display: block; color: var(--ink); margin-bottom: .15rem; }

/* Card grid on the documentation index. */
.doc-card { display: flex; flex-direction: column; height: 100%; }
.doc-card .card-text { flex: 1; }
.doc-card .doc-topics {
  margin: .85rem 0 1.15rem;
  padding-left: 0;
  list-style: none;
  font-size: .8125rem;
  color: var(--faint);
}
.doc-card .doc-topics li { margin-bottom: .2rem; }

/* Dimensioned drawings are black linework on white, so they need breathing
   room and a white plate rather than the grey used behind product photos —
   otherwise the drawing's own white background sits in a grey frame. */
.figure img.drawing {
  background: var(--white);
  padding: 1.25rem;
}