/* wordpress-plugin/assets/css/stille-sterne-design-tokens.css */
/**
 * =============================================================================
 * stille-sterne-design-tokens.css
 *
 * v3.5.1 REFACTOR (2026-03-06):
 * - bereinigt fuer token-nativen Header-Renderer in frontend.js
 * - klare Prioritaet fuer .stille-sterne-detail-view.stille-sterne-has-design-tokens
 * - neue Header-Strukturen werden unterstuetzt:
 *   .stille-sterne-token-header-wrapper
 *   .stille-sterne-token-header-overlap
 *   .stille-sterne-token-header-classic
 *   .stille-sterne-token-info-bar
 *   .stille-sterne-token-meta-below-header
 * - Legacy-Header-Regeln bleiben nur minimal als Fallback bestehen
 * - Background-Angleichung Gutenberg vs Elementor bleibt erhalten
 * =============================================================================
 */

/* =============================================================================
 * GRUNDLAGE: Nur aktiv wenn Design-Tokens gesetzt sind
 * ============================================================================= */

.stille-sterne-has-design-tokens {
    background-color: var(--dt-color-bg, inherit);
    color: var(--dt-color-text, inherit);
    font-family: var(--dt-font-body, inherit);
    font-size: var(--dt-font-size-base, inherit);
    line-height: var(--dt-line-height-body, 1.7);
}

/* Theme-Hintergrund respektieren */
.stille-sterne-has-design-tokens.stille-sterne-respect-theme-bg {
    background-color: transparent !important;
}

.stille-sterne-has-design-tokens:not(.stille-sterne-respect-theme-bg) .stille-sterne-detail-content {
    background: transparent;
}

/* =============================================================================
 * STARKER DETAIL-SCOPE
 * ============================================================================= */

.stille-sterne-detail-view.stille-sterne-has-design-tokens {
    color: var(--dt-color-text, inherit);
    font-family: var(--dt-font-body, inherit);
}

.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-detail-article {
    background: var(--dt-color-bg, var(--ss-bg, #ffffff));
    color: var(--dt-color-text, var(--ss-text, #374151));
}

/* =============================================================================
 * TOKEN-NATIVER HEADER
 * ============================================================================= */

/* Neue Header-Wrapper */
.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-token-header-wrapper {
    color: var(--dt-color-text, var(--ss-text, #374151));
}

.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-token-header-overlap {
    height: var(--dt-header-height, var(--ss-detail-header-height, 400px));
    min-height: var(--dt-header-height, var(--ss-detail-header-height, 400px));
    position: relative;
    overflow: visible;
}

.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-token-header-classic {
    height: var(--dt-header-height, var(--ss-detail-header-height, 400px));
    min-height: var(--dt-header-height, var(--ss-detail-header-height, 400px));
    position: relative;
    overflow: hidden;
}

/* Legacy-Header nur als Fallback */
.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-detail-header {
    height: var(--dt-header-height, var(--ss-detail-header-height, 400px));
    position: relative;
    overflow: hidden;
}

.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-detail-header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-detail-header-gradient {
    background: linear-gradient(
        calc(var(--dt-header-gradient-angle, 135) * 1deg),
        var(--dt-header-gradient-start, #1F5E59),
        var(--dt-header-gradient-end, #2a7a74)
    );
}

.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-detail-header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--dt-header-overlay-color, transparent);
    opacity: var(--dt-header-overlay-opacity, 0);
    pointer-events: none;
}

/* Header Typografie */
.stille-sterne-detail-view.stille-sterne-has-design-tokens .header-name-text,
.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-detail-name,
.stille-sterne-detail-view.stille-sterne-has-design-tokens .info-bar-name-text {
    font-family: var(--dt-font-heading, var(--ss-font-heading, inherit));
    font-weight: var(--dt-font-weight-name, var(--ss-heading-weight, 700));
    letter-spacing: var(--dt-letter-spacing-name, var(--ss-letter-spacing-name, 0px));
    text-transform: var(--dt-text-transform-name, var(--ss-text-transform-name, none));
}

/* Info-Bar / Meta */
.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-token-info-bar,
.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-token-meta-below-header {
    color: var(--dt-color-text, var(--ss-text, #374151));
}

.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-detail-dates,
.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-detail-places,
.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-detail-maidenname,
.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-detail-nickname {
    color: var(--dt-color-text-muted, var(--ss-text-muted, #6b7280));
    font-family: var(--dt-font-body, var(--ss-font-body, inherit));
}

/* Profilbild neu */
.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-token-profile-image {
    border-color: var(--dt-profile-border-color, var(--ss-profile-border-color, #ffffff)) !important;
}

/* Legacy-Profilbild nur als Fallback */
.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-detail-profile-image {
    width: var(--dt-profile-size, var(--ss-profile-image-size, 180px));
    height: var(--dt-profile-size, var(--ss-profile-image-size, 180px));
    border-radius: var(--dt-profile-radius, var(--ss-radius-image, 12px));
    border: var(--dt-profile-border-width, var(--ss-profile-border-width, 4px)) solid var(--dt-profile-border-color, var(--ss-profile-border-color, #ffffff));
}

.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-detail-profile-image img {
    width: var(--dt-profile-size, 180px);
    height: var(--dt-profile-size, 180px);
    border-radius: var(--dt-profile-radius, 50%);
    object-fit: cover;
}

/* =============================================================================
 * NAME + DATEN
 * ============================================================================= */

.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-detail-name {
    font-family: var(--dt-font-heading, inherit);
    font-size: var(--dt-font-size-name, var(--ss-font-size-detail-name, 32px));
    font-weight: var(--dt-font-weight-name, 700);
    letter-spacing: var(--dt-letter-spacing-name, 0px);
    text-transform: var(--dt-text-transform-name, none);
    color: var(--dt-color-text, inherit);
    line-height: 1.15;
}

.stille-sterne-detail-view.stille-sterne-has-design-tokens .header-name-text {
    color: var(--dt-color-header-text, #ffffff);
}

.stille-sterne-detail-view.stille-sterne-has-design-tokens .info-bar-name-text {
    color: var(--dt-color-text, var(--ss-text, #374151));
}

/* =============================================================================
 * DETAIL MAIN / CONTAINER
 * ============================================================================= */

.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-detail-main {
    padding: var(--dt-content-padding, var(--ss-detail-padding, 30px));
}

.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-token-meta-below-header {
    margin-bottom: calc(var(--dt-section-spacing, 30px) * 0.25);
}

/* =============================================================================
 * SEKTIONEN
 * ============================================================================= */

.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-detail-section {
    margin-bottom: var(--dt-section-spacing, 30px);
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    border-bottom: none;
}

.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-detail-section h2,
.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-detail-section h3 {
    font-family: var(--dt-font-heading, inherit);
    font-size: var(--dt-font-size-section-title, 20px);
    font-weight: var(--dt-font-weight-heading, 600);
    color: var(--dt-color-text, inherit);
}

/* Optionaler Trenner zwischen Sektionen */
.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-detail-section + .stille-sterne-detail-section {
    border-top: 1px solid var(--dt-color-border, #e5e7eb);
    padding-top: var(--dt-section-spacing, 30px);
}

/* Wenn global via style.css Divider deaktiviert wurde, soll Token-Priorität nur im echten Token-Context wirken */
.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-detail-section.no-divider,
.stille-sterne-detail-view.stille-sterne-has-design-tokens[data-dt-divider="none"] .stille-sterne-detail-section + .stille-sterne-detail-section {
    border-top: none !important;
    padding-top: 0 !important;
}

/* =============================================================================
 * KARTEN / SURFACES
 * ============================================================================= */

.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-card,
.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-detail-bio-card,
.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-detail-info-card,
.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-condolence-item,
.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-candle-item,
.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-event-item,
.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-info-block,
.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-personal-item,
.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-detail-funeral,
.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-detail-cemetery,
.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-album-item,
.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-family-member {
    background: var(--dt-color-surface, #ffffff);
    border-radius: var(--dt-radius-card, 12px);
    border-color: var(--dt-color-border, #e5e7eb);
}

/* Card Hover-Effekt: Lift */
.stille-sterne-detail-view.stille-sterne-has-design-tokens[data-dt-card-hover="lift"] .stille-sterne-card:hover,
.stille-sterne-detail-view.stille-sterne-has-design-tokens[data-dt-card-hover="lift"] .stille-sterne-condolence-item:hover,
.stille-sterne-detail-view.stille-sterne-has-design-tokens[data-dt-card-hover="lift"] .stille-sterne-candle-item:hover,
.stille-sterne-detail-view.stille-sterne-has-design-tokens[data-dt-card-hover="lift"] .stille-sterne-event-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

/* Card Hover-Effekt: Glow */
.stille-sterne-detail-view.stille-sterne-has-design-tokens[data-dt-card-hover="glow"] .stille-sterne-card:hover,
.stille-sterne-detail-view.stille-sterne-has-design-tokens[data-dt-card-hover="glow"] .stille-sterne-condolence-item:hover,
.stille-sterne-detail-view.stille-sterne-has-design-tokens[data-dt-card-hover="glow"] .stille-sterne-candle-item:hover,
.stille-sterne-detail-view.stille-sterne-has-design-tokens[data-dt-card-hover="glow"] .stille-sterne-event-item:hover {
    box-shadow: 0 0 20px var(--dt-color-primary-20, rgba(31, 94, 89, 0.2));
}

/* Card Hover-Effekt: Scale */
.stille-sterne-detail-view.stille-sterne-has-design-tokens[data-dt-card-hover="scale"] .stille-sterne-card:hover,
.stille-sterne-detail-view.stille-sterne-has-design-tokens[data-dt-card-hover="scale"] .stille-sterne-condolence-item:hover,
.stille-sterne-detail-view.stille-sterne-has-design-tokens[data-dt-card-hover="scale"] .stille-sterne-candle-item:hover,
.stille-sterne-detail-view.stille-sterne-has-design-tokens[data-dt-card-hover="scale"] .stille-sterne-event-item:hover {
    transform: scale(1.02);
}

/* =============================================================================
 * BIOGRAFIE + TEXTE
 * ============================================================================= */

.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-detail-bio,
.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-detail-additional {
    font-family: var(--dt-font-body, inherit);
    color: var(--dt-color-text, inherit);
    line-height: var(--dt-line-height-body, 1.7);
}

.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-detail-additional {
    font-family: var(--dt-font-accent, var(--dt-font-body, inherit));
}

/* Links */
.stille-sterne-detail-view.stille-sterne-has-design-tokens a {
    color: var(--dt-color-link, var(--dt-color-primary, #1F5E59));
}

/* =============================================================================
 * GALERIE
 * ============================================================================= */

.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-gallery-grid {
    grid-template-columns: repeat(var(--dt-gallery-columns, 3), 1fr);
    gap: var(--dt-gallery-gap, 8px);
}

.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-gallery-item {
    border-radius: var(--dt-radius-gallery, 8px);
    overflow: hidden;
}

.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-gallery-item:hover img {
    transform: var(--dt-gallery-hover-transform, scale(1.05));
}

/* =============================================================================
 * GEDENKLICHTER / KONDOLENZEN / BUTTONS
 * ============================================================================= */

.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-light-toggle,
.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-light-submit,
.stille-sterne-detail-view.stille-sterne-has-design-tokens .event-rsvp-button,
.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-rsvp-submit {
    background: var(--dt-color-primary, #1F5E59);
    color: var(--dt-color-header-text, #ffffff);
    border-radius: var(--dt-radius-button, 8px);
}

.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-light-toggle:hover,
.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-light-submit:hover,
.stille-sterne-detail-view.stille-sterne-has-design-tokens .event-rsvp-button:hover,
.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-rsvp-submit:hover {
    opacity: 0.92;
}

.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-condolence-item {
    background: var(--dt-color-surface, #ffffff);
    border-radius: var(--dt-radius-card, 12px);
    border-color: var(--dt-color-border, #e5e7eb);
}

/* =============================================================================
 * GLASMORPHISM (optional)
 * ============================================================================= */

.stille-sterne-detail-view.stille-sterne-has-design-tokens[data-dt-glass="true"] .stille-sterne-card,
.stille-sterne-detail-view.stille-sterne-has-design-tokens[data-dt-glass="true"] .stille-sterne-detail-bio-card,
.stille-sterne-detail-view.stille-sterne-has-design-tokens[data-dt-glass="true"] .stille-sterne-condolence-item,
.stille-sterne-detail-view.stille-sterne-has-design-tokens[data-dt-glass="true"] .stille-sterne-candle-item,
.stille-sterne-detail-view.stille-sterne-has-design-tokens[data-dt-glass="true"] .stille-sterne-event-item {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(var(--dt-blur-intensity, 10px));
    -webkit-backdrop-filter: blur(var(--dt-blur-intensity, 10px));
}

/* =============================================================================
 * ANIMATIONEN (optional)
 * ============================================================================= */

.stille-sterne-detail-view.stille-sterne-has-design-tokens[data-dt-animated="true"] .stille-sterne-detail-section {
    opacity: 0;
    transform: translateY(20px);
    animation: stille-sterne-dt-fade-in 0.6s ease forwards;
}

.stille-sterne-detail-view.stille-sterne-has-design-tokens[data-dt-animated="true"] .stille-sterne-detail-section:nth-child(1) { animation-delay: 0.1s; }
.stille-sterne-detail-view.stille-sterne-has-design-tokens[data-dt-animated="true"] .stille-sterne-detail-section:nth-child(2) { animation-delay: 0.2s; }
.stille-sterne-detail-view.stille-sterne-has-design-tokens[data-dt-animated="true"] .stille-sterne-detail-section:nth-child(3) { animation-delay: 0.3s; }
.stille-sterne-detail-view.stille-sterne-has-design-tokens[data-dt-animated="true"] .stille-sterne-detail-section:nth-child(4) { animation-delay: 0.4s; }
.stille-sterne-detail-view.stille-sterne-has-design-tokens[data-dt-animated="true"] .stille-sterne-detail-section:nth-child(5) { animation-delay: 0.5s; }
.stille-sterne-detail-view.stille-sterne-has-design-tokens[data-dt-animated="true"] .stille-sterne-detail-section:nth-child(6) { animation-delay: 0.6s; }

@keyframes stille-sterne-dt-fade-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =============================================================================
 * FOOTER
 * ============================================================================= */

.stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-detail-footer {
    border-top: 1px solid var(--dt-color-border, #e5e7eb);
    color: var(--dt-color-text-muted, #6b7280);
}

/* =============================================================================
 * RESPONSIVE OVERRIDES
 * ============================================================================= */

@media (max-width: 768px) {
    .stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-token-header-overlap,
    .stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-token-header-classic,
    .stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-detail-header {
        height: var(--dt-header-height-mobile, 250px);
        min-height: var(--dt-header-height-mobile, 250px);
    }

    .stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-detail-name,
    .stille-sterne-detail-view.stille-sterne-has-design-tokens .header-name-text,
    .stille-sterne-detail-view.stille-sterne-has-design-tokens .info-bar-name-text {
        font-size: var(--dt-font-size-name-mobile, 24px);
    }

    .stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-gallery-grid {
        grid-template-columns: repeat(var(--dt-gallery-columns-mobile, 2), 1fr);
    }

    .stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-detail-main {
        padding: 20px;
    }

    .stille-sterne-detail-view.stille-sterne-has-design-tokens .stille-sterne-token-info-bar {
        padding-top: 10px;
    }
}