/* ==========================================================================
   PROFESSIONAL ICONS - SVG Icon Styles
   Ersetzt Emojis durch professionelle SVG-Icons
   ========================================================================== */

/* Icon Container Base */
.icon-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    flex-shrink: 0;
}

.icon-inline svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 1.75;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Icon Sizes */
.icon-sm { width: 1em; height: 1em; }
.icon-md { width: 1.5em; height: 1.5em; }
.icon-lg { width: 2em; height: 2em; }
.icon-xl { width: 2.5em; height: 2.5em; }
.icon-2xl { width: 3em; height: 3em; }
.icon-3xl { width: 4em; height: 4em; }

/* Icon Colors - consistent with brand */
.icon-cyan { color: var(--primary-cyan); }
.icon-purple { color: var(--primary-purple); }
.icon-blue { color: var(--primary-blue); }
.icon-white { color: var(--text-white); }
.icon-muted { color: var(--text-muted); }
.icon-success { color: var(--success); }
.icon-error { color: var(--error); }
.icon-warning { color: var(--warning); }

/* Process Step Icons - specific styling */
.process-step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    background: var(--gradient-card);
    border: 2px solid var(--cyan-30);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
}

.process-step-icon svg {
    width: 1.75rem;
    height: 1.75rem;
    stroke: var(--primary-cyan);
    stroke-width: 1.75;
    fill: none;
}

/* Trust Badge Icons */
.trust-badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
}

.trust-badge-icon svg {
    width: 100%;
    height: 100%;
    stroke: var(--primary-cyan);
    stroke-width: 1.5;
    fill: none;
}

/* Comparison Section Icons */
.comparison-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1rem;
}

.comparison-icon svg {
    width: 100%;
    height: 100%;
    stroke-width: 1.25;
    fill: none;
}

.comparison-icon.icon-negative svg { stroke: var(--error); }
.comparison-icon.icon-positive svg { stroke: var(--primary-cyan); }

/* Feature Card Icons */
.feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
}

.feature-icon svg {
    width: 100%;
    height: 100%;
    stroke: var(--primary-cyan);
    stroke-width: 1.5;
    fill: none;
}

/* Case Study Icons */
.case-study-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
}

.case-study-icon svg {
    width: 100%;
    height: 100%;
    stroke: var(--primary-cyan);
    stroke-width: 1.5;
    fill: none;
}

/* Value Stack Checkmark */
.value-stack-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--primary-cyan);
    font-weight: 700;
    flex-shrink: 0;
}

.value-stack-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 2.5;
    fill: none;
}

/* FAQ Icons */
.faq-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.5rem;
}

.faq-icon svg {
    width: 100%;
    height: 100%;
    stroke: var(--primary-cyan);
    stroke-width: 2;
    fill: none;
}

/* Floating Button Icon */
.floating-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
}

.floating-button-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

/* Service Feature Icons (referenzen.html) */
.service-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
}

.service-feature-icon svg {
    width: 100%;
    height: 100%;
    stroke: var(--primary-cyan);
    stroke-width: 1.5;
    fill: none;
}

/* Header Badge with Icon */
.badge-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.badge-with-icon .badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
}

.badge-with-icon .badge-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

/* Hover Effects */
.icon-hover-glow:hover svg {
    filter: drop-shadow(0 0 8px currentColor);
    transition: filter 0.3s ease;
}

.icon-hover-scale:hover svg {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}