/* ==========================================================================
   Mitgliederbereich 2 – „Dein Jahr“ (P1): Seite „Mein Jahr“, Story-Leiste +
   Teaser, Story-Player #mjShow (Rahmen, Fortschritt, Bedienleiste, Wahl,
   Bedienhilfe), Profil-Karte. Karteninhalte (.mj-c-*) und Welten-Farben:
   meinjahr-karten.css (P2). Grundschrift 15 px × --fz (nie größer), jeder
   Text ≥ 7:1, Ziele ≥ 44 px, „weniger Bewegung“ ohne Animation.
   ========================================================================== */

/* Welten „Saal dunkel“ (§3.6) – Rückfall mit Spezifität 0: meinjahr-karten.css gewinnt immer */
:where(.mj-w-prolog){--bg1:#07120e;--bg2:#123528;--ink:#f3f7f2;--ink2:#cfe0d6;--acc:#f0d27e}
:where(.mj-w-wir){--bg1:#2a0f16;--bg2:#4a1826;--ink:#fff4f1;--ink2:#f2cfd2;--acc:#ffc9a8}
:where(.mj-w-sport){--bg1:#2b0a0a;--bg2:#4a1212;--ink:#fff3ef;--ink2:#f5cfc6;--acc:#ffb59e}
:where(.mj-w-awards){--bg1:#170d33;--bg2:#2b1858;--ink:#f7f2ff;--ink2:#ddd0fb;--acc:#f6d36b}
:where(.mj-w-ehrenamt){--bg1:#2a1604;--bg2:#46260a;--ink:#fff6ea;--ink2:#f3dcc0;--acc:#ffc46b}
:where(.mj-w-digital){--bg1:#04252c;--bg2:#0b3d48;--ink:#effcfd;--ink2:#c4eaef;--acc:#7fe6f2}
:where(.mj-w-haus){--bg1:#0b1430;--bg2:#1a2a5c;--ink:#f4f6ff;--ink2:#cdd6f5;--acc:#ffcf73}
/* Welt-Hintergrund (Rahmen des Players, Startkarte der Seite). Die Ringe einer Karte zeichnet .mj-c-rings (P2);
   auf #mjHero dieselben Ringe mit --ring der Welt (4 %, wie P2 – 7,5 % drückte Akzenttext unter 7:1) als Hintergrund,
   damit nichts seitlich überläuft */
.mj-frame,.mj-hero{position:relative;color:var(--ink);background:radial-gradient(150% 70% at 92% -6%,var(--bg2) 0%,var(--bg1) 72%)}
.mj-hero::before{content:"";position:absolute;inset:0;pointer-events:none;--r:var(--ring,rgba(243,247,242,.04));
  background:radial-gradient(circle at calc(100% - 64px) 150px,transparent 0 60px,var(--r) 61px 65px,transparent 66px 100px,var(--r) 101px 105px,transparent 106px 140px,var(--r) 141px 145px,transparent 146px 180px,var(--r) 181px 185px,transparent 186px)}

/* ---------- Seite „Mein Jahr“ ---------- */
.mj-page{display:block}
.mj-sk-hero{height:300px;border-radius:24px;margin:0 0 14px}.mj-sk-row{height:96px;border-radius:16px}
.mj-note,.mj-err{margin:0 0 14px}.mj-note span,.mj-err span{max-width:56ch;color:var(--fg-2)}
.mj-err .btn{min-height:44px}
.mj-year{margin:0 0 14px}.mj-year button{min-height:44px;min-width:72px;font-size:calc(14px*var(--fz))}
.mj-hero{overflow:hidden;margin:0 0 14px;padding:26px 28px;border-radius:24px;box-shadow:0 18px 40px -18px rgba(4,12,9,.6)}
.mj-hero>*{position:relative;z-index:1}
:root[data-theme="dark"] .mj-hero{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 18px 40px -18px rgba(0,0,0,.7)} /* Kante auf dunkler Seite */
.mj-eb{font-family:var(--font-mono);font-size:calc(12px*var(--fz));font-weight:600;letter-spacing:.12em;color:var(--acc)}
.mj-hero h2{margin:8px 0 0;font-family:var(--font-serif);font-weight:500;font-size:calc(32px*var(--fz));line-height:1.1;letter-spacing:-.01em;color:var(--ink)}
.mj-hero-meta{margin:8px 0 0;font-size:calc(14px*var(--fz));color:var(--ink2)}
.mj-hero-line{margin:10px 0 0;max-width:62ch;font-size:calc(15px*var(--fz));line-height:1.5;color:var(--ink2)}
.mj-neu{display:inline-flex;align-items:center;gap:8px;margin:12px 0 0;padding:6px 12px;border-radius:999px;border:1px solid var(--acc);background:rgba(255,255,255,.08);color:var(--ink);font-size:calc(14px*var(--fz));font-weight:700}
.mj-neu .ico{color:var(--acc)}
.mj-hero-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.mj-hb{display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-height:56px;padding:8px 18px;border-radius:16px;border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.12);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.mj-hb b{display:inline-flex;align-items:center;gap:8px;font-size:calc(15px*var(--fz));font-weight:750}
.mj-hb small{font-size:calc(13px*var(--fz));font-weight:500;color:var(--ink)}
.mj-hb:hover{background:rgba(255,255,255,.18)}
.mj-hb.mj-gold{background:var(--acc);border-color:var(--acc);color:#0b1a15}.mj-hb.mj-gold small{color:#0b1a15}.mj-hb.mj-gold:hover{filter:brightness(1.05)}
.mj-hb-t{background:transparent}
.mj-hero :focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.mj-privacy{margin:-6px 0 8px}
.mj-privacy a{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:calc(14px*var(--fz));font-weight:650;color:var(--accent-ink)}
.mj-share{margin:0 0 14px}
.mj-share-t,.mj-share-neu,.mj-why{display:flex;gap:10px;align-items:flex-start;margin:0;font-size:calc(15px*var(--fz));line-height:1.5;color:var(--fg)}
.mj-share-t .ico,.mj-share-neu .ico,.mj-why .ico{flex:0 0 auto;margin-top:3px;color:var(--accent-ink)}
.mj-share-neu{margin-top:10px;font-weight:650}
.mj-why{margin-top:10px;font-size:calc(14px*var(--fz));color:var(--fg-2)}
.mj-share .btn-row{margin-top:12px;gap:10px}
.mj-share .btn,.mj-err .btn{min-height:44px}
.mj-pri{background:#055c43;border-color:#055c43;color:#fff}.mj-pri:hover{background:#044a36;border-color:#044a36;color:#fff}
.mj-danger{color:#8f2519}.mj-danger:hover{color:#8f2519;background:var(--danger-soft);border-color:transparent}
:root[data-theme="dark"] .mj-danger,:root[data-theme="dark"] .mj-danger:hover{color:#ff9d90}
.mj-text{margin:0 0 14px;font-size:calc(15px*var(--fz));line-height:1.6;scroll-margin-top:84px}
.mj-text:focus{outline:none}.mj-text:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mj-text h2{margin:20px 0 6px;font-family:var(--font-serif);font-weight:500;font-size:calc(21px*var(--fz));line-height:1.2}
.mj-text h2:first-child{margin-top:0}.mj-text p{margin:0 0 8px}
@media(max-width:760px){.mj-hero{padding:22px 20px;border-radius:20px}.mj-hero h2{font-size:calc(30px*var(--fz))}.mj-hb{flex:1 1 100%}}

/* ---------- Story-Leiste + Teaser auf „Start“ ----------
   Feste Höhen je Teil: der Platzhalter (.mj-wait / .mj-wait-neu aus app.js) reserviert vorab genau die
   fertige Höhe ohne bzw. mit Teaser – je Schriftstufe über --fz (K19: nichts verrutscht beim Laden). */
.mj-wait,.mj-barbox{--mjb-h:calc(44px*var(--fz));--mjb-s:calc(20px*var(--fz));--mjb-r:calc(100px + 32px*var(--fz));--mjb-t:calc(24px + 76px*var(--fz));display:block;margin:0 0 18px}
@media(min-width:640px){.mj-wait,.mj-barbox{--mjb-t:max(70px,calc(24px + 40px*var(--fz)))}}
@media(pointer:coarse){.mj-wait,.mj-barbox{--mjb-r:calc(86px + 32px*var(--fz))}} /* Finger: keine Bildlaufleiste → kein Platz dafür */
.mj-wait{min-height:calc(var(--mjb-h) + var(--mjb-s) + 6px + var(--mjb-r))}
.mj-wait.mj-wait-neu{min-height:calc(var(--mjb-h) + var(--mjb-s) + 6px + var(--mjb-r) + 8px + var(--mjb-t))}
.mj-bar-h{display:flex;align-items:center;gap:8px;height:var(--mjb-h)}
.mj-bar-h h2{flex:1;min-width:0;margin:0;font-size:calc(15.5px*var(--fz));font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mj-alle{flex:0 0 auto;height:var(--mjb-h);min-height:0;font-size:calc(14px*var(--fz))}
.mj-bar-s{height:var(--mjb-s);margin:0;line-height:var(--mjb-s);font-size:calc(13px*var(--fz));color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mj-ringwrap{height:var(--mjb-r);margin:6px -16px 0;overflow:hidden}
.mj-rings{display:flex;align-items:flex-start;gap:10px;padding:2px 16px 0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
@media(pointer:coarse){.mj-rings{scrollbar-width:none}.mj-rings::-webkit-scrollbar{display:none}}
.mj-ring{position:relative;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;width:calc(76px*var(--fz));height:calc(80px + 32px*var(--fz));padding:0;border:0;background:none;color:var(--fg);font:inherit;cursor:pointer;scroll-snap-align:start}
.mj-ring-c{position:relative;display:grid;flex:0 0 auto;width:74px;height:74px;padding:1.5px;border-radius:50%;background:#7d8a84}
.mj-ring.fresh .mj-ring-c{padding:4px;background:conic-gradient(from 210deg,#8a6a1f,#a8832e,#0a6a4e,#8a6a1f)} /* Ringstärke zeigt „neu“, nicht nur die Farbe; jeder Farbstopp ≥ 3:1 zum Grund */
:root[data-theme="dark"] .mj-ring.fresh .mj-ring-c{background:conic-gradient(from 210deg,#a8832e,#e2b33f,#37b487,#a8832e)}
.mj-ring-in{display:grid;width:100%;height:100%;padding:3px;border-radius:50%;background:var(--bg)}
.mj-ring .mj-av{width:100%;height:100%;font-size:calc(20px*min(var(--fz),1.12))}
.mj-pill{position:absolute;left:50%;bottom:0;transform:translateX(-50%);padding:1px 8px;border-radius:999px;border:2px solid var(--bg);background:#e9c25a;color:#3a2a00;font-size:calc(12px*var(--fz));font-weight:800;letter-spacing:.04em;line-height:1.35;white-space:nowrap} /* am unteren Ringrand: wächst bei großer Schrift über den Avatar, nie über den Namen */
.mj-pill.sh{background:#055c43;color:#fff}
.mj-ring-n{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-width:100%;overflow:hidden;font-size:calc(13px*var(--fz));font-weight:650;line-height:1.2;text-align:center;overflow-wrap:anywhere}
.mj-ring.seen .mj-ring-n{color:var(--fg-2);font-weight:550}
.mj-ring:focus-visible{outline:none}.mj-ring:focus-visible .mj-ring-c{outline:3px solid var(--accent);outline-offset:2px}
.mj-rings-e{flex:0 1 240px;align-self:center;margin:0 0 24px;font-size:calc(13px*var(--fz));line-height:1.35;color:var(--fg-2)}
.mj-teaser{position:relative;display:flex;align-items:center;gap:12px;height:var(--mjb-t);margin-top:8px;padding:12px 14px;border-radius:16px;border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);background:color-mix(in srgb,var(--gold) 10%,var(--surface));color:var(--fg);text-decoration:none}
.mj-teaser:hover{color:var(--fg);border-color:color-mix(in srgb,var(--gold) 75%,transparent)}
.mj-teaser-i{position:relative;display:grid;place-items:center;flex:0 0 auto;width:46px;height:46px;border-radius:14px;background:linear-gradient(150deg,#14503b,#0a2a20);color:#f3d58b}
.mj-teaser-n{position:absolute;top:-9px;right:-12px;padding:1px 7px;border-radius:999px;border:2px solid var(--surface);background:#e9c25a;color:#3a2a00;font-size:calc(12px*var(--fz));font-weight:800;line-height:1.35}
.mj-teaser-t{display:flex;flex-direction:column;justify-content:center;flex:1;min-width:0}
.mj-teaser-t b,.mj-teaser-t small{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.mj-teaser-t b{font-size:calc(15px*var(--fz));line-height:1.3}
.mj-teaser-t small{font-size:calc(13px*var(--fz));line-height:1.35;color:var(--fg-2)}
@media(min-width:640px){.mj-teaser-t b,.mj-teaser-t small{display:block;white-space:nowrap;text-overflow:ellipsis}}

/* ---------- Profil: Benachrichtigungen ---------- */
.mj-sk-pref{height:120px}
.mj-pref{padding:4px 0 12px}.mj-pref+.mj-pref{padding-top:12px;border-top:1px solid var(--line)}
.mj-sw{min-height:44px;font-size:calc(15px*var(--fz));font-weight:600;line-height:1.35}
.mj-sw input:not(:checked)+.sw{background:#6b7872} /* Schalter „aus“ ≥ 3:1 auf hell und dunkel */
.mj-pref .hint{margin:2px 0 0 48px;font-size:calc(13px*var(--fz));line-height:1.45;color:var(--fg-2)}
.mj-pref .mj-pref-warn{color:var(--warning);font-weight:650}
/* Bestätigung „Rückblick ausschalten?“ (BV2.confirm mit Marker .mj-cf, wie .mjt-cf bei T): Kreuz und Fußknöpfe ≥ 44 px (ui.css:
   .btn 40 px × --fz, 44 px nur bei pointer:coarse – mit Maus bei „Normal“ sonst 40 px); roter Knopf im Dunkel-Design 8,5:1
   (ui.css: Weiß auf #ef6b5c = 3,0:1). Eigene Regeln, weil :has() sonst die ganze Liste kippt */
.v2-modal:has(.mj-cf) .v2-x{width:max(44px,calc(36px*var(--fz)));height:max(44px,calc(36px*var(--fz)))}
.v2-modal:has(.mj-cf) .v2-modal-f .btn{min-height:44px}
:root[data-theme="dark"] .v2-modal:has(.mj-cf) .btn-danger,:root[data-theme="dark"] .v2-modal:has(.mj-cf) .btn-danger:hover{background:#ff8a7d;border-color:transparent;color:#1b0603}

/* ---------- Player #mjShow (z 115: über Schublade 111, unter Dialog 120, Menü 130, Toasts) ---------- */
/* nur html (geht an den Viewport): Mausrad, Tasten und Wischen scrollen die Seite nicht, scrollY bleibt. Nie auch body –
   overflow dort machte body zum Scroll-Container, klebende Leisten (#side, .v2-top, .m-top) sprangen hinter dem Player auf −scrollY */
html.mj-noscroll{overflow:hidden;overscroll-behavior:none}
#mjShow{position:fixed;inset:0;z-index:115;display:flex;align-items:center;justify-content:center;background:#050b08;color:#f3f7f2;font-family:var(--font-ui);font-size:calc(15px*var(--fz));line-height:1.5;text-align:left;-webkit-text-size-adjust:100%;overscroll-behavior:contain}
#mjShow :focus-visible{outline:3px solid var(--acc,#f0d27e);outline-offset:2px}
#mjShow .mj-card:focus{outline:none}
.mj-frame{display:flex;flex-direction:column;width:100%;height:100vh;height:100dvh;overflow:hidden;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) 0 env(safe-area-inset-left,0px)}
.mj-top,.mj-body{position:relative;z-index:1}
/* Ansagen für Screenreader: unsichtbar, aber so breit wie der Rahmen – langer Text bricht um statt seitlich überzulaufen */
.mj-live{position:absolute;left:0;right:0;bottom:0;height:1px;margin:0;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:normal;overflow-wrap:anywhere;pointer-events:none}
.mj-top{flex:0 0 auto;padding:10px 14px 0}
.mj-prog{display:flex;gap:4px}
.mj-prog i{position:relative;flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.45);overflow:hidden} /* offen ≥ 3:1 */
.mj-prog b{position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:0 50%}
.mj-prog i.stop{outline:2px solid var(--acc);outline-offset:1px} /* angehalten = Akzentfarbe als Rahmen (≥ 8:1 zum Grund); Füllung bleibt --ink (≥ 3:1 zur Spur – Akzent auf der Spur nur 2,2–2,9:1) */
.mj-head{display:flex;align-items:center;gap:10px;margin-top:10px}
.mj-head .av{width:36px;height:36px;font-size:calc(13px*var(--fz))}
.mj-who{flex:1;min-width:0;line-height:1.25}
.mj-who b{display:block;font-size:calc(15px*var(--fz));font-weight:700;overflow-wrap:anywhere}
.mj-who small{display:block;margin-top:2px;font-size:calc(13px*var(--fz));color:var(--ink2)}
.mj-ib{display:grid;place-items:center;flex:0 0 auto;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.12);color:var(--ink);font:700 calc(15px*var(--fz))/1 var(--font-ui);cursor:pointer}
.mj-ib:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.8)} /* 20 % ließ „Aa“ oben rechts (bg2) auf 6,2:1 fallen */
.mj-ib.mj-gold,.mj-ib.mj-gold:hover{background:var(--acc);border-color:var(--acc);color:#0b1a15} /* ❚❚/▶ im Kopf: Gold = angehalten */
/* Band: lange Namen („Vorschau für …“) brechen um, nie abgeschnitten (anywhere: auch ein überlanges Wort passt in den Rahmen);
   Radius ≥ halbe Höhe einer Zeile → einzeilig weiter eine Pille, mehrzeilig ein runder Kasten, dessen Ecken keinen Text anschneiden.
   Kein text-wrap:balance – das bräche fast immer vor „– nicht gespeichert“ (Zeile finge mit dem Strich an) */
.mj-ribbon{display:table;margin:8px auto 0;padding:4px 12px;border-radius:calc(14px*var(--fz));border:1px solid rgba(255,255,255,.45);background:rgba(0,0,0,.32);color:var(--ink);font-family:var(--font-mono);font-size:calc(12px*var(--fz));font-weight:700;letter-spacing:.06em;text-align:center;overflow-wrap:anywhere}
.mj-body{display:flex;flex-direction:column;flex:1;min-height:0}
.mj-stage{position:relative;flex:1;min-height:0;touch-action:pan-y pinch-zoom}
@media(hover:hover) and (pointer:fine){.mj-stage{cursor:pointer}} /* Maus: links/rechts klicken blättert */
.mj-card{position:absolute;inset:0;display:flex;flex-direction:column;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
#mjShow .mj-card{background:none} /* Welt-Klasse trägt die Karte für ihre Farben; der Verlauf liegt einmal am Rahmen (keine Kante unter dem Kopf) */
.mj-scroll{flex:1;min-height:0;padding:16px 22px 18px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.mj-scroll.mj-flush{padding:0} /* Karte von P2 (.mj-c) bringt Rand (--mj-c-pad) und Ringe selbst mit */
/* „mehr ↓“ in eigener Zeile UNTER der Scrollfläche, deckend in bg1 der Welt – nie über Kartentext (durchscheinender Text drückte
   den Hinweis unter 7:1). Am Kartenende nur unsichtbar (.mj-end): die Zeile behält ihren Platz, beim Scrollen springt nichts */
.mj-more{flex:0 0 auto;align-self:center;max-width:calc(100% - 28px);margin:8px 14px 0;padding:6px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.45);background:var(--bg1,#07120e);color:var(--ink);font-size:calc(13px*var(--fz));font-weight:700;line-height:1.35;text-align:center;pointer-events:none}
.mj-more.mj-end{visibility:hidden}
.mj-choosing .mj-stage .mj-more{display:none} /* die Wahl liegt unten über der Karte */
.mj-card.mj-in{animation:mjIn .26s cubic-bezier(.2,.8,.2,1) both} /* nur verkleinern + einblenden: nie breiter als der Rahmen */
@keyframes mjIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
/* ‹ › unten nur für Tastatur und Screenreader (User 01.11.2026: Knöpfe überflüssig – man blättert durch Antippen, Wischen, Pfeiltasten):
   unsichtbar, bis einer der Knöpfe den Fokus hat; dann liegen sie unten über der Karte. Pause sitzt oben im Kopf (❚❚) */
.mj-bar{position:absolute;left:0;right:0;bottom:0;z-index:3;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:34px 14px calc(14px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.62) 32%)}
.mj-bar:not(:focus-within){width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.mj-bb{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:52px;padding:6px 8px;border-radius:16px;border:1px solid rgba(255,255,255,.45);background:rgba(8,16,13,.92);color:var(--ink);font:700 calc(15px*var(--fz))/1.15 var(--font-ui);text-align:center;cursor:pointer}
.mj-bb:hover{background:rgba(30,40,36,.95)}
.mj-bb[aria-disabled="true"]{background:transparent;border-style:dashed;cursor:default} /* Text bleibt ≥ 7:1 (keine Deckkraft) */
.mj-choosing .mj-bar{visibility:hidden}
.mj-choosing .mj-stage .mj-scroll{padding-bottom:210px}
.mj-choose{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;flex-direction:column;gap:10px;padding:34px 18px calc(18px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.62) 32%)}
.mj-cbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:58px;padding:8px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.12);color:var(--ink);font:inherit;text-align:center;cursor:pointer}
.mj-cbtn b{display:inline-flex;align-items:center;gap:8px;font-size:calc(15px*var(--fz));font-weight:800}
.mj-cbtn small{font-size:calc(13px*var(--fz));font-weight:500}
.mj-cbtn.mj-gold{background:var(--acc);border-color:var(--acc);color:#0b1a15}
.mj-help{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;gap:12px;padding:12px 12px calc(14px + env(safe-area-inset-bottom,0px));background:rgba(3,6,5,.88);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.mj-zones{display:grid;grid-template-columns:3fr 7fr;gap:8px;flex:1;min-height:110px}
.mj-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px;border:2px dashed rgba(255,255,255,.8);border-radius:18px;color:#fff;text-align:center;line-height:1.25}
.mj-zone b{font-size:calc(16px*var(--fz));font-weight:800}
.mj-zone small{font-size:calc(13.5px*var(--fz));color:#e6ece9}
.mj-zc{display:grid;place-items:center;width:52px;height:52px;margin-bottom:4px;border-radius:50%;border:1px solid rgba(255,255,255,.65);background:rgba(255,255,255,.16);font-size:28px;line-height:1}
.mj-helpbox{flex:0 0 auto;padding:16px 16px 14px;border-radius:22px;background:#fff;color:#11201a}
.mj-helpbox h2{margin:0 0 6px;font-family:var(--font-serif);font-weight:500;font-size:calc(22px*var(--fz));line-height:1.15}
.mj-helpbox p{margin:0;font-size:calc(15px*var(--fz));line-height:1.5;color:#38463f}
.mj-okbtn{width:100%;min-height:50px;margin-top:12px;border:0;border-radius:14px;background:#055c43;color:#fff;font:700 calc(15px*var(--fz))/1.2 var(--font-ui);cursor:pointer}
#mjShow .mj-helpbox :focus-visible{outline-color:#055c43}
@media(min-width:700px) and (min-height:600px){ /* 9:16-Rahmen mittig */
  #mjShow{background:rgba(4,9,7,.95)}
  .mj-frame{width:min(calc(min(92vh,1100px)*9/16),calc(100vw - 48px));height:min(92vh,1100px);padding:0;border-radius:28px;box-shadow:0 40px 90px -30px rgba(0,0,0,.85)}
}
@media(prefers-reduced-motion:reduce){#mjShow *,#mjShow *::before,#mjShow *::after{animation:none!important;transition:none!important}}