/*
Theme Name: Sky-Beige Software Theme
Author: Senior WP Developer
Description: Modernes, helles B2B/SaaS Theme in Skyblue, Beige und Weiß.
Version: 1.0
Text Domain: skybeige
*/

:root {
    --color-primary: #3b82f6; /* Modernes Skyblue */
    --color-primary-hover: #2563eb;
    --color-bg-light: #ffffff; /* Weiß */
    --color-bg-beige: #fdfbf7; /* Helles, modernes Beige */
    --color-text-main: #1f2937; /* Dunkelgrau für Lesbarkeit */
    --color-text-muted: #6b7280;
    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --transition: all 0.3s ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-main); background-color: var(--color-bg-light); color: var(--color-text-main); line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { color: var(--color-text-main); font-weight: 700; line-height: 1.2; margin-bottom: 1rem; }
a { color: var(--color-primary); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--color-primary-hover); }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
img { max-width: 100%; height: auto; display: block; }

/* Header */
.site-header { background-color: var(--color-bg-light); border-bottom: 1px solid #e5e7eb; position: sticky; top: 0; z-index: 100000; padding: 1rem 0; }
.header-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.site-title { font-size: 1.5rem; font-weight: 700; color: var(--color-primary); }

/* Animated Hamburger Icon */
.menu-toggle { display: none; background: transparent; border: none; cursor: pointer; z-index: 10000; position: relative; padding: 0; width: 30px; height: 24px; flex-direction: column; justify-content: space-between; align-items: center; }
.hamburger-line { width: 100%; height: 3px; background-color: var(--color-primary); border-radius: 10px; transition: all 0.3s cubic-bezier(0.77, 0.2, 0.05, 1.0); position: relative; transform-origin: left center; }
.menu-toggle.is-active .hamburger-line:nth-child(1) { transform: rotate(45deg) translateY(-1px); }
.menu-toggle.is-active .hamburger-line:nth-child(2) { opacity: 0; }
.menu-toggle.is-active .hamburger-line:nth-child(3) { transform: rotate(-45deg) translateY(1px); }

/* Navigation & Submenus (Desktop) */
.main-navigation { display: block; }
.main-navigation ul { list-style: none; display: flex; gap: 2rem; margin: 0; padding: 0; align-items: center; }
.main-navigation li { position: relative; }
.main-navigation a { color: var(--color-text-main); font-weight: 500; display: block; }
.main-navigation a:hover { color: var(--color-primary); }
.main-navigation .sub-menu { display: none; position: absolute; top: 100%; left: 0; background-color: var(--color-bg-light); box-shadow: 0 4px 6px rgba(0,0,0,0.1); min-width: 200px; z-index: 99999; border-radius: 0.375rem; border: 1px solid #e5e7eb; padding: 0.5rem 0; }
.main-navigation li:hover > .sub-menu, .main-navigation li:focus-within > .sub-menu { display: block; }
.main-navigation .sub-menu li { width: 100%; }
.main-navigation .sub-menu a { padding: 0.5rem 1rem; font-size: 0.875rem; }
.main-navigation .sub-menu a:hover { background-color: var(--color-bg-beige); }
.main-navigation .sub-menu .sub-menu { top: 0; left: 100%; }

.btn { display: inline-block; background-color: var(--color-primary); color: #fff; padding: 0.75rem 1.5rem; border-radius: 0.375rem; font-weight: 600; text-align: center; border: none; cursor: pointer; transition: var(--transition); }
.btn:hover { background-color: var(--color-primary-hover); color: #fff; }

/* Layouts */
.site-main { padding: 4rem 0; background-color: var(--color-bg-beige); min-height: 60vh; }

/* Blog Grid */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; }
.post-card { background: var(--color-bg-light); border-radius: 0.5rem; padding: 2rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); }
.post-title { font-size: 1.25rem; margin-bottom: 0.5rem; }

/* Single Software Product */
.product-hero { background-color: var(--color-bg-light); padding: 4rem 0; border-bottom: 1px solid #e5e7eb; }
.product-hero-inner { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
@media(min-width: 768px) { .product-hero-inner { grid-template-columns: 1fr 1fr; } }
.product-badge { display: inline-block; background-color: #dbeafe; color: var(--color-primary); padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 600; margin-bottom: 1rem; text-transform: uppercase; }

/* Footer */
.site-footer { background-color: var(--color-bg-light); padding: 4rem 0 2rem; border-top: 1px solid #e5e7eb; color: var(--color-text-muted); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 3rem; margin-bottom: 3rem; }
.footer-column h3 { color: var(--color-text-main); font-size: 1.125rem; margin-bottom: 1.5rem; }
.footer-column ul { list-style: none; }
.footer-column ul li { margin-bottom: 0.75rem; }
.footer-column a { color: var(--color-text-muted); }
.footer-column a:hover { color: var(--color-primary); }
.footer-bottom { text-align: center; padding-top: 2rem; border-top: 1px solid #e5e7eb; font-size: 0.875rem; }

/* Off-Canvas Backdrop Overlay */
.menu-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.5); z-index: 9998; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
body.menu-open .menu-overlay { opacity: 1; visibility: visible; }

/* Responsive Adjustments (Off-Canvas Menu) */
@media (max-width: 768px) {
    .header-inner { flex-direction: row; }
    .menu-toggle { display: flex; } /* Show animated hamburger */
    
    body.menu-open { overflow: hidden; } /* Lock scroll when open */

    /* Off-Canvas Panel sliding from right */
    .main-navigation { 
        display: block; 
        position: fixed; 
        top: 0; 
        right: 0; 
        width: 320px; 
        max-width: 80vw; 
        height: 100vh; 
        background-color: var(--color-bg-light); 
        box-shadow: -5px 0 15px rgba(0,0,0,0.1); 
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1); 
        z-index: 9999; 
        padding-top: 5rem; 
        overflow-y: auto;
    }
    
    body.menu-open .main-navigation, .main-navigation.toggled { transform: translateX(0); } /* Slide in */
    
    .main-navigation ul { flex-direction: column; gap: 0; align-items: flex-start; padding: 0 1.5rem; }
    .main-navigation li { width: 100%; }
    .main-navigation a { padding: 1rem 0; border-bottom: 1px solid #f3f4f6; width: 100%; font-size: 1.1rem; }
    
    /* Mobile Submenus accordion style */
    .main-navigation .sub-menu { display: block; position: static; box-shadow: none; border: none; padding-left: 1.5rem; background: none; margin-bottom: 0; }
    .main-navigation .sub-menu a { border-bottom: 1px solid #f3f4f6; padding: 0.75rem 0; font-size: 0.95rem; color: var(--color-text-muted); }

    .site-main { padding: 2rem 0; }
    .product-hero { padding: 2rem 0; }
    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }
    .container { padding: 0 15px; }
    .site-title { font-size: 1.25rem; }
}