/*
Theme Name: Optima Theme
Theme URI: https://example.com/optima-theme
Author: Optima Theme Generator
Author URI: https://example.com
Description: Eine moderne WordPress‑Theme inspiriert von den Webseiten optima‑medica.de und kunde.consulting. Die Vorlage verwendet ein klares Layout, kräftige Farben und umfasst Seitenvorlagen für Impressum, Datenschutz, Kontakt, Shop und Fortbildungen. Alle Inhalte wurden aus den vorhandenen Seiten der Optima Medica übernommen.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: optima-theme
*/

/*
 * Grundlegende Variablen und Typografie
 */
:root {
    --primary-color: #e4007c;
    --secondary-color: #6200ea;
    --text-color: #222;
    --background-color: #ffffff;
    --gray-light: #f7f7f7;
    --font-family: 'Montserrat', sans-serif;
}

body {
    font-family: var(--font-family);
    color: var(--text-color);
    background: var(--background-color);
    margin: 0;
    line-height: 1.6;
}

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

/* Layout Container */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Header */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    background: var(--background-color);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid #eee;
}

.site-logo img {
    width: 48px;
    height: 48px;
}

.main-navigation {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.main-navigation a {
    font-weight: 500;
    color: var(--text-color);
    padding: 0.5rem;
}
.main-navigation a:hover {
    color: var(--primary-color);
}

/* Mobile nav toggle */
.nav-toggle {
    display: none;
    flex-direction: column;
    width: 24px;
    height: 24px;
    justify-content: space-between;
    cursor: pointer;
}
.nav-toggle span {
    display: block;
    height: 3px;
    background: var(--text-color);
}

/* Hero Section */
.hero-section {
    position: relative;
    color: #fff;
    text-align: center;
    padding: 6rem 1rem;
    overflow: hidden;
}
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('assets/hero.jpg');
    background-size: cover;
    background-position: center;
    filter: brightness(0.6);
    z-index: -1;
}
.hero-section h1 {
    font-size: 2.5rem;
    margin: 0 0 1rem;
    font-weight: 700;
}
.hero-section p {
    font-size: 1.25rem;
    margin: 0 0 2rem;
}
.hero-section .cta-button {
    background: #fff;
    color: var(--primary-color);
    padding: 0.75rem 2rem;
    border-radius: 4px;
    font-weight: 600;
    display: inline-block;
}
.hero-section .cta-button:hover {
    background: var(--secondary-color);
    color: #fff;
}

/* Section titles */
section {
    padding: 4rem 0;
}
section h2 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    text-align: center;
    color: var(--primary-color);
}

/* Training grid */
.training-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.training-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease;
}
.training-card:hover {
    transform: translateY(-4px);
}
.training-card img {
    width: 100%;
    height: auto;
}
.training-card .card-content {
    padding: 1rem;
}
.training-card h3 {
    margin: 0;
    color: var(--primary-color);
    font-size: 1.3rem;
}
.training-card p {
    margin: 0.5rem 0;
    font-size: 0.9rem;
}

/* Contact page */
.contact-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: flex-start;
}
.contact-info {
    flex: 1 1 300px;
}
.contact-form {
    flex: 1 1 300px;
    max-width: 600px;
}
.contact-form label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 600;
}
.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 1rem;
    font-family: var(--font-family);
}
.contact-form textarea {
    min-height: 150px;
}
.contact-form button {
    background: var(--primary-color);
    color: #fff;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
}
.contact-form button:hover {
    background: var(--secondary-color);
}

/* Shop page */
.shop-notice {
    background: var(--primary-color);
    color: #fff;
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
    margin: 2rem auto;
}
.shop-notice a {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.75rem 2rem;
    background: #fff;
    color: var(--primary-color);
    border-radius: 4px;
    font-weight: 600;
}
.shop-notice a:hover {
    background: var(--secondary-color);
    color: #fff;
}

/* Footer */
.site-footer {
    background: var(--gray-light);
    padding: 1rem 0;
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-color);
}
.site-footer a {
    color: var(--primary-color);
}

/* Responsive Navigation */
@media (max-width: 768px) {
    .main-navigation {
        display: none;
        flex-direction: column;
        background: var(--background-color);
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        padding: 1rem;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }
    .main-navigation.open {
        display: flex;
    }
    .nav-toggle {
        display: flex;
    }
}

/* Horizontales Menü */
.horizontal-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.5rem;
}

.horizontal-menu li {
  display: inline-block;
}

.horizontal-menu a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

.horizontal-menu a:hover {
  text-decoration: underline;
}