/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/
/*
------------------------------------------------------
 Global Responsive Section Styling mit CSS-Variablen
 Target Class: .vogele_base_section
------------------------------------------------------
*/

:root {
  /* Basiswerte (alle Devices) */
  --base-max-width: 1200px;
  --base-padding: 25px;

  /* Breitbild ≥ 2400px */
  --widescreen-max-width: 2400px;
  --widescreen-padding: 75px;

  /* Laptop 1366px – 2399px */
  --laptop-max-width: 1150px;
  --laptop-padding: 75px;

  /* Tablet Querformat 1200px – 1365px */
  --tablet-landscape-max-width: 1000px;
  --tablet-landscape-padding: 50px;

  /* Tablet Hochformat 1024px – 1199px */
  --tablet-portrait-max-width: 800px;
  --tablet-portrait-padding: 50px;

  /* Mobil Querformat 768px – 1023px */
  --mobile-landscape-max-width: 600px;
  --mobile-landscape-padding: 25px;

  /* Mobil Hochformat bis 767px */
  --mobile-portrait-max-width: 300px;
  --mobile-portrait-padding: 50px;
}

/* Basis-Styling für alle Devices */
.vogele_base_section .e-con-inner {
  width: 100%;
  max-width: var(--base-max-width);
  margin: 0 auto;
  padding: var(--base-padding);
  box-sizing: border-box;
}

/* Breitbild ≥ 2400px */
@media (min-width: 2400px) {
  .vogele_base_section .e-con-inner {
    max-width: var(--widescreen-max-width)!important;
    padding-top: var(--widescreen-padding)!important;
    padding-bottom: var(--widescreen-padding)!important;
  }
}

/* Laptop 1366px – 2399px */
@media (min-width: 1366px) and (max-width: 2399px) {
  .vogele_base_section .e-con-inner {
    max-width: var(--laptop-max-width)!important!important;
    padding-top: var(--laptop-padding)!important;
    padding-bottom: var(--laptop-padding)!important;
  }
}

/* Tablet Querformat 1200px – 1365px */
@media (min-width: 1200px) and (max-width: 1365px) {
  .vogele_base_section .e-con-inner {
    max-width: var(--tablet-landscape-max-width)!important;
    padding-top: var(--tablet-landscape-padding)!important;
	padding-bottom: var(--tablet-landscape-padding)!important;  
  }
}

/* Tablet Hochformat 1024px – 1199px */
@media (min-width: 1024px) and (max-width: 1199px) {
  .vogele_base_section .e-con-inner {
    max-width: var(--tablet-portrait-max-width)!important;
    padding-top: var(--tablet-portrait-padding)!important;
	padding-bottom: var(--tablet-portrait-padding)!important;  
  }
}

/* Mobil Querformat 768px – 879px */
@media (min-width: 768px) and (max-width: 879px) {
  .vogele_base_section .e-con-inner {
    max-width: var(--mobile-landscape-max-width)!important;
    padding-top: var(--mobile-landscape-padding)!important;
	padding-bottom: var(--mobile-landscape-padding)!important;  
  }
}

/* Mobil Hochformat bis 767px */
@media (max-width: 767px) {
  .vogele_base_section .e-con-inner {
    max-width: var(--mobile-portrait-max-width)!important;
    padding-top: var(--mobile-portrait-padding)!important;
	padding-bottom: var(--mobile-landscape-padding)!important;  
  }
}