/* UpGrade Landingpage. Familienfreundlich, hell, ruhig und eigenständig. */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --ink: #1f2947;
  --ink-soft: #56617d;
  --paper: #fffdfa;
  --cream: #f8f2e9;
  --sand: #e5d1b8;
  --lavender: #dcd5f7;
  --lilac: #6f58d9;
  --lilac-deep: #49358f;
  --mint: #c8ebe2;
  --mint-deep: #1c665b;
  --peach: #f4c4ad;
  --peach-deep: #7d3424;
  --sky: #cee4f5;
  --yellow: #f7da83;
  --line: #d9d7df;
  --white: #ffffff;
  --content: 1240px;
  --radius-small: 14px;
  --radius-medium: 24px;
  --radius-large: 40px;
  --shadow-soft: 0 24px 70px rgba(65, 53, 105, .11);
  --shadow-phone: 0 30px 60px rgba(39, 45, 72, .22);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

.landing-body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

.landing-body h1,
.landing-body h2,
.landing-body h3,
.landing-body p {
  margin: 0;
}

.landing-body h1,
.landing-body h2,
.landing-body h3 {
  color: var(--ink);
  font-family: "Poppins", "Inter", sans-serif;
  hyphens: none;
  letter-spacing: -.045em;
  overflow-wrap: normal;
  text-wrap: balance;
  word-break: normal;
}

.landing-body h1 {
  max-width: 12ch;
  font-size: clamp(3rem, 6.2vw, 5.8rem);
  font-weight: 700;
  line-height: .98;
}

.landing-body h2 {
  font-size: clamp(2.2rem, 4.4vw, 4.15rem);
  font-weight: 700;
  line-height: 1.04;
}

.landing-body h3 {
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  font-weight: 700;
  line-height: 1.18;
}

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

.landing-body a {
  color: inherit;
}

.landing-body img {
  display: block;
  max-width: 100%;
  height: auto;
}

.landing-container {
  width: min(var(--content), calc(100% - 3rem));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  z-index: 200;
  top: -6rem;
  left: 1rem;
  padding: .8rem 1rem;
  border-radius: .7rem;
  background: var(--lilac-deep);
  /* !important wie bei .landing-button: `.landing-body a { color: inherit }`
     hat die hoehere Spezifitaet (0,1,1 gegen 0,1,0) und wuerde hier sonst
     --ink erzwingen, also dunkles Navy auf tiefem Lila mit 1.49:1. */
  color: var(--white) !important;
  font-weight: 700;
}

.skip-link:focus {
  top: 1rem;
}

.landing-body :focus-visible {
  outline: 3px solid var(--lilac-deep);
  outline-offset: 4px;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1.1rem !important;
  color: var(--lilac-deep) !important;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1.3;
  text-transform: uppercase;
}

.eyebrow > span {
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
  background: var(--peach-deep);
  box-shadow: 0 0 0 5px rgba(244, 196, 173, .55);
}

.landing-header {
  position: sticky;
  z-index: 100;
  top: 0;
  border-bottom: 1px solid rgba(31, 41, 71, .09);
  background: rgba(255, 253, 250, .93);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.landing-nav {
  display: flex;
  min-height: 78px;
  align-items: center;
  gap: 1.4rem;
}

.landing-brand {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: .6rem;
  color: var(--ink);
  font: 700 1.25rem/1 "Poppins", sans-serif;
  letter-spacing: -.04em;
  text-decoration: none;
  white-space: nowrap;
}

.landing-brand img {
  width: 2.35rem;
  height: 2.35rem;
  object-fit: contain;
}

.landing-parent-link {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  margin-left: auto;
  border-bottom: 2px solid transparent;
  color: var(--ink);
  font-size: .92rem;
  font-weight: 750;
  text-decoration: none;
  transition: border-color .16s ease, color .16s ease;
}

.landing-parent-link:hover,
.landing-parent-link:focus-visible {
  border-bottom-color: var(--lilac-deep);
  color: var(--lilac-deep);
}

.landing-menu {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: clamp(.9rem, 2.2vw, 2rem);
}

.landing-menu[hidden] {
  display: none !important;
}

.landing-menu a {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  color: var(--ink-soft);
  font-size: .91rem;
  font-weight: 650;
  text-decoration: none;
  transition: color .2s ease;
}

.landing-menu a:hover,
.landing-menu a:focus-visible {
  color: var(--lilac-deep);
}

.landing-menu-toggle {
  display: none;
  width: 48px;
  height: 48px;
  padding: 10px;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.landing-menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 7px auto;
  border-radius: 2px;
  background: currentColor;
  transition: transform .2s ease;
}

.landing-button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  padding: .9rem 1.3rem;
  border: 2px solid var(--lilac-deep);
  border-radius: 16px;
  background: var(--lilac);
  box-shadow: 0 5px 0 var(--lilac-deep);
  color: var(--white) !important;
  /* button erbt font-family nicht vom Dokument, ohne diese Zeile faellt der
     Absende-Button des Beta-Formulars auf den Browser-Default (Arial) zurueck,
     waehrend die gleich gestylten a.landing-button in Inter rendern. */
  font-family: inherit;
  font-size: .96rem;
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.landing-button:hover {
  background: var(--lilac-deep);
  box-shadow: 0 3px 0 var(--lilac-deep);
  transform: translateY(2px);
}

.landing-button:active {
  box-shadow: 0 1px 0 var(--lilac-deep);
  transform: translateY(4px) scale(.99);
}

.landing-button--small {
  min-height: 46px;
  margin-left: auto;
  padding: .75rem 1rem;
  font-size: .86rem;
}

.landing-button--ink {
  border-color: var(--ink);
  background: var(--ink);
  box-shadow: 0 5px 0 #0d142b;
}

.landing-button--ink:hover {
  background: #101936;
  box-shadow: 0 3px 0 #0d142b;
}

.landing-button--soft {
  border-color: var(--lilac-deep);
  background: var(--white);
  box-shadow: 0 5px 0 var(--lavender);
  color: var(--lilac-deep) !important;
}

.landing-button--soft:hover {
  background: var(--lavender);
  box-shadow: 0 3px 0 var(--lilac-deep);
}

.landing-text-link {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  color: var(--lilac-deep) !important;
  font-weight: 750;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--cream);
}

.hero::after {
  position: absolute;
  z-index: -2;
  inset: 0;
  background-image:
    linear-gradient(rgba(31, 41, 71, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 41, 71, .035) 1px, transparent 1px);
  background-size: 34px 34px;
  content: "";
  mask-image: linear-gradient(90deg, #000, transparent 78%);
}

.hero-blob {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(2px);
  pointer-events: none;
}

.hero-blob--mint {
  top: -8rem;
  right: 9%;
  width: 28rem;
  height: 28rem;
  background: rgba(200, 235, 226, .72);
}

.hero-blob--rose {
  right: -9rem;
  bottom: -12rem;
  width: 31rem;
  height: 31rem;
  background: rgba(244, 196, 173, .64);
}

.hero-layout {
  display: grid;
  min-height: 760px;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  padding-block: 5.5rem 6rem;
}

/* Auf breiten, aber niedrigen Fenstern (MacBook Air 13" liefert 1440x800)
   schiebt das feste min-height zusammen mit 184px Innenabstand den
   Haupt-CTA unter die Falz: gemessen endete er bei 817px. Das vertikale
   Budget wird hier an die Fensterhoehe gekoppelt, die Breiten-Breakpoints
   ab 1050px bleiben unberuehrt. */
@media (min-width: 1051px) and (max-height: 860px) {
  .hero-layout {
    min-height: 0;
    padding-block: 3rem 3.5rem;
  }
}

.hero-copy {
  position: relative;
  z-index: 4;
}

.hero-lead {
  max-width: 56ch;
  margin-top: 1.8rem !important;
  font-size: clamp(1.05rem, 1.7vw, 1.22rem);
  line-height: 1.7;
  text-wrap: pretty;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
  margin-top: 2rem;
}

.hero-trust {
  display: flex;
  gap: 0;
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
}

.hero-trust li {
  min-width: 0;
  padding: .2rem 1.25rem;
  border-left: 1px solid var(--line);
}

.hero-trust li:first-child {
  padding-left: 0;
  border-left: 0;
}

.hero-trust strong,
.hero-trust span {
  display: block;
}

.hero-trust strong {
  color: var(--ink);
  font-size: .9rem;
}

.hero-trust span {
  margin-top: .15rem;
  color: var(--ink-soft);
  font-size: .76rem;
}

.hero-visual {
  position: relative;
  min-height: 590px;
}

.phone-frame {
  width: min(100%, 264px);
  overflow: hidden;
  border: 7px solid #171c35;
  border-radius: 38px;
  background: #171c35;
  box-shadow: var(--shadow-phone);
}

.phone-frame img {
  width: 100%;
}

.phone-frame--hero {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 50%;
  transform: translateX(-42%) rotate(3deg);
}

.hero-note {
  position: absolute;
  z-index: 4;
  top: 5rem;
  left: 0;
  width: 220px;
  padding: 1.4rem;
  border: 2px solid var(--ink);
  border-radius: 20px 8px 20px 8px;
  background: var(--paper);
  box-shadow: 9px 9px 0 var(--yellow);
  transform: rotate(-6deg);
}

.hero-note span {
  display: block;
  margin-bottom: .5rem;
  color: var(--peach-deep);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hero-note strong {
  color: var(--ink);
  font: 700 1.2rem/1.2 "Poppins", sans-serif;
  letter-spacing: -.04em;
}

.hero-success {
  position: absolute;
  z-index: 5;
  top: 20rem;
  right: -1rem;
  width: 220px;
  padding: 1rem 1.1rem;
  border: 2px solid var(--ink);
  border-radius: 8px 20px 8px 20px;
  background: var(--white);
  box-shadow: 8px 8px 0 var(--mint);
  transform: rotate(-3deg);
}

.hero-success span,
.hero-success strong {
  display: block;
}

.hero-success span {
  margin-bottom: .25rem;
  color: var(--mint-deep);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.hero-success strong {
  color: var(--ink);
  font-size: .82rem;
  line-height: 1.35;
}

.hero-abby {
  position: absolute;
  z-index: 4;
  right: -1.5rem;
  bottom: 0;
  width: 185px;
  filter: drop-shadow(0 14px 12px rgba(45, 38, 82, .18));
}

.promise-strip {
  border-block: 1px solid rgba(31, 41, 71, .08);
  background: var(--paper);
}

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

.promise-grid p {
  display: flex;
  min-height: 82px;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.5rem;
  border-left: 1px solid rgba(31, 41, 71, .08);
  color: var(--ink);
  font-size: .9rem;
  font-weight: 700;
}

.promise-grid p:first-child {
  border-left: 0;
}

.promise-grid span {
  color: var(--peach-deep);
  font: 700 .8rem/1 "Poppins", sans-serif;
}

.story-section,
.product-section,
.parent-section,
.school-section,
.safety-section,
.pricing-section,
.questions-section,
.beta-section {
  padding-block: clamp(5.5rem, 9vw, 9rem);
}

.section-heading--split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .6fr);
  align-items: end;
  gap: clamp(2rem, 7vw, 6rem);
}

.section-heading--split > p {
  max-width: 38ch;
  padding-bottom: .6rem;
  font-size: 1.05rem;
}

.section-heading--center {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.section-heading--center .eyebrow {
  justify-content: center;
}

.section-heading--center > p:last-child {
  max-width: 53ch;
  margin: 1.2rem auto 0;
  font-size: 1.05rem;
}

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

.story-steps {
  margin: 4rem 0 0;
  padding: 0;
  border-top: 2px solid var(--ink);
  list-style: none;
}

.story-steps li {
  position: relative;
  display: grid;
  min-height: 150px;
  grid-template-columns: 80px minmax(0, 1fr) minmax(150px, .4fr);
  align-items: center;
  gap: 1.5rem;
  overflow: hidden;
  padding: 1.7rem 1rem 1.7rem 0;
  border-bottom: 1px solid var(--line);
}

.story-number {
  align-self: start;
  padding-top: .25rem;
  color: var(--peach-deep);
  font: 700 1rem/1 "Poppins", sans-serif;
}

.story-steps h3 {
  margin-bottom: .45rem;
}

.story-steps p {
  max-width: 62ch;
}

.story-chip {
  justify-self: end;
  padding: .75rem 1rem;
  border-radius: 14px 14px 4px 14px;
  color: var(--ink);
  font-size: .82rem;
  font-weight: 750;
  transform: rotate(2deg);
}

.story-chip--peach {
  background: var(--peach);
}

.story-chip--mint {
  background: var(--mint);
}

.story-chip--lilac {
  background: var(--lavender);
}

.story-abby {
  position: absolute;
  right: 1rem;
  bottom: -4.2rem;
  width: 150px;
  pointer-events: none;
  filter: drop-shadow(0 10px 9px rgba(56, 44, 93, .15));
}

.product-section {
  background: var(--cream);
}

.feature-row {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(390px, 1.15fr);
  align-items: center;
  gap: clamp(3rem, 8vw, 8rem);
  margin-top: clamp(5rem, 9vw, 8rem);
}

.feature-row--test .feature-copy {
  order: 2;
}

.feature-row--test .feature-visual {
  order: 1;
}

.feature-label {
  margin-bottom: .9rem !important;
  color: var(--lilac-deep) !important;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.feature-copy h3 {
  max-width: 19ch;
  font-size: clamp(1.9rem, 3.2vw, 3rem);
  line-height: 1.05;
}

.feature-copy > p:not(.feature-label) {
  max-width: 52ch;
  margin-top: 1.3rem;
  font-size: 1.05rem;
}

.simple-list {
  display: grid;
  gap: .8rem;
  margin: 1.7rem 0 0;
  padding: 0;
  list-style: none;
}

.simple-list li {
  position: relative;
  padding-left: 1.7rem;
  color: var(--ink);
  font-weight: 650;
}

.simple-list li::before {
  position: absolute;
  top: .52rem;
  left: 0;
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  background: var(--mint-deep);
  content: "";
}

.feature-visual {
  position: relative;
  display: grid;
  min-height: 620px;
  place-items: center;
  overflow: hidden;
  border-radius: 38px 12px 38px 12px;
}

.feature-visual::before {
  position: absolute;
  width: 330px;
  height: 330px;
  border: 1px solid rgba(31, 41, 71, .12);
  border-radius: 50%;
  content: "";
}

.feature-visual--lavender {
  background: var(--lavender);
}

.feature-visual--sky {
  background: var(--sky);
}

.feature-visual .phone-frame {
  position: relative;
  z-index: 2;
  transform: rotate(2deg);
}

.feature-row--test .phone-frame {
  transform: rotate(-2deg);
}

.feature-abby {
  position: absolute;
  z-index: 3;
  filter: drop-shadow(0 12px 10px rgba(45, 38, 82, .18));
}

.feature-abby--coach {
  right: 1rem;
  bottom: -1rem;
  width: 180px;
}

.feature-sticker {
  position: absolute;
  z-index: 3;
  right: 1.5rem;
  bottom: 3rem;
  max-width: 190px;
  padding: 1rem 1.1rem;
  border: 2px solid var(--ink);
  border-radius: 7px 18px 7px 18px;
  background: var(--paper);
  box-shadow: 7px 7px 0 var(--yellow);
  color: var(--ink);
  font-weight: 800;
  transform: rotate(4deg);
}

.parent-section {
  background: var(--mint);
}

.parent-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .85fr);
  align-items: center;
  gap: clamp(3rem, 8vw, 8rem);
}

.parent-copy > p:not(.eyebrow) {
  max-width: 57ch;
  margin-top: 1.4rem;
  color: #355f59;
  font-size: 1.06rem;
}

.parent-benefits {
  display: grid;
  gap: 0;
  margin-block: 2.2rem;
  border-top: 1px solid rgba(31, 41, 71, .28);
}

.parent-benefits article {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  align-items: start;
  gap: .9rem 1.3rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(31, 41, 71, .28);
}

.parent-benefits span {
  grid-row: 1 / span 2;
  color: var(--mint-deep);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.parent-benefits h3 {
  font-size: 1.05rem;
  letter-spacing: -.025em;
}

.parent-benefits p {
  color: #355f59;
  font-size: .9rem;
}

.parent-visual {
  position: relative;
  min-height: 660px;
}

.parent-screen {
  position: absolute;
  top: 0;
  left: 50%;
  width: 310px;
  overflow: hidden;
  border: 7px solid var(--ink);
  border-radius: 35px;
  background: var(--paper);
  box-shadow: 22px 28px 0 rgba(38, 120, 107, .16), var(--shadow-phone);
  transform: translateX(-50%) rotate(2deg);
}

.parent-screen img {
  width: 100%;
}

.parent-abby {
  position: absolute;
  z-index: 3;
  right: -1rem;
  bottom: 1rem;
  width: 195px;
  filter: drop-shadow(0 12px 10px rgba(45, 38, 82, .18));
}

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

.school-layout {
  display: grid;
  grid-template-columns: minmax(380px, .9fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(3rem, 8vw, 8rem);
}

.school-visual {
  position: relative;
  min-height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(220, 213, 247, .85), rgba(220, 213, 247, .35) 55%, transparent 56%);
}

.school-visual img {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 50%;
  width: 260px;
  transform: translateX(-50%);
}

.school-card {
  position: absolute;
  z-index: 3;
  max-width: 180px;
  padding: 1rem 1.1rem;
  border: 2px solid var(--ink);
  border-radius: 18px 7px 18px 7px;
  background: var(--paper);
  box-shadow: 7px 7px 0 var(--yellow);
}

.school-card span,
.school-card strong {
  display: block;
}

.school-card span {
  margin-bottom: .2rem;
  color: var(--lilac-deep);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.school-card strong {
  color: var(--ink);
  font-size: .9rem;
  line-height: 1.35;
}

.school-card--one {
  top: 2.5rem;
  left: 0;
  transform: rotate(-4deg);
}

.school-card--two {
  top: 1rem;
  right: 0;
  box-shadow: 7px 7px 0 var(--mint);
  transform: rotate(4deg);
}

.school-card--three {
  right: 0;
  bottom: 3.5rem;
  box-shadow: 7px 7px 0 var(--peach);
  transform: rotate(-2deg);
}

.school-copy > p:not(.eyebrow) {
  max-width: 57ch;
  margin-top: 1.5rem;
  font-size: 1.05rem;
}

.school-copy .school-note {
  display: inline-block;
  padding: .8rem 1rem;
  border-radius: 14px;
  background: var(--mint);
  color: #245c53;
  font-size: .9rem !important;
  font-weight: 750;
}

.safety-section {
  background: #f2ddd2;
}

.safety-board {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.05fr) minmax(0, .9fr);
  gap: 1rem;
  margin-block: 3.5rem 2rem;
}

.safety-board article {
  min-width: 0;
  min-height: 255px;
  padding: 1.8rem;
  border-radius: 30px 10px 30px 10px;
  background: var(--paper);
}

.safety-board article:nth-child(2) {
  margin-top: 2.4rem;
  background: var(--mint);
}

.safety-board article:nth-child(3) {
  background: var(--lavender);
}

.safety-board article:nth-child(3) p,
.price-card--family .price span,
.price-card--family .price-year {
  color: var(--ink);
}

.safety-board span {
  display: grid;
  width: 42px;
  height: 42px;
  margin-bottom: 2rem;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  font-size: .75rem;
  font-weight: 800;
}

.safety-board h3 {
  margin-bottom: .7rem;
}

.safety-board p {
  font-size: .93rem;
}

.pricing-section {
  background: var(--cream);
}

.pricing-layout {
  display: grid;
  grid-template-columns: minmax(270px, .6fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 6rem);
}

.pricing-intro {
  position: relative;
}

.pricing-intro > p:not(.eyebrow) {
  margin-top: 1.3rem;
  font-size: 1.02rem;
}

.price-list {
  position: relative;
  display: grid;
  gap: 1rem;
}

.price-abby {
  position: absolute;
  z-index: 3;
  top: 73%;
  left: 0;
  width: clamp(145px, 10vw, 195px);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 12px 10px rgba(45, 38, 82, .16));
  transform: translate(-92%, -50%) scaleX(-1);
  transform-origin: center;
}

.price-card {
  display: grid;
  min-height: 285px;
  grid-template-columns: minmax(190px, .8fr) minmax(210px, 1fr);
  grid-template-rows: 1fr auto;
  gap: 1rem 2rem;
  padding: 2rem;
  border: 2px solid var(--ink);
  border-radius: 28px 10px 28px 10px;
  background: var(--paper);
  box-shadow: 10px 10px 0 var(--mint);
}

.price-card--family {
  background: var(--lavender);
  box-shadow: 10px 10px 0 var(--peach);
}

.price-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  color: var(--ink) !important;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.price-name span {
  padding: .4rem .6rem;
  border-radius: 10px;
  background: var(--yellow);
  font-size: .62rem;
  letter-spacing: 0;
}

.price {
  margin-top: 1.1rem !important;
}

.price strong,
.price span {
  display: block;
}

.price strong {
  color: var(--ink);
  font: 700 clamp(2.5rem, 4vw, 3.7rem)/1 "Poppins", sans-serif;
  letter-spacing: -.07em;
}

.price span,
.price-year {
  margin-top: .3rem;
  color: var(--ink-soft);
  font-size: .82rem;
  font-weight: 650;
}

.price-card ul {
  display: grid;
  align-content: center;
  gap: .7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.price-card li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--ink);
  font-size: .9rem;
  font-weight: 650;
}

.price-card li::before {
  position: absolute;
  top: .47rem;
  left: 0;
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
  background: var(--mint-deep);
  content: "";
}

.price-card .landing-button {
  grid-column: 1 / -1;
}

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

.questions-layout {
  display: grid;
  grid-template-columns: minmax(260px, .55fr) minmax(0, 1.1fr);
  gap: clamp(3rem, 8vw, 8rem);
}

.questions-intro {
  position: relative;
}

.questions-intro img {
  width: 190px;
  margin: 2.5rem auto -2rem;
  filter: drop-shadow(0 12px 10px rgba(45, 38, 82, .16));
}

.question-list {
  border-top: 2px solid var(--ink);
}

.question-list article {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(220px, 1fr);
  gap: 2rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--line);
}

.question-list h3 {
  font-size: 1.02rem;
  letter-spacing: -.025em;
}

.question-list p {
  font-size: .94rem;
}

.beta-section {
  background: var(--sand);
}

.beta-layout {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(380px, 1fr);
  align-items: center;
  gap: clamp(3rem, 8vw, 7rem);
}

.beta-copy > p:not(.eyebrow) {
  max-width: 50ch;
  margin-top: 1.4rem;
  color: #5f513f;
  font-size: 1.04rem;
}

.beta-copy ul {
  display: grid;
  gap: .65rem;
  margin: 1.7rem 0;
  padding: 0;
  list-style: none;
}

.beta-copy li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--ink);
  font-weight: 700;
}

.beta-copy li::before {
  position: absolute;
  top: .52rem;
  left: 0;
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
  background: var(--lilac);
  content: "";
}

.beta-copy .beta-parent-note {
  color: var(--ink) !important;
  font-size: .88rem !important;
  font-weight: 700;
}

.beta-form-wrap {
  position: relative;
  margin-top: 9rem;
  padding: 3.4rem 2rem 2rem;
  border: 2px solid var(--ink);
  border-radius: 32px 12px 32px 12px;
  background: var(--paper);
  box-shadow: 12px 12px 0 var(--lilac);
}

.beta-abby {
  position: absolute;
  z-index: 2;
  bottom: calc(100% - 15px);
  left: 50%;
  width: 250px;
  pointer-events: none;
  filter: drop-shadow(0 12px 9px rgba(45, 38, 82, .15));
  transform: translateX(-50%);
}

.beta-form {
  display: grid;
  gap: 1rem;
}

.form-row {
  display: grid;
  gap: .4rem;
}

.form-row label,
.beta-form legend {
  color: var(--ink);
  font-size: .82rem;
  font-weight: 750;
}

.beta-form input,
.beta-form select {
  width: 100%;
  min-height: 50px;
  padding: .7rem .8rem;
  border: 1.5px solid #8c92a5;
  border-radius: 13px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
}

.beta-form input:focus,
.beta-form select:focus {
  border-color: var(--lilac-deep);
  outline: 3px solid rgba(111, 88, 217, .25);
  outline-offset: 1px;
}

.form-pair {
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  gap: .8rem;
}

.beta-form fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.beta-form legend {
  margin-bottom: .45rem;
}

.device-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
}

.device-options label {
  position: relative;
  display: block;
}

.device-options input {
  position: absolute;
  opacity: 0;
}

.device-options span {
  display: grid;
  min-height: 50px;
  place-items: center;
  border: 1.5px solid #8c92a5;
  border-radius: 13px;
  color: var(--ink);
  font-size: .86rem;
  font-weight: 700;
  cursor: pointer;
}

.device-options input:focus-visible + span {
  outline: 3px solid var(--lilac-deep);
  outline-offset: 3px;
}

.device-options input:checked + span {
  border-color: var(--mint-deep);
  background: var(--mint);
  box-shadow: inset 0 0 0 1px var(--mint-deep);
}

.form-note {
  color: var(--ink-soft);
  font-size: .74rem;
  line-height: 1.5;
}

.form-note a {
  color: var(--lilac-deep);
  font-weight: 700;
  text-decoration: underline;
}

.honeypot {
  position: absolute !important;
  left: -9999px !important;
}

.beta-banner {
  display: none;
  margin-bottom: 1rem;
  padding: 1rem;
  border-radius: 14px;
  font-weight: 700;
}

.beta-banner.success {
  border: 1px solid var(--mint-deep);
  background: var(--mint);
  color: #215b52;
}

.beta-banner.error {
  border: 1px solid var(--peach-deep);
  background: #f8d9ca;
  color: #7b301f;
}

.landing-footer {
  padding: 4.5rem 0 1.5rem;
  background: var(--ink);
  color: var(--white);
}

.footer-main {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 3rem;
}

.landing-brand--footer {
  color: var(--white);
}

.footer-main > div:first-child > p {
  max-width: 30ch;
  margin-top: 1rem;
  color: #d2d6e4;
  font-size: .86rem;
}

.footer-main nav {
  display: grid;
  gap: .65rem;
}

.footer-main nav a,
.footer-contact a {
  min-height: 44px;
  color: var(--white);
  font-size: .86rem;
  font-weight: 700;
  text-decoration: none;
}

.footer-main nav a:hover,
.footer-contact a:hover {
  color: var(--yellow);
  text-decoration: underline;
}

.footer-contact {
  display: grid;
  justify-self: end;
  gap: .5rem;
}

.footer-contact span {
  color: #b9c0d6;
  font-size: .76rem;
}

.footer-contact a {
  color: var(--mint);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(255, 255, 255, .2);
  color: #c3c9db;
  font-size: .74rem;
}

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

.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
}

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

.confetti-canvas {
  position: fixed;
  z-index: 300;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media (max-width: 1050px) {
  .landing-container {
    width: min(var(--content), calc(100% - 2.5rem));
  }

  .hero-layout {
    grid-template-columns: minmax(0, 1fr) minmax(380px, .8fr);
    gap: 2rem;
  }

  .landing-body h1 {
    max-width: 13ch;
    font-size: clamp(3rem, 5.4vw, 3.55rem);
  }

  .pricing-intro h2 {
    font-size: clamp(2.2rem, 3.8vw, 3rem);
  }

  .hero-note {
    left: -2rem;
  }

  .hero-abby {
    right: 0;
    width: 155px;
  }

  .hero-success {
    right: 0;
  }

  .parent-abby {
    right: 0;
    width: 170px;
  }

  .price-abby {
    top: 91%;
    width: 120px;
  }

  .school-card--one {
    left: -1rem;
  }

  .school-card--two,
  .school-card--three {
    right: -1rem;
  }
}

@media (max-width: 860px) {
  .landing-nav {
    min-height: 68px;
  }

  .landing-menu-toggle {
    display: block;
    order: 2;
    margin-left: auto;
  }

  .landing-button--small {
    order: 3;
    margin-left: 0;
  }

  .js .landing-menu {
    position: fixed;
    top: 68px;
    right: 0;
    left: 0;
    display: grid;
    justify-items: stretch;
    gap: 0;
    padding: 1rem 1.25rem 1.5rem;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
    box-shadow: 0 18px 30px rgba(31, 41, 71, .12);
    transform: translateY(-130%);
    transition: transform .25s ease;
  }

  .js .landing-menu.is-open {
    transform: translateY(0);
  }

  .landing-menu a {
    width: 100%;
    min-height: 52px;
    padding-inline: .25rem;
    border-bottom: 1px solid rgba(31, 41, 71, .08);
    font-size: 1rem;
  }

  .landing-menu-toggle[aria-expanded="true"] span:first-child {
    transform: translateY(4.5px) rotate(45deg);
  }

  .landing-menu-toggle[aria-expanded="true"] span:last-child {
    transform: translateY(-4.5px) rotate(-45deg);
  }

  .hero-layout,
  .feature-row,
  .parent-layout,
  .school-layout,
  .pricing-layout,
  .questions-layout,
  .beta-layout {
    grid-template-columns: 1fr;
  }

  .hero-layout {
    min-height: auto;
    gap: 3.5rem;
    padding-block: 5rem;
  }

  .hero-copy {
    max-width: 720px;
  }

  .hero-visual {
    width: min(100%, 580px);
    margin-inline: auto;
  }

  .section-heading--split {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .section-heading--split > p {
    padding-bottom: 0;
  }

  .feature-row {
    gap: 2.5rem;
  }

  .feature-row--test .feature-copy,
  .feature-row--test .feature-visual {
    order: initial;
  }

  .feature-visual {
    width: min(100%, 620px);
    margin-inline: auto;
  }

  .parent-copy {
    max-width: 720px;
  }

  .parent-visual {
    width: min(100%, 560px);
    margin-inline: auto;
  }

  .school-visual {
    order: 2;
    width: min(100%, 560px);
    margin-inline: auto;
  }

  .school-copy {
    order: 1;
  }

  .price-list {
    padding-top: 8rem;
  }

  .price-abby {
    top: 0;
    right: 1.5rem;
    left: auto;
    width: 132px;
    transform: scaleX(-1);
  }

  .questions-intro img {
    position: absolute;
    right: 0;
    bottom: -2rem;
    width: 150px;
    margin: 0;
  }

  .beta-layout {
    gap: 3rem;
  }
}

@media (max-width: 640px) {
  .landing-container {
    width: calc(100% - 2rem);
  }

  .landing-brand {
    font-size: 1.08rem;
  }

  .landing-brand img {
    width: 2rem;
    height: 2rem;
  }

  .landing-button--small {
    min-height: 44px;
    padding: .65rem .7rem;
    font-size: .76rem;
  }

  .landing-body h1 {
    max-width: 13ch;
    font-size: clamp(2.75rem, 13vw, 4.15rem);
  }

  .landing-body h2 {
    font-size: clamp(2rem, 10vw, 3.1rem);
  }

  .hero {
    overflow: hidden;
  }

  .hero-layout {
    gap: 2.7rem;
    padding-block: 3.8rem 4.5rem;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .hero-actions .landing-button,
  .hero-actions .landing-text-link {
    width: 100%;
  }

  .hero-trust {
    display: grid;
    grid-template-columns: 1fr;
    gap: .8rem;
  }

  .hero-trust li,
  .hero-trust li:first-child {
    padding: .25rem 0 .25rem 1rem;
    border-left: 3px solid var(--lavender);
  }

  .hero-visual {
    display: flex;
    min-height: 0;
    flex-direction: column;
    align-items: center;
  }

  .phone-frame--hero {
    position: relative;
    top: auto;
    left: auto;
    width: 236px;
    transform: rotate(2deg);
  }

  .hero-note {
    top: 2rem;
    left: 0;
    width: 150px;
    padding: .9rem;
  }

  .hero-note strong {
    font-size: .9rem;
  }

  .hero-success {
    top: auto;
    right: 0;
    bottom: 7rem;
    width: 155px;
    padding: .8rem;
  }

  .hero-success strong {
    font-size: .7rem;
  }

  .hero-abby {
    position: relative;
    right: auto;
    bottom: auto;
    width: 132px;
    margin: -2.8rem -15rem 0 0;
  }

  .promise-grid {
    grid-template-columns: 1fr;
    padding-block: .5rem;
  }

  .promise-grid p,
  .promise-grid p:first-child {
    min-height: 58px;
    padding: .75rem 0;
    border-top: 1px solid rgba(31, 41, 71, .08);
    border-left: 0;
  }

  .promise-grid p:first-child {
    border-top: 0;
  }

  .story-steps {
    margin-top: 2.7rem;
  }

  .story-steps li {
    min-height: 0;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: .8rem;
    padding: 1.5rem 0;
  }

  .story-chip {
    grid-column: 2;
    justify-self: start;
    margin-top: .4rem;
  }

  .landing-body .story-abby {
    display: none;
  }

  .feature-visual {
    min-height: 520px;
    border-radius: 28px 10px 28px 10px;
  }

  .feature-visual .phone-frame {
    width: 225px;
  }

  .feature-abby--coach {
    right: 0;
    width: 130px;
  }

  .feature-sticker {
    right: .7rem;
    bottom: 1.3rem;
    max-width: 145px;
    padding: .8rem;
    font-size: .78rem;
  }

  .parent-benefits article {
    grid-template-columns: 1fr;
  }

  .parent-benefits span {
    grid-row: auto;
  }

  .parent-visual {
    min-height: 570px;
    overflow: hidden;
  }

  .parent-screen {
    width: 270px;
  }

  .parent-abby {
    right: 0;
    width: 145px;
  }

  .school-visual {
    min-height: 420px;
  }

  .school-visual img {
    width: 210px;
  }

  .school-card {
    max-width: 145px;
    padding: .75rem;
  }

  .school-card strong {
    font-size: .75rem;
  }

  .school-card--one {
    top: 2rem;
    left: 0;
  }

  .school-card--two {
    top: .5rem;
    right: 0;
  }

  .school-card--three {
    right: 0;
    bottom: 2rem;
  }

  .safety-board {
    grid-template-columns: 1fr;
    margin-top: 2.5rem;
  }

  .safety-board article,
  .safety-board article:nth-child(2) {
    min-height: 0;
    margin-top: 0;
  }

  .safety-board span {
    margin-bottom: 1.2rem;
  }

  .price-list {
    padding-top: 0;
  }

  .price-abby {
    top: .75rem;
    right: 0;
    width: 112px;
  }

  .price-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    padding: 1.5rem;
  }

  .price-card .landing-button {
    grid-column: auto;
  }

  .question-list article {
    grid-template-columns: 1fr;
    gap: .6rem;
  }

  .questions-intro img {
    position: relative;
    right: auto;
    bottom: auto;
    width: 130px;
    margin: 1.5rem auto -2rem;
  }

  .beta-form-wrap {
    margin-top: 7.5rem;
    padding: 3rem 1rem 1.2rem;
    box-shadow: 7px 7px 0 var(--lilac);
  }

  .beta-abby {
    width: 210px;
  }

  .form-pair,
  .device-options {
    grid-template-columns: 1fr;
  }

  .footer-main {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-contact {
    justify-self: start;
  }

  .footer-bottom {
    flex-direction: column;
    gap: .45rem;
    margin-top: 2rem;
  }
}

@media (max-width: 360px) {
  .landing-container {
    width: calc(100% - 1.5rem);
  }

  .landing-button--small {
    display: none;
  }

  .hero-note {
    left: -1rem;
  }

  .hero-success {
    right: -1rem;
  }

  .hero-abby {
    margin-right: -12rem;
  }
}

@media (hover: none), (pointer: coarse) {
  .landing-button:hover {
    background: var(--lilac);
    box-shadow: 0 5px 0 var(--lilac-deep);
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }

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

@media (prefers-contrast: more) {
  :root {
    --ink-soft: #343d56;
    --line: #7d8496;
  }

  .landing-menu a,
  .landing-text-link,
  .footer-main a {
    text-decoration: underline;
  }

  .price-card,
  .beta-form-wrap,
  .phone-frame {
    border-width: 3px;
  }
}

/* ==========================================================================
   Ergaenzungen v1.3.0 (28.07.2026)
   Preisrahmen, Zugangszeile, Methodenbeleg, Wirkungsversprechen.
   ACHTUNG Spezifitaet: .landing-body p ist (0,1,1) und schlaegt jeden
   Ein-Klassen-Selektor auf einem <p>. Alle Farbregeln hier sind deshalb
   unter ihrem Block verschachtelt. Ohne das fallen sie still auf --ink-soft
   zurueck, und die Hervorhebung fehlt, ohne dass irgendetwas kaputt aussieht.

   Alle Werte aus dem :root-Block DIESER Datei - brand.css ist auf index.html
   gar nicht eingebunden, seine Tokens waeren hier wirkungslos gewesen.
   Kein neuer Schatten, keine neue Farbe, kein neuer Radius. Plan: docs/designs/website-abo-2026-07.md
   ========================================================================== */

/* Nachhilfevergleich ueber den Preiskacheln. Der Rahmen entscheidet ueber die
   Zahl: im App-Rahmen sind 14,99 viel, neben einer Nachhilfestunde wenig. */
/* Die zwei Zeilen unter den Kacheln sind EIN Block, kein zweimal Raster.
   Vorher waren es zwei getrennte Rasterelemente und bekamen dadurch die
   Zeilenluecke von .pricing-layout zwischen sich: clamp(3rem, 7vw, 6rem),
   auf 1280 Pixeln also rund 90 Pixel. Das sah aus wie zwei Absaetze, die
   nichts miteinander zu tun haben. Jetzt eine gemeinsame Huelle, und der
   Abstand darin wird hier bestimmt. */
.pricing-layout .pricing-notes {
  grid-column: 1 / -1;
  /* Die Rasterluecke ist clamp(3rem, 7vw, 6rem) und damit fuer den Anschluss
     an die Kacheln zu gross: sie ist als Abstand ZWISCHEN den Spalten gedacht,
     nicht als Absatz nach unten. Der negative Rand holt sie auf 40 Pixel
     zurueck, und zwar auf jeder Breite - die Rechnung zieht denselben
     clamp-Wert wieder ab, den das Raster gerade setzt. */
  margin: calc(40px - clamp(3rem, 7vw, 6rem)) auto 0;
  max-width: 54ch;
  text-align: center;
}
/* Beide Zeilen gleich: Schrift, Groesse UND Farbe. Der Vergleich ordnet die
   Zahl ein, die Zugangszeile sagt, wie man hineinkommt - zusammen sind das
   eine Auskunft, kein Argument plus Kleingedrucktes. --ink statt --ink-soft,
   weil das direkt unter den Preisen steht und gelesen werden soll. */
.pricing-layout .pricing-frame,
.pricing-layout .pricing-access {
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ink);
}
.pricing-layout .pricing-access { margin-top: .55rem; }

/* Der Methodenbeleg in Schritt 02. Als TEXT, nicht als Bild: sonst liest kein
   Screenreader den einen Inhalt, der das Produkt tatsaechlich erklaert. */
.method-proof {
  margin-top: 16px;
  padding: 16px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
}
.method-proof .method-proof__label {
  margin: 0 0 4px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  /* Nicht --secondary-shade: das Mint kommt auf Papier nur auf 2,11:1 und
     ist als Kleinschrift damit unlesbar. --lilac-deep haelt 8,9:1. */
  color: var(--lilac-deep);
}
.method-proof .method-proof__label--no { margin-top: 14px; color: var(--peach-deep); }
.method-proof .method-proof__q { margin: 0 0 8px; font-weight: 700; color: var(--ink); }
.method-proof .method-proof__q--no { text-decoration: line-through; color: var(--ink-soft); }
.method-proof .method-proof__a { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.method-proof__a span {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--cream);
  font-size: .9rem;
  color: var(--ink);
}
.method-proof__a--no span {
  border-style: dashed;
  color: var(--ink-soft);
  background: transparent;
}
.method-proof .method-proof__why {
  margin: 14px 0 0;
  font-size: .85rem;
  color: var(--ink-soft);
}

/* FAQ als Menü statt als Textwand.
   <details>/<summary> statt eigener Klapptechnik: von Haus aus per Tastatur
   bedienbar, im Screenreader als aufklappbar angesagt, und die Browsersuche
   findet auch zugeklappte Antworten. Kein JavaScript.
   Die erste Frage steht offen, damit das Menü nicht als Wand aus
   Ueberschriften beginnt und sofort zeigt, wie es sich verhaelt. */
.question-list .question-item {
  border-bottom: 1px solid var(--line);
}
.question-list .question-item summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 0;
  cursor: pointer;
  list-style: none;
  /* Explizit, nicht geerbt: summary ist kein h3, bekommt also nichts von
     .landing-body h3. --font-head existiert in dieser Datei nicht (das ist
     brand.css, und die ist auf index.html gar nicht eingebunden). */
  font-family: "Poppins", "Inter", sans-serif;
  hyphens: none;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -.025em;
  color: var(--ink);
}
/* Den Standardpfeil von Safari und Chrome abschalten, wir setzen ein eigenes
   Zeichen rechts. */
.question-list .question-item summary::-webkit-details-marker { display: none; }
.question-list .question-item__q { flex: 1; }
.question-list .question-item summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  border-right: 2px solid var(--lilac-deep);
  border-bottom: 2px solid var(--lilac-deep);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
}
.question-list .question-item[open] summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.question-list .question-item summary:hover,
.question-list .question-item summary:focus-visible {
  color: var(--lilac-deep);
}
.question-list .question-item summary:focus-visible {
  outline: 2px solid var(--lilac-deep);
  outline-offset: 4px;
  border-radius: 6px;
}
.question-list .question-item__a {
  padding: 0 2.4rem 1.35rem 0;
  max-width: 68ch;
}
.question-list .question-item__a p {
  margin: 0;
  font-size: .94rem;
  color: var(--ink-soft);
}
/* Wer Bewegung reduziert haben moechte, bekommt keinen drehenden Pfeil. */
@media (prefers-reduced-motion: reduce) {
  .question-list .question-item summary::after { transition: none; }
}

/* Wirkungsversprechen.
   Stand vorher als nackter Text im farbigen Band und sah dadurch aus wie
   hineingeworfen. Jetzt eine eigene Flaeche auf Papier: die Zusage ist der
   Grund, warum dieser Abschnitt existiert, und darf wie eine Zusage aussehen.
   Zweispaltig, weil die Aussage links und die drei Faelle rechts zusammen
   erst die Frage beantworten, die ein Elternteil hier wirklich hat: was genau
   heisst "nichts getan"? */
.promise-section { padding: 84px 0; background: var(--lavender); }

.promise-card {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 3rem;
  align-items: start;
  padding: 3rem 3.2rem;
  background: var(--paper);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-soft);
}
.promise-card__main h2 { margin: 10px 0 14px; }
.promise-card .promise-lead {
  margin: 0;
  font-size: 1.06rem;
  color: var(--ink);
}

/* Gestapelte Liste, KEIN Dreierraster nebeneinander: drei gleich grosse
   Kacheln waeren genau das Muster, das der Rest der Seite vermeidet. */
.promise-facts {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1.15rem;
}
.promise-facts li {
  display: grid;
  gap: .2rem;
  padding-left: 1.5rem;
  position: relative;
}
/* Haken statt Aufzaehlungspunkt, aus zwei Rahmenkanten gebaut. Kein Bild,
   kein Symbolzeichen, nichts, was ein Screenreader vorlesen wuerde. */
.promise-facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .42em;
  width: 6px;
  height: 11px;
  border-right: 2px solid var(--mint-deep);
  border-bottom: 2px solid var(--mint-deep);
  transform: rotate(45deg);
}
.promise-facts strong {
  font-family: "Poppins", "Inter", sans-serif;
  font-size: .97rem;
  letter-spacing: -.02em;
  color: var(--ink);
}
.promise-facts span {
  font-size: .92rem;
  color: var(--ink-soft);
}

@media (max-width: 640px) {
  /* Mit derselben Verschachtelung wie die Hauptregel - eine Medienabfrage
     erhoeht die Spezifitaet nicht, .pricing-access allein wuerde verlieren. */
  .pricing-layout .pricing-notes { text-align: left; }
  .promise-section { padding: 48px 0; }
  /* Einspaltig, und die Flaeche wird schmaler gerahmt: 3,2rem Innenabstand
     lassen auf 375 Pixeln keine Zeile mehr uebrig. */
  .promise-card {
    grid-template-columns: 1fr;
    gap: 1.8rem;
    padding: 1.9rem 1.5rem;
    border-radius: var(--radius-medium);
  }
  .method-proof { padding: 14px; }
  .question-list .question-item__a { padding-right: 0; }
}