/**
 * components.css — Grid/Layout rules + component styles
 * Split from style.css 2026-04-02
 */

/* =========================================
   GRID / LAYOUT
   ========================================= */

.elementor-column-gap-default>.elementor-column>.elementor-element-populated {
    padding: unset;
}
#technikpr .elementor-element-populated:not(.elementor-element-populated .elementor-element-populated) {
  /*padding: 0px var(--gridstrength) 0px var(--gridstrength);*/
  max-width: calc(100vw - (2 * var(--gridstrength)));
  margin: 0 auto;
}
#technikpr .elementor-container .elementor-column .elementor-element-populated .elementor-element-populated {
	/* damit wird das manuelle Paddding unterbunden */
  padding: 0px var(--gridstrength) 0px var(--gridstrength);
}
#technikpr section.qodef-elementor-content-grid > .elementor-container {
	width: calc(100vw - (2 * var(--gridstrength)));
  max-width: calc(var(--content-max-width) - (2 * var(--gridstrength)));
}
#technikpr #qodef-page-footer-bottom-area .qodef-content-full-width {
  width: calc(100vw - (2 * var(--gridstrength)));
  max-width: calc(var(--content-max-width) - (2 * var(--gridstrength)));
  margin: 0 auto;
  padding: 0;
}
#technikpr .qodef-content-grid {
  width: calc(100vw - (2 * var(--gridstrength)));
}
#technikpr .qodef-content-grid {
  width: calc(100vw - (2 * var(--gridstrength)));
  max-width: 1872px;
  margin: 0 auto;
}
#technikpr .elementor-section.elementor-section-boxed > .elementor-container {
  /*max-width: calc(var(--content-max-width) - (2 * var(--gridstrength)));*/
}
#technikpr #qodef-page-inner {
  padding: 48px 0;
}
@media only screen and (min-width: 1441px) {
  /* Grid-Theme-Anpassung */
  #technikpr.qodef-content-grid-1200 section.qodef-elementor-content-grid > .elementor-container, #technikpr.qodef-content-grid-1400 section.qodef-elementor-content-grid > .elementor-container {
    max-width: calc(var(--content-max-width) - (2 * var(--gridstrength))) !important;
    width: calc(100vw - (2 * var(--gridstrength)));
  }
  #technikpr.qodef-content-grid-1200 .qodef-content-grid, #technikpr.qodef-content-grid-1400 .qodef-content-grid {
    max-width: calc(var(--content-max-width) - (2 * var(--gridstrength))) !important;
    width: calc(100vw - (2 * var(--gridstrength)));
  }
}
@media (max-width: 1024px) {
  #technikpr .elementor-element-populated:not(.elementor-element-populated .elementor-element-populated){
    /*padding: 0px var(--gridstrength) 0px var(--gridstrength);*/
   /* max-width: calc(100vw - (2 * var(--gridstrength)));*/
    margin: 0 auto;
  }
	#technikpr .elementor-element-populated:not(.elementor-element-populated .elementor-element-populated){/* top level */}
}
@media only screen and (min-width: 1972px) {
  #technikpr .elementor-element-populated:not(.elementor-element-populated .elementor-element-populated) {
    max-width: 1872px;
  }
}
#technikpr  .elementor-section.elementor-section-boxed > .elementor-container
 {
    max-width: 1872px;
}

/* Problem: Tablet: */
section.qodef-elementor-content-grid>.elementor-container, section.qodef-elementor-content-grid>.elementor-element {
    width: unset;
}
section.qodef-elementor-content-grid>.elementor-container, section.qodef-elementor-content-grid>.elementor-element {
    width: unset;
}
#technikpr .elementor-element-populated:not(.elementor-element-populated .elementor-element-populated)
 {
	 /* #technikpr .elementor-element > .elementor-element-populated*/
    /*padding: unset;*/
}

/* =========================================
   LOGO
   ========================================= */

#technikpr #qodef-page-header .qodef-header-logo-link img {
  height: 100px !important;
	    padding: 12px;
}
#technikpr #qodef-page-header .qodef-header-logo-link img {
    /*height: 65px !important;*/
}
a.qodef-header-logo-link.qodef-height--set {height: 75px !important}

/* =========================================
   BODY & HEADING COLORS
   ========================================= */

body#technikpr {
  color: var(--black);
  color: var(--grey-50);
}
#technikpr .qodef-h1, #technikpr h1, #technikpr .qodef-h2, #technikpr h2, #technikpr .qodef-h3, #technikpr h3, #technikpr .qodef-h4, #technikpr h4, #technikpr .qodef-h5, #technikpr h5 {
  color: var(--grey-80);
}

/* =========================================
   NAVIGATION
   ========================================= */

#technikpr .qodef-header-navigation > ul > li > a {
  color: var(--grey-80);
}
#technikpr .qodef-header-navigation > ul > li > a:hover > span {
  color: var(--black) !important;
}
#technikpr .sub-menu a:hover {
  color: var(--black) !important;
  font-weight: 600;
}
#technikpr .qodef-header-navigation > ul > li.qodef-menu-item--narrow ul li > a {
  font-family: 'Open Sans', sans-serif;
  color: var(--grey-80);
}
#technikpr .qodef-header-navigation > ul > li.qodef-menu-item--narrow ul:not(.qodef-drop-down--right) li > a:before {
  height: 6px;
  width: 12px;
  background: var(--technikpr-green);
  border-radius: 24%;
  top: calc(50% - 3px);
}

/* =========================================
   ARROWS / TEASER
   ========================================= */

#technikpr .qodef-banner .qodef-m-arrow {
  color: var(--technikpr-green);
  border-color: var(--technikpr-green);
}
#technikpr .qodef-banner .qodef-m-arrow:hover {
  color: var(--white);
  background-color: var(--technikpr-green);
  border-color: var(--technikpr-green);
}
#technikpr .qodef-banner .qodef-m-arrow:hover > span {
  color: var(--white) !important;
}

/* =========================================
   BUTTONS
   ========================================= */

#technikpr .qodef-image-with-text.qodef-layout--boxed-with-button .qodef-button {
  color: var(--technikpr-green);
  border-top: 1px solid var(--technikpr-green);
}
#technikpr .qodef-image-with-text.qodef-layout--boxed-with-button .qodef-button:hover {
  background-color: var(--technikpr-green);
}
#technikpr .qodef-button.qodef-layout--filled.qodef-html--link {
  color: var(--white);
  background-color: var(--technikpr-green);
}
#technikpr .qodef-button.qodef-layout--filled.qodef-html--link:hover {
  color: var(--white);
  background-color: var(--grey-80);
  border-top: 1px solid var(--grey-80);
}

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

#technikpr #qodef-page-footer-top-area {
  background-color: var(--grey-10);
  border-top: 0 solid var(--grey-80);
}
#technikpr #qodef-page-footer .widget {
  color: var(--grey-40);
}
#technikpr #qodef-page-footer .widget a {
  color: var(--grey-80);
}
#technikpr #qodef-page-footer .widget a:hover {
  color: var(--black);
}
#technikpr #qodef-page-footer .qodef-icon-ionicons.qodef-icon:before {
  color: var(--black);
}
#technikpr #qodef-page-footer-bottom-area {
  background-color: var(--white);
  border-top: 0 solid var(--white);
}
#technikpr footer .logo {
  max-width: 300px;
  width: 36.75%;
}

/* =========================================
   HEADER
   ========================================= */

#technikpr .qodef-header--standard #qodef-page-header-inner {
  padding-left: 0;
  padding-right: 0;
}
#technikpr .qodef-header--standard #qodef-page-header-inner {
  padding-left: 0;
  padding-right: 0;
}

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

#technikpr .elementor-column-gap-default > .elementor-column > .elementor-element-populated {
  /*padding: 0;*/
}

/* =========================================
   METANAVIGATION
   ========================================= */

#menu-metanavigation {
  display: flex;
  justify-content: flex-end;
}
#menu-metanavigation .menu-item {
  padding-left: 24px;
}

/* =========================================
   MISC
   ========================================= */

#technikpr .qodef-m-subtitle {font-size: 16px;}

/* =========================================
   TESTIMONIALS
   ========================================= */

#technikpr .qodef-testimonials-list .qodef-e-author-name {
    font-size: calc((var(--p-min-desktop) * 1px + (var(--p-max-desktop) - var(--p-min-desktop)) * ((100vw - var(--typo-vw-desktop-min) * 1px) / (var(--typo-vw-desktop-max) - var(--typo-vw-desktop-min)))) * var(--scalefactor-font-size));
    line-height: var(--line-height-base, 1.5);
    font-weight: 600;
}

#technikpr .qodef-testimonials-list .qodef-e-author-job {
    font-size: calc((var(--p-min-desktop) * 1px + (var(--p-max-desktop) - var(--p-min-desktop)) * ((100vw - var(--typo-vw-desktop-min) * 1px) / (var(--typo-vw-desktop-max) - var(--typo-vw-desktop-min)))) * var(--scalefactor-font-size));
    line-height: var(--line-height-base, 1.5);
    font-weight: 400;
}

#technikpr .qodef-testimonials-list .swiper-pagination-bullet::after {
    background-color: var(--grey-40);
}

#technikpr .qodef-testimonials-list .swiper-pagination-bullet-active::after {
    background-color: var(--technikpr-green);
}

.qodef-testimonials-list .qodef-e-author .qodef-e-author-name {
    margin: 0;
}

/* =========================================
   CLIENTS
   ========================================= */

#technikpr .qodef-clients-list .qodef-e-inner {
    background-color: var(--white, #ffffff);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#technikpr .qodef-clients-list .qodef-e-inner:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* =========================================
   PAGE HERO: hide theme title when hero is active
   ========================================= */
.has-hero .qodef-page-title {
    display: none !important;
}

/* =========================================
   FORMIDABLE FORMS — career-style buttons + green focus
   Added 2026-05-04. Brings Formidable forms (e.g. job application
   "Apply Now" form ID 2) into visual unity with .tpr-career-single__btn:
   - Submit button: green #8EBF1D, asymmetric border-radius 0/8px,
     padding 12px 24px, 15px/600 Open Sans
   - Inputs: green focus border + soft green shadow ring
   ========================================= */

/* --- Submit button --- */
#technikpr .frm_forms .frm_button_submit,
#technikpr .frm_forms button.frm_button_submit,
#technikpr .frm_forms button.frm_final_submit,
#technikpr .with_frm_style .frm_button_submit,
#technikpr .with_frm_style button.frm_final_submit {
    background: var(--technikpr-green) !important;
    background-image: none !important;
    color: var(--white) !important;
    border: 0 !important;
    border-radius: 0 8px !important;
    padding: 12px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    font-family: 'Open Sans', sans-serif !important;
    line-height: 1.73 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background 0.2s;
}
#technikpr .frm_forms .frm_button_submit:hover,
#technikpr .frm_forms button.frm_button_submit:hover,
#technikpr .frm_forms button.frm_final_submit:hover,
#technikpr .frm_forms .frm_button_submit:focus,
#technikpr .frm_forms button.frm_final_submit:focus {
    background: var(--grey-80) !important;
    color: var(--white) !important;
}

/* --- Input / textarea / select focus state (green) --- */
#technikpr .frm_forms input[type="text"],
#technikpr .frm_forms input[type="email"],
#technikpr .frm_forms input[type="tel"],
#technikpr .frm_forms input[type="url"],
#technikpr .frm_forms input[type="number"],
#technikpr .frm_forms input[type="password"],
#technikpr .frm_forms input[type="search"],
#technikpr .frm_forms textarea,
#technikpr .frm_forms select {
    transition: border-color 0.15s, box-shadow 0.15s;
}
#technikpr .frm_forms input[type="text"]:focus,
#technikpr .frm_forms input[type="email"]:focus,
#technikpr .frm_forms input[type="tel"]:focus,
#technikpr .frm_forms input[type="url"]:focus,
#technikpr .frm_forms input[type="number"]:focus,
#technikpr .frm_forms input[type="password"]:focus,
#technikpr .frm_forms input[type="search"]:focus,
#technikpr .frm_forms textarea:focus,
#technikpr .frm_forms select:focus {
    outline: none !important;
    border-color: var(--technikpr-green) !important;
    box-shadow: 0 0 0 3px rgba(142, 191, 29, 0.15) !important;
}

/* --- Dropzone (file upload) hover/active accent --- */
#technikpr .frm_forms .frm_dropzone:hover,
#technikpr .frm_forms .frm_dropzone.frm_dragover,
#technikpr .frm_forms .frm_dropzone:focus-within {
    border-color: var(--technikpr-green) !important;
}

/* --- Required asterisk in green --- */
#technikpr .frm_forms .frm_required {
    color: var(--technikpr-green);
}

/* =========================================
   HEADER + STICKY — Navigation zentrieren
   Both normal header (#qodef-page-header-inner) and sticky header use
   the same 3-slot grid with symmetric 1fr columns so the navigation
   sits exactly in the container center, independent of logo or
   social-block widths.
   ========================================= */

@media (min-width: 1025px) {
    .qodef-header-sticky .qodef-header-sticky-inner,
    #qodef-page-header-inner {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }
    .qodef-header-sticky .qodef-header-sticky-inner > .qodef-header-logo-link,
    #qodef-page-header-inner > .qodef-header-logo-link {
        grid-column: 1;
        justify-self: start;
    }
    .qodef-header-sticky .qodef-header-sticky-inner > .qodef-header-navigation,
    #qodef-page-header-inner > .qodef-header-navigation {
        grid-column: 2;
    }
    .qodef-header-sticky .qodef-header-sticky-inner > .qodef-widget-holder,
    #qodef-page-header-inner > .qodef-widget-holder {
        grid-column: 3;
        justify-self: end;
    }
}