/* ================================================================================
   TABLE OF CONTENTS
================================================================================
   1. GLOBAL & BASE LAYOUT ........... (Allgemeine Styles & CLS Fixes)
   2. COOKIE CONSENT BANNER .......... (OneTrust Anpassungen)
   3. NAVIGATION & HEADER ............ (Sticky Nav & Mobile Menu)
   4. COMPONENTS ..................... (Opener, Carousel, Accordion)
   5. UTILITIES ...................... (Farben, Abstände, Bilder)
   6. SPECIAL FIXES & BADGES ......... (KI-Labels, Footer SVG)
   7. CHATBOT & SEARCH OVERLAY ....... (Chatbot UI & Tooltips)
================================================================================
*/

/* =========================================
   1. GLOBAL & BASE LAYOUT
   ========================================= */

/* CLS Fix START */
main {
  min-height: 100vh !important;
  contain-intrinsic-size: 0 800px; 
  padding-bottom: 150px;
  background-color: #f5f7f9;
}

@media (max-width: 600px) {
  header {
    min-height: 60px !important;
  }
}

@media (min-width: 601px) {
  header:not(:has(hra-minimal-header)) {
    min-height: 130px !important;
  }
}
/* CLS Fix END */

/* Fixes too much left-margin for checkmarks */
ul.checked li:before {
  left: -30px !important;
}

ul.checked li {
  margin-left: 10px;
}


/* =========================================
   2. COOKIE CONSENT BANNER (OneTrust)
   ========================================= */

#onetrust-banner-sdk.otCenterRounded {
  width: 95%;
  max-width: 800px;
}

img.ot-bnr-logo {
  max-width: 270px !important;
}

#onetrust-banner-sdk.ot-bnr-w-logo .ot-bnr-logo {
  margin-bottom: 10px !important;
}

#onetrust-policy-text p br {
  display: none;
}

#onetrust-policy-text p, 
#onetrust-policy-text a {
  font-size: 14px !important;
}

h2#onetrust-policy-title {
  font-size: 1.5rem !important;
  padding-bottom: 0 !important;
}

@media (max-width: 600px) {
  .banner-header {
    display: none;
  }
  
  h2#onetrust-policy-title {
    font-size: 1.3rem !important;
    padding-top: 10px !important;
  }
  
  #onetrust-policy-text p, 
  #onetrust-policy-text a {
    font-size: 12.2px !important;
  }
  
  div#onetrust-button-group-parent {
    margin-top: 0px !important;
    padding-top: 0px !important;
  }
  
  button#onetrust-reject-all-handler {
    order: 2;
  }
}


/* =========================================
   3. NAVIGATION & HEADER
   ========================================= */

/* Fixes mobile nav contact box position */
.bm-nav-content,
.bm-sub-nav-content {
  height: fit-content !important;
}

.bm-nav-content hra-main {
  margin-bottom: 24px !important;
  display: block;
}

/* START STICKY NAV */
.sticky-bar .nav-wrapper:after {
  content: "";
  width: 100%;
  height: 3px !important;
  background-color: transparent !important;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.sticky-bar .mat-mdc-tab-links {
  border: 0px !important;
  align-items: center !important;
}

/* Styles for tabs inside the sticky bar */
.sticky-bar.container-fluid nav .mat-mdc-tab-links .d-flex div {
  padding-right: 15px;
  padding-left: 15px;
}

.sticky-bar.container-fluid nav .mat-mdc-tab-links .d-flex .mdc-tab--active {
  background-color: var(--state-default-hover);
}

.sticky-bar.container-fluid nav .mat-mdc-tab-links .d-flex > div:not(:last-child) {
  border-right: 1px solid #e1dcdc !important;
}

/* Styles for the first tab link */
.sticky-bar.container-fluid nav .mat-mdc-tab-links > .d-flex:first-child {
  border: 2px solid rgb(0, 102, 179) !important;
  border-radius: 22px;
  padding-left: 0px;
  padding-right: 10px;
  box-sizing: border-box;
  padding-bottom: 0px !important;
}

.sticky-bar.container-fluid nav .mat-mdc-tab-links > .d-flex:first-child:not(:has(div)) {
  border: 0px !important;
}

.sticky-bar.container-fluid nav .mat-mdc-tab-links .d-flex > div:first-child {
  padding-left: 20px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

.sticky-bar.container-fluid nav .mat-mdc-tab-links .d-flex > div:first-child .mdc-tab-indicator__content--underline {
  margin-left: 10px !important;
}

/* Styles for the sticky bar when it's active (with the sticky class) */
.sticky-bar.container-fluid.sticky nav .mat-mdc-tab-links .d-flex {
  border: 2px solid transparent !important;
  padding-left: 0px;
}

.sticky-bar.container-fluid.sticky nav .mat-mdc-tab-links .d-flex > div:first-child {
  border-left: 1px solid #e1dcdc !important;
  padding-left: 15px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

.sticky-bar.container-fluid.sticky nav .mat-mdc-tab-links .d-flex > div:first-child .mdc-tab-indicator__content--underline {
  margin-left: 0px !important;
}

.sticky-bar.container-fluid.sticky nav .mat-mdc-tab-links .d-flex > div:last-child {
  border-right: 1px solid #e1dcdc !important;
}

.sticky-bar.container-fluid.sticky .mat-mdc-tab-links a {
  max-height: calc(var(--link-max-width) - 5px) !important;
}

/* Styles for the CTA area */
.cta-wrapper.d-flex.align-items-center.ng-star-inserted {
  padding: 5px 0px 0px 0px !important;
}

.sticky-bar.container-fluid .cta-wrapper.d-flex.align-items-center {
  padding: 0px 0px 0px 0px !important;
}

.sticky-bar.container-fluid.sticky .cta-wrapper.d-flex.align-items-center {
  padding: 5px 0 0px 0px !important;
}
/* END STICKY NAV */


/* =========================================
   4. COMPONENTS (Opener, Carousel, Accordion)
   ========================================= */

mmm-multi-opener {
  min-height: 640px !important;
  display: block;
}

@media (max-width: 600px) {
  mmm-multi-opener {
    min-height: 830px !important;
    display: block;
  }
}

/* Reduces height of blue 50-50 Opener from 100 to 80vh */
.opener-50-50 {
  --openerHeight: calc(80vh - var(--headerSizeXL)) !important;
}

/* Fixed high padding between empty img header bug */
.opener-gerade .image-loaded-error {
  min-height: 0vh !important;
}

@media (min-width: 600px) {
  .opener-schraeg .image-container .image {
    aspect-ratio: 25 / 10 !important;
  }
}

.ultimate-renderer-layout--child-wrapper img,  
.image-col img {
  border-radius: 10px;
}

.opener-schraeg img {
  border-radius: 0;
}

/* Fixes non-clickable slider elements because of interactivity none. */
.kf-carousel-card, 
.kf-carousel-card .carousel-card-content {
  interactivity: auto !important;
  pointer-events: auto !important;
}

/* Fixes empty Inhaltsfragmente that have been deleted, but shown empty in frontend */
.kf-carousel-card:has(cms-visual-teaser .text.line-clamp:empty),
.col-lg-3:has(cms-visual-teaser .text.line-clamp:empty) {
  display: none !important;
}

cms-akkordeon cms-base {
  padding: 10px 0px 1px 0px !important;
}

div > cms-akkordeon:first-of-type cms-base {
  padding: 50px 0 !important;
}

/* No padding at end of content */
hra-ultimate-renderer {
  padding-bottom: 0px !important;
}


/* =========================================
   5. UTILITIES (Colors, Margins, Images)
   ========================================= */

.gap-20 {
  gap: 20px;
}

.custom-color-blue {
  color: rgb(0, 45, 103) !important;
}

.color-grey {
  color: var(--color-foreground-secondary-text);
}

.custom-bold {
  font-weight: 700; 
}

.btn-shadow {
  overflow: hidden;
  background-color: var(--color-background-tile);
  border-radius: var(--options-container-border-radius);
  box-shadow: var(--options-effect-box);
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 15px 20px;
}

/* Margins */
.margin-top-minus40 { margin-top: -40px !important; }
.margin-bottom-minus40 { margin-bottom: -40px !important; }
.margin-bottom-minus50 { margin-bottom: -50px !important; }
.margin-bottom-minus150 { margin-bottom: -150px !important; }
.margin-bottom-10 { margin-bottom: 10px !important; }

/* Images Max-Widths */
.img-max-200 { width: 200px !important; max-width: 80vw !important; }
.img-max-250 { width: 250px !important; max-width: 80vw !important; }
.img-max-300 { width: 300px !important; max-width: 80vw !important; }
.img-max-400 { width: 400px !important; max-width: 80vw !important; }
.img-max-500 { width: 500px !important; max-width: 80vw !important; }


/* =========================================
   6. SPECIAL FIXES & BADGES
   ========================================= */

/* Startseite Neuer Internetauftritt Meldung Fix */
@media (max-width: 1023px) {
  .mob-margin-bottom-0 div {
    margin-bottom: 0px !important;
  }
  .mob-margin-fix,
  .mob-margin-fix div {
    margin-top: -100px;
  }
  .mob-margin-fix-bottom div {
    margin-bottom: -100px;
  }
  .mob-d-none {
    display: none;
  }
  div:has(.mob-order-1) { order: 1; }
  div:has(.mob-order-2) { order: 2; }
}

@media (max-width: 1199px) {
  .mob-margin-bottom-minus150 {
    margin-bottom: -200px !important;
  }
}

/* Fixes OKP Bug 50-50 dark Teaser where text is black instead of white */
.kf-bg-primary [data-automation-id="ultimate-renderer-teaser-5050-text-container"] p {
  color: white;
}

/* KI-Label Badges */
.ki-hinweis {
  position: relative;
  display: inline-block; 
}

.ki-hinweis::after,
.ki-hinweis-opener picture::after {
  content: "";
  position: absolute;
  bottom: 10px; 
  right: 10px;
  width: 100px;
  height: 30px; 
  background: url('https://atruvia.scene7.com/is/content/atruvia/KI-Label_generiert') no-repeat center center;
  background-size: contain;
  pointer-events: none; 
  z-index: 10;
  opacity: 0.3;
}

.ki-hinweis.white::after,
.ki-hinweis-opener.white picture::after {
  background: url('https://atruvia.scene7.com/is/content/atruvia/KI-Label_generiert-white') no-repeat center center;
}

@media (max-width: 600px) {
  .ki-hinweis::after,
  .ki-hinweis-opener picture::after {
    width: 90px;
    height: 20px;
  }
}

/* START FOOTER SVG */
hra-footer {
  position: relative;
}

hra-footer-ui::before {
  display: block;
  content: "";
  position: absolute;
  top: -150px; 
  left: auto;
  width: 800px; 
  max-width: 90vw;
  height: 151px;
  background-image: url('https://atruvia.scene7.com/is/content/atruvia/footer-vorpommern-silhouette');
  background-size: contain;
  background-position: right bottom; 
  background-repeat: no-repeat;
  pointer-events: none; 
  will-change: transform; 
}
/* END FOOTER SVG */


/* =========================================
   7. CHATBOT & SEARCH OVERLAY
   ========================================= */

hra-chatbot .app-container.app-container {
  width: 2rem;
  height: 2rem;
  right: 3.2rem;
  bottom: 3.2rem;
}

@media (min-width: 62rem) {
  hra-chatbot .app-container.app-container {
    right: 3.5rem !important;
    bottom: 3.5rem !important;
  }
}

/* FAQ-Bot Ueberschrift */
app-chat h2.header-title {
  font-size: 1.275rem !important;
}

/* Navigation Tooltip FAQ-Bot */
enterprise-search-search-overlay-container .col-lg-8::before {
  content: "💡 Tipp: Schneller ans Ziel mit unserem Chatbot: Einfach unten rechts auf das Chat-Icon klicken. ↘️";
  display: block;
  margin-left: -6px !important;
  margin-bottom: 10px !important;
  font-weight: bold;
  color: #003a70; 
}