/* =========================================================
   Numa Unterseiten (Platz, Bestaetigen, Abmelden, 404, Rechtliches)
   im Look der Startseite: bewegter Blau-Verlauf mit Korn (brand.css),
   Geist, weisse Schrift, grosse Zeilen, Liquid Glass, weisse Knoepfe
   mit Tinte. Liegt ueber waitlist.css; alles auf body.sub begrenzt.
   ========================================================= */

body.sub {
  --ink: #0B0B0C;
  --ink-2: #26272A;
  --night-ink: #FFFFFF;
  --soft: rgba(255, 255, 255, .78);   /* Fliesstext zweiter Stufe */
  --quiet: rgba(255, 255, 255, .62);  /* Notizen, Fuss */
  --sky-ink: #8FD3FF;                 /* helles Blau wie "to life." */
  --signal: #84B3CE;
  --danger: #FFB3A1;
  --f-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --m: clamp(16px, 4.2vw, 48px);
  --r: 24px;
  --ease: cubic-bezier(.16, 1, .3, 1);

  display: flex;
  flex-direction: column;
  background: #0D2238;
  color: #FFFFFF;
  font-family: var(--f-sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.005em;
  color-scheme: dark;
}
/* Punkteraster aus waitlist.css aus, dafuer Korn wie auf der Startseite */
body.sub::before { content: none; }
body.sub::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 240px 240px;
  opacity: .42;
  mix-blend-mode: overlay;
}
.sub ::selection { background: var(--sky-ink); color: var(--ink); }
.sub :focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; border-radius: 8px; }
.sub .skip-link:not(:focus) { top: 0; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; padding: 0; }

/* Waitlist.css setzt Etiketten in Versalien mit Sperrung: hier nicht */
.sub .mono { font-family: inherit; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; }

/* ---------- Kopf (wie Startseite) ---------- */

.sub .header { max-width: none; width: 100%; padding: max(14px, env(safe-area-inset-top)) var(--m) 10px; }
.sub .brand { gap: 10px; color: #FFFFFF; }
.sub .brand__logo { display: block; width: 26px; }
.sub .brand__word { font-size: 20px; font-weight: 600; letter-spacing: -.03em; }
.sub .header__link { color: #FFFFFF; font-size: 14px; font-weight: 500; }
.sub .lang { padding: 3px; border-radius: 999px; }
.sub .lang button {
  min-width: 44px; min-height: 34px;
  border: 0; border-radius: 999px;
  color: #FFFFFF;
  font-size: 13px; font-weight: 500; letter-spacing: 0;
}
.sub .lang button[aria-pressed="true"] { background: #FFFFFF; color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .sub .lang button:not([aria-pressed="true"]):hover { background: rgba(255, 255, 255, .16); color: #FFFFFF; }
}

/* ---------- Seite ---------- */

.sub .page {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  padding: 0 var(--m);
}

/* ---------- Knoepfe (wie Startseite: weiss, Tinte, ganz rund) ---------- */

.sub .btn-cta {
  width: auto;
  min-width: min(100%, 320px);
  min-height: 58px;
  margin: 0;
  padding: 6px 6px 6px 26px;
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: none; /* taste-skill-ignore: hebt Kante aus waitlist.css auf */
  color: var(--ink);
  transition: transform .14s var(--ease), background .2s;
}
.sub .btn-cta:active, .sub .btn-cta.is-pressed { transform: scale(.98); box-shadow: none; } /* taste-skill-ignore: hebt Kante auf */
@media (hover: hover) { .sub .btn-cta:hover { background: #E8EEF6; filter: none; } }
.sub .btn-cta__eyebrow { display: none; }
.sub .btn-cta .roll { font-size: 17px; font-weight: 600; letter-spacing: -.01em; text-transform: none; }
.sub .btn-cta__icon { width: 46px; height: 46px; border-radius: 50%; background: var(--ink); color: #FFFFFF; }
.sub .btn-cta__icon svg { width: 20px; height: 20px; stroke-width: 2.2; }
.sub .btn-cta[aria-busy="true"]::after { background: var(--ink); box-shadow: -20px 0 0 var(--ink), 20px 0 0 var(--ink); } /* taste-skill-ignore: Lade-Punkte */

.sub .btn-line {
  width: auto;
  min-width: min(100%, 320px);
  min-height: 58px;
  margin: 0;
  padding: 8px 22px 8px 26px;
  border: 0;
  border-radius: 999px;
  color: #FFFFFF;
  transition: transform .14s var(--ease), background .2s;
}
.sub .btn-line:active:not(:disabled) { transform: scale(.98); background: rgba(255, 255, 255, .12); box-shadow: none; } /* taste-skill-ignore: hebt Kante auf */
.sub .btn-line:disabled { color: var(--quiet); transform: none; }
.sub .btn-line__eyebrow { color: var(--quiet); font-size: 13px; text-transform: none; letter-spacing: 0; }
.sub .btn-line__label { font-size: 17px; font-weight: 600; letter-spacing: -.01em; text-transform: none; }

.sub .btn-ink {
  min-height: 52px;
  margin: 0;
  padding: 0 22px;
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: none; /* taste-skill-ignore: hebt Kante auf */
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  transition: transform .14s var(--ease), background .2s;
}
.sub .btn-ink:active { transform: scale(.97); box-shadow: none; } /* taste-skill-ignore: hebt Kante auf */
@media (hover: hover) { .sub .btn-ink:hover { background: #E8EEF6; filter: none; } }

.sub .btn-text,
.sub .u-link {
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .4);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color .2s;
}
@media (hover: hover) { .sub .btn-text:hover, .sub .u-link:hover { text-decoration-color: #FFFFFF; text-decoration-thickness: 1px; } }
.sub .form__error { color: var(--danger); font-weight: 500; }

/* ---------- Liquid Glass (Rezept der Startseite) ---------- */

.sub .lang,
.sub .glass,
.sub .status,
.sub .badge {
  position: relative;
  border: 0;
  background: linear-gradient(155deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .03) 42%, rgba(255, 255, 255, .02) 60%, rgba(255, 255, 255, .08)); /* taste-skill-ignore: Glas-Koerper */
  -webkit-backdrop-filter: blur(8px) saturate(125%) brightness(1.05);
  backdrop-filter: blur(8px) saturate(125%) brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -1px 0 rgba(255, 255, 255, .16),
    inset 0 0 0 .5px rgba(255, 255, 255, .28),
    inset 10px 12px 22px -14px rgba(255, 255, 255, .5),
    inset -10px -12px 22px -14px rgba(255, 255, 255, .26),
    0 1px 2px rgba(0, 6, 24, .25),
    0 26px 52px -12px rgba(0, 6, 24, .55); /* taste-skill-ignore: Glasdicke */
  color: #FFFFFF;
}
.sub .btn-line {
  background: linear-gradient(155deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .03) 42%, rgba(255, 255, 255, .02) 60%, rgba(255, 255, 255, .08)); /* taste-skill-ignore: Glas-Knopf */
  -webkit-backdrop-filter: blur(8px) saturate(125%);
  backdrop-filter: blur(8px) saturate(125%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(255, 255, 255, .22); /* taste-skill-ignore: Glaskante */
}
/* Lichtkante: hell oben links und unten rechts */
.sub .lang::before,
.sub .glass::before,
.sub .status::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 1.5px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, #FFFFFF, rgba(255, 255, 255, .3) 18%, rgba(255, 255, 255, .04) 40%, rgba(255, 255, 255, .04) 62%, rgba(255, 255, 255, .35) 84%, rgba(255, 255, 255, .9)); /* taste-skill-ignore: Lichtkante */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
/* Glanz, der der Maus folgt, und ein farbiger Rand (nach 21st.dev "Glass Card"
   von educalvolpz; js/sheen.js setzt --sx/--sy weich nachgezogen) */
.sub .glass::after,
.sub .status::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(260px circle at var(--sx, 30%) var(--sy, 28%), rgba(255, 255, 255, .16), rgba(255, 255, 255, .04) 48%, transparent 74%),
    linear-gradient(125deg, rgba(120, 220, 255, .16) 0%, transparent 34%, transparent 66%, rgba(255, 140, 220, .12) 100%); /* taste-skill-ignore: Glanz auf Glas */
  mix-blend-mode: plus-lighter;
  opacity: var(--shine, .55);
  transition: opacity .4s var(--ease);
}
.sub .glass > *,
.sub .status > * { position: relative; z-index: 2; }

/* ---------- Die Numa-Karte (mattschwarz, wie in der Szene) ---------- */

.sub .ncard {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 60px rgba(0, 4, 16, .55); /* taste-skill-ignore: Kante der Karte auf dunklem Grund */
}

/* =========================================================
   Einfache Seiten: Bestaetigen, Abmelden, 404
   Grosse Zeile links, Karte rechts (Handy: Karte oben)
   ========================================================= */

.sub .simple {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  align-content: center;
  gap: 20px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(24px, 6vh, 72px) 0 clamp(40px, 8vh, 96px);
  text-align: left;
}
.sub .simple .mono { color: var(--soft); font-size: 17px; }
.sub .simple__card { position: relative; width: clamp(150px, 42vw, 220px); margin-bottom: 12px; }
/* Licht hinter der Karte, damit sie nicht im Dunkel verschwindet */
.sub .simple__card::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 260%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(120, 200, 255, .30), rgba(60, 140, 230, .12) 55%, transparent); /* taste-skill-ignore: Licht hinter der Karte */
  pointer-events: none;
}
.sub .simple__card .ncard { transform: rotate(-12deg); animation: card-float 6s ease-in-out infinite; }
@keyframes card-float { 0%, 100% { translate: 0 -6px; rotate: 0deg; } 50% { translate: 0 6px; rotate: 2deg; } }
.sub .simple__title {
  max-width: 13ch;
  font-size: clamp(48px, 11vw, 128px);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.05em;
  text-wrap: balance;
}
.sub .simple__text { max-width: 44ch; color: var(--soft); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; }
.sub .simple__actions { justify-items: start; gap: 18px; width: auto; margin-top: 12px; }
.sub #state-loading .simple__card .ncard { animation: card-tap 1.6s var(--ease) infinite; }
@keyframes card-tap { 0%, 100% { transform: rotate(-12deg) translateY(0); } 40% { transform: rotate(-4deg) translateY(-14px) scale(1.04); } }

@media (min-width: 960px) {
  .sub .simple {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(32px, 5vw, 96px);
    align-items: center;
  }
  .sub .simple > :not(.simple__card) { grid-column: 1; }
  .sub .simple > .simple__card { grid-column: 2; grid-row: 1 / span 4; justify-self: center; width: min(100%, 360px); margin: 0; }
}

/* =========================================================
   Platz-Seite (/me)
   ========================================================= */

.sub .me__main {
  display: grid;
  gap: 18px;
  width: 100%;
  margin: 0;
  padding: clamp(16px, 4vh, 48px) 0 32px;
}
.sub .me__hello { gap: 8px; }
.sub .badge {
  min-height: 34px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.sub .badge:first-child { color: #FFFFFF; }
.sub .badge:first-child svg { color: #7BE7C4; }
.sub .badge svg { stroke-width: 2.6; }
.sub .badge:empty { display: none; }
.sub .me__greet {
  max-width: 14ch;
  font-size: clamp(44px, 9vw, 104px);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.05em;
  text-wrap: balance;
}

/* Platz: riesige Nummer, das # in hellem Blau und duenn */
.sub .me__place {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 22px 26px 26px;
  border-radius: 28px;
}
.sub .me__place .tile-icon { display: none; }
.sub .me__place-label { color: var(--soft); font-size: 17px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.sub .me__num {
  font-size: clamp(96px, 22vw, 220px);
  font-weight: 700;
  line-height: .86;
  letter-spacing: -.06em;
  font-variant-numeric: tabular-nums;
}
.sub .me__num .hash { margin-right: .04em; color: var(--sky-ink); font-size: 1em; font-weight: 300; }

/* Status: Glas; gekauft = weisse Flaeche mit Tinte */
.sub .me__status { gap: 14px; }
.sub .me__status > p { color: var(--soft); font-size: 15px; }
.sub .status { gap: 12px; padding: 22px 24px; border-radius: var(--r); }
.sub .status__title { font-size: clamp(24px, 3vw, 32px); font-weight: 600; line-height: 1.1; letter-spacing: -.035em; }
.sub .status__text { color: var(--soft); font-size: 17px; }
.sub .status--ink { background: #FFFFFF; color: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
.sub .status--ink .status__text { color: #3A3D44; }
.sub .status--ink::before, .sub .status--ink::after { content: none; }

/* Code: Tinten-Ticket mit Kerben wie der Preis im Knopf der Startseite */
.sub .code { gap: 10px; flex-wrap: wrap; }
.sub .code__value {
  min-height: 58px;
  padding: 10px 20px;
  border: 0;
  border-radius: 14px;
  background: var(--ink);
  color: #FFFFFF;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .12em;
  -webkit-mask: radial-gradient(circle 7px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat; /* taste-skill-ignore: Maske */
  mask: radial-gradient(circle 7px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat; /* taste-skill-ignore: Maske */
}
.sub .code .btn-ink { min-height: 58px; }
.sub .timer .mono { color: var(--soft); }
.sub .timer__value { font-size: clamp(32px, 6vw, 48px); font-weight: 600; letter-spacing: -.03em; }
.sub .me__status .btn-cta { width: 100%; justify-content: space-between; }

.sub .me__insta { justify-content: space-between; }

/* Countdown (wie im Drop der Startseite) */
.sub .me__drop { gap: 14px; padding: 22px; border-radius: var(--r); }
.sub .countdown__head { color: var(--soft); font-size: 15px; }
.sub .countdown__cells { gap: 8px; }
.sub .countdown__cell { padding: 16px 6px 12px; border: 0; border-radius: 18px; background: rgba(255, 255, 255, .07); box-shadow: none; } /* taste-skill-ignore: hebt Kante auf */
.sub .countdown__num { font-size: clamp(32px, 6vw, 48px); font-weight: 600; letter-spacing: -.03em; }
.sub .countdown__label { color: var(--soft); font-size: 14px; }

.sub .me__manage { gap: 8px; padding: 22px 24px 18px; border-radius: var(--r); }
.sub .me__manage h2 { color: #FFFFFF; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.sub .me__manage p { color: var(--soft); font-size: 16px; }
.sub .me__manage .btn-text { padding: 0; color: #FFFFFF; }
.sub .me__manage .actions { margin: 4px 0 0; }

/* Laden / Fehler auf /me: wie die einfachen Seiten */
.sub.me .simple { min-height: 50svh; }

.sub .me__side { display: grid; gap: 18px; align-content: start; }

/* Die Numa-Karte rechts in der Platz-Kachel */
.sub .me__place { grid-template-columns: minmax(0, 1fr) auto; align-items: end; overflow: hidden; }
.sub .me__card { width: clamp(96px, 26vw, 260px); margin: 0 -8px -8px 0; transform: rotate(-12deg) translateY(8%); }

@media (min-width: 960px) {
  .sub .me__main {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(32px, 5vw, 96px);
    row-gap: 20px;
    align-items: start;
  }
  .sub .me__main > * { grid-column: 1; }
  .sub .me__main > .me__side { grid-column: 2; grid-row: 3 / span 3; }
  .sub .me__side > .me__drop { order: -1; }
  .sub .me__side > .me__insta { order: 1; }
  .sub .me__side > .me__manage { order: 2; }
}

/* =========================================================
   Rechtliches
   ========================================================= */

.sub .legal__back { max-width: 72ch; margin: 8px 0 0; }
.sub .legal__back .btn-text { display: inline-flex; align-items: center; min-height: 44px; }
.sub .legal {
  max-width: 72ch;
  margin: 8px 0 0;
  padding: 0 0 24px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none; /* taste-skill-ignore: hebt Kante auf */
}
.sub .legal h1 {
  margin: 24px 0 28px;
  font-size: clamp(44px, 8vw, 96px);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.05em;
  hyphens: auto;
}
.sub .legal h2 {
  margin: 48px 0 12px;
  padding: 0;
  border: 0;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.03em;
}
.sub .legal h3 { margin: 24px 0 8px; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.sub .legal p,
.sub .legal li { color: rgba(255, 255, 255, .86); font-size: 17px; font-weight: 400; line-height: 1.6; }
.sub .legal b,
.sub .legal strong { color: #FFFFFF; font-weight: 600; }
.sub .legal li::marker { color: var(--sky-ink); }
.sub .legal a { color: var(--sky-ink); font-weight: 500; text-underline-offset: 3px; }
.sub .legal .placeholder { background: rgba(255, 194, 61, .22); color: #FFFFFF; }
.sub .legal .notice { border: 0; border-radius: 18px; background: rgba(255, 255, 255, .08); color: #FFFFFF; }
@media (min-width: 960px) {
  .sub .legal { padding: 0 0 40px; }
}

/* =========================================================
   Fuss: Instagram gross als Schlusszeile, darunter Rechtliches
   ========================================================= */

.sub .foot {
  display: grid;
  gap: 14px;
  width: 100%;
  max-width: none;
  margin: auto 0 0;
  padding: 64px 0 max(28px, env(safe-area-inset-bottom));
  border: 0;
  color: var(--quiet);
  font-size: 14px;
}
.sub .foot__brand { order: 2; gap: 14px; }
.sub .foot nav { order: 3; gap: 4px 18px; }
.sub .foot nav a { min-height: 44px; color: var(--quiet); }
@media (hover: hover) { .sub .foot nav a:hover, .sub .foot__social:hover { color: #FFFFFF; text-decoration: none; } }
.sub .foot__social { width: auto; height: auto; margin: 0; border-radius: 0; color: #FFFFFF; font-size: clamp(28px, 5vw, 56px); font-weight: 600; letter-spacing: -.05em; line-height: 1; text-decoration: none; }
.sub .foot__social svg { display: none; }
.sub .foot__social::after { content: "@numa_community"; }
@media (hover: hover) { .sub .foot__social:hover { color: var(--sky-ink); } }
.sub .foot__brand { display: grid; justify-items: start; }
.sub .foot__brand > span { order: 2; }
@media (min-width: 960px) {
  .sub .foot { grid-template-columns: 1fr auto; align-items: end; }
  .sub .foot__brand { grid-column: 1 / -1; }
  .sub .foot__brand > span { display: none; }
  .sub .foot nav { grid-column: 1; }
  .sub .foot::after { content: "© Numa 2026 · Mels"; grid-column: 2; grid-row: 2; align-self: center; }
}

/* ---------- Eintritt: Teile steigen nacheinander auf (nur Bewegung, nie ohne Inhalt) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .sub .simple:not([hidden]) > *,
  .sub .me__main:not([hidden]) > *,
  .sub .legal > h1,
  .sub .legal__back {
    animation: sub-rise .8s var(--ease) both;
    animation-delay: calc(var(--i, 0) * 80ms);
  }
  .sub .simple > :nth-child(2), .sub .me__main > :nth-child(2) { --i: 1; }
  .sub .simple > :nth-child(3), .sub .me__main > :nth-child(3) { --i: 2; }
  .sub .simple > :nth-child(4), .sub .me__main > :nth-child(4) { --i: 3; }
  .sub .me__main > :nth-child(5) { --i: 4; }
  .sub .me__main > :nth-child(6) { --i: 5; }
  .sub .me__main > :nth-child(7) { --i: 6; }
  .sub .legal > h1 { --i: 1; }
  @keyframes sub-rise { from { opacity: 0; transform: translateY(24px); } }
}
@media (prefers-reduced-motion: reduce) {
  .sub .simple__card .ncard { animation: none !important; }
}

/* ---------- Feinschliff nach dem ersten Blick ---------- */

/* Programmatisch fokussierte Ueberschriften (Fehler/Erfolg) ohne Rahmen */
.sub [tabindex="-1"]:focus { outline: none; }

/* Knoepfe auf den einfachen Seiten: eine Breite, Links darunter links */
.sub .btn-cta, .sub .btn-line { container-type: normal; }
.sub .simple__actions { justify-items: stretch; width: 100%; max-width: 400px; }
.sub .simple__actions > .u-link, .sub .simple__actions > .form__error { justify-self: start; }
.sub .simple__actions .btn-cta { justify-content: space-between; }
.sub .simple__card { margin-left: 10px; }

/* Rechtliches breit: Titel links und klebend, Text rechts */
@media (min-width: 960px) {
  .sub .legal__back { max-width: none; }
  .sub .legal {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(32px, 5vw, 96px);
    max-width: none;
    align-items: start;
  }
  .sub .legal > * { grid-column: 2; max-width: 68ch; }
  .sub .legal > h1 { grid-column: 1; grid-row: 1 / span 200; position: sticky; top: 32px; margin-top: 8px; }
  .sub .legal > h2:first-of-type, .sub .legal > h1 + * { margin-top: 16px; }
}

/* Licht hinter der Karte darf nie seitlich scrollen lassen */
.sub .page { overflow-x: clip; }

/* Grosse Titel nur auf schmalen Bildschirmen trennen (Desktop: "Fra-gen" vermeiden) */
@media (min-width: 700px) { .sub .legal h1 { hyphens: manual; } }