/*
  TERO CSS Import-Hub.
  Modularer Split der alten tero-site.css.
  Reihenfolge bewusst erhalten, damit die Cascade stabil bleibt.
*/

@import url("./base/00-file-header-and-root.css");
@import url("./base/01-typo3-ce-basics.css");
@import url("./base/02-global-layout.css");
@import url("./base/03-typography.css");
@import url("./base/04-buttons.css");
@import url("./layout/00-header-nav.css");
@import url("./content-elements/banner-hero.css");
@import url("./content-elements/text-picture-cta.css");
@import url("./content-elements/tiles-accordions-legacy.css");
@import url("./content-elements/forms-maps-sticky-legacy.css");
@import url("./layout/01-footer-legacy.css");
@import url("./layout/02-responsive-legacy.css");
@import url("./overrides/00-overrides-header.css");
@import url("./newsletter/00-chooser.css");
@import url("./newsletter/01-cleverreach-form.css");
@import url("./newsletter/02-subpages.css");
@import url("./newsletter/03-popup.css");
@import url("./newsletter/04-modern-cards-and-popup.css");
@import url("./newsletter/05-responsive-card-popup-adjustments.css");
@import url("./overrides/01-pre-form-overrides.css");
@import url("./content-elements/form-validation-home-hero-alignment.css");
@import url("./jobs/00-jobfinder.css");
@import url("./jobs/01-application-page-base.css");
@import url("./jobs/02-application-form-design.css");
@import url("./content-elements/form-embed-alignment.css");
@import url("./jobs/03-upload-validation-feedback.css");
@import url("./jobs/04-unified-upload.css");
@import url("./content-elements/form-row-layout.css");
@import url("./jobs/05-job-contact-box.css");
@import url("./content-elements/flexible-text-base.css");
@import url("./content-elements/flexible-text-extended.css");
@import url("./content-elements/flexible-text-editor-comfort.css");
@import url("./content-elements/flexible-text-separated-controls.css");
@import url("./content-elements/legal-text.css");
@import url("./content-elements/dynamic-intro-tiles-layout.css");
@import url("./content-elements/faq-topic-buttons.css");
@import url("./content-elements/intro-tiles-5-actions.css");
@import url("./content-elements/dynamic-intro-tiles-responsive.css");
@import url("./content-elements/intro-tiles-5-alignment.css");
@import url("./content-elements/dynamic-timeline.css");
@import url("./content-elements/intro-tiles-5-buttons.css");
@import url("./locations/00-overview.css");
@import url("./locations/01-detail-pages.css");
@import url("./content-elements/applicant-tiles-base.css");
@import url("./overrides/02-applicant-tiles-specific-adjustments.css");
@import url("./layout/03-footer-new.css");
@import url("./content-elements/downloads.css");
@import url("./locations/02-team-group.css");
@import url("./content-elements/flexible-hoverbar.css");
@import url("./jobs/06-career-jobs.css");
@import url("./content-elements/supplementary-services.css");
@import url("./content-elements/supplementary-services-card-frames.css");
@import url("./content-elements/supplementary-services-inner-border.css");
@import url("./content-elements/interactive-service-cards.css");
@import url("./content-elements/text-info-card.css");
@import url("./overrides/03-services-alignment.css");
@import url("./overrides/04-button-color-harmonization.css");
@import url("./overrides/05-cards-accordions-cta-refinement.css");
@import url("./overrides/06-redbox-map-faq-adjustments.css");
@import url("./overrides/07-layout-alignment-forms-two-column.css");
@import url("./overrides/08-application-location-design-adjustments.css");
@import url("./overrides/09-flexible-hoverbar-neighbor-layout.css");
@import url("./jobs/07-form-collapse-alignment.css");
@import url("./content-elements/text-picture-cta-roofline-toggle.css");
@import url("./overrides/10-roofline-toggle-global.css");
@import url("./jobs/08-career-jobs-side-field.css");
@import url("./overrides/11-career-jobs-spacing.css");
@import url("./overrides/12-applicant-tiles-specific.css");
@import url("./jobs/09-career-jobs-button.css");
@import url("./overrides/13-location-overview-specific.css");
@import url("./overrides/14-flexible-text.css");
@import url("./layout/04-header-nav-adjustments.css");
@import url("./content-elements/social-media-wall.css");
@import url("./overrides/15-social-media-wall-alignment.css");
@import url("./content-elements/social-media-wall-carousel.css");

/* TERO Über-uns: gezielte Elementabstände nach Frontend-Abstimmung
   c513 → c127 bleibt unverändert.
   Folgende Abstände werden auf 0 gesetzt:
   c127 → c198, c198 → c128, c128 → c518, c518 → c209, c99 → c519
*/

/* Margin-Collapse verhindern, damit 0px wirklich 0px wird */
#c127,
#c198,
#c128,
#c518,
#c209,
#c99,
#c519 {
  display: flow-root !important;
}

/* untere Abstände der vorherigen Elemente entfernen */
#c127,
#c198,
#c128,
#c518,
#c99 {
  margin-bottom: 0 !important;
}

/* obere Abstände der folgenden Elemente entfernen */
#c198,
#c128,
#c518,
#c209,
#c519 {
  margin-top: 0 !important;
}

/* TYPO3-Frame-Abstände gezielt neutralisieren */
#c127.frame-space-after-extra-small,
#c127.frame-space-after-small,
#c127.frame-space-after-medium,
#c127.frame-space-after-large,
#c127.frame-space-after-extra-large,
#c198.frame-space-before-extra-small,
#c198.frame-space-before-small,
#c198.frame-space-before-medium,
#c198.frame-space-before-large,
#c198.frame-space-before-extra-large,
#c518.frame-space-before-extra-small,
#c518.frame-space-before-small,
#c518.frame-space-before-medium,
#c518.frame-space-before-large,
#c518.frame-space-before-extra-large,
#c518.frame-space-after-extra-small,
#c518.frame-space-after-small,
#c518.frame-space-after-medium,
#c518.frame-space-after-large,
#c518.frame-space-after-extra-large,
#c519.frame-space-before-extra-small,
#c519.frame-space-before-small,
#c519.frame-space-before-medium,
#c519.frame-space-before-large,
#c519.frame-space-before-extra-large {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* letzte Kind-Margins abfangen, falls sie aus dem Element heraus kollabieren */
#c127 > *:last-child,
#c198 > *:last-child,
#c128 > *:last-child,
#c518 > *:last-child,
#c99 > *:last-child {
  margin-bottom: 0 !important;
}

#c198 > *:first-child,
#c128 > *:first-child,
#c518 > *:first-child,
#c209 > *:first-child,
#c519 > *:first-child {
  margin-top: 0 !important;
}

/* /TERO Über-uns: gezielte Elementabstände nach Frontend-Abstimmung */

/* TERO Über-uns: finale harte Abstandskorrektur nach Sichtprüfung
   Bereits korrekt: c127 → c198, c99 → c519.
   Korrektur:
   c198 → c128 von 96px auf 0px
   c128 → c518 von 96px auf 0px
   c518 → c209 von 48px auf 0px
*/

/* c128 an c198 heranziehen */
#c128.tero-flexible-hoverbar {
  margin-top: -96px !important;
}

/* c518 an c128 heranziehen und Abstand zu c209 entfernen */
#c518.tero-text-info-card {
  margin-top: -96px !important;
  margin-bottom: 0 !important;
}

/* c209 direkt nach c518 starten lassen */
#c209.tero-location-team,
#c209.tero-team-group-new {
  margin-top: 0 !important;
}

/* Sicherheit gegen Frame-/Spacing-Klassen */
#c128,
#c518,
#c209 {
  margin-bottom: 0 !important;
}

#c128 > *:first-child,
#c518 > *:first-child,
#c209 > *:first-child {
  margin-top: 0 !important;
}

/* /TERO Über-uns: finale harte Abstandskorrektur nach Sichtprüfung */

/* TERO Standortseiten: Map-Kacheln c515/c516/c517 um ein Drittel niedriger */
#c515.tero-location-maps .tero-location-maps__map-card,
#c516.tero-location-maps .tero-location-maps__map-card,
#c517.tero-location-maps .tero-location-maps__map-card {
  height: 347px !important;
  min-height: 347px !important;
}

/* Map-Wrapper, Consent und iframe füllen weiterhin die reduzierte Kachel */
#c515.tero-location-maps .tero-location-maps__map-card > [class*="map_image_wrap"],
#c516.tero-location-maps .tero-location-maps__map-card > [class*="map_image_wrap"],
#c517.tero-location-maps .tero-location-maps__map-card > [class*="map_image_wrap"],
#c515.tero-location-maps .tero-map-consent,
#c516.tero-location-maps .tero-map-consent,
#c517.tero-location-maps .tero-map-consent,
#c515.tero-location-maps .tero-location-maps__map-card iframe,
#c516.tero-location-maps .tero-location-maps__map-card iframe,
#c517.tero-location-maps .tero-location-maps__map-card iframe {
  height: 100% !important;
  min-height: 0 !important;
}
/* /TERO Standortseiten: Map-Kacheln c515/c516/c517 um ein Drittel niedriger */

/* TERO Standortkarten: Routenplan nutzt Header-Extern-Icon statt Button-Pfeil */
#c515.tero-location-maps .tero-location-maps__route-button,
#c516.tero-location-maps .tero-location-maps__route-button,
#c517.tero-location-maps .tero-location-maps__route-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* alten Button-Pfeil entfernen */
#c515.tero-location-maps .tero-location-maps__route-button::after,
#c516.tero-location-maps .tero-location-maps__route-button::after,
#c517.tero-location-maps .tero-location-maps__route-button::after {
  content: none !important;
  display: none !important;
  background: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

/* gleiches sichtbares Icon wie oben im Header */
#c515.tero-location-maps .tero-location-maps__route-external-icon,
#c516.tero-location-maps .tero-location-maps__route-external-icon,
#c517.tero-location-maps .tero-location-maps__route-external-icon {
  display: inline-block !important;
  line-height: 1 !important;
  font-size: 1em !important;
  font-weight: inherit !important;
  transform: translateY(-1px) !important;
}
/* /TERO Standortkarten: Routenplan nutzt Header-Extern-Icon statt Button-Pfeil */

/* TERO Standortkarten: Routenplan-Button kompakter */
#c515.tero-location-maps .tero-location-maps__route-button,
#c516.tero-location-maps .tero-location-maps__route-button,
#c517.tero-location-maps .tero-location-maps__route-button {
  width: fit-content !important;
  min-width: 0 !important;
  max-width: max-content !important;
  padding: 12px 22px !important;
  gap: 8px !important;
  white-space: nowrap !important;
}

/* Extern-Icon enger und sauber ausrichten */
#c515.tero-location-maps .tero-location-maps__route-external-icon,
#c516.tero-location-maps .tero-location-maps__route-external-icon,
#c517.tero-location-maps .tero-location-maps__route-external-icon {
  margin-left: 2px !important;
  font-size: .95em !important;
  line-height: 1 !important;
  transform: translateY(-1px) !important;
}
/* /TERO Standortkarten: Routenplan-Button kompakter */

/* TERO FINAL: Original-Schreibschrift nur Zielstellen */
html body #c109 span.handwritten,
html body #c111 span.handwritten,
html body #c116 span.handwritten,
html body footer.foot .foot-top span.handwritten,
html body footer.foot.foot-new .foot-newsletter-cta__highlight {
  font-family: "Shadows Into Light", "Segoe Print", "Comic Sans MS", cursive !important;
}
/* /TERO FINAL: Original-Schreibschrift nur Zielstellen */


/* TERO Font lokal: Shadows Into Light */
@font-face {
  font-family: "Shadows Into Light";
  src: url("../Fonts/tero/shadows-into-light.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* /TERO Font lokal: Shadows Into Light */


/* TERO Dark Mode final startpage fixes */

/* Headernavigation im Dark Mode hell, Hover/Fokus bleibt TERO-rot */
html body[data-accessibility-dark="true"] .head .nav a {
  color: #f4f5f7 !important;
}

html body[data-accessibility-dark="true"] .head .nav li:hover > a,
html body[data-accessibility-dark="true"] .head .nav li:focus-within > a {
  color: var(--tero-red, #b81834) !important;
}

/* CTA-/Redbox-Textlinks im Dark Mode weiß */
html body[data-accessibility-dark="true"] .redboxcta a:not(.button):not([class*="button"]),
html body[data-accessibility-dark="true"] [class*="redbox"] a:not(.button):not([class*="button"]),
html body[data-accessibility-dark="true"] [class*="cta"] a:not(.button):not([class*="button"]) {
  color: #ffffff !important;
  text-decoration-color: rgba(255,255,255,.8) !important;
}

/* Vorhandene Subheader-/Roofline-Deko im Dark Mode grau */
html body[data-accessibility-dark="true"] .roofline::before,
html body[data-accessibility-dark="true"] .roofline::after,
html body[data-accessibility-dark="true"] .textpicture_roofline::before,
html body[data-accessibility-dark="true"] .textpicture_roofline::after,
html body[data-accessibility-dark="true"] [class*="__roofline"]::before,
html body[data-accessibility-dark="true"] [class*="__roofline"]::after {
  background-color: #747b86 !important;
  border-color: #747b86 !important;
}

/* Startseiten-Hero: bei TERO GmbH keine Deko im Dark Mode */
html body[data-accessibility-dark="true"] #c109 .roofline::before,
html body[data-accessibility-dark="true"] #c109 .roofline::after,
html body[data-accessibility-dark="true"] #c109 .textpicture_roofline::before,
html body[data-accessibility-dark="true"] #c109 .textpicture_roofline::after,
html body[data-accessibility-dark="true"] #c109 [class*="roofline"]::before,
html body[data-accessibility-dark="true"] #c109 [class*="roofline"]::after {
  content: none !important;
  display: none !important;
}

/* Instagram: Hülle dunkel, iframe-Inhalt nicht invertieren */
html body[data-accessibility-dark="true"] [class*="instagram"]:not(iframe),
html body[data-accessibility-dark="true"] .instagram-media {
  background-color: #1b1f26 !important;
  border-color: rgba(255,255,255,.14) !important;
}

html body[data-accessibility-dark="true"] iframe[src*="instagram.com"] {
  background-color: #1b1f26 !important;
  border-color: rgba(255,255,255,.14) !important;
  filter: none !important;
}

/* /TERO Dark Mode final startpage fixes */


/* TERO Dark Mode final roofline layer fix */

/*
  Subheader-/Roofline-Deko im Dark Mode:
  sichtbar zwischen dunklem Hintergrund und roter Subheader-Schrift.
  Positionen bleiben aus den bestehenden Komponenten-CSS erhalten.
*/
html body[data-accessibility-dark="true"] [class*="roofline"] {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;
  z-index: 1 !important;
}

html body[data-accessibility-dark="true"] [class*="roofline"]::before,
html body[data-accessibility-dark="true"] [class*="roofline"]::after {
  content: "" !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: -1 !important;
  background-color: #747b86 !important;
  border-color: #747b86 !important;
}

/* Startseiten-Hero und bewusst deaktivierte Deko bleiben ohne Design-Element */
html body[data-accessibility-dark="true"] #c109 [class*="roofline"]::before,
html body[data-accessibility-dark="true"] #c109 [class*="roofline"]::after,
html body[data-accessibility-dark="true"] [class*="decoration-hidden"]::before,
html body[data-accessibility-dark="true"] [class*="decoration-hidden"]::after {
  content: none !important;
  display: none !important;
}

/* /TERO Dark Mode final roofline layer fix */


/* TERO Dark Mode chatbot app background fix */

/*
  Verhindert den hellen Zwischenraum zwischen Chatbot-Header und Thread.
  Ursache war der weiße Hintergrund von .tero-chatbot__app hinter dem Header-Abstand.
*/
html body[data-accessibility-dark="true"] #tero-chatbot .tero-chatbot__app {
  background-color: #1b1f26 !important;
}

/* /TERO Dark Mode chatbot app background fix */


/* TERO Dark Mode jobdetail hero roofline exception */

/*
  Generische Ausnahme für alle Jobdetailseiten:
  Der Jobdetail-Hero nutzt ein leeres .roofline-Element nur als Deko.
  Diese Deko soll im Dark Mode im Jobdetail-Header nicht sichtbar sein.
  Normale Roofline-/Subheader-Dekos auf Content-Elementen bleiben unverändert.
*/
html body[data-accessibility-dark="true"] .tero-job-detail .tero-job-detail-hero > .roofline::before,
html body[data-accessibility-dark="true"] .tero-job-detail .tero-job-detail-hero > .roofline::after,
html body[data-accessibility-dark="true"] .tero-job-detail-hero > p.roofline::before,
html body[data-accessibility-dark="true"] .tero-job-detail-hero > p.roofline::after {
  content: none !important;
  display: none !important;
}

/* /TERO Dark Mode jobdetail hero roofline exception */


/* TERO Dark Mode newsletter popup overlay fix */

/*
  Newsletter-Popup im Dark Mode:
  Hintergrundseite bleibt erkennbar und wird nur abgedunkelt,
  statt komplett schwarz zu wirken.
*/
html body[data-accessibility-dark="true"] .tero-newsletter-popup {
  background: rgba(17, 19, 23, .68) !important;
  backdrop-filter: blur(2px) !important;
}

html body[data-accessibility-dark="true"] .tero-newsletter-popup__box {
  background: #1b1f26 !important;
  color: #f4f5f7 !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.42) !important;
}

/* /TERO Dark Mode newsletter popup overlay fix */


/* TERO Newsletter popup overlay blur light mode */

/*
  Newsletter-Popup im normalen Modus:
  Hintergrundseite bleibt sichtbar, wird aber leicht abgedunkelt und geblurred.
  Die Popup-Box selbst bleibt im bestehenden Light-Mode-Design.
*/
html body:not([data-accessibility-dark="true"]) .tero-newsletter-popup {
  background: rgba(17, 19, 23, .32) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  backdrop-filter: blur(2px) !important;
}

/* /TERO Newsletter popup overlay blur light mode */


/* TERO Thank-you page button design */

/*
  Danke-Seite:
  Button „Jetzt zur Startseite“ im TERO-Buttondesign analog Startseiten-Button „Jobs finden“.
  Gilt bewusst für Normalmodus und Dark Mode.
*/
a.button.tero-thankyou__button,
.tero-thankyou__button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 50px !important;
  min-width: 140px !important;
  padding: 0 26px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background-color: #d52a45 !important;
  background-image: linear-gradient(45deg, rgb(213, 42, 69) 0%, rgb(239, 91, 112) 52%, rgb(184, 23, 52) 100%) !important;
  color: #ffffff !important;
  font-family: var(--font-body, "Lato", Verdana, Arial, sans-serif) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: rgba(184, 24, 52, 0.18) 0px 12px 26px 0px, rgba(0, 0, 0, 0.08) 0px 5px 14px 0px !important;
  cursor: pointer !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}

a.button.tero-thankyou__button:hover,
a.button.tero-thankyou__button:focus-visible,
.tero-thankyou__button:hover,
.tero-thankyou__button:focus-visible {
  color: #ffffff !important;
  text-decoration: none !important;
  transform: translateY(-1px) !important;
  filter: brightness(1.03) !important;
  box-shadow: rgba(184, 24, 52, 0.24) 0px 15px 30px 0px, rgba(0, 0, 0, 0.1) 0px 6px 16px 0px !important;
}

/* /TERO Thank-you page button design */


/* TERO Thank-you page button remove arrow */

/*
  Danke-Seite:
  Der Button „Jetzt zur Startseite“ soll ohne globales Button-Pfeil-/Icon-Pseudo-Element erscheinen.
*/
a.button.tero-thankyou__button::before,
a.button.tero-thankyou__button::after,
.tero-thankyou__button::before,
.tero-thankyou__button::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
}

/* /TERO Thank-you page button remove arrow */


/* TERO c113 slide panel darkmode hover fix */

/*
  Startseite #c113:
  Light Mode bleibt vollständig im Originalzustand.
  Nur im Dark Mode wird das Hover-/Slide-in-Panel dunkel und lesbar.
*/
html body[data-accessibility-dark="true"] #c113 :is([class*="hover"], [class*="overlay"], [class*="caption"]) {
  background-color: #20242c !important;
  background-image: none !important;
  color: #f4f5f7 !important;
}

html body[data-accessibility-dark="true"] #c113 :is([class*="hover"], [class*="overlay"], [class*="caption"]) * {
  color: #f4f5f7 !important;
}

/* /TERO c113 slide panel darkmode hover fix */