/* Wrapper für das Icon + Tipp + Tooltip */ 

.erdschein-wrapper { 
margin-left: 1px; 
display: inline-block; 
position: relative; 
cursor: pointer; 
} 

/* 🌘 Icon */ 
.erdschein-icon { 
margin-left: 1px; 
margin-right: 1px; 
cursor: pointer; 
opacity: 0.7; 
animation: pulse 2s infinite; 
transition: opacity 0.3s ease; 
} 

.erdschein-icon:hover { 
opacity: 1; 
} 

/* Tipp-Label */ 
.erdschein-label { 
font-size: 1.00em; 
color: #444; 
text-decoration: underline dotted; 
} 

/* Hover-Effekt für Tipp! – wie bei Links */ 
.erdschein-label:hover { 
color: #0066cc; 
background-color: rgba(0, 102, 204, 0.1); /* leichtes blaues Overlay */ 
transition: color 0.3s ease, background-color 0.3s ease; 
} 

/* Aktiver Zustand bei geöffnetem Tooltip */ 
.erdschein-wrapper.active .erdschein-label { 
color: #003366; background-color: rgba(0, 102, 204, 0.15); 
} 

/* Tooltip-Box */ 
.erdschein-tooltip { 
display: none; 
position: absolute; 
bottom: -10px; 
left: 40%; 
transform: translate(-80%, 95%); /* zentriert unterhalb */ 
background: #222; 
color: #eee; 
padding: 10px 12px; 
border-radius: 6px; 
font-size: 1.1em; 
width: calc(100vw - 160px); /* oder 100% minus etwas Puffer */
max-width: none; 
z-index: 100; 
box-shadow: 0 0 10px rgba(0,0,0,0.3); 
white-space: normal; 
line-height: 1.4; 
} 

/* Sichtbar bei Klick */ 
.erdschein-tooltip.visible { 
display: block; 
} 

.erdschein-close:hover { 
color: #fff; 
} 

/* Textbereich im Tooltip */ 
.erdschein-text { 
padding-right: 10px; 
} 

/* Pulsierende Animation */ 
@keyframes pulse { 
0% { transform: scale(1); } 
50% { transform: scale(1.15); } 
100% { transform: scale(1); } 
} 

@media (hover: hover) and (pointer: fine) { 
.erdschein-label:hover { 
color: #0066cc; 
background-color: rgba(0, 102, 204, 0.1); 
transition: color 0.3s ease, background-color 0.3s ease; 
 } 
}