/* bundlethemes – Landingpage. Marke: Tinte, Lime, Weiß, Grau; Bricolage Grotesque 800 und 400.
   Alles liegt auf dem eigenen Server: keine fremden Schriften, keine fremden Dateien. */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin-ext-wght-normal.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: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin-wght-normal.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;
}

:root {
  --ink: #0E0E0E;
  --lime: #D4FF3A;
  --white: #FFFFFF;
  --grey: #4A4A48;
  /* Abgeleitet: Weiß mit Deckkraft für Nebentext und Linien auf Tinte */
  --muted: rgba(255, 255, 255, 0.74);
  --line: rgba(255, 255, 255, 0.14);
  --font: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(1rem, 5vw, 2.5rem);
  --radius: 0.875rem;
  /* Weiche Formen: Bühne, Karten und Flächen */
  --radius-soft: 1.25rem;
  --radius-stage: 1.375rem;
  /* Leise Fläche auf Tinte: Karten und Kacheln */
  --tile: rgba(255, 255, 255, 0.06);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--ink);
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

a {
  color: inherit;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--lime);
}

:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 3px;
  border-radius: 0.375rem;
}

[hidden] {
  display: none !important;
}

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

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -4rem;
  z-index: 10;
  padding: 0.625rem 0.875rem;
  background: var(--lime);
  color: var(--ink);
  font-weight: 800;
  border-radius: 0.625rem;
  text-decoration: none;
}

.skip-link:focus {
  top: 0.75rem;
  color: var(--ink);
}

/* Rahmen */

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

/* Testmodus: schmale Zeile über der Seite. Es gibt sie nur über den privaten Test-Link und auf den Seiten
   einer Testbestellung, nie im echten Verkauf. */
.test-note {
  padding: 0.375rem var(--gutter);
  background: var(--lime);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
}

.site-header,
.site-main,
.site-footer {
  width: 100%;
  max-width: 77.5rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.site-header {
  padding-block: 1.25rem;
}

.site-header__logo {
  display: inline-block;
  border-radius: 0.375rem;
}

.site-header__logo img {
  width: auto;
  height: 1.625rem;
}

.site-main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

.site-footer {
  padding-block: 1.25rem 1.75rem;
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
  color: var(--muted);
}

.site-footer__nav,
.site-footer__languages ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer a {
  display: inline-block;
  padding-block: 0.375rem;
  text-decoration: none;
}

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

/* Sprachwechsel: schlichte Links, die aktive Sprache in Weiß */
.site-footer__languages ul {
  gap: 0 1.125rem;
}

.site-footer__languages a[aria-current] {
  color: var(--white);
  font-weight: 800;
}

/* Startseite */

/* Erster Bildschirm: Satz, Bühne, Feld. Darunter geht es weiter (.block). */
.first {
  display: flex;
  flex-direction: column;
}

.hero {
  display: grid;
  gap: 1.125rem;
  padding-block: 0.25rem 1.75rem;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.3125rem 0.75rem 0.3125rem 0.625rem;
  border: 1px solid var(--line);
  border-radius: 62.5rem;
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--white);
}

.eyebrow::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--lime);
}

.hero__title {
  font-size: clamp(2.125rem, 9.4vw, 3rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.hero__accent {
  display: block;
  color: var(--lime);
}

/* Weiter nach unten: der Hinweis, dass unter dem ersten Bildschirm mehr kommt */
.first__more {
  padding-bottom: 1.5rem;
}

.more-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.more-link::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  margin-top: -0.25rem;
  border-right: 2px solid var(--lime);
  border-bottom: 2px solid var(--lime);
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease);
}

.more-link:hover::after {
  transform: translateY(0.1875rem) rotate(45deg);
}

/* Bühne: die Schleife aus den Vorführshops, sonst die gestapelten Theme-Karten des Zeichens */

.stage {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-stage);
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(212, 255, 58, 0.13), rgba(212, 255, 58, 0) 60%),
    radial-gradient(70% 90% at 0% 100%, rgba(74, 74, 72, 0.5), rgba(74, 74, 72, 0) 70%),
    var(--ink);
}

/* Mit Video: Die Bühne nimmt die Form des Videos an und wird nie höher als --stage-h. Sie schneidet
   nichts ab (das Video trägt die runden Ecken selbst), damit das Leuchten dahinter in die Seite scheint. */
.stage--video {
  --stage-h: min(64vh, 27rem);
  display: block;
  aspect-ratio: auto;
  margin-inline: auto;
  overflow: visible;
  isolation: isolate;
  background: var(--ink);
  box-shadow: 0 1.5rem 3.5rem -1.5rem rgba(0, 0, 0, 0.9);
}

.stage__video,
img.stage__still {
  width: 100%;
  height: auto;
  max-height: var(--stage-h);
  border-radius: inherit;
  object-fit: cover;
}

/* Form bekannt (aus loop.jpg): Hochkant wird die Bühne schmal, quer bleibt sie breit. */
.stage--9-16 { aspect-ratio: 9 / 16; width: min(100%, calc(var(--stage-h) * 9 / 16)); }
.stage--4-5 { aspect-ratio: 4 / 5; width: min(100%, calc(var(--stage-h) * 4 / 5)); }
.stage--1-1 { aspect-ratio: 1 / 1; width: min(100%, var(--stage-h)); }
.stage--4-3 { aspect-ratio: 4 / 3; width: min(100%, calc(var(--stage-h) * 4 / 3)); }
.stage--16-9 { aspect-ratio: 16 / 9; width: min(100%, calc(var(--stage-h) * 16 / 9)); }

.stage--9-16 > .stage__video,
.stage--4-5 > .stage__video,
.stage--1-1 > .stage__video,
.stage--4-3 > .stage__video,
.stage--16-9 > .stage__video,
.stage--9-16 > img.stage__still,
.stage--4-5 > img.stage__still,
.stage--1-1 > img.stage__still,
.stage--4-3 > img.stage__still,
.stage--16-9 > img.stage__still {
  height: 100%;
  max-height: none;
}

/* Standbild: nur für Menschen, die weniger Bewegung wünschen */
.stage__still {
  display: none;
}

/* Leuchten hinter der Bühne: das Bild noch einmal, weich gezeichnet. Erst das Standbild; läuft das
   Video, zeichnet site.js es klein auf die Leinwand, und die Farbe des Shops, der gerade läuft,
   scheint in die Seite. Das Leuchten ragt nur gemalt über die Bühne hinaus: Die Seite wird nicht breiter. */
.stage__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: inherit;
  object-fit: cover;
  opacity: 0.5;
  filter: blur(2.75rem) saturate(1.3);
  pointer-events: none;
  transition: opacity 0.8s ease;
}

.stage.is-glowing > img.stage__glow {
  opacity: 0;
}

/* Leiste der Bühne. Bei den Karten sitzt sie unten rechts im Bild. Beim Video steht sie unter dem Bild,
   damit nichts den Shop verdeckt: links die Zeile mit dem Shop, der gerade läuft, rechts der Knopf zum
   Anhalten. Ihr Platz ist immer reserviert (margin-bottom), damit nichts springt, wenn das Skript sie füllt. */
.stage__bar {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.stage--video {
  margin-bottom: 3.125rem;
}

.stage--video > .stage__bar {
  top: calc(100% + 0.375rem);
  right: 0;
  bottom: auto;
  left: 0;
  min-height: 2.75rem;
}

/* Welcher Vorführshop gerade läuft (erscheint nur mit JavaScript) */
.stage__label {
  min-width: 0;
  overflow: hidden;
  font-size: 0.9375rem;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.stage__shop {
  display: none;
}

.stage__shop.is-on {
  display: inline;
}

.stage__nr {
  margin-right: 0.375rem;
  color: var(--lime);
  font-weight: 800;
}

.stack {
  position: relative;
  width: min(46%, 17rem);
  aspect-ratio: 1;
  animation: stack-float 9s ease-in-out infinite alternate;
}

.stack__card {
  position: absolute;
  width: 74.36%;
  height: 74.36%;
  border-radius: 12.07%;
}

.stack__card--back {
  left: 25.64%;
  top: 0;
  background: var(--grey);
  animation: stack-back 9s ease-in-out infinite alternate;
}

.stack__card--mid {
  left: 12.82%;
  top: 12.82%;
  background: var(--white);
  animation: stack-mid 9s ease-in-out infinite alternate;
}

.stack__card--front {
  left: 0;
  top: 25.64%;
  background: var(--lime);
  animation: stack-front 9s ease-in-out infinite alternate;
}

.stack__line {
  position: absolute;
  left: 12.07%;
  height: 7.76%;
  border-radius: 62.5rem;
  background: var(--ink);
}

.stack__line--1 {
  top: 12.93%;
  width: 41.81%;
}

.stack__line--2 {
  top: 26.72%;
  width: 28.02%;
  opacity: 0.4;
}

.stack__card--back .stack__line {
  background: var(--white);
  opacity: 0.35;
}

.stack__card--back .stack__line--2 {
  opacity: 0.18;
}

.stack__dot {
  position: absolute;
  left: 53.45%;
  top: 53.45%;
  width: 32.76%;
  height: 32.76%;
  border-radius: 50%;
  background: var(--ink);
}

@keyframes stack-float {
  from { transform: translate3d(0, 1.5%, 0); }
  to { transform: translate3d(0, -1.5%, 0); }
}

@keyframes stack-back {
  0%, 12% { transform: translate3d(0, 0, 0); }
  88%, 100% { transform: translate3d(13%, -13%, 0); }
}

@keyframes stack-mid {
  0%, 12% { transform: translate3d(0, 0, 0); }
  88%, 100% { transform: translate3d(3%, -3%, 0); }
}

@keyframes stack-front {
  0%, 12% { transform: translate3d(0, 0, 0); }
  88%, 100% { transform: translate3d(-7%, 7%, 0); }
}

.stage.is-paused .stack,
.stage.is-paused .stack__card {
  animation-play-state: paused;
}

/* Knopf zum Anhalten der Bewegung (erscheint nur mit JavaScript) */
.stage__toggle {
  flex: none;
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(14, 14, 14, 0.72);
  color: var(--white);
  cursor: pointer;
}

.stage__toggle::before {
  content: "";
  width: 0.75rem;
  height: 0.875rem;
  border-inline: 0.25rem solid currentColor;
}

.stage__toggle[aria-pressed="true"]::before {
  width: 0;
  height: 0;
  margin-left: 0.1875rem;
  border-block: 0.4375rem solid transparent;
  border-inline: 0.75rem solid currentColor;
  border-inline-end-width: 0;
}

.stage__toggle:hover {
  border-color: var(--white);
}

/* Formular */

.signup__label {
  display: block;
  margin-bottom: 0.625rem;
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.signup__row {
  display: grid;
  gap: 0.625rem;
}

.signup__input {
  width: 100%;
  min-width: 0;
  height: 3.5rem;
  padding: 0 1rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 1.0625rem;
  appearance: none;
}

.signup__input::placeholder {
  color: var(--grey);
  opacity: 1;
}

.signup__input[aria-invalid="true"] {
  box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 5px var(--white);
  outline: 3px solid var(--white);
  outline-offset: 0;
}

.signup__input[aria-invalid="true"]:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 3px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--lime);
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.button:hover {
  color: var(--ink);
  box-shadow: 0 0 0 3px rgba(212, 255, 58, 0.35);
}

.button:active {
  transform: scale(0.98);
}

.button:focus-visible {
  outline-color: var(--white);
}

.button[disabled] {
  cursor: progress;
  opacity: 0.7;
}

.signup__error {
  position: relative;
  padding: 0.75rem 0.875rem 0.75rem 2.875rem;
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.4;
}

.signup__error:empty {
  display: none;
}

.signup__error::before {
  content: "!";
  position: absolute;
  left: 0.875rem;
  top: 0.75rem;
  display: grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1;
}

.signup__hint {
  margin-top: 0.875rem;
  max-width: 34rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--muted);
}

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

.signup__hint a:hover {
  color: var(--lime);
}

/* Honigtopf: für Menschen unsichtbar und nicht erreichbar */
.signup__trap {
  position: absolute;
  left: -625rem;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.notice {
  padding: 1.25rem 1.375rem 1.375rem;
  border-radius: 1.25rem;
  background: var(--lime);
  color: var(--ink);
}

/* Bekommt den Fokus nur vom Skript, damit die Antwort vorgelesen wird: kein Rahmen nötig */
.notice:focus {
  outline: none;
}

.notice__title {
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.notice__text {
  font-size: 1rem;
  line-height: 1.5;
}

/* Schluss: eine Lime-Fläche mit dem Sprung zurück zum Feld */
.cta {
  margin-block: clamp(3.5rem, 10vw, 6.5rem) clamp(1.5rem, 5vw, 3rem);
  padding: clamp(1.5rem, 6vw, 3.5rem);
  border-radius: clamp(1.5rem, 4vw, 2.25rem);
  background: var(--lime);
  color: var(--ink);
}

.cta__title {
  font-size: clamp(2rem, 8vw, 3.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.cta__text {
  max-width: 34rem;
  margin-top: 0.875rem;
  font-size: 1.125rem;
}

.cta__action {
  margin-top: 1.5rem;
}

.button--ink {
  background: var(--ink);
  color: var(--white);
}

.button--ink:hover {
  color: var(--white);
  box-shadow: 0 0 0 3px rgba(14, 14, 14, 0.25);
}

.button--ink:focus-visible {
  outline-color: var(--ink);
}

/* Das Feld bleibt beim Sprung von unten nicht am oberen Rand kleben */
#waitlist {
  scroll-margin-top: 1.5rem;
}

/* Einblenden beim Hineinscrollen. Die Klasse setzt site.js nur auf Elemente, die beim Laden noch
   unter dem Bildschirm liegen: Ohne Skript und bei „weniger Bewegung“ steht alles einfach da. */
.reveal {
  opacity: 0;
  transform: translate3d(0, 1.25rem, 0);
  transition: opacity 0.7s ease, transform 0.7s var(--ease);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Schmale Seiten: Bestätigen, Abmelden, Hinweise, Rechtliches */

.narrow {
  width: 100%;
  max-width: 40rem;
  margin-block: auto;
  padding-block: 2.5rem 4rem;
}

.narrow--legal {
  margin-block: 0;
}

.narrow__title {
  margin-bottom: 1rem;
  font-size: clamp(2rem, 7vw, 3rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.narrow__text {
  max-width: 34rem;
  color: var(--muted);
}

.narrow__text + .narrow__text {
  margin-top: 0.75rem;
}

.narrow__action {
  margin-top: 1.75rem;
}

.text-link {
  display: inline-block;
  padding-block: 0.375rem;
  font-weight: 800;
}

/* Ab 30rem steht der Knopf neben dem Feld, die Meldung darunter über die ganze Breite */
@media (min-width: 30rem) {
  .signup__row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .signup__error {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (min-width: 48rem) {
  .site-header {
    padding-block: 1.75rem;
  }

  .site-header__logo img {
    height: 1.875rem;
  }

  .hero {
    gap: 2rem;
  }

  .hero__title {
    font-size: clamp(3rem, 7vw, 3.75rem);
  }

  .stage {
    --radius-stage: 1.75rem;
  }
}

/* Breit: der Satz über die ganze Breite, darunter links die Bühne und rechts das Feld.
   Der erste Bildschirm füllt das Fenster; der Hinweis nach unten sitzt an seinem Fuß. */
@media (min-width: 62rem) {
  .first {
    min-height: calc(100vh - 5.375rem);
    min-height: calc(100svh - 5.375rem);
  }

  .hero {
    flex: 1 0 auto;
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
    grid-template-areas:
      "intro intro"
      "media signup";
    align-content: center;
    column-gap: clamp(2rem, 4vw, 3.5rem);
    row-gap: 2rem;
    padding-block: 0.5rem 1.5rem;
  }

  .hero__intro {
    grid-area: intro;
  }

  .hero__signup {
    grid-area: signup;
    align-self: center;
  }

  .hero__media {
    grid-area: media;
    align-self: center;
  }

  .hero__title {
    font-size: clamp(3.25rem, 5vw, 4.5rem);
    line-height: 1;
    letter-spacing: -0.03em;
  }

  .stage {
    aspect-ratio: 16 / 10;
  }

  .stage--video {
    --stage-h: min(62vh, 34rem);
    aspect-ratio: auto;
  }

  .stage--9-16 { aspect-ratio: 9 / 16; }
  .stage--4-5 { aspect-ratio: 4 / 5; }
  .stage--1-1 { aspect-ratio: 1 / 1; }
  .stage--4-3 { aspect-ratio: 4 / 3; }
  .stage--16-9 { aspect-ratio: 16 / 9; }

  .stack {
    width: min(40%, 15rem);
  }

  /* Neben der Bühne steht der Knopf unter dem Feld, nicht daneben */
  .hero__signup .signup__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__signup .signup__error {
    grid-row: auto;
  }

  .first__more {
    padding-bottom: 1.75rem;
  }
}

/* Mit Bewegung: Der Sprung zum Feld gleitet. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Weniger Bewegung gewünscht: alles steht still, vom Video bleibt das Standbild */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .stage__video,
  canvas.stage__glow {
    display: none;
  }

  .stage__still {
    display: block;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .stage--video:has(.stack) {
    display: grid;
    aspect-ratio: 16 / 10;
  }
}

/* Verkauf (Etappe 8): Weg zum Kauf, Checkout, Rückkehrseite, Downloads, Anleitung, Hilfe.
   Dieselbe Sprache wie die Startseite: Tinte als Grund, Lime für das, was zählt, weiche Ecken. */

.button--wide {
  width: 100%;
}

.button--small {
  min-height: 2.75rem;
  padding: 0.5rem 1.125rem;
  font-size: 0.9375rem;
  flex: none;
}

/* Zweiter Knopf: Rahmen statt Fläche */
.button--quiet {
  background: transparent;
  color: var(--white);
  box-shadow: inset 0 0 0 2px var(--line);
}

.button--quiet:hover {
  color: var(--white);
  box-shadow: inset 0 0 0 2px var(--white);
}

/* Startseite, Verkauf offen: der Weg zum Kauf steht dort, wo sonst das Feld der Warteliste steht */
.buy__title {
  margin-bottom: 0.875rem;
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

#buy {
  scroll-margin-top: 1.5rem;
}

/* Checkout: oben die Paketwahl als Karten, darunter das Formular */
.checkout {
  width: 100%;
  max-width: 62rem;
  margin-inline: auto;
  padding-block: 1.5rem 4rem;
}

.checkout__form {
  display: grid;
  gap: 2rem;
  min-width: 0;
  margin-top: 1.5rem;
}

.checkout__fields {
  display: grid;
  gap: 1.375rem;
  width: 100%;
  max-width: 36rem;
  min-width: 0;
}

/* Paketwahl: je Paket (oder Gruppe von Paketen) eine Karte mit Name, Preis, Inhalt, Lizenz */
.packs {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.packs > legend {
  margin-bottom: 0.875rem;
  padding: 0;
  font-size: 1.25rem;
}

.packs > .signup__error {
  margin-bottom: 0.875rem;
}

.packs > .field__hint {
  max-width: none;
  margin-top: 0.875rem;
}

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

.pack {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.375rem;
  padding: 1.25rem 1.25rem 1.375rem;
  border-radius: var(--radius-soft);
  background: var(--tile);
  box-shadow: inset 0 0 0 2px var(--line);
  cursor: pointer;
}

.pack--choice {
  cursor: default;
}

/* Schmal steht das empfohlene Paket zuerst; breit stehen die Karten in der Reihenfolge der Konfiguration nebeneinander */
.pack--recommended {
  order: -1;
}

/* Die gewählte Karte trägt einen Rand in Lime (ohne :has() zeigt der Auswahlknopf selbst, was gewählt ist) */
.pack:has(input:checked) {
  box-shadow: inset 0 0 0 3px var(--lime);
}

.pack__radio {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 1.375rem;
  height: 1.375rem;
  margin: 0;
  accent-color: var(--lime);
  cursor: pointer;
}

.pack__badge {
  justify-self: start;
  margin-bottom: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: 99rem;
  background: var(--lime);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 1.2;
}

.pack__name {
  padding-right: 2.25rem;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.pack__price {
  margin-block: 0.125rem 0.375rem;
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.pack--recommended .pack__price {
  color: var(--lime);
}

.pack__line {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--muted);
}

.pack__choose {
  margin-top: 0.625rem;
  font-size: 0.9375rem;
  font-weight: 800;
}

/* Die Branchen einer Karte: Auswahlknöpfe in Form von Marken, der Knopf selbst liegt unsichtbar darüber */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.chip__radio {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.chip__text {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 0.875rem;
  border-radius: 99rem;
  box-shadow: inset 0 0 0 2px var(--line);
  font-size: 0.9375rem;
  font-weight: 800;
  line-height: 1.2;
}

.chip__radio:checked + .chip__text {
  background: var(--lime);
  color: var(--ink);
  box-shadow: none;
}

.chip__radio:focus-visible + .chip__text {
  outline: 3px solid var(--white);
  outline-offset: 3px;
}

/* Direkt vor dem Kaufknopf: was gewählt ist und was es kostet (füllt site.js) */
.order-total {
  display: grid;
  gap: 0.5rem;
  padding: 1rem 1.125rem;
  border-radius: var(--radius);
  background: var(--lime);
  color: var(--ink);
}

.order-total[hidden] {
  display: none;
}

.order-total__name {
  font-weight: 800;
  line-height: 1.3;
}

.order-total__sum {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.order-total__sum strong {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.field {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

.field__label {
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.25;
}

.field__hint {
  max-width: 36rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--muted);
}

.field__hint a,
.check__text a,
.downloads__text a,
.doc__more a,
.faq__answer a,
.legal-text a {
  color: var(--white);
}

.field__hint a:hover,
.check__text a:hover,
.downloads__text a:hover,
.doc__more a:hover,
.faq__answer a:hover,
.legal-text a:hover {
  color: var(--lime);
}

/* Auswahl des Landes: das Feld der Seite, der Pfeil ist gezeichnet (kein Bild) */
.field__select {
  position: relative;
}

.field__select select {
  padding-right: 2.75rem;
  cursor: pointer;
}

.field__select::after {
  content: "";
  position: absolute;
  right: 1.125rem;
  top: 50%;
  width: 0.625rem;
  height: 0.625rem;
  border-right: 2.5px solid var(--ink);
  border-bottom: 2.5px solid var(--ink);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* Zustimmung: großes Kästchen, der ganze Satz ist die Tippfläche */
.check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.875rem;
  align-items: start;
  padding: 1rem 1.125rem;
  border-radius: var(--radius);
  background: var(--tile);
  line-height: 1.5;
  cursor: pointer;
}

.check__box {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  accent-color: var(--lime);
  cursor: pointer;
}

.check__box[aria-invalid="true"] {
  outline: 3px solid var(--white);
  outline-offset: 2px;
}

.checkout__submit {
  margin-top: 0.25rem;
}

/* Hinweis in Lime: welche Datei in Shopify hochgeladen wird */
.callout {
  padding: 1.125rem 1.25rem;
  border-radius: var(--radius-soft);
  background: var(--lime);
  color: var(--ink);
  font-weight: 800;
  line-height: 1.4;
}

.callout p {
  font-weight: 400;
}

.callout .callout__title {
  margin-bottom: 0.25rem;
  font-weight: 800;
}

/* Download-Seite */
.downloads,
.doc {
  width: 100%;
  max-width: 46rem;
  margin-inline: auto;
  padding-block: 1.5rem 4rem;
}

.downloads .eyebrow {
  margin-bottom: 0.75rem;
}

.downloads__pack {
  margin-bottom: 1.25rem;
  color: var(--muted);
}

.downloads__pack strong {
  color: var(--white);
}

.downloads__validity {
  margin-top: 1rem;
  color: var(--muted);
}

.downloads__group {
  margin-top: 2.5rem;
}

.downloads__title {
  margin-bottom: 0.875rem;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.downloads__text {
  max-width: 36rem;
  margin-bottom: 1rem;
  color: var(--muted);
}

.downloads > .downloads__text {
  margin-top: 2.5rem;
}

.files {
  display: grid;
  gap: 0.5rem;
  padding: 0;
  list-style: none;
}

.file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1rem 0.875rem 1.125rem;
  border-radius: var(--radius);
  background: var(--tile);
}

.file__body {
  min-width: 0;
}

.file__name {
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.file__meta {
  margin-top: 0.125rem;
  font-size: 0.875rem;
  color: var(--muted);
}

/* Anleitung und Hilfe */
.doc__intro {
  max-width: 36rem;
  font-size: 1.125rem;
  color: var(--muted);
}

.doc__more {
  margin-top: 2rem;
  color: var(--muted);
}

.steps {
  display: grid;
  gap: 0.75rem;
  margin-block: 2rem 1.5rem;
  padding: 0;
  list-style: none;
}

.step {
  position: relative;
  padding: 1.25rem 1.25rem 1.25rem 4.5rem;
  border-radius: var(--radius-soft);
  background: var(--tile);
}

.step__nr {
  position: absolute;
  left: 1.25rem;
  top: 1.125rem;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--lime);
  color: var(--ink);
  font-weight: 800;
  line-height: 1;
}

.step__title {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.step__text {
  margin-top: 0.375rem;
  color: var(--muted);
}

.faq {
  margin-top: 2rem;
}

.faq__item {
  padding-block: 1.25rem;
  border-top: 1px solid var(--line);
  scroll-margin-top: 1.5rem;
}

.faq__question {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.faq__answer {
  max-width: 40rem;
  margin-top: 0.5rem;
  color: var(--muted);
}

/* Gelieferte Rechtstexte: Absätze und Zwischenüberschriften */
.legal-text {
  max-width: 40rem;
  color: var(--muted);
}

.legal-text h2 {
  margin-block: 1.75rem 0.5rem;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--white);
}

.legal-text p + p {
  margin-top: 0.75rem;
}

/* Nachgestellte Zahlungsseite der lokalen Vorschau */
.fake-pay {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

.fake-pay__buttons {
  display: grid;
  gap: 0.5rem;
}

@media (min-width: 30rem) {
  .button--wide {
    width: auto;
    min-width: 16rem;
  }

  .checkout__submit .button--wide {
    width: 100%;
  }
}

@media (min-width: 56rem) {
  .packs__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pack--recommended {
    order: 0;
  }
}

/* Unter dem ersten Bildschirm (06.10.2026): die Vorführshops als Clips, woher die Themes kommen, was im
   Theme fürs Verkaufen steckt, der Preis, drei Schritte, sicher kaufen, Fragen. Jeder Teil ist ein „Akt“
   (.act) mit großer Überschrift. Grafiken sind aus Flächen und Linien gezeichnet (kein Bild, keine fremde
   Datei) und stehen ohne Skript und bei „weniger Bewegung“ in ihrem fertigen Zustand da: Nur wo site.js
   .reveal setzt, beginnen sie im Ausgangszustand und laufen beim Hineinscrollen einmal ab (.is-in). */

.act {
  padding-top: clamp(4.5rem, 11vw, 9rem);
}

.act__head {
  max-width: 60rem;
}

.act__title {
  font-size: clamp(2.25rem, 6.4vw, 4.5rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.act__text {
  max-width: 42rem;
  margin-top: 1.25rem;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  color: var(--muted);
}

/* Kopf, dritte Fassung (06.10.2026): Der Film ist das Ereignis. Schmal läuft er randlos über die ganze Breite.
   Breit steht oben links der Satz, rechts daneben Feld oder Kaufknopf, darunter der Film über die ganze
   Inhaltsbreite. Er wird nie höher, als der erste Bildschirm hergibt: Dann schneidet er oben und unten wenig ab,
   statt schmaler zu werden. Diese Regeln gelten für die Schleife im Querformat (stage--16-9). */
@media (max-width: 47.9375rem) {
  .stage--video.stage--16-9 {
    width: calc(100% + 2 * var(--gutter));
    margin-inline: calc(var(--gutter) * -1);
    border-inline: 0;
    border-radius: 0;
  }

  .stage--video.stage--16-9 > .stage__bar {
    right: var(--gutter);
    left: var(--gutter);
  }
}

@media (min-width: 62rem) {
  .first {
    min-height: 0;
  }

  .hero {
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
    grid-template-areas:
      "intro signup"
      "media media";
    align-content: start;
    align-items: end;
    column-gap: clamp(2rem, 4vw, 3.5rem);
    row-gap: 1.75rem;
    padding-block: 0 0.5rem;
  }

  /* Satz und Feld liegen über dem Leuchten des Films. */
  .hero__intro,
  .hero__signup {
    position: relative;
    z-index: 1;
  }

  .hero__intro .eyebrow {
    margin-bottom: 0.875rem;
  }

  .hero__title {
    font-size: clamp(2.5rem, 3.4vw, 3.25rem);
    line-height: 1.02;
  }

  .hero__signup {
    align-self: end;
  }

  /* Neben dem Satz steht der Knopf wieder neben dem Feld: Die Zeile bleibt flach, der Film rückt nach oben. */
  .hero__signup .signup__row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .hero__signup .signup__error {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .hero__signup .signup__label {
    font-size: 1rem;
  }

  .hero__signup .signup__hint {
    margin-top: 0.625rem;
    font-size: 0.8125rem;
    line-height: 1.45;
  }

  .hero__signup .buy__title {
    margin-bottom: 0.625rem;
  }

  .stage--video.stage--16-9 {
    width: 100%;
    max-height: max(26rem, calc(100vh - 18.75rem));
    max-height: max(26rem, calc(100svh - 18.75rem));
  }

  /* Wird der Film beschnitten, dann unten: Der Kopf des Shops oben bleibt ganz. */
  .stage--video.stage--16-9 > .stage__video,
  .stage--video.stage--16-9 > img.stage__still,
  .stage--video.stage--16-9 > img.stage__glow {
    object-position: 50% 0;
  }
}

/* Teil 1: die Vorführshops. Der Clip ist das Bild: je Shop eine Bühne über die ganze Inhaltsbreite (schmal
   randlos), darunter eine ruhige Leiste mit Marke, Branche, Paket und den vier Themes. Die Bühnen stehen dicht
   untereinander, wie eine Galerie. */
.showcase__list {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  margin: clamp(2rem, 5vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.demo {
  display: grid;
  gap: 1rem;
}

.demo__screen {
  position: relative;
  min-width: 0;
  margin-inline: calc(var(--gutter) * -1);
  isolation: isolate;
}

/* Leuchten hinter dem Clip: sein Standbild noch einmal, weich gezeichnet (nur gemalt, die Seite wird nicht breiter). */
.demo__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: inherit;
  object-fit: cover;
  opacity: 0.3;
  filter: blur(3rem) saturate(1.35);
  transform: translate3d(0, 1%, 0) scale(0.98);
  pointer-events: none;
}

.clip {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-block: 1px solid var(--line);
  border-radius: inherit;
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(212, 255, 58, 0.13), rgba(212, 255, 58, 0) 60%),
    radial-gradient(70% 90% at 0% 100%, rgba(74, 74, 72, 0.5), rgba(74, 74, 72, 0) 70%),
    var(--ink);
  box-shadow: 0 2rem 4rem -2rem rgba(0, 0, 0, 0.9);
}

.clip__poster,
.clip__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Der Clip liegt über dem Standbild und erscheint erst, wenn er läuft. Ohne Standbild zeigt er seinen Anfang. */
.clip__video {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.clip.is-playing > .clip__video,
.clip--bare > .clip__video {
  opacity: 1;
}

.clip.is-broken > .clip__video {
  opacity: 0;
}

.clip__toggle {
  position: absolute;
  right: 0.875rem;
  bottom: 0.875rem;
  margin: 0;
}

/* Ohne Standbild: eine ruhige Fläche mit den drei Karten des Zeichens (grau, weiß, lime). */
.clip--bare {
  display: grid;
  place-items: center;
}

.clip__mark {
  position: relative;
  width: min(22%, 6.5rem);
  aspect-ratio: 1;
}

.clip__mark span {
  position: absolute;
  width: 74.36%;
  height: 74.36%;
  border-radius: 12.07%;
}

.clip__mark span:nth-child(1) { top: 0; left: 25.64%; background: var(--grey); }
.clip__mark span:nth-child(2) { top: 12.82%; left: 12.82%; background: var(--white); }
.clip__mark span:nth-child(3) { top: 25.64%; left: 0; background: var(--lime); }

/* Leiste unter der Bühne: links wer (Marke, Branche), rechts was (Paket, Themes) */
.demo__bar {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.875rem;
  min-width: 0;
}

.demo__who,
.demo__what {
  min-width: 0;
}

.demo__tag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.625rem;
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--muted);
}

.demo__badge {
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--line);
  border-radius: 62.5rem;
  color: var(--white);
  font-weight: 800;
  letter-spacing: 0.01em;
}

.demo__title {
  margin-top: 0.625rem;
  font-size: clamp(1.75rem, 4.6vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.demo__second {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: var(--muted);
}

.demo__pack {
  color: var(--lime);
  font-weight: 800;
  line-height: 1.3;
}

.demo__pack a {
  color: inherit;
}

.demo__pack a:hover {
  color: var(--white);
}

.demo__themes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0.625rem 0 0;
  padding: 0;
  list-style: none;
}

.demo__theme {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5625rem 0.75rem;
  border-radius: 0.75rem;
  background: var(--tile);
  font-size: 0.9375rem;
  line-height: 1.25;
}

.demo__nr {
  flex: none;
  color: var(--lime);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Direkt unter den Clips: Was zu sehen ist, sind Beispielinhalte. Deutlich, nicht versteckt. */
.honest {
  display: grid;
  gap: 0.75rem 2.5rem;
  margin-top: clamp(3rem, 8vw, 6rem);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid rgba(212, 255, 58, 0.45);
  border-radius: var(--radius-soft);
  background: rgba(212, 255, 58, 0.06);
}

.honest__title {
  font-size: clamp(1.5rem, 3.4vw, 2.125rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.honest__text {
  max-width: 44rem;
  font-size: 1.0625rem;
}

/* Teil 2: woher die Themes kommen. Eine große Fläche mit Tiefe: die Aussage über die ganze Breite, darunter
   links der Satz, rechts die Grafik (viele Shops laufen in die drei Karten des Zeichens). */
.proof__panel {
  position: relative;
  display: grid;
  gap: 1.75rem 3rem;
  overflow: hidden;
  padding: clamp(2rem, 6vw, 5.5rem) clamp(1.5rem, 5vw, 5rem);
  border: 1px solid var(--line);
  border-radius: clamp(1.5rem, 4vw, 2.5rem);
  background:
    radial-gradient(70% 90% at 100% 100%, rgba(212, 255, 58, 0.2), rgba(212, 255, 58, 0) 62%),
    radial-gradient(60% 80% at 0% 0%, rgba(74, 74, 72, 0.6), rgba(74, 74, 72, 0) 70%),
    var(--ink);
}

/* Feines Raster im Hintergrund, zur Grafik hin sichtbar */
.proof__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem;
  opacity: 0.55;
  -webkit-mask-image: radial-gradient(75% 85% at 80% 75%, black, transparent 78%);
  mask-image: radial-gradient(75% 85% at 80% 75%, black, transparent 78%);
  pointer-events: none;
}

.proof__head,
.proof__text,
.proof__art {
  position: relative;
  min-width: 0;
}

.proof__title {
  font-size: clamp(2.5rem, 7.4vw, 6.25rem);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.045em;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.proof__mark {
  display: block;
  color: var(--lime);
}

.proof__text {
  max-width: 32rem;
  font-size: clamp(1.0625rem, 1.6vw, 1.375rem);
  color: var(--muted);
}

.funnel {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.funnel__path {
  fill: none;
  stroke: rgba(212, 255, 58, 0.55);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.funnel__card {
  fill: rgba(255, 255, 255, 0.06);
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 1.25;
}

.funnel__bit,
.funnel__dot {
  fill: rgba(255, 255, 255, 0.42);
}

.funnel__bit--soft,
.funnel__dot {
  fill: rgba(255, 255, 255, 0.2);
}

.funnel__back { fill: var(--grey); }
.funnel__mid { fill: var(--white); }
.funnel__front { fill: var(--lime); }
.funnel__ink { fill: var(--ink); }
.funnel__ink--soft { fill-opacity: 0.4; }

.funnel__target,
.funnel__shop {
  transform-box: fill-box;
  transform-origin: center;
}

.reveal .funnel__shop { opacity: 0; transform: translate3d(-0.75rem, 0, 0); }
.reveal .funnel__path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.reveal .funnel__target { opacity: 0; transform: scale(0.8); }

.reveal.is-in .funnel__shop {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease 0.2s, transform 0.7s var(--ease) 0.2s;
}

.reveal.is-in .funnel__shop:nth-of-type(2n) { transition-delay: 0.32s; }
.reveal.is-in .funnel__shop:nth-of-type(3n) { transition-delay: 0.44s; }

.reveal.is-in .funnel__path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.1s var(--ease) 0.6s;
}

.reveal.is-in .funnel__target {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease 1.3s, transform 0.8s cubic-bezier(0.2, 1.4, 0.4, 1) 1.3s;
}

/* Teil 3: Bausteine im Theme. Kacheln in einem Raster; jede beginnt mit ihrer Abbildung: ein Geräte- oder
   Fensterrahmen aus CSS, darin Produktbilder aus den Vorführshops, obenauf die Bedienelemente (helle Flächen
   mit Tinte, wie ein Shop). Es sind Abbildungen, keine Bildschirmfotos. */
.parts {
  display: grid;
  gap: 0.75rem;
  margin: clamp(2rem, 5vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.part {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0.75rem 0.75rem 1.5rem;
  border-radius: 1.5rem;
  background: var(--tile);
}

.part__art {
  position: relative;
  display: grid;
  place-items: center;
  height: 17rem;
  margin-bottom: 1.25rem;
  overflow: hidden;
  border-radius: 1rem;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 70%),
    rgba(14, 14, 14, 0.72);
}

.part__tag {
  align-self: flex-start;
  margin-inline: 0.5rem;
  padding: 0.1875rem 0.5625rem;
  border-radius: 62.5rem;
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 1.3;
}

.part__tag--all {
  background: rgba(212, 255, 58, 0.14);
  box-shadow: none;
  color: var(--lime);
}

.part__title {
  margin: 0.75rem 0.5rem 0;
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.part__text {
  margin: 0.5rem 0.5rem 0;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* Bausteine der Abbildungen: Linien für Text, Name und Preis eines Beispielprodukts, Knopf, Schalter */
.g-line {
  display: block;
  height: 0.375rem;
  border-radius: 62.5rem;
  background: rgba(14, 14, 14, 0.16);
}

.g-line--s { width: 34%; }
.g-line--m { width: 56%; }
.g-line--l { width: 82%; }

.m-name,
.m-price,
.m-label {
  color: var(--ink);
  font-size: 0.8125rem;
  line-height: 1.2;
}

.m-name {
  font-weight: 800;
  letter-spacing: -0.01em;
}

.m-label {
  font-size: 0.6875rem;
  font-weight: 800;
  opacity: 0.6;
}

.m-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.625rem;
  background: var(--ink);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
}

.m-button--full {
  display: flex;
  width: 100%;
}

.m-count {
  display: grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding-inline: 0.3125rem;
  border-radius: 1rem;
  background: var(--lime);
  color: var(--ink);
  font-size: 0.6875rem;
  font-weight: 800;
  line-height: 1;
}

.g-switch {
  position: relative;
  display: block;
  width: 2.25rem;
  height: 1.25rem;
  border-radius: 1rem;
  background: var(--lime);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}

.g-switch::after {
  content: "";
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--ink);
  transform: translate3d(1rem, 0, 0);
}

/* Kaufleiste: ein Handy, die Produktseite ist ein Stück gescrollt, unten steht die Leiste mit Preis und Kaufknopf. */
.part--bar .part__art {
  place-items: end center;
  height: 22rem;
  background:
    radial-gradient(70% 45% at 50% 100%, rgba(212, 255, 58, 0.2), rgba(212, 255, 58, 0) 72%),
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 70%),
    rgba(14, 14, 14, 0.72);
}

.m-phone {
  position: relative;
  width: 14rem;
  aspect-ratio: 9 / 17.5;
  margin-bottom: 1.125rem;
  overflow: hidden;
  border: 0.4375rem solid var(--ink);
  border-radius: 2.25rem;
  outline: 1.5px solid rgba(255, 255, 255, 0.3);
  background: var(--white);
  box-shadow: 0 1.5rem 3rem -1rem rgba(0, 0, 0, 0.9);
}

.m-phone__screen {
  display: grid;
  align-content: start;
  gap: 0.4375rem;
  padding: 0 0.75rem;
  transform: translate3d(0, -24%, 0);
}

.m-phone__photo {
  width: calc(100% + 1.5rem);
  max-width: none;
  margin: 0 -0.75rem 0.25rem;
}

.m-phone__screen > .m-name {
  font-size: 1.0625rem;
}

.m-phone__screen > .m-price {
  margin-bottom: 0.375rem;
  font-size: 0.9375rem;
}

.m-phone__more {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.375rem;
}

.m-phone__tile {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 0.875rem;
  background: rgba(14, 14, 14, 0.06);
}

.m-phone__bottle {
  width: auto;
  height: 80%;
}

.m-buybar {
  position: absolute;
  right: 0.375rem;
  bottom: 0.375rem;
  left: 0.375rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4375rem 0.4375rem 0.4375rem 0.625rem;
  border-radius: 1.375rem;
  background: var(--white);
  box-shadow: 0 0 0 2px var(--lime), 0 -0.75rem 1.5rem rgba(0, 0, 0, 0.28);
}

.m-buybar__thumb {
  flex: none;
  width: auto;
  height: 2.25rem;
}

.m-buybar__text {
  flex: 1;
  min-width: 0;
}

.m-buybar__text > .m-name {
  display: none;
}

.m-buybar__text > .m-price {
  font-size: 0.875rem;
  font-weight: 800;
  white-space: nowrap;
}

.m-buybar .m-button {
  flex: 0 1 auto;
  min-width: 0;
  min-height: 2.25rem;
  padding-inline: 0.5625rem;
  border-radius: 1rem;
  font-size: 0.6875rem;
}

.reveal .m-phone__screen { transform: none; }
.reveal .m-buybar { transform: translate3d(0, 170%, 0); }

.reveal.is-in .m-phone__screen {
  transform: translate3d(0, -24%, 0);
  transition: transform 1.3s var(--ease) 0.45s;
}

.reveal.is-in .m-buybar {
  transform: none;
  transition: transform 0.7s cubic-bezier(0.2, 1.3, 0.4, 1) 1.15s;
}

/* Variantenwahl: ein Fenster, links das Produkt, rechts Farbfelder, Größen und Kaufknopf */
.m-window {
  width: calc(100% - 1.5rem);
  max-width: 36rem;
  overflow: hidden;
  border-radius: 1rem;
  background: var(--white);
  box-shadow: 0 1.5rem 3rem -1rem rgba(0, 0, 0, 0.9);
}

.m-window--split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.m-window__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.m-pick {
  display: grid;
  align-content: center;
  gap: 0.4375rem;
  min-width: 0;
  padding: 0.75rem 0.625rem;
}

.m-pick > .m-name {
  font-size: 0.9375rem;
}

.m-pick__row {
  display: flex;
  gap: 0.3125rem;
}

.m-swatch {
  flex: none;
  width: 1.625rem;
  height: 1.625rem;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(14, 14, 14, 0.16);
}

.m-swatch__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.7);
}

.m-swatch.is-on {
  box-shadow: 0 0 0 2px var(--white), 0 0 0 3.5px var(--ink);
}

.m-size {
  flex: 1;
  display: grid;
  place-items: center;
  height: 1.75rem;
  border-radius: 0.4375rem;
  box-shadow: inset 0 0 0 1.5px rgba(14, 14, 14, 0.18);
  color: var(--ink);
  font-size: 0.6875rem;
  font-weight: 800;
  line-height: 1;
}

.m-size.is-on {
  background: var(--ink);
  box-shadow: none;
  color: var(--white);
}

.m-pick .m-button {
  margin-top: 0.25rem;
}

.reveal .m-swatch.is-on { box-shadow: 0 0 0 1px rgba(14, 14, 14, 0.16); }
.reveal .m-size.is-on { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(14, 14, 14, 0.18); color: var(--ink); }
.reveal .m-pick .m-button { opacity: 0.35; }

.reveal.is-in .m-swatch.is-on {
  box-shadow: 0 0 0 2px var(--white), 0 0 0 3.5px var(--ink);
  transition: box-shadow 0.35s ease 0.6s;
}

.reveal.is-in .m-size.is-on {
  background: var(--ink);
  box-shadow: none;
  color: var(--white);
  transition: background 0.35s ease 0.95s, color 0.35s ease 0.95s, box-shadow 0.35s ease 0.95s;
}

.reveal.is-in .m-pick .m-button {
  opacity: 1;
  transition: opacity 0.4s ease 1.3s;
}

/* Drawer: dahinter die Seite (ein Produkt, eine Produktliste), darüber fährt die helle Fläche herein
   (Warenkorb von rechts, Filter von links). */
.m-scene {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.m-scene__back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

.m-scene__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  height: 100%;
  padding: 0.75rem;
  opacity: 0.55;
}

.m-scene__card {
  width: 100%;
  height: 100%;
  border-radius: 0.625rem;
  object-fit: cover;
}

.m-drawer {
  position: absolute;
  top: 0.5rem;
  bottom: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5625rem;
  width: min(72%, 15rem);
  padding: 0.75rem;
  border-radius: 0.875rem;
  background: var(--white);
  box-shadow: 0 0 2.5rem rgba(0, 0, 0, 0.7);
}

.m-drawer--right { right: 0.5rem; }
.m-drawer--left { left: 0.5rem; }

.m-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(14, 14, 14, 0.12);
}

.m-drawer__head > .m-name {
  font-size: 0.9375rem;
}

.m-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.m-row__thumb {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.75rem;
  border-radius: 0.5rem;
  background: rgba(14, 14, 14, 0.06);
}

.m-row__image {
  width: auto;
  height: 2.25rem;
}

.m-row__text {
  flex: 1;
  display: grid;
  gap: 0.125rem;
  min-width: 0;
}

.m-qty {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.4375rem;
  box-shadow: inset 0 0 0 1.5px rgba(14, 14, 14, 0.18);
  color: var(--ink);
  font-size: 0.6875rem;
  font-weight: 800;
  line-height: 1;
}

.m-drawer > .m-button {
  margin-top: auto;
}

.m-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 1.375rem;
}

.m-check > .g-line {
  flex: none;
  width: 48%;
  background: rgba(14, 14, 14, 0.26);
}

.m-check > .g-line--l {
  width: 64%;
}

.m-check__box {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 0.3125rem;
  box-shadow: inset 0 0 0 1.5px rgba(14, 14, 14, 0.4);
}

.m-check.is-on > .m-check__box {
  background: var(--lime);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}

/* Preisspanne im Filter: eine Linie mit zwei Griffen */
.m-range {
  position: relative;
  display: block;
  height: 0.25rem;
  margin: auto 0.375rem 0.5rem;
  border-radius: 1rem;
  background: linear-gradient(90deg, rgba(14, 14, 14, 0.14) 18%, var(--ink) 18%, var(--ink) 72%, rgba(14, 14, 14, 0.14) 72%);
}

.m-range::before,
.m-range::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0.875rem;
  height: 0.875rem;
  margin: -0.4375rem 0 0 -0.4375rem;
  border-radius: 50%;
  background: var(--white);
  box-shadow: inset 0 0 0 2px var(--ink);
}

.m-range::before { left: 18%; }
.m-range::after { left: 72%; }

.reveal .m-drawer--right { transform: translate3d(118%, 0, 0); }
.reveal .m-drawer--left { transform: translate3d(-118%, 0, 0); }
.reveal .m-scene__back,
.reveal .m-scene__grid { opacity: 1; }

.reveal.is-in .m-drawer {
  transform: none;
  transition: transform 0.8s var(--ease) 0.55s;
}

.reveal.is-in .m-scene__back { opacity: 0.5; transition: opacity 0.6s ease 0.55s; }
.reveal.is-in .m-scene__grid { opacity: 0.55; transition: opacity 0.6s ease 0.55s; }

/* Mix-Box: sechs Plätze, vier sind gefüllt; darunter die Sorten zum Antippen */
.m-mix {
  display: grid;
  justify-items: center;
  gap: 0.875rem;
}

.m-mix__box {
  display: grid;
  grid-template-columns: repeat(6, 2.5rem);
  gap: 0.4375rem;
  padding: 0.625rem;
  border-radius: 1rem;
  background: var(--white);
  box-shadow: 0 1.5rem 3rem -1rem rgba(0, 0, 0, 0.9);
}

.m-slot {
  display: grid;
  place-items: end center;
  height: 6rem;
  border: 1.5px dashed rgba(14, 14, 14, 0.28);
  border-radius: 0.625rem;
}

.m-slot.is-full {
  border-color: transparent;
  background: rgba(14, 14, 14, 0.06);
}

.m-slot__image {
  width: auto;
  height: 5.25rem;
  margin-bottom: 0.25rem;
}

.m-mix__pick {
  display: flex;
  gap: 0.75rem;
}

.m-pickable {
  position: relative;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}

.m-pickable__image {
  width: auto;
  height: 2.25rem;
}

.m-plus {
  position: absolute;
  right: -0.25rem;
  bottom: -0.125rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: var(--lime);
}

.m-plus::before,
.m-plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.5rem;
  height: 2px;
  margin: -1px 0 0 -0.25rem;
  border-radius: 2px;
  background: var(--ink);
}

.m-plus::after {
  transform: rotate(90deg);
}

.reveal .m-slot__image { opacity: 0; transform: translate3d(0, -1.5rem, 0); }

.reveal.is-in .m-slot__image {
  opacity: 1;
  transform: none;
  transition: opacity 0.3s ease 0.5s, transform 0.55s cubic-bezier(0.3, 1.5, 0.45, 1) 0.5s;
}

.reveal.is-in .m-slot:nth-child(2) > .m-slot__image { transition-delay: 0.72s; }
.reveal.is-in .m-slot:nth-child(3) > .m-slot__image { transition-delay: 0.94s; }
.reveal.is-in .m-slot:nth-child(4) > .m-slot__image { transition-delay: 1.16s; }

/* Routine: vier Schritte mit ihren Produkten, darunter Summe und ein Knopf für alles */
.m-routine {
  display: grid;
  gap: 0.625rem;
  width: calc(100% - 1.5rem);
  max-width: 25rem;
}

.m-routine__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4375rem;
}

.m-step {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 0.75rem;
}

.m-step__image {
  width: 100%;
}

.m-step__nr {
  position: absolute;
  top: 0.375rem;
  left: 0.375rem;
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  font-size: 0.6875rem;
  font-weight: 800;
  line-height: 1;
}

.m-routine__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4375rem 0.4375rem 0.4375rem 0.875rem;
  border-radius: 0.875rem;
  background: var(--white);
}

.m-routine__foot > .m-price {
  font-size: 1rem;
  font-weight: 800;
}

.reveal .m-step { opacity: 0; transform: translate3d(0, 0.875rem, 0); }
.reveal .m-routine__foot { opacity: 0; }

.reveal.is-in .m-step {
  opacity: 1;
  transform: none;
  transition: opacity 0.4s ease 0.45s, transform 0.6s var(--ease) 0.45s;
}

.reveal.is-in .m-step:nth-child(2) { transition-delay: 0.63s; }
.reveal.is-in .m-step:nth-child(3) { transition-delay: 0.81s; }
.reveal.is-in .m-step:nth-child(4) { transition-delay: 0.99s; }

.reveal.is-in .m-routine__foot {
  opacity: 1;
  transition: opacity 0.4s ease 1.3s;
}

/* Vergleich: drei Produkte als Spalten; der Schalter blendet Zeilen aus, in denen alle gleich sind */
.m-table {
  display: grid;
  gap: 0.3125rem;
  width: calc(100% - 1.5rem);
  max-width: 25rem;
  padding: 0.625rem;
  border-radius: 1rem;
  background: var(--white);
  box-shadow: 0 1.5rem 3rem -1rem rgba(0, 0, 0, 0.9);
}

.m-table__row {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 0.375rem;
  padding: 0.4375rem 0.5rem;
  border-radius: 0.5rem;
  background: rgba(14, 14, 14, 0.05);
}

.m-table__row--head {
  align-items: end;
  padding: 0 0 0.25rem;
  background: none;
}

.m-table__switch {
  display: grid;
  gap: 0.3125rem;
  padding-left: 0.25rem;
}

.m-table__image {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 0.625rem;
  object-fit: cover;
}

.m-table__row > .g-line {
  width: 74%;
  background: rgba(14, 14, 14, 0.28);
}

.g-cell {
  justify-self: center;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(14, 14, 14, 0.45);
}

.g-cell.is-yes {
  background: var(--ink);
  box-shadow: none;
}

.m-table__row.is-same {
  opacity: 0.26;
}

.reveal .g-switch { background: rgba(14, 14, 14, 0.14); }
.reveal .g-switch::after { transform: none; }
.reveal .m-table__row.is-same { opacity: 1; }

.reveal.is-in .g-switch {
  background: var(--lime);
  transition: background 0.3s ease 0.7s;
}

.reveal.is-in .g-switch::after {
  transform: translate3d(1rem, 0, 0);
  transition: transform 0.35s var(--ease) 0.7s;
}

.reveal.is-in .m-table__row.is-same {
  opacity: 0.26;
  transition: opacity 0.5s ease 1.05s;
}

/* Gravur: was unten ins Feld getippt wird, steht oben auf dem Ring */
.m-engrave {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  width: calc(100% - 1.5rem);
  max-width: 27rem;
  overflow: hidden;
  border-radius: 1rem;
  background: var(--white);
  box-shadow: 0 1.5rem 3rem -1rem rgba(0, 0, 0, 0.9);
}

.m-engrave__photo {
  position: relative;
}

.m-engrave__image {
  width: 100%;
}

.m-engrave__mark {
  position: absolute;
  top: 26%;
  left: 53%;
  color: rgba(14, 14, 14, 0.62);
  font-size: clamp(0.875rem, 1.6vw, 1.1875rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
  white-space: nowrap;
  transform: translate(-50%, -50%) rotate(-13deg) skewX(-12deg);
}

.m-engrave__form {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.75rem;
}

.m-engrave__field {
  display: flex;
  align-items: center;
  gap: 0.1875rem;
  height: 2.25rem;
  padding-inline: 0.625rem;
  border-radius: 0.5rem;
  box-shadow: inset 0 0 0 1.5px var(--ink);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
}

.m-engrave__caret {
  width: 2px;
  height: 1.125rem;
  background: var(--ink);
}

.reveal .m-engrave__mark { opacity: 0; }
.reveal .m-engrave__field > span:first-child { opacity: 0; }

.reveal.is-in .m-engrave__field > span:first-child {
  opacity: 1;
  transition: opacity 0.3s ease 0.6s;
}

.reveal.is-in .m-engrave__mark {
  opacity: 1;
  transition: opacity 0.6s ease 0.95s;
}

/* Teil 4: der Preis. Links ein einzelnes Theme aus dem Theme Store, rechts das Bundle in Lime. */
.duel {
  display: grid;
  gap: 0.75rem;
  margin-top: clamp(2rem, 5vw, 3.5rem);
}

.duel__side {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border-radius: clamp(1.5rem, 4vw, 2.25rem);
  background: var(--tile);
}

.duel__side--here {
  background: var(--lime);
  color: var(--ink);
}

.duel__label {
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

/* Ein Theme gegen zwanzig: gleich große Kärtchen */
.duel__tiles {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: clamp(0.25rem, 0.8vw, 0.5rem);
  margin-block: 1.5rem auto;
}

.duel__tiles span {
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: clamp(0.25rem, 0.8vw, 0.5rem);
  background: rgba(255, 255, 255, 0.3);
}

.duel__tiles--all span {
  background: var(--ink);
}

/* Jedes Kärtchen ist ein kleines Theme: eine Zeile oben, wie die Karten des Zeichens */
.duel__tiles span::before {
  content: "";
  display: block;
  width: 52%;
  height: 9%;
  margin: 16% 0 0 16%;
  border-radius: 62.5rem;
  background: rgba(255, 255, 255, 0.75);
}

.duel__tiles--all span::before {
  background: var(--lime);
}

.duel__price {
  margin-top: 2rem;
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.duel__side--here .duel__price {
  font-size: clamp(5rem, 17vw, 10rem);
  line-height: 0.82;
  letter-spacing: -0.06em;
  white-space: nowrap;
}

.duel__unit {
  max-width: 24rem;
  margin-top: 0.875rem;
  font-size: 1.0625rem;
  color: var(--muted);
}

.duel__side--here .duel__unit {
  color: var(--ink);
  font-weight: 800;
}

.reveal .duel__tiles span { opacity: 0; transform: scale(0.4); }

.reveal.is-in .duel__tiles span {
  opacity: 1;
  transform: none;
  transition: opacity 0.3s ease 0.4s, transform 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) 0.4s;
}

.reveal.is-in .duel__tiles--all span:nth-child(10n + 2) { transition-delay: 0.47s; }
.reveal.is-in .duel__tiles--all span:nth-child(10n + 3) { transition-delay: 0.54s; }
.reveal.is-in .duel__tiles--all span:nth-child(10n + 4) { transition-delay: 0.61s; }
.reveal.is-in .duel__tiles--all span:nth-child(10n + 5) { transition-delay: 0.68s; }
.reveal.is-in .duel__tiles--all span:nth-child(10n + 6) { transition-delay: 0.75s; }
.reveal.is-in .duel__tiles--all span:nth-child(10n + 7) { transition-delay: 0.82s; }
.reveal.is-in .duel__tiles--all span:nth-child(10n + 8) { transition-delay: 0.89s; }
.reveal.is-in .duel__tiles--all span:nth-child(10n + 9) { transition-delay: 0.96s; }
.reveal.is-in .duel__tiles--all span:nth-child(10n) { transition-delay: 1.03s; }

.value__notes {
  display: grid;
  gap: 0.5rem;
  max-width: 46rem;
  margin-top: 1.5rem;
}

.value__fair {
  font-size: 1.0625rem;
}

.value__source {
  font-size: 0.875rem;
  color: var(--muted);
}

/* Die Pakete, wie im Checkout: Name, Preis, Inhalt, Lizenz */
.offers {
  display: grid;
  gap: 0.75rem;
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
}

.offer {
  display: grid;
  align-content: start;
  gap: 0.375rem;
  padding: 1.25rem 1.25rem 1.375rem;
  border-radius: var(--radius-soft);
  background: var(--tile);
}

.offer--main {
  box-shadow: inset 0 0 0 2px var(--lime);
}

.offer__name {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.offer__price {
  margin-block: 0.125rem 0.375rem;
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.offer--main .offer__price {
  color: var(--lime);
}

.offer__line {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--muted);
}

/* Teil 5: drei Schritte, als weiße Fläche zwischen den dunklen Teilen. Große Ziffern in Lime mit Tinten-Kontur,
   zwischen den Karten ein Pfeil. */
.way {
  margin-top: clamp(4.5rem, 11vw, 9rem);
  padding: clamp(1.75rem, 5vw, 4.5rem) clamp(1.25rem, 5vw, 4.5rem);
  border-radius: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--white);
  color: var(--ink);
}

.way .act__text,
.way__text {
  color: rgba(14, 14, 14, 0.72);
}

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

.way :focus-visible {
  outline-color: var(--ink);
}

.way__list {
  display: grid;
  gap: 2.25rem;
  margin: clamp(2rem, 5vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.way__step {
  position: relative;
  padding: 1.5rem 1.5rem 1.75rem;
  border-radius: 1.5rem;
  background: rgba(14, 14, 14, 0.06);
}

.way__step + .way__step::before {
  content: "";
  position: absolute;
  top: -1.5rem;
  left: 50%;
  width: 0.75rem;
  height: 0.75rem;
  margin-left: -0.375rem;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(45deg);
}

.way__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.way__nr {
  color: var(--ink);
  font-size: clamp(5.5rem, 15vw, 8.5rem);
  font-weight: 800;
  line-height: 0.76;
  letter-spacing: -0.06em;
}

@supports (-webkit-text-stroke: 2px black) {
  .way__nr {
    color: var(--lime);
    -webkit-text-stroke: 2px var(--ink);
  }
}

.way__glyph {
  width: 3rem;
  height: 3rem;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.way__title {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.way__text {
  margin-top: 0.5rem;
}

.way__more {
  margin-top: 1.5rem;
}

.more-link--go::after {
  margin-top: 0;
  transform: rotate(-45deg);
}

.more-link--go:hover::after {
  transform: translateX(0.1875rem) rotate(-45deg);
}

.way .more-link::after {
  border-color: var(--ink);
}

/* Teil 6: sicher kaufen. Eine Tafel mit feinen Linien, je Tatsache ein Zeichen. */
.safe__list {
  display: grid;
  gap: 1px;
  margin: clamp(2rem, 5vw, 3.5rem) 0 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: clamp(1.5rem, 4vw, 2.25rem);
  background: var(--line);
  list-style: none;
}

.safe__point {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: 1rem;
  padding: 1.375rem 1.25rem;
  background: var(--ink);
}

.safe__glyph {
  display: block;
  grid-row: span 2;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.5625rem;
  border-radius: 0.875rem;
  background: rgba(212, 255, 58, 0.12);
  fill: none;
  stroke: var(--lime);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.safe__title {
  font-size: 1.1875rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.safe__text {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* Teil 7: Fragen. Alles steht offen da, nichts ist eingeklappt. */
.asks__list {
  display: grid;
  margin-top: clamp(2rem, 5vw, 3.5rem);
  border-top: 1px solid var(--line);
}

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

.ask__question {
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.ask__answer {
  max-width: 38rem;
  margin-top: 0.625rem;
  color: var(--muted);
}

.asks__more {
  margin-top: 1.5rem;
  color: var(--muted);
}

.ask__answer a,
.asks__more a {
  color: var(--white);
}

.ask__answer a:hover,
.asks__more a:hover {
  color: var(--lime);
}

/* Ab hier steht das Zeichen über dem Text, die Tatsachen nebeneinander. */
@media (min-width: 40rem) {
  .safe__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .safe__point {
    display: block;
    padding: 1.5rem;
  }

  .safe__glyph {
    margin-bottom: 1.125rem;
  }
}

@media (min-width: 48rem) {
  /* Ab hier steht die Bühne eines Vorführshops in der Inhaltsbreite, mit runden Ecken. */
  .demo__screen {
    margin-inline: 0;
    border-radius: var(--radius-stage);
  }

  .clip {
    border: 1px solid var(--line);
  }

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

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

  .part--bar,
  .part--variant {
    grid-column: 1 / -1;
  }

  .m-window--split {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  }

  .m-pick {
    gap: 0.5rem;
    padding: 1rem;
  }

  .m-swatch {
    width: 2rem;
    height: 2rem;
  }

  .m-mix__box {
    grid-template-columns: repeat(6, 2.875rem);
  }

  .duel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 1rem;
  }

  .offers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }

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

  /* Nebeneinander zeigt der Pfeil nach rechts und sitzt in der Lücke zwischen den Karten. */
  .way__step + .way__step::before {
    top: 50%;
    left: -1.5rem;
    margin: -0.375rem 0 0;
    transform: rotate(-45deg);
  }
}

@media (min-width: 62rem) {
  /* Leiste unter der Bühne: links Marke und Branche, rechts Paket und Themes, auf einer Höhe. */
  .demo__bar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: end;
    gap: 2.5rem;
    padding-inline: 0.25rem;
  }

  .honest {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
    align-items: start;
  }

  .proof__panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-areas:
      "head head"
      "text art";
    align-items: end;
  }

  .proof__head { grid-area: head; }
  .proof__text { grid-area: text; padding-bottom: 1.5rem; }
  .proof__art { grid-area: art; }

  /* Raster der Bausteine: die Kaufleiste groß links über zwei Reihen, daneben Variantenwahl, Warenkorb und
     Filter; darunter die vier Bausteine der Branchen, je zwei nebeneinander. */
  .parts {
    grid-template-columns: repeat(24, minmax(0, 1fr));
  }

  .part--bar {
    grid-column: span 10;
    grid-row: span 2;
  }

  .part--bar .part__art {
    flex: 1 0 auto;
    min-height: 30rem;
    height: auto;
    place-items: center;
  }

  .m-phone {
    width: 17rem;
    margin-block: 2rem;
  }

  .m-phone__screen {
    gap: 0.5625rem;
    padding-inline: 1rem;
  }

  .m-phone__photo {
    width: calc(100% + 2rem);
    margin-inline: -1rem;
  }

  .m-phone__screen > .m-name {
    font-size: 1.25rem;
  }

  .m-buybar {
    padding: 0.5625rem 0.5625rem 0.5625rem 0.875rem;
  }

  .m-buybar__thumb {
    height: 2.75rem;
  }

  .m-buybar {
    gap: 0.5rem;
  }

  .m-buybar__text > .m-price {
    font-size: 1rem;
  }

  .m-buybar .m-button {
    min-height: 2.75rem;
    padding-inline: 0.875rem;
    font-size: 0.75rem;
  }

  .part--variant {
    grid-column: span 14;
  }

  .part--variant .part__art {
    height: 19rem;
  }

  .part--cart,
  .part--filter {
    grid-column: span 7;
  }

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

  .part--mix,
  .part--routine,
  .part--compare,
  .part--engrave {
    grid-column: span 12;
  }

  .part--mix .part__art,
  .part--routine .part__art,
  .part--compare .part__art,
  .part--engrave .part__art {
    height: 20rem;
  }

  .m-mix__box {
    grid-template-columns: repeat(6, 3.5rem);
    gap: 0.5625rem;
    padding: 0.75rem;
  }

  .m-slot {
    height: 8rem;
  }

  .m-slot__image {
    height: 7rem;
  }

  .m-routine,
  .m-table,
  .m-engrave {
    max-width: 30rem;
  }

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

  .safe__point {
    padding: 1.75rem;
  }

  .asks__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 5vw, 4.5rem);
  }
}

/* Weniger Bewegung gewünscht: Von den Clips bleibt das Standbild (der Clip lädt dann gar nicht erst). */
@media (prefers-reduced-motion: reduce) {
  .clip__video,
  .clip__toggle {
    display: none;
  }
}

/* Kontaktformular (/contact) und der Satz „Etwas klappt nicht? Schreib uns.“ auf Hilfe-, Bestell- und
   Download-Seite. Die Felder sind die des Checkouts (.field, .signup__input); hier steht nur, was dazukommt. */
.contact {
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
  padding-block: 1.5rem 4rem;
}

.contact__intro {
  max-width: 36rem;
  font-size: 1.125rem;
  color: var(--muted);
}

.contact__form {
  display: grid;
  gap: 1.375rem;
  min-width: 0;
  margin-top: 2rem;
}

/* Das Feld der Nachricht: so breit wie die anderen, mehrere Zeilen hoch, in der Höhe ziehbar */
.contact__message {
  display: block;
  height: auto;
  min-height: 11rem;
  padding: 0.875rem 1rem;
  line-height: 1.5;
  resize: vertical;
}

.contact__submit {
  margin-top: 0.25rem;
}

.contact__submit .button {
  width: 100%;
}

.contact .notice {
  margin-top: 1rem;
}

.contact .notice__title {
  font-size: clamp(1.75rem, 6vw, 2.25rem);
}

.contact-line {
  max-width: 36rem;
  margin-top: 2rem;
  color: var(--muted);
}

.contact-line a {
  color: var(--white);
  font-weight: 800;
}

.contact-line a:hover {
  color: var(--lime);
}

/* Link in einer Meldung (weiße Fläche): bleibt Tinte, auch unter dem Zeiger */
.signup__error a,
.signup__error a:hover {
  color: var(--ink);
  font-weight: 800;
}