/*
Theme Name: kaos
Author: Dennis Hüttner, Oliver Schwarz, kaos werbeagentur
Author URI: kaos.de
Description: Bootstrap - Basis-Version - MODERNIZED with CSS Variables
Version: 2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/*
KAOS Werbeagentur - Complete Modern CSS Variables System
Integrated directly into theme - replaces old hardcoded colors
Author: Manus AI
Date: 2025-09-25
*/

/* ===== CSS CUSTOM PROPERTIES (CSS Variables) ===== */
:root {
  /* === PRIMARY BRAND COLORS === */
  --kaos-primary-green: #d1eb0d;     /* Main color - Green/Yellow */
  --kaos-primary-blue: #A2C1C4;      /* Secondary color - Blue */
  --kaos-primary-beige: #E0DBC7;     /* Accent color - Beige */
  
  /* === NEUTRAL COLORS === */
  --kaos-white: #ffffff;             /* Pure White */
  --kaos-black: #000000;             /* Pure Black */
  --kaos-dark-grey: #383838;         /* Dark Grey for UI elements */
  --kaos-medium-grey: #8e8e8e;       /* Medium Grey */
  --kaos-light-grey: #e9e9e9;        /* Light Grey */
  --kaos-very-light-grey: #f6f6f7;   /* Very Light Grey */
  --kaos-border-grey: #ddd;          /* Border color */
  --kaos-subtle-grey: #dbdbdb;       /* Subtle Grey */
  --kaos-background-grey: #EFEFEF;   /* Background Grey */
  
  /* === FUNCTIONAL COLORS === */
  --kaos-error: #991200;             /* Error color - Red */
  --kaos-success: #28a745;           /* Success color - Green */
  --kaos-warning-orange: #f5a623;    /* Warning color - Orange */
  --kaos-info: #17a2b8;              /* Info color - Cyan */
  
  /* === TRANSPARENCIES === */
  --kaos-shadow-light: rgba(0, 0, 0, 0.05);   /* Very light shadow */
  --kaos-shadow-subtle: rgba(0, 0, 0, 0.1);   /* Subtle shadow */
  --kaos-shadow-medium: rgba(0, 0, 0, 0.2);   /* Medium shadow */
  --kaos-shadow-strong: rgba(0, 0, 0, 0.4);   /* Strong shadow */
  --kaos-shadow-dark: rgba(0, 0, 0, 0.6);     /* Dark shadow */
  --kaos-overlay: rgba(0, 0, 0, 0.8);         /* Overlay for modals */
  
  /* === BUTTON SYSTEM === */
  --kaos-btn-primary-bg: var(--kaos-primary-green);
  --kaos-btn-primary-text: var(--kaos-black);
  --kaos-btn-primary-border: var(--kaos-primary-green);
  --kaos-btn-primary-hover-bg: #b8d20a;  /* 15% darker */
  
  /* === SHADOW SYSTEM === */
  --kaos-shadow-sm: 0 1px 2px var(--kaos-shadow-light);
  --kaos-shadow-md: 0 4px 6px var(--kaos-shadow-subtle);
  --kaos-shadow-lg: 0 10px 15px var(--kaos-shadow-medium);
  --kaos-shadow-xl: 0 20px 25px var(--kaos-shadow-medium);
  --kaos-shadow-box: 0px 20px 20px -10px var(--kaos-shadow-medium);
  
  /* === LEGACY COMPATIBILITY === */
  --kaos-green: yellow;  /* User customized */
  --kaos-blue: var(--kaos-primary-blue);
  --kaos-grey: var(--kaos-background-grey);
  --kaos-beige: var(--kaos-primary-beige);
}

/* ===== MODERN BUTTON SYSTEM ===== */
.ult_price_action_button,
.cf7mls_next.action-button,
.wpcf7-submit,
button[type="submit"],
input[type="submit"],
.btn,
.button {
  display: inline-block;
  padding: 12px 24px;
  border: 2px solid transparent;
  border-radius: 4px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: var(--kaos-btn-primary-bg) !important;
  color: var(--kaos-btn-primary-text) !important;
  border-color: var(--kaos-btn-primary-border) !important;
}

.ult_price_action_button:hover,
.cf7mls_next.action-button:hover,
.wpcf7-submit:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.btn:hover,
.button:hover {
  background-color: var(--kaos-btn-primary-hover-bg) !important;
  transform: translateY(-2px);
  box-shadow: var(--kaos-shadow-md);
}

/* ===== MODERNIZED EXISTING STYLES ===== */

/* Landingpage Optimization */
.header-cta .wpcf7 .fieldset-cf7mls.cf7mls_current_fs { height: 140px; }
.benefits-list-orange p { color: var(--kaos-green); font-weight: 700; }
.kleine-auflistung li { margin-bottom: 15px !important; }
.kurt-block-cta { height: auto; overflow: visible; }
.kurt-block-cta .freisteller img{ max-width: 300px; position: relative; left: -90px; margin-top: -180px; width: 260px; }
.listbox-intro p { margin-bottom: 8px !important; }
.listbox-intro strong { color: var(--kaos-green); }
.vorteile-useblock .ft20px p { text-align: center; }
.benefits .wpb_single_image img { width: 100% !important; }

/* Comparison Table */
.vergleichstabelle { text-align: center; font-size: 65%; line-height: 120%; }

/* Support Packages */
.page-id-8315 .ult_design_3 .ult_price_body_block { background: var(--kaos-green) !important; }
.page-id-8315 .ult_design_3 .ult_pricing_table .ult_price_link .ult_price_action_button { border-radius: 0; padding: 10px 20px; background: var(--kaos-green) !important; }
.page-id-8315 .ult_pricing_table:hover { box-shadow: 0 0 30px var(--kaos-shadow-medium); }
.page-id-8315 .ult_pricing_table .ult_pricing_heading { padding-top: 30px; }
.page-id-8315 .ult_pricing_table .ult_pricing_heading h3 { font-weight: 700; font-size: 140%; }

/* Mega Dropdown */
.mega-dropdown-menu { box-shadow: var(--kaos-shadow-md); }

/* TOC Container */
#toc_container { width: 100% !important; }

/* Contact Form 7 Multi-Step */
.cf7mls_next.action-button {
    background-color: var(--kaos-blue) !important;
    color: var(--kaos-black) !important;
}
.cf7mls_next.action-button:hover {
    opacity: 1;
    filter: brightness(75%);
}

/* AIO Icon Description */
.aio-icon-description {
    font-size: 18px;
    line-height: 26px;
}

/* Form Styling */
.form-row .datenschutz { margin-top: 20px; }
.wpcf7-acceptance span.wpcf7-list-item { line-height: 90%; }
.wpcf7-acceptance span.wpcf7-list-item-label { display: inline !important; }

/* Visual Composer Accordion */
body .vc_tta-color-orange.vc_tta-style-flat .vc_tta-panel .vc_tta-panel-heading { 
    background: var(--kaos-green) !important; 
    color: var(--kaos-white) !important; 
}

/* Content Styling */
.headlargetext { font-size: 175%; text-transform: uppercase; line-height: 125% !important; }
.headlargetext a { color: var(--kaos-dark-grey) !important; }
.largetext { display: block; font-size: 135%; line-height: 130%; margin-bottom: 10px; }
span.colored { color: var(--kaos-green); }
.provenexpertbox { padding: 50px 0 40px 0; }

/* Query Teaser */
.querteaser { margin-bottom: 60px; }
.querteaser .vc_column_container { padding: 0; }
.querteaser .e1-bild2 { top: -500px; left: 110px; }
.querteaser .e1-square { top: -140px; left: -85px; }
.querteaser .e1-square.wpb_single_image .vc_single_image-wrapper { width: 100%; }
.querteaser .e1-bild3 { z-index: 800; top: -950px; left: -60px; }

/* Visual Composer Icons */
.vc_icon_element.vc_icon_element-outer .vc_icon_element-inner.vc_icon_element-size-xl .vc_icon_element-icon {
    color: var(--kaos-green);
}

/* SEO Text Bottom */
.textbottom { padding: 50px 0; }
.textbottom p, .textbottom li { font-size: 80%; line-height: 160%; }
.textbottom p { margin-bottom: 25px; }
.textbottom ul li::before { top: 0 !important; }
.textbottom h1, .textbottom h2, .textbottom h3, .textbottom h4, .textbottom h5 { line-height: 110%; font-weight: 500; margin-bottom: 15px; }
.textbottom h1 { font-size: 130%; color: var(--kaos-error); }
.textbottom h2 { font-size: 120%; text-transform: none; }
.textbottom h3, .textbottom h4, .textbottom h5, .textbottom h6 { font-size: 110%; text-transform: none; }

/* YARPP Related Posts */
.yarpp-related a { font-size: 18px; }
.yarpp-related h5 a { font-size: 24px; line-height: 28px; }


/* ===== MODERN TYPOGRAPHY SYSTEM ===== */
h1 {
    font-size: 6.5rem;
    line-height: 0.95;
    font-weight: 500;
    color: var(--kaos-text-primary);
    margin-bottom: 1rem;
}

/* Responsive h1 sizing */
@media (max-width: 768px) {
    h1 {
        font-size: 4rem;
        line-height: 1.1;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 3rem;
        line-height: 1.2;
    }
}

/* Enhanced heading system */
h2 {
    font-size: 3.5rem;
    line-height: 1.1;
    font-weight: 500;
    color: var(--kaos-text-primary);
    margin-bottom: 0.8rem;
}

h3 {
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 500;
    color: var(--kaos-text-primary);
    margin-bottom: 0.6rem;
}

h4 {
    font-size: 2rem;
    line-height: 1.3;
    font-weight: 500;
    color: var(--kaos-text-primary);
    margin-bottom: 0.5rem;
}

h5 {
    font-size: 1.5rem;
    line-height: 1.4;
    font-weight: 500;
    color: var(--kaos-text-primary);
    margin-bottom: 0.4rem;
}

h6 {
    font-size: 1.25rem;
    line-height: 1.4;
    font-weight: 500;
    color: var(--kaos-text-primary);
    margin-bottom: 0.3rem;
}

/* CleverReach Input */
input#haet-cleverreach-LIST_vorname {
    background-color: var(--kaos-white) !important;
    border: 1px solid var(--kaos-light-grey);
    color: var(--kaos-dark-grey);
    width: 100% !important;
    height: auto !important;
    padding: 28px;
    margin: 0px 0px 10px 0px;
    font-size: 20px;
    line-height: 24px;
    font-weight: 300;
    border-radius: 0px;
    box-shadow: var(--kaos-shadow-box);
}