/* =========================================
   FARBSYSTEM (CMYK + GRAUTÖNE)
   ========================================= */
:root {
    /* CMYK Akzentfarben */
    --c-cyan: #00A3E0;
    --c-magenta: #E10098;
    --c-yellow: #FFD100;

    /* Grautöne */
    --c-black: #000000;
    --c-anthrazit: #1A1A1A;
    --c-gray-dark: #4D4D4D;
    --c-gray-mid: #B3B3B3;
    --c-gray-light: #F2F2F2;
}

/* =========================================
   BUTTON-GRUNDEINSTELLUNGEN
   (gilt für alle Buttons)
   ========================================= */
button,
.btn,
input[type="submit"],
input[type="button"] {
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.25s ease, 
                color 0.25s ease, 
                transform 0.2s ease;
}

/* =========================================
   PRIMÄRER BUTTON (Cyan → Magenta)
   ========================================= */
.btn-primary {
    background: var(--c-cyan);
    color: white;
}

.btn-primary:hover {
    background: var(--c-magenta);
    transform: translateY(-2px);
}

/* =========================================
   SEKUNDÄRER BUTTON (Magenta → Cyan)
   ========================================= */
.btn-secondary {
    background: var(--c-magenta);
    color: white;
}

.btn-secondary:hover {
    background: var(--c-cyan);
    transform: translateY(-2px);
}

/* =========================================
   NEUTRALER BUTTON (Grau → Cyan)
   ========================================= */
.btn-neutral {
    background: var(--c-gray-light);
    color: var(--c-anthrazit);
}

.btn-neutral:hover {
    background: var(--c-cyan);
    color: white;
    transform: translateY(-2px);
}

/* =========================================
   OUTLINE-BUTTON (Anthrazit → Cyan)
   ========================================= */
.btn-outline {
    background: transparent;
    border: 2px solid var(--c-anthrazit);
    color: var(--c-anthrazit);
}

.btn-outline:hover {
    border-color: var(--c-cyan);
    color: var(--c-cyan);
    transform: translateY(-2px);
}

/* =========================================
   DEZENTER GELB-AKZENT (optional)
   ========================================= */
.title-dot::before {
    content: "•";
    color: var(--c-yellow);
    margin-right: 6px;
}


/* Transparenz im Footer komplett deaktivieren */
ul.footer-social li a,
ul.footer-social li a:hover {
    opacity: 1 !important;
    background: transparent !important;
}

/* Grundfarbe aller Icons */
ul.footer-social li a i {
    color: #888 !important;
}

/* Markenfarben beim Hover */
ul.footer-social li a.facebook:hover i {
    color: #1877F2 !important;
}

ul.footer-social li a.instagram:hover i {
    color: #E4405F !important;
}

ul.footer-social li a.google:hover i {
    color: #4285F4 !important;
}

ul.footer-social li a.whatsapp:hover i {
    color: #25D366 !important;
}
ul.footer-social li a:hover i {
    transform: scale(1.25);
    text-shadow: 0 0 8px currentColor;
}
/* sanfter Zoom + Lift + Glow */
ul.footer-social li a i {
    transition: transform 0.25s ease, 
                color 0.25s ease, 
                text-shadow 0.35s ease;
}
ul.footer-social li a:hover i {
    transform: scale(1.25) translateY(-2px);
    text-shadow: 
        0 0 8px currentColor,
        0 0 16px currentColor;
}
/* Reihe zentrieren */
.teaser-row {
    display: flex;
    justify-content: center;
    gap: 30px; /* Abstand zwischen Boxen */
    margin: 40px auto;
}

/* FIXE Boxgröße */
.teaser-box {
    width: 380px !important;
    min-width: 380px !important;
    max-width: 380px !important;
    height: 320px !important;
    background: var(--c-gray-dark);
    border-radius: 6px;
    border: 2px solid transparent;
    padding: 30px 25px;

    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Inhalt sauber verteilt */

    text-align: center;
    text-decoration: none;
    color: inherit;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}
.teaser-row {
    display: flex;
    justify-content: center; /* zentriert die Boxen */
	align-items: flex-start;
    gap: 30px;
	flex-wrap: nowrap;
    width: 100%;
    max-width: 1600px; /* optional, aber empfehlenswert */
    margin: 0 auto;    /* zentriert die gesamte Reihe */
}
.teaser-row > * {
    flex: 0 0 auto !important;
}
/* Hover */
.teaser-box:hover {
    transform: translateY(-4px);
    border-color: var(--c-yellow);
    box-shadow: 0 0 12px rgba(255, 209, 0, 0.6);
}

/* Überschrift */
.teaser-box h2 {
    font-weight: 300;
    font-size: 20px;
    line-height: 1.3;
    margin: 0;
    color: white;
}

/* Icon */
.teaser-box .icon i {
    font-size: 48px; /* größer, passt perfekt in 380×320 */
    color: var(--c-cyan);
    transition: color 0.25s ease;
}

.teaser-box:hover .icon i {
    color: var(--c-yellow);
}

/* Text */
.teaser-box p {
    color: var(--c-gray-light);
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
}