/* Copyright (c) 2026 Dennis Andres */

:root {
  --bg: #0b0e14;
  --flaeche: #141926;
  --flaeche-hell: #1b2233;
  --linie: #232b3d;
  --text: #e8ecf4;
  --text-gedaempft: #8b94a7;
  --akzent: #2f8fef;
  --akzent-hell: #5db0ff;
  --erfolg: #2ecc71;
  --warnung: #f3a712;
  --fehler: #e74c3c;

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "Segoe UI Mono", Menlo, Consolas, monospace;

  --bp-tablet: 768px;

  --radius-karte: 12px;
  --radius-feld: 8px;
  --radius-pille: 999px;

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  --fs-100: 0.8125rem;
  --fs-200: 0.9375rem;
  --fs-300: 1rem;
  --fs-400: 1.125rem;
  --fs-500: 1.5rem;
  --fs-600: 2rem;
  --fs-700: clamp(2.25rem, 1.55rem + 3.2vw, 3.75rem);

  --schatten: 0 20px 48px rgba(3, 4, 8, 0.45);
  --dauer: 160ms;
}

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

html {
  color-scheme: dark;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-300);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--sp-3);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h1 {
  font-size: var(--fs-700);
}

h2 {
  font-size: var(--fs-600);
}

h3 {
  font-size: var(--fs-500);
}

p {
  margin: 0 0 var(--sp-4);
  color: var(--text);
}

a {
  color: var(--akzent-hell);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

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

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

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

.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--akzent-hell);
  margin-bottom: var(--sp-3);
}

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

.sprung-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--akzent);
  color: #ffffff;
  font-weight: 700;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-feld);
}

.sprung-link:focus {
  left: var(--sp-4);
  top: var(--sp-4);
}

/* Linien-Icons */

.icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--akzent-hell);
}

/* Kopfzeile */

.kopfzeile {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(11, 14, 20, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linie);
}

.kopfzeile-inhalt {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding-top: var(--sp-3);
  padding-bottom: var(--sp-3);
  flex-wrap: wrap;
}

.marke {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-right: auto;
}

.marke-abzeichen {
  display: block;
  border-radius: var(--radius-feld);
}

.marke-text {
  font-weight: 700;
  font-size: var(--fs-400);
  color: var(--text);
  letter-spacing: -0.01em;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

.nav a {
  color: var(--text-gedaempft);
  font-weight: 600;
  font-size: var(--fs-200);
  text-decoration: none;
}

.nav a:hover {
  color: var(--text);
  text-decoration: underline;
}

.kopf-portal {
  white-space: nowrap;
}

.sprachumschalter {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  color: var(--text-gedaempft);
}

.sprachumschalter a {
  color: var(--text-gedaempft);
  font-weight: 700;
}

.sprachumschalter a.ist-aktiv {
  color: var(--akzent-hell);
}

.kopf-burger {
  display: none;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 9px;
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--linie);
  border-radius: var(--radius-feld);
  cursor: pointer;
}

.kopf-burger-strich {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text);
}

@media (max-width: 767px) {
  .kopf-burger {
    display: flex;
  }

  .kopfzeile-inhalt {
    position: relative;
  }

  .nav-primaer {
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    border-top: 1px solid var(--linie);
    margin-top: 0;
    transition: max-height var(--dauer) ease;
  }

  .nav-primaer.ist-offen {
    max-height: 32rem;
    margin-top: var(--sp-3);
  }

  .nav-primaer a {
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--linie);
  }

  .nav-primaer .sprachumschalter {
    padding: var(--sp-3) 0;
  }
}

@media (min-width: 768px) {
  .nav-primaer {
    flex-direction: row;
    max-height: none;
    overflow: visible;
  }
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.7rem 1.35rem;
  border-radius: var(--radius-feld);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-300);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dauer) ease, background var(--dauer) ease, border-color var(--dauer) ease;
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primaer {
  background: var(--akzent);
  color: #ffffff;
}

.btn-primaer:hover {
  background: var(--akzent-hell);
}

.btn-sekundaer {
  background: transparent;
  border-color: var(--linie);
  color: var(--text);
}

.btn-sekundaer:hover {
  border-color: var(--akzent-hell);
  color: var(--akzent-hell);
}

.btn-klein {
  padding: 0.5rem 1rem;
  font-size: var(--fs-200);
}

.btn-block {
  width: 100%;
}

/* Karte */

.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-karte);
  padding: var(--sp-5);
}

/* Held / Hero */

.heldenbereich {
  padding: var(--sp-9) 0 var(--sp-8);
  border-bottom: 1px solid var(--linie);
}

.heldenbereich-inhalt {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7);
  align-items: center;
}

.heldenbereich-text p {
  font-size: var(--fs-400);
  color: var(--text-gedaempft);
  max-width: 46ch;
}

.heldenbereich-aktionen {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-top: var(--sp-6);
}

.vertrauens-liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--linie);
}

.vertrauens-punkt {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-100);
  color: var(--text-gedaempft);
}

.vertrauens-punkt svg {
  flex-shrink: 0;
  color: var(--akzent-hell);
}

.heldenbereich-schmal .container {
  max-width: 70ch;
}

.held-marke-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.held-marke {
  display: block;
  margin-bottom: var(--sp-5);
}

.platzhalter-hinweis {
  color: var(--text-gedaempft);
  font-size: var(--fs-200);
  padding-top: var(--sp-5);
  margin-top: var(--sp-5);
  border-top: 1px solid var(--linie);
}

.held-vorschau {
  box-shadow: var(--schatten);
}

.held-vorschau-kopf {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--linie);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}

.held-vorschau-url {
  font-family: var(--font-mono);
  color: var(--text-gedaempft);
  font-size: var(--fs-200);
}

.held-vorschau-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  margin: 0 0 var(--sp-5);
}

.held-vorschau-details > div {
  background: var(--bg);
  border: 1px solid var(--linie);
  border-radius: var(--radius-feld);
  padding: var(--sp-3);
  text-align: center;
}

.held-vorschau-details dt {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  color: var(--text-gedaempft);
  margin-bottom: var(--sp-1);
}

.held-vorschau-details dd {
  margin: 0;
  font-weight: 700;
}

.held-vorschau-speicher-kopf {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-100);
  color: var(--text-gedaempft);
  margin-bottom: var(--sp-2);
}

/* Hex-Marke fuer Funktionskarten */

.hex-marke {
  display: block;
  width: 44px;
  height: 44px;
  margin-bottom: var(--sp-4);
  color: var(--akzent-hell);
}

/* Leistungen (Paketkarte) */

.leistungen {
  padding-top: var(--sp-9);
}

.leistungen-karte {
  max-width: 780px;
  border-color: var(--akzent);
}

.leistungen-kopf {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--linie);
}

.leistungen-kopf h3 {
  margin-bottom: var(--sp-1);
}

.leistungen-paketname {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  color: var(--akzent-hell);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.leistungen-preis {
  font-size: var(--fs-500);
  font-weight: 700;
  white-space: nowrap;
}

.leistungen-specs {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2) var(--sp-5);
  margin: 0 0 var(--sp-5);
}

.leistungen-specs li {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--linie);
  font-size: var(--fs-200);
}

.leistungen-specs li span:first-child {
  color: var(--text-gedaempft);
}

.leistungen-specs li span:last-child {
  font-weight: 600;
  text-align: right;
}

/* Funktionen */

.funktionen {
  padding: var(--sp-8) 0 var(--sp-9);
  border-bottom: 1px solid var(--linie);
}

.abschnitt-kopf {
  max-width: 60ch;
  margin-bottom: var(--sp-7);
}

.abschnitt-kopf p {
  color: var(--text-gedaempft);
}

.funktionen-raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}

.funktion-karte p {
  color: var(--text-gedaempft);
  margin-bottom: 0;
  font-size: var(--fs-200);
}

.funktion-karte h3 {
  font-size: var(--fs-400);
}

/* Ablauf */

.ablauf {
  padding: var(--sp-9) 0;
  border-bottom: 1px solid var(--linie);
}

.ablauf-raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}

.ablauf-schritt {
  display: flex;
  gap: var(--sp-4);
}

.ablauf-nummer {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-500);
  color: var(--linie);
  line-height: 1;
  flex-shrink: 0;
}

.ablauf-schritt h3 {
  font-size: var(--fs-400);
  margin-bottom: var(--sp-1);
}

.ablauf-schritt p {
  color: var(--text-gedaempft);
  font-size: var(--fs-200);
  margin-bottom: 0;
}

/* Grenzen (Kann / Kann nicht) */

.grenzen {
  padding: var(--sp-9) 0;
  border-bottom: 1px solid var(--linie);
}

.grenzen-raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  margin-bottom: var(--sp-5);
}

.grenzen-karte-kann {
  border-color: rgba(46, 204, 113, 0.35);
}

.grenzen-liste {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.grenzen-liste li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  color: var(--text-gedaempft);
  font-size: var(--fs-200);
}

.grenzen-liste li strong {
  color: var(--text);
}

.icon-check,
.icon-kreuz {
  flex-shrink: 0;
  margin-top: 0.15em;
}

.icon-check {
  color: var(--erfolg);
}

.icon-kreuz {
  color: var(--text-gedaempft);
}

.portal-ausblick {
  border-color: rgba(47, 143, 239, 0.35);
}

.liste-hex {
  margin-top: var(--sp-3);
}

.liste-hex li {
  position: relative;
  padding-left: var(--sp-5);
  margin-bottom: var(--sp-2);
  color: var(--text);
}

.liste-hex li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  background: var(--akzent);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

/* Kostenlos-Hinweis */

.kostenlos-hinweis {
  padding: var(--sp-7) 0;
  border-bottom: 1px solid var(--linie);
}

.kostenlos-karte {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.kostenlos-karte p {
  color: var(--text-gedaempft);
  font-size: var(--fs-200);
}

.kostenlos-karte p:last-child {
  margin-bottom: 0;
}

/* Formularbereich */

.formularbereich {
  padding: var(--sp-9) 0;
}

.formular-karte {
  max-width: 640px;
  margin: 0 auto;
}

.formular-raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}

@media (min-width: 640px) {
  .formular-raster-zwei {
    grid-template-columns: 1fr 1fr;
  }
}

/* Feld */

.feld {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.feld label {
  font-size: var(--fs-200);
  font-weight: 600;
}

.feld input,
.feld select,
.feld textarea {
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--linie);
  border-radius: var(--radius-feld);
  padding: 0.65rem 0.85rem;
  width: 100%;
}

.feld textarea {
  resize: vertical;
  min-height: 6rem;
}

.feld input:focus-visible,
.feld select:focus-visible,
.feld textarea:focus-visible {
  outline: 3px solid var(--akzent-hell);
  outline-offset: 1px;
}

.feld-hinweis {
  margin: 0;
  font-size: var(--fs-100);
  color: var(--text-gedaempft);
}

.slug-vorschau {
  color: var(--akzent-hell);
  font-weight: 700;
}

.feld-fehlertext {
  margin: 0;
  font-size: var(--fs-100);
  color: var(--fehler);
}

.feld-fehler input,
.feld-fehler select,
.feld-fehler textarea {
  border-color: var(--fehler);
}

.feld-checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--sp-3);
}

.feld-checkbox label {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-weight: 400;
}

.feld-checkbox input {
  width: auto;
  margin-top: 0.2rem;
}

/* Plakette */

.plakette {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pille);
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--flaeche-hell);
  color: var(--text-gedaempft);
  border: 1px solid var(--linie);
}

.plakette-erfolg {
  background: rgba(46, 204, 113, 0.12);
  color: var(--erfolg);
  border-color: rgba(46, 204, 113, 0.35);
}

.plakette-warnung {
  background: rgba(243, 167, 18, 0.12);
  color: var(--warnung);
  border-color: rgba(243, 167, 18, 0.35);
}

.plakette-fehler {
  background: rgba(231, 76, 60, 0.12);
  color: var(--fehler);
  border-color: rgba(231, 76, 60, 0.35);
}

/* Balken */

.balken {
  height: 8px;
  background: var(--bg);
  border: 1px solid var(--linie);
  border-radius: var(--radius-pille);
  overflow: hidden;
}

.balken-fuellung {
  height: 100%;
  background: var(--erfolg);
  border-radius: var(--radius-pille);
  transition: width var(--dauer) ease;
}

.balken-fuellung.balken-warnung {
  background: var(--warnung);
}

.balken-fuellung.balken-fehler {
  background: var(--fehler);
}

/* Toast */

.toast {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-feld);
  border: 1px solid var(--linie);
  background: var(--flaeche);
  font-size: var(--fs-200);
  margin-bottom: var(--sp-4);
}

.toast-erfolg {
  border-color: rgba(46, 204, 113, 0.4);
  background: rgba(46, 204, 113, 0.08);
  color: var(--erfolg);
}

.toast-fehler {
  border-color: rgba(231, 76, 60, 0.4);
  background: rgba(231, 76, 60, 0.08);
  color: var(--fehler);
}

/* Tabelle */

.tabelle-wrapper {
  overflow-x: auto;
}

.tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-200);
}

.tabelle th,
.tabelle td {
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--linie);
  white-space: nowrap;
}

.tabelle th {
  color: var(--text-gedaempft);
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

/* Fusszeile */

.fusszeile {
  border-top: 1px solid var(--linie);
  padding: var(--sp-6) 0;
}

.fusszeile-inhalt {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: flex-start;
}

.fusszeile-inhalt p {
  margin: 0;
  color: var(--text-gedaempft);
  font-size: var(--fs-100);
}

.fusszeile-links {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.fusszeile-links a {
  color: var(--text-gedaempft);
  font-size: var(--fs-100);
  text-decoration: none;
}

.fusszeile-links a:hover {
  color: var(--text);
  text-decoration: underline;
}

.fusszeile-inhalt-neu {
  gap: var(--sp-6);
}

.fusszeile-marke img {
  margin-bottom: var(--sp-2);
}

.fusszeile-marke p {
  margin: 0;
  color: var(--text-gedaempft);
  font-size: var(--fs-100);
}

.fusszeile-gruppe {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.fusszeile-titel {
  margin: 0 0 var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-gedaempft);
}

.fusszeile-gruppe a {
  color: var(--text-gedaempft);
  font-size: var(--fs-200);
  text-decoration: none;
}

.fusszeile-gruppe a:hover {
  color: var(--text);
  text-decoration: underline;
}

.fusszeile-copyright {
  margin: 0;
  color: var(--text-gedaempft);
  font-size: var(--fs-100);
}

@media (min-width: 768px) {
  .fusszeile-inhalt-neu {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    align-items: start;
  }

  .fusszeile-copyright {
    grid-column: 1 / -1;
    padding-top: var(--sp-5);
    margin-top: var(--sp-2);
    border-top: 1px solid var(--linie);
  }
}

/* Paket (Tarifkarte) */

.paket {
  background: var(--flaeche);
  border: 1px solid var(--akzent);
  border-radius: var(--radius-karte);
  padding: var(--sp-5);
}

.paket-kopf {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--linie);
}

.paket-name {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  color: var(--akzent-hell);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.paket-preis {
  font-size: var(--fs-500);
  font-weight: 700;
  white-space: nowrap;
}

.paket-specs {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2) var(--sp-5);
}

.paket-specs li {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--linie);
  font-size: var(--fs-200);
}

.paket-specs li span:first-child {
  color: var(--text-gedaempft);
}

.paket-specs li span:last-child {
  font-weight: 600;
  text-align: right;
}

/* FAQ-Accordion */

.faq-eintrag {
  border-bottom: 1px solid var(--linie);
}

.faq-eintrag summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
  font-weight: 700;
  font-size: var(--fs-400);
}

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

.faq-eintrag summary::after {
  content: "+";
  font-family: var(--font-mono);
  color: var(--text-gedaempft);
  flex-shrink: 0;
}

.faq-eintrag[open] summary::after {
  content: "\2212";
}

.faq-eintrag p {
  color: var(--text-gedaempft);
  padding-bottom: var(--sp-4);
  margin: 0;
  max-width: 68ch;
}

/* Recht-Seite */

.recht-inhalt {
  padding: var(--sp-8) 0;
}

.recht-inhalt section {
  margin-bottom: var(--sp-8);
}

.recht-inhalt li {
  position: relative;
  padding-left: var(--sp-5);
  margin-bottom: var(--sp-3);
  color: var(--text-gedaempft);
}

.recht-inhalt li strong {
  color: var(--text);
}

.recht-inhalt li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  background: var(--akzent);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.impressum-daten dt {
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  color: var(--text-gedaempft);
  margin-top: var(--sp-3);
}

.impressum-daten dd {
  margin: 0 0 0 0;
}

/* Erfolgsseite */

.erfolg-inhalt {
  padding: var(--sp-9) 0;
  text-align: center;
}

.erfolg-karte {
  max-width: 520px;
  margin: 0 auto;
}

.erfolg-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--sp-5);
  background: var(--akzent);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg);
  font-family: var(--font-mono);
  font-weight: 700;
}

@media (min-width: 640px) {
  .funktionen-raster {
    grid-template-columns: repeat(2, 1fr);
  }

  .ablauf-raster {
    grid-template-columns: repeat(3, 1fr);
  }

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

@media (min-width: 900px) {
  .heldenbereich-inhalt {
    grid-template-columns: 1.1fr 0.9fr;
  }

  .funktionen-raster {
    grid-template-columns: repeat(3, 1fr);
  }
}