@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/_astro/manrope-latin-wght-normal.DHIcAJRg.woff2") format("woff2");
}

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/_astro/bricolage-grotesque-latin-wght-normal.DLoelf7F.woff2") format("woff2");
}

html.portal-signal-active {
  background: #090c0b;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body.portal-signal {
  --ps-bg: var(--au-bg, #090c0b);
  --ps-surface: var(--au-bg2, #111714);
  --ps-panel: var(--au-card, rgba(245, 242, 233, 0.055));
  --ps-panel-strong: var(--au-card2, rgba(245, 242, 233, 0.085));
  --ps-line: var(--au-line, rgba(245, 242, 233, 0.13));
  --ps-line-soft: var(--au-line2, rgba(245, 242, 233, 0.075));
  --ps-text: var(--au-text, #f5f2e9);
  --ps-soft: var(--au-text2, rgba(245, 242, 233, 0.68));
  --ps-dim: var(--au-text3, rgba(245, 242, 233, 0.44));
  --ps-jade: var(--au-acc, #2ed9a6);
  --ps-coral: var(--au-acc2, #ff735f);
  margin: 0;
  min-width: 280px;
  /* 04.09.2026 - Mert: "die section wackelt hart beim runterscrollen, muss
     fluessiger sein."
     Die Ursache lag hier: `overflow-x: hidden` macht den Body zu einem
     eigenen Scroll-Behaelter. Damit war jedes `position: sticky` auf der
     Seite wirkungslos (es klebt dann an diesem Behaelter, und der bewegt
     sich nie) - der Ablauf musste per Skript nachgeschoben werden, und ein
     per Skript gesetztes transform kommt immer einen Frame nach dem
     Scrollen: genau das Wackeln.
     `overflow-x: clip` schneidet genauso ab, erzeugt aber KEINEN
     Scroll-Behaelter. Damit klebt sticky wieder am Fenster und laeuft im
     Compositor - ohne Skript, ohne Nachlauf, ohne Wackeln.
     Die erste Zeile bleibt als Rueckfall fuer Browser ohne `clip`. */
  overflow-x: hidden;
  overflow-x: clip;
  background: var(--ps-bg);
  color: var(--ps-text);
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

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

/* The previous scroll film and long-form landing page remain in the source as a
   reversible fallback, but they no longer load or take up layout space. */
body.portal-signal > #world,
body.portal-signal > .au-staub,
body.portal-signal > .au-kannst,
body.portal-signal > .au-px,
body.portal-signal > .au-aufdeck,
body.portal-signal > .au-mp,
body.portal-signal > .dv {
  display: none !important;
}

body.portal-signal #dc-root,
body.portal-signal #dc-root > .sc-host,
body.portal-signal #dc-root .au-legacy-shell {
  min-height: 0 !important;
  height: auto !important;
  background: transparent !important;
}

body.portal-signal #dc-root .au-legacy-shell > :not(svg):not([data-au-nav]) {
  display: none !important;
}

body.portal-signal [data-au-nav] {
  border-bottom-color: rgba(245, 242, 233, .1) !important;
  background: rgba(9, 12, 11, .58) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 18px 48px -38px rgba(0, 0, 0, .94) !important;
  -webkit-backdrop-filter: blur(28px) saturate(138%);
  backdrop-filter: blur(28px) saturate(138%);
}

body.portal-signal [data-au-nav] > div {
  max-width: 1240px !important;
}

body.portal-signal .au-management-cta,
body.portal-signal .au-profile-cta {
  border-radius: 8px;
  border-color: rgba(245, 242, 233, .12);
  background: linear-gradient(145deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .018));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .075), 0 16px 34px -28px rgba(0, 0, 0, .9);
  -webkit-backdrop-filter: blur(20px) saturate(128%);
  backdrop-filter: blur(20px) saturate(128%);
}

body.portal-signal .au-profile-cta__avatar {
  border-radius: 6px;
}

.portal-signal-main {
  padding-top: 74px;
  background: var(--ps-bg);
}

.ps-wrap {
  width: min(1180px, calc(100% - 44px));
  margin: 0 auto;
}

.ps-hero {
  position: relative;
  min-height: calc(100svh - 122px);
  max-height: 820px;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid rgba(245, 242, 233, 0.14);
  background: #090c0b;
}

.ps-hero__media,
.ps-hero__shade {
  position: absolute;
  inset: 0;
}

.ps-hero__media {
  z-index: -3;
  display: grid;
  grid-template-columns: 1.15fr 0.9fr 0.95fr;
  gap: 2px;
  background: #090c0b;
}

.ps-hero__shot {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.ps-hero__shot img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 34%;
  filter: saturate(0.78) contrast(1.08) brightness(0.72);
  transform: scale(1.035);
  transition: transform 1s cubic-bezier(.2, .8, .2, 1), filter .8s ease;
}

.ps-hero__shot:nth-child(2) img { object-position: 50% 22%; }
.ps-hero__shot:nth-child(3) img { object-position: 50% 28%; }

.ps-hero__shade {
  z-index: -2;
  width: 64%;
  right: auto;
  background: rgba(6, 9, 8, 0.82);
  border-right: 1px solid rgba(245, 242, 233, 0.08);
}

.ps-hero__inner {
  min-height: inherit;
  display: flex;
  align-items: center;
  padding-block: 58px 54px;
}

.ps-hero__copy {
  width: min(640px, 57%);
}

.ps-kicker,
.ps-section-label {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ps-jade);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.ps-kicker::before,
.ps-section-label::before {
  content: "";
  width: 34px;
  height: 2px;
  flex: none;
  background: currentColor;
}

.ps-hero h1 {
  max-width: 9ch;
  margin: 22px 0 20px;
  color: #f7f5ef;
  font-family: "Bricolage Grotesque", "Manrope", sans-serif;
  font-size: 78px;
  font-weight: 760;
  line-height: 0.98;
  letter-spacing: 0;
  text-wrap: balance;
}

.ps-hero h1 span {
  display: block;
  color: #91f0d3;
}

.ps-hero__lead {
  max-width: 54ch;
  margin: 0;
  color: rgba(247, 245, 239, 0.72);
  font-size: 17px;
  line-height: 1.65;
  text-wrap: pretty;
}

.ps-hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 22px;
  margin-top: 30px;
}

.ps-primary,
.ps-text-link,
.ps-auth-cta,
.ps-footer-link {
  color: inherit;
  text-decoration: none;
}

.ps-primary {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 19px;
  border-radius: 8px;
  background: var(--ps-jade);
  color: #07120e;
  font-size: 14.5px;
  font-weight: 800;
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), background-color .22s ease;
}

.ps-primary svg,
.ps-text-link svg,
.ps-model-link svg,
.ps-auth-cta svg,
.ps-footer-link svg {
  width: 18px;
  height: 18px;
  flex: none;
  transition: transform .24s cubic-bezier(.2, .8, .2, 1);
}

.ps-primary:hover,
.ps-primary:focus-visible {
  transform: translateY(-2px);
  background: #63e7bf;
}

.ps-primary:hover svg,
.ps-primary:focus-visible svg,
.ps-text-link:hover svg,
.ps-text-link:focus-visible svg,
.ps-model-link:hover svg,
.ps-model-link:focus-visible svg,
.ps-auth-cta:hover svg,
.ps-auth-cta:focus-visible svg,
.ps-footer-link:hover svg,
.ps-footer-link:focus-visible svg {
  transform: translateX(4px);
}

.ps-text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-block: 10px;
  color: #f7f5ef;
  border-bottom: 1px solid rgba(247, 245, 239, 0.34);
  font-size: 14.5px;
  font-weight: 760;
  transition: color .2s ease, border-color .2s ease;
}

.ps-text-link:hover,
.ps-text-link:focus-visible {
  color: var(--ps-jade);
  border-color: var(--ps-jade);
}

.ps-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 18px;
  margin: 28px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(247, 245, 239, 0.15);
  list-style: none;
  color: rgba(247, 245, 239, 0.62);
  font-size: 12.5px;
  font-weight: 650;
}

.ps-proof li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ps-proof li::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--ps-jade);
  border-radius: 50%;
}

.ps-section {
  position: relative;
  padding: 104px 0;
  border-bottom: 1px solid var(--ps-line-soft);
  scroll-margin-top: 86px;
}

.ps-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
  align-items: end;
  gap: 46px;
}

.ps-section h2 {
  max-width: 15ch;
  margin: 18px 0 0;
  color: var(--ps-text);
  font-family: "Bricolage Grotesque", "Manrope", sans-serif;
  font-size: 48px;
  font-weight: 750;
  line-height: 1.04;
  letter-spacing: 0;
  text-wrap: balance;
}

.ps-section-intro {
  margin: 0;
  color: var(--ps-soft);
  font-size: 15.5px;
  line-height: 1.7;
  text-wrap: pretty;
}

.ps-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 62px;
  border-top: 1px solid var(--ps-line);
  border-bottom: 1px solid var(--ps-line);
}

.ps-principle {
  min-width: 0;
  padding: 28px 30px 30px 0;
}

.ps-principle + .ps-principle {
  padding-left: 30px;
  border-left: 1px solid var(--ps-line);
}

.ps-principle__value {
  display: block;
  margin-bottom: 25px;
  color: var(--ps-jade);
  font-family: "Bricolage Grotesque", "Manrope", sans-serif;
  font-size: 34px;
  font-weight: 760;
  line-height: 1;
  letter-spacing: 0;
}

.ps-principle h3 {
  margin: 0 0 9px;
  color: var(--ps-text);
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: 0;
}

.ps-principle p {
  margin: 0;
  color: var(--ps-soft);
  font-size: 13.5px;
  line-height: 1.65;
}

.ps-flow {
  margin-top: 52px;
}

.ps-flow__heading {
  margin: 0 0 24px;
  color: var(--ps-dim);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.ps-flow__timeline {
  --ps-flow-height: 100%;
  --ps-flow-rail-size: 100%;
  --ps-flow-marker-x: 31px;
  --ps-flow-marker-y: 31px;
  --ps-flow-row: 108px;
  position: relative;
  width: min(960px, 100%);
  margin-inline: auto;
}

.ps-flow__rail {
  position: absolute;
  z-index: 0;
  top: var(--ps-flow-marker-y);
  bottom: calc(var(--ps-flow-row) - var(--ps-flow-marker-y));
  left: var(--ps-flow-marker-x);
  width: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(to bottom, transparent, rgba(245, 242, 233, .17) 7%, rgba(245, 242, 233, .17) 93%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
}

.ps-flow__fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--ps-flow-height);
  display: block;
  border-radius: inherit;
  background: linear-gradient(to bottom, var(--ps-coral) 0%, #f4c95d 25%, #ff4b7e 50%, #4dd7d0 75%, var(--ps-jade) 100%);
  background-size: 100% var(--ps-flow-rail-size);
  background-repeat: no-repeat;
  box-shadow: 0 0 15px rgba(255, 115, 95, .42);
  will-change: height;
}

.ps-flow ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: signal-step;
}

.ps-flow li {
  --ps-step-accent: 255, 115, 95;
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: var(--ps-flow-row);
  padding: 0 0 0 104px;
  counter-increment: signal-step;
  color: var(--ps-soft);
  font-size: 15px;
  line-height: 1.6;
  transform: none;
  transition: transform .48s cubic-bezier(.2, .8, .2, 1);
}

.ps-flow li:nth-child(2) { --ps-step-accent: 244, 201, 93; }
.ps-flow li:nth-child(3) { --ps-step-accent: 255, 75, 126; }
.ps-flow li:nth-child(4) { --ps-step-accent: 77, 215, 208; }
.ps-flow li:nth-child(5) { --ps-step-accent: 46, 217, 166; }

.ps-flow li::before {
  content: counter(signal-step, decimal-leading-zero);
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 8px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ps-line);
  border-radius: 8px;
  background: var(--ps-bg);
  color: var(--ps-dim);
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 0 0 7px var(--ps-bg);
  transition: color .34s ease, border-color .34s ease, background-color .34s ease, box-shadow .34s ease, transform .34s cubic-bezier(.2, .8, .2, 1);
}

.ps-flow li::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 1px;
  left: 1px;
  width: 60px;
  height: 60px;
  border-radius: 14px;
  opacity: 0;
  transform: scale(.55);
  background: radial-gradient(circle, rgba(var(--ps-step-accent), .76) 0%, rgba(var(--ps-step-accent), .22) 42%, transparent 72%);
  filter: blur(7px);
  mix-blend-mode: screen;
  pointer-events: none;
}

.ps-flow__copy {
  min-height: var(--ps-flow-row);
  padding: 11px 0 25px;
  border-bottom: 1px solid var(--ps-line-soft);
}

.ps-flow li:last-child .ps-flow__copy {
  border-bottom: 0;
}

.ps-flow li strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ps-soft);
  font-family: "Bricolage Grotesque", "Manrope", sans-serif;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: 0;
  transition: color .34s ease;
}

.ps-flow__copy > span {
  display: block;
  max-width: 620px;
}

/* Einblenden statt Dauersichtbarkeit (Mert, 04.09.2026):
   "mach die texte erst dann wenn man zum naechsten runter scrollt, also
   1, text, 2, text, 3, text ... wenn man ganz oben bei der section ist,
   also bei 01, dann ist erst nix da."

   Beide Regeln gelten weiter, deshalb haengt das Verstecken ausschliesslich
   an `.is-timeline-ready` - und die Klasse setzt nur das Skript:
     - Ohne JavaScript greift keine dieser Regeln, alle fuenf Schritte stehen
       vollstaendig lesbar da.
     - Bei `prefers-reduced-motion` setzt das Skript sofort jeden Schritt auf
       `.is-active`, also ebenfalls voll sichtbar.
   Die Ueberschrift "Vom Angebot bis zur Auszahlung" bleibt immer stehen; die
   Flaeche ist also nie ein leeres Feld, sondern nur noch nicht durchlaufen. */
.ps-flow__timeline.is-timeline-ready li {
  opacity: 0;
  transform: translateY(26px);
}

/* Die Uebergaenge kommen erst einen Frame spaeter dazu (`is-scharf` setzt das
   Skript per requestAnimationFrame). Ohne diese Trennung startet beim Laden
   ein Uebergang von 1 nach 0 - gemessen als laufende CSSTransition mit den
   Stuetzwerten 1,0 - und alle fuenf Schritte blitzen sichtbar auf, bevor sie
   verschwinden. Genau das soll ja nicht passieren. */
.ps-flow__timeline.is-timeline-ready.is-scharf li {
  transition:
    opacity .52s cubic-bezier(.2, .8, .2, 1),
    transform .52s cubic-bezier(.2, .8, .2, 1);
}

.ps-flow__timeline.is-timeline-ready li.is-active {
  opacity: 1;
  transform: none;
}

/* Die Trennlinie unter einem Schritt gehoert zum naechsten - sie darf nicht
   schon dastehen, wenn darunter noch nichts sichtbar ist. */
.ps-flow__timeline.is-timeline-ready li .ps-flow__copy {
  border-bottom-color: transparent;
}

.ps-flow__timeline.is-timeline-ready.is-scharf li .ps-flow__copy {
  transition: border-color .52s ease;
}

.ps-flow__timeline.is-timeline-ready li.is-active .ps-flow__copy {
  border-bottom-color: var(--ps-line-soft);
}

/* Auch die graue Grundschiene faehrt erst mit dem ersten Schritt ein, sonst
   steht eine Linie im Nichts. */
.ps-flow__timeline.is-timeline-ready .ps-flow__rail {
  opacity: 0;
}

.ps-flow__timeline.is-timeline-ready.is-scharf .ps-flow__rail {
  transition: opacity .5s ease;
}

.ps-flow__timeline.is-timeline-ready.is-angelaufen .ps-flow__rail {
  opacity: 1;
}

.ps-flow li.is-active::before {
  color: rgb(var(--ps-step-accent));
  border-color: rgba(var(--ps-step-accent), .72);
  background:
    linear-gradient(rgba(var(--ps-step-accent), .12), rgba(var(--ps-step-accent), .12)),
    var(--ps-bg);
  box-shadow: 0 0 0 7px var(--ps-bg), 0 0 24px -8px rgba(var(--ps-step-accent), .9), inset 0 1px 0 rgba(255, 255, 255, .11);
  animation: ps-step-pop .56s cubic-bezier(.2, .9, .24, 1.25) both;
}

.ps-flow li.is-active::after {
  animation: ps-step-bloom .72s cubic-bezier(.2, .8, .2, 1) both;
}

.ps-flow li.is-active strong {
  color: var(--ps-text);
}

@keyframes ps-step-pop {
  0% { transform: scale(.72); }
  55% { transform: scale(1.14); }
  100% { transform: scale(1.04); }
}

@keyframes ps-step-bloom {
  0% { opacity: 0; transform: scale(.55); }
  38% { opacity: .78; }
  100% { opacity: 0; transform: scale(1.75); }
}

.ps-contract-note {
  margin-top: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 0;
  border-top: 1px solid var(--ps-line-soft);
  color: var(--ps-dim);
  font-size: 12.5px;
}

.ps-models {
  background: var(--ps-surface);
}

.ps-model-tool {
  margin-top: 46px;
  overflow: hidden;
  border: 1px solid var(--ps-line);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .012));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .075), 0 34px 74px -54px rgba(0, 0, 0, .96);
  -webkit-backdrop-filter: blur(26px) saturate(130%);
  backdrop-filter: blur(26px) saturate(130%);
}

.ps-model-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--ps-line);
}

.ps-model-tab {
  min-width: 0;
  min-height: 92px;
  padding: 17px 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ps-soft);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color .22s ease, color .22s ease;
}

.ps-model-tab + .ps-model-tab {
  border-left: 1px solid var(--ps-line);
}

.ps-model-tab span {
  display: block;
  font-size: 13.5px;
  font-weight: 780;
}

.ps-model-tab b {
  color: currentColor;
  font-family: "Bricolage Grotesque", "Manrope", sans-serif;
  font-size: 30px;
  font-weight: 760;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.ps-model-tab:hover,
.ps-model-tab:focus-visible {
  color: var(--ps-text);
  background: var(--ps-panel);
}

.ps-model-tab[aria-selected="true"] {
  color: #bff8e7;
  background: rgba(46, 217, 166, .12);
  box-shadow: inset 0 -2px 0 var(--ps-jade), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.ps-model-panel {
  min-height: 310px;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(300px, 1.2fr);
  gap: 54px;
  align-items: end;
  padding: 50px;
  background: rgba(3, 8, 6, .18);
}

.ps-model-panel[hidden] { display: none; }

.ps-model-panel__name {
  margin: 0;
  color: var(--ps-coral);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.ps-model-panel h3 {
  margin: 13px 0 0;
  color: var(--ps-text);
  font-family: "Bricolage Grotesque", "Manrope", sans-serif;
  font-size: 40px;
  line-height: 1.04;
  letter-spacing: 0;
}

.ps-model-panel__copy {
  margin: 0;
  color: var(--ps-soft);
  font-size: 15px;
  line-height: 1.75;
}

.ps-model-link {
  width: max-content;
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ps-text);
  font-size: 14px;
  font-weight: 780;
  text-decoration: none;
}

.ps-portal {
  overflow: hidden;
}

.ps-portal-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(400px, 1.1fr);
  gap: 72px;
  align-items: center;
}

.ps-portal h2 { max-width: 11ch; }

.ps-portal-copy > p:not(.ps-section-label) {
  max-width: 48ch;
  margin: 22px 0 0;
  color: var(--ps-soft);
  font-size: 15px;
  line-height: 1.7;
}

.ps-auth-cta {
  width: min(100%, 420px);
  min-height: 68px;
  margin-top: 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: center;
  gap: 16px;
  padding: 11px 11px 11px 19px;
  border: 1px solid var(--ps-line);
  border-radius: 8px;
  color: var(--ps-text);
  background: linear-gradient(145deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .014));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .075), 0 24px 46px -38px rgba(0, 0, 0, .92);
  -webkit-backdrop-filter: blur(22px) saturate(128%);
  backdrop-filter: blur(22px) saturate(128%);
  transition: border-color .2s ease, background-color .2s ease;
}

.ps-auth-cta:hover,
.ps-auth-cta:focus-visible {
  border-color: var(--ps-jade);
  background: var(--ps-panel);
}

.ps-auth-cta__text strong,
.ps-auth-cta__text span {
  display: block;
}

.ps-auth-cta__text strong { font-size: 14px; }
.ps-auth-cta__text span { margin-top: 4px; color: var(--ps-dim); font-size: 11.5px; }

.ps-auth-cta__icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--ps-coral);
  color: #150806;
}

.ps-portal-window {
  overflow: hidden;
  border: 1px solid var(--ps-line);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .062), rgba(255, 255, 255, .016));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .075), 0 34px 74px -48px rgba(0, 0, 0, .96);
  -webkit-backdrop-filter: blur(26px) saturate(130%);
  backdrop-filter: blur(26px) saturate(130%);
}

.ps-portal-window__bar {
  min-height: 54px;
  padding: 0 17px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid var(--ps-line);
  color: var(--ps-dim);
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
}

.ps-portal-window__bar::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--ps-jade);
}

.ps-portal-window__rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ps-portal-window__rows li {
  min-height: 92px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  padding: 18px;
  border-bottom: 1px solid var(--ps-line-soft);
}

.ps-portal-window__rows li:last-child { border-bottom: 0; }

.ps-portal-window__rows svg {
  width: 20px;
  height: 20px;
  color: var(--ps-jade);
}

.ps-portal-window__rows strong,
.ps-portal-window__rows span { display: block; }
.ps-portal-window__rows strong { color: var(--ps-text); font-size: 13.5px; }
.ps-portal-window__rows span { margin-top: 4px; color: var(--ps-dim); font-size: 11.5px; }

.ps-portal-window__state {
  align-self: center;
  margin: 0 !important;
  padding: 6px 9px;
  border: 1px solid var(--ps-line);
  border-radius: 999px;
  color: var(--ps-soft) !important;
  font-size: 10px !important;
  font-weight: 750;
  white-space: nowrap;
}

.ps-footer {
  padding: 84px 0 38px;
  background: #070a09;
  color: #f5f2e9;
}

.ps-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
  gap: 42px;
  align-items: end;
}

.ps-footer__brand {
  width: 64px;
  height: auto;
  display: block;
  margin-bottom: 28px;
}

.ps-footer h2 {
  max-width: 13ch;
  margin: 0;
  font-family: "Bricolage Grotesque", "Manrope", sans-serif;
  font-size: 42px;
  line-height: 1.05;
  letter-spacing: 0;
}

.ps-footer-link {
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 0 0 0 20px;
  border-top: 1px solid rgba(245, 242, 233, 0.22);
  border-bottom: 1px solid rgba(245, 242, 233, 0.22);
  color: #f5f2e9;
  font-size: 15px;
  font-weight: 780;
  transition: color .2s ease, border-color .2s ease;
}

.ps-footer-link:hover,
.ps-footer-link:focus-visible {
  color: #91f0d3;
  border-color: #2ed9a6;
}

.ps-footer__meta {
  margin-top: 68px;
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid rgba(245, 242, 233, 0.1);
  color: rgba(245, 242, 233, 0.48);
  font-size: 11.5px;
}

.ps-footer__meta a { color: inherit; text-decoration: none; }
.ps-footer__links { display: flex; gap: 18px; }

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

html.ps-reveal-enabled [data-ps-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .62s cubic-bezier(.2, .8, .2, 1), transform .62s cubic-bezier(.2, .8, .2, 1);
  transition-delay: var(--ps-delay, 0ms);
}

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

.ps-galaxy-mark {
  position: relative;
  display: inline-block;
  flex: none;
  line-height: 0;
}

.ps-galaxy-mark > img { display: block; opacity: 0; }

.ps-galaxy-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, #f8f6f7 0%, #8d8790 15%, #f4bc7e 29%, #fff8fb 43%, #9da7dc 59%, #ff8bac 74%, #f7f4f5 100%);
  background-size: 185% 100%;
  background-position: 42% 50%;
  -webkit-mask: url("../portal/assets/logo.png") center / contain no-repeat;
  mask: url("../portal/assets/logo.png") center / contain no-repeat;
  filter: drop-shadow(0 4px 13px rgba(238, 224, 233, .14));
  pointer-events: none;
}

.ps-ready .ps-hero__shot img { transform: scale(1); }

@media (max-width: 980px) {
  .ps-hero h1 { font-size: 62px; }
  .ps-hero__shade { width: 72%; }
  .ps-hero__copy { width: 64%; }
  .ps-section { padding: 84px 0; }
  .ps-section h2 { font-size: 42px; }
  .ps-section-head { grid-template-columns: 1fr; gap: 22px; }
  .ps-principle { padding-right: 22px; }
  .ps-principle + .ps-principle { padding-left: 22px; }
  .ps-model-panel { padding: 38px; gap: 36px; }
  .ps-portal-grid { grid-template-columns: 1fr 1fr; gap: 38px; }
}

@media (max-width: 719px) {
  html.portal-signal-active { scroll-padding-top: 76px; }
  .portal-signal-main { padding-top: 74px; }
  .ps-wrap { width: min(100% - 32px, 620px); }
  .ps-hero {
    min-height: calc(100svh - 106px);
    max-height: none;
  }
  .ps-hero__media { grid-template-columns: 1fr; }
  .ps-hero__shot { display: none; }
  .ps-hero__shot:first-child { display: block; }
  .ps-hero__shot:first-child img {
    object-position: 52% 18%;
    filter: saturate(.74) contrast(1.08) brightness(.58);
  }
  .ps-hero__shade {
    width: 100%;
    border-right: 0;
    background: rgba(6, 9, 8, 0.58);
  }
  .ps-hero__inner { align-items: flex-end; padding-block: 54px 34px; }
  .ps-hero__copy { width: 100%; }
  .ps-kicker { font-size: 10.5px; }
  .ps-hero h1 {
    max-width: 8ch;
    margin: 17px 0 15px;
    font-size: 48px;
    line-height: 1;
  }
  .ps-hero__lead { max-width: 42ch; font-size: 14px; line-height: 1.55; }
  .ps-hero__actions { margin-top: 21px; gap: 10px 18px; }
  .ps-primary { min-height: 48px; padding-inline: 16px; font-size: 13px; }
  .ps-text-link { font-size: 13px; }
  .ps-proof { margin-top: 20px; padding-top: 14px; gap: 7px 14px; font-size: 10.5px; }
  .ps-section { padding: 68px 0; }
  .ps-section-label { font-size: 10.5px; }
  .ps-section h2 { margin-top: 14px; font-size: 34px; line-height: 1.06; }
  .ps-section-intro { font-size: 14px; line-height: 1.65; }
  .ps-principles {
    grid-template-columns: 1fr;
    margin-top: 38px;
  }
  .ps-principle,
  .ps-principle + .ps-principle {
    padding: 22px 0;
    border-left: 0;
  }
  .ps-principle + .ps-principle { border-top: 1px solid var(--ps-line); }
  .ps-principle__value { margin-bottom: 13px; font-size: 29px; }
  .ps-flow { margin-top: 40px; }
  .ps-flow__heading { margin-bottom: 20px; }
  .ps-flow__timeline {
    --ps-flow-marker-x: 21px;
    --ps-flow-marker-y: 29px;
    --ps-flow-row: 98px;
  }
  .ps-flow li {
    padding-left: 66px;
    font-size: 14px;
    line-height: 1.55;
  }
  .ps-flow li::before {
    top: 8px;
    left: 0;
    width: 42px;
    height: 42px;
    font-size: 11px;
    box-shadow: 0 0 0 6px var(--ps-bg);
  }
  .ps-flow li.is-active::before {
    box-shadow: 0 0 0 6px var(--ps-bg), 0 0 22px -8px rgba(var(--ps-step-accent), .9), inset 0 1px 0 rgba(255, 255, 255, .11);
  }
  .ps-flow li::after {
    top: 2px;
    left: -6px;
    width: 54px;
    height: 54px;
  }
  .ps-flow__copy { padding: 10px 0 22px; }
  .ps-flow li strong { margin-bottom: 5px; font-size: 16.5px; }
  .ps-contract-note { align-items: flex-start; flex-direction: column; gap: 12px; }
  .ps-model-tool { margin-top: 24px; }
  .ps-model-tabs { grid-template-columns: 1fr; }
  .ps-model-tab {
    min-height: 68px;
    padding: 13px 16px;
  }
  .ps-model-tab + .ps-model-tab { border-left: 0; border-top: 1px solid var(--ps-line); }
  .ps-model-tab b { font-size: 25px; }
  .ps-model-panel {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 26px 18px 28px;
  }
  .ps-model-panel h3 { font-size: 30px; }
  .ps-model-panel__copy { font-size: 13.5px; line-height: 1.65; }
  .ps-portal-grid { grid-template-columns: 1fr; gap: 44px; }
  .ps-portal-window { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .075), 0 28px 58px -42px rgba(0, 0, 0, .96); }
  .ps-portal-window__rows li { grid-template-columns: 30px minmax(0, 1fr); min-height: 82px; padding: 15px; }
  .ps-portal-window__state { grid-column: 2; width: max-content; margin-top: 7px !important; }
  .ps-footer { padding-top: 64px; }
  .ps-footer__top { grid-template-columns: 1fr; gap: 34px; }
  .ps-footer h2 { font-size: 34px; }
  .ps-footer__meta { margin-top: 50px; align-items: flex-start; flex-direction: column; }
}

@media (max-width: 359px) {
  .ps-wrap { width: calc(100% - 24px); }
  .ps-hero h1 { font-size: 42px; }
  .ps-hero__actions { align-items: flex-start; flex-direction: column; }
  .ps-primary { width: 100%; justify-content: space-between; }
  .ps-proof { display: grid; grid-template-columns: 1fr 1fr; }
  .ps-section h2 { font-size: 31px; }
  .ps-auth-cta { padding-left: 14px; }
  .ps-footer__links { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  html.portal-signal-active { scroll-behavior: auto; }
  [data-ps-reveal] { opacity: 1; transform: none; transition: none; }
  .ps-flow__timeline { --ps-flow-height: 100% !important; }
  .ps-flow__fill { will-change: auto; }
  .ps-flow__timeline.is-timeline-ready li,
  .ps-flow__timeline.is-timeline-ready li.is-active { transform: none; transition: none; }
  .ps-flow li::before,
  .ps-flow li::after,
  .ps-flow li strong { animation: none; transition: none; }
  .ps-flow li.is-active::before { animation: none; transform: scale(1.04); }
  .ps-flow li.is-active::after { animation: none; opacity: 0; }
  .ps-hero__shot img,
  .ps-primary,
  .ps-primary svg,
  .ps-text-link svg,
  .ps-model-link svg,
  .ps-auth-cta svg,
  .ps-footer-link svg { transition: none; transform: none; }
}

@media print {
  body.portal-signal [data-au-nav],
  body.portal-signal .au-lage,
  body.portal-signal .au-an,
  body.portal-signal astro-island { display: none !important; }
  .portal-signal-main { padding-top: 0; }
  .ps-hero { min-height: 620px; }
  [data-ps-reveal] { opacity: 1; transform: none; }
}


/* ── Kursverlauf über die ganze Box ──────────────────────────────────────────
   Mert, 04.09.2026: „nicht nur bei einer stelle grafik, sondern über die ganze
   box, modern schön, sauber."

   Die Kurve ist jetzt kein Element in der Reihe mehr, sondern liegt als eigene
   Ebene hinter der ganzen Box: sie läuft von der linken bis zur rechten Kante,
   die Fläche darunter läuft nach unten aus. Name und Prozentsatz stehen darüber.

   Damit der Tab wieder zwei Spalten hat (Name | Prozent) wie vor dem Diagramm,
   ist die Kurve aus dem Grid genommen — sie ist absolut positioniert und zählt
   nicht als Spalte. */
.ps-model-tab {
  position: relative;
  isolation: isolate;
  overflow: hidden;                    /* die Kurve endet an der Boxkante */
}
/* :not(.ps-model-kurve) ist entscheidend - die Kurve ist ebenfalls ein direktes
   span-Kind des Tabs. Ohne die Ausnahme setzt diese Regel sie auf
   position:relative zurueck, und sie liegt wieder als kleines Element in der
   Reihe statt als Ebene ueber der ganzen Box. */
.ps-model-tab > span:not(.ps-model-kurve),
.ps-model-tab > b { position: relative; z-index: 1; }

.ps-model-kurve {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  line-height: 0;
  pointer-events: none;
  /* Mert, 04.09.2026: "mehr transparent, nicht nervig praesent, eher im
     hintergrund". Von 0,5 auf 0,22 zurueckgenommen - die Kurve traegt die
     Aussage mit, draengt sich aber nicht mehr vor Name und Prozentsatz. */
  opacity: .22;
  transition: opacity .3s ease;
}
.ps-model-kurve svg { width: 100%; height: 100%; display: block; }

/* preserveAspectRatio="none" streckt den Pfad auf die Boxbreite; damit die Linie
   dabei nicht mitverzerrt wird, hält vector-effect ihre Stärke konstant. */
.ps-model-kurve__linie {
  stroke-dasharray: 480;
  stroke-dashoffset: 480;
  transition: stroke-dashoffset 1.25s cubic-bezier(.22,.61,.36,1);
}
.ps-model-kurve__flaeche {
  opacity: 0;
  transition: opacity .8s ease .3s;
}

.ps-model-tool.is-visible .ps-model-kurve__linie { stroke-dashoffset: 0; }
.ps-model-tool.is-visible .ps-model-kurve__flaeche { opacity: 1; }

/* Die drei Boxen zeichnen sich nacheinander, links nach rechts gelesen. */
.ps-model-tab:nth-child(2) .ps-model-kurve__linie { transition-delay: .14s; }
.ps-model-tab:nth-child(3) .ps-model-kurve__linie { transition-delay: .28s; }

/* Aktive Box: Kurve tritt hervor, die anderen bleiben zurückhaltend. */
.ps-model-tab[aria-selected="true"] .ps-model-kurve { opacity: .42; }

/* Ohne Bewegung steht die Kurve sofort fertig da — sie ist Teil der Aussage,
   nicht Zierde, und darf nie leer bleiben (Regel 04.09.2026). */
@media (prefers-reduced-motion: reduce) {
  .ps-model-kurve__linie { stroke-dashoffset: 0; transition: none; }
  .ps-model-kurve__flaeche { opacity: 1; transition: none; }
}

/* ── Ablauf-Timeline friert beim Scrollen ein ──────────────────────────────
   Mert, 04.09.2026: "ich will das er stehen bleibt, stoppt, mit scroll
   animation, also beim scrollen von 1 bis ende runter aber dabei einfrieren
   effekt mit dem scrolling." — und danach: "man kommt viel zu schnell durch
   und die section buggt hoch und runter, die section wackelt hart beim
   runterscrollen, muss fluessiger sein."

   Erster Versuch war sticky, das wirkte nicht: `body` trug `overflow-x:
   hidden` und war damit ein eigener Scroll-Behaelter, an dem sticky klebte
   statt am Fenster. Zweiter Versuch war ein per Skript gesetztes transform -
   das hielt zwar, kam aber immer einen Frame nach dem Scrollen: das Wackeln,
   das Mert gesehen hat.

   Jetzt richtig an der Wurzel: `body` bekommt `overflow-x: clip` (schneidet
   genauso ab, ist aber kein Scroll-Behaelter, siehe oben), und der Block
   klebt wieder mit `position: sticky`. Sticky laeuft im Compositor - der
   Block steht bildgenau still, egal wie schnell gescrollt wird. Das Skript
   rechnet nur noch den Fortschritt aus und schaltet Farben; wo der Block
   steht, entscheidet der Browser.

   Rahmenhoehe und Haltepunkt setzt portal-signal.js aus der gemessenen
   Blockhoehe und der Fensterhoehe. Ohne Skript, bei "weniger Bewegung" oder
   wenn der Block hoeher ist als das Fenster, bleibt alles im normalen Fluss -
   der Ablauf steht dann trotzdem vollstaendig lesbar da. */
.ps-flow-pin { position: relative; margin-top: 52px; }
.ps-flow-pin > .ps-flow-pin__kleb > .ps-flow { margin-top: 0; }

.ps-flow-pin.is-pin { height: var(--ps-pin-hoehe); }
.ps-flow-pin.is-pin > .ps-flow-pin__kleb {
  position: sticky;
  top: var(--ps-pin-oben, 96px);
}

@media (max-width: 719px) {
  .ps-flow-pin { margin-top: 40px; }
}

/* Weniger Bewegung: kein Einfrieren, kein Zusatzweg. Das Skript setzt in
   diesem Fall ohnehin alle Schritte sofort auf aktiv. */
@media (prefers-reduced-motion: reduce) {
  .ps-flow-pin.is-pin { height: auto; }
  .ps-flow-pin.is-pin > .ps-flow-pin__kleb { position: static; }
}

/* ── Kursverlauf in den Prozentboxen: warm, ruhig, langsam volllaufend ─────
   Mert, 04.09.2026: "mach orange den diagram aber langsam voll und den
   diagram (grafik) auffuellen, aber nicht knallorange, sondern unauffaelliger
   im hintergrund, % und zahl angaben praesenter."

   Farbe gerechnet statt geraten (feste Regel "Farben nie knallig"):
   Orange #FF7A1A mit 55 % Creme #F3E9EC aufgehellt ergibt #F8B78E. Auf dem
   fast schwarzen Grund und mit 22 % Deckung wird daraus ein sehr ruhiges
   Warm — erkennbar orange, aber nie knallig.

   Linie und Flaechenverlauf lesen beide `currentColor`, deshalb genuegt eine
   Farbe an der Huelle; am SVG selbst wurde nichts geaendert. */
.ps-model-kurve { color: #F8B78E; }

/* "langsam voll": Die Flaeche laeuft von links nach rechts voll, deutlich
   langsamer als die Linie gezeichnet wird (2,4 s gegen 1,25 s). Die Linie
   geht vorweg, die Fuellung zieht nach — es wirkt wie ein steigender Pegel
   statt wie ein Bild, das eingeblendet wird.
   Deckkraft bleibt bei 0,22 / aktiv 0,42: praesenter werden Zahl und
   Prozentzeichen, nicht die Grafik. */
.ps-model-kurve__flaeche {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: opacity .55s ease .2s,
              clip-path 2.4s cubic-bezier(.25, .8, .3, 1) .2s;
}
.ps-model-tool.is-visible .ps-model-kurve__flaeche {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}
/* Nacheinander, links nach rechts gelesen — wie schon bei der Linie. */
.ps-model-tab:nth-child(2) .ps-model-kurve__flaeche { transition-delay: .2s, .34s; }
.ps-model-tab:nth-child(3) .ps-model-kurve__flaeche { transition-delay: .2s, .48s; }

/* Zahl und Prozentzeichen praesenter.
   Warum "30" bisher klein UEBER einem riesigen "%" stand: die Regel
   `.ps-model-tab span { display:block; font-size:13.5px }` traf auch den
   Zaehler-<span> INNERHALB von <b>. Er gehoert wieder zur Zahl. */
.ps-model-tab b > span {
  display: inline;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.ps-model-tab b {
  font-size: 35px;
  font-weight: 820;
  letter-spacing: -.015em;
  color: var(--ps-text);
  opacity: .86;
  transition: opacity .22s ease, color .22s ease;
}
.ps-model-tab[aria-selected="true"] b { color: currentColor; opacity: 1; }
.ps-model-tab:hover b,
.ps-model-tab:focus-visible b { opacity: 1; }

@media (max-width: 719px) {
  .ps-model-tab b { font-size: 30px; }
}

/* Weniger Bewegung: die Flaeche steht sofort vollstaendig da. */
@media (prefers-reduced-motion: reduce) {
  .ps-model-kurve__flaeche { opacity: 1; clip-path: none; transition: none; }
}

/* ── Ablauf: die Texte kommen einzeln, synchron zum Scrollen ───────────────
   Mert, 04.09.2026: "mach die texte erst dann wen man zum naechsten runter
   scrollt, also 1, text, 2, text, 3, text... die sollen so einblenden
   effect, synchron mit dem scrolling."

   `--ps-step-ein` setzt portal-signal.js je Schritt aus dem Anlaufweg des
   eingefrorenen Blocks: 0 = noch nicht da, 1 = angekommen. Kein Uebergang
   in der Zeit, sondern am Scrollweg - deshalb keine transition; die Hand
   fuehrt die Bewegung.

   Nur der TEXT haengt daran. Die Nummern 01-05 und die Schiene stehen von
   Anfang an: eine Flaeche ohne jeden Inhalt waere das lange leere Feld aus
   Merts fester Regel. Ohne Skript, bei "weniger Bewegung" und wenn gar
   nicht eingefroren wird, steht --ps-step-ein auf 1 (Rueckfallwert unten),
   die Texte sind dann sofort vollstaendig da. */
.ps-flow__copy {
  opacity: calc(.06 + .94 * var(--ps-step-ein, 1));
  transform: translateY(calc((1 - var(--ps-step-ein, 1)) * 14px));
}

@media (prefers-reduced-motion: reduce) {
  .ps-flow__copy { opacity: 1; transform: none; }
}

/* ── Der Strich der Sektionsmarke faehrt aus ───────────────────────────────
   05.09.2026. Vier Sektionsmarken tragen schon einen 34-px-Strich, der aber
   fertig dasteht: "TIKTOK & INSTAGRAM", "VERTRAG & KONTROLLE", "WAS DER
   VERTRAG REGELT", "DREI BETREUUNGSSTUFEN".

   Der Strich faehrt jetzt aus, sobald seine Sektion ins Bild kommt. Vier
   Stellen, dieselbe Geste - das gibt der unteren Seitenhaelfte einen
   gemeinsamen Takt, statt dass jede Sektion fuer sich anfaengt.

   Kostet KEINE Flaeche: die Form ist schon da, sie bekommt nur einen
   Anfang. Und kein neues JavaScript - die Marken haengen an einem
   Elternteil mit [data-ps-reveal], dessen .is-visible ohnehin gesetzt wird.

   Ohne Skript steht der Strich vollstaendig da: das Zusammenziehen haengt
   allein an `html.ps-reveal-enabled`, die nur das Skript setzt. */
html.ps-reveal-enabled [data-ps-reveal] .ps-section-label::before,
html.ps-reveal-enabled .ps-section-label[data-ps-reveal]::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .66s cubic-bezier(.2, .8, .2, 1) 120ms;
}
html.ps-reveal-enabled [data-ps-reveal].is-visible .ps-section-label::before,
html.ps-reveal-enabled .ps-section-label[data-ps-reveal].is-visible::before {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  html.ps-reveal-enabled [data-ps-reveal] .ps-section-label::before,
  html.ps-reveal-enabled .ps-section-label[data-ps-reveal]::before {
    transform: none;
    transition: none;
  }
}