/* CI-Pilot — Grundstil. Tokens: docs/marke/tokens.css (Quelle: docs/marke/ci-standards.md). */
:root {
  --cp-navy: #0B1F3A;
  --cp-blau: #2563EB;
  --cp-blau-hell: #93B4F8;
  --cp-amber: #F59E0B;
  --cp-text: #0F172A;
  --cp-text-gedaempft: #64748B;
  --cp-linie: #E2E8F0;
  --cp-flaeche: #F5F7FA;
  --cp-weiss: #FFFFFF;
  --cp-font: Inter, "Helvetica Neue", Arial, sans-serif;
  --cp-radius-s: 6px;
  --cp-radius-m: 10px;
  --cp-radius-l: 14px;
  --cp-abstand: 8px;
}

@font-face {
  font-family: Inter;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter/Inter-Regular.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter/Inter-Medium.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter/Inter-SemiBold.woff2") format("woff2");
}

@font-face {
  font-family: Inter;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/inter/Inter-ExtraBold.woff2") format("woff2");
}

body {
  margin: 0;
  background: var(--cp-flaeche);
  color: var(--cp-text);
  font-family: var(--cp-font);
}

.formular {
  max-width: calc(var(--cp-abstand) * 60);
  margin: calc(var(--cp-abstand) * 8) auto;
  padding: 0 calc(var(--cp-abstand) * 3);
}

.formular h1 {
  color: var(--cp-navy);
}

.formular .hinweis {
  color: var(--cp-text-gedaempft);
}

/* Werbeseite (Startseite). Breakpoint 800px, mobile first. Abstände in Vielfachen von --cp-abstand. */
.werbung {
  line-height: 1.6;
}

.werbung h1,
.werbung h2,
.werbung h3 {
  margin: 0;
  line-height: 1.2;
  color: var(--cp-navy);
}

.werbung h1 {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--cp-weiss);
}

.werbung h2 {
  font-size: 1.75rem;
  font-weight: 800;
}

.werbung h3 {
  font-size: 1.25rem;
  font-weight: 600;
}

.werbung p {
  margin: 0;
}

.werbung a:focus-visible {
  outline: 3px solid var(--cp-blau-hell);
  outline-offset: 3px;
}

.werbung-innen {
  max-width: calc(var(--cp-abstand) * 140);
  margin: 0 auto;
  padding: 0 calc(var(--cp-abstand) * 3);
}

.werbung-sprung {
  position: absolute;
  left: var(--cp-abstand);
  top: -100px;
  z-index: 10;
  padding: var(--cp-abstand) calc(var(--cp-abstand) * 2);
  background: var(--cp-weiss);
  color: var(--cp-navy);
}

.werbung-sprung:focus {
  top: var(--cp-abstand);
}

.knopf {
  display: inline-block;
  box-sizing: border-box;
  min-height: calc(var(--cp-abstand) * 5.5);
  padding: calc(var(--cp-abstand) * 1.25) calc(var(--cp-abstand) * 2.5);
  border-radius: var(--cp-radius-m);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.knopf-blau {
  background: var(--cp-blau);
  color: var(--cp-weiss);
}

.knopf-blau:hover {
  background: #1D4ED8;
}

.knopf-gross {
  padding: calc(var(--cp-abstand) * 1.75) calc(var(--cp-abstand) * 3.5);
  font-size: 1.125rem;
}

.werbung-kopf,
.werbung-hero {
  background: var(--cp-navy);
  color: var(--cp-weiss);
}

.werbung-kopfzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--cp-abstand) * 2);
  padding-top: calc(var(--cp-abstand) * 2);
  padding-bottom: calc(var(--cp-abstand) * 2);
}

.werbung-logo {
  display: block;
  width: auto;
  height: calc(var(--cp-abstand) * 4);
}

.werbung-nav {
  display: flex;
  align-items: center;
  gap: calc(var(--cp-abstand) * 3);
}

.werbung-nav a:not(.knopf),
.werbung-link-hell {
  color: var(--cp-weiss);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.werbung-nav .knopf {
  padding: var(--cp-abstand) calc(var(--cp-abstand) * 2);
}

.werbung-hero-raster {
  display: grid;
  gap: calc(var(--cp-abstand) * 6);
  padding-top: calc(var(--cp-abstand) * 6);
  padding-bottom: calc(var(--cp-abstand) * 8);
}

.werbung-hero-text {
  max-width: calc(var(--cp-abstand) * 70);
  margin-top: calc(var(--cp-abstand) * 3);
  font-size: 1.125rem;
  color: var(--cp-weiss);
}

.werbung-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--cp-abstand) * 3);
  margin-top: calc(var(--cp-abstand) * 4);
}

.werbung-hero-hinweis {
  margin-top: calc(var(--cp-abstand) * 2);
  font-size: 0.875rem;
  color: var(--cp-blau-hell);
}

.werbung-blatt {
  margin: 0;
}

.werbung-blatt figcaption {
  margin-top: calc(var(--cp-abstand) * 2);
  font-size: 0.875rem;
  color: var(--cp-blau-hell);
}

.werbung-blatt-seite {
  box-sizing: border-box;
  max-width: calc(var(--cp-abstand) * 52);
  aspect-ratio: 210 / 297;
  max-height: calc(var(--cp-abstand) * 62);
  padding: calc(var(--cp-abstand) * 3);
  border-radius: var(--cp-radius-s);
  background: var(--cp-weiss);
  color: var(--cp-text);
  box-shadow: 0 1px 2px rgba(11, 31, 58, .08), 0 16px 32px rgba(0, 0, 0, .35);
  font-size: 0.875rem;
}

.werbung-blatt-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: calc(var(--cp-abstand) * 1.5);
  border-bottom: 2px solid var(--cp-navy);
}

.werbung-blatt-marke {
  font-weight: 800;
  color: var(--cp-navy);
}

.werbung-blatt-licht {
  width: calc(var(--cp-abstand) * 1.5);
  height: calc(var(--cp-abstand) * 1.5);
  border-radius: 50%;
  background: var(--cp-amber);
}

.werbung-blatt-titel {
  margin: calc(var(--cp-abstand) * 3) 0 calc(var(--cp-abstand) * 2);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--cp-navy);
}

.werbung-blatt-zeile {
  display: flex;
  justify-content: space-between;
  padding: var(--cp-abstand) 0;
  border-bottom: 1px solid var(--cp-linie);
}

.werbung-blatt-preis {
  margin-top: calc(var(--cp-abstand) * 3);
  font-size: 2rem;
  font-weight: 800;
  color: var(--cp-navy);
}

.werbung-abschnitt {
  padding: calc(var(--cp-abstand) * 8) 0;
  background: var(--cp-weiss);
}

.werbung-abschnitt-hell {
  background: var(--cp-flaeche);
}

.werbung-schritte,
.werbung-liste {
  display: grid;
  gap: calc(var(--cp-abstand) * 4);
  margin: calc(var(--cp-abstand) * 5) 0 0;
  padding: 0;
  list-style: none;
}

.werbung-schritte {
  counter-reset: schritt;
}

.werbung-schritte li {
  counter-increment: schritt;
  padding-top: calc(var(--cp-abstand) * 2);
  border-top: 3px solid var(--cp-blau);
}

.werbung-schritte li::before {
  content: counter(schritt) ".";
  display: block;
  margin-bottom: var(--cp-abstand);
  font-weight: 800;
  color: var(--cp-blau);
}

.werbung-schritte p,
.werbung-liste p {
  margin-top: var(--cp-abstand);
  color: var(--cp-text);
}

.werbung-liste li {
  padding: calc(var(--cp-abstand) * 3);
  border: 1px solid var(--cp-linie);
  border-radius: var(--cp-radius-m);
  background: var(--cp-weiss);
}

.werbung-nachsatz {
  margin-top: calc(var(--cp-abstand) * 3);
  color: var(--cp-text);
}

.werbung-vertrauen dl {
  display: grid;
  gap: calc(var(--cp-abstand) * 1.5) calc(var(--cp-abstand) * 6);
  margin: calc(var(--cp-abstand) * 4) 0 0;
  align-items: start;
}

.werbung-vertrauen dt {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--cp-navy);
}

.werbung-vertrauen dd {
  margin: 0 0 calc(var(--cp-abstand) * 2);
}

.werbung-abschluss {
  padding: calc(var(--cp-abstand) * 8) 0;
  background: var(--cp-navy);
  color: var(--cp-weiss);
}

.werbung-abschluss h2 {
  color: var(--cp-weiss);
}

.werbung-abschluss p {
  margin: calc(var(--cp-abstand) * 2) 0 calc(var(--cp-abstand) * 4);
}

.werbung-fuss {
  padding: calc(var(--cp-abstand) * 3) 0;
  background: var(--cp-weiss);
  border-top: 1px solid var(--cp-linie);
  font-size: 0.875rem;
  color: var(--cp-text-gedaempft);
}

.werbung-fuss .werbung-innen {
  display: flex;
  justify-content: space-between;
}

.werbung-fuss a {
  color: var(--cp-navy);
}

@media (min-width: 800px) {
  .werbung h1 {
    font-size: 3.5rem;
  }

  .werbung-hero-raster {
    grid-template-columns: 3fr 2fr;
    align-items: center;
    padding-top: calc(var(--cp-abstand) * 10);
    padding-bottom: calc(var(--cp-abstand) * 12);
  }

  .werbung-schritte {
    grid-template-columns: repeat(4, 1fr);
  }

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

  .werbung-vertrauen dl {
    grid-template-columns: 1fr 2fr;
  }

  .werbung-vertrauen dt,
  .werbung-vertrauen dd {
    margin: 0 0 calc(var(--cp-abstand) * 2);
    line-height: 1.6;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .knopf {
    transition: background-color .15s ease;
  }
}