/* MEEYO Platin (10.10.2026). Zwei Teile: die persoenliche Platin-Seite (.pl-*, eigenstaendig, ohne meeyo.css) und der Bereich
   «Platin» im Promoter-Portal (.pp-*, auf meeyo.css). Marke: Plus Jakarta Sans, Korall #ff4f7a → Violett #8b3dff, Nacht #160a1c,
   Logo unveraendert. «Platin» ist ein kuehler Metallton ueber dem Markenverlauf — er ersetzt keine Markenfarbe. */
@font-face { font-family: "Jakarta"; src: url("/static/fonts/PlusJakartaSans-400.ttf") format("truetype"); font-weight: 400; font-display: swap }
@font-face { font-family: "Jakarta"; src: url("/static/fonts/PlusJakartaSans-600.ttf") format("truetype"); font-weight: 600; font-display: swap }
@font-face { font-family: "Jakarta"; src: url("/static/fonts/PlusJakartaSans-800.ttf") format("truetype"); font-weight: 800; font-display: swap }

.pl {
  --grund: #160a1c; --flaeche: rgba(46, 26, 64, .55); --flaeche-fest: #221230; --linie: rgba(214, 208, 232, .16); --linie-stark: rgba(214, 208, 232, .34);
  --text: #f6effa; --leise: #b9a7c9; --korall: #ff4f7a; --violett: #8b3dff; --minze: #6bffb0; --rot: #ff8a9d;
  --verlauf: linear-gradient(100deg, #ff4f7a, #8b3dff);
  --metall: linear-gradient(100deg, #f7f5fc 0%, #c9c3dc 28%, #ffffff 46%, #a59dbd 64%, #ebe7f5 100%);
  --schatten: 0 24px 60px rgba(0, 0, 0, .35);
  color-scheme: dark;
}
:root[data-theme="light"] .pl {
  --grund: #faf7fc; --flaeche: rgba(255, 255, 255, .82); --flaeche-fest: #ffffff; --linie: rgba(60, 30, 90, .12); --linie-stark: rgba(60, 30, 90, .26);
  --text: #1b1024; --leise: #5d4f6b; --korall: #c3103f; --minze: #127848; --rot: #b0102f;
  --metall: linear-gradient(100deg, #4a4260 0%, #8d86a3 30%, #3a3350 50%, #7a7392 70%, #4a4260 100%);
  --schatten: 0 18px 50px rgba(60, 20, 90, .10);
  color-scheme: light;
}
.pl, .pl * { box-sizing: border-box }
html:has(body.pl) { background: #160a1c } :root[data-theme="light"]:has(body.pl) { background: #faf7fc }
body.pl { margin: 0; font: 400 17px/1.6 "Jakarta", system-ui, sans-serif; background: var(--grund); color: var(--text); overflow-x: hidden; -webkit-font-smoothing: antialiased }
.pl a { color: inherit }
.pl h1, .pl h2, .pl h3 { font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin: 0 0 .4em }
.pl h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem) }
.pl h3 { font-size: 1.1rem; letter-spacing: -.01em }
.pl-glut { position: fixed; inset: -20vh -20vw auto; height: 90vh; pointer-events: none; z-index: 0;
  background: radial-gradient(40% 50% at 18% 30%, rgba(255, 79, 122, .22), transparent 70%), radial-gradient(45% 55% at 82% 20%, rgba(139, 61, 255, .26), transparent 70%),
              radial-gradient(30% 40% at 50% 60%, rgba(214, 208, 232, .07), transparent 70%) }
:root[data-theme="light"] .pl-glut { opacity: .5 }
.pl main, .pl-kopf, .pl-fuss { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding: 0 24px }
.pl-metall { background: var(--metall); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 100%; animation: pl-glanz 9s ease-in-out infinite }
@keyframes pl-glanz { 0%, 100% { background-position: 0% 50% } 50% { background-position: 100% 50% } }
@media (prefers-reduced-motion: reduce) { .pl-metall { animation: none } }

/* Kopf */
.pl-kopf { display: flex; align-items: center; justify-content: space-between; padding-top: max(18px, env(safe-area-inset-top)); padding-bottom: 18px }
.pl-marke { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; letter-spacing: .02em }
.pl-marke img { border-radius: 9px }
.pl-sprachen { display: flex; align-items: center; gap: 4px; font-size: .82rem; font-weight: 600 }
.pl-sprachen a { text-decoration: none; padding: 6px 9px; border-radius: 999px; color: var(--leise) }
.pl-sprachen a.an { color: var(--text); background: var(--flaeche); border: 1px solid var(--linie) }
.pl-thema { margin-left: 6px; width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--linie); background: transparent; color: var(--leise); cursor: pointer; font-size: 1rem }

/* Held */
.pl-held { display: grid; grid-template-columns: 1.25fr .75fr; grid-template-areas: "a m" "b m" "c m" "d m" "e m"; column-gap: 40px; align-items: center; padding: 56px 0 72px }
.pl-held > * { grid-column: 1 }
.pl-eyebrow { grid-area: a; display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: .78rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--leise) }
.pl-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--verlauf); box-shadow: 0 0 14px #ff4f7a }
.pl-held h1 { grid-area: b; font-size: clamp(3rem, 9vw, 6.4rem); line-height: .95; margin-bottom: 18px }
.pl-von { grid-area: c; margin: 0 0 8px; font-weight: 600; color: var(--korall) }
.pl-lead { grid-area: d; font-size: clamp(1.05rem, 1.8vw, 1.28rem); color: var(--leise); max-width: 34em; margin: 0 0 30px }
.pl-cta-reihe { grid-area: e; display: flex; flex-wrap: wrap; gap: 12px }
.pl-medaille { grid-area: m; grid-column: 2; justify-self: center; position: relative; width: min(300px, 100%); aspect-ratio: 1 }
.pl-medaille::before { content: ""; position: absolute; inset: -14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(214, 208, 232, .30), transparent 72%); filter: blur(6px) }
.pl-medaille::after { content: ""; position: absolute; inset: -4%; border-radius: 50%; border: 1px solid var(--linie-stark) }
.pl-medaille img { position: relative; width: 100%; height: auto; border-radius: 50%; filter: drop-shadow(0 26px 40px rgba(0, 0, 0, .45)) }
.pl-knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 26px; border-radius: 999px; border: 0; cursor: pointer;
  font: 800 1rem "Jakarta", system-ui, sans-serif; color: #fff; text-decoration: none; background: var(--verlauf); box-shadow: 0 12px 30px rgba(139, 61, 255, .35); transition: transform .15s ease, box-shadow .15s ease }
.pl-knopf:hover { transform: translateY(-1px); box-shadow: 0 16px 36px rgba(139, 61, 255, .45) }
.pl-knopf:focus-visible, .pl a:focus-visible, .pl input:focus-visible, .pl select:focus-visible, .pl textarea:focus-visible, .pl-chip:focus-within { outline: 3px solid #c9c3dc; outline-offset: 2px }
.pl .pl-knopf { color: #fff } .pl .pl-knopf.leise { color: var(--text) }
.pl-knopf.leise { background: transparent; color: var(--text); border: 1px solid var(--linie-stark); box-shadow: none }
.pl-knopf.gross { min-height: 56px; padding: 0 34px; font-size: 1.05rem }

/* Saeulen */
.pl section { padding: 44px 0 }
.pl-mittig { text-align: center }
.pl-drei { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 26px }
.pl-karte { position: relative; padding: 28px 26px 26px; border-radius: 22px; background: var(--flaeche); border: 1px solid var(--linie); backdrop-filter: blur(14px); box-shadow: var(--schatten) }
.pl-karte::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; border-radius: 22px 22px 0 0; background: var(--metall); opacity: .7 }
.pl-karte p { margin: 0; color: var(--leise) }
.pl-nr { display: block; font-weight: 800; font-size: .82rem; letter-spacing: .14em; color: var(--leise); margin-bottom: 14px }

/* Vorteile */
.pl-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px }
.pl-vorteil { display: flex; gap: 16px; padding: 22px; border-radius: 18px; background: var(--flaeche); border: 1px solid var(--linie) }
.pl-vorteil svg { flex: 0 0 44px; width: 44px; height: 44px; padding: 10px; border-radius: 14px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; background: var(--verlauf) }
.pl-vorteil h3 { margin-bottom: .25em } .pl-vorteil p { margin: 0; color: var(--leise); font-size: .95rem }

/* Plaetze */
.pl-klein { color: var(--leise); font-size: .93rem; margin: 0 0 14px }
.pl-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 10px }
.pl-topf { padding: 24px; border-radius: 20px; background: var(--flaeche); border: 1px solid var(--linie) }
.pl-topf-a { border-color: rgba(255, 200, 87, .38) }
.pl-topf p { margin: 10px 0 0 }
.pl-topf b { font-size: 1.6rem; vertical-align: -2px }
.pl-balken { height: 10px; border-radius: 999px; background: var(--linie); overflow: hidden; margin-top: 12px }
.pl-balken span { display: block; height: 100%; border-radius: 999px; background: var(--metall) }
.pl-topf-a .pl-balken span { background: linear-gradient(100deg, #ffe3a3, #ffc857 45%, #fff1cc 60%, #d9a73a) }

/* Anfrage */
.pl-anfrage { scroll-margin-top: 20px }
.pl-form { margin-top: 18px; padding: clamp(20px, 4vw, 36px); border-radius: 26px; background: var(--flaeche); border: 1px solid var(--linie-stark); box-shadow: var(--schatten); backdrop-filter: blur(16px) }
.pl-stufen { border: 0; padding: 0; margin: 0 0 24px }
.pl-stufen legend { font-weight: 800; font-size: 1.2rem; margin-bottom: 6px; padding: 0 }
/* 11.10.: Privatperson / Firma */
.pl-auftritt, .pl-firma { border: 0; padding: 0; margin: 0 0 24px }
.pl-auftritt legend, .pl-firma legend { font-weight: 800; font-size: 1.2rem; margin-bottom: 6px; padding: 0 }
.pl-firma[hidden], .pl-felder label[hidden] { display: none }
.pl-stufen-topf { margin-top: 14px }
.pl-stufen-name { display: block; font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--leise); margin-bottom: 8px }
.pl-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px }
.pl-chip { position: relative; cursor: pointer }
.pl-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer }
.pl-chip span { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--linie-stark); background: var(--flaeche-fest); transition: border-color .15s, box-shadow .15s, transform .15s }
.pl-chip i { font-style: normal; color: var(--leise); font-size: .92rem; white-space: nowrap } .pl-chip em { font-style: normal }
.pl-chip input:checked + span { border-color: transparent; box-shadow: 0 0 0 2px #c9c3dc, 0 10px 26px rgba(139, 61, 255, .30); transform: translateY(-1px);
  background: linear-gradient(var(--flaeche-fest), var(--flaeche-fest)) padding-box, var(--verlauf) border-box }
.pl-waehrung { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 16px; font-weight: 600 }
.pl-waehrung span { color: var(--leise); font-weight: 400 }
.pl-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px }
.pl-felder label { display: flex; flex-direction: column; gap: 6px; font-size: .88rem; font-weight: 600; color: var(--leise) }
.pl-felder .pl-breit { grid-column: 1 / -1 }
.pl input:not([type=radio]):not([type=checkbox]), .pl select, .pl textarea { font: 400 1rem "Jakarta", system-ui, sans-serif; color: var(--text); background: var(--flaeche-fest);
  border: 1px solid var(--linie-stark); border-radius: 12px; padding: 12px 14px; min-height: 48px; width: 100% }
.pl textarea { resize: vertical }
.pl-zeile { flex-direction: row !important; align-items: flex-start; gap: 10px !important; font-weight: 400 !important; color: var(--text) !important }
.pl-zeile input { margin-top: 4px; width: 20px; height: 20px; accent-color: #8b3dff; flex: 0 0 auto }
.pl-honig { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.pl-fehler { padding: 12px 16px; border-radius: 12px; border: 1px solid var(--rot); color: var(--rot); background: rgba(255, 79, 122, .08) }
.pl-danke { text-align: center; padding: 48px 24px; border-radius: 26px; background: var(--flaeche); border: 1px solid var(--linie-stark); box-shadow: var(--schatten) }
.pl-danke p { color: var(--leise); max-width: 34em; margin: 0 auto }
.pl-haken { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; margin-bottom: 16px; font-size: 1.8rem; color: #fff; background: var(--verlauf) }

/* Ablauf */
.pl-ablauf ol { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; counter-reset: s }
.pl-ablauf li { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 18px; border: 1px solid var(--linie); font-weight: 600 }
.pl-ablauf li span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: var(--grund); background: var(--metall) }

/* Recht */
.pl-recht { margin: 24px 0 10px; padding: 28px clamp(20px, 4vw, 34px) !important; border-radius: 22px; border: 1px solid var(--linie-stark); background: var(--flaeche) }
.pl-recht h2 { font-size: 1.3rem }
.pl-recht ul { margin: 0; padding-left: 1.1em; color: var(--leise); font-size: .95rem; display: grid; gap: 8px }
.pl-entwurf { margin: 16px 0 0; font-size: .8rem; font-weight: 800; letter-spacing: .08em; color: var(--rot) }
.pl-fuss { padding-top: 30px; padding-bottom: max(40px, env(safe-area-inset-bottom)); color: var(--leise); font-size: .85rem; text-align: center }
.pl-fuss p { margin: 4px 0 }

@media (max-width: 860px) {
  .pl-held { grid-template-columns: 1fr; grid-template-areas: "m" "a" "b" "c" "d" "e"; padding: 24px 0 48px; text-align: left }
  .pl-held > * { grid-column: 1 } .pl-medaille { grid-column: 1; width: 170px; margin-bottom: 18px; justify-self: start }
  .pl-drei, .pl-raster { grid-template-columns: 1fr } .pl-zwei { grid-template-columns: 1fr }
  .pl-ablauf ol { grid-template-columns: 1fr 1fr }
}
@media (max-width: 520px) {
  body.pl { font-size: 16px } .pl main, .pl-kopf, .pl-fuss { padding-left: 16px; padding-right: 16px }
  .pl-felder { grid-template-columns: 1fr } .pl-chips { grid-template-columns: 1fr 1fr 1fr; gap: 8px } .pl-chip span { padding: 12px 10px }
  .pl-ablauf ol { grid-template-columns: 1fr } .pl-sprachen a { padding: 5px 6px } .pl-cta-reihe .pl-knopf { flex: 1 1 100% }
  .pl section { padding: 30px 0 }
}

/* ---------------- Portal: Bereich «Platin» (nur Platin-Promoter) ---------------- */
.pp-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 22px; border-radius: 18px; color: #fff;
  background: radial-gradient(120% 140% at 0% 0%, #3a1f55, #160a1c 70%); border: 1px solid rgba(214, 208, 232, .25) }
.pp-kopf { margin-bottom: 18px }
.pp-kopf img { width: 64px; height: 64px; border-radius: 50% }
.pp-kopf h3 { margin: 0; font-size: 1.25rem; background: linear-gradient(100deg, #f7f5fc, #c9c3dc 40%, #fff 55%, #a59dbd); -webkit-background-clip: text; background-clip: text; color: transparent }
.pp-kopf small { color: #c9bdd8 }
.pp-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.pp-schritte li { display: flex; gap: 10px; align-items: flex-start }
.pp-schritte i { flex: 0 0 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: .8rem; background: var(--linie); color: var(--nebel) }
.pp-schritte li.ok i { background: var(--minze); color: #0b2a1b }
.pp-hinweis { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--gelb); background: rgba(255, 200, 87, .08); margin: 12px 0 0 }
.pp-auftrag ol { margin: 8px 0 12px; padding-left: 1.3em; display: grid; gap: 6px }
.pp-entwurf { color: var(--korall-schrift); font-weight: 800; font-size: .8rem; letter-spacing: .06em }
.pp-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 10px }
.pp-form label { display: flex; flex-direction: column; gap: 4px; font-size: .88rem }
.pp-form .breit { grid-column: 1 / -1 }
.pp-form .zeile { flex-direction: row; gap: 8px; align-items: flex-start }
.pp-links { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px }
.pp-links li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; border: 1px solid var(--linie); border-radius: 12px }
.pp-links li b { flex: 1 1 160px } .pp-links li small { color: var(--nebel) }
.pp-qr { width: 132px; height: 132px; border-radius: 10px; background: #fff; padding: 6px }
.pp-tabelle { width: 100%; border-collapse: collapse; font-size: .93rem } .pp-tabelle th, .pp-tabelle td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--linie) }
.pp-tab-huelle { overflow-x: auto }
.pp-zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px } .pp-zahlen div { padding: 14px; border-radius: 12px; border: 1px solid var(--linie) }
.pp-zahlen b { display: block; font-size: 1.3rem }
.pp-zu { opacity: .55; pointer-events: none }
@media (max-width: 640px) { .pp-form { grid-template-columns: 1fr } .pp-zahlen { grid-template-columns: 1fr } }

/* Platin-Rechner mit Riegeln (11.10.2026) — Grundlage ist der Promoter-Rechner in meeyo.css (.rechner, .rechner-ebene,
   .rechner-zahlen, .chips/.chip). Hier nur, was er nicht hat: drei Karten statt zwei, Szenario-Chips, Beispiel-Marke. */
.prr .prr-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: 4px } .prr .chips { margin: 6px 0 }
.prr .chip { cursor: pointer; border-radius: 999px; font: inherit; font-size: .9rem; padding: 8px 14px }
.prr .rechner-ebene label { margin: 6px 0 8px } .prr .prr-ps { margin: -4px 0 8px }
.prr-zahlen { grid-template-columns: repeat(3, 1fr) } .prr-zahlen div { align-content: start; gap: 2px } .prr-zahlen small { color: var(--nebel); font-size: .78rem; line-height: 1.35 }
.prr-zahlen span { order: -1 }
.prr-bsp { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700; background: rgba(255,79,122,.18); color: var(--korall-schrift, #ff4f7a) }
.chip.an .prr-bsp { background: rgba(255,255,255,.25); color: #fff }
.prr-wie summary { cursor: pointer; font-weight: 700; color: var(--nebel) } .prr-firma { margin: 0 0 8px }
@media (max-width: 720px) { .prr-zahlen { grid-template-columns: 1fr } }

/* Kapitaltabelle verstaendlich (Admin, nur Owner, 11.10.2026) */
.pk-satz { counter-reset: pk; list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 8px }
.pk-satz li { counter-increment: pk; display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; font-size: 1rem; line-height: 1.45 }
.pk-satz li::before { content: counter(pk); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--verlauf); color: #fff; font-weight: 800; font-size: .85rem }
.pk-split { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; margin: 12px 0 }
.pk-split > div { background: var(--nacht); border-radius: 16px; padding: 14px 16px; display: grid; gap: 4px }
.pk-split .pk-pfeil { font-size: 1.8rem; color: var(--korall-schrift); text-align: center }
.pk-split b { font-size: 1.15rem } .pk-split small { color: var(--nebel) }
.pk-muenzen { display: flex; flex-wrap: wrap; gap: 3px; margin: 6px 0 2px; min-height: 34px; align-items: center }
.pk-muenzen i { display: block; border-radius: 50%; background: var(--verlauf) } .pk-muenzen.gross i { width: 32px; height: 32px }
.pk-muenzen.fein i { width: 7px; height: 7px }
.pk-balken { height: 14px; border-radius: 999px; background: var(--nacht); overflow: hidden; margin: 8px 0 4px; border: 1px solid var(--linie) }
.pk-balken i { display: block; height: 100%; background: linear-gradient(90deg, var(--minze), #c8e66b); border-radius: 999px }
.pk-balken.voll i { background: var(--rot) }
.pk-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 12px 0 }
.pk-block { background: var(--nacht); border-radius: 18px; padding: 16px; display: grid; gap: 10px; align-content: start }
.pk-block h3 { margin: 0 } .pk-block p { margin: 0 }
.pk-ring { display: grid; grid-template-columns: 140px 1fr; gap: 14px; align-items: center }
.pk-ring svg { width: 140px; height: 140px; transform: rotate(-90deg) } .pk-ring circle { fill: none; stroke-width: 18 }
.pk-legende { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: .92rem }
.pk-legende li { display: grid; grid-template-columns: 12px 1fr auto; gap: 8px; align-items: center } .pk-legende i { width: 12px; height: 12px; border-radius: 3px }
.pk-legende b { font-variant-numeric: tabular-nums }
.pk-mehrheit { display: inline-block; padding: 8px 14px; border-radius: 999px; font-weight: 800; font-size: 1.05rem; justify-self: start }
.pk-mehrheit.ja { background: rgba(107,255,176,.16); color: var(--minze-schrift) } .pk-mehrheit.nein { background: rgba(255,107,107,.18); color: var(--rot) }
.pk-mehrheit.leer { background: var(--pflaume-hell); color: var(--nebel) }
.pk-info { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 3px; border-radius: 50%; font-size: .72rem; font-weight: 800; font-style: normal;
  background: var(--pflaume-hell); color: var(--nebel); cursor: help; position: relative; vertical-align: middle }
.pk-info:hover::after, .pk-info:focus::after { content: attr(data-tip); position: absolute; z-index: 20; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  width: min(300px, 80vw); padding: 10px 12px; border-radius: 12px; background: #2a1838; color: #f6effa; font-weight: 400; font-size: .85rem; line-height: 1.4;
  box-shadow: 0 12px 30px rgba(0,0,0,.4); white-space: normal; text-align: left }
.pk-tab td.zahl, .pk-tab th.zahl { text-align: right; white-space: nowrap } .pk-tab tr.pk-frei td { color: var(--nebel); font-style: italic }
.pk-gruppe { border: 1px solid var(--linie); border-radius: 16px; padding: 12px 14px; margin: 10px 0; display: grid; gap: 10px }
.pk-gruppe h3 { margin: 0; font-size: 1.02rem } .pk-hilfe { color: var(--nebel); font-size: .84rem; font-weight: 400; margin: -2px 0 0 }
.pk-sz { display: grid; grid-template-columns: 110px repeat(4, 1fr); gap: 6px; align-items: center } .pk-sz b { font-size: .85rem; color: var(--nebel) }
.pk-sz input { padding: 8px 10px }
.pk-bsp-stand { color: var(--korall-schrift); font-weight: 700 }
@media (max-width: 760px) { .pk-zwei, .pk-split { grid-template-columns: 1fr } .pk-split .pk-pfeil { transform: rotate(90deg) }
  .pk-ring { grid-template-columns: 1fr; justify-items: center } .pk-legende { width: 100% } .pk-sz { grid-template-columns: 1fr 1fr } .pk-sz b { grid-column: 1 / -1 } }

/* Umwandlungsrechner (11.10.2026): heute (Pool) neben nach der Umwandlung (PS) */
.pu-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0 }
.pu-seite { background: var(--nacht); border-radius: 18px; padding: 16px; display: grid; gap: 8px; align-content: start; border-top: 4px solid #b9a7c9 }
.pu-seite-b { border-top-color: #ff4f7a } .pu-seite h3 { margin: 0; font-size: 1.05rem } .pu-seite p { margin: 0 }
.pu-seite dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 6px 0 0 } .pu-seite dt { color: var(--nebel); font-size: .9rem }
.pu-seite dd { margin: 0; font-weight: 800; font-size: 1.15rem; text-align: right; font-variant-numeric: tabular-nums }
.pu-seite-b dd { background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent }
.pu-chart-titel { margin: 8px 0 2px; font-size: 1rem } .pu-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .88rem; color: var(--nebel); margin: 0 0 6px }
.pu-legende i { display: inline-block; width: 18px; height: 4px; border-radius: 2px; margin-right: 6px; vertical-align: middle }
.pu-a-l { background: #b9a7c9 } .pu-b-l { background: #ff4f7a }
.pu-kurve-huelle { overflow-x: auto } .pu-kurve { width: 100%; min-width: 320px; height: auto; display: block }
.pu-kurve text { fill: var(--nebel); font-size: 11px } .pu-raster { stroke: var(--linie); stroke-width: 1 }
.pu-kurve polyline { fill: none; stroke-width: 3; stroke-linejoin: round } .pu-a { stroke: #b9a7c9; stroke-dasharray: 6 4 } .pu-b { stroke: #ff4f7a }
.pu-a-p { fill: #b9a7c9 } .pu-b-p { fill: #ff4f7a }
@media (max-width: 720px) { .pu-zwei { grid-template-columns: 1fr } }
.pk-plan { background: rgba(139,61,255,.12); border-left: 4px solid var(--violett, #8b3dff); border-radius: 10px; padding: 10px 14px; line-height: 1.5 } .pk-plan b { font-weight: 600 }

/* 19.10.2026 (Owner): «Versenden & Erklären» im Bereich Platin (platin.js, platin_kit.py) — Owner/Admin und Platin-Promoter */
.pp-rolle { margin: 10px 0 0; color: var(--nebel) }
.pp-kit-kopf { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; justify-content: space-between }
.pp-kit-kopf label { display: flex; flex-direction: column; gap: 4px; font-size: .88rem }
.pp-kit-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-top: 14px }
.pp-kit-karte { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--linie); border-radius: 14px }
.pp-kit-karte h4 { margin: 0; font-size: 1rem }
.pp-kit-karte p { margin: 0; color: var(--nebel); font-size: .9rem }
.pp-kit-karte .pp-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto }
.pp-clip { width: 100%; max-width: 260px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; background: #160a1c; align-self: center }
.pp-vorschau { width: 100%; height: min(78vh, 760px); border: 1px solid var(--linie); border-radius: 14px; margin-top: 12px; background: #160a1c }
.pp-faq { display: grid; gap: 8px; margin-top: 10px }
.pp-faq details { border: 1px solid var(--linie); border-radius: 12px; padding: 10px 14px }
.pp-faq summary { cursor: pointer; font-weight: 700 }
.pp-faq p { margin: 8px 0 0; color: var(--nebel) }
.pp-texte { flex-basis: 100%; display: grid; gap: 10px; margin-top: 4px }
.pp-texte label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem }
.pp-texte textarea { width: 100%; min-height: 110px; resize: vertical; font: inherit; font-size: .88rem }
.pp-status td.ja { color: var(--minze); font-weight: 700 }
.pp-status td.weg { color: var(--nebel) }

/* 20.10.2026 (Owner): Kachel «Platin-Mitgliedschaft» fuer alle Promoter (.pa-*, platin_antrag.js) — nur Information + Antrag, kein Kauf */
.pa-wappen { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 1.8rem; color: #fff;
  background: linear-gradient(135deg, #f7f5fc, #a59dbd 45%, #8b3dff) }
.pa-hinweis { margin: 0 0 14px; padding: 12px 16px; border-radius: 14px; border: 1px solid rgba(214, 208, 232, .34); background: rgba(139, 61, 255, .10) }
.pa-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; margin-bottom: 14px }
.pa-karte { padding: 16px 18px; border-radius: 16px; border: 1px solid rgba(214, 208, 232, .16); background: rgba(46, 26, 64, .35); margin-bottom: 14px }
.pa-raster .pa-karte { margin-bottom: 0 }
.pa-karte h3 { margin: 0 0 .5em; font-size: 1.05rem } .pa-karte h4 { margin: .8em 0 .4em }
.pa-vorteile, .pa-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px }
.pa-vorteile li { display: grid; grid-template-columns: 30px 1fr; column-gap: 8px; row-gap: 2px } .pa-vorteile b, .pa-vorteile small { grid-column: 2 }
.pa-sym { grid-row: span 2; font-size: 1.3rem }
.pa-schritte { margin: 0 0 8px; padding-left: 1.2em; display: grid; gap: 6px }
.pa-recht p { margin: 0 0 6px }
.pa-zwei { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px }
.pa-art, .pa-wunsch { border: 1px solid rgba(214, 208, 232, .16); border-radius: 12px; padding: 8px 12px; display: grid; gap: 6px; margin: 0 }
.pa-wunsch input { max-width: 260px }
.pa-meldung { padding: 10px 14px; border-radius: 12px; background: rgba(107, 255, 176, .10) }
/* 23.10.2026 (Owner): Video «Platin werden» zuoberst in der Kachel + Knopf «Gespräch vereinbaren» (platin_antrag.js film()) */
.pa-film { margin: 0 0 6px }
.pa-film-rahmen { position: relative; width: 100%; max-width: 860px; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #120a1c;
  border: 1px solid rgba(214, 208, 232, .16) }
.pa-film-rahmen video { display: block; width: 100%; height: 100%; object-fit: contain; background: #120a1c }
.pa-film-ki { margin: 4px 2px 0; opacity: .7; font-size: .78rem }
.pa-film-knopf { margin: 8px 0 16px }
:root[data-theme="light"] .pa-karte { background: #fff; border-color: rgba(60, 30, 90, .12) }
:root[data-theme="light"] .pa-hinweis { background: rgba(139, 61, 255, .06); border-color: rgba(60, 30, 90, .2) }
/* 21.10.2026 (Owner, «Blockzeiten»): Gespraech mit dem Gruender selbst buchen (.pt-*, platin_antrag.js -> platin_termine.py) */
.pt-box { margin: 12px 0; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(214, 208, 232, .24); background: rgba(139, 61, 255, .08) }
.pt-box h4 { margin: 0 0 .5em }
.pt-tage { display: grid; gap: 12px; margin: 10px 0; max-height: 420px; overflow-y: auto; padding-right: 4px }
.pt-tag b { display: block; margin-bottom: 6px; text-transform: capitalize }
.pt-zeiten { display: flex; flex-wrap: wrap; gap: 8px }
.pt-zeit { min-width: 72px; min-height: 40px; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(214, 208, 232, .34); background: transparent;
  color: inherit; font: inherit; cursor: pointer }
.pt-zeit:hover, .pt-zeit:focus-visible { border-color: #b98cff }
.pt-zeit.an { background: #8b3dff; border-color: #8b3dff; color: #fff; font-weight: 700 }
.pt-thema { display: grid; gap: 6px; margin: 8px 0 }
.pt-thema textarea { width: 100%; box-sizing: border-box }
.pt-tun { display: flex; flex-wrap: wrap; gap: 8px }
:root[data-theme="light"] .pt-box { background: rgba(139, 61, 255, .05); border-color: rgba(60, 30, 90, .18) }
:root[data-theme="light"] .pt-zeit { border-color: rgba(60, 30, 90, .25) }
/* 24.10.2026 (Owner): Block «Was MEEYO plant» neben «Was du bekommst» — Bereich, Stand-Abzeichen, Satz */
.pa-plan-liste { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px }
.pa-plan-liste li { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; row-gap: 2px; align-items: baseline }
.pa-plan-liste small { grid-column: 1 / -1; opacity: .8 }
.pa-plan-s { font-size: .78em; padding: 2px 8px; border-radius: 999px; white-space: nowrap; border: 1px solid currentColor }
.pa-plan-s-da { color: #3ecf8e } .pa-plan-s-aufbau { color: #f0b429 } .pa-plan-s-kommt, .pa-plan-s-pruefung { color: #b98cff }
:root[data-theme="light"] .pa-plan-s-da { color: #127a4a } :root[data-theme="light"] .pa-plan-s-aufbau { color: #8a5a00 }
:root[data-theme="light"] .pa-plan-s-kommt, :root[data-theme="light"] .pa-plan-s-pruefung { color: #6a2bd1 }
.pa-stiftung { margin-top: 10px }