/* Hintergrund global für alle Kioske */
html, body { height: 100%; }
body {
    margin: 0;
    background: #000 url("./assets/img/background.jpg") center/cover no-repeat fixed;
    color: #fff;
    font-family: Arial, sans-serif;
    display: grid;
    grid-template-rows: auto 1fr auto; /* Header / Content / Footer */
    overflow: hidden;
}

/* Header mit globalem Cornerbug */
.kiosk-header { position: relative; padding: 16px 20px; min-height: 64px; display:flex; align-items:center; }
.kiosk-title { margin: 0; font-size: 28px; }
#cornerbug {
    position: absolute; right: 20px; top: 12px;
    width: 64px; height: 64px;
    background: url("./assets/img/cornerbug.png") center/contain no-repeat;
}

/* Content */
.kiosk-content { display:flex; justify-content:center; align-items:center; padding:24px; text-align:center; }
.kiosk-content .content { width: 80%; max-width: 1400px; }
.kiosk-content h1, .kiosk-content h2 { margin: .5em 0; }

/* Footer + Legende */
.kiosk-footer { padding: 10px 0 20px; }
.kiosk-footer .separator { border:0; height:1px; background:#808080; margin: 0 10%; }
#legend { text-align:center; padding-top:10px; }

/* Legend-Einträge mit rundem, klickbarem Debug-Button */
.legend-list { display:inline-flex; gap:18px; flex-wrap:wrap; align-items:center; justify-content:center; }

.legend-item { display:flex; align-items:center; gap:8px; font-size:1.05em; }
.legend-dot {
    width: 36px; height: 36px; border-radius: 50%;
    border: 2px solid #fff; display:inline-flex; align-items:center; justify-content:center;
    cursor: pointer; user-select: none;
}
.legend-dot:hover { outline: 2px solid rgba(255,255,255,.35); }
.legend-label { opacity:.9; }

/* kleine A11y-Verbesserung für Tastaturfokus */
.legend-dot:focus { outline: 3px solid #66aaff; }