/* 
 * Widgets Content CSS
 * Alle Content-Text-Definitionen (Text, Info-Text, Subtitle, Intro-Text, Footer)
 * Farben müssen via Custom Properties aus der colors.css genutzt werden
 */

/* Content Text - Mobile-First */
.base-content-text {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-md) 0;
}

.base-content-text-small {
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-sm) 0;
}

.base-info-text {
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-md) 0;
    font-style: italic;
}

.base-subtitle {
    font-family: var(--font-family-base);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-md) 0;
    font-weight: var(--font-weight-semibold);
}

.base-intro-text {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-lg) 0;
}

.base-content-footer {
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    color: var(--color-text-secondary);
    margin: var(--spacing-lg) 0 0 0;
}

/* Specialization Tags – Liste als farbige Tags (kein JSON) */
.base-specialization-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin: 0 0 var(--spacing-md) 0;
}

.base-specialization-tag {
    display: inline-block;
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1.25;
    color: var(--color-text-inverse);
    background-color: var(--color-primary);
    padding: 4px 10px;
    border-radius: 999px;
    border: none;
}

/* Responsive - Mobile-First */
/* Tablet/iPad: 600px-768px */
@media (width >= 600px) {
    .base-content-text {
        font-size: var(--font-size-base);
    }

    .base-subtitle {
        font-size: var(--font-size-xl);
    }

    .base-intro-text {
        font-size: var(--font-size-lg);
    }
}

/* Kleiner Desktop/13-Zoll: 1024px-1366px */
@media (width >= 1024px) and (width <= 1366px) {
    .base-content-text {
        font-size: var(--font-size-lg);
    }

    .base-subtitle {
        font-size: var(--font-size-2xl);
    }
}

/* Großer Desktop/Widescreen: 1440px+ */
@media (width >= 1440px) {
    .base-content-text {
        font-size: var(--font-size-lg);
    }

    .base-subtitle {
        font-size: var(--font-size-2xl);
    }
}