/* ============================================================
   css/index.css — Homepage-specific overrides
   Überträgt das Design von schiesskladde.php auf index.php:
   Dunkles Theme + Gold-Akzente + halbdurchsichtige Karten
   Wird nur auf der Startseite geladen (conditional in header.php)
   ============================================================ */

/* ---- 2. Sections → alle dunkel ---- */
#leistungen {
    background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 100%);
}

.schiesskladde-section {
    background: linear-gradient(135deg, #0d0d0d 0%, #1a1a2e 100%);
}

#prozess {
    background: linear-gradient(135deg, #0f0f1a 0%, #16213e 100%);
}

#stack {
    background: #0d0d0d;
}

#contact {
    background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 100%);
}

/* ---- 3. Section-Titles: Icon + Flex-Layout (wie auf schiesskladde) ---- */
.section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
}

.section-title-centered {
    justify-content: center;
}

/* Unterstrich entfernen, stattdessen Icon verwenden */
.section-title::after {
    display: none;
}

.section-title i {
    color: #ffd700;
    font-size: 1em;
    flex-shrink: 0;
}

/* Untertitel-Texte in dunklen Sections aufhellen */
#leistungen .text-gray,
#leistungen .text-center.text-gray {
    color: rgba(255, 255, 255, 0.6);
}

/* ---- 4. Hero-Badge ---- */
.home-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    color: #ffd700;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 24px;
    animation: home-badge-glow 3s ease-in-out infinite;
}

@keyframes home-badge-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.1); }
    50%       { box-shadow: 0 0 30px rgba(255, 215, 0, 0.25); }
}

/* ---- 5. Pillar-Cards → dunkel-transparent ---- */
.pillar-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.pillar-card:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 215, 0, 0.35);
    box-shadow: 0 8px 40px rgba(255, 215, 0, 0.1);
}

.pillar-highlight {
    border-color: rgba(255, 215, 0, 0.35);
    box-shadow: 0 4px 24px rgba(255, 215, 0, 0.12);
}

.pillar-highlight:hover {
    box-shadow: 0 10px 50px rgba(255, 215, 0, 0.2);
}

.pillar-badge {
    background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
    color: #1a1a1a;
}

.pillar-card h3 {
    color: #fff;
}

.pillar-desc {
    color: rgba(255, 255, 255, 0.65);
}

.pillar-features li {
    color: rgba(255, 255, 255, 0.75);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.pillar-features .check {
    color: #ffd700;
}

/* ---- 6. Produktsektion (Kladdify-Showcase) ---- */
.schiesskladde-section .text-dark-gray,
.schiesskladde-section .line-height-18 {
    color: rgba(255, 255, 255, 0.65);
}

.schiesskladde-section small {
    color: rgba(255, 255, 255, 0.45);
}

.product-label {
    background: rgba(255, 215, 0, 0.12);
    border: 1px solid rgba(255, 215, 0, 0.35);
    color: #ffd700;
}

.product-highlight-item {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

.product-highlight-item:hover {
    border-color: rgba(255, 215, 0, 0.35);
    box-shadow: 0 8px 30px rgba(255, 215, 0, 0.08);
}

.highlight-label {
    color: rgba(255, 255, 255, 0.5);
}

.product-feature-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    box-shadow: none;
}

.product-feature-card:hover {
    border-color: rgba(255, 215, 0, 0.3);
    box-shadow: 0 8px 24px rgba(255, 215, 0, 0.08);
}

/* ---- 7. Prozess-Kacheln → dunkel ---- */
.process-tile {
    background: rgba(255, 255, 255, 0.04);
    border-left-color: #ffd700;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.process-tile:hover {
    background: rgba(255, 255, 255, 0.07);
    box-shadow: 0 8px 40px rgba(255, 215, 0, 0.1);
}

.process-tile h3 {
    color: #fff;
}

.process-tile:hover h3 {
    color: #ffd700;
}

.process-tile p {
    color: rgba(255, 255, 255, 0.65);
}

.step-number {
    background: rgba(255, 215, 0, 0.12);
    color: #ffd700;
    border: 2px solid rgba(255, 215, 0, 0.3);
}

.process-tile:hover .step-number {
    background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
    color: #1a1a1a;
}

.process-info {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 4px solid #ffd700;
    color: rgba(255, 255, 255, 0.75);
}

/* ---- 8. Stack-Section ---- */
#stack p {
    color: rgba(255, 255, 255, 0.65);
}

/* ---- 9. Warum Düsel IT (dark-section) → Gold-Akzente ---- */
/* Glass-Tile: Gradient-Border-Farbe auf Gold umstellen */
.glass-tile::before {
    background: linear-gradient(135deg, transparent 0%, rgba(255, 215, 0, 0.15) 50%, transparent 100%);
}

.glass-tile:hover {
    border-color: rgba(255, 215, 0, 0.3);
}

.glass-tile:hover h3 {
    color: #ffd700;
}

/* Icon-Box: Gold-Gradient statt Blau */
.icon-box {
    background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
}

.icon-box::before {
    background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
}

.icon-box i {
    color: #1a1a1a;
}

/* ---- 10. Responsive Anpassungen für dunkelthema ---- */
@media (max-width: 767px) {
    .process-tile {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .pillar-card {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}