/* Typography */
.hw-accent-text {color: var(--accent);}

.catering-detail {
    color: var(--neutral-semi-light);
    font-size: var(--text-s);
}

.shadow--hover-card:hover {
  box-shadow: 
    /* Ambient shadow - weich und diffus */
    0 2px 12px -1px rgba(0, 0, 0, 0.04),
    /* Directional shadow - schärfer für Definition */
    0 4px 24px -6px rgba(0, 0, 0, 0.06),
    /* Highlight shadow - subtiler oberer Glanz */
    0 -1px 0px 0px rgba(255, 255, 255, 0.02) inset;
}

/* Ausstattung Chips - Komplettes CSS MERGED */
.ausstattung-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-s);
    padding: 0;
    margin: 0;
    list-style: none;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-s);
    background-color: var(--secondary);
    color: var(--shade-700);
    font-size: var(--text-s);
    font-weight: 500;
    border-radius: var(--radius-circle);
    border: 2px solid var(--neutral-trans-10);
    transition: background-color 0.2s ease;
}

.chip:hover {
    /*background-color: var(--secondary-light); /* Tippfehler korrigiert */
    box-shadow: 
        /* Ambient shadow - weich und diffus */
        0 2px 12px -1px rgba(0, 0, 0, 0.04),
        /* Directional shadow - schärfer für Definition */
        0 4px 24px -6px rgba(0, 0, 0, 0.06),
        /* Highlight shadow - subtiler oberer Glanz */
        0 -1px 0px 0px rgba(255, 255, 255, 0.02) inset;
}

.chip i {
    font-size: var(--text-m);
    color: var(--accent) !important;
}

/* Toggle Button als Text-Link */
.ausstattung-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--primary);
    font-size: var(--text-s);
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    margin-top: var(--space-xs);
    transition: color 0.2s ease;
}

.ausstattung-toggle:hover {
    color: var(--primary-hover);
}

/* Mobile - S Breakpoint */
@media (max-width: 480px) {
    .ausstattung-chips {
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
    }
    
    .chip {
        padding: calc(var(--space-xs) * 0.75) var(--space-s);
        justify-content: flex-start;
        width: 100%;
        font-size: var(--text-m);
    }
    
    .chip i {
        min-width: 1.5em;
        text-align: center;
        font-size: var(--text-l); /* Reduziert von XL zu L */
    }
    
    /* Verstecke Items 6+ EINFACH */
    .chip:nth-child(n+6) {
        display: none;
    }
    
    /* Wenn erweitert */
    .ausstattung-chips.expanded .chip:nth-child(n+6) {
        display: flex;
    }
    
    /* Toggle Button auf Mobile */
    .ausstattung-toggle {
        display: inline-block;
        /*margin-top: calc(var(--space-xs) * 0.5); /* Kleiner Abstand */
        margin-top: var(--space-xs);
    }
}

/* Übersichtsseite Styles */
.ausstattung-overview {
    margin-block: var(--space-l);
}

.ausstattung-group {
    background: var(--shade-50);
    padding: var(--space-l);
    border-radius: var(--radius-l);
}

.chip--small {
    font-size: var(--text-xs);
    padding: calc(var(--space-xs) * 0.5) var(--space-s);
}

/* Flat style - alle in einer Gruppe */
.ausstattung-chips--all {
    max-width: var(--content-width);
    margin-inline: auto;
}
/* Skip Links Display Fix */
.skip-link {z-index: 999;}


/* ================================================
   Animation mit Fade - Trick für Bricks Opacity
   ================================================ */

/* Basis-Animation MIT initialem Verstecken */
.animated-bg-illustration {
    /* Initial komplett versteckt */
    opacity: 0;
    transform: translateY(40px) scale(0.92);
    
    /* Elegante Transitions */
    transition: 
        opacity 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    
    /* Performance */
    will-change: opacity, transform;
}

/* Aktiv wenn im Viewport - Bricks Opacity wird respektiert */
.animated-bg-illustration.in-view {
    opacity: var(--bricks-opacity, 1) !important; /* Fallback auf 1 wenn keine Variable */
    transform: translateY(0) scale(1);
}

/* ================================================
   Alternative: Mit CSS Custom Property
   Nutze diese Methode für mehr Kontrolle
   ================================================ */

.animated-bg-illustration-v2 {
    /* Speichere Bricks Opacity in Variable */
    --target-opacity: 0.18; /* Setze das in Bricks als inline style */
    
    /* Initial versteckt */
    opacity: 0;
    transform: translateY(40px) scale(0.92);
    
    transition: 
        opacity 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animated-bg-illustration-v2.in-view {
    opacity: var(--target-opacity);
    transform: translateY(0) scale(1);
}

/* Von Links einblenden */
.animated-bg-illustration.from-left {
    transform: translateX(-60px);
    opacity: 0;
}

.animated-bg-illustration.from-left.in-view {
    transform: translateX(0);
    opacity: var(--bricks-opacity, 1);
}

/* Von Rechts einblenden */
.animated-bg-illustration.from-right {
    transform: translateX(60px);
    opacity: 0;
}

.animated-bg-illustration.from-right.in-view {
    transform: translateX(0);
    opacity: var(--bricks-opacity, 1);
}

/* Fade + Rotation */
.animated-bg-illustration.variant-rotate {
    transform: translateY(40px) scale(0.92) rotate(-3deg);
    opacity: 0;
}

.animated-bg-illustration.variant-rotate.in-view {
    transform: translateY(0) scale(1) rotate(0deg);
    opacity: var(--bricks-opacity, 1);
}

/* Zoom-In */
.animated-bg-illustration.zoom-in {
    transform: scale(0.85);
    opacity: 0;
}

.animated-bg-illustration.zoom-in.in-view {
    transform: scale(1);
    opacity: var(--bricks-opacity, 1);
}

/* ================================================
   Verzögerungen
   ================================================ */

.animated-bg-illustration[data-delay="200"],
.animated-bg-illustration-v2[data-delay="200"] {
    transition-delay: 0.2s;
}

.animated-bg-illustration[data-delay="400"],
.animated-bg-illustration-v2[data-delay="400"] {
    transition-delay: 0.4s;
}

.animated-bg-illustration[data-delay="600"],
.animated-bg-illustration-v2[data-delay="600"] {
    transition-delay: 0.6s;
}

/* ================================================
   Responsive
   ================================================ */

@media (max-width: 767px) {
    .animated-bg-illustration,
    .animated-bg-illustration-v2 {
        transform: translateY(20px) scale(0.97);
        transition-duration: 1s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .animated-bg-illustration,
    .animated-bg-illustration-v2 {
        transition: opacity 0.5s ease-out !important;
        transform: none !important;
    }
}