/* MEEYO Meetings & Webinare (10.10.2026) — der Raum. Farben aus meeyo.css (--nacht, --pflaume, --linie, --milch, --nebel …), damit hell und dunkel stimmen. Die Videobuehne selbst bleibt in beiden Modi dunkel (wie jedes Videostudio): Bilder wirken auf hellem Grund ausgewaschen. */ body.meet-seite .kopf, body.meet-seite .fuss, body.meet-seite .tab-leiste, body.meet-seite .ew-leiste { display: none !important } body.meet-seite .inhalt { max-width: none; padding: 0; margin: 0 } body.meet-seite .mee-knopf-schwebend, body.meet-seite .mee-panel { display: none !important } /* MEE-Blase deckte «Verlassen» zu */ body.meet-seite { overflow-x: hidden } .mt { --mt-buehne: #0d0612; --mt-kachel: #1d1126; --mt-leiste: #140a1b; min-height: 100vh; min-height: 100dvh; color: var(--milch); background: var(--nacht) } .mt button { font: inherit } /* meeyo.css macht jeden button[type=button] neutral — Hauptknoepfe hier bleiben im Verlauf */ .mt .knopf:not(.leise), .mtg .knopf:not(.leise) { background: var(--verlauf); color: #fff } .mt svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round } /* ---------- Vorraum, Warteraum, Ende ---------- */ .mt-vorraum, .mt-app, .mt-warten, .mt-ende { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: 24px 16px } .mt-vor-karte { width: 100%; max-width: 960px; background: var(--pflaume); border: 1px solid var(--linie); border-radius: 20px; padding: 24px; box-shadow: 0 20px 60px rgba(0,0,0,.25) } .mt-mitte { max-width: 480px; text-align: center } .mt-marke { display: flex; align-items: center; gap: 8px; color: var(--nebel); font-size: .85rem; margin: 0 0 6px } .mt-logo { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--verlauf); color: #fff; font-weight: 800 } .mt-vor-karte h1 { margin: 0 0 4px; font-size: clamp(1.3rem, 3.5vw, 1.9rem) } .mt-wann { color: var(--nebel); margin: 0 0 18px } .mt-vor-zwei { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 22px; align-items: start } .mt-vorschau { position: relative; aspect-ratio: 16 / 9; background: var(--mt-buehne); border-radius: 16px; overflow: hidden } .mt-vorschau video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1) } .mt-vorschau-aus { position: absolute; inset: 0; display: grid; place-items: center; color: #c9b8d6; background: var(--mt-buehne) } .mt-pegel { position: absolute; left: 14px; right: 14px; bottom: 64px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.15) } .mt-pegel i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--minze); transition: width .08s } .mt-vor-knoepfe { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 12px } .mt .mt-rund { width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: #ff4f7a; color: #fff } .mt .mt-rund.an { background: rgba(255,255,255,.16) } .mt-vor-formular label { display: block; margin: 0 0 12px; font-size: .9rem; color: var(--nebel) } .mt-vor-formular select, .mt-vor-formular input:not([type=checkbox]) { display: block; width: 100%; margin-top: 4px; padding: 10px 12px; border-radius: var(--radius-klein); border: 1px solid var(--linie); background: var(--nacht); color: var(--milch) } /* 19.10.2026 (Owner: «wie bei Zoom»): Mikrofon-Test (Pegel + «Wir hören dich ✓») und Lautsprecher testen — hell und dunkel über die Seiten-Farben */ .mt-test { margin: -4px 0 12px } .mt-test-pegel { height: 8px; border-radius: 8px; background: color-mix(in srgb, var(--nebel) 25%, transparent); overflow: hidden } .mt-test-pegel i { display: block; height: 100%; width: 0; border-radius: 8px; background: var(--minze); transition: width .1s linear } .mt .mt-test-text { margin: 6px 0 0; min-height: 1.3em } .mt-test-pegel.ok + .mt-test-text { color: var(--minze-schrift); font-weight: 600 } .mt-test-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px } .mt-test-zeile .klein { flex: 1 1 180px } .mt-test-zeile .knopf { flex: none; white-space: nowrap } .mt-zustimmung { border: 1px solid var(--korall); border-radius: var(--radius); padding: 12px 14px; margin: 6px 0 14px; background: color-mix(in srgb, var(--korall) 8%, transparent) } .mt-zustimmung p { margin: 0 0 8px } .mt-haken { display: flex !important; gap: 10px; align-items: flex-start; color: var(--milch) !important; font-weight: 600 } .mt-haken input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--korall) } .mt-rec-punkt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #ff2d55; vertical-align: middle; animation: mt-blink 1.4s infinite } @keyframes mt-blink { 50% { opacity: .35 } } .mt .fehler { color: var(--korall-schrift); margin: 8px 0 0 } .mt-puls { width: 74px; height: 74px; margin: 6px auto 16px; border-radius: 50%; background: var(--verlauf); animation: mt-puls 1.8s infinite } @keyframes mt-puls { 0% { box-shadow: 0 0 0 0 rgba(255,79,122,.5) } 70% { box-shadow: 0 0 0 26px rgba(255,79,122,0) } 100% { box-shadow: 0 0 0 0 rgba(255,79,122,0) } } /* ---------- Raum ---------- */ .mt-raum { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--mt-buehne); color: #f6effa } /* 11.10.: Der Raum bleibt in beiden Modi dunkel — auch die Seitenleiste (Chat, Teilnehmer). Im hellen Modus stand sonst ein weisser Kasten neben der dunklen Buehne. Gleiche Token-Namen, dunkle Werte, nur innerhalb des Raums. */ .mt-raum { --pflaume: #1d1126; --pflaume-hell: #2a1838; --linie: #3a2750; --milch: #f6effa; --nebel: #b9a7c9; --nacht: #140a1b; --korall-schrift: #ff7a9a; color-scheme: dark } .mt-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)) } .mt-kopf-titel { display: flex; align-items: center; gap: 10px; min-width: 0 } .mt-kopf-titel b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .mt-kopf-rechts { display: flex; align-items: center; gap: 10px; color: #c9b8d6; font-size: .9rem } .mt-rec { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: #ff2d55; color: #fff; font-weight: 800; font-size: .78rem; letter-spacing: .06em } .mt-rec .mt-rec-punkt { background: #fff; width: 8px; height: 8px } .mt-pille { display: inline-block; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.12); font-size: .75rem; white-space: nowrap } .mt-pille.mt-ohne { background: rgba(255,200,87,.2); color: #ffd98a } .mt .mt-text-knopf { background: rgba(255,255,255,.1); border: 0; color: #f6effa; border-radius: 999px; padding: 5px 12px; cursor: pointer } .mt-zahl { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: rgba(255,255,255,.1) } .mt-banner { margin: 0 16px 8px; padding: 9px 14px; border-radius: 12px; background: rgba(139,61,255,.28); border: 1px solid rgba(139,61,255,.55) } .mt-haupt { flex: 1; min-height: 0; display: flex; gap: 10px; padding: 0 12px } .mt-buehne { position: relative; flex: 1; min-width: 0; display: flex } .mt-gitter { flex: 1; display: grid; gap: 10px; align-content: center; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) } .mt-gitter[data-n="1"] { grid-template-columns: minmax(0, 1fr) } .mt-gitter[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)) } .mt-gitter.sprecher { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); grid-auto-rows: minmax(0, 110px); align-content: start } .mt-gitter.sprecher .mt-kachel.gross { grid-column: 1 / -1; grid-row: span 4; aspect-ratio: auto; min-height: 50vh } .mt-kachel { position: relative; aspect-ratio: 16 / 9; background: var(--mt-kachel); border-radius: 14px; overflow: hidden; outline: 3px solid transparent; transition: outline-color .15s } .mt-kachel.spricht { outline-color: var(--minze) } .mt-kachel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover } .mt-kachel.bild video { object-fit: contain; background: #000 } .mt-kachel.ich:not(.bild) video { transform: scaleX(-1) } .mt-avatar { position: absolute; inset: 0; display: grid; place-items: center } .mt-avatar span { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(100deg, #ff4f7a, #8b3dff); color: #fff; font-size: 1.6rem; font-weight: 800 } .mt-kachel.mit-bild .mt-avatar { display: none } .mt-name { position: absolute; left: 8px; bottom: 8px; display: flex; gap: 6px; align-items: center; max-width: calc(100% - 16px); padding: 3px 9px; border-radius: 8px; background: rgba(0,0,0,.55); font-size: .82rem } .mt-name-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .mt-hand-zeichen { font-style: normal; animation: mt-winken 1s infinite } @keyframes mt-winken { 50% { transform: rotate(14deg) } } .mt-stumm { font-style: normal; font-size: .8rem } /* 19.10.2026 (Owner: «Bildschirm teilen etwas klein» — wie Zoom): geteilter Bildschirm gross auf der Bühne, ungeschnitten (contain, schwarzer Rand statt Abschneiden, kein Filter), Kameras im schmalen Streifen rechts (Handy: unten, quer scrollbar). */ .mt-gitter.teilen { display: flex; gap: 10px; min-height: 0; overflow: hidden } .mt-gitter.teilen > .mt-kachel.gross { flex: 1 1 auto; min-width: 0; min-height: 0; aspect-ratio: auto; background: #000; border-radius: 10px; touch-action: none } .mt-streifen { flex: none; width: clamp(150px, 16vw, 230px); display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; scrollbar-width: thin } .mt-streifen:empty { display: none } .mt-streifen .mt-kachel { flex: none; width: 100%; aspect-ratio: 16 / 9 } .mt-streifen .mt-avatar span { width: 42px; height: 42px; font-size: 1rem } .mt-streifen .mt-name { left: 5px; bottom: 5px; padding: 2px 7px; font-size: .72rem } .mt-kachel.bild video { transform-origin: center center } .mt-kachel.bild.gezoomt video { transition: none } .mt-teilen-werkzeug { position: absolute; top: 8px; left: 8px; z-index: 3; display: flex; flex-wrap: wrap; gap: 6px } .mt .mt-teilen-werkzeug button { border: 0; border-radius: 8px; padding: 5px 10px; background: rgba(0,0,0,.62); color: #fff; font-size: .8rem; cursor: pointer; white-space: nowrap } .mt .mt-teilen-werkzeug button:hover, .mt .mt-teilen-werkzeug button:focus-visible { background: rgba(0,0,0,.85) } .mt-streifen .mt-teilen-werkzeug { top: 4px; left: 4px } .mt-streifen .mt-teilen-voll { display: none } .mt-kachel:fullscreen { border-radius: 0; outline: 0; aspect-ratio: auto; width: 100%; height: 100%; background: #000 } .mt-kachel:-webkit-full-screen { border-radius: 0; outline: 0; aspect-ratio: auto; width: 100%; height: 100%; background: #000 } .mt-teilt-leiste { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: max-content; z-index: 5; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 16px); padding: 5px 6px 5px 14px; border-radius: 999px; background: #123d2a; color: #eafff3; border: 1px solid var(--minze); box-shadow: 0 6px 20px rgba(0,0,0,.35); font-size: .86rem } .mt-teilt-leiste span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis } /* Platz für die Leiste: sie liegt über dem Gitter, die Kacheln rücken darunter (sonst deckt sie Namen zu) */ .mt-buehne:has(.mt-teilt-leiste:not([hidden])) .mt-gitter { padding-top: 46px } .mt .mt-teilt-stopp { flex: none; border: 0; border-radius: 999px; padding: 5px 12px; background: #ff4f7a; color: #fff; font-weight: 700; cursor: pointer } .mt-hls { flex: 1; width: 100%; max-height: 100%; background: #000; border-radius: 14px } .mt-reaktionen { position: absolute; inset: 0; pointer-events: none; overflow: hidden } .mt-schweb { position: absolute; bottom: 0; font-size: 2.2rem; animation: mt-schweben 3.2s ease-out forwards } @keyframes mt-schweben { 0% { transform: translateY(0) scale(.6); opacity: 0 } 15% { opacity: 1; transform: translateY(-40px) scale(1) } 100% { transform: translateY(-70vh) scale(1.1); opacity: 0 } } /* Seitenleiste */ .mt-seite { width: 340px; flex: none; display: flex; flex-direction: column; background: var(--pflaume); color: var(--milch); border-radius: 16px; overflow: hidden; border: 1px solid var(--linie) } .mt-seite-reiter { display: flex; border-bottom: 1px solid var(--linie) } .mt .mt-seite-reiter button { flex: 1; padding: 11px 4px; background: none; border: 0; color: var(--nebel); cursor: pointer; border-bottom: 2px solid transparent; font-size: .86rem; position: relative } .mt .mt-seite-reiter button.an { color: var(--milch); border-bottom-color: var(--korall) } .mt-seite-reiter i { font-style: normal; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--korall); color: #fff; font-size: .7rem } .mt-seite-zu { flex: 0 0 40px !important } .mt-panel { flex: 1; min-height: 0; display: flex; flex-direction: column } .mt-chat, .mt-liste { flex: 1; overflow-y: auto; padding: 12px } .mt-nachricht { margin: 0 0 10px; padding: 8px 10px; border-radius: 12px; background: var(--pflaume-hell); max-width: 92% } .mt-nachricht.ich { margin-left: auto; background: color-mix(in srgb, var(--violett) 22%, var(--pflaume)) } .mt-nachricht.privat { border: 1px dashed var(--gelb) } .mt-nachricht-kopf { display: flex; justify-content: space-between; gap: 8px; font-size: .75rem; color: var(--nebel); margin-bottom: 2px } .mt-eingabe { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--linie); flex-wrap: wrap } .mt-eingabe input { flex: 1; min-width: 0; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--linie); background: var(--nacht); color: var(--milch) } .mt-eingabe select { flex: 1 0 100%; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--linie); background: var(--nacht); color: var(--milch); font-size: .8rem } .mt-frage { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--linie) } .mt-frage.erledigt { opacity: .55 } .mt-frage-text { flex: 1 } .mt-frage-text small { color: var(--nebel) } .mt .mt-stimme { flex: none; min-width: 48px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--linie); background: var(--nacht); color: var(--milch); cursor: pointer } .mt .mt-stimme.an { border-color: var(--korall); color: var(--korall-schrift) } .mt-umfrage { padding: 10px 0 14px; border-bottom: 1px solid var(--linie) } .mt-umfrage small { margin-left: 8px; color: var(--nebel) } .mt .mt-antwort { position: relative; display: flex; justify-content: space-between; width: 100%; margin-top: 8px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--linie); background: var(--nacht); color: var(--milch); cursor: pointer; overflow: hidden; text-align: left } .mt .mt-antwort.meine { border-color: var(--korall) } .mt-balken { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--violett) 28%, transparent); z-index: 0 } .mt-antwort-text, .mt-anteil { position: relative; z-index: 1 } .mt-anteil { color: var(--nebel); font-size: .8rem } .mt-umfrage-neu { display: grid; gap: 6px; padding: 10px; border-top: 1px solid var(--linie) } .mt-umfrage-neu input { padding: 8px 10px; border-radius: 9px; border: 1px solid var(--linie); background: var(--nacht); color: var(--milch) } .mt-person { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--linie) } .mt-person.weg { opacity: .5 } .mt-person-name { flex: 1; min-width: 120px } .mt-person-menue { position: relative } .mt-person-menue summary { list-style: none; cursor: pointer; padding: 2px 10px; border-radius: 8px; background: var(--pflaume-hell) } .mt-person-menue summary::-webkit-details-marker { display: none } .mt-person-menue[open] > div, .mt-person-menue[open] { z-index: 3 } .mt .mt-person-menue button { display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0; background: var(--pflaume-hell); color: var(--milch); cursor: pointer; border-top: 1px solid var(--linie) } .mt-liste-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px } .mt-leer { color: var(--nebel) } #mt-warteliste { flex: none; padding-bottom: 0 } #mt-warteliste:empty { display: none } /* Leiste unten */ /* 11.10. (Owner: «angelehnt an Zoom»): Raster statt space-between — die mittlere Gruppe steht wirklich in der Mitte, Mikrofon/Kamera links, «Verlassen» rechts; feine Kante oben wie bei Zoom */ .mt-leiste { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px 14px; padding-bottom: max(8px, env(safe-area-inset-bottom)); background: var(--mt-leiste); border-top: 1px solid rgba(255,255,255,.06) } .mt-leiste-gruppe { display: flex; gap: 4px; align-items: center } .mt-leiste .mt-links { justify-self: start; position: relative } .mt-leiste .mt-rechts { justify-self: end } /* relative: Anker fuer das Geraete-Menue (alle, 19.10.) */ .mt-leiste .mt-mitte-gruppe { justify-self: center } .mt .mt-knopf { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 68px; white-space: nowrap; padding: 7px 8px; border: 0; border-radius: 12px; background: transparent; color: #f6effa; cursor: pointer; font-size: .72rem } .mt .mt-knopf:hover:not(:disabled) { background: rgba(255,255,255,.08) } .mt .mt-knopf:disabled { opacity: .35; cursor: not-allowed } .mt-knopf.aus svg { color: #ff6b8e } .mt .mt-knopf.an { background: rgba(255,255,255,.08) } .mt-emo { font-size: 1.25rem; line-height: 22px } .mt .mt-weg { background: #e0284f !important; padding-inline: 14px } .mt-punkt { position: absolute; top: 5px; right: 16px; width: 9px; height: 9px; border-radius: 50%; background: #ff4f7a } .mt-popover-huelle { position: relative } .mt-popover { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); display: flex; gap: 4px; padding: 6px; border-radius: 14px; background: var(--pflaume); border: 1px solid var(--linie); box-shadow: 0 12px 30px rgba(0,0,0,.35); z-index: 5 } .mt .mt-popover button { border: 0; background: none; font-size: 1.5rem; padding: 4px 6px; border-radius: 10px; cursor: pointer } .mt .mt-popover button:hover { background: var(--pflaume-hell) } .mt-menue { flex-direction: column; min-width: 250px; gap: 0; padding: 6px 0 } .mt .mt-menue button { font-size: .92rem; text-align: left; padding: 10px 14px; border-radius: 0; color: var(--milch) } .mt-menue .mt-rot, .mt-rot-knopf { color: #ff6b8e !important } .mt-rot-knopf { background: #e0284f !important; color: #fff !important } /* Dialog */ .mt-dialog-schatten { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(10,4,16,.6) } .mt-dialog { width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto; padding: 20px; border-radius: 18px; background: var(--pflaume); color: var(--milch); border: 1px solid var(--linie) } .mt-dialog h3 { margin: 0 0 10px } .mt-dialog h4 { margin: 14px 0 6px; font-size: .9rem; color: var(--nebel) } .mt-dialog input[type=search], .mt-dialog select, .mt-zahl-feld, .mt-link-feld { padding: 9px 11px; border-radius: 10px; border: 1px solid var(--linie); background: var(--nacht); color: var(--milch) } .mt-dialog input[type=search], .mt-link-feld { width: 100% } .mt-zahl-feld { width: 90px } .mt-dialog-knoepfe { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin: 16px 0 0 } .mt-qr { display: block; margin: 8px 0; border-radius: 10px; background: #fff; padding: 6px } .mt-gruppen .knopf { margin-bottom: 6px } /* ---------- Handy ---------- */ @media (max-width: 760px) { .mt-vor-zwei { grid-template-columns: minmax(0, 1fr) } .mt-vor-karte { padding: 16px; border-radius: 16px } .mt-vorraum { place-items: start center; padding-top: 16px } .mt-seite { position: fixed; inset: 0; width: auto; border-radius: 0; z-index: 20; padding-top: env(safe-area-inset-top) } .mt-haupt { padding: 0 8px } .mt-gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; align-content: start } .mt-gitter[data-n="1"] { grid-template-columns: minmax(0, 1fr); align-content: center } .mt-gitter[data-n="2"] { grid-template-columns: minmax(0, 1fr) } .mt-gitter[data-n="2"] .mt-kachel { aspect-ratio: 4 / 3 } .mt-gitter.sprecher .mt-kachel.gross { min-height: 42vh } .mt-gitter.teilen { flex-direction: column; gap: 6px } .mt-streifen { width: auto; height: 78px; flex-direction: row; overflow-x: auto; overflow-y: hidden } .mt-streifen .mt-kachel { width: auto; height: 100%; aspect-ratio: 4 / 3 } .mt-streifen .mt-avatar span { width: 34px; height: 34px; font-size: .85rem } .mt-teilt-leiste { left: 8px; right: 8px; width: auto; transform: none; max-width: none; justify-content: space-between; font-size: .8rem; gap: 6px; padding-left: 12px } .mt .mt-knopf { min-width: 0; padding: 7px 6px } .mt .mt-knopf > span:not(.mt-emo) { display: none } .mt-leiste { padding-inline: 8px } .mt-leiste-gruppe { gap: 2px } #mt-ansicht { display: none } .mt-menue { left: auto; right: -40px; transform: none } } @media (max-width: 380px) { .mt .mt-knopf { padding: 6px 4px } } /* ---------- Portal: Bereich «MEEYO Meeting» (meetings.js) ---------- 11.10. (Owner: «Kästchen alle verschoben, ganze Seitenbreite, verständlicher, angelehnt an Zoom»). Ursache der verschobenen Kaestchen: `.formular { max-width: 640px }` quetschte das Formular, und `input { width: 100% }` machte jede Checkbox zur ganzen Zeile — der Haken stand mittig, der Text rutschte nach rechts. Jetzt: eigene Raster ohne `.formular`, Schalter mit fester Breite (Text links, Schalter rechts). Farben nur aus den Tokens (hell und dunkel). */ .mtg { margin-bottom: 16px } .mtg > header { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline } .mtg > header h3 { font-size: 1.05rem } /* Stand Video (freundlich; Technik nur fuer Admins) */ .mtg-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius-klein); background: var(--pflaume-hell); border: 1px solid var(--linie); font-size: .9rem } .mtg-status i { width: 9px; height: 9px; border-radius: 50%; background: var(--gelb, #ffc857); flex: none } .mtg-status small { color: var(--nebel); font-size: .78rem; flex-basis: 100% } /* Aktionskacheln oben */ .mtg-aktionen { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px } .mtg .mtg-aktion { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left; padding: 16px; border-radius: var(--radius); border: 1px solid var(--linie); background: var(--pflaume-hell); color: var(--milch); cursor: pointer; font-weight: 400; transition: border-color .15s, transform .15s } .mtg .mtg-aktion[hidden] { display: none } .mtg .mtg-aktion:hover, .mtg .mtg-aktion:focus-visible { border-color: var(--korall); transform: translateY(-1px) } .mtg-aktion .mtg-sym { grid-row: 1 / 3 } .mtg-aktion b { font-size: 1rem; font-weight: 700; line-height: 1.25 } .mtg-aktion small { color: var(--nebel); font-size: .8rem; line-height: 1.35 } .mtg-sym { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--pflaume); border: 1px solid var(--linie); color: var(--korall-schrift) } .mtg-sym svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round } .mtg .mtg-aktion.haupt { background: var(--verlauf); border-color: transparent; color: #fff } .mtg .mtg-aktion.haupt small { color: rgba(255,255,255,.85) } .mtg-aktion.haupt .mtg-sym { background: rgba(255,255,255,.18); border-color: transparent; color: #fff } /* Beitreten mit Link/Code */ .mtg-beitreten { margin: 14px 0 0; padding: 14px; border-radius: var(--radius); background: var(--pflaume-hell); border: 1px solid var(--linie) } .mtg-beitreten > label { display: block; margin-bottom: 8px } .mtg-beitreten-zeile { display: flex; flex-wrap: wrap; gap: 8px; align-items: center } .mtg-beitreten-zeile input { flex: 1 1 260px; width: auto; min-width: 0; padding: 10px 12px } .mtg-beitreten-zeile .knopf { padding: 10px 18px } /* Karten «Anstehend» und «Aufnahmen & Protokolle» */ .mtg-karte { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 16px; margin: 0 0 10px; border-radius: var(--radius); border: 1px solid var(--linie); background: var(--pflaume-hell) } .mtg-karte.alt { opacity: .85 } .mtg-karte.live { border-color: var(--minze) } .mtg-karte.live .mtg-datum { background: var(--verlauf); color: #fff; border-color: transparent } .mtg-datum { display: grid; place-items: center; padding: 9px 4px; border-radius: 12px; background: var(--pflaume); border: 1px solid var(--linie); text-align: center; line-height: 1.25 } .mtg-datum b { font-size: .86rem } .mtg-datum span { font-size: 1.05rem; font-weight: 800; color: inherit } .mtg-titel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 4px } .mtg-titel > b { font-size: 1.02rem } .mtg-info { display: flex; flex-wrap: wrap; gap: 2px 14px } .mtg-info .mtg-beschr { flex-basis: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .mtg-pille { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--pflaume); border: 1px solid var(--linie); font-size: .72rem; font-weight: 600; color: var(--nebel) } .mtg-pille.art-webinar { color: var(--violett); border-color: color-mix(in srgb, var(--violett) 45%, var(--linie)) } .mtg-pille.art-serie { color: var(--minze-schrift); border-color: color-mix(in srgb, var(--minze) 45%, var(--linie)) } .mtg-pille.live { background: var(--minze); color: #0d2a1c; border-color: transparent } .mtg-pille.rec { color: var(--korall-schrift) } .mtg-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center } .mtg .mtg-knoepfe .knopf.klein { padding: 8px 14px; font-size: .85rem } .mtg-rsvp { display: inline-flex; border: 1px solid var(--linie); border-radius: 999px; overflow: hidden } .mtg .mtg-rsvp-knopf { border: 0; border-radius: 0; background: transparent; color: var(--nebel); padding: 7px 11px; cursor: pointer; font-size: .8rem } .mtg .mtg-rsvp-knopf.an { background: var(--korall); color: #fff } .mtg-leer { display: grid; justify-items: center; gap: 6px; padding: 26px 16px; text-align: center; border: 1px dashed var(--linie); border-radius: var(--radius) } .mtg-leer .mtg-sym { font-size: 1.4rem } .mtg-details { margin: -4px 0 12px; padding: 12px 16px 16px; border-radius: 0 0 var(--radius) var(--radius); background: var(--pflaume-hell); border: 1px solid var(--linie); border-top: 0 } .mtg-details h4 { margin: 14px 0 6px; font-size: .9rem } .mtg-details input[type=search] { width: 100%; margin-top: 8px; padding: 10px 12px } .mtg-agenda { list-style: none; padding: 0; margin: 0 } .mtg-agenda li { padding: 3px 0 } .mtg-transkript { white-space: pre-wrap; font-size: .85rem; color: var(--nebel); max-height: 260px; overflow: auto } .mtg-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 0; font-size: .88rem } .mtg-leute, .mtg-chips, .mtg-treffer { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 } .mtg-chips:empty, .mtg-treffer:empty { display: none } .mtg .mtg-chip { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--linie); background: var(--pflaume); color: var(--milch); font-size: .82rem; font-weight: 600; cursor: pointer } .mtg .mtg-chip.an { border-color: var(--korall); background: color-mix(in srgb, var(--korall) 14%, var(--pflaume)) } .mtg-chip.rsvp-ja { border-color: var(--minze) } .mtg-chip.rsvp-nein { opacity: .55; text-decoration: line-through } .mtg-chip.rsvp-vielleicht { border-style: dashed } .mtg-haken { display: flex !important; gap: 8px; align-items: flex-start; margin: 6px 0; font-weight: 400 } .mtg-haken input { width: auto; flex: none; margin-top: 3px } .mtg-hoch { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 } .mtg-hoch input[type=file] { flex: 1 1 100%; max-width: 520px } .mtg-hoch .mtg-haken { flex: 1 1 100%; align-items: center; margin: 0 } .mtg-hoch .mtg-haken input { margin: 0 } /* Planen: breites Raster, Schalter, feste Fusszeile */ .mtg-planen { border-color: color-mix(in srgb, var(--korall) 35%, var(--linie)) } .mtg-form { display: block } .mtg-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px } .mtg-raster-drei { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 10px } .mtg-raster-zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px } .mtg-raster .mtg-breit { grid-column: 1 / -1 } .mtg-form label { font-size: .9rem } .mtg-form input:not([type=checkbox]), .mtg-form select, .mtg-form textarea { padding: 10px 12px } .mtg-abschnitt { margin: 22px 0 10px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--nebel) } .mtg-optionen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px } .mtg-schalter { display: flex !important; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border-radius: var(--radius-klein); border: 1px solid var(--linie); background: var(--pflaume-hell); cursor: pointer; font-weight: 400 } .mtg-schalter[hidden] { display: none !important } .mtg-schalter > span { display: grid; gap: 2px; min-width: 0 } .mtg-schalter b { font-weight: 600; font-size: .92rem } .mtg-schalter small { color: var(--nebel); font-size: .8rem; line-height: 1.35 } .mtg-schalter input[type=checkbox] { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 44px; height: 26px; margin: 0; padding: 0; border-radius: 999px; border: 1px solid var(--linie); background: var(--nacht); cursor: pointer; transition: background .15s } .mtg-schalter input[type=checkbox]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--nebel); transition: transform .15s, background .15s } .mtg-schalter input[type=checkbox]:checked { background: var(--verlauf); border-color: transparent } .mtg-schalter input[type=checkbox]:checked::after { transform: translateX(18px); background: #fff } .mtg-schalter.mtg-mit-feld input:not([type=checkbox]) { flex: 0 1 160px; width: 160px } .mtg-schalter-feld { align-self: end } #mtg-mail-box .mtg-schalter { background: transparent; border: 0; padding: 0 } .mtg-einladen-teil { margin-top: 4px } .mtg-einladen-teil > .klein { margin: -4px 0 8px } #mtg-waehler input[type=search] { width: 100%; padding: 10px 12px } .mtg-fuss { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; margin: 20px -16px -15px; padding: 12px 16px; background: var(--pflaume); border-top: 1px solid var(--linie); border-radius: 0 0 var(--radius) var(--radius) } .mtg-fuss > span { margin-right: auto } .mtg-fuss-flach { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; margin: 12px 0 0; max-width: none } .mtg-fuss-flach > span { margin-right: auto } #mtg-serie-box > summary { cursor: pointer; font-weight: 700 } #mtg-serie-box[open] > summary { margin-bottom: 8px } @media (max-width: 900px) { .mtg-optionen, .mtg-raster-drei { grid-template-columns: minmax(0, 1fr) } } @media (max-width: 640px) { .mtg-aktionen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px } .mtg .mtg-aktion { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; row-gap: 6px; padding: 12px } .mtg-aktion .mtg-sym { grid-row: auto; width: 38px; height: 38px; border-radius: 11px } .mtg-aktion.haupt { grid-column: 1 / -1 } .mtg-raster { grid-template-columns: minmax(0, 1fr) } .mtg-karte { grid-template-columns: 64px minmax(0, 1fr); padding: 12px } .mtg-knoepfe { grid-column: 1 / -1; justify-content: flex-start } .mtg-fuss .knopf { flex: 1 1 auto } .mtg-fuss > span { flex-basis: 100% } } /* ---------- MEEYO Meeting (11.10.): Teilnehmerliste, Host-Aktionen, Film, App ---------- */ .mt-avatar-klein { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-size: .75rem; font-weight: 700 } .mt-zustand { display: inline-flex; gap: 4px; font-size: .85rem; opacity: .9 } .mt-zustand .aus { opacity: .35; text-decoration: line-through } .mt-liste-schalter { display: flex; gap: 8px; align-items: center; font-size: .85rem; color: var(--nebel); padding: 6px 0 10px; border-bottom: 1px solid var(--linie) } .mt-nachricht.privat-host { border: 1px dashed var(--minze) } .mt-effekte { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin: 8px 0 } .mt .mt-effekt-knopf { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: 14px; border: 1px solid var(--linie); background: var(--pflaume-hell); color: var(--milch); cursor: pointer; font-size: .85rem } .mt-effekt-knopf b { font-size: 1.8rem; line-height: 1 } .mt-effekt-knopf:disabled { opacity: .45; cursor: default } .mt-film { position: absolute; right: 12px; bottom: 12px; width: min(360px, 60%); background: var(--pflaume); border: 1px solid var(--linie); border-radius: 14px; padding: 8px; z-index: 4; box-shadow: 0 10px 30px rgba(0,0,0,.4) } .mt-film video { width: 100%; border-radius: 10px; background: #000; display: block } .mt-film-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .8rem; margin: 0 0 6px; color: var(--nebel) } .mt-medien-liste { max-height: 40vh; overflow: auto; margin: 6px 0 10px } .mt-hinweis-box { border: 1px solid var(--linie); border-radius: 12px; padding: 10px 12px; font-size: .85rem; color: var(--nebel); margin: 6px 0 12px } .mt-app-liste .mt-person { padding: 10px 0 } .mt-installieren { margin-top: 10px } /* Host-Aktionen: Vollbild-Schicht ueber allem, faengt keine Klicks */ .mte { position: fixed; inset: 0; z-index: 9999; pointer-events: none; overflow: hidden } .mte-blitz { position: absolute; inset: 0; background: #fff; opacity: 0; animation-name: mte-blitz; animation-timing-function: ease-out; animation-fill-mode: forwards; animation-iteration-count: 1 } @keyframes mte-blitz { 0% { opacity: 0 } 15% { opacity: .85 } 100% { opacity: 0 } } .mte-nachleuchten::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 30%, rgba(170,150,255,.22), transparent 60%); animation: mte-weich 2.3s ease-out forwards } .mte-leuchten::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, rgba(255,240,200,.35), transparent 65%); animation: mte-weich 2.3s ease-in-out forwards } @keyframes mte-weich { 0% { opacity: 0 } 30% { opacity: 1 } 100% { opacity: 0 } } .mte-mitte { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); font-size: clamp(4rem, 14vw, 9rem); animation: mte-weich 2.4s ease-in-out forwards; filter: drop-shadow(0 8px 24px rgba(0,0,0,.45)) } .mte-gross { animation: mte-auf 2.4s ease-out forwards } @keyframes mte-auf { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6) } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.08) } 80% { opacity: 1; transform: translate(-50%, -50%) scale(1) } 100% { opacity: 0 } } .mte-wirbel { animation: mte-wirbel .09s linear 18, mte-weich 2.4s ease-in-out forwards } @keyframes mte-wirbel { 0%, 100% { margin-left: 0 } 50% { margin-left: 4px } } .mte-emo { position: absolute; bottom: -10%; font-size: 3rem; opacity: 0 } .mte-emo.steigt { animation: mte-steigen 2.2s ease-out forwards } @keyframes mte-steigen { 0% { opacity: 0; transform: translateY(0) } 15% { opacity: 1 } 100% { opacity: 0; transform: translateY(-80vh) } } .mte-leinwand { position: absolute; inset: 0; width: 100%; height: 100% } .mte-text { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); padding: 6px 14px; border-radius: 999px; background: rgba(13,6,18,.7); color: #fff; font-size: .9rem; animation: mte-weich 2.4s ease-in-out forwards } /* Ruhig (prefers-reduced-motion oder eigene Einstellung): nur Ein- und Ausblenden, nichts blitzt, nichts bewegt sich */ .mte.ruhig .mte-blitz, .mte.ruhig .mte-leinwand, .mte.ruhig .mte-emo { display: none } .mte.ruhig .mte-mitte, .mte.ruhig .mte-gross, .mte.ruhig .mte-wirbel { animation: mte-weich 2.4s ease-in-out forwards } @media (prefers-reduced-motion: reduce) { .mte-blitz, .mte-leinwand, .mte-emo { display: none !important } .mte-mitte, .mte-gross, .mte-wirbel { animation: mte-weich 2.4s ease-in-out forwards !important } .mt-schweb { animation: mte-weich 2.4s ease-in-out forwards; bottom: 20% } } .mt-dialog textarea { width: 100%; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--linie); background: var(--nacht); color: var(--milch); font: inherit } /* 11.10.: leise Knoepfe auf den Karten brauchen eine Kante — sonst verschwinden sie auf dem gleich getoenten Kartengrund */ .mtg .mtg-karte .knopf.leise, .mtg .mtg-details .knopf.leise { background: var(--pflaume); border: 1px solid var(--linie); color: var(--milch) } .mtg .mtg-karte .knopf.leise:hover, .mtg .mtg-details .knopf.leise:hover { border-color: var(--korall) } .mtg-status, .mtg-info, .mtg-leer .klein { max-width: none } /* Feste Fusszeile: rechts Platz fuer die schwebende MEE-Pille; unter 980 px steht unten die App-Leiste — dort normal im Fluss */ @media (min-width: 981px) { .mtg-fuss { padding-right: 190px } } @media (max-width: 980px) { .mtg-fuss { position: static } } /* 11.10.: Die Reiter der Seitenleiste sind ein