/* Constellation Layer Styles */
#constellation-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
    /*background: rgba(255, 0, 128, 0.05);  DEBUG: Extrem transparenter Hintergrund */
}

#grid-overlay-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 950;
}

#grid-overlay-layer .planisphere-horizon-circle,
#grid-overlay-layer .planisphere-horizon-curve {
    fill: none;
    stroke: rgba(var(--primary-rgb), 0.9);
    stroke-width: 2;
    opacity: 0.9;
    stroke-linecap: round;
    /* Gepunktete Linie: kurze Segmente, L f6cken etwa in Gr f6 dfe eines ASCII-Sterns */
    stroke-dasharray: 1 10;
}

#grid-overlay-layer .planisphere-grid-line {
    fill: none;
    stroke: rgba(var(--primary-rgb), 0.4);
    stroke-width: 0.5;
    opacity: 0.5;
    stroke-linecap: round;
    stroke-dasharray: 2 4;
}

#constellation-layer.visible {
    opacity: 1;
}

/* Constellation Toggle Button - uses object-btn class from app.css */

/* Constellation SVG Elements */
.constellation {
    pointer-events: none;
}

.constellation circle {
    fill: rgba(var(--primary-rgb), 0.7);
    opacity: 0.8;
    stroke: rgba(var(--primary-rgb), 0.9);
    stroke-width: 0.5;
}

/* Sterne unter dem Horizont */
.constellation circle.below-horizon {
    opacity: 0.4;
    fill: rgba(var(--primary-rgb), 0.4);
    stroke: rgba(var(--primary-rgb), 0.4);
    stroke-width: 0.3;
}

.constellation line {
    stroke: rgba(var(--primary-rgb), 0.7);
    stroke-width: 1.0;
    opacity: 0.6;
    stroke-linecap: round;
}

/* Verbindungslinien mit Sternen unter dem Horizont */
.constellation line.below-horizon {
    stroke: rgba(var(--primary-rgb), 0.4);
    opacity: 0.4;
    stroke-dasharray: 3, 3;
}

/* Verbindungslinien mit beiden Sternen unter dem Horizont */
.constellation line.both-below-horizon {
    stroke: rgba(var(--primary-rgb), 0.3);
    opacity: 0.3;
    stroke-dasharray: 2, 4;
}

.constellation text {
    fill: var(--primary-color);
    font-size: 11px;
    font-family: monospace;
    text-anchor: middle;
    opacity: 0.8;
    font-weight: bold;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.9), 0 0 5px rgba(0, 0, 0, 0.7);
}

/* Debug grid styling */
.debug-grid line {
    pointer-events: none;
}

.debug-grid text {
    pointer-events: none;
    font-family: monospace;
    font-size: 8px;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .constellation text {
        font-size: 10px;
    }

    .constellation line {
        stroke-width: 1;
    }

    .constellation circle {
        stroke-width: 0.3;
    }
}