/**
 * HENX3D - Layout & Component Styles
 * Refactored: 2025-12-03
 * - Removed all !important declarations
 * - Replaced hardcoded colors with CSS variables
 */

/* ============================================
   PAGE-SPECIFIC FIXES
   ============================================ */

/* CRITICAL FIX: Sicherstellen dass Body ein Flexbox-Container ist */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* CRITICAL FIX: Main nimmt den gesamten verfügbaren Platz ein */
main {
    flex: 1 0 auto;
    position: relative;
    z-index: 1;
    width: 100%;
}

/* CRITICAL FIX: Footer bleibt immer am Ende */
.site-footer {
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    clear: both;
    width: 100%;
    margin-top: auto;
}

/* Stelle sicher dass About-Sections korrekt stacken und INNERHALB von main bleiben */
.story-section,
.values-section,
.network-section,
.why-choose-section,
.services-section,
.cta-section {
    position: relative;
    z-index: 2;
    width: 100%;
}

/* Verhindere dass Sections aus main ausbrechen */
main > section,
main > .section {
    position: relative;
    display: block;
    width: 100%;
}

/* ============================================
   HOMEPAGE-ABSTÄNDE REDUZIEREN
   ============================================ */
/* Problem: Sections haben oben UND unten große Abstände (padding: 4rem 0)
   Lösung: Oben minimal, unten fast gar nicht */

section {
    padding: 1.5rem 0 0.5rem 0;
}

/* Hero Section darf mehr Platz haben (erster Eindruck) */
.hero,
section.hero {
    padding: 2.5rem 0 1rem 0;
}

@media (min-width: 768px) {
    section {
        padding: 2rem 0 1rem 0;
    }

    .hero,
    section.hero {
        padding: 3rem 0 1.5rem 0;
    }
}

@media (min-width: 1024px) {
    section {
        padding: 2.5rem 0 1rem 0;
    }

    .hero,
    section.hero {
        padding: 4rem 0 2rem 0;
    }
}

/* ============================================
   EINHEITLICHE SECTION-HINTERGRÜNDE
   ============================================ */
/* Problem: Sections haben abwechselnde Hintergründe, die deutlich sichtbar sind
   Lösung: ALLE Sections haben den gleichen transparenten Hintergrund */

main > section,
main > .section,
section.section {
    background: transparent;
}

/* Auch nth-child Regeln überschreiben */
section:nth-child(even),
section:nth-child(odd),
.section:nth-child(even),
.section:nth-child(odd) {
    background: transparent;
}

/* Layout-modern Regeln überschreiben */
.layout-modern section:nth-child(even),
.layout-modern section:nth-child(odd) {
    background: transparent;
}

/* ============================================
   FOOTER KOMPAKTER MACHEN + ABSTAND
   ============================================ */
/* Problem: Footer hat zu viel Padding (var(--space-lg) = ~2rem)
   Lösung: Padding deutlich reduzieren + Abstand vor Footer */

.site-footer,
.site-footer-compact {
    padding: 1rem 0;
    margin-top: 4rem; /* Abstand vor Footer auf allen Seiten - erhöht für bessere Trennung */
}

/* Zusätzlicher Abstand durch letztes Section-Element */
main > section:last-child,
main > .section:last-child {
    margin-bottom: 2rem;
}

/* Footer-Bottom noch kompakter */
.site-footer-compact .footer-bottom {
    gap: 1rem;
}

/* Footer Company Info kompakter */
.footer-company-info {
    gap: 0.5rem;
}

.footer-tagline {
    font-size: 0.85rem;
    opacity: 0.85;
}

/* Social Links kleiner */
.footer-social-compact {
    gap: 0.75rem;
}

.footer-social-compact .social-link {
    padding: 0.5rem;
}

/* Copyright und Legal kleiner */
.footer-copyright,
.footer-legal {
    font-size: 0.85rem;
}

.footer-legal {
    margin-bottom: 0.25rem;
}

/* Mobile noch kompakter */
@media (max-width: 968px) {
    .site-footer,
    .site-footer-compact {
        padding: 0.75rem 0;
    }

    .site-footer-compact .footer-bottom {
        gap: 0.75rem;
    }
}

/* ============================================
   SERVICE-CARDS OPTIMIEREN (LEISTUNGEN-SEITE)
   ============================================ */
/* Problem: Service-Cards auf Leistungen-Seite nicht einheitlich
   Lösung: Grid-System + einheitliches Card-Design wie Machine-Cards */

/* Grid für Service-Cards */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr; /* WICHTIG: Alle Zeilen gleich hoch */
    gap: 1.5rem; /* Reduziert für kompakteres Layout */
    align-items: stretch;
}

@media (max-width: 1024px) {
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .grid-3 {
        grid-template-columns: 1fr;
    }
}

.service-card {
    display: flex;
    flex-direction: column;
    padding: 1.25rem; /* Reduziert für kompakteres Layout */
    height: 100%;
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
}

.service-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--color-surface, rgba(0, 229, 255, 0.1));
    border-color: var(--primary, #00e5ff);
}

.service-card-image {
    width: 100%;
    margin-bottom: 1rem;
    flex-shrink: 0;
}

.service-card-image img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    display: block;
}

.service-card-icon {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 2rem;
    margin-bottom: 1rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface, rgba(0, 229, 255, 0.1));
    border-radius: var(--radius-md);
}

.service-card-title {
    font-size: 1.25rem;
    margin-bottom: 0.65rem;
    min-height: auto;
    line-height: 1.3;
    color: var(--text-primary, #ffffff);
    flex-shrink: 0;
}

.service-card-description {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 0.85rem;
    color: var(--color-text-muted, #b4c0cc);
    flex-shrink: 0;
}

.service-card .feature-list {
    margin-bottom: 1rem;
    font-size: 0.9rem;
    list-style: none;
    padding-left: 0;
    flex-shrink: 0;
    flex-grow: 1;
}

.service-card .feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0;
    line-height: 1.5;
    color: var(--color-text-muted, #b4c0cc);
}

/* Runde blaue Checkmark-Kreise wie bei Material-Listen */
.service-card .feature-list li::before {
    content: "✓";
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: var(--bg);
    border-radius: 50%;
    font-weight: bold;
    font-size: 0.875rem;
}

/* Price Display */
.service-card .service-price,
.service-card-price {
    margin-top: auto;
    margin-bottom: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.service-card .price-label {
    font-size: 0.85rem;
    color: var(--color-text-subtle, #8b949e);
    margin-bottom: 0.25rem;
}

.service-card .price-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary, #00e5ff);
}

/* Button immer am Ende der Card */
.service-card .btn,
.service-card a.btn {
    margin-top: auto;
    font-size: 0.95rem;
    padding: 0.75rem 1.5rem;
    width: 100%;
    text-align: center;
    flex-shrink: 0;
}

.service-card .spec-item {
    margin-bottom: 1rem;
    padding: 0.75rem 0;
    flex-shrink: 0;
}

.service-card .spec-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary, #00e5ff);
}

/* ============================================
   STARTSEITE ABSÄTZE FIXEN
   ============================================ */
/* Problem: Zwischen Absatz 1 und 2 auf Startseite sind große Abstände
   Lösung: P-Tags und Beschreibungen kompakter machen */

.hero-content p,
.hero-subtitle {
    margin-bottom: 1.5rem;
}

/* Service-Cards auf Startseite (USP-Section) */
.service-card-description p,
.service-card p {
    margin-bottom: 0.5rem;
}

.service-card-description p:last-child,
.service-card p:last-child {
    margin-bottom: 0;
}

/* Section-Descriptions kompakter */
.section-description {
    margin-top: 0.75rem;
    margin-bottom: 2rem;
}

.section-description p {
    margin-bottom: 0.75rem;
}

.section-description p:last-child {
    margin-bottom: 0;
}

/* Card-Body Absätze */
.card p,
.card-body p {
    margin-bottom: 0.75rem;
}

.card p:last-child,
.card-body p:last-child {
    margin-bottom: 0;
}

/* ============================================
   ÜBER-UNS-SEITE: 3D-DRUCKER CARDS ANGLEICHEN
   ============================================ */
/* Problem: Machine-Cards haben unterschiedliche Höhen
   Lösung: Flexbox mit einheitlichen Höhen */

.machines-grid {
    display: grid;
    grid-template-columns: repeat(var(--columns, 2), 1fr);
    grid-auto-rows: 1fr; /* WICHTIG: Alle Zeilen gleich hoch */
    gap: 2rem;
    align-items: stretch; /* Cards dehnen sich auf volle Höhe */
}

.machine-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

.machine-name {
    margin-bottom: 1rem;
    min-height: 2.5rem;
    flex-shrink: 0;
}

.machine-description {
    margin-bottom: 1.5rem;
    flex-shrink: 0;
}

.machine-specs,
.machine-perfect-for {
    margin-top: auto; /* Push to bottom */
    flex-shrink: 0;
}

.machine-specs h4,
.machine-perfect-for h4 {
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    color: var(--primary, #00e5ff);
}

.machine-specs ul,
.machine-perfect-for ul {
    list-style: none;
    padding-left: 0;
}

.machine-specs ul li,
.machine-perfect-for ul li {
    padding: 0.4rem 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .machines-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   ÜBER-UNS TEXT LESBARKEIT VERBESSERN
   ============================================ */
/* Problem: Text auf Über-uns-Seite ist zu dunkel und schwer lesbar
   Lösung: Textfarbe heller machen für besseren Kontrast */

/* Story-Section Text heller */
.story-section p,
.story-section .story-paragraph {
    color: var(--color-text-muted, #b4c0cc);
    line-height: 1.8;
}

/* Network-Section Text heller */
.network-section p,
.network-section .network-description {
    color: var(--color-text-muted, #b4c0cc);
}

/* Values-Section Text heller */
.values-section p,
.values-section .value-description {
    color: var(--color-text-muted, #b4c0cc);
}

/* Alle Paragraphen auf About-Seite heller */
.about-page p,
main p {
    color: var(--color-text-muted, #b4c0cc);
}

/* Section-Descriptions auf About-Seite */
.section-description {
    color: var(--color-text-muted, #b4c0cc);
}

/* Machine-Cards Text heller */
.machine-card p,
.machine-card li {
    color: var(--color-text-muted, #b4c0cc);
}

/* ============================================
   ÜBER-UNS ÜBERSCHRIFTEN BLAU FÄRBEN
   ============================================ */
/* Zweifarbige Überschriften: Subtitle blau (accent2), Title Gradient (gradient-primary)
   Konsistent über alle Seiten hinweg */

/* Section-Title: Gradient-Hintergrund für Hauptüberschrift */
.story-section .section-header .section-title,
.values-section .section-header .section-title,
.network-section .section-header .section-title,
.technology-section .section-header .section-title,
.why-choose-section .section-header .section-title,
.machines-section .section-header .section-title,
.cta-section .section-header .section-title {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Section-Subtitle: Helles Blau/Cyan für kleine Überschrift oben */
.story-section .section-header .section-subtitle,
.values-section .section-header .section-subtitle,
.network-section .section-header .section-subtitle,
.technology-section .section-header .section-subtitle,
.why-choose-section .section-header .section-subtitle,
.machines-section .section-header .section-subtitle,
.cta-section .section-header .section-subtitle {
    color: var(--accent2);
}

/* Ueberschriften: Farben kommen aus sections-bundle.css und components.css */

/* Section-spezifische Überschriften */
.story-section h2,
.values-section h2,
.network-section h2,
.why-choose-section h2,
.machines-section h2,
.technology-section h2,
.cta-section h2,
.story-section h3,
.values-section h3,
.network-section h3,
.why-choose-section h3,
.machines-section h3,
.technology-section h3 {
    color: var(--accent, #4F86FF);
}

/* Section Title: Gradient wird in sections-bundle.css definiert */

/* Value-Cards Überschriften */
.value-card h3,
.value-card h4 {
    color: var(--accent, #4F86FF);
}

/* Machine-Cards Überschriften */
.machine-card h3,
.machine-card h4,
.machine-name {
    color: var(--accent, #4F86FF);
}

/* Network-Cards Überschriften */
.network-card h3,
.network-card h4 {
    color: var(--accent, #4F86FF);
}
/**
 * Form Select Fix - Dark Theme Support
 * Ensures all select elements get proper dark theme styling
 *
 * Problem: select.form-control elements don't inherit .form-select styles
 * Solution: Apply same dark theme styles to all select elements
 *
 * @package HENX3D
 * @version 1.0
 * @date 2025-10-26
 */

/* Apply dark theme styles to all select elements */
select.form-control,
select:not(.form-select):not([class*="custom-"]) {
    background-color: var(--color-bg-elevated, #1a2129);
    color: var(--text, #E6EDF3);
    cursor: pointer;
    /* Browser-Standard überschreiben */
    color-scheme: dark;
    /* Dropdown-Pfeil */
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="14" height="8" viewBox="0 0 14 8"%3E%3Cpath fill="%2367e8f9" d="M1 1l6 6 6-6" stroke="none"/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 14px 8px;
    background-attachment: scroll;
    background-origin: padding-box;
    background-clip: padding-box;
    padding-right: 2.5rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* Verhindere Muster/Streifen */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Option-Elemente für alle Selects */
select.form-control option,
select:not(.form-select):not([class*="custom-"]) option {
    background-color: var(--color-bg-elevated, #1a2129);
    background-image: none;
    color: var(--text, #E6EDF3);
    padding: 0.5rem;
}

/* Firefox-spezifisch */
@-moz-document url-prefix() {
    select.form-control,
    select:not(.form-select):not([class*="custom-"]) {
        background-color: var(--color-bg-elevated, #1a2129);
        background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="14" height="8" viewBox="0 0 14 8"%3E%3Cpath fill="%2367e8f9" d="M1 1l6 6 6-6" stroke="none"/%3E%3C/svg%3E');
        background-repeat: no-repeat;
        background-position: right 1rem center;
        background-size: 14px 8px;
        background-attachment: scroll;
    }

    select.form-control option,
    select:not(.form-select):not([class*="custom-"]) option {
        background-color: var(--color-bg-elevated, #1a2129);
        background-image: none;
        color: var(--text, #E6EDF3);
    }

    select.form-control option:checked,
    select:not(.form-select):not([class*="custom-"]) option:checked {
        background-color: var(--color-primary);
        background-image: none;
        color: var(--color-bg);
    }
}

/* Chrome/Edge/Safari */
@supports (-webkit-appearance: none) {
    select.form-control option,
    select:not(.form-select):not([class*="custom-"]) option {
        background-color: var(--color-bg-elevated, #1a2129);
        background-image: none;
        background: var(--color-bg-elevated, #1a2129);
        color: var(--text, #E6EDF3);
    }

    select.form-control option:checked,
    select:not(.form-select):not([class*="custom-"]) option:checked {
        background-color: var(--color-primary);
        background-image: none;
        background: var(--color-primary);
        color: var(--color-bg);
    }
}

/* Scrollbar für Select-Dropdowns */
select.form-control::-webkit-scrollbar,
select:not(.form-select):not([class*="custom-"])::-webkit-scrollbar {
    width: 8px;
    background-color: var(--color-bg-secondary, #0f172a);
}

select.form-control::-webkit-scrollbar-thumb,
select:not(.form-select):not([class*="custom-"])::-webkit-scrollbar-thumb {
    background-color: var(--color-primary);
    border-radius: 4px;
}

/* Focus-State */
select.form-control:focus,
select:not(.form-select):not([class*="custom-"]):focus {
    outline: none;
    border-color: var(--glow, #67e8f9);
    box-shadow: 0 0 0 3px rgba(103, 232, 249, 0.1);
}

/* Disabled State */
select.form-control:disabled,
select:not(.form-select):not([class*="custom-"]):disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: rgba(255,255,255,.01);
}

/* Required Field Indicator */
select.form-control:required:invalid,
select:not(.form-select):not([class*="custom-"]):required:invalid {
    border-color: var(--color-warning, #f59e0b);
}

/* Multiple Select Support */
select.form-control[multiple],
select:not(.form-select):not([class*="custom-"])[multiple] {
    background-image: none;
    padding-right: 1rem;
    min-height: 150px;
}

/* ============================================
   HEADING FIX - Verhindert abgeschnittene Buchstaben (g, y, p, q)
   ============================================ */
/* Problem: Unterlängen werden bei zu kleinem line-height abgeschnitten
   Lösung: line-height erhöhen + padding-bottom für Sicherheit */

h1, h2, h3, h4, h5, h6,
.section-title,
.hero-title,
.page-title,
.faq-category-title,
.faq-question {
    padding-bottom: 0.15em;
    line-height: 1.5;
}

/* Hero-Title kann etwas kompakter sein */
.hero-title {
    line-height: 1.4;
}

/* Gradient-Text braucht extra Padding wegen Webkit-Clipping */
.section-title,
h1,
h2,
h3 {
    padding-bottom: 0.2em;
}