@charset "UTF-8";
/* ==========================================================================
   money-factory.de  |  Rahmen um die Vergleichsmodule
   --------------------------------------------------------------------------
   Datei:  /assets/css/vvergleich.css

   Diese Datei enthaelt UNSERE Regeln. Das Stylesheet des Anbieters liegt
   getrennt daneben in vvergleich-vendor.css. Beide werden nur auf
   Rechnerseiten geladen:

       $MF_PAGE['styles'] = [MF_RECHNER_VENDOR_CSS, MF_RECHNER_CSS];

   ==========================================================================
   WIE vvergleich-vendor.css ERZEUGT WIRD
   ==========================================================================
   Nicht von Hand kopieren. Ein Befehl holt die Datei, schneidet den ersten
   Teil ab und legt den Rest in die Schicht "vendor":

     Auf dem Server (SSH), im Verzeichnis assets/css:

       { printf '@layer vendor {\n'; \
         curl -fsSL https://www.mr-money.de/module/layout/00204699/headervgl_layout1.css \
         | tail -c +38; \
         printf '\n}\n'; } > vvergleich-vendor.css

     Unter Windows (PowerShell), danach hochladen:

       $u = "https://www.mr-money.de/module/layout/00204699/headervgl_layout1.css"
       $c = (Invoke-WebRequest -Uri $u -UseBasicParsing).Content
       "@layer vendor {" + $c.Substring($c.IndexOf("#vvergleich")) + "}" |
         Set-Content -Encoding UTF8 vvergleich-vendor.css

   Warum ab Byte 38: Die Anbieterdatei beginnt mit
       body, html { margin:0; padding: 0 }
   Genau diese 37 Bytes sind laut Einbauanleitung NICHT zu uebernehmen - sie
   wuerden die Aussenabstaende unserer gesamten Seite zuruecksetzen. Ab
   Byte 38 beginnt der Teil mit "#vvergleich".

   Warum die Schicht "vendor": Von den 574 Selektoren der Anbieterdatei sind
   rund 180 NICHT auf #vvergleich begrenzt (.freeze, .freeze *, .hilfehidden,
   #detailFragen, #tbl_before, table#tbl_GesellListe und weitere). In der
   untersten Schicht koennen sie unser Layout nicht ueberschreiben, ohne dass
   eine einzige Fremdregel angefasst werden muss. Die Schichtreihenfolge ist
   im Kopf von main.css festgelegt.

   Nach jeder Aenderung der Optik im Adminbereich des Anbieters muss der
   Befehl erneut laufen - die Einstellungen werden dort in genau diese
   CSS-Datei geschrieben.
   ==========================================================================
   HINWEIS ZU EXTERNEN BILDERN
   ==========================================================================
   Die Anbieterdatei laedt acht Hintergrundbilder von res.makler-bund.de
   (Hilfe-Symbole, Pfeile, Tipp-Marken). Das ist eine dritte Domain neben
   money-factory.de und mr-money.de. Folgen:
     - In der Datenschutzerklaerung benannt (Abschnitt Vergleichsrechner).
     - In der CSP-Vorlage der .htaccess unter img-src eingetragen.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Einbettung in unser Layout
   -------------------------------------------------------------------------- */

/* Die Anbieterdatei setzt #vvergleich auf feste 680 Pixel. Das war die
   Bildschirmbreite, fuer die das Modul einmal gebaut wurde. Hier bekommt es
   die Breite, die die Seite gerade hergibt.

   ZU PRUEFEN NACH DEM ERSTEN ECHTEN VERGLEICH: Die Ergebnisansicht liegt
   im selben #vvergleich und wird damit ebenfalls breiter. Ihre Tabellen
   bringen eigene Breiten mit und sollten unveraendert stehen - nachsehen
   laesst sich das erst mit einer echten Berechnung. */
.calculator #vvergleich,
.calculator [id^="vvergleich"] {
    width: auto;
    max-width: 100%;
}

/* Fremde Tabellen brechen auf schmalen Geraeten sonst das Layout auf. */
.calculator table {
    max-width: 100%;
}

/* Einzelne Bloecke des Anbieters sind fest positioniert und lassen sich
   nicht umbrechen - etwa die Koerpergrafik der Gliedertaxe in der
   Unfallversicherung, die 594 Pixel breit baut. Auf schmalen Geraeten
   bekommt die Karte dafuer einen waagerechten Rollbalken. Das ist die
   ehrlichere Loesung als die Grafik zu verkleinern: Ihre Eingabefelder
   waeren dann zu klein zum Treffen. */
.calculator {
    overflow-x: auto;
}

/* Der Ladebalken des Moduls uebernimmt unsere Markenfarben.

   HIER STEHT DAS EINZIGE !important DIESER DATEI.
   Der Balken bringt seine Gestaltung als style-Attribut am Element mit;
   ohne !important bliebe er grau. Angefasst werden ausschliesslich Rahmen,
   Hintergrundfarbe und Radius - Eigenschaften, die das Modul nie
   umschaltet. Sein display bleibt unberuehrt, und genau darauf kommt es an:
   Der Balken wird per JavaScript ein- und ausgeblendet. */
.calculator #rlv_loading_bar {
    border: 1px solid var(--mf-border) !important;
    background-color: var(--mf-grey-050) !important;
    border-radius: var(--mf-radius) !important;
    color: var(--mf-text-muted);
}
/* --------------------------------------------------------------------------
   Die Ueberschrift des Moduls
   --------------------------------------------------------------------------
   Die Module bringen ihre Ueberschrift als H1 mit. Weil auf der Seite schon
   eine H1 steht, macht mf_rechner_html_anpassen() (/inc/rechner.php) eine H2
   daraus und vergibt dabei diese Klasse.

   Ohne die folgende Regel liefe die umgewandelte Ueberschrift in
       #vvergleich h2 { font-size: 14px; font-weight: bold; color: #ff0000; }
   aus der Anbieterdatei und stuende gross und rot ueber dem Formular.

   Die Anbieterregel bleibt unangetastet - sie gilt auch fuer die echten
   Zwischenueberschriften des Moduls. Angesprochen wird ausschliesslich die
   eine Ueberschrift, die wir selbst umgewandelt haben. Deshalb genuegt hier
   auch kein !important und es steht keines da.
   -------------------------------------------------------------------------- */

.calculator .mf-rechner-titel {
    color: var(--mf-text);
    font-size: var(--mf-fs-h3);
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 var(--mf-space-4);
}

/* ==========================================================================
   DAS EINGABEFORMULAR IN DER FORMULARSPRACHE DER SEITE
   ==========================================================================
   WAS HIER PASSIERT
   --------------------------------------------------------------------------
   Der Anbieter baut sein Formular als Float-Raster mit festen Pixelbreiten:
   Beschriftung 232px rechtsbuendig, Hilfe-Symbol 24px, Bedienelement 340px,
   Trennlinie unter jeder Zeile. Unsere eigenen Formulare (siehe /kontakt)
   folgen einem anderen Muster: Beschriftung linksbuendig UEBER dem Feld,
   Feld ueber die volle Spaltenbreite, keine Zeilenlinien, mehr Luft.

   Diese Datei bringt das Modul auf das zweite Muster.

   --------------------------------------------------------------------------
   DIE SICHERHEITSREGEL - BITTE LESEN, BEVOR HIER ETWAS GEAENDERT WIRD
   --------------------------------------------------------------------------
   Am 10.09.2026 hat ein frueherer Versuch das Modul unbedienbar gemacht.
   Die Ursache war NICHT, dass Layout-Eigenschaften angefasst wurden. Die
   Ursache war eine einzige Zeile:

       .calculator #vvergleich * { all: revert-layer !important; }

   In der Kaskade schlaegt ein !important aus einer Datei das style-Attribut
   am Element. Die Module steuern ihre Schritte aber genau darueber: 48
   Elemente auf dieser Seite tragen ein Inline-display:none, das ihr
   JavaScript umschaltet. Alle 48 wurden ueberschrieben - Foto-Erkennung,
   Erfolgsmeldung und Fehlerformular standen gleichzeitig auf der Seite.

   Daraus die Regel, die fuer ALLES unterhalb dieser Zeile gilt:

       KEIN !important - und schon gar nicht auf display, visibility,
       position oder z-index.

   Ohne !important gewinnt jedes style-Attribut des Moduls gegen jede Regel
   hier. (Eine einzige Ausnahme steht weiter oben beim Ladebalken; sie ist
   dort begruendet und fasst ausschliesslich Rahmen und Hintergrundfarbe an,
   also nichts, was das Modul jemals umschaltet.) Das Modul behaelt damit die Hoheit ueber sein Verhalten, waehrend
   wir die Hoheit ueber sein Aussehen bekommen. Deshalb duerfen float, width
   und display hier stehen: Sie ordnen nur das an, was das Modul ohnehin
   zeigt - und sie verlieren in dem Augenblick, in dem das Modul selbst
   etwas anderes vorgibt.

   Zwei weitere Punkte:
     - Nur die ECHTEN Klassennamen des Anbieters ansprechen (unten
       aufgefuehrt), nie blanke Element-Selektoren wie "td" oder "select",
       die auch die Ergebnisansicht traefen.
     - Jede Aenderung VOR der Auslieferung am echten Modul im Browser
       pruefen. Ein Nachbau bestaetigt nur die eigene Annahme.

   Erste Wahl bleibt der Adminbereich des Anbieters: Dort entsteht
   headervgl_layout1.css, und dort Eingestelltes ueberlebt jedes Update.

   --------------------------------------------------------------------------
   DAS RASTER DES MODULS (am 10.09.2026 live ausgelesen)
   --------------------------------------------------------------------------
     .eingabeBox                          Formular
       .line                              eine Zeile
         .cell.sp1                        Beschriftung   (232px, rechts)
         .cell.sp3                        Hilfe-Symbol   ( 24px)
         .cell.sp2                        Bedienelement  (340px)
         .cell.sp1_6                      volle Breite   (674px)
       .line.header_line > .cell.header   Titel des Moduls (ein div, kein
                                          Heading - deshalb eigene Regel)
       .cell.zw_ue                        Abschnittsueberschrift
       select.form-select, input.form-text, input.form-checkbox
       a.infoicon                         Hilfe-Symbol (Bild von
                                          res.makler-bund.de)
       .vvgl-aufnahme-head/-body          Einleitungssatz
     .eingabe-submit-btn .form-button     "Berechnen"
     .mrmoBoxZusatzfragenOptions          Filterauswahl
     .erstInfoChkBox                      Bestaetigung Erstinformation

   Die letzten drei liegen NEBEN .eingabeBox, nicht darin - deshalb stehen
   sie in den Selektoren ueberall mit dabei.

   WARUM HIER KEIN !important NOETIG IST
   Die Anbieterdatei liegt in der Schicht "vendor", diese Datei in keiner.
   Bei normalen Deklarationen gewinnt Ungeschichtetes gegen jede Schicht -
   unabhaengig von der Spezifitaet. ".calculator .eingabeBox .cell.sp1"
   schlaegt also "#vvergleich .eingabeBox .cell.sp1" der Anbieterdatei.
   ========================================================================== */

/* --- Die vier Bloecke des Formulars ------------------------------------- */
.calculator .eingabeBox,
.calculator .mrmoBoxZusatzfragenOptions,
.calculator .erstInfoChkBox,
.calculator .eingabe-submit-btn {
    width: auto;
    max-width: none;
}

/* --- Das Formular als Raster ---------------------------------------------
   Bis hierher stand jede Eingabe untereinander - auf einem breiten
   Bildschirm eine schmale Spalte mit viel Leerraum daneben und ueber 2000
   Pixel Hoehe. Das Raster legt zwei Spalten nebeneinander, sobald der Platz
   dafuer reicht, und faellt darunter von selbst auf eine zurueck. Auf dem
   Hausrat-Rechner sinkt die Hoehe dadurch von 2094 auf 1255 Pixel.

   minmax(min(24rem, 100%), 1fr) statt minmax(24rem, 1fr):
   Ohne das min() bliebe die Spur auch dann 24rem breit, wenn das Fenster
   schmaler ist - auf 390 Pixeln ragte das Formular dann aus der Karte.

   Warum das Raster hier sicher ist: Die direkten Kinder von .eingabeBox
   sind ausschliesslich .line-Elemente sowie style-, script- und verborgene
   Hilfsbloecke. Verborgene Elemente werden gar nicht erst zu Rasterfeldern,
   und die .clear-Hilfsdivs des Anbieters liegen INNERHALB der Zeilen, nicht
   daneben - sie erzeugen also keine leeren Felder. Am 10.09.2026 an zwei
   Sparten nachgesehen. */
/* WARUM :has(> .line) UND NICHT EINFACH .eingabeBox
   Die Module sind unterschiedlich tief verschachtelt. Bei Hausrat und Unfall
   haengen die Zeilen unmittelbar in .eingabeBox. Bei Wohngebaeude liegen 128
   Zeilen in Unterbloecken (.tabl_part_1, .tabl_part_2, .tabl_part_3 und
   einem zweiten, verschachtelten #detailFragen.eingabeBox) - dort haette ein
   Raster auf .eingabeBox nur die Unterbloecke verteilt und eine Spalte leer
   gelassen.

   :has(> .line) trifft genau den Block, in dem die Zeilen tatsaechlich
   liegen - unabhaengig davon, wie der Anbieter eine Sparte aufgebaut hat und
   ohne dass ein einziger seiner Blocknamen im Selektor steht. Neue Sparten
   und Anbieter-Updates greifen damit von selbst.

   Begrenzt auf .eingabeBox: Die Ergebnisansicht (.ergebnisBox) hat ebenfalls
   .line-Elemente und bleibt so unberuehrt. */
.calculator .eingabeBox:has(> .line),
.calculator .eingabeBox div:has(> .line) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
    column-gap: var(--mf-space-6);
    align-items: start;
}

/* Ein Block, der selbst Zeilen enthaelt, ist keine einzelne Eingabe neben
   anderen - er bekommt die ganze Breite und verteilt darin wieder auf zwei
   Spalten. */
.calculator .eingabeBox div:has(.line) {
    grid-column: 1 / -1;
}

/* Ueberschriften und die Zeilen, die der Anbieter selbst ueber die volle
   Breite baut (.sp1_6) - dazu gehoert etwa die Koerpergrafik der
   Gliedertaxe. */
.calculator .eingabeBox .line:has(.cell.sp1_6),
.calculator .eingabeBox .line.header_line,
.calculator .eingabeBox .line.zwischenueberschrift {
    grid-column: 1 / -1;
}

/* .erstInfoChkBox ist ein span - ohne Blockdarstellung greift max-width nicht. */
.calculator .erstInfoChkBox { display: block; }

/* --- Kasten im Kasten aufloesen ------------------------------------------
   Die Karte um den Rechner bringt bereits Rahmen und Hintergrund mit. */
.calculator .eingabeBox {
    font-family: inherit;
    border: 0;
    background: transparent;
}

/* --- Zeilen: Luft statt Linien ------------------------------------------- */
.calculator .eingabeBox .line {
    border-bottom: 0;
    background: transparent;
    padding: 0 0 1.15rem;
}

.calculator .eingabeBox .line:hover { background: transparent; }

/* --- Das Float-Raster aufloesen ------------------------------------------
   Beschriftung und Hilfe-Symbol nebeneinander, Bedienelement darunter. */
.calculator .eingabeBox .line .cell {
    float: none;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    font-family: inherit;
    line-height: 1.4;
}

.calculator .eingabeBox .cell.sp1 {
    display: inline-block;
    /* Platz fuer das Hilfe-Symbol daneben freihalten. Ohne die Begrenzung
       nimmt eine lange Beschriftung die ganze Zeile ein und schiebt das
       Symbol allein in die naechste. */
    max-width: calc(100% - 1.8rem);
    text-align: left;
    margin-bottom: 0.4rem;
    font-size: var(--mf-fs-sm);
    font-weight: 600;
    color: var(--mf-text);
}

.calculator .eingabeBox .cell.sp3 {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.3rem;
}

.calculator .eingabeBox .cell.sp2,
.calculator .eingabeBox .cell.sp1_6 { display: block; }

.calculator .eingabeBox .line label {
    font-size: var(--mf-fs-sm);
    color: var(--mf-text);
}

/* --- Hilfe-Symbol --------------------------------------------------------
   Das Bild des Anbieters bekam seine Groesse bisher aus der 24px-Spalte.
   Ohne die feste Spalte braucht es eine ausdrueckliche Angabe, sonst faellt
   es auf drei Pixel Breite zusammen. */
.calculator .eingabeBox a.infoicon {
    display: inline-block;
    width: 1.05rem;
    height: 1.05rem;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* --- Titel des Moduls ----------------------------------------------------
   Bei manchen Sparten ein div.cell.header, bei anderen eine Ueberschrift,
   die mf_rechner_html_anpassen() zu H2 macht. Beide Faelle abgedeckt. */
.calculator .eingabeBox .line.header_line,
.calculator .eingabeBox .cell.header {
    border: 0;
    background: transparent;
}

.calculator .eingabeBox .cell.header,
.calculator .mf-rechner-titel {
    font-size: var(--mf-fs-h3);
    font-weight: 700;
    line-height: 1.25;
    color: var(--mf-text);
    margin-bottom: var(--mf-space-3);
}

/* --- Abschnittsueberschriften -------------------------------------------- */
.calculator .eingabeBox .cell.zw_ue {
    padding-top: 1rem;
    padding-bottom: 0.35rem;
    font-size: var(--mf-fs-base);
    font-weight: 700;
    color: var(--mf-navy-900);
    text-align: left;
}

/* Das Modul zentriert Ueberschriften und Hinweise ueber das
   center-Element aus HTML-4-Zeiten. Der uebrige Seitentext steht
   linksbuendig, also auch dieser. Der Selektor ist auf .eingabeBox begrenzt
   und kann die Ergebnisansicht nicht erreichen. */
.calculator .eingabeBox center { text-align: left; }

/* --- Haekchenzeilen ------------------------------------------------------
   Bei Auswahlfeldern gehoert die Beschriftung ueber das Feld. Bei einem
   Haekchen nicht: Kaestchen und Beschriftung bilden ein Paar und stehen
   nebeneinander, sonst haengt das Kaestchen ohne Bezug unter dem Text. */
.calculator .eingabeBox .line:has(input.form-checkbox) .cell.sp1 {
    margin-bottom: 0;
}

.calculator .eingabeBox .line:has(input.form-checkbox) .cell.sp2 {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.4rem;
}

/* --- Einleitungssatz des Moduls -----------------------------------------
   Stand zentriert in einem center-Element aus HTML-4-Zeiten. */
.calculator .vvgl-aufnahme-head,
.calculator .vvgl-aufnahme-body {
    display: block;
    text-align: left;
}

.calculator .vvgl-aufnahme-head {
    font-size: var(--mf-fs-base);
    font-weight: 700;
    color: var(--mf-navy-900);
}

.calculator .vvgl-aufnahme-body {
    margin: 0.25rem 0 1.5rem;
    font-size: var(--mf-fs-sm);
    color: var(--mf-text-muted);
}

/* --- Bedienelemente ------------------------------------------------------
   Vorher 11px Schrift und 20px hoch. 2.25rem sind 36px und damit deutlich
   ueber den 24px, die WCAG 2.5.8 als Mindestgroesse eines Ziels verlangt. */
.calculator .eingabeBox select.form-select,
.calculator .eingabeBox input.form-text {
    width: 100%;
    max-width: none;
    min-height: 2.25rem;
    padding: 0.35rem 0.55rem;
    font-family: inherit;
    font-size: var(--mf-fs-sm);
    color: var(--mf-text);
    background: var(--mf-white);
    border: 1px solid var(--mf-border-input);
    border-radius: var(--mf-radius);
}

.calculator .eingabeBox input.form-checkbox {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--mf-gold-700);
}

/* --- Filterauswahl und Bestaetigung -------------------------------------- */
.calculator .mrmoBoxZusatzfragenOptions,
.calculator .erstInfoChkBox {
    font-family: inherit;
    font-size: var(--mf-fs-sm);
    line-height: 1.5;
    color: var(--mf-text);
}

.calculator .mrmoBoxZusatzfragenOptions label,
.calculator .erstInfoChkBox label { font-size: var(--mf-fs-sm); }

.calculator .mrmoBoxZusatzfragenOptions a,
.calculator .erstInfoChkBox a { color: var(--mf-gold-ink); }

/* --- Der zweite Knopf im Formular ----------------------------------------
   Manche Sparten bieten an, den bisherigen Versicherungsschein zu
   fotografieren ("Jetzt Fotos hochladen statt tippen"). Der Knopf traegt
   dieselbe Klasse .form-button wie "Berechnen", steht aber mitten im
   Formular in einem .info-Block. Er bekommt deshalb die Form unseres
   Sekundaerknopfes - "Berechnen" bleibt der einzige goldene und damit
   erkennbar die Hauptaktion. */
/* NUR der Hinweis ueber dem Foto-Knopf, erkennbar daran, dass ein Knopf
   darin steht.

   WARUM SO ENG: Die Klasse .info verwendet der Anbieter mehrfach. In der
   Unfallversicherung traegt sie auch den Erklaertext der Gliedertaxe - und
   der ist ABSOLUT POSITIONIERT und 57 Pixel breit. Von 11 auf 15 Pixel
   vergroessert wuchs er von 348 auf 653 Pixel Hoehe und lief quer ueber die
   Koerpergrafik. Am 10.09.2026 auf der Live-Seite nachgemessen. */
.calculator .eingabeBox .info:has(.form-button) {
    font-size: var(--mf-fs-sm);
    line-height: 1.5;
    color: var(--mf-text-muted);
}

.calculator .eingabeBox .form-button {
    min-height: 2.5rem;
    margin-top: 0.5rem;
    padding: 0 1.1rem;
    font-family: inherit;
    font-size: var(--mf-fs-sm);
    font-weight: 600;
    color: var(--mf-navy-900);
    background: var(--mf-white);
    border: 2px solid var(--mf-navy-900);
    border-radius: var(--mf-radius);
    cursor: pointer;
}

.calculator .eingabeBox .form-button:hover { background: var(--mf-grey-050); }


/* --- "Berechnen" ---------------------------------------------------------
   Kam als Standardknopf des Betriebssystems: grau, 18px hoch. Der Knopf
   sitzt NICHT in .eingabeBox, sondern daneben in .eingabe-submit-btn. Die
   Schaltflaeche "Zusenden" in der Ergebnisansicht traegt dieselbe Klasse
   .form-button und bleibt durch diese Einschraenkung unberuehrt. */
.calculator .eingabe-submit-btn { margin-top: 0.5rem; }

.calculator .eingabe-submit-btn .form-button {
    min-height: 2.75rem;
    padding: 0 1.75rem;
    font-family: inherit;
    font-size: var(--mf-fs-base);
    font-weight: 700;
    color: var(--mf-navy-900);
    background: var(--mf-gold-500);
    border: 2px solid var(--mf-gold-500);
    border-radius: var(--mf-radius);
    cursor: pointer;
}

.calculator .eingabe-submit-btn .form-button:hover {
    background: var(--mf-gold-600);
    border-color: var(--mf-gold-600);
}

/* Frueher stand hier ein "width: fit-content" fuer die Karte. Es sollte
   verhindern, dass das 680 Pixel breite Formular in einer 1136 Pixel
   breiten Flaeche verloren wirkt. Seit das Formular selbst die volle Breite
   nutzt, ist es ueberfluessig - die Karte verhaelt sich jetzt wie jeder
   andere Abschnitt der Seite. */


/* ==========================================================================
   DIE ERGEBNISANSICHT WIRD NICHT ANGEFASST
   --------------------------------------------------------------------------
   Alle Regeln oben sind auf .eingabeBox, .eingabe-submit-btn und die beiden
   Zusatzfelder begrenzt - also auf das Eingabeformular. Die Tarifliste mit
   ihren Preis-Tipp- und Leistungs-Tipp-Kennzeichnungen wird im Adminbereich
   des Anbieters gepflegt und bleibt dort in seiner Hand.
   ========================================================================== */