/* =========================================================================
   pdfinvoice2go.de — one stylesheet, no framework, no CDN.
   Palette: sydra.de blues/orange + the app's own light theme status colours
   (src/Zugferd.App/Themes/Palette.Light.xaml) so the help page shows errors
   and warnings in the colours the user actually sees on screen.
   See website.md §2.
   ========================================================================= */

/* --- Self-hosted Open Sans (SIL OFL). Drop the .woff2 files into
       assets/fonts/ — see assets/fonts/README.txt. Missing files simply
       fall back to Arial, the page stays correct either way. ------------- */
@font-face {
  font-family: "Open Sans";
  src: url("fonts/open-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("fonts/open-sans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("fonts/open-sans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens ------------------------------------------------------------ */
:root {
  --brand: #1c366d;
  --brand-2: #244383;
  --brand-ink: #12244a;
  --accent: #ff8200;
  /* Two derived oranges with two different jobs:
     --accent-hover is a background (hover state of an orange button), kept
     bright enough that dark navy text on it still clears AA;
     --accent-ink is a foreground, for small orange TEXT on white — plain
     #FF8200 there is only 2.1:1, this is 5.7:1. */
  --accent-hover: #f07800;
  --accent-ink: #a34f00;

  --bg: #ffffff;
  --surface: #f1f5f9;
  --surface-2: #e8eef6;
  --border: #cbd5e1;
  --border-strong: #94a3b8;

  --text: #1a1a1a;
  --text-muted: #475569;

  --ok: #15803d;
  --warn: #b45309;
  --danger: #b91c1c;
  --ok-tint: #eaf6ee;
  --warn-tint: #fdf3e3;
  --danger-tint: #fbeaea;

  --font: "Open Sans", Arial, Helvetica, sans-serif;
  --mono: "Consolas", "SFMono-Regular", "Menlo", monospace;

  /* Type scale — anchored on a 17px body (website.md §2.2). The lower steps sit
     close on purpose: they are all "small text" whose rank comes from weight,
     colour and context, not from a visible size ladder. The heading steps
     (base -> lg -> xl -> 2xl -> 3xl) carry the real hierarchy. */
  --text-2xs: 0.6875rem; /* 11px - print URLs, the footer colophon line */
  --text-xs: 0.75rem; /*  12px - eyebrows, small-caps labels, tags */
  --text-sm: 0.8125rem; /* 13px - captions, field hints, table headers */
  --text-md: 0.9375rem; /* 15px - secondary UI: nav, buttons, labels, table cells */
  --text-base: 1.0625rem; /* 17px - body */
  --text-lg: 1.1875rem; /* 19px - lead paragraphs, h4, sub-headings */
  --text-xl: clamp(1.3125rem, 1.15rem + 0.7vw, 1.4375rem); /* 21->23px - h3, calculator total */
  --text-2xl: clamp(1.55rem, 1.15rem + 1.7vw, 2rem); /* h2 */
  --text-3xl: clamp(2rem, 1.4rem + 2.5vw, 2.75rem); /* h1 */

  --tracking-caps: 0.1em; /* every uppercase label uses this one value (they sit at 11-13px) */
  --leading-tight: 1.2; /* headings */
  --leading-body: 1.65; /* long-form text (website.md §2.2) */

  /* Motion. The brief keeps this deliberately small (website.md §8): feedback on
     hover / focus / toggles, nothing decorative, everything off under
     prefers-reduced-motion. transform + opacity only. */
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1); /* ease-out-quart */
  --dur-fast: 130ms; /* press, toggle */
  --dur: 180ms; /* hover, focus, menu, accordion */
  --dur-slow: 260ms; /* an element appearing on the page */

  --s1: 0.5rem;
  --s2: 0.75rem;
  --s3: 1rem;
  --s4: 1.5rem;
  --s5: 2rem;
  --s6: 3rem;
  --s7: 4.5rem;
  --s8: 6rem;

  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(18, 36, 74, 0.06), 0 8px 24px rgba(18, 36, 74, 0.07);
  --shadow-sm: 0 1px 2px rgba(18, 36, 74, 0.08);

  --wrap: 1100px;
  --head-h: 68px;

  /* One asymmetric two-column ratio, shared by the hero and the split sections
     so they read as the same underlying grid. */
  --ratio-split: 1.1fr 0.9fr;
}

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

html {
  scroll-behavior: smooth;
}

/* Keep in-page jump targets clear of the sticky header. Low specificity so
   .help-section (which needs a little more) still wins. */
:where([id]) {
  scroll-margin-top: calc(var(--head-h) + var(--s3));
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  color: var(--brand);
  line-height: var(--leading-tight);
  margin: 0 0 var(--s3);
  font-weight: 700;
  text-wrap: balance;
}

h1 {
  font-size: var(--text-3xl);
  letter-spacing: -0.02em;
}
h2 {
  font-size: var(--text-2xl);
  letter-spacing: -0.015em;
}
h3 {
  font-size: var(--text-xl);
}
h4 {
  font-size: var(--text-lg);
  margin-bottom: var(--s1);
}

p {
  margin: 0 0 var(--s3);
  text-wrap: pretty; /* trims runt last lines where the browser supports it */
}

a {
  color: var(--brand-2);
  text-underline-offset: 3px;
}
a:hover {
  color: var(--accent-ink);
}

strong {
  font-weight: 700;
}

ul,
ol {
  margin: 0 0 var(--s3);
  padding-left: 1.3em;
}
li {
  margin-bottom: var(--s1);
}

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

img {
  max-width: 100%;
  height: auto;
}

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

/* Labels quoted verbatim from the application (website.md §9) */
.ui {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.08em 0.4em;
  white-space: nowrap;
  color: var(--brand-ink);
}
kbd {
  font-family: var(--mono);
  font-size: 0.85em;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 0.08em 0.4em;
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand);
  color: #fff;
  padding: var(--s2) var(--s3);
  z-index: 100;
}
.skip:focus {
  left: var(--s3);
  top: var(--s1);
}

/* --- Layout ------------------------------------------------------------ */
.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s4);
}

.section {
  padding-block: var(--s7);
}
.section--tight {
  padding-block: var(--s6);
}
.section--flush-top {
  padding-top: 0;
}
.section--surface {
  background: var(--surface);
  border-block: 1px solid var(--border);
}

.section-head {
  max-width: 62ch;
  margin-bottom: var(--s5);
}
.section-head p {
  color: var(--text-muted);
  font-size: var(--text-base);
  margin-bottom: 0;
}

.eyebrow {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: var(--s1);
}

.lede {
  font-size: var(--text-lg);
  color: var(--text-muted);
  max-width: 62ch;
}

.prose {
  max-width: 68ch;
}
/* A paragraph that resumes after a list or table block wants a clear gap. */
.prose .checks + p,
.prose .table-scroll + p {
  margin-top: var(--s4);
}

/* --- Header ------------------------------------------------------------ */
.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--border);
}

.head-inner {
  min-height: var(--head-h);
  display: flex;
  align-items: center;
  gap: var(--s4);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s2);
  color: var(--brand);
  text-decoration: none;
  margin-right: auto;
}
.brand-icon {
  width: 26px;
  height: 30px;
  flex: none;
  color: var(--brand);
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.brand-text strong {
  font-size: var(--text-base);
}
.brand-text small {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--s1);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--brand);
  font: inherit;
  font-size: var(--text-md);
  padding: 0.45rem 0.7rem;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.nav-toggle:hover {
  background: var(--surface);
  border-color: var(--border-strong);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--s4);
}
.site-nav a {
  color: var(--brand);
  text-decoration: none;
  font-size: var(--text-md);
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover {
  border-bottom-color: var(--border-strong);
  color: var(--brand);
}
.site-nav a.is-active {
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.site-nav a.pill {
  border-bottom: 0;
}

/* --- Buttons ----------------------------------------------------------- */
.btn,
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  font: inherit;
  font-weight: 600;
  font-size: var(--text-md);
  line-height: 1.2;
  text-decoration: none;
  padding: 0.72rem 1.35rem;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:active,
.pill:active {
  transform: translateY(1px);
}
/* On the orange fill an orange ring is nearly invisible; ring in brand instead. */
.pill:focus-visible,
.btn--accent:focus-visible {
  outline-color: var(--brand);
}

/* Dark navy on the orange, not white: white on #FF8200 is only 2.5:1, this is
   6.2:1. Keeps SYDRA's orange and still passes AA. */
.pill,
.btn--accent {
  background: var(--accent);
  color: var(--brand-ink);
}
.pill:hover,
.btn--accent:hover {
  background: var(--accent-hover);
  color: var(--brand-ink);
}

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

.btn--ghost {
  background: transparent;
  color: var(--brand);
  border-color: var(--border-strong);
}
.btn--ghost:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--surface);
}

.btn--onblue {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}
.btn--onblue:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  color: #fff;
}

.btn--block {
  width: 100%;
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn[disabled]:active,
.btn[aria-disabled="true"]:active {
  transform: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

/* --- Hero -------------------------------------------------------------- */
.hero {
  background-color: var(--brand);
  /* Drop a photo in as assets/img/hero.jpg and uncomment to use it:
     background-image: linear-gradient(rgba(18,36,74,.78), rgba(18,36,74,.78)), url("img/hero.jpg");
     background-size: cover; background-position: center; */
  color: #fff;
  position: relative;
  overflow: hidden;
}
.hero::after {
  /* faint document-grid motif — restrained, no SaaS gradient (website.md §2.4) */
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--ratio-split);
  gap: var(--s6);
  align-items: center;
  padding-block: var(--s7);
}
.hero h1 {
  color: #fff;
  margin-bottom: var(--s3);
}
.hero p {
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--text-lg);
  max-width: 46ch;
}
.hero .eyebrow {
  color: #ffb45c;
}
.hero-note {
  margin-top: var(--s4);
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.75);
}

/* --- Screenshot placeholders ------------------------------------------- */
.shot {
  margin: 0;
}
.shot-frame {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  aspect-ratio: 16 / 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  text-align: center;
  padding: var(--s4);
  color: var(--text-muted);
  overflow: hidden;
}
.shot-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}
.shot-frame span {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted);
}
.shot-frame em {
  font-style: normal;
  font-size: var(--text-md);
  max-width: 34ch;
}
.shot figcaption {
  font-size: var(--text-md);
  color: var(--text-muted);
  margin-top: var(--s2);
}
.shot--wide .shot-frame {
  aspect-ratio: 16 / 9;
}

/* Real screenshots: show the whole window at its own aspect ratio (no crop). */
.shot--img .shot-frame {
  aspect-ratio: auto;
  display: block;
  padding: 0;
}
.shot--img .shot-frame img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: initial;
}
.shot--small {
  max-width: 420px;
  margin-inline: auto;
}
.hero .shot-frame {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.8);
}
.hero .shot-frame span {
  color: rgba(255, 255, 255, 0.6);
}
.hero .shot figcaption {
  color: rgba(255, 255, 255, 0.7);
}

/* --- Cards / grids ------------------------------------------------------ */
.grid {
  display: grid;
  gap: var(--s4);
}
.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}
.grid--split {
  grid-template-columns: var(--ratio-split);
  align-items: start;
  gap: var(--s6);
}
.grid--middle {
  align-items: center;
}

.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s4);
  box-shadow: var(--shadow-sm);
}
.card h3 {
  margin-bottom: var(--s1);
}
.card p:last-child {
  margin-bottom: 0;
}
.card-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--surface);
  color: var(--brand);
  font-weight: 700;
  font-size: var(--text-md);
  margin-bottom: var(--s2);
}

/* --- Lightweight alternatives to card grids ---------------------------------
   Only the primary "what it does" section keeps full cards; the supporting
   sections use these flatter treatments so the page has more than one beat. */
.feature-row {
  display: grid;
  gap: var(--s5) var(--s6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.feature-row--3 {
  grid-template-columns: repeat(3, 1fr);
}
.feature-row > li {
  margin: 0;
  padding-top: var(--s3);
  border-top: 2px solid var(--brand);
}
.feature-row h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--s1);
}
.feature-row p {
  color: var(--text-muted);
  margin: 0;
}

.exclude-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 var(--s6);
}
.exclude-list li {
  margin: 0;
  padding: var(--s4) 0;
  border-top: 1px solid var(--border);
}
.exclude-list h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--s1);
}
.exclude-list p {
  color: var(--text-muted);
  margin: 0;
}

/* --- Blue information box (sydra.de motif) ------------------------------ */
.box {
  background: var(--brand);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--s5);
}
.box h2,
.box h3 {
  color: #fff;
}
.box p {
  color: rgba(255, 255, 255, 0.88);
}
.box p:last-child {
  margin-bottom: 0;
}
.box .shot figcaption {
  color: rgba(255, 255, 255, 0.88);
}
.box a:not(.btn) {
  color: #ffc98a;
}
.box .eyebrow {
  color: #ffb45c;
}
.box.center p {
  max-width: 56ch;
  margin-inline: auto;
}
.box.center .btn-row {
  justify-content: center;
}

.note {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s4);
}
.note:last-child {
  margin-bottom: 0;
}
/* As a grid child the row-gap handles spacing; a bottom margin would sit
   inside the row track and leave cards in the same row ending at different
   heights. */
.grid .note {
  margin-bottom: 0;
}
.note h4 {
  margin-bottom: var(--s1);
}
.note p:last-child,
.note ul:last-child {
  margin-bottom: 0;
}
/* Variants carry their meaning in the fill + border tone and, where there is a
   heading, a leading severity dot. No colour stripe (see website.md §2.4). */
.note--warn {
  border-color: #e2c6a0;
  background: var(--warn-tint);
}
.note--ok {
  border-color: #b3d9c1;
  background: var(--ok-tint);
}
.note--danger {
  border-color: #e4b4b4;
  background: var(--danger-tint);
}
.note--warn > h4,
.note--danger > h4 {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.note--warn > h4::before,
.note--danger > h4::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  flex: none;
  transform: translateY(-1px);
}
.note--warn > h4::before {
  background: var(--warn);
}
.note--danger > h4::before {
  background: var(--danger);
}

/* --- Check list (compliance gate) --------------------------------------- */
.checks {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: chk;
  display: grid;
  gap: var(--s2);
}
.checks li {
  counter-increment: chk;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: var(--s3);
  align-items: start;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s3) var(--s4);
  margin: 0;
}
.checks li::before {
  content: counter(chk);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--ok-tint);
  color: var(--ok);
  font-weight: 700;
  font-size: var(--text-md);
}
/* strong and span both belong in the second column — without this the span
   wraps onto a new grid row and is squeezed into the 2rem number column. */
.checks li > strong,
.checks li > span {
  grid-column: 2;
}
.checks li > strong {
  display: block;
  color: var(--brand);
}
.checks li > span {
  display: block;
  color: var(--text-muted);
  font-size: var(--text-md);
}

/* --- Numbered steps ----------------------------------------------------- */
.steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 0 0 var(--s4);
}
.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 3.4rem;
  padding-bottom: var(--s4);
  margin: 0;
}
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  font-size: var(--text-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.steps > li::after {
  content: "";
  position: absolute;
  left: 1.15rem;
  top: 2.6rem;
  bottom: 0.3rem;
  width: 2px;
  background: var(--border);
}
.steps > li:last-child {
  padding-bottom: 0;
}
.steps > li:last-child::after {
  display: none;
}
.steps h3 {
  margin-bottom: var(--s1);
  font-size: var(--text-lg);
}
.steps p:last-child,
.steps ul:last-child {
  margin-bottom: 0;
}

/* --- Pricing ------------------------------------------------------------ */
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  align-items: stretch;
}
.price-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--s5) var(--s4);
  box-shadow: var(--shadow-sm);
}
.price-card--featured {
  border-color: var(--brand);
  border-width: 2px;
  box-shadow: var(--shadow);
  position: relative;
}
.price-card--trial {
  background: var(--surface);
}
.price-tag {
  position: absolute;
  top: -0.85rem;
  left: var(--s4);
  background: var(--accent);
  color: var(--brand-ink);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
}
.price-card h3 {
  margin-bottom: var(--s1);
}
.price-card .sub {
  color: var(--text-muted);
  font-size: var(--text-md);
  margin-bottom: var(--s4);
  min-height: 3em;
}
.price {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin-bottom: var(--s1);
}
.price b {
  font-size: 2.4rem; /* the one display figure on the site; deliberately off-scale */
  line-height: 1;
  color: var(--brand);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.price-meta strong {
  font-variant-numeric: tabular-nums;
}
.price span {
  color: var(--text-muted);
  font-size: var(--text-md);
}
.price-meta {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--s4);
}
.price-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s4);
  font-size: var(--text-md);
}
.price-card ul li {
  padding-left: 1.6rem;
  position: relative;
}
.price-card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.55rem;
  height: 0.3rem;
  border-left: 2px solid var(--ok);
  border-bottom: 2px solid var(--ok);
  transform: rotate(-45deg);
}
.price-card .btn {
  margin-top: auto;
}

.placeholder-price {
  /* Marks every figure that must be replaced before the site goes live. */
  box-shadow: inset 0 -0.35em 0 rgba(255, 130, 0, 0.22);
}

/* --- Calculator --------------------------------------------------------- */
.calc {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--s5);
  align-items: start;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--s5);
  box-shadow: var(--shadow-sm);
}
.calc-controls > * + * {
  margin-top: var(--s4);
}
.calc-label {
  display: block;
  font-weight: 600;
  color: var(--brand);
  margin-bottom: var(--s1);
}
.calc-hint {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: var(--s1) 0 0;
}
.calc-hint--foot {
  margin-top: var(--s3);
}

.stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}
.stepper button {
  width: 2.9rem;
  border: 0;
  background: var(--surface);
  color: var(--brand);
  font-size: var(--text-xl);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out);
}
.stepper button:hover {
  background: var(--surface-2);
}
.stepper button:active {
  background: var(--border);
}
.stepper input {
  width: 4.5rem;
  border: 0;
  border-inline: 1px solid var(--border);
  text-align: center;
  font: inherit;
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--brand);
  padding-block: 0.6rem;
  -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.segmented {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 3px;
  background: var(--surface);
  gap: 3px;
}
.segmented label {
  position: relative;
}
.segmented input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}
.segmented span {
  display: block;
  padding: 0.7rem 1.3rem;
  border-radius: 999px;
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.segmented input:checked + span {
  background: var(--brand);
  color: #fff;
}
.segmented input:focus-visible + span {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.calc-out {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s4);
}
.calc-out dl {
  margin: 0 0 var(--s3);
  font-size: var(--text-md);
}
.calc-out .row {
  display: flex;
  justify-content: space-between;
  gap: var(--s2);
  padding-block: 0.3rem;
  color: var(--text-muted);
}
/* Amounts recompute as the seat count changes; hold the digits on a fixed
   advance so nothing shifts sideways (website.md §5.2). */
.calc-out .row > span:last-child {
  font-variant-numeric: tabular-nums;
}
.calc-out .row.total {
  border-top: 1px solid var(--border-strong);
  margin-top: var(--s2);
  padding-top: var(--s2);
  color: var(--brand);
  font-weight: 700;
  font-size: var(--text-xl);
}
.calc-out dt,
.calc-out dd {
  margin: 0;
}

/* --- Forms -------------------------------------------------------------- */
.form {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--s5);
  box-shadow: var(--shadow-sm);
}
.form > .note,
noscript > .note {
  margin-top: var(--s4);
}
.fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 var(--s5);
}
.fieldset:last-of-type {
  margin-bottom: var(--s4);
}
.fieldset > legend {
  font-weight: 700;
  color: var(--brand);
  font-size: var(--text-lg);
  padding: 0;
  margin-bottom: var(--s3);
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s3) var(--s4);
}
.field {
  display: flex;
  flex-direction: column;
}
.field--full {
  grid-column: 1 / -1;
}
.field label {
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--brand);
  margin-bottom: 0.3rem;
}
.field label .opt,
.fieldset > legend .opt {
  font-weight: 400;
  color: var(--text-muted);
}
/* On a legend the label is 19px; the "(optional)" beside it should read as a
   note, not as part of the heading. */
.fieldset > legend .opt {
  font-size: var(--text-md);
}
.field input,
.field textarea,
.field select {
  font: inherit;
  font-size: var(--text-base);
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 0.62rem 0.8rem;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out);
}
.field input:hover,
.field textarea:hover {
  border-color: var(--brand-2);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: 0;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(28, 54, 109, 0.15);
}
.field textarea {
  min-height: 7rem;
  resize: vertical;
}
.field .hint {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0.3rem 0 0;
}
.field .err,
.consent .err {
  font-size: var(--text-sm);
  color: var(--danger);
  margin: 0.3rem 0 0;
  font-weight: 600;
  animation: reveal-panel var(--dur) var(--ease-out);
}
/* .consent is a two-column grid (checkbox | text) and setError appends the
   message as a direct child, so it would land in the 1.4rem checkbox column
   and wrap to one word per line. Put it in the text column instead, where it
   lines up under the statement it is about. */
.consent .err {
  grid-column: 2;
}
.field.is-invalid input,
.field.is-invalid textarea {
  border-color: var(--danger);
  background: var(--danger-tint);
}
.field.is-invalid input:focus,
.field.is-invalid textarea:focus {
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.18);
}
.field input.hwid {
  font-family: var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Honeypot — present in the DOM for bots, off-screen for everyone else.
   Not display:none / [hidden]: some bots skip those. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* CAPTCHA */
.captcha-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-bottom: var(--s2);
}
.captcha-row img {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: #fff;
  display: block;
}
.captcha-row .btn {
  padding: 0.45rem 1rem;
  font-size: var(--text-sm);
}
input.captcha-input {
  font-family: var(--mono);
  font-size: var(--text-lg);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  max-width: 9rem;
}

.consent {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: var(--s2);
  align-items: start;
  font-size: var(--text-md);
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s3);
}
/* Two of these cards now stack at the foot of the form — the data-protection
   consent and the § 14 BGB confirmation. Butted together their borders meet
   and the two read as one block; they are separate declarations. */
.consent + .consent {
  margin-top: var(--s2);
}
.consent input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.25rem;
  accent-color: var(--brand);
}
.consent.is-invalid {
  border-color: var(--danger);
  background: var(--danger-tint);
}

.form-error-summary {
  border: 1px solid var(--danger);
  background: var(--danger-tint);
  border-radius: var(--radius);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s4);
}
/* Blocks that JS un-hides (the error list, the mail-fallback note, the
   licence-only fieldsets) ease in instead of snapping onto the page. */
.form-error-summary:not([hidden]),
#mail-fallback:not([hidden]),
.fieldset[data-hide-when-trial]:not([hidden]) {
  animation: reveal-panel var(--dur-slow) var(--ease-out);
}
.form-error-summary h3 {
  color: var(--danger);
  font-size: var(--text-base);
  margin-bottom: var(--s1);
}
.form-error-summary ul {
  margin: 0;
  font-size: var(--text-md);
}
.form-error-summary a {
  color: var(--danger);
}

.form-success {
  border: 1px solid var(--ok);
  background: var(--ok-tint);
  border-radius: var(--radius-lg);
  padding: var(--s5);
}
.form-success h1,
.form-success h2 {
  color: var(--ok);
}
.form-success p:last-child {
  margin-bottom: 0;
}

.form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s4);
}
.form-foot p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* Arbeitsplätze / Laufzeit inside the order form reuse the calculator's own
   stepper and segmented control, so the same setting looks the same in both
   places. The generic `.field input` rules come later in this file and would
   otherwise repaint them, hence the overrides rather than new components. */
.field .stepper,
.field .segmented {
  align-self: start; /* both are inline-flex; .field is a stretching column */
}
.field .stepper input {
  border: 0;
  border-inline: 1px solid var(--border);
  border-radius: 0;
  padding: 0.6rem 0;
  text-align: center;
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--brand);
}
.field .stepper input:hover,
.field .stepper input:focus {
  border-color: var(--border);
  box-shadow: none;
}
.field .stepper:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(28, 54, 109, 0.15);
}
.field .segmented input {
  border: 0;
  padding: 0;
  background: none;
}
.field .segmented label {
  margin-bottom: 0;
}
/* Group label for the radio set, which has no single control to point a
   <label for=…> at. Matches `.field label` exactly. */
.field .field-label {
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--brand);
  margin-bottom: 0.3rem;
}

/* --- Tables ------------------------------------------------------------- */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
}
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-md);
  min-width: 32rem;
}
/* Three-column tables need a little more room before they may squeeze — but
   not so much that they scroll inside the help page's prose column, which
   would also clip them when the page is printed. */
table.data--wide {
  min-width: 34rem;
}
table.data th,
table.data td {
  text-align: left;
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
table.data thead th {
  background: var(--surface);
  color: var(--brand);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  white-space: nowrap;
}
table.data tbody tr:last-child td {
  border-bottom: 0;
}
table.data td.num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* --- FAQ ---------------------------------------------------------------- */
.faq {
  display: grid;
  gap: var(--s2);
}
.faq details {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}
.faq summary {
  cursor: pointer;
  padding: var(--s3) var(--s4);
  font-weight: 600;
  color: var(--brand);
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--s3);
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "";
  margin-left: auto;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid var(--border-strong);
  border-bottom: 2px solid var(--border-strong);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease-out);
  flex: none;
}
.faq details[open] summary::after {
  transform: rotate(-135deg);
}
.faq summary:hover {
  background: var(--surface);
}
.faq summary:hover::after {
  border-color: var(--brand);
}
.faq .faq-body {
  padding: 0 var(--s4) var(--s4);
  border-top: 1px solid var(--border);
  padding-top: var(--s3);
}
/* The panel snaps to its height (no JS), but its contents settle in. */
.faq details[open] .faq-body {
  animation: reveal-panel var(--dur) var(--ease-out);
}
.faq .faq-body > :last-child {
  margin-bottom: 0;
}

/* --- Help page layout ---------------------------------------------------- */
.help-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: var(--s6);
  align-items: start;
}
.help-nav {
  position: sticky;
  top: calc(var(--head-h) + var(--s3));
  max-height: calc(100vh - var(--head-h) - var(--s5));
  overflow-y: auto;
}
.help-nav h2 {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s2);
}
.help-nav ol {
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: 2px solid var(--border);
}
.help-nav li {
  margin: 0;
}
.help-nav a {
  display: block;
  padding: 0.4rem var(--s3);
  margin-left: -2px;
  border-left: 2px solid transparent;
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--text-md);
  line-height: 1.35;
}
.help-nav a:hover {
  color: var(--brand);
  background: var(--surface);
}
.help-nav a.is-current {
  color: var(--brand);
  border-left-color: var(--accent);
  font-weight: 600;
}

.help-section {
  scroll-margin-top: calc(var(--head-h) + var(--s4));
  padding-bottom: var(--s6);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s6);
}
.help-section:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.help-section > h2 {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
}
.help-section > h2 .n {
  font-size: var(--text-sm);
  font-weight: 700;
  color: #fff;
  background: var(--brand);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  flex: none;
  align-self: center;
}

.severity {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: var(--text-md);
}
.severity::before {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 3px;
  flex: none;
}
.severity--err::before {
  background: var(--danger);
}
.severity--warn::before {
  background: var(--warn);
}
.severity--ok::before {
  background: var(--ok);
}

/* --- Footer -------------------------------------------------------------- */
.site-foot {
  background: var(--brand-ink);
  color: rgba(255, 255, 255, 0.8);
  padding-block: var(--s6) var(--s5);
  margin-top: var(--s8);
  font-size: var(--text-md);
}
.site-foot h3 {
  color: #fff;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  margin-bottom: var(--s2);
}
.site-foot a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}
.site-foot a:hover {
  color: #fff;
  text-decoration: underline;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: var(--s5);
}
.foot-grid ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.foot-grid p {
  margin-bottom: var(--s1);
}
.foot-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin-top: var(--s5);
  padding-top: var(--s3);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.72);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  justify-content: space-between;
}

/* --- Utilities ----------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
[hidden] {
  display: none !important;
}
.center {
  text-align: center;
}
.mb0 {
  margin-bottom: 0;
}
/* A muted line of small print trailing a block (prices, disclaimers). */
.fineprint {
  margin-top: var(--s4);
  color: var(--text-muted);
  font-size: var(--text-md);
}
/* A hint that sits directly under a fieldset legend. */
.field-note {
  margin: 0 0 var(--s3);
  color: var(--text-muted);
  font-size: var(--text-md);
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 960px) {
  .hero-inner,
  .grid--split {
    grid-template-columns: 1fr;
    gap: var(--s5);
  }
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .feature-row--3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .price-grid {
    grid-template-columns: 1fr;
  }
  .calc {
    grid-template-columns: 1fr;
  }
  .help-layout {
    grid-template-columns: 1fr;
    gap: var(--s4);
  }
  .help-nav {
    position: static;
    max-height: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--s3) var(--s4);
  }
  .foot-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  :root {
    --text-base: 1rem;
    --text-lg: 1.125rem;
  }
  .section {
    padding-block: var(--s6);
  }
  .nav-toggle {
    display: inline-flex;
  }
  .site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--border);
    padding: var(--s2) var(--s4) var(--s4);
    box-shadow: var(--shadow);
  }
  /* Opens with a short fade + settle; closes instantly (site.js toggles the
     class). display:none keeps the closed menu out of the tab order. */
  .site-nav.is-open {
    display: flex;
    animation: reveal-panel var(--dur) var(--ease-out);
  }
  .site-nav a {
    padding-block: 0.7rem;
    border-bottom: 1px solid var(--border);
  }
  .site-nav a.is-active {
    border-bottom-color: var(--accent);
  }
  .site-nav a.pill {
    margin-top: var(--s3);
    align-self: flex-start;
  }
  .head-inner {
    position: relative;
  }
  .grid--2,
  .grid--4,
  .field-grid,
  .foot-grid,
  .feature-row--3,
  .exclude-list {
    grid-template-columns: 1fr;
  }
  .form,
  .calc,
  .box {
    padding: var(--s4);
  }
}

/* --- Shared animations --------------------------------------------------- */
/* One entrance: a short fade with a 4px settle. Used wherever the page reveals
   something the user just caused (a FAQ answer, a validation message, the
   licence fields). transform + opacity only; disabled under reduced motion. */
@keyframes reveal-panel {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

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

/* --- Print (the help page is meant to be printed) -------------------------- */
@media print {
  .site-head,
  .site-foot,
  .help-nav,
  .nav-toggle,
  .btn,
  .pill,
  .hero .shot {
    display: none !important;
  }
  body {
    font-size: 11pt;
    color: #000;
  }
  .help-layout,
  .prose {
    grid-template-columns: 1fr;
    max-width: none;
  }
  /* A scrolling table would be clipped on paper. */
  .table-scroll {
    overflow: visible;
  }
  table.data,
  table.data--wide {
    min-width: 0;
  }
  .help-section {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .faq details {
    break-inside: avoid;
  }
  .faq details:not([open]) .faq-body {
    display: block;
  }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #444;
  }
  .box,
  .hero {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #000;
  }
  .box h2,
  .box h3,
  .box p,
  .hero h1,
  .hero p {
    color: #000 !important;
  }
}