/*
Theme Name: Gewerbesteuer Modern
Theme URI: https://www.gewerbesteuer.de
Description: Modernes, responsives Theme für gewerbesteuer.de
Author: Christian Alber
Version: 1.11
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Copyright gewerbesteuer.de
Text Domain: gewerbesteuer-modern
*/

/* ============================================
   CSS Custom Properties (Design Tokens)
   ============================================ */
:root {
    /* Farben - Basierend auf neuem Design */
    --color-primary: #1a5276;
    --color-primary-light: #2874a6;
    --color-primary-dark: #154360;
    
    --color-accent: #3498db;
    --color-accent-light: #5dade2;
    --color-accent-dark: #2980b9;
    
    --color-success: #27ae60;
    --color-warning: #f39c12;
    --color-error: #e74c3c;
    
    /* Neutrale Farben */
    --color-white: #ffffff;
    --color-gray-50: #f8f9fa;
    --color-gray-100: #f1f3f5;
    --color-gray-200: #e9ecef;
    --color-gray-300: #dee2e6;
    --color-gray-400: #adb5bd;
    --color-gray-500: #6c757d;
    --color-gray-600: #495057;
    --color-gray-700: #343a40;
    --color-gray-800: #212529;
    --color-gray-900: #1a1d20;
    
    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    
    /* Spacing */
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-10: 2.5rem;
    --spacing-12: 3rem;
    --spacing-16: 4rem;
    --spacing-20: 5rem;
    
    /* Layout */
    --container-max: 1400px;
    --container-padding: 1.5rem;
    --border-radius: 0.5rem;
    --border-radius-lg: 0.75rem;
    --border-radius-xl: 1rem;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
}

/* ============================================
   Reset & Base Styles
   ============================================ */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-gray-700);
    background-color: var(--color-gray-50);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

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

a:hover {
    color: var(--color-primary-light);
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--spacing-4);
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-gray-800);
}

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-base); }

/* Mobile heading sizes - ca. 30% smaller */
@media (max-width: 768px) {
    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.3rem; }
    h3 { font-size: 1.15rem; }
}

p {
    margin: 0 0 var(--spacing-4);
}

/* ============================================
   Layout Components
   ============================================ */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.main-content {
    min-height: 60vh;
    padding: var(--spacing-8) 0;
}

/* ============================================
   Header
   ============================================ */
.site-header {
    background: var(--color-white);
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-main {
    padding: var(--spacing-4) 0;
}

.header-main .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-4);
}

.site-logo {
    flex-shrink: 0;
}

.site-logo img {
    max-height: 50px;
    width: auto;
}

.site-logo-text {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    text-decoration: none;
}

.logo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-white);
    font-size: var(--font-size-xl);
    font-weight: 700;
    border-radius: var(--border-radius);
}

.logo-text {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-gray-800);
}

.logo-dot {
    color: var(--color-accent);
}

/* ============================================
   DESKTOP NAVIGATION - Clean Redesign
   ============================================ */
.main-nav {
    display: none;
}

.main-nav ul,
.main-nav .nav-menu,
.main-nav .menu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--spacing-2) !important;
}

.main-nav li,
.main-nav .menu-item {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Hide old Cherry icons */
.main-nav li::before,
.main-nav li::after,
.main-nav .menu-item::before,
.main-nav .menu-item::after {
    display: none !important;
    content: none !important;
}

/* === ALL MENU LINKS: Black text, no background === */
.main-nav a,
.main-nav .menu-item a {
    display: inline-block !important;
    padding: 10px 18px !important;
    color: var(--color-gray-800) !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
}

/* === HOVER: Light gray background === */
.main-nav a:hover,
.main-nav .menu-item a:hover {
    background: var(--color-gray-100) !important;
    color: var(--color-gray-800) !important;
}

/* === ACTIVE/CURRENT ONLY: Blue background, white text === */
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a,
.main-nav .current-menu-ancestor > a {
    background: var(--color-primary) !important;
    color: #fff !important;
    font-weight: 600 !important;
}

/* Active hover stays blue */
.main-nav .current-menu-item > a:hover,
.main-nav .current_page_item > a:hover {
    background: var(--color-primary-dark) !important;
    color: #fff !important;
}

/* Mobile Menu Toggle */
.menu-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: var(--spacing-2);
    background: none;
    border: none;
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-gray-700);
    transition: var(--transition-fast);
}

/* Mobile Navigation */
.mobile-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-4);
    z-index: 9999;
}

.mobile-nav.active {
    display: block !important;
}

/* WICHTIG: Alle ul/menu Elemente im mobile-nav sichtbar machen */
.mobile-nav ul,
.mobile-nav > ul,
.mobile-nav > .menu,
.mobile-nav .nav-menu,
.mobile-nav .mobile-menu,
.mobile-nav .sf-menu,
.mobile-nav ul.sf-menu,
.mobile-nav .menu {
    all: unset !important;
    display: block !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    position: static !important;
    float: none !important;
    background: transparent !important;
}

/* WICHTIG: Alle li Elemente im mobile-nav sichtbar machen */
.mobile-nav li,
.mobile-nav ul li,
.mobile-nav .sf-menu > li,
.mobile-nav .menu > li,
.mobile-nav .mobile-menu > li {
    all: unset !important;
    display: block !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    position: static !important;
    float: none !important;
    background: transparent !important;
}

/* WICHTIG: Alle a Elemente im mobile-nav sichtbar machen */
.mobile-nav a,
.mobile-nav ul a,
.mobile-nav li a,
.mobile-nav .sf-menu a,
.mobile-nav .menu a {
    all: unset !important;
    display: block !important;
    padding: 15px 20px !important;
    color: #333 !important;
    border-bottom: 1px solid #eee !important;
    text-decoration: none !important;
    font-size: 16px !important;
    background: transparent !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

.mobile-nav a:hover,
.mobile-nav li a:hover {
    background: #f5f5f5 !important;
    color: #1a5276 !important;
}

.mobile-nav li:last-child a {
    border-bottom: none !important;
}

/* Untermenüs im Mobile versteckt halten */
.mobile-nav ul ul,
.mobile-nav li ul,
.mobile-nav .sub-menu {
    display: none !important;
}

/* ============================================
   Override Legacy Cherry/SF Menu Styles
   ============================================ */
.sf-menu,
ul.sf-menu,
.nav__primary {
    all: unset !important;
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    gap: 8px !important;
}

.sf-menu > li {
    all: unset !important;
    display: block !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.sf-menu > li::before,
.sf-menu > li::after {
    display: none !important;
    content: none !important;
}

/* === SF-MENU: All links black, no background === */
.sf-menu > li > a {
    all: unset !important;
    display: inline-block !important;
    padding: 10px 18px !important;
    color: var(--color-gray-800) !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    background: transparent !important;
}

/* === SF-MENU HOVER: Light background === */
.sf-menu > li > a:hover {
    background: var(--color-gray-100) !important;
    color: var(--color-gray-800) !important;
}

/* === SF-MENU ACTIVE ONLY: Blue with white text === */
.sf-menu > li.current-menu-item > a,
.sf-menu > li.current_page_item > a,
.sf-menu > li.current-menu-ancestor > a {
    background: var(--color-primary) !important;
    color: #fff !important;
    font-weight: 600 !important;
}

/* Active hover stays blue */
.sf-menu > li.current-menu-item > a:hover,
.sf-menu > li.current_page_item > a:hover {
    background: var(--color-primary-dark) !important;
    color: #fff !important;
}

/* sfHover state (dropdown open) */
.sf-menu > li.sfHover > a {
    background: var(--color-gray-100) !important;
    color: var(--color-gray-800) !important;
}

/* Hide submenu indicator arrows and old icons */
.sf-sub-indicator,
.sf-menu .sf-sub-indicator {
    display: none !important;
}

/* Hide FontAwesome icons from old theme menu */
.sf-menu > li > a::before,
.sf-menu > li > a::after,
.menu-item > a::before,
.menu-item > a::after,
.main-nav .icon-home::before,
.main-nav .icon-align-justify::before,
.main-nav .icon-pencil::before,
.main-nav .icon-arrow-up::before,
.main-nav [class^="icon-"]::before,
.main-nav [class*=" icon-"]::before {
    display: none !important;
    content: none !important;
}

/* Hide any icon elements */
.sf-menu i,
.main-nav i,
.menu-item i {
    display: none !important;
}

/* Submenu styling */
.sf-menu ul,
.sf-menu li ul {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background: var(--color-white) !important;
    box-shadow: var(--shadow-lg) !important;
    border-radius: var(--border-radius) !important;
    min-width: 200px !important;
    padding: var(--spacing-2) 0 !important;
    z-index: 1000 !important;
    flex-direction: column !important;
    margin: 0 !important;
}

.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
    display: flex !important;
}

.sf-menu ul li {
    display: block !important;
    width: 100% !important;
}

.sf-menu ul li a {
    all: unset !important;
    display: block !important;
    padding: var(--spacing-2) var(--spacing-4) !important;
    color: var(--color-gray-700) !important;
    cursor: pointer !important;
    transition: background var(--transition-fast) !important;
}

.sf-menu ul li a:hover {
    background: var(--color-gray-100) !important;
    color: var(--color-primary) !important;
}

/* Mobile Navigation Override for SF Menu */
.mobile-nav .sf-menu {
    display: block !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    position: static !important;
    float: none !important;
    background: transparent !important;
}

.mobile-nav .sf-menu > li {
    display: block !important;
    float: none !important;
    width: 100% !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mobile-nav .sf-menu li::before,
.mobile-nav .sf-menu li::after,
.mobile-nav li::before,
.mobile-nav li::after {
    display: none !important;
    content: none !important;
}

.mobile-nav .sf-menu > li > a {
    display: block !important;
    padding: 15px 20px !important;
    color: #333 !important;
    border-bottom: 1px solid #eee !important;
    text-decoration: none !important;
    font-size: 16px !important;
    background: transparent !important;
    float: none !important;
    width: auto !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

.mobile-nav .sf-menu > li:last-child > a {
    border-bottom: none !important;
}

.mobile-nav .sf-menu > li > a:hover {
    background: #f5f5f5 !important;
    color: #1a5276 !important;
}

/* Hide sub-menus in mobile */
.mobile-nav .sf-menu ul,
.mobile-nav .sf-menu .sub-menu {
    display: none !important;
}

/* Hide icons in mobile nav */
.mobile-nav i,
.mobile-nav [class^="icon-"],
.mobile-nav [class*=" icon-"] {
    display: none !important;
}

/* Desktop Styles */
@media (min-width: 768px) {
    .main-nav {
        display: block;
    }
    
    .menu-toggle {
        display: none;
    }
    
    .mobile-nav {
        display: none !important;
    }
}

/* ============================================
   Footer
   ============================================ */
.site-footer {
    background: linear-gradient(180deg, var(--color-gray-800) 0%, var(--color-gray-900) 100%);
    color: var(--color-gray-300);
    padding: var(--spacing-12) 0 var(--spacing-6);
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-8);
    margin-bottom: var(--spacing-8);
}

@media (min-width: 768px) {
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .footer-content {
        grid-template-columns: repeat(4, 1fr);
    }
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-4);
}

.footer-logo .logo-icon {
    width: 36px;
    height: 36px;
    font-size: var(--font-size-base);
    background: var(--color-primary);
}

.footer-logo .logo-text {
    font-size: var(--font-size-lg);
    color: var(--color-white);
}

.footer-logo .logo-dot {
    color: var(--color-accent);
}

.footer-section h4 {
    color: var(--color-white);
    margin-bottom: var(--spacing-4);
    font-size: var(--font-size-base);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer-section ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-section li {
    margin-bottom: var(--spacing-2);
}

.footer-section a {
    color: var(--color-gray-400);
    font-size: var(--font-size-sm);
    transition: color var(--transition-fast);
}

.footer-section a:hover {
    color: var(--color-white);
}

.footer-newsletter-text {
    font-size: var(--font-size-sm);
    color: var(--color-gray-400);
    margin-bottom: var(--spacing-4);
    line-height: 1.6;
}

.newsletter-form {
    display: flex;
    gap: var(--spacing-2);
}

.newsletter-form input {
    flex: 1;
    padding: var(--spacing-2) var(--spacing-3) !important;
    font-size: var(--font-size-sm) !important;
    border: 1px solid var(--color-gray-600) !important;
    background: var(--color-gray-700) !important;
    color: var(--color-white) !important;
    border-radius: var(--border-radius) !important;
}

.newsletter-form input::placeholder {
    color: var(--color-gray-500);
}

.newsletter-form input:focus {
    border-color: var(--color-accent) !important;
    outline: none !important;
}

.newsletter-form button {
    padding: var(--spacing-2) var(--spacing-4) !important;
    font-size: var(--font-size-sm);
}

.footer-bottom {
    padding-top: var(--spacing-6);
    border-top: 1px solid var(--color-gray-700);
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

.footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-4);
}

.footer-bottom p {
    margin: 0;
}

/* Footer Social Links */
.footer-social {
    display: flex;
    gap: var(--spacing-3);
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-gray-400);
    transition: all 0.2s ease;
}

.social-link:hover {
    background: #1877f2;
    color: white;
    transform: translateY(-2px);
}

.social-link svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 600px) {
    .footer-bottom-content {
        flex-direction: column;
        text-align: center;
    }
}

/* ============================================
   Cards & Boxes
   ============================================ */
.card {
    background: var(--color-white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow);
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-6);
}

.card-title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-4);
}

/* Hero Section */
.hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    padding: var(--spacing-16) 0;
    text-align: center;
}

.hero h1 {
    color: var(--color-white);
    font-size: var(--font-size-4xl);
    margin-bottom: var(--spacing-4);
}

@media (min-width: 768px) {
    .hero h1 {
        font-size: var(--font-size-5xl);
    }
}

.hero p {
    font-size: var(--font-size-xl);
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto var(--spacing-8);
}

/* ============================================
   Buttons
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-6);
    font-size: var(--font-size-base);
    font-weight: 500;
    border-radius: var(--border-radius);
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
}

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

.btn-primary:hover {
    background: var(--color-primary-light);
    color: var(--color-white);
}

.btn-accent {
    background: var(--color-accent);
    color: var(--color-white);
}

.btn-accent:hover {
    background: var(--color-accent-light);
    color: var(--color-white);
}

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

.btn-outline:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

.btn-lg {
    padding: var(--spacing-4) var(--spacing-8);
    font-size: var(--font-size-lg);
}

/* ============================================
   Forms
   ============================================ */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="search"],
textarea,
select {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    font-size: var(--font-size-base);
    font-family: inherit;
    border: 2px solid var(--color-gray-200);
    border-radius: var(--border-radius);
    background: var(--color-white);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(30, 95, 138, 0.1);
}

label {
    display: block;
    margin-bottom: var(--spacing-2);
    font-weight: 500;
    color: var(--color-gray-700);
}

.form-group {
    margin-bottom: var(--spacing-4);
}

/* ============================================
   Gewerbesteuer Plugin Styles (Override)
   ============================================ */

/* Search Form */
.gewerbesteuer-input-div {
    float: none !important;
    width: 100% !important;
    max-width: 400px;
    margin-bottom: var(--spacing-4) !important;
    margin-right: 0 !important;
}

.gewerbesteuer-search-button-div {
    float: none !important;
    width: auto !important;
    margin-top: 0 !important;
    margin-bottom: var(--spacing-4) !important;
}

@media (min-width: 768px) {
    .gewerbesteuer-input-div {
        float: left !important;
        margin-right: var(--spacing-4) !important;
    }
    
    .gewerbesteuer-search-button-div {
        float: left !important;
        margin-top: var(--spacing-3) !important;
    }
}

/* Action Button */
a.gewerbesteuer-action-button,
a.gewerbesteuer-action-button:focus {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
    font-size: var(--font-size-base) !important;
    margin: 0 !important;
    padding: var(--spacing-3) var(--spacing-6) !important;
    border-radius: var(--border-radius) !important;
    text-shadow: none !important;
    font-weight: 500;
    transition: all var(--transition-fast);
}

a.gewerbesteuer-action-button:hover {
    background-color: var(--color-primary-light) !important;
    transform: translateY(-1px);
}

/* Data Tables */
.gewerbesteuer-data-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--spacing-6) 0;
    font-size: var(--font-size-sm);
    overflow-x: auto;
    display: block;
}

@media (min-width: 768px) {
    .gewerbesteuer-data-table {
        display: table;
        font-size: var(--font-size-base);
    }
}

.gewerbesteuer-data-table th {
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
    padding: var(--spacing-3) var(--spacing-4) !important;
    font-weight: 600;
    text-align: left !important;
}

.gewerbesteuer-data-table td {
    padding: var(--spacing-3) var(--spacing-4) !important;
    border: none !important;
    border-bottom: 1px solid var(--color-gray-200) !important;
}

.gewerbesteuer-data-table tr:hover td {
    background: var(--color-gray-50);
}

.gewerbesteuer-data-odd {
    background: var(--color-gray-50) !important;
}

.gewerbesteuer-data-table a {
    color: var(--color-primary) !important;
    font-weight: 500;
}

.gewerbesteuer-data-table a:hover {
    color: var(--color-primary-light) !important;
}

/* Data Headers */
.gewerbesteuer-data-h2,
.gewerbesteuer-data-h3 {
    color: var(--color-gray-800);
    margin-bottom: var(--spacing-4) !important;
}

.gewerbesteuer-data-h2 strong,
.gewerbesteuer-data-h3 strong {
    font-weight: 600;
}

/* Rechner Styles */
.gewerbesteuer-rechner-heading {
    color: var(--color-primary) !important;
    font-size: var(--font-size-lg) !important;
    font-weight: 600;
}

.gewerbesteuer-rechner-results {
    font-size: var(--font-size-xl) !important;
    background: var(--color-gray-50);
    padding: var(--spacing-4);
    border-radius: var(--border-radius);
    margin-top: var(--spacing-4);
}

/* Error Messages */
.gewerbesteuer-error {
    color: var(--color-error) !important;
    background: #fef2f2;
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--border-radius);
    border-left: 4px solid var(--color-error);
}

/* Icons */
.gewerbesteuer-icon-medium,
.gewerbesteuer-icon-big,
.gewerbesteuer-icon-small {
    color: var(--color-primary);
}

/* Breadcrumb Navigation */
.icon-pushpin,
.icon-arrow-right {
    color: var(--color-gray-400);
    margin: 0 var(--spacing-1);
}

/* ============================================
   Utility Classes
   ============================================ */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--spacing-4); }
.mt-8 { margin-top: var(--spacing-8); }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-8 { margin-bottom: var(--spacing-8); }

.hidden { display: none; }
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* ============================================
   WordPress Core Styles
   ============================================ */
.alignleft {
    float: left;
    margin-right: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

.alignright {
    float: right;
    margin-left: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--spacing-4);
}

.wp-caption {
    max-width: 100%;
}

.wp-caption-text {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-top: var(--spacing-2);
}

/* Screen Reader Text */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* ============================================
   Legacy Shortcode Layouts
   ============================================ */

/* MotoPress Grid */
.mp-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-6);
}

.mp-col {
    flex: 1;
    min-width: 0;
}

.mp-col-3 {
    flex: 0 0 100%;
}

.mp-col-9 {
    flex: 0 0 100%;
}

@media (min-width: 992px) {
    .mp-col-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
    
    .mp-col-9 {
        flex: 0 0 75%;
        max-width: 75%;
    }
}

.mp-code {
    background: var(--color-gray-100);
    padding: var(--spacing-4);
    border-radius: var(--border-radius);
}

/* Row Fluid Grid */
.row-fluid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-4);
}

.col-half {
    flex: 0 0 100%;
}

@media (min-width: 768px) {
    .col-half {
        flex: 0 0 calc(50% - var(--spacing-3));
    }
}

.col-full {
    flex: 0 0 100%;
}

/* ============================================
   Gewerbesteuer Rechner Improved Styles
   ============================================ */

/* Calculator Layout */
.gewerbesteuer-rechner-tabelle {
    width: 100%;
    margin-bottom: var(--spacing-4);
}

.gewerbesteuer-rechner-tabelle td {
    padding: var(--spacing-2) var(--spacing-1);
    vertical-align: middle;
}

.gewerbesteuer-rechner-heading {
    color: var(--color-primary) !important;
    font-size: var(--font-size-base) !important;
    font-weight: 600 !important;
    display: block;
    margin-bottom: var(--spacing-2);
    margin-top: var(--spacing-4);
}

.gewerbesteuer-rechner-option {
    font-size: var(--font-size-base) !important;
    padding-left: var(--spacing-2) !important;
    color: var(--color-gray-700);
}

.gewerbesteuer-rechner-radio {
    padding-left: var(--spacing-4) !important;
}

.gewerbesteuer-rechner-first-p {
    margin-top: var(--spacing-6) !important;
}

.gewerbesteuer-rechner-button-p {
    margin-top: var(--spacing-6) !important;
    margin-left: 0 !important;
}

.gewerbesteuer-rechner-results {
    font-size: var(--font-size-lg) !important;
    background: var(--color-gray-50);
    padding: var(--spacing-4);
    border-radius: var(--border-radius);
    margin-top: var(--spacing-4);
}

/* Radio buttons */
input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: var(--color-primary);
    cursor: pointer;
}

/* Form inputs in calculator */
#input-gewerbeertrag,
#input-hinzurechnungsbetrag,
#input-kuerzungsbetrag,
#input-hebesatz {
    width: 100% !important;
    max-width: 300px;
    margin-bottom: var(--spacing-2);
}

/* Calculator button */
#gewerbesteuer-rechner-button {
    display: inline-block !important;
    cursor: pointer;
}

/* Hide old icons */
.icon-hand-right::before,
.icon-pencil::before,
h2 i,
h2 .icon-hand-right,
h2 .icon-pencil {
    display: none !important;
}

/* Results table improvements */
.gewerbesteuer-data-summary {
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
}

.gewerbesteuer-data-summary td {
    color: var(--color-white) !important;
    font-weight: 600;
}

/* Error message */
.gewerbesteuer-error-message {
    margin-top: var(--spacing-4);
}

/* Content box from shortcode */
.content-box {
    margin-bottom: var(--spacing-6);
}

.content-box p:last-child {
    margin-bottom: 0;
}

/* ============================================
   Full-width Layout for Hebesatz Pages with Sidebar
   ============================================ */

/* Override ALL container restrictions for sidebar pages */
body.gewerbesteuer-has-sidebar .main-content,
body.gewerbesteuer-has-sidebar .main-content .container,
body.gewerbesteuer-has-sidebar .main-content article,
body.gewerbesteuer-has-sidebar .entry-content,
body.gewerbesteuer-has-sidebar .entry-content.card {
 max-width: 100% !important;
 width: 100% !important;
}

body.gewerbesteuer-has-sidebar .main-content .container {
 max-width: 1400px !important;
 padding: 0 var(--spacing-6) !important;
 margin: 0 auto !important;
}

/* Remove card styling - content gets its own card */
body.gewerbesteuer-has-sidebar .entry-content.card {
 background: transparent !important;
 box-shadow: none !important;
 padding: 0 !important;
 border-radius: 0 !important;
}

/* The flexbox layout container */
body.gewerbesteuer-has-sidebar .gewerbesteuer-layout {
 display: flex !important;
 flex-direction: row !important;
 flex-wrap: nowrap !important;
 gap: 30px !important;
 width: 100% !important;
 max-width: 100% !important;
 align-items: flex-start !important;
}

/* Main content gets white card styling - FILLS REMAINING SPACE */
body.gewerbesteuer-has-sidebar .gewerbesteuer-main-content {
 flex: 1 1 0% !important;
 min-width: 0 !important;
 background: var(--color-white) !important;
 border-radius: var(--border-radius-lg) !important;
 box-shadow: var(--shadow) !important;
 padding: var(--spacing-6) !important;
 overflow: hidden !important;
}

/* Sidebar - fixed 300px width */
body.gewerbesteuer-has-sidebar .gewerbesteuer-sidebar {
 flex: 0 0 300px !important;
 width: 300px !important;
 max-width: 300px !important;
 min-width: 300px !important;
 overflow: hidden !important;
}

/* Make sure images in sidebar don't overflow */
body.gewerbesteuer-has-sidebar .gewerbesteuer-sidebar img {
 max-width: 100% !important;
 width: 100% !important;
 height: auto !important;
 display: block !important;
}

/* Responsive: stack on mobile */
@media (max-width: 992px) {
 body.gewerbesteuer-has-sidebar .gewerbesteuer-layout {
   flex-direction: column !important;
   flex-wrap: wrap !important;
 }
 
 body.gewerbesteuer-has-sidebar .gewerbesteuer-main-content {
   flex: 1 1 100% !important;
   max-width: 100% !important;
 }
 
 body.gewerbesteuer-has-sidebar .gewerbesteuer-sidebar {
   flex: 0 0 auto !important;
   width: 100% !important;
   max-width: 350px !important;
   min-width: auto !important;
 }
}

/* ============================================
   Contact Form 7 Styling
   ============================================ */

/* Form container */
.wpcf7 {
    max-width: 100%;
}

.wpcf7-form {
    max-width: 600px;
}

/* Input fields */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
    width: 100%;
    max-width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    transition: border-color 0.2s;
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(26, 82, 118, 0.1);
}

/* Checkbox container - FIX width issue */
.wpcf7-form .wpcf7-acceptance,
.wpcf7-form .wpcf7-checkbox,
.wpcf7-form p:has(.wpcf7-acceptance),
.wpcf7-form p:has(input[type="checkbox"]) {
    max-width: 600px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
}

.wpcf7-form .wpcf7-list-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    max-width: 100% !important;
}

.wpcf7-form .wpcf7-list-item input[type="checkbox"] {
    flex-shrink: 0 !important;
    margin-top: 4px !important;
    width: 18px !important;
    height: 18px !important;
}

.wpcf7-form .wpcf7-list-item-label {
    flex: 1 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: var(--color-gray-600) !important;
}

/* Submit button */
.wpcf7-form input[type="submit"],
.wpcf7-form .wpcf7-submit {
    background: var(--color-primary);
    color: #fff;
    padding: 12px 28px;
    border: none;
    border-radius: var(--border-radius);
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.wpcf7-form input[type="submit"]:hover,
.wpcf7-form .wpcf7-submit:hover {
    background: var(--color-primary-dark);
}

/* Error messages */
.wpcf7-not-valid-tip {
    color: var(--color-error);
    font-size: var(--font-size-sm);
    margin-top: 4px;
}

.wpcf7-response-output {
    padding: 12px 16px;
    border-radius: var(--border-radius);
    margin-top: var(--spacing-4);
}

.wpcf7-mail-sent-ok {
    border-color: var(--color-success);
    background: rgba(39, 174, 96, 0.1);
    color: var(--color-success);
}