/* Dein perfekter Moment: das Werkzeug des Elektion-Plugins auf der Website (08.10.2026).
   Aufbau wie in der App (astromantie-moment-design v1 moment-calendar.css, astromantie-kategorie-bilder v1 kacheln.css,
   Moment-Regeln aus astromantie-app-guard.php; Bezug body.mo-seite statt body.astro-app; Bilder in img/moment/).
   Rahmen, Karten, Felder und Tarife seit dem Umbau der Seite wie beim Mondkalender (mk.css) statt Fensterrahmen
   der App (Auftrag 08.10.2026). Breite Bildschirme: ab 640px drei, ab 960px vier Kacheln je Reihe. */

body.mo-seite #astro-elektion {
  --mo-gold: #e8c886; --mo-gold-hell: #f6e3b4; --mo-text: #f1eaf8; --mo-text-2: rgba(236, 228, 248, 0.8); --mo-text-3: rgba(236, 228, 248, 0.58);
  --mo-rand: rgba(170, 140, 255, 0.2); --mo-rand-2: rgba(196, 172, 255, 0.36);
  --mo-karte: linear-gradient(158deg, rgba(43, 30, 84, 0.9), rgba(17, 12, 38, 0.93));
  --mo-schatten: 0 24px 60px rgba(3, 2, 14, 0.55);
  --mo-knopf-gold: linear-gradient(135deg, #f5e1ad, #e2c27c 45%, #c99f52);
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
}

/* ===== Kopf des Plugins: die Seite traegt einen eigenen Kopf, der des Plugins faellt weg wie in der App ===== */
body.mo-seite.mo-eigener-kopf #astro-elektion .astro-hero{display:none !important}

/* ===== Kacheln (Aufbau der App, Rahmen wie .mk-bereich) ===== */
body.mo-seite .moment-designed #ek-cats.moment-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;grid-auto-flow:row!important;align-items:stretch;container-type:inline-size}
body.mo-seite .moment-designed .ek-cat{position:relative;box-sizing:border-box;min-width:0;min-height:0;padding:0!important;border:1px solid rgba(149,115,203,.42)!important;border-radius:24px!important;
  background:linear-gradient(150deg,#241838,#100d24)!important;box-shadow:inset 0 1px 0 rgba(207,178,247,.13),0 24px 60px rgba(3,2,14,.55)!important;transition:transform .35s ease,border-color .35s ease!important}
@media (hover:hover){
  body.mo-seite .moment-designed .ek-cat:not(.ek-cat-open):hover{transform:translateY(-6px);border-color:rgba(232,200,134,.62)!important}
  body.mo-seite .moment-designed .ek-cat:not(.ek-cat-open):hover .moment-icon{transform:scale(1.07) rotate(-2deg)}
}
body.mo-seite .moment-designed .ek-cat-tile{box-sizing:border-box;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:10px!important;width:100%;background:transparent!important;border:0!important;text-align:center!important;cursor:pointer}
body.mo-seite .moment-designed #ek-cats.moment-grid .ek-cat:not(.ek-cat-open){aspect-ratio:auto!important;min-height:206px!important}
body.mo-seite .moment-designed #ek-cats.moment-grid .ek-cat:not(.ek-cat-open)>.ek-cat-tile{position:relative!important;inset:auto!important;height:100%!important;min-height:206px!important;padding:20px 12px 18px!important}
body.mo-seite .moment-designed .ek-cat-icon{position:relative;width:clamp(86px,28cqi,112px)!important;height:clamp(86px,28cqi,112px)!important;flex:0 0 clamp(86px,28cqi,112px)!important;margin:0 auto!important;border:0!important;background:transparent!important;box-shadow:none!important;transition:none!important;font-size:30px}
body.mo-seite .moment-designed .moment-icon{position:absolute;inset:0;display:block;width:100%!important;height:100%!important;max-width:100%;object-fit:contain;object-position:center;visibility:hidden;pointer-events:none;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.45));transition:transform .45s cubic-bezier(.2,.8,.2,1)}
body.mo-seite .moment-designed .moment-icon-ready{font-size:0!important;color:transparent!important}
body.mo-seite .moment-designed .moment-icon-ready>.moment-icon{visibility:visible}
body.mo-seite .moment-designed .ek-cat-info{width:100%;flex:0 0 auto!important;min-width:0;text-align:center!important}
body.mo-seite .moment-designed .ek-cat-name{font:500 clamp(14px,3.8cqi,18px)/1.25 'Fraunces',serif!important;color:#f6e3b4!important;letter-spacing:0!important;white-space:normal!important;overflow-wrap:anywhere;hyphens:auto}
body.mo-seite .moment-designed .ek-cat-count{display:block!important;margin-top:4px;font:600 11.5px/1.3 'Hanken Grotesk',system-ui,sans-serif!important;letter-spacing:.12em!important;text-transform:uppercase;color:rgba(236,228,248,.58)!important}
body.mo-seite .moment-designed .ek-cat-arrow{display:none!important}
body.mo-seite .moment-designed .ek-cat-dot{position:absolute;right:12px;top:12px}
body.mo-seite .moment-designed .ek-cat-favoriten{background:linear-gradient(150deg,rgba(118,83,56,.42),rgba(53,33,64,.9))!important;border-color:rgba(236,209,160,.5)!important}
body.mo-seite .moment-designed .ek-cat-open{grid-column:1/-1!important;aspect-ratio:auto;padding:18px!important;border-color:rgba(232,200,134,.62)!important}
body.mo-seite .moment-designed .ek-cat-open>.ek-cat-tile{position:relative;flex-direction:row!important;justify-content:flex-start!important;gap:16px!important;min-height:0!important;padding:4px!important;text-align:left!important}
body.mo-seite .moment-designed .ek-cat-open .ek-cat-icon{width:76px!important;height:76px!important;flex:0 0 76px!important;margin:0!important}
body.mo-seite .moment-designed .ek-cat-open .ek-cat-info{text-align:left!important}
body.mo-seite .moment-designed .ek-cat-open .ek-cat-name{font-size:1.4rem!important}
body.mo-seite .moment-designed .ek-cat-open .ek-questions{margin-top:14px;border-top:1px solid rgba(190,165,255,.14);padding-top:14px}
body.mo-seite .moment-designed .ek-cat-tile:focus-visible{outline:2px solid #e8c886;outline-offset:3px;border-radius:20px}
@media (min-width:640px){
  body.mo-seite .moment-designed #ek-cats.moment-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important}
}
@media (min-width:960px){
  body.mo-seite .moment-designed #ek-cats.moment-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:20px!important}
}
/* Zwei Spalten wie in der App nur auf schmalen Bildschirmen, bevor das Skript das Raster setzt */
@media (max-width:639px){body.mo-seite .ek-categories{grid-template-columns:1fr 1fr !important;gap:12px !important}}
body.mo-seite .ek-cat{min-width:0 !important;box-sizing:border-box !important}

/* ===== Karten (wie .mk-karte) ===== */
body.mo-seite #astro-elektion .ek-card,
body.mo-seite #astro-elektion .ek-premium-banner,
body.mo-seite #astro-elektion .ek-retro-banner,
body.mo-seite #astro-elektion .ek-disclaimer-panel-inner,
body.mo-seite .ek-day-popup{border-radius:24px!important;background:var(--mo-karte,linear-gradient(158deg,rgba(43,30,84,.96),rgba(17,12,38,.97)))!important;border:1px solid rgba(170,140,255,.2)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 18px 40px rgba(150,120,230,.06),0 24px 60px rgba(3,2,14,.55)!important}
body.mo-seite .ek-day-popup{background:linear-gradient(158deg,#2b1e54,#110c26)!important}
body.mo-seite #astro-elektion .ek-card{padding:24px!important}
body.mo-seite #astro-elektion .ek-premium-banner{padding:24px 28px!important;margin-bottom:18px!important;color:rgba(236,228,248,.8)!important;font-size:.95rem!important}
body.mo-seite #astro-elektion .ek-premium-headline,body.mo-seite #astro-elektion .ek-premium-headline strong{font-family:'Fraunces',serif!important;font-weight:500!important;font-size:1.2rem!important;color:#f6e3b4!important}
body.mo-seite #astro-elektion .ek-premium-sub-active{color:#8fdc9c!important}
body.mo-seite #astro-elektion .ek-section-title,body.mo-seite #astro-elektion .ek-cal-header{font-family:'Fraunces',serif!important;font-weight:500!important;letter-spacing:.26em!important;color:#e8c886!important}
body.mo-seite .ek-hover-box,body.mo-seite .ek-tl-tooltip,body.mo-seite .ek-tl-hover{border-radius:16px!important;background:linear-gradient(158deg,#2b1e54,#110c26)!important;border:1px solid rgba(196,172,255,.36)!important;box-shadow:0 18px 40px rgba(3,2,14,.6)!important}

/* ===== Felder in den Karten (wie .mk-fakten li) ===== */
body.mo-seite #astro-elektion .ek-question,
body.mo-seite #astro-elektion .ek-best-item,
body.mo-seite #astro-elektion .ek-tl-info-row,
body.mo-seite #astro-elektion .ek-eclipse-warn,
body.mo-seite .ek-dp-moon-info,body.mo-seite .ek-dp-voc-warning,body.mo-seite .ek-dp-cosmic-item,body.mo-seite .ek-dp-explanation,
body.mo-seite .ek-dp-aspect-row,body.mo-seite .ek-dp-transit-row,body.mo-seite .ek-dp-atmosphere{border-radius:16px!important;background:rgba(255,255,255,.035)!important;border:1px solid rgba(190,165,255,.12)!important;box-shadow:none!important}
body.mo-seite #astro-elektion .ek-question{width:100%!important;box-sizing:border-box!important;padding:12px 16px!important;margin-bottom:10px!important;font-size:1rem!important;color:#f1eaf8!important;text-align:left!important;transform:none!important;flex-wrap:wrap !important;min-width:0 !important}
@media (hover:hover){body.mo-seite #astro-elektion .ek-question:hover{border-color:rgba(232,200,134,.45)!important}}
body.mo-seite #astro-elektion .ek-question.selected{border-color:#e8c886!important;background:linear-gradient(160deg,rgba(232,200,134,.16),rgba(232,200,134,.04))!important;box-shadow:0 6px 28px -10px rgba(232,200,134,.55)!important}
body.mo-seite #astro-elektion .ek-q-num{width:32px!important;height:32px!important;border-radius:50%!important;background:radial-gradient(circle,rgba(232,200,134,.16),rgba(232,200,134,0) 70%)!important;border:1px solid rgba(232,200,134,.4)!important;color:#e8c886!important;font:500 .85rem/1 'Fraunces',serif!important;box-shadow:none!important}
body.mo-seite #astro-elektion .ek-q-text{flex:1}
body.mo-seite #astro-elektion .ek-badge{font-size:.7rem!important;font-weight:800!important;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px!important;border-radius:999px!important}
body.mo-seite #astro-elektion .ek-badge-free{background:rgba(143,220,156,.14)!important;border:1px solid rgba(143,220,156,.5);color:#8fdc9c!important}
body.mo-seite #astro-elektion .ek-badge-pro{background:rgba(194,176,255,.12)!important;border:1px solid rgba(196,172,255,.36);color:#c2b0ff!important}
body.mo-seite #astro-elektion .ek-questions-hint{font-size:.9rem!important;color:rgba(236,228,248,.58)!important}
/* Ausgewaehlte Frage: der Hinweis (.ek-q-desc) steht UNTER der Frage (volle Breite, umbrechend), wie in der App */
body.mo-seite #astro-elektion .ek-q-desc{flex-basis:100% !important;box-sizing:border-box !important;margin:8px 0 0 !important;padding:0 2px 0 44px !important;border:0 !important;background:none!important;color:rgba(236,228,248,.8)!important;font-size:.9rem!important;overflow-wrap:break-word !important}
body.mo-seite #astro-elektion .ek-best-item.top1{border-color:rgba(232,200,134,.6)!important;background:linear-gradient(160deg,rgba(232,200,134,.14),rgba(232,200,134,.03))!important}

/* ===== Suchfeld, Pfeile, Knoepfe (wie mk.css) ===== */
body.mo-seite .moment-designed .ek-search-input,body.mo-seite #astro-elektion .ek-search-input{box-sizing:border-box;width:100%;min-height:54px;border:1px solid rgba(196,172,255,.36)!important;border-radius:999px!important;background:rgba(20,14,44,.9)!important;color:#f1eaf8!important;font:400 16px/1.35 'Hanken Grotesk',system-ui,sans-serif!important;box-shadow:none!important}
body.mo-seite #astro-elektion .ek-search-icon{color:#e8c886!important}
body.mo-seite #astro-elektion .ek-cal-nav,body.mo-seite #astro-elektion .ek-best-nav button{border-radius:50%!important;border:1px solid rgba(196,172,255,.36)!important;background:rgba(20,14,44,.9)!important;color:#e8c886!important}
body.mo-seite #astro-elektion .ek-btn-primary,body.mo-seite #astro-elektion .ek-premium-btn,body.mo-seite #astro-elektion .ek-paywall-btn{border:0!important;border-radius:999px!important;background:linear-gradient(135deg,#f5e1ad,#e2c27c 45%,#c99f52)!important;color:#1b1404!important;font-weight:700!important;box-shadow:0 12px 34px rgba(226,190,110,.32),inset 0 1px 0 rgba(255,255,255,.55)!important}

/* ===== Tarifkarten in der Sperre (wie .mk-tarif) ===== */
body.mo-seite .ek-abo-btn{position:relative !important;border-radius:18px!important;border:1px solid rgba(200,195,220,.2)!important;background:rgba(255,255,255,.03)!important;box-shadow:none!important;color:#f1eaf8!important;transform:none!important}
@media (hover:hover){body.mo-seite .ek-abo-btn:hover{border-color:rgba(232,200,134,.45)!important}}
body.mo-seite .ek-abo-btn.rd-abosel{border-color:#e8c886!important;background:linear-gradient(160deg,rgba(232,200,134,.16),rgba(232,200,134,.04))!important;box-shadow:0 6px 28px -10px rgba(232,200,134,.55)!important}
body.mo-seite .ek-abo-btn.rd-abosel::after{content:'';position:absolute;left:-9px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;background:linear-gradient(135deg,#f5e1ad,#e2c27c 45%,#c99f52);box-shadow:0 0 0 3px rgba(18,13,40,.95)}
body.mo-seite .ek-abo-btn .ek-abo-btn-price{font-family:'Fraunces',serif!important;font-weight:500!important;color:#f6e3b4!important}
body.mo-seite .ek-abo-btn:not(.rd-abosel) .ek-abo-btn-price{color:rgba(236,228,248,.8)!important}
body.mo-seite .ek-abo-btn-badge{border-radius:999px!important;background:linear-gradient(135deg,#f5e1ad,#e2c27c 45%,#c99f52)!important;color:#1b1404!important;font-weight:800!important}
body.mo-seite .rd-abo-incl{text-align:center;font-size:.9rem;color:#f6e3b4;margin:4px 0 12px;font-weight:500}
/* Sperr-Overlay: Hintergrund schimmert durch, Hoehe begrenzt, wie in der App, aber nur fuer Konten (dort zwei
   Tarifkarten). Gaeste haben zusaetzlich die Geburtsdaten-Felder: ihr Overlay bleibt deckend und waechst mit. */
body.mo-seite.logged-in .ek-paywall-overlay{background:rgba(13,10,38,.42) !important}
body.mo-seite .ek-result.ek-paywall{min-height:560px !important}
body.mo-seite.logged-in .ek-result.ek-paywall{max-height:680px !important}
body.mo-seite .ek-result.ek-paywall .ek-paywall-overlay{overflow-y:auto !important}
@media(prefers-reduced-motion:reduce){body.mo-seite .moment-designed .ek-cat,body.mo-seite .moment-designed .moment-icon{transition:none!important}}