.floatstop { clear: both; }

body {
    background: url(../Images/hg.svg) no-repeat center -100px;
    background-size: contain;
}

.teaser-info-box {
    padding: 35px;
    min-height: auto;
}
.teaser-info-box, .teaser-info-box h2, .teaser-info-box h3, .teaser-info-box h4, .teaser-info-box h5, .teaser-info-box h6 {
    margin-bottom: 0;
}

/* .navi_with_child:after{
    content: '>';
    margin-left: 1rem;
    opacity: .5;
} */
.pswp__bg {
    background: rgba(3,50,67,.8);
}

/* Automatische Silbentrennung einfügen [TYPO3-17] */

.karte_meldungen_ecke {
    position: absolute;
    top: 0;
    right: 0;
    width: 25%;
}
.infoWindowContent {
    margin-top: -1rem;
}
.infoWindowContent p {
    margin: 0;
}
.titleWrapper > strong {
    font-size: 27px;
    line-height: 1.2;
    font-weight: var(--font-bold);
    color: var(--primary);
}

/* Automatische Silbentrennung einfügen [TYPO3-17] */

/* .page-item.active.current span {
    background-color: var(--secondary);
    color: var(--white-color);
} */

/* Automatische Silbentrennung einfügen [TYPO3-17] */
body { hyphens: auto; }

/* Width of Image Area [image_area_width] */


.image-area-width-100 { max-width: 100% !important; }
.textpic-right .text-area-width-0,
.textpic-left .text-area-width-0
{ max-width: 100% !important; width: 100% !important; }

.image-area-width-66 { max-width: 100% !important; }
.textpic-right .text-area-width-34,
.textpic-left .text-area-width-34
{ max-width: 100% !important; width: 100% !important; }

.image-area-width-50 { max-width: 100% !important; }
.textpic-right .text-area-width-50,
.textpic-left .text-area-width-50
{ max-width: 100% !important; width: 100% !important; }

.image-area-width-33 { max-width: 50% !important; width: calc(50% - (30px / 2)) !important; }
.textpic-right .text-area-width-67,
.textpic-left .text-area-width-67
{ max-width: 50% !important; width: calc(50% - (30px / 2)) !important; }

.image-area-width-25 { max-width: 50% !important; width: calc(50% - (30px / 2)) !important; }
.textpic-right .text-area-width-75,
.textpic-left .text-area-width-75
{ max-width: 50% !important; width: calc(50% - (30px / 2)) !important; }

/* Small devices (landscape phones, 576px and up) */
/* @media (min-width: 576px) { ... } */

/* Medium devices (tablets, 768px and up) */
/* @media (min-width: 768px) { ... } */

/* Large devices (desktops, 992px and up) */

@media (min-width: 992px) {
    .image-area-width-100 { max-width: 100% !important; }
    .textpic-right .text-area-width-0,
    .textpic-left .text-area-width-0
    { max-width: 100% !important; width: 100% !important; }

    .image-area-width-66 { max-width: 66% !important; width: calc(66% - (30px / 2)) !important; }
    .textpic-right .text-area-width-34,
    .textpic-left .text-area-width-34
    { max-width: 34% !important; width: calc(34% - (30px / 2)) !important; }

    .image-area-width-50 { max-width: 50% !important; width: calc(50% - (30px / 2)) !important; }
    .textpic-right .text-area-width-50,
    .textpic-left .text-area-width-50
    { max-width: 50% !important; width: calc(50% - (30px / 2)) !important; }

    .image-area-width-33 { max-width: 33% !important; width: calc(33% - (30px / 2)) !important; }
    .textpic-right .text-area-width-67,
    .textpic-left .text-area-width-67
    { max-width: 67% !important; width: calc(67% - (30px / 2)) !important; }

    .image-area-width-25 { max-width: 25% !important; width: calc(25% - (30px / 2)) !important; }
    .textpic-right .text-area-width-75,
    .textpic-left .text-area-width-75
    { max-width: 75% !important; width: calc(75% - (30px / 2)) !important; }
}

/* X-Large devices (large desktops, 1200px and up) */
/* @media (min-width: 1200px) { ... } */

/* XX-Large devices (larger desktops, 1400px and up) */

@media (min-width: 1400px) {

    .image-area-width-100 { max-width: 100% !important; }
    .textpic-right .text-area-width-0,
    .textpic-left .text-area-width-0
    { max-width: 100% !important; width: 100% !important; }

    .image-area-width-66 { max-width: 66% !important; width: calc(66% - (30px / 2)) !important; }
    .textpic-right .text-area-width-34,
    .textpic-left .text-area-width-34
    { max-width: 34% !important; width: calc(34% - (30px / 2)) !important; }

    .image-area-width-50 { max-width: 50% !important; width: calc(50% - (30px / 2)) !important; }
    .textpic-right .text-area-width-50,
    .textpic-left .text-area-width-50
    { max-width: 50% !important; width: calc(50% - (30px / 2)) !important; }

    .image-area-width-33 { max-width: 33% !important; width: calc(33% - (30px / 2)) !important; }
    .textpic-right .text-area-width-67,
    .textpic-left .text-area-width-67
    { max-width: 67% !important; width: calc(67% - (30px / 2)) !important; }

    .image-area-width-25 { max-width: 25% !important; width: calc(25% - (30px / 2)) !important; }
    .textpic-right .text-area-width-75,
    .textpic-left .text-area-width-75
    { max-width: 75% !important; width: calc(75% - (30px / 2)) !important; }

}
.textmedia, .textpic {
    gap: 30px;
}

/* Header in Anordnungen mit Bildern über dem Header hat einen unnötig hohen Abstand.
=> Diesen verringern und dem Elternenelement geben  */

.textpic-above .element-header,
.textpic-above-right .element-header,
.textpic-above-left .element-header
{ margin-top: 1rem; }

/*
.textpic-above,
.textpic-above-right,
.textpic-above-left
{ margin-top: 130px; }
 */

/* Image Copyright */
/* .copyright_on_image {
    display: block;
    text-shadow: 0px 0px 3px #000;
    margin-top: -23px;
    margin-left: 5px;
    font-size: .8rem;
    color: var(--white-color);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
 } */


.textlink{
    color: var(--secondary);
    font-weight: 500;
}

/* NACH DEM TERMIN ENTFERNEN */
/*
.tiles-container .tile {
  margin-right: 13px;
  margin-bottom: 13px;
}

.faqs-container h2 {
  margin: 0;
}

.faqs-container li {
  border-bottom: 1px solid rgb(76, 82, 96);
}

.headline {
	min-height: 0;
}
.full-right-curve, .full-left-curve{
	display: none;
}
.home-slider-box-inner p {
	color: #ffffff !important;
}
.home-slider-box-inner hr {
	opacity: 1;
	width: 30%;
	border-width: 3px;
}
.other-info {
	display: none;
}
*/



/* -------------- FORMULAR ------------------------------------------------------------------------------------------ */

.form-control {
    border: 1px solid #019FE3;
    border-radius: 30px;

    font: normal normal bold 20px/28px Open Sans;
    letter-spacing: 0px;

    padding: .5rem 1.5rem;
}

.form-select {
    border: 1px solid #019FE3;
    border-radius: 30px;

    font: normal normal bold 20px/28px Open Sans;
    letter-spacing: 0px;

    padding: .5rem 1.5rem;
}



.form-check-input {
    border: 1px solid #019FE3;
    border-radius: 30px;
    margin-right: 1rem;
}

.form-control[type="file"] {
    padding: .375rem .75rem;
}

/* Definieren Sie eine benutzerdefinierte Klasse für das File-Input */
.form-control[type="file"]::file-selector-button {
    background-color: #019fe31a; /* Hintergrundfarbe */
    color: #000000;
    transition: background-color 0.3s ease; /* Übergangseffekt */
    padding: .5rem 1.5rem;
}

/* Fügen Sie einen Hover-Effekt hinzu (optional) */
.form-control[type="file"]::file-selector-button:hover {
    background-color: #017bb3; /* Dunklere Hintergrundfarbe bei Hover */
}

.form-label {
    margin-top: 1.5rem;
}

/* -------------- KORREKTUREN DARK MODE ----------------------------------------------------------------------------- */

[data-bs-theme="dark"] img { filter: saturate(0) contrast(1.75); }
[data-bs-theme="dark"] video { filter: saturate(0) contrast(1.75); }
[data-bs-theme="dark"] .inner-banner { filter: saturate(0) contrast(1.75); }
[data-bs-theme="dark"] iframe { filter: saturate(0) contrast(1); }

[data-bs-theme="dark"] .bg-info { background-color: var(--white-color) !important; }
[data-bs-theme="dark"] .header-bottom { background-color: var(--white-color); }
/* [data-bs-theme="dark"] .font-large img { filter: grayscale(100%) contrast(0) brightness(0); } */
[data-bs-theme="dark"] .navbar-brand-logo-normal { filter: grayscale(100%) contrast(0) brightness(0); }
[data-bs-theme="dark"] .font-large .toggle-text-btn.active span,
[data-bs-theme="dark"] .font-large .toggle-text-btn.active,
[data-bs-theme="dark"] .font-large .toggle-text-btn:active,
[data-bs-theme="dark"] .font-large .toggle-text-btn.active { color: var(--black-color); text-decoration: underline; }
[data-bs-theme="dark"] .main-menu > ul > li > a { color: var(--black-color); }
[data-bs-theme="dark"] .main-menu > ul > li:hover > a,
[data-bs-theme="dark"] .main-menu > ul > li.active > a { color: var(--black-color); text-decoration: underline; }
[data-bs-theme="dark"] .submenu-menu .cursor-default { color: var(--black-color); }
[data-bs-theme="dark"] .submenu-menu li a { color: var(--black-color); }
[data-bs-theme="dark"] #accordion .card-header .btn span { color: var(--black-color); }
[data-bs-theme="dark"] a { color: var(--black-color); }
[data-bs-theme="dark"] p a { text-decoration: underline !important; }
[data-bs-theme="dark"] a:active,
[data-bs-theme="dark"] a:focus,
[data-bs-theme="dark"] a:hover,
[data-bs-theme="dark"] a:hover h5,
[data-bs-theme="dark"] a:hover span,
[data-bs-theme="dark"] a:hover p { color: var(--black-color); text-decoration: underline; }
[data-bs-theme="dark"] .breadcrumb-item.active a { color: var(--black-color); text-decoration: underline !important; font-weight: bold; }
[data-bs-theme="dark"] .frame-header h1,
[data-bs-theme="dark"] .frame-header h2,
[data-bs-theme="dark"] .frame-header h3,
[data-bs-theme="dark"] .frame-header h4,
[data-bs-theme="dark"] .frame-header h5,
[data-bs-theme="dark"] .frame-header h6 { color: var(--black-color); }
[data-bs-theme="dark"] .scroll-top {
    background-color: var(--black-color);
    border: 1px solid var(--black-color);
}
[data-bs-theme="dark"] a.scroll-top,
[data-bs-theme="dark"] a.scroll-top span.scroll-top-icon { color: var(--white-color); }
[data-bs-theme="dark"] a.scroll-top span.scroll-top-icon::before { border-top: 3px solid; border-left: 3px solid; }
[data-bs-theme="dark"] .accordion-item .accordion-header .accordion-button { color: var(--black-color); }
[data-bs-theme="dark"] .accordion-item .accordion-header .accordion-button::after,
[data-bs-theme="dark"] .accordion-item .accordion-header::before,
[data-bs-theme="dark"] .accordion-item .accordion-header::after { border-color: var(--black-color); }
[data-bs-theme="dark"] .accordion-item .accordion-header:hover .accordion-button { background: var(--white-color); text-decoration: underline !important; }
/* [data-bs-theme="dark"] .btn:hover {
    background-color: var(--white-color);
    border: 1px solid var(--black-color);
    text-decoration: underline !important;
} */
[data-bs-theme="dark"] .btn.btn-primary:hover { background: var(--white-color); color: var(--black-color) !important; text-decoration: underline !important; }
[data-bs-theme="dark"] .btn.btn-primary { background: var(--white-color); color: var(--black-color) !important; }
[data-bs-theme="dark"] .logo-overlay,
[data-bs-theme="dark"] .logo-overlay::before { background: var(--black-color) !important; color: var(--white-color) }
[data-bs-theme="dark"] .logo-overlay .btn.btn-default:hover { color: var(--black-color); text-decoration: underline !important; }
[data-bs-theme="dark"] .news .news-list-view .second-news .article .body-details .header h3 span { color: var(--black-color); }
[data-bs-theme="dark"] .news .news-list-view .second-news .article .col-md-12.text-right a.more { color: var(--black-color); }
[data-bs-theme="dark"] .news .page-navigation ul li.current { text-decoration: underline !important; }

/*
[data-bs-theme="dark"] .kontrast-blog .btn span,
[data-bs-theme="dark"] .kontrast-blog .btn { color: var(--black-color); text-decoration: underline; }
[data-bs-theme="dark"] .kontrast-blog img,

[data-bs-theme="dark"] .support-links .construction-sites,
[data-bs-theme="dark"] .support-links a.construction-sites:hover,
[data-bs-theme="dark"] .support-links a.construction-sites:hover span { background-color: var(--black-color); color: var(--white-color) }
[data-bs-theme="dark"] .support-links .fault-reports,
[data-bs-theme="dark"] .support-links .fault-reports:hover,
[data-bs-theme="dark"] .support-links .fault-reports:hover span { background-color: var(--black-color); color: var(--white-color) }
[data-bs-theme="dark"] .kundenportal_btn.nav-link,
[data-bs-theme="dark"] .kundenportal_btn.nav-link:hover,
[data-bs-theme="dark"] .kundenportal_btn.nav-link:hover span { background-color: var(--black-color); color: var(--white-color) }
[data-bs-theme="dark"] .inner-banner h1,
[data-bs-theme="dark"] .inner-banner h2 { text-shadow: 0px 0px 16px var(--white-color); }
[data-bs-theme="dark"] .inner-banner .row { padding: 1rem; background: var(--white-color); }
[data-bs-theme="dark"] .home-slider-box-inner h2 { padding: 1rem; background: var(--white-color); color: var(--black-color); width: fit-content; text-shadow: none; }
[data-bs-theme="dark"] .home-slider-box-inner .btn { background: var(--white-color); color: var(--black-color);  }
[data-bs-theme="dark"] .home-slider-box-inner .btn:hover { background: var(--white-color); color: var(--black-color); text-decoration: underline !important;  }

[data-bs-theme="dark"] .tx-indexedsearch-searchbox legend { color: var(--black-color); }
[data-bs-theme="dark"] #tx_indexedsearch #tx-indexedsearch-searchbox-button-submit { background: var(--white-color); color: var(--black-color) !important; }
[data-bs-theme="dark"] #tx_indexedsearch #tx-indexedsearch-searchbox-button-submit:hover { background: var(--white-color); color: var(--black-color) !important; text-decoration: underline !important; }

[data-bs-theme="dark"] #quickSearch .search_btn { background: var(--white-color); color: var(--black-color);  }
[data-bs-theme="dark"] #quickSearch .search_btn:hover { background: var(--white-color); color: var(--black-color); text-decoration: underline !important;  }

[data-bs-theme="dark"] .footer-part,
[data-bs-theme="dark"] .footer-part .footer-top { background: var(--white-color) }
[data-bs-theme="dark"] .footer-part .footer-top img,
[data-bs-theme="dark"] .footer-part .footer-top .img-fluid { filter: grayscale(100%) contrast(0) brightness(0); }
[data-bs-theme="dark"] .footer-part .border-right { border-right: 1px solid var(--black-color) !important; }
[data-bs-theme="dark"] .footer-top p,
[data-bs-theme="dark"] .footer-top ul li,
[data-bs-theme="dark"] .footer-top ul li a:hover,
[data-bs-theme="dark"] .footer-top ul li a:focus,
[data-bs-theme="dark"] .footer-top ul li a { color: var(--black-color); }
[data-bs-theme="dark"] .footer-top ul li a:hover,
[data-bs-theme="dark"] .footer-top ul li a:focus { text-decoration: underline !important; }
[data-bs-theme="dark"] .footer-bottom ul li a:hover,
[data-bs-theme="dark"] .footer-bottom ul li a:focus,
[data-bs-theme="dark"] .footer-bottom ul li a { color: var(--black-color); }
[data-bs-theme="dark"] .footer-bottom ul li a:hover,
[data-bs-theme="dark"] .footer-bottom ul li a:focus { text-decoration: underline !important; }

[data-bs-theme="dark"] .frame-has-backgroundimage .frame-inner .element-header,
[data-bs-theme="dark"] .frame-has-backgroundimage .frame-inner .text-column,
[data-bs-theme="dark"] .text-light,
[data-bs-theme="dark"] .calltoaction h1,
[data-bs-theme="dark"] .calltoaction h2,
[data-bs-theme="dark"] .calltoaction h3,
[data-bs-theme="dark"] .calltoaction h4,
[data-bs-theme="dark"] .calltoaction h5,
[data-bs-theme="dark"] .calltoaction h6 { padding: 1rem; background: var(--white-color); color: var(--black-color) !important; }
[data-bs-theme="dark"] .calltoaction .btn:hover { background: var(--white-color); color: var(--black-color) !important; text-decoration: underline !important; }
[data-bs-theme="dark"] .calltoaction .btn { background: var(--white-color); color: var(--black-color) !important; }

[data-bs-theme="dark"] .fliter ul li:first-child .checkbox-custom:checked + .checkbox-custom-label { background: var(--black-color); color: var(--white-color);  }
[data-bs-theme="dark"] .checkbox-custom:checked + .checkbox-custom-label { background: var(--black-color); color: var(--white-color);  }

[data-bs-theme="dark"] [style="background-color:#0677be;"] { background: var(--black-color) !important; color: var(--white-color) !important;  }
[data-bs-theme="dark"] [style="background-color:#0073ba;"] { background: var(--black-color) !important; color: var(--white-color) !important;  }
[data-bs-theme="dark"] .btn-construction { background: var(--black-color); color: var(--white-color);  }
[data-bs-theme="dark"] .btn-construction:hover { background: var(--black-color); color: var(--white-color); text-decoration: underline !important; }
[data-bs-theme="dark"] .btn-faults { background: var(--black-color); color: var(--white-color);  }
[data-bs-theme="dark"] .btn-faults:hover { background: var(--black-color); color: var(--white-color); text-decoration: underline !important; }
[data-bs-theme="dark"] [style="background-color:#dedede;"] { background-color: var(--white-color) !important; }
[data-bs-theme="dark"] [style="background-color:#dedede;"] p,
[data-bs-theme="dark"] [style="background-color:#dedede;"] h2.text-white { color: var(--black-color) !important; }
[data-bs-theme="dark"] .pagin  .page,
[data-bs-theme="dark"] .pagin  .next,
[data-bs-theme="dark"] .pagin  .prev,
[data-bs-theme="dark"] .pagin  .page1,
[data-bs-theme="dark"] .pagin  .next2,
[data-bs-theme="dark"] .pagin  .prev1,
[data-bs-theme="dark"] .pagin  .page2,
[data-bs-theme="dark"] .pagin  .next2,
[data-bs-theme="dark"] .pagin  .prev2 { color: var(--black-color) !important; }
 */

/* -------------- fixed semi-transparent Header & Slider - Problem -------------------------------------------------- */

/* --- Only to test --- You can replace this with your own design --- */


/* --- The section must not limit the content --- */
.section {
    overflow: unset !important;
}

/* ---Only to show the right position (remove after editing the size) --- */
/*
#page-content > .section > div:first-child.top_zero_slider{
    border-top: 1px solid deeppink;
}
*/

/* --- Edit the size of the banner --- */

#page-content > .section > div:first-child.top_zero_slider{
    margin-top: -172.2px;
}

@media (min-width: 576px) {
    #page-content > .section > div:first-child.top_zero_slider{
        margin-top: -89px;
    }
}

@media (min-width: 768px) {
    #page-content > .section > div:first-child.top_zero_slider{
        margin-top: -89px;
    }
}

@media (min-width: 992px) {
    #page-content > .section > div:first-child.top_zero_slider{
        margin-top: -164.2px;
    }
}

@media (min-width: 1200px) {
    #page-content > .section > div:first-child.top_zero_slider{
        margin-top: -172.2px;
    }
}

@media (min-width: 1400px) {
    #page-content > .section > div:first-child.top_zero_slider{
        margin-top: -167.2px;
    }
}

/* Farben */

.frame-layout-embedded>.frame-group-container>.frame-group-inner {
    background: transparent !important;
}

/**
 * primary: #019FE3 => Text: #ffffff
 */
.frame-background-primary.frame-layout-default,
.frame-background-primary.frame-layout-embedded .frame-group-container {
    background: var(--primary);
}
.frame-background-primary.frame-layout-default *,
.frame-background-primary.frame-layout-embedded .frame-group-container  * {
    color: var(--white-color);
}

/**
 * --secondary: #9DD2EA => Text: #ffffff
 */
.frame-background-secondary.frame-layout-default,
.frame-background-secondary.frame-layout-embedded .frame-group-container {
    background: var(--secondary);
}
.frame-background-secondary.frame-layout-default *,
.frame-background-secondary.frame-layout-embedded .frame-group-container  * {
    color: var(--white-color);
}

/**
 * success: #96BA00 => Text: #ffffff
 */
.frame-background-success.frame-layout-default,
.frame-background-success.frame-layout-embedded .frame-group-container {
    background: var(--success);
}
.frame-background-success.frame-layout-default *,
.frame-background-success.frame-layout-embedded .frame-group-container  * {
    color: var(--white-color);
}

/**
 * danger: #EB2121=> Text: #ffffff
 */
.frame-background-danger.frame-layout-default,
.frame-background-danger.frame-layout-embedded .frame-group-container {
    background: var(--danger);
}
.frame-background-danger.frame-layout-default *,
.frame-background-danger.frame-layout-embedded .frame-group-container  * {
    color: var(--white-color);
}

/**
 * warning: #F9B82A => Text: #ffffff
 */
.frame-background-warning.frame-layout-default,
.frame-background-warning.frame-layout-embedded .frame-group-container {
    background: var(--warning);
}
.frame-background-warning.frame-layout-default *,
.frame-background-warning.frame-layout-embedded .frame-group-container  * {
    color: var(--white-color);
}

/**
 * info: #1F4279 => Text: #ffffff
 */
.frame-background-info.frame-layout-default,
.frame-background-info.frame-layout-embedded .frame-group-container {
    background: var(--info);
}
.frame-background-info.frame-layout-default *,
.frame-background-info.frame-layout-embedded .frame-group-container  * {
    color: var(--white-color);
}

/**
 * light: #BFD4DE => Text: #000000
 */
.frame-background-light.frame-layout-default,
.frame-background-light.frame-layout-embedded .frame-group-container {
    background: var(--light);
}
.frame-background-light.frame-layout-default *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(.h1):not(.h2):not(.h3):not(.h4):not(.h5):not(.h6):not(h1 span):not(h2 span):not(h3 span):not(h4 span):not(h5 span):not(h6 span):not(.h1 span):not(.h2 span):not(.h3 span):not(.h4 span):not(.h5 span):not(.h6 span):not([class*="h1"]):not([class*="h2"]):not([class*="h3"]):not([class*="h4"]):not([class*="h5"]):not([class*="h6"]),
.frame-background-light.frame-layout-embedded .frame-group-container *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(.h1):not(.h2):not(.h3):not(.h4):not(.h5):not(.h6):not(h1 span):not(h2 span):not(h3 span):not(h4 span):not(h5 span):not(h6 span):not(.h1 span):not(.h2 span):not(.h3 span):not(.h4 span):not(.h5 span):not(.h6 span):not([class*="h1"]):not([class*="h2"]):not([class*="h3"]):not([class*="h4"]):not([class*="h5"]):not([class*="h6"]) {
    color: var(--dark);
}

/**
 * dark: #000000 => Text: #ffffff
 */
.frame-background-dark.frame-layout-default,
.frame-background-dark.frame-layout-embedded .frame-group-container {
    background: var(--dark);
}
.frame-background-dark.frame-layout-default *,
.frame-background-dark.frame-layout-embedded .frame-group-container  * {
    color: var(--white-color);
}

/* Boxen abrunden */
.frame-layout-embedded .frame-group-container {
    border-radius: 30px;
}

/* Abstand Listenpunkte */
.list-normal li,
.list-ordered li,
ol li {
    padding-bottom: .75rem;
}

/* Innanabstände Frames */
.frame {
    --frame-spacing: 10px;
}
.frame-background-primary.frame,
.frame-background-secondary.frame,
.frame-background-success.frame,
.frame-background-danger.frame,
.frame-background-warning.frame,
.frame-background-info.frame,
.frame-background-light.frame,
.frame-background-dark.frame {
    --frame-spacing: 50px;
}
.frame.frame-layout-embedded {
    --frame-spacing: 10px;
}
.frame.frame-layout-embedded .frame-group-inner {
    --frame-spacing: 40px;
}

/* Accordeon */
.accordion-item {
    border-bottom: 8px solid var(--primary);
    opacity: 1;
    border-radius: 0px;
    background-color: transparent;
    margin-bottom: 0;
}
.accordion-item .accordion-body {
    border: 0;
    padding: 0 25px 30px 25px;
}
/* Buttons Startseite */
#c1007 .btn {
    display: inline-flex;
    align-items: center;
    position: relative;
}

/* Für den ersten Button (Baustellen-Icon) */
#c1007 .frame-inner > p:first-child .btn::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 8px;
    background-image: url('/typo3conf/ext/psn_bootstrap_template/Resources/Public/Images/baustellen.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

/* Für den zweiten Button (Störungen-Icon) */
#c1007 .frame-inner > p:nth-child(2) .btn::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 8px;
    background-image: url('/typo3conf/ext/psn_bootstrap_template/Resources/Public/Images/störungen.svg');
    background-size: contain;
    background-repeat: no-repeat;
}
#c1007 .frame-inner > p .btn {
    padding: .75rem 1.3rem;
}
#c1007 .frame-inner > p .btn:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--white-color);
}
#c1007 .frame-inner > p .btn:hover::before {
    filter: brightness(0) invert(1);
}