/*
Theme Name: Galtec Theme
Theme URI: https://galtec.org
Author: Galtec GmbH
Author URI: https://galtec.at
Description: Eine maßgeschneiderte WordPress‑Theme für die Galtec GmbH. Das Design basiert auf dem Stil von k‑industries.at und nutzt die hauseigenen Farben Blau und Gold. Die Theme ist vollständig programmiert und benötigt keine Block‑Editor‑Bausteine.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: galtec
*/

/*
 * Grundlegende Variablen
 *
 * Mit CSS‑Variablen lassen sich die Farben der Seite zentral verwalten. Die
 * verwendeten Farben orientieren sich an der Galtec‑Bildmarke. Die
 * primäre Farbe ist ein dunkles Blau, das als Hintergrund für Header und
 * Hero‑Bereiche dient. Als Akzentfarbe wird ein Goldton verwendet.
 */
:root {
    --primary-color: #01354a;      /* Dunkles Blau */
    --secondary-color: #f2b630;    /* Gold */
    --light-color: #f9f9f9;        /* Hellgrau/Weiß */
    --dark-color: #021e2d;         /* Sehr dunkles Blau */
    --font-family: 'Poppins', sans-serif;
    --max-width: 1200px;
}

/* Globale Stile */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    line-height: 1.6;
    color: var(--dark-color);
    background-color: var(--light-color);
    scroll-behavior: smooth;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--secondary-color);
}

/* Header und Navigation */
header {
    background-color: var(--primary-color);
    color: #fff;
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 999;
}

header .logo img {
    height: 50px;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 30px;
}

nav ul li a {
    color: #fff;
    font-weight: 500;
    letter-spacing: 0.5px;
}

nav ul li a:hover {
    color: var(--secondary-color);
}

/* Hero‑Abschnitt */
.hero {
    /* Mehrdimensionaler Hintergrund mit Parallax-Effekt */
    background: linear-gradient(180deg, var(--primary-color), var(--dark-color));
    background-attachment: fixed;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 100px 20px;
    position: relative;
    overflow: hidden;
}

/* Dekorativer Glanz im Hero‑Bereich */
.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 30%, rgba(242, 182, 48, 0.35), transparent 70%);
    opacity: 0.7;
    pointer-events: none;
    z-index: 0;
}

.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.hero p {
    font-size: 1.2rem;
    max-width: 800px;
    margin-bottom: 30px;
    position: relative;
    z-index: 1;
}

.btn {
    display: inline-block;
    padding: 12px 32px;
    background-color: var(--secondary-color);
    color: var(--primary-color);
    font-weight: 600;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease;
    position: relative;
    z-index: 1;
}

.btn:hover {
    background-color: #e0a520;
}

/* Features‑Section */
.features {
    max-width: var(--max-width);
    margin: 80px auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    text-align: center;
}

.feature {
    background-color: #fff;
    border-radius: 8px;
    padding: 30px 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    /* Smooth hover transition for feature cards */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effect for feature cards */
.feature:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.feature h3 {
    color: var(--primary-color);
    margin-bottom: 10px;
    font-size: 1.3rem;
}

.feature p {
    font-size: 0.95rem;
    color: var(--dark-color);
}

/* Services‑Section */
.services {
    background-color: var(--light-color);
    padding: 80px 20px;
}

.services .service-container {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.service {
    background-color: #fff;
    border-radius: 8px;
    padding: 40px 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.service:hover {
    transform: translateY(-5px);
}

.service h3 {
    color: var(--primary-color);
    margin-bottom: 15px;
    font-size: 1.5rem;
}

.service p {
    font-size: 1rem;
    color: var(--dark-color);
}

/* About‑Section */
.about {
    background-color: #fff;
    padding: 80px 20px;
}

.about .content {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
}

.about .text {
    flex: 1 1 400px;
}

.about .text h2 {
    color: var(--primary-color);
    margin-bottom: 20px;
    font-size: 2rem;
}

.about .text p {
    font-size: 1rem;
    margin-bottom: 10px;
}

.about .image {
    flex: 1 1 400px;
    text-align: center;
}

.about .image img {
    max-width: 100%;
    border-radius: 8px;
}

/* FAQ‑Section */
.faq {
    background-color: var(--light-color);
    padding: 80px 20px;
}

.faq h2 {
    text-align: center;
    margin-bottom: 40px;
    color: var(--primary-color);
}

.faq .faq-item {
    max-width: var(--max-width);
    margin: 0 auto 20px;
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.faq .faq-item h3 {
    color: var(--primary-color);
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.faq .faq-item p {
    font-size: 0.95rem;
}

/* Kontakt‑Section */
.contact {
    background-color: var(--primary-color);
    color: #fff;
    padding: 80px 20px;
    text-align: center;
}

/* Kunden / Partner Section */
.clients {
    background-color: var(--light-color);
    padding: 80px 20px;
}

.clients h2 {
    text-align: center;
    margin-bottom: 40px;
    color: var(--primary-color);
    font-size: 2rem;
}

.clients .client-container {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
}

.clients .client {
    background-color: #fff;
    border-radius: 8px;
    padding: 30px 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    /* Sanfter Übergang für Hover-Effekte */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.clients .client h3 {
    color: var(--primary-color);
    margin-bottom: 10px;
    font-size: 1.3rem;
}

.clients .client p {
    font-size: 0.95rem;
    color: var(--dark-color);
}

/* Partner Logos Section */
.partners {
    background-color: var(--light-color);
    padding: 80px 20px;
}

.partners h2 {
    text-align: center;
    margin-bottom: 40px;
    color: var(--primary-color);
    font-size: 2rem;
}

.partners .partner-container {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
}

.partners .partner-card {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    /* Sanfter Übergang für Hover-Effekte */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.partners .partner-card img {
    max-width: 120px;
    height: auto;
    margin-bottom: 15px;
}

.partners .partner-card h3 {
    color: var(--primary-color);
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.partners .partner-card p {
    font-size: 0.95rem;
    color: var(--dark-color);
}

.partners .partner-card a {
    color: var(--secondary-color);
    text-decoration: none;
}

/* Hove‑r‑Effekte für Kunden- und Partnerkarten */
.clients .client:hover,
.partners .partner-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.contact h2 {
    margin-bottom: 20px;
    font-size: 2rem;
}

.contact p {
    margin-bottom: 10px;
    font-size: 1rem;
}

.contact a {
    color: var(--secondary-color);
    font-weight: 600;
}

/* Kundenrezensionen Section */
.reviews {
    background-color: var(--light-color);
    padding: 80px 20px;
}

.reviews h2 {
    text-align: center;
    margin-bottom: 40px;
    color: var(--primary-color);
    font-size: 2rem;
}

.reviews .review-container {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
}

.reviews .review-card {
    background-color: #fff;
    border-radius: 8px;
    padding: 30px 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    text-align: center;
}

.reviews .review-card .stars {
    color: var(--secondary-color);
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.reviews .review-card p {
    font-size: 0.95rem;
    color: var(--dark-color);
    margin-bottom: 0;
}

.reviews .review-card .reviewer {
    font-style: italic;
    margin-top: 10px;
    color: var(--primary-color);
    font-size: 0.9rem;
}

/* Footer */
footer {
    background-color: var(--dark-color);
    color: #ccc;
    text-align: center;
    padding: 20px;
    font-size: 0.85rem;
}

footer a {
    color: var(--secondary-color);
}

/*
 * Animations und Effekte
 *
 * Diese Klassen ermöglichen sanfte Fade‑in‑Effekte beim Scrollen sowie
 * einen einfachen Slider für Kundenrezensionen. Sie ergänzen die
 * bestehenden Stile mit leichten Bewegungen und Übergängen, um der Seite
 * mehr Dynamik zu verleihen.
 */

/* Fade‑In‑Effekt für Elemente, die in den Viewport eintreten */
.fade {
    opacity: 0;
    transform: translateY(30px);
}

.fade.visible {
    opacity: 1;
    transform: none;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Kundenrezensionen – Slider */
.review-slider {
    max-width: var(--max-width);
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    min-height: 220px;
}

.review-slider .review-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.review-slider .review-card.active {
    opacity: 1;
    position: relative;
}