/*
Theme Name: Herrington Child
Theme URI: http://demo.bravisthemes.com/herrington
Author: Bravis-Themes / eAces
Author URI: https://bravisthemes.com/
Description: Herrington child theme with the eAces brand layer. Header layout and responsive mechanics remain controlled by Herrington and Elementor.
Version: 2.3.0
License: ThemeForest
License URI: https://themeforest.net/licenses
Template: herrington
Text Domain: herrington-child
Requires at least: 5.8
Requires PHP: 7.4
*/
/* Kontakt: hide in desktop header only */
@media (min-width: 1200px) {
#pxl-header-elementor #menu-item-20167 {
display: none !important;
}
}
/* ================================================================
eAces header fix — v2 (REPLACES the earlier block completely)
Tested live at 1201 / 1280 / 1500px. Delete the whole block to revert.
================================================================ */
/* 1. THE GUARANTEE: the header row can never break onto a second line.
(v1 had an extra "> .elementor-element-populated" level that does not
exist on the front end, so this rule silently matched nothing.) */
.elementor-16367 .elementor-element-c720ac3 > .elementor-widget-wrap {
flex-wrap: nowrap !important;
column-gap: 14px;
}
/* 2. Header lines up with the page content (your sections are 1500px). */
.elementor-16367 .elementor-element-b5b7c60 > .elementor-container {
max-width: 1290px !important /* = Inhaltsraster, Logo buendig mit Hero-Titeln */;
}
/* 3. Remove 90px of stacked column padding that did nothing. */
.elementor-16367 .elementor-element-6e7f2d8 > .elementor-widget-wrap,
.elementor-16367 .elementor-element-c720ac3 > .elementor-widget-wrap {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* 4. Drop the old uneven per-widget margins (27 / 0 / 0 / 28px).
The column-gap in rule 1 replaces them with one even rhythm. */
.elementor-16367 .elementor-element-79f7594 > .elementor-widget-container,
.elementor-16367 .elementor-element-a7266b4 > .elementor-widget-container {
margin-left: 0 !important;
}
/* 5. Undo the hand-dragged pixel widths on the flag and search icon
(5%, 40.039px, 43.035px, 77.917px — from an accidental resize-drag). */
.elementor-16367 .elementor-element-cbf697e,
.elementor-16367 .elementor-element-a7266b4 {
width: auto !important;
max-width: none !important;
flex: 0 0 auto !important;
}
/* 6. Only the nav absorbs leftover space. */
.elementor-16367 .elementor-element-79f7594 { flex: 1 1 auto !important; }
/* 7. Language switcher sat 10px above the centre line — its plugin ships
a stray bottom margin. Remove it. */
.elementor-16367 .elementor-element-cbf697e,
.elementor-16367 .elementor-element-cbf697e > * { margin-bottom: 0 !important; }
/* 8. Tighter nav spacing between the burger breakpoint (1201px) and 1500px.
Theme default is 16px per side; 9px here buys the headroom. */
@media (min-width: 1201px) and (max-width: 1500px) {
.elementor-16367 .pxl-menu-primary > li {
margin-left: 9px !important;
margin-right: 9px !important;
}
}
/* 9. "DIREKT INS GESPRÄCH" stays on one line (was wrapping to two). */
.elementor-16367 .elementor-element-7efaa34 .btn { white-space: nowrap; }
/* ================= end eAces header fix ================= */
/* eAces: 'Unser Angebot' hero flush unter dem transparenten Header (entfernt #pxl-main padding-top) */
.page-id-19432 #pxl-main,
.page-id-19530 #pxl-main {
padding-top: 0 !important;
}
/* ===== BR Icon Box Carousel — match top section ===== */
/* icon circle */
.elementor-element-137e239 .pxl-item--inner .icon-box {
background: #1F1B4B !important;
border: none !important;
width: 62px !important;
height: 62px !important;
min-width: 62px !important;
display: flex; align-items: center; justify-content: center;
transition: background-color .35s ease;
}
.elementor-element-137e239 .pxl-item--inner .icon-box i {
color: #fff !important;
font-size: 24px !important;
transition: color .35s ease;
}
/* banana hover on the whole card */
.elementor-element-137e239 .pxl-item--inner:hover .icon-box {
background: #FFF188 !important;
}
.elementor-element-137e239 .pxl-item--inner:hover .icon-box i {
color: #3B1679 !important;
}
/* title */
.elementor-element-137e239 .title-box {
color: #3B1679 !important;
}
/* button */
.elementor-element-137e239 .btn.btn-glossy {
background: #EDE9FE !important;
color: #1F1B4B !important;
text-transform: uppercase;
font-weight: 500 !important;
font-size: 15px !important;
padding: 12px 24px !important;
height: auto !important;
line-height: 1.2 !important;
border-radius: 3px !important;
}
.elementor-element-137e239 .btn.btn-glossy:hover {
background: #1F1B4B !important;
color: #fff !important;
}
.elementor-element-137e239 .btn.btn-glossy::after {
content: "❯";
order: -1;
margin-right: 8px;
position: static !important;
transform: none !important;
}
/* equal-height cards: buttons aligned on one line */
.elementor-element-137e239 .pxl-swiper-slide {
display: flex;
height: auto;
}
.elementor-element-137e239 .pxl-item--inner {
display: flex; flex-direction: column; align-items: center;
width: 100%;
}
.elementor-element-137e239 .btn.btn-glossy {
margin-top: auto !important;
}
/* ==============================================================
Initiative Application page (ID 19530) - form & layout polish v3
Buttons/kicker copied 1:1 from the services page spec.
Safe to delete as one block to revert (see handover doc).
============================================================== */
/* Hero: center content vertically; horizontal padding stays the
theme default 70px, identical to the services hero */
.elementor-element-1284f476{justify-content:center !important;}
/* Left-column image: subtle brand radius */
.elementor-element-1dd04fb{overflow:hidden;border-radius:3px;}
.elementor-element-1dd04fb img{border-radius:3px;width:100%;object-fit:cover;display:block;}
/* Brand accents: yellow marker under the H2, purple links */
.elementor-element-66b154d8::after{content:"";display:block;width:48px;height:4px;background:#FFF188;border-radius:2px;margin-top:14px;}
.elementor-element-78fbe666 a{color:#3B1679;}
/* Form fields: lavender, 3px brand radius */
.elementor-element-5761ed6b .wpcf7-form p{margin:0 0 20px;}
.elementor-element-5761ed6b .wpcf7-form-control-wrap{display:block;}
.elementor-element-5761ed6b input.wpcf7-form-control:not([type=submit]):not([type=file]),
.elementor-element-5761ed6b select.wpcf7-form-control{
width:100%;height:50px;background:#EDE9FE;border:1px solid #EDE9FE;border-radius:3px;
padding:6px 20px;font-family:"DM Sans",sans-serif;font-size:14px;color:#3B1679;
transition:border-color .2s ease,background .2s ease;
}
.elementor-element-5761ed6b textarea.wpcf7-form-control{
width:100%;min-height:200px;background:#EDE9FE;border:1px solid #EDE9FE;border-radius:3px;
padding:16px 20px;font-family:"DM Sans",sans-serif;font-size:14px;color:#3B1679;
resize:vertical;transition:border-color .2s ease,background .2s ease;
}
.elementor-element-5761ed6b .wpcf7-form-control::placeholder{color:#3B1679;opacity:.75;}
.elementor-element-5761ed6b input.wpcf7-form-control:focus,
.elementor-element-5761ed6b select.wpcf7-form-control:focus,
.elementor-element-5761ed6b textarea.wpcf7-form-control:focus{outline:none;border-color:#3B1679;background:#fff;}
/* Select: custom chevron */
.elementor-element-5761ed6b select.wpcf7-form-control{
-webkit-appearance:none;appearance:none;cursor:pointer;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 18px center;padding-right:44px;
}
/* File upload (theme renders custom UI: text input + button) */
.elementor-element-5761ed6b .ia-file-label{
display:block;font-family:"DM Sans",sans-serif;font-size:14px;font-weight:500;
color:#1F1B4B;margin:6px 0 12px;
}
.elementor-element-5761ed6b .pxl-file-upload-wrapper{display:flex;align-items:center;gap:14px;}
.elementor-element-5761ed6b .pxl-file-upload-input{
flex:1;width:auto;height:40px;background:#EDE9FE;border:1px solid #EDE9FE;border-radius:3px;
padding:6px 20px;font-family:"DM Sans",sans-serif;font-size:14px;color:#3B1679;
}
.elementor-element-5761ed6b .pxl-file-upload-input::placeholder{color:#3B1679;opacity:.75;}
/* "Choose File": secondary chip, exact services-button geometry (39px) */
.elementor-element.elementor-element-5761ed6b.elementor-element-5761ed6b .pxl-file-upload-wrapper .pxl-file-upload-button{
flex:0 0 auto;height:auto !important;line-height:15px !important;border-radius:3px !important;
padding:12px 24px !important;background:#EDE9FE !important;color:#1F1B4B !important;border:none !important;
font-family:"DM Sans",sans-serif;font-size:15px !important;font-weight:500;text-transform:uppercase;cursor:pointer;transition:none !important;
}
/* Submit: primary CTA, exact services-button geometry (arrow is part of the label text) */
.elementor-element.elementor-element-5761ed6b.elementor-element-5761ed6b input.wpcf7-submit{
line-height:15px !important;font-size:15px !important;font-weight:500 !important;
font-family:"DM Sans",sans-serif !important;letter-spacing:0 !important;text-transform:uppercase !important;
padding:12px 24px !important;height:auto !important;border:none !important;
border-radius:3px !important;background:#FFF188 !important;color:#1F1B4B !important;cursor:pointer;transition:none !important;
}
/* Validation + response messages */
.elementor-element-5761ed6b .wpcf7-not-valid-tip{font-size:12px;color:#C0392B;margin:6px 0 0 20px;}
.elementor-element-5761ed6b .wpcf7-response-output{border-radius:3px;padding:12px 20px;margin:20px 0 0;font-family:"DM Sans",sans-serif;font-size:14px;}
/* Responsive */
@media (max-width:767px){
.elementor-element-5761ed6b input.wpcf7-submit{width:100%;text-align:left;}
.elementor-element-5761ed6b textarea.wpcf7-form-control{min-height:160px;}
.elementor-element-5761ed6b .pxl-file-upload-wrapper{flex-direction:column;align-items:stretch;gap:10px;}
}
/* Remove theme's 110px bottom gap between content and footer (this page only) */
body.page-id-19530 #pxl-main{padding-bottom:0 !important;}
/* ===== end Initiative Application block ===== */
/* ==============================================================
Shared eAces CF7 form design (opt-in by form ID)
Applied to: f19545 (contact page "Send a message form"),
f10106 ("Contact Form Coporate", Fuer Unternehmen).
NOT applied to f5 "Contact form 1" (footer newsletter) on purpose.
To opt in another form, add its [id*="wpcf7-fXXXX-"] to each
selector group below. Same tokens as the Initiative page block.
============================================================== */
[id*="wpcf7-f19545-"] form p{margin:0 0 20px;}
[id*="wpcf7-f19545-"] .wpcf7-form-control-wrap,
[id*="wpcf7-f10106-"] .wpcf7-form-control-wrap{display:block;}
[id*="wpcf7-f19545-"] input.wpcf7-form-control:not([type=submit]):not([type=file]),
[id*="wpcf7-f19545-"] select.wpcf7-form-control,
[id*="wpcf7-f10106-"] input.wpcf7-form-control:not([type=submit]):not([type=file]),
[id*="wpcf7-f10106-"] select.wpcf7-form-control{
width:100%;height:50px;background:#EDE9FE !important;border:1px solid #EDE9FE !important;
border-radius:3px !important;padding:6px 20px !important;
font-family:"DM Sans",sans-serif;font-size:14px !important;color:#3B1679 !important;
transition:border-color .2s ease,background .2s ease;
}
[id*="wpcf7-f19545-"] textarea.wpcf7-form-control,
[id*="wpcf7-f10106-"] textarea.wpcf7-form-control{
width:100%;min-height:200px;background:#EDE9FE !important;border:1px solid #EDE9FE !important;
border-radius:3px !important;padding:16px 20px !important;
font-family:"DM Sans",sans-serif;font-size:14px !important;color:#3B1679 !important;
resize:vertical;transition:border-color .2s ease,background .2s ease;
}
[id*="wpcf7-f19545-"] .wpcf7-form-control::placeholder,
[id*="wpcf7-f10106-"] .wpcf7-form-control::placeholder{color:#3B1679 !important;opacity:.75;}
[id*="wpcf7-f19545-"] .wpcf7-form-control:focus,
[id*="wpcf7-f10106-"] .wpcf7-form-control:focus{outline:none;border-color:#3B1679 !important;background:#fff !important;}
/* Submit buttons: services-page CTA spec (39px, yellow, uppercase, arrow) */
[id*="wpcf7-f19545-"] input.wpcf7-submit{
line-height:15px !important;font-size:15px !important;font-weight:500 !important;
font-family:"DM Sans",sans-serif !important;letter-spacing:0 !important;text-transform:uppercase !important;
padding:12px 24px !important;height:auto !important;border:none !important;
border-radius:3px !important;background:#FFF188 !important;color:#1F1B4B !important;
cursor:pointer;transition:none !important;
}
[id*="wpcf7-f10106-"] button.wpcf7-submit{
line-height:15px !important;font-size:15px !important;font-weight:500 !important;
font-family:"DM Sans",sans-serif !important;letter-spacing:0 !important;text-transform:uppercase !important;
padding:12px 24px !important;height:auto !important;border:none !important;
border-radius:3px !important;background:#FFF188 !important;color:#1F1B4B !important;
cursor:pointer;transition:none !important;
}
/* Messages */
[id*="wpcf7-f19545-"] .wpcf7-not-valid-tip,
[id*="wpcf7-f10106-"] .wpcf7-not-valid-tip{font-size:12px;color:#C0392B;margin:6px 0 0 20px;}
[id*="wpcf7-f19545-"] .wpcf7-response-output,
[id*="wpcf7-f10106-"] .wpcf7-response-output{border-radius:3px;padding:12px 20px;margin:20px 0 0;font-family:"DM Sans",sans-serif;font-size:14px;}
/* Responsive */
@media (max-width:767px){
[id*="wpcf7-f19545-"] input.wpcf7-submit{width:100%;text-align:left;}
[id*="wpcf7-f10106-"] button.wpcf7-submit{width:100%;}
[id*="wpcf7-f19545-"] textarea.wpcf7-form-control,
[id*="wpcf7-f10106-"] textarea.wpcf7-form-control{min-height:160px;}
}
/* ===== end shared CF7 form design block ===== */
/* ============================================================
eAces – HireZoot Job Listing Styling (Careers page) v2
Brand styling for the wp-job-openings (HireZoot) job listing:
search bar, filter dropdowns, job rows, More-Details link,
pagination. Reference design: Services page + Initiative
Application form.
Colors: Navy #1F1B4B / Purple #3B1679 / Lavender #EDE9FE /
Yellow #FFF188 · Fonts: Syne (titles) / DM Sans (text)
Note: !important is required because the theme skin and the
HireZoot plugin both style these elements with layered rules.
Documented in: "HireZoot – Job Listing Styling" handover guide.
============================================================ */
/* ---------- Search bar ---------- */
body .awsm-job-wrap .awsm-filter-wrap .awsm-job-search {
background-color: #EDE9FE !important;
border: 1px solid transparent !important;
border-radius: 3px !important;
color: #1F1B4B !important;
font-family: "DM Sans", sans-serif !important;
font-size: 14px !important;
height: 50px !important;
padding: 6px 48px 6px 20px !important;
box-shadow: none !important;
transition: border-color .25s ease, background-color .25s ease;
}
body .awsm-job-wrap .awsm-job-search::placeholder { color: #3B1679 !important; opacity: 1; }
body .awsm-job-wrap .awsm-job-search:focus {
border-color: #3B1679 !important;
outline: none !important;
background-color: #F3F0FD !important;
}
body .awsm-job-wrap .awsm-job-search-icon-wrapper i { color: #3B1679 !important; }
/* ---------- Filter dropdowns ---------- */
body .awsm-job-wrap .awsm-filter-option {
-webkit-appearance: none !important;
appearance: none !important;
background-color: #EDE9FE !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%233B1679' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 16px center !important;
background-size: 12px 8px !important;
border: 1px solid transparent !important;
border-radius: 3px !important;
color: #1F1B4B !important;
font-family: "DM Sans", sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
height: 46px !important;
padding: 0 44px 0 16px !important;
cursor: pointer;
transition: border-color .25s ease;
}
body .awsm-job-wrap .awsm-filter-option:hover { border-color: rgba(59, 22, 121, .35) !important; }
body .awsm-job-wrap .awsm-filter-option:focus { border-color: #3B1679 !important; outline: none !important; }
body .awsm-job-wrap .awsm-filter-toggle svg path { fill: #3B1679 !important; }
/* ---------- Job rows ---------- */
body .awsm-job-wrap .awsm-job-listings.awsm-lists { border: 0 !important; }
body .awsm-job-wrap .awsm-lists .awsm-job-listing-item {
background: #fff !important;
border: 1px solid #E3DCF9 !important;
border-radius: 6px !important;
margin-bottom: 16px !important;
padding: 26px 30px !important;
transition: border-color .3s ease, background-color .3s ease,
box-shadow .3s ease, transform .3s ease;
}
body .awsm-job-wrap .awsm-lists .awsm-job-listing-item:hover {
border-color: rgba(59, 22, 121, .45) !important;
background: #FDFCFF !important;
box-shadow: 0 10px 28px rgba(31, 27, 75, .08) !important;
transform: translateY(-2px);
}
/* Job title */
body .awsm-job-wrap .awsm-job-post-title,
body .awsm-job-wrap .awsm-job-post-title a {
font-family: Syne, serif !important;
font-weight: 700 !important;
font-size: 21px !important;
line-height: 1.35 !important;
color: #1F1B4B !important;
text-decoration: none !important;
transition: color .25s ease;
}
body .awsm-job-wrap .awsm-lists .awsm-job-listing-item:hover .awsm-job-post-title a { color: #3B1679 !important; }
/* Meta (category / type / location / start date) */
body .awsm-job-wrap .awsm-job-specification-item,
body .awsm-job-wrap .awsm-job-specification-term {
color: rgba(31, 27, 75, .75) !important;
font-family: "DM Sans", sans-serif !important;
font-size: 13.5px !important;
}
body .awsm-job-wrap .awsm-job-specification-item i { color: #3B1679 !important; }
/* More-Details link: quiet by default, yellow chip on row hover */
body .awsm-job-wrap .awsm-job-more-container a,
body .awsm-job-wrap a.awsm-job-more {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: "DM Sans", sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: .04em !important;
text-transform: uppercase !important;
color: #1F1B4B !important;
text-decoration: none !important;
background: transparent;
border-radius: 3px;
padding: 9px 16px;
transition: background-color .3s ease, color .3s ease;
}
body .awsm-job-wrap .awsm-lists .awsm-job-listing-item:hover a.awsm-job-more {
background: #FFF188 !important;
color: #1F1B4B !important;
}
body .awsm-job-wrap a.awsm-job-more:focus-visible {
outline: 2px solid #3B1679 !important;
outline-offset: 2px;
}
/* Pagination + load more */
body .awsm-job-wrap .awsm-jobs-pagination .page-numbers {
font-family: "DM Sans", sans-serif !important;
color: #1F1B4B !important;
border-radius: 3px;
}
body .awsm-job-wrap .awsm-jobs-pagination .page-numbers.current {
background: #EDE9FE !important;
color: #3B1679 !important;
}
body .awsm-job-wrap .awsm-load-more-main {
font-family: "DM Sans", sans-serif !important;
text-transform: uppercase !important;
background: #FFF188 !important;
color: #1F1B4B !important;
border-radius: 3px !important;
}
/* Empty state */
body .awsm-job-wrap .awsm-jobs-none-container,
body .awsm-job-wrap .awsm-no-jobs {
font-family: "DM Sans", sans-serif !important;
color: #1F1B4B !important;
}
/* ---------- Responsive ---------- */
@media (max-width: 767px) {
body .awsm-job-wrap .awsm-lists .awsm-job-listing-item { padding: 20px !important; }
body .awsm-job-wrap .awsm-job-post-title,
body .awsm-job-wrap .awsm-job-post-title a { font-size: 18px !important; }
body .awsm-job-wrap a.awsm-job-more { padding-left: 0; }
}
/* ---------- Filter dropdowns: Selectric custom UI ---------- */
body .awsm-job-wrap .awsm-selectric {
background: #EDE9FE url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%233B1679' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center !important;
background-size: 12px 8px !important;
border: 1px solid transparent !important;
border-radius: 3px !important;
transition: border-color .25s ease;
}
body .awsm-job-wrap .awsm-selectric .label {
font-family: "DM Sans", sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
color: #1F1B4B !important;
height: 46px !important;
line-height: 46px !important;
margin: 0 44px 0 16px !important;
}
body .awsm-job-wrap .awsm-selectric .button { opacity: 0 !important; }
body .awsm-job-wrap .awsm-selectric-hover .awsm-selectric,
body .awsm-job-wrap .awsm-selectric-focus .awsm-selectric { border-color: rgba(59, 22, 121, .35) !important; }
body .awsm-job-wrap .awsm-selectric-open .awsm-selectric { border-color: #3B1679 !important; }
body .awsm-job-wrap .awsm-selectric-items {
background: #fff !important;
border: 1px solid #E3DCF9 !important;
border-radius: 6px !important;
box-shadow: 0 14px 30px rgba(31, 27, 75, .12) !important;
margin-top: 6px;
overflow: hidden;
}
body .awsm-job-wrap .awsm-selectric-items li {
font-family: "DM Sans", sans-serif !important;
font-size: 14px !important;
color: #1F1B4B !important;
padding: 10px 16px !important;
}
body .awsm-job-wrap .awsm-selectric-items li:hover,
body .awsm-job-wrap .awsm-selectric-items li.highlighted {
background: #F3F0FD !important;
color: #3B1679 !important;
}
body .awsm-job-wrap .awsm-selectric-items li.selected {
background: #EDE9FE !important;
color: #3B1679 !important;
font-weight: 500 !important;
}
/* Inner divider off; stronger title color (beats theme skin) */
body .awsm-job-wrap .awsm-lists .awsm-job-item { border: 0 !important; box-shadow: none !important; background: transparent !important; }
body .awsm-job-wrap .awsm-lists .awsm-job-listing-item .awsm-job-post-title,
body .awsm-job-wrap .awsm-lists .awsm-job-listing-item .awsm-job-post-title a { color: #1F1B4B !important; }
body .awsm-job-wrap .awsm-lists .awsm-job-listing-item:hover .awsm-job-post-title a { color: #3B1679 !important; }
/* ======================= end eAces listing ================== */
/* ==============================================================
eAces – HireZoot Single Job Page: Hero & Seitenrahmen (v2 hell)
Heller Services-Look für den Job-Hero (lavender Schleier, lila
Syne-Titel, Kicker, Stat-Kacheln, Trennlinie) – NUR auf
Job-Detailseiten (body.single-awsm_job_openings). Formular-Styling
liegt in form.php, Beschreibung in main.php.
Ganzen Block löschen = Hero/Rahmen zurücksetzen.
============================================================== */
/* Statische Vorlagen-Elemente auf Job-Seiten ausblenden */
body.single-awsm_job_openings .elementor-element-26b358b{display:none !important;}
body.single-awsm_job_openings .eaces-default-page-subtitle{display:none !important;}
body.single-awsm_job_openings .awsm-jobs-single-title{display:none !important;}
body.single-awsm_job_openings .elementor-element-ed3859d,
body.single-awsm_job_openings .elementor-element-0ef8139{display:none !important;}
/* Heller Schleier über dem Hero-Foto (Overlay der geteilten Vorlage,
Sektion 21ebf75) – Foto bleibt dezent sichtbar */
body.single-awsm_job_openings .elementor-element-21ebf75 > .elementor-background-overlay{
background:#F6F4FC !important;background-image:none !important;opacity:.88 !important;transition:none !important;mix-blend-mode:normal !important;
}
/* Kicker + Titel im Services-Stil */
.eaces-job-hero-kicker{
font-family:"DM Sans",sans-serif;font-size:18px;font-weight:600;
text-transform:uppercase;color:#1F1B4B;margin:0 0 10px;
}
.eaces-job-hero-title{
font-family:Syne,sans-serif;font-weight:600;color:#3B1679;
font-size:42px;line-height:1.2;margin:0 0 16px;
}
.eaces-job-hero-title::after{
content:"";display:block;width:48px;height:4px;background:#FFF188;
border-radius:2px;margin-top:16px;
}
/* Spezifikationen als gleichmäßige Stat-Kacheln */
.eaces-job-hero-specs{margin-top:24px;}
.eaces-job-hero-specs .awsm-job-specifications-row{
display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr));
gap:12px;margin:0;
}
.eaces-job-hero-specs .awsm-job-specifications-row::before,
.eaces-job-hero-specs .awsm-job-specifications-row::after{content:none !important;display:none !important;}
.eaces-job-hero-specs .awsm-job-specification-wrapper{
display:contents !important;
}
.eaces-job-hero-specs .awsm-job-specification-item{
display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:center;min-width:0;
background:#FFFFFF;border:1px solid #E3DCF9;border-radius:3px;
padding:12px 16px;margin:0 !important;min-height:58px;
}
.eaces-job-hero-specs .awsm-job-specification-item i{
grid-row:1/3;align-self:center;color:#3B1679;font-size:17px;
}
.eaces-job-hero-specs .awsm-job-specification-label{grid-column:2;}
.eaces-job-hero-specs .awsm-job-specification-label strong{
display:block;font-family:"DM Sans",sans-serif;font-size:11px;font-weight:600;
letter-spacing:.6px;text-transform:uppercase;color:#55517A;margin:0 0 2px;
}
.eaces-job-hero-specs .awsm-job-specification-term{
grid-column:2;font-family:"DM Sans",sans-serif;font-size:15px;font-weight:600;color:#1F1B4B;
}
/* Trennlinie zwischen Kacheln und Breadcrumb */
.eaces-job-hero-specs::after{
content:"";display:block;height:1px;background:rgba(31,27,75,.15);margin-top:28px;
}
/* Breadcrumb auf hellem Hero */
body.single-awsm_job_openings .pxl-breadcrumb,
body.single-awsm_job_openings .pxl-breadcrumb a,
body.single-awsm_job_openings .pxl-breadcrumb span,
body.single-awsm_job_openings .pxl-breadcrumb li{color:#1F1B4B !important;}
body.single-awsm_job_openings .pxl-breadcrumb .breadcrumb-entry{color:#3B1679 !important;}
/* Abstand zwischen Inhalt und Footer wie auf den übrigen Seiten */
body.single-awsm_job_openings #pxl-main{padding-bottom:0 !important;}
/* Responsiv */
@media (max-width:992px) and (min-width:768px){
.eaces-job-hero-specs .awsm-job-specifications-row{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:992px){
body.single-awsm_job_openings .awsm-job-single-wrap{padding-left:15px;padding-right:15px;}
}
@media (max-width:767px){
.eaces-job-hero-kicker{font-size:15px;}
.eaces-job-hero-title{font-size:30px;}
.eaces-job-hero-specs .awsm-job-specifications-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.eaces-job-hero-specs .awsm-job-specification-item{padding:10px 14px;min-height:52px;}
}
@media (max-width:440px){
.eaces-job-hero-specs .awsm-job-specifications-row{grid-template-columns:1fr;}
}
/* Vertikaler Rhythmus wie Services-Hero: Kicker ~156px von oben,
Hero 650px, Breadcrumb unten angepinnt (nur Desktop; Mobil behält
die responsiven Vorlagen-Abstände) */
@media (min-width:993px){
body.single-awsm_job_openings .elementor-element-21ebf75{
padding-top:140px !important;padding-bottom:70px !important;min-height:0 !important;
}
}
/* Breadcrumb (Home → Jobtitel) auf Job-Seiten komplett ausblenden */
body.single-awsm_job_openings .elementor-widget-pxl_breadcrumb{display:none !important;}
/* ===== end eAces single job hero block ===== */
/* ==============================================================
eAces – Hero-Ausrichtung "Offene Stellen" (Listing-Seite)
Gleicht den Hero der Job-Listing-Seite an den Services-Hero an:
1300px-Box, 520px hoch, Inhalt vertikal zentriert; Chips + gelber Initiativ-CTA.
Ganzen Block löschen = vorheriger kompakter Hero.
============================================================== */
@media (min-width:768px){
.elementor-element-1b2f3766{
padding:140px max(70px,calc((100% - 1300px)/2)) 40px !important; /* Overlay-Header: Menü liegt ÜBER dem Hero – 140px oben hält den Kicker frei; Gesamthöhe ~650px wie Services */
min-height:650px !important;
justify-content:center !important;
}
}
@media (max-width:767px){
.elementor-element-1b2f3766{padding:70px 20px 50px !important;}
}
/* Chips (Beschäftigungsformen) + CTA – Markup liegt im duplizierten Heading-Widget */
.elementor-element-1b2f3766 .eaces-jobs-hero-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:2px;}
.elementor-element-1b2f3766 .elementor-element-4b015e63{display:none !important;} /* leerer Spacer aus altem Entwurf */
.elementor-element-1b2f3766 .eaces-jobs-hero-chips > span{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #E3DCF9;border-radius:3px;padding:9px 16px;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;line-height:1;color:#1F1B4B;}
.elementor-element-1b2f3766 .eaces-jobs-hero-chips > span::before{content:'';width:8px;height:8px;border-radius:50%;background:#3B1679;flex:0 0 auto;}
.elementor-element-1b2f3766 a.eaces-jobs-hero-cta{display:inline-block;margin-top:18px;background:#FFF188 !important;color:#1F1B4B !important;font-family:'DM Sans',sans-serif;font-size:15px;line-height:15px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;padding:12px 24px;border-radius:3px;text-decoration:none !important;transition:none !important;}
.elementor-element-1b2f3766 a.eaces-jobs-hero-cta:hover,
.elementor-element-1b2f3766 a.eaces-jobs-hero-cta:focus{background:#FFF188 !important;color:#1F1B4B !important;}
@media (max-width:440px){
.elementor-element-1b2f3766 a.eaces-jobs-hero-cta{font-size:13px;padding:12px 18px;letter-spacing:.3px;}
}
/* ===== end eAces listing hero block ===== */
/* ============================================================
eAces - Contact page (Kontakt) - v3: person card + cards row
(v2 backup: internal draft page "Code Snippets Backup", ID 19862)
============================================================ */
.elementor-page-173 .eaces-booking-embed { background: #fff; border: 1px solid #E3DCF9; border-radius: 8px; padding: 10px; overflow: hidden; }
.elementor-page-173 .eaces-booking-embed iframe { width: 100%; height: 660px; min-height: 0; border: 0; display: block; margin-top: 0; }
.elementor-page-173 .elementor-widget-google_maps iframe { height: 570px; display: block; }
.elementor-page-173 .pxl-content-area { padding-bottom: 0; }
@media (min-width: 768px) {
.elementor-page-173 .elementor-element-4cb52f3 > .elementor-container,
.elementor-page-173 .elementor-element-bbdbc11 > .elementor-container { max-width: 1290px; }
}
/* person card */
.elementor-page-173 .elementor-element-4cb52f3 { overflow: hidden; }
.elementor-page-173 .elementor-element-e614672 > .elementor-widget-wrap { padding: 0; }
.elementor-page-173 .elementor-element-e614672 .elementor-widget-image,
.elementor-page-173 .elementor-element-e614672 .elementor-widget-image .elementor-widget-container { height: 100%; }
.elementor-page-173 .elementor-element-e614672 .elementor-widget-image img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
@media (min-width: 1025px) {
.elementor-page-173 .elementor-element-e614672 { width: 34% !important; }
.elementor-page-173 .elementor-element-ea2c95c { width: 66% !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
.elementor-page-173 .elementor-element-e614672 { width: 100%; }
.elementor-page-173 .elementor-element-e614672 .elementor-widget-image img { height: 380px; }
}
@media (max-width: 767px) {
.elementor-page-173 .elementor-element-e614672 { width: 100%; }
.elementor-page-173 .elementor-element-ea2c95c { width: 100%; }
.elementor-page-173 .elementor-element-e614672 .elementor-widget-image img { height: 340px; }
}
/* kicker */
.elementor-page-173 .elementor-element-5c74a05 .pxl-item--title { font-size: 13px !important; line-height: 1.4 !important; letter-spacing: 3.5px; text-transform: uppercase; font-weight: 600; color: #6A6490; }
/* name */
.elementor-page-173 .elementor-element-a26e1a0 p { font-family: Syne, sans-serif; font-size: 38px; font-weight: 800; color: #3B2D80; line-height: 1.2; margin-bottom: 4px; }
/* role + intro */
.elementor-page-173 .elementor-element-1a9e320 p { font-size: 15px; color: #55516E; line-height: 1.55; margin-bottom: 4px; }
.elementor-page-173 .elementor-element-1a9e320 p strong { font-size: 16px; color: #3B2D80; }
/* compact contact facts */
.elementor-page-173 [data-id="2a824c8"] .pxl-item--title { font-size: 13px !important; line-height: 1.4 !important; letter-spacing: 1.5px; font-weight: 700; }
.elementor-page-173 [data-id="2a824c8"] .pxl-item--desc,
.elementor-page-173 [data-id="2a824c8"] .pxl-item--desc p { font-size: 15px !important; line-height: 1.5 !important; }
@media (min-width: 768px) {
.elementor-page-173 [data-id="2a824c8"] .elementor-column:nth-child(-n+2) { margin-bottom: 28px; }
}
@media (max-width: 767px) {
.elementor-page-173 [data-id="2a824c8"] .elementor-column + .elementor-column { margin-top: 24px; }
}
@media (max-width: 480px) {
.elementor-page-173 .elementor-element-a26e1a0 p { font-size: 27px !important; line-height: 1.25 !important; }
}
/* v3.1 photo fill (desktop) */
.elementor-page-173 .elementor-element-e614672 { position: relative; z-index: 2; }
@media (min-width: 1025px) {
.elementor-page-173 .elementor-element-e614672 > .elementor-widget-wrap { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 0; }
}
/* v3.2 cards stack on tablet/mobile */
@media (max-width: 1024px) {
.elementor-page-173 .elementor-element-bbdbc11 > .elementor-container { flex-wrap: wrap; }
.elementor-page-173 .elementor-element-bbdbc11 > .elementor-container > .elementor-column { width: 100%; }
.elementor-page-173 .elementor-element-bbdbc11 > .elementor-container > .elementor-column + .elementor-column { margin-top: 28px; }
}
/* v3.4 fixes: facts 2x2 everywhere, text sizes hardened, stretch person card */
.elementor-page-173 .elementor-element-1a9e320 p { font-size: 15px !important; line-height: 1.55 !important; }
.elementor-page-173 .elementor-element-1a9e320 p strong { font-size: 16px !important; }
.elementor-page-173 .elementor-element-4cb52f3 > .elementor-container { align-items: stretch; }
@media (min-width: 768px) {
.elementor-page-173 [data-id="2a824c8"] > .elementor-container { flex-wrap: wrap; }
.elementor-page-173 [data-id="2a824c8"] .elementor-column { width: 50% !important; }
}
/* ======================= end eAces Contact page block (v3) == */
/* ============================================================
eAces – Grid-Ausrichtung der v4-Elemente (Home + Services)
Die zwei Hero-Sektionen und die drei Service-Karten sind neue
Elementor-v4-Elemente; ihre Breiten folgen hier dem 1290-px-
Inhaltsraster der Seite (Referenz: "Was uns unterscheidet").
Responsiv über max()/calc() – Mobile behält eigene Abstände.
Dokumentiert im Handover "Grid Alignment – Home & Services".
============================================================ */
@media (min-width: 768px) {
.elementor-element-b3750f2,
.elementor-element-4f393cb {
padding-left: max(30px, calc((100% - 1290px) / 2)) !important;
padding-right: max(30px, calc((100% - 1290px) / 2)) !important;
}
}
/* Service-Karten: volle Breite (weisse Flaeche bleibt durchgehend),
Inhalt liegt per Innenabstand auf dem 1290-px-Raster */
@media (min-width: 768px) {
.elementor-element-55fbcf1,
.elementor-element-c7928c2,
.elementor-element-510470c {
max-width: none !important;
padding-left: max(30px, calc((100% - 1290px) / 2)) !important;
padding-right: max(30px, calc((100% - 1290px) / 2)) !important;
}
}
/* Lila Band (Services): exakt dieselbe Formel wie die Heroes,
damit die Textkante bei JEDER Breite identisch liegt */
@media (min-width: 768px) {
body .elementor .elementor-element-7c8a5c8 > .elementor-container {
max-width: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
}
@media (min-width: 768px) {
body .elementor .elementor-element-7c8a5c8 .elementor-column > .elementor-widget-wrap {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
@media (min-width: 768px) {
body .elementor section.elementor-element.elementor-element-7c8a5c8 {
padding-left: max(15px, calc((100% - 1290px) / 2)) !important;
padding-right: max(15px, calc((100% - 1290px) / 2)) !important;
}
}
@media (max-width: 767px) {
body .elementor section.elementor-element.elementor-element-7c8a5c8 {
padding-left: 15px !important;
padding-right: 15px !important;
}
}
/* Alle Seiten-Heroes (For Companies, For Candidates, About, Kontakt,
Initiativbewerbung) + Header-Menue auf dasselbe 1290-px-Raster */
/* Hinweis: Der Hero "Offene Stellen" wurde neu aufgebaut und hat
seither die Element-ID 2ad584a5. Die alte ID 1b2f3766 existiert
auf der Seite nicht mehr - ihre Regeln unten laufen ins Leere und
koennen bei der naechsten Aufraeumrunde entfernt werden. */
@media (min-width: 768px) {
.elementor-element-14475485,
.elementor-element-298962f5,
.elementor-element-009d515,
.elementor-element-ba0de32,
.elementor-element-1284f476,
.elementor-element-5102e6bb,
.elementor-element-2ad584a5 {
padding-left: max(30px, calc((100% - 1290px) / 2)) !important;
padding-right: max(30px, calc((100% - 1290px) / 2)) !important;
}
}
/* Vertikale Hero-Standardisierung (alle Seiten): Referenz-Geometrie
von Services/For-Companies – 650px Hoehe, Titelzeile bei ~226px.
Inhalt oben verankert mit fixem Abstand statt Zentrierung, damit
die Titel auf JEDER Seite unabhaengig von der Textmenge auf einer
Linie liegen. */
@media (min-width: 768px) {
.elementor-element-b3750f2,
.elementor-element-4f393cb,
.elementor-element-14475485,
.elementor-element-298962f5,
.elementor-element-009d515,
.elementor-element-ba0de32,
.elementor-element-1284f476,
.elementor-element-5102e6bb,
.elementor-element-1b2f3766,
.elementor-element-2ad584a5 {
justify-content: flex-start !important;
padding-top: 156px !important;
padding-bottom: 70px !important;
}
}
/* Careers-Hero: auf Standardhoehe 650px, eigener Stil (Titel unten,
Breadcrumb) bleibt erhalten – Titelabstand nach unten unveraendert */
/* Careers hero: page-specific padding override removed 20.08.2026 - the shared secondary-hero rule now applies (156 top from Elementor, 40 bottom), identical to Fuer Kandidaten */
/* Sekundaere Heroes (Kontakt, Karriere, About, Kandidaten, Offene
Stellen): einheitliche 580px statt 650px – Titel bleiben auf der
Standard-Titelzeile; Primaer-Heroes behalten 650px */
@media (min-width: 768px) {
.elementor-element-ba0de32,
.elementor-element-f49162d,
.elementor-element-009d515,
.elementor-element-298962f5,
.elementor-element-1b2f3766,
.elementor-element-1284f476,
.elementor-element-5102e6bb,
.elementor-element-2ad584a5 {
min-height: 540px !important;
height: auto !important;
padding-bottom: 40px !important;
}
/* Offene Stellen: optischer Ausgleich – Label 6px nach rechts */
.elementor-element-1b2f3766 > .elementor-widget:first-child,
.elementor-element-2ad584a5 > .elementor-widget:first-child {
padding-left: 6px !important;
}
/* Offene Stellen: Claim-Headline auf volle Rasterbreite. Die
Elementor-Breite von 801px erzwingt eine dritte Titelzeile und
macht den Hero 582px hoch - so bleibt er exakt bei 540px. */
.elementor-element-2ad584a5 > .elementor-element-18730c51 {
width: 100% !important;
max-width: 100% !important;
}
}
/* Karriere-Hero: Typografie wie die anderen Heroes (Titel Syne,
Label DM Sans uppercase) statt Theme-Standardschrift */
.elementor-element-d969cce .pxl-item--title {
font-family: Syne, serif !important;
font-size: 64px !important;
font-weight: 700 !important;
letter-spacing: -1px !important;
line-height: 1.05 !important;
}
.elementor-element-8401086 p {
line-height: 1 !important;
font-family: "DM Sans", sans-serif !important;
font-size: 18px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: normal !important;
}
@media (max-width: 767px) {
.elementor-element-d969cce .pxl-item--title { font-size: 38px !important; }
}
/* Karriere-Hero neu aufgebaut 20.08.2026: v4-Kopie des Heroes der
Initiativbewerbungs-Seite, neue Element-ID 5102e6bb (oben in die
Gruppen 4-6 aufgenommen - Raster, Titelzeile, 540-px-Tier). Die
alten Karriere-Regeln (d969cce Titel-Typo, 8401086 Eyebrow) laufen
seither ins Leere und koennen bei der naechsten Aufraeumrunde
entfernt werden. */
/* Karriere-Seite: uebriger Seiteninhalt auf das 1290-px-Raster */
/* Stellenliste "Aktuelle Positionen": Sektions-Randabstand (30px)
auf allen Breiten entfernen - zusammen mit dem 30px-Inset der
Spalte und der 1350px-Box unten landet der TEXT auf jeder
Viewport-Breite auf derselben linken Kante wie der Hero-Titel
(max(30px, (100% - 1290px)/2)) */
.elementor-element-819147d {
padding-left: 0 !important;
padding-right: 0 !important;
}
@media (min-width: 768px) {
/* Stellenliste "Aktuelle Positionen": Spalte traegt 30px Inset,
Box daher 1290 + 2x30 = 1350, damit der TEXT auf dem Raster
landet (Formel siehe Grid-Alignment-Guide) */
.elementor-element-819147d > .elementor-container {
max-width: 1350px !important;
}
/* Hinweiszeile unter dem Bewerbungs-Zeitstrahl: linke Kante aufs
Raster (Elternspalte hat bereits 30px Aussenabstand) */
.elementor-element-4ae44d1 {
padding-left: max(0px, calc((100% - 1290px) / 2)) !important;
padding-right: max(0px, calc((100% - 1290px) / 2)) !important;
}
}
/* Karriere-Seite (21.08.2026): Bewerbungs-Zeitstrahl (f8448cf) auf
dem Handy als kompakte Liste - Kreis links, Label rechts - statt
gestapelter Spalten (Schritt 1 hatte zudem ein anderes Layout als
2-5). Nur <=767px, andere Breiten unveraendert. */
@media (max-width: 767px) {
.elementor-element-f8448cf > .elementor-container > .elementor-column > .elementor-widget-wrap {
display: flex; flex-direction: row; flex-wrap: nowrap;
align-items: center; justify-content: flex-start;
column-gap: 18px; padding: 8px 15px;
}
.elementor-element-f8448cf > .elementor-container > .elementor-column { margin-bottom: 10px; }
.elementor-element-f8448cf .elementor-widget { margin: 0 !important; }
.elementor-element-f8448cf .elementor-widget-divider { display: none !important; }
.elementor-element-f8448cf .elementor-widget-pxl_heading { flex: 1; width: auto !important; max-width: none !important; }
.elementor-element-f8448cf .pxl-heading { text-align: left !important; }
.elementor-element-f8448cf .pxl-heading--inner { display: block !important; width: auto !important; margin: 0 !important; text-align: left !important; }
}
/* Home (21.08.2026): Ueberschrift im lila Band (dfe5ce0) hat
manuelle -Umbrueche fuer die Desktop-Komposition - auf dem
Handy erzwangen sie Ein-Wort-Zeilen. Nur <=767px neutralisiert. */
@media (max-width: 767px) {
.elementor-element-dfe5ce0 br { display: none; }
}
/* Karriere-Seite: Abschluss-Headline "Wir freuen uns..." (945d25e)
haengt an der globalen Typo c6c712d (Syne 40) - Elementor-eigene
Mobile-Groessen greifen dort nicht. Handy-Groesse daher hier. */
@media (max-width: 767px) {
.elementor-170 .elementor-element.elementor-element-945d25e { font-size: 25px !important; }
}
/* Responsive-Sweep 21.08.2026 - Handy-Strukturfixes (Katalog:
Artifact "eAces Responsive Sweep"). Alles <=767px-scoped. */
@media (max-width: 767px) {
/* Ueber uns: Team-Karussell - zentrierte Overflow-Reihe machte
Karte 1 unerreichbar; links ausrichten, wischbar */
.elementor-element-9b2c968 { justify-content: flex-start !important; }
/* Ueber uns: Team-Foto-Spalte kollabierte auf 1px beim Stapeln */
.elementor-element-0075200 { min-height: 280px; }
/* Ueber uns: Handy-Hero hatte keine Bildebene mehr - dokumentiertes
Handy-Bild (ueber-uns-hero-mobil.jpg, ID 19772, Top Left + Cover)
samt dokumentiertem Verlauf wiederhergestellt */
.elementor-element-009d515 {
background-image: linear-gradient(90deg, rgba(0,0,0,.6) 27%, rgba(0,0,0,.2) 99%), url("https://e-aces.com/eaces-new-site/wp-content/uploads/2026/08/ueber-uns-hero-mobil.jpg") !important;
background-size: auto, cover !important;
background-position: 0 0, left top !important;
background-repeat: no-repeat !important;
}
/* Buttons, die auf dem Handy in zwei kaputte Zeilen umbrachen
(Ueber uns + Fuer Kandidaten) */
.elementor-element-8fe37ef a.btn,
.elementor-element-4df2a08 a.btn,
.elementor-element-8282cb3 a.btn { white-space: nowrap; padding: 0 22px; }
}
/* Hero-Bild-Fix 21.08.2026: Services- und Offene-Stellen-Hero
tragen einen Desktop-Bildversatz (background-position Y -182px /
-170px), der auf dem Handy nach unten einen weissen Streifen
reisst (Cover ist dort hoehenbegrenzt). Nur <=767px: Bildebene
auf center top - fuellt den Hero vollstaendig. */
@media (max-width: 767px) {
.elementor-element-4f393cb,
.elementor-element-2ad584a5 {
background-position: 0 0, center top !important;
}
/* Offene Stellen: manuelle in der Hero-Unterzeile nur fuer
die Desktop-Komposition - auf dem Handy Fliesstext */
.elementor-element-6eef46bc br { display: none; }
}
/* Case-Study-Einzelseiten (portfolio-CPT) 21.08.2026: das Theme
schiebt #pxl-main 110px (Desktop) / 50px (Handy) unter den Header -
die Elementor-Seiten bringen aber ihren eigenen Bild-Hero mit,
also stand dort nur ein leerer Streifen. Auf allen Breiten 0. */
body.single-portfolio #pxl-main { padding-top: 0 !important; }
/* Handy-Hero-Standard 21.08.2026: dasselbe Prinzip wie die
Desktop-Regelgruppe 5 - Inhalt oben verankert mit festem
Abstand statt unten/zentriert, damit Eyebrow und Titel auf
JEDER Seite auf derselben Linie starten, unabhaengig von der
Textmenge. Hero waechst bei viel Text nach unten. */
@media (max-width: 767px) {
.elementor-element-b3750f2,
.elementor-element-4f393cb,
.elementor-element-14475485,
.elementor-element-298962f5,
.elementor-element-009d515,
.elementor-element-ba0de32,
.elementor-element-5102e6bb,
.elementor-element-2ad584a5,
.elementor-element-1284f476 {
justify-content: flex-start !important;
padding-top: 230px !important;
padding-bottom: 40px !important;
min-height: 650px !important;
height: auto !important;
}
}
/* ================ end eAces v4 grid alignment =============== */
/* ==========================================================================
eAces — Kontakt map brand tint (Kontakt page, page-id-173)
Widget: Elementor Google Maps .elementor-element-c16d223
The grey base comes from the widget itself (Elementor → Style → CSS Filters:
Brightness 85 / Contrast 140 / Saturation 0). This block only lays the brand
colour on top. Delete this block → the map goes back to plain grey.
========================================================================== */
body.page-id-173 .elementor-element-c16d223 .elementor-custom-embed { position: relative; }
body.page-id-173 .elementor-element-c16d223 .elementor-custom-embed::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none; /* map stays draggable and clickable */
background: #3B1679; /* Elementor Global Colors → Primary */
mix-blend-mode: color; /* hue from the brand colour, light/dark from the map */
opacity: .7; /* .45 = subtle … .8 = strong */
}
/* === end eAces Kontakt map brand tint === */
/* =========================================================
eAces - MOBILE / TABLET HEADER (appearance only)
Added 17.08.2026. Affects ONLY the theme mobile header,
which the theme shows below 1200px viewport width.
Markup, JavaScript and menu items are untouched.
The logo file itself is set in:
Herrington > Theme Options > Header > Mobile > Logo
(already set to eaces-wordmark-navy.png, height 34)
========================================================= */
@media (max-width: 1200px){
/* 1 - bar */
#pxl-header-mobile,
#pxl-header-mobile #pxl-header-main{ background-color:#EDE9FE; }
#pxl-header-mobile #pxl-header-main{ box-shadow:inset 0 -1px 0 rgba(59,22,121,.12); }
/* 2 - logo size (wordmark) */
#pxl-header-mobile .pxl-header-branding img,
#pxl-header-mobile .pxl-logo-mobile img{ height:34px; width:auto; }
/* 3 - burger icon */
#pxl-header-mobile .pxl-icon-line::before,
#pxl-header-mobile .pxl-icon-line::after{ background-color:#3B1679; }
/* 4 - slide-in panel (light variant A) */
#pxl-header-mobile .pxl-header-menu{ background-color:#EDE9FE; }
#pxl-header-mobile .pxl-menu-close{ background-color:rgba(59,22,121,.08); color:#3B1679; }
#pxl-header-mobile .pxl-header-mobile-search .search-field{
background-color:rgba(255,255,255,.72);
color:#5B44A0;
box-shadow:inset 0 0 0 1px rgba(59,22,121,.12);
}
#pxl-header-mobile .pxl-header-mobile-search .search-field::placeholder{ color:#7A76A0; }
#pxl-header-mobile .pxl-header-mobile-search .search-submit{ color:#3B1679; }
#pxl-header-mobile .pxl-header-nav .pxl-menu-primary > li > a{
font-family:"DM Sans", sans-serif;
color:#3B1679;
}
#pxl-header-mobile .pxl-header-nav .pxl-menu-primary > li + li{
box-shadow:inset 0 1px 0 rgba(59,22,121,.10);
}
#pxl-header-mobile .pxl-header-nav .pxl-menu-primary > li > a:hover,
#pxl-header-mobile .pxl-header-nav .pxl-menu-primary > li.current-menu-item > a{ color:#6B2FD6; }
#pxl-header-mobile .pxl-header-nav .sub-menu a{
font-family:"DM Sans", sans-serif;
color:#5B44A0;
}
#pxl-header-mobile .pxl-menu-toggle{ color:rgba(59,22,121,.55); }
#pxl-header-mobile .pxl-header-menu-backdrop{ background-color:rgba(31,27,75,.6); }
}
/* 5 - phone only: icon instead of the wordmark */
@media (max-width: 600px){
#pxl-header-mobile .pxl-header-branding img{
content:url(../../uploads/2026/08/eaces-icon-navy.png);
height:38px; width:auto;
}
}
/* ================== end eAces mobile header ================== */
/* === eAces – Icon-Box Hover-Invert === */
body .elementor-widget.eaces-hover-invert .pxl-icon-box{
transition: background-color .35s ease;
}
body .elementor-widget.eaces-hover-invert .pxl-item--title,
body .elementor-widget.eaces-hover-invert .pxl-item--title a,
body .elementor-widget.eaces-hover-invert .pxl-item--description,
body .elementor-widget.eaces-hover-invert .pxl-item--icon i{
transition: color .35s ease, -webkit-text-fill-color .35s ease;
}
body .elementor-widget.eaces-hover-invert .pxl-icon-box:hover{
background-color: var(--e-global-color-secondary);
}
body .elementor-widget.eaces-hover-invert .pxl-icon-box:hover .pxl-item--title,
body .elementor-widget.eaces-hover-invert .pxl-icon-box:hover .pxl-item--title a,
body .elementor-widget.eaces-hover-invert .pxl-icon-box:hover .pxl-item--description{
color: var(--e-global-color-primary);
}
body .elementor-widget.eaces-hover-invert .pxl-icon-box:hover .pxl-item--icon i{
color: var(--e-global-color-primary);
-webkit-text-fill-color: var(--e-global-color-primary);
}
/* === Ende === */
/* =========================================================================
eAces - Leistungen: Akkordeon-Detailansicht (v1.0 - 18.08.2026)
-------------------------------------------------------------------------
WAS: Auf der Seite "Services." blendet ein Klick auf eine Leistung die
uebrigen Zeilen aus, schiebt das Foto nach rechts oben, den Titel
nach links und oeffnet die Beschreibung ueber die volle Breite.
WO: Gehoert zusammen mit dem PHP-Block gleichen Namens in
herrington-child/functions.php.
GILT: Nur dort, wo das Skript die Klasse .eaces-svc gesetzt hat
(Seite "Services.", Seiten-ID 197). Ueberall sonst wirkungslos.
AUS: Den PHP-Block in der functions.php deaktivieren.
========================================================================= */
.eaces-svc{
display:grid !important;
grid-template-columns:33.3333% 1fr;
grid-template-areas:"media head" "media panel";
align-items:stretch;
}
.eaces-svc > .eaces-media{ grid-area:media; width:auto !important; min-height:320px; }
.eaces-svc > .eaces-head { grid-area:head; width:auto !important; }
.eaces-svc > .eaces-panel{
grid-area:panel; background:#F5F3FF;
padding:0 10px 10px 10px; display:flex; flex-direction:column;
}
.eaces-svc.is-open{
grid-template-columns:1fr 33.3333%;
grid-template-areas:"head media" "panel panel";
}
.eaces-svc.is-open > .eaces-media{ min-height:290px; background-position:center 30% !important; }
.eaces-svc.is-open > .eaces-head{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.eaces-svc.is-open > .eaces-panel{ padding-top:8px; padding-bottom:26px; }
.eaces-back{
display:none; align-items:center; gap:9px; align-self:flex-start;
margin:14px 0 16px 10px; padding:4px 0;
background:none; border:0; cursor:pointer;
font-family:"DM Sans",sans-serif; font-size:12.5px; font-weight:500;
letter-spacing:.14em; text-transform:uppercase; color:#3B1679;
transition:gap .22s ease;
}
.eaces-svc.is-open .eaces-back{ display:inline-flex; }
.eaces-back:hover{ gap:16px; }
.eaces-back:focus-visible{ outline:2px solid #3B1679; outline-offset:3px; }
.eaces-svc.is-open .e-n-accordion-item:not([open]){ display:none; }
.eaces-svc.is-open .e-n-accordion-item[open] > .e-n-accordion-item-title{
border:0 !important; padding:0 !important; margin:0 0 14px 0 !important; pointer-events:none;
}
.eaces-svc.is-open .e-n-accordion-item[open] .e-n-accordion-item-title-icon{ display:none !important; }
.eaces-svc.is-open .e-n-accordion-item[open] .e-n-accordion-item-title-text{
font-family:"Syne",sans-serif !important; font-weight:600 !important;
font-size:25px !important; line-height:1.25 !important; color:#3B1679 !important;
}
.eaces-svc.is-open .e-n-accordion-item[open] > .e-con{ border:0 !important; padding:0 !important; }
.eaces-svc.is-open .e-n-accordion-item[open] ul{
list-style:none; margin:0 !important; padding:0 !important; display:grid; gap:11px;
}
.eaces-svc.is-open .e-n-accordion-item[open] li{
position:relative; padding-left:28px; font-size:16px; line-height:1.6; color:#1F1B4B;
}
.eaces-svc.is-open .e-n-accordion-item[open] li::before{
content:""; position:absolute; left:4px; top:.62em; width:9px; height:9px;
background:#FFF188; border-radius:2px; transform:rotate(45deg);
}
.eaces-svc:not(.is-open) .e-n-accordion-item-title{ cursor:pointer; transition:background-color .25s ease; }
.eaces-svc:not(.is-open) .e-n-accordion-item-title:hover{ background-color:rgba(59,22,121,.05); }
:root.eaces-vt::view-transition-group(*){ animation-duration:460ms; animation-timing-function:cubic-bezier(.22,.61,.36,1); }
:root.eaces-vt::view-transition-image-pair(*){ isolation:auto; }
:root.eaces-vt::view-transition-old(root){ animation:none; opacity:0; }
:root.eaces-vt::view-transition-new(root){ animation:none; opacity:1; }
:root.eaces-vt::view-transition-old(eaces-media),
:root.eaces-vt::view-transition-old(eaces-head){ animation:none; opacity:0; }
:root.eaces-vt::view-transition-new(eaces-media){ animation:none; opacity:1; mix-blend-mode:normal; width:100%; height:100%; object-fit:cover; }
:root.eaces-vt::view-transition-new(eaces-head){ animation:none; opacity:1; mix-blend-mode:normal; width:100%; height:100%; object-fit:none; object-position:left center; }
:root.eaces-vt::view-transition-old(eaces-panel),
:root.eaces-vt::view-transition-new(eaces-panel){ mix-blend-mode:normal; width:100%; height:100%; object-fit:none; object-position:left top; }
:root.eaces-vt::view-transition-old(eaces-panel){ animation-duration:110ms; animation-timing-function:ease-out; }
:root.eaces-vt::view-transition-new(eaces-panel){ animation-duration:230ms; animation-delay:150ms; animation-fill-mode:backwards; animation-timing-function:ease-in; }
:root.eaces-vt::view-transition-image-pair(eaces-media),
:root.eaces-vt::view-transition-image-pair(eaces-panel){ overflow:hidden; }
@media (max-width:900px){
.eaces-svc,
.eaces-svc.is-open{ grid-template-columns:1fr; grid-template-areas:"media" "head" "panel"; }
.eaces-svc > .eaces-media,
.eaces-svc.is-open > .eaces-media{ min-height:0 !important; height:auto !important; aspect-ratio:16/9; background-position:center 32% !important; }
.eaces-svc.is-open > .eaces-head{ display:block; }
}
@media (max-width:600px){
.eaces-svc > .eaces-media,
.eaces-svc.is-open > .eaces-media{ aspect-ratio:4/3; }
.eaces-svc.is-open .e-n-accordion-item[open] .e-n-accordion-item-title-text{ font-size:21px !important; }
.eaces-svc.is-open .e-n-accordion-item[open] li{ font-size:15px; }
}
/* === Ende: eAces - Leistungen: Akkordeon-Detailansicht =================== */
/* =========================================================================
eAces - Leistungen: Akkordeon-Detailansicht - Feinschliff (v1.1 - 18.08.2026)
-------------------------------------------------------------------------
Ergaenzt den Block v1.0 weiter oben. Bringt die geschlossene Liste auf den
freigegebenen Entwurf: keine Kaesten um die Zeilen, mehr Zeilenhoehe,
linksbuendig mit der Ueberschrift, engerer Abstand zur Trennlinie.
========================================================================= */
/* Einleitungstext nicht ueber die volle Spaltenbreite laufen lassen */
.eaces-svc .eaces-head > .elementor-widget-pxl_heading + .elementor-widget-pxl_heading{
max-width:62ch;
}
/* Trennlinie: statt des Divider-Widgets eine Linie oben am Listenbereich */
.eaces-svc .eaces-head > [class*="elementor-widget-divider"]{ display:none !important; }
.eaces-svc > .eaces-head{ padding-bottom:20px !important; }
.eaces-svc > .eaces-panel{
border-top:1px solid #DDDFE0;
padding:14px 10px 24px 10px;
}
.eaces-svc.is-open > .eaces-panel{ padding-top:18px; padding-bottom:28px; }
/* Liste: linksbuendig mit der Ueberschrift, keine Kaesten, mehr Luft */
.eaces-svc .elementor-widget-n-accordion{ margin:0 !important; }
.eaces-svc .e-n-accordion-item-title{
border:0 !important;
border-bottom:1px solid #D5D8DC !important;
padding:15px 8px 15px 18px !important;
gap:14px !important;
}
/* Block 02 hat in Elementor einen leicht anderen Lavendel-Ton als 01 und 03.
Damit der Listenbereich nicht heller wirkt als der Kopfbereich, wird der
Ton hier nachgezogen. Wenn alle drei Bloecke irgendwann denselben Ton
bekommen, kann diese Regel ersatzlos geloescht werden. */
.elementor-element-c7928c2 > .eaces-panel{ background:#F0EDFE; }
@media (max-width:600px){
.eaces-svc .e-n-accordion-item-title{ padding:13px 4px 13px 14px !important; gap:11px !important; }
}
/* Geoeffneter Leistungsname buendig mit Ueberschrift und Aufzaehlung */
.eaces-svc.is-open .e-n-accordion-item[open] > .e-n-accordion-item-title{
padding:0 0 0 10px !important;
}
/* Kein Fokus-Rahmen beim Mausklick, aber sichtbar fuer Tastaturnutzer */
.eaces-svc .e-n-accordion-item-title-text:focus{ outline:none; }
.eaces-svc .e-n-accordion-item-title-text:focus-visible{ outline:2px solid #3B1679; outline-offset:4px; }
/* Zeile rueckt beim Ueberfahren leicht ein (wie im Entwurf) */
.eaces-svc:not(.is-open) .e-n-accordion-item-title{
transition:background-color .25s ease, padding-left .25s ease;
}
.eaces-svc:not(.is-open) .e-n-accordion-item-title:hover{ padding-left:26px !important; }
/* === Ende: Feinschliff v1.1 ============================================= */
/* ==============================================================
eAces – Leistungen (Services) accordion – ADD-ON v1.3
Page: "Services." (page ID 197) | 20 Aug 2026
(1) THIS IS A NEW BLOCK. It does NOT replace anything.
Paste it at the very END of herrington-child/style.css.
The existing blocks "eAces – Leistungen Akkordeon" (v1.0)
and "Feinschliff v1.1" stay exactly as they are – this
add-on only overrides four of their declarations.
(2) WHAT CHANGED / WHAT TO CHECK
a) Bullet points inside an opened sub-service:
banana yellow #FFF188 -> amethyst purple #3B1679.
b) The "Alle Leistungen" return control is no longer a
plain text link at the TOP of the list container.
It is now a real button at the BOTTOM of the intro
container (the one with the title and the intro text),
left-aligned with title, text and list.
Check on the Services page: open each of the three
services (01 / 02 / 03) at 1920, 1440, 1280, 1024, 900,
768, 600, 414 and 360 px width. Nothing changes while a
service is closed – all rules below only apply to the
opened row (.is-open).
============================================================== */
/* --- a) bullet colour of the opened sub-service --------------- */
/* The 9x9 px rotated square in front of every list line.
Change this one value if the bullet colour must change again. */
.eaces-svc.is-open .e-n-accordion-item[open] li::before{
background:#3B1679; /* was #FFF188 */
}
/* --- b) "Alle Leistungen" button ------------------------------ */
/* b1) The intro container stacks its content from the top and
keeps the bottom 76 px free for the button.
!important is required here because the v1.1 block sets
".eaces-svc > .eaces-head { padding-bottom:20px !important }". */
.eaces-svc.is-open > .eaces-head{
justify-content:flex-start;
padding-bottom:76px !important; /* 39 button + 16 gap + 21 air */
}
/* b2) The list container becomes the anchor for the button.
Its top edge is exactly the bottom edge of the intro
container, so the button can be hung above it. */
.eaces-svc.is-open > .eaces-panel{
position:relative;
}
/* b3) The button itself – site CTA spec (39 px tall = 15 px text
+ 12/24 px padding, 3 px radius, uppercase), dark variant:
purple surface, lavender label. */
.eaces-svc.is-open .eaces-back{
position:absolute;
bottom:100%; /* = bottom edge of the intro container */
left:20px; /* same left line as title, text and list */
margin:0 0 16px; /* 16 px air above the divider line */
padding:12px 24px;
gap:10px; /* space between arrow and label */
background:#3B1679;
color:#EDE9FE;
border:0;
border-radius:3px;
font-family:"DM Sans",sans-serif;
font-size:15px;
line-height:15px;
font-weight:500;
letter-spacing:normal;
text-transform:uppercase;
transition:none;
}
/* b4) No hover effect – the button stays exactly as it is
(site rule: no lift, no shadow, no colour change). */
.eaces-svc.is-open .eaces-back:hover{
background:#3B1679;
color:#EDE9FE;
gap:10px;
}
/* b5) Keyboard focus ring in navy, so it stays visible on the
purple button (mouse clicks show no ring). */
.eaces-svc.is-open .eaces-back:focus-visible{
outline:2px solid #1F1B4B;
outline-offset:3px;
}
/* ===== end eAces – Leistungen accordion add-on v1.3 ===== */
/* ==============================================================
eAces – Vergleichstabelle "Boutique statt Masse"
Seite: Fuer Unternehmen (DE) + For Companies (EN) – gleiche IDs
Container d339d35 wird zum CSS-Grid mit drei Spalten:
Spalte 1 = Kriterium (CSS-Text, siehe Abschnitt 7)
Spalte 2 = eAces (Titel ea97977 | Liste 51af253)
Spalte 3 = Andere Anbieter (Titel a4de13f | Liste 1df7e6e)
Farben: Die Tabelle liegt IM lavendelfarbenen Abschnitt der
Ueberschrift darueber – ein Block statt zwei. WICHTIG: dieser
Abschnitt ist Lavendel #EDE9FE (globale Farbe "Secondary") mit
einer 50 % weissen Deckschicht - gerendert also #F6F4FE. Die
Tabelle bekommt unten exakt dieselbe Rezeptur, sonst entsteht an
der Naht eine sichtbare Kante.
eAces-Spalte in tieferem Lavendel (#E7E1FB),
Andere Anbieter in Weiss. Keine Balken, keine Rahmen oben,
nur duenne Trennlinien wie sonst auf der Seite.
Die eAces-Spaltenueberschrift ist das Wortmarken-Logo.
Raster 1290 px wie die Ueberschrift darueber.
Breakpoints: >=1200 Tabelle | 992-1199 kompakt | <=991 gestapelt
Aenderung 20.08.2026: Beschriftung 01 = Kandidatenvorschlaege und
04 = Raten und Honorare (EN: Candidate proposals / Rates and fees);
Kriterien-Spalte 225 -> 240 px (Desktop) bzw. 196 -> 205 px (992-1199),
damit die laengeren Namen einzeilig bleiben; Tabellenhintergrund an
den Abschnitt darueber angeglichen; Breakpoint-Grenzen auf .98 px
gesetzt, damit bei krummen Fensterbreiten keine Luecke entsteht.
Doku: Handover "Vergleichstabelle Fuer Unternehmen"
============================================================== */
/* ---------- 1. Rahmen: Raster + drei Spalten ---------- */
.elementor-element-d339d35 {
display: grid !important;
grid-template-columns: 240px 1fr 1fr !important;
gap: 0 !important;
align-items: stretch !important;
/* Hintergrund = exakt dieselbe Rezeptur wie der Abschnitt darueber:
globale Farbe "Secondary" (#EDE9FE) + 50 % weisse Deckschicht.
Die Variable steht hier bewusst statt eines festen Farbwertes,
damit die Tabelle der Farbe des Abschnitts darueber automatisch
folgt. Bis 20.08.2026 stand hier einfarbig #F1EFFA; das passte
zum frueheren Aufbau des Abschnitts und war danach 5 Punkte zu
dunkel -> sichtbare Kante. */
background-color: var(--e-global-color-secondary, #EDE9FE) !important;
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)) !important;
padding: 14px max(30px, calc((100% - 1290px) / 2)) 76px !important;
margin: 0 !important;
}
.elementor-element-4b729db,
.elementor-element-c515fc8,
.elementor-element-51af253,
.elementor-element-1df7e6e { display: contents !important; }
.elementor-element-51af253 .elementor-icon-list-items,
.elementor-element-1df7e6e .elementor-icon-list-items { display: contents !important; }
/* ---------- 2. Zellen den Spalten/Zeilen zuweisen ---------- */
.elementor-element-ea97977 { grid-column: 2; grid-row: 1; }
.elementor-element-a4de13f { grid-column: 3; grid-row: 1; }
.elementor-element-51af253 .elementor-icon-list-item { grid-column: 2; }
.elementor-element-1df7e6e .elementor-icon-list-item { grid-column: 3; }
.elementor-element-51af253 .elementor-icon-list-item:nth-child(1),
.elementor-element-1df7e6e .elementor-icon-list-item:nth-child(1) { grid-row: 2; }
.elementor-element-51af253 .elementor-icon-list-item:nth-child(2),
.elementor-element-1df7e6e .elementor-icon-list-item:nth-child(2) { grid-row: 3; }
.elementor-element-51af253 .elementor-icon-list-item:nth-child(3),
.elementor-element-1df7e6e .elementor-icon-list-item:nth-child(3) { grid-row: 4; }
.elementor-element-51af253 .elementor-icon-list-item:nth-child(4),
.elementor-element-1df7e6e .elementor-icon-list-item:nth-child(4) { grid-row: 5; }
.elementor-element-51af253 .elementor-icon-list-item:nth-child(5),
.elementor-element-1df7e6e .elementor-icon-list-item:nth-child(5) { grid-row: 6; }
/* ---------- 3. Kopfzeile (ohne Rahmen/Balken oben) ---------- */
.elementor-element-ea97977,
.elementor-element-a4de13f {
margin: 0 !important;
padding: 30px 34px 22px !important;
border: 0 !important;
box-shadow: none !important;
}
.elementor-element-ea97977 { background: #E7E1FB !important; }
.elementor-element-a4de13f { background: #FFFFFF !important; }
.elementor-element-a4de13f p {
font-family: "Syne", sans-serif !important;
font-weight: 700 !important;
font-size: 26px !important;
line-height: 1.1 !important;
margin: 0 !important;
color: #8A86A0 !important;
}
/* eAces-Spaltenkopf = Wortmarken-Logo aus der Mediathek.
Der Text "eAces" bleibt im Quelltext (Screenreader), wird nur
ausgeblendet. Anderes Logo: URL unten austauschen. */
.elementor-element-ea97977 p {
display: block !important;
margin: 0 !important;
height: 32px !important;
text-indent: -9999px !important;
overflow: hidden !important;
background: url("/eaces-new-site/wp-content/uploads/2026/08/eaces-wordmark-navy.png") left center / auto 32px no-repeat !important;
}
/* ---------- 4. Tabellenzeilen ---------- */
.elementor-element-51af253 .elementor-icon-list-item,
.elementor-element-1df7e6e .elementor-icon-list-item {
display: flex !important;
align-items: flex-start !important;
gap: 15px !important;
margin: 0 !important;
padding: 19px 34px !important;
}
.elementor-element-51af253 .elementor-icon-list-item {
background: #E7E1FB !important;
border-top: 1px solid rgba(59, 22, 121, .14) !important;
position: relative !important;
overflow: visible !important;
}
.elementor-element-1df7e6e .elementor-icon-list-item {
background: #FFFFFF !important;
border-top: 1px solid #EFECF7 !important;
}
/* Elementors eigene Trennlinie (:after) wird nicht gebraucht */
.elementor-element-1df7e6e .elementor-icon-list-item::after { display: none !important; }
/* ---------- 5. Haken / Kreuz (ohne Hintergrundform) ---------- */
.elementor-element-51af253 .elementor-icon-list-icon,
.elementor-element-1df7e6e .elementor-icon-list-icon {
flex: 0 0 18px !important;
width: 18px !important; height: 18px !important;
margin: 0 !important; padding: 0 !important;
background: transparent !important;
border-radius: 0 !important;
display: flex !important; align-items: center !important; justify-content: center !important;
align-self: flex-start !important;
position: relative !important; top: 3px !important;
}
.elementor-element-51af253 .elementor-icon-list-icon i,
.elementor-element-1df7e6e .elementor-icon-list-icon i {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important; height: 100% !important;
line-height: 1 !important;
font-size: 13px !important;
}
.elementor-element-51af253 .elementor-icon-list-icon i { color: #3B1679 !important; }
.elementor-element-1df7e6e .elementor-icon-list-icon i { color: #BEB8D2 !important; }
/* Rechte Spalte: Haken wird zum Kreuz (Font-Awesome-Zeichen) */
.elementor-element-1df7e6e .elementor-icon-list-icon i::before { content: "\f00d" !important; }
/* ---------- 6. Zeilentexte ---------- */
.elementor-element-51af253 .elementor-icon-list-text,
.elementor-element-1df7e6e .elementor-icon-list-text {
font-family: "DM Sans", sans-serif !important;
font-size: 17px !important;
line-height: 1.5 !important;
padding: 0 !important;
/* Elementor setzt hier align-self:center – dadurch rutschte der Text
in hohen Zeilen unter das Icon. Beides oben ausrichten: */
align-self: flex-start !important;
}
.elementor-element-51af253 .elementor-icon-list-text { color: #1F1B4B !important; }
.elementor-element-1df7e6e .elementor-icon-list-text { color: #7A7691 !important; }
/* ==============================================================
7. KRITERIEN-BESCHRIFTUNG (Spalte 1)
>>> HIER die fuenf Beschriftungen aendern <<<
============================================================== */
.elementor-element-51af253 .elementor-icon-list-item::before {
position: absolute !important;
left: -240px !important; right: auto !important;
top: -1px !important; bottom: 0 !important;
width: 240px !important; height: auto !important;
display: flex !important;
align-items: center !important;
padding-right: 24px !important;
border-top: 1px solid rgba(59, 22, 121, .13) !important;
font-family: "DM Sans", sans-serif !important;
font-size: 11.5px !important;
font-weight: 500 !important;
letter-spacing: .075em !important;
text-transform: uppercase !important;
line-height: 1.35 !important;
color: #3B1679 !important;
content: "01 // Kandidatenvorschläge";
}
.elementor-element-51af253 .elementor-icon-list-item:nth-child(2)::before { content: "02 // Ansprechpartner"; }
.elementor-element-51af253 .elementor-icon-list-item:nth-child(3)::before { content: "03 // Auswahl"; }
.elementor-element-51af253 .elementor-icon-list-item:nth-child(4)::before { content: "04 // Raten und Honorare"; }
.elementor-element-51af253 .elementor-icon-list-item:nth-child(5)::before { content: "05 // Nach der Besetzung"; }
html[lang^="en"] .elementor-element-51af253 .elementor-icon-list-item::before { content: "01 // Candidate proposals"; }
html[lang^="en"] .elementor-element-51af253 .elementor-icon-list-item:nth-child(2)::before { content: "02 // Point of contact"; }
html[lang^="en"] .elementor-element-51af253 .elementor-icon-list-item:nth-child(3)::before { content: "03 // Selection"; }
html[lang^="en"] .elementor-element-51af253 .elementor-icon-list-item:nth-child(4)::before { content: "04 // Rates and fees"; }
html[lang^="en"] .elementor-element-51af253 .elementor-icon-list-item:nth-child(5)::before { content: "05 // After placement"; }
/* ---------- 8. Kleines Notebook / Tablet quer (992–1199) ---------- */
@media (max-width: 1199.98px) and (min-width: 992px) {
.elementor-element-d339d35 { grid-template-columns: 205px 1fr 1fr !important; }
.elementor-element-51af253 .elementor-icon-list-item::before {
left: -205px !important; width: 205px !important;
padding-right: 18px !important; font-size: 10.5px !important; letter-spacing: .04em !important;
}
.elementor-element-ea97977,
.elementor-element-a4de13f { padding: 26px 26px 20px !important; }
.elementor-element-a4de13f p { font-size: 23px !important; }
.elementor-element-ea97977 p { height: 28px !important; background-size: auto 28px !important; }
.elementor-element-51af253 .elementor-icon-list-item,
.elementor-element-1df7e6e .elementor-icon-list-item { padding: 16px 26px !important; }
.elementor-element-51af253 .elementor-icon-list-text,
.elementor-element-1df7e6e .elementor-icon-list-text { font-size: 16px !important; }
}
/* ---------- 9. Tablet hoch & Smartphone (<=991): gestapelt ---------- */
@media (max-width: 991.98px) {
.elementor-element-d339d35 {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
padding: 8px 30px 56px !important;
}
.elementor-element-4b729db,
.elementor-element-c515fc8 {
display: flex !important; flex-direction: column !important;
margin: 0 !important; padding: 0 !important;
background: transparent !important; box-shadow: none !important;
}
.elementor-element-51af253,
.elementor-element-1df7e6e { display: block !important; }
.elementor-element-51af253 .elementor-icon-list-items,
.elementor-element-1df7e6e .elementor-icon-list-items { display: block !important; }
.elementor-element-ea97977,
.elementor-element-a4de13f { padding: 24px 24px 18px !important; }
.elementor-element-a4de13f p { font-size: 23px !important; }
.elementor-element-ea97977 p { height: 28px !important; background-size: auto 28px !important; }
.elementor-element-51af253 .elementor-icon-list-item,
.elementor-element-1df7e6e .elementor-icon-list-item { padding: 16px 24px !important; flex-wrap: wrap !important; }
.elementor-element-51af253 .elementor-icon-list-text,
.elementor-element-1df7e6e .elementor-icon-list-text { font-size: 16px !important; flex: 1 1 0 !important; min-width: 0 !important; }
/* Kriterium wird zur Ueberzeile in der lavendelfarbenen Zeile */
.elementor-element-51af253 .elementor-icon-list-item::before {
position: static !important;
left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
width: auto !important;
order: -1;
flex: 0 0 100%;
padding-right: 0 !important;
border-top: 0 !important;
margin: 0 0 9px !important;
font-size: 11px !important;
color: #3B1679 !important;
opacity: .85;
}
}
/* ---------- 10. Kleine Smartphones ---------- */
@media (max-width: 600px) {
.elementor-element-d339d35 { padding: 8px 20px 48px !important; gap: 14px !important; }
.elementor-element-ea97977,
.elementor-element-a4de13f { padding: 22px 20px 16px !important; }
.elementor-element-a4de13f p { font-size: 21px !important; }
.elementor-element-ea97977 p { height: 26px !important; background-size: auto 26px !important; }
.elementor-element-51af253 .elementor-icon-list-item,
.elementor-element-1df7e6e .elementor-icon-list-item { padding: 15px 20px !important; }
.elementor-element-51af253 .elementor-icon-list-text,
.elementor-element-1df7e6e .elementor-icon-list-text { font-size: 15.5px !important; line-height: 1.45 !important; }
}
/* ---------- 11. Abschnitt darueber auf dieselbe Flaeche bringen ----------
Die Grundfarbe von 1d85ce75 steht in den Elementor-Seiteneinstellungen und
ist dort veroeffentlicht noch Weiss. Der Abschnitt hat bereits eine 50 %
weisse Deckschicht, daher genuegt hier die Grundfarbe. Sobald die Seite mit
lavendelfarbenem Abschnitt veroeffentlicht ist, kann diese Regel weg. */
.elementor-6791 .elementor-element.elementor-element-1d85ce75 {
background-color: var(--e-global-color-secondary, #EDE9FE) !important;
}
/* ================ Ende eAces Vergleichstabelle ================ */
/* ============================================================
eAces - Contact page (Kontakt, page ID 173) - v4.1 - 19.08.2026
REPLACES the v4 block completely. Do not keep both.
------------------------------------------------------------
WHAT THIS DOES
1) Section "Nachricht senden / Termin buchen": vertical
breathing room reduced from 100px to 64px top and bottom
(desktop), and the two headlines put on one baseline so the
form and the booking calendar start on the same line.
2) Section "Ihre Ansprechpartnerin": the four contact items
(Adresse / Betriebszeit / E-Mail / Telefon) become a real
2x2 grid - same width, same left edge, same gaps. Before,
Elementor had them at 601 / 621 / 621 / 300px inline widths
inside 317px columns, so they overflowed their columns.
Typography unified (label DM Sans 12px uppercase, value
DM Sans 16px navy; before: 1x DM Sans 16px + 3x Syne 25px).
Icon circles get the brand hover: purple -> banana #FFF188,
glyph -> purple, same as the icon boxes on Home/Leistungen.
No card frames - the flat look of the original is kept.
3) Photo slide-in: NOT done here, see the note in part 3.
4) Booking calendar: the empty band above the calendar inside
the white card is removed. See part 4.
WHERE: scoped to .elementor-page-173 only, nothing else on the
site can be affected.
OFF: delete the whole block -> page returns to its old state.
CHANGED SINCE v4
- part 1: the forced min-height: 76px on the two intro texts
is GONE. It assumed the calendar intro always wraps to three
lines; on wide screens it wraps to two and the rule then held
open ~20px of dead space above the booking card. The two
headlines still sit on one baseline - that rule stays.
- part 4 is new.
============================================================ */
/* the Ansprechpartnerin section started another 30px lower */
.elementor-page-173 .elementor-element-32607963{ margin-top:0 !important; }
@media (min-width:1025px){
/* headlines on one baseline (widget heights were 81 vs 61px) */
.elementor-page-173 .elementor-element-c7ba719,
.elementor-page-173 .elementor-element-a1558cb{
min-height:81px; display:flex; flex-direction:column; justify-content:flex-end;
}
}
/* --- 2) Section "Ihre Ansprechpartnerin" -------------------- */
.elementor-page-173 .elementor-element-32607963{ overflow:hidden; }
.elementor-page-173 .elementor-element-32607963 > .elementor-container{ align-items:stretch; }
/* photo / panel split 41 / 59 as before, now written down */
@media (min-width:1025px){
.elementor-page-173 .elementor-element-7c6dc30{ width:41% !important; }
.elementor-page-173 .elementor-element-547ea8c3{ width:59% !important; }
}
/* The panel becomes ONE two-column grid. All Elementor wrappers in
between (the two inner sections, their containers, columns and
widget-wraps) are set to display:contents, so the four icon boxes
become real grid cells. That is what gives equal widths, equal
gaps and a free running order without restructuring the page in
Elementor. Same technique as the "Boutique statt Masse" table. */
.elementor-page-173 .elementor-element-547ea8c3 > .elementor-widget-wrap{
display:grid !important;
grid-template-columns:1fr 1fr;
column-gap:40px;
row-gap:32px;
align-content:center;
padding:clamp(40px,4.6vw,72px) clamp(24px,4.2vw,64px) !important;
}
.elementor-page-173 .elementor-element-455b57fb{
grid-column:1 / -1;
margin-bottom:clamp(18px,2vw,28px) !important;
}
.elementor-page-173 .elementor-element-1d9b755,
.elementor-page-173 .elementor-element-8a99c49,
.elementor-page-173 .elementor-element-1d9b755 > .elementor-container,
.elementor-page-173 .elementor-element-8a99c49 > .elementor-container,
.elementor-page-173 .elementor-element-1d9b755 .elementor-column,
.elementor-page-173 .elementor-element-8a99c49 .elementor-column,
.elementor-page-173 .elementor-element-1d9b755 .elementor-widget-wrap,
.elementor-page-173 .elementor-element-8a99c49 .elementor-widget-wrap{
display:contents !important;
}
/* Elementor had these four at 601 / 621 / 621 / 300px inline widths */
.elementor-page-173 .elementor-element-76e5d04,
.elementor-page-173 .elementor-element-a9ea11a,
.elementor-page-173 .elementor-element-ab7ecbb,
.elementor-page-173 .elementor-element-0ef09eb{
width:auto !important; max-width:none !important; margin:0 !important;
}
/* Running order: Adresse | Betriebszeit
E-Mail | Telefon
The two two-line items sit in the top row, the two one-line items
below, so both rows are balanced. Change these four numbers to
rearrange - the markup order in Elementor stays untouched. */
.elementor-page-173 .elementor-element-76e5d04{ order:1; } /* Geschaeftsadresse */
.elementor-page-173 .elementor-element-0ef09eb{ order:2; } /* Betriebszeit */
.elementor-page-173 .elementor-element-ab7ecbb{ order:3; } /* E-Mail-Adresse */
.elementor-page-173 .elementor-element-a9ea11a{ order:4; } /* Telefon */
/* No card container - the flat look of the original stays,
it is only aligned properly and typographically unified. */
.elementor-page-173 .elementor-element-32607963 .pxl-icon-box{
background:none;
border:0;
padding:0;
}
.elementor-page-173 .elementor-element-32607963 .pxl-item--inner{
display:flex; align-items:center; gap:25px;
}
.elementor-page-173 .elementor-element-32607963 .pxl-item--meta{ min-width:0; }
/* One of the four widgets (Geschaeftsadresse, 76e5d04) carries a
per-widget padding of 20px 0 0 set in Elementor. That pushed its
label and icon 20px below the item next to it. Elementor writes
that rule with !important on a five-class selector, so it is
neutralised here with a higher-specificity rule. Cleaner
long-term fix: clear the padding on that widget in Elementor and
delete this rule. */
body.elementor-page-173 .elementor-element-32607963 .elementor-element.elementor-widget-pxl_icon_box .pxl-icon-box,
body.elementor-page-173 .elementor-element-32607963 .elementor-element.elementor-widget-pxl_icon_box .pxl-icon-box .pxl-item--inner,
body.elementor-page-173 .elementor-element-32607963 .elementor-element.elementor-widget-pxl_icon_box .pxl-icon-box .pxl-item--meta{
padding:0 !important; margin:0 !important;
}
/* icon circle + banana hover (reference: Home/Leistungen icon boxes) */
.elementor-page-173 .elementor-element-32607963 .pxl-item--icon{
flex:0 0 40px; width:40px; height:40px; margin-top:0 !important;
border-radius:50%; background:#3B1679;
display:flex; align-items:center; justify-content:center;
transition:background-color .3s ease;
}
.elementor-page-173 .elementor-element-32607963 .pxl-item--icon svg{
width:24px; height:24px; display:block;
}
.elementor-page-173 .elementor-element-32607963 .pxl-item--icon svg path{
fill:#FFFFFF; transition:fill .3s ease;
}
.elementor-page-173 .elementor-element-32607963 .pxl-icon-box:hover .pxl-item--icon{
background:#FFF188;
}
.elementor-page-173 .elementor-element-32607963 .pxl-icon-box:hover .pxl-item--icon svg path{
fill:#3B1679;
}
/* type: small tracked label, readable value - identical for all
four items (before: 1x DM Sans 16px, 3x Syne 25px) */
.elementor-page-173 .elementor-element-32607963 .pxl-icon-box .pxl-item--title{
font-family:"DM Sans",sans-serif !important;
font-size:12px !important;
line-height:1.35 !important;
font-weight:700 !important;
letter-spacing:1.6px !important;
text-transform:uppercase !important;
color:#6A6490 !important;
margin:0 0 6px !important;
}
.elementor-page-173 .elementor-element-32607963 .pxl-icon-box .pxl-item--description,
.elementor-page-173 .elementor-element-32607963 .pxl-icon-box .pxl-item--description p{
font-family:"DM Sans",sans-serif !important;
font-size:16px !important;
line-height:1.55 !important;
font-weight:500 !important;
color:#1F1B4B !important;
margin:0 !important;
}
/* responsive */
@media (max-width:1024px){
.elementor-page-173 .elementor-element-32607963 > .elementor-container{ flex-wrap:wrap; }
.elementor-page-173 .elementor-element-7c6dc30{ width:100% !important; min-height:420px; }
.elementor-page-173 .elementor-element-547ea8c3{ width:100% !important; }
}
@media (max-width:640px){
.elementor-page-173 .elementor-element-7c6dc30{ min-height:300px; }
.elementor-page-173 .elementor-element-547ea8c3 > .elementor-widget-wrap{
grid-template-columns:1fr; row-gap:28px;
}
.elementor-page-173 .elementor-element-32607963 .pxl-item--inner{ gap:25px; }
.elementor-page-173 .elementor-element-32607963 .pxl-icon-box .pxl-item--description,
.elementor-page-173 .elementor-element-32607963 .pxl-icon-box .pxl-item--description p{ font-size:15px !important; }
}
/* --- 3) Photo sliding in from the right ---------------------
Deliberately NOT solved in CSS. Scroll-driven CSS animations
(animation-timeline: view()) stay inactive on this page -
tested live, the timeline never becomes active because of the
theme wrapper, so the photo would simply never appear.
The correct route is Elementor's own entrance animation, which
this page already uses for the two ellipse graphics:
Elementor -> column 7c6dc30 (the photo column)
-> Advanced -> Motion Effects
-> Entrance Animation: "Slide In Right", Duration: Slow
The rule in part 2 (overflow:hidden on the section) keeps the
photo inside the section while it slides in. */
/* --- 4) Booking calendar: empty band above the calendar ------
The Bookings iframe is output with an INLINE style attribute
containing margin-top: 50px (Elementor -> Kontakt -> Shortcode
widget eb8b41e). An inline style beats the margin-top: 0 in the
older v3 block, which has no !important - so that rule never took
effect and 50px of empty space sat inside the white card. On top
of it, the Microsoft Bookings page opens with its own ~34px grey
strip. Both are removed here and the 84px are handed back to the
iframe as height, so the white card keeps exactly the 731px it
had before - it just shows 84px more of the real booking UI.
MOBILE: below 768px the 34px crop is not applied. The Bookings
page lays out differently there and the strip could not be
verified at a real phone width, so only the 50px - the part that
is ours - is removed. If it looks right on a device, delete the
mobile override and the desktop rule takes over.
CLEANER LONG-TERM FIX: delete margin-top:50px from the inline
style of that shortcode widget in Elementor. Then only the -34px
line is needed here. */
.elementor-page-173 .eaces-booking-embed iframe{
margin-top:-34px !important; /* -50px inline margin, -34px grey strip */
height:744px !important; /* 660 + 50 + 34 -> card stays 731px */
}
@media (max-width:767px){
.elementor-page-173 .eaces-booking-embed iframe{
margin-top:0 !important;
height:710px !important;
}
}
/* ================ end eAces Contact page v4.1 ============== */
/* === eAces - Contact page (Kontakt, page ID 173) - form + booking band v5 - START === */
/* -----------------------------------------------------------------------------
WHAT THIS DOES
Rebuilds the "Nachricht senden / Termin buchen" section (Elementor section
bbdbc11) as a white content band with exactly the same geometry as the white
bands on the Home page - reference: "Was uns unterscheidet", section 19b3749.
- one white card, 8px rounded corners, inset 15px on each side
- 70px top/bottom padding, content on the shared 1290px grid
- 30px of page background above and below the card
- below 1025px the card goes full bleed (no inset, no rounded corners)
with flat 30px side padding and 56px vertical - 44px below 768px
BEFORE this block the white background sat on the TWO COLUMNS separately, so
the band was 1281px wide instead of 1400px and its content sat 15px off the
grid line that every other section on the site uses.
The horizontal formula max(15px, 50% - 645px) is the SAME one used by the
"eAces - Home content grid" block. If that formula is ever changed, change it
in both places or the Kontakt band will drift away from the Home bands.
NOTE ON STRUCTURE
On the Home bands the white sits on the single top-level column's
.elementor-widget-wrap. This section has TWO top-level columns (form and
booking), so there is no single wrap to paint - the card is painted on the
section's .elementor-container instead. Same numbers, same result.
All the paddings below are !important because the older Kontakt v3/v4/v4.1
blocks set the same properties with !important. This block therefore has to
sit AFTER them in the file.
-------------------------------------------------------------------------- */
/* the two inner blocks no longer carry a white card of their own */
.elementor-page-173 .elementor-element-bbdbc11 > .elementor-container > .elementor-column > .elementor-widget-wrap{
background: transparent !important;
}
/* ---------- 1025px and up: inset white card on the 1290px grid ---------- */
@media (min-width:1025px){
.elementor-page-173 .elementor-element-bbdbc11{
padding: 0 15px !important;
margin: 30px 0 !important; /* breathing gap above and below */
}
.elementor-page-173 .elementor-element-bbdbc11 > .elementor-container{
max-width: none !important;
width: 100% !important;
margin: 0 !important;
background: #FFFFFF;
border-radius: 8px;
padding: 70px max(15px, 50% - 645px) !important;
}
}
/* ---------- 1201px and up: form and booking side by side ---------- */
@media (min-width:1201px){
.elementor-page-173 .elementor-element-97bd98b > .elementor-widget-wrap{
padding: 0 30px 0 0 !important; /* 60px gutter, half from each side */
}
.elementor-page-173 .elementor-element-1cbd2e0 > .elementor-widget-wrap{
padding: 0 0 0 30px !important;
}
/* the two Elementor column widths add up to 99.3%, which left the booking
card 9px short of the right grid line - letting the right column grow
closes that gap so both edges sit exactly on the grid */
.elementor-page-173 .elementor-element-bbdbc11 > .elementor-container > .elementor-column.elementor-element-1cbd2e0{
flex-grow: 1;
}
}
/* ---------- 1025px to 1200px: still a card, but the columns stack ---------- */
@media (min-width:1025px) and (max-width:1200px){
.elementor-page-173 .elementor-element-97bd98b > .elementor-widget-wrap{
padding: 0 !important;
}
.elementor-page-173 .elementor-element-1cbd2e0 > .elementor-widget-wrap{
padding: 56px 0 0 !important; /* the gutter becomes vertical space */
}
.elementor-page-173 .elementor-element-bbdbc11 > .elementor-container > .elementor-column + .elementor-column{
margin-top: 0 !important; /* old 28px rule would double the gap */
}
}
/* ---------- up to 1024px: full bleed, exactly like the Home bands ---------- */
@media (max-width:1024px){
.elementor-page-173 .elementor-element-bbdbc11{
padding: 0 !important;
margin: 0 !important;
}
.elementor-page-173 .elementor-element-bbdbc11 > .elementor-container{
max-width: none !important;
width: 100% !important;
margin: 0 !important;
background: #FFFFFF;
border-radius: 0;
padding: 56px 30px !important;
}
.elementor-page-173 .elementor-element-97bd98b > .elementor-widget-wrap{
padding: 0 !important;
}
.elementor-page-173 .elementor-element-1cbd2e0 > .elementor-widget-wrap{
padding: 44px 0 0 !important;
}
.elementor-page-173 .elementor-element-bbdbc11 > .elementor-container > .elementor-column + .elementor-column{
margin-top: 0 !important;
}
}
/* ---------- phones ---------- */
@media (max-width:767px){
.elementor-page-173 .elementor-element-bbdbc11 > .elementor-container{
padding: 44px 30px !important;
}
}
/* === eAces - Contact page (Kontakt, page ID 173) - form + booking band v5 - END === */
/* =========================================================================
eAces - HOME (page ID 16365) - content grid
Puts every heading, text and element in the five white sections on the
SAME left line as the page hero and the purple services card, at every
screen width. Vertical spacing (70 / 56 / 44 padding and the 30px gaps
between the white bands) is NOT in here - it lives in the Elementor
settings of those sections and columns.
Installed: 19 Aug 2026
========================================================================= */
/* === eAces - Home content grid - START === */
/* The five white sections. If a section is ever rebuilt it gets a NEW
Elementor ID and must be added to every list below, otherwise it silently
drops off the grid.
43bab91 intro "Sie haben die offenen ..." + purple services card
19b3749 "Was uns unterscheidet"
6ae05ae "Stimmen"
a5aabeb "Case Studies aus der Praxis"
4781eac "Unsere Service-Partner / Unsere End-Kunden" */
/* 1. Containers must not re-centre inside the section - the old 1500px and
1290px caps fought each other and cost 1px of drift. */
.elementor-element-43bab91 > .elementor-container,
.elementor-element-19b3749 > .elementor-container,
.elementor-element-6ae05ae > .elementor-container,
.elementor-element-a5aabeb > .elementor-container,
.elementor-element-4781eac > .elementor-container,
.elementor-element-43bab91 .elementor-inner-section > .elementor-container,
.elementor-element-19b3749 .elementor-inner-section > .elementor-container,
.elementor-element-6ae05ae .elementor-inner-section > .elementor-container,
.elementor-element-a5aabeb .elementor-inner-section > .elementor-container,
.elementor-element-4781eac .elementor-inner-section > .elementor-container{
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* 2. THE GRID LINE.
max(15px, 50% - 645px) is the same rule the standardised page heroes
use, minus the 15px the section already contributes. It means:
"1290px centred content box on big screens, 30px minimum gutter on
small ones". 1290 / 2 = 645 - that is where the 645 comes from.
Change 645 only if the whole site grid changes. */
@media (min-width:1025px){
.elementor-element-43bab91 > .elementor-container > .elementor-column > .elementor-widget-wrap,
.elementor-element-19b3749 > .elementor-container > .elementor-column > .elementor-widget-wrap,
.elementor-element-6ae05ae > .elementor-container > .elementor-column > .elementor-widget-wrap,
.elementor-element-a5aabeb > .elementor-container > .elementor-column > .elementor-widget-wrap,
.elementor-element-4781eac > .elementor-container > .elementor-column > .elementor-widget-wrap{
padding-left: max(15px, 50% - 645px) !important;
padding-right: max(15px, 50% - 645px) !important;
}
}
/* Below 1025px the sections lose their own 15px side padding, so the band
has to supply 30px to land on the same line as the hero. */
@media (max-width:1024px){
.elementor-element-43bab91 > .elementor-container > .elementor-column > .elementor-widget-wrap,
.elementor-element-19b3749 > .elementor-container > .elementor-column > .elementor-widget-wrap,
.elementor-element-6ae05ae > .elementor-container > .elementor-column > .elementor-widget-wrap,
.elementor-element-a5aabeb > .elementor-container > .elementor-column > .elementor-widget-wrap,
.elementor-element-4781eac > .elementor-container > .elementor-column > .elementor-widget-wrap{
padding-left: 30px !important;
padding-right: 30px !important;
}
}
/* 3. Elementor adds its own padding to every column. On the OUTER edges that
pushes content off the line; between columns it is a wanted gutter, so
only first and last are reset. */
.elementor-element-43bab91 .elementor-inner-section > .elementor-container > .elementor-column:first-child > .elementor-widget-wrap,
.elementor-element-19b3749 .elementor-inner-section > .elementor-container > .elementor-column:first-child > .elementor-widget-wrap,
.elementor-element-6ae05ae .elementor-inner-section > .elementor-container > .elementor-column:first-child > .elementor-widget-wrap,
.elementor-element-a5aabeb .elementor-inner-section > .elementor-container > .elementor-column:first-child > .elementor-widget-wrap,
.elementor-element-4781eac .elementor-inner-section > .elementor-container > .elementor-column:first-child > .elementor-widget-wrap{
padding-left: 0 !important;
}
.elementor-element-43bab91 .elementor-inner-section > .elementor-container > .elementor-column:last-child > .elementor-widget-wrap,
.elementor-element-19b3749 .elementor-inner-section > .elementor-container > .elementor-column:last-child > .elementor-widget-wrap,
.elementor-element-6ae05ae .elementor-inner-section > .elementor-container > .elementor-column:last-child > .elementor-widget-wrap,
.elementor-element-a5aabeb .elementor-inner-section > .elementor-container > .elementor-column:last-child > .elementor-widget-wrap,
.elementor-element-4781eac .elementor-inner-section > .elementor-container > .elementor-column:last-child > .elementor-widget-wrap{
padding-right: 0 !important;
}
/* 4. The purple services card (widget 137e239) carried its own 30px side
margin. The grid supplies that gutter now, so the card's left edge
lands exactly on the line. Its 30px INNER padding is untouched - that
is the inset look of the card and the reference for this layout. */
.elementor-element-137e239 > .elementor-widget-container{
margin-left: 0 !important;
margin-right: 0 !important;
}
/* === eAces - Home content grid - END === */
/* === eAces - removing bottom gap - start === */
#pxl-main {
padding-bottom: 0 !important;
}
/* === eAces - removing bottom gap - end === */
/* === eAces - about us second header adjusted alignment to the title - start === */
@media (min-width: 768px) {
.elementor-163 .elementor-element.elementor-element-da6f8b0 > .elementor-element-populated {
padding-left: max(30px, 100% - 645px) !important;
}
}
/* === eAces - about us second header adjusted alignment to the title - end === */
/* === eAces - Initiative Application (page 19530) - layout v4 - start === */
/* WHAT THIS BLOCK DOES
1. Puts the "Arbeiten Sie mit uns" section on the site's 1290px content grid
(same left edge as the hero title and as every other page).
2. Matches the section heading to the site standard used on Leistungen,
Fuer Unternehmen, Fuer Kandidaten and Ueber uns:
kicker DM Sans 18/500 UPPERCASE #1F1B4B, headline Syne 40/700 #3B1679,
15px below each, no yellow marker.
3. Repairs the form layout: two columns down to 1024px, then stacked with the
form card kept to a readable width; the left photo no longer collapses.
All selectors are page-scoped (body.page-id-19530) - nothing else changes.
To revert: delete everything between this start marker and the end marker. */
/* 1 - Section on the 1290px content grid
30px side padding + a 1290px centred container reproduces the hero's
max(30px, 50% - 645px) formula exactly at every window width. */
body.page-id-19530 .elementor-element.elementor-element-52f93ea2{
padding-left:30px;
padding-right:30px;
}
body.page-id-19530 .elementor-element.elementor-element-52f93ea2 > .elementor-container{
max-width:1290px;
margin-left:auto;
margin-right:auto;
}
/* 2 - The two columns: flush to the grid, 40px gutter, white form card */
body.page-id-19530 .elementor-element.elementor-element-78fbe666 > .elementor-element-populated{
padding:70px 40px 70px 0;
}
body.page-id-19530 .elementor-element.elementor-element-2171f5a1 > .elementor-element-populated{
margin:0;
padding:64px 50px; /* identical to the Kontakt page form card */
background-color:#fff;
}
body.page-id-19530 .elementor-element.elementor-element-5761ed6b > .elementor-widget-container{
margin-top:0;
}
/* 3 - Section heading = site standard */
body.page-id-19530 .elementor-element.elementor-element-8166e56{
margin-bottom:15px;
}
body.page-id-19530 .elementor-element.elementor-element-66b154d8 h3{
font-weight:700;
margin-bottom:15px;
}
body.page-id-19530 .elementor-element.elementor-element-66b154d8::after{
content:none !important; /* removes the 48px yellow marker */
}
/* 4 - Left-column photo: correct height at every width
The theme forces .pxl-image-prl{height:auto} below 1200px; together with the
widget's own .pxl-image-wg{height:0} the photo collapsed to a 59px sliver.
height:100% resolves to the fixed box above 1200px and to the natural image
height below it. */
body.page-id-19530 .elementor-element.elementor-element-1dd04fb .pxl-image-wg{
height:100% !important;
}
body.page-id-19530 .elementor-element.elementor-element-1dd04fb img{
width:100% !important;
height:100% !important;
object-fit:cover !important;
}
/* 5 - Laptop 1025-1200px: keep the two columns
Elementor stacks columns below the site's 1200px breakpoint. Here the columns
stay side by side and the four contact items go into one column instead, so
the address never wraps into a third line. */
@media (min-width:1025px) and (max-width:1200px){
body.page-id-19530 .elementor-element.elementor-element-78fbe666,
body.page-id-19530 .elementor-element.elementor-element-2171f5a1{
width:50%;
}
body.page-id-19530 .elementor-element.elementor-element-78fbe666 > .elementor-element-populated{
padding:56px 32px 56px 0;
}
body.page-id-19530 .elementor-element.elementor-element-2171f5a1 > .elementor-element-populated{
padding:48px 40px;
}
body.page-id-19530 .elementor-element.elementor-element-3602d1f9 .elementor-column,
body.page-id-19530 .elementor-element.elementor-element-6cb1b572 .elementor-column{
width:100%;
}
body.page-id-19530 .elementor-element.elementor-element-33098137,
body.page-id-19530 .elementor-element.elementor-element-5ef6b190{
margin-top:24px;
}
body.page-id-19530 .elementor-element.elementor-element-33098137 > .elementor-element-populated,
body.page-id-19530 .elementor-element.elementor-element-5ef6b190 > .elementor-element-populated{
padding-left:0;
}
}
/* 6 - Tablet, below 1024px: stacked, form card kept to a readable width */
@media (max-width:1024px){
body.page-id-19530 .elementor-element.elementor-element-78fbe666 > .elementor-element-populated{
padding:56px 0 0;
max-width:760px;
}
body.page-id-19530 .elementor-element.elementor-element-2171f5a1 > .elementor-element-populated{
max-width:760px;
margin:40px 0 56px;
padding:48px 40px;
}
body.page-id-19530 .elementor-element.elementor-element-1dd04fb > .elementor-widget-container{
margin-top:40px;
}
}
/* 7 - Phone, below 768px */
@media (max-width:767px){
body.page-id-19530 .elementor-element.elementor-element-78fbe666 > .elementor-element-populated{
padding:44px 0 0;
}
body.page-id-19530 .elementor-element.elementor-element-2171f5a1 > .elementor-element-populated{
margin:32px 0 44px;
padding:32px 24px;
}
body.page-id-19530 .elementor-element.elementor-element-1dd04fb > .elementor-widget-container{
margin-top:32px;
}
}
/* 8 - Contact items: kill the empty title element
Every BR Icon Box renders an empty
whose spacing pushed the text 5px
below the icon centre between 560px and 767px. Removing it keeps icon and
text centred at every width. Scoped to this section only. */
body.page-id-19530 .elementor-element-52f93ea2 .pxl-icon-box .pxl-item--title.el-empty{
display:none;
}
/* === eAces - Initiative Application (page 19530) - layout v4 - end === */
/* === eAces - global left edge (header + hero + content) - start === */
/* Hero blocks are Elementor flexbox containers and carry 30px (tablet)
resp. 20px (phone) of inner padding, which pushed hero text 15px
further right than everything else. 15px puts them on the content line. */
@media (max-width:1024px){
.pxl-entry-content .elementor .e-con{
padding-left:15px !important;
padding-right:15px !important;
}
}
/* The header only had the 15px page-wrapper gutter, so the logo sat 15px
left of all content. This gives the header the same 30px gutter, up to
the width where the 1290px grid starts centring itself. */
@media (max-width:1349px){
#pxl-header-elementor .elementor-section:not(.elementor-inner-section) > .elementor-container{
padding-left:15px !important;
padding-right:15px !important;
}
.pxl-header-mobile .pxl-header-branding,
.pxl-header-mobile-default .pxl-header-branding{
margin-left:30px !important;
}
}
/* === eAces - global left edge (header + hero + content) - end === */
/* === eAces - Initiative Application (19530) - photo parallax - start === */
@media (min-width:1201px){
body.page-id-19530 .elementor-element.elementor-element-1dd04fb .pxl-image-wg{
height:calc(100% + 55px) !important;
}
}
/* === eAces - Initiative Application (19530) - photo parallax - end === */
/* === eAces - Kontakt (173) - booking embed spacing - start === */
body.page-id-173 .elementor-element.elementor-element-eb8b41e{
margin-top:30px !important;
margin-bottom:30px !important;
}
/* === eAces - Kontakt (173) - booking embed spacing - end === */
/* === eAces - mobile header right edge - start === */
/* #pxl-nav-mobile is positioned absolutely against the header row,
so its `right` value IS the gap to the page edge - the same 30px
the logo gets from .pxl-header-branding{margin-left:30px}. */
@media (max-width:1200px){
#pxl-nav-mobile{
right:30px !important;
}
}
/* === eAces - mobile header right edge - end === */
/* === eAces - Initiative Application (19530) - form card spacing - start === */
/* The white form card stretched over the full height of the section, so it
touched the hero photo above it and the footer below it. This gives it 30px
of page background above and below - the same rhythm the Kontakt page uses
for its white band. Only from 1025px up: below that the two columns stack
and the card already carries its own 40/56px (tablet) and 32/44px (phone)
margins from the "layout v4" block. Delete this block to revert. */
@media (min-width:1025px){
body.page-id-19530 .elementor-element.elementor-element-2171f5a1 > .elementor-element-populated{
margin-top:30px !important;
margin-bottom:30px !important;
}
}
/* === eAces - Initiative Application (19530) - form card spacing - end === */