/* ===============================================
   LANDING PAGE - Dringlichkeits-Kennzeichnung
   Minimalistisch, passend zur Material Design Sprache
   =============================================== */

/* Dringlichkeits-Badge (statt Emoji ⚠️)
   - Scharfe Ecken (border-radius: 0)
   - Dezente Hervorhebung mit border-left
   - Keine Animationen (außer dezentes Hover)
   - Nutzt bestehende Farbvariablen
*/
.badge-limited {
    display: inline-block;
    background-color: transparent;
    color: var(--szred, #ff3333);
    padding: 2px 8px 2px 4px;
    border-left: 3px solid var(--szred, #ff3333);
    font-size: 0.9em;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: none;
    white-space: nowrap;
    position: relative;
    margin-left: 4px;
}

/* Animierte Badge-Variante - OHNE border-left (verhindert doppelte Linie) */
.badge-animated {
    border-left: none !important;
}

/* Wort-für-Wort-Aufbau, gemeinsamer Abbau - FESTE DURATION */
.badge-animated .word {
    opacity: 0;
    animation: fadeInWord 4s ease-in-out infinite;
    display: inline-block;
    font-size: inherit !important;
    font-weight: inherit !important;
    letter-spacing: inherit !important;
    line-height: inherit !important;
}

/* Verschiedene Delays für gestaffelten Aufbau */
.badge-animated .word-1 { animation: fadeInWord1 4s ease-in-out infinite; }
.badge-animated .word-2 { animation: fadeInWord2 4s ease-in-out infinite; }
.badge-animated .word-3 { animation: fadeInWord3 4s ease-in-out infinite; }
.badge-animated .word-4 { animation: fadeInWord4 4s ease-in-out infinite; }
.badge-animated .word-5 { animation: fadeInWord5 4s ease-in-out infinite; }

/* Wort 1: Sofort starten */
@keyframes fadeInWord1 {
    0% { opacity: 0; transform: scale(1); filter: brightness(1); }
    5% { opacity: 1; transform: scale(1); filter: brightness(1); }
    70% { opacity: 1; transform: scale(1); filter: brightness(1); }
    73% { opacity: 1; transform: scale(1.15); filter: brightness(1.4); text-shadow: 0 0 8px rgba(255, 255, 255, 0.8); }
    76% { opacity: 1; transform: scale(1); filter: brightness(1); }
    80% { opacity: 0; transform: scale(1); filter: brightness(1); }
    100% { opacity: 0; transform: scale(1); filter: brightness(1); }
}

/* Wort 2: 0.3s später starten, ABER zur gleichen Zeit verschwinden */
@keyframes fadeInWord2 {
    0% { opacity: 0; transform: scale(1); filter: brightness(1); }
    7.5% { opacity: 0; transform: scale(1); filter: brightness(1); }
    12.5% { opacity: 1; transform: scale(1); filter: brightness(1); }
    70% { opacity: 1; transform: scale(1); filter: brightness(1); }
    73% { opacity: 1; transform: scale(1.15); filter: brightness(1.4); text-shadow: 0 0 8px rgba(255, 255, 255, 0.8); }
    76% { opacity: 1; transform: scale(1); filter: brightness(1); }
    80% { opacity: 0; transform: scale(1); filter: brightness(1); }
    100% { opacity: 0; transform: scale(1); filter: brightness(1); }
}

/* Wort 3: 0.6s später starten, ABER zur gleichen Zeit verschwinden */
@keyframes fadeInWord3 {
    0% { opacity: 0; transform: scale(1); filter: brightness(1); }
    15% { opacity: 0; transform: scale(1); filter: brightness(1); }
    20% { opacity: 1; transform: scale(1); filter: brightness(1); }
    70% { opacity: 1; transform: scale(1); filter: brightness(1); }
    73% { opacity: 1; transform: scale(1.15); filter: brightness(1.4); text-shadow: 0 0 8px rgba(255, 255, 255, 0.8); }
    76% { opacity: 1; transform: scale(1); filter: brightness(1); }
    80% { opacity: 0; transform: scale(1); filter: brightness(1); }
    100% { opacity: 0; transform: scale(1); filter: brightness(1); }
}

/* Wort 4 */
@keyframes fadeInWord4 {
    0% { opacity: 0; transform: scale(1); filter: brightness(1); }
    22.5% { opacity: 0; transform: scale(1); filter: brightness(1); }
    27.5% { opacity: 1; transform: scale(1); filter: brightness(1); }
    70% { opacity: 1; transform: scale(1); filter: brightness(1); }
    73% { opacity: 1; transform: scale(1.15); filter: brightness(1.4); text-shadow: 0 0 8px rgba(255, 255, 255, 0.8); }
    76% { opacity: 1; transform: scale(1); filter: brightness(1); }
    80% { opacity: 0; transform: scale(1); filter: brightness(1); }
    100% { opacity: 0; transform: scale(1); filter: brightness(1); }
}

/* Wort 5 */
@keyframes fadeInWord5 {
    0% { opacity: 0; transform: scale(1); filter: brightness(1); }
    30% { opacity: 0; transform: scale(1); filter: brightness(1); }
    35% { opacity: 1; transform: scale(1); filter: brightness(1); }
    70% { opacity: 1; transform: scale(1); filter: brightness(1); }
    73% { opacity: 1; transform: scale(1.15); filter: brightness(1.4); text-shadow: 0 0 8px rgba(255, 255, 255, 0.8); }
    76% { opacity: 1; transform: scale(1); filter: brightness(1); }
    80% { opacity: 0; transform: scale(1); filter: brightness(1); }
    100% { opacity: 0; transform: scale(1); filter: brightness(1); }
}

/* Dezentes Hover für Interaktivität */
.badge-limited:hover {
    border-left-width: 4px;
}

/* Badge im Hero-Context - mit weißem Text */
.hero-parallax .badge-limited {
    color: white;
    border-left-color: white;
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);
}

/* Alternative: Mit Box statt Border
   Falls Sie doch eine leichte Umrandung wünschen */
.badge-limited-boxed {
    display: inline-block;
    background-color: rgba(var(--szred-rgb, 255,51,51), 0.08);
    color: var(--szred, #ff3333);
    padding: 3px 10px;
    border-radius: 0;
    border-left: 3px solid var(--szred, #ff3333);
    font-size: 0.9em;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: none;
    white-space: nowrap;
    box-shadow: var(--box-shadow-schmal);
}

/* Mobile Anpassung */
@media (max-width: 768px) {
    .badge-limited {
        font-size: 0.85em;
        padding: 2px 6px 2px 3px;
    }
}