/*
Theme Name: André Wiechens Child
Theme URI: https://andre-wiechens.de
Description: Erweitertes Child-Theme auf kostenloser GeneratePress-Basis. Enthält Dual-Mode (Privat/Geschäftlich), Mega-Menu und Styleguide-System.
Author: André Wiechens
Template: generatepress
Version: 1.0.0
*/
/* ==========================================================================
1. DESIGN SYSTEM & CSS VARIABLES (Styleguide)
========================================================================== */
:root {
/* Privater Bereich (Helles, warmes Retro-Modern Design) */
--aw-bg-private: #F9F8F6;
--aw-surface-private: #FFFFFF;
--aw-primary-teal: #1A5B6C;
--aw-accent-terracotta: #C86D51;
--aw-gold-brass: #D4A359;
--aw-text-dark: #2C3539;
--aw-text-muted: #6B7280;
--aw-border-light: #E5E7EB;
/* Geschäftlicher Bereich (Dunkler Tech-Design-Vorentwurf) */
--aw-bg-business: #0A0D14;
--aw-surface-business: #121824;
--aw-accent-neon-blue: #00F0FF;
--aw-accent-neon-purple: #7000FF;
--aw-text-light: #F0F4F8;
/* Typografie */
--aw-font-heading: 'Outfit', 'Syne', system-ui, -apple-system, sans-serif;
--aw-font-body: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
}
/* ==========================================================================
2. GENERATEPRESS OVERRIDES & DUAL MODE LOGIC
========================================================================== */
/* Privater Modus (Standard) */
body.mode-private,
body.mode-private .site-header,
body.mode-private .main-navigation {
background-color: var(--aw-bg-private) !important;
color: var(--aw-text-dark);
font-family: var(--aw-font-body);
}
body.mode-private h1,
body.mode-private h2,
body.mode-private h3,
body.mode-private h4 {
font-family: var(--aw-font-heading);
color: var(--aw-primary-teal);
font-weight: 700;
}
body.mode-private a {
color: var(--aw-primary-teal);
}
body.mode-private a:hover {
color: var(--aw-accent-terracotta);
}
/* Geschäftlicher Modus (Vorbereitet & Inaktiv für Öffentlichkeit) */
body.mode-business,
body.mode-business .site-header,
body.mode-business .main-navigation {
background-color: var(--aw-bg-business) !important;
color: var(--aw-text-light) !important;
}
body.mode-business h1,
body.mode-business h2,
body.mode-business h3 {
color: var(--aw-accent-neon-blue) !important;
}
/* ==========================================================================
3. DUAL-MODE SWITCHER BUTTON IN DER NAVIGATION
========================================================================== */
.aw-mode-switch-wrapper {
display: flex;
align-items: center;
margin-left: auto;
padding: 0 15px;
}
.aw-switch-btn {
background: #EAE8E3;
border: 1px solid #D1CECE;
border-radius: 20px;
padding: 6px 14px;
cursor: pointer;
font-size: 0.85rem;
font-weight: 600;
display: inline-flex;
gap: 8px;
transition: all 0.25s ease;
}
.aw-switch-btn:hover {
border-color: var(--aw-accent-terracotta);
}
body.mode-private .private-label {
color: var(--aw-primary-teal);
font-weight: bold;
}
body.mode-private .business-label {
color: var(--aw-text-muted);
opacity: 0.6;
}
body.mode-business .aw-switch-btn {
background: #1A2232;
border-color: #2E3A52;
}
body.mode-business .business-label {
color: var(--aw-accent-neon-blue);
font-weight: bold;
}
/* ==========================================================================
4. MEGA-MENU SYSTEM (Ersetzt GP Premium Mega-Menu)
========================================================================== */
@media (min-width: 769px) {
/* Untermenü als Card gestalten */
.main-navigation .main-nav ul ul {
background: var(--aw-surface-private);
border: 1px solid var(--aw-border-light);
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0,0,0,0.08);
padding: 12px 0;
min-width: 230px;
}
.main-navigation .main-nav ul ul li a {
padding: 10px 20px;
font-size: 0.95rem;
color: var(--aw-text-dark);
transition: background 0.2s ease, color 0.2s ease;
}
.main-navigation .main-nav ul ul li a:hover {
background-color: #F0F4F6;
color: var(--aw-accent-terracotta);
}
}
/* Mobile Optimierung */
@media (max-width: 768px) {
.aw-mode-switch-wrapper {
margin: 10px 0;
justify-content: center;
}
}