/*
 * EqualDoc website – shared stylesheet.
 * Plain CSS, no build step.
 *
 *   1. Tokens (all colours live here; nothing below uses a literal colour)
 *   2. Base
 *   3. Layout helpers
 *   4. Components: skip link, brand, buttons, header/navigation, footer
 *   5. Homepage sections: hero, mockup, cards, offering (statement + service list), standards, CTA
 *   6. Subpages: page header, notices, mock upload, split, lists, plans, form, prose, API page
 *   6b. Knowledge area: teaser, breadcrumb, topic cards, fact boxes, layer diagram, FAQ, comparison table
 *   7. Preferences (reduced motion)
 *
 * Contrast (WCAG 2.x) of the pairs in use:
 *   text #1F2937 on #FFFFFF 14.7:1 · on #F9FAFB 14.1:1 · on #DCFCE7 13.4:1
 *   muted #6B7280 on #FFFFFF 4.8:1 · on #F9FAFB 4.6:1
 *     (muted text is never placed on #DCFCE7: 4.4:1 would fail AA)
 *   primary-dark #166534 on #FFFFFF 7.1:1 · on #F9FAFB 6.8:1 · on #DCFCE7 6.5:1
 *   white on primary-dark #166534 7.1:1
 *   white on primary #16A34A 3.3:1 and primary #16A34A on #FFFFFF 3.3:1:
 *     AA only for large text (>= 18.66px bold), so primary is used for button
 *     fills with large bold labels, step numbers, the h1 accent, the logo and
 *     non-text graphics (icons, borders, progress, check marks), never for
 *     small text. Small green text uses primary-dark.
 *   Focus outline primary-dark: >= 6.5:1 against every background used.
 *   error #B91C1C on #FFFFFF 6.5:1 · on #F9FAFB 6.2:1 · on #FEF2F2 5.9:1
 *     (error text, invalid field borders, error summary border; errors are
 *     never shown by colour alone: "Fehler:"/"Error:" prefix, thicker border)
 *   text #1F2937 on error-light #FEF2F2 13.4:1
 */

/* ---------- 1. Tokens ---------- */
:root {
  color-scheme: light;

  /* Brand */
  --color-primary: #16A34A;
  --color-primary-dark: #166534;
  --color-primary-light: #DCFCE7;
  --color-on-primary: #FFFFFF;

  /* Neutrals */
  --color-text: #1F2937;
  --color-text-muted: #6B7280;
  --color-bg: #FFFFFF;
  --color-bg-alt: #F9FAFB;
  --color-border: #E5E7EB;
  --color-border-strong: #D1D5DB;

  /* Feedback (contact form) */
  --color-error: #B91C1C;
  --color-error-light: #FEF2F2;

  /* Roles */
  --color-link: var(--color-primary-dark);
  --color-focus: var(--color-primary-dark);
  --shadow-tint: rgba(22, 101, 52, 0.22);
  --shadow-neutral: rgba(17, 24, 39, 0.06);
  --color-backdrop: rgba(17, 24, 39, 0.55); /* modal dialog backdrop (account pages) */

  /* Type */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-button: 1.1875rem; /* 19px bold = WCAG "large text"; see contrast note */
  --text-h3: 1.25rem;
  --text-h2: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  --text-h1: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);

  /* Spacing and shape */
  --max-width: 72rem;
  --gutter: 1rem;
  --section-space: clamp(4rem, 3rem + 5vw, 7rem);
  --radius-sm: 0.5rem;
  --radius: 0.875rem;
  --radius-lg: 1.5rem;
  --shadow-card: 0 1px 2px var(--shadow-neutral), 0 4px 16px var(--shadow-neutral);
  --shadow-float: 0 1px 3px var(--shadow-neutral), 0 24px 48px -16px var(--shadow-tint);
}

@media (min-width: 48rem) {
  :root {
    --gutter: 2rem;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  overflow-wrap: break-word; /* long German compounds never force sideways scrolling */
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

main:focus {
  outline: none;
}

h1,
h2,
h3 {
  margin: 0 0 0.75rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--color-text);
}

h1 {
  font-size: var(--text-h1);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

h2 {
  font-size: var(--text-h2);
  font-weight: 750;
  letter-spacing: -0.02em;
}

h3 {
  font-size: var(--text-h3);
  font-weight: 700;
}

p {
  margin: 0 0 1rem;
}

a {
  color: var(--color-link);
  text-decoration-color: var(--color-primary);
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--color-primary-dark);
  text-decoration-thickness: 2px;
}

img,
svg {
  max-width: 100%;
}

::selection {
  background: var(--color-primary-light);
  color: var(--color-text);
}

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

/* Narrow screens: hyphenate (uses the page's lang attribute, e.g. German compounds) */
@media (max-width: 40rem) {
  h1,
  h2,
  h3,
  p,
  li {
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}

/* Text for screen readers only */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- 3. Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Narrow, centred content column */
.narrow {
  max-width: 48rem;
}

.centered {
  text-align: center;
}

.centered .lead {
  margin-inline: auto;
}

.centered .button-row {
  justify-content: center;
}

/* Section with less vertical space (directly below a page header) */
.section-tight {
  padding-block: clamp(2.5rem, 2rem + 3vw, 4rem);
}

.section {
  padding-block: var(--section-space);
}

.section-alt {
  background: var(--color-bg-alt);
  border-block: 1px solid var(--color-border);
}

.section-intro {
  max-width: 42rem;
  margin: 0 auto 3rem;
  text-align: center;
}

.section-intro p:last-child {
  margin-bottom: 0;
  color: var(--color-text-muted);
  font-size: var(--text-lg);
}

/* Small label above headings, shown as a light-green badge */
.eyebrow {
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Large text only (h1 accent); see contrast note */
.text-accent {
  color: var(--color-primary);
}

.fine-print {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* ---------- 4. Components ---------- */

/* Skip link */
.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100%;
  z-index: 100;
  padding: 0.5rem 1rem;
  background: var(--color-bg);
  color: var(--color-primary-dark);
  font-weight: 600;
  border: 2px solid var(--color-primary-dark);
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  top: 0.5rem;
}

/* Text logo: "Equal" in brand green, "Doc" in text colour */
.brand,
.site-name {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text);
  text-decoration: none;
}

.brand:hover,
.site-name:hover {
  color: var(--color-text);
}

.brand-doc {
  color: var(--color-text);
}

.brand-equal {
  color: var(--color-primary);
}

/* Very narrow phones: slightly smaller logo so brand, menu button and
   language toggle share one row */
@media (max-width: 22rem) {
  .brand,
  .site-name {
    font-size: 1.25rem;
  }
}

/* Buttons (links styled as buttons; they navigate, so they stay <a>) */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.5rem 1.125rem;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--text-button);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.button-large {
  min-height: 3.25rem;
  padding: 0.75rem 1.5rem;
}

/* White label on #16A34A is 3.3:1, valid only because labels are large bold text. */
.button-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

.button-primary:hover,
.button-primary:active {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-on-primary);
}

.button-secondary {
  background: var(--color-bg);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

.button-secondary:hover,
.button-secondary:active {
  background: var(--color-primary-light);
  border-color: var(--color-primary-dark);
  color: var(--color-primary-dark);
}

.button:focus-visible {
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--color-bg);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Header and navigation */
/*
 * Sticky header. scroll-padding keeps anchor targets and keyboard focus clear
 * of it (WCAG 2.4.11). On short viewports (landscape phones, high zoom) it
 * scrolls away instead, so it never takes a large share of the screen.
 */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

html {
  scroll-padding-top: 5.5rem;
}

@media (max-height: 30rem) {
  .site-header {
    position: relative;
  }

  html {
    scroll-padding-top: 0;
  }
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1rem 2.5rem;
  min-height: 4.5rem;
  padding-block: 0.75rem;
}

.site-nav {
  margin-left: auto;
}

.nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 2.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-list a {
  display: inline-block;
  padding: 0.5rem 0;
  color: var(--color-text);
  font-weight: 550;
  text-decoration: none;
}

.nav-list a:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: 2px;
}

/* "page" on the current page, "true" on pages inside a section (Wissen subpages) */
.nav-list a[aria-current] {
  color: var(--color-primary-dark);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: 3px;
}

/*
 * Language toggle (DE | EN): always visible next to the menu. The active
 * language is filled dark green (white on #166534, 7.1:1) and bold, and is
 * marked aria-current="page" ("current page" for screen readers); in forced
 * colours, where fills disappear, it is underlined. main.js switches in place;
 * without JS the links simply load the other language.
 */
.lang-switch {
  display: inline-flex;
  flex: none;
  gap: 0.125rem;
  padding: 0.1875rem;
  border: 1px solid var(--color-text-muted);
  border-radius: 999px;
  background: var(--color-bg);
}

.lang-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.lang-switch a:hover {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.lang-switch a[aria-current],
.lang-switch a[aria-current]:hover {
  background: var(--color-primary-dark);
  color: var(--color-on-primary);
  font-weight: 700;
  cursor: default;
}

@media (forced-colors: active) {
  .lang-switch a[aria-current] {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
  }
}

.lang-switch a:focus-visible {
  outline-offset: 2px;
}

.nav-toggle {
  min-height: 2.75rem;
  padding: 0.5rem 0.875rem;
  font: inherit;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.nav-toggle:hover {
  border-color: var(--color-primary-dark);
  color: var(--color-primary-dark);
}

.nav-toggle[aria-expanded="true"] {
  background: var(--color-primary-light);
  border-color: var(--color-primary-dark);
  color: var(--color-primary-dark);
}

/*
 * Narrow screens: once JavaScript has enabled the toggle (html.js), the list
 * becomes a drop-down panel below the header. Without JavaScript the full list
 * stays visible and wraps.
 */
@media (max-width: 68rem) {
  .header-inner {
    column-gap: 0.75rem;
  }

  .js .nav-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    flex-direction: column;
    gap: 0;
    padding: 0.5rem var(--gutter) 1rem;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 12px 24px -12px var(--shadow-tint);
  }

  .js .nav-list.is-open {
    display: flex;
  }

  .js .nav-list a {
    display: block;
    padding: 0.75rem 0;
  }

  .js .nav-list li + li {
    border-top: 1px solid var(--color-border);
  }
}

@media (min-width: 68.0625rem) {
  .nav-toggle {
    display: none;
  }
}

/* The header CTA keeps one line; it is repeated in the hero, so narrow
   screens (next to the menu button and language toggle) drop it. Other buttons may wrap (long labels such as
   "Welches Gesetz gilt für mich?"). */
.header-cta {
  white-space: nowrap;
}

@media (max-width: 34rem) {
  .header-cta {
    display: none;
  }
}

/* Footer: brand + description, then three link columns (product, company, legal) */
.site-footer {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  padding-block: clamp(3rem, 2.5rem + 2vw, 4rem) 1.5rem;
}

.site-footer p {
  margin: 0;
}

.footer-grid {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 52rem) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 4rem;
  }
}

/* Muted text on #F9FAFB: 4.6:1 */
.footer-brand p {
  max-width: 22rem;
  margin-top: 0.75rem;
  font-size: var(--text-sm);
  line-height: 1.6;
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 2rem 1rem;
}

.footer-heading {
  margin: 0 0 0.75rem;
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.footer-links {
  display: grid;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Inline-block with vertical padding keeps each link a comfortable target */
.footer-links a {
  display: inline-block;
  padding: 0.3rem 0;
  color: var(--color-text-muted);
  text-decoration: none;
}

/* All footer links look the same at rest, including the one to the current
   page (aria-current stays for screen readers); green only on hover/focus.
   The global :focus-visible outline still applies. */
.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--color-primary-dark);
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
}

.footer-bottom {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
}

/* ---------- 5. Homepage sections ---------- */

/* Hero */
.hero {
  padding-block: clamp(3rem, 2rem + 5vw, 6rem) var(--section-space);
  background: var(--color-bg);
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3.5rem;
  align-items: center;
}

@media (min-width: 60rem) {
  .hero-inner {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 4rem;
  }
}

.hero h1 {
  margin-bottom: 1.5rem;
}

.lead {
  max-width: 36rem;
  margin-bottom: 2rem;
  color: var(--color-text-muted);
  font-size: var(--text-xl);
  line-height: 1.55;
}

.hero-note {
  max-width: 34rem;
  margin: 1.25rem 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.hero-visual {
  margin: 0;
}

.hero-visual figcaption {
  margin-top: 1.75rem;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: center;
}

/* Product mockup (decorative, CSS only). The offset light-green block behind
   it is a solid shadow, so it never sits under text. */
.mockup {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0.75rem 0.75rem 0 0 var(--color-primary-light), var(--shadow-float);
  overflow: hidden;
  font-size: var(--text-sm);
}

.mockup-bar {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.75rem 1rem;
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
}

.mockup-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--color-border-strong);
}

.mockup-title {
  margin-left: auto;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.mockup-body {
  display: grid;
  gap: 1.5rem;
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
}

.mockup-file {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.mockup-file-icon {
  flex: none;
  color: var(--color-primary);
}

.mockup-file-name {
  display: block;
  font-weight: 650;
}

.mockup-file-meta {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

/* Horizontal stepper: Upload PDF → Analyze → Remediate → Accessible PDF */
.mockup-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: var(--color-text-muted);
}

.mockup-steps li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding-inline: 0.25rem;
}

/* Connector line to the previous step */
.mockup-steps li + li::before {
  content: "";
  position: absolute;
  top: 0.875rem;
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--color-border-strong);
  z-index: 0;
}

.mockup-steps li.is-done + li::before {
  background: var(--color-primary);
}

.mockup-step-dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 2px solid var(--color-border-strong);
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-on-primary);
}

.mockup-steps .is-done,
.mockup-steps .is-current {
  color: var(--color-text);
}

.is-done > .mockup-step-dot {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.is-current > .mockup-step-dot {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  box-shadow: 0 0 0 4px var(--color-primary-light);
}

.mockup-progress-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.mockup-progress-track {
  height: 0.5rem;
  border-radius: 999px;
  background: var(--color-border);
  overflow: hidden;
}

.mockup-progress-fill {
  width: 68%;
  height: 100%;
  border-radius: inherit;
  background: var(--color-primary);
}

.mockup-checks {
  display: grid;
  gap: 0.625rem;
  margin: 0;
  padding: 1rem;
  list-style: none;
  background: var(--color-bg-alt);
  border-radius: var(--radius);
}

.mockup-checks li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.mockup-checks li::before {
  content: "";
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
}

/* Check mark: white SVG (= --color-on-primary) on the primary fill */
.mockup-checks .is-done::before {
  background-color: var(--color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3 3 7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.75rem;
}

.mockup-checks .is-pending {
  color: var(--color-text-muted);
}

.mockup-checks .is-pending::before {
  border: 2px dashed var(--color-primary);
}

/* Benefit cards */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  padding: 2rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.card p {
  margin: 0;
  color: var(--color-text-muted);
}

.card-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.25rem;
  border-radius: var(--radius-sm);
  background: var(--color-primary-light);
  color: var(--color-primary);
}

/*
 * Offering: editorial two-column layout. Left: heading, short description and
 * the result statement (normal text size, thin green rule, number only bold).
 * Right: the five services as a quiet list in one bordered panel.
 */
.offer {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 60rem) {
  .offer {
    grid-template-columns: 5fr 7fr;
    gap: 4.5rem;
  }
}

.offer-intro {
  color: var(--color-text-muted);
  font-size: var(--text-lg);
}

.offer-result {
  margin-top: 2rem;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 3px solid var(--color-primary);
}

.offer-claim {
  margin-bottom: 0.75rem;
  color: var(--color-text);
  font-size: var(--text-lg);
  line-height: 1.55;
}

.offer-claim strong {
  color: var(--color-primary-dark);
  font-weight: 700;
}

.offer-note {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.offer-list {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.offer-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  padding: 1.25rem clamp(1rem, 0.75rem + 1vw, 1.5rem);
}

.offer-item + .offer-item {
  border-top: 1px solid var(--color-border);
}

.offer-icon {
  margin-top: 0.125rem;
  color: var(--color-primary);
}

.offer-item h3 {
  margin-bottom: 0.25rem;
  font-size: var(--text-lg);
}

.offer-item p {
  margin: 0;
  color: var(--color-text-muted);
}

/* Standards / trust */
.standards {
  display: grid;
  gap: 3rem;
  align-items: start;
}

@media (min-width: 60rem) {
  .standards {
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
  }
}

.standards-copy > p:not(.eyebrow):not(.fine-print) {
  color: var(--color-text-muted);
  font-size: var(--text-lg);
}

.standards-copy .fine-print {
  margin-top: 1.5rem;
  padding-left: 1rem;
  border-left: 3px solid var(--color-primary);
}

.standards-list {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.standards-list li {
  padding: 1.25rem 1.5rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-sm);
}

.standards-list h3 {
  margin-bottom: 0.25rem;
  font-size: var(--text-lg);
  color: var(--color-primary-dark);
}

.standards-list p {
  margin: 0;
  color: var(--color-text-muted);
}

/* Standards page: the same bordered items in columns (quality assurance) */
.standards-list-grid {
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

/* Standards page: no-certification note under the quality-assurance list */
.standards-note {
  max-width: 44rem;
  margin: 2rem auto 0;
  text-align: center;
}

/* Final call to action: light-green panel, dark text */
.cta-panel {
  padding: clamp(2.5rem, 2rem + 4vw, 5rem) clamp(1.5rem, 1rem + 4vw, 5rem);
  border-radius: var(--radius-lg);
  background: var(--color-primary-light);
  color: var(--color-text);
  text-align: center;
}

.cta-panel h2 {
  max-width: 40rem;
  margin-inline: auto;
  color: var(--color-primary-dark);
}

/* Text colour, not muted grey: muted on #DCFCE7 would fall below AA. */
.cta-panel p {
  max-width: 34rem;
  margin: 0 auto 2rem;
  color: var(--color-text);
  font-size: var(--text-lg);
}

.cta-panel h2 + .button-row {
  margin-top: 1.75rem;
}

.cta-panel .button-row {
  justify-content: center;
}

.cta-panel .button:focus-visible {
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* ---------- 6. Subpages ---------- */

/* Page header: badge, h1 and lead on the light grey band */
.page-hero {
  padding-block: clamp(3rem, 2rem + 4vw, 5rem);
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
}

.page-hero h1 {
  max-width: 48rem;
  font-size: clamp(2rem, 1.5rem + 2.4vw, 3.25rem);
}

.page-hero .lead {
  max-width: 44rem;
  margin-bottom: 0;
}

.page-hero .lead + .lead {
  margin-top: 1rem;
}

/* Actions below the lead (e.g. "to the workspace" on the account page) */
.page-hero .lead + .button-row {
  margin-top: 1.5rem;
}

/* h2 that looks like an h3 (heading order stays correct) */
.h3 {
  font-size: var(--text-h3);
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* Visible "not implemented" notice: text #1F2937 on #DCFCE7 (13.4:1) */
.notice {
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--color-primary-dark);
  border-radius: var(--radius-sm);
  background: var(--color-primary-light);
  color: var(--color-text);
}

.notice p {
  margin: 0;
}

/* Placeholder copy that still has to be written */
.placeholder-text {
  color: var(--color-text-muted);
  font-style: italic;
}

/*
 * About page: founder panel. Photo frame on the left, text on the right; the
 * frame is a fixed square, so a real <img> replaces the placeholder as is.
 */
.founder {
  display: grid;
  gap: 1.75rem;
  align-items: start;
  padding: 2rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

@media (min-width: 40rem) {
  .founder {
    grid-template-columns: 10rem 1fr;
    gap: 1.75rem;
  }
}

.founder-photo {
  width: 10rem;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-primary-light);
}

.founder-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.founder-photo-placeholder {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.5rem;
  height: 100%;
  border: 1px dashed var(--color-primary);
  border-radius: inherit;
  color: var(--color-primary);
}

.founder-photo-placeholder span {
  color: var(--color-primary-dark);
  font-size: var(--text-sm);
  font-weight: 600;
}

.founder-text {
  max-width: 44rem;
}

.founder-text h3 {
  margin: 0;
}

.founder-role {
  margin: 0.25rem 0 1rem;
  color: var(--color-primary-dark);
  font-weight: 600;
}

.founder-text p:not(.founder-role) {
  color: var(--color-text-muted);
}

.founder-text p:last-child {
  margin-bottom: 0;
}

/* Disabled controls (prototype pages): grey, not interactive */
.button:disabled,
fieldset:disabled .button {
  background: var(--color-border);
  border-color: var(--color-border);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* Mock upload (check.html); the fieldset is disabled */
.upload {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.upload-drop {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  padding: clamp(2rem, 1.5rem + 3vw, 3.5rem) 1.5rem;
  border: 2px dashed var(--color-text-muted);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  text-align: center;
}

.upload-icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.upload-title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
}

.upload-file {
  font-weight: 600;
}

.upload-drop .fine-print {
  margin: 0;
}

.upload-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.5rem;
}

.checkbox {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}

.checkbox input {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.2rem;
  accent-color: var(--color-primary-dark);
}

input,
select,
textarea {
  font: inherit;
  color: var(--color-text);
}

fieldset:disabled input,
fieldset:disabled select,
fieldset:disabled textarea,
fieldset:disabled label {
  cursor: not-allowed;
}

/* Two columns: text and an aside (product, contact) */
.split {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 52rem) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }

  .split-wide {
    grid-template-columns: 3fr 2fr;
  }
}

.split .lead {
  font-size: var(--text-lg);
  margin-bottom: 1.5rem;
}

.split-aside {
  padding: 1.75rem 2rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

/* Check-mark list: green ring with a primary-dark tick (graphics only) */
.check-list {
  align-content: start;
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  position: relative;
  padding-left: 2rem;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--color-primary-light);
}

.check-list li::after {
  content: "";
  position: absolute;
  left: 0.45rem;
  top: 0.42rem;
  width: 0.35rem;
  height: 0.65rem;
  border-right: 2px solid var(--color-primary-dark);
  border-bottom: 2px solid var(--color-primary-dark);
  transform: rotate(45deg);
}

/* Workflow chips joined by chevrons (product.html) */
.flow-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Text #1F2937 on #DCFCE7: 13.4:1 */
.flow-list li {
  padding: 0.4rem 1rem;
  border-radius: 999px;
  background: var(--color-primary-light);
  color: var(--color-text);
  font-weight: 600;
}

.flow-list li + li {
  position: relative;
  margin-left: 2rem;
}

.flow-list li + li::before {
  content: "";
  position: absolute;
  left: -1.3rem;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-top: 2px solid var(--color-primary);
  border-right: 2px solid var(--color-primary);
  transform: translateY(-50%) rotate(45deg);
}

/* Pricing page (pricing.html): compact header and section, so the free
   check band, all three plans and their buttons fit on one desktop screen.
   Scoped by modifier classes; .page-hero and .section-tight keep their
   spacing on every other page. On desktop the spacing above the heading,
   below the subtitle and between the free check band and the plans grows
   with the viewport height (vh): short screens get compact values so the
   plans stay above the fold, taller screens more air. Below the plans only
   a normal section spacing follows (no viewport-filling min-height), so the
   footer starts soon after the cards. */
.page-hero-compact {
  padding-block: clamp(2.25rem, 1.75rem + 2vw, 3rem) clamp(2rem, 1.5rem + 1.5vw, 2.5rem);
}

.page-hero-compact h1 {
  margin-bottom: 0.75rem;
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.5rem);
}

.page-hero-compact .lead {
  max-width: 60rem;
  font-size: var(--text-lg);
}

.pricing-section {
  padding-block: 2rem clamp(2.5rem, 2rem + 2vw, 4rem);
}

/* Desktop (three plans side by side, screen at least 40rem high) */
@media (min-width: 70rem) and (min-height: 40rem) {
  .page-hero-compact {
    padding-block: clamp(1.75rem, 42vh - 19rem, 6.5rem) clamp(1.25rem, 20vh - 8.625rem, 3.75rem);
  }

  .pricing-section {
    padding-top: clamp(1.25rem, 10vh - 3.6875rem, 2.75rem);
  }

  .pricing-section .free-check-band {
    margin-bottom: clamp(1.25rem, 8vh - 2.7rem, 2.25rem);
  }
}

/* Short desktop windows: compact values, normal flow */
@media (min-width: 70rem) and (max-height: 39.99rem) {
  .page-hero-compact {
    padding-block: 1.75rem 1.25rem;
  }

  .pricing-section {
    padding-top: 1.25rem;
  }

  .pricing-section .free-check-band {
    margin-bottom: 1.25rem;
  }
}

/* Pricing plans */
.plan-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  max-width: 36rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.plan {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  padding: 2rem 1.5rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-primary);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

/* Three plans side by side only where each card keeps room for the longest
   German button label ("PDF barrierefrei machen", about 17rem) on one line,
   with some reserve for font rendering differences */
@media (min-width: 70rem) {
  .plan-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    max-width: none;
  }

  /* Title, amount, price line, list and button share rows across the three
     cards (the price block spans the amount and price-line rows), so the
     amounts, the second price lines, the dividers, the lists and the buttons
     line up whatever the text length */
  .plan {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 1rem;
  }

  .plan-pricing {
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: 0.25rem;
  }

  .plan .button {
    align-self: end;
    justify-self: start;
  }
}

.plan h3 {
  margin: 0;
}

.plan-price {
  margin: 0;
  color: var(--color-primary-dark);
  font-size: var(--text-h3);
  font-weight: 750;
}

.plan .check-list {
  flex: 1;
  gap: 0.6875rem;
}

.plan .button {
  align-self: flex-start;
  margin-top: 0.75rem;
}

/* Price block of a plan: amount, then the minimum order / package / scope
   line. The custom-offer text is smaller than an amount; it gets the amount's
   line height and sits on the bottom of that row, so the second lines of all
   three price blocks share one row (also when the plans are stacked). */
.plan-pricing {
  --plan-price-size: clamp(1.75rem, 1.5rem + 0.75vw, 2.125rem);
  display: grid;
  gap: 0.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.plan-pricing .plan-price {
  font-size: var(--plan-price-size);
  line-height: 1.2;
}

.plan-pricing .plan-price-custom {
  display: flex;
  align-items: flex-end;
  min-height: calc(var(--plan-price-size) * 1.2);
  font-size: var(--text-xl);
  line-height: 1.4;
}

.plan-price-unit {
  font-size: var(--text-lg);
  font-weight: 600;
  white-space: nowrap;
}

/* Text colour: the minimum order / package size must be clearly visible */
.plan-price-note {
  margin: 0;
  color: var(--color-text);
  font-weight: 600;
}

/* Free check: lighter introductory band above the paid plans */
.free-check-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  max-width: 36rem;
  margin: 0 auto 1.25rem;
  padding: 0.875rem 1.5rem;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

@media (min-width: 70rem) {
  .free-check-band {
    max-width: none;
  }
}

.free-check-text {
  flex: 1 1 24rem;
}

.free-check-text h2 {
  margin: 0 0 0.25rem;
}

.free-check-text p {
  margin: 0;
  color: var(--color-text);
}

/* Contact form (contact.html) */
.form-card {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.form-card h2 {
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
}

.form-fields {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.field {
  display: grid;
  gap: 0.35rem;
}

.field label {
  font-weight: 600;
}

/* Field borders #6B7280: 4.8:1 against white (non-text contrast >= 3:1) */
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--color-text-muted);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}

.field input:disabled,
.field select:disabled,
.field textarea:disabled {
  background: var(--color-bg-alt);
}

.form-fields .button {
  justify-self: start;
}

/*
 * Contact form (real form, js/contact.js): required marker, hint, inline
 * errors, error summary, failure alert, success panel, honeypot.
 */
.contact-form[hidden],
.form-success[hidden],
.error-summary[hidden],
.field-error[hidden] {
  display: none;
}

.required-marker {
  font-weight: 400;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.field-hint {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.field textarea {
  min-height: 9rem;
  resize: vertical;
  font: inherit;
}

.field input,
.field select {
  font: inherit;
  min-height: 2.75rem;
}

/* Invalid fields: thicker red border plus a bar on the left (shape, not only colour) */
.field.has-error {
  padding-left: 0.875rem;
  border-left: 4px solid var(--color-error);
}

.field [aria-invalid="true"] {
  border: 2px solid var(--color-error);
}

.field-error {
  margin: 0;
  color: var(--color-error);
  font-weight: 600;
}

.field-error-prefix {
  font-weight: 800;
}

.error-summary {
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  border: 3px solid var(--color-error);
  border-radius: var(--radius-sm);
  background: var(--color-error-light);
  color: var(--color-text);
}

.error-summary h3 {
  margin: 0 0 0.5rem;
  font-size: var(--text-lg);
}

.error-summary-list {
  margin: 0;
  padding-left: 1.25rem;
}

/* Links on #FEF2F2: #B91C1C 5.9:1 */
.error-summary a {
  color: var(--color-error);
  font-weight: 600;
  text-decoration-color: currentColor;
}

.error-summary:focus-visible,
.error-summary:focus {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.form-privacy {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.form-actions {
  display: grid;
  gap: 1rem;
  justify-items: start;
}

/* Failure message after sending: text #1F2937 on #FEF2F2 (13.4:1) */
.form-alert {
  margin: 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--color-error);
  border-radius: var(--radius-sm);
  background: var(--color-error-light);
  color: var(--color-text);
}

.contact-form .button[aria-disabled="true"] {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  cursor: progress;
}

/* Success panel: text #1F2937 on #DCFCE7 (13.4:1) */
.form-success {
  padding: 1.5rem;
  border-left: 4px solid var(--color-primary-dark);
  border-radius: var(--radius-sm);
  background: var(--color-primary-light);
}

.form-success h3 {
  margin-bottom: 0.5rem;
}

.form-success h3:focus {
  outline: none;
}

.form-success h3:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

/* Honeypot: off screen and hidden from assistive technology */
.hp-field {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (forced-colors: active) {
  .field.has-error,
  .field [aria-invalid="true"],
  .error-summary,
  .form-alert,
  .form-success {
    border-color: CanvasText;
  }

  .field-error {
    color: CanvasText;
  }

  .error-summary a {
    color: LinkText;
  }
}

.contact-list {
  margin: 0;
}

.contact-list dt {
  font-weight: 700;
}

.contact-list dd {
  margin: 0 0 1rem;
}

/* Legal and other text pages */
.prose {
  max-width: 48rem;
}

.prose section + section {
  margin-top: 2.5rem;
}

.prose h2 {
  font-size: var(--text-h3);
}

/* ---------- API page (api.html) ---------- */

code,
pre {
  font-family: var(--font-mono);
}

/* Left-aligned section intro (heading + short paragraph) */
.api-intro {
  max-width: 44rem;
  margin-bottom: 2.5rem;
}

.api-intro p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-lg);
}

.page-hero .notice {
  max-width: 44rem;
  margin: 2rem 0 0;
}

/* Back-to-back white sections: the CTA does not need the full top padding */
.section-tight-top {
  padding-top: 0;
}

/* Workflow: four calm panels, small outlined numbers */
.api-steps {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .api-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

.api-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.5rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.api-step h3 {
  margin-bottom: 0.25rem;
  font-size: var(--text-lg);
}

.api-step p {
  margin-bottom: 1rem;
  color: var(--color-text-muted);
}

/* #166534 on white: 7.1:1 */
.api-step-number {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.875rem;
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  color: var(--color-primary-dark);
  font-size: 0.9375rem;
  font-weight: 700;
}

/* Endpoint shown in a step: method label + path */
.api-endpoint {
  margin-top: auto;
  padding: 0.375rem 0.625rem;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

/* HTTP method label: #166534 on #DCFCE7 (6.5:1) */
.method {
  display: inline-block;
  min-width: 3.75rem;
  margin-right: 0.375rem;
  padding: 0.0625rem 0.375rem;
  border-radius: 0.25rem;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
}

/* Endpoint overview: one row per endpoint, hairline dividers */
.endpoint-list {
  margin: 0;
}

.endpoint-list > div {
  padding: 0.875rem 0;
}

.endpoint-list > div:first-child {
  padding-top: 0;
}

.endpoint-list > div:last-child {
  padding-bottom: 0;
}

.endpoint-list > div + div {
  border-top: 1px solid var(--color-border);
}

.endpoint-list dt {
  font-size: var(--text-sm);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.endpoint-list dd {
  margin: 0.25rem 0 0;
  color: var(--color-text-muted);
}

/* Code examples: light blocks on the grey section, scrollable by keyboard */
.api-examples {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 60rem) {
  .api-examples {
    grid-template-columns: 3fr 2fr;
  }
}

.code-figure {
  min-width: 0;
  margin: 0;
}

.code-figure figcaption {
  margin-bottom: 0.5rem;
  font-size: var(--text-sm);
  font-weight: 600;
}

.code-figure pre {
  margin: 0;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 0.8125rem;
  line-height: 1.65;
  tab-size: 2;
}

.code-figure .fine-print {
  margin: 0.75rem 0 0;
}

.fine-print code {
  font-size: 0.95em;
}

/* Access section: the two panels carry h3 headings */
#access .split-aside h3 {
  font-size: var(--text-lg);
}

#access .split-aside p {
  margin: 0;
  color: var(--color-text-muted);
}

/* ---------- Account pages (login, registration, invitation, account, organisation) ----------
 * Pages: login.html, register*.html, invite.html, account.html,
 * organization.html (+ en/). Scripts: js/account-common.js + one per page.
 * Reuses .form-card, .field, .error-summary, .form-alert, .notice, .button-*.
 * Contrast of the pairs added here:
 *   text #1F2937 on #FFFFFF / #F9FAFB 14.7:1 / 14.1:1 (cards, dev box)
 *   white on text #1F2937 14.7:1 (dev badge) · white on error #B91C1C 6.5:1 (danger button)
 *   primary-dark #166534 on #FFFFFF 7.1:1 (small secondary buttons, choice titles)
 *   muted #6B7280 on #FFFFFF 4.8:1 (choice text, table meta)
 */

/* Registration entry: two large choice cards (links: they navigate) */
.choice-grid {
  display: grid;
  gap: 1.25rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}

@media (min-width: 44rem) {
  .choice-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.choice-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--color-bg);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.choice-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-float);
}

.choice-card:focus-visible {
  outline-offset: 4px;
  border-color: var(--color-primary-dark);
}

.choice-title {
  color: var(--color-primary-dark);
  font-size: var(--text-xl);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.choice-text {
  color: var(--color-text-muted);
}

.account-aside,
.account-back {
  margin: 1.5rem 0 0;
}

.account-back {
  margin: 0 0 1rem;
}

.account-loading {
  color: var(--color-text-muted);
}

.account-page h2[tabindex="-1"]:focus,
.account-page h3[tabindex="-1"]:focus,
.page-hero h1[tabindex="-1"]:focus {
  outline: none;
}

.account-page h2[tabindex="-1"]:focus-visible,
.account-page h3[tabindex="-1"]:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

/* Registration form: owner and organisation groups */
.account-fieldset {
  padding: 0;
}

.account-fieldset legend {
  margin-bottom: 0.25rem;
  padding: 0;
  font-size: var(--text-h3);
  font-weight: 700;
}

.account-fieldset + .account-fieldset {
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

/* Password field with a show/hide toggle (aria-pressed) */
.password-input {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.password-input input {
  flex: 1 1 12rem;
  min-width: 0;
}

.password-toggle {
  min-height: 2.75rem;
  padding: 0.5rem 0.875rem;
  background: var(--color-bg);
  border: 1px solid var(--color-text-muted);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}

.password-toggle:hover {
  border-color: var(--color-primary-dark);
  color: var(--color-primary-dark);
}

.password-toggle[aria-pressed="true"] {
  background: var(--color-primary-light);
  border-color: var(--color-primary-dark);
  color: var(--color-primary-dark);
}

/* Inline success after saving (text on #DCFCE7 13.4:1) */
.form-success-inline {
  margin: 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--color-primary-dark);
  border-radius: var(--radius-sm);
  background: var(--color-primary-light);
  color: var(--color-text);
}

.account-page .button[aria-disabled="true"] {
  cursor: progress;
  opacity: 0.85;
}

/* Facts (organisation, role, status) as a definition list */
.account-facts {
  display: grid;
  gap: 0.75rem 2rem;
  margin: 0 0 1.5rem;
}

@media (min-width: 40rem) {
  .account-facts {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  }
}

.account-facts dt {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
}

.account-facts dd {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* One card per organisation on the account page */
.account-card {
  margin-bottom: 1.25rem;
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.account-card h3 {
  margin-bottom: 1rem;
  overflow-wrap: anywhere;
}

.account-card .notice,
.account-card .dev-box {
  margin-bottom: 1rem;
}

/* Profile, password and sign-out cards side by side on wide screens */
.account-columns {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 60rem) {
  .account-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.account-columns > * {
  min-width: 0;
}

/* Development-only controls: dashed frame and a dark label, so they are
   never mistaken for a product feature */
.dev-box {
  padding: 1.25rem;
  background: var(--color-bg-alt);
  border: 2px dashed var(--color-text);
  border-radius: var(--radius-sm);
  color: var(--color-text);
}

.dev-box p {
  margin: 0 0 0.75rem;
}

.dev-box p:last-child {
  margin-bottom: 0;
}

.dev-box .field {
  margin-bottom: 0.75rem;
}

.dev-box input[readonly] {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.dev-badge {
  display: inline-block;
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  background: var(--color-text);
  color: var(--color-bg);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Tables: scroll inside their own focusable region on narrow screens
   (the page itself never scrolls sideways) */
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}

.table-scroll[hidden] {
  display: none;
}

.table-scroll:focus-visible {
  outline-offset: 2px;
}

.account-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.account-table caption {
  padding: 0.75rem 1rem;
  font-weight: 700;
  text-align: left;
}

.account-table th,
.account-table td {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.account-table thead th {
  background: var(--color-bg-alt);
  white-space: nowrap;
}

.account-table tbody th {
  font-weight: 600;
}

.account-table td:nth-child(2) {
  overflow-wrap: anywhere;
  min-width: 10rem;
}

.table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 10rem;
}

.badge-expired {
  color: var(--color-error);
}

/* Small buttons in tables: dark green label (7.1:1), never white on #16A34A */
.button-small {
  min-height: 2.25rem;
  padding: 0.25rem 0.75rem;
  font-size: var(--text-sm);
  white-space: nowrap;
}

.button-danger {
  background: var(--color-error);
  border-color: var(--color-error);
  color: var(--color-on-primary);
}

.button-danger:hover,
.button-danger:active {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-on-primary);
}

/* Audit events: date, then the event */
.audit-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.audit-list li {
  display: grid;
  gap: 0.125rem 1.5rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--color-border);
}

@media (min-width: 48rem) {
  .audit-list li {
    grid-template-columns: 14rem 1fr;
  }
}

.audit-list time {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Confirmation dialog (native <dialog>, opened with showModal) */
.account-dialog {
  width: min(32rem, calc(100vw - 2rem));
  padding: 1.5rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
  color: var(--color-text);
}

.account-dialog::backdrop {
  background: var(--color-backdrop);
}

.account-dialog h2 {
  margin-bottom: 0.75rem;
}

.dialog-actions {
  justify-content: flex-end;
  margin-top: 1.5rem;
}

@media (forced-colors: active) {
  .dev-box,
  .choice-card,
  .account-dialog,
  .form-success-inline {
    border-color: CanvasText;
  }

  .dev-badge {
    border: 1px solid CanvasText;
  }
}

/* ---------- Knowledge area (knowledge*.html, homepage teaser) ----------
 * Editorial reference pages: grey page hero, alternating white/grey bands,
 * thin borders and green accent rules as elsewhere on the site. Colours are
 * existing tokens only: links and small green text #166534 (>= 6.8:1 on
 * #FFFFFF/#F9FAFB), muted text only on #FFFFFF (4.8:1) or #F9FAFB (4.6:1),
 * #16A34A only for rules, markers and chevrons (non-text graphics).
 */

/* Homepage teaser: compact band between the offering and the final CTA */
.topic-teaser {
  display: grid;
  gap: 1.75rem;
  align-items: center;
}

@media (min-width: 60rem) {
  .topic-teaser {
    grid-template-columns: 7fr 5fr;
    gap: 4.5rem;
  }
}

.topic-teaser h2 {
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
}

/* Muted text on #F9FAFB: 4.6:1 */
.topic-teaser-copy p:not(.eyebrow) {
  max-width: 40rem;
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-lg);
}

.topic-teaser-links {
  display: grid;
  gap: 1.25rem;
  justify-items: start;
}

/* Topic links as quiet pills (white, green border, #166534 label) */
.topic-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.topic-chips a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  background: var(--color-bg);
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  color: var(--color-primary-dark);
  font-weight: 600;
  text-decoration: none;
}

.topic-chips a:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary-dark);
  text-decoration: underline;
}

/* Breadcrumb in the page hero (Wissen > BFSG); chevrons are CSS borders */
.breadcrumb {
  margin: 0 0 1.25rem;
  font-size: var(--text-sm);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  display: inline-flex;
  align-items: center;
}

.breadcrumb li + li::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  margin: 0 0.75rem 0 0.5rem;
  border-top: 2px solid var(--color-text-muted);
  border-right: 2px solid var(--color-text-muted);
  transform: rotate(45deg);
}

.breadcrumb a {
  display: inline-block;
  padding: 0.25rem 0;
  font-weight: 600;
}

.breadcrumb [aria-current="page"] {
  color: var(--color-text);
  font-weight: 600;
}

/* "Auf dieser Seite": anchor list at the end of the page hero */
.page-toc {
  max-width: 48rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}

.page-toc-title {
  margin: 0 0 0.5rem;
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.page-toc ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-toc a {
  display: inline-block;
  padding: 0.25rem 0;
  font-weight: 600;
}

/* Left-aligned intro for long-form sections (text colour, not muted) */
.topic-intro {
  max-width: 48rem;
  margin-bottom: 2rem;
}

.topic-intro > :last-child {
  margin-bottom: 0;
}

/* Two-column grid for 2 or 4 items (hub cards, examples, principles) */
.topic-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 44rem) {
  .topic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.topic-grid .card h3 {
  font-size: var(--text-lg);
}

/*
 * Hub card: one link (in the heading) stretched over the whole card with
 * ::after, so the card is one tab stop named by its heading; the focus ring
 * is drawn around the card.
 */
.topic-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: clamp(1.5rem, 1rem + 1.5vw, 2rem);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-primary);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.topic-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-float);
}

.topic-card h3 {
  margin: 0;
  font-size: var(--text-xl);
}

.topic-card-meta {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
}

.topic-card p:not(.topic-card-meta) {
  margin: 0;
  color: var(--color-text-muted);
}

.topic-card-link {
  color: var(--color-primary-dark);
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.topic-card:hover .topic-card-link {
  text-decoration-thickness: 3px;
}

.topic-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}

.topic-card-link:focus-visible {
  outline: none;
}

.topic-card-link:focus-visible::after {
  outline: 3px solid var(--color-focus);
  outline-offset: 4px;
}

/* Fact / highlight box: same family as .standards-list items */
.fact-box {
  padding: 1.25rem 1.5rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-sm);
}

* + .fact-box {
  margin-top: 1.5rem;
}

.split > .fact-box {
  margin-top: 0;
}

.fact-box h3 {
  margin: 0 0 0.75rem;
  font-size: var(--text-lg);
}

.fact-box > :last-child {
  margin-bottom: 0;
}

.fact-list {
  display: grid;
  gap: 0.75rem;
  margin: 0;
}

.fact-list dt {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
}

.fact-list dd {
  margin: 0;
}

/* Plain bullet / numbered list for running text */
.text-list {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

.text-list li + li {
  margin-top: 0.5rem;
}

ul.text-list {
  list-style-type: disc;
}

ul.text-list li::marker {
  color: var(--color-primary);
}

ol.text-list li::marker {
  color: var(--color-primary-dark);
  font-weight: 700;
}

.card .text-list,
.split-aside .text-list {
  margin-bottom: 0;
}

/* Two bordered panels side by side (machine vs. human checks) */
.check-compare {
  align-items: stretch;
}

.check-compare .split-aside h3 {
  font-size: var(--text-lg);
}

/*
 * Relationship diagram: the legal framework (focal block) -> standard ->
 * criteria, plus PDF/UA as a complementary PDF standard (dashed connector,
 * no arrowhead). The text states every relation; connectors are decoration.
 */
.layer-stack {
  --layer-gap: 1.75rem;
  display: grid;
  gap: var(--layer-gap);
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.layer {
  position: relative;
  padding: 1.25rem 1.5rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

/* Connector: a centred line from the block above, ending in a filled
   arrowhead that touches the block below */
.layer + .layer::before,
.layer + .layer::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
}

.layer + .layer::before {
  top: calc(-1 * var(--layer-gap) - 1px);
  width: 2px;
  height: calc(var(--layer-gap) - 0.5rem);
}

.layer + .layer::after {
  top: calc(-0.625rem - 1px);
  width: 0.875rem;
  height: 0.625rem;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.layer-level {
  margin: 0 0 0.25rem;
  color: var(--color-primary-dark);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.layer h3 {
  margin-bottom: 0.25rem;
  font-size: var(--text-lg);
}

.layer > p:last-child {
  margin: 0;
  color: var(--color-text-muted);
}

/* Focal block: the legal framework is where the structure starts */
.layer-law {
  padding: 1.5rem 1.75rem;
  border: 2px solid var(--color-primary);
}

.layer-law h3 {
  font-size: var(--text-xl);
}

.layer-law .layer-lead {
  margin: 0;
  color: var(--color-text);
}

/* PDF/UA complements the stack: dashed connector, no arrowhead */
.layer + .layer-pdf::before {
  height: var(--layer-gap);
  background: repeating-linear-gradient(var(--color-primary) 0 0.375rem, transparent 0.375rem 0.625rem);
}

.layer + .layer-pdf::after {
  content: none;
}

.layer-pair {
  display: grid;
  gap: 1rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 40rem) {
  .layer-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.layer-pair > li {
  padding: 1rem 1.25rem;
  background: var(--color-bg-alt);
  border-radius: var(--radius-sm);
}

.layer-pair h4 {
  margin: 0 0 0.25rem;
  font-size: var(--text-base);
}

/* Muted text on #F9FAFB: 4.6:1 */
.layer-pair p {
  margin: 0;
  color: var(--color-text-muted);
}

/* FAQ: native <details>/<summary> in one bordered panel */
.faq-list {
  max-width: 48rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.faq-item + .faq-item {
  border-top: 1px solid var(--color-border);
}

.faq-item summary {
  position: relative;
  display: block;
  min-height: 2.75rem;
  padding: 1rem 3.25rem 1rem 1.25rem;
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "";
  position: absolute;
  right: 1.375rem;
  top: 1.4rem;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--color-primary-dark);
  border-bottom: 2px solid var(--color-primary-dark);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.faq-item[open] > summary::after {
  top: 1.65rem;
  transform: rotate(-135deg);
}

.faq-item summary:hover {
  color: var(--color-primary-dark);
}

.faq-item summary:focus-visible {
  outline-offset: -3px;
  border-radius: var(--radius-sm);
}

.faq-answer {
  padding: 0 1.25rem 1.25rem;
}

.faq-answer > :last-child {
  margin-bottom: 0;
}

/* Comparison table (inside .table-scroll: scrolls in its own region on phones) */
.compare-table {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
}

.compare-title {
  margin: 0 0 0.75rem;
  font-weight: 700;
}

.compare-table th,
.compare-table td {
  padding: 0.875rem 1rem;
  border-top: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.compare-table thead th {
  background: var(--color-bg-alt);
}

.compare-table tbody th {
  width: 11rem;
  font-weight: 700;
}

/* Phones: a narrower row-header column leaves more of the scroll region for the data */
@media (max-width: 40rem) {
  .compare-table {
    min-width: 34rem;
  }

  .compare-table tbody th {
    width: 7rem;
  }
}

.table-scroll + .fine-print {
  max-width: 48rem;
  margin-top: 1rem;
}

/* The relationship section reads as one block at the full content width,
   like the topic grid above it */
#relationship .topic-intro {
  max-width: none;
}

.layer-stack + .fine-print {
  margin-top: 1rem;
}

@media (forced-colors: active) {
  .topic-card,
  .fact-box,
  .layer,
  .faq-list,
  .topic-chips a {
    border-color: CanvasText;
  }

  .layer + .layer::before,
  .layer + .layer::after {
    forced-color-adjust: none;
    background: CanvasText;
  }

  .layer + .layer-pdf::before {
    background: repeating-linear-gradient(CanvasText 0 0.375rem, transparent 0.375rem 0.625rem);
  }
}

/* ---------- 7. Preferences ---------- */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}