/* ==========================================================================
   JASSM Sichtbarkeit – Swiss Design
   Raster: 4 Spalten mobil, 12 Spalten ab 768 px
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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;
}

/* Metrik-angepasster Fallback, damit beim Laden der Schrift nichts springt */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107.1%;
  ascent-override: 90.4%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}

:root {
  --paper: #fdf0d5;
  --paper-deep: #f6e3bd;
  --red: #c1121f;
  --red-deep: #9e0f19;
  --ink: #14110f;
  --ink-soft: #4a423b;
  --hair: rgba(20, 17, 15, 0.16);

  --font: "Inter", "Inter Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --gutter: 16px;
  --gap: 16px;
  --maxw: 1360px;
  --section-y: clamp(72px, 11vw, 152px);
  --header-h: 60px;

  --step--1: 0.8125rem;
  --step-0: 1.0625rem;
  --step-1: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem);
  --step-2: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --step-3: clamp(2.125rem, 1.4rem + 3.2vw, 4.25rem);
  --step-4: clamp(2.375rem, 0.9rem + 7.4vw, 7.25rem);

  color-scheme: light;
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --gap: 24px;
    --header-h: 72px;
  }
}

@media (min-width: 1200px) {
  :root {
    --gutter: 48px;
  }
}

/* --- Reset ------------------------------------------------------------- */

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

* {
  margin: 0;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 8px);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.55;
  font-optical-sizing: auto;
  font-feature-settings: "ss01" 0, "cv11" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

main {
  flex: 1 0 auto;
}

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

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-color: var(--red);
}

button,
input {
  font: inherit;
  color: inherit;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

h1,
h2,
h3 {
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

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

::selection {
  background: var(--red);
  color: var(--paper);
}

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

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
}

.skip-link:focus {
  top: 8px;
}

/* --- Raster ------------------------------------------------------------ */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gap);
}

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

/* --- Icons & Buttons ---------------------------------------------------- */

.icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 56px;
  padding: 14px 20px 14px 22px;
  border: 0;
  border-radius: 0;
  background: var(--red);
  color: var(--paper);
  font-weight: 600;
  font-size: var(--step-0);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn--small {
  white-space: nowrap;
}

.btn:hover {
  background: var(--red-deep);
}

.btn .icon {
  transition: transform 0.2s ease;
}

.btn:hover .icon {
  transform: translateX(4px);
}

.btn--ink {
  background: var(--ink);
}

.btn--ink:hover {
  background: #000;
}

.btn--paper {
  background: var(--paper);
  color: var(--ink);
}

.btn--paper:hover {
  background: #fff;
}

.btn--ghost {
  background: transparent;
  color: inherit;
  box-shadow: inset 0 0 0 1.5px currentColor;
}

.btn--ghost:hover {
  background: var(--ink);
  color: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}

.btn--small {
  min-height: 40px;
  padding: 8px 12px 8px 14px;
  gap: 12px;
  font-size: 0.9375rem;
}

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

.btn[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* --- Header ------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}

/* Signet als Maske: Form aus der SVG, Farbe aus background */
.brand__mark {
  width: 28px;
  height: 28px;
  background: var(--red);
  -webkit-mask: url("/assets/img/jassm-signet.svg") center / contain no-repeat;
  mask: url("/assets/img/jassm-signet.svg") center / contain no-repeat;
  flex: none;
}

.brand__name {
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
}

.brand__sub {
  font-weight: 400;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
}

.site-nav {
  display: none;
}

@media (min-width: 1024px) {
  .site-nav {
    display: flex;
    gap: 32px;
    margin-left: auto;
    margin-right: 16px;
  }

  .site-nav a {
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
  }

  .site-nav a:hover {
    color: var(--red);
  }
}

@media (max-width: 419px) {
  .brand__sub {
    display: none;
  }
}

/* --- Gemeinsame Abschnitts-Typografie ----------------------------------- */

.eyebrow {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.eyebrow__sq {
  width: 10px;
  height: 10px;
  background: var(--red);
  align-self: center;
}

.eyebrow__no {
  color: var(--red);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.lead {
  font-size: var(--step-1);
  line-height: 1.45;
  letter-spacing: -0.01em;
  max-width: 34em;
}

.muted {
  color: var(--ink-soft);
}

/* Abschnitt: Kopfzeile links (Spalten 1–3), Inhalt rechts (4–12) */

.section {
  padding-block: calc(var(--section-y) / 2);
}

.section--red,
.section--check {
  padding-block: var(--section-y);
}

.section--red {
  margin-block: calc(var(--section-y) / 2);
}

.section--check {
  margin-top: calc(var(--section-y) / 2);
  /* Sprung zu #check: Linie über der Überschrift knapp unter den Header statt
     des leeren Abschnitts-Innenabstands */
  scroll-margin-top: calc(16px - var(--section-y));
}

.section__inner {
  border-top: 2px solid var(--ink);
  padding-top: 20px;
  row-gap: 32px;
}

.section__head {
  grid-column: 1 / -1;
}

.section__body {
  grid-column: 1 / -1;
}

.section__title {
  font-size: var(--step-3);
  max-width: 14em;
}

.section__intro {
  margin-top: 24px;
}

.section__intro a {
  color: var(--ink);
  font-weight: 600;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
}

@media (min-width: 768px) {
  .section__inner {
    padding-top: 24px;
  }

  .section__head {
    grid-column: 1 / span 3;
  }

  .section__body {
    grid-column: 4 / -1;
  }
}

/* --- Hero -------------------------------------------------------------- */

.hero {
  padding-top: clamp(32px, 6vw, 72px);
  padding-bottom: calc(var(--section-y) / 2);
}

.hero__meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hair);
}

.hero__title {
  grid-column: 1 / -1;
  padding-top: clamp(40px, 7vw, 96px);
  font-size: var(--step-4);
  line-height: 0.94;
  letter-spacing: -0.045em;
}

.hero__title .q {
  color: var(--red);
}

.hero__body {
  grid-column: 1 / -1;
  margin-top: clamp(28px, 4vw, 56px);
}

.hero__cta {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}

@media (max-width: 539px) {
  .hero__cta .btn {
    width: 100%;
  }
}

.hero__note {
  margin-top: 16px;
  max-width: 34em;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.hero__visual {
  grid-column: 1 / -1;
  margin-top: 56px;
}

.engines {
  grid-column: 1 / -1;
  margin-top: clamp(56px, 8vw, 104px);
}

.engines ul {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
}

.engines li {
  padding: 14px 0;
  border-bottom: 1px solid var(--hair);
  font-weight: 600;
  font-size: var(--step-1);
  letter-spacing: -0.02em;
}

.engines li:nth-child(odd) {
  padding-right: 12px;
}

.engines li:nth-child(even) {
  padding-left: 12px;
  border-left: 1px solid var(--hair);
}

.engines small {
  display: block;
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-soft);
}

@media (min-width: 768px) {
  .hero__visual {
    grid-column: 1 / span 8;
  }

  .engines ul {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .engines li,
  .engines li:nth-child(odd),
  .engines li:nth-child(even) {
    padding: 16px 16px 16px 0;
    border-left: 0;
  }

  .engines li + li {
    padding-left: 16px;
    border-left: 1px solid var(--hair);
  }
}

@media (min-width: 1024px) {
  .hero__body {
    grid-column: 1 / span 6;
  }

  .hero__visual {
    grid-column: 8 / span 5;
    margin-top: clamp(28px, 4vw, 56px);
  }
}

/* KI-Antwort-Karte */

.ai-card {
  background: var(--paper-deep);
  border: 1px solid var(--ink);
  font-size: 0.9375rem;
}

.ai-card__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ink);
}

.ai-card__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: var(--step--1);
}

.ai-card__label::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--red);
}

.ai-card__hint {
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.slot {
  padding: 0 4px;
  border-bottom: 2px solid var(--red);
  color: var(--red);
  white-space: nowrap;
}

.ai-card__block {
  padding: 16px;
}

.ai-card__block + .ai-card__block {
  border-top: 1px solid var(--hair);
}

.ai-card__k {
  display: block;
  margin-bottom: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.ai-card__q {
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.ai-card__list {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.ai-card__list li {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: baseline;
  min-height: 28px;
}

.ai-card__list .n {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

.ai-card__list .pick {
  display: grid;
  gap: 2px;
}

.ai-card__list .pick strong {
  font-weight: 600;
}

.ai-card__list .pick small {
  font-size: var(--step--1);
  line-height: 1.35;
  color: var(--ink-soft);
}

.ai-card__list .you {
  justify-self: start;
  padding: 3px 8px;
  border: 1.5px dashed var(--red);
  color: var(--red);
  font-weight: 700;
}

.ai-card__foot {
  padding: 12px 16px;
  border-top: 1px solid var(--ink);
  font-size: var(--step--1);
  color: var(--ink-soft);
}

@media (prefers-reduced-motion: reduce) {
  .btn .icon {
    transition: none;
  }
}

/* --- Leistungen -------------------------------------------------------- */

.services {
  margin-top: clamp(40px, 6vw, 72px);
  display: grid;
  border-top: 1px solid var(--ink);
}

.service {
  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: 8px;
  padding: 24px 0 28px;
  border-bottom: 1px solid var(--hair);
}

.service__no {
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--red);
  font-variant-numeric: tabular-nums;
  padding-top: 0.35em;
}

.service__title {
  font-size: var(--step-2);
  line-height: 1.1;
}

.service__figure {
  display: block;
  font-size: clamp(3.5rem, 2rem + 6vw, 6.5rem);
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--red);
  margin-bottom: 8px;
}

.service__text {
  grid-column: 2;
  margin-top: 12px;
  max-width: 34em;
  color: var(--ink-soft);
}

.service__text strong {
  color: var(--ink);
}

.service__list {
  grid-column: 2;
  display: grid;
  margin-top: 16px;
  max-width: 34em;
  border-top: 1px solid var(--hair);
  font-size: 0.9375rem;
}

.service__list li {
  display: grid;
  grid-template-columns: 20px 1fr;
  padding: 8px 0;
  border-bottom: 1px solid var(--hair);
}

.service__list li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 0.6em;
  background: var(--red);
}

.services__note {
  margin-top: clamp(32px, 4vw, 48px);
  padding: 20px 24px;
  border: 1px solid var(--ink);
  background: var(--paper-deep);
  max-width: 48em;
}

.services__note-title {
  font-size: var(--step-1);
  line-height: 1.2;
  margin-bottom: 8px;
}

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

@media (min-width: 900px) {
  .services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gap);
  }

  .service {
    align-content: start;
  }
}

/* --- Ergebnisse / Fallstudie ------------------------------------------- */
/* Verwendet: .case, .case__proof, .case__quote, .case__ai-*, .case__cta,
   .case__subtitle, .case__source. Die übrigen .case__-Stile (Kennzahl, Säulen,
   Fakten, ChatGPT-Beleg) sind aufgehoben für eine eigene Kunden-Fallstudie. */

.case {
  margin-top: clamp(32px, 4vw, 48px);
  display: grid;
  gap: 40px;
}

.case__result {
  border-top: 1px solid var(--ink);
  padding-top: 20px;
}

.case__kpis {
  display: grid;
  gap: 24px;
  margin-top: clamp(40px, 6vw, 72px);
  padding-top: 20px;
  border-top: 1px solid var(--ink);
}

@media (min-width: 600px) {
  .case__kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap) calc(var(--gap) * 3);
  }
}

.case__figure {
  font-size: clamp(3rem, 1.8rem + 5vw, 6rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--red);
  white-space: nowrap;
}

.case__label {
  margin-top: 10px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  max-width: 16em;
}

/* Säulen: Anzahl über --n am Container, Höhe über --h je Säule
   (größter Wert = 82 %, damit die Zahl darüber Platz hat). Werte stehen hier
   statt im HTML, weil die CSP keine style-Attribute erlaubt. */
.case__bars {
  display: grid;
  grid-template-columns: repeat(var(--n, 2), minmax(0, 120px));
  gap: 16px;
  align-items: end;
  height: 200px;
  border-bottom: 1px solid var(--ink);
}

.case__bar {
  display: grid;
  grid-template-rows: 1fr auto;
  height: 100%;
  position: relative;
}

.case__bar-fill {
  align-self: end;
  height: var(--h, 6%);
  min-height: 6px;
  background: rgba(20, 17, 15, 0.22);
}

.case__bar--after .case__bar-fill {
  background: var(--red);
}

.case__bar-value {
  position: absolute;
  left: 0;
  bottom: calc(var(--h, 6%) + 8px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.case__bar--after .case__bar-value {
  color: var(--red);
}

.case__facts {
  margin-top: 32px;
  border-top: 1px solid var(--hair);
  font-size: 0.9375rem;
}

.case__facts div {
  display: grid;
  grid-template-columns: minmax(110px, 40%) 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hair);
}

.case__facts dt {
  color: var(--ink-soft);
}

.case__facts dd {
  font-weight: 600;
}

.case__proof {
  align-self: start;
  box-shadow: 8px 8px 0 var(--ink);
}

.case__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: var(--step--1);
}

.case__logo {
  width: 18px;
  height: 18px;
  flex: none;
}

.case__proof-foot {
  display: grid;
  gap: 8px;
  padding: 16px;
  border-top: 1px solid var(--ink);
}

.case__chat-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.case__chat-link:hover {
  background: #000;
}

.case__chat-link .case__logo {
  width: 22px;
  height: 22px;
}

.case__chat-arrow {
  margin-left: auto;
  font-size: 1.125rem;
  transition: transform 0.2s ease;
}

.case__chat-link:hover .case__chat-arrow {
  transform: translate(2px, -2px);
}

.case__chat-note {
  font-size: 0.75rem;
  color: var(--ink-soft);
}

.case__translation {
  margin-top: 6px;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.case__proof .ai-card__list .win {
  justify-self: start;
  padding: 3px 8px;
  background: var(--red);
  color: #fff;
  font-weight: 700;
}

.case__proof .ai-card__list .bar {
  display: block;
  align-self: center;
  height: 12px;
  background: rgba(20, 17, 15, 0.14);
}

.case__proof .ai-card__list .bar--1 {
  width: 78%;
}

.case__proof .ai-card__list .bar--2 {
  width: 56%;
}

.case__quote {
  margin-top: 16px;
  padding-left: 12px;
  border-left: 2px solid var(--red);
  font-size: var(--step--1);
  font-style: italic;
  color: var(--ink-soft);
}

.case__quote cite {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-weight: 600;
}

/* KI-Karte */
.case__ai-figure {
  font-size: clamp(2.75rem, 1.8rem + 3.5vw, 4.5rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.05em;
  color: var(--red);
  font-variant-numeric: tabular-nums;
}

.case__ai-list {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  font-size: var(--step--1);
}

.case__ai-list li {
  display: grid;
  grid-template-columns: 10.5em minmax(0, 1fr) 2.5em;
  align-items: center;
  gap: 10px;
}

.case__ai-list li > :last-child {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.case__ai-bar {
  height: 10px;
  background: var(--red);
}

.case__ai-list li + li .case__ai-bar {
  background: rgba(20, 17, 15, 0.3);
}

/* Balkenlängen relativ zum größten Wert der Karte */
.case__ai-bar--w100 { width: 100%; }
.case__ai-bar--w88 { width: 88%; }
.case__ai-bar--w70 { width: 70%; }
.case__ai-bar--w67 { width: 67%; }
.case__ai-bar--w64 { width: 64%; }
.case__ai-bar--w53 { width: 53%; }
.case__ai-bar--w49 { width: 49%; }
.case__ai-bar--w32 { width: 32%; }
.case__ai-bar--w25 { width: 25%; }

.case__ai-sub {
  margin-top: 6px;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

/* So kommt Ihr Name in die Antwort */
.flow {
  display: grid;
  margin-top: 24px;
  border-top: 1px solid var(--ink);
}

.flow__step {
  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: 8px;
  padding: 18px 0;
  border-bottom: 1px solid var(--hair);
}

.flow__no {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.flow__title {
  font-size: var(--step-1);
  line-height: 1.2;
}

.flow__text {
  margin-top: 4px;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.flow__step--goal .flow__no {
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}

.flow__step--goal .flow__title {
  color: var(--red);
}

@media (min-width: 900px) {
  .flow {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--gap);
    border-top: 0;
  }

  .flow__step {
    grid-template-columns: 1fr;
    align-content: start;
    gap: 12px;
    padding: 0 0 4px;
    border-bottom: 0;
    position: relative;
  }

  .flow__no {
    grid-row: auto;
  }

  /* Verbindungslinie zwischen den Schritten */
  .flow__step::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 44px;
    right: calc(var(--gap) * -1);
    height: 1.5px;
    background: var(--ink);
  }

  .flow__step:last-child::before {
    display: none;
  }

  .flow__text {
    margin-top: 0;
  }
}

/* Einzelergebnisse */
.case__subtitle {
  margin-top: clamp(56px, 7vw, 96px);
  font-size: var(--step-2);
  line-height: 1.1;
}

.results {
  display: grid;
  margin-top: 24px;
  border-top: 1px solid var(--ink);
}

.result {
  display: grid;
  align-content: start;
  padding: 24px 0 28px;
  border-bottom: 1px solid var(--hair);
}

/* Kernzahlen */
.proof {
  display: grid;
  gap: 24px;
  margin-top: clamp(40px, 6vw, 72px);
  padding-top: 20px;
  border-top: 1px solid var(--ink);
}

.proof li {
  display: grid;
  align-content: start;
  gap: 10px;
}

.proof__viz {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 48px;
  margin-bottom: 6px;
}

.proof__viz i {
  display: block;
}

.proof__viz--bars i {
  width: 14px;
  background: rgba(20, 17, 15, 0.22);
}

/* Waagerechte Balken wie in der KI-Karte */
.proof__viz--hbars {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 5px;
}

.proof__viz--hbars i {
  height: 9px;
  background: rgba(20, 17, 15, 0.22);
}

.proof__viz--hbars i:nth-child(1) { width: 64px; background: var(--red); }
.proof__viz--hbars i:nth-child(2) { width: 46px; }
.proof__viz--hbars i:nth-child(3) { width: 30px; }

/* Klicks im Median 1,0 / 1,07 / 1,27 / 2,0 */
.proof__viz--bars i:nth-child(1) { height: 50%; }
.proof__viz--bars i:nth-child(2) { height: 54%; }
.proof__viz--bars i:nth-child(3) { height: 64%; }
.proof__viz--bars i:nth-child(4) { height: 100%; background: var(--red); }

.proof__viz--dots i {
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--red);
}

.proof__viz--dots i.on {
  background: var(--red);
}

.proof__figure {
  font-size: clamp(3rem, 1.8rem + 4vw, 5.5rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--red);
  white-space: nowrap;
}

.proof__label {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  max-width: 16em;
}

/* Wiedererkennen: Ausgangslage -> Ergebnis */
.result__situation {
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.result__big {
  margin-top: 12px;
  font-size: clamp(2.75rem, 1.6rem + 3.5vw, 4.5rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--red);
  white-space: nowrap;
}

/* Vorher-nachher-Balken: Beschriftung über dem Balken, Wert rechts.
   Der Nachher-Balken ist immer 100 %, die Vorher-Breite steht in der Klasse
   (die CSP erlaubt keine style-Attribute). */
.ba {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5.5em;
  column-gap: 12px;
  align-items: center;
  margin-top: 20px;
}

.ba__k {
  grid-column: 1 / -1;
  margin-bottom: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.ba__k:not(:first-child) {
  margin-top: 10px;
}

.ba__bar {
  height: 18px;
  min-width: 4px;
  background: rgba(20, 17, 15, 0.22);
}

.ba__bar--after { width: 100%; background: var(--red); }
.ba__bar--w2 { width: 2%; }
.ba__bar--w22 { width: 22%; }
.ba__bar--w43 { width: 43%; }
.ba__bar--w70 { width: 70%; }

.ba__v {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ba__v--after {
  color: var(--red);
}

.ba__unit {
  margin-top: 10px;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

/* KI-Nennungen: Text links, Karte rechts */
.case--ai {
  margin-top: clamp(56px, 7vw, 96px);
  align-items: start;
}

/* Artikel-Stapel im Kasten */
.roi {
  margin-top: clamp(56px, 7vw, 96px);
  padding: 24px;
  border: 1px solid var(--ink);
  background: var(--paper-deep);
}

.roi__title {
  margin-top: 8px;
  font-size: var(--step-2);
  line-height: 1.1;
  max-width: 22em;
}

.roi__k {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--red);
}

/* Artikel-Stapel: 12 Monate, jede Säule 1/12 höher */
.stack {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 4px;
  align-items: end;
  height: 120px;
  margin-top: 20px;
  border-bottom: 1px solid var(--ink);
}

.stack i {
  display: block;
  background: rgba(193, 18, 31, 0.35);
}

.stack i:nth-child(1) { height: 8.33%; }
.stack i:nth-child(2) { height: 16.67%; }
.stack i:nth-child(3) { height: 25%; }
.stack i:nth-child(4) { height: 33.33%; }
.stack i:nth-child(5) { height: 41.67%; }
.stack i:nth-child(6) { height: 50%; }
.stack i:nth-child(7) { height: 58.33%; }
.stack i:nth-child(8) { height: 66.67%; }
.stack i:nth-child(9) { height: 75%; }
.stack i:nth-child(10) { height: 83.33%; }
.stack i:nth-child(11) { height: 91.67%; }
.stack i:nth-child(12) { height: 100%; background: var(--red); }

.stack__axis {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: var(--step--1);
  font-weight: 600;
}

.roi__foot {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--hair);
  color: var(--ink-soft);
}

.roi__foot strong {
  color: var(--ink);
}

.case__cta-actions {
  display: grid;
  gap: 12px;
  justify-items: start;
}

.case__cta-link {
  color: var(--paper);
  font-size: 0.9375rem;
  font-weight: 600;
  text-underline-offset: 3px;
}

.case__source {
  margin-top: 24px;
  max-width: 48em;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.case__source a {
  color: inherit;
}

.case__cta-text strong {
  display: block;
  font-size: var(--step-2);
  line-height: 1.1;
  margin-bottom: 6px;
}

@media (min-width: 768px) {
  .proof {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap);
  }
}

@media (min-width: 900px) {
  .results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: calc(var(--gap) * 3);
  }

  .roi {
    padding: 32px;
  }

  .case__cta-actions {
    justify-items: center;
  }
}



.case__cta {
  display: grid;
  gap: 20px;
  margin-top: clamp(40px, 5vw, 64px);
  padding: 24px;
  background: var(--red);
  color: var(--paper);
}

.case__cta-text {
  font-size: var(--step-1);
  line-height: 1.35;
  max-width: 30em;
}

.case__cta .btn {
  background: var(--paper);
  color: var(--ink);
}

.case__cta .btn:hover {
  background: #fff;
}

@media (min-width: 900px) {
  .case {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--gap) calc(var(--gap) * 3);
  }

  .case__cta {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 32px;
    padding: 28px 32px;
  }
}

/* --- Ablauf ------------------------------------------------------------ */

.steps {
  margin-top: clamp(40px, 6vw, 72px);
  display: grid;
  counter-reset: step;
}

.step {
  position: relative;
  padding: 24px 0 32px;
  border-top: 1px solid var(--ink);
}

.step__no {
  display: block;
  font-size: clamp(4rem, 2.5rem + 6vw, 7rem);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
}

.step:last-child .step__no {
  color: var(--red);
}

.step__title {
  margin-top: 20px;
  font-size: var(--step-2);
  line-height: 1.1;
}

.step__meta {
  margin-top: 6px;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--red);
}

.step__text {
  margin-top: 12px;
  color: var(--ink-soft);
  max-width: 26em;
}

.step__arrow {
  position: absolute;
  right: 0;
  top: 28px;
  width: 32px;
  height: 32px;
  transform: rotate(90deg);
}

.step:last-child .step__arrow {
  display: none;
}

@media (min-width: 900px) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--gap);
  }

  .step__arrow {
    right: 8px;
    transform: none;
  }
}

/* Persönlicher Ansprechpartner (WhatsApp / E-Mail) */

.direct {
  margin-top: clamp(32px, 5vw, 56px);
  display: grid;
  gap: 16px 24px;
  padding: 24px 20px 28px;
  border: 1.5px solid var(--ink);
  background: var(--paper-deep);
}

.direct__figure {
  font-size: clamp(3.5rem, 2rem + 4.5vw, 6rem);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--red);
}

.direct__title {
  font-size: var(--step-2);
  line-height: 1.1;
}

.direct__text {
  margin-top: 12px;
  max-width: 36em;
  color: var(--ink-soft);
}

.direct__channels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--hair);
}

.direct__channels li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.direct__channels li::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--red);
}

.direct__channels a {
  text-decoration: none;
}

.direct__channels a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.direct__detail {
  margin-left: 6px;
  font-weight: 400;
  color: var(--ink-soft);
}

@media (min-width: 900px) {
  .direct {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: start;
    padding: 32px;
  }
}

/* --- Preis (rote Fläche) ----------------------------------------------- */

.section--red {
  background: var(--red);
  color: var(--paper);
}

.section--red .section__inner {
  border-top-color: var(--paper);
}

.section--red .eyebrow__no {
  color: var(--paper);
}

.section--red ::selection {
  background: var(--paper);
  color: var(--red);
}

.section--red :focus-visible {
  outline-color: var(--paper);
}

.price {
  margin-top: clamp(40px, 6vw, 72px);
  display: grid;
  gap: 40px;
}

.price__badge {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--paper);
  font-size: var(--step--1);
  font-weight: 600;
}

.price__amount {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 16px;
  margin-top: 20px;
}

.price__main {
  container-type: inline-size;
}

.price__value {
  font-size: clamp(5rem, 2.5rem + 12vw, 11rem);
  font-size: min(clamp(5rem, 2.5rem + 12vw, 11rem), 38cqi);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
}

.price__per {
  font-size: var(--step-2);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.price__regular {
  margin-top: 16px;
  font-size: var(--step-1);
}

.price__regular s {
  text-decoration-thickness: 2px;
}

/* Exklusiv-Paket: eigener Kasten unter dem Standardpaket */

.premium {
  margin-top: clamp(56px, 7vw, 96px);
  padding: clamp(20px, 4vw, 48px);
  border: 1.5px solid var(--paper);
  display: grid;
  gap: 32px;
}

.premium__title {
  margin-top: 20px;
  font-size: var(--step-3);
  line-height: 1;
  letter-spacing: -0.04em;
}

.premium__lead {
  margin-top: 12px;
  font-size: var(--step-1);
  max-width: 26em;
}

.premium__amount {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 16px;
  margin-top: 28px;
}

.premium__head {
  container-type: inline-size;
}

.premium__value {
  font-size: var(--step-4);
  font-size: min(var(--step-4), 22cqi);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}

.premium__terms {
  margin-top: 12px;
  font-weight: 600;
}

.premium__k {
  margin-bottom: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.price__list {
  display: grid;
  border-top: 1px solid var(--paper);
}

.price__list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  padding: 14px 0;
  border-bottom: 1px solid rgba(253, 240, 213, 0.35);
  font-weight: 500;
  line-height: 1.4;
}

.price__list li::before {
  content: "";
  width: 10px;
  height: 10px;
  margin-top: 0.4em;
  background: var(--paper);
}

.price__cta {
  margin-top: 32px;
  display: grid;
  gap: 12px;
}

.section--red .btn--ghost:hover {
  background: var(--paper);
  color: var(--red);
  box-shadow: inset 0 0 0 1.5px var(--paper);
}

.price__b2b {
  margin-top: 20px;
  padding: 10px 12px;
  border: 1px solid var(--paper);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.4;
}

.price__vat {
  margin-top: 16px;
  font-size: var(--step--1);
  opacity: 0.92;
}

@media (min-width: 900px) {
  .price {
    grid-template-columns: repeat(9, minmax(0, 1fr));
    column-gap: var(--gap);
  }

  .price__main {
    grid-column: 1 / span 5;
  }

  .price__side {
    grid-column: 6 / span 4;
    align-self: end;
  }

  .premium {
    grid-template-columns: repeat(9, minmax(0, 1fr));
    column-gap: var(--gap);
  }

  .premium__head {
    grid-column: 1 / span 4;
  }

  .premium__body {
    grid-column: 5 / span 5;
  }
}

/* --- Formular ---------------------------------------------------------- */

.section--check {
  background: var(--paper-deep);
}

.check {
  margin-top: clamp(40px, 6vw, 72px);
  display: grid;
  gap: 40px;
}

.check__points {
  display: grid;
  margin-top: 24px;
  border-top: 1px solid var(--ink);
}

.check__points li {
  display: grid;
  grid-template-columns: 28px 1fr;
  padding: 12px 0;
  border-bottom: 1px solid var(--hair);
  font-weight: 500;
}

.check__points li::before {
  content: "";
  width: 10px;
  height: 10px;
  margin-top: 0.45em;
  background: var(--red);
}

/* WhatsApp-Kasten neben dem Formular */

.check__wa {
  margin-top: 32px;
  padding: 20px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
}

.check__wa-title {
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.check__wa-text {
  margin-top: 8px;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.check__wa-btn {
  margin-top: 16px;
  justify-content: center;
  padding-inline: 16px;
}

.check__wa-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.check__wa-label .icon {
  width: 1.35em;
  height: 1.35em;
}

.btn:hover .check__wa-label .icon {
  transform: none;
}

.check__wa-number {
  margin-top: 10px;
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

.check__direct {
  margin-top: 24px;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.check__direct a {
  color: var(--ink);
  font-weight: 600;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
}

.form {
  display: grid;
  gap: 20px;
}

.form__row {
  display: grid;
  gap: 20px;
}

.field label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
}

.field input {
  width: 100%;
  min-height: 56px;
  padding: 14px 16px;
  border: 1.5px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  font-size: 1.0625rem;
  -webkit-appearance: none;
  appearance: none;
}

.field input::placeholder {
  color: #8a7f74;
}

.field input:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 0;
  border-color: var(--red);
}

.field input:user-invalid {
  border-color: var(--red);
  background: #fff6f4;
}

.field__hint {
  margin-top: 6px;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.consent {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: start;
  padding: 16px 0;
  border-top: 1px solid var(--hair);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.consent input {
  width: 28px;
  height: 28px;
  margin: 0;
  border: 1.5px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.consent input::before {
  content: "";
  width: 14px;
  height: 14px;
  background: var(--red);
  transform: scale(0);
  transition: transform 0.12s ease;
}

.consent input:checked {
  border-color: var(--red);
}

.consent input:checked::before {
  transform: scale(1);
}

.consent input:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.consent input:user-invalid {
  border-color: var(--red);
}

.form__note {
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.form__status {
  font-weight: 600;
  color: var(--red);
}

.form__status:empty {
  display: none;
}

.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.success {
  border: 1.5px solid var(--ink);
  background: var(--paper);
  padding: 28px 24px 32px;
}

.success[hidden] {
  display: none;
}

.success__mark {
  width: 40px;
  height: 40px;
  background: var(--red);
  display: grid;
  place-items: center;
  color: var(--paper);
}

.success__title {
  margin-top: 20px;
  font-size: var(--step-2);
}

.success__text {
  margin-top: 12px;
  max-width: 32em;
}

.success__text + .success__text {
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

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

@media (min-width: 1024px) {
  .check {
    grid-template-columns: repeat(9, minmax(0, 1fr));
    column-gap: var(--gap);
  }

  .check__info {
    grid-column: 1 / span 3;
  }

  .check__form {
    grid-column: 4 / span 6;
  }
}

/* --- Hero: Kurzargumente ------------------------------------------------ */

.hero__ticks {
  display: grid;
  gap: 10px 24px;
  margin-top: 24px;
  max-width: 34em;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
}

.hero__ticks li {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: start;
}

.hero__ticks .icon {
  color: var(--red);
}

@media (min-width: 540px) {
  .hero__ticks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Ihr Ratgeber: Beispiel-Fenster und Argumente ----------------------- */

.showcase {
  display: grid;
  gap: 48px var(--gap);
  margin-top: clamp(40px, 6vw, 72px);
}

/* Beispiel-Ratgeber: bewusst nicht in JASSM-Farben – er zeigt das Design eines Kunden */
.mock {
  --mock: #1f4d3a;
  margin-right: 8px;
  border: 1.5px solid var(--ink);
  background: #fff;
  box-shadow: 8px 8px 0 var(--red);
}

.mock__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1.5px solid var(--ink);
  background: var(--paper-deep);
}

.mock__dots {
  display: flex;
  gap: 5px;
  flex: none;
}

.mock__dots i {
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--ink);
}

.mock__url {
  flex: 1;
  min-width: 0;
  padding: 5px 10px;
  border: 1px solid var(--ink);
  background: var(--paper);
  font-size: var(--step--1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mock__url strong {
  color: var(--red);
}

.mock__page {
  padding: 16px 16px 20px;
}

.mock__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(20, 17, 15, 0.14);
}

.mock__logo {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--mock);
}

.mock__nav {
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.mock__kicker {
  margin-top: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mock);
}

.mock__title {
  margin-top: 4px;
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.mock__posts {
  display: grid;
  margin-top: 16px;
  border-top: 1px solid rgba(20, 17, 15, 0.14);
}

.mock__posts li {
  display: grid;
  gap: 2px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(20, 17, 15, 0.14);
}

.mock__posts strong {
  font-weight: 600;
  line-height: 1.3;
}

.mock__tag {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--mock);
}

.mock__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--mock);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
}

.mock__foot {
  padding: 10px 16px;
  border-top: 1.5px solid var(--ink);
  background: var(--paper);
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.facts {
  display: grid;
  align-content: start;
  border-top: 1px solid var(--ink);
}

.fact {
  padding: 16px 0 18px;
  border-bottom: 1px solid var(--hair);
}

.fact__title {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: baseline;
  font-size: var(--step-1);
  line-height: 1.2;
}

.fact__title::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--red);
  transform: translateY(-0.1em);
}

.fact__text {
  margin-top: 6px;
  padding-left: 20px;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

@media (min-width: 1024px) {
  .showcase {
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
    align-items: start;
  }
}

/* Zwei Dinge, zehn Minuten */
.duo {
  display: grid;
  gap: 20px var(--gap);
  margin-top: clamp(48px, 6vw, 80px);
  padding: 24px;
  border: 1px solid var(--ink);
  background: var(--paper-deep);
}

.duo__title {
  margin-top: 8px;
  font-size: var(--step-2);
  line-height: 1.1;
}

.duo__list {
  display: grid;
  border-top: 1px solid var(--ink);
}

.duo__list li {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid var(--hair);
  color: var(--ink-soft);
}

.duo__list strong {
  color: var(--ink);
}

.duo__no {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: var(--red);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 700;
}

.duo__foot {
  font-weight: 600;
}

@media (min-width: 900px) {
  .duo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    padding: 32px;
  }

  .duo__foot {
    grid-column: 2;
  }
}

/* Button mit Textlink daneben */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: clamp(32px, 4vw, 48px);
}

.cta-row__link {
  font-weight: 600;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
}

@media (max-width: 539px) {
  .cta-row .btn {
    width: 100%;
  }
}

/* --- Ablauf: die ersten 30 Tage ----------------------------------------- */

.days {
  display: grid;
  margin-top: clamp(40px, 6vw, 72px);
  border-top: 1px solid var(--ink);
}

.day {
  display: grid;
  grid-template-columns: 4.75rem 1fr;
  column-gap: 16px;
  padding: 20px 0 24px;
  border-bottom: 1px solid var(--hair);
}

.day__no {
  grid-row: span 2;
  font-size: clamp(2.75rem, 2rem + 3.4vw, 5rem);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
}

.day__no small {
  display: block;
  margin-bottom: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.day--goal .day__no {
  color: var(--red);
}

.day__title {
  font-size: var(--step-2);
  line-height: 1.1;
}

.day__meta {
  margin-top: 6px;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--red);
}

.day__text {
  grid-column: 2;
  margin-top: 12px;
  max-width: 30em;
  color: var(--ink-soft);
}

.days__note {
  margin-top: 12px;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

@media (min-width: 900px) {
  .day {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) minmax(0, 4fr);
    column-gap: var(--gap);
    align-items: start;
    padding: 24px 0 28px;
  }

  .day__no {
    grid-row: auto;
  }

  .day__text {
    grid-column: auto;
    margin-top: 0;
  }
}

/* --- Preis: Umrechnung -------------------------------------------------- */

.price__calc {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(253, 240, 213, 0.35);
  max-width: 24em;
  font-weight: 600;
}

/* --- Fragen ------------------------------------------------------------- */

.faq {
  margin-top: clamp(32px, 5vw, 56px);
  max-width: 52em;
  border-top: 1px solid var(--ink);
}

.faq__item {
  border-bottom: 1px solid var(--hair);
}

.faq__q {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  list-style: none;
  cursor: pointer;
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q::after {
  content: "+";
  flex: none;
  width: 1em;
  text-align: center;
  color: var(--red);
  font-weight: 700;
}

.faq__item[open] .faq__q::after {
  content: "–";
}

.faq__q:hover {
  color: var(--red);
}

.faq__a {
  padding: 0 2em 24px 0;
  max-width: 40em;
  color: var(--ink-soft);
}

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

.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding-block: 56px 40px;
}

.site-footer .brand__mark {
  background: var(--red);
}

.site-footer__inner {
  row-gap: 32px;
}

.site-footer__brand {
  grid-column: 1 / -1;
}

.site-footer__claim {
  margin-top: 16px;
  max-width: 24em;
  color: rgba(253, 240, 213, 0.75);
}

.site-footer__nav {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
}

.site-footer__nav a {
  font-weight: 500;
  text-decoration: none;
}

.site-footer__nav a:hover {
  text-decoration: underline;
}

.site-footer__legal {
  grid-column: 1 / -1;
  padding-top: 20px;
  border-top: 1px solid rgba(253, 240, 213, 0.25);
  font-size: var(--step--1);
  color: rgba(253, 240, 213, 0.75);
}

.site-footer :focus-visible {
  outline-color: var(--paper);
}

.site-footer__nav button {
  padding: 0;
  border: 0;
  background: none;
  font-weight: 500;
  cursor: pointer;
}

.site-footer__nav button:hover {
  text-decoration: underline;
}

/* --- Cookie-Banner (CookieConsent v3, Grundstile in cookieconsent.css) --- */

#cc-main {
  --cc-font-family: var(--font);
  --cc-modal-border-radius: 0;
  --cc-btn-border-radius: 0;
  --cc-pm-toggle-border-radius: 0;
  --cc-modal-margin: var(--gutter);
  --cc-z-index: 60;

  --cc-bg: var(--paper);
  --cc-primary-color: var(--ink);
  --cc-secondary-color: var(--ink-soft);
  --cc-link-color: var(--red);

  --cc-btn-primary-bg: var(--red);
  --cc-btn-primary-color: var(--paper);
  --cc-btn-primary-border-color: var(--red);
  --cc-btn-primary-hover-bg: var(--red-deep);
  --cc-btn-primary-hover-color: var(--paper);
  --cc-btn-primary-hover-border-color: var(--red-deep);
  --cc-btn-secondary-bg: transparent;
  --cc-btn-secondary-color: var(--ink);
  --cc-btn-secondary-border-color: var(--ink);
  --cc-btn-secondary-hover-bg: var(--ink);
  --cc-btn-secondary-hover-color: var(--paper);
  --cc-btn-secondary-hover-border-color: var(--ink);

  --cc-separator-border-color: var(--hair);
  --cc-toggle-on-bg: var(--red);
  --cc-toggle-off-bg: var(--ink-soft);
  --cc-toggle-readonly-bg: #d9c49b;
  --cc-cookie-category-block-bg: var(--paper-deep);
  --cc-cookie-category-block-border: var(--paper-deep);
  --cc-cookie-category-block-hover-bg: #f0d8aa;
  --cc-cookie-category-block-hover-border: #f0d8aa;
  --cc-cookie-category-expanded-block-hover-bg: #f0d8aa;
  --cc-overlay-bg: rgba(20, 17, 15, 0.7);
  --cc-webkit-scrollbar-hover-bg: var(--ink-soft);
  --cc-footer-bg: var(--paper-deep);
  --cc-footer-color: var(--ink-soft);
  --cc-footer-border-color: var(--hair);
}

/* Banner am Seitenende: dunkle Leiste mit roter Kante */
#cc-main .cm {
  --cc-bg: var(--ink);
  --cc-primary-color: var(--paper);
  --cc-secondary-color: rgba(253, 240, 213, 0.8);
  --cc-link-color: var(--paper);
  --cc-btn-primary-bg: transparent;
  --cc-btn-primary-color: var(--paper);
  --cc-btn-primary-border-color: var(--paper);
  --cc-btn-primary-hover-bg: var(--paper);
  --cc-btn-primary-hover-color: var(--ink);
  --cc-btn-primary-hover-border-color: var(--paper);
  --cc-btn-secondary-bg: transparent;
  --cc-btn-secondary-color: var(--paper);
  --cc-btn-secondary-border-color: rgba(253, 240, 213, 0.45);
  --cc-btn-secondary-hover-bg: var(--paper);
  --cc-btn-secondary-hover-color: var(--ink);
  --cc-btn-secondary-hover-border-color: var(--paper);
  --cc-footer-bg: var(--ink);
  --cc-footer-color: rgba(253, 240, 213, 0.8);
  --cc-footer-border-color: rgba(253, 240, 213, 0.16);
  color: var(--cc-primary-color); /* sonst erbt der Titel die dunkle Schrift von #cc-main */
  border-top: 4px solid var(--red);
  box-shadow: none;
}

#cc-main .cm__title,
#cc-main .pm__title {
  font-weight: 700;
  letter-spacing: -0.01em;
}

#cc-main .cm__desc {
  max-width: 56em;
  line-height: 1.5;
}

#cc-main .cm__btn,
#cc-main .pm__btn {
  min-height: 48px;
  border-width: 1.5px;
  font-weight: 600;
}

#cc-main .cm a,
#cc-main .cm .cc__link {
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}

#cc-main .cm :focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}

#cc-main .pm :focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

#cc-main .cm ::selection {
  background: var(--paper);
  color: var(--ink);
}

@media (min-width: 768px) {
  .site-footer__brand {
    grid-column: 1 / span 6;
  }

  .site-footer__nav {
    grid-column: 7 / -1;
    justify-content: flex-end;
    align-self: start;
  }
}

/* --- Rechtstexte & Unterseiten ---------------------------------------- */

.page {
  padding-block: clamp(40px, 7vw, 96px) var(--section-y);
}

.page__title {
  font-size: var(--step-3);
  margin-top: 24px;
}

.prose {
  max-width: 44em;
  margin-top: 40px;
}

.prose h2 {
  margin-top: 48px;
  font-size: var(--step-2);
  line-height: 1.15;
}

.prose h3 {
  margin-top: 32px;
  font-size: var(--step-1);
  letter-spacing: -0.015em;
}

.prose h4 {
  margin-top: 24px;
  font-size: var(--step-0);
  font-weight: 700;
}

.prose p,
.prose ul,
.prose ol {
  margin-top: 16px;
}

.prose a {
  overflow-wrap: anywhere;
}

.prose__stand {
  color: var(--ink-soft);
  margin-top: 48px;
}

.prose ul {
  list-style: square;
  padding-left: 1.25em;
}

.prose ul li::marker {
  color: var(--red);
}

.placeholder {
  margin-top: 40px;
  padding: 20px 24px;
  border: 1.5px dashed var(--red);
  color: var(--red);
  font-weight: 500;
  max-width: 44em;
}

.page__back {
  margin-top: 48px;
}