/* 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;
}

/* Die Marken-Tokens standen frueher hier und wichen dabei in JEDEM der acht
   gemeinsamen Werte von brand.css ab - bis zu dE 10,5 beim Lila. Ursache war,
   dass index.html brand.css gar nicht eingebunden hatte; die Werte wurden
   deshalb hier gepflegt und sind auseinandergelaufen. Seit dem 22.09.2026
   laedt index.html brand.css davor, und alle Token kommen von dort.
   Wer hier eine Farbe braucht, traegt sie in brand.css ein - nicht hier. */

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: var(--text-16);
  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: var(--text-12);
  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 var(--text-20, 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: var(--text-15);
  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);
}

/* "Für die Beta eintragen" neben "Elternbereich". Nur ab 700px: darunter
   uebernimmt die feste Leiste unten (.sticky-cta). */
.landing-nav .landing-header-cta {
  margin-left: 0;
}

@media (max-width: 699px) {
  .landing-nav .landing-header-cta {
    display: none;
  }
}

.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: var(--text-15);
  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: var(--text-15);
  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: var(--text-14);
}

.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: var(--text-14);
}

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

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

.phone-frame {
  width: min(100%, 264px);
  overflow: hidden;
  border: 7px solid #171c35;
  border-radius: var(--radius-device);
  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: 1.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: var(--text-12);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

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

.hero-success {
  position: absolute;
  z-index: 5;
  /* Links unten neben dem Telefon: rechts unten sitzt Abby, und die Karte
     darf weder sie noch den Chat auf dem Bildschirm verdecken (04.10.2026). */
  bottom: 4.5rem;
  left: -.5rem;
  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: var(--text-12);
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.hero-success strong {
  color: var(--ink);
  font-size: var(--text-13);
  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));
}

/* Status seit dem 08.10.2026: gegruendet, Beta startet in Kuerze. Steht im
   Beta-Abschnitt, damit niemand meint, die App sei schon da. Der Kasten im
   Hero ist seit dem 08.10.2026 (spaet) weg: dieselbe Nachricht steht jetzt
   gross in der Neuigkeit unter dem Abby-Film (neuigkeit.css). */
.beta-copy .beta-status {
  max-width: 52ch;
  padding: .8rem 1.1rem;
  border-left: 4px solid var(--sun);
  border-radius: 0 14px 14px 0;
  background: rgba(255, 203, 76, .18);
  color: var(--ink);
  font-size: var(--text-15);
  line-height: 1.55;
}

/* Im Beta-Abschnitt (Sandgrund) auf Papier, sonst wirkt das Gelb trueb.
   Der Selektor muss .beta-copy > p:not(.eyebrow) schlagen (Farbe #5f513f). */
.beta-copy > p.beta-status:not(.eyebrow) {
  background: var(--paper);
  color: var(--ink);
  font-size: var(--text-15);
}

.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: var(--text-14);
  font-weight: 700;
}

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

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

.parent-section,
.pricing-section,
.questions-section,
.beta-section {
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
}

.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: var(--text-17);
}

.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: var(--text-17);
}

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

.parent-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .38fr);
  align-items: center;
  gap: clamp(2.5rem, 5vw, 5rem);
}

.parent-copy h2 {
  margin-bottom: 2rem;
}

/* Vier Einwaende als Karten, zwei mal zwei. Dieselbe asymmetrische Ecke wie
   die Preiskacheln, aber ohne Versatzschatten: die Karten sind Antworten,
   keine Angebote. */
.faq-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.faq-card {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 1.4rem 1.5rem 1rem;
  border-radius: 24px 8px 24px 8px;
  background: var(--paper);
}

.faq-card h3 {
  font-size: var(--text-17);
  letter-spacing: -.025em;
}

.parent-section .faq-card p {
  flex: 1;
  color: var(--ink-soft);
  font-size: var(--text-15);
  line-height: 1.55;
}

.faq-card__link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  align-self: flex-start;
  color: var(--lilac-deep) !important;
  font-size: var(--text-14);
  font-weight: 750;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.faq-card__link:hover {
  color: var(--ink) !important;
}

.parent-visual {
  position: relative;
}

.parent-screen {
  position: relative;
  width: min(100%, 280px);
  margin-inline: auto;
  overflow: hidden;
  border: 7px solid var(--ink);
  border-radius: var(--radius-device);
  background: var(--paper);
  box-shadow: 22px 28px 0 rgba(38, 120, 107, .16), var(--shadow-phone);
  transform: rotate(2deg);
}

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

.price-card--family .price span,
.price-card--family .price-year {
  color: var(--ink);
}

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

/* Kopf: gross die Beta, daneben der Knopf. Darunter "Nach der Beta" als
   Zwischenstufe, damit niemand die Preise fuer den Beta-Preis haelt. */
.pricing-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 3rem;
}

.pricing-section .pricing-lead {
  max-width: 52ch;
  margin-top: 1rem;
  color: var(--ink);
  font-size: var(--text-17);
}

.pricing-section .pricing-sub {
  margin: clamp(2.5rem, 4vw, 3.5rem) 0 .6rem;
  font-size: var(--text-20) !important;
}

/* Hinweis unter "Geplante Preise nach der Beta" (08.10.2026): noch nichts
   ist kaeuflich, verbindlich ist erst der Preis beim Kauf. */
.pricing-section .pricing-note {
  max-width: 70ch;
  margin-bottom: 1.4rem;
  color: var(--ink);
  font-size: var(--text-15);
}

.price-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem;
}

.price-card {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 1rem 1.5rem;
  padding: 1.6rem 1.8rem;
  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: var(--text-12);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.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: var(--text-13);
  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: var(--text-14);
  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: "";
}

/* Zugangszeile, Versprechen, Sozialtarif und Empfehlung: alles Auskunft,
   keine Werbung. Deshalb schmal und in Textfarbe, nicht als eigene Sektion. */
.pricing-section .pricing-access {
  max-width: 70ch;
  margin-top: 1.6rem;
  color: var(--ink);
  font-size: var(--text-15);
}

.promise-band {
  display: grid;
  gap: .5rem;
  margin-top: 2rem;
  padding: 1.3rem 1.6rem;
  border-left: 6px solid var(--lilac);
  border-radius: 8px 24px 24px 8px;
  background: var(--lavender);
}

.pricing-section .promise-band__lead {
  color: var(--ink);
  font: 700 var(--text-17)/1.4 "Poppins", "Inter", sans-serif;
  letter-spacing: -.02em;
}

.pricing-section .promise-band__fine {
  color: var(--ink);
  font-size: var(--text-13);
  line-height: 1.55;
}

.pricing-extras {
  display: grid;
  gap: .5rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}

.pricing-extras li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--ink-soft);
  font-size: var(--text-14);
}

.pricing-extras li::before {
  position: absolute;
  top: .55rem;
  left: 0;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--peach-deep);
  content: "";
}

.pricing-extras a {
  color: var(--lilac-deep) !important;
  font-weight: 700;
  text-decoration: underline;
  overflow-wrap: anywhere;
}

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

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

.questions-intro h2 {
  font-size: clamp(2rem, 3.4vw, 3.1rem);
}

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

.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: var(--text-17);
}

.beta-copy .beta-steps__title {
  margin-top: 1.8rem;
  font-size: var(--text-17);
  letter-spacing: -.02em;
}

/* Drei nummerierte Schritte. Die Zahl kommt aus dem CSS-Zaehler, damit ein
   Screenreader sie als Liste mit Position ansagt (ol) und sie nicht doppelt
   vorliest. */
.beta-steps {
  display: grid;
  gap: .7rem;
  margin: .9rem 0 1.5rem;
  padding: 0;
  counter-reset: schritt;
  list-style: none;
}

.beta-steps li {
  position: relative;
  min-height: 2rem;
  padding: .2rem 0 0 2.7rem;
  color: var(--ink);
  font-weight: 650;
  counter-increment: schritt;
}

.beta-steps li::before {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  content: counter(schritt);
  font: 700 var(--text-14)/1 "Poppins", sans-serif;
}

.beta-copy .beta-parent-note {
  color: var(--ink) !important;
  font-size: var(--text-14) !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: var(--text-13);
  font-weight: 750;
}

.beta-form input,
.beta-form select {
  width: 100%;
  min-height: 50px;
  padding: .7rem .8rem;
  border: 1.5px solid #8c92a5;
  border-radius: var(--radius-small);
  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: var(--radius-small);
  color: var(--ink);
  font-size: var(--text-14);
  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);
}

/* Volljaehrigkeit per Checkbox statt Altersfeld (25.09.2026). Das ganze
   Label ist die Klickflaeche, mindestens 44 px hoch. */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  min-height: 44px;
  padding: .2rem 0;
  color: var(--ink);
  font-size: var(--text-14);
  font-weight: 600;
  line-height: 1.45;
  cursor: pointer;
}

.beta-form .form-check input {
  flex: none;
  width: 22px;
  min-height: 0;
  height: 22px;
  margin: .1rem 0 0;
  padding: 0;
  accent-color: var(--lilac-deep);
  cursor: pointer;
}

.form-note {
  color: var(--ink-soft);
  font-size: var(--text-12);
  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: var(--radius-small);
  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: var(--text-14);
}

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

.footer-main nav a,
.footer-contact a {
  min-height: 44px;
  color: var(--white);
  font-size: var(--text-14);
  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: var(--text-12);
}

.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: var(--text-12);
}

[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;
}

/* Bruecke direkt nach der 3D-Sektion: wer eine Situation wiedererkannt hat,
   soll hier ohne Umweg in die Beta. Bewusst niedrig, keine eigene Buehne. */
.bridge-section {
  padding-block: 2.2rem;
  background: var(--lavender);
}

.bridge-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem 2.5rem;
}

.landing-body .bridge-title {
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
}

.bridge-section .bridge-lead {
  margin-top: .3rem;
  color: var(--ink);
  font-size: var(--text-17);
}

/* Der Text nimmt den freien Platz, der Knopf steht daneben. Bricht die
   Zeile um (schmale Fenster), steht der Knopf linksbuendig unter dem Text,
   nicht rechtsbuendig in einer schmalen Spalte. */
.bridge-layout > :first-child {
  flex: 1 1 30rem;
  max-width: 46rem;
}

.bridge-action {
  display: grid;
  justify-items: start;
  gap: .6rem;
}

.bridge-section .bridge-meta {
  color: var(--ink);
  font-size: var(--text-13);
  font-weight: 650;
}

/* Feste Leiste am Handy. Unsichtbar, bis landing.js sie zeigt. visibility
   statt display, damit sie weich hereinfahren kann und im versteckten
   Zustand weder per Tab noch per Screenreader erreichbar ist. */
.sticky-cta {
  display: none;
}

@media (max-width: 699px) {
  /* Am Handy steht hier schon die feste Leiste mit demselben Ziel. */
  .pricing-head .landing-button {
    display: none;
  }

  html {
    /* Fokussierte Felder und Anker nicht unter der Leiste verstecken. */
    scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }

  .sticky-cta {
    position: fixed;
    z-index: 90;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(31, 41, 71, .12);
    background: rgba(255, 253, 250, .96);
    box-shadow: 0 -10px 24px rgba(31, 41, 71, .10);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
  }

  .sticky-cta.is-visible {
    transform: none;
    visibility: visible;
    transition: transform .25s ease, visibility 0s;
  }

  .sticky-cta__button {
    width: 100%;
    min-height: 50px;
  }
}

@media (max-width: 699px) and (prefers-reduced-motion: reduce) {
  .sticky-cta,
  .sticky-cta.is-visible {
    transition: 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);
  }

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

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

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

  .price-card {
    grid-template-columns: 1fr;
  }
}

@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: var(--text-16);
  }

  .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,
  .parent-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;
  }

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

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


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

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

  .landing-brand {
    font-size: var(--text-17);
  }

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

  .landing-button--small {
    min-height: 44px;
    padding: .65rem .7rem;
    font-size: var(--text-12);
  }

  .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: var(--text-14);
  }

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

  .hero-success strong {
    font-size: var(--text-12);
  }

  .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;
  }

  .faq-cards {
    grid-template-columns: 1fr;
  }

  /* Am Handy nur ein Beleg, kein zweiter Bildschirm: kleiner und ohne
     Drehung, damit er nicht breiter wirkt als der Text darueber. */
  .parent-screen {
    width: 170px;
    border-width: 5px;
    border-radius: 28px;
    box-shadow: 12px 14px 0 rgba(38, 120, 107, .16), var(--shadow-phone);
    transform: none;
  }

  .price-list {
    grid-template-columns: 1fr;
  }

  .faq-card {
    padding: 1.2rem 1.2rem .6rem;
  }

  .bridge-action {
    justify-items: start;
  }

  .bridge-action,
  .bridge-action .landing-button {
    width: 100%;
  }


  .price-card {
    padding: 1.4rem;
  }

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

  .beta-abby {
    width: 180px;
  }

  /* Zwei Spalten bleiben auch am Handy: Alter und Knoepfe sind kurz, und
     jede gesparte Zeile rueckt den Absende-Knopf naeher. */
  .form-pair {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  }

  .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 {
    left: -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;
  }
}

/* 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.
   Seit dem 25.09.2026 stehen alle Fragen zu: der Block beantwortet nur noch,
   was sonst nirgends auf der Seite steht, und soll kurz bleiben. */
.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: var(--text-16);
  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: var(--text-15);
  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; }
}

@media (max-width: 640px) {
  .question-list .question-item__a { padding-right: 0; }
}