/* =============================================================================
   A/N Detailing — Design-System

   Die Vorlage (Assets/*.dc.html) arbeitet ausschliesslich mit Inline-Styles.
   Hier stehen dieselben Werte einmal als benannte Klassen und Variablen.
   Bewusst ohne Build-Kette: die Datei wird so ausgeliefert, wie sie hier steht.
   ============================================================================= */

/* --- Schriften, lokal ausgeliefert (kein Google-CDN, DSGVO) ----------------

   Archivo und Caveat sind hier KEINE variablen Schnitte mehr, obwohl sie so
   ausgeliefert werden. Der Entwurf benutzt von beiden genau einen Punkt der
   Achsen — Archivo bei wdth 112 / wght 900, Caveat bei wght 700 —, der Rest
   wurde nie gebraucht und wog zusammen 150 KB. Beide sind deshalb auf diesen
   Punkt festgeschrieben ("instancing") und auf den deutschen Zeichenvorrat
   verkleinert.

   Was das bedeutet, wenn hier jemand weiterbaut:
   - Eine andere Strichstaerke fuer Archivo oder Caveat gibt es nicht mehr.
     Der Browser wuerde sie rechnerisch nachbilden, und das sieht schlecht aus.
     Wer sie braucht, muss die Originale neu erzeugen.
   - Die -ext-Dateien haben weiterhin den vollen Zeichenvorrat. Sie laden nur,
     wenn tatsaechlich ein Zeichen ausserhalb von Latin-1 vorkommt.
   - Inter ist absichtlich unangetastet: dort werden mehrere Strichstaerken
     verwendet, und in Namen und Kundenstimmen steht, was der Kunde tippt.

   Die ?v= in den Adressen gehoert zu den Cache-Regeln in public/.htaccess
   (ein Jahr, immutable). Wird eine Schriftdatei ausgetauscht, muss die Zahl
   hier hochgezaehlt werden — sonst sehen wiederkehrende Besucher die alte.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/archivo-latin.woff2?v=2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/archivo-latin-ext.woff2?v=2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/caveat-latin.woff2?v=2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/caveat-latin-ext.woff2?v=2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens --------------------------------------------------------------- */

:root {
  --cyan: #00d8ff;
  --cyan-light: #b8f0ff;
  --cyan-pale: #d9fbff;
  --cyan-deep: #0a5470;

  --bg: #06080b;
  --bg-raised: #0b0e14;

  --text: #f2f4f8;
  --text-strong: #fff;
  --text-soft: #dde5ee;
  --text-mid: #c2cad6;
  --text-dim: #939fae;
  --text-mute: #788492;
  --text-faint: #5f6a78;

  --line: rgba(255, 255, 255, 0.12);
  --line-soft: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.24);

  --pad-x: 6vw;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (max-width: 767px) {
  :root {
    --pad-x: 20px;
  }
}

/* --- Grundlagen ----------------------------------------------------------- */

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--cyan);
  color: var(--bg);
}

a {
  color: #5ae4ff;
}

a:hover {
  color: var(--cyan-light);
}

img {
  max-width: 100%;
}

/* Sichtbarer Fokus fuer Tastaturbedienung — die Vorlage hatte keinen. */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--cyan);
  color: var(--bg);
  padding: 12px 20px;
  font-weight: 800;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}

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

/* --- Typografie ----------------------------------------------------------- */

.h {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.82;
  letter-spacing: -0.025em;
  margin: 0;
}

.h--tight {
  line-height: 0.8;
}

.h--plain {
  text-transform: none;
}

.grad {
  background: linear-gradient(180deg, var(--cyan-pale) 0%, var(--cyan) 48%, var(--cyan-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.outline {
  color: transparent;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-stroke: 1.5px rgba(0, 216, 255, 0.6);
}

.script {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--cyan);
  line-height: 1.1;
}

.eyebrow {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
}

.eyebrow--mute {
  color: var(--text-mute);
}

.lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-dim);
  margin: 0;
}

/* --- Layout --------------------------------------------------------------- */

.wrap {
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

.section {
  padding: 80px 0;
}

@media (max-width: 767px) {
  .section {
    padding: 46px 0;
  }
}

.split {
  display: grid;
  gap: 44px;
  align-items: center;
}

@media (min-width: 768px) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .split--wide-left {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }

  .split--wide-right {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  }
}

@media (max-width: 767px) {
  .split {
    gap: 22px;
  }

  /* Auf Mobil steht das Bild immer unter dem Text, egal wie die Spalten stehen. */
  .split--image-first > img {
    order: 2;
  }
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* --- Schaltflaechen ------------------------------------------------------- */

.cta {
  transform: skewX(-10deg);
  transition: transform 0.2s var(--ease), background 0.2s, color 0.2s, border-color 0.2s;
  display: inline-flex;
  align-items: stretch;
  justify-content: center;
  gap: 9px;
  border: none;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 800;
  font-size: 15px;
  padding: 17px 32px;
  border-radius: 0;
  text-decoration: none;
  background: var(--cyan);
  color: var(--bg);
}

.cta > span {
  display: block;
  transform: skewX(10deg);
  align-self: center;
}

.cta::before {
  content: '';
  display: block;
  width: 3px;
  align-self: stretch;
  background: var(--bg);
  flex: none;
}

.cta:hover {
  transform: skewX(-10deg) translateX(6px);
  background: var(--cyan-light);
  color: var(--bg);
}

.cta--ghost {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--text-strong);
  font-weight: 700;
}

.cta--ghost::before {
  background: var(--cyan);
}

.cta--ghost:hover {
  background: var(--cyan);
  color: var(--bg);
  border-color: var(--cyan);
}

.cta--ghost:hover::before {
  background: var(--bg);
}

.cta--sm {
  font-size: 12px;
  padding: 12px 20px;
}

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

.cta[disabled],
.cta[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
}

.cta[disabled]:hover,
.cta[aria-disabled='true']:hover {
  transform: skewX(-10deg);
}

/* --- Navigation ----------------------------------------------------------- */

.navlink {
  color: var(--text-mid);
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.navlink:hover,
.navlink[aria-current='page'] {
  color: var(--text-strong);
}

.topbar {
  background: var(--cyan);
  color: var(--bg);
  padding: 9px var(--pad-x);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@media (max-width: 767px) {
  .topbar {
    font-size: 10px;
    letter-spacing: 0.1em;
    justify-content: center;
    text-align: center;
  }

  .topbar > :last-child {
    display: none;
  }
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 22px var(--pad-x);
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(8, 7, 10, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-strong);
  flex: none;
}

.nav__brand img {
  height: 30px;
  width: auto;
  display: block;
}

.nav__wordmark {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 21px;
  letter-spacing: 0.06em;
  line-height: 1;
}

.nav__wordmark span {
  color: var(--cyan);
}

.nav__links {
  display: flex;
  gap: 26px;
  flex: 1;
  justify-content: center;
  min-width: 0;
}

@media (max-width: 999px) {
  .nav__links {
    display: none;
  }

  .nav {
    padding: 14px var(--pad-x);
  }
}

/* --- Laufband ------------------------------------------------------------- */

@keyframes mq {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes mqr {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

@keyframes pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.marquee {
  overflow: hidden;
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: mq 34s linear infinite;
}

.marquee__track--reverse {
  animation-name: mqr;
}

.marquee__track--slow {
  animation-duration: 44s;
}

.marquee--band {
  background: var(--cyan);
  padding: 12px 0;
  transform: rotate(0.8deg);
  margin: 10px 0 40px;
}

.marquee--band .h {
  font-size: 38px;
  color: var(--bg);
  padding-right: 30px;
}

@media (max-width: 767px) {
  .marquee--band .h {
    font-size: 24px;
  }
}

.bob {
  animation: bob 6s ease-in-out infinite;
}

.pulse {
  animation: pulse 2s ease-in-out infinite;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 100px;
  background: var(--cyan);
  flex: none;
  display: inline-block;
}

/* --- Karten und Bilder ---------------------------------------------------- */

.card {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 3px;
  padding: 34px 28px;
  transition: transform 0.35s var(--ease), border-color 0.25s;
}

.card:hover {
  transform: translateY(-8px) rotate(-0.6deg);
  border-color: var(--cyan);
}

.card--featured {
  border: 1.5px solid var(--cyan);
  background: linear-gradient(180deg, rgba(0, 216, 255, 0.14), transparent);
  position: relative;
}

.card__badge {
  position: absolute;
  top: -11px;
  left: 28px;
  background: var(--cyan);
  color: var(--bg);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 2px;
  animation: pulse 3s ease-in-out infinite;
}

.shot {
  transition: transform 0.6s var(--ease), filter 0.6s;
  display: block;
  width: 100%;
  object-fit: cover;
  border-radius: 3px;
  background: var(--bg-raised);
}

.shot:hover {
  transform: scale(1.03) rotate(0.5deg);
  filter: saturate(1.15);
}

.chip {
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: 10px 20px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 0.3s, background 0.3s, color 0.3s;
}

.chip:hover {
  transform: translateY(-4px) rotate(2deg);
  background: var(--cyan);
  color: var(--bg);
}

/* --- Listen und Tabellen -------------------------------------------------- */

.bullets {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 14.5px;
  color: var(--text-mid);
  list-style: none;
  padding: 0;
  margin: 0;
}

.bullets li {
  display: flex;
  gap: 10px;
}

.bullets li::before {
  content: '\203A';
  color: var(--cyan);
  font-weight: 800;
  flex: none;
}

.pricelist {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 9px 12px;
  font-size: 13.5px;
  color: var(--text-mid);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
  margin-bottom: 18px;
}

.pricelist dt {
  color: var(--text-mute);
  margin: 0;
}

.pricelist dd {
  font-weight: 700;
  color: var(--text-strong);
  margin: 0;
  text-align: right;
}

.rowlist {
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 16px 8px;
  transition: background 0.2s;
}

.rowlist:hover {
  background: rgba(0, 216, 255, 0.05);
}

.rowlist:last-of-type {
  border-bottom: 1px solid var(--line);
}

.statgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.09);
}

.statgrid > div {
  background: var(--bg);
  padding: 34px var(--pad-x);
}

.statgrid .h {
  font-size: 52px;
}

.statgrid span {
  display: block;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-top: 8px;
}

@media (max-width: 767px) {
  .statgrid {
    grid-template-columns: 1fr 1fr;
  }

  .statgrid > div {
    padding: 22px 16px;
  }

  .statgrid .h {
    font-size: 34px;
  }
}

/* Vergleichstabelle */
.compare {
  border: 1px solid var(--line);
  overflow-x: auto;
}

.compare table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}

.compare th,
.compare td {
  padding: 15px 20px;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
}

.compare thead th {
  background: rgba(0, 216, 255, 0.07);
  border-bottom: 1px solid var(--line);
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: -0.025em;
}

.compare thead th:first-child {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--text-mute);
  text-transform: uppercase;
}

.compare tbody tr:hover {
  background: rgba(0, 216, 255, 0.05);
}

.compare tbody tr:last-child td {
  border-bottom: none;
}

.compare td:first-child {
  font-size: 14.5px;
  color: var(--text-soft);
}

.compare .is-yes {
  color: var(--cyan);
  font-weight: 800;
}

.compare .is-no {
  color: var(--text-faint);
}

.compare .is-text {
  color: var(--text-mute);
  font-size: 13px;
}

/* --- Formularfelder ------------------------------------------------------- */

.fld {
  background: var(--bg);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  padding: 14px 16px;
  border-radius: 0;
  outline: none;
  width: 100%;
}

.fld:focus {
  border-color: var(--cyan);
}

.fld::placeholder {
  color: var(--text-faint);
}

.fld[aria-invalid='true'] {
  border-color: #ff6b6b;
}

.fld-label {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
  display: block;
  margin-bottom: 8px;
}

.fld-error {
  color: #ff8f8f;
  font-size: 13px;
  margin-top: 6px;
}

/* --- Footer --------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--line);
  background: var(--bg-raised);
}

.footer__cols {
  padding: 48px var(--pad-x) 34px;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 36px;
}

@media (max-width: 900px) {
  .footer__cols {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
}

@media (max-width: 560px) {
  .footer__cols {
    grid-template-columns: 1fr;
  }
}

.footer__heading {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 16px;
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  color: var(--text-mid);
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer__list a {
  text-decoration: none;
  color: var(--text-mid);
}

.footer__list a:hover {
  color: var(--text-strong);
}

.footer__bottom {
  padding: 18px var(--pad-x) 30px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12.5px;
  color: var(--text-faint);
}

.badge {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  padding: 7px 13px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mid);
  white-space: nowrap;
}

/* --- Mitlaufende Leiste unten --------------------------------------------- */

/* Platz schaffen, damit die Leiste nichts verdeckt. */
body.has-stickybar {
  padding-bottom: 150px;
}

@media (max-width: 767px) {
  body.has-stickybar {
    padding-bottom: 120px;
  }
}

.stickybar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: linear-gradient(180deg, rgba(11, 14, 20, 0.86), rgba(6, 8, 11, 0.97));
  backdrop-filter: blur(18px);
  border-top: 2px solid var(--cyan);
}

.stickybar__inner {
  padding: 12px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

@media (max-width: 1100px) {
  .hide-narrow {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .stickybar__inner {
    padding: 10px 16px;
    gap: 12px;
  }
}

/* --- Bewegung ------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.7s var(--ease), transform 0.8s var(--ease);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/*
 * Wer Bewegung reduziert haben will, bekommt sie nicht. Alles bleibt sichtbar
 * und an seinem Platz — die Vorlage hatte diesen Ausstieg nicht.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  .marquee__track {
    animation: none !important;
    width: 100%;
  }

  .marquee__track > *:nth-child(n + 2) {
    display: none;
  }

  [data-parallax] {
    transform: none !important;
  }
}

/* ===================================================================
   AUF EINEN BLICK
   Faktenblock: Begriff links, Antwort rechts. Bewusst nuechtern —
   der Rest der Seite ist laut genug.
   =================================================================== */

.fakten {
  padding-top: 76px;
}

.fakten__kopf {
  margin-bottom: 26px;
}

.fakten__liste {
  margin: 0;
  border-top: 1px solid var(--line-soft);
}

.fakten__liste > div {
  display: grid;
  grid-template-columns: minmax(120px, 200px) 1fr;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
}

.fakten__liste dt {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
  padding-top: 2px;
}

.fakten__liste dd {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-dim);
}

@media (max-width: 767px) {
  .fakten {
    padding-top: 54px;
  }

  .fakten__liste > div {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/*
 * Zeilenumbruch ohne Zeichen.
 *
 * Ein leeres Element mit display:block schiebt den folgenden Text in eine neue
 * Zeile, steuert aber selbst nichts zum Textinhalt bei. Das ist der Unterschied
 * zu <br>: das lesen Textextraktoren als Leerzeichen, und aus "EXTRAKTION"
 * wurde dadurch "EXTRAK TION" — zwei Wörter, die es nicht gibt.
 */
.zeilenumbruch {
  display: block;
  height: 0;
  width: 0;
  overflow: hidden;
}