/* Jede Aenderung an dieser Datei verlangt eine neue Fassung im Verweis
   jeder Positivlisten-Seite: href="startseite.css?v=<kurzform>".

   Ohne sie liefert der Browser eines wiederkehrenden Besuchers weiter
   seine zwischengespeicherte Fassung aus -- HTML-Aenderungen erscheinen
   sofort, CSS-Aenderungen nie.

   Die Kurzform wird abgeleitet, nicht gepflegt: sie ist ein Praefix des
   Inhaltshashes dieser Datei. Passt sie nicht zum Inhalt, meldet
   tests/test_public_stylesheet_version.py rot und der Releasebuild in
   tools/static_web_release.py bricht ab, bevor irgendetwas ausgeliefert
   wird. Die erwartete Kurzform steht in beiden Meldungen. */

:root {
  --blue: #2c6fbb;
  --blue-bright: #64a8f2;
  --blue-pale: #e8f2fd;
  --ink: #0b1726;
  --ink-soft: #405166;
  --night: #07111d;
  --night-raised: #0d1b2b;
  --line: #c8d4e1;
  --line-dark: #294058;
  --surface: #f4f7fa;
  --white: #ffffff;
  --orange: #e98533;
  --page: min(1320px, calc(100% - 48px));
  --font: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --shadow: 0 24px 60px rgba(3, 14, 27, 0.24);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

body.menu-open {
  overflow: hidden;
}

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

a {
  color: inherit;
  text-underline-offset: 0.22em;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button,
input,
select,
textarea {
  font: inherit;
}

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 12px;
  z-index: 1000;
  padding: 0.75rem 1rem;
  transform: translateY(-160%);
  background: var(--white);
  color: var(--ink);
  font-weight: 800;
}

.skip-link:focus {
  transform: translateY(0);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  line-height: 1.08;
  letter-spacing: -0.035em;
}

h1 {
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
  color: var(--white);
  overflow-wrap: normal;
  font-size: clamp(2.55rem, 4.4vw, 4.8rem);
  font-weight: 720;
  max-width: none;
}

h2 {
  margin-bottom: 0;
  font-size: clamp(2.1rem, 4.2vw, 4.4rem);
  font-weight: 720;
  max-width: 15ch;
}

h3 {
  margin-bottom: 0.65rem;
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
  color: var(--blue);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}


.eyebrow-light {
  color: var(--blue-bright);
}

.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.2rem;
  border: 1px solid var(--blue);
  background: var(--blue);
  color: var(--white);
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.button:hover {
  border-color: #1f5b9d;
  background: #1f5b9d;
}

.button-small {
  min-height: 42px;
  padding: 0.65rem 1rem;
  font-size: 0.9rem;
}

.button-quiet {
  border-color: #63809d;
  background: transparent;
  color: var(--white);
}

.button-quiet:hover {
  border-color: var(--white);
  background: var(--white);
  color: var(--night);
}

.button-inverse {
  border-color: var(--white);
  background: var(--white);
  color: var(--night);
}

.button-inverse:hover {
  border-color: var(--blue-pale);
  background: var(--blue-pale);
  color: var(--night);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--line-dark);
  background: var(--night);
  color: var(--white);
}

.header-shell {
  width: var(--page);
  min-height: 74px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2.1rem);
}

.brand {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

.brand img {
  flex: 0 0 auto;
  border-radius: 9px;
}

.brand span {
  display: grid;
  line-height: 1.1;
}

.brand strong {
  font-size: 1rem;
  letter-spacing: 0.01em;
}

.brand small {
  margin-top: 0.27rem;
  color: #9bb0c5;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.site-navigation {
  display: flex;
  align-items: center;
  gap: clamp(0.25rem, 0.9vw, 0.9rem);
  margin-left: auto;
}

.site-navigation a,
.text-action {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding-inline: 0.45rem;
  color: #c8d5e3;
  font-size: 0.88rem;
  font-weight: 650;
  text-decoration: none;
}

.site-navigation a:hover,
.text-action:hover {
  color: var(--white);
  text-decoration: underline;
}

.mobile-navigation-actions {
  display: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.menu-toggle {
  display: none;
  min-width: 48px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border: 1px solid var(--line-dark);
  background: transparent;
  color: var(--white);
  cursor: pointer;
  font-weight: 700;
}

.menu-lines {
  display: grid;
  gap: 5px;
}

.menu-lines i {
  display: block;
  width: 17px;
  height: 1px;
  background: currentColor;
}

.navigation-dropdown {
  position: relative;
}

.navigation-dropdown summary {
  min-height: 44px;
  padding-inline: 0.45rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #c8d5e3;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 650;
  list-style: none;
  user-select: none;
}

.navigation-dropdown summary::-webkit-details-marker {
  display: none;
}

.navigation-dropdown summary::marker {
  content: "";
}

.navigation-dropdown summary:hover,
.navigation-dropdown[open] summary {
  color: var(--white);
}

.navigation-dropdown-indicator {
  width: 0.5rem;
  height: 0.5rem;
  margin-top: -0.2rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-1px) rotate(45deg);
  transition: transform 180ms ease;
}

.navigation-dropdown[open] .navigation-dropdown-indicator {
  transform: translateY(2px) rotate(225deg);
}

.navigation-dropdown-menu {
  position: absolute;
  top: calc(100% - 1px);
  right: 0;
  z-index: 110;
  width: 24rem;
  max-width: calc(100vw - 24px);
  display: grid;
  border: 1px solid #45617d;
  background: var(--night-raised);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.2);
}

.navigation-dropdown-menu a {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line-dark);
  color: #d5e2ef;
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.35;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
}

.navigation-dropdown-menu a:last-child {
  border-bottom: 0;
}

.navigation-dropdown-menu a:hover,
.navigation-dropdown-menu a:focus-visible {
  background: #183653;
  color: var(--white);
  text-decoration: none;
}

.hero {
  overflow: hidden;
  border-bottom: 1px solid var(--line-dark);
  background: var(--night);
  color: #cbd8e5;
}

.hero-offer-strip {
  border-block: 1px solid #6c9cc5;
  background: #dceefe;
  color: #102841;
}

.hero-offer-inner {
  width: min(1280px, calc(100% - 48px));
  min-height: 42px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 0.55rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.04em;
}

.hero-offer-inner strong {
  font-weight: 850;
}

.hero-grid {
  width: min(1280px, calc(100% - 48px));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  align-items: stretch;
}

.hero-copy {
  min-width: 0;
  padding: clamp(3.5rem, 7vw, 6.5rem) clamp(2rem, 3.5vw, 3.5rem) clamp(3.5rem, 6vw, 5.5rem) 0;
}

.hero-format-label {
  width: fit-content;
  max-width: 100%;
  margin-bottom: clamp(1.35rem, 2.5vw, 2rem);
  padding: 0.45rem 0.65rem;
  display: grid;
  gap: 0.15rem;
  border: 1px solid #547492;
  color: #dceafe;
  font-family: var(--mono);
  font-size: 0.69rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
}

.hero-format-label small {
  color: #91b9e0;
  font-size: 0.6rem;
  font-weight: 650;
  letter-spacing: 0.08em;
}

.hero h1 {
  max-width: none;
  font-size: clamp(2.5rem, 4vw, 3.7rem);
}

.hero h1 > span {
  display: block;
}

.hero h1 > span + span {
  color: #9bc9f5;
}

.hero-lead {
  max-width: 58ch;
  margin-bottom: 2rem;
  color: #bdcddd;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hero-facts {
  margin: clamp(2.8rem, 5vw, 4.5rem) 0 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-block: 1px solid var(--line-dark);
}

.hero-facts div {
  min-width: 0;
  padding: 1.05rem 0.8rem 1.05rem 0;
}

.hero-facts div + div {
  padding-left: 0.8rem;
  border-left: 1px solid var(--line-dark);
}

.hero-facts dt {
  color: var(--white);
  font-size: 0.98rem;
  font-weight: 760;
  line-height: 1.25;
}

.hero-facts dd {
  margin: 0.38rem 0 0;
  color: #91a9c0;
  font-size: 0.74rem;
  line-height: 1.45;
}

@media (min-width: 1101px) and (max-width: 1399px) {
  .hero-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hero-facts div:nth-child(4) {
    padding-left: 0;
    border-left: 0;
  }

  .hero-facts div:nth-child(n + 4) {
    border-top: 1px solid var(--line-dark);
  }
}

.hero-visual {
  min-width: 0;
  margin: 0;
  padding: clamp(3rem, 6vw, 5.5rem) clamp(1rem, 1.25vw, 1.25rem) clamp(3rem, 5vw, 4.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid var(--line-dark);
  background: linear-gradient(
    90deg,
    var(--night) 0%,
    #0b1d30 34%,
    #173653 68%,
    #22578f 100%
  );
}

.screen-label,
.frame-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: #8ba1b8;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
}

.screen-label {
  margin-bottom: 0.65rem;
}

.screen-frame,
.evidence {
  border: 1px solid #45617d;
  background: #0a1624;
}

.screen-frame {
  position: relative;
  padding: clamp(0.45rem, 1vw, 0.8rem);
  box-shadow: var(--shadow);
  background: linear-gradient(
    90deg,
    #112a43 0%,
    #0d2237 42%,
    #0a1624 100%
  );
}

.screen-frame::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 28%;
  height: 3px;
  background: var(--blue-bright);
}

.screen-frame img {
  width: 100%;
  object-fit: contain;
}

.hero-visual figcaption,
.evidence figcaption {
  padding: 0.85rem 0 0;
  color: #879cb1;
  font-size: 0.78rem;
  line-height: 1.5;
}

.hero-audience {
  border-top: 1px solid var(--line-dark);
}

.hero-audience-inner {
  width: min(1280px, calc(100% - 48px));
  min-height: 82px;
  margin-inline: auto;
  padding-block: 1.25rem;
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
}

.hero-audience-label {
  flex: 0 0 auto;
  color: #90b9e2;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-audience ul {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.15rem;
  list-style: none;
}

.hero-audience li {
  display: inline-flex;
  align-items: center;
  color: #d5e2ef;
  font-size: 0.86rem;
  font-weight: 650;
  white-space: nowrap;
}

.hero-audience li + li::before {
  margin-right: 1.15rem;
  color: #6f92b4;
  content: "·";
}

.system-strip {
  width: var(--page);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-inline: 1px solid var(--line);
  background: var(--white);
}

.system-strip div {
  min-width: 0;
  padding: 1.35rem clamp(1rem, 2vw, 1.6rem);
  display: grid;
  row-gap: 0.15rem;
}

.system-strip div + div {
  border-left: 1px solid var(--line);
}

.system-strip strong {
  font-size: 0.9rem;
}

.system-strip small {
  color: var(--ink-soft);
  font-size: 0.75rem;
}

.section {
  width: var(--page);
  margin-inline: auto;
  padding-block: clamp(5.5rem, 10vw, 10rem);
}

.section + .section:not(.section-local):not(.section-price) {
  border-top: 1px solid var(--line);
}

.section-heading {
  margin-bottom: clamp(2.6rem, 5vw, 5rem);
}

.split-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  align-items: end;
  gap: clamp(2rem, 7vw, 8rem);
}

.split-heading > p {
  max-width: 48ch;
  margin-bottom: 0.35rem;
  color: var(--ink-soft);
  font-size: 1.05rem;
}

.spec-layout {
  display: grid;
  grid-template-columns: minmax(340px, 0.76fr) minmax(0, 1.24fr);
  gap: clamp(2rem, 6vw, 6.5rem);
  align-items: center;
}

.spec-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ink);
}

.spec-list li {
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--line);
}

.detail-code {
  color: var(--blue);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.spec-list h3,
.spec-list p {
  margin-bottom: 0;
}

.spec-list p {
  margin-top: 0.55rem;
  color: var(--ink-soft);
}

.evidence {
  min-width: 0;
  margin: 0;
  padding: 0.6rem;
  border-color: var(--line);
  background: var(--white);
}

.evidence .frame-meta {
  padding: 0.1rem 0.15rem 0.6rem;
  color: #64758a;
}

.evidence img {
  width: 100%;
  border: 1px solid #aebbc8;
}

.evidence figcaption {
  padding: 0.75rem 0.2rem 0.15rem;
  color: #5e6f81;
}

/* Startseite: Bilder der Abschnitte 02–04 per Klick vergrößern (startseite.js, wie in der Anleitung).
   02 bleibt an der rechten oberen Ecke, 03 an der linken oberen Ecke (je 1,35-fach), 04 wächst von der Mitte aus (1,2-fach).
   Bild 04 ist fast so breit wie der Inhalt; damit es im Fenster bleibt, unter 1140 Pixel 1,1-fach und unter 1020 Pixel 1,05-fach. */
@media (min-width: 841px) {
  .evidence img.guide-zoom {
    position: relative;
    cursor: zoom-in;
    transform-origin: top left;
    transition: transform 0.18s ease;
  }

  .evidence img.guide-zoom.is-zoomed {
    z-index: 30;
    cursor: zoom-out;
    transform: scale(1.35);
    filter: drop-shadow(0 6px 18px rgba(15, 23, 42, 0.3));
  }

  .evidence img.guide-zoom.guide-zoom-anker-rechts {
    transform-origin: top right;
  }

  .evidence img.guide-zoom.guide-zoom-anker-mitte {
    transform-origin: center;
  }

  .evidence img.guide-zoom.guide-zoom-120.is-zoomed {
    transform: scale(1.05);
  }

  .evidence img.guide-zoom:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
  }
}

@media (min-width: 1020px) {
  .evidence img.guide-zoom.guide-zoom-120.is-zoomed {
    transform: scale(1.1);
  }
}

@media (min-width: 1140px) {
  .evidence img.guide-zoom.guide-zoom-120.is-zoomed {
    transform: scale(1.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .evidence img.guide-zoom {
    transition: none;
  }
}

.section-documents {
  background: var(--white);
  box-shadow: 0 0 0 100vmax var(--white);
  clip-path: inset(0 -100vmax);
}

.document-matrix {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--line);
}

.document-matrix > div {
  min-height: 118px;
  padding: 1.25rem;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 1rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.document-matrix span {
  color: var(--blue);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 800;
}

.document-matrix strong {
  align-self: center;
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  line-height: 1.25;
}

.document-detail {
  margin-top: clamp(3rem, 6vw, 6rem);
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.55fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
}

/* Startseite, Abschnitt 03: Text links, Video „Vom Angebot zur E-Rechnung“ rechts (unter 841 Pixel untereinander). */
.document-detail-folge {
  grid-template-columns: minmax(260px, 0.55fr) minmax(0, 1.45fr);
}

.detail-copy .detail-note {
  font-size: 0.92rem;
}

.evidence video {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #aebbc8;
  background: #e9eff7;
}

.detail-copy h3,
.csv-spec h3 {
  margin-top: 1rem;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
}

.detail-copy p,
.csv-spec p {
  color: var(--ink-soft);
}

.format-lanes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--ink);
}

.format-lanes article {
  min-height: 260px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
}

.format-lanes article + article {
  border-left: 1px solid var(--line);
}

.lane-code {
  align-self: flex-start;
  margin-bottom: 2.4rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--blue);
  color: var(--blue);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 800;
}

.format-lanes p {
  color: var(--ink-soft);
}

.format-lanes small {
  margin-top: auto;
  padding-top: 1.5rem;
  color: var(--blue);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.evidence-wide {
  width: min(930px, 100%);
  margin: clamp(3rem, 6vw, 6rem) auto 0;
}

.section-local {
  width: 100%;
  max-width: none;
  padding-inline: max(24px, calc((100% - 1320px) / 2));
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(500px, 1.2fr);
  align-items: center;
  gap: clamp(3rem, 8vw, 9rem);
  background: var(--night);
  color: #c8d6e3;
}

.local-copy h2 {
  color: var(--white);
}

.local-copy > p:not(.eyebrow) {
  max-width: 58ch;
  margin-top: 1.5rem;
}

.local-note {
  padding: 1.1rem;
  border-left: 3px solid var(--blue-bright);
  background: var(--night-raised);
  font-size: 0.9rem;
}

.data-flow {
  display: grid;
  grid-template-columns: 1fr minmax(30px, 0.28fr) 1fr minmax(30px, 0.28fr) 1fr;
  align-items: center;
}

.data-flow > div {
  min-height: 180px;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid #45617d;
  background: #0b1928;
}

.data-flow .flow-core {
  border-color: var(--blue-bright);
  background: var(--blue);
  color: var(--white);
}

.data-flow span {
  color: var(--blue-bright);
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
}

.data-flow .flow-core span {
  color: var(--white);
}

.data-flow strong {
  line-height: 1.6;
}

.data-flow i {
  position: relative;
  height: 1px;
  background: #5d7791;
}

.data-flow i::after {
  content: "";
  position: absolute;
  top: -4px;
  right: 0;
  width: 8px;
  height: 8px;
  border-top: 1px solid #5d7791;
  border-right: 1px solid #5d7791;
  transform: rotate(45deg);
}

.process-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ink);
}

.process-list li {
  min-height: 150px;
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) minmax(180px, 0.45fr);
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.process-marker {
  display: grid;
  align-self: stretch;
  place-items: center;
  border-right: 1px solid var(--line);
  color: var(--blue);
  font-family: var(--mono);
  font-weight: 800;
}

.process-copy {
  padding: 1.6rem clamp(1.3rem, 4vw, 3.5rem);
}

.process-copy p {
  max-width: 60ch;
  margin-bottom: 0;
  color: var(--ink-soft);
}

.process-output {
  padding: 1.6rem;
  border-left: 1px solid var(--line);
  color: var(--blue);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.export-proof {
  margin-top: clamp(3.5rem, 7vw, 7rem);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  align-items: center;
  gap: clamp(2.5rem, 7vw, 8rem);
}

.csv-spec ul,
.price-copy ul {
  padding-left: 1.2rem;
}

.csv-spec li,
.price-copy li {
  margin-bottom: 0.45rem;
}

.section-comparison {
  background: var(--white);
  box-shadow: 0 0 0 100vmax var(--white);
  clip-path: inset(0 -100vmax);
}

.comparison-table {
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--line);
}

.comparison-row {
  display: grid;
  grid-template-columns: 0.72fr repeat(3, 1fr);
}

.comparison-row > div {
  min-width: 0;
  padding: 1.15rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.comparison-row > div:first-child {
  color: var(--ink-soft);
  font-weight: 700;
}

.comparison-row > div:nth-child(2) {
  background: var(--blue-pale);
}

.comparison-head > div {
  background: var(--night);
  color: var(--white);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.comparison-head > div:first-child,
.comparison-head > div:nth-child(2) {
  background: var(--night);
  color: var(--white);
}

.section-price {
  width: 100%;
  max-width: none;
  padding-inline: max(24px, calc((100% - 1320px) / 2));
  background: var(--blue);
  color: var(--white);
}

.price-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.68fr);
  gap: clamp(3rem, 9vw, 10rem);
  align-items: end;
}

.price-copy h2 {
  color: var(--white);
}

.price-copy > p:not(.eyebrow) {
  max-width: 55ch;
  margin-top: 1.5rem;
  color: var(--white);
}

.price-copy ul {
  color: var(--white);
}

.section-price .eyebrow-light {
  color: var(--white);
}

.price-value {
  padding: clamp(1.7rem, 4vw, 3rem);
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: #1b5da5;
}

.price-value > span {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.price-value > strong {
  display: block;
  margin-block: 0.8rem 0.25rem;
  font-size: clamp(4.5rem, 8vw, 7.5rem);
  line-height: 0.95;
  letter-spacing: -0.07em;
}

.price-value > strong small {
  font-size: 0.22em;
  letter-spacing: 0;
}

.price-value > p {
  color: #e4effa;
}

.price-actions {
  margin-top: 1.8rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.price-demo,
.closing-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  font-weight: 750;
}

.inline-link {
  justify-self: start;
  color: var(--blue);
  font-weight: 800;
}

.faq-list {
  border-top: 1px solid var(--ink);
}

.faq-list details {
  border-bottom: 1px solid var(--line);
}

.faq-list summary {
  min-height: 76px;
  padding: 1.25rem 3.5rem 1.25rem 0;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 750;
}

.faq-list summary::marker {
  color: var(--blue);
}

.faq-list details p {
  max-width: 72ch;
  padding: 0 0 1.5rem;
  color: var(--ink-soft);
}

.closing {
  padding: clamp(3.5rem, 7vw, 6.5rem) max(24px, calc((100% - 1320px) / 2));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3rem;
  border-bottom: 1px solid var(--line-dark);
  background: var(--night);
  color: var(--white);
}

.closing h2 {
  color: var(--white);
}

.closing-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.3rem;
}

.site-footer {
  padding-inline: max(24px, calc((100% - 1320px) / 2));
  background: var(--night);
  color: #bdcddd;
}

.footer-main {
  padding-block: clamp(3rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(3rem, 8vw, 9rem);
}

.footer-brand {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.footer-brand img {
  border-radius: 10px;
}

.footer-brand div {
  display: grid;
}

.footer-brand strong {
  color: var(--white);
  font-size: 1.25rem;
}

.footer-brand span {
  max-width: 34ch;
  margin-top: 0.35rem;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.footer-links > div {
  display: grid;
  align-content: start;
  gap: 0.45rem;
}

.footer-links strong {
  margin-bottom: 0.5rem;
  color: #7f98b1;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-links a {
  min-height: 36px;
  color: var(--white);
}

.footer-base {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  border-top: 1px solid var(--line-dark);
  color: #8399ae;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.footer-credit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  text-transform: none;
}

.footer-base a {
  color: var(--white);
}

@media (max-width: 1180px) {
  .header-shell {
    gap: 0.8rem;
  }

  .site-navigation {
    gap: 0.15rem;
  }

  .site-navigation a {
    font-size: 0.82rem;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
  }
}

@media (max-width: 1100px) {
  :root {
    --page: min(100% - 40px, 920px);
  }

  .header-shell {
    position: relative;
  }

  .menu-toggle {
    margin-left: auto;
  }

  .header-actions {
    display: none;
  }

  .js .menu-toggle {
    display: inline-flex;
  }

  .site-navigation {
    width: 100%;
    margin: 0;
    padding: 0.75rem 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    order: 4;
    border-top: 1px solid var(--line-dark);
  }

  .header-shell {
    flex-wrap: wrap;
  }

  .js .site-navigation {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    padding: 1rem;
    border: 1px solid var(--line-dark);
    background: var(--night);
    box-shadow: 0 24px 35px rgba(0, 0, 0, 0.28);
  }

  .js .site-navigation.is-open {
    display: grid;
  }

  .site-navigation a {
    min-height: 48px;
    padding-inline: 0.8rem;
    border-bottom: 1px solid var(--line-dark);
    font-size: 0.95rem;
  }

  .navigation-dropdown summary {
    width: 100%;
    min-height: 48px;
    padding-inline: 0.8rem;
    justify-content: space-between;
    border-bottom: 1px solid var(--line-dark);
    font-size: 0.95rem;
  }

  .navigation-dropdown-menu {
    position: static;
    width: auto;
    max-width: none;
    margin: 0.35rem 0.8rem 0.6rem;
    border: 0;
    border-left: 1px solid #5a7b9c;
    background: #0a1827;
    box-shadow: none;
  }

  .navigation-dropdown-menu a {
    min-height: 48px;
    padding: 0.75rem 0.9rem 0.75rem 1.1rem;
    border-bottom-color: var(--line-dark);
  }

  .mobile-navigation-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--line-dark);
  }

  .mobile-navigation-actions a {
    width: 100%;
    min-height: 48px;
    justify-content: center;
    border-bottom: 0;
  }

  /* Diese Aktion steht im Mobilmenue direkt neben der gefuellten
     Kaufen-Schaltflaeche. Ihr Rahmen macht sie zu einer Schaltflaeche, ihre
     Schriftfarbe war aber die blassblaue Navigationsfarbe #c8d5e3, und eine
     Rolloverregel gab es gar nicht. Nebeneinander sah die eine Schaltflaeche
     dadurch aus wie eine kaputte Fassung der anderen.

     Sie bleibt bewusst die zurueckhaltende der beiden -- gefuellt waere sie
     eine zweite primaere Aktion --, traegt aber jetzt weisse Schrift und
     einen abdunkelnden Rollover. Der Fokusring kommt aus der globalen
     :focus-visible-Regel und wird hier nicht ueberschrieben. Dieselbe
     Korrektur hat a.checkout-submit weiter unten bereits erhalten. */
  .mobile-navigation-actions .mobile-demo-action,
  .mobile-navigation-actions .mobile-demo-action:hover,
  .mobile-navigation-actions .mobile-demo-action:focus-visible {
    border: 1px solid var(--line-dark);
    color: var(--white);
  }

  .mobile-navigation-actions .mobile-demo-action:hover {
    border-color: var(--blue-bright);
    background: #04090f;
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    max-width: 820px;
    padding: clamp(3.25rem, 7vw, 5rem) 0 clamp(3rem, 6vw, 4.5rem);
  }

  .hero-visual {
    width: 100%;
    padding: clamp(2.5rem, 6vw, 4.5rem);
    border-top: 1px solid #385673;
    border-left: 0;
  }

  .hero-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-facts div:nth-child(3) {
    padding-left: 0;
    border-top: 1px solid var(--line-dark);
    border-left: 0;
  }

  .hero-facts div:nth-child(4) {
    border-top: 1px solid var(--line-dark);
  }

  .hero-facts div:nth-child(5) {
    grid-column: 1 / -1;
    padding-left: 0;
    border-top: 1px solid var(--line-dark);
    border-left: 0;
  }

  .system-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .system-strip div:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .system-strip div:nth-child(4) {
    border-top: 1px solid var(--line);
  }

  .section-local {
    grid-template-columns: 1fr;
  }

  .data-flow {
    width: min(760px, 100%);
  }
}

@media (max-width: 840px) {
  .split-heading,
  .spec-layout,
  .document-detail,
  .export-proof,
  .price-panel,
  .footer-main {
    grid-template-columns: 1fr;
  }

  .split-heading {
    align-items: start;
    gap: 1.5rem;
  }

  .spec-layout,
  .document-detail,
  .export-proof {
    gap: 2.7rem;
  }

  .document-matrix {
    grid-template-columns: repeat(2, 1fr);
  }

  .format-lanes {
    grid-template-columns: 1fr;
  }

  .format-lanes article {
    min-height: 0;
  }

  .format-lanes article + article {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .lane-code {
    margin-bottom: 1.25rem;
  }

  .process-list li {
    grid-template-columns: 76px 1fr;
  }

  .process-output {
    grid-column: 2;
    padding: 0 1.3rem 1.4rem;
    border-left: 0;
  }

  .process-marker {
    grid-row: 1 / span 2;
  }

  .comparison-table {
    border: 0;
  }

  .comparison-row {
    margin-bottom: 1.2rem;
    display: grid;
    grid-template-columns: 1fr;
    border: 1px solid var(--line);
  }

  .comparison-row > div {
    padding: 0.9rem 1rem;
    border-right: 0;
  }

  .comparison-row > div::before {
    display: block;
    margin-bottom: 0.2rem;
    color: #63758a;
    font-family: var(--mono);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .comparison-row:not(.comparison-head) > div:nth-child(1)::before { content: "Kriterium"; }
  .comparison-row:not(.comparison-head) > div:nth-child(2)::before { content: "RechAssist"; }
  .comparison-row:not(.comparison-head) > div:nth-child(3)::before { content: "Cloud-basierter Ansatz"; }
  .comparison-row:not(.comparison-head) > div:nth-child(4)::before { content: "Manueller Werkzeugmix"; }

  .comparison-head {
    display: none;
  }

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

  .price-value {
    width: min(540px, 100%);
  }

  .closing {
    grid-template-columns: 1fr;
  }

  .footer-links {
    width: min(650px, 100%);
  }
}

@media (max-width: 620px) {
  :root {
    --page: calc(100% - 28px);
  }

  html {
    scroll-padding-top: 76px;
  }

  .header-shell {
    min-height: 66px;
  }

  .brand img {
    width: 42px;
    height: 42px;
  }

  .brand small,
  .header-actions {
    display: none;
  }

  .menu-toggle {
    min-width: 88px;
  }

  .site-navigation {
    grid-template-columns: 1fr;
  }

  .mobile-navigation-actions {
    grid-template-columns: 1fr;
  }

  .js .site-navigation {
    left: -1px;
    width: calc(100% + 2px);
    max-height: calc(100vh - 66px);
    overflow-y: auto;
  }

  h1 {
    font-size: clamp(2.1rem, 9.2vw, 2.6rem);
  }

  h2 {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .hero-grid {
    width: calc(100% - 28px);
  }

  .hero-copy {
    padding: 2.8rem 0 2.6rem;
  }

  .hero h1 {
    max-width: none;
    font-size: clamp(1.85rem, 8.2vw, 2.5rem);
  }

  .hero h1 > span + span > span {
    display: block;
  }

  .hero-format-label {
    font-size: 0.62rem;
  }

  .hero-offer-inner,
  .hero-audience-inner {
    width: calc(100% - 28px);
  }

  .hero-offer-inner {
    min-height: 0;
    padding-block: 0.6rem;
    row-gap: 0.1rem;
    line-height: 1.45;
  }

  .hero-visual {
    padding: 2.4rem 1rem;
  }

  .hero-actions .button {
    width: 100%;
  }

  .hero-facts {
    grid-template-columns: 1fr;
  }

  .hero-facts div + div {
    padding-left: 0;
    border-top: 1px solid var(--line-dark);
    border-left: 0;
  }

  .hero-audience-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.8rem;
  }

  .hero-audience ul {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem 0.9rem;
  }

  .hero-audience li {
    min-width: 0;
    font-size: 0.82rem;
    white-space: normal;
  }

  .hero-audience li + li::before {
    display: none;
  }

  .screen-label {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.15rem;
  }

  .system-strip {
    width: 100%;
    grid-template-columns: 1fr;
    border-inline: 0;
  }

  .system-strip div + div,
  .system-strip div:nth-child(3) {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .section {
    padding-block: 5rem;
  }

  .document-matrix {
    grid-template-columns: 1fr;
  }

  .document-matrix > div {
    min-height: 88px;
  }

  .section-local,
  .section-price,
  .closing,
  .site-footer {
    padding-inline: 14px;
  }

  .data-flow {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .data-flow > div {
    min-height: 145px;
  }

  .data-flow i {
    width: 1px;
    height: 34px;
    margin-left: 50%;
  }

  .data-flow i::after {
    top: auto;
    right: -4px;
    bottom: 0;
    transform: rotate(135deg);
  }

  .process-list li {
    grid-template-columns: 52px 1fr;
  }

  .process-copy {
    padding: 1.4rem 0.8rem 1rem 1.1rem;
  }

  .process-output {
    padding: 0 0.8rem 1.4rem 1.1rem;
  }

  .price-value > strong {
    font-size: clamp(4rem, 23vw, 6rem);
  }

  .price-actions,
  .closing-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .price-actions .button,
  .closing-actions .button {
    width: 100%;
  }

  .price-demo,
  .closing-link {
    justify-content: center;
  }

  .footer-links {
    grid-template-columns: 1fr;
  }

  .footer-base {
    padding-block: 1.25rem;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 0.6rem;
  }

  .footer-credit {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .footer-credit-separator {
    display: none;
  }
}

@media (max-width: 390px) {
  .footer-links {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Unterseiten: eigenständige Inhaltsstruktur auf Basis der Startseiten-Tokens. */
.subpage {
  background: var(--surface);
}

.subpage-hero {
  border-bottom: 1px solid var(--line-dark);
  background: var(--night);
  color: #c8d6e3;
}

.subpage-hero-shell {
  width: min(1080px, var(--page));
  margin-inline: auto;
  padding-block: clamp(2rem, 5vw, 4.5rem) clamp(3.5rem, 7vw, 6.5rem);
}

.breadcrumb {
  margin-bottom: clamp(2.1rem, 4vw, 3.75rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  color: #90b9e2;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.breadcrumb a {
  color: #dceafe;
}

.breadcrumb span[aria-hidden="true"] {
  color: #5b7e9f;
}

.breadcrumb [aria-current="page"] {
  color: #90b9e2;
}

.subpage-hero h1 {
  max-width: 19ch;
  margin-bottom: 1.35rem;
  font-size: clamp(2.5rem, 5vw, 5rem);
}

.subpage-hero p {
  max-width: 66ch;
  margin-bottom: 0;
  color: #bdcddd;
  font-size: clamp(1.04rem, 1.7vw, 1.25rem);
}

.subpage-shell {
  width: min(1080px, var(--page));
  margin-inline: auto;
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
}

.subpage-intro {
  max-width: 72ch;
  margin-bottom: clamp(3rem, 6vw, 5rem);
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 1.7vw, 1.22rem);
}

.topic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--line);
}

.topic-grid-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.topic-card {
  min-width: 0;
  min-height: 214px;
  padding: clamp(1.35rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
}

.topic-card:hover,
.topic-card:focus-visible {
  background: var(--blue-pale);
  color: var(--ink);
  text-decoration: none;
}

.topic-code {
  margin-bottom: auto;
  color: var(--blue);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.topic-card h2,
.topic-card h3 {
  max-width: 19ch;
  margin-top: 2.4rem;
  margin-bottom: 0.7rem;
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
}

.topic-card p {
  margin-bottom: 0;
  color: var(--ink-soft);
  line-height: 1.55;
}

.article-section {
  max-width: 78ch;
  padding-block: clamp(2.4rem, 5vw, 4.25rem);
  border-top: 1px solid var(--line);
}

.article-section:first-child {
  border-top-color: var(--ink);
}

.article-section h2 {
  max-width: 24ch;
  margin-bottom: 1.3rem;
  font-size: clamp(1.8rem, 3.3vw, 3.25rem);
}

.article-section h3 {
  max-width: 28ch;
  margin-top: 2rem;
}

.article-section > p,
.article-section li {
  color: var(--ink-soft);
}

.article-section > p:last-child {
  margin-bottom: 0;
}

.article-list {
  margin: 1.25rem 0 0;
  padding-left: 1.3rem;
}

.article-list li + li {
  margin-top: 0.65rem;
}

.article-section > .article-list + p {
  margin-top: 1.25rem;
}

.article-note {
  max-width: 78ch;
  padding: 1.25rem 1.35rem;
  border-left: 3px solid var(--blue);
  background: #e9f2fb;
  color: #183653;
}

.article-note p {
  margin-bottom: 0;
}

.related-links {
  padding-top: clamp(2.4rem, 5vw, 4.25rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  border-top: 1px solid var(--ink);
}

.related-links .button {
  min-width: min(100%, 14rem);
}

.related-links .button-plain {
  border-color: var(--line);
  background: var(--white);
  color: var(--ink);
}

.related-links .button-plain:hover {
  border-color: var(--blue);
  background: var(--blue-pale);
  color: var(--ink);
}

@media (max-width: 840px) {
  .topic-grid,
  .topic-grid-three {
    grid-template-columns: 1fr;
  }

  .topic-card {
    min-height: 0;
  }

  .topic-card h2,
  .topic-card h3 {
    margin-top: 1.6rem;
  }
}

@media (max-width: 620px) {
  .subpage-hero-shell,
  .subpage-shell {
    width: var(--page);
  }

  .subpage-hero-shell {
    padding-block: 1.6rem 3.8rem;
  }

  .breadcrumb {
    margin-bottom: 2rem;
    font-size: 0.62rem;
  }

  .subpage-hero h1 {
    font-size: clamp(2.15rem, 10vw, 3rem);
  }

  .subpage-shell {
    padding-block: 3.4rem;
  }

  .article-note {
    padding: 1.05rem 1.1rem;
  }

  .related-links .button {
    width: 100%;
  }
}

/* E-Rechnungsseite: eigenständige Informationsmodule, nur mit .e-invoice-page wirksam. */
.e-invoice-page {
  background: var(--surface);
}

.e-invoice-page .e-invoice-hero {
  overflow: hidden;
  border-bottom: 1px solid var(--line-dark);
  background: var(--night);
  color: #c8d6e3;
}

.e-invoice-page .e-invoice-hero-shell {
  width: min(1280px, var(--page));
  margin-inline: auto;
  padding-block: clamp(2rem, 4vw, 4rem) 0;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(360px, 0.94fr);
  gap: clamp(2.5rem, 7vw, 7rem);
}

.e-invoice-page .e-invoice-hero-copy {
  min-width: 0;
  padding-bottom: clamp(3.75rem, 7vw, 6.25rem);
}

.e-invoice-page .e-invoice-hero .breadcrumb {
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.e-invoice-page .e-invoice-eyebrow,
.e-invoice-page .e-invoice-section-label {
  margin: 0 0 1rem;
  color: var(--blue);
  font-family: var(--mono);
  font-size: 0.71rem;
  font-weight: 800;
  letter-spacing: 0.095em;
  line-height: 1.45;
  text-transform: uppercase;
}

.e-invoice-page .e-invoice-eyebrow {
  color: #92bee8;
}

.e-invoice-page .e-invoice-hero h1 {
  max-width: 11.7ch;
  margin-bottom: 1.35rem;
  color: var(--white);
  font-size: clamp(2.65rem, 5vw, 5.35rem);
}

.e-invoice-page .e-invoice-hero-lead {
  max-width: 61ch;
  margin-bottom: 2rem;
  color: #bdcddd;
  font-size: clamp(1.04rem, 1.65vw, 1.25rem);
}

.e-invoice-page .e-invoice-actions,
.e-invoice-page .e-invoice-closing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.e-invoice-page .e-invoice-file-visual {
  position: relative;
  min-width: 0;
  padding: clamp(2rem, 4vw, 3.4rem) 0 clamp(3.75rem, 7vw, 6.25rem) clamp(1rem, 2.5vw, 2.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid var(--line-dark);
}

.e-invoice-page .e-invoice-file-visual::before {
  position: absolute;
  inset: 0 -100vmax 0 0;
  z-index: 0;
  border-left: 1px solid #203d58;
  background-color: #0b1d30;
  background-image: linear-gradient(rgba(100, 168, 242, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(100, 168, 242, 0.055) 1px, transparent 1px);
  background-size: 28px 28px;
  content: "";
}

.e-invoice-page .e-invoice-file-visual > * {
  position: relative;
  z-index: 1;
}

.e-invoice-page .e-invoice-visual-kicker {
  margin-bottom: 1.35rem;
  color: #8eadc9;
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.e-invoice-page .e-invoice-files {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: clamp(0.5rem, 1.3vw, 1rem);
}

.e-invoice-page .e-invoice-file {
  position: relative;
  min-height: 190px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  border: 1px solid #48708f;
  background: #10263a;
  box-shadow: 12px 12px 0 rgba(4, 13, 23, 0.38);
}

.e-invoice-page .e-invoice-file::before {
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  border-bottom: 1px solid #6a91b0;
  border-left: 1px solid #6a91b0;
  background: #183852;
  content: "";
}

.e-invoice-page .e-invoice-file > span {
  max-width: min-content;
  margin-bottom: auto;
  color: var(--white);
  font-family: var(--mono);
  font-size: clamp(0.78rem, 1.25vw, 1rem);
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.1;
}

.e-invoice-page .e-invoice-file small {
  margin: 1.35rem 0 0.75rem;
  color: #8eb6db;
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.e-invoice-page .e-invoice-file i {
  height: 1px;
  margin-top: 0.42rem;
  display: block;
  background: #5c84a3;
}

.e-invoice-page .e-invoice-file i:nth-of-type(2) {
  width: 83%;
}

.e-invoice-page .e-invoice-file i:nth-of-type(3) {
  width: 62%;
}

.e-invoice-page .e-invoice-file-hybrid {
  min-height: 236px;
  border-color: #6a91b0;
  background: #17324a;
}

.e-invoice-page .e-invoice-file-hybrid::after {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 51px;
  height: 51px;
  display: grid;
  place-items: center;
  border: 1px solid var(--orange);
  background: #2c1d11;
  color: #ffc38d;
  font-family: var(--mono);
  font-size: 0.56rem;
  font-weight: 800;
  content: "XML";
}

.e-invoice-page .e-invoice-file-hybrid b {
  position: absolute;
  top: 43%;
  left: 1rem;
  color: #90bde7;
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.08em;
}

.e-invoice-page .e-invoice-file-hybrid i {
  position: relative;
  z-index: 1;
}

.e-invoice-page .e-invoice-visual-caption {
  max-width: 48ch;
  margin: 1.6rem 0 0;
  color: #9db6cc;
  font-size: 0.82rem;
  line-height: 1.55;
}

.e-invoice-page .e-invoice-quickfacts {
  grid-column: 1 / -1;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
}

.e-invoice-page .e-invoice-quickfacts div {
  min-width: 0;
  padding: 1.2rem clamp(0.85rem, 1.8vw, 1.5rem) 1.25rem 0;
}

.e-invoice-page .e-invoice-quickfacts div + div {
  padding-left: clamp(0.85rem, 1.8vw, 1.5rem);
  border-left: 1px solid var(--line-dark);
}

.e-invoice-page .e-invoice-quickfacts dt {
  margin-bottom: 0.35rem;
  color: var(--white);
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.25;
}

.e-invoice-page .e-invoice-quickfacts dd {
  margin: 0;
  color: #94abc0;
  font-size: 0.76rem;
  line-height: 1.45;
}

.e-invoice-page .e-invoice-toc {
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.e-invoice-page .e-invoice-toc > div {
  width: min(1180px, var(--page));
  min-height: 62px;
  margin-inline: auto;
  padding-block: 0.65rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.15rem;
}

.e-invoice-page .e-invoice-toc span {
  margin-right: 0.4rem;
  color: var(--blue);
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.e-invoice-page .e-invoice-toc a {
  color: #3c536b;
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.35;
}

.e-invoice-page .e-invoice-toc a:hover {
  color: var(--blue);
}

.e-invoice-page .e-invoice-shell {
  width: min(1180px, var(--page));
  margin-inline: auto;
}

.e-invoice-page .e-invoice-section {
  padding-block: clamp(4.75rem, 9vw, 8.5rem);
  border-top: 1px solid var(--line);
}

.e-invoice-page .e-invoice-shell > .e-invoice-section:first-child {
  border-top: 0;
}

.e-invoice-page .e-invoice-section-heading {
  max-width: 76ch;
  margin-bottom: clamp(2.5rem, 5vw, 4.8rem);
}

.e-invoice-page .e-invoice-heading-split {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(260px, 0.65fr);
  align-items: end;
  gap: clamp(2rem, 7vw, 8rem);
}

.e-invoice-page .e-invoice-section h2,
.e-invoice-page .e-invoice-closing h2 {
  max-width: 18ch;
  margin-bottom: 1.2rem;
  color: var(--ink);
  font-size: clamp(2rem, 4vw, 4rem);
}

.e-invoice-page .e-invoice-section-heading > p:last-child,
.e-invoice-page .e-invoice-heading-split > p {
  max-width: 52ch;
  margin-bottom: 0;
  color: var(--ink-soft);
  font-size: 1.03rem;
}

.e-invoice-page .e-invoice-compare {
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--line);
}

.e-invoice-page .e-invoice-compare-row {
  display: grid;
  grid-template-columns: 0.8fr 0.78fr 1.18fr;
}

.e-invoice-page .e-invoice-compare-row > div {
  min-width: 0;
  padding: 1rem clamp(0.85rem, 1.8vw, 1.5rem);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
}

.e-invoice-page .e-invoice-compare-row > div:first-child {
  color: var(--ink);
  font-weight: 750;
}

.e-invoice-page .e-invoice-compare-row > div:last-child {
  background: #eaf3fc;
}

.e-invoice-page .e-invoice-compare-head > div,
.e-invoice-page .e-invoice-compare-head > div:first-child,
.e-invoice-page .e-invoice-compare-head > div:last-child {
  background: var(--night);
  color: var(--white);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.e-invoice-page .e-invoice-inline-note,
.e-invoice-page .e-invoice-b2g-note,
.e-invoice-page .e-invoice-delivery-limit,
.e-invoice-page .e-invoice-europe-note {
  margin-top: 1.5rem;
  padding: 1.15rem 1.3rem;
  border-left: 3px solid var(--blue);
  background: #e9f2fb;
  color: #183653;
}

.e-invoice-page .e-invoice-inline-note strong,
.e-invoice-page .e-invoice-delivery-limit strong {
  color: var(--ink);
}

.e-invoice-page .e-invoice-inline-note p,
.e-invoice-page .e-invoice-b2g-note,
.e-invoice-page .e-invoice-delivery-limit p,
.e-invoice-page .e-invoice-europe-note p {
  margin: 0.35rem 0 0;
}

.e-invoice-page .e-invoice-formats-section {
  position: relative;
  z-index: 0;
}

.e-invoice-page .e-invoice-formats-section::before {
  position: absolute;
  inset: 0 -100vmax;
  z-index: -1;
  background: var(--white);
  box-shadow: 0 0 0 100vmax var(--white);
  clip-path: inset(0 -100vmax);
  content: "";
}

.e-invoice-page .e-invoice-format-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--line);
}

.e-invoice-page .e-invoice-format-card {
  min-width: 0;
  min-height: 330px;
  padding: clamp(1.25rem, 2.35vw, 2rem);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.e-invoice-page .e-invoice-format-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--blue);
  font-family: var(--mono);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.065em;
}

.e-invoice-page .e-invoice-format-head span {
  max-width: 15ch;
  padding: 0.36rem 0.5rem;
  border: 1px solid currentColor;
}

.e-invoice-page .e-invoice-format-head small {
  color: #71869b;
  font-size: 0.65rem;
}

.e-invoice-page .e-invoice-format-card h3 {
  margin-top: clamp(2.5rem, 6vw, 5.4rem);
  font-size: clamp(1.35rem, 2vw, 1.72rem);
}

.e-invoice-page .e-invoice-format-card p {
  margin-bottom: 0;
  color: var(--ink-soft);
  font-size: 0.93rem;
}

.e-invoice-page .e-invoice-format-cii {
  background: #f5f9fd;
}

.e-invoice-page .e-invoice-format-zugferd {
  border-top: 3px solid var(--orange);
}

.e-invoice-page .e-invoice-format-pdf {
  background: #f0f4f8;
}

.e-invoice-page .e-invoice-decision-line {
  max-width: 72ch;
  margin: 1.35rem 0 0;
  padding-left: 1rem;
  border-left: 1px solid var(--blue);
  color: var(--ink-soft);
}

/* E-Rechnung: Muster einer E-Rechnung aus der App (Bilder und Dateien unter assets/muster/). */

.e-invoice-page .e-invoice-sample {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  margin: clamp(2.2rem, 5vw, 3.5rem) 0 0;
}

.e-invoice-page .e-invoice-sample-files {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
}

.e-invoice-page .e-invoice-sample-file {
  margin: 0;
}

.e-invoice-page .e-invoice-sample-image {
  display: block;
  cursor: zoom-in;
}

.e-invoice-page .e-invoice-sample-image img {
  display: block;
  width: 100%;
  aspect-ratio: 1240 / 1754;
  height: auto;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(16, 32, 51, 0.12);
  background: #fff;
}

.e-invoice-page .e-invoice-sample-file figcaption {
  margin-top: 0.55rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.e-invoice-page .e-invoice-sample h3 {
  margin: 0 0 0.8rem;
}

.e-invoice-page .e-invoice-sample p,
.e-invoice-page .e-invoice-sample li {
  color: var(--ink-soft);
}

.e-invoice-page .e-invoice-sample-note {
  margin-top: 1.1rem;
  font-size: 0.93rem;
}

.e-invoice-page .e-invoice-timeline {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
}

.e-invoice-page .e-invoice-timeline li {
  position: relative;
  min-width: 0;
  padding: 0 clamp(1rem, 2.4vw, 2rem) 0 0;
}

.e-invoice-page .e-invoice-timeline li + li {
  padding-left: clamp(1rem, 2.4vw, 2rem);
  border-left: 1px solid var(--line);
}

.e-invoice-page .e-invoice-timeline li::before {
  width: 12px;
  height: 12px;
  margin-bottom: 1.15rem;
  display: block;
  border: 3px solid var(--blue);
  border-radius: 50%;
  background: var(--white);
  content: "";
}

.e-invoice-page .e-invoice-timeline-date {
  min-height: 3em;
  margin-bottom: 1.35rem;
  display: block;
  color: var(--blue);
  font-family: var(--mono);
  font-size: clamp(0.72rem, 1.3vw, 0.87rem);
  font-weight: 800;
  letter-spacing: 0.035em;
  line-height: 1.35;
}

.e-invoice-page .e-invoice-timeline h3 {
  font-size: 1.16rem;
}

.e-invoice-page .e-invoice-timeline p {
  margin-bottom: 0;
  color: var(--ink-soft);
  font-size: 0.91rem;
}

.e-invoice-page .e-invoice-exceptions {
  margin-top: clamp(2.5rem, 5vw, 4.6rem);
  padding: clamp(1.4rem, 3vw, 2.4rem);
  display: grid;
  grid-template-columns: minmax(180px, 0.65fr) minmax(0, 1.35fr);
  gap: clamp(1.6rem, 5vw, 5rem);
  border: 1px solid var(--line);
  background: var(--white);
}

.e-invoice-page .e-invoice-exceptions h3 {
  font-size: clamp(1.35rem, 2.3vw, 1.9rem);
}

.e-invoice-page .e-invoice-exceptions ul {
  margin: 0;
  padding: 0;
  columns: 2;
  list-style: none;
}

.e-invoice-page .e-invoice-exceptions li {
  break-inside: avoid;
  margin-bottom: 0.55rem;
  padding-left: 1.1rem;
  color: var(--ink-soft);
}

.e-invoice-page .e-invoice-exceptions li::before {
  margin-left: -1.1rem;
  color: var(--blue);
  content: "— ";
}

.e-invoice-page .e-invoice-exceptions p:last-child {
  margin: 1rem 0 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.e-invoice-page .e-invoice-delivery-flow {
  display: grid;
  grid-template-columns: minmax(140px, 0.8fr) minmax(22px, 0.16fr) minmax(140px, 0.8fr) minmax(22px, 0.16fr) minmax(180px, 1.2fr) minmax(22px, 0.16fr) minmax(140px, 0.8fr);
  align-items: center;
}

.e-invoice-page .e-invoice-delivery-flow > div {
  min-height: 180px;
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--line);
  background: var(--white);
}

.e-invoice-page .e-invoice-delivery-flow > div:nth-of-type(2) {
  border-color: #4f7fa9;
  background: #eaf3fc;
}

.e-invoice-page .e-invoice-delivery-flow > div:nth-of-type(3) {
  border-color: #274d70;
  background: #15324d;
  color: var(--white);
}

.e-invoice-page .e-invoice-delivery-flow span {
  color: var(--blue);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.e-invoice-page .e-invoice-delivery-flow > div:nth-of-type(3) span,
.e-invoice-page .e-invoice-delivery-flow > div:nth-of-type(3) small {
  color: #a5c9ec;
}

.e-invoice-page .e-invoice-delivery-flow strong {
  color: inherit;
  font-size: 1rem;
  line-height: 1.2;
}

.e-invoice-page .e-invoice-delivery-flow small {
  color: var(--ink-soft);
  font-size: 0.75rem;
  line-height: 1.45;
}

.e-invoice-page .e-invoice-delivery-flow > i {
  position: relative;
  height: 1px;
  background: #7793ad;
}

.e-invoice-page .e-invoice-delivery-flow > i::after {
  position: absolute;
  top: -4px;
  right: 0;
  width: 8px;
  height: 8px;
  border-top: 1px solid #7793ad;
  border-right: 1px solid #7793ad;
  transform: rotate(45deg);
  content: "";
}

.e-invoice-page .e-invoice-process {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ink);
}

.e-invoice-page .e-invoice-process li {
  min-height: 145px;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) minmax(140px, 0.28fr);
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.e-invoice-page .e-invoice-process > li > span {
  align-self: stretch;
  padding: 1rem;
  display: grid;
  place-items: center;
  border-right: 1px solid var(--line);
  color: var(--blue);
  font-family: var(--mono);
  font-size: 0.79rem;
  font-weight: 800;
}

.e-invoice-page .e-invoice-process li > div {
  padding: 1.45rem clamp(1rem, 3.4vw, 3rem);
}

.e-invoice-page .e-invoice-process h3 {
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
}

.e-invoice-page .e-invoice-process p {
  max-width: 62ch;
  margin-bottom: 0;
  color: var(--ink-soft);
}

.e-invoice-page .e-invoice-process small {
  padding: 1.4rem;
  border-left: 1px solid var(--line);
  color: var(--blue);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.45;
  text-transform: uppercase;
}

.e-invoice-page .e-invoice-validation-section {
  position: relative;
  z-index: 0;
  color: #d1deea;
}

.e-invoice-page .e-invoice-validation-section::before {
  position: absolute;
  inset: 0 -100vmax;
  z-index: -1;
  border-block: 1px solid var(--line-dark);
  background: var(--night);
  box-shadow: 0 0 0 100vmax var(--night);
  clip-path: inset(0 -100vmax);
  content: "";
}

.e-invoice-page .e-invoice-validation-section + .e-invoice-limits-section {
  border-top: 0;
}

.e-invoice-page .e-invoice-validation-section .e-invoice-section-label {
  color: #92bee8;
}

.e-invoice-page .e-invoice-validation-section h2 {
  color: var(--white);
}

.e-invoice-page .e-invoice-validation-section .e-invoice-section-heading > p:last-child {
  color: #afc1d3;
}

.e-invoice-page .e-invoice-validation-track {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid #3c5a74;
  border-left: 1px solid #3c5a74;
  list-style: none;
}

.e-invoice-page .e-invoice-validation-track li {
  min-width: 0;
  min-height: 220px;
  padding: 1.35rem;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #3c5a74;
  border-bottom: 1px solid #3c5a74;
  background: #0d1b2b;
}

.e-invoice-page .e-invoice-validation-track li > span {
  margin-bottom: auto;
  color: #96c3ed;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 800;
}

.e-invoice-page .e-invoice-validation-track h3 {
  margin-top: 2.5rem;
  color: var(--white);
  font-size: clamp(1.1rem, 1.8vw, 1.42rem);
}

.e-invoice-page .e-invoice-validation-track p {
  margin-bottom: 0;
  color: #a8bbcd;
  font-size: 0.87rem;
  line-height: 1.5;
}

.e-invoice-page .e-invoice-validation-track .e-invoice-release-stage {
  border-top: 3px solid var(--orange);
  background: #152b40;
}

.e-invoice-page .e-invoice-validation-notes {
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid #3c5a74;
}

.e-invoice-page .e-invoice-validation-notes p {
  min-width: 0;
  margin: 0;
  padding: 1rem 1.15rem;
  color: #b9cadd;
  font-size: 0.82rem;
  line-height: 1.5;
}

.e-invoice-page .e-invoice-validation-notes p + p {
  border-left: 1px solid #3c5a74;
}

.e-invoice-page .e-invoice-validation-notes strong {
  color: var(--white);
}

.e-invoice-page .e-invoice-limits-section {
  padding-inline: clamp(1.25rem, 4vw, 4rem);
  background: var(--white);
  box-shadow: 0 0 0 100vmax var(--white);
  clip-path: inset(0 -100vmax);
}

.e-invoice-page .e-invoice-limits-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.9fr);
  gap: clamp(2rem, 9vw, 10rem);
}

.e-invoice-page .e-invoice-limits-layout h2 {
  max-width: 15ch;
}

.e-invoice-page .e-invoice-limits-layout > div:last-child {
  max-width: 56ch;
  color: var(--ink-soft);
}

.e-invoice-page .e-invoice-limits-layout ul {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.e-invoice-page .e-invoice-limits-layout li {
  padding: 0.85rem 0 0.85rem 1.4rem;
  border-top: 1px solid var(--line);
}

.e-invoice-page .e-invoice-limits-layout li::before {
  margin-left: -1.4rem;
  color: var(--blue);
  font-family: var(--mono);
  content: "// ";
}

.e-invoice-page .e-invoice-settlement-section h2 {
  max-width: 25ch;
}

.e-invoice-page .e-invoice-settlement-line {
  margin-bottom: 1.5rem;
  padding: 0.8rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  border: 1px solid var(--line);
  background: var(--white);
  color: #53687d;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.045em;
}

.e-invoice-page .e-invoice-settlement-line i {
  width: min(8vw, 100px);
  height: 1px;
  position: relative;
  background: #7d99b4;
}

.e-invoice-page .e-invoice-settlement-line i::after {
  position: absolute;
  top: -3px;
  right: 0;
  width: 7px;
  height: 7px;
  border-top: 1px solid #7d99b4;
  border-right: 1px solid #7d99b4;
  transform: rotate(45deg);
  content: "";
}

.e-invoice-page .e-invoice-settlement-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.e-invoice-page .e-invoice-settlement-card {
  min-width: 0;
  padding: clamp(1.4rem, 3.5vw, 3rem);
  border: 1px solid var(--line);
  background: var(--white);
}

.e-invoice-page .e-invoice-prepayment-card {
  border-top: 4px solid #798fa5;
}

.e-invoice-page .e-invoice-final-card {
  border-top: 4px solid var(--blue);
  background: #f4f9fe;
}

.e-invoice-page .e-invoice-settlement-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(2rem, 5vw, 4rem);
}

.e-invoice-page .e-invoice-type-chip {
  min-width: 64px;
  min-height: 44px;
  padding: 0.5rem;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--blue);
  color: var(--blue);
  font-family: var(--mono);
  font-size: 1.1rem;
  font-weight: 800;
}

.e-invoice-page .e-invoice-status {
  padding: 0.35rem 0.5rem;
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.e-invoice-page .e-invoice-status-not-offered {
  border: 1px solid #8497a9;
  color: #53687d;
}

.e-invoice-page .e-invoice-status-available {
  border: 1px solid #397dbd;
  background: #e6f1fc;
  color: #16588f;
}

.e-invoice-page .e-invoice-settlement-card h3 {
  font-size: clamp(1.45rem, 2.7vw, 2.1rem);
}

.e-invoice-page .e-invoice-settlement-card p,
.e-invoice-page .e-invoice-settlement-card li {
  color: var(--ink-soft);
}

.e-invoice-page .e-invoice-settlement-card code {
  padding: 0.08em 0.28em;
  border: 1px solid #c3d1df;
  background: #f5f8fb;
  color: #163e62;
  font-family: var(--mono);
  font-size: 0.86em;
}

.e-invoice-page .e-invoice-settlement-card ul {
  margin: 1.25rem 0;
  padding-left: 1.25rem;
}

.e-invoice-page .e-invoice-settlement-card li + li {
  margin-top: 0.55rem;
}

.e-invoice-page .e-invoice-settlement-available {
  margin: 1.5rem 0;
  padding: 1rem;
  display: grid;
  gap: 0.35rem;
  border-left: 3px solid var(--blue);
  background: #eaf3fc;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.e-invoice-page .e-invoice-settlement-available strong {
  color: #16588f;
}

.e-invoice-page .e-invoice-card-caption {
  margin-bottom: 0;
  font-family: var(--mono);
  font-size: 0.77rem;
  line-height: 1.6;
}

.e-invoice-page .e-invoice-europe-section {
  position: relative;
  z-index: 0;
}

.e-invoice-page .e-invoice-europe-section::before {
  position: absolute;
  inset: 0 -100vmax;
  z-index: -1;
  background: #eef5fb;
  box-shadow: 0 0 0 100vmax #eef5fb;
  clip-path: inset(0 -100vmax);
  content: "";
}

.e-invoice-page .e-invoice-layer-model {
  width: min(800px, 100%);
  margin: 0;
  padding: 0;
  list-style: none;
}

.e-invoice-page .e-invoice-layer-model li {
  min-height: 74px;
  margin-left: calc(var(--layer-index, 0) * 1rem);
  padding: 0.85rem 1.1rem;
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 0.85rem;
  border: 1px solid #a9bfd4;
  background: var(--white);
}

.e-invoice-page .e-invoice-layer-model li + li {
  margin-top: -1px;
}

.e-invoice-page .e-invoice-layer-model li:nth-child(1) { --layer-index: 0; width: 78%; }
.e-invoice-page .e-invoice-layer-model li:nth-child(2) { --layer-index: 1; width: 82%; }
.e-invoice-page .e-invoice-layer-model li:nth-child(3) { --layer-index: 2; width: 86%; }
.e-invoice-page .e-invoice-layer-model li:nth-child(4) { --layer-index: 3; width: 90%; }
.e-invoice-page .e-invoice-layer-model li:nth-child(5) { --layer-index: 4; width: 94%; border-color: #5a86ae; background: #dcecfb; }

.e-invoice-page .e-invoice-layer-model span {
  color: var(--blue);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 800;
}

.e-invoice-page .e-invoice-layer-model strong,
.e-invoice-page .e-invoice-layer-model small {
  display: block;
}

.e-invoice-page .e-invoice-layer-model strong {
  color: var(--ink);
  font-size: 0.95rem;
}

.e-invoice-page .e-invoice-layer-model small {
  margin-top: 0.16rem;
  color: var(--ink-soft);
  font-size: 0.78rem;
}

.e-invoice-page .e-invoice-europe-note {
  max-width: 76ch;
}

.e-invoice-page .e-invoice-faq-list {
  border-top: 1px solid var(--ink);
}

.e-invoice-page .e-invoice-faq-list details {
  border-bottom: 1px solid var(--line);
}

.e-invoice-page .e-invoice-faq-list summary {
  min-height: 70px;
  padding: 1.1rem 3rem 1.1rem 0;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--ink);
  font-size: clamp(1rem, 1.7vw, 1.22rem);
  font-weight: 760;
  line-height: 1.35;
}

.e-invoice-page .e-invoice-faq-list summary::marker {
  color: var(--blue);
}

.e-invoice-page .e-invoice-faq-list details p {
  max-width: 74ch;
  margin-bottom: 0;
  padding: 0 0 1.35rem;
  color: var(--ink-soft);
}

.e-invoice-page .e-invoice-faq-list a,
.e-invoice-page .e-invoice-sources a {
  color: #175f9e;
  font-weight: 750;
}

.e-invoice-page .e-invoice-sources {
  margin-top: clamp(4rem, 7vw, 6.5rem);
  padding-top: clamp(2rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
  gap: 0 clamp(2rem, 7vw, 7rem);
  border-top: 1px solid var(--ink);
}

.e-invoice-page .e-invoice-sources h3 {
  font-size: clamp(1.35rem, 2.5vw, 2rem);
}

.e-invoice-page .e-invoice-sources ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.e-invoice-page .e-invoice-sources li {
  padding: 0.8rem 0 0.8rem 1.2rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
}

.e-invoice-page .e-invoice-sources li::before {
  margin-left: -1.2rem;
  color: var(--blue);
  content: "↗ ";
}

.e-invoice-page .e-invoice-sources li span {
  display: block;
  margin-top: 0.3rem;
  color: #62778c;
  font-size: 0.84rem;
}

.e-invoice-page .e-invoice-source-status,
.e-invoice-page .e-invoice-legal-note {
  grid-column: 2;
  max-width: 70ch;
  margin-bottom: 0;
  padding: 0.9rem 1rem;
  color: #3e5870;
  font-size: 0.86rem;
}

.e-invoice-page .e-invoice-source-status {
  margin-top: 1.3rem;
  border-left: 3px solid var(--blue);
  background: #eaf3fc;
}

.e-invoice-page .e-invoice-legal-note {
  margin-top: 0.7rem;
  border-left: 3px solid #8296a9;
  background: #f0f4f7;
}

.e-invoice-page .e-invoice-closing {
  padding: clamp(4rem, 8vw, 7rem) max(24px, calc((100% - 1180px) / 2));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(2rem, 7vw, 7rem);
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  background: var(--night);
  color: #bdcddd;
}

.e-invoice-page .e-invoice-closing .e-invoice-section-label {
  color: #92bee8;
}

.e-invoice-page .e-invoice-closing h2 {
  max-width: 20ch;
  color: var(--white);
}

.e-invoice-page .e-invoice-closing > div:first-child > p:last-child {
  max-width: 66ch;
  margin-bottom: 0;
}

.e-invoice-page .e-invoice-closing-link {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  color: var(--white);
  font-weight: 800;
}

@media (max-width: 1100px) {
  .e-invoice-page .e-invoice-hero-shell {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.75fr);
    gap: 2rem;
  }

  .e-invoice-page .e-invoice-file-visual {
    padding-left: 1.5rem;
  }

  .e-invoice-page .e-invoice-format-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .e-invoice-page .e-invoice-delivery-flow {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .e-invoice-page .e-invoice-delivery-flow > i {
    display: none;
  }

  .e-invoice-page .e-invoice-delivery-flow > div {
    min-height: 150px;
  }
}

@media (max-width: 840px) {
  .e-invoice-page .e-invoice-sample {
    grid-template-columns: 1fr;
  }

  .e-invoice-page .e-invoice-hero-shell {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .e-invoice-page .e-invoice-hero-copy {
    padding-bottom: 3.5rem;
  }

  .e-invoice-page .e-invoice-file-visual {
    min-height: 0;
    padding: 2.5rem 0 3.5rem;
    border-top: 1px solid var(--line-dark);
    border-left: 0;
  }

  .e-invoice-page .e-invoice-file-visual::before {
    inset: 0 -100vmax;
    border-left: 0;
  }

  .e-invoice-page .e-invoice-quickfacts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .e-invoice-page .e-invoice-quickfacts div:nth-child(3) {
    padding-left: 0;
    border-top: 1px solid var(--line-dark);
    border-left: 0;
  }

  .e-invoice-page .e-invoice-quickfacts div:nth-child(4) {
    border-top: 1px solid var(--line-dark);
  }

  .e-invoice-page .e-invoice-heading-split,
  .e-invoice-page .e-invoice-exceptions,
  .e-invoice-page .e-invoice-limits-layout,
  .e-invoice-page .e-invoice-sources,
  .e-invoice-page .e-invoice-closing {
    grid-template-columns: 1fr;
  }

  .e-invoice-page .e-invoice-heading-split {
    align-items: start;
    gap: 1.25rem;
  }

  .e-invoice-page .e-invoice-timeline {
    grid-template-columns: 1fr;
  }

  .e-invoice-page .e-invoice-timeline li,
  .e-invoice-page .e-invoice-timeline li + li {
    padding: 0 0 1.6rem 2rem;
    border-left: 1px solid var(--line);
  }

  .e-invoice-page .e-invoice-timeline li::before {
    position: absolute;
    top: 0.2rem;
    left: -7px;
    margin: 0;
  }

  .e-invoice-page .e-invoice-timeline-date {
    min-height: 0;
    margin-bottom: 0.8rem;
  }

  .e-invoice-page .e-invoice-exceptions {
    gap: 1rem;
  }

  .e-invoice-page .e-invoice-delivery-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .e-invoice-page .e-invoice-validation-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .e-invoice-page .e-invoice-validation-notes {
    grid-template-columns: 1fr;
  }

  .e-invoice-page .e-invoice-validation-notes p + p {
    border-top: 1px solid #3c5a74;
    border-left: 0;
  }

  .e-invoice-page .e-invoice-settlement-grid {
    grid-template-columns: 1fr;
  }

  .e-invoice-page .e-invoice-source-status,
  .e-invoice-page .e-invoice-legal-note {
    grid-column: auto;
  }

  .e-invoice-page .e-invoice-closing {
    align-items: start;
  }
}

@media (max-width: 620px) {
  .e-invoice-page .e-invoice-hero-shell,
  .e-invoice-page .e-invoice-shell,
  .e-invoice-page .e-invoice-toc > div {
    width: var(--page);
  }

  .e-invoice-page .e-invoice-hero-shell {
    padding-top: 1.6rem;
  }

  .e-invoice-page .e-invoice-hero h1 {
    font-size: clamp(2.15rem, 10vw, 3.1rem);
  }

  .e-invoice-page .e-invoice-actions .button,
  .e-invoice-page .e-invoice-closing-actions .button,
  .e-invoice-page .e-invoice-closing-link {
    width: 100%;
  }

  .e-invoice-page .e-invoice-actions,
  .e-invoice-page .e-invoice-closing-actions {
    display: grid;
  }

  .e-invoice-page .e-invoice-files {
    gap: 0.45rem;
  }

  .e-invoice-page .e-invoice-file {
    min-height: 148px;
    padding: 0.7rem;
    box-shadow: 7px 7px 0 rgba(4, 13, 23, 0.38);
  }

  .e-invoice-page .e-invoice-file-hybrid {
    min-height: 180px;
  }

  .e-invoice-page .e-invoice-file::before {
    width: 17px;
    height: 17px;
  }

  .e-invoice-page .e-invoice-file > span {
    font-size: 0.67rem;
  }

  .e-invoice-page .e-invoice-file small {
    font-size: 0.48rem;
  }

  .e-invoice-page .e-invoice-file-hybrid b {
    left: 0.7rem;
  }

  .e-invoice-page .e-invoice-file-hybrid::after {
    width: 38px;
    height: 38px;
    font-size: 0.45rem;
  }

  .e-invoice-page .e-invoice-quickfacts {
    grid-template-columns: 1fr;
  }

  .e-invoice-page .e-invoice-quickfacts div + div,
  .e-invoice-page .e-invoice-quickfacts div:nth-child(3) {
    padding-left: 0;
    border-top: 1px solid var(--line-dark);
    border-left: 0;
  }

  .e-invoice-page .e-invoice-toc > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.6rem;
    padding-block: 1rem;
  }

  .e-invoice-page .e-invoice-toc span {
    margin: 0;
  }

  .e-invoice-page .e-invoice-section {
    padding-block: 4.25rem;
  }

  .e-invoice-page .e-invoice-section h2,
  .e-invoice-page .e-invoice-closing h2 {
    font-size: clamp(1.85rem, 9vw, 2.75rem);
  }

  .e-invoice-page .e-invoice-compare {
    border: 0;
  }

  .e-invoice-page .e-invoice-compare-row {
    margin-bottom: 0.9rem;
    display: grid;
    grid-template-columns: 1fr;
    border: 1px solid var(--line);
  }

  .e-invoice-page .e-invoice-compare-row > div {
    padding: 0.75rem 0.9rem;
    border-right: 0;
  }

  .e-invoice-page .e-invoice-compare-row > div::before {
    display: block;
    margin-bottom: 0.2rem;
    color: #60778e;
    font-family: var(--mono);
    font-size: 0.57rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .e-invoice-page .e-invoice-compare-row:not(.e-invoice-compare-head) > div:nth-child(1)::before { content: "Eigenschaft"; }
  .e-invoice-page .e-invoice-compare-row:not(.e-invoice-compare-head) > div:nth-child(2)::before { content: "Einfache PDF"; }
  .e-invoice-page .e-invoice-compare-row:not(.e-invoice-compare-head) > div:nth-child(3)::before { content: "Strukturierte E-Rechnung"; }

  .e-invoice-page .e-invoice-compare-head {
    display: none;
  }

  .e-invoice-page .e-invoice-format-grid,
  .e-invoice-page .e-invoice-delivery-flow,
  .e-invoice-page .e-invoice-validation-track {
    grid-template-columns: 1fr;
  }

  .e-invoice-page .e-invoice-format-card,
  .e-invoice-page .e-invoice-validation-track li {
    min-height: 0;
  }

  .e-invoice-page .e-invoice-format-card h3,
  .e-invoice-page .e-invoice-validation-track h3 {
    margin-top: 2rem;
  }

  .e-invoice-page .e-invoice-exceptions ul {
    columns: 1;
  }

  .e-invoice-page .e-invoice-delivery-flow > div {
    min-height: 125px;
  }

  .e-invoice-page .e-invoice-process li {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .e-invoice-page .e-invoice-process li > div {
    padding: 1.25rem 0.9rem 0.85rem 1.1rem;
  }

  .e-invoice-page .e-invoice-process small {
    grid-column: 2;
    padding: 0 0.9rem 1.25rem 1.1rem;
    border-left: 0;
  }

  .e-invoice-page .e-invoice-process > li > span {
    grid-row: 1 / span 2;
  }

  .e-invoice-page .e-invoice-limits-section {
    padding-inline: 0;
  }

  .e-invoice-page .e-invoice-settlement-line {
    align-items: flex-start;
    flex-direction: column;
  }

  .e-invoice-page .e-invoice-settlement-line i {
    width: 1px;
    height: 20px;
    margin-left: 0.2rem;
  }

  .e-invoice-page .e-invoice-settlement-line i::after {
    top: auto;
    right: -3px;
    bottom: 0;
    transform: rotate(135deg);
  }

  .e-invoice-page .e-invoice-layer-model li,
  .e-invoice-page .e-invoice-layer-model li:nth-child(n) {
    width: 100%;
    margin-left: 0;
  }

  .e-invoice-page .e-invoice-sources {
    gap: 1.2rem;
  }

  .e-invoice-page .e-invoice-closing {
    padding-inline: 14px;
  }

  .e-invoice-page .e-invoice-closing-link {
    justify-content: center;
  }
}

a.term-link,
a.term-link:visited,
.e-invoice-page a.term-link,
.e-invoice-page a.term-link:visited {
  color: inherit;
  font: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-decoration: none;
  background: transparent;
}

a.term-link:hover,
.e-invoice-page a.term-link:hover {
  color: var(--term-link-hover, var(--blue));
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a.term-link:focus-visible,
.e-invoice-page a.term-link:focus-visible {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

.site-header,
.hero,
.section-local,
.closing,
.site-footer,
.e-invoice-page .e-invoice-hero,
.e-invoice-page .e-invoice-validation-section,
.e-invoice-page .e-invoice-closing {
  --term-link-hover: var(--blue-bright);
}

.section-price {
  --term-link-hover: var(--white);
}

.e-invoice-page #begriff-ubl,
.e-invoice-page #begriff-cii,
.e-invoice-page #begriff-zugferd {
  scroll-margin-top: 7rem;
}

.faq-page .faq-hero {
  border-bottom: 1px solid var(--line-dark);
  background: var(--night);
  color: #c8d6e3;
}

.faq-page .faq-hero-shell,
.faq-page .faq-shell,
.faq-page .faq-category-nav > div {
  width: min(1180px, var(--page));
  margin-inline: auto;
}

.faq-page .faq-hero-shell {
  padding-block: clamp(2.8rem, 6vw, 5.2rem);
}

.faq-page .breadcrumb {
  margin-bottom: 1.7rem;
}

.faq-page .faq-kicker,
.faq-page .faq-section-heading > p,
.faq-page .faq-closing > div:first-child > p {
  margin: 0 0 0.85rem;
  color: var(--blue-bright);
  font-family: var(--mono);
  font-size: 0.71rem;
  font-weight: 800;
  letter-spacing: 0.095em;
  text-transform: uppercase;
}

.faq-page .faq-hero h1 {
  max-width: 12ch;
}

.faq-page .faq-hero > div > p:not(.faq-kicker) {
  max-width: 62ch;
  margin-bottom: 0;
  font-size: clamp(1.05rem, 1.8vw, 1.22rem);
}

.faq-page .faq-hero-note {
  margin-top: 1.25rem !important;
  color: #9fb8cf;
  font-size: 0.95rem !important;
}

.faq-page .faq-hero a,
.faq-page .faq-closing-link {
  color: var(--white);
  font-weight: 800;
}

.faq-page .faq-category-nav {
  position: sticky;
  top: 74px;
  z-index: 20;
  border-bottom: 1px solid var(--line);
  background: rgba(244, 247, 250, 0.96);
  backdrop-filter: blur(10px);
}

.faq-page .faq-category-nav > div {
  min-height: 64px;
  padding-block: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.1rem;
}

.faq-page .faq-category-nav span {
  margin-right: 0.35rem;
  color: var(--blue);
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.faq-page .faq-category-nav a {
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-weight: 750;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.faq-page .faq-category-nav a:hover {
  color: var(--blue);
}

.faq-page .faq-shell {
  padding-block: clamp(3rem, 7vw, 7rem);
}

.faq-page .faq-section {
  display: grid;
  grid-template-columns: minmax(190px, 0.38fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 7rem);
  padding-block: clamp(3rem, 6vw, 5.5rem);
  border-top: 1px solid var(--line-dark);
  scroll-margin-top: 8.5rem;
}

.faq-page .faq-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.faq-page .faq-section-heading {
  position: sticky;
  top: 10rem;
  align-self: start;
}

.faq-page .faq-section-heading h2 {
  max-width: 11ch;
  font-size: clamp(1.75rem, 3vw, 3.2rem);
}

.faq-page .faq-section-heading span {
  display: block;
  max-width: 25ch;
  margin-top: 1.1rem;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.faq-page .faq-list {
  border-top: 1px solid var(--ink);
}

.faq-page .faq-list details {
  border-bottom: 1px solid var(--line);
}

.faq-page .faq-list summary {
  min-height: 76px;
  padding: 1.15rem 3.2rem 1.15rem 0;
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--ink);
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  font-weight: 760;
  line-height: 1.35;
  list-style: none;
}

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

.faq-page .faq-list summary::after {
  position: absolute;
  right: 0.25rem;
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  color: var(--blue);
  content: "+";
  font-family: var(--mono);
  font-size: 1.15rem;
  font-weight: 700;
  transition: transform 160ms ease, background-color 160ms ease, color 160ms ease;
}

.faq-page .faq-list details[open] summary::after {
  transform: rotate(45deg);
  background: var(--blue-pale);
}

.faq-page .faq-list summary:hover::after {
  border-color: var(--blue);
  background: var(--blue-pale);
}

.faq-page .faq-list summary:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: -3px;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

.faq-page .faq-list details > div {
  max-width: 72ch;
  padding: 0 3rem 1.5rem 0;
  color: var(--ink-soft);
}

.faq-page .faq-list p:last-child,
.faq-page .faq-list ul:last-child {
  margin-bottom: 0;
}

.faq-page .faq-list ul {
  padding-left: 1.25rem;
}

.faq-page .faq-list li + li {
  margin-top: 0.25rem;
}

.faq-page .faq-list a:not(.term-link) {
  color: #175f9e;
  font-weight: 750;
}

.faq-page .faq-closing {
  padding: clamp(3.5rem, 7vw, 6.5rem) max(24px, calc((100% - 1180px) / 2));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(2rem, 7vw, 7rem);
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  background: var(--night);
  color: #bdcddd;
}

.faq-page .faq-closing h2 {
  max-width: 13ch;
  color: var(--white);
}

.faq-page .faq-closing > div:first-child > span {
  display: block;
  max-width: 45ch;
}

.faq-page .faq-closing-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
}

.faq-page .faq-closing-link:hover {
  color: var(--blue-bright);
}

@media (max-width: 840px) {
  .faq-page .faq-section {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .faq-page .faq-section-heading {
    position: static;
  }

  .faq-page .faq-section-heading h2 {
    max-width: 18ch;
  }

  .faq-page .faq-section-heading span {
    max-width: 52ch;
  }

  .faq-page .faq-closing {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

@media (max-width: 620px) {
  .faq-page .faq-hero-shell,
  .faq-page .faq-shell,
  .faq-page .faq-category-nav > div {
    width: var(--page);
  }

  .faq-page .faq-category-nav {
    position: static;
  }

  .faq-page .faq-category-nav > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.55rem;
    padding-block: 1rem;
  }

  .faq-page .faq-category-nav span {
    margin: 0 0 0.2rem;
  }

  .faq-page .faq-section {
    padding-block: 3.4rem;
    scroll-margin-top: 5rem;
  }

  .faq-page .faq-list summary {
    min-height: 70px;
    padding-right: 3rem;
  }

  .faq-page .faq-list details > div {
    padding-right: 0;
  }

  .faq-page .faq-closing {
    padding-inline: 14px;
  }

  .faq-page .faq-closing-actions,
  .faq-page .faq-closing-actions .button,
  .faq-page .faq-closing-link {
    width: 100%;
  }

  .faq-page .faq-closing-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-page .faq-list summary::after {
    transition: none;
  }
}

/* Checkout: Unterseite mit denselben Gestaltungsgrundlagen wie die Startseite. */
.checkout-page .checkout-kicker,
.checkout-page .checkout-section-heading > p,
.checkout-page .checkout-summary-kicker {
  margin: 0 0 0.85rem;
  color: var(--blue-bright);
  font-family: var(--mono);
  font-size: 0.71rem;
  font-weight: 800;
  letter-spacing: 0.095em;
  text-transform: uppercase;
}

.checkout-page .checkout-shell {
  width: min(1080px, var(--page));
}

.checkout-page .checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(19rem, 0.78fr);
  align-items: start;
  gap: clamp(1.5rem, 4vw, 4rem);
}

.checkout-page .checkout-card {
  min-width: 0;
  padding: clamp(1.3rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  background: var(--white);
}

.checkout-page .checkout-form {
  display: grid;
  gap: 1.15rem;
}

.checkout-page .checkout-section-heading {
  padding-bottom: 1.35rem;
  border-bottom: 1px solid var(--ink);
}

.checkout-page .checkout-section-heading > p {
  color: var(--blue);
}

.checkout-page .checkout-section-heading h2,
.checkout-page .checkout-summary h2 {
  min-width: 0;
  max-width: none;
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.55rem, 2.7vw, 2.25rem);
  overflow-wrap: anywhere;
  hyphens: auto;
}

.checkout-page .checkout-fields-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.checkout-page .checkout-field {
  min-width: 0;
  display: grid;
  gap: 0.42rem;
}

.checkout-page .checkout-field label {
  color: var(--ink-soft);
  font-size: 0.88rem;
  font-weight: 760;
}

.checkout-page .checkout-field label span {
  color: #64788e;
  font-weight: 650;
}

.checkout-page .checkout-field input {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.82rem;
  border: 1px solid var(--line-dark);
  border-radius: 0;
  background: var(--white);
  color: var(--ink);
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.checkout-page .checkout-field input:hover {
  border-color: var(--blue);
}

.checkout-page .checkout-field input:focus {
  border-color: var(--blue);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(44, 111, 187, 0.22);
}

.checkout-page .checkout-payment-methods {
  min-width: 0;
  margin: 0.65rem 0 0;
  padding: 1.6rem 0 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.checkout-page .checkout-payment-methods legend {
  width: 100%;
  padding: 0;
  color: var(--ink);
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  font-weight: 760;
  line-height: 1.2;
}

.checkout-page .checkout-payment-methods legend span {
  display: block;
  margin-bottom: 0.6rem;
  color: var(--blue);
  font-family: var(--mono);
  font-size: 0.71rem;
  font-weight: 800;
  letter-spacing: 0.095em;
  text-transform: uppercase;
}

.checkout-page .checkout-payment-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 1rem;
}

.checkout-page .checkout-payment-options > div {
  min-width: 0;
  position: relative;
}

.checkout-page .checkout-payment-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.checkout-page .checkout-payment-choice {
  min-height: 64px;
  padding: 0.8rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-dark);
  background: var(--white);
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 760;
  text-align: center;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.checkout-page .checkout-payment-choice:hover {
  border-color: var(--blue);
  background: var(--blue-pale);
  color: var(--ink);
}

.checkout-page .checkout-payment-input:checked + .checkout-payment-choice {
  border-color: var(--blue);
  background: var(--blue-pale);
  color: #175f9e;
  box-shadow: inset 0 0 0 1px var(--blue);
}

.checkout-page .checkout-payment-input:focus-visible + .checkout-payment-choice {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

.checkout-page .checkout-submit-area {
  margin-top: 0.45rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.checkout-page .checkout-submit {
  width: 100%;
  cursor: pointer;
  font: inherit;
}

.checkout-page .checkout-submit-area p {
  max-width: 50ch;
  margin: 0.9rem auto 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.5;
  text-align: center;
}

/* The fine print below the call to action, and only that.
   The buy handoff is itself an anchor inside this area, so an unscoped rule
   here overrode the white label of .button with the link colour and produced
   dark text on a blue fill. The old mock had a <button> in that position, so
   the rule never touched it and the clash only appeared once the handoff
   became a real link. */
.checkout-page .checkout-submit-area a:not(.button) {
  color: #175f9e;
  font-weight: 750;
}

.checkout-page a.checkout-submit,
.checkout-page a.checkout-submit:hover,
.checkout-page a.checkout-submit:focus-visible {
  color: var(--white);
}

.checkout-page .checkout-summary {
  position: sticky;
  top: 96px;
}

.checkout-page .checkout-summary-kicker {
  color: var(--blue);
}

.checkout-page .checkout-summary-lines {
  margin-top: 1.5rem;
  border-top: 1px solid var(--ink);
}

.checkout-page .checkout-summary-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.94rem;
}

.checkout-page .checkout-summary-line > span:last-child {
  color: var(--ink);
  font-weight: 760;
  text-align: right;
  white-space: nowrap;
}

.checkout-page .checkout-summary-line small {
  display: block;
  margin-top: 0.2rem;
  color: #64788e;
  font-size: 0.8rem;
}

.checkout-page .checkout-summary-line > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.checkout-page .checkout-summary-total {
  padding-top: 1.25rem;
  border-bottom: 0;
  color: var(--ink);
  font-size: 1.12rem;
  font-weight: 800;
}

.checkout-page .checkout-summary-total > span:last-child {
  color: var(--blue);
  font-size: 1.25rem;
}

.checkout-page .checkout-included-list {
  margin: 1.2rem 0 0;
  padding: 1.15rem 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.checkout-page .checkout-included-list li {
  position: relative;
  padding-left: 1.55rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.checkout-page .checkout-included-list li + li {
  margin-top: 0.6rem;
}

.checkout-page .checkout-included-list li::before {
  position: absolute;
  top: 0.15rem;
  left: 0;
  color: var(--blue);
  content: "✓";
  font-weight: 800;
}

@media (max-width: 840px) {
  .checkout-page .checkout-layout {
    grid-template-columns: 1fr;
  }

  .checkout-page .checkout-summary {
    position: static;
  }
}

@media (max-width: 620px) {
  .checkout-page .checkout-shell {
    width: var(--page);
  }

  .checkout-page .checkout-card {
    padding: 1.15rem;
  }

  .checkout-page .checkout-fields-grid,
  .checkout-page .checkout-payment-options {
    grid-template-columns: 1fr;
  }

  .checkout-page .checkout-payment-choice {
    min-height: 52px;
  }
}

/* Download: Produktwege und Startinformationen in der Unterseitenwelt. */
.download-page .download-kicker,
.download-page .download-option-kicker,
.download-page .download-detail-kicker,
.contact-page .contact-kicker,
.contact-page .contact-section-heading > p {
  margin: 0 0 0.85rem;
  color: var(--blue-bright);
  font-family: var(--mono);
  font-size: 0.71rem;
  font-weight: 800;
  letter-spacing: 0.095em;
  text-transform: uppercase;
}

.download-page .subpage-hero h1 {
  overflow-wrap: anywhere;
  hyphens: auto;
}

.contact-page .contact-hero h1 {
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

.contact-page .contact-hero-title-line {
  display: block;
}

.download-page .download-shell,
.contact-page .contact-shell {
  width: min(1080px, var(--page));
}

.download-page .download-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--line);
}

.download-page .download-option {
  min-width: 0;
  min-height: 100%;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.download-page .download-option-featured {
  background: var(--blue-pale);
}

.download-page .download-option-kicker,
.download-page .download-detail-kicker,
.contact-page .contact-section-heading > p {
  color: var(--blue);
}

.download-page .download-option h2,
.download-page .download-detail-section h2,
.contact-page .contact-section-heading h2 {
  max-width: none;
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.55rem, 2.7vw, 2.25rem);
  overflow-wrap: anywhere;
  hyphens: auto;
}

.download-page .download-option > p:not(.download-option-kicker):not(.download-option-meta) {
  margin: 1.1rem 0 1.5rem;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.download-page .download-action {
  width: 100%;
  margin-top: auto;
  text-align: center;
}

/* Der Hinweis auf die falsche EXE. Er braucht Gewicht, weil er die einzige
   Falle im entpackten Paket benennt: nach dem Entpacken ist
   RechAssistUpdater.exe die einzige sofort sichtbare Programmdatei, und sie
   ist die falsche. Als gewoehnlicher Fliesstext wuerde er ueberlesen. */
.download-page .download-warning {
  margin: 1.1rem 0 0;
  padding: 0.85rem 1rem;
  border-left: 4px solid var(--orange);
  background: var(--surface);
  font-size: 0.95rem;
}

/* Der Zustand "vorbereitet" des Downloadziels. Bewusst gestrichelt und ohne
   Fuellung: Er sitzt an der Stelle, an der spaeter die Schaltflaeche steht,
   und darf auf keinen Fall wie eine aussehen. Vorher stand hier eine echte
   Schaltflaeche mit href="#", die nichts tat. */
.download-page .download-status {
  width: 100%;
  margin-top: auto;
  padding: 0.85rem 1rem;
  border: 1px dashed var(--line);
  color: var(--ink-soft);
  text-align: center;
  font-size: 0.95rem;
}

.download-page .download-option-meta {
  min-width: 0;
  margin: 1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.download-page .download-detail-grid {
  margin-top: clamp(3.5rem, 7vw, 6.5rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 4rem);
}

.download-page .download-detail-section {
  min-width: 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ink);
}

.download-page .download-requirements,
.download-page .download-steps {
  margin: 1.4rem 0 0;
  padding-left: 1.25rem;
  color: var(--ink-soft);
}

.download-page .download-requirements li,
.download-page .download-steps li {
  min-width: 0;
  overflow-wrap: anywhere;
}

.download-page .download-requirements li + li,
.download-page .download-steps li + li {
  margin-top: 0.7rem;
}

.download-page code {
  padding: 0.08em 0.3em;
  background: rgba(100, 168, 242, 0.18);
  color: inherit;
  font-family: var(--mono);
  font-size: 0.86em;
  overflow-wrap: anywhere;
}

/* Kontakt: Formular und Serviceinformationen mit den Feldmustern des Checkouts. */
.contact-page .contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
  align-items: start;
  gap: clamp(1.5rem, 4vw, 4rem);
}

.contact-page .contact-card,
.contact-page .contact-info-card {
  min-width: 0;
  padding: clamp(1.3rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  background: var(--white);
}

.contact-page .contact-form {
  position: relative;
  display: grid;
  gap: 1.15rem;
}

.contact-page .contact-section-heading {
  padding-bottom: 1.35rem;
  border-bottom: 1px solid var(--ink);
}

.contact-page .contact-field {
  min-width: 0;
  display: grid;
  gap: 0.42rem;
}

.contact-page .contact-field label {
  color: var(--ink-soft);
  font-size: 0.88rem;
  font-weight: 760;
}

.contact-page .contact-field input,
.contact-page .contact-field select,
.contact-page .contact-field textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0.7rem 0.82rem;
  border: 1px solid var(--line-dark);
  border-radius: 0;
  background: var(--white);
  color: var(--ink);
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.contact-page .contact-field textarea {
  min-height: 168px;
  resize: vertical;
}

.contact-page .contact-field input:hover,
.contact-page .contact-field select:hover,
.contact-page .contact-field textarea:hover {
  border-color: var(--blue);
}

.contact-page .contact-field input:focus,
.contact-page .contact-field select:focus,
.contact-page .contact-field textarea:focus {
  border-color: var(--blue);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(44, 111, 187, 0.22);
}

.contact-page .contact-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.contact-page .contact-privacy-note,
.contact-page .contact-status {
  min-width: 0;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.84rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.contact-page .contact-privacy-note a {
  color: #175f9e;
  font-weight: 750;
}

.contact-page .contact-status:empty {
  min-height: 0;
}

.contact-page .contact-status:not(:empty) {
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--blue);
  background: var(--blue-pale);
}

.contact-page .contact-status.is-success {
  border-left-color: #287a50;
  background: #e8f5ee;
  color: #185638;
}

.contact-page .contact-status.is-error {
  border-left-color: #b23a35;
  background: #fbeceb;
  color: #7f2723;
}

.contact-page .contact-submit {
  width: 100%;
  max-width: 100%;
  cursor: pointer;
  font: inherit;
}

.contact-page .contact-submit:disabled {
  cursor: wait;
  opacity: 0.68;
}

.contact-page .contact-information {
  min-width: 0;
  display: grid;
  gap: 1rem;
}

.contact-page .contact-information-heading {
  padding: 0 0 1.35rem;
}

.contact-page .contact-info-card h3 {
  max-width: none;
  margin-bottom: 0.65rem;
  color: var(--ink);
  font-size: 1.1rem;
}

.contact-page .contact-info-card p,
.contact-page .contact-info-card address {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
  font-style: normal;
  overflow-wrap: anywhere;
}

.contact-page .contact-info-card p + p {
  margin-top: 0.75rem;
}

.contact-page .contact-email {
  color: #175f9e;
  font-weight: 750;
  overflow-wrap: anywhere;
}

@media (max-width: 840px) {
  .download-page .download-options,
  .download-page .download-detail-grid,
  .contact-page .contact-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .download-page .download-shell,
  .contact-page .contact-shell {
    width: var(--page);
  }

  .download-page .download-option,
  .contact-page .contact-card,
  .contact-page .contact-info-card {
    padding: 1.15rem;
  }
}

@media (max-width: 390px) {
  .contact-page .contact-card,
  .contact-page .contact-info-card {
    padding: 1rem;
  }

  .contact-page .contact-field,
  .contact-page .contact-field input,
  .contact-page .contact-field select,
  .contact-page .contact-field textarea,
  .contact-page .contact-submit {
    min-width: 0;
    max-width: 100%;
  }
}

/* Rechtsseiten: gemeinsamer, gut lesbarer Rahmen für unveränderte Rechtstexte. */
.legal-page .legal-hero-shell,
.legal-page .legal-shell,
.legal-page .legal-navigation > div {
  width: min(920px, var(--page));
}

.legal-page .legal-hero-shell,
.legal-page .legal-shell {
  margin-inline: auto;
}

.legal-page .legal-hero-shell {
  padding-block: clamp(1.8rem, 4vw, 3.5rem) clamp(2.8rem, 6vw, 5rem);
}

.legal-page .legal-kicker {
  margin: 0 0 0.85rem;
  color: var(--blue-bright);
  font-family: var(--mono);
  font-size: 0.71rem;
  font-weight: 800;
  letter-spacing: 0.095em;
  text-transform: uppercase;
}

.legal-page .legal-hero h1 {
  max-width: 18ch;
  margin-bottom: 0;
  font-size: clamp(2.35rem, 5vw, 4.5rem);
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

.legal-page .legal-navigation {
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.legal-page .legal-navigation > div {
  min-height: 64px;
  margin-inline: auto;
  padding-block: 0.7rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 1rem;
}

.legal-page .legal-navigation span {
  margin-right: 0.35rem;
  color: var(--blue);
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.legal-page .legal-navigation a {
  min-width: 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.legal-page .legal-navigation a:hover,
.legal-page .legal-navigation a[aria-current="page"] {
  color: #175f9e;
}

.legal-page .legal-shell {
  padding-block: clamp(3rem, 7vw, 6rem);
}

.legal-page .legal-content {
  min-width: 0;
  padding: clamp(1.4rem, 4vw, 3.25rem);
  border: 1px solid var(--line);
  background: var(--white);
}

.legal-page .legal-section {
  min-width: 0;
  padding-block: clamp(2rem, 4vw, 3.25rem);
  border-top: 1px solid var(--line);
}

.legal-page .legal-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.legal-page .legal-section:last-child {
  padding-bottom: 0;
}

.legal-page .legal-section h2 {
  max-width: none;
  margin: 0 0 1.1rem;
  color: var(--ink);
  font-size: clamp(1.35rem, 2.7vw, 2rem);
  hyphens: none;
  overflow-wrap: anywhere;
}

.legal-page .legal-section h3 {
  max-width: none;
  margin: 1.7rem 0 0.7rem;
  color: var(--ink);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  overflow-wrap: anywhere;
}

.legal-page .legal-section p,
.legal-page .legal-section li {
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.legal-page .legal-section p {
  margin-bottom: 1rem;
}

.legal-page .legal-section p:last-child,
.legal-page .legal-section ul:last-child {
  margin-bottom: 0;
}

.legal-page .legal-section ul {
  margin: 1rem 0 0;
  padding-left: 1.35rem;
}

.legal-page .legal-section li + li {
  margin-top: 0.45rem;
}

.legal-page .legal-content a {
  color: #175f9e;
  font-weight: 750;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 620px) {
  .legal-page .legal-hero-shell,
  .legal-page .legal-shell,
  .legal-page .legal-navigation > div {
    width: var(--page);
  }

  .legal-page .legal-hero h1 {
    font-size: clamp(1.65rem, 8vw, 2.2rem);
  }

  .legal-page .legal-navigation > div {
    padding-block: 1rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem 1rem;
  }

  .legal-page .legal-navigation span {
    grid-column: 1 / -1;
    margin: 0 0 0.2rem;
  }

  .legal-page .legal-content {
    padding: 1.15rem;
  }
}

@media (max-width: 390px) {
  .legal-page .legal-navigation > div {
    grid-template-columns: 1fr;
  }
}

/* Aktuelle Seite im Hauptmenü. */

.site-navigation > a[aria-current="page"],
.navigation-dropdown:has(a[aria-current="page"]) > summary,
.text-action[aria-current="page"],
.mobile-demo-action[aria-current="page"] {
  color: #9bc9f5;
  box-shadow: inset 0 -2px 0 var(--blue-bright);
}

.navigation-dropdown-menu a[aria-current="page"] {
  color: #9bc9f5;
  box-shadow: inset 3px 0 0 var(--blue-bright);
}

.header-actions .button[aria-current="page"],
.mobile-buy-action[aria-current="page"] {
  box-shadow: 0 0 0 2px var(--night), 0 0 0 4px var(--blue-bright);
}

@media (max-width: 1100px) {
  .site-navigation > a[aria-current="page"],
  .navigation-dropdown:has(a[aria-current="page"]) > summary,
  .mobile-demo-action[aria-current="page"] {
    box-shadow: inset 3px 0 0 var(--blue-bright);
  }
}

/* Verweise auf Kostenvergleich und Anleitung. */

.process-guide-link {
  display: inline-block;
  margin-top: 1.75rem;
}

.price-copy .price-demo {
  margin-top: 0.5rem;
  color: var(--white);
}

/* Bildergalerie der Startseite. */

.tour {
  display: grid;
  gap: 0.75rem;
}

.tour:focus-visible {
  outline: 2px solid var(--blue-bright);
  outline-offset: 4px;
}

.tour-stage {
  touch-action: pan-y;
}

.tour-slides {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tour-slide + .tour-slide {
  display: none;
}

.js .tour-slide {
  display: none;
}

.js .tour-slide.is-active {
  display: block;
  animation: tour-fade 260ms ease-out;
}

@keyframes tour-fade {
  from {
    opacity: 0.35;
  }

  to {
    opacity: 1;
  }
}

.tour-placeholder {
  aspect-ratio: 5 / 3;
  display: grid;
  place-content: center;
  gap: 0.35rem;
  padding: 1.5rem 2rem;
  background: var(--tour-placeholder, var(--blue));
  color: var(--tour-placeholder-ink, var(--white));
  text-align: center;
}

.tour-placeholder span,
.tour-placeholder small {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.85;
}

.tour-placeholder strong {
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  line-height: 1.25;
}

.tour-placeholder-1 { --tour-placeholder: #2563eb; }
.tour-placeholder-2 { --tour-placeholder: #0f9d7a; }
.tour-placeholder-3 { --tour-placeholder: #f59e0b; --tour-placeholder-ink: #1a1a1a; }
.tour-placeholder-4 { --tour-placeholder: #dc2626; }
.tour-placeholder-5 { --tour-placeholder: #7c3aed; }
.tour-placeholder-6 { --tour-placeholder: #0891b2; }
.tour-placeholder-7 { --tour-placeholder: #db2777; }
.tour-placeholder-8 { --tour-placeholder: #84cc16; --tour-placeholder-ink: #1a1a1a; }
.tour-placeholder-9 { --tour-placeholder: #475569; }
.tour-placeholder-10 { --tour-placeholder: #b45309; }

/* Bilder der Galerie: Nachbauten im Format 5 : 3, wie die Platzhalter. */
.tour-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 3;
}

.tour-bar {
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.js .tour-bar {
  display: flex;
}

.tour-play,
.tour-step {
  border: 1px solid var(--blue-bright);
  background: transparent;
  color: #dceafe;
  font: 700 0.85rem var(--font);
  cursor: pointer;
}

.tour-play {
  min-height: 2.4rem;
  padding: 0.45rem 0.9rem;
}

.tour-play::before {
  content: "\25B6";
  content: "\25B6" / "";
  margin-right: 0.45rem;
}

.tour-play[aria-pressed="true"]::before {
  content: "\275A\275A";
  content: "\275A\275A" / "";
}

.tour-step {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  font-size: 1.3rem;
  line-height: 1;
}

.tour-play:hover,
.tour-step:hover {
  background: rgba(100, 168, 242, 0.16);
}

.tour-play:focus-visible,
.tour-step:focus-visible,
.tour-dot:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

.tour-count {
  min-width: 3.4rem;
  color: #b9cbe0;
  font-family: var(--mono);
  font-size: 0.78rem;
  text-align: center;
}

.tour-dots {
  display: flex;
  gap: 0.35rem;
  margin-left: auto;
}

.tour-dot {
  width: 0.7rem;
  height: 0.7rem;
  padding: 0;
  border: 1px solid #8ba1b8;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.tour-dot[aria-current="true"] {
  border-color: var(--blue-bright);
  background: var(--blue-bright);
}

.hero-visual .tour-figcaption {
  display: grid;
  justify-items: start;
  gap: 1rem;
  color: #b9cbe0;
  font-size: 0.85rem;
}

.tour-more {
  gap: 0.5rem;
  font-size: 0.95rem;
}

/* Große Galerie (startseite.js): Auf breiten Bildschirmen macht jede Bedienung der Galerie sie so breit wie den ganzen Kopf
   (vom Textanfang links bis zum rechten Rand des blauen Verlaufs); Überschrift und Text stehen dann darunter. Bild und
   Knopfleiste passen zusammen in die Fensterhöhe (--tour-reserve: Menüleiste, Abstände, Rahmen und Knopfleiste). */
.tour-small {
  display: none;
}

@media (min-width: 1101px) {
  .tour-stage {
    cursor: zoom-in;
  }

  .hero-grid.tour-gross {
    --tour-reserve: 212px;
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-grid.tour-gross .hero-visual {
    order: -1;
    padding: 1.25rem 0 2.5rem;
    border-bottom: 1px solid var(--line-dark);
    border-left: 0;
  }

  .hero-grid.tour-gross .hero-copy {
    max-width: 860px;
  }

  .hero-grid.tour-gross .screen-label,
  .hero-grid.tour-gross .tour,
  .hero-grid.tour-gross .tour-figcaption {
    width: min(100%, calc((100vh - var(--tour-reserve)) * 5 / 3 + 28px));
    width: min(100%, calc((100svh - var(--tour-reserve)) * 5 / 3 + 28px));
    margin-inline: auto;
  }

  .hero-grid.tour-gross .tour-stage {
    cursor: default;
  }

  .hero-grid.tour-gross .tour-small {
    min-height: 2.4rem;
    padding: 0.45rem 0.9rem;
    display: inline-block;
    border: 1px solid var(--blue-bright);
    background: transparent;
    color: #dceafe;
    font: 700 0.85rem var(--font);
    cursor: pointer;
  }

  .tour-small:hover {
    background: rgba(100, 168, 242, 0.16);
  }

  .tour-small:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 2px;
  }
}

@media (max-width: 620px) {
  .tour-play {
    flex: 1 1 100%;
  }

  .tour-dots {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .tour-slide.is-active {
    animation: none;
  }
}

/* Hilfeseite: Kontaktabschnitt unter den Themen. */

.help-contact {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.help-contact .article-list + p {
  margin-top: 1rem;
}

/* Großansicht in einem Fenster auf derselben Seite (startseite.js, a[data-gross]). */

.media-viewer {
  width: min(1100px, calc(100vw - 2rem));
  max-width: none;
  height: calc(100vh - 2rem);
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  overflow: hidden;
}

.media-viewer[open] {
  display: flex;
  flex-direction: column;
}

.media-viewer::backdrop {
  background: rgba(10, 20, 32, 0.72);
}

.media-viewer-head,
.media-viewer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
}

.media-viewer-foot {
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

.media-viewer-head h2 {
  flex: 1;
  max-width: none;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
}

.media-viewer-close {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.media-viewer-body {
  flex: 1;
  overflow: auto;
  background: #eef2f7;
}

.media-viewer-body img {
  display: block;
  width: 100%;
  min-width: 760px;
  height: auto;
}

/* Anleitung: Kapitel mit Video- und Bildplätzen. */

.guide-video {
  aspect-ratio: 16 / 9;
  max-width: 760px;
  display: grid;
  place-content: center;
  gap: 0.4rem;
  margin: 0 0 1.5rem;
  background: var(--night-raised);
  color: #dceafe;
  text-align: center;
}

.guide-video span[aria-hidden="true"] {
  font-size: 2.4rem;
  line-height: 1;
}

.guide-overview {
  margin-bottom: 2rem;
}

.guide-video-film {
  display: block;
  aspect-ratio: auto;
  background: none;
  color: inherit;
  text-align: left;
}

.guide-video-film video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: var(--night-raised);
}

.guide-video-film figcaption {
  margin-top: 0.4rem;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.guide-toc {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem 2rem;
  margin: 0 0 3rem;
  padding: 1.5rem;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.92rem;
}

.guide-toc strong {
  display: block;
}

.guide-video-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.35rem 0 0.1rem;
  font-weight: 700;
}

.guide-video-link::before {
  content: "\25B6";
  content: "\25B6" / "";
  font-size: 0.75em;
}

.guide-toc ul {
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
}

.guide-toc li {
  margin: 0.2rem 0;
}

.guide-part {
  padding: 2.5rem 0;
  border-top: 1px solid var(--line);
}

.guide-part h2 {
  margin-bottom: 1rem;
}

.guide-step {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  align-items: start;
  gap: 1.25rem;
  margin: 0 0 1.1rem;
}

.guide-step h3 {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
}

.guide-image {
  aspect-ratio: 5 / 3;
  display: grid;
  place-content: center;
  padding: 0.5rem;
  background: var(--guide-color, var(--blue));
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
}

.guide-image-bild {
  display: block;
  aspect-ratio: auto;
  padding: 0;
  background: none;
}

.guide-image-bild img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  filter: drop-shadow(0 2px 6px rgba(15, 23, 42, 0.16));
}

.guide-image-bild img + img {
  margin-top: 0.9rem;
}

.guide-image-bild img.guide-bild-anschnitt {
  border-radius: 8px 8px 0 0;
}

.guide-image-bild img.guide-bild-anschnitt-oben {
  border-radius: 0 0 8px 8px;
}

.guide-image-bild img.guide-bild-anschnitt-rechts {
  border-radius: 8px 0 0 8px;
}

.guide-image-bild img.guide-bild-anschnitt-rechts-unten {
  border-radius: 8px 0 0 0;
}

/* Vergrößerung per Klick (startseite.js): doppelte Größe an Ort und Stelle, linke obere Ecke bleibt.
   Nur bei zweispaltiger Anleitung; auf schmalen Bildschirmen sind die Bilder schon so breit wie möglich. */
@media (min-width: 841px) {
  .guide-image-bild img.guide-zoom {
    position: relative;
    cursor: zoom-in;
    transform-origin: top left;
    transition: transform 0.18s ease;
  }

  .guide-image-bild img.guide-zoom.is-zoomed {
    z-index: 30;
    cursor: zoom-out;
    transform: scale(2);
    filter: drop-shadow(0 6px 18px rgba(15, 23, 42, 0.3));
  }

  .guide-image-bild img.guide-zoom.guide-zoom-25.is-zoomed {
    transform: scale(2.5);
  }

  /* Sehr breite Bilder (Kundenliste, Positionskatalog, Dokumentliste): 3,5-fach, damit die Schrift lesbar wird.
     Unter 1100 Pixel Fensterbreite wäre das Bild breiter als das Fenster, dort bleibt es bei 2,5-fach. */
  .guide-image-bild img.guide-zoom.guide-zoom-35.is-zoomed {
    transform: scale(2.5);
  }

  .guide-image-bild img.guide-zoom:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 3px;
  }
}

@media (min-width: 1100px) {
  .guide-image-bild img.guide-zoom.guide-zoom-35.is-zoomed {
    transform: scale(3.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .guide-image-bild img.guide-zoom {
    transition: none;
  }
}

.guide-part-a { --guide-color: #2563eb; }
.guide-part-b { --guide-color: #0f9d7a; }
.guide-part-c { --guide-color: #7c3aed; }
.guide-part-d { --guide-color: #dc2626; }
.guide-part-e { --guide-color: #0891b2; }
.guide-part-f { --guide-color: #b45309; }
.guide-part-g { --guide-color: #be185d; }

.guide-text {
  margin: 0;
  padding: 0.9rem 1rem;
  border: 1px dashed var(--line);
  color: var(--ink-soft);
}

.guide-step:has(.guide-body) {
  margin-bottom: 2.25rem;
}

.guide-body {
  max-width: 72ch;
  color: var(--ink-soft);
}

.guide-body > * {
  margin: 0 0 0.75rem;
}

.guide-body > :last-child {
  margin-bottom: 0;
}

.guide-steps,
.guide-list {
  padding-left: 1.4rem;
}

.guide-steps li + li,
.guide-list li + li {
  margin-top: 0.4rem;
}

.guide-note {
  padding: 0.7rem 0.9rem;
  border-left: 3px solid var(--blue);
  background: #e9f2fb;
  color: #183653;
}

.guide-figure {
  margin: 0.6rem 0 0.2rem;
}

.guide-figure img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  filter: drop-shadow(0 2px 6px rgba(15, 23, 42, 0.16));
}

.guide-figure-medium img {
  max-width: min(100%, 520px);
}

.guide-figure figcaption {
  margin-top: 0.35rem;
  font-size: 0.85rem;
}

.guide-figure-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0.6rem 0 0.2rem;
}

.guide-figure-pair .guide-figure {
  margin: 0;
}

@media (max-width: 620px) {
  .guide-figure-pair {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 840px) {
  .guide-toc,
  .guide-step {
    grid-template-columns: 1fr;
  }
}

/* Anleitung: Inhalt jederzeit erreichbar (startseite.js). Unten rechts „Inhalt“ und „Nach oben“, sobald das
   Inhaltsverzeichnis oben aus dem Bild ist; „Inhalt“ öffnet das Verzeichnis als Leiste, das aktuelle Kapitel ist markiert. */

.guide-dock {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 150;
  display: flex;
  gap: 0.5rem;
}

.guide-dock[hidden],
.guide-drawer[hidden] {
  display: none;
}

.guide-dock-toc,
.guide-dock-top {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--blue);
  background: var(--blue);
  color: var(--white);
  font: inherit;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(3, 14, 27, 0.28);
}

.guide-dock-top {
  min-width: 48px;
  padding-inline: 0.9rem;
  border-color: var(--line-dark);
  background: var(--night);
}

.guide-dock-toc:hover,
.guide-dock-toc:focus-visible {
  border-color: #245d9e;
  background: #245d9e;
}

.guide-dock-top:hover,
.guide-dock-top:focus-visible {
  background: var(--night-raised);
  color: var(--white);
}

.guide-dock-toc:focus-visible,
.guide-dock-top:focus-visible,
.guide-drawer-close:focus-visible,
.guide-drawer-list a:focus-visible {
  outline: 3px solid var(--blue-bright);
  outline-offset: 2px;
}

.guide-drawer {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  justify-content: flex-end;
  background: rgba(7, 17, 29, 0.45);
}

.guide-drawer-panel {
  display: flex;
  width: min(400px, 100%);
  height: 100%;
  flex-direction: column;
  background: var(--white);
  box-shadow: var(--shadow);
}

.guide-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem 0.9rem 1.25rem;
  background: var(--night);
  color: var(--white);
}

.guide-drawer-close {
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line-dark);
  background: var(--night-raised);
  color: var(--white);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.guide-drawer-here {
  margin: 0;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.guide-drawer-list {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.5rem 1.25rem 1.5rem;
  font-size: 0.95rem;
}

.guide-drawer-list > div {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
}

.guide-drawer-list strong {
  display: block;
}

.guide-drawer-list ul {
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
}

.guide-drawer-list li a {
  display: block;
  padding: 0.35rem 0.5rem;
  border-left: 3px solid transparent;
}

.guide-drawer-list li a[aria-current] {
  border-left-color: var(--blue);
  background: var(--blue-pale);
  color: var(--ink);
  font-weight: 700;
}

html.guide-drawer-open {
  overflow: hidden;
}

@media print {
  .guide-dock,
  .guide-drawer {
    display: none !important;
  }
}

/* Kostenvergleich im Abschnitt Vergleich. */

.cost-comparison {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.cost-comparison h3 {
  margin-bottom: 0.5rem;
}

.cost-table-wrap {
  margin-top: 1.25rem;
  overflow-x: auto;
  border: 1px solid var(--line);
}

.cost-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  background: var(--white);
}

.cost-table th,
.cost-table td {
  padding: 0.95rem 1.15rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.cost-table thead th {
  background: var(--night);
  color: var(--white);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cost-table tbody th {
  color: var(--ink-soft);
}

.cost-own th,
.cost-own td {
  background: var(--blue-pale);
}

.cost-table td:nth-child(n + 3) {
  white-space: nowrap;
}

.cost-own-note {
  margin-top: 0.75rem;
  color: var(--ink);
  font-weight: 700;
}

.cost-note {
  margin-top: 0.75rem;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

@media (max-width: 620px) {
  .cost-table {
    min-width: 0;
    font-size: 0.85rem;
  }

  .cost-table th,
  .cost-table td {
    padding: 0.75rem 0.5rem;
  }

  .cost-table thead th {
    font-size: 0.62rem;
  }

  .cost-table tbody th {
    overflow-wrap: normal;
  }
}

@media (max-width: 380px) {
  .cost-table {
    font-size: 0.78rem;
  }

  .cost-table th,
  .cost-table td {
    padding: 0.7rem 0.35rem;
  }
}