/* Produktfinder: Basis-Layout von Datenblatt-/Nockenselektor übernommen,
   Selektor-Styles aus feasibility/Resources/Public/Css/feasibility.less
   (einmalig von LESS nach CSS portiert; mCustomScrollbar durch nativen
   overflow-x-Scroll ersetzt). Farbpalette wie im Original:
   blue #00417e, midblue #3b73a6, lightblue #81a2c0, red #e00f22,
   green #3f791c, yellow #aea032, gray #ececec. */

* { box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    margin: 0;
    padding: 0;
    background: #fff;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body.embed {
    padding: 20px 0;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    color: #004885;
    padding: 16px 0;
    margin-bottom: 20px;
    border-bottom: 3px solid #004885;
}

.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.site-header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.site-title {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: #004885;
    text-transform: uppercase;
}

.site-logo img {
    display: block;
    background: #fff;
    max-height: 60px;
    width: auto;
    height: auto;
}

.lang-switch a {
    color: #004885;
    text-decoration: none;
    padding: 0 4px;
}

.lang-switch a[aria-current="true"] {
    font-weight: bold;
    text-decoration: underline;
}

.site-footer {
    margin-top: auto;
    padding: 20px 0;
    border-top: 1px solid #eee;
    background: #f7f7f7;
    color: #666;
    font-size: 13px;
}

.site-footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.site-footer a {
    color: #004885;
    text-decoration: none;
    padding: 0 4px;
}

.site-footer a:hover {
    text-decoration: underline;
}

.container {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 15px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.row > [class^="col-"],
.row > [class*=" col-"] {
    padding-right: 15px;
    padding-left: 15px;
    margin-bottom: 15px;
}

[class^="col-"], [class*=" col-"] { flex: 0 0 100%; max-width: 100%; }

@media (min-width: 576px) {
    .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
}

@media (min-width: 768px) {
    .col-md-3 { flex: 0 0 25%; max-width: 25%; }
    .col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .col-md-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
    .col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 992px) {
    .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
}

@media (min-width: 1200px) {
    .col-xl-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
}

@media (max-width: 767px) {
    .hidden-sm-down { display: none !important; }
}

h2, h3, h4 { color: #00417e; }

a { color: #00417e; }

b, strong { font-weight: 700; }

.btn {
    display: inline-block;
    padding: 8px 18px;
    background: #00417e;
    color: #fff;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    text-decoration: none;
}

.btn:hover { background: #3b73a6; }

/* --- Ampel-Farben (global, wie im Original mit !important) ------------- */

.red { color: #e00f22; }
.yellow { color: #aea032; }
.green { color: #3f791c; }

.redBg {
    color: #e00f22 !important;
    background: #f5b6b7 !important;
}

.yellowBg {
    color: #aea032 !important;
    background: #fbfea6 !important;
}

.greenBg {
    color: #3f791c !important;
    background: #b9e699 !important;
}

/* --- tx-feasibility (Port von feasibility.less) ------------------------ */

.tx-feasibility a.step4 {
    position: fixed;
    z-index: 50;
    bottom: 0;
    right: 0;
    width: 100%;
    background: #3f791c;
    cursor: pointer;
    text-align: center;
    height: 3em;
    line-height: 3em;
    font-size: 1em;
    color: white;
    text-transform: uppercase;
    font-weight: 700;
    transition: all 0.2s ease-in-out;
    transform: translate(0, 100%);
}

.tx-feasibility a.step4:hover {
    color: white;
    background: #3f791c;
}

.tx-feasibility a.step4.active {
    transform: translate(0, 0);
}

.tx-feasibility ul.steps {
    list-style: none;
    padding: 0 0 3em 0;
    margin: 0;
    display: flex;
}

.tx-feasibility ul.steps li {
    white-space: nowrap;
    font-size: 1em;
    color: white;
    text-transform: uppercase;
    font-weight: 700;
    height: 3em;
    line-height: 3em;
    background: #3b73a6;
    position: relative;
    flex: 1 1 25%;
    max-width: 25%;
    overflow: hidden;
    padding-left: 1em;
}

.tx-feasibility ul.steps li.step1:after,
.tx-feasibility ul.steps li.step2:after,
.tx-feasibility ul.steps li.step3:after {
    position: absolute;
    right: 0;
    top: 0;
    content: "";
    height: 3em;
    border-top: 1.5em solid white;
    border-bottom: 1.5em solid white;
    border-left: 1em solid #3b73a6;
}

.tx-feasibility ul.steps li.step2,
.tx-feasibility ul.steps li.step3,
.tx-feasibility ul.steps li.step4 {
    padding-left: 2em;
}

.tx-feasibility ul.steps li.step2:before,
.tx-feasibility ul.steps li.step3:before,
.tx-feasibility ul.steps li.step4:before {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    height: 3em;
    border-top: 1.5em solid transparent;
    border-bottom: 1.5em solid transparent;
    border-left: 1em solid white;
}

.tx-feasibility ul.steps li.active {
    background: #00417e;
}

.tx-feasibility ul.steps li.active:after {
    border-left-color: #00417e;
}

.tx-feasibility ul.steps li.step4 {
    background: #81a2c0;
}

.tx-feasibility ul.steps li.step4:after {
    border-left-color: #81a2c0;
}

.tx-feasibility ul.steps li.step4 .fa {
    display: none;
}

.tx-feasibility ul.steps li.step4.active {
    cursor: pointer;
    background: #3f791c;
}

.tx-feasibility ul.steps li.step4.active:after {
    border-left-color: #3f791c;
}

.tx-feasibility ul.steps li.step4.active .fa {
    display: inline-block;
}

.tx-feasibility .row {
    padding-bottom: 2em;
}

.tx-feasibility .row > * {
    display: block;
    padding-bottom: 2em;
}

.tx-feasibility img {
    width: 100%;
    height: auto;
}

.tx-feasibility .header {
    padding-bottom: 1em;
}

.tx-feasibility .header > h2 > span {
    background: #00417e;
    color: white;
    display: inline-block;
    border-radius: 50%;
    width: 2em;
    height: 2em;
    line-height: 2em;
    text-align: center;
    vertical-align: middle;
}

/* Kachel-Selektoren */

.tx-feasibility .branchSelector a,
.tx-feasibility .productSelector a,
.tx-feasibility .profileSelector a {
    padding-bottom: 1em;
    cursor: pointer;
    opacity: 0.8;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    transition: opacity 0.3s ease-out;
}

.tx-feasibility .branchSelector a img,
.tx-feasibility .productSelector a img,
.tx-feasibility .profileSelector a img {
    margin-bottom: .5em;
}

.tx-feasibility .branchSelector a .fa-close,
.tx-feasibility .productSelector a .fa-close,
.tx-feasibility .profileSelector a .fa-close {
    position: absolute;
    margin-left: .5em;
    display: none;
    color: #e00f22;
    font-size: 1.2em;
}

.tx-feasibility .branchSelector a .productText,
.tx-feasibility .productSelector a .productText,
.tx-feasibility .profileSelector a .productText {
    padding-top: .5em;
    font-weight: 400;
    text-transform: none;
}

.tx-feasibility .branchSelector a:hover,
.tx-feasibility .branchSelector a.active,
.tx-feasibility .productSelector a:hover,
.tx-feasibility .productSelector a.active,
.tx-feasibility .profileSelector a:hover,
.tx-feasibility .profileSelector a.active {
    opacity: 1;
}

.tx-feasibility .branchSelector a.active .fa-close,
.tx-feasibility .productSelector a.active .fa-close,
.tx-feasibility .profileSelector a.active .fa-close {
    display: inline-block;
}

.tx-feasibility .branchSelector a.inactive,
.tx-feasibility .productSelector a.inactive,
.tx-feasibility .profileSelector a.inactive {
    display: none;
}

/* Gewählte Branche/Produkt: nur die aktive Kachel (ohne Bild) anzeigen */

.tx-feasibility .branchSelector.active a,
.tx-feasibility .productSelector.active a {
    display: none;
}

.tx-feasibility .branchSelector.active a.active,
.tx-feasibility .productSelector.active a.active {
    display: block;
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

.tx-feasibility .branchSelector.active a.active img,
.tx-feasibility .productSelector.active a.active img {
    display: none;
}

.tx-feasibility .profileFilter a {
    display: block;
    cursor: pointer;
}

/* Ergebnistabelle */

.tx-feasibility table td {
    white-space: nowrap;
}

.tx-feasibility .resultTableScroll {
    overflow-x: auto;
}

.tx-feasibility table {
    margin-bottom: 0;
    border-collapse: collapse;
    width: 100%;
}

.tx-feasibility table thead tr {
    background: #00417e;
}

.tx-feasibility table thead tr * {
    color: white;
}

.tx-feasibility table tr:nth-child(even) td {
    background: #ececec;
}

.tx-feasibility table th,
.tx-feasibility table td,
.tx-feasibility table caption {
    border: 1px solid white;
    padding: .5em;
    text-align: center;
}

.tx-feasibility table td {
    background: #ececec;
    color: #00417e;
}

.tx-feasibility table.minimumLengthTable tr {
    display: table-row !important;
}

.tx-feasibility table.minimumLengthTable tr > * {
    font-size: .75em;
    border: none !important;
    text-align: right !important;
    background: transparent;
}

/* Legende + Anfrage */

.tx-feasibility .legend {
    padding-top: 2em;
}

.tx-feasibility .legend > div > div {
    padding: 0.5em;
}

.tx-feasibility .legend .frame {
    border: 1px solid #cccccc;
}

.tx-feasibility .inquiry {
    padding-top: 1em;
}

.tx-feasibility .inquiry h4 {
    margin: 0 0 .5em;
}