/* --- 1. Kopfzeile: dunkles Band ueber die volle Breite --- */
 
#vvergleich .eingabeBox .line.header_line {
    grid-column: 1 / -1;
    margin: 0 -360px 32px -40px;
    padding: 0;
    border: 0;
}
 
#vvergleich .eingabeBox .line.header_line .cell.header {
    display: block;
    float: none;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 22px 24px;
    background: #1A1A1A;
    color: #FFFFFF;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
}
 
 
/* --- 2. Raster: zwei Feldspalten, rechts Platz fuer die Hilfetexte ---
 
   Die .line-Divs werden zu Grid-Zellen.
 
   WICHTIG: In den meisten Sparten liegen sie direkt in .eingabeBox. Sparten
   mit mehrstufigem Assistenten (Wohngebaeude, Feuerrohbau) schachteln sie
   zusaetzlich in Abschnittscontainer .tabl_part_1 / _2 / _3 ein. Deshalb
   sprechen alle Regeln hier die Zeilen als NACHFAHREN an (kein ">"), und
   Abschnitt 21 loest die Zwischencontainer per display:contents auf, damit
   die Zeilen trotzdem Zellen des Rasters werden.
 
   Zeilen mit Ueberschriften laufen ueber beide Feldspalten. Taucht in einer
   anderen Sparte eine Ueberschriftenzeile mit abweichender ID auf, rutscht
   sie in eine schmale Spalte; dann ihre ID unten ergaenzen. */
 
#vvergleich .eingabeBox {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 28px;
    align-items: stretch;
    padding: 0 360px 0 40px;
}
 
#vvergleich .eingabeBox .line.header_line,
#vvergleich .eingabeBox .line.zwischenueberschrift,
#vvergleich .eingabeBox .line.zw_ue,
#vvergleich .eingabeBox .line[id*="info_"],
#vvergleich .eingabeBox .line[id*="infotext"],
#vvergleich .eingabeBox .line[id*="subheader"],
#vvergleich .eingabeBox .line[id*="header"] {
    grid-column: 1 / -1;
}
 
/* Detailfragen einspaltig, ihre Labels sind lang */
#vvergleich #detailFragen {
    display: block;
}
 
#vvergleich #detailFragen .line {
    margin-bottom: 18px;
}
 
 
/* --- 3. Bloecke unterhalb des Rasters auf dieselbe Breite ---
 
   Filterauswahl, Erstinformation und Button liegen im HTML ausserhalb von
   .eingabeBox und brauchen den Einzug separat, damit Trennlinien und Karten
   buendig enden. */
 
#vvergleich .mrmoBoxZusatzfragenOptions,
#vvergleich .erstInfoChkBox,
#vvergleich .eingabe-submit-btn {
    padding-left: 40px;
    padding-right: 360px;
}
 
#vvergleich .eingabe-submit-btn {
    padding-bottom: 40px;
}
 
 
/* --- 4. Zelle: Label oben, Feld darunter, Hilfe-Icon oben rechts ---
 
   Kein !important auf .line verwenden: die per JavaScript versteckten
   Zeilen (Hunderassen, Diensthaftpflicht) tragen style="display:none"
   inline und wuerden sonst sichtbar.
 
   Das Feld haengt unten in der Zelle, damit Felder einer Reihe auf
   gleicher Hoehe stehen, auch neben zweizeiligen Labels. */
 
#vvergleich .eingabeBox .line {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}
 
#vvergleich .eingabeBox .line:hover {
    background: none;
}
 
#vvergleich .eingabeBox .line > .cell.sp1 {
    display: block;
    float: none;
    width: auto;
    max-width: calc(100% - 30px);
    min-height: 0;
    margin: 0;
    padding: 0 0 8px 0;
    text-align: left;
    color: #1A1A1A;
    line-height: 1.35;
}
 
#vvergleich .eingabeBox .line > .cell.sp1 label {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: #1A1A1A;
    cursor: pointer;
}
 
#vvergleich .eingabeBox .line > .cell.sp2 {
    display: block;
    float: none;
    width: 100%;
    min-height: 0;
    margin: auto 0 0 0;
    padding: 0;
}
 
#vvergleich .eingabeBox .line > .cell.sp3 {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    float: none;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
}
 
#vvergleich .eingabeBox .line > .cell.sp3 .infoicon {
    opacity: .55;
    transition: opacity .18s;
}
 
#vvergleich .eingabeBox .line > .cell.sp3 .infoicon:hover {
    opacity: 1;
}
 
/* Float-Clearer stoert die Ausrichtung und wird im Raster nicht gebraucht */
#vvergleich .eingabeBox .line > .clear {
    display: none;
}
 
 
/* --- 5. Hilfebox im reservierten Streifen ---
 
   Einblenden und vertikale Position steuert das Mr-Money-JavaScript.
   Hier wird sie nach rechts gezogen und als Karte gestaltet.
 
   Landet sie einmal an einer unsinnigen Stelle, die drei Zeilen mit
   right / width entfernen; sie liegt dann als Popup ueber dem Formular. */
 
#vvergleich #helpBoxRight,
#vvergleich #helpBoxRightDetail {
    left: auto !important;
    right: 40px !important;
    width: 300px !important;
    z-index: 100;
    box-sizing: border-box;
    padding: 16px 18px;
    background: #FFFFFF;
    border: 1px solid #E2E2E2;
    border-radius: 2px;
    box-shadow: 0 4px 18px rgba(26, 26, 26, .12);
    font-size: 14px;
    line-height: 1.55;
    color: #1A1A1A;
}
 
 
/* --- 6. Eingabefelder: nur Groesse und Abstaende.
   Farben kommen aus Datei 1. --- */
 
#vvergleich .eingabeBox .form-select,
#vvergleich .eingabeBox .form-text {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 14px;
    line-height: 1.4;
    border-radius: 2px;
    transition: border-color .18s;
}
 
#vvergleich .eingabeBox .form-select:focus,
#vvergleich .eingabeBox .form-text:focus {
    border-color: #B3A586;
    outline: none;
}
 
/* accent-color faerbt Haken und Auswahlpunkte gold.
   Der Editor warnt, im Browser funktioniert es. */
#vvergleich .eingabeBox input[type="checkbox"],
#vvergleich .eingabeBox input[type="radio"] {
    accent-color: #B3A586;
}
 
 
/* --- 7. Abschnitts-Labels im Eyebrow-Stil --- */
 
#vvergleich .eingabeBox .line.zwischenueberschrift {
    margin: 14px 0 0 0;
    padding: 26px 0 0 0;
    border-top: 1px solid #E5E5E5;
}
 
#vvergleich .eingabeBox .line.zwischenueberschrift .cell {
    padding: 0;
    margin: 0;
    min-height: 0;
}
 
#vvergleich .eingabeBox center {
    text-align: left;
}
 
#vvergleich .eingabeBox .line.zwischenueberschrift center {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    line-height: 1.4;
    color: #8A7B54;
}
 
#vvergleich .eingabeBox .line.zwischenueberschrift center strong {
    font-weight: 600;
}
 
#vvergleich .eingabeBox .line.zwischenueberschrift center::before {
    content: "// ";
}
 
 
/* --- 8. Einleitungstext "Aufnahme des gewuenschten Versicherungsbedarfs" --- */
 
#vvergleich .eingabeBox .vvgl-aufnahme-head {
    display: block;
    margin-bottom: 4px;
    font-size: 16px;
    font-weight: 600;
}
 
#vvergleich .eingabeBox .vvgl-aufnahme-body {
    display: block;
    font-size: 15px;
    line-height: 1.6;
}
 
 
/* --- 9. Filter-Auswahl: Radiooptionen als Karten --- */
 
#vvergleich .mrmoBoxZusatzfragenOptions {
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid #E5E5E5;
}
 
#vvergleich .mrmoBoxZusatzfragenOptions p.zusatzfragen {
    margin: 0 0 10px 0;
    padding: 0;
}
 
#vvergleich .mrmoBoxZusatzfragenOptions p.zusatzfragen > strong {
    display: block;
    margin-bottom: 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #8A7B54;
}
 
#vvergleich .mrmoBoxZusatzfragenOptions p.zusatzfragen > strong::before {
    content: "// ";
}
 
#vvergleich .mrmoBoxZusatzfragenOptions p.zusatzfragen label {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid #E2E2E2;
    border-radius: 2px;
    cursor: pointer;
    transition: border-color .18s;
}
 
#vvergleich .mrmoBoxZusatzfragenOptions p.zusatzfragen label:hover {
    border-color: #B3A586;
}
 
#vvergleich .mrmoBoxZusatzfragenOptions p.zusatzfragen input[type="radio"] {
    float: none;
    flex: none;
    margin: 2px 0 0 0;
}
 
#vvergleich .mrmoBoxZusatzfragenOptions p.zusatzfragen label span {
    font-size: 15px;
    line-height: 1.5;
}
 
 
/* --- 10. Erstinformation --- */
 
#vvergleich .erstInfoChkBox {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 24px 0 26px 0;
    font-size: 15px;
    line-height: 1.5;
}
 
#vvergleich .erstInfoChkBox input[type="checkbox"] {
    flex: none;
    margin: 2px 0 0 0;
}
 
#vvergleich .erstInfoChkBox strong {
    font-weight: 400;
}
 
#vvergleich .erstInfoChkBox a {
    text-decoration: underline;
}
 
 
/* --- 11. Berechnen-Button: dunkel, linksbuendig --- */
 
#vvergleich .eingabe-submit-btn {
    display: block;
    margin-top: 4px;
    text-align: left;
}
 
#vvergleich input.form-button.btn-berechnen {
    width: auto;
    margin: 0;
    padding: 20px 40px;
    background: #1A1A1A;
    color: #FFFFFF;
    border: 0;
    border-radius: 2px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter .2s;
}
 
#vvergleich input.form-button.btn-berechnen:hover {
    filter: brightness(1.4);
}
 
 
/* --- 12. Werbebox "Fotos machen statt tippen"
   Mr-Money-Funktion zum Einlesen von Versicherungsunterlagen.
   Echte Funktion, nicht nur Dekoration. Zum Ausblenden einkommentieren. --- */
 
/*
#mrmo_pha_preview_box,
#mrmo_pha_box {
    display: none !important;
}
*/
 
 
/* --- 13. Schmale Ansichten ---
 
   Der Rechner laeuft in einem eigenen iframe-Dokument, dessen Viewport die
   iframe-Breite ist. Diese Abfragen messen also die Rechnerbreite.
 
   Ab 860px entfaellt der Hilfestreifen, der seitliche Innenabstand bleibt.
   Ab 560px wird einspaltig umgebrochen und der Innenabstand verkleinert. */
 
@media only screen and (max-width: 860px) {
    #vvergleich .eingabeBox,
    #vvergleich .mrmoBoxZusatzfragenOptions,
    #vvergleich .erstInfoChkBox,
    #vvergleich .eingabe-submit-btn {
        padding-right: 40px;
    }
 
    #vvergleich .eingabeBox .line.header_line {
        margin-right: -40px;
    }
 
    #vvergleich #helpBoxRight,
    #vvergleich #helpBoxRightDetail {
        right: auto !important;
        width: auto !important;
        max-width: 320px;
    }
}
 
@media only screen and (max-width: 560px) {
    #vvergleich .eingabeBox {
        grid-template-columns: 1fr;
    }
 
    #vvergleich .eingabeBox,
    #vvergleich .mrmoBoxZusatzfragenOptions,
    #vvergleich .erstInfoChkBox,
    #vvergleich .eingabe-submit-btn {
        padding-left: 20px;
        padding-right: 20px;
    }
 
    #vvergleich .eingabeBox .line.header_line {
        margin-left: -20px;
        margin-right: -20px;
    }
 
    #vvergleich .eingabeBox .line.header_line .cell.header {
        padding: 18px 16px;
    }
 
    #vvergleich input.form-button.btn-berechnen {
        width: 100%;
        padding: 18px 20px;
    }
}
 
 
/* --- 14. Korrekturen nach dem Test auf der Website --- */
 
/* Das Basis-Layout begrenzt #vvergleich und zentriert es. Dadurch bleibt
   links und rechts ein Rand, in dem der dunkle Kopfbalken nicht bis an die
   Kante der .atv-embed-Karte laeuft. Der Rechner soll die volle
   iframe-Breite nutzen, begrenzt wird er ohnehin durch .atv-container. */
#vvergleich {
    max-width: none;
    width: auto;
    margin: 0;
    padding: 0;
}
 
/* Die Erstinformations-Zeile war als Flex-Container gesetzt. Dabei wird
   jeder Textabschnitt zu einem eigenen Flex-Element und der Satz bricht in
   gequetschte Spalten. Stattdessen normaler Textfluss mit gefloateter
   Checkbox davor. */
#vvergleich .erstInfoChkBox {
    display: block;
    margin: 24px 0 26px 0;
    font-size: 15px;
    line-height: 1.6;
    overflow: hidden;
}
 
#vvergleich .erstInfoChkBox input[type="checkbox"] {
    float: left;
    margin: 3px 12px 0 0;
}
 
 
/* --- 15. Innenabstand auf #vvergleich verlagern ---
 
   Bisher lag der seitliche Abstand nur auf der Eingabemaske. Die
   Ergebnisliste nach dem Berechnen hat eigene Container und lief deshalb
   bis an den Rand. Auf #vvergleich gesetzt gilt er fuer alle Bereiche,
   auch fuer Teile, deren Klassennamen wir nicht kennen.
 
   Der negative Margin am Kopfbalken aus Abschnitt 1 stimmt weiterhin:
   -40px links hebt das neue #vvergleich-Padding auf, -360px rechts das
   Padding plus den Hilfestreifen. */
 
#vvergleich {
    padding: 0 40px 40px 40px;
}
 
#vvergleich .eingabeBox {
    padding: 0 320px 0 0;
}
 
#vvergleich .mrmoBoxZusatzfragenOptions,
#vvergleich .erstInfoChkBox,
#vvergleich .eingabe-submit-btn {
    padding-left: 0;
    padding-right: 320px;
}
 
#vvergleich .eingabe-submit-btn {
    padding-bottom: 0;
}
 
/* Die Hilfebox sitzt jetzt am Rand der Padding-Box, nicht am Aussenrand */
#vvergleich #helpBoxRight,
#vvergleich #helpBoxRightDetail {
    right: 0 !important;
}
 
@media only screen and (max-width: 860px) {
    #vvergleich .eingabeBox,
    #vvergleich .mrmoBoxZusatzfragenOptions,
    #vvergleich .erstInfoChkBox,
    #vvergleich .eingabe-submit-btn {
        padding-right: 0;
    }
}
 
@media only screen and (max-width: 560px) {
    #vvergleich {
        padding: 0 20px 20px 20px;
    }
 
    #vvergleich .eingabeBox,
    #vvergleich .mrmoBoxZusatzfragenOptions,
    #vvergleich .erstInfoChkBox,
    #vvergleich .eingabe-submit-btn {
        padding-left: 0;
        padding-right: 0;
    }
 
    #vvergleich .eingabeBox .line.header_line {
        margin-left: -20px;
        margin-right: -20px;
    }
}
 
 
/* --- 16. Ergebnisliste nach dem Berechnen --- */
 
/* Button-Beschriftungen dunkel auf Gold. Das Basis-Layout setzt hier Weiss,
   obwohl --schaltflaeche-text-farbe in Datei 1 auf Dunkel steht. Weiss auf
   Gold hat ein Kontrastverhaeltnis von etwa 2:1 und ist schwer lesbar. */
#vvergleich input.form-button,
#vvergleich .vergleichbutton,
#vvergleich a.button_send,
#vvergleich a.antrag,
#vvergleich a.angebot,
#vvergleich a.lnk_antrag {
    color: #1A1A1A;
}
 
/* Der Berechnen-Button der Eingabemaske bleibt weiss auf Schwarz */
#vvergleich input.form-button.btn-berechnen {
    color: #FFFFFF;
}
 
/* Die Auswahlleiste am unteren Bildrand bringt ein eigenes Blau mit.
   Ihr style-Block steht im Body und damit nach dieser Datei, deshalb
   hier !important. */
#vergleichen-button-center {
    background: #1A1A1A !important;
    border-radius: 2px !important;
    padding: 16px 32px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
}
 
#vergleichen-button-center:hover {
    background: #3A3A3A !important;
}
 
#vergleichen-button-center:disabled {
    background: #CCCCCC !important;
}
 
#vergleichen-button-center-box .tarif-price {
    color: #1A1A1A !important;
}
 
/* Abschliessender Hinweistext und Spartenerlaeuterung */
#vvergleich .prozent_info {
    margin-top: 24px;
    font-size: 14px;
    line-height: 1.6;
    color: #5F5F5F;
}
 
#vvergleich h2 {
    margin: 32px 0 10px 0;
    font-size: 18px;
    font-weight: 600;
    color: #1A1A1A;
}
 
 
/* --- 17. Auswahlleiste fuer den Tarifvergleich ---
 
   Das Basis-Layout setzt die Leiste auf position:fixed mit bottom:0. Das
   ist fuer eine normale Seite gedacht, wo sie am Bildschirmrand haftet.
   In einem iframe ohne eigenen Scrollbalken gibt es diesen Bildschirmrand
   nicht: die Leiste klebt am unteren Rand des iframes und verdeckt den
   Text darunter. Deshalb laeuft sie hier im normalen Textfluss mit und
   erscheint an ihrer Stelle im Dokument, oberhalb der Tarifliste. */
 
#vergleichen-button-center-box {
    position: static !important;
    padding: 16px 0 !important;
    margin-bottom: 20px;
    box-shadow: none !important;
    border-top: 0 !important;
    border-bottom: 1px solid #E2E2E2 !important;
}
 
#vergleichen-button-center-box .inner-container {
    max-width: none !important;
}
 
/* Beschriftung des Vergleichen-Buttons. Das Basis-Layout faerbt
   input[type=button] dunkel ein, wodurch der Text auf dem dunklen
   Grund unsichtbar wird. */
#vergleichen-button-center {
    color: #FFFFFF !important;
}
 
#vergleichen-button-center:disabled {
    background: #E5E5E5 !important;
    color: #8A8A8A !important;
}
 
/* Auswahlhaken in der Ergebnisliste in Gold statt im Systemblau.
   Die Regel in Abschnitt 6 greift nur in der Eingabemaske. */
#vvergleich input[type="checkbox"],
#vvergleich input[type="radio"] {
    accent-color: #B3A586;
}
 
 
/* --- 18. Eckige Kanten statt abgerundeter ---
 
   Das Basis-Layout rundet Buttons, Karten und Dialoge staerker ab, als es
   zum ATVANTIS-Layout passt. Hier durchgehend auf 2px gesetzt, wie bei
   den Eingabefeldern und dem Berechnen-Button.
 
   Bewusst KEINE Sammelregel auf alle Nachkommen: die Leistungspunkte in
   der Ergebnisliste sind Kreise und sollen rund bleiben. */
 
#vvergleich input[type="button"],
#vvergleich input[type="submit"],
#vvergleich input[type="text"],
#vvergleich input.form-button,
#vvergleich input.form-text,
#vvergleich select.form-select,
#vvergleich .vergleichbutton,
#vvergleich .searchQuery,
#vvergleich a.antrag,
#vvergleich a.angebot,
#vvergleich a.lnk_antrag,
#vvergleich a.button_send,
#vvergleich .ergebnisBox,
#vvergleich .ergebnisBox-out,
#vvergleich .tl-box,
#vvergleich .tl-details-box,
#vvergleich .resultFilter,
#vvergleich .resultFilter_out,
#vvergleich #dialog-box,
#vvergleich .ui-slider,
#vvergleich .ui-slider-horizontal,
#vvergleich .progress,
#vvergleich .progress-bar {
    border-radius: 2px;
}
 
/* Auswahlleiste: Karten und Entfernen-Knopf. Ihr style-Block steht im
   Body und damit nach dieser Datei, deshalb !important. */
#vergleichen-button-center-box .tarif-item,
#vergleichen-button-center-box .tarif-item.placeholder,
#vergleichen-button-center-box .tarif-item .remove-btn {
    border-radius: 2px !important;
}
 
/* Werbebox "Fotos machen statt tippen", falls sie sichtbar bleibt */
#mrmo_pha_preview_box,
#mrmo_pha_box,
#mrmo_pha_box .mrmo_pha_feature-box,
#mrmo_pha_box .mrmo_pha_qr-placeholder,
#mrmo_pha_box .mrmo_pha_upload-icon,
#btnSendBugReport,
#mrmo_pha_open_pha {
    border-radius: 2px !important;
}
 
 
/* --- 19. Tarifkarten eckig ---
 
   Die Regel aus Abschnitt 18 hat bei den Ergebniskarten nicht gewonnen.
   Das Basis-Layout setzt den Radius dort entweder selbst mit !important
   oder ueber einen spezifischeren Selektor. Deshalb hier mit !important. */
 
#vvergleich .ergebnisBox,
#vvergleich .ergebnisBox > .line,
#vvergleich .ergebnisBox .innerbox,
#vvergleich .ergebnisBox .tipp_header,
#vvergleich .ergebnisBox.tipp,
#vvergleich .ergebnisBox.preisTipp,
#vvergleich .ergebnisBox.leistungTipp,
#vvergleich .ergebnisBox.preisleistungTipp,
#vvergleich .ergebnisBox.superTipp,
#vvergleich .ergebnisBox-out,
#vvergleich .tl-box,
#vvergleich .tl-details-box,
#vvergleich .tl-details-head,
#vvergleich .tl-details-elem,
#vvergleich .searchQueryBox,
#vvergleich .slide_filterbox {
    border-radius: 2px !important;
}
 
 
/* --- 20. Mobil-Absicherung ---
 
   Auf dem iPhone standen Label und Feld weiterhin nebeneinander, obwohl
   das Raster schon einspaltig umgebrochen war. Vermutlich bringt
   style-responsive2.css eigene Mobil-Regeln mit, die spezifischer sind
   als die aus Abschnitt 4 (etwa ueber #vvergleich.mrmo-responsive).
 
   Deshalb hier dieselben Regeln mit hoeherer Spezifitaet. Weiterhin kein
   !important auf .line: die per JavaScript versteckten Zeilen tragen
   style="display:none" inline und sollen versteckt bleiben. */
 
@media only screen and (max-width: 560px) {
 
    body #vvergleich.mrmo-responsive .eingabeBox {
        display: block;
        padding-left: 0;
        padding-right: 0;
    }
 
    body #vvergleich.mrmo-responsive .eingabeBox .line {
        position: relative;
        display: flex;
        flex-direction: column;
        margin: 0 0 18px 0;
        padding: 0;
    }
 
    body #vvergleich.mrmo-responsive .eingabeBox .line > .cell.sp1 {
        display: block;
        float: none;
        width: auto;
        max-width: calc(100% - 30px);
        margin: 0;
        padding: 0 0 8px 0;
        text-align: left;
    }
 
    body #vvergleich.mrmo-responsive .eingabeBox .line > .cell.sp2 {
        display: block;
        float: none;
        width: 100%;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
 
    body #vvergleich.mrmo-responsive .eingabeBox .line > .cell.sp3 {
        position: absolute;
        top: 0;
        right: 0;
        width: auto;
        float: none;
        margin: 0;
        padding: 0;
    }
 
    body #vvergleich.mrmo-responsive .eingabeBox .form-select,
    body #vvergleich.mrmo-responsive .eingabeBox .form-text {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
 
    /* Ueberschriftenzeilen brauchen im Block-Layout keine Grid-Angabe mehr */
    body #vvergleich.mrmo-responsive .eingabeBox .line.zwischenueberschrift {
        margin: 24px 0 18px 0;
    }
}
 
/* Nachtrag zu Abschnitt 20: die Regel oben setzt margin auf ALLE .line und
   nimmt damit dem Kopfbalken seine negativen Raender. Hier wieder gesetzt,
   passend zum #vvergleich-Innenabstand von 20px auf schmalen Ansichten. */
 
@media only screen and (max-width: 560px) {
    body #vvergleich.mrmo-responsive .eingabeBox .line.header_line {
        margin: 0 -20px 24px -20px;
    }
}
 
 
/* ---------------------------------------------------------------------------
   21. SPARTEN MIT MEHRSTUFIGEM ASSISTENTEN (Wohngebaeude, Feuerrohbau)
 
   Diese Sparten verpacken ihre Eingabezeilen zusaetzlich in Abschnitts-
   container:
 
     <div class="eingabeBox wohngebaude">
       <div class="line header_line"> … </div>
       <div class="tabl_part_1" id="tabl_part_1">
         <div class="line"><div class="cell sp1_6 header">Gebaeudedaten</div></div>
         <div class="line" id="tr_vorvers5"> … </div>
         …
         <div class="line"><div class="cell sp1_6 z-w-navi"><input … "Weiter"></div></div>
       </div>
       <div class="tabl_part_2" id="tabl_part_2"> … </div>
       <div class="tabl_part_3" id="tabl_part_3"> … </div>
     </div>
 
   Ohne die Regeln hier waere jeder Container EIN Rasterzelle und alle Zeilen
   darin stuenden untereinander, mit Label neben statt ueber dem Feld.
 
   display:contents loest den Container auf: seine Zeilen werden direkte
   Zellen des Rasters aus Abschnitt 2, ohne dass eine eigene Box entsteht.
   Das ist wichtig, weil das Mr-Money-Skript die Container zwischen den
   Schritten per inline style="display:none" ein- und ausblendet. Inline
   schlaegt CSS, das Ausblenden funktioniert also weiter.
   --------------------------------------------------------------------------- */
 
#vvergleich .eingabeBox .tabl_part_1,
#vvergleich .eingabeBox .tabl_part_2,
#vvergleich .eingabeBox .tabl_part_3 {
    display: contents;
}
 
/* Erste Zeile eines Abschnitts ist dessen Ueberschrift ("Gebaeudedaten",
   "Bauausfuehrungen", "Versicherungsumfang"), die letzte enthaelt die
   Weiter-/Zurueck-Knoepfe. Beide tragen keine eigene Klasse, laufen aber
   ueber die volle Breite. */
 
#vvergleich .eingabeBox .tabl_part_1 > .line:first-child,
#vvergleich .eingabeBox .tabl_part_2 > .line:first-child,
#vvergleich .eingabeBox .tabl_part_3 > .line:first-child,
#vvergleich .eingabeBox .tabl_part_1 > .line:last-child,
#vvergleich .eingabeBox .tabl_part_2 > .line:last-child,
#vvergleich .eingabeBox .tabl_part_3 > .line:last-child {
    grid-column: 1 / -1;
}
 
/* Abschnittsueberschrift im Eyebrow-Stil, wie die Zwischenueberschriften.
   :not(.header_line) haelt den dunklen Kopfbalken ganz oben davon frei,
   der seine eigene Gestaltung aus Abschnitt 1 behaelt. */
 
#vvergleich .eingabeBox:not(#detailFragen) .line:not(.header_line) > .cell.sp1_6.header {
    display: block;
    width: auto;
    margin: 14px 0 0 0;
    padding: 26px 0 0 0;
    border-top: 1px solid #E5E5E5;
    background: none;
    color: #8A7B54;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .18em;
    line-height: 1.4;
    text-transform: uppercase;
    text-align: left;
}
 
#vvergleich .eingabeBox:not(#detailFragen) .line:not(.header_line) > .cell.sp1_6.header::before {
    content: "// ";
}
 
/* Weiter / Zurueck am Ende eines Abschnitts */
 
#vvergleich .eingabeBox .cell.z-w-navi {
    display: flex;
    gap: 12px;
    width: auto;
    margin: 8px 0 0 0;
    padding: 0;
    min-height: 0;
}
 
#vvergleich input.form-button.btn-weiter,
#vvergleich input.form-button.btn-zurueck {
    width: auto;
    margin: 0;
    padding: 14px 28px;
    border: 0;
    border-radius: 2px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
}
 
#vvergleich input.form-button.btn-weiter {
    background: #1A1A1A;
    color: #FFFFFF !important;
}
 
#vvergleich input.form-button.btn-zurueck {
    background: #FFFFFF;
    color: #1A1A1A !important;
    border: 1px solid #E2E2E2;
}
 
#vvergleich input.form-button.btn-weiter:hover {
    filter: brightness(1.4);
}
 
#vvergleich input.form-button.btn-zurueck:hover {
    border-color: #B3A586;
}
 
/* Hinweiszeilen ohne eigene Ueberschrift (z. B. der Satz zur kostenfreien
   Feuerrohbauversicherung) stehen in einer sp2-Zelle. Sie sollen wie
   Fliesstext wirken, nicht wie ein Eingabefeld. */
 
#vvergleich .eingabeBox .line.zw_ue > .cell.sub-sub-header {
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
    min-height: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #5F5F5F;
    text-align: left;
}
 
/* Auf schmalen Ansichten entfaellt das Raster ohnehin (Abschnitt 20).
   display:contents stoert dort nicht, die Zeilen bleiben Block-Elemente. */