/*
Theme Name:   Hello Elementor Child – Orange.Cleaning
Theme URI:    https://www.orangecleaning.de
Description:  Child-Theme für Hello Elementor – Orange.Cleaning Markenauftritt (gleich3tv GmbH)
Author:       gleich3tv GmbH
Author URI:   https://www.orangecleaning.de
Template:     hello-elementor
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  hello-theme-child
Tags:         elementor, child-theme, cleaning, orange
*/

/* =========================================================
   ORANGE.CLEANING – DESIGN TOKENS
   Basis: OrangeCleaning_StyleGuide.md (Version 1.0, März 2026)
   ========================================================= */

:root {
  /* ── Primärfarben ───────────────────────────────────── */
  --oc-orange:          #F7941D;
  --oc-orange-dark:     #D4751A;
  --oc-orange-light:    #FEF4E6;
  --oc-blue:            #1B75BB;
  --oc-blue-dark:       #145FA0;
  --oc-blue-light:      #E8F3FB;
  --oc-anthrazit:       #1A1A1A;
  --oc-white:           #FFFFFF;

  /* ── Sekundärfarben ─────────────────────────────────── */
  --oc-gray-light:      #F4F4F4;
  --oc-gray:            #777777;
  --oc-gray-dark:       #333333;
  --oc-border-orange:   #FDDCAD;
  --oc-signal-red:      #CC3300;

  /* ── Typografie ─────────────────────────────────────── */
  --oc-font-primary:    Arial, Helvetica, system-ui, sans-serif;
  --oc-line-height:     1.6;
  --oc-letter-spacing:  0.01em;

  /* ── Abstände ────────────────────────────────────────── */
  --oc-space-xs:  0.5rem;
  --oc-space-sm:  1rem;
  --oc-space-md:  1.5rem;
  --oc-space-lg:  2.5rem;
  --oc-space-xl:  4rem;

  /* ── Radien & Schatten ──────────────────────────────── */
  --oc-radius:         4px;
  --oc-radius-lg:      8px;
  --oc-shadow-sm:      0 1px 3px rgba(0,0,0,.08);
  --oc-shadow-md:      0 4px 16px rgba(0,0,0,.10);
  --oc-shadow-lg:      0 8px 32px rgba(0,0,0,.12);

  /* ── Trennlinien ────────────────────────────────────── */
  --oc-divider-orange: 2px solid var(--oc-orange);
  --oc-divider-blue:   1.5px solid var(--oc-blue);
  --oc-divider-light:  1px solid var(--oc-border-orange);
}

/* =========================================================
   RESET & BASE
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--oc-font-primary);
  font-size: 1rem;
  line-height: var(--oc-line-height);
  color: var(--oc-anthrazit);
  background-color: var(--oc-white);
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
}

/* =========================================================
   TYPOGRAFIE
   ========================================================= */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--oc-font-primary);
  font-weight: 700;
  line-height: 1.2;
  color: var(--oc-anthrazit);
  margin-top: 0;
  margin-bottom: var(--oc-space-sm);
}

h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: clamp(1.15rem, 2.5vw, 1.5rem); }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; color: var(--oc-gray); }

p {
  margin-top: 0;
  margin-bottom: var(--oc-space-sm);
  color: var(--oc-anthrazit);
}

a {
  color: var(--oc-blue);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover {
  color: var(--oc-blue-dark);
  text-decoration: underline;
}

strong, b { font-weight: 700; }
em, i { font-style: italic; }

small {
  font-size: 0.85rem;
  color: var(--oc-gray);
}

blockquote {
  border-left: 4px solid var(--oc-orange);
  margin: var(--oc-space-md) 0;
  padding: var(--oc-space-sm) var(--oc-space-md);
  background: var(--oc-orange-light);
  color: var(--oc-anthrazit);
  font-style: italic;
  border-radius: 0 var(--oc-radius) var(--oc-radius) 0;
}

/* ── Claim-Schriftstil ──────────────────────────────── */
.oc-claim,
.site-description {
  font-style: italic;
  color: var(--oc-gray);
  letter-spacing: 0.03em;
}

/* =========================================================
   HEADER & NAVIGATION
   ========================================================= */

.site-header,
header.elementor-location-header,
.e-con.e-parent:first-of-type {
  background-color: var(--oc-white) !important;
  border-bottom: var(--oc-divider-orange);
  box-shadow: var(--oc-shadow-sm);
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Logo */
.site-branding img,
.custom-logo,
.elementor-widget-site-logo img {
  max-height: 60px;
  width: auto;
}

/* Navigation */
.main-navigation,
.elementor-nav-menu {
  font-family: var(--oc-font-primary);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.main-navigation a,
.elementor-nav-menu a,
.elementor-nav-menu .elementor-item {
  color: var(--oc-anthrazit) !important;
  transition: color 0.2s ease;
}

.main-navigation a:hover,
.elementor-nav-menu a:hover,
.elementor-nav-menu .elementor-item:hover {
  color: var(--oc-orange) !important;
  text-decoration: none;
}

.main-navigation .current-menu-item > a,
.elementor-nav-menu .elementor-item.elementor-item-active {
  color: var(--oc-orange) !important;
  border-bottom: 2px solid var(--oc-orange);
}

/* Sub-Menü */
.main-navigation .sub-menu,
.elementor-nav-menu .sub-menu {
  background: var(--oc-white);
  border-top: 3px solid var(--oc-orange);
  box-shadow: var(--oc-shadow-md);
  border-radius: 0 0 var(--oc-radius-lg) var(--oc-radius-lg);
}

.main-navigation .sub-menu a,
.elementor-nav-menu .sub-menu a {
  font-weight: 400 !important;
  text-transform: none;
  padding: 0.5rem 1rem;
}

/* Mobile Burger */
.elementor-menu-toggle {
  color: var(--oc-orange) !important;
}

/* =========================================================
   BUTTONS & CTAs
   ========================================================= */

/* Primärbutton */
.elementor-button,
.wp-block-button__link,
button,
input[type="submit"],
input[type="button"],
.oc-btn,
a.oc-btn {
  font-family: var(--oc-font-primary);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--oc-radius);
  border: none;
  cursor: pointer;
  display: inline-block;
  padding: 0.75rem 1.75rem;
  transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
  text-decoration: none;
}

.elementor-button.elementor-button-link,
.elementor-button,
a.elementor-button,
.oc-btn-primary {
  background-color: var(--oc-orange) !important;
  color: var(--oc-white) !important;
  box-shadow: var(--oc-shadow-sm);
}

.elementor-button.elementor-button-link:hover,
.elementor-button:hover,
a.elementor-button:hover,
.oc-btn-primary:hover {
  background-color: var(--oc-orange-dark) !important;
  color: var(--oc-white) !important;
  transform: translateY(-1px);
  box-shadow: var(--oc-shadow-md);
  text-decoration: none;
}

.elementor-button:active,
.oc-btn-primary:active {
  transform: translateY(0);
  box-shadow: var(--oc-shadow-sm);
}

/* Sekundärbutton */
.oc-btn-secondary,
a.oc-btn-secondary {
  background-color: transparent;
  color: var(--oc-blue) !important;
  border: 2px solid var(--oc-blue) !important;
  box-shadow: none;
}

.oc-btn-secondary:hover,
a.oc-btn-secondary:hover {
  background-color: var(--oc-blue) !important;
  color: var(--oc-white) !important;
  text-decoration: none;
}

/* Elementor-spezifische Button-Styles */
.elementor-button-wrapper .elementor-button {
  background-color: var(--oc-orange);
  color: var(--oc-white);
}
.elementor-button-wrapper .elementor-button:hover {
  background-color: var(--oc-orange-dark);
}

/* =========================================================
   HERO / BANNER SECTION
   ========================================================= */

.oc-hero,
.elementor-section.oc-hero {
  background-color: var(--oc-white);
  padding: var(--oc-space-xl) 0;
  position: relative;
  overflow: hidden;
}

.oc-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--oc-orange) 0%, var(--oc-orange-dark) 100%);
}

.oc-hero-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  color: var(--oc-anthrazit);
  line-height: 1.15;
}

.oc-hero-title span,
.oc-hero-title .highlight {
  color: var(--oc-orange);
}

.oc-hero-subtitle {
  font-size: 1.125rem;
  color: var(--oc-gray);
  line-height: 1.7;
  margin-top: var(--oc-space-sm);
}

/* =========================================================
   CONTENT SECTIONS
   ========================================================= */

.oc-section {
  padding: var(--oc-space-xl) 0;
}

.oc-section-alt {
  background-color: var(--oc-gray-light);
  padding: var(--oc-space-xl) 0;
}

.oc-section-orange {
  background-color: var(--oc-orange);
  padding: var(--oc-space-xl) 0;
  color: var(--oc-white);
}

.oc-section-orange h2,
.oc-section-orange h3,
.oc-section-orange p {
  color: var(--oc-white);
}

.oc-section-blue {
  background-color: var(--oc-blue);
  padding: var(--oc-space-xl) 0;
  color: var(--oc-white);
}

/* Section Headers */
.oc-section-header {
  text-align: center;
  margin-bottom: var(--oc-space-lg);
}

.oc-section-header h2 {
  color: var(--oc-anthrazit);
  position: relative;
  display: inline-block;
  padding-bottom: 0.75rem;
}

.oc-section-header h2::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background-color: var(--oc-orange);
  margin: 0.5rem auto 0;
  border-radius: 2px;
}

.oc-section-header p {
  color: var(--oc-gray);
  font-size: 1.05rem;
  max-width: 600px;
  margin: 0 auto;
}

/* =========================================================
   KARTEN / CARDS
   ========================================================= */

.oc-card {
  background: var(--oc-white);
  border-radius: var(--oc-radius-lg);
  box-shadow: var(--oc-shadow-sm);
  padding: var(--oc-space-md);
  border: 1px solid var(--oc-border-orange);
  transition: box-shadow 0.25s ease, transform 0.2s ease;
}

.oc-card:hover {
  box-shadow: var(--oc-shadow-md);
  transform: translateY(-2px);
}

.oc-card-header {
  background-color: var(--oc-orange);
  color: var(--oc-white);
  font-weight: 700;
  padding: var(--oc-space-sm) var(--oc-space-md);
  margin: calc(-1 * var(--oc-space-md)) calc(-1 * var(--oc-space-md)) var(--oc-space-md);
  border-radius: var(--oc-radius-lg) var(--oc-radius-lg) 0 0;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.oc-card-icon {
  width: 48px;
  height: 48px;
  background: var(--oc-orange-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--oc-space-sm);
  color: var(--oc-orange);
  font-size: 1.5rem;
}

/* =========================================================
   TABELLEN / PREISBLÖCKE
   ========================================================= */

.oc-table,
table.oc-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--oc-font-primary);
  font-size: 0.9375rem;
}

.oc-table thead th {
  background-color: var(--oc-orange);
  color: var(--oc-white);
  font-weight: 700;
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 2px solid var(--oc-orange-dark);
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 0.03em;
}

.oc-table thead th:last-child { text-align: right; }

.oc-table tbody tr:nth-child(odd)  { background-color: var(--oc-white); }
.oc-table tbody tr:nth-child(even) { background-color: var(--oc-orange-light); }

.oc-table tbody tr:hover { background-color: var(--oc-blue-light); }

.oc-table tbody td {
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--oc-border-orange);
  color: var(--oc-anthrazit);
}

.oc-table tbody td:last-child,
.oc-table tbody td.price { text-align: right; font-weight: 700; color: var(--oc-blue); }

/* Summenblock */
.oc-table .row-subtotal td { background-color: var(--oc-blue-light); font-weight: 700; }
.oc-table .row-vat td      { background-color: var(--oc-blue-light); color: var(--oc-gray); }
.oc-table .row-total td    { background-color: var(--oc-blue); color: var(--oc-white); font-weight: 700; font-size: 1.1em; border: none; }
.oc-table .row-total td:last-child { font-size: 1.2em; }

/* =========================================================
   PREISBOXEN (PRICING)
   ========================================================= */

.oc-pricing-box {
  border: 2px solid var(--oc-border-orange);
  border-radius: var(--oc-radius-lg);
  overflow: hidden;
  background: var(--oc-white);
  box-shadow: var(--oc-shadow-sm);
  transition: box-shadow 0.25s ease, transform 0.2s ease;
}

.oc-pricing-box:hover {
  box-shadow: var(--oc-shadow-lg);
  transform: translateY(-3px);
}

.oc-pricing-box.featured {
  border-color: var(--oc-orange);
  border-width: 3px;
}

.oc-pricing-header {
  background-color: var(--oc-orange);
  color: var(--oc-white);
  text-align: center;
  padding: var(--oc-space-md);
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.oc-pricing-price {
  text-align: center;
  padding: var(--oc-space-md);
  border-bottom: 1px solid var(--oc-border-orange);
}

.oc-pricing-price .amount {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--oc-blue);
  line-height: 1;
}

.oc-pricing-price .unit {
  font-size: 0.875rem;
  color: var(--oc-gray);
  display: block;
}

.oc-pricing-features {
  padding: var(--oc-space-md);
  list-style: none;
  margin: 0;
}

.oc-pricing-features li {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--oc-gray-light);
  font-size: 0.9375rem;
  color: var(--oc-anthrazit);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.oc-pricing-features li::before {
  content: '✓';
  color: var(--oc-orange);
  font-weight: 700;
  flex-shrink: 0;
}

.oc-pricing-cta {
  padding: var(--oc-space-sm) var(--oc-space-md);
  text-align: center;
}

/* =========================================================
   INFO BOXEN / ALERTS
   ========================================================= */

.oc-info-box {
  background-color: var(--oc-blue-light);
  border-left: 4px solid var(--oc-blue);
  padding: var(--oc-space-sm) var(--oc-space-md);
  border-radius: 0 var(--oc-radius) var(--oc-radius) 0;
  margin: var(--oc-space-sm) 0;
}

.oc-info-box p { margin: 0; color: var(--oc-blue-dark); }

.oc-highlight-box {
  background-color: var(--oc-orange-light);
  border-left: 4px solid var(--oc-orange);
  padding: var(--oc-space-sm) var(--oc-space-md);
  border-radius: 0 var(--oc-radius) var(--oc-radius) 0;
  margin: var(--oc-space-sm) 0;
}

.oc-highlight-box p { margin: 0; color: var(--oc-anthrazit); }

/* =========================================================
   FORMULARE
   ========================================================= */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
textarea,
select {
  font-family: var(--oc-font-primary);
  font-size: 0.9375rem;
  color: var(--oc-anthrazit);
  background-color: var(--oc-white);
  border: 1.5px solid #CCCCCC;
  border-radius: var(--oc-radius);
  padding: 0.625rem 0.875rem;
  width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  line-height: 1.5;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--oc-blue);
  box-shadow: 0 0 0 3px rgba(27, 117, 187, 0.15);
}

label {
  font-family: var(--oc-font-primary);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--oc-gray-dark);
  display: block;
  margin-bottom: 0.35rem;
  letter-spacing: 0.02em;
}

.required {
  color: var(--oc-signal-red);
  margin-left: 2px;
}

/* CF7 / WPForms / Elementor Forms */
.wpcf7-form .wpcf7-text,
.wpcf7-form .wpcf7-email,
.wpcf7-form .wpcf7-tel,
.wpcf7-form .wpcf7-textarea,
.elementor-field-type-text input,
.elementor-field-type-email input,
.elementor-field-type-tel input,
.elementor-field-type-textarea textarea {
  border: 1.5px solid #CCCCCC !important;
  border-radius: var(--oc-radius) !important;
  font-family: var(--oc-font-primary) !important;
}

.wpcf7-form .wpcf7-text:focus,
.elementor-field-type-text input:focus {
  border-color: var(--oc-blue) !important;
  box-shadow: 0 0 0 3px rgba(27, 117, 187, 0.15) !important;
}

.wpcf7-submit,
.elementor-button[type="submit"] {
  background-color: var(--oc-orange) !important;
  color: var(--oc-white) !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: var(--oc-radius) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 0.75rem 2rem !important;
  cursor: pointer;
  transition: background-color 0.2s ease !important;
}

.wpcf7-submit:hover,
.elementor-button[type="submit"]:hover {
  background-color: var(--oc-orange-dark) !important;
}

/* =========================================================
   SERVICE / FEATURE ICONS
   ========================================================= */

.oc-service-icon {
  width: 64px;
  height: 64px;
  background: var(--oc-orange);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--oc-white);
  font-size: 1.75rem;
  margin: 0 auto var(--oc-space-sm);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.oc-service-icon:hover {
  background-color: var(--oc-orange-dark);
  transform: scale(1.08);
}

/* Trust-Badges / Icons */
.oc-trust-item {
  text-align: center;
  padding: var(--oc-space-sm);
}

.oc-trust-item .number {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--oc-orange);
  line-height: 1;
  display: block;
}

.oc-trust-item .label {
  font-size: 0.875rem;
  color: var(--oc-gray);
  display: block;
  margin-top: 0.25rem;
}

/* =========================================================
   DIVIDERS / TRENNELEMENTE
   ========================================================= */

.oc-divider-orange {
  border: none;
  height: 2px;
  background-color: var(--oc-orange);
  margin: var(--oc-space-md) 0;
}

.oc-divider-blue {
  border: none;
  height: 1.5px;
  background-color: var(--oc-blue);
  margin: var(--oc-space-md) 0;
}

.oc-divider-light {
  border: none;
  height: 1px;
  background-color: var(--oc-border-orange);
  margin: var(--oc-space-sm) 0;
}

/* =========================================================
   FOOTER
   ========================================================= */

.site-footer,
footer.elementor-location-footer {
  background-color: var(--oc-anthrazit);
  color: #CCCCCC;
  font-size: 0.8125rem;
  border-top: var(--oc-divider-blue);
  padding: var(--oc-space-lg) 0 var(--oc-space-sm);
}

.site-footer a,
footer.elementor-location-footer a {
  color: #BBBBBB;
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-footer a:hover,
footer.elementor-location-footer a:hover {
  color: var(--oc-orange);
  text-decoration: none;
}

/* Footer Spaltentitel */
.site-footer h4,
.site-footer h5,
footer.elementor-location-footer h4,
footer.elementor-location-footer h5 {
  color: var(--oc-orange);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(247, 148, 29, 0.3);
}

/* Footer Bottom Bar */
.oc-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: var(--oc-space-md);
  padding-top: var(--oc-space-sm);
  font-size: 0.75rem;
  color: #888888;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Widget titles in footer */
.site-footer .widget-title {
  color: var(--oc-orange);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

/* =========================================================
   ELEMENTOR WIDGET OVERRIDES
   ========================================================= */

/* Heading Widget */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--oc-font-primary);
}

/* Icon List */
.elementor-icon-list-item > .elementor-icon-list-icon i,
.elementor-icon-list-item > .elementor-icon-list-icon svg {
  color: var(--oc-orange);
}

/* Divider */
.elementor-widget-divider .elementor-divider-separator {
  border-top-color: var(--oc-orange);
}

/* Image Box */
.elementor-widget-image-box .elementor-image-box-title {
  color: var(--oc-anthrazit);
}

/* Counter */
.elementor-widget-counter .elementor-counter-number-wrapper {
  color: var(--oc-orange);
  font-weight: 700;
}

/* Testimonial */
.elementor-widget-testimonial .elementor-testimonial-content {
  color: var(--oc-gray-dark);
  font-style: italic;
}

.elementor-widget-testimonial .elementor-testimonial-name {
  color: var(--oc-orange);
  font-weight: 700;
}

/* Progress Bar */
.elementor-progress-bar {
  background-color: var(--oc-orange);
}

.elementor-progress-wrapper {
  background-color: var(--oc-orange-light);
}

/* Accordion */
.elementor-accordion .elementor-tab-title {
  background-color: var(--oc-gray-light);
  color: var(--oc-anthrazit);
  border-bottom: 1px solid var(--oc-border-orange);
}

.elementor-accordion .elementor-tab-title.elementor-active {
  background-color: var(--oc-orange);
  color: var(--oc-white);
}

/* Tabs */
.elementor-tabs .elementor-tab-title {
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.elementor-tabs .elementor-tab-title.elementor-active {
  color: var(--oc-orange);
  border-bottom-color: var(--oc-orange);
}

/* =========================================================
   WORDPRESS CORE BLOCKS (Gutenberg)
   ========================================================= */

.wp-block-button__link {
  background-color: var(--oc-orange);
  color: var(--oc-white);
  border-radius: var(--oc-radius);
}

.wp-block-button__link:hover {
  background-color: var(--oc-orange-dark);
}

.wp-block-separator {
  border-color: var(--oc-orange);
}

.wp-block-quote {
  border-left-color: var(--oc-orange);
  background-color: var(--oc-orange-light);
  padding: 1rem 1.5rem;
}

.wp-block-table thead { background-color: var(--oc-orange); color: var(--oc-white); }
.wp-block-table th    { color: var(--oc-white); font-weight: 700; }
.wp-block-table td    { border-color: var(--oc-border-orange); }

/* =========================================================
   UTILITY KLASSEN
   ========================================================= */

.text-orange  { color: var(--oc-orange) !important; }
.text-blue    { color: var(--oc-blue) !important; }
.text-gray    { color: var(--oc-gray) !important; }
.text-white   { color: var(--oc-white) !important; }
.text-dark    { color: var(--oc-anthrazit) !important; }

.bg-orange    { background-color: var(--oc-orange) !important; }
.bg-blue      { background-color: var(--oc-blue) !important; }
.bg-light     { background-color: var(--oc-gray-light) !important; }
.bg-white     { background-color: var(--oc-white) !important; }
.bg-orange-l  { background-color: var(--oc-orange-light) !important; }
.bg-blue-l    { background-color: var(--oc-blue-light) !important; }

.font-bold    { font-weight: 700 !important; }
.font-normal  { font-weight: 400 !important; }
.text-upper   { text-transform: uppercase !important; letter-spacing: 0.04em !important; }

.shadow-sm    { box-shadow: var(--oc-shadow-sm) !important; }
.shadow-md    { box-shadow: var(--oc-shadow-md) !important; }
.shadow-lg    { box-shadow: var(--oc-shadow-lg) !important; }

.rounded      { border-radius: var(--oc-radius) !important; }
.rounded-lg   { border-radius: var(--oc-radius-lg) !important; }

.border-orange{ border: 2px solid var(--oc-orange) !important; }
.border-blue  { border: 2px solid var(--oc-blue) !important; }

/* Abstände */
.mt-sm  { margin-top: var(--oc-space-sm) !important; }
.mt-md  { margin-top: var(--oc-space-md) !important; }
.mt-lg  { margin-top: var(--oc-space-lg) !important; }
.mb-sm  { margin-bottom: var(--oc-space-sm) !important; }
.mb-md  { margin-bottom: var(--oc-space-md) !important; }
.mb-lg  { margin-bottom: var(--oc-space-lg) !important; }
.pt-sm  { padding-top: var(--oc-space-sm) !important; }
.pt-md  { padding-top: var(--oc-space-md) !important; }
.pt-xl  { padding-top: var(--oc-space-xl) !important; }
.pb-sm  { padding-bottom: var(--oc-space-sm) !important; }
.pb-md  { padding-bottom: var(--oc-space-md) !important; }
.pb-xl  { padding-bottom: var(--oc-space-xl) !important; }
.py-xl  { padding-top: var(--oc-space-xl) !important; padding-bottom: var(--oc-space-xl) !important; }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1024px) {
  :root {
    --oc-space-xl: 3rem;
    --oc-space-lg: 2rem;
  }
}

@media (max-width: 768px) {
  :root {
    --oc-space-xl: 2.5rem;
    --oc-space-lg: 1.75rem;
    --oc-space-md: 1.25rem;
  }

  .oc-section,
  .oc-section-alt,
  .oc-section-orange,
  .oc-section-blue {
    padding: var(--oc-space-lg) 0;
  }

  .oc-pricing-price .amount {
    font-size: 2rem;
  }

  .oc-table {
    font-size: 0.875rem;
  }

  .oc-table thead th,
  .oc-table tbody td {
    padding: 0.5rem 0.625rem;
  }
}

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

/* =========================================================
   PRINT
   ========================================================= */

@media print {
  .site-header,
  .main-navigation,
  .oc-btn,
  .oc-btn-primary,
  .elementor-button {
    display: none !important;
  }

  body {
    font-size: 10pt;
    color: #1A1A1A;
  }

  h1, h2, h3 { page-break-after: avoid; }
  table { page-break-inside: avoid; }

  .oc-table thead th {
    background-color: #F7941D !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}