/* Lehrzeug Mitmachraum – eigenes Design. Gemeinsames Design: /kern/kern.css */
body:not(.is-join) .mr-join { display: none; }
body.is-join .mr-teach { display: none !important; }
body.mr-living { overflow: hidden; }

/* ---------------------------------------------------------------- Beitreten (Hero) */
.mr-enter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 18px; padding: 10px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); max-width: 640px; }
.mr-enter label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: var(--ink-2); }
.mr-enter label .i { width: 20px; height: 20px; color: var(--teal-ink); }
.mr-enter .input { width: 8em; flex: 1 1 7em; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; font-family: var(--mono); }
.mr-banner { margin: 0 0 16px; }
.mr-banner p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }

/* ---------------------------------------------------------------- Vorbereitung */
.mr-row { display: flex; flex-wrap: wrap; gap: 6px; }
.mr-row .select-wrap { flex: 1 1 100%; }
.mr-slides { list-style: none; margin: 0 0 10px; padding: 2px; display: grid; gap: 6px; max-height: 560px; overflow-y: auto; overscroll-behavior: contain; }
.mr-sl { display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 4px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); }
.mr-sl.is-cur { border-color: var(--teal); background: var(--teal-soft); box-shadow: inset 0 0 0 1px var(--teal); }
.mr-sl-main { flex: 1; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 4px 6px; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; border-radius: 9px; }
.mr-sl-n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--navy); color: #fff; font-weight: 700; font-size: 14px; }
.mr-sl.is-cur .mr-sl-n { background: var(--teal); color: var(--on-teal); }
.mr-sl-t { display: grid; line-height: 1.25; }
.mr-sl-t small { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.mr-sl-t b { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-sl-b { display: flex; flex: none; }
.mr-sl-b .icon-btn .i { width: 16px; height: 16px; }
.mr-sl-b .icon-btn:disabled { opacity: .3; pointer-events: none; }
.mr-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.mr-types[hidden] { display: none; }
.mr-type { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; padding: 9px 10px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); color: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.mr-type:hover { border-color: var(--teal); background: var(--teal-soft); }
.mr-type .i { width: 20px; height: 20px; color: var(--teal-ink); margin-top: 1px; }
.mr-type span { display: grid; line-height: 1.25; }
.mr-type b { font-size: 14px; }
.mr-type small { font-size: 12px; color: var(--ink-3); }
.mr-edit { display: grid; gap: 2px; }
.mr-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
.mr-lie { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mr-lie input[type="radio"] { width: 20px; height: 20px; flex: none; accent-color: var(--coral); }
.mr-lie .input { flex: 1; min-width: 0; }
.mr-start { display: grid; gap: 8px; margin-top: 16px; }
.mr-start .btn { justify-content: center; }
.mr-prev { display: grid; }

/* ---------------------------------------------------------------- Bühne (Vorschau und Sitzung) */
.mr-stage { position: relative; container-type: inline-size; background: radial-gradient(120% 120% at 0% 0%, #0D2A66 0%, #071B4A 55%, #050F2C 100%); color: #F2F6FB; overflow: hidden; }
.mr-stage.is-preview { aspect-ratio: 16 / 9; border-radius: 18px; box-shadow: var(--shadow-2); }
.mr-st { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 2.2cqw; padding: 3.4cqw 4cqw 3cqw; }
.mr-st-head { min-width: 0; }
.mr-kick { margin: 0 0 .8cqw; font-size: max(11px, 1.35cqw); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5BE3C4; }
.mr-st h2 { margin: 0; font-size: max(16px, 3.4cqw); line-height: 1.15; letter-spacing: -.02em; color: #fff; overflow-wrap: anywhere; }
.mr-sub { margin: .8cqw 0 0; font-size: max(12px, 1.7cqw); line-height: 1.4; color: #B4C0D4; }
.mr-st-body { min-height: 0; display: grid; align-content: center; }
.mr-st.is-big { grid-template-rows: minmax(0, 1fr); place-items: center; text-align: center; }
.mr-st.is-big .mr-st-head { max-width: 80cqw; }
.mr-st.is-big h2 { font-size: max(22px, 6cqw); }
.mr-st.is-big .mr-sub { font-size: max(13px, 2.4cqw); }
.mr-st.is-big .mr-st-body { display: none; }
.mr-bigtimer { margin: 2.4cqw 0 0; font-family: var(--mono); font-size: max(30px, 11cqw); font-weight: 700; line-height: 1; letter-spacing: -.02em; color: #5BE3C4; font-variant-numeric: tabular-nums; }
.mr-bigtimer.is-idle { color: rgba(255, 255, 255, .35); }
.mr-bigtimer.is-over { color: #FFC65A; font-size: max(24px, 7cqw); font-family: var(--font); }
.mr-empty { display: flex; flex-direction: column; align-items: center; gap: 1cqw; margin: 0; color: #8E9AB0; font-size: max(12px, 1.8cqw); text-align: center; }
.mr-empty .i { width: max(22px, 5cqw); height: max(22px, 5cqw); opacity: .6; }

/* Farben */
.c0 { --mc: #12C7A3; } .c1 { --mc: #2E7CF6; } .c2 { --mc: #9B59FF; } .c3 { --mc: #F5A623; } .c4 { --mc: #F2604F; } .c5 { --mc: #0BA88A; } .c6 { --mc: #EC4F8F; } .c7 { --mc: #5B8DEF; }

/* Balken (Umfrage, Lüge) */
.mr-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.3cqw; align-content: center; }
.mr-bars li { display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr) auto; gap: 1.6cqw; align-items: center; padding: .5cqw .8cqw; border-radius: 1.2cqw; }
.mr-bl { display: flex; align-items: center; gap: 1cqw; min-width: 0; font-size: max(12px, 1.9cqw); }
.mr-bl b { font-weight: 600; overflow-wrap: anywhere; line-height: 1.2; }
.mr-abc { flex: none; display: grid; place-items: center; width: max(20px, 3cqw); height: max(20px, 3cqw); border-radius: .8cqw; background: rgba(255, 255, 255, .12); font-style: normal; font-weight: 700; font-size: max(11px, 1.5cqw); }
.mr-emo { flex: none; font-style: normal; font-size: max(18px, 3cqw); line-height: 1; }
.mr-bt { height: max(14px, 3cqw); border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.mr-fill { display: block; height: 100%; width: 2%; border-radius: 99px; background: var(--mc); transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.mr-bn { display: grid; justify-items: end; min-width: 5cqw; font-size: max(14px, 2.4cqw); font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.mr-bn small { font-size: max(10px, 1.3cqw); font-weight: 500; color: #B4C0D4; }
.mr-st.is-lie .mr-bars li { grid-template-columns: minmax(0, 48%) minmax(0, 1fr) auto; }
.mr-bars li.is-good { background: rgba(18, 199, 163, .16); box-shadow: inset 0 0 0 2px #12C7A3; }
.mr-bars li.is-lie { background: rgba(242, 96, 79, .16); box-shadow: inset 0 0 0 2px #F2604F; }
.mr-stamp { flex: none; padding: .2cqw .9cqw; border-radius: 99px; background: #F2604F; color: #fff; font-style: normal; font-weight: 700; font-size: max(10px, 1.3cqw); text-transform: uppercase; letter-spacing: .05em; transform: rotate(-4deg); }
.mr-stamp.is-ok { background: #12C7A3; color: #03211A; transform: none; }
.mr-bars.is-ampel li:nth-child(1) .mr-fill { background: #2BD8B2; }
.mr-bars.is-ampel li:nth-child(2) .mr-fill { background: #FFC65A; }
.mr-bars.is-ampel li:nth-child(3) .mr-fill { background: #FF7A69; }

/* Skala, Sterne, Akku */
.mr-scale { display: grid; grid-template-columns: minmax(0, 30%) minmax(0, 1fr); grid-template-rows: 24cqw auto; gap: 1.2cqw 3cqw; align-self: center; }
.mr-avg { display: grid; align-content: center; justify-items: center; gap: .6cqw; text-align: center; grid-row: 1 / span 2; }
.mr-avg b { font-size: max(30px, 9cqw); line-height: 1; letter-spacing: -.03em; color: #5BE3C4; font-variant-numeric: tabular-nums; }
.mr-avg small { font-size: max(11px, 1.4cqw); color: #B4C0D4; }
.mr-stars { display: flex; gap: .3cqw; font-size: max(16px, 3.2cqw); line-height: 1; }
.mr-stars i { font-style: normal; color: rgba(255, 255, 255, .18); }
.mr-stars i.is-full { color: #FFC65A; }
.mr-stars i.is-half { color: #FFC65A; opacity: .55; }
.mr-hist { display: flex; align-items: stretch; gap: .8cqw; min-height: 0; }
.mr-col { flex: 1; min-width: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; gap: .5cqw; }
.mr-col em { font-style: normal; font-weight: 700; font-size: max(10px, 1.5cqw); min-height: 1.2em; align-self: end; }
.mr-col .mr-colfill { align-self: end; width: 100%; height: 2%; border-radius: .8cqw .8cqw .3cqw .3cqw; background: linear-gradient(180deg, #2BD8B2, #2E7CF6); transition: height .6s cubic-bezier(.2, .8, .2, 1); }
.mr-col > b { font-size: max(10px, 1.5cqw); color: #B4C0D4; white-space: nowrap; }
.mr-scale.is-stars .mr-colfill { background: linear-gradient(180deg, #FFC65A, #F5A623); }
.mr-ends { display: flex; justify-content: space-between; gap: 2cqw; margin: 0; font-size: max(11px, 1.5cqw); color: #B4C0D4; grid-column: 2; }
.mr-akku { position: relative; display: inline-block; width: max(26px, 3.4cqw); height: max(13px, 1.7cqw); border: 2px solid currentColor; border-radius: 4px; vertical-align: middle; }
.mr-akku::after { content: ""; position: absolute; right: -5px; top: 25%; width: 3px; height: 50%; border-radius: 0 2px 2px 0; background: currentColor; }
.mr-akku i { position: absolute; left: 2px; top: 2px; bottom: 2px; width: 10%; max-width: calc(100% - 4px); border-radius: 2px; }
.mr-akku i.lo { background: #F2604F; } .mr-akku i.mid { background: #F5A623; } .mr-akku i.hi { background: #12C7A3; }

/* Wortwolke */
.mr-cloud { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; gap: .4cqw 1.6cqw; height: 100%; overflow: hidden; }
.mr-word { padding: 0 .3cqw; border: 0; background: none; color: var(--mc); font-family: var(--font); font-weight: 700; line-height: 1.1; letter-spacing: -.01em; cursor: pointer; border-radius: 8px; transition: opacity .2s, transform .2s; }
.mr-word sup { margin-left: .15em; font-size: .4em; color: #B4C0D4; vertical-align: super; }
.mr-word:hover { transform: scale(1.04); }
.mr-word.is-hidden { opacity: .28; text-decoration: line-through; }
.mr-stage.is-preview .mr-word { cursor: default; pointer-events: none; }

/* Pinnwand */
.mr-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(140px, 21cqw), 1fr)); gap: 1.2cqw; align-content: start; height: 100%; overflow: auto; padding: .4cqw; }
.mr-note { position: relative; padding: 1.4cqw 1.6cqw; border-radius: 1.2cqw; background: #FFF6C9; color: #071B4A; box-shadow: 0 10px 22px -14px rgba(0, 0, 0, .7); }
.mr-note.c1 { background: #DDF7EF; } .mr-note.c2 { background: #E6EFFE; } .mr-note.c3 { background: #F1E8FF; } .mr-note.c4 { background: #FDE8F1; } .mr-note.c5 { background: #FFEBD6; }
.mr-note p { margin: 0; font-size: max(12px, 1.7cqw); line-height: 1.35; font-weight: 500; overflow-wrap: anywhere; }
.mr-note.is-hidden { opacity: .35; }
.mr-note.is-hidden p { text-decoration: line-through; }
.mr-x { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 8px; background: rgba(7, 27, 74, .08); color: #071B4A; opacity: 0; cursor: pointer; transition: opacity .15s; }
.mr-x .i { width: 15px; height: 15px; }
.mr-note:hover .mr-x, .mr-x:focus-visible, .mr-note.is-hidden .mr-x { opacity: 1; }

/* Karte */
.mr-map { display: block; width: 100%; height: auto; }
.mr-sea { fill: #E6EFFE; }
.mr-land path { fill: #FFFFFF; stroke: #8FA3C0; stroke-width: 1.4; stroke-linejoin: round; }
.mr-water path { fill: #E6EFFE; stroke: #8FA3C0; stroke-width: 1; }
.mr-orte circle { fill: #3D4B66; }
.mr-orte text { fill: #3D4B66; font-family: var(--font); font-size: 13px; font-weight: 500; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.mr-pins circle { stroke: #fff; stroke-width: 2.5; fill-opacity: .88; }
.mr-pins .p0 { fill: #F2604F; } .mr-pins .p1 { fill: #2E7CF6; } .mr-pins .p2 { fill: #0BA88A; } .mr-pins .p3 { fill: #9B59FF; }
.mr-mine path { fill: #F2604F; stroke: #fff; stroke-width: 2.5; }
.mr-mine circle { fill: #fff; }
.mr-mapbox { height: 100%; min-height: 0; display: grid; place-items: center; }
.mr-mapbox .mr-map { width: auto; height: 100%; max-width: 100%; max-height: 100%; }
.mr-stage .mr-sea { fill: #0A2259; }
.mr-stage .mr-land path { fill: #F2F6FB; stroke: #5B7AB5; }
.mr-stage .mr-water path { fill: #0A2259; stroke: #5B7AB5; }
.mr-stage .mr-pins circle { stroke: #071B4A; stroke-width: 2; }
.mr-stage .mr-st.is-map { grid-template-columns: minmax(0, 32%) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); align-items: center; }
.mr-stage .mr-st.is-map .mr-st-body { height: 100%; }

/* Kleine Beitrittskarte in der Vorschau */
.mr-pjoin { position: absolute; right: 1.6cqw; bottom: 1.6cqw; display: flex; align-items: center; gap: 1cqw; padding: .8cqw 1.2cqw .8cqw .8cqw; border-radius: 1.4cqw; background: #fff; color: #071B4A; box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .6); }
.mr-pjoin svg { width: max(38px, 7cqw); height: max(38px, 7cqw); display: block; }
.mr-pjoin span { display: grid; font-size: max(9px, 1.15cqw); line-height: 1.25; color: #3D4B66; }
.mr-pjoin b { font-family: var(--mono); font-size: max(11px, 1.7cqw); color: #071B4A; letter-spacing: .08em; }

/* ---------------------------------------------------------------- Sitzung im Vollbild */
.mr-live { position: fixed; inset: 0; z-index: 900; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "bar" "stage" "ctl"; background: #050F2C; color: #F2F6FB; }
.mr-live[hidden] { display: none; }
.mr-live.is-join { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "bar bar" "stage join" "ctl ctl"; }
.mr-lbar { grid-area: bar; display: flex; align-items: center; gap: 14px; padding: 10px 18px; background: rgba(255, 255, 255, .04); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.mr-lt { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.mr-lt b { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-lt small { font-size: 13px; color: #8E9AB0; }
.mr-ltimer { padding: 6px 14px; border-radius: 99px; background: rgba(18, 199, 163, .16); color: #5BE3C4; font-family: var(--mono); font-weight: 700; font-size: 20px; font-variant-numeric: tabular-nums; }
.mr-ltimer.is-over { background: rgba(255, 198, 90, .16); color: #FFC65A; font-family: var(--font); font-size: 16px; }
.mr-lpeople { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: rgba(255, 255, 255, .08); font-weight: 700; font-size: 17px; }
.mr-lpeople .i { width: 18px; height: 18px; color: #5BE3C4; }
.mr-lcode { display: grid; justify-items: end; padding: 4px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .16); background: none; color: inherit; line-height: 1.15; cursor: pointer; }
.mr-lcode:hover { background: rgba(255, 255, 255, .08); }
.mr-lcode small { font-size: 12px; color: #B4C0D4; }
.mr-lcode b { font-family: var(--mono); font-size: 22px; letter-spacing: .14em; color: #fff; }
.mr-live > .mr-stage { grid-area: stage; background: none; }
.mr-live .mr-st { padding: 2.6cqw 3.4cqw 2.4cqw; }
.mr-ljoin { grid-area: join; display: grid; align-content: center; justify-items: center; gap: 12px; width: min(34vw, 420px); padding: 20px 24px; margin: 16px 16px 16px 0; border-radius: 22px; background: #fff; color: #071B4A; text-align: center; }
.mr-ljoin[hidden] { display: none; }
.mr-ljoin-qr { width: min(28vw, 340px, 46vh); aspect-ratio: 1; }
.mr-ljoin-qr svg { width: 100%; height: 100%; display: block; }
.mr-ljoin p { margin: 0; font-size: 16px; line-height: 1.4; color: #3D4B66; overflow-wrap: anywhere; }
.mr-ljoin p b { color: #071B4A; }
.mr-ljoin-code b { display: block; font-family: var(--mono); font-size: clamp(30px, 4vw, 54px); letter-spacing: .16em; line-height: 1.1; color: #071B4A; }
.mr-lctl { grid-area: ctl; position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; padding: 10px 14px; background: rgba(255, 255, 255, .04); border-top: 1px solid rgba(255, 255, 255, .08); }
.mr-b { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 42px; height: 42px; padding: 0 11px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; background: rgba(255, 255, 255, .06); color: #F2F6FB; font-family: var(--font); font-size: 14.5px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s; }
.mr-b:hover:not(:disabled) { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); }
.mr-b:disabled { opacity: .35; cursor: default; }
.mr-b[hidden] { display: none; }
.mr-b .i { width: 19px; height: 19px; }
.mr-b:focus-visible { outline: 3px solid #5BE3C4; outline-offset: 2px; }
.mr-end { background: rgba(242, 96, 79, .18); border-color: rgba(242, 96, 79, .5); color: #FFB3A8; }
.mr-end:hover:not(:disabled) { background: #F2604F; color: #fff; border-color: #F2604F; }
.mr-lpos { min-width: 64px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.mr-sep { width: 1px; height: 26px; margin: 0 6px; background: rgba(255, 255, 255, .14); }
.mr-tmenu { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 3; display: grid; gap: 4px; min-width: 210px; padding: 8px; border-radius: 16px; background: #0F1C3C; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 20px 44px -16px rgba(0, 0, 0, .8); }
.mr-tmenu button { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 0; border-radius: 10px; background: none; color: #F2F6FB; font-family: var(--font); font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; }
.mr-tmenu button:hover { background: rgba(255, 255, 255, .1); }
.mr-tmenu .i { width: 18px; height: 18px; color: #5BE3C4; }
.mr-live:fullscreen { width: 100vw; height: 100vh; }

/* ---------------------------------------------------------------- Teilnehmende (Handy) */
.mr-join { max-width: 600px; margin: 18px auto 0; padding: 22px 20px; display: grid; gap: 12px; text-align: center; }
.mr-join-kick { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; color: var(--teal-ink); font-weight: 700; font-size: 15px; }
.mr-join-kick .i { width: 20px; height: 20px; }
.mr-join-kick small { padding: 2px 9px; border-radius: 99px; background: var(--teal-soft); font-size: 13px; }
.mr-join-kick small:empty { display: none; }
.mr-join-q { margin: 0; font-size: clamp(1.35rem, 6vw, 1.9rem); line-height: 1.2; letter-spacing: -.02em; overflow-wrap: anywhere; }
.mr-join-sub { margin: 0; color: var(--ink-2); }
.mr-join-sub:empty { display: none; }
.mr-join-timer { justify-self: center; margin: 0; padding: 6px 16px; border-radius: 99px; background: var(--teal-soft); color: var(--teal-ink); font-family: var(--mono); font-weight: 700; font-size: 22px; font-variant-numeric: tabular-nums; }
.mr-join-in { display: grid; gap: 12px; }
.mr-join-in:empty { display: none; }
.mr-join-wait { margin: 0; padding: 18px; border-radius: 16px; background: var(--sunken); color: var(--ink-2); }
.mr-join-msg { margin: 0; min-height: 1.4em; color: var(--ink-2); }
.mr-join-msg.is-bad { color: var(--coral-ink); font-weight: 600; }
.mr-join-code { display: grid; gap: 8px; text-align: left; }
.mr-join-code[hidden] { display: none; }
.mr-join-row { display: flex; gap: 8px; }
.mr-join-row .input { min-width: 0; text-transform: uppercase; letter-spacing: .2em; font-weight: 700; font-size: 20px; font-family: var(--mono); }
.mr-join-note { display: flex; gap: 6px; align-items: flex-start; justify-content: center; text-align: left; margin: 4px 0 0; }
.mr-join-note .i { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.mr-opts { display: grid; gap: 10px; }
.mr-opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 10px 14px; border-radius: 16px; border: 2px solid var(--line-2); background: var(--surface-2); color: var(--ink); font-family: var(--font); font-size: 17px; font-weight: 600; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.mr-opt:hover { border-color: var(--teal); }
.mr-opt .mr-abc { width: 32px; height: 32px; border-radius: 10px; background: var(--sunken); color: var(--ink-2); font-size: 15px; }
.mr-opt .mr-emo { font-size: 28px; }
.mr-opt span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mr-opt.is-on { border-color: var(--teal); background: var(--teal-soft); color: var(--teal-ink); box-shadow: inset 0 0 0 1px var(--teal); }
.mr-opt.is-on .mr-abc { background: var(--teal); color: var(--on-teal); }
.mr-opt.is-true { border-color: var(--teal); }
.mr-opt.is-true::after { content: "✓"; font-weight: 700; color: var(--teal-ink); }
.mr-opt.is-lie { border-color: var(--coral); background: var(--coral-soft); color: var(--coral-ink); }
.mr-opt.is-lie::after { content: "gelogen"; padding: 2px 8px; border-radius: 99px; background: var(--coral); color: #fff; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.mr-send { justify-content: center; }
.mr-scalein { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.mr-sv { display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 52px; height: 58px; padding: 4px 8px; border-radius: 14px; border: 2px solid var(--line-2); background: var(--surface-2); color: var(--ink); font-family: var(--font); font-size: 22px; font-weight: 700; cursor: pointer; flex: 1 0 52px; max-width: 72px; }
.mr-sv small { display: none; }
.mr-sv.is-on { border-color: var(--teal); background: var(--teal-soft); color: var(--teal-ink); box-shadow: inset 0 0 0 1px var(--teal); }
.mr-scalein.is-stars .mr-sv { font-size: 34px; color: var(--line-2); border-color: transparent; background: none; min-width: 48px; }
.mr-scalein.is-stars .mr-sv.is-lit { color: var(--yellow); }
.mr-scalein.is-stars .mr-sv small, .mr-scalein.is-akku .mr-sv small { display: block; font-size: 12px; color: var(--ink-3); font-weight: 600; }
.mr-scalein.is-akku .mr-sv { height: 66px; color: var(--ink-2); }
.mr-scalein.is-akku .mr-akku { width: 34px; height: 17px; }
.mr-join .mr-ends { color: var(--ink-3); font-size: 14px; }
.mr-wform { display: grid; gap: 10px; }
.mr-wform .input { font-size: 18px; text-align: center; }
.mr-wform textarea.input { text-align: left; }
.mr-wform .btn { justify-content: center; }
.mr-mine { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.mr-mine li { padding: 5px 12px; border-radius: 99px; background: var(--teal-soft); color: var(--teal-ink); font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.mr-mapin { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); cursor: crosshair; touch-action: manipulation; max-width: 440px; justify-self: center; width: 100%; }
.mr-mapin .mr-map { width: 100%; }

/* ---------------------------------------------------------------- Bericht (Druck) */
.mr-rep h1 { margin: 0 0 4px; font-size: 22pt; }
.mr-rep-meta { margin: 0 0 14px; color: #3D4B66; font-size: 10pt; }
.mr-rep-s { break-inside: avoid; margin: 0 0 14px; padding: 10px 0 0; border-top: 1px solid #CCD6E1; }
.mr-rep-s h2 { display: flex; gap: 8px; align-items: baseline; margin: 0 0 2px; font-size: 13pt; }
.mr-rep-s h2 span { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 6px; background: #E1F7F1; color: #08735E; font-size: 10pt; }
.mr-rep-n { margin: 0 0 6px; color: #5B6372; font-size: 9.5pt; }
.mr-rep-t { border-collapse: collapse; min-width: 60%; font-size: 10.5pt; }
.mr-rep-t td { padding: 3px 10px 3px 0; border-bottom: 1px solid #E7ECF2; }
.mr-rep-t td + td { text-align: right; font-variant-numeric: tabular-nums; }
.mr-rep-w { margin: 0; font-size: 10.5pt; line-height: 1.6; }
.mr-rep-l { margin: 0; padding-left: 1.2em; font-size: 10.5pt; }
.mr-rep-l li { margin: 2px 0; }
.mr-rep-map { width: 46%; }
.mr-rep-map.is-eu { width: 58%; }
.mr-rep-t.mr-rep-h th, .mr-rep-t.mr-rep-h td { padding: 3px 8px; border-bottom: 1px solid #E7ECF2; text-align: center; }
.mr-rep-h th { text-align: left; font-weight: 600; color: #3D4B66; }
.mr-rep-map .mr-orte text { font-size: 15px; }

/* ---------------------------------------------------------------- Schmal */
@media (max-width: 980px) {
  .mr-live.is-join { grid-template-columns: minmax(0, 1fr); grid-template-areas: "bar" "stage" "ctl"; }
  .mr-live.is-join .mr-ljoin { position: absolute; right: 12px; bottom: 76px; width: auto; max-width: calc(100% - 24px); margin: 0; padding: 14px; box-shadow: 0 20px 44px -16px rgba(0, 0, 0, .8); }
  .mr-ljoin-qr { width: min(42vw, 220px); }
}
@media (max-width: 700px) {
  .mr-bt span { display: none; }
  .mr-lcode small { display: none; }
  .mr-lbar { gap: 8px; padding: 8px 10px; }
  .mr-sep { display: none; }
  .mr-stage .mr-st.is-map { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .mr-scale { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 30cqw auto; }
  .mr-avg { grid-row: auto; }
  .mr-ends { grid-column: 1; }
}
@media (max-width: 430px) {
  .mr-types { grid-template-columns: minmax(0, 1fr); }
  .mr-two { grid-template-columns: minmax(0, 1fr); }
  .mr-join { padding: 18px 14px; }
  .mr-enter .input { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .mr-fill, .mr-colfill, .mr-word { transition: none; }
}