/* ===== EINBAU UND KUEHLUNG ===== */
/* Schrittzettel: grosse Nummer links, Text rechts. Danach Schema und Tabelle. */

.einbau-mitte {
    margin: 0 auto;
    max-width: 1060px;
    padding: 0 var(--abstand-x-mittel);
    width: 100%;
}

.einbau-kopf {
    border-bottom: 1px solid var(--ton-rand);
    padding: calc(var(--hoehe-kopf) + 70px) 0 44px;
}
.einbau-kopf h1 { max-width: 16ch; }
.einbau-lead {
    color: var(--ton-text-grau);
    font-size: 16px;
    line-height: 1.9;
    margin-top: 18px;
    max-width: 62ch;
}

.einbau-schritte { padding: 20px 0 30px; }
.schritt {
    border-bottom: 1px solid #ece8e4;
    display: flex;
    gap: 40px;
    padding: 38px 0;
}
.schritt:last-child { border-bottom: 0; }
.schritt .nummer {
    color: var(--ton-primaer);
    flex: 0 0 110px;
    font-size: 56px;
    font-weight: 300;
    line-height: 1;
}
.schritt-text { min-width: 0; }
.schritt-text h2 {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 10px;
}
.schritt-text p {
    color: var(--ton-text-grau);
    font-size: 15px;
    line-height: 1.95;
    max-width: 70ch;
}

.einbau-luft { background: var(--ton-flaeche); padding: 76px 0 70px; }
.einbau-luft .einbau-mitte { display: flex; gap: 56px; }
.luft-text { width: 46%; }
.luft-text p {
    color: var(--ton-text-grau);
    font-size: 15px;
    line-height: 1.95;
    margin-top: 16px;
}
.luft-text .luft-klein {
    border-left: 2px solid var(--ton-primaer);
    font-size: 13.5px;
    margin-top: 24px;
    padding: 2px 0 2px 16px;
}
.luft-bild { width: 54%; }
.luft-bild svg { height: auto; width: 100%; }
.luft-bild .gehaeuse { fill: #fff; stroke: #1e1e1e; stroke-width: 1.5; }
.luft-bild .teil { fill: #e4dfd9; }
.luft-bild .karte { fill: #1e1e1e; }
.luft-bild .luefter { fill: none; stroke: #cc8100; stroke-width: 1.6; }
.luft-bild .kalt { fill: none; stroke: #587086; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.luft-bild .warm { fill: none; stroke: #9a938c; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.luft-bild .beschriftung {
    fill: #776e67;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.einbau-stoerung { padding: 80px 0 110px; }
.stoerung-tabelle { border-collapse: collapse; margin-top: 30px; width: 100%; }
.stoerung-tabelle th {
    border-bottom: 1px solid var(--ton-rand-kopf);
    color: var(--ton-text-still);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .12em;
    padding: 0 18px 12px 0;
    text-align: left;
    text-transform: uppercase;
}
.stoerung-tabelle td {
    border-bottom: 1px solid #e6e1dc;
    font-size: 15px;
    line-height: 1.75;
    padding: 17px 18px 17px 0;
    vertical-align: top;
}
.stoerung-tabelle td:first-child { font-weight: 500; width: 30%; }
.stoerung-tabelle td:nth-child(2) { color: var(--ton-text-grau); width: 34%; }
.stoerung-fuss {
    color: var(--ton-text-grau);
    font-size: 15px;
    line-height: 1.9;
    margin-top: 28px;
    max-width: 72ch;
}
.stoerung-fuss a { text-decoration: underline; }
.stoerung-fuss a:hover { color: var(--ton-primaer); }

@media screen and (max-width: 991px) {
    .einbau-kopf { padding: calc(var(--hoehe-kopf) + 36px) 0 32px; }
    .schritt { gap: 22px; padding: 30px 0; }
    .schritt .nummer { flex-basis: 64px; font-size: 38px; }
    .einbau-luft .einbau-mitte { flex-direction: column; gap: 30px; }
    .luft-text,
    .luft-bild { width: 100%; }
    .einbau-stoerung { padding: 60px 0 80px; }
}

@media screen and (max-width: 575px) {
    .schritt { flex-direction: column; gap: 6px; }
    .stoerung-tabelle,
    .stoerung-tabelle tbody,
    .stoerung-tabelle tr,
    .stoerung-tabelle td { display: block; width: 100%; }
    .stoerung-tabelle thead { display: none; }
    .stoerung-tabelle tr { border-bottom: 1px solid #e6e1dc; padding: 14px 0; }
    .stoerung-tabelle td { border: 0; padding: 2px 0; }
    .stoerung-tabelle td:first-child,
    .stoerung-tabelle td:nth-child(2) { width: 100%; }
    .stoerung-tabelle td:nth-child(2):before { color: var(--ton-text-still); content: "Ursache: "; }
    .stoerung-tabelle td:last-child:before { color: var(--ton-text-still); content: "Hilft: "; }
}