/*
Theme Name: Vacufitems Theme
Theme URI: https://vacufitems.de
Author: Kevin Puhle
Author URI: https://vacufitems.de
Description: Ein individuelles WordPress‑Theme für Vacufitems. Dieses Theme basiert auf den bereitgestellten Corporate‑Design‑Richtlinien (Primärgrün #8CC63E, Sekundärgrün #4CAF50, Akzentgrün #1B5E20, Dunkelgrau #333333, Hellgrau #F5F5F5) und nutzt die Schriftarten Poppins (für Überschriften) und Open Sans (für Fließtext). Es beinhaltet Vorlagen für die Startseite, Leistungen, Über‑uns‑Seite, FAQs, Kontaktformulare sowie eine Aktionsseite mit Countdown. Alle Dateien sind vollständig responsiv und SEO‑freundlich.
Version: 1.0.0
License: GPL‑2.0
License URI: http://www.gnu.org/licenses/gpl‑2.0.html
Text Domain: vacufitems
Domain Path: /languages
Tags: custom‑theme, responsive, EMS, fitness, corporate
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&family=Open+Sans:wght@400;600&display=swap');

/*
 * Die folgenden CSS‑Variablen orientieren sich am vom Kunden vorgegebenen Corporate Design. Über diese Variablen
 * lassen sich Farben und Schriftarten zentral steuern. Änderungen an den Farbwerten wirken sich automatisch
 * auf alle Bereiche aus. Weitere Variablen (z. B. für Abstände) können bei Bedarf ergänzt werden.
 */
:root {
    --color-primary: #8CC63E;
    --color-secondary: #4CAF50;
    --color-accent: #1B5E20;
    --color-dark: #0D0D0D;
    --color-gray-dark: #333333;
    --color-gray-light: #F5F5F5;
    --font-heading: 'Poppins', Arial, sans-serif;
    --font-body: 'Open Sans', Helvetica, sans-serif;
    --max-width: 1200px;
    --transition-speed: 0.3s;
}

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

body {
    font-family: var(--font-body);
    background-color: var(--color-dark);
    color: var(--color-gray-light);
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-gray-light);
    line-height: 1.2;
    margin-bottom: 1rem;
}

p {
    margin-bottom: 1.2rem;
}

img {
    max-width: 100%;
    display: block;
    height: auto;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-speed);
}

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

/* Container */
.container {
    width: 90%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 2rem 0;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(13, 13, 13, 0.9);
    backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
}

.navbar .brand {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    color: var(--color-primary);
}

.navbar .brand img {
    height: 40px;
    margin-right: 0.5rem;
}

.navbar nav {
    display: flex;
    align-items: center;
}

.navbar nav a {
    margin-left: 1.5rem;
    font-weight: 600;
    color: var(--color-gray-light);
    position: relative;
}

.navbar nav a::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: width var(--transition-speed);
    position: absolute;
    bottom: -4px;
    left: 0;
}

.navbar nav a:hover::after,
.navbar nav a.current-menu-item::after {
    width: 100%;
}

/* Mobile Menü Toggle */
.menu-toggle {
    display: none;
    cursor: pointer;
    flex-direction: column;
    width: 24px;
    height: 18px;
    justify-content: space-between;
}

.menu-toggle span {
    display: block;
    height: 3px;
    background: var(--color-primary);
    border-radius: 3px;
}

@media (max-width: 768px) {
    .navbar nav {
        position: absolute;
        top: 100%;
        right: 0;
        background: rgba(13, 13, 13, 0.95);
        flex-direction: column;
        width: 200px;
        padding: 1rem;
        transform: translateX(100%);
        transition: transform var(--transition-speed);
    }
    .navbar nav.open {
        transform: translateX(0);
    }
    .navbar nav a {
        margin: 0.5rem 0;
    }
    .menu-toggle {
        display: flex;
    }
}

/* Hero Section */
.hero {
    position: relative;
    height: 90vh;
    width: 100%;
    background: url('../assets/img/hero.jpg') center/cover no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 1rem;
    color: var(--color-gray-light);
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.9) 100%);
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    border-radius: 4px;
    font-weight: 600;
    transition: background-color var(--transition-speed), color var(--transition-speed);
    cursor: pointer;
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-dark);
}

.btn-primary:hover {
    background: var(--color-secondary);
    color: var(--color-dark);
}

.btn-secondary {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.btn-secondary:hover {
    background: var(--color-primary);
    color: var(--color-dark);
}

/* Sektionen */
section {
    padding: 4rem 0;
}

section.section-light {
    background-color: var(--color-gray-dark);
}

.section-title {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 2rem;
}

/* Features & Services Cards */
.features,
.services,
.pricing {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
}

.feature-card,
.service-card,
.price-card {
    background: var(--color-gray-dark);
    padding: 2rem;
    border-radius: 8px;
    flex: 1 1 250px;
    max-width: 350px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    transition: transform var(--transition-speed);
}

.feature-card:hover,
.service-card:hover,
.price-card:hover {
    transform: translateY(-5px);
}

.feature-card i,
.service-card i {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--color-primary);
}

.price-card .price {
    font-size: 2rem;
    color: var(--color-primary);
    margin: 1rem 0;
    font-weight: bold;
}

.pricing ul {
    list-style: none;
    margin: 1rem 0;
    padding: 0;
}

.pricing li {
    margin-bottom: 0.5rem;
}

/* FAQ Accordion */
.accordion {
    max-width: 800px;
    margin: 0 auto;
}

.accordion-item {
    border-bottom: 1px solid var(--color-gray-dark);
}

.accordion-header {
    cursor: pointer;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-gray-dark);
}

.accordion-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--color-gray-light);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background-color: var(--color-dark);
    padding: 0 1rem;
}

.accordion-content p {
    padding: 0.5rem 0;
}

.accordion-item.active .accordion-content {
    max-height: 500px; /* ausreichend hoch, wächst dynamisch durch Inhalt */
    padding-bottom: 1rem;
}

.accordion-item.active .accordion-header i {
    transform: rotate(180deg);
}

/* Formular */
form.contact-form,
form.action-form {
    max-width: 600px;
    margin: 0 auto;
    display: grid;
    gap: 1rem;
}

form.contact-form label,
form.action-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

form.contact-form input,
form.contact-form textarea,
form.action-form input,
form.action-form textarea {
    width: 100%;
    padding: 0.7rem;
    border: 1px solid var(--color-gray-dark);
    border-radius: 4px;
    background: var(--color-gray-dark);
    color: var(--color-gray-light);
}

form.contact-form button,
form.action-form button {
    background: var(--color-primary);
    color: var(--color-dark);
    border: none;
    padding: 0.7rem 1.2rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color var(--transition-speed);
}

form.contact-form button:hover,
form.action-form button:hover {
    background: var(--color-secondary);
}

/* Countdown (Sommeraktion) */
.countdown {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.countdown div {
    background: var(--color-gray-dark);
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    min-width: 80px;
}

.countdown span {
    display: block;
    font-size: 2rem;
    color: var(--color-primary);
    font-weight: bold;
}

.countdown small {
    font-size: 0.8rem;
    color: var(--color-gray-light);
    text-transform: uppercase;
}

/* Footer */
footer {
    background: var(--color-gray-dark);
    color: var(--color-gray-light);
    text-align: center;
    padding: 2rem 1rem;
}

footer .social-icons {
    margin-bottom: 1rem;
}

footer .social-icons a {
    color: var(--color-gray-light);
    margin: 0 0.5rem;
    font-size: 1.5rem;
    transition: color var(--transition-speed);
}

footer .social-icons a:hover {
    color: var(--color-primary);
}

footer p {
    margin: 0.3rem 0;
}

/* Sprachumschalter */
.language-switch {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    gap: 0.5rem;
}

.language-switch a {
    color: var(--color-gray-light);
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    border: 1px solid transparent;
}

.language-switch a:hover,
.language-switch a.active {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
/* Entfernt die Punkte/Trenner vor und nach Menüelementen */
.navbar li::before,
.navbar li::after,
.menu li::before,
.menu li::after,
ul li::before,
ul li::after {
    content: none !important;
    display: none !important;
}
/* Hauptmenü horizontal ausrichten */
.main-menu {
    display: flex;
    list-style: none;
    gap: 2rem; /* Abstand zwischen Menüpunkten */
    align-items: center;
}

.main-menu li {
    list-style: none;
}

.main-menu li a {
    color: var(--color-gray-light);
    font-weight: 600;
    text-decoration: none;
}

.main-menu li a:hover {
    color: var(--color-primary);
}
/* ===== Header-Abstand & Menü ===== */
.navbar { gap: 1rem; }
.navbar .brand { margin-right: .5rem; }
.main-menu { gap: 1.25rem; align-items: center; }
@media (max-width: 992px){ .main-menu { gap: .9rem; } }
@media (max-width: 840px){ .main-menu { gap: .6rem; flex-wrap: wrap; } }

/* Inhalt nicht vom fixed Header überdecken */
body { padding-top: 76px; }
@media (max-width: 768px){ body { padding-top: 66px; } }

/* ===== Einheitliches Intro mit Herzschlag ===== */
.page-intro{
  position:relative; padding:5rem 1rem 4rem; text-align:center;
  color:var(--color-gray-light);
  background:radial-gradient(1200px 400px at 50% 0%, rgba(0,0,0,.45), rgba(0,0,0,.85));
  overflow:hidden;
}
.page-intro__heartbeat{
  position:absolute; inset:0;
  background:url('/wp-content/uploads/images-herzschlag.png') center 55%/1100px auto no-repeat;
  opacity:.22; pointer-events:none;
}
.page-intro h1{ font-family:var(--font-heading); font-size:clamp(1.8rem,3.8vw,3rem); margin:0 0 .6rem; }
.page-intro .lead{ max-width:920px; margin:0 auto; font-size:clamp(1rem,1.35vw,1.125rem); color:#e8e8e8; }

/* ===== Content & Bilder ===== */
.section-image{ width:100%; height:auto; margin-top:20px; border-radius:8px; }
.features, .services{ align-items:stretch; }
.feature-card i{ font-size:2rem; margin-bottom:.6rem; }
img[loading="lazy"]{ aspect-ratio:auto; }

/* ===== Social Icons (Footer) ===== */
.social-icons{ display:flex; gap:.8rem; justify-content:center; }
.social-icons a{ font-size:1.4rem; line-height:1; color:var(--color-primary); }
.social-icons a:hover{ color:var(--color-secondary); }

/* ===== Mobile Nav ohne horizontalen Scroll ===== */
@media (max-width:768px){
  .navbar nav{ position:absolute; top:100%; left:0; right:0; background:rgba(13,13,13,.98); display:none; }
  .navbar nav.open{ display:block; }
  .navbar nav .main-menu{ flex-direction:column; gap:0; }
  .navbar nav .main-menu li{ padding:10px 16px; border-top:1px solid rgba(255,255,255,.06); }
}
/* Platzhalter unter der fixen Navbar */
.header-spacer { height: 88px; }
@media (max-width: 768px){
  .header-spacer { height: 72px; }
}
/* ===== Header/Spacing Fix ===== */
body {
  /* fester Header: Platz für Navbar einrechnen */
  padding-top: 96px; /* Desktop */
}
@media (max-width: 1024px) {
  body { padding-top: 88px; }
}
@media (max-width: 768px) {
  body { padding-top: 72px; }
}

/* Logo neben Menü etwas näher rücken */
.navbar .brand { margin-right: 16px; }

/* Einheitliche Logo-Höhe (überschreibt Inline notfalls) */
.site-logo img { height: 72px; }

/* Hauptmenü horizontal */
.main-menu {
  display: flex;
  list-style: none;
  gap: 2rem;
  align-items: center;
  margin: 0;
  padding: 0;
}

/* Mobile Off-Canvas Verhalten für das UL selbst */
@media (max-width: 768px) {
  .main-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: rgba(13,13,13,0.95);
    flex-direction: column;
    width: 240px;
    padding: 1rem;
    transform: translateX(110%);
    transition: transform var(--transition-speed);
    border-left: 1px solid #222;
  }
  .main-menu.open {
    transform: translateX(0);
  }
  .main-menu li a {
    display: block;
    padding: .5rem 0;
  }
}

/* Header-Überlagerung verhindern, wenn es noch irgendwo sticky Hero gibt */
section:first-of-type { scroll-margin-top: 96px; }

/* Optional: Menü-Links aktive/hover Zustände etwas klarer */
.main-menu a {
  color: var(--color-gray-light);
  font-weight: 600;
}
.main-menu a:hover { color: var(--color-primary); }
/* === Intro mit Herzschlag === */
.intro{
  position:relative;
  padding: clamp(60px, 12vw, 120px) 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.45), rgba(0,0,0,.85)), var(--intro-bg) center/contain no-repeat;
  margin-top: 64px; /* Abstand unter Fixed-Header */
}
.intro .intro-inner{ text-align:center; }
.intro h1{ font-size:clamp(28px, 4.2vw, 42px); margin-bottom:.5rem; }
.intro-sub{ max-width:800px; margin:0 auto; opacity:.9 }

/* === Content-Bilder dezent & kleiner === */
.content-image{ margin: 1.5rem auto; max-width:min(880px, 92%); }
.content-image img{
  display:block; width:100%; height:auto; border-radius:8px;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}

/* === Cards: Icons statt Kästchen === */
.feature-card .icon, .service-card .icon{
  width: 36px; height:36px; fill: var(--color-primary);
  display:block; margin:0 auto .75rem;
}
.feature-card i, .service-card i, .price-card i{ display:none !important; }

/* === Social Icons === */
.social-icons{ display:flex; gap:1rem; justify-content:center; margin:0 0 1rem; }
.social-icons a{ display:inline-flex; }
.social-icons .icon{ width:26px; height:26px; fill:var(--color-gray-light); }
.social-icons a:hover .icon{ fill:var(--color-primary); }

/* Header/Logo-Menü Abstand enger machen */
.navbar{ padding: .6rem 1rem; }
.navbar .brand img{ height:56px; margin-right: .75rem; }
.main-menu{ gap:1.2rem; }
/* ==== Intro/Hero mit Herzschlag-Hintergrund ==== */
.intro-hero {
  position: relative;
  padding: 6rem 1rem 4rem;
  text-align: center;
  overflow: hidden;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.3), rgba(0,0,0,0.8));
}
.intro-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('assets/img/images-herzschlag.png') center 50% / contain no-repeat;
  opacity: .28;
  pointer-events: none;
}
.intro-hero h1 {
  font-size: clamp(1.8rem, 2.6vw + 1rem, 3rem);
  margin: 0 0 .6rem;
}
.intro-hero p.lead {
  max-width: 920px;
  margin: 0 auto;
  font-size: clamp(1rem, .6vw + .9rem, 1.2rem);
  opacity: .92;
}

/* ==== Seiten-Content-Layout ==== */
.page-wrap {
  width: min(1100px, 92%);
  margin: 2.5rem auto 3.5rem;
}
.page-section {
  margin-block: 2rem;
}
.page-section img.content-image {
  display: block;
  width: 100%;
  max-width: 900px;
  margin: 1rem auto;
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
}

/* ==== Social-Icons generisch kleiner machen, ohne dein Markup zu ändern ==== */
footer .social-icons img { width: 24px; height: 24px; display:inline-block; }

/* ==== Kollisionen vermeiden (keine doppelten Trenner, nur zur Sicherheit) ==== */
.navbar li::before, .navbar li::after,
.menu li::before, .menu li::after, ul li::before, ul li::after { content:none !important; display:none !important; }
/* === VFE: Global Layout/Utilities === */
:root{
  --header-h: 72px;
  --container-w: min(1120px, 92vw);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden}

/* Container */
.vfe-container{width:var(--container-w);margin-inline:auto}

/* Sticky Header Fix */
.site-header{position:sticky;top:0;z-index:999;background:#fff;border-bottom:1px solid #eee}
.site-main{padding-top:16px}

/* Buttons */
.vfe-btn{display:inline-block;padding:10px 14px;border-radius:8px;text-decoration:none;border:1px solid transparent}
.vfe-btn--primary{background:#111;color:#fff}
.vfe-btn--ghost{border-color:#111;color:#111}

/* Hero mit Herzschlag-Hintergrund */
.vfe-hero{padding:64px 0;text-align:center;position:relative}
.vfe-hero--heartbeat{
  background-image:url('/wp-content/uploads/images-herzschlag.png');
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center 18%;
  /* Bild bleibt dezent -> eigentlicher Kontrast kommt aus Inhalt */
  /* Falls zu stark: zusätzliches halbtransparentes Overlay */
}
.vfe-hero__inner{max-width:900px;margin:0 auto}
.vfe-hero h1{margin:0 0 10px 0}
.vfe-hero p{margin:0 auto;max-width:720px}

/* Grids/Sections */
.vfe-section{padding:48px 0}
.vfe-grid{display:grid;gap:20px}
.vfe-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.vfe-grid--3{grid-template-columns:1fr}}

.vfe-pricing{display:grid;gap:18px}
.vfe-pricing dl{display:grid;grid-template-columns:2fr 1fr;gap:10px;background:#fafafa;padding:16px;border-radius:10px}
.vfe-pricing dt{font-weight:600}
.vfe-pricing dd{margin:0;text-align:right}
.vfe-note{font-size:.95rem;opacity:.85}

/* A11y */
a:focus,button:focus{outline:2px dashed #000;outline-offset:2px}
/* ===== VFE Fixes: Header-Overlap, Hero-Layering, Pricing-Colors ===== */

/* Header-Überlappung (schiebt den Hero unter die Navbar) */
.navbar + .vfe-hero { margin-top: 80px; } /* ggf. 90–100px, wenn noch überlappt */

/* Hero: Foto als Background, Herzschlag + Gradient als Layer mit geringer Opazität */
.vfe-hero{ position: relative; padding: 64px 0; text-align: center; }
.vfe-hero__inner{ position: relative; z-index: 2; }
.vfe-hero--with-photo{ background-size: cover; background-position: center; }

/* Herzschlag-Linie dezent (unter dem Inhalt) */
.vfe-hero--heartbeat::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image: url('/wp-content/uploads/images-herzschlag.png');
  background-repeat: no-repeat; background-size: contain; background-position: center 18%;
  opacity: .10; pointer-events:none;
}
/* leichtes Weiß-Overlay für bessere Lesbarkeit */
.vfe-hero--heartbeat::after{
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(0deg, rgba(255,255,255,.92), rgba(255,255,255,.92));
  pointer-events:none;
}

/* Buttons im dunklen Hero klar sichtbar */
.vfe-hero .vfe-btn--primary{ background:#111; color:#fff; }
.vfe-hero .vfe-btn--ghost{ border:1px solid #111; color:#111; background:transparent; }

/* Preise-Box: sichere Kontraste erzwingen */
.vfe-pricing dl{
  background:#fff !important;
  color:#111 !important;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.vfe-pricing dt, .vfe-pricing dd{
  color:#111 !important;
  opacity:1 !important;
}