/* ==========================================================================
   „Dein Jahr“ – Teilen & Bild (Paket T): Teilen-Blatt, Bild-Dialog, Liste
   „Alle“ und Endkarte geteilter Storys (Applaus). Präfix .mjt-.
   Grundschrift 15 px × fz (nie größer), Text ≥ 7:1 (auch gesperrte Knöpfe),
   Schalter/Ränder ≥ 3:1, Ziele ≥ 44 px, „weniger Bewegung“ ohne Übergänge.
   Hauptknöpfe einfarbig #055c43 mit Weiß (nie der Verlauf von .btn-primary).
   ========================================================================== */

/* Welt-Farben der Mini-Vorschauen (Werte wie .mj-w-* in §3.6, hell und dunkel gleich) */
.mjt-w-prolog{--bg1:#07120e;--bg2:#123528;--ink:#f3f7f2;--acc:#f0d27e}
.mjt-w-wir{--bg1:#2a0f16;--bg2:#4a1826;--ink:#fff4f1;--acc:#ffc9a8}
.mjt-w-sport{--bg1:#2b0a0a;--bg2:#4a1212;--ink:#fff3ef;--acc:#ffb59e}
.mjt-w-awards{--bg1:#170d33;--bg2:#2b1858;--ink:#f7f2ff;--acc:#f6d36b}
.mjt-w-ehrenamt{--bg1:#2a1604;--bg2:#46260a;--ink:#fff6ea;--acc:#ffc46b}
.mjt-w-digital{--bg1:#04252c;--bg2:#0b3d48;--ink:#effcfd;--acc:#7fe6f2}
.mjt-w-haus{--bg1:#0b1430;--bg2:#1a2a5c;--ink:#f4f6ff;--acc:#ffcf73}

/* ---------- gemeinsame Knöpfe in den Dialogen ---------- */
.mjt-btn{min-height:48px;height:auto;padding:10px 18px;border-radius:14px;font-size:calc(15px*var(--fz));line-height:1.25;white-space:normal;text-align:center}
.mjt-pri:not([disabled]),.mjt-pri:not([disabled]):hover{background:#055c43;border-color:transparent;color:#fff;box-shadow:none}
.mjt-pri:not([disabled]):hover{background:#04503a}
:root[data-theme="dark"] .mjt-pri:not([disabled]),:root[data-theme="dark"] .mjt-pri:not([disabled]):hover{background:#37b487;color:#04140d}
:root[data-theme="dark"] .mjt-pri:not([disabled]):hover{background:#45c294}
.mjt-danger:not([disabled]),.mjt-danger:not([disabled]):hover{color:#8f2519;border-color:currentColor;background:var(--surface)}
:root[data-theme="dark"] .mjt-danger:not([disabled]),:root[data-theme="dark"] .mjt-danger:not([disabled]):hover{color:#ff8a7d}
/* gesperrt: volle Deckkraft (ui.css dimmt auf .55 → < 7:1), dafür gestrichelter Rand – in hell und dunkel */
.mjt-btn[disabled],.mjt-btn[disabled]:hover,.mjt-chip[disabled]{opacity:1;background:var(--surface-3);color:var(--fg-2);border:1px dashed var(--fg-2);box-shadow:none;cursor:not-allowed;transform:none}
.mjt-foot{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;align-items:center;width:100%}
.mjt-foot .mjt-btn{flex:1 1 auto}
.mjt-hint{flex:1 1 100%;margin:0;font-size:calc(13.5px*var(--fz));line-height:1.45;color:var(--fg-2)}
.mjt-ds,.mjt-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:10px;padding:0;border:0;background:none;color:var(--accent-ink);font:inherit;font-weight:650;text-align:left;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.mjt-ds{display:flex;width:max-content;max-width:100%}
.mjt-ds .ico,.mjt-link .ico{flex:0 0 auto}
/* Schließen-Kreuz der T-Dialoge: Ziel ≥ 44 px (ui.css .v2-x = 36 px × fz, bleibt unberührt) */
#mjShareDlg .v2-x,#mjBildDlg .v2-x,#mjtAllDlg .v2-x{width:max(44px,calc(36px*var(--fz)));height:max(44px,calc(36px*var(--fz)))}
/* Bestätigung „Nicht mehr teilen?“ (BV2.confirm mit Marker .mjt-cf): Kreuz und Fußknöpfe ≥ 44 px (ui.css: .btn = 40 px × fz,
   44 px nur bei pointer:coarse – am Rechner mit Schrift „Normal“ sonst 40 px); roter Knopf im Dunkel-Design 8,6:1
   (ui.css: Weiß auf #ef6b5c = 3,0:1 – darauf erreicht weder Weiß noch Schwarz 7:1). Eigene Regeln, weil :has() sonst die ganze Liste kippt */
.v2-modal:has(.mjt-cf) .v2-x{width:max(44px,calc(36px*var(--fz)));height:max(44px,calc(36px*var(--fz)))}
.v2-modal:has(.mjt-cf) .v2-modal-f .btn{min-height:44px}
:root[data-theme="dark"] .v2-modal:has(.mjt-cf) .btn-danger,:root[data-theme="dark"] .v2-modal:has(.mjt-cf) .btn-danger:hover{background:#ff8a7d;border-color:transparent;color:#1b0603}

/* ---------- Teilen-Blatt (#mjShareDlg) ---------- */
.mjt-sheet{line-height:1.5}
.mjt-intro{margin:0 0 12px;color:var(--fg-2)}
.mjt-intro b{color:var(--fg);font-weight:700}
.mjt-note{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px;padding:10px 14px;border-radius:12px;border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);background:var(--gold-soft);color:var(--gold-ink);font-weight:650}
.mjt-note .ico{flex:0 0 auto;margin-top:3px}
.mjt-pick{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.mjt-pick>li{padding:4px 0;border-bottom:1px solid var(--line-2)} /* 9 px zwischen den Zielflächen (§6.1 Abstand ≥ 8 px) */
.mjt-row{display:grid;grid-template-columns:auto minmax(0,1fr) 44px;gap:12px;align-items:center;min-height:58px;padding:6px 6px;border-radius:10px;cursor:pointer}
.mjt-row:hover{background:var(--surface-2)}
.mjt-row.is-lock{cursor:default}.mjt-row.is-lock:hover{background:none}
.mjt-th{width:calc(32px*var(--fz));height:calc(54px*var(--fz));border-radius:8px;display:grid;place-items:center;color:var(--ink);background:linear-gradient(170deg,var(--bg2),var(--bg1))}
.mjt-rt{min-width:0}
.mjt-rt b{display:block;font-weight:650;line-height:1.3;color:var(--fg);overflow-wrap:anywhere}
.mjt-rt small{display:block;margin-top:1px;font-size:calc(13.5px*var(--fz));line-height:1.4;color:var(--fg-2);overflow-wrap:anywhere}
.mjt-row input[type=checkbox]{justify-self:center;width:calc(24px*var(--fz));height:calc(24px*var(--fz));margin:0;accent-color:var(--accent);cursor:pointer}
.mjt-lock{justify-self:center;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--surface-3);color:var(--fg-2)}
.mjt-selall{margin-top:12px}
.mjt-priv{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;padding:12px 14px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--fg-2);font-size:calc(14px*var(--fz));line-height:1.5}
.mjt-priv p{margin:0}.mjt-priv .ico{flex:0 0 auto;margin-top:3px}
.mjt-foto{margin:8px 0 0;font-size:calc(13.5px*var(--fz));line-height:1.45;color:var(--fg-2)}
/* Schalter „Applaus erlauben“ (eigene Optik: Rand ≥ 3:1 auch im Zustand aus) */
.mjt-sw{position:relative;display:flex;align-items:center;gap:12px;min-height:52px;margin-top:10px;font-weight:650;color:var(--fg);cursor:pointer}
.mjt-sw input{position:absolute;left:0;top:50%;width:1px;height:1px;margin:0;opacity:0}
.mjt-swt{position:relative;flex:0 0 auto;width:calc(48px*var(--fz));height:calc(28px*var(--fz));border-radius:999px;border:2px solid var(--fg-3);background:var(--surface)}
.mjt-swt::after{content:"";position:absolute;top:50%;left:3px;width:calc(18px*var(--fz));height:calc(18px*var(--fz));border-radius:50%;background:var(--fg-3);transform:translateY(-50%);transition:transform .16s var(--ease),background .16s}
.mjt-sw input:checked+.mjt-swt{background:var(--accent);border-color:var(--accent)}
.mjt-sw input:checked+.mjt-swt::after{background:var(--on-accent);transform:translate(calc(20px*var(--fz)),-50%)}
.mjt-sw input:focus-visible+.mjt-swt{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- Als Bild teilen (#mjBildDlg) ---------- */
.mjt-prev{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.mjt-imgw{flex:0 0 auto;width:132px;aspect-ratio:9/16;border-radius:12px;overflow:hidden;background:radial-gradient(150% 70% at 92% -6%,#123528 0%,#07120e 72%);box-shadow:0 14px 28px -14px rgba(0,0,0,.55)}
.mjt-imgw img{display:block;width:100%;height:100%;object-fit:contain}
.mjt-chk{flex:1 1 150px;min-width:0;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:calc(14px*var(--fz));line-height:1.4;color:var(--fg-2)}
.mjt-chk li{display:flex;gap:8px;align-items:flex-start}
.mjt-chk .ico{flex:0 0 auto;margin-top:2px;color:var(--accent-ink)}
.mjt-big .mjt-prev{flex-direction:column;align-items:center}
.mjt-big .mjt-imgw{width:min(100%,300px);-webkit-touch-callout:default}
.mjt-big .mjt-chk{flex-basis:auto;width:100%}
/* großes Bild: „lange drücken“ und Warnkasten (samt Knopf) stehen direkt unter dem Bild – volle Breite */
.mjt-big .mjt-prev>.mjt-bighint,.mjt-big .mjt-prev>.mjt-act{align-self:stretch;margin:0}
.mjt-bighint{display:flex;gap:8px;align-items:flex-start;margin:12px 0 0;font-weight:650;color:var(--fg)}
.mjt-bighint[hidden]{display:none}
.mjt-bighint .ico{flex:0 0 auto;margin-top:3px}
.mjt-lab{margin:16px 0 8px;font-weight:700;color:var(--fg)}
.mjt-lab small{font-size:calc(13.5px*var(--fz));font-weight:500;color:var(--fg-2)}
.mjt-chips{display:flex;flex-wrap:wrap;gap:8px}
.mjt-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;max-width:100%;padding:8px 16px;border-radius:999px;border:1.5px solid var(--fg-3);background:var(--surface);color:var(--fg);font:inherit;font-size:calc(14.5px*var(--fz));font-weight:650;line-height:1.3;text-align:left;cursor:pointer;transition:background .15s,color .15s}
.mjt-chip .ico{display:none;flex:0 0 auto}
.mjt-chip[aria-pressed="true"]{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.mjt-chip[aria-pressed="true"] .ico{display:inline-block}
.mjt-chip span{overflow-wrap:anywhere}
.mjt-max{margin:8px 0 0;font-size:calc(13.5px*var(--fz));line-height:1.45;color:var(--fg-2)}
.mjt-max:empty{display:none}
/* Warnkasten + Knöpfe als ein Block im Dialogkörper (kein fester Fuß): die Knöpfe folgen direkt auf die Warnung */
.mjt-act{margin-top:16px}
.mjt-act .mjt-foot{margin-top:12px}
.mjt-warn{display:flex;gap:10px;align-items:flex-start;margin:0;padding:12px 14px;border-radius:14px;border:1px solid #e9c9a4;background:#fbf2e8;color:#5a2c00;font-size:calc(14.5px*var(--fz));line-height:1.5}
.mjt-warn p{margin:0}.mjt-warn b{font-weight:800}
.mjt-warn .ico{flex:0 0 auto;margin-top:2px;color:#7d3805}
:root[data-theme="dark"] .mjt-warn{border-color:#6b4a26;background:#2a1d10;color:#f6d3a8}
:root[data-theme="dark"] .mjt-warn .ico{color:#f6d3a8}
@media(min-width:560px){.mjt-imgw{width:180px}}

/* ---------- „Alle (n)“ (#mjtAllDlg) ---------- */
.mjt-all{list-style:none;margin:0;padding:0}
/* Name + „neu“ in einer Spalte (mind. 7em); reicht der Platz nicht, rutscht „Ansehen“ rechtsbündig in eine eigene Zeile.
   Namen brechen nur an Leerzeichen/Bindestrich (break-word statt anywhere) – nie mitten im Wort, solange es passt (§6.3) */
.mjt-all li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;min-height:64px;padding:8px 0;border-bottom:1px solid var(--line-2)}
.mjt-all li:last-child{border-bottom:0}
.mjt-all .av{width:calc(40px*var(--fz));height:calc(40px*var(--fz))}
.mjt-all-t{flex:1 1 7em;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.mjt-all-n{min-width:0;font-weight:650;color:var(--fg);overflow-wrap:break-word}
.mjt-all .badge{font-size:calc(12.5px*var(--fz))}
.mjt-all .mjt-btn{flex:0 0 auto;margin-left:auto}

/* ---------- Endkarte einer geteilten Story (im Player, Welt-Farben vom Karten-Rahmen) ---------- */
.mjt-end{display:flex;flex-direction:column;gap:14px;color:var(--ink,#f3f7f2);font-size:calc(15px*var(--fz));line-height:1.5}
.mjt-eb{margin:0;font-family:var(--font-mono);font-size:calc(12px*var(--fz));font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--acc,#f0d27e)}
.mjt-end h2{margin:0;font-family:var(--font-serif);font-weight:500;font-size:calc(30px*var(--fz));line-height:1.12;color:var(--ink,#f3f7f2);overflow-wrap:anywhere}
.mjt-end h2:focus{outline:none}
.mjt-recap{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.mjt-recap li{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);font-weight:650;line-height:1.35;overflow-wrap:anywhere}
.mjt-recap .ico{flex:0 0 auto;color:var(--acc,#f0d27e)}
.mjt-clap{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:4px;text-align:center}
.mjt-clapbtn{min-height:52px;min-width:200px;padding:10px 24px;border-radius:999px;border:2px solid var(--acc,#f0d27e);background:rgba(255,255,255,.12);color:var(--ink,#f3f7f2);font:inherit;font-size:calc(16px*var(--fz));font-weight:700;cursor:pointer;transition:background .15s,color .15s}
.mjt-clapbtn[aria-pressed="true"]{background:var(--acc,#f0d27e);color:#0b1a15}
.mjt-clapbtn[aria-busy="true"]{cursor:progress}
/* Nebentext bewusst in --ink: ui.css belegt --ink2 global als Diagramm-Grau (#52514e) – außerhalb einer Welt-Klasse wäre er unlesbar */
.mjt-clap p,.mjt-mine{margin:0;max-width:36ch;font-size:calc(14px*var(--fz));line-height:1.5;color:var(--ink,#f3f7f2)}
.mjt-mine{font-weight:650}
.mjt-next{align-self:stretch;min-height:52px;margin-top:6px;padding:10px 18px;border-radius:14px;border:1px solid rgba(255,255,255,.34);background:rgba(255,255,255,.12);color:var(--ink,#f3f7f2);font:inherit;font-size:calc(15px*var(--fz));font-weight:700;cursor:pointer;overflow-wrap:anywhere}
.mjt-end :focus-visible{outline:3px solid var(--acc,#f0d27e);outline-offset:3px;border-radius:14px}

@media(prefers-reduced-motion:reduce){.mjt-swt::after,.mjt-chip,.mjt-clapbtn{transition:none}}