/*
Theme Name: Issak Maler
Author: Aprimus
Description: Modernes Onepager-Theme für den Malerfachbetrieb
Version: 1.0
Text Domain: issak-maler
*/

/* --- Material Design Anpassungen --- */
        :root {
            --md-primary: #E32028; 
            --md-primary-variant: #C11B22; 
            --md-accent: #2FB897; 
            --md-background: #F5F5F5;
            --md-surface: #FFFFFF;
            --md-on-surface: #1A1A1A;
            --md-on-background: #333333;
        }

        body {
            font-family: 'Roboto', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--md-background);
            color: var(--md-on-background);
            scroll-behavior: smooth;
        }

        /* --- Navigation --- */
        .navbar {
            background-color: var(--md-surface);
            border-bottom: 2px solid var(--md-accent);
        }
        
        .navbar-brand img {
            max-height: 60px;
        }
        
        .nav-link {
            font-weight: 500;
            color: var(--md-on-surface) !important;
            text-transform: uppercase;
            font-size: 0.95rem;
            letter-spacing: 1px;
            margin-left: 10px;
            transition: all 0.3s;
            position: relative;
        }
        
        .nav-link::after {
            content: '';
            position: absolute;
            width: 0%;
            height: 2px;
            background-color: var(--md-primary);
            bottom: -5px;
            left: 0;
            transition: width 0.3s;
        }

        .nav-link:hover::after {
            width: 100%;
        }

        /* --- Hero-Sektion --- */
        .hero-section {
            background: linear-gradient(135deg, var(--md-surface), #e9fcf7);
            padding: 180px 0 100px;
            border-bottom: 5px solid var(--md-primary);
        }

        .hero-section h1 {
            color: var(--md-on-surface);
            font-weight: 900;
            text-transform: uppercase;
        }

        .hero-section p {
            color: #555;
            max-width: 700px;
            margin: 0 auto 50px;
        }

        /* --- Allgemeine Sektions-Stile --- */
        .section-pad {
            padding: 90px 0;
        }

        .section-title {
            font-weight: 800;
            margin-bottom: 20px;
            position: relative;
            display: inline-block;
        }
        
        .section-title::after {
            content: '';
            position: absolute;
            width: 50px;
            height: 4px;
            background-color: var(--md-primary);
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
        }

        .section-lead {
            color: #666;
            margin-bottom: 60px;
        }

        /* --- Material Cards (Leistungen) --- */
        .md-card {
            border-radius: 8px;
            background-color: var(--md-surface);
            padding: 30px;
            height: 100%;
            border: 1px solid #eee;
            transition: all 0.3s ease;
        }
        
        .md-card:hover {
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transform: translateY(-5px);
        }

        .md-card-icon {
            font-size: 48px;
            color: var(--md-primary);
            margin-bottom: 20px;
        }

        .md-card-title {
            color: var(--md-on-surface);
            font-weight: 700;
            margin-bottom: 15px;
        }

        /* --- Swiper Galerie & Crop --- */
        .gallery-wrapper {
            background-color: #f0f0f0;
        }
        
        .swiper-main-container {
            position: relative;
            width: 100%;
            max-width: 100%;
            margin: 0 auto;
        }
        
        .ref-slider {
            width: 100%;
            padding: 10px 0 20px;
        }

        .swiper-slide {
            height: auto;
            border-radius: 8px;
            overflow: hidden;
            border: 4px solid var(--md-surface);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }
        
        .swiper-slide:hover {
            box-shadow: 0 8px 25px rgba(0,0,0,0.2);
            transform: scale(1.02);
        }

        .gallery-image {
            width: 100%;
            aspect-ratio: 1 / 1; /* Erzwingt ein quadratisches Format */
            object-fit: cover; /* Schneidet das Bild sauber ab, ohne es zu stauchen */
            cursor: zoom-in;
            display: block;
        }
        
        /* Pfeile */
        .swiper-button-next, .swiper-button-prev {
            color: var(--md-primary);
            width: 44px;
            height: 44px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
            background-color: var(--md-surface);
            border-radius: 50%;
            box-shadow: 0 2px 5px rgba(0,0,0,0.15);
            margin: 0;
        }
        
        .swiper-button-next::after, .swiper-button-prev::after {
            font-size: 20px;
        }
        
        .swiper-button-next { right: 15px; }
        .swiper-button-prev { left: 15px; }
        
        .swiper-pagination {
            position: relative;
            margin-top: 30px;
            bottom: auto;
            text-align: center;
        }
        
        .swiper-pagination-bullet-active {
            background: var(--md-primary);
        }

        /* --- Kontaktformular --- */
        .contact-form {
            background-color: var(--md-surface);
            padding: 40px;
            border-radius: 8px;
            border: 1px solid #eee;
        }

        .form-outline .form-control:focus ~ .form-label, 
        .form-outline .form-control.active ~ .form-label {
            color: var(--md-accent);
        }
        
        .form-outline .form-control:focus ~ .form-notch .form-notch-leading,
        .form-outline .form-control:focus ~ .form-notch .form-notch-middle,
        .form-outline .form-control:focus ~ .form-notch .form-notch-trailing {
            border-color: var(--md-accent) !important;
        }

        /* --- Footer --- */
        footer {
            background-color: #222;
            color: #ccc;
            padding: 70px 0 20px;
        }

        footer h4 {
            color: var(--md-surface);
            font-weight: 700;
            margin-bottom: 25px;
        }

        .footer-link-list {
            padding-left: 0;
        }

        .footer-link-list li { margin-bottom: 15px; }

        .footer-link-list a {
            color: #aaa;
            text-decoration: none;
            transition: color 0.3s;
            display: flex;
            align-items: center;
        }

        .footer-link-list a:hover {
            color: var(--md-accent);
        }
        
        .footer-bottom {
            border-top: 1px solid #333;
            padding-top: 25px;
            margin-top: 40px;
            font-size: 0.9rem;
        }

        .btn-brand {
            background-color: var(--md-primary);
            color: white !important;
            font-weight: bold;
            padding: 12px 30px;
            border-radius: 4px;
            transition: all 0.3s ease;
        }

        .btn-brand:hover {
            background-color: var(--md-primary-variant);
        }
    
    /* --- GLightbox Fix für Scrollbalken und Anschnitt --- */
.gslide-media img {
    max-height: 90vh !important;
    max-width: 100vw !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

html.glightbox-open {
    overflow: hidden !important;
}
/* --- Kontaktformular CF7 Fix --- */
.wpcf7-form-control.form-control {
    background-color: #ffffff !important; /* Weißer Hintergrund */
    border: 1px solid #ced4da !important;  /* Deutlicher Rahmen */
    padding: 10px 15px !important;       /* Innenabstand */
    border-radius: 4px !important;       /* Abgerundete Ecken */
}

/* Abstand zwischen den Feldern */
.wpcf7-form-control-wrap {
    display: block;
    margin-bottom: 1rem;
}

/* Button-Styling erzwingen, falls es grau bleibt */
.wpcf7-submit.btn {
    background-color: var(--md-primary) !important;
    color: #ffffff !important;
    border: none;
    padding: 12px;
    font-weight: bold;
}

/* Container für das Formular (weißes Rechteck) */
.contact-form {
    background: #ffffff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Abstände der CF7-Elemente */
.wpcf7-form-control-wrap {
    display: block;
    margin-bottom: 15px;
}

/* Labels hübsch machen */
.contact-form label {
    font-weight: 600;
    margin-bottom: 5px;
    display: block;
    color: #444;
}

/* Inputs designen */
.contact-form .form-control {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 12px;
}