/* ============================================================

   Wöchentliches Horoskop – Modernes Design

   Klassen passend zu class-horoscope-frontend.php

   ============================================================ */



@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=DM+Sans:wght@300;400;500&display=swap');



:root {

    --cream:       #FAF8F4;

    --ink:         #1A1A2E;

    --ink-light:   #4A4A6A;

    --accent:      #C084FC;

    --accent-warm: #F59E0B;

    --border:      #E8E4F0;

    --card-bg:     #FFFFFF;

    --shadow-sm:   0 2px 8px rgba(100, 80, 160, 0.08);

    --shadow-md:   0 8px 32px rgba(100, 80, 160, 0.13);

    --radius:      20px;

}



/* ── Haupt-Container ── */

.wh-all-horoscopes {

    font-family: 'DM Sans', sans-serif;

    background: var(--cream);

    padding: 48px 24px 64px;

    box-sizing: border-box;

}



/* ── Header ── */

.wh-week-header {

    text-align: center;

    margin-bottom: 48px;

}



.wh-week-header::before {

    content: '✦';

    display: block;

    font-size: 22px;

    color: var(--accent);

    margin-bottom: 12px;

    animation: wh-twinkle 3s ease-in-out infinite;

}



@keyframes wh-twinkle {

    0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }

    50%       { opacity: 0.5; transform: scale(1.3) rotate(20deg); }

}



.wh-week-header h2 {

    font-family: 'Playfair Display', serif !important;

    font-size: clamp(2rem, 5vw, 3rem) !important;

    font-weight: 700 !important;

    color: var(--ink) !important;

    margin: 0 0 14px !important;

    letter-spacing: -0.5px;

    line-height: 1.1;

    border: none !important;

}



.wh-week-header p {

    font-size: 0.9rem;

    color: var(--ink-light);

    letter-spacing: 0.08em;

    text-transform: uppercase;

    padding: 6px 18px;

    display: inline-block;

    background: var(--border);

    border-radius: 100px;

    margin: 0;

}



/* ── Grid ── */

.wh-horoscopes-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

    gap: 24px;

    max-width: 1100px;

    margin: 0 auto;

}



/* ── Einzelne Karte ── */

.wh-horoscope-item {

    background: var(--card-bg);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    padding: 28px 28px 24px;

    box-shadow: var(--shadow-sm);

    transition: transform 0.25s ease, box-shadow 0.25s ease;

    position: relative;

    overflow: hidden;

}



/* Farbiger Top-Balken beim Hover */

.wh-horoscope-item::before {

    content: '';

    position: absolute;

    top: 0; left: 0; right: 0;

    height: 3px;

    background: linear-gradient(90deg, var(--card-accent, var(--accent)), var(--accent-warm));

    opacity: 0;

    transition: opacity 0.25s ease;

}



.wh-horoscope-item:hover {

    transform: translateY(-5px);

    box-shadow: var(--shadow-md);

}



.wh-horoscope-item:hover::before {

    opacity: 1;

}



/* ── Sternzeichen-Titel ── */

.wh-horoscope-item .wh-sign-title {

    font-family: 'Playfair Display', serif !important;

    font-size: 1.25rem !important;

    font-weight: 600 !important;

    color: var(--ink) !important;

    margin: 0 0 14px !important;

    padding: 0 !important;

    border: none !important;

    line-height: 1.2;

}



/* Trennlinie unter dem Titel */

.wh-horoscope-item .wh-sign-title::after {

    content: '';

    display: block;

    height: 1px;

    background: var(--border);

    margin-top: 12px;

}



/* ── Horoskop-Text ── */

.wh-horoscope-text {

    font-size: 0.93rem;

    line-height: 1.75;

    color: var(--ink-light);

    font-weight: 400;

}



/* ── Einzelnes Horoskop (Single-Shortcode) ── */

.wh-horoscope-single {

    font-family: 'DM Sans', sans-serif;

    background: var(--card-bg);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    padding: 32px;

    box-shadow: var(--shadow-sm);

    max-width: 600px;

}



.wh-horoscope-single .wh-sign-title {

    font-family: 'Playfair Display', serif !important;

    font-size: 1.5rem !important;

    font-weight: 700 !important;

    color: var(--ink) !important;

    margin: 0 0 8px !important;

    border: none !important;

}



.wh-week-info {

    font-size: 0.82rem;

    color: var(--ink-light);

    letter-spacing: 0.06em;

    text-transform: uppercase;

    margin-bottom: 20px;

    padding-bottom: 16px;

    border-bottom: 1px solid var(--border);

}



/* ── Akzentfarben je Sternzeichen ── */

.wh-horoscope-item[data-sign="widder"]     { --card-accent: #FB7185; }

.wh-horoscope-item[data-sign="stier"]      { --card-accent: #34D399; }

.wh-horoscope-item[data-sign="zwillinge"]  { --card-accent: #FBBF24; }

.wh-horoscope-item[data-sign="krebs"]      { --card-accent: #60A5FA; }

.wh-horoscope-item[data-sign="loewe"]      { --card-accent: #F97316; }

.wh-horoscope-item[data-sign="jungfrau"]   { --card-accent: #A78BFA; }

.wh-horoscope-item[data-sign="waage"]      { --card-accent: #F472B6; }

.wh-horoscope-item[data-sign="skorpion"]   { --card-accent: #EF4444; }

.wh-horoscope-item[data-sign="schuetze"]   { --card-accent: #6366F1; }

.wh-horoscope-item[data-sign="steinbock"]  { --card-accent: #14B8A6; }

.wh-horoscope-item[data-sign="wassermann"] { --card-accent: #38BDF8; }

.wh-horoscope-item[data-sign="fische"]     { --card-accent: #C084FC; }



/* ── Fehlermeldung ── */

.wh-error {

    font-family: 'DM Sans', sans-serif;

    color: #EF4444;

    background: #FEF2F2;

    border: 1px solid #FECACA;

    border-radius: 10px;

    padding: 14px 20px;

    font-size: 0.9rem;

}



/* ── Responsive ── */

@media (max-width: 640px) {

    .wh-all-horoscopes {

        padding: 32px 16px 48px;

    }

    .wh-horoscopes-grid {

        grid-template-columns: 1fr;

        gap: 16px;

    }

}