/* ===========================================
   Local Styles - DSGVO-konform
   =========================================== */

/* ===========================================
   Roboto Font - Lokal gehostet
   =========================================== */

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* CSS Spinner Animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Small Text besser lesbar */
small {
    font-size: 13px !important;
    color: rgba(255,255,255,0.75) !important;
}

/* Footer Bottom Styling */
.footer-bottom {
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    margin-top: 0 !important;
    padding: 20px 0 !important;
}

.footer-bottom p {
    margin-bottom: 5px;
    color: #6c757d;
    font-size: 14px;
}

.footer-bottom a {
    color: #009fe3;
}

.footer-bottom a:hover {
    text-decoration: underline;
}

/* Kompetenzen Icons */
.features .feature-img i {
    display: block;
    text-align: center;
}

/* Technologie Section Icons fix */
.page-block.color i.fa {
    color: #fff;
    opacity: 1;
}

/* Partner Section Small Text */
.page-block.color small {
    color: rgba(255,255,255,0.85) !important;
}

/* Kontakt Section - Firmen-Nr besser lesbar */
.contacts small {
    color: rgba(255,255,255,0.7) !important;
    display: block;
    margin-top: 5px;
}

/* Produkte Listen - ohne Einrückung */
#produkte ul {
    padding-left: 0;
    margin-left: 0;
    list-style: none;
}

#produkte ul li {
    padding-left: 0;
    margin-bottom: 8px;
}

#produkte ul li:before {
    display: none;
}

/* Page Header Abstände - kompakter */
.page-header {
    margin-bottom: 30px !important;
}

.page-header .lead {
    margin-bottom: 10px;
}

/* Footer Über uns Padding */
.footer .contacts {
    padding-right: 30px;
}

/* Kontakt Footer - Abstände anpassen */
.contacts .page-header {
    margin-bottom: 15px !important;
}

.contacts h3 {
    margin-bottom: 8px !important;
}

.contacts .col-lg-6 {
    padding-right: 60px;
}

/* Footer Text immer linksbündig */
.footer h2, .footer h3, .footer h4, .footer h5, .footer p {
    text-align: left !important;
}

/* Unterseiten Styling (Kontakt, Impressum, Datenschutz) */
.inner-page {
    background-color: #f8f9fa;
    padding: 60px 0;
    min-height: calc(100vh - 200px);
}

.inner-page .card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.08);
    padding: 40px 50px;
    margin-bottom: 30px;
}

.inner-page h1 {
    color: #009fe3;
    font-weight: 300;
    margin-bottom: 10px;
}

.inner-page .lead {
    color: #666;
    font-size: 1.1em;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.inner-page h3 {
    color: #313447;
    font-weight: 500;
    font-size: 1.2em;
    margin-top: 25px;
    margin-bottom: 15px;
}

.inner-page p {
    color: #555;
    line-height: 1.8;
}

.inner-page .form-control {
    border: 1px solid #ddd;
    padding: 12px 15px;
    height: auto;
    font-size: 15px;
}

.inner-page .form-control:focus {
    border-color: #009fe3;
    box-shadow: 0 0 0 2px rgba(0,159,227,0.2);
}

.inner-page .btn-primary {
    background-color: #009fe3;
    border: none;
    padding: 15px 40px;
    font-size: 16px;
}

.inner-page .btn-primary:hover {
    background-color: #0087c4;
}

.inner-page a {
    color: #009fe3;
}

.inner-page a:hover {
    color: #0087c4;
    text-decoration: underline;
}

/* Kontakt Info Box */
.contact-info-box {
    background: linear-gradient(135deg, #009fe3 0%, #0087c4 100%);
    color: #fff;
    padding: 30px;
    border-radius: 8px;
    height: 100%;
}

.contact-info-box h4 {
    color: #fff;
    font-weight: 500;
    margin-bottom: 20px;
}

.contact-info-box p {
    color: rgba(255,255,255,0.9);
    margin-bottom: 15px;
}

.contact-info-box a {
    color: #fff;
}

.contact-info-box a:hover {
    color: #fff !important;
    text-decoration: underline;
}

/* Checkbox vertikale Ausrichtung */
input[type="checkbox"] {
    vertical-align: text-bottom;
    position: relative;
    top: -1px;
}

label input[type="checkbox"] {
    margin-right: 8px;
}

/* Inner-Page Listen mit echten Bullet Points */
.inner-page ul {
    list-style: disc;
    padding-left: 25px;
    margin-bottom: 20px;
}

.inner-page ul li {
    padding: 5px 0;
    color: #555;
}

.inner-page ul li:before {
    display: none !important;
}

/* Font-Style Fix: Keine kursive Schrift */
body, p, h1, h2, h3, h4, h5, h6, li, span, a, label, input, textarea, select, button {
    font-style: normal !important;
}

/* Mobile Overflow Fix - verhindert horizontalen Scroll */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

.container, .row {
    max-width: 100% !important;
}

@media screen and (max-width: 991px) {
    .page-block {
        overflow-x: hidden !important;
    }
    
    /* Row-Margin nur für page-blocks, nicht für Formulare */
    .page-block > .container > .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Titel auf mobilen Geräten umbrechen */
    .inner-page h1 {
        font-size: 1.8em !important;
        word-wrap: break-word;
        hyphens: auto;
    }
    
    .inner-page .card {
        padding: 25px 20px !important;
    }
    
    /* Page-Header Titel umbrechen */
    .page-header h2 {
        font-size: 1.6em !important;
        word-wrap: break-word;
        hyphens: auto;
        padding: 0 15px;
    }
    
    /* Technologie Icons horizontal zentriert */
    #technologie .col-lg-6 > div {
        align-items: center !important;
    }
    
    #technologie .fa-3x {
        margin-bottom: 0 !important;
    }
    
    /* Kontakt Section - alles zentriert auf Mobile */
    #kontakt .col-lg-6,
    #kontakt .col-lg-3,
    #kontakt .col-md-6,
    #kontakt .col-md-3 {
        text-align: center !important;
    }
    
    #kontakt h3 {
        text-align: center !important;
        justify-content: center;
    }
    
    #kontakt p {
        text-align: center !important;
    }
    
    #kontakt .btn {
        display: inline-block;
    }
    
    /* Überschreibt linksbündig nur auf Mobile */
    .contacts h2, 
    .contacts h3, 
    .contacts h4, 
    .contacts p {
        text-align: center !important;
    }
    
    /* Kontakt Section - gleiche Abstände links/rechts */
    .contacts .col-lg-6,
    .contacts .col-lg-3,
    .contacts .col-md-6,
    .contacts .col-md-3 {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Zertifizierungen Section - Logo Abstand */
    #zertifizierungen .col-lg-2,
    #zertifizierungen .col-md-3 {
        text-align: center;
        margin-bottom: 25px;
    }
    
    #zertifizierungen .col-lg-2 img,
    #zertifizierungen .col-md-3 img {
        margin-bottom: 20px !important;
    }
    
    #zertifizierungen h3 {
        text-align: center;
        margin-top: 15px;
    }
    
    #zertifizierungen p {
        text-align: center;
    }
    
    /* Hero Slider auf Mobile - Text zentriert */
    .hero-slider .slide-content {
        text-align: center !important;
        padding: 20px 15px !important;
    }
    
    .hero-slider .slide-content h1,
    .hero-slider .slide-content h2 {
        font-size: 1.5em !important;
        text-align: center !important;
        margin-top: 20px !important;
    }
    
    .hero-slider .slide-content p {
        text-align: center !important;
        font-size: 0.9em;
        margin-bottom: 15px;
    }
    
    .hero-slider .slide-image {
        text-align: center !important;
        padding: 15px !important;
    }
    
    .hero-slider .slide-image img {
        max-width: 90% !important;
        max-height: 200px !important;
        margin: 0 auto !important;
    }
    
    /* Hero container zentriert */
    .hero .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* ==========================================
       ALLE SECTIONS - Mobile Grid Optimierung
       ========================================== */
    
    /* Kompetenzen (3 Spalten) - Zentriert auf Mobile */
    #kompetenzen .features .col-lg-4 {
        text-align: center;
        margin-bottom: 30px;
        padding: 0 20px;
    }
    
    /* Technologie (Icon+Text Layout) - Flex-Direction column */
    #technologie .col-lg-6 > div {
        flex-direction: column !important;
        text-align: center;
    }
    
    #technologie .col-lg-6 > div > i {
        margin-right: 0 !important;
        margin-bottom: 15px !important;
    }
    
    #technologie .col-lg-6 > div h3,
    #technologie .col-lg-6 > div p {
        text-align: center !important;
    }
    
    /* Produkte (Text + Bild) - Zentriert */
    #produkte .col-lg-7,
    #produkte .col-lg-5 {
        text-align: center !important;
        padding: 0 15px;
    }
    
    #produkte h3 {
        text-align: center !important;
    }
    
    #produkte p {
        text-align: center !important;
    }
    
    #produkte ul {
        text-align: left;
        display: inline-block;
    }
    
    #produkte .col-lg-5 {
        margin-top: 20px;
    }
    
    #produkte img {
        max-width: 100%;
        margin: 0 auto;
    }
    
    /* Partner (Logo + Text) - Logo zentriert */
    #partner .col-lg-3,
    #partner .col-md-4 {
        margin-bottom: 30px;
    }
    
    #partner .col-lg-9 h3,
    #partner .col-lg-9 p {
        text-align: center !important;
    }
    
    #partner .col-lg-9 .row .col-lg-6 {
        text-align: center !important;
    }
    
    #partner .col-lg-9 .row .col-lg-6 p {
        text-align: center !important;
    }
    
    #partner .btn {
        display: block;
        margin: 0 auto;
        width: fit-content;
    }
    
    /* Inner-Page (Kontakt, Impressum, Datenschutz) - Mobile Zentrierung */
    .inner-page .container > .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .inner-page .col-lg-8,
    .inner-page .col-lg-4,
    .inner-page .col-md-7,
    .inner-page .col-md-5 {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    .inner-page .card {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Kontakt-Info Box auf Mobile zentriert */
    .inner-page .contact-info-box {
        text-align: center;
        margin-top: 30px;
    }
    
    .inner-page .contact-info-box p {
        text-align: center !important;
    }
}

/* Navigation Responsive Fix */
@media screen and (min-width: 992px) and (max-width: 1200px) {
    .main-navi ul li a {
        padding: 34px 3px;
        font-size: 13px;
    }
}

@media screen and (min-width: 1201px) and (max-width: 1400px) {
    .main-navi ul li a {
        padding: 34px 8px;
        font-size: 14px;
    }
}

@media screen and (min-width: 1401px) {
    .main-navi ul li a {
        padding: 34px 12px;
    }
}