/* Nur die Teilnehmerseite: gleicher violetter Hintergrund wie das Portrait. */
html:has(.participant-comic), body.participant-comic { background:#5e1d79; }
.participant-comic { color:#fff; min-height:100vh; font-family:"Comic Sans MS","Comic Sans","Comic Neue","Chalkboard SE","Marker Felt",cursive; }
.participant-comic .participant-header { background:transparent; display:flex; justify-content:flex-end; align-items:flex-start; padding:12px max(18px,calc((100vw - 680px)/2)); min-height:140px; }
.participant-comic .participant-portrait { display:block; width:132px; height:132px; object-fit:cover; }
.participant-comic main { margin:0 auto; }
.participant-comic h1,.participant-comic h2,.participant-comic p,.participant-comic .muted,.participant-comic .message { color:#fff; font-family:inherit; }
.participant-comic h1 { margin-top:0; }
.participant-comic .panel { background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.42); box-shadow:none; }
.participant-comic input { color:#25102d; background:#fff; font-family:inherit; }
.participant-comic button { font-family:inherit; font-weight:bold; background:#fff; color:#5e1d79; border:1px solid #fff; }
.participant-comic button.secondary { background:transparent; color:#fff; }
.participant-comic button.group { background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.65); text-align:left; }
.participant-comic button.group:disabled { opacity:.5; cursor:not-allowed; }
.participant-comic button.group:focus-visible,.participant-comic button:focus-visible,.participant-comic input:focus-visible { outline:3px solid #fff; outline-offset:3px; }
@media(max-width:480px){.participant-comic .participant-header{min-height:105px;padding:10px 18px}.participant-comic .participant-portrait{width:90px;height:90px}}

/* QR-Code zur Teilnehmerseite, auch ohne externe Dienste sichtbar. */
.roanka-qr { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-decoration:none; color:#fff; font:700 15px "Comic Sans MS","Comic Sans","Comic Neue",cursive; }
.roanka-qr img { width:120px; height:120px; display:block; background:white; border-radius:6px; padding:3px; box-sizing:border-box; }
.screen-page .screen-header, .participant-comic .participant-header { justify-content:space-between; align-items:flex-start; }
@media(max-width:480px){ .roanka-qr img { width:88px; height:88px; } .roanka-qr {font-size:12px;} }