@charset "UTF-8";
/* =========================================================
   123tarifvergleich.de - Skin fuer Mr-Money-Vergleichsrechner
   Einbindung: &css_url=<URL dieser Datei> im Rechner-Link
   Basis-Layout von Mr-Money bleibt (Import), darueber Overrides
   ========================================================= */
@import url("https://www.mr-money.de/module/vglrechner/layouts/style-layout1-standard.css");
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700&display=swap");

:root{
  --tfv-green-dark:#2E7D52;
  --tfv-green-deep:#266945;
  --tfv-green-tint:#EAF4EE;
  --tfv-red:#B44830;
  --tfv-yellow:#F0A800;
  --tfv-text:#1F2A24;
  --tfv-muted:#5F6B64;
  --tfv-line:#E3E8E5;
  --tfv-field:#CBD3CE;
  --tfv-bg-soft:#F6F8F7;
  --tfv-radius:14px;
}

html,body{background:#FFFFFF!important;}
body{-webkit-font-smoothing:antialiased;}

/* ---------- Grundcontainer ---------- */
#vvergleich{
  width:100%!important;max-width:760px;margin:0 auto!important;padding:4px 2px 16px;box-sizing:border-box;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif!important;
  font-size:15px!important;line-height:1.45!important;color:var(--tfv-text)!important;background:transparent!important;
}
#vvergleich *{box-sizing:border-box;}
#vvergleich a{color:var(--tfv-green-dark);text-decoration:none;font-weight:600;}
#vvergleich a:hover{color:var(--tfv-green-deep);text-decoration:underline;}
#vvergleich center{text-align:center;}

/* ---------- Eingabemaske ---------- */
#vvergleich .eingabeBox{
  width:100%!important;margin:0 0 18px!important;
  border:1px solid var(--tfv-line)!important;border-radius:var(--tfv-radius);overflow:hidden;
  background:#FFFFFF;box-shadow:0 6px 24px #1F2A2414;
}
#vvergleich .eingabeBox .line{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;
  width:100%!important;padding:12px 20px;background:#FFFFFF!important;
  border-bottom:1px solid var(--tfv-line)!important;
}
/* per JS eingeblendete Zeilen (Kombirabatte) bekommen inline display:block */
#vvergleich .eingabeBox .line[style*="block"]{display:flex!important;}
#vvergleich .eingabeBox .line:last-child{border-bottom:0!important;}
#vvergleich .eingabeBox .line:hover{background:var(--tfv-bg-soft)!important;}
#vvergleich .eingabeBox .line .clear,
#vvergleich .eingabeBox .line br.clear{display:none!important;}
#vvergleich .eingabeBox .line .cell{
  float:none!important;width:auto!important;min-height:0!important;margin:0!important;padding:0!important;
  font-size:15px!important;line-height:1.4!important;
}

/* Kopfzeile */
#vvergleich .eingabeBox .line.header_line{padding:0;border-bottom:0!important;}
#vvergleich .eingabeBox .cell.header{
  flex:1 1 100%;background:var(--tfv-green-dark)!important;background-image:none!important;filter:none!important;
  color:#FFFFFF!important;padding:16px 20px!important;text-align:left!important;
  font-family:"Archivo",system-ui,sans-serif!important;font-size:19px!important;font-weight:700!important;letter-spacing:.1px;
}
#vvergleich .eingabeBox .cell.sp1_6{flex:1 1 100%;}
#vvergleich .eingabeBox .sub-sub-header center,
#vvergleich .eingabeBox .sub-header center{text-align:left;}
#vvergleich .vvgl-aufnahme-head{display:block;font-weight:700;font-size:15px;margin-bottom:2px;}
#vvergleich .vvgl-aufnahme-body{display:block;color:var(--tfv-muted);font-size:14px;}
#vvergleich #tr_info_versicherungsbedarf{background:var(--tfv-bg-soft)!important;}
#vvergleich #tr_telefonberatung .beratungPhone{width:16px;height:16px;margin-right:4px;}

/* Label | Info | Feld */
#vvergleich .eingabeBox .cell.sp1{
  flex:1 1 240px;order:1;text-align:left!important;color:var(--tfv-text)!important;
  font-weight:600!important;font-size:15px!important;
}
#vvergleich .eingabeBox .cell.sp1 label{font-size:15px!important;cursor:pointer;}
#vvergleich .eingabeBox .cell.sp3{order:2;flex:0 0 24px;text-align:center;}
#vvergleich .eingabeBox .cell.sp2{order:3;flex:1 1 280px;text-align:left;}

/* Info-Icon */
#vvergleich a.infoicon,
#vvergleich .eingabeBox a.infoicon{
  display:inline-block!important;width:22px!important;height:22px!important;padding:0!important;border-radius:50%;
  background:var(--tfv-green-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E7D52' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 11v6'/%3E%3Cpath d='M12 7.2v.1'/%3E%3C/svg%3E") center/14px no-repeat!important;
  vertical-align:middle;font-size:0!important;
}
#vvergleich a.infoicon:hover{background-color:#D5EADD!important;}

/* Selects & Textfelder */
#vvergleich select.form-select,
#vvergleich .eingabeBox .form-select,
#vvergleich input.form-text,
#vvergleich .eingabeBox .form-text{
  width:100%;max-width:100%;height:46px;padding:0 40px 0 14px!important;
  font-size:16px!important;color:var(--tfv-text)!important;font-family:inherit;
  border:1px solid var(--tfv-field)!important;border-radius:10px!important;background-color:#FFFFFF!important;
  transition:border-color .15s,box-shadow .15s;
}
#vvergleich input.form-text,#vvergleich .eingabeBox .form-text{padding:0 14px!important;}
#vvergleich select.form-select{
  -webkit-appearance:none;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E7D52' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 12px center!important;background-size:18px!important;
}
#vvergleich select.form-select:hover,#vvergleich input.form-text:hover{border-color:var(--tfv-green-dark)!important;}
#vvergleich select.form-select:focus,#vvergleich input.form-text:focus{
  outline:none;border-color:var(--tfv-green-dark)!important;box-shadow:0 0 0 3px #2E7D5233;
}
#vvergleich .select_markiert{background-color:#FFF6DC!important;border-color:var(--tfv-yellow)!important;}

/* Checkboxen */
#vvergleich input[type=checkbox],
#vvergleich input.form-checkbox{
  width:20px;height:20px;margin:0 8px 0 0!important;accent-color:var(--tfv-green-dark);vertical-align:middle;cursor:pointer;
}
#vvergleich #tr_subheader_kombirabatt .cell,
#vvergleich #tr_kombirabatt_infotext .cell{color:var(--tfv-muted);font-size:14px!important;}
#vvergleich #tr_subheader_kombirabatt{background:var(--tfv-bg-soft)!important;}

/* Erstinformation */
#vvergleich .erstInfoChkBox{
  display:block;position:relative;padding:14px 16px 14px 46px;margin:0 0 14px;
  background:var(--tfv-bg-soft);border:1px solid var(--tfv-line);border-radius:12px;font-size:14px;line-height:1.5;
}
#vvergleich .erstInfoChkBox input{position:absolute;left:16px;top:15px;margin:0!important;}
#vvergleich #mrmoErstinfoError{color:var(--tfv-red);font-weight:600;font-size:14px;margin:-6px 0 12px;}

/* ---------- Buttons ---------- */
#vvergleich input.form-button,
#vvergleich .vergleichbutton,
#vvergleich a.lnk_antrag,
#vvergleich .ergebnisBox .cell a.antrag,
#dialog-box a.button_send{
  display:inline-block;background:var(--tfv-green-dark)!important;background-image:none!important;filter:none!important;
  color:#FFFFFF!important;border:0!important;border-radius:999px!important;box-shadow:0 4px 14px #2E7D5240!important;
  font-family:"Archivo",system-ui,sans-serif!important;font-weight:700!important;font-size:16px!important;line-height:1.2!important;
  padding:14px 30px!important;margin:4px 0 12px!important;cursor:pointer;text-decoration:none!important;
  transition:background-color .15s,transform .15s;
}
#vvergleich input.form-button:hover,
#vvergleich .vergleichbutton:hover,
#vvergleich a.lnk_antrag:hover,
#vvergleich .ergebnisBox .cell a.antrag:hover,
#dialog-box a.button_send:hover{background:var(--tfv-green-deep)!important;transform:translateY(-1px);}
#vvergleich input.btn-berechnen{min-width:240px;font-size:17px!important;}
#vvergleich .ergebnisBox .cell a.antrag,#vvergleich a.lnk_antrag{padding:10px 20px!important;font-size:14px!important;}

/* Sekundaer (Outline Rot): Zurueck / Neuer Vergleich / Angebot */
#vvergleich input.btn-zurueck,
#vvergleich input.btn-neuervgl,
#vvergleich .ergebnisBox .cell a.angebot,
#dialog-box a.button{
  background:#FFFFFF!important;color:var(--tfv-red)!important;border:1.5px solid var(--tfv-red)!important;
  border-radius:999px!important;box-shadow:none!important;font-weight:700!important;padding:10px 20px!important;
}
#vvergleich input.btn-zurueck:hover,#vvergleich input.btn-neuervgl:hover,
#vvergleich .ergebnisBox .cell a.angebot:hover{background:#FBEFEC!important;}

/* Rechtstexte unten */
#vvergleich p{color:var(--tfv-muted);font-size:12.5px;line-height:1.5;}

/* ---------- Ergebnisliste ---------- */
#vvergleich .ergebnisBox-out,#vvergleich #ergebnisBox-out{width:100%!important;border-bottom:0!important;}
#vvergleich .ergebnisBox{
  border:1px solid var(--tfv-line)!important;border-radius:12px;margin:0 0 12px!important;overflow:hidden;background:#FFFFFF!important;
}
#vvergleich .ergebnisBox.ergebnisHeader{
  background:var(--tfv-bg-soft)!important;background-image:none!important;color:var(--tfv-text)!important;font-weight:700;
}
#vvergleich .ergebnisBox.ergebnisHeader a{color:var(--tfv-text)!important;}
#vvergleich .ergebnisBox .position{background:var(--tfv-green-dark)!important;color:#FFFFFF!important;border-radius:0 0 8px 0;}
#vvergleich .ergebnisBox .cell.sp5,#vvergleich .ergebnisBox .cell.sp5 *{color:var(--tfv-text)!important;font-weight:700;}
#vvergleich .ergebnisBox.tipp .tipp_header,
#vvergleich .ergebnisBox.preisTipp .tipp_header,
#vvergleich .ergebnisBox.leistungTipp .tipp_header,
#vvergleich .ergebnisBox.preisleistungTipp .tipp_header{
  background:var(--tfv-green-tint)!important;background-image:none!important;color:var(--tfv-green-deep)!important;font-weight:700;
}
#vvergleich .ergebnisBox .balken{border-radius:6px;overflow:hidden;}
#vvergleich table .row-header td,#vvergleich table .row-header th,
#vvergleich .table-berechnung .row-header td,
table#tbl_GesellListe .row-header td,table#tbl_vorgaben .row-header td{
  background:var(--tfv-green-dark)!important;background-image:none!important;color:#FFFFFF!important;
}
#vvergleich .row-antrag{background:var(--tfv-green-tint)!important;}
#vvergleich .ui-widget-header{background:var(--tfv-green-dark)!important;border-color:var(--tfv-green-dark)!important;color:#FFFFFF!important;}
#vvergleich .ui-state-default,#vvergleich .ui-widget-content .ui-state-default{border-color:var(--tfv-green-dark)!important;}
#vvergleich p.error{border:1px solid var(--tfv-red)!important;background:#FBEFEC!important;color:var(--tfv-red)!important;border-radius:10px;font-size:14px;}

/* Dialog / Tooltip */
#dialog-box{border-radius:14px!important;overflow:hidden;box-shadow:0 20px 50px #1F2A2440!important;}
#BubbleValue,#tiptip_content{background:var(--tfv-text)!important;color:#FFFFFF!important;border:0!important;border-radius:8px!important;font-size:13px!important;padding:8px 10px!important;}

/* ---------- Feinschliff Ergebnisseite ---------- */
#vvergleich .ergebnisBox.ergebnisHeader .line .cell,
#vvergleich .ergebnisBox.ergebnisHeader .line .cell *{color:var(--tfv-text)!important;}
#vvergleich .vergleichbutton,#vvergleich .vergleichbutton *{color:#FFFFFF!important;}
/* Sekundaer-Buttons (Eingaben aendern / Neuer Vergleich) wieder rot lesbar */
#vvergleich input.form-button.btn-zurueck,
#vvergleich input.form-button.btn-neuervgl{color:#B44830!important;background:#FFFFFF!important;}
#vvergleich .vergleichbutton-box{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
#vvergleich .vergleichbutton-box .vergleichbutton,
#vvergleich .vergleichbutton-box input.form-button{margin:0!important;}
#vvergleich input[type=text]:not(.form-text),
#vvergleich input[type=email]{
  height:44px;padding:0 14px!important;font-size:15px!important;font-family:inherit;color:var(--tfv-text);
  border:1px solid var(--tfv-field)!important;border-radius:10px!important;background:#FFFFFF;vertical-align:middle;
}
#vvergleich input[type=text]:focus,#vvergleich input[type=email]:focus{outline:none;border-color:var(--tfv-green-dark)!important;box-shadow:0 0 0 3px #2E7D5233;}

/* ---------- Radio-Buttons (alle Rechner) ---------- */
#vvergleich input[type=radio]{
  width:20px;height:20px;margin:0 10px 0 0!important;accent-color:var(--tfv-green-dark);vertical-align:middle;cursor:pointer;flex:0 0 20px;
}

/* ---------- Vergleichstiefe / Filterauswahl (z. B. PHV) ---------- */
#vvergleich .mrmoBoxZusatzfragenOptions{
  margin:0 0 18px;padding:18px 20px;background:#FFFFFF;border:1px solid var(--tfv-line);border-radius:var(--tfv-radius);
  box-shadow:0 6px 24px #1F2A2414;
}
#vvergleich .mrmoBoxZusatzfragenOptions p.zusatzfragen{margin:0 0 10px!important;color:var(--tfv-text)!important;font-size:15px!important;}
#vvergleich .mrmoBoxZusatzfragenOptions p.zusatzfragen:first-child strong{font-size:0;}
#vvergleich .mrmoBoxZusatzfragenOptions p.zusatzfragen:first-child strong::before{
  content:"Vergleichstiefe (bitte Auswahl treffen)";font-family:"Archivo",system-ui,sans-serif;font-size:17px;font-weight:700;color:var(--tfv-text);
}
#vvergleich .mrmoBoxZusatzfragenOptions label{
  display:flex;align-items:flex-start;gap:0;padding:14px 16px;border:1.5px solid var(--tfv-field);border-radius:12px;cursor:pointer;
  background:#FFFFFF;line-height:1.45;transition:border-color .15s,background-color .15s;
}
#vvergleich .mrmoBoxZusatzfragenOptions label:hover{border-color:var(--tfv-green-dark);}
#vvergleich .mrmoBoxZusatzfragenOptions label:has(input:checked){border-color:var(--tfv-green-dark);background:var(--tfv-green-tint);}
#vvergleich .mrmoBoxZusatzfragenOptions label input{margin-top:1px!important;}
#vvergleich #mrmoZusatzfragenError{color:var(--tfv-red);font-weight:600;font-size:14px;}
#vvergleich #box_eu .eingabeBox{margin-top:0!important;}
#vvergleich #box_eu,#vvergleich #detailFragen{width:100%!important;max-width:100%!important;}

/* ---------- Gruppenueberschriften nur Privathaftpflicht ---------- */
.mrmo-sparte-phv #vvergleich #tr_vorvers5::before,
.mrmo-sparte-phv #vvergleich #tr_ausfall::before{
  flex:1 1 100%;order:0;display:block;margin:-12px -20px 6px;padding:12px 20px;
  background:var(--tfv-bg-soft);border-bottom:1px solid var(--tfv-line);
  font-family:"Archivo",system-ui,sans-serif;font-size:15px;font-weight:700;color:var(--tfv-green-deep);letter-spacing:.2px;
}
.mrmo-sparte-phv #vvergleich #tr_vorvers5::before{content:"1 \0000B7  Pers\0000F6nliche Angaben";}
.mrmo-sparte-phv #vvergleich #tr_ausfall::before{content:"2 \0000B7  Gew\0000FCnschter Versicherungsschutz";}
.mrmo-sparte-phv #vvergleich #tr_rabattangaben{background:var(--tfv-bg-soft)!important;}
.mrmo-sparte-phv #vvergleich #tr_rabattangaben center{text-align:left;}
.mrmo-sparte-phv #vvergleich #tr_rabattangaben strong{font-size:0;}
.mrmo-sparte-phv #vvergleich #tr_rabattangaben strong::before{
  content:"3 \0000B7  Tarif- und Vorschadenangaben";font-family:"Archivo",system-ui,sans-serif;font-size:15px;font-weight:700;color:var(--tfv-green-deep);
}
@media (max-width:620px){
  .mrmo-sparte-phv #vvergleich #tr_vorvers5::before,
  .mrmo-sparte-phv #vvergleich #tr_ausfall::before{margin:-12px -14px 6px;padding:12px 14px;}
}

/* ---------- Mobile ---------- */
@media (max-width:620px){
  #vvergleich .eingabeBox .line{padding:12px 14px;}
  #vvergleich .eingabeBox .cell.sp1{flex:1 1 calc(100% - 40px);}
  #vvergleich .eingabeBox .cell.sp2{flex:1 1 100%;}
  #vvergleich input.btn-berechnen{width:100%;min-width:0;}
  #vvergleich .ergebnisBox-out,#vvergleich .ergebnisBox{width:100%!important;}
}