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

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

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

/* CRITICAL FIX: Footer bleibt immer am Ende */
.site-footer {
    flex-shrink: 0 !important;
    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 !important;
    z-index: 2;
    width: 100%;
}

/* Verhindere dass Sections aus main ausbrechen */
main > section,
main > .section {
    position: relative !important;
    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 !important;
}

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

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

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

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

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

/* ============================================
   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 !important;
}

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

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

/* ============================================
   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 !important;
    margin-top: 4rem !important; /* 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 !important;
}

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

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

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

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

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

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

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

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

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

/* ============================================
   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 !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-auto-rows: 1fr !important; /* WICHTIG: Alle Zeilen gleich hoch */
    gap: 1.5rem !important; /* Reduziert für kompakteres Layout */
    align-items: stretch !important;
}

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

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

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

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

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

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

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

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

.service-card-description {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    margin-bottom: 0.85rem !important;
    color: rgba(230, 237, 243, 0.85) !important;
    flex-shrink: 0 !important;
}

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

.service-card .feature-list li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    margin-bottom: 0.75rem !important;
    padding: 0 !important;
    line-height: 1.5 !important;
    color: rgba(230, 237, 243, 0.85) !important;
}

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

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

.service-card .price-label {
    font-size: 0.85rem !important;
    color: rgba(230, 237, 243, 0.7) !important;
    margin-bottom: 0.25rem !important;
}

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

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

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

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

/* ============================================
   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 !important;
}

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

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

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

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

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

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

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

/* ============================================
   Ü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 !important;
    flex-direction: column !important;
    min-height: 100% !important;
    height: 100% !important;
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-lg) !important;
    padding: 1.5rem !important;
}

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

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

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

.machine-specs h4,
.machine-perfect-for h4 {
    font-size: 0.9rem !important;
    margin-bottom: 0.75rem !important;
    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: rgba(230, 237, 243, 0.9) !important;
    line-height: 1.8 !important;
}

/* Network-Section Text heller */
.network-section p,
.network-section .network-description {
    color: rgba(230, 237, 243, 0.9) !important;
}

/* Values-Section Text heller */
.values-section p,
.values-section .value-description {
    color: rgba(230, 237, 243, 0.9) !important;
}

/* Alle Paragraphen auf About-Seite heller */
.about-page p,
main p {
    color: rgba(230, 237, 243, 0.85) !important;
}

/* Section-Descriptions auf About-Seite */
.section-description {
    color: rgba(230, 237, 243, 0.85) !important;
}

/* Machine-Cards Text heller */
.machine-card p,
.machine-card li {
    color: rgba(230, 237, 243, 0.9) !important;
}

/* ============================================
   Ü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) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* 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) !important;
}

/* Alle Überschriften auf About-Seite */
main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
    color: var(--color-accent) !important;
}

/* 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(--color-accent) !important;
}

/* Section Title Klasse überall */
.section-title {
    color: var(--color-accent) !important;
}

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

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

/* Network-Cards Überschriften */
.network-card h3,
.network-card h4 {
    color: var(--color-accent) !important;
}