/* === kidz.theme.css – neues Farbschema === */

/* Basisfarben / Brand */
:root,
[data-bs-theme="light"] {
    /* Brandfarben */
    --bs-primary: #fb0d63;
    /* Pink */
    --bs-secondary: #37f227;
    /* Grün */
    --bs-success: #37f227;
    --bs-danger: #fb0d63;
    --bs-info: #1fc7ff;
    /* Türkis */
    --bs-warning: #ff9e1f;
    /* Orange */

    --bs-primary-rgb: 251, 13, 99;
    --bs-secondary-rgb: 55, 242, 39;
    --bs-info-rgb: 31, 199, 255;
    --bs-warning-rgb: 255, 158, 31;

    /* Links */
    --bs-link-color: var(--bs-primary);
    --bs-link-hover-color: #c90a4a;

    /* Fokus */
    --bs-focus-ring-color: rgba(var(--bs-primary-rgb), 0.3);

    /* Subtle Töne */
    --bs-primary-bg-subtle: #ffd4e3;
    --bs-secondary-bg-subtle: #e6ffe9;
    --bs-info-bg-subtle: #e6f9ff;
    --bs-warning-bg-subtle: #fff2e0;

    /* Eigene Shortcuts */
    --primary-color: #fb0d63;
    --secondary-color: #37f227;
    --accent-orange: #ff9e1f;
    --accent-turquoise: #1fc7ff;
    --text-color: #222;
    --background-color: #f9f9f9;
}

/* Dark Theme Anpassungen */
[data-bs-theme="dark"] {
    --bs-link-color: #ff6ea2;
    --bs-link-hover-color: #ffa2c0;

    --bs-primary-bg-subtle: #3a0f22;
    --bs-secondary-bg-subtle: #102f12;
    --bs-info-bg-subtle: #102630;
    --bs-warning-bg-subtle: #33210b;
}

/* Buttons */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-secondary {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.btn-info {
    background-color: var(--accent-turquoise);
    border-color: var(--accent-turquoise);
}

.btn-warning {
    background-color: var(--accent-orange);
    border-color: var(--accent-orange);
}

/* Boxen auf der Startseite */
.box-courses {
    background-color: var(--primary-color);
    /* Pink */
    color: #fff;
}

.box-teachers {
    background-color: var(--secondary-color);
    /* Grün */
    color: #111;
}

.box-gallery {
    background-color: var(--accent-orange);
    /* Orange */
    color: #fff;
}

.box-news {
    background-color: var(--accent-turquoise);
    /* Türkis */
    color: #111;
}

/* Hover-Effekt für Boxen */
.box-courses:hover,
.box-teachers:hover,
.box-gallery:hover,
.box-news:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}