/* CSS-baserade illustrationer för Grimmsagor */

/* Snöhvit */
.snohvit-illustration {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.snohvit-illustration::before {
    content: '👸';
    font-size: 60px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.snohvit-illustration::after {
    content: '🏰';
    font-size: 30px;
    position: absolute;
    bottom: 10px;
    right: 10px;
}

/* Askungen */
.askungen-illustration {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.askungen-illustration::before {
    content: '👠';
    font-size: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.askungen-illustration::after {
    content: '🎭';
    font-size: 25px;
    position: absolute;
    bottom: 10px;
    right: 10px;
}

/* Bremermusikanterna */
.bremermusikanterna-illustration {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #a8e6cf 0%, #7fcdcd 100%);
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.bremermusikanterna-illustration::before {
    content: '🎵';
    font-size: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.bremermusikanterna-illustration::after {
    content: '🎺';
    font-size: 25px;
    position: absolute;
    bottom: 10px;
    right: 10px;
}

/* Prinsessan Törnros */
.prinsessan-tornros-illustration {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #ff9ff3 0%, #f368e0 100%);
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.prinsessan-tornros-illustration::before {
    content: '🌹';
    font-size: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.prinsessan-tornros-illustration::after {
    content: '😴';
    font-size: 25px;
    position: absolute;
    bottom: 10px;
    right: 10px;
}

/* Lilla Rödhufvan */
.lilla-rodhufvan-illustration {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #ff7675 0%, #d63031 100%);
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.lilla-rodhufvan-illustration::before {
    content: '🧺';
    font-size: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.lilla-rodhufvan-illustration::after {
    content: '🌲';
    font-size: 25px;
    position: absolute;
    bottom: 10px;
    right: 10px;
}

/* Vargen och de sju killingarna */
.vargen-och-de-sju-killingarne-illustration {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.vargen-och-de-sju-killingarne-illustration::before {
    content: '🐐';
    font-size: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.vargen-och-de-sju-killingarne-illustration::after {
    content: '🏠';
    font-size: 25px;
    position: absolute;
    bottom: 10px;
    right: 10px;
}

/* Hans och Greta */
.hans-och-greta-illustration {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #fd79a8 0%, #e84393 100%);
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.hans-och-greta-illustration::before {
    content: '🍭';
    font-size: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.hans-och-greta-illustration::after {
    content: '🏡';
    font-size: 25px;
    position: absolute;
    bottom: 10px;
    right: 10px;
}

/* Grodkonungen */
.grodkonungen-eller-henrik-med-jarnbanden-illustration {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #00b894 0%, #00a085 100%);
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.grodkonungen-eller-henrik-med-jarnbanden-illustration::before {
    content: '🐸';
    font-size: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.grodkonungen-eller-henrik-med-jarnbanden-illustration::after {
    content: '👑';
    font-size: 25px;
    position: absolute;
    bottom: 10px;
    right: 10px;
}

            .snohvit-och-rosenrod-illustration {
                width: 100%;
                height: 200px;
                background: linear-gradient(135deg, #ff9ff3 0%, #ff7675 100%);
                border-radius: var(--radius-md);
                position: relative;
                overflow: hidden;
                box-shadow: 0 8px 25px rgba(0,0,0,0.1);
            }
            .snohvit-och-rosenrod-illustration::before {
                content: '👭';
                font-size: 50px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
            .snohvit-och-rosenrod-illustration::after {
                content: '🐻';
                font-size: 25px;
                position: absolute;
                bottom: 10px;
                right: 10px;
            }
        


            .tummeliten-illustration {
                width: 100%;
                height: 200px;
                background: linear-gradient(135deg, #a29bfe 0%, #6c5ce7 100%);
                border-radius: var(--radius-md);
                position: relative;
                overflow: hidden;
                box-shadow: 0 8px 25px rgba(0,0,0,0.1);
            }
            .tummeliten-illustration::before {
                content: '🧚';
                font-size: 50px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
            .tummeliten-illustration::after {
                content: '🌾';
                font-size: 25px;
                position: absolute;
                bottom: 10px;
                right: 10px;
            }
        


            .tummetott-ute-pa-vandring-illustration {
                width: 100%;
                height: 200px;
                background: linear-gradient(135deg, #fdcb6e 0%, #e17055 100%);
                border-radius: var(--radius-md);
                position: relative;
                overflow: hidden;
                box-shadow: 0 8px 25px rgba(0,0,0,0.1);
            }
            .tummetott-ute-pa-vandring-illustration::before {
                content: '🧑‍🦯';
                font-size: 50px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
            .tummetott-ute-pa-vandring-illustration::after {
                content: '🛤️';
                font-size: 25px;
                position: absolute;
                bottom: 10px;
                right: 10px;
            }
        


            .den-gyllne-fageln-illustration {
                width: 100%;
                height: 200px;
                background: linear-gradient(135deg, #fdcb6e 0%, #e17055 100%);
                border-radius: var(--radius-md);
                position: relative;
                overflow: hidden;
                box-shadow: 0 8px 25px rgba(0,0,0,0.1);
            }
            .den-gyllne-fageln-illustration::before {
                content: '🦅';
                font-size: 50px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
            .den-gyllne-fageln-illustration::after {
                content: '🍎';
                font-size: 25px;
                position: absolute;
                bottom: 10px;
                right: 10px;
            }
        


            .de-sex-svanorna-illustration {
                width: 100%;
                height: 200px;
                background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
                border-radius: var(--radius-md);
                position: relative;
                overflow: hidden;
                box-shadow: 0 8px 25px rgba(0,0,0,0.1);
            }
            .de-sex-svanorna-illustration::before {
                content: '🦢';
                font-size: 50px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
            .de-sex-svanorna-illustration::after {
                content: '🧵';
                font-size: 25px;
                position: absolute;
                bottom: 10px;
                right: 10px;
            }
        


            .de-sju-korparne-illustration {
                width: 100%;
                height: 200px;
                background: linear-gradient(135deg, #2d3436 0%, #636e72 100%);
                border-radius: var(--radius-md);
                position: relative;
                overflow: hidden;
                box-shadow: 0 8px 25px rgba(0,0,0,0.1);
            }
            .de-sju-korparne-illustration::before {
                content: '🐦‍⬛';
                font-size: 50px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
            .de-sju-korparne-illustration::after {
                content: '💧';
                font-size: 25px;
                position: absolute;
                bottom: 10px;
                right: 10px;
            }
        


            .flickan-fran-glasberget-illustration {
                width: 100%;
                height: 200px;
                background: linear-gradient(135deg, #81ecec 0%, #00cec9 100%);
                border-radius: var(--radius-md);
                position: relative;
                overflow: hidden;
                box-shadow: 0 8px 25px rgba(0,0,0,0.1);
            }
            .flickan-fran-glasberget-illustration::before {
                content: '🏔️';
                font-size: 50px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
            .flickan-fran-glasberget-illustration::after {
                content: '👸';
                font-size: 25px;
                position: absolute;
                bottom: 10px;
                right: 10px;
            }
        


            .jorinda-och-joringel-illustration {
                width: 100%;
                height: 200px;
                background: linear-gradient(135deg, #a8e6cf 0%, #7fcdcd 100%);
                border-radius: var(--radius-md);
                position: relative;
                overflow: hidden;
                box-shadow: 0 8px 25px rgba(0,0,0,0.1);
            }
            .jorinda-och-joringel-illustration::before {
                content: '🐦';
                font-size: 50px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
            .jorinda-och-joringel-illustration::after {
                content: '🏰';
                font-size: 25px;
                position: absolute;
                bottom: 10px;
                right: 10px;
            }
        


            .kung-trastskagg-illustration {
                width: 100%;
                height: 200px;
                background: linear-gradient(135deg, #fdcb6e 0%, #e17055 100%);
                border-radius: var(--radius-md);
                position: relative;
                overflow: hidden;
                box-shadow: 0 8px 25px rgba(0,0,0,0.1);
            }
            .kung-trastskagg-illustration::before {
                content: '👑';
                font-size: 50px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
            .kung-trastskagg-illustration::after {
                content: '🎭';
                font-size: 25px;
                position: absolute;
                bottom: 10px;
                right: 10px;
            }
        


            .gamle-sultan-illustration {
                width: 100%;
                height: 200px;
                background: linear-gradient(135deg, #fd79a8 0%, #e84393 100%);
                border-radius: var(--radius-md);
                position: relative;
                overflow: hidden;
                box-shadow: 0 8px 25px rgba(0,0,0,0.1);
            }
            .gamle-sultan-illustration::before {
                content: '🐕';
                font-size: 50px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
            .gamle-sultan-illustration::after {
                content: '🐺';
                font-size: 25px;
                position: absolute;
                bottom: 10px;
                right: 10px;
            }
        


            .haren-och-igelkotten-illustration {
                width: 100%;
                height: 200px;
                background: linear-gradient(135deg, #00b894 0%, #00a085 100%);
                border-radius: var(--radius-md);
                position: relative;
                overflow: hidden;
                box-shadow: 0 8px 25px rgba(0,0,0,0.1);
            }
            .haren-och-igelkotten-illustration::before {
                content: '🐰';
                font-size: 50px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
            .haren-och-igelkotten-illustration::after {
                content: '🏃';
                font-size: 25px;
                position: absolute;
                bottom: 10px;
                right: 10px;
            }
        


            .den-starke-hans-illustration {
                width: 100%;
                height: 200px;
                background: linear-gradient(135deg, #fdcb6e 0%, #e17055 100%);
                border-radius: var(--radius-md);
                position: relative;
                overflow: hidden;
                box-shadow: 0 8px 25px rgba(0,0,0,0.1);
            }
            .den-starke-hans-illustration::before {
                content: '💪';
                font-size: 50px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
            .den-starke-hans-illustration::after {
                content: '🗿';
                font-size: 25px;
                position: absolute;
                bottom: 10px;
                right: 10px;
            }
        


            .lycko-hans-illustration {
                width: 100%;
                height: 200px;
                background: linear-gradient(135deg, #fdcb6e 0%, #e17055 100%);
                border-radius: var(--radius-md);
                position: relative;
                overflow: hidden;
                box-shadow: 0 8px 25px rgba(0,0,0,0.1);
            }
            .lycko-hans-illustration::before {
                content: '🍀';
                font-size: 50px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
            .lycko-hans-illustration::after {
                content: '💰';
                font-size: 25px;
                position: absolute;
                bottom: 10px;
                right: 10px;
            }
        


            .doktor-allvetande-illustration {
                width: 100%;
                height: 200px;
                background: linear-gradient(135deg, #a29bfe 0%, #6c5ce7 100%);
                border-radius: var(--radius-md);
                position: relative;
                overflow: hidden;
                box-shadow: 0 8px 25px rgba(0,0,0,0.1);
            }
            .doktor-allvetande-illustration::before {
                content: '🧙‍♂️';
                font-size: 50px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
            .doktor-allvetande-illustration::after {
                content: '🔮';
                font-size: 25px;
                position: absolute;
                bottom: 10px;
                right: 10px;
            }
        


            .anden-i-flaskan-illustration {
                width: 100%;
                height: 200px;
                background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
                border-radius: var(--radius-md);
                position: relative;
                overflow: hidden;
                box-shadow: 0 8px 25px rgba(0,0,0,0.1);
            }
            .anden-i-flaskan-illustration::before {
                content: '🧞‍♂️';
                font-size: 50px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
            .anden-i-flaskan-illustration::after {
                content: '🍾';
                font-size: 25px;
                position: absolute;
                bottom: 10px;
                right: 10px;
            }
        


            .fiskaren-och-hans-hustru-illustration {
                width: 100%;
                height: 200px;
                background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
                border-radius: var(--radius-md);
                position: relative;
                overflow: hidden;
                box-shadow: 0 8px 25px rgba(0,0,0,0.1);
            }
            .fiskaren-och-hans-hustru-illustration::before {
                content: '🐟';
                font-size: 50px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
            .fiskaren-och-hans-hustru-illustration::after {
                content: '🏰';
                font-size: 25px;
                position: absolute;
                bottom: 10px;
                right: 10px;
            }