/* ═══════════════════════════════════════════
   ASTROMANTIE ELEKTION v2 — Styles
   Nutzt Theme CSS-Variablen (--astro-*)
   ═══════════════════════════════════════════ */

/* ── Neue Variablen ── */
.astro-elektion {
    --ek-green: #2ECC71;
    --ek-green-bg: rgba(46, 204, 113, 0.12);
    --ek-green-border: rgba(46, 204, 113, 0.5);
    --ek-yellow: #f59e0b;
    --ek-yellow-bg: rgba(245, 158, 11, 0.06);
    --ek-yellow-border: rgba(245, 158, 11, 0.35);
    --ek-red: #e74c3c;
    --ek-red-bg: rgba(231, 76, 60, 0.05);
    --ek-red-border: rgba(231, 76, 60, 0.3);
    --ek-hover-bg: rgba(20, 16, 50, 0.96);
}
body.astro-light-theme .astro-elektion {
    --ek-green-bg: rgba(46, 204, 113, 0.08);
    --ek-green-border: rgba(46, 204, 113, 0.55);
    --ek-yellow-bg: rgba(245, 158, 11, 0.05);
    --ek-yellow-border: rgba(245, 158, 11, 0.4);
    --ek-red-bg: rgba(231, 76, 60, 0.04);
    --ek-red-border: rgba(231, 76, 60, 0.3);
    --ek-hover-bg: rgba(255, 255, 252, 0.97);
}

/* ── Basis ── */
.astro-elektion { font-family: 'Inter', sans-serif; color: var(--astro-text, rgba(255,255,255,0.9)); }

/* ── Header ── */
.ek-header { text-align: center; margin-bottom: 24px; }
.ek-title { font-family: 'Cinzel', serif; font-size: 22px; font-weight: 600; color: var(--astro-gold, #e8c96a); margin: 0 0 3px; text-align: center; }
@media (max-width: 760px) { .ek-title { font-size: 18px; } }
.ek-subtitle { font-size: 13px; color: #a9a9a9; margin-bottom: 8px; }
.ek-intro { font-size: 13px; color: var(--astro-text, rgba(255,255,255,0.9)); line-height: 1.6; max-width: 560px; margin: 0 auto; }
body.astro-light-theme .ek-subtitle { color: #a9a9a9; }
body.astro-light-theme .ek-intro { color: #4a4a4a; }
.ek-card {
    background: var(--astro-card-bg, rgba(15,12,35,0.85));
    border: 1px solid var(--astro-card-border, rgba(255,255,255,0.07));
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
}
.ek-section-title {
    font-family: 'Cinzel', serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--astro-gold, #e8c96a);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-align: center;
    margin-bottom: 16px;
}

/* ── Kategorie-Grid (Layout in Phase C2 weiter unten definiert) ── */
.ek-cat {
    background: var(--astro-card-bg, rgba(15,12,35,0.85));
    border: 1px solid var(--astro-card-border, rgba(255,255,255,0.07));
    border-radius: 12px;
    padding: 14px 12px;
    cursor: pointer;
    text-align: center;
    transition: all 0.25s cubic-bezier(.4,0,.2,1);
}
.ek-cat:hover { border-color: color-mix(in srgb, var(--cat-color, #e8c96a) 30%, transparent); }
.ek-cat.ek-cat-open { grid-column: 1 / -1; border-color: color-mix(in srgb, var(--cat-color, #e8c96a) 50%, transparent); background: color-mix(in srgb, var(--cat-color, #e8c96a) 3%, var(--astro-card-bg, rgba(15,12,35,0.85))); }
/* Tile-Button */
.ek-cat-tile {
    display: flex; align-items: center; gap: 10px; width: 100%;
    background: none; border: none; cursor: pointer; padding: 0;
    color: inherit; text-align: left; font-family: inherit;
}
.ek-cat-icon {
    font-size: 22px; width: 40px; height: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; border: 1px solid; transition: all 0.2s;
}
.ek-cat-info { flex: 1; min-width: 0; }
.ek-cat-name { font-size: 11px; font-weight: 600; color: var(--astro-text); }
.ek-cat-count { font-size: 9px; color: var(--astro-text-dim, rgba(255,255,255,0.4)); margin-top: 2px; }
.ek-cat-arrow { font-size: 12px; color: var(--astro-text-dim); transition: transform 0.2s; flex-shrink: 0; }
.ek-cat-arrow.open { transform: rotate(180deg); }
.ek-cat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ek-cat-active { border-color: color-mix(in srgb, var(--cat-color, #e8c96a) 25%, transparent); background: color-mix(in srgb, var(--cat-color, #e8c96a) 2%, var(--astro-card-bg, rgba(15,12,35,0.85))); }
.ek-questions { margin-top: 12px; text-align: left; }
.ek-questions-hint { font-size: 11px; color: var(--astro-text-dim); margin-bottom: 8px; font-style: italic; }
.ek-question {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.04);
    cursor: pointer;
    font-size: 12px;
    color: var(--astro-text);
    transition: all 0.25s cubic-bezier(.4,0,.2,1);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
body.astro-light-theme .ek-question { border-color: rgba(0,0,0,0.04); }
.ek-question:hover {
    background: color-mix(in srgb, var(--cat-color, #e8c96a) 6%, transparent);
    border-color: color-mix(in srgb, var(--cat-color, #e8c96a) 25%, transparent);
    transform: translateX(2px);
}
.ek-question.selected {
    background: color-mix(in srgb, var(--cat-color, #e8c96a) 10%, transparent);
    border-color: color-mix(in srgb, var(--cat-color, #e8c96a) 50%, transparent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--cat-color, #e8c96a) 10%, transparent);
}
.ek-q-row { display: flex; align-items: center; gap: 8px; width: 100%; }
.ek-q-num {
    width: 24px; height: 24px; border-radius: 6px; font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    background: rgba(255,255,255,0.03); color: var(--astro-text-dim); border: 1px solid rgba(255,255,255,0.06);
}
.ek-q-num.active { background: var(--cat-color, var(--astro-gold)); color: #fff; border-color: transparent; box-shadow: 0 0 8px color-mix(in srgb, var(--cat-color, #e8c96a) 30%, transparent); }
.ek-q-text { min-width: 0; }
.ek-q-desc { font-size: 11px; color: var(--astro-text-dim); margin-top: 0; padding-left: 12px; border-left: 2px solid; line-height: 1.5; }
.ek-badge { font-size: 9px; padding: 2px 7px; border-radius: 8px; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.ek-badge-free { background: rgba(46,204,113,0.12); color: var(--ek-green); }
.ek-badge-pro { background: rgba(167,139,250,0.1); color: var(--astro-accent, #a78bfa); }
.ek-badge-used { background: rgba(255,255,255,0.04); color: var(--astro-text-dim); }

/* ── Premium-Banner ── */
.ek-premium-banner {
    text-align: center;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 224, 0, 0.13);
    background: rgba(120, 106, 232, 0.03);
    margin-bottom: 20px;
    font-size: 12px;
    color: var(--astro-text-dim);
}
body.astro-light-theme .ek-premium-banner {
    border: 1px solid rgba(232,201,106,0.15);
    background: rgba(232,201,106,0.04);
}
.ek-premium-banner strong { color: var(--astro-text, #fff); font-weight: 600; }
body.astro-light-theme .ek-premium-banner strong { color: #3a3a3a; }
.ek-premium-icon { font-size: 24px; margin-bottom: 8px; color: #ffd600; }
.ek-premium-text { margin-bottom: 10px; }
.ek-premium-sub { font-size: 11px; color: var(--astro-text-dim); margin-top: 4px; }
.ek-btn-primary {
    display: inline-block; padding: 8px 20px; border-radius: 20px; cursor: pointer;
    background: linear-gradient(135deg, #7c3aed, #6d28d9); color: #fff;
    border: none; font-size: 11px; font-weight: 600; transition: opacity 0.2s; font-family: 'Inter', sans-serif;
}
.ek-btn-primary:hover { opacity: 0.9; }
body.astro-light-theme .ek-btn-primary { background: linear-gradient(135deg, var(--astro-gold, #c9a84c), #a07c2a); color: #fff; }
.ek-premium-btn { margin-top: 4px; }

/* ── Retrograde-Banner ── */
.ek-retro-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid rgba(245, 158, 11, 0.2);
    background: rgba(245, 158, 11, 0.04);
    margin-bottom: 20px;
    font-size: 12px;
    color: var(--ek-yellow);
    line-height: 1.5;
}
.ek-retro-banner .ek-retro-icon { font-size: 18px; flex-shrink: 0; }
.ek-retro-banner strong { font-weight: 600; }

/* ── Desktop-Layout: Kalender links, Beste Uhrzeit rechts ── */
.ek-row-cal-best {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 16px;
}
.ek-col-calendar { flex: 1; min-width: 0; }
.ek-col-best { width: 240px; flex-shrink: 0; }
@media (max-width: 760px) {
    .ek-row-cal-best { flex-direction: column; }
    .ek-col-best { width: 100%; }
}

/* ── Kalender — 7 Spalten, farbige Kreise ── */
.ek-cal-nav {
    display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 16px;
}
.ek-cal-nav button {
    background: none; border: none; color: var(--astro-gold); font-size: 14px;
    cursor: pointer; padding: 4px 8px; opacity: 0.7; transition: opacity 0.15s;
}
.ek-cal-nav button:hover { opacity: 1; }
.ek-cal-nav span {
    font-family: 'Cinzel', serif; font-size: 13px; font-weight: 500;
    color: var(--astro-text); letter-spacing: 1px;
}
.ek-cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
.ek-cal-weekdays span { text-align: center; font-size: 10px; font-weight: 600; color: var(--astro-text-dim); letter-spacing: 0.5px; }

/* Kalender-Header mit Monats-Navigation (1.10.0). Flex-Layout: Prev-Button
   links, Titel mittig dehnbar, Next-Button rechts. Der .ek-section-title
   behält seine Uppercase-Cinzel-Optik, nur margin-bottom wird hier vom
   Header-Container übernommen. */
.ek-cal-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 12px;
}
.ek-cal-header .ek-cal-title { flex: 1; margin-bottom: 0; }
.ek-cal-nav {
    flex: 0 0 auto;
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(232, 201, 106, 0.3);
    border-radius: 50%;
    background: rgba(232, 201, 106, 0.06);
    color: var(--astro-gold, #e8c96a);
    font-family: 'Inter', sans-serif;
    font-size: 18px; line-height: 1;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    padding: 0;
}
.ek-cal-nav:hover,
.ek-cal-nav:focus {
    background: rgba(232, 201, 106, 0.14);
    border-color: rgba(232, 201, 106, 0.5);
    outline: none;
}
.ek-cal-nav:focus-visible {
    outline: 2px solid var(--astro-gold, #e8c96a);
    outline-offset: 2px;
}
.ek-cal-nav:active { transform: scale(0.94); }
.ek-cal-nav[disabled],
.ek-cal-nav.is-disabled {
    opacity: 0.3; cursor: default; pointer-events: none;
}
/* Navigation der Empfehlungsliste "Beste Uhrzeit" (±2 Jahre, Aufgabe 1) */
.ek-best-nav {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 12px;
}
.ek-best-nav-label {
    flex: 1; text-align: center;
    font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600;
    letter-spacing: 0.02em; color: var(--astro-text-dim, #9a9aa2);
}
.ek-best-empty {
    padding: 18px 8px; text-align: center;
    font-family: 'Inter', sans-serif; font-size: 12.5px;
    color: var(--astro-text-dim, #9a9aa2);
}

.ek-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }

.ek-cal-day {
    position: relative; display: flex; flex-direction: column; align-items: center;
    cursor: pointer; padding: 3px 0; transition: transform 0.15s;
}
.ek-cal-day:hover { transform: scale(1.1); z-index: 10; }
.ek-cal-day.ek-empty { pointer-events: none; }

.ek-cal-circle {
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 500; position: relative; transition: all 0.2s;
}
/* Premium-Tag (>=90): grüner Tile wie 60-89, Auszeichnung via auffälligem
   Goldstern (siehe .ek-cal-star) PLUS sanfter Gold-Glow um die Kachel.
   Bewusst KEIN scharfer Ring, damit es nicht mit dem Selection-Ring
   kollidiert. Bei selected werden Glow + Selection-Ring kombiniert. */
.ek-cal-day.excellent .ek-cal-circle {
    border: 2.5px solid var(--ek-green-border); background: var(--ek-green-bg); color: var(--ek-green);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.45);
}
body.astro-light-theme .ek-cal-day.excellent .ek-cal-circle {
    box-shadow: 0 0 12px rgba(163, 127, 28, 0.4);
}
.ek-cal-day.good .ek-cal-circle { border: 2.5px solid var(--ek-green-border); background: var(--ek-green-bg); color: var(--ek-green); }
.ek-cal-day.neutral .ek-cal-circle { border: 2px dashed var(--ek-yellow-border); background: var(--ek-yellow-bg); color: var(--ek-yellow); }
.ek-cal-day.bad .ek-cal-circle { border: 2px dashed var(--ek-red-border); background: var(--ek-red-bg); color: var(--ek-red); opacity: 0.8; }
.ek-cal-day.selected .ek-cal-circle { box-shadow: 0 0 0 2px var(--astro-gold), 0 0 14px rgba(232,201,106,0.3); }
/* Bei Premium + Selected beide Effekte stapeln: scharfer Selection-Ring
   bleibt klar abgegrenzt vom darunterliegenden weichen Premium-Glow. */
.ek-cal-day.excellent.selected .ek-cal-circle {
    box-shadow: 0 0 0 2px var(--astro-gold), 0 0 14px rgba(232,201,106,0.3), 0 0 18px rgba(212, 175, 55, 0.5);
}
body.astro-light-theme .ek-cal-day.excellent.selected .ek-cal-circle {
    box-shadow: 0 0 0 2px var(--astro-gold), 0 0 14px rgba(232,201,106,0.3), 0 0 18px rgba(163, 127, 28, 0.45);
}

/* Mobile-Only-Hint für den selektierten Tag: goldene Unterlinie unter der
   Zahl signalisiert "zweiter Tap öffnet den Tages-Detail-Popup".
   Desktop bleibt unverändert (Hover-Cue-Button übernimmt dort die Rolle). */
@media (hover: none), (max-width: 640px) {
    .ek-cal-day.selected .ek-cal-number {
        text-decoration: underline;
        text-decoration-color: var(--astro-gold, #e8c96a);
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }
}


.ek-cal-star {
    position: absolute; top: -7px; right: -7px; font-size: 15px;
    color: var(--astro-gold);
    filter: drop-shadow(0 0 4px rgba(232,201,106,0.7)) drop-shadow(0 0 8px rgba(232,201,106,0.4));
    animation: ek-star-shimmer 2.5s ease-in-out infinite; z-index: 2;
}
@keyframes ek-star-shimmer { 0%, 100% { opacity: 0.85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.15); } }

.ek-cal-warn {
    position: absolute; top: -6px; right: -6px; font-size: 14px;
    color: #ff5252;
    filter: drop-shadow(0 0 3px rgba(255, 82, 82, 0.5));
    z-index: 2;
}
.astro-light-theme .ek-cal-warn { color: #c62828; }

.ek-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 14px; font-size: 10px; color: var(--astro-text-dim); }
.ek-legend-item { display: flex; align-items: center; gap: 5px; }
.ek-legend-dot { width: 10px; height: 10px; border-radius: 50%; }
.ek-legend-dot.good { border: 2px solid var(--ek-green-border); background: var(--ek-green-bg); }
.ek-legend-dot.neutral { border: 1.5px dashed var(--ek-yellow-border); background: var(--ek-yellow-bg); }
.ek-legend-dot.bad { border: 1.5px dashed var(--ek-red-border); background: var(--ek-red-bg); opacity: 0.7; }
.ek-legend-star { font-size: 14px; color: var(--astro-gold); filter: drop-shadow(0 0 3px rgba(232,201,106,0.5)); }

/* ── Hover-Box (Glasmorphismus) ── */
.ek-hover-box {
    display: none; position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%);
    width: 270px; background: var(--ek-hover-bg);
    border: 1px solid var(--astro-card-border); border-radius: 14px;
    padding: 16px 18px; z-index: 50;
    backdrop-filter: blur(20px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 1px rgba(232,201,106,0.1);
}
.ek-hover-box::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--astro-gold-dim, rgba(232,201,106,0.3)), transparent);
    border-radius: 14px 14px 0 0;
}
.ek-hover-box::after {
    content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 7px solid transparent; border-top-color: var(--ek-hover-bg);
}
/* v1.2.0-b17: Hover wird jetzt via JS-Lifecycle mit Grace-Timer gesteuert.
   CSS-:hover-Trigger ist raus, .is-visible ist der neue Show-Switch.
   .show-hover bleibt als optionaler manueller Override (für Debug/Tests). */
.ek-hover-box.is-visible,
.ek-cal-day.show-hover .ek-hover-box { display: block; }

/* Overflow-Korrekturen */
.ek-cal-day:nth-child(7n+6) .ek-hover-box, .ek-cal-day:nth-child(7n) .ek-hover-box { left: auto; right: -10px; transform: none; }
.ek-cal-day:nth-child(7n+6) .ek-hover-box::after, .ek-cal-day:nth-child(7n) .ek-hover-box::after { left: auto; right: 24px; transform: none; }
.ek-cal-day:nth-child(7n+1) .ek-hover-box, .ek-cal-day:nth-child(7n+2) .ek-hover-box { left: -10px; transform: none; }
.ek-cal-day:nth-child(7n+1) .ek-hover-box::after, .ek-cal-day:nth-child(7n+2) .ek-hover-box::after { left: 24px; transform: none; }
.ek-cal-grid .ek-cal-day:nth-child(-n+8) .ek-hover-box { bottom: auto; top: calc(100% + 12px); }
.ek-cal-grid .ek-cal-day:nth-child(-n+8) .ek-hover-box::after { top: auto; bottom: 100%; border: 7px solid transparent; border-bottom-color: var(--ek-hover-bg); border-top-color: transparent; }

.ek-hover-date { font-size: 12px; font-weight: 600; color: var(--astro-text); margin-bottom: 8px; }
.ek-hover-score { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ek-hover-score-num { font-size: 22px; font-weight: 700; font-family: 'Cinzel', serif; min-width: 32px; }
.ek-hover-score-bar { flex: 1; height: 5px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; }
body.astro-light-theme .ek-hover-score-bar { background: rgba(0,0,0,0.06); }
.ek-hover-score-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }
.ek-hover-sep { height: 1px; background: linear-gradient(90deg, transparent, var(--astro-gold-dim, rgba(232,201,106,0.3)), transparent); margin: 10px 0; }

.ek-hover-transit { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 7px; font-size: 11px; line-height: 1.45; }
.ek-hover-transit-icon {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center; font-size: 11px;
}
.ek-hover-transit-icon.warn { background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.2); color: var(--ek-yellow); }
.ek-hover-transit-icon.pos { background: rgba(46,204,113,0.1); border: 1px solid rgba(46,204,113,0.2); color: var(--ek-green); }
.ek-hover-transit-icon.neg { background: rgba(231,76,60,0.08); border: 1px solid rgba(231,76,60,0.15); color: var(--ek-red); }
.ek-hover-transit-text { color: var(--astro-text-dim); }
.ek-hover-transit-text strong { color: var(--astro-text); font-weight: 500; }

.ek-hover-footer {
    margin-top: 10px; padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.04);
    display: flex; justify-content: space-between; align-items: center;
    font-size: 10px; color: var(--astro-text-dim);
}
body.astro-light-theme .ek-hover-footer { border-top-color: rgba(0,0,0,0.04); }
.ek-hover-footer strong { color: var(--astro-gold); font-weight: 600; font-size: 13px; }
.ek-hover-moon-badge {
    font-size: 9px; padding: 2px 7px; border-radius: 8px;
    background: rgba(232,201,106,0.08); border: 1px solid rgba(232,201,106,0.15); color: var(--astro-gold);
}

/* ── Beste Uhrzeit (rechte Spalte) ── */
.ek-best-list { display: flex; flex-direction: column; gap: 6px; }
.ek-best-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 10px;
    border: 1px solid var(--astro-card-border); background: rgba(255,255,255,0.01);
    transition: all 0.15s; cursor: pointer;
}
/* h21: Genau EIN Auswahl-Marker, in kraeftigem Gruen (Tobias' Wunsch). .top1 folgt
   seit h20 der Auswahl (Start: oberster Eintrag). Der gruene Rand war vorher NUR :hover,
   und auf Touch bleibt :hover am zuletzt beruehrten Eintrag kleben -> sah aus wie ein
   zweiter, dauerhaft ausgewaehlter Tag. Hover daher nur noch auf Geraeten mit echtem
   Hover; die Auswahl selbst traegt jetzt das Gruen (vorher Gold/braun). */
@media (hover: hover) {
    .ek-best-item:hover { border-color: rgba(46,204,113,0.35); background: rgba(46,204,113,0.05); }
}
.ek-best-item.top1 {
    border-color: var(--ek-green-border, rgba(46,204,113,0.55));
    background: rgba(46,204,113,0.06);
    box-shadow: 0 0 0 1px rgba(46,204,113,0.35);
}

.ek-best-star { font-size: 14px; color: var(--astro-gold); filter: drop-shadow(0 0 3px rgba(232,201,106,0.5)); flex-shrink: 0; width: 18px; text-align: center; }
.ek-best-info { flex: 1; min-width: 0; }
.ek-best-date { font-size: 11px; font-weight: 600; color: var(--astro-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ek-best-time { font-size: 9px; color: var(--astro-text-dim); margin-top: 1px; }
.ek-best-score { font-size: 20px; font-weight: 700; font-family: 'Cinzel', serif; flex-shrink: 0; }

/* Handy-Hardening: jeder Eintrag MUSS eine saubere Zeile bleiben (Stern ·
   Datum/Wochentag · Status-Symbol nebeneinander) und darf auf keinem Gerät
   zum links-gestapelten Block kollabieren. Der zusätzliche Kind-Selektor
   gewinnt an Spezifität gegen einen evtl. externen display:block-Override.
   Das Layout ist identisch zur Desktop-Basisregel — Desktop bleibt unberührt. */
.ek-best-list > .ek-best-item {
    display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center;
}
.ek-best-list > .ek-best-item > .ek-best-info { flex: 1 1 auto; min-width: 0; }
.ek-best-list > .ek-best-item > .ek-best-star,
.ek-best-list > .ek-best-item > .ek-best-score { flex: 0 0 auto; }

/* ── Timeline — SVG-Kurve ── */
.ek-timeline-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.ek-timeline-date { font-size: 12px; color: var(--astro-text); font-weight: 500; }
.ek-timeline-best-label { font-size: 11px; color: var(--astro-text-dim); }
.ek-timeline-best-label strong { color: var(--astro-gold); font-weight: 600; font-size: 13px; }
/* touch-action: pan-y → vertikales Wischen scrollt IMMER die Seite (keine
   Wisch-Falle mehr); das Diagramm ist statisch/nicht horizontal scrollbar,
   Tap auf die Punkte funktioniert weiterhin. */
.ek-timeline-wrap { position: relative; width: 100%; height: 160px; touch-action: pan-y; }
.ek-timeline-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* iOS/Android-Tap-Highlight abschalten — sonst leuchtet der unsichtbare
   20px-Hit-Target der intermediate-Dots kurz hellblau auf und sieht wie
   ein Bug aus. Ebenfalls relevant für die externen Uhrzeit-Trigger
   (Top-Tage-Liste, Day-Popup-Zeile, Beste-Zeit-Label). */
.ek-tl-dot,
.ek-tl-dot.is-intermediate,
.ek-tl-dot-best,
.ek-tl-best-trigger,
.ek-best-item,
.ek-dp-best-hour {
    -webkit-tap-highlight-color: transparent;
}

/* iOS-Hardening für die externen Uhrzeit-Trigger:
   touch-action: manipulation deaktiviert den 300ms-Double-Tap-Zoom-Delay
   und macht synthetic-click zuverlässiger. user-select unterbindet
   Text-Markierung beim Halten. Cursor ergänzt Feedback auf Desktop. */
.ek-best-item,
.ek-dp-best-hour,
.ek-tl-best-trigger {
    touch-action: manipulation;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

/* Timeline DOM-Punkte — garantiert rund, unabhängig von SVG-viewBox-Streckung */
.ek-tl-dots { position: absolute; inset: 0; pointer-events: none; }
.ek-tl-dot {
    position: absolute; transform: translate(-50%, -50%);
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--astro-gold, #e8c96a); z-index: 2;
    pointer-events: auto; cursor: pointer;
    /* Die (auf Handy 20px großen) Tap-Targets decken den Streifen fast ab.
       pan-y lässt vertikales Wischen zur Seite durch, Tap bleibt erhalten. */
    touch-action: pan-y;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ek-tl-dot.pos { background: var(--ek-green, #2ecc71); }
.ek-tl-dot.neg { background: var(--ek-red, #e74c3c); }
.ek-tl-dot.neu { background: #f59e0b; }
/* Premium-Punkt (Score ≥90): grüner Punkt mit weichem Gold-Glow,
   spiegelt Calendar-Tile-Logik (grün + Aura statt scharfer Linie).
   Zusätzlich kleiner ✦ als ::after-Marker oben rechts. */
.ek-tl-dot.premium { box-shadow: 0 0 10px rgba(212, 175, 55, 0.55); }
body.astro-light-theme .ek-tl-dot.premium { box-shadow: 0 0 10px rgba(163, 127, 28, 0.5); }
.ek-tl-dot.premium::after {
    content: '\2726';
    position: absolute; top: -10px; right: -8px;
    font-size: 10px; line-height: 1;
    color: var(--astro-gold, #d4af37);
    filter: drop-shadow(0 0 3px rgba(232,201,106,0.6));
    pointer-events: none;
}
.ek-tl-dot.is-voc { opacity: 0.55; outline: 1px solid rgba(255, 215, 0, 0.4); outline-offset: 2px; }
.ek-tl-dot:hover { transform: translate(-50%, -50%) scale(1.4); box-shadow: 0 0 10px rgba(232, 201, 106, 0.5); z-index: 3; }
.ek-tl-dot-best {
    width: 18px; height: 18px;
    box-shadow: 0 0 14px rgba(255, 183, 77, 0.65), 0 0 0 2px var(--astro-gold, #e8c96a);
    z-index: 3;
}
.ek-tl-dot-best:hover { transform: translate(-50%, -50%) scale(1.2); }

/* ── Timeline Hover-Box ── */
.ek-tl-hover {
    display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    width: 180px; background: var(--ek-hover-bg); border: 1px solid var(--astro-card-border);
    border-radius: 10px; padding: 10px 12px; z-index: 50;
    backdrop-filter: blur(16px); box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    pointer-events: none; font-family: 'Inter', sans-serif;
}
.ek-tl-hover::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1.5px;
    background: linear-gradient(90deg, transparent, var(--astro-gold-dim, rgba(232,201,106,0.3)), transparent); border-radius: 10px 10px 0 0;
}
.ek-tl-hover::after {
    content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: var(--ek-hover-bg);
}
.ek-tl-hover.visible { display: block; }
.ek-tl-hover-time { font-size: 13px; font-weight: 600; color: var(--astro-text); margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; }
.ek-tl-hover-score { font-family: 'Cinzel', serif; font-weight: 700; }
.ek-tl-hover-sep { height: 1px; background: linear-gradient(90deg, transparent, var(--astro-gold-dim, rgba(232,201,106,0.3)), transparent); margin: 6px 0; }
.ek-tl-hover-ruler { font-size: 11px; color: var(--astro-text-dim); display: flex; align-items: center; gap: 6px; }
.ek-tl-hover-ruler-icon { width: 18px; height: 18px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 10px; background: rgba(167,139,250,0.1); border: 1px solid rgba(167,139,250,0.2); }
.ek-tl-hover-voc { font-size: 10px; color: var(--ek-yellow); margin-top: 4px; }
.ek-timeline-labels { display: flex; justify-content: space-between; padding: 4px 4px 0; }
.ek-timeline-labels span { font-size: 9px; color: var(--astro-text-dim); }
.ek-timeline-legend { display: flex; justify-content: center; gap: 16px; margin-top: 12px; font-size: 10px; color: var(--astro-text-dim); }
.ek-timeline-legend-item { display: flex; align-items: center; gap: 4px; }
.ek-tl-leg-dot { width: 8px; height: 8px; border-radius: 50%; }
.ek-tl-leg-dot.pos { background: var(--ek-green); }
.ek-tl-leg-dot.neg { background: var(--ek-red); }
.ek-tl-leg-dot.voc { background: var(--ek-yellow); opacity: 0.5; }

/* Timeline-Tooltip: als Singleton am body — via JS positioniert.
   Links/Top werden in JS gesetzt (getBoundingClientRect-basiert), kein
   Transform — damit offsetWidth/Height stimmen und Klammern auf Viewport
   einfach bleibt. */
.ek-tl-tooltip {
    position: absolute; left: 0; top: 0;
    min-width: 200px; max-width: 260px;
    background: var(--ek-hover-bg, rgba(20, 18, 38, 0.95)); border: 1px solid var(--astro-card-border, rgba(255,255,255,0.1));
    border-radius: 10px; padding: 10px 12px; z-index: 1000;
    backdrop-filter: blur(16px); box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    pointer-events: none; font-family: 'Inter', sans-serif;
    opacity: 0; visibility: hidden; transition: opacity 0.12s ease;
}
.ek-tl-tooltip.is-visible { opacity: 1; visibility: visible; }
.ek-tl-tooltip::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1.5px;
    background: linear-gradient(90deg, transparent, var(--astro-gold-dim, rgba(232,201,106,0.3)), transparent); border-radius: 10px 10px 0 0;
}
.ek-tl-tip-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.ek-tl-tip-time { font-size: 13px; font-weight: 600; color: var(--astro-text); }
.ek-tl-tip-score { font-family: 'Cinzel', serif; font-weight: 700; font-size: 12px; color: var(--astro-gold, #e8c96a); }
.ek-tl-tip-pos { font-size: 11px; color: var(--astro-text, rgba(255,255,255,0.9)); line-height: 1.5; padding: 6px 0; border-top: 1px solid var(--astro-card-border, rgba(255,255,255,0.08)); border-bottom: 1px solid var(--astro-card-border, rgba(255,255,255,0.08)); }
.ek-tl-tip-ruler { color: var(--astro-text-dim, rgba(255,255,255,0.6)); }
.ek-tl-tip-aspects { font-size: 11px; color: var(--astro-text, rgba(255,255,255,0.85)); padding-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.ek-tl-tip-aspect { line-height: 1.4; }
.ek-tl-tip-empty { color: var(--astro-text-dim, rgba(255,255,255,0.5)); font-style: italic; }
.ek-tl-tip-voc { color: var(--ek-yellow, #f59e0b); margin-bottom: 4px; }

/* Eklipse-Warnung im Tooltip (Batch 3.3 / v1.11.0).
   Rot bei Eklipse-Tag (exact), orange bei ±1 Tag (near). Greift nur wenn
   Kategorie-Sensitivität ≥ 2 — wird per JS gate entschieden. */
.ek-eclipse-warn {
    padding: 6px 10px; border-radius: 6px;
    margin-bottom: 6px; font-size: 0.85em;
    line-height: 1.35;
}
.ek-eclipse-warn.is-exact { background: rgba(220, 60, 60, 0.15); color: #e06060; }
.ek-eclipse-warn.is-near  { background: rgba(230, 150, 50, 0.15); color: #e09640; }

/* Retrograd-Hinweis im Tooltip (Batch 3.5.2). Dezent, zwischen
   Mond-Position-Block und Aspekte-Liste. */
.ek-tl-tip-rx {
    font-size: 11px;
    color: var(--astro-text-dim, rgba(255,255,255,0.6));
    padding: 4px 0 2px;
    font-style: italic;
}

/* Batch 4.8: Gemeinsamer Marker-Stack unterhalb der Zeitleiste. Nimmt
   Lunation-, VoC- und Retrograde-Pills auf. Eclipse bleibt separate
   Warnzeile. Nur sichtbar wenn mindestens ein Pill gerendert wird —
   sonst rendert das JS den Container gar nicht. */
.ek-marker-stack {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin: 4px 0 10px;
}
.ek-marker-stack:empty { display: none; }

.ek-marker-pill {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10px; font-weight: 500; letter-spacing: 0.3px;
    padding: 3px 8px; border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(233, 196, 106, 0.3);
    color: #e9c46a;
    white-space: nowrap;
    cursor: default;
    -webkit-tap-highlight-color: transparent;
}

/* Typ-Modifier: Eclipse (Sonnen-/Mondfinsternis am Peak-Tag). Warnton rot,
   aber dezenter als die prominente Warnzeile darüber — die Pill dient als
   Tages-Übersicht, die Zeile als Risiko-Hinweis. */
.ek-marker-pill.is-eclipse {
    background: rgba(220, 60, 60, 0.10);
    border-color: rgba(220, 60, 60, 0.5);
    color: #e06060;
}
body.astro-light-theme .ek-marker-pill.is-eclipse {
    background: rgba(200, 40, 40, 0.08);
    border-color: rgba(200, 40, 40, 0.6);
    color: #c03030;
}

/* Typ-Modifier: Lunation (Neumond/Vollmond), kühl-silbrig. */
.ek-marker-pill.is-lunation {
    background: rgba(200, 210, 240, 0.08);
    border-color: rgba(200, 210, 240, 0.35);
    color: #ccd8ee;
}
body.astro-light-theme .ek-marker-pill.is-lunation {
    background: rgba(70, 80, 120, 0.08);
    border-color: rgba(70, 80, 120, 0.35);
    color: #3b456e;
}

/* Typ-Modifier: Void of Course, gedämpft blau-lila. */
.ek-marker-pill.is-void {
    background: rgba(150, 150, 200, 0.08);
    border-color: rgba(150, 150, 200, 0.35);
    color: #9aa0cc;
}
body.astro-light-theme .ek-marker-pill.is-void {
    background: rgba(90, 85, 130, 0.08);
    border-color: rgba(90, 85, 130, 0.35);
    color: #5d5888;
}

/* Typ-Modifier: Retrograde — neutraler Default-Ton (Orange), Planet-
   spezifische Akzente überlagern unten. */
.ek-marker-pill.is-retro {
    background: rgba(230, 150, 50, 0.08);
    border-color: rgba(230, 150, 50, 0.25);
    color: #d4a462;
}
body.astro-light-theme .ek-marker-pill.is-retro {
    background: rgba(201, 124, 30, 0.08);
    border-color: rgba(201, 124, 30, 0.3);
    color: #a0651c;
}

/* Planeten-spezifische Farbakzente (aus 4.7 übernommen). Jupiter gold-
   orange, Saturn grau-dunkel — klassische Planetenfarben. Mercury/Venus/
   Mars behalten den is-retro-Default. */
.ek-marker-pill--jupiter {
    background: rgba(212, 164, 72, 0.12);
    border-color: rgba(212, 164, 72, 0.35);
    color: #e6c06a;
}
body.astro-light-theme .ek-marker-pill--jupiter {
    background: rgba(178, 128, 34, 0.10);
    border-color: rgba(178, 128, 34, 0.35);
    color: #8a5f1a;
}
.ek-marker-pill--saturn {
    background: rgba(120, 118, 130, 0.12);
    border-color: rgba(120, 118, 130, 0.35);
    color: #a8a5b3;
}
body.astro-light-theme .ek-marker-pill--saturn {
    background: rgba(90, 88, 100, 0.10);
    border-color: rgba(90, 88, 100, 0.35);
    color: #555260;
}

/* Mobile: kompakter, aber noch gut lesbar. Flex-wrap sorgt für mehrere
   Zeilen bei ≥5 Pills (z.B. Lunation + VoC + 3 Retrograde). */
@media (max-width: 640px) {
    .ek-marker-stack { gap: 4px; margin: 4px 0 8px; }
    .ek-marker-pill  { font-size: 9.5px; padding: 2.5px 7px; }
}

/* Timeline-Info-Row (Mobile-Tap-Anzeige) */
.ek-tl-info-row {
    margin-top: 10px; padding: 10px 12px; border-radius: 10px;
    background: var(--ek-hover-bg, rgba(20,18,38,0.85)); border: 1px solid var(--astro-card-border, rgba(255,255,255,0.08));
    font-family: 'Inter', sans-serif;
}
.ek-tl-info-row[hidden] { display: none; }

/* Aktiver Dot: dezent hervorgehoben, aber keine Oval-Distortion */
.ek-tl-dot.is-active { transform: translate(-50%, -50%) scale(1.5); box-shadow: 0 0 14px rgba(232,201,106,0.65); z-index: 4; }

/* "Beste Zeit"-Label als Trigger für den Best-Dot-Tooltip */
.ek-tl-best-trigger { cursor: pointer; user-select: none; }
.ek-tl-best-trigger:hover strong,
.ek-tl-best-trigger:focus strong { text-decoration: underline; text-underline-offset: 2px; }
.ek-tl-best-trigger:focus { outline: none; }
.ek-tl-best-trigger:focus-visible { outline: 2px solid var(--astro-gold, #e8c96a); outline-offset: 3px; border-radius: 4px; }

/* Externe Uhrzeit-Trigger (Top-Tage-Liste, Day-Popup Beste Uhrzeit) */
.ek-tl-ext-trigger { cursor: pointer; user-select: none; }
.ek-tl-ext-trigger:focus { outline: none; }
.ek-tl-ext-trigger:focus-visible { outline: 2px solid var(--astro-gold, #e8c96a); outline-offset: 2px; border-radius: 6px; }
/* Nur bei reinen Text-Triggern (Day-Popup "Beste Uhrzeit"-Zeile) */
.ek-dp-best-hour.ek-tl-ext-trigger:hover strong,
.ek-dp-best-hour.ek-tl-ext-trigger:focus strong { text-decoration: underline; text-underline-offset: 2px; }

/* Pulse-Animation auf dem Best-Dot */
@keyframes ek-tl-dot-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50%      { transform: translate(-50%, -50%) scale(1.3); }
}
@keyframes ek-tl-dot-pulse-light {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50%      { transform: translate(-50%, -50%) scale(1.15); }
}
.ek-tl-dot.ek-tl-dot-pulse       { animation: ek-tl-dot-pulse       0.4s ease-in-out 2; }
.ek-tl-dot.ek-tl-dot-pulse-light { animation: ek-tl-dot-pulse-light 0.3s ease-in-out 1; }

/* Mobile Timeline: flacher, kleinere Punkte, lesbare Labels.
   Ungerade Stunden-Dots (außer Best-Stunde) werden zu is-intermediate
   — visuell transparent, aber mit 20px-Tap-Target (Finger-friendly). */
@media (max-width: 640px) {
    .ek-timeline-wrap { height: 120px; }
    .ek-tl-dot { width: 6px; height: 6px; }
    .ek-tl-dot-best { width: 11px; height: 11px; box-shadow: 0 0 8px rgba(255,183,77,0.6), 0 0 0 1.5px var(--astro-gold, #e8c96a); }
    .ek-timeline-svg .ek-tl-line { stroke-width: 1.5; }
    .ek-tl-dot.is-intermediate {
        width: 20px; height: 20px;
        background: transparent !important; border: none;
        box-shadow: none; outline: none;
    }
    .ek-tl-dot.is-intermediate:hover,
    .ek-tl-dot.is-intermediate.is-active { background: rgba(232,201,106,0.12) !important; box-shadow: none; transform: translate(-50%, -50%) scale(1); }
    .ek-timeline-labels span { font-size: 10px; }
    .ek-timeline-date { font-size: 11px; }
    .ek-timeline-best-label { font-size: 10px; }
}

/* Locked question: one document-flow purchase card, never text over results.
   Keep the app's confirmed-purchase transition: it hides the card and reveals
   the results while the server entitlement catches up. */
body:not(.rd-moment-bought) .ek-result.ek-paywall > :not(.ek-paywall-overlay) {
    display: none !important;
}
.ek-result.ek-paywall .ek-paywall-overlay {
    box-sizing: border-box;
    width: 100%; min-width: 0;
    overflow-wrap: anywhere;
}
.ek-result.ek-paywall .ek-paywall-overlay > * { flex-shrink: 0; max-width: 100%; }
/* ── Paywall Overlay ── */
.ek-paywall {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
}
.ek-paywall-overlay {
    position: relative; z-index: 10;
    background: rgba(10,10,26,0.42);
    backdrop-filter: blur(6px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 20px;
    border-radius: 16px;
}
body.astro-light-theme .ek-paywall-overlay { background: rgba(250,248,244,0.88); }
.ek-paywall-lock { font-size: 28px; margin-bottom: 10px; opacity: 0.6; }
.ek-paywall-text { font-size: 12px; color: var(--astro-text-dim); margin-bottom: 12px; line-height: 1.5; }
.ek-paywall-btn {
    font-size: 11px; padding: 8px 20px; border-radius: 20px; cursor: pointer;
    background: linear-gradient(135deg, var(--astro-gold), #c9a84c); color: #0a0a1a;
    border: none; font-weight: 600; transition: opacity 0.2s;
}
.ek-paywall-btn:hover { opacity: 0.9; }

/* ── Mobile Responsive ── */
@media (max-width: 760px) {
    .ek-card { padding: 16px 12px; }
    .ek-cal-circle { width: 38px; height: 38px; font-size: 13px; }
    .ek-cal-star { font-size: 14px; top: -6px; right: -6px; }
    .ek-hover-box { width: 240px; padding: 12px 14px; }
    .ek-cal-grid { gap: 3px; }
    .ek-row-cal-best { flex-direction: column; }
    .ek-col-best { width: 100%; }
    .ek-section-title { font-size: 11px; }
}

/* ════════════════════════════════════════════════════════════
   TAGES-POPUP (v1.2.0 Info-Feld UX)
   ════════════════════════════════════════════════════════════ */
.ek-day-popup-backdrop {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.72);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000; padding: 16px;
}
.ek-day-popup {
    position: relative;
    max-width: min(440px, calc(100vw - 32px));
    width: 100%; max-height: 80vh; overflow-y: auto;
    /* Gleiche Design-Familie wie Hover-Box (Glasmorphismus, dunkles Blau/Lila) */
    background: var(--ek-hover-bg);
    border: 1px solid rgba(232, 201, 106, 0.15);
    border-radius: 14px; padding: 20px 16px 16px;
    color: var(--astro-text, #e6e8f0);
    box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 1px rgba(232,201,106,0.1);
    backdrop-filter: blur(20px);
}
.ek-day-popup-close {
    position: absolute; top: 6px; right: 8px;
    background: transparent; border: 0;
    color: var(--astro-text-dim, #8b8e9b);
    font-size: 26px; line-height: 1; cursor: pointer;
    padding: 4px 10px; border-radius: 4px;
}
.ek-day-popup-close:hover { color: var(--astro-text, #e6e8f0); background: rgba(255,255,255,0.05); }

.ek-day-popup .ek-dp-date {
    font-size: 15px; font-weight: 600;
    color: var(--astro-text, #e6e8f0);
    padding-right: 24px;
}
.ek-day-popup .ek-dp-score-row {
    display: flex; align-items: center; gap: 12px; margin: 10px 0 14px;
}
.ek-day-popup .ek-dp-score-num { font-size: 32px; font-weight: 700; min-width: 54px; }
.ek-day-popup .ek-dp-score-bar {
    flex: 1; height: 8px; background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden;
}
.ek-day-popup .ek-dp-score-fill { height: 100%; transition: width 0.3s; }
.ek-day-popup .ek-dp-moon-info {
    font-size: 14px; padding: 8px 10px; margin: 4px 0 10px;
    background: rgba(255,255,255,0.03); border-radius: 6px;
}
.ek-day-popup .ek-dp-moon-info .phase-icon { font-size: 18px; margin-right: 4px; }
.ek-day-popup .ek-dp-moon-info .sign-icon { font-size: 16px; margin-left: 2px; }
.ek-day-popup .ek-dp-voc-warning {
    font-size: 13px; padding: 8px 10px; margin: 4px 0 10px;
    background: rgba(245, 166, 35, 0.08);
    border-left: 3px solid var(--ek-yellow, #f5a623);
    border-radius: 4px; color: var(--ek-yellow, #f5a623);
}
.ek-day-popup .ek-dp-section-header {
    font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
    text-transform: uppercase; color: var(--astro-text-dim, #8b8e9b);
    margin: 12px 0 6px;
}
.ek-day-popup .ek-dp-cosmic-notes,
.ek-day-popup .ek-dp-moon-aspects,
.ek-day-popup .ek-dp-transits { margin-top: 8px; }
.ek-day-popup .ek-dp-cosmic-item {
    padding: 6px 10px; margin: 4px 0; border-radius: 4px;
    font-size: 13px; display: flex; align-items: flex-start; gap: 6px;
    line-height: 1.45;
}
.ek-day-popup .ek-dp-cosmic-item.retro.critical {
    border-left: 3px solid var(--ek-red, #e74c3c);
    background: rgba(231, 76, 60, 0.08);
}
.ek-day-popup .ek-dp-cosmic-item.retro.friendly {
    border-left: 3px solid var(--ek-green, #27ae60);
    background: rgba(39, 174, 96, 0.08);
}
.ek-day-popup .ek-dp-cosmic-item.retro.neutral { opacity: 0.7; }
.ek-day-popup .ek-dp-cosmic-item.eclipse.peak {
    border-left: 3px solid gold; background: rgba(255, 200, 0, 0.1);
}
.ek-day-popup .ek-dp-cosmic-item.eclipse.peak strong { color: gold; font-weight: 700; }
.ek-day-popup .ek-dp-cosmic-item.eclipse.pre,
.ek-day-popup .ek-dp-cosmic-item.eclipse.post { opacity: 0.65; }
.ek-day-popup .ek-dp-cosmic-item.eclipse em { font-style: italic; }
.ek-day-popup .ek-dp-explanation {
    font-size: 13px; line-height: 1.5; margin: 10px 0;
    padding: 8px 12px;
    border-left: 2px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0 4px 4px 0;
}
.ek-day-popup .ek-dp-aspect-row,
.ek-day-popup .ek-dp-transit-row {
    display: flex; justify-content: space-between;
    font-size: 13px; padding: 4px 10px; margin: 2px 0;
    border-radius: 4px;
}
.ek-day-popup .ek-dp-aspect-row.harmonic,
.ek-day-popup .ek-dp-transit-row.harmonic {
    color: var(--ek-green, #27ae60); background: rgba(39, 174, 96, 0.06);
}
.ek-day-popup .ek-dp-aspect-row.challenging,
.ek-day-popup .ek-dp-transit-row.challenging {
    color: var(--ek-red, #e74c3c); background: rgba(231, 76, 60, 0.06);
}
.ek-day-popup .ek-dp-aspect-row.empty,
.ek-day-popup .ek-dp-transit-row.empty {
    color: var(--astro-text-dim, #8b8e9b); font-style: italic; background: transparent;
}
.ek-day-popup .ek-dp-best-hour {
    margin-top: 14px; padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 13px; color: var(--astro-text-dim, #8b8e9b);
}
.ek-day-popup .ek-dp-best-hour strong {
    color: var(--astro-text, #e6e8f0);
}

@media (max-width: 480px) {
    .ek-day-popup { padding: 16px 12px 12px; }
    .ek-day-popup .ek-dp-score-num { font-size: 28px; }
    .ek-day-popup .ek-dp-aspect-row,
    .ek-day-popup .ek-dp-transit-row { font-size: 12px; }
}

/* ════════════════════════════════════════════════════════════
   v1.2.0 UX-Batch-1: Hover-Redesign + Popup-Progress-Bar-Fix
   + Mobile-Tap-Direct-Popup
   ════════════════════════════════════════════════════════════ */

/* Popup wird an document.body gehängt, liegt NICHT mehr in
   .astro-elektion-Scope. CSS-Vars hier duplizieren damit
   inline var(--ek-green) im Popup-Fill greift und die
   Hover-bg-Variable die Design-Familie zusammenhält. */
.ek-day-popup-backdrop {
    --ek-green: #2ECC71;
    --ek-yellow: #f59e0b;
    --ek-red: #e74c3c;
    --ek-hover-bg: rgba(20, 16, 50, 0.96);
}
body.astro-light-theme .ek-day-popup-backdrop {
    --ek-hover-bg: rgba(255, 255, 252, 0.97);
}

/* Hover-Redesign: neue Zeilen */
.ek-hover-moon-info {
    font-size: 11px;
    color: var(--astro-text);
    padding: 6px 8px;
    margin: 2px 0 8px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 4px;
    line-height: 1.4;
}
body.astro-light-theme .ek-hover-moon-info { background: rgba(0, 0, 0, 0.03); }
.ek-hover-aspect {
    display: flex; justify-content: space-between;
    font-size: 11px; padding: 3px 8px; margin: 2px 0;
    border-radius: 4px; line-height: 1.4;
}
.ek-hover-aspect.harmonic { color: var(--ek-green); background: rgba(46, 204, 113, 0.06); }
.ek-hover-aspect.challenging { color: var(--ek-red); background: rgba(231, 76, 60, 0.06); }
.ek-hover-detail-cue {
    display: block;
    margin-top: 10px;
    padding: 6px 12px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(232, 201, 106, 0.25);
    border-radius: 14px;
    background: rgba(232, 201, 106, 0.06);
    color: var(--astro-gold, #e8c96a);
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.ek-hover-detail-cue:hover,
.ek-hover-detail-cue:focus {
    background: rgba(232, 201, 106, 0.14);
    border-color: rgba(232, 201, 106, 0.45);
    color: var(--astro-gold, #e8c96a);
    outline: none;
}
.ek-hover-detail-cue:focus-visible {
    outline: 2px solid var(--astro-gold, #e8c96a);
    outline-offset: 2px;
}
body.astro-light-theme .ek-hover-detail-cue {
    background: rgba(201, 168, 76, 0.08);
    border-color: rgba(201, 168, 76, 0.3);
    color: var(--astro-gold, #c9a84c);
}

/* Mobile-Tap-Direct-Popup: Präziser Query — nur echte Touch-Primary-
   Geräte. Hybrid-Devices (iPad Pro + Magic Keyboard, Surface) mit
   angeschlossener Maus bekommen weiterhin den Hover-Pfad. */
@media (hover: none) and (pointer: coarse) {
    .ek-hover-box { display: none !important; }
    .ek-hover-detail-cue { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   v1.2.0-b17 Hover-Redesign + SVG-Mondphase
   ═══════════════════════════════════════════════════════════ */
/* SVG-Mond-Icon linksbündig in Mond-Info-Zeile */
.ek-hover-moon-icon {
    display: inline-flex; vertical-align: middle;
    margin-right: 5px; line-height: 0;
}
.ek-hover-moon-info {
    display: flex; align-items: center; gap: 4px;
}
.ek-day-popup .ek-dp-moon-info .phase-icon {
    display: inline-flex; vertical-align: middle;
    margin-right: 4px; line-height: 0;
}
/* Persönliche Transite visuell abgesetzt von Mondaspekten */
.ek-hover-aspect.personal {
    border-left: 2px solid rgba(232, 201, 106, 0.35);
    padding-left: 6px;
}
.ek-hover-aspect.personal .natal-marker {
    font-size: 8px; letter-spacing: 0.5px;
    opacity: 0.75; margin-right: 1px;
    color: var(--astro-gold-dim, rgba(232, 201, 106, 0.7));
    vertical-align: super;
}

/* ════════════════════════════════════════════════════════════
   v1.2.0-b18: Hover-Bridge für Rand-Tiles
   ════════════════════════════════════════════════════════════ */
/* Gap-Messung: calc(100% + 12px) → 12px Lücke. Bridge 14px für
   2px-Safety. Bei Mauspfad durch Lücke triggert mouseenter der
   Bridge (DOM-Kind der Hover-Box) → Hover-Box-mouseenter-Handler
   → clearHide(). Gilt für alle Tiles, spürbarer Effekt an Rand-
   Tiles mit horizontal versetzter Hover-Box. */
.ek-hover-bridge {
    position: absolute;
    left: 0; right: 0;
    bottom: -14px; height: 14px;
    /* invisible — reine Hit-Zone. Für Debug: background: rgba(255,0,0,0.15); */
}
/* Top-Row-Tiles: Hover-Box sitzt unter Tile → Bridge nach oben. */
.ek-cal-grid .ek-cal-day:nth-child(-n+8) .ek-hover-box .ek-hover-bridge {
    bottom: auto; top: -14px;
}

/* ─── Phase C1: Disclaimer i-Button + Akkordeon ───────────────────── */
.ek-premium-headline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    text-align: center;
}
.ek-disclaimer-toggle {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--astro-gold, #d4af37) 60%, transparent);
    background: transparent;
    color: color-mix(in srgb, var(--astro-gold, #d4af37) 75%, transparent);
    border-radius: 50%;
    font-family: Georgia, serif;
    font-style: italic;
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
    transition: background 0.18s, color 0.18s, opacity 0.18s, border-color 0.18s;
}
.ek-disclaimer-toggle:hover {
    background: var(--astro-gold, #d4af37);
    color: #15131c;
    opacity: 1;
    border-color: var(--astro-gold, #d4af37);
}
.ek-disclaimer-toggle:focus {
    outline: 2px solid color-mix(in srgb, var(--astro-gold, #d4af37) 50%, transparent);
    outline-offset: 2px;
    opacity: 1;
}
.ek-disclaimer-toggle.is-open {
    background: var(--astro-gold, #d4af37);
    color: #15131c;
    opacity: 1;
    border-color: var(--astro-gold, #d4af37);
}
.astro-light-theme .ek-disclaimer-toggle {
    color: rgba(160, 124, 42, 0.85);
    border-color: rgba(160, 124, 42, 0.6);
}
.astro-light-theme .ek-disclaimer-toggle:hover,
.astro-light-theme .ek-disclaimer-toggle.is-open {
    background: #a37f1c;
    color: #ffffff;
    border-color: #a37f1c;
}

.ek-disclaimer-panel {
    max-height: 0;
    overflow: hidden;
    margin: 0 0 0;
    transition: max-height 0.28s ease, margin 0.28s ease, opacity 0.2s ease;
    opacity: 0;
}
.ek-disclaimer-panel.is-open {
    max-height: 360px;
    margin: 0 0 18px;
    opacity: 1;
}
.ek-disclaimer-panel-inner {
    position: relative;
    border: 1px solid color-mix(in srgb, var(--astro-gold, #d4af37) 35%, transparent);
    border-radius: 10px;
    background: rgba(212, 175, 55, 0.05);
    padding: 18px 44px 18px 20px;
    max-width: 700px;
    margin: 0 auto;
}
.astro-light-theme .ek-disclaimer-panel-inner {
    background: rgba(201, 168, 76, 0.06);
    border-color: rgba(160, 124, 42, 0.4);
}
.ek-disclaimer-panel-text {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    line-height: 1.6;
    color: #ffffff;
}
.astro-light-theme .ek-disclaimer-panel-text { color: rgba(74, 61, 36, 0.78); }
.ek-disclaimer-panel-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--astro-text-dim, rgba(255,255,255,0.5));
    font-size: 18px;
    line-height: 26px;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}
.ek-disclaimer-panel-close:hover,
.ek-disclaimer-panel-close:focus {
    background: rgba(255,255,255,0.08);
    color: var(--astro-text, #ffffff);
    outline: none;
}
.astro-light-theme .ek-disclaimer-panel-close { color: rgba(74, 61, 36, 0.55); }
.astro-light-theme .ek-disclaimer-panel-close:hover,
.astro-light-theme .ek-disclaimer-panel-close:focus {
    background: rgba(74, 61, 36, 0.08);
    color: #2a2018;
}
@media (max-width: 600px) {
    .ek-disclaimer-panel-inner { padding: 14px 38px 14px 16px; }
    .ek-disclaimer-panel-text { font-size: 12.5px; line-height: 1.55; }
    .ek-disclaimer-panel.is-open { max-height: 420px; }
}

/* ─── Kategorien-Grid: row-major, Aufklappen spannt volle Breite ──── */
.ek-categories {
    display: grid;
    grid-template-columns: 1fr 1fr;        /* Mobile: 2 Spalten */
    grid-auto-flow: row;
    gap: 12px;
    margin-bottom: 20px;
}
@media (min-width: 768px) {
    .ek-categories {
        grid-template-columns: 1fr 1fr 1fr; /* Desktop: 3 Spalten */
        gap: 16px;
    }
}
/* Geoeffnete Kategorie nimmt die volle Reihen-Breite, andere fliessen
   darunter automatisch in Spalten neu zusammen. */
.ek-cat.ek-cat-open { grid-column: 1 / -1; }


/* ─── Phase B: Suchleiste ─────────────────────────────────────────── */
.ek-search {
    position: relative;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
}
.ek-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--astro-text-dim, rgba(255,255,255,0.5));
    pointer-events: none;
}
.ek-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 38px 11px 40px;
    border: 1px solid var(--astro-card-border, rgba(255,255,255,0.07));
    border-radius: 10px;
    background: var(--astro-card-bg, rgba(15,12,35,0.85));
    color: var(--astro-text, #ffffff);
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    line-height: 1.4;
    transition: border-color 0.2s, box-shadow 0.2s;
    -webkit-appearance: none;
    appearance: none;
}
.ek-search-input::placeholder { color: var(--astro-text-dim, rgba(255,255,255,0.4)); }
.ek-search-input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--astro-gold, #d4af37) 55%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--astro-gold, #d4af37) 12%, transparent);
}
.astro-light-theme .ek-search-input {
    background: rgba(255,255,255,0.85);
    border-color: rgba(74, 61, 36, 0.18);
    color: #2a2018;
}
.astro-light-theme .ek-search-input::placeholder { color: rgba(74, 61, 36, 0.5); }
.astro-light-theme .ek-search-input:focus {
    border-color: rgba(160, 124, 42, 0.55);
    box-shadow: 0 0 0 3px rgba(160, 124, 42, 0.15);
}
.ek-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--astro-text-dim, rgba(255,255,255,0.5));
    font-size: 18px;
    line-height: 24px;
    cursor: pointer;
    border-radius: 4px;
    padding: 0;
}
.ek-search-clear:hover, .ek-search-clear:focus {
    background: rgba(255,255,255,0.08);
    color: var(--astro-text, #ffffff);
    outline: none;
}
.astro-light-theme .ek-search-clear { color: rgba(74, 61, 36, 0.55); }
.astro-light-theme .ek-search-clear:hover,
.astro-light-theme .ek-search-clear:focus { background: rgba(74, 61, 36, 0.08); color: #2a2018; }

/* Such-Ergebnisse */
.ek-search-results { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.ek-search-empty {
    padding: 26px 16px;
    text-align: center;
    color: var(--astro-text-dim, rgba(255,255,255,0.5));
    font-size: 13px;
    font-style: italic;
    border: 1px dashed var(--astro-card-border, rgba(255,255,255,0.07));
    border-radius: 10px;
}
.ek-search-group {
    border: 1px solid color-mix(in srgb, var(--cat-color, #d4af37) 18%, transparent);
    border-radius: 10px;
    overflow: hidden;
    background: var(--astro-card-bg, rgba(15,12,35,0.85));
}
.ek-search-group-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    background: color-mix(in srgb, var(--cat-color, #d4af37) 6%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--cat-color, #d4af37) 12%, transparent);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--astro-text, #ffffff);
}
.ek-search-group-icon { font-size: 14px; }
.ek-search-group-name { flex: 1; }
.ek-search-group-count {
    font-size: 10px;
    background: color-mix(in srgb, var(--cat-color, #d4af37) 25%, transparent);
    color: var(--astro-text, #ffffff);
    padding: 2px 7px;
    border-radius: 10px;
    letter-spacing: 0;
}
.ek-search-result {
    display: block;
    width: 100%;
    text-align: left;
    padding: 11px 14px;
    background: transparent;
    border: none;
    border-top: 1px solid color-mix(in srgb, var(--cat-color, #d4af37) 8%, transparent);
    cursor: pointer;
    color: var(--astro-text, #ffffff);
    font-family: inherit;
    position: relative;
    transition: background 0.15s;
}
.ek-search-result:first-of-type { border-top: none; }
.ek-search-result:hover, .ek-search-result:focus {
    background: color-mix(in srgb, var(--cat-color, #d4af37) 7%, transparent);
    outline: none;
}
.ek-search-result-q {
    font-size: 13.5px;
    font-weight: 500;
    margin-bottom: 3px;
    padding-right: 26px;
}
.ek-search-result-desc {
    font-size: 11.5px;
    color: var(--astro-text-dim, rgba(255,255,255,0.55));
    line-height: 1.45;
    padding-right: 26px;
}
.ek-search-result .ek-fav-star {
    position: absolute;
    right: 12px;
    top: 12px;
}
.astro-light-theme .ek-search-group { background: rgba(255,255,255,0.85); }
.astro-light-theme .ek-search-result { color: #2a2018; }
.astro-light-theme .ek-search-result-desc { color: rgba(74, 61, 36, 0.65); }

/* ─── Phase B: Favoriten-Stern ─────────────────────────────────────── */
.ek-fav-star {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    font-size: 16px;
    line-height: 1;
    color: rgba(255,255,255,0.25);
    cursor: pointer;
    user-select: none;
    transition: color 0.15s, background 0.15s, transform 0.1s;
    margin-left: 4px;
}
.ek-fav-star:hover { color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.06); }
.ek-fav-star:focus { outline: 2px solid color-mix(in srgb, var(--astro-gold, #d4af37) 50%, transparent); outline-offset: 1px; }
.ek-fav-star:active { transform: scale(0.92); }
.ek-fav-star.is-fav { color: #d4af37; text-shadow: 0 0 6px color-mix(in srgb, #d4af37 35%, transparent); }
.ek-fav-star.is-fav:hover { color: #e8c96a; }
.astro-light-theme .ek-fav-star { color: rgba(0,0,0,0.2); }
.astro-light-theme .ek-fav-star:hover { color: rgba(0,0,0,0.4); background: rgba(0,0,0,0.04); }
.astro-light-theme .ek-fav-star.is-fav { color: #a37f1c; text-shadow: none; }
.astro-light-theme .ek-fav-star.is-fav:hover { color: #8b6914; }

/* Quell-Kategorie-Label in der Favoriten-Liste */
.ek-q-source {
    flex-shrink: 0;
    font-size: 10px;
    letter-spacing: 0.3px;
    color: var(--astro-text-dim, rgba(255,255,255,0.5));
    background: color-mix(in srgb, var(--cat-color, #d4af37) 15%, transparent);
    padding: 3px 8px;
    border-radius: 10px;
    margin-left: 6px;
    font-weight: 500;
}
.astro-light-theme .ek-q-source { color: rgba(74, 61, 36, 0.7); }

/* Favoriten-Kategorie-Tile dezent vom Rest abheben */
.ek-cat-favoriten { border-color: color-mix(in srgb, #d4af37 25%, transparent); }
.astro-light-theme .ek-cat-favoriten { border-color: rgba(160, 124, 42, 0.3); }

/* ════════════════════════════════════════════════════════════
   Tag-Detail-Popup + Hover-Tooltip Refresh (Atmosphären-Texte,
   konkrete Aspekte/Transite, Auf-/Absteigend-Hinweis)
   ════════════════════════════════════════════════════════════ */

/* Hover: Auf-/Absteigend-Zeile, ausgeschrieben */
.ek-hover-ramp {
    font-size: 11px; font-style: italic;
    color: var(--astro-text-dim, rgba(255,255,255,0.65));
    padding: 4px 8px; margin: 2px 0 6px;
    border-left: 2px solid var(--astro-gold, #d4af37);
    background: rgba(212, 175, 55, 0.05);
    border-radius: 0 4px 4px 0;
}
body.astro-light-theme .ek-hover-ramp {
    color: rgba(74, 61, 36, 0.75);
    background: rgba(160, 124, 42, 0.06);
}

/* Popup: Score-Verdict neben der Bar */
.ek-day-popup .ek-dp-score-bar-wrap {
    flex: 1; display: flex; flex-direction: column; gap: 4px;
}
.ek-day-popup .ek-dp-score-verdict {
    font-size: 11px; font-weight: 600; letter-spacing: 0.3px;
    text-transform: uppercase;
}

/* Popup: Atmosphären-Text (kursiv, goldener linker Rand) */
.ek-day-popup .ek-dp-atmosphere {
    font-size: 14px; line-height: 1.55; font-style: italic;
    margin: 12px 0;
    padding: 10px 14px;
    border-left: 3px solid var(--astro-gold, #d4af37);
    background: rgba(212, 175, 55, 0.05);
    border-radius: 0 4px 4px 0;
    color: var(--astro-text, #e6e8f0);
}
body.astro-light-theme .ek-day-popup .ek-dp-atmosphere {
    background: rgba(160, 124, 42, 0.06);
    color: var(--astro-text, #1a1a1a);
}

/* Popup: Aspekt-Symbol farbig je Aspekt-Typ */
.ek-day-popup .ek-dp-aspect-sym {
    display: inline-block; min-width: 16px; text-align: center;
    font-size: 14px; font-weight: 600; margin-right: 6px;
}
.ek-day-popup .ek-dp-aspect-sym.asp-square      { color: var(--ek-red, #e74c3c); }
.ek-day-popup .ek-dp-aspect-sym.asp-trine       { color: var(--ek-green, #2ecc71); }
.ek-day-popup .ek-dp-aspect-sym.asp-sextile     { color: var(--astro-gold, #d4af37); }
.ek-day-popup .ek-dp-aspect-sym.asp-conjunction { color: var(--astro-text-dim, #8b8e9b); }
.ek-day-popup .ek-dp-aspect-sym.asp-opposition  { color: #f39c12; }

/* Popup: Aspekt-Zeile Layout (Symbol | Text | Zeit/Hint) */
.ek-day-popup .ek-dp-aspect-row,
.ek-day-popup .ek-dp-transit-row {
    align-items: center; gap: 6px;
}
.ek-day-popup .ek-dp-aspect-text,
.ek-day-popup .ek-dp-transit-text {
    flex: 1; color: var(--astro-text, #e6e8f0);
}
.ek-day-popup .ek-dp-aspect-row.harmonic .ek-dp-aspect-text,
.ek-day-popup .ek-dp-transit-row.harmonic .ek-dp-transit-text {
    color: var(--ek-green, #2ecc71);
}
.ek-day-popup .ek-dp-aspect-row.challenging .ek-dp-aspect-text,
.ek-day-popup .ek-dp-transit-row.challenging .ek-dp-transit-text {
    color: var(--ek-red, #e74c3c);
}
.ek-day-popup .ek-dp-aspect-time,
.ek-day-popup .ek-dp-transit-hint {
    font-size: 11px; color: var(--astro-text-dim, #8b8e9b);
    font-variant-numeric: tabular-nums;
}

/* Popup: Footer (Beste Uhrzeit links, Auf-/Absteigend rechts) */
.ek-day-popup .ek-dp-footer {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 10px;
    margin-top: 14px; padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
body.astro-light-theme .ek-day-popup .ek-dp-footer {
    border-top-color: rgba(0, 0, 0, 0.06);
}
.ek-day-popup .ek-dp-footer .ek-dp-best-hour {
    margin-top: 0; padding-top: 0; border-top: none;
}
.ek-day-popup .ek-dp-ramp {
    font-size: 12px; font-style: italic;
    color: var(--astro-text-dim, #8b8e9b);
    padding: 2px 8px;
    border-left: 2px solid var(--astro-gold, #d4af37);
}

/* ════════════════════════════════════════════════════════════
   Score-Symbol-Mapping (4 Tier: excellent/good/neutral/bad)
   Ersetzt die numerische Score-Anzeige in Hover, Popup,
   Best-Times-Liste, Timeline-Tooltip und Legende.
   ════════════════════════════════════════════════════════════ */
.ek-score-sym {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1; flex-shrink: 0;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 700;
}
/* Größen ~30 % kleiner als v1: Hover 32→22, Popup 48→32, Liste 22→16,
   Tooltip 18→14, Legende 14→12. Popup-Hero (Gold-Stern) bleibt etwas
   prominenter, wird aber separat skaliert. */
.ek-score-sym-hover    { font-size: 22px; min-width: 22px; }
.ek-score-sym-popup    { font-size: 32px; min-width: 32px; }
.ek-score-sym-list     { font-size: 16px; min-width: 16px; }
.ek-score-sym-tip      { font-size: 14px; min-width: 14px; }
.ek-score-sym-legend   { font-size: 12px; min-width: 12px; }

/* Popup-Hero: Gold-Stern in voller Größe als Auszeichnungs-Symbol für ≥90 */
.ek-score-sym-excellent-hero { font-size: 32px; min-width: 32px;
    text-shadow: 0 0 8px rgba(212,175,55,0.5), 0 0 16px rgba(212,175,55,0.25); }

/* Mini-Goldstern als Auszeichnungs-Marker neben dem grünen Häkchen
   (Premium-Tag in Hover/Liste/Tooltip/Legende). Klein, oben rechts gestapelt. */
.ek-score-sym-premium-star {
    position: absolute; top: -0.35em; right: -0.55em;
    font-size: 0.55em; line-height: 1;
    text-shadow: 0 0 3px rgba(212,175,55,0.55);
    pointer-events: none;
}

.ek-day-popup .ek-dp-score-num { /* deprecated */ display: none; }
.ek-hover-score-num { /* deprecated */ display: none; }
.ek-best-score { font-family: inherit; font-weight: normal; }
.ek-tl-tip-score { font-family: inherit; font-weight: normal; color: inherit; }

@media (max-width: 480px) {
    .ek-score-sym-excellent-hero { font-size: 26px; min-width: 26px; }
    .ek-score-sym-popup { font-size: 26px; min-width: 26px; }
}

/* ── Moment-Abo CTAs (Shop-Checkout-Integration, 2026-05-25) ── */
.ek-premium-cta {
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px dashed rgba(255,255,255,0.08);
}
body.astro-light-theme .ek-premium-cta { border-top-color: rgba(0,0,0,0.08); }
.ek-premium-cta-headline {
    font-size: 13px;
    font-weight: 600;
    color: var(--astro-text, #fff);
    margin-bottom: 10px;
}
body.astro-light-theme .ek-premium-cta-headline { color: #3a3a3a; }
.ek-premium-sub-active {
    color: #5fb87a;
    font-weight: 500;
}

.ek-abo-wrap { width: 100%; }
.ek-abo-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    margin: 0 auto 8px;
    max-width: 520px;
}
.ek-abo-btn {
    flex: 1 1 220px;
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 14px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.03);
    color: var(--astro-text, #fff);
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: transform 0.15s, border-color 0.15s, background 0.15s;
}
.ek-abo-btn:hover {
    transform: translateY(-1px);
    border-color: var(--astro-accent, #a78bfa);
    background: rgba(167,139,250,0.06);
}
body.astro-light-theme .ek-abo-btn {
    border-color: rgba(0,0,0,0.1);
    background: rgba(0,0,0,0.02);
    color: #2a2018;
}
body.astro-light-theme .ek-abo-btn:hover {
    border-color: #a07c2a;
    background: rgba(232,201,106,0.08);
}
.ek-abo-btn-recommended {
    border-color: var(--astro-accent, #a78bfa);
    background: linear-gradient(160deg, rgba(167,139,250,0.12), rgba(167,139,250,0.04));
    box-shadow: 0 4px 24px -8px rgba(167,139,250,0.4);
}
body.astro-light-theme .ek-abo-btn-recommended {
    border-color: #a07c2a;
    background: linear-gradient(160deg, rgba(232,201,106,0.18), rgba(232,201,106,0.04));
    box-shadow: 0 4px 24px -8px rgba(160,124,42,0.3);
}
.ek-abo-btn-badge {
    position: absolute;
    top: -10px;
    right: 12px;
    background: linear-gradient(135deg, #d4af37, #a07c2a);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 10px;
    letter-spacing: 0.02em;
}
.ek-abo-btn-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.ek-abo-btn-price {
    font-size: 15px;
    font-weight: 700;
    color: var(--astro-accent, #a78bfa);
}
body.astro-light-theme .ek-abo-btn-price { color: #a07c2a; }
.ek-abo-btn-recommended .ek-abo-btn-price { color: #d4af37; }
.ek-abo-btn-sub {
    font-size: 10px;
    color: var(--astro-text-dim);
    text-align: center;
}
.ek-abo-email-row {
    margin-top: 6px;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}
.ek-abo-email-row .astro-input-label {
    display: block;
    font-size: 11px;
    margin-bottom: 4px;
    color: var(--astro-text-dim);
}
.ek-abo-email-row .astro-input {
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: var(--astro-text, #fff);
    font-size: 13px;
    font-family: 'Inter', sans-serif;
}
body.astro-light-theme .ek-abo-email-row .astro-input {
    border-color: rgba(0,0,0,0.12);
    background: #fff;
    color: #2a2018;
}

/* Paywall-Overlay nimmt CTA-Buttons auf */
.ek-paywall-overlay .ek-abo-buttons { margin-top: 4px; }
.ek-paywall-overlay .ek-abo-btn { padding: 12px 10px 10px; }

@media (max-width: 480px) {
    .ek-abo-buttons { flex-direction: column; gap: 10px; }
    .ek-abo-btn { flex: 1 1 auto; }
}

/* ═══════════════════════════════════════════
   STANDALONE Hero-Cleanup (2026-05-25)
   Auf der Standalone-Seite /elektionsastrologie/ lädt die Theme-account.css
   nicht — ohne diese Regeln rendern die SVG-Glyphen riesig und der Titel
   linksbündig. Spiegelt das Account-Layout: zentriert, dezente 44px-Glyphen,
   Container-Padding statt randlos. Wird im Account-Kontext von der
   höher-spezifischen .astro-elektion-Wrapper-Cascade nicht überschrieben.
*/
.astro-elektion { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.astro-elektion .astro-hero { text-align: center; padding: 24px 8px 28px; margin-bottom: 16px; }
.astro-elektion .astro-hero-row {
    display: flex; align-items: center; justify-content: center;
    gap: 18px; margin-bottom: 12px;
}
.astro-elektion .astro-hero-glyph {
    flex: 0 0 auto; width: 44px; height: 44px;
    color: var(--astro-gold, #e8c96a); opacity: 0.85;
}
.astro-elektion .astro-hero-glyph svg { width: 100%; height: 100%; display: block; }
.astro-elektion .astro-hero-title-wrap {
    display: flex; flex-direction: column; gap: 4px; flex: 0 1 auto;
    text-align: center; align-items: center;
}
.astro-elektion .astro-hero-title {
    font-family: 'Cinzel', serif; font-weight: 500;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--astro-gold, #e8c96a);
    font-size: clamp(1.4rem, 3.2vw, 2.1rem); margin: 0; text-align: center;
}
.astro-elektion .astro-hero-sub {
    color: #C4B05A; font-size: 0.85rem; letter-spacing: 0.08em; text-align: center;
}
.astro-elektion .astro-hero-intro {
    max-width: 680px; margin: 0 auto 14px;
    color: var(--astro-text, #ffffff);
    font-family: 'Inter', sans-serif; font-size: 0.95rem; line-height: 1.7;
    text-align: center;
}
.astro-elektion .astro-hero-check { color: #4ade80; font-weight: 700; margin-left: 4px; }
.astro-elektion .astro-hero-pill {
    display: inline-block; padding: 6px 14px;
    background: rgba(232, 201, 106, 0.06);
    border: 1px solid rgba(232, 201, 106, 0.4); border-radius: 999px;
    font-size: 0.82rem; color: var(--astro-text, #ffffff);
    letter-spacing: 0.04em; margin-bottom: 16px;
}
body.astro-light-theme .astro-elektion .astro-hero-glyph {
    color: var(--astro-gold, #c9a84c); opacity: 0.9;
}
body.astro-light-theme .astro-elektion .astro-hero-title { color: var(--astro-gold, #c9a84c); }
body.astro-light-theme .astro-elektion .astro-hero-sub { color: #8A7A2A; }
body.astro-light-theme .astro-elektion .astro-hero-intro,
body.astro-light-theme .astro-elektion .astro-hero-pill { color: var(--astro-text, #2a2018); }
body.astro-light-theme .astro-elektion .astro-hero-pill {
    background: rgba(201, 168, 76, 0.08); border-color: rgba(201, 168, 76, 0.5);
}
@media (max-width: 767px) {
    .astro-elektion { padding: 0 10px; }
    .astro-elektion .astro-hero { padding: 16px 4px 22px; }
    .astro-elektion .astro-hero-row { gap: 10px; }
    .astro-elektion .astro-hero-glyph { width: 32px; height: 32px; }
    .astro-elektion .astro-hero-intro { font-size: 0.88rem; line-height: 1.65; }
    .astro-elektion .astro-hero-pill { white-space: normal; max-width: 92%; line-height: 1.45; }
}