/*
* Erklär-Modus – CSS (Badge-Modell)
*
* Aktivierung: (setzt erklaer-modus.js selbst)
*
* Abhängige CSS-Variablen (müssen im Host vorhanden sein):
* --blue: #2f6bff (oder Primärfarbe des Host-Designs; Fallback ist gesetzt)
*
* Benötigte HTML-Elemente (werden von erklaer-modus.js injiziert):
* Badge-Container
*
* …
*
* Die Seite bleibt im Erklär-Modus voll bedienbar – es gibt bewusst keine
* cursor- oder pointer-events-Eingriffe mehr.
*/
/* Badge-Container: nimmt keinen Platz ein, Badges positionieren sich absolut */
#em-layer {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
overflow: visible;
z-index: 984;
}
/* ?-Badge an jedem erklärten Element */
.em-badge {
position: absolute;
width: 20px;
height: 20px;
padding: 0;
border: 2px solid #fff;
border-radius: 50%;
background: var(--blue, #2f6bff);
color: #fff;
font: 700 12px/1 -apple-system, "Segoe UI", sans-serif;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 2px 8px rgba(47, 107, 255, 0.45);
animation: em-badge-pop 0.35s ease;
transition: transform 0.15s ease;
}
.em-badge:hover {
transform: scale(1.25);
}
@keyframes em-badge-pop {
0% { transform: scale(0); }
70% { transform: scale(1.3); }
100% { transform: scale(1); }
}
/* Leuchtring um das erklärte Element (nach Badge-Klick) */
#em-ring {
position: fixed;
z-index: 960;
border: 2.5px solid var(--blue, #2f6bff);
border-radius: 10px;
background: rgba(47, 107, 255, 0.06);
pointer-events: none;
display: none;
transition: all 0.25s ease;
}
/* Erklär-Popover */
#em-pop {
position: fixed;
z-index: 986;
width: 340px;
max-width: calc(100vw - 32px);
background: #14161a;
color: #fff;
border-radius: 12px;
padding: 15px 18px 14px;
box-shadow: 0 10px 36px rgba(0, 0, 0, 0.4);
display: none;
font-size: 14px;
line-height: 1.55;
}
#em-pop .pop-title {
font-weight: 700;
font-size: 14.5px;
margin-bottom: 5px;
color: #fff;
display: flex;
align-items: center;
gap: 8px;
}
#em-pop .pop-title .q {
width: 18px;
height: 18px;
min-width: 18px;
border-radius: 50%;
background: var(--blue, #2f6bff);
font-size: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
#em-pop .em-pop-text {
color: #d3d7de;
}
#em-pop .em-pop-hint {
color: #8a909b;
font-size: 12px;
margin-top: 9px;
}